@pylonsync/create-pylon 0.3.274 → 0.3.276

package/templates/local-service/lib/slots.ts

@@ -0,0 +1,97 @@
+// Pure slot math — shared by the client time-picker (which slots to show, which
+// to grey out) and the server-side createBooking re-check (does this slot still
+// fit). Keeping it dependency-free and in one place means the two sides agree
+// exactly: the client greys a taken slot, and the server independently refuses
+// to double-book it.
+//
+// Times are absolute instants (epoch ms / ISO-8601 UTC). Slot GENERATION uses
+// local wall-clock hours (the business's open/close, interpreted in the
+// runtime's local timezone); overlap + past checks compare absolute instants,
+// so they're timezone-agnostic and can't be fooled by string formatting.
+
+export interface BusyRange {
+  startsAt: string;
+  endsAt: string;
+}
+
+export interface Slot {
+  /** ISO-8601 start instant. */
+  startsAt: string;
+  /** ISO-8601 end instant (start + service duration). */
+  endsAt: string;
+  /** False when the slot is in the past (within lead time) or overlaps a booking. */
+  available: boolean;
+}
+
+/** Half-open interval overlap: [aStart,aEnd) intersects [bStart,bEnd). */
+export function rangesOverlap(
+  aStart: number,
+  aEnd: number,
+  bStart: number,
+  bEnd: number,
+): boolean {
+  return aStart < bEnd && bStart < aEnd;
+}
+
+/**
+ * Generate the bookable slots for one calendar day for one service.
+ *
+ * `dayISODate` is a local "YYYY-MM-DD"; `open`/`close` are local "HH:MM". Each
+ * slot starts every `slotMinutes` and lasts `durationMin`; the last slot must
+ * end by close. A slot is unavailable if it starts before `now + leadTimeHours`
+ * or overlaps any `busy` range.
+ */
+export function slotsForDay(opts: {
+  dayISODate: string;
+  open: string;
+  close: string;
+  slotMinutes: number;
+  durationMin: number;
+  leadTimeHours: number;
+  busy: BusyRange[];
+  nowMs: number;
+}): Slot[] {
+  const { dayISODate, open, close, slotMinutes, durationMin, leadTimeHours, busy, nowMs } = opts;
+  const [y, m, d] = dayISODate.split("-").map(Number);
+  const [oh, om] = open.split(":").map(Number);
+  const [ch, cm] = close.split(":").map(Number);
+  if ([y, m, d, oh, om, ch, cm].some((n) => Number.isNaN(n))) return [];
+
+  // `new Date(y, m-1, d, h, min)` builds a LOCAL time; `.getTime()` is the
+  // correct absolute instant regardless of timezone.
+  const dayStart = new Date(y, m - 1, d, oh, om, 0, 0).getTime();
+  const dayEnd = new Date(y, m - 1, d, ch, cm, 0, 0).getTime();
+  const minStart = nowMs + leadTimeHours * 3_600_000;
+  const step = slotMinutes * 60_000;
+  const dur = durationMin * 60_000;
+  const busyMs = busy.map((b) => [Date.parse(b.startsAt), Date.parse(b.endsAt)] as const);
+
+  const slots: Slot[] = [];
+  for (let s = dayStart; s + dur <= dayEnd; s += step) {
+    const e = s + dur;
+    const past = s < minStart;
+    const taken = busyMs.some(([bs, be]) => rangesOverlap(s, e, bs, be));
+    slots.push({
+      startsAt: new Date(s).toISOString(),
+      endsAt: new Date(e).toISOString(),
+      available: !past && !taken,
+    });
+  }
+  return slots;
+}
+
+/** The weekday (0=Sun..6=Sat) for a local "YYYY-MM-DD". */
+export function weekdayOf(dayISODate: string): number {
+  const [y, m, d] = dayISODate.split("-").map(Number);
+  return new Date(y, m - 1, d).getDay();
+}
+
+/** Local "YYYY-MM-DD" for an instant `daysFromToday` away (0 = today). */
+export function localDateKey(daysFromToday: number, nowMs: number): string {
+  const d = new Date(nowMs);
+  d.setDate(d.getDate() + daysFromToday);
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}

