@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/restaurant/lib/demo.ts

@@ -0,0 +1,144 @@
+// Demo reservations for local development.
+//
+// `pylon dev` fills an empty reservation book with fictional tables from the
+// past week and the next two weeks, so the calendar shows fewer tables left
+// (and some full seatings) and the owner dashboard has a book to run. Both
+// read the same rows: every active demo Reservation gets its ReservationSlot
+// marker, exactly like createReservation writes.
+//
+// A deploy does not seed: `demoDataEnabled` is true only when PYLON_DEMO_DATA is
+// on, or when it is unset and the process runs under `pylon dev`. Set PYLON_DEMO_DATA=0 to
+// turn it off in development too.
+//
+// Pure data + pure shaping, so functions/seedDemo.ts stays a thin wrapper and
+// this file is testable without a server.
+
+import { localDateKey, seatingsForDay, weekdayOf } from "./slots";
+import type { RestaurantConfig } from "./site.config";
+
+const ON = new Set(["1", "true", "yes", "on"]);
+const OFF = new Set(["0", "false", "no", "off"]);
+
+/**
+ * True when demo rows may be written. An explicit PYLON_DEMO_DATA wins.
+ * Otherwise it needs both PYLON_DEV_MODE on and PYLON_DEV_WATCH_DIR set. Only
+ * `pylon dev` sets PYLON_DEV_WATCH_DIR; `pylon start` and the Docker image do
+ * not, and the image turns PYLON_DEV_MODE on by default, so dev mode alone is
+ * not proof of a local machine.
+ */
+export function demoDataEnabled(env: Record<string, string | undefined>): boolean {
+  const explicit = env.PYLON_DEMO_DATA?.trim().toLowerCase();
+  if (explicit && ON.has(explicit)) return true;
+  if (explicit && OFF.has(explicit)) return false;
+  const dev = env.PYLON_DEV_MODE?.trim().toLowerCase();
+  const devMode = dev === "1" || dev === "true";
+  return devMode && Boolean(env.PYLON_DEV_WATCH_DIR?.trim());
+}
+
+const GUESTS = [
+  "Ana Whitaker", "James Osei", "Priya Raman", "Tom Alvarez", "Claire Dubois", "Marcus Iyer",
+  "Leah Goldberg", "Noah Fischer", "Sofia Marin", "Daniel Park", "Grace Mensah", "Henry Walsh",
+  "Isabel Cruz", "Owen Reilly", "Nadia Haddad", "Ethan Brooks", "Maya Tanaka", "Luca Romano",
+  "Zoe Bennett", "Samir Khan", "Ruth Castillo", "Felix Wagner", "Hana Sato", "Diego Vega",
+];
+const NOTES = [
+  "Anniversary dinner",
+  "One guest is vegetarian",
+  "Window table if possible",
+  "Celebrating a birthday",
+  "Shellfish allergy",
+  "Arriving from the theater, may run 10 minutes late",
+];
+
+/** Small deterministic PRNG (mulberry32) so the demo set is stable per seed. */
+function rng(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export interface DemoReservation {
+  startsAt: string;
+  partySize: number;
+  customerName: string;
+  customerEmail: string;
+  customerPhone: string | null;
+  notes: string | null;
+  status: "pending" | "confirmed" | "cancelled";
+  createdAt: string;
+}
+
+type Cfg = Pick<RestaurantConfig, "reservations">;
+
+/**
+ * Reservations on open days from 7 days ago to 13 days ahead, on the seating
+ * grid. Active reservations never exceed `tablesPerSlot` at one seating.
+ * Weekend evenings around 7–8 PM fill up; early and late seatings stay light.
+ */
+export function demoReservations(nowMs: number, cfg: Cfg, seed = 5): DemoReservation[] {
+  const r = cfg.reservations;
+  const rand = rng(seed);
+  const out: DemoReservation[] = [];
+
+  for (let offset = -7; offset <= 13; offset++) {
+    const day = localDateKey(offset, nowMs);
+    const dow = weekdayOf(day);
+    const hours = r.hours[dow];
+    if (!hours) continue;
+    const seatings = seatingsForDay({
+      dayISODate: day,
+      open: hours.open,
+      close: hours.close,
+      slotMinutes: r.slotMinutes,
+      leadTimeHours: 0,
+      nowMs: 0,
+    });
+    const weekend = dow === 5 || dow === 6;
+    // Nearer dates are more booked than dates two weeks out.
+    const horizon = offset <= 3 ? 1 : offset <= 8 ? 0.7 : 0.4;
+    for (const seat of seatings) {
+      const hour = new Date(seat.startsAt).getHours();
+      const peak = hour >= 19 && hour < 21 ? 1 : hour >= 18 && hour < 22 ? 0.6 : 0.3;
+      const expected = r.tablesPerSlot * peak * horizon * (weekend ? 0.95 : 0.5);
+      let tables = Math.min(r.tablesPerSlot, Math.round(expected + (rand() - 0.4) * 2));
+      if (tables < 0) tables = 0;
+      const start = Date.parse(seat.startsAt);
+      let active = 0;
+      for (let t = 0; t < tables + 1 && active < r.tablesPerSlot; t++) {
+        // The extra pass may add a cancelled row, which frees its table.
+        const extra = t === tables;
+        if (extra && rand() > 0.15) break;
+        const past = start <= nowMs;
+        const roll = rand();
+        const status: DemoReservation["status"] = extra
+          ? "cancelled"
+          : past
+            ? "confirmed"
+            : roll < 0.86
+              ? "confirmed"
+              : "pending";
+        if (status !== "cancelled") active++;
+        const name = GUESTS[Math.floor(rand() * GUESTS.length)];
+        const [first, last] = name.toLowerCase().split(" ");
+        const party = rand() < 0.55 ? 2 : Math.min(r.maxPartySize, 3 + Math.floor(rand() * 4));
+        const bookedAt = Math.min(nowMs - 3_600_000, start - (1 + Math.floor(rand() * 10)) * 86_400_000);
+        out.push({
+          startsAt: seat.startsAt,
+          partySize: party,
+          customerName: name,
+          customerEmail: `${first}.${last}@example.com`,
+          customerPhone: rand() < 0.75 ? `(214) 555-01${String(Math.floor(rand() * 100)).padStart(2, "0")}` : null,
+          notes: rand() < 0.18 ? NOTES[Math.floor(rand() * NOTES.length)] : null,
+          status,
+          createdAt: new Date(bookedAt).toISOString(),
+        });
+      }
+    }
+  }
+  return out;
+}

package/templates/restaurant/lib/hours.ts

@@ -0,0 +1,45 @@
+// Weekly hours as display rows, from `siteConfig.reservations.hours` (the same
+// hours the reservation calendar uses), so the page cannot disagree with the
+// calendar. Consecutive days with the same hours share a row:
+// "Wed–Thu 5 PM–9:30 PM".
+
+import type { DayHours } from "./site.config";
+
+const DAY = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+// Rows run Monday to Sunday, the way a door sign lists them.
+const ORDER = [1, 2, 3, 4, 5, 6, 0];
+
+export interface HoursRow {
+  days: string;
+  time: string; // "5 PM–10 PM" or "Closed"
+  closed: boolean;
+}
+
+/** "09:00" → "9 AM", "18:30" → "6:30 PM". */
+export function clock(hhmm: string): string {
+  const [h, m] = hhmm.split(":").map(Number);
+  const suffix = h >= 12 ? "PM" : "AM";
+  const h12 = h % 12 === 0 ? 12 : h % 12;
+  return m ? `${h12}:${String(m).padStart(2, "0")} ${suffix}` : `${h12} ${suffix}`;
+}
+
+export function hoursRows(hours: Record<number, DayHours>): HoursRow[] {
+  const rows: { first: number; last: number; time: string }[] = [];
+  for (const d of ORDER) {
+    const h = hours[d];
+    const time = h ? `${clock(h.open)}–${clock(h.close)}` : "Closed";
+    const prev = rows[rows.length - 1];
+    if (prev && prev.time === time) prev.last = d;
+    else rows.push({ first: d, last: d, time });
+  }
+  return rows.map((r) => ({
+    days: r.first === r.last ? DAY[r.first] : `${DAY[r.first]}–${DAY[r.last]}`,
+    time: r.time,
+    closed: r.time === "Closed",
+  }));
+}
+
+/** A Google Maps directions link for a street address. Needs no API key. */
+export function directionsUrl(address: string): string {
+  return `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(address)}`;
+}

package/templates/restaurant/lib/site.config.ts

@@ -57,8 +57,9 @@ export type RestaurantConfig = BaseConfig & {
   location: {
     headline: string;
     address: string;
+    // A Google Maps embed URL (Share → Embed a map → the iframe's src). When
+    // empty, the page shows the week's service hours beside the address.
     mapEmbedUrl?: string;
-    hoursText: string;
     phone: string;
     email: string;
   };
@@ -99,7 +100,7 @@ export const siteConfig: RestaurantConfig = {
       "Seasonal small plates, wood-fired mains, and a short natural-wine list. The reservation calendar shows current table availability.",
     ctaLabel: "Reserve a table",
     quickFacts: {
-      hours: "Wed–Sun, 5–10",
+      hours: "Wed–Sun from 5 PM",
       area: "Bishop Arts, Dallas",
       phone: "(214) 555-0172",
     },
@@ -194,7 +195,6 @@ export const siteConfig: RestaurantConfig = {
     headline: "Find us in Bishop Arts.",
     address: "412 N Bishop Ave, Dallas, TX 75208",
     mapEmbedUrl: "",
-    hoursText: "Wed–Thu 5–9:30 · Fri–Sat 5–10 · Sun 5–9 · Mon–Tue closed",
     phone: "(214) 555-0172",
     email: "hello@cedarandvine.example",
   },

package/templates/restaurant/tests/reservations.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, test } from "bun:test";
+import { demoDataEnabled, demoReservations } from "../lib/demo";
+import { clock, directionsUrl, hoursRows } from "../lib/hours";
+import { siteConfig } from "../lib/site.config";
+import { weekdayOf } from "../lib/slots";
+
+describe("hoursRows", () => {
+  test("groups days with the same service hours", () => {
+    expect(hoursRows(siteConfig.reservations.hours)).toEqual([
+      { days: "Mon–Tue", time: "Closed", closed: true },
+      { days: "Wed–Thu", time: "5 PM–9:30 PM", closed: false },
+      { days: "Fri–Sat", time: "5 PM–10 PM", closed: false },
+      { days: "Sun", time: "5 PM–9 PM", closed: false },
+    ]);
+  });
+  test("clock and directions link", () => {
+    expect(clock("21:30")).toBe("9:30 PM");
+    expect(directionsUrl("412 N Bishop Ave")).toContain("destination=412%20N%20Bishop%20Ave");
+  });
+});
+
+describe("demo reservations", () => {
+  test("only under `pylon dev` unless PYLON_DEMO_DATA says otherwise", () => {
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "1", PYLON_DEV_WATCH_DIR: "/src/app" })).toBe(true);
+    // The Docker base image turns dev mode on by default; without `pylon dev` it must not seed.
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "true" })).toBe(false);
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "false" })).toBe(false);
+    expect(demoDataEnabled({})).toBe(false);
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "true", PYLON_DEV_WATCH_DIR: "/src/app", PYLON_DEMO_DATA: "off" })).toBe(false);
+  });
+
+  const now = new Date(2026, 8, 26, 14, 0).getTime();
+  const rows = demoReservations(now, siteConfig);
+  const cfg = siteConfig.reservations;
+
+  test("never books more active tables than a seating has", () => {
+    const perSeat = new Map<string, number>();
+    for (const r of rows) {
+      if (r.status === "cancelled") continue;
+      perSeat.set(r.startsAt, (perSeat.get(r.startsAt) ?? 0) + 1);
+    }
+    expect(Math.max(...perSeat.values())).toBeLessThanOrEqual(cfg.tablesPerSlot);
+    // Some weekend seatings fill up, so the calendar shows "Full".
+    expect([...perSeat.values()].some((n) => n === cfg.tablesPerSlot)).toBe(true);
+  });
+
+  test("only on open days, within the seating window, with valid parties", () => {
+    for (const r of rows) {
+      const d = new Date(r.startsAt);
+      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+      const hours = cfg.hours[weekdayOf(key)];
+      expect(hours).not.toBeNull();
+      const hhmm = `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+      expect(hhmm >= hours!.open && hhmm <= hours!.close).toBe(true);
+      expect(r.partySize).toBeGreaterThanOrEqual(1);
+      expect(r.partySize).toBeLessThanOrEqual(cfg.maxPartySize);
+      expect(Date.parse(r.createdAt)).toBeLessThan(now);
+      if (r.customerPhone) expect(r.customerPhone).toMatch(/^\(214\) 555-01\d{2}$/);
+    }
+  });
+
+  test("past tables are confirmed; upcoming ones include some to confirm", () => {
+    const past = rows.filter((r) => Date.parse(r.startsAt) <= now && r.status !== "cancelled");
+    expect(past.every((r) => r.status === "confirmed")).toBe(true);
+    expect(rows.some((r) => Date.parse(r.startsAt) > now && r.status === "pending")).toBe(true);
+  });
+});

package/templates/saas/README.md

@@ -1,10 +1,11 @@
 # __APP_NAME__
 
 A full-stack, multi-tenant SaaS starter on [Pylon](https://pylonsync.com),
-branded as the fictional product **Acme**. It includes a server-rendered
-marketing site, first-run onboarding, email/password and Google auth,
-organizations with members and roles, tenant-scoped projects, and per-workspace
-Stripe billing. Pylon serves it from one process.
+branded as the fictional product **Acme**: project and task tracking for small
+teams. It includes a server-rendered marketing site, first-run onboarding with
+sample projects, email/password and Google auth, organizations with members
+and roles, tenant-scoped projects and task boards that update live, and
+per-workspace Stripe billing. Pylon serves it from one process.
 
 ## Develop
 
@@ -12,34 +13,38 @@ Stripe billing. Pylon serves it from one process.
 __RUN_DEV__
 ```
 
-Open http://localhost:4321 to load the Acme landing page. Sign up and create an
-organization to enter a workspace with tenant-scoped projects and a members
-panel. Create a second organization and switch between them; each one's data
-remains private. Editing a file under `app/` reloads the page.
+Open http://localhost:4321 to load the Acme landing page. Sign up, name a
+workspace, and pick **Start with sample projects** to land on a dashboard
+with two projects and 16 tasks. Open a project board in two tabs and change a
+task's status in one: the other updates within a second. Create a second
+workspace and switch between them; each one's data stays private. Editing a
+file under `app/` reloads the page.
 
 ## Layout
 
 ```
-app.ts                       User + Org/OrgMember/OrgInvite + Project + Stripe billing manifest
-app/page.tsx                 "/" — the server-rendered Acme landing page (auth-aware)
-app/layout.tsx               marketing nav + footer (rebrand "Acme")
-app/{products,solutions,resources,company,compare}/[slug]/   data-driven marketing pages
-app/login,signup/            email/password, email code, Google; forgot/reset password
-app/onboarding/              first-run wizard: workspace → invite → first project → plan (trial)
-app/pricing/                 monthly/annual plan table from lib/plans.ts
-app/dashboard/               "/dashboard" — authed; overview + getting-started checklist, projects, members, billing, settings
-app/dashboard/dashboard-client.tsx   the workspace client island
-app/{error,not-found}.tsx    hydrated error + 404 boundaries
-app/{robots,sitemap}.ts      /robots.txt + /sitemap.xml (enumerates every public page)
-functions/                   createProject (free-plan cap), onboarding + profile mutations, Stripe handlers
-lib/                         plans.ts (prices, cap, trial), billing.ts (@pylonsync/stripe), site.config.ts (copy)
-app/globals.css              Tailwind v4 + shadcn tokens (compiled by Pylon)
-components/ui/                shadcn primitives (Button, Card)
+app.ts                          User + Org/OrgMember/OrgInvite + Project + Task + Stripe billing manifest
+app/(marketing)/page.tsx        "/": the landing page (hero, product sections, quote, pricing, FAQ)
+app/(marketing)/layout.tsx      marketing nav + footer
+app/(marketing)/{products,solutions,resources,company,compare}/[slug]/   data-driven pages
+app/(auth)/                     /login, /signup, forgot/reset password
+app/onboarding/                 first-run wizard: workspace → invite → first project or samples → plan
+app/dashboard/                  overview, projects, projects/[id] (task board), members, billing, settings
+app/icon.svg, public/favicon.ico   the app icon
+app/{robots,sitemap,llms}.ts    /robots.txt, /sitemap.xml, /llms.txt
+functions/                      project + task mutations, seedWorkspace, onboarding, profile, Stripe handlers
+lib/site.config.ts              every piece of marketing copy, the products, and the colors
+lib/plans.ts                    prices, the free project cap, the trial length
+lib/tasks.ts                    task statuses, priorities, validation, ordering
+lib/sample-workspace.ts         the sample projects and tasks seedWorkspace adds
+public/screenshots/             dashboard captures the landing page shows
+scripts/capture-screenshots.mjs regenerates public/screenshots from the running app
+components/                     dashboard shell, task board pieces, marketing pieces, shadcn primitives
 ```
 
 ## How it works
 
-**The landing page** (`app/page.tsx`) is server-rendered React — view source and
+**The landing page** (`app/(marketing)/page.tsx`) is server-rendered React — view source and
 the copy + SEO `<head>` are in the HTML, so it's fully indexable. It reads the
 session during the render, so the call-to-action is "Get started" for visitors
 and "Open dashboard" once you're signed in — no flash, no client fetch.
@@ -51,25 +56,39 @@ visitors with a real 3xx before any HTML (works with JS off).
 **Multi-tenancy** is a framework primitive. Declaring `Org` / `OrgMember` /
 `OrgInvite` lights up `/api/auth/orgs/*` + `/api/auth/select-org`, driven by
 `<OrganizationSwitcher>` from `@pylonsync/client`. Your data lives in
-tenant-scoped entities (`Project`), gated by policy:
+tenant-scoped entities (`Project`, `Task`), gated by policy:
 
 ```ts
 allowRead:   "auth.tenantId == data.orgId"
-allowInsert: "auth.tenantId == data.orgId"
 ```
 
-So `db.useQuery("Project")` returns only your **active org's** projects — switch
-orgs and the list changes, and a client literally cannot read or write another
-tenant's rows. `db.useQuery` is live; `db.insert` is optimistic.
+So `db.useQuery("Project")` returns only your **active org's** projects, and
+switching orgs changes the list. `Task` uses the same read policy.
+
+Writes to projects and tasks go through server functions (`createProject`,
+`setProjectStatus`, `deleteProject`, `createTask`, `updateTask`,
+`deleteTask`). Each one loads the row, takes the workspace from the row, and
+calls `ctx.requireMember` for that workspace. The entity policies deny direct
+client writes, and `orgId` is `.readonly()`, so a client cannot move a row into
+another workspace or skip the free plan's project cap.
 
 ## Make it yours
 
-- **Rebrand:** replace "Acme" in `app/page.tsx` + `app/layout.tsx`.
-- **Edit the marketing copy:** the product / solution / compare pages read from
-  `lib/products.ts` + `lib/site.ts` — edit one entry and the nav dropdown, the
-  footer, and the `[slug]` page all follow (they can't drift).
-- **Add tenant data:** new `entity()` with an `orgId` + the same two policy
-  lines — a new tenant-scoped table, typed client and REST/realtime API included.
+- **Rebrand and edit the copy:** everything the marketing site says, including
+  the products, the quote, the FAQ, and the colors, lives in
+  `lib/site.config.ts`. Edit one entry and the landing page, the nav, the
+  footer, and the `[slug]` pages all follow. The quote and the "vs" pages are
+  placeholders; replace them or delete them.
+- **Replace the sample data:** edit `lib/sample-workspace.ts`, or remove the
+  "Start with sample projects" option in `app/onboarding/onboarding-client.tsx`.
+- **Refresh the screenshots:** after you change the dashboard, run
+  `pylon dev`, then `node scripts/capture-screenshots.mjs` (it needs
+  Playwright: `npm i -D playwright && npx playwright install chromium`). Use a
+  fresh development database so the captures show only the sample workspace.
+- **Add tenant data:** a new `entity()` with an `orgId: field.id("Org").readonly()`
+  and the same read policy gives you a tenant-scoped table with a typed client
+  and a REST and realtime API. Route its writes through functions that call
+  `ctx.requireMember`, as `functions/createTask.ts` does.
 - **Add a route:** drop `app/about/page.tsx` and visit `/about`.
 - **Change prices or the free cap:** edit `lib/plans.ts`. The pricing page, the
   Billing tab, and the server-side cap in `functions/createProject.ts` all read it.

package/templates/saas/app/(auth)/auth-form.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from "react";
 import { Link } from "@pylonsync/react";
+import { Lock, Mail, UserRound } from "lucide-react";
 import {
   passwordLogin,
   passwordRegister,
@@ -19,6 +20,7 @@ import {
 // engine's calls). Sign-up then lands on /onboarding, which creates the
 // workspace; sign-in lands on /dashboard.
 export function AuthForm({ mode }: { mode: "login" | "signup" }) {
+  const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [code, setCode] = useState("");
@@ -72,7 +74,11 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
       const session =
         mode === "login"
           ? await passwordLogin({ email, password })
-          : await passwordRegister({ email, password });
+          : await passwordRegister({
+              email,
+              password,
+              ...(name.trim() ? { displayName: name.trim() } : {}),
+            });
       persistSession(session);
       window.location.assign(destination);
     } catch (err) {
@@ -84,10 +90,23 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
   return (
     <div className="space-y-5">
       <form onSubmit={onSubmit} className="space-y-4">
+        {mode === "signup" && method === "password" ? (
+          <IconField
+            label="Full name"
+            type="text"
+            icon={<UserRound className="size-[15px]" strokeWidth={1.75} />}
+            value={name}
+            onChange={setName}
+            required
+            autoComplete="name"
+            maxLength={60}
+            placeholder="Dana Reyes"
+          />
+        ) : null}
         <IconField
           label="Email"
           type="email"
-          icon={<MailIcon />}
+          icon={<Mail className="size-[15px]" strokeWidth={1.75} />}
           value={email}
           onChange={setEmail}
           required
@@ -99,7 +118,7 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
           <IconField
             label="Password"
             type="password"
-            icon={<LockIcon />}
+            icon={<Lock className="size-[15px]" strokeWidth={1.75} />}
             value={password}
             onChange={setPassword}
             required
@@ -120,7 +139,7 @@ export function AuthForm({ mode }: { mode: "login" | "signup" }) {
           <IconField
             label="6-digit code"
             type="text"
-            icon={<LockIcon />}
+            icon={<Lock className="size-[15px]" strokeWidth={1.75} />}
             value={code}
             onChange={(v) => setCode(v.replace(/\D/g, "").slice(0, 6))}
             required
@@ -258,7 +277,7 @@ function IconField({
         <input
           value={value}
           onChange={(e) => onChange(e.target.value)}
-          className="h-10 w-full rounded-lg border border-zinc-300 bg-white pl-9 pr-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-zinc-900 focus:ring-2 focus:ring-zinc-900/10 disabled:bg-zinc-50 disabled:text-zinc-500"
+          className="h-10 w-full rounded-lg border border-zinc-200 bg-white pl-9 pr-3 text-sm text-zinc-900 shadow-[0_1px_1px_rgba(0,0,0,0.03)] outline-none transition placeholder:text-zinc-400 focus:border-zinc-400 focus:ring-4 focus:ring-zinc-900/5 disabled:bg-zinc-50 disabled:text-zinc-500"
           {...rest}
         />
       </span>
@@ -267,24 +286,6 @@ function IconField({
   );
 }
 
-function MailIcon() {
-  return (
-    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <rect x="3" y="5" width="18" height="14" rx="2" />
-      <path d="m3 7 9 6 9-6" />
-    </svg>
-  );
-}
-
-function LockIcon() {
-  return (
-    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <rect x="4" y="11" width="16" height="10" rx="2" />
-      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
-    </svg>
-  );
-}
-
 function GitHubIcon() {
   return (
     <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
@@ -310,6 +311,7 @@ function messageFor(err: unknown): string {
       case "INVALID_CREDENTIALS":
         return "Wrong email or password.";
       case "USER_EXISTS":
+      case "EMAIL_TAKEN":
         return "That email is already in use — sign in instead.";
       case "WEAK_PASSWORD":
         return "Pick a longer password — at least 10 characters.";

package/templates/saas/app/(auth)/forgot-password/page.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 export default function ForgotPasswordPage() {
   return (
     <>
-      <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">Reset your password</h1>
+      <h1 className="mt-10 text-[26px] font-semibold tracking-[-0.025em] text-zinc-950">Reset your password</h1>
       <p className="mt-1 text-[13px] text-zinc-500">Enter your email and we will send a reset link.</p>
       <div className="mt-6">
         <ForgotPasswordForm />

package/templates/saas/app/(auth)/layout.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { Link, type PageAuth, type SsrResponse } from "@pylonsync/react";
+import { siteConfig } from "@/lib/site.config";
 
 // `(auth)` route group → the shared split-screen frame for /login and /signup:
-// the form card on the left, a brand/testimonial panel on the right (hidden on
-// small screens). Each page supplies what differs — heading, switch link, and
+// the form on the left, a product screenshot on the right (hidden on small
+// screens). Each page supplies what differs — heading, switch link, and
 // the form — as `children`. The group segment adds no URL prefix, and because
 // these routes sit outside `(marketing)`, none of the site nav/footer renders
 // here.
@@ -22,46 +23,39 @@ export default function AuthLayout({ children, auth, response }: LayoutProps) {
     return null;
   }
   return (
-    <div className="grid min-h-screen bg-white lg:grid-cols-2">
+    <div className="grid min-h-screen bg-white lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]">
       {/* Form side */}
-      <div className="flex items-center justify-center px-6 py-12">
-        <div className="w-full max-w-[400px] rounded-2xl border border-zinc-200/70 p-8">
-          <Link href="/" className="inline-flex">
-            <span className="flex size-9 items-center justify-center rounded-xl bg-zinc-900 text-base font-bold text-white">
-              A
+      <div className="flex items-center justify-center px-4 py-12 sm:px-6">
+        <div className="w-full max-w-[380px]">
+          <Link href="/" className="inline-flex items-center gap-2">
+            <span className="flex size-8 items-center justify-center rounded-[9px] bg-zinc-950 text-[15px] font-bold text-white">
+              {siteConfig.brand.letter}
             </span>
+            <span className="text-[16px] font-semibold tracking-tight text-zinc-950">{siteConfig.brand.name}</span>
           </Link>
           {children}
         </div>
       </div>
 
-      {/* Brand / testimonial side */}
-      <div className="relative hidden flex-col justify-center bg-zinc-50 px-14 lg:flex">
-        <div className="max-w-md">
-          <div className="font-serif text-5xl leading-none text-zinc-300">
-            &ldquo;
-          </div>
-          <blockquote className="mt-2 text-[1.6rem] font-medium leading-snug tracking-tight text-zinc-900">
-            Acme gives our team one view of the work, from planning through
-            launch.
-          </blockquote>
-          <div className="mt-8 flex items-center gap-3">
-            <span className="flex size-10 items-center justify-center rounded-full bg-zinc-200 text-[13px] font-semibold text-zinc-500">
-              MC
-            </span>
-            <div className="leading-tight">
-              <div className="text-sm font-semibold text-zinc-900">
-                Maya Chen
-              </div>
-              <div className="text-[13px] text-zinc-500">
-                Head of Product, Northwind
-              </div>
-            </div>
+      {/* Product side: a capture of this app's own task board, cropped so it
+          runs off the right edge. */}
+      <div className="relative hidden overflow-hidden bg-zinc-50 lg:block">
+        <div
+          aria-hidden
+          className="absolute inset-0 bg-[radial-gradient(70%_60%_at_30%_20%,var(--brand-soft),transparent_70%)]"
+        />
+        <div className="relative flex h-full flex-col justify-center py-16 pl-14">
+          <p className="max-w-md text-[1.5rem] font-semibold leading-snug tracking-[-0.02em] text-zinc-950">
+            {siteConfig.hero.headline}
+          </p>
+          <div className="mt-10 w-[900px] rounded-l-[20px] bg-zinc-950/[0.035] py-2 pl-2 ring-1 ring-zinc-950/[0.06]">
+            <img
+              src="/screenshots/board.png"
+              alt="A project board in Acme"
+              className="block w-full rounded-l-[14px] shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_24px_48px_-24px_rgba(24,24,60,0.25)]"
+            />
           </div>
         </div>
-        <p className="absolute bottom-8 left-14 text-[13px] text-zinc-400">
-          Projects, docs, and automation. All in one place.
-        </p>
       </div>
     </div>
   );

package/templates/saas/app/(auth)/login/page.tsx

@@ -13,7 +13,7 @@ export const metadata: Metadata = {
 export default function LoginPage() {
   return (
     <>
-      <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
+      <h1 className="mt-10 text-[26px] font-semibold tracking-[-0.025em] text-zinc-950">
         Welcome back
       </h1>
       <p className="mt-1 text-[13px] text-zinc-500">

package/templates/saas/app/(auth)/reset-password/page.tsx

@@ -14,7 +14,7 @@ export default function ResetPasswordPage({ searchParams }: PageProps) {
   const token = Array.isArray(raw) ? raw[0] ?? "" : raw ?? "";
   return (
     <>
-      <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">Choose a new password</h1>
+      <h1 className="mt-10 text-[26px] font-semibold tracking-[-0.025em] text-zinc-950">Choose a new password</h1>
       <p className="mt-1 text-[13px] text-zinc-500">You will be signed in on every device after this.</p>
       <div className="mt-6">
         <ResetPasswordForm token={token} />