@wordpress/editor 14.40.2-next.v.202602271551.0 → 14.40.2

package/build-module/components/collaborators-overlay/use-render-cursors.mjs

@@ -1,14 +1,16 @@
 // packages/editor/src/components/collaborators-overlay/use-render-cursors.ts
-import {
-  privateApis as coreDataPrivateApis,
-  SelectionType
-} from "@wordpress/core-data";
-import { useEffect, useMemo, useState } from "@wordpress/element";
+import { privateApis as coreDataPrivateApis } from "@wordpress/core-data";
+import { useSelect } from "@wordpress/data";
+import { useEffect, useState } from "@wordpress/element";
+import { store as preferencesStore } from "@wordpress/preferences";
 import { unlock } from "../../lock-unlock.mjs";
 import { getAvatarUrl } from "./get-avatar-url.mjs";
 import { getAvatarBorderColor } from "../collab-sidebar/utils.mjs";
+import { computeSelectionVisual } from "./compute-selection.mjs";
+import { useDebouncedRecompute } from "./use-debounced-recompute.mjs";
 var { useActiveCollaborators, useResolvedSelection } = unlock(coreDataPrivateApis);
-function useRenderCursors(overlayElement, blockEditorDocument, postId, postType) {
+var { SelectionType } = unlock(coreDataPrivateApis);
+function useRenderCursors(overlayElement, blockEditorDocument, postId, postType, delayMs) {
   const sortedUsers = useActiveCollaborators(
     postId ?? null,
     postType ?? null
@@ -17,191 +19,96 @@ function useRenderCursors(overlayElement, blockEditorDocument, postId, postType)
     postId ?? null,
     postType ?? null
   );
+  const showOwnCursor = useSelect(
+    (select) => select(preferencesStore).get("core", "showCollaborationCursor"),
+    []
+  );
   const [cursorPositions, setCursorPositions] = useState(
     []
   );
-  const computeCursors = useMemo(
-    () => () => {
-      if (!overlayElement || !blockEditorDocument) {
-        setCursorPositions([]);
+  const [recomputeToken, rerenderCursorsAfterDelay] = useDebouncedRecompute(delayMs);
+  useEffect(() => {
+    if (!overlayElement || !blockEditorDocument) {
+      setCursorPositions([]);
+      return;
+    }
+    const overlayRect = overlayElement.getBoundingClientRect();
+    const overlayContext = {
+      editorDocument: blockEditorDocument,
+      overlayRect
+    };
+    const results = [];
+    const hasOtherCollaborators = sortedUsers.some(
+      (u) => !u.isMe
+    );
+    sortedUsers.forEach((user) => {
+      if (user.isMe && (!showOwnCursor || !hasOtherCollaborators)) {
         return;
       }
-      const results = [];
-      sortedUsers.forEach((user) => {
-        if (user.isMe) {
+      const selection = user.editorState?.selection ?? {
+        type: SelectionType.None
+      };
+      let start = {
+        richTextOffset: null,
+        localClientId: null
+      };
+      let end;
+      if (selection.type === SelectionType.Cursor) {
+        try {
+          start = resolveSelection(selection);
+        } catch {
           return;
         }
-        const selection = user.editorState?.selection ?? {
-          type: SelectionType.None
-        };
-        const userName = user.collaboratorInfo.name;
-        const clientId = user.clientId;
-        const color = getAvatarBorderColor(user.collaboratorInfo.id);
-        const avatarUrl = getAvatarUrl(
-          user.collaboratorInfo.avatar_urls
-        );
-        let coords = null;
-        if (selection.type === SelectionType.None) {
-        } else if (selection.type === SelectionType.WholeBlock) {
-        } else if (selection.type === SelectionType.Cursor) {
-          const { textIndex, localClientId } = resolveSelection(selection);
-          if (localClientId) {
-            coords = getCursorPosition(
-              textIndex,
-              localClientId,
-              blockEditorDocument,
-              overlayElement
-            );
-          }
-        } else if (selection.type === SelectionType.SelectionInOneBlock || selection.type === SelectionType.SelectionInMultipleBlocks) {
-          const { textIndex, localClientId } = resolveSelection({
+      } else if (selection.type === SelectionType.SelectionInOneBlock || selection.type === SelectionType.SelectionInMultipleBlocks) {
+        try {
+          start = resolveSelection({
             type: SelectionType.Cursor,
             cursorPosition: selection.cursorStartPosition
           });
-          if (localClientId) {
-            coords = getCursorPosition(
-              textIndex,
-              localClientId,
-              blockEditorDocument,
-              overlayElement
-            );
-          }
-        }
-        if (coords) {
-          results.push({
-            userName,
-            clientId,
-            color,
-            avatarUrl,
-            ...coords
+          end = resolveSelection({
+            type: SelectionType.Cursor,
+            cursorPosition: selection.cursorEndPosition
           });
+        } catch {
+          return;
         }
-      });
-      setCursorPositions(results);
-    },
-    [blockEditorDocument, resolveSelection, overlayElement, sortedUsers]
-  );
-  useEffect(computeCursors, [computeCursors]);
-  const rerenderCursorsAfterDelay = useMemo(
-    () => () => {
-      const timeout = setTimeout(computeCursors, 500);
-      return () => clearTimeout(timeout);
-    },
-    [computeCursors]
-  );
-  return { cursors: cursorPositions, rerenderCursorsAfterDelay };
-}
-var getCursorPosition = (absolutePositionIndex, blockId, editorDocument, overlay) => {
-  if (absolutePositionIndex === null) {
-    return null;
-  }
-  const blockElement = editorDocument.querySelector(
-    `[data-block="${blockId}"]`
-  );
-  if (!blockElement) {
-    return null;
-  }
-  return getOffsetPositionInBlock(
-    blockElement,
-    absolutePositionIndex,
-    editorDocument,
-    overlay
-  ) ?? null;
-};
-var getOffsetPositionInBlock = (blockElement, charOffset, editorDocument, overlay) => {
-  const { node, offset } = findInnerBlockOffset(
-    blockElement,
-    charOffset,
-    editorDocument
-  );
-  const cursorRange = editorDocument.createRange();
-  try {
-    cursorRange.setStart(node, offset);
-  } catch (error) {
-    return null;
-  }
-  cursorRange.collapse(true);
-  const cursorRect = cursorRange.getBoundingClientRect();
-  const overlayRect = overlay.getBoundingClientRect();
-  const blockRect = blockElement.getBoundingClientRect();
-  let cursorX = 0;
-  let cursorY = 0;
-  if (cursorRect.x === 0 && cursorRect.y === 0 && cursorRect.width === 0 && cursorRect.height === 0) {
-    cursorX = blockRect.left - overlayRect.left;
-    cursorY = blockRect.top - overlayRect.top;
-  } else {
-    cursorX = cursorRect.left - overlayRect.left;
-    cursorY = cursorRect.top - overlayRect.top;
-  }
-  let cursorHeight = cursorRect.height;
-  if (cursorHeight === 0) {
-    cursorHeight = parseInt(
-      window.getComputedStyle(blockElement).lineHeight,
-      10
-    ) || blockRect.height;
-  }
-  return {
-    x: cursorX,
-    y: cursorY,
-    height: cursorHeight
-  };
-};
-var MAX_NODE_OFFSET_COUNT = 1e3;
-var findInnerBlockOffset = (blockElement, offset, editorDocument) => {
-  const treeWalker = editorDocument.createTreeWalker(
-    blockElement,
-    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT
-    // eslint-disable-line no-bitwise
-  );
-  let currentOffset = 0;
-  let lastTextNode = null;
-  let node = null;
-  let nodeCount = 1;
-  while (node = treeWalker.nextNode()) {
-    nodeCount++;
-    if (nodeCount > MAX_NODE_OFFSET_COUNT) {
-      if (lastTextNode) {
-        return { node: lastTextNode, offset: 0 };
       }
-      return { node: blockElement, offset: 0 };
-    }
-    const nodeLength = node.nodeValue?.length ?? 0;
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      if (node.nodeName === "BR") {
-        if (currentOffset + 1 >= offset) {
-          const nodeAfterBr = treeWalker.nextNode();
-          if (nodeAfterBr?.nodeType === Node.TEXT_NODE) {
-            return { node: nodeAfterBr, offset: 0 };
-          } else if (lastTextNode) {
-            return {
-              node: lastTextNode,
-              offset: lastTextNode.nodeValue?.length ?? 0
-            };
-          }
-          return { node: blockElement, offset: 0 };
+      const userName = user.collaboratorInfo.name;
+      const clientId = user.clientId;
+      const color = user.isMe ? "var(--wp-admin-theme-color)" : getAvatarBorderColor(user.collaboratorInfo.id);
+      const avatarUrl = getAvatarUrl(user.collaboratorInfo.avatar_urls);
+      const selectionVisual = computeSelectionVisual(
+        selection,
+        start,
+        end,
+        overlayContext
+      );
+      if (selectionVisual.coords) {
+        const cursorData = {
+          userName,
+          clientId,
+          color,
+          avatarUrl,
+          isMe: user.isMe,
+          ...selectionVisual.coords
+        };
+        if (selectionVisual.selectionRects) {
+          cursorData.selectionRects = selectionVisual.selectionRects;
         }
-        currentOffset += 1;
-        continue;
-      } else {
-        continue;
+        results.push(cursorData);
       }
-    }
-    if (nodeLength === 0) {
-      continue;
-    }
-    if (currentOffset + nodeLength >= offset) {
-      return { node, offset: offset - currentOffset };
-    }
-    currentOffset += nodeLength;
-    if (node.nodeType === Node.TEXT_NODE) {
-      lastTextNode = node;
-    }
-  }
-  if (lastTextNode && lastTextNode.nodeValue?.length) {
-    return { node: lastTextNode, offset: lastTextNode.nodeValue.length };
-  }
-  return { node: blockElement, offset: 0 };
-};
+    });
+    setCursorPositions(results);
+  }, [
+    blockEditorDocument,
+    resolveSelection,
+    overlayElement,
+    sortedUsers,
+    showOwnCursor,
+    recomputeToken
+  ]);
+  return { cursors: cursorPositions, rerenderCursorsAfterDelay };
+}
 export {
   useRenderCursors
 };

package/build-module/components/collaborators-overlay/use-render-cursors.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/use-render-cursors.ts"],
-  "sourcesContent": ["import {\n\tprivateApis as coreDataPrivateApis,\n\tSelectionType,\n} from '@wordpress/core-data';\nimport { useEffect, useMemo, useState } from '@wordpress/element';\n\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from './get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nconst { useActiveCollaborators, useResolvedSelection } =\n\tunlock( coreDataPrivateApis );\n\nexport interface CursorData {\n\tuserName: string;\n\tclientId: number;\n\tcolor: string;\n\tavatarUrl?: string;\n\tx: number;\n\ty: number;\n\theight: number;\n}\n\n/**\n * Custom hook that computes cursor positions for each remote user in the editor.\n *\n * @param overlayElement      - The overlay element\n * @param blockEditorDocument - The block editor document\n * @param postId              - The ID of the post\n * @param postType            - The type of the post\n * @return An array of cursor data for rendering, and a function to trigger a delayed recompute.\n */\nexport function useRenderCursors(\n\toverlayElement: HTMLElement | null,\n\tblockEditorDocument: Document | null,\n\tpostId: number | null,\n\tpostType: string | null\n): { cursors: CursorData[]; rerenderCursorsAfterDelay: () => () => void } {\n\tconst sortedUsers = useActiveCollaborators(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\tconst resolveSelection = useResolvedSelection(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\n\tconst [ cursorPositions, setCursorPositions ] = useState< CursorData[] >(\n\t\t[]\n\t);\n\n\tconst computeCursors = useMemo(\n\t\t() => () => {\n\t\t\tif ( ! overlayElement || ! blockEditorDocument ) {\n\t\t\t\tsetCursorPositions( [] );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst results: CursorData[] = [];\n\n\t\t\tsortedUsers.forEach( ( user: any ) => {\n\t\t\t\tif ( user.isMe ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst selection = user.editorState?.selection ?? {\n\t\t\t\t\ttype: SelectionType.None,\n\t\t\t\t};\n\t\t\t\tconst userName = user.collaboratorInfo.name;\n\t\t\t\tconst clientId = user.clientId;\n\t\t\t\tconst color = getAvatarBorderColor( user.collaboratorInfo.id );\n\t\t\t\tconst avatarUrl = getAvatarUrl(\n\t\t\t\t\tuser.collaboratorInfo.avatar_urls\n\t\t\t\t);\n\n\t\t\t\tlet coords: {\n\t\t\t\t\tx: number;\n\t\t\t\t\ty: number;\n\t\t\t\t\theight: number;\n\t\t\t\t} | null = null;\n\n\t\t\t\tif ( selection.type === SelectionType.None ) {\n\t\t\t\t\t// Nothing selected.\n\t\t\t\t} else if ( selection.type === SelectionType.WholeBlock ) {\n\t\t\t\t\t// Don't draw a cursor for a whole block selection.\n\t\t\t\t} else if ( selection.type === SelectionType.Cursor ) {\n\t\t\t\t\tconst { textIndex, localClientId } =\n\t\t\t\t\t\tresolveSelection( selection );\n\t\t\t\t\tif ( localClientId ) {\n\t\t\t\t\t\tcoords = getCursorPosition(\n\t\t\t\t\t\t\ttextIndex,\n\t\t\t\t\t\t\tlocalClientId,\n\t\t\t\t\t\t\tblockEditorDocument,\n\t\t\t\t\t\t\toverlayElement\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else if (\n\t\t\t\t\tselection.type === SelectionType.SelectionInOneBlock ||\n\t\t\t\t\tselection.type === SelectionType.SelectionInMultipleBlocks\n\t\t\t\t) {\n\t\t\t\t\tconst { textIndex, localClientId } = resolveSelection( {\n\t\t\t\t\t\ttype: SelectionType.Cursor,\n\t\t\t\t\t\tcursorPosition: selection.cursorStartPosition,\n\t\t\t\t\t} );\n\t\t\t\t\tif ( localClientId ) {\n\t\t\t\t\t\tcoords = getCursorPosition(\n\t\t\t\t\t\t\ttextIndex,\n\t\t\t\t\t\t\tlocalClientId,\n\t\t\t\t\t\t\tblockEditorDocument,\n\t\t\t\t\t\t\toverlayElement\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif ( coords ) {\n\t\t\t\t\tresults.push( {\n\t\t\t\t\t\tuserName,\n\t\t\t\t\t\tclientId,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tavatarUrl,\n\t\t\t\t\t\t...coords,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tsetCursorPositions( results );\n\t\t},\n\t\t[ blockEditorDocument, resolveSelection, overlayElement, sortedUsers ]\n\t);\n\n\tuseEffect( computeCursors, [ computeCursors ] );\n\n\tconst rerenderCursorsAfterDelay = useMemo(\n\t\t() => () => {\n\t\t\tconst timeout = setTimeout( computeCursors, 500 );\n\t\t\treturn () => clearTimeout( timeout );\n\t\t},\n\t\t[ computeCursors ]\n\t);\n\n\treturn { cursors: cursorPositions, rerenderCursorsAfterDelay };\n}\n\n/**\n * Given a selection, returns the coordinates of the cursor in the block.\n *\n * @param absolutePositionIndex - The absolute position index\n * @param blockId               - The block ID\n * @param editorDocument        - The editor document\n * @param overlay               - The overlay element\n * @return The position of the cursor\n */\nconst getCursorPosition = (\n\tabsolutePositionIndex: number | null,\n\tblockId: string,\n\teditorDocument: Document,\n\toverlay: HTMLElement\n): { x: number; y: number; height: number } | null => {\n\tif ( absolutePositionIndex === null ) {\n\t\t// An absolute position index can be null if a cursor was set in a block that\n\t\t// has since been deleted.\n\t\t// Return null so we don't try to draw it.\n\t\treturn null;\n\t}\n\n\tconst blockElement = editorDocument.querySelector(\n\t\t`[data-block=\"${ blockId }\"]`\n\t) as HTMLElement;\n\n\tif ( ! blockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\tgetOffsetPositionInBlock(\n\t\t\tblockElement,\n\t\t\tabsolutePositionIndex,\n\t\t\teditorDocument,\n\t\t\toverlay\n\t\t) ?? null\n\t);\n};\n\n/**\n * Given a block element and a character offset, returns the coordinates for drawing a visual cursor in the block.\n *\n * @param blockElement   - The block element\n * @param charOffset     - The character offset\n * @param editorDocument - The editor document\n * @param overlay        - The overlay element\n * @return The position of the cursor\n */\nconst getOffsetPositionInBlock = (\n\tblockElement: HTMLElement,\n\tcharOffset: number,\n\teditorDocument: Document,\n\toverlay: HTMLElement\n) => {\n\tconst { node, offset } = findInnerBlockOffset(\n\t\tblockElement,\n\t\tcharOffset,\n\t\teditorDocument\n\t);\n\n\tconst cursorRange = editorDocument.createRange();\n\n\ttry {\n\t\tcursorRange.setStart( node, offset );\n\t} catch ( error ) {\n\t\treturn null;\n\t}\n\n\t// Ensure the range only represents single point in the DOM.\n\tcursorRange.collapse( true );\n\n\tconst cursorRect = cursorRange.getBoundingClientRect();\n\tconst overlayRect = overlay.getBoundingClientRect();\n\tconst blockRect = blockElement.getBoundingClientRect();\n\n\tlet cursorX = 0;\n\tlet cursorY = 0;\n\n\tif (\n\t\tcursorRect.x === 0 &&\n\t\tcursorRect.y === 0 &&\n\t\tcursorRect.width === 0 &&\n\t\tcursorRect.height === 0\n\t) {\n\t\t// This can happen for empty blocks.\n\t\tcursorX = blockRect.left - overlayRect.left;\n\t\tcursorY = blockRect.top - overlayRect.top;\n\t} else {\n\t\tcursorX = cursorRect.left - overlayRect.left;\n\t\tcursorY = cursorRect.top - overlayRect.top;\n\t}\n\n\tlet cursorHeight = cursorRect.height;\n\tif ( cursorHeight === 0 ) {\n\t\tcursorHeight =\n\t\t\tparseInt(\n\t\t\t\twindow.getComputedStyle( blockElement ).lineHeight,\n\t\t\t\t10\n\t\t\t) || blockRect.height;\n\t}\n\n\treturn {\n\t\tx: cursorX,\n\t\ty: cursorY,\n\t\theight: cursorHeight,\n\t};\n};\n\nconst MAX_NODE_OFFSET_COUNT = 1000;\n\n/**\n * Given a block element and a character offset, returns an exact inner node and offset for use in a range.\n *\n * @param blockElement   - The block element\n * @param offset         - The character offset\n * @param editorDocument - The editor document\n * @return The node and offset of the character at the offset\n */\nconst findInnerBlockOffset = (\n\tblockElement: HTMLElement,\n\toffset: number,\n\teditorDocument: Document\n) => {\n\tconst treeWalker = editorDocument.createTreeWalker(\n\t\tblockElement,\n\t\tNodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT // eslint-disable-line no-bitwise\n\t);\n\n\tlet currentOffset = 0;\n\tlet lastTextNode: Node | null = null;\n\n\tlet node: Node | null = null;\n\tlet nodeCount = 1;\n\n\twhile ( ( node = treeWalker.nextNode() ) ) {\n\t\tnodeCount++;\n\n\t\tif ( nodeCount > MAX_NODE_OFFSET_COUNT ) {\n\t\t\t// If we've walked too many nodes, return the last text node or the beginning of the block.\n\t\t\tif ( lastTextNode ) {\n\t\t\t\treturn { node: lastTextNode, offset: 0 };\n\t\t\t}\n\t\t\treturn { node: blockElement, offset: 0 };\n\t\t}\n\n\t\tconst nodeLength = node.nodeValue?.length ?? 0;\n\n\t\tif ( node.nodeType === Node.ELEMENT_NODE ) {\n\t\t\tif ( node.nodeName === 'BR' ) {\n\t\t\t\t// Treat <br> as a single \"\\n\" character.\n\n\t\t\t\tif ( currentOffset + 1 >= offset ) {\n\t\t\t\t\t// If the <br> occurs right on the target offset, return the next text node.\n\t\t\t\t\tconst nodeAfterBr = treeWalker.nextNode();\n\n\t\t\t\t\tif ( nodeAfterBr?.nodeType === Node.TEXT_NODE ) {\n\t\t\t\t\t\treturn { node: nodeAfterBr, offset: 0 };\n\t\t\t\t\t} else if ( lastTextNode ) {\n\t\t\t\t\t\t// If there's no text node after the <br>, return the end offset of the last text node.\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tnode: lastTextNode,\n\t\t\t\t\t\t\toffset: lastTextNode.nodeValue?.length ?? 0,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\t// Just in case, if there's no last text node, return the beginning of the block.\n\t\t\t\t\treturn { node: blockElement, offset: 0 };\n\t\t\t\t}\n\n\t\t\t\t// The <br> is before the target offset. Count it as a single character.\n\t\t\t\tcurrentOffset += 1;\n\t\t\t\tcontinue;\n\t\t\t} else {\n\t\t\t\t// Skip other element types.\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t}\n\n\t\tif ( nodeLength === 0 ) {\n\t\t\t// Skip empty nodes.\n\t\t\tcontinue;\n\t\t}\n\n\t\tif ( currentOffset + nodeLength >= offset ) {\n\t\t\t// This node exceeds the target offset. Return the node and the position of the offset within it.\n\t\t\treturn { node, offset: offset - currentOffset };\n\t\t}\n\n\t\tcurrentOffset += nodeLength;\n\n\t\tif ( node.nodeType === Node.TEXT_NODE ) {\n\t\t\tlastTextNode = node;\n\t\t}\n\t}\n\n\tif ( lastTextNode && lastTextNode.nodeValue?.length ) {\n\t\t// We didn't reach the target offset. Return the last text node's last character.\n\t\treturn { node: lastTextNode, offset: lastTextNode.nodeValue.length };\n\t}\n\n\t// We didn't find any text nodes. Return the beginning of the block.\n\treturn { node: blockElement, offset: 0 };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { privateApis as coreDataPrivateApis } from '@wordpress/core-data';\nimport type {\n\tCoreDataPrivateApis,\n\tResolvedSelection,\n\tPostEditorAwarenessState as ActiveCollaborator,\n} from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useEffect, useState } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from './get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { computeSelectionVisual } from './compute-selection';\nimport { useDebouncedRecompute } from './use-debounced-recompute';\nimport type { SelectionRect } from './cursor-dom-utils';\n\nconst { useActiveCollaborators, useResolvedSelection } =\n\tunlock( coreDataPrivateApis );\nconst { SelectionType } = unlock( coreDataPrivateApis ) as Pick<\n\tCoreDataPrivateApis,\n\t'SelectionType'\n>;\n\nexport type { SelectionRect };\n\nexport interface CursorData {\n\tuserName: string;\n\tclientId: number;\n\tcolor: string;\n\tavatarUrl?: string;\n\tx: number;\n\ty: number;\n\theight: number;\n\tisMe?: boolean;\n\tselectionRects?: SelectionRect[];\n}\n\n/**\n * Custom hook that computes cursor positions for each remote user in the editor.\n *\n * @param overlayElement      - The overlay element\n * @param blockEditorDocument - The block editor document\n * @param postId              - The ID of the post\n * @param postType            - The type of the post\n * @param delayMs             - Milliseconds to wait before recomputing cursor positions.\n * @return An array of cursor data for rendering, and a function to trigger a delayed recompute.\n */\nexport function useRenderCursors(\n\toverlayElement: HTMLElement | null,\n\tblockEditorDocument: Document | null,\n\tpostId: number | null,\n\tpostType: string | null,\n\tdelayMs: number\n): { cursors: CursorData[]; rerenderCursorsAfterDelay: () => () => void } {\n\tconst sortedUsers = useActiveCollaborators(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\tconst resolveSelection = useResolvedSelection(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\n\tconst showOwnCursor = useSelect(\n\t\t( select ) =>\n\t\t\tselect( preferencesStore ).get( 'core', 'showCollaborationCursor' ),\n\t\t[]\n\t);\n\n\tconst [ cursorPositions, setCursorPositions ] = useState< CursorData[] >(\n\t\t[]\n\t);\n\n\t// Bump this counter to force the effect to re-run (e.g. after a layout shift).\n\tconst [ recomputeToken, rerenderCursorsAfterDelay ] =\n\t\tuseDebouncedRecompute( delayMs );\n\n\t// All DOM position computations live inside useEffect.\n\tuseEffect( () => {\n\t\tif ( ! overlayElement || ! blockEditorDocument ) {\n\t\t\tsetCursorPositions( [] );\n\t\t\treturn;\n\t\t}\n\n\t\t// Pre-compute the overlay rect once, same for every user.\n\t\tconst overlayRect = overlayElement.getBoundingClientRect();\n\t\tconst overlayContext = {\n\t\t\teditorDocument: blockEditorDocument,\n\t\t\toverlayRect,\n\t\t};\n\n\t\tconst results: CursorData[] = [];\n\n\t\tconst hasOtherCollaborators = sortedUsers.some(\n\t\t\t( u: ActiveCollaborator ) => ! u.isMe\n\t\t);\n\n\t\tsortedUsers.forEach( ( user: ActiveCollaborator ) => {\n\t\t\tif ( user.isMe && ( ! showOwnCursor || ! hasOtherCollaborators ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst selection = user.editorState?.selection ?? {\n\t\t\t\ttype: SelectionType.None,\n\t\t\t};\n\n\t\t\tlet start: ResolvedSelection = {\n\t\t\t\trichTextOffset: null,\n\t\t\t\tlocalClientId: null,\n\t\t\t};\n\t\t\tlet end: ResolvedSelection | undefined;\n\n\t\t\tif ( selection.type === SelectionType.Cursor ) {\n\t\t\t\ttry {\n\t\t\t\t\tstart = resolveSelection( selection );\n\t\t\t\t} catch {\n\t\t\t\t\t// Selection may reference a stale Yjs position.\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tselection.type === SelectionType.SelectionInOneBlock ||\n\t\t\t\tselection.type === SelectionType.SelectionInMultipleBlocks\n\t\t\t) {\n\t\t\t\ttry {\n\t\t\t\t\tstart = resolveSelection( {\n\t\t\t\t\t\ttype: SelectionType.Cursor,\n\t\t\t\t\t\tcursorPosition: selection.cursorStartPosition,\n\t\t\t\t\t} );\n\n\t\t\t\t\tend = resolveSelection( {\n\t\t\t\t\t\ttype: SelectionType.Cursor,\n\t\t\t\t\t\tcursorPosition: selection.cursorEndPosition,\n\t\t\t\t\t} );\n\t\t\t\t} catch {\n\t\t\t\t\t// Selection may reference a stale Yjs position.\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst userName = user.collaboratorInfo.name;\n\t\t\tconst clientId = user.clientId;\n\t\t\tconst color = user.isMe\n\t\t\t\t? 'var(--wp-admin-theme-color)'\n\t\t\t\t: getAvatarBorderColor( user.collaboratorInfo.id );\n\t\t\tconst avatarUrl = getAvatarUrl( user.collaboratorInfo.avatar_urls );\n\n\t\t\tconst selectionVisual = computeSelectionVisual(\n\t\t\t\tselection,\n\t\t\t\tstart,\n\t\t\t\tend,\n\t\t\t\toverlayContext\n\t\t\t);\n\n\t\t\tif ( selectionVisual.coords ) {\n\t\t\t\tconst cursorData: CursorData = {\n\t\t\t\t\tuserName,\n\t\t\t\t\tclientId,\n\t\t\t\t\tcolor,\n\t\t\t\t\tavatarUrl,\n\t\t\t\t\tisMe: user.isMe,\n\t\t\t\t\t...selectionVisual.coords,\n\t\t\t\t};\n\n\t\t\t\tif ( selectionVisual.selectionRects ) {\n\t\t\t\t\tcursorData.selectionRects = selectionVisual.selectionRects;\n\t\t\t\t}\n\n\t\t\t\tresults.push( cursorData );\n\t\t\t}\n\t\t} );\n\n\t\tsetCursorPositions( results );\n\t}, [\n\t\tblockEditorDocument,\n\t\tresolveSelection,\n\t\toverlayElement,\n\t\tsortedUsers,\n\t\tshowOwnCursor,\n\t\trecomputeToken,\n\t] );\n\n\treturn { cursors: cursorPositions, rerenderCursorsAfterDelay };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/collaborators-presence/avatar/component.mjs

@@ -0,0 +1,90 @@
+// packages/editor/src/components/collaborators-presence/avatar/component.tsx
+import clsx from "clsx";
+import { colord, extend } from "colord";
+import a11yPlugin from "colord/plugins/a11y";
+import { Icon, Tooltip } from "@wordpress/components";
+import { useMemo } from "@wordpress/element";
+import { useImageLoadingStatus } from "./use-image-loading-status.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+extend([a11yPlugin]);
+var GRAY_900 = "#1e1e1e";
+var WHITE = "#fff";
+function Avatar({
+  className,
+  src,
+  name,
+  label,
+  variant,
+  size = "default",
+  borderColor,
+  dimmed = false,
+  statusIndicator,
+  style,
+  ...props
+}) {
+  const {
+    status: imageStatus,
+    handleLoad,
+    handleError
+  } = useImageLoadingStatus(src);
+  const imageLoaded = imageStatus === "loaded";
+  const showBadge = variant === "badge" && !!name;
+  const initials = name ? name.split(/\s+/).slice(0, 2).map((word) => word[0]).join("").toUpperCase() : void 0;
+  const nameColor = useMemo(
+    () => borderColor && colord(borderColor).isReadable(GRAY_900, {
+      level: "AA",
+      size: "normal"
+    }) ? GRAY_900 : WHITE,
+    [borderColor]
+  );
+  const customProperties = {
+    ...style,
+    ...borderColor ? {
+      "--editor-avatar-outline-color": borderColor,
+      "--editor-avatar-name-color": nameColor
+    } : {}
+  };
+  const avatar = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx("editor-avatar", className, {
+        "has-avatar-border-color": !!borderColor,
+        "has-src": imageLoaded,
+        "is-badge": showBadge,
+        "is-small": size === "small",
+        "is-dimmed": dimmed
+      }),
+      style: customProperties,
+      role: name ? "img" : void 0,
+      "aria-label": name || void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "editor-avatar__image", children: [
+          src && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: "",
+              crossOrigin: "anonymous",
+              className: "editor-avatar__img",
+              onLoad: handleLoad,
+              onError: handleError
+            }
+          ),
+          !imageLoaded && initials
+        ] }),
+        dimmed && !!statusIndicator && /* @__PURE__ */ jsx("span", { className: "editor-avatar__status-indicator", children: /* @__PURE__ */ jsx(Icon, { icon: statusIndicator }) }),
+        showBadge && /* @__PURE__ */ jsx("span", { className: "editor-avatar__name", children: label || name })
+      ]
+    }
+  );
+  if (name && (!showBadge || label)) {
+    return /* @__PURE__ */ jsx(Tooltip, { text: name, children: avatar });
+  }
+  return avatar;
+}
+var component_default = Avatar;
+export {
+  component_default as default
+};
+//# sourceMappingURL=component.mjs.map

package/build-module/components/collaborators-presence/avatar/component.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/collaborators-presence/avatar/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\nextend( [ a11yPlugin ] );\n\n/**\n * WordPress dependencies\n */\nimport { Icon, Tooltip } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { AvatarProps } from './types';\nimport { useImageLoadingStatus } from './use-image-loading-status';\n\n// Runtime equivalents of @wordpress/base-styles tokens ($gray-900, $white).\nconst GRAY_900 = '#1e1e1e';\nconst WHITE = '#fff';\n\nfunction Avatar( {\n\tclassName,\n\tsrc,\n\tname,\n\tlabel,\n\tvariant,\n\tsize = 'default',\n\tborderColor,\n\tdimmed = false,\n\tstatusIndicator,\n\tstyle,\n\t...props\n}: AvatarProps &\n\tOmit< React.HTMLAttributes< HTMLDivElement >, keyof AvatarProps > ) {\n\tconst {\n\t\tstatus: imageStatus,\n\t\thandleLoad,\n\t\thandleError,\n\t} = useImageLoadingStatus( src );\n\tconst imageLoaded = imageStatus === 'loaded';\n\n\tconst showBadge = variant === 'badge' && !! name;\n\tconst initials = name\n\t\t? name\n\t\t\t\t.split( /\\s+/ )\n\t\t\t\t.slice( 0, 2 )\n\t\t\t\t.map( ( word ) => word[ 0 ] )\n\t\t\t\t.join( '' )\n\t\t\t\t.toUpperCase()\n\t\t: undefined;\n\tconst nameColor = useMemo(\n\t\t() =>\n\t\t\tborderColor &&\n\t\t\tcolord( borderColor ).isReadable( GRAY_900, {\n\t\t\t\tlevel: 'AA',\n\t\t\t\tsize: 'normal',\n\t\t\t} )\n\t\t\t\t? GRAY_900\n\t\t\t\t: WHITE,\n\t\t[ borderColor ]\n\t);\n\n\tconst customProperties = {\n\t\t...style,\n\t\t...( borderColor\n\t\t\t? {\n\t\t\t\t\t'--editor-avatar-outline-color': borderColor,\n\t\t\t\t\t'--editor-avatar-name-color': nameColor,\n\t\t\t  }\n\t\t\t: {} ),\n\t} as React.CSSProperties;\n\n\tconst avatar = (\n\t\t<div\n\t\t\tclassName={ clsx( 'editor-avatar', className, {\n\t\t\t\t'has-avatar-border-color': !! borderColor,\n\t\t\t\t'has-src': imageLoaded,\n\t\t\t\t'is-badge': showBadge,\n\t\t\t\t'is-small': size === 'small',\n\t\t\t\t'is-dimmed': dimmed,\n\t\t\t} ) }\n\t\t\tstyle={ customProperties }\n\t\t\trole={ name ? 'img' : undefined }\n\t\t\taria-label={ name || undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<span className=\"editor-avatar__image\">\n\t\t\t\t{ src && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={ src }\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t\t\t\tclassName=\"editor-avatar__img\"\n\t\t\t\t\t\tonLoad={ handleLoad }\n\t\t\t\t\t\tonError={ handleError }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! imageLoaded && initials }\n\t\t\t</span>\n\t\t\t{ dimmed && !! statusIndicator && (\n\t\t\t\t<span className=\"editor-avatar__status-indicator\">\n\t\t\t\t\t<Icon icon={ statusIndicator } />\n\t\t\t\t</span>\n\t\t\t) }\n\t\t\t{ showBadge && (\n\t\t\t\t<span className=\"editor-avatar__name\">{ label || name }</span>\n\t\t\t) }\n\t\t</div>\n\t);\n\n\tif ( name && ( ! showBadge || label ) ) {\n\t\treturn <Tooltip text={ name }>{ avatar }</Tooltip>;\n\t}\n\n\treturn avatar;\n}\n\nexport default Avatar;\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AACjB,SAAS,QAAQ,cAAc;AAC/B,OAAO,gBAAgB;AAOvB,SAAS,MAAM,eAAe;AAC9B,SAAS,eAAe;AAMxB,SAAS,6BAA6B;AAwEnC,SAEE,KAFF;AApFH,OAAQ,CAAE,UAAW,CAAE;AAevB,IAAM,WAAW;AACjB,IAAM,QAAQ;AAEd,SAAS,OAAQ;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GACqE;AACpE,QAAM;AAAA,IACL,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACD,IAAI,sBAAuB,GAAI;AAC/B,QAAM,cAAc,gBAAgB;AAEpC,QAAM,YAAY,YAAY,WAAW,CAAC,CAAE;AAC5C,QAAM,WAAW,OACd,KACC,MAAO,KAAM,EACb,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,SAAU,KAAM,CAAE,CAAE,EAC3B,KAAM,EAAG,EACT,YAAY,IACb;AACH,QAAM,YAAY;AAAA,IACjB,MACC,eACA,OAAQ,WAAY,EAAE,WAAY,UAAU;AAAA,MAC3C,OAAO;AAAA,MACP,MAAM;AAAA,IACP,CAAE,IACC,WACA;AAAA,IACJ,CAAE,WAAY;AAAA,EACf;AAEA,QAAM,mBAAmB;AAAA,IACxB,GAAG;AAAA,IACH,GAAK,cACF;AAAA,MACA,iCAAiC;AAAA,MACjC,8BAA8B;AAAA,IAC9B,IACA,CAAC;AAAA,EACL;AAEA,QAAM,SACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,iBAAiB,WAAW;AAAA,QAC7C,2BAA2B,CAAC,CAAE;AAAA,QAC9B,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY,SAAS;AAAA,QACrB,aAAa;AAAA,MACd,CAAE;AAAA,MACF,OAAQ;AAAA,MACR,MAAO,OAAO,QAAQ;AAAA,MACtB,cAAa,QAAQ;AAAA,MACnB,GAAG;AAAA,MAEL;AAAA,6BAAC,UAAK,WAAU,wBACb;AAAA,iBACD;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,KAAI;AAAA,cACJ,aAAY;AAAA,cACZ,WAAU;AAAA,cACV,QAAS;AAAA,cACT,SAAU;AAAA;AAAA,UACX;AAAA,UAEC,CAAE,eAAe;AAAA,WACpB;AAAA,QACE,UAAU,CAAC,CAAE,mBACd,oBAAC,UAAK,WAAU,mCACf,8BAAC,QAAK,MAAO,iBAAkB,GAChC;AAAA,QAEC,aACD,oBAAC,UAAK,WAAU,uBAAwB,mBAAS,MAAM;AAAA;AAAA;AAAA,EAEzD;AAGD,MAAK,SAAU,CAAE,aAAa,QAAU;AACvC,WAAO,oBAAC,WAAQ,MAAO,MAAS,kBAAQ;AAAA,EACzC;AAEA,SAAO;AACR;AAEA,IAAO,oBAAQ;",
+  "names": []
+}

package/build-module/components/collaborators-presence/avatar/index.mjs

@@ -0,0 +1,6 @@
+// packages/editor/src/components/collaborators-presence/avatar/index.ts
+import { default as default2 } from "./component.mjs";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/collaborators-presence/avatar/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/collaborators-presence/avatar/index.ts"],
+  "sourcesContent": ["export { default } from './component';\nexport type { AvatarProps } from './types';\n"],
+  "mappings": ";AAAA,SAAS,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/build-module/components/collaborators-presence/avatar/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/components/collaborators-presence/avatar/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/components/collaborators-presence/avatar/use-image-loading-status.mjs

@@ -0,0 +1,19 @@
+// packages/editor/src/components/collaborators-presence/avatar/use-image-loading-status.ts
+import { useCallback, useState } from "@wordpress/element";
+function useImageLoadingStatus(src) {
+  const [prevSrc, setPrevSrc] = useState(src);
+  const [status, setStatus] = useState(
+    src ? "loading" : "idle"
+  );
+  if (prevSrc !== src) {
+    setPrevSrc(src);
+    setStatus(src ? "loading" : "idle");
+  }
+  const handleLoad = useCallback(() => setStatus("loaded"), []);
+  const handleError = useCallback(() => setStatus("error"), []);
+  return { status, handleLoad, handleError };
+}
+export {
+  useImageLoadingStatus
+};
+//# sourceMappingURL=use-image-loading-status.mjs.map

package/build-module/components/collaborators-presence/avatar/use-image-loading-status.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/collaborators-presence/avatar/use-image-loading-status.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\n\nexport type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\n/**\n * Tracks the loading status of an image URL. Returns the current status and\n * `onLoad`/`onError` callbacks to attach to the `<img>` element.\n *\n * Unlike a side-channel `new Image()` preloader, this hook relies on the\n * native `<img>` element's own events, which avoids cross-browser issues\n * with Safari's privacy features blocking programmatic image requests.\n *\n * @param src - The image URL. When falsy, status is `'idle'`.\n */\nexport function useImageLoadingStatus( src?: string ) {\n\tconst [ prevSrc, setPrevSrc ] = useState( src );\n\tconst [ status, setStatus ] = useState< ImageLoadingStatus >(\n\t\tsrc ? 'loading' : 'idle'\n\t);\n\n\t// Synchronous reset when src changes \u2014 runs during render, not after\n\t// commit, so a cached image's `load` event cannot sneak in before\n\t// the reset and get overwritten.\n\tif ( prevSrc !== src ) {\n\t\tsetPrevSrc( src );\n\t\tsetStatus( src ? 'loading' : 'idle' );\n\t}\n\n\tconst handleLoad = useCallback( () => setStatus( 'loaded' ), [] );\n\tconst handleError = useCallback( () => setStatus( 'error' ), [] );\n\n\treturn { status, handleLoad, handleError };\n}\n"],
+  "mappings": ";AAGA,SAAS,aAAa,gBAAgB;AAc/B,SAAS,sBAAuB,KAAe;AACrD,QAAM,CAAE,SAAS,UAAW,IAAI,SAAU,GAAI;AAC9C,QAAM,CAAE,QAAQ,SAAU,IAAI;AAAA,IAC7B,MAAM,YAAY;AAAA,EACnB;AAKA,MAAK,YAAY,KAAM;AACtB,eAAY,GAAI;AAChB,cAAW,MAAM,YAAY,MAAO;AAAA,EACrC;AAEA,QAAM,aAAa,YAAa,MAAM,UAAW,QAAS,GAAG,CAAC,CAAE;AAChE,QAAM,cAAc,YAAa,MAAM,UAAW,OAAQ,GAAG,CAAC,CAAE;AAEhE,SAAO,EAAE,QAAQ,YAAY,YAAY;AAC1C;",
+  "names": []
+}

package/build-module/components/collaborators-presence/avatar-group/component.mjs

@@ -0,0 +1,47 @@
+// packages/editor/src/components/collaborators-presence/avatar-group/component.tsx
+import clsx from "clsx";
+import { Children } from "@wordpress/element";
+import { sprintf, _n } from "@wordpress/i18n";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AvatarGroup({
+  className,
+  max = 3,
+  children,
+  ...props
+}) {
+  const childArray = Children.toArray(children);
+  const visible = childArray.slice(0, max);
+  const overflowCount = childArray.length - max;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      className: clsx("editor-avatar-group", className),
+      ...props,
+      children: [
+        visible,
+        overflowCount > 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "editor-avatar-group__overflow",
+            "aria-label": sprintf(
+              /* translators: %d: number of additional collaborators not shown */
+              _n(
+                "%d more collaborator",
+                "%d more collaborators",
+                overflowCount
+              ),
+              overflowCount
+            ),
+            children: `+${overflowCount}`
+          }
+        )
+      ]
+    }
+  );
+}
+var component_default = AvatarGroup;
+export {
+  component_default as default
+};
+//# sourceMappingURL=component.mjs.map

