@pylonsync/create-pylon 0.3.374 → 0.3.375

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.374",
+  "version": "0.3.375",
   "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

@@ -14,9 +14,12 @@ import {
   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.
+export const NAV: { key: NavKey; label: string; href: string; Icon: LucideIcon }[] = [
   { 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 },
@@ -25,10 +28,11 @@ const NAV: { key: NavKey; label: string; href: string; Icon: LucideIcon }[] = [
 ];
 
 // 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.
+// bar with a user menu. 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,

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>
-  );
-}