@pylonsync/create-pylon 0.3.273 → 0.3.275

package/templates/agency/components/ui/card.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "rounded-xl border bg-card text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/templates/agency/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/templates/agency/functions/bookInquiry.ts

@@ -0,0 +1,42 @@
+import { mutation, v } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+
+// bookInquiry — owner-only. Marks a lead "booked" AND consumes one project slot:
+// it decrements Capacity.openSlots, which syncs to every open landing page, so
+// the hero's "N slots open" counter ticks down live for everyone. Taking a
+// per-row advisory lock on the capacity row makes the read-then-decrement
+// race-safe. Idempotent: booking an already-booked lead doesn't double-count.
+export default mutation<{ inquiryId: string }, { ok: boolean; openSlots: number }>({
+  auth: "user",
+  args: { inquiryId: v.id("Inquiry") },
+  async handler(ctx, args) {
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    if (!emailMatchesOwner(me?.email as string | undefined, ctx.env.PYLON_OWNER_EMAIL)) {
+      throw ctx.error("POLICY_DENIED", "Only the owner can manage inquiries.");
+    }
+
+    const inquiry = (await ctx.db.get("Inquiry", args.inquiryId)) as
+      | { status: string }
+      | null;
+    if (!inquiry) throw ctx.error("NOT_FOUND", "Inquiry not found.");
+
+    await ctx.db.advisoryLock("agency_capacity");
+    const cap = ((await ctx.db.unsafe.list("Capacity")) as unknown as {
+      id: string;
+      openSlots: number;
+    }[])[0];
+    let openSlots = cap?.openSlots ?? 0;
+
+    // Only decrement when this lead is newly booked — re-booking is a no-op.
+    if (inquiry.status !== "booked" && cap) {
+      openSlots = Math.max(0, cap.openSlots - 1);
+      await ctx.db.unsafe.update("Capacity", cap.id, {
+        openSlots,
+        updatedAt: new Date().toISOString(),
+      });
+    }
+    await ctx.db.unsafe.update("Inquiry", args.inquiryId, { status: "booked" });
+
+    return { ok: true, openSlots };
+  },
+});

package/templates/agency/functions/declineInquiry.ts

@@ -0,0 +1,41 @@
+import { mutation, v } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+
+// declineInquiry — owner-only. Marks a lead "declined". If it had been "booked",
+// it returns the project slot to the pool (Capacity.openSlots += 1), which syncs
+// live so the hero counter ticks back up everywhere. Race-safe via the capacity
+// advisory lock; idempotent on an already-declined lead.
+export default mutation<{ inquiryId: string }, { ok: boolean; openSlots: number }>({
+  auth: "user",
+  args: { inquiryId: v.id("Inquiry") },
+  async handler(ctx, args) {
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    if (!emailMatchesOwner(me?.email as string | undefined, ctx.env.PYLON_OWNER_EMAIL)) {
+      throw ctx.error("POLICY_DENIED", "Only the owner can manage inquiries.");
+    }
+
+    const inquiry = (await ctx.db.get("Inquiry", args.inquiryId)) as
+      | { status: string }
+      | null;
+    if (!inquiry) throw ctx.error("NOT_FOUND", "Inquiry not found.");
+
+    await ctx.db.advisoryLock("agency_capacity");
+    const cap = ((await ctx.db.unsafe.list("Capacity")) as unknown as {
+      id: string;
+      openSlots: number;
+    }[])[0];
+    let openSlots = cap?.openSlots ?? 0;
+
+    // Releasing a previously-booked lead frees its slot again.
+    if (inquiry.status === "booked" && cap) {
+      openSlots = cap.openSlots + 1;
+      await ctx.db.unsafe.update("Capacity", cap.id, {
+        openSlots,
+        updatedAt: new Date().toISOString(),
+      });
+    }
+    await ctx.db.unsafe.update("Inquiry", args.inquiryId, { status: "declined" });
+
+    return { ok: true, openSlots };
+  },
+});

package/templates/agency/functions/inquiriesForOwner.ts

