tldraw 3.16.0-next.fe14f1b4181f → 4.0.0

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

@@ -28,14 +28,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DefaultStylePanelContent_exports = {};
 __export(DefaultStylePanelContent_exports, {
-  ArrowStylePickerSet: () => ArrowStylePickerSet,
-  ArrowheadStylePickerSet: () => ArrowheadStylePickerSet,
-  CommonStylePickerSet: () => CommonStylePickerSet,
   DefaultStylePanelContent: () => DefaultStylePanelContent,
-  GeoStylePickerSet: () => GeoStylePickerSet,
-  OpacitySlider: () => OpacitySlider,
-  SplineStylePickerSet: () => SplineStylePickerSet,
-  TextStylePickerSet: () => TextStylePickerSet
+  StylePanelArrowKindPicker: () => StylePanelArrowKindPicker,
+  StylePanelArrowheadPicker: () => StylePanelArrowheadPicker,
+  StylePanelColorPicker: () => StylePanelColorPicker,
+  StylePanelDashPicker: () => StylePanelDashPicker,
+  StylePanelFillPicker: () => StylePanelFillPicker,
+  StylePanelFontPicker: () => StylePanelFontPicker,
+  StylePanelGeoShapePicker: () => StylePanelGeoShapePicker,
+  StylePanelLabelAlignPicker: () => StylePanelLabelAlignPicker,
+  StylePanelOpacityPicker: () => StylePanelOpacityPicker,
+  StylePanelSection: () => StylePanelSection,
+  StylePanelSizePicker: () => StylePanelSizePicker,
+  StylePanelSplinePicker: () => StylePanelSplinePicker,
+  StylePanelTextAlignPicker: () => StylePanelTextAlignPicker
 });
 module.exports = __toCommonJS(DefaultStylePanelContent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -45,300 +51,265 @@ var import_styles = require("../../../styles");
 var import_events = require("../../context/events");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
-var import_TldrawUiButtonPicker = require("../primitives/TldrawUiButtonPicker");
 var import_TldrawUiSlider = require("../primitives/TldrawUiSlider");
 var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
-var import_DoubleDropdownPicker = require("./DoubleDropdownPicker");
-var import_DropdownPicker = require("./DropdownPicker");
-function StylePanelSubheading({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "tlui-style-panel__subheading", children });
-}
-function DefaultStylePanelContent({ styles }) {
-  const isDarkMode = (0, import_editor.useIsDarkMode)();
-  if (!styles) return null;
-  const geo = styles.get(import_editor.GeoShapeGeoStyle);
-  const arrowheadEnd = styles.get(import_editor.ArrowShapeArrowheadEndStyle);
-  const arrowheadStart = styles.get(import_editor.ArrowShapeArrowheadStartStyle);
-  const arrowKind = styles.get(import_editor.ArrowShapeKindStyle);
-  const spline = styles.get(import_editor.LineShapeSplineStyle);
-  const font = styles.get(import_editor.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 = (0, import_editor.getDefaultColorTheme)({ isDarkMode });
+var import_StylePanelButtonPicker = require("./StylePanelButtonPicker");
+var import_StylePanelContext = require("./StylePanelContext");
+var import_StylePanelDoubleDropdownPicker = require("./StylePanelDoubleDropdownPicker");
+var import_StylePanelDropdownPicker = require("./StylePanelDropdownPicker");
+var import_StylePanelSubheading = require("./StylePanelSubheading");
+function DefaultStylePanelContent() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommonStylePickerSet, { theme, styles }),
-    !hideText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextStylePickerSet, { theme, styles }),
-    !(hideGeo && hideArrowHeads && hideSpline && hideArrowKind) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GeoStylePickerSet, { styles }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowStylePickerSet, { styles }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowheadStylePickerSet, { styles }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SplineStylePickerSet, { styles })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StylePanelSection, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelColorPicker, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelOpacityPicker, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StylePanelSection, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelFillPicker, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelDashPicker, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSizePicker, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StylePanelSection, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelFontPicker, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelTextAlignPicker, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelLabelAlignPicker, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StylePanelSection, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelGeoShapePicker, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelArrowKindPicker, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelArrowheadPicker, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSplinePicker, {})
     ] })
   ] });
 }
