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

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": []
+}

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

@@ -0,0 +1,78 @@
+"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-group/component.tsx
+var component_exports = {};
+__export(component_exports, {
+  default: () => component_default
+});
+module.exports = __toCommonJS(component_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AvatarGroup({
+  className,
+  max = 3,
+  children,
+  ...props
+}) {
+  const childArray = import_element.Children.toArray(children);
+  const visible = childArray.slice(0, max);
+  const overflowCount = childArray.length - max;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "group",
+      className: (0, import_clsx.default)("editor-avatar-group", className),
+      ...props,
+      children: [
+        visible,
+        overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "editor-avatar-group__overflow",
+            "aria-label": (0, import_i18n.sprintf)(
+              /* translators: %d: number of additional collaborators not shown */
+              (0, import_i18n._n)(
+                "%d more collaborator",
+                "%d more collaborators",
+                overflowCount
+              ),
+              overflowCount
+            ),
+            children: `+${overflowCount}`
+          }
+        )
+      ]
+    }
+  );
+}
+var component_default = AvatarGroup;
+//# sourceMappingURL=component.cjs.map

package/build/components/collaborators-presence/avatar-group/component.cjs.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAAyB;AACzB,kBAA4B;AAmB1B;AAZF,SAAS,YAAa;AAAA,EACrB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACJ,GAC0E;AACzE,QAAM,aAAa,wBAAS,QAAS,QAAS;AAC9C,QAAM,UAAU,WAAW,MAAO,GAAG,GAAI;AACzC,QAAM,gBAAgB,WAAW,SAAS;AAE1C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,eAAY,YAAAA,SAAM,uBAAuB,SAAU;AAAA,MACjD,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,gBAAgB,KACjB;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,kBAAa;AAAA;AAAA,kBAEZ;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": ["clsx"]
+}

package/build/components/collaborators-presence/avatar-group/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-group/index.ts
+var avatar_group_exports = {};
+__export(avatar_group_exports, {
+  default: () => import_component.default
+});
+module.exports = __toCommonJS(avatar_group_exports);
+var import_component = __toESM(require("./component.cjs"));
+//# sourceMappingURL=index.cjs.map

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

package/build/components/collaborators-presence/avatar-group/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-group/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/collaborators-presence/avatar-group/types.ts"],
+  "sourcesContent": ["export type AvatarGroupProps = {\n\t/**\n\t * Maximum number of avatars to display before showing an\n\t * overflow indicator.\n\t *\n\t * @default 3\n\t */\n\tmax?: number;\n\t/**\n\t * Avatar elements to display in the group.\n\t */\n\tchildren: React.ReactNode;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

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

@@ -1,7 +1,9 @@
 "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)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/index.tsx
@@ -27,16 +37,19 @@ var import_components = require("@wordpress/components");
 var import_element = require("@wordpress/element");
 var import_core_data = require("@wordpress/core-data");
 var import_i18n = require("@wordpress/i18n");
+var import_avatar = __toESM(require("./avatar/index.cjs"));
+var import_avatar_group = __toESM(require("./avatar-group/index.cjs"));
 var import_list = require("./list.cjs");
 var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_get_avatar_url = require("../collaborators-overlay/get-avatar-url.cjs");
 var import_utils = require("../collab-sidebar/utils.cjs");
+var import_cursor_registry = require("../collaborators-overlay/cursor-registry.cjs");
 
 // packages/editor/src/components/collaborators-presence/styles/collaborators-presence.scss
-if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='924e260217']")) {
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='eee1778bc0']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "924e260217");
-  style.appendChild(document.createTextNode(".editor-collaborators-presence{align-items:center;background:#f0f0f0;border-radius:4px;display:flex;flex-shrink:0;height:32px;margin-right:8px}.editor-collaborators-presence:hover{background-color:#e0e0e0}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button{align-items:center;background:#0000;border-radius:4px;box-sizing:border-box;color:#2f2f2f;cursor:pointer;display:flex;height:100%;padding:4px;position:relative}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover{background:#0000;color:#2f2f2f}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover{background:#ddd;color:#2f2f2f}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus,2px) var(--wp-admin-theme-color,#007cba);outline:none}"));
+  style.setAttribute("data-wp-hash", "eee1778bc0");
+  style.appendChild(document.createTextNode(".editor-collaborators-presence{align-items:center;background:#f0f0f0;border-radius:4px;display:flex;flex-shrink:0;height:32px;margin-right:8px}.editor-collaborators-presence:has(.is-pressed),.editor-collaborators-presence:hover{background-color:#e0e0e0}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button{align-items:center;background:#0000;border-radius:4px;box-sizing:border-box;color:#2f2f2f;cursor:pointer;display:flex;height:100%;padding:4px;position:relative}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover{background:#0000;color:#2f2f2f}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus,2px) var(--wp-admin-theme-color,#007cba);outline:none}"));
   document.head.appendChild(style);
 }
 