@@ -0,0 +1,31 @@
+import { query } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+import type { InquiryRow, OwnerInquiriesResult } from "../lib/agency";
+
+// inquiriesForOwner — the owner's view of every project lead, INCLUDING the
+// prospect's name, email, company, and budget. The one function allowed to
+// return that PII, gated to the configured owner (PYLON_OWNER_EMAIL via
+// ctx.env). A query has no `ctx.error`, so a non-owner gets `{ authorized:
+// false }` (a bare throw would surface as a stripped HANDLER_ERROR) and NO data.
+//
+// The dashboard calls it with `callFn` and re-fetches whenever the public
+// Capacity row changes — so booking a lead (which moves the counter) refreshes
+// the pipeline without a page reload, while contact details never travel over
+// entity sync.
+export default query({
+  auth: "user",
+  async handler(ctx): Promise<OwnerInquiriesResult> {
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    const email = (me?.email as string | undefined) ?? null;
+    if (!emailMatchesOwner(email, ctx.env.PYLON_OWNER_EMAIL)) {
+      return { authorized: false };
+    }
+
+    const rows = (await ctx.db.unsafe.list("Inquiry")) as unknown as InquiryRow[];
+    const inquiries = rows
+      .map((r) => ({ ...r }))
+      .sort((a, b) => (a.createdAt < b.createdAt ? 1 : a.createdAt > b.createdAt ? -1 : 0));
+
+    return { authorized: true, inquiries };
+  },
+});

package/templates/agency/functions/seedCapacity.ts

@@ -0,0 +1,26 @@
+import { mutation } from "@pylonsync/functions";
+import { siteConfig } from "../lib/site.config";
+
+// seedCapacity — create the single Capacity row from config on first visit
+// (idempotent). The landing page calls this on mount; once a row exists it's a
+// no-op, so it's safe to call on every load. A lock keeps two concurrent
+// first-visits from creating two rows.
+//
+// Public so an anonymous first visitor seeds it — it only ever writes the
+// config's booking window + open-slot count, never reads or returns anything
+// sensitive.
+export default mutation<Record<string, never>, { seeded: boolean }>({
+  auth: "public",
+  async handler(ctx) {
+    await ctx.db.advisoryLock("agency_seed_capacity");
+    const existing = await ctx.db.unsafe.list("Capacity");
+    if (existing.length > 0) return { seeded: false };
+
+    await ctx.db.unsafe.insert("Capacity", {
+      label: siteConfig.capacity.label,
+      openSlots: siteConfig.capacity.openSlots,
+      updatedAt: new Date().toISOString(),
+    });
+    return { seeded: true };
+  },
+});

package/templates/agency/functions/setCapacity.ts

@@ -0,0 +1,32 @@
+import { mutation, v } from "@pylonsync/functions";
+import { emailMatchesOwner } from "../lib/owner";
+
+// setCapacity — owner-only. Set the booking window label and how many project
+// slots are open (e.g. at the start of a new quarter). The update syncs to
+// every open landing page, so the hero counter reflects it live. Creates the
+// row if it doesn't exist yet.
+export default mutation<
+  { label: string; openSlots: number },
+  { ok: boolean; openSlots: number }
+>({
+  auth: "user",
+  args: { label: v.string(), openSlots: v.int() },
+  async handler(ctx, args) {
+    const me = await ctx.db.get("User", ctx.auth.userId);
+    if (!emailMatchesOwner(me?.email as string | undefined, ctx.env.PYLON_OWNER_EMAIL)) {
+      throw ctx.error("POLICY_DENIED", "Only the owner can manage capacity.");
+    }
+    const label = args.label.trim().slice(0, 60);
+    const openSlots = Math.max(0, Math.trunc(args.openSlots));
+
+    await ctx.db.advisoryLock("agency_capacity");
+    const cap = ((await ctx.db.unsafe.list("Capacity")) as unknown as { id: string }[])[0];
+    const now = new Date().toISOString();
+    if (cap) {
+      await ctx.db.unsafe.update("Capacity", cap.id, { label, openSlots, updatedAt: now });
+    } else {
+      await ctx.db.unsafe.insert("Capacity", { label, openSlots, updatedAt: now });
+    }
+    return { ok: true, openSlots };
+  },
+});

package/templates/agency/functions/submitInquiry.ts

@@ -0,0 +1,55 @@
+import { mutation, v } from "@pylonsync/functions";
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// submitInquiry — a prospect's "start a project" lead. A `mutation` (it writes
+// the Inquiry row transactionally). `auth: "public"` — a prospect has no
+// account.
+//
+// PRIVACY: it returns only `{ ok }`, never an Inquiry row or anyone's details.
+// Submitting does NOT consume a capacity slot — a lead isn't a booking. The
+// owner books it from the dashboard, which is what decrements the live counter.
+export default mutation<
+  {
+    name: string;
+    email: string;
+    company?: string;
+    projectType?: string;
+    budget?: string;
+    message?: string;
+  },
+  { ok: boolean }
+>({
+  auth: "public",
+  args: {
+    name: v.string(),
+    email: v.string(),
+    company: v.optional(v.string()),
+    projectType: v.optional(v.string()),
+    budget: v.optional(v.string()),
+    message: v.optional(v.string()),
+  },
+  async handler(ctx, args) {
+    const name = args.name.trim();
+    const email = args.email.trim().toLowerCase();
+    if (name.length < 1 || name.length > 120) {
+      throw ctx.error("INVALID_ARGS", "Please enter your name.");
+    }
+    if (!EMAIL_RE.test(email) || email.length > 254) {
+      throw ctx.error("INVALID_ARGS", "Please enter a valid email address.");
+    }
+    const clip = (s: string | undefined, max: number) => (s ? s.trim().slice(0, max) : null);
+
+    await ctx.db.unsafe.insert("Inquiry", {
+      name,
+      email,
+      company: clip(args.company, 160),
+      projectType: clip(args.projectType, 80),
+      budget: clip(args.budget, 80),
+      message: clip(args.message, 4000),
+      status: "new",
+      createdAt: new Date().toISOString(),
+    });
+    return { ok: true };
+  },
+});

package/templates/agency/gitignore

@@ -0,0 +1,10 @@
+node_modules/
+.pylon/
+pylon.manifest.json
+pylon.client.ts
+web/dist/
+*.db
+*.db-*
+.env
+.env.local
+.DS_Store

package/templates/agency/lib/agency.ts

@@ -0,0 +1,27 @@
+// Shared agency types. The Inquiry row is what the owner dashboard sees (with
+// PII); the client imports only the type, never server code.
+
+export interface InquiryRow {
+  id: string;
+  name: string;
+  email: string;
+  company?: string | null;
+  projectType?: string | null;
+  budget?: string | null;
+  message?: string | null;
+  status: string; // "new" | "booked" | "declined"
+  createdAt: string;
+}
+
+// inquiriesForOwner returns a discriminated result rather than throwing on a
+// non-owner (a query has no `ctx.error`; a bare throw becomes a stripped
+// HANDLER_ERROR). A non-owner gets `{ authorized: false }` and NO data.
+export type OwnerInquiriesResult =
+  | { authorized: true; inquiries: InquiryRow[] }
+  | { authorized: false };
+
+// The public, PII-free capacity the landing page reads live.
+export interface CapacityData {
+  label: string; // booking window, e.g. "Q3 2026"
+  openSlots: number;
+}

package/templates/agency/lib/owner.ts

@@ -0,0 +1,26 @@
+// Who owns this studio site? A studio is single-tenant — one business, one
+// owner — so ownership is just "the email the owner signs in with", configured
+// once via the PYLON_OWNER_EMAIL env var. The owner-only functions
+// (inquiriesForOwner etc.) read that env (via `ctx.env`) and compare it here.
+//
+// Fail closed: if PYLON_OWNER_EMAIL is unset, NOBODY is the owner and the
+// dashboard stays locked. That's deliberate — an unset owner on a public site
+// must not mean "everyone can read the inquiries". Set it in .env (see
+// .env.example) before signing in.
+
+export function normalizeOwner(raw: string | null | undefined): string | null {
+  const v = raw?.trim().toLowerCase();
+  return v && v.length > 0 ? v : null;
+}
+
+// Pure comparator — the caller supplies the configured owner value (from
+// `ctx.env.PYLON_OWNER_EMAIL`), so the rule lives in one place and stays
+// testable without reaching for the environment here.
+export function emailMatchesOwner(
+  email: string | null | undefined,
+  ownerRaw: string | null | undefined,
+): boolean {
+  const owner = normalizeOwner(ownerRaw);
+  if (!owner) return false;
+  return (email ?? "").trim().toLowerCase() === owner;
+}

package/templates/agency/lib/site.config.ts