-function useStyleChangeCallback() {
+function StylePanelSection({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-style-panel__section", children });
+}
+function StylePanelColorPicker() {
+  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const color = styles.get(import_editor.DefaultColorStyle);
+  if (color === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_StylePanelButtonPicker.StylePanelButtonPicker,
+    {
+      title: msg("style-panel.color"),
+      uiType: "color",
+      style: import_editor.DefaultColorStyle,
+      items: import_styles.STYLES.color,
+      value: color
+    }
+  );
+}
+const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1];
+function StylePanelOpacityPicker() {
   const editor = (0, import_editor.useEditor)();
+  const { onHistoryMark, enhancedA11yMode } = (0, import_StylePanelContext.useStylePanelContext)();
+  const opacity = (0, import_editor.useValue)("opacity", () => editor.getSharedOpacity(), [editor]);
   const trackEvent = (0, import_events.useUiEvents)();
-  return import_react.default.useMemo(
-    () => function handleStyleChange(style, value) {
+  const msg = (0, import_useTranslation.useTranslation)();
+  const handleOpacityValueChange = import_react.default.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(
+    (0, import_editor.minBy)(
+      tldrawSupportedOpacities,
+      (supportedOpacity) => Math.abs(supportedOpacity - opacity.value)
+    )
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    enhancedA11yMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanelSubheading.StylePanelSubheading, { children: msg("style-panel.opacity") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TldrawUiSlider.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 } = (0, import_StylePanelContext.useStylePanelContext)();
   const msg = (0, import_useTranslation.useTranslation)();
-  const editor = (0, import_editor.useEditor)();
-  const onHistoryMark = (0, import_react.useCallback)((id) => editor.markHistoryStoppingPoint(id), [editor]);
-  const showUiLabels = (0, import_editor.useValue)("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
-  const handleValueChange = useStyleChangeCallback();
-  const color = styles.get(import_editor.DefaultColorStyle);
   const fill = styles.get(import_editor.DefaultFillStyle);
+  if (fill === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_StylePanelButtonPicker.StylePanelButtonPicker,
+    {
+      title: msg("style-panel.fill"),
+      uiType: "fill",
+      style: import_editor.DefaultFillStyle,
+      items: import_styles.STYLES.fill,
+      value: fill
+    }
+  );
+}
+function StylePanelDashPicker() {
+  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
+  const msg = (0, import_useTranslation.useTranslation)();
   const dash = styles.get(import_editor.DefaultDashStyle);
+  if (dash === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_StylePanelButtonPicker.StylePanelButtonPicker,
+    {
+      title: msg("style-panel.dash"),
+      uiType: "dash",
+      style: import_editor.DefaultDashStyle,
+      items: import_styles.STYLES.dash,
+      value: dash
+    }
+  );
+}
+function StylePanelSizePicker() {
+  const editor = (0, import_editor.useEditor)();
+  const { styles, onValueChange } = (0, import_StylePanelContext.useStylePanelContext)();
+  const msg = (0, import_useTranslation.useTranslation)();
   const size = styles.get(import_editor.DefaultSizeStyle);
-  const showPickers = fill !== void 0 || dash !== void 0 || size !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__section__common", "data-testid": "style.panel", children: [
-      color === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.color") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.color"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-          {
-            title: msg("style-panel.color"),
-            uiType: "color",
-            style: import_editor.DefaultColorStyle,
-            items: import_styles.STYLES.color,
-            value: color,
-            onValueChange: handleValueChange,
-            theme,
-            onHistoryMark
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OpacitySlider, {})
-    ] }),
-    showPickers && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__section", children: [
-      fill === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.fill") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.fill"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-          {
-            title: msg("style-panel.fill"),
-            uiType: "fill",
-            style: import_editor.DefaultFillStyle,
-            items: import_styles.STYLES.fill,
-            value: fill,
-            onValueChange: handleValueChange,
-            theme,
-            onHistoryMark
-          }
-        ) })
-      ] }),
-      dash === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.dash") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.dash"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-          {
-            title: msg("style-panel.dash"),
-            uiType: "dash",
-            style: import_editor.DefaultDashStyle,
-            items: import_styles.STYLES.dash,
-            value: dash,
-            onValueChange: handleValueChange,
-            theme,
-            onHistoryMark
-          }
-        ) })
-      ] }),
-      size === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.size") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.size"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-          {
-            title: msg("style-panel.size"),
-            uiType: "size",
-            style: import_editor.DefaultSizeStyle,
-            items: import_styles.STYLES.size,
-            value: size,
-            onValueChange: (style, value) => {
-              handleValueChange(style, value);
-              const selectedShapeIds = editor.getSelectedShapeIds();
-              if (selectedShapeIds.length > 0) {
-                (0, import_editor.kickoutOccludedShapes)(editor, selectedShapeIds);
-              }
-            },
-            theme,
-            onHistoryMark
-          }
-        ) })
-      ] })
-    ] })
-  ] });
+  if (size === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_StylePanelButtonPicker.StylePanelButtonPicker,
+    {
+      title: msg("style-panel.size"),
+      uiType: "size",
+      style: import_editor.DefaultSizeStyle,
+      items: import_styles.STYLES.size,
+      value: size,
+      onValueChange: (style, value) => {
+        onValueChange(style, value);
+        const selectedShapeIds = editor.getSelectedShapeIds();
+        if (selectedShapeIds.length > 0) {
+          (0, import_editor.kickoutOccludedShapes)(editor, selectedShapeIds);
+        }
+      }
+    }
+  );
 }