package/templates/local-service/lib/utils.ts

@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// `cn` — the shadcn class merger. clsx resolves conditional/array class
+// inputs; tailwind-merge then dedupes conflicting Tailwind utilities so
+// the last one wins (e.g. `cn("px-2", "px-4")` → "px-4"). Every shadcn
+// component routes its className through this.
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/local-service/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "__APP_NAME_KEBAB__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pylon dev",
+    "deploy": "pylon deploy",
+    "check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/functions": "^__PYLON_VERSION__",
+    "@pylonsync/client": "^__PYLON_VERSION__",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "@tailwindcss/cli": "^4.3.0",
+    "tw-animate-css": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.0",
+    "lucide-react": "^0.460.0",
+    "@radix-ui/react-slot": "^1.1.0"
+  },
+  "devDependencies": {
+    "@pylonsync/cli": "^__PYLON_VERSION__",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.6.0"
+  }
+}

package/templates/local-service/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": ["ES2022", "DOM"],
+    "types": ["react", "react-dom", "node"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*", "functions/**/*"]
+}

package/templates/marketplace/.env.example

@@ -0,0 +1,9 @@
+# Copy to `.env` and fill in. `pylon dev` loads `.env` automatically.
+#
+# The marketplace runs with ZERO config — email/password auth is built in, and
+# anyone who signs up can list items and make offers. There's no single "owner";
+# it's a multi-user, two-sided market.
+
+# ── Site URL (optional) ──────────────────────────────────────────────────────
+# Used by robots.txt + sitemap.xml. Point it at your real domain in production.
+# SITE_URL=https://yourmarket.com

package/templates/marketplace/AGENTS.md

