love-ui 1.2.12 → 1.2.14

package/public/r/emails.json

@@ -0,0 +1,243 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "emails",
+  "type": "registry:block",
+  "title": "Incident Mailbox",
+  "description": "An operations-focused incident mailbox with alert triage, thread detail, and escalation navigation.",
+  "files": [
+    {
+      "path": "registry/example-apps/default/emails/components/emails/email-detail.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/emails/components/emails/email-detail.tsx",
+      "content": "\"use client\"\n\nimport {\n  IconArchive,\n  IconCalendar,\n  IconChecks,\n  IconChevronLeft,\n  IconChevronRight,\n  IconClock,\n  IconDotsVertical,\n  IconFile,\n  IconFileSpreadsheet,\n  IconFileText,\n  IconFileZip,\n  IconFilter,\n  IconFolderOpen,\n  IconMailPlus,\n  IconPhoto,\n  IconReceipt,\n  IconSettings,\n  IconShare,\n  IconShield,\n  IconSparkles,\n  IconStar,\n  IconTag,\n  IconTrash,\n  IconVolume,\n  IconX,\n} from \"@tabler/icons-react\"\nimport { format } from \"date-fns\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\nimport { Button } from \"@loveui/ui/ui/button\"\n\nimport { cn } from \"../../lib/utils\"\nimport { useEmailsStore } from \"../../store/emails-store\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"../ui/dropdown-menu\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/tooltip\"\nimport { VerifiedIcon } from \"../ui/verified-icon\"\n\nfunction getFileIcon(type: string) {\n  if (type.includes(\"pdf\")) {\n    return IconFileText\n  } else if (type.includes(\"word\") || type.includes(\"document\")) {\n    return IconFileText\n  } else if (type.includes(\"excel\") || type.includes(\"spreadsheet\")) {\n    return IconFileSpreadsheet\n  } else if (type.includes(\"powerpoint\") || type.includes(\"presentation\")) {\n    return IconFileText\n  } else if (\n    type.includes(\"image\") ||\n    type.includes(\"png\") ||\n    type.includes(\"jpg\") ||\n    type.includes(\"jpeg\")\n  ) {\n    return IconPhoto\n  } else if (type.includes(\"zip\") || type.includes(\"archive\")) {\n    return IconFileZip\n  }\n  return IconFile\n}\n\nfunction getFileGradient(type: string) {\n  if (type.includes(\"pdf\")) {\n    return { start: \"#f75936\", end: \"#a73a24\" }\n  } else if (type.includes(\"word\") || type.includes(\"document\")) {\n    return { start: \"#2b5797\", end: \"#1e3d6b\" }\n  } else if (type.includes(\"excel\") || type.includes(\"spreadsheet\")) {\n    return { start: \"#217346\", end: \"#165530\" }\n  } else if (type.includes(\"powerpoint\") || type.includes(\"presentation\")) {\n    return { start: \"#d04423\", end: \"#9b3319\" }\n  } else if (\n    type.includes(\"image\") ||\n    type.includes(\"png\") ||\n    type.includes(\"jpg\") ||\n    type.includes(\"jpeg\")\n  ) {\n    return { start: \"#8b5cf6\", end: \"#6d28d9\" }\n  } else if (type.includes(\"zip\") || type.includes(\"archive\")) {\n    return { start: \"#f59e0b\", end: \"#d97706\" }\n  }\n  return { start: \"#6b7280\", end: \"#4b5563\" }\n}\n\nexport function EmailDetail() {\n  const {\n    emails,\n    selectedEmailId,\n    toggleStar,\n    clearSelectedEmail,\n    selectEmail,\n  } = useEmailsStore()\n  const email = emails.find((e) => e.id === selectedEmailId)\n\n  const currentIndex = emails.findIndex((e) => e.id === selectedEmailId)\n  const isFirstEmail = currentIndex === 0\n  const isLastEmail = currentIndex === emails.length - 1\n\n  const goToPreviousEmail = () => {\n    if (!isFirstEmail && currentIndex > 0) {\n      selectEmail(emails[currentIndex - 1].id)\n    }\n  }\n\n  const goToNextEmail = () => {\n    if (!isLastEmail && currentIndex < emails.length - 1) {\n      selectEmail(emails[currentIndex + 1].id)\n    }\n  }\n\n  if (!email) {\n    return (\n      <div className=\"flex h-full items-center justify-center bg-card\">\n        <div className=\"text-center text-muted-foreground\">\n          <p>Select an alert to review</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex h-full flex-col bg-card\">\n      <div className=\"flex items-center justify-between border-b border-border px-3 py-3 md:px-6 md:py-4\">\n        <div className=\"hidden items-center gap-3 lg:flex\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon-sm\">\n                <IconSparkles className=\"size-4 text-foreground\" stroke={1.5} />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>AI Assistant</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon-sm\">\n                <IconArchive\n                  className=\"size-4 text-muted-foreground\"\n                  stroke={1.5}\n                />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Archive</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon-sm\">\n                <IconSettings\n                  className=\"size-4 text-muted-foreground\"\n                  stroke={1.5}\n                />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Mark as noise</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon-sm\">\n                <IconTrash\n                  className=\"size-4 text-muted-foreground\"\n                  stroke={1.5}\n                />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Delete</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon-sm\">\n                <IconMailPlus\n                  className=\"size-4 text-muted-foreground\"\n                  stroke={1.5}\n                />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Mark as unread</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon-sm\">\n                <IconFolderOpen\n                  className=\"size-4 text-muted-foreground\"\n                  stroke={1.5}\n                />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Move to folder</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon-sm\">\n                <IconDotsVertical\n                  className=\"size-4 text-muted-foreground\"\n                  stroke={1.5}\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-64\">\n              <DropdownMenuItem>\n                <IconClock className=\"mr-2 size-4\" stroke={1.5} />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconChecks className=\"mr-2 size-4\" stroke={1.5} />\n                Add to Tasks\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconCalendar className=\"mr-2 size-4\" stroke={1.5} />\n                Create event\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <IconTag className=\"mr-2 size-4\" stroke={1.5} />\n                  Label as\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Ops</DropdownMenuItem>\n                  <DropdownMenuItem>Investigation</DropdownMenuItem>\n                  <DropdownMenuItem>SEV-1</DropdownMenuItem>\n                  <DropdownMenuItem>Postmortem</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n              <DropdownMenuItem>\n                <IconFilter className=\"mr-2 size-4\" stroke={1.5} />\n                Filter messages like these\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconVolume className=\"mr-2 size-4\" stroke={1.5} />\n                Mute\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <IconSettings className=\"mr-2 size-4\" stroke={1.5} />\n                Switch to advanced toolbar\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"flex items-center gap-1 md:gap-2 lg:hidden\">\n          <Button variant=\"ghost\" size=\"icon-sm\">\n            <IconSparkles className=\"size-4 text-foreground\" stroke={1.5} />\n          </Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon-sm\">\n                <IconDotsVertical\n                  className=\"size-4 text-muted-foreground\"\n                  stroke={1.5}\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-48\">\n              <DropdownMenuItem>\n                <IconArchive className=\"size-4\" stroke={1.5} />\n                <span>Archive</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconSettings className=\"size-4\" stroke={1.5} />\n                <span>Mark as noise</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                <IconTrash className=\"size-4\" stroke={1.5} />\n                <span>Delete</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <IconMailPlus className=\"size-4\" stroke={1.5} />\n                <span>Mark as unread</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconFolderOpen className=\"size-4\" stroke={1.5} />\n                <span>Move to folder</span>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"flex items-center gap-2 md:gap-3\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            onClick={clearSelectedEmail}\n            className=\"hidden md:flex\"\n          >\n            <IconX className=\"size-4 text-muted-foreground\" stroke={1.5} />\n          </Button>\n          <p className=\"hidden text-[11px] whitespace-nowrap text-muted-foreground sm:block md:text-[13px]\">\n            {currentIndex + 1} from {emails.length}\n          </p>\n          <div className=\"flex items-center gap-0.5 md:gap-1\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              onClick={goToPreviousEmail}\n              disabled={isFirstEmail}\n            >\n              <IconChevronLeft\n                className={cn(\n                  \"size-4\",\n                  isFirstEmail\n                    ? \"text-muted-foreground/30\"\n                    : \"text-muted-foreground\"\n                )}\n                stroke={1.5}\n              />\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              onClick={goToNextEmail}\n              disabled={isLastEmail}\n            >\n              <IconChevronRight\n                className={cn(\n                  \"size-4\",\n                  isLastEmail\n                    ? \"text-muted-foreground/30\"\n                    : \"text-muted-foreground\"\n                )}\n                stroke={1.5}\n              />\n            </Button>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"border-b border-border px-3 py-3 md:px-6 md:py-4\">\n        <div className=\"flex items-start justify-between gap-2 md:items-center md:gap-4\">\n          <div className=\"flex min-w-0 flex-1 items-start gap-2 md:items-center md:gap-2.5\">\n            <Avatar className=\"size-8 shrink-0 md:size-10\">\n              <AvatarImage src={email.from.avatar} alt={email.from.name} />\n              <AvatarFallback>{email.from.name.charAt(0)}</AvatarFallback>\n            </Avatar>\n            <div className=\"min-w-0 flex-1\">\n              <div className=\"flex items-center gap-1\">\n                <p className=\"truncate text-sm font-medium text-foreground md:text-base\">\n                  {email.from.name}\n                </p>\n                {email.from.verified && (\n                  <VerifiedIcon className=\"size-3 shrink-0 md:size-4\" />\n                )}\n              </div>\n              <p className=\"truncate text-[12px] text-muted-foreground md:text-[14px]\">\n                <span className=\"hidden sm:inline\">From: </span>\n                <span className=\"text-foreground\">{email.from.email}</span>\n              </p>\n              <p className=\"mt-0.5 text-[11px] text-muted-foreground md:hidden\">\n                {format(email.date, \"MMM dd, yyyy\")}\n              </p>\n            </div>\n          </div>\n\n          <div className=\"hidden items-center gap-3 md:flex lg:gap-4\">\n            <p className=\"hidden text-[14px] whitespace-nowrap text-muted-foreground opacity-70 lg:block\">\n              {format(email.date, \"MMMM dd, yyyy hh:mm\")}\n            </p>\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              onClick={() => toggleStar(email.id)}\n            >\n              <IconStar\n                className={cn(\n                  \"size-4\",\n                  email.starred\n                    ? \"fill-yellow-500 text-yellow-500\"\n                    : \"text-muted-foreground\"\n                )}\n                stroke={1.5}\n              />\n            </Button>\n            <Button variant=\"ghost\" size=\"icon-sm\" className=\"hidden lg:flex\">\n              <IconShare\n                className=\"size-4 text-muted-foreground\"\n                stroke={1.5}\n              />\n            </Button>\n            <Button variant=\"ghost\" size=\"icon-sm\" className=\"hidden lg:flex\">\n              <IconReceipt\n                className=\"size-4 text-muted-foreground\"\n                stroke={1.5}\n              />\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconDotsVertical\n                    className=\"size-4 text-muted-foreground\"\n                    stroke={1.5}\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuItem className=\"lg:hidden\">\n                  <IconShare className=\"size-4\" stroke={1.5} />\n                  <span>Reply</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem className=\"lg:hidden\">\n                  <IconReceipt className=\"size-4\" stroke={1.5} />\n                  <span>Forward</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator className=\"lg:hidden\" />\n                <DropdownMenuItem>\n                  <IconArchive className=\"size-4\" stroke={1.5} />\n                  <span>Archive</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconTrash className=\"size-4\" stroke={1.5} />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n\n          <div className=\"flex shrink-0 items-center gap-1 md:hidden\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              onClick={() => toggleStar(email.id)}\n            >\n              <IconStar\n                className={cn(\n                  \"size-4\",\n                  email.starred\n                    ? \"fill-yellow-500 text-yellow-500\"\n                    : \"text-muted-foreground\"\n                )}\n                stroke={1.5}\n              />\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconDotsVertical\n                    className=\"size-4 text-muted-foreground\"\n                    stroke={1.5}\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuItem>\n                  <IconShare className=\"size-4\" stroke={1.5} />\n                  <span>Reply</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconReceipt className=\"size-4\" stroke={1.5} />\n                  <span>Forward</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconArchive className=\"size-4\" stroke={1.5} />\n                  <span>Archive</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconTrash className=\"size-4\" stroke={1.5} />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex-1 overflow-y-auto px-3 py-3 md:px-6 md:py-4\">\n        <p className=\"mb-3 text-[18px] leading-tight font-medium tracking-tight text-foreground md:mb-4 md:text-[20px]\">\n          {email.subject}\n        </p>\n\n        <div className=\"text-[13px] leading-relaxed tracking-tight whitespace-pre-wrap text-foreground/80 md:text-[14px] dark:text-[#cccccc]\">\n          {email.body}\n        </div>\n\n        {email.attachments && email.attachments.length > 0 && (\n          <div className=\"mt-4 md:mt-6\">\n            <div className=\"mb-2 flex items-center gap-1.5\">\n              <p className=\"text-[12px] font-semibold text-foreground md:text-[13px]\">\n                Attachment\n              </p>\n              <div className=\"flex items-center gap-0.5\">\n                <p className=\"text-[11px] text-muted-foreground md:text-[12px]\">\n                  Secure by\n                </p>\n                <p className=\"text-[11px] text-foreground md:text-[12px]\">\n                  data.ai\n                </p>\n                <IconShield\n                  className=\"size-3 text-[#38bdf8] md:size-4\"\n                  stroke={1.5}\n                />\n              </div>\n            </div>\n\n            <div className=\"flex flex-wrap gap-2\">\n              {email.attachments.map((attachment) => {\n                const FileIconComponent = getFileIcon(attachment.type)\n                const gradient = getFileGradient(attachment.type)\n\n                return (\n                  <div\n                    key={attachment.id}\n                    className=\"flex items-center gap-2 rounded-md border border-border bg-muted px-2 py-1.5 md:px-3\"\n                  >\n                    <div\n                      className=\"flex size-5 shrink-0 items-center justify-center rounded md:size-6\"\n                      style={{\n                        background: `linear-gradient(135deg, ${gradient.start}, ${gradient.end})`,\n                      }}\n                    >\n                      <FileIconComponent\n                        className=\"size-3 text-white md:size-3.5\"\n                        stroke={1.5}\n                      />\n                    </div>\n                    <div className=\"leading-tight\">\n                      <p className=\"max-w-[150px] truncate text-[12px] font-medium text-foreground md:max-w-none md:text-[13px]\">\n                        {attachment.name}\n                      </p>\n                      <p className=\"text-[11px] text-muted-foreground md:text-[12px]\">\n                        {attachment.size}\n                      </p>\n                    </div>\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/emails/email-list.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/emails/components/emails/email-list.tsx",
+      "content": "\"use client\"\n\nimport { format } from \"date-fns\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\n\nimport { cn } from \"../../lib/utils\"\nimport { useEmailsStore } from \"../../store/emails-store\"\nimport { VerifiedIcon } from \"../ui/verified-icon\"\n\ninterface EmailListProps {\n  onEmailClick?: (emailId: string) => void\n}\n\nexport function EmailList({ onEmailClick }: EmailListProps) {\n  const { emails, selectedEmailId, selectEmail } = useEmailsStore()\n\n  const handleEmailClick = (emailId: string) => {\n    selectEmail(emailId)\n    onEmailClick?.(emailId)\n  }\n\n  if (emails.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center bg-card\">\n        <div className=\"text-center text-muted-foreground\">\n          <p>No alerts found</p>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex h-full flex-col overflow-hidden bg-card\">\n      <div className=\"flex items-center justify-between border-b border-border px-5 py-3\">\n        <div className=\"flex items-center gap-2\">\n          <div className=\"size-3.5 rounded border border-border\" />\n          <p className=\"text-sm font-medium text-foreground\">Active Alerts</p>\n        </div>\n      </div>\n\n      <div className=\"flex-1 overflow-y-auto\">\n        {emails.map((email) => {\n          const isSelected = selectedEmailId === email.id\n          const isRead = email.read\n\n          return (\n            <button\n              key={email.id}\n              onClick={() => handleEmailClick(email.id)}\n              className={cn(\n                \"flex w-full gap-2.5 border-b border-border p-4 text-left transition-colors hover:bg-muted/70\",\n                isSelected && \"bg-muted\",\n                !isRead && \"bg-muted/50\"\n              )}\n            >\n              <div className={cn(\"flex w-full gap-2.5\")}>\n                <Avatar className=\"mt-1.5 size-7 shrink-0\">\n                  <AvatarImage src={email.from.avatar} alt={email.from.name} />\n                  <AvatarFallback>{email.from.name.charAt(0)}</AvatarFallback>\n                </Avatar>\n\n                <div className=\"flex-1 overflow-hidden\">\n                  <div className=\"flex items-start justify-between gap-2.5\">\n                    <div className=\"flex-1 overflow-hidden\">\n                      <div className=\"flex items-center gap-1\">\n                        <p\n                          className={cn(\n                            \"truncate text-[14px] tracking-tight\",\n                            !isRead || isSelected\n                              ? \"font-medium text-foreground\"\n                              : \"text-foreground\"\n                          )}\n                        >\n                          {email.from.name}\n                        </p>\n                        {email.from.verified && (\n                          <VerifiedIcon className=\"size-4 shrink-0\" />\n                        )}\n                      </div>\n                      <p className=\"truncate text-[12px] tracking-tight text-[#38bdf8]\">\n                        {email.from.email}\n                      </p>\n                    </div>\n                    <p\n                      className={cn(\n                        \"shrink-0 text-[12px] tracking-tight\",\n                        !isRead\n                          ? \"font-medium text-foreground\"\n                          : \"text-foreground\"\n                      )}\n                    >\n                      {format(email.date, \"MMM dd\")}\n                    </p>\n                  </div>\n\n                  <div className=\"mt-1.5 space-y-0.5\">\n                    <p className=\"line-clamp-2 text-[12px] leading-relaxed tracking-tight text-foreground\">\n                      {email.body}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/emails/emails-header.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/emails/components/emails/emails-header.tsx",
+      "content": "\"use client\"\n\nimport {\n  IconDotsVertical,\n  IconLink,\n  IconMail,\n  IconMenu2,\n  IconWand,\n} from \"@tabler/icons-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\nimport { Button } from \"@loveui/ui/ui/button\"\n\nimport { useEmailsStore } from \"../../store/emails-store\"\nimport { ThemeToggle } from \"../theme-toggle\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../ui/dropdown-menu\"\n\ninterface EmailsHeaderProps {\n  onMobileMenuClick?: () => void\n}\n\nexport function EmailsHeader({ onMobileMenuClick }: EmailsHeaderProps) {\n  const { emails } = useEmailsStore()\n  return (\n    <div className=\"flex h-14 items-center justify-between border-b border-border bg-background px-3 md:px-6\">\n      <div className=\"flex flex-1 items-center gap-2 md:gap-4\">\n        <Button\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"md:hidden\"\n          onClick={onMobileMenuClick}\n        >\n          <IconMenu2 className=\"size-5\" stroke={1.5} />\n        </Button>\n\n        <div className=\"flex items-center gap-2 md:gap-2.5\">\n          <IconMail className=\"size-4 text-foreground\" stroke={1.5} />\n          <p className=\"text-sm font-normal tracking-tight text-foreground md:text-base\">\n            Incident Mailbox\n          </p>\n        </div>\n        <div className=\"hidden items-center gap-2.5 sm:flex\">\n          <div className=\"size-1 rounded-full bg-muted-foreground/20\" />\n          <p className=\"text-sm font-normal tracking-tight text-foreground md:text-base\">\n            {emails.length} alerts\n          </p>\n        </div>\n      </div>\n\n      <div className=\"hidden items-center gap-4 md:flex\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"text-[13px] text-muted-foreground\">\n            Last triage 20 min ago\n          </p>\n          <div className=\"flex items-center\">\n            {[1, 2, 3, 4].map((i) => (\n              <Avatar\n                key={i}\n                className=\"-ml-2 size-5 border-2 border-background first:ml-0\"\n              >\n                <AvatarImage\n                  src={`https://api.dicebear.com/9.x/glass/svg?seed=User${i}`}\n                />\n                <AvatarFallback>U{i}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <ThemeToggle />\n          <Button\n            size=\"sm\"\n            className=\"relative h-[30px] overflow-hidden bg-linear-to-r from-white to-white hover:opacity-90\"\n          >\n            <div className=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(205,175,250,1),transparent_50%),radial-gradient(ellipse_at_bottom_right,rgba(129,169,248,1),transparent_50%),radial-gradient(ellipse_at_top_left,rgba(247,203,191,1),transparent_50%),radial-gradient(ellipse_at_bottom_left,rgba(164,252,245,1),transparent_50%)]\" />\n            <IconWand className=\"relative size-4 text-black\" stroke={1.5} />\n            <span className=\"relative text-black\">Upgrade to Pro</span>\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"flex items-center gap-2 md:hidden\">\n        <ThemeToggle />\n\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon-sm\">\n              <IconDotsVertical className=\"size-4\" stroke={1.5} />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-48\">\n            <DropdownMenuItem>\n              <IconLink className=\"size-4\" stroke={1.5} />\n              <span>Share</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconWand className=\"size-4\" stroke={1.5} />\n              <span>Upgrade to Pro</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <div className=\"px-2 py-1.5\">\n              <p className=\"text-xs text-muted-foreground\">\n                {emails.length} alerts\n              </p>\n              <p className=\"text-xs text-muted-foreground\">\n                Last triage 20 min ago\n              </p>\n            </div>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/emails/emails-horizontal-nav.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/emails/components/emails/emails-horizontal-nav.tsx",
+      "content": "\"use client\"\n\nimport {\n  IconAlertTriangle,\n  IconArchive,\n  IconAsterisk,\n  IconFileText,\n  IconInbox,\n  IconMailPlus,\n  IconMenu2,\n  IconSend,\n  IconStar,\n  IconTrash,\n} from \"@tabler/icons-react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Separator } from \"@loveui/ui/ui/separator\"\n\nimport { cn } from \"../../lib/utils\"\nimport { useEmailsStore } from \"../../store/emails-store\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../ui/dropdown-menu\"\n\nexport function EmailsHorizontalNav() {\n  const { emails, currentFolder, setFolder } = useEmailsStore()\n\n  const mainFolders = [\n    {\n      id: \"inbox\",\n      label: \"Active Alerts\",\n      icon: IconInbox,\n      count: emails.length.toString() as string | undefined,\n    },\n    { id: \"sent\", label: \"Escalated\", icon: IconSend, count: undefined },\n    {\n      id: \"drafts\",\n      label: \"Draft Notes\",\n      icon: IconFileText,\n      count: undefined,\n    },\n    { id: \"starred\", label: \"Watchlist\", icon: IconStar, count: undefined },\n    { id: \"archive\", label: \"Resolved\", icon: IconArchive, count: undefined },\n  ]\n\n  const additionalFolders = [\n    { id: \"deleted\", label: \"Discarded\", icon: IconTrash, count: undefined },\n    { id: \"spam\", label: \"Noise\", icon: IconAlertTriangle, count: undefined },\n    { id: \"junk\", label: \"Low Priority\", icon: IconAsterisk, count: undefined },\n  ]\n\n  const allFolders = [...mainFolders, ...additionalFolders]\n\n  return (\n    <div className=\"flex h-[54px] items-center border-b border-border bg-background px-3 md:px-4\">\n      <div className=\"flex w-full items-center gap-2 md:gap-3\">\n        <Button\n          size=\"sm\"\n          className=\"relative h-[30px] shrink-0 overflow-hidden bg-linear-to-r from-white to-white hover:opacity-90\"\n        >\n          <div className=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(205,175,250,1),transparent_50%),radial-gradient(ellipse_at_bottom_right,rgba(129,169,248,1),transparent_50%),radial-gradient(ellipse_at_top_left,rgba(247,203,191,1),transparent_50%),radial-gradient(ellipse_at_bottom_left,rgba(164,252,245,1),transparent_50%)]\" />\n          <IconMailPlus className=\"relative size-4 text-black\" stroke={1.5} />\n          <span className=\"relative hidden text-black sm:inline\">Escalate</span>\n        </Button>\n\n        <Separator orientation=\"vertical\" className=\"hidden h-5 sm:block\" />\n\n        <div className=\"hidden flex-1 items-center gap-2.5 2xl:flex\">\n          {allFolders.map((folder) => {\n            const Icon = folder.icon\n            const isActive = currentFolder === folder.id\n\n            return (\n              <Button\n                key={folder.id}\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setFolder(folder.id as string)}\n                className={cn(\n                  \"h-[30px] gap-1.5\",\n                  isActive && \"bg-muted text-foreground hover:bg-muted\"\n                )}\n              >\n                <Icon className=\"size-4\" stroke={1.5} />\n                <span className=\"text-[13px]\">{folder.label}</span>\n                {folder.count && isActive && (\n                  <span className=\"text-[12px]\">{folder.count}</span>\n                )}\n              </Button>\n            )\n          })}\n        </div>\n\n        <div className=\"hidden flex-1 items-center gap-2.5 xl:flex 2xl:hidden\">\n          {mainFolders.map((folder) => {\n            const Icon = folder.icon\n            const isActive = currentFolder === folder.id\n\n            return (\n              <Button\n                key={folder.id}\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setFolder(folder.id as string)}\n                className={cn(\n                  \"h-[30px] gap-1.5\",\n                  isActive && \"bg-muted text-foreground hover:bg-muted\"\n                )}\n              >\n                <Icon className=\"size-4\" stroke={1.5} />\n                <span className=\"text-[13px]\">{folder.label}</span>\n                {folder.count && isActive && (\n                  <span className=\"text-[12px]\">{folder.count}</span>\n                )}\n              </Button>\n            )\n          })}\n\n          <Separator orientation=\"vertical\" className=\"h-5\" />\n\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"sm\" className=\"h-[30px] gap-1.5\">\n                <IconMenu2 className=\"size-4\" stroke={1.5} />\n                <span className=\"text-[13px]\">More</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-48\">\n              {additionalFolders.map((folder) => {\n                const Icon = folder.icon\n                const isActive = currentFolder === folder.id\n\n                return (\n                  <DropdownMenuItem\n                    key={folder.id}\n                    onClick={() => setFolder(folder.id as string)}\n                    className={cn(isActive && \"bg-muted\")}\n                  >\n                    <Icon className=\"size-4\" stroke={1.5} />\n                    <span>{folder.label}</span>\n                  </DropdownMenuItem>\n                )\n              })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"hidden flex-1 items-center gap-2.5 lg:flex xl:hidden\">\n          {mainFolders.slice(0, 3).map((folder) => {\n            const Icon = folder.icon\n            const isActive = currentFolder === folder.id\n\n            return (\n              <Button\n                key={folder.id}\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setFolder(folder.id as string)}\n                className={cn(\n                  \"h-[30px] gap-1.5\",\n                  isActive && \"bg-muted text-foreground hover:bg-muted\"\n                )}\n              >\n                <Icon className=\"size-4\" stroke={1.5} />\n                <span className=\"text-[13px]\">{folder.label}</span>\n                {folder.count && isActive && (\n                  <span className=\"text-[12px]\">{folder.count}</span>\n                )}\n              </Button>\n            )\n          })}\n\n          <Separator orientation=\"vertical\" className=\"h-5\" />\n\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"sm\" className=\"h-[30px] gap-1.5\">\n                <IconMenu2 className=\"size-4\" stroke={1.5} />\n                <span className=\"text-[13px]\">More</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-48\">\n              {mainFolders.slice(3).map((folder) => {\n                const Icon = folder.icon\n                const isActive = currentFolder === folder.id\n\n                return (\n                  <DropdownMenuItem\n                    key={folder.id}\n                    onClick={() => setFolder(folder.id as string)}\n                    className={cn(isActive && \"bg-muted\")}\n                  >\n                    <Icon className=\"size-4\" stroke={1.5} />\n                    <span>{folder.label}</span>\n                  </DropdownMenuItem>\n                )\n              })}\n              <DropdownMenuSeparator />\n              {additionalFolders.map((folder) => {\n                const Icon = folder.icon\n                const isActive = currentFolder === folder.id\n\n                return (\n                  <DropdownMenuItem\n                    key={folder.id}\n                    onClick={() => setFolder(folder.id as string)}\n                    className={cn(isActive && \"bg-muted\")}\n                  >\n                    <Icon className=\"size-4\" stroke={1.5} />\n                    <span>{folder.label}</span>\n                  </DropdownMenuItem>\n                )\n              })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"hidden flex-1 items-center gap-2 md:flex lg:hidden\">\n          {mainFolders.slice(0, 2).map((folder) => {\n            const Icon = folder.icon\n            const isActive = currentFolder === folder.id\n\n            return (\n              <Button\n                key={folder.id}\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setFolder(folder.id as string)}\n                className={cn(\n                  \"h-[30px] gap-1.5\",\n                  isActive && \"bg-muted text-foreground hover:bg-muted\"\n                )}\n              >\n                <Icon className=\"size-4\" stroke={1.5} />\n                <span className=\"text-[13px]\">{folder.label}</span>\n              </Button>\n            )\n          })}\n\n          <Separator orientation=\"vertical\" className=\"h-5\" />\n\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"sm\" className=\"h-[30px] gap-1.5\">\n                <IconMenu2 className=\"size-4\" stroke={1.5} />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-48\">\n              {mainFolders.slice(2).map((folder) => {\n                const Icon = folder.icon\n                const isActive = currentFolder === folder.id\n\n                return (\n                  <DropdownMenuItem\n                    key={folder.id}\n                    onClick={() => setFolder(folder.id as string)}\n                    className={cn(isActive && \"bg-muted\")}\n                  >\n                    <Icon className=\"size-4\" stroke={1.5} />\n                    <span>{folder.label}</span>\n                    {folder.count && isActive && (\n                      <span className=\"ml-auto text-xs text-muted-foreground\">\n                        {folder.count}\n                      </span>\n                    )}\n                  </DropdownMenuItem>\n                )\n              })}\n              <DropdownMenuSeparator />\n              {additionalFolders.map((folder) => {\n                const Icon = folder.icon\n                const isActive = currentFolder === folder.id\n\n                return (\n                  <DropdownMenuItem\n                    key={folder.id}\n                    onClick={() => setFolder(folder.id as string)}\n                    className={cn(isActive && \"bg-muted\")}\n                  >\n                    <Icon className=\"size-4\" stroke={1.5} />\n                    <span>{folder.label}</span>\n                  </DropdownMenuItem>\n                )\n              })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"flex flex-1 items-center gap-2 md:hidden\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"sm\" className=\"h-[30px] gap-1.5\">\n                <IconMenu2 className=\"size-4\" stroke={1.5} />\n                <span className=\"text-[13px]\">Folders</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-48\">\n              {mainFolders.map((folder) => {\n                const Icon = folder.icon\n                const isActive = currentFolder === folder.id\n\n                return (\n                  <DropdownMenuItem\n                    key={folder.id}\n                    onClick={() => setFolder(folder.id as string)}\n                    className={cn(isActive && \"bg-muted\")}\n                  >\n                    <Icon className=\"size-4\" stroke={1.5} />\n                    <span>{folder.label}</span>\n                    {folder.count && isActive && (\n                      <span className=\"ml-auto text-xs text-muted-foreground\">\n                        {folder.count}\n                      </span>\n                    )}\n                  </DropdownMenuItem>\n                )\n              })}\n              <DropdownMenuSeparator />\n              {additionalFolders.map((folder) => {\n                const Icon = folder.icon\n                const isActive = currentFolder === folder.id\n\n                return (\n                  <DropdownMenuItem\n                    key={folder.id}\n                    onClick={() => setFolder(folder.id as string)}\n                    className={cn(isActive && \"bg-muted\")}\n                  >\n                    <Icon className=\"size-4\" stroke={1.5} />\n                    <span>{folder.label}</span>\n                  </DropdownMenuItem>\n                )\n              })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/emails/emails-vertical-sidebar-mobile.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/emails/components/emails/emails-vertical-sidebar-mobile.tsx",
+      "content": "\"use client\"\n\nimport {\n  IconFiles,\n  IconFolder,\n  IconGitFork,\n  IconLayoutDashboard,\n  IconLifebuoy,\n  IconMail,\n  IconPlugConnected,\n  IconShield,\n  IconSparkles,\n  IconWaveSine,\n} from \"@tabler/icons-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\nimport { Button } from \"@loveui/ui/ui/button\"\n\nimport { cn } from \"../../lib/utils\"\n\ninterface EmailsVerticalSidebarMobileProps {\n  onItemClick?: () => void\n}\n\nexport function EmailsVerticalSidebarMobile({\n  onItemClick,\n}: EmailsVerticalSidebarMobileProps = {}) {\n  const topItems = [\n    { icon: IconSparkles, label: \"Automation\", active: false },\n    { icon: IconLayoutDashboard, label: \"Status\", active: false },\n    { icon: IconMail, label: \"Active Alerts\", active: true },\n    { icon: IconFolder, label: \"Runbooks\", active: false },\n    { icon: IconWaveSine, label: \"Escalated\", active: false },\n    { icon: IconGitFork, label: \"Low Priority\", active: false },\n    { icon: IconFiles, label: \"Resolved\", active: false },\n  ]\n\n  const bottomItems = [\n    { icon: IconShield, label: \"Security\" },\n    { icon: IconPlugConnected, label: \"Integrations\" },\n    { icon: IconLifebuoy, label: \"Support\" },\n  ]\n\n  return (\n    <div className=\"flex h-screen w-full flex-col items-start gap-4 border-r border-border bg-background px-3 py-4\">\n      <div className=\"flex items-center gap-2\">\n        <Button\n          variant=\"default\"\n          size=\"icon-sm\"\n          className=\"relative size-9 overflow-hidden rounded-lg bg-linear-to-br from-white via-purple-200 to-blue-200 hover:opacity-90\"\n        >\n          <div className=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(205,175,250,1),transparent_50%),radial-gradient(ellipse_at_bottom_right,rgba(129,169,248,1),transparent_50%),radial-gradient(ellipse_at_top_left,rgba(247,203,191,1),transparent_50%),radial-gradient(ellipse_at_bottom_left,rgba(164,252,245,1),transparent_50%)]\" />\n          <svg className=\"relative size-4\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <path\n              d=\"M8 2L2 8L8 14\"\n              stroke=\"black\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n            <path\n              d=\"M8 2L14 8L8 14\"\n              stroke=\"black\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </Button>\n        <div className=\"flex flex-col justify-center\">\n          <span className=\"text-sm font-semibold text-foreground\">\n            OpsBridge\n          </span>\n          <span className=\"text-xs text-muted-foreground\">incident center</span>\n        </div>\n      </div>\n\n      <div className=\"flex w-full flex-col gap-1\">\n        {topItems.map((item) => (\n          <Button\n            key={item.label}\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={onItemClick}\n            className={cn(\n              \"w-full justify-start gap-2 px-3\",\n              item.active && \"bg-muted text-foreground hover:bg-muted\"\n            )}\n          >\n            <item.icon className=\"size-4 shrink-0\" stroke={1.5} />\n            <span className=\"text-sm\">{item.label}</span>\n          </Button>\n        ))}\n      </div>\n\n      <div className=\"flex-1\" />\n\n      <div className=\"flex w-full flex-col gap-1\">\n        {bottomItems.map((item) => (\n          <Button\n            key={item.label}\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={onItemClick}\n            className=\"w-full justify-start gap-2 px-3 text-muted-foreground\"\n          >\n            <item.icon className=\"size-4 shrink-0\" stroke={1.5} />\n            <span className=\"text-sm\">{item.label}</span>\n          </Button>\n        ))}\n      </div>\n\n      <Button\n        variant=\"ghost\"\n        className=\"h-auto w-full justify-start gap-2 px-3 py-2\"\n      >\n        <Avatar className=\"size-8 shrink-0 rounded-lg\">\n          <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=User\" />\n          <AvatarFallback>U</AvatarFallback>\n        </Avatar>\n        <div className=\"flex flex-col items-start text-left\">\n          <span className=\"text-xs font-medium text-foreground\">Ava Patel</span>\n          <span className=\"text-[10px] text-muted-foreground\">\n            ava.patel@opsbridge.io\n          </span>\n        </div>\n      </Button>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/emails/emails-vertical-sidebar.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/emails/components/emails/emails-vertical-sidebar.tsx",
+      "content": "\"use client\"\n\nimport {\n  IconFiles,\n  IconFolder,\n  IconGitFork,\n  IconLayoutDashboard,\n  IconLifebuoy,\n  IconMail,\n  IconPlugConnected,\n  IconShield,\n  IconSparkles,\n  IconWaveSine,\n} from \"@tabler/icons-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\nimport { Button } from \"@loveui/ui/ui/button\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/tooltip\"\n\ninterface EmailsVerticalSidebarProps {\n  onItemClick?: () => void\n}\n\nexport function EmailsVerticalSidebar({\n  onItemClick,\n}: EmailsVerticalSidebarProps = {}) {\n  const topIcons = [\n    { icon: IconSparkles, label: \"Automation\", active: false },\n    { icon: IconLayoutDashboard, label: \"Status\", active: false },\n    { icon: IconMail, label: \"Incidents\", active: true },\n    { icon: IconFolder, label: \"Runbooks\", active: false },\n    { icon: IconWaveSine, label: \"Metrics\", active: false },\n    { icon: IconGitFork, label: \"Deploys\", active: false },\n    { icon: IconFiles, label: \"Reports\", active: false },\n  ]\n\n  const bottomIcons = [\n    { icon: IconShield, label: \"Security\" },\n    { icon: IconPlugConnected, label: \"Integrations\" },\n    { icon: IconLifebuoy, label: \"Support\" },\n  ]\n\n  return (\n    <div className=\"flex h-screen w-14 flex-col items-center gap-4 border-r border-border bg-background py-4\">\n      <Button\n        variant=\"default\"\n        size=\"icon-sm\"\n        className=\"relative mb-2 size-8 overflow-hidden rounded-lg bg-linear-to-br from-white via-purple-200 to-blue-200 hover:opacity-90\"\n      >\n        <div className=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(205,175,250,1),transparent_50%),radial-gradient(ellipse_at_bottom_right,rgba(129,169,248,1),transparent_50%),radial-gradient(ellipse_at_top_left,rgba(247,203,191,1),transparent_50%),radial-gradient(ellipse_at_bottom_left,rgba(164,252,245,1),transparent_50%)]\" />\n        <svg className=\"relative size-4\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M8 2L2 8L8 14\"\n            stroke=\"black\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n          <path\n            d=\"M8 2L14 8L8 14\"\n            stroke=\"black\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </Button>\n\n      <div className=\"flex flex-col gap-2\">\n        {topIcons.map((item) => (\n          <Tooltip key={item.label}>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={onItemClick}\n                className={cn(\n                  \"size-8\",\n                  item.active && \"bg-muted text-foreground hover:bg-muted\"\n                )}\n              >\n                <item.icon className=\"size-4\" stroke={1.5} />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{item.label}</TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n\n      <div className=\"flex-1\" />\n\n      <div className=\"flex flex-col gap-2\">\n        {bottomIcons.map((item) => (\n          <Tooltip key={item.label}>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={onItemClick}\n                className=\"size-8 text-muted-foreground\"\n              >\n                <item.icon className=\"size-4\" stroke={1.5} />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{item.label}</TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n\n      <Avatar className=\"size-8 cursor-pointer\">\n        <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=User\" />\n        <AvatarFallback>U</AvatarFallback>\n      </Avatar>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/theme-provider.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/emails/components/theme-provider.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\"\n\nexport function ThemeProvider({\n  children,\n  ...props\n}: React.ComponentProps<typeof NextThemesProvider>) {\n  return <NextThemesProvider {...props}>{children}</NextThemesProvider>\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/theme-toggle.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/emails/components/theme-toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { IconMoon, IconSun } from \"@tabler/icons-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"./ui/dropdown-menu\"\n\nexport function ThemeToggle() {\n  const { setTheme } = useTheme()\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" size=\"icon-sm\" className=\"size-8\">\n          <IconSun className=\"size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\" />\n          <IconMoon className=\"absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\" />\n          <span className=\"sr-only\">Toggle theme</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n          Light\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n          Dark\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n          System\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/alert-dialog.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/alert-dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/avatar.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/avatar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Avatar = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"relative flex size-10 shrink-0 overflow-hidden rounded-full\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatar.displayName = \"Avatar\"\n\nconst AvatarImage = React.forwardRef<\n  HTMLImageElement,\n  React.ImgHTMLAttributes<HTMLImageElement>\n>(({ className, src, alt, ...props }, ref) => {\n  const [hasError, setHasError] = React.useState(false)\n\n  if (!src || hasError) {\n    return null\n  }\n\n  return (\n    <img\n      ref={ref}\n      src={src}\n      alt={alt}\n      onError={() => setHasError(true)}\n      className={cn(\"aspect-square size-full object-cover\", className)}\n      {...props}\n    />\n  )\n})\nAvatarImage.displayName = \"AvatarImage\"\n\nconst AvatarFallback = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"flex size-full items-center justify-center rounded-full bg-muted text-sm font-medium\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatarFallback.displayName = \"AvatarFallback\"\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/badge.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/badge.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...(props as any)}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/button.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/button.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-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-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...(props as any)}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/card.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/combobox.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/combobox.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\nimport { IconCheck, IconChevronDown, IconX } from \"@tabler/icons-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconChevronDown className=\"pointer-events-none size-4 text-muted-foreground\" />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconX className=\"pointer-events-none\" />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 group/combobox-content relative max-h-(--available-height) max-h-72 w-(--anchor-width) max-w-(--available-width) min-w-36 min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <IconCheck className=\"pointer-events-none\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconX className=\"pointer-events-none\" />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/drawer.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Drawer = Dialog.Root\n\nconst DrawerTrigger = Dialog.Trigger\n\nconst DrawerClose = Dialog.Close\n\nconst DrawerPortal = Dialog.Portal\n\nconst DrawerOverlay = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof Dialog.Backdrop>\n>(({ className, ...props }, ref) => (\n  <Dialog.Backdrop\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80 transition-opacity duration-300 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n      className\n    )}\n    {...props}\n  />\n))\nDrawerOverlay.displayName = \"DrawerOverlay\"\n\nconst DrawerContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof Dialog.Popup> & {\n    children?: React.ReactNode\n  }\n>(({ className, children, ...props }, ref) => (\n  <DrawerPortal>\n    <DrawerOverlay />\n    <Dialog.Popup\n      ref={ref}\n      className={cn(\n        \"fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-[10px] border bg-background transition-transform duration-300 ease-out data-[ending-style]:translate-y-full data-[starting-style]:translate-y-full\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      {children}\n    </Dialog.Popup>\n  </DrawerPortal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n)\nDrawerHeader.displayName = \"DrawerHeader\"\n\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n)\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.ComponentPropsWithoutRef<typeof Dialog.Title>\n>(({ className, ...props }, ref) => (\n  <Dialog.Title\n    ref={ref}\n    className={cn(\n      \"text-lg leading-none font-semibold tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDrawerTitle.displayName = \"DrawerTitle\"\n\nconst DrawerDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<typeof Dialog.Description>\n>(({ className, ...props }, ref) => (\n  <Dialog.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDrawerDescription.displayName = \"DrawerDescription\"\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/dropdown-menu.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { IconCheck, IconChevronRight } from \"@tabler/icons-react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconCheck />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconCheck />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/field.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/field.tsx",
+      "content": "\"use client\"\n\nimport { useMemo, type ComponentPropsWithoutRef, type ReactNode } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Label } from \"./label\"\nimport { Separator } from \"./separator\"\n\nfunction FieldSet({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: ComponentPropsWithoutRef<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ComponentPropsWithoutRef<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border dark:has-data-checked:bg-primary/10 [&>*]:data-[slot=field]:p-3\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: ComponentPropsWithoutRef<\"div\"> & {\n  children?: ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: ComponentPropsWithoutRef<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/input-group.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/input-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/input.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/input.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/label.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/label.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/select.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/select.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  IconCheck,\n  IconChevronDown,\n  IconChevronUp,\n  IconSelector,\n} from \"@tabler/icons-react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconSelector className=\"pointer-events-none size-4 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconCheck className=\"pointer-events-none\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconChevronUp />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconChevronDown />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/separator.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/separator.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/sheet.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog } from \"@base-ui/react/dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Sheet = Dialog.Root\n\nconst SheetTrigger = Dialog.Trigger\n\nconst SheetClose = Dialog.Close\n\nconst SheetPortal = Dialog.Portal\n\nconst SheetOverlay = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof Dialog.Backdrop>\n>(({ className, ...props }, ref) => (\n  <Dialog.Backdrop\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80 transition-opacity duration-300 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n      className\n    )}\n    {...props}\n  />\n))\nSheetOverlay.displayName = \"SheetOverlay\"\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition-transform duration-300 ease-out\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[ending-style]:-translate-y-full data-[starting-style]:-translate-y-full\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[ending-style]:translate-y-full data-[starting-style]:translate-y-full\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof Dialog.Popup>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(\n  ({ side = \"right\", className, children, ...props }, ref) => (\n    <SheetPortal>\n      <SheetOverlay />\n      <Dialog.Popup\n        ref={ref}\n        className={cn(sheetVariants({ side }), className)}\n        {...props}\n      >\n        {children}\n      </Dialog.Popup>\n    </SheetPortal>\n  )\n)\nSheetContent.displayName = \"SheetContent\"\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.ComponentPropsWithoutRef<typeof Dialog.Title>\n>(({ className, ...props }, ref) => (\n  <Dialog.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = \"SheetTitle\"\n\nconst SheetDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<typeof Dialog.Description>\n>(({ className, ...props }, ref) => (\n  <Dialog.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = \"SheetDescription\"\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/textarea.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/textarea.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/tooltip.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/tooltip.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst TooltipProvider = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> & {\n    asChild?: boolean\n  }\n>(({ asChild, children, ...props }, ref) => {\n  if (asChild && React.isValidElement(children)) {\n    return <TooltipPrimitive.Trigger ref={ref} render={children} {...props} />\n  }\n  return (\n    <TooltipPrimitive.Trigger ref={ref} {...props}>\n      {children}\n    </TooltipPrimitive.Trigger>\n  )\n})\nTooltipTrigger.displayName = \"TooltipTrigger\"\n\nconst TooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Popup> & {\n    side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  }\n>(({ className, side = \"top\", ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Positioner side={side} sideOffset={4}>\n      <TooltipPrimitive.Popup\n        ref={ref}\n        className={cn(\n          \"animate-in fade-in-0 zoom-in-95 z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground\",\n          className\n        )}\n        {...props}\n      />\n    </TooltipPrimitive.Positioner>\n  </TooltipPrimitive.Portal>\n))\nTooltipContent.displayName = \"TooltipContent\"\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/components/ui/verified-icon.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/emails/components/ui/verified-icon.tsx",
+      "content": "export function VerifiedIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n    >\n      <path\n        d=\"M14.0879 6.41437C13.8528 6.1686 13.6095 5.91535 13.5178 5.69267C13.433 5.4887 13.428 5.15061 13.423 4.82314C13.4136 4.21434 13.4037 3.52446 12.924 3.04478C12.4443 2.5651 11.7544 2.55512 11.1456 2.54577C10.8181 2.54078 10.4801 2.53579 10.2761 2.45095C10.054 2.35926 9.80015 2.11599 9.55439 1.88083C9.12399 1.46727 8.63496 0.998825 7.98374 0.998825C7.33253 0.998825 6.84412 1.46727 6.4131 1.88083C6.16734 2.11599 5.91409 2.35926 5.6914 2.45095C5.48868 2.53579 5.14935 2.54078 4.82187 2.54577C4.21307 2.55512 3.52319 2.5651 3.04351 3.04478C2.56384 3.52446 2.55697 4.21434 2.5445 4.82314C2.53951 5.15061 2.53452 5.4887 2.44969 5.69267C2.35799 5.91473 2.11472 6.1686 1.87956 6.41437C1.46601 6.84476 0.997559 7.3338 0.997559 7.98501C0.997559 8.63622 1.46601 9.12463 1.87956 9.55565C2.11472 9.80142 2.35799 10.0547 2.44969 10.2774C2.53452 10.4813 2.53951 10.8194 2.5445 11.1469C2.55386 11.7557 2.56384 12.4456 3.04351 12.9252C3.52319 13.4049 4.21307 13.4149 4.82187 13.4243C5.14935 13.4292 5.48743 13.4342 5.6914 13.5191C5.91346 13.6108 6.16734 13.854 6.4131 14.0892C6.8435 14.5027 7.33253 14.9712 7.98374 14.9712C8.63496 14.9712 9.12336 14.5027 9.55439 14.0892C9.80015 13.854 10.0534 13.6108 10.2761 13.5191C10.4801 13.4342 10.8181 13.4292 11.1456 13.4243C11.7544 13.4149 12.4443 13.4049 12.924 12.9252C13.4037 12.4456 13.4136 11.7557 13.423 11.1469C13.428 10.8194 13.433 10.4813 13.5178 10.2774C13.6095 10.0553 13.8528 9.80142 14.0879 9.55565C14.5015 9.12525 14.9699 8.63622 14.9699 7.98501C14.9699 7.3338 14.5015 6.84539 14.0879 6.41437ZM10.8319 6.84102L7.33877 10.3341C7.29242 10.3805 7.23739 10.4173 7.17681 10.4424C7.11623 10.4675 7.05129 10.4805 6.98572 10.4805C6.92014 10.4805 6.8552 10.4675 6.79462 10.4424C6.73405 10.4173 6.67901 10.3805 6.63266 10.3341L5.13563 8.83707C5.04199 8.74344 4.98939 8.61644 4.98939 8.48402C4.98939 8.3516 5.04199 8.22461 5.13563 8.13097C5.22926 8.03734 5.35626 7.98473 5.48868 7.98473C5.6211 7.98473 5.74809 8.03734 5.84173 8.13097L6.98572 9.27558L10.1258 6.13492C10.1721 6.08855 10.2272 6.05178 10.2877 6.02669C10.3483 6.00159 10.4132 5.98868 10.4788 5.98868C10.5444 5.98868 10.6093 6.00159 10.6699 6.02669C10.7305 6.05178 10.7855 6.08855 10.8319 6.13492C10.8782 6.18128 10.915 6.23632 10.9401 6.2969C10.9652 6.35748 10.9781 6.4224 10.9781 6.48797C10.9781 6.55354 10.9652 6.61846 10.9401 6.67904C10.915 6.73962 10.8782 6.79466 10.8319 6.84102Z\"\n        fill=\"#38BDF8\"\n      />\n    </svg>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/hooks/use-mobile.ts",
+      "type": "registry:hook",
+      "target": "components/example-apps/emails/hooks/use-mobile.ts",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return isMobile\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/index.tsx",
+      "type": "registry:file",
+      "target": "components/example-apps/emails/index.tsx",
+      "content": "/**\n * Wrapper export for embedding the app in the docs app\n */\n\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\n\nimport { Sheet, SheetContent } from \"@loveui/ui/ui/sheet\"\n\nimport { EmailDetail } from \"./components/emails/email-detail\"\nimport { EmailList } from \"./components/emails/email-list\"\nimport { EmailsHeader } from \"./components/emails/emails-header\"\nimport { EmailsHorizontalNav } from \"./components/emails/emails-horizontal-nav\"\nimport { EmailsVerticalSidebar } from \"./components/emails/emails-vertical-sidebar\"\nimport { EmailsVerticalSidebarMobile } from \"./components/emails/emails-vertical-sidebar-mobile\"\nimport { Drawer, DrawerContent } from \"./components/ui/drawer\"\nimport { TooltipProvider } from \"./components/ui/tooltip\"\nimport { useIsMobile } from \"./hooks/use-mobile\"\nimport { useEmailsStore } from \"./store/emails-store\"\n\nexport default function EmailsWrapper() {\n  const { emails, selectedEmailId, selectEmail, clearSelectedEmail } =\n    useEmailsStore()\n  const isMobile = useIsMobile()\n  const [drawerOpen, setDrawerOpen] = useState(false)\n  const [sidebarOpen, setSidebarOpen] = useState(false)\n  const hasInitializedRef = useRef(false)\n\n  useEffect(() => {\n    if (\n      isMobile !== undefined &&\n      !isMobile &&\n      emails.length > 0 &&\n      !selectedEmailId &&\n      !hasInitializedRef.current\n    ) {\n      selectEmail(emails[0].id)\n      hasInitializedRef.current = true\n    }\n  }, [emails, selectedEmailId, selectEmail, isMobile])\n\n  const handleEmailClick = (emailId: string) => {\n    if (isMobile) {\n      selectEmail(emailId)\n      setDrawerOpen(true)\n    }\n  }\n\n  const handleDrawerClose = (open: boolean) => {\n    setDrawerOpen(open)\n    if (!open) {\n      clearSelectedEmail()\n    }\n  }\n\n  return (\n    <TooltipProvider>\n      <div className=\"flex h-full min-h-0 overflow-hidden bg-background\">\n        <div className=\"hidden md:block\">\n          <EmailsVerticalSidebar />\n        </div>\n\n        <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>\n          <SheetContent\n            side=\"left\"\n            className=\"w-[240px] border-none p-0 [&>button]:hidden\"\n          >\n            <EmailsVerticalSidebarMobile\n              onItemClick={() => setSidebarOpen(false)}\n            />\n          </SheetContent>\n        </Sheet>\n\n        <div className=\"flex flex-1 flex-col overflow-hidden\">\n          <EmailsHeader onMobileMenuClick={() => setSidebarOpen(true)} />\n\n          <div className=\"hidden md:block\">\n            <EmailsHorizontalNav />\n          </div>\n\n          <div className=\"flex flex-1 overflow-hidden\">\n            <div className=\"w-full border-r border-border md:w-[320px]\">\n              <EmailList onEmailClick={handleEmailClick} />\n            </div>\n\n            <div className=\"hidden flex-1 md:block\">\n              <EmailDetail />\n            </div>\n          </div>\n        </div>\n\n        <Drawer open={drawerOpen} onOpenChange={handleDrawerClose}>\n          <DrawerContent className=\"h-[90vh]\">\n            <div className=\"f-full flex-1 overflow-hidden\">\n              <EmailDetail />\n            </div>\n          </DrawerContent>\n        </Drawer>\n      </div>\n    </TooltipProvider>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/lib/utils.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/emails/lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/mock-data/emails.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/emails/mock-data/emails.ts",
+      "content": "import { Label, labels } from \"./labels\"\nimport { User, users } from \"./users\"\n\nexport interface Email {\n  id: string\n  from: User\n  to: User[]\n  subject: string\n  body: string\n  date: Date\n  read: boolean\n  starred: boolean\n  labels: Label[]\n  hasAttachments: boolean\n  attachments?: {\n    id: string\n    name: string\n    size: string\n    type: string\n  }[]\n}\n\nexport const emails: Email[] = [\n  {\n    id: \"1\",\n    from: users[1],\n    to: [users[0]],\n    subject: \"[SEV-1] Checkout API latency above 2.8s\",\n    body: `Trigger: p95 latency crossed 2.8s for 7 minutes in us-east-1.\n\nCurrent impact:\n- 14% of requests timing out\n- Retries up 3.2x\n- Cart updates delayed for mobile users\n\nPrimary runbook and dashboards are attached.\nPlease acknowledge within 5 minutes.`,\n    date: new Date(\"2026-02-18T09:12:00\"),\n    read: false,\n    starred: true,\n    labels: [labels[2], labels[0]],\n    hasAttachments: true,\n    attachments: [\n      {\n        id: \"att1\",\n        name: \"checkout-latency-runbook.pdf\",\n        size: \"1.1 MB\",\n        type: \"application/pdf\",\n      },\n      {\n        id: \"att2\",\n        name: \"grafana-snapshot.png\",\n        size: \"2.6 MB\",\n        type: \"image/png\",\n      },\n    ],\n  },\n  {\n    id: \"2\",\n    from: users[3],\n    to: [users[0]],\n    subject: \"Mitigation applied: cache warm-up completed\",\n    body: `Quick update from SRE:\n\n- Increased edge cache TTL for product metadata\n- Warmed top 5,000 keys\n- Error rate dropped from 5.6% to 1.2%\n\nContinuing to monitor for the next 30 minutes before full resolution call.`,\n    date: new Date(\"2026-02-18T09:34:00\"),\n    read: false,\n    starred: true,\n    labels: [labels[0]],\n    hasAttachments: false,\n  },\n  {\n    id: \"3\",\n    from: users[2],\n    to: [users[0]],\n    subject: \"CPU anomaly detected on payments-worker-04\",\n    body: `CloudWatch detected sustained CPU > 92% on payments-worker-04.\n\nTimeline:\n- Spike began at 08:41 UTC\n- Queue depth currently 11,238 messages\n- No packet loss observed\n\nSuggested action: drain node and shift traffic to warm standby.`,\n    date: new Date(\"2026-02-18T08:47:00\"),\n    read: true,\n    starred: false,\n    labels: [labels[1]],\n    hasAttachments: true,\n    attachments: [\n      {\n        id: \"att3\",\n        name: \"cw-metrics-export.csv\",\n        size: \"486 KB\",\n        type: \"text/csv\",\n      },\n    ],\n  },\n  {\n    id: \"4\",\n    from: users[5],\n    to: [users[0]],\n    subject: \"Security watch: suspicious auth bursts blocked\",\n    body: `SOC bot blocked 1,842 suspicious auth attempts in 12 minutes.\n\nNotes:\n- Source ASN matches previously flagged botnet\n- No successful account takeover observed\n- Temporary WAF rule auto-deployed\n\nPlease review the incident card for rule expiry timing.`,\n    date: new Date(\"2026-02-18T07:58:00\"),\n    read: true,\n    starred: false,\n    labels: [labels[1], labels[0]],\n    hasAttachments: true,\n    attachments: [\n      {\n        id: \"att4\",\n        name: \"waf-rule-diff.json\",\n        size: \"92 KB\",\n        type: \"application/json\",\n      },\n    ],\n  },\n  {\n    id: \"5\",\n    from: users[4],\n    to: [users[0]],\n    subject: \"On-call handoff notes for Feb 18\",\n    body: `Good morning team,\n\nHandoff summary:\n- Active: checkout latency (SEV-1) with mitigation in progress\n- Monitoring: auth burst pattern, no customer impact\n- Planned: rotate Redis credentials at 14:00 UTC\n\nEscalation tree and backup contacts attached.`,\n    date: new Date(\"2026-02-18T07:15:00\"),\n    read: false,\n    starred: false,\n    labels: [labels[0]],\n    hasAttachments: true,\n    attachments: [\n      {\n        id: \"att5\",\n        name: \"handoff-sheet-feb18.xlsx\",\n        size: \"214 KB\",\n        type: \"application/vnd.ms-excel\",\n      },\n      {\n        id: \"att6\",\n        name: \"escalation-tree.pdf\",\n        size: \"744 KB\",\n        type: \"application/pdf\",\n      },\n    ],\n  },\n  {\n    id: \"6\",\n    from: users[0],\n    to: [users[3]],\n    subject: \"Need confirmation: rollback window at 09:45 UTC\",\n    body: `Kim,\n\nPlease confirm if we can safely open a rollback window at 09:45 UTC for checkout-service.\nI need your go/no-go note before I notify leadership.\n\nThanks,\nAva`,\n    date: new Date(\"2026-02-18T06:58:00\"),\n    read: true,\n    starred: false,\n    labels: [labels[0]],\n    hasAttachments: false,\n  },\n  {\n    id: \"7\",\n    from: users[1],\n    to: [users[0]],\n    subject: \"Resolved: search cluster memory pressure\",\n    body: `Incident RES-4821 closed.\n\nRoot cause:\n- Memory leak in query expansion worker after dependency update.\n\nFix:\n- Rolled back worker image to 2.9.14\n- Added guardrail alert on heap delta > 12%\n\nPostmortem scheduled for Friday.`,\n    date: new Date(\"2026-02-17T18:20:00\"),\n    read: true,\n    starred: false,\n    labels: [labels[1]],\n    hasAttachments: true,\n    attachments: [\n      {\n        id: \"att7\",\n        name: \"res-4821-postmortem-draft.docx\",\n        size: \"136 KB\",\n        type: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n      },\n    ],\n  },\n  {\n    id: \"8\",\n    from: users[5],\n    to: [users[0]],\n    subject: \"Credential rotation reminder: staging + production\",\n    body: `Reminder from Security Response Bot:\n\nQuarterly credential rotation is due this week.\nTargets:\n- staging/api-gateway\n- prod/redis-cache\n- prod/payments-webhook\n\nRunbook includes zero-downtime sequence.`,\n    date: new Date(\"2026-02-17T14:05:00\"),\n    read: false,\n    starred: true,\n    labels: [labels[0]],\n    hasAttachments: true,\n    attachments: [\n      {\n        id: \"att8\",\n        name: \"credential-rotation-runbook.pdf\",\n        size: \"928 KB\",\n        type: \"application/pdf\",\n      },\n    ],\n  },\n  {\n    id: \"9\",\n    from: users[2],\n    to: [users[0]],\n    subject: \"Daily uptime digest\",\n    body: `24h platform digest:\n\n- API availability: 99.96%\n- Mean incident acknowledgment: 4m 13s\n- Mean incident resolution: 31m 42s\n- Error budget burn: 12.4%\n\nNo unresolved critical alerts at report generation time.`,\n    date: new Date(\"2026-02-17T09:00:00\"),\n    read: true,\n    starred: false,\n    labels: [labels[0]],\n    hasAttachments: false,\n  },\n  {\n    id: \"10\",\n    from: users[3],\n    to: [users[0]],\n    subject: \"Request: add runbook step for feature flag fallback\",\n    body: `During yesterday's incident we lost 6 minutes deciding between rollback and feature flag fallback.\n\nProposal:\n1. Add explicit flag fallback step after cache purge.\n2. Include owner + confirmation checklist.\n3. Add command snippets for both regions.\n\nCan you review by end of day?`,\n    date: new Date(\"2026-02-16T17:25:00\"),\n    read: false,\n    starred: false,\n    labels: [labels[1]],\n    hasAttachments: false,\n  },\n  {\n    id: \"11\",\n    from: users[4],\n    to: [users[0]],\n    subject: \"Coverage update: weekend on-call swap approved\",\n    body: `Coverage update:\n\n- Saturday primary: Kim\n- Saturday backup: Ava\n- Sunday primary: Nora\n- Sunday backup: Theo\n\nCalendar and pager routing are now synced.`,\n    date: new Date(\"2026-02-16T12:10:00\"),\n    read: true,\n    starred: false,\n    labels: [labels[0]],\n    hasAttachments: true,\n    attachments: [\n      {\n        id: \"att9\",\n        name: \"weekend-coverage.ics\",\n        size: \"9 KB\",\n        type: \"text/calendar\",\n      },\n    ],\n  },\n  {\n    id: \"12\",\n    from: users[0],\n    to: [users[1], users[3]],\n    subject: \"Post-incident action items approved\",\n    body: `Approved action items for checkout latency incident:\n\n1. Add queue depth saturation alert at 8k.\n2. Add canary gate for cache dependency changes.\n3. Document fallback query path in on-call handbook.\n4. Run chaos replay in staging on Wednesday.\n\nPlease confirm owners in the tracker thread.`,\n    date: new Date(\"2026-02-16T08:42:00\"),\n    read: true,\n    starred: true,\n    labels: [labels[2], labels[1]],\n    hasAttachments: true,\n    attachments: [\n      {\n        id: \"att10\",\n        name: \"action-items-checkout.md\",\n        size: \"22 KB\",\n        type: \"text/markdown\",\n      },\n    ],\n  },\n]\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/mock-data/labels.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/emails/mock-data/labels.ts",
+      "content": "export interface Label {\n  id: string\n  name: string\n  color: string\n}\n\nexport const labels: Label[] = [\n  {\n    id: \"ops\",\n    name: \"Ops\",\n    color: \"bg-blue-100 text-blue-700 dark:bg-blue-950/50 dark:text-blue-400\",\n  },\n  {\n    id: \"investigation\",\n    name: \"Investigation\",\n    color:\n      \"bg-green-100 text-green-700 dark:bg-green-950/50 dark:text-green-400\",\n  },\n  {\n    id: \"sev1\",\n    name: \"SEV-1\",\n    color: \"bg-red-100 text-red-700 dark:bg-red-950/50 dark:text-red-400\",\n  },\n]\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/mock-data/users.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/emails/mock-data/users.ts",
+      "content": "export interface User {\n  id: string\n  name: string\n  email: string\n  avatar: string\n  verified?: boolean\n}\n\nexport const users: User[] = [\n  {\n    id: \"1\",\n    name: \"Ava Patel\",\n    email: \"ava.patel@opsbridge.io\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=Ava Patel\",\n    verified: true,\n  },\n  {\n    id: \"2\",\n    name: \"PagerDuty Alerts\",\n    email: \"alerts@pagerduty.com\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=PagerDuty\",\n    verified: true,\n  },\n  {\n    id: \"3\",\n    name: \"CloudWatch Monitor\",\n    email: \"monitor@aws.amazon.com\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=CloudWatch\",\n    verified: false,\n  },\n  {\n    id: \"4\",\n    name: \"Kim from SRE\",\n    email: \"kim.sre@opsbridge.io\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=Kim SRE\",\n    verified: true,\n  },\n  {\n    id: \"5\",\n    name: \"On-Call Scheduler\",\n    email: \"schedule@opsbridge.io\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=On Call Scheduler\",\n    verified: true,\n  },\n  {\n    id: \"6\",\n    name: \"Security Response Bot\",\n    email: \"soc-bot@opsbridge.io\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=SOC Bot\",\n    verified: false,\n  },\n]\n\nexport const currentUser = users[0]\n"
+    },
+    {
+      "path": "registry/example-apps/default/emails/store/emails-store.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/emails/store/emails-store.ts",
+      "content": "import { create } from \"zustand\"\n\nimport { Email, emails } from \"../mock-data/emails\"\n\ninterface EmailsState {\n  emails: Email[]\n  selectedEmailId: string | null\n  currentFolder: string\n  selectEmail: (id: string) => void\n  markAsRead: (id: string) => void\n  markAsUnread: (id: string) => void\n  toggleStar: (id: string) => void\n  setFolder: (folder: string) => void\n  clearSelectedEmail: () => void\n}\n\nexport const useEmailsStore = create<EmailsState>((set) => ({\n  emails: emails,\n  selectedEmailId: null,\n  currentFolder: \"inbox\",\n\n  selectEmail: (id) =>\n    set((state) => {\n      const email = state.emails.find((e) => e.id === id)\n      if (email && !email.read) {\n        const updatedEmails = state.emails.map((e) =>\n          e.id === id ? { ...e, read: true } : e\n        )\n        return { emails: updatedEmails, selectedEmailId: id }\n      }\n      return { selectedEmailId: id }\n    }),\n\n  markAsRead: (id) =>\n    set((state) => ({\n      emails: state.emails.map((e) => (e.id === id ? { ...e, read: true } : e)),\n    })),\n\n  markAsUnread: (id) =>\n    set((state) => ({\n      emails: state.emails.map((e) =>\n        e.id === id ? { ...e, read: false } : e\n      ),\n    })),\n\n  toggleStar: (id) =>\n    set((state) => ({\n      emails: state.emails.map((e) =>\n        e.id === id ? { ...e, starred: !e.starred } : e\n      ),\n    })),\n\n  setFolder: (folder) => set({ currentFolder: folder }),\n\n  clearSelectedEmail: () => set({ selectedEmailId: null }),\n}))\n"
+    }
+  ],
+  "categories": [
+    "example-app",
+    "productivity",
+    "incident",
+    "operations",
+    "alerts",
+    "inbox"
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@tabler/icons-react",
+    "class-variance-authority",
+    "clsx",
+    "date-fns",
+    "next-themes",
+    "radix-ui",
+    "tailwind-merge",
+    "zustand"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/avatar.json",
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/separator.json",
+    "https://www.loveui.dev/r/sheet.json"
+  ],
+  "meta": {
+    "source": "example-app",
+    "appName": "emails",
+    "routes": [
+      {
+        "path": "/",
+        "title": "Active Alerts",
+        "description": "Main incident inbox with alert detail"
+      }
+    ]
+  }
+}

