@wordpress/editor 14.41.0 → 14.41.2-next.v.202603161435.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 14.41.1-next.0 (2026-03-16)
+
+### Bug Fixes
+
+-   Fixed avatar contrast ring not displaying over loaded images by using a `::after` pseudo-element instead of an inset `box-shadow`.
+
 ## 14.41.0 (2026-03-04)
 
 ## 14.40.0 (2026-02-18)

package/build/components/collab-sidebar/index.cjs

@@ -234,17 +234,20 @@ function NotesSidebar({ postId }) {
   ] });
 }
 function NotesSidebarContainer() {
-  const { postId, editorMode } = (0, import_data.useSelect)((select) => {
-    const { getCurrentPostId, getEditorMode } = select(import_store.store);
+  const { postId, editorMode, revisionsMode } = (0, import_data.useSelect)((select) => {
+    const { getCurrentPostId, getEditorMode, isRevisionsMode } = (0, import_lock_unlock.unlock)(
+      select(import_store.store)
+    );
     return {
       postId: getCurrentPostId(),
-      editorMode: getEditorMode()
+      editorMode: getEditorMode(),
+      revisionsMode: isRevisionsMode()
     };
   }, []);
   if (!postId || typeof postId !== "number") {
     return null;
   }
-  if (editorMode === "text") {
+  if (editorMode === "text" || revisionsMode) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_post_type_support_check.default, { supportKeys: "editor.notes", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotesSidebar, { postId }) });

package/build/components/collab-sidebar/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collab-sidebar/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\nimport { comment as commentIcon } from '@wordpress/icons';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport PluginSidebar from '../plugin-sidebar';\nimport {\n\tALL_NOTES_SIDEBAR,\n\tFLOATING_NOTES_SIDEBAR,\n\tSIDEBARS,\n} from './constants';\nimport { Comments } from './comments';\nimport { store as editorStore } from '../../store';\nimport AddCommentMenuItem from './comment-menu-item';\nimport CommentAvatarIndicator from './comment-indicator-toolbar';\nimport { useGlobalStylesContext } from '../global-styles-provider';\nimport {\n\tuseBlockComments,\n\tuseBlockCommentsActions,\n\tuseEnableFloatingSidebar,\n} from './hooks';\nimport PostTypeSupportCheck from '../post-type-support-check';\nimport { unlock } from '../../lock-unlock';\n\nfunction NotesSidebarContent( {\n\tstyles,\n\tcomments,\n\tcommentSidebarRef,\n\treflowComments,\n\tcommentLastUpdated,\n\tisFloating = false,\n} ) {\n\tconst { onCreate, onEdit, onDelete } =\n\t\tuseBlockCommentsActions( reflowComments );\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"editor-collab-sidebar-panel\"\n\t\t\tstyle={ styles }\n\t\t\trole=\"tree\"\n\t\t\tspacing=\"3\"\n\t\t\tjustify=\"flex-start\"\n\t\t\tref={ ( node ) => {\n\t\t\t\t// Sometimes previous sidebar unmounts after the new one mounts.\n\t\t\t\t// This ensures we always have the latest reference.\n\t\t\t\tif ( node ) {\n\t\t\t\t\tcommentSidebarRef.current = node;\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tisFloating ? __( 'Unresolved notes' ) : __( 'All notes' )\n\t\t\t}\n\t\t>\n\t\t\t<Comments\n\t\t\t\tthreads={ comments }\n\t\t\t\tonEditComment={ onEdit }\n\t\t\t\tonAddReply={ onCreate }\n\t\t\t\tonCommentDelete={ onDelete }\n\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\treflowComments={ reflowComments }\n\t\t\t\tcommentLastUpdated={ commentLastUpdated }\n\t\t\t\tisFloating={ isFloating }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\nfunction NotesSidebar( { postId } ) {\n\tconst { getActiveComplementaryArea } = useSelect( interfaceStore );\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tconst { toggleBlockSpotlight, selectBlock } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\tconst { selectNote } = unlock( useDispatch( editorStore ) );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst commentSidebarRef = useRef( null );\n\n\tconst { clientId, blockCommentId, isClassicBlock } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetSelectedBlockClientId,\n\t\t\t\tgetBlockName,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst _clientId = getSelectedBlockClientId();\n\t\t\treturn {\n\t\t\t\tclientId: _clientId,\n\t\t\t\tblockCommentId: _clientId\n\t\t\t\t\t? getBlockAttributes( _clientId )?.metadata?.noteId\n\t\t\t\t\t: null,\n\t\t\t\tisClassicBlock: _clientId\n\t\t\t\t\t? getBlockName( _clientId ) === 'core/freeform'\n\t\t\t\t\t: false,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { isDistractionFree } = useSelect( ( select ) => {\n\t\tconst { get } = select( preferencesStore );\n\t\treturn {\n\t\t\tisDistractionFree: get( 'core', 'distractionFree' ),\n\t\t};\n\t}, [] );\n\tconst selectedNote = useSelect(\n\t\t( select ) => unlock( select( editorStore ) ).getSelectedNote(),\n\t\t[]\n\t);\n\n\tconst {\n\t\tresultComments,\n\t\tunresolvedSortedThreads,\n\t\treflowComments,\n\t\tcommentLastUpdated,\n\t} = useBlockComments( postId );\n\n\t// Only enable the floating sidebar for large viewports.\n\tconst showFloatingSidebar = isLargeViewport;\n\t// Fallback to \"All notes\" sidebar on smaller viewports.\n\tconst showAllNotesSidebar =\n\t\tresultComments.length > 0 || ! showFloatingSidebar;\n\tuseEnableFloatingSidebar(\n\t\tshowFloatingSidebar &&\n\t\t\t( unresolvedSortedThreads.length > 0 || selectedNote !== undefined )\n\t);\n\n\tuseShortcut(\n\t\t'core/editor/new-note',\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\topenTheSidebar();\n\t\t},\n\t\t{\n\t\t\t// When multiple notes per block are supported. Remove note ID check.\n\t\t\t// See: https://github.com/WordPress/gutenberg/pull/75147.\n\t\t\tisDisabled:\n\t\t\t\tisDistractionFree ||\n\t\t\t\tisClassicBlock ||\n\t\t\t\t! clientId ||\n\t\t\t\t!! blockCommentId,\n\t\t}\n\t);\n\n\t// Get the global styles to set the background color of the sidebar.\n\tconst { merged: GlobalStyles } = useGlobalStylesContext();\n\tconst backgroundColor = GlobalStyles?.styles?.color?.background;\n\n\t// Find the current thread for the selected block.\n\tconst currentThread = blockCommentId\n\t\t? resultComments.find( ( thread ) => thread.id === blockCommentId )\n\t\t: null;\n\n\tasync function openTheSidebar( selectedClientId ) {\n\t\tconst prevArea = await getActiveComplementaryArea( 'core' );\n\t\tconst activeNotesArea = SIDEBARS.find( ( name ) => name === prevArea );\n\t\tconst targetClientId =\n\t\t\tselectedClientId && selectedClientId !== clientId\n\t\t\t\t? selectedClientId\n\t\t\t\t: clientId;\n\t\tconst targetNote = resultComments.find(\n\t\t\t( note ) => note.blockClientId === targetClientId\n\t\t);\n\n\t\tif ( targetNote?.status === 'approved' ) {\n\t\t\tenableComplementaryArea( 'core', ALL_NOTES_SIDEBAR );\n\t\t} else if ( ! activeNotesArea || ! showAllNotesSidebar ) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core',\n\t\t\t\tshowFloatingSidebar ? FLOATING_NOTES_SIDEBAR : ALL_NOTES_SIDEBAR\n\t\t\t);\n\t\t}\n\n\t\tconst currentArea = await getActiveComplementaryArea( 'core' );\n\t\t// Bail out if the current active area is not one of note sidebars.\n\t\tif ( ! SIDEBARS.includes( currentArea ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// A special case for the List View, where block selection isn't required to trigger an action.\n\t\t// The action won't do anything if the block is already selected.\n\t\tselectBlock( targetClientId, null );\n\t\ttoggleBlockSpotlight( targetClientId, true );\n\t\tselectNote( targetNote ? targetNote.id : 'new', { focus: true } );\n\t}\n\n\tif ( isDistractionFree ) {\n\t\treturn <AddCommentMenuItem isDistractionFree />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ !! currentThread && (\n\t\t\t\t<CommentAvatarIndicator\n\t\t\t\t\tthread={ currentThread }\n\t\t\t\t\tonClick={ openTheSidebar }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<AddCommentMenuItem onClick={ openTheSidebar } />\n\t\t\t{ showAllNotesSidebar && (\n\t\t\t\t<PluginSidebar\n\t\t\t\t\tidentifier={ ALL_NOTES_SIDEBAR }\n\t\t\t\t\tname={ ALL_NOTES_SIDEBAR }\n\t\t\t\t\ttitle={ __( 'All notes' ) }\n\t\t\t\t\theader={\n\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t{ __( 'All notes' ) }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t}\n\t\t\t\t\ticon={ commentIcon }\n\t\t\t\t\tcloseLabel={ __( 'Close Notes' ) }\n\t\t\t\t>\n\t\t\t\t\t<NotesSidebarContent\n\t\t\t\t\t\tcomments={ resultComments }\n\t\t\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\t\t/>\n\t\t\t\t</PluginSidebar>\n\t\t\t) }\n\t\t\t{ isLargeViewport && (\n\t\t\t\t<PluginSidebar\n\t\t\t\t\tisPinnable={ false }\n\t\t\t\t\theader={ false }\n\t\t\t\t\tidentifier={ FLOATING_NOTES_SIDEBAR }\n\t\t\t\t\tclassName=\"editor-collab-sidebar\"\n\t\t\t\t\theaderClassName=\"editor-collab-sidebar__header\"\n\t\t\t\t\tbackgroundColor={ backgroundColor }\n\t\t\t\t>\n\t\t\t\t\t<NotesSidebarContent\n\t\t\t\t\t\tcomments={ unresolvedSortedThreads }\n\t\t\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\t\t\treflowComments={ reflowComments }\n\t\t\t\t\t\tcommentLastUpdated={ commentLastUpdated }\n\t\t\t\t\t\tstyles={ {\n\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisFloating\n\t\t\t\t\t/>\n\t\t\t\t</PluginSidebar>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default function NotesSidebarContainer() {\n\tconst { postId, editorMode } = useSelect( ( select ) => {\n\t\tconst { getCurrentPostId, getEditorMode } = select( editorStore );\n\t\treturn {\n\t\t\tpostId: getCurrentPostId(),\n\t\t\teditorMode: getEditorMode(),\n\t\t};\n\t}, [] );\n\n\tif ( ! postId || typeof postId !== 'number' ) {\n\t\treturn null;\n\t}\n\n\t// Hide Notes sidebar in Code Editor mode since block-level commenting.\n\tif ( editorMode === 'text' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<PostTypeSupportCheck supportKeys=\"editor.notes\">\n\t\t\t<NotesSidebar postId={ postId } />\n\t\t</PostTypeSupportCheck>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\nimport { comment as commentIcon } from '@wordpress/icons';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport PluginSidebar from '../plugin-sidebar';\nimport {\n\tALL_NOTES_SIDEBAR,\n\tFLOATING_NOTES_SIDEBAR,\n\tSIDEBARS,\n} from './constants';\nimport { Comments } from './comments';\nimport { store as editorStore } from '../../store';\nimport AddCommentMenuItem from './comment-menu-item';\nimport CommentAvatarIndicator from './comment-indicator-toolbar';\nimport { useGlobalStylesContext } from '../global-styles-provider';\nimport {\n\tuseBlockComments,\n\tuseBlockCommentsActions,\n\tuseEnableFloatingSidebar,\n} from './hooks';\nimport PostTypeSupportCheck from '../post-type-support-check';\nimport { unlock } from '../../lock-unlock';\n\nfunction NotesSidebarContent( {\n\tstyles,\n\tcomments,\n\tcommentSidebarRef,\n\treflowComments,\n\tcommentLastUpdated,\n\tisFloating = false,\n} ) {\n\tconst { onCreate, onEdit, onDelete } =\n\t\tuseBlockCommentsActions( reflowComments );\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"editor-collab-sidebar-panel\"\n\t\t\tstyle={ styles }\n\t\t\trole=\"tree\"\n\t\t\tspacing=\"3\"\n\t\t\tjustify=\"flex-start\"\n\t\t\tref={ ( node ) => {\n\t\t\t\t// Sometimes previous sidebar unmounts after the new one mounts.\n\t\t\t\t// This ensures we always have the latest reference.\n\t\t\t\tif ( node ) {\n\t\t\t\t\tcommentSidebarRef.current = node;\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tisFloating ? __( 'Unresolved notes' ) : __( 'All notes' )\n\t\t\t}\n\t\t>\n\t\t\t<Comments\n\t\t\t\tthreads={ comments }\n\t\t\t\tonEditComment={ onEdit }\n\t\t\t\tonAddReply={ onCreate }\n\t\t\t\tonCommentDelete={ onDelete }\n\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\treflowComments={ reflowComments }\n\t\t\t\tcommentLastUpdated={ commentLastUpdated }\n\t\t\t\tisFloating={ isFloating }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\nfunction NotesSidebar( { postId } ) {\n\tconst { getActiveComplementaryArea } = useSelect( interfaceStore );\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tconst { toggleBlockSpotlight, selectBlock } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\tconst { selectNote } = unlock( useDispatch( editorStore ) );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst commentSidebarRef = useRef( null );\n\n\tconst { clientId, blockCommentId, isClassicBlock } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetSelectedBlockClientId,\n\t\t\t\tgetBlockName,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst _clientId = getSelectedBlockClientId();\n\t\t\treturn {\n\t\t\t\tclientId: _clientId,\n\t\t\t\tblockCommentId: _clientId\n\t\t\t\t\t? getBlockAttributes( _clientId )?.metadata?.noteId\n\t\t\t\t\t: null,\n\t\t\t\tisClassicBlock: _clientId\n\t\t\t\t\t? getBlockName( _clientId ) === 'core/freeform'\n\t\t\t\t\t: false,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { isDistractionFree } = useSelect( ( select ) => {\n\t\tconst { get } = select( preferencesStore );\n\t\treturn {\n\t\t\tisDistractionFree: get( 'core', 'distractionFree' ),\n\t\t};\n\t}, [] );\n\tconst selectedNote = useSelect(\n\t\t( select ) => unlock( select( editorStore ) ).getSelectedNote(),\n\t\t[]\n\t);\n\n\tconst {\n\t\tresultComments,\n\t\tunresolvedSortedThreads,\n\t\treflowComments,\n\t\tcommentLastUpdated,\n\t} = useBlockComments( postId );\n\n\t// Only enable the floating sidebar for large viewports.\n\tconst showFloatingSidebar = isLargeViewport;\n\t// Fallback to \"All notes\" sidebar on smaller viewports.\n\tconst showAllNotesSidebar =\n\t\tresultComments.length > 0 || ! showFloatingSidebar;\n\tuseEnableFloatingSidebar(\n\t\tshowFloatingSidebar &&\n\t\t\t( unresolvedSortedThreads.length > 0 || selectedNote !== undefined )\n\t);\n\n\tuseShortcut(\n\t\t'core/editor/new-note',\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\topenTheSidebar();\n\t\t},\n\t\t{\n\t\t\t// When multiple notes per block are supported. Remove note ID check.\n\t\t\t// See: https://github.com/WordPress/gutenberg/pull/75147.\n\t\t\tisDisabled:\n\t\t\t\tisDistractionFree ||\n\t\t\t\tisClassicBlock ||\n\t\t\t\t! clientId ||\n\t\t\t\t!! blockCommentId,\n\t\t}\n\t);\n\n\t// Get the global styles to set the background color of the sidebar.\n\tconst { merged: GlobalStyles } = useGlobalStylesContext();\n\tconst backgroundColor = GlobalStyles?.styles?.color?.background;\n\n\t// Find the current thread for the selected block.\n\tconst currentThread = blockCommentId\n\t\t? resultComments.find( ( thread ) => thread.id === blockCommentId )\n\t\t: null;\n\n\tasync function openTheSidebar( selectedClientId ) {\n\t\tconst prevArea = await getActiveComplementaryArea( 'core' );\n\t\tconst activeNotesArea = SIDEBARS.find( ( name ) => name === prevArea );\n\t\tconst targetClientId =\n\t\t\tselectedClientId && selectedClientId !== clientId\n\t\t\t\t? selectedClientId\n\t\t\t\t: clientId;\n\t\tconst targetNote = resultComments.find(\n\t\t\t( note ) => note.blockClientId === targetClientId\n\t\t);\n\n\t\tif ( targetNote?.status === 'approved' ) {\n\t\t\tenableComplementaryArea( 'core', ALL_NOTES_SIDEBAR );\n\t\t} else if ( ! activeNotesArea || ! showAllNotesSidebar ) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core',\n\t\t\t\tshowFloatingSidebar ? FLOATING_NOTES_SIDEBAR : ALL_NOTES_SIDEBAR\n\t\t\t);\n\t\t}\n\n\t\tconst currentArea = await getActiveComplementaryArea( 'core' );\n\t\t// Bail out if the current active area is not one of note sidebars.\n\t\tif ( ! SIDEBARS.includes( currentArea ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// A special case for the List View, where block selection isn't required to trigger an action.\n\t\t// The action won't do anything if the block is already selected.\n\t\tselectBlock( targetClientId, null );\n\t\ttoggleBlockSpotlight( targetClientId, true );\n\t\tselectNote( targetNote ? targetNote.id : 'new', { focus: true } );\n\t}\n\n\tif ( isDistractionFree ) {\n\t\treturn <AddCommentMenuItem isDistractionFree />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ !! currentThread && (\n\t\t\t\t<CommentAvatarIndicator\n\t\t\t\t\tthread={ currentThread }\n\t\t\t\t\tonClick={ openTheSidebar }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<AddCommentMenuItem onClick={ openTheSidebar } />\n\t\t\t{ showAllNotesSidebar && (\n\t\t\t\t<PluginSidebar\n\t\t\t\t\tidentifier={ ALL_NOTES_SIDEBAR }\n\t\t\t\t\tname={ ALL_NOTES_SIDEBAR }\n\t\t\t\t\ttitle={ __( 'All notes' ) }\n\t\t\t\t\theader={\n\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t{ __( 'All notes' ) }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t}\n\t\t\t\t\ticon={ commentIcon }\n\t\t\t\t\tcloseLabel={ __( 'Close Notes' ) }\n\t\t\t\t>\n\t\t\t\t\t<NotesSidebarContent\n\t\t\t\t\t\tcomments={ resultComments }\n\t\t\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\t\t/>\n\t\t\t\t</PluginSidebar>\n\t\t\t) }\n\t\t\t{ isLargeViewport && (\n\t\t\t\t<PluginSidebar\n\t\t\t\t\tisPinnable={ false }\n\t\t\t\t\theader={ false }\n\t\t\t\t\tidentifier={ FLOATING_NOTES_SIDEBAR }\n\t\t\t\t\tclassName=\"editor-collab-sidebar\"\n\t\t\t\t\theaderClassName=\"editor-collab-sidebar__header\"\n\t\t\t\t\tbackgroundColor={ backgroundColor }\n\t\t\t\t>\n\t\t\t\t\t<NotesSidebarContent\n\t\t\t\t\t\tcomments={ unresolvedSortedThreads }\n\t\t\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\t\t\treflowComments={ reflowComments }\n\t\t\t\t\t\tcommentLastUpdated={ commentLastUpdated }\n\t\t\t\t\t\tstyles={ {\n\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisFloating\n\t\t\t\t\t/>\n\t\t\t\t</PluginSidebar>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default function NotesSidebarContainer() {\n\tconst { postId, editorMode, revisionsMode } = useSelect( ( select ) => {\n\t\tconst { getCurrentPostId, getEditorMode, isRevisionsMode } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\treturn {\n\t\t\tpostId: getCurrentPostId(),\n\t\t\teditorMode: getEditorMode(),\n\t\t\trevisionsMode: isRevisionsMode(),\n\t\t};\n\t}, [] );\n\n\tif ( ! postId || typeof postId !== 'number' ) {\n\t\treturn null;\n\t}\n\n\t// Hide Notes sidebar for Code Editor and in-editor revision mode.\n\tif ( editorMode === 'text' || revisionsMode ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<PostTypeSupportCheck supportKeys=\"editor.notes\">\n\t\t\t<NotesSidebar postId={ postId } />\n\t\t</PostTypeSupportCheck>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["VStack", "interfaceStore", "blockEditorStore", "editorStore", "preferencesStore", "AddCommentMenuItem", "CommentAvatarIndicator", "PluginSidebar", "commentIcon", "PostTypeSupportCheck"]
 }

package/build/components/collab-sidebar/utils.cjs

@@ -34,22 +34,20 @@ function sanitizeCommentString(str) {
 function noop() {
 }
 var AVATAR_BORDER_COLORS = [
-  "#3858E9",
-  // Blueberry
-  "#9fB1FF",
-  // Blueberry 2
-  "#1D35B4",
-  // Dark Blueberry
-  "#1A1919",
-  // Charcoal 0
-  "#E26F56",
-  // Pomegranate
-  "#33F078",
-  // Acid Green
-  "#FFF972",
-  // Lemon
-  "#7A00DF"
+  "#C36EFF",
   // Purple
+  "#FF51A8",
+  // Pink
+  "#E4780A",
+  // Orange
+  "#FF35EE",
+  // Magenta
+  "#879F11",
+  // Olive
+  "#46A494",
+  // Teal
+  "#00A2C3"
+  // Cyan
 ];
 function getAvatarBorderColor(userId) {
   return AVATAR_BORDER_COLORS[userId % AVATAR_BORDER_COLORS.length];

package/build/components/collab-sidebar/utils.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collab-sidebar/utils.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Sanitizes a comment string by removing non-printable ASCII characters.\n *\n * @param {string} str - The comment string to sanitize.\n * @return {string} - The sanitized comment string.\n */\nexport function sanitizeCommentString( str ) {\n\treturn str.trim();\n}\n\n/**\n * A no-operation function that does nothing.\n */\nexport function noop() {}\n\n/**\n * These colors are picked from the WordPress.org design library.\n * @see https://www.figma.com/design/HOJTpCFfa3tR0EccUlu0CM/WordPress.org-Design-Library?node-id=1-2193&t=M6WdRvTpt0mh8n6T-1\n */\nconst AVATAR_BORDER_COLORS = [\n\t'#3858E9', // Blueberry\n\t'#9fB1FF', // Blueberry 2\n\t'#1D35B4', // Dark Blueberry\n\t'#1A1919', // Charcoal 0\n\t'#E26F56', // Pomegranate\n\t'#33F078', // Acid Green\n\t'#FFF972', // Lemon\n\t'#7A00DF', // Purple\n];\n\n/**\n * Gets the border color for an avatar based on the user ID.\n *\n * @param {number} userId - The user ID.\n * @return {string} - The border color.\n */\nexport function getAvatarBorderColor( userId ) {\n\treturn AVATAR_BORDER_COLORS[ userId % AVATAR_BORDER_COLORS.length ];\n}\n\n/**\n * Generates a comment excerpt from text based on word count type and length.\n *\n * @param {string} text          - The comment text to generate excerpt from.\n * @param {number} excerptLength - The maximum length for the commentexcerpt.\n * @return {string} - The generated comment excerpt.\n */\nexport function getCommentExcerpt( text, excerptLength = 10 ) {\n\tif ( ! text ) {\n\t\treturn '';\n\t}\n\n\t/*\n\t * translators: If your word count is based on single characters (e.g. East Asian characters),\n\t * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.\n\t * Do not translate into your own language.\n\t */\n\tconst wordCountType = _x( 'words', 'Word count type. Do not translate!' );\n\n\tconst rawText = text.trim();\n\tlet trimmedExcerpt = '';\n\n\tif ( wordCountType === 'words' ) {\n\t\ttrimmedExcerpt = rawText.split( ' ', excerptLength ).join( ' ' );\n\t} else if ( wordCountType === 'characters_excluding_spaces' ) {\n\t\t/*\n\t\t * 1. Split the text at the character limit,\n\t\t * then join the substrings back into one string.\n\t\t * 2. Count the number of spaces in the text\n\t\t * by comparing the lengths of the string with and without spaces.\n\t\t * 3. Add the number to the length of the visible excerpt,\n\t\t * so that the spaces are excluded from the word count.\n\t\t */\n\t\tconst textWithSpaces = rawText.split( '', excerptLength ).join( '' );\n\n\t\tconst numberOfSpaces =\n\t\t\ttextWithSpaces.length - textWithSpaces.replaceAll( ' ', '' ).length;\n\n\t\ttrimmedExcerpt = rawText\n\t\t\t.split( '', excerptLength + numberOfSpaces )\n\t\t\t.join( '' );\n\t} else if ( wordCountType === 'characters_including_spaces' ) {\n\t\ttrimmedExcerpt = rawText.split( '', excerptLength ).join( '' );\n\t}\n\n\tconst isTrimmed = trimmedExcerpt !== rawText;\n\treturn isTrimmed ? trimmedExcerpt + '\u2026' : trimmedExcerpt;\n}\n\n/**\n * Shift focus to the comment thread associated with a particular comment ID.\n * If an additional selector is provided, the focus will be shifted to the element matching the selector.\n *\n * @typedef {import('@wordpress/element').RefObject} RefObject\n *\n * @param {string}       commentId          The ID of the comment thread to focus.\n * @param {?HTMLElement} container          The container element to search within.\n * @param {string}       additionalSelector The additional selector to focus on.\n */\nexport function focusCommentThread( commentId, container, additionalSelector ) {\n\tif ( ! container ) {\n\t\treturn;\n\t}\n\n\t// A thread without a commentId is a new comment thread.\n\tconst threadSelector =\n\t\tcommentId && commentId !== 'new'\n\t\t\t? `[role=treeitem][id=\"comment-thread-${ commentId }\"]`\n\t\t\t: '[role=treeitem]:not([id])';\n\tconst selector = additionalSelector\n\t\t? `${ threadSelector } ${ additionalSelector }`\n\t\t: threadSelector;\n\n\treturn new Promise( ( resolve ) => {\n\t\tif ( container.querySelector( selector ) ) {\n\t\t\treturn resolve( container.querySelector( selector ) );\n\t\t}\n\n\t\tlet timer = null;\n\t\t// Wait for the element to be added to the DOM.\n\t\tconst observer = new window.MutationObserver( () => {\n\t\t\tif ( container.querySelector( selector ) ) {\n\t\t\t\tclearTimeout( timer );\n\t\t\t\tobserver.disconnect();\n\t\t\t\tresolve( container.querySelector( selector ) );\n\t\t\t}\n\t\t} );\n\n\t\tobserver.observe( container, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t} );\n\n\t\t// Stop trying after 3 seconds.\n\t\ttimer = setTimeout( () => {\n\t\t\tobserver.disconnect();\n\t\t\tresolve( null );\n\t\t}, 3000 );\n\t} ).then( ( element ) => element?.focus() );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AAQZ,SAAS,sBAAuB,KAAM;AAC5C,SAAO,IAAI,KAAK;AACjB;AAKO,SAAS,OAAO;AAAC;AAMxB,IAAM,uBAAuB;AAAA,EAC5B;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AACD;AAQO,SAAS,qBAAsB,QAAS;AAC9C,SAAO,qBAAsB,SAAS,qBAAqB,MAAO;AACnE;AASO,SAAS,kBAAmB,MAAM,gBAAgB,IAAK;AAC7D,MAAK,CAAE,MAAO;AACb,WAAO;AAAA,EACR;AAOA,QAAM,oBAAgB,gBAAI,SAAS,oCAAqC;AAExE,QAAM,UAAU,KAAK,KAAK;AAC1B,MAAI,iBAAiB;AAErB,MAAK,kBAAkB,SAAU;AAChC,qBAAiB,QAAQ,MAAO,KAAK,aAAc,EAAE,KAAM,GAAI;AAAA,EAChE,WAAY,kBAAkB,+BAAgC;AAS7D,UAAM,iBAAiB,QAAQ,MAAO,IAAI,aAAc,EAAE,KAAM,EAAG;AAEnE,UAAM,iBACL,eAAe,SAAS,eAAe,WAAY,KAAK,EAAG,EAAE;AAE9D,qBAAiB,QACf,MAAO,IAAI,gBAAgB,cAAe,EAC1C,KAAM,EAAG;AAAA,EACZ,WAAY,kBAAkB,+BAAgC;AAC7D,qBAAiB,QAAQ,MAAO,IAAI,aAAc,EAAE,KAAM,EAAG;AAAA,EAC9D;AAEA,QAAM,YAAY,mBAAmB;AACrC,SAAO,YAAY,iBAAiB,WAAM;AAC3C;AAYO,SAAS,mBAAoB,WAAW,WAAW,oBAAqB;AAC9E,MAAK,CAAE,WAAY;AAClB;AAAA,EACD;AAGA,QAAM,iBACL,aAAa,cAAc,QACxB,sCAAuC,SAAU,OACjD;AACJ,QAAM,WAAW,qBACd,GAAI,cAAe,IAAK,kBAAmB,KAC3C;AAEH,SAAO,IAAI,QAAS,CAAE,YAAa;AAClC,QAAK,UAAU,cAAe,QAAS,GAAI;AAC1C,aAAO,QAAS,UAAU,cAAe,QAAS,CAAE;AAAA,IACrD;AAEA,QAAI,QAAQ;AAEZ,UAAM,WAAW,IAAI,OAAO,iBAAkB,MAAM;AACnD,UAAK,UAAU,cAAe,QAAS,GAAI;AAC1C,qBAAc,KAAM;AACpB,iBAAS,WAAW;AACpB,gBAAS,UAAU,cAAe,QAAS,CAAE;AAAA,MAC9C;AAAA,IACD,CAAE;AAEF,aAAS,QAAS,WAAW;AAAA,MAC5B,WAAW;AAAA,MACX,SAAS;AAAA,IACV,CAAE;AAGF,YAAQ,WAAY,MAAM;AACzB,eAAS,WAAW;AACpB,cAAS,IAAK;AAAA,IACf,GAAG,GAAK;AAAA,EACT,CAAE,EAAE,KAAM,CAAE,YAAa,SAAS,MAAM,CAAE;AAC3C;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Sanitizes a comment string by removing non-printable ASCII characters.\n *\n * @param {string} str - The comment string to sanitize.\n * @return {string} - The sanitized comment string.\n */\nexport function sanitizeCommentString( str ) {\n\treturn str.trim();\n}\n\n/**\n * A no-operation function that does nothing.\n */\nexport function noop() {}\n\n/**\n * Avatar border colors chosen to be visually distinct from each other and from\n * the editor's semantic UI colors (Delta E > 10 between all pairs).\n */\nconst AVATAR_BORDER_COLORS = [\n\t'#C36EFF', // Purple\n\t'#FF51A8', // Pink\n\t'#E4780A', // Orange\n\t'#FF35EE', // Magenta\n\t'#879F11', // Olive\n\t'#46A494', // Teal\n\t'#00A2C3', // Cyan\n];\n\n/**\n * Gets the border color for an avatar based on the user ID.\n *\n * @param {number} userId - The user ID.\n * @return {string} - The border color.\n */\nexport function getAvatarBorderColor( userId ) {\n\treturn AVATAR_BORDER_COLORS[ userId % AVATAR_BORDER_COLORS.length ];\n}\n\n/**\n * Generates a comment excerpt from text based on word count type and length.\n *\n * @param {string} text          - The comment text to generate excerpt from.\n * @param {number} excerptLength - The maximum length for the commentexcerpt.\n * @return {string} - The generated comment excerpt.\n */\nexport function getCommentExcerpt( text, excerptLength = 10 ) {\n\tif ( ! text ) {\n\t\treturn '';\n\t}\n\n\t/*\n\t * translators: If your word count is based on single characters (e.g. East Asian characters),\n\t * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.\n\t * Do not translate into your own language.\n\t */\n\tconst wordCountType = _x( 'words', 'Word count type. Do not translate!' );\n\n\tconst rawText = text.trim();\n\tlet trimmedExcerpt = '';\n\n\tif ( wordCountType === 'words' ) {\n\t\ttrimmedExcerpt = rawText.split( ' ', excerptLength ).join( ' ' );\n\t} else if ( wordCountType === 'characters_excluding_spaces' ) {\n\t\t/*\n\t\t * 1. Split the text at the character limit,\n\t\t * then join the substrings back into one string.\n\t\t * 2. Count the number of spaces in the text\n\t\t * by comparing the lengths of the string with and without spaces.\n\t\t * 3. Add the number to the length of the visible excerpt,\n\t\t * so that the spaces are excluded from the word count.\n\t\t */\n\t\tconst textWithSpaces = rawText.split( '', excerptLength ).join( '' );\n\n\t\tconst numberOfSpaces =\n\t\t\ttextWithSpaces.length - textWithSpaces.replaceAll( ' ', '' ).length;\n\n\t\ttrimmedExcerpt = rawText\n\t\t\t.split( '', excerptLength + numberOfSpaces )\n\t\t\t.join( '' );\n\t} else if ( wordCountType === 'characters_including_spaces' ) {\n\t\ttrimmedExcerpt = rawText.split( '', excerptLength ).join( '' );\n\t}\n\n\tconst isTrimmed = trimmedExcerpt !== rawText;\n\treturn isTrimmed ? trimmedExcerpt + '\u2026' : trimmedExcerpt;\n}\n\n/**\n * Shift focus to the comment thread associated with a particular comment ID.\n * If an additional selector is provided, the focus will be shifted to the element matching the selector.\n *\n * @typedef {import('@wordpress/element').RefObject} RefObject\n *\n * @param {string}       commentId          The ID of the comment thread to focus.\n * @param {?HTMLElement} container          The container element to search within.\n * @param {string}       additionalSelector The additional selector to focus on.\n */\nexport function focusCommentThread( commentId, container, additionalSelector ) {\n\tif ( ! container ) {\n\t\treturn;\n\t}\n\n\t// A thread without a commentId is a new comment thread.\n\tconst threadSelector =\n\t\tcommentId && commentId !== 'new'\n\t\t\t? `[role=treeitem][id=\"comment-thread-${ commentId }\"]`\n\t\t\t: '[role=treeitem]:not([id])';\n\tconst selector = additionalSelector\n\t\t? `${ threadSelector } ${ additionalSelector }`\n\t\t: threadSelector;\n\n\treturn new Promise( ( resolve ) => {\n\t\tif ( container.querySelector( selector ) ) {\n\t\t\treturn resolve( container.querySelector( selector ) );\n\t\t}\n\n\t\tlet timer = null;\n\t\t// Wait for the element to be added to the DOM.\n\t\tconst observer = new window.MutationObserver( () => {\n\t\t\tif ( container.querySelector( selector ) ) {\n\t\t\t\tclearTimeout( timer );\n\t\t\t\tobserver.disconnect();\n\t\t\t\tresolve( container.querySelector( selector ) );\n\t\t\t}\n\t\t} );\n\n\t\tobserver.observe( container, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t} );\n\n\t\t// Stop trying after 3 seconds.\n\t\ttimer = setTimeout( () => {\n\t\t\tobserver.disconnect();\n\t\t\tresolve( null );\n\t\t}, 3000 );\n\t} ).then( ( element ) => element?.focus() );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AAQZ,SAAS,sBAAuB,KAAM;AAC5C,SAAO,IAAI,KAAK;AACjB;AAKO,SAAS,OAAO;AAAC;AAMxB,IAAM,uBAAuB;AAAA,EAC5B;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AACD;AAQO,SAAS,qBAAsB,QAAS;AAC9C,SAAO,qBAAsB,SAAS,qBAAqB,MAAO;AACnE;AASO,SAAS,kBAAmB,MAAM,gBAAgB,IAAK;AAC7D,MAAK,CAAE,MAAO;AACb,WAAO;AAAA,EACR;AAOA,QAAM,oBAAgB,gBAAI,SAAS,oCAAqC;AAExE,QAAM,UAAU,KAAK,KAAK;AAC1B,MAAI,iBAAiB;AAErB,MAAK,kBAAkB,SAAU;AAChC,qBAAiB,QAAQ,MAAO,KAAK,aAAc,EAAE,KAAM,GAAI;AAAA,EAChE,WAAY,kBAAkB,+BAAgC;AAS7D,UAAM,iBAAiB,QAAQ,MAAO,IAAI,aAAc,EAAE,KAAM,EAAG;AAEnE,UAAM,iBACL,eAAe,SAAS,eAAe,WAAY,KAAK,EAAG,EAAE;AAE9D,qBAAiB,QACf,MAAO,IAAI,gBAAgB,cAAe,EAC1C,KAAM,EAAG;AAAA,EACZ,WAAY,kBAAkB,+BAAgC;AAC7D,qBAAiB,QAAQ,MAAO,IAAI,aAAc,EAAE,KAAM,EAAG;AAAA,EAC9D;AAEA,QAAM,YAAY,mBAAmB;AACrC,SAAO,YAAY,iBAAiB,WAAM;AAC3C;AAYO,SAAS,mBAAoB,WAAW,WAAW,oBAAqB;AAC9E,MAAK,CAAE,WAAY;AAClB;AAAA,EACD;AAGA,QAAM,iBACL,aAAa,cAAc,QACxB,sCAAuC,SAAU,OACjD;AACJ,QAAM,WAAW,qBACd,GAAI,cAAe,IAAK,kBAAmB,KAC3C;AAEH,SAAO,IAAI,QAAS,CAAE,YAAa;AAClC,QAAK,UAAU,cAAe,QAAS,GAAI;AAC1C,aAAO,QAAS,UAAU,cAAe,QAAS,CAAE;AAAA,IACrD;AAEA,QAAI,QAAQ;AAEZ,UAAM,WAAW,IAAI,OAAO,iBAAkB,MAAM;AACnD,UAAK,UAAU,cAAe,QAAS,GAAI;AAC1C,qBAAc,KAAM;AACpB,iBAAS,WAAW;AACpB,gBAAS,UAAU,cAAe,QAAS,CAAE;AAAA,MAC9C;AAAA,IACD,CAAE;AAEF,aAAS,QAAS,WAAW;AAAA,MAC5B,WAAW;AAAA,MACX,SAAS;AAAA,IACV,CAAE;AAGF,YAAQ,WAAY,MAAM;AACzB,eAAS,WAAW;AACpB,cAAS,IAAK;AAAA,IACf,GAAG,GAAK;AAAA,EACT,CAAE,EAAE,KAAM,CAAE,YAAa,SAAS,MAAM,CAAE;AAC3C;",
   "names": []
 }

package/build/components/collaborators-overlay/avatar-iframe-styles.cjs

@@ -0,0 +1,141 @@
+"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-overlay/avatar-iframe-styles.ts
+var avatar_iframe_styles_exports = {};
+__export(avatar_iframe_styles_exports, {
+  AVATAR_IFRAME_STYLES: () => AVATAR_IFRAME_STYLES
+});
+module.exports = __toCommonJS(avatar_iframe_styles_exports);
+var import_collaborator_styles = require("./collaborator-styles.cjs");
+var AVATAR_IFRAME_STYLES = `
+.editor-avatar {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	border-radius: ${import_collaborator_styles.RADIUS_FULL};
+	flex-shrink: 0;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) ${import_collaborator_styles.WHITE}, ${import_collaborator_styles.ELEVATION_X_SMALL};
+}
+.editor-avatar__image {
+	box-sizing: border-box;
+	position: relative;
+	width: ${import_collaborator_styles.BUTTON_SIZE_COMPACT};
+	height: ${import_collaborator_styles.BUTTON_SIZE_COMPACT};
+	border-radius: ${import_collaborator_styles.RADIUS_FULL};
+	border: 0;
+	background-color: var(--wp-admin-theme-color, #3858e9);
+	overflow: hidden;
+	overflow: clip;
+	flex-shrink: 0;
+	font-size: 0;
+	color: ${import_collaborator_styles.WHITE};
+}
+.is-small > .editor-avatar__image {
+	width: ${import_collaborator_styles.BUTTON_SIZE_SMALL};
+	height: ${import_collaborator_styles.BUTTON_SIZE_SMALL};
+}
+.has-avatar-border-color > .editor-avatar__image {
+	border: var(--wp-admin-border-width-focus, 2px) solid var(--editor-avatar-outline-color);
+	background-clip: padding-box;
+}
+.has-avatar-border-color > .editor-avatar__image::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) ${import_collaborator_styles.WHITE};
+	pointer-events: none;
+	z-index: 1;
+}
+.editor-avatar__img {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: inherit;
+	opacity: 0;
+}
+.has-src > .editor-avatar__image > .editor-avatar__img {
+	opacity: 1;
+}
+.editor-avatar:not(.has-src) > .editor-avatar__image {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: ${import_collaborator_styles.FONT_SIZE_X_SMALL};
+	font-weight: ${import_collaborator_styles.FONT_WEIGHT_MEDIUM};
+	border: 0;
+	background-clip: border-box;
+}
+.editor-avatar:not(.has-src) > .editor-avatar__image::after {
+	content: none;
+}
+.editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {
+	background-color: var(--editor-avatar-outline-color);
+}
+.editor-avatar__name {
+	font-size: ${import_collaborator_styles.FONT_SIZE_MEDIUM};
+	font-weight: ${import_collaborator_styles.FONT_WEIGHT_MEDIUM};
+	line-height: ${import_collaborator_styles.FONT_LINE_HEIGHT_SMALL};
+	color: var(--editor-avatar-name-color, ${import_collaborator_styles.WHITE});
+	min-width: 0;
+	padding-bottom: 2px; /* $grid-unit-05 / 2 */
+	overflow: hidden;
+	opacity: 0;
+	white-space: nowrap;
+	transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
+}
+.editor-avatar.is-badge {
+	display: inline-grid;
+	grid-template-columns: min-content 0fr;
+	column-gap: 0;
+	padding-inline-end: 0;
+	background-color: var(--wp-admin-theme-color, #3858e9);
+	transition:
+		grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1),
+		column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1),
+		padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
+}
+.editor-avatar.is-badge:hover {
+	grid-template-columns: min-content 1fr;
+	column-gap: ${import_collaborator_styles.GRID_UNIT_05};
+	padding-inline-end: ${import_collaborator_styles.GRID_UNIT_10};
+	transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
+}
+.editor-avatar.is-badge:hover .editor-avatar__name {
+	opacity: 1;
+	transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
+}
+.editor-avatar.is-badge.has-avatar-border-color {
+	background-color: var(--editor-avatar-outline-color);
+}
+@media (prefers-reduced-motion: reduce) {
+	.editor-avatar.is-badge,
+	.editor-avatar__name {
+		transition: none;
+	}
+}
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AVATAR_IFRAME_STYLES
+});
+//# sourceMappingURL=avatar-iframe-styles.cjs.map

package/build/components/collaborators-overlay/avatar-iframe-styles.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collaborators-overlay/avatar-iframe-styles.ts"],
+  "sourcesContent": ["/**\n * Compiled CSS for the Avatar component, for injection into the editor canvas\n * iframe where the editor package's SCSS is not available.\n *\n * Source: ../collaborators-presence/avatar/styles.scss\n *\n * Dimmed and status-indicator styles are intentionally omitted \u2014 they are not\n * used in the overlay. Keep in sync when editing the SCSS source.\n */\n\nimport {\n\tBUTTON_SIZE_COMPACT,\n\tBUTTON_SIZE_SMALL,\n\tELEVATION_X_SMALL,\n\tFONT_LINE_HEIGHT_SMALL,\n\tFONT_SIZE_MEDIUM,\n\tFONT_SIZE_X_SMALL,\n\tFONT_WEIGHT_MEDIUM,\n\tGRID_UNIT_05,\n\tGRID_UNIT_10,\n\tRADIUS_FULL,\n\tWHITE,\n} from './collaborator-styles';\n\nexport const AVATAR_IFRAME_STYLES = `\n.editor-avatar {\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder-radius: ${ RADIUS_FULL };\n\tflex-shrink: 0;\n\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) ${ WHITE }, ${ ELEVATION_X_SMALL };\n}\n.editor-avatar__image {\n\tbox-sizing: border-box;\n\tposition: relative;\n\twidth: ${ BUTTON_SIZE_COMPACT };\n\theight: ${ BUTTON_SIZE_COMPACT };\n\tborder-radius: ${ RADIUS_FULL };\n\tborder: 0;\n\tbackground-color: var(--wp-admin-theme-color, #3858e9);\n\toverflow: hidden;\n\toverflow: clip;\n\tflex-shrink: 0;\n\tfont-size: 0;\n\tcolor: ${ WHITE };\n}\n.is-small > .editor-avatar__image {\n\twidth: ${ BUTTON_SIZE_SMALL };\n\theight: ${ BUTTON_SIZE_SMALL };\n}\n.has-avatar-border-color > .editor-avatar__image {\n\tborder: var(--wp-admin-border-width-focus, 2px) solid var(--editor-avatar-outline-color);\n\tbackground-clip: padding-box;\n}\n.has-avatar-border-color > .editor-avatar__image::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tborder-radius: inherit;\n\tbox-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) ${ WHITE };\n\tpointer-events: none;\n\tz-index: 1;\n}\n.editor-avatar__img {\n\tposition: absolute;\n\tinset: 0;\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tborder-radius: inherit;\n\topacity: 0;\n}\n.has-src > .editor-avatar__image > .editor-avatar__img {\n\topacity: 1;\n}\n.editor-avatar:not(.has-src) > .editor-avatar__image {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: ${ FONT_SIZE_X_SMALL };\n\tfont-weight: ${ FONT_WEIGHT_MEDIUM };\n\tborder: 0;\n\tbackground-clip: border-box;\n}\n.editor-avatar:not(.has-src) > .editor-avatar__image::after {\n\tcontent: none;\n}\n.editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {\n\tbackground-color: var(--editor-avatar-outline-color);\n}\n.editor-avatar__name {\n\tfont-size: ${ FONT_SIZE_MEDIUM };\n\tfont-weight: ${ FONT_WEIGHT_MEDIUM };\n\tline-height: ${ FONT_LINE_HEIGHT_SMALL };\n\tcolor: var(--editor-avatar-name-color, ${ WHITE });\n\tmin-width: 0;\n\tpadding-bottom: 2px; /* $grid-unit-05 / 2 */\n\toverflow: hidden;\n\topacity: 0;\n\twhite-space: nowrap;\n\ttransition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);\n}\n.editor-avatar.is-badge {\n\tdisplay: inline-grid;\n\tgrid-template-columns: min-content 0fr;\n\tcolumn-gap: 0;\n\tpadding-inline-end: 0;\n\tbackground-color: var(--wp-admin-theme-color, #3858e9);\n\ttransition:\n\t\tgrid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1),\n\t\tcolumn-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1),\n\t\tpadding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);\n}\n.editor-avatar.is-badge:hover {\n\tgrid-template-columns: min-content 1fr;\n\tcolumn-gap: ${ GRID_UNIT_05 };\n\tpadding-inline-end: ${ GRID_UNIT_10 };\n\ttransition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);\n}\n.editor-avatar.is-badge:hover .editor-avatar__name {\n\topacity: 1;\n\ttransition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);\n}\n.editor-avatar.is-badge.has-avatar-border-color {\n\tbackground-color: var(--editor-avatar-outline-color);\n}\n@media (prefers-reduced-motion: reduce) {\n\t.editor-avatar.is-badge,\n\t.editor-avatar__name {\n\t\ttransition: none;\n\t}\n}\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,iCAYO;AAEA,IAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKjB,sCAAY;AAAA;AAAA,6DAE+B,gCAAM,KAAM,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjF,8CAAoB;AAAA,WACnB,8CAAoB;AAAA,kBACb,sCAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOpB,gCAAM;AAAA;AAAA;AAAA,UAGN,4CAAkB;AAAA,WACjB,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mEAWsC,gCAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAoB3D,4CAAkB;AAAA,gBAChB,6CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWrB,2CAAiB;AAAA,gBACf,6CAAmB;AAAA,gBACnB,iDAAuB;AAAA,0CACG,gCAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAqBjC,uCAAa;AAAA,uBACL,uCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/build/components/collaborators-overlay/collaborator-styles.cjs

@@ -20,12 +20,48 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/editor/src/components/collaborators-overlay/collaborator-styles.ts
 var collaborator_styles_exports = {};
 __export(collaborator_styles_exports, {
-  ELEVATION_X_SMALL: () => ELEVATION_X_SMALL
+  BORDER_WIDTH: () => BORDER_WIDTH,
+  BORDER_WIDTH_FOCUS_FALLBACK: () => BORDER_WIDTH_FOCUS_FALLBACK,
+  BUTTON_SIZE_COMPACT: () => BUTTON_SIZE_COMPACT,
+  BUTTON_SIZE_SMALL: () => BUTTON_SIZE_SMALL,
+  ELEVATION_X_SMALL: () => ELEVATION_X_SMALL,
+  FONT_LINE_HEIGHT_SMALL: () => FONT_LINE_HEIGHT_SMALL,
+  FONT_SIZE_MEDIUM: () => FONT_SIZE_MEDIUM,
+  FONT_SIZE_X_SMALL: () => FONT_SIZE_X_SMALL,
+  FONT_WEIGHT_MEDIUM: () => FONT_WEIGHT_MEDIUM,
+  GRID_UNIT_05: () => GRID_UNIT_05,
+  GRID_UNIT_10: () => GRID_UNIT_10,
+  RADIUS_FULL: () => RADIUS_FULL,
+  WHITE: () => WHITE
 });
 module.exports = __toCommonJS(collaborator_styles_exports);
 var ELEVATION_X_SMALL = "0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)";
+var RADIUS_FULL = "9999px";
+var BUTTON_SIZE_COMPACT = "32px";
+var BUTTON_SIZE_SMALL = "24px";
+var GRID_UNIT_05 = "4px";
+var GRID_UNIT_10 = "8px";
+var BORDER_WIDTH = "1px";
+var BORDER_WIDTH_FOCUS_FALLBACK = "2px";
+var WHITE = "#fff";
+var FONT_SIZE_X_SMALL = "11px";
+var FONT_SIZE_MEDIUM = "13px";
+var FONT_WEIGHT_MEDIUM = "499";
+var FONT_LINE_HEIGHT_SMALL = "20px";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ELEVATION_X_SMALL
+  BORDER_WIDTH,
+  BORDER_WIDTH_FOCUS_FALLBACK,
+  BUTTON_SIZE_COMPACT,
+  BUTTON_SIZE_SMALL,
+  ELEVATION_X_SMALL,
+  FONT_LINE_HEIGHT_SMALL,
+  FONT_SIZE_MEDIUM,
+  FONT_SIZE_X_SMALL,
+  FONT_WEIGHT_MEDIUM,
+  GRID_UNIT_05,
+  GRID_UNIT_10,
+  RADIUS_FULL,
+  WHITE
 });
 //# sourceMappingURL=collaborator-styles.cjs.map

package/build/components/collaborators-overlay/collaborator-styles.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/collaborator-styles.ts"],
-  "sourcesContent": ["/**\n * Compiled CSS value of $elevation-x-small.\n * Keep in sync with @wordpress/base-styles/_variables.scss.\n */\nexport const ELEVATION_X_SMALL =\n\t'0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,IAAM,oBACZ;",
+  "sourcesContent": ["/**\n * Compiled values of `@wordpress/base-styles` design tokens, for use in\n * CSS strings injected into the editor canvas iframe where Sass is not\n * available.\n *\n * Keep in sync with `@wordpress/base-styles`.\n */\n\n// _variables.scss \u2014 $elevation-x-small\nexport const ELEVATION_X_SMALL =\n\t'0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)';\n\n// _variables.scss \u2014 $radius-full\nexport const RADIUS_FULL = '9999px';\n\n// _variables.scss \u2014 $button-size-compact\nexport const BUTTON_SIZE_COMPACT = '32px';\n\n// _variables.scss \u2014 $button-size-small\nexport const BUTTON_SIZE_SMALL = '24px';\n\n// _variables.scss \u2014 $grid-unit-05\nexport const GRID_UNIT_05 = '4px';\n\n// _variables.scss \u2014 $grid-unit-10\nexport const GRID_UNIT_10 = '8px';\n\n// _variables.scss \u2014 $border-width\nexport const BORDER_WIDTH = '1px';\n\n// _variables.scss \u2014 $border-width-focus-fallback\nexport const BORDER_WIDTH_FOCUS_FALLBACK = '2px';\n\n// _colors.scss \u2014 $white\nexport const WHITE = '#fff';\n\n// _font.scss \u2014 $font-size-x-small\nexport const FONT_SIZE_X_SMALL = '11px';\n\n// _font.scss \u2014 $font-size-medium\nexport const FONT_SIZE_MEDIUM = '13px';\n\n// _font.scss \u2014 $font-weight-medium\nexport const FONT_WEIGHT_MEDIUM = '499';\n\n// _font.scss \u2014 $font-line-height-small\nexport const FONT_LINE_HEIGHT_SMALL = '20px';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASO,IAAM,oBACZ;AAGM,IAAM,cAAc;AAGpB,IAAM,sBAAsB;AAG5B,IAAM,oBAAoB;AAG1B,IAAM,eAAe;AAGrB,IAAM,eAAe;AAGrB,IAAM,eAAe;AAGrB,IAAM,8BAA8B;AAGpC,IAAM,QAAQ;AAGd,IAAM,oBAAoB;AAG1B,IAAM,mBAAmB;AAGzB,IAAM,qBAAqB;AAG3B,IAAM,yBAAyB;",
   "names": []
 }

package/build/components/collaborators-overlay/compute-selection.cjs

@@ -0,0 +1,181 @@
+"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-overlay/compute-selection.ts
+var compute_selection_exports = {};
+__export(compute_selection_exports, {
+  computeSelectionVisual: () => computeSelectionVisual
+});
+module.exports = __toCommonJS(compute_selection_exports);
+var import_core_data = require("@wordpress/core-data");
+var import_cursor_dom_utils = require("./cursor-dom-utils.cjs");
+function computeSelectionVisual(selection, start, end, overlayContext) {
+  if (selection.type === import_core_data.SelectionType.None || selection.type === import_core_data.SelectionType.WholeBlock) {
+    return {};
+  }
+  if (selection.type === import_core_data.SelectionType.Cursor) {
+    return computeCursorOnly(start, overlayContext);
+  }
+  if (!end) {
+    return {};
+  }
+  return computeTextSelection(selection, start, end, overlayContext);
+}
+function computeCursorOnly(start, overlayContext) {
+  if (!start.localClientId) {
+    return {};
+  }
+  const blockElement = overlayContext.editorDocument.querySelector(
+    `[data-block="${start.localClientId}"]`
+  );
+  return {
+    coords: (0, import_cursor_dom_utils.getCursorPosition)(
+      start.textIndex,
+      blockElement,
+      overlayContext.editorDocument,
+      overlayContext.overlayRect
+    )
+  };
+}
+function computeTextSelection(selection, start, end, overlayContext) {
+  if (!start.localClientId || !end.localClientId || start.textIndex === null || end.textIndex === null) {
+    return {};
+  }
+  const isReverse = selection.selectionDirection === import_core_data.SelectionDirection.Backward;
+  const activeEnd = isReverse ? start : end;
+  let allRects;
+  let activeEndBlock = null;
+  if (selection.type === import_core_data.SelectionType.SelectionInOneBlock) {
+    const result = computeSingleBlockRects(start, end, overlayContext);
+    allRects = result.rects;
+    activeEndBlock = result.blockElement;
+  } else {
+    const result = computeMultiBlockRects(start, end, overlayContext);
+    allRects = result.rects;
+    activeEndBlock = activeEnd.localClientId === result.firstBlockClientId ? result.firstBlock : result.lastBlock;
+  }
+  if (allRects.length > 0) {
+    return {
+      coords: (0, import_cursor_dom_utils.getCursorPosition)(
+        activeEnd.textIndex,
+        activeEndBlock,
+        overlayContext.editorDocument,
+        overlayContext.overlayRect
+      ),
+      selectionRects: allRects
+    };
+  }
+  const startBlock = overlayContext.editorDocument.querySelector(
+    `[data-block="${start.localClientId}"]`
+  );
+  return {
+    coords: (0, import_cursor_dom_utils.getCursorPosition)(
+      start.textIndex,
+      startBlock,
+      overlayContext.editorDocument,
+      overlayContext.overlayRect
+    )
+  };
+}
+function computeSingleBlockRects(start, end, overlayContext) {
+  const blockElement = overlayContext.editorDocument.querySelector(
+    `[data-block="${start.localClientId}"]`
+  );
+  if (!blockElement || start.textIndex === null || end.textIndex === null) {
+    return { rects: [], blockElement: null };
+  }
+  return {
+    rects: (0, import_cursor_dom_utils.getSelectionRects)(
+      blockElement,
+      start.textIndex,
+      end.textIndex,
+      overlayContext.editorDocument,
+      overlayContext.overlayRect
+    ) ?? [],
+    blockElement
+  };
+}
+function computeMultiBlockRects(start, end, overlayContext) {
+  let docFirst = start;
+  let docLast = end;
+  let firstBlock = overlayContext.editorDocument.querySelector(
+    `[data-block="${docFirst.localClientId}"]`
+  );
+  let lastBlock = overlayContext.editorDocument.querySelector(
+    `[data-block="${docLast.localClientId}"]`
+  );
+  if (firstBlock && lastBlock && (0, import_cursor_dom_utils.isNodeBefore)(lastBlock, firstBlock)) {
+    docFirst = end;
+    docLast = start;
+    [firstBlock, lastBlock] = [lastBlock, firstBlock];
+  }
+  if (!firstBlock || !lastBlock || docFirst.textIndex === null || docLast.textIndex === null || !docFirst.localClientId || !docLast.localClientId) {
+    return {
+      rects: [],
+      firstBlock: null,
+      lastBlock: null,
+      firstBlockClientId: null
+    };
+  }
+  const allRects = [];
+  const startRects = (0, import_cursor_dom_utils.getSelectionRects)(
+    firstBlock,
+    docFirst.textIndex,
+    Number.MAX_SAFE_INTEGER,
+    overlayContext.editorDocument,
+    overlayContext.overlayRect
+  );
+  if (startRects) {
+    allRects.push(...startRects);
+  }
+  const intermediateBlocks = (0, import_cursor_dom_utils.getBlocksBetween)(
+    docFirst.localClientId,
+    docLast.localClientId,
+    overlayContext.editorDocument
+  );
+  for (const intermediateBlock of intermediateBlocks) {
+    const rects = (0, import_cursor_dom_utils.getFullBlockSelectionRects)(
+      intermediateBlock,
+      overlayContext.editorDocument,
+      overlayContext.overlayRect
+    );
+    allRects.push(...rects);
+  }
+  const endRects = (0, import_cursor_dom_utils.getSelectionRects)(
+    lastBlock,
+    0,
+    docLast.textIndex,
+    overlayContext.editorDocument,
+    overlayContext.overlayRect
+  );
+  if (endRects) {
+    allRects.push(...endRects);
+  }
+  return {
+    rects: allRects,
+    firstBlock,
+    lastBlock,
+    firstBlockClientId: docFirst.localClientId
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  computeSelectionVisual
+});
+//# sourceMappingURL=compute-selection.cjs.map

package/build/components/collaborators-overlay/compute-selection.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collaborators-overlay/compute-selection.ts"],
+  "sourcesContent": ["import { SelectionDirection, SelectionType } from '@wordpress/core-data';\nimport type { ResolvedSelection } from '@wordpress/core-data';\n\nimport {\n\tgetCursorPosition,\n\tgetSelectionRects,\n\tgetFullBlockSelectionRects,\n\tgetBlocksBetween,\n\tisNodeBefore,\n} from './cursor-dom-utils';\nimport type { CursorCoords, SelectionRect } from './cursor-dom-utils';\n\n/** Common parameters passed to cursor/selection computation helpers. */\ninterface OverlayContext {\n\teditorDocument: Document;\n\toverlayRect: DOMRect;\n}\n\n/** Selection rects and the resolved block element for a single-block selection. */\ninterface SingleBlockResult {\n\trects: SelectionRect[];\n\tblockElement: HTMLElement | null;\n}\n\n/** Selection rects and the resolved block elements for a multi-block selection. */\ninterface MultiBlockResult {\n\trects: SelectionRect[];\n\tfirstBlock: HTMLElement | null;\n\tlastBlock: HTMLElement | null;\n\tfirstBlockClientId: string | null;\n}\n\n/** Result of computing visual cursor/selection state for a single user. */\nexport interface SelectionVisual {\n\tcoords?: CursorCoords | null;\n\tselectionRects?: SelectionRect[];\n}\n\n/**\n * Compute cursor coords and optional selection rects for a single user's selection.\n *\n * @param selection      - The selection state from the awareness layer.\n * @param start          - Start position (block clientId + text index).\n * @param end            - End position (only for range selections).\n * @param overlayContext - Shared editor document / overlay references.\n * @return Cursor coordinates and optional selection rectangles.\n */\nexport function computeSelectionVisual(\n\tselection: any,\n\tstart: ResolvedSelection,\n\tend: ResolvedSelection | undefined,\n\toverlayContext: OverlayContext\n): SelectionVisual {\n\tif (\n\t\tselection.type === SelectionType.None ||\n\t\tselection.type === SelectionType.WholeBlock\n\t) {\n\t\treturn {};\n\t}\n\n\tif ( selection.type === SelectionType.Cursor ) {\n\t\treturn computeCursorOnly( start, overlayContext );\n\t}\n\n\t// SelectionInOneBlock or SelectionInMultipleBlocks.\n\tif ( ! end ) {\n\t\treturn {};\n\t}\n\treturn computeTextSelection( selection, start, end, overlayContext );\n}\n\n/**\n * Compute cursor coordinates for a simple cursor (no highlighted text).\n *\n * @param start          - Cursor position (block clientId + text index).\n * @param overlayContext - Shared editor document / overlay references.\n * @return Cursor coordinates.\n */\nfunction computeCursorOnly(\n\tstart: ResolvedSelection,\n\toverlayContext: OverlayContext\n): SelectionVisual {\n\tif ( ! start.localClientId ) {\n\t\treturn {};\n\t}\n\tconst blockElement =\n\t\toverlayContext.editorDocument.querySelector< HTMLElement >(\n\t\t\t`[data-block=\"${ start.localClientId }\"]`\n\t\t);\n\treturn {\n\t\tcoords: getCursorPosition(\n\t\t\tstart.textIndex,\n\t\t\tblockElement,\n\t\t\toverlayContext.editorDocument,\n\t\t\toverlayContext.overlayRect\n\t\t),\n\t};\n}\n\n/**\n * Compute cursor coordinates and selection highlight rects for a text selection\n * (single-block or multi-block).\n *\n * @param selection      - The selection state.\n * @param start          - Start position (block clientId + text index).\n * @param end            - End position (block clientId + text index).\n * @param overlayContext - Shared editor document / overlay references.\n * @return Cursor coordinates and optional selection rectangles.\n */\nfunction computeTextSelection(\n\tselection: any,\n\tstart: ResolvedSelection,\n\tend: ResolvedSelection,\n\toverlayContext: OverlayContext\n): SelectionVisual {\n\tif (\n\t\t! start.localClientId ||\n\t\t! end.localClientId ||\n\t\tstart.textIndex === null ||\n\t\tend.textIndex === null\n\t) {\n\t\treturn {};\n\t}\n\n\tconst isReverse =\n\t\tselection.selectionDirection === SelectionDirection.Backward;\n\tconst activeEnd = isReverse ? start : end;\n\n\tlet allRects: SelectionRect[];\n\tlet activeEndBlock: HTMLElement | null = null;\n\n\tif ( selection.type === SelectionType.SelectionInOneBlock ) {\n\t\tconst result = computeSingleBlockRects( start, end, overlayContext );\n\t\tallRects = result.rects;\n\t\t// Single block: start and end share the same block element.\n\t\tactiveEndBlock = result.blockElement;\n\t} else {\n\t\tconst result = computeMultiBlockRects( start, end, overlayContext );\n\t\tallRects = result.rects;\n\t\t// Pick the block element that matches the active end.\n\t\tactiveEndBlock =\n\t\t\tactiveEnd.localClientId === result.firstBlockClientId\n\t\t\t\t? result.firstBlock\n\t\t\t\t: result.lastBlock;\n\t}\n\n\tif ( allRects.length > 0 ) {\n\t\treturn {\n\t\t\tcoords: getCursorPosition(\n\t\t\t\tactiveEnd.textIndex,\n\t\t\t\tactiveEndBlock,\n\t\t\t\toverlayContext.editorDocument,\n\t\t\t\toverlayContext.overlayRect\n\t\t\t),\n\t\t\tselectionRects: allRects,\n\t\t};\n\t}\n\n\t// Fallback: cursor at start position only.\n\tconst startBlock =\n\t\toverlayContext.editorDocument.querySelector< HTMLElement >(\n\t\t\t`[data-block=\"${ start.localClientId }\"]`\n\t\t);\n\n\treturn {\n\t\tcoords: getCursorPosition(\n\t\t\tstart.textIndex,\n\t\t\tstartBlock,\n\t\t\toverlayContext.editorDocument,\n\t\t\toverlayContext.overlayRect\n\t\t),\n\t};\n}\n\n/**\n * Compute selection rects for a selection within a single block.\n *\n * @param start          - Start position (block clientId + text index).\n * @param end            - End position (block clientId + text index).\n * @param overlayContext - Shared editor document / overlay references.\n * @return Array of selection rectangles.\n */\nfunction computeSingleBlockRects(\n\tstart: ResolvedSelection,\n\tend: ResolvedSelection,\n\toverlayContext: OverlayContext\n): SingleBlockResult {\n\tconst blockElement =\n\t\toverlayContext.editorDocument.querySelector< HTMLElement >(\n\t\t\t`[data-block=\"${ start.localClientId }\"]`\n\t\t);\n\tif (\n\t\t! blockElement ||\n\t\tstart.textIndex === null ||\n\t\tend.textIndex === null\n\t) {\n\t\treturn { rects: [], blockElement: null };\n\t}\n\treturn {\n\t\trects:\n\t\t\tgetSelectionRects(\n\t\t\t\tblockElement,\n\t\t\t\tstart.textIndex,\n\t\t\t\tend.textIndex,\n\t\t\t\toverlayContext.editorDocument,\n\t\t\t\toverlayContext.overlayRect\n\t\t\t) ?? [],\n\t\tblockElement,\n\t};\n}\n\n/**\n * Compute selection rects for a selection spanning multiple blocks.\n *\n * Normalizes to document order \u2014 for backward selections the block editor\n * reports start after end.\n *\n * @param start          - Start position (block clientId + text index).\n * @param end            - End position (block clientId + text index).\n * @param overlayContext - Shared editor document / overlay references.\n * @return Array of selection rectangles.\n */\nfunction computeMultiBlockRects(\n\tstart: ResolvedSelection,\n\tend: ResolvedSelection,\n\toverlayContext: OverlayContext\n): MultiBlockResult {\n\tlet docFirst = start;\n\tlet docLast = end;\n\tlet firstBlock = overlayContext.editorDocument.querySelector< HTMLElement >(\n\t\t`[data-block=\"${ docFirst.localClientId }\"]`\n\t);\n\tlet lastBlock = overlayContext.editorDocument.querySelector< HTMLElement >(\n\t\t`[data-block=\"${ docLast.localClientId }\"]`\n\t);\n\n\t// Swap to document order if needed.\n\tif ( firstBlock && lastBlock && isNodeBefore( lastBlock, firstBlock ) ) {\n\t\tdocFirst = end;\n\t\tdocLast = start;\n\t\t[ firstBlock, lastBlock ] = [ lastBlock, firstBlock ];\n\t}\n\n\tif (\n\t\t! firstBlock ||\n\t\t! lastBlock ||\n\t\tdocFirst.textIndex === null ||\n\t\tdocLast.textIndex === null ||\n\t\t! docFirst.localClientId ||\n\t\t! docLast.localClientId\n\t) {\n\t\treturn {\n\t\t\trects: [],\n\t\t\tfirstBlock: null,\n\t\t\tlastBlock: null,\n\t\t\tfirstBlockClientId: null,\n\t\t};\n\t}\n\n\tconst allRects: SelectionRect[] = [];\n\n\t// First block: from start offset to end of block.\n\tconst startRects = getSelectionRects(\n\t\tfirstBlock,\n\t\tdocFirst.textIndex,\n\t\tNumber.MAX_SAFE_INTEGER,\n\t\toverlayContext.editorDocument,\n\t\toverlayContext.overlayRect\n\t);\n\tif ( startRects ) {\n\t\tallRects.push( ...startRects );\n\t}\n\n\t// Intermediate blocks: full content.\n\tconst intermediateBlocks = getBlocksBetween(\n\t\tdocFirst.localClientId,\n\t\tdocLast.localClientId,\n\t\toverlayContext.editorDocument\n\t);\n\tfor ( const intermediateBlock of intermediateBlocks ) {\n\t\tconst rects = getFullBlockSelectionRects(\n\t\t\tintermediateBlock,\n\t\t\toverlayContext.editorDocument,\n\t\t\toverlayContext.overlayRect\n\t\t);\n\t\tallRects.push( ...rects );\n\t}\n\n\t// Last block: from 0 to end offset.\n\tconst endRects = getSelectionRects(\n\t\tlastBlock,\n\t\t0,\n\t\tdocLast.textIndex,\n\t\toverlayContext.editorDocument,\n\t\toverlayContext.overlayRect\n\t);\n\tif ( endRects ) {\n\t\tallRects.push( ...endRects );\n\t}\n\n\treturn {\n\t\trects: allRects,\n\t\tfirstBlock,\n\t\tlastBlock,\n\t\tfirstBlockClientId: docFirst.localClientId,\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}