@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/creator/app/dashboard/dashboard-client.tsx

@@ -3,14 +3,14 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { useAuth } from "@pylonsync/client";
+import { Download, LogOut, Search } from "lucide-react";
 import type { SubscriberStatsData, SubscriberStatsResult, SubscriberRow } from "@/lib/stats";
 
-// The owner's live dashboard. Liveness rides the SAME public aggregate the
+// The owner's live dashboard. Liveness rides the same public aggregate the
 // landing page uses: `db.useQuery("SubscriberCount")` re-renders the instant the
-// count changes (cross-tab, via the replica). The emails themselves never sync
-// — they come from the owner-gated `subscriberStats` function, (re)fetched on
-// mount and whenever the live count ticks. So the total, chart, and list all
-// stay live, but PII only ever travels through the gated call.
+// count changes (cross-tab, via the replica). The emails themselves never sync.
+// They come from the owner-gated `subscriberStats` function, fetched on mount and
+// again whenever the live count changes, so PII only travels through that call.
 export function SubscriberDashboard({ userEmail }: { userEmail: string }) {
   const { data: statRows } = db.useQuery<{ id: string; count: number }>("SubscriberCount");
   const liveCount = statRows.length > 0 ? statRows[0].count : 0;
@@ -19,6 +19,12 @@ export function SubscriberDashboard({ userEmail }: { userEmail: string }) {
   const [denied, setDenied] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // In `pylon dev` an empty list gets demo subscribers (functions/seedDemo.ts).
+  // On a deploy the call returns without writing.
+  useEffect(() => {
+    void callFn("seedDemo", {}).catch(() => {});
+  }, []);
+
   useEffect(() => {
     let cancelled = false;
     callFn<SubscriberStatsResult>("subscriberStats", {})
@@ -46,7 +52,7 @@ export function SubscriberDashboard({ userEmail }: { userEmail: string }) {
   if (denied) return <OwnerOnly email={userEmail} />;
   if (error) {
     return (
-      <div className="rounded-xl border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-700">
+      <div className="rounded-lg border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-700">
         {error}
       </div>
     );
@@ -54,16 +60,27 @@ export function SubscriberDashboard({ userEmail }: { userEmail: string }) {
   if (!data) return <Skeleton />;
 
   return (
-    <div className="space-y-8">
-      <div>
-        <h1 className="text-xl font-semibold tracking-tight">Subscribers</h1>
-        <p className="mt-1 text-sm text-zinc-500">
-          Live — new subscribers appear here the moment they sign up.
+    <div className="space-y-10">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h1 className="text-[2.25rem] font-medium leading-none text-ink">
+            Subscribers
+          </h1>
+          <p className="mt-3 text-[16px] text-ink-2">
+            New subscribers appear here as they sign up. Your site shows the same total.
+          </p>
+        </div>
+        <p className="flex items-center gap-2 text-[13px] text-ink-2">
+          <span className="relative flex size-2">
+            <span className="absolute inline-flex size-2 animate-ping rounded-full bg-brand/60" />
+            <span className="relative inline-flex size-2 rounded-full bg-brand" />
+          </span>
+          live
         </p>
       </div>
 
-      <div className="grid gap-4 sm:grid-cols-3">
-        <Stat label="Total subscribers" value={data.total} />
+      <div className="grid gap-px overflow-hidden rounded-lg border border-rule bg-rule grid-cols-3">
+        <Stat label="Subscribers" value={data.total} />
         <Stat label="Last 7 days" value={data.last7} />
         <Stat label="Today" value={data.today} />
       </div>
@@ -77,12 +94,10 @@ export function SubscriberDashboard({ userEmail }: { userEmail: string }) {
 
 function Stat({ label, value }: { label: string; value: number }) {
   return (
-    <div className="rounded-xl border border-zinc-200 bg-white p-4">
-      <div className="text-[11px] font-medium uppercase tracking-wide text-zinc-400">
-        {label}
-      </div>
-      <div className="mt-1 text-2xl font-semibold tabular-nums text-zinc-900">
-        {value.toLocaleString()}
+    <div className="bg-white px-3 py-4 sm:px-5 sm:py-5">
+      <div className="text-[13px] text-ink-2">{label}</div>
+      <div className="mt-2 text-[1.75rem] sm:text-[2.25rem] font-medium leading-none tabular-nums text-ink">
+        {value.toLocaleString("en-US")}
       </div>
     </div>
   );
@@ -92,121 +107,145 @@ function Stat({ label, value }: { label: string; value: number }) {
 
 function TrendChart({ daily }: { daily: { date: string; count: number }[] }) {
   const max = Math.max(1, ...daily.map((d) => d.count));
+  const total = daily.reduce((n, d) => n + d.count, 0);
   return (
-    <div className="rounded-xl border border-zinc-200 bg-white p-5">
-      <div className="flex items-center justify-between">
-        <h2 className="text-sm font-semibold text-zinc-900">Last 30 days</h2>
-        <span className="text-[12px] text-zinc-400">
-          peak {max.toLocaleString()}/day
+    <section className="rounded-lg border border-rule bg-white p-5 sm:p-6">
+      <div className="flex items-baseline justify-between gap-4">
+        <h2 className="text-[19px] font-medium text-ink">Last 30 days</h2>
+        <span className="text-[13px] text-ink-2">
+          {total.toLocaleString("en-US")} new · peak {max}/day
         </span>
       </div>
-      {/* Each column is a FULL-HEIGHT flex cell (h-full) that bottom-aligns its
-          bar — so the bar's percentage height resolves against the 7rem track,
-          not an auto-height parent (which would collapse it to nothing). */}
-      <div className="mt-4 flex h-28 items-end gap-1">
-        {daily.map((d) => (
-          <div
-            key={d.date}
-            className="group relative flex h-full flex-1 flex-col justify-end"
-          >
+      {/* Each column is a full-height flex cell that bottom-aligns its bar, so
+          the bar's percentage height resolves against the track. */}
+      <div className="mt-6 flex h-36 items-end gap-[3px]">
+        {daily.map((d, i) => (
+          <div key={d.date} className="group relative flex h-full flex-1 flex-col justify-end">
             <div
-              className="w-full rounded-t bg-brand/80 transition-colors group-hover:bg-brand"
+              className={
+                "w-full rounded-t-[2px] transition-colors " +
+                (i === daily.length - 1 ? "bg-brand" : "bg-brand/45 group-hover:bg-brand/80")
+              }
               style={{ height: `${Math.max(2, (d.count / max) * 100)}%` }}
             />
-            {/* Tooltip on hover — date + count. */}
-            <div className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden -translate-x-1/2 whitespace-nowrap rounded bg-zinc-900 px-2 py-1 text-[11px] text-white group-hover:block">
+            <div className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1.5 hidden -translate-x-1/2 whitespace-nowrap rounded border border-rule bg-ink px-2 py-1 text-[12px] text-paper group-hover:block">
               {fmtDay(d.date)} · {d.count}
             </div>
           </div>
         ))}
       </div>
-      <div className="mt-2 flex justify-between text-[11px] text-zinc-400">
+      <div className="mt-3 flex justify-between border-t border-rule pt-2 text-[11px] text-ink-2">
         <span>{fmtDay(daily[0]?.date)}</span>
-        <span>{fmtDay(daily[daily.length - 1]?.date)}</span>
+        <span>Today</span>
       </div>
-    </div>
+    </section>
   );
 }
 
-/* ----------------------------- subscriber list ---------------------------- */
+/* --------------------------- subscriber list -------------------------- */
+
+const PAGE = 50;
 
 function SubscriberTable({ subscribers }: { subscribers: SubscriberRow[] }) {
   const [q, setQ] = useState("");
+  const [shown, setShown] = useState(PAGE);
   const filtered = useMemo(() => {
     const needle = q.trim().toLowerCase();
     if (!needle) return subscribers;
     return subscribers.filter((s) => s.email.toLowerCase().includes(needle));
   }, [q, subscribers]);
+  // Join order: the oldest subscriber is No. 1.
+  const position = useMemo(() => {
+    const m = new Map<string, number>();
+    subscribers.forEach((s, i) => m.set(s.id, subscribers.length - i));
+    return m;
+  }, [subscribers]);
 
   return (
-    <div className="rounded-xl border border-zinc-200 bg-white">
-      <div className="flex flex-col gap-3 border-b border-zinc-100 p-4 sm:flex-row sm:items-center sm:justify-between">
-        <h2 className="text-sm font-semibold text-zinc-900">
-          Subscribers{" "}
-          <span className="font-normal text-zinc-400">
-            ({filtered.length.toLocaleString()})
+    <section className="overflow-hidden rounded-lg border border-rule bg-white">
+      <div className="flex flex-col gap-3 border-b border-rule p-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
+        <h2 className="text-[19px] font-medium text-ink">
+          All subscribers{" "}
+          <span className="text-[13px] font-normal text-ink-2">
+            {filtered.length.toLocaleString("en-US")}
           </span>
         </h2>
         <div className="flex items-center gap-2">
-          <input
-            value={q}
-            onChange={(e) => setQ(e.target.value)}
-            placeholder="Search email…"
-            aria-label="Search subscribers"
-            className="h-9 w-44 rounded-md border border-zinc-300 bg-white px-3 text-sm outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
-          />
+          <label className="relative flex-1 sm:flex-none">
+            <Search aria-hidden className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-ink-2" />
+            <input
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="Search email"
+              aria-label="Search subscribers"
+              className="h-9 w-full rounded-md border border-rule bg-white pl-8 pr-3 text-[13px] text-ink outline-none transition placeholder:text-ink-2/60 focus:border-brand sm:w-52"
+            />
+          </label>
           <button
             type="button"
             onClick={() => exportCsv(subscribers)}
             disabled={subscribers.length === 0}
-            className="inline-flex h-9 items-center rounded-md border border-zinc-300 px-3 text-[13px] font-medium text-zinc-700 transition-colors hover:bg-zinc-50 disabled:opacity-40"
+            className="inline-flex h-9 shrink-0 items-center gap-1.5 rounded-md border border-rule px-3 text-[13px] font-medium text-ink transition-colors hover:border-ink-2 disabled:opacity-40"
           >
+            <Download aria-hidden className="size-3.5" />
             Export CSV
           </button>
         </div>
       </div>
 
       {filtered.length === 0 ? (
-        <p className="p-8 text-center text-sm text-zinc-500">
+        <p className="px-5 py-12 text-center text-[16px] text-ink-2">
           {subscribers.length === 0
-            ? "No subscribers yet. Share your landing page and watch them roll in — live."
+            ? "No subscribers yet. They appear here as soon as someone signs up."
             : "No emails match your search."}
         </p>
       ) : (
-        <ul className="divide-y divide-zinc-100">
-          {filtered.map((s) => (
-            <li key={s.id} className="flex items-center justify-between gap-3 px-4 py-2.5">
-              <span className="truncate text-sm text-zinc-800">{s.email}</span>
-              <span className="shrink-0 text-[12px] text-zinc-400">
-                {fmtDateTime(s.createdAt)}
-              </span>
-            </li>
-          ))}
-        </ul>
+        <>
+          <ul className="divide-y divide-rule">
+            {filtered.slice(0, shown).map((s) => (
+              <li key={s.id} className="flex items-center gap-4 px-4 py-3 sm:px-5">
+                <span className="hidden w-12 shrink-0 sm:block text-[12px] tabular-nums text-ink-2">
+                  {position.get(s.id)}
+                </span>
+                <span className="min-w-0 flex-1 truncate text-[14px] text-ink">{s.email}</span>
+                <span className="shrink-0 text-[13px] text-ink-2">
+                  {fmtDateTime(s.createdAt)}
+                </span>
+              </li>
+            ))}
+          </ul>
+          {filtered.length > shown ? (
+            <button
+              type="button"
+              onClick={() => setShown((n) => n + PAGE)}
+              className="w-full border-t border-rule py-3 text-[13px] text-ink-2 transition-colors hover:text-ink"
+            >
+              Show {Math.min(PAGE, filtered.length - shown)} more
+            </button>
+          ) : null}
+        </>
       )}
-    </div>
+    </section>
   );
 }
 
 /* --------------------------- owner-only gate -------------------------- */
 
 // Shown to a signed-in user the `subscriberStats` function refused (not the
-// configured owner, or no PYLON_OWNER_EMAIL set). Fails closed — no subscriber data
+// configured owner, or no PYLON_OWNER_EMAIL set). Fails closed: no subscriber data
 // is fetched or shown.
 function OwnerOnly({ email }: { email: string }) {
   return (
-    <div className="rounded-xl border border-dashed border-zinc-300 px-6 py-12 text-center">
-      <h1 className="text-lg font-semibold">This dashboard is owner-only</h1>
-      <p className="mx-auto mt-2 max-w-md text-sm text-zinc-500">
-        You&apos;re signed in as{" "}
-        <span className="font-medium text-zinc-700">{email || "this account"}</span>.
-        A newsletter is single-tenant — only the owner can see the subscribers. Set{" "}
-        <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">
-          PYLON_OWNER_EMAIL={email || "you@yourbusiness.com"}
+    <div className="rounded-lg border border-dashed border-rule px-6 py-14 text-center">
+      <h1 className="text-[1.5rem] font-medium text-ink">This dashboard is owner-only</h1>
+      <p className="mx-auto mt-3 max-w-md text-[14px] leading-relaxed text-ink-2">
+        You are signed in as <span className="text-ink">{email || "this account"}</span>. Only
+        the owner can see subscribers. Set{" "}
+        <code className="rounded bg-rule/50 px-1.5 py-0.5 text-[12px] text-ink">
+          PYLON_OWNER_EMAIL={email || "you@yoursite.com"}
         </code>{" "}
-        in your{" "}
-        <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">.env</code>,
-        restart, and reload — or sign in with the owner account.
+        in <code className="rounded bg-rule/50 px-1.5 py-0.5 text-[12px] text-ink">.env</code>,
+        restart, and reload. Or sign in with the owner account.
       </p>
     </div>
   );
@@ -223,20 +262,22 @@ export function UserMenu({ email }: { email: string }) {
   }
   return (
     <details className="group relative">
-      <summary className="flex size-8 cursor-pointer select-none list-none items-center justify-center rounded-full bg-zinc-900 text-[12px] font-semibold text-white marker:hidden [&::-webkit-details-marker]:hidden">
+      <summary
+        aria-label="Account"
+        className="flex size-8 cursor-pointer select-none list-none items-center justify-center rounded-full bg-brand text-[12px] font-semibold text-white marker:hidden [&::-webkit-details-marker]:hidden"
+      >
         {initial}
       </summary>
-      <div className="absolute right-0 top-full z-40 mt-2 w-56 overflow-hidden rounded-xl border border-zinc-200 bg-white py-1 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.25)]">
-        <div className="border-b border-zinc-100 px-3 py-2">
-          <div className="truncate text-[13px] font-medium text-zinc-900">
-            {email || "Signed in"}
-          </div>
+      <div className="absolute right-0 top-full z-40 mt-2 w-60 overflow-hidden rounded-lg border border-rule bg-white py-1 shadow-[0_24px_48px_-24px_rgba(42,38,34,0.35)]">
+        <div className="truncate border-b border-rule px-3 py-2.5 text-[13px] text-ink">
+          {email || "Signed in"}
         </div>
         <button
           type="button"
           onClick={onSignOut}
-          className="flex w-full items-center px-3 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
+          className="flex w-full items-center gap-2 px-3 py-2 text-left text-[13px] text-ink-2 transition-colors hover:bg-rule/50 hover:text-ink"
         >
+          <LogOut aria-hidden className="size-3.5" />
           Sign out
         </button>
       </div>
@@ -248,31 +289,27 @@ export function UserMenu({ email }: { email: string }) {
 
 function Skeleton() {
   return (
-    <div className="space-y-8">
-      <div className="h-6 w-32 animate-pulse rounded bg-zinc-100" />
+    <div className="space-y-10">
+      <div className="h-8 w-40 animate-pulse rounded bg-rule/50" />
       <div className="grid gap-4 sm:grid-cols-3">
         {[0, 1, 2].map((i) => (
-          <div key={i} className="h-20 animate-pulse rounded-xl bg-zinc-100" />
+          <div key={i} className="h-24 animate-pulse rounded-lg bg-rule/50" />
         ))}
       </div>
-      <div className="h-44 animate-pulse rounded-xl bg-zinc-100" />
-      <div className="h-64 animate-pulse rounded-xl bg-zinc-100" />
+      <div className="h-56 animate-pulse rounded-lg bg-rule/50" />
+      <div className="h-72 animate-pulse rounded-lg bg-rule/50" />
     </div>
   );
 }
 
 function exportCsv(subscribers: SubscriberRow[]) {
-  const cell = (v: string) =>
-    /[",\n]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v;
-  const rows = [
-    "email,joined_at",
-    ...subscribers.map((s) => `${cell(s.email)},${cell(s.createdAt)}`),
-  ];
+  const cell = (v: string) => (/[",\n]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v);
+  const rows = ["email,subscribed_at", ...subscribers.map((s) => `${cell(s.email)},${cell(s.createdAt)}`)];
   const blob = new Blob([rows.join("\n")], { type: "text/csv;charset=utf-8" });
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
   a.href = url;
-  a.download = `newsletter-${new Date().toISOString().slice(0, 10)}.csv`;
+  a.download = `subscribers-${new Date().toISOString().slice(0, 10)}.csv`;
   document.body.appendChild(a);
   a.click();
   a.remove();
@@ -282,13 +319,13 @@ function exportCsv(subscribers: SubscriberRow[]) {
 function fmtDay(iso?: string) {
   if (!iso) return "";
   const d = new Date(iso + "T00:00:00Z");
-  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
 }
 
 function fmtDateTime(iso: string) {
   const t = Date.parse(iso);
   if (Number.isNaN(t)) return "";
-  return new Date(t).toLocaleString(undefined, {
+  return new Date(t).toLocaleString("en-US", {
     month: "short",
     day: "numeric",
     hour: "numeric",

package/templates/creator/app/dashboard/page.tsx

@@ -1,5 +1,6 @@
 import React, { use } from "react";
 import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { ArrowUpRight } from "lucide-react";
 import { siteConfig } from "@/lib/site.config";
 import { UserMenu, SubscriberDashboard } from "./dashboard-client";
 
@@ -35,35 +36,34 @@ export default function DashboardPage({ auth, response, serverData }: PageProps)
   );
 }
 
-// Dashboard chrome: a slim top bar with the logo, a link back to the public
-// site, and the account menu (a client island for sign-out).
+// Dashboard chrome in the site's own look: the cream page, the serif face,
+// the headshot and name from the site header, a link back to the public site,
+// and the account menu (a client island for sign-out).
 function Shell({ email, children }: { email: string; children: React.ReactNode }) {
-  const { brand } = siteConfig;
+  const { brand, newsletter } = siteConfig;
   return (
-    <div className="flex min-h-screen flex-col bg-white text-zinc-900">
-      <header className="border-b border-zinc-200">
-        <div className="mx-auto flex h-14 max-w-4xl items-center justify-between px-6">
-          <div 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">
-              {brand.name} <span className="text-zinc-400">/ newsletter</span>
-            </span>
-          </div>
-          <div className="flex items-center gap-4">
+    <div className="font-display flex min-h-screen flex-col bg-paper text-ink">
+      <header className="border-b border-rule">
+        <div className="mx-auto flex h-16 w-full max-w-4xl items-center justify-between px-6">
+          <Link href="/" className="flex items-center gap-3">
+            <img src="/images/headshot.jpg" alt="" className="size-8 rounded-full object-cover" />
+            <span className="text-[17px] font-medium text-ink">{brand.name}</span>
+            <span className="hidden text-[15px] italic text-ink-2 sm:inline">{newsletter.name}</span>
+          </Link>
+          <div className="flex items-center gap-5">
             <Link
               href="/"
-              className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
+              className="inline-flex items-center gap-1 text-[15px] text-ink-2 transition-colors hover:text-ink"
             >
-              View site ↗
+              View site
+              <ArrowUpRight aria-hidden className="size-4" />
             </Link>
             <UserMenu email={email} />
           </div>
         </div>
       </header>
       <main className="flex-1">
-        <div className="mx-auto max-w-4xl px-6 py-8">{children}</div>
+        <div className="mx-auto w-full max-w-4xl px-6 py-10 sm:py-14">{children}</div>
       </main>
     </div>
   );

package/templates/creator/app/icon.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="31" fill="#4a6b3f"/>
+<path d="M17 45V20h5.5L32 34l9.5-14H47v25h-6V31l-9 13-9-13v14z" fill="#f7f3ec"/></svg>

package/templates/creator/app/login/page.tsx

@@ -18,21 +18,21 @@ export default function LoginPage({ auth, response }: PageProps) {
   if (auth.user_id && !auth.user_id.startsWith("guest_")) response.redirect("/dashboard");
   const { brand } = siteConfig;
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-6 py-12">
-      <div className="w-full max-w-[400px] rounded-2xl border border-zinc-200/70 p-8">
-        <Link href="/" className="inline-flex">
-          <span className="flex size-9 items-center justify-center rounded-xl bg-zinc-900 text-base font-bold text-white">
-            {brand.letter}
-          </span>
+    <div className="font-display flex min-h-screen flex-col bg-paper px-6 text-ink">
+      <div className="mx-auto flex h-16 w-full max-w-[40rem] items-center">
+        <Link href="/" className="text-[17px] font-medium text-ink">
+          {brand.name}
         </Link>
-        <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
-          {brand.name} dashboard
-        </h1>
-        <p className="mt-1 text-[13px] text-zinc-500">
-          Sign in to see your subscribers.
-        </p>
-        <div className="mt-6">
-          <AuthForm />
+      </div>
+      <div className="flex flex-1 items-center justify-center pb-24">
+        <div className="w-full max-w-[380px]">
+          <h1 className="text-[2rem] font-medium leading-tight">Sign in</h1>
+          <p className="mt-2 text-[17px] italic text-ink-2">
+            Owner access to {siteConfig.newsletter.name} subscribers.
+          </p>
+          <div className="mt-8 rounded-lg border border-rule bg-white p-6">
+            <AuthForm />
+          </div>
         </div>
       </div>
     </div>

package/templates/creator/app.ts

@@ -41,8 +41,8 @@ const Subscriber = entity(
 );
 
 // A single-row, PII-FREE aggregate the public page can safely read live. It
-// holds only the subscriber count — no emails. `subscribe` keeps it in sync with
-// the real Subscriber count on every new join. The landing page subscribes with
+// holds only the subscriber count — no emails. Every Subscriber writer
+// recounts into it (lib/stats.ts → syncSubscriberCount). The landing page subscribes with
 // `db.useQuery("SubscriberCount")`, which syncs across every open tab through the
 // replica — so the counter ticks up everywhere the instant someone joins. This
 // is the cross-tab-safe realtime primitive (entity sync), not a per-connection
@@ -78,7 +78,7 @@ const User = entity(
 // PRIVACY. Subscriber holds visitor emails, so it denies EVERY client read and
 // write. No `db.useQuery("Subscriber")` can ever pull a row, and no client can
 // insert/update/delete directly. Writes happen only inside the server-side
-// `subscribe` mutation (functions bypass policies); the emails come back only
+// `subscribe` and dev-only `seedDemo` mutations (functions bypass policies); the emails come back only
 // through the owner-gated `subscriberStats`. A marketing site must never leak
 // its own customers' emails — this policy is what guarantees it.
 const subscriberPolicy = policy({
@@ -92,7 +92,7 @@ const subscriberPolicy = policy({
 
 // The aggregate count is public to READ (it's just a number — the whole point
 // is that the landing page shows it live to everyone). Clients can't WRITE it;
-// only the subscribe mutation maintains it server-side.
+// only the Subscriber writers maintain it server-side.
 const subscriberCountPolicy = policy({
   name: "subscriber_count_public_read",
   entity: "SubscriberCount",

package/templates/creator/functions/seedDemo.ts

@@ -0,0 +1,32 @@
+import { mutation } from "@pylonsync/functions";
+import { demoDataEnabled, demoSubscribers } from "../lib/demo";
+import { syncSubscriberCount } from "../lib/stats";
+
+// seedDemo — fill an empty subscriber list with fictional rows in development.
+//
+// The landing page counter calls this when it finds no subscribers, and the
+// dashboard calls it once on load. It writes nothing unless demo data is on
+// (lib/demo.ts: PYLON_DEMO_DATA, else a `pylon dev` process), so `pylon start`,
+// Docker, and Pylon Cloud deploys do not get demo rows. It also writes nothing
+// once any Subscriber exists, so it cannot mix demo rows into a real list.
+// Clearing every subscriber in development seeds the list again on the next
+// load. The advisory lock stops two first visits from seeding twice.
+//
+// Public because the first visitor in `pylon dev` is anonymous. It returns only
+// a flag, never a row.
+export default mutation<Record<string, never>, { seeded: boolean }>({
+  auth: "public",
+  async handler(ctx) {
+    if (!demoDataEnabled(ctx.env)) return { seeded: false };
+
+    await ctx.db.advisoryLock("creator_seed_demo");
+    const existing = await ctx.db.unsafe.list("Subscriber");
+    if (existing.length > 0) return { seeded: false };
+
+    for (const row of demoSubscribers(Date.now())) {
+      await ctx.db.unsafe.insert("Subscriber", { email: row.email, createdAt: row.createdAt });
+    }
+    await syncSubscriberCount(ctx.db.unsafe);
+    return { seeded: true };
+  },
+});

package/templates/creator/functions/subscribe.ts

@@ -1,4 +1,5 @@
 import { mutation, v } from "@pylonsync/functions";
+import { syncSubscriberCount } from "../lib/stats";
 
 // Normalize + sanity-check an email without pulling in a dependency. This is a
 // pragmatic "looks like an email" check, not RFC 5322 — the unique index is the
@@ -61,21 +62,9 @@ export default mutation<{ email: string }, { ok: boolean; alreadyJoined: boolean
       throw e;
     }
 
-    // Keep the public, PII-free SubscriberCount singleton in sync with the real
-    // count. We RECOUNT (rather than +1) so the number can never drift, and
-    // this whole handler is one transaction — on SQLite writers serialize, so
-    // the recount-then-write is consistent. The landing page reads this row via
-    // `db.useQuery`, which syncs the new value to every open tab.
-    const total = (await ctx.db.unsafe.list("Subscriber")).length;
-    const stat = (await ctx.db.unsafe.list("SubscriberCount"))[0] as
-      | { id: string }
-      | undefined;
-    const now = new Date().toISOString();
-    if (stat) {
-      await ctx.db.unsafe.update("SubscriberCount", stat.id, { count: total, updatedAt: now });
-    } else {
-      await ctx.db.unsafe.insert("SubscriberCount", { count: total, updatedAt: now });
-    }
+    // Keep the public, PII-free SubscriberCount row equal to the Subscriber
+    // count. It is a recount, not +1, so the number cannot drift from the table.
+    await syncSubscriberCount(ctx.db.unsafe);
 
     return { ok: true, alreadyJoined: false };
   },