@pylonsync/create-pylon 0.19.1 → 0.21.0

package/templates/inventory/components/page-header.tsx

@@ -1,36 +1,72 @@
+"use client";
+
 import React from "react";
+import { Menu, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useShell } from "@/components/app-shell";
 
 /**
  * The bar at the top of every view: title on the left, actions on the right.
- * Fixed height so switching pages doesn't shift the content below it.
+ * Fixed height, so switching pages doesn't shift the content below it.
+ *
+ * Below the `md` breakpoint it also carries the menu button that opens the
+ * navigation drawer and a search button, since the sidebar is hidden there.
  */
 export function PageHeader({
   title,
   count,
+  leading,
   children,
   className,
 }: {
   title: string;
-  /** Shown beside the title — the number of rows in view. */
+  /** Shown beside the title. Pass the same number the sidebar shows. */
   count?: number;
+  /** Rendered before the title, such as a back link on a detail page. */
+  leading?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
 }) {
+  const shell = useShell();
   return (
     <header
       className={cn(
-        "flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4",
+        "flex h-13 shrink-0 items-center justify-between gap-2 border-b border-border px-3 md:gap-3 md:px-5",
         className,
       )}
     >
-      <div className="flex min-w-0 items-baseline gap-2">
-        <h1 className="truncate text-[13px] font-semibold">{title}</h1>
+      <div className="flex min-w-0 items-center gap-1.5">
+        {shell ? (
+          <button
+            type="button"
+            onClick={shell.openNav}
+            aria-label="Open navigation"
+            className="-ml-1 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-foreground/[0.05] hover:text-foreground md:hidden"
+          >
+            <Menu className="size-[18px]" />
+          </button>
+        ) : null}
+        {leading}
+        <h1 className="truncate text-[14px] font-semibold tracking-[-0.01em]">{title}</h1>
         {typeof count === "number" ? (
-          <span className="tabular text-[12px] text-muted-foreground">{count}</span>
+          <span className="tabular ml-0.5 rounded-full bg-foreground/[0.06] px-1.5 py-px text-[11.5px] font-medium text-muted-foreground">
+            {count}
+          </span>
+        ) : null}
+      </div>
+      <div className="flex shrink-0 items-center gap-1.5 md:gap-2">
+        {shell ? (
+          <button
+            type="button"
+            onClick={shell.openCommand}
+            aria-label="Search"
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-foreground/[0.05] hover:text-foreground md:hidden"
+          >
+            <Search className="size-[18px]" />
+          </button>
         ) : null}
+        {children}
       </div>
-      <div className="flex items-center gap-2">{children}</div>
     </header>
   );
 }

package/templates/inventory/components/require-auth.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { useAuth } from "@pylonsync/client";
-import { AuthForm } from "@/components/auth-form";
+import { BRAND } from "@/lib/brand";
+import { AuthForm, type AuthMode } from "@/components/auth-form";
+import { BrandMark } from "@/components/brand-mark";
 
 /**
  * Client-side auth gate.
@@ -18,44 +20,40 @@ import { AuthForm } from "@/components/auth-form";
  * It also removes a full page load from the sign-in path: authenticating swaps
  * this component's children in place instead of navigating.
  */
