@pylonsync/create-pylon 0.3.269 → 0.3.270

package/templates/default/lib/site.ts

@@ -0,0 +1,261 @@
+// Content for the rest of the marketing site — solutions, resources, company,
+// and comparison pages. Each collection drives a dynamic route AND the footer
+// columns, so the links and the pages can never drift. Fictional demo copy —
+// swap it for your own.
+
+export type ContentSection = { title: string; body: string };
+
+export type SitePage = {
+  slug: string;
+  navLabel: string; // label in nav/footer
+  eyebrow: string;
+  title: string; // hero headline
+  summary: string;
+  sections: ContentSection[];
+};
+
+export const SOLUTIONS: SitePage[] = [
+  {
+    slug: "startups",
+    navLabel: "For startups",
+    eyebrow: "Solutions",
+    title: "Move fast without losing the thread.",
+    summary:
+      "Keep a small team aligned as everything changes weekly. Acme gives you one place to plan, build, and ship before the next pivot.",
+    sections: [
+      { title: "One tool, not ten", body: "Projects, tasks, and docs in one place, so you are not paying for or stitching together five apps." },
+      { title: "Set up in minutes", body: "No admin overhead. Invite the team and start working the same day." },
+      { title: "Grows with you", body: "The same workspace works at five people and at fifty." },
+    ],
+  },
+  {
+    slug: "agencies",
+    navLabel: "For agencies",
+    eyebrow: "Solutions",
+    title: "Run every client like clockwork.",
+    summary:
+      "Give each client their own space, keep the work organized, and show progress without a status meeting.",
+    sections: [
+      { title: "A space per client", body: "Separate workspaces keep every engagement tidy and private." },
+      { title: "Shareable views", body: "Send clients a read-only view of exactly what is in flight." },
+      { title: "Reusable templates", body: "Start every new engagement from a proven playbook." },
+    ],
+  },
+  {
+    slug: "enterprise",
+    navLabel: "For enterprise",
+    eyebrow: "Solutions",
+    title: "Scale without the chaos.",
+    summary:
+      "Bring hundreds of people into one system of record, with the controls and visibility a larger org needs.",
+    sections: [
+      { title: "SSO and roles", body: "Single sign-on and granular roles keep access where it belongs." },
+      { title: "Audit log", body: "A complete record of who changed what, and when." },
+      { title: "Rollups", body: "See progress across teams and departments in one view." },
+    ],
+  },
+  {
+    slug: "teams",
+    navLabel: "For teams",
+    eyebrow: "Solutions",
+    title: "Built for how your team works.",
+    summary:
+      "Whether you build, design, market, or support, Acme adapts to your process instead of forcing a new one.",
+    sections: [
+      { title: "Your workflow", body: "Custom statuses and fields match the way your team already works." },
+      { title: "Cross-team work", body: "Hand work between teams without it falling through a crack." },
+      { title: "Less status-chasing", body: "Everyone sees the same live picture, so updates write themselves." },
+    ],
+  },
+];
+
+export const RESOURCES: SitePage[] = [
+  {
+    slug: "docs",
+    navLabel: "Docs",
+    eyebrow: "Resources",
+    title: "Documentation.",
+    summary: "Everything you need to set up Acme and get your team productive.",
+    sections: [
+      { title: "Getting started", body: "Create a workspace, invite your team, and ship your first project." },
+      { title: "Guides", body: "Deep dives on projects, tasks, docs, automations, and analytics." },
+      { title: "API", body: "Build on the typed Acme API and webhooks." },
+    ],
+  },
+  {
+    slug: "guides",
+    navLabel: "Guides",
+    eyebrow: "Resources",
+    title: "Guides and playbooks.",
+    summary: "Practical walkthroughs for getting the most out of Acme.",
+    sections: [
+      { title: "Run a sprint", body: "Plan, track, and review a two-week cycle in Acme." },
+      { title: "Automate intake", body: "Route incoming work to the right team automatically." },
+      { title: "Report to leadership", body: "Build a dashboard that answers the questions you get asked." },
+    ],
+  },
+  {
+    slug: "changelog",
+    navLabel: "Changelog",
+    eyebrow: "Resources",
+    title: "What's new.",
+    summary: "Every improvement we ship, in one place.",
+    sections: [
+      { title: "This week", body: "Faster search, a redesigned task list, and new automation triggers." },
+      { title: "Last week", body: "Timeline view for projects and CSV export for analytics." },
+      { title: "Earlier", body: "Webhooks, custom fields, and version history for docs." },
+    ],
+  },
+  {
+    slug: "api",
+    navLabel: "API reference",
+    eyebrow: "Resources",
+    title: "API reference.",
+    summary: "A typed REST API and webhooks for everything in Acme.",
+    sections: [
+      { title: "Authentication", body: "API keys scoped to a workspace, revocable at any time." },
+      { title: "Resources", body: "Projects, tasks, docs, and automations, all over the same API." },
+      { title: "Webhooks", body: "Subscribe to events and react to changes in real time." },
+    ],
+  },
+  {
+    slug: "status",
+    navLabel: "Status",
+    eyebrow: "Resources",
+    title: "System status.",
+    summary: "Live status for every Acme service.",
+    sections: [
+      { title: "API", body: "Operational — 99.99% over the last 90 days." },
+      { title: "Web app", body: "Operational — no incidents this week." },
+      { title: "Webhooks", body: "Operational — delivering within seconds." },
+    ],
+  },
+];
+
+export const COMPANY: SitePage[] = [
+  {
+    slug: "about",
+    navLabel: "About",
+    eyebrow: "Company",
+    title: "About Acme.",
+    summary: "We build the workspace we always wanted: fast, focused, and a pleasure to use.",
+    sections: [
+      { title: "Our mission", body: "Help teams do their best work without fighting their tools." },
+      { title: "How we work", body: "Small team, weekly releases, every decision close to the user." },
+      { title: "Where we are", body: "Remote-first, with people across a dozen time zones." },
+    ],
+  },
+  {
+    slug: "blog",
+    navLabel: "Blog",
+    eyebrow: "Company",
+    title: "The Acme blog.",
+    summary: "Notes on building Acme, and on building product in general.",
+    sections: [
+      { title: "Why one tool beats ten", body: "The hidden cost of stitching your stack together." },
+      { title: "Shipping weekly", body: "How a small team keeps a steady release cadence." },
+      { title: "Designing for focus", body: "The principles behind the Acme interface." },
+    ],
+  },
+  {
+    slug: "careers",
+    navLabel: "Careers",
+    eyebrow: "Company",
+    title: "Work at Acme.",
+    summary: "We are a small team that ships a lot. If that sounds good, come build with us.",
+    sections: [
+      { title: "Engineering", body: "Full-stack engineers who care about craft and speed." },
+      { title: "Design", body: "Product designers who sweat the details." },
+      { title: "Support", body: "People who love helping customers succeed." },
+    ],
+  },
+  {
+    slug: "contact",
+    navLabel: "Contact",
+    eyebrow: "Company",
+    title: "Get in touch.",
+    summary: "Questions, feedback, or just want to say hi? We would love to hear from you.",
+    sections: [
+      { title: "Sales", body: "Talk through whether Acme is a fit for your team." },
+      { title: "Support", body: "Get help from a human, usually within a few hours." },
+      { title: "Press", body: "Logos, screenshots, and company facts for the press." },
+    ],
+  },
+  {
+    slug: "privacy",
+    navLabel: "Privacy",
+    eyebrow: "Company",
+    title: "Privacy.",
+    summary: "How Acme handles your data, in plain language.",
+    sections: [
+      { title: "What we collect", body: "Only what we need to run the product and support you." },
+      { title: "How we use it", body: "To operate Acme — never sold, never rented." },
+      { title: "Your control", body: "Export or delete your data at any time." },
+    ],
+  },
+];
+
+export type Comparison = {
+  slug: string;
+  navLabel: string;
+  competitor: string;
+  title: string;
+  summary: string;
+  rows: { dim: string; acme: string; them: string }[];
+};
+
+// Generic, made-up competitors so the template ships no real brand names.
+export const COMPARISONS: Comparison[] = [
+  {
+    slug: "beacon",
+    navLabel: "Acme vs Beacon",
+    competitor: "Beacon",
+    title: "Acme vs Beacon",
+    summary:
+      "Beacon is a capable tool, but it splits projects, docs, and automation across separate products. Acme brings them into one fast workspace.",
+    rows: [
+      { dim: "Projects, tasks, and docs", acme: "In one workspace", them: "Separate products" },
+      { dim: "Real-time sync", acme: "Built in", them: "Add-on" },
+      { dim: "Automations", acme: "Included", them: "Higher tier" },
+      { dim: "Typed API", acme: "Yes", them: "Partial" },
+      { dim: "Setup time", acme: "Minutes", them: "Hours" },
+    ],
+  },
+  {
+    slug: "orbit",
+    navLabel: "Acme vs Orbit",
+    competitor: "Orbit",
+    title: "Acme vs Orbit",
+    summary:
+      "Orbit is flexible but slow to set up and heavy to run. Acme gives you the same power with a fraction of the overhead.",
+    rows: [
+      { dim: "Time to first project", acme: "Same day", them: "Onboarding required" },
+      { dim: "Speed", acme: "Instant, real-time", them: "Page reloads" },
+      { dim: "Per-seat pricing", acme: "No surprises", them: "Adds up fast" },
+      { dim: "Analytics", acme: "Built in", them: "Separate tool" },
+      { dim: "Learning curve", acme: "Gentle", them: "Steep" },
+    ],
+  },
+  {
+    slug: "tempo",
+    navLabel: "Acme vs Tempo",
+    competitor: "Tempo",
+    title: "Acme vs Tempo",
+    summary:
+      "Tempo is built for managers; Acme is built for the whole team. Everyone gets a fast, shared view of the work.",
+    rows: [
+      { dim: "Designed for", acme: "The whole team", them: "Managers" },
+      { dim: "Daily driver", acme: "Yes", them: "Reporting layer" },
+      { dim: "Docs included", acme: "Yes", them: "No" },
+      { dim: "Automations", acme: "Included", them: "Limited" },
+      { dim: "Self-serve", acme: "Yes", them: "Sales-led" },
+    ],
+  },
+];
+
+export function bySlug<T extends { slug: string }>(
+  list: T[],
+  slug: string,
+): T | undefined {
+  return list.find((x) => x.slug === slug);
+}

