npm - tldraw - Versions diffs - 3.16.0-canary.cc5427cdff41 → 3.16.0-canary.cd822ae4ebee - Mend

tldraw 3.16.0-canary.cc5427cdff41 → 3.16.0-canary.cd822ae4ebee

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

Files changed (184) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/PageMenu/DefaultPageMenu.tsx"],
-  "sourcesContent": ["import {\n\tPageRecordType,\n\tTLPageId,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tstopEventPropagation,\n\ttlenv,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useUiEvents } from '../../context/events'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonCheck } from '../primitives/Button/TldrawUiButtonCheck'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiRow } from '../primitives/layout'\nimport { PageItemInput } from './PageItemInput'\nimport { PageItemSubmenu } from './PageItemSubmenu'\nimport { onMovePage } from './edit-pages-shared'\n\n/** @public @react */\nexport const DefaultPageMenu = memo(function DefaultPageMenu() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst handleOpenChange = useCallback(() => setIsEditing(false), [])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('page-menu', handleOpenChange)\n\n\tconst ITEM_HEIGHT = 36\n\n\tconst rSortableContainer = useRef<HTMLDivElement>(null)\n\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPage = useValue('currentPage', () => editor.getCurrentPage(), [editor])\n\tconst currentPageId = useValue('currentPageId', () => editor.getCurrentPageId(), [editor])\n\n\t// When in readonly mode, we don't allow a user to edit the pages\n\tconst isReadonlyMode = useReadonly()\n\n\t// If the user has reached the max page count, we disable the \"add page\" button\n\tconst maxPageCountReached = useValue(\n\t\t'maxPageCountReached',\n\t\t() => editor.getPages().length >= editor.options.maxPages,\n\t\t[editor]\n\t)\n\n\tconst isCoarsePointer = useValue(\n\t\t'isCoarsePointer',\n\t\t() => editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\t// The component has an \"editing state\" that may be toggled to expose additional controls\n\tconst [isEditing, setIsEditing] = useState(false)\n\n\tuseEffect(\n\t\tfunction closePageMenuOnEnterPressAfterPressingEnterToConfirmRename() {\n\t\t\tfunction handleKeyDown() {\n\t\t\t\tif (isEditing) return\n\t\t\t\tif (document.activeElement === document.body) {\n\t\t\t\t\teditor.menus.clearOpenMenus()\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdocument.addEventListener('keydown', handleKeyDown, { passive: true })\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t},\n\t\t[editor, isEditing]\n\t)\n\n\tconst toggleEditing = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\t\tsetIsEditing((s) => !s)\n\t}, [isReadonlyMode])\n\n\tconst rMutables = useRef({\n\t\tisPointing: false,\n\t\tstatus: 'idle' as 'idle' | 'pointing' | 'dragging',\n\t\tpointing: null as { id: string; index: number } | null,\n\t\tstartY: 0,\n\t\tstartIndex: 0,\n\t\tdragIndex: 0,\n\t})\n\n\tconst [sortablePositionItems, setSortablePositionItems] = useState(\n\t\tObject.fromEntries(\n\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t)\n\t)\n\n\t// Update the sortable position items when the pages change\n\tuseLayoutEffect(() => {\n\t\tsetSortablePositionItems(\n\t\t\tObject.fromEntries(\n\t\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t\t)\n\t\t)\n\t}, [ITEM_HEIGHT, pages])\n\n\t// Scroll the current page into view when the menu opens / when current page changes\n\tuseEffect(() => {\n\t\tif (!isOpen) return\n\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\tconst elm = document.querySelector(`[data-pageid=\"${currentPageId}\"]`) as HTMLDivElement\n\n\t\t\tif (elm) {\n\t\t\t\telm.querySelector('button')?.focus()\n\n\t\t\t\tconst container = rSortableContainer.current\n\t\t\t\tif (!container) return\n\t\t\t\t// Scroll into view is slightly borked on iOS Safari\n\n\t\t\t\t// if top of less than top cuttoff, scroll into view at top\n\t\t\t\tconst elmTopPosition = elm.offsetTop\n\t\t\t\tconst containerScrollTopPosition = container.scrollTop\n\t\t\t\tif (elmTopPosition < containerScrollTopPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmTopPosition })\n\t\t\t\t}\n\t\t\t\t// if bottom position is greater than bottom cutoff, scroll into view at bottom\n\t\t\t\tconst elmBottomPosition = elmTopPosition + ITEM_HEIGHT\n\t\t\t\tconst containerScrollBottomPosition = container.scrollTop + container.offsetHeight\n\t\t\t\tif (elmBottomPosition > containerScrollBottomPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmBottomPosition - container.offsetHeight })\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}, [ITEM_HEIGHT, currentPageId, isOpen, editor])\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { clientY, currentTarget } = e\n\t\t\tconst {\n\t\t\t\tdataset: { id, index },\n\t\t\t} = currentTarget\n\n\t\t\tif (!id || !index) return\n\n\t\t\tconst mut = rMutables.current\n\n\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\tmut.status = 'pointing'\n\t\t\tmut.pointing = { id, index: +index! }\n\t\t\tconst current = sortablePositionItems[id]\n\t\t\tconst dragY = current.y\n\n\t\t\tmut.startY = clientY\n\t\t\tmut.startIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\t\t},\n\t\t[ITEM_HEIGHT, pages.length, sortablePositionItems]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\tif (mut.status === 'pointing') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offset = clientY - mut.startY\n\t\t\t\tif (Math.abs(offset) > 5) {\n\t\t\t\t\tmut.status = 'dragging'\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offsetY = clientY - mut.startY\n\t\t\t\tconst current = sortablePositionItems[mut.pointing!.id]\n\n\t\t\t\tconst { startIndex, pointing } = mut\n\t\t\t\tconst dragY = current.y + offsetY\n\t\t\t\tconst dragIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\n\t\t\t\tconst next = { ...sortablePositionItems }\n\t\t\t\tnext[pointing!.id] = {\n\t\t\t\t\ty: current.y,\n\t\t\t\t\toffsetY,\n\t\t\t\t\tisSelected: true,\n\t\t\t\t}\n\n\t\t\t\tif (dragIndex !== mut.dragIndex) {\n\t\t\t\t\tmut.dragIndex = dragIndex\n\n\t\t\t\t\tfor (let i = 0; i < pages.length; i++) {\n\t\t\t\t\t\tconst item = pages[i]\n\t\t\t\t\t\tif (item.id === mut.pointing!.id) {\n\t\t\t\t\t\t\tcontinue\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tlet { y } = next[item.id]\n\n\t\t\t\t\t\tif (dragIndex === startIndex) {\n\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t} else if (dragIndex < startIndex) {\n\t\t\t\t\t\t\tif (dragIndex <= i && i < startIndex) {\n\t\t\t\t\t\t\t\ty = (i + 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else if (dragIndex > startIndex) {\n\t\t\t\t\t\t\tif (dragIndex >= i && i > startIndex) {\n\t\t\t\t\t\t\t\ty = (i - 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (y !== next[item.id].y) {\n\t\t\t\t\t\t\tnext[item.id] = { y, offsetY: 0, isSelected: true }\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tsetSortablePositionItems(next)\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages, sortablePositionItems]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { id, index } = mut.pointing!\n\t\t\t\tonMovePage(editor, id as TLPageId, index, mut.dragIndex, trackEvent)\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tmut.status = 'idle'\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst handleKeyDown = useCallback(\n\t\t(e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\t// bail on escape\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tif (mut.status === 'dragging') {\n\t\t\t\t\tsetSortablePositionItems(\n\t\t\t\t\t\tObject.fromEntries(\n\t\t\t\t\t\t\tpages.map((page, i) => [\n\t\t\t\t\t\t\t\tpage.id,\n\t\t\t\t\t\t\t\t{ y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false },\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\tmut.status = 'idle'\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages]\n\t)\n\n\tconst handleCreatePageClick = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\n\t\teditor.run(() => {\n\t\t\teditor.markHistoryStoppingPoint('creating page')\n\t\t\tconst newPageId = PageRecordType.createId()\n\t\t\teditor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })\n\t\t\teditor.setCurrentPage(newPageId)\n\n\t\t\tsetIsEditing(true)\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\tconst elm = document.querySelector(`[data-pageid=\"${newPageId}\"]`) as HTMLDivElement\n\n\t\t\t\tif (elm) {\n\t\t\t\t\telm.querySelector('button')?.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t\ttrackEvent('new-page', { source: 'page-menu' })\n\t}, [editor, msg, isReadonlyMode, trackEvent])\n\n\tconst changePage = useCallback(\n\t\t(id: TLPageId) => {\n\t\t\teditor.setCurrentPage(id)\n\t\t\ttrackEvent('change-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst renamePage = useCallback(\n\t\t(id: TLPageId, name: string) => {\n\t\t\teditor.renamePage(id, name)\n\t\t\ttrackEvent('rename-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\treturn (\n\t\t<TldrawUiPopover id=\"pages\" onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<TldrawUiPopoverTrigger data-testid=\"main.page-menu\">\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={currentPage.name}\n\t\t\t\t\tdata-testid=\"page-menu.button\"\n\t\t\t\t\tclassName=\"tlui-page-menu__trigger\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-page-menu__name\">{currentPage.name}</div>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"chevron-down\" small />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent\n\t\t\t\tside=\"bottom\"\n\t\t\t\talign=\"start\"\n\t\t\t\tsideOffset={0}\n\t\t\t\tdisableEscapeKeyDown={isEditing}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-page-menu__wrapper\">\n\t\t\t\t\t<div className=\"tlui-page-menu__header\">\n\t\t\t\t\t\t<div className=\"tlui-page-menu__header__title\">{msg('page-menu.title')}</div>\n\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t<TldrawUiRow>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.edit\"\n\t\t\t\t\t\t\t\t\ttitle={msg(isEditing ? 'page-menu.edit-done' : 'page-menu.edit-start')}\n\t\t\t\t\t\t\t\t\tonClick={toggleEditing}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={isEditing ? 'check' : 'edit'} />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.create\"\n\t\t\t\t\t\t\t\t\ttitle={msg(\n\t\t\t\t\t\t\t\t\t\tmaxPageCountReached\n\t\t\t\t\t\t\t\t\t\t\t? 'page-menu.max-page-count-reached'\n\t\t\t\t\t\t\t\t\t\t\t: 'page-menu.create-new-page'\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdisabled={maxPageCountReached}\n\t\t\t\t\t\t\t\t\tonClick={handleCreatePageClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"plus\" />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t</TldrawUiRow>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-testid=\"page-menu.list\"\n\t\t\t\t\t\tclassName=\"tlui-page-menu__list tlui-menu__group\"\n\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT * pages.length + 4 }}\n\t\t\t\t\t\tref={rSortableContainer}\n\t\t\t\t\t>\n\t\t\t\t\t\t{pages.map((page, index) => {\n\t\t\t\t\t\t\tconst position = sortablePositionItems[page.id] ?? {\n\t\t\t\t\t\t\t\tposition: index * 40,\n\t\t\t\t\t\t\t\toffsetY: 0,\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn isEditing ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id + '_editing'}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tzIndex: page.id === currentPage.id ? 888 : index,\n\t\t\t\t\t\t\t\t\t\ttransform: `translate(0px, ${position.y + position.offsetY}px)`,\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<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__handle\"\n\t\t\t\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\t\t\t\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\t\t\t\tdata-id={page.id}\n\t\t\t\t\t\t\t\t\t\tdata-index={index}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"drag-handle-dots\" />\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer ? (\n\t\t\t\t\t\t\t\t\t\t// sigh, this is a workaround for iOS Safari\n\t\t\t\t\t\t\t\t\t\t// because the device and the radix popover seem\n\t\t\t\t\t\t\t\t\t\t// to be fighting over scroll position. Nothing\n\t\t\t\t\t\t\t\t\t\t// else seems to work!\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__title\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemInput\n\t\t\t\t\t\t\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\t\t\t\t\t\t\tname={page.name}\n\t\t\t\t\t\t\t\t\t\t\t\tisCurrentPage={page.id === currentPage.id}\n\t\t\t\t\t\t\t\t\t\t\t\tonComplete={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\" data-isediting={isEditing}>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu index={index} item={page} listSize={pages.length} />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => changePage(page.id)}\n\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\ttitle={msg('page-menu.go-to-page')}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\t\t\t\t\t\t\tif (page.id === currentPage.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\ttoggleEditing()\n\t\t\t\t\t\t\t\t\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\t\t\t\t\t\t\t\t}\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\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\">\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu\n\t\t\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\t\t\titem={page}\n\t\t\t\t\t\t\t\t\t\t\t\tlistSize={pages.length}\n\t\t\t\t\t\t\t\t\t\t\t\tonRename={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (tlenv.isIos) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(true)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (currentPageId !== page.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tchangePage(page.id)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tPageRecordType,\n\tTLPageId,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\ttlenv,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useUiEvents } from '../../context/events'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonCheck } from '../primitives/Button/TldrawUiButtonCheck'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiRow } from '../primitives/layout'\nimport { PageItemInput } from './PageItemInput'\nimport { PageItemSubmenu } from './PageItemSubmenu'\nimport { onMovePage } from './edit-pages-shared'\n\n/** @public @react */\nexport const DefaultPageMenu = memo(function DefaultPageMenu() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst handleOpenChange = useCallback(() => setIsEditing(false), [])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('page-menu', handleOpenChange)\n\n\tconst ITEM_HEIGHT = 36\n\n\tconst rSortableContainer = useRef<HTMLDivElement>(null)\n\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPage = useValue('currentPage', () => editor.getCurrentPage(), [editor])\n\tconst currentPageId = useValue('currentPageId', () => editor.getCurrentPageId(), [editor])\n\n\t// When in readonly mode, we don't allow a user to edit the pages\n\tconst isReadonlyMode = useReadonly()\n\n\t// If the user has reached the max page count, we disable the \"add page\" button\n\tconst maxPageCountReached = useValue(\n\t\t'maxPageCountReached',\n\t\t() => editor.getPages().length >= editor.options.maxPages,\n\t\t[editor]\n\t)\n\n\tconst isCoarsePointer = useValue(\n\t\t'isCoarsePointer',\n\t\t() => editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\t// The component has an \"editing state\" that may be toggled to expose additional controls\n\tconst [isEditing, setIsEditing] = useState(false)\n\n\tuseEffect(\n\t\tfunction closePageMenuOnEnterPressAfterPressingEnterToConfirmRename() {\n\t\t\tfunction handleKeyDown() {\n\t\t\t\tif (isEditing) return\n\t\t\t\tif (document.activeElement === document.body) {\n\t\t\t\t\teditor.menus.clearOpenMenus()\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdocument.addEventListener('keydown', handleKeyDown, { passive: true })\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t},\n\t\t[editor, isEditing]\n\t)\n\n\tconst toggleEditing = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\t\tsetIsEditing((s) => !s)\n\t}, [isReadonlyMode])\n\n\tconst rMutables = useRef({\n\t\tisPointing: false,\n\t\tstatus: 'idle' as 'idle' | 'pointing' | 'dragging',\n\t\tpointing: null as { id: string; index: number } | null,\n\t\tstartY: 0,\n\t\tstartIndex: 0,\n\t\tdragIndex: 0,\n\t})\n\n\tconst [sortablePositionItems, setSortablePositionItems] = useState(\n\t\tObject.fromEntries(\n\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t)\n\t)\n\n\t// Update the sortable position items when the pages change\n\tuseLayoutEffect(() => {\n\t\tsetSortablePositionItems(\n\t\t\tObject.fromEntries(\n\t\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t\t)\n\t\t)\n\t}, [ITEM_HEIGHT, pages])\n\n\t// Scroll the current page into view when the menu opens / when current page changes\n\tuseEffect(() => {\n\t\tif (!isOpen) return\n\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\tconst elm = document.querySelector(`[data-pageid=\"${currentPageId}\"]`) as HTMLDivElement\n\n\t\t\tif (elm) {\n\t\t\t\telm.querySelector('button')?.focus()\n\n\t\t\t\tconst container = rSortableContainer.current\n\t\t\t\tif (!container) return\n\t\t\t\t// Scroll into view is slightly borked on iOS Safari\n\n\t\t\t\t// if top of less than top cuttoff, scroll into view at top\n\t\t\t\tconst elmTopPosition = elm.offsetTop\n\t\t\t\tconst containerScrollTopPosition = container.scrollTop\n\t\t\t\tif (elmTopPosition < containerScrollTopPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmTopPosition })\n\t\t\t\t}\n\t\t\t\t// if bottom position is greater than bottom cutoff, scroll into view at bottom\n\t\t\t\tconst elmBottomPosition = elmTopPosition + ITEM_HEIGHT\n\t\t\t\tconst containerScrollBottomPosition = container.scrollTop + container.offsetHeight\n\t\t\t\tif (elmBottomPosition > containerScrollBottomPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmBottomPosition - container.offsetHeight })\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}, [ITEM_HEIGHT, currentPageId, isOpen, editor])\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { clientY, currentTarget } = e\n\t\t\tconst {\n\t\t\t\tdataset: { id, index },\n\t\t\t} = currentTarget\n\n\t\t\tif (!id || !index) return\n\n\t\t\tconst mut = rMutables.current\n\n\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\tmut.status = 'pointing'\n\t\t\tmut.pointing = { id, index: +index! }\n\t\t\tconst current = sortablePositionItems[id]\n\t\t\tconst dragY = current.y\n\n\t\t\tmut.startY = clientY\n\t\t\tmut.startIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\t\t},\n\t\t[ITEM_HEIGHT, pages.length, sortablePositionItems]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\tif (mut.status === 'pointing') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offset = clientY - mut.startY\n\t\t\t\tif (Math.abs(offset) > 5) {\n\t\t\t\t\tmut.status = 'dragging'\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offsetY = clientY - mut.startY\n\t\t\t\tconst current = sortablePositionItems[mut.pointing!.id]\n\n\t\t\t\tconst { startIndex, pointing } = mut\n\t\t\t\tconst dragY = current.y + offsetY\n\t\t\t\tconst dragIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\n\t\t\t\tconst next = { ...sortablePositionItems }\n\t\t\t\tnext[pointing!.id] = {\n\t\t\t\t\ty: current.y,\n\t\t\t\t\toffsetY,\n\t\t\t\t\tisSelected: true,\n\t\t\t\t}\n\n\t\t\t\tif (dragIndex !== mut.dragIndex) {\n\t\t\t\t\tmut.dragIndex = dragIndex\n\n\t\t\t\t\tfor (let i = 0; i < pages.length; i++) {\n\t\t\t\t\t\tconst item = pages[i]\n\t\t\t\t\t\tif (item.id === mut.pointing!.id) {\n\t\t\t\t\t\t\tcontinue\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tlet { y } = next[item.id]\n\n\t\t\t\t\t\tif (dragIndex === startIndex) {\n\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t} else if (dragIndex < startIndex) {\n\t\t\t\t\t\t\tif (dragIndex <= i && i < startIndex) {\n\t\t\t\t\t\t\t\ty = (i + 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else if (dragIndex > startIndex) {\n\t\t\t\t\t\t\tif (dragIndex >= i && i > startIndex) {\n\t\t\t\t\t\t\t\ty = (i - 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (y !== next[item.id].y) {\n\t\t\t\t\t\t\tnext[item.id] = { y, offsetY: 0, isSelected: true }\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tsetSortablePositionItems(next)\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages, sortablePositionItems]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { id, index } = mut.pointing!\n\t\t\t\tonMovePage(editor, id as TLPageId, index, mut.dragIndex, trackEvent)\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tmut.status = 'idle'\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst handleKeyDown = useCallback(\n\t\t(e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\t// bail on escape\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tif (mut.status === 'dragging') {\n\t\t\t\t\tsetSortablePositionItems(\n\t\t\t\t\t\tObject.fromEntries(\n\t\t\t\t\t\t\tpages.map((page, i) => [\n\t\t\t\t\t\t\t\tpage.id,\n\t\t\t\t\t\t\t\t{ y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false },\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\tmut.status = 'idle'\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages]\n\t)\n\n\tconst handleCreatePageClick = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\n\t\teditor.run(() => {\n\t\t\teditor.markHistoryStoppingPoint('creating page')\n\t\t\tconst newPageId = PageRecordType.createId()\n\t\t\teditor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })\n\t\t\teditor.setCurrentPage(newPageId)\n\n\t\t\tsetIsEditing(true)\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\tconst elm = document.querySelector(`[data-pageid=\"${newPageId}\"]`) as HTMLDivElement\n\n\t\t\t\tif (elm) {\n\t\t\t\t\telm.querySelector('button')?.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t\ttrackEvent('new-page', { source: 'page-menu' })\n\t}, [editor, msg, isReadonlyMode, trackEvent])\n\n\tconst changePage = useCallback(\n\t\t(id: TLPageId) => {\n\t\t\teditor.setCurrentPage(id)\n\t\t\ttrackEvent('change-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst renamePage = useCallback(\n\t\t(id: TLPageId, name: string) => {\n\t\t\teditor.renamePage(id, name)\n\t\t\ttrackEvent('rename-page', { source: 'page-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\treturn (\n\t\t<TldrawUiPopover id=\"pages\" onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<TldrawUiPopoverTrigger data-testid=\"main.page-menu\">\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={currentPage.name}\n\t\t\t\t\tdata-testid=\"page-menu.button\"\n\t\t\t\t\tclassName=\"tlui-page-menu__trigger\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-page-menu__name\">{currentPage.name}</div>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"chevron-down\" small />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent\n\t\t\t\tside=\"bottom\"\n\t\t\t\talign=\"start\"\n\t\t\t\tsideOffset={0}\n\t\t\t\tdisableEscapeKeyDown={isEditing}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-page-menu__wrapper\">\n\t\t\t\t\t<div className=\"tlui-page-menu__header\">\n\t\t\t\t\t\t<div className=\"tlui-page-menu__header__title\">{msg('page-menu.title')}</div>\n\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t<TldrawUiRow>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.edit\"\n\t\t\t\t\t\t\t\t\ttitle={msg(isEditing ? 'page-menu.edit-done' : 'page-menu.edit-start')}\n\t\t\t\t\t\t\t\t\tonClick={toggleEditing}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={isEditing ? 'check' : 'edit'} />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.create\"\n\t\t\t\t\t\t\t\t\ttitle={msg(\n\t\t\t\t\t\t\t\t\t\tmaxPageCountReached\n\t\t\t\t\t\t\t\t\t\t\t? 'page-menu.max-page-count-reached'\n\t\t\t\t\t\t\t\t\t\t\t: 'page-menu.create-new-page'\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdisabled={maxPageCountReached}\n\t\t\t\t\t\t\t\t\tonClick={handleCreatePageClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"plus\" />\n\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t</TldrawUiRow>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-testid=\"page-menu.list\"\n\t\t\t\t\t\tclassName=\"tlui-page-menu__list tlui-menu__group\"\n\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT * pages.length + 4 }}\n\t\t\t\t\t\tref={rSortableContainer}\n\t\t\t\t\t>\n\t\t\t\t\t\t{pages.map((page, index) => {\n\t\t\t\t\t\t\tconst position = sortablePositionItems[page.id] ?? {\n\t\t\t\t\t\t\t\tposition: index * 40,\n\t\t\t\t\t\t\t\toffsetY: 0,\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn isEditing ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id + '_editing'}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tzIndex: page.id === currentPage.id ? 888 : index,\n\t\t\t\t\t\t\t\t\t\ttransform: `translate(0px, ${position.y + position.offsetY}px)`,\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<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__handle\"\n\t\t\t\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\t\t\t\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\t\t\t\tdata-id={page.id}\n\t\t\t\t\t\t\t\t\t\tdata-index={index}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"drag-handle-dots\" />\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer ? (\n\t\t\t\t\t\t\t\t\t\t// sigh, this is a workaround for iOS Safari\n\t\t\t\t\t\t\t\t\t\t// because the device and the radix popover seem\n\t\t\t\t\t\t\t\t\t\t// to be fighting over scroll position. Nothing\n\t\t\t\t\t\t\t\t\t\t// else seems to work!\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__title\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemInput\n\t\t\t\t\t\t\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\t\t\t\t\t\t\tname={page.name}\n\t\t\t\t\t\t\t\t\t\t\t\tisCurrentPage={page.id === currentPage.id}\n\t\t\t\t\t\t\t\t\t\t\t\tonComplete={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(false)\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\" data-isediting={isEditing}>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu index={index} item={page} listSize={pages.length} />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\t\t\t\tdata-pageid={page.id}\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.item\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => changePage(page.id)}\n\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\ttitle={msg('page-menu.go-to-page')}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\t\t\t\t\t\t\tif (page.id === currentPage.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\ttoggleEditing()\n\t\t\t\t\t\t\t\t\t\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\t\t\t\t\t\t\t\t\t}\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\t\t<TldrawUiButtonCheck checked={page.id === currentPage.id} />\n\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\">\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu\n\t\t\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\t\t\titem={page}\n\t\t\t\t\t\t\t\t\t\t\t\tlistSize={pages.length}\n\t\t\t\t\t\t\t\t\t\t\t\tonRename={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (tlenv.isIos) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenamePage(page.id, name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(true)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (currentPageId !== page.id) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tchangePage(page.id)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["DefaultPageMenu", "handleKeyDown"]
 }

