@pylonsync/create-pylon 0.19.0 → 0.20.0

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

@@ -1,21 +1,26 @@
-// Business-specific copy and settings live here. The landing page and layout
-// read this file. The product list, including starting stock, seeds the Product table on
-// first visit; after that, stock lives in the database and updates live.
+// Business-specific copy and settings live here. The storefront pages and
+// layout read this file. The product list, including starting stock, seeds the
+// Product table on first visit; after that, stock lives in the database and
+// updates live.
 //
 // Colors live here (applied as CSS variables on <html> in app/layout.tsx).
 // Fictional demo copy. Replace the values and keep the shape.
 
 /* ----------------------------- types ----------------------------- */
 
+import type { ShippingTerms } from "./shop";
+
 export type Social = { label: string; href: string; path: string };
 
 export type BaseConfig = {
   brand: {
     name: string;
-    letter: string;
+    letter: string; // the monogram on the sign-in and dashboard screens
     domain: string;
     email: string;
+    announcement: string;
     footerBlurb: string;
+    address: string[];
     copyrightName: string;
     socials: Social[];
   };
@@ -28,21 +33,29 @@ export type ProductItem = {
   name: string;
   priceCents: number;
   description?: string;
-  image: string; // a product photo URL/path → shown as the photo; or an emoji stand-in (tagged "sample image")
-  stock: number; // STARTING stock — seeded once, then live in the DB
+  size?: string; // one short line under the name, e.g. "8 oz, 60-hour burn"
+  image: string; // a product photo URL or /public path (4:5 portrait works best)
+  stock: number; // STARTING stock, seeded once, then live in the DB
 };
 
-export type ValueProp = { title: string; body: string; icon?: string };
-export type Review = { quote: string; name: string; rating?: number };
+export type Fact = { value: string; label: string };
+export type Review = { quote: string; name: string; product?: string };
 export type Policy = { title: string; body: string };
 
 export type ShopConfig = BaseConfig & {
-  hero: { tagline: string; headline: string; subcopy: string; ctaLabel: string };
-  products: { eyebrow: string; headline: string; items: ProductItem[] };
-  checkout: { confirmationMessage: string };
-  valueProps: { eyebrow: string; headline: string; items: ValueProp[] };
-  reviews?: { eyebrow: string; headline: string; items: Review[] };
-  policies: { eyebrow: string; headline: string; items: Policy[] };
+  hero: {
+    headline: string;
+    subcopy: string;
+    ctaLabel: string;
+    secondaryLabel: string;
+    image: string;
+    imageAlt: string;
+  };
+  products: { headline: string; subcopy: string; items: ProductItem[] };
+  studio: { headline: string; body: string[]; facts: Fact[] };
+  checkout: { shipping: ShippingTerms; reservedMessage: string; paidMessage: string; image: string };
+  reviews?: { headline: string; items: Review[] };
+  policies: { headline: string; items: Policy[] };
 };
 
 /* ----------------------------- config ---------------------------- */
@@ -53,145 +66,142 @@ export const siteConfig: ShopConfig = {
     letter: "E",
     domain: "embergoods.com",
     email: "hello@embergoods.example",
-    footerBlurb:
-      "Hand-poured candles and small-batch home goods, made in Dallas. Slow, simple, and built to last. Free shipping over $50.",
+    announcement: "Free shipping on orders over $50. Ships from Dallas in two business days.",
+    footerBlurb: "Candles poured by hand in small batches in Dallas, Texas.",
+    address: ["2809 Elm Street", "Dallas, TX 75226", "Studio open Saturdays, 10 to 4"],
     copyrightName: "Ember Goods",
     socials: [
       {
         label: "Instagram",
         href: "https://instagram.com",
-        path: "M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s0 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.2 15.58 2.2 15.2 2.2 12s0-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.2 8.8 2.2 12 2.2zm0 1.8c-3.15 0-3.5 0-4.74.07-.9.04-1.38.19-1.7.32-.43.16-.74.36-1.06.68-.32.32-.52.63-.68 1.06-.13.32-.28.8-.32 1.7C3.8 8.5 3.8 8.85 3.8 12s0 3.5.07 4.74c.04.9.19 1.38.32 1.7.16.43.36.74.68 1.06.32.32.63.52 1.06.68.32.13.8.28 1.7.32 1.24.07 1.59.07 4.74.07s3.5 0 4.74-.07c.9-.04 1.38-.19 1.7-.32.43-.16.74-.36 1.06-.68.32-.32.52-.63.68-1.06.13-.32.28-.8.32-1.7.07-1.24.07-1.59.07-4.74s0-3.5-.07-4.74c-.04-.9-.19-1.38-.32-1.7a2.85 2.85 0 0 0-.68-1.06 2.85 2.85 0 0 0-1.06-.68c-.32-.13-.8-.28-1.7-.32C15.5 4 15.15 4 12 4zm0 3.06A4.94 4.94 0 1 0 12 16.94 4.94 4.94 0 0 0 12 7.06zm0 8.15A3.21 3.21 0 1 1 12 8.8a3.21 3.21 0 0 1 0 6.4zm6.3-8.35a1.15 1.15 0 1 1-2.3 0 1.15 1.15 0 0 1 2.3 0z",
-      },
+        path: "M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s0 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.2 15.58 2.2 15.2 2.2 12s0-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.2 8.8 2.2 12 2.2zm0 1.8c-3.15 0-3.5 0-4.74.07-.9.04-1.38.19-1.7.32-.43.16-.74.36-1.06.68-.32.32-.52.63-.68 1.06-.13.32-.28.8-.32 1.7C3.8 8.5 3.8 8.85 3.8 12s0 3.5.07 4.74c.04.9.19 1.38.32 1.7.16.43.36.74.68 1.06.32.32.63.52 1.06.68.32.13.8.28 1.7.32 1.24.07 1.59.07 4.74.07s3.5 0 4.74-.07c.9-.04 1.38-.19 1.7-.32.43-.16.74-.36 1.06-.68.32-.32.52-.63.68-1.06.13-.32.28-.8.32-1.7.07-1.24.07-1.59.07-4.74s0-3.5-.07-4.74c-.04-.9-.19-1.38-.32-1.7a2.85 2.85 0 0 0-.68-1.06 2.85 2.85 0 0 0-1.06-.68c-.32-.13-.8-.28-1.7-.32C15.5 4 15.15 4 12 4zm0 3.06A4.94 4.94 0 1 0 12 16.94 4.94 4.94 0 0 0 12 7.06zm0 8.15A3.21 3.21 0 1 1 12 8.8a3.21 3.21 0 0 1 0 6.4zm6.3-8.35a1.15 1.15 0 1 1-2.3 0 1.15 1.15 0 0 1 2.3 0z",      },
     ],
   },
 
