@pylonsync/create-pylon 0.3.280 → 0.3.281

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

@@ -1,192 +0,0 @@
-"use client";
-
-import React, { useCallback, useEffect, useState } from "react";
-import { db } from "@pylonsync/react";
-import {
-  useAuth,
-  OrganizationSwitcher,
-  listOrgMembers,
-  createInvite,
-  type OrgMember,
-} from "@pylonsync/client";
-import { Button } from "@/components/ui/button";
-
-export interface Project {
-  id: string;
-  orgId: string;
-  name: string;
-  createdAt: string;
-}
-
-// 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() {
-    await signOut();
-    window.location.assign("/");
-  }
-
-  return (
-    <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>
-
-      {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={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" size="sm">
-          Add
-        </Button>
-      </form>
-      {projects.length === 0 ? (
-        <p className="text-sm text-muted-foreground">No projects yet.</p>
-      ) : (
-        <ul className="space-y-1.5">
-          {projects.map((p) => (
-            <li
-              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="Delete project"
-                onClick={() => db.delete("Project", p.id)}
-                className="text-muted-foreground/40 transition-colors hover:text-red-600"
-              >
-                ✕
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
-      <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/b2b/app/dashboard/page.tsx

@@ -1,63 +0,0 @@
-import React, { Suspense, use } from "react";
-import {
-  type Metadata,
-  type PageProps,
-  type ServerData,
-} from "@pylonsync/react";
-import { Workspace } from "./dashboard-client";
-
-export const metadata: Metadata = {
-  title: "Dashboard — __APP_NAME__",
-  robots: "noindex",
-};
-
-interface User {
-  id: string;
-  email: string;
-  displayName?: string;
-}
-
-// Reads the signed-in user DURING the server render (owner-scoped: only your
-// own row). The org list + the active org's projects load client-side, since
-// they depend on the session's selected tenant.
-function Greeting({
-  serverData,
-  userId,
-}: {
-  serverData: ServerData;
-  userId: string;
-}) {
-  const user = use(serverData.get<User>("User", userId));
-  return (
-    <p className="text-sm text-muted-foreground">
-      Signed in as{" "}
-      <span className="font-medium text-foreground">
-        {user?.displayName || user?.email || "you"}
-      </span>
-      .
-    </p>
-  );
-}
-
-// `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. Must fire in the synchronous shell render, not inside <Suspense> —
-  // and return immediately so nothing renders below the already-sent redirect.
-  if (!auth.user_id) {
-    response.redirect("/login");
-    return null;
-  }
-  return (
-    <div className="space-y-6">
-      <Suspense fallback={null}>
-        <Greeting serverData={serverData} userId={auth.user_id!} />
-      </Suspense>
-      <Workspace />
-    </div>
-  );
-}

package/templates/b2b/app/error.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { type ErrorBoundaryProps } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
-
-// `app/error.tsx` → the error boundary for this segment. It catches a throw
-// in any page/layout below it and renders at HTTP 500. It's HYDRATED, so
-// this is a real interactive client component: `reset()` re-attempts the
-// route, and useState/onClick work. The thrown error reaches the client as
-// `{ message, digest }` only — the stack stays in the dev overlay
-// (PYLON_DEV_MODE) and the server logs, never in the page.
-export default function Error({ error, reset }: ErrorBoundaryProps) {
-  const [tries, setTries] = React.useState(0);
-  return (
-    <div className="space-y-6">
-      <section>
-        <h1 className="text-2xl font-semibold tracking-tight">
-          Something went wrong
-        </h1>
-        <p className="mt-2 text-muted-foreground">{error.message}</p>
-        {error.digest ? (
-          <p className="mt-1 text-xs text-muted-foreground/70">
-            Reference: <code>{error.digest}</code>
-          </p>
-        ) : null}
-      </section>
-      <div className="flex items-center gap-3">
-        <Button
-          onClick={() => {
-            setTries((n) => n + 1);
-            reset();
-          }}
-        >
-          Try again
-        </Button>
-        {tries > 0 ? (
-          <span className="text-sm text-muted-foreground">
-            Retried {tries} {tries === 1 ? "time" : "times"}
-          </span>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/templates/b2b/app/globals.css

@@ -1,139 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-/* Tailwind v4 scans these globs for class names. `components/` is here so
-   shadcn/ui component classes are seen — add more @source lines if you put
-   markup elsewhere. */
-@source "../app/**/*.{tsx,ts,jsx,js}";
-@source "../components/**/*.{tsx,ts,jsx,js}";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-/* shadcn/ui design tokens (new-york / zinc). Edit these to re-theme the
-   whole app; `npx shadcn@latest add <component>` drops new components that
-   consume the same variables. Toggle dark mode by putting `class="dark"`
-   on <html>. */
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-}
-
-.dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-}
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-border, currentColor);
-    outline-color: var(--color-ring);
-  }
-  body {
-    background-color: var(--color-background);
-    color: var(--color-foreground);
-  }
-  button {
-    cursor: pointer;
-  }
-}

package/templates/b2b/app/layout.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Link, type PageAuth } from "@pylonsync/react";
-
-// 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.
-interface LayoutProps {
-  children: React.ReactNode;
-  url: string;
-  auth: PageAuth;
-}
-
-// The root layout wraps every page.
-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>
-        {/* Tailwind is compiled by Pylon from app/globals.css and the
-            stylesheet link is injected here automatically — nothing to
-            wire up. */}
-      </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__
-            </Link>
-            <nav className="flex items-center gap-4 text-sm text-muted-foreground">
-              <Link href="/" className="hover:text-foreground">
-                Home
-              </Link>
-              {signedIn ? (
-                <Link href="/dashboard" className="hover:text-foreground">
-                  Dashboard
-                </Link>
-              ) : (
-                <>
-                  <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>
-                </>
-              )}
-            </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
-        </footer>
-      </body>
-    </html>
-  );
-}

package/templates/b2b/app/login/page.tsx

@@ -1,47 +0,0 @@
-import React from "react";
-import { Link, type Metadata, type PageProps } from "@pylonsync/react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { AuthForm } from "../auth-form";
-
-export const metadata: Metadata = {
-  title: "Sign in — __APP_NAME__",
-  // Auth pages shouldn't be indexed.
-  robots: "noindex",
-};
-
-// `app/login/page.tsx` → `/login`. A server-rendered shell around the
-// client-side <AuthForm> island.
-export default function LoginPage({ auth, response }: PageProps) {
-  // Already signed in? Skip the form. `response.redirect` runs in the
-  // synchronous shell render, so it's a real 307 before any HTML is sent
-  // (no flash, works with JS disabled).
-  if (auth.user_id) response.redirect("/dashboard");
-  return (
-    <div className="mx-auto max-w-sm">
-      <Card>
-        <CardHeader>
-          <CardTitle>Sign in</CardTitle>
-          <CardDescription>Welcome back.</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <AuthForm mode="login" />
-          <p className="text-center text-sm text-muted-foreground">
-            No account?{" "}
-            <Link
-              href="/signup"
-              className="font-medium text-foreground hover:underline"
-            >
-              Create one
-            </Link>
-          </p>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

package/templates/b2b/app/not-found.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { Link, useRouter, type NotFoundProps } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
-
-// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when
-// a page calls `response.notFound()`). It's HYDRATED, so it's interactive:
-// the buttons below use the client router. Not-found boundaries receive the
-// standard page props (and, matching Next, no `reset`).
-export default function NotFound(_props: NotFoundProps) {
-  const router = useRouter();
-  return (
-    <div className="space-y-6">
-      <section>
-        <h1 className="text-2xl font-semibold tracking-tight">404</h1>
-        <p className="mt-2 text-muted-foreground">
-          We couldn&apos;t find that page.
-        </p>
-      </section>
-      <div className="flex items-center gap-3">
-        <Button onClick={() => router.back()} variant="outline">
-          ← Go back
-        </Button>
-        <Button asChild>
-          <Link href="/">Home</Link>
-        </Button>
-      </div>
-    </div>
-  );
-}