@pylonsync/create-pylon 0.3.267 → 0.3.269

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

@@ -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

@@ -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

@@ -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

@@ -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",
 };