@pylonsync/create-pylon 0.3.356 → 0.3.358

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.356",
+  "version": "0.3.358",
   "description": "Scaffold a new Pylon app — realtime backend + web/mobile/expo frontends in one command. Run via `npm create @pylonsync/pylon@latest`.",
   "publishConfig": {
     "access": "public"

package/templates/marketplace/README.md

@@ -1,7 +1,8 @@
 # __APP_NAME__
 
-A live, two-sided marketplace built with [Pylon](https://pylonsync.com), with
-server-rendered listings and realtime offers.
+A polished, two-sided resale marketplace built with
+[Pylon](https://pylonsync.com), with server-rendered product discovery and
+realtime offers.
 
 Anyone can list an item; anyone else can make an offer or buy it now; sellers
 watch offers arrive and accept or decline them. Every write reaches each open
@@ -16,7 +17,8 @@ __RUN_DEV__
 Open http://localhost:4321. The grid seeds itself on first load. Open a
 second tab, post something from `/sell` in one, and watch it hit the "just
 listed" ticker in the other with no refresh. Sign in (the `/sell` form prefills
-a demo account) to list, make offers, and watch your `/me` inbox light up live.
+a demo account) to list, save finds, make offers, and watch your dashboard
+update live.
 
 ## How it works
 
@@ -24,35 +26,48 @@ a demo account) to list, make offers, and watch your `/me` inbox light up live.
   page (`/listing/:slug`) render on the server with real rows (`serverData` +
   React 19 `use()`). View source and the products are *in the HTML*.
 - **Realtime where it matters.** The "just listed" ticker, the live offers on a
-  listing, and your `/me` inbox all ride the sync engine — one `db.useQuery` per
+  listing, and your `/me` dashboard all ride the sync engine: one `db.useQuery` per
   view, no polling. The public surface connects with an anonymous **guest
   session** (read-only); writing (list/offer/buy) requires a real sign-in.
 - **Unspoofable ownership.** `sellerId`/`buyerId` use `field.owner()`, so the
-  framework stamps them from the session and rejects forged values — listings
+  framework stamps them from the session and rejects forged values. Listings
   and offers can be created with a plain optimistic `db.insert` and still can't
   be spoofed. The heavier logic (accept = mark sold + auto-decline the rest)
-  runs in `functions/respondToOffer.ts` where it enforces "only the seller".
+  runs in `functions/respondToOffer.ts`, where it enforces "only the seller".
+- **Commerce-ready discovery.** Browse by category, search title, description,
+  seller, or category, and sort by recency or price. The logic is pure and
+  covered by tests in `tests/example.test.ts`.
 
 ## Privacy and policies
 
 - `Listing` + `Offer` are **public-read** (buyers and sellers both see live
   state); writes are owner-scoped.
-- `Watch` (your saved listings) is **private** — read/write only your own rows.
+- `Watch` (your saved listings) is **private**. You can only read and write your
+  own rows.
 - `User` rows are readable only to signed-in users (for seller/buyer names);
   `passwordHash` is `serverOnly` and never serialized. Auth writes go through
   `/api/auth/password/*`, not the entity API.
 
 ## Listing photos
 
