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

package/build/components/collaborators-overlay/cursor-registry.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collaborators-overlay/cursor-registry.ts"],
+  "sourcesContent": ["interface ScrollToCursorOptions {\n\tbehavior?: ScrollBehavior;\n\tblock?: ScrollLogicalPosition;\n\tinline?: ScrollLogicalPosition;\n\thighlightDuration?: number;\n}\n\n/**\n * Cursor Registry\n * ===\n * This registry stores references to cursor elements so that we can access them\n * in different parts of the component tree. This would more ideally be solved\n * with React context or state in the awareness store, but:\n *\n * 1. EditorPresence and BlockCanvasCover slot/fill break context propagation. We\n *    don't currently have a way to provide context to both the slot and fill.\n * 2. Storing pointers to the cursor elements in the awareness store might be a\n *    better solution, but would require broader refactoring.\n *\n * For now, we create a single instance of this registry and pass it down to the\n * components that need it. It's important that we create a single instance and\n * not a new instance per component or render; use useState with a lazy\n * initializer to accomplish this.\n */\n\nfunction highlightCursor( element: HTMLElement, duration: number ): void {\n\telement.classList.add( 'collaborators-overlay-cursor-highlighted' );\n\n\tsetTimeout( () => {\n\t\telement.classList.remove( 'collaborators-overlay-cursor-highlighted' );\n\t}, duration );\n}\n\nexport function createCursorRegistry() {\n\tconst cursorMap = new Map< number, HTMLElement >();\n\n\treturn {\n\t\t/**\n\t\t * Register a cursor element when it's created.\n\t\t *\n\t\t * @param clientId - The clientId of the cursor to register.\n\t\t * @param element  - The cursor element to register.\n\t\t */\n\t\tregisterCursor( clientId: number, element: HTMLElement ): void {\n\t\t\tcursorMap.set( clientId, element );\n\t\t},\n\n\t\t/**\n\t\t * Unregister a cursor element when it's removed.\n\t\t *\n\t\t * @param clientId - The clientId of the cursor to unregister.\n\t\t */\n\t\tunregisterCursor( clientId: number ): void {\n\t\t\tcursorMap.delete( clientId );\n\t\t},\n\n\t\t/**\n\t\t * Scroll to a cursor by clientId.\n\t\t *\n\t\t * @param clientId - The clientId of the cursor to scroll to.\n\t\t * @param options  - The options for the scroll.\n\t\t * @return true if cursor was found and scrolled to, false otherwise.\n\t\t */\n\t\tscrollToCursor(\n\t\t\tclientId: number,\n\t\t\toptions?: ScrollToCursorOptions\n\t\t): boolean {\n\t\t\tconst cursorElement = cursorMap.get( clientId );\n\n\t\t\tif ( ! cursorElement ) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tcursorElement.scrollIntoView( {\n\t\t\t\tbehavior: options?.behavior ?? 'smooth',\n\t\t\t\tblock: options?.block ?? 'center',\n\t\t\t\tinline: options?.inline ?? 'nearest',\n\t\t\t} );\n\n\t\t\tif ( options?.highlightDuration ) {\n\t\t\t\thighlightCursor( cursorElement, options.highlightDuration );\n\t\t\t}\n\n\t\t\treturn true;\n\t\t},\n\n\t\t/**\n\t\t * Clear the registry.\n\t\t */\n\t\tremoveAll(): void {\n\t\t\tcursorMap.clear();\n\t\t},\n\t};\n}\n\nexport type CursorRegistry = ReturnType< typeof createCursorRegistry >;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBA,SAAS,gBAAiB,SAAsB,UAAyB;AACxE,UAAQ,UAAU,IAAK,0CAA2C;AAElE,aAAY,MAAM;AACjB,YAAQ,UAAU,OAAQ,0CAA2C;AAAA,EACtE,GAAG,QAAS;AACb;AAEO,SAAS,uBAAuB;AACtC,QAAM,YAAY,oBAAI,IAA2B;AAEjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAON,eAAgB,UAAkB,SAA6B;AAC9D,gBAAU,IAAK,UAAU,OAAQ;AAAA,IAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,iBAAkB,UAAyB;AAC1C,gBAAU,OAAQ,QAAS;AAAA,IAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,eACC,UACA,SACU;AACV,YAAM,gBAAgB,UAAU,IAAK,QAAS;AAE9C,UAAK,CAAE,eAAgB;AACtB,eAAO;AAAA,MACR;AAEA,oBAAc,eAAgB;AAAA,QAC7B,UAAU,SAAS,YAAY;AAAA,QAC/B,OAAO,SAAS,SAAS;AAAA,QACzB,QAAQ,SAAS,UAAU;AAAA,MAC5B,CAAE;AAEF,UAAK,SAAS,mBAAoB;AACjC,wBAAiB,eAAe,QAAQ,iBAAkB;AAAA,MAC3D;AAEA,aAAO;AAAA,IACR;AAAA;AAAA;AAAA;AAAA,IAKA,YAAkB;AACjB,gBAAU,MAAM;AAAA,IACjB;AAAA,EACD;AACD;",
+  "names": []
+}

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

