@pylonsync/create-pylon 0.3.274 → 0.3.276

package/templates/agency/app.ts

@@ -0,0 +1,284 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// agency — a site + back-office for a boutique studio that takes on a LIMITED
+// number of projects at a time. The public site is a marketing page (hero,
+// services, selected work, case studies, process, team, testimonials, contact);
+// the owner dashboard is the studio's back-office (pipeline, portfolio, clients,
+// invoices). The realtime hook is scarcity: the hero shows how many project
+// slots are open this quarter, and the moment the owner books a client, that
+// number drops for EVERYONE with the page open — no refresh.
+//
+// Entities, split by who can see them:
+//
+//   PUBLIC (marketing — read by anyone, written only by the owner's functions)
+//   • Capacity — a single PII-FREE row: the booking window + open slots. Drives
+//                the live "N slots open" hero counter.
+//   • Project  — a portfolio piece + case study (title, summary, tags, the
+//                challenge/approach/outcome write-up). `selected` flags the ones
+//                featured on the homepage; `published` hides drafts. Public-read
+//                so the marketing site + case-study pages render server-side.
+//
+//   PRIVATE (back-office — deny ALL client access; owner-gated functions only)
+//   • Inquiry  — a "start a project" lead (name, email, company, budget, msg).
+//   • Client   — a CRM contact (name, company, email, phone, notes, status).
+//   • Invoice  — a bill tied to a client (+ optional project): amount, status,
+//                issue/due dates. Money + client data, so it never leaves the
+//                owner-gated functions.
+//   • User     — the studio owner's account for the dashboard.
+// ---------------------------------------------------------------------------
+
+// A project inquiry. Everything here is PII or commercially sensitive, so the
+// policy denies all client access; the only way in is the submitInquiry
+// mutation, the only way to read is the owner-gated query. `status` tracks the
+// pipeline: "new" → "booked" (consumes a slot) | "declined".
+const Inquiry = entity(
+  "Inquiry",
+  {
+    name: field.string(),
+    email: field.string(),
+    company: field.string().optional(),
+    projectType: field.string().optional(),
+    budget: field.string().optional(),
+    message: field.string().optional(),
+    status: field.string().default("new"), // "new" | "booked" | "declined"
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_created", fields: ["createdAt"], unique: false }] },
+);
+
+// A single-row, PII-FREE aggregate the public page reads live. It holds only
+// the current booking window label + the number of open project slots — no lead
+// data. seedCapacity creates it from config on first visit; bookInquiry /
+// setCapacity keep it current. The landing page subscribes with
+// `db.useQuery("Capacity")`, so the "N slots open" counter ticks down across
+// every open tab the instant the owner books someone — the cross-tab-safe
+// realtime primitive (entity sync), not a per-connection server subscription.
+const Capacity = entity(
+  "Capacity",
+  {
+    label: field.string().default(""), // e.g. "Q3 2026"
+    openSlots: field.int().default(0),
+    updatedAt: field.datetime().defaultNow(),
+  },
+  {},
+);
+
+// A portfolio piece + its case study. PUBLIC marketing content — no PII — so it
+// reads publicly: the homepage shows the `selected` ones, /work lists every
+// `published` one, and /work/[slug] renders the full case study, all
+// server-side for SEO + first paint. Only the owner's functions write it
+// (upsertProject / setProjectFlags / deleteProject / seedProjects), so a visitor
+// can read the portfolio but never edit it.
+//
+//   • selected  — featured on the homepage "Selected work" grid. Toggling it in
+//                 the dashboard re-curates the homepage.
+//   • published — false = a draft, hidden from the public site (the owner still
+//                 sees it in the dashboard, which reads every row).
+//   • order     — manual sort (ascending) within the grids.
+const Project = entity(
+  "Project",
+  {
+    title: field.string(),
+    slug: field.string(), // URL segment for /work/[slug]
+    client: field.string().default(""), // display label, e.g. "Fintech · 0→1"
+    summary: field.string().default(""), // one-liner on the card
+    year: field.string().optional(), // "2026"
+    tags: field.string().optional(), // comma-separated → chips
+    selected: field.boolean().default(false), // featured on the homepage
+    published: field.boolean().default(true), // false = draft, hidden publicly
+    order: field.int().default(0), // manual sort
+    // Case-study body — three short sections render on /work/[slug].
+    challenge: field.string().optional(),
+    approach: field.string().optional(),
+    outcome: field.string().optional(),
+    liveUrl: field.string().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_slug", fields: ["slug"], unique: true },
+      { name: "by_created", fields: ["createdAt"], unique: false },
+    ],
+  },
+);
+
+// A CRM contact — the people behind booked projects. Name/email/phone are PII,
+// so it denies ALL client access; the dashboard reads + writes it only through
+// the owner-gated functions (clientsForOwner / upsertClient / deleteClient).
+const Client = entity(
+  "Client",
+  {
+    name: field.string(),
+    company: field.string().optional(),
+    email: field.string().optional(),
+    phone: field.string().optional(),
+    status: field.string().default("prospect"), // "prospect" | "active" | "past"
+    notes: field.string().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_created", fields: ["createdAt"], unique: false }] },
+);
+
+// A bill tied to a client (and optionally a project). This is MONEY plus client
+// data, so like Client it denies all client access — invoices are owner-only,
+// read + written through invoicesForOwner / upsertInvoice / setInvoiceStatus /
+// deleteInvoice. `amountCents` is stored as integer cents to avoid float money
+// bugs. `clientName` / `projectTitle` are denormalized for display so the list
+// renders without extra joins.
+const Invoice = entity(
+  "Invoice",
+  {
+    number: field.string(), // "INV-001"
+    clientId: field.string(),
+    clientName: field.string().default(""),
+    projectId: field.string().optional(),
+    projectTitle: field.string().optional(),
+    // Line items as a JSON-encoded array of { description, quantity, unitCents }
+    // (Pylon has no JSON column type, so it's a string). `amountCents` is the
+    // computed total, kept in sync on write so the list + totals don't have to
+    // re-parse every row. The case-study PDF + the invoice view render the items.
+    lineItems: field.string().optional(),
+    amountCents: field.int().default(0),
+    status: field.string().default("draft"), // "draft" | "sent" | "paid" | "overdue"
+    issuedAt: field.string().optional(), // ISO date "2026-06-01"
+    dueAt: field.string().optional(),
+    notes: field.string().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_client", fields: ["clientId"], unique: false },
+      { name: "by_created", fields: ["createdAt"], unique: false },
+    ],
+  },
+);
+
+// The studio owner's account. Email/password auth is built in against an entity
+// named "User" (passwordHash is server-only). The dashboard is gated to the
+// owner — see PYLON_OWNER_EMAIL in lib/owner.ts + the owner-only functions.
+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 — Inquiry holds the prospect's name, email, company, and budget, so
+// it denies EVERY client read and write. No `db.useQuery("Inquiry")` can pull a
+// row; no client can write one directly. Writes happen only inside the
+// submitInquiry / bookInquiry / declineInquiry mutations (functions bypass
+// policies); reads happen only inside the owner-gated inquiriesForOwner. A
+// studio site must never leak who's been talking to it — this guarantees it.
+const inquiryPolicy = policy({
+  name: "inquiry_private",
+  entity: "Inquiry",
+  allowRead: "false",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// The capacity row is public to READ (it's just a label + a number — the whole
+// point is the landing page showing open slots live to everyone). Clients can't
+// WRITE it; only seedCapacity / bookInquiry / setCapacity maintain it server-side.
+const capacityPolicy = policy({
+  name: "capacity_public_read",
+  entity: "Capacity",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// Projects are PUBLIC to READ — they're marketing content (portfolio + case
+// studies), so the site renders them server-side for SEO. Clients can't WRITE
+// them: only the owner-gated functions do. Drafts (`published == false`) are
+// filtered out in the public read paths (the homepage, /work, /work/[slug]);
+// the dashboard reads every row. (We keep the read open rather than gating on
+// `published` in the policy so the owner's dashboard can list drafts with the
+// same live `db.useQuery` the public uses — simplest path, and a draft case
+// study is not sensitive the way a lead or an invoice is.)
+const projectPolicy = policy({
+  name: "project_public_read",
+  entity: "Project",
+  allowRead: "true",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// Clients + Invoices are the studio's back-office: contact PII and money. Both
+// deny ALL client access, exactly like Inquiry — they're never read or written
+// over entity sync. The owner reaches them only through the owner-gated
+// functions, which check PYLON_OWNER_EMAIL and use ctx.db.unsafe.
+const clientPolicy = policy({
+  name: "client_private",
+  entity: "Client",
+  allowRead: "false",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const invoicePolicy = policy({
+  name: "invoice_private",
+  entity: "Invoice",
+  allowRead: "false",
+  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: [Inquiry, Capacity, Project, Client, Invoice, User],
+  // Functions live in functions/ and are discovered automatically:
+  //   public:  submitInquiry, seedCapacity, seedProjects
+  //   owner:   inquiriesForOwner, bookInquiry, declineInquiry, setCapacity,
+  //            upsertProject, setProjectFlags, deleteProject,
+  //            clientsForOwner, upsertClient, deleteClient,
+  //            invoicesForOwner, upsertInvoice, setInvoiceStatus, deleteInvoice,
+  //            seedStudioBackoffice
+  queries: [],
+  actions: [],
+  policies: [
+    inquiryPolicy,
+    capacityPolicy,
+    projectPolicy,
+    clientPolicy,
+    invoicePolicy,
+    userPolicy,
+  ],
+  // Email/password is on by default against the User entity above. No orgs, no
+  // billing — a single studio is single-tenant (one business, one owner).
+  auth: auth(),
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/agency/components/marketing.tsx

@@ -0,0 +1,187 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+import type { ProjectView } from "@/lib/agency";
+
+// 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 linked portfolio card — the project's cover, title, client label, summary,
+// and tag chips, linking to its /work/[slug] case study. Used on the homepage
+// "Selected work" grid and the full /work index, so both stay in lockstep.
+export function ProjectCard({ p }: { p: ProjectView }) {
+  return (
+    <Link href={`/work/${p.slug}`} className="group block">
+      {/* Case-study cover — drop in a real project screenshot. */}
+      <ImagePlaceholder
+        shape="landscape"
+        title={`${p.title} — project shot`}
+        hint="Swap for an <img> per case study"
+      />
+      <div className="mt-4 flex items-baseline justify-between gap-3">
+        <h3 className="text-[16px] font-semibold text-zinc-900 transition-colors group-hover:text-brand">
+          {p.title}
+        </h3>
+        <span className="shrink-0 font-mono text-[11px] uppercase tracking-wide text-zinc-400">
+          {p.client}
+        </span>
+      </div>
+      <p className="mt-1.5 text-[14px] leading-relaxed text-zinc-500">{p.summary}</p>
+      {p.tags.length > 0 ? (
+        <div className="mt-3 flex flex-wrap gap-1.5">
+          {p.tags.map((t) => (
+            <span key={t} className="rounded-full bg-zinc-100 px-2.5 py-0.5 text-[11px] font-medium text-zinc-600">
+              {t}
+            </span>
+          ))}
+        </div>
+      ) : null}
+      <span className="mt-3 inline-flex items-center gap-1 text-[13px] font-medium text-brand opacity-0 transition-opacity group-hover:opacity-100">
+        Read case study →
+      </span>
+    </Link>
+  );
+}
+
+// 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 ("Your headshot")
+//   hint   — how to replace it ("Replace 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-4 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-2 text-[12.5px] font-medium text-zinc-500">{title}</p>
+        {hint ? <p className="mt-1 text-[11px] leading-snug text-zinc-400">{hint}</p> : null}
+      </div>
+    </div>
+  );
+}

package/templates/agency/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/agency/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/agency/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/agency/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"
+}