@pylonsync/create-pylon 0.3.273 → 0.3.275

package/templates/waitlist/app.ts

@@ -0,0 +1,134 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// waitlist — a pre-launch / coming-soon landing page with a LIVE signup
+// counter. The whole point is the realtime hook: open the page in two tabs,
+// submit an email in one, and the counter on the other ticks up with no
+// refresh. That's the proof it's a real live app and not a static page.
+//
+// The data model is deliberately tiny — two entities:
+//   • Signup  — one row per email. Holds visitor PII, so it denies ALL client
+//               reads/writes (writes go through the joinWaitlist mutation; the
+//               public page only ever sees an aggregate count, never an email).
+//   • User    — the business owner's account (email/password is built in), so
+//               the owner can sign in to the dashboard and see their signups.
+// ---------------------------------------------------------------------------
+
+// One waitlist signup. `email` is the only PII; `createdAt` powers the
+// signups-over-time chart on the dashboard. The unique index on email dedupes
+// at the database level — a duplicate insert is rejected even under a race, so
+// joinWaitlist can treat the conflict as "already joined".
+const Signup = entity(
+  "Signup",
+  {
+    email: field.string(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_email", fields: ["email"], unique: true },
+      { name: "by_created", fields: ["createdAt"], unique: false },
+    ],
+  },
+);
+
+// A single-row, PII-FREE aggregate the public page can safely read live. It
+// holds only the signup count — no emails. `joinWaitlist` keeps it in sync with
+// the real Signup count on every new join. The landing page subscribes with
+// `db.useQuery("WaitlistStat")`, which syncs across every open tab through the
+// replica — so the counter ticks up everywhere the instant someone joins. This
+// is the cross-tab-safe realtime primitive (entity sync), not a per-connection
+// server-query subscription.
+const WaitlistStat = entity(
+  "WaitlistStat",
+  {
+    count: field.int().default(0),
+    updatedAt: field.datetime().defaultNow(),
+  },
+  {},
+);
+
+// The business owner's account. Email/password auth is built in against an
+// entity named "User" (passwordHash is server-only; the register route stamps
+// avatarColor). The dashboard is gated to the owner — see PYLON_OWNER_EMAIL in
+// functions/waitlistStats.ts and app/dashboard/page.tsx.
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    avatarColor: field.string().optional(),
+    // Set when the owner verifies their email; unused by the waitlist flow but
+    // declared so the framework's email-verification routes have a column.
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+// PRIVACY — the heart of the spec. Signup holds visitor emails, so it denies
+// EVERY client read and write. No `db.useQuery("Signup")` can ever pull a row,
+// and no client can insert/update/delete directly. Writes happen only inside
+// the server-side `joinWaitlist` mutation (functions bypass policies); reads
+// happen only inside `waitlistCount` (returns a bare integer) and the
+// owner-gated `waitlistStats`. A marketing site must never leak its own
+// customers' emails — this policy is what guarantees it.
+const signupPolicy = policy({
+  name: "signup_private",
+  entity: "Signup",
+  allowRead: "false",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// The aggregate count is public to READ (it's just a number — the whole point
+// is that the landing page shows it live to everyone). Clients can't WRITE it;
+// only the joinWaitlist mutation maintains it server-side.
+const waitlistStatPolicy = policy({
+  name: "waitlist_stat_public_read",
+  entity: "WaitlistStat",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// The owner reads their own User row (the dashboard resolves their email this
+// way to check ownership). The auth subsystem owns all writes.
+const userPolicy = policy({
+  name: "user_self",
+  entity: "User",
+  allowRead: "auth.userId == data.id",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const manifest = buildManifest({
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  entities: [Signup, WaitlistStat, User],
+  // joinWaitlist (public mutation) + waitlistStats (owner-gated query) live in
+  // functions/ and are discovered automatically — they don't need listing here.
+  queries: [],
+  actions: [],
+  policies: [signupPolicy, waitlistStatPolicy, userPolicy],
+  // Email/password is on by default against the User entity above. No orgs,
+  // no billing — a waitlist is single-tenant (one business, one owner).
+  auth: auth(),
+  routes: await discoverAppRoutes(),
+});
+
+// Emit the canonical manifest JSON to stdout — `pylon dev` captures this.
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/waitlist/components/marketing.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+
+// Reusable presentational pieces for the landing page. All server-rendered —
+// no client JS. Restyle here and the whole page follows. The brand accent
+// (`text-brand`, `bg-brand-soft`) comes from CSS vars set on <html> in
+// app/layout.tsx, which read lib/site.config.ts — so re-theming is one edit.
+
+// Shared container: a contained, centered column.
+export const WRAP = "mx-auto w-full max-w-3xl px-6";
+
+export function Eyebrow({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-brand">
+      {children}
+    </p>
+  );
+}
+
+// "New / Coming soon"-style pill for the hero.
+export function Badge({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white py-1 pl-1.5 pr-3 text-[13px] text-zinc-600 shadow-sm">
+      <span className="inline-block size-1.5 rounded-full bg-brand" />
+      {children}
+    </span>
+  );
+}
+
+export function Divider() {
+  return (
+    <div className={WRAP}>
+      <div className="border-t border-zinc-200/70" />
+    </div>
+  );
+}
+
+export function SectionHead({
+  eyebrow,
+  title,
+  body,
+}: {
+  eyebrow: string;
+  title: string;
+  body?: string;
+}) {
+  return (
+    <div>
+      <Eyebrow>{eyebrow}</Eyebrow>
+      <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
+        {title}
+      </h2>
+      {body ? (
+        <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-zinc-500">
+          {body}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+// A grid of value props — icon + title + body.
+export function FeatureGrid({
+  items,
+}: {
+  items: { title: string; body: string; icon?: string }[];
+}) {
+  return (
+    <div className="grid gap-6 sm:grid-cols-3">
+      {items.map((f) => (
+        <div key={f.title}>
+          {f.icon ? (
+            <span className="flex size-9 items-center justify-center rounded-lg bg-brand-soft text-brand">
+              {f.icon}
+            </span>
+          ) : null}
+          <h3 className="mt-4 text-[15px] font-semibold text-zinc-900">
+            {f.title}
+          </h3>
+          <p className="mt-2 text-[14px] leading-relaxed text-zinc-500">
+            {f.body}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Initials for testimonial avatars, so the cards look finished without a photo.
+export function initials(name: string) {
+  return name
+    .split(/\s+/)
+    .map((w) => w[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}

package/templates/waitlist/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/templates/waitlist/components/ui/card.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "rounded-xl border bg-card text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/templates/waitlist/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/templates/waitlist/functions/joinWaitlist.ts

@@ -0,0 +1,82 @@
+import { mutation, v } from "@pylonsync/functions";
+
+// Normalize + sanity-check an email without pulling in a dependency. This is a
+// pragmatic "looks like an email" check, not RFC 5322 — the unique index is the
+// real integrity guard. We cap the length so a hostile caller can't stuff a
+// megabyte string into the row.
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function normalizeEmail(raw: string): string | null {
+  const email = raw.trim().toLowerCase();
+  if (email.length < 3 || email.length > 254) return null;
+  if (!EMAIL_RE.test(email)) return null;
+  return email;
+}
+
+// joinWaitlist — the ONLY way a Signup row is ever written. It's a `mutation`
+// (not an `action`): mutations get `ctx.db` access and run as one atomic
+// transaction, and the insert fires a change event that re-runs the live
+// `waitlistCount` query for every open tab — that's what makes the counter tick
+// up in realtime.
+//
+// `auth: "public"` because a landing-page visitor has no account. Public
+// mutations are still rate-limited at the HTTP layer in production (the
+// framework's rate_limit plugin); here we also validate + dedupe so the same
+// email can't inflate the count.
+//
+// PRIVACY: this returns only `{ ok, alreadyJoined }`. It never returns a Signup
+// row, an id, or anyone else's email.
+export default mutation<{ email: string }, { ok: boolean; alreadyJoined: boolean }>({
+  auth: "public",
+  args: { email: v.string() },
+  async handler(ctx, args) {
+    const email = normalizeEmail(args.email);
+    if (!email) {
+      throw ctx.error("INVALID_ARGS", "Enter a valid email address.");
+    }
+
+    // Signup denies ALL client access by policy, so these go through
+    // `ctx.db.unsafe` — the explicit "this is an intentional cross-user write
+    // from a trusted handler" surface (also future-proofs against
+    // PYLON_STRICT_FN_POLICIES). The handler IS the only writer.
+    //
+    // Dedupe: if this email already joined, report success idempotently rather
+    // than erroring — re-submitting the same address is a no-op, not a failure.
+    const existing = await ctx.db.unsafe.lookup("Signup", "email", email);
+    if (existing) {
+      return { ok: true, alreadyJoined: true };
+    }
+
+    try {
+      await ctx.db.unsafe.insert("Signup", {
+        email,
+        createdAt: new Date().toISOString(),
+      });
+    } catch (e) {
+      // Lost a race to a concurrent insert of the same email — the unique index
+      // on `email` rejected the duplicate. That's still "you're on the list".
+      const msg = e instanceof Error ? e.message : String(e);
+      if (/unique|constraint|conflict|duplicate/i.test(msg)) {
+        return { ok: true, alreadyJoined: true };
+      }
+      throw e;
+    }
+
+    // Keep the public, PII-free WaitlistStat singleton in sync with the real
+    // count. We RECOUNT (rather than +1) so the number can never drift, and
+    // this whole handler is one transaction — on SQLite writers serialize, so
+    // the recount-then-write is consistent. The landing page reads this row via
+    // `db.useQuery`, which syncs the new value to every open tab.
+    const total = (await ctx.db.unsafe.list("Signup")).length;
+    const stat = (await ctx.db.unsafe.list("WaitlistStat"))[0] as
+      | { id: string }
+      | undefined;
+    const now = new Date().toISOString();
+    if (stat) {
+      await ctx.db.unsafe.update("WaitlistStat", stat.id, { count: total, updatedAt: now });
+    } else {
+      await ctx.db.unsafe.insert("WaitlistStat", { count: total, updatedAt: now });
+    }
+
+    return { ok: true, alreadyJoined: false };
+  },
+});

package/templates/waitlist/functions/waitlistStats.ts

@@ -0,0 +1,75 @@
+import { query } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+import type { SignupRow, WaitlistStatsResult } from "../lib/stats";
+
+// waitlistStats — the owner's view of the raw signups, INCLUDING emails. This
+// is the one function allowed to return PII, so it's gated hard: only the
+// configured owner (PYLON_OWNER_EMAIL) gets data; anyone else is denied.
+//
+// The dashboard calls this with `callFn` and re-fetches whenever the live,
+// public WaitlistStat count ticks — so the total / chart / list stay current as
+// people join, while the emails themselves never travel over entity sync.
+//
+// `auth: "user"` means an anonymous caller never reaches the handler; the
+// extra owner check is what stops a *different* signed-in user from reading the
+// list. Functions bypass the Signup read policy, which is exactly why the gate
+// has to live here.
+function ymd(iso: string): string {
+  // Bucket by calendar day in UTC. `toISOString()` is always YYYY-MM-DDT…Z.
+  return new Date(iso).toISOString().slice(0, 10);
+}
+
+export default query({
+  auth: "user",
+  async handler(ctx): Promise<WaitlistStatsResult> {
+    // AuthInfo carries the userId, not the email — resolve the caller's email
+    // from their own User row (the User self-read policy allows that), then
+    // check it against the configured owner. A non-owner gets `authorized:
+    // false` and NOTHING else — no count, no emails. (We return a flag instead
+    // of throwing: a query has no `ctx.error`, and a bare throw reaches the
+    // client as a generic, message-stripped HANDLER_ERROR.)
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    const email = (me?.email as string | undefined) ?? null;
+    if (!emailMatchesOwner(email, ctx.env.PYLON_OWNER_EMAIL)) {
+      return { authorized: false };
+    }
+
+    // Signup denies all client reads; this returns every row (owner-only), so
+    // it goes through the intentional cross-user read surface.
+    const rows = (await ctx.db.unsafe.list("Signup")) as unknown as SignupRow[];
+
+    const signups = rows
+      .map((r) => ({ id: r.id, email: r.email, createdAt: r.createdAt }))
+      .sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1));
+
+    // Daily buckets for the last 30 days, zero-filled so the chart is
+    // continuous even on days with no signups.
+    const byDay = new Map<string, number>();
+    for (const r of rows) {
+      const key = ymd(r.createdAt);
+      byDay.set(key, (byDay.get(key) ?? 0) + 1);
+    }
+    const now = new Date();
+    const todayKey = now.toISOString().slice(0, 10);
+    const daily: { date: string; count: number }[] = [];
+    for (let i = 29; i >= 0; i--) {
+      const d = new Date(now);
+      d.setUTCDate(d.getUTCDate() - i);
+      const key = d.toISOString().slice(0, 10);
+      daily.push({ date: key, count: byDay.get(key) ?? 0 });
+    }
+
+    const sevenDaysAgo = new Date(now);
+    sevenDaysAgo.setUTCDate(sevenDaysAgo.getUTCDate() - 7);
+    const last7 = rows.filter((r) => new Date(r.createdAt) >= sevenDaysAgo).length;
+
+    return {
+      authorized: true,
+      total: rows.length,
+      today: byDay.get(todayKey) ?? 0,
+      last7,
+      daily,
+      signups,
+    };
+  },
+});

package/templates/waitlist/gitignore

@@ -0,0 +1,10 @@
+node_modules/
+.pylon/
+pylon.manifest.json
+pylon.client.ts
+web/dist/
+*.db
+*.db-*
+.env
+.env.local
+.DS_Store

package/templates/waitlist/lib/owner.ts

@@ -0,0 +1,26 @@
+// Who owns this waitlist? A waitlist is single-tenant — one business, one
+// owner — so ownership is just "the email the owner signs in with", configured
+// once via the PYLON_OWNER_EMAIL env var. The owner-only `waitlistStats`
+// function reads that env (via `ctx.env`) and compares it here.
+//
+// Fail closed: if PYLON_OWNER_EMAIL is unset, NOBODY is the owner and the
+// dashboard stays locked. That's deliberate — an unset owner on a public site
+// must not mean "everyone can read the signups". Set it in .env (see
+// .env.example) before signing in.
+
+export function normalizeOwner(raw: string | null | undefined): string | null {
+  const v = raw?.trim().toLowerCase();
+  return v && v.length > 0 ? v : null;
+}
+
+// Pure comparator — the caller supplies the configured owner value (from
+// `ctx.env.PYLON_OWNER_EMAIL`), so the rule lives in one place and stays
+// testable without reaching for the environment here.
+export function emailMatchesOwner(
+  email: string | null | undefined,
+  ownerRaw: string | null | undefined,
+): boolean {
+  const owner = normalizeOwner(ownerRaw);
+  if (!owner) return false;
+  return (email ?? "").trim().toLowerCase() === owner;
+}