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

package/dist/components/CommentsPanel/components/FieldGroupSection.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
 import { useTranslation } from "@payloadcms/ui";
 import { CollapsibleGroup } from "./CollapsibleGroup";
 import { CommentItem } from "../../CommentItem";
@@ -7,11 +8,28 @@ import { createCollapsibleGroupKey } from "../utils/createCollapsibleGroupKey";
 import { resolveFieldLabel } from "../utils/resolveFieldLabel";
 import { useComments } from "../../../providers/CommentsProvider";
 import { CommentEditor } from "../../CommentEditor";
+import { useCommentsDrawer } from "../../../providers/CommentsDrawerProvider";
+import { useFieldLabelsQuery } from "../../../api/queries/useFieldLabelsQuery";
+import { DRAWER_OPENING_TIME } from "../../../constants";
 function FieldGroupSection({ fields, userId, collectionSlug, documentId, globalSlug }) {
   const { t } = useTranslation();
-  const { fieldLabelRegistry } = useComments();
+  const { queryContext } = useComments();
+  const { data: fieldLabelRegistry = {} } = useFieldLabelsQuery(queryContext);
+  const { pendingField } = useCommentsDrawer();
+  const editorRef = useRef(null);
+  const pendingFieldCollapsibleGroup = useRef(null);
   const generalComments = fields.get(null) ?? [];
   const fieldEntries = [...fields.entries()].filter((entry) => entry[0] !== null);
+  const allEntries = [
+    ...fieldEntries,
+    ...pendingField && !fields.has(pendingField.path) ? [[pendingField.path, []]] : []
+  ];
+  useEffect(() => {
+    if (!pendingField) return;
+    pendingFieldCollapsibleGroup.current?.open();
+    const id = setTimeout(() => editorRef.current?.focus(), DRAWER_OPENING_TIME);
+    return () => clearTimeout(id);
+  }, [pendingField]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       CollapsibleGroup,
@@ -33,27 +51,33 @@ function FieldGroupSection({ fields, userId, collectionSlug, documentId, globalS
         ] })
       }
     ),
