@focus-reactive/payload-plugin-comments 1.1.0 → 1.2.0

package/dist/components/CommentEditor/index.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useImperativeHandle, startTransition } from "react";
 import { useAuth, useLocale, useTranslation } from "@payloadcms/ui";
 import { useComments } from "../../providers/CommentsProvider";
+import { useMentionableUsersQuery } from "../../api/queries/useMentionableUsersQuery";
 import { MentionDropdown } from "../MentionDropdown";
 import { MentionLabel } from "../MentionLabel";
 import { serializeEditor } from "../../utils/comment/serializeEditor";
@@ -25,7 +26,8 @@ function CommentEditor({
   onEnterPress,
   onEscapePress
 }) {
-  const { mentionUsers: users, addComment } = useComments();
+  const { addComment } = useComments();
+  const { data: users = [] } = useMentionableUsersQuery();
   const { code: locale } = useLocale();
   const { user } = useAuth();
   const [mentionQuery, setMentionQuery] = useState(null);
@@ -210,13 +212,13 @@ function CommentEditor({
       "div",
       {
         ref: editorWrapperRef,
-        className: "relative flex-1 group px-2.5 py-2 rounded-md border border-transparent focus-within:border-(--theme-elevation-150) bg-transparent transition-colors",
+        className: "relative flex-1 min-w-0 group px-2.5 py-2 rounded-md border border-transparent focus-within:border-(--theme-elevation-150) bg-transparent",
         children: [
           /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
             "div",
             {
               className: `
-                is-empty w-full min-h-5 leading-5
+                is-empty w-full min-h-5 max-h-32 overflow-y-auto whitespace-pre-wrap wrap-break-word
                 text-(--theme-text) text-[13px] outline-none box-border
                 [&.is-empty]:before:content-[attr(data-placeholder)] [&.is-empty]:before:text-(--theme-elevation-450)
                 [&.is-empty]:before:pointer-events-none [&.is-empty]:before:absolute

package/dist/components/CommentEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CommentEditor/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useImperativeHandle, type RefObject, startTransition } from \"react\";\nimport { useAuth, useLocale, useTranslation } from \"@payloadcms/ui\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { MentionDropdown } from \"../MentionDropdown\";\nimport { MentionLabel } from \"../MentionLabel\";\nimport { serializeEditor } from \"../../utils/comment/serializeEditor\";\nimport { isSelfMention } from \"../../utils/mention/isSelfMention\";\nimport { createRoot } from \"react-dom/client\";\nimport type { User } from \"../../types\";\nimport { FALLBACK_USERNAME } from \"../../constants\";\nimport { resolveUsername } from \"../../utils/user/resolveUsername\";\nimport { ActionPanel } from \"./ActionPanel\";\nimport { Avatar } from \"../Avatar\";\n\nexport interface CommentEditorHandle {\n  getValue: () => string;\n  clear: () => void;\n  focus: () => void;\n  insertAt: () => void;\n}\n\ninterface CommentEditorProps {\n  disabled?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  ref?: RefObject<CommentEditorHandle | null>;\n  fieldPath?: string | null;\n  documentId?: number;\n  collectionSlug?: string;\n  globalSlug?: string;\n  onSuccessAddComment?: () => void;\n  onEnterPress?: () => void;\n  onEscapePress?: () => void;\n}\n\nexport function CommentEditor({\n  disabled,\n  autoFocus,\n  placeholder: placeholderProp,\n  ref,\n  fieldPath,\n  documentId,\n  collectionSlug,\n  globalSlug,\n  onSuccessAddComment,\n  onEnterPress,\n  onEscapePress,\n}: CommentEditorProps) {\n  const { mentionUsers: users, addComment } = useComments();\n  const { code: locale } = useLocale();\n  const { user } = useAuth();\n\n  const [mentionQuery, setMentionQuery] = useState<string | null>(null);\n  const [triggerRange, setTriggerRange] = useState<Range | null>(null);\n  const [filteredUsers, setFilteredUsers] = useState<User[]>([]);\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  const { usernameFieldPath } = useComments();\n  const { t } = useTranslation();\n\n  const editorRef = useRef<HTMLDivElement>(null);\n  const editorWrapperRef = useRef<HTMLDivElement>(null);\n\n  const unknownLabel = t(\"comments:unknownAuthor\" as never) ?? FALLBACK_USERNAME;\n  const currentUserId = user?.id;\n  const placeholder = placeholderProp ?? t(\"comments:writeComment\" as never) ?? \"Add a comment\";\n\n  // Methods\n  const detectMention = () => {\n    const sel = window.getSelection();\n\n    if (!sel || !sel.rangeCount) {\n      setMentionQuery(null);\n\n      return;\n    }\n\n    const range = sel.getRangeAt(0);\n    const node = range.startContainer;\n\n    if (node.nodeType !== Node.TEXT_NODE) {\n      setMentionQuery(null);\n\n      return;\n    }\n\n    const text = node.textContent ?? \"\";\n    const offset = range.startOffset;\n\n    let i = offset - 1;\n    while (i >= 0 && text[i] !== \" \" && text[i] !== \"\\n\") {\n      if (text[i] === \"@\") {\n        const query = text.slice(i + 1, offset);\n        if (query.includes(\" \")) {\n          setMentionQuery(null);\n          return;\n        }\n\n        const atRange = document.createRange();\n        atRange.setStart(node, i);\n        atRange.setEnd(node, offset);\n        setTriggerRange(atRange.cloneRange());\n        setMentionQuery(query);\n        setFilteredUsers(\n          users.filter((u) =>\n            resolveUsername(u, usernameFieldPath, unknownLabel).toLowerCase().includes(query.toLowerCase()),\n          ),\n        );\n        setSelectedIndex(0);\n\n        return;\n      }\n\n      i--;\n    }\n\n    setMentionQuery(null);\n  };\n\n  const insertMention = (user: User) => {\n    if (!triggerRange || !editorRef.current) return;\n\n    const sel = window.getSelection();\n    if (!sel) return;\n\n    sel.removeAllRanges();\n    sel.addRange(triggerRange);\n    sel.deleteFromDocument();\n\n    const { id: userId } = user;\n\n    const mentionLabelContainer = document.createElement(\"span\");\n    const mentionLabelContainerRoot = createRoot(mentionLabelContainer);\n\n    mentionLabelContainerRoot.render(\n      <MentionLabel\n        name={resolveUsername(user, usernameFieldPath, unknownLabel)}\n        isSelf={isSelfMention(currentUserId, userId)}\n      />,\n    );\n\n    mentionLabelContainer.contentEditable = \"false\";\n    mentionLabelContainer.dataset.mentionId = String(userId);\n\n    const range2 = sel.getRangeAt(0);\n    range2.insertNode(mentionLabelContainer);\n\n    const zws = document.createTextNode(\"\\u200b\");\n    mentionLabelContainer.after(zws);\n\n    const newRange = document.createRange();\n    newRange.setStartAfter(zws);\n    newRange.collapse(true);\n    sel.removeAllRanges();\n    sel.addRange(newRange);\n\n    setMentionQuery(null);\n    setTriggerRange(null);\n    editorRef.current?.focus();\n  };\n\n  const insertAt = () => {\n    const editor = editorRef.current;\n    if (!editor) return;\n\n    editor.focus();\n\n    const sel = window.getSelection();\n    if (!sel || !sel.rangeCount) {\n      const range = document.createRange();\n      range.selectNodeContents(editor);\n      range.collapse(false);\n      sel?.removeAllRanges();\n      sel?.addRange(range);\n    }\n\n    document.execCommand(\"insertText\", false, \"@\");\n    detectMention();\n  };\n\n  const updateEmptyClass = () => {\n    const editor = editorRef.current;\n    if (!editor) return;\n\n    const isEmpty = editor.innerHTML === \"\" || editor.innerHTML === \"<br>\";\n\n    editor.classList.toggle(\"is-empty\", isEmpty);\n  };\n\n  // Editor API\n  const getEditorValue = () => {\n    if (!editorRef.current) return \"\";\n\n    return serializeEditor(editorRef.current).trim();\n  };\n\n  const clearEditor = () => {\n    setMentionQuery(null);\n    setTriggerRange(null);\n\n    if (editorRef.current) {\n      editorRef.current.innerHTML = \"\";\n      editorRef.current.classList.add(\"is-empty\");\n    }\n  };\n\n  const focusEditor = () => {\n    editorRef.current?.focus();\n  };\n\n  useImperativeHandle(ref, () => ({\n    getValue: getEditorValue,\n    clear: clearEditor,\n    focus: focusEditor,\n    insertAt,\n  }));\n\n  // Handlers\n  const handleAddComment = () => {\n    const serialized = getEditorValue();\n    if (!serialized) return;\n\n    clearEditor();\n\n    startTransition(async () => {\n      const res = await addComment(serialized, fieldPath, documentId, collectionSlug, locale, globalSlug);\n\n      if (res.success) {\n        onSuccessAddComment?.();\n      }\n    });\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (mentionQuery !== null) {\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        e.stopPropagation();\n        setSelectedIndex((prev) => (prev + 1) % filteredUsers.length);\n        return;\n      }\n      if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        e.stopPropagation();\n        setSelectedIndex((prev) => (prev - 1 + filteredUsers.length) % filteredUsers.length);\n        return;\n      }\n      if (e.key === \"Enter\" && filteredUsers.length > 0) {\n        e.preventDefault();\n        const selectedUser = filteredUsers[selectedIndex];\n        if (selectedUser) insertMention(selectedUser);\n        return;\n      }\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        setMentionQuery(null);\n        setTriggerRange(null);\n        return;\n      }\n    }\n\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n\n      handleAddComment();\n      onEnterPress?.();\n    } else if (e.key === \"Escape\") {\n      onEscapePress?.();\n    }\n  };\n\n  const handleInput = () => {\n    detectMention();\n    updateEmptyClass();\n  };\n\n  return (\n    <div className=\"relative\">\n      <div className=\"flex gap-2.5 items-start\">\n        <Avatar className=\"shrink-0\" user={user} usernameFieldPath={usernameFieldPath} fallbackName={unknownLabel} />\n\n        <div\n          ref={editorWrapperRef}\n          className=\"relative flex-1 group px-2.5 py-2 rounded-md border border-transparent focus-within:border-(--theme-elevation-150) bg-transparent transition-colors\">\n          <div className=\"relative\">\n            <div\n              className={`\n                is-empty w-full min-h-5 leading-5\n                text-(--theme-text) text-[13px] outline-none box-border\n                [&.is-empty]:before:content-[attr(data-placeholder)] [&.is-empty]:before:text-(--theme-elevation-450)\n                [&.is-empty]:before:pointer-events-none [&.is-empty]:before:absolute\n              `}\n              ref={editorRef}\n              contentEditable={!disabled}\n              autoFocus={autoFocus}\n              role=\"textbox\"\n              aria-multiline=\"true\"\n              aria-label={placeholder}\n              data-placeholder={placeholder}\n              onInput={handleInput}\n              onKeyDown={handleKeyDown}\n            />\n          </div>\n\n          {mentionQuery !== null && (\n            <MentionDropdown\n              users={filteredUsers}\n              selectedIndex={selectedIndex}\n              onSelect={insertMention}\n              onClose={() => {\n                setMentionQuery(null);\n                setTriggerRange(null);\n                editorRef.current?.focus();\n              }}\n              anchorRef={editorWrapperRef}\n            />\n          )}\n\n          <ActionPanel\n            className=\"hidden group-focus-within:flex\"\n            onMention={() => insertAt()}\n            onAddComment={handleAddComment}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["user"]}
+{"version":3,"sources":["../../../src/components/CommentEditor/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useImperativeHandle, type RefObject, startTransition } from \"react\";\nimport { useAuth, useLocale, useTranslation } from \"@payloadcms/ui\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { useMentionableUsersQuery } from \"../../api/queries/useMentionableUsersQuery\";\nimport { MentionDropdown } from \"../MentionDropdown\";\nimport { MentionLabel } from \"../MentionLabel\";\nimport { serializeEditor } from \"../../utils/comment/serializeEditor\";\nimport { isSelfMention } from \"../../utils/mention/isSelfMention\";\nimport { createRoot } from \"react-dom/client\";\nimport type { User } from \"../../types\";\nimport { FALLBACK_USERNAME } from \"../../constants\";\nimport { resolveUsername } from \"../../utils/user/resolveUsername\";\nimport { ActionPanel } from \"./ActionPanel\";\nimport { Avatar } from \"../Avatar\";\n\nexport interface CommentEditorHandle {\n  getValue: () => string;\n  clear: () => void;\n  focus: () => void;\n  insertAt: () => void;\n}\n\ninterface CommentEditorProps {\n  disabled?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  ref?: RefObject<CommentEditorHandle | null>;\n  fieldPath?: string | null;\n  documentId?: number;\n  collectionSlug?: string;\n  globalSlug?: string;\n  onSuccessAddComment?: () => void;\n  onEnterPress?: () => void;\n  onEscapePress?: () => void;\n}\n\nexport function CommentEditor({\n  disabled,\n  autoFocus,\n  placeholder: placeholderProp,\n  ref,\n  fieldPath,\n  documentId,\n  collectionSlug,\n  globalSlug,\n  onSuccessAddComment,\n  onEnterPress,\n  onEscapePress,\n}: CommentEditorProps) {\n  const { addComment } = useComments();\n  const { data: users = [] } = useMentionableUsersQuery();\n  const { code: locale } = useLocale();\n  const { user } = useAuth();\n\n  const [mentionQuery, setMentionQuery] = useState<string | null>(null);\n  const [triggerRange, setTriggerRange] = useState<Range | null>(null);\n  const [filteredUsers, setFilteredUsers] = useState<User[]>([]);\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  const { usernameFieldPath } = useComments();\n  const { t } = useTranslation();\n\n  const editorRef = useRef<HTMLDivElement>(null);\n  const editorWrapperRef = useRef<HTMLDivElement>(null);\n\n  const unknownLabel = t(\"comments:unknownAuthor\" as never) ?? FALLBACK_USERNAME;\n  const currentUserId = user?.id;\n  const placeholder = placeholderProp ?? t(\"comments:writeComment\" as never) ?? \"Add a comment\";\n\n  // Methods\n  const detectMention = () => {\n    const sel = window.getSelection();\n\n    if (!sel || !sel.rangeCount) {\n      setMentionQuery(null);\n\n      return;\n    }\n\n    const range = sel.getRangeAt(0);\n    const node = range.startContainer;\n\n    if (node.nodeType !== Node.TEXT_NODE) {\n      setMentionQuery(null);\n\n      return;\n    }\n\n    const text = node.textContent ?? \"\";\n    const offset = range.startOffset;\n\n    let i = offset - 1;\n    while (i >= 0 && text[i] !== \" \" && text[i] !== \"\\n\") {\n      if (text[i] === \"@\") {\n        const query = text.slice(i + 1, offset);\n        if (query.includes(\" \")) {\n          setMentionQuery(null);\n          return;\n        }\n\n        const atRange = document.createRange();\n        atRange.setStart(node, i);\n        atRange.setEnd(node, offset);\n        setTriggerRange(atRange.cloneRange());\n        setMentionQuery(query);\n        setFilteredUsers(\n          users.filter((u) =>\n            resolveUsername(u, usernameFieldPath, unknownLabel).toLowerCase().includes(query.toLowerCase()),\n          ),\n        );\n        setSelectedIndex(0);\n\n        return;\n      }\n\n      i--;\n    }\n\n    setMentionQuery(null);\n  };\n\n  const insertMention = (user: User) => {\n    if (!triggerRange || !editorRef.current) return;\n\n    const sel = window.getSelection();\n    if (!sel) return;\n\n    sel.removeAllRanges();\n    sel.addRange(triggerRange);\n    sel.deleteFromDocument();\n\n    const { id: userId } = user;\n\n    const mentionLabelContainer = document.createElement(\"span\");\n    const mentionLabelContainerRoot = createRoot(mentionLabelContainer);\n\n    mentionLabelContainerRoot.render(\n      <MentionLabel\n        name={resolveUsername(user, usernameFieldPath, unknownLabel)}\n        isSelf={isSelfMention(currentUserId, userId)}\n      />,\n    );\n\n    mentionLabelContainer.contentEditable = \"false\";\n    mentionLabelContainer.dataset.mentionId = String(userId);\n\n    const range2 = sel.getRangeAt(0);\n    range2.insertNode(mentionLabelContainer);\n\n    const zws = document.createTextNode(\"\\u200b\");\n    mentionLabelContainer.after(zws);\n\n    const newRange = document.createRange();\n    newRange.setStartAfter(zws);\n    newRange.collapse(true);\n    sel.removeAllRanges();\n    sel.addRange(newRange);\n\n    setMentionQuery(null);\n    setTriggerRange(null);\n    editorRef.current?.focus();\n  };\n\n  const insertAt = () => {\n    const editor = editorRef.current;\n    if (!editor) return;\n\n    editor.focus();\n\n    const sel = window.getSelection();\n    if (!sel || !sel.rangeCount) {\n      const range = document.createRange();\n      range.selectNodeContents(editor);\n      range.collapse(false);\n      sel?.removeAllRanges();\n      sel?.addRange(range);\n    }\n\n    document.execCommand(\"insertText\", false, \"@\");\n    detectMention();\n  };\n\n  const updateEmptyClass = () => {\n    const editor = editorRef.current;\n    if (!editor) return;\n\n    const isEmpty = editor.innerHTML === \"\" || editor.innerHTML === \"<br>\";\n\n    editor.classList.toggle(\"is-empty\", isEmpty);\n  };\n\n  // Editor API\n  const getEditorValue = () => {\n    if (!editorRef.current) return \"\";\n\n    return serializeEditor(editorRef.current).trim();\n  };\n\n  const clearEditor = () => {\n    setMentionQuery(null);\n    setTriggerRange(null);\n\n    if (editorRef.current) {\n      editorRef.current.innerHTML = \"\";\n      editorRef.current.classList.add(\"is-empty\");\n    }\n  };\n\n  const focusEditor = () => {\n    editorRef.current?.focus();\n  };\n\n  useImperativeHandle(ref, () => ({\n    getValue: getEditorValue,\n    clear: clearEditor,\n    focus: focusEditor,\n    insertAt,\n  }));\n\n  // Handlers\n  const handleAddComment = () => {\n    const serialized = getEditorValue();\n    if (!serialized) return;\n\n    clearEditor();\n\n    startTransition(async () => {\n      const res = await addComment(serialized, fieldPath, documentId, collectionSlug, locale, globalSlug);\n\n      if (res.success) {\n        onSuccessAddComment?.();\n      }\n    });\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (mentionQuery !== null) {\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        e.stopPropagation();\n        setSelectedIndex((prev) => (prev + 1) % filteredUsers.length);\n        return;\n      }\n      if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        e.stopPropagation();\n        setSelectedIndex((prev) => (prev - 1 + filteredUsers.length) % filteredUsers.length);\n        return;\n      }\n      if (e.key === \"Enter\" && filteredUsers.length > 0) {\n        e.preventDefault();\n        const selectedUser = filteredUsers[selectedIndex];\n        if (selectedUser) insertMention(selectedUser);\n        return;\n      }\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        setMentionQuery(null);\n        setTriggerRange(null);\n        return;\n      }\n    }\n\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n\n      handleAddComment();\n      onEnterPress?.();\n    } else if (e.key === \"Escape\") {\n      onEscapePress?.();\n    }\n  };\n\n  const handleInput = () => {\n    detectMention();\n    updateEmptyClass();\n  };\n\n  return (\n    <div className=\"relative\">\n      <div className=\"flex gap-2.5 items-start\">\n        <Avatar className=\"shrink-0\" user={user} usernameFieldPath={usernameFieldPath} fallbackName={unknownLabel} />\n\n        <div\n          ref={editorWrapperRef}\n          className=\"relative flex-1 min-w-0 group px-2.5 py-2 rounded-md border border-transparent focus-within:border-(--theme-elevation-150) bg-transparent\">\n          <div className=\"relative\">\n            <div\n              className={`\n                is-empty w-full min-h-5 max-h-32 overflow-y-auto whitespace-pre-wrap wrap-break-word\n                text-(--theme-text) text-[13px] outline-none box-border\n                [&.is-empty]:before:content-[attr(data-placeholder)] [&.is-empty]:before:text-(--theme-elevation-450)\n                [&.is-empty]:before:pointer-events-none [&.is-empty]:before:absolute\n              `}\n              ref={editorRef}\n              contentEditable={!disabled}\n              autoFocus={autoFocus}\n              role=\"textbox\"\n              aria-multiline=\"true\"\n              aria-label={placeholder}\n              data-placeholder={placeholder}\n              onInput={handleInput}\n              onKeyDown={handleKeyDown}\n            />\n          </div>\n\n          {mentionQuery !== null && (\n            <MentionDropdown\n              users={filteredUsers}\n              selectedIndex={selectedIndex}\n              onSelect={insertMention}\n              onClose={() => {\n                setMentionQuery(null);\n                setTriggerRange(null);\n                editorRef.current?.focus();\n              }}\n              anchorRef={editorWrapperRef}\n            />\n          )}\n\n          <ActionPanel\n            className=\"hidden group-focus-within:flex\"\n            onMention={() => insertAt()}\n            onAddComment={handleAddComment}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["user"]}

package/dist/components/CommentItem/StrikethoroughOverlay/clamp.d.ts

@@ -0,0 +1,2 @@
+export declare function clamp(min: number, value: number, max: number): number;
+//# sourceMappingURL=clamp.d.ts.map

package/dist/components/CommentItem/StrikethoroughOverlay/clamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentItem/StrikethoroughOverlay/clamp.ts"],"names":[],"mappings":"AAAA,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAE5D"}

package/dist/components/CommentItem/StrikethoroughOverlay/clamp.js

@@ -0,0 +1,7 @@
+function clamp(min, value, max) {
+  return Math.min(Math.max(value, min), max);
+}
+export {
+  clamp
+};
+//# sourceMappingURL=clamp.js.map

package/dist/components/CommentItem/StrikethoroughOverlay/clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CommentItem/StrikethoroughOverlay/clamp.ts"],"sourcesContent":["export function clamp(min: number, value: number, max: number) {\n  return Math.min(Math.max(value, min), max);\n}\n"],"mappings":"AAAO,SAAS,MAAM,KAAa,OAAe,KAAa;AAC7D,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;","names":[]}

package/dist/components/CommentItem/StrikethoroughOverlay/index.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from "react";
+interface Props {
+    isResolved: boolean;
+    contentRef: RefObject<HTMLElement | null>;
+}
+export declare function StrikethoroughOverlay({ isResolved, contentRef }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CommentItem/StrikethoroughOverlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentItem/StrikethoroughOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC3C;AAED,wBAAgB,qBAAqB,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,KAAK,kDAuBtE"}

package/dist/components/CommentItem/StrikethoroughOverlay/index.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { useStrikethroughAnimation } from "./useStrikethroughAnimation";
+function StrikethoroughOverlay({ isResolved, contentRef }) {
+  const { lineRects, lineContentRect, getLineByIndexRef } = useStrikethroughAnimation(isResolved, contentRef);
+  if (!lineRects.length || !lineContentRect) return null;
+  const lineHeight = lineContentRect.height / lineRects.length;
+  return /* @__PURE__ */ jsx("span", { className: "block absolute inset-0 pointer-events-none", "aria-hidden": "true", children: lineRects.map((rect, i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "absolute h-px bg-current",
+      ref: getLineByIndexRef(i),
+      style: {
+        width: 0,
+        top: Math.round(lineHeight * i + lineHeight / 2) - 1,
+        left: rect.left - lineContentRect.left
+      }
+    },
+    `line-${i}`
+  )) });
+}
+export {
+  StrikethoroughOverlay
+};
+//# sourceMappingURL=index.js.map

package/dist/components/CommentItem/StrikethoroughOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CommentItem/StrikethoroughOverlay/index.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useStrikethroughAnimation } from \"./useStrikethroughAnimation\";\n\ninterface Props {\n  isResolved: boolean;\n  contentRef: RefObject<HTMLElement | null>;\n}\n\nexport function StrikethoroughOverlay({ isResolved, contentRef }: Props) {\n  const { lineRects, lineContentRect, getLineByIndexRef } = useStrikethroughAnimation(isResolved, contentRef);\n\n  if (!lineRects.length || !lineContentRect) return null;\n\n  const lineHeight = lineContentRect.height / lineRects.length;\n\n  return (\n    <span className=\"block absolute inset-0 pointer-events-none\" aria-hidden=\"true\">\n      {lineRects.map((rect, i) => (\n        <span\n          key={`line-${i}`}\n          className=\"absolute h-px bg-current\"\n          ref={getLineByIndexRef(i)}\n          style={{\n            width: 0,\n            top: Math.round(lineHeight * i + lineHeight / 2) - 1,\n            left: rect.left - lineContentRect.left,\n          }}\n        />\n      ))}\n    </span>\n  );\n}\n"],"mappings":"AAkBQ;AAjBR,SAAS,iCAAiC;AAOnC,SAAS,sBAAsB,EAAE,YAAY,WAAW,GAAU;AACvE,QAAM,EAAE,WAAW,iBAAiB,kBAAkB,IAAI,0BAA0B,YAAY,UAAU;AAE1G,MAAI,CAAC,UAAU,UAAU,CAAC,gBAAiB,QAAO;AAElD,QAAM,aAAa,gBAAgB,SAAS,UAAU;AAEtD,SACE,oBAAC,UAAK,WAAU,8CAA6C,eAAY,QACtE,oBAAU,IAAI,CAAC,MAAM,MACpB;AAAA,IAAC;AAAA;AAAA,MAEC,WAAU;AAAA,MACV,KAAK,kBAAkB,CAAC;AAAA,MACxB,OAAO;AAAA,QACL,OAAO;AAAA,QACP,KAAK,KAAK,MAAM,aAAa,IAAI,aAAa,CAAC,IAAI;AAAA,QACnD,MAAM,KAAK,OAAO,gBAAgB;AAAA,MACpC;AAAA;AAAA,IAPK,QAAQ,CAAC;AAAA,EAQhB,CACD,GACH;AAEJ;","names":[]}

package/dist/components/CommentItem/StrikethoroughOverlay/measureLineRects.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from "react";
+export declare function measureLineRects(contentRef: RefObject<HTMLElement | null>): DOMRect[];
+//# sourceMappingURL=measureLineRects.d.ts.map

package/dist/components/CommentItem/StrikethoroughOverlay/measureLineRects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measureLineRects.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentItem/StrikethoroughOverlay/measureLineRects.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,aA8BzE"}

package/dist/components/CommentItem/StrikethoroughOverlay/measureLineRects.js

@@ -0,0 +1,29 @@
+function measureLineRects(contentRef) {
+  const el = contentRef.current;
+  if (!el) return [];
+  const delEl = el.querySelector("del") ?? el;
+  const range = document.createRange();
+  range.selectNodeContents(delEl);
+  const rawRects = Array.from(range.getClientRects());
+  const groups = /* @__PURE__ */ new Map();
+  for (const rect of rawRects) {
+    const key = Math.round(rect.top);
+    const group = groups.get(key);
+    if (group) {
+      group.push(rect);
+    } else {
+      groups.set(key, [rect]);
+    }
+  }
+  return Array.from(groups.values()).map((rects) => {
+    const left = Math.min(...rects.map((r) => r.left));
+    const right = Math.max(...rects.map((r) => r.right));
+    const top = Math.min(...rects.map((r) => r.top));
+    const bottom = Math.max(...rects.map((r) => r.bottom));
+    return new DOMRect(left, top, right - left, bottom - top);
+  });
+}
+export {
+  measureLineRects
+};
+//# sourceMappingURL=measureLineRects.js.map

package/dist/components/CommentItem/StrikethoroughOverlay/measureLineRects.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CommentItem/StrikethoroughOverlay/measureLineRects.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport function measureLineRects(contentRef: RefObject<HTMLElement | null>) {\n  const el = contentRef.current;\n  if (!el) return [];\n\n  const delEl = el.querySelector(\"del\") ?? el;\n\n  const range = document.createRange();\n  range.selectNodeContents(delEl);\n  const rawRects = Array.from(range.getClientRects());\n\n  const groups = new Map<number, DOMRect[]>();\n  for (const rect of rawRects) {\n    const key = Math.round(rect.top);\n    const group = groups.get(key);\n\n    if (group) {\n      group.push(rect);\n    } else {\n      groups.set(key, [rect]);\n    }\n  }\n\n  return Array.from(groups.values()).map((rects) => {\n    const left = Math.min(...rects.map((r) => r.left));\n    const right = Math.max(...rects.map((r) => r.right));\n    const top = Math.min(...rects.map((r) => r.top));\n    const bottom = Math.max(...rects.map((r) => r.bottom));\n\n    return new DOMRect(left, top, right - left, bottom - top);\n  });\n}\n"],"mappings":"AAEO,SAAS,iBAAiB,YAA2C;AAC1E,QAAM,KAAK,WAAW;AACtB,MAAI,CAAC,GAAI,QAAO,CAAC;AAEjB,QAAM,QAAQ,GAAG,cAAc,KAAK,KAAK;AAEzC,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAmB,KAAK;AAC9B,QAAM,WAAW,MAAM,KAAK,MAAM,eAAe,CAAC;AAElD,QAAM,SAAS,oBAAI,IAAuB;AAC1C,aAAW,QAAQ,UAAU;AAC3B,UAAM,MAAM,KAAK,MAAM,KAAK,GAAG;AAC/B,UAAM,QAAQ,OAAO,IAAI,GAAG;AAE5B,QAAI,OAAO;AACT,YAAM,KAAK,IAAI;AAAA,IACjB,OAAO;AACL,aAAO,IAAI,KAAK,CAAC,IAAI,CAAC;AAAA,IACxB;AAAA,EACF;AAEA,SAAO,MAAM,KAAK,OAAO,OAAO,CAAC,EAAE,IAAI,CAAC,UAAU;AAChD,UAAM,OAAO,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACjD,UAAM,QAAQ,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AACnD,UAAM,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;AAC/C,UAAM,SAAS,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;AAErD,WAAO,IAAI,QAAQ,MAAM,KAAK,QAAQ,MAAM,SAAS,GAAG;AAAA,EAC1D,CAAC;AACH;","names":[]}

package/dist/components/CommentItem/StrikethoroughOverlay/useStrikethroughAnimation.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from "react";
+export declare function useStrikethroughAnimation(isResolved: boolean, contentRect: RefObject<HTMLElement | null>): {
+    lineRects: DOMRect[];
+    lineContentRect: DOMRect | null;
+    getLineByIndexRef: (i: number) => (el: HTMLSpanElement | null) => void;
+};
+//# sourceMappingURL=useStrikethroughAnimation.d.ts.map

package/dist/components/CommentItem/StrikethoroughOverlay/useStrikethroughAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStrikethroughAnimation.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentItem/StrikethoroughOverlay/useStrikethroughAnimation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAgD,MAAM,OAAO,CAAC;AAMrF,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;;2BAezE,MAAM,UAAU,eAAe,GAAG,IAAI;EAqIrE"}

package/dist/components/CommentItem/StrikethoroughOverlay/useStrikethroughAnimation.js

@@ -0,0 +1,114 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { clamp } from "./clamp";
+import { measureLineRects } from "./measureLineRects";
+const SPEED = 20;
+function useStrikethroughAnimation(isResolved, contentRect) {
+  const [lineRects, setLineRects] = useState([]);
+  const [lineContentRect, setLineContentRect] = useState(null);
+  const progressRef = useRef(0);
+  const directionRef = useRef(1);
+  const animationIdRef = useRef(0);
+  const measuredRef = useRef(false);
+  const mountedRef = useRef(false);
+  const lineRefs = useRef([]);
+  const lineRectsRef = useRef([]);
+  const cumulativePixelStartPerLineRef = useRef([]);
+  const getLineByIndexRef = (i) => (el) => {
+    lineRefs.current[i] = el;
+  };
+  const getTotalLineWidth = () => {
+    return lineRectsRef.current.reduce((sum, r) => sum + r.width, 0) || 1;
+  };
+  const measureLines = () => {
+    const el = contentRect.current;
+    if (!el) return;
+    const lineRects2 = measureLineRects(contentRect);
+    const lineContentRect2 = el.getBoundingClientRect();
+    const precomputeCumulativePixelStartPerLine = () => {
+      let acc = 0;
+      return lineRects2.map((rect) => {
+        const start = acc;
+        acc += rect.width;
+        return start;
+      });
+    };
+    lineRectsRef.current = lineRects2;
+    cumulativePixelStartPerLineRef.current = precomputeCumulativePixelStartPerLine();
+    setLineRects(lineRects2);
+    setLineContentRect(lineContentRect2);
+  };
+  const updateLines = (progress) => {
+    const rects = lineRectsRef.current;
+    const starts = cumulativePixelStartPerLineRef.current;
+    lineRefs.current.forEach((line, i) => {
+      if (!line || !rects[i]) return;
+      const pixelStart = starts[i] ?? 0;
+      const width = rects[i].width;
+      const currentWidth = clamp(0, (progress - pixelStart) / width, 1) * width;
+      line.style.width = `${currentWidth}px`;
+    });
+  };
+  const startLoop = (n) => {
+    cancelAnimationFrame(animationIdRef.current);
+    const tick = () => {
+      const direction = directionRef.current;
+      progressRef.current = clamp(0, progressRef.current + direction * SPEED, n);
+      updateLines(progressRef.current);
+      const done = direction === 1 && progressRef.current >= n || direction === -1 && progressRef.current <= 0;
+      if (!done) {
+        animationIdRef.current = requestAnimationFrame(tick);
+      }
+    };
+    animationIdRef.current = requestAnimationFrame(tick);
+  };
+  useLayoutEffect(() => {
+    updateLines(progressRef.current);
+  }, [lineRects]);
+  useEffect(() => {
+    const isFirstRun = !mountedRef.current;
+    mountedRef.current = true;
+    const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (isResolved && !measuredRef.current) {
+      measureLines();
+      measuredRef.current = true;
+    }
+    const totalWidth = getTotalLineWidth();
+    directionRef.current = isResolved ? 1 : -1;
+    cancelAnimationFrame(animationIdRef.current);
+    if (isFirstRun && isResolved) {
+      progressRef.current = totalWidth;
+      return;
+    }
+    if (isFirstRun) return;
+    if (prefersReducedMotion) {
+      const targetProgress = isResolved ? totalWidth : 0;
+      progressRef.current = targetProgress;
+      updateLines(targetProgress);
+      return;
+    }
+    startLoop(totalWidth);
+  }, [isResolved]);
+  useEffect(() => {
+    const el = contentRect.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      if (!measuredRef.current) return;
+      measureLines();
+      const totalWidth = getTotalLineWidth();
+      if (directionRef.current === 1 && progressRef.current >= totalWidth) {
+        progressRef.current = totalWidth;
+        updateLines(totalWidth);
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [contentRect]);
+  useEffect(() => {
+    return () => cancelAnimationFrame(animationIdRef.current);
+  }, []);
+  return { lineRects, lineContentRect, getLineByIndexRef };
+}
+export {
+  useStrikethroughAnimation
+};
+//# sourceMappingURL=useStrikethroughAnimation.js.map

package/dist/components/CommentItem/StrikethoroughOverlay/useStrikethroughAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CommentItem/StrikethoroughOverlay/useStrikethroughAnimation.ts"],"sourcesContent":["import { type RefObject, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { clamp } from \"./clamp\";\nimport { measureLineRects } from \"./measureLineRects\";\n\nconst SPEED = 20;\n\nexport function useStrikethroughAnimation(isResolved: boolean, contentRect: RefObject<HTMLElement | null>) {\n  const [lineRects, setLineRects] = useState<DOMRect[]>([]);\n  const [lineContentRect, setLineContentRect] = useState<DOMRect | null>(null);\n\n  const progressRef = useRef<number>(0);\n  const directionRef = useRef<1 | -1>(1);\n  const animationIdRef = useRef<number>(0);\n\n  const measuredRef = useRef<boolean>(false);\n  const mountedRef = useRef<boolean>(false);\n\n  const lineRefs = useRef<(HTMLSpanElement | null)[]>([]);\n  const lineRectsRef = useRef<DOMRect[]>([]);\n  const cumulativePixelStartPerLineRef = useRef<number[]>([]);\n\n  const getLineByIndexRef = (i: number) => (el: HTMLSpanElement | null) => {\n    lineRefs.current[i] = el;\n  };\n\n  const getTotalLineWidth = () => {\n    return lineRectsRef.current.reduce((sum, r) => sum + r.width, 0) || 1;\n  };\n\n  const measureLines = () => {\n    const el = contentRect.current;\n    if (!el) return;\n\n    const lineRects = measureLineRects(contentRect);\n    const lineContentRect = el.getBoundingClientRect();\n\n    const precomputeCumulativePixelStartPerLine = () => {\n      let acc = 0;\n\n      return lineRects.map((rect) => {\n        const start = acc;\n        acc += rect.width;\n        return start;\n      });\n    };\n\n    lineRectsRef.current = lineRects;\n    cumulativePixelStartPerLineRef.current = precomputeCumulativePixelStartPerLine();\n\n    setLineRects(lineRects);\n    setLineContentRect(lineContentRect);\n  };\n\n  const updateLines = (progress: number) => {\n    const rects = lineRectsRef.current;\n    const starts = cumulativePixelStartPerLineRef.current;\n\n    lineRefs.current.forEach((line, i) => {\n      if (!line || !rects[i]) return;\n\n      const pixelStart = starts[i] ?? 0;\n      const width = rects[i].width;\n\n      const currentWidth = clamp(0, (progress - pixelStart) / width, 1) * width;\n      line.style.width = `${currentWidth}px`;\n    });\n  };\n\n  const startLoop = (n: number) => {\n    cancelAnimationFrame(animationIdRef.current);\n\n    const tick = () => {\n      const direction = directionRef.current;\n      progressRef.current = clamp(0, progressRef.current + direction * SPEED, n);\n      updateLines(progressRef.current);\n\n      const done = (direction === 1 && progressRef.current >= n) || (direction === -1 && progressRef.current <= 0);\n\n      if (!done) {\n        animationIdRef.current = requestAnimationFrame(tick);\n      }\n    };\n\n    animationIdRef.current = requestAnimationFrame(tick);\n  };\n\n  useLayoutEffect(() => {\n    updateLines(progressRef.current);\n  }, [lineRects]);\n\n  useEffect(() => {\n    const isFirstRun = !mountedRef.current;\n    mountedRef.current = true;\n\n    const prefersReducedMotion =\n      typeof window !== \"undefined\" && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n    if (isResolved && !measuredRef.current) {\n      measureLines();\n      measuredRef.current = true;\n    }\n\n    const totalWidth = getTotalLineWidth();\n    directionRef.current = isResolved ? 1 : -1;\n\n    cancelAnimationFrame(animationIdRef.current);\n\n    if (isFirstRun && isResolved) {\n      progressRef.current = totalWidth;\n\n      return;\n    }\n\n    if (isFirstRun) return;\n\n    if (prefersReducedMotion) {\n      const targetProgress = isResolved ? totalWidth : 0;\n\n      progressRef.current = targetProgress;\n      updateLines(targetProgress);\n\n      return;\n    }\n\n    startLoop(totalWidth);\n  }, [isResolved]);\n\n  useEffect(() => {\n    const el = contentRect.current;\n    if (!el) return;\n\n    const observer = new ResizeObserver(() => {\n      if (!measuredRef.current) return;\n\n      measureLines();\n\n      const totalWidth = getTotalLineWidth();\n\n      if (directionRef.current === 1 && progressRef.current >= totalWidth) {\n        progressRef.current = totalWidth;\n        updateLines(totalWidth);\n      }\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [contentRect]);\n\n  useEffect(() => {\n    return () => cancelAnimationFrame(animationIdRef.current);\n  }, []);\n\n  return { lineRects, lineContentRect, getLineByIndexRef };\n}\n"],"mappings":"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","names":["lineRects","lineContentRect"]}

package/dist/components/CommentItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentItem/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAS3C,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,KAAK,2CA2D5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentItem/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAU3C,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,KAAK,2CA+E5D"}

package/dist/components/CommentItem/index.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { startTransition } from "react";
+import { startTransition, useRef } from "react";
 import { useTranslation } from "@payloadcms/ui";
+import { CircleCheck } from "lucide-react";
 import { cn } from "../../utils/general/cn";
 import { useComments } from "../../providers/CommentsProvider";
 import { renderCommentText } from "../../utils/comment/renderCommentText";
@@ -10,10 +11,12 @@ import { FALLBACK_DELETED_USERNAME, FALLBACK_USERNAME } from "../../constants";
 import { ToolsPanel } from "./ToolsPanel";
 import { useRelativeDate } from "../../hooks/useRelativeDate";
 import { Avatar } from "../Avatar";
+import { StrikethoroughOverlay } from "./StrikethoroughOverlay";
 function CommentItem({ comment, currentUserId }) {
   const { resolveComment, removeComment, usernameFieldPath } = useComments();
   const { t } = useTranslation();
   const createdAtRelativeDate = useRelativeDate(comment.createdAt);
+  const contentRef = useRef(null);
   const deletedUserLabel = t("comments:deletedUser") ?? FALLBACK_DELETED_USERNAME;
   const unknownLabel = t("comments:unknownAuthor") ?? FALLBACK_USERNAME;
   const narrowedAuthor = typeof comment.author === "object" ? comment.author : null;
@@ -21,6 +24,13 @@ function CommentItem({ comment, currentUserId }) {
   const isResolved = comment.isResolved ?? false;
   const authorId = comment.author && typeof comment.author === "object" && "id" in comment.author ? comment.author.id : null;
   const canDelete = currentUserId !== null && authorId === currentUserId;
+  const renderedText = renderCommentText({
+    text: comment.text,
+    mentions: comment.mentions,
+    currentUserId,
+    usernameFieldPath,
+    fallbackDeletedUsername: deletedUserLabel
+  });
   const handleToggleResolve = () => {
     startTransition(async () => {
       await resolveComment(comment.id, !isResolved);
@@ -32,6 +42,31 @@ function CommentItem({ comment, currentUserId }) {
     });
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("group relative"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5 items-start", children: [
+      /* @__PURE__ */ jsx(Avatar, { user: narrowedAuthor, usernameFieldPath, fallbackName: unknownLabel }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-[13px] text-(--theme-text) truncate", children: authorName }),
+          isResolved && /* @__PURE__ */ jsx(CircleCheck, { size: 14, className: "text-green-500 shrink-0", "aria-label": t("comments:resolved") }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-(--theme-elevation-450) shrink-0", children: createdAtRelativeDate })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "p",
+          {
+            ref: contentRef,
+            className: cn(
+              "relative m-0 text-[13px] text-(--theme-text) leading-normal whitespace-pre-wrap wrap-break-word transition-opacity motion-reduce:transition-none",
+              isResolved && "opacity-60"
+            ),
+            children: [
+              isResolved && /* @__PURE__ */ jsx("del", { style: { textDecoration: "none" }, dateTime: comment.resolvedAt ?? void 0, children: renderedText }),
+              !isResolved && renderedText,
+              /* @__PURE__ */ jsx(StrikethoroughOverlay, { isResolved, contentRef })
+            ]
+          }
+        )
+      ] })
+    ] }),
     /* @__PURE__ */ jsx(
       ToolsPanel,
       {
@@ -40,23 +75,7 @@ function CommentItem({ comment, currentUserId }) {
         onDelete: handleDelete,
         onResolve: handleToggleResolve
       }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5 items-start", children: [
-      /* @__PURE__ */ jsx(Avatar, { user: narrowedAuthor, usernameFieldPath, fallbackName: unknownLabel }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "font-semibold text-[13px] text-(--theme-text)", children: authorName }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-(--theme-elevation-450)", children: createdAtRelativeDate })
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "m-0 text-[13px] leading-normal text-(--theme-text) whitespace-pre-wrap wrap-break-word", children: renderCommentText({
-          text: comment.text,
-          mentions: comment.mentions,
-          currentUserId,
-          usernameFieldPath,
-          fallbackDeletedUsername: deletedUserLabel
-        }) })
-      ] })
-    ] })
+    )
   ] });
 }
 export {

package/dist/components/CommentItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CommentItem/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { startTransition } from \"react\";\nimport { useTranslation } from \"@payloadcms/ui\";\nimport { cn } from \"../../utils/general/cn\";\nimport type { Comment } from \"../../types\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { renderCommentText } from \"../../utils/comment/renderCommentText\";\nimport { resolveUsername } from \"../../utils/user/resolveUsername\";\nimport { FALLBACK_DELETED_USERNAME, FALLBACK_USERNAME } from \"../../constants\";\nimport { ToolsPanel } from \"./ToolsPanel\";\nimport { useRelativeDate } from \"../../hooks/useRelativeDate\";\nimport { Avatar } from \"../Avatar\";\n\ninterface Props {\n  comment: Comment;\n  currentUserId: number | null;\n}\n\nexport function CommentItem({ comment, currentUserId }: Props) {\n  const { resolveComment, removeComment, usernameFieldPath } = useComments();\n  const { t } = useTranslation();\n  const createdAtRelativeDate = useRelativeDate(comment.createdAt);\n\n  const deletedUserLabel = t(\"comments:deletedUser\" as never) ?? FALLBACK_DELETED_USERNAME;\n  const unknownLabel = t(\"comments:unknownAuthor\" as never) ?? FALLBACK_USERNAME;\n  const narrowedAuthor = typeof comment.author === \"object\" ? comment.author : null;\n  const authorName = resolveUsername(narrowedAuthor, usernameFieldPath, unknownLabel);\n\n  const isResolved = comment.isResolved ?? false;\n\n  const authorId =\n    comment.author && typeof comment.author === \"object\" && \"id\" in comment.author ? comment.author.id : null;\n  const canDelete = currentUserId !== null && authorId === currentUserId;\n\n  const handleToggleResolve = () => {\n    startTransition(async () => {\n      await resolveComment(comment.id, !isResolved);\n    });\n  };\n\n  const handleDelete = () => {\n    startTransition(async () => {\n      await removeComment(comment.id);\n    });\n  };\n\n  return (\n    <div className={cn(\"group relative\")}>\n      <ToolsPanel\n        isResolved={isResolved}\n        canDelete={canDelete}\n        onDelete={handleDelete}\n        onResolve={handleToggleResolve}\n      />\n\n      <div className=\"flex gap-2.5 items-start\">\n        <Avatar user={narrowedAuthor} usernameFieldPath={usernameFieldPath} fallbackName={unknownLabel} />\n\n        <div className=\"flex-1\">\n          <div className=\"flex items-center gap-2 mb-1\">\n            <span className=\"font-semibold text-[13px] text-(--theme-text)\">{authorName}</span>\n            <span className=\"text-[11px] text-(--theme-elevation-450)\">{createdAtRelativeDate}</span>\n          </div>\n\n          <p className=\"m-0 text-[13px] leading-normal text-(--theme-text) whitespace-pre-wrap wrap-break-word\">\n            {renderCommentText({\n              text: comment.text,\n              mentions: comment.mentions,\n              currentUserId,\n              usernameFieldPath,\n              fallbackDeletedUsername: deletedUserLabel,\n            })}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAiDM,cAWI,YAXJ;AA/CN,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAEnB,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,2BAA2B,yBAAyB;AAC7D,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,cAAc;AAOhB,SAAS,YAAY,EAAE,SAAS,cAAc,GAAU;AAC7D,QAAM,EAAE,gBAAgB,eAAe,kBAAkB,IAAI,YAAY;AACzE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,wBAAwB,gBAAgB,QAAQ,SAAS;AAE/D,QAAM,mBAAmB,EAAE,sBAA+B,KAAK;AAC/D,QAAM,eAAe,EAAE,wBAAiC,KAAK;AAC7D,QAAM,iBAAiB,OAAO,QAAQ,WAAW,WAAW,QAAQ,SAAS;AAC7E,QAAM,aAAa,gBAAgB,gBAAgB,mBAAmB,YAAY;AAElF,QAAM,aAAa,QAAQ,cAAc;AAEzC,QAAM,WACJ,QAAQ,UAAU,OAAO,QAAQ,WAAW,YAAY,QAAQ,QAAQ,SAAS,QAAQ,OAAO,KAAK;AACvG,QAAM,YAAY,kBAAkB,QAAQ,aAAa;AAEzD,QAAM,sBAAsB,MAAM;AAChC,oBAAgB,YAAY;AAC1B,YAAM,eAAe,QAAQ,IAAI,CAAC,UAAU;AAAA,IAC9C,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,MAAM;AACzB,oBAAgB,YAAY;AAC1B,YAAM,cAAc,QAAQ,EAAE;AAAA,IAChC,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,gBAAgB,GACjC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA;AAAA,IACb;AAAA,IAEA,qBAAC,SAAI,WAAU,4BACb;AAAA,0BAAC,UAAO,MAAM,gBAAgB,mBAAsC,cAAc,cAAc;AAAA,MAEhG,qBAAC,SAAI,WAAU,UACb;AAAA,6BAAC,SAAI,WAAU,gCACb;AAAA,8BAAC,UAAK,WAAU,iDAAiD,sBAAW;AAAA,UAC5E,oBAAC,UAAK,WAAU,4CAA4C,iCAAsB;AAAA,WACpF;AAAA,QAEA,oBAAC,OAAE,WAAU,0FACV,4BAAkB;AAAA,UACjB,MAAM,QAAQ;AAAA,UACd,UAAU,QAAQ;AAAA,UAClB;AAAA,UACA;AAAA,UACA,yBAAyB;AAAA,QAC3B,CAAC,GACH;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/CommentItem/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { startTransition, useRef } from \"react\";\nimport { useTranslation } from \"@payloadcms/ui\";\nimport { CircleCheck } from \"lucide-react\";\nimport { cn } from \"../../utils/general/cn\";\nimport type { Comment } from \"../../types\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { renderCommentText } from \"../../utils/comment/renderCommentText\";\nimport { resolveUsername } from \"../../utils/user/resolveUsername\";\nimport { FALLBACK_DELETED_USERNAME, FALLBACK_USERNAME } from \"../../constants\";\nimport { ToolsPanel } from \"./ToolsPanel\";\nimport { useRelativeDate } from \"../../hooks/useRelativeDate\";\nimport { Avatar } from \"../Avatar\";\nimport { StrikethoroughOverlay } from \"./StrikethoroughOverlay\";\n\ninterface Props {\n  comment: Comment;\n  currentUserId: number | null;\n}\n\nexport function CommentItem({ comment, currentUserId }: Props) {\n  const { resolveComment, removeComment, usernameFieldPath } = useComments();\n  const { t } = useTranslation();\n  const createdAtRelativeDate = useRelativeDate(comment.createdAt);\n\n  const contentRef = useRef<HTMLParagraphElement>(null);\n\n  const deletedUserLabel = t(\"comments:deletedUser\" as never) ?? FALLBACK_DELETED_USERNAME;\n  const unknownLabel = t(\"comments:unknownAuthor\" as never) ?? FALLBACK_USERNAME;\n  const narrowedAuthor = typeof comment.author === \"object\" ? comment.author : null;\n  const authorName = resolveUsername(narrowedAuthor, usernameFieldPath, unknownLabel);\n\n  const isResolved = comment.isResolved ?? false;\n  const authorId =\n    comment.author && typeof comment.author === \"object\" && \"id\" in comment.author ? comment.author.id : null;\n  const canDelete = currentUserId !== null && authorId === currentUserId;\n\n  const renderedText = renderCommentText({\n    text: comment.text,\n    mentions: comment.mentions,\n    currentUserId,\n    usernameFieldPath,\n    fallbackDeletedUsername: deletedUserLabel,\n  });\n\n  const handleToggleResolve = () => {\n    startTransition(async () => {\n      await resolveComment(comment.id, !isResolved);\n    });\n  };\n\n  const handleDelete = () => {\n    startTransition(async () => {\n      await removeComment(comment.id);\n    });\n  };\n\n  return (\n    <div className={cn(\"group relative\")}>\n      <div className=\"flex gap-2.5 items-start\">\n        <Avatar user={narrowedAuthor} usernameFieldPath={usernameFieldPath} fallbackName={unknownLabel} />\n\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex items-center gap-2 mb-1\">\n            <span className=\"font-semibold text-[13px] text-(--theme-text) truncate\">{authorName}</span>\n\n            {isResolved && (\n              <CircleCheck size={14} className=\"text-green-500 shrink-0\" aria-label={t(\"comments:resolved\" as never)} />\n            )}\n\n            <span className=\"text-[11px] text-(--theme-elevation-450) shrink-0\">{createdAtRelativeDate}</span>\n          </div>\n\n          <p\n            ref={contentRef}\n            className={cn(\n              \"relative m-0 text-[13px] text-(--theme-text) leading-normal whitespace-pre-wrap wrap-break-word transition-opacity motion-reduce:transition-none\",\n              isResolved && \"opacity-60\",\n            )}>\n            {isResolved && (\n              <del style={{ textDecoration: \"none\" }} dateTime={comment.resolvedAt ?? undefined}>\n                {renderedText}\n              </del>\n            )}\n            {!isResolved && renderedText}\n\n            <StrikethoroughOverlay isResolved={isResolved} contentRef={contentRef} />\n          </p>\n        </div>\n      </div>\n\n      <ToolsPanel\n        isResolved={isResolved}\n        canDelete={canDelete}\n        onDelete={handleDelete}\n        onResolve={handleToggleResolve}\n      />\n    </div>\n  );\n}\n"],"mappings":";AA6DQ,cAGE,YAHF;AA3DR,SAAS,iBAAiB,cAAc;AACxC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAEnB,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,2BAA2B,yBAAyB;AAC7D,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAO/B,SAAS,YAAY,EAAE,SAAS,cAAc,GAAU;AAC7D,QAAM,EAAE,gBAAgB,eAAe,kBAAkB,IAAI,YAAY;AACzE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,wBAAwB,gBAAgB,QAAQ,SAAS;AAE/D,QAAM,aAAa,OAA6B,IAAI;AAEpD,QAAM,mBAAmB,EAAE,sBAA+B,KAAK;AAC/D,QAAM,eAAe,EAAE,wBAAiC,KAAK;AAC7D,QAAM,iBAAiB,OAAO,QAAQ,WAAW,WAAW,QAAQ,SAAS;AAC7E,QAAM,aAAa,gBAAgB,gBAAgB,mBAAmB,YAAY;AAElF,QAAM,aAAa,QAAQ,cAAc;AACzC,QAAM,WACJ,QAAQ,UAAU,OAAO,QAAQ,WAAW,YAAY,QAAQ,QAAQ,SAAS,QAAQ,OAAO,KAAK;AACvG,QAAM,YAAY,kBAAkB,QAAQ,aAAa;AAEzD,QAAM,eAAe,kBAAkB;AAAA,IACrC,MAAM,QAAQ;AAAA,IACd,UAAU,QAAQ;AAAA,IAClB;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,EAC3B,CAAC;AAED,QAAM,sBAAsB,MAAM;AAChC,oBAAgB,YAAY;AAC1B,YAAM,eAAe,QAAQ,IAAI,CAAC,UAAU;AAAA,IAC9C,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,MAAM;AACzB,oBAAgB,YAAY;AAC1B,YAAM,cAAc,QAAQ,EAAE;AAAA,IAChC,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,gBAAgB,GACjC;AAAA,yBAAC,SAAI,WAAU,4BACb;AAAA,0BAAC,UAAO,MAAM,gBAAgB,mBAAsC,cAAc,cAAc;AAAA,MAEhG,qBAAC,SAAI,WAAU,kBACb;AAAA,6BAAC,SAAI,WAAU,gCACb;AAAA,8BAAC,UAAK,WAAU,0DAA0D,sBAAW;AAAA,UAEpF,cACC,oBAAC,eAAY,MAAM,IAAI,WAAU,2BAA0B,cAAY,EAAE,mBAA4B,GAAG;AAAA,UAG1G,oBAAC,UAAK,WAAU,qDAAqD,iCAAsB;AAAA,WAC7F;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW;AAAA,cACT;AAAA,cACA,cAAc;AAAA,YAChB;AAAA,YACC;AAAA,4BACC,oBAAC,SAAI,OAAO,EAAE,gBAAgB,OAAO,GAAG,UAAU,QAAQ,cAAc,QACrE,wBACH;AAAA,cAED,CAAC,cAAc;AAAA,cAEhB,oBAAC,yBAAsB,YAAwB,YAAwB;AAAA;AAAA;AAAA,QACzE;AAAA,SACF;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/CommentsDrawer/components/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsDrawer/components/Header.tsx"],"names":[],"mappings":"AASA,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,WAAW,2CAwC3C"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsDrawer/components/Header.tsx"],"names":[],"mappings":"AAMA,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,WAAW,2CAe3C"}

package/dist/components/CommentsDrawer/components/Header.js

@@ -1,43 +1,14 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { SelectInput, useModal, useTranslation } from "@payloadcms/ui";
-import { useComments } from "../../../providers/CommentsProvider";
-import { LoaderCircleIcon, XIcon } from "lucide-react";
+import { useModal, useTranslation } from "@payloadcms/ui";
+import { XIcon } from "lucide-react";
 import { IconButton } from "../../IconButton";
 function Header({ slug }) {
   const { t } = useTranslation();
   const { closeModal } = useModal();
-  const { filter, setFilter, syncCommentsStatus } = useComments();
-  const options = [
-    { label: t("comments:filterOpen"), value: "open" },
-    { label: t("comments:filterResolved"), value: "resolved" },
-    { label: t("comments:filterMentioned"), value: "mentioned" }
-  ];
-  return /* @__PURE__ */ jsxs("header", { className: "sticky top-0 flex items-center gap-3 py-5 bg-(--theme-bg)", children: [
+  return /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 py-5 bg-(--theme-bg)", children: [
     /* @__PURE__ */ jsx("h2", { className: "m-0 text-2xl font-bold", children: t("comments:label") }),
-    syncCommentsStatus === "loading" && /* @__PURE__ */ jsx(
-      LoaderCircleIcon,
-      {
-        width: 14,
-        height: 14,
-        className: "text-(--theme-elevation-450) animate-spin shrink-0",
-        "aria-label": t("comments:syncingComments")
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [
-      /* @__PURE__ */ jsx(
-        SelectInput,
-        {
-          name: "filter",
-          path: "filter",
-          options,
-          value: filter,
-          onChange: (option) => setFilter(option.value),
-          isClearable: false
-        }
-      ),
-      /* @__PURE__ */ jsx(IconButton, { onClick: () => closeModal(slug), title: t("comments:close"), children: /* @__PURE__ */ jsx(XIcon, { width: 16, height: 16 }) })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 ml-auto", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => closeModal(slug), title: t("comments:close"), children: /* @__PURE__ */ jsx(XIcon, { width: 16, height: 16 }) }) })
   ] });
 }
 export {

package/dist/components/CommentsDrawer/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CommentsDrawer/components/Header.tsx"],"sourcesContent":["\"use client\";\n\nimport { SelectInput, useModal, useTranslation } from \"@payloadcms/ui\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport type { FilterMode } from \"../../../types\";\nimport { LoaderCircleIcon, XIcon } from \"lucide-react\";\nimport type { OptionObject } from \"payload\";\nimport { IconButton } from \"../../IconButton\";\n\ninterface HeaderProps {\n  slug: string;\n}\n\nexport function Header({ slug }: HeaderProps) {\n  const { t } = useTranslation();\n  const { closeModal } = useModal();\n  const { filter, setFilter, syncCommentsStatus } = useComments();\n\n  const options = [\n    { label: t(\"comments:filterOpen\" as never), value: \"open\" },\n    { label: t(\"comments:filterResolved\" as never), value: \"resolved\" },\n    { label: t(\"comments:filterMentioned\" as never), value: \"mentioned\" },\n  ];\n\n  return (\n    <header className=\"sticky top-0 flex items-center gap-3 py-5 bg-(--theme-bg)\">\n      <h2 className=\"m-0 text-2xl font-bold\">{t(\"comments:label\" as never)}</h2>\n\n      {syncCommentsStatus === \"loading\" && (\n        <LoaderCircleIcon\n          width={14}\n          height={14}\n          className=\"text-(--theme-elevation-450) animate-spin shrink-0\"\n          aria-label={t(\"comments:syncingComments\" as never)}\n        />\n      )}\n\n      <div className=\"flex items-center gap-2 ml-auto\">\n        <SelectInput\n          name=\"filter\"\n          path=\"filter\"\n          options={options}\n          value={filter}\n          onChange={(option) => setFilter((option as OptionObject).value as FilterMode)}\n          isClearable={false}\n        />\n\n        <IconButton onClick={() => closeModal(slug)} title={t(\"comments:close\" as never)}>\n          <XIcon width={16} height={16} />\n        </IconButton>\n      </div>\n    </header>\n  );\n}\n"],"mappings":";AA0BM,cAWA,YAXA;AAxBN,SAAS,aAAa,UAAU,sBAAsB;AACtD,SAAS,mBAAmB;AAE5B,SAAS,kBAAkB,aAAa;AAExC,SAAS,kBAAkB;AAMpB,SAAS,OAAO,EAAE,KAAK,GAAgB;AAC5C,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,WAAW,IAAI,SAAS;AAChC,QAAM,EAAE,QAAQ,WAAW,mBAAmB,IAAI,YAAY;AAE9D,QAAM,UAAU;AAAA,IACd,EAAE,OAAO,EAAE,qBAA8B,GAAG,OAAO,OAAO;AAAA,IAC1D,EAAE,OAAO,EAAE,yBAAkC,GAAG,OAAO,WAAW;AAAA,IAClE,EAAE,OAAO,EAAE,0BAAmC,GAAG,OAAO,YAAY;AAAA,EACtE;AAEA,SACE,qBAAC,YAAO,WAAU,6DAChB;AAAA,wBAAC,QAAG,WAAU,0BAA0B,YAAE,gBAAyB,GAAE;AAAA,IAEpE,uBAAuB,aACtB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAU;AAAA,QACV,cAAY,EAAE,0BAAmC;AAAA;AAAA,IACnD;AAAA,IAGF,qBAAC,SAAI,WAAU,mCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,OAAO;AAAA,UACP,UAAU,CAAC,WAAW,UAAW,OAAwB,KAAmB;AAAA,UAC5E,aAAa;AAAA;AAAA,MACf;AAAA,MAEA,oBAAC,cAAW,SAAS,MAAM,WAAW,IAAI,GAAG,OAAO,EAAE,gBAAyB,GAC7E,8BAAC,SAAM,OAAO,IAAI,QAAQ,IAAI,GAChC;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/CommentsDrawer/components/Header.tsx"],"sourcesContent":["\"use client\";\n\nimport { useModal, useTranslation } from \"@payloadcms/ui\";\nimport { XIcon } from \"lucide-react\";\nimport { IconButton } from \"../../IconButton\";\n\ninterface HeaderProps {\n  slug: string;\n}\n\nexport function Header({ slug }: HeaderProps) {\n  const { t } = useTranslation();\n  const { closeModal } = useModal();\n\n  return (\n    <header className=\"sticky top-0 z-10 flex items-center gap-3 py-5 bg-(--theme-bg)\">\n      <h2 className=\"m-0 text-2xl font-bold\">{t(\"comments:label\" as never)}</h2>\n\n      <div className=\"flex items-center gap-2 ml-auto\">\n        <IconButton onClick={() => closeModal(slug)} title={t(\"comments:close\" as never)}>\n          <XIcon width={16} height={16} />\n        </IconButton>\n      </div>\n    </header>\n  );\n}\n"],"mappings":";AAeI,SACE,KADF;AAbJ,SAAS,UAAU,sBAAsB;AACzC,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAMpB,SAAS,OAAO,EAAE,KAAK,GAAgB;AAC5C,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,WAAW,IAAI,SAAS;AAEhC,SACE,qBAAC,YAAO,WAAU,kEAChB;AAAA,wBAAC,QAAG,WAAU,0BAA0B,YAAE,gBAAyB,GAAE;AAAA,IAErE,oBAAC,SAAI,WAAU,mCACb,8BAAC,cAAW,SAAS,MAAM,WAAW,IAAI,GAAG,OAAO,EAAE,gBAAyB,GAC7E,8BAAC,SAAM,OAAO,IAAI,QAAQ,IAAI,GAChC,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/CommentsHeaderButton/index.js

@@ -1,15 +1,15 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "@payloadcms/ui";
-import { MessageSquare } from "lucide-react";
 import { CommentsDrawer } from "../CommentsDrawer";
 import { useCommentsDrawer } from "../../providers/CommentsDrawerProvider";
 import { IconButton } from "../IconButton";
+import { Bell } from "lucide-react";
 function CommentsHeaderButton() {
   const { slug, open } = useCommentsDrawer();
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(IconButton, { variant: "neutralSecondary", onClick: () => open(), title: t("comments:openCommentsAria"), children: /* @__PURE__ */ jsx(MessageSquare, { size: 16 }) }),
+    /* @__PURE__ */ jsx(IconButton, { variant: "neutralSecondary", onClick: () => open(), title: t("comments:openCommentsAria"), children: /* @__PURE__ */ jsx(Bell, { size: 16 }) }),
     /* @__PURE__ */ jsx(CommentsDrawer, { slug })
   ] });
 }

package/dist/components/CommentsHeaderButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CommentsHeaderButton/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport { MessageSquare } from \"lucide-react\";\nimport { CommentsDrawer } from \"../CommentsDrawer\";\nimport { useCommentsDrawer } from \"../../providers/CommentsDrawerProvider\";\nimport { IconButton } from \"../IconButton\";\n\nexport function CommentsHeaderButton() {\n  const { slug, open } = useCommentsDrawer();\n  const { t } = useTranslation();\n\n  return (\n    <>\n      <IconButton variant=\"neutralSecondary\" onClick={() => open()} title={t(\"comments:openCommentsAria\" as never)}>\n        <MessageSquare size={16} />\n      </IconButton>\n\n      <CommentsDrawer slug={slug} />\n    </>\n  );\n}\n"],"mappings":";AAaI,mBAEI,KAFJ;AAXJ,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,SAAS,uBAAuB;AACrC,QAAM,EAAE,MAAM,KAAK,IAAI,kBAAkB;AACzC,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,SACE,iCACE;AAAA,wBAAC,cAAW,SAAQ,oBAAmB,SAAS,MAAM,KAAK,GAAG,OAAO,EAAE,2BAAoC,GACzG,8BAAC,iBAAc,MAAM,IAAI,GAC3B;AAAA,IAEA,oBAAC,kBAAe,MAAY;AAAA,KAC9B;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/CommentsHeaderButton/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport { CommentsDrawer } from \"../CommentsDrawer\";\nimport { useCommentsDrawer } from \"../../providers/CommentsDrawerProvider\";\nimport { IconButton } from \"../IconButton\";\nimport { Bell } from \"lucide-react\";\n\nexport function CommentsHeaderButton() {\n  const { slug, open } = useCommentsDrawer();\n  const { t } = useTranslation();\n\n  return (\n    <>\n      <IconButton variant=\"neutralSecondary\" onClick={() => open()} title={t(\"comments:openCommentsAria\" as never)}>\n        <Bell size={16} />\n      </IconButton>\n\n      <CommentsDrawer slug={slug} />\n    </>\n  );\n}\n"],"mappings":";AAaI,mBAEI,KAFJ;AAXJ,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAEd,SAAS,uBAAuB;AACrC,QAAM,EAAE,MAAM,KAAK,IAAI,kBAAkB;AACzC,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,SACE,iCACE;AAAA,wBAAC,cAAW,SAAQ,oBAAmB,SAAS,MAAM,KAAK,GAAG,OAAO,EAAE,2BAAoC,GACzG,8BAAC,QAAK,MAAM,IAAI,GAClB;AAAA,IAEA,oBAAC,kBAAe,MAAY;AAAA,KAC9B;AAEJ;","names":[]}

package/dist/components/CommentsPanel/components/CollapsibleGroup.d.ts

@@ -1,10 +1,15 @@
-import type { ReactNode } from "react";
+import { type ReactNode, type RefObject } from "react";
+export interface CollapsibleGroupHandle {
+    open: () => void;
+    toggle: () => void;
+}
 interface CollapsibleGroupProps {
     groupKey: string;
     label: string;
     children: ReactNode;
     level: "collection" | "document" | "field";
+    ref?: RefObject<CollapsibleGroupHandle | null>;
 }
-export declare function CollapsibleGroup({ groupKey, label, children, level }: CollapsibleGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapsibleGroup({ groupKey, label, children, level, ref }: CollapsibleGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CollapsibleGroup.d.ts.map