@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/local-service/app/dashboard/dashboard-client.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { useAuth } from "@pylonsync/client";
+import { Check, LogOut, MapPin, X } from "lucide-react";
 import { siteConfig } from "@/lib/site.config";
 import type { BookingRow, OwnerBookingsResult } from "@/lib/booking";
 
@@ -36,6 +37,12 @@ export function BookingsDashboard({ userEmail }: { userEmail: string }) {
     }
   }
 
+  // In `pylon dev` an empty booking book gets demo appointments
+  // (functions/seedDemo.ts). On a deploy the call returns without writing.
+  useEffect(() => {
+    void callFn("seedDemo", {}).catch(() => {});
+  }, []);
+
   useEffect(() => {
     void load();
     // Re-fetch whenever the live booked-slot set changes.
@@ -54,11 +61,7 @@ export function BookingsDashboard({ 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">
-        {error}
-      </div>
-    );
+    return <div className="border border-brand bg-brand-soft px-5 py-4 text-sm text-brand">{error}</div>;
   }
   if (!bookings) return <Skeleton />;
 
@@ -71,35 +74,59 @@ export function BookingsDashboard({ userEmail }: { userEmail: string }) {
     (b) => new Date(b.startsAt).toLocaleDateString() === todayKey,
   ).length;
   const pendingCount = upcoming.filter((b) => b.status === "pending").length;
+  const weekEnd = nowMs + 7 * 86_400_000;
+  const weekRevenue = upcoming
+    .filter((b) => Date.parse(b.startsAt) < weekEnd)
+    .reduce((sum, b) => sum + priceOf(b.serviceSlug), 0);
 
   return (
-    <div className="space-y-8">
-      <div>
-        <h1 className="text-xl font-semibold tracking-tight">Bookings</h1>
-        <p className="mt-1 text-sm text-zinc-500">
-          Live — new bookings appear the moment they happen; cancelling frees the
-          slot on the site instantly.
+    <div className="space-y-10">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h1 className="font-display text-[3.5rem] leading-none sm:text-[4.5rem]">Bookings</h1>
+          <p className="mt-3 max-w-lg text-[15px] leading-relaxed text-ink/70">
+            New bookings appear here as they are made. Cancelling a booking frees the time on
+            the site right away.
+          </p>
+        </div>
+        <p className="flex items-center gap-2 text-[13px] font-medium">
+          <span className="relative flex size-2">
+            <span className="absolute inline-flex size-2 animate-ping rounded-full bg-green-500/60" />
+            <span className="relative inline-flex size-2 rounded-full bg-green-600" />
+          </span>
+          Live
         </p>
       </div>
 
-      <div className="grid gap-4 sm:grid-cols-3">
-        <Stat label="Upcoming" value={upcoming.length} />
-        <Stat label="Today" value={todayCount} />
-        <Stat label="Awaiting confirm" value={pendingCount} />
-      </div>
+      <dl className="grid grid-cols-2 gap-px border border-ink bg-ink sm:grid-cols-4">
+        <Stat label="Upcoming" value={String(upcoming.length)} />
+        <Stat label="Today" value={String(todayCount)} />
+        <Stat label="To confirm" value={String(pendingCount)} accent={pendingCount > 0} />
+        <Stat label="Booked, next 7 days" value={`$${weekRevenue.toLocaleString("en-US")}`} />
+      </dl>
 
       <UpcomingList bookings={upcoming} busyId={busyId} onAct={act} />
+
+      {!siteConfig.location.mapEmbedUrl ? <MapHint /> : null}
     </div>
   );
 }
 
-function Stat({ label, value }: { label: string; value: number }) {
+function priceOf(slug: string): number {
+  return siteConfig.services.items.find((s) => s.slug === slug)?.priceUsd ?? 0;
+}
+
+function Stat({ label, value, accent }: { label: string; value: string; accent?: boolean }) {
   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}</div>
+    <div className="bg-cream px-4 py-4">
+      <dt className="text-[11px] font-medium uppercase tracking-wide text-ink/60">{label}</dt>
+      <dd
+        className={
+          "mt-1 font-display text-[2.75rem] leading-none tabular-nums " + (accent ? "text-brand" : "")
+        }
+      >
+        {value}
+      </dd>
     </div>
   );
 }
