npm - @pylonsync/create-pylon - Versions diffs - 0.3.268 → 0.3.269 - Mend

@pylonsync/create-pylon 0.3.268 → 0.3.269

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/package.json +1 -1
package/templates/ssr/README.md +43 -28
package/templates/ssr/app/dashboard/dashboard-client.tsx +154 -78
package/templates/ssr/app/dashboard/page.tsx +16 -60
package/templates/ssr/app/layout.tsx +46 -39
package/templates/ssr/app/login/page.tsx +1 -1
package/templates/ssr/app/page.tsx +182 -84
package/templates/ssr/app/signup/page.tsx +1 -1
package/templates/ssr/app.ts +131 -46

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.268",
+  "version": "0.3.269",
   "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/ssr/README.md CHANGED Viewed

@@ -1,8 +1,10 @@
 # __APP_NAME__
-A full-stack [Pylon](https://pylonsync.com) app — a server-rendered homepage,
-email/password auth, and a live client dashboard over a synced database, all
-served from one binary on one port. No Next.js, no separate API server.
+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.
 ## Develop
@@ -10,42 +12,55 @@ served from one binary on one port. No Next.js, no separate API server.
 __RUN_DEV__
 ```
-Open http://localhost:4321. Sign up, and your notes dashboard updates live
-(open a second tab to watch writes sync). Edit any file under `app/` and save —
-the page reloads instantly.
+Open http://localhost:4321. You get the **Acme landing page**. Sign up, create
+an organization, and you land in a **workspace** with tenant-scoped projects and
+a members panel. Create a second org and switch between them — each org's data
+is private to it. Edit any file under `app/` and save — the page reloads.
 ## Layout
 ```
-app.ts                 data model + manifest (entities, policies, auth, routes)
-app/page.tsx           "/" — the server-rendered, auth-aware homepage
-app/login,signup/      email/password forms (POST /api/auth/password/*)
-app/dashboard/         "/dashboard" — authed; server-gated, live notes + sign out
-app/auth-form.tsx      shared client island for the login/signup forms
-app/layout.tsx         root layout wrapping every page (auth-aware nav)
-app/globals.css        Tailwind entrypoint (compiled by Pylon)
-functions/             server functions (query/mutation/action) — typed RPC
+app.ts                       User + Org/OrgMember/OrgInvite + tenant-scoped Project
+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/dashboard/dashboard-client.tsx   the workspace client island
+app/globals.css              Tailwind v4 + shadcn tokens (compiled by Pylon)
+components/ui/                shadcn primitives (Button, Card)
 ```
-## How auth works
+## How it works
-Email/password is built in. `/login` and `/signup` call
-`/api/auth/password/*`; on success the server sets an **HttpOnly session
-cookie** (no token in JS-readable storage). `/dashboard` reads `auth` during
-the server render and redirects anonymous visitors to `/login` — a real 3xx
-before any HTML, so there's no flash and it works with JS off. The sync engine
-authenticates with the same cookie.
+**The landing page** (`app/page.tsx`) is server-rendered React — view source and
+the copy + SEO `<head>` are in the HTML, so it's fully indexable. It reads the
+session during the render, so the call-to-action is "Get started" for visitors
+and "Open dashboard" once you're signed in — no flash, no client fetch.
-## Add a route
+**Auth** is built in: `/login` + `/signup` POST to `/api/auth/password/*`, the
+server sets an HttpOnly session cookie, and `/dashboard` redirects anonymous
+visitors with a real 3xx before any HTML (works with JS off).
-Drop a file at `app/about/page.tsx` and visit `/about`. Pages receive
-`{ url, params, searchParams, auth, response, serverData }` from the SSR
-runtime — all typed via `PageProps` from `@pylonsync/react`.
+**Multi-tenancy** is a framework primitive. Declaring `Org` / `OrgMember` /
+`OrgInvite` lights up `/api/auth/orgs/*` + `/api/auth/select-org`, driven by
+`<OrganizationSwitcher>` from `@pylonsync/client`. Your data lives in
+tenant-scoped entities (`Project`), gated by policy:
-## Add data
+```ts
+allowRead:   "auth.tenantId == data.orgId"
+allowInsert: "auth.tenantId == data.orgId"
+```
+So `db.useQuery("Project")` returns only your **active org's** projects — switch
+orgs and the list changes, and a client literally cannot read or write another
+tenant's rows. `db.useQuery` is live; `db.insert` is optimistic.
+## Make it yours
-Edit `app.ts`. Every `entity()` becomes a synced table with a REST +
-realtime API and a typed client — no migrations, no resolvers.
+- **Rebrand:** replace "Acme" in `app/page.tsx` + `app/layout.tsx`.
+- **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`.
 ## Deploy

package/templates/ssr/app/dashboard/dashboard-client.tsx CHANGED Viewed

@@ -1,109 +1,107 @@
 "use client";
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { db } from "@pylonsync/react";
-import { useAuth } from "@pylonsync/client";
+import {
+  useAuth,
+  OrganizationSwitcher,
+  listOrgMembers,
+  createInvite,
+  type OrgMember,
+} from "@pylonsync/client";
 import { Button } from "@/components/ui/button";
-export interface Note {
+export interface Project {
   id: string;
-  body: string;
-  done: boolean;
+  orgId: string;
+  name: string;
+  createdAt: string;
 }
-// The interactive dashboard. `db.useQuery` is a LIVE subscription — it
-// re-renders the instant a Note is added or toggled, in this tab or another.
-// `db.insert` / `db.update` / `db.delete` are OPTIMISTIC: they apply to the
-// local store immediately (zero-latency UI) and sync in the background,
-// rolling back automatically if a policy rejects the write.
-//
-// `initial` are the rows the server rendered into the HTML (see page.tsx).
-// We show them on the first paint — before the local store has hydrated — so
-// there's no empty flash, then hand off to the live data. Server-rendered for
-// the first byte, local-first realtime after.
-export function Dashboard({ initial }: { initial: Note[] }) {
-  const { signOut } = useAuth();
-  const [body, setBody] = useState("");
-  const { data: live, loading } = db.useQuery<Note>("Note");
-  const notes = !loading || live.length > 0 ? live : initial;
-  async function addNote(e: React.FormEvent) {
-    e.preventDefault();
-    const text = body.trim();
-    if (!text) return;
-    setBody("");
-    // We don't send ownerId — `field.owner()` stamps it from the session
-    // server-side and rejects any forged value, so this optimistic insert is
-    // safe.
-    await db.insert("Note", { body: text, done: false });
-  }
+// The workspace. `<OrganizationSwitcher>` (from @pylonsync/client) lists your
+// orgs, creates new ones, and switches your active tenant via
+// /api/auth/select-org — all against the framework's built-in org system. The
+// rest of the page keys off `tenantId` (your active org).
+export function Workspace() {
+  const { tenantId, signOut } = useAuth();
   async function onSignOut() {
-    // Clears the server session (DELETE /api/auth/session → the cookie is
-    // cleared), then we land back on the public homepage.
     await signOut();
     window.location.assign("/");
   }
   return (
-    <div className="space-y-5">
-      <div className="flex items-center justify-end">
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-3">
+        <OrganizationSwitcher />
         <Button variant="ghost" size="sm" onClick={onSignOut}>
           Sign out
         </Button>
       </div>
-      <form onSubmit={addNote} className="flex items-center gap-2">
+      {tenantId ? (
+        <div className="grid gap-6 sm:grid-cols-2">
+          <Projects orgId={tenantId} />
+          <Members orgId={tenantId} />
+        </div>
+      ) : (
+        <div className="rounded-lg border border-dashed px-6 py-10 text-center text-sm text-muted-foreground">
+          Create or select an organization above to get started. Each org is an
+          isolated tenant — its projects and members are private to it.
+        </div>
+      )}
+    </div>
+  );
+}
+// Tenant-scoped data. `db.useQuery("Project")` returns only your active org's
+// projects (the policy gates on `auth.tenantId == data.orgId`), and switching
+// orgs re-syncs the list. `db.insert` is optimistic; we pass `orgId` = the
+// active tenant so the row lands in this org — the policy rejects any other.
+function Projects({ orgId }: { orgId: string }) {
+  const [name, setName] = useState("");
+  const { data: all } = db.useQuery<Project>("Project");
+  // Defensive filter while a tenant switch re-syncs the local replica.
+  const projects = all.filter((p) => p.orgId === orgId);
+  async function add(e: React.FormEvent) {
+    e.preventDefault();
+    const value = name.trim();
+    if (!value) return;
+    setName("");
+    await db.insert("Project", { orgId, name: value });
+  }
+  return (
+    <section className="space-y-3">
+      <h2 className="text-sm font-semibold">Projects</h2>
+      <form onSubmit={add} className="flex items-center gap-2">
         <input
-          value={body}
-          onChange={(e) => setBody(e.target.value)}
-          placeholder="Write a note…"
-          aria-label="Note"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="New project…"
+          aria-label="Project name"
           className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
         />
-        <Button type="submit">Add</Button>
+        <Button type="submit" size="sm">
+          Add
+        </Button>
       </form>
-      {notes.length === 0 ? (
-        <p className="text-sm text-muted-foreground">
-          No notes yet — add one above. It appears instantly (optimistic) and
-          syncs; open this page in a second tab to watch it arrive live.
-        </p>
+      {projects.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No projects yet.</p>
       ) : (
-        <ul className="space-y-2">
-          {notes.map((note) => (
+        <ul className="space-y-1.5">
+          {projects.map((p) => (
             <li
-              key={note.id}
-              className="flex items-center gap-3 rounded-md border px-3 py-2 text-sm"
+              key={p.id}
+              className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
             >
+              <span className="truncate">{p.name}</span>
               <button
                 type="button"
-                aria-label={note.done ? "Mark not done" : "Mark done"}
-                onClick={() =>
-                  db.update("Note", note.id, { done: !note.done })
-                }
-                className={
-                  note.done
-                    ? "text-emerald-600"
-                    : "text-muted-foreground/50 hover:text-muted-foreground"
-                }
-              >
-                {note.done ? "✓" : "○"}
-              </button>
-              <span
-                className={
-                  note.done
-                    ? "flex-1 line-through text-muted-foreground"
-                    : "flex-1"
-                }
-              >
-                {note.body}
-              </span>
-              <button
-                type="button"
-                aria-label="Delete note"
-                onClick={() => db.delete("Note", note.id)}
-                className="text-muted-foreground/40 hover:text-red-600"
+                aria-label="Delete project"
+                onClick={() => db.delete("Project", p.id)}
+                className="text-muted-foreground/40 transition-colors hover:text-red-600"
               >
                 ✕
               </button>
@@ -111,6 +109,84 @@ export function Dashboard({ initial }: { initial: Note[] }) {
           ))}
         </ul>
       )}
-    </div>
+      <p className="text-xs text-muted-foreground">
+        Tenant-scoped: only this org&apos;s projects, enforced by policy — switch
+        orgs and the list changes.
+      </p>
+    </section>
+  );
+}
+// Membership + invites go through the framework's /api/auth/orgs/:id endpoints
+// (the @pylonsync/client helpers). The framework gates invites to org admins,
+// so a member calling createInvite gets a 403 — real RBAC, no extra code.
+function Members({ orgId }: { orgId: string }) {
+  const [members, setMembers] = useState<OrgMember[] | null>(null);
+  const [email, setEmail] = useState("");
+  const [note, setNote] = useState("");
+  const refresh = useCallback(() => {
+    void listOrgMembers(orgId).then(setMembers);
+  }, [orgId]);
+  useEffect(() => {
+    setMembers(null);
+    refresh();
+  }, [refresh]);
+  async function invite(e: React.FormEvent) {
+    e.preventDefault();
+    const value = email.trim();
+    if (!value) return;
+    setEmail("");
+    setNote("");
+    try {
+      await createInvite(orgId, value, "member");
+      setNote(`Invited ${value}.`);
+      refresh();
+    } catch {
+      setNote("Only org admins can invite members.");
+    }
+  }
+  return (
+    <section className="space-y-3">
+      <h2 className="text-sm font-semibold">Members</h2>
+      {members === null ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : (
+        <ul className="space-y-1.5">
+          {members.map((m) => (
+            <li
+              key={m.user_id}
+              className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
+            >
+              <span className="truncate font-mono text-xs">
+                {shortId(m.user_id)}
+              </span>
+              <span className="text-xs text-muted-foreground">{m.role}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+      <form onSubmit={invite} className="flex items-center gap-2">
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="invite by email…"
+          aria-label="Invite email"
+          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+        <Button type="submit" size="sm" variant="outline">
+          Invite
+        </Button>
+      </form>
+      {note && <p className="text-xs text-muted-foreground">{note}</p>}
+    </section>
   );
 }
+function shortId(id: string) {
+  return id.replace(/^user_/, "").slice(0, 10);
+}

package/templates/ssr/app/dashboard/page.tsx CHANGED Viewed

@@ -1,70 +1,26 @@
-import React, { Suspense, use } from "react";
-import {
-  type Metadata,
-  type PageProps,
-  type ServerData,
-} from "@pylonsync/react";
-import { Dashboard, type Note } from "./dashboard-client";
+import React from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { Workspace } from "./dashboard-client";
 export const metadata: Metadata = {
-  title: "Dashboard — __APP_NAME__",
+  title: "Dashboard — Acme",
   robots: "noindex",
 };
-interface User {
-  id: string;
-  email: string;
-  displayName?: string;
-}
-// Reads the signed-in user + their notes DURING the server render. The reads
-// run through the same policy gate as a client query, so they're owner-scoped
-// (User: only your row; Note: only your notes) — see the policies in app.ts.
-// React 19 `use()` suspends until they resolve on the server, so the HTML
-// arrives with your notes already in it (no empty flash); then the <Dashboard>
-// island hydrates and takes over live.
-function DashboardBody({
-  serverData,
-  userId,
-}: {
-  serverData: ServerData;
-  userId: string;
-}) {
-  const user = use(serverData.get<User>("User", userId));
-  const notes = use(serverData.list<Note>("Note"));
-  return (
-    <>
-      <p className="text-sm text-muted-foreground">
-        Signed in as{" "}
-        <span className="font-medium text-foreground">
-          {user?.displayName || user?.email || "you"}
-        </span>
-        .
-      </p>
-      <Dashboard initial={notes} />
-    </>
-  );
-}
-// `app/dashboard/page.tsx` → `/dashboard`.
-export default function DashboardPage({
-  auth,
-  response,
-  serverData,
-}: PageProps) {
-  // Server-side auth gate: anonymous requests get a 307 to /login before any
-  // HTML. The redirect MUST fire here in the synchronous shell render — not
-  // inside the <Suspense> below — or React swallows it. No flash of the
-  // dashboard, works with JS disabled.
-  if (!auth.user_id) response.redirect("/login");
+// `app/dashboard/page.tsx` → `/dashboard`. Server-side auth gate: anonymous
+// requests get a 307 to /login before any HTML is sent (works with JS off, no
+// flash of the dashboard). The redirect fires — and we return — in the
+// synchronous shell render. The workspace itself is a client island that reads
+// your active org from the session.
+export default function DashboardPage({ auth, response }: PageProps) {
+  if (!auth.user_id) {
+    response.redirect("/login");
+    return null;
+  }
   return (
     <div className="space-y-6">
-      <h1 className="text-2xl font-semibold tracking-tight">Your notes</h1>
-      <Suspense
-        fallback={<p className="text-sm text-muted-foreground">Loading…</p>}
-      >
-        <DashboardBody serverData={serverData} userId={auth.user_id!} />
-      </Suspense>
+      <h1 className="text-2xl font-semibold tracking-tight">Workspace</h1>
+      <Workspace />
     </div>
   );
 }

package/templates/ssr/app/layout.tsx CHANGED Viewed

@@ -1,69 +1,76 @@
 import React from "react";
 import { Link, type PageAuth } from "@pylonsync/react";
+import { Button } from "@/components/ui/button";
-// 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
-// server-side from the session cookie, before any HTML is sent, so the nav
-// renders the right links on the first byte (no flash, no client fetch). The
-// `PageAuth` type is exported from @pylonsync/react so you never hand-roll it.
+// 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
+// server-side from the session cookie before any HTML is sent, so the nav
+// renders the right links on the first byte (no flash, no client fetch).
 interface LayoutProps {
   children: React.ReactNode;
   url: string;
   auth: PageAuth;
 }
-// The root layout wraps every page.
+// The root layout wraps every page: a marketing nav up top, a footer below.
+// Rebrand "Acme" to your product.
 export default function RootLayout({ children, auth }: LayoutProps) {
   const signedIn = Boolean(auth?.user_id);
-  // Add `className="dark"` to this <html> to flip every shadcn token to its
-  // dark value. The classes below use semantic tokens (bg-background,
-  // text-foreground, …) so the whole UI re-themes from app/globals.css.
   return (
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>__APP_NAME__</title>
+        <title>Acme</title>
         {/* Tailwind is compiled by Pylon from app/globals.css and the
-            stylesheet link is injected here automatically — nothing to
-            wire up. */}
+            stylesheet link is injected here automatically. */}
       </head>
