@xk2800/nextjs-template 0.7.1-beta.1 → 0.7.1-beta.10

package/components/dashboard/admin/marketingEmailForm.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { Input } from "../../ui/input"
+import { Label } from "../../ui/label"
+import { Textarea } from "../../ui/textarea"
+import { Button } from "../../ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select"
+import ConfirmSendDialog from "./confirmSendDialog"
+
+export default function MarketingEmailForm({ segments }: { segments: { id: string; name: string }[] }) {
+  const router = useRouter()
+  const [segmentId, setSegmentId] = useState(segments[0]?.id ?? "")
+  const [subject, setSubject] = useState("")
+  const [previewText, setPreviewText] = useState("")
+  const [body, setBody] = useState("")
+  const [pending, setPending] = useState<"draft" | "send" | null>(null)
+
+  const [confirming, setConfirming] = useState(false)
+  const segmentName = segments.find((s) => s.id === segmentId)?.name ?? "this segment"
+
+  const submit = async (send: boolean) => {
+    setPending(send ? "send" : "draft")
+    try {
+      const response = await fetch("/api/admin/marketing", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ segmentId, subject, previewText, body, send }),
+      })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error || "Failed to create broadcast")
+
+      toast.success(send ? "Broadcast sent" : "Draft saved in Resend")
+      setSubject("")
+      setPreviewText("")
+      setBody("")
+      router.refresh()
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to create broadcast")
+    } finally {
+      setPending(null)
+    }
+  }
+
+  if (segments.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>No segments yet</CardTitle>
+          <CardDescription>
+            Create a segment and add contacts in the Resend dashboard (Audience), then reload this page.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    )
+  }
+
+  const canSubmit = !!segmentId && !!subject.trim() && !!body.trim() && !pending
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>New broadcast</CardTitle>
+        <CardDescription>
+          Plain text. Blank lines start a new paragraph. An unsubscribe link is added automatically.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="segment">Segment</Label>
+          <Select value={segmentId} onValueChange={setSegmentId}>
+            <SelectTrigger id="segment" className="w-full">
+              <SelectValue placeholder="Choose a segment" />
+            </SelectTrigger>
+            <SelectContent>
+              {segments.map((s) => (
+                <SelectItem key={s.id} value={s.id}>{s.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="subject">Subject</Label>
+          <Input id="subject" value={subject} maxLength={200} onChange={(e) => setSubject(e.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="preview">Preview text (optional)</Label>
+          <Input id="preview" value={previewText} maxLength={200} onChange={(e) => setPreviewText(e.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="body">Message</Label>
+          <Textarea id="body" rows={12} value={body} onChange={(e) => setBody(e.target.value)} />
+        </div>
+        <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+          <Button variant="outline" disabled={!canSubmit} onClick={() => submit(false)}>
+            {pending === "draft" ? "Saving…" : "Save as draft"}
+          </Button>
+          <Button disabled={!canSubmit} onClick={() => setConfirming(true)}>
+            {pending === "send" ? "Sending…" : "Send now"}
+          </Button>
+        </div>
+        <ConfirmSendDialog
+          open={confirming}
+          onOpenChange={setConfirming}
+          subject={subject}
+          audience={`"${segmentName}"`}
+          onConfirm={() => submit(true)}
+        />
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/admin/marketingSection.tsx

@@ -0,0 +1,67 @@
+import { Suspense } from "react"
+import { getMarketingOverview } from "@xk2800/nextjs-template/marketing"
+import { formatDateTime } from "@xk2800/nextjs-template/lib/formatters"
+import { Skeleton } from "../../ui/skeleton"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { Badge } from "../../ui/badge"
+import MarketingEmailForm from "./marketingEmailForm"
+import BroadcastActions from "./broadcastActions"
+import SubscribersCard from "./subscribersCard"
+
+// Admin marketing email page body: compose form, recent broadcasts and
+// subscribers. `segmentId` picks the Subscribers segment (e.g. from
+// ?segment=); unknown or missing falls back to the first segment.
+export default async function MarketingSection({ segmentId }: { segmentId?: string }) {
+  const { segments, broadcasts, error } = await getMarketingOverview()
+
+  if (error) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Resend isn&apos;t reachable</CardTitle>
+          <CardDescription>
+            {error} Broadcasts need a <strong>full access</strong> API key (a sending-only key can&apos;t list segments).
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <MarketingEmailForm segments={segments} />
+
+      {broadcasts.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent broadcasts</CardTitle>
+            <CardDescription>Open, click and unsubscribe stats are in the Resend dashboard</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="divide-y">
+              {broadcasts.map((b) => (
+                <li key={b.id} className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 py-2 text-sm">
+                  <span className="truncate">{b.name || "(untitled)"}</span>
+                  <span className="flex shrink-0 items-center gap-2 text-muted-foreground">
+                    {formatDateTime(b.sent_at ?? b.created_at)}
+                    <Badge variant={b.status === "sent" ? "default" : "secondary"}>{b.status}</Badge>
+                    <BroadcastActions id={b.id} name={b.name || "(untitled)"} status={b.status} />
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      )}
+
+      {segments.length > 0 && (
+        <Suspense fallback={<Skeleton className="h-48 w-full" />}>
+          <SubscribersCard
+            segments={segments}
+            segmentId={segments.some((s) => s.id === segmentId) ? segmentId! : segments[0].id}
+          />
+        </Suspense>
+      )}
+    </div>
+  )
+}

package/components/dashboard/admin/subscribersCard.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link"
+import { listSegmentContacts, SEGMENT_CONTACTS_LIMIT as LIMIT, type MarketingSegment } from "@xk2800/nextjs-template/marketing"
+import { formatDateTime } from "@xk2800/nextjs-template/lib/formatters"
+import { Button } from "../../ui/button"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../ui/card"
+import { Badge } from "../../ui/badge"
+
+export default async function SubscribersCard({
+  segments,
+  segmentId,
+}: {
+  segments: MarketingSegment[]
+  segmentId: string
+}) {
+  const { contacts, hasMore, error } = await listSegmentContacts(segmentId)
+  const subscribed = contacts.filter((c) => !c.unsubscribed).length
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Subscribers</CardTitle>
+        <CardDescription>
+          {error
+            ? `Couldn't load contacts: ${error}`
+            : `${subscribed} subscribed, ${contacts.length - subscribed} unsubscribed${hasMore ?` (first ${LIMIT} shown)` : ""}. Add or import contacts in Resend → Audience.`}
+        </CardDescription>
+        {segments.length > 1 && (
+          <div className="flex flex-wrap gap-2 pt-2">
+            {segments.map((s) => (
+              <Button key={s.id} asChild size="sm" variant={s.id === segmentId ? "default" : "outline"}>
+                <Link href={`?segment=${s.id}`} scroll={false}>{s.name}</Link>
+              </Button>
+            ))}
+          </div>
+        )}
+      </CardHeader>
+      {contacts.length > 0 && (
+        <CardContent>
+          <ul className="divide-y">
+            {contacts.map((c) => {
+              const name = [c.first_name, c.last_name].filter(Boolean).join(" ")
+              return (
+                <li key={c.id} className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-2 text-sm">
+                  <span className="min-w-0 truncate">
+                    {c.email}
+                    {name && <span className="text-muted-foreground"> · {name}</span>}
+                  </span>
+                  <span className="flex shrink-0 items-center gap-2 text-muted-foreground">
+                    {formatDateTime(c.created_at)}
+                    <Badge variant={c.unsubscribed ? "secondary" : "default"}>
+                      {c.unsubscribed ? "unsubscribed" : "subscribed"}
+                    </Badge>
+                  </span>
+                </li>
+              )
+            })}
+          </ul>
+        </CardContent>
+      )}
+    </Card>
+  )
+}

package/components/dashboard/admin/systemSettingsForm.tsx

@@ -52,6 +52,7 @@ export default function SystemSettingsForm({ initialSettings, configuredFlags }:
           authEnableOneTap: settings.authEnableOneTap,
           enableSessionRevocation: settings.enableSessionRevocation,
           feedbackAttachErrors: settings.feedbackAttachErrors,
+          consentRequired: settings.consentRequired ?? true,
         }),
       })
 
@@ -161,6 +162,38 @@ export default function SystemSettingsForm({ initialSettings, configuredFlags }:
         </CardContent>
       </Card>
 
+      <Card>
+        <CardHeader>
+          <CardTitle>Privacy &amp; Consent</CardTitle>
+          <CardDescription>
+            Whether visitors must opt in before device fingerprinting and Google One Tap run
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <Label htmlFor="consent-toggle">Require consent (GDPR / ePrivacy)</Label>
+              <p className="text-sm text-gray-500">
+                On: cookie banner where visitors allow fingerprinting and One Tap separately, and
+                the device record is erased if fingerprint consent is withdrawn. Off: no banner, everything runs for
+                every visitor.
+              </p>
+              {!settings.consentRequired && (
+                <p className="text-sm text-amber-600 dark:text-amber-500">
+                  Only turn this off if none of your users are in the EU, the UK or another region with
+                  consent rules. Fingerprinting without consent breaks those laws.
+                </p>
+              )}
+            </div>
+            <Switch
+              id="consent-toggle"
+              checked={settings.consentRequired ?? true}
+              onCheckedChange={(checked) => setSettings({ ...settings, consentRequired: checked })}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
       <Card>
         <CardHeader>
           <CardTitle>Feedback</CardTitle>

package/components/dashboard/admin/systemSettingsSection.tsx

@@ -1,9 +1,15 @@
-import { getSystemSettings, getConfiguredAuthFlags } from "@xk2800/nextjs-template/settings/queries"
+import { getSystemSettings, getConfiguredAuthFlags, isConsentRequired } from "@xk2800/nextjs-template/settings/queries"
 import SystemSettingsForm from "./systemSettingsForm"
 
 export default async function SystemSettingsSection() {
   const settings = await getSystemSettings()
   const configuredFlags = getConfiguredAuthFlags()
 
-  return <SystemSettingsForm initialSettings={settings} configuredFlags={configuredFlags} />
+  // Show the effective consent mode (null = NEXT_PUBLIC_COOKIE_BANNER default).
+  return (
+    <SystemSettingsForm
+      initialSettings={{ ...settings, consentRequired: isConsentRequired(settings) }}
+      configuredFlags={configuredFlags}
+    />
+  )
 }

package/components/dashboard/errorFeedback.tsx

@@ -7,7 +7,8 @@ import FeedbackDialog from "./feedbackDialog"
 // One hidden feedback dialog for reporting errors. Mount <ErrorFeedbackHost />
 // once in a layout, only when feedback is configured (FEEDBACK_DISCORD_WEBHOOK_URL
 // or FEEDBACK_EMAIL). Error toasts (toastError) and error pages (reportProblem)
-// then open it as a bug report with the error filled in and attached. Where
+// then open it as a bug report with the error attached (sent with the report,
+// not shown in the message box). Where
 // it isn't mounted, toastError is a plain toast.error.
 let openReport: ((errorText: string) => void) | null = null
 const listeners = new Set<() => void>()
@@ -31,9 +32,6 @@ export function ErrorFeedbackHost() {
       onOpenChange={(open) => !open && setErrorText(null)}
       defaultType="bug"
       errorDetails={errorText ?? undefined}
-      defaultMessage={
-        errorText ? `Error: ${errorText}\n\nWhat were you doing when this happened?\n` : ""
-      }
     />
   )
 }

package/components/dashboard/feedbackDialog.tsx

@@ -62,13 +62,13 @@ export default function FeedbackDialog({
   const [message, setMessage] = useState(defaultMessage)
   const [isSending, setIsSending] = useState(false)
 
-  // With a pre-filled message, re-apply it every time the dialog opens so a
-  // second error report doesn't start from the first one's text. Without one,
-  // keep whatever the user had typed (a closed dialog keeps its draft).
+  // With a pre-filled message or attached error, reset every time the dialog
+  // opens so a second error report doesn't start from the first one's text.
+  // Otherwise keep whatever the user had typed (a closed dialog keeps its draft).
   const [wasOpen, setWasOpen] = useState(open)
   if (open !== wasOpen) {
     setWasOpen(open)
-    if (open && defaultMessage) {
+    if (open && (defaultMessage || errorDetails)) {
       setType(defaultType)
       setMessage(defaultMessage)
     }

package/components/dashboard/marketingUpdatesCard.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useState } from "react"
+import { toast } from "sonner"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../ui/card"
+import { Switch } from "../ui/switch"
+import { Label } from "../ui/label"
+
+export default function MarketingUpdatesCard({
+  initialSubscribed,
+  emailVerified,
+}: {
+  initialSubscribed: boolean
+  emailVerified: boolean
+}) {
+  const [subscribed, setSubscribed] = useState(initialSubscribed)
+  const [saving, setSaving] = useState(false)
+
+  const toggle = async (next: boolean) => {
+    setSaving(true)
+    try {
+      const response = await fetch("/api/marketing/subscription", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ subscribed: next }),
+      })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error || "Failed to update subscription")
+      setSubscribed(next)
+      toast.success(next ? "Subscribed to product updates" : "Unsubscribed from product updates")
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to update subscription")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Email updates</CardTitle>
+        <CardDescription>
+          Occasional news about new features. You can turn this off here or with the link in any email.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <div className="flex items-center justify-between gap-4">
+          <Label htmlFor="marketing-updates">Send me product updates</Label>
+          <Switch
+            id="marketing-updates"
+            checked={subscribed}
+            disabled={saving || (!subscribed && !emailVerified)}
+            onCheckedChange={toggle}
+          />
+        </div>
+        {!subscribed && !emailVerified && (
+          <p className="text-sm text-muted-foreground">Verify your email address to subscribe.</p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard/marketingUpdatesSection.tsx

@@ -0,0 +1,10 @@
+import { isSubscribed, MARKETING_SEGMENT_ID } from "@xk2800/nextjs-template/marketing"
+import MarketingUpdatesCard from "./marketingUpdatesCard"
+
+// Dashboard opt-in for product updates. Renders nothing until
+// RESEND_MARKETING_SEGMENT_ID is set.
+export default async function MarketingUpdatesSection({ email, emailVerified }: { email: string; emailVerified: boolean }) {
+  if (!MARKETING_SEGMENT_ID) return null
+  const subscribed = await isSubscribed(email)
+  return <MarketingUpdatesCard initialSubscribed={subscribed} emailVerified={emailVerified} />
+}

package/components/site/cookie-banner.tsx

@@ -6,19 +6,90 @@ import { useEffect, useState } from "react"
 // Relative imports: this file ships raw in the npm package, where `@/` would
 // resolve against the consuming project instead.
 import { Button } from "../ui/button"
-import { COOKIE_BANNER_ENABLED, setCookieConsent, useCookieConsent } from "../../lib/cookie-consent"
+import { Checkbox } from "../ui/checkbox"
+import { Label } from "../ui/label"
+import {
+  readConsent,
+  setCookieConsent,
+  useConsentRequired,
+  useCookieConsent,
+  type ConsentPurpose,
+} from "../../lib/cookie-consent"
+import { CONSENT_VERSION } from "../../lib/cookie-names"
+import { useSession } from "../../lib/auth-client"
+
+// Last choice sent to app/api/consent from this browser, as
+// "userId|choice|version", so each choice is recorded once, not on every load.
+const RECORDED_KEY = "consent-recorded"
+
+// Proof of consent: once a signed-in user has a choice (made now, or before
+// they signed in), record it server-side. The route is idempotent, so a lost
+// localStorage marker only costs one redundant request.
+function useRecordConsent(consentRequired: boolean) {
+  const consent = useCookieConsent()
+  const { data: session } = useSession()
+  const userId = session?.user?.id
+
+  useEffect(() => {
+    if (!consentRequired || !userId || consent === null) return
+    const choice = readConsent()
+    if (!choice) return
+    const marker = `${userId}|${choice}|${CONSENT_VERSION}`
+    try {
+      if (localStorage.getItem(RECORDED_KEY) === marker) return
+    } catch {
+      // No localStorage — fall through; the route dedupes.
+    }
+    fetch("/api/consent", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ choice }),
+    })
+      .then((res) => {
+        if (!res.ok) return
+        try {
+          localStorage.setItem(RECORDED_KEY, marker)
+        } catch {
+          // ignore
+        }
+      })
+      .catch(() => {})
+  }, [consentRequired, userId, consent])
+}
+
+const PURPOSES: { id: ConsentPurpose; label: string; description: string }[] = [
+  {
+    id: "fingerprint",
+    label: "Security fingerprint",
+    description:
+      "A device identifier built from your browser and device characteristics, used to alert you about sign-ins from new devices and to block repeated failed sign-ins.",
+  },
+  {
+    id: "onetap",
+    label: "Google One Tap",
+    description: "Quick sign-in with Google. Loads a Google script that may set Google's own cookies.",
+  },
+]
 
 // Mount once in the root layout. Shows until the visitor picks an option;
 // "Necessary only" is as prominent as "Accept all" on purpose — GDPR requires
-// rejecting to be as easy as accepting.
+// rejecting to be as easy as accepting. "Customize" gives one choice per
+// purpose, unticked by default (pre-ticked boxes aren't valid consent).
 export function CookieBanner() {
   const consent = useCookieConsent()
+  const consentRequired = useConsentRequired()
+  const [customizing, setCustomizing] = useState(false)
+  const [picked, setPicked] = useState<ConsentPurpose[]>([])
   // useCookieConsent() is null on the server *and* before a choice, so wait
   // for mount to tell them apart — otherwise returning visitors see a flash.
   const [mounted, setMounted] = useState(false)
   useEffect(() => setMounted(true), [])
+  useRecordConsent(consentRequired)
+
+  if (!consentRequired || !mounted || consent) return null
 
-  if (!COOKIE_BANNER_ENABLED || !mounted || consent) return null
+  const toggle = (id: ConsentPurpose, on: boolean) =>
+    setPicked((prev) => (on ? [...prev, id] : prev.filter((p) => p !== id)))
 
   return (
     <div
@@ -28,16 +99,46 @@ export function CookieBanner() {
       className="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-lg rounded-lg border border-border bg-background p-4 shadow-lg"
     >
       <p className="text-sm text-muted-foreground">
-        We use necessary cookies to keep you signed in. With your permission we also use a device
-        fingerprint to detect suspicious sign-ins, and Google One Tap sign-in.{" "}
+        We use necessary cookies to keep you signed in. With your permission we also use a security
+        fingerprint, built from your browser and device characteristics, to detect suspicious
+        sign-ins, and Google One Tap sign-in. You can allow each separately.{" "}
         <Link href="/privacy" className="underline underline-offset-4 hover:text-foreground">
           Privacy policy
         </Link>
       </p>
-      <div className="mt-3 flex justify-end gap-2">
+
+      {customizing && (
+        <div className="mt-3 space-y-3">
+          {PURPOSES.map((p) => (
+            <div key={p.id} className="flex items-start gap-3">
+              <Checkbox
+                id={`consent-${p.id}`}
+                checked={picked.includes(p.id)}
+                onCheckedChange={(checked) => toggle(p.id, checked === true)}
+                className="mt-0.5"
+              />
+              <div>
+                <Label htmlFor={`consent-${p.id}`}>{p.label}</Label>
+                <p className="text-xs text-muted-foreground">{p.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="mt-3 flex flex-wrap justify-end gap-2">
         <Button variant="outline" size="sm" onClick={() => setCookieConsent("necessary")}>
           Necessary only
         </Button>
+        {customizing ? (
+          <Button variant="outline" size="sm" onClick={() => setCookieConsent(picked)}>
+            Save choices
+          </Button>
+        ) : (
+          <Button variant="outline" size="sm" onClick={() => setCustomizing(true)}>
+            Customize
+          </Button>
+        )}
         <Button size="sm" onClick={() => setCookieConsent("all")}>
           Accept all
         </Button>
@@ -48,7 +149,8 @@ export function CookieBanner() {
 
 // Withdrawing consent must be as easy as giving it — this reopens the banner.
 export function CookieSettingsButton({ className }: { className?: string }) {
-  if (!COOKIE_BANNER_ENABLED) return null
+  const consentRequired = useConsentRequired()
+  if (!consentRequired) return null
   return (
     <button type="button" className={className} onClick={() => setCookieConsent(null)}>
       Cookie settings

package/components/ui/alert-dialog.tsx

@@ -47,7 +47,7 @@ function AlertDialogContent({
       <AlertDialogOverlay />
       <AlertDialogPrimitive.Content
         className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border-(length:--surface-border-width) border-(--surface-border-color) p-6 shadow-(--dialog-shadow) duration-200 sm:max-w-lg",
           className
         )}
         {...props}

package/components/ui/badge.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-(--pill-radius) border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {

package/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border-(length:--surface-border-width) border-(--surface-border-color) py-6 shadow-(--card-shadow)",
         className
       )}
       {...props}

package/components/ui/data-table.tsx

@@ -23,6 +23,8 @@ import {
 export { MIN_CELL_WIDTH, STICKY_BREAKPOINT, recalculateColumns }
 export type { Column }
 
+const ALIGN_CLASS = { left: undefined, center: "text-center", right: "text-right" } as const
+
 function renderCell<TRow>(col: Column<TRow>, row: TRow): React.ReactNode {
   if (col.renderer) return col.renderer(row)
   const value = (row as Record<string, unknown>)[col.name]
@@ -241,6 +243,7 @@ export function DataTable<TRow>({
               {visible.map((col) => (
                 <TableHead
                   key={col.name}
+                  className={ALIGN_CLASS[col.align ?? "left"]}
                   style={{ minWidth: col.minWidth ?? minCell, maxWidth: col.maxWidth }}
                 >
                   {col.title}
@@ -276,7 +279,7 @@ export function DataTable<TRow>({
                     {visible.map((col) => (
                       <TableCell
                         key={col.name}
-                        className="whitespace-normal break-words align-top"
+                        className={cn("whitespace-normal break-words align-top", ALIGN_CLASS[col.align ?? "left"])}
                         style={{ maxWidth: col.maxWidth }}
                       >
                         {renderCell(col, row)}

package/components/ui/dialog.tsx

@@ -60,7 +60,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border-(length:--surface-border-width) border-(--surface-border-color) p-6 shadow-(--dialog-shadow) duration-200 sm:max-w-lg",
           className
         )}
         {...props}