package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs CHANGED Viewed

@@ -94,6 +94,7 @@ const StylePanelButtonPicker = memo(function StylePanelButtonPicker2(props) {
         value: value.type === "shared" ? value.value : void 0,
         asChild: true,
         children: /* @__PURE__ */ jsx(Layout, { children: items.map((item) => {
+          const isActive = value.type === "shared" && value.value === item.value;
           const label = title + " \u2014 " + msg(`${uiType}-style.${item.value}`);
           return /* @__PURE__ */ jsx(
             TldrawUiToolbarToggleItem,
@@ -101,10 +102,18 @@ const StylePanelButtonPicker = memo(function StylePanelButtonPicker2(props) {
               type: "icon",
               "data-id": item.value,
               "data-testid": `style.${uiType}.${item.value}`,
-              "aria-label": label,
+              "aria-label": label + (isActive ? ` (${msg("style-panel.selected")})` : ""),
+              tooltip: /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { children: label }),
+                isActive ? /* @__PURE__ */ jsxs("div", { children: [
+                  "(",
+                  msg("style-panel.selected"),
+                  ")"
+                ] }) : null
+              ] }),
               value: item.value,
               "data-state": value.type === "shared" && value.value === item.value ? "on" : "off",
-              "data-isactive": value.type === "shared" && value.value === item.value,
+              "data-isactive": isActive,
               title: label,
               style: style === DefaultColorStyle ? { color: getColorValue(theme, item.value, "solid") } : void 0,
               onPointerEnter: handleButtonPointerEnter,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx"],
-  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tgetColorValue,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { memo, ReactElement, useMemo, useRef } from 'react'\nimport { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'\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 '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiToolbar,\n\tTldrawUiToolbarToggleGroup,\n\tTldrawUiToolbarToggleItem,\n} from '../primitives/TldrawUiToolbar'\nimport { TldrawUiGrid, TldrawUiRow } from '../primitives/layout'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public */\nexport interface StylePanelButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\n/** @public */\nexport const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T extends string>(\n\tprops: StylePanelButtonPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t\tonHistoryMark = ctx.onHistoryMark,\n\t} = props\n\tconst theme = useDefaultColorTheme()\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\tconst Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow\n\n\treturn (\n\t\t<>\n\t\t\t{ctx.showUiLabels && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar label={title}>\n\t\t\t\t<TldrawUiToolbarToggleGroup\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\ttype=\"single\"\n\t\t\t\t\tvalue={value.type === 'shared' ? value.value : undefined}\n\t\t\t\t\tasChild\n\t\t\t\t>\n\t\t\t\t\t<Layout>\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\tconst label =\n\t\t\t\t\t\t\t\ttitle + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}\n\t\t\t\t\t\t\t\t\tdata-isactive={value.type === 'shared' && value.value === item.value}\n\t\t\t\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t\t\t\t? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</Layout>\n\t\t\t\t</TldrawUiToolbarToggleGroup>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}) as <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tgetColorValue,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { memo, ReactElement, useMemo, useRef } from 'react'\nimport { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'\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 '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiToolbar,\n\tTldrawUiToolbarToggleGroup,\n\tTldrawUiToolbarToggleItem,\n} from '../primitives/TldrawUiToolbar'\nimport { TldrawUiGrid, TldrawUiRow } from '../primitives/layout'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public */\nexport interface StylePanelButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\tonValueChange?(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\n/** @public */\nexport const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T extends string>(\n\tprops: StylePanelButtonPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t\tonHistoryMark = ctx.onHistoryMark,\n\t} = props\n\tconst theme = useDefaultColorTheme()\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\tconst Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow\n\n\treturn (\n\t\t<>\n\t\t\t{ctx.showUiLabels && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar label={title}>\n\t\t\t\t<TldrawUiToolbarToggleGroup\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\ttype=\"single\"\n\t\t\t\t\tvalue={value.type === 'shared' ? value.value : undefined}\n\t\t\t\t\tasChild\n\t\t\t\t>\n\t\t\t\t\t<Layout>\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\tconst isActive = value.type === 'shared' && value.value === item.value\n\t\t\t\t\t\t\tconst label =\n\t\t\t\t\t\t\t\ttitle + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\taria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}\n\t\t\t\t\t\t\t\t\ttooltip={\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<div>{label}</div>\n\t\t\t\t\t\t\t\t\t\t\t{isActive ? <div>({msg('style-panel.selected')})</div> : null}\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\tvalue={item.value}\n\t\t\t\t\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}\n\t\t\t\t\t\t\t\t\tdata-isactive={isActive}\n\t\t\t\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t\t\t\t? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</Layout>\n\t\t\t\t</TldrawUiToolbarToggleGroup>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}) as <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement\n"],
+  "mappings": "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",
   "names": ["StylePanelButtonPicker", "handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
 }

package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs CHANGED Viewed

@@ -3,9 +3,9 @@ import { preventDefault, useEditor } from "@tldraw/editor";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useUiEvents } from "../../context/events.mjs";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { TldrawUiButton } from "../primitives/Button/TldrawUiButton.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
 import { TldrawUiInput } from "../primitives/TldrawUiInput.mjs";
-import { TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
 function AltTextEditor({ shapeId, onClose, source }) {
   const editor = useEditor();
   const [altText, setAltText] = useState(() => {
@@ -56,6 +56,7 @@ function AltTextEditor({ shapeId, onClose, source }) {
         "data-testid": "media-toolbar.alt-text-input",
         value: altText,
         placeholder: msg("tool.media-alt-text-desc"),
+        "aria-label": msg("tool.media-alt-text-desc"),
         onValueChange: handleValueChange,
         onComplete: handleComplete,
         onCancel: handleAltTextCancel,
@@ -63,7 +64,7 @@ function AltTextEditor({ shapeId, onClose, source }) {
       }
     ),
     !isReadonly && /* @__PURE__ */ jsx(
-      TldrawUiToolbarButton,
+      TldrawUiButton,
       {
         title: msg("tool.media-alt-text-confirm"),
         "data-testid": "tool.media-alt-text-confirm",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/AltTextEditor.tsx"],
-  "sourcesContent": ["import { preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiInput } from '../primitives/TldrawUiInput'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public */\nexport interface AltTextEditorProps {\n\tshapeId: TLShapeId\n\tonClose(): void\n\tsource: 'image-toolbar' | 'video-toolbar'\n}\n\n/** @public @react */\nexport function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps) {\n\tconst editor = useEditor()\n\tconst [altText, setAltText] = useState(() => {\n\t\tconst shape = editor.getShape<TLShape>(shapeId)\n\t\tif (!shape) return ''\n\t\tif (!('altText' in shape.props)) throw Error('Shape does not have altText property')\n\t\treturn shape.props.altText || ''\n\t})\n\tconst msg = useTranslation()\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst trackEvent = useUiEvents()\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst handleValueChange = (value: string) => setAltText(value)\n\n\tconst handleComplete = () => {\n\t\ttrackEvent('set-alt-text', { source })\n\t\tconst shape = editor.getShape<TLShape & { props: { altText: string } }>(shapeId)\n\t\tif (!shape) return\n\t\teditor.updateShapes([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { altText },\n\t\t\t},\n\t\t])\n\t\tonClose()\n\t}\n\n\tconst handleConfirm = () => handleComplete()\n\tconst handleAltTextCancel = useCallback(() => onClose(), [onClose])\n\n\tuseEffect(() => {\n\t\tref.current?.select()\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\thandleAltTextCancel()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleKeyDown, { capture: true })\n\t\t}\n\t}, [handleAltTextCancel])\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiInput\n\t\t\t\tref={ref}\n\t\t\t\tclassName=\"tlui-media__toolbar-alt-text-input\"\n\t\t\t\tdata-testid=\"media-toolbar.alt-text-input\"\n\t\t\t\tvalue={altText}\n\t\t\t\tplaceholder={msg('tool.media-alt-text-desc')}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonComplete={handleComplete}\n\t\t\t\tonCancel={handleAltTextCancel}\n\t\t\t\tdisabled={isReadonly}\n\t\t\t/>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttitle={msg('tool.media-alt-text-confirm')}\n\t\t\t\t\tdata-testid=\"tool.media-alt-text-confirm\"\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\t\tonClick={handleConfirm}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"check\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
-  "mappings": "AAiEE,mBACC,KADD;AAjEF,SAAS,gBAAoC,iBAAiB;AAC9D,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AACzD,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAU/B,SAAS,cAAc,EAAE,SAAS,SAAS,OAAO,GAAuB;AAC/E,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM;AAC5C,UAAM,QAAQ,OAAO,SAAkB,OAAO;AAC9C,QAAI,CAAC,MAAO,QAAO;AACnB,QAAI,EAAE,aAAa,MAAM,OAAQ,OAAM,MAAM,sCAAsC;AACnF,WAAO,MAAM,MAAM,WAAW;AAAA,EAC/B,CAAC;AACD,QAAM,MAAM,eAAe;AAC3B,QAAM,MAAM,OAAyB,IAAI;AACzC,QAAM,aAAa,YAAY;AAC/B,QAAM,aAAa,OAAO,cAAc;AAExC,QAAM,oBAAoB,CAAC,UAAkB,WAAW,KAAK;AAE7D,QAAM,iBAAiB,MAAM;AAC5B,eAAW,gBAAgB,EAAE,OAAO,CAAC;AACrC,UAAM,QAAQ,OAAO,SAAmD,OAAO;AAC/E,QAAI,CAAC,MAAO;AACZ,WAAO,aAAa;AAAA,MACnB;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,OAAO,EAAE,QAAQ;AAAA,MAClB;AAAA,IACD,CAAC;AACD,YAAQ;AAAA,EACT;AAEA,QAAM,gBAAgB,MAAM,eAAe;AAC3C,QAAM,sBAAsB,YAAY,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC;AAElE,YAAU,MAAM;AACf,QAAI,SAAS,OAAO;AAEpB,aAAS,cAAc,OAAsB;AAC5C,UAAI,MAAM,QAAQ,UAAU;AAC3B,cAAM,gBAAgB;AACtB,4BAAoB;AAAA,MACrB;AAAA,IACD;AAEA,aAAS,iBAAiB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AACrE,WAAO,MAAM;AACZ,eAAS,oBAAoB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AAAA,IACzE;AAAA,EACD,GAAG,CAAC,mBAAmB,CAAC;AAExB,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAO;AAAA,QACP,aAAa,IAAI,0BAA0B;AAAA,QAC3C,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,UAAU;AAAA;AAAA,IACX;AAAA,IACC,CAAC,cACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,IAAI,6BAA6B;AAAA,QACxC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QAET,8BAAC,sBAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,IACxC;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["import { preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiInput } from '../primitives/TldrawUiInput'\n\n/** @public */\nexport interface AltTextEditorProps {\n\tshapeId: TLShapeId\n\tonClose(): void\n\tsource: 'image-toolbar' | 'video-toolbar'\n}\n\n/** @public @react */\nexport function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps) {\n\tconst editor = useEditor()\n\tconst [altText, setAltText] = useState(() => {\n\t\tconst shape = editor.getShape<TLShape>(shapeId)\n\t\tif (!shape) return ''\n\t\tif (!('altText' in shape.props)) throw Error('Shape does not have altText property')\n\t\treturn shape.props.altText || ''\n\t})\n\tconst msg = useTranslation()\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst trackEvent = useUiEvents()\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst handleValueChange = (value: string) => setAltText(value)\n\n\tconst handleComplete = () => {\n\t\ttrackEvent('set-alt-text', { source })\n\t\tconst shape = editor.getShape<TLShape & { props: { altText: string } }>(shapeId)\n\t\tif (!shape) return\n\t\teditor.updateShapes([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { altText },\n\t\t\t},\n\t\t])\n\t\tonClose()\n\t}\n\n\tconst handleConfirm = () => handleComplete()\n\tconst handleAltTextCancel = useCallback(() => onClose(), [onClose])\n\n\tuseEffect(() => {\n\t\tref.current?.select()\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\thandleAltTextCancel()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleKeyDown, { capture: true })\n\t\t}\n\t}, [handleAltTextCancel])\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiInput\n\t\t\t\tref={ref}\n\t\t\t\tclassName=\"tlui-media__toolbar-alt-text-input\"\n\t\t\t\tdata-testid=\"media-toolbar.alt-text-input\"\n\t\t\t\tvalue={altText}\n\t\t\t\tplaceholder={msg('tool.media-alt-text-desc')}\n\t\t\t\taria-label={msg('tool.media-alt-text-desc')}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonComplete={handleComplete}\n\t\t\t\tonCancel={handleAltTextCancel}\n\t\t\t\tdisabled={isReadonly}\n\t\t\t/>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttitle={msg('tool.media-alt-text-confirm')}\n\t\t\t\t\tdata-testid=\"tool.media-alt-text-confirm\"\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\t\tonClick={handleConfirm}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"check\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
+  "mappings": "AAiEE,mBACC,KADD;AAjEF,SAAS,gBAAoC,iBAAiB;AAC9D,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AACzD,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAUvB,SAAS,cAAc,EAAE,SAAS,SAAS,OAAO,GAAuB;AAC/E,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM;AAC5C,UAAM,QAAQ,OAAO,SAAkB,OAAO;AAC9C,QAAI,CAAC,MAAO,QAAO;AACnB,QAAI,EAAE,aAAa,MAAM,OAAQ,OAAM,MAAM,sCAAsC;AACnF,WAAO,MAAM,MAAM,WAAW;AAAA,EAC/B,CAAC;AACD,QAAM,MAAM,eAAe;AAC3B,QAAM,MAAM,OAAyB,IAAI;AACzC,QAAM,aAAa,YAAY;AAC/B,QAAM,aAAa,OAAO,cAAc;AAExC,QAAM,oBAAoB,CAAC,UAAkB,WAAW,KAAK;AAE7D,QAAM,iBAAiB,MAAM;AAC5B,eAAW,gBAAgB,EAAE,OAAO,CAAC;AACrC,UAAM,QAAQ,OAAO,SAAmD,OAAO;AAC/E,QAAI,CAAC,MAAO;AACZ,WAAO,aAAa;AAAA,MACnB;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,OAAO,EAAE,QAAQ;AAAA,MAClB;AAAA,IACD,CAAC;AACD,YAAQ;AAAA,EACT;AAEA,QAAM,gBAAgB,MAAM,eAAe;AAC3C,QAAM,sBAAsB,YAAY,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC;AAElE,YAAU,MAAM;AACf,QAAI,SAAS,OAAO;AAEpB,aAAS,cAAc,OAAsB;AAC5C,UAAI,MAAM,QAAQ,UAAU;AAC3B,cAAM,gBAAgB;AACtB,4BAAoB;AAAA,MACrB;AAAA,IACD;AAEA,aAAS,iBAAiB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AACrE,WAAO,MAAM;AACZ,eAAS,oBAAoB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AAAA,IACzE;AAAA,EACD,GAAG,CAAC,mBAAmB,CAAC;AAExB,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAO;AAAA,QACP,aAAa,IAAI,0BAA0B;AAAA,QAC3C,cAAY,IAAI,0BAA0B;AAAA,QAC1C,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,UAAU;AAAA;AAAA,IACX;AAAA,IACC,CAAC,cACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,IAAI,6BAA6B;AAAA,QACxC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QAET,8BAAC,sBAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,IACxC;AAAA,KAEF;AAEF;",
   "names": []
 }

package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs CHANGED Viewed

@@ -3,9 +3,9 @@ import { preventDefault, useEditor } from "@tldraw/editor";
 import { useEffect, useRef, useState } from "react";
 import { useUiEvents } from "../../context/events.mjs";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { TldrawUiButton } from "../primitives/Button/TldrawUiButton.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
 import { TldrawUiInput } from "../primitives/TldrawUiInput.mjs";
-import { TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
 function LinkEditor({ textEditor, value: initialValue, onClose }) {
   const editor = useEditor();
   const [value, setValue] = useState(initialValue);
@@ -56,11 +56,12 @@ function LinkEditor({ textEditor, value: initialValue, onClose }) {
         onValueChange: handleValueChange,
         onComplete: handleLinkComplete,
         onCancel: handleLinkCancel,
-        placeholder: "example.com"
+        placeholder: "example.com",
+        "aria-label": "example.com"
       }
     ),
     /* @__PURE__ */ jsx(
-      TldrawUiToolbarButton,
+      TldrawUiButton,
       {
         className: "tlui-rich-text__toolbar-link-visit",
         title: msg("tool.rich-text-link-visit"),
@@ -72,7 +73,7 @@ function LinkEditor({ textEditor, value: initialValue, onClose }) {
       }
     ),
     /* @__PURE__ */ jsx(
-      TldrawUiToolbarButton,
+      TldrawUiButton,
       {
         className: "tlui-rich-text__toolbar-link-remove",
         title: msg("tool.rich-text-link-remove"),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/LinkEditor.tsx"],
-  "sourcesContent": ["import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'\nimport { useEffect, useRef, useState } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiInput } from '../primitives/TldrawUiInput'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public */\nexport interface LinkEditorProps {\n\ttextEditor: TiptapEditor\n\tvalue: string\n\tonClose(): void\n}\n\n/** @public @react */\nexport function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEditorProps) {\n\tconst editor = useEditor()\n\tconst [value, setValue] = useState(initialValue)\n\tconst msg = useTranslation()\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst trackEvent = useUiEvents()\n\tconst source = 'rich-text-menu'\n\tconst linkifiedValue = value.startsWith('http') ? value : `https://${value}`\n\n\tconst handleValueChange = (value: string) => setValue(value)\n\n\tconst handleLinkComplete = (link: string) => {\n\t\ttrackEvent('rich-text', { operation: 'link-edit', source })\n\t\tif (!link.startsWith('http://') && !link.startsWith('https://')) {\n\t\t\tlink = `https://${link}`\n\t\t}\n\n\t\ttextEditor.commands.setLink({ href: link })\n\t\t// N.B. We shouldn't focus() on mobile because it causes the\n\t\t// Return key to replace the link with a newline :facepalm:\n\t\tif (editor.getInstanceState().isCoarsePointer) {\n\t\t\ttextEditor.commands.blur()\n\t\t} else {\n\t\t\ttextEditor.commands.focus()\n\t\t}\n\t\tonClose()\n\t}\n\n\tconst handleVisitLink = () => {\n\t\ttrackEvent('rich-text', { operation: 'link-visit', source })\n\t\twindow.open(linkifiedValue, '_blank', 'noopener, noreferrer')\n\t\tonClose()\n\t}\n\n\tconst handleRemoveLink = () => {\n\t\ttrackEvent('rich-text', { operation: 'link-remove', source })\n\t\ttextEditor.chain().unsetLink().focus().run()\n\t\tonClose()\n\t}\n\n\tconst handleLinkCancel = () => onClose()\n\n\tuseEffect(() => {\n\t\tref.current?.focus()\n\t}, [value])\n\n\tuseEffect(() => {\n\t\tsetValue(initialValue)\n\t}, [initialValue])\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiInput\n\t\t\t\tref={ref}\n\t\t\t\tdata-testid=\"rich-text.link-input\"\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-input\"\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonComplete={handleLinkComplete}\n\t\t\t\tonCancel={handleLinkCancel}\n\t\t\t\tplaceholder=\"example.com\"\n\t\t\t/>\n\t\t\t<TldrawUiToolbarButton\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-visit\"\n\t\t\t\ttitle={msg('tool.rich-text-link-visit')}\n\t\t\t\ttype=\"icon\"\n\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\tonClick={handleVisitLink}\n\t\t\t\tdisabled={!value}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"external-link\" />\n\t\t\t</TldrawUiToolbarButton>\n\t\t\t<TldrawUiToolbarButton\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-remove\"\n\t\t\t\ttitle={msg('tool.rich-text-link-remove')}\n\t\t\t\tdata-testid=\"rich-text.link-remove\"\n\t\t\t\ttype=\"icon\"\n\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\tonClick={handleRemoveLink}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"trash\" />\n\t\t\t</TldrawUiToolbarButton>\n\t\t</>\n\t)\n}\n"],
-  "mappings": "AAmEE,mBACC,KADD;AAnEF,SAAS,gBAA8B,iBAAiB;AACxD,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAU/B,SAAS,WAAW,EAAE,YAAY,OAAO,cAAc,QAAQ,GAAoB;AACzF,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,MAAM,eAAe;AAC3B,QAAM,MAAM,OAAyB,IAAI;AACzC,QAAM,aAAa,YAAY;AAC/B,QAAM,SAAS;AACf,QAAM,iBAAiB,MAAM,WAAW,MAAM,IAAI,QAAQ,WAAW,KAAK;AAE1E,QAAM,oBAAoB,CAACA,WAAkB,SAASA,MAAK;AAE3D,QAAM,qBAAqB,CAAC,SAAiB;AAC5C,eAAW,aAAa,EAAE,WAAW,aAAa,OAAO,CAAC;AAC1D,QAAI,CAAC,KAAK,WAAW,SAAS,KAAK,CAAC,KAAK,WAAW,UAAU,GAAG;AAChE,aAAO,WAAW,IAAI;AAAA,IACvB;AAEA,eAAW,SAAS,QAAQ,EAAE,MAAM,KAAK,CAAC;AAG1C,QAAI,OAAO,iBAAiB,EAAE,iBAAiB;AAC9C,iBAAW,SAAS,KAAK;AAAA,IAC1B,OAAO;AACN,iBAAW,SAAS,MAAM;AAAA,IAC3B;AACA,YAAQ;AAAA,EACT;AAEA,QAAM,kBAAkB,MAAM;AAC7B,eAAW,aAAa,EAAE,WAAW,cAAc,OAAO,CAAC;AAC3D,WAAO,KAAK,gBAAgB,UAAU,sBAAsB;AAC5D,YAAQ;AAAA,EACT;AAEA,QAAM,mBAAmB,MAAM;AAC9B,eAAW,aAAa,EAAE,WAAW,eAAe,OAAO,CAAC;AAC5D,eAAW,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI;AAC3C,YAAQ;AAAA,EACT;AAEA,QAAM,mBAAmB,MAAM,QAAQ;AAEvC,YAAU,MAAM;AACf,QAAI,SAAS,MAAM;AAAA,EACpB,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACf,aAAS,YAAY;AAAA,EACtB,GAAG,CAAC,YAAY,CAAC;AAEjB,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ,WAAU;AAAA,QACV;AAAA,QACA,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,aAAY;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,IAAI,2BAA2B;AAAA,QACtC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QACT,UAAU,CAAC;AAAA,QAEX,8BAAC,sBAAmB,OAAK,MAAC,MAAK,iBAAgB;AAAA;AAAA,IAChD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,IAAI,4BAA4B;AAAA,QACvC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QAET,8BAAC,sBAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,IACxC;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'\nimport { useEffect, useRef, useState } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiInput } from '../primitives/TldrawUiInput'\n\n/** @public */\nexport interface LinkEditorProps {\n\ttextEditor: TiptapEditor\n\tvalue: string\n\tonClose(): void\n}\n\n/** @public @react */\nexport function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEditorProps) {\n\tconst editor = useEditor()\n\tconst [value, setValue] = useState(initialValue)\n\tconst msg = useTranslation()\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst trackEvent = useUiEvents()\n\tconst source = 'rich-text-menu'\n\tconst linkifiedValue = value.startsWith('http') ? value : `https://${value}`\n\n\tconst handleValueChange = (value: string) => setValue(value)\n\n\tconst handleLinkComplete = (link: string) => {\n\t\ttrackEvent('rich-text', { operation: 'link-edit', source })\n\t\tif (!link.startsWith('http://') && !link.startsWith('https://')) {\n\t\t\tlink = `https://${link}`\n\t\t}\n\n\t\ttextEditor.commands.setLink({ href: link })\n\t\t// N.B. We shouldn't focus() on mobile because it causes the\n\t\t// Return key to replace the link with a newline :facepalm:\n\t\tif (editor.getInstanceState().isCoarsePointer) {\n\t\t\ttextEditor.commands.blur()\n\t\t} else {\n\t\t\ttextEditor.commands.focus()\n\t\t}\n\t\tonClose()\n\t}\n\n\tconst handleVisitLink = () => {\n\t\ttrackEvent('rich-text', { operation: 'link-visit', source })\n\t\twindow.open(linkifiedValue, '_blank', 'noopener, noreferrer')\n\t\tonClose()\n\t}\n\n\tconst handleRemoveLink = () => {\n\t\ttrackEvent('rich-text', { operation: 'link-remove', source })\n\t\ttextEditor.chain().unsetLink().focus().run()\n\t\tonClose()\n\t}\n\n\tconst handleLinkCancel = () => onClose()\n\n\tuseEffect(() => {\n\t\tref.current?.focus()\n\t}, [value])\n\n\tuseEffect(() => {\n\t\tsetValue(initialValue)\n\t}, [initialValue])\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiInput\n\t\t\t\tref={ref}\n\t\t\t\tdata-testid=\"rich-text.link-input\"\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-input\"\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonComplete={handleLinkComplete}\n\t\t\t\tonCancel={handleLinkCancel}\n\t\t\t\tplaceholder=\"example.com\"\n\t\t\t\taria-label=\"example.com\"\n\t\t\t/>\n\t\t\t<TldrawUiButton\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-visit\"\n\t\t\t\ttitle={msg('tool.rich-text-link-visit')}\n\t\t\t\ttype=\"icon\"\n\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\tonClick={handleVisitLink}\n\t\t\t\tdisabled={!value}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"external-link\" />\n\t\t\t</TldrawUiButton>\n\t\t\t<TldrawUiButton\n\t\t\t\tclassName=\"tlui-rich-text__toolbar-link-remove\"\n\t\t\t\ttitle={msg('tool.rich-text-link-remove')}\n\t\t\t\tdata-testid=\"rich-text.link-remove\"\n\t\t\t\ttype=\"icon\"\n\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\tonClick={handleRemoveLink}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"trash\" />\n\t\t\t</TldrawUiButton>\n\t\t</>\n\t)\n}\n"],
+  "mappings": "AAmEE,mBACC,KADD;AAnEF,SAAS,gBAA8B,iBAAiB;AACxD,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAUvB,SAAS,WAAW,EAAE,YAAY,OAAO,cAAc,QAAQ,GAAoB;AACzF,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,MAAM,eAAe;AAC3B,QAAM,MAAM,OAAyB,IAAI;AACzC,QAAM,aAAa,YAAY;AAC/B,QAAM,SAAS;AACf,QAAM,iBAAiB,MAAM,WAAW,MAAM,IAAI,QAAQ,WAAW,KAAK;AAE1E,QAAM,oBAAoB,CAACA,WAAkB,SAASA,MAAK;AAE3D,QAAM,qBAAqB,CAAC,SAAiB;AAC5C,eAAW,aAAa,EAAE,WAAW,aAAa,OAAO,CAAC;AAC1D,QAAI,CAAC,KAAK,WAAW,SAAS,KAAK,CAAC,KAAK,WAAW,UAAU,GAAG;AAChE,aAAO,WAAW,IAAI;AAAA,IACvB;AAEA,eAAW,SAAS,QAAQ,EAAE,MAAM,KAAK,CAAC;AAG1C,QAAI,OAAO,iBAAiB,EAAE,iBAAiB;AAC9C,iBAAW,SAAS,KAAK;AAAA,IAC1B,OAAO;AACN,iBAAW,SAAS,MAAM;AAAA,IAC3B;AACA,YAAQ;AAAA,EACT;AAEA,QAAM,kBAAkB,MAAM;AAC7B,eAAW,aAAa,EAAE,WAAW,cAAc,OAAO,CAAC;AAC3D,WAAO,KAAK,gBAAgB,UAAU,sBAAsB;AAC5D,YAAQ;AAAA,EACT;AAEA,QAAM,mBAAmB,MAAM;AAC9B,eAAW,aAAa,EAAE,WAAW,eAAe,OAAO,CAAC;AAC5D,eAAW,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI;AAC3C,YAAQ;AAAA,EACT;AAEA,QAAM,mBAAmB,MAAM,QAAQ;AAEvC,YAAU,MAAM;AACf,QAAI,SAAS,MAAM;AAAA,EACpB,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACf,aAAS,YAAY;AAAA,EACtB,GAAG,CAAC,YAAY,CAAC;AAEjB,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ,WAAU;AAAA,QACV;AAAA,QACA,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,aAAY;AAAA,QACZ,cAAW;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,IAAI,2BAA2B;AAAA,QACtC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QACT,UAAU,CAAC;AAAA,QAEX,8BAAC,sBAAmB,OAAK,MAAC,MAAK,iBAAgB;AAAA;AAAA,IAChD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,IAAI,4BAA4B;AAAA,QACvC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QAET,8BAAC,sBAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,IACxC;AAAA,KACD;AAEF;",
   "names": ["value"]
 }

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

@@ -70,7 +70,7 @@ function OverflowingToolbar({
             items: collectItems(child.children),
             element: child
           });
-        } else {
+        } else if (!child.hasAttribute("data-radix-popper-content-wrapper")) {
           items.push({ type: "item", element: child });
         }
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/OverflowingToolbar.tsx"],
-  "sourcesContent": ["import {\n\tactiveElementShouldCaptureKeys,\n\tassert,\n\tmodulate,\n\tpreventDefault,\n\ttlmenus,\n\tuseEditor,\n\tuseEvent,\n\tuseUniqueSafeId,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { createContext, useEffect, useLayoutEffect, 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 { TldrawUiColumn, TldrawUiRow } from '../primitives/layout'\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\torientation: 'horizontal' | 'vertical'\n\tsizingParentClassName: string\n\tminItems: number\n\tminSizePx: number\n\tmaxItems: number\n\tmaxSizePx: number\n}\n\n/** @public @react */\nexport function OverflowingToolbar({\n\tchildren,\n\torientation,\n\tsizingParentClassName,\n\tminItems,\n\tminSizePx,\n\tmaxItems,\n\tmaxSizePx,\n}: 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 mainToolsRef = useRef<HTMLDivElement>(null)\n\n\t// we have to use state instead of a ref here so that we get\n\t// an update when the overflow popover mounts / unmounts\n\tconst [overflowTools, setOverflowTools] = useState<HTMLDivElement | null>(null)\n\tconst [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)\n\tconst [shouldShowOverflow, setShouldShowOverflow] = useState(false)\n\n\tconst onDomUpdate = useEvent(() => {\n\t\tif (!mainToolsRef.current) return\n\n\t\t// whenever we get an update, we need to re-calculate the number of items to show and update\n\t\t// the component accordingly.\n\t\tconst sizeProp = orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight'\n\n\t\t// toolbars can contain both single items and groups. we need to keep track of both.\n\t\ttype Items = (\n\t\t\t| { type: 'item'; element: HTMLElement }\n\t\t\t| { type: 'group'; items: Items; element: HTMLElement }\n\t\t)[]\n\n\t\t// walk through the dom and collect items so we can calculate what to show/hide\n\t\tconst mainItems = collectItems(mainToolsRef.current.children)\n\t\tconst overflowItems = overflowTools ? collectItems(overflowTools.children) : null\n\t\tfunction collectItems(collection: HTMLCollection) {\n\t\t\tconst items: Items = []\n\t\t\tfor (const child of collection) {\n\t\t\t\tif (child.classList.contains('tlui-main-toolbar__group')) {\n\t\t\t\t\titems.push({\n\t\t\t\t\t\ttype: 'group',\n\t\t\t\t\t\titems: collectItems(child.children),\n\t\t\t\t\t\telement: child as HTMLElement,\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\titems.push({ type: 'item', element: child as HTMLElement })\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn items\n\t\t}\n\n\t\t// the number of items to show is based on the space available to the toolbar.\n\t\tconst sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)\n\t\tconst size = sizingParent[sizeProp]\n\t\tconst itemsToShow = Math.floor(\n\t\t\tmodulate(size, [minSizePx, maxSizePx], [minItems, maxItems], true)\n\t\t)\n\n\t\t// now we know how many items to show, we need to walk through the items we found and show /\n\t\t// hide them accordingly. We need to keep track of:\n\t\t// the number of item's we've shown in the main content so far\n\t\tlet mainItemCount = 0\n\t\t// the item that is currently active in the overflow content (if any)\n\t\tlet newActiveOverflowItem: string | null = null\n\t\t// whether the last active overflow item is actually still in the overflow content\n\t\tlet shouldInvalidateLastActiveOverflowItem = false\n\t\t// the buttons visible in the main content\n\t\tconst numberedButtons: HTMLButtonElement[] = []\n\t\tfunction visitItems(\n\t\t\tmainItems: Items,\n\t\t\toverflowItems: Items | null\n\t\t): {\n\t\t\t// for each group of items we visit, we need to know whether we showed anything in\n\t\t\t// either section\n\t\t\tdidShowAnyInMain: boolean\n\t\t\tdidShowAnyInOverflow: boolean\n\t\t} {\n\t\t\tif (overflowItems) assert(mainItems.length === overflowItems.length)\n\n\t\t\tlet didShowAnyInMain = false\n\t\t\tlet didShowAnyInOverflow = false\n\n\t\t\tfor (let i = 0; i < mainItems.length; i++) {\n\t\t\t\tconst mainItem = mainItems[i]\n\t\t\t\tconst overflowItem = overflowItems?.[i]\n\n\t\t\t\tif (mainItem.type === 'item') {\n\t\t\t\t\tconst isLastActiveOverflowItem =\n\t\t\t\t\t\tmainItem.element.getAttribute('data-value') === lastActiveOverflowItem\n\n\t\t\t\t\t// for single items, we show them in main if we have space, or if they're the\n\t\t\t\t\t// last-used item from the overflow.\n\t\t\t\t\tlet shouldShowInMain\n\t\t\t\t\tif (lastActiveOverflowItem) {\n\t\t\t\t\t\tshouldShowInMain = mainItemCount < itemsToShow || isLastActiveOverflowItem\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// we use <= here because if there is no last active overflow item, we want\n\t\t\t\t\t\t// to show at least one item in the main toolbar.\n\t\t\t\t\t\tshouldShowInMain = mainItemCount <= itemsToShow\n\t\t\t\t\t}\n\t\t\t\t\tconst shouldShowInOverflow = mainItemCount >= itemsToShow\n\n\t\t\t\t\tdidShowAnyInMain ||= shouldShowInMain\n\t\t\t\t\tdidShowAnyInOverflow ||= shouldShowInOverflow\n\n\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\tmainItem.element,\n\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\tshouldShowInMain ? 'true' : 'false'\n\t\t\t\t\t)\n\t\t\t\t\tif (overflowItem) {\n\t\t\t\t\t\tassert(overflowItem.type === 'item')\n\t\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\t\toverflowItem.element,\n\t\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\t\tshouldShowInOverflow ? 'true' : 'false'\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tif (shouldShowInOverflow && mainItem.element.getAttribute('aria-pressed') === 'true') {\n\t\t\t\t\t\tnewActiveOverflowItem = mainItem.element.getAttribute('data-value')\n\t\t\t\t\t}\n\t\t\t\t\tif (shouldShowInMain && mainItem.element.tagName === 'BUTTON') {\n\t\t\t\t\t\tnumberedButtons.push(mainItem.element as HTMLButtonElement)\n\t\t\t\t\t}\n\t\t\t\t\tif (!shouldShowInOverflow && isLastActiveOverflowItem) {\n\t\t\t\t\t\tshouldInvalidateLastActiveOverflowItem = true\n\t\t\t\t\t}\n\t\t\t\t\tmainItemCount++\n\t\t\t\t} else {\n\t\t\t\t\t// for groups, we show them in main if we have space, or if they're the\n\t\t\t\t\t// last-used item from the overflow.\n\t\t\t\t\tlet result, overflowGroup\n\t\t\t\t\tif (overflowItem) {\n\t\t\t\t\t\tassert(overflowItem.type === 'group')\n\t\t\t\t\t\toverflowGroup = overflowItem\n\t\t\t\t\t\tresult = visitItems(mainItem.items, overflowGroup.items)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tresult = visitItems(mainItem.items, null)\n\t\t\t\t\t}\n\n\t\t\t\t\tdidShowAnyInMain ||= result.didShowAnyInMain\n\t\t\t\t\tdidShowAnyInOverflow ||= result.didShowAnyInOverflow\n\n\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\tmainItem.element,\n\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\tresult.didShowAnyInMain ? 'true' : 'false'\n\t\t\t\t\t)\n\t\t\t\t\tif (overflowGroup) {\n\t\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\t\toverflowGroup.element,\n\t\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\t\tresult.didShowAnyInOverflow ? 'true' : 'false'\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn { didShowAnyInMain, didShowAnyInOverflow }\n\t\t}\n\n\t\tconst { didShowAnyInOverflow } = visitItems(mainItems, overflowItems)\n\t\tsetShouldShowOverflow(didShowAnyInOverflow)\n\t\tif (newActiveOverflowItem) {\n\t\t\tsetLastActiveOverflowItem(newActiveOverflowItem)\n\t\t} else if (shouldInvalidateLastActiveOverflowItem) {\n\t\t\tsetLastActiveOverflowItem(null)\n\t\t}\n\n\t\trButtons.current = numberedButtons\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\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t})\n\n\t\tconst sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)\n\t\tconst resizeObserver = new ResizeObserver(onDomUpdate)\n\t\tresizeObserver.observe(sizingParent)\n\n\t\treturn () => {\n\t\t\tmutationObserver.disconnect()\n\t\t\tresizeObserver.disconnect()\n\t\t}\n\t}, [onDomUpdate, sizingParentClassName])\n\n\tuseEffect(() => {\n\t\tif (!editor.options.enableToolbarKeyboardShortcuts) return\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (\n\t\t\t\tareShortcutsDisabled(editor) ||\n\t\t\t\tactiveElementShouldCaptureKeys(true /* allow buttons */)\n\t\t\t) {\n\t\t\t\treturn\n\t\t\t}\n\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\n\tconst Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiToolbar\n\t\t\t\torientation={orientation}\n\t\t\t\tclassName={classNames('tlui-main-toolbar__tools', {\n\t\t\t\t\t'tlui-main-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<Layout id={`${id}_main`} ref={mainToolsRef}>\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</Layout>\n\t\t\t\t{shouldShowOverflow && (\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-main-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\n\t\t\t\t\t\t\t\t\t\ticon={orientation === 'horizontal' ? 'chevron-up' : 'chevron-right'}\n\t\t\t\t\t\t\t\t\t/>\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\n\t\t\t\t\t\t\t\tside={orientation === 'horizontal' ? 'top' : 'right'}\n\t\t\t\t\t\t\t\talign={orientation === 'horizontal' ? 'center' : 'end'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\t\t\t\t\torientation=\"grid\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-main-toolbar__overflow-content\"\n\t\t\t\t\t\t\t\t\tref={setOverflowTools}\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\nfunction findParentWithClassName(startingElement: HTMLElement, className: string): HTMLElement {\n\tlet element: HTMLElement | null = startingElement\n\twhile (element) {\n\t\tif (element.classList.contains(className)) {\n\t\t\treturn element\n\t\t}\n\t\telement = element.parentElement\n\t}\n\tthrow new Error('Could not find parent with class name ' + className)\n}\n\nfunction setAttribute(element: HTMLElement, name: string, value: string) {\n\tif (element.getAttribute(name) === value) return\n\telement.setAttribute(name, value)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tactiveElementShouldCaptureKeys,\n\tassert,\n\tmodulate,\n\tpreventDefault,\n\ttlmenus,\n\tuseEditor,\n\tuseEvent,\n\tuseUniqueSafeId,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { createContext, useEffect, useLayoutEffect, 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 { TldrawUiColumn, TldrawUiRow } from '../primitives/layout'\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\torientation: 'horizontal' | 'vertical'\n\tsizingParentClassName: string\n\tminItems: number\n\tminSizePx: number\n\tmaxItems: number\n\tmaxSizePx: number\n}\n\n/** @public @react */\nexport function OverflowingToolbar({\n\tchildren,\n\torientation,\n\tsizingParentClassName,\n\tminItems,\n\tminSizePx,\n\tmaxItems,\n\tmaxSizePx,\n}: 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 mainToolsRef = useRef<HTMLDivElement>(null)\n\n\t// we have to use state instead of a ref here so that we get\n\t// an update when the overflow popover mounts / unmounts\n\tconst [overflowTools, setOverflowTools] = useState<HTMLDivElement | null>(null)\n\tconst [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)\n\tconst [shouldShowOverflow, setShouldShowOverflow] = useState(false)\n\n\tconst onDomUpdate = useEvent(() => {\n\t\tif (!mainToolsRef.current) return\n\n\t\t// whenever we get an update, we need to re-calculate the number of items to show and update\n\t\t// the component accordingly.\n\t\tconst sizeProp = orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight'\n\n\t\t// toolbars can contain both single items and groups. we need to keep track of both.\n\t\ttype Items = (\n\t\t\t| { type: 'item'; element: HTMLElement }\n\t\t\t| { type: 'group'; items: Items; element: HTMLElement }\n\t\t)[]\n\n\t\t// walk through the dom and collect items so we can calculate what to show/hide\n\t\tconst mainItems = collectItems(mainToolsRef.current.children)\n\t\tconst overflowItems = overflowTools ? collectItems(overflowTools.children) : null\n\t\tfunction collectItems(collection: HTMLCollection) {\n\t\t\tconst items: Items = []\n\t\t\tfor (const child of collection) {\n\t\t\t\tif (child.classList.contains('tlui-main-toolbar__group')) {\n\t\t\t\t\titems.push({\n\t\t\t\t\t\ttype: 'group',\n\t\t\t\t\t\titems: collectItems(child.children),\n\t\t\t\t\t\telement: child as HTMLElement,\n\t\t\t\t\t})\n\t\t\t\t} else if (!child.hasAttribute('data-radix-popper-content-wrapper')) {\n\t\t\t\t\titems.push({ type: 'item', element: child as HTMLElement })\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn items\n\t\t}\n\n\t\t// the number of items to show is based on the space available to the toolbar.\n\t\tconst sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)\n\t\tconst size = sizingParent[sizeProp]\n\t\tconst itemsToShow = Math.floor(\n\t\t\tmodulate(size, [minSizePx, maxSizePx], [minItems, maxItems], true)\n\t\t)\n\n\t\t// now we know how many items to show, we need to walk through the items we found and show /\n\t\t// hide them accordingly. We need to keep track of:\n\t\t// the number of item's we've shown in the main content so far\n\t\tlet mainItemCount = 0\n\t\t// the item that is currently active in the overflow content (if any)\n\t\tlet newActiveOverflowItem: string | null = null\n\t\t// whether the last active overflow item is actually still in the overflow content\n\t\tlet shouldInvalidateLastActiveOverflowItem = false\n\t\t// the buttons visible in the main content\n\t\tconst numberedButtons: HTMLButtonElement[] = []\n\t\tfunction visitItems(\n\t\t\tmainItems: Items,\n\t\t\toverflowItems: Items | null\n\t\t): {\n\t\t\t// for each group of items we visit, we need to know whether we showed anything in\n\t\t\t// either section\n\t\t\tdidShowAnyInMain: boolean\n\t\t\tdidShowAnyInOverflow: boolean\n\t\t} {\n\t\t\tif (overflowItems) assert(mainItems.length === overflowItems.length)\n\n\t\t\tlet didShowAnyInMain = false\n\t\t\tlet didShowAnyInOverflow = false\n\n\t\t\tfor (let i = 0; i < mainItems.length; i++) {\n\t\t\t\tconst mainItem = mainItems[i]\n\t\t\t\tconst overflowItem = overflowItems?.[i]\n\n\t\t\t\tif (mainItem.type === 'item') {\n\t\t\t\t\tconst isLastActiveOverflowItem =\n\t\t\t\t\t\tmainItem.element.getAttribute('data-value') === lastActiveOverflowItem\n\n\t\t\t\t\t// for single items, we show them in main if we have space, or if they're the\n\t\t\t\t\t// last-used item from the overflow.\n\t\t\t\t\tlet shouldShowInMain\n\t\t\t\t\tif (lastActiveOverflowItem) {\n\t\t\t\t\t\tshouldShowInMain = mainItemCount < itemsToShow || isLastActiveOverflowItem\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// we use <= here because if there is no last active overflow item, we want\n\t\t\t\t\t\t// to show at least one item in the main toolbar.\n\t\t\t\t\t\tshouldShowInMain = mainItemCount <= itemsToShow\n\t\t\t\t\t}\n\t\t\t\t\tconst shouldShowInOverflow = mainItemCount >= itemsToShow\n\n\t\t\t\t\tdidShowAnyInMain ||= shouldShowInMain\n\t\t\t\t\tdidShowAnyInOverflow ||= shouldShowInOverflow\n\n\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\tmainItem.element,\n\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\tshouldShowInMain ? 'true' : 'false'\n\t\t\t\t\t)\n\t\t\t\t\tif (overflowItem) {\n\t\t\t\t\t\tassert(overflowItem.type === 'item')\n\t\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\t\toverflowItem.element,\n\t\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\t\tshouldShowInOverflow ? 'true' : 'false'\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tif (shouldShowInOverflow && mainItem.element.getAttribute('aria-pressed') === 'true') {\n\t\t\t\t\t\tnewActiveOverflowItem = mainItem.element.getAttribute('data-value')\n\t\t\t\t\t}\n\t\t\t\t\tif (shouldShowInMain && mainItem.element.tagName === 'BUTTON') {\n\t\t\t\t\t\tnumberedButtons.push(mainItem.element as HTMLButtonElement)\n\t\t\t\t\t}\n\t\t\t\t\tif (!shouldShowInOverflow && isLastActiveOverflowItem) {\n\t\t\t\t\t\tshouldInvalidateLastActiveOverflowItem = true\n\t\t\t\t\t}\n\t\t\t\t\tmainItemCount++\n\t\t\t\t} else {\n\t\t\t\t\t// for groups, we show them in main if we have space, or if they're the\n\t\t\t\t\t// last-used item from the overflow.\n\t\t\t\t\tlet result, overflowGroup\n\t\t\t\t\tif (overflowItem) {\n\t\t\t\t\t\tassert(overflowItem.type === 'group')\n\t\t\t\t\t\toverflowGroup = overflowItem\n\t\t\t\t\t\tresult = visitItems(mainItem.items, overflowGroup.items)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tresult = visitItems(mainItem.items, null)\n\t\t\t\t\t}\n\n\t\t\t\t\tdidShowAnyInMain ||= result.didShowAnyInMain\n\t\t\t\t\tdidShowAnyInOverflow ||= result.didShowAnyInOverflow\n\n\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\tmainItem.element,\n\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\tresult.didShowAnyInMain ? 'true' : 'false'\n\t\t\t\t\t)\n\t\t\t\t\tif (overflowGroup) {\n\t\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\t\toverflowGroup.element,\n\t\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\t\tresult.didShowAnyInOverflow ? 'true' : 'false'\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn { didShowAnyInMain, didShowAnyInOverflow }\n\t\t}\n\n\t\tconst { didShowAnyInOverflow } = visitItems(mainItems, overflowItems)\n\t\tsetShouldShowOverflow(didShowAnyInOverflow)\n\t\tif (newActiveOverflowItem) {\n\t\t\tsetLastActiveOverflowItem(newActiveOverflowItem)\n\t\t} else if (shouldInvalidateLastActiveOverflowItem) {\n\t\t\tsetLastActiveOverflowItem(null)\n\t\t}\n\n\t\trButtons.current = numberedButtons\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\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t})\n\n\t\tconst sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)\n\t\tconst resizeObserver = new ResizeObserver(onDomUpdate)\n\t\tresizeObserver.observe(sizingParent)\n\n\t\treturn () => {\n\t\t\tmutationObserver.disconnect()\n\t\t\tresizeObserver.disconnect()\n\t\t}\n\t}, [onDomUpdate, sizingParentClassName])\n\n\tuseEffect(() => {\n\t\tif (!editor.options.enableToolbarKeyboardShortcuts) return\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (\n\t\t\t\tareShortcutsDisabled(editor) ||\n\t\t\t\tactiveElementShouldCaptureKeys(true /* allow buttons */)\n\t\t\t) {\n\t\t\t\treturn\n\t\t\t}\n\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\n\tconst Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiToolbar\n\t\t\t\torientation={orientation}\n\t\t\t\tclassName={classNames('tlui-main-toolbar__tools', {\n\t\t\t\t\t'tlui-main-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<Layout id={`${id}_main`} ref={mainToolsRef}>\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</Layout>\n\t\t\t\t{shouldShowOverflow && (\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-main-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\n\t\t\t\t\t\t\t\t\t\ticon={orientation === 'horizontal' ? 'chevron-up' : 'chevron-right'}\n\t\t\t\t\t\t\t\t\t/>\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\n\t\t\t\t\t\t\t\tside={orientation === 'horizontal' ? 'top' : 'right'}\n\t\t\t\t\t\t\t\talign={orientation === 'horizontal' ? 'center' : 'end'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\t\t\t\t\torientation=\"grid\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-main-toolbar__overflow-content\"\n\t\t\t\t\t\t\t\t\tref={setOverflowTools}\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\nfunction findParentWithClassName(startingElement: HTMLElement, className: string): HTMLElement {\n\tlet element: HTMLElement | null = startingElement\n\twhile (element) {\n\t\tif (element.classList.contains(className)) {\n\t\t\treturn element\n\t\t}\n\t\telement = element.parentElement\n\t}\n\tthrow new Error('Could not find parent with class name ' + className)\n}\n\nfunction setAttribute(element: HTMLElement, name: string, value: string) {\n\tif (element.getAttribute(name) === value) return\n\telement.setAttribute(name, value)\n}\n"],
+  "mappings": "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",
   "names": ["mainItems", "overflowItems", "didShowAnyInOverflow"]
 }

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

@@ -2,8 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import { useEditor, useValue } from "@tldraw/editor";
 import classNames from "classnames";
 import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
+import { useActions } from "../../context/actions.mjs";
 import { useBreakpoint } from "../../context/breakpoints.mjs";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { kbdStr } from "../../kbd-utils.mjs";
 import { TldrawUiButton } from "../primitives/Button/TldrawUiButton.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
 import { TldrawUiTooltip } from "../primitives/TldrawUiTooltip.mjs";
@@ -11,16 +13,18 @@ function ToggleToolLockedButton({ activeToolId }) {
   const editor = useEditor();
   const breakpoint = useBreakpoint();
   const msg = useTranslation();
+  const actions = useActions();
   const isToolLocked = useValue("is tool locked", () => editor.getInstanceState().isToolLocked, [
     editor
   ]);
   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(
+  const toggleLockAction = actions["toggle-tool-lock"];
+  const tooltipContent = toggleLockAction?.kbd ? `${msg("action.toggle-tool-lock")} ${kbdStr(toggleLockAction.kbd)}` : msg("action.toggle-tool-lock");
+  return /* @__PURE__ */ jsx(TldrawUiTooltip, { content: tooltipContent, children: /* @__PURE__ */ jsx(
     TldrawUiButton,
     {
       type: "normal",
-      title: msg("action.toggle-tool-lock"),
       "data-testid": "tool-lock",
       className: classNames("tlui-main-toolbar__lock-button", {
         "tlui-main-toolbar__lock-button__mobile": breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM

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

@@ -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-main-toolbar__lock-button', {\n\t\t\t\t\t'tlui-main-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,kCAAkC;AAAA,QACvD,0CAA0C,aAAa,oBAAoB;AAAA,MAC5E,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 { useActions } from '../../context/actions'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../kbd-utils'\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\tconst actions = useActions()\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\tconst toggleLockAction = actions['toggle-tool-lock']\n\tconst tooltipContent = toggleLockAction?.kbd\n\t\t? `${msg('action.toggle-tool-lock')} ${kbdStr(toggleLockAction.kbd)}`\n\t\t: msg('action.toggle-tool-lock')\n\n\treturn (\n\t\t<TldrawUiTooltip content={tooltipContent}>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"normal\"\n\t\t\t\tdata-testid=\"tool-lock\"\n\t\t\t\tclassName={classNames('tlui-main-toolbar__lock-button', {\n\t\t\t\t\t'tlui-main-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": "AA6CI;AA7CJ,SAAS,WAAW,gBAAgB;AACpC,OAAO,gBAAgB;AACvB,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,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;AAC3B,QAAM,UAAU,WAAW;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,QAAM,mBAAmB,QAAQ,kBAAkB;AACnD,QAAM,iBAAiB,kBAAkB,MACtC,GAAG,IAAI,yBAAyB,CAAC,IAAI,OAAO,iBAAiB,GAAG,CAAC,KACjE,IAAI,yBAAyB;AAEhC,SACC,oBAAC,mBAAgB,SAAS,gBACzB;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,WAAW,kCAAkC;AAAA,QACvD,0CAA0C,aAAa,oBAAoB;AAAA,MAC5E,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;",
   "names": []
 }

package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs CHANGED Viewed

@@ -4,7 +4,6 @@ import {
   Box,
   clamp,
   react,
-  stopEventPropagation,
   useAtom,
   useEditor,
   usePassThroughMouseOverEvents,
@@ -114,7 +113,7 @@ const TldrawUiContextualToolbar = ({
       "data-visible": false,
       "data-testid": "contextual-toolbar",
       className: classNames("tlui-contextual-toolbar", className),
-      onPointerDown: stopEventPropagation,
+      onPointerDown: editor.markEventAsHandled,
       children: /* @__PURE__ */ jsx(
         TldrawUiToolbar,
         {