-      <body className="min-h-screen bg-background text-foreground antialiased">
-        <header className="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
-          <div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
-            <Link
-              href="/"
-              className="text-sm font-semibold tracking-tight hover:text-muted-foreground"
-            >
-              __APP_NAME__
+      <body className="flex min-h-screen flex-col bg-background text-foreground antialiased">
+        <header className="sticky top-0 z-20 border-b bg-background/70 backdrop-blur">
+          <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
+            <Link href="/" className="flex items-center gap-2">
+              <span className="flex size-7 items-center justify-center rounded-md bg-primary text-sm font-bold text-primary-foreground">
+                A
+              </span>
+              <span className="text-sm font-semibold tracking-tight">Acme</span>
             </Link>
-            <nav className="flex items-center gap-4 text-sm text-muted-foreground">
-              <Link href="/" className="hover:text-foreground">
-                Home
-              </Link>
+            <nav className="flex items-center gap-2 text-sm">
               {signedIn ? (
-                <Link href="/dashboard" className="hover:text-foreground">
-                  Dashboard
-                </Link>
+                <Button asChild size="sm">
+                  <Link href="/dashboard">Dashboard</Link>
+                </Button>
               ) : (
                 <>
-                  <Link href="/login" className="hover:text-foreground">
-                    Sign in
-                  </Link>
-                  <Link
-                    href="/signup"
-                    className="rounded-md bg-primary px-3 py-1.5 font-medium text-primary-foreground hover:opacity-90"
-                  >
-                    Sign up
-                  </Link>
+                  <Button asChild size="sm" variant="ghost">
+                    <Link href="/login">Sign in</Link>
+                  </Button>
+                  <Button asChild size="sm">
+                    <Link href="/signup">Get started</Link>
+                  </Button>
                 </>
               )}
             </nav>
           </div>
         </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
