@pylonsync/create-pylon 0.3.274 → 0.3.276

package/templates/marketplace/app/listing/[id]/page.tsx

@@ -0,0 +1,163 @@
+import React, { Suspense, use } from "react";
+import {
+  Link,
+  type GenerateMetadata,
+  type Metadata,
+  type PageProps,
+  type ServerData,
+  type SsrResponse,
+} from "@pylonsync/react";
+import { Badge } from "../../../ui/badge";
+import { OfferPanel } from "../../../client/OfferPanel";
+import { CategoryIcon } from "../../_components/CategoryIcon";
+import { WatchButton } from "../../../client/WatchButton";
+import {
+  gradient,
+  money,
+  conditionLabel,
+  type Listing,
+} from "../../../client/market";
+
+// Data-driven SEO: the title + description come from the listing itself,
+// fetched on the server. `generateMetadata` is handed the same PageProps as
+// the page (params + serverData), so it reads the row directly.
+// Resolve a listing from the URL segment, which is its slug
+// ("herman-miller-aeron-a1f3"). Falls back to a raw id lookup so older
+// id-shaped links keep working.
+async function resolveListing(
+  serverData: ServerData,
+  key: string,
+): Promise<Listing | null> {
+  return (
+    (await serverData.lookup<Listing>("Listing", "slug", key)) ??
+    (await serverData.get<Listing>("Listing", key))
+  );
+}
+
+export const generateMetadata: GenerateMetadata = async ({
+  params,
+  serverData,
+}): Promise<Metadata> => {
+  const l = await resolveListing(serverData, params.id);
+  if (!l) return { title: "Listing not found · Pylon Market" };
+  return {
+    title: `${l.title} — ${money(l.price)} · Pylon Market`,
+    description:
+      l.description?.slice(0, 155) ||
+      `${l.title} for sale on Pylon Market (${conditionLabel(l.condition)}).`,
+  };
+};
+
+function Detail({
+  serverData,
+  response,
+  id,
+}: {
+  serverData: ServerData;
+  response: SsrResponse;
+  id: string;
+}) {
+  const listing = use(resolveListing(serverData, id));
+
+  if (!listing) {
+    response.setStatus(404);
+    return (
+      <div className="rounded-xl border border-dashed p-12 text-center">
+        <p className="font-medium">This listing is gone.</p>
+        <Link href="/" className="mt-2 inline-block text-sm underline">
+          Back to the market
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <Link
+        href="/"
+        className="text-sm text-muted-foreground hover:text-foreground"
+      >
+        ← Back to the market
+      </Link>
+
+      <div className="grid gap-8 md:grid-cols-2">
+        <div
+          className="relative flex aspect-square items-center justify-center rounded-2xl text-white/90"
+          style={{ background: gradient(listing.seed || listing.id) }}
+        >
+          <CategoryIcon category={listing.category} className="size-28" />
+          <WatchButton
+            listingId={listing.id}
+            listingTitle={listing.title}
+            className="absolute right-3 top-3"
+          />
+          {listing.status === "sold" ? (
+            <span className="absolute inset-0 grid place-items-center rounded-2xl bg-black/55 text-2xl font-bold uppercase tracking-wide">
+              Sold
+            </span>
+          ) : null}
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <div className="space-y-1">
+            <div className="flex items-center gap-2 text-xs uppercase tracking-wider text-muted-foreground">
+              <span>{listing.category}</span>
+              <span>·</span>
+              <Badge variant="outline" className="text-[10px]">
+                {conditionLabel(listing.condition)}
+              </Badge>
+            </div>
+            <h1 className="text-2xl font-semibold tracking-tight">
+              {listing.title}
+            </h1>
+            <p className="text-3xl font-semibold tabular-nums">{money(listing.price)}</p>
+            <p className="text-sm text-muted-foreground">
+              Listed by <span className="font-medium">{listing.sellerName}</span>
+            </p>
+          </div>
+
+          {listing.description ? (
+            <p className="whitespace-pre-wrap text-sm leading-relaxed text-foreground/80">
+              {listing.description}
+            </p>
+          ) : null}
+
+          {/* Realtime client island: live offers, accept/decline. */}
+          <div className="mt-2">
+            <OfferPanel
+              listingId={listing.id}
+              sellerId={listing.sellerId}
+              sellerName={listing.sellerName}
+              title={listing.title}
+              price={listing.price}
+              status={listing.status}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ListingPage({
+  params,
+  serverData,
+  response,
+}: PageProps) {
+  return (
+    <Suspense
+      fallback={
+        <div className="grid gap-8 md:grid-cols-2">
+          <div className="aspect-square animate-pulse rounded-2xl bg-muted" />
+          <div className="space-y-3">
+            <div className="h-6 w-2/3 animate-pulse rounded bg-muted" />
+            <div className="h-8 w-1/3 animate-pulse rounded bg-muted" />
+            <div className="h-24 animate-pulse rounded bg-muted" />
+          </div>
+        </div>
+      }
+    >
+      <Detail serverData={serverData} response={response} id={params.id} />
+    </Suspense>
+  );
+}

package/templates/marketplace/app/me/page.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import { MyMarket } from "../../client/MyMarket";
+
+export const metadata: Metadata = {
+  title: "My Market · Pylon Market",
+  description: "Your listings and offers.",
+  robots: "noindex", // personal dashboard — keep it out of search
+};
+
+// Fully interactive dashboard (three live queries scoped to you), so the
+// whole page is the client island.
+export default function MePage() {
+  return <MyMarket />;
+}

package/templates/marketplace/app/not-found.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Link, type NotFoundProps } from "@pylonsync/react";
+
+// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when a
+// page calls `response.notFound()` — e.g. a listing slug that doesn't resolve).
+// Hydrated, so the link is a client nav.
+export default function NotFound(_props: NotFoundProps) {
+  return (
+    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
+      <h1 className="text-3xl font-semibold tracking-tight">404</h1>
+      <p className="mt-2 text-muted-foreground">We couldn&apos;t find that listing.</p>
+      <Link
+        href="/"
+        className="mt-6 inline-flex h-10 items-center rounded-md bg-foreground px-5 text-sm font-medium text-background transition hover:opacity-90"
+      >
+        Back to browse
+      </Link>
+    </div>
+  );
+}

package/templates/marketplace/app/page.tsx

@@ -0,0 +1,159 @@
+import React, { Suspense, use } from "react";
+import {
+  Link,
+  type Metadata,
+  type PageProps,
+  type ServerData,
+} from "@pylonsync/react";
+import { Card } from "../ui/card";
+import { Badge } from "../ui/badge";
+import { LiveTicker } from "../client/LiveTicker";
+import { SeedOnEmpty } from "../client/SeedOnEmpty";
+import { CategoryIcon } from "./_components/CategoryIcon";
+import { WatchButton } from "../client/WatchButton";
+import { gradient, money, conditionLabel, type Listing } from "../client/market";
+
+export const metadata: Metadata = {
+  title: "Pylon Market — buy & sell locally, live",
+  description:
+    "A live local marketplace. Server-rendered listings for SEO, realtime offers over the sync engine — one Pylon binary, one port.",
+};
+
+const CATEGORIES = [
+  "all", "furniture", "electronics", "cameras", "bikes", "audio", "kitchen",
+  "instruments", "outdoor", "apparel",
+];
+
+// The grid suspends on the server-side read and streams in with real rows in
+// the HTML (good for SEO + LCP). `serverData.query` runs through the same
+// policy gate as a query function's ctx.db.
+function Grid({
+  serverData,
+  category,
+}: {
+  serverData: ServerData;
+  category: string;
+}) {
+  const active = use(serverData.query<Listing>("Listing", { status: "active" }));
+  const sorted = [...active].sort((a, b) =>
+    b.createdAt.localeCompare(a.createdAt),
+  );
+  const listings =
+    category === "all"
+      ? sorted
+      : sorted.filter((l) => l.category === category);
+
+  if (listings.length === 0) {
+    return (
+      <>
+        <div className="rounded-xl border border-dashed p-12 text-center">
+          <p className="text-sm text-muted-foreground">
+            {active.length === 0
+              ? "Setting up a few sample listings…"
+              : "Nothing in this category yet."}
+          </p>
+          {category !== "all" ? (
+            <Link href="/" className="mt-2 inline-block text-sm underline">
+              See everything
+            </Link>
+          ) : null}
+        </div>
+        <SeedOnEmpty count={active.length} />
+      </>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+      {listings.map((l) => (
+        <Link key={l.id} href={`/listing/${l.slug || l.id}`} className="group">
+          <Card className="flex flex-col overflow-hidden p-0 transition group-hover:-translate-y-0.5 group-hover:shadow-md">
+            <div
+              className="relative flex aspect-square items-center justify-center text-white/90"
+              style={{ background: gradient(l.seed || l.id) }}
+            >
+              <CategoryIcon category={l.category} className="size-14" />
+              <WatchButton
+                listingId={l.id}
+                listingTitle={l.title}
+                className="absolute right-2 top-2 size-8"
+              />
+              {l.status === "sold" ? (
+                <span className="absolute inset-0 grid place-items-center bg-black/55 text-sm font-bold uppercase tracking-wide">
+                  Sold
+                </span>
+              ) : null}
+            </div>
+            <div className="flex flex-1 flex-col gap-1 p-3">
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                {l.category}
+              </span>
+              <span className="line-clamp-2 min-h-[34px] text-sm font-medium leading-snug">
+                {l.title}
+              </span>
+              <div className="mt-1 flex items-center justify-between">
+                <span className="font-semibold tabular-nums">{money(l.price)}</span>
+                <Badge variant="outline" className="text-[10px]">
+                  {conditionLabel(l.condition)}
+                </Badge>
+              </div>
+            </div>
+          </Card>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export default function BrowsePage({ searchParams, serverData }: PageProps) {
+  const category =
+    typeof searchParams.category === "string" ? searchParams.category : "all";
+
+  return (
+    <div className="space-y-6">
+      <section className="space-y-1">
+        <h1 className="text-3xl font-semibold tracking-tight">
+          The local marketplace that's actually live
+        </h1>
+        <p className="text-muted-foreground">
+          Listings are server-rendered for search engines; offers are realtime.
+          Open this in two tabs — list in one, watch it appear in the other.
+        </p>
+      </section>
+
+      {/* Realtime client island */}
+      <LiveTicker />
+
+      <nav className="flex flex-wrap gap-2">
+        {CATEGORIES.map((c) => (
+          <Link
+            key={c}
+            href={c === "all" ? "/" : `/?category=${c}`}
+            className={`rounded-full border px-3 py-1 text-sm transition hover:bg-muted ${
+              category === c
+                ? "border-foreground bg-foreground text-background hover:bg-foreground"
+                : "text-muted-foreground"
+            }`}
+          >
+            {c}
+          </Link>
+        ))}
+      </nav>
+
+      <Suspense
+        fallback={
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div
+                key={i}
+                className="aspect-[3/4] animate-pulse rounded-xl bg-muted"
+              />
+            ))}
+          </div>
+        }
+      >
+        <Grid serverData={serverData} category={category} />
+      </Suspense>
+    </div>
+  );
+}

package/templates/marketplace/app/robots.ts

@@ -0,0 +1,12 @@
+import type { Robots } from "@pylonsync/react";
+
+// app/robots.ts → served at /robots.txt. Point SITE_URL at your domain in prod.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default function robots(): Robots {
+  return {
+    // Browse + listings are indexable; keep the personal inbox and API out.
+    rules: { userAgent: "*", allow: "/", disallow: ["/me", "/api/"] },
+    sitemap: `${SITE}/sitemap.xml`,
+  };
+}

package/templates/marketplace/app/sell/page.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { type Metadata } from "@pylonsync/react";
+import { SellForm } from "../../client/SellForm";
+
+export const metadata: Metadata = {
+  title: "Sell an item · Pylon Market",
+  description: "List something for sale in seconds — buyers' offers arrive live.",
+};
+
+export default function SellPage() {
+  return (
+    <div className="mx-auto max-w-xl space-y-6">
+      <header className="space-y-1">
+        <h1 className="text-2xl font-semibold tracking-tight">List an item</h1>
+        <p className="text-sm text-muted-foreground">
+          It goes live instantly. Offers land in your{" "}
+          <a href="/me" className="underline">
+            My Market
+          </a>{" "}
+          inbox in realtime.
+        </p>
+      </header>
+      <SellForm />
+    </div>
+  );
+}

package/templates/marketplace/app/sitemap.ts

@@ -0,0 +1,14 @@
+import type { Sitemap } from "@pylonsync/react";
+
+// app/sitemap.ts → served at /sitemap.xml. Point SITE_URL at your domain in
+// production. We list the static surfaces here; for a real catalog, map over
+// active listings (read them via the entity API) and add a `/listing/<slug>`
+// entry per row.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default async function sitemap(): Promise<Sitemap> {
+  return [
+    { url: `${SITE}/`, changeFrequency: "hourly", priority: 1 },
+    { url: `${SITE}/sell`, changeFrequency: "monthly", priority: 0.5 },
+  ];
+}

package/templates/marketplace/app.ts

@@ -0,0 +1,190 @@
+/**
+ * Pylon Market — a live local marketplace.
+ *
+ * Anyone (a guest session) can list an item for sale; anyone else can make
+ * an offer. Sellers watch offers arrive in realtime and accept/decline them.
+ *
+ * The Pylon story this demo tells:
+ *   - The browse grid (`/`) and each listing page (`/listing/:id`) are
+ *     SERVER-RENDERED with real rows from the database (good for SEO + LCP) —
+ *     view source and the products are in the HTML, not fetched later.
+ *   - The interactive, realtime bits — the "just listed" ticker, the live
+ *     offers on a listing, your inbox on `/me` — ride the sync engine: a
+ *     single `useQuery` fans every write out to every open tab instantly.
+ *   - One binary, one port. SSR + REST + WebSockets all from `pylon dev`.
+ *     No Next.js app, no separate realtime service.
+ */
+import {
+  entity,
+  field,
+  policy,
+  buildManifest,
+  discoverAppRoutes,
+} from "@pylonsync/sdk";
+
+// Accounts. Email/password auth is built in: registering through
+// /api/auth/password/register hashes the password and writes this row.
+// `passwordHash` is server-only — never serialized to clients.
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string(),
+    // Set by the auth subsystem on register (a default avatar tint).
+    avatarColor: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [{ name: "by_email", fields: ["email"], unique: true }],
+  },
+);
+
+// A thing for sale. `seed` drives a deterministic gradient "photo" so the
+// demo needs no image hosting. `status` flips active → sold when an offer
+// is accepted.
+//
+// `sellerId: field.owner()` is what lets SellForm create a listing with a
+// plain, optimistic `db.insert` (it shows in the live ticker the instant
+// you post — no server round-trip) while the seller id stays unspoofable:
+// the framework stamps it from the session and rejects any forged value.
+// No createListing function needed. `status` + `createdAt` default
+// server-side so the client doesn't have to send them.
+const Listing = entity(
+  "Listing",
+  {
+    sellerId: field.string().owner(),
+    sellerName: field.string(),
+    title: field.string(),
+    // Human-readable URL key: "herman-miller-aeron-size-b-a1f3". Unique so it
+    // addresses exactly one listing; the detail route resolves by it.
+    slug: field.string().unique(),
+    description: field.string(),
+    price: field.float(),
+    category: field.string(),
+    condition: field.string(), // new | like-new | good | fair
+    status: field.string().default("active"), // active | sold
+    seed: field.string(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_status", fields: ["status"], unique: false },
+      { name: "by_seller", fields: ["sellerId"], unique: false },
+      { name: "by_created", fields: ["createdAt"], unique: false },
+      { name: "by_slug", fields: ["slug"], unique: true },
+    ],
+  },
+);
+
+// A buyer's bid on a listing. The seller responds; accepting marks the
+// listing sold and auto-declines the rest.
+const Offer = entity(
+  "Offer",
+  {
+    listingId: field.string(),
+    listingTitle: field.string(),
+    sellerId: field.string(),
+    // `buyerId: field.owner()` keeps the bidder unspoofable on the
+    // optimistic db.useMutation path too — even though makeOffer also
+    // stamps it server-side, the field-level guarantee is defense in
+    // depth (and documents intent).
+    buyerId: field.string().owner(),
+    buyerName: field.string(),
+    amount: field.float(),
+    message: field.string().optional(),
+    status: field.string().default("pending"), // pending | accepted | declined
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_listing", fields: ["listingId"], unique: false },
+      { name: "by_buyer", fields: ["buyerId"], unique: false },
+      { name: "by_seller", fields: ["sellerId"], unique: false },
+    ],
+  },
+);
+
+// A buyer's saved listing. Private to the watcher (owner-scoped read), so
+// your watchlist is yours alone. `listingTitle` is denormalized so the
+// "Watching" list renders without a join.
+const Watch = entity(
+  "Watch",
+  {
+    userId: field.string().owner(),
+    listingId: field.string(),
+    listingTitle: field.string(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_user", fields: ["userId"], unique: false },
+      // One watch per (user, listing) — toggling the heart inserts/deletes
+      // this row.
+      { name: "by_user_listing", fields: ["userId", "listingId"], unique: true },
+    ],
+  },
+);
+
+// Public marketplace: everyone can read listings + offers (so buyers and
+// sellers both see the live state). Writes require a session and are
+// owner-scoped; the heavy lifting (accept = mark sold + decline siblings)
+// runs in functions where it can enforce "only the seller responds".
+// Signed-in users can read profiles (to render seller/buyer names). The
+// auth subsystem owns writes — registration/login go through
+// /api/auth/password/*, not the entity API, so direct inserts/updates are
+// closed off.
+const userPolicy = policy({
+  name: "user_access",
+  entity: "User",
+  allowRead: "auth.userId != null",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+// Watchlists are private: you can only read, add to, or remove from your own.
+const watchPolicy = policy({
+  name: "watch_access",
+  entity: "Watch",
+  allowRead: "auth.userId == data.userId",
+  allowInsert: "auth.userId != null",
+  allowUpdate: "false",
+  allowDelete: "auth.userId == data.userId",
+});
+
+const listingPolicy = policy({
+  name: "listing_access",
+  entity: "Listing",
+  allowRead: "true",
+  allowInsert: "auth.userId != null",
+  allowUpdate: "auth.userId == data.sellerId",
+  allowDelete: "auth.userId == data.sellerId",
+});
+
+const offerPolicy = policy({
+  name: "offer_access",
+  entity: "Offer",
+  allowRead: "true",
+  allowInsert: "auth.userId != null",
+  // Buyers can withdraw their own offer; the seller's accept/decline goes
+  // through respondToOffer (which checks ownership of the listing).
+  allowUpdate: "auth.userId == data.buyerId || auth.userId == data.sellerId",
+  allowDelete: "auth.userId == data.buyerId",
+});
+
+const manifest = buildManifest({
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  entities: [User, Listing, Offer, Watch],
+  queries: [],
+  actions: [],
+  policies: [userPolicy, listingPolicy, offerPolicy, watchPolicy],
+  // File-based SSR routing: app/**/page.tsx. One binary serves the frontend
+  // and the API on one port.
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/marketplace/client/AuthNav.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { Button } from "../ui/button";
+import { MarketProvider, useAuth } from "./MarketProvider";
+
+// Compact sign-in state for the header. Signed out → a link to /sell (which
+// gates with the prefilled demo login). Signed in → your name + a sign-out
+// button. Lives behind MarketProvider like every other island.
+function Nav() {
+  const { identity, signOut } = useAuth();
+  if (!identity) {
+    return (
+      <Link
+        href="/sell"
+        className="rounded-md border px-3 py-1.5 text-sm font-medium transition hover:bg-muted"
+      >
+        Sign in
+      </Link>
+    );
+  }
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      <span className="hidden text-muted-foreground sm:inline">
+        {identity.name}
+      </span>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="text-muted-foreground"
+        onClick={() => void signOut()}
+      >
+        Sign out
+      </Button>
+    </div>
+  );
+}
+
+export function AuthNav() {
+  return (
+    <MarketProvider fallback={<span className="w-16" />}>
+      <Nav />
+    </MarketProvider>
+  );
+}