@pylonsync/create-pylon 0.19.1 → 0.21.0

package/templates/crm/tests/demo-team.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, test } from "bun:test";
+import { demoEmail, isDemoRow } from "../lib/demo-team";
+
+describe("demo teammates", () => {
+  test("the first address is the person's own, then numbered aliases", () => {
+    expect(demoEmail("maya.castillo@demo.invalid", 0)).toBe("maya.castillo@demo.invalid");
+    expect(demoEmail("maya.castillo@demo.invalid", 1)).toBe("maya.castillo+2@demo.invalid");
+    expect(demoEmail("maya.castillo@demo.invalid", 2)).toBe("maya.castillo+3@demo.invalid");
+  });
+
+  test("a registered account is never reused as a demo teammate", () => {
+    // Someone who registered a demo address first must not be handed the
+    // seeded records.
+    expect(isDemoRow({ email: "x@demo.invalid", passwordHash: "argon2id$..." })).toBe(false);
+    expect(isDemoRow({ email: "x@demo.invalid", emailVerified: "2026-07-01T00:00:00Z" })).toBe(false);
+    expect(isDemoRow({ email: "x@demo.invalid", displayName: "Maya Castillo" })).toBe(true);
+  });
+});

package/templates/crm/tests/pipeline.test.ts

@@ -3,6 +3,7 @@ import {
   BOARD_STAGES,
   PIPELINE,
   accentIndex,
+  closeDue,
   daysUntil,
   groupByStage,
   initials,
@@ -17,6 +18,7 @@ import {
   sumValue,
   type Deal,
 } from "../lib/pipeline";
+import { SEED_TEAM, shapeSeed } from "../lib/seed";
 
 const deal = (over: Partial<Deal> = {}): Deal => ({
   id: "d1",
@@ -34,6 +36,7 @@ describe("stages", () => {
       "lead",
       "qualified",
       "proposal",
+      "negotiation",
       "won",
     ]);
     expect(PIPELINE.some((s) => s.id === "lost")).toBe(true);
@@ -47,7 +50,8 @@ describe("stages", () => {
 
   test("advance and retreat stop at the ends", () => {
     expect(nextStage("lead")).toBe("qualified");
-    expect(nextStage("proposal")).toBe("won");
+    expect(nextStage("proposal")).toBe("negotiation");
+    expect(nextStage("negotiation")).toBe("won");
     expect(nextStage("won")).toBeNull();
     expect(previousStage("qualified")).toBe("lead");
     expect(previousStage("lead")).toBeNull();
@@ -56,7 +60,8 @@ describe("stages", () => {
   test("an unknown stage is rejected, not coerced", () => {
     expect(isValidStage("proposal")).toBe(true);
     expect(isValidStage("Proposal")).toBe(false);
-    expect(isValidStage("negotiation")).toBe(false);
+    expect(isValidStage("Negotiation")).toBe(false);
+    expect(isValidStage("closing")).toBe(false);
     expect(nextStage("nonsense")).toBeNull();
   });
 });
@@ -83,7 +88,7 @@ describe("groupByStage", () => {
 
   test("a deal with an unknown stage is dropped, not filed under Lead", () => {
     // Silently reclassifying it would hide a typo behind a plausible board.
-    const columns = groupByStage([deal({ stage: "negotiation" })]);
+    const columns = groupByStage([deal({ stage: "closing" })]);
     expect(columns.every((c) => c.deals.length === 0)).toBe(true);
   });
 
@@ -217,3 +222,54 @@ describe("daysUntil", () => {
     expect(daysUntil("nope", now)).toBeNull();
   });
 });
+
+describe("closeDue", () => {
+  const now = Date.parse("2026-07-27T18:00:00Z");
+  const past = "2026-07-20T12:00:00Z";
+
+  test("an open deal past its close date is overdue", () => {
+    expect(closeDue({ stage: "proposal", closeDate: past }, now)).toEqual({
+      tone: "overdue",
+      days: -7,
+      label: "7d overdue",
+    });
+  });
+
+  test("a won or lost deal is never overdue", () => {
+    // Won deals used to show "Nd overdue" in red on the board.
+    expect(closeDue({ stage: "won", closeDate: past }, now)).toBeNull();
+    expect(closeDue({ stage: "lost", closeDate: past }, now)).toBeNull();
+  });
+
+  test("inside a week reads as days left, today as Today", () => {
+    expect(closeDue({ stage: "lead", closeDate: "2026-07-30T12:00:00Z" }, now)?.label).toBe("3d");
+    expect(closeDue({ stage: "lead", closeDate: "2026-07-27T20:00:00Z" }, now)?.label).toBe("Today");
+  });
+
+  test("nothing to flag beyond a week or without a date", () => {
+    expect(closeDue({ stage: "lead", closeDate: "2026-08-20T12:00:00Z" }, now)).toBeNull();
+    expect(closeDue({ stage: "lead", closeDate: null }, now)).toBeNull();
+  });
+});
+
+describe("seed", () => {
+  test("every teammate, and the person who signed up, owns open deals", () => {
+    const seed = shapeSeed(Date.parse("2026-07-27T18:00:00Z"));
+    const owners = new Set(
+      seed.deals.filter((d) => isOpen({ stage: String(d.row.stage) })).map((d) => d.owner),
+    );
+    expect([...owners].sort()).toEqual(
+      Array.from({ length: SEED_TEAM.length + 1 }, (_, i) => i),
+    );
+  });
+
+  test("every seeded stage is a real stage", () => {
+    for (const deal of shapeSeed().deals) {
+      expect(isValidStage(String(deal.row.stage))).toBe(true);
+    }
+  });
+
+  test("demo teammates use a domain that can't receive mail", () => {
+    for (const person of SEED_TEAM) expect(person.email.endsWith("@demo.invalid")).toBe(true);
+  });
+});

package/templates/directory/.env.example

@@ -10,3 +10,10 @@ PYLON_OWNER_EMAIL=you@yourdirectory.com
 # ── Site URL (optional) ──────────────────────────────────────────────────────
 # Used by robots.txt + sitemap.xml. Point it at your real domain in production.
 # SITE_URL=https://yourdirectory.com
+
+# ── Demo data ────────────────────────────────────────────────────────────────
+# `pylon dev` fills an empty review queue with fictional submissions. 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/directory/AGENTS.md

@@ -62,7 +62,7 @@ this pass before the user has to ask.
 - **`serverData` (SSR) is READ-ONLY.** No write methods; the runtime rejects write frames (`SSR_WRITE_FORBIDDEN`). Mutations belong in actions/functions, never in a page render.
 - **`response.*` / `response.redirect()` / `response.notFound()` must fire in the synchronous shell render**, before any `await` / `<Suspense>`. The HTTP head commits when the shell is ready; status/headers/cookies set from a suspended subtree are lost, and `redirect`/`notFound` thrown below a Suspense boundary are swallowed.
 - **`ctx.llm`, `ctx.rooms`, and `ctx.connections` are on mutation + action only, NOT query** (reactive purity). `action` has no direct `ctx.db`; use `ctx.runQuery` / `ctx.runMutation`.
-- **`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.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`. The call timeout is an idle timeout (`PYLON_FN_CALL_TIMEOUT`, 30s default; Stack0 Cloud 300s): each stream event resets it, and the total run is capped at 10× the timeout. Set `timeout: <secs>` on the def when a step (a slow tool call) can be silent longer than that.
 - **`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/*`; 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`.

package/templates/directory/README.md

@@ -45,25 +45,44 @@ details), Approve / Reject, and a live count of published listings.
 Set `PYLON_OWNER_EMAIL` in `.env` (see `.env.example`) to the email you'll sign
 in with, then create that account at `/login`.
 
+## Demo data
+
+The curator's first dashboard load in `pylon dev` fills an empty review queue
+with fictional submissions (`functions/seedDemo.ts`, `lib/demo.ts`). Seeding
+runs only for the owner, only when `PYLON_DEMO_DATA` is on or when it is unset and the app runs under `pylon dev`, and only while the `Submission` 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.
+
+The starter listings seed in every environment (`functions/seedListings.ts`),
+because they are your directory's own content from `lib/site.config.ts`. Their
+names are made up; replace them with real entries. Each listing shows a
+monogram mark (`monogram` in `lib/directory.ts`) until you add logos.
+
 ## Rebrand it
 
 Brand, colors, hero copy, categories, starter listings, and submission copy
 live in **`lib/site.config.ts`**. Editing that file updates the directory, and
 a fresh database seeds from its starter listings.
 
+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                          Listing (public, FTS) + Submission (PII) + User
 lib/site.config.ts              ALL copy + brand + categories + seed listings
 functions/seedListings.ts       idempotent seed from config
+functions/seedDemo.ts           dev-only demo review queue (see Demo data)
+lib/directory.ts                shared types, tags, monogram marks
+lib/demo.ts                     demo submissions + the dev-only gate
 functions/submitListing.ts      public mutation: write a pending Submission (PII)
 functions/upvote.ts             public mutation: bump Listing.votes (live)
 functions/submissionsForOwner.ts  owner-only query: queue + submitter PII
 functions/{approve,reject}Submission.ts  owner-only moderation
-app/page.tsx                    hero + browse island
-app/directory-browse.tsx        client island: live db.useSearch + facets + votes
-app/submit/page.tsx, submit-form.tsx  the submit flow
+app/(marketing)/page.tsx        headline + browse island
+app/(marketing)/directory-browse.tsx        client island: live db.useSearch + facets + votes
+app/(marketing)/submit/page.tsx, submit-form.tsx  the submit flow
 app/dashboard/                  curator moderation queue (auth-gated, live)
 ```
 

package/templates/directory/app/(marketing)/directory-browse.tsx

@@ -6,7 +6,7 @@ import { EnsureGuest } from "@pylonsync/client";
 import { ArrowUpRight, ChevronUp } from "lucide-react";
 import { siteConfig } from "@/lib/site.config";
 import { LINK } from "@/components/marketing";
-import { parseTags, type ListingRow } from "@/lib/directory";
+import { monogram, parseTags, type ListingRow } from "@/lib/directory";
 
 // The browse island: search box, category rail, and the list.
 // `db.useSearch("Listing", …)` is a LIVE faceted full-text search: it re-runs
@@ -89,18 +89,18 @@ function BrowseInner() {
         className="h-10 w-full border border-zinc-300 bg-white px-3 font-mono text-[13px] text-zinc-900 outline-none placeholder:text-zinc-400 focus:border-brand"
       />
 
-      <div className="mt-6 grid gap-8 lg:grid-cols-[180px_1fr]">
+      <div className="mt-6 grid grid-cols-[minmax(0,1fr)] gap-6 lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-8">
         {/* Category rail. Live counts per category come from the search. On
-            narrow screens the same links run in a horizontal row. */}
-        <aside>
+            narrow screens the same links wrap as a row of chips. */}
+        <aside className="min-w-0">
           <p className="border-b border-zinc-200 pb-2 text-[12px] font-medium uppercase tracking-wide text-zinc-500">
             Category
           </p>
-          <ul className="mt-2 flex gap-x-4 gap-y-1 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible">{facetLinks}</ul>
+          <ul className="mt-3 flex flex-wrap gap-2 lg:mt-2 lg:flex-col lg:gap-0">{facetLinks}</ul>
         </aside>
 
         {/* Results */}
-        <div>
+        <div className="min-w-0">
           <div className="flex items-center justify-between border-b border-zinc-200 pb-2 text-[13px] text-zinc-500">
             <span className={MONO_SMALL}>
               {search.total} {search.total === 1 ? "tool" : "tools"}
@@ -163,14 +163,16 @@ function FacetLink({
   onClick: () => void;
 }) {
   return (
-    <li className="shrink-0">
+    <li>
       <button
         type="button"
         onClick={onClick}
         aria-pressed={active}
         className={
-          "flex w-full items-baseline gap-2 py-0.5 text-left text-[14px] lg:justify-between " +
-          (active ? "font-medium text-zinc-900" : "text-brand hover:underline")
+          "flex w-full items-baseline gap-2 border px-2.5 py-1 text-left text-[13px] lg:justify-between lg:border-0 lg:px-0 lg:py-0.5 lg:text-[14px] " +
+          (active
+            ? "border-zinc-900 font-medium text-zinc-900"
+            : "border-zinc-200 text-brand hover:border-zinc-300 lg:hover:underline")
         }
       >
         <span>{label}</span>
@@ -183,8 +185,9 @@ function FacetLink({
 function ListingRowItem({ listing }: { listing: ListingRow }) {
   const tags = parseTags(listing.tags);
   return (
-    <li className="grid grid-cols-[44px_1fr_20px] items-start gap-3 border-b border-zinc-200 py-3">
+    <li className="grid grid-cols-[44px_36px_minmax(0,1fr)_20px] items-start gap-3 border-b border-zinc-200 py-3">
       <VoteButton listingId={listing.id} votes={listing.votes} />
+      <ToolMark name={listing.name} />
       <div className="min-w-0">
         <div className="flex flex-wrap items-baseline gap-x-2">
           <a href={listing.url} target="_blank" rel="noopener noreferrer" className="text-[14px] font-semibold text-zinc-900 hover:text-brand">
@@ -211,6 +214,20 @@ function ListingRowItem({ listing }: { listing: ListingRow }) {
   );
 }
 
+// A tool's monogram mark (see monogram in lib/directory.ts).
+function ToolMark({ name }: { name: string }) {
+  const m = monogram(name);
+  return (
+    <span
+      aria-hidden
+      className="flex size-9 items-center justify-center rounded-md font-mono text-[13px] font-semibold tracking-tight"
+      style={{ backgroundColor: m.bg, color: m.fg }}
+    >
+      {m.letters}
+    </span>
+  );
+}
+
 // The upvote control. Clicking calls the public `upvote` mutation; the count
 // you see comes from the LIVE search, so it ticks up here and in every other
 // open tab. localStorage remembers your votes so the arrow stays "voted".
@@ -267,8 +284,9 @@ function BrowseSkeleton({ bare }: { bare?: boolean }) {
   const list = (
     <ul>
       {Array.from({ length: 6 }).map((_, i) => (
-        <li key={i} className="grid grid-cols-[44px_1fr_20px] gap-3 border-b border-zinc-200 py-3">
+        <li key={i} className="grid grid-cols-[44px_36px_minmax(0,1fr)_20px] gap-3 border-b border-zinc-200 py-3">
           <div className="mx-auto h-8 w-6 animate-pulse bg-zinc-100" />
+          <div className="size-9 animate-pulse rounded-md bg-zinc-100" />
           <div className="space-y-2 py-0.5">
             <div className="h-3.5 w-1/3 animate-pulse bg-zinc-100" />
             <div className="h-3 w-2/3 animate-pulse bg-zinc-100" />
@@ -281,7 +299,7 @@ function BrowseSkeleton({ bare }: { bare?: boolean }) {
   return (
     <div>
       <div className="h-10 w-full animate-pulse border border-zinc-200 bg-zinc-50" />
-      <div className="mt-6 grid gap-8 lg:grid-cols-[180px_1fr]">
+      <div className="mt-6 grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-[180px_minmax(0,1fr)]">
         <div className="hidden h-40 animate-pulse bg-zinc-50 lg:block" />
         {list}
       </div>

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

@@ -16,11 +16,13 @@ export const metadata: Metadata = {
 // Listing table. Copy comes from siteConfig; the listings seed on first visit.
 // Doesn't read `auth`, so the public page stays cacheable.
 export default function LandingPage() {
-  const { brand, intro } = siteConfig;
+  const { intro } = siteConfig;
   return (
-    <div className={`${WRAP} pb-20 pt-8`}>
-      <h1 className="font-display text-[22px] leading-tight text-zinc-900">{brand.name}</h1>
-      <p className="mt-1 max-w-2xl text-[14px] leading-relaxed text-zinc-600">{intro.description}</p>
+    <div className={`${WRAP} pb-20 pt-10 sm:pt-14`}>
+      <h1 className="text-balance text-[1.75rem] font-semibold leading-tight tracking-[-0.02em] text-zinc-900 sm:text-[2.25rem]">
+        {intro.headline}
+      </h1>
+      <p className="mt-2 max-w-2xl text-[15px] leading-relaxed text-zinc-600">{intro.description}</p>
       <div id="browse" className="mt-5">
         <DirectoryBrowse />
       </div>

package/templates/directory/app/auth-form.tsx

@@ -59,7 +59,7 @@ export function AuthForm() {
             required
             autoComplete="email"
             placeholder="you@yourbusiness.com"
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className="h-10 w-full border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand"
           />
         </label>
         <label className="block">
@@ -71,18 +71,18 @@ export function AuthForm() {
             required
             autoComplete={mode === "login" ? "current-password" : "new-password"}
             placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className="h-10 w-full border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand"
           />
         </label>
         {error ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
+          <p className="border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
             {error}
           </p>
         ) : null}
         <button
           type="submit"
           disabled={pending}
-          className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
+          className="inline-flex h-10 w-full items-center justify-center bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
         >
           {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
         </button>