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

package/build/components/collaborators-overlay/use-render-cursors.cjs

@@ -24,12 +24,17 @@ __export(use_render_cursors_exports, {
 });
 module.exports = __toCommonJS(use_render_cursors_exports);
 var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
 var import_element = require("@wordpress/element");
+var import_preferences = require("@wordpress/preferences");
 var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_get_avatar_url = require("./get-avatar-url.cjs");
 var import_utils = require("../collab-sidebar/utils.cjs");
+var import_compute_selection = require("./compute-selection.cjs");
+var import_use_debounced_recompute = require("./use-debounced-recompute.cjs");
 var { useActiveCollaborators, useResolvedSelection } = (0, import_lock_unlock.unlock)(import_core_data.privateApis);
-function useRenderCursors(overlayElement, blockEditorDocument, postId, postType) {
+var { SelectionType } = (0, import_lock_unlock.unlock)(import_core_data.privateApis);
+function useRenderCursors(overlayElement, blockEditorDocument, postId, postType, delayMs) {
   const sortedUsers = useActiveCollaborators(
     postId ?? null,
     postType ?? null
@@ -38,191 +43,96 @@ function useRenderCursors(overlayElement, blockEditorDocument, postId, postType)
     postId ?? null,
     postType ?? null
   );
+  const showOwnCursor = (0, import_data.useSelect)(
+    (select) => select(import_preferences.store).get("core", "showCollaborationCursor"),
+    []
+  );
   const [cursorPositions, setCursorPositions] = (0, import_element.useState)(
     []
   );
-  const computeCursors = (0, import_element.useMemo)(
-    () => () => {
-      if (!overlayElement || !blockEditorDocument) {
-        setCursorPositions([]);
+  const [recomputeToken, rerenderCursorsAfterDelay] = (0, import_use_debounced_recompute.useDebouncedRecompute)(delayMs);
+  (0, import_element.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: import_core_data.SelectionType.None
-        };
-        const userName = user.collaboratorInfo.name;
-        const clientId = user.clientId;
-        const color = (0, import_utils.getAvatarBorderColor)(user.collaboratorInfo.id);
-        const avatarUrl = (0, import_get_avatar_url.getAvatarUrl)(
-          user.collaboratorInfo.avatar_urls
-        );
-        let coords = null;
-        if (selection.type === import_core_data.SelectionType.None) {
-        } else if (selection.type === import_core_data.SelectionType.WholeBlock) {
-        } else if (selection.type === import_core_data.SelectionType.Cursor) {
-          const { textIndex, localClientId } = resolveSelection(selection);
-          if (localClientId) {
-            coords = getCursorPosition(
-              textIndex,
-              localClientId,
-              blockEditorDocument,
-              overlayElement
-            );
-          }
-        } else if (selection.type === import_core_data.SelectionType.SelectionInOneBlock || selection.type === import_core_data.SelectionType.SelectionInMultipleBlocks) {
-          const { textIndex, localClientId } = resolveSelection({
-            type: import_core_data.SelectionType.Cursor,
+      } 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]
-  );
-  (0, import_element.useEffect)(computeCursors, [computeCursors]);
-  const rerenderCursorsAfterDelay = (0, import_element.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)" : (0, import_utils.getAvatarBorderColor)(user.collaboratorInfo.id);
+      const avatarUrl = (0, import_get_avatar_url.getAvatarUrl)(user.collaboratorInfo.avatar_urls);
+      const selectionVisual = (0, import_compute_selection.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 };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useRenderCursors

package/build/components/collaborators-overlay/use-render-cursors.cjs.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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",
-  "names": ["coreDataPrivateApis"]
+  "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": ["coreDataPrivateApis", "preferencesStore"]
 }

package/build/components/collaborators-presence/avatar/component.cjs

@@ -0,0 +1,121 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collaborators-presence/avatar/component.tsx
+var component_exports = {};
+__export(component_exports, {
+  default: () => component_default
+});
+module.exports = __toCommonJS(component_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_colord = require("colord");
+var import_a11y = __toESM(require("colord/plugins/a11y"));
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_use_image_loading_status = require("./use-image-loading-status.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+(0, import_colord.extend)([import_a11y.default]);
+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
+  } = (0, import_use_image_loading_status.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 = (0, import_element.useMemo)(
+    () => borderColor && (0, import_colord.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__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx.default)("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__ */ (0, import_jsx_runtime.jsxs)("span", { className: "editor-avatar__image", children: [
+          src && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src,
+              alt: "",
+              crossOrigin: "anonymous",
+              className: "editor-avatar__img",
+              onLoad: handleLoad,
+              onError: handleError
+            }
+          ),
+          !imageLoaded && initials
+        ] }),
+        dimmed && !!statusIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "editor-avatar__status-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: statusIndicator }) }),
+        showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "editor-avatar__name", children: label || name })
+      ]
+    }
+  );
+  if (name && (!showBadge || label)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: name, children: avatar });
+  }
+  return avatar;
+}
+var component_default = Avatar;
+//# sourceMappingURL=component.cjs.map