-    fieldEntries.map(([fieldPath, fieldComments]) => /* @__PURE__ */ jsx(
-      CollapsibleGroup,
-      {
-        groupKey: createCollapsibleGroupKey({ collectionSlug, documentId, globalSlug, fieldPath }),
-        label: resolveFieldLabel({ registry: fieldLabelRegistry, collectionSlug, documentId, globalSlug, fieldPath }),
-        level: "field",
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", "data-field-path": fieldPath, children: [
-          fieldComments.map((comment) => /* @__PURE__ */ jsx(CommentItem, { comment, currentUserId: userId }, comment.id)),
-          /* @__PURE__ */ jsx(
-            CommentEditor,
-            {
-              fieldPath,
-              collectionSlug,
-              documentId,
-              globalSlug
-            }
-          )
-        ] })
-      },
-      fieldPath
-    ))
+    allEntries.map(([fieldPath, fieldComments]) => {
+      const isPending = pendingField?.path === fieldPath;
+      return /* @__PURE__ */ jsx(
+        CollapsibleGroup,
+        {
+          fieldPath,
+          ref: isPending ? pendingFieldCollapsibleGroup : void 0,
+          groupKey: createCollapsibleGroupKey({ collectionSlug, documentId, globalSlug, fieldPath }),
+          label: isPending ? pendingField.label : resolveFieldLabel({ registry: fieldLabelRegistry, collectionSlug, documentId, globalSlug, fieldPath }),
+          level: "field",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+            fieldComments.map((comment) => /* @__PURE__ */ jsx(CommentItem, { comment, currentUserId: userId }, comment.id)),
+            /* @__PURE__ */ jsx(
+              CommentEditor,
+              {
+                ref: isPending ? editorRef : void 0,
+                fieldPath,
+                collectionSlug,
+                documentId,
+                globalSlug
+              }
+            )
+          ] })
+        },
+        fieldPath
+      );
+    })
   ] });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CommentsPanel/components/FieldGroupSection.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types/comment\";\nimport { CollapsibleGroup } from \"./CollapsibleGroup\";\nimport { CommentItem } from \"../../CommentItem\";\nimport { createCollapsibleGroupKey } from \"../utils/createCollapsibleGroupKey\";\nimport { resolveFieldLabel } from \"../utils/resolveFieldLabel\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { CommentEditor } from \"../../CommentEditor\";\n\ninterface Props {\n  fields: Map<string | null, Comment[]>;\n  userId: number | null;\n  collectionSlug?: string;\n  documentId?: number;\n  globalSlug?: string;\n}\n\nexport function FieldGroupSection({ fields, userId, collectionSlug, documentId, globalSlug }: Props) {\n  const { t } = useTranslation();\n  const { fieldLabelRegistry } = useComments();\n\n  const generalComments = fields.get(null) ?? [];\n  const fieldEntries = [...fields.entries()].filter((entry): entry is [string, Comment[]] => entry[0] !== null);\n\n  return (\n    <>\n      <CollapsibleGroup\n        groupKey={createCollapsibleGroupKey({ collectionSlug, documentId, globalSlug, fieldPath: null })}\n        label={t(\"comments:general\" as never)}\n        level=\"field\">\n        <div className=\"flex flex-col gap-3\">\n          {generalComments.map((comment) => (\n            <CommentItem key={comment.id} comment={comment} currentUserId={userId} />\n          ))}\n\n          <CommentEditor\n            fieldPath={null}\n            collectionSlug={collectionSlug}\n            documentId={documentId}\n            globalSlug={globalSlug}\n          />\n        </div>\n      </CollapsibleGroup>\n\n      {fieldEntries.map(([fieldPath, fieldComments]) => (\n        <CollapsibleGroup\n          key={fieldPath}\n          groupKey={createCollapsibleGroupKey({ collectionSlug, documentId, globalSlug, fieldPath })}\n          label={resolveFieldLabel({ registry: fieldLabelRegistry, collectionSlug, documentId, globalSlug, fieldPath })}\n          level=\"field\">\n          <div className=\"flex flex-col gap-3\" data-field-path={fieldPath}>\n            {fieldComments.map((comment) => (\n              <CommentItem key={comment.id} comment={comment} currentUserId={userId} />\n            ))}\n\n            <CommentEditor\n              fieldPath={fieldPath}\n              collectionSlug={collectionSlug}\n              documentId={documentId}\n              globalSlug={globalSlug}\n            />\n          </div>\n        </CollapsibleGroup>\n      ))}\n    </>\n  );\n}\n"],"mappings":";AA2BI,mBAOQ,KAFJ,YALJ;AAzBJ,SAAS,sBAAsB;AAE/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAUvB,SAAS,kBAAkB,EAAE,QAAQ,QAAQ,gBAAgB,YAAY,WAAW,GAAU;AACnG,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,mBAAmB,IAAI,YAAY;AAE3C,QAAM,kBAAkB,OAAO,IAAI,IAAI,KAAK,CAAC;AAC7C,QAAM,eAAe,CAAC,GAAG,OAAO,QAAQ,CAAC,EAAE,OAAO,CAAC,UAAwC,MAAM,CAAC,MAAM,IAAI;AAE5G,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,0BAA0B,EAAE,gBAAgB,YAAY,YAAY,WAAW,KAAK,CAAC;AAAA,QAC/F,OAAO,EAAE,kBAA2B;AAAA,QACpC,OAAM;AAAA,QACN,+BAAC,SAAI,WAAU,uBACZ;AAAA,0BAAgB,IAAI,CAAC,YACpB,oBAAC,eAA6B,SAAkB,eAAe,UAA7C,QAAQ,EAA6C,CACxE;AAAA,UAED;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IAEC,aAAa,IAAI,CAAC,CAAC,WAAW,aAAa,MAC1C;AAAA,MAAC;AAAA;AAAA,QAEC,UAAU,0BAA0B,EAAE,gBAAgB,YAAY,YAAY,UAAU,CAAC;AAAA,QACzF,OAAO,kBAAkB,EAAE,UAAU,oBAAoB,gBAAgB,YAAY,YAAY,UAAU,CAAC;AAAA,QAC5G,OAAM;AAAA,QACN,+BAAC,SAAI,WAAU,uBAAsB,mBAAiB,WACnD;AAAA,wBAAc,IAAI,CAAC,YAClB,oBAAC,eAA6B,SAAkB,eAAe,UAA7C,QAAQ,EAA6C,CACxE;AAAA,UAED;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,WACF;AAAA;AAAA,MAfK;AAAA,IAgBP,CACD;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/CommentsPanel/components/FieldGroupSection.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef, useEffect } from \"react\";\nimport { useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types/comment\";\nimport { CollapsibleGroup, type CollapsibleGroupHandle } from \"./CollapsibleGroup\";\nimport { CommentItem } from \"../../CommentItem\";\nimport { createCollapsibleGroupKey } from \"../utils/createCollapsibleGroupKey\";\nimport { resolveFieldLabel } from \"../utils/resolveFieldLabel\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { CommentEditor } from \"../../CommentEditor\";\nimport type { CommentEditorHandle } from \"../../CommentEditor\";\nimport { useCommentsDrawer } from \"../../../providers/CommentsDrawerProvider\";\nimport { useFieldLabelsQuery } from \"../../../api/queries/useFieldLabelsQuery\";\nimport { DRAWER_OPENING_TIME } from \"../../../constants\";\n\ninterface Props {\n  fields: Map<string | null, Comment[]>;\n  userId: number | null;\n  collectionSlug?: string;\n  documentId?: number;\n  globalSlug?: string;\n}\n\nexport function FieldGroupSection({ fields, userId, collectionSlug, documentId, globalSlug }: Props) {\n  const { t } = useTranslation();\n  const { queryContext } = useComments();\n  const { data: fieldLabelRegistry = {} } = useFieldLabelsQuery(queryContext);\n  const { pendingField } = useCommentsDrawer();\n  const editorRef = useRef<CommentEditorHandle | null>(null);\n  const pendingFieldCollapsibleGroup = useRef<CollapsibleGroupHandle | null>(null);\n\n  const generalComments = fields.get(null) ?? [];\n  const fieldEntries = [...fields.entries()].filter((entry): entry is [string, Comment[]] => entry[0] !== null);\n\n  const allEntries: [string, Comment[]][] = [\n    ...fieldEntries,\n    ...(pendingField && !fields.has(pendingField.path) ? [[pendingField.path, []] as [string, Comment[]]] : []),\n  ];\n\n  useEffect(() => {\n    if (!pendingField) return;\n\n    pendingFieldCollapsibleGroup.current?.open();\n\n    const id = setTimeout(() => editorRef.current?.focus(), DRAWER_OPENING_TIME);\n\n    return () => clearTimeout(id);\n  }, [pendingField]);\n\n  return (\n    <>\n      <CollapsibleGroup\n        groupKey={createCollapsibleGroupKey({ collectionSlug, documentId, globalSlug, fieldPath: null })}\n        label={t(\"comments:general\" as never)}\n        level=\"field\">\n        <div className=\"flex flex-col gap-3\">\n          {generalComments.map((comment) => (\n            <CommentItem key={comment.id} comment={comment} currentUserId={userId} />\n          ))}\n\n          <CommentEditor\n            fieldPath={null}\n            collectionSlug={collectionSlug}\n            documentId={documentId}\n            globalSlug={globalSlug}\n          />\n        </div>\n      </CollapsibleGroup>\n\n      {allEntries.map(([fieldPath, fieldComments]) => {\n        const isPending = pendingField?.path === fieldPath;\n\n        return (\n          <CollapsibleGroup\n            key={fieldPath}\n            fieldPath={fieldPath}\n            ref={isPending ? pendingFieldCollapsibleGroup : undefined}\n            groupKey={createCollapsibleGroupKey({ collectionSlug, documentId, globalSlug, fieldPath })}\n            label={\n              isPending ?\n                pendingField.label\n              : resolveFieldLabel({ registry: fieldLabelRegistry, collectionSlug, documentId, globalSlug, fieldPath })\n            }\n            level=\"field\">\n            <div className=\"flex flex-col gap-3\">\n              {fieldComments.map((comment) => (\n                <CommentItem key={comment.id} comment={comment} currentUserId={userId} />\n              ))}\n\n              <CommentEditor\n                ref={isPending ? editorRef : undefined}\n                fieldPath={fieldPath}\n                collectionSlug={collectionSlug}\n                documentId={documentId}\n                globalSlug={globalSlug}\n              />\n            </div>\n          </CollapsibleGroup>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";AAmDI,mBAOQ,KAFJ,YALJ;AAjDJ,SAAS,QAAQ,iBAAiB;AAClC,SAAS,sBAAsB;AAE/B,SAAS,wBAAqD;AAC9D,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AAU7B,SAAS,kBAAkB,EAAE,QAAQ,QAAQ,gBAAgB,YAAY,WAAW,GAAU;AACnG,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,aAAa,IAAI,YAAY;AACrC,QAAM,EAAE,MAAM,qBAAqB,CAAC,EAAE,IAAI,oBAAoB,YAAY;AAC1E,QAAM,EAAE,aAAa,IAAI,kBAAkB;AAC3C,QAAM,YAAY,OAAmC,IAAI;AACzD,QAAM,+BAA+B,OAAsC,IAAI;AAE/E,QAAM,kBAAkB,OAAO,IAAI,IAAI,KAAK,CAAC;AAC7C,QAAM,eAAe,CAAC,GAAG,OAAO,QAAQ,CAAC,EAAE,OAAO,CAAC,UAAwC,MAAM,CAAC,MAAM,IAAI;AAE5G,QAAM,aAAoC;AAAA,IACxC,GAAG;AAAA,IACH,GAAI,gBAAgB,CAAC,OAAO,IAAI,aAAa,IAAI,IAAI,CAAC,CAAC,aAAa,MAAM,CAAC,CAAC,CAAwB,IAAI,CAAC;AAAA,EAC3G;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,aAAc;AAEnB,iCAA6B,SAAS,KAAK;AAE3C,UAAM,KAAK,WAAW,MAAM,UAAU,SAAS,MAAM,GAAG,mBAAmB;AAE3E,WAAO,MAAM,aAAa,EAAE;AAAA,EAC9B,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,0BAA0B,EAAE,gBAAgB,YAAY,YAAY,WAAW,KAAK,CAAC;AAAA,QAC/F,OAAO,EAAE,kBAA2B;AAAA,QACpC,OAAM;AAAA,QACN,+BAAC,SAAI,WAAU,uBACZ;AAAA,0BAAgB,IAAI,CAAC,YACpB,oBAAC,eAA6B,SAAkB,eAAe,UAA7C,QAAQ,EAA6C,CACxE;AAAA,UAED;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IAEC,WAAW,IAAI,CAAC,CAAC,WAAW,aAAa,MAAM;AAC9C,YAAM,YAAY,cAAc,SAAS;AAEzC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,KAAK,YAAY,+BAA+B;AAAA,UAChD,UAAU,0BAA0B,EAAE,gBAAgB,YAAY,YAAY,UAAU,CAAC;AAAA,UACzF,OACE,YACE,aAAa,QACb,kBAAkB,EAAE,UAAU,oBAAoB,gBAAgB,YAAY,YAAY,UAAU,CAAC;AAAA,UAEzG,OAAM;AAAA,UACN,+BAAC,SAAI,WAAU,uBACZ;AAAA,0BAAc,IAAI,CAAC,YAClB,oBAAC,eAA6B,SAAkB,eAAe,UAA7C,QAAQ,EAA6C,CACxE;AAAA,YAED;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,YAAY,YAAY;AAAA,gBAC7B;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,aACF;AAAA;AAAA,QAtBK;AAAA,MAuBP;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalDocumentView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/GlobalDocumentView.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,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAiBxE"}
+{"version":3,"file":"GlobalDocumentView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/GlobalDocumentView.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,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAUxE"}

package/dist/components/CommentsPanel/components/GlobalDocumentView.js

@@ -1,18 +1,12 @@
 "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 GlobalDocumentView({ comments, userId, className }) {
