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

package/dist-cjs/lib/TldrawImage.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8LI;AA9LJ,oBAYO;AACP,mBAAoE;AACpE,iCAAoC;AACpC,+BAAkC;AAElC,sBAAiE;AAyCjE,MAAM,qBAAqB;AAAA,EAC1B,cAAc;AAAA,IACb,YAAY;AAAA,EACb;AAAA,EACA,kBAAkB;AACnB;AAoBO,MAAM,kBAAc,mBAAK,SAASA,aAAY,OAAyB;AAC7E,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAwB,IAAI;AAClD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAgC,IAAI;AAEtE,QAAM,kBAAc,uCAAwB,MAAM,cAAc,CAAC,CAAC;AAClE,QAAM,6BAAyB;AAAA,IAC9B,UAAM,6CAA8B,QAAQ,aAAa,0CAAiB;AAAA,IAC1E,CAAC,WAAW;AAAA,EACb;AACA,QAAM,oBAAgB,uCAAwB,MAAM,gBAAgB,CAAC,CAAC;AACtE,QAAM,+BAA2B;AAAA,IAChC,UAAM,6CAA8B,QAAQ,eAAe,8CAAmB;AAAA,IAC9E,CAAC,aAAa;AAAA,EACf;AACA,QAAM,YAAQ,0BAAW,EAAE,UAAU,MAAM,UAAU,YAAY,uBAAuB,CAAC;AAEzF,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EACf,IAAI;AAEJ,oCAAgB,MAAM;AACrB,QAAI,CAAC,UAAW;AAChB,QAAI,CAAC,MAAO;AAEZ,QAAI,cAAc;AAElB,UAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,cAAU,YAAY,OAAO;AAC7B,cAAU,UAAU,IAAI,gBAAgB,iBAAiB;AAEzD,UAAM,SAAS,IAAI,qBAAO;AAAA,MACzB;AAAA,MACA,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,OAAO,CAAC;AAAA,MACR,cAAc,MAAM;AAAA,MACpB;AAAA,MACA,eAAe,WAAW;AAAA,MAC1B;AAAA,IACD,CAAC;AAED,QAAI,OAAQ,QAAO,eAAe,MAAM;AAExC,UAAM,WAAW,OAAO,uBAAuB;AAE/C,mBAAe,SAAS;AACvB,YAAM,cAAc,MAAM,OAAO,QAAQ,CAAC,GAAG,QAAQ,GAAG;AAAA,QACvD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAC;AACD,UAAI,CAAC,eAAe,YAAa;AAEjC,YAAMC,OAAM,IAAI,gBAAgB,YAAY,IAAI;AAChD,aAAOA,IAAG;AAEV,aAAO,QAAQ;AAAA,IAChB;AAEA,WAAO;AAEP,WAAO,MAAM;AACZ,oBAAc;AAAA,IACf;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,8BAAU,MAAM;AACf,WAAO,MAAM;AACZ,UAAI,IAAK,KAAI,gBAAgB,GAAG;AAAA,IACjC;AAAA,EACD,GAAG,CAAC,GAAG,CAAC;AAER,SACC,4CAAC,SAAI,KAAK,cAAc,OAAO,EAAE,UAAU,YAAY,OAAO,QAAQ,QAAQ,OAAO,GACnF,iBACA;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,gBAAe;AAAA,MACf,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA;AAAA,EACxC,GAEF;AAEF,CAAC;",
-  "names": ["TldrawImage", "url"]
+  "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": ["import_assetUrls", "TldrawImage", "url"]
 }

package/dist-cjs/lib/canvas/TldrawCropHandles.js

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

package/dist-cjs/lib/canvas/TldrawCropHandles.js.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": ["classNames"]
 }

package/dist-cjs/lib/canvas/TldrawHandles.js