package/templates/{ssr → default}/package.json

@@ -13,6 +13,7 @@
     "@pylonsync/sdk": "^__PYLON_VERSION__",
     "@pylonsync/functions": "^__PYLON_VERSION__",
     "@pylonsync/client": "^__PYLON_VERSION__",
+    "@pylonsync/stripe": "^__PYLON_VERSION__",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.3.0",
@@ -26,6 +27,7 @@
   },
   "devDependencies": {
     "@pylonsync/cli": "^__PYLON_VERSION__",
+    "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "typescript": "^5.6.0"

package/templates/{ssr → default}/tsconfig.json

@@ -8,11 +8,11 @@
     "strict": true,
     "skipLibCheck": true,
     "lib": ["ES2022", "DOM"],
-    "types": ["react", "react-dom"],
+    "types": ["react", "react-dom", "node"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }
   },
-  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*"]
+  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*", "functions/**/*"]
 }

package/templates/todo/app/page.tsx

@@ -9,7 +9,7 @@ import { TodoApp } from "./todo-app";
 export const metadata: Metadata = {
   title: "__APP_NAME__ — a live Pylon todo",
   description:
-    "A server-rendered todo list with live, optimistic, per-user sync — one binary, one port. Open two tabs and watch them stay in sync.",
+    "A server-rendered todo list with live, optimistic, per-user sync. Open two tabs and watch them stay in sync.",
 };
 
 // `app/page.tsx` → `/`. The heading and intro are server-rendered (view