-  const { t } = useTranslation();
-  const { filter, globalSlug } = useComments();
+  const { globalSlug } = 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, globalSlug: globalSlug ?? void 0 })
-  ] });
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(FieldGroupSection, { fields, userId, globalSlug: globalSlug ?? void 0 }) });
 }
 export {
   GlobalDocumentView

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CommentsPanel/components/GlobalDocumentView.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 GlobalDocumentView({ comments, userId, className }: Props) {\n  const { t } = useTranslation();\n  const { filter, globalSlug } = 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 fields={fields} userId={userId} globalSlug={globalSlug ?? undefined} />\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,mBAAmB,EAAE,UAAU,QAAQ,UAAU,GAAU;AACzE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,QAAQ,WAAW,IAAI,YAAY;AAE3C,QAAM,SAAS,yBAAyB,QAAQ;AAEhD,SACE,qBAAC,SAAI,WACF;AAAA,aAAS,WAAW,KACnB,oBAAC,OAAE,WAAU,iEACV,YAAE,wBAAwB,MAAM,CAAU,GAC7C;AAAA,IAGF,oBAAC,qBAAkB,QAAgB,QAAgB,YAAY,cAAc,QAAW;AAAA,KAC1F;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/CommentsPanel/components/GlobalDocumentView.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 GlobalDocumentView({ comments, userId, className }: Props) {\n  const { globalSlug } = useComments();\n\n  const fields = groupCommentsByFieldPath(comments);\n\n  return (\n    <div className={className}>\n      <FieldGroupSection fields={fields} userId={userId} globalSlug={globalSlug ?? undefined} />\n    </div>\n  );\n}\n"],"mappings":";AAoBM;AAjBN,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,yBAAyB;AAQ3B,SAAS,mBAAmB,EAAE,UAAU,QAAQ,UAAU,GAAU;AACzE,QAAM,EAAE,WAAW,IAAI,YAAY;AAEnC,QAAM,SAAS,yBAAyB,QAAQ;AAEhD,SACE,oBAAC,SAAI,WACH,8BAAC,qBAAkB,QAAgB,QAAgB,YAAY,cAAc,QAAW,GAC1F;AAEJ;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/GlobalView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAStD,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAwDhE"}
+{"version":3,"file":"GlobalView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/GlobalView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAStD,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAkDhE"}

package/dist/components/CommentsPanel/components/GlobalView.js

@@ -1,60 +1,57 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useLocale, useTranslation } from "@payloadcms/ui";
+import { jsx } from "react/jsx-runtime";
+import { useLocale } from "@payloadcms/ui";
 import { useComments } from "../../../providers/CommentsProvider";
+import { useDocumentTitlesQuery } from "../../../api/queries/useDocumentTitlesQuery";
 import { groupCommentsGlobally } from "../utils/groupCommentsGlobally";
 import { resolveEntityLabel } from "../utils/resolveEntityLabel";
 import { CollapsibleGroup } from "./CollapsibleGroup";
-import { FILTER_NO_COMMENTS_KEYS } from "../constants";
 import { FieldGroupSection } from "./FieldGroupSection";
 import { createCollapsibleGroupKey } from "../utils/createCollapsibleGroupKey";
 function GlobalView({ comments, userId, className }) {
-  const { t } = useTranslation();
-  const { documentTitles, filter, collectionLabels, globalLabels } = useComments();
+  const { collectionLabels, globalLabels, queryContext } = useComments();
+  const { data: documentTitles = {} } = useDocumentTitlesQuery(queryContext);
   const { code: locale } = useLocale();
   const groupedComments = groupCommentsGlobally(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]) }),
