@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/crm/CLAUDE.md

@@ -0,0 +1,7 @@
+# CLAUDE.md
+
+Agent guidance for this Pylon project lives in **AGENTS.md**, the cross-editor
+standard read by Claude Code, Cursor, Codex, and other agents. The import below
+makes it available to Claude Code:
+
+@AGENTS.md

package/templates/crm/README.md

@@ -0,0 +1,96 @@
+# __APP_NAME__
+
+A sales CRM for a small team — companies, contacts, and deals on a live
+pipeline board. One [Pylon](https://pylonsync.com) app: SSR frontend, API, auth,
+and realtime sync from one process on one port.
+
+## Develop
+
+```bash
+__RUN_DEV__
+```
+
+Open http://localhost:4321 and create an account. The first sign-in seeds a demo
+pipeline so the board isn't empty; delete `functions/seedWorkspace.ts` and
+`lib/seed.ts` once you have real customers.
+
+## What's interesting here
+
+**The board is live.** Drag a deal to another column and it moves on every
+teammate's board immediately — no refresh, no polling. Your own move takes the
+same path as theirs: write → sync → re-render, so there's one behaviour to
+reason about instead of two. Open the app in two windows and try it.
+
+**⌘K searches everything.** Deals, companies, and contacts, ranked by how well
+they match (`lib/search.ts`). It runs against the synced replica in memory, so
+results appear as you type with no request per keystroke. `/` opens it too, and
+`c` creates a deal.
+
+**The forecast is derived, never stored.** Open pipeline, weighted value, and
+win rate are computed from the deals themselves in `lib/pipeline.ts` — pure
+functions with no React and no `db`, so the arithmetic is unit-tested directly
+(`tests/pipeline.test.ts`).
+
+## Layout
+
+```
+app.ts                    entities + policies
+app/
+  page.tsx                "/" — the pipeline board
+  pipeline-view.tsx       board container
+  workspace.tsx           app shell — the ONLY place that touches `db`
+  companies/, contacts/   list views
+  deals/[id]/             deal detail + activity timeline
+  login/                  email/password auth
+components/               presentational — props in, callbacks out
+  ui/                     shadcn primitives
+lib/pipeline.ts           stages, money, metrics — pure
+lib/search.ts             ⌘K ranking — pure
+functions/                server functions
+tests/                    pure logic + component tests
+```
+
+The data boundary lives in exactly one module (`app/workspace.tsx`). Everything
+under `components/` takes data as props and reports changes through callbacks,
+which is why the component tests render them with fixtures and mock nothing.
+
+## Access
+
+Every entity is readable and writable by any **signed-in** user, and by nobody
+else — a shared pipeline is the point of a team CRM. `ownerId` records who
+created a row without partitioning access.
+
+For per-rep isolation, tighten `allowRead` in `app.ts`:
+
+```ts
+allowRead: "auth.userId == data.ownerId"
+```
+
+Contacts hold customer email and phone. There is no public route in this app and
+no policy allows an anonymous read — keep it that way if you add one.
+
+## Theme
+
+Dark by default (`class="dark"` in `app/layout.tsx`). The light tokens in
+`app/globals.css` are complete, so removing that class flips the whole app. Both
+use the standard shadcn variables, so `npx shadcn@latest add <component>` drops
+in already themed.
+
+## Grow it
+
+- **Add a field:** edit an entity in `app.ts` — the typed client and
+  REST/realtime API follow, no migration.
+- **Add a stage:** `PIPELINE` in `lib/pipeline.ts`. The board, the forecast, and
+  the stage picker all read from it.
+- **Add a view:** drop `app/reports/page.tsx` and add it to `NAV` in
+  `components/sidebar.tsx`.
+
+## Deploy
+
+```bash
+pylon lint --strict
+pylon test
+pylon deploy
+```
+
+Docs: https://docs.pylonsync.com

package/templates/crm/app/companies/companies-view.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React, { useState } from "react";
+import { db } from "@pylonsync/react";
+import { Building2, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/page-header";
+import { DataTable, type ColumnDef } from "@/components/data-table";
+import { EmptyState } from "@/components/empty-state";
+import { RecordDialog } from "@/components/record-dialog";
+import { Avatar } from "@/components/avatar";
+import { money, relativeTime } from "@/lib/pipeline";
+import { Workspace, type CompanyRow, type DealRow } from "../workspace";
+
+export function CompaniesView({ email }: { email: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Workspace email={email} pathname="/companies">
+      {(data) => {
+        // Pipeline per company, computed here rather than stored — one less
+        // thing to keep in sync when a deal moves.
+        const openValue = (companyId: string) =>
+          data.deals
+            .filter((deal: DealRow) => deal.companyId === companyId)
+            .reduce((sum, deal) => sum + (Number(deal.value) || 0), 0);
+
+        const columns: ColumnDef<CompanyRow>[] = [
+          {
+            key: "name",
+            header: "Company",
+            cell: (row) => (
+              <span className="flex items-center gap-2">
+                <Avatar name={row.name} size="sm" />
+                <span className="truncate font-medium">{row.name}</span>
+              </span>
+            ),
+          },
+          {
+            key: "domain",
+            header: "Domain",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.domain ?? "—"}</span>
+            ),
+          },
+          {
+            key: "industry",
+            header: "Industry",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.industry ?? "—"}</span>
+            ),
+          },
+          {
+            key: "size",
+            header: "Size",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.size ?? "—"}</span>
+            ),
+          },
+          {
+            key: "pipeline",
+            header: "Pipeline",
+            numeric: true,
+            cell: (row) => money(openValue(row.id)),
+          },
+          {
+            key: "created",
+            header: "Added",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {relativeTime(row.createdAt)}
+              </span>
+            ),
+          },
+        ];
+
+        const rows = [...data.companies].sort((a, b) => a.name.localeCompare(b.name));
+
+        return (
+          <>
+            <PageHeader title="Companies" count={rows.length}>
+              <Button size="sm" onClick={() => setOpen(true)}>
+                <Plus />
+                New company
+              </Button>
+            </PageHeader>
+
+            <DataTable
+              rows={rows}
+              columns={columns}
+              empty={
+                <EmptyState
+                  icon={<Building2 />}
+                  title="No companies yet"
+                  description="Companies are the accounts your deals and contacts hang off. Add the first one to start building a pipeline."
+                  action={
+                    <Button size="sm" onClick={() => setOpen(true)}>
+                      <Plus />
+                      New company
+                    </Button>
+                  }
+                />
+              }
+            />
+
+            <RecordDialog
+              open={open}
+              title="New company"
+              submitLabel="Create company"
+              onOpenChange={setOpen}
+              fields={[
+                { name: "name", label: "Name", required: true, placeholder: "Acme Inc" },
+                { name: "domain", label: "Domain", placeholder: "acme.com" },
+                { name: "industry", label: "Industry", placeholder: "Logistics" },
+                { name: "size", label: "Size", placeholder: "50-200" },
+              ]}
+              onCreate={async (values) => {
+                // A plain policy-checked insert — no server function needed,
+                // because there's nothing to validate beyond the field types
+                // and nothing to stamp that the policy doesn't already gate.
+                await db.insert("Company", values);
+              }}
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

package/templates/crm/app/companies/page.tsx

@@ -0,0 +1,17 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { CompaniesView } from "./companies-view";
+
+export const metadata: Metadata = {
+  title: "Companies",
+  robots: "noindex",
+};
+
+export default function CompaniesPage({ auth, response, serverData }: PageProps) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  return <CompaniesView email={me?.email ?? ""} />;
+}

