tldraw 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/Tldraw.tsx"],
-  "sourcesContent": ["import {\n\tDEFAULT_SUPPORTED_IMAGE_TYPES,\n\tDEFAULT_SUPPORT_VIDEO_TYPES,\n\tTLEditorComponents,\n\tTLOnMountHandler,\n\tTLTextOptions,\n\tTldrawEditor,\n\tTldrawEditorBaseProps,\n\tTldrawEditorStoreProps,\n\tdefaultUserPreferences,\n\tmergeArraysAndReplaceDefaults,\n\tuseEditor,\n\tuseEditorComponents,\n\tuseOnMount,\n\tuseShallowArrayIdentity,\n\tuseShallowObjectIdentity,\n} from '@tldraw/editor'\nimport { useMemo } from 'react'\nimport { TldrawHandles } from './canvas/TldrawHandles'\nimport { TldrawOverlays } from './canvas/TldrawOverlays'\nimport { TldrawScribble } from './canvas/TldrawScribble'\nimport { TldrawSelectionForeground } from './canvas/TldrawSelectionForeground'\nimport { TldrawShapeIndicators } from './canvas/TldrawShapeIndicators'\nimport { defaultBindingUtils } from './defaultBindingUtils'\nimport { TLEmbedDefinition } from './defaultEmbedDefinitions'\nimport {\n\tTLExternalContentProps,\n\tregisterDefaultExternalContentHandlers,\n} from './defaultExternalContentHandlers'\nimport { defaultShapeTools } from './defaultShapeTools'\nimport { defaultShapeUtils } from './defaultShapeUtils'\nimport { registerDefaultSideEffects } from './defaultSideEffects'\nimport { defaultTools } from './defaultTools'\nimport { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'\nimport { allDefaultFontFaces } from './shapes/shared/defaultFonts'\nimport { TldrawUi, TldrawUiProps } from './ui/TldrawUi'\nimport { TLUiAssetUrlOverrides, useDefaultUiAssetUrlsWithOverrides } from './ui/assetUrls'\nimport { LoadingScreen } from './ui/components/LoadingScreen'\nimport { Spinner } from './ui/components/Spinner'\nimport { AssetUrlsProvider } from './ui/context/asset-urls'\nimport { TLUiComponents, useTldrawUiComponents } from './ui/context/components'\nimport { useUiEvents } from './ui/context/events'\nimport { useToasts } from './ui/context/toasts'\nimport {\n\tTldrawUiTranslationProvider,\n\tuseTranslation,\n} from './ui/hooks/useTranslation/useTranslation'\nimport { useMergedTranslationOverrides } from './ui/overrides'\nimport { useDefaultEditorAssetsWithOverrides } from './utils/static-assets/assetUrls'\nimport { defaultAddFontsFromNode, tipTapDefaultExtensions } from './utils/text/richText'\n\n/**\n * Override the default react components used by the editor and UI. Set components to null to\n * disable them entirely.\n *\n * @example\n * ```tsx\n * import {Tldraw, TLComponents} from 'tldraw'\n *\n * const components: TLComponents = {\n *    Scribble: MyCustomScribble,\n * }\n *\n * export function MyApp() {\n *   return <Tldraw components={components} />\n * }\n * ```\n *\n *\n * @public\n */\nexport interface TLComponents extends TLEditorComponents, TLUiComponents {}\n\n/** @public */\nexport interface TldrawBaseProps\n\textends TldrawUiProps,\n\t\tTldrawEditorBaseProps,\n\t\tTLExternalContentProps {\n\t/** Urls for custom assets.\n\t *\n\t * \u26A0\uFE0E Important! This must be memoized (with useMemo) or defined outside of any React component.\n\t */\n\tassetUrls?: TLUiAssetUrlOverrides\n\t/** Overrides for tldraw's components.\n\t *\n\t * \u26A0\uFE0E Important! This must be memoized (with useMemo) or defined outside of any React component.\n\t */\n\tcomponents?: TLComponents\n\t/** Custom definitions for tldraw's embeds.\n\t *\n\t * \u26A0\uFE0E Important! This must be memoized (with useMemo) or defined outside of any React component.\n\t */\n\tembeds?: TLEmbedDefinition[]\n}\n\n/** @public */\nexport type TldrawProps = TldrawBaseProps & TldrawEditorStoreProps\n\nconst allDefaultTools = [...defaultTools, ...defaultShapeTools]\n\n/** @public @react */\nexport function Tldraw(props: TldrawProps) {\n\tconst {\n\t\tchildren,\n\t\tmaxImageDimension,\n\t\tmaxAssetSize,\n\t\tacceptedImageMimeTypes,\n\t\tacceptedVideoMimeTypes,\n\t\tonMount,\n\t\tcomponents = {},\n\t\tshapeUtils = [],\n\t\tbindingUtils = [],\n\t\ttools = [],\n\t\tembeds,\n\t\ttextOptions,\n\t\t...rest\n\t} = props\n\n\tconst _components = useShallowObjectIdentity(components)\n\n\tconst componentsWithDefault = useMemo(\n\t\t() => ({\n\t\t\tScribble: TldrawScribble,\n\t\t\tShapeIndicators: TldrawShapeIndicators,\n\t\t\tCollaboratorScribble: TldrawScribble,\n\t\t\tSelectionForeground: TldrawSelectionForeground,\n\t\t\tHandles: TldrawHandles,\n\t\t\tOverlays: TldrawOverlays,\n\t\t\tSpinner,\n\t\t\tLoadingScreen,\n\t\t\t..._components,\n\t\t}),\n\t\t[_components]\n\t)\n\n\tconst _shapeUtils = useShallowArrayIdentity(shapeUtils)\n\tconst shapeUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _shapeUtils, defaultShapeUtils),\n\t\t[_shapeUtils]\n\t)\n\n\tconst _bindingUtils = useShallowArrayIdentity(bindingUtils)\n\tconst bindingUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _bindingUtils, defaultBindingUtils),\n\t\t[_bindingUtils]\n\t)\n\n\tconst _tools = useShallowArrayIdentity(tools)\n\tconst toolsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('id', _tools, allDefaultTools),\n\t\t[_tools]\n\t)\n\n\tconst _imageMimeTypes = useShallowArrayIdentity(\n\t\tacceptedImageMimeTypes ?? DEFAULT_SUPPORTED_IMAGE_TYPES\n\t)\n\tconst _videoMimeTypes = useShallowArrayIdentity(\n\t\tacceptedVideoMimeTypes ?? DEFAULT_SUPPORT_VIDEO_TYPES\n\t)\n\n\tconst textOptionsWithDefaults = useMemo((): TLTextOptions => {\n\t\treturn {\n\t\t\taddFontsFromNode: defaultAddFontsFromNode,\n\t\t\t...textOptions,\n\t\t\ttipTapConfig: {\n\t\t\t\textensions: tipTapDefaultExtensions,\n\t\t\t\t...textOptions?.tipTapConfig,\n\t\t\t},\n\t\t}\n\t}, [textOptions])\n\n\tconst mediaMimeTypes = useMemo(\n\t\t() => [..._imageMimeTypes, ..._videoMimeTypes],\n\t\t[_imageMimeTypes, _videoMimeTypes]\n\t)\n\n\tconst assets = useDefaultEditorAssetsWithOverrides(rest.assetUrls)\n\n\tconst embedShapeUtil = shapeUtilsWithDefaults.find((util) => util.type === 'embed')\n\tif (embedShapeUtil && embeds) {\n\t\tEmbedShapeUtil.setEmbedDefinitions(embeds)\n\t}\n\n\treturn (\n\t\t// We provide an extra higher layer of asset+translations providers here so that\n\t\t// loading UI (which is rendered outside of TldrawUi) may be translated.\n\t\t// Ideally we would refactor to hoist all the UI context providers we can up here. Maybe later.\n\t\t<AssetUrlsProvider assetUrls={useDefaultUiAssetUrlsWithOverrides(rest.assetUrls)}>\n\t\t\t<TldrawUiTranslationProvider\n\t\t\t\toverrides={useMergedTranslationOverrides(rest.overrides)}\n\t\t\t\tlocale={rest.user?.userPreferences.get().locale ?? defaultUserPreferences.locale}\n\t\t\t>\n\t\t\t\t<TldrawEditor\n\t\t\t\t\tinitialState=\"select\"\n\t\t\t\t\t{...rest}\n\t\t\t\t\tcomponents={componentsWithDefault}\n\t\t\t\t\tshapeUtils={shapeUtilsWithDefaults}\n\t\t\t\t\tbindingUtils={bindingUtilsWithDefaults}\n\t\t\t\t\ttools={toolsWithDefaults}\n\t\t\t\t\ttextOptions={textOptionsWithDefaults}\n\t\t\t\t\tassetUrls={assets}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUi {...rest} components={componentsWithDefault} mediaMimeTypes={mediaMimeTypes}>\n\t\t\t\t\t\t<InsideOfEditorAndUiContext\n\t\t\t\t\t\t\tmaxImageDimension={maxImageDimension}\n\t\t\t\t\t\t\tmaxAssetSize={maxAssetSize}\n\t\t\t\t\t\t\tacceptedImageMimeTypes={_imageMimeTypes}\n\t\t\t\t\t\t\tacceptedVideoMimeTypes={_videoMimeTypes}\n\t\t\t\t\t\t\tonMount={onMount}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</TldrawUi>\n\t\t\t\t</TldrawEditor>\n\t\t\t</TldrawUiTranslationProvider>\n\t\t</AssetUrlsProvider>\n\t)\n}\n\n// We put these hooks into a component here so that they can run inside of the context provided by TldrawEditor and TldrawUi.\nfunction InsideOfEditorAndUiContext({\n\tmaxImageDimension,\n\tmaxAssetSize,\n\tacceptedImageMimeTypes,\n\tacceptedVideoMimeTypes,\n\tonMount,\n}: TLExternalContentProps & {\n\tonMount?: TLOnMountHandler\n}) {\n\tconst editor = useEditor()\n\tconst toasts = useToasts()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tuseOnMount(() => {\n\t\tconst unsubs: (void | (() => void) | undefined)[] = []\n\n\t\tunsubs.push(registerDefaultSideEffects(editor))\n\n\t\t// now that the editor has mounted (and presumably pre-loaded the fonts actually in use in\n\t\t// the document), we want to preload the other default font faces in the background. These\n\t\t// won't be directly used, but mean that when adding text the user can switch between fonts\n\t\t// quickly, without having to wait for them to load in.\n\t\teditor.fonts.requestFonts(allDefaultFontFaces)\n\n\t\teditor.once('edit', () => trackEvent('edit', { source: 'unknown' }))\n\n\t\t// for content handling, first we register the default handlers...\n\t\tregisterDefaultExternalContentHandlers(editor, {\n\t\t\tmaxImageDimension,\n\t\t\tmaxAssetSize,\n\t\t\tacceptedImageMimeTypes,\n\t\t\tacceptedVideoMimeTypes,\n\t\t\ttoasts,\n\t\t\tmsg,\n\t\t})\n\n\t\t// ...then we call the store's on mount which may override them...\n\t\tunsubs.push(editor.store.props.onMount(editor))\n\n\t\t// ...then we run the user's onMount prop, which may override things again.\n\t\tunsubs.push(onMount?.(editor))\n\n\t\treturn () => {\n\t\t\tunsubs.forEach((fn) => fn?.())\n\t\t}\n\t})\n\n\tconst { Canvas } = useEditorComponents()\n\tconst { ContextMenu } = useTldrawUiComponents()\n\n\tif (ContextMenu) {\n\t\t// should wrap canvas\n\t\treturn <ContextMenu />\n\t}\n\n\tif (Canvas) {\n\t\treturn <Canvas />\n\t}\n\n\treturn null\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tDEFAULT_SUPPORTED_IMAGE_TYPES,\n\tDEFAULT_SUPPORT_VIDEO_TYPES,\n\tTLEditorComponents,\n\tTLOnMountHandler,\n\tTLTextOptions,\n\tTldrawEditor,\n\tTldrawEditorBaseProps,\n\tTldrawEditorStoreProps,\n\tdefaultUserPreferences,\n\tmergeArraysAndReplaceDefaults,\n\tuseEditor,\n\tuseEditorComponents,\n\tuseOnMount,\n\tuseShallowArrayIdentity,\n\tuseShallowObjectIdentity,\n} from '@tldraw/editor'\nimport { useMemo } from 'react'\nimport { TldrawHandles } from './canvas/TldrawHandles'\nimport { TldrawOverlays } from './canvas/TldrawOverlays'\nimport { TldrawScribble } from './canvas/TldrawScribble'\nimport { TldrawSelectionForeground } from './canvas/TldrawSelectionForeground'\nimport { TldrawShapeIndicators } from './canvas/TldrawShapeIndicators'\nimport { defaultBindingUtils } from './defaultBindingUtils'\nimport { TLEmbedDefinition } from './defaultEmbedDefinitions'\nimport {\n\tTLExternalContentProps,\n\tregisterDefaultExternalContentHandlers,\n} from './defaultExternalContentHandlers'\nimport { defaultShapeTools } from './defaultShapeTools'\nimport { defaultShapeUtils } from './defaultShapeUtils'\nimport { registerDefaultSideEffects } from './defaultSideEffects'\nimport { defaultTools } from './defaultTools'\nimport { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'\nimport { allDefaultFontFaces } from './shapes/shared/defaultFonts'\nimport { TldrawUi, TldrawUiInFrontOfTheCanvas, TldrawUiProps } from './ui/TldrawUi'\nimport { TLUiAssetUrlOverrides, useDefaultUiAssetUrlsWithOverrides } from './ui/assetUrls'\nimport { LoadingScreen } from './ui/components/LoadingScreen'\nimport { Spinner } from './ui/components/Spinner'\nimport { AssetUrlsProvider } from './ui/context/asset-urls'\nimport { TLUiComponents, useTldrawUiComponents } from './ui/context/components'\nimport { useUiEvents } from './ui/context/events'\nimport { useToasts } from './ui/context/toasts'\nimport {\n\tTldrawUiTranslationProvider,\n\tuseTranslation,\n} from './ui/hooks/useTranslation/useTranslation'\nimport { useMergedTranslationOverrides } from './ui/overrides'\nimport { useDefaultEditorAssetsWithOverrides } from './utils/static-assets/assetUrls'\nimport { defaultAddFontsFromNode, tipTapDefaultExtensions } from './utils/text/richText'\n\n/**\n * Override the default react components used by the editor and UI. Set components to null to\n * disable them entirely.\n *\n * @example\n * ```tsx\n * import {Tldraw, TLComponents} from 'tldraw'\n *\n * const components: TLComponents = {\n *    Scribble: MyCustomScribble,\n * }\n *\n * export function MyApp() {\n *   return <Tldraw components={components} />\n * }\n * ```\n *\n *\n * @public\n */\nexport interface TLComponents extends TLEditorComponents, TLUiComponents {}\n\n/** @public */\nexport interface TldrawBaseProps\n\textends TldrawUiProps,\n\t\tTldrawEditorBaseProps,\n\t\tTLExternalContentProps {\n\t/** Urls for custom assets.\n\t *\n\t * \u26A0\uFE0E Important! This must be memoized (with useMemo) or defined outside of any React component.\n\t */\n\tassetUrls?: TLUiAssetUrlOverrides\n\t/** Overrides for tldraw's components.\n\t *\n\t * \u26A0\uFE0E Important! This must be memoized (with useMemo) or defined outside of any React component.\n\t */\n\tcomponents?: TLComponents\n\t/** Custom definitions for tldraw's embeds.\n\t *\n\t * \u26A0\uFE0E Important! This must be memoized (with useMemo) or defined outside of any React component.\n\t */\n\tembeds?: TLEmbedDefinition[]\n}\n\n/** @public */\nexport type TldrawProps = TldrawBaseProps & TldrawEditorStoreProps\n\nconst allDefaultTools = [...defaultTools, ...defaultShapeTools]\n\n/** @public @react */\nexport function Tldraw(props: TldrawProps) {\n\tconst {\n\t\tchildren,\n\t\tmaxImageDimension,\n\t\tmaxAssetSize,\n\t\tacceptedImageMimeTypes,\n\t\tacceptedVideoMimeTypes,\n\t\tonMount,\n\t\tcomponents = {},\n\t\tshapeUtils = [],\n\t\tbindingUtils = [],\n\t\ttools = [],\n\t\tembeds,\n\t\ttextOptions,\n\t\t...rest\n\t} = props\n\n\tconst _components = useShallowObjectIdentity(components)\n\n\tconst CustomInFrontOfTheCanvas = components?.InFrontOfTheCanvas\n\tconst InFrontOfTheCanvas = useMemo(() => {\n\t\tif (rest.hideUi) return CustomInFrontOfTheCanvas ?? null\n\t\tif (!CustomInFrontOfTheCanvas) return TldrawUiInFrontOfTheCanvas\n\n\t\treturn () => (\n\t\t\t<>\n\t\t\t\t<TldrawUiInFrontOfTheCanvas />\n\t\t\t\t<CustomInFrontOfTheCanvas />\n\t\t\t</>\n\t\t)\n\t}, [rest.hideUi, CustomInFrontOfTheCanvas])\n\tconst componentsWithDefault = useMemo(\n\t\t() => ({\n\t\t\tScribble: TldrawScribble,\n\t\t\tShapeIndicators: TldrawShapeIndicators,\n\t\t\tCollaboratorScribble: TldrawScribble,\n\t\t\tSelectionForeground: TldrawSelectionForeground,\n\t\t\tHandles: TldrawHandles,\n\t\t\tOverlays: TldrawOverlays,\n\t\t\tSpinner,\n\t\t\tLoadingScreen,\n\t\t\t..._components,\n\t\t\tInFrontOfTheCanvas,\n\t\t}),\n\t\t[_components, InFrontOfTheCanvas]\n\t)\n\n\tconst _shapeUtils = useShallowArrayIdentity(shapeUtils)\n\tconst shapeUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _shapeUtils, defaultShapeUtils),\n\t\t[_shapeUtils]\n\t)\n\n\tconst _bindingUtils = useShallowArrayIdentity(bindingUtils)\n\tconst bindingUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _bindingUtils, defaultBindingUtils),\n\t\t[_bindingUtils]\n\t)\n\n\tconst _tools = useShallowArrayIdentity(tools)\n\tconst toolsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('id', _tools, allDefaultTools),\n\t\t[_tools]\n\t)\n\n\tconst _imageMimeTypes = useShallowArrayIdentity(\n\t\tacceptedImageMimeTypes ?? DEFAULT_SUPPORTED_IMAGE_TYPES\n\t)\n\tconst _videoMimeTypes = useShallowArrayIdentity(\n\t\tacceptedVideoMimeTypes ?? DEFAULT_SUPPORT_VIDEO_TYPES\n\t)\n\n\tconst textOptionsWithDefaults = useMemo((): TLTextOptions => {\n\t\treturn {\n\t\t\taddFontsFromNode: defaultAddFontsFromNode,\n\t\t\t...textOptions,\n\t\t\ttipTapConfig: {\n\t\t\t\textensions: tipTapDefaultExtensions,\n\t\t\t\t...textOptions?.tipTapConfig,\n\t\t\t},\n\t\t}\n\t}, [textOptions])\n\n\tconst mediaMimeTypes = useMemo(\n\t\t() => [..._imageMimeTypes, ..._videoMimeTypes],\n\t\t[_imageMimeTypes, _videoMimeTypes]\n\t)\n\n\tconst assets = useDefaultEditorAssetsWithOverrides(rest.assetUrls)\n\n\tconst embedShapeUtil = shapeUtilsWithDefaults.find((util) => util.type === 'embed')\n\tif (embedShapeUtil && embeds) {\n\t\tEmbedShapeUtil.setEmbedDefinitions(embeds)\n\t}\n\n\treturn (\n\t\t// We provide an extra higher layer of asset+translations providers here so that\n\t\t// loading UI (which is rendered outside of TldrawUi) may be translated.\n\t\t// Ideally we would refactor to hoist all the UI context providers we can up here. Maybe later.\n\t\t<AssetUrlsProvider assetUrls={useDefaultUiAssetUrlsWithOverrides(rest.assetUrls)}>\n\t\t\t<TldrawUiTranslationProvider\n\t\t\t\toverrides={useMergedTranslationOverrides(rest.overrides)}\n\t\t\t\tlocale={rest.user?.userPreferences.get().locale ?? defaultUserPreferences.locale}\n\t\t\t>\n\t\t\t\t<TldrawEditor\n\t\t\t\t\tinitialState=\"select\"\n\t\t\t\t\t{...rest}\n\t\t\t\t\tcomponents={componentsWithDefault}\n\t\t\t\t\tshapeUtils={shapeUtilsWithDefaults}\n\t\t\t\t\tbindingUtils={bindingUtilsWithDefaults}\n\t\t\t\t\ttools={toolsWithDefaults}\n\t\t\t\t\ttextOptions={textOptionsWithDefaults}\n\t\t\t\t\tassetUrls={assets}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUi {...rest} components={componentsWithDefault} mediaMimeTypes={mediaMimeTypes}>\n\t\t\t\t\t\t<InsideOfEditorAndUiContext\n\t\t\t\t\t\t\tmaxImageDimension={maxImageDimension}\n\t\t\t\t\t\t\tmaxAssetSize={maxAssetSize}\n\t\t\t\t\t\t\tacceptedImageMimeTypes={_imageMimeTypes}\n\t\t\t\t\t\t\tacceptedVideoMimeTypes={_videoMimeTypes}\n\t\t\t\t\t\t\tonMount={onMount}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</TldrawUi>\n\t\t\t\t</TldrawEditor>\n\t\t\t</TldrawUiTranslationProvider>\n\t\t</AssetUrlsProvider>\n\t)\n}\n\n// We put these hooks into a component here so that they can run inside of the context provided by TldrawEditor and TldrawUi.\nfunction InsideOfEditorAndUiContext({\n\tmaxImageDimension,\n\tmaxAssetSize,\n\tacceptedImageMimeTypes,\n\tacceptedVideoMimeTypes,\n\tonMount,\n}: TLExternalContentProps & {\n\tonMount?: TLOnMountHandler\n}) {\n\tconst editor = useEditor()\n\tconst toasts = useToasts()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tuseOnMount(() => {\n\t\tconst unsubs: (void | (() => void) | undefined)[] = []\n\n\t\tunsubs.push(registerDefaultSideEffects(editor))\n\n\t\t// now that the editor has mounted (and presumably pre-loaded the fonts actually in use in\n\t\t// the document), we want to preload the other default font faces in the background. These\n\t\t// won't be directly used, but mean that when adding text the user can switch between fonts\n\t\t// quickly, without having to wait for them to load in.\n\t\teditor.fonts.requestFonts(allDefaultFontFaces)\n\n\t\teditor.once('edit', () => trackEvent('edit', { source: 'unknown' }))\n\n\t\t// for content handling, first we register the default handlers...\n\t\tregisterDefaultExternalContentHandlers(editor, {\n\t\t\tmaxImageDimension,\n\t\t\tmaxAssetSize,\n\t\t\tacceptedImageMimeTypes,\n\t\t\tacceptedVideoMimeTypes,\n\t\t\ttoasts,\n\t\t\tmsg,\n\t\t})\n\n\t\t// ...then we call the store's on mount which may override them...\n\t\tunsubs.push(editor.store.props.onMount(editor))\n\n\t\t// ...then we run the user's onMount prop, which may override things again.\n\t\tunsubs.push(onMount?.(editor))\n\n\t\treturn () => {\n\t\t\tunsubs.forEach((fn) => fn?.())\n\t\t}\n\t})\n\n\tconst { Canvas } = useEditorComponents()\n\tconst { ContextMenu } = useTldrawUiComponents()\n\n\tif (ContextMenu) {\n\t\t// should wrap canvas\n\t\treturn <ContextMenu />\n\t}\n\n\tif (Canvas) {\n\t\treturn <Canvas />\n\t}\n\n\treturn null\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/TldrawImage.mjs

@@ -8,6 +8,7 @@ import {
 import { memo, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { defaultBindingUtils } from "./defaultBindingUtils.mjs";
 import { defaultShapeUtils } from "./defaultShapeUtils.mjs";
+import { useDefaultEditorAssetsWithOverrides } from "./utils/static-assets/assetUrls.mjs";
 import { defaultAddFontsFromNode, tipTapDefaultExtensions } from "./utils/text/richText.mjs";
 const defaultTextOptions = {
   tipTapConfig: {
@@ -43,6 +44,7 @@ const TldrawImage = memo(function TldrawImage2(props) {
     assetUrls,
     textOptions = defaultTextOptions
   } = props;
+  const assetUrlsWithOverrides = useDefaultEditorAssetsWithOverrides(assetUrls);
   useLayoutEffect(() => {
     if (!container) return;
     if (!store) return;
@@ -57,12 +59,13 @@ const TldrawImage = memo(function TldrawImage2(props) {
       tools: [],
       getContainer: () => tempElm,
       licenseKey,
-      fontAssetUrls: assetUrls?.fonts,
+      fontAssetUrls: assetUrlsWithOverrides.fonts,
       textOptions
     });
     if (pageId) editor.setCurrentPage(pageId);
     const shapeIds = editor.getCurrentPageShapeIds();
     async function setSvg() {
+      await editor.fonts.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender);
       const imageResult = await editor.toImage([...shapeIds], {
         bounds,
         scale,
@@ -96,7 +99,7 @@ const TldrawImage = memo(function TldrawImage2(props) {
     preserveAspectRatio,
     licenseKey,
     pixelRatio,
-    assetUrls,
+    assetUrlsWithOverrides,
     textOptions
   ]);
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/TldrawImage.tsx"],
-  "sourcesContent": ["import {\n\tEditor,\n\tTLAnyBindingUtilConstructor,\n\tTLAnyShapeUtilConstructor,\n\tTLEditorSnapshot,\n\tTLImageExportOptions,\n\tTLPageId,\n\tTLStoreSnapshot,\n\tTLTextOptions,\n\tmergeArraysAndReplaceDefaults,\n\tuseShallowArrayIdentity,\n\tuseTLStore,\n} from '@tldraw/editor'\nimport { memo, useEffect, useLayoutEffect, useMemo, useState } from 'react'\nimport { defaultBindingUtils } from './defaultBindingUtils'\nimport { defaultShapeUtils } from './defaultShapeUtils'\nimport { TLUiAssetUrlOverrides } from './ui/assetUrls'\nimport { defaultAddFontsFromNode, tipTapDefaultExtensions } from './utils/text/richText'\n\n/** @public */\nexport interface TldrawImageProps extends TLImageExportOptions {\n\t/**\n\t * The snapshot to display.\n\t */\n\tsnapshot: Partial<TLEditorSnapshot> | TLStoreSnapshot\n\n\t/**\n\t * The image format to use. Defaults to 'svg'.\n\t */\n\tformat?: 'svg' | 'png'\n\n\t/**\n\t * The page to display. Defaults to the first page.\n\t */\n\tpageId?: TLPageId\n\n\t/**\n\t * Additional shape utils to use.\n\t */\n\tshapeUtils?: readonly TLAnyShapeUtilConstructor[]\n\t/**\n\t * Additional binding utils to use.\n\t */\n\tbindingUtils?: readonly TLAnyBindingUtilConstructor[]\n\t/**\n\t * The license key.\n\t */\n\tlicenseKey?: string\n\t/**\n\t * Asset URL overrides.\n\t */\n\tassetUrls?: TLUiAssetUrlOverrides\n\t/**\n\t * Text options for the editor.\n\t */\n\ttextOptions?: TLTextOptions\n}\n\nconst defaultTextOptions = {\n\ttipTapConfig: {\n\t\textensions: tipTapDefaultExtensions,\n\t},\n\taddFontsFromNode: defaultAddFontsFromNode,\n}\n\n/**\n * A rendered SVG image of a Tldraw snapshot.\n *\n * @example\n * ```tsx\n * <TldrawImage\n * \tsnapshot={snapshot}\n * \tpageId={pageId}\n * \tbackground={false}\n *  darkMode={true}\n *  bounds={new Box(0,0,600,400)}\n *  scale={1}\n * />\n * ```\n *\n * @public\n * @react\n */\nexport const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {\n\tconst [url, setUrl] = useState<string | null>(null)\n\tconst [container, setContainer] = useState<HTMLDivElement | null>(null)\n\n\tconst _shapeUtils = useShallowArrayIdentity(props.shapeUtils ?? [])\n\tconst shapeUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _shapeUtils, defaultShapeUtils),\n\t\t[_shapeUtils]\n\t)\n\tconst _bindingUtils = useShallowArrayIdentity(props.bindingUtils ?? [])\n\tconst bindingUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _bindingUtils, defaultBindingUtils),\n\t\t[_bindingUtils]\n\t)\n\tconst store = useTLStore({ snapshot: props.snapshot, shapeUtils: shapeUtilsWithDefaults })\n\n\tconst {\n\t\tpageId,\n\t\tbounds,\n\t\tscale,\n\t\tpixelRatio,\n\t\tbackground,\n\t\tpadding,\n\t\tdarkMode,\n\t\tpreserveAspectRatio,\n\t\tformat = 'svg',\n\t\tlicenseKey,\n\t\tassetUrls,\n\t\ttextOptions = defaultTextOptions,\n\t} = props\n\n\tuseLayoutEffect(() => {\n\t\tif (!container) return\n\t\tif (!store) return\n\n\t\tlet isCancelled = false\n\n\t\tconst tempElm = document.createElement('div')\n\t\tcontainer.appendChild(tempElm)\n\t\tcontainer.classList.add('tl-container', 'tl-theme__light')\n\n\t\tconst editor = new Editor({\n\t\t\tstore,\n\t\t\tshapeUtils: shapeUtilsWithDefaults,\n\t\t\tbindingUtils: bindingUtilsWithDefaults,\n\t\t\ttools: [],\n\t\t\tgetContainer: () => tempElm,\n\t\t\tlicenseKey,\n\t\t\tfontAssetUrls: assetUrls?.fonts,\n\t\t\ttextOptions,\n\t\t})\n\n\t\tif (pageId) editor.setCurrentPage(pageId)\n\n\t\tconst shapeIds = editor.getCurrentPageShapeIds()\n\n\t\tasync function setSvg() {\n\t\t\tconst imageResult = await editor.toImage([...shapeIds], {\n\t\t\t\tbounds,\n\t\t\t\tscale,\n\t\t\t\tbackground,\n\t\t\t\tpadding,\n\t\t\t\tdarkMode,\n\t\t\t\tpreserveAspectRatio,\n\t\t\t\tformat,\n\t\t\t})\n\t\t\tif (!imageResult || isCancelled) return\n\n\t\t\tconst url = URL.createObjectURL(imageResult.blob)\n\t\t\tsetUrl(url)\n\n\t\t\teditor.dispose()\n\t\t}\n\n\t\tsetSvg()\n\n\t\treturn () => {\n\t\t\tisCancelled = true\n\t\t}\n\t}, [\n\t\tformat,\n\t\tcontainer,\n\t\tstore,\n\t\tshapeUtilsWithDefaults,\n\t\tbindingUtilsWithDefaults,\n\t\tpageId,\n\t\tbounds,\n\t\tscale,\n\t\tbackground,\n\t\tpadding,\n\t\tdarkMode,\n\t\tpreserveAspectRatio,\n\t\tlicenseKey,\n\t\tpixelRatio,\n\t\tassetUrls,\n\t\ttextOptions,\n\t])\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (url) URL.revokeObjectURL(url)\n\t\t}\n\t}, [url])\n\n\treturn (\n\t\t<div ref={setContainer} style={{ position: 'relative', width: '100%', height: '100%' }}>\n\t\t\t{url && (\n\t\t\t\t<img\n\t\t\t\t\tsrc={url}\n\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\tstyle={{ width: '100%', height: '100%' }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tEditor,\n\tTLAnyBindingUtilConstructor,\n\tTLAnyShapeUtilConstructor,\n\tTLEditorSnapshot,\n\tTLImageExportOptions,\n\tTLPageId,\n\tTLStoreSnapshot,\n\tTLTextOptions,\n\tmergeArraysAndReplaceDefaults,\n\tuseShallowArrayIdentity,\n\tuseTLStore,\n} from '@tldraw/editor'\nimport { memo, useEffect, useLayoutEffect, useMemo, useState } from 'react'\nimport { defaultBindingUtils } from './defaultBindingUtils'\nimport { defaultShapeUtils } from './defaultShapeUtils'\nimport { TLUiAssetUrlOverrides } from './ui/assetUrls'\nimport { useDefaultEditorAssetsWithOverrides } from './utils/static-assets/assetUrls'\nimport { defaultAddFontsFromNode, tipTapDefaultExtensions } from './utils/text/richText'\n\n/** @public */\nexport interface TldrawImageProps extends TLImageExportOptions {\n\t/**\n\t * The snapshot to display.\n\t */\n\tsnapshot: Partial<TLEditorSnapshot> | TLStoreSnapshot\n\n\t/**\n\t * The image format to use. Defaults to 'svg'.\n\t */\n\tformat?: 'svg' | 'png'\n\n\t/**\n\t * The page to display. Defaults to the first page.\n\t */\n\tpageId?: TLPageId\n\n\t/**\n\t * Additional shape utils to use.\n\t */\n\tshapeUtils?: readonly TLAnyShapeUtilConstructor[]\n\t/**\n\t * Additional binding utils to use.\n\t */\n\tbindingUtils?: readonly TLAnyBindingUtilConstructor[]\n\t/**\n\t * The license key.\n\t */\n\tlicenseKey?: string\n\t/**\n\t * Asset URL overrides.\n\t */\n\tassetUrls?: TLUiAssetUrlOverrides\n\t/**\n\t * Text options for the editor.\n\t */\n\ttextOptions?: TLTextOptions\n}\n\nconst defaultTextOptions = {\n\ttipTapConfig: {\n\t\textensions: tipTapDefaultExtensions,\n\t},\n\taddFontsFromNode: defaultAddFontsFromNode,\n}\n\n/**\n * A rendered SVG image of a Tldraw snapshot.\n *\n * @example\n * ```tsx\n * <TldrawImage\n * \tsnapshot={snapshot}\n * \tpageId={pageId}\n * \tbackground={false}\n *  darkMode={true}\n *  bounds={new Box(0,0,600,400)}\n *  scale={1}\n * />\n * ```\n *\n * @public\n * @react\n */\nexport const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {\n\tconst [url, setUrl] = useState<string | null>(null)\n\tconst [container, setContainer] = useState<HTMLDivElement | null>(null)\n\n\tconst _shapeUtils = useShallowArrayIdentity(props.shapeUtils ?? [])\n\tconst shapeUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _shapeUtils, defaultShapeUtils),\n\t\t[_shapeUtils]\n\t)\n\tconst _bindingUtils = useShallowArrayIdentity(props.bindingUtils ?? [])\n\tconst bindingUtilsWithDefaults = useMemo(\n\t\t() => mergeArraysAndReplaceDefaults('type', _bindingUtils, defaultBindingUtils),\n\t\t[_bindingUtils]\n\t)\n\tconst store = useTLStore({ snapshot: props.snapshot, shapeUtils: shapeUtilsWithDefaults })\n\n\tconst {\n\t\tpageId,\n\t\tbounds,\n\t\tscale,\n\t\tpixelRatio,\n\t\tbackground,\n\t\tpadding,\n\t\tdarkMode,\n\t\tpreserveAspectRatio,\n\t\tformat = 'svg',\n\t\tlicenseKey,\n\t\tassetUrls,\n\t\ttextOptions = defaultTextOptions,\n\t} = props\n\tconst assetUrlsWithOverrides = useDefaultEditorAssetsWithOverrides(assetUrls)\n\n\tuseLayoutEffect(() => {\n\t\tif (!container) return\n\t\tif (!store) return\n\n\t\tlet isCancelled = false\n\n\t\tconst tempElm = document.createElement('div')\n\t\tcontainer.appendChild(tempElm)\n\t\tcontainer.classList.add('tl-container', 'tl-theme__light')\n\n\t\tconst editor = new Editor({\n\t\t\tstore,\n\t\t\tshapeUtils: shapeUtilsWithDefaults,\n\t\t\tbindingUtils: bindingUtilsWithDefaults,\n\t\t\ttools: [],\n\t\t\tgetContainer: () => tempElm,\n\t\t\tlicenseKey,\n\t\t\tfontAssetUrls: assetUrlsWithOverrides.fonts,\n\t\t\ttextOptions,\n\t\t})\n\n\t\tif (pageId) editor.setCurrentPage(pageId)\n\n\t\tconst shapeIds = editor.getCurrentPageShapeIds()\n\n\t\tasync function setSvg() {\n\t\t\t// We have to wait for the fonts to load so that we can correctly measure text sizes\n\t\t\tawait editor.fonts.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender)\n\t\t\tconst imageResult = await editor.toImage([...shapeIds], {\n\t\t\t\tbounds,\n\t\t\t\tscale,\n\t\t\t\tbackground,\n\t\t\t\tpadding,\n\t\t\t\tdarkMode,\n\t\t\t\tpreserveAspectRatio,\n\t\t\t\tformat,\n\t\t\t})\n\t\t\tif (!imageResult || isCancelled) return\n\n\t\t\tconst url = URL.createObjectURL(imageResult.blob)\n\t\t\tsetUrl(url)\n\n\t\t\teditor.dispose()\n\t\t}\n\n\t\tsetSvg()\n\n\t\treturn () => {\n\t\t\tisCancelled = true\n\t\t}\n\t}, [\n\t\tformat,\n\t\tcontainer,\n\t\tstore,\n\t\tshapeUtilsWithDefaults,\n\t\tbindingUtilsWithDefaults,\n\t\tpageId,\n\t\tbounds,\n\t\tscale,\n\t\tbackground,\n\t\tpadding,\n\t\tdarkMode,\n\t\tpreserveAspectRatio,\n\t\tlicenseKey,\n\t\tpixelRatio,\n\t\tassetUrlsWithOverrides,\n\t\ttextOptions,\n\t])\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (url) URL.revokeObjectURL(url)\n\t\t}\n\t}, [url])\n\n\treturn (\n\t\t<div ref={setContainer} style={{ position: 'relative', width: '100%', height: '100%' }}>\n\t\t\t{url && (\n\t\t\t\t<img\n\t\t\t\t\tsrc={url}\n\t\t\t\t\treferrerPolicy=\"strict-origin-when-cross-origin\"\n\t\t\t\t\tstyle={{ width: '100%', height: '100%' }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["TldrawImage", "url"]
 }

package/dist-esm/lib/canvas/TldrawCropHandles.mjs

@@ -11,7 +11,7 @@ function TldrawCropHandles({
   const cropStrokeWidth = toDomPrecision(size / 3);
   const offset = cropStrokeWidth / 2;
   const msg = useTranslation();
-  return /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", children: [
+  return /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx(
       "polyline",
       {

package/dist-esm/lib/canvas/TldrawCropHandles.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/canvas/TldrawCropHandles.tsx"],
-  "sourcesContent": ["import { toDomPrecision } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { useTranslation } from '../ui/hooks/useTranslation/useTranslation'\n\nexport interface TldrawCropHandlesProps {\n\tsize: number\n\twidth: number\n\theight: number\n\thideAlternateHandles: boolean\n}\n\nexport function TldrawCropHandles({\n\tsize,\n\twidth,\n\theight,\n\thideAlternateHandles,\n}: TldrawCropHandlesProps) {\n\tconst cropStrokeWidth = toDomPrecision(size / 3)\n\tconst offset = cropStrokeWidth / 2\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\">\n\t\t\t{/* Top left */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(size)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(size)},${toDomPrecision(0 - offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-left')}\n\t\t\t/>\n\t\t\t{/* Top */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(0 - offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(0 - offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top')}\n\t\t\t/>\n\t\t\t{/* Top right */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-right')}\n\t\t\t/>\n\t\t\t{/* Right */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width + offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(width + offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.right')}\n\t\t\t/>\n\t\t\t{/* Bottom right */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height - size)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(height + offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-right')}\n\t\t\t/>\n\t\t\t{/* Bottom */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(height + offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(height + offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom')}\n\t\t\t/>\n\t\t\t{/* Bottom left */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 + size)},${toDomPrecision(height + offset)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height - size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-left')}\n\t\t\t/>\n\t\t\t{/* Left */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(0 - offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(0 - offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.left')}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { toDomPrecision } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { useTranslation } from '../ui/hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TldrawCropHandlesProps {\n\tsize: number\n\twidth: number\n\theight: number\n\thideAlternateHandles: boolean\n}\n\n/** @public @react */\nexport function TldrawCropHandles({\n\tsize,\n\twidth,\n\theight,\n\thideAlternateHandles,\n}: TldrawCropHandlesProps) {\n\tconst cropStrokeWidth = toDomPrecision(size / 3)\n\tconst offset = cropStrokeWidth / 2\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t{/* Top left */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(size)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(size)},${toDomPrecision(0 - offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-left')}\n\t\t\t/>\n\t\t\t{/* Top */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(0 - offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(0 - offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top')}\n\t\t\t/>\n\t\t\t{/* Top right */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.top-right')}\n\t\t\t/>\n\t\t\t{/* Right */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width + offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(width + offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.right')}\n\t\t\t/>\n\t\t\t{/* Bottom right */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height - size)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(height + offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_right\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-right')}\n\t\t\t/>\n\t\t\t{/* Bottom */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(height + offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(height + offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom')}\n\t\t\t/>\n\t\t\t{/* Bottom left */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 + size)},${toDomPrecision(height + offset)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height - size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.bottom-left')}\n\t\t\t/>\n\t\t\t{/* Left */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(0 - offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(0 - offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.left\"\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={msg('handle.crop.left')}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/canvas/TldrawHandles.mjs

@@ -17,7 +17,7 @@ function TldrawHandles({ children }) {
     [editor]
   );
   if (!shouldDisplayHandles) return null;
-  return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item", children });
+  return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item", "aria-hidden": "true", children });
 }
 export {
   TldrawHandles

package/dist-esm/lib/canvas/TldrawHandles.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/canvas/TldrawHandles.tsx"],
-  "sourcesContent": ["import { TLHandlesProps, useEditor, useValue } from '@tldraw/editor'\n\n/** @public @react */\nexport function TldrawHandles({ children }: TLHandlesProps) {\n\tconst editor = useEditor()\n\n\t// todo: maybe display note shape handles here?\n\n\tconst shouldDisplayHandles = useValue(\n\t\t'shouldDisplayHandles',\n\t\t() => {\n\t\t\tif (editor.isInAny('select.idle', 'select.pointing_handle', 'select.pointing_shape')) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (editor.isInAny('select.editing_shape')) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\t\treturn onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'note')\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldDisplayHandles) return null\n\n\treturn <svg className=\"tl-user-handles tl-overlays__item\">{children}</svg>\n}\n"],
-  "mappings": "AAyBQ;AAzBR,SAAyB,WAAW,gBAAgB;AAG7C,SAAS,cAAc,EAAE,SAAS,GAAmB;AAC3D,QAAM,SAAS,UAAU;AAIzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,eAAe,0BAA0B,uBAAuB,GAAG;AACrF,eAAO;AAAA,MACR;AACA,UAAI,OAAO,QAAQ,sBAAsB,GAAG;AAC3C,cAAM,oBAAoB,OAAO,qBAAqB;AACtD,eAAO,qBAAqB,OAAO,cAAc,mBAAmB,MAAM;AAAA,MAC3E;AACA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SAAO,oBAAC,SAAI,WAAU,qCAAqC,UAAS;AACrE;",
+  "sourcesContent": ["import { TLHandlesProps, useEditor, useValue } from '@tldraw/editor'\n\n/** @public @react */\nexport function TldrawHandles({ children }: TLHandlesProps) {\n\tconst editor = useEditor()\n\n\t// todo: maybe display note shape handles here?\n\n\tconst shouldDisplayHandles = useValue(\n\t\t'shouldDisplayHandles',\n\t\t() => {\n\t\t\tif (editor.isInAny('select.idle', 'select.pointing_handle', 'select.pointing_shape')) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (editor.isInAny('select.editing_shape')) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\t\treturn onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'note')\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldDisplayHandles) return null\n\n\treturn (\n\t\t<svg className=\"tl-user-handles tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t{children}\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "AA0BE;AA1BF,SAAyB,WAAW,gBAAgB;AAG7C,SAAS,cAAc,EAAE,SAAS,GAAmB;AAC3D,QAAM,SAAS,UAAU;AAIzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,eAAe,0BAA0B,uBAAuB,GAAG;AACrF,eAAO;AAAA,MACR;AACA,UAAI,OAAO,QAAQ,sBAAsB,GAAG;AAC3C,cAAM,oBAAoB,OAAO,qBAAqB;AACtD,eAAO,qBAAqB,OAAO,cAAc,mBAAmB,MAAM;AAAA,MAC3E;AACA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SACC,oBAAC,SAAI,WAAU,qCAAoC,eAAY,QAC7D,UACF;AAEF;",
   "names": []
 }

package/dist-esm/lib/canvas/TldrawOverlays.mjs

@@ -35,7 +35,7 @@ function TldrawArrowHints() {
   const showEdgeHints = !isExact && arrowKind === "elbow";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     ShapeIndicator && /* @__PURE__ */ jsx(ShapeIndicator, { shapeId: targetInfo.target.id }),
-    showEdgeHints && /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", children: [
+    showEdgeHints && /* @__PURE__ */ jsxs("svg", { className: "tl-overlays__item", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx(
         "circle",
         {

package/dist-esm/lib/canvas/TldrawOverlays.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/canvas/TldrawOverlays.tsx"],
-  "sourcesContent": ["import { useEditor, useEditorComponents, useValue } from '@tldraw/editor'\nimport { getArrowTargetState } from '../shapes/arrow/arrowTargetState'\nimport { DraggingHandle } from '../tools/SelectTool/childStates/DraggingHandle'\nimport { PointingHandle } from '../tools/SelectTool/childStates/PointingHandle'\n\n/** @public @react */\nexport function TldrawOverlays() {\n\tconst editor = useEditor()\n\n\tconst shouldShowArrowHints = useValue(\n\t\t'should show arrow hints',\n\t\t() => {\n\t\t\tif (editor.isInAny('arrow.idle', 'arrow.pointing')) return true\n\n\t\t\tif (editor.isIn('select.pointing_handle')) {\n\t\t\t\tconst node: PointingHandle = editor.getStateDescendant('select.pointing_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (editor.isIn('select.dragging_handle')) {\n\t\t\t\tconst node: DraggingHandle = editor.getStateDescendant('select.dragging_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldShowArrowHints) return null\n\n\treturn <TldrawArrowHints />\n}\n\n/** @public @react */\nexport function TldrawArrowHints() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst targetInfo = useValue('arrow target info', () => getArrowTargetState(editor), [editor])\n\n\tif (!targetInfo) return null\n\n\tconst { handlesInPageSpace, snap, anchorInPageSpace, arrowKind, isExact, isPrecise } = targetInfo\n\n\tconst showEdgeHints = !isExact && arrowKind === 'elbow'\n\n\treturn (\n\t\t<>\n\t\t\t{ShapeIndicator && <ShapeIndicator shapeId={targetInfo.target.id} />}\n\n\t\t\t{showEdgeHints && (\n\t\t\t\t<svg className=\"tl-overlays__item\">\n\t\t\t\t\t<circle\n\t\t\t\t\t\tcx={anchorInPageSpace.x}\n\t\t\t\t\t\tcy={anchorInPageSpace.y}\n\t\t\t\t\t\tclassName={`tl-arrow-hint-snap tl-arrow-hint-snap__${isPrecise ? (snap ?? 'none') : 'none'}`}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{Object.entries(handlesInPageSpace).map(([side, handle]) => {\n\t\t\t\t\t\tif (!handle.isEnabled) return null\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\tkey={side}\n\t\t\t\t\t\t\t\tcx={handle.point.x}\n\t\t\t\t\t\t\t\tcy={handle.point.y}\n\t\t\t\t\t\t\t\tclassName=\"tl-arrow-hint-handle\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
-  "mappings": "AAyCQ,SAiBN,UAjBM,KAqBJ,YArBI;AAzCR,SAAS,WAAW,qBAAqB,gBAAgB;AACzD,SAAS,2BAA2B;AAK7B,SAAS,iBAAiB;AAChC,QAAM,SAAS,UAAU;AAEzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,cAAc,gBAAgB,EAAG,QAAO;AAE3D,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SAAO,oBAAC,oBAAiB;AAC1B;AAGO,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAE/C,QAAM,aAAa,SAAS,qBAAqB,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AAE5F,MAAI,CAAC,WAAY,QAAO;AAExB,QAAM,EAAE,oBAAoB,MAAM,mBAAmB,WAAW,SAAS,UAAU,IAAI;AAEvF,QAAM,gBAAgB,CAAC,WAAW,cAAc;AAEhD,SACC,iCACE;AAAA,sBAAkB,oBAAC,kBAAe,SAAS,WAAW,OAAO,IAAI;AAAA,IAEjE,iBACA,qBAAC,SAAI,WAAU,qBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAI,kBAAkB;AAAA,UACtB,IAAI,kBAAkB;AAAA,UACtB,WAAW,0CAA0C,YAAa,QAAQ,SAAU,MAAM;AAAA;AAAA,MAC3F;AAAA,MAEC,OAAO,QAAQ,kBAAkB,EAAE,IAAI,CAAC,CAAC,MAAM,MAAM,MAAM;AAC3D,YAAI,CAAC,OAAO,UAAW,QAAO;AAC9B,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,IAAI,OAAO,MAAM;AAAA,YACjB,IAAI,OAAO,MAAM;AAAA,YACjB,WAAU;AAAA;AAAA,UAHL;AAAA,QAIN;AAAA,MAEF,CAAC;AAAA,OACF;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["import { useEditor, useEditorComponents, useValue } from '@tldraw/editor'\nimport { getArrowTargetState } from '../shapes/arrow/arrowTargetState'\nimport { DraggingHandle } from '../tools/SelectTool/childStates/DraggingHandle'\nimport { PointingHandle } from '../tools/SelectTool/childStates/PointingHandle'\n\n/** @public @react */\nexport function TldrawOverlays() {\n\tconst editor = useEditor()\n\n\tconst shouldShowArrowHints = useValue(\n\t\t'should show arrow hints',\n\t\t() => {\n\t\t\tif (editor.isInAny('arrow.idle', 'arrow.pointing')) return true\n\n\t\t\tif (editor.isIn('select.pointing_handle')) {\n\t\t\t\tconst node: PointingHandle = editor.getStateDescendant('select.pointing_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (editor.isIn('select.dragging_handle')) {\n\t\t\t\tconst node: DraggingHandle = editor.getStateDescendant('select.dragging_handle')!\n\t\t\t\tif (\n\t\t\t\t\tnode.info.shape.type === 'arrow' &&\n\t\t\t\t\t(node.info.handle.id === 'start' || node.info.handle.id === 'end')\n\t\t\t\t) {\n\t\t\t\t\treturn true\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn false\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shouldShowArrowHints) return null\n\n\treturn <TldrawArrowHints />\n}\n\n/** @public @react */\nexport function TldrawArrowHints() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst targetInfo = useValue('arrow target info', () => getArrowTargetState(editor), [editor])\n\n\tif (!targetInfo) return null\n\n\tconst { handlesInPageSpace, snap, anchorInPageSpace, arrowKind, isExact, isPrecise } = targetInfo\n\n\tconst showEdgeHints = !isExact && arrowKind === 'elbow'\n\n\treturn (\n\t\t<>\n\t\t\t{ShapeIndicator && <ShapeIndicator shapeId={targetInfo.target.id} />}\n\n\t\t\t{showEdgeHints && (\n\t\t\t\t<svg className=\"tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t\t\t<circle\n\t\t\t\t\t\tcx={anchorInPageSpace.x}\n\t\t\t\t\t\tcy={anchorInPageSpace.y}\n\t\t\t\t\t\tclassName={`tl-arrow-hint-snap tl-arrow-hint-snap__${isPrecise ? (snap ?? 'none') : 'none'}`}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{Object.entries(handlesInPageSpace).map(([side, handle]) => {\n\t\t\t\t\t\tif (!handle.isEnabled) return null\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\tkey={side}\n\t\t\t\t\t\t\t\tcx={handle.point.x}\n\t\t\t\t\t\t\t\tcy={handle.point.y}\n\t\t\t\t\t\t\t\tclassName=\"tl-arrow-hint-handle\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
+  "mappings": "AAyCQ,SAiBN,UAjBM,KAqBJ,YArBI;AAzCR,SAAS,WAAW,qBAAqB,gBAAgB;AACzD,SAAS,2BAA2B;AAK7B,SAAS,iBAAiB;AAChC,QAAM,SAAS,UAAU;AAEzB,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA,MAAM;AACL,UAAI,OAAO,QAAQ,cAAc,gBAAgB,EAAG,QAAO;AAE3D,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,UAAI,OAAO,KAAK,wBAAwB,GAAG;AAC1C,cAAM,OAAuB,OAAO,mBAAmB,wBAAwB;AAC/E,YACC,KAAK,KAAK,MAAM,SAAS,YACxB,KAAK,KAAK,OAAO,OAAO,WAAW,KAAK,KAAK,OAAO,OAAO,QAC3D;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,qBAAsB,QAAO;AAElC,SAAO,oBAAC,oBAAiB;AAC1B;AAGO,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,eAAe,IAAI,oBAAoB;AAE/C,QAAM,aAAa,SAAS,qBAAqB,MAAM,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;AAE5F,MAAI,CAAC,WAAY,QAAO;AAExB,QAAM,EAAE,oBAAoB,MAAM,mBAAmB,WAAW,SAAS,UAAU,IAAI;AAEvF,QAAM,gBAAgB,CAAC,WAAW,cAAc;AAEhD,SACC,iCACE;AAAA,sBAAkB,oBAAC,kBAAe,SAAS,WAAW,OAAO,IAAI;AAAA,IAEjE,iBACA,qBAAC,SAAI,WAAU,qBAAoB,eAAY,QAC9C;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAI,kBAAkB;AAAA,UACtB,IAAI,kBAAkB;AAAA,UACtB,WAAW,0CAA0C,YAAa,QAAQ,SAAU,MAAM;AAAA;AAAA,MAC3F;AAAA,MAEC,OAAO,QAAQ,kBAAkB,EAAE,IAAI,CAAC,CAAC,MAAM,MAAM,MAAM;AAC3D,YAAI,CAAC,OAAO,UAAW,QAAO;AAC9B,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,IAAI,OAAO,MAAM;AAAA,YACjB,IAAI,OAAO,MAAM;AAAA,YACjB,WAAU;AAAA;AAAA,UAHL;AAAA,QAIN;AAAA,MAEF,CAAC;AAAA,OACF;AAAA,KAEF;AAEF;",
   "names": []
 }

package/dist-esm/lib/canvas/TldrawScribble.mjs

@@ -24,7 +24,7 @@ function TldrawScribble({ scribble, zoom, color, opacity, className }) {
     {
       className: "tl-scribble",
       d,
-      fill: color ?? `var(--color-${scribble.color})`,
+      fill: color ?? `var(--tl-color-${scribble.color})`,
       opacity: opacity ?? scribble.opacity
     }
   ) });

package/dist-esm/lib/canvas/TldrawScribble.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/canvas/TldrawScribble.tsx"],
-  "sourcesContent": ["import { EASINGS, TLScribbleProps, getSvgPathFromPoints } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { getStroke } from '../shapes/shared/freehand/getStroke'\n\n/** @public @react */\nexport function TldrawScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\n\n\tconst stroke = getStroke(scribble.points, {\n\t\tsize: scribble.size / zoom,\n\t\tstart: { taper: scribble.taper, easing: EASINGS.linear },\n\t\tlast: scribble.state === 'stopping',\n\t\tsimulatePressure: false,\n\t\tstreamline: 0.32,\n\t})\n\n\tlet d: string\n\n\tif (stroke.length < 4) {\n\t\t// the stroke will be 3 points as a sort of shrugging fail state, so let's draw a dot instead\n\t\tconst r = scribble.size / zoom / 2\n\t\tconst { x, y } = scribble.points[scribble.points.length - 1]\n\t\td = `M ${x - r},${y} a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 ${-r * 2},0`\n\t} else {\n\t\t// If we do have a stroke, then draw the stroke path\n\t\td = getSvgPathFromPoints(stroke)\n\t}\n\n\treturn (\n\t\t<svg className={className ? classNames('tl-overlays__item', className) : className}>\n\t\t\t<path\n\t\t\t\tclassName=\"tl-scribble\"\n\t\t\t\td={d}\n\t\t\t\tfill={color ?? `var(--color-${scribble.color})`}\n\t\t\t\topacity={opacity ?? scribble.opacity}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": "AA8BG;AA9BH,SAAS,SAA0B,4BAA4B;AAC/D,OAAO,gBAAgB;AACvB,SAAS,iBAAiB;AAGnB,SAAS,eAAe,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC9F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,QAAM,SAAS,UAAU,SAAS,QAAQ;AAAA,IACzC,MAAM,SAAS,OAAO;AAAA,IACtB,OAAO,EAAE,OAAO,SAAS,OAAO,QAAQ,QAAQ,OAAO;AAAA,IACvD,MAAM,SAAS,UAAU;AAAA,IACzB,kBAAkB;AAAA,IAClB,YAAY;AAAA,EACb,CAAC;AAED,MAAI;AAEJ,MAAI,OAAO,SAAS,GAAG;AAEtB,UAAM,IAAI,SAAS,OAAO,OAAO;AACjC,UAAM,EAAE,GAAG,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,SAAS,CAAC;AAC3D,QAAI,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AAAA,EAC7E,OAAO;AAEN,QAAI,qBAAqB,MAAM;AAAA,EAChC;AAEA,SACC,oBAAC,SAAI,WAAW,YAAY,WAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,MAAM,SAAS,eAAe,SAAS,KAAK;AAAA,MAC5C,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
+  "sourcesContent": ["import { EASINGS, TLScribbleProps, getSvgPathFromPoints } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { getStroke } from '../shapes/shared/freehand/getStroke'\n\n/** @public @react */\nexport function TldrawScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\n\n\tconst stroke = getStroke(scribble.points, {\n\t\tsize: scribble.size / zoom,\n\t\tstart: { taper: scribble.taper, easing: EASINGS.linear },\n\t\tlast: scribble.state === 'stopping',\n\t\tsimulatePressure: false,\n\t\tstreamline: 0.32,\n\t})\n\n\tlet d: string\n\n\tif (stroke.length < 4) {\n\t\t// the stroke will be 3 points as a sort of shrugging fail state, so let's draw a dot instead\n\t\tconst r = scribble.size / zoom / 2\n\t\tconst { x, y } = scribble.points[scribble.points.length - 1]\n\t\td = `M ${x - r},${y} a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 ${-r * 2},0`\n\t} else {\n\t\t// If we do have a stroke, then draw the stroke path\n\t\td = getSvgPathFromPoints(stroke)\n\t}\n\n\treturn (\n\t\t<svg className={className ? classNames('tl-overlays__item', className) : className}>\n\t\t\t<path\n\t\t\t\tclassName=\"tl-scribble\"\n\t\t\t\td={d}\n\t\t\t\tfill={color ?? `var(--tl-color-${scribble.color})`}\n\t\t\t\topacity={opacity ?? scribble.opacity}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": "AA8BG;AA9BH,SAAS,SAA0B,4BAA4B;AAC/D,OAAO,gBAAgB;AACvB,SAAS,iBAAiB;AAGnB,SAAS,eAAe,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC9F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,QAAM,SAAS,UAAU,SAAS,QAAQ;AAAA,IACzC,MAAM,SAAS,OAAO;AAAA,IACtB,OAAO,EAAE,OAAO,SAAS,OAAO,QAAQ,QAAQ,OAAO;AAAA,IACvD,MAAM,SAAS,UAAU;AAAA,IACzB,kBAAkB;AAAA,IAClB,YAAY;AAAA,EACb,CAAC;AAED,MAAI;AAEJ,MAAI,OAAO,SAAS,GAAG;AAEtB,UAAM,IAAI,SAAS,OAAO,OAAO;AACjC,UAAM,EAAE,GAAG,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,SAAS,CAAC;AAC3D,QAAI,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AAAA,EAC7E,OAAO;AAEN,QAAI,qBAAqB,MAAM;AAAA,EAChC;AAEA,SACC,oBAAC,SAAI,WAAW,YAAY,WAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,MAAM,SAAS,kBAAkB,SAAS,KAAK;AAAA,MAC/C,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
   "names": []
 }