tldraw 3.16.0-canary.f56a36d13420 → 3.16.0-canary.f5bf2b535ea7

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx"],
-  "sourcesContent": ["import {\n\tassert,\n\tBox,\n\tclamp,\n\tEditor,\n\treact,\n\tstopEventPropagation,\n\tuseAtom,\n\tuseEditor,\n\tusePassThroughMouseOverEvents,\n\tusePassThroughWheelEvents,\n\tuseValue,\n\tVec,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { flushSync } from 'react-dom'\nimport { TldrawUiToolbar } from './TldrawUiToolbar'\n\nconst MOVE_TIMEOUT = 150\nconst HIDE_VISIBILITY_TIMEOUT = 16\nconst SHOW_VISIBILITY_TIMEOUT = 16\nconst MIN_DISTANCE_TO_REPOSITION_SQUARED = 16 ** 2\nconst TOOLBAR_GAP = 8\nconst SCREEN_MARGIN = 16\nconst HIDE_TOOLBAR_WHEN_CAMERA_IS_MOVING = false\nconst LEFT_ALIGN_TOOLBAR = false\n\n/** @public */\nexport interface TLUiContextualToolbarProps {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tisMousingDown?: boolean\n\tgetSelectionBounds(): Box | undefined\n\tchangeOnlyWhenYChanges?: boolean\n\tlabel: string\n}\n\n/**\n * A generic floating toolbar that can be used for things\n * like rich text editing, image toolbars, etc.\n *\n * @public @react\n */\nexport const TldrawUiContextualToolbar = ({\n\tchildren,\n\tclassName,\n\tisMousingDown,\n\tgetSelectionBounds,\n\tchangeOnlyWhenYChanges = false,\n\tlabel,\n}: TLUiContextualToolbarProps) => {\n\tconst editor = useEditor()\n\tconst toolbarRef = useRef<HTMLDivElement>(null)\n\n\tusePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement>)\n\tusePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement>)\n\n\tconst { isVisible, isInteractive, hide, show, position, move } =\n\t\tuseToolbarVisibilityStateMachine(changeOnlyWhenYChanges)\n\n\t// annoying react stuff: we don't want the toolbar position function to depend on the react state so we'll double with a ref\n\tconst rCouldShowToolbar = useRef(false)\n\tconst [hasValidToolbarPosition, setHasValidToolbarPosition] = useState(false)\n\n\tconst contentSizeUpdateCounter = useAtom('content size update counter', 0)\n\n\tuseEffect(() => {\n\t\tassert(toolbarRef.current)\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tcontentSizeUpdateCounter.update((n) => n + 1)\n\t\t})\n\t\tobserver.observe(toolbarRef.current)\n\t\treturn () => observer.disconnect()\n\t}, [contentSizeUpdateCounter])\n\n\tuseEffect(() => {\n\t\tlet lastContentSizeUpdateCounter = contentSizeUpdateCounter.get()\n\t\treturn react('toolbar position', function updateToolbarPositionAndDisplay() {\n\t\t\tconst toolbarElm = toolbarRef.current\n\t\t\tif (!toolbarElm) return\n\n\t\t\tconst nextContentSizeUpdateCounter = contentSizeUpdateCounter.get()\n\n\t\t\t// capture / force this to update when...\n\t\t\teditor.getCamera() // the camera moves\n\t\t\tcontentSizeUpdateCounter.get() // the toolbar size changes\n\t\t\t// undefined here means that we can't show the toolbar due to an incompatible position\n\t\t\tconst position = getToolbarScreenPosition(editor, toolbarElm, getSelectionBounds)\n\n\t\t\t// todo: when the toolbar is hidden due to the selection being off screen, it should be hidden immediately\n\t\t\t// rather than waiting for the position to settle. This is different than when the position changes due to\n\t\t\t// a change in the user's selection.\n\t\t\tif (!position) {\n\t\t\t\tif (rCouldShowToolbar.current) {\n\t\t\t\t\t// If we don't have a position, then we're not showing the toolbar\n\t\t\t\t\trCouldShowToolbar.current = false\n\t\t\t\t\tsetHasValidToolbarPosition(false)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// If the camera state is moving, we want to immediately update the position\n\t\t\t\t// todo: consider hiding the toolbar while the camera is moving\n\t\t\t\tconst cameraState = editor.getCameraState()\n\t\t\t\tif (cameraState === 'moving') {\n\t\t\t\t\t// ...if we wanted this to avoid prematurely updating any positions, we'd need\n\t\t\t\t\t// to have the last updated position in page space, so that we could convert\n\t\t\t\t\t// it to screen space and update it here\n\t\t\t\t\tconst elm = toolbarRef.current\n\t\t\t\t\telm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)\n\t\t\t\t} else {\n\t\t\t\t\tconst moveImmediately = lastContentSizeUpdateCounter !== nextContentSizeUpdateCounter\n\t\t\t\t\t// Schedule a move to its next location\n\t\t\t\t\tmove(position.x, position.y, moveImmediately)\n\t\t\t\t}\n\n\t\t\t\t// Finally, if the toolbar was previously hidden, show it again\n\t\t\t\tif (!rCouldShowToolbar.current) {\n\t\t\t\t\trCouldShowToolbar.current = true\n\t\t\t\t\tsetHasValidToolbarPosition(true)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlastContentSizeUpdateCounter = nextContentSizeUpdateCounter\n\t\t})\n\t}, [editor, getSelectionBounds, contentSizeUpdateCounter, move])\n\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\t// Send the hide or show events based on whether the user is clicking\n\t// and whether the toolbar's position is valid\n\tuseEffect(() => {\n\t\tif (cameraState === 'moving' && HIDE_TOOLBAR_WHEN_CAMERA_IS_MOVING) {\n\t\t\thide(true)\n\t\t\treturn\n\t\t}\n\n\t\tif (isMousingDown || !hasValidToolbarPosition) {\n\t\t\thide()\n\t\t\treturn\n\t\t}\n\n\t\tshow()\n\t}, [hasValidToolbarPosition, cameraState, isMousingDown, show, hide])\n\n\t// When the visibility changes, update the toolbar's visibility\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.dataset.visible = `${isVisible}`\n\t}, [isVisible, position])\n\n\t// When the position changes, update the toolbar's position on screen\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)\n\t}, [position])\n\n\t// When the interactivity changes, update the toolbar's interactivity\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.dataset.interactive = `${isInteractive}`\n\t}, [isInteractive])\n\n\treturn (\n\t\t<div\n\t\t\tref={toolbarRef}\n\t\t\tdata-interactive={false}\n\t\t\tdata-visible={false}\n\t\t\tdata-testid=\"contextual-toolbar\"\n\t\t\tclassName={classNames('tlui-contextual-toolbar', className)}\n\t\t\tonPointerDown={stopEventPropagation}\n\t\t>\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" className=\"tlui-menu\" label={label}>\n\t\t\t\t{children}\n\t\t\t</TldrawUiToolbar>\n\t\t</div>\n\t)\n}\n\n// For convenience, let's work just with boxes here\n/** @internal */\nexport function rectToBox(rect: DOMRect): Box {\n\treturn new Box(rect.x, rect.y, rect.width, rect.height)\n}\n\nexport function getToolbarScreenPosition(\n\teditor: Editor,\n\ttoolbarElm: HTMLElement,\n\tgetSelectionBounds: () => Box | undefined\n) {\n\tconst selectionBounds = getSelectionBounds()?.clone()\n\tif (!selectionBounds) return\n\n\t// Offset the selection bounds by the viewport screen bounds (if the editor is scrolled or inset, etc)\n\tconst vsb = editor.getViewportScreenBounds()\n\tselectionBounds.x -= vsb.x\n\tselectionBounds.y -= vsb.y\n\n\t// If the selection bounds are too far off of the screen, don't show the toolbar\n\tif (\n\t\tselectionBounds.midY < SCREEN_MARGIN ||\n\t\tselectionBounds.midY > vsb.h - SCREEN_MARGIN ||\n\t\tselectionBounds.midX < SCREEN_MARGIN ||\n\t\tselectionBounds.midX > vsb.w - SCREEN_MARGIN\n\t) {\n\t\treturn\n\t}\n\n\t// Get the toolbar's screen rect as a box. Do this after we verify that there is at least one selection.\n\tconst toolbarBounds = rectToBox(toolbarElm.getBoundingClientRect())\n\n\t// Chance these are NaN? Rare case.\n\tif (!toolbarBounds.width || !toolbarBounds.height) return\n\n\t// Thrashy, only do this if we're showing the toolbar\n\t// ! this might not be needed, the container never scrolls\n\tconst { scrollLeft, scrollTop } = editor.getContainer()\n\n\t// We want to position the toolbar so that it is centered over the selection\n\t// except in the cases where it would extend off the edge of the screen.\n\n\t// Start by placing the top left corner of the toolbar so that the\n\t// toolbar would be centered above the section bounds, bumped up by the\n\n\tlet x = LEFT_ALIGN_TOOLBAR ? selectionBounds.x : selectionBounds.midX - toolbarBounds.w / 2\n\tlet y = selectionBounds.y - toolbarBounds.h - TOOLBAR_GAP\n\n\t// Clamp the position on screen.\n\tx = clamp(x, SCREEN_MARGIN, vsb.w - toolbarBounds.w - SCREEN_MARGIN)\n\ty = clamp(y, SCREEN_MARGIN, vsb.h - toolbarBounds.h - SCREEN_MARGIN)\n\n\t// Offset the position by the container's scroll position\n\tx += scrollLeft\n\ty += scrollTop\n\n\t// Round the position to the nearest pixel\n\tx = Math.round(x)\n\ty = Math.round(y)\n\n\treturn { x, y }\n}\n\nfunction sufficientlyDistant(curr: Vec, next: Vec, changeOnlyWhenYChanges: boolean) {\n\tif (changeOnlyWhenYChanges) {\n\t\treturn Vec.Sub(next, curr).y ** 2 >= MIN_DISTANCE_TO_REPOSITION_SQUARED\n\t}\n\treturn Vec.Len2(Vec.Sub(next, curr)) >= MIN_DISTANCE_TO_REPOSITION_SQUARED\n}\n\nexport function useToolbarVisibilityStateMachine(changeOnlyWhenYChanges: boolean) {\n\tconst editor = useEditor()\n\n\tconst rState = useRef<\n\t\t{ name: 'hidden' } | { name: 'showing' } | { name: 'shown' } | { name: 'hiding' }\n\t>({ name: 'hidden' })\n\n\t// The toolbar should only be interactive when in the 'shown' state\n\tconst [isInteractive, setIsInteractive] = useState(false)\n\n\t// The toolbar is visible in the 'shown' and 'hiding' states\n\tconst [isVisible, setIsVisible] = useState(false)\n\n\t// The position is updated when entering the 'shown' state or when moving while in the 'shown' state\n\tconst [position, setPosition] = useState({ x: -1000, y: -1000 })\n\n\t// The toolbar's current position\n\tconst rCurrPosition = useRef(new Vec(-1000, -1000))\n\n\t// The toolbar's proposed next position\n\tconst rNextPosition = useRef(new Vec(-1000, -1000))\n\n\t// A timeout needs to be completed before the toolbar is shown or hidden\n\tconst rStableVisibilityTimeout = useRef<any>(-1)\n\n\t// A timeout needs to be completed before the toolbar's position changes moved\n\tconst rStablePositionTimeout = useRef<any>(-1)\n\n\t/**\n\t * Send the 'move' event whenever something happens that would cause the toolbar's position to change.\n\t * Any update here will cause\n\t * If the state is 'shown', it will start a new timeout that will update the toolbar's position after it completes.\n\t */\n\tconst move = useCallback(\n\t\t(x: number, y: number, immediate = false) => {\n\t\t\t// Update the next proposed position\n\t\t\trNextPosition.current.x = x\n\t\t\trNextPosition.current.y = y\n\n\t\t\t// If the toolbar is not yet visible, don't do anything\n\t\t\tif (rState.current.name === 'hidden' || rState.current.name === 'showing') return\n\n\t\t\t// If showing or hiding, cancel the position timeout and start a new one.\n\t\t\t// When the timeout ends, if we're in the 'shown' state and the position has changed sufficiently\n\t\t\t// from the last visible position, update the position.\n\t\t\tclearTimeout(rStablePositionTimeout.current)\n\n\t\t\tconst flushMove = () => {\n\t\t\t\tif (\n\t\t\t\t\trState.current.name === 'shown' &&\n\t\t\t\t\tsufficientlyDistant(rNextPosition.current, rCurrPosition.current, changeOnlyWhenYChanges)\n\t\t\t\t) {\n\t\t\t\t\tconst { x, y } = rNextPosition.current\n\t\t\t\t\trCurrPosition.current = new Vec(x, y)\n\t\t\t\t\tif (immediate) {\n\t\t\t\t\t\tflushSync(() => setPosition({ x, y }))\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetPosition({ x, y })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (immediate) {\n\t\t\t\tflushMove()\n\t\t\t} else {\n\t\t\t\trStablePositionTimeout.current = editor.timers.setTimeout(flushMove, MOVE_TIMEOUT)\n\t\t\t}\n\t\t},\n\t\t[editor, changeOnlyWhenYChanges]\n\t)\n\n\t/**\n\t * Send the hide event whenever a change occurs that would cause the toolbar to become invisible.\n\t * If the state is 'shown', it will enter 'hiding' and then 'hidden' after a timeout completes.\n\t * If the state is 'showing', it will cancel the visibility timeout and enter 'hidden' immediately.\n\t */\n\tconst hide = useCallback(\n\t\t(immediate = false) => {\n\t\t\tswitch (rState.current.name) {\n\t\t\t\tcase 'showing': {\n\t\t\t\t\tclearTimeout(rStableVisibilityTimeout.current)\n\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'shown': {\n\t\t\t\t\trState.current = { name: 'hiding' }\n\t\t\t\t\tsetIsInteractive(false) // when leaving shown, turn back on interactions\n\n\t\t\t\t\tif (immediate) {\n\t\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\t\tsetIsVisible(false)\n\t\t\t\t\t} else {\n\t\t\t\t\t\trStableVisibilityTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\t\t\tsetIsVisible(false)\n\t\t\t\t\t\t}, HIDE_VISIBILITY_TIMEOUT)\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tdefault: {\n\t\t\t\t\t// noop\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t/**\n\t * Send the show event whenever a change occurs that would cause the toolbar to become visible.\n\t * If the state is 'hidden', it will enter 'showing' and then 'shown' after a timeout completes.\n\t * If the state is 'hiding', it will cancel the visibility timeout and enter 'shown' immediately.\n\t */\n\tconst show = useCallback(() => {\n\t\tswitch (rState.current.name) {\n\t\t\tcase 'hidden': {\n\t\t\t\trState.current = { name: 'showing' }\n\t\t\t\trStableVisibilityTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t// position\n\t\t\t\t\tconst { x, y } = rNextPosition.current\n\t\t\t\t\trCurrPosition.current = new Vec(x, y)\n\t\t\t\t\tsetPosition({ x, y })\n\n\t\t\t\t\trState.current = { name: 'shown' }\n\t\t\t\t\tsetIsVisible(true)\n\t\t\t\t\tsetIsInteractive(true)\n\t\t\t\t}, SHOW_VISIBILITY_TIMEOUT)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'hiding': {\n\t\t\t\t// Go back to shown immediately\n\t\t\t\tclearTimeout(rStableVisibilityTimeout.current)\n\t\t\t\trState.current = { name: 'shown' }\n\t\t\t\tsetIsInteractive(true) // when entering shown, turn back on interactions\n\t\t\t\tmove(rNextPosition.current.x, rNextPosition.current.y)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\t// noop\n\t\t\t}\n\t\t}\n\t}, [editor, move])\n\n\treturn { isVisible, isInteractive, show, hide, move, position }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tassert,\n\tBox,\n\tclamp,\n\tEditor,\n\treact,\n\tuseAtom,\n\tuseEditor,\n\tusePassThroughMouseOverEvents,\n\tusePassThroughWheelEvents,\n\tuseValue,\n\tVec,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport React, { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { flushSync } from 'react-dom'\nimport { TldrawUiToolbar } from './TldrawUiToolbar'\n\nconst MOVE_TIMEOUT = 150\nconst HIDE_VISIBILITY_TIMEOUT = 16\nconst SHOW_VISIBILITY_TIMEOUT = 16\nconst MIN_DISTANCE_TO_REPOSITION_SQUARED = 16 ** 2\nconst TOOLBAR_GAP = 8\nconst SCREEN_MARGIN = 16\nconst HIDE_TOOLBAR_WHEN_CAMERA_IS_MOVING = false\nconst LEFT_ALIGN_TOOLBAR = false\n\n/** @public */\nexport interface TLUiContextualToolbarProps {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tisMousingDown?: boolean\n\tgetSelectionBounds(): Box | undefined\n\tchangeOnlyWhenYChanges?: boolean\n\tlabel: string\n}\n\n/**\n * A generic floating toolbar that can be used for things\n * like rich text editing, image toolbars, etc.\n *\n * @public @react\n */\nexport const TldrawUiContextualToolbar = ({\n\tchildren,\n\tclassName,\n\tisMousingDown,\n\tgetSelectionBounds,\n\tchangeOnlyWhenYChanges = false,\n\tlabel,\n}: TLUiContextualToolbarProps) => {\n\tconst editor = useEditor()\n\tconst toolbarRef = useRef<HTMLDivElement>(null)\n\n\tusePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement>)\n\tusePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement>)\n\n\tconst { isVisible, isInteractive, hide, show, position, move } =\n\t\tuseToolbarVisibilityStateMachine(changeOnlyWhenYChanges)\n\n\t// annoying react stuff: we don't want the toolbar position function to depend on the react state so we'll double with a ref\n\tconst rCouldShowToolbar = useRef(false)\n\tconst [hasValidToolbarPosition, setHasValidToolbarPosition] = useState(false)\n\n\tconst contentSizeUpdateCounter = useAtom('content size update counter', 0)\n\n\tuseEffect(() => {\n\t\tassert(toolbarRef.current)\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\tcontentSizeUpdateCounter.update((n) => n + 1)\n\t\t})\n\t\tobserver.observe(toolbarRef.current)\n\t\treturn () => observer.disconnect()\n\t}, [contentSizeUpdateCounter])\n\n\tuseEffect(() => {\n\t\tlet lastContentSizeUpdateCounter = contentSizeUpdateCounter.get()\n\t\treturn react('toolbar position', function updateToolbarPositionAndDisplay() {\n\t\t\tconst toolbarElm = toolbarRef.current\n\t\t\tif (!toolbarElm) return\n\n\t\t\tconst nextContentSizeUpdateCounter = contentSizeUpdateCounter.get()\n\n\t\t\t// capture / force this to update when...\n\t\t\teditor.getCamera() // the camera moves\n\t\t\tcontentSizeUpdateCounter.get() // the toolbar size changes\n\t\t\t// undefined here means that we can't show the toolbar due to an incompatible position\n\t\t\tconst position = getToolbarScreenPosition(editor, toolbarElm, getSelectionBounds)\n\n\t\t\t// todo: when the toolbar is hidden due to the selection being off screen, it should be hidden immediately\n\t\t\t// rather than waiting for the position to settle. This is different than when the position changes due to\n\t\t\t// a change in the user's selection.\n\t\t\tif (!position) {\n\t\t\t\tif (rCouldShowToolbar.current) {\n\t\t\t\t\t// If we don't have a position, then we're not showing the toolbar\n\t\t\t\t\trCouldShowToolbar.current = false\n\t\t\t\t\tsetHasValidToolbarPosition(false)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// If the camera state is moving, we want to immediately update the position\n\t\t\t\t// todo: consider hiding the toolbar while the camera is moving\n\t\t\t\tconst cameraState = editor.getCameraState()\n\t\t\t\tif (cameraState === 'moving') {\n\t\t\t\t\t// ...if we wanted this to avoid prematurely updating any positions, we'd need\n\t\t\t\t\t// to have the last updated position in page space, so that we could convert\n\t\t\t\t\t// it to screen space and update it here\n\t\t\t\t\tconst elm = toolbarRef.current\n\t\t\t\t\telm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)\n\t\t\t\t} else {\n\t\t\t\t\tconst moveImmediately = lastContentSizeUpdateCounter !== nextContentSizeUpdateCounter\n\t\t\t\t\t// Schedule a move to its next location\n\t\t\t\t\tmove(position.x, position.y, moveImmediately)\n\t\t\t\t}\n\n\t\t\t\t// Finally, if the toolbar was previously hidden, show it again\n\t\t\t\tif (!rCouldShowToolbar.current) {\n\t\t\t\t\trCouldShowToolbar.current = true\n\t\t\t\t\tsetHasValidToolbarPosition(true)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlastContentSizeUpdateCounter = nextContentSizeUpdateCounter\n\t\t})\n\t}, [editor, getSelectionBounds, contentSizeUpdateCounter, move])\n\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\t// Send the hide or show events based on whether the user is clicking\n\t// and whether the toolbar's position is valid\n\tuseEffect(() => {\n\t\tif (cameraState === 'moving' && HIDE_TOOLBAR_WHEN_CAMERA_IS_MOVING) {\n\t\t\thide(true)\n\t\t\treturn\n\t\t}\n\n\t\tif (isMousingDown || !hasValidToolbarPosition) {\n\t\t\thide()\n\t\t\treturn\n\t\t}\n\n\t\tshow()\n\t}, [hasValidToolbarPosition, cameraState, isMousingDown, show, hide])\n\n\t// When the visibility changes, update the toolbar's visibility\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.dataset.visible = `${isVisible}`\n\t}, [isVisible, position])\n\n\t// When the position changes, update the toolbar's position on screen\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)\n\t}, [position])\n\n\t// When the interactivity changes, update the toolbar's interactivity\n\tuseLayoutEffect(() => {\n\t\tconst elm = toolbarRef.current\n\t\tif (!elm) return\n\t\telm.dataset.interactive = `${isInteractive}`\n\t}, [isInteractive])\n\n\treturn (\n\t\t<div\n\t\t\tref={toolbarRef}\n\t\t\tdata-interactive={false}\n\t\t\tdata-visible={false}\n\t\t\tdata-testid=\"contextual-toolbar\"\n\t\t\tclassName={classNames('tlui-contextual-toolbar', className)}\n\t\t\tonPointerDown={editor.markEventAsHandled}\n\t\t>\n\t\t\t<TldrawUiToolbar\n\t\t\t\torientation=\"horizontal\"\n\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\tlabel={label}\n\t\t\t\ttooltipSide=\"top\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</TldrawUiToolbar>\n\t\t</div>\n\t)\n}\n\n// For convenience, let's work just with boxes here\n/** @internal */\nexport function rectToBox(rect: DOMRect): Box {\n\treturn new Box(rect.x, rect.y, rect.width, rect.height)\n}\n\nexport function getToolbarScreenPosition(\n\teditor: Editor,\n\ttoolbarElm: HTMLElement,\n\tgetSelectionBounds: () => Box | undefined\n) {\n\tconst selectionBounds = getSelectionBounds()?.clone()\n\tif (!selectionBounds) return\n\n\t// Offset the selection bounds by the viewport screen bounds (if the editor is scrolled or inset, etc)\n\tconst vsb = editor.getViewportScreenBounds()\n\tselectionBounds.x -= vsb.x\n\tselectionBounds.y -= vsb.y\n\n\t// If the selection bounds are too far off of the screen, don't show the toolbar\n\tif (\n\t\tselectionBounds.midY < SCREEN_MARGIN ||\n\t\tselectionBounds.midY > vsb.h - SCREEN_MARGIN ||\n\t\tselectionBounds.midX < SCREEN_MARGIN ||\n\t\tselectionBounds.midX > vsb.w - SCREEN_MARGIN\n\t) {\n\t\treturn\n\t}\n\n\t// Get the toolbar's screen rect as a box. Do this after we verify that there is at least one selection.\n\tconst toolbarBounds = rectToBox(toolbarElm.getBoundingClientRect())\n\n\t// Chance these are NaN? Rare case.\n\tif (!toolbarBounds.width || !toolbarBounds.height) return\n\n\t// Thrashy, only do this if we're showing the toolbar\n\t// ! this might not be needed, the container never scrolls\n\tconst { scrollLeft, scrollTop } = editor.getContainer()\n\n\t// We want to position the toolbar so that it is centered over the selection\n\t// except in the cases where it would extend off the edge of the screen.\n\n\t// Start by placing the top left corner of the toolbar so that the\n\t// toolbar would be centered above the section bounds, bumped up by the\n\n\tlet x = LEFT_ALIGN_TOOLBAR ? selectionBounds.x : selectionBounds.midX - toolbarBounds.w / 2\n\tlet y = selectionBounds.y - toolbarBounds.h - TOOLBAR_GAP\n\n\t// Clamp the position on screen.\n\tx = clamp(x, SCREEN_MARGIN, vsb.w - toolbarBounds.w - SCREEN_MARGIN)\n\ty = clamp(y, SCREEN_MARGIN, vsb.h - toolbarBounds.h - SCREEN_MARGIN)\n\n\t// Offset the position by the container's scroll position\n\tx += scrollLeft\n\ty += scrollTop\n\n\t// Round the position to the nearest pixel\n\tx = Math.round(x)\n\ty = Math.round(y)\n\n\treturn { x, y }\n}\n\nfunction sufficientlyDistant(curr: Vec, next: Vec, changeOnlyWhenYChanges: boolean) {\n\tif (changeOnlyWhenYChanges) {\n\t\treturn Vec.Sub(next, curr).y ** 2 >= MIN_DISTANCE_TO_REPOSITION_SQUARED\n\t}\n\treturn Vec.Len2(Vec.Sub(next, curr)) >= MIN_DISTANCE_TO_REPOSITION_SQUARED\n}\n\nexport function useToolbarVisibilityStateMachine(changeOnlyWhenYChanges: boolean) {\n\tconst editor = useEditor()\n\n\tconst rState = useRef<\n\t\t{ name: 'hidden' } | { name: 'showing' } | { name: 'shown' } | { name: 'hiding' }\n\t>({ name: 'hidden' })\n\n\t// The toolbar should only be interactive when in the 'shown' state\n\tconst [isInteractive, setIsInteractive] = useState(false)\n\n\t// The toolbar is visible in the 'shown' and 'hiding' states\n\tconst [isVisible, setIsVisible] = useState(false)\n\n\t// The position is updated when entering the 'shown' state or when moving while in the 'shown' state\n\tconst [position, setPosition] = useState({ x: -1000, y: -1000 })\n\n\t// The toolbar's current position\n\tconst rCurrPosition = useRef(new Vec(-1000, -1000))\n\n\t// The toolbar's proposed next position\n\tconst rNextPosition = useRef(new Vec(-1000, -1000))\n\n\t// A timeout needs to be completed before the toolbar is shown or hidden\n\tconst rStableVisibilityTimeout = useRef<any>(-1)\n\n\t// A timeout needs to be completed before the toolbar's position changes moved\n\tconst rStablePositionTimeout = useRef<any>(-1)\n\n\t/**\n\t * Send the 'move' event whenever something happens that would cause the toolbar's position to change.\n\t * Any update here will cause\n\t * If the state is 'shown', it will start a new timeout that will update the toolbar's position after it completes.\n\t */\n\tconst move = useCallback(\n\t\t(x: number, y: number, immediate = false) => {\n\t\t\t// Update the next proposed position\n\t\t\trNextPosition.current.x = x\n\t\t\trNextPosition.current.y = y\n\n\t\t\t// If the toolbar is not yet visible, don't do anything\n\t\t\tif (rState.current.name === 'hidden' || rState.current.name === 'showing') return\n\n\t\t\t// If showing or hiding, cancel the position timeout and start a new one.\n\t\t\t// When the timeout ends, if we're in the 'shown' state and the position has changed sufficiently\n\t\t\t// from the last visible position, update the position.\n\t\t\tclearTimeout(rStablePositionTimeout.current)\n\n\t\t\tconst flushMove = () => {\n\t\t\t\tif (\n\t\t\t\t\trState.current.name === 'shown' &&\n\t\t\t\t\tsufficientlyDistant(rNextPosition.current, rCurrPosition.current, changeOnlyWhenYChanges)\n\t\t\t\t) {\n\t\t\t\t\tconst { x, y } = rNextPosition.current\n\t\t\t\t\trCurrPosition.current = new Vec(x, y)\n\t\t\t\t\tif (immediate) {\n\t\t\t\t\t\tflushSync(() => setPosition({ x, y }))\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetPosition({ x, y })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (immediate) {\n\t\t\t\tflushMove()\n\t\t\t} else {\n\t\t\t\trStablePositionTimeout.current = editor.timers.setTimeout(flushMove, MOVE_TIMEOUT)\n\t\t\t}\n\t\t},\n\t\t[editor, changeOnlyWhenYChanges]\n\t)\n\n\t/**\n\t * Send the hide event whenever a change occurs that would cause the toolbar to become invisible.\n\t * If the state is 'shown', it will enter 'hiding' and then 'hidden' after a timeout completes.\n\t * If the state is 'showing', it will cancel the visibility timeout and enter 'hidden' immediately.\n\t */\n\tconst hide = useCallback(\n\t\t(immediate = false) => {\n\t\t\tswitch (rState.current.name) {\n\t\t\t\tcase 'showing': {\n\t\t\t\t\tclearTimeout(rStableVisibilityTimeout.current)\n\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'shown': {\n\t\t\t\t\trState.current = { name: 'hiding' }\n\t\t\t\t\tsetIsInteractive(false) // when leaving shown, turn back on interactions\n\n\t\t\t\t\tif (immediate) {\n\t\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\t\tsetIsVisible(false)\n\t\t\t\t\t} else {\n\t\t\t\t\t\trStableVisibilityTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\trState.current = { name: 'hidden' }\n\t\t\t\t\t\t\tsetIsVisible(false)\n\t\t\t\t\t\t}, HIDE_VISIBILITY_TIMEOUT)\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tdefault: {\n\t\t\t\t\t// noop\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t/**\n\t * Send the show event whenever a change occurs that would cause the toolbar to become visible.\n\t * If the state is 'hidden', it will enter 'showing' and then 'shown' after a timeout completes.\n\t * If the state is 'hiding', it will cancel the visibility timeout and enter 'shown' immediately.\n\t */\n\tconst show = useCallback(() => {\n\t\tswitch (rState.current.name) {\n\t\t\tcase 'hidden': {\n\t\t\t\trState.current = { name: 'showing' }\n\t\t\t\trStableVisibilityTimeout.current = editor.timers.setTimeout(() => {\n\t\t\t\t\t// position\n\t\t\t\t\tconst { x, y } = rNextPosition.current\n\t\t\t\t\trCurrPosition.current = new Vec(x, y)\n\t\t\t\t\tsetPosition({ x, y })\n\n\t\t\t\t\trState.current = { name: 'shown' }\n\t\t\t\t\tsetIsVisible(true)\n\t\t\t\t\tsetIsInteractive(true)\n\t\t\t\t}, SHOW_VISIBILITY_TIMEOUT)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'hiding': {\n\t\t\t\t// Go back to shown immediately\n\t\t\t\tclearTimeout(rStableVisibilityTimeout.current)\n\t\t\t\trState.current = { name: 'shown' }\n\t\t\t\tsetIsInteractive(true) // when entering shown, turn back on interactions\n\t\t\t\tmove(rNextPosition.current.x, rNextPosition.current.y)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\t// noop\n\t\t\t}\n\t\t}\n\t}, [editor, move])\n\n\treturn { isVisible, isInteractive, show, hide, move, position }\n}\n"],
+  "mappings": "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",
   "names": ["position", "cameraState", "x", "y"]
 }

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { stopEventPropagation, tlenv, tltime, useMaybeEditor } from "@tldraw/editor";
+import { tlenv, tltime, useMaybeEditor } from "@tldraw/editor";
 import classNames from "classnames";
 import * as React from "react";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
@@ -24,7 +24,8 @@ const TldrawUiInput = React.forwardRef(
     children,
     value,
     "data-testid": dataTestId,
-    disabled
+    disabled,
+    "aria-label": ariaLabel
   }, ref) {
     const editor = useMaybeEditor();
     const rInputRef = React.useRef(null);
@@ -70,7 +71,7 @@ const TldrawUiInput = React.forwardRef(
           case "Enter": {
             if (isComposing.current) return;
             e.currentTarget.blur();
-            stopEventPropagation(e);
+            e.stopPropagation();
             onComplete?.(e.currentTarget.value);
             break;
           }
@@ -78,7 +79,7 @@ const TldrawUiInput = React.forwardRef(
             e.currentTarget.value = rInitialValue.current;
             onCancel?.(e.currentTarget.value);
             e.currentTarget.blur();
-            stopEventPropagation(e);
+            e.stopPropagation();
             break;
           }
         }
@@ -145,6 +146,7 @@ const TldrawUiInput = React.forwardRef(
           onCompositionStart: handleCompositionStart,
           onCompositionEnd: handleCompositionEnd,
           autoFocus,
+          "aria-label": ariaLabel,
           placeholder,
           value,
           "data-testid": dataTestId,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiInput.tsx"],
-  "sourcesContent": ["import { stopEventPropagation, tlenv, tltime, useMaybeEditor } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiIcon } from './TldrawUiIcon'\n\n/** @public */\nexport interface TLUiInputProps {\n\tdisabled?: boolean\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\ticonLeft?: TLUiIconType | Exclude<string, TLUiIconType>\n\ticonLabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tautoFocus?: boolean\n\tautoSelect?: boolean\n\tchildren?: React.ReactNode\n\tdefaultValue?: string\n\tplaceholder?: string\n\tonComplete?(value: string): void\n\tonValueChange?(value: string): void\n\tonCancel?(value: string): void\n\tonBlur?(value: string): void\n\tonFocus?(): void\n\tclassName?: string\n\t/**\n\t * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input\n\t * into view. Sometimes this doesn't work properly though - for example, if the input is newly\n\t * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to\n\t * opt-in to some extra code to manually bring the input into view when the visual viewport of the\n\t * browser changes, but we don't want to use it everywhere because generally the native behavior\n\t * looks nicer in scenarios where it's sufficient.\n\t */\n\tshouldManuallyMaintainScrollPositionWhenFocused?: boolean\n\tvalue?: string\n\t'data-testid'?: string\n}\n\n/** @public @react */\nexport const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(\n\tfunction TldrawUiInput(\n\t\t{\n\t\t\tclassName,\n\t\t\tlabel,\n\t\t\ticon,\n\t\t\ticonLeft,\n\t\t\ticonLabel,\n\t\t\tautoSelect = false,\n\t\t\tautoFocus = false,\n\t\t\tdefaultValue,\n\t\t\tplaceholder,\n\t\t\tonComplete,\n\t\t\tonValueChange,\n\t\t\tonCancel,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t\tshouldManuallyMaintainScrollPositionWhenFocused = false,\n\t\t\tchildren,\n\t\t\tvalue,\n\t\t\t'data-testid': dataTestId,\n\t\t\tdisabled,\n\t\t},\n\t\tref\n\t) {\n\t\tconst editor = useMaybeEditor()\n\t\tconst rInputRef = React.useRef<HTMLInputElement>(null)\n\n\t\t// combine rInputRef and ref\n\t\tReact.useImperativeHandle(ref, () => rInputRef.current as HTMLInputElement)\n\n\t\tconst msg = useTranslation()\n\t\tconst rInitialValue = React.useRef<string>(defaultValue ?? '')\n\t\tconst rCurrentValue = React.useRef<string>(defaultValue ?? '')\n\n\t\tconst isComposing = React.useRef(false)\n\n\t\tconst [isFocused, setIsFocused] = React.useState(false)\n\t\tconst handleFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetIsFocused(true)\n\t\t\t\tconst elm = e.currentTarget as HTMLInputElement\n\t\t\t\trCurrentValue.current = elm.value\n\t\t\t\tif (editor) {\n\t\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\t\tif (autoSelect) {\n\t\t\t\t\t\t\telm.select()\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\ttltime.requestAnimationFrame('anon', () => {\n\t\t\t\t\t\tif (autoSelect) {\n\t\t\t\t\t\t\telm.select()\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\tonFocus?.()\n\t\t\t},\n\t\t\t[autoSelect, editor, onFocus]\n\t\t)\n\n\t\tconst handleChange = React.useCallback(\n\t\t\t(e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\tconst value = e.currentTarget.value\n\t\t\t\trCurrentValue.current = value\n\t\t\t\tonValueChange?.(value)\n\t\t\t},\n\t\t\t[onValueChange]\n\t\t)\n\n\t\t// We use keydown capture, because we want to get the escape key event.\n\t\tconst handleKeyDownCapture = React.useCallback(\n\t\t\t(e: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tswitch (e.key) {\n\t\t\t\t\tcase 'Enter': {\n\t\t\t\t\t\t// In Chrome, if the user presses the Enter key while using the IME and calls\n\t\t\t\t\t\t// `e.currentTarget.blur()` in the event callback here, it will trigger an\n\t\t\t\t\t\t// `onChange` with a duplicated text value.\n\t\t\t\t\t\tif (isComposing.current) return\n\t\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\t\tonComplete?.(e.currentTarget.value)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t\tcase 'Escape': {\n\t\t\t\t\t\te.currentTarget.value = rInitialValue.current\n\t\t\t\t\t\tonCancel?.(e.currentTarget.value)\n\t\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t[onComplete, onCancel]\n\t\t)\n\n\t\tconst handleBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetIsFocused(false)\n\t\t\t\tconst value = e.currentTarget.value\n\t\t\t\tonBlur?.(value)\n\t\t\t},\n\t\t\t[onBlur]\n\t\t)\n\n\t\tconst handleCompositionStart = React.useCallback(() => (isComposing.current = true), [])\n\t\tconst handleCompositionEnd = React.useCallback(() => (isComposing.current = false), [])\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!tlenv.isIos) return\n\n\t\t\tconst visualViewport = window.visualViewport\n\t\t\tif (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {\n\t\t\t\tconst onViewportChange = () => {\n\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t}\n\t\t\t\tvisualViewport.addEventListener('resize', onViewportChange)\n\t\t\t\tvisualViewport.addEventListener('scroll', onViewportChange)\n\n\t\t\t\tif (editor) {\n\t\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\ttltime.requestAnimationFrame('anon', () => {\n\t\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\treturn () => {\n\t\t\t\t\tvisualViewport.removeEventListener('resize', onViewportChange)\n\t\t\t\t\tvisualViewport.removeEventListener('scroll', onViewportChange)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [isFocused, editor, shouldManuallyMaintainScrollPositionWhenFocused])\n\n\t\treturn (\n\t\t\t<div draggable={false} className=\"tlui-input__wrapper\">\n\t\t\t\t{children}\n\t\t\t\t{label && <label>{msg(label)}</label>}\n\t\t\t\t{iconLeft && (\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tlabel={iconLabel ? msg(iconLabel) : ''}\n\t\t\t\t\t\ticon={iconLeft}\n\t\t\t\t\t\tclassName=\"tlui-icon-left\"\n\t\t\t\t\t\tsmall\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<input\n\t\t\t\t\tref={rInputRef}\n\t\t\t\t\tclassName={classNames('tlui-input', className)}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\t\tonKeyDownCapture={handleKeyDownCapture}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tonCompositionStart={handleCompositionStart}\n\t\t\t\t\tonCompositionEnd={handleCompositionEnd}\n\t\t\t\t\tautoFocus={autoFocus}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdata-testid={dataTestId}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t/>\n\t\t\t\t{icon && (\n\t\t\t\t\t<TldrawUiIcon label={iconLabel ? msg(iconLabel) : ''} icon={icon} small={!!label} />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { tlenv, tltime, useMaybeEditor } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport * as React from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiIcon } from './TldrawUiIcon'\n\n/** @public */\nexport interface TLUiInputProps {\n\tdisabled?: boolean\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\ticon?: TLUiIconType | Exclude<string, TLUiIconType>\n\ticonLeft?: TLUiIconType | Exclude<string, TLUiIconType>\n\ticonLabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tautoFocus?: boolean\n\tautoSelect?: boolean\n\tchildren?: React.ReactNode\n\tdefaultValue?: string\n\tplaceholder?: string\n\tonComplete?(value: string): void\n\tonValueChange?(value: string): void\n\tonCancel?(value: string): void\n\tonBlur?(value: string): void\n\tonFocus?(): void\n\tclassName?: string\n\t/**\n\t * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input\n\t * into view. Sometimes this doesn't work properly though - for example, if the input is newly\n\t * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to\n\t * opt-in to some extra code to manually bring the input into view when the visual viewport of the\n\t * browser changes, but we don't want to use it everywhere because generally the native behavior\n\t * looks nicer in scenarios where it's sufficient.\n\t */\n\tshouldManuallyMaintainScrollPositionWhenFocused?: boolean\n\tvalue?: string\n\t'data-testid'?: string\n\t'aria-label'?: string\n}\n\n/** @public @react */\nexport const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(\n\tfunction TldrawUiInput(\n\t\t{\n\t\t\tclassName,\n\t\t\tlabel,\n\t\t\ticon,\n\t\t\ticonLeft,\n\t\t\ticonLabel,\n\t\t\tautoSelect = false,\n\t\t\tautoFocus = false,\n\t\t\tdefaultValue,\n\t\t\tplaceholder,\n\t\t\tonComplete,\n\t\t\tonValueChange,\n\t\t\tonCancel,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t\tshouldManuallyMaintainScrollPositionWhenFocused = false,\n\t\t\tchildren,\n\t\t\tvalue,\n\t\t\t'data-testid': dataTestId,\n\t\t\tdisabled,\n\t\t\t'aria-label': ariaLabel,\n\t\t},\n\t\tref\n\t) {\n\t\tconst editor = useMaybeEditor()\n\t\tconst rInputRef = React.useRef<HTMLInputElement>(null)\n\n\t\t// combine rInputRef and ref\n\t\tReact.useImperativeHandle(ref, () => rInputRef.current as HTMLInputElement)\n\n\t\tconst msg = useTranslation()\n\t\tconst rInitialValue = React.useRef<string>(defaultValue ?? '')\n\t\tconst rCurrentValue = React.useRef<string>(defaultValue ?? '')\n\n\t\tconst isComposing = React.useRef(false)\n\n\t\tconst [isFocused, setIsFocused] = React.useState(false)\n\t\tconst handleFocus = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetIsFocused(true)\n\t\t\t\tconst elm = e.currentTarget as HTMLInputElement\n\t\t\t\trCurrentValue.current = elm.value\n\t\t\t\tif (editor) {\n\t\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\t\tif (autoSelect) {\n\t\t\t\t\t\t\telm.select()\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\ttltime.requestAnimationFrame('anon', () => {\n\t\t\t\t\t\tif (autoSelect) {\n\t\t\t\t\t\t\telm.select()\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\tonFocus?.()\n\t\t\t},\n\t\t\t[autoSelect, editor, onFocus]\n\t\t)\n\n\t\tconst handleChange = React.useCallback(\n\t\t\t(e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\tconst value = e.currentTarget.value\n\t\t\t\trCurrentValue.current = value\n\t\t\t\tonValueChange?.(value)\n\t\t\t},\n\t\t\t[onValueChange]\n\t\t)\n\n\t\t// We use keydown capture, because we want to get the escape key event.\n\t\tconst handleKeyDownCapture = React.useCallback(\n\t\t\t(e: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tswitch (e.key) {\n\t\t\t\t\tcase 'Enter': {\n\t\t\t\t\t\t// In Chrome, if the user presses the Enter key while using the IME and calls\n\t\t\t\t\t\t// `e.currentTarget.blur()` in the event callback here, it will trigger an\n\t\t\t\t\t\t// `onChange` with a duplicated text value.\n\t\t\t\t\t\tif (isComposing.current) return\n\t\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tonComplete?.(e.currentTarget.value)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t\tcase 'Escape': {\n\t\t\t\t\t\te.currentTarget.value = rInitialValue.current\n\t\t\t\t\t\tonCancel?.(e.currentTarget.value)\n\t\t\t\t\t\te.currentTarget.blur()\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t[onComplete, onCancel]\n\t\t)\n\n\t\tconst handleBlur = React.useCallback(\n\t\t\t(e: React.FocusEvent<HTMLInputElement>) => {\n\t\t\t\tsetIsFocused(false)\n\t\t\t\tconst value = e.currentTarget.value\n\t\t\t\tonBlur?.(value)\n\t\t\t},\n\t\t\t[onBlur]\n\t\t)\n\n\t\tconst handleCompositionStart = React.useCallback(() => (isComposing.current = true), [])\n\t\tconst handleCompositionEnd = React.useCallback(() => (isComposing.current = false), [])\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!tlenv.isIos) return\n\n\t\t\tconst visualViewport = window.visualViewport\n\t\t\tif (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {\n\t\t\t\tconst onViewportChange = () => {\n\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t}\n\t\t\t\tvisualViewport.addEventListener('resize', onViewportChange)\n\t\t\t\tvisualViewport.addEventListener('scroll', onViewportChange)\n\n\t\t\t\tif (editor) {\n\t\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\ttltime.requestAnimationFrame('anon', () => {\n\t\t\t\t\t\trInputRef.current?.scrollIntoView({ block: 'center' })\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\treturn () => {\n\t\t\t\t\tvisualViewport.removeEventListener('resize', onViewportChange)\n\t\t\t\t\tvisualViewport.removeEventListener('scroll', onViewportChange)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [isFocused, editor, shouldManuallyMaintainScrollPositionWhenFocused])\n\n\t\treturn (\n\t\t\t<div draggable={false} className=\"tlui-input__wrapper\">\n\t\t\t\t{children}\n\t\t\t\t{label && <label>{msg(label)}</label>}\n\t\t\t\t{iconLeft && (\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tlabel={iconLabel ? msg(iconLabel) : ''}\n\t\t\t\t\t\ticon={iconLeft}\n\t\t\t\t\t\tclassName=\"tlui-icon-left\"\n\t\t\t\t\t\tsmall\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<input\n\t\t\t\t\tref={rInputRef}\n\t\t\t\t\tclassName={classNames('tlui-input', className)}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\t\tonKeyDownCapture={handleKeyDownCapture}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tonCompositionStart={handleCompositionStart}\n\t\t\t\t\tonCompositionEnd={handleCompositionEnd}\n\t\t\t\t\tautoFocus={autoFocus}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdata-testid={dataTestId}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t/>\n\t\t\t\t{icon && (\n\t\t\t\t\t<TldrawUiIcon label={iconLabel ? msg(iconLabel) : ''} icon={icon} small={!!label} />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)\n\t}\n)\n"],
+  "mappings": "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",
   "names": ["TldrawUiInput", "value"]
 }

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

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { tltime } from "@tldraw/editor";
 import { Slider as _Slider } from "radix-ui";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { TldrawUiTooltip, tooltipManager } from "./TldrawUiTooltip.mjs";
 const TldrawUiSlider = React.forwardRef(function Slider({
   onHistoryMark,
   title,
@@ -14,6 +16,7 @@ const TldrawUiSlider = React.forwardRef(function Slider({
   ariaValueModifier = 1
 }, ref) {
   const msg = useTranslation();
+  const [titleAndLabel, setTitleAndLabel] = useState("");
   const [tabIndex, setTabIndex] = useState(-1);
   useEffect(() => {
     setTabIndex(0);
@@ -25,14 +28,25 @@ const TldrawUiSlider = React.forwardRef(function Slider({
     [onValueChange]
   );
   const handlePointerDown = useCallback(() => {
-    onHistoryMark("click slider");
+    tooltipManager.hideAllTooltips();
+    onHistoryMark?.("click slider");
   }, [onHistoryMark]);
+  useEffect(() => {
+    const timeout = tltime.setTimeout(
+      "set title and label",
+      () => {
+        setTitleAndLabel(title + " \u2014 " + msg(label));
+      },
+      0
+    );
+    return () => clearTimeout(timeout);
+  }, [label, msg, title]);
   const handleKeyEvent = useCallback((event) => {
     if (event.key === "Tab") {
       event.stopPropagation();
     }
   }, []);
-  return /* @__PURE__ */ jsx("div", { className: "tlui-slider__container", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "tlui-slider__container", children: /* @__PURE__ */ jsx(TldrawUiTooltip, { content: titleAndLabel, children: /* @__PURE__ */ jsxs(
     _Slider.Root,
     {
       "data-testid": testId,
@@ -46,7 +60,6 @@ const TldrawUiSlider = React.forwardRef(function Slider({
       onValueChange: handleValueChange,
       onKeyDownCapture: handleKeyEvent,
       onKeyUpCapture: handleKeyEvent,
-      title: title + " \u2014 " + msg(label),
       children: [
         /* @__PURE__ */ jsx(_Slider.Track, { className: "tlui-slider__track", dir: "ltr", children: value !== null && /* @__PURE__ */ jsx(_Slider.Range, { className: "tlui-slider__range", dir: "ltr" }) }),
         value !== null && /* @__PURE__ */ jsx(
@@ -55,7 +68,7 @@ const TldrawUiSlider = React.forwardRef(function Slider({
             "aria-valuemin": (min ?? 0) * ariaValueModifier,
             "aria-valuenow": value * ariaValueModifier,
             "aria-valuemax": steps * ariaValueModifier,
-            "aria-label": title + " \u2014 " + msg(label),
+            "aria-label": titleAndLabel,
             className: "tlui-slider__thumb",
             dir: "ltr",
             ref,
@@ -64,7 +77,7 @@ const TldrawUiSlider = React.forwardRef(function Slider({
         )
       ]
     }
-  ) });
+  ) }) });
 });
 export {
   TldrawUiSlider

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSlider.tsx"],
-  "sourcesContent": ["import { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<_Slider.Root\n\t\t\t\tdata-testid={testId}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={min ?? 0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</_Slider.Track>\n\t\t\t\t{value !== null && (\n\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\taria-label={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</_Slider.Root>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAkEG,SAeqB,KAfrB;AAlEH,SAAS,UAAU,eAAe;AAClC,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,sBAAsB;AAgBxB,MAAM,iBAAiB,MAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,YAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,iBAAiB,YAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,SAAI,WAAU,0BACd;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,4BAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,oBAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY,QAAQ,aAAQ,IAAI,KAA2B;AAAA,YAC3D,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { tltime } from '@tldraw/editor'\nimport { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark?(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\tconst [titleAndLabel, setTitleAndLabel] = useState('')\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\ttooltipManager.hideAllTooltips()\n\t\tonHistoryMark?.('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. This is a bit silly. The Radix slider auto-focuses which\n\t// triggers TldrawUiTooltip handleFocus when we dbl-click to edit an image,\n\t// which in turn makes the tooltip display prematurely.\n\t// This makes it wait until we've focused to show the tooltip.\n\tuseEffect(() => {\n\t\tconst timeout = tltime.setTimeout(\n\t\t\t'set title and label',\n\t\t\t() => {\n\t\t\t\tsetTitleAndLabel(title + ' \u2014 ' + msg(label as TLUiTranslationKey))\n\t\t\t},\n\t\t\t0\n\t\t)\n\t\treturn () => clearTimeout(timeout)\n\t}, [label, msg, title])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<TldrawUiTooltip content={titleAndLabel}>\n\t\t\t\t<_Slider.Root\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tmin={min ?? 0}\n\t\t\t\t\tmax={steps}\n\t\t\t\t\tstep={1}\n\t\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\t>\n\t\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t\t</_Slider.Track>\n\t\t\t\t\t{value !== null && (\n\t\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\t\taria-label={titleAndLabel}\n\t\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</_Slider.Root>\n\t\t\t</TldrawUiTooltip>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "AAsFI,SAcqB,KAdrB;AAtFJ,SAAS,cAAc;AACvB,SAAS,UAAU,eAAe;AAClC,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,sBAAsB;AAgBzC,MAAM,iBAAiB,MAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AAKrD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,YAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,mBAAe,gBAAgB;AAC/B,oBAAgB,cAAc;AAAA,EAC/B,GAAG,CAAC,aAAa,CAAC;AAMlB,YAAU,MAAM;AACf,UAAM,UAAU,OAAO;AAAA,MACtB;AAAA,MACA,MAAM;AACL,yBAAiB,QAAQ,aAAQ,IAAI,KAA2B,CAAC;AAAA,MAClE;AAAA,MACA;AAAA,IACD;AACA,WAAO,MAAM,aAAa,OAAO;AAAA,EAClC,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC;AAMtB,QAAM,iBAAiB,YAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,SAAI,WAAU,0BACd,8BAAC,mBAAgB,SAAS,eACzB;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAEhB;AAAA,4BAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,oBAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY;AAAA,YACZ,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD,GACD;AAEF,CAAC;",
   "names": ["value"]
 }

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

@@ -42,6 +42,7 @@ const TldrawUiToolbarButton = React.forwardRef(
         draggable: false,
         "data-isactive": isActive,
         ...props,
+        "aria-label": props.title,
         title: void 0,
         className: classnames("tlui-button", `tlui-button__${type}`, props.className),
         children
@@ -55,11 +56,13 @@ const TldrawUiToolbarToggleGroup = ({
   children,
   className,
   type,
+  asChild,
   ...props
 }) => {
   return /* @__PURE__ */ jsx(
     _Toolbar.ToggleGroup,
     {
+      asChild,
       type,
       ...props,
       role: "radiogroup",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiToolbar.tsx"],
-  "sourcesContent": ["import classnames from 'classnames'\nimport { Toolbar as _Toolbar } from 'radix-ui'\nimport React from 'react'\nimport { TldrawUiColumn, TldrawUiGrid, TldrawUiRow } from './layout'\nimport { TldrawUiTooltip } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tlabel: string\n\torientation?: 'horizontal' | 'vertical' | 'grid'\n\ttooltipSide?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nconst LayoutByOrientation = {\n\thorizontal: TldrawUiRow,\n\tvertical: TldrawUiColumn,\n\tgrid: TldrawUiGrid,\n}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tlabel,\n\t\t\torientation = 'horizontal',\n\t\t\ttooltipSide,\n\t\t\t...props\n\t\t}: TLUiToolbarProps,\n\t\tref\n\t) => {\n\t\tconst Layout = LayoutByOrientation[orientation]\n\t\treturn (\n\t\t\t<Layout asChild tooltipSide={tooltipSide}>\n\t\t\t\t<_Toolbar.Root\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t\tclassName={classnames('tlui-toolbar', className)}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\torientation={orientation === 'grid' ? 'horizontal' : orientation}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</_Toolbar.Root>\n\t\t\t</Layout>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdisabled?: boolean\n\tisActive?: boolean\n\ttype: 'icon' | 'tool' | 'menu'\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, tooltip, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\tconst button = (\n\t\t\t<_Toolbar.Button\n\t\t\t\tref={ref}\n\t\t\t\tasChild={asChild}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-isactive={isActive}\n\t\t\t\t{...props}\n\t\t\t\t// The tooltip takes care of this.\n\t\t\t\ttitle={undefined}\n\t\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Button>\n\t\t)\n\n\t\tconst tooltipContent = tooltip || props.title\n\n\t\treturn <TldrawUiTooltip content={tooltipContent}>{button}</TldrawUiTooltip>\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tvalue: any\n\t// TODO: fix up this type later\n\tdefaultValue?: any\n\ttype: 'single' | 'multiple'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t\t// TODO: this fixes a bug in Radix until they fix it.\n\t\t\t// https://github.com/radix-ui/primitives/issues/3188\n\t\t\t// https://github.com/radix-ui/primitives/pull/3189\n\t\t\trole=\"radiogroup\"\n\t\t\tclassName={classnames('tlui-toolbar-toggle-group', className)}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleGroup>\n\t)\n}\n\n/** @public */\nexport interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\ttype: 'icon' | 'tool'\n\tvalue: string\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\ttooltip,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\tconst toggleItem = (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\n\t\t\t// The tooltip takes care of this.\n\t\t\ttitle={undefined}\n\t\t\tclassName={classnames(\n\t\t\t\t'tlui-button',\n\t\t\t\t`tlui-button__${type}`,\n\t\t\t\t'tlui-toolbar-toggle-group-item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tvalue={value}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleItem>\n\t)\n\n\tconst tooltipContent = tooltip || props.title\n\n\treturn <TldrawUiTooltip content={tooltipContent}>{toggleItem}</TldrawUiTooltip>\n}\n"],
-  "mappings": "AAsCI;AAtCJ,OAAO,gBAAgB;AACvB,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAClB,SAAS,gBAAgB,cAAc,mBAAmB;AAC1D,SAAS,uBAAuB;AAYhC,MAAM,sBAAsB;AAAA,EAC3B,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,MAAM;AACP;AAGO,MAAM,kBAAkB,MAAM;AAAA,EACpC,CACC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACJ,GACA,QACI;AACJ,UAAM,SAAS,oBAAoB,WAAW;AAC9C,WACC,oBAAC,UAAO,SAAO,MAAC,aACf;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,WAAW,gBAAgB,SAAS;AAAA,QAC/C,cAAY;AAAA,QACZ,aAAa,gBAAgB,SAAS,eAAe;AAAA,QAEpD;AAAA;AAAA,IACF,GACD;AAAA,EAEF;AACD;AAcO,MAAM,wBAAwB,MAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,SAAS,GAAG,MAAM,GAA2B,QAAQ;AAC1F,UAAM,SACL;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QAEJ,OAAO;AAAA,QACP,WAAW,WAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAGD,UAAM,iBAAiB,WAAW,MAAM;AAExC,WAAO,oBAAC,mBAAgB,SAAS,gBAAiB,kBAAO;AAAA,EAC1D;AACD;AAcO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAIJ,MAAK;AAAA,MACL,WAAW,WAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAYO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,QAAM,aACL;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MAEJ,OAAO;AAAA,MACP,WAAW;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAGD,QAAM,iBAAiB,WAAW,MAAM;AAExC,SAAO,oBAAC,mBAAgB,SAAS,gBAAiB,sBAAW;AAC9D;",
+  "sourcesContent": ["import classnames from 'classnames'\nimport { Toolbar as _Toolbar } from 'radix-ui'\nimport React from 'react'\nimport { TldrawUiColumn, TldrawUiGrid, TldrawUiRow } from './layout'\nimport { TldrawUiTooltip } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tlabel: string\n\torientation?: 'horizontal' | 'vertical' | 'grid'\n\ttooltipSide?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nconst LayoutByOrientation = {\n\thorizontal: TldrawUiRow,\n\tvertical: TldrawUiColumn,\n\tgrid: TldrawUiGrid,\n}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tlabel,\n\t\t\torientation = 'horizontal',\n\t\t\ttooltipSide,\n\t\t\t...props\n\t\t}: TLUiToolbarProps,\n\t\tref\n\t) => {\n\t\tconst Layout = LayoutByOrientation[orientation]\n\t\treturn (\n\t\t\t<Layout asChild tooltipSide={tooltipSide}>\n\t\t\t\t<_Toolbar.Root\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t\tclassName={classnames('tlui-toolbar', className)}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\torientation={orientation === 'grid' ? 'horizontal' : orientation}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</_Toolbar.Root>\n\t\t\t</Layout>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdisabled?: boolean\n\tisActive?: boolean\n\ttype: 'icon' | 'tool' | 'menu'\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, tooltip, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\tconst button = (\n\t\t\t<_Toolbar.Button\n\t\t\t\tref={ref}\n\t\t\t\tasChild={asChild}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-isactive={isActive}\n\t\t\t\t{...props}\n\t\t\t\taria-label={props.title}\n\t\t\t\t// The tooltip takes care of this.\n\t\t\t\ttitle={undefined}\n\t\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Button>\n\t\t)\n\n\t\tconst tooltipContent = tooltip || props.title\n\n\t\treturn <TldrawUiTooltip content={tooltipContent}>{button}</TldrawUiTooltip>\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tvalue: any\n\t// TODO: fix up this type later\n\tdefaultValue?: any\n\ttype: 'single' | 'multiple'\n\tasChild?: boolean\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tasChild,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\tasChild={asChild}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t\t// TODO: this fixes a bug in Radix until they fix it.\n\t\t\t// https://github.com/radix-ui/primitives/issues/3188\n\t\t\t// https://github.com/radix-ui/primitives/pull/3189\n\t\t\trole=\"radiogroup\"\n\t\t\tclassName={classnames('tlui-toolbar-toggle-group', className)}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleGroup>\n\t)\n}\n\n/** @public */\nexport interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\ttype: 'icon' | 'tool'\n\tvalue: string\n\ttooltip?: React.ReactNode\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\ttooltip,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\tconst toggleItem = (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\n\t\t\t// The tooltip takes care of this.\n\t\t\ttitle={undefined}\n\t\t\tclassName={classnames(\n\t\t\t\t'tlui-button',\n\t\t\t\t`tlui-button__${type}`,\n\t\t\t\t'tlui-toolbar-toggle-group-item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tvalue={value}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleItem>\n\t)\n\n\tconst tooltipContent = tooltip || props.title\n\n\treturn <TldrawUiTooltip content={tooltipContent}>{toggleItem}</TldrawUiTooltip>\n}\n"],
+  "mappings": "AAsCI;AAtCJ,OAAO,gBAAgB;AACvB,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAClB,SAAS,gBAAgB,cAAc,mBAAmB;AAC1D,SAAS,uBAAuB;AAYhC,MAAM,sBAAsB;AAAA,EAC3B,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,MAAM;AACP;AAGO,MAAM,kBAAkB,MAAM;AAAA,EACpC,CACC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACJ,GACA,QACI;AACJ,UAAM,SAAS,oBAAoB,WAAW;AAC9C,WACC,oBAAC,UAAO,SAAO,MAAC,aACf;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,WAAW,gBAAgB,SAAS;AAAA,QAC/C,cAAY;AAAA,QACZ,aAAa,gBAAgB,SAAS,eAAe;AAAA,QAEpD;AAAA;AAAA,IACF,GACD;AAAA,EAEF;AACD;AAcO,MAAM,wBAAwB,MAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,SAAS,GAAG,MAAM,GAA2B,QAAQ;AAC1F,UAAM,SACL;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QACJ,cAAY,MAAM;AAAA,QAElB,OAAO;AAAA,QACP,WAAW,WAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAGD,UAAM,iBAAiB,WAAW,MAAM;AAExC,WAAO,oBAAC,mBAAgB,SAAS,gBAAiB,kBAAO;AAAA,EAC1D;AACD;AAeO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAIJ,MAAK;AAAA,MACL,WAAW,WAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAYO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,QAAM,aACL;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MAEJ,OAAO;AAAA,MACP,WAAW;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAGD,QAAM,iBAAiB,WAAW,MAAM;AAExC,SAAO,oBAAC,mBAAgB,SAAS,gBAAiB,sBAAW;AAC9D;",
   "names": []
 }

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

@@ -6,6 +6,7 @@ import React, {
   forwardRef,
   useContext,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState
 } from "react";
@@ -36,6 +37,14 @@ class TooltipManager {
       delayDuration
     });
   }
+  updateCurrentTooltip(tooltipId, update) {
+    this.currentTooltip.update((tooltip) => {
+      if (tooltip?.id === tooltipId) {
+        return update(tooltip);
+      }
+      return tooltip;
+    });
+  }
   hideTooltip(editor, tooltipId, instant = false) {
     const hide = () => {
       if (this.currentTooltip.get()?.id === tooltipId) {
@@ -84,11 +93,30 @@ function TooltipSingleton() {
   const [isOpen, setIsOpen] = useState(false);
   const triggerRef = useRef(null);
   const isFirstShowRef = useRef(true);
+  const editor = useMaybeEditor();
   const currentTooltip = useValue(
     "current tooltip",
     () => tooltipManager.getCurrentTooltipData(),
     []
   );
+  const cameraState = useValue("camera state", () => editor?.getCameraState(), [editor]);
+  useEffect(() => {
+    if (cameraState === "moving" && isOpen && currentTooltip) {
+      tooltipManager.hideTooltip(editor, currentTooltip.id, true);
+    }
+  }, [cameraState, isOpen, currentTooltip, editor]);
+  useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.key === "Escape" && currentTooltip && isOpen) {
+        tooltipManager.hideTooltip(editor, currentTooltip.id);
+        event.stopPropagation();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, { capture: true });
+    };
+  }, [editor, currentTooltip, isOpen]);
   useEffect(() => {
     let timer = null;
     if (currentTooltip && triggerRef.current) {
@@ -154,6 +182,7 @@ const TldrawUiTooltip = forwardRef(
     const editor = useMaybeEditor();
     const tooltipId = useRef(uniqueId());
     const hasProvider = useContext(TooltipSingletonContext);
+    const showUiLabels = useValue("showUiLabels", () => editor?.user.getShowUiLabels(), [editor]);
     const orientationCtx = useTldrawUiOrientation();
     const sideToUse = side ?? orientationCtx.tooltipSide;
     useEffect(() => {
@@ -164,12 +193,28 @@ const TldrawUiTooltip = forwardRef(
         }
       };
     }, [editor, hasProvider]);
+    useLayoutEffect(() => {
+      if (hasProvider && tooltipManager.getCurrentTooltipData()?.id === tooltipId.current) {
+        tooltipManager.updateCurrentTooltip(tooltipId.current, (tooltip) => ({
+          ...tooltip,
+          content,
+          side: sideToUse,
+          sideOffset,
+          showOnMobile
+        }));
+      }
+    }, [content, sideToUse, sideOffset, showOnMobile, hasProvider]);
     if (disabled || !content) {
       return /* @__PURE__ */ jsx(Fragment, { children });
     }
-    const delayDurationToUse = delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS);
-    if (!hasProvider) {
-      return /* @__PURE__ */ jsxs(_Tooltip.Root, { delayDuration: delayDurationToUse, disableHoverableContent: true, children: [
+    let delayDurationToUse;
+    if (showUiLabels) {
+      delayDurationToUse = 0;
+    } else {
+      delayDurationToUse = delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS);
+    }
+    if (!hasProvider || showUiLabels) {
+      return /* @__PURE__ */ jsxs(_Tooltip.Root, { delayDuration: delayDurationToUse, disableHoverableContent: !showUiLabels, children: [
         /* @__PURE__ */ jsx(_Tooltip.Trigger, { asChild: true, ref, children }),
         /* @__PURE__ */ jsxs(
           _Tooltip.Content,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiTooltip.tsx"],
-  "sourcesContent": ["import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, {\n\tcreateContext,\n\tforwardRef,\n\tReactNode,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { useTldrawUiOrientation } from './layout'\n\nconst DEFAULT_TOOLTIP_DELAY_MS = 700\n\n/** @public */\nexport interface TldrawUiTooltipProps {\n\tchildren: React.ReactNode\n\tcontent?: string | React.ReactNode\n\tside?: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset?: number\n\tdisabled?: boolean\n\tshowOnMobile?: boolean\n\tdelayDuration?: number\n}\n\n// Singleton tooltip manager\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate currentTooltip = atom<{\n\t\tid: string\n\t\tcontent: ReactNode\n\t\tside: 'top' | 'right' | 'bottom' | 'left'\n\t\tsideOffset: number\n\t\tshowOnMobile: boolean\n\t\ttargetElement: HTMLElement\n\t\tdelayDuration: number\n\t} | null>('current tooltip', null)\n\tprivate destroyTimeoutId: number | null = null\n\n\tstatic getInstance(): TooltipManager {\n\t\tif (!TooltipManager.instance) {\n\t\t\tTooltipManager.instance = new TooltipManager()\n\t\t}\n\t\treturn TooltipManager.instance\n\t}\n\n\tshowTooltip(\n\t\ttooltipId: string,\n\t\tcontent: string | React.ReactNode,\n\t\ttargetElement: HTMLElement,\n\t\tside: 'top' | 'right' | 'bottom' | 'left',\n\t\tsideOffset: number,\n\t\tshowOnMobile: boolean,\n\t\tdelayDuration: number\n\t) {\n\t\t// Clear any existing destroy timeout\n\t\tif (this.destroyTimeoutId) {\n\t\t\tclearTimeout(this.destroyTimeoutId)\n\t\t\tthis.destroyTimeoutId = null\n\t\t}\n\n\t\t// Update current tooltip\n\t\tthis.currentTooltip.set({\n\t\t\tid: tooltipId,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset,\n\t\t\tshowOnMobile,\n\t\t\ttargetElement,\n\t\t\tdelayDuration,\n\t\t})\n\t}\n\n\thideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {\n\t\tconst hide = () => {\n\t\t\t// Only hide if this is the current tooltip\n\t\t\tif (this.currentTooltip.get()?.id === tooltipId) {\n\t\t\t\tthis.currentTooltip.set(null)\n\t\t\t\tthis.destroyTimeoutId = null\n\t\t\t}\n\t\t}\n\n\t\tif (editor && !instant) {\n\t\t\t// Start destroy timeout (1 second)\n\t\t\tthis.destroyTimeoutId = editor.timers.setTimeout(hide, 300)\n\t\t} else {\n\t\t\thide()\n\t\t}\n\t}\n\n\thideAllTooltips() {\n\t\tthis.currentTooltip.set(null)\n\t\tthis.destroyTimeoutId = null\n\t}\n\n\tgetCurrentTooltipData() {\n\t\tconst currentTooltip = this.currentTooltip.get()\n\t\tif (!currentTooltip) return null\n\t\tif (!this.supportsHover() && !currentTooltip.showOnMobile) return null\n\t\treturn currentTooltip\n\t}\n\n\tprivate supportsHoverAtom: Atom<boolean> | null = null\n\tsupportsHover() {\n\t\tif (!this.supportsHoverAtom) {\n\t\t\tconst mediaQuery = window.matchMedia('(hover: hover)')\n\t\t\tconst supportsHover = atom('has hover', mediaQuery.matches)\n\t\t\tthis.supportsHoverAtom = supportsHover\n\t\t\tmediaQuery.addEventListener('change', (e) => {\n\t\t\t\tsupportsHover.set(e.matches)\n\t\t\t})\n\t\t}\n\t\treturn this.supportsHoverAtom.get()\n\t}\n}\n\nexport const tooltipManager = TooltipManager.getInstance()\n\n// Context for the tooltip singleton\nconst TooltipSingletonContext = createContext<boolean>(false)\n\n/** @public */\nexport interface TldrawUiTooltipProviderProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {\n\treturn (\n\t\t<_Tooltip.Provider skipDelayDuration={700}>\n\t\t\t<TooltipSingletonContext.Provider value={true}>\n\t\t\t\t{children}\n\t\t\t\t<TooltipSingleton />\n\t\t\t</TooltipSingletonContext.Provider>\n\t\t</_Tooltip.Provider>\n\t)\n}\n\n// The singleton tooltip component that renders once\nfunction TooltipSingleton() {\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst isFirstShowRef = useRef(true)\n\n\tconst currentTooltip = useValue(\n\t\t'current tooltip',\n\t\t() => tooltipManager.getCurrentTooltipData(),\n\t\t[]\n\t)\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout> | null = null\n\t\tif (currentTooltip && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = currentTooltip.targetElement.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\n\n\t\t\ttrigger.style.position = 'fixed'\n\t\t\ttrigger.style.left = `${activeRect.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top}px`\n\t\t\ttrigger.style.width = `${activeRect.width}px`\n\t\t\ttrigger.style.height = `${activeRect.height}px`\n\t\t\ttrigger.style.pointerEvents = 'none'\n\t\t\ttrigger.style.zIndex = '9999'\n\n\t\t\t// Handle delay for first show\n\t\t\tif (isFirstShowRef.current) {\n\t\t\t\t// eslint-disable-next-line no-restricted-globals\n\t\t\t\ttimer = setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, currentTooltip.delayDuration)\n\t\t\t} else {\n\t\t\t\t// Subsequent tooltips show immediately\n\t\t\t\tsetIsOpen(true)\n\t\t\t}\n\t\t} else {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (timer !== null) {\n\t\t\t\tclearTimeout(timer)\n\t\t\t}\n\t\t}\n\t}, [currentTooltip])\n\n\tif (!currentTooltip) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<_Tooltip.Root open={isOpen} delayDuration={0}>\n\t\t\t<_Tooltip.Trigger asChild>\n\t\t\t\t<div ref={triggerRef} />\n\t\t\t</_Tooltip.Trigger>\n\t\t\t<_Tooltip.Content\n\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\tside={currentTooltip.side}\n\t\t\t\tsideOffset={currentTooltip.sideOffset}\n\t\t\t\tavoidCollisions\n\t\t\t\tcollisionPadding={8}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{currentTooltip.content}\n\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t</_Tooltip.Content>\n\t\t</_Tooltip.Root>\n\t)\n}\n\n/** @public @react */\nexport const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset = 5,\n\t\t\tdisabled = false,\n\t\t\tshowOnMobile = false,\n\t\t\tdelayDuration,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst editor = useMaybeEditor()\n\t\tconst tooltipId = useRef<string>(uniqueId())\n\t\tconst hasProvider = useContext(TooltipSingletonContext)\n\n\t\tconst orientationCtx = useTldrawUiOrientation()\n\t\tconst sideToUse = side ?? orientationCtx.tooltipSide\n\n\t\tuseEffect(() => {\n\t\t\tconst currentTooltipId = tooltipId.current\n\t\t\treturn () => {\n\t\t\t\tif (hasProvider) {\n\t\t\t\t\ttooltipManager.hideTooltip(editor, currentTooltipId, true)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [editor, hasProvider])\n\n\t\t// Don't show tooltip if disabled, no content, or UI labels are disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tconst delayDurationToUse =\n\t\t\tdelayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)\n\n\t\t// Fallback to old behavior if no provider\n\t\tif (!hasProvider) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>\n\t\t\t\t\t<_Tooltip.Trigger asChild ref={ref}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</_Tooltip.Trigger>\n\t\t\t\t\t<_Tooltip.Content\n\t\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\t\tside={sideToUse}\n\t\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\t\tavoidCollisions\n\t\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t\t</_Tooltip.Content>\n\t\t\t\t</_Tooltip.Root>\n\t\t\t)\n\t\t}\n\n\t\tconst child = React.Children.only(children)\n\t\tassert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset,\n\t\t\t\tshowOnMobile,\n\t\t\t\tdelayDurationToUse\n\t\t\t)\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current)\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onFocus?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset,\n\t\t\t\tshowOnMobile,\n\t\t\t\tdelayDurationToUse\n\t\t\t)\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onBlur?.(event)\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current)\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\t\tonMouseEnter: handleMouseEnter,\n\t\t\tonMouseLeave: handleMouseLeave,\n\t\t\tonFocus: handleFocus,\n\t\t\tonBlur: handleBlur,\n\t\t})\n\n\t\treturn childrenWithHandlers\n\t}\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, {\n\tcreateContext,\n\tforwardRef,\n\tReactNode,\n\tuseContext,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { useTldrawUiOrientation } from './layout'\n\nconst DEFAULT_TOOLTIP_DELAY_MS = 700\n\n/** @public */\nexport interface TldrawUiTooltipProps {\n\tchildren: React.ReactNode\n\tcontent?: string | React.ReactNode\n\tside?: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset?: number\n\tdisabled?: boolean\n\tshowOnMobile?: boolean\n\tdelayDuration?: number\n}\n\ninterface CurrentTooltip {\n\tid: string\n\tcontent: ReactNode\n\tside: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset: number\n\tshowOnMobile: boolean\n\ttargetElement: HTMLElement\n\tdelayDuration: number\n}\n\n// Singleton tooltip manager\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate currentTooltip = atom<CurrentTooltip | null>('current tooltip', null)\n\tprivate destroyTimeoutId: number | null = null\n\n\tstatic getInstance(): TooltipManager {\n\t\tif (!TooltipManager.instance) {\n\t\t\tTooltipManager.instance = new TooltipManager()\n\t\t}\n\t\treturn TooltipManager.instance\n\t}\n\n\tshowTooltip(\n\t\ttooltipId: string,\n\t\tcontent: string | React.ReactNode,\n\t\ttargetElement: HTMLElement,\n\t\tside: 'top' | 'right' | 'bottom' | 'left',\n\t\tsideOffset: number,\n\t\tshowOnMobile: boolean,\n\t\tdelayDuration: number\n\t) {\n\t\t// Clear any existing destroy timeout\n\t\tif (this.destroyTimeoutId) {\n\t\t\tclearTimeout(this.destroyTimeoutId)\n\t\t\tthis.destroyTimeoutId = null\n\t\t}\n\n\t\t// Update current tooltip\n\t\tthis.currentTooltip.set({\n\t\t\tid: tooltipId,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset,\n\t\t\tshowOnMobile,\n\t\t\ttargetElement,\n\t\t\tdelayDuration,\n\t\t})\n\t}\n\n\tupdateCurrentTooltip(tooltipId: string, update: (tooltip: CurrentTooltip) => CurrentTooltip) {\n\t\tthis.currentTooltip.update((tooltip) => {\n\t\t\tif (tooltip?.id === tooltipId) {\n\t\t\t\treturn update(tooltip)\n\t\t\t}\n\t\t\treturn tooltip\n\t\t})\n\t}\n\n\thideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {\n\t\tconst hide = () => {\n\t\t\t// Only hide if this is the current tooltip\n\t\t\tif (this.currentTooltip.get()?.id === tooltipId) {\n\t\t\t\tthis.currentTooltip.set(null)\n\t\t\t\tthis.destroyTimeoutId = null\n\t\t\t}\n\t\t}\n\n\t\tif (editor && !instant) {\n\t\t\t// Start destroy timeout (1 second)\n\t\t\tthis.destroyTimeoutId = editor.timers.setTimeout(hide, 300)\n\t\t} else {\n\t\t\thide()\n\t\t}\n\t}\n\n\thideAllTooltips() {\n\t\tthis.currentTooltip.set(null)\n\t\tthis.destroyTimeoutId = null\n\t}\n\n\tgetCurrentTooltipData() {\n\t\tconst currentTooltip = this.currentTooltip.get()\n\t\tif (!currentTooltip) return null\n\t\tif (!this.supportsHover() && !currentTooltip.showOnMobile) return null\n\t\treturn currentTooltip\n\t}\n\n\tprivate supportsHoverAtom: Atom<boolean> | null = null\n\tsupportsHover() {\n\t\tif (!this.supportsHoverAtom) {\n\t\t\tconst mediaQuery = window.matchMedia('(hover: hover)')\n\t\t\tconst supportsHover = atom('has hover', mediaQuery.matches)\n\t\t\tthis.supportsHoverAtom = supportsHover\n\t\t\tmediaQuery.addEventListener('change', (e) => {\n\t\t\t\tsupportsHover.set(e.matches)\n\t\t\t})\n\t\t}\n\t\treturn this.supportsHoverAtom.get()\n\t}\n}\n\nexport const tooltipManager = TooltipManager.getInstance()\n\n// Context for the tooltip singleton\nconst TooltipSingletonContext = createContext<boolean>(false)\n\n/** @public */\nexport interface TldrawUiTooltipProviderProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {\n\treturn (\n\t\t<_Tooltip.Provider skipDelayDuration={700}>\n\t\t\t<TooltipSingletonContext.Provider value={true}>\n\t\t\t\t{children}\n\t\t\t\t<TooltipSingleton />\n\t\t\t</TooltipSingletonContext.Provider>\n\t\t</_Tooltip.Provider>\n\t)\n}\n\n// The singleton tooltip component that renders once\nfunction TooltipSingleton() {\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst isFirstShowRef = useRef(true)\n\tconst editor = useMaybeEditor()\n\n\tconst currentTooltip = useValue(\n\t\t'current tooltip',\n\t\t() => tooltipManager.getCurrentTooltipData(),\n\t\t[]\n\t)\n\n\tconst cameraState = useValue('camera state', () => editor?.getCameraState(), [editor])\n\n\t// Hide tooltip when camera is moving (panning/zooming)\n\tuseEffect(() => {\n\t\tif (cameraState === 'moving' && isOpen && currentTooltip) {\n\t\t\ttooltipManager.hideTooltip(editor, currentTooltip.id, true)\n\t\t}\n\t}, [cameraState, isOpen, currentTooltip, editor])\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape' && currentTooltip && isOpen) {\n\t\t\t\ttooltipManager.hideTooltip(editor, currentTooltip.id)\n\t\t\t\tevent.stopPropagation()\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}, [editor, currentTooltip, isOpen])\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout> | null = null\n\t\tif (currentTooltip && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = currentTooltip.targetElement.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\n\n\t\t\ttrigger.style.position = 'fixed'\n\t\t\ttrigger.style.left = `${activeRect.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top}px`\n\t\t\ttrigger.style.width = `${activeRect.width}px`\n\t\t\ttrigger.style.height = `${activeRect.height}px`\n\t\t\ttrigger.style.pointerEvents = 'none'\n\t\t\ttrigger.style.zIndex = '9999'\n\n\t\t\t// Handle delay for first show\n\t\t\tif (isFirstShowRef.current) {\n\t\t\t\t// eslint-disable-next-line no-restricted-globals\n\t\t\t\ttimer = setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, currentTooltip.delayDuration)\n\t\t\t} else {\n\t\t\t\t// Subsequent tooltips show immediately\n\t\t\t\tsetIsOpen(true)\n\t\t\t}\n\t\t} else {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (timer !== null) {\n\t\t\t\tclearTimeout(timer)\n\t\t\t}\n\t\t}\n\t}, [currentTooltip])\n\n\tif (!currentTooltip) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<_Tooltip.Root open={isOpen} delayDuration={0}>\n\t\t\t<_Tooltip.Trigger asChild>\n\t\t\t\t<div ref={triggerRef} />\n\t\t\t</_Tooltip.Trigger>\n\t\t\t<_Tooltip.Content\n\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\tside={currentTooltip.side}\n\t\t\t\tsideOffset={currentTooltip.sideOffset}\n\t\t\t\tavoidCollisions\n\t\t\t\tcollisionPadding={8}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{currentTooltip.content}\n\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t</_Tooltip.Content>\n\t\t</_Tooltip.Root>\n\t)\n}\n\n/** @public @react */\nexport const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset = 5,\n\t\t\tdisabled = false,\n\t\t\tshowOnMobile = false,\n\t\t\tdelayDuration,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst editor = useMaybeEditor()\n\t\tconst tooltipId = useRef<string>(uniqueId())\n\t\tconst hasProvider = useContext(TooltipSingletonContext)\n\t\tconst showUiLabels = useValue('showUiLabels', () => editor?.user.getShowUiLabels(), [editor])\n\n\t\tconst orientationCtx = useTldrawUiOrientation()\n\t\tconst sideToUse = side ?? orientationCtx.tooltipSide\n\n\t\tuseEffect(() => {\n\t\t\tconst currentTooltipId = tooltipId.current\n\t\t\treturn () => {\n\t\t\t\tif (hasProvider) {\n\t\t\t\t\ttooltipManager.hideTooltip(editor, currentTooltipId, true)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [editor, hasProvider])\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (hasProvider && tooltipManager.getCurrentTooltipData()?.id === tooltipId.current) {\n\t\t\t\ttooltipManager.updateCurrentTooltip(tooltipId.current, (tooltip) => ({\n\t\t\t\t\t...tooltip,\n\t\t\t\t\tcontent,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t}))\n\t\t\t}\n\t\t}, [content, sideToUse, sideOffset, showOnMobile, hasProvider])\n\n\t\t// Don't show tooltip if disabled, no content, or UI labels are disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tlet delayDurationToUse\n\t\tif (showUiLabels) {\n\t\t\tdelayDurationToUse = 0\n\t\t} else {\n\t\t\tdelayDurationToUse =\n\t\t\t\tdelayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)\n\t\t}\n\n\t\t// Fallback to old behavior if no provider\n\t\tif (!hasProvider || showUiLabels) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent={!showUiLabels}>\n\t\t\t\t\t<_Tooltip.Trigger asChild ref={ref}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</_Tooltip.Trigger>\n\t\t\t\t\t<_Tooltip.Content\n\t\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\t\tside={sideToUse}\n\t\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\t\tavoidCollisions\n\t\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t\t</_Tooltip.Content>\n\t\t\t\t</_Tooltip.Root>\n\t\t\t)\n\t\t}\n\n\t\tconst child = React.Children.only(children)\n\t\tassert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset,\n\t\t\t\tshowOnMobile,\n\t\t\t\tdelayDurationToUse\n\t\t\t)\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current)\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onFocus?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset,\n\t\t\t\tshowOnMobile,\n\t\t\t\tdelayDurationToUse\n\t\t\t)\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onBlur?.(event)\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current)\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\t\tonMouseEnter: handleMouseEnter,\n\t\t\tonMouseLeave: handleMouseLeave,\n\t\t\tonFocus: handleFocus,\n\t\t\tonBlur: handleBlur,\n\t\t})\n\n\t\treturn childrenWithHandlers\n\t}\n)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs

@@ -11,6 +11,7 @@ function TldrawUiMenuCheckboxItem({
   id,
   kbd,
   label,
+  lang,
   readonlyOk,
   onSelect,
   toggle = false,
@@ -29,6 +30,7 @@ function TldrawUiMenuCheckboxItem({
         _DropdownMenu.CheckboxItem,
         {
           dir: "ltr",
+          lang,
           className: "tlui-button tlui-button__menu tlui-button__checkbox",
           title: labelStr,
           onSelect: (e) => {
@@ -58,6 +60,7 @@ function TldrawUiMenuCheckboxItem({
         {
           className: "tlui-button tlui-button__menu tlui-button__checkbox",
           dir: "ltr",
+          lang,
           title: labelStr,
           onSelect: (e) => {
             onSelect(sourceId);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx"],
-  "sourcesContent": ["import { preventDefault } from '@tldraw/editor'\nimport { ContextMenu as _ContextMenu, DropdownMenu as _DropdownMenu } from 'radix-ui'\nimport { unwrapLabel } from '../../../context/actions'\nimport { TLUiEventSource } from '../../../context/events'\nimport { useReadonly } from '../../../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../hooks/useTranslation/useTranslation'\nimport { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'\nimport { TldrawUiKbd } from '../TldrawUiKbd'\nimport { useTldrawUiMenuContext } from './TldrawUiMenuContext'\n\n/** @public */\nexport interface TLUiMenuCheckboxItemProps<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n> {\n\ticon?: IconType | TLUiIconJsx\n\tid: string\n\tkbd?: string\n\ttitle?: string\n\tlabel?: TranslationKey | { [key: string]: TranslationKey }\n\treadonlyOk?: boolean\n\tonSelect(source: TLUiEventSource): Promise<void> | void\n\ttoggle?: boolean\n\tchecked?: boolean\n\tdisabled?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiMenuCheckboxItem<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n>({\n\tid,\n\tkbd,\n\tlabel,\n\treadonlyOk,\n\tonSelect,\n\ttoggle = false,\n\tdisabled = false,\n\tchecked = false,\n}: TLUiMenuCheckboxItemProps<TranslationKey, IconType>) {\n\tconst { type: menuType, sourceId } = useTldrawUiMenuContext()\n\tconst isReadonlyMode = useReadonly()\n\tconst msg = useTranslation()\n\n\t// If the editor is in readonly mode and the item is not marked as readonlyok, return null\n\tif (isReadonlyMode && !readonlyOk) return null\n\n\tconst labelToUse = unwrapLabel(label, menuType)\n\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\n\tswitch (menuType) {\n\t\tcase 'menu': {\n\t\t\treturn (\n\t\t\t\t<_DropdownMenu.CheckboxItem\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\t\t\ttitle={labelStr}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tonSelect?.(sourceId)\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tchecked={checked}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tsmall\n\t\t\t\t\t\tlabel={msg(checked ? 'ui.checked' : 'ui.unchecked')}\n\t\t\t\t\t\ticon={toggle ? (checked ? 'toggle-on' : 'toggle-off') : checked ? 'check' : 'none'}\n\t\t\t\t\t/>\n\t\t\t\t\t{labelStr && (\n\t\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t</_DropdownMenu.CheckboxItem>\n\t\t\t)\n\t\t}\n\t\tcase 'context-menu': {\n\t\t\treturn (\n\t\t\t\t<_ContextMenu.CheckboxItem\n\t\t\t\t\tkey={id}\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\ttitle={labelStr}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tchecked={checked}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tsmall\n\t\t\t\t\t\tlabel={msg(checked ? 'ui.checked' : 'ui.unchecked')}\n\t\t\t\t\t\ticon={toggle ? (checked ? 'toggle-on' : 'toggle-off') : checked ? 'check' : 'none'}\n\t\t\t\t\t/>\n\t\t\t\t\t{labelStr && (\n\t\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t</_ContextMenu.CheckboxItem>\n\t\t\t)\n\t\t}\n\t\tdefault: {\n\t\t\t// no checkbox items in actions menu\n\t\t\treturn null\n\t\t}\n\t}\n}\n"],
-  "mappings": "AAuDI,SAWC,KAXD;AAvDJ,SAAS,sBAAsB;AAC/B,SAAS,eAAe,cAAc,gBAAgB,qBAAqB;AAC3E,SAAS,mBAAmB;AAE5B,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAC/B,SAAS,oBAAiC;AAC1C,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAoBhC,SAAS,yBAGd;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AACX,GAAwD;AACvD,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI,uBAAuB;AAC5D,QAAM,iBAAiB,YAAY;AACnC,QAAM,MAAM,eAAe;AAG3B,MAAI,kBAAkB,CAAC,WAAY,QAAO;AAE1C,QAAM,aAAa,YAAY,OAAO,QAAQ;AAC9C,QAAM,WAAW,aAAa,IAAI,UAAgC,IAAI;AAEtE,UAAQ,UAAU;AAAA,IACjB,KAAK,QAAQ;AACZ,aACC;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACA,KAAI;AAAA,UACJ,WAAU;AAAA,UACV,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AAChB,uBAAW,QAAQ;AACnB,2BAAe,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAK;AAAA,gBACL,OAAO,IAAI,UAAU,eAAe,cAAc;AAAA,gBAClD,MAAM,SAAU,UAAU,cAAc,eAAgB,UAAU,UAAU;AAAA;AAAA,YAC7E;AAAA,YACC,YACA,oBAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C,oBACF;AAAA,YAEA,OAAO,oBAAC,eAAa,eAAI;AAAA;AAAA;AAAA,MAC3B;AAAA,IAEF;AAAA,IACA,KAAK,gBAAgB;AACpB,aACC;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UAEA,WAAU;AAAA,UACV,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AAChB,qBAAS,QAAQ;AACjB,2BAAe,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAK;AAAA,gBACL,OAAO,IAAI,UAAU,eAAe,cAAc;AAAA,gBAClD,MAAM,SAAU,UAAU,cAAc,eAAgB,UAAU,UAAU;AAAA;AAAA,YAC7E;AAAA,YACC,YACA,oBAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C,oBACF;AAAA,YAEA,OAAO,oBAAC,eAAa,eAAI;AAAA;AAAA;AAAA,QArBrB;AAAA,MAsBN;AAAA,IAEF;AAAA,IACA,SAAS;AAER,aAAO;AAAA,IACR;AAAA,EACD;AACD;",
+  "sourcesContent": ["import { preventDefault } from '@tldraw/editor'\nimport { ContextMenu as _ContextMenu, DropdownMenu as _DropdownMenu } from 'radix-ui'\nimport { unwrapLabel } from '../../../context/actions'\nimport { TLUiEventSource } from '../../../context/events'\nimport { useReadonly } from '../../../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../hooks/useTranslation/useTranslation'\nimport { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'\nimport { TldrawUiKbd } from '../TldrawUiKbd'\nimport { useTldrawUiMenuContext } from './TldrawUiMenuContext'\n\n/** @public */\nexport interface TLUiMenuCheckboxItemProps<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n> {\n\ticon?: IconType | TLUiIconJsx\n\tid: string\n\tkbd?: string\n\ttitle?: string\n\tlabel?: TranslationKey | { [key: string]: TranslationKey }\n\tlang?: string\n\treadonlyOk?: boolean\n\tonSelect(source: TLUiEventSource): Promise<void> | void\n\ttoggle?: boolean\n\tchecked?: boolean\n\tdisabled?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiMenuCheckboxItem<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n>({\n\tid,\n\tkbd,\n\tlabel,\n\tlang,\n\treadonlyOk,\n\tonSelect,\n\ttoggle = false,\n\tdisabled = false,\n\tchecked = false,\n}: TLUiMenuCheckboxItemProps<TranslationKey, IconType>) {\n\tconst { type: menuType, sourceId } = useTldrawUiMenuContext()\n\tconst isReadonlyMode = useReadonly()\n\tconst msg = useTranslation()\n\n\t// If the editor is in readonly mode and the item is not marked as readonlyok, return null\n\tif (isReadonlyMode && !readonlyOk) return null\n\n\tconst labelToUse = unwrapLabel(label, menuType)\n\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\n\tswitch (menuType) {\n\t\tcase 'menu': {\n\t\t\treturn (\n\t\t\t\t<_DropdownMenu.CheckboxItem\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tlang={lang}\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\t\t\ttitle={labelStr}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tonSelect?.(sourceId)\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tchecked={checked}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tsmall\n\t\t\t\t\t\tlabel={msg(checked ? 'ui.checked' : 'ui.unchecked')}\n\t\t\t\t\t\ticon={toggle ? (checked ? 'toggle-on' : 'toggle-off') : checked ? 'check' : 'none'}\n\t\t\t\t\t/>\n\t\t\t\t\t{labelStr && (\n\t\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t</_DropdownMenu.CheckboxItem>\n\t\t\t)\n\t\t}\n\t\tcase 'context-menu': {\n\t\t\treturn (\n\t\t\t\t<_ContextMenu.CheckboxItem\n\t\t\t\t\tkey={id}\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu tlui-button__checkbox\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tlang={lang}\n\t\t\t\t\ttitle={labelStr}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t}}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tchecked={checked}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiIcon\n\t\t\t\t\t\tsmall\n\t\t\t\t\t\tlabel={msg(checked ? 'ui.checked' : 'ui.unchecked')}\n\t\t\t\t\t\ticon={toggle ? (checked ? 'toggle-on' : 'toggle-off') : checked ? 'check' : 'none'}\n\t\t\t\t\t/>\n\t\t\t\t\t{labelStr && (\n\t\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t</_ContextMenu.CheckboxItem>\n\t\t\t)\n\t\t}\n\t\tdefault: {\n\t\t\t// no checkbox items in actions menu\n\t\t\treturn null\n\t\t}\n\t}\n}\n"],
+  "mappings": "AAyDI,SAYC,KAZD;AAzDJ,SAAS,sBAAsB;AAC/B,SAAS,eAAe,cAAc,gBAAgB,qBAAqB;AAC3E,SAAS,mBAAmB;AAE5B,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAC/B,SAAS,oBAAiC;AAC1C,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAqBhC,SAAS,yBAGd;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AACX,GAAwD;AACvD,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI,uBAAuB;AAC5D,QAAM,iBAAiB,YAAY;AACnC,QAAM,MAAM,eAAe;AAG3B,MAAI,kBAAkB,CAAC,WAAY,QAAO;AAE1C,QAAM,aAAa,YAAY,OAAO,QAAQ;AAC9C,QAAM,WAAW,aAAa,IAAI,UAAgC,IAAI;AAEtE,UAAQ,UAAU;AAAA,IACjB,KAAK,QAAQ;AACZ,aACC;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACA,KAAI;AAAA,UACJ;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AAChB,uBAAW,QAAQ;AACnB,2BAAe,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAK;AAAA,gBACL,OAAO,IAAI,UAAU,eAAe,cAAc;AAAA,gBAClD,MAAM,SAAU,UAAU,cAAc,eAAgB,UAAU,UAAU;AAAA;AAAA,YAC7E;AAAA,YACC,YACA,oBAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C,oBACF;AAAA,YAEA,OAAO,oBAAC,eAAa,eAAI;AAAA;AAAA;AAAA,MAC3B;AAAA,IAEF;AAAA,IACA,KAAK,gBAAgB;AACpB,aACC;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UAEA,WAAU;AAAA,UACV,KAAI;AAAA,UACJ;AAAA,UACA,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AAChB,qBAAS,QAAQ;AACjB,2BAAe,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAK;AAAA,gBACL,OAAO,IAAI,UAAU,eAAe,cAAc;AAAA,gBAClD,MAAM,SAAU,UAAU,cAAc,eAAgB,UAAU,UAAU;AAAA;AAAA,YAC7E;AAAA,YACC,YACA,oBAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C,oBACF;AAAA,YAEA,OAAO,oBAAC,eAAa,eAAI;AAAA;AAAA;AAAA,QAtBrB;AAAA,MAuBN;AAAA,IAEF;AAAA,IACA,SAAS;AAER,aAAO;AAAA,IACR;AAAA,EACD;AACD;",
   "names": []
 }