@tldraw/editor 4.6.0-next.20de11b7e238 → 4.6.0-next.241e87d4700a

package/dist-esm/lib/editor/assets/AssetUtil.mjs

@@ -0,0 +1,46 @@
+class AssetUtil {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  /** Configure this asset util's {@link AssetUtil.options | `options`}. */
+  static configure(options) {
+    return class extends this {
+      // @ts-expect-error
+      options = { ...this.options, ...options };
+    };
+  }
+  /**
+   * Options for this asset util. Override this to provide customization options for your asset.
+   * Use {@link AssetUtil.configure} to customize existing asset utils.
+   */
+  options = {};
+  static props;
+  static migrations;
+  /**
+   * The type of the asset util, which should match the asset's type.
+   */
+  static type;
+  /**
+   * Get the MIME types that this asset type supports.
+   * Return an empty array if this asset type doesn't support files (e.g. bookmarks).
+   */
+  getSupportedMimeTypes() {
+    return [];
+  }
+  /**
+   * Check whether this asset type accepts a given MIME type.
+   */
+  acceptsMimeType(mimeType) {
+    return this.getSupportedMimeTypes().includes(mimeType);
+  }
+  /**
+   * Create an asset from a file. Return null if this asset type can't handle the file.
+   */
+  async getAssetFromFile(_file, _assetId) {
+    return null;
+  }
+}
+export {
+  AssetUtil
+};
+//# sourceMappingURL=AssetUtil.mjs.map

package/dist-esm/lib/editor/assets/AssetUtil.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/editor/assets/AssetUtil.ts"],
+  "sourcesContent": ["import { LegacyMigrations, MigrationSequence } from '@tldraw/store'\nimport {\n\tRecordProps,\n\tTLAsset,\n\tTLAssetId,\n\tTLPropsMigrations,\n\tTLUnknownAsset,\n} from '@tldraw/tlschema'\nimport type { Editor } from '../Editor'\n\n/** @public */\nexport interface TLAssetUtilConstructor<\n\tT extends TLAsset = TLAsset,\n\tU extends AssetUtil<T> = AssetUtil<T>,\n> {\n\tnew (editor: Editor): U\n\ttype: T['type']\n\tprops?: RecordProps<T>\n\tmigrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence\n}\n\n/**\n * Abstract base class for defining asset-type-specific behavior.\n *\n * Each asset type (image, video, bookmark, etc.) has a corresponding AssetUtil that handles\n * type-specific operations like determining supported MIME types and creating assets from files.\n *\n * @public\n */\nexport abstract class AssetUtil<Asset extends TLAsset = TLAsset> {\n\t/** Configure this asset util's {@link AssetUtil.options | `options`}. */\n\tstatic configure<T extends TLAssetUtilConstructor<any, any>>(\n\t\tthis: T,\n\t\toptions: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never\n\t): T {\n\t\t// @ts-expect-error -- typescript has no idea what's going on here but it's fine\n\t\treturn class extends this {\n\t\t\t// @ts-expect-error\n\t\t\toptions = { ...this.options, ...options }\n\t\t}\n\t}\n\n\tconstructor(public editor: Editor) {}\n\n\t/**\n\t * Options for this asset util. Override this to provide customization options for your asset.\n\t * Use {@link AssetUtil.configure} to customize existing asset utils.\n\t */\n\toptions = {}\n\n\tstatic props?: RecordProps<TLUnknownAsset>\n\tstatic migrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence\n\n\t/**\n\t * The type of the asset util, which should match the asset's type.\n\t */\n\tstatic type: string\n\n\t/**\n\t * Get the default props for an asset of this type.\n\t */\n\tabstract getDefaultProps(): Asset['props']\n\n\t/**\n\t * Get the MIME types that this asset type supports.\n\t * Return an empty array if this asset type doesn't support files (e.g. bookmarks).\n\t */\n\tgetSupportedMimeTypes(): readonly string[] {\n\t\treturn []\n\t}\n\n\t/**\n\t * Check whether this asset type accepts a given MIME type.\n\t */\n\tacceptsMimeType(mimeType: string): boolean {\n\t\treturn this.getSupportedMimeTypes().includes(mimeType)\n\t}\n\n\t/**\n\t * Create an asset from a file. Return null if this asset type can't handle the file.\n\t */\n\tasync getAssetFromFile(_file: File, _assetId: TLAssetId): Promise<Asset | null> {\n\t\treturn null\n\t}\n}\n"],
+  "mappings": "AA6BO,MAAe,UAA2C;AAAA,EAahE,YAAmB,QAAgB;AAAhB;AAAA,EAAiB;AAAA;AAAA,EAXpC,OAAO,UAEN,SACI;AAEJ,WAAO,cAAc,KAAK;AAAA;AAAA,MAEzB,UAAU,EAAE,GAAG,KAAK,SAAS,GAAG,QAAQ;AAAA,IACzC;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,UAAU,CAAC;AAAA,EAEX,OAAO;AAAA,EACP,OAAO;AAAA;AAAA;AAAA;AAAA,EAKP,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAWP,wBAA2C;AAC1C,WAAO,CAAC;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB,UAA2B;AAC1C,WAAO,KAAK,sBAAsB,EAAE,SAAS,QAAQ;AAAA,EACtD;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,iBAAiB,OAAa,UAA4C;AAC/E,WAAO;AAAA,EACR;AACD;",
+  "names": []
+}