-function TextStylePickerSet({ theme, styles }) {
+function StylePanelFontPicker() {
+  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
   const msg = (0, import_useTranslation.useTranslation)();
-  const handleValueChange = useStyleChangeCallback();
-  const editor = (0, import_editor.useEditor)();
-  const onHistoryMark = (0, import_react.useCallback)((id) => editor.markHistoryStoppingPoint(id), [editor]);
-  const showUiLabels = (0, import_editor.useValue)("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
-  const labelStr = showUiLabels && msg("style-panel.font");
   const font = styles.get(import_editor.DefaultFontStyle);
+  if (font === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_StylePanelButtonPicker.StylePanelButtonPicker,
+    {
+      title: msg("style-panel.font"),
+      uiType: "font",
+      style: import_editor.DefaultFontStyle,
+      items: import_styles.STYLES.font,
+      value: font
+    }
+  );
+}
+function StylePanelTextAlignPicker() {
+  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
+  const msg = (0, import_useTranslation.useTranslation)();
   const textAlign = styles.get(import_editor.DefaultTextAlignStyle);
+  if (textAlign === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.align"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_StylePanelButtonPicker.StylePanelButtonPicker,
+      {
+        title: msg("style-panel.align"),
+        uiType: "align",
+        style: import_editor.DefaultTextAlignStyle,
+        items: import_styles.STYLES.textAlign,
+        value: textAlign
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TldrawUiToolbar.TldrawUiToolbarButton,
+      {
+        type: "icon",
+        title: msg("style-panel.vertical-align"),
+        "data-testid": "vertical-align",
+        disabled: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
+      }
+    )
+  ] });
+}
+function StylePanelLabelAlignPicker() {
+  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
+  const msg = (0, import_useTranslation.useTranslation)();
   const labelAlign = styles.get(import_editor.DefaultHorizontalAlignStyle);
   const verticalLabelAlign = styles.get(import_editor.DefaultVerticalAlignStyle);
-  if (font === void 0 && labelAlign === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-style-panel__section", children: [
-    font === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      labelStr && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: labelStr }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.font"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-        {
-          title: msg("style-panel.font"),
-          uiType: "font",
-          style: import_editor.DefaultFontStyle,
-          items: import_styles.STYLES.font,
-          value: font,
-          onValueChange: handleValueChange,
-          theme,
-          onHistoryMark
-        }
-      ) })
-    ] }),
-    textAlign === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.align") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.align"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-          {
-            title: msg("style-panel.align"),
-            uiType: "align",
-            style: import_editor.DefaultTextAlignStyle,
-            items: import_styles.STYLES.textAlign,
-            value: textAlign,
-            onValueChange: handleValueChange,
-            theme,
-            onHistoryMark
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_TldrawUiToolbar.TldrawUiToolbarButton,
-          {
-            type: "icon",
-            title: msg("style-panel.vertical-align"),
-            "data-testid": "vertical-align",
-            disabled: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
-          }
-        )
-      ] })
-    ] }),
-    labelAlign === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.label-align") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.label-align"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_TldrawUiButtonPicker.TldrawUiButtonPicker,
-          {
-            title: msg("style-panel.label-align"),
-            uiType: "align",
-            style: import_editor.DefaultHorizontalAlignStyle,
-            items: import_styles.STYLES.horizontalAlign,
-            value: labelAlign,
-            onValueChange: handleValueChange,
-            theme,
-            onHistoryMark
-          }
-        ),
-        verticalLabelAlign === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_TldrawUiToolbar.TldrawUiToolbarButton,
-          {
-            type: "icon",
-            title: msg("style-panel.vertical-align"),
-            "data-testid": "vertical-align",
-            disabled: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_DropdownPicker.DropdownPicker,
-          {
-            type: "icon",
-            id: "geo-vertical-alignment",
-            uiType: "verticalAlign",
-            stylePanelType: "vertical-align",
-            style: import_editor.DefaultVerticalAlignStyle,
-            items: import_styles.STYLES.verticalAlign,
-            value: verticalLabelAlign,
-            onValueChange: handleValueChange
-          }
-        )
-      ] })
-    ] })
+  if (labelAlign === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.label-align"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_StylePanelButtonPicker.StylePanelButtonPicker,
+      {
+        title: msg("style-panel.label-align"),
+        uiType: "align",
+        style: import_editor.DefaultHorizontalAlignStyle,
+        items: import_styles.STYLES.horizontalAlign,
+        value: labelAlign
+      }
+    ),
+    verticalLabelAlign === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TldrawUiToolbar.TldrawUiToolbarButton,
+      {
+        type: "icon",
+        title: msg("style-panel.vertical-align"),
+        "data-testid": "vertical-align",
+        disabled: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "vertical-align-middle" })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_StylePanelDropdownPicker.StylePanelDropdownPicker,
+      {
+        type: "icon",
+        id: "geo-vertical-alignment",
+        uiType: "verticalAlign",
+        stylePanelType: "vertical-align",
+        style: import_editor.DefaultVerticalAlignStyle,
+        items: import_styles.STYLES.verticalAlign,
+        value: verticalLabelAlign
+      }
+    )
   ] });
 }
