npm - tldraw - Versions diffs - 4.4.0-next.f2df7e20ec7b → 4.4.1 - Mend

tldraw 4.4.0-next.f2df7e20ec7b → 4.4.1

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

Files changed (25) hide show

package/dist-cjs/index.d.ts CHANGED Viewed

@@ -2882,6 +2882,8 @@ export declare interface StylePanelDropdownPickerProps<T extends string> {
     items: StyleValuesForUi<T>;
     type: 'icon' | 'menu' | 'tool';
     onValueChange?(style: StyleProp<T>, value: T): void;
+    /** Override the test ID prefix. Defaults to uiType. */
+    testIdType?: string;
 }
 /** @public @react */

package/dist-cjs/index.js CHANGED Viewed

@@ -603,7 +603,7 @@ var import_buildFromV1Document = require("./lib/utils/tldr/buildFromV1Document")
 var import_file = require("./lib/utils/tldr/file");
 (0, import_editor.registerTldrawLibraryVersion)(
   "tldraw",
-  "4.4.0-next.f2df7e20ec7b",
+  "4.4.1",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js CHANGED Viewed

@@ -170,7 +170,8 @@ function StylePanelFillPicker() {
         {
           type: "icon",
           id: "fill-extra",
-          uiType: "fill-extra",
+          uiType: "fill",
+          testIdType: "fill-extra",
           stylePanelType: "fill",
           style: import_editor.DefaultFillStyle,
           items: import_styles.STYLES.fillExtra,

package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx"],
-  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tTLArrowShapeArrowheadStyle,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { StylePanelButtonPicker, StylePanelButtonPickerInline } from './StylePanelButtonPicker'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'\nimport {\n\tStylePanelDropdownPicker,\n\tStylePanelDropdownPickerInline,\n} from './StylePanelDropdownPicker'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public @react */\nexport function DefaultStylePanelContent() {\n\treturn (\n\t\t<>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelColorPicker />\n\t\t\t\t<StylePanelOpacityPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFillPicker />\n\t\t\t\t<StylePanelDashPicker />\n\t\t\t\t<StylePanelSizePicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFontPicker />\n\t\t\t\t<StylePanelTextAlignPicker />\n\t\t\t\t<StylePanelLabelAlignPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelGeoShapePicker />\n\t\t\t\t<StylePanelArrowKindPicker />\n\t\t\t\t<StylePanelArrowheadPicker />\n\t\t\t\t<StylePanelSplinePicker />\n\t\t\t</StylePanelSection>\n\t\t</>\n\t)\n}\n\n/** @public */\nexport interface StylePanelSectionProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSection({ children }: StylePanelSectionProps) {\n\treturn <div className=\"tlui-style-panel__section\">{children}</div>\n}\n\n/** @public @react */\nexport function StylePanelColorPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst color = styles.get(DefaultColorStyle)\n\tif (color === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.color')}\n\t\t\tuiType=\"color\"\n\t\t\tstyle={DefaultColorStyle}\n\t\t\titems={STYLES.color}\n\t\t\tvalue={color}\n\t\t/>\n\t)\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n/** @public @react */\nexport function StylePanelOpacityPicker() {\n\tconst editor = useEditor()\n\tconst { onHistoryMark, enhancedA11yMode } = useStylePanelContext()\n\n\tconst opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item)\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: 'opacity', value })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tif (opacity === undefined) return null\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t\t)\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && (\n\t\t\t\t<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>\n\t\t\t)}\n\t\t\t<TldrawUiSlider\n\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\tariaValueModifier={25}\n\t\t\t/>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFillPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst fill = styles.get(DefaultFillStyle)\n\tif (fill === undefined) return null\n\n\tconst title = msg('style-panel.fill')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\titems={STYLES.fill}\n\t\t\t\t\tvalue={fill}\n\t\t\t\t/>\n\t\t\t\t<StylePanelDropdownPickerInline\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tid=\"fill-extra\"\n\t\t\t\t\tuiType=\"fill-extra\"\n\t\t\t\t\tstylePanelType=\"fill\"\n\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\titems={STYLES.fillExtra}\n\t\t\t\t\tvalue={fill}\n\t\t\t\t/>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelDashPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst dash = styles.get(DefaultDashStyle)\n\tif (dash === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.dash')}\n\t\t\tuiType=\"dash\"\n\t\t\tstyle={DefaultDashStyle}\n\t\t\titems={STYLES.dash}\n\t\t\tvalue={dash}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSizePicker() {\n\tconst editor = useEditor()\n\tconst { styles, onValueChange } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst size = styles.get(DefaultSizeStyle)\n\tif (size === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.size')}\n\t\t\tuiType=\"size\"\n\t\t\tstyle={DefaultSizeStyle}\n\t\t\titems={STYLES.size}\n\t\t\tvalue={size}\n\t\t\tonValueChange={(style, value) => {\n\t\t\t\tonValueChange(style, value)\n\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFontPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst font = styles.get(DefaultFontStyle)\n\tif (font === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.font')}\n\t\t\tuiType=\"font\"\n\t\t\tstyle={DefaultFontStyle}\n\t\t\titems={STYLES.font}\n\t\t\tvalue={font}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelTextAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tif (textAlign === undefined) return null\n\tconst title = msg('style-panel.align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\tvalue={textAlign}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\tdisabled\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelLabelAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (labelAlign === undefined) return null\n\tconst title = msg('style-panel.label-align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t/>\n\t\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\tdisabled\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t) : (\n\t\t\t\t\t<StylePanelDropdownPickerInline\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelGeoShapePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tlabel=\"style-panel.geo\"\n\t\t\ttype=\"menu\"\n\t\t\tid=\"geo\"\n\t\t\tuiType=\"geo\"\n\t\t\tstylePanelType=\"geo\"\n\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\titems={STYLES.geo}\n\t\t\tvalue={geo}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowKindPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tid=\"arrow-kind\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\tuiType=\"arrow-kind\"\n\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\titems={STYLES.arrowKind}\n\t\t\tvalue={arrowKind}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowheadPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (arrowheadEnd === undefined || arrowheadStart === undefined) return null\n\n\treturn (\n\t\t<StylePanelDoubleDropdownPicker<TLArrowShapeArrowheadStyle>\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSplinePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\ttype=\"menu\"\n\t\t\tid=\"spline\"\n\t\t\tuiType=\"spline\"\n\t\t\tstylePanelType=\"spline\"\n\t\t\tlabel=\"style-panel.spline\"\n\t\t\tstyle={LineShapeSplineStyle}\n\t\t\titems={STYLES.spline}\n\t\t\tvalue={spline}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tTLArrowShapeArrowheadStyle,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { StylePanelButtonPicker, StylePanelButtonPickerInline } from './StylePanelButtonPicker'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'\nimport {\n\tStylePanelDropdownPicker,\n\tStylePanelDropdownPickerInline,\n} from './StylePanelDropdownPicker'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public @react */\nexport function DefaultStylePanelContent() {\n\treturn (\n\t\t<>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelColorPicker />\n\t\t\t\t<StylePanelOpacityPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFillPicker />\n\t\t\t\t<StylePanelDashPicker />\n\t\t\t\t<StylePanelSizePicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFontPicker />\n\t\t\t\t<StylePanelTextAlignPicker />\n\t\t\t\t<StylePanelLabelAlignPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelGeoShapePicker />\n\t\t\t\t<StylePanelArrowKindPicker />\n\t\t\t\t<StylePanelArrowheadPicker />\n\t\t\t\t<StylePanelSplinePicker />\n\t\t\t</StylePanelSection>\n\t\t</>\n\t)\n}\n\n/** @public */\nexport interface StylePanelSectionProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSection({ children }: StylePanelSectionProps) {\n\treturn <div className=\"tlui-style-panel__section\">{children}</div>\n}\n\n/** @public @react */\nexport function StylePanelColorPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst color = styles.get(DefaultColorStyle)\n\tif (color === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.color')}\n\t\t\tuiType=\"color\"\n\t\t\tstyle={DefaultColorStyle}\n\t\t\titems={STYLES.color}\n\t\t\tvalue={color}\n\t\t/>\n\t)\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n/** @public @react */\nexport function StylePanelOpacityPicker() {\n\tconst editor = useEditor()\n\tconst { onHistoryMark, enhancedA11yMode } = useStylePanelContext()\n\n\tconst opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item)\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: 'opacity', value })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tif (opacity === undefined) return null\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t\t)\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && (\n\t\t\t\t<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>\n\t\t\t)}\n\t\t\t<TldrawUiSlider\n\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\tariaValueModifier={25}\n\t\t\t/>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFillPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst fill = styles.get(DefaultFillStyle)\n\tif (fill === undefined) return null\n\n\tconst title = msg('style-panel.fill')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\titems={STYLES.fill}\n\t\t\t\t\tvalue={fill}\n\t\t\t\t/>\n\t\t\t\t<StylePanelDropdownPickerInline\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tid=\"fill-extra\"\n\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\ttestIdType=\"fill-extra\"\n\t\t\t\t\tstylePanelType=\"fill\"\n\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\titems={STYLES.fillExtra}\n\t\t\t\t\tvalue={fill}\n\t\t\t\t/>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelDashPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst dash = styles.get(DefaultDashStyle)\n\tif (dash === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.dash')}\n\t\t\tuiType=\"dash\"\n\t\t\tstyle={DefaultDashStyle}\n\t\t\titems={STYLES.dash}\n\t\t\tvalue={dash}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSizePicker() {\n\tconst editor = useEditor()\n\tconst { styles, onValueChange } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst size = styles.get(DefaultSizeStyle)\n\tif (size === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.size')}\n\t\t\tuiType=\"size\"\n\t\t\tstyle={DefaultSizeStyle}\n\t\t\titems={STYLES.size}\n\t\t\tvalue={size}\n\t\t\tonValueChange={(style, value) => {\n\t\t\t\tonValueChange(style, value)\n\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFontPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst font = styles.get(DefaultFontStyle)\n\tif (font === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.font')}\n\t\t\tuiType=\"font\"\n\t\t\tstyle={DefaultFontStyle}\n\t\t\titems={STYLES.font}\n\t\t\tvalue={font}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelTextAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tif (textAlign === undefined) return null\n\tconst title = msg('style-panel.align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\tvalue={textAlign}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\tdisabled\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelLabelAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (labelAlign === undefined) return null\n\tconst title = msg('style-panel.label-align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t/>\n\t\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\tdisabled\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t) : (\n\t\t\t\t\t<StylePanelDropdownPickerInline\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelGeoShapePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tlabel=\"style-panel.geo\"\n\t\t\ttype=\"menu\"\n\t\t\tid=\"geo\"\n\t\t\tuiType=\"geo\"\n\t\t\tstylePanelType=\"geo\"\n\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\titems={STYLES.geo}\n\t\t\tvalue={geo}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowKindPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tid=\"arrow-kind\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\tuiType=\"arrow-kind\"\n\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\titems={STYLES.arrowKind}\n\t\t\tvalue={arrowKind}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowheadPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (arrowheadEnd === undefined || arrowheadStart === undefined) return null\n\n\treturn (\n\t\t<StylePanelDoubleDropdownPicker<TLArrowShapeArrowheadStyle>\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSplinePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\ttype=\"menu\"\n\t\t\tid=\"spline\"\n\t\t\tuiType=\"spline\"\n\t\t\tstylePanelType=\"spline\"\n\t\t\tlabel=\"style-panel.spline\"\n\t\t\tstyle={LineShapeSplineStyle}\n\t\t\titems={STYLES.spline}\n\t\t\tvalue={spline}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js CHANGED Viewed

@@ -58,7 +58,8 @@ function StylePanelDropdownPickerInlineInner(props) {
     items,
     type,
     value,
-    onValueChange = ctx.onValueChange
+    onValueChange = ctx.onValueChange,
+    testIdType = uiType
   } = props;
   const msg = (0, import_useTranslation.useTranslation)();
   const editor = (0, import_editor.useEditor)();
@@ -84,7 +85,7 @@ function StylePanelDropdownPickerInlineInner(props) {
           import_TldrawUiToolbar.TldrawUiToolbarButton,
           {
             type,
-            "data-testid": `style.${uiType}`,
+            "data-testid": `style.${testIdType}`,
             "data-direction": "left",
             title: titleStr,
             children: [
@@ -98,7 +99,7 @@ function StylePanelDropdownPickerInlineInner(props) {
             import_TldrawUiToolbar.TldrawUiToolbarButton,
             {
               type: "icon",
-              "data-testid": `style.${uiType}.${item.value}`,
+              "data-testid": `style.${testIdType}.${item.value}`,
               title: stylePanelName + " \u2014 " + msg(`${uiType}-style.${item.value}`),
               isActive: icon === item.icon,
               onClick: () => {

package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx"],
-  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction StylePanelDropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\tconst toolbarLabel = props.label\n\t\t? msg(props.label)\n\t\t: msg(`style-panel.${props.stylePanelType}` as TLUiTranslationKey)\n\treturn (\n\t\t<TldrawUiToolbar label={toolbarLabel}>\n\t\t\t<StylePanelDropdownPickerInline {...props} />\n\t\t</TldrawUiToolbar>\n\t)\n}\n\nfunction StylePanelDropdownPickerInlineInner<T extends string>(\n\tprops: StylePanelDropdownPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tuiType,\n\t\tstylePanelType,\n\t\tstyle,\n\t\titems,\n\t\ttype,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t} = props\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(() => {\n\t\tif (value.type === 'mixed') return 'mixed' as TLUiIconType\n\t\tconst match = items.find((item) => item.value === value.value)?.icon\n\t\treturn match ?? items[0]?.icon\n\t}, [items, value])\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiPopover\n\t\t\tid={popoverId}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={setIsOpen}\n\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon as TLUiIconType} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tctx.onHistoryMark('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\n/** @public @react */\nexport const StylePanelDropdownPicker = React.memo(StylePanelDropdownPickerInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n\n/** @public @react */\nexport const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCG;AArCH,oBAA2D;AAC3D,YAAuB;AAGvB,4BAA+B;AAE/B,gCAAmC;AACnC,iCAAoC;AACpC,6BAIO;AACP,6BAAuD;AACvD,iCAA4C;AAC5C,+BAAqC;AAerC,SAAS,8BAAgD,OAAyC;AACjG,QAAM,UAAM,sCAAe;AAC3B,QAAM,eAAe,MAAM,QACxB,IAAI,MAAM,KAAK,IACf,IAAI,eAAe,MAAM,cAAc,EAAwB;AAClE,SACC,4CAAC,0CAAgB,OAAO,cACvB,sDAAC,kCAAgC,GAAG,OAAO,GAC5C;AAEF;AAEA,SAAS,oCACR,OACC;AACD,QAAM,UAAM,+CAAqB;AACjC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,IAAI;AAAA,EACrB,IAAI;AACJ,QAAM,UAAM,sCAAe;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,QAAM,OAAO,MAAM,QAAQ,MAAM;AAChC,QAAI,MAAM,SAAS,QAAS,QAAO;AACnC,UAAM,QAAQ,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,MAAM,KAAK,GAAG;AAChE,WAAO,SAAS,MAAM,CAAC,GAAG;AAAA,EAC3B,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,oDAAC,iDACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,4CAAC,kDAAqB,oBAAS;AAAA,cAC5C,4CAAC,gDAAmB,MAA4B;AAAA;AAAA;AAAA,QACjD,GACD;AAAA,QACA,4CAAC,iDAAuB,MAAK,QAAO,OAAM,UACzC,sDAAC,0CAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,oBAAI,cAAc,4BAA4B;AAC9C,8BAAc,OAAO,KAAK,KAAK;AAC/B,sCAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,sDAAC,gDAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD;AAEF;AAIO,MAAM,2BAA2B,MAAM,KAAK,6BAA6B;AAOzE,MAAM,iCAAiC,MAAM,KAAK,mCAAmC;",
+  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange?(style: StyleProp<T>, value: T): void\n\t/** Override the test ID prefix. Defaults to uiType. */\n\ttestIdType?: string\n}\n\nfunction StylePanelDropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\tconst toolbarLabel = props.label\n\t\t? msg(props.label)\n\t\t: msg(`style-panel.${props.stylePanelType}` as TLUiTranslationKey)\n\treturn (\n\t\t<TldrawUiToolbar label={toolbarLabel}>\n\t\t\t<StylePanelDropdownPickerInline {...props} />\n\t\t</TldrawUiToolbar>\n\t)\n}\n\nfunction StylePanelDropdownPickerInlineInner<T extends string>(\n\tprops: StylePanelDropdownPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tuiType,\n\t\tstylePanelType,\n\t\tstyle,\n\t\titems,\n\t\ttype,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t\ttestIdType = uiType,\n\t} = props\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(() => {\n\t\tif (value.type === 'mixed') return 'mixed' as TLUiIconType\n\t\tconst match = items.find((item) => item.value === value.value)?.icon\n\t\treturn match ?? items[0]?.icon\n\t}, [items, value])\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiPopover\n\t\t\tid={popoverId}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={setIsOpen}\n\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${testIdType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon as TLUiIconType} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${testIdType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tctx.onHistoryMark('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\n/** @public @react */\nexport const StylePanelDropdownPicker = React.memo(StylePanelDropdownPickerInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n\n/** @public @react */\nexport const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCG;AAvCH,oBAA2D;AAC3D,YAAuB;AAGvB,4BAA+B;AAE/B,gCAAmC;AACnC,iCAAoC;AACpC,6BAIO;AACP,6BAAuD;AACvD,iCAA4C;AAC5C,+BAAqC;AAiBrC,SAAS,8BAAgD,OAAyC;AACjG,QAAM,UAAM,sCAAe;AAC3B,QAAM,eAAe,MAAM,QACxB,IAAI,MAAM,KAAK,IACf,IAAI,eAAe,MAAM,cAAc,EAAwB;AAClE,SACC,4CAAC,0CAAgB,OAAO,cACvB,sDAAC,kCAAgC,GAAG,OAAO,GAC5C;AAEF;AAEA,SAAS,oCACR,OACC;AACD,QAAM,UAAM,+CAAqB;AACjC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,IAAI;AAAA,IACpB,aAAa;AAAA,EACd,IAAI;AACJ,QAAM,UAAM,sCAAe;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,QAAM,OAAO,MAAM,QAAQ,MAAM;AAChC,QAAI,MAAM,SAAS,QAAS,QAAO;AACnC,UAAM,QAAQ,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,MAAM,KAAK,GAAG;AAChE,WAAO,SAAS,MAAM,CAAC,GAAG;AAAA,EAC3B,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,oDAAC,iDACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,UAAU;AAAA,YAChC,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,4CAAC,kDAAqB,oBAAS;AAAA,cAC5C,4CAAC,gDAAmB,MAA4B;AAAA;AAAA;AAAA,QACjD,GACD;AAAA,QACA,4CAAC,iDAAuB,MAAK,QAAO,OAAM,UACzC,sDAAC,0CAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,UAAU,IAAI,KAAK,KAAK;AAAA,cAC9C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,oBAAI,cAAc,4BAA4B;AAC9C,8BAAc,OAAO,KAAK,KAAK;AAC/B,sCAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,sDAAC,gDAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD;AAEF;AAIO,MAAM,2BAA2B,MAAM,KAAK,6BAA6B;AAOzE,MAAM,iCAAiC,MAAM,KAAK,mCAAmC;",
   "names": []
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js CHANGED Viewed

@@ -195,8 +195,11 @@ function TooltipSingleton() {
       const activeRect = currentTooltip.targetElement.getBoundingClientRect();
       const trigger = triggerRef.current;
       trigger.style.position = "fixed";
-      trigger.style.left = `${activeRect.left}px`;
-      trigger.style.top = `${activeRect.top}px`;
+      trigger.style.left = "0px";
+      trigger.style.top = "0px";
+      const cbOffset = trigger.getBoundingClientRect();
+      trigger.style.left = `${activeRect.left - cbOffset.left}px`;
+      trigger.style.top = `${activeRect.top - cbOffset.top}px`;
       trigger.style.width = `${activeRect.width}px`;
       trigger.style.height = `${activeRect.height}px`;
       trigger.style.pointerEvents = "none";

package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiTooltip.tsx"],
-  "sourcesContent": ["import {\n\tassert,\n\tatom,\n\tEditor,\n\ttlenvReactive,\n\tuniqueId,\n\tuseMaybeEditor,\n\tuseValue,\n} 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\ninterface TooltipData {\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// State machine states\ntype TooltipState =\n\t| { name: 'idle' }\n\t| { name: 'pointer_down' }\n\t| { name: 'showing'; tooltip: TooltipData }\n\t| { name: 'waiting_to_hide'; tooltip: TooltipData; timeoutId: number }\n\n// State machine events\ntype TooltipEvent =\n\t| { type: 'pointer_down' }\n\t| { type: 'pointer_up' }\n\t| { type: 'show'; tooltip: TooltipData }\n\t| { type: 'hide'; tooltipId: string; editor: Editor | null; instant: boolean }\n\t| { type: 'hide_all' }\n\n// Singleton tooltip manager using explicit state machine\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate state = atom<TooltipState>('tooltip state', { name: 'idle' })\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\thideAllTooltips() {\n\t\tthis.handleEvent({ type: 'hide_all' })\n\t}\n\n\thandleEvent(event: TooltipEvent) {\n\t\tconst currentState = this.state.get()\n\n\t\tswitch (event.type) {\n\t\t\tcase 'pointer_down': {\n\t\t\t\t// Transition to pointer_down from any state\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'pointer_down' })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'pointer_up': {\n\t\t\t\t// Only transition from pointer_down to idle\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'show': {\n\t\t\t\t// Don't show tooltips while pointer is down\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// Clear any existing timeout if transitioning from waiting_to_hide\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\n\t\t\t\t// Transition to showing state\n\t\t\t\tthis.state.set({ name: 'showing', tooltip: event.tooltip })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide': {\n\t\t\t\tconst { tooltipId, editor, instant } = event\n\n\t\t\t\t// Only hide if the tooltip matches\n\t\t\t\tif (currentState.name === 'showing' && currentState.tooltip.id === tooltipId) {\n\t\t\t\t\tif (editor && !instant) {\n\t\t\t\t\t\t// Transition to waiting_to_hide state\n\t\t\t\t\t\tconst timeoutId = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\tconst state = this.state.get()\n\t\t\t\t\t\t\tif (state.name === 'waiting_to_hide' && state.tooltip.id === tooltipId) {\n\t\t\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 300)\n\t\t\t\t\t\tthis.state.set({\n\t\t\t\t\t\t\tname: 'waiting_to_hide',\n\t\t\t\t\t\t\ttooltip: currentState.tooltip,\n\t\t\t\t\t\t\ttimeoutId,\n\t\t\t\t\t\t})\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t} else if (\n\t\t\t\t\tcurrentState.name === 'waiting_to_hide' &&\n\t\t\t\t\tcurrentState.tooltip.id === tooltipId\n\t\t\t\t) {\n\t\t\t\t\t// Already waiting to hide, make it instant if requested\n\t\t\t\t\tif (instant) {\n\t\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide_all': {\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\t// Preserve pointer_down state if that's the current state\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\n\tgetCurrentTooltipData(): TooltipData | null {\n\t\tconst currentState = this.state.get()\n\t\tlet tooltip: TooltipData | null = null\n\n\t\tif (currentState.name === 'showing') {\n\t\t\ttooltip = currentState.tooltip\n\t\t} else if (currentState.name === 'waiting_to_hide') {\n\t\t\ttooltip = currentState.tooltip\n\t\t}\n\n\t\tif (!tooltip) return null\n\t\tif (tlenvReactive.get().isCoarsePointer && !tooltip.showOnMobile) return null\n\t\treturn tooltip\n\t}\n}\n\nconst tooltipManager = TooltipManager.getInstance()\n\n/** @public */\nexport function hideAllTooltips() {\n\ttooltipManager.hideAllTooltips()\n}\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.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: currentTooltip.id,\n\t\t\t\teditor,\n\t\t\t\tinstant: true,\n\t\t\t})\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\thideAllTooltips()\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}, [currentTooltip, isOpen])\n\n\t// Hide tooltip and prevent new ones from opening while pointer is down\n\tuseEffect(() => {\n\t\tfunction handlePointerDown() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_down' })\n\t\t}\n\n\t\tfunction handlePointerUp() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\n\t\t}\n\n\t\tdocument.addEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\tdocument.addEventListener('pointerup', handlePointerUp, { capture: true })\n\t\tdocument.addEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\t\tdocument.removeEventListener('pointerup', handlePointerUp, { capture: true })\n\t\t\tdocument.removeEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\t\t// Reset pointer state on unmount to prevent stuck state\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\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\t\tconst enhancedA11yMode = useValue(\n\t\t\t'enhancedA11yMode',\n\t\t\t() => editor?.user.getEnhancedA11yMode(),\n\t\t\t[editor]\n\t\t)\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.handleEvent({\n\t\t\t\t\t\ttype: 'hide',\n\t\t\t\t\t\ttooltipId: currentTooltipId,\n\t\t\t\t\t\teditor,\n\t\t\t\t\t\tinstant: true,\n\t\t\t\t\t})\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 enhanced accessibility mode is disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tlet delayDurationToUse\n\t\tif (enhancedA11yMode) {\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 || enhancedA11yMode) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root\n\t\t\t\t\tdelayDuration={delayDurationToUse}\n\t\t\t\t\tdisableHoverableContent={!enhancedA11yMode}\n\t\t\t\t>\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 childElement = child as React.ReactElement<{\n\t\t\tonMouseEnter?(event: React.MouseEvent<HTMLElement>): void\n\t\t\tonMouseLeave?(event: React.MouseEvent<HTMLElement>): void\n\t\t\tonFocus?(event: React.FocusEvent<HTMLElement>): void\n\t\t\tonBlur?(event: React.FocusEvent<HTMLElement>): void\n\t\t}>\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onFocus?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onBlur?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(childElement, {\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 {\n\tassert,\n\tatom,\n\tEditor,\n\ttlenvReactive,\n\tuniqueId,\n\tuseMaybeEditor,\n\tuseValue,\n} 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\ninterface TooltipData {\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// State machine states\ntype TooltipState =\n\t| { name: 'idle' }\n\t| { name: 'pointer_down' }\n\t| { name: 'showing'; tooltip: TooltipData }\n\t| { name: 'waiting_to_hide'; tooltip: TooltipData; timeoutId: number }\n\n// State machine events\ntype TooltipEvent =\n\t| { type: 'pointer_down' }\n\t| { type: 'pointer_up' }\n\t| { type: 'show'; tooltip: TooltipData }\n\t| { type: 'hide'; tooltipId: string; editor: Editor | null; instant: boolean }\n\t| { type: 'hide_all' }\n\n// Singleton tooltip manager using explicit state machine\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate state = atom<TooltipState>('tooltip state', { name: 'idle' })\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\thideAllTooltips() {\n\t\tthis.handleEvent({ type: 'hide_all' })\n\t}\n\n\thandleEvent(event: TooltipEvent) {\n\t\tconst currentState = this.state.get()\n\n\t\tswitch (event.type) {\n\t\t\tcase 'pointer_down': {\n\t\t\t\t// Transition to pointer_down from any state\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'pointer_down' })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'pointer_up': {\n\t\t\t\t// Only transition from pointer_down to idle\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'show': {\n\t\t\t\t// Don't show tooltips while pointer is down\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// Clear any existing timeout if transitioning from waiting_to_hide\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\n\t\t\t\t// Transition to showing state\n\t\t\t\tthis.state.set({ name: 'showing', tooltip: event.tooltip })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide': {\n\t\t\t\tconst { tooltipId, editor, instant } = event\n\n\t\t\t\t// Only hide if the tooltip matches\n\t\t\t\tif (currentState.name === 'showing' && currentState.tooltip.id === tooltipId) {\n\t\t\t\t\tif (editor && !instant) {\n\t\t\t\t\t\t// Transition to waiting_to_hide state\n\t\t\t\t\t\tconst timeoutId = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\tconst state = this.state.get()\n\t\t\t\t\t\t\tif (state.name === 'waiting_to_hide' && state.tooltip.id === tooltipId) {\n\t\t\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 300)\n\t\t\t\t\t\tthis.state.set({\n\t\t\t\t\t\t\tname: 'waiting_to_hide',\n\t\t\t\t\t\t\ttooltip: currentState.tooltip,\n\t\t\t\t\t\t\ttimeoutId,\n\t\t\t\t\t\t})\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t} else if (\n\t\t\t\t\tcurrentState.name === 'waiting_to_hide' &&\n\t\t\t\t\tcurrentState.tooltip.id === tooltipId\n\t\t\t\t) {\n\t\t\t\t\t// Already waiting to hide, make it instant if requested\n\t\t\t\t\tif (instant) {\n\t\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide_all': {\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\t// Preserve pointer_down state if that's the current state\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\n\tgetCurrentTooltipData(): TooltipData | null {\n\t\tconst currentState = this.state.get()\n\t\tlet tooltip: TooltipData | null = null\n\n\t\tif (currentState.name === 'showing') {\n\t\t\ttooltip = currentState.tooltip\n\t\t} else if (currentState.name === 'waiting_to_hide') {\n\t\t\ttooltip = currentState.tooltip\n\t\t}\n\n\t\tif (!tooltip) return null\n\t\tif (tlenvReactive.get().isCoarsePointer && !tooltip.showOnMobile) return null\n\t\treturn tooltip\n\t}\n}\n\nconst tooltipManager = TooltipManager.getInstance()\n\n/** @public */\nexport function hideAllTooltips() {\n\ttooltipManager.hideAllTooltips()\n}\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.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: currentTooltip.id,\n\t\t\t\teditor,\n\t\t\t\tinstant: true,\n\t\t\t})\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\thideAllTooltips()\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}, [currentTooltip, isOpen])\n\n\t// Hide tooltip and prevent new ones from opening while pointer is down\n\tuseEffect(() => {\n\t\tfunction handlePointerDown() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_down' })\n\t\t}\n\n\t\tfunction handlePointerUp() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\n\t\t}\n\n\t\tdocument.addEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\tdocument.addEventListener('pointerup', handlePointerUp, { capture: true })\n\t\tdocument.addEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\t\tdocument.removeEventListener('pointerup', handlePointerUp, { capture: true })\n\t\t\tdocument.removeEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\t\t// Reset pointer state on unmount to prevent stuck state\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\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 = '0px'\n\t\t\ttrigger.style.top = '0px'\n\t\t\tconst cbOffset = trigger.getBoundingClientRect()\n\n\t\t\ttrigger.style.left = `${activeRect.left - cbOffset.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top - cbOffset.top}px`\n\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 enhancedA11yMode = useValue(\n\t\t\t'enhancedA11yMode',\n\t\t\t() => editor?.user.getEnhancedA11yMode(),\n\t\t\t[editor]\n\t\t)\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.handleEvent({\n\t\t\t\t\t\ttype: 'hide',\n\t\t\t\t\t\ttooltipId: currentTooltipId,\n\t\t\t\t\t\teditor,\n\t\t\t\t\t\tinstant: true,\n\t\t\t\t\t})\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 enhanced accessibility mode is disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tlet delayDurationToUse\n\t\tif (enhancedA11yMode) {\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 || enhancedA11yMode) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root\n\t\t\t\t\tdelayDuration={delayDurationToUse}\n\t\t\t\t\tdisableHoverableContent={!enhancedA11yMode}\n\t\t\t\t>\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 childElement = child as React.ReactElement<{\n\t\t\tonMouseEnter?(event: React.MouseEvent<HTMLElement>): void\n\t\t\tonMouseLeave?(event: React.MouseEvent<HTMLElement>): void\n\t\t\tonFocus?(event: React.FocusEvent<HTMLElement>): void\n\t\t\tonBlur?(event: React.FocusEvent<HTMLElement>): void\n\t\t}>\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onFocus?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onBlur?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(childElement, {\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": ["_Tooltip", "React"]
 }

package/dist-cjs/lib/ui/version.js CHANGED Viewed

@@ -22,10 +22,10 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-const version = "4.4.0-next.f2df7e20ec7b";
+const version = "4.4.1";
 const publishDates = {
   major: "2025-09-18T14:39:22.803Z",
-  minor: "2026-02-11T20:59:50.759Z",
-  patch: "2026-02-11T20:59:50.759Z"
+  minor: "2026-02-18T12:03:50.380Z",
+  patch: "2026-03-09T10:00:04.152Z"
 };
 //# sourceMappingURL=version.js.map

package/dist-cjs/lib/ui/version.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.4.0-next.f2df7e20ec7b'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-02-11T20:59:50.759Z',\n\tpatch: '2026-02-11T20:59:50.759Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.4.1'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-02-18T12:03:50.380Z',\n\tpatch: '2026-03-09T10:00:04.152Z',\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/dist-esm/index.d.mts CHANGED Viewed

@@ -2882,6 +2882,8 @@ export declare interface StylePanelDropdownPickerProps<T extends string> {
     items: StyleValuesForUi<T>;
     type: 'icon' | 'menu' | 'tool';
     onValueChange?(style: StyleProp<T>, value: T): void;
+    /** Override the test ID prefix. Defaults to uiType. */
+    testIdType?: string;
 }
 /** @public @react */

package/dist-esm/index.mjs CHANGED Viewed

@@ -552,7 +552,7 @@ import {
 } from "./lib/utils/tldr/file.mjs";
 registerTldrawLibraryVersion(
   "tldraw",
-  "4.4.0-next.f2df7e20ec7b",
+  "4.4.1",
   "esm"
 );
 export {

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

@@ -145,7 +145,8 @@ function StylePanelFillPicker() {
         {
           type: "icon",
           id: "fill-extra",
-          uiType: "fill-extra",
+          uiType: "fill",
+          testIdType: "fill-extra",
           stylePanelType: "fill",
           style: DefaultFillStyle,
           items: STYLES.fillExtra,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx"],
-  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tTLArrowShapeArrowheadStyle,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { StylePanelButtonPicker, StylePanelButtonPickerInline } from './StylePanelButtonPicker'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'\nimport {\n\tStylePanelDropdownPicker,\n\tStylePanelDropdownPickerInline,\n} from './StylePanelDropdownPicker'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public @react */\nexport function DefaultStylePanelContent() {\n\treturn (\n\t\t<>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelColorPicker />\n\t\t\t\t<StylePanelOpacityPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFillPicker />\n\t\t\t\t<StylePanelDashPicker />\n\t\t\t\t<StylePanelSizePicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFontPicker />\n\t\t\t\t<StylePanelTextAlignPicker />\n\t\t\t\t<StylePanelLabelAlignPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelGeoShapePicker />\n\t\t\t\t<StylePanelArrowKindPicker />\n\t\t\t\t<StylePanelArrowheadPicker />\n\t\t\t\t<StylePanelSplinePicker />\n\t\t\t</StylePanelSection>\n\t\t</>\n\t)\n}\n\n/** @public */\nexport interface StylePanelSectionProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSection({ children }: StylePanelSectionProps) {\n\treturn <div className=\"tlui-style-panel__section\">{children}</div>\n}\n\n/** @public @react */\nexport function StylePanelColorPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst color = styles.get(DefaultColorStyle)\n\tif (color === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.color')}\n\t\t\tuiType=\"color\"\n\t\t\tstyle={DefaultColorStyle}\n\t\t\titems={STYLES.color}\n\t\t\tvalue={color}\n\t\t/>\n\t)\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n/** @public @react */\nexport function StylePanelOpacityPicker() {\n\tconst editor = useEditor()\n\tconst { onHistoryMark, enhancedA11yMode } = useStylePanelContext()\n\n\tconst opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item)\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: 'opacity', value })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tif (opacity === undefined) return null\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t\t)\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && (\n\t\t\t\t<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>\n\t\t\t)}\n\t\t\t<TldrawUiSlider\n\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\tariaValueModifier={25}\n\t\t\t/>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFillPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst fill = styles.get(DefaultFillStyle)\n\tif (fill === undefined) return null\n\n\tconst title = msg('style-panel.fill')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\titems={STYLES.fill}\n\t\t\t\t\tvalue={fill}\n\t\t\t\t/>\n\t\t\t\t<StylePanelDropdownPickerInline\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tid=\"fill-extra\"\n\t\t\t\t\tuiType=\"fill-extra\"\n\t\t\t\t\tstylePanelType=\"fill\"\n\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\titems={STYLES.fillExtra}\n\t\t\t\t\tvalue={fill}\n\t\t\t\t/>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelDashPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst dash = styles.get(DefaultDashStyle)\n\tif (dash === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.dash')}\n\t\t\tuiType=\"dash\"\n\t\t\tstyle={DefaultDashStyle}\n\t\t\titems={STYLES.dash}\n\t\t\tvalue={dash}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSizePicker() {\n\tconst editor = useEditor()\n\tconst { styles, onValueChange } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst size = styles.get(DefaultSizeStyle)\n\tif (size === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.size')}\n\t\t\tuiType=\"size\"\n\t\t\tstyle={DefaultSizeStyle}\n\t\t\titems={STYLES.size}\n\t\t\tvalue={size}\n\t\t\tonValueChange={(style, value) => {\n\t\t\t\tonValueChange(style, value)\n\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFontPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst font = styles.get(DefaultFontStyle)\n\tif (font === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.font')}\n\t\t\tuiType=\"font\"\n\t\t\tstyle={DefaultFontStyle}\n\t\t\titems={STYLES.font}\n\t\t\tvalue={font}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelTextAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tif (textAlign === undefined) return null\n\tconst title = msg('style-panel.align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\tvalue={textAlign}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\tdisabled\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelLabelAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (labelAlign === undefined) return null\n\tconst title = msg('style-panel.label-align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t/>\n\t\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\tdisabled\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t) : (\n\t\t\t\t\t<StylePanelDropdownPickerInline\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelGeoShapePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tlabel=\"style-panel.geo\"\n\t\t\ttype=\"menu\"\n\t\t\tid=\"geo\"\n\t\t\tuiType=\"geo\"\n\t\t\tstylePanelType=\"geo\"\n\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\titems={STYLES.geo}\n\t\t\tvalue={geo}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowKindPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tid=\"arrow-kind\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\tuiType=\"arrow-kind\"\n\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\titems={STYLES.arrowKind}\n\t\t\tvalue={arrowKind}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowheadPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (arrowheadEnd === undefined || arrowheadStart === undefined) return null\n\n\treturn (\n\t\t<StylePanelDoubleDropdownPicker<TLArrowShapeArrowheadStyle>\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSplinePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\ttype=\"menu\"\n\t\t\tid=\"spline\"\n\t\t\tuiType=\"spline\"\n\t\t\tstylePanelType=\"spline\"\n\t\t\tlabel=\"style-panel.spline\"\n\t\t\tstyle={LineShapeSplineStyle}\n\t\t\titems={STYLES.spline}\n\t\t\tvalue={spline}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tArrowShapeKindStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultTextAlignStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tTLArrowShapeArrowheadStyle,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport React from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { StylePanelButtonPicker, StylePanelButtonPickerInline } from './StylePanelButtonPicker'\nimport { useStylePanelContext } from './StylePanelContext'\nimport { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'\nimport {\n\tStylePanelDropdownPicker,\n\tStylePanelDropdownPickerInline,\n} from './StylePanelDropdownPicker'\nimport { StylePanelSubheading } from './StylePanelSubheading'\n\n/** @public @react */\nexport function DefaultStylePanelContent() {\n\treturn (\n\t\t<>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelColorPicker />\n\t\t\t\t<StylePanelOpacityPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFillPicker />\n\t\t\t\t<StylePanelDashPicker />\n\t\t\t\t<StylePanelSizePicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelFontPicker />\n\t\t\t\t<StylePanelTextAlignPicker />\n\t\t\t\t<StylePanelLabelAlignPicker />\n\t\t\t</StylePanelSection>\n\t\t\t<StylePanelSection>\n\t\t\t\t<StylePanelGeoShapePicker />\n\t\t\t\t<StylePanelArrowKindPicker />\n\t\t\t\t<StylePanelArrowheadPicker />\n\t\t\t\t<StylePanelSplinePicker />\n\t\t\t</StylePanelSection>\n\t\t</>\n\t)\n}\n\n/** @public */\nexport interface StylePanelSectionProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSection({ children }: StylePanelSectionProps) {\n\treturn <div className=\"tlui-style-panel__section\">{children}</div>\n}\n\n/** @public @react */\nexport function StylePanelColorPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst color = styles.get(DefaultColorStyle)\n\tif (color === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.color')}\n\t\t\tuiType=\"color\"\n\t\t\tstyle={DefaultColorStyle}\n\t\t\titems={STYLES.color}\n\t\t\tvalue={color}\n\t\t/>\n\t)\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n/** @public @react */\nexport function StylePanelOpacityPicker() {\n\tconst editor = useEditor()\n\tconst { onHistoryMark, enhancedA11yMode } = useStylePanelContext()\n\n\tconst opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.run(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item)\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item)\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\n\t\t\ttrackEvent('set-style', { source: 'style-panel', id: 'opacity', value })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tif (opacity === undefined) return null\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t\t)\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && (\n\t\t\t\t<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>\n\t\t\t)}\n\t\t\t<TldrawUiSlider\n\t\t\t\tdata-testid=\"style.opacity\"\n\t\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\tariaValueModifier={25}\n\t\t\t/>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFillPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst fill = styles.get(DefaultFillStyle)\n\tif (fill === undefined) return null\n\n\tconst title = msg('style-panel.fill')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\titems={STYLES.fill}\n\t\t\t\t\tvalue={fill}\n\t\t\t\t/>\n\t\t\t\t<StylePanelDropdownPickerInline\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tid=\"fill-extra\"\n\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\ttestIdType=\"fill-extra\"\n\t\t\t\t\tstylePanelType=\"fill\"\n\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\titems={STYLES.fillExtra}\n\t\t\t\t\tvalue={fill}\n\t\t\t\t/>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelDashPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst dash = styles.get(DefaultDashStyle)\n\tif (dash === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.dash')}\n\t\t\tuiType=\"dash\"\n\t\t\tstyle={DefaultDashStyle}\n\t\t\titems={STYLES.dash}\n\t\t\tvalue={dash}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSizePicker() {\n\tconst editor = useEditor()\n\tconst { styles, onValueChange } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst size = styles.get(DefaultSizeStyle)\n\tif (size === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.size')}\n\t\t\tuiType=\"size\"\n\t\t\tstyle={DefaultSizeStyle}\n\t\t\titems={STYLES.size}\n\t\t\tvalue={size}\n\t\t\tonValueChange={(style, value) => {\n\t\t\t\tonValueChange(style, value)\n\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelFontPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst font = styles.get(DefaultFontStyle)\n\tif (font === undefined) return null\n\n\treturn (\n\t\t<StylePanelButtonPicker\n\t\t\ttitle={msg('style-panel.font')}\n\t\t\tuiType=\"font\"\n\t\t\tstyle={DefaultFontStyle}\n\t\t\titems={STYLES.font}\n\t\t\tvalue={font}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelTextAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tif (textAlign === undefined) return null\n\tconst title = msg('style-panel.align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\tvalue={textAlign}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\tdisabled\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelLabelAlignPicker() {\n\tconst { styles, enhancedA11yMode } = useStylePanelContext()\n\tconst msg = useTranslation()\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (labelAlign === undefined) return null\n\tconst title = msg('style-panel.label-align')\n\n\treturn (\n\t\t<>\n\t\t\t{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={title}>\n\t\t\t\t<StylePanelButtonPickerInline\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t/>\n\t\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\tdisabled\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t) : (\n\t\t\t\t\t<StylePanelDropdownPickerInline\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelGeoShapePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tlabel=\"style-panel.geo\"\n\t\t\ttype=\"menu\"\n\t\t\tid=\"geo\"\n\t\t\tuiType=\"geo\"\n\t\t\tstylePanelType=\"geo\"\n\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\titems={STYLES.geo}\n\t\t\tvalue={geo}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowKindPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\tid=\"arrow-kind\"\n\t\t\ttype=\"menu\"\n\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\tuiType=\"arrow-kind\"\n\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\titems={STYLES.arrowKind}\n\t\t\tvalue={arrowKind}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelArrowheadPicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (arrowheadEnd === undefined || arrowheadStart === undefined) return null\n\n\treturn (\n\t\t<StylePanelDoubleDropdownPicker<TLArrowShapeArrowheadStyle>\n\t\t\tlabel={'style-panel.arrowheads'}\n\t\t\tuiTypeA=\"arrowheadStart\"\n\t\t\tstyleA={ArrowShapeArrowheadStartStyle}\n\t\t\titemsA={STYLES.arrowheadStart}\n\t\t\tvalueA={arrowheadStart}\n\t\t\tuiTypeB=\"arrowheadEnd\"\n\t\t\tstyleB={ArrowShapeArrowheadEndStyle}\n\t\t\titemsB={STYLES.arrowheadEnd}\n\t\t\tvalueB={arrowheadEnd}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function StylePanelSplinePicker() {\n\tconst { styles } = useStylePanelContext()\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) return null\n\n\treturn (\n\t\t<StylePanelDropdownPicker\n\t\t\ttype=\"menu\"\n\t\t\tid=\"spline\"\n\t\t\tuiType=\"spline\"\n\t\t\tstylePanelType=\"spline\"\n\t\t\tlabel=\"style-panel.spline\"\n\t\t\tstyle={LineShapeSplineStyle}\n\t\t\titems={STYLES.spline}\n\t\t\tvalue={spline}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -28,7 +28,8 @@ function StylePanelDropdownPickerInlineInner(props) {
     items,
     type,
     value,
-    onValueChange = ctx.onValueChange
+    onValueChange = ctx.onValueChange,
+    testIdType = uiType
   } = props;
   const msg = useTranslation();
   const editor = useEditor();
@@ -54,7 +55,7 @@ function StylePanelDropdownPickerInlineInner(props) {
           TldrawUiToolbarButton,
           {
             type,
-            "data-testid": `style.${uiType}`,
+            "data-testid": `style.${testIdType}`,
             "data-direction": "left",
             title: titleStr,
             children: [
@@ -68,7 +69,7 @@ function StylePanelDropdownPickerInlineInner(props) {
             TldrawUiToolbarButton,
             {
               type: "icon",
-              "data-testid": `style.${uiType}.${item.value}`,
+              "data-testid": `style.${testIdType}.${item.value}`,
               title: stylePanelName + " \u2014 " + msg(`${uiType}-style.${item.value}`),
               isActive: icon === item.icon,
               onClick: () => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx"],
-  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction StylePanelDropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\tconst toolbarLabel = props.label\n\t\t? msg(props.label)\n\t\t: msg(`style-panel.${props.stylePanelType}` as TLUiTranslationKey)\n\treturn (\n\t\t<TldrawUiToolbar label={toolbarLabel}>\n\t\t\t<StylePanelDropdownPickerInline {...props} />\n\t\t</TldrawUiToolbar>\n\t)\n}\n\nfunction StylePanelDropdownPickerInlineInner<T extends string>(\n\tprops: StylePanelDropdownPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tuiType,\n\t\tstylePanelType,\n\t\tstyle,\n\t\titems,\n\t\ttype,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t} = props\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(() => {\n\t\tif (value.type === 'mixed') return 'mixed' as TLUiIconType\n\t\tconst match = items.find((item) => item.value === value.value)?.icon\n\t\treturn match ?? items[0]?.icon\n\t}, [items, value])\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiPopover\n\t\t\tid={popoverId}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={setIsOpen}\n\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon as TLUiIconType} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tctx.onHistoryMark('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\n/** @public @react */\nexport const StylePanelDropdownPicker = React.memo(StylePanelDropdownPickerInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n\n/** @public @react */\nexport const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n"],
-  "mappings": "AAqCG,cA+CC,YA/CD;AArCH,SAAiC,SAAS,iBAAiB;AAC3D,YAAY,WAAW;AAGvB,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,6BAA6B;AACvD,SAAS,mCAAmC;AAC5C,SAAS,4BAA4B;AAerC,SAAS,8BAAgD,OAAyC;AACjG,QAAM,MAAM,eAAe;AAC3B,QAAM,eAAe,MAAM,QACxB,IAAI,MAAM,KAAK,IACf,IAAI,eAAe,MAAM,cAAc,EAAwB;AAClE,SACC,oBAAC,mBAAgB,OAAO,cACvB,8BAAC,kCAAgC,GAAG,OAAO,GAC5C;AAEF;AAEA,SAAS,oCACR,OACC;AACD,QAAM,MAAM,qBAAqB;AACjC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,IAAI;AAAA,EACrB,IAAI;AACJ,QAAM,MAAM,eAAe;AAC3B,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,QAAM,OAAO,MAAM,QAAQ,MAAM;AAChC,QAAI,MAAM,SAAS,QAAS,QAAO;AACnC,UAAM,QAAQ,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,MAAM,KAAK,GAAG;AAChE,WAAO,SAAS,MAAM,CAAC,GAAG;AAAA,EAC3B,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,4BAAC,0BACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,oBAAC,uBAAqB,oBAAS;AAAA,cAC5C,oBAAC,sBAAmB,MAA4B;AAAA;AAAA;AAAA,QACjD,GACD;AAAA,QACA,oBAAC,0BAAuB,MAAK,QAAO,OAAM,UACzC,8BAAC,mBAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,8BAAC,+BAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,oBAAI,cAAc,4BAA4B;AAC9C,8BAAc,OAAO,KAAK,KAAK;AAC/B,wBAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,8BAAC,sBAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD;AAEF;AAIO,MAAM,2BAA2B,MAAM,KAAK,6BAA6B;AAOzE,MAAM,iCAAiC,MAAM,KAAK,mCAAmC;",
+  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange?(style: StyleProp<T>, value: T): void\n\t/** Override the test ID prefix. Defaults to uiType. */\n\ttestIdType?: string\n}\n\nfunction StylePanelDropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\tconst toolbarLabel = props.label\n\t\t? msg(props.label)\n\t\t: msg(`style-panel.${props.stylePanelType}` as TLUiTranslationKey)\n\treturn (\n\t\t<TldrawUiToolbar label={toolbarLabel}>\n\t\t\t<StylePanelDropdownPickerInline {...props} />\n\t\t</TldrawUiToolbar>\n\t)\n}\n\nfunction StylePanelDropdownPickerInlineInner<T extends string>(\n\tprops: StylePanelDropdownPickerProps<T>\n) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tuiType,\n\t\tstylePanelType,\n\t\tstyle,\n\t\titems,\n\t\ttype,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t\ttestIdType = uiType,\n\t} = props\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(() => {\n\t\tif (value.type === 'mixed') return 'mixed' as TLUiIconType\n\t\tconst match = items.find((item) => item.value === value.value)?.icon\n\t\treturn match ?? items[0]?.icon\n\t}, [items, value])\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiPopover\n\t\t\tid={popoverId}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={setIsOpen}\n\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${testIdType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon as TLUiIconType} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${testIdType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tctx.onHistoryMark('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\n/** @public @react */\nexport const StylePanelDropdownPicker = React.memo(StylePanelDropdownPickerInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n\n/** @public @react */\nexport const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner) as <\n\tT extends string,\n>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -174,8 +174,11 @@ function TooltipSingleton() {
       const activeRect = currentTooltip.targetElement.getBoundingClientRect();
       const trigger = triggerRef.current;
       trigger.style.position = "fixed";
-      trigger.style.left = `${activeRect.left}px`;
-      trigger.style.top = `${activeRect.top}px`;
+      trigger.style.left = "0px";
+      trigger.style.top = "0px";
+      const cbOffset = trigger.getBoundingClientRect();
+      trigger.style.left = `${activeRect.left - cbOffset.left}px`;
+      trigger.style.top = `${activeRect.top - cbOffset.top}px`;
       trigger.style.width = `${activeRect.width}px`;
       trigger.style.height = `${activeRect.height}px`;
       trigger.style.pointerEvents = "none";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiTooltip.tsx"],
-  "sourcesContent": ["import {\n\tassert,\n\tatom,\n\tEditor,\n\ttlenvReactive,\n\tuniqueId,\n\tuseMaybeEditor,\n\tuseValue,\n} 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\ninterface TooltipData {\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// State machine states\ntype TooltipState =\n\t| { name: 'idle' }\n\t| { name: 'pointer_down' }\n\t| { name: 'showing'; tooltip: TooltipData }\n\t| { name: 'waiting_to_hide'; tooltip: TooltipData; timeoutId: number }\n\n// State machine events\ntype TooltipEvent =\n\t| { type: 'pointer_down' }\n\t| { type: 'pointer_up' }\n\t| { type: 'show'; tooltip: TooltipData }\n\t| { type: 'hide'; tooltipId: string; editor: Editor | null; instant: boolean }\n\t| { type: 'hide_all' }\n\n// Singleton tooltip manager using explicit state machine\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate state = atom<TooltipState>('tooltip state', { name: 'idle' })\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\thideAllTooltips() {\n\t\tthis.handleEvent({ type: 'hide_all' })\n\t}\n\n\thandleEvent(event: TooltipEvent) {\n\t\tconst currentState = this.state.get()\n\n\t\tswitch (event.type) {\n\t\t\tcase 'pointer_down': {\n\t\t\t\t// Transition to pointer_down from any state\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'pointer_down' })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'pointer_up': {\n\t\t\t\t// Only transition from pointer_down to idle\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'show': {\n\t\t\t\t// Don't show tooltips while pointer is down\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// Clear any existing timeout if transitioning from waiting_to_hide\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\n\t\t\t\t// Transition to showing state\n\t\t\t\tthis.state.set({ name: 'showing', tooltip: event.tooltip })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide': {\n\t\t\t\tconst { tooltipId, editor, instant } = event\n\n\t\t\t\t// Only hide if the tooltip matches\n\t\t\t\tif (currentState.name === 'showing' && currentState.tooltip.id === tooltipId) {\n\t\t\t\t\tif (editor && !instant) {\n\t\t\t\t\t\t// Transition to waiting_to_hide state\n\t\t\t\t\t\tconst timeoutId = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\tconst state = this.state.get()\n\t\t\t\t\t\t\tif (state.name === 'waiting_to_hide' && state.tooltip.id === tooltipId) {\n\t\t\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 300)\n\t\t\t\t\t\tthis.state.set({\n\t\t\t\t\t\t\tname: 'waiting_to_hide',\n\t\t\t\t\t\t\ttooltip: currentState.tooltip,\n\t\t\t\t\t\t\ttimeoutId,\n\t\t\t\t\t\t})\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t} else if (\n\t\t\t\t\tcurrentState.name === 'waiting_to_hide' &&\n\t\t\t\t\tcurrentState.tooltip.id === tooltipId\n\t\t\t\t) {\n\t\t\t\t\t// Already waiting to hide, make it instant if requested\n\t\t\t\t\tif (instant) {\n\t\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide_all': {\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\t// Preserve pointer_down state if that's the current state\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\n\tgetCurrentTooltipData(): TooltipData | null {\n\t\tconst currentState = this.state.get()\n\t\tlet tooltip: TooltipData | null = null\n\n\t\tif (currentState.name === 'showing') {\n\t\t\ttooltip = currentState.tooltip\n\t\t} else if (currentState.name === 'waiting_to_hide') {\n\t\t\ttooltip = currentState.tooltip\n\t\t}\n\n\t\tif (!tooltip) return null\n\t\tif (tlenvReactive.get().isCoarsePointer && !tooltip.showOnMobile) return null\n\t\treturn tooltip\n\t}\n}\n\nconst tooltipManager = TooltipManager.getInstance()\n\n/** @public */\nexport function hideAllTooltips() {\n\ttooltipManager.hideAllTooltips()\n}\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.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: currentTooltip.id,\n\t\t\t\teditor,\n\t\t\t\tinstant: true,\n\t\t\t})\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\thideAllTooltips()\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}, [currentTooltip, isOpen])\n\n\t// Hide tooltip and prevent new ones from opening while pointer is down\n\tuseEffect(() => {\n\t\tfunction handlePointerDown() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_down' })\n\t\t}\n\n\t\tfunction handlePointerUp() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\n\t\t}\n\n\t\tdocument.addEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\tdocument.addEventListener('pointerup', handlePointerUp, { capture: true })\n\t\tdocument.addEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\t\tdocument.removeEventListener('pointerup', handlePointerUp, { capture: true })\n\t\t\tdocument.removeEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\t\t// Reset pointer state on unmount to prevent stuck state\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\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\t\tconst enhancedA11yMode = useValue(\n\t\t\t'enhancedA11yMode',\n\t\t\t() => editor?.user.getEnhancedA11yMode(),\n\t\t\t[editor]\n\t\t)\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.handleEvent({\n\t\t\t\t\t\ttype: 'hide',\n\t\t\t\t\t\ttooltipId: currentTooltipId,\n\t\t\t\t\t\teditor,\n\t\t\t\t\t\tinstant: true,\n\t\t\t\t\t})\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 enhanced accessibility mode is disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tlet delayDurationToUse\n\t\tif (enhancedA11yMode) {\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 || enhancedA11yMode) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root\n\t\t\t\t\tdelayDuration={delayDurationToUse}\n\t\t\t\t\tdisableHoverableContent={!enhancedA11yMode}\n\t\t\t\t>\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 childElement = child as React.ReactElement<{\n\t\t\tonMouseEnter?(event: React.MouseEvent<HTMLElement>): void\n\t\t\tonMouseLeave?(event: React.MouseEvent<HTMLElement>): void\n\t\t\tonFocus?(event: React.FocusEvent<HTMLElement>): void\n\t\t\tonBlur?(event: React.FocusEvent<HTMLElement>): void\n\t\t}>\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onFocus?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onBlur?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(childElement, {\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 {\n\tassert,\n\tatom,\n\tEditor,\n\ttlenvReactive,\n\tuniqueId,\n\tuseMaybeEditor,\n\tuseValue,\n} 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\ninterface TooltipData {\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// State machine states\ntype TooltipState =\n\t| { name: 'idle' }\n\t| { name: 'pointer_down' }\n\t| { name: 'showing'; tooltip: TooltipData }\n\t| { name: 'waiting_to_hide'; tooltip: TooltipData; timeoutId: number }\n\n// State machine events\ntype TooltipEvent =\n\t| { type: 'pointer_down' }\n\t| { type: 'pointer_up' }\n\t| { type: 'show'; tooltip: TooltipData }\n\t| { type: 'hide'; tooltipId: string; editor: Editor | null; instant: boolean }\n\t| { type: 'hide_all' }\n\n// Singleton tooltip manager using explicit state machine\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate state = atom<TooltipState>('tooltip state', { name: 'idle' })\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\thideAllTooltips() {\n\t\tthis.handleEvent({ type: 'hide_all' })\n\t}\n\n\thandleEvent(event: TooltipEvent) {\n\t\tconst currentState = this.state.get()\n\n\t\tswitch (event.type) {\n\t\t\tcase 'pointer_down': {\n\t\t\t\t// Transition to pointer_down from any state\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'pointer_down' })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'pointer_up': {\n\t\t\t\t// Only transition from pointer_down to idle\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'show': {\n\t\t\t\t// Don't show tooltips while pointer is down\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// Clear any existing timeout if transitioning from waiting_to_hide\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\n\t\t\t\t// Transition to showing state\n\t\t\t\tthis.state.set({ name: 'showing', tooltip: event.tooltip })\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide': {\n\t\t\t\tconst { tooltipId, editor, instant } = event\n\n\t\t\t\t// Only hide if the tooltip matches\n\t\t\t\tif (currentState.name === 'showing' && currentState.tooltip.id === tooltipId) {\n\t\t\t\t\tif (editor && !instant) {\n\t\t\t\t\t\t// Transition to waiting_to_hide state\n\t\t\t\t\t\tconst timeoutId = editor.timers.setTimeout(() => {\n\t\t\t\t\t\t\tconst state = this.state.get()\n\t\t\t\t\t\t\tif (state.name === 'waiting_to_hide' && state.tooltip.id === tooltipId) {\n\t\t\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 300)\n\t\t\t\t\t\tthis.state.set({\n\t\t\t\t\t\t\tname: 'waiting_to_hide',\n\t\t\t\t\t\t\ttooltip: currentState.tooltip,\n\t\t\t\t\t\t\ttimeoutId,\n\t\t\t\t\t\t})\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t} else if (\n\t\t\t\t\tcurrentState.name === 'waiting_to_hide' &&\n\t\t\t\t\tcurrentState.tooltip.id === tooltipId\n\t\t\t\t) {\n\t\t\t\t\t// Already waiting to hide, make it instant if requested\n\t\t\t\t\tif (instant) {\n\t\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\n\t\t\tcase 'hide_all': {\n\t\t\t\tif (currentState.name === 'waiting_to_hide') {\n\t\t\t\t\tclearTimeout(currentState.timeoutId)\n\t\t\t\t}\n\t\t\t\t// Preserve pointer_down state if that's the current state\n\t\t\t\tif (currentState.name === 'pointer_down') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.state.set({ name: 'idle' })\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\n\tgetCurrentTooltipData(): TooltipData | null {\n\t\tconst currentState = this.state.get()\n\t\tlet tooltip: TooltipData | null = null\n\n\t\tif (currentState.name === 'showing') {\n\t\t\ttooltip = currentState.tooltip\n\t\t} else if (currentState.name === 'waiting_to_hide') {\n\t\t\ttooltip = currentState.tooltip\n\t\t}\n\n\t\tif (!tooltip) return null\n\t\tif (tlenvReactive.get().isCoarsePointer && !tooltip.showOnMobile) return null\n\t\treturn tooltip\n\t}\n}\n\nconst tooltipManager = TooltipManager.getInstance()\n\n/** @public */\nexport function hideAllTooltips() {\n\ttooltipManager.hideAllTooltips()\n}\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.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: currentTooltip.id,\n\t\t\t\teditor,\n\t\t\t\tinstant: true,\n\t\t\t})\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\thideAllTooltips()\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}, [currentTooltip, isOpen])\n\n\t// Hide tooltip and prevent new ones from opening while pointer is down\n\tuseEffect(() => {\n\t\tfunction handlePointerDown() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_down' })\n\t\t}\n\n\t\tfunction handlePointerUp() {\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\n\t\t}\n\n\t\tdocument.addEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\tdocument.addEventListener('pointerup', handlePointerUp, { capture: true })\n\t\tdocument.addEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('pointerdown', handlePointerDown, { capture: true })\n\t\t\tdocument.removeEventListener('pointerup', handlePointerUp, { capture: true })\n\t\t\tdocument.removeEventListener('pointercancel', handlePointerUp, { capture: true })\n\t\t\t// Reset pointer state on unmount to prevent stuck state\n\t\t\ttooltipManager.handleEvent({ type: 'pointer_up' })\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 = '0px'\n\t\t\ttrigger.style.top = '0px'\n\t\t\tconst cbOffset = trigger.getBoundingClientRect()\n\n\t\t\ttrigger.style.left = `${activeRect.left - cbOffset.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top - cbOffset.top}px`\n\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 enhancedA11yMode = useValue(\n\t\t\t'enhancedA11yMode',\n\t\t\t() => editor?.user.getEnhancedA11yMode(),\n\t\t\t[editor]\n\t\t)\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.handleEvent({\n\t\t\t\t\t\ttype: 'hide',\n\t\t\t\t\t\ttooltipId: currentTooltipId,\n\t\t\t\t\t\teditor,\n\t\t\t\t\t\tinstant: true,\n\t\t\t\t\t})\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 enhanced accessibility mode is disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\tlet delayDurationToUse\n\t\tif (enhancedA11yMode) {\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 || enhancedA11yMode) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root\n\t\t\t\t\tdelayDuration={delayDurationToUse}\n\t\t\t\t\tdisableHoverableContent={!enhancedA11yMode}\n\t\t\t\t>\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 childElement = child as React.ReactElement<{\n\t\t\tonMouseEnter?(event: React.MouseEvent<HTMLElement>): void\n\t\t\tonMouseLeave?(event: React.MouseEvent<HTMLElement>): void\n\t\t\tonFocus?(event: React.FocusEvent<HTMLElement>): void\n\t\t\tonBlur?(event: React.FocusEvent<HTMLElement>): void\n\t\t}>\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onFocus?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'show',\n\t\t\t\ttooltip: {\n\t\t\t\t\tid: tooltipId.current,\n\t\t\t\t\tcontent,\n\t\t\t\t\ttargetElement: event.currentTarget as HTMLElement,\n\t\t\t\t\tside: sideToUse,\n\t\t\t\t\tsideOffset,\n\t\t\t\t\tshowOnMobile,\n\t\t\t\t\tdelayDuration: delayDurationToUse,\n\t\t\t\t},\n\t\t\t})\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchildElement.props.onBlur?.(event)\n\t\t\ttooltipManager.handleEvent({\n\t\t\t\ttype: 'hide',\n\t\t\t\ttooltipId: tooltipId.current,\n\t\t\t\teditor,\n\t\t\t\tinstant: false,\n\t\t\t})\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(childElement, {\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/version.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
-const version = "4.4.0-next.f2df7e20ec7b";
+const version = "4.4.1";
 const publishDates = {
   major: "2025-09-18T14:39:22.803Z",
-  minor: "2026-02-11T20:59:50.759Z",
-  patch: "2026-02-11T20:59:50.759Z"
+  minor: "2026-02-18T12:03:50.380Z",
+  patch: "2026-03-09T10:00:04.152Z"
 };
 export {
   publishDates,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.4.0-next.f2df7e20ec7b'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-02-11T20:59:50.759Z',\n\tpatch: '2026-02-11T20:59:50.759Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.4.1'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-02-18T12:03:50.380Z',\n\tpatch: '2026-03-09T10:00:04.152Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "4.4.0-next.f2df7e20ec7b",
+  "version": "4.4.1",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -61,8 +61,8 @@
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
     "@tiptap/starter-kit": "^3.12.1",
-    "@tldraw/editor": "4.4.0-next.f2df7e20ec7b",
-    "@tldraw/store": "4.4.0-next.f2df7e20ec7b",
+    "@tldraw/editor": "4.4.1",
+    "@tldraw/store": "4.4.1",
     "classnames": "^2.5.1",
     "hotkeys-js": "^3.13.9",
     "idb": "^7.1.1",

package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx CHANGED Viewed

@@ -169,7 +169,8 @@ export function StylePanelFillPicker() {
 				<StylePanelDropdownPickerInline
 					type="icon"
 					id="fill-extra"
-					uiType="fill-extra"
+					uiType="fill"
+					testIdType="fill-extra"
 					stylePanelType="fill"
 					style={DefaultFillStyle}
 					items={STYLES.fillExtra}

package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx CHANGED Viewed

@@ -26,6 +26,8 @@ export interface StylePanelDropdownPickerProps<T extends string> {
 	items: StyleValuesForUi<T>
 	type: 'icon' | 'tool' | 'menu'
 	onValueChange?(style: StyleProp<T>, value: T): void
+	/** Override the test ID prefix. Defaults to uiType. */
+	testIdType?: string
 }
 function StylePanelDropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {
@@ -54,6 +56,7 @@ function StylePanelDropdownPickerInlineInner<T extends string>(
 		type,
 		value,
 		onValueChange = ctx.onValueChange,
+		testIdType = uiType,
 	} = props
 	const msg = useTranslation()
 	const editor = useEditor()
@@ -84,7 +87,7 @@ function StylePanelDropdownPickerInlineInner<T extends string>(
 			<TldrawUiPopoverTrigger>
 				<TldrawUiToolbarButton
 					type={type}
-					data-testid={`style.${uiType}`}
+					data-testid={`style.${testIdType}`}
 					data-direction="left"
 					title={titleStr}
 				>
@@ -100,7 +103,7 @@ function StylePanelDropdownPickerInlineInner<T extends string>(
 								<TldrawUiToolbarButton
 									key={item.value}
 									type="icon"
-									data-testid={`style.${uiType}.${item.value}`}
+									data-testid={`style.${testIdType}.${item.value}`}
 									title={
 										stylePanelName +
 										' — ' +

package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx CHANGED Viewed

@@ -273,8 +273,13 @@ function TooltipSingleton() {
 			const trigger = triggerRef.current
 			trigger.style.position = 'fixed'
-			trigger.style.left = `${activeRect.left}px`
-			trigger.style.top = `${activeRect.top}px`
+			trigger.style.left = '0px'
+			trigger.style.top = '0px'
+			const cbOffset = trigger.getBoundingClientRect()
+			trigger.style.left = `${activeRect.left - cbOffset.left}px`
+			trigger.style.top = `${activeRect.top - cbOffset.top}px`
 			trigger.style.width = `${activeRect.width}px`
 			trigger.style.height = `${activeRect.height}px`
 			trigger.style.pointerEvents = 'none'

package/src/lib/ui/version.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
-export const version = '4.4.0-next.f2df7e20ec7b'
+export const version = '4.4.1'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2026-02-11T20:59:50.759Z',
-	patch: '2026-02-11T20:59:50.759Z',
+	minor: '2026-02-18T12:03:50.380Z',
+	patch: '2026-03-09T10:00:04.152Z',
 }