@pylonsync/create-pylon 0.3.374 → 0.3.376

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.374",
+  "version": "0.3.376",
   "description": "Scaffold a new Pylon app — realtime backend + web/mobile/expo frontends in one command. Run via `npm create @pylonsync/pylon@latest`.",
   "publishConfig": {
     "access": "public"

package/templates/saas/app/{auth-shell.tsx → (auth)/layout.tsx}

@@ -1,22 +1,26 @@
 import React from "react";
-import { Link } from "@pylonsync/react";
+import { Link, type PageAuth, type SsrResponse } from "@pylonsync/react";
 
-// Server-rendered split-screen shell for /login and /signup: the form on the
-// left, a brand/testimonial panel on the right (hidden on small screens). The
-// form itself (the client island) is passed in as `children`.
-export function AuthShell({
-  title,
-  switchPrompt,
-  switchLabel,
-  switchHref,
-  children,
-}: {
-  title: string;
-  switchPrompt: string;
-  switchLabel: string;
-  switchHref: string;
+// `(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 — as `children`. The group segment adds no URL prefix, and because
+// these routes sit outside `(marketing)`, none of the site nav/footer renders
+// here.
+interface LayoutProps {
   children: React.ReactNode;
-}) {
+  auth: PageAuth;
+  response: SsrResponse;
+}
+
+export default function AuthLayout({ children, auth, response }: LayoutProps) {
+  // Already signed in? Skip the auth screens entirely. Gating here covers
+  // every page in the group; `response.redirect` runs in the synchronous
+  // shell render, so it's a real 307 before any HTML is sent.
+  if (auth.user_id) {
+    response.redirect("/dashboard");
+    return null;
+  }
   return (
     <div className="grid min-h-screen bg-white lg:grid-cols-2">
       {/* Form side */}
@@ -27,19 +31,7 @@ export function AuthShell({
               A
             </span>
           </Link>
-          <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
-            {title}
-          </h1>
-          <p className="mt-1 text-[13px] text-zinc-500">
-            {switchPrompt}{" "}
-            <Link
-              href={switchHref}
-              className="font-medium text-zinc-900 underline underline-offset-2"
-            >
-              {switchLabel}
-            </Link>
-          </p>
-          <div className="mt-6">{children}</div>
+          {children}
         </div>
       </div>
 

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { Link, type Metadata } from "@pylonsync/react";
+import { AuthForm } from "../auth-form";
+
+export const metadata: Metadata = {
+  title: "Sign in — Acme",
+  robots: "noindex",
+};
+
+// `(auth)/login/page.tsx` → `/login`. The `(auth)` layout owns the
+// split-screen frame and the already-signed-in redirect; this page is just
+// the heading, the switch link, and the form.
+export default function LoginPage() {
+  return (
+    <>
+      <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
+        Welcome back
+      </h1>
+      <p className="mt-1 text-[13px] text-zinc-500">
+        New to Acme?{" "}
+        <Link
+          href="/signup"
+          className="font-medium text-zinc-900 underline underline-offset-2"
+        >
+          Create an account
+        </Link>
+      </p>
+      <div className="mt-6">
+        <AuthForm mode="login" />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Link, type Metadata } from "@pylonsync/react";
+import { AuthForm } from "../auth-form";
+
+export const metadata: Metadata = {
+  title: "Create your account — Acme",
+  robots: "noindex",
+};
+
+// `(auth)/signup/page.tsx` → `/signup`. Register mode of the same form; the
+// `(auth)` layout supplies the frame and the signed-in redirect.
+export default function SignupPage() {
+  return (
+    <>
+      <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
+        Create an account
+      </h1>
+      <p className="mt-1 text-[13px] text-zinc-500">
+        Already have an account?{" "}
+        <Link
+          href="/login"
+          className="font-medium text-zinc-900 underline underline-offset-2"
+        >
+          Sign in
+        </Link>
+      </p>
+      <div className="mt-6">
+        <AuthForm mode="signup" />
+      </div>
+    </>
+  );
+}

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

@@ -7,8 +7,8 @@ import { siteConfig } from "@/lib/site.config";
 // `(marketing)` is a ROUTE GROUP: the parens segment is stripped from every
 // URL (so `(marketing)/page.tsx` still serves `/`), and this layout wraps
 // only the pages inside the group — the marketing nav up top, a fat footer
-// below. Routes outside the group (/login, /signup, /dashboard) render bare
-// in the root shell; the dashboard brings its own sidebar shell.
+// below. The other sections bring their own layouts: `(auth)` the split-screen
+// frame, `dashboard/` the sidebar shell.
 //
 // A layout receives the page props plus `children`. `auth.user_id` is null for
 // anonymous visitors and the signed-in user's id otherwise — resolved

package/templates/saas/app/dashboard/billing/page.tsx

@@ -1,6 +1,5 @@
 import React, { use } from "react";
 import { type Metadata, type PageProps } from "@pylonsync/react";
-import { DashboardShell } from "@/components/dashboard-shell";
 import { Billing, type Subscription } from "../dashboard-client";
 
 export const metadata: Metadata = {
@@ -11,20 +10,15 @@ export const metadata: Metadata = {
 // `/dashboard/billing` — the active workspace's plan + Stripe checkout/portal.
 // The StripeSubscription row is resolved server-side (the @pylonsync/stripe
 // read policy scopes it to the active tenant), so the plan paints with no flash;
-// upgrade/manage open Stripe and the webhook keeps the row in sync.
+// upgrade/manage open Stripe and the webhook keeps the row in sync. Auth gate +
+// shell chrome come from the dashboard layout.
 const ACTIVE = ["active", "trialing", "past_due"];
 
 export default function BillingPage({ auth, response, serverData }: PageProps) {
-  if (!auth.user_id) {
-    response.redirect("/login");
-    return null;
-  }
   if (!auth.tenant_id) {
     response.redirect("/dashboard");
     return null;
   }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
-  const org = use(serverData.get<{ name?: string }>("Org", auth.tenant_id));
   const subs = use(serverData.list<Subscription>("StripeSubscription"));
   const subscription =
     subs.find(
@@ -33,17 +27,10 @@ export default function BillingPage({ auth, response, serverData }: PageProps) {
     subs[0] ??
     null;
   return (
-    <DashboardShell
-      active="billing"
-      title="Billing"
-      userEmail={me?.email ?? ""}
-      orgName={org?.name}
-    >
-      <Billing
-        tenantId={auth.tenant_id}
-        role={auth.roles?.[0] ?? ""}
-        subscription={subscription}
-      />
-    </DashboardShell>
+    <Billing
+      tenantId={auth.tenant_id}
+      role={auth.roles?.[0] ?? ""}
+      subscription={subscription}
+    />
   );
 }

package/templates/saas/app/dashboard/layout.tsx

@@ -0,0 +1,58 @@
+import React, { use } from "react";
+import type { PageAuth, ServerData, SsrResponse } from "@pylonsync/react";
+import { DashboardShell, NAV } from "@/components/dashboard-shell";
+
+// `app/dashboard/layout.tsx` wraps every /dashboard page in the sidebar +
+// top-bar shell, so no page repeats the chrome. This is the thin-server-
+// wrapper pattern: the layout gates auth, resolves the chrome's data
+// server-side (user email, org name), derives the active nav item + title
+// from the request URL, and hands the interactive shell (a `"use client"`
+// component) its props.
+interface LayoutProps {
+  children: React.ReactNode;
+  url: string;
+  auth: PageAuth;
+  response: SsrResponse;
+  serverData: ServerData;
+}
+
+export default function DashboardLayout({
+  children,
+  url,
+  auth,
+  response,
+  serverData,
+}: LayoutProps) {
+  // The layout renders before any page below it, so gating here protects the
+  // whole /dashboard section: signed-out visitors get a real 307 to /login
+  // and no page code runs.
+  if (!auth.user_id) {
+    response.redirect("/login");
+    return null;
+  }
+  // No active workspace: render the page bare — /dashboard shows the
+  // full-screen ProvisionWorkspace flow, and the subpages redirect back to
+  // /dashboard themselves. The shell's org switcher has nothing to show yet.
+  if (!auth.tenant_id) {
+    return <>{children}</>;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const org = use(serverData.get<{ name?: string }>("Org", auth.tenant_id));
+  // Longest matching NAV href wins so /dashboard/projects highlights
+  // Projects, not Overview.
+  const path = (url ?? "").split("?")[0];
+  const nav =
+    NAV.filter((n) => path === n.href || path.startsWith(n.href + "/")).sort(
+      (a, b) => b.href.length - a.href.length,
+    )[0] ?? NAV[0];
+  return (
+    <DashboardShell
+      active={nav.key}
+      title={nav.label}
+      userEmail={me?.email ?? ""}
+      orgName={org?.name}
+    >
+      {children}
+    </DashboardShell>
+  );
+}

package/templates/saas/app/dashboard/members/page.tsx

@@ -1,6 +1,5 @@
-import React, { use } from "react";
+import React from "react";
 import { type Metadata, type PageProps } from "@pylonsync/react";
-import { DashboardShell } from "@/components/dashboard-shell";
 import { Members } from "../dashboard-client";
 
 export const metadata: Metadata = {
@@ -10,30 +9,18 @@ export const metadata: Metadata = {
 
 // `/dashboard/members` — the active org's roster + invites. The roster (with
 // real emails) is loaded client-side from the framework's org-members endpoint;
-// invites are gated to owners/admins both here and on the server.
-export default function MembersPage({ auth, response, serverData }: PageProps) {
-  if (!auth.user_id) {
-    response.redirect("/login");
-    return null;
-  }
+// invites are gated to owners/admins both here and on the server. Auth gate +
+// shell chrome come from the dashboard layout.
+export default function MembersPage({ auth, response }: PageProps) {
   if (!auth.tenant_id) {
     response.redirect("/dashboard");
     return null;
   }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
-  const org = use(serverData.get<{ name?: string }>("Org", auth.tenant_id));
   return (
-    <DashboardShell
-      active="members"
-      title="Members"
-      userEmail={me?.email ?? ""}
-      orgName={org?.name}
-    >
-      <Members
-        tenantId={auth.tenant_id}
-        currentUserId={auth.user_id}
-        role={auth.roles?.[0] ?? ""}
-      />
-    </DashboardShell>
+    <Members
+      tenantId={auth.tenant_id}
+      currentUserId={auth.user_id!}
+      role={auth.roles?.[0] ?? ""}
+    />
   );
 }

package/templates/saas/app/dashboard/page.tsx

@@ -1,6 +1,5 @@
 import React, { use } from "react";
 import { type Metadata, type PageProps } from "@pylonsync/react";
-import { DashboardShell } from "@/components/dashboard-shell";
 import { ProvisionWorkspace } from "./provision-workspace";
 import {
   Overview,
@@ -14,29 +13,20 @@ export const metadata: Metadata = {
   robots: "noindex",
 };
 
-// `app/dashboard/page.tsx` → `/dashboard`. Server-side auth gate, then the
-// active org (`auth.tenant_id`) + this org's rows are read during the render
-// via `serverData` + React 19 `use()` — resolved server-side and replayed on
-// hydration, so the dashboard paints with real data on the first byte (no
-// client fetch, no empty-state flash). /dashboard sits outside the
-// `(marketing)` route group, so the marketing nav/footer never render here;
-// the shell is the only chrome.
-export default function DashboardPage({
-  auth,
-  response,
-  serverData,
-}: PageProps) {
-  if (!auth.user_id) {
-    response.redirect("/login");
-    return null;
-  }
+// `app/dashboard/page.tsx` → `/dashboard`. The dashboard layout owns the auth
+// gate and the shell chrome; this page reads the active org's rows during the
+// render via `serverData` + React 19 `use()` — resolved server-side and
+// replayed on hydration, so the dashboard paints with real data on the first
+// byte (no client fetch, no empty-state flash).
+export default function DashboardPage({ auth, serverData }: PageProps) {
   // No active workspace (signup's auto-provision failed, or the user left/
   // deleted their last org). Every read below is tenant-scoped, so instead of
   // an empty shell, provision one client-side and reload into a ready dashboard.
+  // The layout renders this bare (no shell) when there's no tenant.
   if (!auth.tenant_id) {
     return <ProvisionWorkspace />;
   }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id!));
   const org = use(serverData.get<{ name?: string }>("Org", auth.tenant_id));
   const projects = use(serverData.list<Project>("Project"));
   const members = use(serverData.list<OrgMemberRow>("OrgMember"));
@@ -51,20 +41,13 @@ export default function DashboardPage({
   );
   const plan = active ? active.plan : "free";
   return (
-    <DashboardShell
-      active="overview"
-      title="Overview"
-      userEmail={me?.email ?? ""}
+    <Overview
+      tenantId={auth.tenant_id}
       orgName={org?.name}
-    >
-      <Overview
-        tenantId={auth.tenant_id}
-        orgName={org?.name}
-        userEmail={me?.email}
-        projects={projects}
-        memberCount={memberCount}
-        plan={plan}
-      />
-    </DashboardShell>
+      userEmail={me?.email}
+      projects={projects}
+      memberCount={memberCount}
+      plan={plan}
+    />
   );
 }

package/templates/saas/app/dashboard/projects/page.tsx

@@ -1,6 +1,5 @@
 import React, { use } from "react";
 import { type Metadata, type PageProps } from "@pylonsync/react";
-import { DashboardShell } from "@/components/dashboard-shell";
 import { Projects, type Project } from "../dashboard-client";
 
 export const metadata: Metadata = {
@@ -9,31 +8,13 @@ export const metadata: Metadata = {
 };
 
 // `/dashboard/projects` — this org's projects, server-resolved via `use()` then
-// kept live + optimistic by `db` on the client.
-export default function ProjectsPage({
-  auth,
-  response,
-  serverData,
-}: PageProps) {
-  if (!auth.user_id) {
-    response.redirect("/login");
-    return null;
-  }
+// kept live + optimistic by `db` on the client. Auth gate + shell chrome come
+// from the dashboard layout.
+export default function ProjectsPage({ auth, response, serverData }: PageProps) {
   if (!auth.tenant_id) {
     response.redirect("/dashboard");
     return null;
   }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
-  const org = use(serverData.get<{ name?: string }>("Org", auth.tenant_id));
   const projects = use(serverData.list<Project>("Project"));
-  return (
-    <DashboardShell
-      active="projects"
-      title="Projects"
-      userEmail={me?.email ?? ""}
-      orgName={org?.name}
-    >
-      <Projects tenantId={auth.tenant_id} initial={projects} />
-    </DashboardShell>
-  );
+  return <Projects tenantId={auth.tenant_id} initial={projects} />;
 }

package/templates/saas/app/dashboard/settings/page.tsx

@@ -1,6 +1,5 @@
 import React, { use } from "react";
 import { type Metadata, type PageProps } from "@pylonsync/react";
-import { DashboardShell } from "@/components/dashboard-shell";
 import {
   Settings,
   type OrgInfo,
@@ -14,34 +13,23 @@ export const metadata: Metadata = {
 
 // `/dashboard/settings` — workspace settings: rename (owners/admins) and delete
 // (owners). The active org + member count are resolved server-side so the page
-// paints with real values on the first byte.
+// paints with real values on the first byte. Auth gate + shell chrome come from
+// the dashboard layout.
 export default function SettingsPage({ auth, response, serverData }: PageProps) {
-  if (!auth.user_id) {
-    response.redirect("/login");
-    return null;
-  }
   if (!auth.tenant_id) {
     response.redirect("/dashboard");
     return null;
   }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
   const org = use(serverData.get<OrgInfo>("Org", auth.tenant_id));
   const members = use(serverData.list<OrgMemberRow>("OrgMember"));
   const memberCount = members.filter(
     (m) => m.orgId === auth.tenant_id,
   ).length;
   return (
-    <DashboardShell
-      active="settings"
-      title="Settings"
-      userEmail={me?.email ?? ""}
-      orgName={org?.name}
-    >
-      <Settings
-        org={org}
-        role={auth.roles?.[0] ?? ""}
-        memberCount={memberCount}
-      />
-    </DashboardShell>
+    <Settings
+      org={org}
+      role={auth.roles?.[0] ?? ""}
+      memberCount={memberCount}
+    />
   );
 }

package/templates/saas/app/layout.tsx

@@ -6,11 +6,10 @@ interface LayoutProps {
 }
 
 // The root layout is only the document shell: <html>, <head>, <body>, and the
-// site-wide theme variables. Section chrome lives in route-group layouts —
-// `(marketing)/layout.tsx` adds the nav + footer for every marketing page.
-// Routes outside the group (/login, /signup, /dashboard) render bare here:
-// the auth screens are full-screen and the dashboard brings its own sidebar
-// shell.
+// site-wide theme variables. Each section owns its chrome in its own layout:
+// `(marketing)/layout.tsx` adds the nav + footer, `(auth)/layout.tsx` the
+// split-screen frame for /login + /signup, and `dashboard/layout.tsx` the
+// sidebar shell.
 export default function RootLayout({ children }: LayoutProps) {
   return (
     <html

package/templates/saas/components/dashboard-shell.tsx

@@ -11,24 +11,36 @@ import {
   Settings as SettingsIcon,
   LogOut,
   ExternalLink,
+  ChevronsUpDown,
   type LucideIcon,
 } from "lucide-react";
 
-type NavKey = "overview" | "projects" | "members" | "billing" | "settings";
+export type NavKey = "overview" | "projects" | "members" | "billing" | "settings";
 
-const NAV: { key: NavKey; label: string; href: string; Icon: LucideIcon }[] = [
+// Exported so `app/dashboard/layout.tsx` can derive the active item + page
+// title from the request URL — one table drives both the sidebar and the
+// layout's routing awareness. `group` splits the sidebar into sections:
+// ungrouped items render first, then each named group under an eyebrow label.
+export const NAV: {
+  key: NavKey;
+  label: string;
+  href: string;
+  Icon: LucideIcon;
+  group?: string;
+}[] = [
   { key: "overview", label: "Overview", href: "/dashboard", Icon: LayoutDashboard },
   { key: "projects", label: "Projects", href: "/dashboard/projects", Icon: FolderKanban },
-  { key: "members", label: "Members", href: "/dashboard/members", Icon: Users },
-  { key: "billing", label: "Billing", href: "/dashboard/billing", Icon: CreditCard },
-  { key: "settings", label: "Settings", href: "/dashboard/settings", Icon: SettingsIcon },
+  { key: "members", label: "Members", href: "/dashboard/members", Icon: Users, group: "Workspace" },
+  { key: "billing", label: "Billing", href: "/dashboard/billing", Icon: CreditCard, group: "Workspace" },
+  { key: "settings", label: "Settings", href: "/dashboard/settings", Icon: SettingsIcon, group: "Workspace" },
 ];
 
-// Dashboard chrome: a fixed sidebar (logo, workspace switcher, nav) plus a top
-// bar with a user menu. /dashboard sits outside the `(marketing)` route group,
-// so this shell is the only chrome here. `userEmail` is
-// resolved on the server (serverData.get("User", …)) and passed in, so the menu
-// shows a real email instead of a raw id.
+// Dashboard chrome: a fixed sidebar (logo, workspace switcher, grouped nav,
+// account card pinned to the bottom) plus a slim top bar. Rendered by
+// `app/dashboard/layout.tsx`, which wraps every /dashboard page — /dashboard
+// sits outside the `(marketing)` route group, so this shell is the only chrome
+// here. `userEmail` is resolved on the server (serverData.get("User", …)) and
+// passed in, so the menu shows a real email instead of a raw id.
 export function DashboardShell({
   active,
   title,
@@ -45,10 +57,12 @@ export function DashboardShell({
   children: React.ReactNode;
 }) {
   const router = useRouter();
+  const ungrouped = NAV.filter((n) => !n.group);
+  const groups = [...new Set(NAV.map((n) => n.group).filter(Boolean))] as string[];
   return (
     <div className="flex min-h-screen bg-white text-zinc-900">
-      <aside className="hidden w-60 shrink-0 flex-col border-r border-zinc-200 bg-zinc-50/60 md:flex">
-        <div className="flex h-14 items-center border-b border-zinc-200 px-4">
+      <aside className="hidden w-60 shrink-0 flex-col border-r border-zinc-200/70 bg-zinc-50/80 md:flex">
+        <div className="flex h-14 shrink-0 items-center px-4">
           <Link href="/" className="flex items-center gap-2">
             <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
               A
@@ -57,7 +71,7 @@ export function DashboardShell({
           </Link>
         </div>
 
-        <div className="px-3 py-3">
+        <div className="px-3 pb-1">
           {/* Every view's data is resolved server-side for the active tenant,
               so switching orgs re-renders the dashboard for the new workspace.
               A soft client navigation (router.push) re-fetches the SSR page —
@@ -69,37 +83,42 @@ export function DashboardShell({
           />
         </div>
 
-        <nav className="flex-1 space-y-0.5 px-3">
-          {NAV.map((n) => {
-            const isActive = active === n.key;
-            return (
-              <Link
-                key={n.key}
-                href={n.href}
-                className={
-                  "flex items-center gap-2.5 rounded-md px-3 py-2 text-[13.5px] font-medium transition-colors " +
-                  (isActive
-                    ? "bg-zinc-900 text-white"
-                    : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900")
-                }
-              >
-                <n.Icon
-                  className={
-                    "size-[17px] " + (isActive ? "text-white" : "text-zinc-400")
-                  }
-                  strokeWidth={2}
-                />
-                {n.label}
-              </Link>
-            );
-          })}
+        <nav className="flex-1 overflow-y-auto px-3 pt-3">
+          <div className="space-y-0.5">
+            {ungrouped.map((n) => (
+              <NavItem key={n.key} item={n} isActive={active === n.key} />
+            ))}
+          </div>
+          {groups.map((g) => (
+            <div key={g} className="mt-6">
+              <div className="mb-1.5 px-2.5 text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
+                {g}
+              </div>
+              <div className="space-y-0.5">
+                {NAV.filter((n) => n.group === g).map((n) => (
+                  <NavItem key={n.key} item={n} isActive={active === n.key} />
+                ))}
+              </div>
+            </div>
+          ))}
         </nav>
+
+        {/* Account card pinned to the bottom of the column — the sidebar's
+            base holds the session controls instead of trailing off into
+            empty space. The dropdown opens UPWARD (bottom-full). */}
+        <div className="border-t border-zinc-200/70 p-3">
+          <UserMenu email={userEmail} direction="up" />
+        </div>
       </aside>
 
       <div className="flex min-w-0 flex-1 flex-col">
-        <header className="flex h-14 items-center justify-between border-b border-zinc-200 px-6">
+        <header className="flex h-14 shrink-0 items-center justify-between border-b border-zinc-200/70 px-6">
           <h1 className="text-[15px] font-semibold">{title}</h1>
-          <UserMenu email={userEmail} />
+          {/* The sidebar (and its account card) is hidden below md, so the
+              top bar carries the account menu on small screens only. */}
+          <div className="md:hidden">
+            <UserMenu email={userEmail} direction="down" />
+          </div>
         </header>
         <main className="flex-1 p-6">
           <div className="mx-auto max-w-4xl">{children}</div>
@@ -109,30 +128,89 @@ export function DashboardShell({
   );
 }
 
+// A single sidebar row. The active row reads as a raised white card — layered
+// translucent shadows instead of a hard border, so it sits naturally on the
+// zinc-50 column. Inactive rows tint on hover only.
+function NavItem({
+  item,
+  isActive,
+}: {
+  item: (typeof NAV)[number];
+  isActive: boolean;
+}) {
+  return (
+    <Link
+      href={item.href}
+      className={
+        "flex items-center gap-2.5 rounded-lg px-2.5 py-[7px] text-[13px] font-medium transition-colors " +
+        (isActive
+          ? "bg-white text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.05)]"
+          : "text-zinc-600 hover:bg-zinc-200/50 hover:text-zinc-900")
+      }
+    >
+      <item.Icon
+        className={"size-[17px] " + (isActive ? "text-zinc-700" : "text-zinc-400")}
+        strokeWidth={2}
+      />
+      {item.label}
+    </Link>
+  );
+}
+
 // Avatar + dropdown (email, View site, Sign out). Native <details> so it opens
-// on click with no extra state; the marketing nav/footer aren't here, so this
-// is the only account control.
-function UserMenu({ email }: { email: string }) {
+// on click with no extra state. In the sidebar it renders as a full-width
+// account card whose menu opens upward; in the mobile top bar it's a compact
+// avatar with a downward menu.
+function UserMenu({
+  email,
+  direction,
+}: {
+  email: string;
+  direction: "up" | "down";
+}) {
   const { signOut } = useAuth();
   const initial = (email.trim()[0] || "?").toUpperCase();
   async function onSignOut() {
     await signOut();
     window.location.assign("/");
   }
+  const up = direction === "up";
   return (
     <details className="group relative">
-      <summary className="flex size-8 cursor-pointer select-none list-none items-center justify-center rounded-full bg-zinc-900 text-[12px] font-semibold text-white marker:hidden [&::-webkit-details-marker]:hidden">
-        {initial}
+      <summary
+        className={
+          "cursor-pointer select-none list-none marker:hidden [&::-webkit-details-marker]:hidden " +
+          (up
+            ? "flex w-full items-center gap-2.5 rounded-lg px-2 py-2 transition-colors hover:bg-zinc-200/50"
+            : "flex size-9 items-center justify-center")
+        }
+      >
+        <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-zinc-900 text-[11px] font-semibold text-white">
+          {initial}
+        </span>
+        {up ? (
+          <>
+            <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-zinc-700">
+              {email || "Signed in"}
+            </span>
+            <ChevronsUpDown className="size-3.5 shrink-0 text-zinc-400" strokeWidth={2} />
+          </>
+        ) : null}
       </summary>
-      <div className="absolute right-0 top-full z-40 mt-2 w-56 overflow-hidden rounded-xl border border-zinc-200 bg-white py-1 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.25)]">
-        <div className="border-b border-zinc-100 px-3 py-2">
+      <div
+        className={
+          "absolute z-40 w-56 overflow-hidden rounded-xl bg-white p-1 shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_16px_48px_-16px_rgba(0,0,0,0.25)] " +
+          (up ? "bottom-full left-0 mb-2" : "right-0 top-full mt-2")
+        }
+      >
+        <div className="border-b border-zinc-100 px-2.5 py-2">
           <div className="truncate text-[13px] font-medium text-zinc-900">
             {email || "Signed in"}
           </div>
         </div>
         <a
           href="/"
-          className="flex items-center gap-2 px-3 py-2 text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
+          className="flex items-center gap-2 rounded-lg px-2.5 py-2 text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
         >
           <ExternalLink className="size-4 text-zinc-400" strokeWidth={2} />
           View site
@@ -140,7 +218,7 @@ function UserMenu({ email }: { email: string }) {
         <button
           type="button"
           onClick={onSignOut}
-          className="flex w-full items-center gap-2 px-3 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
+          className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
         >
           <LogOut className="size-4 text-zinc-400" strokeWidth={2} />
           Sign out

package/templates/saas/app/login/page.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { type Metadata, type PageProps } from "@pylonsync/react";
-import { AuthShell } from "../auth-shell";
-import { AuthForm } from "../auth-form";
-
-export const metadata: Metadata = {
-  title: "Sign in — Acme",
-  robots: "noindex",
-};
-
-// `app/login/page.tsx` → `/login`. Split-screen auth (form left, brand right).
-// Auth routes sit outside the `(marketing)` route group, so they render bare —
-// no marketing nav or footer.
-export default function LoginPage({ auth, response }: PageProps) {
-  // Already signed in? Skip the form. `response.redirect` runs in the
-  // synchronous shell render, so it's a real 307 before any HTML is sent.
-  if (auth.user_id) response.redirect("/dashboard");
-  return (
-    <AuthShell
-      title="Welcome back"
-      switchPrompt="New to Acme?"
-      switchLabel="Create an account"
-      switchHref="/signup"
-    >
-      <AuthForm mode="login" />
-    </AuthShell>
-  );
-}

package/templates/saas/app/signup/page.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { type Metadata, type PageProps } from "@pylonsync/react";
-import { AuthShell } from "../auth-shell";
-import { AuthForm } from "../auth-form";
-
-export const metadata: Metadata = {
-  title: "Create your account — Acme",
-  robots: "noindex",
-};
-
-// `app/signup/page.tsx` → `/signup`. Split-screen auth, register mode.
-export default function SignupPage({ auth, response }: PageProps) {
-  if (auth.user_id) response.redirect("/dashboard");
-  return (
-    <AuthShell
-      title="Create an account"
-      switchPrompt="Already have an account?"
-      switchLabel="Sign in"
-      switchHref="/login"
-    >
-      <AuthForm mode="signup" />
-    </AuthShell>
-  );
-}