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

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-import { cloneElement, memo, useLayoutEffect, useRef } from "react";
+import { memo, useLayoutEffect, useRef } from "react";
 import { useAssetUrls } from "../../context/asset-urls.mjs";
 const TldrawUiIcon = memo(function TldrawUiIcon2({
   label,
@@ -10,40 +10,6 @@ const TldrawUiIcon = memo(function TldrawUiIcon2({
   color,
   className,
   ...props
-}) {
-  if (typeof icon === "string") {
-    return /* @__PURE__ */ jsx(
-      TldrawUIIconInner,
-      {
-        label,
-        small,
-        invertIcon,
-        icon,
-        color,
-        className,
-        ...props
-      }
-    );
-  }
-  return cloneElement(icon, {
-    ...props,
-    className: classNames({ "tlui-icon__small": small }, className, icon.props.className),
-    "aria-label": label,
-    style: {
-      color,
-      transform: invertIcon ? "scale(-1, 1)" : void 0,
-      ...icon.props.style
-    }
-  });
-});
-function TldrawUIIconInner({
-  label,
-  small,
-  invertIcon,
-  icon,
-  color,
-  className,
-  ...props
 }) {
   const assetUrls = useAssetUrls();
   const asset = assetUrls.icons[icon] ?? assetUrls.icons["question-mark-circle"];
@@ -84,7 +50,7 @@ function TldrawUIIconInner({
       }
     }
   );
-}
+});
 export {
   TldrawUiIcon
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiIcon.tsx"],
-  "sourcesContent": ["import classNames from 'classnames'\nimport { cloneElement, memo, ReactElement, useLayoutEffect, useRef } from 'react'\nimport { useAssetUrls } from '../../context/asset-urls'\nimport { TLUiIconType } from '../../icon-types'\n\n/** @public */\nexport type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>\n\n/** @public */\nexport interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {\n\ticon: TLUiIconType | Exclude<string, TLUiIconType> | TLUiIconJsx\n\tlabel: string\n\tsmall?: boolean\n\tcolor?: string\n\tchildren?: undefined\n\tinvertIcon?: boolean\n\tcrossOrigin?: 'anonymous' | 'use-credentials'\n}\n\n/** @public @react */\nexport const TldrawUiIcon = memo(function TldrawUiIcon({\n\tlabel,\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps) {\n\tif (typeof icon === 'string') {\n\t\treturn (\n\t\t\t<TldrawUIIconInner\n\t\t\t\tlabel={label}\n\t\t\t\tsmall={small}\n\t\t\t\tinvertIcon={invertIcon}\n\t\t\t\ticon={icon}\n\t\t\t\tcolor={color}\n\t\t\t\tclassName={className}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn cloneElement(icon, {\n\t\t...props,\n\t\tclassName: classNames({ 'tlui-icon__small': small }, className, icon.props.className),\n\t\t'aria-label': label,\n\t\tstyle: {\n\t\t\tcolor,\n\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t...icon.props.style,\n\t\t},\n\t})\n})\n\nfunction TldrawUIIconInner({\n\tlabel,\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps & { icon: TLUiIconType | Exclude<string, TLUiIconType> }) {\n\tconst assetUrls = useAssetUrls()\n\tconst asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']\n\tconst ref = useRef<HTMLDivElement>(null)\n\n\tuseLayoutEffect(() => {\n\t\tif (!asset) {\n\t\t\tconsole.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`)\n\t\t}\n\n\t\tif (ref?.current) {\n\t\t\t// HACK: Fix for <https://linear.app/tldraw/issue/TLD-1700/dragging-around-with-the-handtool-makes-lots-of-requests-for-icons>\n\t\t\t// It seems that passing `WebkitMask` to react will cause a render on each call, no idea why... but this appears to be the fix.\n\t\t\t// @ts-ignore\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`\n\t\t}\n\t}, [ref, asset, icon])\n\n\tif (icon === 'none') {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tlui-icon tlui-icon__placeholder',\n\t\t\t\t\t{ 'tlui-icon__small': small },\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\taria-label={label}\n\t\t\trole=\"img\"\n\t\t\tclassName={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}\n\t\t\tstyle={{\n\t\t\t\tcolor,\n\t\t\t\tmask: `url(${asset}) center 100% / 100% no-repeat`,\n\t\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t}}\n\t\t/>\n\t)\n}\n"],
-  "mappings": "AA+BG;AA/BH,OAAO,gBAAgB;AACvB,SAAS,cAAc,MAAoB,iBAAiB,cAAc;AAC1E,SAAS,oBAAoB;AAkBtB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkB;AACjB,MAAI,OAAO,SAAS,UAAU;AAC7B,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACL;AAAA,EAEF;AAEA,SAAO,aAAa,MAAM;AAAA,IACzB,GAAG;AAAA,IACH,WAAW,WAAW,EAAE,oBAAoB,MAAM,GAAG,WAAW,KAAK,MAAM,SAAS;AAAA,IACpF,cAAc;AAAA,IACd,OAAO;AAAA,MACN;AAAA,MACA,WAAW,aAAa,iBAAiB;AAAA,MACzC,GAAG,KAAK,MAAM;AAAA,IACf;AAAA,EACD,CAAC;AACF,CAAC;AAED,SAAS,kBAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA2E;AAC1E,QAAM,YAAY,aAAa;AAC/B,QAAM,QAAQ,UAAU,MAAM,IAAoB,KAAK,UAAU,MAAM,sBAAsB;AAC7F,QAAM,MAAM,OAAuB,IAAI;AAEvC,kBAAgB,MAAM;AACrB,QAAI,CAAC,OAAO;AACX,cAAQ,MAAM,mBAAmB,IAAI,yCAAyC;AAAA,IAC/E;AAEA,QAAI,KAAK,SAAS;AAKjB,UAAI,QAAQ,MAAM,aAAa,OAAO,KAAK;AAAA,IAC5C;AAAA,EACD,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;AAErB,MAAI,SAAS,QAAQ;AACpB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAW;AAAA,UACV;AAAA,UACA,EAAE,oBAAoB,MAAM;AAAA,UAC5B;AAAA,QACD;AAAA,QACC,GAAG;AAAA;AAAA,IACL;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAW,WAAW,aAAa,EAAE,oBAAoB,MAAM,GAAG,SAAS;AAAA,MAC3E,OAAO;AAAA,QACN;AAAA,QACA,MAAM,OAAO,KAAK;AAAA,QAClB,WAAW,aAAa,iBAAiB;AAAA,MAC1C;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport { useAssetUrls } from '../../context/asset-urls'\nimport { TLUiIconType } from '../../icon-types'\n\n/** @public */\nexport interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {\n\ticon: TLUiIconType | Exclude<string, TLUiIconType>\n\tlabel: string\n\tsmall?: boolean\n\tcolor?: string\n\tchildren?: undefined\n\tinvertIcon?: boolean\n\tcrossOrigin?: 'anonymous' | 'use-credentials'\n}\n\n/** @public @react */\nexport const TldrawUiIcon = memo(function TldrawUiIcon({\n\tlabel,\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps) {\n\tconst assetUrls = useAssetUrls()\n\tconst asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']\n\tconst ref = useRef<HTMLDivElement>(null)\n\n\tuseLayoutEffect(() => {\n\t\tif (!asset) {\n\t\t\tconsole.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`)\n\t\t}\n\n\t\tif (ref?.current) {\n\t\t\t// HACK: Fix for <https://linear.app/tldraw/issue/TLD-1700/dragging-around-with-the-handtool-makes-lots-of-requests-for-icons>\n\t\t\t// It seems that passing `WebkitMask` to react will cause a render on each call, no idea why... but this appears to be the fix.\n\t\t\t// @ts-ignore\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`\n\t\t}\n\t}, [ref, asset, icon])\n\n\tif (icon === 'none') {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tlui-icon tlui-icon__placeholder',\n\t\t\t\t\t{ 'tlui-icon__small': small },\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\taria-label={label}\n\t\t\trole=\"img\"\n\t\t\tclassName={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}\n\t\t\tstyle={{\n\t\t\t\tcolor,\n\t\t\t\tmask: `url(${asset}) center 100% / 100% no-repeat`,\n\t\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t}}\n\t\t/>\n\t)\n})\n"],
+  "mappings": "AA8CG;AA9CH,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB,cAAc;AAC9C,SAAS,oBAAoB;AAetB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkB;AACjB,QAAM,YAAY,aAAa;AAC/B,QAAM,QAAQ,UAAU,MAAM,IAAoB,KAAK,UAAU,MAAM,sBAAsB;AAC7F,QAAM,MAAM,OAAuB,IAAI;AAEvC,kBAAgB,MAAM;AACrB,QAAI,CAAC,OAAO;AACX,cAAQ,MAAM,mBAAmB,IAAI,yCAAyC;AAAA,IAC/E;AAEA,QAAI,KAAK,SAAS;AAKjB,UAAI,QAAQ,MAAM,aAAa,OAAO,KAAK;AAAA,IAC5C;AAAA,EACD,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;AAErB,MAAI,SAAS,QAAQ;AACpB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAW;AAAA,UACV;AAAA,UACA,EAAE,oBAAoB,MAAM;AAAA,UAC5B;AAAA,QACD;AAAA,QACC,GAAG;AAAA;AAAA,IACL;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAW,WAAW,aAAa,EAAE,oBAAoB,MAAM,GAAG,SAAS;AAAA,MAC3E,OAAO;AAAA,QACN;AAAA,QACA,MAAM,OAAO,KAAK;AAAA,QAClB,WAAW,aAAa,iBAAiB;AAAA,MAC1C;AAAA;AAAA,EACD;AAEF,CAAC;",
   "names": ["TldrawUiIcon"]
 }

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

