@tldraw/editor 4.6.0-internal.e29318c66fb0 → 4.6.0-next.0a51207761bb

package/dist-cjs/lib/config/defaultAssets.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/config/defaultAssets.ts"],
+  "sourcesContent": ["import { TLAssetUtilConstructor } from '../editor/assets/AssetUtil'\n\n/** @public */\nexport type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>\n\nexport function checkAssets(customAssets: readonly TLAnyAssetUtilConstructor[]) {\n\tconst assets = [] as TLAnyAssetUtilConstructor[]\n\n\tconst addedCustomAssetTypes = new Set<string>()\n\tfor (const customAsset of customAssets) {\n\t\tif (addedCustomAssetTypes.has(customAsset.type)) {\n\t\t\tthrow new Error(`Asset type \"${customAsset.type}\" is defined more than once`)\n\t\t}\n\t\tassets.push(customAsset)\n\t\taddedCustomAssetTypes.add(customAsset.type)\n\t}\n\n\treturn assets\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKO,SAAS,YAAY,cAAoD;AAC/E,QAAM,SAAS,CAAC;AAEhB,QAAM,wBAAwB,oBAAI,IAAY;AAC9C,aAAW,eAAe,cAAc;AACvC,QAAI,sBAAsB,IAAI,YAAY,IAAI,GAAG;AAChD,YAAM,IAAI,MAAM,eAAe,YAAY,IAAI,6BAA6B;AAAA,IAC7E;AACA,WAAO,KAAK,WAAW;AACvB,0BAAsB,IAAI,YAAY,IAAI;AAAA,EAC3C;AAEA,SAAO;AACR;",
+  "names": []
+}