@@ -0,0 +1,61 @@
+# AGENTS.md — working in a Pylon project
+
+Operating rules for a coding agent in this Pylon app. Pylon is a Rails-like framework for realtime apps: you declare entities, policies, and server functions in TypeScript, and a single Rust binary (`pylon`) serves the API, auth, sync, WebSocket, SSE, and native React 19 SSR — one process, one port. The full API reference is at **/llms-full.txt** (served at `/llms-full.txt`; in the repo at `apps/web/public/llms-full.txt`). Read it before guessing an API name.
+
+## Directory conventions
+
+**Unified SSR app:**
+- `app.ts` — data model + manifest (`entity()` + `field.*`, queries/actions/policies, `routes: await discoverAppRoutes()`). Ends with `console.log(JSON.stringify(manifest))`.
+- `app/` — file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. `app/layout.tsx` is the shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
+- `app/globals.css` — Tailwind v4 entrypoint (auto-compiled and injected).
+- `functions/` — server functions, one per file, `default`-exported.
+- `.pylon/` — local dev state (sqlite, jobs, sessions, uploads). Created by `pylon dev`. Do not commit.
+
+**Monorepo app:** backend is `apps/api/` (entry `apps/api/schema.ts`, handlers in `apps/api/functions/`); frontend in `apps/web/`. `pylon.manifest.json` / `pylon.client.ts` are generated — do not hand-edit.
+
+## The core authoring loop
+
+1. **Define an entity** — `entity("Thing", { name: field.string(), done: field.boolean().default(false) })`. Modifiers: `.optional()`, `.unique()`, `.readonly()` (settable on insert, rejected on client update — use for `authorId`/`orgId`), `.serverOnly()` (never in HTTP responses), `.encrypted()` (AEAD at rest, needs `PYLON_ENCRYPTION_KEY`), `.crdt("text")` (collaborative).
+2. **Write a policy** — `policy({ entity: "Thing", allowRead, allowInsert, allowUpdate, allowDelete })` with CEL-like expressions over `auth.*` / `data.*` (e.g. `"auth.userId == data.authorId"`). **Omitted actions DENY by default.** Wide-open dev policies (`allow*: "true"`) are flagged by `pylon lint` — tighten before shipping.
+3. **Author a function** in `functions/<name>.ts` — `query` (read-only), `mutation` (transactional read+write), or `action` (external I/O, no direct `ctx.db`). Import `{ query, mutation, action, v }` from `@pylonsync/functions`. `auth` defaults to `"user"` (secure-by-default); set `"public"` explicitly for unauthenticated access. Use `ctx.db.*`, `ctx.auth.userId`, `ctx.error(code, msg)`.
+4. **Read it on the client** — `db.useQuery("Thing")` (live, re-renders on any write) or `db.useQueryOne("Thing", id)`. Call functions with `db.fn(name, args)` / `callFn`. On SSR pages, read via `use(serverData.list("Thing"))` inside `<Suspense>`.
+
+## Key gotchas
+
+- **Policies deny by default; server functions BYPASS them.** Direct client CRUD (`/api/entities/*`) and sync are policy-checked. Functions run with full DB access — enforce trust with `ctx.auth` checks inside the handler, not policies.
+- **Type page props from the SDK, don't hand-roll them.** `import type { PageProps, Metadata } from "@pylonsync/react"`. Every page/layout gets `{ url, params, searchParams, auth, response, serverData }`; `PageProps<{ slug: string }>` types a `[slug]` route's params. Request headers/cookies are intentionally NOT on `PageProps` — they're server-only and stripped from hydration, so reading them in the render would mismatch.
+- **Anonymous output caching is opt-in + earned.** `export const revalidate = 60` (seconds) on a page makes it CDN-cacheable (`public, s-maxage=60`) — but ONLY if the render is auth-INDEPENDENT: it must NOT read `props.auth` (reading it at all opts out, even for anonymous), set no cookie, and the app must not run strict per-caller policies (`PYLON_STRICT_FN_POLICIES`). `export const dynamic = "force-static"` caches until the next deploy; `"force-dynamic"` never caches. Fail-closed: without the opt-in (or if any condition fails) the page is `no-cache`. A page that reads `auth` or sets a cookie is never shared. The SAME earned render is also kept in an **origin disk cache** (`.pylon/.cache/ssr`): a cookie-less GET with no query string is served straight off disk for the TTL — skipping the render entirely — then re-rendered live when stale. The disk cache is namespaced per deploy (wiped on each new build) and OFF in `pylon dev` (so an edit is never masked by a stale entry); invalidation is by the `revalidate` TTL or the next deploy.
+- **No-JS forms use `route.ts` + `<Form>`.** Drop `app/.../route.ts` exporting `export const POST: RouteHandler = async ({ form, db, response, auth }) => { await db.insert("X", {...}); response.redirect("/x?ok=1"); }` (303 POST-redirect-GET by default). Render `<Form action="/x">` (from @pylonsync/react) with plain `<input name=...>` — works with JS off (native POST→handler→redirect) and is enhanced to no-reload when JS is on. The handler's `db` is read+write (mutation trust model — gate on `auth`); CSRF is automatic (Origin gate + SameSite=Lax). Multipart/file uploads aren't supported yet — use urlencoded forms + `/api/files`.
+- **`loading.tsx` streams a skeleton while the page's data resolves.** Drop `app/.../loading.tsx` (default export, page props) and the nearest one becomes a route-level Suspense fallback: Pylon flushes the shell + skeleton immediately, then reveals the real page when its top-level `use(serverData…)` resolves (no blank page). It only shows when the PAGE suspends — a page that wraps its own `<Suspense>` around a child (like `/dashboard` in this template) handles that itself. The skeleton is SERVER-ONLY: don't read `serverData` in it. A page with no `loading.tsx` is buffered (unchanged).
+- **`export const streaming = true` streams a page's OWN inner `<Suspense>` boundaries.** Without it (and without a `loading.tsx`), a page is BUFFERED — the whole document, including suspended children, resolves before the first byte. Opt in and the shell + each inner `<Suspense>` fallback flush immediately, then each boundary's real content streams in as its data resolves (multi-boundary progressive streaming). It's opt-in because it changes the response timing contract: a streaming render commits its HTTP head BEFORE suspended subtrees finish, so (a) it's never CDN/disk cacheable — don't combine with `export const revalidate`; (b) `response.setStatus/setCookie/redirect/notFound` only take effect from the SYNCHRONOUS shell render — a call from inside a suspended subtree is dropped (the runtime logs a loud warning naming what was lost); (c) a `throw` from a deep `<Suspense>` child resolves via its nearest `error.tsx` at HTTP 200, not a 5xx. Hydration is clean for any number of boundaries (the data blob ships before hydration runs). Type the config with `import type { RouteSegmentConfig } from "@pylonsync/react"`.
+- **`error.tsx` / `not-found.tsx` boundaries are HYDRATED (interactive).** `app/.../error.tsx` catches a throw below it (HTTP 500) and receives `{ error: { message, digest }, reset }` (`import type { ErrorBoundaryProps }`) — `reset()` re-attempts the route; the stack NEVER reaches the client (dev overlay + logs only). `app/.../not-found.tsx` renders at 404 (also for `response.notFound()`) and gets the page props (`NotFoundProps`), no `reset`. Both run useState/onClick/hooks.
+- **Client navigation hooks live in @pylonsync/react.** `useRouter()` → `{ push, replace, back, forward, refresh, prefetch }`; `useSearchParams()` → reactive `URLSearchParams`; `usePathname()` → reactive pathname. The hooks are CLIENT-reactive — during SSR they return defaults (empty params / "/"); for server-side URL values read the `url` / `searchParams` page props.
+- **Dynamic + catch-all routes follow Next conventions.** `app/blog/[slug]/page.tsx` → `params.slug`. `app/docs/[...path]/page.tsx` is a catch-all (matches `/docs/a/b/c`; `params.path === "a/b/c"` — `.split("/")` for segments). `app/shop/[[...filters]]/page.tsx` is an optional catch-all (also matches the bare `/shop`, with `params.filters === ""`). A catch-all must be the last segment; static beats dynamic beats catch-all on overlap.
+- **`serverData` (SSR) is READ-ONLY.** No write methods; the runtime rejects write frames (`SSR_WRITE_FORBIDDEN`). Mutations belong in actions/functions, never in a page render.
+- **`response.*` / `response.redirect()` / `response.notFound()` must fire in the synchronous shell render**, before any `await` / `<Suspense>`. The HTTP head commits when the shell is ready — status/headers/cookies set from a suspended subtree are lost, and `redirect`/`notFound` thrown below a Suspense boundary are swallowed.
+- **`ctx.llm` and `ctx.connections` are on mutation + action only, NOT query** (reactive purity). `action` has no direct `ctx.db` — use `ctx.runQuery` / `ctx.runMutation`.
+- **It's `db.useQueryOne`, not `useOne`.** Validators and field types have aliases: `v.bool`/`v.boolean`, `v.float`/`v.number`.
+- **There is no `ctx.files` or `defineWorkflow`/`defineJob`.** Files go through `<FileUpload>` + `/api/files/*`; deferred execution is `ctx.scheduler.runAfter/runAt/cancel`.
+
+## Use the CLI — don't guess
+
+| Need | Command |
+|---|---|
+| Run the app (SSR + API, hot reload, one port `:4321`) | `pylon dev` (or `npm run dev`) |
+| Regenerate manifest + typed client | `pylon codegen` (Swift client: `pylon codegen client --target swift`) |
+| Validate / diff / push schema | `pylon schema check` \| `diff` \| `push` |
+| Migrations | `pylon migrate create <name>` \| `plan` \| `apply` |
+| Lint policies (PYL001–PYL004) | `pylon lint --strict` |
+| Tests | `pylon test` |
+| Adversarial security probe | `pylon test:security` |
+| Inspect cloud request logs (agent-safe) | `pylon logs --json --limit 50` |
+| Inspect data / entities | `pylon data entities` \| `pylon data list <Entity>` |
+| Call a function | `pylon fn <name> key=value` |
+| Health snapshot | `pylon status` |
+| Build for prod | `pylon build` |
+| Deploy (Pylon Cloud by default) | `pylon deploy` |
+| Look up an error code | `pylon explain <CODE>` |
+
+`--json` works on every command for machine-readable output. Prefer one-shot/agent-safe flags (`pylon logs --limit N`, not a blocking `--follow`).
+
+For full signatures, env vars, the complete CLI, and SSR/client/server-primitive details: **/llms-full.txt**.