-function GeoStylePickerSet({ styles }) {
-  const msg = (0, import_useTranslation.useTranslation)();
-  const handleValueChange = useStyleChangeCallback();
+function StylePanelGeoShapePicker() {
+  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
   const geo = styles.get(import_editor.GeoShapeGeoStyle);
-  if (geo === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.geo"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_DropdownPicker.DropdownPicker,
+  if (geo === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_StylePanelDropdownPicker.StylePanelDropdownPicker,
     {
-      id: "geo",
-      type: "menu",
       label: "style-panel.geo",
+      type: "menu",
+      id: "geo",
       uiType: "geo",
       stylePanelType: "geo",
       style: import_editor.GeoShapeGeoStyle,
       items: import_styles.STYLES.geo,
-      value: geo,
-      onValueChange: handleValueChange
+      value: geo
     }
-  ) });
-}
-function SplineStylePickerSet({ styles }) {
-  const msg = (0, import_useTranslation.useTranslation)();
-  const handleValueChange = useStyleChangeCallback();
-  const spline = styles.get(import_editor.LineShapeSplineStyle);
-  if (spline === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.spline"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_DropdownPicker.DropdownPicker,
-    {
-      id: "spline",
-      type: "menu",
-      label: "style-panel.spline",
-      uiType: "spline",
-      stylePanelType: "spline",
-      style: import_editor.LineShapeSplineStyle,
-      items: import_styles.STYLES.spline,
-      value: spline,
-      onValueChange: handleValueChange
-    }
-  ) });
+  );
 }
