@tldraw/editor 5.3.0-next.91d2a20b898c → 5.3.0-next.aefb8773a7eb

package/dist-cjs/lib/TldrawEditor.js.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 { 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 } from './license/LicenseProvider'\nimport { Watermark } from './license/Watermark'\nimport { TldrawOptions } from './options'\nimport { TLDeepLinkOptions } from './utils/deepLinks'\nimport { getGlobalDocument } 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 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<EditorComponentsProvider overrides={components}>\n\t\t\t\t\t\t\t\t{store ? (\n\t\t\t\t\t\t\t\t\tstore instanceof Store ? (\n\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<TldrawEditorWithReadyStore {...withDefaults} store={store} user={user} />\n\t\t\t\t\t\t\t\t\t) : (\n\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<TldrawEditorWithLoadingStore {...withDefaults} store={store} user={user} />\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t) : (\n\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<TldrawEditorWithOwnStore {...withDefaults} store={store} user={user} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</EditorComponentsProvider>\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</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\tif (user.userPreferences.get().colorScheme === 'dark') {\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])\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\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\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\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": "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",
+  "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 } from './license/LicenseProvider'\nimport { Watermark } from './license/Watermark'\nimport { TldrawOptions } from './options'\nimport { TLDeepLinkOptions } from './utils/deepLinks'\nimport { getGlobalDocument } 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\tif (user.userPreferences.get().colorScheme === 'dark') {\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])\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\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\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\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": "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",
   "names": ["TldrawEditor", "classNames", "LoadingScreen", "autoFocus", "initialState", "cameraOptions", "deepLinks", "themes", "initialTheme", "editor", "container", "React"]
 }

package/dist-cjs/lib/components/EditorPortal.js

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var EditorPortal_exports = {};
+__export(EditorPortal_exports, {
+  EditorPortal: () => EditorPortal,
+  EditorPortalProvider: () => EditorPortalProvider,
+  useEditorPortalHost: () => useEditorPortalHost
+});
+module.exports = __toCommonJS(EditorPortal_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+const EditorPortalContext = (0, import_react.createContext)(null);
+function EditorPortalProvider({
+  host,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorPortalContext.Provider, { value: host, children });
+}
+function useEditorPortalHost() {
+  return (0, import_react.useContext)(EditorPortalContext);
+}
+function EditorPortal({ children }) {
+  const host = useEditorPortalHost();
+  if (!host) return null;
+  return (0, import_react_dom.createPortal)(children, host);
+}
+//# sourceMappingURL=EditorPortal.js.map

package/dist-cjs/lib/components/EditorPortal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/EditorPortal.tsx"],
+  "sourcesContent": ["import { ReactNode, createContext, useContext } from 'react'\nimport { createPortal } from 'react-dom'\n\nconst EditorPortalContext = createContext<HTMLElement | null>(null)\n\n/** @internal */\nexport function EditorPortalProvider({\n\thost,\n\tchildren,\n}: {\n\thost: HTMLElement | null\n\tchildren: ReactNode\n}) {\n\treturn <EditorPortalContext.Provider value={host}>{children}</EditorPortalContext.Provider>\n}\n\n/**\n * The DOM node that {@link EditorPortal} renders into: an empty `display: contents` element the\n * editor renders last among its container's children, after the canvas and after the UI.\n *\n * Null until the container has mounted, so prefer {@link EditorPortal}, which handles that for you.\n *\n * @public\n */\nexport function useEditorPortalHost(): HTMLElement | null {\n\treturn useContext(EditorPortalContext)\n}\n\n/** @public */\nexport interface EditorPortalProps {\n\tchildren: ReactNode\n}\n\n/**\n * Renders its children into the end of the editor's container, escaping the canvas layer.\n *\n * Use this for anything anchored to canvas coordinates that also has to draw over the UI \u2014 a\n * popover on a shape, a comment thread, an annotation panel. The `OnTheCanvas` and\n * `InFrontOfTheCanvas` slots are fixed layers, each its own stacking context, so content mounted\n * there can't paint above whatever outranks its layer whatever z-index it asks for. Mount in\n * whichever slot suits your data flow, wrap the part that needs its own layer in this, and give\n * that part a z-index.\n *\n * This package's own layers stop at 250 (`--tl-layer-canvas-in-front`); above that belongs to\n * whatever renders the UI. In `tldraw` that's `--tl-layer-panels` (300) and `--tl-layer-menus`\n * (400), defined by `tldraw`'s stylesheet rather than this one.\n *\n * Positioning still resolves against the editor's container, so a `position: absolute` child uses\n * ordinary container coordinates.\n *\n * Prefer this over `createPortal(children, useContainer())`, which picks its DOM position from the\n * commit that mounts it \u2014 landing the node ahead of the UI and of the \"skip to main content\" link\n * that only works while nothing precedes it. This host is a real element placed last, so ordering\n * is fixed rather than dependent on mount timing.\n *\n * @example\n * ```tsx\n * // 400 clears tldraw's menus layer; the bare editor's own layers stop at 250.\n * function ShapeAnnotation({ point }: { point: VecLike }) {\n * \treturn (\n * \t\t<EditorPortal>\n * \t\t\t<div style={{ position: 'absolute', left: point.x, top: point.y, zIndex: 400 }}>\n * \t\t\t\tAbove the UI\n * \t\t\t</div>\n * \t\t</EditorPortal>\n * \t)\n * }\n * ```\n *\n * @public\n * @react\n */\nexport function EditorPortal({ children }: EditorPortalProps) {\n\tconst host = useEditorPortalHost()\n\tif (!host) return null\n\treturn createPortal(children, host)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaQ;AAbR,mBAAqD;AACrD,uBAA6B;AAE7B,MAAM,0BAAsB,4BAAkC,IAAI;AAG3D,SAAS,qBAAqB;AAAA,EACpC;AAAA,EACA;AACD,GAGG;AACF,SAAO,4CAAC,oBAAoB,UAApB,EAA6B,OAAO,MAAO,UAAS;AAC7D;AAUO,SAAS,sBAA0C;AACzD,aAAO,yBAAW,mBAAmB;AACtC;AA8CO,SAAS,aAAa,EAAE,SAAS,GAAsB;AAC7D,QAAM,OAAO,oBAAoB;AACjC,MAAI,CAAC,KAAM,QAAO;AAClB,aAAO,+BAAa,UAAU,IAAI;AACnC;",
+  "names": []
+}

package/dist-cjs/lib/components/LiveCollaborators.js

@@ -0,0 +1,102 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LiveCollaborators_exports = {};
+__export(LiveCollaborators_exports, {
+  LiveCollaborators: () => LiveCollaborators
+});
+module.exports = __toCommonJS(LiveCollaborators_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_state_react = require("@tldraw/state-react");
+var import_react = require("react");
+var import_EditorComponentsContext = require("../hooks/EditorComponentsContext");
+var import_useEditor = require("../hooks/useEditor");
+var import_useSafeId = require("../hooks/useSafeId");
+var import_collaborators = require("../utils/collaborators");
+var import_dom = require("../utils/dom");
+var import_getHtmlLayerTransform = require("../utils/getHtmlLayerTransform");
+const LiveCollaborators = (0, import_state_react.track)(function LiveCollaborators2() {
+  const editor = (0, import_useEditor.useEditor)();
+  const { CollaboratorCursor } = (0, import_EditorComponentsContext.useEditorComponents)();
+  const rHtmlLayer = (0, import_react.useRef)(null);
+  (0, import_react.useLayoutEffect)(() => {
+    const elm = rHtmlLayer.current;
+    if (!elm) return;
+    (0, import_dom.setStyleProperty)(elm, "transform", (0, import_getHtmlLayerTransform.getHtmlLayerTransform)(editor));
+  });
+  (0, import_state_react.useQuickReactor)(
+    "position collaborators layer",
+    function positionCollaboratorsWhenCameraMoves() {
+      const transform = (0, import_getHtmlLayerTransform.getHtmlLayerTransform)(editor);
+      (0, import_dom.setStyleProperty)(rHtmlLayer.current, "transform", transform);
+    },
+    [editor]
+  );
+  const collaborators = editor.getVisibleCollaboratorsOnCurrentPage();
+  if (collaborators.length === 0) return null;
+  if (!CollaboratorCursor) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tl-collaborators", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "tl-svg-context", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CursorDef, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: rHtmlLayer, className: "tl-html-layer", children: collaborators.map((presence) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collaborator, { latestPresence: presence }, presence.userId)) })
+  ] });
+});
+const Collaborator = (0, import_state_react.track)(function Collaborator2({
+  latestPresence
+}) {
+  const editor = (0, import_useEditor.useEditor)();
+  const { CollaboratorCursor } = (0, import_EditorComponentsContext.useEditorComponents)();
+  const { userId, chatMessage, userName, cursor, color } = latestPresence;
+  const cursorInViewport = (0, import_state_react.useValue)(
+    "cursor in viewport",
+    () => !!cursor && (0, import_collaborators.isCursorInViewport)(cursor, editor.getViewportPageBounds(), editor.getZoomLevel()),
+    [editor, cursor]
+  );
+  const zoomLevel = editor.getZoomLevel();
+  if (!cursor) return null;
+  if (!cursorInViewport) return null;
+  if (!CollaboratorCursor) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CollaboratorCursor,
+    {
+      className: "tl-collaborator__cursor",
+      userId,
+      point: cursor,
+      color,
+      zoom: zoomLevel,
+      name: userName !== "New User" ? userName : null,
+      chatMessage: chatMessage ?? ""
+    }
+  );
+});
+function CursorDef() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { id: (0, import_useSafeId.useSharedSafeId)("cursor"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { fill: "rgba(0,0,0,.2)", transform: "translate(-11,-11)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { fill: "white", transform: "translate(-12,-12)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { fill: "currentColor", transform: "translate(-12,-12)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m13 10.814v11.188l2.969-2.866.428-.139h4.768z" })
+    ] })
+  ] });
+}
+//# sourceMappingURL=LiveCollaborators.js.map

package/dist-cjs/lib/components/LiveCollaborators.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/components/LiveCollaborators.tsx"],
+  "sourcesContent": ["import { track, useQuickReactor, useValue } from '@tldraw/state-react'\nimport { TLInstancePresence } from '@tldraw/tlschema'\nimport { useLayoutEffect, useRef } from 'react'\nimport { useEditorComponents } from '../hooks/EditorComponentsContext'\nimport { useEditor } from '../hooks/useEditor'\nimport { useSharedSafeId } from '../hooks/useSafeId'\nimport { isCursorInViewport } from '../utils/collaborators'\nimport { setStyleProperty } from '../utils/dom'\nimport { getHtmlLayerTransform } from '../utils/getHtmlLayerTransform'\n\n/**\n * The collaborator cursor layer: a DOM layer stacked as a sibling of the canvas \u2014 above all canvas\n * content, below the in-front layer and the UI panels \u2014 hosting each visible collaborator's cursor\n * (arrow, name tag, chat message). Off-viewport collaborators are the canvas-drawn hint arrows' job\n * (CollaboratorHintOverlayUtil), not this layer's.\n *\n * Cursors are DOM rather than canvas-drawn so their chrome styles and composes like the rest of\n * the UI. Re-render traffic is kept narrow: per-cursor positioning writes `transform` directly\n * (see `useTransform`), so a pointer move re-renders only the moved cursor; the camera transform\n * is written imperatively below, so a pure pan re-renders only cursors whose viewport visibility\n * flips (an equality-gated boolean per cursor); a zoom change re-renders every visible cursor,\n * because each one rescales by `1/zoom`.\n *\n * @public @react\n */\nexport const LiveCollaborators = track(function LiveCollaborators() {\n\tconst editor = useEditor()\n\tconst { CollaboratorCursor } = useEditorComponents()\n\n\t// The inner layer carries the camera transform, so the cursor components position in page\n\t// space exactly as canvas content does. Unlike the canvas's html layers this one unmounts\n\t// while no collaborators are visible, so the transform is written at two moments: on every\n\t// camera change (the reactor), and after every render (the layout effect, like useTransform\n\t// does per cursor) \u2014 the reactor's last run hit a null ref while the layer was unmounted,\n\t// and without the render-time write a reappearing layer would keep an identity transform\n\t// until the next camera move.\n\tconst rHtmlLayer = useRef<HTMLDivElement | null>(null)\n\tuseLayoutEffect(() => {\n\t\tconst elm = rHtmlLayer.current\n\t\tif (!elm) return\n\t\tsetStyleProperty(elm, 'transform', getHtmlLayerTransform(editor))\n\t})\n\tuseQuickReactor(\n\t\t'position collaborators layer',\n\t\tfunction positionCollaboratorsWhenCameraMoves() {\n\t\t\t// Reads the camera even while the layer is unmounted, keeping the subscription alive.\n\t\t\tconst transform = getHtmlLayerTransform(editor)\n\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', transform)\n\t\t},\n\t\t[editor]\n\t)\n\n\t// Visibility (activity state, following, highlighting) is handled by the editor.\n\tconst collaborators = editor.getVisibleCollaboratorsOnCurrentPage()\n\tif (collaborators.length === 0) return null\n\tif (!CollaboratorCursor) return null\n\n\treturn (\n\t\t<div className=\"tl-collaborators\">\n\t\t\t<svg className=\"tl-svg-context\" aria-hidden=\"true\">\n\t\t\t\t<defs>\n\t\t\t\t\t<CursorDef />\n\t\t\t\t</defs>\n\t\t\t</svg>\n\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer\">\n\t\t\t\t{collaborators.map((presence) => (\n\t\t\t\t\t<Collaborator key={presence.userId} latestPresence={presence} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\nconst Collaborator = track(function Collaborator({\n\tlatestPresence,\n}: {\n\tlatestPresence: TLInstancePresence\n}) {\n\tconst editor = useEditor()\n\tconst { CollaboratorCursor } = useEditorComponents()\n\n\tconst { userId, chatMessage, userName, cursor, color } = latestPresence\n\n\t// The viewport read lives inside this equality-gated computed rather than the tracked render:\n\t// pans move the viewport every frame, but this component only needs to know when the cursor\n\t// crosses the edge, so it subscribes to the boolean and re-renders only when it flips.\n\tconst cursorInViewport = useValue(\n\t\t'cursor in viewport',\n\t\t() =>\n\t\t\t!!cursor && isCursorInViewport(cursor, editor.getViewportPageBounds(), editor.getZoomLevel()),\n\t\t[editor, cursor]\n\t)\n\t// The zoom read is tracked directly: the cursor scales by 1/zoom, so zoom changes must\n\t// re-render it. Pure pans leave the zoom value unchanged, so they never invalidate this.\n\tconst zoomLevel = editor.getZoomLevel()\n\n\tif (!cursor) return null\n\n\t// Off-viewport collaborators show as the canvas-drawn hint arrows\n\t// (CollaboratorHintOverlayUtil), which shares this predicate \u2014 only the cursor itself is DOM.\n\tif (!cursorInViewport) return null\n\tif (!CollaboratorCursor) return null\n\treturn (\n\t\t<CollaboratorCursor\n\t\t\tclassName=\"tl-collaborator__cursor\"\n\t\t\tuserId={userId}\n\t\t\tpoint={cursor}\n\t\t\tcolor={color}\n\t\t\tzoom={zoomLevel}\n\t\t\tname={userName !== 'New User' ? userName : null}\n\t\t\tchatMessage={chatMessage ?? ''}\n\t\t/>\n\t)\n})\n\nfunction CursorDef() {\n\treturn (\n\t\t<g id={useSharedSafeId('cursor')}>\n\t\t\t<g fill=\"rgba(0,0,0,.2)\" transform=\"translate(-11,-11)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"white\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"currentColor\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n\t\t\t\t<path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n\t\t\t</g>\n\t\t</g>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0DE;AA1DF,yBAAiD;AAEjD,mBAAwC;AACxC,qCAAoC;AACpC,uBAA0B;AAC1B,uBAAgC;AAChC,2BAAmC;AACnC,iBAAiC;AACjC,mCAAsC;AAiB/B,MAAM,wBAAoB,0BAAM,SAASA,qBAAoB;AACnE,QAAM,aAAS,4BAAU;AACzB,QAAM,EAAE,mBAAmB,QAAI,oDAAoB;AASnD,QAAM,iBAAa,qBAA8B,IAAI;AACrD,oCAAgB,MAAM;AACrB,UAAM,MAAM,WAAW;AACvB,QAAI,CAAC,IAAK;AACV,qCAAiB,KAAK,iBAAa,oDAAsB,MAAM,CAAC;AAAA,EACjE,CAAC;AACD;AAAA,IACC;AAAA,IACA,SAAS,uCAAuC;AAE/C,YAAM,gBAAY,oDAAsB,MAAM;AAC9C,uCAAiB,WAAW,SAAS,aAAa,SAAS;AAAA,IAC5D;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAGA,QAAM,gBAAgB,OAAO,qCAAqC;AAClE,MAAI,cAAc,WAAW,EAAG,QAAO;AACvC,MAAI,CAAC,mBAAoB,QAAO;AAEhC,SACC,6CAAC,SAAI,WAAU,oBACd;AAAA,gDAAC,SAAI,WAAU,kBAAiB,eAAY,QAC3C,sDAAC,UACA,sDAAC,aAAU,GACZ,GACD;AAAA,IACA,4CAAC,SAAI,KAAK,YAAY,WAAU,iBAC9B,wBAAc,IAAI,CAAC,aACnB,4CAAC,gBAAmC,gBAAgB,YAAjC,SAAS,MAAkC,CAC9D,GACF;AAAA,KACD;AAEF,CAAC;AAED,MAAM,mBAAe,0BAAM,SAASC,cAAa;AAAA,EAChD;AACD,GAEG;AACF,QAAM,aAAS,4BAAU;AACzB,QAAM,EAAE,mBAAmB,QAAI,oDAAoB;AAEnD,QAAM,EAAE,QAAQ,aAAa,UAAU,QAAQ,MAAM,IAAI;AAKzD,QAAM,uBAAmB;AAAA,IACxB;AAAA,IACA,MACC,CAAC,CAAC,cAAU,yCAAmB,QAAQ,OAAO,sBAAsB,GAAG,OAAO,aAAa,CAAC;AAAA,IAC7F,CAAC,QAAQ,MAAM;AAAA,EAChB;AAGA,QAAM,YAAY,OAAO,aAAa;AAEtC,MAAI,CAAC,OAAQ,QAAO;AAIpB,MAAI,CAAC,iBAAkB,QAAO;AAC9B,MAAI,CAAC,mBAAoB,QAAO;AAChC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,MAAM;AAAA,MACN,MAAM,aAAa,aAAa,WAAW;AAAA,MAC3C,aAAa,eAAe;AAAA;AAAA,EAC7B;AAEF,CAAC;AAED,SAAS,YAAY;AACpB,SACC,6CAAC,OAAE,QAAI,kCAAgB,QAAQ,GAC9B;AAAA,iDAAC,OAAE,MAAK,kBAAiB,WAAU,sBAClC;AAAA,kDAAC,UAAK,GAAE,uDAAsD;AAAA,MAC9D,4CAAC,UAAK,GAAE,0DAAyD;AAAA,OAClE;AAAA,IACA,6CAAC,OAAE,MAAK,SAAQ,WAAU,sBACzB;AAAA,kDAAC,UAAK,GAAE,uDAAsD;AAAA,MAC9D,4CAAC,UAAK,GAAE,0DAAyD;AAAA,OAClE;AAAA,IACA,6CAAC,OAAE,MAAK,gBAAe,WAAU,sBAChC;AAAA,kDAAC,UAAK,GAAE,mDAAkD;AAAA,MAC1D,4CAAC,UAAK,GAAE,iDAAgD;AAAA,OACzD;AAAA,KACD;AAEF;",
+  "names": ["LiveCollaborators", "Collaborator"]
+}