package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/editor/managers/FontManager/FontManager.ts"],
-  "sourcesContent": ["import { computed, EMPTY_ARRAY, transact } from '@tldraw/state'\nimport { AtomMap } from '@tldraw/store'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport {\n\tareArraysShallowEqual,\n\tcompact,\n\tFileHelpers,\n\tmapObjectMapValues,\n\tobjectMapEntries,\n} from '@tldraw/utils'\nimport type { Editor } from '../../Editor'\n\n/**\n * Represents the `src` property of a {@link TLFontFace}.\n * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.\n * @public\n */\nexport interface TLFontFaceSource {\n\t/**\n\t * A URL from which to load the font. If the value here is a key in\n\t * {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead.\n\t */\n\turl: string\n\tformat?: string\n\ttech?: string\n}\n\n/**\n * A font face that can be used in the editor. The properties of this are largely the same as the\n * ones in the\n * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.\n * @public\n */\nexport interface TLFontFace {\n\t/**\n\t * How this font can be referred to in CSS.\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.\n\t */\n\treadonly family: string\n\t/**\n\t * The source of the font. This\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.\n\t */\n\treadonly src: TLFontFaceSource\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.\n\t */\n\treadonly ascentOverride?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.\n\t */\n\treadonly descentOverride?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.\n\t */\n\treadonly stretch?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.\n\t */\n\treadonly style?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.\n\t */\n\treadonly weight?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.\n\t */\n\treadonly featureSettings?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.\n\t */\n\treadonly lineGapOverride?: string\n\t/**\n\t * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.\n\t */\n\treadonly unicodeRange?: string\n}\n\ninterface FontState {\n\treadonly state: 'loading' | 'ready' | 'error'\n\treadonly instance: FontFace\n\treadonly loadingPromise: Promise<void>\n}\n\n/** @public */\nexport class FontManager {\n\tconstructor(\n\t\tprivate readonly editor: Editor,\n\t\tprivate readonly assetUrls?: { [key: string]: string | undefined }\n\t) {\n\t\tthis.shapeFontFacesCache = editor.store.createComputedCache(\n\t\t\t'shape font faces',\n\t\t\t(shape: TLShape) => {\n\t\t\t\tconst shapeUtil = this.editor.getShapeUtil(shape)\n\t\t\t\treturn shapeUtil.getFontFaces(shape)\n\t\t\t},\n\t\t\t{\n\t\t\t\tareResultsEqual: areArraysShallowEqual,\n\t\t\t\tareRecordsEqual: (a, b) => a.props === b.props && a.meta === b.meta,\n\t\t\t}\n\t\t)\n\n\t\tthis.shapeFontLoadStateCache = editor.store.createCache<(FontState | null)[], TLShape>(\n\t\t\t(id: TLShapeId) => {\n\t\t\t\tconst fontFacesComputed = computed('font faces', () => this.getShapeFontFaces(id))\n\t\t\t\treturn computed(\n\t\t\t\t\t'font load state',\n\t\t\t\t\t() => {\n\t\t\t\t\t\tconst states = fontFacesComputed.get().map((face) => this.getFontState(face))\n\t\t\t\t\t\treturn states\n\t\t\t\t\t},\n\t\t\t\t\t{ isEqual: areArraysShallowEqual }\n\t\t\t\t)\n\t\t\t}\n\t\t)\n\t}\n\n\tprivate readonly shapeFontFacesCache\n\tprivate readonly shapeFontLoadStateCache\n\n\tgetShapeFontFaces(shape: TLShape | TLShapeId): TLFontFace[] {\n\t\tconst shapeId = typeof shape === 'string' ? shape : shape.id\n\t\treturn this.shapeFontFacesCache.get(shapeId) ?? EMPTY_ARRAY\n\t}\n\n\ttrackFontsForShape(shape: TLShape | TLShapeId) {\n\t\tconst shapeId = typeof shape === 'string' ? shape : shape.id\n\t\tthis.shapeFontLoadStateCache.get(shapeId)\n\t}\n\n\tasync loadRequiredFontsForCurrentPage(limit = Infinity) {\n\t\tconst neededFonts = new Set<TLFontFace>()\n\t\tfor (const shapeId of this.editor.getCurrentPageShapeIds()) {\n\t\t\tfor (const font of this.getShapeFontFaces(this.editor.getShape(shapeId)!)) {\n\t\t\t\tneededFonts.add(font)\n\t\t\t}\n\t\t}\n\n\t\tif (neededFonts.size > limit) {\n\t\t\treturn\n\t\t}\n\n\t\tconst promises = Array.from(neededFonts, (font) => this.ensureFontIsLoaded(font))\n\t\tawait Promise.all(promises)\n\t}\n\n\tprivate readonly fontStates = new AtomMap<TLFontFace, FontState>('font states')\n\tprivate getFontState(font: TLFontFace): FontState | null {\n\t\treturn this.fontStates.get(font) ?? null\n\t}\n\n\tensureFontIsLoaded(font: TLFontFace): Promise<void> {\n\t\tconst existingState = this.getFontState(font)\n\t\tif (existingState) return existingState.loadingPromise\n\n\t\tconst instance = this.findOrCreateFontFace(font)\n\t\tconst state: FontState = {\n\t\t\tstate: 'loading',\n\t\t\tinstance,\n\t\t\tloadingPromise: instance\n\t\t\t\t.load()\n\t\t\t\t.then(() => {\n\t\t\t\t\tthis.editor.getContainerDocument().fonts.add(instance)\n\t\t\t\t\tthis.fontStates.update(font, (s) => ({ ...s, state: 'ready' }))\n\t\t\t\t})\n\t\t\t\t.catch((err) => {\n\t\t\t\t\tconsole.error(err)\n\t\t\t\t\tthis.fontStates.update(font, (s) => ({ ...s, state: 'error' }))\n\t\t\t\t}),\n\t\t}\n\n\t\tthis.fontStates.set(font, state)\n\t\treturn state.loadingPromise\n\t}\n\n\tprivate fontsToLoad = new Set<TLFontFace>()\n\trequestFonts(fonts: TLFontFace[]) {\n\t\tif (!this.fontsToLoad.size) {\n\t\t\tqueueMicrotask(() => {\n\t\t\t\tif (this.editor.isDisposed) return\n\t\t\t\tconst toLoad = this.fontsToLoad\n\t\t\t\tthis.fontsToLoad = new Set()\n\t\t\t\ttransact(() => {\n\t\t\t\t\tfor (const font of toLoad) {\n\t\t\t\t\t\tthis.ensureFontIsLoaded(font)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\t\tfor (const font of fonts) {\n\t\t\tthis.fontsToLoad.add(font)\n\t\t}\n\t}\n\n\tprivate findOrCreateFontFace(font: TLFontFace) {\n\t\tconst fonts = this.editor.getContainerDocument().fonts\n\t\tfor (const existing of fonts) {\n\t\t\tif (\n\t\t\t\texisting.family === font.family &&\n\t\t\t\tobjectMapEntries(defaultFontFaceDescriptors).every(\n\t\t\t\t\t([key, defaultValue]) => existing[key] === (font[key] ?? defaultValue)\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn existing\n\t\t\t}\n\t\t}\n\n\t\tconst url = this.assetUrls?.[font.src.url] ?? font.src.url\n\t\tconst instance = new FontFace(font.family, `url(${JSON.stringify(url)})`, {\n\t\t\t...mapObjectMapValues(defaultFontFaceDescriptors, (key) => font[key]),\n\t\t\tdisplay: 'swap',\n\t\t})\n\n\t\tfonts.add(instance)\n\n\t\treturn instance\n\t}\n\n\tasync toEmbeddedCssDeclaration(font: TLFontFace) {\n\t\tconst url = this.assetUrls?.[font.src.url] ?? font.src.url\n\t\tconst dataUrl = await FileHelpers.urlToDataUrl(url)\n\n\t\tconst src = compact([\n\t\t\t`url(\"${dataUrl}\")`,\n\t\t\tfont.src.format ? `format(${font.src.format})` : null,\n\t\t\tfont.src.tech ? `tech(${font.src.tech})` : null,\n\t\t]).join(' ')\n\t\treturn compact([\n\t\t\t`@font-face {`,\n\t\t\t`  font-family: \"${font.family}\";`,\n\t\t\tfont.ascentOverride ? `  ascent-override: ${font.ascentOverride};` : null,\n\t\t\tfont.descentOverride ? `  descent-override: ${font.descentOverride};` : null,\n\t\t\tfont.stretch ? `  font-stretch: ${font.stretch};` : null,\n\t\t\tfont.style ? `  font-style: ${font.style};` : null,\n\t\t\tfont.weight ? `  font-weight: ${font.weight};` : null,\n\t\t\tfont.featureSettings ? `  font-feature-settings: ${font.featureSettings};` : null,\n\t\t\tfont.lineGapOverride ? `  line-gap-override: ${font.lineGapOverride};` : null,\n\t\t\tfont.unicodeRange ? `  unicode-range: ${font.unicodeRange};` : null,\n\t\t\t`  src: ${src};`,\n\t\t\t`}`,\n\t\t]).join('\\n')\n\t}\n}\n\n// From https://drafts.csswg.org/css-font-loading/#fontface-interface\nconst defaultFontFaceDescriptors = {\n\tstyle: 'normal',\n\tweight: 'normal',\n\tstretch: 'normal',\n\tunicodeRange: 'U+0-10FFFF',\n\tfeatureSettings: 'normal',\n\tascentOverride: 'normal',\n\tdescentOverride: 'normal',\n\tlineGapOverride: 'normal',\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { computed, EMPTY_ARRAY, transact } from '@tldraw/state'\nimport { AtomMap } from '@tldraw/store'\nimport { TLFontFace, TLShape, TLShapeId } from '@tldraw/tlschema'\nimport {\n\tareArraysShallowEqual,\n\tcompact,\n\tFileHelpers,\n\tmapObjectMapValues,\n\tobjectMapEntries,\n} from '@tldraw/utils'\nimport type { Editor } from '../../Editor'\n\ninterface FontState {\n\treadonly state: 'loading' | 'ready' | 'error'\n\treadonly instance: FontFace\n\treadonly loadingPromise: Promise<void>\n}\n\n/** @public */\nexport class FontManager {\n\tconstructor(\n\t\tprivate readonly editor: Editor,\n\t\tprivate readonly assetUrls?: { [key: string]: string | undefined }\n\t) {\n\t\tthis.shapeFontFacesCache = editor.store.createComputedCache(\n\t\t\t'shape font faces',\n\t\t\t(shape: TLShape) => {\n\t\t\t\tconst shapeUtil = this.editor.getShapeUtil(shape)\n\t\t\t\treturn shapeUtil.getFontFaces(shape)\n\t\t\t},\n\t\t\t{\n\t\t\t\tareResultsEqual: areArraysShallowEqual,\n\t\t\t\tareRecordsEqual: (a, b) => a.props === b.props && a.meta === b.meta,\n\t\t\t}\n\t\t)\n\n\t\tthis.shapeFontLoadStateCache = editor.store.createCache<(FontState | null)[], TLShape>(\n\t\t\t(id: TLShapeId) => {\n\t\t\t\tconst fontFacesComputed = computed('font faces', () => this.getShapeFontFaces(id))\n\t\t\t\treturn computed(\n\t\t\t\t\t'font load state',\n\t\t\t\t\t() => {\n\t\t\t\t\t\tconst states = fontFacesComputed.get().map((face) => this.getFontState(face))\n\t\t\t\t\t\treturn states\n\t\t\t\t\t},\n\t\t\t\t\t{ isEqual: areArraysShallowEqual }\n\t\t\t\t)\n\t\t\t}\n\t\t)\n\t}\n\n\tprivate readonly shapeFontFacesCache\n\tprivate readonly shapeFontLoadStateCache\n\n\tgetShapeFontFaces(shape: TLShape | TLShapeId): TLFontFace[] {\n\t\tconst shapeId = typeof shape === 'string' ? shape : shape.id\n\t\treturn this.shapeFontFacesCache.get(shapeId) ?? EMPTY_ARRAY\n\t}\n\n\ttrackFontsForShape(shape: TLShape | TLShapeId) {\n\t\tconst shapeId = typeof shape === 'string' ? shape : shape.id\n\t\tthis.shapeFontLoadStateCache.get(shapeId)\n\t}\n\n\tasync loadRequiredFontsForCurrentPage(limit = Infinity) {\n\t\tconst neededFonts = new Set<TLFontFace>()\n\t\tfor (const shapeId of this.editor.getCurrentPageShapeIds()) {\n\t\t\tfor (const font of this.getShapeFontFaces(this.editor.getShape(shapeId)!)) {\n\t\t\t\tneededFonts.add(font)\n\t\t\t}\n\t\t}\n\n\t\tif (neededFonts.size > limit) {\n\t\t\treturn\n\t\t}\n\n\t\tconst promises = Array.from(neededFonts, (font) => this.ensureFontIsLoaded(font))\n\t\tawait Promise.all(promises)\n\t}\n\n\tprivate readonly fontStates = new AtomMap<TLFontFace, FontState>('font states')\n\tprivate getFontState(font: TLFontFace): FontState | null {\n\t\treturn this.fontStates.get(font) ?? null\n\t}\n\n\tensureFontIsLoaded(font: TLFontFace): Promise<void> {\n\t\tconst existingState = this.getFontState(font)\n\t\tif (existingState) return existingState.loadingPromise\n\n\t\tconst instance = this.findOrCreateFontFace(font)\n\t\tconst state: FontState = {\n\t\t\tstate: 'loading',\n\t\t\tinstance,\n\t\t\tloadingPromise: instance\n\t\t\t\t.load()\n\t\t\t\t.then(() => {\n\t\t\t\t\tthis.editor.getContainerDocument().fonts.add(instance)\n\t\t\t\t\tthis.fontStates.update(font, (s) => ({ ...s, state: 'ready' }))\n\t\t\t\t})\n\t\t\t\t.catch((err) => {\n\t\t\t\t\tconsole.error(err)\n\t\t\t\t\tthis.fontStates.update(font, (s) => ({ ...s, state: 'error' }))\n\t\t\t\t}),\n\t\t}\n\n\t\tthis.fontStates.set(font, state)\n\t\treturn state.loadingPromise\n\t}\n\n\tprivate fontsToLoad = new Set<TLFontFace>()\n\trequestFonts(fonts: TLFontFace[]) {\n\t\tif (!this.fontsToLoad.size) {\n\t\t\tqueueMicrotask(() => {\n\t\t\t\tif (this.editor.isDisposed) return\n\t\t\t\tconst toLoad = this.fontsToLoad\n\t\t\t\tthis.fontsToLoad = new Set()\n\t\t\t\ttransact(() => {\n\t\t\t\t\tfor (const font of toLoad) {\n\t\t\t\t\t\tthis.ensureFontIsLoaded(font)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\t\tfor (const font of fonts) {\n\t\t\tthis.fontsToLoad.add(font)\n\t\t}\n\t}\n\n\tprivate findOrCreateFontFace(font: TLFontFace) {\n\t\tconst fonts = this.editor.getContainerDocument().fonts\n\t\tfor (const existing of fonts) {\n\t\t\tif (\n\t\t\t\texisting.family === font.family &&\n\t\t\t\tobjectMapEntries(defaultFontFaceDescriptors).every(\n\t\t\t\t\t([key, defaultValue]) => existing[key] === (font[key] ?? defaultValue)\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn existing\n\t\t\t}\n\t\t}\n\n\t\tconst url = this.assetUrls?.[font.src.url] ?? font.src.url\n\t\tconst instance = new FontFace(font.family, `url(${JSON.stringify(url)})`, {\n\t\t\t...mapObjectMapValues(defaultFontFaceDescriptors, (key) => font[key]),\n\t\t\tdisplay: 'swap',\n\t\t})\n\n\t\tfonts.add(instance)\n\n\t\treturn instance\n\t}\n\n\tasync toEmbeddedCssDeclaration(font: TLFontFace) {\n\t\tconst url = this.assetUrls?.[font.src.url] ?? font.src.url\n\t\tconst dataUrl = await FileHelpers.urlToDataUrl(url)\n\n\t\tconst src = compact([\n\t\t\t`url(\"${dataUrl}\")`,\n\t\t\tfont.src.format ? `format(${font.src.format})` : null,\n\t\t\tfont.src.tech ? `tech(${font.src.tech})` : null,\n\t\t]).join(' ')\n\t\treturn compact([\n\t\t\t`@font-face {`,\n\t\t\t`  font-family: \"${font.family}\";`,\n\t\t\tfont.ascentOverride ? `  ascent-override: ${font.ascentOverride};` : null,\n\t\t\tfont.descentOverride ? `  descent-override: ${font.descentOverride};` : null,\n\t\t\tfont.stretch ? `  font-stretch: ${font.stretch};` : null,\n\t\t\tfont.style ? `  font-style: ${font.style};` : null,\n\t\t\tfont.weight ? `  font-weight: ${font.weight};` : null,\n\t\t\tfont.featureSettings ? `  font-feature-settings: ${font.featureSettings};` : null,\n\t\t\tfont.lineGapOverride ? `  line-gap-override: ${font.lineGapOverride};` : null,\n\t\t\tfont.unicodeRange ? `  unicode-range: ${font.unicodeRange};` : null,\n\t\t\t`  src: ${src};`,\n\t\t\t`}`,\n\t\t]).join('\\n')\n\t}\n}\n\n// From https://drafts.csswg.org/css-font-loading/#fontface-interface\nconst defaultFontFaceDescriptors = {\n\tstyle: 'normal',\n\tweight: 'normal',\n\tstretch: 'normal',\n\tunicodeRange: 'U+0-10FFFF',\n\tfeatureSettings: 'normal',\n\tascentOverride: 'normal',\n\tdescentOverride: 'normal',\n\tlineGapOverride: 'normal',\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs

@@ -0,0 +1,60 @@
+function safeMark(name, detail) {
+  try {
+    performance.mark(name, detail ? { detail } : void 0);
+  } catch {
+    performance.mark(name);
+  }
+}
+class PerformanceApiAdapter {
+  cleanups = [];
+  constructor(perfManager) {
+    this.cleanups.push(
+      perfManager.on("interaction-start", (event) => {
+        safeMark(`tldraw:interaction:${event.name}:start`, { path: event.path });
+      })
+    );
+    this.cleanups.push(
+      perfManager.on("interaction-end", (event) => {
+        const startMark = `tldraw:interaction:${event.name}:start`;
+        const endMark = `tldraw:interaction:${event.name}:end`;
+        safeMark(endMark, {
+          path: event.path,
+          fps: event.fps,
+          frameCount: event.frameCount,
+          shapeCount: event.shapeCount
+        });
+        try {
+          performance.measure(`tldraw:interaction:${event.name}`, startMark, endMark);
+        } catch {
+        }
+      })
+    );
+    this.cleanups.push(
+      perfManager.on("camera-start", (event) => {
+        safeMark(`tldraw:camera:${event.type}:start`);
+      })
+    );
+    this.cleanups.push(
+      perfManager.on("camera-end", (event) => {
+        const startMark = `tldraw:camera:${event.type}:start`;
+        const endMark = `tldraw:camera:${event.type}:end`;
+        safeMark(endMark, { fps: event.fps, shapeCount: event.shapeCount });
+        try {
+          performance.measure(`tldraw:camera:${event.type}`, startMark, endMark);
+        } catch {
+        }
+      })
+    );
+  }
+  /** Remove all listeners and stop piping events. @public */
+  dispose() {
+    for (const cleanup of this.cleanups) {
+      cleanup();
+    }
+    this.cleanups.length = 0;
+  }
+}
+export {
+  PerformanceApiAdapter
+};
+//# sourceMappingURL=PerformanceApiAdapter.mjs.map

package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.ts"],
+  "sourcesContent": ["import type { PerformanceManager } from './PerformanceManager'\n\n/** Wrap performance.mark with try/catch \u2014 `detail` option may throw in Safari/Firefox. */\nfunction safeMark(name: string, detail?: Record<string, unknown>) {\n\ttry {\n\t\tperformance.mark(name, detail ? { detail } : undefined)\n\t} catch {\n\t\tperformance.mark(name)\n\t}\n}\n\n/**\n * Optional adapter that pipes PerformanceManager events into browser\n * `performance.mark()` / `performance.measure()` for DevTools integration.\n *\n * Tree-shakeable \u2014 only included if imported.\n *\n * @example\n * ```ts\n * const adapter = new PerformanceApiAdapter(editor.performance)\n * // ... later\n * adapter.dispose()\n * ```\n *\n * @public\n */\nexport class PerformanceApiAdapter {\n\tprivate cleanups: (() => void)[] = []\n\n\tconstructor(perfManager: PerformanceManager) {\n\t\tthis.cleanups.push(\n\t\t\tperfManager.on('interaction-start', (event) => {\n\t\t\t\tsafeMark(`tldraw:interaction:${event.name}:start`, { path: event.path })\n\t\t\t})\n\t\t)\n\n\t\tthis.cleanups.push(\n\t\t\tperfManager.on('interaction-end', (event) => {\n\t\t\t\tconst startMark = `tldraw:interaction:${event.name}:start`\n\t\t\t\tconst endMark = `tldraw:interaction:${event.name}:end`\n\t\t\t\tsafeMark(endMark, {\n\t\t\t\t\tpath: event.path,\n\t\t\t\t\tfps: event.fps,\n\t\t\t\t\tframeCount: event.frameCount,\n\t\t\t\t\tshapeCount: event.shapeCount,\n\t\t\t\t})\n\t\t\t\ttry {\n\t\t\t\t\tperformance.measure(`tldraw:interaction:${event.name}`, startMark, endMark)\n\t\t\t\t} catch {\n\t\t\t\t\t// start mark may not exist if adapter attached mid-interaction\n\t\t\t\t}\n\t\t\t})\n\t\t)\n\n\t\tthis.cleanups.push(\n\t\t\tperfManager.on('camera-start', (event) => {\n\t\t\t\tsafeMark(`tldraw:camera:${event.type}:start`)\n\t\t\t})\n\t\t)\n\n\t\tthis.cleanups.push(\n\t\t\tperfManager.on('camera-end', (event) => {\n\t\t\t\tconst startMark = `tldraw:camera:${event.type}:start`\n\t\t\t\tconst endMark = `tldraw:camera:${event.type}:end`\n\t\t\t\tsafeMark(endMark, { fps: event.fps, shapeCount: event.shapeCount })\n\t\t\t\ttry {\n\t\t\t\t\tperformance.measure(`tldraw:camera:${event.type}`, startMark, endMark)\n\t\t\t\t} catch {\n\t\t\t\t\t// start mark may not exist\n\t\t\t\t}\n\t\t\t})\n\t\t)\n\t}\n\n\t/** Remove all listeners and stop piping events. @public */\n\tdispose() {\n\t\tfor (const cleanup of this.cleanups) {\n\t\t\tcleanup()\n\t\t}\n\t\tthis.cleanups.length = 0\n\t}\n}\n"],
+  "mappings": "AAGA,SAAS,SAAS,MAAc,QAAkC;AACjE,MAAI;AACH,gBAAY,KAAK,MAAM,SAAS,EAAE,OAAO,IAAI,MAAS;AAAA,EACvD,QAAQ;AACP,gBAAY,KAAK,IAAI;AAAA,EACtB;AACD;AAiBO,MAAM,sBAAsB;AAAA,EAC1B,WAA2B,CAAC;AAAA,EAEpC,YAAY,aAAiC;AAC5C,SAAK,SAAS;AAAA,MACb,YAAY,GAAG,qBAAqB,CAAC,UAAU;AAC9C,iBAAS,sBAAsB,MAAM,IAAI,UAAU,EAAE,MAAM,MAAM,KAAK,CAAC;AAAA,MACxE,CAAC;AAAA,IACF;AAEA,SAAK,SAAS;AAAA,MACb,YAAY,GAAG,mBAAmB,CAAC,UAAU;AAC5C,cAAM,YAAY,sBAAsB,MAAM,IAAI;AAClD,cAAM,UAAU,sBAAsB,MAAM,IAAI;AAChD,iBAAS,SAAS;AAAA,UACjB,MAAM,MAAM;AAAA,UACZ,KAAK,MAAM;AAAA,UACX,YAAY,MAAM;AAAA,UAClB,YAAY,MAAM;AAAA,QACnB,CAAC;AACD,YAAI;AACH,sBAAY,QAAQ,sBAAsB,MAAM,IAAI,IAAI,WAAW,OAAO;AAAA,QAC3E,QAAQ;AAAA,QAER;AAAA,MACD,CAAC;AAAA,IACF;AAEA,SAAK,SAAS;AAAA,MACb,YAAY,GAAG,gBAAgB,CAAC,UAAU;AACzC,iBAAS,iBAAiB,MAAM,IAAI,QAAQ;AAAA,MAC7C,CAAC;AAAA,IACF;AAEA,SAAK,SAAS;AAAA,MACb,YAAY,GAAG,cAAc,CAAC,UAAU;AACvC,cAAM,YAAY,iBAAiB,MAAM,IAAI;AAC7C,cAAM,UAAU,iBAAiB,MAAM,IAAI;AAC3C,iBAAS,SAAS,EAAE,KAAK,MAAM,KAAK,YAAY,MAAM,WAAW,CAAC;AAClE,YAAI;AACH,sBAAY,QAAQ,iBAAiB,MAAM,IAAI,IAAI,WAAW,OAAO;AAAA,QACtE,QAAQ;AAAA,QAER;AAAA,MACD,CAAC;AAAA,IACF;AAAA,EACD;AAAA;AAAA,EAGA,UAAU;AACT,eAAW,WAAW,KAAK,UAAU;AACpC,cAAQ;AAAA,IACT;AACA,SAAK,SAAS,SAAS;AAAA,EACxB;AACD;",
+  "names": []
+}