package/build-module/components/collaborators-presence/avatar-group/component.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/collaborators-presence/avatar-group/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Children } from '@wordpress/element';\nimport { sprintf, _n } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { AvatarGroupProps } from './types';\n\nfunction AvatarGroup( {\n\tclassName,\n\tmax = 3,\n\tchildren,\n\t...props\n}: AvatarGroupProps &\n\tOmit< React.HTMLAttributes< HTMLDivElement >, keyof AvatarGroupProps > ) {\n\tconst childArray = Children.toArray( children );\n\tconst visible = childArray.slice( 0, max );\n\tconst overflowCount = childArray.length - max;\n\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\tclassName={ clsx( 'editor-avatar-group', className ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ visible }\n\t\t\t{ overflowCount > 0 && (\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"editor-avatar-group__overflow\"\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t/* translators: %d: number of additional collaborators not shown */\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d more collaborator',\n\t\t\t\t\t\t\t'%d more collaborators',\n\t\t\t\t\t\t\toverflowCount\n\t\t\t\t\t\t),\n\t\t\t\t\t\toverflowCount\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ `+${ overflowCount }` }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default AvatarGroup;\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,gBAAgB;AACzB,SAAS,SAAS,UAAU;AAmB1B,SAOE,KAPF;AAZF,SAAS,YAAa;AAAA,EACrB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACJ,GAC0E;AACzE,QAAM,aAAa,SAAS,QAAS,QAAS;AAC9C,QAAM,UAAU,WAAW,MAAO,GAAG,GAAI;AACzC,QAAM,gBAAgB,WAAW,SAAS;AAE1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAY,KAAM,uBAAuB,SAAU;AAAA,MACjD,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,gBAAgB,KACjB;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,cAAa;AAAA;AAAA,cAEZ;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,cACD;AAAA,cACA;AAAA,YACD;AAAA,YAEE,cAAK,aAAc;AAAA;AAAA,QACtB;AAAA;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,oBAAQ;",
+  "names": []
+}

package/build-module/components/collaborators-presence/avatar-group/index.mjs

@@ -0,0 +1,6 @@
+// packages/editor/src/components/collaborators-presence/avatar-group/index.ts
+import { default as default2 } from "./component.mjs";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/collaborators-presence/avatar-group/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/collaborators-presence/avatar-group/index.ts"],
+  "sourcesContent": ["export { default } from './component';\nexport type { AvatarGroupProps } from './types';\n"],
+  "mappings": ";AAAA,SAAS,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/build-module/components/collaborators-presence/avatar-group/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/components/collaborators-presence/avatar-group/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}