@xk2800/nextjs-template 0.7.0-beta.0 → 0.7.0

package/components/dashboard/errorFeedback.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useEffect, useState, useSyncExternalStore } from "react"
+import { toast, type ExternalToast } from "sonner"
+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
+// it isn't mounted, toastError is a plain toast.error.
+let openReport: ((errorText: string) => void) | null = null
+const listeners = new Set<() => void>()
+function setOpenReport(fn: typeof openReport) {
+  openReport = fn
+  listeners.forEach((listener) => listener())
+}
+
+export function ErrorFeedbackHost() {
+  const [errorText, setErrorText] = useState<string | null>(null)
+
+  useEffect(() => {
+    setOpenReport(setErrorText)
+    return () => setOpenReport(null)
+  }, [])
+
+  return (
+    <FeedbackDialog
+      showTrigger={false}
+      open={errorText !== null}
+      onOpenChange={(open) => !open && setErrorText(null)}
+      defaultType="bug"
+      errorDetails={errorText ?? undefined}
+      defaultMessage={
+        errorText ? `Error: ${errorText}\n\nWhat were you doing when this happened?\n` : ""
+      }
+    />
+  )
+}
+
+/** Whether a Report button can open the feedback form (host mounted and configured). */
+export function useCanReportProblem() {
+  return useSyncExternalStore(
+    (listener) => {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+    () => openReport !== null,
+    () => false
+  )
+}
+
+export function reportProblem(errorText: string) {
+  openReport?.(errorText)
+}
+
+/** toast.error with a "Report" button that opens the feedback form pre-filled. */
+export function toastError(message: string, options?: ExternalToast) {
+  return toast.error(message, {
+    ...(openReport && {
+      action: { label: "Report", onClick: () => reportProblem(message) },
+    }),
+    ...options,
+  })
+}

package/components/dashboard/feedbackDialog.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { useState } from "react"
+import { usePathname } from "next/navigation"
+import { toast } from "sonner"
+import { MessageSquare } from "lucide-react"
+import { Button } from "../ui/button"
+import { Label } from "../ui/label"
+import { Textarea } from "../ui/textarea"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog"
+
+// Keep in sync with the cap in app/api/feedback/route.ts.
+const FEEDBACK_MAX_LENGTH = 2000
+
+type FeedbackType = "bug" | "feedback"
+
+export type FeedbackDialogProps = {
+  /** Control the dialog from outside (e.g. a "Report" button on an error). */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Pre-filled each time the dialog opens, e.g. the error the user just hit. */
+  defaultType?: FeedbackType
+  defaultMessage?: string
+  /**
+   * The error the user hit, sent alongside their message (not editable). The
+   * server only forwards it when "Attach error details" is on in System Settings.
+   */
+  errorDetails?: string
+  /** Render the "Feedback" header button. Default `true`. */
+  showTrigger?: boolean
+}
+
+/**
+ * Header button + dialog that POSTs to /api/feedback. Render it only when a
+ * feedback channel is configured (FEEDBACK_DISCORD_WEBHOOK_URL or
+ * FEEDBACK_EMAIL); otherwise the route answers 503.
+ */
+export default function FeedbackDialog({
+  open: openProp,
+  onOpenChange,
+  defaultType = "feedback",
+  defaultMessage = "",
+  errorDetails,
+  showTrigger = true,
+}: FeedbackDialogProps = {}) {
+  const pathname = usePathname()
+  const [openState, setOpenState] = useState(false)
+  const open = openProp ?? openState
+  const setOpen = (next: boolean) => {
+    setOpenState(next)
+    onOpenChange?.(next)
+  }
+  const [type, setType] = useState<FeedbackType>(defaultType)
+  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).
+  const [wasOpen, setWasOpen] = useState(open)
+  if (open !== wasOpen) {
+    setWasOpen(open)
+    if (open && defaultMessage) {
+      setType(defaultType)
+      setMessage(defaultMessage)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSending(true)
+    try {
+      const response = await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ type, message, page: pathname, error: errorDetails }),
+      })
+      const data = await response.json().catch(() => ({}))
+      if (!response.ok) throw new Error(data.error || "Failed to send feedback")
+
+      toast.success("Thanks! Your feedback was sent.")
+      setMessage("")
+      setOpen(false)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to send feedback")
+    } finally {
+      setIsSending(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {showTrigger && (
+        <DialogTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <MessageSquare />
+            Feedback
+          </Button>
+        </DialogTrigger>
+      )}
+      <DialogContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <DialogHeader>
+            <DialogTitle>Send feedback</DialogTitle>
+            <DialogDescription>
+              Report a bug or tell us what could be better.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex gap-2" role="radiogroup" aria-label="Feedback type">
+            {(["feedback", "bug"] as const).map((t) => (
+              <Button
+                key={t}
+                type="button"
+                role="radio"
+                aria-checked={type === t}
+                variant={type === t ? "default" : "outline"}
+                size="sm"
+                onClick={() => setType(t)}
+              >
+                {t === "bug" ? "Bug report" : "General feedback"}
+              </Button>
+            ))}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="feedback-message">
+              {type === "bug" ? "What happened, and what did you expect?" : "Your feedback"}
+            </Label>
+            <Textarea
+              id="feedback-message"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              maxLength={FEEDBACK_MAX_LENGTH}
+              rows={6}
+              required
+            />
+            <p className="text-xs text-muted-foreground text-right">
+              {message.length}/{FEEDBACK_MAX_LENGTH}
+            </p>
+          </div>
+
+          <DialogFooter>
+            <Button type="submit" disabled={isSending || !message.trim()}>
+              {isSending ? "Sending..." : "Send"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/dashboard/installAppCard.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import { useEffect, useState, type ReactNode } from 'react'
+import { CircleCheck, Download } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card'
+import { Button } from '../ui/button'
+
+// Chrome/Edge's install event; not in the DOM typings yet.
+type InstallPromptEvent = Event & { prompt: () => Promise<{ outcome: 'accepted' | 'dismissed' }> }
+
+declare global {
+  interface Window {
+    // Stashed by app/layout.tsx in case the event fires before this card mounts.
+    __pwaInstallPrompt?: InstallPromptEvent
+  }
+}
+
+export type InstallTarget = {
+  os: 'ios' | 'android' | 'desktop'
+  browser: 'safari' | 'chrome' | 'edge' | 'firefox' | 'samsung' | 'other'
+}
+
+// iPadOS reports a Mac user agent, so touch support tells them apart.
+export function detectInstallTarget(ua: string, maxTouchPoints = 0): InstallTarget {
+  const ios = /iPhone|iPad|iPod/.test(ua) || (/Macintosh/.test(ua) && maxTouchPoints > 1)
+  const os = ios ? 'ios' : /Android/.test(ua) ? 'android' : 'desktop'
+  const browser = /SamsungBrowser/.test(ua)
+    ? 'samsung'
+    : /Edg(e|A|iOS)?\//.test(ua)
+      ? 'edge'
+      : /Firefox|FxiOS/.test(ua)
+        ? 'firefox'
+        : /OPR\/|Opera/.test(ua)
+          ? 'other'
+          : /Chrome|CriOS/.test(ua)
+            ? 'chrome'
+            : /Safari/.test(ua)
+              ? 'safari'
+              : 'other'
+  return { os, browser }
+}
+
+const BROWSER_NAMES: Record<InstallTarget['browser'], string> = {
+  safari: 'Safari',
+  chrome: 'Chrome',
+  edge: 'Edge',
+  firefox: 'Firefox',
+  samsung: 'Samsung Internet',
+  other: 'your browser',
+}
+const OS_NAMES: Record<InstallTarget['os'], string> = {
+  ios: 'iPhone / iPad',
+  android: 'Android',
+  desktop: 'this computer',
+}
+
+// Manual steps for each OS/browser, or null when the browser can't install apps.
+function steps({ os, browser }: InstallTarget): ReactNode[] | null {
+  if (os === 'ios') {
+    return [
+      browser === 'safari' ? (
+        <>Tap <strong>Share</strong> in the toolbar. It may be inside the <strong>⋯</strong> menu.</>
+      ) : (
+        <>Tap <strong>Share</strong> in the address bar or menu.</>
+      ),
+      <>Choose <strong>Add to Home Screen</strong>. Keep &ldquo;Open as Web App&rdquo; on if shown.</>,
+      <>Tap <strong>Add</strong>, then open the new icon on your home screen.</>,
+    ]
+  }
+  if (os === 'android') {
+    if (browser === 'samsung') {
+      return [
+        <>Tap the <strong>☰</strong> menu at the bottom right.</>,
+        <>Choose <strong>Add page to</strong> → <strong>Home screen</strong>.</>,
+      ]
+    }
+    return [
+      <>Tap the <strong>⋮</strong> menu at the top right.</>,
+      <>Choose <strong>Install app</strong> or <strong>Add to Home screen</strong>.</>,
+    ]
+  }
+  if (browser === 'chrome') {
+    return [
+      <>
+        Click the install icon at the right of the address bar, or open the <strong>⋮</strong> menu
+        and choose <strong>Cast, save and share</strong> → <strong>Install page as app</strong>.
+      </>,
+    ]
+  }
+  if (browser === 'edge') {
+    return [
+      <>
+        Click the install icon at the right of the address bar, or open the <strong>⋯</strong> menu
+        and choose <strong>Apps</strong> → <strong>Install this site as an app</strong>.
+      </>,
+    ]
+  }
+  if (browser === 'safari') {
+    return [<>Choose <strong>File</strong> → <strong>Add to Dock</strong> (macOS Sonoma or later).</>]
+  }
+  return null
+}
+
+// Install instructions for the visitor's own OS and browser, plus a one-click
+// Install button where the browser offers one (Chrome, Edge). Shows a
+// confirmation instead once the app runs installed.
+export default function InstallAppCard() {
+  const [target, setTarget] = useState<InstallTarget | undefined>()
+  const [installed, setInstalled] = useState(false)
+  const [prompt, setPrompt] = useState<InstallPromptEvent | undefined>()
+
+  useEffect(() => {
+    setTarget(detectInstallTarget(navigator.userAgent, navigator.maxTouchPoints))
+    setInstalled(
+      matchMedia('(display-mode: standalone)').matches ||
+        (navigator as Navigator & { standalone?: boolean }).standalone === true
+    )
+    setPrompt(window.__pwaInstallPrompt)
+
+    const onPrompt = (e: Event) => setPrompt(e as InstallPromptEvent)
+    const onInstalled = () => setInstalled(true)
+    addEventListener('beforeinstallprompt', onPrompt)
+    addEventListener('appinstalled', onInstalled)
+    return () => {
+      removeEventListener('beforeinstallprompt', onPrompt)
+      removeEventListener('appinstalled', onInstalled)
+    }
+  }, [])
+
+  async function install() {
+    if (!prompt) return
+    const { outcome } = await prompt.prompt()
+    // The event can only be used once.
+    window.__pwaInstallPrompt = undefined
+    setPrompt(undefined)
+    if (outcome === 'accepted') setInstalled(true)
+  }
+
+  // Rendered after mount only: the server can't see the visitor's device.
+  if (!target) return null
+  const list = steps(target)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Install the app</CardTitle>
+        <CardDescription>
+          Open it from your home screen or dock, in its own window.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {installed ? (
+          <p className="flex items-center gap-2 text-sm">
+            <CircleCheck className="size-4 text-green-600" aria-hidden />
+            You&apos;re using the installed app on this device.
+          </p>
+        ) : (
+          <>
+            <p className="text-sm text-muted-foreground">
+              {BROWSER_NAMES[target.browser]} on {OS_NAMES[target.os]}
+            </p>
+            {prompt && (
+              <Button onClick={install}>
+                <Download aria-hidden /> Install app
+              </Button>
+            )}
+            {list ? (
+              <ol className="list-decimal space-y-2 pl-5 text-sm marker:text-muted-foreground">
+                {list.map((step, i) => (
+                  <li key={i}>{step}</li>
+                ))}
+              </ol>
+            ) : (
+              !prompt && (
+                <p className="text-sm">
+                  This browser can&apos;t install apps. Open this page in{' '}
+                  {target.os === 'desktop' ? 'Chrome, Edge, or Safari on a Mac' : 'Chrome'} to install
+                  it.
+                </p>
+              )
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/site/cookie-banner.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import Link from "next/link"
+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"
+
+// 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.
+export function CookieBanner() {
+  const consent = useCookieConsent()
+  // 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), [])
+
+  if (!COOKIE_BANNER_ENABLED || !mounted || consent) return null
+
+  return (
+    <div
+      role="dialog"
+      aria-live="polite"
+      aria-label="Cookie consent"
+      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.{" "}
+        <Link href="/privacy" className="underline underline-offset-4 hover:text-foreground">
+          Privacy policy
+        </Link>
+      </p>
+      <div className="mt-3 flex justify-end gap-2">
+        <Button variant="outline" size="sm" onClick={() => setCookieConsent("necessary")}>
+          Necessary only
+        </Button>
+        <Button size="sm" onClick={() => setCookieConsent("all")}>
+          Accept all
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// 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
+  return (
+    <button type="button" className={className} onClick={() => setCookieConsent(null)}>
+      Cookie settings
+    </button>
+  )
+}

package/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const buttonVariants = cva(
   "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

package/components/ui/file-upload.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import { Camera, ImagePlus, Upload, X } from "lucide-react"
+
+import { Button } from "./button"
+import { cn } from "../../lib/utils"
+
+type FileUploadProps = {
+  /** Take a photo with the device camera (rear camera on mobile; a file picker on desktop). */
+  camera?: boolean
+  /** Pick existing files from the gallery / file system. */
+  gallery?: boolean
+  /** Drop files onto the component. */
+  dragDrop?: boolean
+  /** Same format as `<input accept>`. Also enforced on dropped files. */
+  accept?: string
+  multiple?: boolean
+  maxFiles?: number
+  maxSizeMB?: number
+  disabled?: boolean
+  onFilesChange?: (files: File[]) => void
+  className?: string
+}
+
+function matchesAccept(file: File, accept: string) {
+  return accept.split(",").some((raw) => {
+    const rule = raw.trim().toLowerCase()
+    if (!rule) return false
+    if (rule.startsWith(".")) return file.name.toLowerCase().endsWith(rule)
+    if (rule.endsWith("/*")) return file.type.startsWith(rule.slice(0, -1))
+    return file.type === rule
+  })
+}
+
+function FileUpload({
+  camera = false,
+  gallery = false,
+  dragDrop = false,
+  accept = "image/*",
+  multiple = true,
+  maxFiles,
+  maxSizeMB,
+  disabled = false,
+  onFilesChange,
+  className,
+}: FileUploadProps) {
+  const [files, setFiles] = React.useState<File[]>([])
+  const [error, setError] = React.useState<string | null>(null)
+  const [dragging, setDragging] = React.useState(false)
+  const cameraRef = React.useRef<HTMLInputElement>(null)
+  const galleryRef = React.useRef<HTMLInputElement>(null)
+
+  const previews = React.useMemo(
+    () => files.map((f) => (f.type.startsWith("image/") ? URL.createObjectURL(f) : null)),
+    [files]
+  )
+  React.useEffect(() => () => previews.forEach((url) => url && URL.revokeObjectURL(url)), [previews])
+
+  const update = (next: File[]) => {
+    setFiles(next)
+    onFilesChange?.(next)
+  }
+
+  const add = (incoming: File[]) => {
+    const limit = multiple ? (maxFiles ?? Infinity) : 1
+    const accepted: File[] = []
+    let rejected: string | null = null
+    for (const file of incoming) {
+      if (!matchesAccept(file, accept)) rejected = `${file.name} is not an accepted file type.`
+      else if (maxSizeMB && file.size > maxSizeMB * 1024 * 1024) rejected = `${file.name} is larger than ${maxSizeMB} MB.`
+      else accepted.push(file)
+    }
+    const base = multiple ? files : []
+    const next = [...base, ...accepted].slice(0, limit)
+    if (base.length + accepted.length > limit) rejected = `You can upload up to ${limit} file${limit === 1 ? "" : "s"}.`
+    setError(rejected)
+    if (accepted.length) update(next)
+  }
+
+  const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    add(Array.from(e.target.files ?? []))
+    e.target.value = "" // allow picking the same file again
+  }
+
+  const remove = (index: number) => {
+    setError(null)
+    update(files.filter((_, i) => i !== index))
+  }
+
+  if (!camera && !gallery && !dragDrop) return null
+
+  const buttons = (
+    <div className="flex flex-wrap justify-center gap-2">
+      {camera && (
+        <Button type="button" variant="outline" size="sm" disabled={disabled} onClick={() => cameraRef.current?.click()}>
+          <Camera /> Take photo
+        </Button>
+      )}
+      {gallery && (
+        <Button type="button" variant="outline" size="sm" disabled={disabled} onClick={() => galleryRef.current?.click()}>
+          <ImagePlus /> Choose from gallery
+        </Button>
+      )}
+    </div>
+  )
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {camera && (
+        <input ref={cameraRef} type="file" accept={accept} capture="environment" hidden disabled={disabled} onChange={onInput} />
+      )}
+      {gallery && (
+        <input ref={galleryRef} type="file" accept={accept} multiple={multiple} hidden disabled={disabled} onChange={onInput} />
+      )}
+
+      {dragDrop ? (
+        <div
+          onDragOver={(e) => {
+            e.preventDefault()
+            if (!disabled) setDragging(true)
+          }}
+          onDragLeave={() => setDragging(false)}
+          onDrop={(e) => {
+            e.preventDefault()
+            setDragging(false)
+            if (!disabled) add(Array.from(e.dataTransfer.files))
+          }}
+          aria-disabled={disabled}
+          className={cn(
+            "flex flex-col items-center gap-3 rounded-lg border-2 border-dashed p-6 text-center text-sm text-muted-foreground transition-colors",
+            dragging && "border-primary bg-primary/5",
+            disabled && "opacity-50"
+          )}
+        >
+          <Upload className="size-6" />
+          <p>Drag and drop {multiple ? "files" : "a file"} here</p>
+          {buttons}
+        </div>
+      ) : (
+        buttons
+      )}
+
+      {error && (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+
+      {files.length > 0 && (
+        <ul className="grid grid-cols-3 gap-2 sm:grid-cols-4">
+          {files.map((file, i) => (
+            <li key={`${file.name}-${file.lastModified}-${i}`} className="relative aspect-square overflow-hidden rounded-md border bg-muted">
+              {previews[i] ? (
+                // eslint-disable-next-line @next/next/no-img-element -- blob: URLs can't go through next/image
+                <img src={previews[i]!} alt={file.name} className="size-full object-cover" />
+              ) : (
+                <span className="flex size-full items-center justify-center break-all p-2 text-xs">{file.name}</span>
+              )}
+              <button
+                type="button"
+                onClick={() => remove(i)}
+                disabled={disabled}
+                aria-label={`Remove ${file.name}`}
+                className="absolute top-1 right-1 rounded-full bg-background/80 p-1 text-foreground hover:bg-background"
+              >
+                <X className="size-3" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export { FileUpload, matchesAccept }
+export type { FileUploadProps }

package/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (

package/components/ui/separator.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Separator as SeparatorPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Separator({
   className,

package/components/ui/sheet.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { XIcon } from "lucide-react"
 import { Dialog as SheetPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />