@tldraw/editor 4.5.0-canary.b97147268171 → 4.5.0-canary.bcdd9cbff7ae

package/dist-cjs/index.d.ts

@@ -20,6 +20,7 @@ import { MigrationSequence } from '@tldraw/store';
 import { NamedExoticComponent } from 'react';
 import { Node as Node_2 } from '@tiptap/pm/model';
 import { PerformanceTracker } from '@tldraw/utils';
+import { PointerEvent as PointerEvent_2 } from 'react';
 import { PointerEventHandler } from 'react';
 import * as React_2 from 'react';
 import { default as React_3 } from 'react';
@@ -63,7 +64,6 @@ import { TLImageAsset } from '@tldraw/tlschema';
 import { TLInstance } from '@tldraw/tlschema';
 import { TLInstancePageState } from '@tldraw/tlschema';
 import { TLInstancePresence } from '@tldraw/tlschema';
-import { TLOpacityType } from '@tldraw/tlschema';
 import { TLPage } from '@tldraw/tlschema';
 import { TLPageId } from '@tldraw/tlschema';
 import { TLParentId } from '@tldraw/tlschema';
@@ -439,13 +439,13 @@ export declare class BoundsSnaps {
     private getSnappablePoints;
     private getSnappableGapNodes;
     private getVisibleGaps;
-    snapTranslateShapes({ lockedAxis, initialSelectionPageBounds, initialSelectionSnapPoints, dragDelta, }: {
+    snapTranslateShapes({ lockedAxis, initialSelectionPageBounds, initialSelectionSnapPoints, dragDelta }: {
         dragDelta: Vec;
         initialSelectionPageBounds: Box;
         initialSelectionSnapPoints: BoundsSnapPoint[];
         lockedAxis: 'x' | 'y' | null;
     }): SnapData;
-    snapResizeShapes({ initialSelectionPageBounds, dragDelta, handle: originalHandle, isAspectRatioLocked, isResizingFromCenter, }: {
+    snapResizeShapes({ initialSelectionPageBounds, dragDelta, handle: originalHandle, isAspectRatioLocked, isResizingFromCenter }: {
         dragDelta: Vec;
         handle: SelectionCorner | SelectionEdge;
         initialSelectionPageBounds: Box;
@@ -679,7 +679,7 @@ export declare const coreShapes: readonly [typeof GroupShapeUtil];
 export declare function counterClockwiseAngleDist(a0: number, a1: number): number;
 
 /** @public */
-export declare function createDebugValue<T>(name: string, { defaults, shouldStoreForSession, }: {
+export declare function createDebugValue<T>(name: string, { defaults, shouldStoreForSession }: {
     defaults: DebugFlagDefaults<T>;
     shouldStoreForSession?: boolean;
 }): DebugFlag<T>;
@@ -729,8 +729,8 @@ export declare function createTLStore({ initialData, defaultName, id, assets, on
 
 /** @public */
 export declare function createTLUser(opts?: {
-    setUserPreferences?: (userPreferences: TLUserPreferences) => void;
-    userPreferences?: Signal<TLUserPreferences>;
+    setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
+    userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
 }): TLUser;
 
 /** @public */
@@ -814,7 +814,7 @@ export declare const DefaultBrush: ({ brush, color, opacity, className }: TLBrus
 export declare function DefaultCanvas({ className }: TLCanvasComponentProps): JSX.Element;
 
 /** @public @react */
-export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity, }: TLCollaboratorHintProps): JSX.Element;
+export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity }: TLCollaboratorHintProps): JSX.Element;
 
 /** @public @react */
 export declare const DefaultCursor: NamedExoticComponent<TLCursorProps>;
@@ -1022,7 +1022,7 @@ export declare class EdgeScrollManager {
 /** @public */
 export declare class Editor extends EventEmitter<TLEventMap> {
     readonly id: string;
-    constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus, inferDarkMode, options: _options, textOptions: _textOptions, 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;
@@ -1095,8 +1095,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
     readonly timers: {
         dispose: () => void;
         requestAnimationFrame: (callback: FrameRequestCallback) => number;
-        setInterval: (handler: TimerHandler, timeout?: number, ...args: any[]) => number;
-        setTimeout: (handler: TimerHandler, timeout?: number, ...args: any[]) => number;
+        setInterval: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
+        setTimeout: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
     };
     /**
      * A manager for the user and their preferences.
@@ -1487,14 +1487,14 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getPageStates(): TLInstancePageState[];
-    /* Excluded from this release type: _getPageStatesQuery */
+    private _getPageStatesQuery;
     /**
      * The current page state.
      *
      * @public
      */
     getCurrentPageState(): TLInstancePageState;
-    /* Excluded from this release type: _getCurrentPageStateId */
+    private _getCurrentPageStateId;
     /**
      * Update this instance's page state.
      *
@@ -1887,7 +1887,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      *
      *  @public */
     getTextOptions(): TLTextOptions;
-    /* Excluded from this release type: _unsafe_getCameraId */
+    private _unsafe_getCameraId;
     /**
      * The current camera.
      *
@@ -2137,10 +2137,10 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      */
     slideCamera(opts?: {
         direction: VecLike;
-        force?: boolean;
-        friction?: number;
+        force?: boolean | undefined;
+        friction?: number | undefined;
         speed: number;
-        speedThreshold?: number;
+        speedThreshold?: number | undefined;
     }): this;
     /**
      * Animate the camera to a user's cursor position. This also briefly show the user's cursor if it's not currently visible.
@@ -2448,7 +2448,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     renamePage(page: TLPage | TLPageId, name: string): this;
-    /* Excluded from this release type: _getAllAssetsQuery */
+    private _getAllAssetsQuery;
     /**
      * Get all assets in the editor.
      *
@@ -2537,7 +2537,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapeGeometry<T extends Geometry2d>(shape: TLShape | TLShapeId, opts?: TLGeometryOpts): T;
-    /* Excluded from this release type: _getShapeHandlesCache */
+    private _getShapeHandlesCache;
     /**
      * Get the handles (if any) for a shape.
      *
@@ -2567,7 +2567,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapeLocalTransform(shape: TLShape | TLShapeId): Mat;
-    /* Excluded from this release type: _getShapePageTransformCache */
+    private _getShapePageTransformCache;
     /**
      * Get the local transform of a shape's parent as a matrix model.
      *
@@ -2595,7 +2595,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapePageTransform(shape: TLShape | TLShapeId): Mat;
-    /* Excluded from this release type: _getShapePageBoundsCache */
+    private _getShapePageBoundsCache;
     /**
      * Get the bounds of a shape in the current page space.
      *
@@ -2610,7 +2610,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapePageBounds(shape: TLShape | TLShapeId): Box | undefined;
-    /* Excluded from this release type: _getShapeClipPathCache */
+    private _getShapeClipPathCache;
     /**
      * Get the clip path for a shape.
      *
@@ -2627,7 +2627,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapeClipPath(shape: TLShape | TLShapeId): string | undefined;
-    /* Excluded from this release type: _getShapeMaskCache */
+    private _getShapeMaskCache;
     /**
      * Get the mask (in the current page space) for a shape.
      *
@@ -2659,7 +2659,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapeMaskedPageBounds(shape: TLShape | TLShapeId): Box | undefined;
-    /* Excluded from this release type: _getShapeMaskedPageBoundsCache */
+    private _getShapeMaskedPageBoundsCache;
     /**
      * Get the ancestors of a shape.
      *
@@ -2769,8 +2769,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapesAtPoint(point: VecLike, opts?: {
-        hitInside?: boolean;
-        margin?: number;
+        hitInside?: boolean | undefined;
+        margin?: number | undefined;
     }): TLShape[];
     /**
      * Get shape IDs within the given bounds.
@@ -2806,8 +2806,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     isPointInShape(shape: TLShape | TLShapeId, point: VecLike, opts?: {
-        hitInside?: boolean;
-        margin?: number;
+        hitInside?: boolean | undefined;
+        margin?: number | undefined;
     }): boolean;
     /**
      * Convert a point in the current page space to a point in the local space of a shape. For example, if a
@@ -3081,7 +3081,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * Delete a binding by its ID. If the binding doesn't exist, it's ignored.
      */
     deleteBinding(binding: TLBinding | TLBindingId, opts?: Parameters<this['deleteBindings']>[1]): this;
-    canBindShapes({ fromShape, toShape, binding, }: {
+    canBindShapes({ fromShape, toShape, binding }: {
         binding: {
             type: TLBinding['type'];
         } | TLBinding | TLBinding['type'];
@@ -3236,6 +3236,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     bringToFront(shapes: TLShape[] | TLShapeId[]): this;
+    /* Excluded from this release type: getShapeClusters */
     /* Excluded from this release type: collectShapesViaArrowBindings */
     /**
      * Flip shape positions.
@@ -3327,6 +3328,22 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     stretchShapes(shapes: TLShape[] | TLShapeId[], operation: 'horizontal' | 'vertical'): this;
+    /**
+     * Resize and reposition a set of shapes so that their combined page bounds matches the given
+     * target bounds.
+     *
+     * @example
+     * ```ts
+     * editor.resizeToBounds([box1, box2], { x: 0, y: 0, w: 500, h: 500 })
+     * editor.resizeToBounds(editor.getSelectedShapeIds(), new Box(0, 0, 500, 500))
+     * ```
+     *
+     * @param shapes - The shapes (or shape ids) to resize.
+     * @param bounds - The target bounding box.
+     *
+     * @public
+     */
+    resizeToBounds(shapes: TLShape[] | TLShapeId[], bounds: BoxLike): this;
     /**
      * Resize a shape.
      *
@@ -3530,7 +3547,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
     deleteShape(id: TLShapeId): this;
     deleteShape(shape: TLShape): this;
     /* Excluded from this release type: _extractSharedStyles */
-    /* Excluded from this release type: _getSelectionSharedStyles */
+    private _getSelectionSharedStyles;
     /**
      * Get the style for the next shape.
      *
@@ -3719,7 +3736,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @param opts - Options for handling external content, including force flag to bypass readonly checks.
      */
     putExternalContent<E>(info: TLExternalContent<E>, opts?: {
-        force?: boolean;
+        force?: boolean | undefined;
     }): Promise<void>;
     /**
      * Handle replacing external content.
@@ -3728,7 +3745,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @param opts - Options for handling external content, including force flag to bypass readonly checks.
      */
     replaceExternalContent<E>(info: TLExternalContent<E>, opts?: {
-        force?: boolean;
+        force?: boolean | undefined;
     }): Promise<void>;
     /**
      * Get content that can be exported for the given shape ids.
@@ -4268,6 +4285,11 @@ export declare abstract class Geometry2d {
     private _length?;
     get length(): number;
     getLength(_filters?: Geometry2dFilters): number;
+    /**
+     * Called after a hit test succeeds. Return `true` to reject the hit and allow
+     * shapes behind this one to be selected instead (e.g. transparent image pixels).
+     */
+    ignoreHit(_point: VecLike): boolean;
     abstract getSvgPathData(first: boolean): string;
 }
 
@@ -4535,7 +4557,7 @@ export declare class HandleSnaps {
     private iterateSnapOutlines;
     private getHandleSnapPosition;
     private getHandleSnapData;
-    snapHandle({ currentShapeId, handle, }: {
+    snapHandle({ currentShapeId, handle }: {
         currentShapeId: TLShapeId;
         handle: TLHandle;
     }): null | SnapData;
@@ -7771,7 +7793,7 @@ export declare const tlmenus: {
      *
      * @public
      */
-    clearOpenMenus(contextId?: string): void;
+    clearOpenMenus(contextId?: string | undefined): void;
     /**
      * Delete an open menu.
      *
@@ -7794,7 +7816,7 @@ export declare const tlmenus: {
      *
      * @public
      */
-    getOpenMenus(contextId?: string): string[];
+    getOpenMenus(contextId?: string | undefined): string[];
     /**
      * Get whether a menu is open for a given context.
      *
@@ -7808,7 +7830,7 @@ export declare const tlmenus: {
      *
      * @public
      */
-    isMenuOpen(id: string, contextId?: string): boolean;
+    isMenuOpen(id: string, contextId?: string | undefined): boolean;
     /**
      * Get whether any menus are open for a given context.
      *
@@ -7846,7 +7868,7 @@ export declare const tlmenus: {
      *
      * @public
      */
-    hideOpenMenus(contextId?: string): void;
+    hideOpenMenus(contextId?: string | undefined): void;
     /**
      * Show all hidden menus.
      *
@@ -7860,7 +7882,7 @@ export declare const tlmenus: {
      *
      * @public
      */
-    showOpenMenus(contextId?: string): void;
+    showOpenMenus(contextId?: string | undefined): void;
     forContext(contextId: string): {
         addOpenMenu: (id: string) => void;
         clearOpenMenus: () => void;
@@ -8078,7 +8100,7 @@ export declare interface TLShapeIndicatorsProps {
  */
 export declare interface TLShapeUtilCanBeLaidOutOpts {
     /** The type of action causing the layout. */
-    type?: 'align' | 'distribute' | 'flip' | 'pack' | 'stack' | 'stretch';
+    type?: 'align' | 'distribute' | 'flip' | 'pack' | 'resize_to_bounds' | 'stack' | 'stretch';
     /** The other shapes being laid out */
     shapes?: TLShape[];
 }
@@ -8426,6 +8448,7 @@ export declare class TransformedGeometry2d extends Geometry2d {
     intersectCircle(center: VecLike, radius: number, filters?: Geometry2dFilters): Vec[];
     intersectPolygon(polygon: VecLike[], filters?: Geometry2dFilters): VecLike[];
     intersectPolyline(polyline: VecLike[], filters?: Geometry2dFilters): VecLike[];
+    ignoreHit(point: VecLike): boolean;
     transform(transform: MatModel, opts?: TransformedGeometry2dOptions): Geometry2d;
     getSvgPathData(): string;
 }
@@ -8578,7 +8601,7 @@ export declare const userTypeValidator: T.Validator<TLUserPreferences>;
 /** @public */
 export declare function useSelectionEvents(handle: TLSelectionHandle): {
     onPointerDown: PointerEventHandler<Element>;
-    onPointerMove: (e: React.PointerEvent) => void;
+    onPointerMove: (e: PointerEvent_2<Element>) => void;
     onPointerUp: PointerEventHandler<Element>;
 };
 

package/dist-cjs/index.js

@@ -369,7 +369,7 @@ var import_LocalIndexedDb = require("./lib/utils/sync/LocalIndexedDb");
 var import_uniq = require("./lib/utils/uniq");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/editor",
-  "4.5.0-canary.b97147268171",
+  "4.5.0-canary.bcdd9cbff7ae",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/lib/TldrawEditor.js

@@ -48,6 +48,7 @@ var import_DefaultErrorFallback = require("./components/default-components/Defau
 var import_ErrorBoundary = require("./components/ErrorBoundary");
 var import_createTLUser = require("./config/createTLUser");
 var import_Editor = require("./editor/Editor");
+var import_EditorComponentsContext = require("./hooks/EditorComponentsContext");
 var import_useContainer = require("./hooks/useContainer");
 var import_useCursor = require("./hooks/useCursor");
 var import_useDarkMode = require("./hooks/useDarkMode");
@@ -164,7 +165,7 @@ const TldrawEditorWithLoadingStore = (0, import_react.memo)(function TldrawEdito
       container.classList.add("tl-theme__dark");
     }
   }, [container, user]);
-  const { LoadingScreen: LoadingScreen2 } = (0, import_useEditorComponents.useEditorComponents)();
+  const { LoadingScreen: LoadingScreen2 } = (0, import_EditorComponentsContext.useEditorComponents)();
   switch (store.status) {
     case "error": {
       throw store.error;
@@ -203,7 +204,7 @@ function TldrawEditorWithReadyStore({
   getShapeVisibility,
   assetUrls
 }) {
-  const { ErrorFallback } = (0, import_useEditorComponents.useEditorComponents)();
+  const { ErrorFallback } = (0, import_EditorComponentsContext.useEditorComponents)();
   const container = (0, import_useContainer.useContainer)();
   const [editor, setEditor] = (0, import_useRefState.useRefState)(null);
   const canvasRef = (0, import_react.useRef)(null);
@@ -343,7 +344,7 @@ function TldrawEditorWithReadyStore({
       isCancelled = true;
     };
   }, [editor]);
-  const { Canvas, LoadingScreen: LoadingScreen2 } = (0, import_useEditorComponents.useEditorComponents)();
+  const { Canvas, LoadingScreen: LoadingScreen2 } = (0, import_EditorComponentsContext.useEditorComponents)();
   if (!editor || !fontLoadingState?.isLoaded) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       LoadingScreen2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingScreen2, {}),

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\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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",
+  "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 type { TLEditorComponents } from './hooks/EditorComponentsContext'\nimport { useEditorComponents } from './hooks/EditorComponentsContext'\nimport { ContainerProvider, useContainer } from './hooks/useContainer'\nimport { useCursor } from './hooks/useCursor'\nimport { useDarkMode } from './hooks/useDarkMode'\nimport { EditorProvider, useEditor } from './hooks/useEditor'\nimport { EditorComponentsProvider } from './hooks/useEditorComponents'\nimport { useEvent } from './hooks/useEvent'\nimport { useForceUpdate } from './hooks/useForceUpdate'\nimport { useShallowObjectIdentity } from './hooks/useIdentity'\nimport { useLocalStore } from './hooks/useLocalStore'\nimport { useRefState } from './hooks/useRefState'\nimport { useStateAttribute } from './hooks/useStateAttribute'\nimport { useZoomCss } from './hooks/useZoomCss'\nimport { LicenseProvider } from './license/LicenseProvider'\nimport { Watermark } from './license/Watermark'\nimport { TldrawOptions } from './options'\nimport { TLDeepLinkOptions } from './utils/deepLinks'\nimport { 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/LiveCollaborators.js

@@ -24,8 +24,8 @@ module.exports = __toCommonJS(LiveCollaborators_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_state_react = require("@tldraw/state-react");
 var import_react = require("react");
+var import_EditorComponentsContext = require("../hooks/EditorComponentsContext");
 var import_useEditor = require("../hooks/useEditor");
-var import_useEditorComponents = require("../hooks/useEditorComponents");
 var import_usePeerIds = require("../hooks/usePeerIds");
 var import_usePresence = require("../hooks/usePresence");
 var import_collaboratorState = require("../utils/collaboratorState");
@@ -57,7 +57,7 @@ const Collaborator = (0, import_state_react.track)(function Collaborator2({
     CollaboratorCursor,
     CollaboratorHint,
     CollaboratorShapeIndicator
-  } = (0, import_useEditorComponents.useEditorComponents)();
+  } = (0, import_EditorComponentsContext.useEditorComponents)();
   const zoomLevel = editor.getZoomLevel();
   const viewportPageBounds = editor.getViewportPageBounds();
   const { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } = latestPresence;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/LiveCollaborators.tsx"],
-  "sourcesContent": ["import { track } from '@tldraw/state-react'\nimport { TLInstancePresence } from '@tldraw/tlschema'\nimport { useEffect, useRef, useState } from 'react'\nimport { Editor } from '../editor/Editor'\nimport { useEditor } from '../hooks/useEditor'\nimport { useEditorComponents } from '../hooks/useEditorComponents'\nimport { usePeerIds } from '../hooks/usePeerIds'\nimport { usePresence } from '../hooks/usePresence'\nimport {\n\tCollaboratorState,\n\tgetCollaboratorStateFromElapsedTime,\n\tshouldShowCollaborator,\n} from '../utils/collaboratorState'\n\nexport const LiveCollaborators = track(function Collaborators() {\n\tconst peerIds = usePeerIds()\n\treturn peerIds.map((id) => <CollaboratorGuard key={id} collaboratorId={id} />)\n})\n\nconst CollaboratorGuard = track(function CollaboratorGuard({\n\tcollaboratorId,\n}: {\n\tcollaboratorId: string\n}) {\n\tconst editor = useEditor()\n\tconst presence = usePresence(collaboratorId)\n\tconst collaboratorState = useCollaboratorState(editor, presence)\n\n\tif (!(presence && presence.currentPageId === editor.getCurrentPageId())) {\n\t\t// No need to render if we don't have a presence or if they're on a different page\n\t\treturn null\n\t}\n\n\tif (!shouldShowCollaborator(editor, presence, collaboratorState)) {\n\t\treturn null\n\t}\n\n\treturn <Collaborator latestPresence={presence} />\n})\n\nconst Collaborator = track(function Collaborator({\n\tlatestPresence,\n}: {\n\tlatestPresence: TLInstancePresence\n}) {\n\tconst editor = useEditor()\n\n\tconst {\n\t\tCollaboratorBrush,\n\t\tCollaboratorScribble,\n\t\tCollaboratorCursor,\n\t\tCollaboratorHint,\n\t\tCollaboratorShapeIndicator,\n\t} = useEditorComponents()\n\n\tconst zoomLevel = editor.getZoomLevel()\n\tconst viewportPageBounds = editor.getViewportPageBounds()\n\tconst { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } =\n\t\tlatestPresence\n\n\tif (!cursor) return null\n\n\t// Add a little padding to the top-left of the viewport\n\t// so that the cursor doesn't get cut off\n\tconst isCursorInViewport = !(\n\t\tcursor.x < viewportPageBounds.minX - 12 / zoomLevel ||\n\t\tcursor.y < viewportPageBounds.minY - 16 / zoomLevel ||\n\t\tcursor.x > viewportPageBounds.maxX - 12 / zoomLevel ||\n\t\tcursor.y > viewportPageBounds.maxY - 16 / zoomLevel\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{brush && CollaboratorBrush ? (\n\t\t\t\t<CollaboratorBrush\n\t\t\t\t\tclassName=\"tl-collaborator__brush\"\n\t\t\t\t\tkey={userId + '_brush'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tbrush={brush}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\topacity={0.1}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{isCursorInViewport && CollaboratorCursor ? (\n\t\t\t\t<CollaboratorCursor\n\t\t\t\t\tclassName=\"tl-collaborator__cursor\"\n\t\t\t\t\tkey={userId + '_cursor'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tname={userName !== 'New User' ? userName : null}\n\t\t\t\t\tchatMessage={chatMessage ?? ''}\n\t\t\t\t/>\n\t\t\t) : CollaboratorHint ? (\n\t\t\t\t<CollaboratorHint\n\t\t\t\t\tclassName=\"tl-collaborator__cursor-hint\"\n\t\t\t\t\tkey={userId + '_cursor_hint'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tviewport={viewportPageBounds}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{CollaboratorScribble && scribbles.length ? (\n\t\t\t\t<>\n\t\t\t\t\t{scribbles.map((scribble) => (\n\t\t\t\t\t\t<CollaboratorScribble\n\t\t\t\t\t\t\tkey={userId + '_scribble_' + scribble.id}\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__scribble\"\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tscribble={scribble}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\topacity={scribble.color === 'laser' ? 0.5 : 0.1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t) : null}\n\t\t\t{CollaboratorShapeIndicator &&\n\t\t\t\tselectedShapeIds\n\t\t\t\t\t.filter((id) => {\n\t\t\t\t\t\t// Skip hidden shapes\n\t\t\t\t\t\tif (editor.isShapeHidden(id)) return false\n\t\t\t\t\t\t// Only render SVG indicators for shapes that use legacy indicators\n\t\t\t\t\t\t// Canvas-based indicators are handled by CanvasShapeIndicators\n\t\t\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\t\t\tif (!shape) return false\n\t\t\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\t\t\treturn util.useLegacyIndicator()\n\t\t\t\t\t})\n\t\t\t\t\t.map((shapeId) => (\n\t\t\t\t\t\t<CollaboratorShapeIndicator\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__shape-indicator\"\n\t\t\t\t\t\t\tkey={userId + '_' + shapeId}\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\topacity={0.5}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t</>\n\t)\n})\n\nfunction useCollaboratorState(\n\teditor: Editor,\n\tlatestPresence: TLInstancePresence | null\n): CollaboratorState {\n\tconst rLastActivityTimestamp = useRef(latestPresence?.lastActivityTimestamp ?? -1)\n\n\tconst [state, setState] = useState<CollaboratorState>(() =>\n\t\tgetCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t)\n\n\tuseEffect(() => {\n\t\tconst interval = editor.timers.setInterval(() => {\n\t\t\tsetState(\n\t\t\t\tgetCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t\t\t)\n\t\t}, editor.options.collaboratorCheckIntervalMs)\n\n\t\treturn () => clearInterval(interval)\n\t}, [editor])\n\n\tif (latestPresence) {\n\t\t// We can do this on every render, it's free and cheaper than an effect\n\t\t// remember, there can be lots and lots of cursors moving around all the time\n\t\trLastActivityTimestamp.current = latestPresence.lastActivityTimestamp ?? Infinity\n\t}\n\n\treturn state\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { track } from '@tldraw/state-react'\nimport { TLInstancePresence } from '@tldraw/tlschema'\nimport { useEffect, useRef, useState } from 'react'\nimport { Editor } from '../editor/Editor'\nimport { useEditorComponents } from '../hooks/EditorComponentsContext'\nimport { useEditor } from '../hooks/useEditor'\nimport { usePeerIds } from '../hooks/usePeerIds'\nimport { usePresence } from '../hooks/usePresence'\nimport {\n\tCollaboratorState,\n\tgetCollaboratorStateFromElapsedTime,\n\tshouldShowCollaborator,\n} from '../utils/collaboratorState'\n\nexport const LiveCollaborators = track(function Collaborators() {\n\tconst peerIds = usePeerIds()\n\treturn peerIds.map((id) => <CollaboratorGuard key={id} collaboratorId={id} />)\n})\n\nconst CollaboratorGuard = track(function CollaboratorGuard({\n\tcollaboratorId,\n}: {\n\tcollaboratorId: string\n}) {\n\tconst editor = useEditor()\n\tconst presence = usePresence(collaboratorId)\n\tconst collaboratorState = useCollaboratorState(editor, presence)\n\n\tif (!(presence && presence.currentPageId === editor.getCurrentPageId())) {\n\t\t// No need to render if we don't have a presence or if they're on a different page\n\t\treturn null\n\t}\n\n\tif (!shouldShowCollaborator(editor, presence, collaboratorState)) {\n\t\treturn null\n\t}\n\n\treturn <Collaborator latestPresence={presence} />\n})\n\nconst Collaborator = track(function Collaborator({\n\tlatestPresence,\n}: {\n\tlatestPresence: TLInstancePresence\n}) {\n\tconst editor = useEditor()\n\n\tconst {\n\t\tCollaboratorBrush,\n\t\tCollaboratorScribble,\n\t\tCollaboratorCursor,\n\t\tCollaboratorHint,\n\t\tCollaboratorShapeIndicator,\n\t} = useEditorComponents()\n\n\tconst zoomLevel = editor.getZoomLevel()\n\tconst viewportPageBounds = editor.getViewportPageBounds()\n\tconst { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } =\n\t\tlatestPresence\n\n\tif (!cursor) return null\n\n\t// Add a little padding to the top-left of the viewport\n\t// so that the cursor doesn't get cut off\n\tconst isCursorInViewport = !(\n\t\tcursor.x < viewportPageBounds.minX - 12 / zoomLevel ||\n\t\tcursor.y < viewportPageBounds.minY - 16 / zoomLevel ||\n\t\tcursor.x > viewportPageBounds.maxX - 12 / zoomLevel ||\n\t\tcursor.y > viewportPageBounds.maxY - 16 / zoomLevel\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{brush && CollaboratorBrush ? (\n\t\t\t\t<CollaboratorBrush\n\t\t\t\t\tclassName=\"tl-collaborator__brush\"\n\t\t\t\t\tkey={userId + '_brush'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tbrush={brush}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\topacity={0.1}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{isCursorInViewport && CollaboratorCursor ? (\n\t\t\t\t<CollaboratorCursor\n\t\t\t\t\tclassName=\"tl-collaborator__cursor\"\n\t\t\t\t\tkey={userId + '_cursor'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tname={userName !== 'New User' ? userName : null}\n\t\t\t\t\tchatMessage={chatMessage ?? ''}\n\t\t\t\t/>\n\t\t\t) : CollaboratorHint ? (\n\t\t\t\t<CollaboratorHint\n\t\t\t\t\tclassName=\"tl-collaborator__cursor-hint\"\n\t\t\t\t\tkey={userId + '_cursor_hint'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tviewport={viewportPageBounds}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{CollaboratorScribble && scribbles.length ? (\n\t\t\t\t<>\n\t\t\t\t\t{scribbles.map((scribble) => (\n\t\t\t\t\t\t<CollaboratorScribble\n\t\t\t\t\t\t\tkey={userId + '_scribble_' + scribble.id}\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__scribble\"\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tscribble={scribble}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\topacity={scribble.color === 'laser' ? 0.5 : 0.1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t) : null}\n\t\t\t{CollaboratorShapeIndicator &&\n\t\t\t\tselectedShapeIds\n\t\t\t\t\t.filter((id) => {\n\t\t\t\t\t\t// Skip hidden shapes\n\t\t\t\t\t\tif (editor.isShapeHidden(id)) return false\n\t\t\t\t\t\t// Only render SVG indicators for shapes that use legacy indicators\n\t\t\t\t\t\t// Canvas-based indicators are handled by CanvasShapeIndicators\n\t\t\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\t\t\tif (!shape) return false\n\t\t\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\t\t\treturn util.useLegacyIndicator()\n\t\t\t\t\t})\n\t\t\t\t\t.map((shapeId) => (\n\t\t\t\t\t\t<CollaboratorShapeIndicator\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__shape-indicator\"\n\t\t\t\t\t\t\tkey={userId + '_' + shapeId}\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\topacity={0.5}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t</>\n\t)\n})\n\nfunction useCollaboratorState(\n\teditor: Editor,\n\tlatestPresence: TLInstancePresence | null\n): CollaboratorState {\n\tconst rLastActivityTimestamp = useRef(latestPresence?.lastActivityTimestamp ?? -1)\n\n\tconst [state, setState] = useState<CollaboratorState>(() =>\n\t\tgetCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t)\n\n\tuseEffect(() => {\n\t\tconst interval = editor.timers.setInterval(() => {\n\t\t\tsetState(\n\t\t\t\tgetCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t\t\t)\n\t\t}, editor.options.collaboratorCheckIntervalMs)\n\n\t\treturn () => clearInterval(interval)\n\t}, [editor])\n\n\tif (latestPresence) {\n\t\t// We can do this on every render, it's free and cheaper than an effect\n\t\t// remember, there can be lots and lots of cursors moving around all the time\n\t\trLastActivityTimestamp.current = latestPresence.lastActivityTimestamp ?? Infinity\n\t}\n\n\treturn state\n}\n"],
+  "mappings": "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",
   "names": ["CollaboratorGuard", "Collaborator"]
 }

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

@@ -27,8 +27,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_state = require("@tldraw/state");
 var import_state_react = require("@tldraw/state-react");
 var import_react = require("react");
+var import_EditorComponentsContext = require("../hooks/EditorComponentsContext");
 var import_useEditor = require("../hooks/useEditor");
-var import_useEditorComponents = require("../hooks/useEditorComponents");
 var import_useShapeCulling = require("../hooks/useShapeCulling");
 var import_Mat = require("../primitives/Mat");
 var import_areShapesContentEqual = require("../utils/areShapesContentEqual");
@@ -43,7 +43,7 @@ const Shape = (0, import_react.memo)(function Shape2({
   opacity
 }) {
   const editor = (0, import_useEditor.useEditor)();
-  const { ShapeErrorFallback, ShapeWrapper } = (0, import_useEditorComponents.useEditorComponents)();
+  const { ShapeErrorFallback, ShapeWrapper } = (0, import_EditorComponentsContext.useEditorComponents)();
   const containerRef = (0, import_react.useRef)(null);
   const bgContainerRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {