@pylonsync/create-pylon 0.3.269 → 0.3.271

package/bin/create-pylon.js

@@ -71,9 +71,9 @@ const PYLON_VERSION = JSON.parse(
 const PLATFORMS_AVAILABLE = ["web", "vite", "ios", "mac", "expo"];
 
 const TEMPLATE_REGISTRY = {
-	ssr: {
+	default: {
 		blurb:
-			"Full-stack SSR — server-rendered React + Link/Image/Tailwind, one server, no Next.js.",
+			"SaaS starter — server-rendered marketing landing + multi-tenant dashboard (orgs, members, tenant-scoped data). One app, one port, no Next.js.",
 		// `unified` templates are a single Pylon app (app.ts + app/ routes +
 		// functions/), NOT a monorepo of apps/api + apps/web. `pylon dev`
 		// serves the SSR frontend and the API from one port. They take no
@@ -167,15 +167,14 @@ Usage: npm create @pylonsync/pylon [name] [options]
 ${tmplLines.join("\n")}
 
   --platforms <list>     comma list: ${PLATFORMS_AVAILABLE.join(",")}  (default: web)
-                         ignored for ssr — it's a single full-stack app, no platforms
+                         ignored for unified templates — they're a single full-stack app
   --bun|--pnpm|--yarn|--npm
   --skip-install         scaffold only, don't run install
 
 Examples:
-  npm create @pylonsync/pylon my-app --template ssr         # full-stack SSR, no Next.js
+  npm create @pylonsync/pylon my-app                        # default — SaaS landing + multi-tenant dashboard
   npm create @pylonsync/pylon my-app --template todo        # live, optimistic todo (SSR, one port)
-  npm create @pylonsync/pylon my-app
-  npm create @pylonsync/pylon my-app --template b2b          # multi-tenant SaaS (orgs, members, RBAC)
+  npm create @pylonsync/pylon my-app --template b2b          # minimal multi-tenant (orgs, members, RBAC)
   npm create @pylonsync/pylon my-app --template chat         # realtime live chat room
 `);
 	exit(0);
@@ -192,14 +191,17 @@ if (!flags.template) {
 	process.stdout.write(`\n${lines}\n`);
 	const ans = (
 		await rl.question(
-			`Template (${TEMPLATES_AVAILABLE.join(", ")}) [ssr]: `,
+			`Template (${TEMPLATES_AVAILABLE.join(", ")}) [default]: `,
 		)
 	)
 		.trim()
 		.toLowerCase();
-	flags.template = TEMPLATES_AVAILABLE.includes(ans) ? ans : "ssr";
+	flags.template = TEMPLATES_AVAILABLE.includes(ans) ? ans : "default";
 }
-// `unified` templates (ssr) are a single app, not a monorepo — they take
+// `ssr` was the original name of the default template; keep it working as a
+// quiet alias so older `--template ssr` invocations don't break.
+if (flags.template === "ssr") flags.template = "default";
+// `unified` templates (default) are a single app, not a monorepo — they take
 // no platforms. Skip the platform prompt + validation for them entirely.
 const isUnified = TEMPLATE_REGISTRY[flags.template]?.unified === true;
 if (!isUnified && !flags.platforms) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.269",
+  "version": "0.3.271",
   "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/b2b/app/layout.tsx

@@ -63,7 +63,7 @@ export default function RootLayout({ children, auth }: LayoutProps) {
         </header>
         <main className="mx-auto max-w-3xl px-4 py-10">{children}</main>
         <footer className="border-t py-6 text-center text-xs text-muted-foreground">
-          Rendered by Pylon · one server, one port
+          Rendered by Pylon
         </footer>
       </body>
     </html>

package/templates/b2b/app/page.tsx

@@ -16,7 +16,7 @@ import {
 export const metadata: Metadata = {
   title: "__APP_NAME__ — full-stack Pylon app",
   description:
-    "A server-rendered homepage, email/password auth, and a live client dashboard over one synced backend — one binary, one port.",
+    "A server-rendered homepage, email/password auth, and a live client dashboard over one synced backend.",
 };
 
 // `app/page.tsx` → `/`. This page is server-rendered: view source and the copy
@@ -31,7 +31,7 @@ export default function IndexPage({ auth }: PageProps) {
     <div className="space-y-12">
       <section className="space-y-5">
         <span className="inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground">
-          Server-rendered · authenticated · synced · one port
+          Server-rendered · authenticated · synced
         </span>
         <h1 className="text-4xl font-semibold tracking-tight">
           Full-stack apps, one binary.

package/templates/b2b/tsconfig.json

@@ -14,5 +14,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*"]
+  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*", "functions/**/*"]
 }

package/templates/barebones/app/page.tsx

@@ -5,7 +5,7 @@ import { ItemList } from "./items-client";
 export const metadata: Metadata = {
   title: "__APP_NAME__ — a minimal Pylon app",
   description:
-    "One entity, a live list, and an optimistic create — server-rendered over one Pylon backend, one binary, one port.",
+    "One entity, a live list, and an optimistic create — server-rendered over one Pylon backend.",
 };
 
 // `app/page.tsx` → `/`. The heading is server-rendered; the list is a client

package/templates/barebones/tsconfig.json

@@ -14,5 +14,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*"]
+  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*", "functions/**/*"]
 }

package/templates/chat/app/page.tsx

@@ -5,7 +5,7 @@ import { ChatRoom } from "./chat-client";
 export const metadata: Metadata = {
   title: "__APP_NAME__ — realtime chat on Pylon",
   description:
-    "A live chat room over one Pylon backend — one binary, one port. Open two tabs and watch messages sync instantly.",
+    "A live chat room over one Pylon backend. Open two tabs and watch messages sync instantly.",
 };
 
 // `app/page.tsx` → `/`. The header is server-rendered; `<ChatRoom>` is a client

package/templates/chat/tsconfig.json

@@ -14,5 +14,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*"]
+  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*", "functions/**/*"]
 }

package/templates/consumer/app/page.tsx

@@ -5,7 +5,7 @@ import { Feed } from "./feed-client";
 export const metadata: Metadata = {
   title: "__APP_NAME__ — a live social feed on Pylon",
   description:
-    "A public feed with optimistic posts and likes, server-rendered over one Pylon backend. One binary, one port. Open two tabs and watch it sync.",
+    "A public feed with optimistic posts and likes, server-rendered over one Pylon backend. Open two tabs and watch it sync.",
 };
 
 // `app/page.tsx` → `/`. The intro is server-rendered; `<Feed>` is a client

package/templates/consumer/tsconfig.json

@@ -14,5 +14,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*"]
+  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*", "functions/**/*"]
 }

package/templates/default/.env.example

@@ -0,0 +1,19 @@
+# Copy to `.env` and fill in. `pylon dev` loads `.env` automatically.
+# The app runs fine without these — billing just shows a "connect Stripe" state.
+
+# ── Stripe billing (per-workspace) ───────────────────────────────────────────
+# The @pylonsync/stripe plugin (see lib/billing.ts) reads these at call time.
+#   1. Create a product + monthly recurring Price in the Stripe dashboard.
+#   2. Put the Price id in STRIPE_PRICE_PRO.
+#   3. Add a webhook endpoint → https://<your-app>/api/fn/stripeWebhook,
+#      subscribe to checkout.session.* + customer.subscription.*, and paste its
+#      signing secret into STRIPE_WEBHOOK_SECRET.
+STRIPE_SECRET_KEY=sk_test_...
+STRIPE_WEBHOOK_SECRET=whsec_...
+STRIPE_PRICE_PRO=price_...
+
+# ── OAuth (optional) ─────────────────────────────────────────────────────────
+# The login/signup pages show a Google button; set these to enable it.
+# PYLON_OAUTH_GOOGLE_CLIENT_ID=...
+# PYLON_OAUTH_GOOGLE_CLIENT_SECRET=...
+# PYLON_OAUTH_GOOGLE_REDIRECT=http://localhost:4321/api/auth/callback/google

package/templates/{ssr → default}/README.md

@@ -2,9 +2,11 @@
 
 A full-stack, multi-tenant SaaS starter on [Pylon](https://pylonsync.com),
 branded as a fictional product called **Acme**: a server-rendered marketing
-landing page, email/password auth, organizations with members + roles, and
-tenant-scoped projects — all from one binary on one port. No Next.js, no
-separate API server, no realtime sidecar.
+site (landing page + product / solution / compare / company pages), first-run
+onboarding, email/password + Google auth, organizations with members, roles,
+and invites, tenant-scoped projects, and per-workspace Stripe billing — all
+from one binary on one port. No Next.js, no separate API server, no realtime
+sidecar.
 
 ## Develop
 
@@ -20,12 +22,18 @@ is private to it. Edit any file under `app/` and save — the page reloads.
 ## Layout
 
 ```
-app.ts                       User + Org/OrgMember/OrgInvite + tenant-scoped Project
+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/login,signup/            email/password (POST /api/auth/password/*)
-app/dashboard/               "/dashboard" — authed; org switcher + projects + members
+app/{products,solutions,resources,company,compare}/[slug]/   data-driven marketing pages
+app/login,signup/            email/password + Google (POST /api/auth/password/*)
+app/onboarding/              first-run: create workspace → invite → first project
+app/dashboard/               "/dashboard" — authed; overview, 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/                   Stripe checkout/portal/webhook handlers (one file per handler)
+lib/                         products.ts + site.ts (marketing content), billing.ts (@pylonsync/stripe)
 app/globals.css              Tailwind v4 + shadcn tokens (compiled by Pylon)
 components/ui/                shadcn primitives (Button, Card)
 ```
@@ -58,9 +66,15 @@ tenant's rows. `db.useQuery` is live; `db.insert` is optimistic.
 ## 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.
 - **Add a route:** drop `app/about/page.tsx` and visit `/about`.
+- **Enable billing:** set `STRIPE_SECRET_KEY` + `STRIPE_PRICE_PRO` (see
+  `.env.example`); the Billing tab then runs real Stripe Checkout + Customer
+  Portal, kept in sync by the `/api/fn/stripeWebhook` handler.
 
 ## Deploy
 

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

@@ -0,0 +1,218 @@
+"use client";
+
+import React, { useState } from "react";
+import { passwordLogin, passwordRegister, ApiError } from "@pylonsync/client";
+
+// The email/password form, shared by /login and /signup. It calls the built-in
+// auth API directly — `passwordLogin` / `passwordRegister` (from
+// @pylonsync/client) POST to `/api/auth/password/*`.
+//
+// On success the server sets an HttpOnly session cookie on the response. We do
+// a full navigation to /dashboard rather than a client transition: the fresh
+// page load hands that cookie to the SSR runtime (which resolves auth and
+// renders the dashboard server-side) and to the sync engine (which
+// authenticates with the same cookie via `credentials: include`). Because the
+// cookie is HttpOnly it can never be read by JavaScript, so there is no session
+// token sitting in `localStorage` for an XSS to lift.
+export function AuthForm({ mode }: { mode: "login" | "signup" }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      if (mode === "login") {
+        await passwordLogin({ email, password });
+        // Full navigation: the SSR dashboard re-renders with the new cookie.
+        window.location.assign("/dashboard");
+      } else {
+        await passwordRegister({ email, password });
+        // New accounts have no workspace yet — send them through first-run
+        // onboarding (which redirects to /dashboard once they're in an org).
+        window.location.assign("/onboarding");
+      }
+    } catch (err) {
+      setError(messageFor(err));
+      setPending(false); // keep the form up to retry (success navigates away)
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <form onSubmit={onSubmit} className="space-y-4">
+        <IconField
+          label="Email"
+          type="email"
+          icon={<MailIcon />}
+          value={email}
+          onChange={setEmail}
+          required
+          autoComplete="email"
+          placeholder="Enter your email"
+        />
+        <IconField
+          label="Password"
+          type="password"
+          icon={<LockIcon />}
+          value={password}
+          onChange={setPassword}
+          required
+          autoComplete={mode === "login" ? "current-password" : "new-password"}
+          placeholder="Enter your password"
+        />
+        {mode === "signup" ? (
+          <p className="text-[12px] leading-snug text-zinc-500">
+            By joining, you agree to our{" "}
+            <a href="/company/privacy" className="underline underline-offset-2">
+              Terms
+            </a>{" "}
+            &amp;{" "}
+            <a href="/company/privacy" className="underline underline-offset-2">
+              Privacy
+            </a>
+            . Passwords need 10+ characters.
+          </p>
+        ) : null}
+        {error ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
+            {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"
+        >
+          {pending ? "…" : mode === "login" ? "Sign in" : "Sign up"}
+        </button>
+      </form>
+
+      <div className="flex items-center gap-3 text-[11px] uppercase tracking-wide text-zinc-400">
+        <span className="h-px flex-1 bg-zinc-200" />
+        or continue with
+        <span className="h-px flex-1 bg-zinc-200" />
+      </div>
+
+      {/* Social sign-in. The Google provider must be configured (set
+          PYLON_OAUTH_GOOGLE_CLIENT_ID / _CLIENT_SECRET / _REDIRECT) — until then
+          this button returns a helpful "configure the provider" error. */}
+      <a
+        href="/api/auth/login/google?callback=/dashboard&redirect=1"
+        className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-lg border border-zinc-300 bg-white text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-50"
+      >
+        <GoogleIcon />
+        Google
+      </a>
+    </div>
+  );
+}
+
+function IconField({
+  label,
+  icon,
+  value,
+  onChange,
+  type = "text",
+  required,
+  autoComplete,
+  placeholder,
+}: {
+  label: string;
+  icon: React.ReactNode;
+  value: string;
+  onChange: (v: string) => void;
+  type?: string;
+  required?: boolean;
+  autoComplete?: string;
+  placeholder?: string;
+}) {
+  return (
+    <label className="block">
+      <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">
+        {label}
+      </span>
+      <div className="relative">
+        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400">
+          {icon}
+        </span>
+        <input
+          type={type}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          required={required}
+          autoComplete={autoComplete}
+          placeholder={placeholder}
+          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"
+        />
+      </div>
+    </label>
+  );
+}
+
+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="5" y="11" width="14" height="10" rx="2" />
+      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
+    </svg>
+  );
+}
+
+function GoogleIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden>
+      <path
+        fill="#4285F4"
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      />
+    </svg>
+  );
+}
+
+// Map the framework's auth error codes to friendly copy. `ApiError` carries a
+// stable `.code` (and `.status`) so you branch on the code, not the message.
+function messageFor(err: unknown): string {
+  if (err instanceof ApiError) {
+    switch (err.code) {
+      case "INVALID_CREDENTIALS":
+        return "Wrong email or password.";
+      case "USER_EXISTS":
+        return "That email is already in use — sign in instead.";
+      case "WEAK_PASSWORD":
+        return "Pick a longer password — at least 10 characters.";
+      case "PWNED_PASSWORD":
+        return "That password has appeared in a known data breach. Choose a different one.";
+      case "RATE_LIMITED":
+        return "Too many attempts — try again in a minute.";
+      default:
+        return err.message;
+    }
+  }
+  if (err instanceof Error) return err.message;
+  return "Something went wrong. Try again.";
+}

