@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/projects/README.md

@@ -0,0 +1,96 @@
+# __APP_NAME__
+
+Client project delivery for a small team — projects, a task board, and time
+logged against the work. 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 two
+live projects — one comfortably inside its budget, one over it — so both states
+are visible rather than theoretical. Delete `functions/seedWorkspace.ts` and
+`lib/seed.ts` once you have real work.
+
+## What's interesting here
+
+**Time is a ledger, not a total.** A task\'s logged hours are the sum of its
+`TimeEntry` rows. Two people logging against the same task at once is normal,
+and a mutable total loses one of them. It also means every hour on an invoice
+traces to who logged it and when — which is the question a client asks.
+
+Entries are **insert-only at the policy level**:
+
+```ts
+allowUpdate: "false",
+allowDelete: "false",
+```
+
+Editing an entry would quietly change what someone was billed. A correction is a
+negative entry, which stays visible in the history.
+
+**Progress and budget are measured separately.** Progress counts tasks done;
+budget tracks time spent. A project can be 90% through its budget and 20% done,
+and a status report that conflates the two lies.
+
+**The board is live.** Drag a task and it moves on every teammate\'s board
+through the same write → sync → re-render path your own move takes, so a standup
+doesn\'t start with reconciling two views of the work. The new position is
+computed server-side, so two simultaneous drags don\'t claim the same index.
+
+**Time input is lenient on purpose.** "90", "1.5h", "1h30", "45m" all work.
+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.
+
+## Layout
+
+```
+app.ts                    entities + policies (note the append-only ledger)
+app/
+  page.tsx                "/" — the project list
+  projects-view.tsx       list container
+  workspace.tsx           app shell — the ONLY place that touches `db`
+  projects/[id]/          task board, budget, time logging
+  clients/                client list + billable rollups
+  login/                  email/password auth
+components/               presentational — props in, callbacks out
+  ui/                     shadcn primitives
+lib/work.ts               statuses, time, budget, progress — pure
+lib/format.ts             time + initials — pure
+functions/                server functions
+tests/                    pure logic + component tests
+```
+
+Minutes are integers. Hours as floats produce 7.999999 on a timesheet, and
+nobody wants to explain that.
+
+## Access
+
+Every entity is readable and writable by any **signed-in** user, and by nobody
+else. Time entries are additionally insert-only for everyone.
+
+There is no client portal. Adding one means a separate, narrower policy scoped
+to that client\'s own projects, not loosening these.
+
+## Grow it
+
+- **Add a column:** `TASK_STATUSES` in `lib/work.ts`. The board, the validator,
+  and the skeleton all read from it.
+- **Invoice from time:** the billable rollup is already there
+  (`billableCents`) — pair it with the `invoices` template.
+- **Per-person timesheets:** group `TimeEntry` by `userId`; the rows already
+  carry it.
+
+## Deploy
+
+```bash
+pylon lint --strict
+pylon test
+pylon deploy
+```
+
+Docs: https://docs.pylonsync.com

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

