tldraw 3.16.0-canary.65a1804c722b → 3.16.0-canary.66da2a5c5813

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

@@ -13,312 +13,275 @@ import {
   DefaultVerticalAlignStyle,
   GeoShapeGeoStyle,
   LineShapeSplineStyle,
-  getDefaultColorTheme,
   kickoutOccludedShapes,
   minBy,
   useEditor,
-  useIsDarkMode,
   useValue
 } from "@tldraw/editor";
-import React, { useCallback } from "react";
+import React from "react";
 import { STYLES } from "../../../styles.mjs";
 import { useUiEvents } from "../../context/events.mjs";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
-import { TldrawUiButtonPicker } from "../primitives/TldrawUiButtonPicker.mjs";
 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;
-  const geo = styles.get(GeoShapeGeoStyle);
-  const arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle);
-  const arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle);
-  const arrowKind = styles.get(ArrowShapeKindStyle);
-  const spline = styles.get(LineShapeSplineStyle);
-  const font = styles.get(DefaultFontStyle);
-  const hideGeo = geo === void 0;
-  const hideArrowHeads = arrowheadEnd === void 0 && arrowheadStart === void 0;
-  const hideSpline = spline === void 0;
-  const hideArrowKind = arrowKind === void 0;
-  const hideText = font === void 0;
-  const theme = getDefaultColorTheme({ isDarkMode });
+import { StylePanelButtonPicker } from "./StylePanelButtonPicker.mjs";
+import { useStylePanelContext } from "./StylePanelContext.mjs";
+import { StylePanelDoubleDropdownPicker } from "./StylePanelDoubleDropdownPicker.mjs";
+import { StylePanelDropdownPicker } from "./StylePanelDropdownPicker.mjs";
+import { StylePanelSubheading } from "./StylePanelSubheading.mjs";
+function DefaultStylePanelContent() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(CommonStylePickerSet, { theme, styles }),
-    !hideText && /* @__PURE__ */ jsx(TextStylePickerSet, { theme, styles }),
-    !(hideGeo && hideArrowHeads && hideSpline && hideArrowKind) && /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__section", children: [
-      /* @__PURE__ */ jsx(GeoStylePickerSet, { styles }),
-      /* @__PURE__ */ jsx(ArrowStylePickerSet, { styles }),
-      /* @__PURE__ */ jsx(ArrowheadStylePickerSet, { styles }),
-      /* @__PURE__ */ jsx(SplineStylePickerSet, { styles })
+    /* @__PURE__ */ jsxs(StylePanelSection, { children: [
+      /* @__PURE__ */ jsx(StylePanelColorPicker, {}),
+      /* @__PURE__ */ jsx(StylePanelOpacityPicker, {})
+    ] }),
+    /* @__PURE__ */ jsxs(StylePanelSection, { children: [
+      /* @__PURE__ */ jsx(StylePanelFillPicker, {}),
+      /* @__PURE__ */ jsx(StylePanelDashPicker, {}),
+      /* @__PURE__ */ jsx(StylePanelSizePicker, {})
+    ] }),
+    /* @__PURE__ */ jsxs(StylePanelSection, { children: [
+      /* @__PURE__ */ jsx(StylePanelFontPicker, {}),
+      /* @__PURE__ */ jsx(StylePanelTextAlignPicker, {}),
+      /* @__PURE__ */ jsx(StylePanelLabelAlignPicker, {})
+    ] }),
+    /* @__PURE__ */ jsxs(StylePanelSection, { children: [
+      /* @__PURE__ */ jsx(StylePanelGeoShapePicker, {}),
+      /* @__PURE__ */ jsx(StylePanelArrowKindPicker, {}),
+      /* @__PURE__ */ jsx(StylePanelArrowheadPicker, {}),
+      /* @__PURE__ */ jsx(StylePanelSplinePicker, {})
     ] })
   ] });
 }