package/dist-cjs/lib/components/default-components/DefaultCanvas.js

@@ -48,9 +48,10 @@ var import_useFixSafariDoubleTapZoomPencilEvents = require("../../hooks/useFixSa
 var import_useGestureEvents = require("../../hooks/useGestureEvents");
 var import_useScreenBounds = require("../../hooks/useScreenBounds");
 var import_useShapeCulling = require("../../hooks/useShapeCulling");
-var import_utils2 = require("../../primitives/utils");
 var import_debug_flags = require("../../utils/debug-flags");
 var import_dom = require("../../utils/dom");
+var import_getHtmlLayerTransform = require("../../utils/getHtmlLayerTransform");
+var import_LiveCollaborators = require("../LiveCollaborators");
 var import_MenuClickCapture = require("../MenuClickCapture");
 var import_Shape = require("../Shape");
 var import_CanvasOverlays = require("./CanvasOverlays");
@@ -107,15 +108,7 @@ function DefaultCanvas({ className }) {
   (0, import_state_react.useQuickReactor)(
     "position layers",
     function positionLayersWhenCameraMoves() {
-      const { x, y, z } = editor.getCamera();
-      const offset = z >= 1 ? (0, import_utils.modulate)(z, [1, 8], [0.125, 0.5], true) : (0, import_utils.modulate)(z, [0.1, 1], [-2, 0.125], true);
-      (0, import_dom.setStyleProperty)(
-        rHtmlLayer.current,
-        "transform",
-        `scale(${(0, import_utils2.toDomPrecision)(z)}) translate(${(0, import_utils2.toDomPrecision)(
-          x + offset
-        )}px,${(0, import_utils2.toDomPrecision)(y + offset)}px)`
-      );
+      (0, import_dom.setStyleProperty)(rHtmlLayer.current, "transform", (0, import_getHtmlLayerTransform.getHtmlLayerTransform)(editor));
     },
     [editor, container]
   );
@@ -165,6 +158,7 @@ function DefaultCanvas({ className }) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InFrontOfTheCanvasWrapper, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveCollaborators.LiveCollaborators, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuClickCapture.MenuClickCapture, {})
   ] });
 }