@@ -0,0 +1,126 @@
+"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 { billableCents, duration, minutesForProject, money } from "@/lib/work";
+import { Workspace, type ClientRow } from "../workspace";
+
+export function ClientsView({ email }: { email: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Workspace email={email} pathname="/clients">
+      {(data) => {
+        const forClient = (clientId: string) =>
+          data.projects.filter((p) => p.clientId === clientId);
+
+        const columns: ColumnDef<ClientRow>[] = [
+          {
+            key: "name",
+            header: "Client",
+            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: "email",
+            header: "Email",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.email ?? "—"}</span>
+            ),
+          },
+          {
+            key: "projects",
+            header: "Projects",
+            numeric: true,
+            cell: (row) => forClient(row.id).length,
+          },
+          {
+            key: "logged",
+            header: "Logged",
+            numeric: true,
+            cell: (row) =>
+              duration(
+                forClient(row.id).reduce(
+                  (sum, p) => sum + minutesForProject(p.id, data.entries),
+                  0,
+                ),
+              ),
+          },
+          {
+            key: "billable",
+            header: "Billable",
+            numeric: true,
+            cell: (row) =>
+              money(
+                forClient(row.id).reduce(
+                  (sum, p) =>
+                    sum +
+                    billableCents(
+                      minutesForProject(p.id, data.entries),
+                      p.hourlyRateCents,
+                    ),
+                  0,
+                ),
+              ),
+          },
+        ];
+
+        const rows = [...data.clients].sort((a, b) => a.name.localeCompare(b.name));
+
+        return (
+          <>
+            <PageHeader title="Clients" count={rows.length}>
+              <Button size="sm" onClick={() => setOpen(true)}>
+                <Plus />
+                New client
+              </Button>
+            </PageHeader>
+
+            <DataTable
+              rows={rows}
+              columns={columns}
+              empty={
+                <EmptyState
+                  icon={<Users />}
+                  title="No clients yet"
+                  description="Who the work is for. Projects hang off a client, and billable totals roll up here."
+                  action={
+                    <Button size="sm" onClick={() => setOpen(true)}>
+                      <Plus />
+                      New client
+                    </Button>
+                  }
+                />
+              }
+            />
+
+            <RecordDialog
+              open={open}
+              title="New client"
+              submitLabel="Create client"
+              onOpenChange={setOpen}
+              fields={[
+                { name: "name", label: "Name", required: true, placeholder: "Northwind Logistics" },
+                { name: "email", label: "Email", type: "email", placeholder: "dana@northwind.co" },
+              ]}
+              onCreate={async (values) => {
+                await db.insert("Client", values);
+              }}
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

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

@@ -0,0 +1,17 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { ClientsView } from "./clients-view";
+
+export const metadata: Metadata = {
+  title: "Clients",
+  robots: "noindex",
+};
+
+export default function ClientsPage({ 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 <ClientsView email={me?.email ?? ""} />;
+}

package/templates/projects/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>
+  );
+}

package/templates/projects/app/globals.css

@@ -0,0 +1,201 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../app/**/*.{tsx,ts,jsx,js}";
+@source "../components/**/*.{tsx,ts,jsx,js}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ---------------------------------------------------------------------------
+   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.
+
+   These are the same variable names shadcn/ui generates against, so
+   `npx shadcn@latest add <component>` drops in already themed.
+--------------------------------------------------------------------------- */
+:root {
+  --radius: 0.5rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.21 0.006 285.9);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--foreground);
+  --popover: oklch(1 0 0);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.55 0.204 274.5);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.968 0.002 286.4);
+  --secondary-foreground: oklch(0.27 0.006 286);
+  --muted: oklch(0.972 0.002 286.4);
+  --muted-foreground: oklch(0.53 0.013 286);
+  --accent: oklch(0.96 0.003 286.4);
+  --accent-foreground: oklch(0.27 0.006 286);
+  --destructive: oklch(0.58 0.216 27.3);
+
+  --border: oklch(0.918 0.004 286.3);
+  --input: oklch(0.918 0.004 286.3);
+  --ring: oklch(0.55 0.204 274.5);
+
+  /* Surfaces above the page: sidebar, popovers, hover rows. */
+  --surface-1: oklch(0.985 0.001 286.4);
+  --surface-2: oklch(0.968 0.002 286.4);
+
+  /* Pipeline + status. Muted on purpose — a board of saturated chips is
+     unreadable, and the eye should land on the one that's actually urgent. */
+  --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-won: oklch(0.6 0.15 155);
+  --stage-lost: oklch(0.6 0.11 25);
+}
+
+.dark {
+  --background: oklch(0.165 0.004 285.9);
+  --foreground: oklch(0.93 0.002 286.3);
+  --card: oklch(0.196 0.005 285.9);
+  --card-foreground: var(--foreground);
+  --popover: oklch(0.216 0.006 285.9);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.62 0.19 274.5);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.25 0.006 286);
+  --secondary-foreground: oklch(0.93 0.002 286.3);
+  --muted: oklch(0.25 0.006 286);
+  --muted-foreground: oklch(0.65 0.012 286);
+  --accent: oklch(0.26 0.006 286);
+  --accent-foreground: oklch(0.93 0.002 286.3);
+  --destructive: oklch(0.65 0.19 25);
+
+  --border: oklch(1 0 0 / 9%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.62 0.19 274.5);
+
+  --surface-1: oklch(0.186 0.004 285.9);
+  --surface-2: oklch(0.216 0.006 285.9);
+
+  --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-won: oklch(0.7 0.15 155);
+  --stage-lost: oklch(0.68 0.14 25);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 3px);
+  --radius-md: calc(var(--radius) - 1px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+
+  --color-stage-lead: var(--stage-lead);
+  --color-stage-qualified: var(--stage-qualified);
+  --color-stage-proposal: var(--stage-proposal);
+  --color-stage-won: var(--stage-won);
+  --color-stage-lost: var(--stage-lost);
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+    outline-color: var(--color-ring);
+  }
+
+  html {
+    /* An internal tool is a fixed shell with scrolling panes, not a scrolling
+       document — this keeps the sidebar and header from drifting. */
+    height: 100%;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  body {
+    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;
+    line-height: 1.5;
+    letter-spacing: -0.006em;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  /* Numbers that sit in columns must not jitter as they change. */
+  .tabular,
+  table {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Thin, self-effacing scrollbars — the board has several at once. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--color-foreground) 18%, transparent)
+      transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: color-mix(in oklab, var(--color-foreground) 16%, transparent);
+    border: 3px solid transparent;
+    background-clip: content-box;
+    border-radius: 999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklab, var(--color-foreground) 28%, transparent);
+  }
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* Only show focus rings for keyboard users; a mouse click shouldn't ring. */
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 1px;
+  }
+}
+
+@layer components {
+  /* A hairline that reads at 1px on any DPR without the doubling you get from
+     a plain border on retina. */
+  .hairline {
+    box-shadow: inset 0 -1px 0 0 var(--color-border);
+  }
+}