-function useStyleChangeCallback() {
+function StylePanelSection({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "tlui-style-panel__section", children });
+}
+function StylePanelColorPicker() {
+  const { styles } = useStylePanelContext();
+  const msg = useTranslation();
+  const color = styles.get(DefaultColorStyle);
+  if (color === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    StylePanelButtonPicker,
+    {
+      title: msg("style-panel.color"),
+      uiType: "color",
+      style: DefaultColorStyle,
+      items: STYLES.color,
+      value: color
+    }
+  );
+}
+const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1];
+function StylePanelOpacityPicker() {
   const editor = useEditor();
+  const { onHistoryMark, showUiLabels } = useStylePanelContext();
+  const opacity = useValue("opacity", () => editor.getSharedOpacity(), [editor]);
   const trackEvent = useUiEvents();
-  return React.useMemo(
-    () => (function handleStyleChange(style, value) {
+  const msg = useTranslation();
+  const handleOpacityValueChange = React.useCallback(
+    (value) => {
+      const item = tldrawSupportedOpacities[value];
       editor.run(() => {
         if (editor.isIn("select")) {
-          editor.setStyleForSelectedShapes(style, value);
+          editor.setOpacityForSelectedShapes(item);
         }
-        editor.setStyleForNextShapes(style, value);
+        editor.setOpacityForNextShapes(item);
         editor.updateInstanceState({ isChangingStyle: true });
       });
-      trackEvent("set-style", { source: "style-panel", id: style.id, value });
-    }),
+      trackEvent("set-style", { source: "style-panel", id: "opacity", value });
+    },
     [editor, trackEvent]
   );
+  if (opacity === void 0) return null;
+  const opacityIndex = opacity.type === "mixed" ? -1 : tldrawSupportedOpacities.indexOf(
+    minBy(
+      tldrawSupportedOpacities,
+      (supportedOpacity) => Math.abs(supportedOpacity - opacity.value)
+    )
+  );
+  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
+      }
+    )
+  ] });
 }
-function CommonStylePickerSet({ styles, theme }) {
+function StylePanelFillPicker() {
+  const { styles } = useStylePanelContext();
   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);
+  if (fill === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    StylePanelButtonPicker,
+    {
+      title: msg("style-panel.fill"),
+      uiType: "fill",
+      style: DefaultFillStyle,
+      items: STYLES.fill,
+      value: fill
+    }
+  );
+}
+function StylePanelDashPicker() {
+  const { styles } = useStylePanelContext();
+  const msg = useTranslation();
   const dash = styles.get(DefaultDashStyle);
+  if (dash === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    StylePanelButtonPicker,
+    {
+      title: msg("style-panel.dash"),
+      uiType: "dash",
+      style: DefaultDashStyle,
+      items: STYLES.dash,
+      value: dash
+    }
+  );
+}
+function StylePanelSizePicker() {
+  const editor = useEditor();
+  const { styles, onValueChange } = useStylePanelContext();
+  const msg = useTranslation();
   const size = styles.get(DefaultSizeStyle);
-  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__ */ jsxs(Fragment, { children: [
-        showUiLabels && /* @__PURE__ */ jsx(StylePanelSubheading, { children: msg("style-panel.color") }),
-        /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "horizontal", 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__ */ jsxs(Fragment, { children: [
-        showUiLabels && /* @__PURE__ */ jsx(StylePanelSubheading, { children: msg("style-panel.fill") }),
-        /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "horizontal", 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, { orientation: "horizontal", 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, { orientation: "horizontal", 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
-          }
-        ) })
-      ] })
-    ] })
-  ] });
+  if (size === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    StylePanelButtonPicker,
+    {
+      title: msg("style-panel.size"),
+      uiType: "size",
+      style: DefaultSizeStyle,
+      items: STYLES.size,
+      value: size,
+      onValueChange: (style, value) => {
+        onValueChange(style, value);
+        const selectedShapeIds = editor.getSelectedShapeIds();
+        if (selectedShapeIds.length > 0) {
+          kickoutOccludedShapes(editor, selectedShapeIds);
+        }
+      }
+    }
+  );
 }