-function ArrowStylePickerSet({ styles }) {
-  const msg = (0, import_useTranslation.useTranslation)();
-  const handleValueChange = useStyleChangeCallback();
+function StylePanelArrowKindPicker() {
+  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
   const arrowKind = styles.get(import_editor.ArrowShapeKindStyle);
-  if (arrowKind === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: "horizontal", label: msg("style-panel.arrow-kind"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_DropdownPicker.DropdownPicker,
+  if (arrowKind === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_StylePanelDropdownPicker.StylePanelDropdownPicker,
     {
       id: "arrow-kind",
       type: "menu",
@@ -347,20 +318,17 @@ function ArrowStylePickerSet({ styles }) {
       stylePanelType: "arrow-kind",
       style: import_editor.ArrowShapeKindStyle,
       items: import_styles.STYLES.arrowKind,
-      value: arrowKind,
-      onValueChange: handleValueChange
+      value: arrowKind
     }
-  ) });
+  );
 }
-function ArrowheadStylePickerSet({ styles }) {
-  const handleValueChange = useStyleChangeCallback();
+function StylePanelArrowheadPicker() {
+  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
   const arrowheadEnd = styles.get(import_editor.ArrowShapeArrowheadEndStyle);
   const arrowheadStart = styles.get(import_editor.ArrowShapeArrowheadStartStyle);
-  if (!arrowheadEnd || !arrowheadStart) {
-    return null;
-  }
+  if (arrowheadEnd === void 0 || arrowheadStart === void 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_DoubleDropdownPicker.DoubleDropdownPicker,
+    import_StylePanelDoubleDropdownPicker.StylePanelDoubleDropdownPicker,
     {
       label: "style-panel.arrowheads",
       uiTypeA: "arrowheadStart",
@@ -371,56 +339,27 @@ function ArrowheadStylePickerSet({ styles }) {
       styleB: import_editor.ArrowShapeArrowheadEndStyle,
       itemsB: import_styles.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 = (0, import_editor.useEditor)();
-  const onHistoryMark = (0, import_react.useCallback)((id) => editor.markHistoryStoppingPoint(id), [editor]);
-  const showUiLabels = (0, import_editor.useValue)("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
-  const opacity = (0, import_editor.useValue)("opacity", () => editor.getSharedOpacity(), [editor]);
-  const trackEvent = (0, import_events.useUiEvents)();
-  const msg = (0, import_useTranslation.useTranslation)();
-  const handleOpacityValueChange = import_react.default.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(
-    (0, import_editor.minBy)(
-      tldrawSupportedOpacities,
-      (supportedOpacity) => Math.abs(supportedOpacity - opacity.value)
-    )
+function StylePanelSplinePicker() {
+  const { styles } = (0, import_StylePanelContext.useStylePanelContext)();
+  const spline = styles.get(import_editor.LineShapeSplineStyle);
+  if (spline === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_StylePanelDropdownPicker.StylePanelDropdownPicker,
+    {
+      type: "menu",
+      id: "spline",
+      uiType: "spline",
+      stylePanelType: "spline",
+      label: "style-panel.spline",
+      style: import_editor.LineShapeSplineStyle,
+      items: import_styles.STYLES.spline,
+      value: spline
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    showUiLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StylePanelSubheading, { children: msg("style-panel.opacity") }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiSlider.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
-      }
-    )
-  ] });
 }
 //# sourceMappingURL=DefaultStylePanelContent.js.map