@excalidraw/excalidraw 0.17.1-7441-c5548cc → 0.17.1-7441-0269e5a

package/dist/browser/excalidraw-assets/{chunk-C3WE7537.js → chunk-V52YQ6TH.js}

@@ -1,18 +1,19 @@
 import {
   define_import_meta_env_default,
   init_define_import_meta_env
-} from "./chunk-I7D3YGSV.js";
+} from "./chunk-5XVKPBR4.js";
 import {
   en_default
-} from "./chunk-Q5V3XSEB.js";
+} from "./chunk-T7PKCJTJ.js";
 import {
   percentages_default
 } from "./chunk-I6H72Z5H.js";
 import {
   __commonJS,
   __export,
+  __glob,
   __toESM
-} from "./chunk-YS3YHKSV.js";
+} from "./chunk-HG4GCABW.js";
 
 // ../../node_modules/crc-32/crc32.js
 var require_crc32 = __commonJS({
@@ -5479,11 +5480,11 @@ var require_react_jsx_runtime_development = __commonJS({
             return jsxWithValidation(type, props, key, false);
           }
         }
-        var jsx130 = jsxWithValidationDynamic;
-        var jsxs73 = jsxWithValidationStatic;
+        var jsx131 = jsxWithValidationDynamic;
+        var jsxs76 = jsxWithValidationStatic;
         exports.Fragment = REACT_FRAGMENT_TYPE;
-        exports.jsx = jsx130;
-        exports.jsxs = jsxs73;
+        exports.jsx = jsx131;
+        exports.jsxs = jsxs76;
       })();
     }
   }
@@ -7362,6 +7363,65 @@ var import_react2 = __toESM(require_react(), 1);
 var jotaiScope = Symbol();
 var jotaiStore = createStoreForExport();
 
+// import("./locales/**/*.json") in i18n.ts
+var globImport_locales_json = __glob({
+  "./locales/ar-SA.json": () => import("./ar-SA-ZG4GMNKR.js"),
+  "./locales/az-AZ.json": () => import("./az-AZ-5QPIG4ZE.js"),
+  "./locales/bg-BG.json": () => import("./bg-BG-GWMMOXVZ.js"),
+  "./locales/bn-BD.json": () => import("./bn-BD-FFLR3TNM.js"),
+  "./locales/ca-ES.json": () => import("./ca-ES-7TTPSWTV.js"),
+  "./locales/cs-CZ.json": () => import("./cs-CZ-ZBCV22AJ.js"),
+  "./locales/da-DK.json": () => import("./da-DK-Q4T27BFS.js"),
+  "./locales/de-DE.json": () => import("./de-DE-MBK4JIXX.js"),
+  "./locales/el-GR.json": () => import("./el-GR-4IO54FJG.js"),
+  "./locales/en.json": () => import("./en-6HNFHSKB.js"),
+  "./locales/es-ES.json": () => import("./es-ES-RTNHOKI6.js"),
+  "./locales/eu-ES.json": () => import("./eu-ES-IPUNFIRV.js"),
+  "./locales/fa-IR.json": () => import("./fa-IR-AFOLD64G.js"),
+  "./locales/fi-FI.json": () => import("./fi-FI-YDIGP7ED.js"),
+  "./locales/fr-FR.json": () => import("./fr-FR-DKTDAJMV.js"),
+  "./locales/gl-ES.json": () => import("./gl-ES-KAW5CTCB.js"),
+  "./locales/he-IL.json": () => import("./he-IL-XFQ6PZWN.js"),
+  "./locales/hi-IN.json": () => import("./hi-IN-CJGZ2R72.js"),
+  "./locales/hu-HU.json": () => import("./hu-HU-LH67LOY3.js"),
+  "./locales/id-ID.json": () => import("./id-ID-L6Y7PWWN.js"),
+  "./locales/it-IT.json": () => import("./it-IT-NYW7ZXIC.js"),
+  "./locales/ja-JP.json": () => import("./ja-JP-PTAJBPX4.js"),
+  "./locales/kaa.json": () => import("./kaa-WXJRXWPF.js"),
+  "./locales/kab-KAB.json": () => import("./kab-KAB-ODUQXY6X.js"),
+  "./locales/kk-KZ.json": () => import("./kk-KZ-UXGGFOE5.js"),
+  "./locales/km-KH.json": () => import("./km-KH-KH42MBCX.js"),
+  "./locales/ko-KR.json": () => import("./ko-KR-OK4WMN6E.js"),
+  "./locales/ku-TR.json": () => import("./ku-TR-I6JF7FTE.js"),
+  "./locales/lt-LT.json": () => import("./lt-LT-MRDJ3W6M.js"),
+  "./locales/lv-LV.json": () => import("./lv-LV-GUHKIRYT.js"),
+  "./locales/mr-IN.json": () => import("./mr-IN-2VY5ATS4.js"),
+  "./locales/my-MM.json": () => import("./my-MM-Q3UE7NDU.js"),
+  "./locales/nb-NO.json": () => import("./nb-NO-YGVSWPTU.js"),
+  "./locales/nl-NL.json": () => import("./nl-NL-JYQZFVD6.js"),
+  "./locales/nn-NO.json": () => import("./nn-NO-SVCTK45S.js"),
+  "./locales/oc-FR.json": () => import("./oc-FR-7S4GZ53C.js"),
+  "./locales/pa-IN.json": () => import("./pa-IN-OAXG5ILZ.js"),
+  "./locales/percentages.json": () => import("./percentages-G7XJNZNY.js"),
+  "./locales/pl-PL.json": () => import("./pl-PL-4LOCCO6A.js"),
+  "./locales/pt-BR.json": () => import("./pt-BR-UE7QKZT7.js"),
+  "./locales/pt-PT.json": () => import("./pt-PT-QRYXWDEQ.js"),
+  "./locales/ro-RO.json": () => import("./ro-RO-S6UM3GTE.js"),
+  "./locales/ru-RU.json": () => import("./ru-RU-X3LZJ2PM.js"),
+  "./locales/si-LK.json": () => import("./si-LK-47EZ7CDR.js"),
+  "./locales/sk-SK.json": () => import("./sk-SK-BZTESEQ3.js"),
+  "./locales/sl-SI.json": () => import("./sl-SI-UKPT7XYH.js"),
+  "./locales/sv-SE.json": () => import("./sv-SE-QCQFH645.js"),
+  "./locales/ta-IN.json": () => import("./ta-IN-VVBM4WJT.js"),
+  "./locales/th-TH.json": () => import("./th-TH-7BH7SJAO.js"),
+  "./locales/tr-TR.json": () => import("./tr-TR-PSQK5I6C.js"),
+  "./locales/uk-UA.json": () => import("./uk-UA-SPVEJS7T.js"),
+  "./locales/vi-VN.json": () => import("./vi-VN-KIIQDQET.js"),
+  "./locales/zh-CN.json": () => import("./zh-CN-6PVTYMG5.js"),
+  "./locales/zh-HK.json": () => import("./zh-HK-V2KK262G.js"),
+  "./locales/zh-TW.json": () => import("./zh-TW-VYIR3NM2.js")
+});
+
 // i18n.ts
 var COMPLETION_THRESHOLD = 85;
 var defaultLang = { code: "en", label: "English" };