package/templates/crm/app/contacts/contacts-view.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import React, { useState } from "react";
+import { db } from "@pylonsync/react";
+import { Plus, Users } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/page-header";
+import { DataTable, type ColumnDef } from "@/components/data-table";
+import { EmptyState } from "@/components/empty-state";
+import { RecordDialog } from "@/components/record-dialog";
+import { Avatar } from "@/components/avatar";
+import { relativeTime } from "@/lib/pipeline";
+import { Workspace, type ContactRow } from "../workspace";
+
+export function ContactsView({ email }: { email: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Workspace email={email} pathname="/contacts">
+      {(data) => {
+        const columns: ColumnDef<ContactRow>[] = [
+          {
+            key: "name",
+            header: "Name",
+            cell: (row) => (
+              <span className="flex items-center gap-2">
+                <Avatar name={row.name} size="sm" />
+                <span className="truncate font-medium">{row.name}</span>
+              </span>
+            ),
+          },
+          {
+            key: "title",
+            header: "Title",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.title ?? "—"}</span>
+            ),
+          },
+          {
+            key: "company",
+            header: "Company",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {data.companyName(row.companyId) ?? "—"}
+              </span>
+            ),
+          },
+          {
+            key: "email",
+            header: "Email",
+            cell: (row) =>
+              row.email ? (
+                <a
+                  href={`mailto:${row.email}`}
+                  onClick={(event) => event.stopPropagation()}
+                  className="text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
+                >
+                  {row.email}
+                </a>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              ),
+          },
+          {
+            key: "phone",
+            header: "Phone",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.phone ?? "—"}</span>
+            ),
+          },
+          {
+            key: "created",
+            header: "Added",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {relativeTime(row.createdAt)}
+              </span>
+            ),
+          },
+        ];
+
+        const rows = [...data.contacts].sort((a, b) => a.name.localeCompare(b.name));
+
+        return (
+          <>
+            <PageHeader title="Contacts" count={rows.length}>
+              <Button size="sm" onClick={() => setOpen(true)}>
+                <Plus />
+                New contact
+              </Button>
+            </PageHeader>
+
+            <DataTable
+              rows={rows}
+              columns={columns}
+              empty={
+                <EmptyState
+                  icon={<Users />}
+                  title="No contacts yet"
+                  description="The people you actually talk to. Add one and link it to a company to keep the account together."
+                  action={
+                    <Button size="sm" onClick={() => setOpen(true)}>
+                      <Plus />
+                      New contact
+                    </Button>
+                  }
+                />
+              }
+            />
+
+            <RecordDialog
+              open={open}
+              title="New contact"
+              submitLabel="Create contact"
+              onOpenChange={setOpen}
+              fields={[
+                { name: "name", label: "Name", required: true, placeholder: "Dana Whitfield" },
+                { name: "title", label: "Title", placeholder: "VP Operations" },
+                {
+                  name: "companyId",
+                  label: "Company",
+                  options: data.companies
+                    .slice()
+                    .sort((a, b) => a.name.localeCompare(b.name))
+                    .map((company) => ({ value: company.id, label: company.name })),
+                },
+                { name: "email", label: "Email", type: "email", placeholder: "dana@acme.com" },
+                { name: "phone", label: "Phone", type: "tel", placeholder: "+1 555 0100" },
+              ]}
+              onCreate={async (values) => {
+                await db.insert("Contact", values);
+              }}
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

package/templates/crm/app/contacts/page.tsx

@@ -0,0 +1,17 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { ContactsView } from "./contacts-view";
+
+export const metadata: Metadata = {
+  title: "Contacts",
+  robots: "noindex",
+};
+
+export default function ContactsPage({ auth, response, serverData }: PageProps) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  return <ContactsView email={me?.email ?? ""} />;
+}

