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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/CollapsibleGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;CAC5C;AAgCD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,qBAAqB,2CAyB3F"}
+{"version":3,"file":"CollapsibleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/CollapsibleGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5E,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,GAAG,CAAC,EAAE,SAAS,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;CAChD;AAgCD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,qBAAqB,2CA8BhG"}

package/dist/components/CommentsPanel/components/CollapsibleGroup.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useImperativeHandle } from "react";
 import { ChevronDown } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { useCollapseState } from "../hooks/useCollapseState";
@@ -33,8 +34,12 @@ const collapsibleGroupVariants = {
     }
   })
 };
-function CollapsibleGroup({ groupKey, label, children, level }) {
-  const [isCollapsed, toggle] = useCollapseState(groupKey);
+function CollapsibleGroup({ groupKey, label, children, level, ref }) {
+  const [isCollapsed, toggle, open] = useCollapseState(groupKey);
+  useImperativeHandle(ref, () => ({
+    open,
+    toggle
+  }));
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
       "div",

package/dist/components/CommentsPanel/components/CollapsibleGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CommentsPanel/components/CollapsibleGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cva } from \"class-variance-authority\";\nimport { useCollapseState } from \"../hooks/useCollapseState\";\nimport { cn } from \"../../../utils/general/cn\";\n\ninterface CollapsibleGroupProps {\n  groupKey: string;\n  label: string;\n  children: ReactNode;\n  level: \"collection\" | \"document\" | \"field\";\n}\n\nconst collapsibleGroupVariants = {\n  wrapper: cva(\"flex w-full items-center gap-2 cursor-pointer select-none\", {\n    variants: {\n      level: {\n        collection: \"py-2\",\n        document: \"py-2\",\n        field: \"py-1.5\",\n      },\n    },\n  }),\n  label: cva(\"flex-1 truncate\", {\n    variants: {\n      level: {\n        collection: \"text-[14px] font-semibold text-(--theme-text)\",\n        document: \"text-[13px] font-semibold text-(--theme-text)\",\n        field: \"text-[12px] font-medium text-(--theme-elevation-600)\",\n      },\n    },\n  }),\n  childWrapper: cva(\"\", {\n    variants: {\n      level: {\n        collection: \"border-l-2 border-(--theme-elevation-100) pl-3\",\n        document: \"border-l-2 border-(--theme-elevation-100) pl-3\",\n        field: \"\",\n      },\n    },\n  }),\n};\n\nexport function CollapsibleGroup({ groupKey, label, children, level }: CollapsibleGroupProps) {\n  const [isCollapsed, toggle] = useCollapseState(groupKey);\n\n  return (\n    <div>\n      <div\n        role=\"button\"\n        tabIndex={0}\n        onClick={toggle}\n        onKeyDown={(e) => (e.key === \"Enter\" || e.key === \" \") && toggle()}\n        aria-expanded={!isCollapsed}\n        className={collapsibleGroupVariants.wrapper({ level })}>\n        <span className={collapsibleGroupVariants.label({ level })}>{label}</span>\n\n        <ChevronDown\n          className={cn(\n            \"shrink-0 w-4 h-4 text-(--theme-elevation-450) transition-transform duration-150\",\n            isCollapsed && \"-rotate-90\",\n          )}\n        />\n      </div>\n\n      {!isCollapsed && <div className={collapsibleGroupVariants.childWrapper({ level })}>{children}</div>}\n    </div>\n  );\n}\n"],"mappings":";AAkDM,SAOE,KAPF;AA/CN,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,UAAU;AASnB,MAAM,2BAA2B;AAAA,EAC/B,SAAS,IAAI,6DAA6D;AAAA,IACxE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AAAA,EACD,OAAO,IAAI,mBAAmB;AAAA,IAC5B,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AAAA,EACD,cAAc,IAAI,IAAI;AAAA,IACpB,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEO,SAAS,iBAAiB,EAAE,UAAU,OAAO,UAAU,MAAM,GAA0B;AAC5F,QAAM,CAAC,aAAa,MAAM,IAAI,iBAAiB,QAAQ;AAEvD,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW,CAAC,OAAO,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAQ,OAAO;AAAA,QACjE,iBAAe,CAAC;AAAA,QAChB,WAAW,yBAAyB,QAAQ,EAAE,MAAM,CAAC;AAAA,QACrD;AAAA,8BAAC,UAAK,WAAW,yBAAyB,MAAM,EAAE,MAAM,CAAC,GAAI,iBAAM;AAAA,UAEnE;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,eAAe;AAAA,cACjB;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,IAEC,CAAC,eAAe,oBAAC,SAAI,WAAW,yBAAyB,aAAa,EAAE,MAAM,CAAC,GAAI,UAAS;AAAA,KAC/F;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/CommentsPanel/components/CollapsibleGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { useImperativeHandle, type ReactNode, type RefObject } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cva } from \"class-variance-authority\";\nimport { useCollapseState } from \"../hooks/useCollapseState\";\nimport { cn } from \"../../../utils/general/cn\";\n\nexport interface CollapsibleGroupHandle {\n  open: () => void;\n  toggle: () => void;\n}\n\ninterface CollapsibleGroupProps {\n  groupKey: string;\n  label: string;\n  children: ReactNode;\n  level: \"collection\" | \"document\" | \"field\";\n  ref?: RefObject<CollapsibleGroupHandle | null>;\n}\n\nconst collapsibleGroupVariants = {\n  wrapper: cva(\"flex w-full items-center gap-2 cursor-pointer select-none\", {\n    variants: {\n      level: {\n        collection: \"py-2\",\n        document: \"py-2\",\n        field: \"py-1.5\",\n      },\n    },\n  }),\n  label: cva(\"flex-1 truncate\", {\n    variants: {\n      level: {\n        collection: \"text-[14px] font-semibold text-(--theme-text)\",\n        document: \"text-[13px] font-semibold text-(--theme-text)\",\n        field: \"text-[12px] font-medium text-(--theme-elevation-600)\",\n      },\n    },\n  }),\n  childWrapper: cva(\"\", {\n    variants: {\n      level: {\n        collection: \"border-l-2 border-(--theme-elevation-100) pl-3\",\n        document: \"border-l-2 border-(--theme-elevation-100) pl-3\",\n        field: \"\",\n      },\n    },\n  }),\n};\n\nexport function CollapsibleGroup({ groupKey, label, children, level, ref }: CollapsibleGroupProps) {\n  const [isCollapsed, toggle, open] = useCollapseState(groupKey);\n\n  useImperativeHandle(ref, () => ({\n    open,\n    toggle,\n  }));\n\n  return (\n    <div>\n      <div\n        role=\"button\"\n        tabIndex={0}\n        onClick={toggle}\n        onKeyDown={(e) => (e.key === \"Enter\" || e.key === \" \") && toggle()}\n        aria-expanded={!isCollapsed}\n        className={collapsibleGroupVariants.wrapper({ level })}>\n        <span className={collapsibleGroupVariants.label({ level })}>{label}</span>\n\n        <ChevronDown\n          className={cn(\n            \"shrink-0 w-4 h-4 text-(--theme-elevation-450) transition-transform duration-150\",\n            isCollapsed && \"-rotate-90\",\n          )}\n        />\n      </div>\n\n      {!isCollapsed && <div className={collapsibleGroupVariants.childWrapper({ level })}>{children}</div>}\n    </div>\n  );\n}\n"],"mappings":";AA6DM,SAOE,KAPF;AA3DN,SAAS,2BAA2D;AACpE,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAenB,MAAM,2BAA2B;AAAA,EAC/B,SAAS,IAAI,6DAA6D;AAAA,IACxE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AAAA,EACD,OAAO,IAAI,mBAAmB;AAAA,IAC5B,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AAAA,EACD,cAAc,IAAI,IAAI;AAAA,IACpB,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEO,SAAS,iBAAiB,EAAE,UAAU,OAAO,UAAU,OAAO,IAAI,GAA0B;AACjG,QAAM,CAAC,aAAa,QAAQ,IAAI,IAAI,iBAAiB,QAAQ;AAE7D,sBAAoB,KAAK,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,EACF,EAAE;AAEF,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW,CAAC,OAAO,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAQ,OAAO;AAAA,QACjE,iBAAe,CAAC;AAAA,QAChB,WAAW,yBAAyB,QAAQ,EAAE,MAAM,CAAC;AAAA,QACrD;AAAA,8BAAC,UAAK,WAAW,yBAAyB,MAAM,EAAE,MAAM,CAAC,GAAI,iBAAM;AAAA,UAEnE;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,eAAe;AAAA,cACjB;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,IAEC,CAAC,eAAe,oBAAC,SAAI,WAAW,yBAAyB,aAAa,EAAE,MAAM,CAAC,GAAI,UAAS;AAAA,KAC/F;AAEJ;","names":[]}