package/dist-cjs/lib/components/default-components/DefaultCanvas.js.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 { modulate, 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 { toDomPrecision } from '../../primitives/utils'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { setStyleProperty } from '../../utils/dom'\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\tconst { x, y, z } = editor.getCamera()\n\n\t\t\t// Because the html container has a width/height of 1px, we\n\t\t\t// need to create a small offset when zoomed to ensure that\n\t\t\t// the html container and svg container are lined up exactly.\n\t\t\tconst offset =\n\t\t\t\tz >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)\n\n\t\t\tsetStyleProperty(\n\t\t\t\trHtmlLayer.current,\n\t\t\t\t'transform',\n\t\t\t\t`scale(${toDomPrecision(z)}) translate(${toDomPrecision(\n\t\t\t\t\tx + offset\n\t\t\t\t)}px,${toDomPrecision(y + offset)}px)`\n\t\t\t)\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<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": ["import_utils", "classNames"]
+  "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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",
+  "names": ["classNames"]
 }

package/dist-cjs/lib/components/default-components/DefaultCursor.js

@@ -0,0 +1,59 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DefaultCursor_exports = {};
+__export(DefaultCursor_exports, {
+  DefaultCursor: () => DefaultCursor
+});
+module.exports = __toCommonJS(DefaultCursor_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_classnames = __toESM(require("classnames"), 1);
+var import_react = require("react");
+var import_useSafeId = require("../../hooks/useSafeId");
+var import_useTransform = require("../../hooks/useTransform");
+const DefaultCursor = (0, import_react.memo)(function DefaultCursor2({
+  className,
+  zoom,
+  point,
+  color,
+  name,
+  chatMessage
+}) {
+  const rCursor = (0, import_react.useRef)(null);
+  (0, import_useTransform.useTransform)(rCursor, point?.x, point?.y, 1 / zoom);
+  const cursorId = (0, import_useSafeId.useSharedSafeId)("cursor");
+  if (!point) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: rCursor, className: (0, import_classnames.default)("tl-collaborators__item", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "tl-cursor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("use", { href: `#${cursorId}`, color }) }),
+    chatMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      name && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tl-nametag-title", style: { color }, children: name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tl-nametag-chat", style: { backgroundColor: color }, children: chatMessage })
+    ] }) : name && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tl-nametag", style: { backgroundColor: color }, children: name })
+  ] });
+});
+//# sourceMappingURL=DefaultCursor.js.map