package/dist-cjs/lib/config/defaultShapes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/config/defaultShapes.ts"],
-  "sourcesContent": ["import { TLShapeUtilConstructor } from '../editor/shapes/ShapeUtil'\nimport { GroupShapeUtil } from '../editor/shapes/group/GroupShapeUtil'\n\n/** @public */\nexport type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>\n\n/** @public */\nexport const coreShapes = [\n\t// created by grouping interactions, probably the corest core shape that we have\n\tGroupShapeUtil,\n] as const\n\nconst coreShapeTypes = new Set<string>(coreShapes.map((s) => s.type))\n\nexport function checkShapesAndAddCore(customShapes: readonly TLAnyShapeUtilConstructor[]) {\n\tconst shapes = [...coreShapes] as TLAnyShapeUtilConstructor[]\n\n\tconst addedCustomShapeTypes = new Set<string>()\n\tfor (const customShape of customShapes) {\n\t\tif (coreShapeTypes.has(customShape.type)) {\n\t\t\tthrow new Error(\n\t\t\t\t`Shape type \"${customShape.type}\" is a core shapes type and cannot be overridden`\n\t\t\t)\n\t\t}\n\t\tif (addedCustomShapeTypes.has(customShape.type)) {\n\t\t\tthrow new Error(`Shape type \"${customShape.type}\" is defined more than once`)\n\t\t}\n\t\tshapes.push(customShape)\n\t\taddedCustomShapeTypes.add(customShape.type)\n\t}\n\n\treturn shapes\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,4BAA+B;AAMxB,MAAM,aAAa;AAAA;AAAA,EAEzB;AACD;AAEA,MAAM,iBAAiB,IAAI,IAAY,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAE7D,SAAS,sBAAsB,cAAoD;AACzF,QAAM,SAAS,CAAC,GAAG,UAAU;AAE7B,QAAM,wBAAwB,oBAAI,IAAY;AAC9C,aAAW,eAAe,cAAc;AACvC,QAAI,eAAe,IAAI,YAAY,IAAI,GAAG;AACzC,YAAM,IAAI;AAAA,QACT,eAAe,YAAY,IAAI;AAAA,MAChC;AAAA,IACD;AACA,QAAI,sBAAsB,IAAI,YAAY,IAAI,GAAG;AAChD,YAAM,IAAI,MAAM,eAAe,YAAY,IAAI,6BAA6B;AAAA,IAC7E;AACA,WAAO,KAAK,WAAW;AACvB,0BAAsB,IAAI,YAAY,IAAI;AAAA,EAC3C;AAEA,SAAO;AACR;",
+  "sourcesContent": ["import { GroupShapeUtil } from '../editor/shapes/group/GroupShapeUtil'\nimport { TLShapeUtilConstructor } from '../editor/shapes/ShapeUtil'\n\n/** @public */\nexport type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>\n\n/** @public */\nexport const coreShapes = [\n\t// created by grouping interactions, probably the corest core shape that we have\n\tGroupShapeUtil,\n] as const\n\nconst coreShapeTypes = new Set<string>(coreShapes.map((s) => s.type))\n\nexport function checkShapesAndAddCore(customShapes: readonly TLAnyShapeUtilConstructor[]) {\n\tconst shapes = [...coreShapes] as TLAnyShapeUtilConstructor[]\n\n\tconst addedCustomShapeTypes = new Set<string>()\n\tfor (const customShape of customShapes) {\n\t\tif (coreShapeTypes.has(customShape.type)) {\n\t\t\tthrow new Error(\n\t\t\t\t`Shape type \"${customShape.type}\" is a core shapes type and cannot be overridden`\n\t\t\t)\n\t\t}\n\t\tif (addedCustomShapeTypes.has(customShape.type)) {\n\t\t\tthrow new Error(`Shape type \"${customShape.type}\" is defined more than once`)\n\t\t}\n\t\tshapes.push(customShape)\n\t\taddedCustomShapeTypes.add(customShape.type)\n\t}\n\n\treturn shapes\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA+B;AAOxB,MAAM,aAAa;AAAA;AAAA,EAEzB;AACD;AAEA,MAAM,iBAAiB,IAAI,IAAY,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAE7D,SAAS,sBAAsB,cAAoD;AACzF,QAAM,SAAS,CAAC,GAAG,UAAU;AAE7B,QAAM,wBAAwB,oBAAI,IAAY;AAC9C,aAAW,eAAe,cAAc;AACvC,QAAI,eAAe,IAAI,YAAY,IAAI,GAAG;AACzC,YAAM,IAAI;AAAA,QACT,eAAe,YAAY,IAAI;AAAA,MAChC;AAAA,IACD;AACA,QAAI,sBAAsB,IAAI,YAAY,IAAI,GAAG;AAChD,YAAM,IAAI,MAAM,eAAe,YAAY,IAAI,6BAA6B;AAAA,IAC7E;AACA,WAAO,KAAK,WAAW;AACvB,0BAAsB,IAAI,YAAY,IAAI;AAAA,EAC3C;AAEA,SAAO;AACR;",
   "names": []
 }

package/dist-cjs/lib/editor/Editor.js

@@ -44,10 +44,11 @@ var import_store = require("@tldraw/store");
 var import_tlschema = require("@tldraw/tlschema");
 var import_utils = require("@tldraw/utils");
 var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
-var import_TLEditorSnapshot = require("../config/TLEditorSnapshot");
-var import_createTLUser = require("../config/createTLUser");
+var import_createTLCurrentUser = require("../config/createTLCurrentUser");
+var import_defaultAssets = require("../config/defaultAssets");
 var import_defaultBindings = require("../config/defaultBindings");
 var import_defaultShapes = require("../config/defaultShapes");
+var import_TLEditorSnapshot = require("../config/TLEditorSnapshot");
 var import_constants = require("../constants");
 var import_domUtils = require("../exports/domUtils");
 var import_exportToSvg = require("../exports/exportToSvg");
@@ -56,13 +57,12 @@ var import_menus = require("../globals/menus");
 var import_time = require("../globals/time");
 var import_options = require("../options");
 var import_Box = require("../primitives/Box");
-var import_Mat = require("../primitives/Mat");
-var import_Vec = require("../primitives/Vec");
 var import_easings = require("../primitives/easings");
 var import_Group2d = require("../primitives/geometry/Group2d");
 var import_intersect = require("../primitives/intersect");
+var import_Mat = require("../primitives/Mat");
 var import_utils2 = require("../primitives/utils");
-var import_SharedStylesMap = require("../utils/SharedStylesMap");
+var import_Vec = require("../primitives/Vec");
 var import_areShapesContentEqual = require("../utils/areShapesContentEqual");
 var import_assets = require("../utils/assets");
 var import_debug_flags = require("../utils/debug-flags");
@@ -71,6 +71,7 @@ var import_getIncrementedName = require("../utils/getIncrementedName");
 var import_reorderShapes = require("../utils/reorderShapes");
 var import_reparenting = require("../utils/reparenting");
 var import_rotation = require("../utils/rotation");
+var import_SharedStylesMap = require("../utils/SharedStylesMap");
 var import_bindingsIndex = require("./derivations/bindingsIndex");
 var import_notVisibleShapes = require("./derivations/notVisibleShapes");
 var import_parentsToChildren = require("./derivations/parentsToChildren");
@@ -81,10 +82,12 @@ var import_FocusManager = require("./managers/FocusManager/FocusManager");
 var import_FontManager = require("./managers/FontManager/FontManager");
 var import_HistoryManager = require("./managers/HistoryManager/HistoryManager");
 var import_InputsManager = require("./managers/InputsManager/InputsManager");
+var import_PerformanceManager = require("./managers/PerformanceManager/PerformanceManager");
 var import_ScribbleManager = require("./managers/ScribbleManager/ScribbleManager");
 var import_SnapManager = require("./managers/SnapManager/SnapManager");
 var import_SpatialIndexManager = require("./managers/SpatialIndexManager/SpatialIndexManager");
 var import_TextManager = require("./managers/TextManager/TextManager");
+var import_ThemeManager = require("./managers/ThemeManager/ThemeManager");
 var import_TickManager = require("./managers/TickManager/TickManager");
 var import_UserPreferencesManager = require("./managers/UserPreferencesManager/UserPreferencesManager");
 var import_RootState = require("./tools/RootState");
@@ -95,6 +98,7 @@ class Editor extends import_eventemitter3.default {
     user,
     shapeUtils,
     bindingUtils,
+    assetUtils: assetUtilConstructors,
     tools,
     getContainer,
     // needs to be here for backwards compatibility with TldrawEditor
@@ -102,13 +106,15 @@ class Editor extends import_eventemitter3.default {
     cameraOptions,
     initialState,
     autoFocus,
-    inferDarkMode,
     options: _options,
     // needs to be here for backwards compatibility with TldrawEditor
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     textOptions: _textOptions,
     getShapeVisibility,
-    fontAssetUrls
+    colorScheme,
+    fontAssetUrls,
+    themes,
+    initialTheme
   }) {
     super();
     this._getShapeVisibility = getShapeVisibility;
@@ -131,15 +137,27 @@ class Editor extends import_eventemitter3.default {
       ...cameraOptions,
       ...options?.camera
     });
+    this.getContainer = getContainer;
     this._textOptions = (0, import_state.atom)("text options", options?.text ?? null);
-    this.user = new import_UserPreferencesManager.UserPreferencesManager(user ?? (0, import_createTLUser.createTLUser)(), inferDarkMode ?? false);
+    this.user = new import_UserPreferencesManager.UserPreferencesManager(user ?? (0, import_createTLCurrentUser.createTLCurrentUser)(), colorScheme ?? "light");
     this.disposables.add(() => this.user.dispose());
-    this.getContainer = getContainer;
     this.textMeasure = new import_TextManager.TextManager(this);
     this.disposables.add(() => this.textMeasure.dispose());
-    this.fonts = new import_FontManager.FontManager(this, fontAssetUrls);
+    this._themeManager = new import_ThemeManager.ThemeManager(this, {
+      themes: (0, import_ThemeManager.resolveThemes)(themes),
+      initial: initialTheme ?? "default"
+    });
+    this.disposables.add(() => this._themeManager.dispose());
     this._tickManager = new import_TickManager.TickManager(this);
+    this.disposables.add(() => this._tickManager.dispose());
+    this.disposables.add(() => {
+      this.off("tick", this._decayCameraStateTimeout);
+      this._setCameraState("idle");
+    });
+    this.fonts = new import_FontManager.FontManager(this, fontAssetUrls);
     this.inputs = new import_InputsManager.InputsManager(this);
+    this.performance = new import_PerformanceManager.PerformanceManager(this);
+    this.disposables.add(() => this.performance.dispose());
     class NewRoot extends import_RootState.RootState {
       static initial = initialState ?? "";
     }
@@ -167,6 +185,16 @@ class Editor extends import_eventemitter3.default {
     }
     this.shapeUtils = _shapeUtils;
     this.styleProps = _styleProps;
+    const _shapeUtilsByAssetType = {};
+    for (const Util of allShapeUtils) {
+      const assetTypes = Util.handledAssetTypes;
+      if (assetTypes) {
+        for (const assetType of assetTypes) {
+          _shapeUtilsByAssetType[assetType] = _shapeUtils[Util.type];
+        }
+      }
+    }
+    this._shapeUtilsByAssetType = _shapeUtilsByAssetType;
     const allBindingUtils = (0, import_defaultBindings.checkBindings)(bindingUtils);
     const _bindingUtils = {};
     for (const Util of allBindingUtils) {
@@ -174,6 +202,15 @@ class Editor extends import_eventemitter3.default {
       _bindingUtils[Util.type] = util;
     }
     this.bindingUtils = _bindingUtils;
+    if (assetUtilConstructors) {
+      const allAssetUtils = (0, import_defaultAssets.checkAssets)(assetUtilConstructors);
+      const _assetUtils = {};
+      for (const Util of allAssetUtils) {
+        const util = new Util(this);
+        _assetUtils[Util.type] = util;
+      }
+      this.assetUtils = _assetUtils;
+    }
     for (const Tool of [...tools]) {
       if ((0, import_utils.hasOwnProperty)(this.root.children, Tool.id)) {
         throw Error(`Can't override tool with id "${Tool.id}"`);
@@ -515,6 +552,14 @@ class Editor extends import_eventemitter3.default {
         })
       );
     }
+    this.disposables.add(
+      (0, import_state.react)("sync current user record", () => {
+        const user2 = this.store.props.users.currentUser.get();
+        if (user2) {
+          this._ensureUserRecord(user2);
+        }
+      })
+    );
   }
   _getShapeVisibility;
   getIsShapeHiddenCache() {
@@ -606,6 +651,17 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   snaps;
+  /**
+   * A manager for performance measurement hooks.
+   *
+   * @public
+   */
+  performance;
+  /**
+   * A manager for the spatial index, tracking where shapes exist on the canvas.
+   *
+   * @internal
+   */
   _spatialIndex;
   /**
    * A manager for the any asynchronous events and making sure they're
@@ -620,6 +676,12 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   user;
+  /**
+   * A manager for the editor's themes.
+   *
+   * @internal
+   */
+  _themeManager;
   /**
    * A helper for measuring text.
    *
@@ -691,12 +753,117 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   dispose() {
+    this.stopCameraAnimation();
+    if (this.getInstanceState().followingUserId) {
+      this.stopFollowingUser();
+    }
     this.disposables.forEach((dispose) => dispose());
     this.disposables.clear();
+    this.menus.clearOpenMenus();
     this.store.dispose();
     this.isDisposed = true;
     this.emit("dispose");
   }
+  /* ------------------ Themes (shadowing the theme manager) ------------------ */
+  /**
+   * Get the current color mode (`'light'` or `'dark'`), based on the user's dark mode preference.
+   *
+   * @public
+   */
+  getColorMode() {
+    return this._themeManager.getColorMode();
+  }
+  /**
+   * Set the color mode. Note that this is a convenience method that passes the mode to
+   * `user.updateUserPreferences`, which is the source of truth for the user's color mode preference.
+   *
+   * @public
+   */
+  setColorMode(mode) {
+    this.user.updateUserPreferences({ colorScheme: mode });
+    return this;
+  }
+  /**
+   * Get the id of the current theme.
+   *
+   * @public
+   */
+  getCurrentThemeId() {
+    return this._themeManager.getCurrentThemeId();
+  }
+  /**
+   * Get the current theme definition.
+   *
+   * @public
+   */
+  getCurrentTheme() {
+    return this._themeManager.getCurrentTheme();
+  }
+  /**
+   * Set the current theme by id.
+   *
+   * @public
+   */
+  setCurrentTheme(id) {
+    this._themeManager.setCurrentTheme(id);
+    return this;
+  }
+  /**
+   * Get all registered theme definitions.
+   *
+   * @public
+   */
+  getThemes() {
+    return this._themeManager.getThemes();
+  }
+  /**
+   * Get a single theme definition by id.
+   *
+   * @public
+   */
+  getTheme(id) {
+    return this._themeManager.getTheme(id);
+  }
+  /**
+   * Replace all theme definitions, or update them via a callback that receives a deep copy.
+   * The `'default'` theme must always be present in the result.
+   *
+   * @example
+   * ```ts
+   * // Replace all themes
+   * editor.updateThemes({ default: myDefaultTheme, ocean: myOceanTheme })
+   *
+   * // Update via callback
+   * editor.updateThemes((themes) => {
+   *   delete themes.ocean
+   *   return themes
+   * })
+   * ```
+   *
+   * @public
+   */
+  updateThemes(themes) {
+    this._themeManager.updateThemes(themes);
+    return this;
+  }
+  /**
+   * Register or update a single theme definition. The theme is keyed by its `id` property.
+   *
+   * @example
+   * ```ts
+   * // Override a property on the default theme
+   * editor.updateTheme({ ...editor.getTheme('default')!, fontSize: 24 })
+   *
+   * // Register a new theme
+   * editor.updateTheme({ id: 'ocean', ...myOceanTheme })
+   * ```
+   *
+   * @public
+   */
+  updateTheme(theme) {
+    this._themeManager.updateTheme(theme);
+    return this;
+  }
   /* ------------------- Shape Utils ------------------ */
   /**
    * A map of shape utility classes (TLShapeUtils) by shape type.
@@ -704,6 +871,8 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   shapeUtils;
+  /** @internal */
+  _shapeUtilsByAssetType = {};
   styleProps;
   getShapeUtil(arg) {
     const type = typeof arg === "string" ? arg : arg.type;
@@ -715,6 +884,17 @@ class Editor extends import_eventemitter3.default {
     const type = typeof arg === "string" ? arg : arg.type;
     return (0, import_utils.hasOwnProperty)(this.shapeUtils, type);
   }
+  /**
+   * Get the shape util that handles the given asset type.
+   * Returns the shape util whose {@link ShapeUtil.handledAssetTypes} includes
+   * the given asset type, or undefined if none matches.
+   *
+   * @param assetType - The asset type string.
+   * @public
+   */
+  getShapeUtilForAssetType(assetType) {
+    return (0, import_utils.getOwnProperty)(this._shapeUtilsByAssetType, assetType);
+  }
   /* ------------------- Binding Utils ------------------ */
   /**
    * A map of shape utility classes (TLShapeUtils) by shape type.
@@ -728,6 +908,42 @@ class Editor extends import_eventemitter3.default {
     (0, import_utils.assert)(bindingUtil, `No binding util found for type "${type}"`);
     return bindingUtil;
   }
+  /* ------------------- Asset Utils ------------------ */
+  /**
+   * A map of asset utility classes by asset type.
+   *
+   * @public
+   */
+  assetUtils = {};
+  getAssetUtil(arg) {
+    const type = typeof arg === "string" ? arg : arg.type;
+    const assetUtil = (0, import_utils.getOwnProperty)(this.assetUtils, type);
+    (0, import_utils.assert)(assetUtil, `No asset util found for type "${type}"`);
+    return assetUtil;
+  }
+  /**
+   * Returns true if the editor has an asset util for the given asset type.
+   *
+   * @public
+   */
+  hasAssetUtil(arg) {
+    const type = typeof arg === "string" ? arg : arg.type;
+    return (0, import_utils.hasOwnProperty)(this.assetUtils, type);
+  }
+  /**
+   * Get the asset util that accepts the given MIME type.
+   * Returns null if no registered asset util accepts the MIME type.
+   *
+   * @public
+   */
+  getAssetUtilForMimeType(mimeType) {
+    for (const util of Object.values(this.assetUtils)) {
+      if (util && util.acceptsMimeType(mimeType)) {
+        return util;
+      }
+    }
+    return null;
+  }
   /* --------------------- History -------------------- */
   /**
    * A manager for the editor's history.
@@ -749,6 +965,7 @@ class Editor extends import_eventemitter3.default {
     this._flushEventsForTick(0);
     this.complete();
     this.history.undo();
+    this.performance._notifyUndoRedo("undo", this.history.getNumUndos(), this.history.getNumRedos());
     return this;
   }
   canUndo() {
@@ -771,6 +988,7 @@ class Editor extends import_eventemitter3.default {
     this._flushEventsForTick(0);
     this.complete();
     this.history.redo();
+    this.performance._notifyUndoRedo("redo", this.history.getNumUndos(), this.history.getNumRedos());
     return this;
   }
   canRedo() {
@@ -2821,6 +3039,76 @@ class Editor extends import_eventemitter3.default {
     const currentPageId = this.getCurrentPageId();
     return this.getCollaborators().filter((c) => c.currentPageId === currentPageId);
   }
+  // Attribution
+  /**
+   * Get the current user's ID for attribution purposes.
+   * Also ensures a `user:` record exists in the store for the current user.
+   * Returns `null` when the user store has no current user.
+   *
+   * @public
+   */
+  getAttributionUserId() {
+    const user = this.store.props.users.currentUser.get();
+    if (!user) return null;
+    this._ensureUserRecord(user);
+    return import_tlschema.UserRecordType.parseId(user.id);
+  }
+  /**
+   * Ensure a user record exists in the store for the given user,
+   * updating it if the data has changed.
+   *
+   * @internal
+   */
+  _ensureUserRecord(user) {
+    const existing = this.store.get(user.id);
+    if (existing && existing.name === user.name && existing.color === user.color && existing.imageUrl === user.imageUrl && existing.meta === user.meta) {
+      return;
+    }
+    this.run(
+      () => {
+        this.store.put([user]);
+      },
+      { history: "ignore" }
+    );
+  }
+  /**
+   * Resolve a display name for a user ID. Asks the
+   * {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
+   * falling back to the `user:` record in the store.
+   *
+   * @public
+   */
+  getAttributionDisplayName(userId) {
+    if (!userId) return null;
+    return this.store.props.users.resolve(userId).get()?.name ?? this.store.get((0, import_tlschema.createUserId)(userId))?.name ?? null;
+  }
+  /**
+   * Resolve a user record by ID. Asks the
+   * {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
+   * falling back to the `user:` record in the store.
+   *
+   * @public
+   */
+  getAttributionUser(userId) {
+    if (!userId) return null;
+    return this.store.props.users.resolve(userId).get() ?? this.store.get((0, import_tlschema.createUserId)(userId)) ?? null;
+  }
+  /**
+   * Collect user IDs referenced by a set of shapes via shape-specific props
+   * (e.g. `textFirstEditedBy` on notes).
+   *
+   * @internal
+   */
+  _getReferencedUserIds(shapes) {
+    const userIds = /* @__PURE__ */ new Set();
+    for (const shape of shapes) {
+      const util = this.getShapeUtil(shape);
+      for (const id of util.getReferencedUserIds(shape)) {
+        userIds.add(id);
+      }
+    }
+    return userIds;
+  }
   // Following
   // When we are 'locked on' to a user, our camera is derived from their camera.
   _isLockedOnFollowingUser = (0, import_state.atom)("isLockedOnFollowingUser", false);
@@ -6534,12 +6822,22 @@ class Editor extends import_eventemitter3.default {
         if (!asset) continue;
         assets.push(asset);
       }
+      const users = [];
+      const seenUserIds = /* @__PURE__ */ new Set();
+      for (const userId of this._getReferencedUserIds(shapes2)) {
+        const recordId = (0, import_tlschema.createUserId)(userId);
+        if (seenUserIds.has(recordId)) continue;
+        seenUserIds.add(recordId);
+        const user = this.store.get(recordId);
+        if (user) users.push(user);
+      }
       return {
         schema: this.store.schema.serialize(),
         shapes: shapes2,
         rootShapeIds,
         bindings,
-        assets
+        assets,
+        users
       };
     });
   }
