@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/tiptap/notion-like/editor-extensions.ts

@@ -0,0 +1,231 @@
+// 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/>.
+
+// NotionDocEditor 扩展装配的单一来源（从 notion-like-editor.tsx 的 useMemo
+// 内联数组原样提取，Yjs 多人协作任务 14 交接锚点 H 的可导入化改造）。
+//
+// 为什么独立成文件：编辑器扩展集是「协同种子化 schema 对账测试」的基准面
+// （apps/web/src/server/collab/__tests__/knowledge-additions.test.ts），
+// 必须可被组件外导入。同时把运行时导出留在本文件、组件文件只 import 消费，
+// 避免 notion-like-editor.tsx 新增非组件导出触发 React Fast Refresh 的
+// "export is incompatible" 全量 reload 循环（AGENTS.md 混合导出敏感区纪律）。
+//
+// ⚠️ 修改本清单（新增/删除影响 ProseMirror schema 的扩展）时必须同步
+// packages/collab-core/src/knowledge-schema.ts（默认集）与
+// apps/web/src/server/collab/knowledge-additions.ts（web 自定义追加集），
+// 对账测试会拦截漂移。collab 追加项（Collaboration/CollaborationCaret）是
+// 行为/插件级绑定，不改 schema，无需同步上述镜像。
+
+import { StarterKit } from "@tiptap/starter-kit"
+import { Collaboration } from "@tiptap/extension-collaboration"
+import { CollaborationCaret } from "@tiptap/extension-collaboration-caret"
+import { MentionExtension } from "../node/mention-extension.ts"
+import { DocCardExtension } from "../node/doc-card-extension"
+import { InlineNodeSelection } from "../node/inline-node-selection.ts"
+import { TaskList, TaskItem } from "@tiptap/extension-list"
+import { Color, TextStyle } from "@tiptap/extension-text-style"
+import { Placeholder, Selection } from "@tiptap/extensions"
+import { Typography } from "@tiptap/extension-typography"
+import { Highlight } from "@tiptap/extension-highlight"
+import { Superscript } from "@tiptap/extension-superscript"
+import { Subscript } from "@tiptap/extension-subscript"
+import { TextAlign } from "@tiptap/extension-text-align"
+import { Mathematics } from "@tiptap/extension-mathematics"
+import { UniqueID } from "@tiptap/extension-unique-id"
+import { Emoji, gitHubEmojis } from "@tiptap/extension-emoji"
+import { Markdown } from "@tiptap/markdown"
+import {
+  getHierarchicalIndexes,
+  TableOfContents,
+  type TableOfContentData,
+} from "@tiptap/extension-table-of-contents"
+import { HorizontalRule } from "../node/horizontal-rule-node/horizontal-rule-node-extension.ts"
+import { UiState } from "../extensions/ui-state-extension.ts"
+import { AiExtension } from "../extensions/ai-extension.ts"
+import { AiSuggestionMark } from "../extensions/ai-suggestion-mark.ts"
+import { Image } from "../node/image-node/image-node-extension.ts"
+import { NodeBackground } from "../extensions/node-background-extension.ts"
+import { NodeAlignment } from "../extensions/node-alignment-extension.ts"
+import { TocNode } from "../node/toc-node/extensions/toc-node-extension.ts"
+import { MindmapExtension } from "../node/mindmap-node/mindmap-extension.ts"
+import { AnnotationNode } from "@/components/design/editor/annotation/annotation-node"
+import { LocalFile } from "../extensions/local-file/local-file-node.ts"
+import { isDesktop } from "@/lib/desktop-detect"
+import { ImageUploadNode } from "../node/image-upload-node/image-upload-node-extension.ts"
+import { TableKit } from "../node/table-node/extensions/table-node-extension.ts"
+import { TableHandleExtension } from "../node/table-node/extensions/table-handle/index.ts"
+import { ListNormalizationExtension } from "../extensions/list-normalization-extension.ts"
+import { FullWidthBlockquote } from "../extensions/fullwidth-blockquote-extension.ts"
+import { CodeBlockEllipsisInput } from "../extensions/code-block-ellipsis-input-extension.ts"
+import { Indent } from "../extensions/indent-extension.ts"
+import { TripleClickBlockSelection } from "../extensions/triple-click-block-selection-extension.ts"
+import { handleImageUpload, MAX_FILE_SIZE } from "../lib/utils.ts"
+import type { Doc } from "yjs"
+import type { Extensions } from "@tiptap/core"
+
+/** 协同态扩展配置（Collaboration + CollaborationCaret，任务 15） */
+export interface NotionEditorCollabExtensions {
+  /** 协同 Y.Doc（SSR 快照预水合后的 provider doc；fragment 默认 'default'，与种子化 COLLAB_XML_FRAGMENT 一致） */
+  ydoc: Doc
+  /**
+   * 连接 provider（CollaborationCaret 需其 awareness 广播远端光标）。
+   * noop/SSR（awareness 缺失）传 null：只挂 Collaboration 不挂 Caret。
+   */
+  provider: unknown
+  /** 本机用户（caret 名牌：显示名 + 固定色板色，lib/collab/user-color） */
+  user: { name: string; color: string }
+}
+
+export interface NotionEditorExtensionsOptions {
+  /** Placeholder 扩展的占位文案（组件 props 透传，可缺省） */
+  placeholder?: string
+  /** TableOfContents 索引更新回调（组件经 useToc 透传 setTocContent） */
+  onTocContent: (content: TableOfContentData) => void
+  /** 协同态配置；缺省 = 非协同单机模式（扩展清单与既有行为逐字一致） */
+  collab?: NotionEditorCollabExtensions
+}
+
+/** NotionDocEditor 的完整扩展集（schema/行为与原内联数组逐字一致） */
+export function createNotionEditorExtensions(
+  options: NotionEditorExtensionsOptions,
+): Extensions {
+  const { placeholder, onTocContent, collab } = options
+  return [
+    StarterKit.configure({
+      horizontalRule: false,
+      dropcursor: {
+        width: 2,
+      },
+      link: { openOnClick: false },
+      // 协同态停用内置历史：Collaboration 自带 Yjs undo/redo（yUndoPlugin），
+      // 与 undoRedo 并存会被官方扩展直接告警不兼容
+      ...(collab ? { undoRedo: false as const } : {}),
+    }),
+    HorizontalRule,
+    FullWidthBlockquote,
+    CodeBlockEllipsisInput,
+    TextAlign.configure({ types: ["heading", "paragraph"] }),
+    Placeholder.configure({
+      placeholder,
+      emptyNodeClass: "is-empty with-slash",
+    }),
+    MentionExtension.configure({
+      renderText({ node }) {
+        const char = node.attrs.mentionSuggestionChar || "@"
+        if (char === "[") return `[[${node.attrs.label || node.attrs.id}]]`
+        return `@${node.attrs.label || node.attrs.id}`
+      },
+    }),
+    DocCardExtension,
+    InlineNodeSelection,
+    Emoji.configure({
+      emojis: gitHubEmojis.filter(
+        (emoji) => !emoji.name.includes("regional")
+      ),
+      forceFallbackImages: true,
+    }),
+    TableKit.configure({
+      table: {
+        resizable: true,
+        cellMinWidth: 120,
+      },
+    }),
+    NodeBackground.configure({
+      types: [
+        "paragraph",
+        "heading",
+        "blockquote",
+        "taskList",
+        "bulletList",
+        "orderedList",
+        "tableCell",
+        "tableHeader",
+        "tocNode",
+      ],
+    }),
+    NodeAlignment,
+    TextStyle,
+    Mathematics,
+    Superscript,
+    Subscript,
+    Indent,
+    Color,
+    TaskList,
+    TaskItem.configure({ nested: true }),
+    Highlight.configure({ multicolor: true }),
+    Selection,
+    Image,
+    TableOfContents.configure({
+      getIndex: getHierarchicalIndexes,
+      onUpdate(content) {
+        onTocContent(content)
+      },
+    }),
+    TableHandleExtension,
+    ListNormalizationExtension,
+    TripleClickBlockSelection,
+    ImageUploadNode.configure({
+      accept: "image/*",
+      maxSize: MAX_FILE_SIZE,
+      limit: 3,
+      upload: handleImageUpload,
+      onError: (error) => console.error("Upload failed:", error),
+    }),
+    UniqueID.configure({
+      types: [
+        "table",
+        "paragraph",
+        "bulletList",
+        "orderedList",
+        "taskList",
+        "heading",
+        "blockquote",
+        "codeBlock",
+        "tocNode",
+      ],
+    }),
+    Typography,
+    UiState,
+    AiExtension,
+    AiSuggestionMark,
+    TocNode.configure({
+      topOffset: 48,
+    }),
+    MindmapExtension,
+    AnnotationNode,
+    Markdown,
+    ...(isDesktop() ? [LocalFile] : []),
+    // 协同态追加（Y 是唯一内容源；扩展顺序无关，插件级绑定）
+    ...(collab
+      ? [
+          // provider 一并传入：UniqueID 协同态靠它监听 'synced' 再补 ID
+          // （同步前补 ID 会与远端冲突）；noop/SSR（null）走其内置降级
+          Collaboration.configure({ document: collab.ydoc, provider: collab.provider }),
+          // provider 缺失（noop/SSR）时跳过 Caret：其 onCreate 对空 provider
+          // 直接抛错，awareness 缺失也无法广播远端光标
+          ...(collab.provider
+            ? [
+                CollaborationCaret.configure({
+                  provider: collab.provider,
+                  user: collab.user,
+                }),
+              ]
+            : []),
+        ]
+      : []),
+  ]
+}

