tldraw 3.16.0-next.fe14f1b4181f → 4.0.0

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

@@ -12,417 +12,335 @@ import {
 	DefaultVerticalAlignStyle,
 	GeoShapeGeoStyle,
 	LineShapeSplineStyle,
-	ReadonlySharedStyleMap,
-	StyleProp,
 	TLArrowShapeArrowheadStyle,
-	TLDefaultColorTheme,
-	getDefaultColorTheme,
 	kickoutOccludedShapes,
 	minBy,
 	useEditor,
-	useIsDarkMode,
 	useValue,
 } from '@tldraw/editor'
-import React, { useCallback } from 'react'
+import React from 'react'
 import { STYLES } from '../../../styles'
 import { useUiEvents } from '../../context/events'
-import { useRelevantStyles } from '../../hooks/useRelevantStyles'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
-import { TldrawUiButtonPicker } from '../primitives/TldrawUiButtonPicker'
 import { TldrawUiSlider } from '../primitives/TldrawUiSlider'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
-import { DoubleDropdownPicker } from './DoubleDropdownPicker'
-import { DropdownPicker } from './DropdownPicker'
+import { StylePanelButtonPicker } from './StylePanelButtonPicker'
+import { useStylePanelContext } from './StylePanelContext'
+import { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'
+import { StylePanelDropdownPicker } from './StylePanelDropdownPicker'
+import { StylePanelSubheading } from './StylePanelSubheading'
 
-// Local component for style panel subheadings
-function StylePanelSubheading({ children }: { children: React.ReactNode }) {
-	return <h3 className="tlui-style-panel__subheading">{children}</h3>
+/** @public @react */
+export function DefaultStylePanelContent() {
+	return (
+		<>
+			<StylePanelSection>
+				<StylePanelColorPicker />
+				<StylePanelOpacityPicker />
+			</StylePanelSection>
+			<StylePanelSection>
+				<StylePanelFillPicker />
+				<StylePanelDashPicker />
+				<StylePanelSizePicker />
+			</StylePanelSection>
+			<StylePanelSection>
+				<StylePanelFontPicker />
+				<StylePanelTextAlignPicker />
+				<StylePanelLabelAlignPicker />
+			</StylePanelSection>
+			<StylePanelSection>
+				<StylePanelGeoShapePicker />
+				<StylePanelArrowKindPicker />
+				<StylePanelArrowheadPicker />
+				<StylePanelSplinePicker />
+			</StylePanelSection>
+		</>
+	)
 }
 
 /** @public */
-export interface TLUiStylePanelContentProps {
-	styles: ReturnType<typeof useRelevantStyles>
+export interface StylePanelSectionProps {
+	children: React.ReactNode
 }
 
 /** @public @react */
-export function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps) {
-	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 === undefined
-	const hideArrowHeads = arrowheadEnd === undefined && arrowheadStart === undefined
-	const hideSpline = spline === undefined
-	const hideArrowKind = arrowKind === undefined
-	const hideText = font === undefined
+export function StylePanelSection({ children }: StylePanelSectionProps) {
+	return <div className="tlui-style-panel__section">{children}</div>
+}
 
-	const theme = getDefaultColorTheme({ isDarkMode: isDarkMode })
+/** @public @react */
+export function StylePanelColorPicker() {
+	const { styles } = useStylePanelContext()
+	const msg = useTranslation()
+	const color = styles.get(DefaultColorStyle)
+	if (color === undefined) return null
 
 	return (
-		<>
-			<CommonStylePickerSet theme={theme} styles={styles} />
-			{!hideText && <TextStylePickerSet theme={theme} styles={styles} />}
-			{!(hideGeo && hideArrowHeads && hideSpline && hideArrowKind) && (
-				<div className="tlui-style-panel__section">
-					<GeoStylePickerSet styles={styles} />
-					<ArrowStylePickerSet styles={styles} />
-					<ArrowheadStylePickerSet styles={styles} />
-					<SplineStylePickerSet styles={styles} />
-				</div>
-			)}
-		</>
+		<StylePanelButtonPicker
+			title={msg('style-panel.color')}
+			uiType="color"
+			style={DefaultColorStyle}
+			items={STYLES.color}
+			value={color}
+		/>
 	)
 }
 
-function useStyleChangeCallback() {
+const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const
+/** @public @react */
+export function StylePanelOpacityPicker() {
 	const editor = useEditor()
+	const { onHistoryMark, enhancedA11yMode } = useStylePanelContext()
+
+	const opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])
 	const trackEvent = useUiEvents()
+	const msg = useTranslation()
+
+	const handleOpacityValueChange = React.useCallback(
+		(value: number) => {
+			const item = tldrawSupportedOpacities[value]
+			editor.run(() => {
+				if (editor.isIn('select')) {
+					editor.setOpacityForSelectedShapes(item)
+				}
+				editor.setOpacityForNextShapes(item)
+				editor.updateInstanceState({ isChangingStyle: true })
+			})
 
-	return React.useMemo(
-		() =>
-			function handleStyleChange<T>(style: StyleProp<T>, value: T) {
-				editor.run(() => {
-					if (editor.isIn('select')) {
-						editor.setStyleForSelectedShapes(style, value)
-					}
-					editor.setStyleForNextShapes(style, value)
-					editor.updateInstanceState({ isChangingStyle: true })
-				})
-
-				trackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })
-			},
+			trackEvent('set-style', { source: 'style-panel', id: 'opacity', value })
+		},
 		[editor, trackEvent]
 	)
-}
 
-/** @public */
-export interface ThemeStylePickerSetProps {
-	styles: ReadonlySharedStyleMap
-	theme: TLDefaultColorTheme
-}
+	if (opacity === undefined) return null
 
-/** @public */
-export interface StylePickerSetProps {
-	styles: ReadonlySharedStyleMap
+	const opacityIndex =
+		opacity.type === 'mixed'
+			? -1
+			: tldrawSupportedOpacities.indexOf(
+					minBy(tldrawSupportedOpacities, (supportedOpacity) =>
+						Math.abs(supportedOpacity - opacity.value)
+					)!
+				)
+
+	return (
+		<>
+			{enhancedA11yMode && (
+				<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>
+			)}
+			<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={onHistoryMark}
+				ariaValueModifier={25}
+			/>
+		</>
+	)
 }
 
 /** @public @react */
-export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps) {
+export function StylePanelFillPicker() {
+	const { styles } = useStylePanelContext()
 	const msg = useTranslation()
-	const editor = useEditor()
-
-	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+	const fill = styles.get(DefaultFillStyle)
+	if (fill === undefined) return null
 
-	const handleValueChange = useStyleChangeCallback()
+	return (
+		<StylePanelButtonPicker
+			title={msg('style-panel.fill')}
+			uiType="fill"
+			style={DefaultFillStyle}
+			items={STYLES.fill}
+			value={fill}
+		/>
+	)
+}
 
-	const color = styles.get(DefaultColorStyle)
-	const fill = styles.get(DefaultFillStyle)
+/** @public @react */
+export function StylePanelDashPicker() {
+	const { styles } = useStylePanelContext()
+	const msg = useTranslation()
 	const dash = styles.get(DefaultDashStyle)
-	const size = styles.get(DefaultSizeStyle)
-
-	const showPickers = fill !== undefined || dash !== undefined || size !== undefined
+	if (dash === undefined) return null
 
 	return (
-		<>
-			<div className="tlui-style-panel__section__common" data-testid="style.panel">
-				{color === undefined ? null : (
-					<>
-						{showUiLabels && (
-							<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>
-						)}
-						<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.color')}>
-							<TldrawUiButtonPicker
-								title={msg('style-panel.color')}
-								uiType="color"
-								style={DefaultColorStyle}
-								items={STYLES.color}
-								value={color}
-								onValueChange={handleValueChange}
-								theme={theme}
-								onHistoryMark={onHistoryMark}
-							/>
-						</TldrawUiToolbar>
-					</>
-				)}
-				<OpacitySlider />
-			</div>
-			{showPickers && (
-				<div className="tlui-style-panel__section">
-					{fill === undefined ? null : (
-						<>
-							{showUiLabels && (
-								<StylePanelSubheading>{msg('style-panel.fill')}</StylePanelSubheading>
-							)}
-							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.fill')}>
-								<TldrawUiButtonPicker
-									title={msg('style-panel.fill')}
-									uiType="fill"
-									style={DefaultFillStyle}
-									items={STYLES.fill}
-									value={fill}
-									onValueChange={handleValueChange}
-									theme={theme}
-									onHistoryMark={onHistoryMark}
-								/>
-							</TldrawUiToolbar>
-						</>
-					)}
-					{dash === undefined ? null : (
-						<>
-							{showUiLabels && (
-								<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>
-							)}
-							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.dash')}>
-								<TldrawUiButtonPicker
-									title={msg('style-panel.dash')}
-									uiType="dash"
-									style={DefaultDashStyle}
-									items={STYLES.dash}
-									value={dash}
-									onValueChange={handleValueChange}
-									theme={theme}
-									onHistoryMark={onHistoryMark}
-								/>
-							</TldrawUiToolbar>
-						</>
-					)}
-					{size === undefined ? null : (
-						<>
-							{showUiLabels && (
-								<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>
-							)}
-							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.size')}>
-								<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={theme}
-									onHistoryMark={onHistoryMark}
-								/>
-							</TldrawUiToolbar>
-						</>
-					)}
-				</div>
-			)}
-		</>
+		<StylePanelButtonPicker
+			title={msg('style-panel.dash')}
+			uiType="dash"
+			style={DefaultDashStyle}
+			items={STYLES.dash}
+			value={dash}
+		/>
 	)
 }
 
 /** @public @react */
-export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps) {
+export function StylePanelSizePicker() {
+	const editor = useEditor()
+	const { styles, onValueChange } = useStylePanelContext()
 	const msg = useTranslation()
-	const handleValueChange = useStyleChangeCallback()
+	const size = styles.get(DefaultSizeStyle)
+	if (size === undefined) return null
 
-	const editor = useEditor()
-	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
-	const labelStr = showUiLabels && msg('style-panel.font')
+	return (
+		<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)
+				}
+			}}
+		/>
+	)
+}
 
