@pylonsync/create-pylon 0.11.1 → 0.11.3

package/bin/create-pylon.js

@@ -106,7 +106,7 @@ const TEMPLATE_REGISTRY = {
 	},
 	consumer: {
 		blurb:
-			"Social feed — live posts + likes, public-read, owner-write. One SSR app.",
+			"Photo sharing — feed, explore, post pages, profiles, follows, likes, comments, and saves. One SSR app.",
 		platforms: [],
 		unified: true,
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "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/_root/AGENTS.md

@@ -57,7 +57,7 @@ this pass before the user has to ask.
 - **`ctx.llm.stream(request, onEvent)` streams tokens as they generate** and still resolves with the full response, so `stop_reason === "tool_use"` drives an agent tool loop. Events are `text_delta` / `tool_use_start` / `tool_input_delta` / `done`. Same auth + model-allowlist gating as `ctx.llm.complete`. Streaming does NOT extend the call deadline (`PYLON_FN_CALL_TIMEOUT`, 30s default) — set `timeout: <secs>` on the def for a long run.
 - **`ctx.stream.write(text)` streams to the caller — and every fn stream is RESUMABLE**: the server buffers frames under a stream id (`streamFn`'s `onStreamId`), so a dropped connection or closed tab catches up via `resumeStream(id)`, including the final result after the handler finished. `ctx.rooms.broadcast(room, topic, data)` fans out to every CURRENTLY-CONNECTED subscriber (second device, second tab) but does not replay missed messages — use the stream id for anything that must survive a gap. Broadcast resolves `{ delivered: false }` when the room has no members — a no-op, not an error. Clients receive with `useRoomMessages(room, cb)` from `@pylonsync/react`; `useRoom` is the send side.
 - **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`.
+- **There is no `ctx.files` or `defineWorkflow`/`defineJob`.** Files go through `<FileUpload>` + `/api/files/*`; an upload is readable by its uploader only, so pass `visibility: "public"` to `uploadFile` or `<FileUpload>` for files every visitor sees; deferred execution is `ctx.scheduler.runAfter/runAt/cancel`.
 
 ## Use the CLI
 

package/templates/agency/AGENTS.md

@@ -65,7 +65,7 @@ this pass before the user has to ask.
 - **`ctx.llm.stream(request, onEvent)` streams tokens as they generate** and still resolves with the full response, so `stop_reason === "tool_use"` drives an agent tool loop. Events are `text_delta` / `tool_use_start` / `tool_input_delta` / `done`. Same auth + model-allowlist gating as `ctx.llm.complete`. Streaming does NOT extend the call deadline (`PYLON_FN_CALL_TIMEOUT`, 30s default) — set `timeout: <secs>` on the def for a long run.
 - **`ctx.stream.write(text)` streams to the caller — and every fn stream is RESUMABLE**: the server buffers frames under a stream id (`streamFn`'s `onStreamId`), so a dropped connection or closed tab catches up via `resumeStream(id)`, including the final result after the handler finished. `ctx.rooms.broadcast(room, topic, data)` fans out to every CURRENTLY-CONNECTED subscriber (second device, second tab) but does not replay missed messages — use the stream id for anything that must survive a gap. Broadcast resolves `{ delivered: false }` when the room has no members — a no-op, not an error. Clients receive with `useRoomMessages(room, cb)` from `@pylonsync/react`; `useRoom` is the send side.
 - **It's `db.useQueryOne`, not `useOne`.** Validators and field types have aliases: `v.bool`/`v.boolean`, `v.float`/`v.number`.
-- **Use the supported file and scheduling APIs.** Files go through `<FileUpload>` and `/api/files/*`; there is no `ctx.files`. One-shot work uses `ctx.scheduler.runAfter`, `runAt`, or `cancel`; there is no `defineWorkflow` or `defineJob`. Recurring work uses `cron("0 * * * *", "fnName")` in `buildManifest({ crons: [...] })`, imported from `@pylonsync/sdk`. Make the target function `internal: true`. It runs with anonymous auth, but its own `ctx.db.*` calls are server-side and bypass policies. Use `ctx.auth.elevate({ admin: true, reason: "..." })`, with a mandatory reason, only when chaining another internal function through `ctx.scheduler`.
+- **Use the supported file and scheduling APIs.** Files go through `<FileUpload>` and `/api/files/*`; an upload is readable by its uploader only, so pass `visibility: "public"` to `uploadFile` or `<FileUpload>` for files every visitor sees; there is no `ctx.files`. One-shot work uses `ctx.scheduler.runAfter`, `runAt`, or `cancel`; there is no `defineWorkflow` or `defineJob`. Recurring work uses `cron("0 * * * *", "fnName")` in `buildManifest({ crons: [...] })`, imported from `@pylonsync/sdk`. Make the target function `internal: true`. It runs with anonymous auth, but its own `ctx.db.*` calls are server-side and bypass policies. Use `ctx.auth.elevate({ admin: true, reason: "..." })`, with a mandatory reason, only when chaining another internal function through `ctx.scheduler`.
 
 ## Testing
 

package/templates/agency/app/(marketing)/contact-form.tsx

@@ -9,7 +9,7 @@ import { siteConfig } from "@/lib/site.config";
 // row via `db.useQuery("Capacity")` — so when the owner books a project from the
 // dashboard, the "N slots open" number drops live in every open tab. No refresh.
 //
-//   • <LiveSlots>   — the hero pill ("3 project slots open · Q3 2026").
+//   • <LiveSlots>   — the hero line ("3 project slots open, Q3 2026").
 //   • <ContactForm> — the "start a project" form. submitInquiry is a public
 //                     mutation, so it works for anonymous visitors; the Inquiry
 //                     it writes is pure PII and can never be read back by a
@@ -33,7 +33,7 @@ function useSeedCapacity() {
   }, []);
 }
 
-/* ------------------------------ hero pill ------------------------------ */
+/* ------------------------------ hero line ------------------------------ */
 
 export function LiveSlots() {
   return (
@@ -65,7 +65,7 @@ function SlotsPill({
   const period = label || siteConfig.capacity.label;
   const bookedOut = open <= 0;
   return (
-    <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-3.5 py-1.5 text-[13px] font-medium text-zinc-700 shadow-sm">
+    <span className="inline-flex items-center gap-2.5 text-[14px] text-zinc-700">
       {loading ? (
         <span className="inline-flex size-2 rounded-full bg-zinc-300" />
       ) : (
@@ -82,8 +82,8 @@ function SlotsPill({
         <span>Booked through {period}</span>
       ) : (
         <span>
-          <span className="tabular-nums text-zinc-900">{open}</span>{" "}
-          {open === 1 ? "project slot" : "project slots"} open · {period}
+          <span className="tabular-nums text-ink">{open}</span>{" "}
+          {open === 1 ? "project slot" : "project slots"} open, {period}
         </span>
       )}
     </span>
@@ -156,7 +156,7 @@ function FormShell({
       setError(
         /valid email|INVALID_ARGS/i.test(msg)
           ? "Please enter a valid email address."
-          : "Something went wrong — try again in a moment.",
+          : "Something went wrong. Try again in a moment.",
       );
       setStatus("idle");
     }
@@ -164,23 +164,21 @@ function FormShell({
 
   if (status === "done") {
     return (
-      <div className="rounded-2xl border border-brand/30 bg-brand-soft/50 px-6 py-8 text-center">
-        <div className="mx-auto flex size-10 items-center justify-center rounded-full bg-brand text-white">
-          <CheckIcon />
-        </div>
-        <p className="mt-3 text-[15px] font-semibold text-zinc-900">{contact.confirmationMessage}</p>
+      <div className="border-t border-ink pt-6">
+        <p className="font-display text-[1.75rem] leading-tight text-ink">Sent.</p>
+        <p className="mt-2 text-[15px] leading-relaxed text-zinc-700">{contact.confirmationMessage}</p>
       </div>
     );
   }
 
   return (
-    <form onSubmit={onSubmit} className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-7">
+    <form onSubmit={onSubmit}>
       {bookedOut ? (
-        <p className="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-[13px] text-amber-700">
-          We&apos;re fully booked{period ? ` through ${period}` : ""} — send a note anyway and we&apos;ll reach out when a slot opens.
+        <p className="mb-5 border-l-2 border-ink pl-3 text-[14px] text-zinc-700">
+          We are fully booked{period ? ` through ${period}` : ""}. Send a note anyway and we will write when a slot opens.
         </p>
       ) : null}
-      <div className="grid gap-3 sm:grid-cols-2">
+      <div className="grid gap-5 sm:grid-cols-2">
         <Field label="Name" required>
           <input value={form.name} onChange={set("name")} autoComplete="name" aria-label="Name" className={inputCls} disabled={disabled} />
         </Field>
@@ -199,7 +197,7 @@ function FormShell({
           </select>
         </Field>
       </div>
-      <div className="mt-3">
+      <div className="mt-5">
         <Field label="Budget">
           <select value={form.budget} onChange={set("budget")} aria-label="Budget" className={inputCls} disabled={disabled}>
             <option value="">Select…</option>
@@ -209,24 +207,24 @@ function FormShell({
           </select>
         </Field>
       </div>
-      <div className="mt-3">
+      <div className="mt-5">
         <Field label="What are you building?">
           <textarea
             value={form.message}
             onChange={set("message")}
             rows={4}
             aria-label="Message"
-            placeholder="A sentence or two about the project, timeline, and what success looks like."
-            className={inputCls + " resize-none py-2.5"}
+            placeholder="A sentence or two about the project and the timeline."
+            className={inputCls + " h-auto resize-none py-2.5"}
             disabled={disabled}
           />
         </Field>
       </div>
-      {error ? <p className="mt-3 text-[13px] text-red-600">{error}</p> : null}
+      {error ? <p className="mt-4 text-[14px] text-red-700">{error}</p> : null}
       <button
         type="submit"
         disabled={status === "sending" || disabled}
-        className="mt-5 inline-flex h-11 w-full items-center justify-center rounded-full bg-brand text-[15px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60 sm:w-auto sm:px-7"
+        className="mt-6 inline-flex h-11 w-full items-center justify-center bg-ink px-7 text-[15px] font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60 sm:w-auto"
       >
         {status === "sending" ? "Sending…" : "Send inquiry"}
       </button>
@@ -237,9 +235,9 @@ function FormShell({
 function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="mb-1.5 block text-[12.5px] font-medium text-zinc-600">
+      <span className="mb-1.5 block text-[11px] font-medium uppercase tracking-[0.08em] text-zinc-600">
         {label}
-        {required ? <span className="text-brand"> *</span> : null}
+        {required ? <span className="text-zinc-500"> *</span> : null}
       </span>
       {children}
     </label>
@@ -247,12 +245,4 @@ function Field({ label, required, children }: { label: string; required?: boolea
 }
 
 const inputCls =
-  "h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-[14px] text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20 disabled:opacity-60";
-
-function CheckIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-      <path d="M20 6 9 17l-5-5" />
-    </svg>
-  );
-}
+  "h-11 w-full rounded-none border-0 border-b border-zinc-400 bg-transparent px-0 text-[15px] text-ink outline-none transition-colors placeholder:text-zinc-400 focus:border-ink disabled:opacity-60";

package/templates/agency/app/(marketing)/layout.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { Link, type PageAuth } from "@pylonsync/react";
 import { siteConfig } from "@/lib/site.config";
+import { WRAP } from "@/components/marketing";
 
 // `(marketing)` is a ROUTE GROUP: the parens segment is stripped from every
 // URL (so `(marketing)/page.tsx` still serves `/`), and this layout wraps
-// only the pages inside the group — a slim nav up top and a footer below,
-// both driven by lib/site.config.ts. Routes outside the group (/login,
+// only the pages inside the group — a plain text nav up top and a footer
+// below, both driven by lib/site.config.ts. Routes outside the group (/login,
 // /dashboard) render bare in the root shell. `auth.user_id` is resolved
 // server-side from the session cookie before any HTML is sent, so the nav
 // shows "Dashboard" once the owner is signed in and "Sign in" otherwise —
@@ -15,6 +16,8 @@ interface LayoutProps {
   auth: PageAuth;
 }
 
+const NAV_LINK = "text-[14px] text-zinc-700 transition-colors hover:text-ink";
+
 export default function MarketingLayout({ children, auth }: LayoutProps) {
   // A guest session (minted by <EnsureGuest> for the live counter) has a
   // `guest_…` user id — that's an anonymous visitor, NOT the signed-in owner,
@@ -24,43 +27,29 @@ export default function MarketingLayout({ children, auth }: LayoutProps) {
 
   return (
     <>
-      <header className="sticky top-0 z-30 border-b border-zinc-200/70 bg-white/85 backdrop-blur">
-        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
-          <Link href="/" className="flex items-center gap-2">
-            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-              {brand.letter}
-            </span>
-            <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-              {brand.name}
-            </span>
+      <header className="bg-white">
+        <div className={`${WRAP} flex h-16 items-center justify-between`}>
+          <Link href="/" className="font-display text-[1.5rem] leading-none text-ink">
+            {brand.name}
           </Link>
-          <nav className="flex items-center gap-1 sm:gap-2">
-            <a href="/work" className="hidden rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex">
+          <nav className="flex items-center gap-5 sm:gap-7">
+            <a href="/work" className={NAV_LINK}>
               Work
             </a>
-            <a href="/#services" className="hidden rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex">
+            <a href="/#services" className={`hidden sm:inline ${NAV_LINK}`}>
               Services
             </a>
             {signedIn ? (
-              <Link
-                href="/dashboard"
-                className="inline-flex items-center rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
-              >
+              <Link href="/dashboard" className={NAV_LINK}>
                 Dashboard
               </Link>
             ) : (
               <>
-                <Link
-                  href="/login"
-                  className="hidden rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex"
-                >
+                <Link href="/login" className={`hidden sm:inline ${NAV_LINK}`}>
                   Sign in
                 </Link>
-                <a
-                  href="/#contact"
-                  className="inline-flex items-center rounded-full bg-brand px-3.5 py-1.5 text-[13px] font-medium text-white transition-opacity hover:opacity-90"
-                >
-                  {siteConfig.hero.ctaLabel}
+                <a href="/#contact" className={NAV_LINK}>
+                  Contact
                 </a>
               </>
             )}
@@ -78,54 +67,37 @@ export default function MarketingLayout({ children, auth }: LayoutProps) {
 function SiteFooter() {
   const { brand } = siteConfig;
   return (
-    <footer className="border-t border-zinc-200/70 bg-white">
-      <div className="mx-auto max-w-5xl px-6 py-12">
-        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row">
+    <footer className="border-t border-zinc-200 bg-white text-ink">
+      <div className={`${WRAP} py-12`}>
+        <div className="grid gap-8 sm:grid-cols-[1fr_auto]">
           <div className="max-w-sm">
-            <Link href="/" className="inline-flex items-center gap-2">
-              <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-                {brand.letter}
-              </span>
-              <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-                {brand.name}
-              </span>
+            <Link href="/" className="font-display text-[1.5rem] leading-none">
+              {brand.name}
             </Link>
-            <p className="mt-3 text-[13px] leading-relaxed text-zinc-500">
-              {brand.footerBlurb}
-            </p>
+            <p className="mt-3 text-[14px] leading-relaxed text-zinc-600">{brand.footerBlurb}</p>
           </div>
-          <div className="flex items-center gap-4">
-            {brand.socials.map((s) => (
-              <a
-                key={s.label}
-                href={s.href}
-                aria-label={s.label}
-                className="text-zinc-400 transition-colors hover:text-zinc-900"
-              >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path d={s.path} />
-                </svg>
+          <ul className="flex flex-col gap-2 text-[14px] sm:text-right">
+            <li>
+              <a href={`mailto:${brand.email}`} className="text-zinc-700 transition-colors hover:text-ink">
+                {brand.email}
               </a>
+            </li>
+            {brand.socials.map((s) => (
+              <li key={s.label}>
+                <a href={s.href} className="text-zinc-700 transition-colors hover:text-ink">
+                  {s.label}
+                </a>
+              </li>
             ))}
-            <a
-              href={`mailto:${brand.email}`}
-              aria-label="Email"
-              className="text-zinc-400 transition-colors hover:text-zinc-900"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="5" width="18" height="14" rx="2" />
-                <path d="m3 7 9 6 9-6" />
-              </svg>
-            </a>
-          </div>
+          </ul>
         </div>
-        <div className="mt-10 flex flex-col items-start justify-between gap-3 border-t border-zinc-200/70 pt-6 text-[12px] text-zinc-400 sm:flex-row sm:items-center">
+        <div className="mt-10 flex flex-col gap-2 border-t border-zinc-200 pt-6 text-[13px] text-zinc-500 sm:flex-row sm:justify-between">
           <span>
             © {new Date().getFullYear()} {brand.copyrightName}
           </span>
           <span>
             Built with{" "}
-            <a href="https://pylonsync.com" className="font-medium text-zinc-600 hover:text-zinc-900">
+            <a href="https://pylonsync.com" className="text-zinc-700 hover:text-ink">
               Pylon
             </a>
           </span>

package/templates/agency/app/(marketing)/not-found.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Link, type NotFoundProps } from "@pylonsync/react";
+import { WRAP_NARROW, TEXT_LINK } from "@/components/marketing";
 
 // `(marketing)/not-found.tsx` → rendered at HTTP 404 for any unmatched URL
 // (and when a page calls `response.notFound()`). It lives inside the
@@ -9,14 +10,11 @@ import { Link, type NotFoundProps } from "@pylonsync/react";
 // 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-zinc-500">We couldn&apos;t find that page.</p>
-      <Link
-        href="/"
-        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
-      >
-        Back home
+    <div className={`${WRAP_NARROW} flex min-h-[60vh] flex-col justify-center py-20 text-ink`}>
+      <h1 className="font-display text-[2.75rem] leading-none">Page not found</h1>
+      <p className="mt-4 text-[16px] text-zinc-600">There is nothing at this address.</p>
+      <Link href="/" className={`mt-6 inline-block self-start text-[15px] ${TEXT_LINK}`}>
+        Back to the homepage
       </Link>
     </div>
   );