-    groupedComments.map((entry) => {
-      if (entry.type === "collection") {
-        const { slug: slug2, docs } = entry;
-        return /* @__PURE__ */ jsx(
-          CollapsibleGroup,
-          {
-            groupKey: slug2,
-            label: resolveEntityLabel(collectionLabels[slug2], locale, slug2),
-            level: "collection",
-            children: [...docs.entries()].map(([docId, fields2]) => {
-              const title = documentTitles[slug2]?.[String(docId)] ?? String(docId);
-              const documentId = Number(docId);
-              return /* @__PURE__ */ jsx(
-                CollapsibleGroup,
-                {
-                  groupKey: createCollapsibleGroupKey({ collectionSlug: slug2, documentId }),
-                  label: title,
-                  level: "document",
-                  children: /* @__PURE__ */ jsx(FieldGroupSection, { fields: fields2, userId, collectionSlug: slug2, documentId })
-                },
-                docId
-              );
-            })
-          },
-          slug2
-        );
-      }
-      const { slug, fields } = entry;
+  return /* @__PURE__ */ jsx("div", { className, children: groupedComments.map((entry) => {
+    if (entry.type === "collection") {
+      const { slug: slug2, docs } = entry;
       return /* @__PURE__ */ jsx(
         CollapsibleGroup,
         {
-          groupKey: slug,
-          label: resolveEntityLabel(globalLabels[slug], locale, slug),
+          groupKey: slug2,
+          label: resolveEntityLabel(collectionLabels[slug2], locale, slug2),
           level: "collection",
-          children: /* @__PURE__ */ jsx(FieldGroupSection, { fields, userId, globalSlug: slug })
+          children: [...docs.entries()].map(([docId, fields2]) => {
+            const title = documentTitles[slug2]?.[String(docId)] ?? String(docId);
+            const documentId = Number(docId);
+            return /* @__PURE__ */ jsx(
+              CollapsibleGroup,
+              {
+                groupKey: createCollapsibleGroupKey({ collectionSlug: slug2, documentId }),
+                label: title,
+                level: "document",
+                children: /* @__PURE__ */ jsx(FieldGroupSection, { fields: fields2, userId, collectionSlug: slug2, documentId })
+              },
+              docId
+            );
+          })
         },
-        slug
+        slug2
       );
-    })
-  ] });
+    }
+    const { slug, fields } = entry;
+    return /* @__PURE__ */ jsx(
+      CollapsibleGroup,
+      {
+        groupKey: slug,
+        label: resolveEntityLabel(globalLabels[slug], locale, slug),
+        level: "collection",
+        children: /* @__PURE__ */ jsx(FieldGroupSection, { fields, userId, globalSlug: slug })
+      },
+      slug
+    );
+  }) });
 }
 export {
   GlobalView

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CommentsPanel/components/GlobalView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLocale, useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types/comment\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { groupCommentsGlobally } from \"../utils/groupCommentsGlobally\";\nimport { resolveEntityLabel } from \"../utils/resolveEntityLabel\";\nimport { CollapsibleGroup } from \"./CollapsibleGroup\";\nimport { FILTER_NO_COMMENTS_KEYS } from \"../constants\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\nimport { createCollapsibleGroupKey } from \"../utils/createCollapsibleGroupKey\";\n\ninterface Props {\n  comments: Comment[];\n  userId: number | null;\n  className: string;\n}\n\nexport function GlobalView({ comments, userId, className }: Props) {\n  const { t } = useTranslation();\n  const { documentTitles, filter, collectionLabels, globalLabels } = useComments();\n  const { code: locale } = useLocale();\n  const groupedComments = groupCommentsGlobally(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      {groupedComments.map((entry) => {\n        if (entry.type === \"collection\") {\n          const { slug, docs } = entry;\n\n          return (\n            <CollapsibleGroup\n              key={slug}\n              groupKey={slug}\n              label={resolveEntityLabel(collectionLabels[slug], locale, slug)}\n              level=\"collection\">\n              {[...docs.entries()].map(([docId, fields]) => {\n                const title = documentTitles[slug]?.[String(docId)] ?? String(docId);\n                const documentId = Number(docId);\n\n                return (\n                  <CollapsibleGroup\n                    key={docId}\n                    groupKey={createCollapsibleGroupKey({ collectionSlug: slug, documentId })}\n                    label={title}\n                    level=\"document\">\n                    <FieldGroupSection fields={fields} userId={userId} collectionSlug={slug} documentId={documentId} />\n                  </CollapsibleGroup>\n                );\n              })}\n            </CollapsibleGroup>\n          );\n        }\n\n        const { slug, fields } = entry;\n\n        return (\n          <CollapsibleGroup\n            key={slug}\n            groupKey={slug}\n            label={resolveEntityLabel(globalLabels[slug], locale, slug)}\n            level=\"collection\">\n            <FieldGroupSection fields={fields} userId={userId} globalSlug={slug} />\n          </CollapsibleGroup>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAyBI,SAEI,KAFJ;AAvBJ,SAAS,WAAW,sBAAsB;AAE1C,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,iCAAiC;AAQnC,SAAS,WAAW,EAAE,UAAU,QAAQ,UAAU,GAAU;AACjE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,gBAAgB,QAAQ,kBAAkB,aAAa,IAAI,YAAY;AAC/E,QAAM,EAAE,MAAM,OAAO,IAAI,UAAU;AACnC,QAAM,kBAAkB,sBAAsB,QAAQ;AAEtD,SACE,qBAAC,SAAI,WACF;AAAA,aAAS,WAAW,KACnB,oBAAC,OAAE,WAAU,iEACV,YAAE,wBAAwB,MAAM,CAAU,GAC7C;AAAA,IAGD,gBAAgB,IAAI,CAAC,UAAU;AAC9B,UAAI,MAAM,SAAS,cAAc;AAC/B,cAAM,EAAE,MAAAA,OAAM,KAAK,IAAI;AAEvB,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,UAAUA;AAAA,YACV,OAAO,mBAAmB,iBAAiBA,KAAI,GAAG,QAAQA,KAAI;AAAA,YAC9D,OAAM;AAAA,YACL,WAAC,GAAG,KAAK,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,OAAOC,OAAM,MAAM;AAC5C,oBAAM,QAAQ,eAAeD,KAAI,IAAI,OAAO,KAAK,CAAC,KAAK,OAAO,KAAK;AACnE,oBAAM,aAAa,OAAO,KAAK;AAE/B,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,UAAU,0BAA0B,EAAE,gBAAgBA,OAAM,WAAW,CAAC;AAAA,kBACxE,OAAO;AAAA,kBACP,OAAM;AAAA,kBACN,8BAAC,qBAAkB,QAAQC,SAAQ,QAAgB,gBAAgBD,OAAM,YAAwB;AAAA;AAAA,gBAJ5F;AAAA,cAKP;AAAA,YAEJ,CAAC;AAAA;AAAA,UAjBIA;AAAA,QAkBP;AAAA,MAEJ;AAEA,YAAM,EAAE,MAAM,OAAO,IAAI;AAEzB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV,OAAO,mBAAmB,aAAa,IAAI,GAAG,QAAQ,IAAI;AAAA,UAC1D,OAAM;AAAA,UACN,8BAAC,qBAAkB,QAAgB,QAAgB,YAAY,MAAM;AAAA;AAAA,QAJhE;AAAA,MAKP;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ;","names":["slug","fields"]}
+{"version":3,"sources":["../../../../src/components/CommentsPanel/components/GlobalView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLocale } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types/comment\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { useDocumentTitlesQuery } from \"../../../api/queries/useDocumentTitlesQuery\";\nimport { groupCommentsGlobally } from \"../utils/groupCommentsGlobally\";\nimport { resolveEntityLabel } from \"../utils/resolveEntityLabel\";\nimport { CollapsibleGroup } from \"./CollapsibleGroup\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\nimport { createCollapsibleGroupKey } from \"../utils/createCollapsibleGroupKey\";\n\ninterface Props {\n  comments: Comment[];\n  userId: number | null;\n  className: string;\n}\n\nexport function GlobalView({ comments, userId, className }: Props) {\n  const { collectionLabels, globalLabels, queryContext } = useComments();\n  const { data: documentTitles = {} } = useDocumentTitlesQuery(queryContext);\n  const { code: locale } = useLocale();\n  const groupedComments = groupCommentsGlobally(comments);\n\n  return (\n    <div className={className}>\n      {groupedComments.map((entry) => {\n        if (entry.type === \"collection\") {\n          const { slug, docs } = entry;\n\n          return (\n            <CollapsibleGroup\n              key={slug}\n              groupKey={slug}\n              label={resolveEntityLabel(collectionLabels[slug], locale, slug)}\n              level=\"collection\">\n              {[...docs.entries()].map(([docId, fields]) => {\n                const title = documentTitles[slug]?.[String(docId)] ?? String(docId);\n                const documentId = Number(docId);\n\n                return (\n                  <CollapsibleGroup\n                    key={docId}\n                    groupKey={createCollapsibleGroupKey({ collectionSlug: slug, documentId })}\n                    label={title}\n                    level=\"document\">\n                    <FieldGroupSection fields={fields} userId={userId} collectionSlug={slug} documentId={documentId} />\n                  </CollapsibleGroup>\n                );\n              })}\n            </CollapsibleGroup>\n          );\n        }\n\n        const { slug, fields } = entry;\n\n        return (\n          <CollapsibleGroup\n            key={slug}\n            groupKey={slug}\n            label={resolveEntityLabel(globalLabels[slug], locale, slug)}\n            level=\"collection\">\n            <FieldGroupSection fields={fields} userId={userId} globalSlug={slug} />\n          </CollapsibleGroup>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA8CoB;AA5CpB,SAAS,iBAAiB;AAE1B,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,iCAAiC;AAQnC,SAAS,WAAW,EAAE,UAAU,QAAQ,UAAU,GAAU;AACjE,QAAM,EAAE,kBAAkB,cAAc,aAAa,IAAI,YAAY;AACrE,QAAM,EAAE,MAAM,iBAAiB,CAAC,EAAE,IAAI,uBAAuB,YAAY;AACzE,QAAM,EAAE,MAAM,OAAO,IAAI,UAAU;AACnC,QAAM,kBAAkB,sBAAsB,QAAQ;AAEtD,SACE,oBAAC,SAAI,WACF,0BAAgB,IAAI,CAAC,UAAU;AAC9B,QAAI,MAAM,SAAS,cAAc;AAC/B,YAAM,EAAE,MAAAA,OAAM,KAAK,IAAI;AAEvB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,UAAUA;AAAA,UACV,OAAO,mBAAmB,iBAAiBA,KAAI,GAAG,QAAQA,KAAI;AAAA,UAC9D,OAAM;AAAA,UACL,WAAC,GAAG,KAAK,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,OAAOC,OAAM,MAAM;AAC5C,kBAAM,QAAQ,eAAeD,KAAI,IAAI,OAAO,KAAK,CAAC,KAAK,OAAO,KAAK;AACnE,kBAAM,aAAa,OAAO,KAAK;AAE/B,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,UAAU,0BAA0B,EAAE,gBAAgBA,OAAM,WAAW,CAAC;AAAA,gBACxE,OAAO;AAAA,gBACP,OAAM;AAAA,gBACN,8BAAC,qBAAkB,QAAQC,SAAQ,QAAgB,gBAAgBD,OAAM,YAAwB;AAAA;AAAA,cAJ5F;AAAA,YAKP;AAAA,UAEJ,CAAC;AAAA;AAAA,QAjBIA;AAAA,MAkBP;AAAA,IAEJ;AAEA,UAAM,EAAE,MAAM,OAAO,IAAI;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,UAAU;AAAA,QACV,OAAO,mBAAmB,aAAa,IAAI,GAAG,QAAQ,IAAI;AAAA,QAC1D,OAAM;AAAA,QACN,8BAAC,qBAAkB,QAAgB,QAAgB,YAAY,MAAM;AAAA;AAAA,MAJhE;AAAA,IAKP;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":["slug","fields"]}

package/dist/components/CommentsPanel/hooks/useCollapseState.d.ts

@@ -1,2 +1,2 @@
-export declare function useCollapseState(groupKey: string): [isCollapsed: boolean, toggle: () => void];
+export declare function useCollapseState(groupKey: string): [isCollapsed: boolean, toggle: () => void, open: () => void];
 //# sourceMappingURL=useCollapseState.d.ts.map

package/dist/components/CommentsPanel/hooks/useCollapseState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCollapseState.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/hooks/useCollapseState.ts"],"names":[],"mappings":"AAoBA,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC,CA8B7F"}
+{"version":3,"file":"useCollapseState.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/hooks/useCollapseState.ts"],"names":[],"mappings":"AAoBA,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC,CAkC/G"}

package/dist/components/CommentsPanel/hooks/useCollapseState.js

@@ -36,7 +36,10 @@ function useCollapseState(groupKey) {
       return next;
     });
   };
