@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/crm/components/app-shell.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { BRAND } from "@/lib/brand";
+import { Sidebar } from "@/components/sidebar";
+
+interface ShellControls {
+  /** Opens the navigation drawer. Only reachable on narrow screens. */
+  openNav: () => void;
+  openCommand: () => void;
+}
+
+const ShellContext = createContext<ShellControls | null>(null);
+
+/** The shell's controls, or null outside a shell (a component test). */
+export function useShell(): ShellControls | null {
+  return useContext(ShellContext);
+}
+
+type SidebarProps = React.ComponentProps<typeof Sidebar>;
+
+/**
+ * The page frame. From the `md` breakpoint up, the sidebar is a fixed
+ * 240px rail and the main column scrolls on its own. Below it, the rail
+ * is hidden and the same sidebar opens as a drawer from the menu button
+ * in each page header, so a phone gets the full width for content.
+ */
+export function AppShell({
+  sidebar,
+  children,
+}: {
+  sidebar: Omit<SidebarProps, "onNavigate" | "className">;
+  children: React.ReactNode;
+}) {
+  const [navOpen, setNavOpen] = useState(false);
+  const { pathname, onOpenCommand } = sidebar;
+
+  // A route change closes the drawer, including one made from ⌘K.
+  useEffect(() => {
+    setNavOpen(false);
+  }, [pathname]);
+
+  // Widening past md hides the drawer, so close it rather than leave an
+  // invisible modal holding focus.
+  useEffect(() => {
+    const wide = window.matchMedia("(min-width: 768px)");
+    const onChange = () => {
+      if (wide.matches) setNavOpen(false);
+    };
+    wide.addEventListener("change", onChange);
+    return () => wide.removeEventListener("change", onChange);
+  }, []);
+
+  return (
+    <ShellContext.Provider
+      value={{ openNav: () => setNavOpen(true), openCommand: onOpenCommand }}
+    >
+      <div className="flex h-dvh overflow-hidden bg-background">
+        <aside className="hidden w-[240px] shrink-0 border-r border-border md:flex">
+          <Sidebar {...sidebar} />
+        </aside>
+
+        <DialogPrimitive.Root open={navOpen} onOpenChange={setNavOpen}>
+          <DialogPrimitive.Portal>
+            <DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-black/40 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 md:hidden" />
+            <DialogPrimitive.Content
+              className={
+                "fixed inset-y-0 left-0 z-40 flex w-[min(300px,86vw)] border-r border-border shadow-xl outline-none md:hidden " +
+                "duration-200 data-[state=open]:animate-in data-[state=open]:slide-in-from-left " +
+                "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left"
+              }
+            >
+              <DialogPrimitive.Title className="sr-only">{BRAND.name} navigation</DialogPrimitive.Title>
+              <DialogPrimitive.Description className="sr-only">
+                Links to every section, search, and your account.
+              </DialogPrimitive.Description>
+              <Sidebar
+                {...sidebar}
+                onNavigate={() => setNavOpen(false)}
+                onOpenCommand={() => {
+                  setNavOpen(false);
+                  onOpenCommand();
+                }}
+              />
+            </DialogPrimitive.Content>
+          </DialogPrimitive.Portal>
+        </DialogPrimitive.Root>
+
+        <main className="flex min-w-0 flex-1 flex-col">{children}</main>
+      </div>
+    </ShellContext.Provider>
+  );
+}

package/templates/crm/components/auth-form.tsx

@@ -21,8 +21,16 @@ import { Label } from "@/components/ui/label";
  * SSR cookie, which browsers withhold inside the builder's cross-site preview
  * iframe — that's the sign-in loop this avoids.
  */