-function TextStylePickerSet({ theme, styles }) {
+function StylePanelFontPicker() {
+  const { styles } = useStylePanelContext();
   const msg = useTranslation();
-  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);
+  if (font === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    StylePanelButtonPicker,
+    {
+      title: msg("style-panel.font"),
+      uiType: "font",
+      style: DefaultFontStyle,
+      items: STYLES.font,
+      value: font
+    }
+  );
+}
+function StylePanelTextAlignPicker() {
+  const { styles } = useStylePanelContext();
+  const msg = useTranslation();
   const textAlign = styles.get(DefaultTextAlignStyle);
+  if (textAlign === void 0) return null;
+  return /* @__PURE__ */ jsxs(TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.align"), children: [
+    /* @__PURE__ */ jsx(
+      StylePanelButtonPicker,
+      {
+        title: msg("style-panel.align"),
+        uiType: "align",
+        style: DefaultTextAlignStyle,
+        items: STYLES.textAlign,
+        value: textAlign
+      }
+    ),
+    /* @__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" })
+      }
+    )
+  ] });
+}
+function StylePanelLabelAlignPicker() {
+  const { styles } = useStylePanelContext();
+  const msg = useTranslation();
   const labelAlign = styles.get(DefaultHorizontalAlignStyle);
   const verticalLabelAlign = styles.get(DefaultVerticalAlignStyle);
-  if (font === void 0 && labelAlign === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "tlui-style-panel__section", children: [
-    font === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-      labelStr && /* @__PURE__ */ jsx(StylePanelSubheading, { children: labelStr }),
-      /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "horizontal", 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(Fragment, { children: [
-      showUiLabels && /* @__PURE__ */ jsx(StylePanelSubheading, { children: msg("style-panel.align") }),
-      /* @__PURE__ */ jsxs(TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.align"), children: [
-        /* @__PURE__ */ jsx(
-          TldrawUiButtonPicker,
-          {
-            title: msg("style-panel.align"),
-            uiType: "align",
-            style: DefaultTextAlignStyle,
-            items: STYLES.textAlign,
-            value: textAlign,
-            onValueChange: handleValueChange,
-            theme,
-            onHistoryMark
-          }
-        ),
-        /* @__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, { orientation: "horizontal", label: msg("style-panel.label-align"), children: [
-        /* @__PURE__ */ jsx(
-          TldrawUiButtonPicker,
-          {
-            title: msg("style-panel.label-align"),
-            uiType: "align",
-            style: DefaultHorizontalAlignStyle,
-            items: STYLES.horizontalAlign,
-            value: labelAlign,
-            onValueChange: handleValueChange,
-            theme,
-            onHistoryMark
-          }
-        ),
-        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
-          }
-        )
-      ] })
-    ] })
+  if (labelAlign === void 0) return null;
+  return /* @__PURE__ */ jsxs(TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.label-align"), children: [
+    /* @__PURE__ */ jsx(
+      StylePanelButtonPicker,
+      {
+        title: msg("style-panel.label-align"),
+        uiType: "align",
+        style: DefaultHorizontalAlignStyle,
+        items: STYLES.horizontalAlign,
+        value: labelAlign
+      }
+    ),
+    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(
+      StylePanelDropdownPicker,
+      {
+        type: "icon",
+        id: "geo-vertical-alignment",
+        uiType: "verticalAlign",
+        stylePanelType: "vertical-align",
+        style: DefaultVerticalAlignStyle,
+        items: STYLES.verticalAlign,
+        value: verticalLabelAlign
+      }
+    )
   ] });
 }
-function GeoStylePickerSet({ styles }) {
-  const msg = useTranslation();
-  const handleValueChange = useStyleChangeCallback();
+function StylePanelGeoShapePicker() {
+  const { styles } = useStylePanelContext();
   const geo = styles.get(GeoShapeGeoStyle);
-  if (geo === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.geo"), children: /* @__PURE__ */ jsx(
-    DropdownPicker,
+  if (geo === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    StylePanelDropdownPicker,
     {
-      id: "geo",
-      type: "menu",
       label: "style-panel.geo",
+      type: "menu",
+      id: "geo",
       uiType: "geo",
       stylePanelType: "geo",
       style: GeoShapeGeoStyle,
       items: STYLES.geo,
-      value: geo,
-      onValueChange: handleValueChange
+      value: geo
     }
-  ) });
-}
-function SplineStylePickerSet({ styles }) {
-  const msg = useTranslation();
-  const handleValueChange = useStyleChangeCallback();
-  const spline = styles.get(LineShapeSplineStyle);
-  if (spline === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.spline"), children: /* @__PURE__ */ jsx(
-    DropdownPicker,
-    {
-      id: "spline",
-      type: "menu",
-      label: "style-panel.spline",
-      uiType: "spline",
-      stylePanelType: "spline",
-      style: LineShapeSplineStyle,
-      items: STYLES.spline,
-      value: spline,
-      onValueChange: handleValueChange
-    }
-  ) });
+  );
 }