-  return [isCollapsed, toggle];
+  const open = () => {
+    setIsCollapsed(false);
+  };
+  return [isCollapsed, toggle, open];
 }
 export {
   useCollapseState

package/dist/components/CommentsPanel/hooks/useCollapseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CommentsPanel/hooks/useCollapseState.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect } from \"react\";\n\nconst STORAGE_KEY = \"payload-comments-collapsed\";\n\nfunction readStorage(): Record<string, boolean> {\n  try {\n    return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? \"{}\");\n  } catch {\n    return {};\n  }\n}\n\nfunction writeStorage(data: Record<string, boolean>) {\n  try {\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n  } catch {}\n}\n\nexport function useCollapseState(groupKey: string): [isCollapsed: boolean, toggle: () => void] {\n  const [isCollapsed, setIsCollapsed] = useState(() => {\n    const stored = readStorage();\n\n    return stored[groupKey] === true;\n  });\n\n  useEffect(() => {\n    const stored = readStorage();\n\n    setIsCollapsed(stored[groupKey] === true);\n  }, [groupKey]);\n\n  const toggle = () => {\n    setIsCollapsed((prev) => {\n      const next = !prev;\n      const stored = readStorage();\n\n      if (next) {\n        stored[groupKey] = true;\n      } else {\n        delete stored[groupKey];\n      }\n\n      writeStorage(stored);\n      return next;\n    });\n  };\n\n  return [isCollapsed, toggle];\n}\n"],"mappings":";AAEA,SAAS,UAAU,iBAAiB;AAEpC,MAAM,cAAc;AAEpB,SAAS,cAAuC;AAC9C,MAAI;AACF,WAAO,KAAK,MAAM,aAAa,QAAQ,WAAW,KAAK,IAAI;AAAA,EAC7D,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;AAEA,SAAS,aAAa,MAA+B;AACnD,MAAI;AACF,iBAAa,QAAQ,aAAa,KAAK,UAAU,IAAI,CAAC;AAAA,EACxD,QAAQ;AAAA,EAAC;AACX;AAEO,SAAS,iBAAiB,UAA8D;AAC7F,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,MAAM;AACnD,UAAM,SAAS,YAAY;AAE3B,WAAO,OAAO,QAAQ,MAAM;AAAA,EAC9B,CAAC;AAED,YAAU,MAAM;AACd,UAAM,SAAS,YAAY;AAE3B,mBAAe,OAAO,QAAQ,MAAM,IAAI;AAAA,EAC1C,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,SAAS,MAAM;AACnB,mBAAe,CAAC,SAAS;AACvB,YAAM,OAAO,CAAC;AACd,YAAM,SAAS,YAAY;AAE3B,UAAI,MAAM;AACR,eAAO,QAAQ,IAAI;AAAA,MACrB,OAAO;AACL,eAAO,OAAO,QAAQ;AAAA,MACxB;AAEA,mBAAa,MAAM;AACnB,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,SAAO,CAAC,aAAa,MAAM;AAC7B;","names":[]}
+{"version":3,"sources":["../../../../src/components/CommentsPanel/hooks/useCollapseState.ts"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect } from \"react\";\n\nconst STORAGE_KEY = \"payload-comments-collapsed\";\n\nfunction readStorage(): Record<string, boolean> {\n  try {\n    return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? \"{}\");\n  } catch {\n    return {};\n  }\n}\n\nfunction writeStorage(data: Record<string, boolean>) {\n  try {\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n  } catch {}\n}\n\nexport function useCollapseState(groupKey: string): [isCollapsed: boolean, toggle: () => void, open: () => void] {\n  const [isCollapsed, setIsCollapsed] = useState(() => {\n    const stored = readStorage();\n\n    return stored[groupKey] === true;\n  });\n\n  useEffect(() => {\n    const stored = readStorage();\n\n    setIsCollapsed(stored[groupKey] === true);\n  }, [groupKey]);\n\n  const toggle = () => {\n    setIsCollapsed((prev) => {\n      const next = !prev;\n      const stored = readStorage();\n\n      if (next) {\n        stored[groupKey] = true;\n      } else {\n        delete stored[groupKey];\n      }\n\n      writeStorage(stored);\n      return next;\n    });\n  };\n\n  const open = () => {\n    setIsCollapsed(false);\n  };\n\n  return [isCollapsed, toggle, open];\n}\n"],"mappings":";AAEA,SAAS,UAAU,iBAAiB;AAEpC,MAAM,cAAc;AAEpB,SAAS,cAAuC;AAC9C,MAAI;AACF,WAAO,KAAK,MAAM,aAAa,QAAQ,WAAW,KAAK,IAAI;AAAA,EAC7D,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;AAEA,SAAS,aAAa,MAA+B;AACnD,MAAI;AACF,iBAAa,QAAQ,aAAa,KAAK,UAAU,IAAI,CAAC;AAAA,EACxD,QAAQ;AAAA,EAAC;AACX;AAEO,SAAS,iBAAiB,UAAgF;AAC/G,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,MAAM;AACnD,UAAM,SAAS,YAAY;AAE3B,WAAO,OAAO,QAAQ,MAAM;AAAA,EAC9B,CAAC;AAED,YAAU,MAAM;AACd,UAAM,SAAS,YAAY;AAE3B,mBAAe,OAAO,QAAQ,MAAM,IAAI;AAAA,EAC1C,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,SAAS,MAAM;AACnB,mBAAe,CAAC,SAAS;AACvB,YAAM,OAAO,CAAC;AACd,YAAM,SAAS,YAAY;AAE3B,UAAI,MAAM;AACR,eAAO,QAAQ,IAAI;AAAA,MACrB,OAAO;AACL,eAAO,OAAO,QAAQ;AAAA,MACxB;AAEA,mBAAa,MAAM;AACnB,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,QAAM,OAAO,MAAM;AACjB,mBAAe,KAAK;AAAA,EACtB;AAEA,SAAO,CAAC,aAAa,QAAQ,IAAI;AACnC;","names":[]}

package/dist/components/CommentsPanel/hooks/useScrollToTargetFieldGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollToTargetFieldGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/hooks/useScrollToTargetFieldGroup.ts"],"names":[],"mappings":"AAGA,wBAAgB,2BAA2B,SAqC1C"}
+{"version":3,"file":"useScrollToTargetFieldGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/hooks/useScrollToTargetFieldGroup.ts"],"names":[],"mappings":"AAIA,wBAAgB,2BAA2B,SAkC1C"}

package/dist/components/CommentsPanel/hooks/useScrollToTargetFieldGroup.js

@@ -1,3 +1,4 @@
+import { DRAWER_OPENING_TIME } from "../../../constants";
 import { useCommentsDrawer } from "../../../providers/CommentsDrawerProvider";
 import { useLayoutEffect } from "react";
 function useScrollToTargetFieldGroup() {
@@ -14,18 +15,16 @@ function useScrollToTargetFieldGroup() {
         scrollContainer = scrollContainer.parentElement;
       }
       if (!scrollContainer || scrollContainer === document.documentElement) {
-        section.scrollIntoView({ behavior: "smooth", block: "start" });
+        section.scrollIntoView({ behavior: "smooth", block: "end" });
         setScrollTargetPath(null);
         return;
       }
-      const header = scrollContainer.querySelector("header");
-      const headerHeight = header?.getBoundingClientRect().height ?? 0;
-      const sectionTop = section.getBoundingClientRect().top;
-      const containerTop = scrollContainer.getBoundingClientRect().top;
-      const scrollOffset = sectionTop - containerTop - headerHeight + scrollContainer.scrollTop;
+      const sectionBottom = section.getBoundingClientRect().bottom;
+      const containerBottom = scrollContainer.getBoundingClientRect().bottom;
+      const scrollOffset = scrollContainer.scrollTop + (sectionBottom - containerBottom) + 10;
       scrollContainer.scrollTo({ top: scrollOffset, behavior: "smooth" });
       setScrollTargetPath(null);
-    }, 300);
+    }, DRAWER_OPENING_TIME + 10);
     return () => clearTimeout(id);
   }, [scrollTargetPath, setScrollTargetPath]);
 }

