tldraw 4.3.0-next.f4772c19540d → 4.4.0-canary.29afdff6bb04

package/dist-esm/lib/ui/TldrawUi.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/TldrawUi.tsx"],
-  "sourcesContent": ["import { tlenv, useEditor, useReactor, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { ReactNode, useMemo, useRef, useState } from 'react'\nimport { TLUiAssetUrlOverrides } from './assetUrls'\nimport { SkipToMainContent } from './components/A11y'\nimport { TldrawUiButton } from './components/primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon'\nimport { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } from './constants'\nimport {\n\tTLUiContextProviderProps,\n\tTldrawUiContextProvider,\n} from './context/TldrawUiContextProvider'\nimport { useActions } from './context/actions'\nimport { useBreakpoint } from './context/breakpoints'\nimport { TLUiComponents, useTldrawUiComponents } from './context/components'\nimport { useNativeClipboardEvents } from './hooks/useClipboardEvents'\nimport { useEditorEvents } from './hooks/useEditorEvents'\nimport { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'\nimport { useReadonly } from './hooks/useReadonly'\nimport { useTranslation } from './hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TldrawUiProps extends TLUiContextProviderProps {\n\t/**\n\t * The component's children.\n\t */\n\tchildren?: ReactNode\n\n\t/**\n\t * Whether to hide the user interface and only display the canvas.\n\t */\n\thideUi?: boolean\n\n\t/**\n\t * Overrides for the UI components.\n\t */\n\tcomponents?: TLUiComponents\n\n\t/**\n\t * Additional items to add to the debug menu (will be deprecated)\n\t */\n\trenderDebugMenuItems?(): React.ReactNode\n\n\t/** Asset URL override. */\n\tassetUrls?: TLUiAssetUrlOverrides\n}\n\n/**\n * @public\n * @react\n */\nexport const TldrawUi = React.memo(function TldrawUi({\n\trenderDebugMenuItems,\n\tchildren,\n\thideUi,\n\tcomponents,\n\t...rest\n}: TldrawUiProps) {\n\treturn (\n\t\t<TldrawUiContextProvider {...rest} components={components}>\n\t\t\t<TldrawUiInner hideUi={hideUi} renderDebugMenuItems={renderDebugMenuItems}>\n\t\t\t\t{children}\n\t\t\t</TldrawUiInner>\n\t\t</TldrawUiContextProvider>\n\t)\n})\n\ninterface TldrawUiContentProps {\n\thideUi?: boolean\n\tshareZone?: ReactNode\n\ttopZone?: ReactNode\n\trenderDebugMenuItems?(): React.ReactNode\n}\n\nconst TldrawUiInner = React.memo(function TldrawUiInner({\n\tchildren,\n\thideUi,\n\t...rest\n}: TldrawUiContentProps & { children: ReactNode }) {\n\t// The hideUi prop should prevent the UI from mounting.\n\t// If we ever need want the UI to mount and preserve state, then\n\t// we should change this behavior and hide the UI via CSS instead.\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t{hideUi ? null : <TldrawUiContent {...rest} />}\n\t\t</>\n\t)\n})\n\nconst TldrawUiContent = React.memo(function TldrawUI() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\tconst isFocusMode = useValue('focus', () => editor.getInstanceState().isFocusMode, [editor])\n\tconst isDebugMode = useValue('debug', () => editor.getInstanceState().isDebugMode, [editor])\n\n\tconst {\n\t\tSharePanel,\n\t\tTopPanel,\n\t\tMenuPanel,\n\t\tStylePanel,\n\t\tToolbar,\n\t\tHelpMenu,\n\t\tNavigationPanel,\n\t\tHelperButtons,\n\t\tDebugPanel,\n\t\tToasts,\n\t\tDialogs,\n\t\tA11y,\n\t} = useTldrawUiComponents()\n\n\tuseKeyboardShortcuts()\n\tuseNativeClipboardEvents()\n\tuseEditorEvents()\n\n\tconst rIsEditingAnything = useRef(false)\n\tconst rHidingTimeout = useRef(-1 as any)\n\tconst [hideToolbarWhileEditing, setHideToolbarWhileEditing] = useState(false)\n\n\tuseReactor(\n\t\t'update hide toolbar while delayed',\n\t\t() => {\n\t\t\tconst isMobileEnvironment = tlenv.isIos || tlenv.isAndroid\n\t\t\tif (!isMobileEnvironment) return\n\n\t\t\tconst editingShape = editor.getEditingShapeId()\n\t\t\tif (editingShape === null) {\n\t\t\t\tif (rIsEditingAnything.current) {\n\t\t\t\t\trIsEditingAnything.current = false\n\t\t\t\t\tclearTimeout(rHidingTimeout.current)\n\t\t\t\t\tif (tlenv.isAndroid) {\n\t\t\t\t\t\t// On Android, hide it after 150ms\n\t\t\t\t\t\trHidingTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\tsetHideToolbarWhileEditing(false)\n\t\t\t\t\t\t}, 150)\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// On iOS, just hide it immediately\n\t\t\t\t\t\tsetHideToolbarWhileEditing(false)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (!rIsEditingAnything.current) {\n\t\t\t\trIsEditingAnything.current = true\n\t\t\t\tclearTimeout(rHidingTimeout.current)\n\t\t\t\tsetHideToolbarWhileEditing(true)\n\t\t\t}\n\t\t},\n\t\t[]\n\t)\n\n\tconst { 'toggle-focus-mode': toggleFocus } = useActions()\n\n\tconst { breakpointsAbove, breakpointsBelow } = useMemo(() => {\n\t\tconst breakpointsAbove = []\n\t\tconst breakpointsBelow = []\n\t\tfor (let bp = 0; bp < PORTRAIT_BREAKPOINTS.length; bp++) {\n\t\t\tif (bp <= breakpoint) {\n\t\t\t\tbreakpointsAbove.push(bp)\n\t\t\t} else {\n\t\t\t\tbreakpointsBelow.push(bp)\n\t\t\t}\n\t\t}\n\t\treturn { breakpointsAbove, breakpointsBelow }\n\t}, [breakpoint])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tlui-layout', {\n\t\t\t\t'tlui-layout__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,\n\t\t\t})}\n\t\t\t// When the virtual keyboard is opening we want it to hide immediately.\n\t\t\t// But when the virtual keyboard is closing we want to wait a bit before showing it again.\n\t\t\tdata-iseditinganything={hideToolbarWhileEditing}\n\t\t\tdata-breakpoint={breakpoint}\n\t\t\tdata-breakpoints-above={breakpointsAbove.join(' ')}\n\t\t\tdata-breakpoints-below={breakpointsBelow.join(' ')}\n\t\t>\n\t\t\t<SkipToMainContent />\n\t\t\t{isFocusMode ? (\n\t\t\t\t<div className=\"tlui-layout__top\">\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tclassName=\"tlui-focus-button\"\n\t\t\t\t\t\ttitle={msg('focus-mode.toggle-focus-mode')}\n\t\t\t\t\t\tonClick={() => toggleFocus.onSelect('menu')}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"dot\" />\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"tlui-layout__top\">\n\t\t\t\t\t\t<div className=\"tlui-layout__top__left\">\n\t\t\t\t\t\t\t{MenuPanel && <MenuPanel />}\n\t\t\t\t\t\t\t{HelperButtons && <HelperButtons />}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"tlui-layout__top__center\">{TopPanel && <TopPanel />}</div>\n\t\t\t\t\t\t<div className=\"tlui-layout__top__right\">\n\t\t\t\t\t\t\t{SharePanel && <SharePanel />}\n\t\t\t\t\t\t\t{StylePanel && breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (\n\t\t\t\t\t\t\t\t<StylePanel />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"tlui-layout__bottom\">\n\t\t\t\t\t\t<div className=\"tlui-layout__bottom__main\">\n\t\t\t\t\t\t\t{NavigationPanel && <NavigationPanel />}\n\t\t\t\t\t\t\t{Toolbar && <Toolbar />}\n\t\t\t\t\t\t\t{HelpMenu && <HelpMenu />}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{isDebugMode && DebugPanel && <DebugPanel />}\n\t\t\t\t\t\t{A11y && <A11y />}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t{Toasts && <Toasts />}\n\t\t\t{Dialogs && <Dialogs />}\n\t\t</div>\n\t)\n})\n\n/** @public @react */\nexport function TldrawUiInFrontOfTheCanvas() {\n\tconst { RichTextToolbar, ImageToolbar, VideoToolbar, CursorChatBubble, FollowingIndicator } =\n\t\tuseTldrawUiComponents()\n\n\treturn (\n\t\t<>\n\t\t\t{RichTextToolbar && <RichTextToolbar />}\n\t\t\t{ImageToolbar && <ImageToolbar />}\n\t\t\t{VideoToolbar && <VideoToolbar />}\n\t\t\t{FollowingIndicator && <FollowingIndicator />}\n\t\t\t{CursorChatBubble && <CursorChatBubble />}\n\t\t</>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { tlenv, useEditor, useReactor, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { ReactNode, useMemo, useRef, useState } from 'react'\nimport { TLUiAssetUrlOverrides } from './assetUrls'\nimport { SkipToMainContent } from './components/A11y'\nimport { TldrawUiButton } from './components/primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon'\nimport { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } from './constants'\nimport {\n\tTLUiContextProviderProps,\n\tTldrawUiContextProvider,\n} from './context/TldrawUiContextProvider'\nimport { useActions } from './context/actions'\nimport { useBreakpoint } from './context/breakpoints'\nimport { TLUiComponents, useTldrawUiComponents } from './context/components'\nimport { useNativeClipboardEvents } from './hooks/useClipboardEvents'\nimport { useEditorEvents } from './hooks/useEditorEvents'\nimport { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'\nimport { useReadonly } from './hooks/useReadonly'\nimport { useTranslation } from './hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TldrawUiProps extends TLUiContextProviderProps {\n\t/**\n\t * The component's children.\n\t */\n\tchildren?: ReactNode\n\n\t/**\n\t * Whether to hide the user interface and only display the canvas.\n\t */\n\thideUi?: boolean\n\n\t/**\n\t * Overrides for the UI components.\n\t */\n\tcomponents?: TLUiComponents\n\n\t/**\n\t * Additional items to add to the debug menu (will be deprecated)\n\t */\n\trenderDebugMenuItems?(): React.ReactNode\n\n\t/** Asset URL override. */\n\tassetUrls?: TLUiAssetUrlOverrides\n}\n\n/**\n * @public\n * @react\n */\nexport const TldrawUi = React.memo(function TldrawUi({\n\trenderDebugMenuItems,\n\tchildren,\n\thideUi,\n\tcomponents,\n\t...rest\n}: TldrawUiProps) {\n\treturn (\n\t\t<TldrawUiContextProvider {...rest} components={components}>\n\t\t\t<TldrawUiInner hideUi={hideUi} renderDebugMenuItems={renderDebugMenuItems}>\n\t\t\t\t{children}\n\t\t\t</TldrawUiInner>\n\t\t</TldrawUiContextProvider>\n\t)\n})\n\ninterface TldrawUiContentProps {\n\thideUi?: boolean\n\tshareZone?: ReactNode\n\ttopZone?: ReactNode\n\trenderDebugMenuItems?(): React.ReactNode\n}\n\nconst TldrawUiInner = React.memo(function TldrawUiInner({\n\tchildren,\n\thideUi,\n\t...rest\n}: TldrawUiContentProps & { children: ReactNode }) {\n\t// The hideUi prop should prevent the UI from mounting.\n\t// If we ever need want the UI to mount and preserve state, then\n\t// we should change this behavior and hide the UI via CSS instead.\n\n\t// Keyboard shortcuts and clipboard events should always be mounted,\n\t// even when the UI is hidden.\n\tuseKeyboardShortcuts()\n\tuseNativeClipboardEvents()\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t{hideUi ? null : <TldrawUiContent {...rest} />}\n\t\t</>\n\t)\n})\n\nconst TldrawUiContent = React.memo(function TldrawUI() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\tconst isFocusMode = useValue('focus', () => editor.getInstanceState().isFocusMode, [editor])\n\tconst isDebugMode = useValue('debug', () => editor.getInstanceState().isDebugMode, [editor])\n\n\tconst {\n\t\tSharePanel,\n\t\tTopPanel,\n\t\tMenuPanel,\n\t\tStylePanel,\n\t\tToolbar,\n\t\tHelpMenu,\n\t\tNavigationPanel,\n\t\tHelperButtons,\n\t\tDebugPanel,\n\t\tToasts,\n\t\tDialogs,\n\t\tA11y,\n\t} = useTldrawUiComponents()\n\n\tuseEditorEvents()\n\n\tconst rIsEditingAnything = useRef(false)\n\tconst rHidingTimeout = useRef(-1 as any)\n\tconst [hideToolbarWhileEditing, setHideToolbarWhileEditing] = useState(false)\n\n\tuseReactor(\n\t\t'update hide toolbar while delayed',\n\t\t() => {\n\t\t\tconst isMobileEnvironment = tlenv.isIos || tlenv.isAndroid\n\t\t\tif (!isMobileEnvironment) return\n\n\t\t\tconst editingShape = editor.getEditingShapeId()\n\t\t\tif (editingShape === null) {\n\t\t\t\tif (rIsEditingAnything.current) {\n\t\t\t\t\trIsEditingAnything.current = false\n\t\t\t\t\tclearTimeout(rHidingTimeout.current)\n\t\t\t\t\tif (tlenv.isAndroid) {\n\t\t\t\t\t\t// On Android, hide it after 150ms\n\t\t\t\t\t\trHidingTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\tsetHideToolbarWhileEditing(false)\n\t\t\t\t\t\t}, 150)\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// On iOS, just hide it immediately\n\t\t\t\t\t\tsetHideToolbarWhileEditing(false)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (!rIsEditingAnything.current) {\n\t\t\t\trIsEditingAnything.current = true\n\t\t\t\tclearTimeout(rHidingTimeout.current)\n\t\t\t\tsetHideToolbarWhileEditing(true)\n\t\t\t}\n\t\t},\n\t\t[]\n\t)\n\n\tconst { 'toggle-focus-mode': toggleFocus } = useActions()\n\n\tconst { breakpointsAbove, breakpointsBelow } = useMemo(() => {\n\t\tconst breakpointsAbove = []\n\t\tconst breakpointsBelow = []\n\t\tfor (let bp = 0; bp < PORTRAIT_BREAKPOINTS.length; bp++) {\n\t\t\tif (bp <= breakpoint) {\n\t\t\t\tbreakpointsAbove.push(bp)\n\t\t\t} else {\n\t\t\t\tbreakpointsBelow.push(bp)\n\t\t\t}\n\t\t}\n\t\treturn { breakpointsAbove, breakpointsBelow }\n\t}, [breakpoint])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tlui-layout', {\n\t\t\t\t'tlui-layout__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,\n\t\t\t})}\n\t\t\t// When the virtual keyboard is opening we want it to hide immediately.\n\t\t\t// But when the virtual keyboard is closing we want to wait a bit before showing it again.\n\t\t\tdata-iseditinganything={hideToolbarWhileEditing}\n\t\t\tdata-breakpoint={breakpoint}\n\t\t\tdata-breakpoints-above={breakpointsAbove.join(' ')}\n\t\t\tdata-breakpoints-below={breakpointsBelow.join(' ')}\n\t\t>\n\t\t\t<SkipToMainContent />\n\t\t\t{isFocusMode ? (\n\t\t\t\t<div className=\"tlui-layout__top\">\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tclassName=\"tlui-focus-button\"\n\t\t\t\t\t\ttitle={msg('focus-mode.toggle-focus-mode')}\n\t\t\t\t\t\tonClick={() => toggleFocus.onSelect('menu')}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"dot\" />\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"tlui-layout__top\">\n\t\t\t\t\t\t<div className=\"tlui-layout__top__left\">\n\t\t\t\t\t\t\t{MenuPanel && <MenuPanel />}\n\t\t\t\t\t\t\t{HelperButtons && <HelperButtons />}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"tlui-layout__top__center\">{TopPanel && <TopPanel />}</div>\n\t\t\t\t\t\t<div className=\"tlui-layout__top__right\">\n\t\t\t\t\t\t\t{SharePanel && <SharePanel />}\n\t\t\t\t\t\t\t{StylePanel && breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (\n\t\t\t\t\t\t\t\t<StylePanel />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"tlui-layout__bottom\">\n\t\t\t\t\t\t<div className=\"tlui-layout__bottom__main\">\n\t\t\t\t\t\t\t{NavigationPanel && <NavigationPanel />}\n\t\t\t\t\t\t\t{Toolbar && <Toolbar />}\n\t\t\t\t\t\t\t{HelpMenu && <HelpMenu />}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{isDebugMode && DebugPanel && <DebugPanel />}\n\t\t\t\t\t\t{A11y && <A11y />}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t{Toasts && <Toasts />}\n\t\t\t{Dialogs && <Dialogs />}\n\t\t</div>\n\t)\n})\n\n/** @public @react */\nexport function TldrawUiInFrontOfTheCanvas() {\n\tconst { RichTextToolbar, ImageToolbar, VideoToolbar, CursorChatBubble, FollowingIndicator } =\n\t\tuseTldrawUiComponents()\n\n\treturn (\n\t\t<>\n\t\t\t{RichTextToolbar && <RichTextToolbar />}\n\t\t\t{ImageToolbar && <ImageToolbar />}\n\t\t\t{VideoToolbar && <VideoToolbar />}\n\t\t\t{FollowingIndicator && <FollowingIndicator />}\n\t\t\t{CursorChatBubble && <CursorChatBubble />}\n\t\t</>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["TldrawUi", "TldrawUiInner", "breakpointsAbove", "breakpointsBelow"]
 }