package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs

@@ -0,0 +1,438 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { bind } from "@tldraw/utils";
+import EventEmitter from "eventemitter3";
+function percentile(sorted, p) {
+  const idx = Math.ceil(p * sorted.length) - 1;
+  return sorted[Math.max(0, idx)];
+}
+function computeFrameTimeStats(frameTimes) {
+  if (frameTimes.length === 0) return { avg: 0, median: 0, p95: 0, p99: 0, min: 0, max: 0 };
+  const sorted = [...frameTimes].sort((a, b) => a - b);
+  const sum = sorted.reduce((a, b) => a + b, 0);
+  return {
+    avg: sum / sorted.length,
+    median: percentile(sorted, 0.5),
+    p95: percentile(sorted, 0.95),
+    p99: percentile(sorted, 0.99),
+    min: sorted[0],
+    max: sorted[sorted.length - 1]
+  };
+}
+function toLoafEntry(entry) {
+  const e = entry;
+  if (typeof e.duration !== "number") return null;
+  return {
+    startTime: e.startTime,
+    duration: e.duration,
+    blockingDuration: e.blockingDuration ?? 0,
+    scripts: (e.scripts ?? []).map((s) => ({
+      sourceURL: s.sourceURL ?? "",
+      invoker: s.invoker ?? "",
+      duration: s.duration ?? 0
+    }))
+  };
+}
+class PerformanceManager {
+  /** @internal */
+  emitter = new EventEmitter();
+  editor;
+  // Active interaction tracking
+  activeInteraction = null;
+  // Active camera tracking
+  activeCamera = null;
+  // Lazy listener cleanup functions
+  frameCleanup = null;
+  shapeCreatedCleanup = null;
+  shapeEditedCleanup = null;
+  shapeDeletedCleanup = null;
+  // LoAF observer
+  loafObserver = null;
+  constructor(editor) {
+    this.editor = editor;
+  }
+  /**
+   * Subscribe to a performance event. Returns an unsubscribe function.
+   *
+   * @example
+   * ```ts
+   * const unsub = editor.performance.on('interaction-end', (event) => {
+   *   sendToAnalytics({ name: event.name, fps: event.fps, p95: event.p95FrameTime })
+   * })
+   * // later: unsub()
+   * ```
+   *
+   * @public
+   */
+  on(event, fn) {
+    this.emitter.on(event, fn);
+    this._maybeAttachLazyListeners(event);
+    return () => {
+      this.emitter.off(event, fn);
+      this._maybeDetachLazyListeners(event);
+    };
+  }
+  /**
+   * Subscribe to a performance event once. The listener is removed after the first invocation.
+   * Returns an unsubscribe function for early removal.
+   *
+   * @public
+   */
+  once(event, fn) {
+    const wrapped = (...args) => {
+      ;
+      fn(...args);
+      this._maybeDetachLazyListeners(event);
+    };
+    this.emitter.once(event, wrapped);
+    this._maybeAttachLazyListeners(event);
+    return () => {
+      this.emitter.off(event, wrapped);
+      this._maybeDetachLazyListeners(event);
+    };
+  }
+  /** @internal */
+  dispose() {
+    if (this.activeCamera?.timeout) clearTimeout(this.activeCamera.timeout);
+    this.activeInteraction = null;
+    this.activeCamera = null;
+    this.frameCleanup?.();
+    this.frameCleanup = null;
+    this.shapeCreatedCleanup?.();
+    this.shapeCreatedCleanup = null;
+    this.shapeEditedCleanup?.();
+    this.shapeEditedCleanup = null;
+    this.shapeDeletedCleanup?.();
+    this.shapeDeletedCleanup = null;
+    this._stopLoafObserver();
+    this.emitter.removeAllListeners();
+  }
+  // --- Internal notification methods ---
+  /** @internal */
+  _notifyInteractionStart(name, path) {
+    if (this.emitter.listenerCount("interaction-start") === 0 && this.emitter.listenerCount("interaction-end") === 0) {
+      return;
+    }
+    if (this.activeInteraction) {
+      console.warn(
+        `[tldraw] New interaction '${name}' started while '${this.activeInteraction.name}' was still active`
+      );
+    }
+    const selectedShapeTypes = {};
+    for (const shape of this.editor.getSelectedShapes()) {
+      selectedShapeTypes[shape.type] = (selectedShapeTypes[shape.type] || 0) + 1;
+    }
+    this.activeInteraction = {
+      name,
+      path,
+      startTime: performance.now(),
+      frameTimes: [],
+      selectedShapeTypes,
+      loafEntries: []
+    };
+    const event = {
+      name,
+      path,
+      timestamp: performance.now()
+    };
+    this.emitter.emit("interaction-start", event);
+  }
+  /** @internal */
+  _notifyInteractionEnd() {
+    const interaction = this.activeInteraction;
+    if (!interaction) return;
+    this.activeInteraction = null;
+    if (this.emitter.listenerCount("interaction-end") === 0) return;
+    const duration = performance.now() - interaction.startTime;
+    const stats = computeFrameTimeStats(interaction.frameTimes);
+    const event = {
+      name: interaction.name,
+      path: interaction.path,
+      duration,
+      fps: interaction.frameTimes.length > 0 ? interaction.frameTimes.length / duration * 1e3 : 0,
+      frameCount: interaction.frameTimes.length,
+      avgFrameTime: stats.avg,
+      medianFrameTime: stats.median,
+      p95FrameTime: stats.p95,
+      p99FrameTime: stats.p99,
+      minFrameTime: stats.min,
+      maxFrameTime: stats.max,
+      frameTimes: interaction.frameTimes,
+      shapeCount: this.editor.getCurrentPageShapeIds().size,
+      selectedShapeTypes: interaction.selectedShapeTypes,
+      longAnimationFrames: interaction.loafEntries.length > 0 ? interaction.loafEntries : void 0,
+      zoomLevel: this.editor.getCamera().z,
+      timestamp: performance.now()
+    };
+    this.emitter.emit("interaction-end", event);
+  }
+  /** @internal */
+  _notifyCameraOperation(type) {
+    if (this.emitter.listenerCount("camera-start") === 0 && this.emitter.listenerCount("camera-end") === 0) {
+      return;
+    }
+    if (this.activeCamera) {
+      if (this.activeCamera.timeout) {
+        clearTimeout(this.activeCamera.timeout);
+      }
+      if (this.activeCamera.type !== type) {
+        this._endCameraSession();
+        this._startCameraSession(type);
+      } else {
+        this.activeCamera.timeout = this.editor.timers.setTimeout(
+          () => this._endCameraSession(),
+          50
+        );
+      }
+    } else {
+      this._startCameraSession(type);
+    }
+  }
+  /** @internal */
+  _notifyUndoRedo(type, undoDepth, redoDepth) {
+    if (this.emitter.listenerCount(type) === 0) return;
+    const event = {
+      type,
+      undoDepth,
+      redoDepth
+    };
+    this.emitter.emit(type, event);
+  }
+  // --- Private helpers ---
+  _startCameraSession(type) {
+    this.activeCamera = {
+      type,
+      startTime: performance.now(),
+      frameTimes: [],
+      timeout: this.editor.timers.setTimeout(() => this._endCameraSession(), 50),
+      loafEntries: []
+    };
+    if (this.emitter.listenerCount("camera-start") > 0) {
+      const event = {
+        type,
+        timestamp: performance.now()
+      };
+      this.emitter.emit("camera-start", event);
+    }
+  }
+  _endCameraSession() {
+    const camera = this.activeCamera;
+    if (!camera) return;
+    this.activeCamera = null;
+    if (camera.timeout) clearTimeout(camera.timeout);
+    if (this.emitter.listenerCount("camera-end") === 0) return;
+    const duration = performance.now() - camera.startTime;
+    const stats = computeFrameTimeStats(camera.frameTimes);
+    const viewportBounds = this.editor.getViewportScreenBounds();
+    const totalShapes = this.editor.getCurrentPageShapeIds().size;
+    const culledShapeCount = this.editor.getCulledShapes().size;
+    const event = {
+      type: camera.type,
+      duration,
+      fps: camera.frameTimes.length > 0 ? camera.frameTimes.length / duration * 1e3 : 0,
+      frameCount: camera.frameTimes.length,
+      avgFrameTime: stats.avg,
+      medianFrameTime: stats.median,
+      p95FrameTime: stats.p95,
+      p99FrameTime: stats.p99,
+      minFrameTime: stats.min,
+      maxFrameTime: stats.max,
+      frameTimes: camera.frameTimes,
+      shapeCount: totalShapes,
+      viewportWidth: viewportBounds.w,
+      viewportHeight: viewportBounds.h,
+      longAnimationFrames: camera.loafEntries.length > 0 ? camera.loafEntries : void 0,
+      visibleShapeCount: totalShapes - culledShapeCount,
+      culledShapeCount,
+      zoomLevel: this.editor.getCamera().z,
+      timestamp: performance.now()
+    };
+    this.emitter.emit("camera-end", event);
+  }
+  _onFrame(elapsed) {
+    if (this.activeInteraction) {
+      this.activeInteraction.frameTimes.push(elapsed);
+    }
+    if (this.activeCamera) {
+      this.activeCamera.frameTimes.push(elapsed);
+    }
+    if (this.emitter.listenerCount("frame") > 0) {
+      const totalShapes = this.editor.getCurrentPageShapeIds().size;
+      const culledShapes = this.editor.getCulledShapes();
+      const culledCount = culledShapes.size;
+      const event = {
+        elapsed,
+        shapeCount: totalShapes,
+        culledShapeCount: culledCount,
+        visibleShapeCount: totalShapes - culledCount
+      };
+      this.emitter.emit("frame", event);
+    }
+  }
+  _onShapesCreated(records) {
+    if (this.emitter.listenerCount("shapes-created") === 0) return;
+    const shapeTypes = {};
+    for (const record of records) {
+      if (record.typeName === "shape") {
+        shapeTypes[record.type] = (shapeTypes[record.type] || 0) + 1;
+      }
+    }
+    const count = Object.values(shapeTypes).reduce((a, b) => a + b, 0);
+    if (count === 0) return;
+    const event = {
+      operation: "create",
+      count,
+      shapeTypes,
+      timestamp: performance.now()
+    };
+    this.emitter.emit("shapes-created", event);
+  }
+  _onShapesEdited(records) {
+    if (this.emitter.listenerCount("shapes-updated") === 0) return;
+    const shapeTypes = {};
+    for (const record of records) {
+      if (record.typeName === "shape") {
+        shapeTypes[record.type] = (shapeTypes[record.type] || 0) + 1;
+      }
+    }
+    const count = Object.values(shapeTypes).reduce((a, b) => a + b, 0);
+    if (count === 0) return;
+    const event = {
+      operation: "update",
+      count,
+      shapeTypes,
+      timestamp: performance.now()
+    };
+    this.emitter.emit("shapes-updated", event);
+  }
+  _onShapesDeleted(ids) {
+    if (this.emitter.listenerCount("shapes-deleted") === 0) return;
+    const shapeTypes = {};
+    for (const id of ids) {
+      const shape = this.editor.getShape(id);
+      if (shape) {
+        shapeTypes[shape.type] = (shapeTypes[shape.type] || 0) + 1;
+      }
+    }
+    const event = {
+      operation: "delete",
+      count: ids.length,
+      shapeTypes,
+      timestamp: performance.now()
+    };
+    this.emitter.emit("shapes-deleted", event);
+  }
+  // --- LoAF observer ---
+  _startLoafObserver() {
+    if (typeof PerformanceObserver === "undefined") return;
+    try {
+      const supported = PerformanceObserver.supportedEntryTypes;
+      if (!supported?.includes("long-animation-frame")) return;
+    } catch {
+      return;
+    }
+    this.loafObserver = new PerformanceObserver((list) => {
+      const isInteractionActive = this.activeInteraction !== null;
+      const isCameraActive = this.activeCamera !== null;
+      if (!isInteractionActive && !isCameraActive) return;
+      for (const entry of list.getEntries()) {
+        const loaf = toLoafEntry(entry);
+        if (!loaf) continue;
+        if (isInteractionActive) {
+          this.activeInteraction.loafEntries.push(loaf);
+        }
+        if (isCameraActive) {
+          this.activeCamera.loafEntries.push(loaf);
+        }
+      }
+    });
+    this.loafObserver.observe({ type: "long-animation-frame", buffered: false });
+  }
+  _stopLoafObserver() {
+    if (this.loafObserver) {
+      this.loafObserver.disconnect();
+      this.loafObserver = null;
+    }
+  }
+  // --- Lazy listener management ---
+  _needsFrameListener() {
+    return this.emitter.listenerCount("frame") > 0 || this.emitter.listenerCount("interaction-start") > 0 || this.emitter.listenerCount("interaction-end") > 0 || this.emitter.listenerCount("camera-start") > 0 || this.emitter.listenerCount("camera-end") > 0;
+  }
+  _needsLoafObserver() {
+    return this.emitter.listenerCount("interaction-end") > 0 || this.emitter.listenerCount("camera-end") > 0;
+  }
+  _maybeAttachLazyListeners(event) {
+    if (!this.frameCleanup && (event === "frame" || event === "interaction-start" || event === "interaction-end" || event === "camera-start" || event === "camera-end")) {
+      if (this._needsFrameListener()) {
+        this.editor.on("frame", this._onFrame);
+        this.frameCleanup = () => this.editor.off("frame", this._onFrame);
+      }
+    }
+    if (!this.loafObserver && (event === "interaction-end" || event === "camera-end")) {
+      if (this._needsLoafObserver()) {
+        this._startLoafObserver();
+      }
+    }
+    if (!this.shapeCreatedCleanup && event === "shapes-created") {
+      this.editor.on("created-shapes", this._onShapesCreated);
+      this.shapeCreatedCleanup = () => this.editor.off("created-shapes", this._onShapesCreated);
+    }
+    if (!this.shapeEditedCleanup && event === "shapes-updated") {
+      this.editor.on("edited-shapes", this._onShapesEdited);
+      this.shapeEditedCleanup = () => this.editor.off("edited-shapes", this._onShapesEdited);
+    }
+    if (!this.shapeDeletedCleanup && event === "shapes-deleted") {
+      this.editor.on("deleted-shapes", this._onShapesDeleted);
+      this.shapeDeletedCleanup = () => this.editor.off("deleted-shapes", this._onShapesDeleted);
+    }
+  }
+  _maybeDetachLazyListeners(event) {
+    if (this.frameCleanup && (event === "frame" || event === "interaction-start" || event === "interaction-end" || event === "camera-start" || event === "camera-end")) {
+      if (!this._needsFrameListener()) {
+        this.frameCleanup();
+        this.frameCleanup = null;
+      }
+    }
+    if (this.loafObserver && (event === "interaction-end" || event === "camera-end")) {
+      if (!this._needsLoafObserver()) {
+        this._stopLoafObserver();
+      }
+    }
+    if (this.shapeCreatedCleanup && event === "shapes-created" && this.emitter.listenerCount("shapes-created") === 0) {
+      this.shapeCreatedCleanup();
+      this.shapeCreatedCleanup = null;
+    }
+    if (this.shapeEditedCleanup && event === "shapes-updated" && this.emitter.listenerCount("shapes-updated") === 0) {
+      this.shapeEditedCleanup();
+      this.shapeEditedCleanup = null;
+    }
+    if (this.shapeDeletedCleanup && event === "shapes-deleted" && this.emitter.listenerCount("shapes-deleted") === 0) {
+      this.shapeDeletedCleanup();
+      this.shapeDeletedCleanup = null;
+    }
+  }
+}
+__decorateClass([
+  bind
+], PerformanceManager.prototype, "_onFrame", 1);
+__decorateClass([
+  bind
+], PerformanceManager.prototype, "_onShapesCreated", 1);
+__decorateClass([
+  bind
+], PerformanceManager.prototype, "_onShapesEdited", 1);
+__decorateClass([
+  bind
+], PerformanceManager.prototype, "_onShapesDeleted", 1);
+export {
+  PerformanceManager
+};
+//# sourceMappingURL=PerformanceManager.mjs.map