package/dist/components/CommentsPanel/hooks/useScrollToTargetFieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CommentsPanel/hooks/useScrollToTargetFieldGroup.ts"],"sourcesContent":["import { useCommentsDrawer } from \"../../../providers/CommentsDrawerProvider\";\nimport { useLayoutEffect } from \"react\";\n\nexport function useScrollToTargetFieldGroup() {\n  const { scrollTargetPath, setScrollTargetPath } = useCommentsDrawer();\n\n  useLayoutEffect(() => {\n    if (!scrollTargetPath) return;\n\n    const id = setTimeout(() => {\n      const section = document.querySelector(`[data-field-path=\"${CSS.escape(scrollTargetPath)}\"]`);\n      if (!section) return;\n\n      let scrollContainer: Element | null = section.parentElement;\n\n      while (scrollContainer && scrollContainer !== document.documentElement) {\n        const { overflow, overflowY } = getComputedStyle(scrollContainer);\n        if (/auto|scroll/.test(overflow + overflowY)) break;\n        scrollContainer = scrollContainer.parentElement;\n      }\n\n      if (!scrollContainer || scrollContainer === document.documentElement) {\n        section.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n        setScrollTargetPath(null);\n        return;\n      }\n\n      const header = scrollContainer.querySelector(\"header\");\n      const headerHeight = header?.getBoundingClientRect().height ?? 0;\n\n      const sectionTop = section.getBoundingClientRect().top;\n      const containerTop = scrollContainer.getBoundingClientRect().top;\n      const scrollOffset = sectionTop - containerTop - headerHeight + scrollContainer.scrollTop;\n\n      scrollContainer.scrollTo({ top: scrollOffset, behavior: \"smooth\" });\n      setScrollTargetPath(null);\n    }, 300);\n\n    return () => clearTimeout(id);\n  }, [scrollTargetPath, setScrollTargetPath]);\n}\n"],"mappings":"AAAA,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAEzB,SAAS,8BAA8B;AAC5C,QAAM,EAAE,kBAAkB,oBAAoB,IAAI,kBAAkB;AAEpE,kBAAgB,MAAM;AACpB,QAAI,CAAC,iBAAkB;AAEvB,UAAM,KAAK,WAAW,MAAM;AAC1B,YAAM,UAAU,SAAS,cAAc,qBAAqB,IAAI,OAAO,gBAAgB,CAAC,IAAI;AAC5F,UAAI,CAAC,QAAS;AAEd,UAAI,kBAAkC,QAAQ;AAE9C,aAAO,mBAAmB,oBAAoB,SAAS,iBAAiB;AACtE,cAAM,EAAE,UAAU,UAAU,IAAI,iBAAiB,eAAe;AAChE,YAAI,cAAc,KAAK,WAAW,SAAS,EAAG;AAC9C,0BAAkB,gBAAgB;AAAA,MACpC;AAEA,UAAI,CAAC,mBAAmB,oBAAoB,SAAS,iBAAiB;AACpE,gBAAQ,eAAe,EAAE,UAAU,UAAU,OAAO,QAAQ,CAAC;AAC7D,4BAAoB,IAAI;AACxB;AAAA,MACF;AAEA,YAAM,SAAS,gBAAgB,cAAc,QAAQ;AACrD,YAAM,eAAe,QAAQ,sBAAsB,EAAE,UAAU;AAE/D,YAAM,aAAa,QAAQ,sBAAsB,EAAE;AACnD,YAAM,eAAe,gBAAgB,sBAAsB,EAAE;AAC7D,YAAM,eAAe,aAAa,eAAe,eAAe,gBAAgB;AAEhF,sBAAgB,SAAS,EAAE,KAAK,cAAc,UAAU,SAAS,CAAC;AAClE,0BAAoB,IAAI;AAAA,IAC1B,GAAG,GAAG;AAEN,WAAO,MAAM,aAAa,EAAE;AAAA,EAC9B,GAAG,CAAC,kBAAkB,mBAAmB,CAAC;AAC5C;","names":[]}
+{"version":3,"sources":["../../../../src/components/CommentsPanel/hooks/useScrollToTargetFieldGroup.ts"],"sourcesContent":["import { DRAWER_OPENING_TIME } from \"../../../constants\";\nimport { useCommentsDrawer } from \"../../../providers/CommentsDrawerProvider\";\nimport { useLayoutEffect } from \"react\";\n\nexport function useScrollToTargetFieldGroup() {\n  const { scrollTargetPath, setScrollTargetPath } = useCommentsDrawer();\n\n  useLayoutEffect(() => {\n    if (!scrollTargetPath) return;\n\n    const id = setTimeout(() => {\n      const section = document.querySelector(`[data-field-path=\"${CSS.escape(scrollTargetPath)}\"]`);\n      if (!section) return;\n\n      let scrollContainer: Element | null = section.parentElement;\n\n      while (scrollContainer && scrollContainer !== document.documentElement) {\n        const { overflow, overflowY } = getComputedStyle(scrollContainer);\n        if (/auto|scroll/.test(overflow + overflowY)) break;\n        scrollContainer = scrollContainer.parentElement;\n      }\n\n      if (!scrollContainer || scrollContainer === document.documentElement) {\n        section.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n        setScrollTargetPath(null);\n        return;\n      }\n\n      const sectionBottom = section.getBoundingClientRect().bottom;\n      const containerBottom = scrollContainer.getBoundingClientRect().bottom;\n      const scrollOffset = scrollContainer.scrollTop + (sectionBottom - containerBottom) + 10;\n\n      scrollContainer.scrollTo({ top: scrollOffset, behavior: \"smooth\" });\n      setScrollTargetPath(null);\n    }, DRAWER_OPENING_TIME + 10);\n\n    return () => clearTimeout(id);\n  }, [scrollTargetPath, setScrollTargetPath]);\n}\n"],"mappings":"AAAA,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAEzB,SAAS,8BAA8B;AAC5C,QAAM,EAAE,kBAAkB,oBAAoB,IAAI,kBAAkB;AAEpE,kBAAgB,MAAM;AACpB,QAAI,CAAC,iBAAkB;AAEvB,UAAM,KAAK,WAAW,MAAM;AAC1B,YAAM,UAAU,SAAS,cAAc,qBAAqB,IAAI,OAAO,gBAAgB,CAAC,IAAI;AAC5F,UAAI,CAAC,QAAS;AAEd,UAAI,kBAAkC,QAAQ;AAE9C,aAAO,mBAAmB,oBAAoB,SAAS,iBAAiB;AACtE,cAAM,EAAE,UAAU,UAAU,IAAI,iBAAiB,eAAe;AAChE,YAAI,cAAc,KAAK,WAAW,SAAS,EAAG;AAC9C,0BAAkB,gBAAgB;AAAA,MACpC;AAEA,UAAI,CAAC,mBAAmB,oBAAoB,SAAS,iBAAiB;AACpE,gBAAQ,eAAe,EAAE,UAAU,UAAU,OAAO,MAAM,CAAC;AAC3D,4BAAoB,IAAI;AACxB;AAAA,MACF;AAEA,YAAM,gBAAgB,QAAQ,sBAAsB,EAAE;AACtD,YAAM,kBAAkB,gBAAgB,sBAAsB,EAAE;AAChE,YAAM,eAAe,gBAAgB,aAAa,gBAAgB,mBAAmB;AAErF,sBAAgB,SAAS,EAAE,KAAK,cAAc,UAAU,SAAS,CAAC;AAClE,0BAAoB,IAAI;AAAA,IAC1B,GAAG,sBAAsB,EAAE;AAE3B,WAAO,MAAM,aAAa,EAAE;AAAA,EAC9B,GAAG,CAAC,kBAAkB,mBAAmB,CAAC;AAC5C;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentsPanel/index.tsx"],"names":[],"mappings":"AAWA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,kBAAmB,KAAK,4CAsBjD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentsPanel/index.tsx"],"names":[],"mappings":"AAYA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,kBAAmB,KAAK,4CA8BjD,CAAC"}

package/dist/components/CommentsPanel/index.js

@@ -1,30 +1,33 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useAuth } from "@payloadcms/ui";
+import { useAuth, useLocale, useTranslation } from "@payloadcms/ui";
 import { cn } from "../../utils/general/cn";
 import { useComments } from "../../providers/CommentsProvider";
-import { filterComments } from "./utils/filterComments";
+import { useCommentsQuery } from "../../api/queries/useCommentsQuery";
 import { DocumentView } from "./components/DocumentView";
 import { GlobalView } from "./components/GlobalView";
 import { GlobalDocumentView } from "./components/GlobalDocumentView";
 import { useScrollToTargetFieldGroup } from "./hooks/useScrollToTargetFieldGroup";