+        <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-10">
+          {children}
+        </main>
+        <footer className="border-t">
+          <div className="mx-auto flex max-w-5xl flex-col items-center justify-between gap-2 px-4 py-6 text-xs text-muted-foreground sm:flex-row">
+            <span>© Acme, Inc.</span>
+            <span>
+              Built with{" "}
+              <a
+                href="https://pylonsync.com"
+                className="font-medium text-foreground hover:underline"
+              >
+                Pylon
+              </a>{" "}
+              · one binary, one port
+            </span>
+          </div>
         </footer>
       </body>
     </html>

package/templates/ssr/app/login/page.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ import {
 import { AuthForm } from "../auth-form";
 export const metadata: Metadata = {
-  title: "Sign in — __APP_NAME__",
+  title: "Sign in — Acme",
   // Auth pages shouldn't be indexed.
   robots: "noindex",
 };

package/templates/ssr/app/page.tsx CHANGED Viewed

@@ -1,114 +1,212 @@
 import React from "react";
 import { Link, type Metadata, type PageProps } from "@pylonsync/react";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-// SEO metadata. Export `metadata` (static) or `generateMetadata(props)`
-// (dynamic) from any page or layout — Pylon renders the <title>/<meta>
-// into <head> server-side. The `Metadata` type is exported from
-// @pylonsync/react.
+// SEO metadata. Exported `metadata` is rendered into <head> on the server, so
+// this marketing page is fully indexable — view source and the copy is in the
+// HTML. Swap "Acme" for your product throughout.
 export const metadata: Metadata = {
-  title: "__APP_NAME__ — full-stack Pylon app",
+  title: "Acme — the workspace your team actually wants",
   description:
-    "A server-rendered homepage, email/password auth, and a live client dashboard over one synced backend — one binary, one port.",
+    "Acme is a collaborative workspace for fast-moving teams. Organize projects by team, collaborate in real time, and keep every tenant's data private. Built on Pylon.",
 };
-// `app/page.tsx` → `/`. This page is server-rendered: view source and the copy
-// is in the HTML, not fetched later — good for SEO and first paint. It reads
-// `auth` (resolved from the session cookie during the render) to show the
-// right call to action. Every page receives `PageProps` from the SSR runtime:
-// `{ url, params, searchParams, auth, response, serverData }` — typed, no
-// hand-rolled interface.
-export default function IndexPage({ auth }: PageProps) {
+// `app/page.tsx` → `/`. A server-rendered marketing landing page. It reads
+// `auth` (resolved from the session cookie during the render) so the call to
+// action is right on the first byte — "Get started" for visitors, "Open
+// dashboard" once you're signed in. No client fetch, no flash.
+export default function LandingPage({ auth }: PageProps) {
   const signedIn = Boolean(auth.user_id);
   return (
-    <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
-        </span>
-        <h1 className="text-4xl font-semibold tracking-tight">
-          Full-stack apps, one binary.
-        </h1>
-        <p className="max-w-xl text-lg text-muted-foreground">
-          This homepage is server-rendered React. Sign in and your dashboard
-          becomes a live, local-first view over the same Pylon backend — writes
-          appear instantly and sync across tabs. No Next.js, no separate API
-          server, no realtime sidecar.
-        </p>
-        <div className="flex flex-wrap items-center gap-3">
-          {signedIn ? (
-            <Button asChild>
-              <Link href="/dashboard">Go to your dashboard →</Link>
-            </Button>
-          ) : (
-            <>
-              <Button asChild>
-                <Link href="/signup">Get started</Link>
+    <div className="space-y-24 pb-24">
+      {/* Hero */}
+      <section className="relative overflow-hidden">
+        {/* Soft gradient wash behind the hero. */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -top-40 left-1/2 h-[32rem] w-[60rem] -translate-x-1/2 rounded-full bg-gradient-to-tr from-primary/15 via-primary/5 to-transparent blur-3xl"
+        />
+        <div className="relative mx-auto max-w-3xl px-2 pt-16 text-center sm:pt-24">
+          <span className="inline-flex items-center gap-2 rounded-full border bg-background/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur">
+            <span className="size-1.5 rounded-full bg-emerald-500" />
+            New · Real-time projects for every team
+          </span>
+          <h1 className="mt-6 text-balance text-5xl font-semibold tracking-tight sm:text-6xl">
+            The workspace your team{" "}
+            <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+              actually wants
+            </span>
+            .
+          </h1>
+          <p className="mx-auto mt-5 max-w-xl text-balance text-lg text-muted-foreground">
+            Acme keeps your team&apos;s projects organized, in sync, and private
+            to your organization. Invite your teammates, switch between orgs, and
+            watch every change land live.
+          </p>
+          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+            {signedIn ? (
+              <Button asChild size="lg">
+                <Link href="/dashboard">Open dashboard →</Link>
               </Button>
-              <Button asChild variant="outline">
-                <Link href="/login">Sign in</Link>
-              </Button>
-            </>
-          )}
+            ) : (
+              <>
+                <Button asChild size="lg">
+                  <Link href="/signup">Get started — it&apos;s free</Link>
+                </Button>
+                <Button asChild size="lg" variant="outline">
+                  <Link href="/login">Sign in</Link>
+                </Button>
+              </>
+            )}
+          </div>
+          <p className="mt-4 text-xs text-muted-foreground">
+            No credit card required · Set up your first org in seconds.
+          </p>
+        </div>
+        {/* Product peek — a stylized dashboard mock so the hero has a subject. */}
+        <div className="relative mx-auto mt-14 max-w-4xl px-4">
+          <div className="rounded-xl border bg-card shadow-2xl shadow-primary/5">
+            <div className="flex items-center gap-1.5 border-b px-4 py-3">
+              <span className="size-3 rounded-full bg-red-400/70" />
+              <span className="size-3 rounded-full bg-yellow-400/70" />
+              <span className="size-3 rounded-full bg-green-400/70" />
+              <span className="ml-3 text-xs text-muted-foreground">
+                acme.app/dashboard
+              </span>
+            </div>
+            <div className="grid gap-4 p-5 sm:grid-cols-[1fr_1.4fr]">
+              <div className="space-y-2">
+                <div className="text-xs font-medium text-muted-foreground">
+                  Organization
+                </div>
+                <div className="flex items-center gap-2 rounded-md border px-3 py-2 text-sm">
+                  <span className="flex size-6 items-center justify-center rounded bg-primary/10 text-xs font-semibold text-primary">
+                    A
+                  </span>
+                  Acme Inc
+                </div>
+                <div className="pt-2 text-xs font-medium text-muted-foreground">
+                  Members
+                </div>
+                {["you · owner", "jordan · admin", "sam · member"].map((m) => (
+                  <div
+                    key={m}
+                    className="rounded-md border px-3 py-1.5 font-mono text-xs text-muted-foreground"
+                  >
+                    {m}
+                  </div>
+                ))}
+              </div>
+              <div className="space-y-2">
+                <div className="text-xs font-medium text-muted-foreground">
+                  Projects
+                </div>
+                {["Website redesign", "Mobile app", "Q3 launch"].map((p, i) => (
+                  <div
+                    key={p}
+                    className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
+                  >
+                    {p}
+                    {i === 0 && (
+                      <span className="rounded bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-medium text-emerald-600">
+                        live
+                      </span>
+                    )}
+                  </div>
+                ))}
+                <div className="rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground">
+                  + New project
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </section>
-      <section className="grid gap-4 sm:grid-cols-3">
-        <Feature title="Server-rendered">
-          File-based routes under <Code>app/</Code>. Pages render to HTML on the
-          server with <Code>metadata</Code> in <Code>{"<head>"}</Code>, then
-          hydrate. Drop <Code>app/about/page.tsx</Code> to add{" "}
-          <Code>/about</Code>.
-        </Feature>
-        <Feature title="Auth included">
-          Email/password is built in. <Code>/login</Code> and{" "}
-          <Code>/signup</Code> hit <Code>/api/auth/password/*</Code>; the server
-          sets an HttpOnly session cookie. <Code>/dashboard</Code> gates on it
-          server-side.
-        </Feature>
-        <Feature title="Synced database">
-          Every <Code>entity()</Code> in <Code>app.ts</Code> gets a REST +
-          realtime API and a typed client. <Code>db.useQuery</Code> is live;{" "}
-          <Code>db.insert</Code> is optimistic.
-        </Feature>
+      {/* Logos / social proof */}
+      <section className="mx-auto max-w-3xl px-4 text-center">
+        <p className="text-xs font-medium uppercase tracking-widest text-muted-foreground">
+          Trusted by teams at
+        </p>
+        <div className="mt-4 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-lg font-semibold text-muted-foreground/60">
+          <span>Globex</span>
+          <span>Initech</span>
+          <span>Hooli</span>
+          <span>Soylent</span>
+          <span>Stark</span>
+        </div>
       </section>
-      <p className="text-xs text-muted-foreground">
-        Edit <Code>app/page.tsx</Code> and save — the page reloads instantly.
-        The data model and access policies live in <Code>app.ts</Code>.
-      </p>
+      {/* Features */}
+      <section className="mx-auto max-w-4xl px-4">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl font-semibold tracking-tight">
+            Everything a growing team needs
+          </h2>
+          <p className="mt-3 text-muted-foreground">
+            Acme is multi-tenant from day one — every org is an isolated,
+            real-time workspace.
+          </p>
+        </div>
+        <div className="mt-12 grid gap-6 sm:grid-cols-3">
+          <Feature title="Organize by org" icon="▦">
+            Spin up an organization, invite your team, and switch between them in
+            a click. Each org&apos;s projects and members are completely private.
+          </Feature>
+          <Feature title="Real-time by default" icon="✦">
+            Changes sync instantly across everyone&apos;s screens — no refresh,
+            no stale data. Open two tabs and watch it happen.
+          </Feature>
+          <Feature title="Secure tenant isolation" icon="◆">
+            Access is enforced at the data layer. A member of one org can&apos;t
+            read or write another&apos;s rows — not by convention, by policy.
+          </Feature>
+        </div>
+      </section>
+      {/* CTA */}
+      <section className="mx-auto max-w-3xl px-4">
+        <div className="rounded-2xl border bg-gradient-to-br from-primary/10 to-transparent px-8 py-12 text-center">
+          <h2 className="text-3xl font-semibold tracking-tight">
+            Ready to get your team in sync?
+          </h2>
+          <p className="mx-auto mt-3 max-w-md text-muted-foreground">
+            Create your organization and invite your first teammate in under a
+            minute.
+          </p>
+          <div className="mt-6">
+            <Button asChild size="lg">
+              <Link href={signedIn ? "/dashboard" : "/signup"}>
+                {signedIn ? "Open dashboard →" : "Start for free →"}
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }
 function Feature({
   title,
+  icon,
   children,
 }: {
   title: string;
+  icon: string;
   children: React.ReactNode;
 }) {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-base">{title}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <CardDescription className="text-sm leading-relaxed">
-          {children}
-        </CardDescription>
-      </CardContent>
-    </Card>
+    <div className="rounded-xl border bg-card p-5">
+      <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+        {icon}
+      </div>
+      <h3 className="mt-4 text-base font-semibold tracking-tight">{title}</h3>
+      <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
+        {children}
+      </p>
+    </div>
   );
 }
-function Code({ children }: { children: React.ReactNode }) {
-  return <code className="rounded bg-muted px-1 text-xs">{children}</code>;
-}

package/templates/ssr/app/signup/page.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ import {
 import { AuthForm } from "../auth-form";
 export const metadata: Metadata = {
-  title: "Create your account — __APP_NAME__",
+  title: "Create your account — Acme",
   robots: "noindex",
 };

package/templates/ssr/app.ts CHANGED Viewed

@@ -7,11 +7,9 @@ import {
   discoverAppRoutes,
 } from "@pylonsync/sdk";
-// Accounts. Email/password auth is built in: POST /api/auth/password/register
-// hashes the password and writes this row; /api/auth/password/login mints a
-// session and sets an HttpOnly cookie. The framework treats the entity named
-// "User" as the account table — `passwordHash` is server-only and never
-// serialized to a client.
+// Accounts — email/password is built in (the entity named "User" is the
+// account table; passwordHash is server-only). Each user can belong to many
+// organizations.
 const User = entity(
   "User",
   {
@@ -26,40 +24,87 @@ const User = entity(
   { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
 );
-// A note that belongs to one user. `ownerId: field.owner()` is the key move:
-// the framework stamps the signed-in user's id server-side on insert and
-// rejects any forged value — so the dashboard can do a plain, optimistic
-// `db.insert("Note", { body })` (the row shows instantly, no round-trip) while
-// the owner stays unspoofable. No createNote function to write.
-const Note = entity(
-  "Note",
+// ---------------------------------------------------------------------------
+// Organizations — multi-tenancy is a framework primitive. Declaring these
+// three entities with the names + fields below lights up the built-in
+// `/api/auth/orgs/*` routes (create/list orgs, members, invites) and
+// `/api/auth/select-org` (switch your active tenant). The framework writes
+// only the fields it manages; add your own (logo, plan, billingEmail…) freely.
+// The `@pylonsync/client` `<OrganizationSwitcher>` drives all of this for you.
+// ---------------------------------------------------------------------------
+const Org = entity(
+  "Org",
   {
-    ownerId: field.string().owner(),
-    body: field.string(),
-    done: field.boolean().default(false),
-    createdAt: field.datetime().defaultNow(),
+    name: field.string(),
+    createdBy: field.id("User"),
+    createdAt: field.datetime(),
   },
-  { indexes: [{ name: "by_owner", fields: ["ownerId"], unique: false }] },
+  { indexes: [{ name: "by_created_by", fields: ["createdBy"], unique: false }] },
 );
-// Notes are private — every read and write is gated to the owner. An entity
-// with NO policy is denied to clients by default, so this is exactly what
-// makes the dashboard's live query + optimistic writes work, and only for
-// your own rows. `auth.userId` is the session user; `data.ownerId` is the row.
-const notePolicy = policy({
-  name: "note_access",
-  entity: "Note",
-  allowRead: "auth.userId == data.ownerId",
-  allowInsert: "auth.userId != null",
-  allowUpdate: "auth.userId == data.ownerId",
-  allowDelete: "auth.userId == data.ownerId",
-});
+// User ↔ Org edge with a role. `select-org` checks this table before letting
+// you switch tenants, so a client can't impersonate an org it doesn't belong
+// to. role ∈ "owner" | "admin" | "member".
+const OrgMember = entity(
+  "OrgMember",
+  {
+    orgId: field.id("Org"),
+    userId: field.id("User"),
+    role: field.string(),
+    joinedAt: field.datetime(),
+  },
+  {
+    indexes: [
+      { name: "by_org_user", fields: ["orgId", "userId"], unique: true },
+      { name: "by_user", fields: ["userId"], unique: false },
+    ],
+  },
+);
+// Pending invite. The framework's /api/auth/orgs/:id/invites endpoints write
+// these (tokenHash is server-only — the raw token only ever goes to the
+// invitee). accepted* are filled in when the invite is redeemed.
+const OrgInvite = entity(
+  "OrgInvite",
+  {
+    orgId: field.id("Org"),
+    email: field.string(),
+    role: field.string(),
+    invitedBy: field.id("User"),
+    tokenHash: field.string().serverOnly(),
+    tokenPrefix: field.string(),
+    createdAt: field.datetime(),
+    expiresAt: field.datetime(),
+    acceptedAt: field.datetime().optional(),
+    acceptedByUserId: field.id("User").optional(),
+  },
+  {
+    indexes: [
+      { name: "by_org", fields: ["orgId"], unique: false },
+      { name: "by_email_org", fields: ["email", "orgId"], unique: false },
+    ],
+  },
+);
+// ---------------------------------------------------------------------------
+// Your app's data — one tenant-scoped resource. `orgId` carries the tenant,
+// and the policy scopes every read AND write to your ACTIVE org
+// (`auth.tenantId`, set by select-org). Switch orgs in the UI and the project
+// list changes — clients literally cannot read or write another tenant's rows.
+// ---------------------------------------------------------------------------
+const Project = entity(
+  "Project",
+  {
+    orgId: field.id("Org"),
+    name: field.string(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_org", fields: ["orgId"], unique: false }] },
+);
-// User rows are read-only to clients, and only your own (so the dashboard can
-// read your display name). The auth subsystem owns writes — registration and
-// login go through /api/auth/password/*, never the entity API.
+// User rows: read your own; the auth subsystem owns writes.
 const userPolicy = policy({
-  name: "user_access",
+  name: "user_self",
   entity: "User",
   allowRead: "auth.userId == data.id",
   allowInsert: "false",
@@ -67,28 +112,68 @@ const userPolicy = policy({
   allowDelete: "false",
 });
-// The manifest is your whole app in one object: data, policies, and the
-// file-based routes under `app/`. `pylon dev` reads this, serves the SSR
-// frontend and the API from one port, and regenerates a typed client on
-// every change.
+// Org / OrgMember / OrgInvite are managed by the framework's /api/auth/orgs
+// routes (which bypass these policies via the OrgStore). Clients reach them
+// through the `@pylonsync/client` org helpers, not the entity API — so deny
+// direct writes, and scope reads to your own membership / active org.
+const orgPolicy = policy({
+  name: "org_access",
+  entity: "Org",
+  allowRead: "auth.tenantId == data.id",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+const orgMemberPolicy = policy({
+  name: "org_member_access",
+  entity: "OrgMember",
+  allowRead: "auth.userId == data.userId || auth.tenantId == data.orgId",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+const orgInvitePolicy = policy({
+  name: "org_invite_access",
+  entity: "OrgInvite",
+  allowRead: "auth.tenantId == data.orgId",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+// Projects are scoped to your ACTIVE tenant. `auth.tenantId == data.orgId`
+// gates read AND write — and because orgId is client-supplied at insert time
+// (not stamped later), checking it here means you can only create a project in
+// the org you've selected. Switch orgs → a different project list.
+const projectPolicy = policy({
+  name: "project_tenant",
+  entity: "Project",
+  allowRead: "auth.tenantId == data.orgId",
+  allowInsert: "auth.tenantId == data.orgId",
+  allowUpdate: "auth.tenantId == data.orgId",
+  allowDelete: "auth.tenantId == data.orgId",
+});
 const manifest = buildManifest({
   name: "__APP_NAME__",
   version: "0.1.0",
-  entities: [User, Note],
+  entities: [User, Org, OrgMember, OrgInvite, Project],
   queries: [],
   actions: [],
-  policies: [userPolicy, notePolicy],
-  // Email/password is on by default against the User entity above. `auth()`
-  // is the knob for session lifetime, exposed fields, orgs, and trusted
-  // origins — `auth({ session: { expiresIn: 60 * 60 * 24 * 7 } })` for a
-  // 7-day session, etc.
+  policies: [
+    userPolicy,
+    orgPolicy,
+    orgMemberPolicy,
+    orgInvitePolicy,
+    projectPolicy,
+  ],
+  // Email/password is on by default against the User entity. The org entities
+  // above are named with the framework defaults (Org / OrgMember / OrgInvite),
+  // so `/api/auth/orgs/*` + `/api/auth/select-org` work with no extra config.
   auth: auth(),
-  // File-based routing: `discoverAppRoutes()` walks `app/**/page.tsx` and
-  // emits one route per page. Drop `app/about/page.tsx` to add `/about`.
   routes: await discoverAppRoutes(),
 });
-// Emit canonical manifest JSON to stdout for `pylon codegen`.
 console.log(JSON.stringify(manifest, null, 2));
 export default manifest;