@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/inventory/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/inventory/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/inventory/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/inventory/components/brand-mark.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The Stockroom mark: three boxes stacked two over one, 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="4.6" y="1.5" width="6.8" height="5.8" rx="1.2" />
+        <rect x="1" y="8.7" width="6.6" height="5.8" rx="1.2" />
+        <rect x="8.4" y="8.7" width="6.6" height="5.8" rx="1.2" />
+      </svg>
+    </span>
+  );
+}

package/templates/inventory/components/category-tile.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Coffee, Leaf, Milk, Package, Shirt, Wrench } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { accentIndex } from "@/lib/format";
+
+// Icon and tint per seeded category. An unknown category gets a box and a
+// tint picked from its name, so a new category works without touching this
+// file.
+const KNOWN: Record<string, { icon: React.ReactNode; tint: string }> = {
+  Coffee: { icon: <Coffee />, tint: "bg-amber-600/12 text-amber-800" },
+  Tea: { icon: <Leaf />, tint: "bg-emerald-600/12 text-emerald-700" },
+  "Dairy & Alternatives": { icon: <Milk />, tint: "bg-sky-500/12 text-sky-700" },
+  Equipment: { icon: <Wrench />, tint: "bg-slate-500/12 text-slate-700" },
+  Merch: { icon: <Shirt />, tint: "bg-violet-500/12 text-violet-700" },
+  Packaging: { icon: <Package />, tint: "bg-orange-500/12 text-orange-700" },
+};
+
+const TINTS = [
+  "bg-amber-500/12 text-amber-700",
+  "bg-emerald-500/12 text-emerald-700",
+  "bg-sky-500/12 text-sky-700",
+  "bg-rose-500/12 text-rose-700",
+  "bg-violet-500/12 text-violet-700",
+  "bg-stone-500/12 text-stone-700",
+];
+
+/** A small square that marks a product's category in dense lists. */
+export function CategoryTile({
+  category,
+  className,
+}: {
+  category: string | null | undefined;
+  className?: string;
+}) {
+  const name = category ?? "";
+  return (
+    <span
+      aria-hidden="true"
+      title={name || undefined}
+      className={cn(
+        "inline-flex size-7 shrink-0 items-center justify-center rounded-md [&_svg]:size-3.5",
+        KNOWN[name]?.tint ?? TINTS[accentIndex(name || "?", TINTS.length)],
+        className,
+      )}
+    >
+      {KNOWN[name]?.icon ?? <Package />}
+    </span>
+  );
+}

package/templates/inventory/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/inventory/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/inventory/components/filter-tabs.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export interface FilterTab {
+  id: string;
+  label: string;
+  count?: number;
+}
+
+/**
+ * A row of view filters under the page header, each with its count. On a
+ * phone the row scrolls sideways inside itself instead of widening the page.
+ *
+ * Each filter is a toggle button in a labelled group; ←/→ move between them
+ * and Home/End jump to the ends.
+ */
+export function FilterTabs({
+  tabs,
+  value,
+  onChange,
+  label,
+  trailing,
+  className,
+}: {
+  tabs: FilterTab[];
+  value: string;
+  onChange: (id: string) => void;
+  /** Accessible name for the group, such as "Ticket status". */
+  label: string;
+  /** Extra controls at the end of the row, such as a toggle. */
+  trailing?: React.ReactNode;
+  className?: string;
+}) {
+  function onKeyDown(event: React.KeyboardEvent<HTMLButtonElement>, index: number) {
+    const target =
+      event.key === "ArrowRight"
+        ? (index + 1) % tabs.length
+        : event.key === "ArrowLeft"
+          ? (index - 1 + tabs.length) % tabs.length
+          : event.key === "Home"
+            ? 0
+            : event.key === "End"
+              ? tabs.length - 1
+              : -1;
+    if (target < 0) return;
+    event.preventDefault();
+    const next = tabs[target];
+    onChange(next.id);
+    const list = event.currentTarget.parentElement;
+    list?.querySelector<HTMLButtonElement>(`[data-tab="${next.id}"]`)?.focus();
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex h-11 shrink-0 items-center gap-3 border-b border-border px-3 md:px-5",
+        className,
+      )}
+    >
+      <div
+        role="group"
+        aria-label={label}
+        className="-mx-1 flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        {tabs.map((tab, index) => {
+          const selected = tab.id === value;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              data-tab={tab.id}
+              aria-pressed={selected}
+              tabIndex={selected ? 0 : -1}
+              onClick={() => onChange(tab.id)}
+              onKeyDown={(event) => onKeyDown(event, index)}
+              className={cn(
+                "flex h-7 shrink-0 items-center gap-1.5 rounded-md px-2.5 text-[12.5px] transition-colors",
+                selected
+                  ? "bg-foreground/[0.07] font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
+              )}
+            >
+              {tab.label}
+              {typeof tab.count === "number" ? (
+                <span
+                  className={cn(
+                    "tabular text-[11.5px]",
+                    selected ? "text-foreground/60" : "text-muted-foreground/80",
+                  )}
+                >
+                  {tab.count}
+                </span>
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+      {trailing ? <div className="flex shrink-0 items-center gap-2">{trailing}</div> : null}
+    </div>
+  );
+}

package/templates/inventory/components/nav.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ArrowLeftRight, Boxes } from "lucide-react";
+
+export interface NavEntry {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+/** The sidebar's links, top to bottom. Add a view here to put it in the nav. */
+export const NAV: NavEntry[] = [
+  { href: "/", label: "Products", icon: <Boxes /> },
+  { href: "/movements", label: "Movements", icon: <ArrowLeftRight /> },
+];