+import { filterCommentsByLocale } from "../../utils/comment/filterCommentsByLocale";
 const CommentsPanel = ({ className }) => {
   const { user } = useAuth();
-  const { visibleComments, filter, mode } = useComments();
+  const { t } = useTranslation();
+  const { code: currentLocale } = useLocale();
+  const { mode, queryContext } = useComments();
+  const { data: allComments = [], isLoading } = useCommentsQuery(queryContext);
   const userId = user?.id ?? null;
-  const filteredComments = filterComments({
-    comments: visibleComments,
-    filter,
-    currentUserId: userId ?? void 0
-  });
+  const visibleComments = filterCommentsByLocale(allComments, currentLocale);
   useScrollToTargetFieldGroup();
+  if (isLoading && allComments.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: cn(className, "text-(--theme-elevation-450) text-[13px] text-center py-6 m-0"), children: t("comments:loadingComments") });
+  }
   if (mode === "document") {
-    return /* @__PURE__ */ jsx(DocumentView, { comments: filteredComments, userId, className: cn(className) });
+    return /* @__PURE__ */ jsx(DocumentView, { comments: visibleComments, userId, className: cn(className) });
   }
   if (mode === "global-document") {
-    return /* @__PURE__ */ jsx(GlobalDocumentView, { comments: filteredComments, userId, className: cn(className) });
+    return /* @__PURE__ */ jsx(GlobalDocumentView, { comments: visibleComments, userId, className: cn(className) });
   }
-  return /* @__PURE__ */ jsx(GlobalView, { comments: filteredComments, userId, className: cn(className) });
+  return /* @__PURE__ */ jsx(GlobalView, { comments: visibleComments, userId, className: cn(className) });
 };
 export {
   CommentsPanel

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CommentsPanel/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useAuth } from \"@payloadcms/ui\";\nimport { cn } from \"../../utils/general/cn\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { filterComments } from \"./utils/filterComments\";\nimport { DocumentView } from \"./components/DocumentView\";\nimport { GlobalView } from \"./components/GlobalView\";\nimport { GlobalDocumentView } from \"./components/GlobalDocumentView\";\nimport { useScrollToTargetFieldGroup } from \"./hooks/useScrollToTargetFieldGroup\";\n\ninterface Props {\n  className: string;\n}\n\nexport const CommentsPanel = ({ className }: Props) => {\n  const { user } = useAuth();\n  const { visibleComments, filter, mode } = useComments();\n\n  const userId = (user?.id as number) ?? null;\n  const filteredComments = filterComments({\n    comments: visibleComments,\n    filter,\n    currentUserId: userId ?? undefined,\n  });\n\n  useScrollToTargetFieldGroup();\n\n  if (mode === \"document\") {\n    return <DocumentView comments={filteredComments} userId={userId} className={cn(className)} />;\n  }\n\n  if (mode === \"global-document\") {\n    return <GlobalDocumentView comments={filteredComments} userId={userId} className={cn(className)} />;\n  }\n\n  return <GlobalView comments={filteredComments} userId={userId} className={cn(className)} />;\n};\n"],"mappings":";AA6BW;AA3BX,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AACnC,SAAS,mCAAmC;AAMrC,MAAM,gBAAgB,CAAC,EAAE,UAAU,MAAa;AACrD,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,EAAE,iBAAiB,QAAQ,KAAK,IAAI,YAAY;AAEtD,QAAM,SAAU,MAAM,MAAiB;AACvC,QAAM,mBAAmB,eAAe;AAAA,IACtC,UAAU;AAAA,IACV;AAAA,IACA,eAAe,UAAU;AAAA,EAC3B,CAAC;AAED,8BAA4B;AAE5B,MAAI,SAAS,YAAY;AACvB,WAAO,oBAAC,gBAAa,UAAU,kBAAkB,QAAgB,WAAW,GAAG,SAAS,GAAG;AAAA,EAC7F;AAEA,MAAI,SAAS,mBAAmB;AAC9B,WAAO,oBAAC,sBAAmB,UAAU,kBAAkB,QAAgB,WAAW,GAAG,SAAS,GAAG;AAAA,EACnG;AAEA,SAAO,oBAAC,cAAW,UAAU,kBAAkB,QAAgB,WAAW,GAAG,SAAS,GAAG;AAC3F;","names":[]}
+{"version":3,"sources":["../../../src/components/CommentsPanel/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useAuth, useLocale, useTranslation } from \"@payloadcms/ui\";\nimport { cn } from \"../../utils/general/cn\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { useCommentsQuery } from \"../../api/queries/useCommentsQuery\";\nimport { DocumentView } from \"./components/DocumentView\";\nimport { GlobalView } from \"./components/GlobalView\";\nimport { GlobalDocumentView } from \"./components/GlobalDocumentView\";\nimport { useScrollToTargetFieldGroup } from \"./hooks/useScrollToTargetFieldGroup\";\nimport { filterCommentsByLocale } from \"../../utils/comment/filterCommentsByLocale\";\n\ninterface Props {\n  className: string;\n}\n\nexport const CommentsPanel = ({ className }: Props) => {\n  const { user } = useAuth();\n  const { t } = useTranslation();\n  const { code: currentLocale } = useLocale();\n\n  const { mode, queryContext } = useComments();\n  const { data: allComments = [], isLoading } = useCommentsQuery(queryContext);\n\n  const userId = (user?.id as number) ?? null;\n  const visibleComments = filterCommentsByLocale(allComments, currentLocale);\n\n  useScrollToTargetFieldGroup();\n\n  if (isLoading && allComments.length === 0) {\n    return (\n      <div className={cn(className, \"text-(--theme-elevation-450) text-[13px] text-center py-6 m-0\")}>\n        {t(\"comments:loadingComments\" as never)}\n      </div>\n    );\n  }\n\n  if (mode === \"document\") {\n    return <DocumentView comments={visibleComments} userId={userId} className={cn(className)} />;\n  }\n\n  if (mode === \"global-document\") {\n    return <GlobalDocumentView comments={visibleComments} userId={userId} className={cn(className)} />;\n  }\n\n  return <GlobalView comments={visibleComments} userId={userId} className={cn(className)} />;\n};\n"],"mappings":";AA+BM;AA7BN,SAAS,SAAS,WAAW,sBAAsB;AACnD,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AACnC,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAMhC,MAAM,gBAAgB,CAAC,EAAE,UAAU,MAAa;AACrD,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,MAAM,cAAc,IAAI,UAAU;AAE1C,QAAM,EAAE,MAAM,aAAa,IAAI,YAAY;AAC3C,QAAM,EAAE,MAAM,cAAc,CAAC,GAAG,UAAU,IAAI,iBAAiB,YAAY;AAE3E,QAAM,SAAU,MAAM,MAAiB;AACvC,QAAM,kBAAkB,uBAAuB,aAAa,aAAa;AAEzE,8BAA4B;AAE5B,MAAI,aAAa,YAAY,WAAW,GAAG;AACzC,WACE,oBAAC,SAAI,WAAW,GAAG,WAAW,+DAA+D,GAC1F,YAAE,0BAAmC,GACxC;AAAA,EAEJ;AAEA,MAAI,SAAS,YAAY;AACvB,WAAO,oBAAC,gBAAa,UAAU,iBAAiB,QAAgB,WAAW,GAAG,SAAS,GAAG;AAAA,EAC5F;AAEA,MAAI,SAAS,mBAAmB;AAC9B,WAAO,oBAAC,sBAAmB,UAAU,iBAAiB,QAAgB,WAAW,GAAG,SAAS,GAAG;AAAA,EAClG;AAEA,SAAO,oBAAC,cAAW,UAAU,iBAAiB,QAAgB,WAAW,GAAG,SAAS,GAAG;AAC1F;","names":[]}

package/dist/components/FieldCommentLabel/hooks/useFieldBreadcrumb.d.ts

@@ -0,0 +1,2 @@
+export declare function useFieldBreadcrumb(positionPath: string | undefined, leafLabel: string | null | undefined, collectionSlug: string | null | undefined, globalSlug: string | null): string;
+//# sourceMappingURL=useFieldBreadcrumb.d.ts.map