package/templates/crm/app/deals/[id]/deal-view.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import React from "react";
+import { Link, callFn, db, useRouter } from "@pylonsync/react";
+import { ArrowLeft, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Select } from "@/components/ui/select";
+import { PageHeader } from "@/components/page-header";
+import { EmptyState } from "@/components/empty-state";
+import { ActivityTimeline } from "@/components/activity-timeline";
+import { StageBadge } from "@/components/stage-badge";
+import { Avatar } from "@/components/avatar";
+import { PIPELINE, daysUntil, money, relativeTime } from "@/lib/pipeline";
+import { Workspace } from "../../workspace";
+
+export function DealView({ email, dealId }: { email: string; dealId: string }) {
+  const router = useRouter();
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const deal = data.deals.find((d) => d.id === dealId);
+
+        if (!deal) {
+          return (
+            <>
+              <PageHeader title="Deal" />
+              <EmptyState
+                title={data.loading ? "Loading…" : "Deal not found"}
+                description={
+                  data.loading
+                    ? undefined
+                    : "It may have been deleted, or the link is wrong."
+                }
+                action={
+                  data.loading ? undefined : (
+                    <Button size="sm" variant="secondary" asChild>
+                      <Link href="/">Back to pipeline</Link>
+                    </Button>
+                  )
+                }
+              />
+            </>
+          );
+        }
+
+        const contact = data.contacts.find((c) => c.id === deal.contactId);
+        const activities = data.activities.filter((a) => a.dealId === deal.id);
+        const days = daysUntil(deal.closeDate);
+
+        return (
+          <>
+            <PageHeader title={deal.title}>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={async () => {
+                  await db.delete("Deal", deal.id);
+                  router.push("/");
+                }}
+                className="text-muted-foreground hover:text-destructive"
+              >
+                <Trash2 />
+                Delete
+              </Button>
+            </PageHeader>
+
+            <div className="min-h-0 flex-1 overflow-y-auto">
+              <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-6">
+                <Link
+                  href="/"
+                  className="inline-flex w-fit items-center gap-1.5 text-[12px] text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <ArrowLeft className="size-3.5" />
+                  Pipeline
+                </Link>
+
+                <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
+                  <h1 className="text-[22px] font-semibold tracking-tight">
+                    {deal.title}
+                  </h1>
+                  <span className="tabular text-[18px] font-medium text-muted-foreground">
+                    {money(deal.value)}
+                  </span>
+                </div>
+
+                <dl className="grid grid-cols-2 gap-x-6 gap-y-4 rounded-lg border border-border bg-card p-4 sm:grid-cols-4">
+                  <Field label="Stage">
+                    {/* Changing stage here goes through the same mutation the
+                        board uses, so it's logged identically. */}
+                    <Select
+                      aria-label="Stage"
+                      value={deal.stage}
+                      className="h-7 text-[12px]"
+                      onChange={(event) =>
+                        void callFn("moveDeal", {
+                          dealId: deal.id,
+                          stage: event.target.value,
+                        })
+                      }
+                    >
+                      {PIPELINE.map((stage) => (
+                        <option key={stage.id} value={stage.id}>
+                          {stage.label}
+                        </option>
+                      ))}
+                    </Select>
+                  </Field>
+
+                  <Field label="Company">
+                    {data.companyName(deal.companyId) ?? "—"}
+                  </Field>
+
+                  <Field label="Contact">
+                    {contact ? (
+                      <span className="flex items-center gap-1.5">
+                        <Avatar name={contact.name} size="sm" />
+                        {contact.name}
+                      </span>
+                    ) : (
+                      "—"
+                    )}
+                  </Field>
+
+                  <Field label="Expected close">
+                    {deal.closeDate ? (
+                      <span className={days !== null && days < 0 ? "text-destructive" : ""}>
+                        {new Date(deal.closeDate).toLocaleDateString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                        })}
+                      </span>
+                    ) : (
+                      "—"
+                    )}
+                  </Field>
+                </dl>
+
+                <div className="flex items-center gap-3 text-[12px] text-muted-foreground">
+                  <StageBadge stage={deal.stage} />
+                  <span aria-hidden="true">·</span>
+                  <span>Created {relativeTime(deal.createdAt)}</span>
+                  {data.ownerName(deal.ownerId) ? (
+                    <>
+                      <span aria-hidden="true">·</span>
+                      <span>Owned by {data.ownerName(deal.ownerId)}</span>
+                    </>
+                  ) : null}
+                </div>
+
+                <section>
+                  <h2 className="mb-3 text-[13px] font-semibold">Activity</h2>
+                  <ActivityTimeline
+                    activities={activities}
+                    ownerName={data.ownerName}
+                    onLog={(kind, body) =>
+                      callFn("logActivity", {
+                        kind,
+                        body,
+                        dealId: deal.id,
+                        ...(deal.companyId ? { companyId: deal.companyId } : {}),
+                      })
+                    }
+                  />
+                </section>
+              </div>
+            </div>
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}
+
+function Field({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-[11px] text-muted-foreground">{label}</dt>
+      <dd className="mt-1 truncate text-[13px]">{children}</dd>
+    </div>
+  );
+}