-export function RequireAuth({
-  title,
-  description,
-  children,
-}: {
-  title: string;
-  description: string;
-  children: React.ReactNode;
-}) {
+export function RequireAuth({ children }: { children: React.ReactNode }) {
   const { isSignedIn, isLoaded } = useAuth();
+  const [mode, setMode] = useState<AuthMode>("login");
 
   // `isLoaded` covers the beat before the engine has resolved the stored token.
   // Rendering the form during it would flash a sign-in screen at someone who is
   // already signed in.
   if (!isLoaded) {
     return (
-      <main className="flex min-h-screen items-center justify-center">
-        <span className="text-[13px] text-muted-foreground">Loading…</span>
+      <main className="flex min-h-dvh items-center justify-center" aria-busy="true">
+        <BrandMark className="size-8 animate-pulse" />
+        <span className="sr-only">Loading {BRAND.name}</span>
       </main>
     );
   }
 
   if (!isSignedIn) {
     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">
-              {title.slice(0, 1).toUpperCase()}
-            </span>
-            <span className="text-[15px] font-semibold tracking-tight">{title}</span>
+      <main className="flex min-h-dvh items-center justify-center bg-surface-1 px-4 py-10">
+        <div className="w-full max-w-[380px]">
+          <div className="mb-6 flex items-center justify-center gap-2.5">
+            <BrandMark className="size-8 rounded-[9px]" />
+            <span className="text-[17px] font-semibold tracking-[-0.015em]">{BRAND.name}</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">{description}</p>
-          <div className="mt-6">
-            <AuthForm />
+          <div className="rounded-xl border border-border bg-background p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-12px_rgb(0_0_0/0.12)] sm:p-7">
+            <h1 className="text-[18px] font-semibold tracking-[-0.015em]">
+              {mode === "login" ? `Sign in to ${BRAND.name}` : `Create your ${BRAND.name} account`}
+            </h1>
+            <p className="mt-1.5 text-[13px] leading-5 text-muted-foreground">
+              {BRAND.description}
+            </p>
+            <div className="mt-6">
+              <AuthForm mode={mode} onModeChange={setMode} />
+            </div>
           </div>
         </div>
       </main>

package/templates/inventory/components/sidebar.tsx

@@ -1,111 +1,117 @@
 import React from "react";
 import { Link } from "@pylonsync/react";
-import { ArrowLeftRight, Boxes, Command, LogOut } from "lucide-react";
+import { LogOut, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { BRAND } from "@/lib/brand";
+import { NAV } from "@/components/nav";
 import { Avatar } from "@/components/avatar";
+import { BrandMark } from "@/components/brand-mark";
 import { Kbd } from "@/components/kbd";
 
-export interface NavItem {
-  href: string;
-  label: string;
-  icon: React.ReactNode;
-  count?: number;
+/** True when `href` is the section `pathname` belongs to. */
+export function isActive(href: string, pathname: string): boolean {
+  if (href === "/") return pathname === "/";
+  return pathname === href || pathname.startsWith(`${href}/`);
 }
 
-export const NAV: Array<Omit<NavItem, "count">> = [
-  { href: "/", label: "Products", icon: <Boxes /> },
-  { href: "/movements", label: "Movements", icon: <ArrowLeftRight /> },
-];
-
 /**
- * The fixed left rail. Presentational: the active path, the counts, and the
- * sign-out handler all arrive as props, so it renders identically in a test.
+ * The navigation rail: brand, search, links with counts, and the signed-in
+ * person. The same component renders as the fixed rail on wide screens and
+ * inside the drawer on phones (see components/app-shell.tsx).
+ *
+ * Presentational: the path, counts, and handlers arrive as props, so it
+ * renders the same in a test.
  */
 export function Sidebar({
-  workspace,
-  email,
+  user,
   pathname,
   counts,
   onOpenCommand,
+  onNavigate,
   onSignOut,
+  className,
 }: {
-  workspace: string;
-  email: string;
+  user: { name: string; email: string };
   pathname: string;
+  /** Badge per nav href. Omit a key to show no number. */
   counts?: Record<string, number>;
   onOpenCommand: () => void;
+  /** Called after a link is chosen, so the phone drawer can close. */
+  onNavigate?: () => void;
   onSignOut: () => void;
+  className?: string;
 }) {
   return (
-    <aside className="flex w-[224px] shrink-0 flex-col border-r border-border bg-surface-1">
-      <div className="flex h-12 items-center gap-2 px-3">
-        <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary text-[11px] font-bold text-primary-foreground">
-          {workspace.slice(0, 1).toUpperCase()}
+    <div className={cn("flex h-full w-full flex-col bg-surface-1", className)}>
+      <div className="flex h-13 shrink-0 items-center gap-2.5 px-4">
+        <BrandMark />
+        <span className="truncate text-[14px] font-semibold tracking-[-0.01em]">
+          {BRAND.name}
         </span>
-        <span className="truncate text-[13px] font-semibold">{workspace}</span>
       </div>
 
-      <div className="px-2 pb-2">
+      <div className="px-3 pb-3">
         <button
           type="button"
           onClick={onOpenCommand}
           className={cn(
-            "flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5",
-            "text-[12px] text-muted-foreground transition-colors hover:border-ring/40 hover:text-foreground",
+            "flex h-8 w-full items-center gap-2 rounded-md border border-border bg-background px-2.5",
+            "text-[12.5px] text-muted-foreground shadow-[0_1px_1px_rgb(0_0_0/0.03)] transition-colors",
+            "hover:border-foreground/15 hover:text-foreground",
           )}
         >
-          <Command className="size-3.5" />
-          <span className="flex-1 text-left">Search…</span>
-          <Kbd>⌘K</Kbd>
+          <Search className="size-3.5" />
+          <span className="flex-1 text-left">Search</span>
+          <Kbd className="max-md:hidden">⌘K</Kbd>
         </button>
       </div>
 
-      <nav className="flex-1 space-y-0.5 px-2" aria-label="Main">
+      <nav className="flex-1 space-y-px overflow-y-auto px-3" aria-label="Main">
         {NAV.map((item) => {
-          const active =
-            item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+          const active = isActive(item.href, pathname);
+          const count = counts?.[item.href];
           return (
             <Link
               key={item.href}
               href={item.href}
+              onClick={onNavigate}
               aria-current={active ? "page" : undefined}
               className={cn(
-                "flex h-7 items-center gap-2 rounded-md px-2 text-[13px] transition-colors",
-                "[&_svg]:size-3.5 [&_svg]:shrink-0",
+                "flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] transition-colors md:h-7.5",
+                "[&_svg]:size-4 [&_svg]:shrink-0",
                 active
-                  ? "bg-surface-2 font-medium text-foreground"
-                  : "text-muted-foreground hover:bg-surface-2/60 hover:text-foreground",
+                  ? "bg-foreground/[0.06] font-medium text-foreground [&_svg]:text-primary"
+                  : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
               )}
             >
               {item.icon}
               <span className="flex-1 truncate">{item.label}</span>
-              {counts?.[item.href] ? (
-                <span className="tabular text-[11px] text-muted-foreground">
-                  {counts[item.href]}
-                </span>
+              {typeof count === "number" ? (
+                <span className="tabular text-[11.5px] text-muted-foreground">{count}</span>
               ) : null}
             </Link>
           );
         })}
       </nav>
 
-      <div className="border-t border-border p-2">
-        <div className="flex items-center gap-2 rounded-md px-1.5 py-1">
-          <Avatar name={email} size="sm" />
-          <span className="min-w-0 flex-1 truncate text-[12px] text-muted-foreground">
-            {email}
-          </span>
+      <div className="border-t border-border p-3">
+        <div className="flex items-center gap-2.5">
+          <Avatar name={user.name || user.email} />
+          <div className="min-w-0 flex-1 leading-tight">
+            <p className="truncate text-[12.5px] font-medium">{user.name || "Signed in"}</p>
+            <p className="truncate text-[11.5px] text-muted-foreground">{user.email}</p>
+          </div>
           <button
             type="button"
             onClick={onSignOut}
             title="Sign out"
             aria-label="Sign out"
-            className="rounded p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground"
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground"
           >
-            <LogOut className="size-3.5" />
+            <LogOut className="size-4" />
           </button>
         </div>
       </div>
-    </aside>
+    </div>
   );
 }

package/templates/inventory/components/stock-level.tsx

@@ -2,18 +2,22 @@ import React from "react";
 import { cn } from "@/lib/utils";
 import { stockState } from "@/lib/stock";
 
-const STYLE: Record<string, string> = {
+const TEXT: Record<string, string> = {
   out: "text-destructive",
-  low: "text-stage-proposal",
+  low: "text-[color-mix(in_oklab,var(--stage-proposal)_75%,black)]",
   ok: "text-foreground",
 };
 
+const BAR: Record<string, string> = {
+  out: "bg-destructive",
+  low: "bg-stage-proposal",
+  ok: "bg-primary/70",
+};
+
 /**
- * On-hand, coloured by whether it needs attention.
- *
- * The number itself carries the colour rather than a separate badge: in a dense
- * table the quantity is what the eye goes to, and a chip beside it is a second
- * thing to read for the same information.
+ * On-hand as a number and a short bar, coloured by whether it needs
+ * attention. The bar is full at three times the reorder point, so a line
+ * sitting at its reorder point shows a third full.
  */
 export function StockLevel({
   quantity,
@@ -25,9 +29,12 @@ export function StockLevel({
   className?: string;
 }) {
   const state = stockState(quantity, reorderPoint);
+  const point = Number(reorderPoint) || 0;
+  const scale = point > 0 ? point * 3 : Math.max(quantity, 1);
+  const fill = Math.max(0, Math.min(1, quantity / scale));
   return (
     <span
-      className={cn("tabular font-medium", STYLE[state], className)}
+      className={cn("inline-flex items-center justify-end gap-3", className)}
       title={
         state === "out"
           ? "Out of stock"
@@ -36,12 +43,21 @@ export function StockLevel({
             : undefined
       }
     >
-      {quantity}
-      {state === "out" ? (
-        <span className="ml-1.5 text-[11px] font-normal">out</span>
-      ) : state === "low" ? (
-        <span className="ml-1.5 text-[11px] font-normal">low</span>
-      ) : null}
+      <span
+        aria-hidden="true"
+        className="hidden h-1.5 w-14 overflow-hidden rounded-full bg-foreground/[0.08] md:inline-block"
+      >
+        <span
+          className={cn("block h-full rounded-full", BAR[state])}
+          style={{ width: `${Math.max(fill * 100, state === "out" ? 0 : 6)}%` }}
+        />
+      </span>
+      <span className={cn("tabular min-w-[3.25rem] text-right font-medium", TEXT[state])}>
+        {quantity}
+        {state !== "ok" ? (
+          <span className="ml-1 text-[11px] font-normal">{state === "out" ? "out" : "low"}</span>
+        ) : null}
+      </span>
     </span>
   );
 }

package/templates/inventory/components/summary-bar.tsx

@@ -1,20 +1,13 @@
 import React from "react";
-import { money, summarize, type Movement, type Product } from "@/lib/stock";
+import { money, type Summary } from "@/lib/stock";
 
 /**
- * What\'s on the shelves and what needs attention. All derived from the ledger —
+ * What's on the shelves and what needs attention. All derived from the ledger —
  * see lib/stock.ts, where the arithmetic is unit-tested.
  */
-export function SummaryBar({
-  products,
-  movements,
-}: {
-  products: Product[];
-  movements: Movement[];
-}) {
-  const s = summarize(products, movements);
+export function SummaryBar({ summary: s }: { summary: Summary }) {
   return (
-    <dl className="grid grid-cols-2 gap-px border-b border-border bg-border sm:grid-cols-4">
+    <dl className="grid shrink-0 grid-cols-2 gap-px border-b border-border bg-border lg:grid-cols-4">
       <Metric label="Products" value={String(s.skuCount)} hint="active SKUs" />
       <Metric label="Units on hand" value={s.unitCount.toLocaleString("en-US")} hint="across all lines" />
       <Metric label="Stock value" value={money(s.valuationCents)} hint="at cost" />
@@ -40,17 +33,17 @@ function Metric({
   alarming?: boolean;
 }) {
   return (
-    <div className="bg-background px-4 py-3">
-      <dt className="text-[11px] text-muted-foreground">{label}</dt>
+    <div className="min-w-0 bg-background px-4 py-2.5 md:px-5 md:py-3.5">
+      <dt className="truncate text-[12px] text-muted-foreground">{label}</dt>
       <dd
         className={
-          "tabular mt-0.5 text-[18px] font-semibold tracking-tight" +
+          "tabular mt-1 text-[18px] font-semibold leading-none tracking-[-0.02em] md:text-[22px]" +
           (alarming ? " text-destructive" : "")
         }
       >
         {value}
       </dd>
-      <p className="mt-0.5 text-[11px] text-muted-foreground">{hint}</p>
+      <p className="mt-1 truncate text-[11.5px] text-muted-foreground md:mt-1.5">{hint}</p>
     </div>
   );
 }

package/templates/inventory/components/ui/button.tsx

@@ -5,15 +5,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[13px] font-medium transition-[color,background-color,box-shadow,transform] duration-150 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow-[inset_0_1px_0_rgb(255_255_255/0.15),0_1px_2px_rgb(0_0_0/0.1)] hover:bg-primary/90",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-[0_1px_1px_rgb(0_0_0/0.03)] hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
@@ -21,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
+        sm: "h-8 rounded-md px-3 text-[12.5px] md:h-7.5 [&_svg]:size-3.5",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
       },

package/templates/inventory/components/ui/dialog.tsx

@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background p-6 shadow-lg duration-200",
+        "fixed left-[50%] top-[50%] z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-xl border bg-background p-5 shadow-[0_24px_48px_-12px_rgb(0_0_0/0.25)] duration-200 sm:p-6",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className,
       )}

package/templates/inventory/components/ui/input.tsx

@@ -12,7 +12,7 @@ function Input({
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-[13px] transition-colors",
         "placeholder:text-muted-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-50",

package/templates/inventory/components/ui/select.tsx

@@ -22,7 +22,7 @@ function Select({
       <select
         data-slot="select"
         className={cn(
-          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-sm shadow-sm transition-colors",
+          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-base shadow-sm md:text-[13px] transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className,

package/templates/inventory/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ function Textarea({
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
+        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm md:text-[13px] transition-colors",
         "placeholder:text-muted-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-50",

package/templates/inventory/functions/seedWorkspace.ts

@@ -1,26 +1,36 @@
 import { mutation } from "@pylonsync/functions";
-import { shapeSeed } from "../lib/seed";
+import { SEED_TEAM, shapeSeed } from "../lib/seed";
+import { ensureDemoUser } from "../lib/demo-team";
 
 /**
  * Fill a brand-new stock workspace once.
  *
  * Seeds a plausible SEQUENCE of receipts and sales rather than a starting
- * quantity, because on-hand here is the sum of the ledger — a seed that wrote
- * levels directly would contradict the app\'s own model.
+ * quantity, because on-hand here is the sum of the ledger; a seed that wrote
+ * levels directly would contradict the app's own model.
  *
- * Returns immediately if any product exists, so it is safe on every load.
- * Delete this function and lib/seed.ts once you stock real products.
+ * Returns immediately if any product exists, so it is safe on every load. An
+ * advisory lock stops two first loads from seeding twice. Movements are
+ * recorded by the person who signed in and four demo teammates (User rows
+ * with no password, see SEED_TEAM). Delete this function, lib/seed.ts, and the
+ * `seedWorkspace` call in app/workspace.tsx once you stock real products, then
+ * delete the demo users.
  */
 export default mutation<Record<string, never>, { seeded: boolean }>({
   auth: "user",
   args: {},
   async handler(ctx) {
-    const existing = await ctx.db.query("Product", { $limit: 1 });
-    if (existing.length > 0) return { seeded: false };
+    if ((await ctx.db.query("Product", { $limit: 1 })).length > 0) return { seeded: false };
+    await ctx.db.advisoryLock("inventory_seed_workspace");
+    if ((await ctx.db.query("Product", { $limit: 1 })).length > 0) return { seeded: false };
 
     const seed = shapeSeed();
     const me = ctx.auth.userId;
 
+    // Position 0 is the person who signed in; SEED_TEAM follows.
+    const team: Array<string | null> = [me];
+    for (const person of SEED_TEAM) team.push(await ensureDemoUser(ctx.db, person));
+
     const productIds = new Map<string, string>();
     for (const product of seed.products) {
       const id = await ctx.db.insert("Product", product.row);
@@ -31,7 +41,7 @@ export default mutation<Record<string, never>, { seeded: boolean }>({
       await ctx.db.insert("Movement", {
         ...movement.row,
         productId: productIds.get(movement.product) ?? null,
-        actorId: me,
+        actorId: team[movement.actor] ?? me,
       });
     }
 

package/templates/inventory/lib/brand.ts

@@ -0,0 +1,9 @@
+// The product name, in one place. The sidebar, the sign-in screen, the page
+// title, and the drawer on phones all read it. Rename the product here; the
+// mark is in components/brand-mark.tsx and the favicon is app/icon.svg.
+
+export const BRAND = {
+  name: "Stockroom",
+  /** One line on the sign-in screen: what the app holds and who sees it. */
+  description: "Your team's products and stock ledger. Every receipt, sale, and count is recorded here.",
+} as const;

package/templates/inventory/lib/demo-team.ts

@@ -0,0 +1,51 @@
+// Creates the demo teammates the seed spreads records across. Each is a User
+// row with a `@demo.invalid` address and no password. Outside dev mode nobody
+// can sign in as one: the address can't receive a sign-in or reset email.
+// In dev mode (`PYLON_DEV_MODE=true`) the auth API returns sign-in codes
+// directly, so anyone can sign in as a demo teammate there.
+
+import type { DbWriter } from "@pylonsync/functions";
+
+export interface DemoPerson {
+  name: string;
+  email: string;
+}
+
+/**
+ * The address to try on `attempt` (0, 1, 2, …): the person's own address
+ * first, then `local+2@demo.invalid`, `local+3@…`, and so on.
+ */
+export function demoEmail(email: string, attempt: number): string {
+  if (attempt === 0) return email;
+  const at = email.indexOf("@");
+  return `${email.slice(0, at)}+${attempt + 1}${email.slice(at)}`;
+}
+
+/**
+ * A User row the seed may reuse: one it created itself on an earlier run.
+ * A row with a password or a verified email belongs to someone who
+ * registered that address, so the seed never assigns demo records to it.
+ */
+export function isDemoRow(row: Record<string, unknown>): boolean {
+  return !row.passwordHash && !row.emailVerified;
+}
+
+/** Returns the id of a demo User row for `person`, creating it if needed. */
+export async function ensureDemoUser(db: DbWriter, person: DemoPerson): Promise<string> {
+  for (let attempt = 0; attempt < 20; attempt += 1) {
+    const email = demoEmail(person.email, attempt);
+    // Users are written by auth, and their policy denies client inserts, so
+    // demo rows go through the server-trust surface. The read sees
+    // passwordHash, which is how a registered account is told apart.
+    const [existing] = await db.unsafe.query("User", { email, $limit: 1 });
+    if (!existing) {
+      return db.unsafe.insert("User", {
+        email,
+        displayName: person.name,
+        createdAt: new Date(Date.now() - 200 * 86_400_000).toISOString(),
+      });
+    }
+    if (isDemoRow(existing)) return existing.id as string;
+  }
+  throw new Error(`No free demo address for ${person.email}`);
+}