@pylonsync/create-pylon 0.9.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "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/_root/AGENTS.md

@@ -40,6 +40,17 @@ this pass before the user has to ask.
 ## Key gotchas
 
 - **Policies deny by default; server functions bypass them.** Direct client CRUD (`/api/entities/*`) and sync are policy-checked. Functions run with full database access, so enforce trust with `ctx.auth` checks inside the handler.
+- **Never wrap `serverData` calls in `Promise.all`.** Each method returns a thenable the handle CACHES by key — on the client it is already fulfilled, so `use()` returns synchronously. `Promise.all` builds a new, pending, uncached promise on every render, so `use()` suspends, re-renders, builds another, and the page never returns; React reports it as an async Client Component (minified error #482) and the error boundary shows a broken page. To read several things in parallel, START every call before the first `use()`, then `use()` each handle — the reads overlap and the replayed render finds each one cached:
+
+  ```tsx
+  const orgPromise = serverData.get<Org>("Org", auth.tenant_id);
+  const projectsPromise = serverData.list<Project>("Project");
+  const org = use(orgPromise);
+  const projects = use(projectsPromise);
+  ```
+
+  Reading them one at a time (`use(serverData.a()); use(serverData.b());`) is correct but serial: each read waits for the one above it.
+
 - **`serverData` (SSR) is READ-ONLY.** No write methods; the runtime rejects write frames (`SSR_WRITE_FORBIDDEN`). Mutations belong in actions/functions, never in a page render.
 - **`response.*` / `response.redirect()` / `response.notFound()` must fire in the synchronous shell render**, before any `await` or `<Suspense>`. The HTTP head commits when the shell is ready. Status, headers, and cookies set from a suspended subtree are lost, and `redirect` or `notFound` thrown below a Suspense boundary are swallowed.
 - **`ctx.llm`, `ctx.rooms`, and `ctx.connections` are available on mutations and actions, not queries.** An `action` has no direct `ctx.db`; use `ctx.runQuery` or `ctx.runMutation`.

package/templates/agency/AGENTS.md

@@ -48,6 +48,17 @@ this pass before the user has to ask.
 - **`error.tsx` / `not-found.tsx` boundaries are HYDRATED (interactive).** `app/.../error.tsx` catches a throw below it (HTTP 500) and receives `{ error: { message, digest }, reset }` (`import type { ErrorBoundaryProps }`); `reset()` re-attempts the route; the stack NEVER reaches the client (dev overlay + logs only). `app/.../not-found.tsx` renders at 404 (also for `response.notFound()`) and gets the page props (`NotFoundProps`), no `reset`. Both run useState/onClick/hooks.
 - **Client navigation hooks live in @pylonsync/react.** `useRouter()` → `{ push, replace, back, forward, refresh, prefetch }`; `useSearchParams()` → reactive `URLSearchParams`; `usePathname()` → reactive pathname. The hooks are CLIENT-reactive; during SSR they return defaults (empty params / "/"); for server-side URL values read the `pathname` / `searchParams` page props (`pathname` is the PATH only — the query is already parsed into `searchParams`, so never try to read a query parameter back out of it; the older `url` prop is the same value and is deprecated).
 - **Dynamic + catch-all routes follow Next conventions.** `app/blog/[slug]/page.tsx` → `params.slug`. `app/docs/[...path]/page.tsx` is a catch-all (matches `/docs/a/b/c`; `params.path === "a/b/c"`; `.split("/")` for segments). `app/shop/[[...filters]]/page.tsx` is an optional catch-all (also matches the bare `/shop`, with `params.filters === ""`). A catch-all must be the last segment; static beats dynamic beats catch-all on overlap.
+- **Never wrap `serverData` calls in `Promise.all`.** Each method returns a thenable the handle CACHES by key — on the client it is already fulfilled, so `use()` returns synchronously. `Promise.all` builds a new, pending, uncached promise on every render, so `use()` suspends, re-renders, builds another, and the page never returns; React reports it as an async Client Component (minified error #482) and the error boundary shows a broken page. To read several things in parallel, START every call before the first `use()`, then `use()` each handle — the reads overlap and the replayed render finds each one cached:
+
+  ```tsx
+  const orgPromise = serverData.get<Org>("Org", auth.tenant_id);
+  const projectsPromise = serverData.list<Project>("Project");
+  const org = use(orgPromise);
+  const projects = use(projectsPromise);
+  ```
+
+  Reading them one at a time (`use(serverData.a()); use(serverData.b());`) is correct but serial: each read waits for the one above it.
+
 - **`serverData` (SSR) is READ-ONLY.** No write methods; the runtime rejects write frames (`SSR_WRITE_FORBIDDEN`). Mutations belong in actions/functions, never in a page render.
 - **`response.*` / `response.redirect()` / `response.notFound()` must fire in the synchronous shell render**, before any `await` / `<Suspense>`. The HTTP head commits when the shell is ready; status/headers/cookies set from a suspended subtree are lost, and `redirect`/`notFound` thrown below a Suspense boundary are swallowed.
 - **`ctx.llm`, `ctx.rooms`, and `ctx.connections` are on mutation + action only, NOT query** (reactive purity). `action` has no direct `ctx.db`; use `ctx.runQuery` / `ctx.runMutation`.

package/templates/ai-chat/AGENTS.md

@@ -48,6 +48,17 @@ this pass before the user has to ask.
 - **`error.tsx` / `not-found.tsx` boundaries are HYDRATED (interactive).** `app/.../error.tsx` catches a throw below it (HTTP 500) and receives `{ error: { message, digest }, reset }` (`import type { ErrorBoundaryProps }`); `reset()` re-attempts the route; the stack NEVER reaches the client (dev overlay + logs only). `app/.../not-found.tsx` renders at 404 (also for `response.notFound()`) and gets the page props (`NotFoundProps`), no `reset`. Both run useState/onClick/hooks.
 - **Client navigation hooks live in @pylonsync/react.** `useRouter()` → `{ push, replace, back, forward, refresh, prefetch }`; `useSearchParams()` → reactive `URLSearchParams`; `usePathname()` → reactive pathname. The hooks are CLIENT-reactive; during SSR they return defaults (empty params / "/"); for server-side URL values read the `pathname` / `searchParams` page props (`pathname` is the PATH only — the query is already parsed into `searchParams`, so never try to read a query parameter back out of it; the older `url` prop is the same value and is deprecated).
 - **Dynamic + catch-all routes follow Next conventions.** `app/blog/[slug]/page.tsx` → `params.slug`. `app/docs/[...path]/page.tsx` is a catch-all (matches `/docs/a/b/c`; `params.path === "a/b/c"`; `.split("/")` for segments). `app/shop/[[...filters]]/page.tsx` is an optional catch-all (also matches the bare `/shop`, with `params.filters === ""`). A catch-all must be the last segment; static beats dynamic beats catch-all on overlap.
+- **Never wrap `serverData` calls in `Promise.all`.** Each method returns a thenable the handle CACHES by key — on the client it is already fulfilled, so `use()` returns synchronously. `Promise.all` builds a new, pending, uncached promise on every render, so `use()` suspends, re-renders, builds another, and the page never returns; React reports it as an async Client Component (minified error #482) and the error boundary shows a broken page. To read several things in parallel, START every call before the first `use()`, then `use()` each handle — the reads overlap and the replayed render finds each one cached:
+
+  ```tsx
+  const orgPromise = serverData.get<Org>("Org", auth.tenant_id);
+  const projectsPromise = serverData.list<Project>("Project");
+  const org = use(orgPromise);
+  const projects = use(projectsPromise);
+  ```
+
+  Reading them one at a time (`use(serverData.a()); use(serverData.b());`) is correct but serial: each read waits for the one above it.
+
 - **`serverData` (SSR) is READ-ONLY.** No write methods; the runtime rejects write frames (`SSR_WRITE_FORBIDDEN`). Mutations belong in actions/functions, never in a page render.
 - **`response.*` / `response.redirect()` / `response.notFound()` must fire in the synchronous shell render**, before any `await` / `<Suspense>`. The HTTP head commits when the shell is ready; status/headers/cookies set from a suspended subtree are lost, and `redirect`/`notFound` thrown below a Suspense boundary are swallowed.
 - **`ctx.llm`, `ctx.rooms`, and `ctx.connections` are on mutation + action only, NOT query** (reactive purity). `action` has no direct `ctx.db`; use `ctx.runQuery` / `ctx.runMutation`.

package/templates/ai-studio/AGENTS.md

@@ -48,6 +48,17 @@ this pass before the user has to ask.
 - **`error.tsx` / `not-found.tsx` boundaries are HYDRATED (interactive).** `app/.../error.tsx` catches a throw below it (HTTP 500) and receives `{ error: { message, digest }, reset }` (`import type { ErrorBoundaryProps }`); `reset()` re-attempts the route; the stack NEVER reaches the client (dev overlay + logs only). `app/.../not-found.tsx` renders at 404 (also for `response.notFound()`) and gets the page props (`NotFoundProps`), no `reset`. Both run useState/onClick/hooks.
 - **Client navigation hooks live in @pylonsync/react.** `useRouter()` → `{ push, replace, back, forward, refresh, prefetch }`; `useSearchParams()` → reactive `URLSearchParams`; `usePathname()` → reactive pathname. The hooks are CLIENT-reactive; during SSR they return defaults (empty params / "/"); for server-side URL values read the `pathname` / `searchParams` page props (`pathname` is the PATH only — the query is already parsed into `searchParams`, so never try to read a query parameter back out of it; the older `url` prop is the same value and is deprecated).
 - **Dynamic + catch-all routes follow Next conventions.** `app/blog/[slug]/page.tsx` → `params.slug`. `app/docs/[...path]/page.tsx` is a catch-all (matches `/docs/a/b/c`; `params.path === "a/b/c"`; `.split("/")` for segments). `app/shop/[[...filters]]/page.tsx` is an optional catch-all (also matches the bare `/shop`, with `params.filters === ""`). A catch-all must be the last segment; static beats dynamic beats catch-all on overlap.
+- **Never wrap `serverData` calls in `Promise.all`.** Each method returns a thenable the handle CACHES by key — on the client it is already fulfilled, so `use()` returns synchronously. `Promise.all` builds a new, pending, uncached promise on every render, so `use()` suspends, re-renders, builds another, and the page never returns; React reports it as an async Client Component (minified error #482) and the error boundary shows a broken page. To read several things in parallel, START every call before the first `use()`, then `use()` each handle — the reads overlap and the replayed render finds each one cached:
+
+  ```tsx
+  const orgPromise = serverData.get<Org>("Org", auth.tenant_id);
+  const projectsPromise = serverData.list<Project>("Project");
+  const org = use(orgPromise);
+  const projects = use(projectsPromise);
+  ```
+
+  Reading them one at a time (`use(serverData.a()); use(serverData.b());`) is correct but serial: each read waits for the one above it.
+
 - **`serverData` (SSR) is READ-ONLY.** No write methods; the runtime rejects write frames (`SSR_WRITE_FORBIDDEN`). Mutations belong in actions/functions, never in a page render.
 - **`response.*` / `response.redirect()` / `response.notFound()` must fire in the synchronous shell render**, before any `await` / `<Suspense>`. The HTTP head commits when the shell is ready; status/headers/cookies set from a suspended subtree are lost, and `redirect`/`notFound` thrown below a Suspense boundary are swallowed.
 - **`ctx.llm`, `ctx.rooms`, and `ctx.connections` are on mutation + action only, NOT query** (reactive purity). `action` has no direct `ctx.db`; use `ctx.runQuery` / `ctx.runMutation`.

package/templates/backend/mobile/apps/api/README.md

@@ -9,8 +9,25 @@ functions/createNote   server-enforced free-tier cap, then insert
 functions/deleteMyData the user's rows, run by DELETE /api/auth/account
 functions/revenuecatWebhook, syncEntitlements, _pylonRcUpsertEntitlement
 lib/purchases.ts       the RevenueCat plugin instance + FREE_NOTE_LIMIT
+lib/site.ts            everything the website says — edit this one file
+app/(site)/            landing page, /support, /privacy, /terms
 ```
 
+## The website
+
+This one server answers the app's API calls and serves the public site, so
+`/privacy` and `/terms` are live on the same host the moment you deploy. Both
+stores refuse a submission without a reachable privacy policy URL, and the app
+links to these pages from Settings and from the paywall.
+
+Edit `lib/site.ts` for the name, the copy, store links, and your company
+details. A banner sits on every page until those details are filled in,
+because the legal text ships as a draft: it describes what this app actually
+does, which makes it a real starting point, but a lawyer should read it before
+you submit.
+
+`bun run dev` serves the site at http://localhost:4321 alongside the API.
+
 ## Run
 
 ```bash
@@ -29,4 +46,6 @@ pylon secrets set REVENUECAT_WEBHOOK_AUTH=... REVENUECAT_SECRET_KEY=... \
 ```
 
 Then set `EXPO_PUBLIC_PYLON_BASE_URL` in `apps/expo/.env` to the deployed URL
-and point the RevenueCat webhook at `<url>/api/fn/revenuecatWebhook`.
+and point the RevenueCat webhook at `<url>/api/fn/revenuecatWebhook`. Put the
+same URL in `lib/site.ts` as `url`, and give App Store Connect `<url>/privacy`
+and `<url>/support`.

package/templates/backend/mobile/apps/api/app/(site)/layout.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { missingSiteConfig, site } from "@/lib/site";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * `(site)` is a route group: the parens segment never appears in a URL, so
+ * `(site)/page.tsx` still serves `/`. This layout owns the chrome for every
+ * public page. Keep it here rather than checking the pathname in a component,
+ * so a page that should not have the header simply lives outside the group.
+ */
+export default function SiteLayout({ children }: LayoutProps) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <SetupNotice />
+      <Header />
+      <main className="flex-1">{children}</main>
+      <Footer />
+    </div>
+  );
+}
+
+/**
+ * Renders while `lib/site.ts` still has blank fields. The legal pages below
+ * are a starting point with your company details filled in by that file, so
+ * an unfinished site should say so out loud rather than publish placeholder
+ * terms. It disappears on its own once the fields are set.
+ */
+function SetupNotice() {
+  const missing = missingSiteConfig();
+  if (missing.length === 0) return null;
+  return (
+    <div className="border-b border-amber-300 bg-amber-50 px-4 py-3 text-center text-[13px] text-amber-900">
+      Finish <code className="font-mono">lib/site.ts</code> before you publish
+      this site. Still blank: {missing.join(", ")}. The privacy policy and
+      terms need your details, and a lawyer should read them.
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <header className="sticky top-0 z-20 border-b border-line bg-surface/85 backdrop-blur">
+      <div className="mx-auto flex h-16 max-w-5xl items-center justify-between px-6">
+        <Link href="/" className="text-[15px] font-semibold tracking-tight">
+          {site.name}
+        </Link>
+        <nav className="flex items-center gap-6 text-[13.5px] text-ink-muted">
+          <a href="/#features" className="hidden transition-colors hover:text-ink sm:block">
+            Features
+          </a>
+          <a href="/#faq" className="hidden transition-colors hover:text-ink sm:block">
+            Questions
+          </a>
+          <Link href="/support" className="transition-colors hover:text-ink">
+            Support
+          </Link>
+          <a
+            href="/#get"
+            className="rounded-full bg-brand px-4 py-2 text-[13px] font-medium text-brand-ink transition-opacity hover:opacity-90"
+          >
+            Get the app
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+function Footer() {
+  const year = new Date().getFullYear();
+  return (
+    <footer className="border-t border-line bg-surface-soft">
+      <div className="mx-auto flex max-w-5xl flex-col gap-4 px-6 py-10 text-[13px] text-ink-muted sm:flex-row sm:items-center sm:justify-between">
+        <p>
+          © {year} {site.company || site.name}
+        </p>
+        <nav className="flex flex-wrap items-center gap-5">
+          <Link href="/privacy" className="transition-colors hover:text-ink">
+            Privacy
+          </Link>
+          <Link href="/terms" className="transition-colors hover:text-ink">
+            Terms
+          </Link>
+          <Link href="/support" className="transition-colors hover:text-ink">
+            Support
+          </Link>
+          {site.supportEmail ? (
+            <a
+              href={`mailto:${site.supportEmail}`}
+              className="transition-colors hover:text-ink"
+            >
+              {site.supportEmail}
+            </a>
+          ) : null}
+        </nav>
+      </div>
+    </footer>
+  );
+}

package/templates/backend/mobile/apps/api/app/(site)/not-found.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Link, type NotFoundProps } from "@pylonsync/react";
+
+// `not-found.tsx` inside the route group, so a missing page still renders
+// with the site header and footer around it.
+export default function NotFound(_props: NotFoundProps) {
+  return (
+    <div className="mx-auto max-w-3xl px-6 py-24 text-center">
+      <h1 className="text-3xl font-semibold tracking-[-0.02em]">
+        Page not found
+      </h1>
+      <p className="mt-3 text-[15px] text-ink-muted">
+        That link does not go anywhere.
+      </p>
+      <Link
+        href="/"
+        className="mt-8 inline-block rounded-xl bg-ink px-5 py-3 text-[14px] font-medium text-surface transition-opacity hover:opacity-90"
+      >
+        Back to the home page
+      </Link>
+    </div>
+  );
+}

package/templates/backend/mobile/apps/api/app/(site)/page.tsx

@@ -0,0 +1,221 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import { site } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: `${site.name} — ${site.tagline}`,
+  description: site.description,
+};
+
+/**
+ * The landing page, served at `/` by the same Pylon server that answers the
+ * mobile app's API calls. That is why the legal pages below are a real URL
+ * the moment you deploy: the App Store and Play Store both refuse a
+ * submission without one.
+ *
+ * Replace the copy through `lib/site.ts`. The sections themselves are here.
+ */
+export default function LandingPage() {
+  return (
+    <>
+      <Hero />
+      <Features />
+      <Pricing />
+      <Faq />
+      <GetTheApp />
+    </>
+  );
+}
+
+function Hero() {
+  return (
+    <section className="mx-auto max-w-5xl px-6 pb-16 pt-20 sm:pt-28">
+      <div className="grid items-center gap-14 lg:grid-cols-[1.05fr_0.95fr]">
+        <div>
+          <h1 className="text-4xl font-semibold leading-[1.08] tracking-[-0.02em] sm:text-5xl">
+            {site.tagline}
+          </h1>
+          <p className="mt-5 max-w-xl text-[16.5px] leading-relaxed text-ink-muted">
+            {site.description}
+          </p>
+          <div className="mt-8">
+            <StoreButtons />
+          </div>
+          <p className="mt-4 text-[13px] text-ink-muted">
+            Free for your first {site.pricing.freeLimit} notes. No account
+            needed to start.
+          </p>
+        </div>
+        <PhoneShot />
+      </div>
+    </section>
+  );
+}
+
+/**
+ * A real link once the store URL is in `lib/site.ts`, and an honest "not yet"
+ * until then. A dead link on a launch page is worse than saying nothing.
+ */
+function StoreButtons() {
+  return (
+    <div className="flex flex-wrap gap-3">
+      <StoreButton
+        href={site.appStoreUrl}
+        label="Download on the App Store"
+        pending="Coming to the App Store"
+      />
+      <StoreButton
+        href={site.playStoreUrl}
+        label="Get it on Google Play"
+        pending="Coming to Google Play"
+      />
+    </div>
+  );
+}
+
+function StoreButton({
+  href,
+  label,
+  pending,
+}: {
+  href: string;
+  label: string;
+  pending: string;
+}) {
+  if (!href) {
+    return (
+      <span className="rounded-xl border border-dashed border-line px-5 py-3 text-[14px] text-ink-muted">
+        {pending}
+      </span>
+    );
+  }
+  return (
+    <a
+      href={href}
+      className="rounded-xl bg-ink px-5 py-3 text-[14px] font-medium text-surface transition-opacity hover:opacity-90"
+    >
+      {label}
+    </a>
+  );
+}
+
+/** Placeholder, marked as one. Swap it for a real screenshot before launch. */
+function PhoneShot() {
+  return (
+    <div className="mx-auto w-full max-w-[280px]">
+      <div className="rounded-[2.25rem] border border-line bg-surface-soft p-3 shadow-[0_30px_80px_-40px_rgba(0,0,0,0.45)]">
+        <div className="flex aspect-[9/19.5] flex-col items-center justify-center gap-3 rounded-[1.75rem] border-2 border-dashed border-line px-6 text-center">
+          <svg
+            width="26"
+            height="26"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            className="text-ink-muted"
+            aria-hidden="true"
+          >
+            <rect x="3" y="5" width="18" height="14" rx="2" />
+            <circle cx="8.5" cy="10" r="1.5" />
+            <path d="m21 16-5-5-6 6-3-3-4 4" />
+          </svg>
+          <p className="text-[13px] font-medium">App screenshot</p>
+          <p className="text-[12px] leading-snug text-ink-muted">
+            Drop a 1290×2796 screenshot in here. The component is
+            <code className="mx-1 font-mono">PhoneShot</code>
+            in this file.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Features() {
+  return (
+    <section id="features" className="border-t border-line bg-surface-soft">
+      <div className="mx-auto max-w-5xl px-6 py-20">
+        <h2 className="max-w-2xl text-2xl font-semibold tracking-[-0.015em] sm:text-3xl">
+          What it does
+        </h2>
+        <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {site.features.map((feature) => (
+            <div
+              key={feature.title}
+              className="rounded-2xl border border-line bg-surface p-6"
+            >
+              <h3 className="text-[15px] font-semibold">{feature.title}</h3>
+              <p className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+                {feature.body}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Pricing() {
+  return (
+    <section className="mx-auto max-w-5xl px-6 py-20">
+      <h2 className="text-2xl font-semibold tracking-[-0.015em] sm:text-3xl">
+        What it costs
+      </h2>
+      <div className="mt-10 grid gap-6 sm:grid-cols-2">
+        <div className="rounded-2xl border border-line p-7">
+          <h3 className="text-[15px] font-semibold">Free</h3>
+          <p className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+            Up to {site.pricing.freeLimit} notes, synced across your devices.
+            Nothing expires.
+          </p>
+        </div>
+        <div className="rounded-2xl border border-brand bg-brand-soft p-7">
+          <h3 className="text-[15px] font-semibold">Pro</h3>
+          <p className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+            {site.pricing.proBlurb} Prices are set per country in the store and
+            shown in the app before you buy.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Faq() {
+  return (
+    <section id="faq" className="border-t border-line bg-surface-soft">
+      <div className="mx-auto max-w-3xl px-6 py-20">
+        <h2 className="text-2xl font-semibold tracking-[-0.015em] sm:text-3xl">
+          Questions
+        </h2>
+        <dl className="mt-10 divide-y divide-line border-y border-line">
+          {site.faq.map((item) => (
+            <div key={item.q} className="py-5">
+              <dt className="text-[15px] font-medium">{item.q}</dt>
+              <dd className="mt-2 text-[14px] leading-relaxed text-ink-muted">
+                {item.a}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </section>
+  );
+}
+
+function GetTheApp() {
+  return (
+    <section id="get" className="mx-auto max-w-5xl px-6 py-20 text-center">
+      <h2 className="text-2xl font-semibold tracking-[-0.015em] sm:text-3xl">
+        Get {site.name}
+      </h2>
+      <p className="mx-auto mt-3 max-w-md text-[15px] leading-relaxed text-ink-muted">
+        Free to start, on iPhone and Android.
+      </p>
+      <div className="mt-8 flex justify-center">
+        <StoreButtons />
+      </div>
+    </section>
+  );
+}

package/templates/backend/mobile/apps/api/app/(site)/privacy/page.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import { Company, LegalPage } from "@/components/legal";
+import { site } from "@/lib/site";
+
+export const metadata: Metadata = {
+  title: `Privacy Policy — ${site.name}`,
+  description: `How ${site.name} handles your data.`,
+};
+
+/**
+ * Both stores require a reachable privacy policy URL before they will accept
+ * a build, and Apple checks that it matches the App Privacy answers you give
+ * in App Store Connect. This text describes what the template's app really
+ * does: accounts, notes, and store subscriptions, with no advertising or
+ * tracking. Change it as your app changes.
+ */
+export default function PrivacyPage() {
+  return (
+    <LegalPage title="Privacy Policy">
+      <p>
+        {site.name} is published by <Company />. This page explains what we
+        collect, why we have it, and how to get rid of it.
+      </p>
+
+      <h2>What we collect</h2>
+      <ul>
+        <li>
+          <strong>Your account.</strong> An email address when you sign in with
+          a code, or the account identifier and email that Apple or Google
+          gives us when you use their sign-in. Apple lets you hide your real
+          address, and that works here.
+        </li>
+        <li>
+          <strong>What you write.</strong> The notes you create, so we can
+          store them and sync them to your other devices.
+        </li>
+        <li>
+          <strong>Your subscription status.</strong> Whether a subscription is
+          active, and which product it is. Apple and Google take the payment.
+          We never receive your card details.
+        </li>
+        <li>
+          <strong>Technical records.</strong> Ordinary server logs, including
+          the internet address your device connects from and the time of the
+          request. We use them to keep the service running and to spot abuse.
+        </li>
+      </ul>
+      <p>
+        You can use the app without an account. In that case the app still
+        creates an anonymous identifier so your notes can sync to the server
+        and back. Sign in later and that content moves to your account.
+      </p>
+
+      <h2>What we do not do</h2>
+      <ul>
+        <li>We do not sell your data.</li>
+        <li>
+          We do not use it for advertising, and we do not track you across
+          other apps or websites.
+        </li>
+        <li>We do not read your notes, except when you ask us to help.</li>
+      </ul>
+
+      <h2>Who else touches it</h2>
+      <p>
+        We use a small number of companies to run the service, and they may
+        process data on our behalf:
+      </p>
+      <ul>
+        <li>Apple and Google, for sign-in, payments, and app distribution.</li>
+        <li>RevenueCat, to tell us whether a subscription is active.</li>
+        <li>Our hosting provider, which stores the data and serves the API.</li>
+        <li>Our email provider, to deliver sign-in codes.</li>
+      </ul>
+
+      <h2>How long we keep it</h2>
+      <p>
+        Your notes stay until you delete them or delete your account. Logs are
+        kept for a short period and then discarded.
+      </p>
+
+      <h2>Deleting your account</h2>
+      <p>
+        Open the app and go to Settings, then Delete account. This removes your
+        account and the notes attached to it. It happens immediately and it
+        cannot be undone. A subscription is billed by the store, so cancel it
+        in your App Store or Play Store account as well.
+      </p>
+
+      <h2>Your rights</h2>
+      <p>
+        You can ask what we hold about you, ask for a copy, ask us to correct
+        it, or ask us to delete it. Write to us at the address below. Depending
+        on where you live, you may have further rights under local law.
+      </p>
+
+      <h2>Children</h2>
+      <p>
+        {site.name} is not directed at children under 13, and we do not
+        knowingly collect their data. If you believe a child has given us
+        information, contact us and we will remove it.
+      </p>
+
+      <h2>Security</h2>
+      <p>
+        Traffic between the app and our servers is encrypted in transit. We
+        limit who can reach production data. No service can promise perfect
+        security, and we do not.
+      </p>
+
+      <h2>Changes</h2>
+      <p>
+        If this policy changes in a way that matters, we will update the date
+        at the top of this page and, where the change is significant, tell you
+        in the app.
+      </p>
+
+      <h2>Contact</h2>
+      <p>
+        <Company />
+        {site.address ? <>, {site.address}</> : null}
+        {site.supportEmail ? (
+          <>
+            . Email <a href={`mailto:${site.supportEmail}`}>{site.supportEmail}</a>.
+          </>
+        ) : null}
+      </p>
+    </LegalPage>
+  );
+}