@@ -6589,13 +6887,15 @@ class Editor extends import_eventemitter3.default {
     const assets = [];
     const shapes = [];
     const bindings = [];
+    const users = [];
     const store = {
       store: {
         ...Object.fromEntries(content.assets.map((asset) => [asset.id, asset])),
         ...Object.fromEntries(content.shapes.map((shape) => [shape.id, shape])),
         ...Object.fromEntries(
           content.bindings?.map((bindings2) => [bindings2.id, bindings2]) ?? []
-        )
+        ),
+        ...Object.fromEntries(content.users?.map((user) => [user.id, user]) ?? [])
       },
       schema: content.schema
     };
@@ -6617,6 +6917,19 @@ class Editor extends import_eventemitter3.default {
           bindings.push(record);
           break;
         }
+        case "user": {
+          users.push(record);
+          break;
+        }
+      }
+    }
+    if (users.length > 0) {
+      const existingUserIds = new Set(
+        this.store.allRecords().filter((r) => r.typeName === "user").map((r) => r.id)
+      );
+      const usersToCreate = users.filter((u) => !existingUserIds.has(u.id));
+      if (usersToCreate.length > 0) {
+        this.store.put(usersToCreate);
       }
     }
     const shapeIdMap = new Map(
@@ -7582,6 +7895,7 @@ class Editor extends import_eventemitter3.default {
               ),
               { immediate: true }
             );
+            this.performance._notifyCameraOperation("zooming");
             this.emit("event", info);
             return;
           }
@@ -7643,6 +7957,7 @@ class Editor extends import_eventemitter3.default {
                 immediate: true
               });
               this.maybeTrackPerformance("Zooming");
+              this.performance._notifyCameraOperation("zooming");
               this.root.handleEvent(info);
               this.emit("event", info);
               return;
@@ -7652,6 +7967,7 @@ class Editor extends import_eventemitter3.default {
                 immediate: true
               });
               this.maybeTrackPerformance("Panning");
+              this.performance._notifyCameraOperation("panning");
               this.root.handleEvent(info);
               this.emit("event", info);
               return;
@@ -7717,6 +8033,7 @@ class Editor extends import_eventemitter3.default {
                 immediate: true
               });
               this.maybeTrackPerformance("Panning");
+              this.performance._notifyCameraOperation("panning");
               return;
             }
             if (inputs.getIsPointing() && !inputs.getIsDragging() && import_Vec.Vec.Dist2(inputs.getOriginPagePoint(), inputs.getCurrentPagePoint()) * this.getZoomLevel() > (instanceState.isCoarsePointer ? this.options.coarseDragDistanceSquared : this.options.dragDistanceSquared) / cz) {