@allbluecn/admin-app 0.2.5 → 0.3.0

package/src/components/dependency/dependency-table.tsx

@@ -22,7 +22,7 @@ import {
   useTable,
   type PaginationState,
 } from "@tanstack/react-table"
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 import { RefreshCw, Search, TriangleAlert, Loader2 } from "lucide-react"
 import {
   DEPENDENCY_CATEGORIES,
@@ -231,7 +231,7 @@ export function DependencyTable({
             className="h-9 w-56 pl-8"
           />
         </div>
-        <Select value={viewFilter} onValueChange={(v: string) => setViewFilter(v as "watched" | "all")}>
+        <Select value={viewFilter} onValueChange={(v) => setViewFilter((v ?? "watched") as "watched" | "all")}>
           <SelectTrigger className="h-9 w-32" size="sm">
             <SelectValue />
           </SelectTrigger>

package/src/components/dependency/edit-dialog.tsx

@@ -17,7 +17,7 @@
 
 import { useState } from "react"
 import { m } from '@/paraglide/messages.js'
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 import { Loader2, Pencil } from "lucide-react"
 import {
   DEPENDENCY_CATEGORIES,
@@ -83,11 +83,9 @@ export function EditDependencyDialog({
   if (row.id.startsWith("untracked:")) {
     return (
       <Tooltip>
-        <TooltipTrigger asChild>
-          <span>
+        <TooltipTrigger render={<span />}>
             <Pencil className="size-3.5 text-muted-foreground/50" />
-          </span>
-        </TooltipTrigger>
+          </TooltipTrigger>
         <TooltipContent>{m.common_dependency_edit_untracked()}</TooltipContent>
       </Tooltip>
     )
@@ -95,11 +93,9 @@ export function EditDependencyDialog({
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button size="sm" variant="ghost" className="size-7 p-0" title={m.common_common_edit()}>
+      <DialogTrigger render={<Button size="sm" variant="ghost" className="size-7 p-0" title={m.common_common_edit()} />}>
           <Pencil className="size-3.5" />
-        </Button>
-      </DialogTrigger>
+        </DialogTrigger>
       <DialogContent className="max-w-md">
         <DialogHeader>
           <DialogTitle>{m.common_dependency_edit_dialogTitle({ name: row.name })}</DialogTitle>
@@ -131,7 +127,7 @@ export function EditDependencyDialog({
               <Label>{m.common_dependency_edit_category()}</Label>
               <Select
                 value={form.category}
-                onValueChange={(v: string) => setForm({ ...form, category: v as DependencyCategory })}
+                onValueChange={(v) => setForm({ ...form, category: (v ?? "") as DependencyCategory })}
               >
                 <SelectTrigger size="sm">
                   <SelectValue />
@@ -149,7 +145,7 @@ export function EditDependencyDialog({
               <Label>{m.common_dependency_edit_priority()}</Label>
               <Select
                 value={form.priority}
-                onValueChange={(v: string) => setForm({ ...form, priority: v as ThirdPartyDependencyRow["priority"] })}
+                onValueChange={(v) => setForm({ ...form, priority: (v ?? "") as ThirdPartyDependencyRow["priority"] })}
               >
                 <SelectTrigger size="sm">
                   <SelectValue />

package/src/components/invitations/invitations-page.tsx

@@ -19,7 +19,7 @@ import { useState } from "react"
 import type React from "react"
 import { m } from "@/paraglide/messages.js"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { toast } from "sonner"
+import { toast } from "@/components/ui/toast"
 import { Ticket, Plus, Copy, Ban, CheckCircle2, Trash2, Users } from "lucide-react"
 import { PageHeader } from "@/components/common/page-header"
 import { Button } from "@/components/ui/button"
@@ -342,16 +342,12 @@ export function InvitationsPage(): React.ReactElement {
                             </Button>
                           ) : (
                             <Tooltip>
-                              <TooltipTrigger asChild>
-                                <Button
-                                  variant="ghost"
+                              <TooltipTrigger render={<Button variant="ghost"
                                   size="sm"
                                   className="h-8 text-destructive"
-                                  disabled
-                                >
+                                  disabled />}>
                                   <Trash2 className="size-4" />
-                                </Button>
-                              </TooltipTrigger>
+                                </TooltipTrigger>
                               <TooltipContent>
                                 {m["admin-invitations_delete_disabled_hint"]()}
                               </TooltipContent>

package/src/components/knowledge-public/bookmark-form-dialog.tsx

@@ -17,7 +17,7 @@
 
 import { useState, useEffect } from 'react'
 import { Loader2 } from 'lucide-react'
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'

package/src/components/knowledge-public/compliance-form-dialog.tsx

@@ -17,7 +17,7 @@
 
 import { useState, useEffect } from 'react'
 import { Loader2, PlusIcon, Trash2Icon } from 'lucide-react'
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'

package/src/components/knowledge-public/legal-form-dialog.tsx

@@ -18,7 +18,7 @@
 import { useState, useEffect } from 'react'
 import { m } from '@/paraglide/messages.js'
 import { Loader2 } from 'lucide-react'
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -207,7 +207,7 @@ export function LegalFormDialog({ open, onOpenChange, item, onSuccess }: LegalFo
                   <Label>{m.common_legalForm_jurisdiction()}</Label>
                   <Select
                     value={form.jurisdiction}
-                    onValueChange={(v: string) => setForm((f) => ({ ...f, jurisdiction: v }))}
+                    onValueChange={(v) => setForm((f) => ({ ...f, jurisdiction: v ?? "" }))}
                   >
                     <SelectTrigger className="w-full">
                       <SelectValue />

package/src/components/layout/sidebar-02/app-sidebar.tsx

@@ -47,11 +47,13 @@ import {
   ScrollText,
   Ticket,
   KeyRound,
+  AlignLeft,
+  Brain,
 } from "lucide-react";
-import { Logo } from "@/components/layout/sidebar-02/logo";
 import type { Route } from "./nav-main";
 import DashboardNavigation from "@/components/layout/sidebar-02/nav-main";
 import { NotificationsPopover } from "@/components/layout/sidebar-02/nav-notifications";
+import { AnimatedThemeToggler } from "@/components/magicui/animated-theme-toggler";
 import { AdminUserMenu } from "@/components/admin/admin-user-menu";
 
 function buildDashboardRoutes(): Route[] {
@@ -71,6 +73,8 @@ function buildDashboardRoutes(): Route[] {
       ],
     },
     { id: "ai-providers", title: m.common_nav_aiProviders(), icon: <Bot className="size-4" />, link: "/ai-providers" },
+    { id: "ai-prompts", title: m.common_nav_aiPrompts(), icon: <AlignLeft className="size-4" />, link: "/ai-prompts" },
+    { id: "ai-memory", title: m["admin-ai-memory_page_title"](), icon: <Brain className="size-4" />, link: "/ai-memory" },
     { id: "components", title: m.common_nav_components(), icon: <Layers className="size-4" />, link: "/components" },
     { id: "dependencies", title: m.common_nav_dependencies(), icon: <Boxes className="size-4" />, link: "/dependencies" },
     { id: "developer-logs", title: m.common_nav_developerLogs(), icon: <ScrollText className="size-4" />, link: "/developer-logs" },
@@ -107,12 +111,6 @@ function buildDashboardRoutes(): Route[] {
   ]
 }
 
-const teams = [
-  { id: "1", name: "Alpha Inc.", logo: Logo, plan: "Free" },
-  { id: "2", name: "Beta Corp.", logo: Logo, plan: "Free" },
-  { id: "3", name: "Gamma Tech", logo: Logo, plan: "Free" },
-];
-
 export function DashboardSidebar({ routes: propRoutes }: { routes?: Route[] }) {
   const { state } = useSidebar();
   const isCollapsed = state === "collapsed";
@@ -129,9 +127,18 @@ export function DashboardSidebar({ routes: propRoutes }: { routes?: Route[] }) {
         )}
       >
         <a href="#" className="flex items-center gap-2">
-          <Logo className="h-8 w-8" />
+          <img
+            src="/logo/allblue-logo-dark.svg"
+            alt="AllBlue"
+            className="h-6 w-6 dark:hidden"
+          />
+          <img
+            src="/logo/allblue-logo-light.svg"
+            alt="AllBlue"
+            className="hidden h-6 w-6 dark:block"
+          />
           {!isCollapsed && (
-            <span className="font-semibold text-black dark:text-white">
+            <span className="font-semibold text-foreground">
               Admin
             </span>
           )}
@@ -148,6 +155,7 @@ export function DashboardSidebar({ routes: propRoutes }: { routes?: Route[] }) {
           transition={{ duration: 0.8 }}
         >
           <NotificationsPopover notifications={[]} />
+          <AnimatedThemeToggler className="flex h-8 w-8 items-center justify-center rounded-full hover:bg-accent" />
           {!isCollapsed && <SidebarTrigger />}
           {isCollapsed && <SidebarTrigger />}
         </motion.div>

package/src/components/layout/sidebar-02/nav-main.tsx

@@ -112,15 +112,11 @@ export default function DashboardNavigation({ routes }: { routes: Route[] }) {
                           key={`${route.id}-${subRoute.title}`}
                           className="h-auto"
                         >
-                          <SidebarMenuSubButton asChild isActive={isActive(subRoute.link)}>
-                            <Link
-                              to={subRoute.link}
-                              className="flex items-center rounded-md px-4 py-1.5 text-sm font-medium"
-                            >
+                          <SidebarMenuSubButton render={<Link to={subRoute.link}
+                              className="flex items-center rounded-md px-4 py-1.5 text-sm font-medium" />} isActive={isActive(subRoute.link)}>
                               {subRoute.icon}
                               {subRoute.title}
-                            </Link>
-                          </SidebarMenuSubButton>
+                            </SidebarMenuSubButton>
                         </SidebarMenuSubItem>
                       ))}
                     </SidebarMenuSub>
@@ -128,22 +124,18 @@ export default function DashboardNavigation({ routes }: { routes: Route[] }) {
                 )}
               </Collapsible>
             ) : (
-              <SidebarMenuButton asChild tooltip={route.title} isActive={active} >
-                <Link
-                  to={route.link}
+              <SidebarMenuButton render={<Link to={route.link}
                   className={cn(
                       "flex items-center rounded-lg px-2 ",
                       isCollapsed && "justify-center"
-                    )}
-                >
+                    )} />} tooltip={route.title} isActive={active}>
                   {route.icon}
                   {!isCollapsed && (
                     <span className="ml-2 text-sm font-medium">
                       {route.title}
                     </span>
                   )}
-                </Link>
-              </SidebarMenuButton>
+                </SidebarMenuButton>
             )}
           </SidebarMenuItem>
         );

package/src/components/layout/sidebar-02/nav-notifications.tsx

@@ -43,16 +43,12 @@ export function NotificationsPopover({
 }) {
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
+      <DropdownMenuTrigger render={<Button variant="ghost"
           size="icon"
           className="rounded-full"
-          aria-label="Open notifications"
-        >
+          aria-label="Open notifications" />}>
           <BellIcon className="size-5" />
-        </Button>
-      </DropdownMenuTrigger>
+        </DropdownMenuTrigger>
       <DropdownMenuContent side="right" className="w-80 my-6">
         <DropdownMenuLabel>Notifications</DropdownMenuLabel>
         <DropdownMenuSeparator />

package/src/components/magicui/rainbow-button.tsx

@@ -34,9 +34,9 @@ const rainbowButtonVariants = cva(
     variants: {
       variant: {
         default:
-          "border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.125rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:bg-[length:200%] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]",
+          "border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-accent-1),var(--color-accent-5),var(--color-accent-3),var(--color-accent-4),var(--color-accent-2))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.125rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-accent-1),var(--color-accent-5),var(--color-accent-3),var(--color-accent-4),var(--color-accent-2))] before:bg-[length:200%] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-accent-1),var(--color-accent-5),var(--color-accent-3),var(--color-accent-4),var(--color-accent-2))]",
         outline:
-          "border border-input border-b-transparent bg-[linear-gradient(#ffffff,#ffffff),linear-gradient(#ffffff_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] text-accent-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:bg-[length:200%] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#0a0a0a,#0a0a0a),linear-gradient(#0a0a0a_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]",
+          "border border-input border-b-transparent bg-[linear-gradient(#ffffff,#ffffff),linear-gradient(#ffffff_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-accent-1),var(--color-accent-5),var(--color-accent-3),var(--color-accent-4),var(--color-accent-2))] bg-[length:200%] text-accent-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-accent-1),var(--color-accent-5),var(--color-accent-3),var(--color-accent-4),var(--color-accent-2))] before:bg-[length:200%] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#0a0a0a,#0a0a0a),linear-gradient(#0a0a0a_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-accent-1),var(--color-accent-5),var(--color-accent-3),var(--color-accent-4),var(--color-accent-2))]",
       },
       size: {
         default: "h-9 px-4 py-2",

package/src/components/market/columns.tsx

@@ -113,11 +113,9 @@ export function getMarketColumns(
         const app = row.original
         return (
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className="size-8">
+            <DropdownMenuTrigger render={<Button variant="ghost" size="icon" className="size-8" />}>
                 <MoreHorizontalIcon className="size-4" />
-              </Button>
-            </DropdownMenuTrigger>
+              </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuItem onClick={() => onEdit(app)}>
                 <PencilIcon className="mr-2 size-4" />

package/src/components/market/market-app-form.tsx

@@ -37,7 +37,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 
 interface MarketAppFormProps {
   open: boolean
@@ -178,7 +178,7 @@ export function MarketAppForm({ open, onOpenChange, editData, onSuccess }: Marke
 
           <div className="grid gap-2">
             <Label>{m.common_market_form_category()}</Label>
-            <Select value={form.category || ""} onValueChange={(v: string) => updateField("category", v === "__none__" ? "" : v)}>
+            <Select value={form.category || ""} onValueChange={(v) => updateField("category", v === "__none__" ? "" : (v ?? ""))}>
               <SelectTrigger>
                 <SelectValue placeholder={m.common_market_form_categoryPlaceholder()} />
               </SelectTrigger>

package/src/components/market/market-app-list.tsx

@@ -23,7 +23,7 @@ import { MarketAppForm } from "./market-app-form"
 import { MarketAppFormData } from "@/lib/anyhub/types"
 import { Button } from "@/components/ui/button"
 import { PlusIcon } from "lucide-react"
-import { toast } from '@/components/ui/sonner'
+import { toast } from '@/components/ui/toast'
 import { listMarketAppsFn, updateMarketAppFn, deleteMarketAppFn } from "@/server/serverFns/anyhub/market"
 import {
   AlertDialog,

package/src/components/oauth-providers/provider-page.tsx

@@ -19,7 +19,7 @@ import { useEffect, useState } from 'react'
 import type React from 'react'
 import { m } from '@/paraglide/messages.js'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'sonner'
+import { toast } from '@/components/ui/toast'
 import { Eye, EyeOff, KeyRound, PlugZap, Save, Trash2 } from 'lucide-react'
 import { PageHeader } from '@/components/common/page-header'
 import { Button } from '@/components/ui/button'

package/src/components/ui/alert-dialog.tsx

@@ -1,45 +1,22 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
 "use client"
 
 import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import { cn } from "cn"
 
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
 }
 
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
   return (
     <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
   )
 }
 
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
   return (
     <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
   )
@@ -48,12 +25,12 @@ function AlertDialogPortal({
 function AlertDialogOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+}: AlertDialogPrimitive.Backdrop.Props) {
   return (
-    <AlertDialogPrimitive.Overlay
+    <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -65,17 +42,17 @@ function AlertDialogContent({
   className,
   size = "default",
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+}: AlertDialogPrimitive.Popup.Props & {
   size?: "default" | "sm"
 }) {
   return (
     <AlertDialogPortal>
       <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
+      <AlertDialogPrimitive.Popup
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "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-4 rounded-xl bg-popover p-4 text-popover-foreground 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-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-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-popover p-6 text-popover-foreground 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -92,7 +69,7 @@ function AlertDialogHeader({
     <div
       data-slot="alert-dialog-header"
       className={cn(
-        "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-4 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]",
+        "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]",
         className
       )}
       {...props}
@@ -108,7 +85,7 @@ function AlertDialogFooter({
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        "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",
         className
       )}
       {...props}
@@ -124,7 +101,7 @@ function AlertDialogMedia({
     <div
       data-slot="alert-dialog-media"
       className={cn(
-        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        "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",
         className
       )}
       {...props}
@@ -140,7 +117,7 @@ function AlertDialogTitle({
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
       className={cn(
-        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "font-heading 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",
         className
       )}
       {...props}
@@ -166,19 +143,14 @@ function AlertDialogDescription({
 
 function AlertDialogAction({
   className,
-  variant = "default",
-  size = "default",
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+}: React.ComponentProps<typeof Button>) {
   return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Action
-        data-slot="alert-dialog-action"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
   )
 }
 
@@ -187,16 +159,15 @@ function AlertDialogCancel({
   variant = "outline",
   size = "default",
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+}: AlertDialogPrimitive.Close.Props &
   Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
   return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Cancel
-        data-slot="alert-dialog-cancel"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
   )
 }
 

package/src/components/ui/alert.tsx

@@ -1,10 +1,9 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -67,7 +66,7 @@ function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
+      className={cn("absolute top-2.5 right-3", className)}
       {...props}
     />
   )

package/src/components/ui/avatar.tsx

@@ -1,32 +1,12 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-"use client"
-
 import * as React from "react"
-import { Avatar as AvatarPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import { cn } from "cn"
 
 function Avatar({
   className,
   size = "default",
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+}: AvatarPrimitive.Root.Props & {
   size?: "default" | "sm" | "lg"
 }) {
   return (
@@ -42,10 +22,7 @@ function Avatar({
   )
 }
 
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
@@ -61,7 +38,7 @@ function AvatarImage({
 function AvatarFallback({
   className,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+}: AvatarPrimitive.Fallback.Props) {
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"