package/dist-cjs/lib/components/default-components/DefaultCursor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/components/default-components/DefaultCursor.tsx"],
+  "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\n\n/** @public */\nexport interface TLCursorProps {\n\tuserId: string\n\tclassName?: string\n\tpoint: VecModel | null\n\tzoom: number\n\tcolor?: string\n\tname: string | null\n\tchatMessage: string\n}\n\n/**\n * The default collaborator cursor: the arrow glyph plus a name tag or chat bubble. The arrow is a\n * `<use>` of a shared `<defs>` symbol that `LiveCollaborators` renders, so a `DefaultCursor`\n * used outside that layer draws no arrow.\n *\n * @public @react\n */\nexport const DefaultCursor = memo(function DefaultCursor({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tname,\n\tchatMessage,\n}: TLCursorProps) {\n\tconst rCursor = useRef<HTMLDivElement>(null)\n\tuseTransform(rCursor, point?.x, point?.y, 1 / zoom)\n\n\tconst cursorId = useSharedSafeId('cursor')\n\n\tif (!point) return null\n\n\treturn (\n\t\t<div ref={rCursor} className={classNames('tl-collaborators__item', className)}>\n\t\t\t<svg className=\"tl-cursor\" aria-hidden=\"true\">\n\t\t\t\t<use href={`#${cursorId}`} color={color} />\n\t\t\t</svg>\n\t\t\t{chatMessage ? (\n\t\t\t\t<>\n\t\t\t\t\t{name && (\n\t\t\t\t\t\t<div className=\"tl-nametag-title\" style={{ color }}>\n\t\t\t\t\t\t\t{name}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className=\"tl-nametag-chat\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{chatMessage}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\tname && (\n\t\t\t\t\t<div className=\"tl-nametag\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t)}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CI;AAzCJ,wBAAuB;AACvB,mBAA6B;AAC7B,uBAAgC;AAChC,0BAA6B;AAoBtB,MAAM,oBAAgB,mBAAK,SAASA,eAAc;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkB;AACjB,QAAM,cAAU,qBAAuB,IAAI;AAC3C,wCAAa,SAAS,OAAO,GAAG,OAAO,GAAG,IAAI,IAAI;AAElD,QAAM,eAAW,kCAAgB,QAAQ;AAEzC,MAAI,CAAC,MAAO,QAAO;AAEnB,SACC,6CAAC,SAAI,KAAK,SAAS,eAAW,kBAAAC,SAAW,0BAA0B,SAAS,GAC3E;AAAA,gDAAC,SAAI,WAAU,aAAY,eAAY,QACtC,sDAAC,SAAI,MAAM,IAAI,QAAQ,IAAI,OAAc,GAC1C;AAAA,IACC,cACA,4EACE;AAAA,cACA,4CAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,MAAM,GAC/C,gBACF;AAAA,MAED,4CAAC,SAAI,WAAU,mBAAkB,OAAO,EAAE,iBAAiB,MAAM,GAC/D,uBACF;AAAA,OACD,IAEA,QACC,4CAAC,SAAI,WAAU,cAAa,OAAO,EAAE,iBAAiB,MAAM,GAC1D,gBACF;AAAA,KAGH;AAEF,CAAC;",
+  "names": ["DefaultCursor", "classNames"]
+}

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

@@ -5171,7 +5171,9 @@ class Editor extends import_eventemitter3.default {
         const index = (0, import_utils.getIndexBetween)(originalShape.index, siblingAbove?.index);
         shape.index = index;
       });
-      const shapesToCreate = shapesToCreateWithOriginals.map(({ shape }) => shape);
+      const shapesToCreate = shapesToCreateWithOriginals.map(({ shape, originalShape }) => {
+        return this.getShapeUtil(shape).onBeforeDuplicate?.(originalShape, shape) ?? shape;
+      });
       if (!this.canCreateShapes(shapesToCreate)) {
         alertMaxShapes(this);
         return;
@@ -7197,7 +7199,10 @@ class Editor extends import_eventemitter3.default {
     const rootShapes = [];
     const newShapes = shapes.map((oldShape) => {
       const newId = shapeIdMap.get(oldShape.id);
-      const newShape = { ...oldShape, id: newId };
+      let newShape = { ...oldShape, id: newId };
+      if (!preserveIds) {
+        newShape = this.getShapeUtil(newShape).onBeforeDuplicate?.(oldShape, newShape) ?? newShape;
+      }
       if (rootShapeIds.includes(oldShape.id)) {
         newShape.parentId = currentPageId;
         rootShapes.push(newShape);