package/src/components/tiptap/notion-like/notion-like-editor.tsx

@@ -22,53 +22,14 @@ import { useDebouncedCallback, EDITOR_CHANGE_DEBOUNCE_MS } from "@/lib/pacer"
 import { EditorContent, EditorContext, useEditor, type Editor } from "@tiptap/react"
 import { createPortal } from "react-dom"
 
-// --- Tiptap Core Extensions ---
-import { StarterKit } from "@tiptap/starter-kit"
-import { MentionExtension } from "../node/mention-extension.ts"
-import { DocCardExtension } from "../node/doc-card-extension"
-import { InlineNodeSelection } from "../node/inline-node-selection.ts"
-import { TaskList, TaskItem } from "@tiptap/extension-list"
-import { Color, TextStyle } from "@tiptap/extension-text-style"
-import { Placeholder, Selection } from "@tiptap/extensions"
-import { Typography } from "@tiptap/extension-typography"
-import { Highlight } from "@tiptap/extension-highlight"
-import { Superscript } from "@tiptap/extension-superscript"
-import { Subscript } from "@tiptap/extension-subscript"
-import { TextAlign } from "@tiptap/extension-text-align"
-import { Mathematics } from "@tiptap/extension-mathematics"
-
-import { UniqueID } from "@tiptap/extension-unique-id"
-import { Emoji, gitHubEmojis } from "@tiptap/extension-emoji"
-import { Markdown } from "@tiptap/markdown"
-import {
-  getHierarchicalIndexes,
-  TableOfContents,
-} from "@tiptap/extension-table-of-contents"
+// --- Extensions（装配单一来源，见 editor-extensions.ts 头注） ---
+import { createNotionEditorExtensions, type NotionEditorCollabExtensions } from "./editor-extensions"
 
 // --- Hooks ---
 import { useUiEditorState } from "../hooks/use-ui-editor-state.ts"
 import { useScrollToHash } from "../ui/copy-anchor-link-button/use-scroll-to-hash.ts"
 
-// --- Custom Extensions ---
-import { HorizontalRule } from "../node/horizontal-rule-node/horizontal-rule-node-extension.ts"
-import { UiState } from "../extensions/ui-state-extension.ts"
-import { AiExtension } from "../extensions/ai-extension.ts"
-import { AiSuggestionMark } from "../extensions/ai-suggestion-mark.ts"
-import { Image } from "../node/image-node/image-node-extension.ts"
-import { NodeBackground } from "../extensions/node-background-extension.ts"
-import { NodeAlignment } from "../extensions/node-alignment-extension.ts"
-import { TocNode } from "../node/toc-node/extensions/toc-node-extension.ts"
-import { MindmapExtension } from "../node/mindmap-node/mindmap-extension.ts"
-import { AnnotationNode } from "@/components/design/editor/annotation/annotation-node"
-import { LocalFile } from "../extensions/local-file/local-file-node.ts"
-import { isDesktop } from "@/lib/desktop-detect"
-
-// --- Tiptap Node ---
-import { ImageUploadNode } from "../node/image-upload-node/image-upload-node-extension.ts"
-
-// --- Table Node ---
-import { TableKit } from "../node/table-node/extensions/table-node-extension.ts"
-import { TableHandleExtension } from "../node/table-node/extensions/table-handle/index.ts"
+// --- Table Node UI ---
 import { TableHandle } from "../node/table-node/ui/table-handle/table-handle.tsx"
 import { TableSelectionOverlay } from "../node/table-node/ui/table-selection-overlay/index.tsx"
 import { TableCellHandleMenu } from "../node/table-node/ui/table-cell-handle-menu/index.tsx"