-  colors: { brand: "#9a3412", brandSoft: "#ffedd5", paper: "#faf8f5" },
+  colors: { brand: "#8b4a2b", brandSoft: "#efe3d6", paper: "#e9e1d5" },
 
   seo: {
-    title: "Ember Goods — hand-poured candles, made in Dallas.",
+    title: "Ember Goods: candles poured by hand in Dallas",
     description:
-      "Small-batch candles and home goods, hand-poured in Dallas. Stock counts match the studio shelf. Free shipping over $50.",
+      "Small-batch candles poured in Dallas. Soy and coconut wax, cotton wicks, 60-hour burn. Stock counts match the studio shelf. Free shipping over $50.",
   },
 
   hero: {
-    tagline: "Small batch · Made in Dallas",
-    headline: "Hand-poured candles, made to last.",
+    headline: "Candles poured by hand in Dallas.",
     subcopy:
-      "We pour everything by hand in small batches, so quantities are real and limited. The stock you see below is exactly what's on the studio shelf right now.",
-    ctaLabel: "Shop the shelf",
+      "Soy and coconut wax, cotton wicks, and scents we blend ourselves. We pour forty at a time, so the stock counts are the real shelf.",
+    ctaLabel: "Shop candles",
+    secondaryLabel: "See the studio",
+    image: "/images/hero.jpg",
+    imageAlt: "Three amber glass candles on a travertine shelf, the middle one lit, in late afternoon light.",
   },
 
   products: {
-    eyebrow: "The shelf",
-    headline: "What's in the studio right now.",
+    headline: "The shelf",
+    subcopy: "Stock updates live. When a batch sells out, it is gone until the next pour.",
     items: [
+      {
+        slug: "tobacco-oak",
+        name: "Tobacco & Oak",
+        priceCents: 4200,
+        description: "Cured tobacco leaf, oak barrel, and amber. Our darkest scent, poured once a season.",
+        size: "8 oz, 60-hour burn",
+        image: "/images/products/tobacco-oak.jpg",
+        stock: 2,
+      },
       {
         slug: "cedar-smoke",
         name: "Cedar & Smoke",
-        priceCents: 3200,
-        description: "Cedarwood, smoked vanilla, a little leather. 60-hour burn.",
-        image: "🕯️",
+        priceCents: 3800,
+        description: "Cedarwood, smoked vanilla, and a little leather.",
+        size: "8 oz, 60-hour burn",
+        image: "/images/products/cedar-smoke.jpg",
         stock: 8,
       },
       {
         slug: "linen",
-        name: "Fresh Linen",
-        priceCents: 3200,
-        description: "Clean cotton and white musk. The everyday one.",
-        image: "🤍",
+        name: "Linen",
+        priceCents: 3800,
+        description: "Clean cotton, white musk, and iris.",
+        size: "8 oz, 60-hour burn",
+        image: "/images/products/linen.jpg",
         stock: 3,
       },
       {
-        slug: "brass-holder",
-        name: "Brass matchstick holder",
-        priceCents: 2400,
-        description: "Solid brass, striker on the base. Ages beautifully.",
-        image: "🟫",
-        stock: 12,
+        slug: "fig-leaf",
+        name: "Fig Leaf",
+        priceCents: 3800,
+        description: "Green fig, cedar, and coconut.",
+        size: "8 oz, 60-hour burn",
+        image: "/images/products/fig-leaf.jpg",
+        stock: 11,
       },
       {
-        slug: "ceramic-vessel",
-        name: "Ceramic vessel candle",
-        priceCents: 4800,
-        description: "Hand-thrown stoneware you'll keep long after the wax.",
-        image: "🏺",
-        stock: 5,
-      },
-      {
-        slug: "wick-trimmer",
-        name: "Wick trimmer",
-        priceCents: 1800,
-        description: "The one tool that makes a candle last. Matte black.",
-        image: "✂️",
-        stock: 0,
-      },
-      {
-        slug: "gift-set",
-        name: "The trio gift set",
-        priceCents: 8400,
-        description: "Three minis, boxed and ready to give.",
-        image: "🎁",
-        stock: 6,
+        slug: "sea-salt",
+        name: "Sea Salt & Sage",
+        priceCents: 3800,
+        description: "Salt air, sage, and driftwood.",
+        size: "8 oz, 60-hour burn",
+        image: "/images/products/sea-salt.jpg",
+        stock: 9,
       },
     ],
   },
 