package/templates/projects/app/layout.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * The document shell. The app chrome — sidebar, command palette, shortcuts —
+ * lives in `app/workspace.tsx` instead, because it needs the synced data; this
+ * layer only sets up the page.
+ *
+ * `class="dark"` makes dark the default theme. The light tokens in globals.css
+ * are complete and tested, so removing the class flips the whole app; swap it
+ * for a stored preference when you want a toggle.
+ */
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>__APP_NAME__</title>
+        {/* 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. */}
+      </head>
+      <body className="h-full">{children}</body>
+    </html>
+  );
+}

package/templates/projects/app/login/auth-form.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  ApiError,
+  passwordLogin,
+  passwordRegister,
+  persistSession,
+} from "@pylonsync/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+/**
+ * One form, two modes. Calls the built-in auth API (`/api/auth/password/*`),
+ * then `persistSession` writes the token so the sync engine and `callFn`
+ * authenticate as this user on the next load.
+ *
+ * The navigation is a full `assign`, not a client route change, so the SSR
+ * runtime re-resolves auth from the HttpOnly cookie and the first paint of the
+ * workspace is already signed in.
+ */
+export function AuthForm() {
+  const [mode, setMode] = useState<"login" | "signup">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      const session =
+        mode === "login"
+          ? await passwordLogin({ email, password })
+          : await passwordRegister({ email, password });
+      persistSession(session);
+      window.location.assign("/");
+    } catch (err) {
+      setError(messageFor(err));
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <form onSubmit={onSubmit} className="space-y-3.5">
+        <div className="space-y-1.5">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            autoComplete="email"
+            placeholder="you@company.com"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
+          />
+        </div>
+        {error ? (
+          <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-[12px] leading-snug text-destructive">
+            {error}
+          </p>
+        ) : null}
+        <Button type="submit" disabled={pending} className="w-full">
+          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+        </Button>
+      </form>
+
+      <p className="text-center text-[12px] text-muted-foreground">
+        {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "signup" : "login");
+            setError(null);
+          }}
+          className="font-medium text-foreground underline underline-offset-2"
+        >
+          {mode === "login" ? "Create an account" : "Sign in"}
+        </button>
+      </p>
+    </div>
+  );
+}
+
+// `ApiError` carries a stable `.code`, so branch on the code rather than the
+// message — the copy here is ours, the message is the framework's.
+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 registered — sign in instead.";
+      case "WEAK_PASSWORD":
+        return "Pick a longer password — at least 10 characters.";
+      case "PWNED_PASSWORD":
+        return "That password has appeared in a known breach. Choose another.";
+      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/projects/app/login/page.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { AuthForm } from "./auth-form";
+
+export const metadata: Metadata = {
+  title: "Sign in",
+  robots: "noindex",
+};
+
+export default function LoginPage({ auth, response }: PageProps) {
+  // Already signed in? Nothing to do here.
+  if (auth.user_id && !auth.user_id.startsWith("guest_")) {
+    response.redirect("/");
+    return null;
+  }
+
+  return (
+    <main className="flex min-h-screen items-center justify-center px-6">
+      <div className="w-full max-w-[320px]">
+        <div className="mb-7 flex items-center gap-2">
+          <span className="flex size-7 items-center justify-center rounded-md bg-primary text-[12px] font-bold text-primary-foreground">
+            C
+          </span>
+          <span className="text-[15px] font-semibold tracking-tight">CRM</span>
+        </div>
+        <h1 className="text-[19px] font-semibold tracking-tight">
+          Sign in to your workspace
+        </h1>
+        <p className="mt-1 text-[13px] text-muted-foreground">
+          Your team shares one pipeline. Anyone with an account sees it.
+        </p>
+        <div className="mt-6">
+          <AuthForm />
+        </div>
+      </div>
+    </main>
+  );
+}