package/build/components/collaborators-presence/avatar/component.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AACjB,oBAA+B;AAC/B,kBAAuB;AAOvB,wBAA8B;AAC9B,qBAAwB;AAMxB,sCAAsC;AAwEnC;AAAA,IApFH,sBAAQ,CAAE,YAAAA,OAAW,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,QAAI,uDAAuB,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,gBAAY;AAAA,IACjB,MACC,mBACA,sBAAQ,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,eAAY,YAAAC,SAAM,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,qDAAC,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,4CAAC,UAAK,WAAU,mCACf,sDAAC,0BAAK,MAAO,iBAAkB,GAChC;AAAA,QAEC,aACD,4CAAC,UAAK,WAAU,uBAAwB,mBAAS,MAAM;AAAA;AAAA;AAAA,EAEzD;AAGD,MAAK,SAAU,CAAE,aAAa,QAAU;AACvC,WAAO,4CAAC,6BAAQ,MAAO,MAAS,kBAAQ;AAAA,EACzC;AAEA,SAAO;AACR;AAEA,IAAO,oBAAQ;",
+  "names": ["a11yPlugin", "clsx"]
+}

package/build/components/collaborators-presence/avatar/index.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collaborators-presence/avatar/index.ts
+var avatar_exports = {};
+__export(avatar_exports, {
+  default: () => import_component.default
+});
+module.exports = __toCommonJS(avatar_exports);
+var import_component = __toESM(require("./component.cjs"));
+//# sourceMappingURL=index.cjs.map

package/build/components/collaborators-presence/avatar/index.cjs.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;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAwB;",
+  "names": []
+}

package/build/components/collaborators-presence/avatar/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collaborators-presence/avatar/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/build/components/collaborators-presence/avatar/types.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/collaborators-presence/avatar/types.ts"],
+  "sourcesContent": ["import type { IconType } from '@wordpress/components';\n\nexport type AvatarProps = {\n\t/**\n\t * URL of the avatar image.\n\t *\n\t * When not provided, initials derived from `name` are shown.\n\t */\n\tsrc?: string;\n\t/**\n\t * Name of the user. Used as an accessible label and to generate\n\t * initials when no image is provided.\n\t */\n\tname?: string;\n\t/**\n\t * Visible text shown in the hover badge. When not provided, `name`\n\t * is used instead. Use this to provide contextual labels like \"You\"\n\t * without affecting the accessible name or initials.\n\t */\n\tlabel?: string;\n\t/**\n\t * Specifies the avatar's visual style treatment.\n\t *\n\t * - `'badge'`: Displays a hover-expand pill that reveals the user's\n\t *   name (or `label`) on hover. Requires `name` to be set.\n\t *\n\t * Leave undefined for the default circular avatar.\n\t */\n\tvariant?: 'badge';\n\t/**\n\t * Size of the avatar.\n\t *\n\t * - `'default'`: For standalone avatars and list items where the\n\t *   avatar is a primary visual element (e.g. collaborator lists,\n\t *   user profiles).\n\t * - `'small'`: For inline or compact contexts where space is\n\t *   limited (e.g. cursor labels, toolbars, badges alongside text).\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'small';\n\t/**\n\t * CSS color value for an accent border ring around the avatar.\n\t *\n\t * When not provided, no border is rendered and the hover badge\n\t * uses the admin theme color as its background.\n\t */\n\tborderColor?: string;\n\t/**\n\t * Whether to dim the avatar to indicate an inactive or away state.\n\t * When true, images are desaturated and faded, and initials are\n\t * reduced in opacity.\n\t *\n\t * @default false\n\t */\n\tdimmed?: boolean;\n\t/**\n\t * An icon or custom component rendered as a centered overlay on the\n\t * avatar image. Only visible when `dimmed` is true.\n\t *\n\t * Accepts any value supported by the `Icon` component: an icon from\n\t * `@wordpress/icons`, a Dashicon name string, a component, or a\n\t * JSX element.\n\t */\n\tstatusIndicator?: IconType | null;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collaborators-presence/avatar/use-image-loading-status.ts
+var use_image_loading_status_exports = {};
+__export(use_image_loading_status_exports, {
+  useImageLoadingStatus: () => useImageLoadingStatus
+});
+module.exports = __toCommonJS(use_image_loading_status_exports);
+var import_element = require("@wordpress/element");
+function useImageLoadingStatus(src) {
+  const [prevSrc, setPrevSrc] = (0, import_element.useState)(src);
+  const [status, setStatus] = (0, import_element.useState)(
+    src ? "loading" : "idle"
+  );
+  if (prevSrc !== src) {
+    setPrevSrc(src);
+    setStatus(src ? "loading" : "idle");
+  }
+  const handleLoad = (0, import_element.useCallback)(() => setStatus("loaded"), []);
+  const handleError = (0, import_element.useCallback)(() => setStatus("error"), []);
+  return { status, handleLoad, handleError };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useImageLoadingStatus
+});
+//# sourceMappingURL=use-image-loading-status.cjs.map

package/build/components/collaborators-presence/avatar/use-image-loading-status.cjs.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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAsC;AAc/B,SAAS,sBAAuB,KAAe;AACrD,QAAM,CAAE,SAAS,UAAW,QAAI,yBAAU,GAAI;AAC9C,QAAM,CAAE,QAAQ,SAAU,QAAI;AAAA,IAC7B,MAAM,YAAY;AAAA,EACnB;AAKA,MAAK,YAAY,KAAM;AACtB,eAAY,GAAI;AAChB,cAAW,MAAM,YAAY,MAAO;AAAA,EACrC;AAEA,QAAM,iBAAa,4BAAa,MAAM,UAAW,QAAS,GAAG,CAAC,CAAE;AAChE,QAAM,kBAAc,4BAAa,MAAM,UAAW,OAAQ,GAAG,CAAC,CAAE;AAEhE,SAAO,EAAE,QAAQ,YAAY,YAAY;AAC1C;",
+  "names": []
+}