package/public/r/empty-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/empty-demo.tsx",
-      "content": "import { BookIcon, RouteIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/default/ui/empty\"\n\nexport default function EmptyDemo() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <RouteIcon />\n        </EmptyMedia>\n        <EmptyTitle>No upcoming meetings</EmptyTitle>\n        <EmptyDescription>Create a meeting to get started.</EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <div className=\"flex gap-2\">\n          <Button size=\"sm\">Create meeting</Button>\n          <Button variant=\"outline\" size=\"sm\">\n            <BookIcon className=\"opacity-72\" />\n            View docs\n          </Button>\n        </div>\n      </EmptyContent>\n    </Empty>\n  )\n}\n",
+      "content": "import { BookIcon, RouteIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/default/ui/empty\"\n\nexport default function EmptyDemo() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <RouteIcon />\n        </EmptyMedia>\n        <EmptyTitle>Updated No upcoming meetings</EmptyTitle>\n        <EmptyDescription>\n          Updated Create a meeting to get started.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <div className=\"flex gap-2\">\n          <Button size=\"sm\">Updated Create meeting</Button>\n          <Button variant=\"outline\" size=\"sm\">\n            <BookIcon className=\"opacity-72\" />\n            Updated View docs\n          </Button>\n        </div>\n      </EmptyContent>\n    </Empty>\n  )\n}\n",
       "type": "registry:example"
     }
   ],