@@ -40,6 +40,6 @@ function TldrawHandles({ children }) {
     [editor]
   );
   if (!shouldDisplayHandles) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "tl-user-handles tl-overlays__item", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "tl-user-handles tl-overlays__item", "aria-hidden": "true", children });
 }
 //# sourceMappingURL=TldrawHandles.js.map

package/dist-cjs/lib/canvas/TldrawHandles.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBQ;AAzBR,oBAAoD;AAG7C,SAAS,cAAc,EAAE,SAAS,GAAmB;AAC3D,QAAM,aAAS,yBAAU;AAIzB,QAAM,2BAAuB;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,4CAAC,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BE;AA1BF,oBAAoD;AAG7C,SAAS,cAAc,EAAE,SAAS,GAAmB;AAC3D,QAAM,aAAS,yBAAU;AAIzB,QAAM,2BAAuB;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,4CAAC,SAAI,WAAU,qCAAoC,eAAY,QAC7D,UACF;AAEF;",
   "names": []
 }

package/dist-cjs/lib/canvas/TldrawOverlays.js

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

package/dist-cjs/lib/canvas/TldrawOverlays.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCQ;AAzCR,oBAAyD;AACzD,8BAAoC;AAK7B,SAAS,iBAAiB;AAChC,QAAM,aAAS,yBAAU;AAEzB,QAAM,2BAAuB;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,4CAAC,oBAAiB;AAC1B;AAGO,SAAS,mBAAmB;AAClC,QAAM,aAAS,yBAAU;AACzB,QAAM,EAAE,eAAe,QAAI,mCAAoB;AAE/C,QAAM,iBAAa,wBAAS,qBAAqB,UAAM,6CAAoB,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,4EACE;AAAA,sBAAkB,4CAAC,kBAAe,SAAS,WAAW,OAAO,IAAI;AAAA,IAEjE,iBACA,6CAAC,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCQ;AAzCR,oBAAyD;AACzD,8BAAoC;AAK7B,SAAS,iBAAiB;AAChC,QAAM,aAAS,yBAAU;AAEzB,QAAM,2BAAuB;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,4CAAC,oBAAiB;AAC1B;AAGO,SAAS,mBAAmB;AAClC,QAAM,aAAS,yBAAU;AACzB,QAAM,EAAE,eAAe,QAAI,mCAAoB;AAE/C,QAAM,iBAAa,wBAAS,qBAAqB,UAAM,6CAAoB,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,4EACE;AAAA,sBAAkB,4CAAC,kBAAe,SAAS,WAAW,OAAO,IAAI;AAAA,IAEjE,iBACA,6CAAC,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-cjs/lib/canvas/TldrawScribble.js

@@ -57,7 +57,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-cjs/lib/canvas/TldrawScribble.js.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BG;AA9BH,oBAA+D;AAC/D,wBAAuB;AACvB,uBAA0B;AAGnB,SAAS,eAAe,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC9F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,QAAM,aAAS,4BAAU,SAAS,QAAQ;AAAA,IACzC,MAAM,SAAS,OAAO;AAAA,IACtB,OAAO,EAAE,OAAO,SAAS,OAAO,QAAQ,sBAAQ,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,YAAI,oCAAqB,MAAM;AAAA,EAChC;AAEA,SACC,4CAAC,SAAI,WAAW,gBAAY,kBAAAA,SAAW,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BG;AA9BH,oBAA+D;AAC/D,wBAAuB;AACvB,uBAA0B;AAGnB,SAAS,eAAe,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC9F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,QAAM,aAAS,4BAAU,SAAS,QAAQ;AAAA,IACzC,MAAM,SAAS,OAAO;AAAA,IACtB,OAAO,EAAE,OAAO,SAAS,OAAO,QAAQ,sBAAQ,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,YAAI,oCAAqB,MAAM;AAAA,EAChC;AAEA,SACC,4CAAC,SAAI,WAAW,gBAAY,kBAAAA,SAAW,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": ["classNames"]
 }