package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs

@@ -1,5 +1,4 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEditor, useValue } from "@tldraw/editor";
 import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
 import { useBreakpoint } from "../../context/breakpoints.mjs";
 import {
@@ -10,6 +9,7 @@ import {
   useThreeStackableItems,
   useUnlockedSelectedShapesCount
 } from "../../hooks/menu-hooks.mjs";
+import { ZoomTo100MenuItem } from "../menu-items.mjs";
 import { TldrawUiMenuActionItem } from "../primitives/menus/TldrawUiMenuActionItem.mjs";
 function DefaultActionsMenuContent() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -71,11 +71,6 @@ function ZoomOrRotateMenuItem() {
   const breakpoint = useBreakpoint();
   return breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? /* @__PURE__ */ jsx(ZoomTo100MenuItem, {}) : /* @__PURE__ */ jsx(RotateCCWMenuItem, {});
 }
-function ZoomTo100MenuItem() {
-  const editor = useEditor();
-  const isZoomedTo100 = useValue("zoom is 1", () => editor.getZoomLevel() === 1, [editor]);
-  return /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "zoom-to-100", disabled: isZoomedTo100 });
-}
 function RotateCCWMenuItem() {
   const oneSelected = useUnlockedSelectedShapesCount(1);
   const isInSelectState = useIsInSelectState();
@@ -120,7 +115,6 @@ export {
   RotateCWMenuItem,
   StackMenuItems,
   UngroupMenuItem,
-  ZoomOrRotateMenuItem,
-  ZoomTo100MenuItem
+  ZoomOrRotateMenuItem
 };
 //# sourceMappingURL=DefaultActionsMenuContent.mjs.map

package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx"],
-  "sourcesContent": ["import { useEditor, useValue } from '@tldraw/editor'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport {\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseHasLinkShapeSelected,\n\tuseIsInSelectState,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../../hooks/menu-hooks'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\n\n/** @public @react */\nexport function DefaultActionsMenuContent() {\n\treturn (\n\t\t<>\n\t\t\t<AlignMenuItems />\n\t\t\t<DistributeMenuItems />\n\t\t\t<StackMenuItems />\n\t\t\t<ReorderMenuItems />\n\t\t\t<ZoomOrRotateMenuItem />\n\t\t\t<RotateCWMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<GroupOrUngroupMenuItem />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function AlignMenuItems() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = twoSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function DistributeMenuItems() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = threeSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StackMenuItems() {\n\tconst threeStackableItems = useThreeStackableItems()\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = threeStackableItems && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"stack-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stack-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuItems() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\n\nexport function ZoomOrRotateMenuItem() {\n\tconst breakpoint = useBreakpoint()\n\treturn breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? <ZoomTo100MenuItem /> : <RotateCCWMenuItem />\n}\n/** @public @react */\n\nexport function ZoomTo100MenuItem() {\n\tconst editor = useEditor()\n\tconst isZoomedTo100 = useValue('zoom is 1', () => editor.getZoomLevel() === 1, [editor])\n\n\treturn <TldrawUiMenuActionItem actionId=\"zoom-to-100\" disabled={isZoomedTo100} />\n}\n/** @public @react */\n\nexport function RotateCCWMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"rotate-ccw\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function RotateCWMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"rotate-cw\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function EditLinkMenuItem() {\n\tconst showEditLink = useHasLinkShapeSelected()\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = showEditLink && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function GroupOrUngroupMenuItem() {\n\tconst allowGroup = useAllowGroup()\n\tconst allowUngroup = useAllowUngroup()\n\treturn allowGroup ? <GroupMenuItem /> : allowUngroup ? <UngroupMenuItem /> : <GroupMenuItem />\n}\n/** @public @react */\n\nexport function GroupMenuItem() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = twoSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function UngroupMenuItem() {\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport {\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseHasLinkShapeSelected,\n\tuseIsInSelectState,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../../hooks/menu-hooks'\nimport { ZoomTo100MenuItem } from '../menu-items'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\n\n/** @public @react */\nexport function DefaultActionsMenuContent() {\n\treturn (\n\t\t<>\n\t\t\t<AlignMenuItems />\n\t\t\t<DistributeMenuItems />\n\t\t\t<StackMenuItems />\n\t\t\t<ReorderMenuItems />\n\t\t\t<ZoomOrRotateMenuItem />\n\t\t\t<RotateCWMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<GroupOrUngroupMenuItem />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function AlignMenuItems() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = twoSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function DistributeMenuItems() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = threeSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StackMenuItems() {\n\tconst threeStackableItems = useThreeStackableItems()\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = threeStackableItems && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"stack-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stack-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuItems() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\n\nexport function ZoomOrRotateMenuItem() {\n\tconst breakpoint = useBreakpoint()\n\treturn breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? <ZoomTo100MenuItem /> : <RotateCCWMenuItem />\n}\n/** @public @react */\n\nexport function RotateCCWMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"rotate-ccw\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function RotateCWMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"rotate-cw\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function EditLinkMenuItem() {\n\tconst showEditLink = useHasLinkShapeSelected()\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = showEditLink && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function GroupOrUngroupMenuItem() {\n\tconst allowGroup = useAllowGroup()\n\tconst allowUngroup = useAllowUngroup()\n\treturn allowGroup ? <GroupMenuItem /> : allowUngroup ? <UngroupMenuItem /> : <GroupMenuItem />\n}\n/** @public @react */\n\nexport function GroupMenuItem() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = twoSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function UngroupMenuItem() {\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/ui/components/ContextMenu/DefaultContextMenu.mjs

@@ -47,9 +47,7 @@ const DefaultContextMenu = memo(function DefaultContextMenu2({
         });
         if (editor.getInstanceState().isCoarsePointer) {
           const selectedShapes = editor.getSelectedShapes();
-          const {
-            inputs: { currentPagePoint }
-          } = editor;
+          const currentPagePoint = editor.inputs.getCurrentPagePoint();
           const shapesAtPoint = editor.getShapesAtPoint(currentPagePoint);
           if (
             // if there are no selected shapes

package/dist-esm/lib/ui/components/ContextMenu/DefaultContextMenu.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx"],
-  "sourcesContent": ["import { preventDefault, useContainer, useEditor, useEditorComponents } from '@tldraw/editor'\nimport { ContextMenu as _ContextMenu } from 'radix-ui'\nimport { ReactNode, memo, useCallback, useEffect } from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultContextMenuContent } from './DefaultContextMenuContent'\n\n/** @public */\nexport interface TLUiContextMenuProps {\n\tchildren?: ReactNode\n\tdisabled?: boolean\n}\n\n/** @public @react */\nexport const DefaultContextMenu = memo(function DefaultContextMenu({\n\tchildren,\n\tdisabled = false,\n}: TLUiContextMenuProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst { Canvas } = useEditorComponents()\n\n\t// When hitting `Escape` while the context menu is open, we want to prevent\n\t// the default behavior of losing focus on the shape. Otherwise,\n\t// it's pretty annoying from an accessibility perspective.\n\tconst preventEscapeFromLosingShapeFocus = useCallback(\n\t\t(e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\te.stopPropagation()\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\t// Cleanup the event listener when the component unmounts.\n\t\t\tdocument.body.removeEventListener('keydown', preventEscapeFromLosingShapeFocus, {\n\t\t\t\tcapture: true,\n\t\t\t})\n\t\t}\n\t}, [preventEscapeFromLosingShapeFocus])\n\n\tconst cb = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\t\t\t\tif (onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape)) {\n\t\t\t\t\teditor.setSelectedShapes([])\n\t\t\t\t}\n\n\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\tdocument.body.removeEventListener('keydown', preventEscapeFromLosingShapeFocus, {\n\t\t\t\t\t\tcapture: true,\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t} else {\n\t\t\t\tdocument.body.addEventListener('keydown', preventEscapeFromLosingShapeFocus, {\n\t\t\t\t\tcapture: true,\n\t\t\t\t})\n\n\t\t\t\t// Weird route: selecting locked shapes on long press\n\t\t\t\tif (editor.getInstanceState().isCoarsePointer) {\n\t\t\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\t\t\tconst {\n\t\t\t\t\t\tinputs: { currentPagePoint },\n\t\t\t\t\t} = editor\n\n\t\t\t\t\t// get all of the shapes under the current pointer\n\t\t\t\t\tconst shapesAtPoint = editor.getShapesAtPoint(currentPagePoint)\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t// if there are no selected shapes\n\t\t\t\t\t\t!editor.getSelectedShapes().length ||\n\t\t\t\t\t\t// OR if none of the shapes at the point include the selected shape\n\t\t\t\t\t\t!shapesAtPoint.some((s) => selectedShapes.includes(s))\n\t\t\t\t\t) {\n\t\t\t\t\t\t// then are there any locked shapes under the current pointer?\n\t\t\t\t\t\tconst lockedShapes = shapesAtPoint.filter((s) => editor.isShapeOrAncestorLocked(s))\n\n\t\t\t\t\t\tif (lockedShapes.length) {\n\t\t\t\t\t\t\t// nice, let's select them\n\t\t\t\t\t\t\teditor.select(...lockedShapes.map((s) => s.id))\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, preventEscapeFromLosingShapeFocus]\n\t)\n\n\tconst container = useContainer()\n\tconst [isOpen, handleOpenChange] = useMenuIsOpen('context menu', cb)\n\n\t// Get the context menu content, either the default component or the user's\n\t// override. If there's no menu content, then the user has set it to null,\n\t// so skip rendering the menu.\n\tconst content = children ?? <DefaultContextMenuContent />\n\n\treturn (\n\t\t<_ContextMenu.Root dir=\"ltr\" onOpenChange={handleOpenChange} modal={false}>\n\t\t\t<_ContextMenu.Trigger onContextMenu={undefined} dir=\"ltr\" disabled={disabled}>\n\t\t\t\t{Canvas ? <Canvas /> : null}\n\t\t\t</_ContextMenu.Trigger>\n\t\t\t{isOpen && (\n\t\t\t\t<_ContextMenu.Portal container={container}>\n\t\t\t\t\t<_ContextMenu.Content\n\t\t\t\t\t\tclassName=\"tlui-menu tlui-scrollable\"\n\t\t\t\t\t\tdata-testid=\"context-menu\"\n\t\t\t\t\t\taria-label={msg('context-menu.title')}\n\t\t\t\t\t\talignOffset={-4}\n\t\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t\t\tonContextMenu={preventDefault}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"context-menu\" sourceId=\"context-menu\">\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t</_ContextMenu.Content>\n\t\t\t\t</_ContextMenu.Portal>\n\t\t\t)}\n\t\t</_ContextMenu.Root>\n\t)\n})\n"],
-  "mappings": "AAqG6B,cAG3B,YAH2B;AArG7B,SAAS,gBAAgB,cAAc,WAAW,2BAA2B;AAC7E,SAAS,eAAe,oBAAoB;AAC5C,SAAoB,MAAM,aAAa,iBAAiB;AACxD,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;AASnC,MAAM,qBAAqB,KAAK,SAASA,oBAAmB;AAAA,EAClE;AAAA,EACA,WAAW;AACZ,GAAyB;AACxB,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,EAAE,OAAO,IAAI,oBAAoB;AAKvC,QAAM,oCAAoC;AAAA,IACzC,CAAC,MAAqB;AACrB,UAAI,EAAE,QAAQ,UAAU;AACvB,UAAE,gBAAgB;AAClB,eAAO,aAAa,EAAE,MAAM;AAAA,MAC7B;AAAA,IACD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,YAAU,MAAM;AACf,WAAO,MAAM;AAEZ,eAAS,KAAK,oBAAoB,WAAW,mCAAmC;AAAA,QAC/E,SAAS;AAAA,MACV,CAAC;AAAA,IACF;AAAA,EACD,GAAG,CAAC,iCAAiC,CAAC;AAEtC,QAAM,KAAK;AAAA,IACV,CAACC,YAAoB;AACpB,UAAI,CAACA,SAAQ;AACZ,cAAM,oBAAoB,OAAO,qBAAqB;AAEtD,YAAI,qBAAqB,OAAO,wBAAwB,iBAAiB,GAAG;AAC3E,iBAAO,kBAAkB,CAAC,CAAC;AAAA,QAC5B;AAEA,eAAO,OAAO,sBAAsB,MAAM;AACzC,mBAAS,KAAK,oBAAoB,WAAW,mCAAmC;AAAA,YAC/E,SAAS;AAAA,UACV,CAAC;AAAA,QACF,CAAC;AAAA,MACF,OAAO;AACN,iBAAS,KAAK,iBAAiB,WAAW,mCAAmC;AAAA,UAC5E,SAAS;AAAA,QACV,CAAC;AAGD,YAAI,OAAO,iBAAiB,EAAE,iBAAiB;AAC9C,gBAAM,iBAAiB,OAAO,kBAAkB;AAChD,gBAAM;AAAA,YACL,QAAQ,EAAE,iBAAiB;AAAA,UAC5B,IAAI;AAGJ,gBAAM,gBAAgB,OAAO,iBAAiB,gBAAgB;AAE9D;AAAA;AAAA,YAEC,CAAC,OAAO,kBAAkB,EAAE;AAAA,YAE5B,CAAC,cAAc,KAAK,CAAC,MAAM,eAAe,SAAS,CAAC,CAAC;AAAA,YACpD;AAED,kBAAM,eAAe,cAAc,OAAO,CAAC,MAAM,OAAO,wBAAwB,CAAC,CAAC;AAElF,gBAAI,aAAa,QAAQ;AAExB,qBAAO,OAAO,GAAG,aAAa,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAAA,YAC/C;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,iCAAiC;AAAA,EAC3C;AAEA,QAAM,YAAY,aAAa;AAC/B,QAAM,CAAC,QAAQ,gBAAgB,IAAI,cAAc,gBAAgB,EAAE;AAKnE,QAAM,UAAU,YAAY,oBAAC,6BAA0B;AAEvD,SACC,qBAAC,aAAa,MAAb,EAAkB,KAAI,OAAM,cAAc,kBAAkB,OAAO,OACnE;AAAA,wBAAC,aAAa,SAAb,EAAqB,eAAe,QAAW,KAAI,OAAM,UACxD,mBAAS,oBAAC,UAAO,IAAK,MACxB;AAAA,IACC,UACA,oBAAC,aAAa,QAAb,EAAoB,WACpB;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,IAAI,oBAAoB;AAAA,QACpC,aAAa;AAAA,QACb,kBAAkB;AAAA,QAClB,eAAe;AAAA,QAEf,8BAAC,+BAA4B,MAAK,gBAAe,UAAS,gBACxD,mBACF;AAAA;AAAA,IACD,GACD;AAAA,KAEF;AAEF,CAAC;",
+  "sourcesContent": ["import { preventDefault, useContainer, useEditor, useEditorComponents } from '@tldraw/editor'\nimport { ContextMenu as _ContextMenu } from 'radix-ui'\nimport { ReactNode, memo, useCallback, useEffect } from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultContextMenuContent } from './DefaultContextMenuContent'\n\n/** @public */\nexport interface TLUiContextMenuProps {\n\tchildren?: ReactNode\n\tdisabled?: boolean\n}\n\n/** @public @react */\nexport const DefaultContextMenu = memo(function DefaultContextMenu({\n\tchildren,\n\tdisabled = false,\n}: TLUiContextMenuProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst { Canvas } = useEditorComponents()\n\n\t// When hitting `Escape` while the context menu is open, we want to prevent\n\t// the default behavior of losing focus on the shape. Otherwise,\n\t// it's pretty annoying from an accessibility perspective.\n\tconst preventEscapeFromLosingShapeFocus = useCallback(\n\t\t(e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\te.stopPropagation()\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\t// Cleanup the event listener when the component unmounts.\n\t\t\tdocument.body.removeEventListener('keydown', preventEscapeFromLosingShapeFocus, {\n\t\t\t\tcapture: true,\n\t\t\t})\n\t\t}\n\t}, [preventEscapeFromLosingShapeFocus])\n\n\tconst cb = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\t\t\t\tif (onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape)) {\n\t\t\t\t\teditor.setSelectedShapes([])\n\t\t\t\t}\n\n\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\tdocument.body.removeEventListener('keydown', preventEscapeFromLosingShapeFocus, {\n\t\t\t\t\t\tcapture: true,\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t} else {\n\t\t\t\tdocument.body.addEventListener('keydown', preventEscapeFromLosingShapeFocus, {\n\t\t\t\t\tcapture: true,\n\t\t\t\t})\n\n\t\t\t\t// Weird route: selecting locked shapes on long press\n\t\t\t\tif (editor.getInstanceState().isCoarsePointer) {\n\t\t\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\t\t\tconst currentPagePoint = editor.inputs.getCurrentPagePoint()\n\n\t\t\t\t\t// get all of the shapes under the current pointer\n\t\t\t\t\tconst shapesAtPoint = editor.getShapesAtPoint(currentPagePoint)\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t// if there are no selected shapes\n\t\t\t\t\t\t!editor.getSelectedShapes().length ||\n\t\t\t\t\t\t// OR if none of the shapes at the point include the selected shape\n\t\t\t\t\t\t!shapesAtPoint.some((s) => selectedShapes.includes(s))\n\t\t\t\t\t) {\n\t\t\t\t\t\t// then are there any locked shapes under the current pointer?\n\t\t\t\t\t\tconst lockedShapes = shapesAtPoint.filter((s) => editor.isShapeOrAncestorLocked(s))\n\n\t\t\t\t\t\tif (lockedShapes.length) {\n\t\t\t\t\t\t\t// nice, let's select them\n\t\t\t\t\t\t\teditor.select(...lockedShapes.map((s) => s.id))\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, preventEscapeFromLosingShapeFocus]\n\t)\n\n\tconst container = useContainer()\n\tconst [isOpen, handleOpenChange] = useMenuIsOpen('context menu', cb)\n\n\t// Get the context menu content, either the default component or the user's\n\t// override. If there's no menu content, then the user has set it to null,\n\t// so skip rendering the menu.\n\tconst content = children ?? <DefaultContextMenuContent />\n\n\treturn (\n\t\t<_ContextMenu.Root dir=\"ltr\" onOpenChange={handleOpenChange} modal={false}>\n\t\t\t<_ContextMenu.Trigger onContextMenu={undefined} dir=\"ltr\" disabled={disabled}>\n\t\t\t\t{Canvas ? <Canvas /> : null}\n\t\t\t</_ContextMenu.Trigger>\n\t\t\t{isOpen && (\n\t\t\t\t<_ContextMenu.Portal container={container}>\n\t\t\t\t\t<_ContextMenu.Content\n\t\t\t\t\t\tclassName=\"tlui-menu tlui-scrollable\"\n\t\t\t\t\t\tdata-testid=\"context-menu\"\n\t\t\t\t\t\taria-label={msg('context-menu.title')}\n\t\t\t\t\t\talignOffset={-4}\n\t\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t\t\tonContextMenu={preventDefault}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"context-menu\" sourceId=\"context-menu\">\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t</_ContextMenu.Content>\n\t\t\t\t</_ContextMenu.Portal>\n\t\t\t)}\n\t\t</_ContextMenu.Root>\n\t)\n})\n"],
+  "mappings": "AAmG6B,cAG3B,YAH2B;AAnG7B,SAAS,gBAAgB,cAAc,WAAW,2BAA2B;AAC7E,SAAS,eAAe,oBAAoB;AAC5C,SAAoB,MAAM,aAAa,iBAAiB;AACxD,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;AASnC,MAAM,qBAAqB,KAAK,SAASA,oBAAmB;AAAA,EAClE;AAAA,EACA,WAAW;AACZ,GAAyB;AACxB,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,EAAE,OAAO,IAAI,oBAAoB;AAKvC,QAAM,oCAAoC;AAAA,IACzC,CAAC,MAAqB;AACrB,UAAI,EAAE,QAAQ,UAAU;AACvB,UAAE,gBAAgB;AAClB,eAAO,aAAa,EAAE,MAAM;AAAA,MAC7B;AAAA,IACD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,YAAU,MAAM;AACf,WAAO,MAAM;AAEZ,eAAS,KAAK,oBAAoB,WAAW,mCAAmC;AAAA,QAC/E,SAAS;AAAA,MACV,CAAC;AAAA,IACF;AAAA,EACD,GAAG,CAAC,iCAAiC,CAAC;AAEtC,QAAM,KAAK;AAAA,IACV,CAACC,YAAoB;AACpB,UAAI,CAACA,SAAQ;AACZ,cAAM,oBAAoB,OAAO,qBAAqB;AAEtD,YAAI,qBAAqB,OAAO,wBAAwB,iBAAiB,GAAG;AAC3E,iBAAO,kBAAkB,CAAC,CAAC;AAAA,QAC5B;AAEA,eAAO,OAAO,sBAAsB,MAAM;AACzC,mBAAS,KAAK,oBAAoB,WAAW,mCAAmC;AAAA,YAC/E,SAAS;AAAA,UACV,CAAC;AAAA,QACF,CAAC;AAAA,MACF,OAAO;AACN,iBAAS,KAAK,iBAAiB,WAAW,mCAAmC;AAAA,UAC5E,SAAS;AAAA,QACV,CAAC;AAGD,YAAI,OAAO,iBAAiB,EAAE,iBAAiB;AAC9C,gBAAM,iBAAiB,OAAO,kBAAkB;AAChD,gBAAM,mBAAmB,OAAO,OAAO,oBAAoB;AAG3D,gBAAM,gBAAgB,OAAO,iBAAiB,gBAAgB;AAE9D;AAAA;AAAA,YAEC,CAAC,OAAO,kBAAkB,EAAE;AAAA,YAE5B,CAAC,cAAc,KAAK,CAAC,MAAM,eAAe,SAAS,CAAC,CAAC;AAAA,YACpD;AAED,kBAAM,eAAe,cAAc,OAAO,CAAC,MAAM,OAAO,wBAAwB,CAAC,CAAC;AAElF,gBAAI,aAAa,QAAQ;AAExB,qBAAO,OAAO,GAAG,aAAa,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAAA,YAC/C;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,iCAAiC;AAAA,EAC3C;AAEA,QAAM,YAAY,aAAa;AAC/B,QAAM,CAAC,QAAQ,gBAAgB,IAAI,cAAc,gBAAgB,EAAE;AAKnE,QAAM,UAAU,YAAY,oBAAC,6BAA0B;AAEvD,SACC,qBAAC,aAAa,MAAb,EAAkB,KAAI,OAAM,cAAc,kBAAkB,OAAO,OACnE;AAAA,wBAAC,aAAa,SAAb,EAAqB,eAAe,QAAW,KAAI,OAAM,UACxD,mBAAS,oBAAC,UAAO,IAAK,MACxB;AAAA,IACC,UACA,oBAAC,aAAa,QAAb,EAAoB,WACpB;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,cAAY,IAAI,oBAAoB;AAAA,QACpC,aAAa;AAAA,QACb,kBAAkB;AAAA,QAClB,eAAe;AAAA,QAEf,8BAAC,+BAA4B,MAAK,gBAAe,UAAS,gBACxD,mBACF;AAAA;AAAA,IACD,GACD;AAAA,KAEF;AAEF,CAAC;",
   "names": ["DefaultContextMenu", "isOpen"]
 }

package/dist-esm/lib/ui/components/CursorChatBubble.mjs

@@ -38,7 +38,7 @@ function usePositionBubble(ref) {
   useLayoutEffect(() => {
     const elm = ref.current;
     if (!elm) return;
-    const { x, y } = editor.inputs.currentScreenPoint;
+    const { x, y } = editor.inputs.getCurrentScreenPoint();
     ref.current?.style.setProperty("transform", `translate(${x}px, ${y}px)`);
     function positionChatBubble(e) {
       const { minX, minY } = editor.getViewportScreenBounds();

package/dist-esm/lib/ui/components/CursorChatBubble.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/CursorChatBubble.tsx"],
-  "sourcesContent": ["import { preventDefault, track, useEditor } from '@tldraw/editor'\nimport {\n\tChangeEvent,\n\tClipboardEvent,\n\tKeyboardEvent,\n\tRefObject,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\n\n// todo:\n// - not cleaning up\nconst CHAT_MESSAGE_TIMEOUT_CLOSING = 2000\nconst CHAT_MESSAGE_TIMEOUT_CHATTING = 5000\n\nexport const CursorChatBubble = track(function CursorChatBubble() {\n\tconst editor = useEditor()\n\tconst { isChatting, chatMessage } = editor.getInstanceState()\n\n\tconst rTimeout = useRef<any>(-1)\n\tconst [value, setValue] = useState('')\n\n\tuseEffect(() => {\n\t\tconst closingUp = !isChatting && chatMessage\n\t\tif (closingUp || isChatting) {\n\t\t\tconst duration = isChatting ? CHAT_MESSAGE_TIMEOUT_CHATTING : CHAT_MESSAGE_TIMEOUT_CLOSING\n\t\t\trTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\teditor.updateInstanceState({ chatMessage: '', isChatting: false })\n\t\t\t\tsetValue('')\n\t\t\t\teditor.focus()\n\t\t\t}, duration)\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearTimeout(rTimeout.current)\n\t\t}\n\t}, [editor, chatMessage, isChatting])\n\n\tif (isChatting)\n\t\treturn <CursorChatInput value={value} setValue={setValue} chatMessage={chatMessage} />\n\n\treturn chatMessage.trim() ? <NotEditingChatMessage chatMessage={chatMessage} /> : null\n})\n\nfunction usePositionBubble(ref: RefObject<HTMLInputElement>) {\n\tconst editor = useEditor()\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\tconst { x, y } = editor.inputs.currentScreenPoint\n\t\tref.current?.style.setProperty('transform', `translate(${x}px, ${y}px)`)\n\n\t\t// Positioning the chat bubble\n\t\tfunction positionChatBubble(e: PointerEvent) {\n\t\t\tconst { minX, minY } = editor.getViewportScreenBounds()\n\t\t\tref.current?.style.setProperty(\n\t\t\t\t'transform',\n\t\t\t\t`translate(${e.clientX - minX}px, ${e.clientY - minY}px)`\n\t\t\t)\n\t\t}\n\n\t\twindow.addEventListener('pointermove', positionChatBubble)\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('pointermove', positionChatBubble)\n\t\t}\n\t}, [ref, editor])\n}\n\nconst NotEditingChatMessage = ({ chatMessage }: { chatMessage: string }) => {\n\tconst editor = useEditor()\n\tconst ref = useRef<HTMLInputElement>(null)\n\n\tusePositionBubble(ref)\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName=\"tl-cursor-chat tl-cursor-chat__bubble\"\n\t\t\tstyle={{ backgroundColor: editor.user.getColor() }}\n\t\t>\n\t\t\t{chatMessage}\n\t\t</div>\n\t)\n}\n\nconst CursorChatInput = track(function CursorChatInput({\n\tchatMessage,\n\tvalue,\n\tsetValue,\n}: {\n\tchatMessage: string\n\tvalue: string\n\tsetValue(value: string): void\n}) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst placeholder = chatMessage || msg('cursor-chat.type-to-chat')\n\n\tusePositionBubble(ref)\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\tconst textMeasurement = editor.textMeasure.measureText(value || placeholder, {\n\t\t\tfontFamily: 'var(--font-body)',\n\t\t\tfontSize: 12,\n\t\t\tfontWeight: '500',\n\t\t\tfontStyle: 'normal',\n\t\t\tmaxWidth: null,\n\t\t\tlineHeight: 1,\n\t\t\tpadding: '6px',\n\t\t})\n\n\t\telm.style.setProperty('width', textMeasurement.w + 'px')\n\t}, [editor, value, placeholder])\n\n\tuseLayoutEffect(() => {\n\t\t// Focus the input\n\t\tconst raf = editor.timers.requestAnimationFrame(() => {\n\t\t\tref.current?.focus()\n\t\t})\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(raf)\n\t\t}\n\t}, [editor])\n\n\tconst stopChatting = useCallback(() => {\n\t\teditor.updateInstanceState({ isChatting: false })\n\t\teditor.focus()\n\t}, [editor])\n\n\t// Update the chat message as the user types\n\tconst handleChange = useCallback(\n\t\t(e: ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst { value } = e.target\n\t\t\tsetValue(value.slice(0, 64))\n\t\t\teditor.updateInstanceState({ chatMessage: value })\n\t\t},\n\t\t[editor, setValue]\n\t)\n\n\t// Handle some keyboard shortcuts\n\tconst handleKeyDown = useCallback(\n\t\t(e: KeyboardEvent) => {\n\t\t\tconst elm = ref.current\n\t\t\tif (!elm) return\n\n\t\t\t// get this from the element so that this hook doesn't depend on value\n\t\t\tconst { value: currentValue } = elm\n\n\t\t\tswitch (e.key) {\n\t\t\t\tcase 'Enter': {\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\te.stopPropagation()\n\n\t\t\t\t\t// If the user hasn't typed anything, stop chatting\n\t\t\t\t\tif (!currentValue) {\n\t\t\t\t\t\tstopChatting()\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\n\t\t\t\t\t// Otherwise, 'send' the message\n\t\t\t\t\tsetValue('')\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'Escape': {\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tstopChatting()\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[stopChatting, setValue]\n\t)\n\n\tconst handlePaste = useCallback((e: ClipboardEvent) => {\n\t\te.stopPropagation()\n\t}, [])\n\n\treturn (\n\t\t<input\n\t\t\tref={ref}\n\t\t\tclassName={`tl-cursor-chat`}\n\t\t\tstyle={{ backgroundColor: editor.user.getColor() }}\n\t\t\tonBlur={stopChatting}\n\t\t\tonChange={handleChange}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tonPaste={handlePaste}\n\t\t\tvalue={value}\n\t\t\tplaceholder={placeholder}\n\t\t\tspellCheck={false}\n\t\t/>\n\t)\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { preventDefault, track, useEditor } from '@tldraw/editor'\nimport {\n\tChangeEvent,\n\tClipboardEvent,\n\tKeyboardEvent,\n\tRefObject,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\n\n// todo:\n// - not cleaning up\nconst CHAT_MESSAGE_TIMEOUT_CLOSING = 2000\nconst CHAT_MESSAGE_TIMEOUT_CHATTING = 5000\n\nexport const CursorChatBubble = track(function CursorChatBubble() {\n\tconst editor = useEditor()\n\tconst { isChatting, chatMessage } = editor.getInstanceState()\n\n\tconst rTimeout = useRef<any>(-1)\n\tconst [value, setValue] = useState('')\n\n\tuseEffect(() => {\n\t\tconst closingUp = !isChatting && chatMessage\n\t\tif (closingUp || isChatting) {\n\t\t\tconst duration = isChatting ? CHAT_MESSAGE_TIMEOUT_CHATTING : CHAT_MESSAGE_TIMEOUT_CLOSING\n\t\t\trTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\teditor.updateInstanceState({ chatMessage: '', isChatting: false })\n\t\t\t\tsetValue('')\n\t\t\t\teditor.focus()\n\t\t\t}, duration)\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearTimeout(rTimeout.current)\n\t\t}\n\t}, [editor, chatMessage, isChatting])\n\n\tif (isChatting)\n\t\treturn <CursorChatInput value={value} setValue={setValue} chatMessage={chatMessage} />\n\n\treturn chatMessage.trim() ? <NotEditingChatMessage chatMessage={chatMessage} /> : null\n})\n\nfunction usePositionBubble(ref: RefObject<HTMLInputElement | null>) {\n\tconst editor = useEditor()\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\tconst { x, y } = editor.inputs.getCurrentScreenPoint()\n\t\tref.current?.style.setProperty('transform', `translate(${x}px, ${y}px)`)\n\n\t\t// Positioning the chat bubble\n\t\tfunction positionChatBubble(e: PointerEvent) {\n\t\t\tconst { minX, minY } = editor.getViewportScreenBounds()\n\t\t\tref.current?.style.setProperty(\n\t\t\t\t'transform',\n\t\t\t\t`translate(${e.clientX - minX}px, ${e.clientY - minY}px)`\n\t\t\t)\n\t\t}\n\n\t\twindow.addEventListener('pointermove', positionChatBubble)\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('pointermove', positionChatBubble)\n\t\t}\n\t}, [ref, editor])\n}\n\nconst NotEditingChatMessage = ({ chatMessage }: { chatMessage: string }) => {\n\tconst editor = useEditor()\n\tconst ref = useRef<HTMLInputElement>(null)\n\n\tusePositionBubble(ref)\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName=\"tl-cursor-chat tl-cursor-chat__bubble\"\n\t\t\tstyle={{ backgroundColor: editor.user.getColor() }}\n\t\t>\n\t\t\t{chatMessage}\n\t\t</div>\n\t)\n}\n\nconst CursorChatInput = track(function CursorChatInput({\n\tchatMessage,\n\tvalue,\n\tsetValue,\n}: {\n\tchatMessage: string\n\tvalue: string\n\tsetValue(value: string): void\n}) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst placeholder = chatMessage || msg('cursor-chat.type-to-chat')\n\n\tusePositionBubble(ref)\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\tconst textMeasurement = editor.textMeasure.measureText(value || placeholder, {\n\t\t\tfontFamily: 'var(--font-body)',\n\t\t\tfontSize: 12,\n\t\t\tfontWeight: '500',\n\t\t\tfontStyle: 'normal',\n\t\t\tmaxWidth: null,\n\t\t\tlineHeight: 1,\n\t\t\tpadding: '6px',\n\t\t})\n\n\t\telm.style.setProperty('width', textMeasurement.w + 'px')\n\t}, [editor, value, placeholder])\n\n\tuseLayoutEffect(() => {\n\t\t// Focus the input\n\t\tconst raf = editor.timers.requestAnimationFrame(() => {\n\t\t\tref.current?.focus()\n\t\t})\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(raf)\n\t\t}\n\t}, [editor])\n\n\tconst stopChatting = useCallback(() => {\n\t\teditor.updateInstanceState({ isChatting: false })\n\t\teditor.focus()\n\t}, [editor])\n\n\t// Update the chat message as the user types\n\tconst handleChange = useCallback(\n\t\t(e: ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst { value } = e.target\n\t\t\tsetValue(value.slice(0, 64))\n\t\t\teditor.updateInstanceState({ chatMessage: value })\n\t\t},\n\t\t[editor, setValue]\n\t)\n\n\t// Handle some keyboard shortcuts\n\tconst handleKeyDown = useCallback(\n\t\t(e: KeyboardEvent) => {\n\t\t\tconst elm = ref.current\n\t\t\tif (!elm) return\n\n\t\t\t// get this from the element so that this hook doesn't depend on value\n\t\t\tconst { value: currentValue } = elm\n\n\t\t\tswitch (e.key) {\n\t\t\t\tcase 'Enter': {\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\te.stopPropagation()\n\n\t\t\t\t\t// If the user hasn't typed anything, stop chatting\n\t\t\t\t\tif (!currentValue) {\n\t\t\t\t\t\tstopChatting()\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\n\t\t\t\t\t// Otherwise, 'send' the message\n\t\t\t\t\tsetValue('')\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'Escape': {\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tstopChatting()\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[stopChatting, setValue]\n\t)\n\n\tconst handlePaste = useCallback((e: ClipboardEvent) => {\n\t\te.stopPropagation()\n\t}, [])\n\n\treturn (\n\t\t<input\n\t\t\tref={ref}\n\t\t\tclassName={`tl-cursor-chat`}\n\t\t\tstyle={{ backgroundColor: editor.user.getColor() }}\n\t\t\tonBlur={stopChatting}\n\t\t\tonChange={handleChange}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tonPaste={handlePaste}\n\t\t\tvalue={value}\n\t\t\tplaceholder={placeholder}\n\t\t\tspellCheck={false}\n\t\t/>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["CursorChatBubble", "CursorChatInput", "value"]
 }

package/dist-esm/lib/ui/components/DefaultDebugPanel.mjs

@@ -1,13 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  debugFlags,
-  track,
-  useEditor,
-  usePassThroughWheelEvents,
-  useValue,
-  Vec
-} from "@tldraw/editor";
-import { memo, useEffect, useRef, useState } from "react";
+import { debugFlags, track, useEditor, usePassThroughWheelEvents, useValue } from "@tldraw/editor";
+import { memo, useEffect, useRef } from "react";
 import { useTldrawUiComponents } from "../context/components.mjs";
 const DefaultDebugPanel = memo(function DefaultDebugPanel2() {
   const { DebugMenu } = useTldrawUiComponents();
@@ -19,30 +12,10 @@ const DefaultDebugPanel = memo(function DefaultDebugPanel2() {
     DebugMenu && /* @__PURE__ */ jsx(DebugMenu, {})
   ] });
 });
-function useTick(isEnabled = true) {
-  const [_, setTick] = useState(0);
-  const editor = useEditor();
-  useEffect(() => {
-    if (!isEnabled) return;
-    const update = () => setTick((tick) => tick + 1);
-    editor.on("tick", update);
-    return () => {
-      editor.off("tick", update);
-    };
-  }, [editor, isEnabled]);
-}
 const CurrentState = track(function CurrentState2() {
-  useTick();
   const editor = useEditor();
   const path = editor.getPath();
-  const hoverShape = editor.getHoveredShape();
-  const selectedShape = editor.getOnlySelectedShape();
-  const shape = path === "select.idle" || !path.includes("select.") ? hoverShape : selectedShape;
-  const shapeInfo = shape && path.includes("select.") ? ` / ${shape.type || ""}${"geo" in shape.props ? " / " + shape.props.geo : ""} / [${Vec.ToInt(editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint))}]` : "";
-  const ruler = path.startsWith("select.") && !path.includes(".idle") ? ` / [${Vec.ToInt(editor.inputs.originPagePoint)}] \u2192 [${Vec.ToInt(
-    editor.inputs.currentPagePoint
-  )}] = ${Vec.Dist(editor.inputs.originPagePoint, editor.inputs.currentPagePoint).toFixed(0)}` : "";
-  return /* @__PURE__ */ jsx("div", { className: "tlui-debug-panel__current-state", children: `${path}${shapeInfo}${ruler}` });
+  return /* @__PURE__ */ jsx("div", { className: "tlui-debug-panel__current-state", children: `${path}` });
 });
 function FPS() {
   const editor = useEditor();
@@ -71,7 +44,7 @@ function FPS() {
         if (fps < slowFps && !isSlow || fps >= slowFps && isSlow) {
           isSlow = !isSlow;
         }
-        fpsRef.current.innerHTML = `FPS ${fps.toString()}`;
+        fpsRef.current.innerHTML = `FPS ${fps.toString()} (max: ${maxKnownFps})`;
         fpsRef.current.className = `tlui-debug-panel__fps` + (isSlow ? ` tlui-debug-panel__fps__slow` : ``);
         currentTickLength -= TICK_LENGTH;
         framesInCurrentTick = 0;

package/dist-esm/lib/ui/components/DefaultDebugPanel.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/DefaultDebugPanel.tsx"],
-  "sourcesContent": ["import {\n\tdebugFlags,\n\ttrack,\n\tuseEditor,\n\tusePassThroughWheelEvents,\n\tuseValue,\n\tVec,\n} from '@tldraw/editor'\nimport { memo, useEffect, useRef, useState } from 'react'\nimport { useTldrawUiComponents } from '../context/components'\n\n/** @internal */\nexport const DefaultDebugPanel = memo(function DefaultDebugPanel() {\n\tconst { DebugMenu } = useTldrawUiComponents()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\treturn (\n\t\t<footer ref={ref} className=\"tlui-debug-panel\">\n\t\t\t<CurrentState />\n\t\t\t<FPS />\n\t\t\t{DebugMenu && <DebugMenu />}\n\t\t</footer>\n\t)\n})\n\nfunction useTick(isEnabled = true) {\n\tconst [_, setTick] = useState(0)\n\tconst editor = useEditor()\n\tuseEffect(() => {\n\t\tif (!isEnabled) return\n\t\tconst update = () => setTick((tick) => tick + 1)\n\t\teditor.on('tick', update)\n\t\treturn () => {\n\t\t\teditor.off('tick', update)\n\t\t}\n\t}, [editor, isEnabled])\n}\n\nconst CurrentState = track(function CurrentState() {\n\tuseTick()\n\n\tconst editor = useEditor()\n\n\tconst path = editor.getPath()\n\tconst hoverShape = editor.getHoveredShape()\n\tconst selectedShape = editor.getOnlySelectedShape()\n\tconst shape = path === 'select.idle' || !path.includes('select.') ? hoverShape : selectedShape\n\tconst shapeInfo =\n\t\tshape && path.includes('select.')\n\t\t\t? ` / ${shape.type || ''}${\n\t\t\t\t\t'geo' in shape.props ? ' / ' + shape.props.geo : ''\n\t\t\t\t} / [${Vec.ToInt(editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint))}]`\n\t\t\t: ''\n\tconst ruler =\n\t\tpath.startsWith('select.') && !path.includes('.idle')\n\t\t\t? ` / [${Vec.ToInt(editor.inputs.originPagePoint)}] \u2192 [${Vec.ToInt(\n\t\t\t\t\teditor.inputs.currentPagePoint\n\t\t\t\t)}] = ${Vec.Dist(editor.inputs.originPagePoint, editor.inputs.currentPagePoint).toFixed(0)}`\n\t\t\t: ''\n\n\treturn <div className=\"tlui-debug-panel__current-state\">{`${path}${shapeInfo}${ruler}`}</div>\n})\n\nfunction FPS() {\n\tconst editor = useEditor()\n\tconst showFps = useValue('show_fps', () => debugFlags.showFps.get(), [debugFlags])\n\n\tconst fpsRef = useRef<HTMLDivElement>(null)\n\n\tuseEffect(() => {\n\t\tif (!showFps) return\n\n\t\tconst TICK_LENGTH = 250\n\t\tlet maxKnownFps = 0\n\t\tlet raf = -1\n\n\t\tlet start = performance.now()\n\t\tlet currentTickLength = 0\n\t\tlet framesInCurrentTick = 0\n\t\tlet isSlow = false\n\n\t\t// A \"tick\" is the amount of time between renders. Even though\n\t\t// we'll loop on every frame, we will only paint when the time\n\t\t// since the last paint is greater than the tick length.\n\n\t\t// When we paint, we'll calculate the FPS based on the number\n\t\t// of frames that we've seen since the last time we rendered,\n\t\t// and the actual time since the last render.\n\t\tfunction loop() {\n\t\t\t// Count the frame\n\t\t\tframesInCurrentTick++\n\n\t\t\t// Check if we should render\n\t\t\tcurrentTickLength = performance.now() - start\n\n\t\t\tif (currentTickLength > TICK_LENGTH) {\n\t\t\t\t// Calculate the FPS and paint it\n\t\t\t\tconst fps = Math.round(\n\t\t\t\t\tframesInCurrentTick * (TICK_LENGTH / currentTickLength) * (1000 / TICK_LENGTH)\n\t\t\t\t)\n\n\t\t\t\tif (fps > maxKnownFps) {\n\t\t\t\t\tmaxKnownFps = fps\n\t\t\t\t}\n\n\t\t\t\tconst slowFps = maxKnownFps * 0.75\n\t\t\t\tif ((fps < slowFps && !isSlow) || (fps >= slowFps && isSlow)) {\n\t\t\t\t\tisSlow = !isSlow\n\t\t\t\t}\n\n\t\t\t\tfpsRef.current!.innerHTML = `FPS ${fps.toString()}`\n\t\t\t\tfpsRef.current!.className =\n\t\t\t\t\t`tlui-debug-panel__fps` + (isSlow ? ` tlui-debug-panel__fps__slow` : ``)\n\n\t\t\t\t// Reset the values\n\t\t\t\tcurrentTickLength -= TICK_LENGTH\n\t\t\t\tframesInCurrentTick = 0\n\t\t\t\tstart = performance.now()\n\t\t\t}\n\n\t\t\traf = editor.timers.requestAnimationFrame(loop)\n\t\t}\n\n\t\tloop()\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(raf)\n\t\t}\n\t}, [showFps, editor])\n\n\tif (!showFps) return null\n\n\treturn <div ref={fpsRef} />\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { debugFlags, track, useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport { memo, useEffect, useRef } from 'react'\nimport { useTldrawUiComponents } from '../context/components'\n\n/** @internal */\nexport const DefaultDebugPanel = memo(function DefaultDebugPanel() {\n\tconst { DebugMenu } = useTldrawUiComponents()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\treturn (\n\t\t<footer ref={ref} className=\"tlui-debug-panel\">\n\t\t\t<CurrentState />\n\t\t\t<FPS />\n\t\t\t{DebugMenu && <DebugMenu />}\n\t\t</footer>\n\t)\n})\n\nconst CurrentState = track(function CurrentState() {\n\tconst editor = useEditor()\n\tconst path = editor.getPath()\n\treturn <div className=\"tlui-debug-panel__current-state\">{`${path}`}</div>\n})\n\nfunction FPS() {\n\tconst editor = useEditor()\n\tconst showFps = useValue('show_fps', () => debugFlags.showFps.get(), [debugFlags])\n\n\tconst fpsRef = useRef<HTMLDivElement>(null)\n\n\tuseEffect(() => {\n\t\tif (!showFps) return\n\n\t\tconst TICK_LENGTH = 250\n\t\tlet maxKnownFps = 0\n\t\tlet raf = -1\n\n\t\tlet start = performance.now()\n\t\tlet currentTickLength = 0\n\t\tlet framesInCurrentTick = 0\n\t\tlet isSlow = false\n\n\t\t// A \"tick\" is the amount of time between renders. Even though\n\t\t// we'll loop on every frame, we will only paint when the time\n\t\t// since the last paint is greater than the tick length.\n\n\t\t// When we paint, we'll calculate the FPS based on the number\n\t\t// of frames that we've seen since the last time we rendered,\n\t\t// and the actual time since the last render.\n\t\tfunction loop() {\n\t\t\t// Count the frame\n\t\t\tframesInCurrentTick++\n\n\t\t\t// Check if we should render\n\t\t\tcurrentTickLength = performance.now() - start\n\n\t\t\tif (currentTickLength > TICK_LENGTH) {\n\t\t\t\t// Calculate the FPS and paint it\n\t\t\t\tconst fps = Math.round(\n\t\t\t\t\tframesInCurrentTick * (TICK_LENGTH / currentTickLength) * (1000 / TICK_LENGTH)\n\t\t\t\t)\n\n\t\t\t\tif (fps > maxKnownFps) {\n\t\t\t\t\tmaxKnownFps = fps\n\t\t\t\t}\n\n\t\t\t\tconst slowFps = maxKnownFps * 0.75\n\t\t\t\tif ((fps < slowFps && !isSlow) || (fps >= slowFps && isSlow)) {\n\t\t\t\t\tisSlow = !isSlow\n\t\t\t\t}\n\n\t\t\t\tfpsRef.current!.innerHTML = `FPS ${fps.toString()} (max: ${maxKnownFps})`\n\t\t\t\tfpsRef.current!.className =\n\t\t\t\t\t`tlui-debug-panel__fps` + (isSlow ? ` tlui-debug-panel__fps__slow` : ``)\n\n\t\t\t\t// Reset the values\n\t\t\t\tcurrentTickLength -= TICK_LENGTH\n\t\t\t\tframesInCurrentTick = 0\n\t\t\t\tstart = performance.now()\n\t\t\t}\n\n\t\t\traf = editor.timers.requestAnimationFrame(loop)\n\t\t}\n\n\t\tloop()\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(raf)\n\t\t}\n\t}, [showFps, editor])\n\n\tif (!showFps) return null\n\n\treturn <div ref={fpsRef} />\n}\n"],
+  "mappings": "AAYE,SACC,KADD;AAZF,SAAS,YAAY,OAAO,WAAW,2BAA2B,gBAAgB;AAClF,SAAS,MAAM,WAAW,cAAc;AACxC,SAAS,6BAA6B;AAG/B,MAAM,oBAAoB,KAAK,SAASA,qBAAoB;AAClE,QAAM,EAAE,UAAU,IAAI,sBAAsB;AAE5C,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,SACC,qBAAC,YAAO,KAAU,WAAU,oBAC3B;AAAA,wBAAC,gBAAa;AAAA,IACd,oBAAC,OAAI;AAAA,IACJ,aAAa,oBAAC,aAAU;AAAA,KAC1B;AAEF,CAAC;AAED,MAAM,eAAe,MAAM,SAASC,gBAAe;AAClD,QAAM,SAAS,UAAU;AACzB,QAAM,OAAO,OAAO,QAAQ;AAC5B,SAAO,oBAAC,SAAI,WAAU,mCAAmC,aAAG,IAAI,IAAG;AACpE,CAAC;AAED,SAAS,MAAM;AACd,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,SAAS,YAAY,MAAM,WAAW,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC;AAEjF,QAAM,SAAS,OAAuB,IAAI;AAE1C,YAAU,MAAM;AACf,QAAI,CAAC,QAAS;AAEd,UAAM,cAAc;AACpB,QAAI,cAAc;AAClB,QAAI,MAAM;AAEV,QAAI,QAAQ,YAAY,IAAI;AAC5B,QAAI,oBAAoB;AACxB,QAAI,sBAAsB;AAC1B,QAAI,SAAS;AASb,aAAS,OAAO;AAEf;AAGA,0BAAoB,YAAY,IAAI,IAAI;AAExC,UAAI,oBAAoB,aAAa;AAEpC,cAAM,MAAM,KAAK;AAAA,UAChB,uBAAuB,cAAc,sBAAsB,MAAO;AAAA,QACnE;AAEA,YAAI,MAAM,aAAa;AACtB,wBAAc;AAAA,QACf;AAEA,cAAM,UAAU,cAAc;AAC9B,YAAK,MAAM,WAAW,CAAC,UAAY,OAAO,WAAW,QAAS;AAC7D,mBAAS,CAAC;AAAA,QACX;AAEA,eAAO,QAAS,YAAY,OAAO,IAAI,SAAS,CAAC,UAAU,WAAW;AACtE,eAAO,QAAS,YACf,2BAA2B,SAAS,iCAAiC;AAGtE,6BAAqB;AACrB,8BAAsB;AACtB,gBAAQ,YAAY,IAAI;AAAA,MACzB;AAEA,YAAM,OAAO,OAAO,sBAAsB,IAAI;AAAA,IAC/C;AAEA,SAAK;AAEL,WAAO,MAAM;AACZ,2BAAqB,GAAG;AAAA,IACzB;AAAA,EACD,GAAG,CAAC,SAAS,MAAM,CAAC;AAEpB,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO,oBAAC,SAAI,KAAK,QAAQ;AAC1B;",
   "names": ["DefaultDebugPanel", "CurrentState"]
 }

package/dist-esm/lib/ui/components/EditLinkDialog.mjs

@@ -21,10 +21,18 @@ function validateUrl(url) {
   }
   return { isValid: false, hasProtocol: false };
 }
+function isShapeWithUrl(shape) {
+  return !!(shape && "url" in shape.props && typeof shape.props.url === "string");
+}
+function assertShapeWithUrl(shape) {
+  if (!isShapeWithUrl(shape)) {
+    throw new Error("Shape is not a valid ShapeWithUrl");
+  }
+}
 const EditLinkDialog = track(function EditLinkDialog2({ onClose }) {
   const editor = useEditor();
   const selectedShape = editor.getOnlySelectedShape();
-  if (!(selectedShape && "url" in selectedShape.props && typeof selectedShape.props.url === "string")) {
+  if (!isShapeWithUrl(selectedShape)) {
     return null;
   }
   return /* @__PURE__ */ jsx(EditLinkDialogInner, { onClose, selectedShape });
@@ -64,6 +72,7 @@ const EditLinkDialogInner = track(function EditLinkDialogInner2({
   const handleClear = useCallback(() => {
     const onlySelectedShape = editor.getOnlySelectedShape();
     if (!onlySelectedShape) return;
+    assertShapeWithUrl(onlySelectedShape);
     editor.updateShapes([
       { id: onlySelectedShape.id, type: onlySelectedShape.type, props: { url: "" } }
     ]);
@@ -72,6 +81,7 @@ const EditLinkDialogInner = track(function EditLinkDialogInner2({
   const handleComplete = useCallback(() => {
     const onlySelectedShape = editor.getOnlySelectedShape();
     if (!onlySelectedShape) return;
+    assertShapeWithUrl(onlySelectedShape);
     if (onlySelectedShape && "url" in onlySelectedShape.props) {
       if (onlySelectedShape.props.url !== urlInputState.safe) {
         editor.updateShapes([

package/dist-esm/lib/ui/components/EditLinkDialog.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/EditLinkDialog.tsx"],
-  "sourcesContent": ["import { T, TLBaseShape, track, useEditor } from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { TLUiDialogProps } from '../context/dialogs'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonLabel } from './primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiDialogBody,\n\tTldrawUiDialogCloseButton,\n\tTldrawUiDialogFooter,\n\tTldrawUiDialogHeader,\n\tTldrawUiDialogTitle,\n} from './primitives/TldrawUiDialog'\nimport { TldrawUiInput } from './primitives/TldrawUiInput'\n\n// A url can either be invalid, or valid with a protocol, or valid without a protocol.\n// For example, \"aol.com\" would be valid with a protocol ()\nfunction validateUrl(url: string) {\n\tif (T.linkUrl.isValid(url)) {\n\t\treturn { isValid: true, hasProtocol: true }\n\t}\n\tif (T.linkUrl.isValid('https://' + url)) {\n\t\treturn { isValid: true, hasProtocol: false }\n\t}\n\treturn { isValid: false, hasProtocol: false }\n}\n\ntype ShapeWithUrl = TLBaseShape<string, { url: string }>\n\nexport const EditLinkDialog = track(function EditLinkDialog({ onClose }: TLUiDialogProps) {\n\tconst editor = useEditor()\n\n\tconst selectedShape = editor.getOnlySelectedShape()\n\n\tif (\n\t\t!(selectedShape && 'url' in selectedShape.props && typeof selectedShape.props.url === 'string')\n\t) {\n\t\treturn null\n\t}\n\n\treturn <EditLinkDialogInner onClose={onClose} selectedShape={selectedShape as ShapeWithUrl} />\n})\n\nexport const EditLinkDialogInner = track(function EditLinkDialogInner({\n\tonClose,\n\tselectedShape,\n}: TLUiDialogProps & { selectedShape: ShapeWithUrl }) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst rInput = useRef<HTMLInputElement>(null)\n\n\tuseEffect(() => {\n\t\teditor.timers.requestAnimationFrame(() => rInput.current?.focus())\n\t}, [editor])\n\n\tconst rInitialValue = useRef(selectedShape.props.url)\n\n\tconst [urlInputState, setUrlInputState] = useState(() => {\n\t\tconst urlValidResult = validateUrl(selectedShape.props.url)\n\n\t\tconst initialValue =\n\t\t\turlValidResult.isValid === true\n\t\t\t\t? urlValidResult.hasProtocol\n\t\t\t\t\t? selectedShape.props.url\n\t\t\t\t\t: 'https://' + selectedShape.props.url\n\t\t\t\t: 'https://'\n\n\t\treturn {\n\t\t\tactual: initialValue,\n\t\t\tsafe: initialValue,\n\t\t\tvalid: true,\n\t\t}\n\t})\n\n\tconst handleChange = useCallback((rawValue: string) => {\n\t\t// Just auto-correct double https:// from a bad paste.\n\t\tconst fixedRawValue = rawValue.replace(/https?:\\/\\/(https?:\\/\\/)/, (_match, arg1) => {\n\t\t\treturn arg1\n\t\t})\n\n\t\tconst urlValidResult = validateUrl(fixedRawValue)\n\n\t\tconst safeValue =\n\t\t\turlValidResult.isValid === true\n\t\t\t\t? urlValidResult.hasProtocol\n\t\t\t\t\t? fixedRawValue\n\t\t\t\t\t: 'https://' + fixedRawValue\n\t\t\t\t: 'https://'\n\n\t\tsetUrlInputState({\n\t\t\tactual: fixedRawValue,\n\t\t\tsafe: safeValue,\n\t\t\tvalid: urlValidResult.isValid,\n\t\t})\n\t}, [])\n\n\tconst handleClear = useCallback(() => {\n\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\tif (!onlySelectedShape) return\n\t\teditor.updateShapes([\n\t\t\t{ id: onlySelectedShape.id, type: onlySelectedShape.type, props: { url: '' } },\n\t\t])\n\t\tonClose()\n\t}, [editor, onClose])\n\n\tconst handleComplete = useCallback(() => {\n\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\t\tif (!onlySelectedShape) return\n\n\t\t// ? URL is a magic value\n\t\tif (onlySelectedShape && 'url' in onlySelectedShape.props) {\n\t\t\t// Here would be a good place to validate the next shape\u2014would setting the empty\n\t\t\tif (onlySelectedShape.props.url !== urlInputState.safe) {\n\t\t\t\teditor.updateShapes([\n\t\t\t\t\t{\n\t\t\t\t\t\tid: onlySelectedShape.id,\n\t\t\t\t\t\ttype: onlySelectedShape.type,\n\t\t\t\t\t\tprops: { url: urlInputState.safe },\n\t\t\t\t\t},\n\t\t\t\t])\n\t\t\t}\n\t\t}\n\t\tonClose()\n\t}, [editor, onClose, urlInputState])\n\n\tconst handleCancel = useCallback(() => {\n\t\tonClose()\n\t}, [onClose])\n\n\tif (!selectedShape) {\n\t\t// dismiss modal\n\t\tonClose()\n\t\treturn null\n\t}\n\n\t// Are we going from a valid state to an invalid state?\n\tconst isRemoving = rInitialValue.current && !urlInputState.valid\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiDialogHeader>\n\t\t\t\t<TldrawUiDialogTitle>{msg('edit-link-dialog.title')}</TldrawUiDialogTitle>\n\t\t\t\t<TldrawUiDialogCloseButton />\n\t\t\t</TldrawUiDialogHeader>\n\t\t\t<TldrawUiDialogBody>\n\t\t\t\t<div className=\"tlui-edit-link-dialog\">\n\t\t\t\t\t<TldrawUiInput\n\t\t\t\t\t\tref={rInput}\n\t\t\t\t\t\tclassName=\"tlui-edit-link-dialog__input\"\n\t\t\t\t\t\tlabel=\"edit-link-dialog.url\"\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tautoSelect\n\t\t\t\t\t\tplaceholder=\"https://example.com\"\n\t\t\t\t\t\tvalue={urlInputState.actual}\n\t\t\t\t\t\tonValueChange={handleChange}\n\t\t\t\t\t\tonComplete={handleComplete}\n\t\t\t\t\t\tonCancel={handleCancel}\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{urlInputState.valid\n\t\t\t\t\t\t\t? msg('edit-link-dialog.detail')\n\t\t\t\t\t\t\t: msg('edit-link-dialog.invalid-url')}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TldrawUiDialogBody>\n\t\t\t<TldrawUiDialogFooter className=\"tlui-dialog__footer__actions\">\n\t\t\t\t<TldrawUiButton type=\"normal\" onClick={handleCancel} onTouchEnd={handleCancel}>\n\t\t\t\t\t<TldrawUiButtonLabel>{msg('edit-link-dialog.cancel')}</TldrawUiButtonLabel>\n\t\t\t\t</TldrawUiButton>\n\t\t\t\t{isRemoving ? (\n\t\t\t\t\t<TldrawUiButton type={'danger'} onTouchEnd={handleClear} onClick={handleClear}>\n\t\t\t\t\t\t<TldrawUiButtonLabel>{msg('edit-link-dialog.clear')}</TldrawUiButtonLabel>\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t) : (\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t\tdisabled={!urlInputState.valid}\n\t\t\t\t\t\tonTouchEnd={handleComplete}\n\t\t\t\t\t\tonClick={handleComplete}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonLabel>{msg('edit-link-dialog.save')}</TldrawUiButtonLabel>\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t)}\n\t\t\t</TldrawUiDialogFooter>\n\t\t</>\n\t)\n})\n"],
-  "mappings": "AAwCQ,SAqGN,UArGM,KAsGL,YAtGK;AAxCR,SAAS,GAAgB,OAAO,iBAAiB;AACjD,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAEzD,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,qBAAqB;AAI9B,SAAS,YAAY,KAAa;AACjC,MAAI,EAAE,QAAQ,QAAQ,GAAG,GAAG;AAC3B,WAAO,EAAE,SAAS,MAAM,aAAa,KAAK;AAAA,EAC3C;AACA,MAAI,EAAE,QAAQ,QAAQ,aAAa,GAAG,GAAG;AACxC,WAAO,EAAE,SAAS,MAAM,aAAa,MAAM;AAAA,EAC5C;AACA,SAAO,EAAE,SAAS,OAAO,aAAa,MAAM;AAC7C;AAIO,MAAM,iBAAiB,MAAM,SAASA,gBAAe,EAAE,QAAQ,GAAoB;AACzF,QAAM,SAAS,UAAU;AAEzB,QAAM,gBAAgB,OAAO,qBAAqB;AAElD,MACC,EAAE,iBAAiB,SAAS,cAAc,SAAS,OAAO,cAAc,MAAM,QAAQ,WACrF;AACD,WAAO;AAAA,EACR;AAEA,SAAO,oBAAC,uBAAoB,SAAkB,eAA8C;AAC7F,CAAC;AAEM,MAAM,sBAAsB,MAAM,SAASC,qBAAoB;AAAA,EACrE;AAAA,EACA;AACD,GAAsD;AACrD,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,SAAS,OAAyB,IAAI;AAE5C,YAAU,MAAM;AACf,WAAO,OAAO,sBAAsB,MAAM,OAAO,SAAS,MAAM,CAAC;AAAA,EAClE,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,gBAAgB,OAAO,cAAc,MAAM,GAAG;AAEpD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,MAAM;AACxD,UAAM,iBAAiB,YAAY,cAAc,MAAM,GAAG;AAE1D,UAAM,eACL,eAAe,YAAY,OACxB,eAAe,cACd,cAAc,MAAM,MACpB,aAAa,cAAc,MAAM,MAClC;AAEJ,WAAO;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACR;AAAA,EACD,CAAC;AAED,QAAM,eAAe,YAAY,CAAC,aAAqB;AAEtD,UAAM,gBAAgB,SAAS,QAAQ,4BAA4B,CAAC,QAAQ,SAAS;AACpF,aAAO;AAAA,IACR,CAAC;AAED,UAAM,iBAAiB,YAAY,aAAa;AAEhD,UAAM,YACL,eAAe,YAAY,OACxB,eAAe,cACd,gBACA,aAAa,gBACd;AAEJ,qBAAiB;AAAA,MAChB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO,eAAe;AAAA,IACvB,CAAC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACrC,UAAM,oBAAoB,OAAO,qBAAqB;AACtD,QAAI,CAAC,kBAAmB;AACxB,WAAO,aAAa;AAAA,MACnB,EAAE,IAAI,kBAAkB,IAAI,MAAM,kBAAkB,MAAM,OAAO,EAAE,KAAK,GAAG,EAAE;AAAA,IAC9E,CAAC;AACD,YAAQ;AAAA,EACT,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,iBAAiB,YAAY,MAAM;AACxC,UAAM,oBAAoB,OAAO,qBAAqB;AAEtD,QAAI,CAAC,kBAAmB;AAGxB,QAAI,qBAAqB,SAAS,kBAAkB,OAAO;AAE1D,UAAI,kBAAkB,MAAM,QAAQ,cAAc,MAAM;AACvD,eAAO,aAAa;AAAA,UACnB;AAAA,YACC,IAAI,kBAAkB;AAAA,YACtB,MAAM,kBAAkB;AAAA,YACxB,OAAO,EAAE,KAAK,cAAc,KAAK;AAAA,UAClC;AAAA,QACD,CAAC;AAAA,MACF;AAAA,IACD;AACA,YAAQ;AAAA,EACT,GAAG,CAAC,QAAQ,SAAS,aAAa,CAAC;AAEnC,QAAM,eAAe,YAAY,MAAM;AACtC,YAAQ;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,eAAe;AAEnB,YAAQ;AACR,WAAO;AAAA,EACR;AAGA,QAAM,aAAa,cAAc,WAAW,CAAC,cAAc;AAE3D,SACC,iCACC;AAAA,yBAAC,wBACA;AAAA,0BAAC,uBAAqB,cAAI,wBAAwB,GAAE;AAAA,MACpD,oBAAC,6BAA0B;AAAA,OAC5B;AAAA,IACA,oBAAC,sBACA,+BAAC,SAAI,WAAU,yBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,KAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAM;AAAA,UACN,WAAS;AAAA,UACT,YAAU;AAAA,UACV,aAAY;AAAA,UACZ,OAAO,cAAc;AAAA,UACrB,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,UAAU;AAAA;AAAA,MACX;AAAA,MACA,oBAAC,SACC,wBAAc,QACZ,IAAI,yBAAyB,IAC7B,IAAI,8BAA8B,GACtC;AAAA,OACD,GACD;AAAA,IACA,qBAAC,wBAAqB,WAAU,gCAC/B;AAAA,0BAAC,kBAAe,MAAK,UAAS,SAAS,cAAc,YAAY,cAChE,8BAAC,uBAAqB,cAAI,yBAAyB,GAAE,GACtD;AAAA,MACC,aACA,oBAAC,kBAAe,MAAM,UAAU,YAAY,aAAa,SAAS,aACjE,8BAAC,uBAAqB,cAAI,wBAAwB,GAAE,GACrD,IAEA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,UAAU,CAAC,cAAc;AAAA,UACzB,YAAY;AAAA,UACZ,SAAS;AAAA,UAET,8BAAC,uBAAqB,cAAI,uBAAuB,GAAE;AAAA;AAAA,MACpD;AAAA,OAEF;AAAA,KACD;AAEF,CAAC;",
+  "sourcesContent": ["import { ExtractShapeByProps, T, TLShape, track, useEditor } from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { TLUiDialogProps } from '../context/dialogs'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonLabel } from './primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiDialogBody,\n\tTldrawUiDialogCloseButton,\n\tTldrawUiDialogFooter,\n\tTldrawUiDialogHeader,\n\tTldrawUiDialogTitle,\n} from './primitives/TldrawUiDialog'\nimport { TldrawUiInput } from './primitives/TldrawUiInput'\n\n// A url can either be invalid, or valid with a protocol, or valid without a protocol.\n// For example, \"aol.com\" would be valid with a protocol ()\nfunction validateUrl(url: string) {\n\tif (T.linkUrl.isValid(url)) {\n\t\treturn { isValid: true, hasProtocol: true }\n\t}\n\tif (T.linkUrl.isValid('https://' + url)) {\n\t\treturn { isValid: true, hasProtocol: false }\n\t}\n\treturn { isValid: false, hasProtocol: false }\n}\n\ntype ShapeWithUrl = ExtractShapeByProps<{ url: string }>\n\nfunction isShapeWithUrl(shape: TLShape | null | undefined): shape is ShapeWithUrl {\n\treturn !!(shape && 'url' in shape.props && typeof shape.props.url === 'string')\n}\n\nfunction assertShapeWithUrl(shape: TLShape | null | undefined): asserts shape is ShapeWithUrl {\n\tif (!isShapeWithUrl(shape)) {\n\t\tthrow new Error('Shape is not a valid ShapeWithUrl')\n\t}\n}\n\nexport const EditLinkDialog = track(function EditLinkDialog({ onClose }: TLUiDialogProps) {\n\tconst editor = useEditor()\n\n\tconst selectedShape = editor.getOnlySelectedShape()\n\n\tif (!isShapeWithUrl(selectedShape)) {\n\t\treturn null\n\t}\n\n\treturn <EditLinkDialogInner onClose={onClose} selectedShape={selectedShape} />\n})\n\nexport const EditLinkDialogInner = track(function EditLinkDialogInner({\n\tonClose,\n\tselectedShape,\n}: TLUiDialogProps & { selectedShape: ShapeWithUrl }) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst rInput = useRef<HTMLInputElement>(null)\n\n\tuseEffect(() => {\n\t\teditor.timers.requestAnimationFrame(() => rInput.current?.focus())\n\t}, [editor])\n\n\tconst rInitialValue = useRef(selectedShape.props.url)\n\n\tconst [urlInputState, setUrlInputState] = useState(() => {\n\t\tconst urlValidResult = validateUrl(selectedShape.props.url)\n\n\t\tconst initialValue =\n\t\t\turlValidResult.isValid === true\n\t\t\t\t? urlValidResult.hasProtocol\n\t\t\t\t\t? selectedShape.props.url\n\t\t\t\t\t: 'https://' + selectedShape.props.url\n\t\t\t\t: 'https://'\n\n\t\treturn {\n\t\t\tactual: initialValue,\n\t\t\tsafe: initialValue,\n\t\t\tvalid: true,\n\t\t}\n\t})\n\n\tconst handleChange = useCallback((rawValue: string) => {\n\t\t// Just auto-correct double https:// from a bad paste.\n\t\tconst fixedRawValue = rawValue.replace(/https?:\\/\\/(https?:\\/\\/)/, (_match, arg1) => {\n\t\t\treturn arg1\n\t\t})\n\n\t\tconst urlValidResult = validateUrl(fixedRawValue)\n\n\t\tconst safeValue =\n\t\t\turlValidResult.isValid === true\n\t\t\t\t? urlValidResult.hasProtocol\n\t\t\t\t\t? fixedRawValue\n\t\t\t\t\t: 'https://' + fixedRawValue\n\t\t\t\t: 'https://'\n\n\t\tsetUrlInputState({\n\t\t\tactual: fixedRawValue,\n\t\t\tsafe: safeValue,\n\t\t\tvalid: urlValidResult.isValid,\n\t\t})\n\t}, [])\n\n\tconst handleClear = useCallback(() => {\n\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\tif (!onlySelectedShape) return\n\t\tassertShapeWithUrl(onlySelectedShape)\n\t\teditor.updateShapes([\n\t\t\t{ id: onlySelectedShape.id, type: onlySelectedShape.type, props: { url: '' } },\n\t\t])\n\t\tonClose()\n\t}, [editor, onClose])\n\n\tconst handleComplete = useCallback(() => {\n\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\t\tif (!onlySelectedShape) return\n\t\tassertShapeWithUrl(onlySelectedShape)\n\n\t\t// ? URL is a magic value\n\t\tif (onlySelectedShape && 'url' in onlySelectedShape.props) {\n\t\t\t// Here would be a good place to validate the next shape\u2014would setting the empty\n\t\t\tif (onlySelectedShape.props.url !== urlInputState.safe) {\n\t\t\t\teditor.updateShapes([\n\t\t\t\t\t{\n\t\t\t\t\t\tid: onlySelectedShape.id,\n\t\t\t\t\t\ttype: onlySelectedShape.type,\n\t\t\t\t\t\tprops: { url: urlInputState.safe },\n\t\t\t\t\t},\n\t\t\t\t])\n\t\t\t}\n\t\t}\n\t\tonClose()\n\t}, [editor, onClose, urlInputState])\n\n\tconst handleCancel = useCallback(() => {\n\t\tonClose()\n\t}, [onClose])\n\n\tif (!selectedShape) {\n\t\t// dismiss modal\n\t\tonClose()\n\t\treturn null\n\t}\n\n\t// Are we going from a valid state to an invalid state?\n\tconst isRemoving = rInitialValue.current && !urlInputState.valid\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiDialogHeader>\n\t\t\t\t<TldrawUiDialogTitle>{msg('edit-link-dialog.title')}</TldrawUiDialogTitle>\n\t\t\t\t<TldrawUiDialogCloseButton />\n\t\t\t</TldrawUiDialogHeader>\n\t\t\t<TldrawUiDialogBody>\n\t\t\t\t<div className=\"tlui-edit-link-dialog\">\n\t\t\t\t\t<TldrawUiInput\n\t\t\t\t\t\tref={rInput}\n\t\t\t\t\t\tclassName=\"tlui-edit-link-dialog__input\"\n\t\t\t\t\t\tlabel=\"edit-link-dialog.url\"\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tautoSelect\n\t\t\t\t\t\tplaceholder=\"https://example.com\"\n\t\t\t\t\t\tvalue={urlInputState.actual}\n\t\t\t\t\t\tonValueChange={handleChange}\n\t\t\t\t\t\tonComplete={handleComplete}\n\t\t\t\t\t\tonCancel={handleCancel}\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{urlInputState.valid\n\t\t\t\t\t\t\t? msg('edit-link-dialog.detail')\n\t\t\t\t\t\t\t: msg('edit-link-dialog.invalid-url')}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TldrawUiDialogBody>\n\t\t\t<TldrawUiDialogFooter className=\"tlui-dialog__footer__actions\">\n\t\t\t\t<TldrawUiButton type=\"normal\" onClick={handleCancel} onTouchEnd={handleCancel}>\n\t\t\t\t\t<TldrawUiButtonLabel>{msg('edit-link-dialog.cancel')}</TldrawUiButtonLabel>\n\t\t\t\t</TldrawUiButton>\n\t\t\t\t{isRemoving ? (\n\t\t\t\t\t<TldrawUiButton type={'danger'} onTouchEnd={handleClear} onClick={handleClear}>\n\t\t\t\t\t\t<TldrawUiButtonLabel>{msg('edit-link-dialog.clear')}</TldrawUiButtonLabel>\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t) : (\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t\tdisabled={!urlInputState.valid}\n\t\t\t\t\t\tonTouchEnd={handleComplete}\n\t\t\t\t\t\tonClick={handleComplete}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonLabel>{msg('edit-link-dialog.save')}</TldrawUiButtonLabel>\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t)}\n\t\t\t</TldrawUiDialogFooter>\n\t\t</>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["EditLinkDialog", "EditLinkDialogInner"]
 }

package/dist-esm/lib/ui/components/HelperButtons/BackToContent.mjs

@@ -15,7 +15,7 @@ function BackToContent() {
       const shapeIds = editor.getCurrentPageShapeIds();
       let showBackToContentNow = false;
       if (shapeIds.size) {
-        showBackToContentNow = shapeIds.size === editor.getCulledShapes().size;
+        showBackToContentNow = shapeIds.size === editor.getNotVisibleShapes().size;
       }
       if (showBackToContentPrev !== showBackToContentNow) {
         setShowBackToContent(showBackToContentNow);

package/dist-esm/lib/ui/components/HelperButtons/BackToContent.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/HelperButtons/BackToContent.tsx"],
-  "sourcesContent": ["import { useEditor, useQuickReactor } from '@tldraw/editor'\nimport { useRef, useState } from 'react'\nimport { useActions } from '../../context/actions'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\n\nexport function BackToContent() {\n\tconst editor = useEditor()\n\n\tconst actions = useActions()\n\n\tconst [showBackToContent, setShowBackToContent] = useState(false)\n\tconst rIsShowing = useRef(false)\n\n\tuseQuickReactor(\n\t\t'toggle showback to content',\n\t\t() => {\n\t\t\tconst showBackToContentPrev = rIsShowing.current\n\t\t\tconst shapeIds = editor.getCurrentPageShapeIds()\n\t\t\tlet showBackToContentNow = false\n\t\t\tif (shapeIds.size) {\n\t\t\t\tshowBackToContentNow = shapeIds.size === editor.getCulledShapes().size\n\t\t\t}\n\n\t\t\tif (showBackToContentPrev !== showBackToContentNow) {\n\t\t\t\tsetShowBackToContent(showBackToContentNow)\n\t\t\t\trIsShowing.current = showBackToContentNow\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!showBackToContent) return null\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"back-to-content\"\n\t\t\tonSelect={() => {\n\t\t\t\tactions['back-to-content'].onSelect('helper-buttons')\n\t\t\t\tsetShowBackToContent(false)\n\t\t\t}}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "AAkCE;AAlCF,SAAS,WAAW,uBAAuB;AAC3C,SAAS,QAAQ,gBAAgB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AAEhC,SAAS,gBAAgB;AAC/B,QAAM,SAAS,UAAU;AAEzB,QAAM,UAAU,WAAW;AAE3B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,aAAa,OAAO,KAAK;AAE/B;AAAA,IACC;AAAA,IACA,MAAM;AACL,YAAM,wBAAwB,WAAW;AACzC,YAAM,WAAW,OAAO,uBAAuB;AAC/C,UAAI,uBAAuB;AAC3B,UAAI,SAAS,MAAM;AAClB,+BAAuB,SAAS,SAAS,OAAO,gBAAgB,EAAE;AAAA,MACnE;AAEA,UAAI,0BAA0B,sBAAsB;AACnD,6BAAqB,oBAAoB;AACzC,mBAAW,UAAU;AAAA,MACtB;AAAA,IACD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,kBAAmB,QAAO;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAS;AAAA,MACT,UAAU,MAAM;AACf,gBAAQ,iBAAiB,EAAE,SAAS,gBAAgB;AACpD,6BAAqB,KAAK;AAAA,MAC3B;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { useEditor, useQuickReactor } from '@tldraw/editor'\nimport { useRef, useState } from 'react'\nimport { useActions } from '../../context/actions'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\n\nexport function BackToContent() {\n\tconst editor = useEditor()\n\n\tconst actions = useActions()\n\n\tconst [showBackToContent, setShowBackToContent] = useState(false)\n\tconst rIsShowing = useRef(false)\n\n\tuseQuickReactor(\n\t\t'toggle showback to content',\n\t\t() => {\n\t\t\tconst showBackToContentPrev = rIsShowing.current\n\t\t\tconst shapeIds = editor.getCurrentPageShapeIds()\n\t\t\tlet showBackToContentNow = false\n\t\t\tif (shapeIds.size) {\n\t\t\t\tshowBackToContentNow = shapeIds.size === editor.getNotVisibleShapes().size\n\t\t\t}\n\n\t\t\tif (showBackToContentPrev !== showBackToContentNow) {\n\t\t\t\tsetShowBackToContent(showBackToContentNow)\n\t\t\t\trIsShowing.current = showBackToContentNow\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!showBackToContent) return null\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"back-to-content\"\n\t\t\tonSelect={() => {\n\t\t\t\tactions['back-to-content'].onSelect('helper-buttons')\n\t\t\t\tsetShowBackToContent(false)\n\t\t\t}}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "AAkCE;AAlCF,SAAS,WAAW,uBAAuB;AAC3C,SAAS,QAAQ,gBAAgB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AAEhC,SAAS,gBAAgB;AAC/B,QAAM,SAAS,UAAU;AAEzB,QAAM,UAAU,WAAW;AAE3B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,aAAa,OAAO,KAAK;AAE/B;AAAA,IACC;AAAA,IACA,MAAM;AACL,YAAM,wBAAwB,WAAW;AACzC,YAAM,WAAW,OAAO,uBAAuB;AAC/C,UAAI,uBAAuB;AAC3B,UAAI,SAAS,MAAM;AAClB,+BAAuB,SAAS,SAAS,OAAO,oBAAoB,EAAE;AAAA,MACvE;AAEA,UAAI,0BAA0B,sBAAsB;AACnD,6BAAqB,oBAAoB;AACzC,mBAAW,UAAU;AAAA,MACtB;AAAA,IACD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,MAAI,CAAC,kBAAmB,QAAO;AAE/B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAS;AAAA,MACT,UAAU,MAAM;AACf,gBAAQ,iBAAiB,EAAE,SAAS,gBAAgB;AACpD,6BAAqB,KAAK;AAAA,MAC3B;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/dist-esm/lib/ui/components/HelperButtons/StopFollowing.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/HelperButtons/StopFollowing.tsx"],
-  "sourcesContent": ["import { useEditor, useValue } from '@tldraw/editor'\nimport { useActions } from '../../context/actions'\nimport { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'\n\nexport function StopFollowing() {\n\tconst editor = useEditor()\n\tconst actions = useActions()\n\n\tconst followingUser = useValue(\n\t\t'is following user',\n\t\t() => !!editor.getInstanceState().followingUserId,\n\t\t[editor]\n\t)\n\tif (!followingUser) return null\n\n\treturn <TldrawUiMenuItem {...actions['stop-following']} />\n}\n"],
-  "mappings": "AAeQ;AAfR,SAAS,WAAW,gBAAgB;AACpC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAE1B,SAAS,gBAAgB;AAC/B,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,WAAW;AAE3B,QAAM,gBAAgB;AAAA,IACrB;AAAA,IACA,MAAM,CAAC,CAAC,OAAO,iBAAiB,EAAE;AAAA,IAClC,CAAC,MAAM;AAAA,EACR;AACA,MAAI,CAAC,cAAe,QAAO;AAE3B,SAAO,oBAAC,oBAAkB,GAAG,QAAQ,gBAAgB,GAAG;AACzD;",
+  "sourcesContent": ["import { useEditor, useValue } from '@tldraw/editor'\nimport { useActions } from '../../context/actions'\nimport { TldrawUiMenuItem, type TLUiMenuItemProps } from '../primitives/menus/TldrawUiMenuItem'\n\nexport function StopFollowing() {\n\tconst editor = useEditor()\n\tconst actions = useActions()\n\n\tconst followingUser = useValue(\n\t\t'is following user',\n\t\t() => !!editor.getInstanceState().followingUserId,\n\t\t[editor]\n\t)\n\tif (!followingUser) return null\n\n\treturn <TldrawUiMenuItem {...(actions['stop-following'] as TLUiMenuItemProps)} />\n}\n"],
+  "mappings": "AAeQ;AAfR,SAAS,WAAW,gBAAgB;AACpC,SAAS,kBAAkB;AAC3B,SAAS,wBAAgD;AAElD,SAAS,gBAAgB;AAC/B,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,WAAW;AAE3B,QAAM,gBAAgB;AAAA,IACrB;AAAA,IACA,MAAM,CAAC,CAAC,OAAO,iBAAiB,EAAE;AAAA,IAClC,CAAC,MAAM;AAAA,EACR;AACA,MAAI,CAAC,cAAe,QAAO;AAE3B,SAAO,oBAAC,oBAAkB,GAAI,QAAQ,gBAAgB,GAAyB;AAChF;",
   "names": []
 }

package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs

@@ -20,7 +20,7 @@ function DefaultMinimap() {
   const msg = useTranslation();
   const rCanvas = React.useRef(null);
   const rPointing = React.useRef(false);
-  const minimapRef = React.useRef();
+  const minimapRef = React.useRef(void 0);
   React.useEffect(() => {
     try {
       const minimap = new MinimapManager(editor, rCanvas.current, container);

package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Minimap/DefaultMinimap.tsx"],
-  "sourcesContent": ["import {\n\tBox,\n\tTLPointerEventInfo,\n\tVec,\n\tgetPointerInfo,\n\tisAccelKey,\n\tnormalizeWheel,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tuseContainer,\n\tuseEditor,\n\tuseIsDarkMode,\n} from '@tldraw/editor'\nimport * as React from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { MinimapManager } from './MinimapManager'\n\n/** @public @react */\nexport function DefaultMinimap() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\n\tconst rCanvas = React.useRef<HTMLCanvasElement>(null!)\n\tconst rPointing = React.useRef(false)\n\n\tconst minimapRef = React.useRef<MinimapManager>()\n\n\tReact.useEffect(() => {\n\t\ttry {\n\t\t\tconst minimap = new MinimapManager(editor, rCanvas.current, container)\n\t\t\tminimapRef.current = minimap\n\t\t\treturn minimapRef.current.close\n\t\t} catch (e) {\n\t\t\teditor.annotateError(e, {\n\t\t\t\torigin: 'minimap',\n\t\t\t\twillCrashApp: false,\n\t\t\t})\n\t\t\teditor.timers.setTimeout(() => {\n\t\t\t\tthrow e\n\t\t\t})\n\t\t}\n\t}, [editor, container])\n\n\tconst onDoubleClick = React.useCallback(\n\t\t(e: React.MouseEvent<HTMLCanvasElement>) => {\n\t\t\tif (!editor.getCurrentPageShapeIds().size) return\n\t\t\tif (!minimapRef.current) return\n\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\tfalse\n\t\t\t)\n\n\t\t\tconst clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\ttrue\n\t\t\t)\n\n\t\t\tminimapRef.current.originPagePoint.setTo(clampedPoint)\n\t\t\tminimapRef.current.originPageCenter.setTo(editor.getViewportPageBounds().center)\n\n\t\t\teditor.centerOnPoint(point, { animation: { duration: editor.options.animationMediumMs } })\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onPointerDown = React.useCallback(\n\t\t(e: React.PointerEvent<HTMLCanvasElement>) => {\n\t\t\tif (!minimapRef.current) return\n\t\t\tconst elm = e.currentTarget\n\t\t\tsetPointerCapture(elm, e)\n\t\t\tif (!editor.getCurrentPageShapeIds().size) return\n\n\t\t\trPointing.current = true\n\n\t\t\tminimapRef.current.isInViewport = false\n\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\tfalse\n\t\t\t)\n\n\t\t\tconst _vpPageBounds = editor.getViewportPageBounds()\n\t\t\tconst commonBounds = minimapRef.current.getContentPageBounds()\n\t\t\tconst allowedBounds = new Box(\n\t\t\t\tcommonBounds.x - _vpPageBounds.width / 2,\n\t\t\t\tcommonBounds.y - _vpPageBounds.height / 2,\n\t\t\t\tcommonBounds.width + _vpPageBounds.width,\n\t\t\t\tcommonBounds.height + _vpPageBounds.height\n\t\t\t)\n\n\t\t\t// If we clicked inside of the allowed area, but outside of the viewport\n\t\t\tif (allowedBounds.containsPoint(point) && !_vpPageBounds.containsPoint(point)) {\n\t\t\t\tminimapRef.current.isInViewport = _vpPageBounds.containsPoint(point)\n\t\t\t\tconst delta = Vec.Sub(_vpPageBounds.center, _vpPageBounds.point)\n\t\t\t\tconst pagePoint = Vec.Add(point, delta)\n\t\t\t\tminimapRef.current.originPagePoint.setTo(pagePoint)\n\t\t\t\tminimapRef.current.originPageCenter.setTo(point)\n\t\t\t\teditor.centerOnPoint(point, { animation: { duration: editor.options.animationMediumMs } })\n\t\t\t} else {\n\t\t\t\tconst clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\t\te.clientX,\n\t\t\t\t\te.clientY,\n\t\t\t\t\tfalse,\n\t\t\t\t\ttrue\n\t\t\t\t)\n\t\t\t\tminimapRef.current.isInViewport = _vpPageBounds.containsPoint(clampedPoint)\n\t\t\t\tminimapRef.current.originPagePoint.setTo(clampedPoint)\n\t\t\t\tminimapRef.current.originPageCenter.setTo(_vpPageBounds.center)\n\t\t\t}\n\n\t\t\tfunction release(e: PointerEvent) {\n\t\t\t\tif (elm) {\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\t\t\t\trPointing.current = false\n\t\t\t\tdocument.body.removeEventListener('pointerup', release)\n\t\t\t}\n\n\t\t\tdocument.body.addEventListener('pointerup', release)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onPointerMove = React.useCallback(\n\t\t(e: React.PointerEvent<HTMLCanvasElement>) => {\n\t\t\tif (!minimapRef.current) return\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\te.shiftKey,\n\t\t\t\ttrue\n\t\t\t)\n\n\t\t\tif (rPointing.current) {\n\t\t\t\tif (minimapRef.current.isInViewport) {\n\t\t\t\t\tconst delta = minimapRef.current.originPagePoint\n\t\t\t\t\t\t.clone()\n\t\t\t\t\t\t.sub(minimapRef.current.originPageCenter)\n\t\t\t\t\teditor.centerOnPoint(Vec.Sub(point, delta))\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\teditor.centerOnPoint(point)\n\t\t\t}\n\n\t\t\tconst pagePoint = minimapRef.current.getMinimapPagePoint(e.clientX, e.clientY)\n\n\t\t\tconst screenPoint = editor.pageToScreen(pagePoint)\n\n\t\t\tconst info: TLPointerEventInfo = {\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\tpoint: screenPoint,\n\t\t\t\tisPen: editor.getInstanceState().isPenMode,\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onWheel = React.useCallback(\n\t\t(e: React.WheelEvent<HTMLCanvasElement>) => {\n\t\t\tconst offset = normalizeWheel(e)\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta: offset,\n\t\t\t\tpoint: new Vec(e.clientX, e.clientY),\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t\tmetaKey: e.metaKey,\n\t\t\t\taccelKey: isAccelKey(e),\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst isDarkMode = useIsDarkMode()\n\n\tReact.useEffect(() => {\n\t\t// need to wait a tick for next theme css to be applied\n\t\t// otherwise the minimap will render with the wrong colors\n\t\teditor.timers.setTimeout(() => {\n\t\t\tminimapRef.current?.updateColors()\n\t\t\tminimapRef.current?.render()\n\t\t})\n\t}, [isDarkMode, editor])\n\n\treturn (\n\t\t<div className=\"tlui-minimap\">\n\t\t\t<canvas\n\t\t\t\trole=\"img\"\n\t\t\t\taria-label={msg('navigation-zone.minimap')}\n\t\t\t\tdata-testid=\"minimap.canvas\"\n\t\t\t\tref={rCanvas}\n\t\t\t\tclassName=\"tlui-minimap__canvas\"\n\t\t\t\tonDoubleClick={onDoubleClick}\n\t\t\t\tonPointerMove={onPointerMove}\n\t\t\t\tonPointerDown={onPointerDown}\n\t\t\t\tonWheelCapture={onWheel}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBox,\n\tTLPointerEventInfo,\n\tVec,\n\tgetPointerInfo,\n\tisAccelKey,\n\tnormalizeWheel,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tuseContainer,\n\tuseEditor,\n\tuseIsDarkMode,\n} from '@tldraw/editor'\nimport * as React from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { MinimapManager } from './MinimapManager'\n\n/** @public @react */\nexport function DefaultMinimap() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\n\tconst rCanvas = React.useRef<HTMLCanvasElement>(null!)\n\tconst rPointing = React.useRef(false)\n\n\tconst minimapRef = React.useRef<MinimapManager | undefined>(undefined)\n\n\tReact.useEffect(() => {\n\t\ttry {\n\t\t\tconst minimap = new MinimapManager(editor, rCanvas.current, container)\n\t\t\tminimapRef.current = minimap\n\t\t\treturn minimapRef.current.close\n\t\t} catch (e) {\n\t\t\teditor.annotateError(e, {\n\t\t\t\torigin: 'minimap',\n\t\t\t\twillCrashApp: false,\n\t\t\t})\n\t\t\teditor.timers.setTimeout(() => {\n\t\t\t\tthrow e\n\t\t\t})\n\t\t}\n\t}, [editor, container])\n\n\tconst onDoubleClick = React.useCallback(\n\t\t(e: React.MouseEvent<HTMLCanvasElement>) => {\n\t\t\tif (!editor.getCurrentPageShapeIds().size) return\n\t\t\tif (!minimapRef.current) return\n\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\tfalse\n\t\t\t)\n\n\t\t\tconst clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\ttrue\n\t\t\t)\n\n\t\t\tminimapRef.current.originPagePoint.setTo(clampedPoint)\n\t\t\tminimapRef.current.originPageCenter.setTo(editor.getViewportPageBounds().center)\n\n\t\t\teditor.centerOnPoint(point, { animation: { duration: editor.options.animationMediumMs } })\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onPointerDown = React.useCallback(\n\t\t(e: React.PointerEvent<HTMLCanvasElement>) => {\n\t\t\tif (!minimapRef.current) return\n\t\t\tconst elm = e.currentTarget\n\t\t\tsetPointerCapture(elm, e)\n\t\t\tif (!editor.getCurrentPageShapeIds().size) return\n\n\t\t\trPointing.current = true\n\n\t\t\tminimapRef.current.isInViewport = false\n\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\tfalse,\n\t\t\t\tfalse\n\t\t\t)\n\n\t\t\tconst _vpPageBounds = editor.getViewportPageBounds()\n\t\t\tconst commonBounds = minimapRef.current.getContentPageBounds()\n\t\t\tconst allowedBounds = new Box(\n\t\t\t\tcommonBounds.x - _vpPageBounds.width / 2,\n\t\t\t\tcommonBounds.y - _vpPageBounds.height / 2,\n\t\t\t\tcommonBounds.width + _vpPageBounds.width,\n\t\t\t\tcommonBounds.height + _vpPageBounds.height\n\t\t\t)\n\n\t\t\t// If we clicked inside of the allowed area, but outside of the viewport\n\t\t\tif (allowedBounds.containsPoint(point) && !_vpPageBounds.containsPoint(point)) {\n\t\t\t\tminimapRef.current.isInViewport = _vpPageBounds.containsPoint(point)\n\t\t\t\tconst delta = Vec.Sub(_vpPageBounds.center, _vpPageBounds.point)\n\t\t\t\tconst pagePoint = Vec.Add(point, delta)\n\t\t\t\tminimapRef.current.originPagePoint.setTo(pagePoint)\n\t\t\t\tminimapRef.current.originPageCenter.setTo(point)\n\t\t\t\teditor.centerOnPoint(point, { animation: { duration: editor.options.animationMediumMs } })\n\t\t\t} else {\n\t\t\t\tconst clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\t\te.clientX,\n\t\t\t\t\te.clientY,\n\t\t\t\t\tfalse,\n\t\t\t\t\ttrue\n\t\t\t\t)\n\t\t\t\tminimapRef.current.isInViewport = _vpPageBounds.containsPoint(clampedPoint)\n\t\t\t\tminimapRef.current.originPagePoint.setTo(clampedPoint)\n\t\t\t\tminimapRef.current.originPageCenter.setTo(_vpPageBounds.center)\n\t\t\t}\n\n\t\t\tfunction release(e: PointerEvent) {\n\t\t\t\tif (elm) {\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\t\t\t\trPointing.current = false\n\t\t\t\tdocument.body.removeEventListener('pointerup', release)\n\t\t\t}\n\n\t\t\tdocument.body.addEventListener('pointerup', release)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onPointerMove = React.useCallback(\n\t\t(e: React.PointerEvent<HTMLCanvasElement>) => {\n\t\t\tif (!minimapRef.current) return\n\t\t\tconst point = minimapRef.current.minimapScreenPointToPagePoint(\n\t\t\t\te.clientX,\n\t\t\t\te.clientY,\n\t\t\t\te.shiftKey,\n\t\t\t\ttrue\n\t\t\t)\n\n\t\t\tif (rPointing.current) {\n\t\t\t\tif (minimapRef.current.isInViewport) {\n\t\t\t\t\tconst delta = minimapRef.current.originPagePoint\n\t\t\t\t\t\t.clone()\n\t\t\t\t\t\t.sub(minimapRef.current.originPageCenter)\n\t\t\t\t\teditor.centerOnPoint(Vec.Sub(point, delta))\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\teditor.centerOnPoint(point)\n\t\t\t}\n\n\t\t\tconst pagePoint = minimapRef.current.getMinimapPagePoint(e.clientX, e.clientY)\n\n\t\t\tconst screenPoint = editor.pageToScreen(pagePoint)\n\n\t\t\tconst info: TLPointerEventInfo = {\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\tpoint: screenPoint,\n\t\t\t\tisPen: editor.getInstanceState().isPenMode,\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst onWheel = React.useCallback(\n\t\t(e: React.WheelEvent<HTMLCanvasElement>) => {\n\t\t\tconst offset = normalizeWheel(e)\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta: offset,\n\t\t\t\tpoint: new Vec(e.clientX, e.clientY),\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t\tmetaKey: e.metaKey,\n\t\t\t\taccelKey: isAccelKey(e),\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst isDarkMode = useIsDarkMode()\n\n\tReact.useEffect(() => {\n\t\t// need to wait a tick for next theme css to be applied\n\t\t// otherwise the minimap will render with the wrong colors\n\t\teditor.timers.setTimeout(() => {\n\t\t\tminimapRef.current?.updateColors()\n\t\t\tminimapRef.current?.render()\n\t\t})\n\t}, [isDarkMode, editor])\n\n\treturn (\n\t\t<div className=\"tlui-minimap\">\n\t\t\t<canvas\n\t\t\t\trole=\"img\"\n\t\t\t\taria-label={msg('navigation-zone.minimap')}\n\t\t\t\tdata-testid=\"minimap.canvas\"\n\t\t\t\tref={rCanvas}\n\t\t\t\tclassName=\"tlui-minimap__canvas\"\n\t\t\t\tonDoubleClick={onDoubleClick}\n\t\t\t\tonPointerMove={onPointerMove}\n\t\t\t\tonPointerDown={onPointerDown}\n\t\t\t\tonWheelCapture={onWheel}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["e"]
 }

package/dist-esm/lib/ui/components/OfflineIndicator/OfflineIndicator.mjs

@@ -1,13 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiIcon } from "../primitives/TldrawUiIcon.mjs";
+import { TldrawUiTooltip } from "../primitives/TldrawUiTooltip.mjs";
 function OfflineIndicator() {
   const msg = useTranslation();
-  return /* @__PURE__ */ jsxs("div", { className: classNames("tlui-offline-indicator"), children: [
-    msg("status.offline"),
-    /* @__PURE__ */ jsx(TldrawUiIcon, { label: msg("status.offline"), icon: "status-offline", small: true })
-  ] });
+  return /* @__PURE__ */ jsx(TldrawUiTooltip, { content: msg("status.offline"), children: /* @__PURE__ */ jsx("div", { className: "tlui-offline-indicator", children: /* @__PURE__ */ jsx(TldrawUiIcon, { icon: "status-offline", label: msg("status.offline"), small: true }) }) });
 }
 export {
   OfflineIndicator

package/dist-esm/lib/ui/components/OfflineIndicator/OfflineIndicator.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/OfflineIndicator/OfflineIndicator.tsx"],
-  "sourcesContent": ["import classNames from 'classnames'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiIcon } from '../primitives/TldrawUiIcon'\n\n/** @public @react */\nexport function OfflineIndicator() {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className={classNames('tlui-offline-indicator')}>\n\t\t\t{msg('status.offline')}\n\t\t\t<TldrawUiIcon label={msg('status.offline')} icon=\"status-offline\" small />\n\t\t</div>\n\t)\n}\n"],
-  "mappings": "AASE,SAEC,KAFD;AATF,OAAO,gBAAgB;AACvB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAGtB,SAAS,mBAAmB;AAClC,QAAM,MAAM,eAAe;AAE3B,SACC,qBAAC,SAAI,WAAW,WAAW,wBAAwB,GACjD;AAAA,QAAI,gBAAgB;AAAA,IACrB,oBAAC,gBAAa,OAAO,IAAI,gBAAgB,GAAG,MAAK,kBAAiB,OAAK,MAAC;AAAA,KACzE;AAEF;",
+  "sourcesContent": ["import { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiIcon } from '../primitives/TldrawUiIcon'\nimport { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'\n\n/** @public @react */\nexport function OfflineIndicator() {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<TldrawUiTooltip content={msg('status.offline')}>\n\t\t\t<div className=\"tlui-offline-indicator\">\n\t\t\t\t<TldrawUiIcon icon=\"status-offline\" label={msg('status.offline')} small />\n\t\t\t</div>\n\t\t</TldrawUiTooltip>\n\t)\n}\n"],
+  "mappings": "AAWI;AAXJ,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAGzB,SAAS,mBAAmB;AAClC,QAAM,MAAM,eAAe;AAE3B,SACC,oBAAC,mBAAgB,SAAS,IAAI,gBAAgB,GAC7C,8BAAC,SAAI,WAAU,0BACd,8BAAC,gBAAa,MAAK,kBAAiB,OAAO,IAAI,gBAAgB,GAAG,OAAK,MAAC,GACzE,GACD;AAEF;",
   "names": []
 }