@tldraw/editor 5.4.1 → 5.5.0-canary.003bf5951274

package/dist-esm/lib/TldrawEditor.mjs

@@ -31,7 +31,7 @@ import { EditorProvider, useEditor } from "./hooks/useEditor.mjs";
 import { EditorComponentsProvider } from "./hooks/useEditorComponents.mjs";
 import { useEvent } from "./hooks/useEvent.mjs";
 import { useForceUpdate } from "./hooks/useForceUpdate.mjs";
-import { useShallowObjectIdentity } from "./hooks/useIdentity.mjs";
+import { useDeepObjectIdentity, useShallowObjectIdentity } from "./hooks/useIdentity.mjs";
 import { useLocalStore } from "./hooks/useLocalStore.mjs";
 import { useRefState } from "./hooks/useRefState.mjs";
 import { useStateAttribute } from "./hooks/useStateAttribute.mjs";
@@ -63,16 +63,19 @@ const TldrawEditor = memo(function TldrawEditor2({
   const [portalHost, setPortalHost] = useState(null);
   const user = useMemo(() => _user ?? createTLCurrentUser(), [_user]);
   const ErrorFallback = components?.ErrorFallback === void 0 ? DefaultErrorFallback : components?.ErrorFallback;
-  const mergedOptions = useMemo(() => {
-    let result = _options;
-    if (_textOptions) {
-      result = { ...result, text: result?.text ?? _textOptions };
-    }
-    if (_deepLinks !== void 0) {
-      result = { ...result, deepLinks: result?.deepLinks ?? _deepLinks };
-    }
-    return result;
-  }, [_options, _textOptions, _deepLinks]);
+  const camera = useDeepObjectIdentity(_options?.camera);
+  const gridSteps = useDeepObjectIdentity(_options?.gridSteps);
+  const text = useDeepObjectIdentity(_options?.text ?? _textOptions);
+  const mergedDeepLinks = _options?.deepLinks ?? _deepLinks;
+  const deepLinkOptions = useDeepObjectIdentity(
+    mergedDeepLinks === true ? void 0 : mergedDeepLinks
+  );
+  const deepLinks = mergedDeepLinks === true ? true : deepLinkOptions;
+  let mergedOptions = _options;
+  if (camera !== void 0) mergedOptions = { ...mergedOptions, camera };
+  if (gridSteps !== void 0) mergedOptions = { ...mergedOptions, gridSteps };
+  if (text !== void 0) mergedOptions = { ...mergedOptions, text };
+  if (deepLinks !== void 0) mergedOptions = { ...mergedOptions, deepLinks };
   const withDefaults = {
     ...rest,
     shapeUtils: rest.shapeUtils ?? EMPTY_SHAPE_UTILS_ARRAY,
@@ -340,16 +343,17 @@ function TldrawEditorWithReadyStore({
   useEffect(
     function handleFocusOnPointerDownForPreserveFocusMode() {
       if (!editor) return;
+      const container2 = editor.getContainer();
       function handleFocusOnPointerDown() {
         if (!editor) return;
         editor.focus();
       }
-      function handleBlurOnPointerDown() {
+      function handleBlurOnPointerDown(e) {
         if (!editor) return;
+        if (e.composedPath().includes(container2)) return;
         editor.blur();
       }
       if (autoFocus && noAutoFocus()) {
-        const container2 = editor.getContainer();
         container2.addEventListener("pointerdown", handleFocusOnPointerDown);
         container2.ownerDocument.body.addEventListener("pointerdown", handleBlurOnPointerDown);
         return () => {

package/dist-esm/lib/TldrawEditor.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/TldrawEditor.tsx"],
-  "sourcesContent": ["import { MigrationSequence, Store } from '@tldraw/store'\nimport {\n\tTLShape,\n\tTLStore,\n\tTLStoreSnapshot,\n\tTLTheme,\n\tTLThemeId,\n\tTLThemes,\n\tregisterColorsFromThemes,\n\tregisterFontsFromThemes,\n} from '@tldraw/tlschema'\nimport { annotateError, Required } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport React, {\n\tmemo,\n\tReactNode,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n\tuseSyncExternalStore,\n} from 'react'\nimport { version } from '../version'\nimport { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'\nimport { EditorPortalProvider } from './components/EditorPortal'\nimport { OptionalErrorBoundary } from './components/ErrorBoundary'\nimport { createTLCurrentUser, TLCurrentUser } from './config/createTLCurrentUser'\nimport { TLStoreBaseOptions } from './config/createTLStore'\nimport { TLAnyAssetUtilConstructor } from './config/defaultAssets'\nimport { TLAnyBindingUtilConstructor } from './config/defaultBindings'\nimport { TLAnyShapeUtilConstructor } from './config/defaultShapes'\nimport { TLEditorSnapshot } from './config/TLEditorSnapshot'\nimport { Editor } from './editor/Editor'\nimport { resolveThemes } from './editor/managers/ThemeManager/ThemeManager'\nimport { TLAnyOverlayUtilConstructor } from './editor/overlays/OverlayUtil'\nimport { TLStateNodeConstructor } from './editor/tools/StateNode'\nimport { TLCameraOptions } from './editor/types/misc-types'\nimport { useEditorComponents } from './hooks/EditorComponentsContext'\nimport type { TLEditorComponents } from './hooks/EditorComponentsContext'\nimport { ContainerProvider, useContainer } from './hooks/useContainer'\nimport { useCursor } from './hooks/useCursor'\nimport { useDarkMode } from './hooks/useDarkMode'\nimport { EditorProvider, useEditor } from './hooks/useEditor'\nimport { EditorComponentsProvider } from './hooks/useEditorComponents'\nimport { useEvent } from './hooks/useEvent'\nimport { useForceUpdate } from './hooks/useForceUpdate'\nimport { useShallowObjectIdentity } from './hooks/useIdentity'\nimport { useLocalStore } from './hooks/useLocalStore'\nimport { useRefState } from './hooks/useRefState'\nimport { useStateAttribute } from './hooks/useStateAttribute'\nimport { useZoomCss } from './hooks/useZoomCss'\nimport { LicenseProvider, useLicenseContext } from './license/LicenseProvider'\nimport { Watermark } from './license/Watermark'\nimport { TldrawOptions } from './options'\nimport { TLDeepLinkOptions } from './utils/deepLinks'\nimport { getGlobalDocument, getGlobalWindow } from './utils/dom'\nimport { TLTextOptions } from './utils/richText'\nimport { TLStoreWithStatus } from './utils/sync/StoreWithStatus'\n\n/**\n * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when passing in a\n * `TLStore` directly. If you would like tldraw to create a store for you, use\n * {@link TldrawEditorWithoutStoreProps}.\n *\n * @public\n */\nexport interface TldrawEditorWithStoreProps {\n\t/**\n\t * The store to use in the editor.\n\t */\n\tstore: TLStore | TLStoreWithStatus\n}\n\n/**\n * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when not passing in a\n * `TLStore` directly. If you would like to pass in a store directly, use\n * {@link TldrawEditorWithStoreProps}.\n *\n * @public\n */\nexport interface TldrawEditorWithoutStoreProps extends TLStoreBaseOptions {\n\tstore?: undefined\n\n\t/**\n\t * Additional migrations to use in the store\n\t */\n\tmigrations?: readonly MigrationSequence[]\n\n\t/**\n\t * A starting snapshot of data to pre-populate the store. Do not supply both this and\n\t * `initialData`.\n\t */\n\tsnapshot?: TLEditorSnapshot | TLStoreSnapshot\n\n\t/**\n\t * If you would like to persist the store to the browser's local IndexedDB storage and sync it\n\t * across tabs, provide a key here. Each key represents a single tldraw document.\n\t */\n\tpersistenceKey?: string\n\n\tsessionId?: string\n}\n\n/** @public */\nexport type TldrawEditorStoreProps = TldrawEditorWithStoreProps | TldrawEditorWithoutStoreProps\n\n/**\n * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components.\n *\n * @public\n **/\nexport type TldrawEditorProps = TldrawEditorBaseProps & TldrawEditorStoreProps\n\n/**\n * Base props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components.\n *\n * @public\n */\nexport interface TldrawEditorBaseProps {\n\t/**\n\t * The component's children.\n\t */\n\tchildren?: ReactNode\n\n\t/**\n\t * An array of shape utils to use in the editor.\n\t */\n\tshapeUtils?: readonly TLAnyShapeUtilConstructor[]\n\n\t/**\n\t * An array of binding utils to use in the editor.\n\t */\n\tbindingUtils?: readonly TLAnyBindingUtilConstructor[]\n\n\t/**\n\t * An array of asset utils to use in the editor.\n\t */\n\tassetUtils?: readonly TLAnyAssetUtilConstructor[]\n\n\t/**\n\t * An array of overlay utils to use in the editor for canvas overlay UI elements.\n\t */\n\toverlayUtils?: readonly TLAnyOverlayUtilConstructor[]\n\n\t/**\n\t * An array of tools to add to the editor's state chart.\n\t */\n\ttools?: readonly TLStateNodeConstructor[]\n\n\t/**\n\t * Whether to automatically focus the editor when it mounts.\n\t */\n\tautoFocus?: boolean\n\n\t/**\n\t * Overrides for the editor's components, such as handles, collaborator cursors, etc.\n\t */\n\tcomponents?: TLEditorComponents\n\n\t/**\n\t * Called when the editor has mounted.\n\t */\n\tonMount?: TLOnMountHandler\n\n\t/**\n\t * The editor's initial state (usually the id of the first active tool).\n\t */\n\tinitialState?: string\n\n\t/**\n\t * A classname to pass to the editor's container.\n\t */\n\tclassName?: string\n\n\t/**\n\t * The user interacting with the editor.\n\t */\n\tuser?: TLCurrentUser\n\n\t/**\n\t * The editor's color scheme. Defaults to `'light'`.\n\t *\n\t * - `'light'` - Always use light mode.\n\t * - `'dark'` - Always use dark mode.\n\t * - `'system'` - Follow the OS color scheme preference.\n\t */\n\tcolorScheme?: 'light' | 'dark' | 'system'\n\n\t/**\n\t * Named themes for the editor.\n\t */\n\tthemes?: Partial<TLThemes>\n\n\t/**\n\t * The id of the initially active theme. Defaults to `'default'`.\n\t */\n\tinitialTheme?: TLThemeId\n\n\t/**\n\t * Camera options for the editor.\n\t *\n\t * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.\n\t */\n\tcameraOptions?: Partial<TLCameraOptions>\n\n\t/**\n\t * Options for the editor.\n\t */\n\toptions?: Partial<TldrawOptions>\n\n\t/**\n\t * Text options for the editor.\n\t *\n\t * @deprecated Use `options.text` instead. This prop will be removed in a future release.\n\t */\n\ttextOptions?: TLTextOptions\n\n\t/**\n\t * The license key.\n\t */\n\tlicenseKey?: string\n\n\t/**\n\t * Options for syncing the editor's camera state with the URL.\n\t *\n\t * @deprecated Use `options.deepLinks` instead. This prop will be removed in a future release.\n\t */\n\tdeepLinks?: true | TLDeepLinkOptions\n\n\t/**\n\t * Provides a way to hide shapes.\n\t *\n\t * Hidden shapes will not render in the editor, and they will not be eligible for hit test via\n\t * {@link @tldraw/editor#Editor.getShapeAtPoint} and {@link @tldraw/editor#Editor.getShapesAtPoint}. But otherwise they will\n\t * remain in the store and participate in all other operations.\n\t *\n\t * @example\n\t * ```ts\n\t * getShapeVisibility={(shape, editor) => shape.meta.hidden ? 'hidden' : 'inherit'}\n\t * ```\n\t *\n\t * - `'inherit' | undefined` - (default) The shape will be visible unless its parent is hidden.\n\t * - `'hidden'` - The shape will be hidden.\n\t * - `'visible'` - The shape will be visible.\n\t *\n\t * @param shape - The shape to check.\n\t * @param editor - The editor instance.\n\t */\n\tgetShapeVisibility?(\n\t\tshape: TLShape,\n\t\teditor: Editor\n\t): 'visible' | 'hidden' | 'inherit' | null | undefined\n\n\t/**\n\t * The URLs for the fonts to use in the editor.\n\t */\n\tassetUrls?: { fonts?: { [key: string]: string | undefined } }\n}\n\n/**\n * Called when the editor has mounted.\n * @example\n * ```ts\n * <Tldraw onMount={(editor) => editor.selectAll()} />\n * ```\n * @param editor - The editor instance.\n *\n * @public\n */\nexport type TLOnMountHandler = (editor: Editor) => (() => void | undefined) | undefined | void\n\ndeclare global {\n\tinterface Window {\n\t\ttldrawReady: boolean\n\t}\n}\n\nconst EMPTY_SHAPE_UTILS_ARRAY = [] as const\nconst EMPTY_BINDING_UTILS_ARRAY = [] as const\nconst EMPTY_ASSET_UTILS_ARRAY = [] as const\nconst EMPTY_TOOLS_ARRAY = [] as const\n/** @internal */\nexport const TL_CONTAINER_CLASS = 'tl-container'\n\n/** @public @react */\nexport const TldrawEditor = memo(function TldrawEditor({\n\tstore,\n\tcomponents,\n\tclassName,\n\tuser: _user,\n\toptions: _options,\n\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\ttextOptions: _textOptions,\n\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\tdeepLinks: _deepLinks,\n\t...rest\n}: TldrawEditorProps) {\n\t// Register custom colors and fonts before effects run. For external stores,\n\t// users should also pass themes to createTLStore so they are\n\t// registered before data is loaded into the store.\n\tconst resolvedThemes = resolveThemes(rest.themes)\n\tregisterColorsFromThemes(resolvedThemes)\n\tregisterFontsFromThemes(resolvedThemes)\n\n\tconst [container, setContainer] = useState<HTMLElement | null>(null)\n\tconst [portalHost, setPortalHost] = useState<HTMLElement | null>(null)\n\tconst user = useMemo(() => _user ?? createTLCurrentUser(), [_user])\n\n\tconst ErrorFallback =\n\t\tcomponents?.ErrorFallback === undefined ? DefaultErrorFallback : components?.ErrorFallback\n\n\t// Merge deprecated props with options\n\t// options values take precedence over the deprecated props\n\tconst mergedOptions = useMemo(() => {\n\t\tlet result = _options\n\t\tif (_textOptions) {\n\t\t\tresult = { ...result, text: result?.text ?? _textOptions }\n\t\t}\n\t\tif (_deepLinks !== undefined) {\n\t\t\tresult = { ...result, deepLinks: result?.deepLinks ?? _deepLinks }\n\t\t}\n\t\treturn result\n\t}, [_options, _textOptions, _deepLinks])\n\n\t// apply defaults. if you're using the bare @tldraw/editor package, we\n\t// default these to the \"tldraw zero\" configuration. We have different\n\t// defaults applied in tldraw.\n\tconst withDefaults = {\n\t\t...rest,\n\t\tshapeUtils: rest.shapeUtils ?? EMPTY_SHAPE_UTILS_ARRAY,\n\t\tbindingUtils: rest.bindingUtils ?? EMPTY_BINDING_UTILS_ARRAY,\n\t\tassetUtils: rest.assetUtils ?? EMPTY_ASSET_UTILS_ARRAY,\n\t\ttools: rest.tools ?? EMPTY_TOOLS_ARRAY,\n\t\tcomponents,\n\t\toptions: useShallowObjectIdentity(mergedOptions),\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={setContainer}\n\t\t\tdata-tldraw={version}\n\t\t\tdraggable={false}\n\t\t\tclassName={classNames(`${TL_CONTAINER_CLASS} tl-theme__light`, className)}\n\t\t\ttabIndex={-1}\n\t\t\trole=\"application\"\n\t\t\taria-label={_options?.branding ?? 'tldraw'}\n\t\t>\n\t\t\t<OptionalErrorBoundary\n\t\t\t\tfallback={ErrorFallback}\n\t\t\t\tonError={(error) => annotateError(error, { tags: { origin: 'react.tldraw-before-app' } })}\n\t\t\t>\n\t\t\t\t{container && (\n\t\t\t\t\t<LicenseProvider licenseKey={rest.licenseKey}>\n\t\t\t\t\t\t<ContainerProvider container={container}>\n\t\t\t\t\t\t\t<EditorPortalProvider host={portalHost}>\n\t\t\t\t\t\t\t\t<EditorComponentsProvider overrides={components}>\n\t\t\t\t\t\t\t\t\t{store ? (\n\t\t\t\t\t\t\t\t\t\tstore instanceof Store ? (\n\t\t\t\t\t\t\t\t\t\t\t// Store is ready to go, whether externally synced or not\n\t\t\t\t\t\t\t\t\t\t\t<TldrawEditorWithReadyStore {...withDefaults} store={store} user={user} />\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t// Store is a synced store, so handle syncing stages internally\n\t\t\t\t\t\t\t\t\t\t\t<TldrawEditorWithLoadingStore {...withDefaults} store={store} user={user} />\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t// We have no store (it's undefined) so create one and possibly sync it\n\t\t\t\t\t\t\t\t\t\t<TldrawEditorWithOwnStore {...withDefaults} store={store} user={user} />\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</EditorComponentsProvider>\n\t\t\t\t\t\t\t</EditorPortalProvider>\n\t\t\t\t\t\t</ContainerProvider>\n\t\t\t\t\t</LicenseProvider>\n\t\t\t\t)}\n\t\t\t</OptionalErrorBoundary>\n\t\t\t{/* The host for <EditorPortal>, last among the container's children so that anything\n\t\t\t    portaled through it lands after the canvas and the UI \u2014 behind the UI's \"skip to main\n\t\t\t    content\" link in the tab order, which only works while nothing precedes it. */}\n\t\t\t<div className=\"tl-portal-host\" ref={setPortalHost} />\n\t\t</div>\n\t)\n})\n\nfunction TldrawEditorWithOwnStore(\n\tprops: Required<\n\t\tTldrawEditorProps & { store: undefined; user: TLCurrentUser },\n\t\t'shapeUtils' | 'bindingUtils' | 'assetUtils' | 'tools'\n\t>\n) {\n\tconst {\n\t\tdefaultName,\n\t\tsnapshot,\n\t\tinitialData,\n\t\tshapeUtils,\n\t\tbindingUtils,\n\t\tassetUtils,\n\t\tpersistenceKey,\n\t\tsessionId,\n\t\tuser,\n\t\tassets,\n\t\tusers,\n\t\tmigrations,\n\t\tthemes,\n\t} = props\n\n\tconst syncedStore = useLocalStore({\n\t\tshapeUtils,\n\t\tbindingUtils,\n\t\tassetUtils,\n\t\tinitialData,\n\t\tpersistenceKey,\n\t\tsessionId,\n\t\tdefaultName,\n\t\tsnapshot,\n\t\tassets,\n\t\tusers,\n\t\tmigrations,\n\t\tthemes,\n\t})\n\n\treturn <TldrawEditorWithLoadingStore {...props} store={syncedStore} user={user} />\n}\n\nconst TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({\n\tstore,\n\tuser,\n\t...rest\n}: Required<\n\tTldrawEditorProps & { store: TLStoreWithStatus; user: TLCurrentUser },\n\t'shapeUtils' | 'bindingUtils' | 'assetUtils' | 'tools'\n>) {\n\tconst container = useContainer()\n\n\tuseLayoutEffect(() => {\n\t\t// Resolve the scheme the same way UserPreferencesManager.getIsDarkMode will once the\n\t\t// editor mounts, so a 'system' user on a dark OS doesn't get a light loading screen that\n\t\t// flips dark on mount.\n\t\tconst scheme = user.userPreferences.get().colorScheme ?? rest.colorScheme ?? 'light'\n\t\tconst isDark =\n\t\t\tscheme === 'dark' ||\n\t\t\t(scheme === 'system' &&\n\t\t\t\ttypeof window !== 'undefined' &&\n\t\t\t\t!!getGlobalWindow().matchMedia?.('(prefers-color-scheme: dark)').matches)\n\t\tif (isDark) {\n\t\t\tcontainer.classList.remove('tl-theme__light')\n\t\t\tcontainer.classList.add('tl-theme__dark')\n\t\t}\n\t}, [container, user, rest.colorScheme])\n\n\tconst { LoadingScreen } = useEditorComponents()\n\n\tswitch (store.status) {\n\t\tcase 'error': {\n\t\t\t// for error handling, we fall back to the default error boundary.\n\t\t\t// if users want to handle this error differently, they can render\n\t\t\t// their own error screen before the TldrawEditor component\n\t\t\tthrow store.error\n\t\t}\n\t\tcase 'loading': {\n\t\t\treturn LoadingScreen ? <LoadingScreen /> : null\n\t\t}\n\t\tcase 'not-synced': {\n\t\t\tbreak\n\t\t}\n\t\tcase 'synced-local': {\n\t\t\tbreak\n\t\t}\n\t\tcase 'synced-remote': {\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn <TldrawEditorWithReadyStore {...rest} store={store.store} user={user} />\n})\n\nconst noAutoFocus = () => getGlobalDocument().location.search.includes('tldraw_preserve_focus')\n\nfunction TldrawEditorWithReadyStore({\n\tonMount,\n\tchildren,\n\tstore,\n\ttools,\n\tshapeUtils,\n\tbindingUtils,\n\tassetUtils,\n\toverlayUtils,\n\tuser,\n\tinitialState,\n\tautoFocus = true,\n\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\tcameraOptions,\n\toptions,\n\tlicenseKey,\n\tgetShapeVisibility,\n\tcolorScheme,\n\tassetUrls,\n\tthemes,\n\tinitialTheme,\n}: Required<\n\tTldrawEditorProps & {\n\t\tstore: TLStore\n\t\tuser: TLCurrentUser\n\t},\n\t'shapeUtils' | 'bindingUtils' | 'assetUtils' | 'tools'\n>) {\n\tconst { ErrorFallback } = useEditorComponents()\n\tconst container = useContainer()\n\tconst licenseManager = useLicenseContext()\n\n\tconst [editor, setEditor] = useRefState<Editor | null>(null)\n\n\tconst canvasRef = useRef<HTMLDivElement | null>(null)\n\n\tconst _deepLinks = options?.deepLinks\n\tconst deepLinks = useShallowObjectIdentity(_deepLinks === true ? {} : _deepLinks)\n\n\t// props in this ref can be changed without causing the editor to be recreated.\n\tconst editorOptionsRef = useRef({\n\t\t// for these, it's because they're only used when the editor first mounts:\n\t\tautoFocus: autoFocus && !noAutoFocus(),\n\t\tinitialState,\n\t\tcolorScheme,\n\n\t\t// for these, it's because we keep them up to date in a separate effect:\n\t\tcameraOptions,\n\t\tdeepLinks,\n\t\tthemes,\n\t\tinitialTheme,\n\t})\n\n\tuseLayoutEffect(() => {\n\t\teditorOptionsRef.current = {\n\t\t\tautoFocus: autoFocus && !noAutoFocus(),\n\t\t\tinitialState,\n\t\t\tcolorScheme,\n\t\t\tcameraOptions,\n\t\t\tdeepLinks,\n\t\t\tthemes,\n\t\t\tinitialTheme,\n\t\t}\n\t}, [autoFocus, initialState, colorScheme, cameraOptions, deepLinks, themes, initialTheme])\n\n\tuseLayoutEffect(\n\t\t() => {\n\t\t\tconst {\n\t\t\t\tautoFocus,\n\t\t\t\tinitialState,\n\t\t\t\tcolorScheme: initColorScheme,\n\t\t\t\tcameraOptions,\n\t\t\t\tdeepLinks,\n\t\t\t\tthemes,\n\t\t\t\tinitialTheme,\n\t\t\t} = editorOptionsRef.current\n\t\t\tconst editor = new Editor({\n\t\t\t\tstore,\n\t\t\t\tshapeUtils,\n\t\t\t\tbindingUtils,\n\t\t\t\tassetUtils,\n\t\t\t\toverlayUtils,\n\t\t\t\ttools,\n\t\t\t\tgetContainer: () => container,\n\t\t\t\tuser,\n\t\t\t\tinitialState,\n\t\t\t\t// we should check for some kind of query parameter that turns off autofocus\n\t\t\t\tautoFocus,\n\t\t\t\tcameraOptions,\n\t\t\t\toptions,\n\t\t\t\tlicenseKey,\n\t\t\t\tgetShapeVisibility,\n\t\t\t\tcolorScheme: initColorScheme,\n\t\t\t\tfontAssetUrls: assetUrls?.fonts,\n\t\t\t\tthemes: themes,\n\t\t\t\tinitialTheme: initialTheme,\n\t\t\t})\n\t\t\teditor.licenseManager = licenseManager\n\n\t\t\teditor.updateViewportScreenBounds(canvasRef.current ?? container)\n\n\t\t\t// Use the ref here because we only want to do this once when the editor is created.\n\t\t\t// We don't want changes to the urlStateSync prop to trigger creating new editors.\n\t\t\tif (deepLinks) {\n\t\t\t\tif (!deepLinks?.getUrl) {\n\t\t\t\t\t// load the state from window.location\n\t\t\t\t\teditor.navigateToDeepLink(deepLinks)\n\t\t\t\t} else {\n\t\t\t\t\t// load the state from the provided URL\n\t\t\t\t\teditor.navigateToDeepLink({ ...deepLinks, url: deepLinks.getUrl(editor) })\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tsetEditor(editor)\n\n\t\t\treturn () => {\n\t\t\t\teditor.dispose()\n\t\t\t}\n\t\t},\n\t\t// if any of these change, we need to recreate the editor.\n\t\t[\n\t\t\tassetUtils,\n\t\t\tbindingUtils,\n\t\t\tcolorScheme,\n\t\t\tcontainer,\n\t\t\toptions,\n\t\t\toverlayUtils,\n\t\t\tshapeUtils,\n\t\t\tstore,\n\t\t\ttools,\n\t\t\tuser,\n\t\t\tsetEditor,\n\t\t\tlicenseKey,\n\t\t\tlicenseManager,\n\t\t\tgetShapeVisibility,\n\t\t\tassetUrls,\n\t\t]\n\t)\n\n\tuseLayoutEffect(() => {\n\t\tif (!editor) return\n\t\tif (deepLinks) {\n\t\t\treturn editor.registerDeepLinkListener(deepLinks)\n\t\t}\n\t}, [editor, deepLinks])\n\n\t// keep the editor up to date with the latest camera options\n\t// options.cameraOptions takes precedence over the deprecated cameraOptions prop\n\tuseLayoutEffect(() => {\n\t\tif (editor && (cameraOptions || options?.camera)) {\n\t\t\teditor.setCameraOptions({ ...cameraOptions, ...options?.camera })\n\t\t}\n\t}, [editor, cameraOptions, options?.camera])\n\n\t// keep the editor up to date with the latest theme definitions\n\tuseLayoutEffect(() => {\n\t\tif (editor && themes) {\n\t\t\tfor (const def of Object.values(themes) as TLTheme[]) {\n\t\t\t\teditor.updateTheme(def)\n\t\t\t}\n\t\t}\n\t}, [editor, themes])\n\n\tuseLayoutEffect(() => {\n\t\tif (editor && initialTheme) {\n\t\t\teditor.setCurrentTheme(initialTheme)\n\t\t}\n\t}, [editor, initialTheme])\n\n\tconst crashingError = useSyncExternalStore(\n\t\tuseCallback(\n\t\t\t(onStoreChange) => {\n\t\t\t\tif (editor) {\n\t\t\t\t\teditor.on('crash', onStoreChange)\n\t\t\t\t\treturn () => editor.off('crash', onStoreChange)\n\t\t\t\t}\n\t\t\t\treturn () => {\n\t\t\t\t\t// noop\n\t\t\t\t}\n\t\t\t},\n\t\t\t[editor]\n\t\t),\n\t\t() => editor?.getCrashingError() ?? null\n\t)\n\n\t// For our examples site, we want autoFocus to be true on the examples site, but not\n\t// when embedded in our docs site. If present, the `tldraw_preserve_focus` search param\n\t// overrides the `autoFocus` prop and prevents the editor from focusing immediately,\n\t// however here we also add some logic to focus the editor when the user clicks\n\t// on it and unfocus it when the user clicks away from it.\n\tuseEffect(\n\t\tfunction handleFocusOnPointerDownForPreserveFocusMode() {\n\t\t\tif (!editor) return\n\n\t\t\tfunction handleFocusOnPointerDown() {\n\t\t\t\tif (!editor) return\n\t\t\t\teditor.focus()\n\t\t\t}\n\n\t\t\tfunction handleBlurOnPointerDown() {\n\t\t\t\tif (!editor) return\n\t\t\t\teditor.blur()\n\t\t\t}\n\n\t\t\tif (autoFocus && noAutoFocus()) {\n\t\t\t\tconst container = editor.getContainer()\n\t\t\t\tcontainer.addEventListener('pointerdown', handleFocusOnPointerDown)\n\t\t\t\tcontainer.ownerDocument.body.addEventListener('pointerdown', handleBlurOnPointerDown)\n\n\t\t\t\treturn () => {\n\t\t\t\t\tcontainer.removeEventListener('pointerdown', handleFocusOnPointerDown)\n\t\t\t\t\tcontainer.ownerDocument.body.removeEventListener('pointerdown', handleBlurOnPointerDown)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, autoFocus]\n\t)\n\n\tconst [_fontLoadingState, setFontLoadingState] = useState<{\n\t\teditor: Editor\n\t\tisLoaded: boolean\n\t} | null>(null)\n\tlet fontLoadingState = _fontLoadingState\n\tif (editor !== fontLoadingState?.editor) {\n\t\tfontLoadingState = null\n\t}\n\tuseLayoutEffect(() => {\n\t\tif (!editor) return\n\t\tif (editor.options.maxFontsToLoadBeforeRender === 0) {\n\t\t\tsetFontLoadingState({ editor, isLoaded: true })\n\t\t\treturn\n\t\t}\n\n\t\tlet isCancelled = false\n\n\t\tsetFontLoadingState({ editor, isLoaded: false })\n\n\t\teditor.fonts\n\t\t\t.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender)\n\t\t\t.finally(() => {\n\t\t\t\tif (isCancelled) return\n\t\t\t\tsetFontLoadingState({ editor, isLoaded: true })\n\t\t\t})\n\n\t\treturn () => {\n\t\t\tisCancelled = true\n\t\t}\n\t}, [editor])\n\n\tconst { Canvas, LoadingScreen } = useEditorComponents()\n\n\tif (!editor || !fontLoadingState?.isLoaded) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{LoadingScreen && <LoadingScreen />}\n\t\t\t\t<div className=\"tl-canvas\" ref={canvasRef} />\n\t\t\t</>\n\t\t)\n\t}\n\n\treturn (\n\t\t// the top-level tldraw component also renders an error boundary almost\n\t\t// identical to this one. the reason we have two is because this one has\n\t\t// access to `App`, which means that here we can enrich errors with data\n\t\t// from app for reporting, and also still attempt to render the user's\n\t\t// document in the event of an error to reassure them that their work is\n\t\t// not lost.\n\t\t<OptionalErrorBoundary\n\t\t\tfallback={ErrorFallback as any}\n\t\t\tonError={(error) =>\n\t\t\t\teditor.annotateError(error, { origin: 'react.tldraw', willCrashApp: true })\n\t\t\t}\n\t\t>\n\t\t\t{crashingError ? (\n\t\t\t\t<Crash crashingError={crashingError} />\n\t\t\t) : (\n\t\t\t\t<EditorProvider editor={editor}>\n\t\t\t\t\t<Layout onMount={onMount}>\n\t\t\t\t\t\t{children ?? (Canvas ? <Canvas key={editor.contextId} /> : null)}\n\t\t\t\t\t\t<Watermark />\n\t\t\t\t\t</Layout>\n\t\t\t\t</EditorProvider>\n\t\t\t)}\n\t\t</OptionalErrorBoundary>\n\t)\n}\n\nfunction Layout({ children, onMount }: { children: ReactNode; onMount?: TLOnMountHandler }) {\n\tuseZoomCss()\n\tuseCursor()\n\tuseDarkMode()\n\tuseForceUpdate()\n\tuseStateAttribute()\n\tuseOnMount((editor) => {\n\t\tconst teardownStore = editor.store.props.onMount(editor)\n\t\tconst teardownCallback = onMount?.(editor)\n\n\t\treturn () => {\n\t\t\tteardownStore?.()\n\t\t\tteardownCallback?.()\n\t\t}\n\t})\n\n\treturn children\n}\n\nfunction Crash({ crashingError }: { crashingError: unknown }): null {\n\tthrow crashingError\n}\n\n/** @public */\nexport interface LoadingScreenProps {\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport function LoadingScreen({ children }: LoadingScreenProps) {\n\treturn (\n\t\t<div className=\"tl-loading\" aria-busy=\"true\" tabIndex={0}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\n/** @public @react */\nexport function ErrorScreen({ children }: LoadingScreenProps) {\n\treturn <div className=\"tl-loading\">{children}</div>\n}\n\n/** @internal */\nexport function useOnMount(onMount?: TLOnMountHandler) {\n\tconst editor = useEditor()\n\n\tconst onMountEvent = useEvent((editor: Editor) => {\n\t\tlet teardown: (() => void) | void = undefined\n\t\t// If the user wants to do something when the editor mounts, we make sure it doesn't effect the history.\n\t\t// todo: is this reeeeally what we want to do, or should we leave it up to the caller?\n\t\teditor.run(\n\t\t\t() => {\n\t\t\t\tteardown = onMount?.(editor)\n\t\t\t\teditor.emit('mount')\n\t\t\t},\n\t\t\t{ history: 'ignore' }\n\t\t)\n\t\twindow.tldrawReady = true\n\t\treturn () => {\n\t\t\tteardown?.()\n\t\t\t// The editor's component can unmount without the editor being disposed (for example when\n\t\t\t// the canvas is swapped for an error fallback), so emit `unmount` here rather than relying\n\t\t\t// on disposal. If the editor is being disposed, `dispose()` emits `unmount` itself, so we\n\t\t\t// only emit here when it's still mounted and alive.\n\t\t\tif (editor.getIsMounted() && !editor.isDisposed) {\n\t\t\t\teditor.run(() => editor.emit('unmount'), { history: 'ignore' })\n\t\t\t}\n\t\t}\n\t})\n\n\tReact.useLayoutEffect(() => {\n\t\tif (editor) return onMountEvent?.(editor)\n\t}, [editor, onMountEvent])\n}\n"],
-  "mappings": "AAoVE,SAuYC,UAlXQ,KArBT;AApVF,SAA4B,aAAa;AACzC;AAAA,EAOC;AAAA,EACA;AAAA,OACM;AACP,SAAS,qBAA+B;AACxC,OAAO,gBAAgB;AACvB,OAAO;AAAA,EACN;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,eAAe;AACxB,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,2BAA0C;AAMnD,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAI9B,SAAS,2BAA2B;AAEpC,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,iBAAiB;AAC1C,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB,yBAAyB;AACnD,SAAS,iBAAiB;AAG1B,SAAS,mBAAmB,uBAAuB;AA8NnD,MAAM,0BAA0B,CAAC;AACjC,MAAM,4BAA4B,CAAC;AACnC,MAAM,0BAA0B,CAAC;AACjC,MAAM,oBAAoB,CAAC;AAEpB,MAAM,qBAAqB;AAG3B,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,SAAS;AAAA;AAAA,EAET,aAAa;AAAA;AAAA,EAEb,WAAW;AAAA,EACX,GAAG;AACJ,GAAsB;AAIrB,QAAM,iBAAiB,cAAc,KAAK,MAAM;AAChD,2BAAyB,cAAc;AACvC,0BAAwB,cAAc;AAEtC,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,IAAI;AACnE,QAAM,CAAC,YAAY,aAAa,IAAI,SAA6B,IAAI;AACrE,QAAM,OAAO,QAAQ,MAAM,SAAS,oBAAoB,GAAG,CAAC,KAAK,CAAC;AAElE,QAAM,gBACL,YAAY,kBAAkB,SAAY,uBAAuB,YAAY;AAI9E,QAAM,gBAAgB,QAAQ,MAAM;AACnC,QAAI,SAAS;AACb,QAAI,cAAc;AACjB,eAAS,EAAE,GAAG,QAAQ,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC1D;AACA,QAAI,eAAe,QAAW;AAC7B,eAAS,EAAE,GAAG,QAAQ,WAAW,QAAQ,aAAa,WAAW;AAAA,IAClE;AACA,WAAO;AAAA,EACR,GAAG,CAAC,UAAU,cAAc,UAAU,CAAC;AAKvC,QAAM,eAAe;AAAA,IACpB,GAAG;AAAA,IACH,YAAY,KAAK,cAAc;AAAA,IAC/B,cAAc,KAAK,gBAAgB;AAAA,IACnC,YAAY,KAAK,cAAc;AAAA,IAC/B,OAAO,KAAK,SAAS;AAAA,IACrB;AAAA,IACA,SAAS,yBAAyB,aAAa;AAAA,EAChD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,eAAa;AAAA,MACb,WAAW;AAAA,MACX,WAAW,WAAW,GAAG,kBAAkB,oBAAoB,SAAS;AAAA,MACxE,UAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY,UAAU,YAAY;AAAA,MAElC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,UAAU;AAAA,YACV,SAAS,CAAC,UAAU,cAAc,OAAO,EAAE,MAAM,EAAE,QAAQ,0BAA0B,EAAE,CAAC;AAAA,YAEvF,uBACA,oBAAC,mBAAgB,YAAY,KAAK,YACjC,8BAAC,qBAAkB,WAClB,8BAAC,wBAAqB,MAAM,YAC3B,8BAAC,4BAAyB,WAAW,YACnC,kBACA,iBAAiB;AAAA;AAAA,cAEhB,oBAAC,8BAA4B,GAAG,cAAc,OAAc,MAAY;AAAA;AAAA;AAAA,cAGxE,oBAAC,gCAA8B,GAAG,cAAc,OAAc,MAAY;AAAA;AAAA;AAAA,cAI3E,oBAAC,4BAA0B,GAAG,cAAc,OAAc,MAAY;AAAA,eAExE,GACD,GACD,GACD;AAAA;AAAA,QAEF;AAAA,QAIA,oBAAC,SAAI,WAAU,kBAAiB,KAAK,eAAe;AAAA;AAAA;AAAA,EACrD;AAEF,CAAC;AAED,SAAS,yBACR,OAIC;AACD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAEJ,QAAM,cAAc,cAAc;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,SAAO,oBAAC,gCAA8B,GAAG,OAAO,OAAO,aAAa,MAAY;AACjF;AAEA,MAAM,+BAA+B,KAAK,SAAS,0BAA0B;AAAA,EAC5E;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAGG;AACF,QAAM,YAAY,aAAa;AAE/B,kBAAgB,MAAM;AAIrB,UAAM,SAAS,KAAK,gBAAgB,IAAI,EAAE,eAAe,KAAK,eAAe;AAC7E,UAAM,SACL,WAAW,UACV,WAAW,YACX,OAAO,WAAW,eAClB,CAAC,CAAC,gBAAgB,EAAE,aAAa,8BAA8B,EAAE;AACnE,QAAI,QAAQ;AACX,gBAAU,UAAU,OAAO,iBAAiB;AAC5C,gBAAU,UAAU,IAAI,gBAAgB;AAAA,IACzC;AAAA,EACD,GAAG,CAAC,WAAW,MAAM,KAAK,WAAW,CAAC;AAEtC,QAAM,EAAE,eAAAC,eAAc,IAAI,oBAAoB;AAE9C,UAAQ,MAAM,QAAQ;AAAA,IACrB,KAAK,SAAS;AAIb,YAAM,MAAM;AAAA,IACb;AAAA,IACA,KAAK,WAAW;AACf,aAAOA,iBAAgB,oBAACA,gBAAA,EAAc,IAAK;AAAA,IAC5C;AAAA,IACA,KAAK,cAAc;AAClB;AAAA,IACD;AAAA,IACA,KAAK,gBAAgB;AACpB;AAAA,IACD;AAAA,IACA,KAAK,iBAAiB;AACrB;AAAA,IACD;AAAA,EACD;AAEA,SAAO,oBAAC,8BAA4B,GAAG,MAAM,OAAO,MAAM,OAAO,MAAY;AAC9E,CAAC;AAED,MAAM,cAAc,MAAM,kBAAkB,EAAE,SAAS,OAAO,SAAS,uBAAuB;AAE9F,SAAS,2BAA2B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA;AAAA,EAEZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,EAAE,cAAc,IAAI,oBAAoB;AAC9C,QAAM,YAAY,aAAa;AAC/B,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,CAAC,QAAQ,SAAS,IAAI,YAA2B,IAAI;AAE3D,QAAM,YAAY,OAA8B,IAAI;AAEpD,QAAM,aAAa,SAAS;AAC5B,QAAM,YAAY,yBAAyB,eAAe,OAAO,CAAC,IAAI,UAAU;AAGhF,QAAM,mBAAmB,OAAO;AAAA;AAAA,IAE/B,WAAW,aAAa,CAAC,YAAY;AAAA,IACrC;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,kBAAgB,MAAM;AACrB,qBAAiB,UAAU;AAAA,MAC1B,WAAW,aAAa,CAAC,YAAY;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,GAAG,CAAC,WAAW,cAAc,aAAa,eAAe,WAAW,QAAQ,YAAY,CAAC;AAEzF;AAAA,IACC,MAAM;AACL,YAAM;AAAA,QACL,WAAAC;AAAA,QACA,cAAAC;AAAA,QACA,aAAa;AAAA,QACb,eAAAC;AAAA,QACA,WAAAC;AAAA,QACA,QAAAC;AAAA,QACA,cAAAC;AAAA,MACD,IAAI,iBAAiB;AACrB,YAAMC,UAAS,IAAI,OAAO;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,MAAM;AAAA,QACpB;AAAA,QACA,cAAAL;AAAA;AAAA,QAEA,WAAAD;AAAA,QACA,eAAAE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb,eAAe,WAAW;AAAA,QAC1B,QAAQE;AAAA,QACR,cAAcC;AAAA,MACf,CAAC;AACD,MAAAC,QAAO,iBAAiB;AAExB,MAAAA,QAAO,2BAA2B,UAAU,WAAW,SAAS;AAIhE,UAAIH,YAAW;AACd,YAAI,CAACA,YAAW,QAAQ;AAEvB,UAAAG,QAAO,mBAAmBH,UAAS;AAAA,QACpC,OAAO;AAEN,UAAAG,QAAO,mBAAmB,EAAE,GAAGH,YAAW,KAAKA,WAAU,OAAOG,OAAM,EAAE,CAAC;AAAA,QAC1E;AAAA,MACD;AAEA,gBAAUA,OAAM;AAEhB,aAAO,MAAM;AACZ,QAAAA,QAAO,QAAQ;AAAA,MAChB;AAAA,IACD;AAAA;AAAA,IAEA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,kBAAgB,MAAM;AACrB,QAAI,CAAC,OAAQ;AACb,QAAI,WAAW;AACd,aAAO,OAAO,yBAAyB,SAAS;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,QAAQ,SAAS,CAAC;AAItB,kBAAgB,MAAM;AACrB,QAAI,WAAW,iBAAiB,SAAS,SAAS;AACjD,aAAO,iBAAiB,EAAE,GAAG,eAAe,GAAG,SAAS,OAAO,CAAC;AAAA,IACjE;AAAA,EACD,GAAG,CAAC,QAAQ,eAAe,SAAS,MAAM,CAAC;AAG3C,kBAAgB,MAAM;AACrB,QAAI,UAAU,QAAQ;AACrB,iBAAW,OAAO,OAAO,OAAO,MAAM,GAAgB;AACrD,eAAO,YAAY,GAAG;AAAA,MACvB;AAAA,IACD;AAAA,EACD,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,kBAAgB,MAAM;AACrB,QAAI,UAAU,cAAc;AAC3B,aAAO,gBAAgB,YAAY;AAAA,IACpC;AAAA,EACD,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,QAAM,gBAAgB;AAAA,IACrB;AAAA,MACC,CAAC,kBAAkB;AAClB,YAAI,QAAQ;AACX,iBAAO,GAAG,SAAS,aAAa;AAChC,iBAAO,MAAM,OAAO,IAAI,SAAS,aAAa;AAAA,QAC/C;AACA,eAAO,MAAM;AAAA,QAEb;AAAA,MACD;AAAA,MACA,CAAC,MAAM;AAAA,IACR;AAAA,IACA,MAAM,QAAQ,iBAAiB,KAAK;AAAA,EACrC;AAOA;AAAA,IACC,SAAS,+CAA+C;AACvD,UAAI,CAAC,OAAQ;AAEb,eAAS,2BAA2B;AACnC,YAAI,CAAC,OAAQ;AACb,eAAO,MAAM;AAAA,MACd;AAEA,eAAS,0BAA0B;AAClC,YAAI,CAAC,OAAQ;AACb,eAAO,KAAK;AAAA,MACb;AAEA,UAAI,aAAa,YAAY,GAAG;AAC/B,cAAMC,aAAY,OAAO,aAAa;AACtC,QAAAA,WAAU,iBAAiB,eAAe,wBAAwB;AAClE,QAAAA,WAAU,cAAc,KAAK,iBAAiB,eAAe,uBAAuB;AAEpF,eAAO,MAAM;AACZ,UAAAA,WAAU,oBAAoB,eAAe,wBAAwB;AACrE,UAAAA,WAAU,cAAc,KAAK,oBAAoB,eAAe,uBAAuB;AAAA,QACxF;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,SAAS;AAAA,EACnB;AAEA,QAAM,CAAC,mBAAmB,mBAAmB,IAAI,SAGvC,IAAI;AACd,MAAI,mBAAmB;AACvB,MAAI,WAAW,kBAAkB,QAAQ;AACxC,uBAAmB;AAAA,EACpB;AACA,kBAAgB,MAAM;AACrB,QAAI,CAAC,OAAQ;AACb,QAAI,OAAO,QAAQ,+BAA+B,GAAG;AACpD,0BAAoB,EAAE,QAAQ,UAAU,KAAK,CAAC;AAC9C;AAAA,IACD;AAEA,QAAI,cAAc;AAElB,wBAAoB,EAAE,QAAQ,UAAU,MAAM,CAAC;AAE/C,WAAO,MACL,gCAAgC,OAAO,QAAQ,0BAA0B,EACzE,QAAQ,MAAM;AACd,UAAI,YAAa;AACjB,0BAAoB,EAAE,QAAQ,UAAU,KAAK,CAAC;AAAA,IAC/C,CAAC;AAEF,WAAO,MAAM;AACZ,oBAAc;AAAA,IACf;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,EAAE,QAAQ,eAAAR,eAAc,IAAI,oBAAoB;AAEtD,MAAI,CAAC,UAAU,CAAC,kBAAkB,UAAU;AAC3C,WACC,iCACE;AAAA,MAAAA,kBAAiB,oBAACA,gBAAA,EAAc;AAAA,MACjC,oBAAC,SAAI,WAAU,aAAY,KAAK,WAAW;AAAA,OAC5C;AAAA,EAEF;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC;AAAA,MAAC;AAAA;AAAA,QACA,UAAU;AAAA,QACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,gBAAgB,cAAc,KAAK,CAAC;AAAA,QAG1E,0BACA,oBAAC,SAAM,eAA8B,IAErC,oBAAC,kBAAe,QACf,+BAAC,UAAO,SACN;AAAA,uBAAa,SAAS,oBAAC,YAAY,OAAO,SAAW,IAAK;AAAA,UAC3D,oBAAC,aAAU;AAAA,WACZ,GACD;AAAA;AAAA,IAEF;AAAA;AAEF;AAEA,SAAS,OAAO,EAAE,UAAU,QAAQ,GAAwD;AAC3F,aAAW;AACX,YAAU;AACV,cAAY;AACZ,iBAAe;AACf,oBAAkB;AAClB,aAAW,CAAC,WAAW;AACtB,UAAM,gBAAgB,OAAO,MAAM,MAAM,QAAQ,MAAM;AACvD,UAAM,mBAAmB,UAAU,MAAM;AAEzC,WAAO,MAAM;AACZ,sBAAgB;AAChB,yBAAmB;AAAA,IACpB;AAAA,EACD,CAAC;AAED,SAAO;AACR;AAEA,SAAS,MAAM,EAAE,cAAc,GAAqC;AACnE,QAAM;AACP;AAQO,SAAS,cAAc,EAAE,SAAS,GAAuB;AAC/D,SACC,oBAAC,SAAI,WAAU,cAAa,aAAU,QAAO,UAAU,GACrD,UACF;AAEF;AAGO,SAAS,YAAY,EAAE,SAAS,GAAuB;AAC7D,SAAO,oBAAC,SAAI,WAAU,cAAc,UAAS;AAC9C;AAGO,SAAS,WAAW,SAA4B;AACtD,QAAM,SAAS,UAAU;AAEzB,QAAM,eAAe,SAAS,CAACO,YAAmB;AACjD,QAAI,WAAgC;AAGpC,IAAAA,QAAO;AAAA,MACN,MAAM;AACL,mBAAW,UAAUA,OAAM;AAC3B,QAAAA,QAAO,KAAK,OAAO;AAAA,MACpB;AAAA,MACA,EAAE,SAAS,SAAS;AAAA,IACrB;AACA,WAAO,cAAc;AACrB,WAAO,MAAM;AACZ,iBAAW;AAKX,UAAIA,QAAO,aAAa,KAAK,CAACA,QAAO,YAAY;AAChD,QAAAA,QAAO,IAAI,MAAMA,QAAO,KAAK,SAAS,GAAG,EAAE,SAAS,SAAS,CAAC;AAAA,MAC/D;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,gBAAgB,MAAM;AAC3B,QAAI,OAAQ,QAAO,eAAe,MAAM;AAAA,EACzC,GAAG,CAAC,QAAQ,YAAY,CAAC;AAC1B;",
+  "sourcesContent": ["import { MigrationSequence, Store } from '@tldraw/store'\nimport {\n\tTLShape,\n\tTLStore,\n\tTLStoreSnapshot,\n\tTLTheme,\n\tTLThemeId,\n\tTLThemes,\n\tregisterColorsFromThemes,\n\tregisterFontsFromThemes,\n} from '@tldraw/tlschema'\nimport { annotateError, Required } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport React, {\n\tmemo,\n\tReactNode,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n\tuseSyncExternalStore,\n} from 'react'\nimport { version } from '../version'\nimport { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'\nimport { EditorPortalProvider } from './components/EditorPortal'\nimport { OptionalErrorBoundary } from './components/ErrorBoundary'\nimport { createTLCurrentUser, TLCurrentUser } from './config/createTLCurrentUser'\nimport { TLStoreBaseOptions } from './config/createTLStore'\nimport { TLAnyAssetUtilConstructor } from './config/defaultAssets'\nimport { TLAnyBindingUtilConstructor } from './config/defaultBindings'\nimport { TLAnyShapeUtilConstructor } from './config/defaultShapes'\nimport { TLEditorSnapshot } from './config/TLEditorSnapshot'\nimport { Editor } from './editor/Editor'\nimport { resolveThemes } from './editor/managers/ThemeManager/ThemeManager'\nimport { TLAnyOverlayUtilConstructor } from './editor/overlays/OverlayUtil'\nimport { TLStateNodeConstructor } from './editor/tools/StateNode'\nimport { TLCameraOptions } from './editor/types/misc-types'\nimport { useEditorComponents } from './hooks/EditorComponentsContext'\nimport type { TLEditorComponents } from './hooks/EditorComponentsContext'\nimport { ContainerProvider, useContainer } from './hooks/useContainer'\nimport { useCursor } from './hooks/useCursor'\nimport { useDarkMode } from './hooks/useDarkMode'\nimport { EditorProvider, useEditor } from './hooks/useEditor'\nimport { EditorComponentsProvider } from './hooks/useEditorComponents'\nimport { useEvent } from './hooks/useEvent'\nimport { useForceUpdate } from './hooks/useForceUpdate'\nimport { useDeepObjectIdentity, useShallowObjectIdentity } from './hooks/useIdentity'\nimport { useLocalStore } from './hooks/useLocalStore'\nimport { useRefState } from './hooks/useRefState'\nimport { useStateAttribute } from './hooks/useStateAttribute'\nimport { useZoomCss } from './hooks/useZoomCss'\nimport { LicenseProvider, useLicenseContext } from './license/LicenseProvider'\nimport { Watermark } from './license/Watermark'\nimport { TldrawOptions } from './options'\nimport { TLDeepLinkOptions } from './utils/deepLinks'\nimport { getGlobalDocument, getGlobalWindow } from './utils/dom'\nimport { TLTextOptions } from './utils/richText'\nimport { TLStoreWithStatus } from './utils/sync/StoreWithStatus'\n\n/**\n * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when passing in a\n * `TLStore` directly. If you would like tldraw to create a store for you, use\n * {@link TldrawEditorWithoutStoreProps}.\n *\n * @public\n */\nexport interface TldrawEditorWithStoreProps {\n\t/**\n\t * The store to use in the editor.\n\t */\n\tstore: TLStore | TLStoreWithStatus\n}\n\n/**\n * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when not passing in a\n * `TLStore` directly. If you would like to pass in a store directly, use\n * {@link TldrawEditorWithStoreProps}.\n *\n * @public\n */\nexport interface TldrawEditorWithoutStoreProps extends TLStoreBaseOptions {\n\tstore?: undefined\n\n\t/**\n\t * Additional migrations to use in the store\n\t */\n\tmigrations?: readonly MigrationSequence[]\n\n\t/**\n\t * A starting snapshot of data to pre-populate the store. Do not supply both this and\n\t * `initialData`.\n\t */\n\tsnapshot?: TLEditorSnapshot | TLStoreSnapshot\n\n\t/**\n\t * If you would like to persist the store to the browser's local IndexedDB storage and sync it\n\t * across tabs, provide a key here. Each key represents a single tldraw document.\n\t */\n\tpersistenceKey?: string\n\n\tsessionId?: string\n}\n\n/** @public */\nexport type TldrawEditorStoreProps = TldrawEditorWithStoreProps | TldrawEditorWithoutStoreProps\n\n/** @public */\nexport type TldrawEditorProps = TldrawEditorBaseProps & TldrawEditorStoreProps\n\n/**\n * Base props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components.\n *\n * @public\n */\nexport interface TldrawEditorBaseProps {\n\t/**\n\t * The component's children.\n\t */\n\tchildren?: ReactNode\n\n\t/**\n\t * An array of shape utils to use in the editor.\n\t */\n\tshapeUtils?: readonly TLAnyShapeUtilConstructor[]\n\n\t/**\n\t * An array of binding utils to use in the editor.\n\t */\n\tbindingUtils?: readonly TLAnyBindingUtilConstructor[]\n\n\t/**\n\t * An array of asset utils to use in the editor.\n\t */\n\tassetUtils?: readonly TLAnyAssetUtilConstructor[]\n\n\t/**\n\t * An array of overlay utils to use in the editor for canvas overlay UI elements.\n\t */\n\toverlayUtils?: readonly TLAnyOverlayUtilConstructor[]\n\n\t/**\n\t * An array of tools to add to the editor's state chart.\n\t */\n\ttools?: readonly TLStateNodeConstructor[]\n\n\t/**\n\t * Whether to automatically focus the editor when it mounts.\n\t */\n\tautoFocus?: boolean\n\n\t/**\n\t * Overrides for the editor's components, such as handles, collaborator cursors, etc.\n\t */\n\tcomponents?: TLEditorComponents\n\n\t/**\n\t * Called when the editor has mounted.\n\t */\n\tonMount?: TLOnMountHandler\n\n\t/**\n\t * The editor's initial state (usually the id of the first active tool).\n\t */\n\tinitialState?: string\n\n\t/**\n\t * A classname to pass to the editor's container.\n\t */\n\tclassName?: string\n\n\t/**\n\t * The user interacting with the editor.\n\t */\n\tuser?: TLCurrentUser\n\n\t/**\n\t * The editor's color scheme. Defaults to `'light'`.\n\t *\n\t * - `'light'` - Always use light mode.\n\t * - `'dark'` - Always use dark mode.\n\t * - `'system'` - Follow the OS color scheme preference.\n\t */\n\tcolorScheme?: 'light' | 'dark' | 'system'\n\n\t/**\n\t * Named themes for the editor.\n\t */\n\tthemes?: Partial<TLThemes>\n\n\t/**\n\t * The id of the initially active theme. Defaults to `'default'`.\n\t */\n\tinitialTheme?: TLThemeId\n\n\t/**\n\t * Camera options for the editor.\n\t *\n\t * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.\n\t */\n\tcameraOptions?: Partial<TLCameraOptions>\n\n\t/**\n\t * Options for the editor.\n\t */\n\toptions?: Partial<TldrawOptions>\n\n\t/**\n\t * Text options for the editor.\n\t *\n\t * @deprecated Use `options.text` instead. This prop will be removed in a future release.\n\t */\n\ttextOptions?: TLTextOptions\n\n\t/**\n\t * The license key.\n\t */\n\tlicenseKey?: string\n\n\t/**\n\t * Options for syncing the editor's camera state with the URL.\n\t *\n\t * @deprecated Use `options.deepLinks` instead. This prop will be removed in a future release.\n\t */\n\tdeepLinks?: true | TLDeepLinkOptions\n\n\t/**\n\t * Provides a way to hide shapes.\n\t *\n\t * Hidden shapes will not render in the editor, and they will not be eligible for hit test via\n\t * {@link @tldraw/editor#Editor.getShapeAtPoint} and {@link @tldraw/editor#Editor.getShapesAtPoint}. But otherwise they will\n\t * remain in the store and participate in all other operations.\n\t *\n\t * @example\n\t * ```ts\n\t * getShapeVisibility={(shape, editor) => shape.meta.hidden ? 'hidden' : 'inherit'}\n\t * ```\n\t *\n\t * - `'inherit' | undefined` - (default) The shape will be visible unless its parent is hidden.\n\t * - `'hidden'` - The shape will be hidden.\n\t * - `'visible'` - The shape will be visible.\n\t *\n\t * @param shape - The shape to check.\n\t * @param editor - The editor instance.\n\t */\n\tgetShapeVisibility?(\n\t\tshape: TLShape,\n\t\teditor: Editor\n\t): 'visible' | 'hidden' | 'inherit' | null | undefined\n\n\t/**\n\t * The URLs for the fonts to use in the editor.\n\t */\n\tassetUrls?: { fonts?: { [key: string]: string | undefined } }\n}\n\n/**\n * Called when the editor has mounted.\n * @example\n * ```ts\n * <Tldraw onMount={(editor) => editor.selectAll()} />\n * ```\n * @param editor - The editor instance.\n *\n * @public\n */\nexport type TLOnMountHandler = (editor: Editor) => (() => void | undefined) | undefined | void\n\ndeclare global {\n\tinterface Window {\n\t\ttldrawReady: boolean\n\t}\n}\n\nconst EMPTY_SHAPE_UTILS_ARRAY = [] as const\nconst EMPTY_BINDING_UTILS_ARRAY = [] as const\nconst EMPTY_ASSET_UTILS_ARRAY = [] as const\nconst EMPTY_TOOLS_ARRAY = [] as const\n/** @internal */\nexport const TL_CONTAINER_CLASS = 'tl-container'\n\n/**\n * The editor component without any of the default shapes, tools, or UI. It renders the canvas, or\n * your own children in its place, with the shape utils, binding utils, tools, and components you\n * pass in; the `Tldraw` component in the `tldraw` package wraps it with those defaults.\n *\n * @public @react\n */\nexport const TldrawEditor = memo(function TldrawEditor({\n\tstore,\n\tcomponents,\n\tclassName,\n\tuser: _user,\n\toptions: _options,\n\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\ttextOptions: _textOptions,\n\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\tdeepLinks: _deepLinks,\n\t...rest\n}: TldrawEditorProps) {\n\t// Register custom colors and fonts before effects run. For external stores,\n\t// users should also pass themes to createTLStore so they are\n\t// registered before data is loaded into the store.\n\tconst resolvedThemes = resolveThemes(rest.themes)\n\tregisterColorsFromThemes(resolvedThemes)\n\tregisterFontsFromThemes(resolvedThemes)\n\n\tconst [container, setContainer] = useState<HTMLElement | null>(null)\n\tconst [portalHost, setPortalHost] = useState<HTMLElement | null>(null)\n\tconst user = useMemo(() => _user ?? createTLCurrentUser(), [_user])\n\n\tconst ErrorFallback =\n\t\tcomponents?.ErrorFallback === undefined ? DefaultErrorFallback : components?.ErrorFallback\n\n\t// Merge deprecated props with options (options win). `options` is a dependency of the\n\t// editor-creating effect, so it's shallow-stabilised below; the nested objects are\n\t// deep-stabilised here first, or an inline `options={{ camera: { ... } }}` would still\n\t// recreate the editor on every render. `text` needs the deep comparison as well: `<Tldraw>`\n\t// builds a fresh `tipTapConfig` inside it whenever its own `options.text` is a new identity.\n\tconst camera = useDeepObjectIdentity(_options?.camera)\n\tconst gridSteps = useDeepObjectIdentity(_options?.gridSteps)\n\tconst text = useDeepObjectIdentity(_options?.text ?? _textOptions)\n\tconst mergedDeepLinks = _options?.deepLinks ?? _deepLinks\n\tconst deepLinkOptions = useDeepObjectIdentity(\n\t\tmergedDeepLinks === true ? undefined : mergedDeepLinks\n\t)\n\tconst deepLinks = mergedDeepLinks === true ? true : deepLinkOptions\n\tlet mergedOptions = _options\n\tif (camera !== undefined) mergedOptions = { ...mergedOptions, camera }\n\tif (gridSteps !== undefined) mergedOptions = { ...mergedOptions, gridSteps }\n\tif (text !== undefined) mergedOptions = { ...mergedOptions, text }\n\tif (deepLinks !== undefined) mergedOptions = { ...mergedOptions, deepLinks }\n\n\t// apply defaults. if you're using the bare @tldraw/editor package, we\n\t// default these to the \"tldraw zero\" configuration. We have different\n\t// defaults applied in tldraw.\n\tconst withDefaults = {\n\t\t...rest,\n\t\tshapeUtils: rest.shapeUtils ?? EMPTY_SHAPE_UTILS_ARRAY,\n\t\tbindingUtils: rest.bindingUtils ?? EMPTY_BINDING_UTILS_ARRAY,\n\t\tassetUtils: rest.assetUtils ?? EMPTY_ASSET_UTILS_ARRAY,\n\t\ttools: rest.tools ?? EMPTY_TOOLS_ARRAY,\n\t\tcomponents,\n\t\toptions: useShallowObjectIdentity(mergedOptions),\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={setContainer}\n\t\t\tdata-tldraw={version}\n\t\t\tdraggable={false}\n\t\t\tclassName={classNames(`${TL_CONTAINER_CLASS} tl-theme__light`, className)}\n\t\t\ttabIndex={-1}\n\t\t\trole=\"application\"\n\t\t\taria-label={_options?.branding ?? 'tldraw'}\n\t\t>\n\t\t\t<OptionalErrorBoundary\n\t\t\t\tfallback={ErrorFallback}\n\t\t\t\tonError={(error) => annotateError(error, { tags: { origin: 'react.tldraw-before-app' } })}\n\t\t\t>\n\t\t\t\t{container && (\n\t\t\t\t\t<LicenseProvider licenseKey={rest.licenseKey}>\n\t\t\t\t\t\t<ContainerProvider container={container}>\n\t\t\t\t\t\t\t<EditorPortalProvider host={portalHost}>\n\t\t\t\t\t\t\t\t<EditorComponentsProvider overrides={components}>\n\t\t\t\t\t\t\t\t\t{store ? (\n\t\t\t\t\t\t\t\t\t\tstore instanceof Store ? (\n\t\t\t\t\t\t\t\t\t\t\t// Store is ready to go, whether externally synced or not\n\t\t\t\t\t\t\t\t\t\t\t<TldrawEditorWithReadyStore {...withDefaults} store={store} user={user} />\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t// Store is a synced store, so handle syncing stages internally\n\t\t\t\t\t\t\t\t\t\t\t<TldrawEditorWithLoadingStore {...withDefaults} store={store} user={user} />\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t// We have no store (it's undefined) so create one and possibly sync it\n\t\t\t\t\t\t\t\t\t\t<TldrawEditorWithOwnStore {...withDefaults} store={store} user={user} />\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</EditorComponentsProvider>\n\t\t\t\t\t\t\t</EditorPortalProvider>\n\t\t\t\t\t\t</ContainerProvider>\n\t\t\t\t\t</LicenseProvider>\n\t\t\t\t)}\n\t\t\t</OptionalErrorBoundary>\n\t\t\t{/* The host for <EditorPortal>, last among the container's children so that anything\n\t\t\t    portaled through it lands after the canvas and the UI \u2014 behind the UI's \"skip to main\n\t\t\t    content\" link in the tab order, which only works while nothing precedes it. */}\n\t\t\t<div className=\"tl-portal-host\" ref={setPortalHost} />\n\t\t</div>\n\t)\n})\n\nfunction TldrawEditorWithOwnStore(\n\tprops: Required<\n\t\tTldrawEditorProps & { store: undefined; user: TLCurrentUser },\n\t\t'shapeUtils' | 'bindingUtils' | 'assetUtils' | 'tools'\n\t>\n) {\n\tconst {\n\t\tdefaultName,\n\t\tsnapshot,\n\t\tinitialData,\n\t\tshapeUtils,\n\t\tbindingUtils,\n\t\tassetUtils,\n\t\tpersistenceKey,\n\t\tsessionId,\n\t\tuser,\n\t\tassets,\n\t\tusers,\n\t\tmigrations,\n\t\tthemes,\n\t} = props\n\n\tconst syncedStore = useLocalStore({\n\t\tshapeUtils,\n\t\tbindingUtils,\n\t\tassetUtils,\n\t\tinitialData,\n\t\tpersistenceKey,\n\t\tsessionId,\n\t\tdefaultName,\n\t\tsnapshot,\n\t\tassets,\n\t\tusers,\n\t\tmigrations,\n\t\tthemes,\n\t})\n\n\treturn <TldrawEditorWithLoadingStore {...props} store={syncedStore} user={user} />\n}\n\nconst TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({\n\tstore,\n\tuser,\n\t...rest\n}: Required<\n\tTldrawEditorProps & { store: TLStoreWithStatus; user: TLCurrentUser },\n\t'shapeUtils' | 'bindingUtils' | 'assetUtils' | 'tools'\n>) {\n\tconst container = useContainer()\n\n\tuseLayoutEffect(() => {\n\t\t// Resolve the scheme the same way UserPreferencesManager.getIsDarkMode will once the\n\t\t// editor mounts, so a 'system' user on a dark OS doesn't get a light loading screen that\n\t\t// flips dark on mount.\n\t\tconst scheme = user.userPreferences.get().colorScheme ?? rest.colorScheme ?? 'light'\n\t\tconst isDark =\n\t\t\tscheme === 'dark' ||\n\t\t\t(scheme === 'system' &&\n\t\t\t\ttypeof window !== 'undefined' &&\n\t\t\t\t!!getGlobalWindow().matchMedia?.('(prefers-color-scheme: dark)').matches)\n\t\tif (isDark) {\n\t\t\tcontainer.classList.remove('tl-theme__light')\n\t\t\tcontainer.classList.add('tl-theme__dark')\n\t\t}\n\t}, [container, user, rest.colorScheme])\n\n\tconst { LoadingScreen } = useEditorComponents()\n\n\tswitch (store.status) {\n\t\tcase 'error': {\n\t\t\t// for error handling, we fall back to the default error boundary.\n\t\t\t// if users want to handle this error differently, they can render\n\t\t\t// their own error screen before the TldrawEditor component\n\t\t\tthrow store.error\n\t\t}\n\t\tcase 'loading': {\n\t\t\treturn LoadingScreen ? <LoadingScreen /> : null\n\t\t}\n\t\tcase 'not-synced': {\n\t\t\tbreak\n\t\t}\n\t\tcase 'synced-local': {\n\t\t\tbreak\n\t\t}\n\t\tcase 'synced-remote': {\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn <TldrawEditorWithReadyStore {...rest} store={store.store} user={user} />\n})\n\nconst noAutoFocus = () => getGlobalDocument().location.search.includes('tldraw_preserve_focus')\n\nfunction TldrawEditorWithReadyStore({\n\tonMount,\n\tchildren,\n\tstore,\n\ttools,\n\tshapeUtils,\n\tbindingUtils,\n\tassetUtils,\n\toverlayUtils,\n\tuser,\n\tinitialState,\n\tautoFocus = true,\n\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\tcameraOptions,\n\toptions,\n\tlicenseKey,\n\tgetShapeVisibility,\n\tcolorScheme,\n\tassetUrls,\n\tthemes,\n\tinitialTheme,\n}: Required<\n\tTldrawEditorProps & {\n\t\tstore: TLStore\n\t\tuser: TLCurrentUser\n\t},\n\t'shapeUtils' | 'bindingUtils' | 'assetUtils' | 'tools'\n>) {\n\tconst { ErrorFallback } = useEditorComponents()\n\tconst container = useContainer()\n\tconst licenseManager = useLicenseContext()\n\n\tconst [editor, setEditor] = useRefState<Editor | null>(null)\n\n\tconst canvasRef = useRef<HTMLDivElement | null>(null)\n\n\tconst _deepLinks = options?.deepLinks\n\tconst deepLinks = useShallowObjectIdentity(_deepLinks === true ? {} : _deepLinks)\n\n\t// props in this ref can be changed without causing the editor to be recreated.\n\tconst editorOptionsRef = useRef({\n\t\t// for these, it's because they're only used when the editor first mounts:\n\t\tautoFocus: autoFocus && !noAutoFocus(),\n\t\tinitialState,\n\t\tcolorScheme,\n\n\t\t// for these, it's because we keep them up to date in a separate effect:\n\t\tcameraOptions,\n\t\tdeepLinks,\n\t\tthemes,\n\t\tinitialTheme,\n\t})\n\n\tuseLayoutEffect(() => {\n\t\teditorOptionsRef.current = {\n\t\t\tautoFocus: autoFocus && !noAutoFocus(),\n\t\t\tinitialState,\n\t\t\tcolorScheme,\n\t\t\tcameraOptions,\n\t\t\tdeepLinks,\n\t\t\tthemes,\n\t\t\tinitialTheme,\n\t\t}\n\t}, [autoFocus, initialState, colorScheme, cameraOptions, deepLinks, themes, initialTheme])\n\n\tuseLayoutEffect(\n\t\t() => {\n\t\t\tconst {\n\t\t\t\tautoFocus,\n\t\t\t\tinitialState,\n\t\t\t\tcolorScheme: initColorScheme,\n\t\t\t\tcameraOptions,\n\t\t\t\tdeepLinks,\n\t\t\t\tthemes,\n\t\t\t\tinitialTheme,\n\t\t\t} = editorOptionsRef.current\n\t\t\tconst editor = new Editor({\n\t\t\t\tstore,\n\t\t\t\tshapeUtils,\n\t\t\t\tbindingUtils,\n\t\t\t\tassetUtils,\n\t\t\t\toverlayUtils,\n\t\t\t\ttools,\n\t\t\t\tgetContainer: () => container,\n\t\t\t\tuser,\n\t\t\t\tinitialState,\n\t\t\t\t// we should check for some kind of query parameter that turns off autofocus\n\t\t\t\tautoFocus,\n\t\t\t\tcameraOptions,\n\t\t\t\toptions,\n\t\t\t\tlicenseKey,\n\t\t\t\tgetShapeVisibility,\n\t\t\t\tcolorScheme: initColorScheme,\n\t\t\t\tfontAssetUrls: assetUrls?.fonts,\n\t\t\t\tthemes: themes,\n\t\t\t\tinitialTheme: initialTheme,\n\t\t\t})\n\t\t\teditor.licenseManager = licenseManager\n\n\t\t\teditor.updateViewportScreenBounds(canvasRef.current ?? container)\n\n\t\t\t// Use the ref here because we only want to do this once when the editor is created.\n\t\t\t// We don't want changes to the urlStateSync prop to trigger creating new editors.\n\t\t\tif (deepLinks) {\n\t\t\t\tif (!deepLinks?.getUrl) {\n\t\t\t\t\t// load the state from window.location\n\t\t\t\t\teditor.navigateToDeepLink(deepLinks)\n\t\t\t\t} else {\n\t\t\t\t\t// load the state from the provided URL\n\t\t\t\t\teditor.navigateToDeepLink({ ...deepLinks, url: deepLinks.getUrl(editor) })\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tsetEditor(editor)\n\n\t\t\treturn () => {\n\t\t\t\teditor.dispose()\n\t\t\t}\n\t\t},\n\t\t// if any of these change, we need to recreate the editor.\n\t\t[\n\t\t\tassetUtils,\n\t\t\tbindingUtils,\n\t\t\tcolorScheme,\n\t\t\tcontainer,\n\t\t\toptions,\n\t\t\toverlayUtils,\n\t\t\tshapeUtils,\n\t\t\tstore,\n\t\t\ttools,\n\t\t\tuser,\n\t\t\tsetEditor,\n\t\t\tlicenseKey,\n\t\t\tlicenseManager,\n\t\t\tgetShapeVisibility,\n\t\t\tassetUrls,\n\t\t]\n\t)\n\n\tuseLayoutEffect(() => {\n\t\tif (!editor) return\n\t\tif (deepLinks) {\n\t\t\treturn editor.registerDeepLinkListener(deepLinks)\n\t\t}\n\t}, [editor, deepLinks])\n\n\t// keep the editor up to date with the latest camera options\n\t// options.cameraOptions takes precedence over the deprecated cameraOptions prop\n\tuseLayoutEffect(() => {\n\t\tif (editor && (cameraOptions || options?.camera)) {\n\t\t\teditor.setCameraOptions({ ...cameraOptions, ...options?.camera })\n\t\t}\n\t}, [editor, cameraOptions, options?.camera])\n\n\t// keep the editor up to date with the latest theme definitions\n\tuseLayoutEffect(() => {\n\t\tif (editor && themes) {\n\t\t\tfor (const def of Object.values(themes) as TLTheme[]) {\n\t\t\t\teditor.updateTheme(def)\n\t\t\t}\n\t\t}\n\t}, [editor, themes])\n\n\tuseLayoutEffect(() => {\n\t\tif (editor && initialTheme) {\n\t\t\teditor.setCurrentTheme(initialTheme)\n\t\t}\n\t}, [editor, initialTheme])\n\n\tconst crashingError = useSyncExternalStore(\n\t\tuseCallback(\n\t\t\t(onStoreChange) => {\n\t\t\t\tif (editor) {\n\t\t\t\t\teditor.on('crash', onStoreChange)\n\t\t\t\t\treturn () => editor.off('crash', onStoreChange)\n\t\t\t\t}\n\t\t\t\treturn () => {\n\t\t\t\t\t// noop\n\t\t\t\t}\n\t\t\t},\n\t\t\t[editor]\n\t\t),\n\t\t() => editor?.getCrashingError() ?? null\n\t)\n\n\t// For our examples site, we want autoFocus to be true on the examples site, but not\n\t// when embedded in our docs site. If present, the `tldraw_preserve_focus` search param\n\t// overrides the `autoFocus` prop and prevents the editor from focusing immediately,\n\t// however here we also add some logic to focus the editor when the user clicks\n\t// on it and unfocus it when the user clicks away from it.\n\tuseEffect(\n\t\tfunction handleFocusOnPointerDownForPreserveFocusMode() {\n\t\t\tif (!editor) return\n\t\t\tconst container = editor.getContainer()\n\n\t\t\tfunction handleFocusOnPointerDown() {\n\t\t\t\tif (!editor) return\n\t\t\t\teditor.focus()\n\t\t\t}\n\n\t\t\tfunction handleBlurOnPointerDown(e: PointerEvent) {\n\t\t\t\tif (!editor) return\n\t\t\t\t// The same pointerdown bubbles from the container to the body; blurring here would\n\t\t\t\t// cancel the interaction the container listener just focused for. Check the composed\n\t\t\t\t// path rather than `e.target`: when the editor lives in an open shadow root the target\n\t\t\t\t// is retargeted to the shadow host by the time the event reaches the body. (A closed\n\t\t\t\t// shadow root truncates the path at the host, so those still blur.)\n\t\t\t\tif (e.composedPath().includes(container)) return\n\t\t\t\teditor.blur()\n\t\t\t}\n\n\t\t\tif (autoFocus && noAutoFocus()) {\n\t\t\t\tcontainer.addEventListener('pointerdown', handleFocusOnPointerDown)\n\t\t\t\tcontainer.ownerDocument.body.addEventListener('pointerdown', handleBlurOnPointerDown)\n\n\t\t\t\treturn () => {\n\t\t\t\t\tcontainer.removeEventListener('pointerdown', handleFocusOnPointerDown)\n\t\t\t\t\tcontainer.ownerDocument.body.removeEventListener('pointerdown', handleBlurOnPointerDown)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, autoFocus]\n\t)\n\n\tconst [_fontLoadingState, setFontLoadingState] = useState<{\n\t\teditor: Editor\n\t\tisLoaded: boolean\n\t} | null>(null)\n\tlet fontLoadingState = _fontLoadingState\n\tif (editor !== fontLoadingState?.editor) {\n\t\tfontLoadingState = null\n\t}\n\tuseLayoutEffect(() => {\n\t\tif (!editor) return\n\t\tif (editor.options.maxFontsToLoadBeforeRender === 0) {\n\t\t\tsetFontLoadingState({ editor, isLoaded: true })\n\t\t\treturn\n\t\t}\n\n\t\tlet isCancelled = false\n\n\t\tsetFontLoadingState({ editor, isLoaded: false })\n\n\t\teditor.fonts\n\t\t\t.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender)\n\t\t\t.finally(() => {\n\t\t\t\tif (isCancelled) return\n\t\t\t\tsetFontLoadingState({ editor, isLoaded: true })\n\t\t\t})\n\n\t\treturn () => {\n\t\t\tisCancelled = true\n\t\t}\n\t}, [editor])\n\n\tconst { Canvas, LoadingScreen } = useEditorComponents()\n\n\tif (!editor || !fontLoadingState?.isLoaded) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{LoadingScreen && <LoadingScreen />}\n\t\t\t\t<div className=\"tl-canvas\" ref={canvasRef} />\n\t\t\t</>\n\t\t)\n\t}\n\n\treturn (\n\t\t// the top-level tldraw component also renders an error boundary almost\n\t\t// identical to this one. the reason we have two is because this one has\n\t\t// access to `App`, which means that here we can enrich errors with data\n\t\t// from app for reporting, and also still attempt to render the user's\n\t\t// document in the event of an error to reassure them that their work is\n\t\t// not lost.\n\t\t<OptionalErrorBoundary\n\t\t\tfallback={ErrorFallback as any}\n\t\t\tonError={(error) =>\n\t\t\t\teditor.annotateError(error, { origin: 'react.tldraw', willCrashApp: true })\n\t\t\t}\n\t\t>\n\t\t\t{crashingError ? (\n\t\t\t\t<Crash crashingError={crashingError} />\n\t\t\t) : (\n\t\t\t\t<EditorProvider editor={editor}>\n\t\t\t\t\t<Layout onMount={onMount}>\n\t\t\t\t\t\t{children ?? (Canvas ? <Canvas key={editor.contextId} /> : null)}\n\t\t\t\t\t\t<Watermark />\n\t\t\t\t\t</Layout>\n\t\t\t\t</EditorProvider>\n\t\t\t)}\n\t\t</OptionalErrorBoundary>\n\t)\n}\n\nfunction Layout({ children, onMount }: { children: ReactNode; onMount?: TLOnMountHandler }) {\n\tuseZoomCss()\n\tuseCursor()\n\tuseDarkMode()\n\tuseForceUpdate()\n\tuseStateAttribute()\n\tuseOnMount((editor) => {\n\t\tconst teardownStore = editor.store.props.onMount(editor)\n\t\tconst teardownCallback = onMount?.(editor)\n\n\t\treturn () => {\n\t\t\tteardownStore?.()\n\t\t\tteardownCallback?.()\n\t\t}\n\t})\n\n\treturn children\n}\n\nfunction Crash({ crashingError }: { crashingError: unknown }): null {\n\tthrow crashingError\n}\n\n/** @public */\nexport interface LoadingScreenProps {\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport function LoadingScreen({ children }: LoadingScreenProps) {\n\treturn (\n\t\t<div className=\"tl-loading\" aria-busy=\"true\" tabIndex={0}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\n/** @public @react */\nexport function ErrorScreen({ children }: LoadingScreenProps) {\n\treturn <div className=\"tl-loading\">{children}</div>\n}\n\n/** @internal */\nexport function useOnMount(onMount?: TLOnMountHandler) {\n\tconst editor = useEditor()\n\n\tconst onMountEvent = useEvent((editor: Editor) => {\n\t\tlet teardown: (() => void) | void = undefined\n\t\t// If the user wants to do something when the editor mounts, we make sure it doesn't effect the history.\n\t\t// todo: is this reeeeally what we want to do, or should we leave it up to the caller?\n\t\teditor.run(\n\t\t\t() => {\n\t\t\t\tteardown = onMount?.(editor)\n\t\t\t\teditor.emit('mount')\n\t\t\t},\n\t\t\t{ history: 'ignore' }\n\t\t)\n\t\twindow.tldrawReady = true\n\t\treturn () => {\n\t\t\tteardown?.()\n\t\t\t// The editor's component can unmount without the editor being disposed (for example when\n\t\t\t// the canvas is swapped for an error fallback), so emit `unmount` here rather than relying\n\t\t\t// on disposal. If the editor is being disposed, `dispose()` emits `unmount` itself, so we\n\t\t\t// only emit here when it's still mounted and alive.\n\t\t\tif (editor.getIsMounted() && !editor.isDisposed) {\n\t\t\t\teditor.run(() => editor.emit('unmount'), { history: 'ignore' })\n\t\t\t}\n\t\t}\n\t})\n\n\tReact.useLayoutEffect(() => {\n\t\tif (editor) return onMountEvent?.(editor)\n\t}, [editor, onMountEvent])\n}\n"],
+  "mappings": "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",
   "names": ["TldrawEditor", "LoadingScreen", "autoFocus", "initialState", "cameraOptions", "deepLinks", "themes", "initialTheme", "editor", "container"]
 }

package/dist-esm/lib/components/MenuClickCapture.mjs

@@ -18,6 +18,7 @@ function MenuClickCapture() {
     isDown: false,
     isDragging: false,
     button: 0,
+    pointerId: -1,
     start: new Vec()
   });
   const rCancelContextMenuSwallow = useRef(null);
@@ -50,6 +51,7 @@ function MenuClickCapture() {
   }, [editor]);
   const handlePointerDown = useCallback(
     (e) => {
+      if (rPointerState.current.isDown) return;
       const button = getPointerEventButton(e);
       if (button !== 0 && button !== 2) return;
       if (button === 2 && editor.options.rightClickPanning) {
@@ -64,6 +66,7 @@ function MenuClickCapture() {
         isDown: true,
         isDragging: false,
         button,
+        pointerId: e.pointerId,
         start: new Vec(e.clientX, e.clientY)
       };
       if (button === 2) {
@@ -76,7 +79,7 @@ function MenuClickCapture() {
   const handlePointerMove = useCallback(
     (e) => {
       const state = rPointerState.current;
-      if (!state.isDown) return;
+      if (!state.isDown || state.pointerId !== e.pointerId) return;
       if (state.button !== 2 && !state.isDragging) {
         if (Vec.Dist2(state.start, new Vec(e.clientX, e.clientY)) <= editor.options.dragDistanceSquared) {
           return;
@@ -100,13 +103,15 @@ function MenuClickCapture() {
   );
   const handlePointerUp = useCallback(
     (e) => {
-      const isStaticRightClick = rPointerState.current.button === 2 && !rPointerState.current.isDragging;
+      const state = rPointerState.current;
+      if (!state.isDown || state.pointerId !== e.pointerId) return;
+      const isStaticRightClick = state.button === 2 && !state.isDragging;
       editor.dispatch({
         type: "pointer",
         target: "canvas",
         name: "pointer_up",
         ...getPointerInfo(editor, e),
-        button: rPointerState.current.button === 2 ? 2 : getPointerEventButton(e)
+        button: state.button === 2 ? 2 : getPointerEventButton(e)
       });
       if (isStaticRightClick && editor.options.rightClickPanning) {
         const canvas = editor.getContainer().querySelector(".tl-canvas");
@@ -132,11 +137,44 @@ function MenuClickCapture() {
         isDown: false,
         isDragging: false,
         button: 0,
+        pointerId: -1,
         start: new Vec(e.clientX, e.clientY)
       };
     },
     [editor]
   );
+  const handlePointerCancel = useCallback(
+    (e) => {
+      const state = rPointerState.current;
+      if (!state.isDown || state.pointerId !== e.pointerId) {
+        canvasEvents.onPointerCancel?.(e);
+        return;
+      }
+      if (editor.inputs.getIsPointing()) {
+        editor.interrupt();
+        editor.dispatch({
+          type: "pointer",
+          target: "canvas",
+          name: "pointer_up",
+          ...getPointerInfo(editor, e),
+          // pointercancel reports button -1
+          button: state.button
+        });
+      } else {
+        editor.markEventAsHandled(e);
+      }
+      releasePointerCapture(e.currentTarget, e);
+      setIsPointing(false);
+      rPointerState.current = {
+        isDown: false,
+        isDragging: false,
+        button: 0,
+        pointerId: -1,
+        start: new Vec(e.clientX, e.clientY)
+      };
+    },
+    [canvasEvents, editor]
+  );
   return showElement && /* @__PURE__ */ jsx(
     "div",
     {
@@ -146,6 +184,7 @@ function MenuClickCapture() {
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerCancel,
       onContextMenu: (e) => {
         e.preventDefault();
         e.stopPropagation();

package/dist-esm/lib/components/MenuClickCapture.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/MenuClickCapture.tsx"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { type PointerEvent, useCallback, useEffect, useRef, useState } from 'react'\nimport { flushSync } from 'react-dom'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { Vec } from '../primitives/Vec'\nimport { releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { getPointerEventButton } from '../utils/pointer'\n\n/**\n * When a menu is open, this component prevents the user from interacting with the canvas.\n *\n * @public @react\n */\nexport function MenuClickCapture() {\n\tconst editor = useEditor()\n\n\tconst isMenuOpen = useValue('is menu open', () => editor.menus.hasAnyOpenMenus(), [editor])\n\n\t// Keep this component mounted while the pointer is down so pointerup/move still\n\t// land here after a synchronous clearOpenMenus() flips isMenuOpen to false.\n\tconst [isPointing, setIsPointing] = useState(false)\n\tconst showElement = isMenuOpen || isPointing\n\n\tconst canvasEvents = useCanvasEvents()\n\n\tconst rPointerState = useRef({\n\t\tisDown: false,\n\t\tisDragging: false,\n\t\tbutton: 0,\n\t\tstart: new Vec(),\n\t})\n\n\t// Swallow the native contextmenu that follows a right-click pointerdown. Without\n\t// this, Radix's trigger catches the native event and opens a menu at the pointer-\n\t// DOWN position \u2014 then our own synthetic contextmenu (fired on pointerup) opens it\n\t// again at the release position, producing a visible flash.\n\tconst rCancelContextMenuSwallow = useRef<null | (() => void)>(null)\n\tuseEffect(\n\t\t() => () => {\n\t\t\trCancelContextMenuSwallow.current?.()\n\t\t\trCancelContextMenuSwallow.current = null\n\t\t},\n\t\t[]\n\t)\n\tconst swallowNextNativeContextMenu = useCallback(() => {\n\t\trCancelContextMenuSwallow.current?.()\n\t\tconst doc = editor.getContainerDocument()\n\t\tconst onContextMenu = (event: MouseEvent) => {\n\t\t\t// Skip our own synthetic contextmenu \u2014 only swallow the real browser one\n\t\t\tif (!event.isTrusted) return\n\t\t\trCancelContextMenuSwallow.current?.()\n\t\t\trCancelContextMenuSwallow.current = null\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopImmediatePropagation()\n\t\t}\n\t\tconst cancel = () => doc.removeEventListener('contextmenu', onContextMenu, true)\n\t\trCancelContextMenuSwallow.current = cancel\n\t\tdoc.addEventListener('contextmenu', onContextMenu, true)\n\t\t// Drop the listener on the next tick if it never fires (e.g. pointer moved off-screen)\n\t\tdoc.defaultView?.setTimeout(() => {\n\t\t\tif (rCancelContextMenuSwallow.current === cancel) {\n\t\t\t\tcancel()\n\t\t\t\trCancelContextMenuSwallow.current = null\n\t\t\t}\n\t\t}, 0)\n\t}, [editor])\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tconst button = getPointerEventButton(e)\n\t\t\tif (button !== 0 && button !== 2) return\n\n\t\t\tif (button === 2 && editor.options.rightClickPanning) {\n\t\t\t\t// Forward right-click pointerdown through the canvas's own handler so\n\t\t\t\t// pointer capture is set on the canvas (load-bearing: without this\n\t\t\t\t// the context menu briefly flashes closed during consecutive right-clicks).\n\t\t\t\t// The canvas owns the rest of the gesture, so don't capture or mark\n\t\t\t\t// pointing here: this element's pointerup would never fire, leaving it\n\t\t\t\t// mounted over the canvas after the menu closes.\n\t\t\t\t// We don't clearOpenMenus() \u2014 Radix's DismissableLayer closes the menu\n\t\t\t\t// via outside-click detection, keeping its internal state in sync.\n\t\t\t\tconst canvas =\n\t\t\t\t\teditor.getContainer().querySelector<HTMLDivElement>('.tl-canvas') ?? e.currentTarget\n\t\t\t\tcanvasEvents.onPointerDown?.({ ...e, currentTarget: canvas })\n\t\t\t\tswallowNextNativeContextMenu()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tflushSync(() => setIsPointing(true))\n\t\t\tsetPointerCapture(e.currentTarget, e)\n\t\t\trPointerState.current = {\n\t\t\t\tisDown: true,\n\t\t\t\tisDragging: false,\n\t\t\t\tbutton,\n\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t}\n\n\t\t\tif (button === 2) {\n\t\t\t\t// Right-click panning off: swallow the native contextmenu that would otherwise\n\t\t\t\t// briefly open a new menu (causing a flash) once the open one closes below.\n\t\t\t\tswallowNextNativeContextMenu()\n\t\t\t}\n\n\t\t\teditor.menus.clearOpenMenus()\n\t\t},\n\t\t[canvasEvents, editor, swallowNextNativeContextMenu]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tconst state = rPointerState.current\n\t\t\tif (!state.isDown) return\n\n\t\t\t// Left-click: wait for the drag threshold before forwarding anything, then\n\t\t\t// replay pointerdown at the original start so the editor records the\n\t\t\t// correct drag origin. Right-click forwards moves immediately.\n\t\t\tif (state.button !== 2 && !state.isDragging) {\n\t\t\t\tif (\n\t\t\t\t\tVec.Dist2(state.start, new Vec(e.clientX, e.clientY)) <=\n\t\t\t\t\teditor.options.dragDistanceSquared\n\t\t\t\t) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tstate.isDragging = true\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\t...getPointerInfo(editor, { ...e, clientX: state.start.x, clientY: state.start.y }),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tconst isStaticRightClick =\n\t\t\t\trPointerState.current.button === 2 && !rPointerState.current.isDragging\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_up',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\tbutton: rPointerState.current.button === 2 ? 2 : getPointerEventButton(e),\n\t\t\t})\n\n\t\t\tif (isStaticRightClick && editor.options.rightClickPanning) {\n\t\t\t\t// Dispatch contextmenu on the canvas's parent (Radix's trigger) so the\n\t\t\t\t// menu opens at the release position. Bypassing the canvas avoids its\n\t\t\t\t// own onContextMenu handler, which preventDefaults non-synthesized events.\n\t\t\t\tconst canvas = editor.getContainer().querySelector<HTMLDivElement>('.tl-canvas')\n\t\t\t\tconst trigger = canvas?.parentElement ?? e.currentTarget\n\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\ttrigger.dispatchEvent(\n\t\t\t\t\t\tnew PointerEvent('contextmenu', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tclientX: e.clientX,\n\t\t\t\t\t\t\tclientY: e.clientY,\n\t\t\t\t\t\t\tbutton: 2,\n\t\t\t\t\t\t\tbuttons: 0,\n\t\t\t\t\t\t\tpointerId: e.pointerId,\n\t\t\t\t\t\t\tpointerType: e.pointerType,\n\t\t\t\t\t\t\tisPrimary: e.isPrimary,\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tsetIsPointing(false)\n\t\t\trPointerState.current = {\n\t\t\t\tisDown: false,\n\t\t\t\tisDragging: false,\n\t\t\t\tbutton: 0,\n\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\treturn (\n\t\tshowElement && (\n\t\t\t<div\n\t\t\t\tclassName=\"tlui-menu-click-capture\"\n\t\t\t\tdata-testid=\"menu-click-capture.content\"\n\t\t\t\t{...canvasEvents}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\tonContextMenu={(e) => {\n\t\t\t\t\te.preventDefault()\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { type PointerEvent, useCallback, useEffect, useRef, useState } from 'react'\nimport { flushSync } from 'react-dom'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { Vec } from '../primitives/Vec'\nimport { releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { getPointerEventButton } from '../utils/pointer'\n\n/**\n * When a menu is open, this component prevents the user from interacting with the canvas.\n *\n * @public @react\n */\nexport function MenuClickCapture() {\n\tconst editor = useEditor()\n\n\tconst isMenuOpen = useValue('is menu open', () => editor.menus.hasAnyOpenMenus(), [editor])\n\n\t// Keep this component mounted while the pointer is down so pointerup/move still\n\t// land here after a synchronous clearOpenMenus() flips isMenuOpen to false.\n\tconst [isPointing, setIsPointing] = useState(false)\n\tconst showElement = isMenuOpen || isPointing\n\n\tconst canvasEvents = useCanvasEvents()\n\n\tconst rPointerState = useRef({\n\t\tisDown: false,\n\t\tisDragging: false,\n\t\tbutton: 0,\n\t\tpointerId: -1,\n\t\tstart: new Vec(),\n\t})\n\n\t// Swallow the native contextmenu that follows a right-click pointerdown. Without\n\t// this, Radix's trigger catches the native event and opens a menu at the pointer-\n\t// DOWN position \u2014 then our own synthetic contextmenu (fired on pointerup) opens it\n\t// again at the release position, producing a visible flash.\n\tconst rCancelContextMenuSwallow = useRef<null | (() => void)>(null)\n\tuseEffect(\n\t\t() => () => {\n\t\t\trCancelContextMenuSwallow.current?.()\n\t\t\trCancelContextMenuSwallow.current = null\n\t\t},\n\t\t[]\n\t)\n\tconst swallowNextNativeContextMenu = useCallback(() => {\n\t\trCancelContextMenuSwallow.current?.()\n\t\tconst doc = editor.getContainerDocument()\n\t\tconst onContextMenu = (event: MouseEvent) => {\n\t\t\t// Skip our own synthetic contextmenu \u2014 only swallow the real browser one\n\t\t\tif (!event.isTrusted) return\n\t\t\trCancelContextMenuSwallow.current?.()\n\t\t\trCancelContextMenuSwallow.current = null\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopImmediatePropagation()\n\t\t}\n\t\tconst cancel = () => doc.removeEventListener('contextmenu', onContextMenu, true)\n\t\trCancelContextMenuSwallow.current = cancel\n\t\tdoc.addEventListener('contextmenu', onContextMenu, true)\n\t\t// Drop the listener on the next tick if it never fires (e.g. pointer moved off-screen)\n\t\tdoc.defaultView?.setTimeout(() => {\n\t\t\tif (rCancelContextMenuSwallow.current === cancel) {\n\t\t\t\tcancel()\n\t\t\t\trCancelContextMenuSwallow.current = null\n\t\t\t}\n\t\t}, 0)\n\t}, [editor])\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\t// This overlay tracks a single press. A second pointer landing while one is active \u2014\n\t\t\t// a palm resting on the glass beside a pen \u2014 must not take over the gesture, or its\n\t\t\t// own cancel would end the press it stole.\n\t\t\tif (rPointerState.current.isDown) return\n\n\t\t\tconst button = getPointerEventButton(e)\n\t\t\tif (button !== 0 && button !== 2) return\n\n\t\t\tif (button === 2 && editor.options.rightClickPanning) {\n\t\t\t\t// Forward right-click pointerdown through the canvas's own handler so\n\t\t\t\t// pointer capture is set on the canvas (load-bearing: without this\n\t\t\t\t// the context menu briefly flashes closed during consecutive right-clicks).\n\t\t\t\t// The canvas owns the rest of the gesture, so don't capture or mark\n\t\t\t\t// pointing here: this element's pointerup would never fire, leaving it\n\t\t\t\t// mounted over the canvas after the menu closes.\n\t\t\t\t// We don't clearOpenMenus() \u2014 Radix's DismissableLayer closes the menu\n\t\t\t\t// via outside-click detection, keeping its internal state in sync.\n\t\t\t\tconst canvas =\n\t\t\t\t\teditor.getContainer().querySelector<HTMLDivElement>('.tl-canvas') ?? e.currentTarget\n\t\t\t\tcanvasEvents.onPointerDown?.({ ...e, currentTarget: canvas })\n\t\t\t\tswallowNextNativeContextMenu()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tflushSync(() => setIsPointing(true))\n\t\t\tsetPointerCapture(e.currentTarget, e)\n\t\t\trPointerState.current = {\n\t\t\t\tisDown: true,\n\t\t\t\tisDragging: false,\n\t\t\t\tbutton,\n\t\t\t\tpointerId: e.pointerId,\n\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t}\n\n\t\t\tif (button === 2) {\n\t\t\t\t// Right-click panning off: swallow the native contextmenu that would otherwise\n\t\t\t\t// briefly open a new menu (causing a flash) once the open one closes below.\n\t\t\t\tswallowNextNativeContextMenu()\n\t\t\t}\n\n\t\t\teditor.menus.clearOpenMenus()\n\t\t},\n\t\t[canvasEvents, editor, swallowNextNativeContextMenu]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tconst state = rPointerState.current\n\t\t\tif (!state.isDown || state.pointerId !== e.pointerId) return\n\n\t\t\t// Left-click: wait for the drag threshold before forwarding anything, then\n\t\t\t// replay pointerdown at the original start so the editor records the\n\t\t\t// correct drag origin. Right-click forwards moves immediately.\n\t\t\tif (state.button !== 2 && !state.isDragging) {\n\t\t\t\tif (\n\t\t\t\t\tVec.Dist2(state.start, new Vec(e.clientX, e.clientY)) <=\n\t\t\t\t\teditor.options.dragDistanceSquared\n\t\t\t\t) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tstate.isDragging = true\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\t...getPointerInfo(editor, { ...e, clientX: state.start.x, clientY: state.start.y }),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tconst state = rPointerState.current\n\t\t\tif (!state.isDown || state.pointerId !== e.pointerId) return\n\n\t\t\tconst isStaticRightClick = state.button === 2 && !state.isDragging\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_up',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\tbutton: state.button === 2 ? 2 : getPointerEventButton(e),\n\t\t\t})\n\n\t\t\tif (isStaticRightClick && editor.options.rightClickPanning) {\n\t\t\t\t// Dispatch contextmenu on the canvas's parent (Radix's trigger) so the\n\t\t\t\t// menu opens at the release position. Bypassing the canvas avoids its\n\t\t\t\t// own onContextMenu handler, which preventDefaults non-synthesized events.\n\t\t\t\tconst canvas = editor.getContainer().querySelector<HTMLDivElement>('.tl-canvas')\n\t\t\t\tconst trigger = canvas?.parentElement ?? e.currentTarget\n\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\ttrigger.dispatchEvent(\n\t\t\t\t\t\tnew PointerEvent('contextmenu', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tclientX: e.clientX,\n\t\t\t\t\t\t\tclientY: e.clientY,\n\t\t\t\t\t\t\tbutton: 2,\n\t\t\t\t\t\t\tbuttons: 0,\n\t\t\t\t\t\t\tpointerId: e.pointerId,\n\t\t\t\t\t\t\tpointerType: e.pointerType,\n\t\t\t\t\t\t\tisPrimary: e.isPrimary,\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tsetIsPointing(false)\n\t\t\trPointerState.current = {\n\t\t\t\tisDown: false,\n\t\t\t\tisDragging: false,\n\t\t\t\tbutton: 0,\n\t\t\t\tpointerId: -1,\n\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst handlePointerCancel = useCallback(\n\t\t(e: PointerEvent) => {\n\t\t\tconst state = rPointerState.current\n\t\t\tif (!state.isDown || state.pointerId !== e.pointerId) {\n\t\t\t\t// Either a right-click press that was forwarded to the canvas, or a pointer this\n\t\t\t\t// overlay never tracked. Neither is ours to end, so let the canvas handler decide.\n\t\t\t\tcanvasEvents.onPointerCancel?.(e)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// The canvas's own cancel handler doesn't know about this element's pointer\n\t\t\t// state, so without this the overlay stays mounted over the canvas and\n\t\t\t// swallows the next interaction after the browser cancels a press.\n\t\t\tif (editor.inputs.getIsPointing()) {\n\t\t\t\teditor.interrupt()\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\t// pointercancel reports button -1\n\t\t\t\t\tbutton: state.button,\n\t\t\t\t})\n\t\t\t} else {\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tsetIsPointing(false)\n\t\t\trPointerState.current = {\n\t\t\t\tisDown: false,\n\t\t\t\tisDragging: false,\n\t\t\t\tbutton: 0,\n\t\t\t\tpointerId: -1,\n\t\t\t\tstart: new Vec(e.clientX, e.clientY),\n\t\t\t}\n\t\t},\n\t\t[canvasEvents, editor]\n\t)\n\n\treturn (\n\t\tshowElement && (\n\t\t\t<div\n\t\t\t\tclassName=\"tlui-menu-click-capture\"\n\t\t\t\tdata-testid=\"menu-click-capture.content\"\n\t\t\t\t{...canvasEvents}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\tonPointerCancel={handlePointerCancel}\n\t\t\t\tonContextMenu={(e) => {\n\t\t\t\t\te.preventDefault()\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/components/default-components/DefaultCanvas.mjs

@@ -96,7 +96,11 @@ function DefaultCanvas({ className }) {
     },
     [editor]
   );
-  const hideShapes = useValue("debug_shapes", () => debugFlags.hideShapes.get(), [debugFlags]);
+  const hideShapes = useValue(
+    "debug_shapes",
+    () => debugFlags.hideShapes.get() && editor.getInstanceState().isDebugMode,
+    [editor]
+  );
   const isGridMode = useValue("isGridMode", () => editor.getInstanceState().isGridMode, [editor]);
   const { Grid } = useEditorComponents();
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultCanvas.tsx"],
-  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useValue } from '@tldraw/state-react'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { objectMapValues } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { Fragment, JSX, useEffect, useRef, useState } from 'react'\nimport { tlenv } from '../../globals/environment'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useCanvasEvents } from '../../hooks/useCanvasEvents'\nimport { useCoarsePointer } from '../../hooks/useCoarsePointer'\nimport { useContainer } from '../../hooks/useContainer'\nimport { useDocumentEvents } from '../../hooks/useDocumentEvents'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'\nimport { useGestureEvents } from '../../hooks/useGestureEvents'\nimport { useScreenBounds } from '../../hooks/useScreenBounds'\nimport { ShapeCullingProvider, useShapeCulling } from '../../hooks/useShapeCulling'\nimport { Box } from '../../primitives/Box'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { setStyleProperty } from '../../utils/dom'\nimport { getHtmlLayerTransform } from '../../utils/getHtmlLayerTransform'\nimport { LiveCollaborators } from '../LiveCollaborators'\nimport { MenuClickCapture } from '../MenuClickCapture'\nimport { Shape } from '../Shape'\nimport { CanvasOverlays } from './CanvasOverlays'\n\n/** @public */\nexport interface TLCanvasComponentProps {\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultCanvas({ className }: TLCanvasComponentProps) {\n\tconst editor = useEditor()\n\n\tconst { Background, SvgDefs } = useEditorComponents()\n\n\tconst rCanvas = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer = useRef<HTMLDivElement>(null)\n\tconst container = useContainer()\n\n\tuseScreenBounds(rCanvas)\n\tuseDocumentEvents()\n\tuseCoarsePointer()\n\n\tuseGestureEvents(rCanvas)\n\tuseFixSafariDoubleTapZoomPencilEvents(rCanvas)\n\n\tuseQuickReactor(\n\t\t'update canvas state data attributes',\n\t\t() => {\n\t\t\tconst canvas = rCanvas.current\n\t\t\tif (!canvas) return\n\n\t\t\tcanvas.setAttribute(\n\t\t\t\t'data-iseditinganything',\n\t\t\t\teditor.getEditingShapeId() === null ? 'false' : 'true'\n\t\t\t)\n\t\t\tcanvas.setAttribute(\n\t\t\t\t'data-isselectinganything',\n\t\t\t\teditor.getSelectedShapeIds().length === 0 ? 'false' : 'true'\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst rMemoizedStuff = useRef({ lodDisableTextOutline: false, canUpdateTextOutline: true })\n\n\tuseQuickReactor(\n\t\t'set text outline',\n\t\tfunction setTextOutline() {\n\t\t\tif (rMemoizedStuff.current.canUpdateTextOutline) {\n\t\t\t\tif (tlenv.isSafari) {\n\t\t\t\t\t// We don't allow text outlines on safari for performance reasons\n\t\t\t\t\tcontainer.style.setProperty('--tl-text-outline', 'none')\n\t\t\t\t\trMemoizedStuff.current.canUpdateTextOutline = false // will prevent this check in the future\n\t\t\t\t} else {\n\t\t\t\t\tconst efficientZoom = editor.getEfficientZoomLevel()\n\t\t\t\t\t// If we're zoomed way out, and have this option enabled, then we hide text outline\n\t\t\t\t\tconst lodDisableTextOutline = efficientZoom < editor.options.textShadowLod\n\t\t\t\t\t// Skip the style update if the property is the same as it was before\n\t\t\t\t\tif (lodDisableTextOutline !== rMemoizedStuff.current.lodDisableTextOutline) {\n\t\t\t\t\t\tcontainer.style.setProperty(\n\t\t\t\t\t\t\t'--tl-text-outline',\n\t\t\t\t\t\t\tlodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\trMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tuseQuickReactor(\n\t\t'position layers',\n\t\tfunction positionLayersWhenCameraMoves() {\n\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', getHtmlLayerTransform(editor))\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tconst events = useCanvasEvents()\n\n\tconst shapeSvgDefs = useValue(\n\t\t'shapeSvgDefs',\n\t\t() => {\n\t\t\tconst shapeSvgDefsByKey = new Map<string, JSX.Element>()\n\t\t\tfor (const util of objectMapValues(editor.shapeUtils)) {\n\t\t\t\tif (!util) return\n\t\t\t\tconst defs = util.getCanvasSvgDefs()\n\t\t\t\tfor (const { key, component: Component } of defs) {\n\t\t\t\t\tif (shapeSvgDefsByKey.has(key)) continue\n\t\t\t\t\tshapeSvgDefsByKey.set(key, <Component key={key} />)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn [...shapeSvgDefsByKey.values()]\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])\n\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\tconst { Grid } = useEditorComponents()\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={rCanvas}\n\t\t\t\tdraggable={false}\n\t\t\t\tclassName={classNames('tl-canvas', className)}\n\t\t\t\tdata-testid=\"canvas\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<svg className=\"tl-svg-context\" aria-hidden=\"true\">\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t{shapeSvgDefs}\n\t\t\t\t\t\t{SvgDefs && <SvgDefs />}\n\t\t\t\t\t</defs>\n\t\t\t\t</svg>\n\t\t\t\t{Background && (\n\t\t\t\t\t<div className=\"tl-background__wrapper\">\n\t\t\t\t\t\t<Background />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{isGridMode && Grid && <GridWrapper />}\n\t\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer tl-shapes\" draggable={false}>\n\t\t\t\t\t<OnTheCanvasWrapper />\n\t\t\t\t\t{hideShapes ? null : <ShapesLayer canvasRef={rCanvas} />}\n\t\t\t\t</div>\n\t\t\t\t<CanvasOverlays />\n\t\t\t\t<MovingCameraHitTestBlocker />\n\t\t\t</div>\n\t\t\t<InFrontOfTheCanvasWrapper />\n\t\t\t<LiveCollaborators />\n\t\t\t<MenuClickCapture />\n\t\t</>\n\t)\n}\n\nfunction InFrontOfTheCanvasWrapper() {\n\tconst editor = useEditor()\n\tconst { InFrontOfTheCanvas } = useEditorComponents()\n\tif (!InFrontOfTheCanvas) return null\n\treturn (\n\t\t<div\n\t\t\tclassName=\"tl-canvas__in-front\"\n\t\t\tonPointerDown={editor.markEventAsHandled}\n\t\t\tonPointerUp={editor.markEventAsHandled}\n\t\t\tonTouchStart={editor.markEventAsHandled}\n\t\t\tonTouchEnd={editor.markEventAsHandled}\n\t\t>\n\t\t\t<InFrontOfTheCanvas />\n\t\t</div>\n\t)\n}\n\nfunction GridWrapper() {\n\tconst editor = useEditor()\n\tconst gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])\n\tconst { x, y, z } = useValue('camera', () => editor.getCamera(), [editor])\n\tconst { Grid } = useEditorComponents()\n\n\tif (!Grid) return null\n\n\treturn <Grid x={x} y={y} z={z} size={gridSize} />\n}\n\nfunction ShapesLayer({ canvasRef }: { canvasRef: { readonly current: HTMLDivElement | null } }) {\n\tconst editor = useEditor()\n\tconst debugSvg = useValue('debug svg', () => debugFlags.debugSvg.get(), [debugFlags])\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn (\n\t\t<ShapeCullingProvider>\n\t\t\t{renderingShapes.map((result) =>\n\t\t\t\tdebugSvg ? (\n\t\t\t\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t\t\t\t<Shape {...result} />\n\t\t\t\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t\t\t\t</Fragment>\n\t\t\t\t) : (\n\t\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t\t)\n\t\t\t)}\n\t\t\t<CullingController />\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded canvasRef={canvasRef} />}\n\t\t</ShapeCullingProvider>\n\t)\n}\nfunction ReflowIfNeeded({ canvasRef }: { canvasRef: { readonly current: HTMLDivElement | null } }) {\n\tconst editor = useEditor()\n\tconst culledShapesRef = useRef<Set<TLShapeId>>(new Set())\n\tuseQuickReactor(\n\t\t'reflow for culled shapes',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tif (culledShapesRef.current === culledShapes) return\n\n\t\t\tculledShapesRef.current = culledShapes\n\t\t\tconst canvas = canvasRef.current\n\t\t\tif (!canvas) return\n\t\t\t// This causes a reflow\n\t\t\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n\t\t\tconst _height = canvas.offsetHeight\n\t\t},\n\t\t[editor, canvasRef]\n\t)\n\treturn null\n}\n\n/**\n * Centralized culling controller that updates shape container visibility.\n * This single reactor replaces per-shape subscriptions for O(1) instead of O(N) subscriptions.\n */\nfunction CullingController() {\n\tconst editor = useEditor()\n\tconst { updateCulling } = useShapeCulling()\n\n\tuseQuickReactor(\n\t\t'update shape culling',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tupdateCulling(culledShapes)\n\t\t},\n\t\t[editor, updateCulling]\n\t)\n\n\treturn null\n}\n\nfunction DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {\n\tconst editor = useEditor()\n\n\tconst [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)\n\n\tconst isInRoot = useValue(\n\t\t'is in root',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\treturn shape?.parentId === editor.getCurrentPageId()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tif (!isInRoot) return\n\n\t\tlet latest = null\n\t\tconst unsubscribe = react('shape to svg', async () => {\n\t\t\tconst renderId = Math.random()\n\t\t\tlatest = renderId\n\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tconst isSingleFrame = !!shape && editor.isShapeFrameLike(shape)\n\t\t\tconst padding = isSingleFrame ? 0 : 10\n\t\t\tlet bounds = editor.getShapePageBounds(id)\n\t\t\tif (!bounds) return\n\t\t\tbounds = bounds.clone().expandBy(padding)\n\n\t\t\tconst result = await editor.getSvgString([id], { padding })\n\n\t\t\tif (latest !== renderId || !result) return\n\n\t\t\tconst svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`\n\t\t\tsetImage({ src: svgDataUrl, bounds })\n\t\t})\n\n\t\treturn () => {\n\t\t\tlatest = null\n\t\t\tunsubscribe()\n\t\t}\n\t}, [editor, id, isInRoot])\n\n\tif (!isInRoot || !image) return null\n\n\tif (mode === 'iframe') {\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tsrc={image.src}\n\t\t\t\twidth={image.bounds.width}\n\t\t\t\theight={image.bounds.height}\n\t\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tborder: 'none',\n\t\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\t\toutline: '1px solid black',\n\t\t\t\t\tmaxWidth: 'none',\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\twidth={image.bounds.width}\n\t\t\theight={image.bounds.height}\n\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\toutline: '1px solid black',\n\t\t\t\tmaxWidth: 'none',\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction OnTheCanvasWrapper() {\n\tconst { OnTheCanvas } = useEditorComponents()\n\tif (!OnTheCanvas) return null\n\treturn <OnTheCanvas />\n}\n\nfunction MovingCameraHitTestBlocker() {\n\tconst editor = useEditor()\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tl-hit-test-blocker', {\n\t\t\t\t'tl-hit-test-blocker__hidden': cameraState === 'idle',\n\t\t\t})}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useValue } from '@tldraw/state-react'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { objectMapValues } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { Fragment, JSX, useEffect, useRef, useState } from 'react'\nimport { tlenv } from '../../globals/environment'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useCanvasEvents } from '../../hooks/useCanvasEvents'\nimport { useCoarsePointer } from '../../hooks/useCoarsePointer'\nimport { useContainer } from '../../hooks/useContainer'\nimport { useDocumentEvents } from '../../hooks/useDocumentEvents'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'\nimport { useGestureEvents } from '../../hooks/useGestureEvents'\nimport { useScreenBounds } from '../../hooks/useScreenBounds'\nimport { ShapeCullingProvider, useShapeCulling } from '../../hooks/useShapeCulling'\nimport { Box } from '../../primitives/Box'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { setStyleProperty } from '../../utils/dom'\nimport { getHtmlLayerTransform } from '../../utils/getHtmlLayerTransform'\nimport { LiveCollaborators } from '../LiveCollaborators'\nimport { MenuClickCapture } from '../MenuClickCapture'\nimport { Shape } from '../Shape'\nimport { CanvasOverlays } from './CanvasOverlays'\n\n/** @public */\nexport interface TLCanvasComponentProps {\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultCanvas({ className }: TLCanvasComponentProps) {\n\tconst editor = useEditor()\n\n\tconst { Background, SvgDefs } = useEditorComponents()\n\n\tconst rCanvas = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer = useRef<HTMLDivElement>(null)\n\tconst container = useContainer()\n\n\tuseScreenBounds(rCanvas)\n\tuseDocumentEvents()\n\tuseCoarsePointer()\n\n\tuseGestureEvents(rCanvas)\n\tuseFixSafariDoubleTapZoomPencilEvents(rCanvas)\n\n\tuseQuickReactor(\n\t\t'update canvas state data attributes',\n\t\t() => {\n\t\t\tconst canvas = rCanvas.current\n\t\t\tif (!canvas) return\n\n\t\t\tcanvas.setAttribute(\n\t\t\t\t'data-iseditinganything',\n\t\t\t\teditor.getEditingShapeId() === null ? 'false' : 'true'\n\t\t\t)\n\t\t\tcanvas.setAttribute(\n\t\t\t\t'data-isselectinganything',\n\t\t\t\teditor.getSelectedShapeIds().length === 0 ? 'false' : 'true'\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst rMemoizedStuff = useRef({ lodDisableTextOutline: false, canUpdateTextOutline: true })\n\n\tuseQuickReactor(\n\t\t'set text outline',\n\t\tfunction setTextOutline() {\n\t\t\tif (rMemoizedStuff.current.canUpdateTextOutline) {\n\t\t\t\tif (tlenv.isSafari) {\n\t\t\t\t\t// We don't allow text outlines on safari for performance reasons\n\t\t\t\t\tcontainer.style.setProperty('--tl-text-outline', 'none')\n\t\t\t\t\trMemoizedStuff.current.canUpdateTextOutline = false // will prevent this check in the future\n\t\t\t\t} else {\n\t\t\t\t\tconst efficientZoom = editor.getEfficientZoomLevel()\n\t\t\t\t\t// If we're zoomed way out, and have this option enabled, then we hide text outline\n\t\t\t\t\tconst lodDisableTextOutline = efficientZoom < editor.options.textShadowLod\n\t\t\t\t\t// Skip the style update if the property is the same as it was before\n\t\t\t\t\tif (lodDisableTextOutline !== rMemoizedStuff.current.lodDisableTextOutline) {\n\t\t\t\t\t\tcontainer.style.setProperty(\n\t\t\t\t\t\t\t'--tl-text-outline',\n\t\t\t\t\t\t\tlodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\trMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tuseQuickReactor(\n\t\t'position layers',\n\t\tfunction positionLayersWhenCameraMoves() {\n\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', getHtmlLayerTransform(editor))\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tconst events = useCanvasEvents()\n\n\tconst shapeSvgDefs = useValue(\n\t\t'shapeSvgDefs',\n\t\t() => {\n\t\t\tconst shapeSvgDefsByKey = new Map<string, JSX.Element>()\n\t\t\tfor (const util of objectMapValues(editor.shapeUtils)) {\n\t\t\t\tif (!util) return\n\t\t\t\tconst defs = util.getCanvasSvgDefs()\n\t\t\t\tfor (const { key, component: Component } of defs) {\n\t\t\t\t\tif (shapeSvgDefsByKey.has(key)) continue\n\t\t\t\t\tshapeSvgDefsByKey.set(key, <Component key={key} />)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn [...shapeSvgDefsByKey.values()]\n\t\t},\n\t\t[editor]\n\t)\n\n\t// Gated on debug mode so a flag left on can't strand the user on a blank canvas with no\n\t// debug menu to turn it back off.\n\tconst hideShapes = useValue(\n\t\t'debug_shapes',\n\t\t() => debugFlags.hideShapes.get() && editor.getInstanceState().isDebugMode,\n\t\t[editor]\n\t)\n\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\tconst { Grid } = useEditorComponents()\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={rCanvas}\n\t\t\t\tdraggable={false}\n\t\t\t\tclassName={classNames('tl-canvas', className)}\n\t\t\t\tdata-testid=\"canvas\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<svg className=\"tl-svg-context\" aria-hidden=\"true\">\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t{shapeSvgDefs}\n\t\t\t\t\t\t{SvgDefs && <SvgDefs />}\n\t\t\t\t\t</defs>\n\t\t\t\t</svg>\n\t\t\t\t{Background && (\n\t\t\t\t\t<div className=\"tl-background__wrapper\">\n\t\t\t\t\t\t<Background />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{isGridMode && Grid && <GridWrapper />}\n\t\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer tl-shapes\" draggable={false}>\n\t\t\t\t\t<OnTheCanvasWrapper />\n\t\t\t\t\t{hideShapes ? null : <ShapesLayer canvasRef={rCanvas} />}\n\t\t\t\t</div>\n\t\t\t\t<CanvasOverlays />\n\t\t\t\t<MovingCameraHitTestBlocker />\n\t\t\t</div>\n\t\t\t<InFrontOfTheCanvasWrapper />\n\t\t\t<LiveCollaborators />\n\t\t\t<MenuClickCapture />\n\t\t</>\n\t)\n}\n\nfunction InFrontOfTheCanvasWrapper() {\n\tconst editor = useEditor()\n\tconst { InFrontOfTheCanvas } = useEditorComponents()\n\tif (!InFrontOfTheCanvas) return null\n\treturn (\n\t\t<div\n\t\t\tclassName=\"tl-canvas__in-front\"\n\t\t\tonPointerDown={editor.markEventAsHandled}\n\t\t\tonPointerUp={editor.markEventAsHandled}\n\t\t\tonTouchStart={editor.markEventAsHandled}\n\t\t\tonTouchEnd={editor.markEventAsHandled}\n\t\t>\n\t\t\t<InFrontOfTheCanvas />\n\t\t</div>\n\t)\n}\n\nfunction GridWrapper() {\n\tconst editor = useEditor()\n\tconst gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])\n\tconst { x, y, z } = useValue('camera', () => editor.getCamera(), [editor])\n\tconst { Grid } = useEditorComponents()\n\n\tif (!Grid) return null\n\n\treturn <Grid x={x} y={y} z={z} size={gridSize} />\n}\n\nfunction ShapesLayer({ canvasRef }: { canvasRef: { readonly current: HTMLDivElement | null } }) {\n\tconst editor = useEditor()\n\tconst debugSvg = useValue('debug svg', () => debugFlags.debugSvg.get(), [debugFlags])\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn (\n\t\t<ShapeCullingProvider>\n\t\t\t{renderingShapes.map((result) =>\n\t\t\t\tdebugSvg ? (\n\t\t\t\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t\t\t\t<Shape {...result} />\n\t\t\t\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t\t\t\t</Fragment>\n\t\t\t\t) : (\n\t\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t\t)\n\t\t\t)}\n\t\t\t<CullingController />\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded canvasRef={canvasRef} />}\n\t\t</ShapeCullingProvider>\n\t)\n}\nfunction ReflowIfNeeded({ canvasRef }: { canvasRef: { readonly current: HTMLDivElement | null } }) {\n\tconst editor = useEditor()\n\tconst culledShapesRef = useRef<Set<TLShapeId>>(new Set())\n\tuseQuickReactor(\n\t\t'reflow for culled shapes',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tif (culledShapesRef.current === culledShapes) return\n\n\t\t\tculledShapesRef.current = culledShapes\n\t\t\tconst canvas = canvasRef.current\n\t\t\tif (!canvas) return\n\t\t\t// This causes a reflow\n\t\t\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n\t\t\tconst _height = canvas.offsetHeight\n\t\t},\n\t\t[editor, canvasRef]\n\t)\n\treturn null\n}\n\n/**\n * Centralized culling controller that updates shape container visibility.\n * This single reactor replaces per-shape subscriptions for O(1) instead of O(N) subscriptions.\n */\nfunction CullingController() {\n\tconst editor = useEditor()\n\tconst { updateCulling } = useShapeCulling()\n\n\tuseQuickReactor(\n\t\t'update shape culling',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tupdateCulling(culledShapes)\n\t\t},\n\t\t[editor, updateCulling]\n\t)\n\n\treturn null\n}\n\nfunction DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {\n\tconst editor = useEditor()\n\n\tconst [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)\n\n\tconst isInRoot = useValue(\n\t\t'is in root',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\treturn shape?.parentId === editor.getCurrentPageId()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tif (!isInRoot) return\n\n\t\tlet latest = null\n\t\tconst unsubscribe = react('shape to svg', async () => {\n\t\t\tconst renderId = Math.random()\n\t\t\tlatest = renderId\n\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tconst isSingleFrame = !!shape && editor.isShapeFrameLike(shape)\n\t\t\tconst padding = isSingleFrame ? 0 : 10\n\t\t\tlet bounds = editor.getShapePageBounds(id)\n\t\t\tif (!bounds) return\n\t\t\tbounds = bounds.clone().expandBy(padding)\n\n\t\t\tconst result = await editor.getSvgString([id], { padding })\n\n\t\t\tif (latest !== renderId || !result) return\n\n\t\t\tconst svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`\n\t\t\tsetImage({ src: svgDataUrl, bounds })\n\t\t})\n\n\t\treturn () => {\n\t\t\tlatest = null\n\t\t\tunsubscribe()\n\t\t}\n\t}, [editor, id, isInRoot])\n\n\tif (!isInRoot || !image) return null\n\n\tif (mode === 'iframe') {\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tsrc={image.src}\n\t\t\t\twidth={image.bounds.width}\n\t\t\t\theight={image.bounds.height}\n\t\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tborder: 'none',\n\t\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\t\toutline: '1px solid black',\n\t\t\t\t\tmaxWidth: 'none',\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\twidth={image.bounds.width}\n\t\t\theight={image.bounds.height}\n\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\toutline: '1px solid black',\n\t\t\t\tmaxWidth: 'none',\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction OnTheCanvasWrapper() {\n\tconst { OnTheCanvas } = useEditorComponents()\n\tif (!OnTheCanvas) return null\n\treturn <OnTheCanvas />\n}\n\nfunction MovingCameraHitTestBlocker() {\n\tconst editor = useEditor()\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tl-hit-test-blocker', {\n\t\t\t\t'tl-hit-test-blocker__hidden': cameraState === 'idle',\n\t\t\t})}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["Fragment"]
 }

package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs

@@ -10,10 +10,7 @@ import { getGlobalWindow } from "../../utils/dom.mjs";
 import { hardResetEditor, refreshPage } from "../../utils/runtime.mjs";
 import { ErrorBoundary } from "../ErrorBoundary.mjs";
 const BASE_ERROR_URL = "https://github.com/tldraw/tldraw/issues/new";
-const DefaultErrorFallback = function DefaultErrorFallback2({
-  error,
-  editor
-}) {
+function DefaultErrorFallback({ error, editor }) {
   const containerRef = useRef(null);
   const [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === "development");
   const [didCopy, setDidCopy] = useState(false);
@@ -174,7 +171,7 @@ My browser: ${navigator.userAgent}`
       ]
     }
   );
-};
+}
 export {
   DefaultErrorFallback
 };