@wordpress/editor 14.41.0 → 14.41.1-next.v.202603102151.0

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,133 @@
+"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};
+	overflow: hidden;
+	overflow: clip;
+	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);
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) ${import_collaborator_styles.WHITE};
+	background-clip: padding-box;
+}
+.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;
+	box-shadow: none;
+	background-clip: border-box;
+}
+.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\toverflow: hidden;\n\toverflow: clip;\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\tbox-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) ${ WHITE };\n\tbackground-clip: padding-box;\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\tbox-shadow: none;\n\tbackground-clip: border-box;\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;AAAA;AAAA,6DAI+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,mEAIsC,gCAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAmB3D,4CAAkB;AAAA,gBAChB,6CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cASrB,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/overlay-iframe-styles.cjs

@@ -0,0 +1,142 @@
+"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/overlay-iframe-styles.ts
+var overlay_iframe_styles_exports = {};
+__export(overlay_iframe_styles_exports, {
+  OVERLAY_IFRAME_STYLES: () => OVERLAY_IFRAME_STYLES
+});
+module.exports = __toCommonJS(overlay_iframe_styles_exports);
+var import_collaborator_styles = require("./collaborator-styles.cjs");
+var OVERLAY_IFRAME_STYLES = `
+.block-canvas-cover {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	z-index: 20000;
+}
+.block-canvas-cover .collaborators-overlay-full {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.block-canvas-cover .collaborators-overlay-fixed {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+}
+.collaborators-overlay-user {
+	position: absolute;
+}
+/* Cursor lines render below avatar labels across all users. The parent
+   .collaborators-overlay-user has no z-index so it does not create a
+   stacking context \u2014 children participate in the shared overlay context. */
+.collaborators-overlay-user-cursor {
+	position: absolute;
+	z-index: 0;
+	width: ${import_collaborator_styles.BORDER_WIDTH_FOCUS_FALLBACK};
+	border-radius: ${import_collaborator_styles.BORDER_WIDTH};
+	outline: ${import_collaborator_styles.BORDER_WIDTH} solid ${import_collaborator_styles.WHITE};
+	box-shadow: ${import_collaborator_styles.ELEVATION_X_SMALL};
+	animation: collaborators-overlay-cursor-blink 1s infinite;
+}
+
+/* Overlay-specific positioning applied to the Avatar cursor label. */
+.collaborators-overlay-user-label.editor-avatar {
+	position: absolute;
+	z-index: 1;
+	transform: translate(-11px, -100%);
+	margin-top: -${import_collaborator_styles.GRID_UNIT_05};
+	pointer-events: auto;
+	overflow: visible;
+	width: max-content;
+}
+/* Avatar positioned above a highlighted block as a label. */
+.collaborators-overlay-block-label.editor-avatar {
+	position: absolute;
+	z-index: 1;
+	transform: translateY(calc(-100% - ${import_collaborator_styles.GRID_UNIT_10}));
+	pointer-events: auto;
+	overflow: visible;
+	width: max-content;
+}
+
+@keyframes collaborators-overlay-cursor-blink {
+	0%, 45% { opacity: 1; }
+	55%, 95% { opacity: 0; }
+	100% { opacity: 1; }
+}
+.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-cursor {
+	animation: collaborators-overlay-cursor-highlight 0.6s ease-in-out 3;
+}
+.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-label {
+	animation: collaborators-overlay-label-highlight 0.6s ease-in-out 3;
+}
+@keyframes collaborators-overlay-cursor-highlight {
+	0%, 100% {
+		transform: scale(1);
+		filter: drop-shadow(0 0 0 transparent);
+	}
+	50% {
+		transform: scale(1.2);
+		filter: drop-shadow(0 0 8px currentColor);
+	}
+}
+@keyframes collaborators-overlay-label-highlight {
+	0%, 100% {
+		transform: translate(-11px, -100%) scale(1);
+		filter: drop-shadow(0 0 0 transparent);
+	}
+	50% {
+		transform: translate(-11px, -100%) scale(1.1);
+		filter: drop-shadow(0 0 6px currentColor);
+	}
+}
+.block-editor-block-list__block.is-collaborator-selected:not(:focus)::after {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	outline-color: var(--collaborator-outline-color);
+	outline-style: solid;
+	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+	outline-offset: calc(-1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+	box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, ${import_collaborator_styles.BORDER_WIDTH_FOCUS_FALLBACK}) + ${import_collaborator_styles.BORDER_WIDTH}) ${import_collaborator_styles.WHITE}, 0 0 0 ${import_collaborator_styles.BORDER_WIDTH} ${import_collaborator_styles.WHITE}, ${import_collaborator_styles.ELEVATION_X_SMALL};
+	z-index: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+	.collaborators-overlay-user-label,
+	.collaborators-overlay-user-cursor {
+		animation: none;
+	}
+}
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OVERLAY_IFRAME_STYLES
+});
+//# sourceMappingURL=overlay-iframe-styles.cjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collaborators-overlay/overlay-iframe-styles.ts"],
+  "sourcesContent": ["/**\n * CSS for the collaborators overlay \u2014 cursor indicators, block highlights,\n * and positioning of Avatar labels inside the editor canvas iframe.\n */\n\nimport {\n\tBORDER_WIDTH,\n\tBORDER_WIDTH_FOCUS_FALLBACK,\n\tELEVATION_X_SMALL,\n\tGRID_UNIT_05,\n\tGRID_UNIT_10,\n\tWHITE,\n} from './collaborator-styles';\n\nexport const OVERLAY_IFRAME_STYLES = `\n.block-canvas-cover {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tpointer-events: none;\n\tz-index: 20000;\n}\n.block-canvas-cover .collaborators-overlay-full {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n.block-canvas-cover .collaborators-overlay-fixed {\n\tposition: fixed;\n\twidth: 100%;\n\theight: 100%;\n}\n.collaborators-overlay-user {\n\tposition: absolute;\n}\n/* Cursor lines render below avatar labels across all users. The parent\n   .collaborators-overlay-user has no z-index so it does not create a\n   stacking context \u2014 children participate in the shared overlay context. */\n.collaborators-overlay-user-cursor {\n\tposition: absolute;\n\tz-index: 0;\n\twidth: ${ BORDER_WIDTH_FOCUS_FALLBACK };\n\tborder-radius: ${ BORDER_WIDTH };\n\toutline: ${ BORDER_WIDTH } solid ${ WHITE };\n\tbox-shadow: ${ ELEVATION_X_SMALL };\n\tanimation: collaborators-overlay-cursor-blink 1s infinite;\n}\n\n/* Overlay-specific positioning applied to the Avatar cursor label. */\n.collaborators-overlay-user-label.editor-avatar {\n\tposition: absolute;\n\tz-index: 1;\n\ttransform: translate(-11px, -100%);\n\tmargin-top: -${ GRID_UNIT_05 };\n\tpointer-events: auto;\n\toverflow: visible;\n\twidth: max-content;\n}\n/* Avatar positioned above a highlighted block as a label. */\n.collaborators-overlay-block-label.editor-avatar {\n\tposition: absolute;\n\tz-index: 1;\n\ttransform: translateY(calc(-100% - ${ GRID_UNIT_10 }));\n\tpointer-events: auto;\n\toverflow: visible;\n\twidth: max-content;\n}\n\n@keyframes collaborators-overlay-cursor-blink {\n\t0%, 45% { opacity: 1; }\n\t55%, 95% { opacity: 0; }\n\t100% { opacity: 1; }\n}\n.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-cursor {\n\tanimation: collaborators-overlay-cursor-highlight 0.6s ease-in-out 3;\n}\n.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-label {\n\tanimation: collaborators-overlay-label-highlight 0.6s ease-in-out 3;\n}\n@keyframes collaborators-overlay-cursor-highlight {\n\t0%, 100% {\n\t\ttransform: scale(1);\n\t\tfilter: drop-shadow(0 0 0 transparent);\n\t}\n\t50% {\n\t\ttransform: scale(1.2);\n\t\tfilter: drop-shadow(0 0 8px currentColor);\n\t}\n}\n@keyframes collaborators-overlay-label-highlight {\n\t0%, 100% {\n\t\ttransform: translate(-11px, -100%) scale(1);\n\t\tfilter: drop-shadow(0 0 0 transparent);\n\t}\n\t50% {\n\t\ttransform: translate(-11px, -100%) scale(1.1);\n\t\tfilter: drop-shadow(0 0 6px currentColor);\n\t}\n}\n.block-editor-block-list__block.is-collaborator-selected:not(:focus)::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tpointer-events: none;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\toutline-color: var(--collaborator-outline-color);\n\toutline-style: solid;\n\toutline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));\n\toutline-offset: calc(-1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));\n\tbox-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, ${ BORDER_WIDTH_FOCUS_FALLBACK }) + ${ BORDER_WIDTH }) ${ WHITE }, 0 0 0 ${ BORDER_WIDTH } ${ WHITE }, ${ ELEVATION_X_SMALL };\n\tz-index: 1;\n}\n@media (prefers-reduced-motion: reduce) {\n\t.collaborators-overlay-user-label,\n\t.collaborators-overlay-user-cursor {\n\t\tanimation: none;\n\t}\n}\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,iCAOO;AAEA,IAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UA+B1B,sDAA4B;AAAA,kBACpB,uCAAa;AAAA,YACnB,uCAAa,UAAW,gCAAM;AAAA,eAC3B,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASjB,uCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCASS,uCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mEAiDgB,sDAA4B,OAAQ,uCAAa,KAAM,gCAAM,WAAY,uCAAa,IAAK,gCAAM,KAAM,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}