+/** @public @react */
+export function StylePanelFontPicker() {
+	const { styles } = useStylePanelContext()
+	const msg = useTranslation()
 	const font = styles.get(DefaultFontStyle)
-	const textAlign = styles.get(DefaultTextAlignStyle)
-	const labelAlign = styles.get(DefaultHorizontalAlignStyle)
-	const verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)
-	if (font === undefined && labelAlign === undefined) {
-		return null
-	}
+	if (font === undefined) return null
 
 	return (
-		<div className="tlui-style-panel__section">
-			{font === undefined ? null : (
-				<>
-					{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}
-					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.font')}>
-						<TldrawUiButtonPicker
-							title={msg('style-panel.font')}
-							uiType="font"
-							style={DefaultFontStyle}
-							items={STYLES.font}
-							value={font}
-							onValueChange={handleValueChange}
-							theme={theme}
-							onHistoryMark={onHistoryMark}
-						/>
-					</TldrawUiToolbar>
-				</>
-			)}
-
-			{textAlign === undefined ? null : (
-				<>
-					{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}
-					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.align')}>
-						<TldrawUiButtonPicker
-							title={msg('style-panel.align')}
-							uiType="align"
-							style={DefaultTextAlignStyle}
-							items={STYLES.textAlign}
-							value={textAlign}
-							onValueChange={handleValueChange}
-							theme={theme}
-							onHistoryMark={onHistoryMark}
-						/>
-						<TldrawUiToolbarButton
-							type="icon"
-							title={msg('style-panel.vertical-align')}
-							data-testid="vertical-align"
-							disabled
-						>
-							<TldrawUiButtonIcon icon="vertical-align-middle" />
-						</TldrawUiToolbarButton>
-					</TldrawUiToolbar>
-				</>
-			)}
-
-			{labelAlign === undefined ? null : (
-				<>
-					{showUiLabels && (
-						<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>
-					)}
-					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.label-align')}>
-						<TldrawUiButtonPicker
-							title={msg('style-panel.label-align')}
-							uiType="align"
-							style={DefaultHorizontalAlignStyle}
-							items={STYLES.horizontalAlign}
-							value={labelAlign}
-							onValueChange={handleValueChange}
-							theme={theme}
-							onHistoryMark={onHistoryMark}
-						/>
-						{verticalLabelAlign === undefined ? (
-							<TldrawUiToolbarButton
-								type="icon"
-								title={msg('style-panel.vertical-align')}
-								data-testid="vertical-align"
-								disabled
-							>
-								<TldrawUiButtonIcon icon="vertical-align-middle" />
-							</TldrawUiToolbarButton>
-						) : (
-							<DropdownPicker
-								type="icon"
-								id="geo-vertical-alignment"
-								uiType="verticalAlign"
-								stylePanelType="vertical-align"
-								style={DefaultVerticalAlignStyle}
-								items={STYLES.verticalAlign}
-								value={verticalLabelAlign}
-								onValueChange={handleValueChange}
-							/>
-						)}
-					</TldrawUiToolbar>
-				</>
-			)}
-		</div>
+		<StylePanelButtonPicker
+			title={msg('style-panel.font')}
+			uiType="font"
+			style={DefaultFontStyle}
+			items={STYLES.font}
+			value={font}
+		/>
 	)
 }
