npm - @tldraw/editor - Versions diffs - 3.9.0-internal.7f0e15f4f7d9 → 3.10.0-canary.075415a2bbc8 - Mend

@tldraw/editor 3.9.0-internal.7f0e15f4f7d9 → 3.10.0-canary.075415a2bbc8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/components/LiveCollaborators.tsx"],
-  "sourcesContent": ["import { track } from '@tldraw/state-react'\nimport { TLInstancePresence } from '@tldraw/tlschema'\nimport { useEffect, useRef, useState } from 'react'\nimport { Editor } from '../editor/Editor'\nimport { useEditor } from '../hooks/useEditor'\nimport { useEditorComponents } from '../hooks/useEditorComponents'\nimport { usePeerIds } from '../hooks/usePeerIds'\nimport { usePresence } from '../hooks/usePresence'\n\nexport const LiveCollaborators = track(function Collaborators() {\n\tconst peerIds = usePeerIds()\n\treturn peerIds.map((id) => <CollaboratorGuard key={id} collaboratorId={id} />)\n})\n\nconst CollaboratorGuard = track(function CollaboratorGuard({\n\tcollaboratorId,\n}: {\n\tcollaboratorId: string\n}) {\n\tconst editor = useEditor()\n\tconst presence = usePresence(collaboratorId)\n\tconst collaboratorState = useCollaboratorState(editor, presence)\n\n\tif (!(presence && presence.currentPageId === editor.getCurrentPageId())) {\n\t\t// No need to render if we don't have a presence or if they're on a different page\n\t\treturn null\n\t}\n\n\tswitch (collaboratorState) {\n\t\tcase 'inactive': {\n\t\t\tconst { followingUserId, highlightedUserIds } = editor.getInstanceState()\n\t\t\t// If they're inactive and unless we're following them or they're highlighted, hide them\n\t\t\tif (!(followingUserId === presence.userId || highlightedUserIds.includes(presence.userId))) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tbreak\n\t\t}\n\t\tcase 'idle': {\n\t\t\tconst { highlightedUserIds } = editor.getInstanceState()\n\t\t\t// If they're idle and following us and unless they have a chat message or are highlighted, hide them\n\t\t\tif (\n\t\t\t\tpresence.followingUserId === editor.user.getId() &&\n\t\t\t\t!(presence.chatMessage || highlightedUserIds.includes(presence.userId))\n\t\t\t) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tbreak\n\t\t}\n\t\tcase 'active': {\n\t\t\t// If they're active, show them\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn <Collaborator latestPresence={presence} />\n})\n\nconst Collaborator = track(function Collaborator({\n\tlatestPresence,\n}: {\n\tlatestPresence: TLInstancePresence\n}) {\n\tconst editor = useEditor()\n\n\tconst {\n\t\tCollaboratorBrush,\n\t\tCollaboratorScribble,\n\t\tCollaboratorCursor,\n\t\tCollaboratorHint,\n\t\tCollaboratorShapeIndicator,\n\t} = useEditorComponents()\n\n\tconst zoomLevel = editor.getZoomLevel()\n\tconst viewportPageBounds = editor.getViewportPageBounds()\n\tconst { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } =\n\t\tlatestPresence\n\n\tif (!cursor) return null\n\n\t// Add a little padding to the top-left of the viewport\n\t// so that the cursor doesn't get cut off\n\tconst isCursorInViewport = !(\n\t\tcursor.x < viewportPageBounds.minX - 12 / zoomLevel ||\n\t\tcursor.y < viewportPageBounds.minY - 16 / zoomLevel ||\n\t\tcursor.x > viewportPageBounds.maxX - 12 / zoomLevel ||\n\t\tcursor.y > viewportPageBounds.maxY - 16 / zoomLevel\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{brush && CollaboratorBrush ? (\n\t\t\t\t<CollaboratorBrush\n\t\t\t\t\tclassName=\"tl-collaborator__brush\"\n\t\t\t\t\tkey={userId + '_brush'}\n\t\t\t\t\tbrush={brush}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\topacity={0.1}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{isCursorInViewport && CollaboratorCursor ? (\n\t\t\t\t<CollaboratorCursor\n\t\t\t\t\tclassName=\"tl-collaborator__cursor\"\n\t\t\t\t\tkey={userId + '_cursor'}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tname={userName !== 'New User' ? userName : null}\n\t\t\t\t\tchatMessage={chatMessage ?? ''}\n\t\t\t\t/>\n\t\t\t) : CollaboratorHint ? (\n\t\t\t\t<CollaboratorHint\n\t\t\t\t\tclassName=\"tl-collaborator__cursor-hint\"\n\t\t\t\t\tkey={userId + '_cursor_hint'}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tviewport={viewportPageBounds}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{CollaboratorScribble && scribbles.length ? (\n\t\t\t\t<>\n\t\t\t\t\t{scribbles.map((scribble) => (\n\t\t\t\t\t\t<CollaboratorScribble\n\t\t\t\t\t\t\tkey={userId + '_scribble_' + scribble.id}\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__scribble\"\n\t\t\t\t\t\t\tscribble={scribble}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\topacity={scribble.color === 'laser' ? 0.5 : 0.1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t) : null}\n\t\t\t{CollaboratorShapeIndicator &&\n\t\t\t\tselectedShapeIds\n\t\t\t\t\t.filter((id) => !editor.isShapeHidden(id))\n\t\t\t\t\t.map((shapeId) => (\n\t\t\t\t\t\t<CollaboratorShapeIndicator\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__shape-indicator\"\n\t\t\t\t\t\t\tkey={userId + '_' + shapeId}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\topacity={0.5}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t</>\n\t)\n})\n\nfunction getStateFromElapsedTime(editor: Editor, elapsed: number) {\n\treturn elapsed > editor.options.collaboratorInactiveTimeoutMs\n\t\t? 'inactive'\n\t\t: elapsed > editor.options.collaboratorIdleTimeoutMs\n\t\t\t? 'idle'\n\t\t\t: 'active'\n}\n\nfunction useCollaboratorState(editor: Editor, latestPresence: TLInstancePresence | null) {\n\tconst rLastActivityTimestamp = useRef(latestPresence?.lastActivityTimestamp ?? -1)\n\n\tconst [state, setState] = useState<'active' | 'idle' | 'inactive'>(() =>\n\t\tgetStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t)\n\n\tuseEffect(() => {\n\t\tconst interval = editor.timers.setInterval(() => {\n\t\t\tsetState(getStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current))\n\t\t}, editor.options.collaboratorCheckIntervalMs)\n\n\t\treturn () => clearInterval(interval)\n\t}, [editor])\n\n\tif (latestPresence) {\n\t\t// We can do this on every render, it's free and cheaper than an effect\n\t\t// remember, there can be lots and lots of cursors moving around all the time\n\t\trLastActivityTimestamp.current = latestPresence.lastActivityTimestamp ?? Infinity\n\t}\n\n\treturn state\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { track } from '@tldraw/state-react'\nimport { TLInstancePresence } from '@tldraw/tlschema'\nimport { useEffect, useRef, useState } from 'react'\nimport { Editor } from '../editor/Editor'\nimport { useEditor } from '../hooks/useEditor'\nimport { useEditorComponents } from '../hooks/useEditorComponents'\nimport { usePeerIds } from '../hooks/usePeerIds'\nimport { usePresence } from '../hooks/usePresence'\n\nexport const LiveCollaborators = track(function Collaborators() {\n\tconst peerIds = usePeerIds()\n\treturn peerIds.map((id) => <CollaboratorGuard key={id} collaboratorId={id} />)\n})\n\nconst CollaboratorGuard = track(function CollaboratorGuard({\n\tcollaboratorId,\n}: {\n\tcollaboratorId: string\n}) {\n\tconst editor = useEditor()\n\tconst presence = usePresence(collaboratorId)\n\tconst collaboratorState = useCollaboratorState(editor, presence)\n\n\tif (!(presence && presence.currentPageId === editor.getCurrentPageId())) {\n\t\t// No need to render if we don't have a presence or if they're on a different page\n\t\treturn null\n\t}\n\n\tswitch (collaboratorState) {\n\t\tcase 'inactive': {\n\t\t\tconst { followingUserId, highlightedUserIds } = editor.getInstanceState()\n\t\t\t// If they're inactive and unless we're following them or they're highlighted, hide them\n\t\t\tif (!(followingUserId === presence.userId || highlightedUserIds.includes(presence.userId))) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tbreak\n\t\t}\n\t\tcase 'idle': {\n\t\t\tconst { highlightedUserIds } = editor.getInstanceState()\n\t\t\t// If they're idle and following us and unless they have a chat message or are highlighted, hide them\n\t\t\tif (\n\t\t\t\tpresence.followingUserId === editor.user.getId() &&\n\t\t\t\t!(presence.chatMessage || highlightedUserIds.includes(presence.userId))\n\t\t\t) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tbreak\n\t\t}\n\t\tcase 'active': {\n\t\t\t// If they're active, show them\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn <Collaborator latestPresence={presence} />\n})\n\nconst Collaborator = track(function Collaborator({\n\tlatestPresence,\n}: {\n\tlatestPresence: TLInstancePresence\n}) {\n\tconst editor = useEditor()\n\n\tconst {\n\t\tCollaboratorBrush,\n\t\tCollaboratorScribble,\n\t\tCollaboratorCursor,\n\t\tCollaboratorHint,\n\t\tCollaboratorShapeIndicator,\n\t} = useEditorComponents()\n\n\tconst zoomLevel = editor.getZoomLevel()\n\tconst viewportPageBounds = editor.getViewportPageBounds()\n\tconst { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } =\n\t\tlatestPresence\n\n\tif (!cursor) return null\n\n\t// Add a little padding to the top-left of the viewport\n\t// so that the cursor doesn't get cut off\n\tconst isCursorInViewport = !(\n\t\tcursor.x < viewportPageBounds.minX - 12 / zoomLevel ||\n\t\tcursor.y < viewportPageBounds.minY - 16 / zoomLevel ||\n\t\tcursor.x > viewportPageBounds.maxX - 12 / zoomLevel ||\n\t\tcursor.y > viewportPageBounds.maxY - 16 / zoomLevel\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{brush && CollaboratorBrush ? (\n\t\t\t\t<CollaboratorBrush\n\t\t\t\t\tclassName=\"tl-collaborator__brush\"\n\t\t\t\t\tkey={userId + '_brush'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tbrush={brush}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\topacity={0.1}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{isCursorInViewport && CollaboratorCursor ? (\n\t\t\t\t<CollaboratorCursor\n\t\t\t\t\tclassName=\"tl-collaborator__cursor\"\n\t\t\t\t\tkey={userId + '_cursor'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tname={userName !== 'New User' ? userName : null}\n\t\t\t\t\tchatMessage={chatMessage ?? ''}\n\t\t\t\t/>\n\t\t\t) : CollaboratorHint ? (\n\t\t\t\t<CollaboratorHint\n\t\t\t\t\tclassName=\"tl-collaborator__cursor-hint\"\n\t\t\t\t\tkey={userId + '_cursor_hint'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tviewport={viewportPageBounds}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{CollaboratorScribble && scribbles.length ? (\n\t\t\t\t<>\n\t\t\t\t\t{scribbles.map((scribble) => (\n\t\t\t\t\t\t<CollaboratorScribble\n\t\t\t\t\t\t\tkey={userId + '_scribble_' + scribble.id}\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__scribble\"\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tscribble={scribble}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\topacity={scribble.color === 'laser' ? 0.5 : 0.1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t) : null}\n\t\t\t{CollaboratorShapeIndicator &&\n\t\t\t\tselectedShapeIds\n\t\t\t\t\t.filter((id) => !editor.isShapeHidden(id))\n\t\t\t\t\t.map((shapeId) => (\n\t\t\t\t\t\t<CollaboratorShapeIndicator\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__shape-indicator\"\n\t\t\t\t\t\t\tkey={userId + '_' + shapeId}\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\topacity={0.5}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t</>\n\t)\n})\n\nfunction getStateFromElapsedTime(editor: Editor, elapsed: number) {\n\treturn elapsed > editor.options.collaboratorInactiveTimeoutMs\n\t\t? 'inactive'\n\t\t: elapsed > editor.options.collaboratorIdleTimeoutMs\n\t\t\t? 'idle'\n\t\t\t: 'active'\n}\n\nfunction useCollaboratorState(editor: Editor, latestPresence: TLInstancePresence | null) {\n\tconst rLastActivityTimestamp = useRef(latestPresence?.lastActivityTimestamp ?? -1)\n\n\tconst [state, setState] = useState<'active' | 'idle' | 'inactive'>(() =>\n\t\tgetStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t)\n\n\tuseEffect(() => {\n\t\tconst interval = editor.timers.setInterval(() => {\n\t\t\tsetState(getStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current))\n\t\t}, editor.options.collaboratorCheckIntervalMs)\n\n\t\treturn () => clearInterval(interval)\n\t}, [editor])\n\n\tif (latestPresence) {\n\t\t// We can do this on every render, it's free and cheaper than an effect\n\t\t// remember, there can be lots and lots of cursors moving around all the time\n\t\trLastActivityTimestamp.current = latestPresence.lastActivityTimestamp ?? Infinity\n\t}\n\n\treturn state\n}\n"],
+  "mappings": "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",
   "names": ["CollaboratorGuard", "Collaborator"]
 }

