@xk2800/nextjs-template 0.7.1-beta.7 → 0.7.1-beta.9

package/components/dashboard/admin/broadcastActions.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { Button } from "../../ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../ui/dialog"
+import ConfirmSendDialog from "./confirmSendDialog"
+
+interface Preview {
+  subject: string | null
+  from: string | null
+  previewText: string | null
+  html: string | null
+  text: string | null
+}
+
+export default function BroadcastActions({ id, name, status }: { id: string; name: string; status: string }) {
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [preview, setPreview] = useState<Preview | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [sending, setSending] = useState(false)
+  const [confirming, setConfirming] = useState(false)
+
+  const openPreview = async () => {
+    setOpen(true)
+    if (preview) return
+    setLoading(true)
+    try {
+      const response = await fetch(`/api/admin/marketing/${id}`)
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error || "Failed to load preview")
+      setPreview(data)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to load preview")
+      setOpen(false)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const send = async () => {
+    setSending(true)
+    try {
+      const response = await fetch(`/api/admin/marketing/${id}`, { method: "POST" })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error || "Failed to send broadcast")
+      toast.success("Broadcast sent")
+      setOpen(false)
+      router.refresh()
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to send broadcast")
+    } finally {
+      setSending(false)
+    }
+  }
+
+  // Resend has no push for broadcast status, so poll while it's queued and
+  // refresh the list once it moves on (e.g. to "sent").
+  // ponytail: stops after ~5 min; a broadcast scheduled for later stays
+  // "queued" until it goes out, so it's not worth polling that long.
+  useEffect(() => {
+    if (status !== "queued") return
+    let tries = 0
+    const timer = setInterval(async () => {
+      if (++tries > 100) return clearInterval(timer)
+      try {
+        const response = await fetch(`/api/admin/marketing/${id}`)
+        if (!response.ok) return
+        const data = await response.json()
+        if (data.status !== "queued") {
+          clearInterval(timer)
+          router.refresh()
+        }
+      } catch {
+        // network blip, try again next tick
+      }
+    }, 3000)
+    return () => clearInterval(timer)
+  }, [id, status, router])
+
+  const isDraft = status === "draft"
+
+  return (
+    <>
+      {status === "queued" && (
+        <span className="flex items-center gap-1.5 text-xs">
+          <span className="size-2 animate-pulse rounded-full bg-amber-500" />
+          Sending…
+        </span>
+      )}
+      <Button size="sm" variant="outline" onClick={openPreview}>Preview</Button>
+      {isDraft && (
+        <Button size="sm" disabled={sending} onClick={() => setConfirming(true)}>
+          {sending ? "Sending…" : "Send"}
+        </Button>
+      )}
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{preview?.subject || name}</DialogTitle>
+            <DialogDescription>
+              {preview ? `From ${preview.from ?? "—"}${preview.previewText ? ` · ${preview.previewText}` : ""}` : "Loading…"}
+            </DialogDescription>
+          </DialogHeader>
+          {loading ? (
+            <div className="h-[60vh] animate-pulse rounded-md bg-muted" />
+          ) : preview?.html ? (
+            // sandbox="" — no scripts, no navigation out of the frame
+            <iframe
+              title="Email preview"
+              sandbox=""
+              srcDoc={preview.html}
+              className="h-[60vh] w-full rounded-md border bg-white"
+            />
+          ) : (
+            <pre className="h-[60vh] overflow-auto whitespace-pre-wrap rounded-md border p-4 text-sm">
+              {preview?.text ?? ""}
+            </pre>
+          )}
+          {isDraft && (
+            <div className="flex justify-end">
+              <Button disabled={sending || loading} onClick={() => setConfirming(true)}>
+                {sending ? "Sending…" : "Send now"}
+              </Button>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmSendDialog
+        open={confirming}
+        onOpenChange={setConfirming}
+        subject={preview?.subject || name}
+        audience="its segment"
+        onConfirm={send}
+      />
+    </>
+  )
+}

package/components/dashboard/admin/confirmSendDialog.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../ui/alert-dialog"
+
+export default function ConfirmSendDialog({
+  open,
+  onOpenChange,
+  subject,
+  audience,
+  onConfirm,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  subject: string
+  audience: string
+  onConfirm: () => void
+}) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Send this broadcast?</AlertDialogTitle>
+          <AlertDialogDescription>
+            &ldquo;{subject}&rdquo; goes to every subscribed contact in {audience} right away.
+            This can&apos;t be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>Send now</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

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/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/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/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}

package/components/ui/dropdown-menu.tsx

@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border-(length:--surface-border-width) border-(--surface-border-color) bg-popover p-1 text-popover-foreground shadow-(--popover-shadow) 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border-(length:--surface-border-width) border-(--surface-border-color) bg-popover p-1 text-popover-foreground shadow-(--popover-shadow) 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/components/ui/select.tsx

@@ -61,7 +61,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border-(length:--surface-border-width) border-(--surface-border-color) bg-popover text-popover-foreground shadow-(--popover-shadow) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className

package/components/ui/switch.tsx

@@ -17,7 +17,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        "peer group/switch inline-flex shrink-0 items-center rounded-(--pill-radius) border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
         className
       )}
       {...props}
@@ -25,7 +25,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+          "pointer-events-none block rounded-(--pill-radius) bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
         )}
       />
     </SwitchPrimitive.Root>

package/dist/api/feedback.mjs

@@ -1,8 +1,9 @@
 import { lookupErrorDetail, unexpectedErrorMessage } from '../chunk-6MDQRT6U.mjs';
-import { auth, getResend, EMAIL_FROM } from '../chunk-6B45N7ZB.mjs';
+import { auth } from '../chunk-7QVIOQ47.mjs';
 import '../chunk-7F2POZM6.mjs';
 import '../chunk-6OAHCEDJ.mjs';
 import { getSystemSettings } from '../chunk-P2G23JMY.mjs';
+import { getResend, EMAIL_FROM } from '../chunk-OVKVD2HH.mjs';
 import '../chunk-ZJMFE5B2.mjs';
 import '../chunk-TR5XFBTD.mjs';
 import { config } from '../chunk-TKWNEKK6.mjs';