+
 /** @public @react */
-export function GeoStylePickerSet({ styles }: StylePickerSetProps) {
+export function StylePanelTextAlignPicker() {
+	const { styles } = useStylePanelContext()
 	const msg = useTranslation()
-	const handleValueChange = useStyleChangeCallback()
-
-	const geo = styles.get(GeoShapeGeoStyle)
-	if (geo === undefined) {
-		return null
-	}
+	const textAlign = styles.get(DefaultTextAlignStyle)
+	if (textAlign === undefined) return null
 
 	return (
-		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.geo')}>
-			<DropdownPicker
-				id="geo"
-				type="menu"
-				label={'style-panel.geo'}
-				uiType="geo"
-				stylePanelType="geo"
-				style={GeoShapeGeoStyle}
-				items={STYLES.geo}
-				value={geo}
-				onValueChange={handleValueChange}
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.align')}>
+			<StylePanelButtonPicker
+				title={msg('style-panel.align')}
+				uiType="align"
+				style={DefaultTextAlignStyle}
+				items={STYLES.textAlign}
+				value={textAlign}
 			/>
+			<TldrawUiToolbarButton
+				type="icon"
+				title={msg('style-panel.vertical-align')}
+				data-testid="vertical-align"
+				disabled
+			>
+				<TldrawUiButtonIcon icon="vertical-align-middle" />
+			</TldrawUiToolbarButton>
 		</TldrawUiToolbar>
 	)
 }
+
 /** @public @react */
-export function SplineStylePickerSet({ styles }: StylePickerSetProps) {
+export function StylePanelLabelAlignPicker() {
+	const { styles } = useStylePanelContext()
 	const msg = useTranslation()
-	const handleValueChange = useStyleChangeCallback()
-
-	const spline = styles.get(LineShapeSplineStyle)
-	if (spline === undefined) {
-		return null
-	}
+	const labelAlign = styles.get(DefaultHorizontalAlignStyle)
+	const verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)
+	if (labelAlign === undefined) return null
 
 	return (
-		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.spline')}>
-			<DropdownPicker
-				id="spline"
-				type="menu"
-				label={'style-panel.spline'}
-				uiType="spline"
-				stylePanelType="spline"
-				style={LineShapeSplineStyle}
-				items={STYLES.spline}
-				value={spline}
-				onValueChange={handleValueChange}
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.label-align')}>
+			<StylePanelButtonPicker
+				title={msg('style-panel.label-align')}
+				uiType="align"
+				style={DefaultHorizontalAlignStyle}
+				items={STYLES.horizontalAlign}
+				value={labelAlign}
 			/>
+			{verticalLabelAlign === undefined ? (
+				<TldrawUiToolbarButton
+					type="icon"
+					title={msg('style-panel.vertical-align')}
+					data-testid="vertical-align"
+					disabled
+				>
+					<TldrawUiButtonIcon icon="vertical-align-middle" />
+				</TldrawUiToolbarButton>
+			) : (
+				<StylePanelDropdownPicker
+					type="icon"
+					id="geo-vertical-alignment"
+					uiType="verticalAlign"
+					stylePanelType="vertical-align"
+					style={DefaultVerticalAlignStyle}
+					items={STYLES.verticalAlign}
+					value={verticalLabelAlign}
+				/>
+			)}
 		</TldrawUiToolbar>
 	)
 }
+
 /** @public @react */
-export function ArrowStylePickerSet({ styles }: StylePickerSetProps) {
-	const msg = useTranslation()
-	const handleValueChange = useStyleChangeCallback()
+export function StylePanelGeoShapePicker() {
+	const { styles } = useStylePanelContext()
+	const geo = styles.get(GeoShapeGeoStyle)
+	if (geo === undefined) return null
+
+	return (
+		<StylePanelDropdownPicker
+			label="style-panel.geo"
+			type="menu"
+			id="geo"
+			uiType="geo"
+			stylePanelType="geo"
+			style={GeoShapeGeoStyle}
+			items={STYLES.geo}
+			value={geo}
+		/>
+	)
+}
 
+/** @public @react */
+export function StylePanelArrowKindPicker() {
+	const { styles } = useStylePanelContext()
 	const arrowKind = styles.get(ArrowShapeKindStyle)
-	if (arrowKind === undefined) {
-		return null
-	}
+	if (arrowKind === undefined) return null
 
 	return (
-		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.arrow-kind')}>
-			<DropdownPicker
-				id="arrow-kind"
-				type="menu"
-				label={'style-panel.arrow-kind'}
-				uiType="arrow-kind"
-				stylePanelType="arrow-kind"
-				style={ArrowShapeKindStyle}
-				items={STYLES.arrowKind}
-				value={arrowKind}
-				onValueChange={handleValueChange}
-			/>
-		</TldrawUiToolbar>
+		<StylePanelDropdownPicker
+			id="arrow-kind"
+			type="menu"
+			label={'style-panel.arrow-kind'}
+			uiType="arrow-kind"
+			stylePanelType="arrow-kind"
+			style={ArrowShapeKindStyle}
+			items={STYLES.arrowKind}
+			value={arrowKind}
+		/>
 	)
 }
-/** @public @react */
-export function ArrowheadStylePickerSet({ styles }: StylePickerSetProps) {
-	const handleValueChange = useStyleChangeCallback()
 
+/** @public @react */
+export function StylePanelArrowheadPicker() {
+	const { styles } = useStylePanelContext()
 	const arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)
 	const arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)
-	if (!arrowheadEnd || !arrowheadStart) {
-		return null
-	}
+	if (arrowheadEnd === undefined || arrowheadStart === undefined) return null
 
 	return (
-		<DoubleDropdownPicker<TLArrowShapeArrowheadStyle>
+		<StylePanelDoubleDropdownPicker<TLArrowShapeArrowheadStyle>
 			label={'style-panel.arrowheads'}
 			uiTypeA="arrowheadStart"
 			styleA={ArrowShapeArrowheadStartStyle}
@@ -432,65 +350,28 @@ export function ArrowheadStylePickerSet({ styles }: StylePickerSetProps) {
 			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] as const
 /** @public @react */
-export function OpacitySlider() {
-	const editor = useEditor()
-
-	const onHistoryMark = useCallback((id: string) => 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: number) => {
-			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 === undefined) return null
-
-	const opacityIndex =
-		opacity.type === 'mixed'
-			? -1
-			: tldrawSupportedOpacities.indexOf(
-					minBy(tldrawSupportedOpacities, (supportedOpacity) =>
-						Math.abs(supportedOpacity - opacity.value)
-					)!
-				)
+export function StylePanelSplinePicker() {
+	const { styles } = useStylePanelContext()
+	const spline = styles.get(LineShapeSplineStyle)
+	if (spline === undefined) return null
 
 	return (
-		<>
-			{showUiLabels && <StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>}
-			<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={onHistoryMark}
-				ariaValueModifier={25}
-			/>
-		</>
+		<StylePanelDropdownPicker
+			type="menu"
+			id="spline"
+			uiType="spline"
+			stylePanelType="spline"
+			label="style-panel.spline"
+			style={LineShapeSplineStyle}
+			items={STYLES.spline}
+			value={spline}
+		/>
 	)
 }