@pylonsync/create-pylon 0.3.269 → 0.3.271

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/{ssr → default}/app.ts

@@ -6,6 +6,11 @@ import {
   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
@@ -38,6 +43,10 @@ const Org = entity(
     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 }] },
 );
@@ -157,15 +166,21 @@ const projectPolicy = policy({
 const manifest = buildManifest({
   name: "__APP_NAME__",
   version: "0.1.0",
-  entities: [User, Org, OrgMember, OrgInvite, Project],
+  entities: [User, Org, OrgMember, OrgInvite, Project, ...billing.manifest.entities],
   queries: [],
-  actions: [],
+  // 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),

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>
+  );
+}