package/templates/todo/tsconfig.json

@@ -14,5 +14,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*"]
+  "include": ["app.ts", "app/**/*", "components/**/*", "lib/**/*", "functions/**/*"]
 }

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

@@ -1,142 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { passwordLogin, passwordRegister, ApiError } from "@pylonsync/client";
-import { Button } from "@/components/ui/button";
-
-// The email/password form, shared by /login and /signup. It calls the built-in
-// auth API directly — `passwordLogin` / `passwordRegister` (from
-// @pylonsync/client) POST to `/api/auth/password/*`.
-//
-// On success the server sets an HttpOnly session cookie on the response. We do
-// a full navigation to /dashboard rather than a client transition: the fresh
-// page load hands that cookie to the SSR runtime (which resolves auth and
-// renders the dashboard server-side) and to the sync engine (which
-// authenticates with the same cookie via `credentials: include`). Because the
-// cookie is HttpOnly it can never be read by JavaScript, so there is no
-// session token sitting in `localStorage` for an XSS to lift. (Cross-origin or
-// native clients, which can't rely on the cookie, use the token-based path via
-// `persistSession` instead — not needed here, same origin.)
-export function AuthForm({ mode }: { mode: "login" | "signup" }) {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [displayName, setDisplayName] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [pending, setPending] = useState(false);
-
-  async function onSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setError(null);
-    setPending(true);
-    try {
-      if (mode === "login") {
-        await passwordLogin({ email, password });
-      } else {
-        await passwordRegister({
-          email,
-          password,
-          displayName: displayName.trim() || undefined,
-        });
-      }
-      // Full navigation: the SSR dashboard re-renders with the new cookie.
-      window.location.assign("/dashboard");
-    } catch (err) {
-      setError(messageFor(err));
-      setPending(false); // keep the form up to retry (success navigates away)
-    }
-  }
-
-  return (
-    <form onSubmit={onSubmit} className="space-y-4">
-      {mode === "signup" ? (
-        <Field
-          label="Name"
-          value={displayName}
-          onChange={setDisplayName}
-          autoComplete="name"
-          placeholder="optional"
-        />
-      ) : null}
-      <Field
-        label="Email"
-        type="email"
-        value={email}
-        onChange={setEmail}
-        required
-        autoComplete="email"
-        placeholder="you@example.com"
-      />
-      <Field
-        label="Password"
-        type="password"
-        value={password}
-        onChange={setPassword}
-        required
-        autoComplete={mode === "login" ? "current-password" : "new-password"}
-        placeholder={mode === "signup" ? "at least 8 characters" : undefined}
-      />
-      {error ? (
-        <p className="rounded-md border border-red-600/30 bg-red-600/10 px-3 py-2 text-sm text-red-700">
-          {error}
-        </p>
-      ) : null}
-      <Button type="submit" disabled={pending} className="w-full">
-        {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
-      </Button>
-    </form>
-  );
-}
-
-function Field({
-  label,
-  value,
-  onChange,
-  type = "text",
-  required,
-  autoComplete,
-  placeholder,
-}: {
-  label: string;
-  value: string;
-  onChange: (v: string) => void;
-  type?: string;
-  required?: boolean;
-  autoComplete?: string;
-  placeholder?: string;
-}) {
-  return (
-    <label className="block space-y-1.5">
-      <span className="text-sm font-medium">{label}</span>
-      <input
-        type={type}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        required={required}
-        autoComplete={autoComplete}
-        placeholder={placeholder}
-        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
-      />
-    </label>
-  );
-}
-
-// Map the framework's auth error codes to friendly copy. `ApiError` carries a
-// stable `.code` (and `.status`) so you branch on the code, not the message.
-function messageFor(err: unknown): string {
-  if (err instanceof ApiError) {
-    switch (err.code) {
-      case "INVALID_CREDENTIALS":
-        return "Wrong email or password.";
-      case "USER_EXISTS":
-        return "That email is already in use — sign in instead.";
-      case "WEAK_PASSWORD":
-        return "Pick a stronger password (at least 8 characters).";
-      case "RATE_LIMITED":
-        return "Too many attempts — try again in a minute.";
-      default:
-        return err.message;
-    }
-  }
-  if (err instanceof Error) return err.message;
-  return "Something went wrong. Try again.";
-}

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