-  checkout: {
-    confirmationMessage:
-      "Order placed! We'll email you a payment link and ship within two business days.",
+  studio: {
+    headline: "Poured in small batches, cured for two weeks.",
+    body: [
+      "Every candle is poured, cured, and trimmed by hand in our studio in Deep Ellum. We use a soy and coconut wax blend, cotton wicks, and phthalate-free fragrance oils.",
+      "Each batch cures for fourteen days before it goes on the shelf, so the scent carries across the room from the first burn.",
+    ],
+    facts: [
+      { value: "40", label: "candles per batch" },
+      { value: "14 days", label: "cure before sale" },
+      { value: "60 hr", label: "burn time, 8 oz" },
+    ],
   },
 
-  valueProps: {
-    eyebrow: "Why Ember",
-    headline: "Made slow, on purpose.",
-    items: [
-      {
-        icon: "◍",
-        title: "Hand-poured",
-        body: "Every candle is poured, wicked, and labelled by hand in our Dallas studio.",
-      },
-      {
-        icon: "◇",
-        title: "Real small batch",
-        body: "We make what we can do well. When the shelf says 3 left, there are 3 left.",
-      },
-      {
-        icon: "✦",
-        title: "Free shipping over $50",
-        body: "Carbon-neutral shipping, plastic-free packaging, and easy returns.",
-      },
-    ],
+  checkout: {
+    shipping: { flatCents: 600, freeOverCents: 5000 },
+    reservedMessage:
+      "We are holding your items and will email a payment link within one business day. Orders ship from Dallas within two business days of payment.",
+    paidMessage:
+      "Your payment went through and the receipt is on its way to your inbox. Orders ship from Dallas within two business days.",
+    image: "/images/products/tobacco-oak.jpg", // shown on /success
   },
 
   reviews: {
-    eyebrow: "Reviews",
-    headline: "What people say.",
+    headline: "Reviews",
     items: [
       {
-        quote: "Cedar & Smoke is the best candle I've ever bought, full stop. The brass holder is gorgeous too.",
+        quote: "Cedar & Smoke fills the whole living room without being loud about it. On my third one.",
         name: "Maya C.",
-        rating: 5,
+        product: "Cedar & Smoke",
       },
       {
-        quote: "Ordered the gift set for my mom. Beautiful packaging and it arrived in two days. Will reorder.",
+        quote: "Bought Linen for my mom. It arrived in two days, packed in paper, no plastic anywhere.",
         name: "Daniel R.",
-        rating: 5,
+        product: "Linen",
       },
       {
-        quote: "You can tell these are made by hand. The ceramic vessel is on my shelf forever now.",
+        quote: "Fig Leaf burned evenly all the way to the bottom of the jar. I kept the jar for pens.",
         name: "Hannah K.",
-        rating: 5,
+        product: "Fig Leaf",
       },
     ],
   },
 
   policies: {
-    eyebrow: "Good to know",
-    headline: "Shipping & returns.",
+    headline: "Shipping and returns",
     items: [
-      { title: "Shipping", body: "Ships in 2 business days from Dallas. Free over $50, $6 flat otherwise." },
-      { title: "Returns", body: "Unused and unburned? Return within 30 days for a full refund." },
-      { title: "Wholesale", body: "Run a shop? Email us for the line sheet and wholesale pricing." },
+      { title: "Shipping", body: "Ships from Dallas in two business days. Free over $50, $6 flat otherwise." },
+      { title: "Returns", body: "Return unused and unburned items within 30 days for a full refund." },
+      { title: "Local pickup", body: "Pick up at the studio on Saturdays. Reply to your order email to switch to pickup." },
+      { title: "Wholesale", body: "Email us for the line sheet and wholesale pricing." },
     ],
   },
 };
+
+export function productBySlug(slug: string): ProductItem | undefined {
+  return siteConfig.products.items.find((p) => p.slug === slug);
+}

package/templates/shop/tests/shop.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, test } from "bun:test";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { formatPrice, freeShippingRemaining, shippingCents, stockStatus } from "../lib/shop";
+import { productBySlug, siteConfig } from "../lib/site.config";
+
+const terms = { flatCents: 600, freeOverCents: 5000 };
+
+describe("stockStatus", () => {
+  test("zero or less is sold out", () => {
+    expect(stockStatus(0)).toEqual({ kind: "sold_out", label: "Sold out" });
+    expect(stockStatus(-2).kind).toBe("sold_out");
+  });
+
+  test("three or fewer is low", () => {
+    expect(stockStatus(1)).toEqual({ kind: "low", label: "Last one" });
+    expect(stockStatus(3)).toEqual({ kind: "low", label: "Only 3 left" });
+  });
+
+  test("more than three shows the count", () => {
+    expect(stockStatus(4)).toEqual({ kind: "in_stock", label: "4 in stock" });
+  });
+});
+
+describe("shipping", () => {
+  test("flat rate below the threshold", () => {
+    expect(shippingCents(4999, terms)).toBe(600);
+    expect(freeShippingRemaining(3800, terms)).toBe(1200);
+  });
+
+  test("free at and above the threshold", () => {
+    expect(shippingCents(5000, terms)).toBe(0);
+    expect(freeShippingRemaining(8400, terms)).toBe(0);
+  });
+});
+
+test("formatPrice drops zero cents", () => {
+  expect(formatPrice(3800)).toBe("$38");
+  expect(formatPrice(1850)).toBe("$18.50");
+});
+
+describe("catalog config", () => {
+  const items = siteConfig.products.items;
+
+  test("slugs are unique", () => {
+    expect(new Set(items.map((p) => p.slug)).size).toBe(items.length);
+  });
+
+  test("productBySlug finds a product and misses an unknown slug", () => {
+    expect(productBySlug(items[0].slug)?.name).toBe(items[0].name);
+    expect(productBySlug("nope")).toBeUndefined();
+  });
+
+  // Every local image the storefront references must ship in public/.
+  test("every local image exists in public/", () => {
+    const paths = [
+      siteConfig.hero.image,
+      siteConfig.checkout.image,
+      ...items.map((p) => p.image),
+    ].filter((src) => src.startsWith("/"));
+    const missing = paths.filter((src) => !existsSync(join(import.meta.dir, "..", "public", src)));
+    expect(missing).toEqual([]);
+  });
+});