-Listings render a **deterministic gradient + category icon** from a `seed` —
-so the demo needs no image hosting. To use real photos, add an `imageUrl` field
-to `Listing` in `app.ts`, collect it in `client/SellForm.tsx` (upload via
-`/api/files`), and render an `<img>` in the grid + detail page instead of the
-gradient.
+Seeded listings include purpose-matched
+[Unsplash](https://unsplash.com/license) photography. New listings collect a
+JPG, PNG, or WebP upload (up to 8 MB), with a direct-link fallback and preview
+before publishing. Uploads use Pylon's direct-to-storage three-step flow
+(`/api/files/init` → signed upload URL → `/api/files/confirm`) so large files
+do not pass through the app server. `imageUrl` stays optional so older rows
+fall back to deterministic category artwork. The generated hero asset is a
+44 KB WebP under `public/images`.
+
+## Payments and fulfillment
+
+`buyNow` atomically records an accepted offer, marks the listing sold, and
+declines competing bids. It does not transfer money. Add your payment provider
+and shipping or pickup workflow before accepting real transactions.
 
 ## Rebrand it
 
-The brand ("Pylon Market") lives in `app/layout.tsx`; the demo catalog +
+The brand ("Reprise") lives in `app/layout.tsx`; the demo catalog +
 seed account are in `functions/seedMarket.ts`. The design tokens are in
 `ui/tokens.css` + `app/globals.css`.
 
@@ -60,7 +75,7 @@ seed account are in `functions/seedMarket.ts`. The design tokens are in
 
 ```
 app.ts                         User + Listing + Offer + Watch + policies
-app/page.tsx                   SSR browse grid + category facets
+app/page.tsx                   SSR discovery, search, sort, category facets
 app/listing/[id]/page.tsx      SSR listing detail (+ generateMetadata)
 app/sell/page.tsx              list an item (sign-in gated)
 app/me/page.tsx                your listings, offers, watchlist (live)

package/templates/marketplace/app/error.tsx

@@ -1,26 +1,40 @@
 import React from "react";
 import { type ErrorBoundaryProps } from "@pylonsync/react";
+import { Button } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
 
 // `app/error.tsx` → the error boundary for this segment. Hydrated + interactive:
 // `reset()` re-attempts the route. The thrown error reaches the client as
 // `{ message, digest }` only — the stack stays in the dev overlay / server logs.
 export default function Error({ error, reset }: ErrorBoundaryProps) {
   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-2xl font-semibold tracking-tight">Something went wrong</h1>
-      <p className="mt-2 text-muted-foreground">{error.message}</p>
-      {error.digest ? (
-        <p className="mt-1 text-xs text-muted-foreground">
-          Reference: <code>{error.digest}</code>
-        </p>
-      ) : null}
-      <button
-        type="button"
-        onClick={reset}
-        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"
-      >
-        Try again
-      </button>
-    </div>
+    <Empty className="mx-auto min-h-[60vh] max-w-3xl border-0 px-6">
+      <EmptyHeader>
+        <EmptyTitle className="text-2xl">Something went wrong</EmptyTitle>
+        <EmptyDescription className="max-w-md">
+          Reprise could not load this page. Try again, or return to browse if
+          the problem continues.
+        </EmptyDescription>
+        {error.digest ? (
+          <p className="text-xs text-muted-foreground">
+            Reference: <code>{error.digest}</code>
+          </p>
+        ) : null}
+      </EmptyHeader>
+      <EmptyContent>
+        <Button type="button" onClick={reset}>
+          Try again
+        </Button>
+        <Button asChild variant="link">
+          <a href="/">Back to browse</a>
+        </Button>
+      </EmptyContent>
+    </Empty>
   );
 }

package/templates/marketplace/app/globals.css

@@ -1,39 +1,88 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@import "../ui/tokens.css";
+@import "../components/ui/tokens.css";
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
 /* Tailwind v4 scans these for class names (relative to this file). */
 @source "./";
 @source "../client";
+@source "../components";
 @source "../../_shared/src";
 
 @theme {
-  --font-sans: "Inter", -apple-system, system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
-
-  --color-background: oklch(0.99 0 0);
-  --color-foreground: oklch(0.16 0 0);
-  --color-card: oklch(1 0 0);
-  --color-card-foreground: oklch(0.16 0 0);
-  --color-popover: oklch(1 0 0);
-  --color-popover-foreground: oklch(0.16 0 0);
-  --color-primary: oklch(0.21 0 0);
-  --color-primary-foreground: oklch(0.985 0 0);
-  --color-secondary: oklch(0.97 0 0);
-  --color-secondary-foreground: oklch(0.21 0 0);
-  --color-muted: oklch(0.97 0 0);
-  --color-muted-foreground: oklch(0.55 0 0);
-  --color-accent: oklch(0.97 0 0);
-  --color-accent-foreground: oklch(0.21 0 0);
+  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+
+  --color-background: oklch(0.975 0.004 85);
+  --color-foreground: oklch(0.17 0.004 85);
+  --color-card: oklch(0.995 0.002 85);
+  --color-card-foreground: oklch(0.17 0.004 85);
+  --color-popover: oklch(0.995 0.002 85);
+  --color-popover-foreground: oklch(0.17 0.004 85);
+  --color-primary: oklch(0.19 0.004 85);
+  --color-primary-foreground: oklch(0.98 0.002 85);
+  --color-secondary: oklch(0.94 0.006 85);
+  --color-secondary-foreground: oklch(0.21 0.004 85);
+  --color-muted: oklch(0.945 0.006 85);
+  --color-muted-foreground: oklch(0.48 0.008 85);
+  --color-accent: oklch(0.93 0.009 85);
+  --color-accent-foreground: oklch(0.21 0.004 85);
   --color-destructive: oklch(0.577 0.245 27.325);
   --color-destructive-foreground: oklch(0.985 0 0);
-  --color-border: oklch(0.92 0 0);
-  --color-input: oklch(0.92 0 0);
-  --color-ring: oklch(0.71 0 0);
+  --color-success: oklch(0.62 0.14 153);
+  --color-success-foreground: oklch(0.38 0.1 153);
+  --color-warning: oklch(0.72 0.14 75);
+  --color-warning-foreground: oklch(0.42 0.1 65);
+  --color-border: oklch(0.89 0.007 85);
+  --color-input: oklch(0.86 0.008 85);
+  --color-ring: oklch(0.53 0.015 85);
+
+  --radius-lg: 1rem;
+  --radius-md: 0.625rem;
+  --radius-sm: 0.5rem;
+}
+
+:root {
+  color-scheme: light;
+  --shadow-border:
+    0 0 0 1px rgb(0 0 0 / 0.06),
+    0 1px 2px -1px rgb(0 0 0 / 0.06),
+    0 8px 24px -16px rgb(41 37 33 / 0.18);
+  --shadow-border-hover:
+    0 0 0 1px rgb(0 0 0 / 0.09),
+    0 2px 4px -2px rgb(0 0 0 / 0.08),
+    0 16px 32px -18px rgb(41 37 33 / 0.24);
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}
 
-  --radius-lg: 0.625rem;
-  --radius-md: calc(0.625rem - 2px);
-  --radius-sm: calc(0.625rem - 4px);
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --color-background: oklch(0.15 0.004 85);
+  --color-foreground: oklch(0.94 0.004 85);
+  --color-card: oklch(0.19 0.005 85);
+  --color-card-foreground: oklch(0.94 0.004 85);
+  --color-popover: oklch(0.19 0.005 85);
+  --color-popover-foreground: oklch(0.94 0.004 85);
+  --color-primary: oklch(0.93 0.004 85);
+  --color-primary-foreground: oklch(0.17 0.004 85);
+  --color-secondary: oklch(0.24 0.006 85);
+  --color-secondary-foreground: oklch(0.94 0.004 85);
+  --color-muted: oklch(0.23 0.006 85);
+  --color-muted-foreground: oklch(0.7 0.007 85);
+  --color-accent: oklch(0.25 0.008 85);
+  --color-accent-foreground: oklch(0.94 0.004 85);
+  --color-border: oklch(0.3 0.007 85);
+  --color-input: oklch(0.34 0.008 85);
+  --color-ring: oklch(0.68 0.01 85);
+  --color-success-foreground: oklch(0.82 0.12 153);
+  --color-warning-foreground: oklch(0.84 0.12 75);
+  --shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
+  --shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.14);
 }
 
 html,
@@ -41,6 +90,70 @@ body {
   height: 100%;
 }
 
+html {
+  -webkit-tap-highlight-color: rgb(23 23 23 / 0.08);
+}
+
+h1,
+h2,
+h3 {
+  scroll-margin-top: 6rem;
+  text-wrap: balance;
+}
+
+button,
+a,
+input,
+select,
+textarea {
+  touch-action: manipulation;
+}
+
+:where(a, button, input, select, textarea):focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+p,
+li {
+  text-wrap: pretty;
+}
+
+.hide-scrollbar {
+  scrollbar-width: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --color-background: oklch(0.15 0.004 85);
+    --color-foreground: oklch(0.94 0.004 85);
+    --color-card: oklch(0.19 0.005 85);
+    --color-card-foreground: oklch(0.94 0.004 85);
+    --color-popover: oklch(0.19 0.005 85);
+    --color-popover-foreground: oklch(0.94 0.004 85);
+    --color-primary: oklch(0.93 0.004 85);
+    --color-primary-foreground: oklch(0.17 0.004 85);
+    --color-secondary: oklch(0.24 0.006 85);
+    --color-secondary-foreground: oklch(0.94 0.004 85);
+    --color-muted: oklch(0.23 0.006 85);
+    --color-muted-foreground: oklch(0.7 0.007 85);
+    --color-accent: oklch(0.25 0.008 85);
+    --color-accent-foreground: oklch(0.94 0.004 85);
+    --color-border: oklch(0.3 0.007 85);
+    --color-input: oklch(0.34 0.008 85);
+    --color-ring: oklch(0.68 0.01 85);
+    --color-success-foreground: oklch(0.82 0.12 153);
+    --color-warning-foreground: oklch(0.84 0.12 75);
+    --shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
+    --shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.14);
+  }
+}
+
 /* Live "just listed" ticker. Items are doubled in the markup, so translating
    the track by -50% loops seamlessly. */
 @keyframes market-marquee {
@@ -61,4 +174,7 @@ body {
   .market-marquee {
     animation: none;
   }
+  .animate-pulse {
+    animation: none;
+  }
 }

package/templates/marketplace/app/layout.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { Link } from "@pylonsync/react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import { AuthNav } from "../client/AuthNav";
+import { ThemeToggle } from "../client/ThemeToggle";
 
 // Root layout. Server-rendered shell; Pylon's SSR head adapter injects the
 // compiled Tailwind <link> from app/globals.css automatically.
@@ -14,45 +17,71 @@ export default function RootLayout({
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="preconnect" href="https://rsms.me/" />
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        <script
+          dangerouslySetInnerHTML={{
+            __html:
+              "try{var t=localStorage.getItem('reprise:theme');document.documentElement.dataset.theme=t==='light'||t==='dark'?t:matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}catch(e){}",
+          }}
+        />
+        <meta
+          name="theme-color"
+          content="#f8f6f2"
+          media="(prefers-color-scheme: light)"
+        />
+        <meta
+          name="theme-color"
+          content="#181817"
+          media="(prefers-color-scheme: dark)"
+        />
+        <link rel="preconnect" href="https://images.unsplash.com" />
       </head>
       <body className="min-h-screen bg-background text-foreground antialiased">
-        <header className="sticky top-0 z-20 h-14 border-b bg-background/90 backdrop-blur">
-          <div className="mx-auto flex h-full max-w-5xl items-center justify-between gap-4 px-5">
-            <Link href="/" className="flex items-center gap-2 font-medium text-sm">
-              <span className="grid size-7 place-items-center rounded-md bg-foreground text-sm font-semibold text-background">
-                M
+        <a
+          href="#main-content"
+          className="fixed left-4 top-4 z-50 -translate-y-20 rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background shadow-lg transition-transform focus:translate-y-0"
+        >
+          Skip to content
+        </a>
+        <header className="sticky top-0 z-20 h-16 border-b bg-background/85 backdrop-blur-xl">
+          <div className="mx-auto flex h-full max-w-6xl items-center justify-between gap-3 px-5">
+            <Link
+              href="/"
+              translate="no"
+              className="flex min-h-11 items-center gap-2.5 text-sm font-semibold tracking-[-0.01em]"
+            >
+              <span className="grid size-8 place-items-center rounded-lg bg-foreground text-sm font-semibold text-background shadow-sm">
+                R
               </span>
-              Pylon Market
+              Reprise
             </Link>
-            <nav className="flex items-center gap-1 text-sm">
-              <Link
-                href="/"
-                className="rounded-md px-3 py-1.5 text-muted-foreground transition hover:bg-muted hover:text-foreground"
-              >
-                Browse
-              </Link>
-              <Link
-                href="/sell"
-                className="rounded-md px-3 py-1.5 text-muted-foreground transition hover:bg-muted hover:text-foreground"
-              >
-                Sell
-              </Link>
-              <Link
-                href="/me"
-                className="rounded-md px-3 py-1.5 text-muted-foreground transition hover:bg-muted hover:text-foreground"
-              >
-                My Market
-              </Link>
+            <nav
+              aria-label="Primary navigation"
+              className="flex items-center gap-0.5 text-sm sm:gap-1"
+            >
+              <Button asChild variant="ghost" size="sm" className="hidden sm:inline-flex">
+                <Link href="/">Browse</Link>
+              </Button>
+              <Button asChild variant="ghost" size="sm">
+                <Link href="/sell">Sell</Link>
+              </Button>
+              <Button asChild variant="ghost" size="sm" className="hidden md:inline-flex">
+                <Link href="/me">Dashboard</Link>
+              </Button>
+              <ThemeToggle />
               <AuthNav />
             </nav>
           </div>
         </header>
-        <main className="mx-auto max-w-5xl px-5 py-6">{children}</main>
-        <footer className="border-t py-6 text-center text-xs text-muted-foreground">
-          Pylon Market · server-rendered listings + realtime offers from one
-          binary
+        <main
+          id="main-content"
+          className="mx-auto min-h-[calc(100dvh-8rem)] max-w-6xl px-5 py-6 sm:py-8"
+        >
+          {children}
+        </main>
+        <Separator />
+        <footer className="px-5 py-7 text-center text-xs text-muted-foreground">
+          Reprise, built with Pylon. Server-rendered listings and realtime offers
+          from one binary.
         </footer>
       </body>
     </html>