@@ -117,7 +144,7 @@ function UpcomingList({
   const groups = useMemo(() => {
     const m = new Map<string, BookingRow[]>();
     for (const b of bookings) {
-      const key = new Date(b.startsAt).toLocaleDateString(undefined, {
+      const key = new Date(b.startsAt).toLocaleDateString("en-US", {
         weekday: "long",
         month: "short",
         day: "numeric",
@@ -131,29 +158,28 @@ function UpcomingList({
 
   if (bookings.length === 0) {
     return (
-      <div className="rounded-xl border border-dashed border-zinc-300 p-10 text-center text-sm text-zinc-500">
-        No upcoming bookings yet. Share your site — new bookings land here live.
+      <div className="border border-dashed border-ink/50 p-10 text-center text-[15px] text-ink/70">
+        No upcoming bookings. New bookings appear here as soon as someone books a chair.
       </div>
     );
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       {groups.map(([day, items]) => (
-        <div key={day}>
-          <h2 className="mb-2 text-[13px] font-semibold text-zinc-900">{day}</h2>
-          <div className="overflow-hidden rounded-xl border border-zinc-200">
-            {items.map((b, i) => (
-              <BookingItem
-                key={b.id}
-                booking={b}
-                busy={busyId === b.id}
-                onAct={onAct}
-                last={i === items.length - 1}
-              />
-            ))}
+        <section key={day}>
+          <div className="flex items-baseline justify-between border-b border-ink pb-2">
+            <h2 className="font-display text-[2rem] leading-none">{day}</h2>
+            <span className="text-[13px] text-ink/60">
+              {items.length} {items.length === 1 ? "booking" : "bookings"}
+            </span>
           </div>
-        </div>
+          <ul className="divide-y divide-ink/20">
+            {items.map((b) => (
+              <BookingItem key={b.id} booking={b} busy={busyId === b.id} onAct={onAct} />
+            ))}
+          </ul>
+        </section>
       ))}
     </div>
   );
@@ -163,37 +189,29 @@ function BookingItem({
   booking,
   busy,
   onAct,
-  last,
 }: {
   booking: BookingRow;
   busy: boolean;
   onAct: (id: string, fn: "confirmBooking" | "cancelBooking") => void;
-  last: boolean;
 }) {
   const service = siteConfig.services.items.find((s) => s.slug === booking.serviceSlug);
   return (
-    <div
-      className={
-        "flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 " +
-        (last ? "" : "border-b border-zinc-100")
-      }
-    >
-      <div className="w-20 shrink-0 text-[14px] font-semibold tabular-nums text-zinc-900">
-        {new Date(booking.startsAt).toLocaleTimeString(undefined, {
+    <li className="flex flex-wrap items-center gap-x-5 gap-y-2 py-4">
+      <div className="w-24 shrink-0 font-display text-[1.75rem] leading-none tabular-nums">
+        {new Date(booking.startsAt).toLocaleTimeString("en-US", {
           hour: "numeric",
           minute: "2-digit",
         })}
       </div>
       <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
-          <span className="text-[14px] font-medium text-zinc-900">
-            {booking.customerName}
-          </span>
-          <StatusBadge status={booking.status} />
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-[15px] font-semibold">{booking.customerName}</span>
+          <StatusTag status={booking.status} />
         </div>
-        <div className="truncate text-[12.5px] text-zinc-500">
-          {service?.name ?? booking.serviceSlug} · {booking.customerEmail}
-          {booking.customerPhone ? ` · ${booking.customerPhone}` : ""}
+        <div className="mt-0.5 truncate text-[13px] text-ink/65">
+          {service ? `${service.name} · ${service.durationMin} min · ${service.price}` : booking.serviceSlug}
+          {" · "}
+          {booking.customerPhone ?? booking.customerEmail}
         </div>
       </div>
       <div className="flex items-center gap-2">
@@ -202,35 +220,48 @@ function BookingItem({
             type="button"
             disabled={busy}
             onClick={() => onAct(booking.id, "confirmBooking")}
-            className="rounded-md bg-zinc-900 px-3 py-1.5 text-[12.5px] font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-50"
+            className="inline-flex h-9 items-center gap-1.5 bg-ink px-3.5 text-[13px] font-medium text-cream transition-opacity hover:opacity-85 disabled:opacity-50"
           >
-            {busy ? "…" : "Confirm"}
+            <Check aria-hidden className="size-3.5" />
+            Confirm
           </button>
         ) : null}
         <button
           type="button"
           disabled={busy}
           onClick={() => onAct(booking.id, "cancelBooking")}
-          className="rounded-md border border-zinc-300 px-3 py-1.5 text-[12.5px] font-medium text-zinc-600 transition-colors hover:border-red-300 hover:text-red-600 disabled:opacity-50"
+          className="inline-flex h-9 items-center gap-1.5 border border-ink/40 px-3.5 text-[13px] font-medium text-ink/75 transition-colors hover:border-brand hover:text-brand disabled:opacity-50"
         >
+          <X aria-hidden className="size-3.5" />
           Cancel
         </button>
       </div>
-    </div>
+    </li>
   );
 }
 
-function StatusBadge({ status }: { status: string }) {
+function StatusTag({ status }: { status: string }) {
   const tone =
     status === "confirmed"
-      ? "bg-green-50 text-green-700"
+      ? "border-ink/30 text-ink/70"
       : status === "cancelled"
-        ? "bg-zinc-100 text-zinc-500"
-        : "bg-amber-50 text-amber-700";
+        ? "border-ink/20 text-ink/40"
+        : "border-brand bg-brand-soft text-brand";
+  const label = status === "pending" ? "To confirm" : status === "confirmed" ? "Confirmed" : "Cancelled";
+  return <span className={"border px-1.5 py-px text-[11px] font-medium " + tone}>{label}</span>;
+}
+
+// Setup notes for the owner live here, not on the public site.
+function MapHint() {
   return (
-    <span className={"rounded-full px-2 py-0.5 text-[10px] font-medium capitalize " + tone}>
-      {status}
-    </span>
+    <aside className="flex gap-3 border border-ink/30 bg-paper/60 p-4 text-[13.5px] leading-relaxed text-ink/75">
+      <MapPin aria-hidden className="mt-0.5 size-4 shrink-0 text-ink" />
+      <p>
+        Your site shows the weekly hours next to the address. To show a map there instead, paste a
+        Google Maps embed URL into <code className="bg-cream px-1 text-[12.5px]">location.mapEmbedUrl</code> in{" "}
+        <code className="bg-cream px-1 text-[12.5px]">lib/site.config.ts</code>.
+      </p>
+    </aside>
   );
 }
 
@@ -238,18 +269,16 @@ function StatusBadge({ status }: { status: string }) {
 
 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>.
+    <div className="border border-dashed border-ink/50 px-6 py-12 text-center">
+      <h1 className="font-display text-[2.5rem] leading-none">This dashboard is owner-only</h1>
+      <p className="mx-auto mt-4 max-w-md text-[14px] leading-relaxed text-ink/70">
+        You are signed in as <span className="font-medium text-ink">{email || "this account"}</span>.
         Only the shop owner can see bookings. Set{" "}
-        <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">
+        <code className="bg-paper px-1.5 py-0.5 text-[12px]">
           PYLON_OWNER_EMAIL={email || "you@yourshop.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="bg-paper px-1.5 py-0.5 text-[12px]">.env</code>, restart, and reload. Or
+        sign in with the owner account.
       </p>
     </div>
   );
@@ -266,20 +295,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-9 cursor-pointer select-none list-none items-center justify-center bg-brand font-display text-[20px] leading-none text-cream 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 border border-ink bg-cream py-1">
+        <div className="truncate border-b border-ink/20 px-3 py-2.5 text-[13px] font-medium">
+          {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/75 transition-colors hover:bg-paper hover:text-ink"
         >
+          <LogOut aria-hidden className="size-3.5" />
           Sign out
         </button>
       </div>
@@ -291,14 +322,10 @@ 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="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>
-      <div className="h-48 animate-pulse rounded-xl bg-zinc-100" />
+    <div className="space-y-10">
+      <div className="h-16 w-64 animate-pulse bg-ink/10" />
+      <div className="h-24 animate-pulse bg-ink/10" />
+      <div className="h-72 animate-pulse bg-ink/10" />
     </div>
   );
 }

package/templates/local-service/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, BookingsDashboard } from "./dashboard-client";
 
@@ -30,33 +31,32 @@ export default function DashboardPage({ auth, response, serverData }: PageProps)
   );
 }
 
+// Dashboard chrome in the site's own look: the cream page, the ruled header,
+// the shop name in the display face, a link back to the site, and the account
+// menu (a client island for sign-out).
 function Shell({ email, children }: { email: string; children: React.ReactNode }) {
   const { brand } = 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">/ bookings</span>
-            </span>
-          </div>
+    <div className="flex min-h-screen flex-col bg-cream text-ink">
+      <header className="sticky top-0 z-30 border-b border-ink bg-cream">
+        <div className="mx-auto flex h-14 w-full max-w-5xl items-center justify-between px-6">
+          <Link href="/" className="font-display text-[26px] leading-none tracking-[0.02em]">
+            {brand.name}
+          </Link>
           <div className="flex items-center gap-4">
             <Link
               href="/"
-              className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
+              className="hidden items-center gap-1 text-[13px] font-medium text-ink/70 transition-colors hover:text-ink sm:inline-flex"
             >
-              View site ↗
+              View site
+              <ArrowUpRight aria-hidden className="size-3.5" />
             </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-5xl px-6 py-10 sm:py-12">{children}</div>
       </main>
     </div>
   );

package/templates/local-service/app/icon.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="6" fill="#9b1c1c"/>
+<path d="M18 12h8.5l11 24V12H46v40h-8.5l-11-24v24H18z" fill="#f4efe6"/></svg>

package/templates/local-service/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>
-        </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 manage your bookings.
-        </p>
-        <div className="mt-6">
-          <AuthForm />
+    <div className="flex min-h-screen flex-col bg-cream text-ink">
+      <div className="border-b border-ink">
+        <div className="mx-auto flex h-14 w-full max-w-5xl items-center px-6">
+          <Link href="/" className="font-display text-[26px] leading-none tracking-[0.02em]">
+            {brand.name}
+          </Link>
+        </div>
+      </div>
+      <div className="flex flex-1 items-center justify-center px-6 py-16">
+        <div className="w-full max-w-[400px]">
+          <h1 className="font-display text-[3.5rem] leading-none">Owner sign in</h1>
+          <p className="mt-3 text-[15px] text-ink/70">Bookings, confirmations, and cancellations.</p>
+          <div className="mt-8 border border-ink bg-paper/60 p-6">
+            <AuthForm />
+          </div>
         </div>
       </div>
     </div>

package/templates/local-service/functions/seedDemo.ts

@@ -0,0 +1,49 @@
+import { mutation } from "@pylonsync/functions";
+import { demoBookings, demoDataEnabled } from "../lib/demo";
+import { siteConfig } from "../lib/site.config";
+
+// seedDemo — fill an empty booking book with fictional appointments in
+// development, so the public grid and the owner dashboard show the same
+// bookings.
+//
+// The booking widget calls this when it finds no booked slots, 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 Booking exists, so it cannot mix demo rows into a real book. The
+// advisory lock stops two first visits from seeding twice.
+//
+// Each active booking gets its BookedSlot, the same pair createBooking writes.
+// 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("local_service_seed_demo");
+    const existing = await ctx.db.unsafe.list("Booking");
+    if (existing.length > 0) return { seeded: false };
+
+    for (const b of demoBookings(Date.now(), siteConfig)) {
+      const bookingId = await ctx.db.unsafe.insert("Booking", {
+        serviceSlug: b.serviceSlug,
+        startsAt: b.startsAt,
+        endsAt: b.endsAt,
+        customerName: b.customerName,
+        customerEmail: b.customerEmail,
+        customerPhone: b.customerPhone,
+        status: b.status,
+        createdAt: b.createdAt,
+      });
+      if (b.status === "cancelled") continue;
+      await ctx.db.unsafe.insert("BookedSlot", {
+        serviceSlug: b.serviceSlug,
+        startsAt: b.startsAt,
+        endsAt: b.endsAt,
+        bookingId,
+      });
+    }
+    return { seeded: true };
+  },
+});

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

@@ -0,0 +1,135 @@
+// Demo bookings for local development.
+//
+// `pylon dev` fills an empty booking book with fictional appointments from the
+// past week and the next ten days, so the booking grid shows taken times and
+// the owner dashboard has a schedule. Both read the same rows: every demo
+// Booking gets its BookedSlot, exactly like createBooking writes.
+//
+// A deploy does not seed: `demoDataEnabled` is true only when PYLON_DEMO_DATA is
+// on, or when it is unset and the process runs under `pylon dev`. Set PYLON_DEMO_DATA=0 to
+// turn it off in development too.
+//
+// Pure data + pure shaping, so functions/seedDemo.ts stays a thin wrapper and
+// this file is testable without a server.
+
+import { localDateKey, rangesOverlap, slotsForDay, weekdayOf } from "./slots";
+import type { LocalServiceConfig } from "./site.config";
+
+const ON = new Set(["1", "true", "yes", "on"]);
+const OFF = new Set(["0", "false", "no", "off"]);
+
+/**
+ * True when demo rows may be written. An explicit PYLON_DEMO_DATA wins.
+ * Otherwise it needs both PYLON_DEV_MODE on and PYLON_DEV_WATCH_DIR set. Only
+ * `pylon dev` sets PYLON_DEV_WATCH_DIR; `pylon start` and the Docker image do
+ * not, and the image turns PYLON_DEV_MODE on by default, so dev mode alone is
+ * not proof of a local machine.
+ */
+export function demoDataEnabled(env: Record<string, string | undefined>): boolean {
+  const explicit = env.PYLON_DEMO_DATA?.trim().toLowerCase();
+  if (explicit && ON.has(explicit)) return true;
+  if (explicit && OFF.has(explicit)) return false;
+  const dev = env.PYLON_DEV_MODE?.trim().toLowerCase();
+  const devMode = dev === "1" || dev === "true";
+  return devMode && Boolean(env.PYLON_DEV_WATCH_DIR?.trim());
+}
+
+const CUSTOMERS = [
+  "Marcus Bell", "Daniel Reyes", "Hannah Kim", "Luis Ortega", "Tyler Brooks", "Andre Wallace",
+  "Sam Okafor", "Kevin Tran", "Jordan Miles", "Eli Navarro", "Chris Delgado", "Owen Price",
+  "Ravi Shah", "Nate Coleman", "Isaac Moreno", "Ben Hollis", "Victor Lam", "Grant Ellison",
+  "Mateo Vargas", "Dev Patel", "Caleb Ford", "Jamal Hayes", "Theo Lindqvist", "Omar Haddad",
+];
+
+/** Small deterministic PRNG (mulberry32) so the demo set is stable per seed. */
+function rng(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export interface DemoBooking {
+  serviceSlug: string;
+  startsAt: string;
+  endsAt: string;
+  customerName: string;
+  customerEmail: string;
+  customerPhone: string | null;
+  status: "pending" | "confirmed" | "cancelled";
+  createdAt: string;
+}
+
+type Cfg = Pick<LocalServiceConfig, "booking" | "services">;
+
+/**
+ * Appointments on open days from 7 days ago to 9 days ahead. Each fits inside
+ * opening hours on the slot grid, and no two active bookings overlap. Past
+ * appointments are confirmed; upcoming ones are mostly confirmed, some
+ * pending, a few cancelled.
+ */
+export function demoBookings(nowMs: number, cfg: Cfg, seed = 11): DemoBooking[] {
+  const rand = rng(seed);
+  const out: DemoBooking[] = [];
+  const services = cfg.services.items;
+  if (services.length === 0) return out;
+
+  for (let offset = -7; offset <= 9; offset++) {
+    const day = localDateKey(offset, nowMs);
+    const hours = cfg.booking.hours[weekdayOf(day)];
+    if (!hours) continue;
+    // The full grid for the day, ignoring "now": seeding also fills the past.
+    const grid = slotsForDay({
+      dayISODate: day,
+      open: hours.open,
+      close: hours.close,
+      slotMinutes: cfg.booking.slotMinutes,
+      durationMin: 0,
+      leadTimeHours: 0,
+      busy: [],
+      nowMs: 0,
+    });
+    // With a zero duration the last grid start is closing time itself.
+    const close = Date.parse(grid[grid.length - 1].startsAt);
+    const busy: [number, number][] = [];
+    // Busier near the weekend and in the days just ahead.
+    const fill = offset >= 0 && offset <= 3 ? 0.5 : 0.35;
+    for (const slot of grid) {
+      if (rand() > fill) continue;
+      const svc = services[Math.floor(rand() * services.length)];
+      const start = Date.parse(slot.startsAt);
+      const end = start + svc.durationMin * 60_000;
+      if (end > close) continue;
+      if (busy.some(([s, e]) => rangesOverlap(start, end, s, e))) continue;
+
+      const name = CUSTOMERS[Math.floor(rand() * CUSTOMERS.length)];
+      const [first, last] = name.toLowerCase().split(" ");
+      const past = end <= nowMs;
+      const roll = rand();
+      const status: DemoBooking["status"] = past
+        ? "confirmed"
+        : roll < 0.62
+          ? "confirmed"
+          : roll < 0.92
+            ? "pending"
+            : "cancelled";
+      if (status !== "cancelled") busy.push([start, end]);
+      const bookedAt = Math.min(nowMs - 3_600_000, start - (1 + Math.floor(rand() * 6)) * 86_400_000);
+      out.push({
+        serviceSlug: svc.slug,
+        startsAt: new Date(start).toISOString(),
+        endsAt: new Date(end).toISOString(),
+        customerName: name,
+        customerEmail: `${first}.${last[0]}@example.com`,
+        customerPhone: rand() < 0.7 ? `(214) 555-01${String(Math.floor(rand() * 100)).padStart(2, "0")}` : null,
+        status,
+        createdAt: new Date(bookedAt).toISOString(),
+      });
+    }
+  }
+  return out;
+}