-export function AuthForm() {
-  const [mode, setMode] = useState<"login" | "signup">("login");
+export type AuthMode = "login" | "signup";
+
+export function AuthForm({
+  mode,
+  onModeChange,
+}: {
+  mode: AuthMode;
+  onModeChange: (mode: AuthMode) => void;
+}) {
+  const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
@@ -36,7 +44,11 @@ export function AuthForm() {
       const session =
         mode === "login"
           ? await passwordLogin({ email, password })
-          : await passwordRegister({ email, password });
+          : await passwordRegister({
+              email,
+              password,
+              ...(name.trim() ? { displayName: name.trim() } : {}),
+            });
       // No navigation: persistSession notifies the sync engine, RequireAuth
       // re-renders, and the app appears in place. A full page load here would
       // depend on the SSR session cookie, which a cross-site iframe withholds.
@@ -50,6 +62,18 @@ export function AuthForm() {
   return (
     <div className="space-y-5">
       <form onSubmit={onSubmit} className="space-y-3.5">
+        {mode === "signup" ? (
+          <div className="space-y-1.5">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              autoComplete="name"
+              placeholder="Jordan Lee"
+            />
+          </div>
+        ) : null}
         <div className="space-y-1.5">
           <Label htmlFor="email">Email</Label>
           <Input
@@ -80,7 +104,13 @@ export function AuthForm() {
           </p>
         ) : null}
         <Button type="submit" disabled={pending} className="w-full">
-          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+          {pending
+            ? mode === "login"
+              ? "Signing in…"
+              : "Creating account…"
+            : mode === "login"
+              ? "Sign in"
+              : "Create account"}
         </Button>
       </form>
 
@@ -89,7 +119,7 @@ export function AuthForm() {
         <button
           type="button"
           onClick={() => {
-            setMode(mode === "login" ? "signup" : "login");
+            onModeChange(mode === "login" ? "signup" : "login");
             setError(null);
           }}
           className="font-medium text-foreground underline underline-offset-2"

package/templates/crm/components/avatar.tsx

@@ -17,10 +17,13 @@ const ACCENTS = [
 export function Avatar({
   name,
   size = "md",
+  shape = "round",
   className,
 }: {
   name: string | null | undefined;
   size?: "sm" | "md";
+  /** Square for an organisation, round for a person. */
+  shape?: "round" | "square";
   className?: string;
 }) {
   const label = initials(name);
@@ -28,7 +31,8 @@ export function Avatar({
     <span
       aria-hidden="true"
       className={cn(
-        "inline-flex shrink-0 select-none items-center justify-center rounded-full font-medium",
+        "inline-flex shrink-0 select-none items-center justify-center font-semibold",
+        shape === "square" ? "rounded-md" : "rounded-full",
         size === "sm" ? "size-5 text-[9px]" : "size-6 text-[10px]",
         ACCENTS[accentIndex(name ?? "?", ACCENTS.length)],
         className,

package/templates/crm/components/board-skeleton.tsx

@@ -12,14 +12,14 @@ import { BOARD_STAGES } from "@/lib/pipeline";
  */
 export function BoardSkeleton() {
   return (
-    <div className="flex h-full gap-3 overflow-hidden p-4" aria-hidden="true">
+    <div className="flex h-full gap-3 overflow-hidden p-4 md:px-5" aria-hidden="true">
       {BOARD_STAGES.map((stage, column) => (
         <section
           key={stage.id}
-          className="flex w-[268px] shrink-0 flex-col rounded-xl border border-border bg-surface-1/50"
+          className="flex w-[84vw] shrink-0 flex-col rounded-xl border border-border/70 bg-surface-1 md:w-auto md:min-w-[208px] md:max-w-[340px] md:flex-1"
         >
-          <header className="flex items-center gap-2 px-3 py-2.5">
-            <span className="text-[12px] font-medium text-muted-foreground">
+          <header className="flex items-center gap-2 px-3 pb-2 pt-3">
+            <span className="text-[12.5px] font-semibold text-muted-foreground">
               {stage.label}
             </span>
           </header>
@@ -29,7 +29,7 @@ export function BoardSkeleton() {
             {Array.from({ length: Math.max(1, 3 - column) }).map((_, card) => (
               <div
                 key={card}
-                className="animate-pulse rounded-lg border border-border bg-card p-2.5"
+                className="animate-pulse rounded-lg border border-border/80 bg-card p-3"
               >
                 <div className="h-3 w-3/4 rounded bg-muted" />
                 <div className="mt-2 h-2.5 w-1/2 rounded bg-muted" />

package/templates/crm/components/brand-mark.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The Dealbook mark: three stacked bars that narrow like a sales funnel, on
+ * the accent square. app/icon.svg draws the same shape for the favicon.
+ */
+export function BrandMark({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-[7px] bg-primary text-primary-foreground",
+        "shadow-[inset_0_1px_0_rgb(255_255_255/0.18),0_1px_2px_rgb(0_0_0/0.12)]",
+        className,
+      )}
+    >
+      <svg viewBox="0 0 16 16" className="size-[62%]" fill="currentColor">
+        <rect x="1.5" y="2.5" width="13" height="2.6" rx="1.3" />
+        <rect x="3.5" y="6.7" width="9" height="2.6" rx="1.3" />
+        <rect x="5.5" y="10.9" width="5" height="2.6" rx="1.3" />
+      </svg>
+    </span>
+  );
+}

package/templates/crm/components/command-palette.tsx

@@ -1,15 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Building2, Plus, Search, User } from "lucide-react";
+import { ArrowRight, FileText, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Kbd } from "@/components/kbd";
 import { moveSelection, searchItems, type SearchItem } from "@/lib/search";
 
-const TYPE_ICON: Record<SearchItem["type"], React.ReactNode> = {
-  deal: <Search />,
-  company: <Building2 />,
-  contact: <User />,
-};
-
 export interface CommandAction {
   id: string;
   label: string;
@@ -28,12 +22,18 @@ export function CommandPalette({
   open,
   items,
   actions = [],
+  placeholder = "Search…",
+  icons = {},
   onClose,
   onSelect,
 }: {
   open: boolean;
   items: SearchItem[];
   actions?: CommandAction[];
+  /** Input placeholder naming what can be found, such as "Search deals…". */
+  placeholder?: string;
+  /** Icon per `SearchItem.type`. Unknown types get a document icon. */
+  icons?: Record<string, React.ReactNode>;
   onClose: () => void;
   onSelect: (item: SearchItem) => void;
 }) {
@@ -76,7 +76,7 @@ export function CommandPalette({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 pt-[12vh]"
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 px-3 pt-[10vh] md:pt-[14vh]"
       // Clicking the backdrop dismisses; clicks inside the panel must not.
       onMouseDown={(event) => {
         if (event.target === event.currentTarget) onClose();
@@ -85,8 +85,8 @@ export function CommandPalette({
       <div
         role="dialog"
         aria-modal="true"
-        aria-label="Search"
-        className="w-full max-w-lg overflow-hidden rounded-xl border border-border bg-popover shadow-2xl"
+        aria-label="Command menu"
+        className="w-full max-w-xl overflow-hidden rounded-xl border border-border bg-popover shadow-[0_24px_64px_-12px_rgb(0_0_0/0.3)]"
         onKeyDown={(event) => {
           if (event.key === "Escape") {
             event.preventDefault();
@@ -109,14 +109,14 @@ export function CommandPalette({
             ref={inputRef}
             value={query}
             onChange={(event) => setQuery(event.target.value)}
-            placeholder="Search deals, companies, contacts…"
-            aria-label="Search deals, companies and contacts"
-            className="h-11 flex-1 bg-transparent text-[13px] outline-none placeholder:text-muted-foreground"
+            placeholder={placeholder}
+            aria-label={placeholder.replace(/…$/, "")}
+            className="h-12 flex-1 bg-transparent text-base outline-none placeholder:text-muted-foreground md:text-[14px]"
           />
-          <Kbd>esc</Kbd>
+          <Kbd className="max-md:hidden">esc</Kbd>
         </div>
 
-        <div className="max-h-80 overflow-y-auto p-1.5">
+        <div className="max-h-[min(360px,60dvh)] overflow-y-auto p-1.5">
           {rows.length === 0 ? (
             <p className="px-3 py-6 text-center text-[12px] text-muted-foreground">
               No matches for “{query}”
@@ -138,12 +138,12 @@ export function CommandPalette({
               >
                 {row.kind === "action" ? (
                   <>
-                    <Plus />
+                    <ArrowRight />
                     <span className="flex-1 truncate">{row.action.label}</span>
                   </>
                 ) : (
                   <>
-                    {TYPE_ICON[row.item.type]}
+                    {icons[row.item.type] ?? <FileText />}
                     <span className="flex-1 truncate">{row.item.title}</span>
                     {row.item.subtitle ? (
                       <span className="truncate text-[12px] text-muted-foreground">

package/templates/crm/components/data-table.tsx

@@ -8,41 +8,81 @@ export interface ColumnDef<Row> {
   cell: (row: Row) => React.ReactNode;
   /** Right-align and tabular-figure a numeric column. */
   numeric?: boolean;
+  /**
+   * Hide the column below a breakpoint. Phones keep the first column and the
+   * one or two numbers that matter; the rest appear as the screen widens.
+   */
+  hideBelow?: "sm" | "md" | "lg" | "xl";
+  /** Width and other classes, applied to the header and every cell. */
   className?: string;
 }
 
+const HIDE: Record<NonNullable<ColumnDef<unknown>["hideBelow"]>, string> = {
+  sm: "hidden sm:table-cell",
+  md: "hidden md:table-cell",
+  lg: "hidden lg:table-cell",
+  xl: "hidden xl:table-cell",
+};
+
 /**
- * A dense list view. Rows are 36px so a screenful is a screenful of data, and
- * the header sticks while the body scrolls.
+ * A dense list view. Rows are 40px on desktop and 48px on touch screens, the
+ * header sticks while the body scrolls, and the table uses a fixed layout so
+ * column widths come from the column definitions, not the content.
  *
- * Generic and presentational — every view here uses the same one, which is why
- * companies and contacts look like the same product.
+ * Keyboard: every clickable row is a Tab stop; ↑/↓ (or j/k) move between rows
+ * and Enter opens one.
  */
 export function DataTable<Row extends { id: string }>({
   rows,
   columns,
   onRowClick,
+  loading,
   empty,
+  label,
 }: {
   rows: Row[];
   columns: ColumnDef<Row>[];
   onRowClick?: (row: Row) => void;
+  /** Show placeholder rows while the first sync is in flight. */
+  loading?: boolean;
   empty?: React.ReactNode;
+  /** Accessible name for the table. */
+  label?: string;
 }) {
-  if (rows.length === 0 && empty) return <>{empty}</>;
+  if (!loading && rows.length === 0 && empty) return <>{empty}</>;
+
+  function onRowKey(event: React.KeyboardEvent<HTMLTableRowElement>, row: Row) {
+    const key = event.key;
+    if (key === "Enter" && onRowClick) {
+      event.preventDefault();
+      onRowClick(row);
+      return;
+    }
+    const down = key === "ArrowDown" || key === "j";
+    const up = key === "ArrowUp" || key === "k";
+    if (!down && !up) return;
+    event.preventDefault();
+    const target = (
+      down ? event.currentTarget.nextElementSibling : event.currentTarget.previousElementSibling
+    ) as HTMLElement | null;
+    target?.focus();
+  }
 
   return (
     <div className="min-h-0 flex-1 overflow-auto">
-      <table className="w-full border-collapse text-[13px]">
-        <thead className="sticky top-0 z-10 bg-background">
+      <table aria-label={label} className="w-full table-fixed border-collapse text-[13px]">
+        <thead className="sticky top-0 z-10 bg-background/95 backdrop-blur-sm">
           <tr className="hairline">
-            {columns.map((column) => (
+            {columns.map((column, index) => (
               <th
                 key={column.key}
                 scope="col"
                 className={cn(
-                  "h-8 px-4 text-left text-[11px] font-medium text-muted-foreground",
+                  "h-9 px-3 text-left text-[11px] font-medium uppercase tracking-[0.04em] text-muted-foreground",
+                  index === 0 && "pl-4 md:pl-5",
+                  index === columns.length - 1 && "pr-4 md:pr-5",
                   column.numeric && "text-right",
+                  column.hideBelow && HIDE[column.hideBelow],
                   column.className,
                 )}
               >
@@ -52,37 +92,58 @@ export function DataTable<Row extends { id: string }>({
           </tr>
         </thead>
         <tbody>
-          {rows.map((row) => (
-            <tr
-              key={row.id}
-              onClick={onRowClick ? () => onRowClick(row) : undefined}
-              tabIndex={onRowClick ? 0 : undefined}
-              onKeyDown={
-                onRowClick
-                  ? (event) => {
-                      if (event.key === "Enter") onRowClick(row);
-                    }
-                  : undefined
-              }
-              className={cn(
-                "border-b border-border/60 transition-colors",
-                onRowClick && "cursor-pointer hover:bg-surface-1",
-              )}
-            >
-              {columns.map((column) => (
-                <td
-                  key={column.key}
+          {loading
+            ? Array.from({ length: 8 }).map((_, index) => (
+                <tr key={`skeleton-${index}`} aria-hidden="true" className="border-b border-border/60">
+                  {columns.map((column, c) => (
+                    <td
+                      key={column.key}
+                      className={cn(
+                        "h-12 px-3 md:h-10",
+                        c === 0 && "pl-4 md:pl-5",
+                        column.hideBelow && HIDE[column.hideBelow],
+                        column.className,
+                      )}
+                    >
+                      <div
+                        className={cn(
+                          "h-2.5 animate-pulse rounded-full bg-foreground/[0.07]",
+                          column.numeric ? "ml-auto w-10" : c === 0 ? "w-3/4" : "w-1/2",
+                        )}
+                      />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row) => (
+                <tr
+                  key={row.id}
+                  onClick={onRowClick ? () => onRowClick(row) : undefined}
+                  tabIndex={onRowClick ? 0 : undefined}
+                  onKeyDown={onRowClick ? (event) => onRowKey(event, row) : undefined}
                   className={cn(
-                    "h-9 max-w-0 truncate px-4",
-                    column.numeric && "tabular text-right",
-                    column.className,
+                    "border-b border-border/60 transition-colors",
+                    onRowClick &&
+                      "cursor-pointer hover:bg-foreground/[0.025] focus-visible:bg-primary/[0.06] focus-visible:outline-none",
                   )}
                 >
-                  {column.cell(row)}
-                </td>
+                  {columns.map((column, index) => (
+                    <td
+                      key={column.key}
+                      className={cn(
+                        "h-12 truncate px-3 md:h-10",
+                        index === 0 && "pl-4 md:pl-5",
+                        index === columns.length - 1 && "pr-4 md:pr-5",
+                        column.numeric && "tabular text-right",
+                        column.hideBelow && HIDE[column.hideBelow],
+                        column.className,
+                      )}
+                    >
+                      {column.cell(row)}
+                    </td>
+                  ))}
+                </tr>
               ))}
-            </tr>
-          ))}
         </tbody>
       </table>
     </div>

package/templates/crm/components/deal-card.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 import { Avatar } from "@/components/avatar";
-import { daysUntil, money, type Deal } from "@/lib/pipeline";
+import { closeDue, money, type Deal } from "@/lib/pipeline";
 
 /**
  * One deal on the board. Draggable, but never the source of truth for where it
@@ -25,10 +25,8 @@ export function DealCard({
   onDragEnd: () => void;
   dragging?: boolean;
 }) {
-  const days = daysUntil(deal.closeDate);
-  // Only surface a date when it's actionable: overdue, or inside a week.
-  const overdue = days !== null && days < 0;
-  const soon = days !== null && days >= 0 && days <= 7;
+  // Only surface a date when it's actionable, and never on a closed deal.
+  const due = closeDue(deal);
 
   return (
     <article
@@ -51,38 +49,36 @@ export function DealCard({
       tabIndex={0}
       aria-label={`${deal.title}${company ? `, ${company}` : ""}`}
       className={cn(
-        "group cursor-pointer rounded-lg border border-border bg-card p-2.5 transition-all",
-        "hover:border-ring/40 focus-visible:border-ring",
+        "group cursor-pointer rounded-lg border border-border/80 bg-card p-3 transition-[border-color,box-shadow,opacity]",
+        "shadow-[0_1px_2px_rgb(0_0_0/0.04)] hover:border-foreground/15 hover:shadow-[0_2px_6px_rgb(0_0_0/0.06)]",
+        "focus-visible:border-ring focus-visible:outline-none",
         dragging && "opacity-40",
       )}
     >
-      <div className="flex items-start justify-between gap-2">
-        <p className="line-clamp-2 flex-1 text-[13px] font-medium leading-snug">
-          {deal.title}
-        </p>
-        <span className="tabular shrink-0 text-[12px] font-medium text-muted-foreground">
-          {money(deal.value)}
-        </span>
-      </div>
-
+      <p className="line-clamp-2 text-[13px] font-medium leading-snug">{deal.title}</p>
       {company ? (
-        <p className="mt-1 truncate text-[12px] text-muted-foreground">{company}</p>
+        <p className="mt-0.5 truncate text-[12px] text-muted-foreground">{company}</p>
       ) : null}
 
-      <div className="mt-2.5 flex items-center justify-between gap-2">
-        {owner ? <Avatar name={owner} size="sm" /> : <span />}
-        {overdue || soon ? (
+      <div className="mt-3 flex items-center gap-2">
+        <span className="tabular text-[13px] font-semibold tracking-[-0.01em]">
+          {money(deal.value)}
+        </span>
+        {due ? (
           <span
             className={cn(
-              "tabular text-[11px]",
-              overdue ? "text-destructive" : "text-muted-foreground",
+              "tabular rounded px-1.5 py-px text-[11px] font-medium",
+              due.tone === "overdue"
+                ? "bg-destructive/10 text-destructive"
+                : "bg-foreground/[0.05] text-muted-foreground",
             )}
           >
-            {overdue
-              ? `${Math.abs(days as number)}d overdue`
-              : days === 0
-                ? "Today"
-                : `${days}d`}
+            {due.label}
+          </span>
+        ) : null}
+        {owner ? (
+          <span className="ml-auto" title={`Owner: ${owner}`}>
+            <Avatar name={owner} size="sm" />
           </span>
         ) : null}
       </div>