@@ -7437,8 +7497,7 @@ var setLanguage = async (lang) => {
     currentLangData = {};
   } else {
     try {
-      currentLangData = await /* webpackChunkName: "locales/[request]" */
-      globImport_locales_json(`./locales/${currentLang.code}.json`);
+      currentLangData = await globImport_locales_json(`./locales/${currentLang.code}.json`);
     } catch (error) {
       console.error(`Failed to load language ${lang.code}:`, error.message);
       currentLangData = en_default;
@@ -7866,17 +7925,40 @@ var queryFocusableElements = (container) => {
     (element) => element.tabIndex > -1 && !element.disabled
   ) : [];
 };
+var _defaultIsShallowComparatorFallback = (a4, b4) => {
+  if (Array.isArray(a4) && Array.isArray(b4) && a4.length === 0 && b4.length === 0) {
+    return true;
+  }
+  return a4 === b4;
+};
 var isShallowEqual = (objA, objB, comparators, debug = false) => {
   const aKeys = Object.keys(objA);
   const bKeys = Object.keys(objB);
   if (aKeys.length !== bKeys.length) {
     return false;
   }
+  if (comparators && Array.isArray(comparators)) {
+    for (const key of comparators) {
+      const ret = objA[key] === objB[key] || _defaultIsShallowComparatorFallback(objA[key], objB[key]);
+      if (!ret) {
+        if (debug) {
+          console.warn(
+            `%cisShallowEqual: ${key} not equal ->`,
+            "color: #8B4000",
+            objA[key],
+            objB[key]
+          );
+        }
+        return false;
+      }
+    }
+    return true;
+  }
   return aKeys.every((key) => {
     const comparator = comparators?.[key];
-    const ret = comparator ? comparator(objA[key], objB[key]) : objA[key] === objB[key];
+    const ret = comparator ? comparator(objA[key], objB[key]) : objA[key] === objB[key] || _defaultIsShallowComparatorFallback(objA[key], objB[key]);
     if (!ret && debug) {
-      console.info(
+      console.warn(
         `%cisShallowEqual: ${key} not equal ->`,
         "color: #8B4000",
         objA[key],
@@ -7964,6 +8046,12 @@ var cloneJSON = (obj) => JSON.parse(JSON.stringify(obj));
 var isFiniteNumber = (value) => {
   return typeof value === "number" && Number.isFinite(value);
 };
+var updateStable = (prevValue, nextValue) => {
+  if (isShallowEqual(prevValue, nextValue)) {
+    return prevValue;
+  }
+  return nextValue;
+};
 
 // appState.ts
 var defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio) ? devicePixelRatio : 1;
@@ -8053,7 +8141,9 @@ var getDefaultAppState = () => {
       x: 0,
       y: 0
     },
-    objectsSnapModeEnabled: false
+    objectsSnapModeEnabled: false,
+    userToFollow: null,
+    followedBy: /* @__PURE__ */ new Set()
   };
 };
 var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
@@ -8147,7 +8237,9 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   selectedLinearElement: { browser: true, export: false, server: false },
   snapLines: { browser: false, export: false, server: false },
   originSnapOffset: { browser: false, export: false, server: false },
-  objectsSnapModeEnabled: { browser: true, export: false, server: false }
+  objectsSnapModeEnabled: { browser: true, export: false, server: false },
+  userToFollow: { browser: false, export: false, server: false },
+  followedBy: { browser: false, export: false, server: false }
 });
 var _clearAppStateForStorage = (appState, exportType) => {
   const stateForExport = {};
@@ -14018,6 +14110,14 @@ var brainIcon = createIcon(
   ] }),
   tablerIconProps
 );
+var searchIcon = createIcon(
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { strokeWidth: 1.5, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 21l-6 -6" })
+  ] }),
+  tablerIconProps
+);
 
 // actions/actionDeleteSelected.tsx
 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
@@ -20556,11 +20656,15 @@ var Tooltip = ({
   children,
   label,
   long = false,
-  style
+  style,
+  disabled
 }) => {
   (0, import_react37.useEffect)(() => {
     return () => getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
   }, []);
+  if (disabled) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
@@ -20654,7 +20758,8 @@ var actionZoomIn = register({
             nextZoom: getNormalizedZoom(appState.zoom.value + ZOOM_STEP)
           },
           appState
-        )
+        ),
+        userToFollow: null
       },
       commitToHistory: false
     };
@@ -20689,7 +20794,8 @@ var actionZoomOut = register({
             nextZoom: getNormalizedZoom(appState.zoom.value - ZOOM_STEP)
           },
           appState
-        )
+        ),
+        userToFollow: null
       },
       commitToHistory: false
     };
@@ -20724,7 +20830,8 @@ var actionResetZoom = register({
             nextZoom: getNormalizedZoom(1)
           },
           appState
-        )
+        ),
+        userToFollow: null
       },
       commitToHistory: false
     };
@@ -20761,14 +20868,13 @@ var zoomValueToFitBoundsOnViewport = (bounds, viewportDimensions) => {
   );
   return clampedZoomValueToFitElements;
 };