@@ -93,9 +54,6 @@ import { DocReferenceInteraction } from "../ui/doc-reference-interaction/doc-ref
 import { DragContextMenu } from "../ui/drag-context-menu/index.tsx"
 import { AiMenu } from "../ui/ai-menu/index.tsx"
 
-// --- Lib ---
-import { handleImageUpload, MAX_FILE_SIZE } from "../lib/utils.ts"
-
 // --- Styles ---
 import "./notion-like-editor.scss"
 
@@ -108,11 +66,6 @@ import {
   TocProvider,
   useToc,
 } from "../node/toc-node/context/toc-context.tsx"
-import { ListNormalizationExtension } from "../extensions/list-normalization-extension.ts"
-import { FullWidthBlockquote } from "../extensions/fullwidth-blockquote-extension.ts"
-import { CodeBlockEllipsisInput } from "../extensions/code-block-ellipsis-input-extension.ts"
-import { Indent } from "../extensions/indent-extension.ts"
-import { TripleClickBlockSelection } from "../extensions/triple-click-block-selection-extension.ts"
 import { m } from "@/paraglide/messages.js";
 
 export interface DocumentPreviewData {
@@ -148,6 +101,12 @@ export interface NotionDocEditorProps {
   documentSuggestion?: DocumentSuggestion
   mentionUserSource?: MentionUserSource
   aiModelState?: AiModelState
+  /**
+   * 协同态配置（任务 15）：传入时内容源切 Y.Doc（Collaboration 扩展），
+   * content prop 被忽略、props 内容同步 effect 短路——Y 是唯一内容源，
+   * provider synced 后不得 setContent/重建。
+   */
+  collab?: NotionEditorCollabExtensions
 }
 
 const KbIdContext = createContext<string | undefined>(undefined)
@@ -276,6 +235,7 @@ function NotionDocEditorContent({
   documentSuggestion,
   mentionUserSource,
   aiModelState,
+  collab,
 }: NotionDocEditorProps) {
   const { setTocContent } = useToc()
 
@@ -306,6 +266,9 @@ function NotionDocEditorContent({
 
   const debouncedSave = useDebouncedCallback(
     (editor: Editor) => {
+      // 卸载竞态守卫：change 后 500ms 内卸载（导航/测试 teardown），到期
+      // 回调对已销毁 editor 调 getHTML 会在 DOMSerializer 上抛错
+      if (editor.isDestroyed) return
       onChangeRef.current?.({
         html: editor.getHTML(),
         markdown: editor.storage.markdown?.manager?.serialize?.(editor.getJSON()) ?? "",
@@ -323,119 +286,24 @@ function NotionDocEditorContent({
         class: `notion-like-editor ml-8 ${editorClassName ?? ""}`,
       },
     },
-    content: getInitialContent(),
-    extensions: [
-      StarterKit.configure({
-        horizontalRule: false,
-        dropcursor: {
-          width: 2,
-        },
-        link: { openOnClick: false },
-      }),
-      HorizontalRule,
-      FullWidthBlockquote,
-      CodeBlockEllipsisInput,
-      TextAlign.configure({ types: ["heading", "paragraph"] }),
-      Placeholder.configure({
-        placeholder,
-        emptyNodeClass: "is-empty with-slash",
-      }),
-      MentionExtension.configure({
-        renderText({ node }) {
-          const char = node.attrs.mentionSuggestionChar || "@"
-          if (char === "[") return `[[${node.attrs.label || node.attrs.id}]]`
-          return `@${node.attrs.label || node.attrs.id}`
-        },
-      }),
-      DocCardExtension,
-      InlineNodeSelection,
-      Emoji.configure({
-        emojis: gitHubEmojis.filter(
-          (emoji) => !emoji.name.includes("regional")
-        ),
-        forceFallbackImages: true,
-      }),
-      TableKit.configure({
-        table: {
-          resizable: true,
-          cellMinWidth: 120,
-        },
-      }),
-      NodeBackground.configure({
-        types: [
-          "paragraph",
-          "heading",
-          "blockquote",
-          "taskList",
-          "bulletList",
-          "orderedList",
-          "tableCell",
-          "tableHeader",
-          "tocNode",
-        ],
-      }),
-      NodeAlignment,
-      TextStyle,
-      Mathematics,
-      Superscript,
-      Subscript,
-      Indent,
-      Color,
-      TaskList,
-      TaskItem.configure({ nested: true }),
-      Highlight.configure({ multicolor: true }),
-      Selection,
-      Image,
-      TableOfContents.configure({
-        getIndex: getHierarchicalIndexes,
-        onUpdate(content) {
-          setTocContent(content)
-        },
-      }),
-      TableHandleExtension,
-      ListNormalizationExtension,
-      TripleClickBlockSelection,
-      ImageUploadNode.configure({
-        accept: "image/*",
-        maxSize: MAX_FILE_SIZE,
-        limit: 3,
-        upload: handleImageUpload,
-        onError: (error) => console.error("Upload failed:", error),
-      }),
-      UniqueID.configure({
-        types: [
-          "table",
-          "paragraph",
-          "bulletList",
-          "orderedList",
-          "taskList",
-          "heading",
-          "blockquote",
-          "codeBlock",
-          "tocNode",
-        ],
-      }),
-      Typography,
-      UiState,
-      AiExtension,
-      AiSuggestionMark,
-      TocNode.configure({
-        topOffset: 48,
-      }),
-      MindmapExtension,
-      AnnotationNode,
-      Markdown,
-      ...(isDesktop() ? [LocalFile] : []),
-    ],
+    content: collab ? undefined : getInitialContent(),
+    extensions: createNotionEditorExtensions({
+      placeholder,
+      onTocContent: setTocContent,
+      collab,
+    }),
     onUpdate: ({ editor: ed }: { editor: Editor }) => {
       if (!onChangeRef.current) return
       debouncedSave(ed)
     },
-  }), [readOnly, editorClassName, getInitialContent, placeholder, setTocContent])
+  }), [readOnly, editorClassName, getInitialContent, placeholder, setTocContent, collab])
 
   const editor = useEditor(editorOptions)
 
    useEffect(() => {
+     // 协同态：Y 是唯一内容源，provider synced 前后都不得 setContent/
+     // 重建（规格 §6 水合链路硬约束）
+     if (collab) return
      if (!editor) return
      let newHtml = ""
      if (content) {
@@ -475,7 +343,7 @@ function NotionDocEditorContent({
          }
        })
      }
-   }, [content, editor])
+   }, [content, editor, collab])
 
   useEffect(() => {
     editor?.setEditable(!readOnly)
@@ -539,6 +407,7 @@ export function NotionDocEditor({
   documentSuggestion,
   mentionUserSource,
   aiModelState,
+  collab,
 }: NotionDocEditorProps) {
   const resolvedPlaceholder = placeholder ?? m['editor_start-writing']()
   return (
@@ -558,6 +427,10 @@ export function NotionDocEditor({
         editorClassName={editorClassName}
         hideAi={hideAi}
         disableMobileFullscreen={disableMobileFullscreen}
+        documentSuggestion={documentSuggestion}
+        mentionUserSource={mentionUserSource}
+        aiModelState={aiModelState}
+        collab={collab}
       />
     </TocProvider>
   )

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

@@ -99,12 +99,17 @@ export function AiMenuContent({
   const es = useEditorServices()
   const selectedModel = es?.aiModelState?.value ?? ""
 
+  // threadId mount 级稳定值（useRef 初始值，绝无 render 路径重新生成）：
+  // 1.0 起 threadId 必填，每次 render 新值 = 每次发消息开新会话。
+  const threadIdRef = useRef(crypto.randomUUID())
+
   const { sendMessage, isLoading, stop, messages } = useChat({
     // reconnect 约束（P1-5）：同 harness/chat-ui.tsx，dev server 故障期减少自动重放 POST
     connection: fetchServerSentEvents("/api/chat", {
       reconnect: { maxAttempts: 2, delayMs: 1000 },
     }),
-    body: { model: selectedModel, promptKey: 'tiptap.menu.generate' },
+    threadId: threadIdRef.current,
+    forwardedProps: { model: selectedModel, promptKey: 'tiptap.menu.generate' },
     onChunk: (chunk) => {
       if (!editor) return
       if (chunk.type === "TEXT_MESSAGE_CONTENT" && chunk.delta) {

package/src/components/tiptap/ui/doc-reference-interaction/doc-reference-interaction.tsx

@@ -23,6 +23,7 @@ import {
   Grid3X3,
 } from "lucide-react"
 import { NotionAvatar } from "@/components/shared-kit/avatars/notion-avatar"
+import { toAvatarShape } from "@/components/shared-kit/avatars/avatar-shape"
 
 import { formatDate } from "../../lib/datetime.ts"
 import { useTimezone } from "@/components/shared-kit/timezone/timezone-provider"
@@ -118,7 +119,7 @@ function DocPreviewBody({ meta }: { meta: DocRefMeta }) {
             <NotionAvatar
               config={data.creator.avatarConfig as never}
               bgColor={data.creator.bgColor ?? "transparent"}
-              shape={(data.creator.bgShape as "circle" | "square") ?? "circle"}
+              shape={toAvatarShape(data.creator.bgShape) ?? "circle"}
               className="size-5"
             />
             <span>{data.creator.username}</span>

package/src/components/ui/checkbox.tsx

@@ -1,12 +1,13 @@
 
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
 import { cn } from "cn"
-import { CheckIcon } from "lucide-react"
+import { CheckIcon, MinusIcon } from "lucide-react"
 
-function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+function Checkbox({ className, indeterminate, ...props }: CheckboxPrimitive.Root.Props) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
+      indeterminate={indeterminate}
       className={cn(
         "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
         className
@@ -17,8 +18,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
       >
-        <CheckIcon
-        />
+        {indeterminate ? <MinusIcon /> : <CheckIcon />}
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

package/src/components/ui/popover.tsx

@@ -35,7 +35,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-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",
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-1 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-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}

package/src/components/workspace/dialogs/edit-workspace-dialog.tsx

@@ -98,7 +98,7 @@ export function EditWorkspaceDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-260 -mt-50">
+      <DialogContent className="sm:max-w-[min(65rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="text-xl">{m.workspace_settings_edit()}</DialogTitle>
         </DialogHeader>

package/src/components/workspace/kb/workspace-kb-manage-dialog.tsx

@@ -103,7 +103,7 @@ export function WorkspaceKbManageDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-96 -mt-50">
+      <DialogContent className="sm:max-w-[min(24rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 overflow-y-auto">
         <DialogHeader>
           <DialogTitle>{m.workspace_kb_manageTitle()}</DialogTitle>
         </DialogHeader>

package/src/components/workspace/kb/workspace-quick-doc-dialog.tsx

@@ -270,7 +270,7 @@ export function WorkspaceQuickDocDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-260 -mt-50">
+      <DialogContent className="sm:max-w-[min(65rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 overflow-y-auto">
         <DialogHeader>
           <DialogTitle>{m.workspace_kb_quickDocTitle()}</DialogTitle>
         </DialogHeader>

package/src/components/workspace/members/workspace-member-item.tsx

@@ -17,7 +17,7 @@
 
 import { X } from "lucide-react";
 import { UserAvatar } from "@/components/shared-kit";
-import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
+import type { AvatarConfig } from "@allbluecn/kernel";
 import { m } from "@/paraglide/messages.js";
 
 interface WorkspaceMember {
@@ -51,7 +51,7 @@ export function WorkspaceMemberItem({ member, workspaceOwnerId, onRemove }: Work
       <UserAvatar
         name={member.user?.username}
         avatarConfig={member.user?.avatarConfig as AvatarConfig | undefined}
-        bgShape={member.user?.bgShape as ShapeType | undefined}
+        bgShape={member.user?.bgShape}
         bgColor={member.user?.bgColor ?? undefined}
         size="sm"
       />

package/src/components/workspace/members/workspace-members-manager.tsx

@@ -42,7 +42,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { UserAvatar } from "@/components/shared-kit";
-import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
+import type { AvatarConfig } from "@allbluecn/kernel";
 import { NameConfirmDialog } from "@/components/shared-kit/dialogs/name-confirm-dialog";
 import {
   addWorkspaceMemberFn,
@@ -270,7 +270,7 @@ export function WorkspaceMembersManager({ workspaceId, workspaceOwnerId, members
                       <UserAvatar
                         name={user.username}
                         avatarConfig={user.avatarConfig as AvatarConfig | undefined}
-                        bgShape={user.bgShape as ShapeType | undefined}
+                        bgShape={user.bgShape}
                         bgColor={user.bgColor ?? undefined}
                         size="sm"
                       />