@@ -1,192 +0,0 @@
-"use client";
-
-import React, { useCallback, useEffect, useState } from "react";
-import { db } from "@pylonsync/react";
-import {
-  useAuth,
-  OrganizationSwitcher,
-  listOrgMembers,
-  createInvite,
-  type OrgMember,
-} from "@pylonsync/client";
-import { Button } from "@/components/ui/button";
-
-export interface Project {
-  id: string;
-  orgId: string;
-  name: string;
-  createdAt: string;
-}
-
-// The workspace. `<OrganizationSwitcher>` (from @pylonsync/client) lists your
-// orgs, creates new ones, and switches your active tenant via
-// /api/auth/select-org — all against the framework's built-in org system. The
-// rest of the page keys off `tenantId` (your active org).
-export function Workspace() {
-  const { tenantId, signOut } = useAuth();
-
-  async function onSignOut() {
-    await signOut();
-    window.location.assign("/");
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between gap-3">
-        <OrganizationSwitcher />
-        <Button variant="ghost" size="sm" onClick={onSignOut}>
-          Sign out
-        </Button>
-      </div>
-
-      {tenantId ? (
-        <div className="grid gap-6 sm:grid-cols-2">
-          <Projects orgId={tenantId} />
-          <Members orgId={tenantId} />
-        </div>
-      ) : (
-        <div className="rounded-lg border border-dashed px-6 py-10 text-center text-sm text-muted-foreground">
-          Create or select an organization above to get started. Each org is an
-          isolated tenant — its projects and members are private to it.
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Tenant-scoped data. `db.useQuery("Project")` returns only your active org's
-// projects (the policy gates on `auth.tenantId == data.orgId`), and switching
-// orgs re-syncs the list. `db.insert` is optimistic; we pass `orgId` = the
-// active tenant so the row lands in this org — the policy rejects any other.
-function Projects({ orgId }: { orgId: string }) {
-  const [name, setName] = useState("");
-  const { data: all } = db.useQuery<Project>("Project");
-  // Defensive filter while a tenant switch re-syncs the local replica.
-  const projects = all.filter((p) => p.orgId === orgId);
-
-  async function add(e: React.FormEvent) {
-    e.preventDefault();
-    const value = name.trim();
-    if (!value) return;
-    setName("");
-    await db.insert("Project", { orgId, name: value });
-  }
-
-  return (
-    <section className="space-y-3">
-      <h2 className="text-sm font-semibold">Projects</h2>
-      <form onSubmit={add} className="flex items-center gap-2">
-        <input
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder="New project…"
-          aria-label="Project name"
-          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        />
-        <Button type="submit" size="sm">
-          Add
-        </Button>
-      </form>
-      {projects.length === 0 ? (
-        <p className="text-sm text-muted-foreground">No projects yet.</p>
-      ) : (
-        <ul className="space-y-1.5">
-          {projects.map((p) => (
-            <li
-              key={p.id}
-              className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
-            >
-              <span className="truncate">{p.name}</span>
-              <button
-                type="button"
-                aria-label="Delete project"
-                onClick={() => db.delete("Project", p.id)}
-                className="text-muted-foreground/40 transition-colors hover:text-red-600"
-              >
-                ✕
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
-      <p className="text-xs text-muted-foreground">
-        Tenant-scoped: only this org&apos;s projects, enforced by policy — switch
-        orgs and the list changes.
-      </p>
-    </section>
-  );
-}
-
-// Membership + invites go through the framework's /api/auth/orgs/:id endpoints
-// (the @pylonsync/client helpers). The framework gates invites to org admins,
-// so a member calling createInvite gets a 403 — real RBAC, no extra code.
-function Members({ orgId }: { orgId: string }) {
-  const [members, setMembers] = useState<OrgMember[] | null>(null);
-  const [email, setEmail] = useState("");
-  const [note, setNote] = useState("");
-
-  const refresh = useCallback(() => {
-    void listOrgMembers(orgId).then(setMembers);
-  }, [orgId]);
-
-  useEffect(() => {
-    setMembers(null);
-    refresh();
-  }, [refresh]);
-
-  async function invite(e: React.FormEvent) {
-    e.preventDefault();
-    const value = email.trim();
-    if (!value) return;
-    setEmail("");
-    setNote("");
-    try {
-      await createInvite(orgId, value, "member");
-      setNote(`Invited ${value}.`);
-      refresh();
-    } catch {
-      setNote("Only org admins can invite members.");
-    }
-  }
-
-  return (
-    <section className="space-y-3">
-      <h2 className="text-sm font-semibold">Members</h2>
-      {members === null ? (
-        <p className="text-sm text-muted-foreground">Loading…</p>
-      ) : (
-        <ul className="space-y-1.5">
-          {members.map((m) => (
-            <li
-              key={m.user_id}
-              className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
-            >
-              <span className="truncate font-mono text-xs">
-                {shortId(m.user_id)}
-              </span>
-              <span className="text-xs text-muted-foreground">{m.role}</span>
-            </li>
-          ))}
-        </ul>
-      )}
-      <form onSubmit={invite} className="flex items-center gap-2">
-        <input
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="invite by email…"
-          aria-label="Invite email"
-          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        />
-        <Button type="submit" size="sm" variant="outline">
-          Invite
-        </Button>
-      </form>
-      {note && <p className="text-xs text-muted-foreground">{note}</p>}
-    </section>
-  );
-}
-
-function shortId(id: string) {
-  return id.replace(/^user_/, "").slice(0, 10);
-}

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

@@ -1,26 +0,0 @@
-import React from "react";
-import { type Metadata, type PageProps } from "@pylonsync/react";
-import { Workspace } from "./dashboard-client";
-
-export const metadata: Metadata = {
-  title: "Dashboard — Acme",
-  robots: "noindex",
-};
-
-// `app/dashboard/page.tsx` → `/dashboard`. Server-side auth gate: anonymous
-// requests get a 307 to /login before any HTML is sent (works with JS off, no
-// flash of the dashboard). The redirect fires — and we return — in the
-// synchronous shell render. The workspace itself is a client island that reads
-// your active org from the session.
-export default function DashboardPage({ auth, response }: PageProps) {
-  if (!auth.user_id) {
-    response.redirect("/login");
-    return null;
-  }
-  return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-semibold tracking-tight">Workspace</h1>
-      <Workspace />
-    </div>
-  );
-}