diff --git a/apps/examples/src/examples/APIExample.tsx b/apps/examples/src/examples/APIExample.tsx
index 61fc1f470..668eb8e04 100644
--- a/apps/examples/src/examples/APIExample.tsx
+++ b/apps/examples/src/examples/APIExample.tsx
@@ -90,7 +90,8 @@ const InsideOfEditorContext = () => {
 		const interval = setInterval(() => {
 			const selection = [...editor.selectedShapeIds]
 			editor.selectAll()
-			editor.setStyle(DefaultColorStyle, i % 2 ? 'blue' : 'light-blue')
+			editor.setStyleForSelectedShapes(DefaultColorStyle, i % 2 ? 'blue' : 'light-blue')
+			editor.setStyleForNextShapes(DefaultColorStyle, i % 2 ? 'blue' : 'light-blue')
 			editor.setSelectedShapes(selection)
 			i++
 		}, 1000)
diff --git a/apps/examples/src/examples/CustomStylesExample/FilterStyleUi.tsx b/apps/examples/src/examples/CustomStylesExample/FilterStyleUi.tsx
index 1dacd8b22..f8c6e4bef 100644
--- a/apps/examples/src/examples/CustomStylesExample/FilterStyleUi.tsx
+++ b/apps/examples/src/examples/CustomStylesExample/FilterStyleUi.tsx
@@ -13,7 +13,14 @@ export const FilterStyleUi = track(function FilterStyleUi() {
 			filter:{' '}
 			<select
 				value={filterStyle.type === 'mixed' ? 'mixed' : filterStyle.value}
-				onChange={(e) => editor.setStyle(MyFilterStyle, e.target.value)}
+				onChange={(e) => {
+					editor.batch(() => {
+						if (editor.isIn('select')) {
+							editor.setStyleForSelectedShapes(MyFilterStyle, e.target.value)
+						}
+						editor.setStyleForNextShapes(MyFilterStyle, e.target.value)
+					})
+				}}
 			>
 				<option value="mixed" disabled>
 					Mixed
diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md
index c4e2218ee..63f46b495 100644
--- a/packages/editor/api-report.md
+++ b/packages/editor/api-report.md
@@ -815,9 +815,11 @@ export class Editor extends EventEmitter<TLEventMap> {
     setFocusedGroup(shape: null | TLGroupShape | TLShapeId): this;
     setHintingShapes(shapes: TLShape[] | TLShapeId[]): this;
     setHoveredShape(shape: null | TLShape | TLShapeId): this;
-    setOpacity(opacity: number, historyOptions?: TLCommandHistoryOptions): this;
+    setOpacityForNextShapes(opacity: number, historyOptions?: TLCommandHistoryOptions): this;
+    setOpacityForSelectedShapes(opacity: number, historyOptions?: TLCommandHistoryOptions): this;
     setSelectedShapes(shapes: TLShape[] | TLShapeId[], historyOptions?: TLCommandHistoryOptions): this;
-    setStyle<T>(style: StyleProp<T>, value: T, historyOptions?: TLCommandHistoryOptions): this;
+    setStyleForNextShapes<T>(style: StyleProp<T>, value: T, historyOptions?: TLCommandHistoryOptions): this;
+    setStyleForSelectedShapes<T>(style: StyleProp<T>, value: T, historyOptions?: TLCommandHistoryOptions): this;
     shapeUtils: {
         readonly [K in string]?: ShapeUtil<TLUnknownShape>;
     };
diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts
index 956afc553..fcb433450 100644
--- a/packages/editor/src/lib/editor/Editor.ts
+++ b/packages/editor/src/lib/editor/Editor.ts
@@ -1210,7 +1210,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			partial: Partial<Omit<TLInstance, 'currentPageId'>>,
 			historyOptions?: TLCommandHistoryOptions
 		) => {
-			const prev = this.instanceState
+			const prev = this.store.get(this.instanceState.id)!
 			const next = { ...prev, ...partial }
 
 			return {
@@ -7246,74 +7246,79 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/**
-	 * Set the current opacity. This will effect any selected shapes, or the
-	 * next-created shape.
+	 * Set the opacity for the next shapes. This will effect subsequently created shapes.
 	 *
 	 * @example
 	 * ```ts
-	 * editor.setOpacity(0.5)
-	 * editor.setOpacity(0.5, { squashing: true })
+	 * editor.setOpacityForNextShapes(0.5)
+	 * editor.setOpacityForNextShapes(0.5, { squashing: true })
 	 * ```
 	 *
 	 * @param opacity - The opacity to set. Must be a number between 0 and 1 inclusive.
 	 * @param historyOptions - The history options for the change.
 	 */
-	setOpacity(opacity: number, historyOptions?: TLCommandHistoryOptions): this {
-		this.history.batch(() => {
-			if (this.isIn('select')) {
-				const {
-					currentPageState: { selectedShapeIds },
-				} = this
+	setOpacityForNextShapes(opacity: number, historyOptions?: TLCommandHistoryOptions): this {
+		this.updateInstanceState({ opacityForNextShape: opacity }, historyOptions)
+		return this
+	}
 
-				const shapesToUpdate: TLShape[] = []
+	/**
+	 * Set the current opacity. This will effect any selected shapes.
+	 *
+	 * @example
+	 * ```ts
+	 * editor.setOpacityForSelectedShapes(0.5)
+	 * editor.setOpacityForSelectedShapes(0.5, { squashing: true })
+	 * ```
+	 *
+	 * @param opacity - The opacity to set. Must be a number between 0 and 1 inclusive.
+	 * @param historyOptions - The history options for the change.
+	 */
+	setOpacityForSelectedShapes(opacity: number, historyOptions?: TLCommandHistoryOptions): this {
+		const { selectedShapes } = this
 
-				// We can have many deep levels of grouped shape
-				// Making a recursive function to look through all the levels
-				const addShapeById = (id: TLShape['id']) => {
-					const shape = this.getShape(id)
-					if (!shape) return
-					if (this.isShapeOfType<TLGroupShape>(shape, 'group')) {
-						const childIds = this.getSortedChildIdsForParent(id)
-						for (const childId of childIds) {
-							addShapeById(childId)
-						}
-					} else {
-						shapesToUpdate.push(shape)
+		if (selectedShapes.length > 0) {
+			const shapesToUpdate: TLShape[] = []
+
+			// We can have many deep levels of grouped shape
+			// Making a recursive function to look through all the levels
+			const addShapeById = (shape: TLShape) => {
+				if (this.isShapeOfType<TLGroupShape>(shape, 'group')) {
+					const childIds = this.getSortedChildIdsForParent(shape)
+					for (const childId of childIds) {
+						addShapeById(this.getShape(childId)!)
 					}
-				}
-
-				if (selectedShapeIds.length > 0) {
-					for (const id of selectedShapeIds) {
-						addShapeById(id)
-					}
-
-					this.updateShapes(
-						shapesToUpdate.map((shape) => {
-							return {
-								id: shape.id,
-								type: shape.type,
-								opacity,
-							}
-						}),
-						historyOptions
-					)
+				} else {
+					shapesToUpdate.push(shape)
 				}
 			}
 
-			this.updateInstanceState({ opacityForNextShape: opacity }, historyOptions)
-		})
+			for (const id of selectedShapes) {
+				addShapeById(id)
+			}
+
+			this.updateShapes(
+				shapesToUpdate.map((shape) => {
+					return {
+						id: shape.id,
+						type: shape.type,
+						opacity,
+					}
+				}),
+				historyOptions
+			)
+		}
 
 		return this
 	}
 
 	/**
-	 * Set the value of a {@link @tldraw/tlschema#StyleProp}. This change will be applied to any
-	 * selected shapes, and any subsequently created shapes.
+	 * Set the value of a {@link @tldraw/tlschema#StyleProp} for the selected shapes.
 	 *
 	 * @example
 	 * ```ts
-	 * editor.setStyle(DefaultColorStyle, 'red')
-	 * editor.setStyle(DefaultColorStyle, 'red', { ephemeral: true })
+	 * editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
+	 * editor.setStyleForSelectedShapes(DefaultColorStyle, 'red', { ephemeral: true })
 	 * ```
 	 *
 	 * @param style - The style to set.
@@ -7322,61 +7327,87 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	setStyle<T>(style: StyleProp<T>, value: T, historyOptions?: TLCommandHistoryOptions): this {
-		this.history.batch(() => {
-			if (this.isIn('select')) {
-				const {
-					currentPageState: { selectedShapeIds },
-				} = this
+	setStyleForNextShapes<T>(
+		style: StyleProp<T>,
+		value: T,
+		historyOptions?: TLCommandHistoryOptions
+	): this {
+		const {
+			instanceState: { stylesForNextShape },
+		} = this
 
-				if (selectedShapeIds.length > 0) {
-					const updates: {
-						util: ShapeUtil
-						originalShape: TLShape
-						updatePartial: TLShapePartial
-					}[] = []
+		this.updateInstanceState(
+			{ stylesForNextShape: { ...stylesForNextShape, [style.id]: value } },
+			historyOptions
+		)
 
-					// We can have many deep levels of grouped shape
-					// Making a recursive function to look through all the levels
-					const addShapeById = (id: TLShape['id']) => {
-						const shape = this.getShape(id)
-						if (!shape) return
-						if (this.isShapeOfType<TLGroupShape>(shape, 'group')) {
-							const childIds = this.getSortedChildIdsForParent(id)
-							for (const childId of childIds) {
-								addShapeById(childId)
-							}
-						} else {
-							const util = this.getShapeUtil(shape)
-							const stylePropKey = this.styleProps[shape.type].get(style)
-							if (stylePropKey) {
-								const shapePartial: TLShapePartial = {
-									id: shape.id,
-									type: shape.type,
-									props: { [stylePropKey]: value },
-								}
-								updates.push({
-									util,
-									originalShape: shape,
-									updatePartial: shapePartial,
-								})
-							}
+		return this
+	}
+
+	/**
+	 * Set the value of a {@link @tldraw/tlschema#StyleProp}. This change will be applied to the currently selected shapes.
+	 *
+	 * @example
+	 * ```ts
+	 * editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
+	 * editor.setStyleForSelectedShapes(DefaultColorStyle, 'red', { ephemeral: true })
+	 * ```
+	 *
+	 * @param style - The style to set.
+	 * @param value - The value to set.
+	 * @param historyOptions - (optional) The history options for the change.
+	 *
+	 * @public
+	 */
+	setStyleForSelectedShapes<T>(
+		style: StyleProp<T>,
+		value: T,
+		historyOptions?: TLCommandHistoryOptions
+	): this {
+		const { selectedShapes } = this
+
+		if (selectedShapes.length > 0) {
+			const updates: {
+				util: ShapeUtil
+				originalShape: TLShape
+				updatePartial: TLShapePartial
+			}[] = []
+
+			// We can have many deep levels of grouped shape
+			// Making a recursive function to look through all the levels
+			const addShapeById = (shape: TLShape) => {
+				if (this.isShapeOfType<TLGroupShape>(shape, 'group')) {
+					const childIds = this.getSortedChildIdsForParent(shape.id)
+					for (const childId of childIds) {
+						addShapeById(this.getShape(childId)!)
+					}
+				} else {
+					const util = this.getShapeUtil(shape)
+					const stylePropKey = this.styleProps[shape.type].get(style)
+					if (stylePropKey) {
+						const shapePartial: TLShapePartial = {
+							id: shape.id,
+							type: shape.type,
+							props: { [stylePropKey]: value },
 						}
+						updates.push({
+							util,
+							originalShape: shape,
+							updatePartial: shapePartial,
+						})
 					}
-
-					for (const id of selectedShapeIds) {
-						addShapeById(id)
-					}
-
-					this.updateShapes(
-						updates.map(({ updatePartial }) => updatePartial),
-						historyOptions
-					)
 				}
 			}
 
-			this.updateInstanceState({ stylesForNextShape: { [style.id]: value } }, historyOptions)
-		})
+			for (const shape of selectedShapes) {
+				addShapeById(shape)
+			}
+
+			this.updateShapes(
+				updates.map(({ updatePartial }) => updatePartial),
+				historyOptions
+			)
+		}
 
 		return this
 	}
diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/StylePanel.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/StylePanel.tsx
index 281ab80af..d33233aa0 100644
--- a/packages/tldraw/src/lib/ui/components/StylePanel/StylePanel.tsx
+++ b/packages/tldraw/src/lib/ui/components/StylePanel/StylePanel.tsx
@@ -94,9 +94,14 @@ function useStyleChangeCallback() {
 	const editor = useEditor()
 
 	return React.useMemo(() => {
-		return function <T>(style: StyleProp<T>, value: T, squashing: boolean) {
-			editor.setStyle(style, value, { squashing })
-			editor.updateInstanceState({ isChangingStyle: true })
+		return function handleStyleChange<T>(style: StyleProp<T>, value: T, squashing: boolean) {
+			editor.batch(() => {
+				if (editor.isIn('select')) {
+					editor.setStyleForSelectedShapes(style, value, { squashing })
+				}
+				editor.setStyleForNextShapes(style, value, { squashing })
+				editor.updateInstanceState({ isChangingStyle: true })
+			})
 		}
 	}, [editor])
 }
@@ -118,8 +123,13 @@ function CommonStylePickerSet({
 	const handleOpacityValueChange = React.useCallback(
 		(value: number, ephemeral: boolean) => {
 			const item = tldrawSupportedOpacities[value]
-			editor.setOpacity(item, { ephemeral })
-			editor.updateInstanceState({ isChangingStyle: true })
+			editor.batch(() => {
+				if (editor.isIn('select')) {
+					editor.setOpacityForSelectedShapes(item, { ephemeral })
+				}
+				editor.setOpacityForNextShapes(item, { ephemeral })
+				editor.updateInstanceState({ isChangingStyle: true })
+			})
 		},
 		[editor]
 	)
diff --git a/packages/tldraw/src/test/Editor.test.tsx b/packages/tldraw/src/test/Editor.test.tsx
index 4d8852581..8acae1d0f 100644
--- a/packages/tldraw/src/test/Editor.test.tsx
+++ b/packages/tldraw/src/test/Editor.test.tsx
@@ -150,7 +150,8 @@ it('Does not create an undo stack item when first clicking on an empty canvas',
 describe('Editor.sharedOpacity', () => {
 	it('should return the current opacity', () => {
 		expect(editor.sharedOpacity).toStrictEqual({ type: 'shared', value: 1 })
-		editor.setOpacity(0.5)
+		editor.setOpacityForSelectedShapes(0.5)
+		editor.setOpacityForNextShapes(0.5)
 		expect(editor.sharedOpacity).toStrictEqual({ type: 'shared', value: 0.5 })
 	})
 
@@ -197,7 +198,8 @@ describe('Editor.setOpacity', () => {
 		])
 
 		editor.setSelectedShapes([ids.A, ids.B])
-		editor.setOpacity(0.5)
+		editor.setOpacityForSelectedShapes(0.5)
+		editor.setOpacityForNextShapes(0.5)
 
 		expect(editor.getShape(ids.A)!.opacity).toBe(0.5)
 		expect(editor.getShape(ids.B)!.opacity).toBe(0.5)
@@ -216,7 +218,8 @@ describe('Editor.setOpacity', () => {
 		])
 
 		editor.setSelectedShapes([ids.groupA])
-		editor.setOpacity(0.5)
+		editor.setOpacityForSelectedShapes(0.5)
+		editor.setOpacityForNextShapes(0.5)
 
 		// a wasn't selected...
 		expect(editor.getShape(ids.boxA)!.opacity).toBe(1)
@@ -232,9 +235,11 @@ describe('Editor.setOpacity', () => {
 	})
 
 	it('stores opacity on opacityForNextShape', () => {
-		editor.setOpacity(0.5)
+		editor.setOpacityForSelectedShapes(0.5)
+		editor.setOpacityForNextShapes(0.5)
 		expect(editor.instanceState.opacityForNextShape).toBe(0.5)
-		editor.setOpacity(0.6)
+		editor.setOpacityForSelectedShapes(0.6)
+		editor.setOpacityForNextShapes(0.6)
 		expect(editor.instanceState.opacityForNextShape).toBe(0.6)
 	})
 })
diff --git a/packages/tldraw/src/test/commands/createShapes.test.ts b/packages/tldraw/src/test/commands/createShapes.test.ts
index ff6921cf7..13d72b46e 100644
--- a/packages/tldraw/src/test/commands/createShapes.test.ts
+++ b/packages/tldraw/src/test/commands/createShapes.test.ts
@@ -92,14 +92,15 @@ it('Creates shapes with the current style', () => {
 	editor.createShapes([{ id: ids.box1, type: 'geo' }])
 	expect(editor.getShape<TLGeoShape>(ids.box1)!.props.color).toEqual('black')
 
-	editor.setStyle(DefaultColorStyle, 'red')
+	editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
+	editor.setStyleForNextShapes(DefaultColorStyle, 'red')
 	expect(editor.instanceState.stylesForNextShape[DefaultColorStyle.id]).toBe('red')
 	editor.createShapes([{ id: ids.box2, type: 'geo' }])
 	expect(editor.getShape<TLGeoShape>(ids.box2)!.props.color).toEqual('red')
 })
 
 it('Creates shapes with the current opacity', () => {
-	editor.setOpacity(0.5)
+	editor.setOpacityForNextShapes(0.5)
 	editor.createShapes([{ id: ids.box3, type: 'geo' }])
 	expect(editor.getShape<TLGeoShape>(ids.box3)!.opacity).toEqual(0.5)
 })
diff --git a/packages/tldraw/src/test/commands/getSvg.test.ts b/packages/tldraw/src/test/commands/getSvg.test.ts
index 02be204ba..5f088b809 100644
--- a/packages/tldraw/src/test/commands/getSvg.test.ts
+++ b/packages/tldraw/src/test/commands/getSvg.test.ts
@@ -11,7 +11,8 @@ const ids = {
 
 beforeEach(() => {
 	editor = new TestEditor()
-	editor.setStyle(DefaultDashStyle, 'solid')
+	editor.setStyleForNextShapes(DefaultDashStyle, 'solid')
+	editor.setStyleForSelectedShapes(DefaultDashStyle, 'solid')
 	editor.createShapes([
 		{
 			id: ids.boxA,
diff --git a/packages/tldraw/src/test/frames.test.ts b/packages/tldraw/src/test/frames.test.ts
index 013f8aa3c..e29219a25 100644
--- a/packages/tldraw/src/test/frames.test.ts
+++ b/packages/tldraw/src/test/frames.test.ts
@@ -494,7 +494,8 @@ describe('frame shapes', () => {
 			.pointerDown(125, 125)
 			.pointerMove(175, 175)
 			.pointerUp(175, 175)
-			.setStyle(DefaultFillStyle, 'solid')
+			.setStyleForSelectedShapes(DefaultFillStyle, 'solid')
+			.setStyleForNextShapes(DefaultFillStyle, 'solid')
 		const boxId = editor.onlySelectedShape!.id
 
 		editor.setCurrentTool('arrow')
@@ -607,7 +608,8 @@ describe('frame shapes', () => {
 			.pointerDown(150, 150)
 			.pointerMove(400, 400)
 			.pointerUp(400, 400)
-			.setStyle(DefaultFillStyle, 'solid')
+			.setStyleForSelectedShapes(DefaultFillStyle, 'solid')
+			.setStyleForNextShapes(DefaultFillStyle, 'solid')
 		const innerBoxId = editor.onlySelectedShape!.id
 
 		// Make an arrow that binds to the inner box's bottom right corner
@@ -660,7 +662,8 @@ test('arrows bound to a shape within a group within a frame are reparented if th
 		.pointerDown(110, 110)
 		.pointerMove(120, 120)
 		.pointerUp(120, 120)
-		.setStyle(DefaultFillStyle, 'solid')
+		.setStyleForSelectedShapes(DefaultFillStyle, 'solid')
+		.setStyleForNextShapes(DefaultFillStyle, 'solid')
 	const boxAId = editor.onlySelectedShape!.id
 
 	editor.setCurrentTool('geo')
@@ -668,7 +671,8 @@ test('arrows bound to a shape within a group within a frame are reparented if th
 		.pointerDown(180, 110)
 		.pointerMove(190, 120)
 		.pointerUp(190, 120)
-		.setStyle(DefaultFillStyle, 'solid')
+		.setStyleForSelectedShapes(DefaultFillStyle, 'solid')
+		.setStyleForNextShapes(DefaultFillStyle, 'solid')
 	const boxBId = editor.onlySelectedShape!.id
 
 	editor.setCurrentTool('geo')
@@ -676,7 +680,8 @@ test('arrows bound to a shape within a group within a frame are reparented if th
 		.pointerDown(160, 160)
 		.pointerMove(170, 170)
 		.pointerUp(170, 170)
-		.setStyle(DefaultFillStyle, 'solid')
+		.setStyleForSelectedShapes(DefaultFillStyle, 'solid')
+		.setStyleForNextShapes(DefaultFillStyle, 'solid')
 	const boxCId = editor.onlySelectedShape!.id
 
 	editor.setCurrentTool('select')
diff --git a/packages/tldraw/src/test/groups.test.ts b/packages/tldraw/src/test/groups.test.ts
index 8d8a5e8da..4ff13110b 100644
--- a/packages/tldraw/src/test/groups.test.ts
+++ b/packages/tldraw/src/test/groups.test.ts
@@ -1919,7 +1919,8 @@ describe('Group opacity', () => {
 	it("should set the group's opacity to max even if the selected style panel opacity is lower", () => {
 		editor.createShapes([box(ids.boxA, 0, 0), box(ids.boxB, 20, 0)])
 		editor.select(ids.boxA, ids.boxB)
-		editor.setOpacity(0.5)
+		editor.setOpacityForSelectedShapes(0.5)
+		editor.setOpacityForNextShapes(0.5)
 		editor.groupShapes(editor.selectedShapeIds)
 		const group = editor.getShape(onlySelectedId())!
 		assert(editor.isShapeOfType<TLGroupShape>(group, 'group'))
diff --git a/packages/tldraw/src/test/styles2.test.tsx b/packages/tldraw/src/test/styles2.test.tsx
index 185ebcba4..275ec39a3 100644
--- a/packages/tldraw/src/test/styles2.test.tsx
+++ b/packages/tldraw/src/test/styles2.test.tsx
@@ -152,7 +152,8 @@ describe('Editor.setStyle', () => {
 		])
 
 		editor.setSelectedShapes([ids.A, ids.B])
-		editor.setStyle(DefaultColorStyle, 'red')
+		editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
+		editor.setStyleForNextShapes(DefaultColorStyle, 'red')
 
 		expect(editor.getShape<TLGeoShape>(ids.A)!.props.color).toBe('red')
 		expect(editor.getShape<TLGeoShape>(ids.B)!.props.color).toBe('red')
@@ -171,7 +172,8 @@ describe('Editor.setStyle', () => {
 		])
 
 		editor.setSelectedShapes([ids.groupA])
-		editor.setStyle(DefaultColorStyle, 'red')
+		editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
+		editor.setStyleForNextShapes(DefaultColorStyle, 'red')
 
 		// a wasn't selected...
 		expect(editor.getShape<TLGeoShape>(ids.boxA)!.props.color).toBe('black')
@@ -187,9 +189,11 @@ describe('Editor.setStyle', () => {
 	})
 
 	it('stores styles on stylesForNextShape', () => {
-		editor.setStyle(DefaultColorStyle, 'red')
+		editor.setStyleForSelectedShapes(DefaultColorStyle, 'red')
+		editor.setStyleForNextShapes(DefaultColorStyle, 'red')
 		expect(editor.instanceState.stylesForNextShape[DefaultColorStyle.id]).toBe('red')
-		editor.setStyle(DefaultColorStyle, 'green')
+		editor.setStyleForSelectedShapes(DefaultColorStyle, 'green')
+		editor.setStyleForNextShapes(DefaultColorStyle, 'green')
 		expect(editor.instanceState.stylesForNextShape[DefaultColorStyle.id]).toBe('green')
 	})
 })