@pylonsync/create-pylon 0.19.1 → 0.20.0

package/bin/create-pylon.js

@@ -66,7 +66,9 @@ const PYLON_VERSION = JSON.parse(
 // Each template declares which platforms it supports. Unified templates
 // (the default and every archetype) are a single full-stack SSR app and
 // take no platforms at all. The few non-unified monorepo templates list
-// the platforms whose demo flow they actually ship.
+// the platforms whose demo flow they actually ship. A unified template can
+// also list `nativePlatforms`: passing --platforms with any of them scaffolds
+// the monorepo instead (backend/<t> as apps/api plus one app per platform).
 // ---------------------------------------------------------------------------
 
 // `web` and `vite` both render into apps/web — they're mutually
@@ -106,9 +108,10 @@ const TEMPLATE_REGISTRY = {
 	},
 	consumer: {
 		blurb:
-			"Photo sharing — feed, explore, post pages, profiles, follows, likes, comments, and saves. One SSR app.",
+			"Photo sharing — feed, explore, post pages, profiles, follows, likes, comments, and saves. One SSR app. --platforms ios,expo scaffolds native apps on a shared backend instead.",
 		platforms: [],
 		unified: true,
+		nativePlatforms: ["ios", "expo"],
 	},
 	chat: {
 		blurb:
@@ -196,7 +199,13 @@ const TEMPLATE_REGISTRY = {
 	},
 	"ai-chat": {
 		blurb:
-			"Streaming AI chat — token streaming via the built-in /api/ai/stream (your key stays server-side), multi-conversation history that's owner-scoped + synced across tabs in realtime, guest or signed-in. Set PYLON_AI_API_KEY to enable. One SSR app.",
+			"AI chat — guests start chatting right away, replies stream through a server function (your key stays server-side), and history syncs across tabs and moves to the account on sign-in. Set ANTHROPIC_API_KEY or OPENAI_API_KEY to enable. One SSR app.",
+		platforms: [],
+		unified: true,
+	},
+	imessage: {
+		blurb:
+			"AI assistant people text over iMessage. Sendblue or a relay on your own Mac, an allowlist of who it answers, per-contact rate limits, notes and reminder tools on Pylon's agent(), and a live owner dashboard with iMessage-style threads. One SSR app.",
 		platforms: [],
 		unified: true,
 	},
@@ -288,7 +297,8 @@ Usage: npm create @pylonsync/pylon [name] [options]
 ${tmplLines.join("\n")}
 
   --platforms <list>     comma list: ${PLATFORMS_AVAILABLE.join(",")}  (default: web)
-                         ignored for unified templates — they're a single full-stack app
+                         ignored for unified templates — they're a single full-stack app —
+                         except consumer, where ios,expo scaffolds native apps on a shared backend
   --bun|--pnpm|--yarn|--npm
   --skip-install         scaffold only, don't run install
 
@@ -296,6 +306,7 @@ Examples:
   npm create @pylonsync/pylon my-app                        # default — the smallest SSR app that runs
   npm create @pylonsync/pylon my-app --template saas        # building a product? start here: landing + orgs + billing
   npm create @pylonsync/pylon my-app --template mobile      # App Store-ready Expo app + backend: onboarding, sign-in, paywall
+  npm create @pylonsync/pylon my-app --template consumer --platforms ios,expo   # photo app: SwiftUI + Expo on one backend
   npm create @pylonsync/pylon my-app --template todo        # live, optimistic todo (SSR, one port)
   npm create @pylonsync/pylon my-app --template chat         # realtime live chat room
   npm create @pylonsync/pylon my-app --template waitlist     # coming-soon landing + live signup counter
@@ -375,8 +386,18 @@ if (!flags.template) {
 }
 flags.template = resolveTemplate(flags.template);
 // `unified` templates (default) are a single app, not a monorepo — they take
-// no platforms. Skip the platform prompt + validation for them entirely.
-const isUnified = TEMPLATE_REGISTRY[flags.template]?.unified === true;
+// no platforms. Skip the platform prompt + validation for them entirely,
+// unless the template has native apps and --platforms names one of them
+// (any other platform list is ignored, as for every unified template).
+const templateEntry = TEMPLATE_REGISTRY[flags.template];
+const requestedPlatforms = (flags.platforms ?? "")
+	.split(",")
+	.map((p) => p.trim().toLowerCase())
+	.filter(Boolean);
+const wantsNative = requestedPlatforms.some((p) =>
+	(templateEntry?.nativePlatforms ?? []).includes(p),
+);
+const isUnified = templateEntry?.unified === true && !wantsNative;
 if (!isUnified && !flags.platforms) {
 	const supported = TEMPLATE_REGISTRY[flags.template].platforms.join(", ");
 	const ans = isInteractive
@@ -461,7 +482,9 @@ if (!TEMPLATES_AVAILABLE.includes(flags.template)) {
 // Reject combos a template doesn't yet support — better to fail loud
 // than to scaffold an incomplete tree (e.g. a web-only template + expo
 // would skip frontend entirely and leave a half-empty workspace).
-const supportedPlatforms = TEMPLATE_REGISTRY[flags.template].platforms;
+const supportedPlatforms = wantsNative
+	? TEMPLATE_REGISTRY[flags.template].nativePlatforms
+	: TEMPLATE_REGISTRY[flags.template].platforms;
 const invalidForTemplate = platforms.filter(
 	(p) => !supportedPlatforms.includes(p),
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "Scaffold a new Pylon app — realtime backend + web/mobile/expo frontends in one command. Run via `npm create @pylonsync/pylon@latest`.",
   "publishConfig": {
     "access": "public"

package/templates/agency/.env.example

@@ -10,3 +10,10 @@ PYLON_OWNER_EMAIL=you@yourstudio.com
 # ── Site URL (optional) ──────────────────────────────────────────────────────
 # Used by robots.txt + sitemap.xml. Point it at your real domain in production.
 # SITE_URL=https://yourstudio.com
+
+# ── Demo data ────────────────────────────────────────────────────────────────
+# `pylon dev` fills an empty back-office with fictional leads, clients, and
+# invoices. 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/agency/README.md

@@ -20,7 +20,7 @@ the public page tick down — with no refresh.
 ## How the realtime works
 
 - `Capacity` is a public-read, PII-free row holding the booking window + open
-  slot count. `app/contact-form.tsx` reads it with `db.useQuery("Capacity")`, so
+  slot count. `app/(marketing)/contact-form.tsx` reads it with `db.useQuery("Capacity")`, so
   the hero's "N project slots open" pill is live everywhere.
 - `functions/submitInquiry.ts` is a public **mutation** — anyone can send a
   project lead. A lead does not consume a slot because it is not a booking.
@@ -30,6 +30,11 @@ the public page tick down — with no refresh.
 - `functions/seedCapacity.ts` creates the Capacity row from config on first
   visit (idempotent).
 
+An empty booking window label means the quarter a new project could start in:
+the quarter of the date three weeks from today (`bookingWindow` in
+`lib/agency.ts`). It never names a quarter that has passed. Set a fixed label in the dashboard only for a window
+with a real end date.
+
 ## Privacy
 
 The `Inquiry` entity holds the prospect's name, email, company, and budget (PII),
@@ -47,6 +52,19 @@ slots). It updates live as leads land.
 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 owner's first dashboard load in `pylon dev` fills an empty back-office with
+fictional leads, clients, and invoices (`functions/seedStudioBackoffice.ts`,
+`lib/demo.ts`). Invoice dates are relative to today. Seeding runs only when
+`PYLON_DEMO_DATA` is on, or when it is unset and the app runs under `pylon dev`, and each
+table only while it 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 public portfolio is seeded in every environment
+(`functions/seedProjects.ts`), because it copies your own case studies from
+`lib/site.config.ts`.
+
 ## Placeholders to replace
 
 The page renders **clearly marked** placeholders anywhere a real photo belongs —
@@ -66,17 +84,24 @@ and budget options live in **`lib/site.config.ts`**. Edit that file, or have
 Mast generate it, to update the studio. A fresh database seeds capacity from
 the same config.
 
+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                        Inquiry (PII) + Capacity (public, live) + User
 lib/site.config.ts            ALL copy + brand + work/team/services (edit this)
 functions/seedCapacity.ts     idempotent capacity seed from config
+functions/seedStudioBackoffice.ts  dev-only demo leads, clients, invoices
+lib/agency.ts                 shared types, booking window, work-grid rule
+lib/demo.ts                   demo leads + the dev-only gate
 functions/submitInquiry.ts    public mutation: write a lead (PII), no slot change
 functions/inquiriesForOwner.ts  owner-only query: leads + PII
 functions/{book,decline}Inquiry.ts, setCapacity.ts  owner-only mutations
-app/page.tsx                  the studio site (server-rendered)
-app/contact-form.tsx          client island: live slots pill + inquiry form
+app/(marketing)/page.tsx      the studio site (server-rendered)
+app/(marketing)/contact-form.tsx          client island: live slots pill + inquiry form
 app/dashboard/                owner dashboard (auth-gated, live)
 ```
 

package/templates/agency/app/(marketing)/contact-form.tsx

@@ -4,12 +4,13 @@ import React, { useEffect, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { EnsureGuest } from "@pylonsync/client";
 import { siteConfig } from "@/lib/site.config";
+import { bookingWindow } from "@/lib/agency";
 
 // The realtime pieces of the page, both driven by the public, PII-free Capacity
 // row via `db.useQuery("Capacity")` — so when the owner books a project from the
 // dashboard, the "N slots open" number drops live in every open tab. No refresh.
 //
-//   • <LiveSlots>   — the hero line ("3 project slots open, Q3 2026").
+//   • <LiveSlots>   — the hero line ("3 project slots open, Q4 2026").
 //   • <ContactForm> — the "start a project" form. submitInquiry is a public
 //                     mutation, so it works for anonymous visitors; the Inquiry
 //                     it writes is pure PII and can never be read back by a
@@ -61,23 +62,24 @@ function SlotsPill({
   live?: boolean;
   loading?: boolean;
 }) {
-  const open = openSlots ?? siteConfig.capacity.openSlots;
-  const period = label || siteConfig.capacity.label;
+  // Until the Capacity row has synced there is no number to show. A reserved
+  // line keeps the hero from shifting when it arrives.
+  if (loading || openSlots === undefined) {
+    return <span aria-hidden className="inline-block h-5 w-56" />;
+  }
+  const open = openSlots;
+  const period = bookingWindow(label ?? siteConfig.capacity.label, Date.now());
   const bookedOut = open <= 0;
   return (
-    <span className="inline-flex items-center gap-2.5 text-[14px] text-zinc-700">
-      {loading ? (
-        <span className="inline-flex size-2 rounded-full bg-zinc-300" />
-      ) : (
-        <span className="relative flex size-2">
-          {live && !bookedOut ? (
-            <span className="absolute inline-flex size-2 animate-ping rounded-full bg-green-500/60" />
-          ) : null}
-          <span
-            className={"relative inline-flex size-2 rounded-full " + (bookedOut ? "bg-zinc-400" : "bg-green-600")}
-          />
-        </span>
-      )}
+    <span className="inline-flex items-center gap-2.5 text-[14px] text-zinc-700" data-testid="slots-line">
+      <span className="relative flex size-2">
+        {live && !bookedOut ? (
+          <span className="absolute inline-flex size-2 animate-ping rounded-full bg-green-500/60" />
+        ) : null}
+        <span
+          className={"relative inline-flex size-2 rounded-full " + (bookedOut ? "bg-zinc-400" : "bg-green-600")}
+        />
+      </span>
       {bookedOut ? (
         <span>Booked through {period}</span>
       ) : (
@@ -104,8 +106,8 @@ function ContactFormInner() {
   useSeedCapacity();
   const { data } = db.useQuery<CapacityRow>("Capacity");
   const row = data[0];
-  const bookedOut = (row?.openSlots ?? siteConfig.capacity.openSlots) <= 0;
-  return <FormShell bookedOut={bookedOut} period={row?.label} />;
+  const bookedOut = row ? row.openSlots <= 0 : false;
+  return <FormShell bookedOut={bookedOut} period={row ? bookingWindow(row.label, Date.now()) : undefined} />;
 }
 
 function FormShell({

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

@@ -4,7 +4,7 @@ import { WRAP, TEXT_LINK, Divider, SectionTitle, ImagePlaceholder, ProjectCard }
 import { LiveSlots, ContactForm } from "./contact-form";
 import { SeedProjects } from "./seeder";
 import { siteConfig } from "@/lib/site.config";
-import { slugify, viewFromRow, type ProjectRow, type ProjectView } from "@/lib/agency";
+import { isWideCard, slugify, viewFromRow, type ProjectRow, type ProjectView } from "@/lib/agency";
 
 export const metadata: Metadata = {
   title: siteConfig.seo.title,
@@ -41,8 +41,8 @@ function SelectedWork({ serverData }: { serverData: ServerData }) {
 
   return (
     <div className={WORK_GRID}>
-      {projects.map((p) => (
-        <ProjectCard key={p.slug} p={p} />
+      {projects.map((p, i) => (
+        <ProjectCard key={p.slug} p={p} wide={isWideCard(i, projects.length)} />
       ))}
     </div>
   );

package/templates/agency/app/(marketing)/work/page.tsx

@@ -3,7 +3,7 @@ import { Link, type Metadata, type PageProps, type ServerData } from "@pylonsync
 import { WRAP, TEXT_LINK, ProjectCard } from "@/components/marketing";
 import { SeedProjects } from "../seeder";
 import { siteConfig } from "@/lib/site.config";
-import { slugify, viewFromRow, type ProjectRow, type ProjectView } from "@/lib/agency";
+import { isWideCard, slugify, viewFromRow, type ProjectRow, type ProjectView } from "@/lib/agency";
 
 export const metadata: Metadata = {
   title: `Work — ${siteConfig.brand.name}`,
@@ -41,8 +41,8 @@ function WorkGrid({ serverData }: { serverData: ServerData }) {
   }
   return (
     <div className={WORK_GRID}>
-      {projects.map((p) => (
-        <ProjectCard key={p.slug} p={p} />
+      {projects.map((p, i) => (
+        <ProjectCard key={p.slug} p={p} wide={isWideCard(i, projects.length)} />
       ))}
     </div>
   );

package/templates/agency/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-11 w-full rounded-sm border border-zinc-300 bg-white px-3.5 text-[15px] text-ink outline-none transition placeholder:text-zinc-400 focus:border-ink"
           />
         </label>
         <label className="block">
@@ -71,7 +71,7 @@ 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-11 w-full rounded-sm border border-zinc-300 bg-white px-3.5 text-[15px] text-ink outline-none transition placeholder:text-zinc-400 focus:border-ink"
           />
         </label>
         {error ? (
@@ -82,7 +82,7 @@ export function AuthForm() {
         <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-11 w-full items-center justify-center rounded-full bg-ink text-[14px] font-medium text-white transition-opacity hover:opacity-85 disabled:opacity-60"
         >
           {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
         </button>
@@ -96,7 +96,7 @@ export function AuthForm() {
             setMode(mode === "login" ? "register" : "login");
             setError(null);
           }}
-          className="font-medium text-zinc-900 underline underline-offset-2"
+          className="font-medium text-ink underline underline-offset-4"
         >
           {mode === "login" ? "Create the owner account" : "Sign in"}
         </button>