tldraw 3.16.0-next.df90ce0ff566 → 3.16.0-next.eafb52d15064

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

@@ -30,6 +30,9 @@ import { TldrawUiSlider } from "../primitives/TldrawUiSlider.mjs";
 import { TldrawUiToolbar, TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
 import { DoubleDropdownPicker } from "./DoubleDropdownPicker.mjs";
 import { DropdownPicker } from "./DropdownPicker.mjs";
+function StylePanelSubheading({ children }) {
+  return /* @__PURE__ */ jsx("h3", { className: "tlui-style-panel__subheading", children });
+}
 function DefaultStylePanelContent({ styles }) {
   const isDarkMode = useIsDarkMode();
   if (!styles) return null;
@@ -77,6 +80,7 @@ function CommonStylePickerSet({ styles, theme }) {
   const msg = useTranslation();
   const editor = useEditor();
   const onHistoryMark = useCallback((id) => editor.markHistoryStoppingPoint(id), [editor]);
+  const showUiLabels = useValue("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
   const handleValueChange = useStyleChangeCallback();
   const color = styles.get(DefaultColorStyle);
   const fill = styles.get(DefaultFillStyle);
@@ -85,67 +89,79 @@ function CommonStylePickerSet({ styles, theme }) {
   const showPickers = fill !== void 0 || dash !== void 0 || size !== void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__section__common", "data-testid": "style.panel", children: [
-      color === void 0 ? null : /* @__PURE__ */ jsx(TldrawUiToolbar, { label: msg("style-panel.color"), children: /* @__PURE__ */ jsx(
-        TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.color"),
-          uiType: "color",
-          style: DefaultColorStyle,
-          items: STYLES.color,
-          value: color,
-          onValueChange: handleValueChange,
-          theme,
-          onHistoryMark
-        }
-      ) }),
+      color === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        showUiLabels && /* @__PURE__ */ jsx(StylePanelSubheading, { children: msg("style-panel.color") }),
+        /* @__PURE__ */ jsx(TldrawUiToolbar, { label: msg("style-panel.color"), children: /* @__PURE__ */ jsx(
+          TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.color"),
+            uiType: "color",
+            style: DefaultColorStyle,
+            items: STYLES.color,
+            value: color,
+            onValueChange: handleValueChange,
+            theme,
+            onHistoryMark
+          }
+        ) })
+      ] }),
       /* @__PURE__ */ jsx(OpacitySlider, {})
     ] }),
     showPickers && /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__section", children: [
