tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.a478398270c6

package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbar.mjs

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { Box, useEditor, useValue } from "@tldraw/editor";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Box, track, useEditor, useValue } from "@tldraw/editor";
+import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiContextualToolbar } from "../primitives/TldrawUiContextualToolbar.mjs";
 import { AltTextEditor } from "./AltTextEditor.mjs";
 import { DefaultImageToolbarContent } from "./DefaultImageToolbarContent.mjs";
-function DefaultImageToolbar({ children }) {
+const DefaultImageToolbar = track(function DefaultImageToolbar2({
+  children
+}) {
   const editor = useEditor();
   const imageShapeId = useValue(
     "imageShape",
@@ -16,11 +18,7 @@ function DefaultImageToolbar({ children }) {
     },
     [editor]
   );
-  const showToolbar = useValue(
-    "showToolbar",
-    () => editor.isInAny("select.idle", "select.pointing_shape", "select.crop"),
-    [editor]
-  );
+  const showToolbar = editor.isInAny("select.idle", "select.pointing_shape", "select.crop");
   const isLocked = useValue(
     "locked",
     () => imageShapeId ? editor.getShape(imageShapeId)?.isLocked : false,
@@ -28,24 +26,15 @@ function DefaultImageToolbar({ children }) {
   );
   if (!imageShapeId || !showToolbar || isLocked) return null;
   return /* @__PURE__ */ jsx(ContextualToolbarInner, { imageShapeId, children }, imageShapeId);
-}
+});
 function ContextualToolbarInner({
   children,
   imageShapeId
 }) {
   const editor = useEditor();
   const msg = useTranslation();
-  const isChangingCrop = useValue(
-    "editor path",
-    () => editor.isInAny(
-      "select.crop.cropping",
-      "select.crop.pointing_crop_handle",
-      "select.crop.translating_crop"
-    ),
-    [editor]
-  );
-  const camera = useValue("camera", () => editor.getCamera(), [editor]);
   const isInCropTool = useValue("editor path", () => editor.isIn("select.crop."), [editor]);
+  const isCropping = useValue("editor path", () => editor.isIn("select.crop.cropping"), [editor]);
   const previousSelectionBounds = useRef();
   const handleManipulatingEnd = useCallback(() => {
     editor.setCroppingShape(null);
@@ -58,9 +47,6 @@ function ContextualToolbarInner({
     [editor]
   );
   const onEditAltTextClose = useCallback(() => setIsEditingAltText(false), []);
-  useEffect(() => {
-    previousSelectionBounds.current = void 0;
-  }, [camera]);
   const getSelectionBounds = useCallback(() => {
     if (isInCropTool && previousSelectionBounds.current) {
       return previousSelectionBounds.current;
@@ -71,7 +57,7 @@ function ContextualToolbarInner({
     previousSelectionBounds.current = bounds;
     return bounds;
   }, [editor, isInCropTool]);
-  if (isChangingCrop) {
+  if (isCropping) {
     previousSelectionBounds.current = void 0;
     return null;
   }

package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbar.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultImageToolbar.tsx"],
-  "sourcesContent": ["import { Box, TLImageShape, useEditor, useValue } from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiContextualToolbar } from '../primitives/TldrawUiContextualToolbar'\nimport { AltTextEditor } from './AltTextEditor'\nimport { DefaultImageToolbarContent } from './DefaultImageToolbarContent'\n\n/** @public */\nexport interface TLUiImageToolbarProps {\n\tchildren?: React.ReactNode\n}\n\n/** @public @react */\nexport function DefaultImageToolbar({ children }: TLUiImageToolbarProps) {\n\tconst editor = useEditor()\n\tconst imageShapeId = useValue(\n\t\t'imageShape',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape || onlySelectedShape.type !== 'image') return null\n\t\t\treturn onlySelectedShape.id\n\t\t},\n\t\t[editor]\n\t)\n\tconst showToolbar = useValue(\n\t\t'showToolbar',\n\t\t() => editor.isInAny('select.idle', 'select.pointing_shape', 'select.crop'),\n\t\t[editor]\n\t)\n\tconst isLocked = useValue(\n\t\t'locked',\n\t\t() => (imageShapeId ? editor.getShape<TLImageShape>(imageShapeId)?.isLocked : false),\n\t\t[editor, imageShapeId]\n\t)\n\tif (!imageShapeId || !showToolbar || isLocked) return null\n\n\treturn (\n\t\t<ContextualToolbarInner key={imageShapeId} imageShapeId={imageShapeId}>\n\t\t\t{children}\n\t\t</ContextualToolbarInner>\n\t)\n}\n\nfunction ContextualToolbarInner({\n\tchildren,\n\timageShapeId,\n}: {\n\tchildren?: React.ReactNode\n\timageShapeId: TLImageShape['id']\n}) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst isChangingCrop = useValue(\n\t\t'editor path',\n\t\t() =>\n\t\t\teditor.isInAny(\n\t\t\t\t'select.crop.cropping',\n\t\t\t\t'select.crop.pointing_crop_handle',\n\t\t\t\t'select.crop.translating_crop'\n\t\t\t),\n\t\t[editor]\n\t)\n\tconst camera = useValue('camera', () => editor.getCamera(), [editor])\n\tconst isInCropTool = useValue('editor path', () => editor.isIn('select.crop.'), [editor])\n\tconst previousSelectionBounds = useRef<Box | undefined>()\n\tconst handleManipulatingEnd = useCallback(() => {\n\t\teditor.setCroppingShape(null)\n\t\teditor.setCurrentTool('select.idle')\n\t}, [editor])\n\n\tconst [isEditingAltText, setIsEditingAltText] = useState(false)\n\tconst handleEditAltTextStart = useCallback(() => setIsEditingAltText(true), [])\n\tconst handleManipulatingStart = useCallback(\n\t\t() => editor.setCurrentTool('select.crop.idle'),\n\t\t[editor]\n\t)\n\tconst onEditAltTextClose = useCallback(() => setIsEditingAltText(false), [])\n\n\tuseEffect(() => {\n\t\tpreviousSelectionBounds.current = undefined\n\t}, [camera])\n\n\tconst getSelectionBounds = useCallback(() => {\n\t\tif (isInCropTool && previousSelectionBounds.current) {\n\t\t\t// If we're cropping we want to be able to keep the toolbar in the same position.\n\t\t\treturn previousSelectionBounds.current\n\t\t}\n\t\tconst fullBounds = editor.getSelectionScreenBounds()\n\t\tif (!fullBounds) return undefined\n\t\tconst bounds = new Box(fullBounds.x, fullBounds.y, fullBounds.width, 0)\n\t\tpreviousSelectionBounds.current = bounds\n\t\treturn bounds\n\t}, [editor, isInCropTool])\n\n\tif (isChangingCrop) {\n\t\tpreviousSelectionBounds.current = undefined\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiContextualToolbar\n\t\t\tclassName=\"tlui-image__toolbar\"\n\t\t\tgetSelectionBounds={getSelectionBounds}\n\t\t\tlabel={msg('tool.image-toolbar-title')}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\tchildren\n\t\t\t) : isEditingAltText ? (\n\t\t\t\t<AltTextEditor shapeId={imageShapeId} onClose={onEditAltTextClose} source=\"image-toolbar\" />\n\t\t\t) : (\n\t\t\t\t<DefaultImageToolbarContent\n\t\t\t\t\timageShapeId={imageShapeId}\n\t\t\t\t\tisManipulating={isInCropTool}\n\t\t\t\t\tonEditAltTextStart={handleEditAltTextStart}\n\t\t\t\t\tonManipulatingStart={handleManipulatingStart}\n\t\t\t\t\tonManipulatingEnd={handleManipulatingEnd}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TldrawUiContextualToolbar>\n\t)\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { Box, TLImageShape, track, useEditor, useValue } from '@tldraw/editor'\nimport { useCallback, useRef, useState } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiContextualToolbar } from '../primitives/TldrawUiContextualToolbar'\nimport { AltTextEditor } from './AltTextEditor'\nimport { DefaultImageToolbarContent } from './DefaultImageToolbarContent'\n\n/** @public */\nexport interface TLUiImageToolbarProps {\n\tchildren?: React.ReactNode\n}\n\n/** @public @react */\nexport const DefaultImageToolbar = track(function DefaultImageToolbar({\n\tchildren,\n}: TLUiImageToolbarProps) {\n\tconst editor = useEditor()\n\tconst imageShapeId = useValue(\n\t\t'imageShape',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape || onlySelectedShape.type !== 'image') return null\n\t\t\treturn onlySelectedShape.id\n\t\t},\n\t\t[editor]\n\t)\n\tconst showToolbar = editor.isInAny('select.idle', 'select.pointing_shape', 'select.crop')\n\tconst isLocked = useValue(\n\t\t'locked',\n\t\t() => (imageShapeId ? editor.getShape<TLImageShape>(imageShapeId)?.isLocked : false),\n\t\t[editor, imageShapeId]\n\t)\n\tif (!imageShapeId || !showToolbar || isLocked) return null\n\n\treturn (\n\t\t<ContextualToolbarInner key={imageShapeId} imageShapeId={imageShapeId}>\n\t\t\t{children}\n\t\t</ContextualToolbarInner>\n\t)\n})\n\nfunction ContextualToolbarInner({\n\tchildren,\n\timageShapeId,\n}: {\n\tchildren?: React.ReactNode\n\timageShapeId: TLImageShape['id']\n}) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst isInCropTool = useValue('editor path', () => editor.isIn('select.crop.'), [editor])\n\tconst isCropping = useValue('editor path', () => editor.isIn('select.crop.cropping'), [editor])\n\tconst previousSelectionBounds = useRef<Box | undefined>()\n\tconst handleManipulatingEnd = useCallback(() => {\n\t\teditor.setCroppingShape(null)\n\t\teditor.setCurrentTool('select.idle')\n\t}, [editor])\n\n\tconst [isEditingAltText, setIsEditingAltText] = useState(false)\n\tconst handleEditAltTextStart = useCallback(() => setIsEditingAltText(true), [])\n\tconst handleManipulatingStart = useCallback(\n\t\t() => editor.setCurrentTool('select.crop.idle'),\n\t\t[editor]\n\t)\n\tconst onEditAltTextClose = useCallback(() => setIsEditingAltText(false), [])\n\n\tconst getSelectionBounds = useCallback(() => {\n\t\tif (isInCropTool && previousSelectionBounds.current) {\n\t\t\t// If we're cropping we want to be able to keep the toolbar in the same position.\n\t\t\treturn previousSelectionBounds.current\n\t\t}\n\t\tconst fullBounds = editor.getSelectionScreenBounds()\n\t\tif (!fullBounds) return undefined\n\t\tconst bounds = new Box(fullBounds.x, fullBounds.y, fullBounds.width, 0)\n\t\tpreviousSelectionBounds.current = bounds\n\t\treturn bounds\n\t}, [editor, isInCropTool])\n\n\tif (isCropping) {\n\t\tpreviousSelectionBounds.current = undefined\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiContextualToolbar\n\t\t\tclassName=\"tlui-image__toolbar\"\n\t\t\tgetSelectionBounds={getSelectionBounds}\n\t\t\tlabel={msg('tool.image-toolbar-title')}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\tchildren\n\t\t\t) : isEditingAltText ? (\n\t\t\t\t<AltTextEditor shapeId={imageShapeId} onClose={onEditAltTextClose} source=\"image-toolbar\" />\n\t\t\t) : (\n\t\t\t\t<DefaultImageToolbarContent\n\t\t\t\t\timageShapeId={imageShapeId}\n\t\t\t\t\tisManipulating={isInCropTool}\n\t\t\t\t\tonEditAltTextStart={handleEditAltTextStart}\n\t\t\t\t\tonManipulatingStart={handleManipulatingStart}\n\t\t\t\t\tonManipulatingEnd={handleManipulatingEnd}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TldrawUiContextualToolbar>\n\t)\n}\n"],
+  "mappings": "AAmCE;AAnCF,SAAS,KAAmB,OAAO,WAAW,gBAAgB;AAC9D,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAQpC,MAAM,sBAAsB,MAAM,SAASA,qBAAoB;AAAA,EACrE;AACD,GAA0B;AACzB,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe;AAAA,IACpB;AAAA,IACA,MAAM;AACL,YAAM,oBAAoB,OAAO,qBAAqB;AACtD,UAAI,CAAC,qBAAqB,kBAAkB,SAAS,QAAS,QAAO;AACrE,aAAO,kBAAkB;AAAA,IAC1B;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AACA,QAAM,cAAc,OAAO,QAAQ,eAAe,yBAAyB,aAAa;AACxF,QAAM,WAAW;AAAA,IAChB;AAAA,IACA,MAAO,eAAe,OAAO,SAAuB,YAAY,GAAG,WAAW;AAAA,IAC9E,CAAC,QAAQ,YAAY;AAAA,EACtB;AACA,MAAI,CAAC,gBAAgB,CAAC,eAAe,SAAU,QAAO;AAEtD,SACC,oBAAC,0BAA0C,cACzC,YAD2B,YAE7B;AAEF,CAAC;AAED,SAAS,uBAAuB;AAAA,EAC/B;AAAA,EACA;AACD,GAGG;AACF,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,eAAe,SAAS,eAAe,MAAM,OAAO,KAAK,cAAc,GAAG,CAAC,MAAM,CAAC;AACxF,QAAM,aAAa,SAAS,eAAe,MAAM,OAAO,KAAK,sBAAsB,GAAG,CAAC,MAAM,CAAC;AAC9F,QAAM,0BAA0B,OAAwB;AACxD,QAAM,wBAAwB,YAAY,MAAM;AAC/C,WAAO,iBAAiB,IAAI;AAC5B,WAAO,eAAe,aAAa;AAAA,EACpC,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,yBAAyB,YAAY,MAAM,oBAAoB,IAAI,GAAG,CAAC,CAAC;AAC9E,QAAM,0BAA0B;AAAA,IAC/B,MAAM,OAAO,eAAe,kBAAkB;AAAA,IAC9C,CAAC,MAAM;AAAA,EACR;AACA,QAAM,qBAAqB,YAAY,MAAM,oBAAoB,KAAK,GAAG,CAAC,CAAC;AAE3E,QAAM,qBAAqB,YAAY,MAAM;AAC5C,QAAI,gBAAgB,wBAAwB,SAAS;AAEpD,aAAO,wBAAwB;AAAA,IAChC;AACA,UAAM,aAAa,OAAO,yBAAyB;AACnD,QAAI,CAAC,WAAY,QAAO;AACxB,UAAM,SAAS,IAAI,IAAI,WAAW,GAAG,WAAW,GAAG,WAAW,OAAO,CAAC;AACtE,4BAAwB,UAAU;AAClC,WAAO;AAAA,EACR,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,MAAI,YAAY;AACf,4BAAwB,UAAU;AAClC,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,OAAO,IAAI,0BAA0B;AAAA,MAEpC,qBACA,WACG,mBACH,oBAAC,iBAAc,SAAS,cAAc,SAAS,oBAAoB,QAAO,iBAAgB,IAE1F;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,UACpB,qBAAqB;AAAA,UACrB,mBAAmB;AAAA;AAAA,MACpB;AAAA;AAAA,EAEF;AAEF;",
+  "names": ["DefaultImageToolbar"]
 }

package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs

@@ -48,13 +48,13 @@ function OverflowingToolbar({ children }) {
   const css = useMemo(() => {
     const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : "";
     return `
-			#${id}_main > *:nth-of-type(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)}):not([data-radix-popper-content-wrapper])${activeCss} {
+			#${id}_main > *:nth-child(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)})${activeCss} {
 				display: none;
 			}
-			#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {
+			#${id}_more > *:nth-child(-n + ${overflowIndex}) {
 				display: none;
 			}
-			#${id}_more > *:nth-of-type(-n + ${overflowIndex + 4}):not([data-radix-popper-content-wrapper]) {
+			#${id}_more > *:nth-child(-n + ${overflowIndex + 4}) {
 				margin-top: 0;
 			}
         `;

package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/OverflowingToolbar.tsx"],
-  "sourcesContent": ["import {\n\tactiveElementShouldCaptureKeys,\n\tpreventDefault,\n\ttlmenus,\n\tuseEditor,\n\tuseEvent,\n\tuseUniqueSafeId,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { createContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { areShortcutsDisabled } from '../../hooks/useKeyboardShortcuts'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\n\nexport const IsInOverflowContext = createContext(false)\n\nconst NUMBERED_SHORTCUT_KEYS: Record<string, number> = {\n\t'1': 0,\n\t'2': 1,\n\t'3': 2,\n\t'4': 3,\n\t'5': 4,\n\t'6': 5,\n\t'7': 6,\n\t'8': 7,\n\t'9': 8,\n\t'0': 9,\n}\n\n/** @public */\nexport interface OverflowingToolbarProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function OverflowingToolbar({ children }: OverflowingToolbarProps) {\n\tconst editor = useEditor()\n\tconst id = useUniqueSafeId()\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\tconst rButtons = useRef<HTMLElement[]>([])\n\tconst [isOpen, setIsOpen] = useState(false)\n\n\tconst overflowIndex = Math.min(8, 5 + breakpoint)\n\n\tconst [totalItems, setTotalItems] = useState(0)\n\tconst mainToolsRef = useRef<HTMLDivElement>(null)\n\tconst [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)\n\n\tconst css = useMemo(() => {\n\t\tconst activeCss = lastActiveOverflowItem ? `:not([data-value=\"${lastActiveOverflowItem}\"])` : ''\n\n\t\treturn `\n\t\t\t#${id}_main > *:nth-of-type(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)}):not([data-radix-popper-content-wrapper])${activeCss} {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t#${id}_more > *:nth-of-type(-n + ${overflowIndex + 4}):not([data-radix-popper-content-wrapper]) {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n        `\n\t}, [lastActiveOverflowItem, id, overflowIndex])\n\n\tconst onDomUpdate = useEvent(() => {\n\t\tif (!mainToolsRef.current) return\n\n\t\tconst children = Array.from(mainToolsRef.current.children)\n\t\tsetTotalItems(children.length)\n\n\t\t// If the last active overflow item is no longer in the overflow, clear it\n\t\tconst lastActiveElementIdx = children.findIndex(\n\t\t\t(el) => el.getAttribute('data-value') === lastActiveOverflowItem\n\t\t)\n\t\tif (lastActiveElementIdx <= overflowIndex) {\n\t\t\tsetLastActiveOverflowItem(null)\n\t\t}\n\n\t\t// But if there's a new active item...\n\t\tconst activeElementIdx = Array.from(mainToolsRef.current.children).findIndex(\n\t\t\t(el) => el.getAttribute('aria-pressed') === 'true'\n\t\t)\n\t\tif (activeElementIdx === -1) return\n\n\t\t// ...and it's in the overflow, set it as the last active overflow item\n\t\tif (activeElementIdx >= overflowIndex) {\n\t\t\tsetLastActiveOverflowItem(children[activeElementIdx].getAttribute('data-value'))\n\t\t}\n\n\t\t// Save the buttons that are actually visible\n\t\trButtons.current = Array.from(mainToolsRef.current?.children ?? []).filter(\n\t\t\t(el): el is HTMLElement => {\n\t\t\t\t// only count html elements...\n\t\t\t\tif (!(el instanceof HTMLElement)) return false\n\n\t\t\t\t// ...that are buttons...\n\t\t\t\tif (el.tagName.toLowerCase() !== 'button') return false\n\n\t\t\t\t// ...that are actually visible\n\t\t\t\treturn !!(el.offsetWidth || el.offsetHeight)\n\t\t\t}\n\t\t)\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tonDomUpdate()\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tif (!mainToolsRef.current) return\n\n\t\tconst mutationObserver = new MutationObserver(onDomUpdate)\n\t\tmutationObserver.observe(mainToolsRef.current, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tattributeFilter: ['data-value', 'aria-pressed'],\n\t\t})\n\n\t\treturn () => {\n\t\t\tmutationObserver.disconnect()\n\t\t}\n\t}, [onDomUpdate])\n\n\tuseEffect(() => {\n\t\tif (!editor.options.enableToolbarKeyboardShortcuts) return\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (areShortcutsDisabled(editor) || activeElementShouldCaptureKeys(true /* allow buttons */))\n\t\t\t\treturn\n\t\t\t// no accelerator keys\n\t\t\tif (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return\n\t\t\tconst index = NUMBERED_SHORTCUT_KEYS[event.key]\n\t\t\tif (typeof index === 'number') {\n\t\t\t\tpreventDefault(event)\n\t\t\t\trButtons.current[index]?.click()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleKeyDown)\n\t\t}\n\t}, [editor])\n\n\tconst popoverId = 'toolbar overflow'\n\treturn (\n\t\t<>\n\t\t\t<style nonce={editor.options.nonce}>{css}</style>\n\t\t\t<TldrawUiToolbar\n\t\t\t\tclassName={classNames('tlui-toolbar__tools', {\n\t\t\t\t\t'tlui-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,\n\t\t\t\t})}\n\t\t\t\tlabel={msg('tool-panel.title')}\n\t\t\t>\n\t\t\t\t<div id={`${id}_main`} ref={mainToolsRef} className=\"tlui-toolbar__tools__list\">\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"toolbar\" sourceId=\"toolbar\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</div>\n\t\t\t\t{/* There is a +1 because if the menu is just one item, it's not necessary. */}\n\t\t\t\t{totalItems > overflowIndex + 1 && (\n\t\t\t\t\t<IsInOverflowContext.Provider value={true}>\n\t\t\t\t\t\t<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\ttitle={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-toolbar__overflow\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"chevron-up\" />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t\t\t<TldrawUiPopoverContent side=\"top\" align=\"center\">\n\t\t\t\t\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-buttons__grid\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more-content\"\n\t\t\t\t\t\t\t\t\tlabel={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\tid={`${id}_more`}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"toolbar-overflow\" sourceId=\"toolbar\">\n\t\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t\t\t</TldrawUiPopover>\n\t\t\t\t\t</IsInOverflowContext.Provider>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\nexport const isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tactiveElementShouldCaptureKeys,\n\tpreventDefault,\n\ttlmenus,\n\tuseEditor,\n\tuseEvent,\n\tuseUniqueSafeId,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { createContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { areShortcutsDisabled } from '../../hooks/useKeyboardShortcuts'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\n\nexport const IsInOverflowContext = createContext(false)\n\nconst NUMBERED_SHORTCUT_KEYS: Record<string, number> = {\n\t'1': 0,\n\t'2': 1,\n\t'3': 2,\n\t'4': 3,\n\t'5': 4,\n\t'6': 5,\n\t'7': 6,\n\t'8': 7,\n\t'9': 8,\n\t'0': 9,\n}\n\n/** @public */\nexport interface OverflowingToolbarProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function OverflowingToolbar({ children }: OverflowingToolbarProps) {\n\tconst editor = useEditor()\n\tconst id = useUniqueSafeId()\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\tconst rButtons = useRef<HTMLElement[]>([])\n\tconst [isOpen, setIsOpen] = useState(false)\n\n\tconst overflowIndex = Math.min(8, 5 + breakpoint)\n\n\tconst [totalItems, setTotalItems] = useState(0)\n\tconst mainToolsRef = useRef<HTMLDivElement>(null)\n\tconst [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)\n\n\tconst css = useMemo(() => {\n\t\tconst activeCss = lastActiveOverflowItem ? `:not([data-value=\"${lastActiveOverflowItem}\"])` : ''\n\n\t\treturn `\n\t\t\t#${id}_main > *:nth-child(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)})${activeCss} {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t#${id}_more > *:nth-child(-n + ${overflowIndex}) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t#${id}_more > *:nth-child(-n + ${overflowIndex + 4}) {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n        `\n\t}, [lastActiveOverflowItem, id, overflowIndex])\n\n\tconst onDomUpdate = useEvent(() => {\n\t\tif (!mainToolsRef.current) return\n\n\t\tconst children = Array.from(mainToolsRef.current.children)\n\t\tsetTotalItems(children.length)\n\n\t\t// If the last active overflow item is no longer in the overflow, clear it\n\t\tconst lastActiveElementIdx = children.findIndex(\n\t\t\t(el) => el.getAttribute('data-value') === lastActiveOverflowItem\n\t\t)\n\t\tif (lastActiveElementIdx <= overflowIndex) {\n\t\t\tsetLastActiveOverflowItem(null)\n\t\t}\n\n\t\t// But if there's a new active item...\n\t\tconst activeElementIdx = Array.from(mainToolsRef.current.children).findIndex(\n\t\t\t(el) => el.getAttribute('aria-pressed') === 'true'\n\t\t)\n\t\tif (activeElementIdx === -1) return\n\n\t\t// ...and it's in the overflow, set it as the last active overflow item\n\t\tif (activeElementIdx >= overflowIndex) {\n\t\t\tsetLastActiveOverflowItem(children[activeElementIdx].getAttribute('data-value'))\n\t\t}\n\n\t\t// Save the buttons that are actually visible\n\t\trButtons.current = Array.from(mainToolsRef.current?.children ?? []).filter(\n\t\t\t(el): el is HTMLElement => {\n\t\t\t\t// only count html elements...\n\t\t\t\tif (!(el instanceof HTMLElement)) return false\n\n\t\t\t\t// ...that are buttons...\n\t\t\t\tif (el.tagName.toLowerCase() !== 'button') return false\n\n\t\t\t\t// ...that are actually visible\n\t\t\t\treturn !!(el.offsetWidth || el.offsetHeight)\n\t\t\t}\n\t\t)\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tonDomUpdate()\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tif (!mainToolsRef.current) return\n\n\t\tconst mutationObserver = new MutationObserver(onDomUpdate)\n\t\tmutationObserver.observe(mainToolsRef.current, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tattributeFilter: ['data-value', 'aria-pressed'],\n\t\t})\n\n\t\treturn () => {\n\t\t\tmutationObserver.disconnect()\n\t\t}\n\t}, [onDomUpdate])\n\n\tuseEffect(() => {\n\t\tif (!editor.options.enableToolbarKeyboardShortcuts) return\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (areShortcutsDisabled(editor) || activeElementShouldCaptureKeys(true /* allow buttons */))\n\t\t\t\treturn\n\t\t\t// no accelerator keys\n\t\t\tif (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return\n\t\t\tconst index = NUMBERED_SHORTCUT_KEYS[event.key]\n\t\t\tif (typeof index === 'number') {\n\t\t\t\tpreventDefault(event)\n\t\t\t\trButtons.current[index]?.click()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleKeyDown)\n\t\t}\n\t}, [editor])\n\n\tconst popoverId = 'toolbar overflow'\n\treturn (\n\t\t<>\n\t\t\t<style nonce={editor.options.nonce}>{css}</style>\n\t\t\t<TldrawUiToolbar\n\t\t\t\tclassName={classNames('tlui-toolbar__tools', {\n\t\t\t\t\t'tlui-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,\n\t\t\t\t})}\n\t\t\t\tlabel={msg('tool-panel.title')}\n\t\t\t>\n\t\t\t\t<div id={`${id}_main`} ref={mainToolsRef} className=\"tlui-toolbar__tools__list\">\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"toolbar\" sourceId=\"toolbar\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</div>\n\t\t\t\t{/* There is a +1 because if the menu is just one item, it's not necessary. */}\n\t\t\t\t{totalItems > overflowIndex + 1 && (\n\t\t\t\t\t<IsInOverflowContext.Provider value={true}>\n\t\t\t\t\t\t<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\ttitle={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-toolbar__overflow\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"chevron-up\" />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t\t\t<TldrawUiPopoverContent side=\"top\" align=\"center\">\n\t\t\t\t\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-buttons__grid\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more-content\"\n\t\t\t\t\t\t\t\t\tlabel={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\tid={`${id}_more`}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"toolbar-overflow\" sourceId=\"toolbar\">\n\t\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t\t\t</TldrawUiPopover>\n\t\t\t\t\t</IsInOverflowContext.Provider>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\nexport const isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n"],
+  "mappings": "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",
   "names": ["children"]
 }

package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs

@@ -6,7 +6,6 @@ import { useBreakpoint } from "../../context/breakpoints.mjs";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiButton } from "../primitives/Button/TldrawUiButton.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
-import { TldrawUiTooltip } from "../primitives/TldrawUiTooltip.mjs";
 function ToggleToolLockedButton({ activeToolId }) {
   const editor = useEditor();
   const breakpoint = useBreakpoint();
@@ -16,7 +15,7 @@ function ToggleToolLockedButton({ activeToolId }) {
   ]);
   const tool = useValue("current tool", () => editor.getCurrentTool(), [editor]);
   if (!activeToolId || !tool.isLockable) return null;
-  return /* @__PURE__ */ jsx(TldrawUiTooltip, { content: msg("action.toggle-tool-lock"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     TldrawUiButton,
     {
       type: "normal",
@@ -28,7 +27,7 @@ function ToggleToolLockedButton({ activeToolId }) {
       onClick: () => editor.updateInstanceState({ isToolLocked: !isToolLocked }),
       children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: isToolLocked ? "lock" : "unlock", small: true })
     }
-  ) });
+  );
 }
 export {
   ToggleToolLockedButton

package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx"],
-  "sourcesContent": ["import { useEditor, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'\n\n/** @public */\nexport interface ToggleToolLockedButtonProps {\n\tactiveToolId?: string\n}\n\n/** @public @react */\nexport function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps) {\n\tconst editor = useEditor()\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\n\tconst isToolLocked = useValue('is tool locked', () => editor.getInstanceState().isToolLocked, [\n\t\teditor,\n\t])\n\tconst tool = useValue('current tool', () => editor.getCurrentTool(), [editor])\n\n\tif (!activeToolId || !tool.isLockable) return null\n\n\treturn (\n\t\t<TldrawUiTooltip content={msg('action.toggle-tool-lock')}>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"normal\"\n\t\t\t\ttitle={msg('action.toggle-tool-lock')}\n\t\t\t\tdata-testid=\"tool-lock\"\n\t\t\t\tclassName={classNames('tlui-toolbar__lock-button', {\n\t\t\t\t\t'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,\n\t\t\t\t})}\n\t\t\t\tonClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />\n\t\t\t</TldrawUiButton>\n\t\t</TldrawUiTooltip>\n\t)\n}\n"],
-  "mappings": "AAsCI;AAtCJ,SAAS,WAAW,gBAAgB;AACpC,OAAO,gBAAgB;AACvB,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAQzB,SAAS,uBAAuB,EAAE,aAAa,GAAgC;AACrF,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,cAAc;AACjC,QAAM,MAAM,eAAe;AAE3B,QAAM,eAAe,SAAS,kBAAkB,MAAM,OAAO,iBAAiB,EAAE,cAAc;AAAA,IAC7F;AAAA,EACD,CAAC;AACD,QAAM,OAAO,SAAS,gBAAgB,MAAM,OAAO,eAAe,GAAG,CAAC,MAAM,CAAC;AAE7E,MAAI,CAAC,gBAAgB,CAAC,KAAK,WAAY,QAAO;AAE9C,SACC,oBAAC,mBAAgB,SAAS,IAAI,yBAAyB,GACtD;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,OAAO,IAAI,yBAAyB;AAAA,MACpC,eAAY;AAAA,MACZ,WAAW,WAAW,6BAA6B;AAAA,QAClD,qCAAqC,aAAa,oBAAoB;AAAA,MACvE,CAAC;AAAA,MACD,SAAS,MAAM,OAAO,oBAAoB,EAAE,cAAc,CAAC,aAAa,CAAC;AAAA,MAEzE,8BAAC,sBAAmB,MAAM,eAAe,SAAS,UAAU,OAAK,MAAC;AAAA;AAAA,EACnE,GACD;AAEF;",
+  "sourcesContent": ["import { useEditor, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\n\ninterface ToggleToolLockedButtonProps {\n\tactiveToolId?: string\n}\n\nexport function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps) {\n\tconst editor = useEditor()\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\n\tconst isToolLocked = useValue('is tool locked', () => editor.getInstanceState().isToolLocked, [\n\t\teditor,\n\t])\n\tconst tool = useValue('current tool', () => editor.getCurrentTool(), [editor])\n\n\tif (!activeToolId || !tool.isLockable) return null\n\n\treturn (\n\t\t<TldrawUiButton\n\t\t\ttype=\"normal\"\n\t\t\ttitle={msg('action.toggle-tool-lock')}\n\t\t\tdata-testid=\"tool-lock\"\n\t\t\tclassName={classNames('tlui-toolbar__lock-button', {\n\t\t\t\t'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,\n\t\t\t})}\n\t\t\tonClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}\n\t\t>\n\t\t\t<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />\n\t\t</TldrawUiButton>\n\t)\n}\n"],
+  "mappings": "AAkCG;AAlCH,SAAS,WAAW,gBAAgB;AACpC,OAAO,gBAAgB;AACvB,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAM5B,SAAS,uBAAuB,EAAE,aAAa,GAAgC;AACrF,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,cAAc;AACjC,QAAM,MAAM,eAAe;AAE3B,QAAM,eAAe,SAAS,kBAAkB,MAAM,OAAO,iBAAiB,EAAE,cAAc;AAAA,IAC7F;AAAA,EACD,CAAC;AACD,QAAM,OAAO,SAAS,gBAAgB,MAAM,OAAO,eAAe,GAAG,CAAC,MAAM,CAAC;AAE7E,MAAI,CAAC,gBAAgB,CAAC,KAAK,WAAY,QAAO;AAE9C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,OAAO,IAAI,yBAAyB;AAAA,MACpC,eAAY;AAAA,MACZ,WAAW,WAAW,6BAA6B;AAAA,QAClD,qCAAqC,aAAa,oBAAoB;AAAA,MACvE,CAAC;AAAA,MACD,SAAS,MAAM,OAAO,oBAAoB,EAAE,cAAc,CAAC,aAAa,CAAC;AAAA,MAEzE,8BAAC,sBAAmB,MAAM,eAAe,SAAS,UAAU,OAAK,MAAC;AAAA;AAAA,EACnE;AAEF;",
   "names": []
 }

package/dist-esm/lib/ui/components/menu-items.mjs

@@ -453,26 +453,6 @@ function ToggleReduceMotionItem() {
     }
   );
 }
-function ToggleKeyboardShortcutsItem() {
-  const editor = useEditor();
-  const keyboardShortcuts = useValue(
-    "keyboardShortcuts",
-    () => editor.user.getAreKeyboardShortcutsEnabled(),
-    [editor]
-  );
-  return /* @__PURE__ */ jsx(
-    TldrawUiMenuActionCheckboxItem,
-    {
-      actionId: "toggle-keyboard-shortcuts",
-      checked: keyboardShortcuts
-    }
-  );
-}
-function ToggleUiLabelsItem() {
-  const editor = useEditor();
-  const showUiLabels = useValue("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
-  return /* @__PURE__ */ jsx(TldrawUiMenuActionCheckboxItem, { actionId: "toggle-ui-labels", checked: showUiLabels });
-}
 function ToggleDebugModeItem() {
   const editor = useEditor();
   const isDebugMode = useValue("isDebugMode", () => editor.getInstanceState().isDebugMode, [editor]);
@@ -548,14 +528,12 @@ export {
   ToggleEdgeScrollingItem,
   ToggleFocusModeItem,
   ToggleGridItem,
-  ToggleKeyboardShortcutsItem,
   ToggleLockMenuItem,
   TogglePasteAtCursorItem,
   ToggleReduceMotionItem,
   ToggleSnapModeItem,
   ToggleToolLockItem,
   ToggleTransparentBgMenuItem,
-  ToggleUiLabelsItem,
   ToggleWrapModeItem,
   UngroupMenuItem,
   UnlockAllMenuItem,

package/dist-esm/lib/ui/components/menu-items.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/menu-items.tsx"],
-  "sourcesContent": ["import {\n\tTLBookmarkShape,\n\tTLEmbedShape,\n\tTLFrameShape,\n\tTLImageShape,\n\tTLPageId,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { supportsDownloadingOriginal } from '../context/actions'\nimport { useUiEvents } from '../context/events'\nimport { useToasts } from '../context/toasts'\nimport {\n\tshowMenuPaste,\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseAnySelectedShapesCount,\n\tuseHasLinkShapeSelected,\n\tuseOnlyFlippableShape,\n\tuseShowAutoSizeToggle,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../hooks/menu-hooks'\nimport { useGetEmbedDefinition } from '../hooks/useGetEmbedDefinition'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TldrawUiMenuActionCheckboxItem } from './primitives/menus/TldrawUiMenuActionCheckboxItem'\nimport { TldrawUiMenuActionItem } from './primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuItem } from './primitives/menus/TldrawUiMenuItem'\nimport { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'\n\n/* -------------------- Selection ------------------- */\n\n/** @public @react */\nexport function ToggleAutoSizeMenuItem() {\n\tconst shouldDisplay = useShowAutoSizeToggle()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-auto-size\" />\n}\n\n/** @public @react */\nexport function EditLinkMenuItem() {\n\tconst shouldDisplay = useHasLinkShapeSelected()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" />\n}\n\n/** @public @react */\nexport function DuplicateMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"duplicate\" />\n}\n\n/** @public @react */\nexport function FlattenMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display flatten option',\n\t\t() => {\n\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\tif (selectedShapeIds.length === 0) return false\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (onlySelectedShape && editor.isShapeOfType<TLImageShape>(onlySelectedShape, 'image')) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"flatten-to-image\" />\n}\n\n/** @public @react */\nexport function DownloadOriginalMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display download original option',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.some((shape) => supportsDownloadingOriginal(shape, editor))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"download-original\" />\n}\n\n/** @public @react */\nexport function GroupMenuItem() {\n\tconst shouldDisplay = useAllowGroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" />\n}\n\n/** @public @react */\nexport function UngroupMenuItem() {\n\tconst shouldDisplay = useAllowUngroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n\n/** @public @react */\nexport function RemoveFrameMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow unframe',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.every((shape) => editor.isShapeOfType<TLFrameShape>(shape, 'frame'))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"remove-frame\" />\n}\n\n/** @public @react */\nexport function FitFrameToContentMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow fit frame to content',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn (\n\t\t\t\teditor.isShapeOfType<TLFrameShape>(onlySelectedShape, 'frame') &&\n\t\t\t\teditor.getSortedChildIdsForParent(onlySelectedShape).length > 0\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"fit-frame-to-content\" />\n}\n\n/** @public @react */\nexport function ToggleLockMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('selected shapes', () => editor.getSelectedShapes().length > 0, [\n\t\teditor,\n\t])\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-lock\" />\n}\n\n/** @public @react */\nexport function ToggleTransparentBgMenuItem() {\n\tconst editor = useEditor()\n\tconst isTransparentBg = useValue(\n\t\t'isTransparentBg',\n\t\t() => !editor.getInstanceState().exportBackground,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-transparent\"\n\t\t\tchecked={isTransparentBg}\n\t\t\ttoggle\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function UnlockAllMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('any shapes', () => editor.getCurrentPageShapeIds().size > 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"unlock-all\" disabled={!shouldDisplay} />\n}\n\n/* ---------------------- Zoom ---------------------- */\n\n/** @public @react */\nexport function ZoomTo100MenuItem() {\n\tconst editor = useEditor()\n\tconst isZoomedTo100 = useValue('zoomed to 100', () => editor.getZoomLevel() === 1, [editor])\n\n\treturn <TldrawUiMenuActionItem actionId=\"zoom-to-100\" noClose disabled={isZoomedTo100} />\n}\n\n/** @public @react */\nexport function ZoomToFitMenuItem() {\n\tconst editor = useEditor()\n\tconst hasShapes = useValue('has shapes', () => editor.getCurrentPageShapeIds().size > 0, [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-fit\"\n\t\t\tdisabled={!hasShapes}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-fit\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ZoomToSelectionMenuItem() {\n\tconst editor = useEditor()\n\tconst hasSelected = useValue('has shapes', () => editor.getSelectedShapeIds().length > 0, [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-selection\"\n\t\t\tdisabled={!hasSelected}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-selection\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/* -------------------- Clipboard ------------------- */\n\n/** @public @react */\nexport function ClipboardMenuGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"clipboard\">\n\t\t\t<CutMenuItem />\n\t\t\t<CopyMenuItem />\n\t\t\t<PasteMenuItem />\n\t\t\t<DuplicateMenuItem />\n\t\t\t<DeleteMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function CopyAsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu\n\t\t\tid=\"copy-as\"\n\t\t\tlabel=\"context-menu.copy-as\"\n\t\t\tsize=\"small\"\n\t\t\tdisabled={!atLeastOneShapeOnPage}\n\t\t>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-group\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-svg\" />\n\t\t\t\t{Boolean(window.navigator.clipboard?.write) && (\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-png\" />\n\t\t\t\t)}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-bg\">\n\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function CutMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"cut\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function CopyMenuItem() {\n\tconst shouldDisplay = useAnySelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"copy\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function PasteMenuItem() {\n\tconst shouldDisplay = showMenuPaste\n\n\treturn <TldrawUiMenuActionItem actionId=\"paste\" disabled={!shouldDisplay} />\n}\n\n/* ------------------- Conversions ------------------ */\n\n/** @public @react */\nexport function ConversionsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\tif (!atLeastOneShapeOnPage) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"conversions\">\n\t\t\t<CopyAsMenuGroup />\n\t\t\t<TldrawUiMenuSubmenu id=\"export-as\" label=\"context-menu.export-as\" size=\"small\">\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-group\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-svg\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-png\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-bg\">\n\t\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t</TldrawUiMenuSubmenu>\n\t\t\t<DownloadOriginalMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/* ------------------ Set Selection ----------------- */\n/** @public @react */\nexport function SelectAllMenuItem() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn <TldrawUiMenuActionItem actionId=\"select-all\" disabled={!atLeastOneShapeOnPage} />\n}\n\n/* ------------------ Delete Group ------------------ */\n\n/** @public @react */\nexport function DeleteMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"delete\" disabled={!oneSelected} />\n}\n\n/* --------------------- Modify --------------------- */\n\n/** @public @react */\nexport function EditMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tif (!useAnySelectedShapesCount(1)) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"edit\" label=\"context-menu.edit\" size=\"small\">\n\t\t\t<GroupMenuItem />\n\t\t\t<UngroupMenuItem />\n\t\t\t<FlattenMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<FitFrameToContentMenuItem />\n\t\t\t<RemoveFrameMenuItem />\n\t\t\t<ConvertToEmbedMenuItem />\n\t\t\t<ConvertToBookmarkMenuItem />\n\t\t\t<ToggleAutoSizeMenuItem />\n\t\t\t<ToggleLockMenuItem />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ArrangeMenuSubmenu() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst onlyFlippableShapeSelected = useOnlyFlippableShape()\n\tconst isReadonlyMode = useReadonly()\n\n\tif (isReadonlyMode) return null\n\tif (!(twoSelected || onlyFlippableShapeSelected)) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"arrange\" label=\"context-menu.arrange\" size=\"small\">\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"align\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<DistributeMenuGroup />\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"stretch\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t{(twoSelected || onlyFlippableShapeSelected) && (\n\t\t\t\t<TldrawUiMenuGroup id=\"flip\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<OrderMenuGroup />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\nfunction DistributeMenuGroup() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tif (!threeSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"distribute\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\nfunction OrderMenuGroup() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst threeStackableItems = useThreeStackableItems()\n\tif (!twoSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"order\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"pack\" />\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-horizontal\" />}\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-vertical\" />}\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tif (isReadonlyMode) return null\n\tif (!oneSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"reorder\" label=\"context-menu.reorder\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"reorder\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function MoveToPageMenu() {\n\tconst editor = useEditor()\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPageId = useValue('current page id', () => editor.getCurrentPageId(), [editor])\n\tconst { addToast } = useToasts()\n\tconst trackEvent = useUiEvents()\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\tif (!oneSelected) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"move-to-page\" label=\"context-menu.move-to-page\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"pages\">\n\t\t\t\t{pages.map((page) => (\n\t\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\tdisabled={currentPageId === page.id}\n\t\t\t\t\t\tlabel={page.name.length > 30 ? `${page.name.slice(0, 30)}\u2026` : page.name}\n\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('move_shapes_to_page')\n\t\t\t\t\t\t\teditor.moveShapesToPage(editor.getSelectedShapeIds(), page.id as TLPageId)\n\n\t\t\t\t\t\t\tconst toPage = editor.getPage(page.id)\n\n\t\t\t\t\t\t\tif (toPage) {\n\t\t\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\t\t\ttitle: 'Changed Page',\n\t\t\t\t\t\t\t\t\tdescription: `Moved to ${toPage.name}.`,\n\t\t\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Go Back',\n\t\t\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('change-page')\n\t\t\t\t\t\t\t\t\t\t\t\teditor.setCurrentPage(currentPageId)\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttrackEvent('move-to-page', { source: 'context-menu' })\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"new-page\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"move-to-new-page\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ConvertToBookmarkMenuItem() {\n\tconst editor = useEditor()\n\n\tconst oneEmbedSelected = useValue(\n\t\t'oneEmbedSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType<TLEmbedShape>(onlySelectedShape, 'embed') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbedSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-bookmark\" />\n}\n\n/** @public @react */\nexport function ConvertToEmbedMenuItem() {\n\tconst editor = useEditor()\n\tconst getEmbedDefinition = useGetEmbedDefinition()\n\n\tconst oneEmbeddableBookmarkSelected = useValue(\n\t\t'oneEmbeddableBookmarkSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType<TLBookmarkShape>(onlySelectedShape, 'bookmark') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\tgetEmbedDefinition(onlySelectedShape.props.url) &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbeddableBookmarkSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-embed\" />\n}\n\n/* ------------------- Preferences ------------------ */\n\n/** @public @react */\nexport function ToggleSnapModeItem() {\n\tconst editor = useEditor()\n\tconst isSnapMode = useValue('isSnapMode', () => editor.user.getIsSnapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-snap-mode\" checked={isSnapMode} />\n}\n\n/** @public @react */\nexport function ToggleToolLockItem() {\n\tconst editor = useEditor()\n\tconst isToolLock = useValue('isToolLock', () => editor.getInstanceState().isToolLocked, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-tool-lock\" checked={isToolLock} />\n}\n\n/** @public @react */\nexport function ToggleGridItem() {\n\tconst editor = useEditor()\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-grid\" checked={isGridMode} />\n}\n\n/** @public @react */\nexport function ToggleWrapModeItem() {\n\tconst editor = useEditor()\n\tconst isWrapMode = useValue('isWrapMode', () => editor.user.getIsWrapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-wrap-mode\" checked={isWrapMode} />\n}\n\n/** @public @react */\nexport function ToggleDarkModeItem() {\n\tconst editor = useEditor()\n\tconst isDarkMode = useValue('isDarkMode', () => editor.user.getIsDarkMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-dark-mode\" checked={isDarkMode} />\n}\n\n/** @public @react */\nexport function ToggleFocusModeItem() {\n\tconst editor = useEditor()\n\tconst isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-focus-mode\" checked={isFocusMode} />\n}\n\n/** @public @react */\nexport function ToggleEdgeScrollingItem() {\n\tconst editor = useEditor()\n\tconst edgeScrollSpeed = useValue('edgeScrollSpeed', () => editor.user.getEdgeScrollSpeed(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-edge-scrolling\"\n\t\t\tchecked={edgeScrollSpeed === 1}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleReduceMotionItem() {\n\tconst editor = useEditor()\n\tconst animationSpeed = useValue('animationSpeed', () => editor.user.getAnimationSpeed(), [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-reduce-motion\"\n\t\t\tchecked={animationSpeed === 0}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleKeyboardShortcutsItem() {\n\tconst editor = useEditor()\n\tconst keyboardShortcuts = useValue(\n\t\t'keyboardShortcuts',\n\t\t() => editor.user.getAreKeyboardShortcutsEnabled(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-keyboard-shortcuts\"\n\t\t\tchecked={keyboardShortcuts}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleUiLabelsItem() {\n\tconst editor = useEditor()\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-ui-labels\" checked={showUiLabels} />\n}\n\n/** @public @react */\nexport function ToggleDebugModeItem() {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('isDebugMode', () => editor.getInstanceState().isDebugMode, [editor])\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-debug-mode\" checked={isDebugMode} />\n}\n\n/** @public @react */\nexport function ToggleDynamicSizeModeItem() {\n\tconst editor = useEditor()\n\tconst isDynamicResizeMode = useValue(\n\t\t'dynamic resize',\n\t\t() => editor.user.getIsDynamicResizeMode(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-dynamic-size-mode\"\n\t\t\tchecked={isDynamicResizeMode}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function TogglePasteAtCursorItem() {\n\tconst editor = useEditor()\n\tconst pasteAtCursor = useValue('paste at cursor', () => editor.user.getIsPasteAtCursorMode(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem actionId=\"toggle-paste-at-cursor\" checked={pasteAtCursor} />\n\t)\n}\n\n/* ---------------------- Print --------------------- */\n\n/** @public @react */\nexport function PrintItem() {\n\tconst editor = useEditor()\n\tconst emptyPage = useValue('emptyPage', () => editor.getCurrentPageShapeIds().size === 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"print\" disabled={emptyPage} />\n}\n\n/* ---------------------- Multiplayer --------------------- */\n\n/** @public @react */\nexport function CursorChatItem() {\n\tconst editor = useEditor()\n\tconst shouldShow = useValue(\n\t\t'show cursor chat',\n\t\t() => editor.getCurrentToolId() === 'select' && !editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\tif (!shouldShow) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"open-cursor-chat\" />\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tTLBookmarkShape,\n\tTLEmbedShape,\n\tTLFrameShape,\n\tTLImageShape,\n\tTLPageId,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { supportsDownloadingOriginal } from '../context/actions'\nimport { useUiEvents } from '../context/events'\nimport { useToasts } from '../context/toasts'\nimport {\n\tshowMenuPaste,\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseAnySelectedShapesCount,\n\tuseHasLinkShapeSelected,\n\tuseOnlyFlippableShape,\n\tuseShowAutoSizeToggle,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../hooks/menu-hooks'\nimport { useGetEmbedDefinition } from '../hooks/useGetEmbedDefinition'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TldrawUiMenuActionCheckboxItem } from './primitives/menus/TldrawUiMenuActionCheckboxItem'\nimport { TldrawUiMenuActionItem } from './primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuItem } from './primitives/menus/TldrawUiMenuItem'\nimport { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'\n\n/* -------------------- Selection ------------------- */\n\n/** @public @react */\nexport function ToggleAutoSizeMenuItem() {\n\tconst shouldDisplay = useShowAutoSizeToggle()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-auto-size\" />\n}\n\n/** @public @react */\nexport function EditLinkMenuItem() {\n\tconst shouldDisplay = useHasLinkShapeSelected()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" />\n}\n\n/** @public @react */\nexport function DuplicateMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"duplicate\" />\n}\n\n/** @public @react */\nexport function FlattenMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display flatten option',\n\t\t() => {\n\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\tif (selectedShapeIds.length === 0) return false\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (onlySelectedShape && editor.isShapeOfType<TLImageShape>(onlySelectedShape, 'image')) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"flatten-to-image\" />\n}\n\n/** @public @react */\nexport function DownloadOriginalMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display download original option',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.some((shape) => supportsDownloadingOriginal(shape, editor))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"download-original\" />\n}\n\n/** @public @react */\nexport function GroupMenuItem() {\n\tconst shouldDisplay = useAllowGroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" />\n}\n\n/** @public @react */\nexport function UngroupMenuItem() {\n\tconst shouldDisplay = useAllowUngroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n\n/** @public @react */\nexport function RemoveFrameMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow unframe',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.every((shape) => editor.isShapeOfType<TLFrameShape>(shape, 'frame'))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"remove-frame\" />\n}\n\n/** @public @react */\nexport function FitFrameToContentMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow fit frame to content',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn (\n\t\t\t\teditor.isShapeOfType<TLFrameShape>(onlySelectedShape, 'frame') &&\n\t\t\t\teditor.getSortedChildIdsForParent(onlySelectedShape).length > 0\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"fit-frame-to-content\" />\n}\n\n/** @public @react */\nexport function ToggleLockMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('selected shapes', () => editor.getSelectedShapes().length > 0, [\n\t\teditor,\n\t])\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-lock\" />\n}\n\n/** @public @react */\nexport function ToggleTransparentBgMenuItem() {\n\tconst editor = useEditor()\n\tconst isTransparentBg = useValue(\n\t\t'isTransparentBg',\n\t\t() => !editor.getInstanceState().exportBackground,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-transparent\"\n\t\t\tchecked={isTransparentBg}\n\t\t\ttoggle\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function UnlockAllMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('any shapes', () => editor.getCurrentPageShapeIds().size > 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"unlock-all\" disabled={!shouldDisplay} />\n}\n\n/* ---------------------- Zoom ---------------------- */\n\n/** @public @react */\nexport function ZoomTo100MenuItem() {\n\tconst editor = useEditor()\n\tconst isZoomedTo100 = useValue('zoomed to 100', () => editor.getZoomLevel() === 1, [editor])\n\n\treturn <TldrawUiMenuActionItem actionId=\"zoom-to-100\" noClose disabled={isZoomedTo100} />\n}\n\n/** @public @react */\nexport function ZoomToFitMenuItem() {\n\tconst editor = useEditor()\n\tconst hasShapes = useValue('has shapes', () => editor.getCurrentPageShapeIds().size > 0, [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-fit\"\n\t\t\tdisabled={!hasShapes}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-fit\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ZoomToSelectionMenuItem() {\n\tconst editor = useEditor()\n\tconst hasSelected = useValue('has shapes', () => editor.getSelectedShapeIds().length > 0, [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-selection\"\n\t\t\tdisabled={!hasSelected}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-selection\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/* -------------------- Clipboard ------------------- */\n\n/** @public @react */\nexport function ClipboardMenuGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"clipboard\">\n\t\t\t<CutMenuItem />\n\t\t\t<CopyMenuItem />\n\t\t\t<PasteMenuItem />\n\t\t\t<DuplicateMenuItem />\n\t\t\t<DeleteMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function CopyAsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu\n\t\t\tid=\"copy-as\"\n\t\t\tlabel=\"context-menu.copy-as\"\n\t\t\tsize=\"small\"\n\t\t\tdisabled={!atLeastOneShapeOnPage}\n\t\t>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-group\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-svg\" />\n\t\t\t\t{Boolean(window.navigator.clipboard?.write) && (\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-png\" />\n\t\t\t\t)}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-bg\">\n\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function CutMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"cut\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function CopyMenuItem() {\n\tconst shouldDisplay = useAnySelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"copy\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function PasteMenuItem() {\n\tconst shouldDisplay = showMenuPaste\n\n\treturn <TldrawUiMenuActionItem actionId=\"paste\" disabled={!shouldDisplay} />\n}\n\n/* ------------------- Conversions ------------------ */\n\n/** @public @react */\nexport function ConversionsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\tif (!atLeastOneShapeOnPage) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"conversions\">\n\t\t\t<CopyAsMenuGroup />\n\t\t\t<TldrawUiMenuSubmenu id=\"export-as\" label=\"context-menu.export-as\" size=\"small\">\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-group\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-svg\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-png\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-bg\">\n\t\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t</TldrawUiMenuSubmenu>\n\t\t\t<DownloadOriginalMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/* ------------------ Set Selection ----------------- */\n/** @public @react */\nexport function SelectAllMenuItem() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn <TldrawUiMenuActionItem actionId=\"select-all\" disabled={!atLeastOneShapeOnPage} />\n}\n\n/* ------------------ Delete Group ------------------ */\n\n/** @public @react */\nexport function DeleteMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"delete\" disabled={!oneSelected} />\n}\n\n/* --------------------- Modify --------------------- */\n\n/** @public @react */\nexport function EditMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tif (!useAnySelectedShapesCount(1)) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"edit\" label=\"context-menu.edit\" size=\"small\">\n\t\t\t<GroupMenuItem />\n\t\t\t<UngroupMenuItem />\n\t\t\t<FlattenMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<FitFrameToContentMenuItem />\n\t\t\t<RemoveFrameMenuItem />\n\t\t\t<ConvertToEmbedMenuItem />\n\t\t\t<ConvertToBookmarkMenuItem />\n\t\t\t<ToggleAutoSizeMenuItem />\n\t\t\t<ToggleLockMenuItem />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ArrangeMenuSubmenu() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst onlyFlippableShapeSelected = useOnlyFlippableShape()\n\tconst isReadonlyMode = useReadonly()\n\n\tif (isReadonlyMode) return null\n\tif (!(twoSelected || onlyFlippableShapeSelected)) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"arrange\" label=\"context-menu.arrange\" size=\"small\">\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"align\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<DistributeMenuGroup />\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"stretch\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t{(twoSelected || onlyFlippableShapeSelected) && (\n\t\t\t\t<TldrawUiMenuGroup id=\"flip\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<OrderMenuGroup />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\nfunction DistributeMenuGroup() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tif (!threeSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"distribute\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\nfunction OrderMenuGroup() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst threeStackableItems = useThreeStackableItems()\n\tif (!twoSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"order\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"pack\" />\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-horizontal\" />}\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-vertical\" />}\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tif (isReadonlyMode) return null\n\tif (!oneSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"reorder\" label=\"context-menu.reorder\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"reorder\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function MoveToPageMenu() {\n\tconst editor = useEditor()\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPageId = useValue('current page id', () => editor.getCurrentPageId(), [editor])\n\tconst { addToast } = useToasts()\n\tconst trackEvent = useUiEvents()\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\tif (!oneSelected) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"move-to-page\" label=\"context-menu.move-to-page\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"pages\">\n\t\t\t\t{pages.map((page) => (\n\t\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\tdisabled={currentPageId === page.id}\n\t\t\t\t\t\tlabel={page.name.length > 30 ? `${page.name.slice(0, 30)}\u2026` : page.name}\n\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('move_shapes_to_page')\n\t\t\t\t\t\t\teditor.moveShapesToPage(editor.getSelectedShapeIds(), page.id as TLPageId)\n\n\t\t\t\t\t\t\tconst toPage = editor.getPage(page.id)\n\n\t\t\t\t\t\t\tif (toPage) {\n\t\t\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\t\t\ttitle: 'Changed Page',\n\t\t\t\t\t\t\t\t\tdescription: `Moved to ${toPage.name}.`,\n\t\t\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Go Back',\n\t\t\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('change-page')\n\t\t\t\t\t\t\t\t\t\t\t\teditor.setCurrentPage(currentPageId)\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttrackEvent('move-to-page', { source: 'context-menu' })\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"new-page\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"move-to-new-page\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ConvertToBookmarkMenuItem() {\n\tconst editor = useEditor()\n\n\tconst oneEmbedSelected = useValue(\n\t\t'oneEmbedSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType<TLEmbedShape>(onlySelectedShape, 'embed') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbedSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-bookmark\" />\n}\n\n/** @public @react */\nexport function ConvertToEmbedMenuItem() {\n\tconst editor = useEditor()\n\tconst getEmbedDefinition = useGetEmbedDefinition()\n\n\tconst oneEmbeddableBookmarkSelected = useValue(\n\t\t'oneEmbeddableBookmarkSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType<TLBookmarkShape>(onlySelectedShape, 'bookmark') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\tgetEmbedDefinition(onlySelectedShape.props.url) &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbeddableBookmarkSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-embed\" />\n}\n\n/* ------------------- Preferences ------------------ */\n\n/** @public @react */\nexport function ToggleSnapModeItem() {\n\tconst editor = useEditor()\n\tconst isSnapMode = useValue('isSnapMode', () => editor.user.getIsSnapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-snap-mode\" checked={isSnapMode} />\n}\n\n/** @public @react */\nexport function ToggleToolLockItem() {\n\tconst editor = useEditor()\n\tconst isToolLock = useValue('isToolLock', () => editor.getInstanceState().isToolLocked, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-tool-lock\" checked={isToolLock} />\n}\n\n/** @public @react */\nexport function ToggleGridItem() {\n\tconst editor = useEditor()\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-grid\" checked={isGridMode} />\n}\n\n/** @public @react */\nexport function ToggleWrapModeItem() {\n\tconst editor = useEditor()\n\tconst isWrapMode = useValue('isWrapMode', () => editor.user.getIsWrapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-wrap-mode\" checked={isWrapMode} />\n}\n\n/** @public @react */\nexport function ToggleDarkModeItem() {\n\tconst editor = useEditor()\n\tconst isDarkMode = useValue('isDarkMode', () => editor.user.getIsDarkMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-dark-mode\" checked={isDarkMode} />\n}\n\n/** @public @react */\nexport function ToggleFocusModeItem() {\n\tconst editor = useEditor()\n\tconst isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-focus-mode\" checked={isFocusMode} />\n}\n\n/** @public @react */\nexport function ToggleEdgeScrollingItem() {\n\tconst editor = useEditor()\n\tconst edgeScrollSpeed = useValue('edgeScrollSpeed', () => editor.user.getEdgeScrollSpeed(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-edge-scrolling\"\n\t\t\tchecked={edgeScrollSpeed === 1}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleReduceMotionItem() {\n\tconst editor = useEditor()\n\tconst animationSpeed = useValue('animationSpeed', () => editor.user.getAnimationSpeed(), [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-reduce-motion\"\n\t\t\tchecked={animationSpeed === 0}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleDebugModeItem() {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('isDebugMode', () => editor.getInstanceState().isDebugMode, [editor])\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-debug-mode\" checked={isDebugMode} />\n}\n\n/** @public @react */\nexport function ToggleDynamicSizeModeItem() {\n\tconst editor = useEditor()\n\tconst isDynamicResizeMode = useValue(\n\t\t'dynamic resize',\n\t\t() => editor.user.getIsDynamicResizeMode(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-dynamic-size-mode\"\n\t\t\tchecked={isDynamicResizeMode}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function TogglePasteAtCursorItem() {\n\tconst editor = useEditor()\n\tconst pasteAtCursor = useValue('paste at cursor', () => editor.user.getIsPasteAtCursorMode(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem actionId=\"toggle-paste-at-cursor\" checked={pasteAtCursor} />\n\t)\n}\n\n/* ---------------------- Print --------------------- */\n\n/** @public @react */\nexport function PrintItem() {\n\tconst editor = useEditor()\n\tconst emptyPage = useValue('emptyPage', () => editor.getCurrentPageShapeIds().size === 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"print\" disabled={emptyPage} />\n}\n\n/* ---------------------- Multiplayer --------------------- */\n\n/** @public @react */\nexport function CursorChatItem() {\n\tconst editor = useEditor()\n\tconst shouldShow = useValue(\n\t\t'show cursor chat',\n\t\t() => editor.getCurrentToolId() === 'select' && !editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\tif (!shouldShow) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"open-cursor-chat\" />\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/ui/components/primitives/Button/TldrawUiButtonIcon.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx"],
-  "sourcesContent": ["import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'\n\n/** @public */\nexport interface TLUiButtonIconProps {\n\ticon: string | TLUiIconJsx\n\tsmall?: boolean\n\tinvertIcon?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps) {\n\treturn (\n\t\t<TldrawUiIcon\n\t\t\taria-hidden=\"true\"\n\t\t\tlabel=\"\"\n\t\t\tclassName=\"tlui-button__icon\"\n\t\t\ticon={icon}\n\t\t\tsmall={small}\n\t\t\tinvertIcon={invertIcon}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "AAYE;AAZF,SAAS,oBAAiC;AAUnC,SAAS,mBAAmB,EAAE,MAAM,OAAO,WAAW,GAAwB;AACpF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { TldrawUiIcon } from '../TldrawUiIcon'\n\n/** @public */\nexport interface TLUiButtonIconProps {\n\ticon: string\n\tsmall?: boolean\n\tinvertIcon?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps) {\n\treturn (\n\t\t<TldrawUiIcon\n\t\t\taria-hidden=\"true\"\n\t\t\tlabel=\"\"\n\t\t\tclassName=\"tlui-button__icon\"\n\t\t\ticon={icon}\n\t\t\tsmall={small}\n\t\t\tinvertIcon={invertIcon}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "AAYE;AAZF,SAAS,oBAAoB;AAUtB,SAAS,mBAAmB,EAAE,MAAM,OAAO,WAAW,GAAwB;AACpF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs

@@ -81,7 +81,6 @@ const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker2(props) {
       "data-testid": `style.${uiType}`,
       type: "single",
       className: classNames("tlui-buttons__grid"),
-      value: value.type === "shared" ? value.value : void 0,
       children: items.map((item) => {
         const label = title + " \u2014 " + msg(`${uiType}-style.${item.value}`);
         return /* @__PURE__ */ jsx(
@@ -92,7 +91,6 @@ const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker2(props) {
             "data-testid": `style.${uiType}.${item.value}`,
             "aria-label": label,
             value: item.value,
-            "data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
             "data-isactive": value.type === "shared" && value.value === item.value,
             title: label,
             className: classNames("tlui-button-grid__button"),

package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx"],
-  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tTLDefaultColorTheme,\n\tuseEditor,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactElement, memo, useMemo, useRef } from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem } from './TldrawUiToolbar'\n\n/** @public */\nexport interface TLUiButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttheme: TLDefaultColorTheme\n\tonValueChange(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\n/** @public */\nexport const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends string>(\n\tprops: TLUiButtonPickerProps<T>\n) {\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\t// columns = clamp(items.length, 2, 4),\n\t\tonValueChange,\n\t\tonHistoryMark,\n\t\ttheme,\n\t} = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rPointing = useRef(false)\n\tconst rPointingOriginalActiveElement = useRef<HTMLElement | null>(null)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\n\t\t\t// This is fun little micro-optimization to make sure that the focus\n\t\t\t// is retained on a text label. That way, you can continue typing\n\t\t\t// after selecting a style.\n\t\t\tconst origActiveEl = rPointingOriginalActiveElement.current\n\t\t\tif (\n\t\t\t\torigActiveEl &&\n\t\t\t\t(['TEXTAREA', 'INPUT'].includes(origActiveEl.nodeName) || origActiveEl.isContentEditable)\n\t\t\t) {\n\t\t\t\torigActiveEl.focus()\n\t\t\t} else if (breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM) {\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t\trPointingOriginalActiveElement.current = null\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\n\t\t\trPointing.current = true\n\t\t\trPointingOriginalActiveElement.current = document.activeElement as HTMLElement\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])\n\n\treturn (\n\t\t<TldrawUiToolbarToggleGroup\n\t\t\tdata-testid={`style.${uiType}`}\n\t\t\ttype=\"single\"\n\t\t\tclassName={classNames('tlui-buttons__grid')}\n\t\t\tvalue={value.type === 'shared' ? value.value : undefined}\n\t\t>\n\t\t\t{items.map((item) => {\n\t\t\t\tconst label = title + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\treturn (\n\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}\n\t\t\t\t\t\tdata-isactive={value.type === 'shared' && value.value === item.value}\n\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\tclassName={classNames('tlui-button-grid__button')}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t? { color: theme[item.value as TLDefaultColorStyle].solid }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t)\n\t\t\t})}\n\t\t</TldrawUiToolbarToggleGroup>\n\t)\n}) as <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tTLDefaultColorTheme,\n\tuseEditor,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactElement, memo, useMemo, useRef } from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem } from './TldrawUiToolbar'\n\n/** @public */\nexport interface TLUiButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttheme: TLDefaultColorTheme\n\tonValueChange(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\n/** @public */\nexport const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends string>(\n\tprops: TLUiButtonPickerProps<T>\n) {\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\t// columns = clamp(items.length, 2, 4),\n\t\tonValueChange,\n\t\tonHistoryMark,\n\t\ttheme,\n\t} = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rPointing = useRef(false)\n\tconst rPointingOriginalActiveElement = useRef<HTMLElement | null>(null)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\n\t\t\t// This is fun little micro-optimization to make sure that the focus\n\t\t\t// is retained on a text label. That way, you can continue typing\n\t\t\t// after selecting a style.\n\t\t\tconst origActiveEl = rPointingOriginalActiveElement.current\n\t\t\tif (\n\t\t\t\torigActiveEl &&\n\t\t\t\t(['TEXTAREA', 'INPUT'].includes(origActiveEl.nodeName) || origActiveEl.isContentEditable)\n\t\t\t) {\n\t\t\t\torigActiveEl.focus()\n\t\t\t} else if (breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM) {\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t\trPointingOriginalActiveElement.current = null\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\n\t\t\trPointing.current = true\n\t\t\trPointingOriginalActiveElement.current = document.activeElement as HTMLElement\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])\n\n\treturn (\n\t\t<TldrawUiToolbarToggleGroup\n\t\t\tdata-testid={`style.${uiType}`}\n\t\t\ttype=\"single\"\n\t\t\tclassName={classNames('tlui-buttons__grid')}\n\t\t>\n\t\t\t{items.map((item) => {\n\t\t\t\tconst label = title + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\treturn (\n\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\tdata-isactive={value.type === 'shared' && value.value === item.value}\n\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\tclassName={classNames('tlui-button-grid__button')}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t? { color: theme[item.value as TLDefaultColorStyle].solid }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t)\n\t\t\t})}\n\t\t</TldrawUiToolbarToggleGroup>\n\t)\n}) as <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement\n"],
+  "mappings": "AAmJM;AAnJN;AAAA,EACC;AAAA,EAKA;AAAA,OACM;AACP,OAAO,gBAAgB;AACvB,SAAuB,MAAM,SAAS,cAAc;AAEpD,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAE9B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,4BAA4B,iCAAiC;AAe/D,MAAM,uBAAuB,KAAK,SAASA,sBACjD,OACC;AACD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AACJ,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AAEjC,QAAM,YAAY,OAAO,KAAK;AAC9B,QAAM,iCAAiC,OAA2B,IAAI;AAEtE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,QAAQ,MAAM;AACjB,UAAM,kBAAkB,MAAM;AAC7B,gBAAU,UAAU;AACpB,aAAO,oBAAoB,aAAa,eAAe;AAKvD,YAAM,eAAe,+BAA+B;AACpD,UACC,iBACC,CAAC,YAAY,OAAO,EAAE,SAAS,aAAa,QAAQ,KAAK,aAAa,oBACtE;AACD,qBAAa,MAAM;AAAA,MACpB,WAAW,cAAc,oBAAoB,WAAW;AACvD,eAAO,aAAa,EAAE,MAAM;AAAA,MAC7B;AACA,qCAA+B,UAAU;AAAA,IAC1C;AAEA,UAAMC,qBAAoB,CAAC,MAA6C;AACvE,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,UAAI,MAAM,SAAS,YAAY,MAAM,UAAU,GAAI;AAEnD,sBAAgB,mBAAmB;AACnC,oBAAc,OAAO,EAAO;AAAA,IAC7B;AAEA,UAAMC,2BAA0B,CAAC,MAA6C;AAC7E,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAE/B,sBAAgB,mBAAmB;AACnC,oBAAc,OAAO,EAAO;AAE5B,gBAAU,UAAU;AACpB,qCAA+B,UAAU,SAAS;AAClD,aAAO,iBAAiB,aAAa,eAAe;AAAA,IACrD;AAEA,UAAMC,4BAA2B,CAAC,MAA6C;AAC9E,UAAI,CAAC,UAAU,QAAS;AAExB,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,oBAAc,OAAO,EAAO;AAAA,IAC7B;AAEA,UAAMC,yBAAwB,CAAC,MAA6C;AAC3E,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,UAAI,MAAM,SAAS,YAAY,MAAM,UAAU,GAAI;AAEnD,oBAAc,OAAO,EAAO;AAAA,IAC7B;AAEA,WAAO;AAAA,MACN,mBAAAH;AAAA,MACA,yBAAAC;AAAA,MACA,0BAAAC;AAAA,MACA,uBAAAC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,QAAQ,YAAY,OAAO,eAAe,eAAe,KAAK,CAAC;AAEnE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAa,SAAS,MAAM;AAAA,MAC5B,MAAK;AAAA,MACL,WAAW,WAAW,oBAAoB;AAAA,MAEzC,gBAAM,IAAI,CAAC,SAAS;AACpB,cAAM,QAAQ,QAAQ,aAAQ,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AACvF,eACC;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YAEL,WAAS,KAAK;AAAA,YACd,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,YAC1C,cAAY;AAAA,YACZ,OAAO,KAAK;AAAA,YACZ,iBAAe,MAAM,SAAS,YAAY,MAAM,UAAU,KAAK;AAAA,YAC/D,OAAO;AAAA,YACP,WAAW,WAAW,0BAA0B;AAAA,YAChD,OACC,UAAW,oBACR,EAAE,OAAO,MAAM,KAAK,KAA4B,EAAE,MAAM,IACxD;AAAA,YAEJ,gBAAgB;AAAA,YAChB,eAAe;AAAA,YACf,aAAa;AAAA,YACb,SAAS;AAAA,YAET,8BAAC,sBAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,UAlBhC,KAAK;AAAA,QAmBX;AAAA,MAEF,CAAC;AAAA;AAAA,EACF;AAEF,CAAC;",
   "names": ["TldrawUiButtonPicker", "handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
 }

package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs

@@ -31,7 +31,7 @@ function TldrawUiDialogCloseButton() {
   ) }) });
 }
 function TldrawUiDialogBody({ className, children, style }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames("tlui-dialog__body", className), style, tabIndex: 0, children });
+  return /* @__PURE__ */ jsx("div", { className: classNames("tlui-dialog__body", className), style, children });
 }
 function TldrawUiDialogFooter({ className, children }) {
   return /* @__PURE__ */ jsx("div", { className: classNames("tlui-dialog__footer", className), children });

package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiDialog.tsx"],
-  "sourcesContent": ["import classNames from 'classnames'\nimport { Dialog as _Dialog } from 'radix-ui'\nimport { CSSProperties, ReactNode } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'\n\n/** @public */\nexport interface TLUiDialogHeaderProps {\n\tclassName?: string\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps) {\n\treturn <div className={classNames('tlui-dialog__header', className)}>{children}</div>\n}\n\n/** @public */\nexport interface TLUiDialogTitleProps {\n\tclassName?: string\n\tchildren: ReactNode\n\tstyle?: CSSProperties\n}\n\n/** @public @react */\nexport function TldrawUiDialogTitle({ className, children, style }: TLUiDialogTitleProps) {\n\treturn (\n\t\t<_Dialog.Title\n\t\t\tdir=\"ltr\"\n\t\t\tclassName={classNames('tlui-dialog__header__title', className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{children}\n\t\t</_Dialog.Title>\n\t)\n}\n\n/** @public @react */\nexport function TldrawUiDialogCloseButton() {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className=\"tlui-dialog__header__close\">\n\t\t\t<_Dialog.DialogClose data-testid=\"dialog.close\" dir=\"ltr\" asChild>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\taria-label={msg('ui.close')}\n\t\t\t\t\tonTouchEnd={(e) => (e.target as HTMLButtonElement).click()}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"cross-2\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</_Dialog.DialogClose>\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport interface TLUiDialogBodyProps {\n\tclassName?: string\n\tchildren: ReactNode\n\tstyle?: CSSProperties\n}\n\n/** @public @react */\nexport function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) {\n\treturn (\n\t\t<div className={classNames('tlui-dialog__body', className)} style={style} tabIndex={0}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport interface TLUiDialogFooterProps {\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps) {\n\treturn <div className={classNames('tlui-dialog__footer', className)}>{children}</div>\n}\n"],
-  "mappings": "AAeQ;AAfR,OAAO,gBAAgB;AACvB,SAAS,UAAU,eAAe;AAElC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAS5B,SAAS,qBAAqB,EAAE,WAAW,SAAS,GAA0B;AACpF,SAAO,oBAAC,SAAI,WAAW,WAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;AAUO,SAAS,oBAAoB,EAAE,WAAW,UAAU,MAAM,GAAyB;AACzF,SACC;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,KAAI;AAAA,MACJ,WAAW,WAAW,8BAA8B,SAAS;AAAA,MAC7D;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;AAGO,SAAS,4BAA4B;AAC3C,QAAM,MAAM,eAAe;AAE3B,SACC,oBAAC,SAAI,WAAU,8BACd,8BAAC,QAAQ,aAAR,EAAoB,eAAY,gBAAe,KAAI,OAAM,SAAO,MAChE;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAY,IAAI,UAAU;AAAA,MAC1B,YAAY,CAAC,MAAO,EAAE,OAA6B,MAAM;AAAA,MAEzD,8BAAC,sBAAmB,OAAK,MAAC,MAAK,WAAU;AAAA;AAAA,EAC1C,GACD,GACD;AAEF;AAUO,SAAS,mBAAmB,EAAE,WAAW,UAAU,MAAM,GAAwB;AACvF,SACC,oBAAC,SAAI,WAAW,WAAW,qBAAqB,SAAS,GAAG,OAAc,UAAU,GAClF,UACF;AAEF;AASO,SAAS,qBAAqB,EAAE,WAAW,SAAS,GAA0B;AACpF,SAAO,oBAAC,SAAI,WAAW,WAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;",
+  "sourcesContent": ["import classNames from 'classnames'\nimport { Dialog as _Dialog } from 'radix-ui'\nimport { CSSProperties, ReactNode } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from './Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'\n\n/** @public */\nexport interface TLUiDialogHeaderProps {\n\tclassName?: string\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps) {\n\treturn <div className={classNames('tlui-dialog__header', className)}>{children}</div>\n}\n\n/** @public */\nexport interface TLUiDialogTitleProps {\n\tclassName?: string\n\tchildren: ReactNode\n\tstyle?: CSSProperties\n}\n\n/** @public @react */\nexport function TldrawUiDialogTitle({ className, children, style }: TLUiDialogTitleProps) {\n\treturn (\n\t\t<_Dialog.Title\n\t\t\tdir=\"ltr\"\n\t\t\tclassName={classNames('tlui-dialog__header__title', className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{children}\n\t\t</_Dialog.Title>\n\t)\n}\n\n/** @public @react */\nexport function TldrawUiDialogCloseButton() {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className=\"tlui-dialog__header__close\">\n\t\t\t<_Dialog.DialogClose data-testid=\"dialog.close\" dir=\"ltr\" asChild>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\taria-label={msg('ui.close')}\n\t\t\t\t\tonTouchEnd={(e) => (e.target as HTMLButtonElement).click()}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"cross-2\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</_Dialog.DialogClose>\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport interface TLUiDialogBodyProps {\n\tclassName?: string\n\tchildren: ReactNode\n\tstyle?: CSSProperties\n}\n\n/** @public @react */\nexport function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) {\n\treturn (\n\t\t<div className={classNames('tlui-dialog__body', className)} style={style}>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\n/** @public */\nexport interface TLUiDialogFooterProps {\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps) {\n\treturn <div className={classNames('tlui-dialog__footer', className)}>{children}</div>\n}\n"],
+  "mappings": "AAeQ;AAfR,OAAO,gBAAgB;AACvB,SAAS,UAAU,eAAe;AAElC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAS5B,SAAS,qBAAqB,EAAE,WAAW,SAAS,GAA0B;AACpF,SAAO,oBAAC,SAAI,WAAW,WAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;AAUO,SAAS,oBAAoB,EAAE,WAAW,UAAU,MAAM,GAAyB;AACzF,SACC;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,KAAI;AAAA,MACJ,WAAW,WAAW,8BAA8B,SAAS;AAAA,MAC7D;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;AAGO,SAAS,4BAA4B;AAC3C,QAAM,MAAM,eAAe;AAE3B,SACC,oBAAC,SAAI,WAAU,8BACd,8BAAC,QAAQ,aAAR,EAAoB,eAAY,gBAAe,KAAI,OAAM,SAAO,MAChE;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAY,IAAI,UAAU;AAAA,MAC1B,YAAY,CAAC,MAAO,EAAE,OAA6B,MAAM;AAAA,MAEzD,8BAAC,sBAAmB,OAAK,MAAC,MAAK,WAAU;AAAA;AAAA,EAC1C,GACD,GACD;AAEF;AAUO,SAAS,mBAAmB,EAAE,WAAW,UAAU,MAAM,GAAwB;AACvF,SACC,oBAAC,SAAI,WAAW,WAAW,qBAAqB,SAAS,GAAG,OAC1D,UACF;AAEF;AASO,SAAS,qBAAqB,EAAE,WAAW,SAAS,GAA0B;AACpF,SAAO,oBAAC,SAAI,WAAW,WAAW,uBAAuB,SAAS,GAAI,UAAS;AAChF;",
   "names": []
 }