@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/marketplace/tests/example.test.ts

@@ -1,12 +1,19 @@
 import { expect, test } from "bun:test";
-import { browseListings } from "../lib/catalog";
-import { makeSlug, type Listing } from "../client/market";
+import {
+  browseListings,
+  listingSrcSet,
+  pendingOfferCounts,
+  percentOfAsk,
+  suggestedOffers,
+} from "../lib/catalog";
+import { makeSlug, type Listing, type Offer } from "../client/market";
 
 const listings: Listing[] = [
   {
     id: "1",
     sellerId: "seller-1",
     sellerName: "maple-fox",
+    location: "Brooklyn, NY",
     title: "Walnut lounge chair",
     slug: "walnut-lounge-chair-1",
     description: "Restored frame with new upholstery.",
@@ -78,3 +85,58 @@ test("listing slugs remain readable and unique", () => {
     "vintage-technics-sl-1200-mk2-a1f3",
   );
 });
+
+test("browse searches the seller's location", () => {
+  expect(
+    browseListings(listings, { query: "brooklyn" }).map((listing) => listing.id),
+  ).toEqual(["1"]);
+});
+
+test("pending offer counts ignore answered offers", () => {
+  const offer = (id: string, listingId: string, status: Offer["status"]): Offer => ({
+    id,
+    listingId,
+    listingTitle: "",
+    sellerId: "s",
+    buyerId: "b",
+    buyerName: "B",
+    amount: 10,
+    status,
+    createdAt: "2026-01-01T00:00:00.000Z",
+  });
+  const counts = pendingOfferCounts([
+    offer("a", "1", "pending"),
+    offer("b", "1", "pending"),
+    offer("c", "1", "declined"),
+    offer("d", "2", "accepted"),
+  ]);
+  expect(counts.get("1")).toBe(2);
+  expect(counts.has("2")).toBe(false);
+});
+
+test("suggested offers step below the asking price", () => {
+  expect(suggestedOffers(680)).toEqual([650, 610, 580]);
+  expect(suggestedOffers(95)).toEqual([90, 86, 81]);
+  expect(suggestedOffers(1)).toEqual([]);
+  expect(suggestedOffers(0)).toEqual([]);
+  for (const price of [5, 49, 120, 240, 1150]) {
+    for (const amount of suggestedOffers(price)) {
+      expect(amount).toBeGreaterThan(0);
+      expect(amount).toBeLessThan(price);
+    }
+  }
+});
+
+test("offer percentage of the asking price", () => {
+  expect(percentOfAsk(620, 680)).toBe(91);
+  expect(percentOfAsk(10, 0)).toBe(0);
+});
+
+test("bundled photos get a responsive srcset; others do not", () => {
+  expect(listingSrcSet("/images/listings/watch.webp")).toBe(
+    "/images/listings/watch-640.webp 640w, /images/listings/watch.webp 1120w",
+  );
+  expect(listingSrcSet("/api/files/abc")).toBeUndefined();
+  expect(listingSrcSet("https://example.com/a.webp")).toBeUndefined();
+  expect(listingSrcSet(undefined)).toBeUndefined();
+});

package/templates/marketplace/tests/listing-card.test.tsx

@@ -0,0 +1,61 @@
+import { afterEach, expect, mock, test } from "bun:test";
+import React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import type { Listing } from "../client/market";
+
+mock.module("@pylonsync/react", () => ({
+  Link: ({ href, children, seed: _seed, ...rest }: Record<string, unknown>) => (
+    <a href={href as string} {...rest}>
+      {children as React.ReactNode}
+    </a>
+  ),
+  db: { useQuery: () => ({ data: [], loading: false }) },
+  init: () => {},
+  configureClient: () => {},
+  callFn: async () => ({}),
+  setSessionToken: async () => {},
+  storageKey: (key: string) => key,
+}));
+const { ListingCard } = await import("../client/ListingCard");
+
+afterEach(cleanup);
+
+const listing: Listing = {
+  id: "1",
+  sellerId: "s1",
+  sellerName: "Nora Lind",
+  location: "Brooklyn, NY",
+  title: "Danish teak lounge chair",
+  slug: "danish-teak-lounge-chair-a1f3",
+  description: "",
+  price: 680,
+  category: "furniture",
+  condition: "good",
+  status: "active",
+  imageUrl: "/images/listings/lounge-chair.webp",
+  seed: "a1f3",
+  createdAt: new Date().toISOString(),
+};
+
+test("card shows price, title, location, and the live offer count", () => {
+  render(<ListingCard listing={listing} pendingOffers={2} />);
+  expect(screen.getByText("$680")).toBeDefined();
+  expect(screen.getByText("Danish teak lounge chair")).toBeDefined();
+  expect(screen.getByText("Brooklyn, NY · Good")).toBeDefined();
+  expect(screen.getByText("2 offers")).toBeDefined();
+  const link = screen.getByRole("link");
+  expect(link.getAttribute("href")).toBe("/listing/danish-teak-lounge-chair-a1f3");
+});
+
+test("a sold card shows Sold instead of the offer count", () => {
+  render(
+    <ListingCard listing={{ ...listing, id: "2", status: "sold" }} pendingOffers={3} />,
+  );
+  expect(screen.getAllByText("Sold").length).toBe(1);
+  expect(screen.queryByText("3 offers")).toBeNull();
+});
+
+test("a listing that arrived live is marked Just listed", () => {
+  render(<ListingCard listing={{ ...listing, id: "3" }} fresh />);
+  expect(screen.getByText("Just listed")).toBeDefined();
+});

package/templates/projects/README.md

@@ -10,11 +10,16 @@ API, auth, and realtime sync from one process on one port.
 __RUN_DEV__
 ```
 
-Open http://localhost:4321 and create an account. The first sign-in seeds two
-live projects — one comfortably inside its budget, one over it — so both states
-are visible rather than theoretical. Delete `functions/seedWorkspace.ts` and
+Open http://localhost:4321 and create an account. The first sign-in seeds ten
+projects across active, paused, and complete, with two active ones over budget,
+so every state is visible on first load. Delete `functions/seedWorkspace.ts` and
 `lib/seed.ts` once you have real work.
 
+The tasks and timesheets are spread across you and four demo teammates. Each is a User
+row with a `@demo.invalid` address and no password, so outside dev mode nobody
+can sign in as one (see `lib/demo-team.ts`). Delete those users along with the
+seed.
+
 ## What's interesting here
 
 **Time is a ledger, not a total.** A task\'s logged hours are the sum of its
@@ -46,6 +51,22 @@ Rejecting "1h30" because it isn\'t "90" is the kind of friction that stops time
 being logged at all, which costs far more than a forgiving parser. Values over a
 day are refused — a typo on a timesheet becomes a typo on an invoice.
 
+## Brand and layout
+
+The product ships as **Workbench**. The name lives in `lib/brand.ts`, and the
+sidebar, sign-in screen, page titles, and phone drawer all read it. The mark is
+`components/brand-mark.tsx`; `app/icon.svg`, `app/apple-icon.png`, and
+`public/favicon.ico` draw the same shape for browsers and home screens. The
+accent colour is `--brand` at the top of `app/globals.css`, and the typeface
+(Manrope) is set in `fonts` in `app.ts`.
+
+The frame is `components/app-shell.tsx`. From 768px up the sidebar is a fixed
+rail; below that it opens as a drawer from the menu button in each page header,
+tables drop their lower-priority columns (`hideBelow` in
+`components/data-table.tsx`), and boards scroll one column at a time. The nav
+links are in `components/nav.tsx`. Every nav count comes from `navCounts` in
+`app/workspace.tsx`, and page headers and tabs read the same numbers.
+
 ## Layout
 
 ```

package/templates/projects/app/clients/clients-view.tsx

@@ -17,7 +17,7 @@ export function ClientsView() {
   const [open, setOpen] = useState(false);
 
   return (
-    <RequireAuth title="Projects" description="Your team shares one set of projects. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/clients">
       {(data) => {
         const forClient = (clientId: string) =>
@@ -27,16 +27,23 @@ export function ClientsView() {
           {
             key: "name",
             header: "Client",
+            className: "w-[60%] md:w-[30%]",
             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} shape="square" />
+                <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.email ?? ""}
+                  </span>
+                </span>
               </span>
             ),
           },
           {
             key: "email",
             header: "Email",
+            hideBelow: "md",
             cell: (row) => (
               <span className="text-muted-foreground">{row.email ?? "—"}</span>
             ),
@@ -44,12 +51,16 @@ export function ClientsView() {
           {
             key: "projects",
             header: "Projects",
+            hideBelow: "sm",
+            className: "w-[96px]",
             numeric: true,
             cell: (row) => forClient(row.id).length,
           },
           {
             key: "logged",
             header: "Logged",
+            hideBelow: "lg",
+            className: "w-[110px]",
             numeric: true,
             cell: (row) =>
               duration(
@@ -62,6 +73,7 @@ export function ClientsView() {
           {
             key: "billable",
             header: "Billable",
+            className: "w-[120px] md:w-[140px]",
             numeric: true,
             cell: (row) =>
               money(
@@ -82,16 +94,18 @@ export function ClientsView() {
 
         return (
           <>
-            <PageHeader title="Clients" count={rows.length}>
+            <PageHeader title="Clients" count={data.navCounts["/clients"]}>
               <Button size="sm" onClick={() => setOpen(true)}>
                 <Plus />
-                New client
+                <span className="max-sm:sr-only">New client</span>
               </Button>
             </PageHeader>
 
             <DataTable
               rows={rows}
               columns={columns}
+              loading={data.loading}
+              label="Clients"
               empty={
                 <EmptyState
                   icon={<Users />}

package/templates/projects/app/clients/page.tsx

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

package/templates/projects/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.57 0.17 42);
+  --brand-dark: oklch(0.68 0.16 45);
+}
+
 :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/projects/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="#c54a05"/><g fill="#fff"><rect x="6" y="6" width="5.6" height="20" rx="1.8"/><rect x="13.2" y="6" width="5.6" height="14.6" rx="1.8"/><rect x="20.4" y="6" width="5.6" height="9.2" rx="1.8"/></g></svg>

package/templates/projects/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/projects/app/page.tsx

@@ -1,16 +1,14 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { ProjectsView } from "./projects-view";
 
 export const metadata: Metadata = {
-  title: "Projects",
+  title: `Projects · ${BRAND.name}`,
   robots: "noindex",
 };
 
-/**
- * `/` — the project list.
- *
- */
+/** `/` — the project list. */
 export default function ProjectsPage({ searchParams }: PageProps) {
   return (
     <ProjectsView openNew={searchParams?.new === "project"} />

package/templates/projects/app/projects/[id]/page.tsx

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

package/templates/projects/app/projects/[id]/project-view.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import { Link, callFn, db, useRouter } from "@pylonsync/react";
-import { ArrowLeft, Clock, Plus } from "lucide-react";
+import { ChevronRight, Clock, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select } from "@/components/ui/select";
@@ -11,8 +11,9 @@ import { EmptyState } from "@/components/empty-state";
 import { TaskBoard } from "@/components/task-board";
 import { BoardSkeleton } from "@/components/board-skeleton";
 import { BudgetBar } from "@/components/budget-bar";
+import { Meter } from "@/components/meter";
 import { TimeDialog } from "@/components/time-dialog";
-import { PROJECT_STATUSES, duration, minutesForProject, progress } from "@/lib/work";
+import { PROJECT_STATUSES, minutesForProject, progress } from "@/lib/work";
 import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "../../workspace";
 
@@ -26,7 +27,7 @@ export function ProjectView({
   const [timeFor, setTimeFor] = useState<{ id: string; title: string } | null>(null);
 
   return (
-    <RequireAuth title="Projects" description="Your team shares one set of projects. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => {
         const project = data.projects.find((p) => p.id === projectId);
@@ -36,7 +37,7 @@ export function ProjectView({
             <>
               <PageHeader title="Project" />
               <EmptyState
-                title={data.loading ? "Loading…" : "Project not found"}
+                title={data.loading ? "Loading project…" : "Project not found"}
                 description={
                   data.loading ? undefined : "It may have been deleted, or the link is wrong."
                 }
@@ -74,15 +75,23 @@ export function ProjectView({
 
         return (
           <>
-            <PageHeader title={project.name}>
-              <span className="tabular text-[12px] text-muted-foreground">
-                {p.done}/{p.total} done · {duration(logged)}
-              </span>
-              <div className="w-28">
+            <PageHeader
+              title={project.name}
+              leading={
+                <Link
+                  href="/"
+                  className="hidden items-center gap-1 text-[13px] text-muted-foreground transition-colors hover:text-foreground md:inline-flex"
+                >
+                  Projects
+                  <ChevronRight className="size-3.5" />
+                </Link>
+              }
+            >
+              <div className="w-28 md:w-32">
                 <Select
                   aria-label="Project status"
                   value={project.status}
-                  className="h-7 text-[12px]"
+                  className="h-8 md:h-7.5"
                   onChange={(event) =>
                     void db.update("Project", project.id, {
                       status: event.target.value,
@@ -98,34 +107,36 @@ export function ProjectView({
               </div>
             </PageHeader>
 
-            <div className="flex items-center gap-6 border-b border-border px-4 py-3">
-              <Link
-                href="/"
-                className="inline-flex shrink-0 items-center gap-1.5 text-[12px] text-muted-foreground transition-colors hover:text-foreground"
-              >
-                <ArrowLeft className="size-3.5" />
-                Projects
-              </Link>
-              <span className="shrink-0 text-[12px] text-muted-foreground">
-                {data.clientName(project.clientId) ?? "No client"}
-              </span>
-              <div className="min-w-0 flex-1 max-w-md">
-                <BudgetBar
-                  budgetMinutes={project.budgetMinutes}
-                  loggedMinutes={logged}
-                  hourlyRateCents={project.hourlyRateCents}
+            <div className="grid shrink-0 gap-x-8 gap-y-3 border-b border-border px-4 py-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] md:items-center md:px-5">
+              <div className="min-w-0">
+                <p className="truncate text-[12.5px] text-muted-foreground">
+                  {data.clientName(project.clientId) ?? "No client"}
+                  {project.dueDate
+                    ? ` · due ${new Date(project.dueDate).toLocaleDateString("en-US", { month: "short", day: "numeric" })}`
+                    : ""}
+                </p>
+                <Meter
+                  className="mt-1.5"
+                  ratio={p.ratio ?? 0}
+                  label={`${p.done}/${p.total} tasks done`}
                 />
               </div>
-              <form onSubmit={addTask} className="ml-auto flex shrink-0 items-center gap-2">
+              <BudgetBar
+                budgetMinutes={project.budgetMinutes}
+                loggedMinutes={logged}
+                hourlyRateCents={project.hourlyRateCents}
+              />
+              <form onSubmit={addTask} className="flex items-center gap-2">
                 <Input
                   aria-label="New task"
                   placeholder="Add a task…"
                   value={newTask}
                   onChange={(event) => setNewTask(event.target.value)}
-                  className="h-7 w-48 text-[12px]"
+                  className="h-9 flex-1 md:h-8 md:w-52"
                 />
-                <Button type="submit" size="sm" className="h-7" disabled={!newTask.trim()}>
+                <Button type="submit" size="sm" className="h-9 md:h-8" disabled={!newTask.trim()}>
                   <Plus />
+                  <span className="sr-only">Add task</span>
                 </Button>
               </form>
             </div>
@@ -146,7 +157,7 @@ export function ProjectView({
                   minutesFor={(taskId) => data.taskMinutes.get(taskId) ?? 0}
                   onMove={(taskId, status) => {
                     // Through the mutation: the new position is computed
-                    // server-side so two simultaneous drags don\'t collide.
+                    // server-side so two simultaneous drags don't collide.
                     void callFn("moveTask", { taskId, status });
                   }}
                   onOpen={(taskId) => {
@@ -160,6 +171,10 @@ export function ProjectView({
             <TimeDialog
               open={timeFor !== null}
               taskTitle={timeFor?.title ?? ""}
+              status={tasks.find((t) => t.id === timeFor?.id)?.status}
+              onMove={(status) => {
+                if (timeFor) void callFn("moveTask", { taskId: timeFor.id, status });
+              }}
               onOpenChange={(open) => {
                 if (!open) setTimeFor(null);
               }}