-      fill === void 0 ? null : /* @__PURE__ */ jsx(TldrawUiToolbar, { label: msg("style-panel.fill"), children: /* @__PURE__ */ jsx(
-        TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.fill"),
-          uiType: "fill",
-          style: DefaultFillStyle,
-          items: STYLES.fill,
-          value: fill,
-          onValueChange: handleValueChange,
-          theme,
-          onHistoryMark
-        }
-      ) }),
-      dash === void 0 ? null : /* @__PURE__ */ jsx(TldrawUiToolbar, { label: msg("style-panel.dash"), children: /* @__PURE__ */ jsx(
-        TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.dash"),
-          uiType: "dash",
-          style: DefaultDashStyle,
-          items: STYLES.dash,
-          value: dash,
-          onValueChange: handleValueChange,
-          theme,
-          onHistoryMark
-        }
-      ) }),
-      size === void 0 ? null : /* @__PURE__ */ jsx(TldrawUiToolbar, { label: msg("style-panel.size"), children: /* @__PURE__ */ jsx(
-        TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.size"),
-          uiType: "size",
-          style: DefaultSizeStyle,
-          items: STYLES.size,
-          value: size,
-          onValueChange: (style, value) => {
-            handleValueChange(style, value);
-            const selectedShapeIds = editor.getSelectedShapeIds();
-            if (selectedShapeIds.length > 0) {
-              kickoutOccludedShapes(editor, selectedShapeIds);
-            }
-          },
-          theme,
-          onHistoryMark
-        }
-      ) })
+      fill === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        showUiLabels && /* @__PURE__ */ jsx(StylePanelSubheading, { children: msg("style-panel.fill") }),
+        /* @__PURE__ */ jsx(TldrawUiToolbar, { label: msg("style-panel.fill"), children: /* @__PURE__ */ jsx(
+          TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.fill"),
+            uiType: "fill",
+            style: DefaultFillStyle,
+            items: STYLES.fill,
+            value: fill,
+            onValueChange: handleValueChange,
+            theme,
+            onHistoryMark
+          }
+        ) })
+      ] }),
+      dash === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        showUiLabels && /* @__PURE__ */ jsx(StylePanelSubheading, { children: msg("style-panel.dash") }),
+        /* @__PURE__ */ jsx(TldrawUiToolbar, { label: msg("style-panel.dash"), children: /* @__PURE__ */ jsx(
+          TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.dash"),
+            uiType: "dash",
+            style: DefaultDashStyle,
+            items: STYLES.dash,
+            value: dash,
+            onValueChange: handleValueChange,
+            theme,
+            onHistoryMark
+          }
+        ) })
+      ] }),
+      size === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        showUiLabels && /* @__PURE__ */ jsx(StylePanelSubheading, { children: msg("style-panel.size") }),
+        /* @__PURE__ */ jsx(TldrawUiToolbar, { label: msg("style-panel.size"), children: /* @__PURE__ */ jsx(
+          TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.size"),
+            uiType: "size",
+            style: DefaultSizeStyle,
+            items: STYLES.size,
+            value: size,
+            onValueChange: (style, value) => {
+              handleValueChange(style, value);
+              const selectedShapeIds = editor.getSelectedShapeIds();
+              if (selectedShapeIds.length > 0) {
+                kickoutOccludedShapes(editor, selectedShapeIds);
+              }
+            },
+            theme,
+            onHistoryMark
+          }
+        ) })
+      ] })
     ] })
   ] });
 }
@@ -154,6 +170,8 @@ function TextStylePickerSet({ theme, styles }) {
   const handleValueChange = useStyleChangeCallback();
   const editor = useEditor();
   const onHistoryMark = useCallback((id) => editor.markHistoryStoppingPoint(id), [editor]);
+  const showUiLabels = useValue("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
+  const labelStr = showUiLabels && msg("style-panel.font");
   const font = styles.get(DefaultFontStyle);
   const textAlign = styles.get(DefaultTextAlignStyle);
   const labelAlign = styles.get(DefaultHorizontalAlignStyle);
@@ -162,80 +180,89 @@ function TextStylePickerSet({ theme, styles }) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__section", children: [
-    font === void 0 ? null : /* @__PURE__ */ jsx(TldrawUiToolbar, { label: msg("style-panel.font"), children: /* @__PURE__ */ jsx(
-      TldrawUiButtonPicker,
-      {
-        title: msg("style-panel.font"),
-        uiType: "font",
-        style: DefaultFontStyle,
-        items: STYLES.font,
-        value: font,
-        onValueChange: handleValueChange,
-        theme,
-        onHistoryMark
-      }
-    ) }),
-    textAlign === void 0 ? null : /* @__PURE__ */ jsxs(TldrawUiToolbar, { label: msg("style-panel.align"), className: "tlui-style-panel__row", children: [
-      /* @__PURE__ */ jsx(
+    font === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      labelStr && /* @__PURE__ */ jsx(StylePanelSubheading, { children: labelStr }),
+      /* @__PURE__ */ jsx(TldrawUiToolbar, { label: msg("style-panel.font"), children: /* @__PURE__ */ jsx(
         TldrawUiButtonPicker,
         {
-          title: msg("style-panel.align"),
-          uiType: "align",
-          style: DefaultTextAlignStyle,
-          items: STYLES.textAlign,
-          value: textAlign,
+          title: msg("style-panel.font"),
+          uiType: "font",
+          style: DefaultFontStyle,
+          items: STYLES.font,
+          value: font,
           onValueChange: handleValueChange,
           theme,
           onHistoryMark
         }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "tlui-style-panel__row__extra-button", children: /* @__PURE__ */ jsx(
-        TldrawUiToolbarButton,
-        {
-          type: "icon",
-          title: msg("style-panel.vertical-align"),
-          "data-testid": "vertical-align",
-          disabled: true,
-          children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "vertical-align-middle" })
-        }
       ) })
     ] }),
-    labelAlign === void 0 ? null : /* @__PURE__ */ jsxs(TldrawUiToolbar, { label: msg("style-panel.label-align"), className: "tlui-style-panel__row", children: [
-      /* @__PURE__ */ jsx(
-        TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.label-align"),
-          uiType: "align",
-          style: DefaultHorizontalAlignStyle,
-          items: STYLES.horizontalAlign,
-          value: labelAlign,
-          onValueChange: handleValueChange,
-          theme,
-          onHistoryMark
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "tlui-style-panel__row__extra-button", children: verticalLabelAlign === void 0 ? /* @__PURE__ */ jsx(
-        TldrawUiToolbarButton,
-        {
-          type: "icon",
-          title: msg("style-panel.vertical-align"),
-          "data-testid": "vertical-align",
-          disabled: true,
-          children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "vertical-align-middle" })
-        }
-      ) : /* @__PURE__ */ jsx(
-        DropdownPicker,
-        {
-          type: "icon",
-          id: "geo-vertical-alignment",
-          uiType: "verticalAlign",
-          stylePanelType: "vertical-align",
-          style: DefaultVerticalAlignStyle,
-          items: STYLES.verticalAlign,
-          value: verticalLabelAlign,
-          onValueChange: handleValueChange
-        }
-      ) })
+    textAlign === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      showUiLabels && /* @__PURE__ */ jsx(StylePanelSubheading, { children: msg("style-panel.align") }),
+      /* @__PURE__ */ jsxs(TldrawUiToolbar, { label: msg("style-panel.align"), className: "tlui-style-panel__row", children: [
+        /* @__PURE__ */ jsx(
+          TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.align"),
+            uiType: "align",
+            style: DefaultTextAlignStyle,
+            items: STYLES.textAlign,
+            value: textAlign,
+            onValueChange: handleValueChange,
+            theme,
+            onHistoryMark
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "tlui-style-panel__row__extra-button", children: /* @__PURE__ */ jsx(
+          TldrawUiToolbarButton,
+          {
+            type: "icon",
+            title: msg("style-panel.vertical-align"),
+            "data-testid": "vertical-align",
+            disabled: true,
+            children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "vertical-align-middle" })
+          }
+        ) })
+      ] })
+    ] }),
+    labelAlign === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      showUiLabels && /* @__PURE__ */ jsx(StylePanelSubheading, { children: msg("style-panel.label-align") }),
+      /* @__PURE__ */ jsxs(TldrawUiToolbar, { label: msg("style-panel.label-align"), className: "tlui-style-panel__row", children: [
+        /* @__PURE__ */ jsx(
+          TldrawUiButtonPicker,
+          {
+            title: msg("style-panel.label-align"),
+            uiType: "align",
+            style: DefaultHorizontalAlignStyle,
+            items: STYLES.horizontalAlign,
+            value: labelAlign,
+            onValueChange: handleValueChange,
+            theme,
+            onHistoryMark
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "tlui-style-panel__row__extra-button", children: verticalLabelAlign === void 0 ? /* @__PURE__ */ jsx(
+          TldrawUiToolbarButton,
+          {
+            type: "icon",
+            title: msg("style-panel.vertical-align"),
+            "data-testid": "vertical-align",
+            disabled: true,
+            children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "vertical-align-middle" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          DropdownPicker,
+          {
+            type: "icon",
+            id: "geo-vertical-alignment",
+            uiType: "verticalAlign",
+            stylePanelType: "vertical-align",
+            style: DefaultVerticalAlignStyle,
+            items: STYLES.verticalAlign,
+            value: verticalLabelAlign,
+            onValueChange: handleValueChange
+          }
+        ) })
+      ] })
     ] })
   ] });
 }