package/templates/crm/app/deals/[id]/page.tsx

@@ -0,0 +1,23 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { DealView } from "./deal-view";
+
+export const metadata: Metadata = {
+  title: "Deal",
+  robots: "noindex",
+};
+
+/** `app/deals/[id]/page.tsx` → `/deals/:id`. */
+export default function DealPage({
+  auth,
+  response,
+  params,
+  serverData,
+}: PageProps<{ id: string }>) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  return <DealView email={me?.email ?? ""} dealId={params.id} />;
+}

package/templates/crm/app/error.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { type ErrorBoundaryProps } from "@pylonsync/react";
+import { Button } from "@/components/ui/button";
+
+// `app/error.tsx` → the error boundary for this segment. It catches a throw
+// in any page/layout below it and renders at HTTP 500. It's HYDRATED, so
+// this is a real interactive client component: `reset()` re-attempts the
+// route, and useState/onClick work. The thrown error reaches the client as
+// `{ message, digest }` only — the stack stays in the dev overlay
+// (PYLON_DEV_MODE) and the server logs, never in the page.
+export default function Error({ error, reset }: ErrorBoundaryProps) {
+  const [tries, setTries] = React.useState(0);
+  return (
+    <div className="space-y-6">
+      <section>
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Something went wrong
+        </h1>
+        <p className="mt-2 text-muted-foreground">{error.message}</p>
+        {error.digest ? (
+          <p className="mt-1 text-xs text-muted-foreground/70">
+            Reference: <code>{error.digest}</code>
+          </p>
+        ) : null}
+      </section>
+      <div className="flex items-center gap-3">
+        <Button
+          onClick={() => {
+            setTries((n) => n + 1);
+            reset();
+          }}
+        >
+          Try again
+        </Button>
+        {tries > 0 ? (
+          <span className="text-sm text-muted-foreground">
+            Retried {tries} {tries === 1 ? "time" : "times"}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}