-function ArrowStylePickerSet({ styles }) {
-  const msg = useTranslation();
-  const handleValueChange = useStyleChangeCallback();
+function StylePanelArrowKindPicker() {
+  const { styles } = useStylePanelContext();
   const arrowKind = styles.get(ArrowShapeKindStyle);
-  if (arrowKind === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.arrow-kind"), children: /* @__PURE__ */ jsx(
-    DropdownPicker,
+  if (arrowKind === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    StylePanelDropdownPicker,
     {
       id: "arrow-kind",
       type: "menu",
@@ -327,20 +290,17 @@ function ArrowStylePickerSet({ styles }) {
       stylePanelType: "arrow-kind",
       style: ArrowShapeKindStyle,
       items: STYLES.arrowKind,
-      value: arrowKind,
-      onValueChange: handleValueChange
+      value: arrowKind
     }
-  ) });
+  );
 }
-function ArrowheadStylePickerSet({ styles }) {
-  const handleValueChange = useStyleChangeCallback();
+function StylePanelArrowheadPicker() {
+  const { styles } = useStylePanelContext();
   const arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle);
   const arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle);
-  if (!arrowheadEnd || !arrowheadStart) {
-    return null;
-  }
+  if (arrowheadEnd === void 0 || arrowheadStart === void 0) return null;
   return /* @__PURE__ */ jsx(
-    DoubleDropdownPicker,
+    StylePanelDoubleDropdownPicker,
     {
       label: "style-panel.arrowheads",
       uiTypeA: "arrowheadStart",
@@ -351,66 +311,43 @@ function ArrowheadStylePickerSet({ styles }) {
       styleB: ArrowShapeArrowheadEndStyle,
       itemsB: STYLES.arrowheadEnd,
       valueB: arrowheadEnd,
-      onValueChange: handleValueChange,
       labelA: "style-panel.arrowhead-start",
       labelB: "style-panel.arrowhead-end"
     }
   );
 }
-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();
-  const handleOpacityValueChange = React.useCallback(
-    (value) => {
-      const item = tldrawSupportedOpacities[value];
-      editor.run(() => {
-        if (editor.isIn("select")) {
-          editor.setOpacityForSelectedShapes(item);
-        }
-        editor.setOpacityForNextShapes(item);
-        editor.updateInstanceState({ isChangingStyle: true });
-      });
-      trackEvent("set-style", { source: "style-panel", id: "opacity", value });
-    },
-    [editor, trackEvent]
-  );
-  if (opacity === void 0) return null;
-  const opacityIndex = opacity.type === "mixed" ? -1 : tldrawSupportedOpacities.indexOf(
-    minBy(
-      tldrawSupportedOpacities,
-      (supportedOpacity) => Math.abs(supportedOpacity - opacity.value)
-    )
+function StylePanelSplinePicker() {
+  const { styles } = useStylePanelContext();
+  const spline = styles.get(LineShapeSplineStyle);
+  if (spline === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    StylePanelDropdownPicker,
+    {
+      type: "menu",
+      id: "spline",
+      uiType: "spline",
+      stylePanelType: "spline",
+      label: "style-panel.spline",
+      style: LineShapeSplineStyle,
+      items: STYLES.spline,
+      value: spline
+    }
   );
-  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,
-  ArrowheadStylePickerSet,
-  CommonStylePickerSet,
   DefaultStylePanelContent,
-  GeoStylePickerSet,
-  OpacitySlider,
-  SplineStylePickerSet,
-  TextStylePickerSet
+  StylePanelArrowKindPicker,
+  StylePanelArrowheadPicker,
+  StylePanelColorPicker,
+  StylePanelDashPicker,
+  StylePanelFillPicker,
+  StylePanelFontPicker,
+  StylePanelGeoShapePicker,
+  StylePanelLabelAlignPicker,
+  StylePanelOpacityPicker,
+  StylePanelSection,
+  StylePanelSizePicker,
+  StylePanelSplinePicker,
+  StylePanelTextAlignPicker
 };
 //# sourceMappingURL=DefaultStylePanelContent.mjs.map