@allbluecn/web-app 0.12.0 → 0.12.3

package/src/components/tiptap/ui/ai-menu/ai-menu.tsx

@@ -17,6 +17,7 @@
 import { useCallback, useEffect, useRef } from "react"
 import { type Editor } from "@tiptap/react"
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react"
+import { toast } from "@/components/ui/toast"
 
 import { AiMenuItems } from "./ai-menu-items/ai-menu-items.tsx"
 import { insertDelta } from "../../extension/ai-extension.ts"
@@ -69,23 +70,6 @@ import { StopCircle2Icon } from "../../icons/stop-circle-2-icon.tsx"
 import "./ai-menu.scss"
 import { m } from "@/paraglide/messages.js";
 
-const EDITOR_INSTRUCTIONS: Record<string, string> = {
-  generate: "You are a creative writing assistant. Continue or write new content based on the user prompt. Output ONLY the requested content, no explanations, no preamble, no quotes.",
-  improve: "Improve the clarity and flow of this text while preserving its meaning.",
-  shorter: "Make this text more concise while preserving the key message.",
-  longer: "Expand this text with more detail and depth.",
-  formal: "Rewrite this text in a formal, professional tone.",
-  casual: "Rewrite this text in a casual, conversational tone.",
-  "fix-spelling": "Fix all spelling and grammar errors in this text.",
-}
-
-function buildEditorSystemPrompts(type?: string, instruction?: string): string[] {
-  const prompts = ["You are an AI writing assistant."]
-  if (type && EDITOR_INSTRUCTIONS[type]) prompts.push(EDITOR_INSTRUCTIONS[type])
-  if (instruction) prompts.push(instruction)
-  return prompts
-}
-
 export function AiMenuStateProvider({
   children,
 }: {
@@ -110,22 +94,24 @@ export function AiMenuContent({
   const { editor } = useTiptapEditor(providedEditor)
   const { state, updateState, setFallbackAnchor, reset } = useAiMenuState()
   const { show, store } = useFloatingMenuStore()
-  const { aiGenerationActive } = useUiEditorState(editor)
+  const { aiGenerationActive, aiGenerationIsLoading } = useUiEditorState(editor)
   const tiptapAiPromptInputRef = useRef<HTMLDivElement | null>(null)
+  const lastPromptRef = useRef<string>("")
   const es = useEditorServices()
   const selectedModel = es?.aiModelState?.value ?? ""
 
   const { sendMessage, isLoading, stop, messages } = useChat({
     connection: fetchServerSentEvents("/api/chat"),
-    body: { systemPrompts: buildEditorSystemPrompts("generate"), model: selectedModel },
+    body: { model: selectedModel, promptKey: 'tiptap.menu.generate' },
     onChunk: (chunk) => {
       if (!editor) return
       if (chunk.type === "TEXT_MESSAGE_CONTENT" && chunk.delta) {
         editor.storage.ai.state = "streaming"
         const insertPos = editor.storage.ai.insertPos
         if (insertPos >= 0) {
-          const newPos = insertDelta(editor, insertPos, chunk.delta)
+          const newPos = insertDelta(editor, insertPos, chunk.delta, "aiSuggestion")
           editor.storage.ai.insertPos = newPos
+          editor.storage.ai.generatedWith = { range: { from: insertPos, to: newPos } }
         }
       }
     },
@@ -133,12 +119,26 @@ export function AiMenuContent({
       if (!editor) return
       editor.storage.ai.state = "done"
     },
-    onError: () => {
+    onError: (error) => {
       if (!editor) return
       editor.storage.ai.state = "idle"
+      const errorMsg = error?.message || ""
+      if (errorMsg.includes("image") || errorMsg.includes("vision")) {
+        toast.error(m['editor_ai-image-not-supported']())
+      } else {
+        toast.error(m['editor_ai-request-failed']())
+      }
     },
   })
 
+  const isAiLoading = isLoading || aiGenerationIsLoading
+  const hasAiResponse = messages.length > 0 || editor?.storage?.ai?.state === "done"
+
+  const handleStop = useCallback(() => {
+    stop()
+    editor?.storage?.ai?.abortController?.abort()
+  }, [stop, editor])
+
   const closeAiMenu = useCallback(() => {
     if (!editor) return
     reset()
@@ -149,6 +149,7 @@ export function AiMenuContent({
   const handlePromptSubmit = useCallback(
     (userPrompt: string) => {
       if (!editor || !userPrompt.trim()) return
+      lastPromptRef.current = userPrompt
 
       const { context } = getContextAndInsertAt(editor)
       const promptWithContext = context
@@ -200,6 +201,15 @@ export function AiMenuContent({
     ]
   )
 
+  const handleRegenerate = useCallback(() => {
+    if (!editor || !lastPromptRef.current) return
+    const { range } = editor.storage.ai.generatedWith || {}
+    if (range) {
+      editor.chain().focus().deleteRange({ from: range.from, to: range.to }).run()
+    }
+    handlePromptSubmit(lastPromptRef.current)
+  }, [editor, handlePromptSubmit])
+
   const setAnchorElement = useCallback(
     (element: HTMLElement) => {
       store.setAnchorElement(element)
@@ -216,19 +226,26 @@ export function AiMenuContent({
 
   const handleOnReject = useCallback(() => {
     if (!editor) return
-    stop()
+    handleStop()
     const { range } = editor.storage.ai.generatedWith || {}
-    if (range) {
-      editor.chain().focus().deleteRange({ from: range.from, to: range.to }).run()
+    if (range && range.from !== range.to) {
+      editor.chain().deleteRange({ from: range.from, to: range.to }).run()
     }
     editor.storage.ai.state = "idle"
     editor.storage.ai.generatedWith = null
     editor.storage.ai.response = ""
     closeAiMenu()
-  }, [closeAiMenu, editor, stop])
+  }, [closeAiMenu, editor, handleStop])
 
   const handleOnAccept = useCallback(() => {
     if (!editor) return
+    const { range } = editor.storage.ai.generatedWith || {}
+    if (range && range.from !== range.to) {
+      editor.chain()
+        .setTextSelection({ from: range.from, to: range.to })
+        .unsetMark("aiSuggestion")
+        .run()
+    }
     editor.storage.ai.state = "idle"
     editor.storage.ai.generatedWith = null
     editor.storage.ai.response = ""
@@ -237,11 +254,11 @@ export function AiMenuContent({
 
   const handleInputOnClose = useCallback(() => {
     if (!editor) return
-    if (isLoading) {
-      stop()
+    if (isAiLoading) {
+      handleStop()
       const { range } = editor.storage.ai.generatedWith || {}
-      if (range) {
-        editor.chain().focus().deleteRange({ from: range.from, to: range.to }).run()
+      if (range && range.from !== range.to) {
+        editor.chain().deleteRange({ from: range.from, to: range.to }).run()
       }
       editor.storage.ai.state = "idle"
       editor.storage.ai.generatedWith = null
@@ -250,14 +267,14 @@ export function AiMenuContent({
       handleOnAccept()
     }
     closeAiMenu()
-  }, [isLoading, stop, handleOnAccept, closeAiMenu, editor])
+  }, [isAiLoading, handleStop, handleOnAccept, closeAiMenu, editor])
 
   const handleClickOutside = useCallback(() => {
-    if (!isLoading) {
+    if (!isAiLoading) {
       handleOnAccept()
       closeAiMenu()
     }
-  }, [isLoading, handleOnAccept, closeAiMenu])
+  }, [isAiLoading, handleOnAccept, closeAiMenu])
 
   useAiContentTracker({
     editor,
@@ -272,25 +289,43 @@ export function AiMenuContent({
     showMenuAtElement: show,
     setMenuVisible: (visible) => updateState({ isOpen: visible }),
     onSelectionChange: handleSelectionChange,
-    prevent: isLoading,
+    prevent: isAiLoading,
     anchorToSelection,
   })
 
   useEffect(() => {
-    if (isLoading) {
-      updateState({ shouldShowInput: false })
-    } else if (messages.length > 0) {
+    if (isAiLoading) {
+      updateState({ shouldShowInput: true })
+    } else if (hasAiResponse) {
       updateState({ shouldShowInput: true })
     }
-  }, [isLoading, messages.length, updateState])
+  }, [isAiLoading, hasAiResponse, updateState])
 
   useEffect(() => {
     if (aiGenerationActive && !state.isOpen) {
+      if (!state.fallbackAnchor.element && editor) {
+        const selectionRect = getSelectionRangeRect(editor)
+        if (selectionRect) {
+          const anchorRect = createEditorWidthAnchorRect(editor.view.dom, selectionRect)
+          const anchor = createVirtualAnchor(anchorRect, editor.view.dom)
+          setFallbackAnchor(anchor, anchorRect)
+        } else {
+          const currentSelectedElement = getSelectedDOMElement(editor)
+          if (currentSelectedElement) {
+            setFallbackAnchor(currentSelectedElement, currentSelectedElement.getBoundingClientRect())
+          } else if (editor.view.dom) {
+            const editorRect = editor.view.dom.getBoundingClientRect()
+            const anchorRect = createEditorWidthAnchorRect(editor.view.dom, editorRect)
+            const anchor = createVirtualAnchor(anchorRect, editor.view.dom)
+            setFallbackAnchor(anchor, anchorRect)
+          }
+        }
+      }
       updateState({ isOpen: true })
     } else if (!aiGenerationActive && state.isOpen) {
       closeAiMenu()
     }
-  }, [aiGenerationActive, state.isOpen, updateState, closeAiMenu])
+  }, [aiGenerationActive, state.isOpen, updateState, closeAiMenu, editor, setFallbackAnchor])
 
   const smoothFocusAndScroll = (element: HTMLElement | null) => {
     element?.focus()
@@ -319,31 +354,33 @@ export function AiMenuContent({
         flip={false}
       >
         <Card>
-          {isLoading && <AiMenuProgress editor={editor} stop={stop} />}
-
-          {!isLoading && (
-            <AiMenuInputTextarea
-              ref={tiptapAiPromptInputRef}
-              showPlaceholder={
-                !isLoading &&
-                messages.length > 0 &&
-                !state.shouldShowInput
-              }
-              onInputFocus={() => updateState({ inputIsFocused: true })}
-              onInputBlur={() => updateState({ inputIsFocused: false })}
-              onClose={handleInputOnClose}
-              onPlaceholderClick={() => updateState({ shouldShowInput: true })}
-              onInputSubmit={(value) => handlePromptSubmit(value)}
-              onToneChange={(tone) => updateState({ tone })}
-            />
-          )}
+          {isAiLoading && <AiMenuProgress editor={editor} stop={handleStop} />}
+
+          <AiMenuInputTextarea
+            ref={tiptapAiPromptInputRef}
+            showPlaceholder={
+              !isAiLoading &&
+              hasAiResponse &&
+              !state.shouldShowInput
+            }
+            onInputFocus={() => updateState({ inputIsFocused: true })}
+            onInputBlur={() => updateState({ inputIsFocused: false })}
+            onClose={handleInputOnClose}
+            onPlaceholderClick={() => updateState({ shouldShowInput: true })}
+            onInputSubmit={(value) => {
+              if (isAiLoading) return
+              handlePromptSubmit(value)
+            }}
+            onToneChange={(tone) => updateState({ tone })}
+          />
 
-          {messages.length > 0 && !isLoading && (
+          {hasAiResponse && !isAiLoading && (
             <AiMenuActions
               editor={editor}
               options={{ tone: state.tone, format: "rich-text" }}
               onAccept={handleOnAccept}
               onReject={handleOnReject}
+              onRegenerate={handleRegenerate}
             />
           )}
         </Card>

package/src/components/tiptap/ui/drag-context-menu/drag-context-menu.tsx

@@ -393,7 +393,7 @@ export const DragContextMenu: React.FC<DragContextMenuProps> = ({
   ...props
 }) => {
   const { editor } = useTiptapEditor(providedEditor)
-  const { aiGenerationActive, isDragging } = useUiEditorState(editor)
+  const { aiGenerationIsLoading, isDragging } = useUiEditorState(editor)
   const isMobile = useIsBreakpoint("max", mobileBreakpoint)
   const [open, setOpen] = useState(false)
   const [node, setNode] = useState<TiptapNode | null>(null)
@@ -477,7 +477,7 @@ export const DragContextMenu: React.FC<DragContextMenuProps> = ({
           style={{
             display: "flex",
             flexDirection: "row",
-            ...(aiGenerationActive || isMobile || isTextSelectionValid(editor)
+            ...(aiGenerationIsLoading || isMobile || isTextSelectionValid(editor)
               ? { opacity: 0, pointerEvents: "none" }
               : {}),
             ...(isDragging ? { opacity: 0 } : {}),

package/src/components/ui/accordion.tsx

@@ -1,32 +1,8 @@
-// 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 { Accordion as AccordionPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+import { cn } from "cn"
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
-function Accordion({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (
     <AccordionPrimitive.Root
       data-slot="accordion"
@@ -36,10 +12,7 @@ function Accordion({
   )
 }
 
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
@@ -53,13 +26,13 @@ function AccordionTrigger({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+}: AccordionPrimitive.Trigger.Props) {
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className
         )}
         {...props}
@@ -76,22 +49,22 @@ function AccordionContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+}: AccordionPrimitive.Panel.Props) {
   return (
-    <AccordionPrimitive.Content
+    <AccordionPrimitive.Panel
       data-slot="accordion-content"
       className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
       {...props}
     >
       <div
         className={cn(
-          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
           className
         )}
       >
         {children}
       </div>
-    </AccordionPrimitive.Content>
+    </AccordionPrimitive.Panel>
   )
 }
 

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

@@ -1,45 +1,20 @@
-// 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 "./button"
+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 +23,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 +40,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 +67,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 +83,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 +99,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 +115,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 +141,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 +157,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,27 +1,9 @@
-// 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/>.
-
 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: {
@@ -84,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"