@@ -28,7 +28,11 @@ var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_overlay = require("./overlay.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var { BlockCanvasCover } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
-function CollaboratorsOverlay({ postId, postType }) {
+function CollaboratorsOverlay({
+  postId,
+  postType,
+  cursorRegistry
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlockCanvasCover.Fill, { children: ({
     containerRef
   }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -36,7 +40,8 @@ function CollaboratorsOverlay({ postId, postType }) {
     {
       blockEditorDocument: containerRef.current?.ownerDocument,
       postId,
-      postType
+      postType,
+      cursorRegistry
     }
   ) });
 }

package/build/components/collaborators-overlay/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error No exported types\nimport { privateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { Overlay } from './overlay';\n\nconst { BlockCanvasCover } = unlock( privateApis );\n\ninterface Props {\n\tpostId: number | null;\n\tpostType: string | null;\n}\n\n/**\n * Collaborators Overlay component\n * @param props          - The props for the CollaboratorsOverlay component\n * @param props.postId   - The ID of the post\n * @param props.postType - The type of the post\n * @return The CollaboratorsOverlay component\n */\nexport function CollaboratorsOverlay( { postId, postType }: Props ) {\n\treturn (\n\t\t<BlockCanvasCover.Fill>\n\t\t\t{ ( {\n\t\t\t\tcontainerRef,\n\t\t\t}: {\n\t\t\t\tcontainerRef: React.MutableRefObject< HTMLElement | null >;\n\t\t\t} ) => (\n\t\t\t\t<Overlay\n\t\t\t\t\tblockEditorDocument={ containerRef.current?.ownerDocument }\n\t\t\t\t\tpostId={ postId }\n\t\t\t\t\tpostType={ postType }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</BlockCanvasCover.Fill>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,0BAA4B;AAK5B,yBAAuB;AACvB,qBAAwB;AAwBpB;AAtBJ,IAAM,EAAE,iBAAiB,QAAI,2BAAQ,+BAAY;AAc1C,SAAS,qBAAsB,EAAE,QAAQ,SAAS,GAAW;AACnE,SACC,4CAAC,iBAAiB,MAAjB,EACE,WAAE;AAAA,IACH;AAAA,EACD,MAGC;AAAA,IAAC;AAAA;AAAA,MACA,qBAAsB,aAAa,SAAS;AAAA,MAC5C;AAAA,MACA;AAAA;AAAA,EACD,GAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error No exported types\nimport { privateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { Overlay } from './overlay';\nimport { type CursorRegistry } from './cursor-registry';\n\nconst { BlockCanvasCover } = unlock( privateApis );\n\ninterface Props {\n\tpostId: number | null;\n\tpostType: string | null;\n\tcursorRegistry?: CursorRegistry;\n}\n\n/**\n * Collaborators Overlay component\n * @param props                - The props for the CollaboratorsOverlay component\n * @param props.postId         - The ID of the post\n * @param props.postType       - The type of the post\n * @param props.cursorRegistry - The shared cursor registry\n * @return The CollaboratorsOverlay component\n */\nexport function CollaboratorsOverlay( {\n\tpostId,\n\tpostType,\n\tcursorRegistry,\n}: Props ) {\n\treturn (\n\t\t<BlockCanvasCover.Fill>\n\t\t\t{ ( {\n\t\t\t\tcontainerRef,\n\t\t\t}: {\n\t\t\t\tcontainerRef: React.MutableRefObject< HTMLElement | null >;\n\t\t\t} ) => (\n\t\t\t\t<Overlay\n\t\t\t\t\tblockEditorDocument={ containerRef.current?.ownerDocument }\n\t\t\t\t\tpostId={ postId }\n\t\t\t\t\tpostType={ postType }\n\t\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</BlockCanvasCover.Fill>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,0BAA4B;AAK5B,yBAAuB;AACvB,qBAAwB;AA+BpB;AA5BJ,IAAM,EAAE,iBAAiB,QAAI,2BAAQ,+BAAY;AAgB1C,SAAS,qBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACD,GAAW;AACV,SACC,4CAAC,iBAAiB,MAAjB,EACE,WAAE;AAAA,IACH;AAAA,EACD,MAGC;AAAA,IAAC;AAAA;AAAA,MACA,qBAAsB,aAAa,SAAS;AAAA,MAC5C;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,GAEF;AAEF;",
   "names": []
 }

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

@@ -0,0 +1,148 @@
+"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;
+}
+.collaborators-overlay-selection-rect {
+	position: absolute;
+	opacity: 0.15;
+	pointer-events: none;
+	border-radius: 2px;
+}
+
+/* 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) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 0.5px) rgba(${import_collaborator_styles.WHITE}, 0.7);
+	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.collaborators-overlay-selection-rect {\n\tposition: absolute;\n\topacity: 0.15;\n\tpointer-events: none;\n\tborder-radius: 2px;\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) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 0.5px) rgba(${ WHITE }, 0.7);\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAejB,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,qIAiDkF,gCAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/editor/src/components/collaborators-overlay/overlay.tsx
@@ -23,259 +33,161 @@ __export(overlay_exports, {
   Overlay: () => Overlay
 });
 module.exports = __toCommonJS(overlay_exports);
-var import_components = require("@wordpress/components");
 var import_compose = require("@wordpress/compose");
 var import_element = require("@wordpress/element");
-var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_i18n = require("@wordpress/i18n");
+var import_avatar = __toESM(require("../collaborators-presence/avatar/index.cjs"));
+var import_avatar_iframe_styles = require("./avatar-iframe-styles.cjs");
+var import_overlay_iframe_styles = require("./overlay-iframe-styles.cjs");
+var import_timing_utils = require("./timing-utils.cjs");
 var import_use_block_highlighting = require("./use-block-highlighting.cjs");
 var import_use_render_cursors = require("./use-render-cursors.cjs");
-var import_collaborator_styles = require("./collaborator-styles.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var { Avatar } = (0, import_lock_unlock.unlock)(import_components.privateApis);
-var COLLABORATORS_OVERLAY_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;
-}
-.collaborators-overlay-user-cursor {
-	position: absolute;
-	width: 2px;
-	border-radius: 1px;
-	outline: 1px solid #fff;
-	box-shadow: ${import_collaborator_styles.ELEVATION_X_SMALL};
-	animation: collaborators-overlay-cursor-blink 1s infinite;
-}
-
-/* \u2500\u2500 Avatar component (compiled from packages/components/src/avatar/styles.scss) \u2500\u2500 */
-.components-avatar {
-	display: inline-flex;
-	align-items: center;
-	border-radius: 9999px;
-	overflow: clip;
-	flex-shrink: 0;
-	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff, ${import_collaborator_styles.ELEVATION_X_SMALL};
-}
-.components-avatar__image {
-	box-sizing: border-box;
-	position: relative;
-	width: 32px;
-	height: 32px;
-	border-radius: 9999px;
-	border: 0;
-	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-	overflow: clip;
-	flex-shrink: 0;
-	font-size: 0;
-	color: #fff;
-}
-.is-small > .components-avatar__image {
-	width: 24px;
-	height: 24px;
-}
-.has-src > .components-avatar__image {
-	background-image: var(--components-avatar-url);
-	background-size: cover;
-	background-position: center;
-}
-.has-avatar-border-color > .components-avatar__image {
-	border: var(--wp-admin-border-width-focus, 2px) solid var(--components-avatar-outline-color);
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff;
-	background-clip: padding-box;
-}
-.components-avatar:not(.has-src) > .components-avatar__image {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 11px;
-	font-weight: 499;
-	border: 0;
-	box-shadow: none;
-	background-clip: border-box;
-}
-.components-avatar:not(.has-src).has-avatar-border-color > .components-avatar__image {
-	background-color: var(--components-avatar-outline-color);
-}
-.components-avatar__name {
-	font-size: 13px;
-	line-height: 20px;
-	color: #fff;
-	min-width: 0;
-	padding-bottom: 2px;
-	overflow: hidden;
-	opacity: 0;
-	white-space: nowrap;
-	transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
-}
-.components-avatar.has-badge {
-	display: inline-grid;
-	grid-template-columns: min-content 0fr;
-	column-gap: 0;
-	padding-inline-end: 0;
-	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);
-}
-.components-avatar.has-badge:hover {
-	grid-template-columns: min-content 1fr;
-	column-gap: 4px;
-	padding-inline-end: 8px;
-	transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-}
-.components-avatar.has-badge:hover .components-avatar__name {
-	opacity: 1;
-	transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-}
-.components-avatar.has-badge.has-avatar-border-color {
-	background-color: var(--components-avatar-outline-color);
-}
-/* \u2500\u2500 end Avatar \u2500\u2500 */
-
-/* Overlay-specific positioning applied to the Avatar cursor label. */
-.collaborators-overlay-user-label.components-avatar {
-	position: absolute;
-	transform: translate(-11px, -100%);
-	margin-top: -4px;
-	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, 2px) + 1px) #fff, 0 0 0 1px #fff, ${import_collaborator_styles.ELEVATION_X_SMALL};
-	z-index: 1;
-}
-@media (prefers-reduced-motion: reduce) {
-	.components-avatar.has-badge,
-	.components-avatar__name,
-	.collaborators-overlay-user-label,
-	.collaborators-overlay-user-cursor {
-		transition: none;
-		animation: none;
-	}
-}
-`;
+var RERENDER_DELAY_MS = 500;
+var CURSOR_REDRAW_INTERVAL_MS = 1e4;
 function Overlay({
   blockEditorDocument,
   postId,
-  postType
+  postType,
+  cursorRegistry
 }) {
   const [overlayElement, setOverlayElement] = (0, import_element.useState)(null);
   const { cursors, rerenderCursorsAfterDelay } = (0, import_use_render_cursors.useRenderCursors)(
     overlayElement,
     blockEditorDocument ?? null,
     postId ?? null,
-    postType ?? null
+    postType ?? null,
+    RERENDER_DELAY_MS
   );
-  const resizeObserverRef = (0, import_compose.useResizeObserver)(rerenderCursorsAfterDelay);
-  (0, import_element.useEffect)(rerenderCursorsAfterDelay, [rerenderCursorsAfterDelay]);
+  const { highlights, rerenderHighlightsAfterDelay } = (0, import_use_block_highlighting.useBlockHighlighting)(
+    overlayElement,
+    blockEditorDocument ?? null,
+    postId ?? null,
+    postType ?? null,
+    RERENDER_DELAY_MS
+  );
+  const onResize = (0, import_element.useCallback)(() => {
+    rerenderCursorsAfterDelay();
+    rerenderHighlightsAfterDelay();
+  }, [rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay]);
+  const resizeObserverRef = (0, import_compose.useResizeObserver)(onResize);
+  (0, import_element.useEffect)(() => {
+    const cleanupCursors = rerenderCursorsAfterDelay();
+    const cleanupHighlights = rerenderHighlightsAfterDelay();
+    return () => {
+      cleanupCursors();
+      cleanupHighlights();
+    };
+  }, [rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay]);
+  (0, import_element.useEffect)(() => {
+    if (cursors.length === 0) {
+      return;
+    }
+    return (0, import_timing_utils.setDelayedInterval)(
+      rerenderCursorsAfterDelay,
+      CURSOR_REDRAW_INTERVAL_MS
+    );
+  }, [cursors.length, rerenderCursorsAfterDelay]);
   const mergedRef = (0, import_compose.useMergeRefs)([
     setOverlayElement,
     resizeObserverRef
   ]);
-  (0, import_use_block_highlighting.useBlockHighlighting)(
-    blockEditorDocument ?? null,
-    postId ?? null,
-    postType ?? null
+  const cursorRefsMap = (0, import_element.useRef)(/* @__PURE__ */ new Map());
+  (0, import_element.useEffect)(() => {
+    if (!cursorRegistry) {
+      return;
+    }
+    const refs = cursorRefsMap.current;
+    const currentIds = new Set(cursors.map((c) => c.clientId));
+    for (const id of refs.keys()) {
+      if (!currentIds.has(id)) {
+        cursorRegistry.unregisterCursor(id);
+        refs.delete(id);
+      }
+    }
+    for (const [id, el] of refs.entries()) {
+      cursorRegistry.registerCursor(id, el);
+    }
+    return () => cursorRegistry.removeAll();
+  }, [cursors, cursorRegistry]);
+  const setCursorRef = (0, import_element.useCallback)(
+    (clientId) => (el) => {
+      if (el) {
+        cursorRefsMap.current.set(clientId, el);
+      } else {
+        cursorRefsMap.current.delete(clientId);
+      }
+    },
+    []
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "collaborators-overlay-full", ref: mergedRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: COLLABORATORS_OVERLAY_STYLES }),
-    cursors.map((cursor) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: "collaborators-overlay-user",
-        style: {
-          left: `${cursor.x}px`,
-          top: `${cursor.y}px`
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: import_avatar_iframe_styles.AVATAR_IFRAME_STYLES + import_overlay_iframe_styles.OVERLAY_IFRAME_STYLES }),
+    cursors.map((cursor) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      cursor.selectionRects?.map((rect, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "collaborators-overlay-selection-rect",
+          style: {
+            left: `${rect.x}px`,
+            top: `${rect.y}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+            backgroundColor: cursor.color
+          }
         },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              className: "collaborators-overlay-user-cursor",
-              style: {
-                backgroundColor: cursor.color,
-                height: `${cursor.height}px`
+        `${cursor.clientId}-sel-${index}`
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ref: setCursorRef(cursor.clientId),
+          className: "collaborators-overlay-user",
+          style: {
+            left: `${cursor.x}px`,
+            top: `${cursor.y}px`
+          },
+          children: [
+            !cursor.isMe && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "collaborators-overlay-user-cursor",
+                style: {
+                  backgroundColor: cursor.color,
+                  height: `${cursor.height}px`
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_avatar.default,
+              {
+                className: "collaborators-overlay-user-label",
+                variant: "badge",
+                size: "small",
+                src: cursor.avatarUrl,
+                name: cursor.userName,
+                label: cursor.isMe ? (0, import_i18n.__)("You") : void 0,
+                borderColor: cursor.color
               }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            Avatar,
-            {
-              className: "collaborators-overlay-user-label",
-              badge: true,
-              size: "small",
-              src: cursor.avatarUrl,
-              name: cursor.userName,
-              borderColor: cursor.color
-            }
-          )
-        ]
+            )
+          ]
+        }
+      )
+    ] }, cursor.clientId)),
+    highlights.map((highlight) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_avatar.default,
+      {
+        className: "collaborators-overlay-block-label",
+        variant: "badge",
+        size: "small",
+        src: highlight.avatarUrl,
+        name: highlight.userName,
+        borderColor: highlight.color,
+        style: {
+          left: `${highlight.x}px`,
+          top: `${highlight.y}px`
+        }
       },
-      cursor.clientId
+      highlight.blockId
     ))
   ] });
 }