feat(ui): allow cmd+click on style panel items to skip next-shape style updates (tldraw#8452)

In order to let users make one-off style changes without affecting
defaults for future shapes, this PR adds accelerator key (Cmd on Mac /
Ctrl on Windows/Linux) modifier support to all style panel controls.
When the modifier is held while shapes are selected, the style change
applies only to those shapes and does not update `stylesForNextShape` or
`opacityForNextShape`. Closes tldraw#8431.

The implementation checks `editor.inputs.getAccelKey()` directly in
`StylePanelContext`, which provides both `onValueChange` (for styles)
and a new `onOpacityChange` (for opacity). This keeps the modifier logic
centralized — no changes needed in individual picker components.

### Change type

- [x] `feature`

### Test plan

1. Select a shape on the canvas
2. Click a color in the style panel — verify it changes the shape AND
updates the default for new shapes
3. Select another shape, hold Cmd (Mac) / Ctrl (Win/Linux) and click a
different color — verify it changes the shape but new shapes still use
the previous default
4. Test the same with opacity slider, fill, dash, size, font, geo,
arrowhead, and spline pickers
5. Test drag-to-paint (pointer down + drag across items) with Cmd held —
verify modifier is respected throughout the drag

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Add accelerator key modifier (Cmd on Mac / Ctrl on Windows/Linux) to
style panel items to apply styles to selected shapes only, without
changing the default style for new shapes.

### API changes

- Added `StylePanelContext.onOpacityChange(opacity: number)` —
centralizes opacity change handling with the same modifier-key behavior
as `onValueChange`

### Code changes

| Section         | LOC change |
| --------------- | ---------- |
| Core code       | +43 / -16  |
| Automated files | +2 / -0    |

Author: steveruizok

packages/tldraw/api-report.api.md

@@ -3149,6 +3149,8 @@ export interface StylePanelContext {
     // (undocumented)
     onHistoryMark(id: string): void;
     // (undocumented)
+    onOpacityChange(opacity: number): void;
+    // (undocumented)
     onValueChange<T>(style: StyleProp<T>, value: T): void;
     // (undocumented)
     styles: ReadonlySharedStyleMap;

packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx

@@ -20,7 +20,6 @@ import {
 } from '@tldraw/editor'
 import React from 'react'
 import { getColorStyleItems, getFontStyleItems, STYLES } from '../../../styles'
-import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiSlider } from '../primitives/TldrawUiSlider'
@@ -97,26 +96,16 @@ 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 { onHistoryMark, onOpacityChange, 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 })
-			})
-
-			trackEvent('set-style', { source: 'style-panel', id: 'opacity', value })
+			onOpacityChange(tldrawSupportedOpacities[value])
 		},
-		[editor, trackEvent]
+		[onOpacityChange]
 	)
 
 	if (opacity === undefined) return null

packages/tldraw/src/lib/ui/components/StylePanel/StylePanelContext.tsx

@@ -1,4 +1,10 @@
-import { ReadonlySharedStyleMap, StyleProp, useEditor, useValue } from '@tldraw/editor'
+import {
+	ReadonlySharedStyleMap,
+	StyleProp,
+	unsafe__withoutCapture,
+	useEditor,
+	useValue,
+} from '@tldraw/editor'
 import { createContext, useCallback, useContext } from 'react'
 import { useUiEvents } from '../../context/events'
 
@@ -8,6 +14,7 @@ export interface StylePanelContext {
 	enhancedA11yMode: boolean
 	onHistoryMark(id: string): void
 	onValueChange<T>(style: StyleProp<T>, value: T): void
+	onOpacityChange(opacity: number): void
 }
 const StylePanelContext = createContext<null | StylePanelContext>(null)
 
@@ -28,11 +35,20 @@ export function StylePanelContextProvider({ children, styles }: StylePanelContex
 	])
 	const onValueChange = useCallback(
 		function <T>(style: StyleProp<T>, value: T) {
+			// If the user is holding down the accelerator key (Ctrl on Windows/Linux, Cmd on Mac)
+			// while shapes are selected, interpret that as a wish to change the style for their
+			// current selected shapes but not for the next shapes.
+			const skipNextShapeStyle = unsafe__withoutCapture(
+				() => editor.getSelectedShapeIds().length > 0 && editor.inputs.getAccelKey()
+			)
+
 			editor.run(() => {
 				if (editor.isIn('select')) {
 					editor.setStyleForSelectedShapes(style, value)
 				}
-				editor.setStyleForNextShapes(style, value)
+				if (!skipNextShapeStyle) {
+					editor.setStyleForNextShapes(style, value)
+				}
 				editor.updateInstanceState({ isChangingStyle: true })
 			})
 
@@ -41,13 +57,35 @@ export function StylePanelContextProvider({ children, styles }: StylePanelContex
 		[editor, trackEvent]
 	)
 
+	const onOpacityChange = useCallback(
+		function (opacity: number) {
+			const skipNextShapeStyle = unsafe__withoutCapture(
+				() => editor.getSelectedShapeIds().length > 0 && editor.inputs.getAccelKey()
+			)
+
+			editor.run(() => {
+				if (editor.isIn('select')) {
+					editor.setOpacityForSelectedShapes(opacity)
+				}
+				if (!skipNextShapeStyle) {
+					editor.setOpacityForNextShapes(opacity)
+				}
+				editor.updateInstanceState({ isChangingStyle: true })
+			})
+
+			trackEvent('set-style', { source: 'style-panel', id: 'opacity', value: opacity })
+		},
+		[editor, trackEvent]
+	)
+
 	return (
 		<StylePanelContext.Provider
 			value={{
 				styles: styles,
 				enhancedA11yMode,
 				onHistoryMark,
 				onValueChange,
+				onOpacityChange,
 			}}
 		>
 			{children}