@@ -44,7 +57,6 @@ if (typeof document !== "undefined" && !document.head.querySelector("style[data-
 var import_collaborators_overlay = require("../collaborators-overlay/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var { useActiveCollaborators } = (0, import_lock_unlock.unlock)(import_core_data.privateApis);
-var { Avatar, AvatarGroup } = (0, import_lock_unlock.unlock)(import_components.privateApis);
 function CollaboratorsPresence({
   postId,
   postType
@@ -54,8 +66,20 @@ function CollaboratorsPresence({
     postType
   );
   const otherActiveCollaborators = activeCollaborators.filter(
-    (collaborator) => !collaborator.isMe
+    (c) => !c.isMe
   );
+  const collaboratorsForList = (0, import_element.useMemo)(() => {
+    return [...activeCollaborators].sort((a, b) => {
+      if (a.isMe && !b.isMe) {
+        return -1;
+      }
+      if (!a.isMe && b.isMe) {
+        return 1;
+      }
+      return 0;
+    });
+  }, [activeCollaborators]);
+  const [cursorRegistry] = (0, import_element.useState)(import_cursor_registry.createCursorRegistry);
   const [isPopoverVisible, setIsPopoverVisible] = (0, import_element.useState)(false);
   const [popoverAnchor, setPopoverAnchor] = (0, import_element.useState)(
     null
@@ -63,6 +87,7 @@ function CollaboratorsPresence({
   if (otherActiveCollaborators.length === 0) {
     return null;
   }
+  const me = activeCollaborators.find((c) => c.isMe);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "editor-collaborators-presence", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -76,36 +101,58 @@ function CollaboratorsPresence({
           "aria-label": (0, import_i18n.sprintf)(
             // translators: %d: number of online collaborators.
             (0, import_i18n.__)("Collaborators list, %d online"),
-            otherActiveCollaborators.length
+            collaboratorsForList.length
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarGroup, { max: 3, children: otherActiveCollaborators.map(
-            (collaboratorState) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              Avatar,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_avatar_group.default, { max: 4, children: [
+            me && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_avatar.default,
               {
                 src: (0, import_get_avatar_url.getAvatarUrl)(
-                  collaboratorState.collaboratorInfo.avatar_urls
-                ),
-                name: collaboratorState.collaboratorInfo.name,
-                borderColor: (0, import_utils.getAvatarBorderColor)(
-                  collaboratorState.collaboratorInfo.id
+                  me.collaboratorInfo.avatar_urls
                 ),
+                name: me.collaboratorInfo.name,
+                borderColor: "var(--wp-admin-theme-color)",
                 size: "small"
               },
-              collaboratorState.clientId
+              me.clientId
+            ),
+            otherActiveCollaborators.map(
+              (collaboratorState) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_avatar.default,
+                {
+                  src: (0, import_get_avatar_url.getAvatarUrl)(
+                    collaboratorState.collaboratorInfo.avatar_urls
+                  ),
+                  name: collaboratorState.collaboratorInfo.name,
+                  borderColor: (0, import_utils.getAvatarBorderColor)(
+                    collaboratorState.collaboratorInfo.id
+                  ),
+                  size: "small"
+                },
+                collaboratorState.clientId
+              )
             )
-          ) })
+          ] })
         }
       ),
       isPopoverVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_list.CollaboratorsList,
         {
-          activeCollaborators: otherActiveCollaborators,
+          activeCollaborators: collaboratorsForList,
           popoverAnchor,
-          setIsPopoverVisible
+          setIsPopoverVisible,
+          cursorRegistry
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_collaborators_overlay.CollaboratorsOverlay, { postId, postType })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_collaborators_overlay.CollaboratorsOverlay,
+      {
+        postId,
+        postType,
+        cursorRegistry
+      }
+    )
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node: