@pylonsync/create-pylon 0.8.1 → 0.8.3

package/templates/saas/app/dashboard/settings/page.tsx

@@ -2,6 +2,7 @@ import React, { use } from "react";
 import { type Metadata, type PageProps } from "@pylonsync/react";
 import {
   Settings,
+  type AccountInfo,
   type OrgInfo,
   type OrgMemberRow,
 } from "../dashboard-client";
@@ -21,6 +22,7 @@ export default function SettingsPage({ auth, response, serverData }: PageProps)
     return null;
   }
   const org = use(serverData.get<OrgInfo>("Org", auth.tenant_id));
+  const me = use(serverData.get<AccountInfo>("User", auth.user_id!));
   const members = use(serverData.list<OrgMemberRow>("OrgMember"));
   const memberCount = members.filter(
     (m) => m.orgId === auth.tenant_id,
@@ -30,6 +32,7 @@ export default function SettingsPage({ auth, response, serverData }: PageProps)
       org={org}
       role={auth.roles?.[0] ?? ""}
       memberCount={memberCount}
+      me={me}
     />
   );
 }

package/templates/saas/app/onboarding/onboarding-client.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import React, { useState } from "react";
+import { callFn, db } from "@pylonsync/react";
+import { createInvite, createOrg, renameOrg } from "@pylonsync/client";
+import { Button } from "@/components/ui/button";
+import { TRIAL_DAYS, planById } from "@/lib/plans";
+
+type Step = "workspace" | "team" | "project" | "plan";
+const ORDER: Step[] = ["workspace", "team", "project", "plan"];
+
+const inputCls =
+  "h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-zinc-900 focus:ring-2 focus:ring-zinc-900/10";
+
+/**
+ * Four short steps, each one decision, each skippable after the first:
+ *
+ *   1. Workspace name  → creates the org and makes it the active tenant
+ *   2. Invite the team → up to three emails, or skip
+ *   3. First project   → so the dashboard is not empty on arrival
+ *   4. Plan            → start the Pro trial (Stripe Checkout) or stay free
+ *
+ * The workspace is created at step 1, so a closed tab still leaves the user
+ * with a usable account; the dashboard sends them back here until step 4
+ * stamps `Org.onboardedAt`.
+ */
+export function OnboardingWizard({
+  org,
+  email,
+}: {
+  org: { id: string; name: string } | null;
+  email: string;
+}) {
+  const [orgId, setOrgId] = useState<string | null>(org?.id ?? null);
+  const [step, setStep] = useState<Step>("workspace");
+  const [name, setName] = useState(org?.name ?? suggestName(email));
+  const [emails, setEmails] = useState(["", "", ""]);
+  const [project, setProject] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const index = ORDER.indexOf(step);
+
+  async function run(fn: () => Promise<void>) {
+    setBusy(true);
+    setError(null);
+    try {
+      await fn();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function saveWorkspace(e: React.FormEvent) {
+    e.preventDefault();
+    const value = name.trim();
+    if (!value) return;
+    void run(async () => {
+      if (orgId) {
+        await renameOrg(orgId, value);
+      } else {
+        const created = await createOrg(value);
+        setOrgId(created.id);
+        await db.sync.selectOrg(created.id);
+      }
+      setStep("team");
+    });
+  }
+
+  function sendInvites() {
+    const list = emails.map((x) => x.trim()).filter((x) => x.includes("@"));
+    void run(async () => {
+      if (orgId) {
+        for (const address of list) await createInvite(orgId, address, "member");
+      }
+      setStep("project");
+    });
+  }
+
+  function createFirstProject(e: React.FormEvent) {
+    e.preventDefault();
+    const value = project.trim();
+    if (!value || !orgId) return;
+    void run(async () => {
+      await callFn("createProject", { orgId, name: value });
+      setStep("plan");
+    });
+  }
+
+  async function finish(startTrial: boolean) {
+    if (!orgId) return;
+    await run(async () => {
+      await callFn("completeOnboarding", { orgId });
+      if (startTrial) {
+        const origin = window.location.origin;
+        const res = await callFn<{ url: string }>("createCheckoutSession", {
+          plan: "pro",
+          referenceId: orgId,
+          annual: true,
+          successUrl: `${origin}/dashboard?welcome=1`,
+          cancelUrl: `${origin}/dashboard/billing`,
+        });
+        window.location.assign(res.url);
+        return;
+      }
+      window.location.assign("/dashboard?welcome=1");
+    });
+  }
+
+  const pro = planById("pro")!;
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-6 py-12">
+      <div className="w-full max-w-md">
+        <div className="mb-6 flex items-center gap-2">
+          {ORDER.map((s, i) => (
+            <span
+              key={s}
+              className={`h-1.5 flex-1 rounded-full ${i <= index ? "bg-zinc-900" : "bg-zinc-200"}`}
+            />
+          ))}
+        </div>
+        <div className="rounded-2xl border border-zinc-200 bg-white p-8">
+          {step === "workspace" && (
+            <form onSubmit={saveWorkspace} className="space-y-5">
+              <div>
+                <h1 className="text-xl font-semibold tracking-tight text-zinc-900">Name your workspace</h1>
+                <p className="mt-1 text-sm text-zinc-500">Usually your company or team name. You can change it later.</p>
+              </div>
+              <input
+                autoFocus
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Acme Inc"
+                aria-label="Workspace name"
+                className={inputCls}
+              />
+              <Button type="submit" className="w-full" disabled={busy || !name.trim()}>
+                {busy ? "…" : "Continue"}
+              </Button>
+            </form>
+          )}
+
+          {step === "team" && (
+            <div className="space-y-5">
+              <div>
+                <h1 className="text-xl font-semibold tracking-tight text-zinc-900">Invite your team</h1>
+                <p className="mt-1 text-sm text-zinc-500">Teammates get an email with a link to join. Add more later from Members.</p>
+              </div>
+              <div className="space-y-2">
+                {emails.map((value, i) => (
+                  <input
+                    key={i}
+                    type="email"
+                    value={value}
+                    onChange={(e) => setEmails(emails.map((x, j) => (j === i ? e.target.value : x)))}
+                    placeholder={i === 0 ? "teammate@company.com" : "Another email (optional)"}
+                    aria-label={`Invite email ${i + 1}`}
+                    className={inputCls}
+                  />
+                ))}
+              </div>
+              <div className="flex gap-2">
+                <Button type="button" variant="outline" className="flex-1" onClick={() => setStep("project")} disabled={busy}>
+                  Skip for now
+                </Button>
+                <Button type="button" className="flex-1" onClick={sendInvites} disabled={busy}>
+                  {busy ? "…" : "Send invites"}
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {step === "project" && (
+            <form onSubmit={createFirstProject} className="space-y-5">
+              <div>
+                <h1 className="text-xl font-semibold tracking-tight text-zinc-900">Create your first project</h1>
+                <p className="mt-1 text-sm text-zinc-500">Something you are working on this week. It shows up on your dashboard.</p>
+              </div>
+              <input
+                autoFocus
+                value={project}
+                onChange={(e) => setProject(e.target.value)}
+                placeholder="Website redesign"
+                aria-label="Project name"
+                className={inputCls}
+              />
+              <div className="flex gap-2">
+                <Button type="button" variant="outline" className="flex-1" onClick={() => setStep("plan")} disabled={busy}>
+                  Skip
+                </Button>
+                <Button type="submit" className="flex-1" disabled={busy || !project.trim()}>
+                  {busy ? "…" : "Create project"}
+                </Button>
+              </div>
+            </form>
+          )}
+
+          {step === "plan" && (
+            <div className="space-y-5">
+              <div>
+                <h1 className="text-xl font-semibold tracking-tight text-zinc-900">Pick a plan</h1>
+                <p className="mt-1 text-sm text-zinc-500">
+                  Try Pro free for {TRIAL_DAYS} days. Cancel any time from Billing; you keep the free plan.
+                </p>
+              </div>
+              <ul className="space-y-2 rounded-xl border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-700">
+                {pro.features.map((f) => (
+                  <li key={f} className="flex gap-2">
+                    <span className="text-zinc-900">✓</span> {f}
+                  </li>
+                ))}
+              </ul>
+              <Button type="button" className="w-full" onClick={() => void finish(true)} disabled={busy}>
+                {busy ? "…" : pro.cta}
+              </Button>
+              <button
+                type="button"
+                onClick={() => void finish(false)}
+                disabled={busy}
+                className="w-full text-center text-[13px] text-zinc-500 underline underline-offset-2 hover:text-zinc-900"
+              >
+                Continue on the free plan
+              </button>
+            </div>
+          )}
+
+          {error && (
+            <p className="mt-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] text-red-700">
+              {error.replace(/^[A-Z_]+:\s*/, "")}
+            </p>
+          )}
+        </div>
+        <p className="mt-4 text-center text-xs text-zinc-400">
+          Step {index + 1} of {ORDER.length}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+/** "jane@northwind.com" → "Northwind". A starting point the user can edit. */
+function suggestName(email: string): string {
+  const domain = email.split("@")[1]?.split(".")[0] ?? "";
+  if (!domain || ["gmail", "yahoo", "outlook", "hotmail", "icloud", "proton", "me"].includes(domain)) {
+    return "";
+  }
+  return domain.charAt(0).toUpperCase() + domain.slice(1);
+}

package/templates/saas/app/onboarding/page.tsx

@@ -0,0 +1,34 @@
+import React, { use } from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { OnboardingWizard } from "./onboarding-client";
+
+export const metadata: Metadata = {
+  title: "Set up your workspace — Acme",
+  robots: "noindex",
+};
+
+// `/onboarding` — the first-run wizard: name the workspace, invite the team,
+// create the first project, pick a plan. Signed-out visitors get a real 307
+// to /signup. A workspace that already finished the wizard goes straight to
+// the dashboard, so the URL is safe to revisit.
+export default function OnboardingPage({ auth, response, serverData }: PageProps) {
+  if (!auth.user_id) {
+    response.redirect("/signup");
+    return null;
+  }
+  let org: { id: string; name: string; onboardedAt?: string | null } | null = null;
+  if (auth.tenant_id) {
+    org = use(
+      serverData.get<{ id: string; name: string; onboardedAt?: string | null }>(
+        "Org",
+        auth.tenant_id,
+      ),
+    );
+    if (org?.onboardedAt) {
+      response.redirect("/dashboard");
+      return null;
+    }
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  return <OnboardingWizard org={org} email={me?.email ?? ""} />;
+}

package/templates/saas/app/sitemap.ts

@@ -23,6 +23,7 @@ export default async function sitemap(): Promise<Sitemap> {
 
   return [
     { url: `${SITE}/`, changeFrequency: "weekly", priority: 1 },
+    { url: `${SITE}/pricing`, changeFrequency: "monthly", priority: 0.9 },
     ...collection("/products", PRODUCTS.map((p) => p.slug)),
     ...collection("/solutions", SOLUTIONS.map((s) => s.slug)),
     ...collection("/resources", RESOURCES.map((r) => r.slug)),

package/templates/saas/app.ts

@@ -49,6 +49,11 @@ const Org = entity(
     // The billing plugin creates + stamps this on first checkout; server-only
     // so it never reaches the client.
     stripeCustomerId: field.string().serverOnly().optional(),
+    // First-run state. `onboardedAt` is stamped when the /onboarding wizard
+    // finishes (the dashboard sends a fresh workspace back there until then);
+    // `setupDismissedAt` hides the Overview's getting-started checklist.
+    onboardedAt: field.datetime().optional(),
+    setupDismissedAt: field.datetime().optional(),
   },
   { indexes: [{ name: "by_created_by", fields: ["createdBy"], unique: false }] },
 );
@@ -157,14 +162,14 @@ const orgInvitePolicy = policy({
 });
 
 // Projects are scoped to your ACTIVE tenant. `auth.tenantId == data.orgId`
-// gates read AND write — and because orgId is client-supplied at insert time
-// (not stamped later), checking it here means you can only create a project in
-// the org you've selected. Switch orgs → a different project list.
+// gates reads, edits, and deletes. Inserts go through the `createProject`
+// function instead, which enforces the free plan's project cap on the server
+// (lib/plans.ts) — a client cannot skip the paywall by writing the row itself.
 const projectPolicy = policy({
   name: "project_tenant",
   entity: "Project",
   allowRead: "auth.tenantId == data.orgId",
-  allowInsert: "auth.tenantId == data.orgId",
+  allowInsert: "false",
   allowUpdate: "auth.tenantId == data.orgId",
   allowDelete: "auth.tenantId == data.orgId",
 });
@@ -179,12 +184,15 @@ const manifest = buildManifest({
   version: "0.1.0",
   entities: [User, Org, OrgMember, OrgInvite, Project, ...billing.manifest.entities],
   queries: fns.queries,
-  // Billing actions (createCheckoutSession / createBillingPortalSession /
-  // cancelSubscription / restoreSubscription / stripeWebhook). The plugin also
-  // declares getSubscription/listSubscriptions queries, but the dashboard reads
-  // the StripeSubscription entity directly (it's client-readable via the
-  // plugin's policy), so we don't wire those.
-  actions: [...fns.actions, ...billing.manifest.actions],
+  // The billing actions (createCheckoutSession / createBillingPortalSession /
+  // cancelSubscription / restoreSubscription / stripeWebhook) are re-exported
+  // from functions/, so discovery already lists them; spreading
+  // `billing.manifest.actions` as well would register each name twice and
+  // the server refuses to boot on a duplicate. The plugin also declares
+  // getSubscription/listSubscriptions queries, but the dashboard reads the
+  // StripeSubscription entity directly (client-readable via the plugin's
+  // policy), so those aren't wired.
+  actions: fns.actions,
   policies: [
     userPolicy,
     orgPolicy,

package/templates/saas/components/pricing-table.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import React, { useState } from "react";
+import { PLANS, TRIAL_DAYS, annualSavingsPercent, formatPrice } from "@/lib/plans";
+
+/**
+ * The plan cards with a monthly/annual switch. Used on the landing page's
+ * pricing section and on /pricing. Prices come from lib/plans.ts, the same
+ * catalog the Billing tab and the server cap read.
+ */
+export function PricingTable({ signedIn }: { signedIn: boolean }) {
+  const [annual, setAnnual] = useState(true);
+  const savings = Math.max(...PLANS.map(annualSavingsPercent));
+  return (
+    <div>
+      <div className="flex items-center justify-center gap-3 text-sm">
+        <span className={annual ? "text-zinc-500" : "font-medium text-zinc-900"}>Monthly</span>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={annual}
+          aria-label="Bill annually"
+          onClick={() => setAnnual((v) => !v)}
+          className={`relative h-6 w-11 rounded-full transition-colors ${annual ? "bg-zinc-900" : "bg-zinc-300"}`}
+        >
+          <span
+            className={`absolute top-0.5 size-5 rounded-full bg-white transition-transform ${annual ? "translate-x-5" : "translate-x-0.5"}`}
+          />
+        </button>
+        <span className={annual ? "font-medium text-zinc-900" : "text-zinc-500"}>
+          Annual{savings > 0 ? ` · save ${savings}%` : ""}
+        </span>
+      </div>
+
+      <div className="mt-10 grid gap-5 md:grid-cols-2">
+        {PLANS.map((p) => {
+          const featured = p.id === "pro";
+          const perMonth = annual && p.annualPerMonth != null ? p.annualPerMonth : p.monthly;
+          const href = signedIn
+            ? featured
+              ? `/dashboard/billing?upgrade=pro&interval=${annual ? "annual" : "monthly"}`
+              : "/dashboard"
+            : "/signup";
+          return (
+            <div
+              key={p.id}
+              className={`flex flex-col rounded-2xl border p-7 ${
+                featured
+                  ? "border-zinc-900 bg-white shadow-[0_24px_60px_-30px_rgba(0,0,0,0.3)]"
+                  : "border-zinc-200 bg-paper"
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <h3 className="text-base font-semibold">{p.name}</h3>
+                {featured && (
+                  <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-brand">
+                    {TRIAL_DAYS}-day free trial
+                  </span>
+                )}
+              </div>
+              <p className="mt-1 text-[13px] text-zinc-500">{p.tagline}</p>
+              <div className="mt-5 flex items-baseline gap-1">
+                <span className="text-4xl font-semibold tracking-tight">{formatPrice(perMonth)}</span>
+                <span className="text-[13px] text-zinc-500">
+                  {p.monthly === 0 ? "forever" : `/ month${annual ? ", billed yearly" : ""}`}
+                </span>
+              </div>
+              <ul className="mt-6 flex-1 space-y-3 text-[14px] text-zinc-600">
+                {p.features.map((f) => (
+                  <li key={f} className="flex gap-2.5">
+                    <span className="mt-[3px] text-brand">✓</span>
+                    {f}
+                  </li>
+                ))}
+              </ul>
+              <div className="mt-7">
+                <a
+                  href={href}
+                  className={
+                    featured
+                      ? "inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+                      : "inline-flex h-10 w-full items-center justify-center rounded-lg border border-zinc-300 bg-white text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-50"
+                  }
+                >
+                  {signedIn && featured ? "Upgrade to Pro" : p.cta}
+                </a>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <p className="mt-6 text-center text-xs text-zinc-400">
+        Prices in USD. The trial needs a card and converts to the plan you pick unless you cancel first.
+      </p>
+    </div>
+  );
+}

package/templates/saas/components/setup-checklist.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import React, { useState } from "react";
+import { callFn } from "@pylonsync/react";
+import { Check, X } from "lucide-react";
+
+export interface SetupState {
+  orgId: string;
+  hasProject: boolean;
+  hasTeammate: boolean;
+  hasBilling: boolean;
+  canDismiss: boolean;
+}
+
+/**
+ * "Getting started" on the Overview. Items are derived from real data (a
+ * project exists, a teammate or pending invite exists, Pro is active), so the
+ * list ticks itself off; it disappears when all three are done or an
+ * owner/admin dismisses it for the workspace.
+ */
+export function SetupChecklist({ state }: { state: SetupState }) {
+  const [hidden, setHidden] = useState(false);
+  const items = [
+    { done: state.hasProject, label: "Create a project", href: "/dashboard/projects" },
+    { done: state.hasTeammate, label: "Invite a teammate", href: "/dashboard/members" },
+    { done: state.hasBilling, label: "Start your Pro trial", href: "/dashboard/billing" },
+  ];
+  const remaining = items.filter((i) => !i.done).length;
+  if (hidden || remaining === 0) return null;
+
+  async function dismiss() {
+    setHidden(true);
+    try {
+      await callFn("dismissSetup", { orgId: state.orgId });
+    } catch {
+      // Hidden for this view regardless; the next load re-evaluates.
+    }
+  }
+
+  return (
+    <div className="rounded-xl border border-zinc-200 bg-white p-5">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-sm font-semibold text-zinc-900">Getting started</h2>
+          <p className="mt-0.5 text-xs text-zinc-500">
+            {items.length - remaining} of {items.length} done
+          </p>
+        </div>
+        {state.canDismiss && (
+          <button
+            type="button"
+            onClick={() => void dismiss()}
+            aria-label="Dismiss checklist"
+            className="flex size-7 items-center justify-center rounded-md text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+      <ul className="mt-3 divide-y divide-zinc-100">
+        {items.map((it) => (
+          <li key={it.label} className="flex items-center gap-3 py-2.5">
+            <span
+              className={
+                "flex size-5 shrink-0 items-center justify-center rounded-full border " +
+                (it.done ? "border-emerald-500 bg-emerald-500 text-white" : "border-zinc-300")
+              }
+            >
+              {it.done && <Check className="size-3" />}
+            </span>
+            {it.done ? (
+              <span className="text-sm text-zinc-400 line-through">{it.label}</span>
+            ) : (
+              <a href={it.href} className="text-sm font-medium text-zinc-900 hover:underline">
+                {it.label} →
+              </a>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/templates/saas/functions/completeOnboarding.ts

@@ -0,0 +1,15 @@
+import { mutation, v } from "@pylonsync/functions";
+
+// Marks the workspace's first-run wizard as finished. Org rows are
+// framework-managed and deny client writes, so the stamp goes through this
+// owner/admin-gated function.
+export default mutation<{ orgId: string }, { ok: true }>({
+  args: { orgId: v.string() },
+  async handler(ctx, args) {
+    await ctx.requireMember(args.orgId, { role: ["owner", "admin"] });
+    await ctx.db.unsafe.update("Org", args.orgId, {
+      onboardedAt: new Date().toISOString(),
+    });
+    return { ok: true };
+  },
+});

package/templates/saas/functions/createProject.ts

@@ -0,0 +1,56 @@
+import { mutation, v } from "@pylonsync/functions";
+import { normalizeProjectName } from "../lib/projects";
+import { canCreateProject, planFromSubscription } from "../lib/plans";
+
+// createProject — the free-tier cap lives here, on the server. The Project
+// policy denies client inserts, so a browser cannot skip the paywall by
+// writing the row itself. Returns LIMIT_REACHED when the workspace is at the
+// cap; the Projects tab opens the upgrade dialog on that code.
+export default mutation<
+  { orgId: string; name: string; description?: string },
+  { id: string }
+>({
+  args: {
+    orgId: v.string(),
+    name: v.string(),
+    description: v.optional(v.string()),
+  },
+  async handler(ctx, args) {
+    const name = normalizeProjectName(args.name);
+    if (!name) {
+      throw ctx.error("INVALID_ARGS", "Project name must be 1–80 characters.");
+    }
+    // Any member of the workspace may create a project. Fails closed.
+    await ctx.requireMember(args.orgId);
+
+    const subs = (await ctx.db.unsafe.list("StripeSubscription")) as Array<{
+      referenceId: string;
+      plan?: string;
+      status?: string;
+    }>;
+    const sub = subs.find((s) => s.referenceId === args.orgId) ?? null;
+    const plan = planFromSubscription(sub);
+
+    const projects = (await ctx.db.unsafe.list("Project")) as Array<{
+      orgId: string;
+      status?: string;
+    }>;
+    const active = projects.filter(
+      (p) => p.orgId === args.orgId && (p.status ?? "active") !== "archived",
+    ).length;
+    if (!canCreateProject(plan, active)) {
+      throw ctx.error(
+        "LIMIT_REACHED",
+        "This workspace is at the free plan's project limit. Upgrade to Pro for unlimited projects.",
+      );
+    }
+
+    const id = (await ctx.db.unsafe.insert("Project", {
+      orgId: args.orgId,
+      name,
+      status: "active",
+      ...(args.description?.trim() ? { description: args.description.trim() } : {}),
+    })) as string;
+    return { id };
+  },
+});

package/templates/saas/functions/dismissSetup.ts

@@ -0,0 +1,14 @@
+import { mutation, v } from "@pylonsync/functions";
+
+// Hides the "Getting started" checklist on the Overview for everyone in the
+// workspace. Owners and admins only, since it is a workspace-wide setting.
+export default mutation<{ orgId: string }, { ok: true }>({
+  args: { orgId: v.string() },
+  async handler(ctx, args) {
+    await ctx.requireMember(args.orgId, { role: ["owner", "admin"] });
+    await ctx.db.unsafe.update("Org", args.orgId, {
+      setupDismissedAt: new Date().toISOString(),
+    });
+    return { ok: true };
+  },
+});

package/templates/saas/functions/updateProfile.ts

@@ -0,0 +1,18 @@
+import { mutation, v } from "@pylonsync/functions";
+
+// The one User field a person may edit about themselves. Email changes
+// need re-verification and passwords have their own route, so the User
+// policy denies client writes and this function owns display-name edits.
+export default mutation<{ displayName: string }, { displayName: string }>({
+  args: { displayName: v.string() },
+  async handler(ctx, args) {
+    const userId = ctx.auth.userId;
+    if (!userId) throw ctx.error("UNAUTHENTICATED", "Sign in first.");
+    const displayName = args.displayName.trim();
+    if (displayName.length < 1 || displayName.length > 60) {
+      throw ctx.error("INVALID_ARGS", "Name must be 1–60 characters.");
+    }
+    await ctx.db.unsafe.update("User", userId, { displayName });
+    return { displayName };
+  },
+});