package/dist/components/FieldCommentLabel/hooks/useFieldBreadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldBreadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/components/FieldCommentLabel/hooks/useFieldBreadcrumb.ts"],"names":[],"mappings":"AAoDA,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,MAAM,GAAG,SAAS,EAChC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACpC,cAAc,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACzC,UAAU,EAAE,MAAM,GAAG,IAAI,UAa1B"}

package/dist/components/FieldCommentLabel/hooks/useFieldBreadcrumb.js

@@ -0,0 +1,52 @@
+"use client";
+import { useConfig } from "@payloadcms/ui";
+import { findFieldByName, getLabelString } from "../../../services/fieldLabels/utils/schemaUtils";
+function buildBreadcrumb(positionPath, leafLabel, schemaFields) {
+  const segments = positionPath.split(".");
+  const parts = [];
+  let currentFields = schemaFields;
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i] ?? "";
+    const isLast = i === segments.length - 1;
+    if (/^\d+$/.test(seg)) {
+      parts.push(`#${parseInt(seg, 10) + 1}`);
+      continue;
+    }
+    if (isLast) {
+      parts.push(leafLabel);
+      break;
+    }
+    const field = findFieldByName(currentFields, seg);
+    if (!field) {
+      parts.push(seg);
+      currentFields = [];
+      continue;
+    }
+    parts.push(getLabelString(field));
+    if (field.type === "array") {
+      currentFields = field.fields;
+    } else if (field.type === "blocks") {
+      currentFields = field.blocks.flatMap((b) => b.fields);
+    } else if (field.type === "group") {
+      currentFields = field.fields;
+    } else if (field.type === "tabs") {
+      currentFields = field.tabs.flatMap((t) => t.fields ?? []);
+    } else if (field.type === "collapsible" || field.type === "row") {
+      currentFields = field.fields;
+    } else {
+      currentFields = [];
+    }
+  }
+  return parts.join(" > ");
+}
+function useFieldBreadcrumb(positionPath, leafLabel, collectionSlug, globalSlug) {
+  const { config } = useConfig();
+  if (!positionPath || !leafLabel) return leafLabel ?? positionPath ?? "";
+  if (!positionPath.includes(".")) return leafLabel;
+  const schemaFields = collectionSlug ? config.collections.find((c) => c.slug === collectionSlug)?.fields ?? [] : config.globals?.find((g) => g.slug === globalSlug)?.fields ?? [];
+  return buildBreadcrumb(positionPath, leafLabel, schemaFields);
+}
+export {
+  useFieldBreadcrumb
+};
+//# sourceMappingURL=useFieldBreadcrumb.js.map

package/dist/components/FieldCommentLabel/hooks/useFieldBreadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/FieldCommentLabel/hooks/useFieldBreadcrumb.ts"],"sourcesContent":["\"use client\";\n\nimport { useConfig } from \"@payloadcms/ui\";\nimport type { ArrayField, BlocksField, CollapsibleField, Field, GroupField, RowField, TabsField } from \"payload\";\nimport { findFieldByName, getLabelString } from \"../../../services/fieldLabels/utils/schemaUtils\";\n\nfunction buildBreadcrumb(positionPath: string, leafLabel: string, schemaFields: Field[]) {\n  const segments = positionPath.split(\".\");\n  const parts: string[] = [];\n  let currentFields = schemaFields;\n\n  for (let i = 0; i < segments.length; i++) {\n    const seg = segments[i] ?? \"\";\n    const isLast = i === segments.length - 1;\n\n    if (/^\\d+$/.test(seg)) {\n      parts.push(`#${parseInt(seg, 10) + 1}`);\n      continue;\n    }\n\n    if (isLast) {\n      parts.push(leafLabel);\n      break;\n    }\n\n    const field = findFieldByName(currentFields, seg);\n    if (!field) {\n      parts.push(seg);\n      currentFields = [];\n      continue;\n    }\n\n    parts.push(getLabelString(field));\n\n    if (field.type === \"array\") {\n      currentFields = (field as ArrayField).fields;\n    } else if (field.type === \"blocks\") {\n      currentFields = (field as BlocksField).blocks.flatMap((b) => b.fields);\n    } else if (field.type === \"group\") {\n      currentFields = (field as GroupField).fields;\n    } else if (field.type === \"tabs\") {\n      currentFields = (field as TabsField).tabs.flatMap((t) => t.fields ?? []);\n    } else if (field.type === \"collapsible\" || field.type === \"row\") {\n      currentFields = (field as CollapsibleField | RowField).fields;\n    } else {\n      currentFields = [];\n    }\n  }\n\n  return parts.join(\" > \");\n}\n\nexport function useFieldBreadcrumb(\n  positionPath: string | undefined,\n  leafLabel: string | null | undefined,\n  collectionSlug: string | null | undefined,\n  globalSlug: string | null,\n) {\n  const { config } = useConfig();\n\n  if (!positionPath || !leafLabel) return leafLabel ?? positionPath ?? \"\";\n  if (!positionPath.includes(\".\")) return leafLabel;\n\n  const schemaFields =\n    collectionSlug ?\n      (config.collections.find((c) => c.slug === collectionSlug)?.fields ?? [])\n    : (config.globals?.find((g) => g.slug === globalSlug)?.fields ?? []);\n\n  return buildBreadcrumb(positionPath, leafLabel, schemaFields as Field[]);\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB,sBAAsB;AAEhD,SAAS,gBAAgB,cAAsB,WAAmB,cAAuB;AACvF,QAAM,WAAW,aAAa,MAAM,GAAG;AACvC,QAAM,QAAkB,CAAC;AACzB,MAAI,gBAAgB;AAEpB,WAAS,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;AACxC,UAAM,MAAM,SAAS,CAAC,KAAK;AAC3B,UAAM,SAAS,MAAM,SAAS,SAAS;AAEvC,QAAI,QAAQ,KAAK,GAAG,GAAG;AACrB,YAAM,KAAK,IAAI,SAAS,KAAK,EAAE,IAAI,CAAC,EAAE;AACtC;AAAA,IACF;AAEA,QAAI,QAAQ;AACV,YAAM,KAAK,SAAS;AACpB;AAAA,IACF;AAEA,UAAM,QAAQ,gBAAgB,eAAe,GAAG;AAChD,QAAI,CAAC,OAAO;AACV,YAAM,KAAK,GAAG;AACd,sBAAgB,CAAC;AACjB;AAAA,IACF;AAEA,UAAM,KAAK,eAAe,KAAK,CAAC;AAEhC,QAAI,MAAM,SAAS,SAAS;AAC1B,sBAAiB,MAAqB;AAAA,IACxC,WAAW,MAAM,SAAS,UAAU;AAClC,sBAAiB,MAAsB,OAAO,QAAQ,CAAC,MAAM,EAAE,MAAM;AAAA,IACvE,WAAW,MAAM,SAAS,SAAS;AACjC,sBAAiB,MAAqB;AAAA,IACxC,WAAW,MAAM,SAAS,QAAQ;AAChC,sBAAiB,MAAoB,KAAK,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAAA,IACzE,WAAW,MAAM,SAAS,iBAAiB,MAAM,SAAS,OAAO;AAC/D,sBAAiB,MAAsC;AAAA,IACzD,OAAO;AACL,sBAAgB,CAAC;AAAA,IACnB;AAAA,EACF;AAEA,SAAO,MAAM,KAAK,KAAK;AACzB;AAEO,SAAS,mBACd,cACA,WACA,gBACA,YACA;AACA,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,MAAI,CAAC,gBAAgB,CAAC,UAAW,QAAO,aAAa,gBAAgB;AACrE,MAAI,CAAC,aAAa,SAAS,GAAG,EAAG,QAAO;AAExC,QAAM,eACJ,iBACG,OAAO,YAAY,KAAK,CAAC,MAAM,EAAE,SAAS,cAAc,GAAG,UAAU,CAAC,IACtE,OAAO,SAAS,KAAK,CAAC,MAAM,EAAE,SAAS,UAAU,GAAG,UAAU,CAAC;AAEpE,SAAO,gBAAgB,cAAc,WAAW,YAAuB;AACzE;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQrC,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,GAAG;QACtC,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,kDAwD3E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAYrC,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,GAAG;QACtC,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,kDAsE3E"}