@pylonsync/create-pylon 0.3.274 → 0.3.276

package/templates/restaurant/app.ts

@@ -0,0 +1,115 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// restaurant — a food & hospitality site with LIVE reservation availability.
+// Same realtime engine as `local-service`, but capacity-based: each seating
+// time has N tables, so the picker shows "4 left" and a time greys out for
+// EVERYONE the instant the last table goes — no refresh. The server re-checks
+// the count at insert time (under a per-slot lock) so two parties can't claim
+// the last table at once.
+//
+//   • Reservation     — the real booking, with the guest's name/email/phone +
+//                       party size. Holds PII → denies ALL client reads/writes.
+//   • ReservationSlot — a PII-free `{ startsAt }` marker, one per reservation,
+//                       PUBLIC-READ so the picker can COUNT how many tables are
+//                       taken per seating and show what's left, live.
+//   • User            — the owner's account (email/password) for the dashboard.
+//
+// Menu + seating hours + tables-per-seating are CONFIG (lib/site.config.ts).
+// ---------------------------------------------------------------------------
+
+const Reservation = entity(
+  "Reservation",
+  {
+    startsAt: field.datetime(), // the seating time
+    partySize: field.int(),
+    customerName: field.string(),
+    customerEmail: field.string(),
+    customerPhone: field.string().optional(),
+    notes: field.string().optional(),
+    status: field.string().default("pending"), // "pending" | "confirmed" | "cancelled"
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_start", fields: ["startsAt"], unique: false }] },
+);
+
+// PII-free occupancy marker. One row per active reservation; the picker counts
+// rows per `startsAt` to know how many tables are taken. Cancelling a
+// reservation deletes its marker, which frees a table live.
+const ReservationSlot = entity(
+  "ReservationSlot",
+  {
+    startsAt: field.datetime(),
+    reservationId: field.id("Reservation"),
+  },
+  { indexes: [{ name: "by_start", fields: ["startsAt"], unique: false }] },
+);
+
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    avatarColor: field.string().optional(),
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+// PRIVACY — Reservation holds the guest's contact details + notes, so it denies
+// EVERY client read and write. The public page only ever reads ReservationSlot
+// (a bare time marker), and the full reservations come back only through the
+// owner-gated `reservationsForOwner`.
+const reservationPolicy = policy({
+  name: "reservation_private",
+  entity: "Reservation",
+  allowRead: "false",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// Occupancy markers are public to READ (just a timestamp — the point is the
+// live "tables left" count). Clients can't WRITE them; only createReservation /
+// cancelReservation maintain them server-side.
+const reservationSlotPolicy = policy({
+  name: "reservation_slot_public_read",
+  entity: "ReservationSlot",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+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: [Reservation, ReservationSlot, User],
+  queries: [],
+  actions: [],
+  policies: [reservationPolicy, reservationSlotPolicy, userPolicy],
+  auth: auth(),
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/restaurant/components/marketing.tsx

@@ -0,0 +1,162 @@
+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-5xl 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();
+}
+
+// A deliberately-obvious image placeholder. Real sites drop a photo here; this
+// makes the spot unmistakable — dashed border, a photo glyph, and a one-line
+// "swap this" instruction telling you exactly what to replace and where. Looks
+// tidy enough to demo, but no one will mistake it for a finished design.
+//
+//   shape  — "landscape" | "portrait" | "square" | "circle"
+//   title  — what photo belongs here ("A photo of your dining room")
+//   hint   — how to replace it ("Swap for an <img> in app/page.tsx")
+export function ImagePlaceholder({
+  shape = "landscape",
+  title,
+  hint,
+  className = "",
+}: {
+  shape?: "landscape" | "portrait" | "square" | "circle";
+  title: string;
+  hint?: string;
+  className?: string;
+}) {
+  const aspect =
+    shape === "portrait"
+      ? "aspect-[4/5]"
+      : shape === "square" || shape === "circle"
+        ? "aspect-square"
+        : "aspect-[4/3]";
+  const radius = shape === "circle" ? "rounded-full" : "rounded-2xl";
+  return (
+    <div
+      className={`relative grid place-items-center overflow-hidden border-2 border-dashed border-zinc-300 bg-zinc-50 ${aspect} ${radius} ${className}`}
+    >
+      <div className="px-6 text-center">
+        <svg
+          className="mx-auto size-7 text-zinc-300"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <rect x="3" y="3" width="18" height="18" rx="2" />
+          <circle cx="9" cy="9" r="1.6" />
+          <path d="m21 15-4.5-4.5L7 20" />
+        </svg>
+        <p className="mt-3 text-[13px] font-medium text-zinc-500">{title}</p>
+        {hint ? <p className="mt-1 text-[11.5px] leading-snug text-zinc-400">{hint}</p> : null}
+      </div>
+    </div>
+  );
+}
+
+// A small "live" pill — float it over a hero image to keep the realtime hook
+// visible (e.g. "Tables update live"). Pure decoration; no client JS.
+export function LiveBadge({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/95 px-3 py-1.5 text-[12.5px] font-medium text-zinc-700 shadow-sm backdrop-blur">
+      <span className="relative flex size-2">
+        <span className="absolute inline-flex size-2 animate-ping rounded-full bg-green-500/60" />
+        <span className="relative inline-flex size-2 rounded-full bg-green-600" />
+      </span>
+      {children}
+    </span>
+  );
+}

package/templates/restaurant/components/section-scroller.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useEffect } from "react";
+
+// Makes in-page section links work. A hydrated Pylon page updates the URL for a
+// plain `<a href="#section">` click but doesn't perform the browser's native
+// fragment scroll, so the page jumps nowhere. This installs ONE delegated click
+// handler that catches any same-page `#`/`/#` anchor and scrolls to it smoothly.
+//
+// Render it once (in the root layout). Renders nothing. Real route links should
+// still use `<Link>` from @pylonsync/react — this only handles `#` anchors.
+export function SectionScroller() {
+  useEffect(() => {
+    function onClick(e: MouseEvent) {
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+        return;
+      }
+      const target = e.target as Element | null;
+      const link = target?.closest?.('a[href^="#"], a[href^="/#"]') as HTMLAnchorElement | null;
+      if (!link) return;
+      const href = link.getAttribute("href") || "";
+      const id = href.slice(href.indexOf("#") + 1);
+      if (!id) return;
+      const el = document.getElementById(id);
+      if (!el) return; // target not on this page — leave it to the browser
+      e.preventDefault();
+      el.scrollIntoView({ block: "start" });
+      history.replaceState(null, "", "#" + id);
+    }
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, []);
+
+  return null;
+}

package/templates/restaurant/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/restaurant/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/restaurant/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/restaurant/functions/cancelReservation.ts

@@ -0,0 +1,26 @@
+import { mutation, v } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+
+// cancelReservation — owner-only. Marks the reservation cancelled AND deletes
+// its ReservationSlot marker, which FREES a table at that seating: the deletion
+// syncs to every open picker, so "tables left" ticks back up live.
+export default mutation<{ reservationId: string }, { ok: boolean }>({
+  auth: "user",
+  args: { reservationId: v.id("Reservation") },
+  async handler(ctx, args) {
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    if (!emailMatchesOwner(me?.email as string | undefined, ctx.env.PYLON_OWNER_EMAIL)) {
+      throw ctx.error("POLICY_DENIED", "Only the owner can manage reservations.");
+    }
+    await ctx.db.unsafe.update("Reservation", args.reservationId, { status: "cancelled" });
+
+    const markers = (await ctx.db.unsafe.list("ReservationSlot")) as unknown as {
+      id: string;
+      reservationId: string;
+    }[];
+    const marker = markers.find((m) => m.reservationId === args.reservationId);
+    if (marker) await ctx.db.unsafe.delete("ReservationSlot", marker.id);
+
+    return { ok: true };
+  },
+});

package/templates/restaurant/functions/confirmReservation.ts

@@ -0,0 +1,17 @@
+import { mutation, v } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+
+// confirmReservation — owner-only. Marks a pending reservation confirmed; the
+// ReservationSlot marker stays, so the table remains held.
+export default mutation<{ reservationId: string }, { ok: boolean }>({
+  auth: "user",
+  args: { reservationId: v.id("Reservation") },
+  async handler(ctx, args) {
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    if (!emailMatchesOwner(me?.email as string | undefined, ctx.env.PYLON_OWNER_EMAIL)) {
+      throw ctx.error("POLICY_DENIED", "Only the owner can manage reservations.");
+    }
+    await ctx.db.unsafe.update("Reservation", args.reservationId, { status: "confirmed" });
+    return { ok: true };
+  },
+});

package/templates/restaurant/functions/createReservation.ts

@@ -0,0 +1,92 @@
+import { mutation, v } from "@pylonsync/functions";
+import { siteConfig } from "../lib/site.config";
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// createReservation — the ONLY writer of Reservation + its ReservationSlot
+// marker. A transactional `mutation` (atomic + `ctx.db`); the marker insert
+// fires a change event so every open picker recomputes "tables left" live.
+//
+// `auth: "public"` — a guest has no account. The server RE-CHECKS that the
+// seating is still under capacity before inserting, under a per-seating advisory
+// lock so two parties can't both grab the last table. Capacity is per seating
+// time: count the markers sharing this `startsAt`, compare to tablesPerSlot.
+//
+// PRIVACY: returns only `{ ok, reason? }` — never a reservation row or any
+// guest's contact details.
+export default mutation<
+  {
+    startsAt: string;
+    partySize: number;
+    customerName: string;
+    customerEmail: string;
+    customerPhone?: string;
+    notes?: string;
+  },
+  { ok: boolean; reason?: "past" | "full" | "party" | "invalid" }
+>({
+  auth: "public",
+  args: {
+    startsAt: v.string(),
+    partySize: v.int(),
+    customerName: v.string(),
+    customerEmail: v.string(),
+    customerPhone: v.optional(v.string()),
+    notes: v.optional(v.string()),
+  },
+  async handler(ctx, args) {
+    const cfg = siteConfig.reservations;
+    const name = args.customerName.trim();
+    const email = args.customerEmail.trim().toLowerCase();
+    const phone = args.customerPhone?.trim() || null;
+    const notes = args.notes?.trim() || null;
+
+    if (name.length < 1 || name.length > 120) {
+      throw ctx.error("INVALID_ARGS", "Enter your name.");
+    }
+    if (!EMAIL_RE.test(email) || email.length > 254) {
+      throw ctx.error("INVALID_ARGS", "Enter a valid email address.");
+    }
+    if (!Number.isInteger(args.partySize) || args.partySize < 1) {
+      return { ok: false, reason: "party" };
+    }
+    if (args.partySize > cfg.maxPartySize) {
+      return { ok: false, reason: "party" };
+    }
+
+    const startMs = Date.parse(args.startsAt);
+    if (Number.isNaN(startMs)) return { ok: false, reason: "invalid" };
+    const startsAt = new Date(startMs).toISOString();
+    if (startMs < Date.now() + cfg.leadTimeHours * 3_600_000) {
+      return { ok: false, reason: "past" };
+    }
+
+    // Serialize the count-then-insert for THIS seating so two parties can't
+    // both claim the last table. Held until the tx commits.
+    await ctx.db.advisoryLock(`reservation_slot:${startsAt}`);
+
+    // Capacity check: how many tables are already taken at this seating?
+    // Cross-user read of the deny-all-projection → `unsafe`.
+    const markers = (await ctx.db.unsafe.list("ReservationSlot")) as unknown as {
+      startsAt: string;
+    }[];
+    const taken = markers.filter((m) => m.startsAt === startsAt).length;
+    if (taken >= cfg.tablesPerSlot) {
+      return { ok: false, reason: "full" };
+    }
+
+    const reservationId = await ctx.db.unsafe.insert("Reservation", {
+      startsAt,
+      partySize: args.partySize,
+      customerName: name,
+      customerEmail: email,
+      customerPhone: phone,
+      notes,
+      status: "pending",
+      createdAt: new Date().toISOString(),
+    });
+    await ctx.db.unsafe.insert("ReservationSlot", { startsAt, reservationId });
+
+    return { ok: true };
+  },
+});

package/templates/restaurant/functions/reservationsForOwner.ts

@@ -0,0 +1,28 @@
+import { query } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+import type { ReservationRow, OwnerReservationsResult } from "../lib/reservation";
+
+// reservationsForOwner — the owner's view of every reservation, INCLUDING the
+// guest's name/email/phone + notes. The one function allowed to return that
+// PII, gated to the configured owner (PYLON_OWNER_EMAIL via ctx.env).
+//
+// The dashboard calls it with `callFn` and re-fetches whenever the live, public
+// ReservationSlot set changes — so new reservations + cancellations show up
+// without a refresh, while contact details never travel over entity sync.
+export default query({
+  auth: "user",
+  async handler(ctx): Promise<OwnerReservationsResult> {
+    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 };
+    }
+
+    const rows = (await ctx.db.unsafe.list("Reservation")) as unknown as ReservationRow[];
+    const reservations = rows
+      .map((r) => ({ ...r }))
+      .sort((a, b) => (a.startsAt < b.startsAt ? -1 : a.startsAt > b.startsAt ? 1 : 0));
+
+    return { authorized: true, reservations };
+  },
+});

package/templates/restaurant/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/restaurant/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;
+}