@pylonsync/create-pylon 0.11.1 → 0.11.3

package/templates/restaurant/app/(marketing)/page.tsx

@@ -1,15 +1,8 @@
 import React from "react";
 import { type Metadata } from "@pylonsync/react";
-import {
-  WRAP,
-  Eyebrow,
-  Divider,
-  SectionHead,
-  ImagePlaceholder,
-  LiveBadge,
-} from "@/components/marketing";
+import { LiveBadge } from "@/components/marketing";
 import { ReservationWidget } from "./reservation-widget";
-import { siteConfig } from "@/lib/site.config";
+import { siteConfig, type DayHours } from "@/lib/site.config";
 
 export const metadata: Metadata = {
   title: siteConfig.seo.title,
@@ -17,75 +10,98 @@ export const metadata: Metadata = {
   openGraph: { title: siteConfig.seo.title, description: siteConfig.seo.description, type: "website" },
 };
 
-// `app/(marketing)/page.tsx` → `/` (the group segment adds no URL prefix). Server-rendered single-page restaurant site. Hero, menu,
-// reviews, location, and FAQ are static server HTML (SEO + first paint); the
-// reservation section (#reserve) is a client island with live table
-// availability. All copy comes from siteConfig. Doesn't read `auth`, so the
-// public page stays cacheable.
+const WRAP = "mx-auto w-full max-w-6xl px-6";
+const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+// `app/(marketing)/page.tsx` → `/`. A single dark page: the room behind the
+// hero, opening times, the menu, the live reservation calendar on a cream
+// panel, a review, and where to find us. Every word and every image path
+// comes from lib/site.config.ts. The page never reads `auth`, so the public
+// render stays cacheable; the reservation widget is the one client island.
 export default function LandingPage() {
-  const { hero, menu, reservations, reviews, location, faq } = siteConfig;
+  const { hero, gallery, menu, reservations, reviews, location, faq } = siteConfig;
 
   return (
-    <div className="bg-white text-zinc-900">
-      {/* HERO */}
-      <section className={`${WRAP} pt-16 pb-14 sm:pt-20`}>
-        <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
-          <div>
-            <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-brand">{hero.tagline}</p>
-            <h1 className="mt-4 text-balance text-[2.5rem] font-semibold leading-[1.04] tracking-[-0.02em] sm:text-[3.25rem]">
-              {hero.headline}
-            </h1>
-            <p className="mt-5 max-w-xl text-[17px] leading-relaxed text-zinc-500">{hero.subcopy}</p>
-            <div className="mt-7 flex flex-wrap items-center gap-4">
-              <a href="#reserve" className="inline-flex items-center rounded-full bg-brand px-5 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-90">
-                {hero.ctaLabel}
-              </a>
-              <a href="#menu" className="text-sm font-medium text-zinc-700 hover:text-zinc-900">See the menu →</a>
-            </div>
-            <dl className="mt-10 grid max-w-lg grid-cols-3 gap-4 border-t border-zinc-200/70 pt-6">
-              <QuickFact label="Hours" value={hero.quickFacts.hours} />
-              <QuickFact label="Area" value={hero.quickFacts.area} />
-              <QuickFact label="Call" value={hero.quickFacts.phone} />
-            </dl>
-          </div>
-
-          {/* Hero photo — replace the placeholder with a real shot of your space. */}
-          <div className="relative mx-auto w-full max-w-sm lg:max-w-none">
-            <ImagePlaceholder
-              shape="portrait"
-              title="A photo of your dining room"
-              hint="Swap for an <img> in app/(marketing)/page.tsx"
-            />
-            <div className="absolute left-4 top-4">
+    <div className="bg-[var(--ink)] text-[var(--cream)]">
+      {/* HERO: the room, full bleed, the words on top. */}
+      <section className="relative isolate min-h-[88vh] overflow-hidden">
+        <img src={hero.image} alt="" className="absolute inset-0 -z-20 size-full object-cover" />
+        <div className="absolute inset-0 -z-10 bg-gradient-to-t from-[var(--ink)] via-[var(--ink)]/60 to-[var(--ink)]/20" />
+        <div className={`${WRAP} flex min-h-[88vh] flex-col justify-end pb-16 pt-32`}>
+          <h1 className="font-display mt-5 max-w-3xl text-balance text-[3rem] font-medium leading-[1.02] tracking-[-0.01em] sm:text-[4.5rem]">
+            {hero.headline}
+          </h1>
+          <p className="mt-6 max-w-xl text-[17px] leading-relaxed text-[var(--cream-2)]">{hero.subcopy}</p>
+          <div className="mt-8 flex flex-wrap items-center gap-4">
+            <a href="#reserve" className="inline-flex items-center rounded-full bg-brand px-6 py-3 text-[14px] font-medium text-white transition-opacity hover:opacity-90">
+              {hero.ctaLabel}
+            </a>
+            <a href="#menu" className="text-[14px] font-medium text-[var(--cream)] underline-offset-4 hover:underline">
+              See the menu
+            </a>
+            <span className="ml-auto hidden sm:block">
               <LiveBadge>Tables update live</LiveBadge>
-            </div>
+            </span>
           </div>
         </div>
       </section>
 
+      {/* OPENING TIMES */}
+      <section className="border-y border-white/10">
+        <div className={`${WRAP} grid gap-8 py-10 sm:grid-cols-[1fr_2fr] sm:items-start`}>
+          <h2 className="font-display text-[26px] italic">Opening times</h2>
+          <dl className="grid grid-cols-2 gap-x-8 gap-y-3 text-[14px] sm:grid-cols-3">
+            {DAYS.map((day, i) => (
+              <div key={day} className="flex justify-between gap-3 border-b border-white/10 pb-2">
+                <dt className="text-[var(--cream-2)]">{day}</dt>
+                <dd className="font-medium tabular-nums">{hoursLabel(reservations.hours[i])}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </section>
+
+      {/* GALLERY */}
+      {gallery.length > 0 ? (
+        <section className={`${WRAP} grid gap-3 py-12 sm:grid-cols-3`}>
+          {gallery.map((g) => (
+            <figure key={g.src} className="group">
+              <div className="aspect-[4/3] overflow-hidden rounded-[6px] bg-[var(--ink-2)]">
+                <img src={g.src} alt={g.caption} className="size-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" loading="lazy" />
+              </div>
+              <figcaption className="mt-2 font-mono text-[11px] uppercase tracking-[0.16em] text-[var(--cream-2)]">{g.caption}</figcaption>
+            </figure>
+          ))}
+        </section>
+      ) : null}
+
       {/* MENU */}
-      <Divider />
-      <section id="menu" className={`${WRAP} py-14`}>
-        <SectionHead eyebrow={menu.eyebrow} title={menu.headline} />
-        <div className="mt-8 grid gap-10 sm:grid-cols-2">
+      <section id="menu" className={`${WRAP} py-16`}>
+        <div className="max-w-2xl">
+          <h2 className="font-display text-balance text-[2.25rem] leading-[1.08] sm:text-[3rem]">{menu.headline}</h2>
+        </div>
+        <div className="mt-12 grid gap-12 md:grid-cols-3">
           {menu.sections.map((sec) => (
             <div key={sec.name}>
-              <h3 className="font-mono text-[11px] uppercase tracking-[0.14em] text-brand">{sec.name}</h3>
-              <ul className="mt-4 space-y-4">
+              <h3 className="font-display border-b border-white/15 pb-3 text-[22px] italic">{sec.name}</h3>
+              <ul className="mt-5 space-y-5">
                 {sec.items.map((it) => (
-                  <li key={it.name} className="flex items-baseline justify-between gap-4">
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <span className="text-[15px] font-medium text-zinc-900">{it.name}</span>
+                  <li key={it.name}>
+                    <div className="flex items-baseline gap-2">
+                      <span className="text-[15px] font-medium">{it.name}</span>
+                      <span className="mb-1 flex-1 border-b border-dotted border-white/25" aria-hidden />
+                      <span className="text-[14px] tabular-nums text-[var(--cream-2)]">{it.price}</span>
+                    </div>
+                    {it.desc || it.tags?.length ? (
+                      <p className="mt-1 text-[13px] leading-relaxed text-[var(--cream-2)]">
+                        {it.desc}
                         {it.tags?.map((t) => (
-                          <span key={t} className="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-medium uppercase text-zinc-500">
+                          <span key={t} className="ml-2 font-mono text-[10px] uppercase tracking-wide text-brand">
                             {t}
                           </span>
                         ))}
-                      </div>
-                      {it.desc ? <p className="mt-0.5 text-[13px] leading-relaxed text-zinc-500">{it.desc}</p> : null}
-                    </div>
-                    <span className="shrink-0 text-[14px] font-medium text-zinc-600">{it.price}</span>
+                      </p>
+                    ) : null}
                   </li>
                 ))}
               </ul>
@@ -94,66 +110,73 @@ export default function LandingPage() {
         </div>
       </section>
 
-      {/* RESERVE */}
+      {/* RESERVE: the live calendar on a cream panel. */}
       {reservations.enabled ? (
-        <>
-          <Divider />
-          <section id="reserve" className={`${WRAP} py-14`}>
-            <SectionHead eyebrow={reservations.eyebrow} title={reservations.headline} body={reservations.subcopy} />
+        <section id="reserve" className="bg-[var(--paper)] text-zinc-900">
+          <div className={`${WRAP} py-16`}>
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+              <div className="max-w-xl">
+                <h2 className="font-display text-balance text-[2.25rem] leading-[1.08] sm:text-[3rem]">{reservations.headline}</h2>
+                <p className="mt-4 text-[15px] leading-relaxed text-zinc-600">{reservations.subcopy}</p>
+              </div>
+              <p className="text-[13px] text-zinc-500">
+                Parties over {reservations.maxPartySize}? Call{" "}
+                <a href={`tel:${location.phone}`} className="font-medium text-zinc-900">
+                  {location.phone}
+                </a>
+              </p>
+            </div>
             <div className="mt-8">
               <ReservationWidget />
             </div>
-          </section>
-        </>
+          </div>
+        </section>
       ) : null}
 
-      {/* REVIEWS */}
+      {/* REVIEWS: one voice at a time. */}
       {reviews && reviews.items.length > 0 ? (
-        <>
-          <Divider />
-          <section className={`${WRAP} py-14`}>
-            <SectionHead eyebrow={reviews.eyebrow} title={reviews.headline} />
-            <div className="mt-8 grid gap-5 sm:grid-cols-3">
-              {reviews.items.map((r) => (
-                <figure key={r.name} className="flex flex-col rounded-2xl border border-zinc-200 bg-paper p-6">
-                  {r.rating ? (
-                    <div className="text-[13px] tracking-wide text-brand">
-                      {"★".repeat(r.rating)}
-                      <span className="text-zinc-200">{"★".repeat(5 - r.rating)}</span>
-                    </div>
-                  ) : null}
-                  <blockquote className="mt-3 text-[14px] leading-relaxed text-zinc-600">&ldquo;{r.quote}&rdquo;</blockquote>
-                  <figcaption className="mt-4 text-[13px] font-semibold text-zinc-900">{r.name}</figcaption>
-                </figure>
-              ))}
-            </div>
-          </section>
-        </>
+        <section className={`${WRAP} py-16`}>
+          <h2 className="font-display text-[2rem] leading-[1.1]">{reviews.headline}</h2>
+          <div className="mt-6 divide-y divide-white/10">
+            {reviews.items.map((r) => (
+              <figure key={r.name} className="grid gap-4 py-8 sm:grid-cols-[1fr_auto] sm:items-end">
+                <blockquote className="font-display max-w-3xl text-balance text-[1.5rem] leading-[1.3] sm:text-[1.9rem]">
+                  “{r.quote}”
+                </blockquote>
+                <figcaption className="text-[13px] text-[var(--cream-2)]">
+                  {r.name}
+                  {r.rating ? <span className="ml-2 text-brand">{"★".repeat(r.rating)}</span> : null}
+                </figcaption>
+              </figure>
+            ))}
+          </div>
+        </section>
       ) : null}
 
-      {/* LOCATION */}
-      <Divider />
-      <section className={`${WRAP} py-14`}>
-        <div className="grid gap-8 lg:grid-cols-[1fr_1fr]">
+      {/* VISIT */}
+      <section id="visit" className="border-t border-white/10">
+        <div className={`${WRAP} grid gap-10 py-16 lg:grid-cols-2`}>
           <div>
-            <SectionHead eyebrow={location.eyebrow} title={location.headline} />
-            <div className="mt-6 space-y-3 text-[14px] leading-relaxed text-zinc-600">
-              <p>{location.address}</p>
-              <p className="text-zinc-500">{location.hoursText}</p>
+            <h2 className="font-display text-balance text-[2.25rem] leading-[1.08] sm:text-[3rem]">{location.headline}</h2>
+            <div className="mt-6 space-y-2 text-[15px] leading-relaxed text-[var(--cream-2)]">
+              <p className="text-[var(--cream)]">{location.address}</p>
+              <p>{location.hoursText}</p>
               <p>
-                <a href={`tel:${location.phone}`} className="font-medium text-brand">{location.phone}</a>{" "}·{" "}
-                <a href={`mailto:${location.email}`} className="text-zinc-600 hover:text-zinc-900">{location.email}</a>
+                <a href={`tel:${location.phone}`} className="text-[var(--cream)] underline-offset-4 hover:underline">
+                  {location.phone}
+                </a>{" "}
+                · <a href={`mailto:${location.email}`} className="underline-offset-4 hover:underline">{location.email}</a>
               </p>
-              <a href="#reserve" className="mt-2 inline-flex items-center rounded-full bg-zinc-900 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-zinc-700">
-                {siteConfig.hero.ctaLabel}
-              </a>
             </div>
+            <a href="#reserve" className="mt-8 inline-flex items-center rounded-full border border-white/25 px-5 py-2.5 text-[14px] font-medium transition-colors hover:bg-white/10">
+              {hero.ctaLabel}
+            </a>
           </div>
           {location.mapEmbedUrl ? (
-            <iframe title="Map" src={location.mapEmbedUrl} className="h-64 w-full rounded-2xl border border-zinc-200" loading="lazy" />
+            <iframe title="Map" src={location.mapEmbedUrl} className="h-72 w-full rounded-[6px] border border-white/10 grayscale" loading="lazy" />
           ) : (
-            <div className="grid h-64 place-items-center rounded-2xl border border-zinc-200 bg-paper text-sm text-zinc-400">
-              Drop a Google Maps embed URL in <code className="mx-1">location.mapEmbedUrl</code>
+            <div className="grid h-72 place-items-center rounded-[6px] border border-white/10 bg-[var(--ink-2)] text-[13px] text-[var(--cream-2)]">
+              Set <code className="mx-1 font-mono">location.mapEmbedUrl</code> to show a map here
             </div>
           )}
         </div>
@@ -161,34 +184,34 @@ export default function LandingPage() {
 
       {/* FAQ */}
       {faq && faq.items.length > 0 ? (
-        <>
-          <Divider />
-          <section className={`${WRAP} py-14`}>
-            <Eyebrow>{faq.eyebrow}</Eyebrow>
-            <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">{faq.headline}</h2>
-            <div className="mt-8 divide-y divide-zinc-200/70 border-y border-zinc-200/70">
+        <section className="border-t border-white/10">
+          <div className={`${WRAP} py-16`}>
+            <h2 className="font-display text-[2rem] leading-[1.1]">{faq.headline}</h2>
+            <div className="mt-8 max-w-3xl divide-y divide-white/10 border-y border-white/10">
               {faq.items.map((f) => (
                 <details key={f.q} className="group py-5">
-                  <summary className="flex cursor-pointer items-center justify-between text-[15px] font-medium text-zinc-900 marker:hidden [&::-webkit-details-marker]:hidden">
+                  <summary className="flex cursor-pointer items-center justify-between text-[16px] font-medium marker:hidden [&::-webkit-details-marker]:hidden">
                     {f.q}
                     <span className="text-brand transition-transform group-open:rotate-45">+</span>
                   </summary>
-                  <p className="mt-3 max-w-2xl text-[14px] leading-relaxed text-zinc-500">{f.a}</p>
+                  <p className="mt-3 max-w-2xl text-[14.5px] leading-relaxed text-[var(--cream-2)]">{f.a}</p>
                 </details>
               ))}
             </div>
-          </section>
-        </>
+          </div>
+        </section>
       ) : null}
     </div>
   );
 }
 
-function QuickFact({ label, value }: { label: string; value: string }) {
-  return (
-    <div>
-      <dt className="text-[11px] font-medium uppercase tracking-wide text-zinc-400">{label}</dt>
-      <dd className="mt-1 text-[13.5px] font-medium text-zinc-900">{value}</dd>
-    </div>
-  );
+function hoursLabel(h: DayHours): string {
+  if (!h) return "Closed";
+  return `${clock(h.open)} – ${clock(h.close)}`;
+}
+
+function clock(t: string): string {
+  const [hh, mm] = t.split(":").map(Number);
+  const h12 = ((hh + 11) % 12) + 1;
+  return `${h12}${mm ? `:${String(mm).padStart(2, "0")}` : ""}${hh < 12 ? "am" : "pm"}`;
 }

package/templates/restaurant/app/globals.css

@@ -19,6 +19,11 @@
   --brand: #4f46e5;
   --brand-soft: #eef2ff;
   --paper: #fafafa;
+  /* The marketing pages: a dark room, cream type. Set from lib/site.config.ts. */
+  --ink: #151311;
+  --ink-2: #1f1b18;
+  --cream: #f3ede4;
+  --cream-2: #cfc4b4;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -153,3 +158,9 @@
     cursor: pointer;
   }
 }
+
+/* Headlines and menu section names. Fraunces is declared in app.ts. */
+.font-display {
+  font-family: var(--font-display, "Iowan Old Style", "Palatino Linotype", Georgia, serif);
+  font-optical-sizing: auto;
+}

package/templates/restaurant/app/layout.tsx

@@ -21,6 +21,7 @@ export default function RootLayout({ children }: LayoutProps) {
           "--brand": colors.brand,
           "--brand-soft": colors.brandSoft,
           "--paper": colors.paper,
+          "--ink": colors.ink,
         } as React.CSSProperties
       }
     >

package/templates/restaurant/app.ts

@@ -127,6 +127,16 @@ const manifest = buildManifest({
       display: "swap",
       preload: true,
     }),
+    // The display face for headlines and menu section names.
+    font({
+      family: "Fraunces",
+      variable: "--font-display",
+      weights: ["400", "500", "600"],
+      styles: ["normal", "italic"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
   ],
   routes: await discoverAppRoutes(),
 });

package/templates/restaurant/components/marketing.tsx

@@ -107,11 +107,14 @@ export function ImagePlaceholder({
   shape = "landscape",
   title,
   hint,
+  src,
   className = "",
 }: {
   shape?: "landscape" | "portrait" | "square" | "circle";
   title: string;
   hint?: string;
+  /** A real image. The template ships one under public/images; swap it for yours. */
+  src?: string;
   className?: string;
 }) {
   const aspect =
@@ -121,6 +124,13 @@ export function ImagePlaceholder({
         ? "aspect-square"
         : "aspect-[4/3]";
   const radius = shape === "circle" ? "rounded-full" : "rounded-2xl";
+  if (src) {
+    return (
+      <div className={`relative overflow-hidden bg-zinc-100 ${aspect} ${radius} ${className}`}>
+        <img src={src} alt={title} className="absolute inset-0 size-full object-cover" loading="lazy" />
+      </div>
+    );
+  }
   return (
     <div
       className={`relative grid place-items-center overflow-hidden border-2 border-dashed border-zinc-300 bg-zinc-50 ${aspect} ${radius} ${className}`}

package/templates/restaurant/lib/site.config.ts

@@ -19,7 +19,7 @@ export type BaseConfig = {
     copyrightName: string;
     socials: Social[];
   };
-  colors: { brand: string; brandSoft: string; paper: string };
+  colors: { brand: string; brandSoft: string; paper: string; ink: string };
   seo: { title: string; description: string };
 };
 
@@ -31,16 +31,18 @@ export type Faq = { q: string; a: string };
 
 export type RestaurantConfig = BaseConfig & {
   hero: {
-    tagline: string;
     headline: string;
     subcopy: string;
     ctaLabel: string;
     quickFacts: { hours: string; area: string; phone: string };
+    /** Full-bleed photo behind the hero. Ships as public/images/hero.jpg. */
+    image: string;
   };
-  menu: { eyebrow: string; headline: string; sections: MenuSection[] };
+  /** The photo band under the hero: public/images/*.jpg with a caption each. */
+  gallery: Array<{ src: string; caption: string }>;
+  menu: { headline: string; sections: MenuSection[] };
   reservations: {
     enabled: boolean;
-    eyebrow: string;
     headline: string;
     subcopy: string;
     slotMinutes: number; // gap between seatings, e.g. 30
@@ -51,9 +53,8 @@ export type RestaurantConfig = BaseConfig & {
     hours: Record<number, DayHours>; // 0=Sun … 6=Sat; null = closed
     confirmationMessage: string;
   };
-  reviews?: { eyebrow: string; headline: string; items: Review[] };
+  reviews?: { headline: string; items: Review[] };
   location: {
-    eyebrow: string;
     headline: string;
     address: string;
     mapEmbedUrl?: string;
@@ -61,7 +62,7 @@ export type RestaurantConfig = BaseConfig & {
     phone: string;
     email: string;
   };
-  faq?: { eyebrow: string; headline: string; items: Faq[] };
+  faq?: { headline: string; items: Faq[] };
 };
 
 /* ----------------------------- config ---------------------------- */
@@ -84,7 +85,7 @@ export const siteConfig: RestaurantConfig = {
     ],
   },
 
-  colors: { brand: "#9f1239", brandSoft: "#ffe4e6", paper: "#fbf7f5" },
+  colors: { brand: "#c2571a", brandSoft: "#3a2418", paper: "#f3ede4", ink: "#151311" },
 
   seo: {
     title: "Cedar & Vine — a seasonal bistro in Dallas. Reserve a table.",
@@ -93,7 +94,6 @@ export const siteConfig: RestaurantConfig = {
   },
 
   hero: {
-    tagline: "Dallas · Bishop Arts",
     headline: "A table by the fire, whenever you're ready.",
     subcopy:
       "Seasonal small plates, wood-fired mains, and a short natural-wine list. The reservation calendar shows current table availability.",
@@ -103,10 +103,16 @@ export const siteConfig: RestaurantConfig = {
       area: "Bishop Arts, Dallas",
       phone: "(214) 555-0172",
     },
+    image: "/images/hero.jpg",
   },
 
+  gallery: [
+    { src: "/images/hearth.jpg", caption: "The hearth" },
+    { src: "/images/branzino.jpg", caption: "Wood-fired branzino" },
+    { src: "/images/bar.jpg", caption: "The bar" },
+  ],
+
   menu: {
-    eyebrow: "Menu",
     headline: "Short, seasonal, wood-fired.",
     sections: [
       {
@@ -139,7 +145,6 @@ export const siteConfig: RestaurantConfig = {
 
   reservations: {
     enabled: true,
-    eyebrow: "Reserve",
     headline: "Find a table that's open.",
     subcopy:
       "Pick a date, time, and party size from the live table calendar. We'll hold the reservation for you.",
@@ -162,7 +167,6 @@ export const siteConfig: RestaurantConfig = {
   },
 
   reviews: {
-    eyebrow: "Reviews",
     headline: "Regulars keep coming back.",
     items: [
       {
@@ -187,7 +191,6 @@ export const siteConfig: RestaurantConfig = {
   },
 
   location: {
-    eyebrow: "Visit",
     headline: "Find us in Bishop Arts.",
     address: "412 N Bishop Ave, Dallas, TX 75208",
     mapEmbedUrl: "",
@@ -197,7 +200,6 @@ export const siteConfig: RestaurantConfig = {
   },
 
   faq: {
-    eyebrow: "Questions",
     headline: "Good to know.",
     items: [
       {

package/templates/saas/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/shop/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/todo/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/waitlist/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