-var zoomToFit = ({
-  targetElements,
+var zoomToFitBounds = ({
+  bounds,
   appState,
   fitToViewport = false,
   viewportZoomFactor = 0.7
 }) => {
-  const commonBounds = getCommonBounds(getNonDeletedElements(targetElements));
-  const [x1, y1, x22, y22] = commonBounds;
+  const [x1, y1, x22, y22] = bounds;
   const centerX = (x1 + x22) / 2;
   const centerY = (y1 + y22) / 2;
   let newZoomValue;
@@ -20797,7 +20903,7 @@ var zoomToFit = ({
     scrollX = appStateWidth / 2 * (1 / newZoomValue) - centerX;
     scrollY = appState.height / 2 * (1 / newZoomValue) - centerY;
   } else {
-    newZoomValue = zoomValueToFitBoundsOnViewport(commonBounds, {
+    newZoomValue = zoomValueToFitBoundsOnViewport(bounds, {
       width: appState.width,
       height: appState.height
     });
@@ -20822,6 +20928,20 @@ var zoomToFit = ({
     commitToHistory: false
   };
 };
+var zoomToFit = ({
+  targetElements,
+  appState,
+  fitToViewport,
+  viewportZoomFactor
+}) => {
+  const commonBounds = getCommonBounds(getNonDeletedElements(targetElements));
+  return zoomToFitBounds({
+    bounds: commonBounds,
+    appState,
+    fitToViewport,
+    viewportZoomFactor
+  });
+};
 var actionZoomToFitSelectionInViewport = register({
   name: "zoomToFitSelectionInViewport",
   trackEvent: { category: "canvas" },
@@ -20829,7 +20949,10 @@ var actionZoomToFitSelectionInViewport = register({
     const selectedElements = app.scene.getSelectedElements(appState);
     return zoomToFit({
       targetElements: selectedElements.length ? selectedElements : elements,
-      appState,
+      appState: {
+        ...appState,
+        userToFollow: null
+      },
       fitToViewport: false
     });
   },
@@ -20844,7 +20967,10 @@ var actionZoomToFitSelection = register({
     const selectedElements = app.scene.getSelectedElements(appState);
     return zoomToFit({
       targetElements: selectedElements.length ? selectedElements : elements,
-      appState,
+      appState: {
+        ...appState,
+        userToFollow: null
+      },
       fitToViewport: true
     });
   },
@@ -20855,7 +20981,14 @@ var actionZoomToFit = register({
   name: "zoomToFit",
   viewMode: true,
   trackEvent: { category: "canvas" },
-  perform: (elements, appState) => zoomToFit({ targetElements: elements, appState, fitToViewport: false }),
+  perform: (elements, appState) => zoomToFit({
+    targetElements: elements,
+    appState: {
+      ...appState,
+      userToFollow: null
+    },
+    fitToViewport: false
+  }),
   keyTest: (event) => event.code === CODES.ONE && event.shiftKey && !event.altKey && !event[KEYS.CTRL_OR_CMD]
 });
 var actionToggleTheme = register({
@@ -21845,12 +21978,12 @@ var e2 = (() => {
     return "showOpenFilePicker";
   return false;
 })();
-var t3 = e2 ? import("./file-open-002ab408-YC7KQ7M7.js") : import("./file-open-7c801643-GRK3M4FM.js");
+var t3 = e2 ? import("./file-open-002ab408-XIZJR36E.js") : import("./file-open-7c801643-YIZPMU4W.js");
 async function n3(...e3) {
   return (await t3).default(...e3);
 }
-var i3 = e2 ? import("./directory-open-4ed118d0-3YEXHCYQ.js") : import("./directory-open-01563666-OUEPAD2B.js");
-var o3 = e2 ? import("./file-save-745eba88-HT2N2RA6.js") : import("./file-save-3189631c-XOSH6LGE.js");
+var i3 = e2 ? import("./directory-open-4ed118d0-CW2C2TU4.js") : import("./directory-open-01563666-XGWD52SG.js");
+var o3 = e2 ? import("./file-save-745eba88-MWPDJIMB.js") : import("./file-save-3189631c-BQMBD5TV.js");
 async function s3(...e3) {
   return (await o3).default(...e3);
 }
@@ -22296,10 +22429,7 @@ var exportToSvg = async (elements, appState, files, opts) => {
   let metadata = "";
   if (exportEmbedScene) {
     try {
-      metadata = await (await import(
-        /* webpackChunkName: "image" */
-        "./image-DBNYVO3T.js"
-      )).encodeSvgMetadata({
+      metadata = await (await import("./image-MZHH7VY4.js")).encodeSvgMetadata({
         // when embedding scene, we want to embed the origionally supplied
         // elements which don't contain the temp frame labels.
         // But it also requires that the exportToSvg is being supplied with
@@ -23550,10 +23680,7 @@ var exportCanvas = async (type, elements, appState, files, {
   if (type === "png") {
     let blob = await canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
-      blob = await (await import(
-        /* webpackChunkName: "image" */
-        "./image-DBNYVO3T.js"
-      )).encodePngMetadata({
+      blob = await (await import("./image-MZHH7VY4.js")).encodePngMetadata({
         blob,
         metadata: serializeAsJSON(elements, appState, files, "local")
       });
@@ -24276,21 +24403,39 @@ init_define_import_meta_env();
 init_define_import_meta_env();
 var import_react41 = __toESM(require_react(), 1);
 var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
-var Avatar = ({ color, onClick, name, src }) => {
+var Avatar = ({
+  color,
+  onClick,
+  name,
+  src,
+  isBeingFollowed,
+  isCurrentUser
+}) => {
   const shortName = getNameInitial(name);
   const [error, setError] = (0, import_react41.useState)(false);
   const loadImg = !error && src;
   const style = loadImg ? void 0 : { background: color };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "Avatar", style, onClick, children: loadImg ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    "img",
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "div",
     {
-      className: "Avatar-img",
-      src,
-      alt: shortName,
-      referrerPolicy: "no-referrer",
-      onError: () => setError(true)
+      className: clsx_m_default("Avatar", {
+        "Avatar--is-followed": isBeingFollowed,
+        "Avatar--is-current-user": isCurrentUser
+      }),
+      style,
+      onClick,
+      children: loadImg ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "img",
+        {
+          className: "Avatar-img",
+          src,
+          alt: shortName,
+          referrerPolicy: "no-referrer",
+          onError: () => setError(true)
+        }
+      ) : shortName
     }
-  ) : shortName });
+  );
 };
 
 // actions/actionNavigate.tsx
@@ -24299,38 +24444,74 @@ var actionGoToCollaborator = register({
   name: "goToCollaborator",
   viewMode: true,
   trackEvent: { category: "collab" },
-  perform: (_elements, appState, value) => {
-    const point2 = value;
-    if (!point2) {
-      return { appState, commitToHistory: false };
+  perform: (_elements, appState, collaborator) => {
+    if (!collaborator.socketId || appState.userToFollow?.socketId === collaborator.socketId || collaborator.isCurrentUser) {
+      return {
+        appState: {
+          ...appState,
+          userToFollow: null
+        },
+        commitToHistory: false
+      };
     }
     return {
       appState: {
         ...appState,
-        ...centerScrollOn({
-          scenePoint: point2,
-          viewportDimensions: {
-            width: appState.width,
-            height: appState.height
-          },
-          zoom: appState.zoom
-        }),
+        userToFollow: {
+          socketId: collaborator.socketId,
+          username: collaborator.username || ""
+        },
         // Close mobile menu
         openMenu: appState.openMenu === "canvas" ? null : appState.openMenu
       },
       commitToHistory: false
     };
   },
-  PanelComponent: ({ updateData, data }) => {
-    const [clientId, collaborator] = data;
+  PanelComponent: ({ updateData, data, appState }) => {
+    const { clientId, collaborator, withName, isBeingFollowed } = data;
     const background = getClientColor(clientId);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return withName ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      "div",
+      {
+        className: "dropdown-menu-item dropdown-menu-item-base UserList__collaborator",
+        onClick: () => updateData(collaborator),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            Avatar,
+            {
+              color: background,
+              onClick: () => {
+              },
+              name: collaborator.username || "",
+              src: collaborator.avatarUrl,
+              isBeingFollowed,
+              isCurrentUser: collaborator.isCurrentUser === true
+            }
+          ),
+          collaborator.username,
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "div",
+            {
+              className: "UserList__collaborator-follow-status-icon",
+              style: { visibility: isBeingFollowed ? "visible" : "hidden" },
+              title: isBeingFollowed ? t("userList.hint.followStatus") : void 0,
+              "aria-hidden": true,
+              children: eyeIcon
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Avatar,
       {
         color: background,
-        onClick: () => updateData(collaborator.pointer),
+        onClick: () => {
+          updateData(collaborator);
+        },
         name: collaborator.username || "",
-        src: collaborator.avatarUrl
+        src: collaborator.avatarUrl,
+        isBeingFollowed,
+        isCurrentUser: collaborator.isCurrentUser === true
       }
     );
   }
@@ -31471,32 +31652,169 @@ var HelpDialog = ({ onClose }) => {
 init_define_import_meta_env();
 var import_react70 = __toESM(require_react(), 1);
 var import_jsx_runtime76 = __toESM(require_jsx_runtime(), 1);
-var UserList = ({ className, mobile, collaborators }) => {
-  const actionManager = useExcalidrawActionManager();
-  const uniqueCollaborators = /* @__PURE__ */ new Map();
-  collaborators.forEach((collaborator, socketId) => {
-    uniqueCollaborators.set(
-      // filter on user id, else fall back on unique socketId
-      collaborator.id || socketId,
-      collaborator
-    );
-  });
-  const avatars = uniqueCollaborators.size > 0 && Array.from(uniqueCollaborators).filter(([_, client]) => Object.keys(client).length !== 0).map(([clientId, collaborator]) => {
-    const avatarJSX = actionManager.renderAction("goToCollaborator", [
+var FIRST_N_AVATARS = 3;
+var SHOW_COLLABORATORS_FILTER_AT = 8;
+var ConditionalTooltipWrapper = ({
+  shouldWrap,
+  children,
+  clientId,
+  username
+}) => shouldWrap ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Tooltip, { label: username || "Unknown user", children }, clientId) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react70.default.Fragment, { children }, clientId);
+var renderCollaborator = ({
+  actionManager,
+  collaborator,
+  clientId,
+  withName = false,
+  shouldWrapWithTooltip = false,
+  isBeingFollowed
+}) => {
+  const data = {
+    clientId,
+    collaborator,
+    withName,
+    isBeingFollowed
+  };
+  const avatarJSX = actionManager.renderAction("goToCollaborator", data);
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    ConditionalTooltipWrapper,
+    {
       clientId,
-      collaborator
-    ]);
-    return mobile ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-      Tooltip,
-      {
-        label: collaborator.username || "Unknown user",
-        children: avatarJSX
-      },
-      clientId
-    ) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react70.default.Fragment, { children: avatarJSX }, clientId);
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: clsx_m_default("UserList", className, { UserList_mobile: mobile }), children: avatars });
+      username: collaborator.username,
+      shouldWrap: shouldWrapWithTooltip,
+      children: avatarJSX
+    },
+    clientId
+  );
 };
+var collaboratorComparatorKeys = [
+  "avatarUrl",
+  "id",
+  "socketId",
+  "username"
+];
+var UserList = import_react70.default.memo(
+  ({ className, mobile, collaborators, userToFollow }) => {
+    const actionManager = useExcalidrawActionManager();
+    const uniqueCollaboratorsMap = /* @__PURE__ */ new Map();
+    collaborators.forEach((collaborator, socketId) => {
+      const userId = collaborator.id || socketId;
+      uniqueCollaboratorsMap.set(
+        // filter on user id, else fall back on unique socketId
+        userId,
+        { ...collaborator, socketId }
+      );
+    });
+    const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap).filter(
+      ([_, collaborator]) => collaborator.username?.trim()
+    );
+    const [searchTerm, setSearchTerm] = import_react70.default.useState("");
+    if (uniqueCollaboratorsArray.length === 0) {
+      return null;
+    }
+    const searchTermNormalized = searchTerm.trim().toLowerCase();
+    const filteredCollaborators = searchTermNormalized ? uniqueCollaboratorsArray.filter(
+      ([, collaborator]) => collaborator.username?.toLowerCase().includes(searchTerm)
+    ) : uniqueCollaboratorsArray;
+    const firstNCollaborators = uniqueCollaboratorsArray.slice(
+      0,
+      FIRST_N_AVATARS
+    );
+    const firstNAvatarsJSX = firstNCollaborators.map(
+      ([clientId, collaborator]) => renderCollaborator({
+        actionManager,
+        collaborator,
+        clientId,
+        shouldWrapWithTooltip: true,
+        isBeingFollowed: collaborator.socketId === userToFollow
+      })
+    );
+    return mobile ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: clsx_m_default("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map(
+      ([clientId, collaborator]) => renderCollaborator({
+        actionManager,
+        collaborator,
+        clientId,
+        shouldWrapWithTooltip: true,
+        isBeingFollowed: collaborator.socketId === userToFollow
+      })
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: clsx_m_default("UserList", className), children: [
+      firstNAvatarsJSX,
+      uniqueCollaboratorsArray.length > FIRST_N_AVATARS && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+        $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9,
+        {
+          onOpenChange: (isOpen) => {
+            if (!isOpen) {
+              setSearchTerm("");
+            }
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { className: "UserList__more", children: [
+              "+",
+              uniqueCollaboratorsArray.length - FIRST_N_AVATARS
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2,
+              {
+                style: {
+                  zIndex: 2,
+                  width: "13rem",
+                  textAlign: "left"
+                },
+                align: "end",
+                sideOffset: 10,
+                children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Island, { style: { overflow: "hidden" }, children: [
+                  uniqueCollaboratorsArray.length >= SHOW_COLLABORATORS_FILTER_AT && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "UserList__search-wrapper", children: [
+                    searchIcon,
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+                      "input",
+                      {
+                        className: "UserList__search",
+                        type: "text",
+                        placeholder: t("userList.search.placeholder"),
+                        value: searchTerm,
+                        onChange: (e3) => {
+                          setSearchTerm(e3.target.value);
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "dropdown-menu UserList__collaborators", children: [
+                    filteredCollaborators.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "UserList__collaborators__empty", children: t("userList.search.empty") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "UserList__hint", children: t("userList.hint.text") }),
+                    filteredCollaborators.map(
+                      ([clientId, collaborator]) => renderCollaborator({
+                        actionManager,
+                        collaborator,
+                        clientId,
+                        withName: true,
+                        isBeingFollowed: collaborator.socketId === userToFollow
+                      })
+                    )
+                  ] })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  },
+  (prev, next) => {
+    if (prev.collaborators.size !== next.collaborators.size || prev.mobile !== next.mobile || prev.className !== next.className || prev.userToFollow !== next.userToFollow) {
+      return false;
+    }
+    for (const [socketId, collaborator] of prev.collaborators) {
+      const nextCollaborator = next.collaborators.get(socketId);
+      if (!nextCollaborator || !isShallowEqual(
+        collaborator,
+        nextCollaborator,
+        collaboratorComparatorKeys
+      )) {
+        return false;
+      }
+    }
+    return true;
+  }
+);
 
 // components/JSONExportDialog.tsx
 init_define_import_meta_env();
@@ -31809,7 +32127,7 @@ var SidebarTrigger = ({
 }) => {
   const setAppState = useExcalidrawSetAppState();
   const appState = useUIAppState();
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("label", { title, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("label", { title, className: "sidebar-trigger__label-element", children: [
     /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       "input",
       {
@@ -32911,7 +33229,8 @@ var MainMenu = Object.assign(
                   UserList,
                   {
                     mobile: true,
-                    collaborators: appState.collaborators
+                    collaborators: appState.collaborators,
+                    userToFollow: appState.userToFollow?.socketId || null
                   }
                 )
               ] })
@@ -34953,10 +35272,7 @@ TTD mermaid definition render errror: ${error3.message}`,
     refOnGenerate.current = onGenerate;
     const [mermaidToExcalidrawLib, setMermaidToExcalidrawLib] = (0, import_react89.useState)({
       loaded: false,
-      api: import(
-        /* webpackChunkName:"mermaid-to-excalidraw" */
-        "./dist-YSQXM7F6.js"
-      )
+      api: import("./dist-GMU63VF7.js")
     });
     (0, import_react89.useEffect)(() => {
       const fn = async () => {
@@ -35364,7 +35680,13 @@ var LayerUI = ({
             }
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(UserList, { collaborators: appState.collaborators }),
+            appState.collaborators.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              UserList,
+              {
+                collaborators: appState.collaborators,
+                userToFollow: appState.userToFollow?.socketId || null
+              }
+            ),
             renderTopRightUI?.(device.editor.isMobile, appState),
             !appState.viewModeEnabled && // hide button when sidebar docked
             (!isSidebarDocked || appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(tunnels.DefaultSidebarTriggerTunnel.Out, {})
@@ -37914,8 +38236,42 @@ var ElementCanvasButton = (props) => {
   );
 };
 
-// components/App.tsx
+// components/FollowMode/FollowMode.tsx
+init_define_import_meta_env();
 var import_jsx_runtime129 = __toESM(require_jsx_runtime(), 1);
+var FollowMode = ({
+  height,
+  width,
+  userToFollow,
+  onDisconnect
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "follow-mode", style: { width, height }, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "follow-mode__badge", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "follow-mode__badge__label", children: [
+      "Following",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        "span",
+        {
+          className: "follow-mode__badge__username",
+          title: userToFollow.username,
+          children: userToFollow.username
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      "button",
+      {
+        onClick: onDisconnect,
+        className: "follow-mode__disconnect-btn",
+        children: CloseIcon
+      }
+    )
+  ] }) }) });
+};
+var FollowMode_default = FollowMode;
+
+// components/App.tsx
+var import_jsx_runtime130 = __toESM(require_jsx_runtime(), 1);
 var AppContext = import_react95.default.createContext(null);
 var AppPropsContext = import_react95.default.createContext(null);
 var deviceContextInitialValue = {
@@ -37944,7 +38300,7 @@ var ExcalidrawAppStateContext = import_react95.default.createContext({
 });
 ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
 var ExcalidrawSetAppStateContext = import_react95.default.createContext(() => {
-  console.warn("unitialized ExcalidrawSetAppStateContext context!");
+  console.warn("Uninitialized ExcalidrawSetAppStateContext context!");
 });
 ExcalidrawSetAppStateContext.displayName = "ExcalidrawSetAppStateContext";
 var ExcalidrawActionManagerContext = import_react95.default.createContext(
@@ -38008,6 +38364,8 @@ var App = class _App extends import_react95.default.Component {
   onChangeEmitter = new Emitter();
   onPointerDownEmitter = new Emitter();
   onPointerUpEmitter = new Emitter();
+  onUserFollowEmitter = new Emitter();
+  onScrollChangeEmitter = new Emitter();
   constructor(props) {
     super(props);
     const defaultAppState2 = getDefaultAppState();
@@ -38072,7 +38430,9 @@ var App = class _App extends import_react95.default.Component {
         toggleSidebar: this.toggleSidebar,
         onChange: (cb) => this.onChangeEmitter.on(cb),
         onPointerDown: (cb) => this.onPointerDownEmitter.on(cb),
-        onPointerUp: (cb) => this.onPointerUpEmitter.on(cb)
+        onPointerUp: (cb) => this.onPointerUpEmitter.on(cb),
+        onScrollChange: (cb) => this.onScrollChangeEmitter.on(cb),
+        onUserFollow: (cb) => this.onUserFollowEmitter.on(cb)
       };
       if (typeof excalidrawAPI === "function") {
         excalidrawAPI(api);
@@ -38254,7 +38614,7 @@ var App = class _App extends import_react95.default.Component {
     const embeddableElements = this.scene.getNonDeletedElements().filter(
       (el) => isEmbeddableElement(el) && !!el.validated || isIframeElement(el)
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_jsx_runtime129.Fragment, { children: embeddableElements.map((el) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, { children: embeddableElements.map((el) => {
       const { x: x3, y: y3 } = sceneCoordsToViewportCoords(
         { sceneX: el.x, sceneY: el.y },
         this.state
@@ -38401,7 +38761,7 @@ var App = class _App extends import_react95.default.Component {
       );
       const isActive = this.state.activeEmbeddable?.element === el && this.state.activeEmbeddable?.state === "active";
       const isHovered = this.state.activeEmbeddable?.element === el && this.state.activeEmbeddable?.state === "hover";
-      return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
         "div",
         {
           className: clsx_m_default("excalidraw__embeddable-container", {
@@ -38416,7 +38776,7 @@ var App = class _App extends import_react95.default.Component {
               el
             )}px`
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
             "div",
             {
               className: "excalidraw__embeddable-container__inner",
@@ -38427,15 +38787,15 @@ var App = class _App extends import_react95.default.Component {
                 pointerEvents: isActive ? POINTER_EVENTS.enabled : POINTER_EVENTS.disabled
               },
               children: [
-                isHovered && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "excalidraw__embeddable-hint", children: t("buttons.embeddableInteractionButton") }),
-                /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                isHovered && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "excalidraw__embeddable-hint", children: t("buttons.embeddableInteractionButton") }),
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                   "div",
                   {
                     className: "excalidraw__embeddable__outer",
                     style: {
                       padding: `${el.strokeWidth}px`
                     },
-                    children: (isEmbeddableElement(el) ? this.props.renderEmbeddable?.(el, this.state) : null) ?? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                    children: (isEmbeddableElement(el) ? this.props.renderEmbeddable?.(el, this.state) : null) ?? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                       "iframe",
                       {
                         ref: (ref) => this.cacheEmbeddableRef(el, ref),
@@ -38546,7 +38906,7 @@ var App = class _App extends import_react95.default.Component {
       );
       if (f3.id === this.state.editingFrame) {
         const frameNameInEdit = frameName;
-        frameNameJSX = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        frameNameJSX = /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
           "input",
           {
             autoFocus: true,
@@ -38588,7 +38948,7 @@ var App = class _App extends import_react95.default.Component {
       } else {
         frameNameJSX = frameName;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
         "div",
         {
           id: this.getFrameNameDOMId(f3),
@@ -38646,7 +39006,7 @@ var App = class _App extends import_react95.default.Component {
     const shouldBlockPointerEvents = !(this.state.editingElement && isLinearElement(this.state.editingElement)) && (this.state.selectionElement || this.state.draggingElement || this.state.resizingElement || this.state.activeTool.type === "laser" && // technically we can just test on this once we make it more safe
     this.state.cursorButton === "down" || this.state.editingElement && !isTextElement(this.state.editingElement));
     const firstSelectedElement = selectedElements[0];
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       "div",
       {
         className: clsx_m_default("excalidraw excalidraw-container", {
@@ -38660,21 +39020,21 @@ var App = class _App extends import_react95.default.Component {
         onDrop: this.handleAppOnDrop,
         tabIndex: 0,
         onKeyDown: this.props.handleKeyboardGlobally ? void 0 : this.onKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(AppContext.Provider, { value: this, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(AppPropsContext.Provider, { value: this.props, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(AppContext.Provider, { value: this, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(AppPropsContext.Provider, { value: this.props, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
           ExcalidrawContainerContext.Provider,
           {
             value: this.excalidrawContainerValue,
-            children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(DeviceContext.Provider, { value: this.device, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ExcalidrawSetAppStateContext.Provider, { value: this.setAppState, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ExcalidrawAppStateContext.Provider, { value: this.state, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(DeviceContext.Provider, { value: this.device, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ExcalidrawSetAppStateContext.Provider, { value: this.setAppState, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ExcalidrawAppStateContext.Provider, { value: this.state, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
               ExcalidrawElementsContext.Provider,
               {
                 value: this.scene.getNonDeletedElements(),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                     ExcalidrawActionManagerContext.Provider,
                     {
                       value: this.actionManager,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                           LayerUI_default,
                           {
                             canvas: this.canvas,
@@ -38702,11 +39062,11 @@ var App = class _App extends import_react95.default.Component {
                             children: this.props.children
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "excalidraw-textEditorContainer" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "excalidraw-contextMenuContainer" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "excalidraw-eye-dropper-container" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(LaserToolOverlay, { manager: this.laserPathManager }),
-                        selectedElements.length === 1 && this.state.showHyperlinkPopup && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "excalidraw-textEditorContainer" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "excalidraw-contextMenuContainer" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "excalidraw-eye-dropper-container" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(LaserToolOverlay, { manager: this.laserPathManager }),
+                        selectedElements.length === 1 && this.state.showHyperlinkPopup && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                           Hyperlink,
                           {
                             element: firstSelectedElement,
@@ -38716,11 +39076,11 @@ var App = class _App extends import_react95.default.Component {
                           },
                           firstSelectedElement.id
                         ),
-                        this.props.aiEnabled !== false && selectedElements.length === 1 && isMagicFrameElement(firstSelectedElement) && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                        this.props.aiEnabled !== false && selectedElements.length === 1 && isMagicFrameElement(firstSelectedElement) && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                           ElementCanvasButtons,
                           {
                             element: firstSelectedElement,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                               ElementCanvasButton,
                               {
                                 title: t("labels.convertToCode"),
@@ -38734,12 +39094,12 @@ var App = class _App extends import_react95.default.Component {
                             )
                           }
                         ),
-                        selectedElements.length === 1 && isIframeElement(firstSelectedElement) && firstSelectedElement.customData?.generationData?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+                        selectedElements.length === 1 && isIframeElement(firstSelectedElement) && firstSelectedElement.customData?.generationData?.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                           ElementCanvasButtons,
                           {
                             element: firstSelectedElement,
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                                 ElementCanvasButton,
                                 {
                                   title: t("labels.copySource"),
@@ -38748,7 +39108,7 @@ var App = class _App extends import_react95.default.Component {
                                   onChange: () => this.onIframeSrcCopy(firstSelectedElement)
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                                 ElementCanvasButton,
                                 {
                                   title: "Enter fullscreen",
@@ -38785,7 +39145,7 @@ var App = class _App extends import_react95.default.Component {
                             ]
                           }
                         ),
-                        this.state.toast !== null && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                        this.state.toast !== null && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                           Toast,
                           {
                             message: this.state.toast.message,
@@ -38794,7 +39154,7 @@ var App = class _App extends import_react95.default.Component {
                             closable: this.state.toast.closable
                           }
                         ),
-                        this.state.contextMenu && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                        this.state.contextMenu && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                           ContextMenu,
                           {
                             items: this.state.contextMenu.items,
@@ -38809,7 +39169,7 @@ var App = class _App extends import_react95.default.Component {
                             }
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                           StaticCanvas_default,
                           {
                             canvas: this.canvas,
@@ -38828,7 +39188,7 @@ var App = class _App extends import_react95.default.Component {
                             }
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                           InteractiveCanvas_default,
                           {
                             containerRef: this.excalidrawContainerRef,
@@ -38851,6 +39211,15 @@ var App = class _App extends import_react95.default.Component {
                             onDoubleClick: this.handleCanvasDoubleClick
                           }
                         ),
+                        this.state.userToFollow && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                          FollowMode_default,
+                          {
+                            width: this.state.width,
+                            height: this.state.height,
+                            userToFollow: this.state.userToFollow,
+                            onDisconnect: this.maybeUnfollowRemoteUser
+                          }
+                        ),
                         this.renderFrameNames()
                       ]
                     }
@@ -39430,7 +39799,7 @@ var App = class _App extends import_react95.default.Component {
     }
     if (isBrave() && !isMeasureTextSupported()) {
       this.setState({
-        errorMessage: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(BraveMeasureTextError_default, {})
+        errorMessage: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BraveMeasureTextError_default, {})
       });
     }
   }
@@ -39602,8 +39971,35 @@ var App = class _App extends import_react95.default.Component {
     if (prevProps.UIOptions.dockedSidebarBreakpoint !== this.props.UIOptions.dockedSidebarBreakpoint) {
       this.refreshEditorBreakpoints();
     }
-    if (prevState.scrollX !== this.state.scrollX || prevState.scrollY !== this.state.scrollY) {
-      this.props?.onScrollChange?.(this.state.scrollX, this.state.scrollY);
+    const hasFollowedPersonLeft = prevState.userToFollow && !this.state.collaborators.has(prevState.userToFollow.socketId);
+    if (hasFollowedPersonLeft) {
+      this.maybeUnfollowRemoteUser();
+    }
+    if (prevState.zoom.value !== this.state.zoom.value || prevState.scrollX !== this.state.scrollX || prevState.scrollY !== this.state.scrollY) {
+      this.props?.onScrollChange?.(
+        this.state.scrollX,
+        this.state.scrollY,
+        this.state.zoom
+      );
+      this.onScrollChangeEmitter.trigger(
+        this.state.scrollX,
+        this.state.scrollY,
+        this.state.zoom
+      );
+    }
+    if (prevState.userToFollow !== this.state.userToFollow) {
+      if (prevState.userToFollow) {
+        this.onUserFollowEmitter.trigger({
+          userToFollow: prevState.userToFollow,
+          action: "UNFOLLOW"
+        });
+      }
+      if (this.state.userToFollow) {
+        this.onUserFollowEmitter.trigger({
+          userToFollow: this.state.userToFollow,
+          action: "FOLLOW"
+        });
+      }
     }
     if (Object.keys(this.state.selectedElementIds).length && isEraserActive(this.state)) {
       this.setState({
@@ -40188,9 +40584,9 @@ var App = class _App extends import_react95.default.Component {
       )
     });
   };
-  cancelInProgresAnimation = null;
+  cancelInProgressAnimation = null;
   scrollToContent = (target = this.scene.getNonDeletedElements(), opts) => {
-    this.cancelInProgresAnimation?.();
+    this.cancelInProgressAnimation?.();
     const targetElements = Array.isArray(target) ? target : [target];
     let zoom = this.state.zoom;
     let scrollX = this.state.scrollX;
@@ -40245,17 +40641,23 @@ var App = class _App extends import_react95.default.Component {
         },
         duration: opts?.duration ?? 500
       });
-      this.cancelInProgresAnimation = () => {
+      this.cancelInProgressAnimation = () => {
         cancel();
-        this.cancelInProgresAnimation = null;
+        this.cancelInProgressAnimation = null;
       };
     } else {
       this.setState({ scrollX, scrollY, zoom });
     }
   };
+  maybeUnfollowRemoteUser = () => {
+    if (this.state.userToFollow) {
+      this.setState({ userToFollow: null });
+    }
+  };
   /** use when changing scrollX/scrollY/zoom based on user interaction */
   translateCanvas = (state) => {
-    this.cancelInProgresAnimation?.();
+    this.cancelInProgressAnimation?.();
+    this.maybeUnfollowRemoteUser();
     this.setState(state);
   };
   setToast = (toast) => {
@@ -41148,13 +41550,25 @@ var App = class _App extends import_react95.default.Component {
         },
         event
       );
-      this.setState({
-        snapLines,
-        originSnapOffset: originOffset
+      this.setState((prevState) => {
+        const nextSnapLines = updateStable(prevState.snapLines, snapLines);
+        const nextOriginOffset = prevState.originSnapOffset ? updateStable(prevState.originSnapOffset, originOffset) : originOffset;
+        if (prevState.snapLines === nextSnapLines && prevState.originSnapOffset === nextOriginOffset) {
+          return null;
+        }
+        return {
+          snapLines: nextSnapLines,
+          originSnapOffset: nextOriginOffset
+        };
       });
     } else if (!this.state.draggingElement) {
-      this.setState({
-        snapLines: []
+      this.setState((prevState) => {
+        if (prevState.snapLines.length) {
+          return {
+            snapLines: []
+          };
+        }
+        return null;
       });
     }
     if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {
@@ -41498,6 +41912,7 @@ var App = class _App extends import_react95.default.Component {
     }
   }
   handleCanvasPointerDown = (event) => {
+    this.maybeUnfollowRemoteUser();
     if (this.state.contextMenu) {
       this.setState({ contextMenu: null });
     }
@@ -42937,7 +43352,7 @@ var App = class _App extends import_react95.default.Component {
         isResizing,
         isRotating
       } = this.state;
-      this.setState({
+      this.setState((prevState) => ({
         isResizing: false,
         isRotating: false,
         resizingElement: null,
@@ -42948,9 +43363,9 @@ var App = class _App extends import_react95.default.Component {
         // text elements are reset on finalize, and resetting on pointerup
         // may cause issues with double taps
         editingElement: multiElement || isTextElement(this.state.editingElement) ? this.state.editingElement : null,
-        snapLines: [],
+        snapLines: updateStable(prevState.snapLines, []),
         originSnapOffset: null
-      });
+      }));
       SnapCache.setReferenceSnapPoints(null);
       SnapCache.setVisibleGaps(null);
       this.savePointer(childEvent.clientX, childEvent.clientY, "up");
@@ -43571,7 +43986,10 @@ var App = class _App extends import_react95.default.Component {
           maxWidthOrHeight: DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT
         });
       } catch (error) {
-        console.error("error trying to resing image file on insertion", error);
+        console.error(
+          "Error trying to resizing image file on insertion",
+          error
+        );
       }
       if (imageFile.size > MAX_ALLOWED_FILE_BYTES) {
         throw new Error(
@@ -44047,11 +44465,11 @@ var App = class _App extends import_react95.default.Component {
       includeLockedElements: true
     });
     const selectedElements = this.scene.getSelectedElements(this.state);
-    const isHittignCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements(
+    const isHittingCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements(
       { x: x3, y: y3 },
       selectedElements
     );
-    const type = element || isHittignCommonBoundBox ? "element" : "canvas";
+    const type = element || isHittingCommonBoundBox ? "element" : "canvas";
     const container = this.excalidrawContainerRef.current;
     const { top: offsetTop, left: offsetLeft } = container.getBoundingClientRect();
     const left = event.clientX - offsetLeft;
@@ -44483,7 +44901,7 @@ if (define_import_meta_env_default.MODE === ENV.TEST || define_import_meta_env_d
 var App_default = App;
 
 // components/ToolButton.tsx
-var import_jsx_runtime130 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime131 = __toESM(require_jsx_runtime(), 1);
 var ToolButton = import_react96.default.forwardRef((props, ref) => {
   const { id: excalId } = useExcalidrawContainer();
   const innerRef = import_react96.default.useRef(null);
@@ -44519,7 +44937,7 @@ var ToolButton = import_react96.default.forwardRef((props, ref) => {
   const lastPointerTypeRef = (0, import_react96.useRef)(null);
   if (props.type === "button" || props.type === "icon" || props.type === "submit") {
     const type = props.type === "icon" ? "button" : props.type;
-    return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       "button",
       {
         className: clsx_m_default(
@@ -44543,22 +44961,22 @@ var ToolButton = import_react96.default.forwardRef((props, ref) => {
         ref: innerRef,
         disabled: isLoading || props.isLoading,
         children: [
-          (props.icon || props.label) && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "ToolIcon__icon", "aria-hidden": "true", children: [
+          (props.icon || props.label) && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "ToolIcon__icon", "aria-hidden": "true", children: [
             props.icon || props.label,
-            props.keyBindingLabel && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel }),
-            props.isLoading && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Spinner_default, {})
+            props.keyBindingLabel && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel }),
+            props.isLoading && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Spinner_default, {})
           ] }),
-          props.showAriaLabel && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "ToolIcon__label", children: [
+          props.showAriaLabel && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "ToolIcon__label", children: [
             props["aria-label"],
             " ",
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Spinner_default, {})
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Spinner_default, {})
           ] }),
           props.children
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
     "label",
     {
       className: clsx_m_default("ToolIcon", props.className),
@@ -44573,7 +44991,7 @@ var ToolButton = import_react96.default.forwardRef((props, ref) => {
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
           "input",
           {
             className: `ToolIcon_type_radio ${sizeCn}`,
@@ -44590,9 +45008,9 @@ var ToolButton = import_react96.default.forwardRef((props, ref) => {
             ref: innerRef
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "ToolIcon__icon", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "ToolIcon__icon", children: [
           props.icon,
-          props.keyBindingLabel && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })
+          props.keyBindingLabel && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })
         ] })
       ]
     }
@@ -44607,7 +45025,7 @@ ToolButton.displayName = "ToolButton";
 
 // element/Hyperlink.tsx
 var import_react97 = __toESM(require_react(), 1);
-var import_jsx_runtime131 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime132 = __toESM(require_jsx_runtime(), 1);
 var CONTAINER_WIDTH = 320;
 var SPACE_BOTTOM = 85;
 var CONTAINER_PADDING2 = 5;
@@ -44739,7 +45157,7 @@ var Hyperlink = ({
   if (appState.contextMenu || appState.draggingElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
     "div",
     {
       className: "excalidraw-hyperlinkContainer",
@@ -44755,7 +45173,7 @@ var Hyperlink = ({
         }
       },
       children: [
-        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
           "input",
           {
             className: clsx_m_default("excalidraw-hyperlinkContainer-input"),
@@ -44775,7 +45193,7 @@ var Hyperlink = ({
               }
             }
           }
-        ) : element.link ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        ) : element.link ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
           "a",
           {
             href: normalizeLink(element.link || ""),
@@ -44802,9 +45220,9 @@ var Hyperlink = ({
             rel: "noopener noreferrer",
             children: element.link
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "excalidraw-hyperlinkContainer-link", children: t("labels.link.empty") }),
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "excalidraw-hyperlinkContainer__buttons", children: [
-          !isEditing && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "excalidraw-hyperlinkContainer-link", children: t("labels.link.empty") }),
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "excalidraw-hyperlinkContainer__buttons", children: [
+          !isEditing && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
             ToolButton,
             {
               type: "button",
@@ -44816,7 +45234,7 @@ var Hyperlink = ({
               icon: FreedrawIcon
             }
           ),
-          linkVal && !isEmbeddableElement(element) && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          linkVal && !isEmbeddableElement(element) && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
             ToolButton,
             {
               type: "button",
@@ -44868,7 +45286,7 @@ var actionLink = register({
   },
   PanelComponent: ({ elements, appState, updateData }) => {
     const selectedElements = getSelectedElements(elements, appState);
-    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
       ToolButton,
       {
         type: "button",
@@ -51077,6 +51495,20 @@ var getCommonBoundingBox = (elements) => {
     midY: (minY + maxY) / 2
   };
 };
+var getVisibleSceneBounds = ({
+  scrollX,
+  scrollY,
+  width,
+  height,
+  zoom
+}) => {
+  return [
+    -scrollX,
+    -scrollY,
+    -scrollX + width / zoom.value,
+    -scrollY + height / zoom.value
+  ];
+};
 
 // math.ts
 var rotate2 = (x3, y3, cx, cy, angle) => (
@@ -52434,10 +52866,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES.png) {
     try {
-      return await (await import(
-        /* webpackChunkName: "image" */
-        "./image-DBNYVO3T.js"
-      )).decodePngMetadata(blob);
+      return await (await import("./image-MZHH7VY4.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -52464,10 +52893,7 @@ var parseFileContents = async (blob) => {
     }
     if (blob.type === MIME_TYPES.svg) {
       try {
-        return await (await import(
-          /* webpackChunkName: "image" */
-          "./image-DBNYVO3T.js"
-        )).decodeSvgMetadata({
+        return await (await import("./image-MZHH7VY4.js")).decodeSvgMetadata({
           svg: contents
         });
       } catch (error) {
@@ -52633,9 +53059,9 @@ var resizeImageFile = async (file2, opts) => {
     return file2;
   }
   const [pica, imageBlobReduce] = await Promise.all([
-    import("./pica-UY2E6YV3.js").then((res) => res.default),
+    import("./pica-3M7LI2AU.js").then((res) => res.default),
     // a wrapper for pica for better API
-    import("./image-blob-reduce.esm-EBROP3TW.js").then((res) => res.default)
+    import("./image-blob-reduce.esm-5RGBO4BD.js").then((res) => res.default)
   ]);
   const reduce = imageBlobReduce({
     pica: pica({ features: ["js", "wasm"] })
@@ -52938,8 +53364,10 @@ export {
   sceneCoordsToViewportCoords,
   isLinearElement,
   normalizeLink,
+  zoomToFitBounds,
   getFreeDrawSvgPath,
   getCommonBounds,
+  getVisibleSceneBounds,
   restoreElements,
   restoreAppState,
   restore,