package/templates/default/app/auth-shell.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Link } 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;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid min-h-screen bg-white lg:grid-cols-2">
+      {/* 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
+            </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>
+        </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">
+            Our whole team finally works in one place. Acme makes it easy to
+            plan, build, and ship without the busywork.
+          </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>
+          </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/default/app/company/[slug]/page.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { ContentPage } from "@/components/marketing";
+import { COMPANY, bySlug } from "@/lib/site";
+
+export function generateMetadata({ params }: PageProps): Metadata {
+  const page = bySlug(COMPANY, params.slug);
+  if (!page) return { title: "Not found — Acme", robots: "noindex" };
+  return { title: `${page.navLabel} — Acme`, description: page.summary };
+}
+
+// `/company/:slug` — about, blog, careers, contact, privacy. Driven by COMPANY
+// in lib/site.ts. Unknown slugs 404.
+export default function CompanyPage({ params, auth, response }: PageProps) {
+  const page = bySlug(COMPANY, params.slug);
+  if (!page) {
+    response.notFound();
+    return null;
+  }
+  return (
+    <ContentPage
+      page={page}
+      siblings={COMPANY}
+      basePath="/company"
+      ctaHref={auth.user_id ? "/dashboard" : "/signup"}
+    />
+  );
+}

package/templates/default/app/compare/[slug]/page.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { ComparePage } from "@/components/marketing";
+import { COMPARISONS, bySlug } from "@/lib/site";
+
+export function generateMetadata({ params }: PageProps): Metadata {
+  const cmp = bySlug(COMPARISONS, params.slug);
+  if (!cmp) return { title: "Not found — Acme", robots: "noindex" };
+  return { title: `${cmp.title} — Acme`, description: cmp.summary };
+}
+
+// `/compare/:slug` — one template per comparison. Driven by COMPARISONS in
+// lib/site.ts (generic, made-up competitors). Unknown slugs 404.
+export default function CompareSlugPage({ params, auth, response }: PageProps) {
+  const cmp = bySlug(COMPARISONS, params.slug);
+  if (!cmp) {
+    response.notFound();
+    return null;
+  }
+  return (
+    <ComparePage
+      cmp={cmp}
+      all={COMPARISONS}
+      ctaHref={auth.user_id ? "/dashboard" : "/signup"}
+    />
+  );
+}

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

@@ -0,0 +1,49 @@
+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 = {
+  title: "Billing — Acme",
+  robots: "noindex",
+};
+
+// `/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.
+const ACTIVE = ["active", "trialing", "past_due"];
+
+export default function BillingPage({ auth, response, serverData }: PageProps) {
+  if (!auth.user_id) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const org = auth.tenant_id
+    ? use(serverData.get<{ name?: string }>("Org", auth.tenant_id))
+    : null;
+  const subs = auth.tenant_id
+    ? use(serverData.list<Subscription>("StripeSubscription"))
+    : [];
+  const subscription =
+    subs.find(
+      (s) => s.referenceId === auth.tenant_id && ACTIVE.includes(s.status),
+    ) ??
+    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>
+  );
+}