package/templates/waitlist/.env.example

@@ -10,3 +10,10 @@ PYLON_OWNER_EMAIL=you@yourbusiness.com
 # ── Site URL (optional) ──────────────────────────────────────────────────────
 # Used by robots.txt + sitemap.xml. Point it at your real domain in production.
 # SITE_URL=https://yourbusiness.com
+
+# ── Demo data ────────────────────────────────────────────────────────────────
+# `pylon dev` fills an empty waitlist with fictional signups. Seeding runs only
+# under `pylon dev` (it checks PYLON_DEV_MODE and PYLON_DEV_WATCH_DIR), so
+# `pylon start`, Docker, and Pylon Cloud deploys never seed. Set 0 to start
+# empty in development. Never set 1 on a deploy.
+# PYLON_DEMO_DATA=0

package/templates/waitlist/README.md

@@ -18,14 +18,24 @@ increment in another without refreshing.
 ## How the realtime works
 
 - `functions/joinWaitlist.ts`: a public **mutation** that validates, lowercases,
-  and dedupes the email, then inserts one `Signup` row. The insert fires a
-  change event.
-- `functions/waitlistCount.ts`: a public **query** the landing page subscribes
-  to with `db.useReactiveQuery`. The server records that it read the `Signup`
-  table, so every new signup re-runs it and pushes the fresh count to every open
-  tab. No polling.
-- The counter island (`app/waitlist-hero.tsx`) is wrapped in `<EnsureGuest>`,
-  which mints an anonymous session so the live WebSocket can connect.
+  and dedupes the email, inserts one `Signup` row, and rewrites the PII-free
+  `WaitlistStat` row with the new count.
+- The landing page reads `WaitlistStat` with `db.useQuery`. The row syncs to
+  every open tab, so the counter moves as soon as anyone joins. No polling.
+- The counter island (`app/(marketing)/waitlist-hero.tsx`) is wrapped in
+  `<EnsureGuest>`, which mints an anonymous session so the live connection can
+  open.
+
+The counter is the `Signup` table's row count. `counter.importedCount` in
+`lib/site.config.ts` adds signups you collected somewhere else before this site
+(an old form, a spreadsheet). It ships as 0.
+
+## Demo data
+
+In `pylon dev`, an empty waitlist gets about 180 fictional signups from the last
+30 days, so the counter, chart, and list have data (`functions/seedDemo.ts`,
+`lib/demo.ts`). Seeding runs only when `PYLON_DEMO_DATA` is on, or when it is unset and the app runs under `pylon dev`, and only while the `Signup` table is empty. `pylon start`, Docker, and Pylon Cloud deploys do not seed, because only `pylon dev` sets `PYLON_DEV_WATCH_DIR`. Set `PYLON_DEMO_DATA=0` to start
+empty in development. Delete both files once you have real signups.
 
 ## Privacy
 
