npm - tldraw - Versions diffs - 4.3.0-canary.d4af7a11f36b → 4.3.0-canary.da3162650c27 - Mend

tldraw 4.3.0-canary.d4af7a11f36b → 4.3.0-canary.da3162650c27

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

Files changed (561) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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();

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

@@ -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()}`\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;AACjD,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/HelperButtons/BackToContent.mjs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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": []
 }

package/dist-esm/lib/ui/components/PageMenu/PageItemInput.mjs CHANGED Viewed

@@ -34,7 +34,9 @@ const PageItemInput = function PageItemInput2({
     TldrawUiInput,
     {
       className: "tlui-page-menu__item__input",
-      ref: (el) => rInput.current = el,
+      ref: (el) => {
+        rInput.current = el;
+      },
       defaultValue: name,
       onValueChange: handleChange,
       onComplete,

package/dist-esm/lib/ui/components/PageMenu/PageItemInput.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/PageMenu/PageItemInput.tsx"],
-  "sourcesContent": ["import { TLPageId, useEditor } from '@tldraw/editor'\nimport { useCallback, useRef } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { TldrawUiInput } from '../primitives/TldrawUiInput'\n\n/** @public */\nexport interface PageItemInputProps {\n\tname: string\n\tid: TLPageId\n\tisCurrentPage: boolean\n\tonCancel(): void\n\tonComplete?(): void\n}\n\n/** @public @react */\nexport const PageItemInput = function PageItemInput({\n\tname,\n\tid,\n\tisCurrentPage,\n\tonCancel,\n\tonComplete,\n}: PageItemInputProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\n\tconst rInput = useRef<HTMLInputElement | null>(null)\n\tconst rMark = useRef<string | null>(null)\n\n\tconst handleFocus = useCallback(() => {\n\t\trMark.current = editor.markHistoryStoppingPoint('rename page')\n\t}, [editor])\n\n\tconst handleChange = useCallback(\n\t\t(value: string) => {\n\t\t\teditor.renamePage(id, value || 'New Page')\n\t\t\ttrackEvent('rename-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, id, trackEvent]\n\t)\n\n\tconst handleCancel = useCallback(() => {\n\t\tif (rMark.current) {\n\t\t\teditor.bailToMark(rMark.current)\n\t\t}\n\t\tonCancel()\n\t}, [editor, onCancel])\n\n\treturn (\n\t\t<TldrawUiInput\n\t\t\tclassName=\"tlui-page-menu__item__input\"\n\t\t\tref={(el) => (rInput.current = el)}\n\t\t\tdefaultValue={name}\n\t\t\tonValueChange={handleChange}\n\t\t\tonComplete={onComplete}\n\t\t\tonCancel={handleCancel}\n\t\t\tonFocus={handleFocus}\n\t\t\tshouldManuallyMaintainScrollPositionWhenFocused\n\t\t\tautoFocus={isCurrentPage}\n\t\t\tautoSelect\n\t\t/>\n\t)\n}\n"],
-  "mappings": "AAgDE;AAhDF,SAAmB,iBAAiB;AACpC,SAAS,aAAa,cAAc;AACpC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAYvB,MAAM,gBAAgB,SAASA,eAAc;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,YAAY;AAE/B,QAAM,SAAS,OAAgC,IAAI;AACnD,QAAM,QAAQ,OAAsB,IAAI;AAExC,QAAM,cAAc,YAAY,MAAM;AACrC,UAAM,UAAU,OAAO,yBAAyB,aAAa;AAAA,EAC9D,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,eAAe;AAAA,IACpB,CAAC,UAAkB;AAClB,aAAO,WAAW,IAAI,SAAS,UAAU;AACzC,iBAAW,eAAe,EAAE,QAAQ,YAAY,CAAC;AAAA,IAClD;AAAA,IACA,CAAC,QAAQ,IAAI,UAAU;AAAA,EACxB;AAEA,QAAM,eAAe,YAAY,MAAM;AACtC,QAAI,MAAM,SAAS;AAClB,aAAO,WAAW,MAAM,OAAO;AAAA,IAChC;AACA,aAAS;AAAA,EACV,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,KAAK,CAAC,OAAQ,OAAO,UAAU;AAAA,MAC/B,cAAc;AAAA,MACd,eAAe;AAAA,MACf;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,iDAA+C;AAAA,MAC/C,WAAW;AAAA,MACX,YAAU;AAAA;AAAA,EACX;AAEF;",
+  "sourcesContent": ["import { TLPageId, useEditor } from '@tldraw/editor'\nimport { useCallback, useRef } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { TldrawUiInput } from '../primitives/TldrawUiInput'\n\n/** @public */\nexport interface PageItemInputProps {\n\tname: string\n\tid: TLPageId\n\tisCurrentPage: boolean\n\tonCancel(): void\n\tonComplete?(): void\n}\n\n/** @public @react */\nexport const PageItemInput = function PageItemInput({\n\tname,\n\tid,\n\tisCurrentPage,\n\tonCancel,\n\tonComplete,\n}: PageItemInputProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\n\tconst rInput = useRef<HTMLInputElement | null>(null)\n\tconst rMark = useRef<string | null>(null)\n\n\tconst handleFocus = useCallback(() => {\n\t\trMark.current = editor.markHistoryStoppingPoint('rename page')\n\t}, [editor])\n\n\tconst handleChange = useCallback(\n\t\t(value: string) => {\n\t\t\teditor.renamePage(id, value || 'New Page')\n\t\t\ttrackEvent('rename-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, id, trackEvent]\n\t)\n\n\tconst handleCancel = useCallback(() => {\n\t\tif (rMark.current) {\n\t\t\teditor.bailToMark(rMark.current)\n\t\t}\n\t\tonCancel()\n\t}, [editor, onCancel])\n\n\treturn (\n\t\t<TldrawUiInput\n\t\t\tclassName=\"tlui-page-menu__item__input\"\n\t\t\tref={(el) => {\n\t\t\t\trInput.current = el\n\t\t\t}}\n\t\t\tdefaultValue={name}\n\t\t\tonValueChange={handleChange}\n\t\t\tonComplete={onComplete}\n\t\t\tonCancel={handleCancel}\n\t\t\tonFocus={handleFocus}\n\t\t\tshouldManuallyMaintainScrollPositionWhenFocused\n\t\t\tautoFocus={isCurrentPage}\n\t\t\tautoSelect\n\t\t/>\n\t)\n}\n"],
+  "mappings": "AAgDE;AAhDF,SAAmB,iBAAiB;AACpC,SAAS,aAAa,cAAc;AACpC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAYvB,MAAM,gBAAgB,SAASA,eAAc;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,YAAY;AAE/B,QAAM,SAAS,OAAgC,IAAI;AACnD,QAAM,QAAQ,OAAsB,IAAI;AAExC,QAAM,cAAc,YAAY,MAAM;AACrC,UAAM,UAAU,OAAO,yBAAyB,aAAa;AAAA,EAC9D,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,eAAe;AAAA,IACpB,CAAC,UAAkB;AAClB,aAAO,WAAW,IAAI,SAAS,UAAU;AACzC,iBAAW,eAAe,EAAE,QAAQ,YAAY,CAAC;AAAA,IAClD;AAAA,IACA,CAAC,QAAQ,IAAI,UAAU;AAAA,EACxB;AAEA,QAAM,eAAe,YAAY,MAAM;AACtC,QAAI,MAAM,SAAS;AAClB,aAAO,WAAW,MAAM,OAAO;AAAA,IAChC;AACA,aAAS;AAAA,EACV,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,KAAK,CAAC,OAAO;AACZ,eAAO,UAAU;AAAA,MAClB;AAAA,MACA,cAAc;AAAA,MACd,eAAe;AAAA,MACf;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,iDAA+C;AAAA,MAC/C,WAAW;AAAA,MACX,YAAU;AAAA;AAAA,EACX;AAEF;",
   "names": ["PageItemInput"]
 }

package/dist-esm/lib/ui/components/SharePanel/PeopleMenu.mjs CHANGED Viewed

@@ -3,8 +3,10 @@ import { useContainer, useEditor, usePeerIds, useValue } from "@tldraw/editor";
 import { Popover as _Popover } from "radix-ui";
 import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
 import { useBreakpoint } from "../../context/breakpoints.mjs";
+import { useCollaborationStatus } from "../../hooks/useCollaborationStatus.mjs";
 import { useMenuIsOpen } from "../../hooks/useMenuIsOpen.mjs";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { OfflineIndicator } from "../OfflineIndicator/OfflineIndicator.mjs";
 import { PeopleMenuAvatar } from "./PeopleMenuAvatar.mjs";
 import { PeopleMenuItem } from "./PeopleMenuItem.mjs";
 import { PeopleMenuMore } from "./PeopleMenuMore.mjs";
@@ -19,6 +21,10 @@ function PeopleMenu({ children }) {
   const [isOpen, onOpenChange] = useMenuIsOpen("people menu");
   const breakpoint = useBreakpoint();
   const maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5;
+  const collaborationStatus = useCollaborationStatus();
+  if (collaborationStatus === "offline") {
+    return /* @__PURE__ */ jsx(OfflineIndicator, {});
+  }
   if (!userIds.length) return null;
   return /* @__PURE__ */ jsxs(_Popover.Root, { onOpenChange, open: isOpen, children: [
     /* @__PURE__ */ jsx(_Popover.Trigger, { dir: "ltr", asChild: true, children: /* @__PURE__ */ jsx("button", { className: "tlui-people-menu__avatars-button", title: msg("people-menu.title"), children: /* @__PURE__ */ jsxs("div", { className: "tlui-people-menu__avatars", children: [

package/dist-esm/lib/ui/components/SharePanel/PeopleMenu.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/SharePanel/PeopleMenu.tsx"],
-  "sourcesContent": ["import { useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport { ReactNode } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { PeopleMenuAvatar } from './PeopleMenuAvatar'\nimport { PeopleMenuItem } from './PeopleMenuItem'\nimport { PeopleMenuMore } from './PeopleMenuMore'\nimport { UserPresenceEditor } from './UserPresenceEditor'\n\n/** @public */\nexport interface PeopleMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function PeopleMenu({ children }: PeopleMenuProps) {\n\tconst msg = useTranslation()\n\n\tconst container = useContainer()\n\tconst editor = useEditor()\n\n\tconst userIds = usePeerIds()\n\tconst userColor = useValue('user', () => editor.user.getColor(), [editor])\n\tconst userName = useValue('user', () => editor.user.getName(), [editor])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('people menu')\n\tconst breakpoint = useBreakpoint()\n\tconst maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5\n\n\tif (!userIds.length) return null\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<button className=\"tlui-people-menu__avatars-button\" title={msg('people-menu.title')}>\n\t\t\t\t\t<div className=\"tlui-people-menu__avatars\">\n\t\t\t\t\t\t{userIds.slice(-maxAvatars).map((userId) => (\n\t\t\t\t\t\t\t<PeopleMenuAvatar key={userId} userId={userId} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tlui-people-menu__avatar\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: userColor,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{userName?.[0] ?? ''}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{userIds.length > maxAvatars && <PeopleMenuMore count={userIds.length - maxAvatars} />}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t</_Popover.Trigger>\n\t\t\t<_Popover.Portal container={container}>\n\t\t\t\t<_Popover.Content\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\tsideOffset={2}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-people-menu__wrapper\">\n\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t<UserPresenceEditor />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t\t{userIds.map((userId) => {\n\t\t\t\t\t\t\t\t\treturn <PeopleMenuItem key={userId + '_presence'} userId={userId} />\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</_Popover.Content>\n\t\t\t</_Popover.Portal>\n\t\t</_Popover.Root>\n\t)\n}\n"],
-  "mappings": "AAsCK,SAEE,KAFF;AAtCL,SAAS,cAAc,WAAW,YAAY,gBAAgB;AAC9D,SAAS,WAAW,gBAAgB;AAEpC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAQ5B,SAAS,WAAW,EAAE,SAAS,GAAoB;AACzD,QAAM,MAAM,eAAe;AAE3B,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,UAAU;AAEzB,QAAM,UAAU,WAAW;AAC3B,QAAM,YAAY,SAAS,QAAQ,MAAM,OAAO,KAAK,SAAS,GAAG,CAAC,MAAM,CAAC;AACzE,QAAM,WAAW,SAAS,QAAQ,MAAM,OAAO,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC;AAEvE,QAAM,CAAC,QAAQ,YAAY,IAAI,cAAc,aAAa;AAC1D,QAAM,aAAa,cAAc;AACjC,QAAM,aAAa,cAAc,oBAAoB,YAAY,IAAI;AAErE,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAE5B,SACC,qBAAC,SAAS,MAAT,EAAc,cAA4B,MAAM,QAChD;AAAA,wBAAC,SAAS,SAAT,EAAiB,KAAI,OAAM,SAAO,MAClC,8BAAC,YAAO,WAAU,oCAAmC,OAAO,IAAI,mBAAmB,GAClF,+BAAC,SAAI,WAAU,6BACb;AAAA,cAAQ,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,WAChC,oBAAC,oBAA8B,UAAR,MAAwB,CAC/C;AAAA,MACA,QAAQ,SAAS,KACjB;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,iBAAiB;AAAA,UAClB;AAAA,UAEC,qBAAW,CAAC,KAAK;AAAA;AAAA,MACnB;AAAA,MAEA,QAAQ,SAAS,cAAc,oBAAC,kBAAe,OAAO,QAAQ,SAAS,YAAY;AAAA,OACrF,GACD,GACD;AAAA,IACA,oBAAC,SAAS,QAAT,EAAgB,WAChB;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,+BAAC,SAAI,WAAU,6BACd;AAAA,8BAAC,SAAI,WAAU,6BACd,8BAAC,sBAAmB,GACrB;AAAA,UACC,QAAQ,SAAS,KACjB,oBAAC,SAAI,WAAU,6BACb,kBAAQ,IAAI,CAAC,WAAW;AACxB,mBAAO,oBAAC,kBAA0C,UAAtB,SAAS,WAA6B;AAAA,UACnE,CAAC,GACF;AAAA,UAEA;AAAA,WACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport { ReactNode } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useCollaborationStatus } from '../../hooks/useCollaborationStatus'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { OfflineIndicator } from '../OfflineIndicator/OfflineIndicator'\nimport { PeopleMenuAvatar } from './PeopleMenuAvatar'\nimport { PeopleMenuItem } from './PeopleMenuItem'\nimport { PeopleMenuMore } from './PeopleMenuMore'\nimport { UserPresenceEditor } from './UserPresenceEditor'\n\n/** @public */\nexport interface PeopleMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function PeopleMenu({ children }: PeopleMenuProps) {\n\tconst msg = useTranslation()\n\n\tconst container = useContainer()\n\tconst editor = useEditor()\n\n\tconst userIds = usePeerIds()\n\tconst userColor = useValue('user', () => editor.user.getColor(), [editor])\n\tconst userName = useValue('user', () => editor.user.getName(), [editor])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('people menu')\n\tconst breakpoint = useBreakpoint()\n\tconst maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5\n\n\tconst collaborationStatus = useCollaborationStatus()\n\n\tif (collaborationStatus === 'offline') {\n\t\treturn <OfflineIndicator />\n\t}\n\n\tif (!userIds.length) return null\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<button className=\"tlui-people-menu__avatars-button\" title={msg('people-menu.title')}>\n\t\t\t\t\t<div className=\"tlui-people-menu__avatars\">\n\t\t\t\t\t\t{userIds.slice(-maxAvatars).map((userId) => (\n\t\t\t\t\t\t\t<PeopleMenuAvatar key={userId} userId={userId} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tlui-people-menu__avatar\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: userColor,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{userName?.[0] ?? ''}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{userIds.length > maxAvatars && <PeopleMenuMore count={userIds.length - maxAvatars} />}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t</_Popover.Trigger>\n\t\t\t<_Popover.Portal container={container}>\n\t\t\t\t<_Popover.Content\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\tsideOffset={2}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-people-menu__wrapper\">\n\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t<UserPresenceEditor />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t\t{userIds.map((userId) => {\n\t\t\t\t\t\t\t\t\treturn <PeopleMenuItem key={userId + '_presence'} userId={userId} />\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</_Popover.Content>\n\t\t\t</_Popover.Portal>\n\t\t</_Popover.Root>\n\t)\n}\n"],
+  "mappings": "AAqCS,cASJ,YATI;AArCT,SAAS,cAAc,WAAW,YAAY,gBAAgB;AAC9D,SAAS,WAAW,gBAAgB;AAEpC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAQ5B,SAAS,WAAW,EAAE,SAAS,GAAoB;AACzD,QAAM,MAAM,eAAe;AAE3B,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,UAAU;AAEzB,QAAM,UAAU,WAAW;AAC3B,QAAM,YAAY,SAAS,QAAQ,MAAM,OAAO,KAAK,SAAS,GAAG,CAAC,MAAM,CAAC;AACzE,QAAM,WAAW,SAAS,QAAQ,MAAM,OAAO,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC;AAEvE,QAAM,CAAC,QAAQ,YAAY,IAAI,cAAc,aAAa;AAC1D,QAAM,aAAa,cAAc;AACjC,QAAM,aAAa,cAAc,oBAAoB,YAAY,IAAI;AAErE,QAAM,sBAAsB,uBAAuB;AAEnD,MAAI,wBAAwB,WAAW;AACtC,WAAO,oBAAC,oBAAiB;AAAA,EAC1B;AAEA,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAE5B,SACC,qBAAC,SAAS,MAAT,EAAc,cAA4B,MAAM,QAChD;AAAA,wBAAC,SAAS,SAAT,EAAiB,KAAI,OAAM,SAAO,MAClC,8BAAC,YAAO,WAAU,oCAAmC,OAAO,IAAI,mBAAmB,GAClF,+BAAC,SAAI,WAAU,6BACb;AAAA,cAAQ,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,WAChC,oBAAC,oBAA8B,UAAR,MAAwB,CAC/C;AAAA,MACA,QAAQ,SAAS,KACjB;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,iBAAiB;AAAA,UAClB;AAAA,UAEC,qBAAW,CAAC,KAAK;AAAA;AAAA,MACnB;AAAA,MAEA,QAAQ,SAAS,cAAc,oBAAC,kBAAe,OAAO,QAAQ,SAAS,YAAY;AAAA,OACrF,GACD,GACD;AAAA,IACA,oBAAC,SAAS,QAAT,EAAgB,WAChB;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,+BAAC,SAAI,WAAU,6BACd;AAAA,8BAAC,SAAI,WAAU,6BACd,8BAAC,sBAAmB,GACrB;AAAA,UACC,QAAQ,SAAS,KACjB,oBAAC,SAAI,WAAU,6BACb,kBAAQ,IAAI,CAAC,WAAW;AACxB,mBAAO,oBAAC,kBAA0C,UAAtB,SAAS,WAA6B;AAAA,UACnE,CAAC,GACF;AAAA,UAEA;AAAA,WACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
   "names": []
 }