@@ -0,0 +1,239 @@
+// THE single source of truth for everything business-specific on this agency
+// site. Rebrand the whole studio by editing this ONE file — the landing page,
+// layout, and the seedCapacity function all read from here. The create-pylon
+// scaffolder and Mast target this file: a whole studio site is themed from one
+// typed object.
+//
+// Colors live here (applied as CSS variables on <html> in app/layout.tsx).
+// Fictional demo copy — replace the values, keep the shape. Anywhere a real
+// photo belongs (case-study shots, team headshots) the page renders a clearly
+// marked placeholder — swap those for <img>s when you have the assets.
+
+/* ----------------------------- types ----------------------------- */
+
+export type Social = { label: string; href: string; path: string };
+
+export type BaseConfig = {
+  brand: {
+    name: string;
+    letter: string; // monogram
+    domain: string;
+    email: string;
+    footerBlurb: string;
+    copyrightName: string;
+    socials: Social[];
+  };
+  colors: { brand: string; brandSoft: string; paper: string };
+  seo: { title: string; description: string };
+};
+
+export type Service = { title: string; body: string; icon?: string };
+export type CaseStudy = { title: string; client: string; summary: string; tags: string[] };
+export type ProcessStep = { title: string; body: string };
+export type TeamMember = { name: string; role: string };
+export type Testimonial = { quote: string; name: string; role: string };
+
+export type AgencyConfig = BaseConfig & {
+  hero: {
+    tagline: string;
+    headline: string;
+    subcopy: string;
+    ctaLabel: string;
+    secondaryCtaLabel: string;
+  };
+  // Seeds the public Capacity row on first visit; after that it lives in the DB
+  // and the owner manages it from the dashboard. `openSlots` is the number the
+  // hero shows live; `label` is the booking window it refers to.
+  capacity: { label: string; openSlots: number };
+  logos: { eyebrow: string; names: string[] };
+  services: { eyebrow: string; headline: string; items: Service[] };
+  work: { eyebrow: string; headline: string; items: CaseStudy[] };
+  process: { eyebrow: string; headline: string; steps: ProcessStep[] };
+  team: { eyebrow: string; headline: string; members: TeamMember[] };
+  testimonials?: { eyebrow: string; headline: string; items: Testimonial[] };
+  contact: {
+    eyebrow: string;
+    headline: string;
+    subcopy: string;
+    projectTypes: string[];
+    budgets: string[];
+    confirmationMessage: string;
+  };
+};
+
+/* ----------------------------- config ---------------------------- */
+
+export const siteConfig: AgencyConfig = {
+  brand: {
+    name: "Halyard",
+    letter: "H",
+    domain: "halyard.studio",
+    email: "hello@halyard.example",
+    footerBlurb:
+      "A product studio in Dallas. We design and build the software ambitious teams bet on — and we only take on a few projects at a time, so the work stays sharp.",
+    copyrightName: "Halyard Studio",
+    socials: [
+      {
+        label: "X",
+        href: "https://x.com",
+        path: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
+      },
+      {
+        label: "LinkedIn",
+        href: "https://linkedin.com",
+        path: "M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z",
+      },
+    ],
+  },
+
+  colors: { brand: "#4f46e5", brandSoft: "#e0e7ff", paper: "#fafafa" },
+
+  seo: {
+    title: "Halyard — a product studio for ambitious teams.",
+    description:
+      "Halyard is a Dallas product studio. We design and build web and mobile software end-to-end. We take on a few projects at a time — see how many slots are open this quarter.",
+  },
+
+  hero: {
+    tagline: "Product studio · Dallas",
+    headline: "We build the products teams bet on.",
+    subcopy:
+      "Halyard is a small, senior team that designs and ships web and mobile software end-to-end. We take on a handful of projects at a time, so the work — and your launch — stays sharp.",
+    ctaLabel: "Start a project",
+    secondaryCtaLabel: "See our work",
+  },
+
+  capacity: { label: "Q3 2026", openSlots: 3 },
+
+  logos: {
+    eyebrow: "Trusted by teams at",
+    names: ["Northwind", "Lumen", "Foundry", "Atlas", "Cohort", "Vela"],
+  },
+
+  services: {
+    eyebrow: "What we do",
+    headline: "One team, the whole build.",
+    items: [
+      {
+        icon: "◆",
+        title: "Product design",
+        body: "Research, flows, and interface design that turns a fuzzy idea into something people understand in seconds.",
+      },
+      {
+        icon: "◇",
+        title: "Web & mobile",
+        body: "Production engineering across web, iOS, and Android — typed, tested, and built to scale past launch day.",
+      },
+      {
+        icon: "◈",
+        title: "Brand & identity",
+        body: "Naming, logo, and a system that makes a young product feel like it's been around — and worth paying for.",
+      },
+      {
+        icon: "✦",
+        title: "Fractional team",
+        body: "Embed with your team for a quarter. We plan, build, and hand off — leaving you faster than we found you.",
+      },
+    ],
+  },
+
+  work: {
+    eyebrow: "Selected work",
+    headline: "A few things we've shipped.",
+    items: [
+      {
+        title: "Ledger",
+        client: "Fintech · 0→1",
+        summary: "A consumer banking app from first sketch to App Store launch in one quarter.",
+        tags: ["Product design", "iOS", "Brand"],
+      },
+      {
+        title: "Atlas Health",
+        client: "Healthcare · Platform",
+        summary: "Rebuilt a clinical scheduling tool used by 4,000 providers, with zero downtime.",
+        tags: ["Web", "Design system"],
+      },
+      {
+        title: "Cohort",
+        client: "B2B SaaS · Rebrand",
+        summary: "New identity and marketing site that lifted demo requests 40% in six weeks.",
+        tags: ["Brand", "Web"],
+      },
+      {
+        title: "Vela",
+        client: "Logistics · Mobile",
+        summary: "A driver app with live routing that cut dispatch calls in half.",
+        tags: ["Product design", "Android"],
+      },
+    ],
+  },
+
+  process: {
+    eyebrow: "How we work",
+    headline: "Senior, hands-on, and fast.",
+    steps: [
+      {
+        title: "Scope",
+        body: "A focused kickoff week. We pin down the real problem, the riskiest unknowns, and what a great launch looks like.",
+      },
+      {
+        title: "Design",
+        body: "Clickable, real-data prototypes — not slide decks. You react to something you can use within two weeks.",
+      },
+      {
+        title: "Build",
+        body: "Weekly shipping you can watch. Typed, reviewed code in your repo from day one, no black box.",
+      },
+      {
+        title: "Launch & hand off",
+        body: "We ship it, document it, and leave your team able to run and extend it without us.",
+      },
+    ],
+  },
+
+  team: {
+    eyebrow: "Who you'll work with",
+    headline: "A small, senior team.",
+    members: [
+      { name: "Claire Donovan", role: "Principal, Design" },
+      { name: "Marcus Lee", role: "Principal, Engineering" },
+      { name: "Dana Okafor", role: "Brand & Strategy" },
+    ],
+  },
+
+  testimonials: {
+    eyebrow: "Kind words",
+    headline: "Teams we've worked with.",
+    items: [
+      {
+        quote:
+          "Halyard shipped in a quarter what our last agency couldn't in a year. Senior people, no hand-offs, no drama.",
+        name: "Erin Caldwell",
+        role: "CEO, Ledger",
+      },
+      {
+        quote:
+          "They felt like our team, not a vendor. The work was sharp and the launch was the smoothest we've had.",
+        name: "Tom Reyes",
+        role: "VP Product, Atlas Health",
+      },
+      {
+        quote:
+          "The rebrand paid for itself in two months. We still use the system they built every single day.",
+        name: "Sofia Marin",
+        role: "Founder, Cohort",
+      },
+    ],
+  },
+
+  contact: {
+    eyebrow: "Start a project",
+    headline: "Tell us what you're building.",
+    subcopy:
+      "We take on a few projects at a time. Send a note and we'll reply within two business days — if we're full, we'll tell you straight and point you somewhere good.",
+    projectTypes: ["New product (0→1)", "Existing product", "Rebrand", "Not sure yet"],
+    budgets: ["$25–50k", "$50–100k", "$100k+", "Let's talk"],
+    confirmationMessage:
+      "Thanks — your note's in. We'll get back to you within two business days.",
+  },
+};

package/templates/agency/lib/utils.ts

@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// `cn` — the shadcn class merger. clsx resolves conditional/array class
+// inputs; tailwind-merge then dedupes conflicting Tailwind utilities so
+// the last one wins (e.g. `cn("px-2", "px-4")` → "px-4"). Every shadcn
+// component routes its className through this.
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}