package/dist-cjs/lib/components/default-components/DefaultBrush.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultBrush.tsx"],
-  "sourcesContent": ["import { BoxModel } from '@tldraw/tlschema'\nimport { useRef } from 'react'\nimport { useTransform } from '../../hooks/useTransform'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLBrushProps {\n\tbrush: BoxModel\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps) => {\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\tuseTransform(rSvg, brush.x, brush.y)\n\n\tconst w = toDomPrecision(Math.max(1, brush.w))\n\tconst h = toDomPrecision(Math.max(1, brush.h))\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\" ref={rSvg}>\n\t\t\t{color ? (\n\t\t\t\t<g className=\"tl-brush\" opacity={opacity}>\n\t\t\t\t\t<rect width={w} height={h} fill={color} opacity={0.75} />\n\t\t\t\t\t<rect width={w} height={h} fill=\"none\" stroke={color} opacity={0.1} />\n\t\t\t\t</g>\n\t\t\t) : (\n\t\t\t\t<rect className={`tl-brush tl-brush__default ${className}`} width={w} height={h} />\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBI;AAvBJ,mBAAuB;AACvB,0BAA6B;AAC7B,mBAA+B;AAWxB,MAAM,eAAe,CAAC,EAAE,OAAO,OAAO,SAAS,UAAU,MAAoB;AACnF,QAAM,WAAO,qBAAsB,IAAI;AACvC,wCAAa,MAAM,MAAM,GAAG,MAAM,CAAC;AAEnC,QAAM,QAAI,6BAAe,KAAK,IAAI,GAAG,MAAM,CAAC,CAAC;AAC7C,QAAM,QAAI,6BAAe,KAAK,IAAI,GAAG,MAAM,CAAC,CAAC;AAE7C,SACC,4CAAC,SAAI,WAAU,qBAAoB,KAAK,MACtC,kBACA,6CAAC,OAAE,WAAU,YAAW,SACvB;AAAA,gDAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAM,OAAO,SAAS,MAAM;AAAA,IACvD,4CAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAK,QAAO,QAAQ,OAAO,SAAS,KAAK;AAAA,KACrE,IAEA,4CAAC,UAAK,WAAW,8BAA8B,SAAS,IAAI,OAAO,GAAG,QAAQ,GAAG,GAEnF;AAEF;",
+  "sourcesContent": ["import { BoxModel } from '@tldraw/tlschema'\nimport { useRef } from 'react'\nimport { useTransform } from '../../hooks/useTransform'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLBrushProps {\n\tuserId?: string\n\tbrush: BoxModel\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps) => {\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\tuseTransform(rSvg, brush.x, brush.y)\n\n\tconst w = toDomPrecision(Math.max(1, brush.w))\n\tconst h = toDomPrecision(Math.max(1, brush.h))\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\" ref={rSvg}>\n\t\t\t{color ? (\n\t\t\t\t<g className=\"tl-brush\" opacity={opacity}>\n\t\t\t\t\t<rect width={w} height={h} fill={color} opacity={0.75} />\n\t\t\t\t\t<rect width={w} height={h} fill=\"none\" stroke={color} opacity={0.1} />\n\t\t\t\t</g>\n\t\t\t) : (\n\t\t\t\t<rect className={`tl-brush tl-brush__default ${className}`} width={w} height={h} />\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBI;AAxBJ,mBAAuB;AACvB,0BAA6B;AAC7B,mBAA+B;AAYxB,MAAM,eAAe,CAAC,EAAE,OAAO,OAAO,SAAS,UAAU,MAAoB;AACnF,QAAM,WAAO,qBAAsB,IAAI;AACvC,wCAAa,MAAM,MAAM,GAAG,MAAM,CAAC;AAEnC,QAAM,QAAI,6BAAe,KAAK,IAAI,GAAG,MAAM,CAAC,CAAC;AAC7C,QAAM,QAAI,6BAAe,KAAK,IAAI,GAAG,MAAM,CAAC,CAAC;AAE7C,SACC,4CAAC,SAAI,WAAU,qBAAoB,KAAK,MACtC,kBACA,6CAAC,OAAE,WAAU,YAAW,SACvB;AAAA,gDAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAM,OAAO,SAAS,MAAM;AAAA,IACvD,4CAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAK,QAAO,QAAQ,OAAO,SAAS,KAAK;AAAA,KACrE,IAEA,4CAAC,UAAK,WAAW,8BAA8B,SAAS,IAAI,OAAO,GAAG,QAAQ,GAAG,GAEnF;AAEF;",
   "names": []
 }

package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultCollaboratorHint.tsx"],
-  "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { Vec } from '../../primitives/Vec'\nimport { clamp } from '../../primitives/utils'\n\n/** @public */\nexport interface TLCollaboratorHintProps {\n\tclassName?: string\n\tpoint: VecModel\n\tviewport: Box\n\tzoom: number\n\topacity?: number\n\tcolor: string\n}\n\n/** @public @react */\nexport function DefaultCollaboratorHint({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tviewport,\n\topacity = 1,\n}: TLCollaboratorHintProps) {\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tuseTransform(\n\t\trSvg,\n\t\tclamp(point.x, viewport.minX + 5 / zoom, viewport.maxX - 5 / zoom),\n\t\tclamp(point.y, viewport.minY + 5 / zoom, viewport.maxY - 5 / zoom),\n\t\t1 / zoom,\n\t\tVec.Angle(viewport.center, point)\n\t)\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\n\treturn (\n\t\t<svg ref={rSvg} className={classNames('tl-overlays__item', className)}>\n\t\t\t<use\n\t\t\t\thref={`#${cursorHintId}`}\n\t\t\t\tcolor={color}\n\t\t\t\tstrokeWidth={3}\n\t\t\t\tstroke=\"var(--color-background)\"\n\t\t\t/>\n\t\t\t<use href={`#${cursorHintId}`} color={color} opacity={opacity} />\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCE;AAvCF,wBAAuB;AACvB,mBAAuB;AACvB,uBAAgC;AAChC,0BAA6B;AAE7B,iBAAoB;AACpB,mBAAsB;AAaf,SAAS,wBAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACX,GAA4B;AAC3B,QAAM,WAAO,qBAAsB,IAAI;AAEvC;AAAA,IACC;AAAA,QACA,oBAAM,MAAM,GAAG,SAAS,OAAO,IAAI,MAAM,SAAS,OAAO,IAAI,IAAI;AAAA,QACjE,oBAAM,MAAM,GAAG,SAAS,OAAO,IAAI,MAAM,SAAS,OAAO,IAAI,IAAI;AAAA,IACjE,IAAI;AAAA,IACJ,eAAI,MAAM,SAAS,QAAQ,KAAK;AAAA,EACjC;AACA,QAAM,mBAAe,kCAAgB,aAAa;AAElD,SACC,6CAAC,SAAI,KAAK,MAAM,eAAW,kBAAAA,SAAW,qBAAqB,SAAS,GACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAM,IAAI,YAAY;AAAA,QACtB;AAAA,QACA,aAAa;AAAA,QACb,QAAO;AAAA;AAAA,IACR;AAAA,IACA,4CAAC,SAAI,MAAM,IAAI,YAAY,IAAI,OAAc,SAAkB;AAAA,KAChE;AAEF;",
+  "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { Vec } from '../../primitives/Vec'\nimport { clamp } from '../../primitives/utils'\n\n/** @public */\nexport interface TLCollaboratorHintProps {\n\tuserId: string\n\tclassName?: string\n\tpoint: VecModel\n\tviewport: Box\n\tzoom: number\n\topacity?: number\n\tcolor: string\n}\n\n/** @public @react */\nexport function DefaultCollaboratorHint({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tviewport,\n\topacity = 1,\n}: TLCollaboratorHintProps) {\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tuseTransform(\n\t\trSvg,\n\t\tclamp(point.x, viewport.minX + 5 / zoom, viewport.maxX - 5 / zoom),\n\t\tclamp(point.y, viewport.minY + 5 / zoom, viewport.maxY - 5 / zoom),\n\t\t1 / zoom,\n\t\tVec.Angle(viewport.center, point)\n\t)\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\n\treturn (\n\t\t<svg ref={rSvg} className={classNames('tl-overlays__item', className)}>\n\t\t\t<use\n\t\t\t\thref={`#${cursorHintId}`}\n\t\t\t\tcolor={color}\n\t\t\t\tstrokeWidth={3}\n\t\t\t\tstroke=\"var(--color-background)\"\n\t\t\t/>\n\t\t\t<use href={`#${cursorHintId}`} color={color} opacity={opacity} />\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCE;AAxCF,wBAAuB;AACvB,mBAAuB;AACvB,uBAAgC;AAChC,0BAA6B;AAE7B,iBAAoB;AACpB,mBAAsB;AAcf,SAAS,wBAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACX,GAA4B;AAC3B,QAAM,WAAO,qBAAsB,IAAI;AAEvC;AAAA,IACC;AAAA,QACA,oBAAM,MAAM,GAAG,SAAS,OAAO,IAAI,MAAM,SAAS,OAAO,IAAI,IAAI;AAAA,QACjE,oBAAM,MAAM,GAAG,SAAS,OAAO,IAAI,MAAM,SAAS,OAAO,IAAI,IAAI;AAAA,IACjE,IAAI;AAAA,IACJ,eAAI,MAAM,SAAS,QAAQ,KAAK;AAAA,EACjC;AACA,QAAM,mBAAe,kCAAgB,aAAa;AAElD,SACC,6CAAC,SAAI,KAAK,MAAM,eAAW,kBAAAA,SAAW,qBAAqB,SAAS,GACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAM,IAAI,YAAY;AAAA,QACtB;AAAA,QACA,aAAa;AAAA,QACb,QAAO;AAAA;AAAA,IACR;AAAA,IACA,4CAAC,SAAI,MAAM,IAAI,YAAY,IAAI,OAAc,SAAkB;AAAA,KAChE;AAEF;",
   "names": ["classNames"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultCursor.tsx"],
-  "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\n\n/** @public */\nexport interface TLCursorProps {\n\tclassName?: string\n\tpoint: VecModel | null\n\tzoom: number\n\tcolor?: string\n\tname: string | null\n\tchatMessage: string\n}\n\n/** @public @react */\nexport const DefaultCursor = memo(function DefaultCursor({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tname,\n\tchatMessage,\n}: TLCursorProps) {\n\tconst rCursor = useRef<HTMLDivElement>(null)\n\tuseTransform(rCursor, point?.x, point?.y, 1 / zoom)\n\n\tconst cursorId = useSharedSafeId('cursor')\n\n\tif (!point) return null\n\n\treturn (\n\t\t<div ref={rCursor} className={classNames('tl-overlays__item', className)}>\n\t\t\t<svg className=\"tl-cursor\">\n\t\t\t\t<use href={`#${cursorId}`} color={color} />\n\t\t\t</svg>\n\t\t\t{chatMessage ? (\n\t\t\t\t<>\n\t\t\t\t\t{name && (\n\t\t\t\t\t\t<div className=\"tl-nametag-title\" style={{ color }}>\n\t\t\t\t\t\t\t{name}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className=\"tl-nametag-chat\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{chatMessage}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\tname && (\n\t\t\t\t\t<div className=\"tl-nametag\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t)}\n\t\t</div>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCI;AAlCJ,wBAAuB;AACvB,mBAA6B;AAC7B,uBAAgC;AAChC,0BAA6B;AAatB,MAAM,oBAAgB,mBAAK,SAASA,eAAc;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkB;AACjB,QAAM,cAAU,qBAAuB,IAAI;AAC3C,wCAAa,SAAS,OAAO,GAAG,OAAO,GAAG,IAAI,IAAI;AAElD,QAAM,eAAW,kCAAgB,QAAQ;AAEzC,MAAI,CAAC,MAAO,QAAO;AAEnB,SACC,6CAAC,SAAI,KAAK,SAAS,eAAW,kBAAAC,SAAW,qBAAqB,SAAS,GACtE;AAAA,gDAAC,SAAI,WAAU,aACd,sDAAC,SAAI,MAAM,IAAI,QAAQ,IAAI,OAAc,GAC1C;AAAA,IACC,cACA,4EACE;AAAA,cACA,4CAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,MAAM,GAC/C,gBACF;AAAA,MAED,4CAAC,SAAI,WAAU,mBAAkB,OAAO,EAAE,iBAAiB,MAAM,GAC/D,uBACF;AAAA,OACD,IAEA,QACC,4CAAC,SAAI,WAAU,cAAa,OAAO,EAAE,iBAAiB,MAAM,GAC1D,gBACF;AAAA,KAGH;AAEF,CAAC;",
+  "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\n\n/** @public */\nexport interface TLCursorProps {\n\tuserId: string\n\tclassName?: string\n\tpoint: VecModel | null\n\tzoom: number\n\tcolor?: string\n\tname: string | null\n\tchatMessage: string\n}\n\n/** @public @react */\nexport const DefaultCursor = memo(function DefaultCursor({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tname,\n\tchatMessage,\n}: TLCursorProps) {\n\tconst rCursor = useRef<HTMLDivElement>(null)\n\tuseTransform(rCursor, point?.x, point?.y, 1 / zoom)\n\n\tconst cursorId = useSharedSafeId('cursor')\n\n\tif (!point) return null\n\n\treturn (\n\t\t<div ref={rCursor} className={classNames('tl-overlays__item', className)}>\n\t\t\t<svg className=\"tl-cursor\">\n\t\t\t\t<use href={`#${cursorId}`} color={color} />\n\t\t\t</svg>\n\t\t\t{chatMessage ? (\n\t\t\t\t<>\n\t\t\t\t\t{name && (\n\t\t\t\t\t\t<div className=\"tl-nametag-title\" style={{ color }}>\n\t\t\t\t\t\t\t{name}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className=\"tl-nametag-chat\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{chatMessage}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\tname && (\n\t\t\t\t\t<div className=\"tl-nametag\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t)}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCI;AAnCJ,wBAAuB;AACvB,mBAA6B;AAC7B,uBAAgC;AAChC,0BAA6B;AActB,MAAM,oBAAgB,mBAAK,SAASA,eAAc;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkB;AACjB,QAAM,cAAU,qBAAuB,IAAI;AAC3C,wCAAa,SAAS,OAAO,GAAG,OAAO,GAAG,IAAI,IAAI;AAElD,QAAM,eAAW,kCAAgB,QAAQ;AAEzC,MAAI,CAAC,MAAO,QAAO;AAEnB,SACC,6CAAC,SAAI,KAAK,SAAS,eAAW,kBAAAC,SAAW,qBAAqB,SAAS,GACtE;AAAA,gDAAC,SAAI,WAAU,aACd,sDAAC,SAAI,MAAM,IAAI,QAAQ,IAAI,OAAc,GAC1C;AAAA,IACC,cACA,4EACE;AAAA,cACA,4CAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,MAAM,GAC/C,gBACF;AAAA,MAED,4CAAC,SAAI,WAAU,mBAAkB,OAAO,EAAE,iBAAiB,MAAM,GAC/D,uBACF;AAAA,OACD,IAEA,QACC,4CAAC,SAAI,WAAU,cAAa,OAAO,EAAE,iBAAiB,MAAM,GAC1D,gBACF;AAAA,KAGH;AAEF,CAAC;",
   "names": ["DefaultCursor", "classNames"]
 }

package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js CHANGED Viewed

@@ -168,7 +168,7 @@ My browser: ${navigator.userAgent}`
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: url.toString(), children: "GitHub issue" }),
                 " or ask for help on",
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: "https://discord.gg/Cq6cPsTfNy", children: "Discord" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: "https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen", children: "Discord" }),
                 ". If you are still stuck, you can reset the tldraw data on your machine. This may erase the project you were working on, so try to get help first."
               ] }),
               shouldShowError && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [

package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultErrorFallback.tsx"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { noop } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { EditorProvider } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { hardResetEditor } from '../../utils/hardResetEditor'\nimport { refreshPage } from '../../utils/refreshPage'\nimport { ErrorBoundary } from '../ErrorBoundary'\n\nconst BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'\n\n/** @public */\nexport type TLErrorFallbackComponent = ComponentType<{ error: unknown; editor?: Editor }>\n\n/** @public @react */\nexport const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')\n\tconst [didCopy, setDidCopy] = useState(false)\n\tconst [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false)\n\n\tlet Canvas: React.ComponentType | null = null\n\ttry {\n\t\tconst components = useEditorComponents()\n\t\tCanvas = components.Canvas ?? null\n\t} catch {\n\t\t// allow this to fail silently\n\t}\n\n\tconst errorMessage = error instanceof Error ? error.message : String(error)\n\tconst errorStack = error instanceof Error ? error.stack : null\n\n\tconst isDarkModeFromApp = useValue(\n\t\t'isDarkMode',\n\t\t() => {\n\t\t\ttry {\n\t\t\t\tif (editor) {\n\t\t\t\t\treturn editor.user.getIsDarkMode()\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// we're in a funky error state so this might not work for spooky\n\t\t\t\t// reasons. if not, we'll have another attempt later:\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t\t[editor]\n\t)\n\tconst [isDarkMode, setIsDarkMode] = useState<null | boolean>(null)\n\tuseLayoutEffect(() => {\n\t\t// if we found a theme class from the app, we can just use that\n\t\tif (isDarkModeFromApp !== null) {\n\t\t\tsetIsDarkMode(isDarkModeFromApp)\n\t\t}\n\n\t\t// do any of our parents have a theme class? if yes then we can just\n\t\t// rely on that and don't need to set our own class\n\t\tlet parent = containerRef.current?.parentElement\n\t\tlet foundParentThemeClass = false\n\t\twhile (parent) {\n\t\t\tif (\n\t\t\t\tparent.classList.contains('tl-theme__dark') ||\n\t\t\t\tparent.classList.contains('tl-theme__light')\n\t\t\t) {\n\t\t\t\tfoundParentThemeClass = true\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tparent = parent.parentElement\n\t\t}\n\t\tif (foundParentThemeClass) {\n\t\t\tsetIsDarkMode(null)\n\t\t\treturn\n\t\t}\n\n\t\t// if we can't find a theme class from the app or from a parent, we have\n\t\t// to fall back on using a media query:\n\t\tif (typeof window !== 'undefined' && 'matchMedia' in window) {\n\t\t\tsetIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)\n\t\t}\n\t}, [isDarkModeFromApp])\n\n\tuseEffect(() => {\n\t\tif (didCopy) {\n\t\t\tconst timeout = editor?.timers.setTimeout(() => {\n\t\t\t\tsetDidCopy(false)\n\t\t\t}, 2000)\n\t\t\treturn () => clearTimeout(timeout)\n\t\t}\n\t}, [didCopy, editor])\n\n\tconst copyError = () => {\n\t\tconst textarea = document.createElement('textarea')\n\t\ttextarea.value = errorStack ?? errorMessage\n\t\tdocument.body.appendChild(textarea)\n\t\ttextarea.select()\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\tdocument.execCommand('copy')\n\t\ttextarea.remove()\n\t\tsetDidCopy(true)\n\t}\n\n\tconst refresh = () => {\n\t\trefreshPage()\n\t}\n\n\tconst resetLocalState = async () => {\n\t\thardResetEditor()\n\t}\n\n\tconst url = new URL(BASE_ERROR_URL)\n\turl.searchParams.set('title', errorMessage)\n\turl.searchParams.set('labels', `bug`)\n\turl.searchParams.set(\n\t\t'body',\n\t\t`Hey, I ran into an error while using tldraw:\n\n\\`\\`\\`js\n${errorStack ?? errorMessage}\n\\`\\`\\`\n\nMy browser: ${navigator.userAgent}`\n\t)\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={classNames(\n\t\t\t\t'tl-container tl-error-boundary',\n\t\t\t\t// error-boundary is sometimes used outside of the theme\n\t\t\t\t// container, so we need to provide it with a theme for our\n\t\t\t\t// styles to work correctly\n\t\t\t\tisDarkMode === null ? '' : isDarkMode ? 'tl-theme__dark' : 'tl-theme__light'\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"tl-error-boundary__overlay\" />\n\t\t\t{editor && (\n\t\t\t\t// opportunistically attempt to render the canvas to reassure\n\t\t\t\t// the user that their document is still there. there's a good\n\t\t\t\t// chance this won't work (ie the error that we're currently\n\t\t\t\t// notifying the user about originates in the canvas) so it's\n\t\t\t\t// not a big deal if it doesn't work - in that case we just have\n\t\t\t\t// a plain grey background.\n\t\t\t\t<ErrorBoundary onError={noop} fallback={() => null}>\n\t\t\t\t\t<EditorProvider editor={editor}>\n\t\t\t\t\t\t<div className=\"tl-overlay tl-error-boundary__canvas\">{Canvas ? <Canvas /> : null}</div>\n\t\t\t\t\t</EditorProvider>\n\t\t\t\t</ErrorBoundary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={classNames('tl-modal', 'tl-error-boundary__content', {\n\t\t\t\t\t'tl-error-boundary__content__expanded': shouldShowError && !shouldShowResetConfirmation,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{shouldShowResetConfirmation ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Are you sure?</h2>\n\t\t\t\t\t\t<p>Resetting your data will delete your drawing and cannot be undone.</p>\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button onClick={() => setShouldShowResetConfirmation(false)}>Cancel</button>\n\t\t\t\t\t\t\t<button className=\"tl-error-boundary__reset\" onClick={resetLocalState}>\n\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Something went wrong</h2>\n\t\t\t\t\t\t<p>Please refresh the page to continue.</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIf you keep seeing this screen, you can create a{' '}\n\t\t\t\t\t\t\t<a href={url.toString()}>GitHub issue</a> or ask for help on{' '}\n\t\t\t\t\t\t\t<a href=\"https://discord.gg/Cq6cPsTfNy\">Discord</a>. If you are still stuck, you can\n\t\t\t\t\t\t\treset the tldraw data on your machine. This may erase the project you were working on,\n\t\t\t\t\t\t\tso try to get help first.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t{shouldShowError && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\tMessage:\n\t\t\t\t\t\t\t\t<h4>\n\t\t\t\t\t\t\t\t\t<code>{errorMessage}</code>\n\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\tStack trace:\n\t\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__error\">\n\t\t\t\t\t\t\t\t\t<pre>\n\t\t\t\t\t\t\t\t\t\t<code>{errorStack ?? errorMessage}</code>\n\t\t\t\t\t\t\t\t\t</pre>\n\t\t\t\t\t\t\t\t\t<button onClick={copyError}>{didCopy ? 'Copied!' : 'Copy'}</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button onClick={() => setShouldShowError(!shouldShowError)}>\n\t\t\t\t\t\t\t\t{shouldShowError ? 'Hide details' : 'Show details'}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions__group\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclassName=\"tl-error-boundary__reset\"\n\t\t\t\t\t\t\t\t\tonClick={() => setShouldShowResetConfirmation(true)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button className=\"tl-error-boundary__refresh\" onClick={refresh}>\n\t\t\t\t\t\t\t\t\tRefresh Page\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { noop } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { EditorProvider } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { hardResetEditor } from '../../utils/hardResetEditor'\nimport { refreshPage } from '../../utils/refreshPage'\nimport { ErrorBoundary } from '../ErrorBoundary'\n\nconst BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'\n\n/** @public */\nexport type TLErrorFallbackComponent = ComponentType<{ error: unknown; editor?: Editor }>\n\n/** @public @react */\nexport const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {\n\tconst containerRef = useRef<HTMLDivElement>(null)\n\tconst [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')\n\tconst [didCopy, setDidCopy] = useState(false)\n\tconst [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false)\n\n\tlet Canvas: React.ComponentType | null = null\n\ttry {\n\t\tconst components = useEditorComponents()\n\t\tCanvas = components.Canvas ?? null\n\t} catch {\n\t\t// allow this to fail silently\n\t}\n\n\tconst errorMessage = error instanceof Error ? error.message : String(error)\n\tconst errorStack = error instanceof Error ? error.stack : null\n\n\tconst isDarkModeFromApp = useValue(\n\t\t'isDarkMode',\n\t\t() => {\n\t\t\ttry {\n\t\t\t\tif (editor) {\n\t\t\t\t\treturn editor.user.getIsDarkMode()\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// we're in a funky error state so this might not work for spooky\n\t\t\t\t// reasons. if not, we'll have another attempt later:\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t\t[editor]\n\t)\n\tconst [isDarkMode, setIsDarkMode] = useState<null | boolean>(null)\n\tuseLayoutEffect(() => {\n\t\t// if we found a theme class from the app, we can just use that\n\t\tif (isDarkModeFromApp !== null) {\n\t\t\tsetIsDarkMode(isDarkModeFromApp)\n\t\t}\n\n\t\t// do any of our parents have a theme class? if yes then we can just\n\t\t// rely on that and don't need to set our own class\n\t\tlet parent = containerRef.current?.parentElement\n\t\tlet foundParentThemeClass = false\n\t\twhile (parent) {\n\t\t\tif (\n\t\t\t\tparent.classList.contains('tl-theme__dark') ||\n\t\t\t\tparent.classList.contains('tl-theme__light')\n\t\t\t) {\n\t\t\t\tfoundParentThemeClass = true\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tparent = parent.parentElement\n\t\t}\n\t\tif (foundParentThemeClass) {\n\t\t\tsetIsDarkMode(null)\n\t\t\treturn\n\t\t}\n\n\t\t// if we can't find a theme class from the app or from a parent, we have\n\t\t// to fall back on using a media query:\n\t\tif (typeof window !== 'undefined' && 'matchMedia' in window) {\n\t\t\tsetIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)\n\t\t}\n\t}, [isDarkModeFromApp])\n\n\tuseEffect(() => {\n\t\tif (didCopy) {\n\t\t\tconst timeout = editor?.timers.setTimeout(() => {\n\t\t\t\tsetDidCopy(false)\n\t\t\t}, 2000)\n\t\t\treturn () => clearTimeout(timeout)\n\t\t}\n\t}, [didCopy, editor])\n\n\tconst copyError = () => {\n\t\tconst textarea = document.createElement('textarea')\n\t\ttextarea.value = errorStack ?? errorMessage\n\t\tdocument.body.appendChild(textarea)\n\t\ttextarea.select()\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\tdocument.execCommand('copy')\n\t\ttextarea.remove()\n\t\tsetDidCopy(true)\n\t}\n\n\tconst refresh = () => {\n\t\trefreshPage()\n\t}\n\n\tconst resetLocalState = async () => {\n\t\thardResetEditor()\n\t}\n\n\tconst url = new URL(BASE_ERROR_URL)\n\turl.searchParams.set('title', errorMessage)\n\turl.searchParams.set('labels', `bug`)\n\turl.searchParams.set(\n\t\t'body',\n\t\t`Hey, I ran into an error while using tldraw:\n\n\\`\\`\\`js\n${errorStack ?? errorMessage}\n\\`\\`\\`\n\nMy browser: ${navigator.userAgent}`\n\t)\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={classNames(\n\t\t\t\t'tl-container tl-error-boundary',\n\t\t\t\t// error-boundary is sometimes used outside of the theme\n\t\t\t\t// container, so we need to provide it with a theme for our\n\t\t\t\t// styles to work correctly\n\t\t\t\tisDarkMode === null ? '' : isDarkMode ? 'tl-theme__dark' : 'tl-theme__light'\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"tl-error-boundary__overlay\" />\n\t\t\t{editor && (\n\t\t\t\t// opportunistically attempt to render the canvas to reassure\n\t\t\t\t// the user that their document is still there. there's a good\n\t\t\t\t// chance this won't work (ie the error that we're currently\n\t\t\t\t// notifying the user about originates in the canvas) so it's\n\t\t\t\t// not a big deal if it doesn't work - in that case we just have\n\t\t\t\t// a plain grey background.\n\t\t\t\t<ErrorBoundary onError={noop} fallback={() => null}>\n\t\t\t\t\t<EditorProvider editor={editor}>\n\t\t\t\t\t\t<div className=\"tl-overlay tl-error-boundary__canvas\">{Canvas ? <Canvas /> : null}</div>\n\t\t\t\t\t</EditorProvider>\n\t\t\t\t</ErrorBoundary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={classNames('tl-modal', 'tl-error-boundary__content', {\n\t\t\t\t\t'tl-error-boundary__content__expanded': shouldShowError && !shouldShowResetConfirmation,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{shouldShowResetConfirmation ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Are you sure?</h2>\n\t\t\t\t\t\t<p>Resetting your data will delete your drawing and cannot be undone.</p>\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button onClick={() => setShouldShowResetConfirmation(false)}>Cancel</button>\n\t\t\t\t\t\t\t<button className=\"tl-error-boundary__reset\" onClick={resetLocalState}>\n\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<h2>Something went wrong</h2>\n\t\t\t\t\t\t<p>Please refresh the page to continue.</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIf you keep seeing this screen, you can create a{' '}\n\t\t\t\t\t\t\t<a href={url.toString()}>GitHub issue</a> or ask for help on{' '}\n\t\t\t\t\t\t\t<a href=\"https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen\">\n\t\t\t\t\t\t\t\tDiscord\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t. If you are still stuck, you can reset the tldraw data on your machine. This may\n\t\t\t\t\t\t\terase the project you were working on, so try to get help first.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t{shouldShowError && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\tMessage:\n\t\t\t\t\t\t\t\t<h4>\n\t\t\t\t\t\t\t\t\t<code>{errorMessage}</code>\n\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\tStack trace:\n\t\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__error\">\n\t\t\t\t\t\t\t\t\t<pre>\n\t\t\t\t\t\t\t\t\t\t<code>{errorStack ?? errorMessage}</code>\n\t\t\t\t\t\t\t\t\t</pre>\n\t\t\t\t\t\t\t\t\t<button onClick={copyError}>{didCopy ? 'Copied!' : 'Copy'}</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions\">\n\t\t\t\t\t\t\t<button onClick={() => setShouldShowError(!shouldShowError)}>\n\t\t\t\t\t\t\t\t{shouldShowError ? 'Hide details' : 'Show details'}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<div className=\"tl-error-boundary__content__actions__group\">\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclassName=\"tl-error-boundary__reset\"\n\t\t\t\t\t\t\t\t\tonClick={() => setShouldShowResetConfirmation(true)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tReset data\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t<button className=\"tl-error-boundary__refresh\" onClick={refresh}>\n\t\t\t\t\t\t\t\t\tRefresh Page\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist-cjs/lib/components/default-components/DefaultScribble.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultScribble.tsx"],
-  "sourcesContent": ["import { TLScribble } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'\n\n/** @public */\nexport interface TLScribbleProps {\n\tscribble: TLScribble\n\tzoom: number\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\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={getSvgPathFromPoints(scribble.points, false)}\n\t\t\t\tstroke={color ?? `var(--color-${scribble.color})`}\n\t\t\t\tfill=\"none\"\n\t\t\t\tstrokeWidth={8 / zoom}\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;AAmBG;AAlBH,wBAAuB;AACvB,kCAAqC;AAY9B,SAAS,gBAAgB,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC/F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,SACC,4CAAC,SAAI,WAAW,gBAAY,kBAAAA,SAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAG,kDAAqB,SAAS,QAAQ,KAAK;AAAA,MAC9C,QAAQ,SAAS,eAAe,SAAS,KAAK;AAAA,MAC9C,MAAK;AAAA,MACL,aAAa,IAAI;AAAA,MACjB,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
+  "sourcesContent": ["import { TLScribble } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'\n\n/** @public */\nexport interface TLScribbleProps {\n\tuserId?: string\n\tscribble: TLScribble\n\tzoom: number\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\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={getSvgPathFromPoints(scribble.points, false)}\n\t\t\t\tstroke={color ?? `var(--color-${scribble.color})`}\n\t\t\t\tfill=\"none\"\n\t\t\t\tstrokeWidth={8 / zoom}\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;AAoBG;AAnBH,wBAAuB;AACvB,kCAAqC;AAa9B,SAAS,gBAAgB,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC/F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,SACC,4CAAC,SAAI,WAAW,gBAAY,kBAAAA,SAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAG,kDAAqB,SAAS,QAAQ,KAAK;AAAA,MAC9C,QAAQ,SAAS,eAAe,SAAS,KAAK;AAAA,MAC9C,MAAK;AAAA,MACL,aAAa,IAAI;AAAA,MACjB,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
   "names": ["classNames"]
 }

package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicator.tsx"],
-  "sourcesContent": ["import { useQuickReactor, useStateTracking, useValue } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport type { Editor } from '../../editor/Editor'\nimport { ShapeUtil } from '../../editor/shapes/ShapeUtil'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { OptionalErrorBoundary } from '../ErrorBoundary'\n\n// need an extra layer of indirection here to allow hooks to be used inside the indicator render\nconst EvenInnererIndicator = ({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {\n\treturn useStateTracking('Indicator: ' + shape.type, () =>\n\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t// calling the render method with stale data.\n\t\tutil.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)\n\t)\n}\n\nconst InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {\n\tconst shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])\n\n\tconst { ShapeIndicatorErrorFallback } = useEditorComponents()\n\n\tif (!shape || shape.isLocked) return null\n\n\treturn (\n\t\t<OptionalErrorBoundary\n\t\t\tfallback={ShapeIndicatorErrorFallback}\n\t\t\tonError={(error) =>\n\t\t\t\teditor.annotateError(error, { origin: 'react.shapeIndicator', willCrashApp: false })\n\t\t\t}\n\t\t>\n\t\t\t<EvenInnererIndicator key={shape.id} shape={shape} util={editor.getShapeUtil(shape)} />\n\t\t</OptionalErrorBoundary>\n\t)\n}\n\n/** @public */\nexport interface TLShapeIndicatorProps {\n\tshapeId: TLShapeId\n\tcolor?: string | undefined\n\topacity?: number\n\tclassName?: string\n\thidden?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicator = memo(function DefaultShapeIndicator({\n\tshapeId,\n\tclassName,\n\tcolor,\n\thidden,\n\topacity,\n}: TLShapeIndicatorProps) {\n\tconst editor = useEditor()\n\n\tconst rIndicator = useRef<SVGSVGElement>(null)\n\n\tuseQuickReactor(\n\t\t'indicator transform',\n\t\t() => {\n\t\t\tconst elm = rIndicator.current\n\t\t\tif (!elm) return\n\t\t\tconst pageTransform = editor.getShapePageTransform(shapeId)\n\t\t\tif (!pageTransform) return\n\t\t\telm.style.setProperty('transform', pageTransform.toCssString())\n\t\t},\n\t\t[editor, shapeId]\n\t)\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = rIndicator.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('display', hidden ? 'none' : 'block')\n\t}, [hidden])\n\n\treturn (\n\t\t<svg ref={rIndicator} className={classNames('tl-overlays__item', className)}>\n\t\t\t<g className=\"tl-shape-indicator\" stroke={color ?? 'var(--color-selected)'} opacity={opacity}>\n\t\t\t\t<InnerIndicator editor={editor} id={shapeId} />\n\t\t\t</g>\n\t\t</svg>\n\t)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCG;AAjCH,yBAA4D;AAE5D,wBAAuB;AACvB,mBAA8C;AAG9C,uBAA0B;AAC1B,iCAAoC;AACpC,2BAAsC;AAGtC,MAAM,uBAAuB,CAAC,EAAE,OAAO,KAAK,MAAgD;AAC3F,aAAO;AAAA,IAAiB,gBAAgB,MAAM;AAAA,IAAM;AAAA;AAAA;AAAA,MAGnD,KAAK,UAAU,KAAK,OAAO,MAAM,wBAAwB,MAAM,EAAE,CAAY;AAAA;AAAA,EAC9E;AACD;AAEA,MAAM,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAyC;AAC7E,QAAM,YAAQ,6BAAS,uBAAuB,MAAM,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEtF,QAAM,EAAE,4BAA4B,QAAI,gDAAoB;AAE5D,MAAI,CAAC,SAAS,MAAM,SAAU,QAAO;AAErC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAU;AAAA,MACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,wBAAwB,cAAc,MAAM,CAAC;AAAA,MAGpF,sDAAC,wBAAoC,OAAc,MAAM,OAAO,aAAa,KAAK,KAAvD,MAAM,EAAoD;AAAA;AAAA,EACtF;AAEF;AAYO,MAAM,4BAAwB,mBAAK,SAASA,uBAAsB;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,aAAS,4BAAU;AAEzB,QAAM,iBAAa,qBAAsB,IAAI;AAE7C;AAAA,IACC;AAAA,IACA,MAAM;AACL,YAAM,MAAM,WAAW;AACvB,UAAI,CAAC,IAAK;AACV,YAAM,gBAAgB,OAAO,sBAAsB,OAAO;AAC1D,UAAI,CAAC,cAAe;AACpB,UAAI,MAAM,YAAY,aAAa,cAAc,YAAY,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,EACjB;AAEA,oCAAgB,MAAM;AACrB,UAAM,MAAM,WAAW;AACvB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,YAAY,WAAW,SAAS,SAAS,OAAO;AAAA,EAC3D,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,4CAAC,SAAI,KAAK,YAAY,eAAW,kBAAAC,SAAW,qBAAqB,SAAS,GACzE,sDAAC,OAAE,WAAU,sBAAqB,QAAQ,SAAS,yBAAyB,SAC3E,sDAAC,kBAAe,QAAgB,IAAI,SAAS,GAC9C,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { useQuickReactor, useStateTracking, useValue } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport type { Editor } from '../../editor/Editor'\nimport { ShapeUtil } from '../../editor/shapes/ShapeUtil'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useEditorComponents } from '../../hooks/useEditorComponents'\nimport { OptionalErrorBoundary } from '../ErrorBoundary'\n\n// need an extra layer of indirection here to allow hooks to be used inside the indicator render\nconst EvenInnererIndicator = ({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {\n\treturn useStateTracking('Indicator: ' + shape.type, () =>\n\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t// calling the render method with stale data.\n\t\tutil.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)\n\t)\n}\n\nconst InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {\n\tconst shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])\n\n\tconst { ShapeIndicatorErrorFallback } = useEditorComponents()\n\n\tif (!shape || shape.isLocked) return null\n\n\treturn (\n\t\t<OptionalErrorBoundary\n\t\t\tfallback={ShapeIndicatorErrorFallback}\n\t\t\tonError={(error) =>\n\t\t\t\teditor.annotateError(error, { origin: 'react.shapeIndicator', willCrashApp: false })\n\t\t\t}\n\t\t>\n\t\t\t<EvenInnererIndicator key={shape.id} shape={shape} util={editor.getShapeUtil(shape)} />\n\t\t</OptionalErrorBoundary>\n\t)\n}\n\n/** @public */\nexport interface TLShapeIndicatorProps {\n\tuserId?: string\n\tshapeId: TLShapeId\n\tcolor?: string | undefined\n\topacity?: number\n\tclassName?: string\n\thidden?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicator = memo(function DefaultShapeIndicator({\n\tshapeId,\n\tclassName,\n\tcolor,\n\thidden,\n\topacity,\n}: TLShapeIndicatorProps) {\n\tconst editor = useEditor()\n\n\tconst rIndicator = useRef<SVGSVGElement>(null)\n\n\tuseQuickReactor(\n\t\t'indicator transform',\n\t\t() => {\n\t\t\tconst elm = rIndicator.current\n\t\t\tif (!elm) return\n\t\t\tconst pageTransform = editor.getShapePageTransform(shapeId)\n\t\t\tif (!pageTransform) return\n\t\t\telm.style.setProperty('transform', pageTransform.toCssString())\n\t\t},\n\t\t[editor, shapeId]\n\t)\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = rIndicator.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('display', hidden ? 'none' : 'block')\n\t}, [hidden])\n\n\treturn (\n\t\t<svg ref={rIndicator} className={classNames('tl-overlays__item', className)}>\n\t\t\t<g className=\"tl-shape-indicator\" stroke={color ?? 'var(--color-selected)'} opacity={opacity}>\n\t\t\t\t<InnerIndicator editor={editor} id={shapeId} />\n\t\t\t</g>\n\t\t</svg>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCG;AAjCH,yBAA4D;AAE5D,wBAAuB;AACvB,mBAA8C;AAG9C,uBAA0B;AAC1B,iCAAoC;AACpC,2BAAsC;AAGtC,MAAM,uBAAuB,CAAC,EAAE,OAAO,KAAK,MAAgD;AAC3F,aAAO;AAAA,IAAiB,gBAAgB,MAAM;AAAA,IAAM;AAAA;AAAA;AAAA,MAGnD,KAAK,UAAU,KAAK,OAAO,MAAM,wBAAwB,MAAM,EAAE,CAAY;AAAA;AAAA,EAC9E;AACD;AAEA,MAAM,iBAAiB,CAAC,EAAE,QAAQ,GAAG,MAAyC;AAC7E,QAAM,YAAQ,6BAAS,uBAAuB,MAAM,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEtF,QAAM,EAAE,4BAA4B,QAAI,gDAAoB;AAE5D,MAAI,CAAC,SAAS,MAAM,SAAU,QAAO;AAErC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAU;AAAA,MACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,wBAAwB,cAAc,MAAM,CAAC;AAAA,MAGpF,sDAAC,wBAAoC,OAAc,MAAM,OAAO,aAAa,KAAK,KAAvD,MAAM,EAAoD;AAAA;AAAA,EACtF;AAEF;AAaO,MAAM,4BAAwB,mBAAK,SAASA,uBAAsB;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,aAAS,4BAAU;AAEzB,QAAM,iBAAa,qBAAsB,IAAI;AAE7C;AAAA,IACC;AAAA,IACA,MAAM;AACL,YAAM,MAAM,WAAW;AACvB,UAAI,CAAC,IAAK;AACV,YAAM,gBAAgB,OAAO,sBAAsB,OAAO;AAC1D,UAAI,CAAC,cAAe;AACpB,UAAI,MAAM,YAAY,aAAa,cAAc,YAAY,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,EACjB;AAEA,oCAAgB,MAAM;AACrB,UAAM,MAAM,WAAW;AACvB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,YAAY,WAAW,SAAS,SAAS,OAAO;AAAA,EAC3D,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,4CAAC,SAAI,KAAK,YAAY,eAAW,kBAAAC,SAAW,qBAAqB,SAAS,GACzE,sDAAC,OAAE,WAAU,sBAAqB,QAAQ,SAAS,yBAAyB,SAC3E,sDAAC,kBAAe,QAAgB,IAAI,SAAS,GAC9C,GACD;AAEF,CAAC;",
   "names": ["DefaultShapeIndicator", "classNames"]
 }