@@ -47,22 +57,28 @@ account can see signups; anyone else gets a locked screen.
 
 ## Rebrand it
 
-Brand, colors, hero copy, value props, social proof, and FAQ content live in
+Brand, colors, hero copy, the launch date, value props, and FAQ content live in
 **`lib/site.config.ts`**. Edit or generate that file to update the page without
 changing JSX or CSS.
 
+The tab icon is `app/icon.svg` (with `public/favicon.ico` for browsers that
+request `/favicon.ico`). Both carry this brand's letter and colors; replace
+them when you rename the brand.
+
 ## Layout
 
 ```
 app.ts                       data model + manifest (Signup, User, policies, auth)
 lib/site.config.ts           ALL business copy + brand + colors (edit this)
 lib/owner.ts                 owner-email gate (PYLON_OWNER_EMAIL)
-lib/stats.ts                 shared dashboard-stats types
+lib/stats.ts                 dashboard types + the public count
+lib/launch.ts                the launch line from hero.launchDate
+lib/demo.ts                  demo signups + the dev-only gate
 functions/joinWaitlist.ts    public mutation: validate + dedupe + insert
-functions/waitlistCount.ts   public reactive query: the live counter
+functions/seedDemo.ts        dev-only demo signups (see Demo data)
 functions/waitlistStats.ts   owner-only reactive query: total + chart + list
-app/page.tsx                 the landing page (server-rendered)
-app/waitlist-hero.tsx        client island: signup form + live counter
+app/(marketing)/page.tsx     the landing page (server-rendered)
+app/(marketing)/waitlist-hero.tsx  client island: signup form + live counter
 app/login/page.tsx           owner sign-in
 app/dashboard/               owner dashboard (auth-gated, live)
 app/globals.css              Tailwind entrypoint (compiled by Pylon)

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

@@ -3,6 +3,7 @@ import { type Metadata } from "@pylonsync/react";
 import { WRAP, FactList, ProductMock } from "@/components/marketing";
 import { SignupForm, LiveCount } from "./waitlist-hero";
 import { siteConfig } from "@/lib/site.config";
+import { launchLabel } from "@/lib/launch";
 
 // SEO metadata: server-rendered into <head>, so the page is fully indexable.
 // All copy lives in lib/site.config.ts; edit it there to rebrand.
@@ -25,6 +26,7 @@ export const metadata: Metadata = {
 // Signed-in state (the nav's "Dashboard" link) is resolved in the layout.
 export default function LandingPage() {
   const { hero, counter, mock, facts, faq } = siteConfig;
+  const launch = launchLabel(hero.launchDate, Date.now());
 
   return (
     <div>
@@ -36,9 +38,14 @@ export default function LandingPage() {
           </h1>
           <p className="mt-6 max-w-md text-[17px] leading-relaxed text-chalk-2">{hero.subcopy}</p>
           <div className="mt-8 max-w-md">
-            <SignupForm hero={hero} />
+            <SignupForm hero={hero} showCountNote={counter.enabled} />
+          </div>
+          <div className="mt-8 flex flex-col gap-2 border-t border-line pt-5">
+            {counter.enabled ? (
+              <LiveCount importedCount={counter.importedCount} label={counter.label} labelOne={counter.labelOne} />
+            ) : null}
+            {launch ? <p className="font-mono-ui text-[13px] text-brand">{launch}</p> : null}
           </div>
-          <p className="font-mono-ui mt-6 text-[13px] text-brand">{hero.launchNote}</p>
         </div>
         <ProductMock
           windowTitle={mock.windowTitle}
@@ -56,11 +63,6 @@ export default function LandingPage() {
         <div className="mt-8">
           <FactList items={facts.items} />
         </div>
-        {counter.enabled ? (
-          <div className="mt-12 border-t border-line pt-5">
-            <LiveCount seed={counter.seedCount ?? 0} label={counter.label} />
-          </div>
-        ) : null}
       </section>
 
       {/* ============================== FAQ ============================= */}

package/templates/waitlist/app/(marketing)/waitlist-hero.tsx

@@ -4,9 +4,10 @@ import React, { useEffect, useRef, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { EnsureGuest } from "@pylonsync/client";
 import type { WaitlistConfig } from "@/lib/site.config";
+import { publicCount } from "@/lib/stats";
 
 // The two client islands on the landing page: the email-capture form (in the
-// hero) and the LIVE signup count (under the facts). The count is a live
+// hero) and the LIVE signup count (in the hero, under the form). The count is a live
 // `db.useQuery("WaitlistStat")` over the public, PII-free aggregate row, so
 // the moment anyone (this tab or another) submits an email, joinWaitlist
 // updates that row and the new count syncs to every open tab through the
@@ -20,7 +21,13 @@ import type { WaitlistConfig } from "@/lib/site.config";
 
 /* ----------------------------- signup form ---------------------------- */
 
-export function SignupForm({ hero }: { hero: WaitlistConfig["hero"] }) {
+export function SignupForm({
+  hero,
+  showCountNote,
+}: {
+  hero: WaitlistConfig["hero"];
+  showCountNote: boolean;
+}) {
   const [email, setEmail] = useState("");
   const [status, setStatus] = useState<"idle" | "sending" | "done">("idle");
   const [alreadyJoined, setAlreadyJoined] = useState(false);
@@ -57,9 +64,11 @@ export function SignupForm({ hero }: { hero: WaitlistConfig["hero"] }) {
         <p className="text-[15px] font-medium text-chalk">
           {alreadyJoined ? "You are already on the list." : hero.successMessage}
         </p>
-        <p className="mt-1 font-mono-ui text-[12px] text-chalk-2">
-          The count below went up for everyone.
-        </p>
+        {!alreadyJoined && showCountNote ? (
+          <p className="mt-1 font-mono-ui text-[12px] text-chalk-2">
+            The count below now includes you.
+          </p>
+        ) : null}
       </div>
     );
   }
@@ -76,7 +85,7 @@ export function SignupForm({ hero }: { hero: WaitlistConfig["hero"] }) {
           placeholder={hero.emailPlaceholder}
           aria-label="Email address"
           required
-          className="h-11 flex-1 rounded-md border border-line bg-paper px-3.5 text-[15px] text-chalk outline-none transition placeholder:text-chalk-2 focus:border-brand"
+          className="h-11 w-full min-w-0 rounded-md border border-line bg-paper sm:flex-1 px-3.5 text-[15px] text-chalk outline-none transition placeholder:text-chalk-2 focus:border-brand"
         />
         <button
           type="submit"
@@ -101,44 +110,68 @@ interface WaitlistStatRow {
   updatedAt: string;
 }
 
-export function LiveCount({ seed, label }: { seed: number; label: string }) {
+export function LiveCount({
+  importedCount,
+  label,
+  labelOne,
+}: {
+  importedCount: number;
+  label: string;
+  labelOne: string;
+}) {
   return (
-    <EnsureGuest fallback={<CountView value={seed} label={label} />}>
-      <LiveCountInner seed={seed} label={label} />
+    <EnsureGuest fallback={null}>
+      <LiveCountInner importedCount={importedCount} label={label} labelOne={labelOne} />
     </EnsureGuest>
   );
 }
 
-function LiveCountInner({ seed, label }: { seed: number; label: string }) {
-  // Live entity query over the public WaitlistStat row. `db.useQuery` re-renders
-  // the instant the row changes, in THIS tab and every other open tab, because
-  // the change syncs through the shared replica. `loading` is true until the
-  // first sync settles; until then we show the seed (never a flash of 0).
-  const { data, loading } = db.useQuery<WaitlistStatRow>("WaitlistStat");
-  const real = data.length > 0 ? data[0].count : 0;
-  const value = seed + real;
-  return <CountView value={value} label={label} live={!loading} />;
-}
-
-function CountView({
-  value,
+function LiveCountInner({
+  importedCount,
   label,
-  live,
+  labelOne,
 }: {
-  value: number;
+  importedCount: number;
   label: string;
-  live?: boolean;
+  labelOne: string;
 }) {
+  // Live entity query over the public WaitlistStat row. `db.useQuery` re-renders
+  // the instant the row changes, in this tab and every other open tab, because
+  // the change syncs through the shared replica.
+  const { data, loading } = db.useQuery<WaitlistStatRow>("WaitlistStat");
+
+  // In `pylon dev` an empty waitlist gets demo signups (functions/seedDemo.ts).
+  // The call goes out only when the synced list is empty, so a live site with
+  // signups never makes it.
+  useSeedWhenEmpty(!loading && data.length === 0);
+
+  // Nothing renders until the first sync settles or while the list is empty,
+  // so the page never shows a placeholder number or "0 people on the list".
+  if (loading) return null;
+  const value = publicCount(data, importedCount);
+  if (value === 0) return null;
+  return <CountView value={value} label={value === 1 ? labelOne : label} />;
+}
+
+function useSeedWhenEmpty(empty: boolean) {
+  const sent = useRef(false);
+  useEffect(() => {
+    if (!empty || sent.current) return;
+    sent.current = true;
+    void callFn("seedDemo", {}).catch(() => {});
+  }, [empty]);
+}
+
+function CountView({ value, label }: { value: number; label: string }) {
   const shown = useCountUp(value);
   return (
     <p className="flex items-center gap-3 font-mono-ui text-[14px] text-chalk-2">
-      <span
-        aria-hidden
-        className={live ? "size-2 rounded-full bg-brand" : "size-2 rounded-full bg-line"}
-      />
-      <span className="tabular-nums text-chalk">{shown.toLocaleString()}</span>
+      <span aria-hidden className="size-2 rounded-full bg-brand" />
+      <span className="tabular-nums text-chalk" data-testid="live-count">
+        {shown.toLocaleString("en-US")}
+      </span>
       <span>{label}</span>
-      <span className="text-[12px]">{live ? "live" : ""}</span>
+      <span className="text-[12px]">live</span>
     </p>
   );
 }