package/templates/marketplace/README.md

@@ -0,0 +1,78 @@
+# __APP_NAME__
+
+A live, two-sided **marketplace** built with [Pylon](https://pylonsync.com) —
+server-rendered listings (great for SEO) plus realtime offers, from one binary
+on one port. No Next.js, no separate realtime service.
+
+Anyone can list an item; anyone else can make an offer or buy it now; sellers
+watch offers arrive live and accept or decline — every write fanned out to every
+open tab instantly.
+
+## Develop
+
+```bash
+__RUN_DEV__
+```
+
+Open http://localhost:4321 — the grid seeds itself on first load. Then **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.
+
+## How it works
+
+- **Server-rendered for SEO + LCP.** The browse grid (`/`) and every listing
+  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
+  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
+  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".
+
+## Privacy & 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.
+- `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.
+
+## Rebrand it
+
+The brand ("Pylon Market") 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`.
+
+## Layout
+
+```
+app.ts                         User + Listing + Offer + Watch + policies
+app/page.tsx                   SSR browse grid + 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)
+functions/buyNow.ts, makeOffer.ts, respondToOffer.ts, seedMarket.ts
+client/*                       the realtime islands (ticker, offers, sell form…)
+```
+
+## Deploy
+
+```bash
+pylon deploy
+```
+
+Docs: https://docs.pylonsync.com

package/templates/marketplace/app/_components/CategoryIcon.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import {
+  Armchair,
+  Bike,
+  Camera,
+  CookingPot,
+  Guitar,
+  Headphones,
+  MonitorSmartphone,
+  Package,
+  Shirt,
+  Tent,
+  type LucideIcon,
+} from "lucide-react";
+
+// Category → icon. Drives the listing "photo" placeholder, so the grid +
+// detail pages read as a real catalog instead of text initials. Pure SVG
+// (no client hooks), so it renders straight through SSR.
+const ICONS: Record<string, LucideIcon> = {
+  furniture: Armchair,
+  electronics: MonitorSmartphone,
+  cameras: Camera,
+  bikes: Bike,
+  audio: Headphones,
+  kitchen: CookingPot,
+  instruments: Guitar,
+  outdoor: Tent,
+  apparel: Shirt,
+};
+
+export function CategoryIcon({
+  category,
+  className,
+}: {
+  category: string;
+  className?: string;
+}) {
+  const Icon = ICONS[category] ?? Package;
+  return <Icon className={className} strokeWidth={1.25} aria-hidden />;
+}

package/templates/marketplace/app/error.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { type ErrorBoundaryProps } from "@pylonsync/react";
+
+// `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>
+  );
+}

package/templates/marketplace/app/globals.css

@@ -0,0 +1,64 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "../ui/tokens.css";
+
+/* Tailwind v4 scans these for class names (relative to this file). */
+@source "./";
+@source "../client";
+@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);
+  --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);
+
+  --radius-lg: 0.625rem;
+  --radius-md: calc(0.625rem - 2px);
+  --radius-sm: calc(0.625rem - 4px);
+}
+
+html,
+body {
+  height: 100%;
+}
+
+/* Live "just listed" ticker. Items are doubled in the markup, so translating
+   the track by -50% loops seamlessly. */
+@keyframes market-marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+.market-marquee {
+  animation: market-marquee 28s linear infinite;
+}
+.market-marquee:hover {
+  animation-play-state: paused;
+}
+@media (prefers-reduced-motion: reduce) {
+  .market-marquee {
+    animation: none;
+  }
+}

package/templates/marketplace/app/layout.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { AuthNav } from "../client/AuthNav";
+
+// Root layout. Server-rendered shell; Pylon's SSR head adapter injects the
+// compiled Tailwind <link> from app/globals.css automatically.
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <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" />
+      </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
+              </span>
+              Pylon Market
+            </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>
+              <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
+        </footer>
+      </body>
+    </html>
+  );
+}