@tldraw/editor 4.4.0-canary.ea8833f5994b → 4.4.0-canary.eb3292ce88a3

package/dist-cjs/index.d.ts

@@ -857,6 +857,7 @@ export declare const defaultTldrawOptions: {
     readonly actionShortcutsLocation: "swap";
     readonly adjacentShapeMargin: 10;
     readonly animationMediumMs: 320;
+    readonly camera: TLCameraOptions;
     readonly cameraMovingTimeoutMs: 64;
     readonly cameraSlideFriction: 0.09;
     readonly coarseDragDistanceSquared: 36;
@@ -868,6 +869,7 @@ export declare const defaultTldrawOptions: {
     readonly createTextOnCanvasDoubleClick: true;
     readonly debouncedZoom: true;
     readonly debouncedZoomThreshold: 500;
+    readonly deepLinks: undefined;
     readonly defaultSvgPadding: 32;
     readonly doubleClickDurationMs: 450;
     readonly dragDistanceSquared: 16;
@@ -909,9 +911,11 @@ export declare const defaultTldrawOptions: {
     readonly maxShapesPerPage: 4000;
     readonly multiClickDurationMs: 200;
     readonly nonce: undefined;
+    readonly quickZoomPreservesScreenBounds: true;
     readonly snapThreshold: 8;
     readonly spacebarPanning: true;
     readonly temporaryAssetPreviewLifetimeMs: 180000;
+    readonly text: {};
     readonly textShadowLod: 0.35;
     readonly tooltipDelayMs: 700;
     readonly uiCoarseDragDistanceSquared: 625;
@@ -1011,7 +1015,7 @@ export declare class EdgeScrollManager {
 /** @public */
 export declare class Editor extends EventEmitter<TLEventMap> {
     readonly id: string;
-    constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, textOptions, initialState, autoFocus, inferDarkMode, options, getShapeVisibility, fontAssetUrls, }: TLEditorOptions);
+    constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus, inferDarkMode, options: _options, textOptions: _textOptions, getShapeVisibility, fontAssetUrls, }: TLEditorOptions);
     private readonly _getShapeVisibility?;
     private getIsShapeHiddenCache;
     isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
@@ -6844,22 +6848,28 @@ export declare interface TldrawEditorBaseProps {
     inferDarkMode?: boolean;
     /**
      * Camera options for the editor.
+     *
+     * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
      */
     cameraOptions?: Partial<TLCameraOptions>;
-    /**
-     * Text options for the editor.
-     */
-    textOptions?: TLTextOptions;
     /**
      * Options for the editor.
      */
     options?: Partial<TldrawOptions>;
+    /**
+     * Text options for the editor.
+     *
+     * @deprecated Use `options.text` instead. This prop will be removed in a future release.
+     */
+    textOptions?: TLTextOptions;
     /**
      * The license key.
      */
     licenseKey?: string;
     /**
      * Options for syncing the editor's camera state with the URL.
+     *
+     * @deprecated Use `options.deepLinks` instead. This prop will be removed in a future release.
      */
     deepLinks?: TLDeepLinkOptions | true;
     /**
@@ -7064,6 +7074,37 @@ export declare interface TldrawOptions {
      * The distance (in screen pixels) at which shapes snap to guides and other shapes.
      */
     readonly snapThreshold: number;
+    /**
+     * Options for the editor's camera. These are the initial camera options.
+     * Use {@link Editor.setCameraOptions} to update camera options at runtime.
+     */
+    readonly camera: Partial<TLCameraOptions>;
+    /**
+     * Options for the editor's text rendering. These include TipTap configuration and
+     * font handling. These are the initial text options and cannot be changed at runtime.
+     */
+    readonly text: TLTextOptions;
+    /**
+     * Options for syncing the editor's camera state with the URL. Set to `true` to enable
+     * with default options, or pass an options object to customize behavior.
+     *
+     * @example
+     * ```tsx
+     * // Enable with defaults
+     * <Tldraw options={{ deepLinks: true }} />
+     *
+     * // Enable with custom options
+     * <Tldraw options={{ deepLinks: { param: 'd', debounceMs: 500 } }} />
+     * ```
+     */
+    readonly deepLinks: TLDeepLinkOptions | true | undefined;
+    /**
+     * Whether the quick-zoom brush preserves its screen-pixel size when the user
+     * zooms the overview. When true, zooming in shrinks the target viewport (higher
+     * return zoom); zooming out expands it. When false, the brush keeps the original
+     * viewport's page dimensions regardless of overview zoom changes.
+     */
+    readonly quickZoomPreservesScreenBounds: boolean;
 }
 
 /** @public */
@@ -7148,10 +7189,17 @@ export declare interface TLEditorOptions {
     inferDarkMode?: boolean;
     /**
      * Options for the editor's camera.
+     *
+     * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
      */
     cameraOptions?: Partial<TLCameraOptions>;
-    textOptions?: TLTextOptions;
     options?: Partial<TldrawOptions>;
+    /**
+     * Text options for the editor.
+     *
+     * @deprecated Use `options.text` instead. This prop will be removed in a future release.
+     */
+    textOptions?: TLTextOptions;
     licenseKey?: string;
     fontAssetUrls?: {
         [key: string]: string | undefined;
@@ -8019,17 +8067,35 @@ export declare interface TLShapeUtilCanBeLaidOutOpts {
 
 /**
  * Options passed to {@link ShapeUtil.canBind}. A binding that could be made. At least one of
- * `fromShapeType` or `toShapeType` will belong to this shape util.
+ * `fromShape` or `toShape` will belong to this shape util.
+ *
+ * The shapes may be full {@link @tldraw/tlschema#TLShape} objects when available, or just
+ * `{ type }` stubs when the shape hasn't been created yet (e.g. during arrow creation). Use
+ * `'id' in shape` to check whether the full shape is available.
  *
  * @public
  */
 export declare interface TLShapeUtilCanBindOpts<Shape extends TLShape = TLShape> {
-    /** The type of shape referenced by the `fromId` of the binding. */
-    fromShapeType: TLShape['type'];
-    /** The type of shape referenced by the `toId` of the binding. */
-    toShapeType: TLShape['type'];
+    /** The shape referenced by the `fromId` of the binding, or a `{ type }` stub if unavailable. */
+    fromShape: {
+        type: TLShape['type'];
+    } | TLShape;
+    /** The shape referenced by the `toId` of the binding, or a `{ type }` stub if unavailable. */
+    toShape: {
+        type: TLShape['type'];
+    } | TLShape;
     /** The type of binding. */
     bindingType: string;
+    /**
+     * The type of shape referenced by the `fromId` of the binding.
+     * @deprecated Use `fromShape.type` instead.
+     */
+    fromShapeType: TLShape['type'];
+    /**
+     * The type of shape referenced by the `toId` of the binding.
+     * @deprecated Use `toShape.type` instead.
+     */
+    toShapeType: TLShape['type'];
 }
 
 /** @public */

package/dist-cjs/index.js

@@ -372,7 +372,7 @@ var import_uniq = require("./lib/utils/uniq");
 var import_window_open = require("./lib/utils/window-open");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/editor",
-  "4.4.0-canary.ea8833f5994b",
+  "4.4.0-canary.eb3292ce88a3",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/lib/TldrawEditor.js

@@ -72,18 +72,32 @@ const TldrawEditor = (0, import_react.memo)(function TldrawEditor2({
   className,
   user: _user,
   options: _options,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  textOptions: _textOptions,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  deepLinks: _deepLinks,
   ...rest
 }) {
   const [container, setContainer] = (0, import_react.useState)(null);
   const user = (0, import_react.useMemo)(() => _user ?? (0, import_createTLUser.createTLUser)(), [_user]);
   const ErrorFallback = components?.ErrorFallback === void 0 ? import_DefaultErrorFallback.DefaultErrorFallback : components?.ErrorFallback;
+  const mergedOptions = (0, import_react.useMemo)(() => {
+    let result = _options;
+    if (_textOptions) {
+      result = { ...result, text: result?.text ?? _textOptions };
+    }
+    if (_deepLinks !== void 0) {
+      result = { ...result, deepLinks: result?.deepLinks ?? _deepLinks };
+    }
+    return result;
+  }, [_options, _textOptions, _deepLinks]);
   const withDefaults = {
     ...rest,
     shapeUtils: rest.shapeUtils ?? EMPTY_SHAPE_UTILS_ARRAY,
     bindingUtils: rest.bindingUtils ?? EMPTY_BINDING_UTILS_ARRAY,
     tools: rest.tools ?? EMPTY_TOOLS_ARRAY,
     components,
-    options: (0, import_useIdentity.useShallowObjectIdentity)(_options)
+    options: (0, import_useIdentity.useShallowObjectIdentity)(mergedOptions)
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
@@ -182,11 +196,10 @@ function TldrawEditorWithReadyStore({
   initialState,
   autoFocus = true,
   inferDarkMode,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   cameraOptions,
-  textOptions,
   options,
   licenseKey,
-  deepLinks: _deepLinks,
   getShapeVisibility,
   assetUrls
 }) {
@@ -194,6 +207,7 @@ function TldrawEditorWithReadyStore({
   const container = (0, import_useContainer.useContainer)();
   const [editor, setEditor] = (0, import_useRefState.useRefState)(null);
   const canvasRef = (0, import_react.useRef)(null);
+  const _deepLinks = options?.deepLinks;
   const deepLinks = (0, import_useIdentity.useShallowObjectIdentity)(_deepLinks === true ? {} : _deepLinks);
   const editorOptionsRef = (0, import_react.useRef)({
     // for these, it's because they're only used when the editor first mounts:
@@ -228,7 +242,6 @@ function TldrawEditorWithReadyStore({
         autoFocus: autoFocus2,
         inferDarkMode: inferDarkMode2,
         cameraOptions: cameraOptions2,
-        textOptions,
         options,
         licenseKey,
         getShapeVisibility,
@@ -259,7 +272,6 @@ function TldrawEditorWithReadyStore({
       setEditor,
       licenseKey,
       getShapeVisibility,
-      textOptions,
       assetUrls
     ]
   );
@@ -270,10 +282,10 @@ function TldrawEditorWithReadyStore({
     }
   }, [editor, deepLinks]);
   (0, import_react.useLayoutEffect)(() => {
-    if (editor && cameraOptions) {
-      editor.setCameraOptions(cameraOptions);
+    if (editor && (cameraOptions || options?.camera)) {
+      editor.setCameraOptions({ ...cameraOptions, ...options?.camera });
     }
-  }, [editor, cameraOptions]);
+  }, [editor, cameraOptions, options?.camera]);
   const crashingError = (0, import_react.useSyncExternalStore)(
     (0, import_react.useCallback)(
       (onStoreChange) => {

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 { TLShape, TLStore, TLStoreSnapshot } 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 { TLStoreBaseOptions } from './config/createTLStore'\nimport { createTLUser, TLUser } from './config/createTLUser'\nimport { TLAnyBindingUtilConstructor } from './config/defaultBindings'\nimport { TLAnyShapeUtilConstructor } from './config/defaultShapes'\nimport { TLEditorSnapshot } from './config/TLEditorSnapshot'\nimport { Editor } from './editor/Editor'\nimport { TLStateNodeConstructor } from './editor/tools/StateNode'\nimport { TLCameraOptions } from './editor/types/misc-types'\nimport { ContainerProvider, useContainer } from './hooks/useContainer'\nimport { useCursor } from './hooks/useCursor'\nimport { useDarkMode } from './hooks/useDarkMode'\nimport { EditorProvider, useEditor } from './hooks/useEditor'\nimport {\n\tEditorComponentsProvider,\n\tTLEditorComponents,\n\tuseEditorComponents,\n} 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 { 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 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?: TLUser\n\n\t/**\n\t * Whether to infer dark mode from the user's OS. Defaults to false.\n\t */\n\tinferDarkMode?: boolean\n\n\t/**\n\t * Camera options for the editor.\n\t */\n\tcameraOptions?: Partial<TLCameraOptions>\n\n\t/**\n\t * Text options for the editor.\n\t */\n\ttextOptions?: TLTextOptions\n\n\t/**\n\t * Options for the editor.\n\t */\n\toptions?: Partial<TldrawOptions>\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\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_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...rest\n}: TldrawEditorProps) {\n\tconst [container, setContainer] = useState<HTMLElement | null>(null)\n\tconst user = useMemo(() => _user ?? createTLUser(), [_user])\n\n\tconst ErrorFallback =\n\t\tcomponents?.ErrorFallback === undefined ? DefaultErrorFallback : components?.ErrorFallback\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\ttools: rest.tools ?? EMPTY_TOOLS_ARRAY,\n\t\tcomponents,\n\t\toptions: useShallowObjectIdentity(_options),\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: TLUser },\n\t\t'shapeUtils' | 'bindingUtils' | 'tools'\n\t>\n) {\n\tconst {\n\t\tdefaultName,\n\t\tsnapshot,\n\t\tinitialData,\n\t\tshapeUtils,\n\t\tbindingUtils,\n\t\tpersistenceKey,\n\t\tsessionId,\n\t\tuser,\n\t\tassets,\n\t\tmigrations,\n\t} = props\n\n\tconst syncedStore = useLocalStore({\n\t\tshapeUtils,\n\t\tbindingUtils,\n\t\tinitialData,\n\t\tpersistenceKey,\n\t\tsessionId,\n\t\tdefaultName,\n\t\tsnapshot,\n\t\tassets,\n\t\tmigrations,\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: TLUser },\n\t'shapeUtils' | 'bindingUtils' | '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 = () => document.location.search.includes('tldraw_preserve_focus') // || !document.hasFocus() // breaks in nextjs\n\nfunction TldrawEditorWithReadyStore({\n\tonMount,\n\tchildren,\n\tstore,\n\ttools,\n\tshapeUtils,\n\tbindingUtils,\n\tuser,\n\tinitialState,\n\tautoFocus = true,\n\tinferDarkMode,\n\tcameraOptions,\n\ttextOptions,\n\toptions,\n\tlicenseKey,\n\tdeepLinks: _deepLinks,\n\tgetShapeVisibility,\n\tassetUrls,\n}: Required<\n\tTldrawEditorProps & {\n\t\tstore: TLStore\n\t\tuser: TLUser\n\t},\n\t'shapeUtils' | 'bindingUtils' | '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 = 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\tinferDarkMode,\n\t\tinitialState,\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})\n\n\tuseLayoutEffect(() => {\n\t\teditorOptionsRef.current = {\n\t\t\tautoFocus: autoFocus && !noAutoFocus(),\n\t\t\tinferDarkMode,\n\t\t\tinitialState,\n\t\t\tcameraOptions,\n\t\t\tdeepLinks,\n\t\t}\n\t}, [autoFocus, inferDarkMode, initialState, cameraOptions, deepLinks])\n\n\tuseLayoutEffect(\n\t\t() => {\n\t\t\tconst { autoFocus, inferDarkMode, initialState, cameraOptions, deepLinks } =\n\t\t\t\teditorOptionsRef.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\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\tinferDarkMode,\n\t\t\t\tcameraOptions,\n\t\t\t\ttextOptions,\n\t\t\t\toptions,\n\t\t\t\tlicenseKey,\n\t\t\t\tgetShapeVisibility,\n\t\t\t\tfontAssetUrls: assetUrls?.fonts,\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\tbindingUtils,\n\t\t\tcontainer,\n\t\t\toptions,\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\ttextOptions,\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\tuseLayoutEffect(() => {\n\t\tif (editor && cameraOptions) {\n\t\t\teditor.setCameraOptions(cameraOptions)\n\t\t}\n\t}, [editor, cameraOptions])\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\teditor.getContainer().addEventListener('pointerdown', handleFocusOnPointerDown)\n\t\t\t\tdocument.body.addEventListener('pointerdown', handleBlurOnPointerDown)\n\n\t\t\t\treturn () => {\n\t\t\t\t\teditor.getContainer()?.removeEventListener('pointerdown', handleFocusOnPointerDown)\n\t\t\t\t\tdocument.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 teardown\n\t})\n\n\tReact.useLayoutEffect(() => {\n\t\tif (editor) return onMountEvent?.(editor)\n\t}, [editor, onMountEvent])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmSU;AAAA;AAAA;AAAA;AAnSV,mBAAyC;AAEzC,mBAAwC;AACxC,wBAAuB;AACvB,mBAUO;AACP,qBAAwB;AACxB,kCAAqC;AACrC,2BAAsC;AAEtC,0BAAqC;AAIrC,oBAAuB;AAGvB,0BAAgD;AAChD,uBAA0B;AAC1B,yBAA4B;AAC5B,uBAA0C;AAC1C,iCAIO;AACP,sBAAyB;AACzB,4BAA+B;AAC/B,yBAAyC;AACzC,2BAA8B;AAC9B,yBAA4B;AAC5B,+BAAkC;AAClC,wBAA2B;AAC3B,6BAAgC;AAChC,uBAA0B;AAkM1B,MAAM,0BAA0B,CAAC;AACjC,MAAM,4BAA4B,CAAC;AACnC,MAAM,oBAAoB,CAAC;AAEpB,MAAM,qBAAqB;AAG3B,MAAM,mBAAe,mBAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,SAAS;AAAA,EACT,GAAG;AACJ,GAAsB;AACrB,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,IAAI;AACnE,QAAM,WAAO,sBAAQ,MAAM,aAAS,kCAAa,GAAG,CAAC,KAAK,CAAC;AAE3D,QAAM,gBACL,YAAY,kBAAkB,SAAY,mDAAuB,YAAY;AAK9E,QAAM,eAAe;AAAA,IACpB,GAAG;AAAA,IACH,YAAY,KAAK,cAAc;AAAA,IAC/B,cAAc,KAAK,gBAAgB;AAAA,IACnC,OAAO,KAAK,SAAS;AAAA,IACrB;AAAA,IACA,aAAS,6CAAyB,QAAQ;AAAA,EAC3C;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,eAAa;AAAA,MACb,WAAW;AAAA,MACX,eAAW,kBAAAC,SAAW,GAAG,kBAAkB,oBAAoB,SAAS;AAAA,MACxE,UAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY,UAAU,YAAY;AAAA,MAElC;AAAA,QAAC;AAAA;AAAA,UACA,UAAU;AAAA,UACV,SAAS,CAAC,cAAU,4BAAc,OAAO,EAAE,MAAM,EAAE,QAAQ,0BAA0B,EAAE,CAAC;AAAA,UAEvF,uBACA,4CAAC,0CAAgB,YAAY,KAAK,YACjC,sDAAC,yCAAkB,WAClB,sDAAC,uDAAyB,WAAW,YACnC,kBACA,iBAAiB,qBAEhB,4CAAC,8BAA4B,GAAG,cAAc,OAAc,MAAY;AAAA;AAAA,YAGxE,4CAAC,gCAA8B,GAAG,cAAc,OAAc,MAAY;AAAA;AAAA;AAAA,YAI3E,4CAAC,4BAA0B,GAAG,cAAc,OAAc,MAAY;AAAA,aAExE,GACD,GACD;AAAA;AAAA,MAEF;AAAA;AAAA,EACD;AAEF,CAAC;AAED,SAAS,yBACR,OAIC;AACD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAEJ,QAAM,kBAAc,oCAAc;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,SAAO,4CAAC,gCAA8B,GAAG,OAAO,OAAO,aAAa,MAAY;AACjF;AAEA,MAAM,mCAA+B,mBAAK,SAAS,0BAA0B;AAAA,EAC5E;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAGG;AACF,QAAM,gBAAY,kCAAa;AAE/B,oCAAgB,MAAM;AACrB,QAAI,KAAK,gBAAgB,IAAI,EAAE,gBAAgB,QAAQ;AACtD,gBAAU,UAAU,OAAO,iBAAiB;AAC5C,gBAAU,UAAU,IAAI,gBAAgB;AAAA,IACzC;AAAA,EACD,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,EAAE,eAAAC,eAAc,QAAI,gDAAoB;AAE9C,UAAQ,MAAM,QAAQ;AAAA,IACrB,KAAK,SAAS;AAIb,YAAM,MAAM;AAAA,IACb;AAAA,IACA,KAAK,WAAW;AACf,aAAOA,iBAAgB,4CAACA,gBAAA,EAAc,IAAK;AAAA,IAC5C;AAAA,IACA,KAAK,cAAc;AAClB;AAAA,IACD;AAAA,IACA,KAAK,gBAAgB;AACpB;AAAA,IACD;AAAA,IACA,KAAK,iBAAiB;AACrB;AAAA,IACD;AAAA,EACD;AAEA,SAAO,4CAAC,8BAA4B,GAAG,MAAM,OAAO,MAAM,OAAO,MAAY;AAC9E,CAAC;AAED,MAAM,cAAc,MAAM,SAAS,SAAS,OAAO,SAAS,uBAAuB;AAEnF,SAAS,2BAA2B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACD,GAMG;AACF,QAAM,EAAE,cAAc,QAAI,gDAAoB;AAC9C,QAAM,gBAAY,kCAAa;AAE/B,QAAM,CAAC,QAAQ,SAAS,QAAI,gCAA2B,IAAI;AAE3D,QAAM,gBAAY,qBAA8B,IAAI;AAEpD,QAAM,gBAAY,6CAAyB,eAAe,OAAO,CAAC,IAAI,UAAU;AAGhF,QAAM,uBAAmB,qBAAO;AAAA;AAAA,IAE/B,WAAW,aAAa,CAAC,YAAY;AAAA,IACrC;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACD,CAAC;AAED,oCAAgB,MAAM;AACrB,qBAAiB,UAAU;AAAA,MAC1B,WAAW,aAAa,CAAC,YAAY;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,GAAG,CAAC,WAAW,eAAe,cAAc,eAAe,SAAS,CAAC;AAErE;AAAA,IACC,MAAM;AACL,YAAM,EAAE,WAAAC,YAAW,eAAAC,gBAAe,cAAAC,eAAc,eAAAC,gBAAe,WAAAC,WAAU,IACxE,iBAAiB;AAClB,YAAMC,UAAS,IAAI,qBAAO;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,MAAM;AAAA,QACpB;AAAA,QACA,cAAAH;AAAA;AAAA,QAEA,WAAAF;AAAA,QACA,eAAAC;AAAA,QACA,eAAAE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,WAAW;AAAA,MAC3B,CAAC;AAED,MAAAE,QAAO,2BAA2B,UAAU,WAAW,SAAS;AAIhE,UAAID,YAAW;AACd,YAAI,CAACA,YAAW,QAAQ;AAEvB,UAAAC,QAAO,mBAAmBD,UAAS;AAAA,QACpC,OAAO;AAEN,UAAAC,QAAO,mBAAmB,EAAE,GAAGD,YAAW,KAAKA,WAAU,OAAOC,OAAM,EAAE,CAAC;AAAA,QAC1E;AAAA,MACD;AAEA,gBAAUA,OAAM;AAEhB,aAAO,MAAM;AACZ,QAAAA,QAAO,QAAQ;AAAA,MAChB;AAAA,IACD;AAAA;AAAA,IAEA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,oCAAgB,MAAM;AACrB,QAAI,CAAC,OAAQ;AACb,QAAI,WAAW;AACd,aAAO,OAAO,yBAAyB,SAAS;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,QAAQ,SAAS,CAAC;AAGtB,oCAAgB,MAAM;AACrB,QAAI,UAAU,eAAe;AAC5B,aAAO,iBAAiB,aAAa;AAAA,IACtC;AAAA,EACD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,oBAAgB;AAAA,QACrB;AAAA,MACC,CAAC,kBAAkB;AAClB,YAAI,QAAQ;AACX,iBAAO,GAAG,SAAS,aAAa;AAChC,iBAAO,MAAM,OAAO,IAAI,SAAS,aAAa;AAAA,QAC/C;AACA,eAAO,MAAM;AAAA,QAEb;AAAA,MACD;AAAA,MACA,CAAC,MAAM;AAAA,IACR;AAAA,IACA,MAAM,QAAQ,iBAAiB,KAAK;AAAA,EACrC;AAOA;AAAA,IACC,SAAS,+CAA+C;AACvD,UAAI,CAAC,OAAQ;AAEb,eAAS,2BAA2B;AACnC,YAAI,CAAC,OAAQ;AACb,eAAO,MAAM;AAAA,MACd;AAEA,eAAS,0BAA0B;AAClC,YAAI,CAAC,OAAQ;AACb,eAAO,KAAK;AAAA,MACb;AAEA,UAAI,aAAa,YAAY,GAAG;AAC/B,eAAO,aAAa,EAAE,iBAAiB,eAAe,wBAAwB;AAC9E,iBAAS,KAAK,iBAAiB,eAAe,uBAAuB;AAErE,eAAO,MAAM;AACZ,iBAAO,aAAa,GAAG,oBAAoB,eAAe,wBAAwB;AAClF,mBAAS,KAAK,oBAAoB,eAAe,uBAAuB;AAAA,QACzE;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,SAAS;AAAA,EACnB;AAEA,QAAM,CAAC,mBAAmB,mBAAmB,QAAI,uBAGvC,IAAI;AACd,MAAI,mBAAmB;AACvB,MAAI,WAAW,kBAAkB,QAAQ;AACxC,uBAAmB;AAAA,EACpB;AACA,oCAAgB,MAAM;AACrB,QAAI,CAAC,OAAQ;AACb,QAAI,OAAO,QAAQ,+BAA+B,GAAG;AACpD,0BAAoB,EAAE,QAAQ,UAAU,KAAK,CAAC;AAC9C;AAAA,IACD;AAEA,QAAI,cAAc;AAElB,wBAAoB,EAAE,QAAQ,UAAU,MAAM,CAAC;AAE/C,WAAO,MACL,gCAAgC,OAAO,QAAQ,0BAA0B,EACzE,QAAQ,MAAM;AACd,UAAI,YAAa;AACjB,0BAAoB,EAAE,QAAQ,UAAU,KAAK,CAAC;AAAA,IAC/C,CAAC;AAEF,WAAO,MAAM;AACZ,oBAAc;AAAA,IACf;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,EAAE,QAAQ,eAAAN,eAAc,QAAI,gDAAoB;AAEtD,MAAI,CAAC,UAAU,CAAC,kBAAkB,UAAU;AAC3C,WACC,4EACE;AAAA,MAAAA,kBAAiB,4CAACA,gBAAA,EAAc;AAAA,MACjC,4CAAC,SAAI,WAAU,aAAY,KAAK,WAAW;AAAA,OAC5C;AAAA,EAEF;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC;AAAA,MAAC;AAAA;AAAA,QACA,UAAU;AAAA,QACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,gBAAgB,cAAc,KAAK,CAAC;AAAA,QAG1E,0BACA,4CAAC,SAAM,eAA8B,IAErC,4CAAC,mCAAe,QACf,uDAAC,UAAO,SACN;AAAA,uBAAa,SAAS,4CAAC,YAAY,OAAO,SAAW,IAAK;AAAA,UAC3D,4CAAC,8BAAU;AAAA,WACZ,GACD;AAAA;AAAA,IAEF;AAAA;AAEF;AAEA,SAAS,OAAO,EAAE,UAAU,QAAQ,GAAwD;AAC3F,oCAAW;AACX,kCAAU;AACV,sCAAY;AACZ,4CAAe;AACf,kDAAkB;AAClB,aAAW,CAAC,WAAW;AACtB,UAAM,gBAAgB,OAAO,MAAM,MAAM,QAAQ,MAAM;AACvD,UAAM,mBAAmB,UAAU,MAAM;AAEzC,WAAO,MAAM;AACZ,sBAAgB;AAChB,yBAAmB;AAAA,IACpB;AAAA,EACD,CAAC;AAED,SAAO;AACR;AAEA,SAAS,MAAM,EAAE,cAAc,GAAqC;AACnE,QAAM;AACP;AAQO,SAAS,cAAc,EAAE,SAAS,GAAuB;AAC/D,SACC,4CAAC,SAAI,WAAU,cAAa,aAAU,QAAO,UAAU,GACrD,UACF;AAEF;AAGO,SAAS,YAAY,EAAE,SAAS,GAAuB;AAC7D,SAAO,4CAAC,SAAI,WAAU,cAAc,UAAS;AAC9C;AAGO,SAAS,WAAW,SAA4B;AACtD,QAAM,aAAS,4BAAU;AAEzB,QAAM,mBAAe,0BAAS,CAACM,YAAmB;AACjD,QAAI,WAAgC;AAGpC,IAAAA,QAAO;AAAA,MACN,MAAM;AACL,mBAAW,UAAUA,OAAM;AAC3B,QAAAA,QAAO,KAAK,OAAO;AAAA,MACpB;AAAA,MACA,EAAE,SAAS,SAAS;AAAA,IACrB;AACA,WAAO,cAAc;AACrB,WAAO;AAAA,EACR,CAAC;AAED,eAAAC,QAAM,gBAAgB,MAAM;AAC3B,QAAI,OAAQ,QAAO,eAAe,MAAM;AAAA,EACzC,GAAG,CAAC,QAAQ,YAAY,CAAC;AAC1B;",
+  "sourcesContent": ["import { MigrationSequence, Store } from '@tldraw/store'\nimport { TLShape, TLStore, TLStoreSnapshot } 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 { TLStoreBaseOptions } from './config/createTLStore'\nimport { createTLUser, TLUser } from './config/createTLUser'\nimport { TLAnyBindingUtilConstructor } from './config/defaultBindings'\nimport { TLAnyShapeUtilConstructor } from './config/defaultShapes'\nimport { TLEditorSnapshot } from './config/TLEditorSnapshot'\nimport { Editor } from './editor/Editor'\nimport { TLStateNodeConstructor } from './editor/tools/StateNode'\nimport { TLCameraOptions } from './editor/types/misc-types'\nimport { ContainerProvider, useContainer } from './hooks/useContainer'\nimport { useCursor } from './hooks/useCursor'\nimport { useDarkMode } from './hooks/useDarkMode'\nimport { EditorProvider, useEditor } from './hooks/useEditor'\nimport {\n\tEditorComponentsProvider,\n\tTLEditorComponents,\n\tuseEditorComponents,\n} 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 { 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 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?: TLUser\n\n\t/**\n\t * Whether to infer dark mode from the user's OS. Defaults to false.\n\t */\n\tinferDarkMode?: boolean\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_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\tconst [container, setContainer] = useState<HTMLElement | null>(null)\n\tconst user = useMemo(() => _user ?? createTLUser(), [_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\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: TLUser },\n\t\t'shapeUtils' | 'bindingUtils' | 'tools'\n\t>\n) {\n\tconst {\n\t\tdefaultName,\n\t\tsnapshot,\n\t\tinitialData,\n\t\tshapeUtils,\n\t\tbindingUtils,\n\t\tpersistenceKey,\n\t\tsessionId,\n\t\tuser,\n\t\tassets,\n\t\tmigrations,\n\t} = props\n\n\tconst syncedStore = useLocalStore({\n\t\tshapeUtils,\n\t\tbindingUtils,\n\t\tinitialData,\n\t\tpersistenceKey,\n\t\tsessionId,\n\t\tdefaultName,\n\t\tsnapshot,\n\t\tassets,\n\t\tmigrations,\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: TLUser },\n\t'shapeUtils' | 'bindingUtils' | '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 = () => document.location.search.includes('tldraw_preserve_focus') // || !document.hasFocus() // breaks in nextjs\n\nfunction TldrawEditorWithReadyStore({\n\tonMount,\n\tchildren,\n\tstore,\n\ttools,\n\tshapeUtils,\n\tbindingUtils,\n\tuser,\n\tinitialState,\n\tautoFocus = true,\n\tinferDarkMode,\n\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\tcameraOptions,\n\toptions,\n\tlicenseKey,\n\tgetShapeVisibility,\n\tassetUrls,\n}: Required<\n\tTldrawEditorProps & {\n\t\tstore: TLStore\n\t\tuser: TLUser\n\t},\n\t'shapeUtils' | 'bindingUtils' | '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\tinferDarkMode,\n\t\tinitialState,\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})\n\n\tuseLayoutEffect(() => {\n\t\teditorOptionsRef.current = {\n\t\t\tautoFocus: autoFocus && !noAutoFocus(),\n\t\t\tinferDarkMode,\n\t\t\tinitialState,\n\t\t\tcameraOptions,\n\t\t\tdeepLinks,\n\t\t}\n\t}, [autoFocus, inferDarkMode, initialState, cameraOptions, deepLinks])\n\n\tuseLayoutEffect(\n\t\t() => {\n\t\t\tconst { autoFocus, inferDarkMode, initialState, cameraOptions, deepLinks } =\n\t\t\t\teditorOptionsRef.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\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\tinferDarkMode,\n\t\t\t\tcameraOptions,\n\t\t\t\toptions,\n\t\t\t\tlicenseKey,\n\t\t\t\tgetShapeVisibility,\n\t\t\t\tfontAssetUrls: assetUrls?.fonts,\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\tbindingUtils,\n\t\t\tcontainer,\n\t\t\toptions,\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\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\teditor.getContainer().addEventListener('pointerdown', handleFocusOnPointerDown)\n\t\t\t\tdocument.body.addEventListener('pointerdown', handleBlurOnPointerDown)\n\n\t\t\t\treturn () => {\n\t\t\t\t\teditor.getContainer()?.removeEventListener('pointerdown', handleFocusOnPointerDown)\n\t\t\t\t\tdocument.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 teardown\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", "inferDarkMode", "initialState", "cameraOptions", "deepLinks", "editor", "React"]
 }

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

@@ -29,6 +29,7 @@ var import_state_react = require("@tldraw/state-react");
 var import_react = require("react");
 var import_useEditor = require("../hooks/useEditor");
 var import_useEditorComponents = require("../hooks/useEditorComponents");
+var import_useShapeCulling = require("../hooks/useShapeCulling");
 var import_Mat = require("../primitives/Mat");
 var import_areShapesContentEqual = require("../utils/areShapesContentEqual");
 var import_dom = require("../utils/dom");
@@ -57,8 +58,7 @@ const Shape = (0, import_react.memo)(function Shape2({
     width: 0,
     height: 0,
     x: 0,
-    y: 0,
-    isCulled: false
+    y: 0
   });
   (0, import_state_react.useQuickReactor)(
     "set shape stuff",
@@ -101,21 +101,16 @@ const Shape = (0, import_react.memo)(function Shape2({
     (0, import_dom.setStyleProperty)(container, "z-index", index);
     (0, import_dom.setStyleProperty)(bgContainer, "z-index", backgroundIndex);
   }, [opacity, index, backgroundIndex]);
-  (0, import_state_react.useQuickReactor)(
-    "set display",
-    () => {
-      const shape2 = editor.getShape(id);
-      if (!shape2) return;
-      const culledShapes = editor.getCulledShapes();
-      const isCulled = culledShapes.has(id);
-      if (isCulled !== memoizedStuffRef.current.isCulled) {
-        (0, import_dom.setStyleProperty)(containerRef.current, "display", isCulled ? "none" : "block");
-        (0, import_dom.setStyleProperty)(bgContainerRef.current, "display", isCulled ? "none" : "block");
-        memoizedStuffRef.current.isCulled = isCulled;
-      }
-    },
-    [editor]
-  );
+  const { register, unregister } = (0, import_useShapeCulling.useShapeCulling)();
+  (0, import_react.useLayoutEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const isCulled = editor.getCulledShapes().has(id);
+    register(id, container, bgContainerRef.current, isCulled);
+    return () => {
+      unregister(id);
+    };
+  }, [editor, id, register, unregister]);
   const annotateError = (0, import_react.useCallback)(
     (error) => editor.annotateError(error, { origin: "shape", willCrashApp: false }),
     [editor]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/Shape.tsx"],
-  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useStateTracking } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { ShapeUtil } from '../editor/shapes/ShapeUtil'\nimport { useEditor } from '../hooks/useEditor'\nimport { useEditorComponents } from '../hooks/useEditorComponents'\nimport { Mat } from '../primitives/Mat'\nimport { areShapesContentEqual } from '../utils/areShapesContentEqual'\nimport { setStyleProperty } from '../utils/dom'\nimport { OptionalErrorBoundary } from './ErrorBoundary'\n\n/*\nThis component renders shapes on the canvas. There are two stages: positioning\nand styling the shape's container using CSS, and then rendering the shape's \nJSX using its shape util's render method. Rendering the \"inside\" of a shape is\nmore expensive than positioning it or changing its color, so we use memo\nto wrap the inner shape and only re-render it when the shape's props change. \n\nThe shape also receives props for its index and opacity. The index is used to\ndetermine the z-index of the shape, and the opacity is used to set the shape's\nopacity based on its own opacity and that of its parent's.\n*/\nexport const Shape = memo(function Shape({\n\tid,\n\tshape,\n\tutil,\n\tindex,\n\tbackgroundIndex,\n\topacity,\n}: {\n\tid: TLShapeId\n\tshape: TLShape\n\tutil: ShapeUtil\n\tindex: number\n\tbackgroundIndex: number\n\topacity: number\n}) {\n\tconst editor = useEditor()\n\n\tconst { ShapeErrorFallback, ShapeWrapper } = useEditorComponents()\n\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst bgContainerRef = useRef<HTMLDivElement>(null)\n\n\tuseEffect(() => {\n\t\treturn react('load fonts', () => {\n\t\t\tconst fonts = editor.fonts.getShapeFontFaces(id)\n\t\t\teditor.fonts.requestFonts(fonts)\n\t\t})\n\t}, [editor, id])\n\n\tconst memoizedStuffRef = useRef({\n\t\ttransform: '',\n\t\tclipPath: 'none',\n\t\twidth: 0,\n\t\theight: 0,\n\t\tx: 0,\n\t\ty: 0,\n\t\tisCulled: false,\n\t})\n\n\tuseQuickReactor(\n\t\t'set shape stuff',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return // probably the shape was just deleted\n\n\t\t\tconst prev = memoizedStuffRef.current\n\n\t\t\t// Clip path\n\t\t\tconst clipPath = editor.getShapeClipPath(id) ?? 'none'\n\t\t\tif (clipPath !== prev.clipPath) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'clip-path', clipPath)\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'clip-path', clipPath)\n\t\t\t\tprev.clipPath = clipPath\n\t\t\t}\n\n\t\t\t// Page transform\n\t\t\tconst pageTransform = editor.getShapePageTransform(id)\n\t\t\tconst transform = Mat.toCssString(pageTransform)\n\t\t\tconst bounds = editor.getShapeGeometry(shape).bounds\n\n\t\t\t// Update if the tranform has changed\n\t\t\tif (transform !== prev.transform) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'transform', transform)\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'transform', transform)\n\t\t\t\tprev.transform = transform\n\t\t\t}\n\n\t\t\t// Width / Height\n\t\t\tconst width = Math.max(bounds.width, 1)\n\t\t\tconst height = Math.max(bounds.height, 1)\n\n\t\t\tif (width !== prev.width || height !== prev.height) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'width', width + 'px')\n\t\t\t\tsetStyleProperty(containerRef.current, 'height', height + 'px')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'width', width + 'px')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'height', height + 'px')\n\t\t\t\tprev.width = width\n\t\t\t\tprev.height = height\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t// This stuff changes pretty infrequently, so we can change them together\n\tuseLayoutEffect(() => {\n\t\tconst container = containerRef.current\n\t\tconst bgContainer = bgContainerRef.current\n\n\t\t// Opacity\n\t\tsetStyleProperty(container, 'opacity', opacity)\n\t\tsetStyleProperty(bgContainer, 'opacity', opacity)\n\n\t\t// Z-Index\n\t\tsetStyleProperty(container, 'z-index', index)\n\t\tsetStyleProperty(bgContainer, 'z-index', backgroundIndex)\n\t}, [opacity, index, backgroundIndex])\n\n\tuseQuickReactor(\n\t\t'set display',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return // probably the shape was just deleted\n\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tconst isCulled = culledShapes.has(id)\n\t\t\tif (isCulled !== memoizedStuffRef.current.isCulled) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'display', isCulled ? 'none' : 'block')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'display', isCulled ? 'none' : 'block')\n\t\t\t\tmemoizedStuffRef.current.isCulled = isCulled\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\tconst annotateError = useCallback(\n\t\t(error: any) => editor.annotateError(error, { origin: 'shape', willCrashApp: false }),\n\t\t[editor]\n\t)\n\n\tif (!shape || !ShapeWrapper) return null\n\n\treturn (\n\t\t<>\n\t\t\t{util.backgroundComponent && (\n\t\t\t\t<ShapeWrapper ref={bgContainerRef} shape={shape} isBackground={true}>\n\t\t\t\t\t<OptionalErrorBoundary fallback={ShapeErrorFallback} onError={annotateError}>\n\t\t\t\t\t\t<InnerShapeBackground shape={shape} util={util} />\n\t\t\t\t\t</OptionalErrorBoundary>\n\t\t\t\t</ShapeWrapper>\n\t\t\t)}\n\t\t\t<ShapeWrapper ref={containerRef} shape={shape} isBackground={false}>\n\t\t\t\t<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>\n\t\t\t\t\t<InnerShape shape={shape} util={util} />\n\t\t\t\t</OptionalErrorBoundary>\n\t\t\t</ShapeWrapper>\n\t\t</>\n\t)\n})\n\nexport const InnerShape = memo(\n\tfunction InnerShape<T extends TLShape>({ shape, util }: { shape: T; util: ShapeUtil<T> }) {\n\t\treturn useStateTracking(\n\t\t\t'InnerShape:' + shape.type,\n\t\t\t() =>\n\t\t\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t\t\t// calling the render method with stale data.\n\t\t\t\tutil.component(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),\n\t\t\t[util, shape.id]\n\t\t)\n\t},\n\t(prev, next) => areShapesContentEqual(prev.shape, next.shape) && prev.util === next.util\n)\n\nexport const InnerShapeBackground = memo(\n\tfunction InnerShapeBackground<T extends TLShape>({\n\t\tshape,\n\t\tutil,\n\t}: {\n\t\tshape: T\n\t\tutil: ShapeUtil<T>\n\t}) {\n\t\treturn useStateTracking(\n\t\t\t'InnerShape:' + shape.type,\n\t\t\t() =>\n\t\t\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t\t\t// calling the render method with stale data.\n\t\t\t\tutil.backgroundComponent?.(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),\n\t\t\t[util, shape.id]\n\t\t)\n\t},\n\t(prev, next) =>\n\t\tprev.shape.props === next.shape.props &&\n\t\tprev.shape.meta === next.shape.meta &&\n\t\tprev.util === next.util\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useStateTracking } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { ShapeUtil } from '../editor/shapes/ShapeUtil'\nimport { useEditor } from '../hooks/useEditor'\nimport { useEditorComponents } from '../hooks/useEditorComponents'\nimport { useShapeCulling } from '../hooks/useShapeCulling'\nimport { Mat } from '../primitives/Mat'\nimport { areShapesContentEqual } from '../utils/areShapesContentEqual'\nimport { setStyleProperty } from '../utils/dom'\nimport { OptionalErrorBoundary } from './ErrorBoundary'\n\n/*\nThis component renders shapes on the canvas. There are two stages: positioning\nand styling the shape's container using CSS, and then rendering the shape's \nJSX using its shape util's render method. Rendering the \"inside\" of a shape is\nmore expensive than positioning it or changing its color, so we use memo\nto wrap the inner shape and only re-render it when the shape's props change. \n\nThe shape also receives props for its index and opacity. The index is used to\ndetermine the z-index of the shape, and the opacity is used to set the shape's\nopacity based on its own opacity and that of its parent's.\n*/\nexport const Shape = memo(function Shape({\n\tid,\n\tshape,\n\tutil,\n\tindex,\n\tbackgroundIndex,\n\topacity,\n}: {\n\tid: TLShapeId\n\tshape: TLShape\n\tutil: ShapeUtil\n\tindex: number\n\tbackgroundIndex: number\n\topacity: number\n}) {\n\tconst editor = useEditor()\n\n\tconst { ShapeErrorFallback, ShapeWrapper } = useEditorComponents()\n\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst bgContainerRef = useRef<HTMLDivElement>(null)\n\n\tuseEffect(() => {\n\t\treturn react('load fonts', () => {\n\t\t\tconst fonts = editor.fonts.getShapeFontFaces(id)\n\t\t\teditor.fonts.requestFonts(fonts)\n\t\t})\n\t}, [editor, id])\n\n\tconst memoizedStuffRef = useRef({\n\t\ttransform: '',\n\t\tclipPath: 'none',\n\t\twidth: 0,\n\t\theight: 0,\n\t\tx: 0,\n\t\ty: 0,\n\t})\n\n\tuseQuickReactor(\n\t\t'set shape stuff',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) return // probably the shape was just deleted\n\n\t\t\tconst prev = memoizedStuffRef.current\n\n\t\t\t// Clip path\n\t\t\tconst clipPath = editor.getShapeClipPath(id) ?? 'none'\n\t\t\tif (clipPath !== prev.clipPath) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'clip-path', clipPath)\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'clip-path', clipPath)\n\t\t\t\tprev.clipPath = clipPath\n\t\t\t}\n\n\t\t\t// Page transform\n\t\t\tconst pageTransform = editor.getShapePageTransform(id)\n\t\t\tconst transform = Mat.toCssString(pageTransform)\n\t\t\tconst bounds = editor.getShapeGeometry(shape).bounds\n\n\t\t\t// Update if the tranform has changed\n\t\t\tif (transform !== prev.transform) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'transform', transform)\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'transform', transform)\n\t\t\t\tprev.transform = transform\n\t\t\t}\n\n\t\t\t// Width / Height\n\t\t\tconst width = Math.max(bounds.width, 1)\n\t\t\tconst height = Math.max(bounds.height, 1)\n\n\t\t\tif (width !== prev.width || height !== prev.height) {\n\t\t\t\tsetStyleProperty(containerRef.current, 'width', width + 'px')\n\t\t\t\tsetStyleProperty(containerRef.current, 'height', height + 'px')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'width', width + 'px')\n\t\t\t\tsetStyleProperty(bgContainerRef.current, 'height', height + 'px')\n\t\t\t\tprev.width = width\n\t\t\t\tprev.height = height\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t// This stuff changes pretty infrequently, so we can change them together\n\tuseLayoutEffect(() => {\n\t\tconst container = containerRef.current\n\t\tconst bgContainer = bgContainerRef.current\n\n\t\t// Opacity\n\t\tsetStyleProperty(container, 'opacity', opacity)\n\t\tsetStyleProperty(bgContainer, 'opacity', opacity)\n\n\t\t// Z-Index\n\t\tsetStyleProperty(container, 'z-index', index)\n\t\tsetStyleProperty(bgContainer, 'z-index', backgroundIndex)\n\t}, [opacity, index, backgroundIndex])\n\n\t// Register container refs with the centralized culling context.\n\t// This runs on mount and handles initial display state.\n\tconst { register, unregister } = useShapeCulling()\n\tuseLayoutEffect(() => {\n\t\tconst container = containerRef.current\n\t\tif (!container) return\n\n\t\t// Check initial culling state and register with the context\n\t\tconst isCulled = editor.getCulledShapes().has(id)\n\t\tregister(id, container, bgContainerRef.current, isCulled)\n\n\t\treturn () => {\n\t\t\tunregister(id)\n\t\t}\n\t}, [editor, id, register, unregister])\n\tconst annotateError = useCallback(\n\t\t(error: any) => editor.annotateError(error, { origin: 'shape', willCrashApp: false }),\n\t\t[editor]\n\t)\n\n\tif (!shape || !ShapeWrapper) return null\n\n\treturn (\n\t\t<>\n\t\t\t{util.backgroundComponent && (\n\t\t\t\t<ShapeWrapper ref={bgContainerRef} shape={shape} isBackground={true}>\n\t\t\t\t\t<OptionalErrorBoundary fallback={ShapeErrorFallback} onError={annotateError}>\n\t\t\t\t\t\t<InnerShapeBackground shape={shape} util={util} />\n\t\t\t\t\t</OptionalErrorBoundary>\n\t\t\t\t</ShapeWrapper>\n\t\t\t)}\n\t\t\t<ShapeWrapper ref={containerRef} shape={shape} isBackground={false}>\n\t\t\t\t<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>\n\t\t\t\t\t<InnerShape shape={shape} util={util} />\n\t\t\t\t</OptionalErrorBoundary>\n\t\t\t</ShapeWrapper>\n\t\t</>\n\t)\n})\n\nexport const InnerShape = memo(\n\tfunction InnerShape<T extends TLShape>({ shape, util }: { shape: T; util: ShapeUtil<T> }) {\n\t\treturn useStateTracking(\n\t\t\t'InnerShape:' + shape.type,\n\t\t\t() =>\n\t\t\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t\t\t// calling the render method with stale data.\n\t\t\t\tutil.component(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),\n\t\t\t[util, shape.id]\n\t\t)\n\t},\n\t(prev, next) => areShapesContentEqual(prev.shape, next.shape) && prev.util === next.util\n)\n\nexport const InnerShapeBackground = memo(\n\tfunction InnerShapeBackground<T extends TLShape>({\n\t\tshape,\n\t\tutil,\n\t}: {\n\t\tshape: T\n\t\tutil: ShapeUtil<T>\n\t}) {\n\t\treturn useStateTracking(\n\t\t\t'InnerShape:' + shape.type,\n\t\t\t() =>\n\t\t\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t\t\t// calling the render method with stale data.\n\t\t\t\tutil.backgroundComponent?.(util.editor.store.unsafeGetWithoutCapture(shape.id) as T),\n\t\t\t[util, shape.id]\n\t\t)\n\t},\n\t(prev, next) =>\n\t\tprev.shape.props === next.shape.props &&\n\t\tprev.shape.meta === next.shape.meta &&\n\t\tprev.util === next.util\n)\n"],
+  "mappings": "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",
   "names": ["Shape", "shape", "InnerShape", "InnerShapeBackground"]
 }

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

@@ -29,6 +29,31 @@ var import_react = require("react");
 var import_useEditor = require("../../hooks/useEditor");
 var import_useIsDarkMode = require("../../hooks/useIsDarkMode");
 var import_usePeerIds = require("../../hooks/usePeerIds");
+function setsEqual(a, b) {
+  if (a.size !== b.size) return false;
+  for (const item of a) {
+    if (!b.has(item)) return false;
+  }
+  return true;
+}
+function arraysEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+function collaboratorIndicatorsEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].color !== b[i].color) return false;
+    if (!arraysEqual(a[i].shapeIds, b[i].shapeIds)) return false;
+  }
+  return true;
+}
+function renderDataEqual(a, b) {
+  return setsEqual(a.idsToDisplay, b.idsToDisplay) && setsEqual(a.renderingShapeIds, b.renderingShapeIds) && arraysEqual(a.hintingShapeIds, b.hintingShapeIds) && collaboratorIndicatorsEqual(a.collaboratorIndicators, b.collaboratorIndicators);
+}
 const indicatorPathCache = (0, import_store.createComputedCache)(
   "indicatorPath",
   (editor, shape) => {
@@ -141,7 +166,7 @@ const CanvasShapeIndicators = (0, import_react.memo)(function CanvasShapeIndicat
         collaboratorIndicators
       };
     },
-    { isEqual: import_utils.isEqual },
+    { isEqual: renderDataEqual },
     [editor, activePeerIds$]
   );
   (0, import_state_react.useQuickReactor)(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/CanvasShapeIndicators.tsx"],
-  "sourcesContent": ["import { useComputed, useQuickReactor } from '@tldraw/state-react'\nimport { createComputedCache } from '@tldraw/store'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe, isEqual } from '@tldraw/utils'\nimport { memo, useEffect, useRef } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useIsDarkMode } from '../../hooks/useIsDarkMode'\nimport { useActivePeerIds$ } from '../../hooks/usePeerIds'\n\ninterface CollaboratorIndicatorData {\n\tcolor: string\n\tshapeIds: TLShapeId[]\n}\n\nconst indicatorPathCache = createComputedCache(\n\t'indicatorPath',\n\t(editor: Editor, shape: TLShape) => {\n\t\tconst util = editor.getShapeUtil(shape)\n\t\treturn util.getIndicatorPath(shape)\n\t}\n)\n\nconst getIndicatorPath = (editor: Editor, shape: TLShape) => {\n\treturn indicatorPathCache.get(editor, shape.id)\n}\n\nfunction renderShapeIndicator(\n\tctx: CanvasRenderingContext2D,\n\teditor: Editor,\n\tshapeId: TLShapeId,\n\trenderingShapeIds: Set<TLShapeId>\n): boolean {\n\tif (!renderingShapeIds.has(shapeId)) return false\n\n\tconst shape = editor.getShape(shapeId)\n\tif (!shape || shape.isLocked) return false\n\n\tconst pageTransform = editor.getShapePageTransform(shape)\n\tif (!pageTransform) return false\n\n\tconst indicatorPath = getIndicatorPath(editor, shape)\n\tif (!indicatorPath) return false\n\n\tctx.save()\n\tctx.transform(\n\t\tpageTransform.a,\n\t\tpageTransform.b,\n\t\tpageTransform.c,\n\t\tpageTransform.d,\n\t\tpageTransform.e,\n\t\tpageTransform.f\n\t)\n\trenderIndicatorPath(ctx, indicatorPath)\n\tctx.restore()\n\n\treturn true\n}\n\nfunction renderIndicatorPath(ctx: CanvasRenderingContext2D, indicatorPath: TLIndicatorPath) {\n\tif (indicatorPath instanceof Path2D) {\n\t\tctx.stroke(indicatorPath)\n\t} else {\n\t\tconst { path, clipPath, additionalPaths } = indicatorPath\n\n\t\tif (clipPath) {\n\t\t\tctx.save()\n\t\t\tctx.clip(clipPath, 'evenodd')\n\t\t\tctx.stroke(path)\n\t\t\tctx.restore()\n\t\t} else {\n\t\t\tctx.stroke(path)\n\t\t}\n\n\t\tif (additionalPaths) {\n\t\t\tfor (const additionalPath of additionalPaths) {\n\t\t\t\tctx.stroke(additionalPath)\n\t\t\t}\n\t\t}\n\t}\n}\n\n/** @internal @react */\nexport const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {\n\tconst editor = useEditor()\n\tconst canvasRef = useRef<HTMLCanvasElement>(null)\n\n\t// Cache the selected color to avoid getComputedStyle on every render\n\tconst rSelectedColor = useRef<string | null>(null)\n\tconst isDarkMode = useIsDarkMode()\n\n\tuseEffect(() => {\n\t\tconst timer = editor.timers.setTimeout(() => {\n\t\t\trSelectedColor.current = null\n\t\t}, 0)\n\t\treturn () => clearTimeout(timer)\n\t}, [isDarkMode, editor])\n\n\t// Get active peer IDs (already handles time-based state transitions)\n\tconst activePeerIds$ = useActivePeerIds$()\n\n\tconst $renderData = useComputed(\n\t\t'indicator render data',\n\t\t() => {\n\t\t\tconst renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))\n\n\t\t\t// Compute ids to display for selected/hovered shapes\n\t\t\tconst idsToDisplay = new Set<TLShapeId>()\n\t\t\tconst instanceState = editor.getInstanceState()\n\t\t\tconst isChangingStyle = instanceState.isChangingStyle\n\t\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\t\t\tconst isInSelectState = editor.isInAny(\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_handle'\n\t\t\t)\n\n\t\t\tif (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {\n\t\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\t\tidsToDisplay.add(id)\n\t\t\t\t}\n\t\t\t\tif (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {\n\t\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\t\tif (hovered) idsToDisplay.add(hovered)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Compute hinting shape ids\n\t\t\tconst hintingShapeIds = dedupe(editor.getHintingShapeIds())\n\n\t\t\t// Compute collaborator indicators\n\t\t\tconst collaboratorIndicators: CollaboratorIndicatorData[] = []\n\t\t\tconst currentPageId = editor.getCurrentPageId()\n\t\t\tconst activePeerIds = activePeerIds$.get()\n\n\t\t\tconst collaborators = editor.getCollaborators()\n\t\t\tfor (const peerId of activePeerIds.values()) {\n\t\t\t\t// Skip collaborators on different pages\n\t\t\t\tconst presence = collaborators.find((c) => c.userId === peerId)\n\t\t\t\tif (!presence || presence.currentPageId !== currentPageId) continue\n\n\t\t\t\t// Filter to shapes that are visible and on the current rendering set\n\t\t\t\tconst visibleShapeIds = presence.selectedShapeIds.filter(\n\t\t\t\t\t(id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)\n\t\t\t\t)\n\n\t\t\t\tif (visibleShapeIds.length > 0) {\n\t\t\t\t\tcollaboratorIndicators.push({\n\t\t\t\t\t\tcolor: presence.color,\n\t\t\t\t\t\tshapeIds: visibleShapeIds,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tidsToDisplay,\n\t\t\t\trenderingShapeIds,\n\t\t\t\thintingShapeIds,\n\t\t\t\tcollaboratorIndicators,\n\t\t\t}\n\t\t},\n\t\t{ isEqual: isEqual },\n\t\t[editor, activePeerIds$]\n\t)\n\n\tuseQuickReactor(\n\t\t'canvas indicators render',\n\t\t() => {\n\t\t\tconst canvas = canvasRef.current\n\t\t\tif (!canvas) return\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return\n\n\t\t\tconst { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } =\n\t\t\t\t$renderData.get()\n\n\t\t\tconst { w, h } = editor.getViewportScreenBounds()\n\t\t\tconst dpr = window.devicePixelRatio || 1\n\t\t\tconst { x: cx, y: cy, z: zoom } = editor.getCamera()\n\n\t\t\tconst canvasWidth = Math.ceil(w * dpr)\n\t\t\tconst canvasHeight = Math.ceil(h * dpr)\n\n\t\t\tif (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {\n\t\t\t\tcanvas.width = canvasWidth\n\t\t\t\tcanvas.height = canvasHeight\n\t\t\t\tcanvas.style.width = `${w}px`\n\t\t\t\tcanvas.style.height = `${h}px`\n\t\t\t}\n\n\t\t\tctx.resetTransform()\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height)\n\n\t\t\tctx.scale(dpr, dpr)\n\t\t\tctx.scale(zoom, zoom)\n\t\t\tctx.translate(cx, cy)\n\n\t\t\tctx.lineCap = 'round'\n\t\t\tctx.lineJoin = 'round'\n\n\t\t\t// Draw collaborator indicators first (underneath local indicators)\n\t\t\t// Use 0.5 opacity to match the original SVG-based collaborator indicators\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const collaborator of collaboratorIndicators) {\n\t\t\t\tctx.strokeStyle = collaborator.color\n\t\t\t\tctx.globalAlpha = 0.7\n\t\t\t\tfor (const shapeId of collaborator.shapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Reset alpha for local indicators\n\t\t\tctx.globalAlpha = 1.0\n\n\t\t\t// Use cached color, only call getComputedStyle when cache is empty\n\t\t\tif (!rSelectedColor.current) {\n\t\t\t\trSelectedColor.current = getComputedStyle(canvas).getPropertyValue('--tl-color-selected')\n\t\t\t}\n\n\t\t\tctx.strokeStyle = rSelectedColor.current\n\n\t\t\t// Draw selected/hovered indicators (1.5px stroke)\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const shapeId of idsToDisplay) {\n\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t}\n\n\t\t\t// Draw hinted indicators with a thicker stroke (2.5px)\n\t\t\tif (hintingShapeIds.length > 0) {\n\t\t\t\tctx.lineWidth = 2.5 / zoom\n\t\t\t\tfor (const shapeId of hintingShapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, $renderData]\n\t)\n\n\treturn <canvas ref={canvasRef} className=\"tl-canvas-indicators\" />\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useComputed, useQuickReactor } from '@tldraw/state-react'\nimport { createComputedCache } from '@tldraw/store'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe } from '@tldraw/utils'\nimport { memo, useEffect, useRef } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useIsDarkMode } from '../../hooks/useIsDarkMode'\nimport { useActivePeerIds$ } from '../../hooks/usePeerIds'\n\ninterface CollaboratorIndicatorData {\n\tcolor: string\n\tshapeIds: TLShapeId[]\n}\n\ninterface RenderData {\n\tidsToDisplay: Set<TLShapeId>\n\trenderingShapeIds: Set<TLShapeId>\n\thintingShapeIds: TLShapeId[]\n\tcollaboratorIndicators: CollaboratorIndicatorData[]\n}\n\nfunction setsEqual<T>(a: Set<T>, b: Set<T>): boolean {\n\tif (a.size !== b.size) return false\n\tfor (const item of a) {\n\t\tif (!b.has(item)) return false\n\t}\n\treturn true\n}\n\nfunction arraysEqual<T>(a: readonly T[], b: readonly T[]): boolean {\n\tif (a.length !== b.length) return false\n\tfor (let i = 0; i < a.length; i++) {\n\t\tif (a[i] !== b[i]) return false\n\t}\n\treturn true\n}\n\nfunction collaboratorIndicatorsEqual(\n\ta: CollaboratorIndicatorData[],\n\tb: CollaboratorIndicatorData[]\n): boolean {\n\tif (a.length !== b.length) return false\n\tfor (let i = 0; i < a.length; i++) {\n\t\tif (a[i].color !== b[i].color) return false\n\t\tif (!arraysEqual(a[i].shapeIds, b[i].shapeIds)) return false\n\t}\n\treturn true\n}\n\nfunction renderDataEqual(a: RenderData, b: RenderData): boolean {\n\treturn (\n\t\tsetsEqual(a.idsToDisplay, b.idsToDisplay) &&\n\t\tsetsEqual(a.renderingShapeIds, b.renderingShapeIds) &&\n\t\tarraysEqual(a.hintingShapeIds, b.hintingShapeIds) &&\n\t\tcollaboratorIndicatorsEqual(a.collaboratorIndicators, b.collaboratorIndicators)\n\t)\n}\n\nconst indicatorPathCache = createComputedCache(\n\t'indicatorPath',\n\t(editor: Editor, shape: TLShape) => {\n\t\tconst util = editor.getShapeUtil(shape)\n\t\treturn util.getIndicatorPath(shape)\n\t}\n)\n\nconst getIndicatorPath = (editor: Editor, shape: TLShape) => {\n\treturn indicatorPathCache.get(editor, shape.id)\n}\n\nfunction renderShapeIndicator(\n\tctx: CanvasRenderingContext2D,\n\teditor: Editor,\n\tshapeId: TLShapeId,\n\trenderingShapeIds: Set<TLShapeId>\n): boolean {\n\tif (!renderingShapeIds.has(shapeId)) return false\n\n\tconst shape = editor.getShape(shapeId)\n\tif (!shape || shape.isLocked) return false\n\n\tconst pageTransform = editor.getShapePageTransform(shape)\n\tif (!pageTransform) return false\n\n\tconst indicatorPath = getIndicatorPath(editor, shape)\n\tif (!indicatorPath) return false\n\n\tctx.save()\n\tctx.transform(\n\t\tpageTransform.a,\n\t\tpageTransform.b,\n\t\tpageTransform.c,\n\t\tpageTransform.d,\n\t\tpageTransform.e,\n\t\tpageTransform.f\n\t)\n\trenderIndicatorPath(ctx, indicatorPath)\n\tctx.restore()\n\n\treturn true\n}\n\nfunction renderIndicatorPath(ctx: CanvasRenderingContext2D, indicatorPath: TLIndicatorPath) {\n\tif (indicatorPath instanceof Path2D) {\n\t\tctx.stroke(indicatorPath)\n\t} else {\n\t\tconst { path, clipPath, additionalPaths } = indicatorPath\n\n\t\tif (clipPath) {\n\t\t\tctx.save()\n\t\t\tctx.clip(clipPath, 'evenodd')\n\t\t\tctx.stroke(path)\n\t\t\tctx.restore()\n\t\t} else {\n\t\t\tctx.stroke(path)\n\t\t}\n\n\t\tif (additionalPaths) {\n\t\t\tfor (const additionalPath of additionalPaths) {\n\t\t\t\tctx.stroke(additionalPath)\n\t\t\t}\n\t\t}\n\t}\n}\n\n/** @internal @react */\nexport const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {\n\tconst editor = useEditor()\n\tconst canvasRef = useRef<HTMLCanvasElement>(null)\n\n\t// Cache the selected color to avoid getComputedStyle on every render\n\tconst rSelectedColor = useRef<string | null>(null)\n\tconst isDarkMode = useIsDarkMode()\n\n\tuseEffect(() => {\n\t\tconst timer = editor.timers.setTimeout(() => {\n\t\t\trSelectedColor.current = null\n\t\t}, 0)\n\t\treturn () => clearTimeout(timer)\n\t}, [isDarkMode, editor])\n\n\t// Get active peer IDs (already handles time-based state transitions)\n\tconst activePeerIds$ = useActivePeerIds$()\n\n\tconst $renderData = useComputed(\n\t\t'indicator render data',\n\t\t() => {\n\t\t\tconst renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))\n\n\t\t\t// Compute ids to display for selected/hovered shapes\n\t\t\tconst idsToDisplay = new Set<TLShapeId>()\n\t\t\tconst instanceState = editor.getInstanceState()\n\t\t\tconst isChangingStyle = instanceState.isChangingStyle\n\t\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\t\t\tconst isInSelectState = editor.isInAny(\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_handle'\n\t\t\t)\n\n\t\t\tif (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {\n\t\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\t\tidsToDisplay.add(id)\n\t\t\t\t}\n\t\t\t\tif (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {\n\t\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\t\tif (hovered) idsToDisplay.add(hovered)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Compute hinting shape ids\n\t\t\tconst hintingShapeIds = dedupe(editor.getHintingShapeIds())\n\n\t\t\t// Compute collaborator indicators\n\t\t\tconst collaboratorIndicators: CollaboratorIndicatorData[] = []\n\t\t\tconst currentPageId = editor.getCurrentPageId()\n\t\t\tconst activePeerIds = activePeerIds$.get()\n\n\t\t\tconst collaborators = editor.getCollaborators()\n\t\t\tfor (const peerId of activePeerIds.values()) {\n\t\t\t\t// Skip collaborators on different pages\n\t\t\t\tconst presence = collaborators.find((c) => c.userId === peerId)\n\t\t\t\tif (!presence || presence.currentPageId !== currentPageId) continue\n\n\t\t\t\t// Filter to shapes that are visible and on the current rendering set\n\t\t\t\tconst visibleShapeIds = presence.selectedShapeIds.filter(\n\t\t\t\t\t(id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)\n\t\t\t\t)\n\n\t\t\t\tif (visibleShapeIds.length > 0) {\n\t\t\t\t\tcollaboratorIndicators.push({\n\t\t\t\t\t\tcolor: presence.color,\n\t\t\t\t\t\tshapeIds: visibleShapeIds,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tidsToDisplay,\n\t\t\t\trenderingShapeIds,\n\t\t\t\thintingShapeIds,\n\t\t\t\tcollaboratorIndicators,\n\t\t\t}\n\t\t},\n\t\t{ isEqual: renderDataEqual },\n\t\t[editor, activePeerIds$]\n\t)\n\n\tuseQuickReactor(\n\t\t'canvas indicators render',\n\t\t() => {\n\t\t\tconst canvas = canvasRef.current\n\t\t\tif (!canvas) return\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return\n\n\t\t\tconst { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } =\n\t\t\t\t$renderData.get()\n\n\t\t\tconst { w, h } = editor.getViewportScreenBounds()\n\t\t\tconst dpr = window.devicePixelRatio || 1\n\t\t\tconst { x: cx, y: cy, z: zoom } = editor.getCamera()\n\n\t\t\tconst canvasWidth = Math.ceil(w * dpr)\n\t\t\tconst canvasHeight = Math.ceil(h * dpr)\n\n\t\t\tif (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {\n\t\t\t\tcanvas.width = canvasWidth\n\t\t\t\tcanvas.height = canvasHeight\n\t\t\t\tcanvas.style.width = `${w}px`\n\t\t\t\tcanvas.style.height = `${h}px`\n\t\t\t}\n\n\t\t\tctx.resetTransform()\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height)\n\n\t\t\tctx.scale(dpr, dpr)\n\t\t\tctx.scale(zoom, zoom)\n\t\t\tctx.translate(cx, cy)\n\n\t\t\tctx.lineCap = 'round'\n\t\t\tctx.lineJoin = 'round'\n\n\t\t\t// Draw collaborator indicators first (underneath local indicators)\n\t\t\t// Use 0.5 opacity to match the original SVG-based collaborator indicators\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const collaborator of collaboratorIndicators) {\n\t\t\t\tctx.strokeStyle = collaborator.color\n\t\t\t\tctx.globalAlpha = 0.7\n\t\t\t\tfor (const shapeId of collaborator.shapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Reset alpha for local indicators\n\t\t\tctx.globalAlpha = 1.0\n\n\t\t\t// Use cached color, only call getComputedStyle when cache is empty\n\t\t\tif (!rSelectedColor.current) {\n\t\t\t\trSelectedColor.current = getComputedStyle(canvas).getPropertyValue('--tl-color-selected')\n\t\t\t}\n\n\t\t\tctx.strokeStyle = rSelectedColor.current\n\n\t\t\t// Draw selected/hovered indicators (1.5px stroke)\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const shapeId of idsToDisplay) {\n\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t}\n\n\t\t\t// Draw hinted indicators with a thicker stroke (2.5px)\n\t\t\tif (hintingShapeIds.length > 0) {\n\t\t\t\tctx.lineWidth = 2.5 / zoom\n\t\t\t\tfor (const shapeId of hintingShapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, $renderData]\n\t)\n\n\treturn <canvas ref={canvasRef} className=\"tl-canvas-indicators\" />\n})\n"],
+  "mappings": "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",
   "names": ["CanvasShapeIndicators"]
 }