@@ -10,8 +10,7 @@ const TldrawUiSlider = React.forwardRef(function Slider({
   value,
   label,
   onValueChange,
-  ["data-testid"]: testId,
-  ariaValueModifier = 1
+  ["data-testid"]: testId
 }, ref) {
   const msg = useTranslation();
   const [tabIndex, setTabIndex] = useState(-1);
@@ -52,10 +51,7 @@ const TldrawUiSlider = React.forwardRef(function Slider({
         value !== null && /* @__PURE__ */ jsx(
           _Slider.Thumb,
           {
-            "aria-valuemin": (min ?? 0) * ariaValueModifier,
-            "aria-valuenow": value * ariaValueModifier,
-            "aria-valuemax": steps * ariaValueModifier,
-            "aria-label": title + " \u2014 " + msg(label),
+            "aria-label": msg("style-panel.opacity"),
             className: "tlui-slider__thumb",
             dir: "ltr",
             ref,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSlider.tsx"],
-  "sourcesContent": ["import { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<_Slider.Root\n\t\t\t\tdata-testid={testId}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={min ?? 0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</_Slider.Track>\n\t\t\t\t{value !== null && (\n\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\taria-label={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</_Slider.Root>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAkEG,SAeqB,KAfrB;AAlEH,SAAS,UAAU,eAAe;AAClC,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,sBAAsB;AAgBxB,MAAM,iBAAiB,MAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,YAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,iBAAiB,YAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,SAAI,WAAU,0BACd;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,4BAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,oBAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY,QAAQ,aAAQ,IAAI,KAA2B;AAAA,YAC3D,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<_Slider.Root\n\t\t\t\tdata-testid={testId}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={min ?? 0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</_Slider.Track>\n\t\t\t\t{value !== null && (\n\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\taria-label={msg('style-panel.opacity')}\n\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</_Slider.Root>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "AAgEG,SAeqB,KAfrB;AAhEH,SAAS,UAAU,eAAe;AAClC,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,sBAAsB;AAexB,MAAM,iBAAiB,MAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAClB,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,YAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,iBAAiB,YAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,SAAI,WAAU,0BACd;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,4BAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,oBAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA,cAAY,IAAI,qBAAqB;AAAA,YACrC,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF,CAAC;",
   "names": ["value"]
 }

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

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { Toolbar as _Toolbar } from "radix-ui";
 import React from "react";
-import { TldrawUiTooltip } from "./TldrawUiTooltip.mjs";
 const TldrawUiToolbar = React.forwardRef(
   ({ children, className, label, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -18,8 +17,8 @@ const TldrawUiToolbar = React.forwardRef(
   }
 );
 const TldrawUiToolbarButton = React.forwardRef(
-  ({ asChild, children, type, isActive, tooltip, ...props }, ref) => {
-    const button = /* @__PURE__ */ jsx(
+  ({ asChild, children, type, isActive, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
       _Toolbar.Button,
       {
         ref,
@@ -27,13 +26,10 @@ const TldrawUiToolbarButton = React.forwardRef(
         draggable: false,
         "data-isactive": isActive,
         ...props,
-        title: void 0,
         className: classnames("tlui-button", `tlui-button__${type}`, props.className),
         children
       }
     );
-    const tooltipContent = tooltip || props.title;
-    return /* @__PURE__ */ jsx(TldrawUiTooltip, { content: tooltipContent, children: button });
   }
 );
 const TldrawUiToolbarToggleGroup = ({
@@ -47,7 +43,6 @@ const TldrawUiToolbarToggleGroup = ({
     {
       type,
       ...props,
-      role: "radiogroup",
       className: classnames("tlui-toolbar-toggle-group", className),
       children
     }
@@ -58,14 +53,12 @@ const TldrawUiToolbarToggleItem = ({
   className,
   type,
   value,
-  tooltip,
   ...props
 }) => {
-  const toggleItem = /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     _Toolbar.ToggleItem,
     {
       ...props,
-      title: void 0,
       className: classnames(
         "tlui-button",
         `tlui-button__${type}`,
@@ -76,8 +69,6 @@ const TldrawUiToolbarToggleItem = ({
       children
     }
   );
-  const tooltipContent = tooltip || props.title;
-  return /* @__PURE__ */ jsx(TldrawUiTooltip, { content: tooltipContent, children: toggleItem });
 };
 export {
   TldrawUiToolbar,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiToolbar.tsx"],
-  "sourcesContent": ["import classnames from 'classnames'\nimport { Toolbar as _Toolbar } from 'radix-ui'\nimport React from 'react'\nimport { TldrawUiTooltip } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tlabel: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t({ children, className, label, ...props }: TLUiToolbarProps, ref) => {\n\t\treturn (\n\t\t\t<_Toolbar.Root\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={classnames('tlui-toolbar-container', className)}\n\t\t\t\taria-label={label}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Root>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdisabled?: boolean\n\tisActive?: boolean\n\ttype: 'icon' | 'tool' | 'menu'\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, tooltip, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\tconst button = (\n\t\t\t<_Toolbar.Button\n\t\t\t\tref={ref}\n\t\t\t\tasChild={asChild}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-isactive={isActive}\n\t\t\t\t{...props}\n\t\t\t\t// The tooltip takes care of this.\n\t\t\t\ttitle={undefined}\n\t\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Button>\n\t\t)\n\n\t\tconst tooltipContent = tooltip || props.title\n\n\t\treturn <TldrawUiTooltip content={tooltipContent}>{button}</TldrawUiTooltip>\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tvalue: any\n\t// TODO: fix up this type later\n\tdefaultValue?: any\n\ttype: 'single' | 'multiple'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t\t// TODO: this fixes a bug in Radix until they fix it.\n\t\t\t// https://github.com/radix-ui/primitives/issues/3188\n\t\t\t// https://github.com/radix-ui/primitives/pull/3189\n\t\t\trole=\"radiogroup\"\n\t\t\tclassName={classnames('tlui-toolbar-toggle-group', className)}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleGroup>\n\t)\n}\n\n/** @public */\nexport interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\ttype: 'icon' | 'tool'\n\tvalue: string\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\ttooltip,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\tconst toggleItem = (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\n\t\t\t// The tooltip takes care of this.\n\t\t\ttitle={undefined}\n\t\t\tclassName={classnames(\n\t\t\t\t'tlui-button',\n\t\t\t\t`tlui-button__${type}`,\n\t\t\t\t'tlui-toolbar-toggle-group-item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tvalue={value}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleItem>\n\t)\n\n\tconst tooltipContent = tooltip || props.title\n\n\treturn <TldrawUiTooltip content={tooltipContent}>{toggleItem}</TldrawUiTooltip>\n}\n"],
-  "mappings": "AAiBG;AAjBH,OAAO,gBAAgB;AACvB,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAClB,SAAS,uBAAuB;AAWzB,MAAM,kBAAkB,MAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAqB,QAAQ;AACpE,WACC;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,WAAW,0BAA0B,SAAS;AAAA,QACzD,cAAY;AAAA,QAEX;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAcO,MAAM,wBAAwB,MAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,SAAS,GAAG,MAAM,GAA2B,QAAQ;AAC1F,UAAM,SACL;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QAEJ,OAAO;AAAA,QACP,WAAW,WAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAGD,UAAM,iBAAiB,WAAW,MAAM;AAExC,WAAO,oBAAC,mBAAgB,SAAS,gBAAiB,kBAAO;AAAA,EAC1D;AACD;AAcO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAIJ,MAAK;AAAA,MACL,WAAW,WAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAYO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,QAAM,aACL;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MAEJ,OAAO;AAAA,MACP,WAAW;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAGD,QAAM,iBAAiB,WAAW,MAAM;AAExC,SAAO,oBAAC,mBAAgB,SAAS,gBAAiB,sBAAW;AAC9D;",
+  "sourcesContent": ["import classnames from 'classnames'\nimport { Toolbar as _Toolbar } from 'radix-ui'\nimport React from 'react'\n\n/** @public */\nexport interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tlabel: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t({ children, className, label, ...props }: TLUiToolbarProps, ref) => {\n\t\treturn (\n\t\t\t<_Toolbar.Root\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={classnames('tlui-toolbar-container', className)}\n\t\t\t\taria-label={label}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Root>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdisabled?: boolean\n\tisActive?: boolean\n\ttype: 'icon' | 'tool' | 'menu'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\treturn (\n\t\t\t<_Toolbar.Button\n\t\t\t\tref={ref}\n\t\t\t\tasChild={asChild}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-isactive={isActive}\n\t\t\t\t{...props}\n\t\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Button>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\t// TODO: fix up this type later\n\tdefaultValue?: any\n\ttype: 'single' | 'multiple'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t\tclassName={classnames('tlui-toolbar-toggle-group', className)}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleGroup>\n\t)\n}\n\n/** @public */\nexport interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\ttype: 'icon' | 'tool'\n\tvalue: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\n\t\t\tclassName={classnames(\n\t\t\t\t'tlui-button',\n\t\t\t\t`tlui-button__${type}`,\n\t\t\t\t'tlui-toolbar-toggle-group-item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tvalue={value}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleItem>\n\t)\n}\n"],
+  "mappings": "AAgBG;AAhBH,OAAO,gBAAgB;AACvB,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAWX,MAAM,kBAAkB,MAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAqB,QAAQ;AACpE,WACC;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,WAAW,0BAA0B,SAAS;AAAA,QACzD,cAAY;AAAA,QAEX;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAaO,MAAM,wBAAwB,MAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,GAAG,MAAM,GAA2B,QAAQ;AACjF,WACC;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QACJ,WAAW,WAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAaO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,WAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAWO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;",
   "names": []
 }

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

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

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

@@ -152,6 +152,7 @@ function TldrawUiMenuItem({
             preventDefault(e);
             onSelect("toolbar");
           },
+          role: "option",
           title: titleStr,
           type: "tool",
           children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon })
@@ -170,6 +171,7 @@ function TldrawUiMenuItem({
           "data-value": id,
           disabled,
           onClick: () => onSelect("toolbar"),
+          role: "option",
           title: titleStr,
           type: "icon",
           children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx"],
-  "sourcesContent": ["import { exhaustiveSwitchError, preventDefault } from '@tldraw/editor'\nimport { ContextMenu as _ContextMenu } from 'radix-ui'\nimport { useState } from 'react'\nimport { unwrapLabel } from '../../../context/actions'\nimport { TLUiEventSource } from '../../../context/events'\nimport { useReadonly } from '../../../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../../kbd-utils'\nimport { Spinner } from '../../Spinner'\nimport { TldrawUiButton } from '../Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel'\nimport { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'\nimport { TLUiIconJsx } from '../TldrawUiIcon'\nimport { TldrawUiKbd } from '../TldrawUiKbd'\nimport { TldrawUiToolbarButton } from '../TldrawUiToolbar'\nimport { useTldrawUiMenuContext } from './TldrawUiMenuContext'\n\n/** @public */\nexport interface TLUiMenuItemProps<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n> {\n\tid: string\n\t/**\n\t * The icon to display on the item. Icons are only shown in certain menu types.\n\t */\n\ticon?: IconType | TLUiIconJsx\n\t/**\n\t * An icon to display to the left of the menu item.\n\t */\n\ticonLeft?: IconType | TLUiIconJsx\n\t/**\n\t * The keyboard shortcut to display on the item.\n\t */\n\tkbd?: string\n\t/**\n\t * The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.\n\t */\n\tlabel?: TranslationKey | { [key: string]: TranslationKey }\n\t/**\n\t * If the editor is in readonly mode and the item is not marked as readonlyok, it will not be rendered.\n\t */\n\treadonlyOk?: boolean\n\t/**\n\t * The function to call when the item is clicked.\n\t */\n\tonSelect(source: TLUiEventSource): Promise<void> | void\n\t/**\n\t * Whether this item should be disabled.\n\t */\n\tdisabled?: boolean\n\t/**\n\t * Prevent the menu from closing when the item is clicked\n\t */\n\tnoClose?: boolean\n\t/**\n\t * Whether to show a spinner on the item.\n\t */\n\tspinner?: boolean\n\t/**\n\t * Whether the item is selected.\n\t */\n\tisSelected?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiMenuItem<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n>({\n\tdisabled = false,\n\tspinner = false,\n\treadonlyOk = false,\n\tid,\n\tkbd,\n\tlabel,\n\ticon,\n\ticonLeft,\n\tonSelect,\n\tnoClose,\n\tisSelected,\n}: TLUiMenuItemProps<TranslationKey, IconType>) {\n\tconst { type: menuType, sourceId } = useTldrawUiMenuContext()\n\n\tconst msg = useTranslation()\n\n\tconst [disableClicks, setDisableClicks] = useState(false)\n\n\tconst isReadonlyMode = useReadonly()\n\tif (isReadonlyMode && !readonlyOk) return null\n\n\tconst labelToUse = unwrapLabel(label, menuType)\n\tconst kbdToUse = kbd ? kbdStr(kbd) : undefined\n\n\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\tconst titleStr = labelStr && kbdToUse ? `${labelStr} ${kbdToUse}` : labelStr\n\n\tswitch (menuType) {\n\t\tcase 'menu': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiDropdownMenuItem>\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\tif (noClose) {\n\t\t\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (disableClicks) {\n\t\t\t\t\t\t\t\tsetDisableClicks(false)\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconLeft && <TldrawUiButtonIcon icon={iconLeft} small />}\n\t\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t</TldrawUiDropdownMenuItem>\n\t\t\t)\n\t\t}\n\t\tcase 'context-menu': {\n\t\t\t// Hide disabled context menu items\n\t\t\tif (disabled) return null\n\n\t\t\treturn (\n\t\t\t\t<_ContextMenu.Item\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu\"\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tif (noClose) preventDefault(e)\n\t\t\t\t\t\tif (disableClicks) {\n\t\t\t\t\t\t\tsetDisableClicks(false)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t</span>\n\t\t\t\t\t{iconLeft && <TldrawUiButtonIcon icon={iconLeft} small />}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t\t{spinner && <Spinner />}\n\t\t\t\t</_ContextMenu.Item>\n\t\t\t)\n\t\t}\n\t\tcase 'panel': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect(sourceId)}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t\t{spinner ? <Spinner /> : icon && <TldrawUiButtonIcon icon={icon} />}\n\t\t\t\t</TldrawUiButton>\n\t\t\t)\n\t\t}\n\t\tcase 'small-icons':\n\t\tcase 'icons': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect(sourceId)}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} small />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tcase 'keyboard-shortcuts': {\n\t\t\tif (!kbd) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Menu item '${label}' isn't shown in the keyboard shortcuts dialog because it doesn't have a keyboard shortcut.`\n\t\t\t\t)\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair\" data-testid={`${sourceId}.${id}`}>\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair__key\">{labelStr}</div>\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair__value\">\n\t\t\t\t\t\t<TldrawUiKbd visibleOnMobileLayout>{kbd}</TldrawUiKbd>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\tcase 'helper-buttons': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiButton type=\"low\" onClick={() => onSelect(sourceId)}>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t</TldrawUiButton>\n\t\t\t)\n\t\t}\n\t\tcase 'toolbar': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\taria-label={labelStr}\n\t\t\t\t\taria-pressed={isSelected ? 'true' : 'false'}\n\t\t\t\t\tdata-testid={`tools.${id}`}\n\t\t\t\t\tdata-value={id}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\tonTouchStart={(e) => {\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\tonSelect('toolbar')\n\t\t\t\t\t}}\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\ttype=\"tool\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tcase 'toolbar-overflow': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\taria-label={labelStr}\n\t\t\t\t\taria-pressed={isSelected ? 'true' : 'false'}\n\t\t\t\t\tisActive={isSelected}\n\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\t\tdata-value={id}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tdefault: {\n\t\t\tthrow exhaustiveSwitchError(menuType)\n\t\t}\n\t}\n}\n"],
-  "mappings": "AAuGK,SAgBc,KAhBd;AAvGL,SAAS,uBAAuB,sBAAsB;AACtD,SAAS,eAAe,oBAAoB;AAC5C,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAE5B,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AAEzC,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AAmDhC,SAAS,iBAGd;AAAA,EACD,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAgD;AAC/C,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI,uBAAuB;AAE5D,QAAM,MAAM,eAAe;AAE3B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,iBAAiB,YAAY;AACnC,MAAI,kBAAkB,CAAC,WAAY,QAAO;AAE1C,QAAM,aAAa,YAAY,OAAO,QAAQ;AAC9C,QAAM,WAAW,MAAM,OAAO,GAAG,IAAI;AAErC,QAAM,WAAW,aAAa,IAAI,UAAgC,IAAI;AACtE,QAAM,WAAW,YAAY,WAAW,GAAG,QAAQ,IAAI,QAAQ,KAAK;AAEpE,UAAQ,UAAU;AAAA,IACjB,KAAK,QAAQ;AACZ,aACC,oBAAC,4BACA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,eAAa,GAAG,QAAQ,IAAI,EAAE;AAAA,UAC9B;AAAA,UACA,OAAO;AAAA,UACP,SAAS,CAAC,MAAM;AACf,gBAAI,SAAS;AACZ,6BAAe,CAAC;AAAA,YACjB;AACA,gBAAI,eAAe;AAClB,+BAAiB,KAAK;AAAA,YACvB,OAAO;AACN,uBAAS,QAAQ;AAAA,YAClB;AAAA,UACD;AAAA,UAEC;AAAA,wBAAY,oBAAC,sBAAmB,MAAM,UAAU,OAAK,MAAC;AAAA,YACvD,oBAAC,uBAAqB,oBAAS;AAAA,YAC9B,OAAO,oBAAC,eAAa,eAAI;AAAA;AAAA;AAAA,MAC3B,GACD;AAAA,IAEF;AAAA,IACA,KAAK,gBAAgB;AAEpB,UAAI,SAAU,QAAO;AAErB,aACC;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACA,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,WAAW;AAAA,UACX,WAAU;AAAA,UACV,eAAa,GAAG,QAAQ,IAAI,EAAE;AAAA,UAC9B,UAAU,CAAC,MAAM;AAChB,gBAAI,QAAS,gBAAe,CAAC;AAC7B,gBAAI,eAAe;AAClB,+BAAiB,KAAK;AAAA,YACvB,OAAO;AACN,uBAAS,QAAQ;AAAA,YAClB;AAAA,UACD;AAAA,UAEA;AAAA,gCAAC,UAAK,WAAU,sBAAqB,WAAW,OAC9C,oBACF;AAAA,YACC,YAAY,oBAAC,sBAAmB,MAAM,UAAU,OAAK,MAAC;AAAA,YACtD,OAAO,oBAAC,eAAa,eAAI;AAAA,YACzB,WAAW,oBAAC,WAAQ;AAAA;AAAA;AAAA,MACtB;AAAA,IAEF;AAAA,IACA,KAAK,SAAS;AACb,aACC;AAAA,QAAC;AAAA;AAAA,UACA,eAAa,GAAG,QAAQ,IAAI,EAAE;AAAA,UAC9B,MAAK;AAAA,UACL,OAAO;AAAA,UACP;AAAA,UACA,SAAS,MAAM,SAAS,QAAQ;AAAA,UAEhC;AAAA,gCAAC,uBAAqB,oBAAS;AAAA,YAC9B,UAAU,oBAAC,WAAQ,IAAK,QAAQ,oBAAC,sBAAmB,MAAY;AAAA;AAAA;AAAA,MAClE;AAAA,IAEF;AAAA,IACA,KAAK;AAAA,IACL,KAAK,SAAS;AACb,aACC;AAAA,QAAC;AAAA;AAAA,UACA,eAAa,GAAG,QAAQ,IAAI,EAAE;AAAA,UAC9B,MAAK;AAAA,UACL,OAAO;AAAA,UACP;AAAA,UACA,SAAS,MAAM,SAAS,QAAQ;AAAA,UAEhC,8BAAC,sBAAmB,MAAa,OAAK,MAAC;AAAA;AAAA,MACxC;AAAA,IAEF;AAAA,IACA,KAAK,sBAAsB;AAC1B,UAAI,CAAC,KAAK;AACT,gBAAQ;AAAA,UACP,cAAc,KAAK;AAAA,QACpB;AACA,eAAO;AAAA,MACR;AAEA,aACC,qBAAC,SAAI,WAAU,mCAAkC,eAAa,GAAG,QAAQ,IAAI,EAAE,IAC9E;AAAA,4BAAC,SAAI,WAAU,wCAAwC,oBAAS;AAAA,QAChE,oBAAC,SAAI,WAAU,0CACd,8BAAC,eAAY,uBAAqB,MAAE,eAAI,GACzC;AAAA,SACD;AAAA,IAEF;AAAA,IACA,KAAK,kBAAkB;AACtB,aACC,qBAAC,kBAAe,MAAK,OAAM,SAAS,MAAM,SAAS,QAAQ,GAC1D;AAAA,4BAAC,sBAAmB,MAAa;AAAA,QACjC,oBAAC,uBAAqB,oBAAS;AAAA,SAChC;AAAA,IAEF;AAAA,IACA,KAAK,WAAW;AACf,aACC;AAAA,QAAC;AAAA;AAAA,UACA,cAAY;AAAA,UACZ,gBAAc,aAAa,SAAS;AAAA,UACpC,eAAa,SAAS,EAAE;AAAA,UACxB,cAAY;AAAA,UACZ;AAAA,UACA,SAAS,MAAM,SAAS,SAAS;AAAA,UACjC,cAAc,CAAC,MAAM;AACpB,2BAAe,CAAC;AAChB,qBAAS,SAAS;AAAA,UACnB;AAAA,UACA,OAAO;AAAA,UACP,MAAK;AAAA,UAEL,8BAAC,sBAAmB,MAAa;AAAA;AAAA,MAClC;AAAA,IAEF;AAAA,IACA,KAAK,oBAAoB;AACxB,aACC;AAAA,QAAC;AAAA;AAAA,UACA,cAAY;AAAA,UACZ,gBAAc,aAAa,SAAS;AAAA,UACpC,UAAU;AAAA,UACV,WAAU;AAAA,UACV,eAAa,cAAc,EAAE;AAAA,UAC7B,cAAY;AAAA,UACZ;AAAA,UACA,SAAS,MAAM,SAAS,SAAS;AAAA,UACjC,OAAO;AAAA,UACP,MAAK;AAAA,UAEL,8BAAC,sBAAmB,MAAa;AAAA;AAAA,MAClC;AAAA,IAEF;AAAA,IACA,SAAS;AACR,YAAM,sBAAsB,QAAQ;AAAA,IACrC;AAAA,EACD;AACD;",
+  "sourcesContent": ["import { exhaustiveSwitchError, preventDefault } from '@tldraw/editor'\nimport { ContextMenu as _ContextMenu } from 'radix-ui'\nimport { useState } from 'react'\nimport { unwrapLabel } from '../../../context/actions'\nimport { TLUiEventSource } from '../../../context/events'\nimport { useReadonly } from '../../../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../../kbd-utils'\nimport { Spinner } from '../../Spinner'\nimport { TldrawUiButton } from '../Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel'\nimport { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'\nimport { TldrawUiKbd } from '../TldrawUiKbd'\nimport { TldrawUiToolbarButton } from '../TldrawUiToolbar'\nimport { useTldrawUiMenuContext } from './TldrawUiMenuContext'\n\n/** @public */\nexport interface TLUiMenuItemProps<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n> {\n\tid: string\n\t/**\n\t * The icon to display on the item. Icons are only shown in certain menu types.\n\t */\n\ticon?: IconType\n\t/**\n\t * An icon to display to the left of the menu item.\n\t */\n\ticonLeft?: IconType\n\t/**\n\t * The keyboard shortcut to display on the item.\n\t */\n\tkbd?: string\n\t/**\n\t * The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.\n\t */\n\tlabel?: TranslationKey | { [key: string]: TranslationKey }\n\t/**\n\t * If the editor is in readonly mode and the item is not marked as readonlyok, it will not be rendered.\n\t */\n\treadonlyOk?: boolean\n\t/**\n\t * The function to call when the item is clicked.\n\t */\n\tonSelect(source: TLUiEventSource): Promise<void> | void\n\t/**\n\t * Whether this item should be disabled.\n\t */\n\tdisabled?: boolean\n\t/**\n\t * Prevent the menu from closing when the item is clicked\n\t */\n\tnoClose?: boolean\n\t/**\n\t * Whether to show a spinner on the item.\n\t */\n\tspinner?: boolean\n\t/**\n\t * Whether the item is selected.\n\t */\n\tisSelected?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiMenuItem<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n>({\n\tdisabled = false,\n\tspinner = false,\n\treadonlyOk = false,\n\tid,\n\tkbd,\n\tlabel,\n\ticon,\n\ticonLeft,\n\tonSelect,\n\tnoClose,\n\tisSelected,\n}: TLUiMenuItemProps<TranslationKey, IconType>) {\n\tconst { type: menuType, sourceId } = useTldrawUiMenuContext()\n\n\tconst msg = useTranslation()\n\n\tconst [disableClicks, setDisableClicks] = useState(false)\n\n\tconst isReadonlyMode = useReadonly()\n\tif (isReadonlyMode && !readonlyOk) return null\n\n\tconst labelToUse = unwrapLabel(label, menuType)\n\tconst kbdToUse = kbd ? kbdStr(kbd) : undefined\n\n\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\tconst titleStr = labelStr && kbdToUse ? `${labelStr} ${kbdToUse}` : labelStr\n\n\tswitch (menuType) {\n\t\tcase 'menu': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiDropdownMenuItem>\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\tif (noClose) {\n\t\t\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (disableClicks) {\n\t\t\t\t\t\t\t\tsetDisableClicks(false)\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconLeft && <TldrawUiButtonIcon icon={iconLeft} small />}\n\t\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t</TldrawUiDropdownMenuItem>\n\t\t\t)\n\t\t}\n\t\tcase 'context-menu': {\n\t\t\t// Hide disabled context menu items\n\t\t\tif (disabled) return null\n\n\t\t\treturn (\n\t\t\t\t<_ContextMenu.Item\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu\"\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tif (noClose) preventDefault(e)\n\t\t\t\t\t\tif (disableClicks) {\n\t\t\t\t\t\t\tsetDisableClicks(false)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t</span>\n\t\t\t\t\t{iconLeft && <TldrawUiButtonIcon icon={iconLeft} small />}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t\t{spinner && <Spinner />}\n\t\t\t\t</_ContextMenu.Item>\n\t\t\t)\n\t\t}\n\t\tcase 'panel': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect(sourceId)}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t\t{spinner ? <Spinner /> : icon && <TldrawUiButtonIcon icon={icon} />}\n\t\t\t\t</TldrawUiButton>\n\t\t\t)\n\t\t}\n\t\tcase 'small-icons':\n\t\tcase 'icons': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect(sourceId)}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} small />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tcase 'keyboard-shortcuts': {\n\t\t\tif (!kbd) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Menu item '${label}' isn't shown in the keyboard shortcuts dialog because it doesn't have a keyboard shortcut.`\n\t\t\t\t)\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair\" data-testid={`${sourceId}.${id}`}>\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair__key\">{labelStr}</div>\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair__value\">\n\t\t\t\t\t\t<TldrawUiKbd visibleOnMobileLayout>{kbd}</TldrawUiKbd>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\tcase 'helper-buttons': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiButton type=\"low\" onClick={() => onSelect(sourceId)}>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t</TldrawUiButton>\n\t\t\t)\n\t\t}\n\t\tcase 'toolbar': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\taria-label={labelStr}\n\t\t\t\t\taria-pressed={isSelected ? 'true' : 'false'}\n\t\t\t\t\tdata-testid={`tools.${id}`}\n\t\t\t\t\tdata-value={id}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\tonTouchStart={(e) => {\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\tonSelect('toolbar')\n\t\t\t\t\t}}\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\ttype=\"tool\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tcase 'toolbar-overflow': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\taria-label={labelStr}\n\t\t\t\t\taria-pressed={isSelected ? 'true' : 'false'}\n\t\t\t\t\tisActive={isSelected}\n\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\t\tdata-value={id}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tdefault: {\n\t\t\tthrow exhaustiveSwitchError(menuType)\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { defaultUserPreferences, track, useMaybeEditor } from "@tldraw/editor";
 import { useDefaultUiAssetUrlsWithOverrides } from "../assetUrls.mjs";
-import { TldrawUiTooltipProvider } from "../components/primitives/TldrawUiTooltip.mjs";
 import { ToolsProvider } from "../hooks/useTools.mjs";
 import { TldrawUiTranslationProvider } from "../hooks/useTranslation/useTranslation.mjs";
 import {
@@ -27,14 +26,14 @@ const TldrawUiContextProvider = track(function TldrawUiContextProvider2({
   children
 }) {
   const editor = useMaybeEditor();
-  return /* @__PURE__ */ jsx(MimeTypeContext.Provider, { value: mediaMimeTypes, children: /* @__PURE__ */ jsx(TldrawUiTooltipProvider, { children: /* @__PURE__ */ jsx(AssetUrlsProvider, { assetUrls: useDefaultUiAssetUrlsWithOverrides(assetUrls), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(MimeTypeContext.Provider, { value: mediaMimeTypes, children: /* @__PURE__ */ jsx(AssetUrlsProvider, { assetUrls: useDefaultUiAssetUrlsWithOverrides(assetUrls), children: /* @__PURE__ */ jsx(
     TldrawUiTranslationProvider,
     {
       overrides: useMergedTranslationOverrides(overrides),
       locale: editor?.user.getLocale() ?? defaultUserPreferences.locale,
       children: /* @__PURE__ */ jsx(TldrawUiEventsProvider, { onEvent: onUiEvent, children: /* @__PURE__ */ jsx(TldrawUiToastsProvider, { children: /* @__PURE__ */ jsx(TldrawUiDialogsProvider, { context: "tla", children: /* @__PURE__ */ jsx(TldrawUiA11yProvider, { children: /* @__PURE__ */ jsx(BreakPointProvider, { forceMobile, children: /* @__PURE__ */ jsx(TldrawUiComponentsProvider, { overrides: components, children: /* @__PURE__ */ jsx(InternalProviders, { overrides, children }) }) }) }) }) }) })
     }
-  ) }) }) });
+  ) }) });
 });
 function InternalProviders({
   overrides,

package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/context/TldrawUiContextProvider.tsx"],
-  "sourcesContent": ["import { RecursivePartial, defaultUserPreferences, track, useMaybeEditor } from '@tldraw/editor'\nimport { ReactNode } from 'react'\nimport { TLUiAssetUrls, useDefaultUiAssetUrlsWithOverrides } from '../assetUrls'\nimport { TldrawUiTooltipProvider } from '../components/primitives/TldrawUiTooltip'\nimport { ToolsProvider } from '../hooks/useTools'\nimport { TldrawUiTranslationProvider } from '../hooks/useTranslation/useTranslation'\nimport {\n\tMimeTypeContext,\n\tTLUiOverrides,\n\tuseMergedOverrides,\n\tuseMergedTranslationOverrides,\n} from '../overrides'\nimport { TldrawUiA11yProvider } from './a11y'\nimport { ActionsProvider } from './actions'\nimport { AssetUrlsProvider } from './asset-urls'\nimport { BreakPointProvider } from './breakpoints'\nimport { TLUiComponents, TldrawUiComponentsProvider } from './components'\nimport { TldrawUiDialogsProvider } from './dialogs'\nimport { TLUiEventHandler, TldrawUiEventsProvider } from './events'\nimport { TldrawUiToastsProvider } from './toasts'\n\n/** @public */\nexport interface TLUiContextProviderProps {\n\t/**\n\t * Urls for where to find fonts and other assets for the UI.\n\t */\n\tassetUrls?: RecursivePartial<TLUiAssetUrls>\n\n\t/**\n\t * Overrides for the UI.\n\t */\n\toverrides?: TLUiOverrides | TLUiOverrides[]\n\n\t/**\n\t * Overrides for the UI components.\n\t */\n\tcomponents?: TLUiComponents\n\n\t/**\n\t * Callback for when an event occurs in the UI.\n\t */\n\tonUiEvent?: TLUiEventHandler\n\n\t/**\n\t * Whether to always should the mobile breakpoints.\n\t */\n\tforceMobile?: boolean\n\n\t/**\n\t * The component's children.\n\t */\n\tchildren?: ReactNode\n\n\t/**\n\t * Supported mime types for media files.\n\t */\n\tmediaMimeTypes?: string[]\n}\n\n/** @public @react */\nexport const TldrawUiContextProvider = track(function TldrawUiContextProvider({\n\toverrides,\n\tcomponents,\n\tassetUrls,\n\tonUiEvent,\n\tforceMobile,\n\tmediaMimeTypes,\n\tchildren,\n}: TLUiContextProviderProps) {\n\t// To allow mounting the sidebar without an editor running, we use a 'maybe' editor here\n\t// The sidebar makes use of toasts and dialogs etc, which typically require an editor to be present\n\t// but we are overriding the providers to allow them to be used without an editor.\n\tconst editor = useMaybeEditor()\n\treturn (\n\t\t<MimeTypeContext.Provider value={mediaMimeTypes}>\n\t\t\t<TldrawUiTooltipProvider>\n\t\t\t\t<AssetUrlsProvider assetUrls={useDefaultUiAssetUrlsWithOverrides(assetUrls)}>\n\t\t\t\t\t<TldrawUiTranslationProvider\n\t\t\t\t\t\toverrides={useMergedTranslationOverrides(overrides)}\n\t\t\t\t\t\tlocale={editor?.user.getLocale() ?? defaultUserPreferences.locale}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TldrawUiEventsProvider onEvent={onUiEvent}>\n\t\t\t\t\t\t\t<TldrawUiToastsProvider>\n\t\t\t\t\t\t\t\t<TldrawUiDialogsProvider context={'tla'}>\n\t\t\t\t\t\t\t\t\t<TldrawUiA11yProvider>\n\t\t\t\t\t\t\t\t\t\t<BreakPointProvider forceMobile={forceMobile}>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiComponentsProvider overrides={components}>\n\t\t\t\t\t\t\t\t\t\t\t\t<InternalProviders overrides={overrides}>{children}</InternalProviders>\n\t\t\t\t\t\t\t\t\t\t\t</TldrawUiComponentsProvider>\n\t\t\t\t\t\t\t\t\t\t</BreakPointProvider>\n\t\t\t\t\t\t\t\t\t</TldrawUiA11yProvider>\n\t\t\t\t\t\t\t\t</TldrawUiDialogsProvider>\n\t\t\t\t\t\t\t</TldrawUiToastsProvider>\n\t\t\t\t\t\t</TldrawUiEventsProvider>\n\t\t\t\t\t</TldrawUiTranslationProvider>\n\t\t\t\t</AssetUrlsProvider>\n\t\t\t</TldrawUiTooltipProvider>\n\t\t</MimeTypeContext.Provider>\n\t)\n})\n\nfunction InternalProviders({\n\toverrides,\n\tchildren,\n}: Omit<TLUiContextProviderProps, 'assetBaseUrl'>) {\n\tconst mergedOverrides = useMergedOverrides(overrides)\n\treturn (\n\t\t<ActionsProvider overrides={mergedOverrides.actions}>\n\t\t\t<ToolsProvider overrides={mergedOverrides.tools}>{children}</ToolsProvider>\n\t\t</ActionsProvider>\n\t)\n}\n"],
-  "mappings": "AAuFY;AAvFZ,SAA2B,wBAAwB,OAAO,sBAAsB;AAEhF,SAAwB,0CAA0C;AAClE,SAAS,+BAA+B;AACxC,SAAS,qBAAqB;AAC9B,SAAS,mCAAmC;AAC5C;AAAA,EACC;AAAA,EAEA;AAAA,EACA;AAAA,OACM;AACP,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAyB,kCAAkC;AAC3D,SAAS,+BAA+B;AACxC,SAA2B,8BAA8B;AACzD,SAAS,8BAA8B;AAyChC,MAAM,0BAA0B,MAAM,SAASA,yBAAwB;AAAA,EAC7E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA6B;AAI5B,QAAM,SAAS,eAAe;AAC9B,SACC,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,gBAChC,8BAAC,2BACA,8BAAC,qBAAkB,WAAW,mCAAmC,SAAS,GACzE;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,8BAA8B,SAAS;AAAA,MAClD,QAAQ,QAAQ,KAAK,UAAU,KAAK,uBAAuB;AAAA,MAE3D,8BAAC,0BAAuB,SAAS,WAChC,8BAAC,0BACA,8BAAC,2BAAwB,SAAS,OACjC,8BAAC,wBACA,8BAAC,sBAAmB,aACnB,8BAAC,8BAA2B,WAAW,YACtC,8BAAC,qBAAkB,WAAuB,UAAS,GACpD,GACD,GACD,GACD,GACD,GACD;AAAA;AAAA,EACD,GACD,GACD,GACD;AAEF,CAAC;AAED,SAAS,kBAAkB;AAAA,EAC1B;AAAA,EACA;AACD,GAAmD;AAClD,QAAM,kBAAkB,mBAAmB,SAAS;AACpD,SACC,oBAAC,mBAAgB,WAAW,gBAAgB,SAC3C,8BAAC,iBAAc,WAAW,gBAAgB,OAAQ,UAAS,GAC5D;AAEF;",
+  "sourcesContent": ["import { RecursivePartial, defaultUserPreferences, track, useMaybeEditor } from '@tldraw/editor'\nimport { ReactNode } from 'react'\nimport { TLUiAssetUrls, useDefaultUiAssetUrlsWithOverrides } from '../assetUrls'\nimport { ToolsProvider } from '../hooks/useTools'\nimport { TldrawUiTranslationProvider } from '../hooks/useTranslation/useTranslation'\nimport {\n\tMimeTypeContext,\n\tTLUiOverrides,\n\tuseMergedOverrides,\n\tuseMergedTranslationOverrides,\n} from '../overrides'\nimport { TldrawUiA11yProvider } from './a11y'\nimport { ActionsProvider } from './actions'\nimport { AssetUrlsProvider } from './asset-urls'\nimport { BreakPointProvider } from './breakpoints'\nimport { TLUiComponents, TldrawUiComponentsProvider } from './components'\nimport { TldrawUiDialogsProvider } from './dialogs'\nimport { TLUiEventHandler, TldrawUiEventsProvider } from './events'\nimport { TldrawUiToastsProvider } from './toasts'\n\n/** @public */\nexport interface TLUiContextProviderProps {\n\t/**\n\t * Urls for where to find fonts and other assets for the UI.\n\t */\n\tassetUrls?: RecursivePartial<TLUiAssetUrls>\n\n\t/**\n\t * Overrides for the UI.\n\t */\n\toverrides?: TLUiOverrides | TLUiOverrides[]\n\n\t/**\n\t * Overrides for the UI components.\n\t */\n\tcomponents?: TLUiComponents\n\n\t/**\n\t * Callback for when an event occurs in the UI.\n\t */\n\tonUiEvent?: TLUiEventHandler\n\n\t/**\n\t * Whether to always should the mobile breakpoints.\n\t */\n\tforceMobile?: boolean\n\n\t/**\n\t * The component's children.\n\t */\n\tchildren?: ReactNode\n\n\t/**\n\t * Supported mime types for media files.\n\t */\n\tmediaMimeTypes?: string[]\n}\n\n/** @public @react */\nexport const TldrawUiContextProvider = track(function TldrawUiContextProvider({\n\toverrides,\n\tcomponents,\n\tassetUrls,\n\tonUiEvent,\n\tforceMobile,\n\tmediaMimeTypes,\n\tchildren,\n}: TLUiContextProviderProps) {\n\t// To allow mounting the sidebar without an editor running, we use a 'maybe' editor here\n\t// The sidebar makes use of toasts and dialogs etc, which typically require an editor to be present\n\t// but we are overriding the providers to allow them to be used without an editor.\n\tconst editor = useMaybeEditor()\n\treturn (\n\t\t<MimeTypeContext.Provider value={mediaMimeTypes}>\n\t\t\t<AssetUrlsProvider assetUrls={useDefaultUiAssetUrlsWithOverrides(assetUrls)}>\n\t\t\t\t<TldrawUiTranslationProvider\n\t\t\t\t\toverrides={useMergedTranslationOverrides(overrides)}\n\t\t\t\t\tlocale={editor?.user.getLocale() ?? defaultUserPreferences.locale}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiEventsProvider onEvent={onUiEvent}>\n\t\t\t\t\t\t<TldrawUiToastsProvider>\n\t\t\t\t\t\t\t<TldrawUiDialogsProvider context={'tla'}>\n\t\t\t\t\t\t\t\t<TldrawUiA11yProvider>\n\t\t\t\t\t\t\t\t\t<BreakPointProvider forceMobile={forceMobile}>\n\t\t\t\t\t\t\t\t\t\t<TldrawUiComponentsProvider overrides={components}>\n\t\t\t\t\t\t\t\t\t\t\t<InternalProviders overrides={overrides}>{children}</InternalProviders>\n\t\t\t\t\t\t\t\t\t\t</TldrawUiComponentsProvider>\n\t\t\t\t\t\t\t\t\t</BreakPointProvider>\n\t\t\t\t\t\t\t\t</TldrawUiA11yProvider>\n\t\t\t\t\t\t\t</TldrawUiDialogsProvider>\n\t\t\t\t\t\t</TldrawUiToastsProvider>\n\t\t\t\t\t</TldrawUiEventsProvider>\n\t\t\t\t</TldrawUiTranslationProvider>\n\t\t\t</AssetUrlsProvider>\n\t\t</MimeTypeContext.Provider>\n\t)\n})\n\nfunction InternalProviders({\n\toverrides,\n\tchildren,\n}: Omit<TLUiContextProviderProps, 'assetBaseUrl'>) {\n\tconst mergedOverrides = useMergedOverrides(overrides)\n\treturn (\n\t\t<ActionsProvider overrides={mergedOverrides.actions}>\n\t\t\t<ToolsProvider overrides={mergedOverrides.tools}>{children}</ToolsProvider>\n\t\t</ActionsProvider>\n\t)\n}\n"],
+  "mappings": "AAqFW;AArFX,SAA2B,wBAAwB,OAAO,sBAAsB;AAEhF,SAAwB,0CAA0C;AAClE,SAAS,qBAAqB;AAC9B,SAAS,mCAAmC;AAC5C;AAAA,EACC;AAAA,EAEA;AAAA,EACA;AAAA,OACM;AACP,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAyB,kCAAkC;AAC3D,SAAS,+BAA+B;AACxC,SAA2B,8BAA8B;AACzD,SAAS,8BAA8B;AAyChC,MAAM,0BAA0B,MAAM,SAASA,yBAAwB;AAAA,EAC7E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA6B;AAI5B,QAAM,SAAS,eAAe;AAC9B,SACC,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,gBAChC,8BAAC,qBAAkB,WAAW,mCAAmC,SAAS,GACzE;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,8BAA8B,SAAS;AAAA,MAClD,QAAQ,QAAQ,KAAK,UAAU,KAAK,uBAAuB;AAAA,MAE3D,8BAAC,0BAAuB,SAAS,WAChC,8BAAC,0BACA,8BAAC,2BAAwB,SAAS,OACjC,8BAAC,wBACA,8BAAC,sBAAmB,aACnB,8BAAC,8BAA2B,WAAW,YACtC,8BAAC,qBAAkB,WAAuB,UAAS,GACpD,GACD,GACD,GACD,GACD,GACD;AAAA;AAAA,EACD,GACD,GACD;AAEF,CAAC;AAED,SAAS,kBAAkB;AAAA,EAC1B;AAAA,EACA;AACD,GAAmD;AAClD,QAAM,kBAAkB,mBAAmB,SAAS;AACpD,SACC,oBAAC,mBAAgB,WAAW,gBAAgB,SAC3C,8BAAC,iBAAc,WAAW,gBAAgB,OAAQ,UAAS,GAC5D;AAEF;",
   "names": ["TldrawUiContextProvider"]
 }

package/dist-esm/lib/ui/context/actions.mjs

@@ -18,7 +18,6 @@ import { fitFrameToContent, removeFrame } from "../../utils/frames/frames.mjs";
 import { generateShapeAnnouncementMessage } from "../components/A11y.mjs";
 import { EditLinkDialog } from "../components/EditLinkDialog.mjs";
 import { EmbedDialog } from "../components/EmbedDialog.mjs";
-import { DefaultKeyboardShortcutsDialog } from "../components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.mjs";
 import { useShowCollaborationUi } from "../hooks/useCollaborationStatus.mjs";
 import { flattenShapesToImages } from "../hooks/useFlatten.mjs";
 import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
@@ -98,15 +97,6 @@ function ActionsProvider({ overrides, children }) {
           helpers.addDialog({ component: EmbedDialog });
         }
       },
-      {
-        id: "open-kbd-shortcuts",
-        label: "action.open-kbd-shortcuts",
-        kbd: "cmd+alt+/,ctrl+alt+/",
-        onSelect(source) {
-          trackEvent("open-kbd-shortcuts", { source });
-          helpers.addDialog({ component: DefaultKeyboardShortcutsDialog });
-        }
-      },
       {
         id: "insert-media",
         label: "action.insert-media",
@@ -412,6 +402,7 @@ function ActionsProvider({ overrides, children }) {
               y: 0
             };
           }
+          if (!editor.canCreateShapes(ids)) return;
           editor.markHistoryStoppingPoint("duplicate shapes");
           editor.duplicateShapes(ids, offset);
           if (instanceState.duplicateProps) {
@@ -898,19 +889,16 @@ function ActionsProvider({ overrides, children }) {
         id: "rotate-cw",
         label: "action.rotate-cw",
         icon: "rotate-cw",
-        kbd: "shift+.,shift+alt+.",
         onSelect(source) {
           if (!canApplySelectionAction()) return;
           if (mustGoBackToSelectToolFirst()) return;
-          const isFine = editor.inputs.altKey;
-          trackEvent("rotate-cw", { source, fine: isFine });
+          trackEvent("rotate-cw", { source });
           editor.markHistoryStoppingPoint("rotate-cw");
           editor.run(() => {
-            const rotation = HALF_PI / (isFine ? 96 : 6);
-            const offset = editor.getSelectionRotation() % rotation;
-            const dontUseOffset = approximately(offset, 0) || approximately(offset, rotation);
+            const offset = editor.getSelectionRotation() % (HALF_PI / 2);
+            const dontUseOffset = approximately(offset, 0) || approximately(offset, HALF_PI / 2);
             const selectedShapeIds = editor.getSelectedShapeIds();
-            editor.rotateShapesBy(selectedShapeIds, rotation - (dontUseOffset ? 0 : offset));
+            editor.rotateShapesBy(selectedShapeIds, HALF_PI / 2 - (dontUseOffset ? 0 : offset));
             kickoutOccludedShapes(editor, selectedShapeIds);
           });
         }
@@ -919,20 +907,16 @@ function ActionsProvider({ overrides, children }) {
         id: "rotate-ccw",
         label: "action.rotate-ccw",
         icon: "rotate-ccw",
-        // omg double comma
-        kbd: "shift+,,shift+alt+,",
         onSelect(source) {
           if (!canApplySelectionAction()) return;
           if (mustGoBackToSelectToolFirst()) return;
-          const isFine = editor.inputs.altKey;
-          trackEvent("rotate-ccw", { source, fine: isFine });
+          trackEvent("rotate-ccw", { source });
           editor.markHistoryStoppingPoint("rotate-ccw");
           editor.run(() => {
-            const rotation = HALF_PI / (isFine ? 96 : 6);
-            const offset = editor.getSelectionRotation() % rotation;
+            const offset = editor.getSelectionRotation() % (HALF_PI / 2);
             const offsetCloseToZero = approximately(offset, 0);
             const selectedShapeIds = editor.getSelectedShapeIds();
-            editor.rotateShapesBy(selectedShapeIds, offsetCloseToZero ? -rotation : -offset);
+            editor.rotateShapesBy(selectedShapeIds, offsetCloseToZero ? -(HALF_PI / 2) : -offset);
             kickoutOccludedShapes(editor, selectedShapeIds);
           });
         }
@@ -1109,36 +1093,6 @@ function ActionsProvider({ overrides, children }) {
         },
         checkbox: true
       },
-      {
-        id: "toggle-keyboard-shortcuts",
-        label: {
-          default: "action.toggle-keyboard-shortcuts",
-          menu: "action.toggle-keyboard-shortcuts.menu"
-        },
-        readonlyOk: true,
-        onSelect(source) {
-          trackEvent("toggle-keyboard-shortcuts", { source });
-          editor.user.updateUserPreferences({
-            areKeyboardShortcutsEnabled: !editor.user.getAreKeyboardShortcutsEnabled()
-          });
-        },
-        checkbox: true
-      },
-      {
-        id: "toggle-ui-labels",
-        label: {
-          default: "action.toggle-ui-labels",
-          menu: "action.toggle-ui-labels.menu"
-        },
-        readonlyOk: true,
-        onSelect(source) {
-          trackEvent("toggle-ui-labels", { source });
-          editor.user.updateUserPreferences({
-            showUiLabels: !editor.user.getShowUiLabels()
-          });
-        },
-        checkbox: true
-      },
       {
         id: "toggle-edge-scrolling",
         label: {
@@ -1422,7 +1376,6 @@ function ActionsProvider({ overrides, children }) {
         id: "adjust-shape-styles",
         label: "a11y.adjust-shape-styles",
         kbd: "cmd+Enter,ctrl+Enter",
-        isRequiredA11yAction: true,
         onSelect: async (source) => {
           if (!canApplySelectionAction()) return;
           const firstButton = editor.getContainer().querySelector(".tlui-style-panel button");
@@ -1433,7 +1386,6 @@ function ActionsProvider({ overrides, children }) {
       {
         id: "a11y-open-context-menu",
         kbd: "cmd+shift+Enter,ctrl+shift+Enter",
-        isRequiredA11yAction: true,
         readonlyOk: true,
         onSelect: async (source) => {
           if (!canApplySelectionAction()) return;
@@ -1474,7 +1426,6 @@ function ActionsProvider({ overrides, children }) {
         id: "a11y-repeat-shape-announce",
         kbd: "alt+r",
         label: "a11y.repeat-shape",
-        isRequiredA11yAction: true,
         readonlyOk: true,
         onSelect: async (source) => {
           const selectedShapeIds = editor.getSelectedShapeIds();