@@ -334,6 +361,7 @@ const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1];
 function OpacitySlider() {
   const editor = useEditor();
   const onHistoryMark = useCallback((id) => editor.markHistoryStoppingPoint(id), [editor]);
+  const showUiLabels = useValue("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
   const opacity = useValue("opacity", () => editor.getSharedOpacity(), [editor]);
   const trackEvent = useUiEvents();
   const msg = useTranslation();
@@ -358,19 +386,22 @@ function OpacitySlider() {
       (supportedOpacity) => Math.abs(supportedOpacity - opacity.value)
     )
   );
-  return /* @__PURE__ */ jsx(
-    TldrawUiSlider,
-    {
-      "data-testid": "style.opacity",
-      value: opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1,
-      label: opacity.type === "mixed" ? "style-panel.mixed" : `opacity-style.${opacity.value}`,
-      onValueChange: handleOpacityValueChange,
-      steps: tldrawSupportedOpacities.length - 1,
-      title: msg("style-panel.opacity"),
-      onHistoryMark,
-      ariaValueModifier: 25
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showUiLabels && /* @__PURE__ */ jsx(StylePanelSubheading, { children: msg("style-panel.opacity") }),
+    /* @__PURE__ */ jsx(
+      TldrawUiSlider,
+      {
+        "data-testid": "style.opacity",
+        value: opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1,
+        label: opacity.type === "mixed" ? "style-panel.mixed" : `opacity-style.${opacity.value}`,
+        onValueChange: handleOpacityValueChange,
+        steps: tldrawSupportedOpacities.length - 1,
+        title: msg("style-panel.opacity"),
+        onHistoryMark,
+        ariaValueModifier: 25
+      }
+    )
+  ] });
 }
 export {
   ArrowStylePickerSet,

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

@@ -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\tReadonlySharedStyleMap,\n\tStyleProp,\n\tTLArrowShapeArrowheadStyle,\n\tTLDefaultColorTheme,\n\tgetDefaultColorTheme,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseIsDarkMode,\n\tuseValue,\n} from '@tldraw/editor'\nimport React, { useCallback } from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonPicker } from '../primitives/TldrawUiButtonPicker'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { DoubleDropdownPicker } from './DoubleDropdownPicker'\nimport { DropdownPicker } from './DropdownPicker'\n\n/** @public */\nexport interface TLUiStylePanelContentProps {\n\tstyles: ReturnType<typeof useRelevantStyles>\n}\n\n/** @public @react */\nexport function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps) {\n\tconst isDarkMode = useIsDarkMode()\n\n\tif (!styles) return null\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tconst font = styles.get(DefaultFontStyle)\n\n\tconst hideGeo = geo === undefined\n\tconst hideArrowHeads = arrowheadEnd === undefined && arrowheadStart === undefined\n\tconst hideSpline = spline === undefined\n\tconst hideArrowKind = arrowKind === undefined\n\tconst hideText = font === undefined\n\n\tconst theme = getDefaultColorTheme({ isDarkMode: isDarkMode })\n\n\treturn (\n\t\t<>\n\t\t\t<CommonStylePickerSet theme={theme} styles={styles} />\n\t\t\t{!hideText && <TextStylePickerSet theme={theme} styles={styles} />}\n\t\t\t{!(hideGeo && hideArrowHeads && hideSpline && hideArrowKind) && (\n\t\t\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t\t\t<GeoStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowheadStylePickerSet styles={styles} />\n\t\t\t\t\t<SplineStylePickerSet styles={styles} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\nfunction useStyleChangeCallback() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\n\treturn React.useMemo(\n\t\t() =>\n\t\t\tfunction handleStyleChange<T>(style: StyleProp<T>, value: T) {\n\t\t\t\teditor.run(() => {\n\t\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\t\teditor.setStyleForSelectedShapes(style, value)\n\t\t\t\t\t}\n\t\t\t\t\teditor.setStyleForNextShapes(style, value)\n\t\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t\t})\n\n\t\t\t\ttrackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })\n\t\t\t},\n\t\t[editor, trackEvent]\n\t)\n}\n\n/** @public */\nexport interface ThemeStylePickerSetProps {\n\tstyles: ReadonlySharedStyleMap\n\ttheme: TLDefaultColorTheme\n}\n\n/** @public */\nexport interface StylePickerSetProps {\n\tstyles: ReadonlySharedStyleMap\n}\n\n/** @public @react */\nexport function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst color = styles.get(DefaultColorStyle)\n\tconst fill = styles.get(DefaultFillStyle)\n\tconst dash = styles.get(DefaultDashStyle)\n\tconst size = styles.get(DefaultSizeStyle)\n\n\tconst showPickers = fill !== undefined || dash !== undefined || size !== undefined\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"tlui-style-panel__section__common\" data-testid=\"style.panel\">\n\t\t\t\t{color === undefined ? null : (\n\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.color')}>\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.color')}\n\t\t\t\t\t\t\tuiType=\"color\"\n\t\t\t\t\t\t\tstyle={DefaultColorStyle}\n\t\t\t\t\t\t\titems={STYLES.color}\n\t\t\t\t\t\t\tvalue={color}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t)}\n\t\t\t\t<OpacitySlider />\n\t\t\t</div>\n\t\t\t{showPickers && (\n\t\t\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t\t\t{fill === undefined ? null : (\n\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.fill')}>\n\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.fill')}\n\t\t\t\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\t\t\t\titems={STYLES.fill}\n\t\t\t\t\t\t\t\tvalue={fill}\n\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t)}\n\t\t\t\t\t{dash === undefined ? null : (\n\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.dash')}>\n\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.dash')}\n\t\t\t\t\t\t\t\tuiType=\"dash\"\n\t\t\t\t\t\t\t\tstyle={DefaultDashStyle}\n\t\t\t\t\t\t\t\titems={STYLES.dash}\n\t\t\t\t\t\t\t\tvalue={dash}\n\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t)}\n\t\t\t\t\t{size === undefined ? null : (\n\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.size')}>\n\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.size')}\n\t\t\t\t\t\t\t\tuiType=\"size\"\n\t\t\t\t\t\t\t\tstyle={DefaultSizeStyle}\n\t\t\t\t\t\t\t\titems={STYLES.size}\n\t\t\t\t\t\t\t\tvalue={size}\n\t\t\t\t\t\t\t\tonValueChange={(style, value) => {\n\t\t\t\t\t\t\t\t\thandleValueChange(style, value)\n\t\t\t\t\t\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\t\t\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\t\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\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\ttheme={theme}\n\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst editor = useEditor()\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\n\tconst font = styles.get(DefaultFontStyle)\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (font === undefined && labelAlign === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t{font === undefined ? null : (\n\t\t\t\t<TldrawUiToolbar label={msg('style-panel.font')}>\n\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\ttitle={msg('style-panel.font')}\n\t\t\t\t\t\tuiType=\"font\"\n\t\t\t\t\t\tstyle={DefaultFontStyle}\n\t\t\t\t\t\titems={STYLES.font}\n\t\t\t\t\t\tvalue={font}\n\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t/>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t)}\n\n\t\t\t{textAlign === undefined ? null : (\n\t\t\t\t<TldrawUiToolbar label={msg('style-panel.align')} className=\"tlui-style-panel__row\">\n\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\ttitle={msg('style-panel.align')}\n\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\t\tvalue={textAlign}\n\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"tlui-style-panel__row__extra-button\">\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</div>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t)}\n\n\t\t\t{labelAlign === undefined ? null : (\n\t\t\t\t<TldrawUiToolbar label={msg('style-panel.label-align')} className=\"tlui-style-panel__row\">\n\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\ttitle={msg('style-panel.label-align')}\n\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"tlui-style-panel__row__extra-button\">\n\t\t\t\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<DropdownPicker\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n/** @public @react */\nexport function GeoStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.geo')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"geo\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.geo'}\n\t\t\t\tuiType=\"geo\"\n\t\t\t\tstylePanelType=\"geo\"\n\t\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\t\titems={STYLES.geo}\n\t\t\t\tvalue={geo}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function SplineStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.spline')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"spline\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.spline'}\n\t\t\t\tuiType=\"spline\"\n\t\t\t\tstylePanelType=\"spline\"\n\t\t\t\tstyle={LineShapeSplineStyle}\n\t\t\t\titems={STYLES.spline}\n\t\t\t\tvalue={spline}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function ArrowStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.arrow-kind')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"arrow-kind\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\t\tuiType=\"arrow-kind\"\n\t\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\t\titems={STYLES.arrowKind}\n\t\t\t\tvalue={arrowKind}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function ArrowheadStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (!arrowheadEnd || !arrowheadStart) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<DoubleDropdownPicker<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\tonValueChange={handleValueChange}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\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 OpacitySlider() {\n\tconst editor = useEditor()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\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<TldrawUiSlider\n\t\t\tdata-testid=\"style.opacity\"\n\t\t\tvalue={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\tlabel={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}\n\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\tonHistoryMark={onHistoryMark}\n\t\t\tariaValueModifier={25}\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\tReadonlySharedStyleMap,\n\tStyleProp,\n\tTLArrowShapeArrowheadStyle,\n\tTLDefaultColorTheme,\n\tgetDefaultColorTheme,\n\tkickoutOccludedShapes,\n\tminBy,\n\tuseEditor,\n\tuseIsDarkMode,\n\tuseValue,\n} from '@tldraw/editor'\nimport React, { useCallback } from 'react'\nimport { STYLES } from '../../../styles'\nimport { useUiEvents } from '../../context/events'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonPicker } from '../primitives/TldrawUiButtonPicker'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { DoubleDropdownPicker } from './DoubleDropdownPicker'\nimport { DropdownPicker } from './DropdownPicker'\n\n// Local component for style panel subheadings\nfunction StylePanelSubheading({ children }: { children: React.ReactNode }) {\n\treturn <h3 className=\"tlui-style-panel__subheading\">{children}</h3>\n}\n\n/** @public */\nexport interface TLUiStylePanelContentProps {\n\tstyles: ReturnType<typeof useRelevantStyles>\n}\n\n/** @public @react */\nexport function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps) {\n\tconst isDarkMode = useIsDarkMode()\n\n\tif (!styles) return null\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tconst font = styles.get(DefaultFontStyle)\n\n\tconst hideGeo = geo === undefined\n\tconst hideArrowHeads = arrowheadEnd === undefined && arrowheadStart === undefined\n\tconst hideSpline = spline === undefined\n\tconst hideArrowKind = arrowKind === undefined\n\tconst hideText = font === undefined\n\n\tconst theme = getDefaultColorTheme({ isDarkMode: isDarkMode })\n\n\treturn (\n\t\t<>\n\t\t\t<CommonStylePickerSet theme={theme} styles={styles} />\n\t\t\t{!hideText && <TextStylePickerSet theme={theme} styles={styles} />}\n\t\t\t{!(hideGeo && hideArrowHeads && hideSpline && hideArrowKind) && (\n\t\t\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t\t\t<GeoStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowStylePickerSet styles={styles} />\n\t\t\t\t\t<ArrowheadStylePickerSet styles={styles} />\n\t\t\t\t\t<SplineStylePickerSet styles={styles} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\nfunction useStyleChangeCallback() {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\n\treturn React.useMemo(\n\t\t() =>\n\t\t\tfunction handleStyleChange<T>(style: StyleProp<T>, value: T) {\n\t\t\t\teditor.run(() => {\n\t\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\t\teditor.setStyleForSelectedShapes(style, value)\n\t\t\t\t\t}\n\t\t\t\t\teditor.setStyleForNextShapes(style, value)\n\t\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t\t})\n\n\t\t\t\ttrackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })\n\t\t\t},\n\t\t[editor, trackEvent]\n\t)\n}\n\n/** @public */\nexport interface ThemeStylePickerSetProps {\n\tstyles: ReadonlySharedStyleMap\n\ttheme: TLDefaultColorTheme\n}\n\n/** @public */\nexport interface StylePickerSetProps {\n\tstyles: ReadonlySharedStyleMap\n}\n\n/** @public @react */\nexport function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst color = styles.get(DefaultColorStyle)\n\tconst fill = styles.get(DefaultFillStyle)\n\tconst dash = styles.get(DefaultDashStyle)\n\tconst size = styles.get(DefaultSizeStyle)\n\n\tconst showPickers = fill !== undefined || dash !== undefined || size !== undefined\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"tlui-style-panel__section__common\" data-testid=\"style.panel\">\n\t\t\t\t{color === undefined ? null : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.color')}>\n\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.color')}\n\t\t\t\t\t\t\t\tuiType=\"color\"\n\t\t\t\t\t\t\t\tstyle={DefaultColorStyle}\n\t\t\t\t\t\t\t\titems={STYLES.color}\n\t\t\t\t\t\t\t\tvalue={color}\n\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t<OpacitySlider />\n\t\t\t</div>\n\t\t\t{showPickers && (\n\t\t\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t\t\t{fill === undefined ? null : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.fill')}</StylePanelSubheading>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.fill')}>\n\t\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.fill')}\n\t\t\t\t\t\t\t\t\tuiType=\"fill\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultFillStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.fill}\n\t\t\t\t\t\t\t\t\tvalue={fill}\n\t\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{dash === undefined ? null : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.dash')}>\n\t\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.dash')}\n\t\t\t\t\t\t\t\t\tuiType=\"dash\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultDashStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.dash}\n\t\t\t\t\t\t\t\t\tvalue={dash}\n\t\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t{size === undefined ? null : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.size')}>\n\t\t\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.size')}\n\t\t\t\t\t\t\t\t\tuiType=\"size\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultSizeStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.size}\n\t\t\t\t\t\t\t\t\tvalue={size}\n\t\t\t\t\t\t\t\t\tonValueChange={(style, value) => {\n\t\t\t\t\t\t\t\t\t\thandleValueChange(style, value)\n\t\t\t\t\t\t\t\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\t\t\t\t\t\t\t\tif (selectedShapeIds.length > 0) {\n\t\t\t\t\t\t\t\t\t\t\tkickoutOccludedShapes(editor, selectedShapeIds)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst editor = useEditor()\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\tconst labelStr = showUiLabels && msg('style-panel.font')\n\n\tconst font = styles.get(DefaultFontStyle)\n\tconst textAlign = styles.get(DefaultTextAlignStyle)\n\tconst labelAlign = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (font === undefined && labelAlign === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div className=\"tlui-style-panel__section\">\n\t\t\t{font === undefined ? null : (\n\t\t\t\t<>\n\t\t\t\t\t{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}\n\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.font')}>\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.font')}\n\t\t\t\t\t\t\tuiType=\"font\"\n\t\t\t\t\t\t\tstyle={DefaultFontStyle}\n\t\t\t\t\t\t\titems={STYLES.font}\n\t\t\t\t\t\t\tvalue={font}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{textAlign === undefined ? null : (\n\t\t\t\t<>\n\t\t\t\t\t{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}\n\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.align')} className=\"tlui-style-panel__row\">\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.align')}\n\t\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\t\tstyle={DefaultTextAlignStyle}\n\t\t\t\t\t\t\titems={STYLES.textAlign}\n\t\t\t\t\t\t\tvalue={textAlign}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"tlui-style-panel__row__extra-button\">\n\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\n\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{labelAlign === undefined ? null : (\n\t\t\t\t<>\n\t\t\t\t\t{showUiLabels && (\n\t\t\t\t\t\t<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>\n\t\t\t\t\t)}\n\t\t\t\t\t<TldrawUiToolbar label={msg('style-panel.label-align')} className=\"tlui-style-panel__row\">\n\t\t\t\t\t\t<TldrawUiButtonPicker\n\t\t\t\t\t\t\ttitle={msg('style-panel.label-align')}\n\t\t\t\t\t\t\tuiType=\"align\"\n\t\t\t\t\t\t\tstyle={DefaultHorizontalAlignStyle}\n\t\t\t\t\t\t\titems={STYLES.horizontalAlign}\n\t\t\t\t\t\t\tvalue={labelAlign}\n\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"tlui-style-panel__row__extra-button\">\n\t\t\t\t\t\t\t{verticalLabelAlign === undefined ? (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\ttitle={msg('style-panel.vertical-align')}\n\t\t\t\t\t\t\t\t\tdata-testid=\"vertical-align\"\n\t\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"vertical-align-middle\" />\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\t\t<DropdownPicker\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tid=\"geo-vertical-alignment\"\n\t\t\t\t\t\t\t\t\tuiType=\"verticalAlign\"\n\t\t\t\t\t\t\t\t\tstylePanelType=\"vertical-align\"\n\t\t\t\t\t\t\t\t\tstyle={DefaultVerticalAlignStyle}\n\t\t\t\t\t\t\t\t\titems={STYLES.verticalAlign}\n\t\t\t\t\t\t\t\t\tvalue={verticalLabelAlign}\n\t\t\t\t\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n/** @public @react */\nexport function GeoStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.geo')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"geo\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.geo'}\n\t\t\t\tuiType=\"geo\"\n\t\t\t\tstylePanelType=\"geo\"\n\t\t\t\tstyle={GeoShapeGeoStyle}\n\t\t\t\titems={STYLES.geo}\n\t\t\t\tvalue={geo}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function SplineStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.spline')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"spline\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.spline'}\n\t\t\t\tuiType=\"spline\"\n\t\t\t\tstylePanelType=\"spline\"\n\t\t\t\tstyle={LineShapeSplineStyle}\n\t\t\t\titems={STYLES.spline}\n\t\t\t\tvalue={spline}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function ArrowStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowKind = styles.get(ArrowShapeKindStyle)\n\tif (arrowKind === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbar label={msg('style-panel.arrow-kind')}>\n\t\t\t<DropdownPicker\n\t\t\t\tid=\"arrow-kind\"\n\t\t\t\ttype=\"menu\"\n\t\t\t\tlabel={'style-panel.arrow-kind'}\n\t\t\t\tuiType=\"arrow-kind\"\n\t\t\t\tstylePanelType=\"arrow-kind\"\n\t\t\t\tstyle={ArrowShapeKindStyle}\n\t\t\t\titems={STYLES.arrowKind}\n\t\t\t\tvalue={arrowKind}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t/>\n\t\t</TldrawUiToolbar>\n\t)\n}\n/** @public @react */\nexport function ArrowheadStylePickerSet({ styles }: StylePickerSetProps) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (!arrowheadEnd || !arrowheadStart) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<DoubleDropdownPicker<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\tonValueChange={handleValueChange}\n\t\t\tlabelA=\"style-panel.arrowhead-start\"\n\t\t\tlabelB=\"style-panel.arrowhead-end\"\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 OpacitySlider() {\n\tconst editor = useEditor()\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\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{showUiLabels && <StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>}\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"],
+  "mappings": "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",
   "names": []
 }

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

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

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

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

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

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