@pylonsync/create-pylon 0.19.1 → 0.21.0

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

@@ -17,23 +17,30 @@ export function ContactsView() {
   const [open, setOpen] = useState(false);
 
   return (
-    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/contacts">
       {(data) => {
         const columns: ColumnDef<ContactRow>[] = [
           {
             key: "name",
             header: "Name",
+            className: "w-[55%] md:w-[22%]",
             cell: (row) => (
-              <span className="flex items-center gap-2">
-                <Avatar name={row.name} size="sm" />
-                <span className="truncate font-medium">{row.name}</span>
+              <span className="flex min-w-0 items-center gap-2.5">
+                <Avatar name={row.name} />
+                <span className="min-w-0">
+                  <span className="block truncate font-medium">{row.name}</span>
+                  <span className="block truncate text-[12px] text-muted-foreground md:hidden">
+                    {[row.title, data.companyName(row.companyId)].filter(Boolean).join(", ")}
+                  </span>
+                </span>
               </span>
             ),
           },
           {
             key: "title",
             header: "Title",
+            hideBelow: "md",
             cell: (row) => (
               <span className="text-muted-foreground">{row.title ?? "—"}</span>
             ),
@@ -41,6 +48,7 @@ export function ContactsView() {
           {
             key: "company",
             header: "Company",
+            hideBelow: "md",
             cell: (row) => (
               <span className="text-muted-foreground">
                 {data.companyName(row.companyId) ?? "—"}
@@ -50,6 +58,8 @@ export function ContactsView() {
           {
             key: "email",
             header: "Email",
+            hideBelow: "lg",
+            className: "w-[24%]",
             cell: (row) =>
               row.email ? (
                 <a
@@ -66,13 +76,25 @@ export function ContactsView() {
           {
             key: "phone",
             header: "Phone",
-            cell: (row) => (
-              <span className="text-muted-foreground">{row.phone ?? "—"}</span>
-            ),
+            className: "w-[140px]",
+            cell: (row) =>
+              row.phone ? (
+                <a
+                  href={`tel:${row.phone.replace(/[^+\d]/g, "")}`}
+                  onClick={(event) => event.stopPropagation()}
+                  className="tabular text-muted-foreground hover:text-foreground"
+                >
+                  {row.phone}
+                </a>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              ),
           },
           {
             key: "created",
             header: "Added",
+            hideBelow: "xl",
+            className: "w-[100px]",
             cell: (row) => (
               <span className="text-muted-foreground">
                 {relativeTime(row.createdAt)}
@@ -85,16 +107,18 @@ export function ContactsView() {
 
         return (
           <>
-            <PageHeader title="Contacts" count={rows.length}>
+            <PageHeader title="Contacts" count={data.navCounts["/contacts"]}>
               <Button size="sm" onClick={() => setOpen(true)}>
                 <Plus />
-                New contact
+                <span className="max-sm:sr-only">New contact</span>
               </Button>
             </PageHeader>
 
             <DataTable
               rows={rows}
               columns={columns}
+              loading={data.loading}
+              label="Contacts"
               empty={
                 <EmptyState
                   icon={<Users />}
@@ -126,7 +150,7 @@ export function ContactsView() {
                     .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: "email", label: "Email", type: "email", placeholder: "dana@northwind.co" },
                 { name: "phone", label: "Phone", type: "tel", placeholder: "+1 555 0100" },
               ]}
               onCreate={async (values) => {

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

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { ContactsView } from "./contacts-view";
 
 export const metadata: Metadata = {
-  title: "Contacts",
+  title: `Contacts · ${BRAND.name}`,
   robots: "noindex",
 };
 

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

@@ -2,7 +2,7 @@
 
 import React from "react";
 import { Link, callFn, db, useRouter } from "@pylonsync/react";
-import { ArrowLeft, Trash2 } from "lucide-react";
+import { ChevronRight, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Select } from "@/components/ui/select";
 import { PageHeader } from "@/components/page-header";
@@ -10,7 +10,7 @@ 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 { PIPELINE, closeDue, money, relativeTime, shortDate } from "@/lib/pipeline";
 import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "../../workspace";
 
@@ -18,7 +18,7 @@ export function DealView({ dealId }: { dealId: string }) {
   const router = useRouter();
 
   return (
-    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => {
         const deal = data.deals.find((d) => d.id === dealId);
@@ -28,7 +28,7 @@ export function DealView({ dealId }: { dealId: string }) {
             <>
               <PageHeader title="Deal" />
               <EmptyState
-                title={data.loading ? "Loading…" : "Deal not found"}
+                title={data.loading ? "Loading deal…" : "Deal not found"}
                 description={
                   data.loading
                     ? undefined
@@ -48,11 +48,24 @@ export function DealView({ dealId }: { dealId: string }) {
 
         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);
+        const due = closeDue(deal);
+        const owner = data.ownerName(deal.ownerId);
+        const company = data.companyName(deal.companyId);
 
         return (
           <>
-            <PageHeader title={deal.title}>
+            <PageHeader
+              title={deal.title}
+              leading={
+                <Link
+                  href="/"
+                  className="hidden items-center gap-1 text-[13px] text-muted-foreground transition-colors hover:text-foreground md:inline-flex"
+                >
+                  Pipeline
+                  <ChevronRight className="size-3.5" />
+                </Link>
+              }
+            >
               <Button
                 size="sm"
                 variant="ghost"
@@ -63,109 +76,135 @@ export function DealView({ dealId }: { dealId: string }) {
                 className="text-muted-foreground hover:text-destructive"
               >
                 <Trash2 />
-                Delete
+                <span className="max-sm:sr-only">Delete</span>
               </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>
+              <div className="mx-auto grid max-w-5xl gap-6 px-4 py-5 md:px-8 md:py-8 lg:grid-cols-[minmax(0,1fr)_280px] lg:gap-10">
+                <div className="min-w-0 space-y-6">
+                  <div>
+                    <div className="mb-2 flex items-center gap-2 text-[12.5px]">
+                      <StageBadge stage={deal.stage} />
+                      {company ? (
+                        <>
+                          <span aria-hidden="true" className="text-muted-foreground/60">·</span>
+                          <span className="truncate text-muted-foreground">{company}</span>
+                        </>
+                      ) : null}
+                    </div>
+                    <h2 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] md:text-[26px]">
+                      {deal.title}
+                    </h2>
+                    <p className="tabular mt-1.5 text-[20px] font-medium tracking-[-0.01em] text-muted-foreground">
+                      {money(deal.value)}
+                    </p>
+                  </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", {
+                  <section aria-labelledby="activity-heading">
+                    <h3 id="activity-heading" className="mb-3 text-[13px] font-semibold">
+                      Activity
+                      <span className="tabular ml-1.5 font-normal text-muted-foreground">
+                        {activities.length}
+                      </span>
+                    </h3>
+                    <ActivityTimeline
+                      activities={activities}
+                      ownerName={data.ownerName}
+                      onLog={(kind, body) =>
+                        callFn("logActivity", {
+                          kind,
+                          body,
                           dealId: deal.id,
-                          stage: event.target.value,
+                          ...(deal.companyId ? { companyId: deal.companyId } : {}),
                         })
                       }
-                    >
-                      {PIPELINE.map((stage) => (
-                        <option key={stage.id} value={stage.id}>
-                          {stage.label}
-                        </option>
-                      ))}
-                    </Select>
-                  </Field>
+                    />
+                  </section>
+                </div>
 
-                  <Field label="Company">
-                    {data.companyName(deal.companyId) ?? "—"}
-                  </Field>
+                <aside className="order-first lg:order-none">
+                  <dl className="grid grid-cols-2 gap-x-4 gap-y-4 rounded-xl border border-border bg-surface-1 p-4 lg:grid-cols-1">
+                    <Field label="Stage">
+                      {/* The same mutation the board uses, so a change here
+                          is logged the same way. */}
+                      <Select
+                        aria-label="Stage"
+                        value={deal.stage}
+                        className="h-8 bg-background md:h-7.5"
+                        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="Contact">
-                    {contact ? (
-                      <span className="flex items-center gap-1.5">
-                        <Avatar name={contact.name} size="sm" />
-                        {contact.name}
-                      </span>
-                    ) : (
-                      "—"
-                    )}
-                  </Field>
+                    <Field label="Owner">
+                      {owner ? (
+                        <span className="flex min-w-0 items-center gap-2">
+                          <Avatar name={owner} size="sm" />
+                          <span className="truncate">{owner}</span>
+                        </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>
+                    <Field label="Company">{company ?? "—"}</Field>
 
-                <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>
+                    <Field label="Contact">
+                      {contact ? (
+                        <span className="flex min-w-0 items-center gap-2">
+                          <Avatar name={contact.name} size="sm" />
+                          <span className="min-w-0">
+                            <span className="block truncate">{contact.name}</span>
+                            {contact.email ? (
+                              <a
+                                href={`mailto:${contact.email}`}
+                                className="block truncate text-[12px] text-muted-foreground hover:text-foreground"
+                              >
+                                {contact.email}
+                              </a>
+                            ) : null}
+                          </span>
+                        </span>
+                      ) : (
+                        "—"
+                      )}
+                    </Field>
+
+                    <Field label="Expected close">
+                      {deal.closeDate ? (
+                        <span className="flex items-center gap-2">
+                          <span className="tabular">{shortDate(deal.closeDate)}</span>
+                          {due ? (
+                            <span
+                              className={
+                                due.tone === "overdue"
+                                  ? "text-[12px] font-medium text-destructive"
+                                  : "text-[12px] text-muted-foreground"
+                              }
+                            >
+                              {due.label}
+                            </span>
+                          ) : null}
+                        </span>
+                      ) : (
+                        "—"
+                      )}
+                    </Field>
 
-                <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>
+                    <Field label="Created">{relativeTime(deal.createdAt)}</Field>
+                  </dl>
+                </aside>
               </div>
             </div>
           </>
@@ -185,8 +224,8 @@ function Field({
 }) {
   return (
     <div className="min-w-0">
-      <dt className="text-[11px] text-muted-foreground">{label}</dt>
-      <dd className="mt-1 truncate text-[13px]">{children}</dd>
+      <dt className="text-[11.5px] font-medium text-muted-foreground">{label}</dt>
+      <dd className="mt-1 min-w-0 truncate text-[13px]">{children}</dd>
     </div>
   );
 }

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

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { DealView } from "./deal-view";
 
 export const metadata: Metadata = {
-  title: "Deal",
+  title: `Deal · ${BRAND.name}`,
   robots: "noindex",
 };
 

package/templates/crm/app/globals.css

@@ -9,15 +9,21 @@
 /* ---------------------------------------------------------------------------
    Design tokens.
 
-   Tuned for a dense internal tool rather than a marketing page: a near-neutral
-   surface ramp, hairline borders instead of shadows, and one accent used
-   sparingly so status colour still means something. Dark is the primary theme —
-   `app/layout.tsx` sets `class="dark"` — and light is a real, tested
-   alternative, not an afterthought.
+   Tuned for a dense internal tool: a near-neutral surface ramp, hairline
+   borders instead of shadows, and one accent used sparingly so status colour
+   still means something. Light is the default; `.dark` holds a complete dark
+   set (add `class="dark"` to <html> in app/layout.tsx to switch).
 
-   These are the same variable names shadcn/ui generates against, so
+   These are the variable names shadcn/ui generates against, so
    `npx shadcn@latest add <component>` drops in already themed.
 --------------------------------------------------------------------------- */
+:root {
+  /* The brand accent: primary buttons, the brand mark, focus rings, and the
+     active nav icon. Change these two lines to re-colour the product. */
+  --brand: oklch(0.52 0.2 272);
+  --brand-dark: oklch(0.64 0.17 272);
+}
+
 :root {
   --radius: 0.5rem;
 
@@ -28,7 +34,7 @@
   --popover: oklch(1 0 0);
   --popover-foreground: var(--foreground);
 
-  --primary: oklch(0.55 0.204 274.5);
+  --primary: var(--brand);
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.968 0.002 286.4);
   --secondary-foreground: oklch(0.27 0.006 286);
@@ -40,7 +46,7 @@
 
   --border: oklch(0.918 0.004 286.3);
   --input: oklch(0.918 0.004 286.3);
-  --ring: oklch(0.55 0.204 274.5);
+  --ring: var(--brand);
 
   /* Surfaces above the page: sidebar, popovers, hover rows. */
   --surface-1: oklch(0.985 0.001 286.4);
@@ -51,6 +57,7 @@
   --stage-lead: oklch(0.62 0.03 264);
   --stage-qualified: oklch(0.6 0.13 240);
   --stage-proposal: oklch(0.68 0.15 78);
+  --stage-negotiation: oklch(0.64 0.16 45);
   --stage-won: oklch(0.6 0.15 155);
   --stage-lost: oklch(0.6 0.11 25);
 }
@@ -63,7 +70,7 @@
   --popover: oklch(0.216 0.006 285.9);
   --popover-foreground: var(--foreground);
 
-  --primary: oklch(0.62 0.19 274.5);
+  --primary: var(--brand-dark);
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.25 0.006 286);
   --secondary-foreground: oklch(0.93 0.002 286.3);
@@ -75,7 +82,7 @@
 
   --border: oklch(1 0 0 / 9%);
   --input: oklch(1 0 0 / 12%);
-  --ring: oklch(0.62 0.19 274.5);
+  --ring: var(--brand-dark);
 
   --surface-1: oklch(0.186 0.004 285.9);
   --surface-2: oklch(0.216 0.006 285.9);
@@ -83,6 +90,7 @@
   --stage-lead: oklch(0.68 0.03 264);
   --stage-qualified: oklch(0.68 0.13 240);
   --stage-proposal: oklch(0.75 0.14 78);
+  --stage-negotiation: oklch(0.72 0.15 45);
   --stage-won: oklch(0.7 0.15 155);
   --stage-lost: oklch(0.68 0.14 25);
 }
@@ -118,6 +126,7 @@
   --color-stage-lead: var(--stage-lead);
   --color-stage-qualified: var(--stage-qualified);
   --color-stage-proposal: var(--stage-proposal);
+  --color-stage-negotiation: var(--stage-negotiation);
   --color-stage-won: var(--stage-won);
   --color-stage-lost: var(--stage-lost);
 }
@@ -143,15 +152,21 @@
     height: 100%;
     background-color: var(--color-background);
     color: var(--color-foreground);
-    /* 13px is the density these screens are designed at; the slight negative
-       tracking is what keeps Inter from looking loose at that size. */
-    font-size: 13px;
+    /* 14px on phones, 13px from the md breakpoint up: the density these
+       screens are designed at on a desktop. */
+    font-size: 14px;
     line-height: 1.5;
-    letter-spacing: -0.006em;
+    letter-spacing: -0.003em;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
 
+  @media (min-width: 768px) {
+    body {
+      font-size: 13px;
+    }
+  }
+
   button {
     cursor: pointer;
   }

package/templates/crm/app/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#4556d9"/><g fill="#fff"><rect x="6" y="7.5" width="20" height="4" rx="2"/><rect x="9" y="14" width="14" height="4" rx="2"/><rect x="12" y="20.5" width="8" height="4" rx="2"/></g></svg>

package/templates/crm/app/layout.tsx

@@ -18,12 +18,14 @@ export default function RootLayout({ children }: LayoutProps) {
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>__APP_NAME__</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+        {/* No <title> here: each page's `metadata` sets "<Page> · <Brand>".
+            A title in the layout renders first and wins over the page's. */}
         {/* Tailwind is compiled by Pylon from app/globals.css and the
-            stylesheet link is injected here automatically. Inter is declared in
-            app.ts (fonts: [...]) and self-hosted by the build — @font-face, the
-            preload link, and a size-adjusted fallback are injected too. */}
+            stylesheet link is injected here automatically. The typeface is
+            declared in app.ts (fonts: [...]) and self-hosted by the build;
+            @font-face, the preload link, and a size-adjusted fallback are
+            injected too. */}
       </head>
       <body className="h-full">{children}</body>
     </html>

package/templates/crm/app/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { PipelineView } from "./pipeline-view";
 
 export const metadata: Metadata = {
-  title: "Pipeline",
+  title: `Pipeline · ${BRAND.name}`,
   robots: "noindex",
 };
 

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

@@ -41,16 +41,16 @@ export function PipelineView({
   }, []);
 
   return (
-    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => (
         <>
-          <PageHeader title="Pipeline" count={data.deals.length}>
-            <Button size="sm" onClick={() => setDialogOpen(true)}>
+          <PageHeader title="Pipeline" count={data.navCounts["/"]}>
+            <Button size="sm" onClick={() => setDialogOpen(true)} title="New deal (c)">
               <Plus />
               New deal
-              <Kbd className="ml-1 border-primary-foreground/25 bg-primary-foreground/10 text-primary-foreground/70">
-                c
+              <Kbd className="ml-0.5 hidden border-primary-foreground/25 bg-primary-foreground/10 text-primary-foreground/75 md:inline-flex">
+                C
               </Kbd>
             </Button>
           </PageHeader>