package/dist/components/CommentsPanel/components/DocumentView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/DocumentView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9C,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAsBlE"}
+{"version":3,"file":"DocumentView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/DocumentView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAK9C,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAelE"}

package/dist/components/CommentsPanel/components/DocumentView.js

@@ -1,26 +1,20 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useTranslation } from "@payloadcms/ui";
+import { jsx } from "react/jsx-runtime";
 import { useComments } from "../../../providers/CommentsProvider";
 import { groupCommentsByFieldPath } from "../utils/groupCommentsByFieldPath";
-import { FILTER_NO_COMMENTS_KEYS } from "../constants";
 import { FieldGroupSection } from "./FieldGroupSection";
 function DocumentView({ comments, userId, className }) {
-  const { t } = useTranslation();
-  const { filter, collectionSlug, documentId } = useComments();
+  const { collectionSlug, documentId } = useComments();
   const fields = groupCommentsByFieldPath(comments);
-  return /* @__PURE__ */ jsxs("div", { className, children: [
-    comments.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-(--theme-elevation-450) text-[13px] text-center py-6 m-0", children: t(FILTER_NO_COMMENTS_KEYS[filter]) }),
-    /* @__PURE__ */ jsx(
-      FieldGroupSection,
-      {
-        fields,
-        userId,
-        collectionSlug: collectionSlug ?? void 0,
-        documentId: documentId ?? void 0
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+    FieldGroupSection,
+    {
+      fields,
+      userId,
+      collectionSlug: collectionSlug ?? void 0,
+      documentId: documentId ?? void 0
+    }
+  ) });
 }
 export {
   DocumentView

package/dist/components/CommentsPanel/components/DocumentView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CommentsPanel/components/DocumentView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { groupCommentsByFieldPath } from \"../utils/groupCommentsByFieldPath\";\nimport { FILTER_NO_COMMENTS_KEYS } from \"../constants\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\n\ninterface Props {\n  comments: Comment[];\n  userId: number | null;\n  className: string;\n}\n\nexport function DocumentView({ comments, userId, className }: Props) {\n  const { t } = useTranslation();\n  const { filter, collectionSlug, documentId } = useComments();\n\n  const fields = groupCommentsByFieldPath(comments);\n\n  return (\n    <div className={className}>\n      {comments.length === 0 && (\n        <p className=\"text-(--theme-elevation-450) text-[13px] text-center py-6 m-0\">\n          {t(FILTER_NO_COMMENTS_KEYS[filter] as never)}\n        </p>\n      )}\n\n      <FieldGroupSection\n        fields={fields}\n        userId={userId}\n        collectionSlug={collectionSlug ?? undefined}\n        documentId={documentId ?? undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":";AAsBI,SAEI,KAFJ;AApBJ,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAQ3B,SAAS,aAAa,EAAE,UAAU,QAAQ,UAAU,GAAU;AACnE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,QAAQ,gBAAgB,WAAW,IAAI,YAAY;AAE3D,QAAM,SAAS,yBAAyB,QAAQ;AAEhD,SACE,qBAAC,SAAI,WACF;AAAA,aAAS,WAAW,KACnB,oBAAC,OAAE,WAAU,iEACV,YAAE,wBAAwB,MAAM,CAAU,GAC7C;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,gBAAgB,kBAAkB;AAAA,QAClC,YAAY,cAAc;AAAA;AAAA,IAC5B;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/CommentsPanel/components/DocumentView.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Comment } from \"../../../types\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { groupCommentsByFieldPath } from \"../utils/groupCommentsByFieldPath\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\n\ninterface Props {\n  comments: Comment[];\n  userId: number | null;\n  className: string;\n}\n\nexport function DocumentView({ comments, userId, className }: Props) {\n  const { collectionSlug, documentId } = useComments();\n\n  const fields = groupCommentsByFieldPath(comments);\n\n  return (\n    <div className={className}>\n      <FieldGroupSection\n        fields={fields}\n        userId={userId}\n        collectionSlug={collectionSlug ?? undefined}\n        documentId={documentId ?? undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":";AAoBM;AAjBN,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,yBAAyB;AAQ3B,SAAS,aAAa,EAAE,UAAU,QAAQ,UAAU,GAAU;AACnE,QAAM,EAAE,gBAAgB,WAAW,IAAI,YAAY;AAEnD,QAAM,SAAS,yBAAyB,QAAQ;AAEhD,SACE,oBAAC,SAAI,WACH;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,gBAAgB,kBAAkB;AAAA,MAClC,YAAY,cAAc;AAAA;AAAA,EAC5B,GACF;AAEJ;","names":[]}

package/dist/components/CommentsPanel/components/FieldGroupSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupSection.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/FieldGroupSection.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAQtD,UAAU,KAAK;IACb,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IACtC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,KAAK,2CAiDlG"}
+{"version":3,"file":"FieldGroupSection.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/FieldGroupSection.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAWtD,UAAU,KAAK;IACb,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IACtC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,KAAK,2CA8ElG"}