@pylonsync/create-pylon 0.3.268 → 0.3.270

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

@@ -0,0 +1,134 @@
+import React from "react";
+import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import {
+  WRAP,
+  Divider,
+  Eyebrow,
+  FeatureGrid,
+  PrimaryButton,
+  GhostLink,
+  Shot,
+} from "@/components/marketing";
+import { PRODUCTS, productBySlug } from "@/lib/products";
+
+// Per-product SEO. `generateMetadata` runs on the server with the resolved
+// route params, so each /products/<slug> page gets its own <title>/<meta> in
+// the HTML — fully indexable, no client work.
+export function generateMetadata({ params }: PageProps): Metadata {
+  const product = productBySlug(params.slug);
+  if (!product) return { title: "Not found — Acme", robots: "noindex" };
+  return {
+    title: `${product.title} — Acme`,
+    description: product.summary,
+  };
+}
+
+// `app/products/[slug]/page.tsx` → `/products/:slug`. One template, every
+// product. The slug is resolved from the URL during the server render; an
+// unknown slug becomes a real 404 (via `response.notFound`) before any HTML is
+// sent. Add a product in lib/products.ts and its page exists automatically.
+export default function ProductPage({ params, auth, response }: PageProps) {
+  const product = productBySlug(params.slug);
+  if (!product) {
+    response.notFound();
+    return null;
+  }
+
+  const signedIn = Boolean(auth.user_id);
+  const primaryHref = signedIn ? "/dashboard" : "/signup";
+  const others = PRODUCTS.filter((p) => p.slug !== product.slug);
+
+  return (
+    <div className="bg-white text-zinc-900">
+      {/* ============================ HERO ============================ */}
+      <section className={`${WRAP} pt-16 pb-16 sm:pt-20`}>
+        <Link
+          href="/#product"
+          className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
+        >
+          ← All products
+        </Link>
+        <div className="mt-6 flex items-center gap-3">
+          <span className="flex size-9 items-center justify-center rounded-lg bg-brand-soft text-brand">
+            {product.icon}
+          </span>
+          <Eyebrow>{product.eyebrow}</Eyebrow>
+        </div>
+        <h1 className="mt-5 max-w-2xl text-balance text-[2.5rem] font-semibold leading-[1.05] tracking-[-0.02em] sm:text-[3rem]">
+          {product.headline}
+        </h1>
+        <p className="mt-6 max-w-xl text-[17px] leading-relaxed text-zinc-500">
+          {product.summary}
+        </p>
+        <div className="mt-8 flex flex-wrap items-center gap-4">
+          <PrimaryButton href={primaryHref}>
+            {signedIn ? "Open dashboard" : "Get started"}
+          </PrimaryButton>
+          <GhostLink href="/#pricing">See pricing →</GhostLink>
+        </div>
+
+        <div className="mt-16">
+          <Shot url={product.mockupUrl} label={product.mockupLabel} />
+        </div>
+      </section>
+
+      {/* ========================= FEATURES ========================= */}
+      <Divider />
+      <section className={`${WRAP} py-20`}>
+        <Eyebrow>What you get</Eyebrow>
+        <h2 className="mt-4 max-w-xl text-balance text-3xl font-semibold leading-[1.1] tracking-[-0.02em] sm:text-[2.5rem]">
+          {product.title}, end to end.
+        </h2>
+        <FeatureGrid className="mt-12" items={product.features} />
+      </section>
+
+      {/* ==================== EXPLORE OTHER ======================== */}
+      <Divider />
+      <section className={`${WRAP} py-20`}>
+        <Eyebrow>More from Acme</Eyebrow>
+        <h2 className="mt-4 text-balance text-3xl font-semibold leading-[1.1] tracking-[-0.02em] sm:text-[2.5rem]">
+          Explore the rest of the platform.
+        </h2>
+        <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          {others.map((p) => (
+            <Link
+              key={p.slug}
+              href={`/products/${p.slug}`}
+              className="group rounded-2xl border border-zinc-200 bg-paper p-6 transition-colors hover:border-zinc-300 hover:bg-white"
+            >
+              <span className="flex size-9 items-center justify-center rounded-lg bg-brand-soft text-brand">
+                {p.icon}
+              </span>
+              <h3 className="mt-4 text-[15px] font-semibold">{p.title}</h3>
+              <p className="mt-1.5 text-[13px] leading-relaxed text-zinc-500">
+                {p.tagline}
+              </p>
+              <span className="mt-3 inline-block text-[13px] font-medium text-brand">
+                Explore →
+              </span>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {/* =========================== CTA ========================== */}
+      <Divider />
+      <section className={`${WRAP} py-24`}>
+        <h2 className="max-w-xl text-balance text-[2.25rem] font-semibold leading-[1.05] tracking-[-0.02em] sm:text-[2.75rem]">
+          Get your team on {product.title}.
+        </h2>
+        <p className="mt-6 max-w-lg text-[16px] leading-relaxed text-zinc-500">
+          Start free and have your first workspace running in under a minute.
+        </p>
+        <div className="mt-8">
+          <PrimaryButton href={primaryHref}>
+            {signedIn ? "Open dashboard" : "Start building with Acme"}
+          </PrimaryButton>
+        </div>
+        <p className="mt-4 text-[12px] text-zinc-400">
+          Free to start · No credit card · Cancel anytime
+        </p>
+      </section>
+    </div>
+  );
+}

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

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

package/templates/default/app/signup/page.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { AuthShell } from "../auth-shell";
+import { AuthForm } from "../auth-form";
+
+export const metadata: Metadata = {
+  title: "Create your account — Acme",
+  robots: "noindex",
+};
+
+// `app/signup/page.tsx` → `/signup`. Split-screen auth, register mode.
+export default function SignupPage({ auth, response }: PageProps) {
+  if (auth.user_id) response.redirect("/dashboard");
+  return (
+    <AuthShell
+      title="Create an account"
+      switchPrompt="Already have an account?"
+      switchLabel="Sign in"
+      switchHref="/login"
+    >
+      <AuthForm mode="signup" />
+    </AuthShell>
+  );
+}

package/templates/default/app/sitemap.ts

@@ -0,0 +1,40 @@
+import type { Sitemap } from "@pylonsync/react";
+import { PRODUCTS } from "@/lib/products";
+import { SOLUTIONS, RESOURCES, COMPANY, COMPARISONS } from "@/lib/site";
+
+// app/sitemap.ts → served at /sitemap.xml. Enumerates every public, indexable
+// page. The marketing pages are driven by the SAME data modules the nav,
+// footer, and [slug] routes read (lib/products.ts + lib/site.ts), so the
+// sitemap can never list a page that doesn't exist — add a product or a
+// solution and it shows up here automatically. /dashboard is private and
+// /login + /signup are `robots: "noindex"`, so they're intentionally omitted.
+// Point SITE_URL at your domain in production.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default async function sitemap(): Promise<Sitemap> {
+  // Each marketing collection → its /base/:slug URLs, typed so the literal
+  // changeFrequency isn't widened to string.
+  const collection = (base: string, slugs: string[]): Sitemap =>
+    slugs.map((slug) => ({
+      url: `${SITE}${base}/${slug}`,
+      changeFrequency: "monthly",
+      priority: 0.7,
+    }));
+
+  return [
+    { url: `${SITE}/`, changeFrequency: "weekly", priority: 1 },
+    ...collection("/products", PRODUCTS.map((p) => p.slug)),
+    ...collection("/solutions", SOLUTIONS.map((s) => s.slug)),
+    ...collection("/resources", RESOURCES.map((r) => r.slug)),
+    ...collection("/company", COMPANY.map((c) => c.slug)),
+    ...collection("/compare", COMPARISONS.map((c) => c.slug)),
+  ];
+
+  // The export is async, so you can also enumerate pages from a DB read:
+  //
+  //   const posts = await fetchPublishedPosts();
+  //   return [...routes, ...posts.map((p) => ({
+  //     url: `${SITE}/blog/${p.slug}`,
+  //     lastModified: p.updatedAt,
+  //   }))];
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { ContentPage } from "@/components/marketing";
+import { SOLUTIONS, bySlug } from "@/lib/site";
+
+export function generateMetadata({ params }: PageProps): Metadata {
+  const page = bySlug(SOLUTIONS, params.slug);
+  if (!page) return { title: "Not found — Acme", robots: "noindex" };
+  return { title: `${page.navLabel} — Acme`, description: page.summary };
+}
+
+// `/solutions/:slug` — one template, every solution. Add an entry to SOLUTIONS
+// in lib/site.ts and its page exists. Unknown slugs 404.
+export default function SolutionPage({ params, auth, response }: PageProps) {
+  const page = bySlug(SOLUTIONS, params.slug);
+  if (!page) {
+    response.notFound();
+    return null;
+  }
+  return (
+    <ContentPage
+      page={page}
+      siblings={SOLUTIONS}
+      basePath="/solutions"
+      ctaHref={auth.user_id ? "/dashboard" : "/signup"}
+    />
+  );
+}

package/templates/default/app.ts

@@ -0,0 +1,194 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+} from "@pylonsync/sdk";
+// Per-workspace Stripe billing — see lib/billing.ts. `billing.manifest` brings
+// the StripeSubscription entity + checkout/portal/cancel/restore/webhook actions
+// + their read policy; the matching handlers live in functions/ (one wrapper per
+// handler, re-exported from lib/billing.ts).
+import { billing } from "./lib/billing";
+
+// 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",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    // The framework's /api/auth/password/register stamps a generated avatar
+    // color here, so the User entity must declare it.
+    avatarColor: field.string().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+// ---------------------------------------------------------------------------
+// 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",
+  {
+    name: field.string(),
+    createdBy: field.id("User"),
+    createdAt: field.datetime(),
+    // Stripe customer for this workspace's billing (referenceType: "org").
+    // The billing plugin creates + stamps this on first checkout; server-only
+    // so it never reaches the client.
+    stripeCustomerId: field.string().serverOnly().optional(),
+  },
+  { indexes: [{ name: "by_created_by", fields: ["createdBy"], unique: false }] },
+);
+
+// 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: read your own; the auth subsystem owns writes.
+const userPolicy = policy({
+  name: "user_self",
+  entity: "User",
+  allowRead: "auth.userId == data.id",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// 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, Org, OrgMember, OrgInvite, Project, ...billing.manifest.entities],
+  queries: [],
+  // Billing actions (createCheckoutSession / createBillingPortalSession /
+  // cancelSubscription / restoreSubscription / stripeWebhook). The plugin also
+  // declares getSubscription/listSubscriptions queries, but the dashboard reads
+  // the StripeSubscription entity directly (it's client-readable via the
+  // plugin's policy), so we don't wire those.
+  actions: [...billing.manifest.actions],
+  policies: [
+    userPolicy,
+    orgPolicy,
+    orgMemberPolicy,
+    orgInvitePolicy,
+    projectPolicy,
+    ...billing.manifest.policies,
+  ],
+  // 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(),
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/default/components/dashboard-shell.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import React from "react";
+import { Link, useRouter } from "@pylonsync/react";
+import { useAuth, OrganizationSwitcher } from "@pylonsync/client";
+import {
+  LayoutDashboard,
+  FolderKanban,
+  Users,
+  CreditCard,
+  Settings as SettingsIcon,
+  LogOut,
+  ExternalLink,
+  type LucideIcon,
+} from "lucide-react";
+
+type NavKey = "overview" | "projects" | "members" | "billing" | "settings";
+
+const NAV: { key: NavKey; label: string; href: string; Icon: LucideIcon }[] = [
+  { key: "overview", label: "Overview", href: "/dashboard", Icon: LayoutDashboard },
+  { key: "projects", label: "Projects", href: "/dashboard/projects", Icon: FolderKanban },
+  { key: "members", label: "Members", href: "/dashboard/members", Icon: Users },
+  { key: "billing", label: "Billing", href: "/dashboard/billing", Icon: CreditCard },
+  { key: "settings", label: "Settings", href: "/dashboard/settings", Icon: SettingsIcon },
+];
+
+// Dashboard chrome: a fixed sidebar (logo, workspace switcher, nav) plus a top
+// bar with a user menu. The marketing nav/footer are suppressed for /dashboard
+// in the root layout, so this shell is the only chrome here. `userEmail` is
+// resolved on the server (serverData.get("User", …)) and passed in, so the menu
+// shows a real email instead of a raw id.
+export function DashboardShell({
+  active,
+  title,
+  userEmail,
+  orgName,
+  children,
+}: {
+  active: NavKey;
+  title: string;
+  userEmail: string;
+  // Active org name, resolved on the server, so the workspace switcher renders
+  // the real name on first paint instead of flashing in after hydration.
+  orgName?: string;
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  return (
+    <div className="flex min-h-screen bg-white text-zinc-900">
+      <aside className="hidden w-60 shrink-0 flex-col border-r border-zinc-200 bg-zinc-50/60 md:flex">
+        <div className="flex h-14 items-center border-b border-zinc-200 px-4">
+          <Link href="/" className="flex items-center gap-2">
+            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
+              A
+            </span>
+            <span className="text-[15px] font-semibold tracking-tight">Acme</span>
+          </Link>
+        </div>
+
+        <div className="px-3 py-3">
+          {/* Every view's data is resolved server-side for the active tenant,
+              so switching orgs re-renders the dashboard for the new workspace.
+              A soft client navigation (router.push) re-fetches the SSR page —
+              all data updates — without the full-reload white flash. */}
+          <OrganizationSwitcher
+            initialActiveName={orgName}
+            onSwitched={() => router.push("/dashboard")}
+          />
+        </div>
+
+        <nav className="flex-1 space-y-0.5 px-3">
+          {NAV.map((n) => {
+            const isActive = active === n.key;
+            return (
+              <Link
+                key={n.key}
+                href={n.href}
+                className={
+                  "flex items-center gap-2.5 rounded-md px-3 py-2 text-[13.5px] font-medium transition-colors " +
+                  (isActive
+                    ? "bg-zinc-900 text-white"
+                    : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900")
+                }
+              >
+                <n.Icon
+                  className={
+                    "size-[17px] " + (isActive ? "text-white" : "text-zinc-400")
+                  }
+                  strokeWidth={2}
+                />
+                {n.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </aside>
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="flex h-14 items-center justify-between border-b border-zinc-200 px-6">
+          <h1 className="text-[15px] font-semibold">{title}</h1>
+          <UserMenu email={userEmail} />
+        </header>
+        <main className="flex-1 p-6">
+          <div className="mx-auto max-w-4xl">{children}</div>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+// Avatar + dropdown (email, View site, Sign out). Native <details> so it opens
+// on click with no extra state; the marketing nav/footer aren't here, so this
+// is the only account control.
+function UserMenu({ email }: { email: string }) {
+  const { signOut } = useAuth();
+  const initial = (email.trim()[0] || "?").toUpperCase();
+  async function onSignOut() {
+    await signOut();
+    window.location.assign("/");
+  }
+  return (
+    <details className="group relative">
+      <summary className="flex size-8 cursor-pointer select-none list-none items-center justify-center rounded-full bg-zinc-900 text-[12px] font-semibold text-white marker:hidden [&::-webkit-details-marker]:hidden">
+        {initial}
+      </summary>
+      <div className="absolute right-0 top-full z-40 mt-2 w-56 overflow-hidden rounded-xl border border-zinc-200 bg-white py-1 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.25)]">
+        <div className="border-b border-zinc-100 px-3 py-2">
+          <div className="truncate text-[13px] font-medium text-zinc-900">
+            {email || "Signed in"}
+          </div>
+        </div>
+        <a
+          href="/"
+          className="flex items-center gap-2 px-3 py-2 text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
+        >
+          <ExternalLink className="size-4 text-zinc-400" strokeWidth={2} />
+          View site
+        </a>
+        <button
+          type="button"
+          onClick={onSignOut}
+          className="flex w-full items-center gap-2 px-3 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
+        >
+          <LogOut className="size-4 text-zinc-400" strokeWidth={2} />
+          Sign out
+        </button>
+      </div>
+    </details>
+  );
+}