tldraw 3.15.0-next.f1dfcef63951 → 3.16.0-next.c30b1b5e551a

package/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -1,9 +1,7 @@
 import {
 	Editor,
-	Group2d,
 	StateNode,
 	TLAdjacentDirection,
-	TLArrowShape,
 	TLClickEventInfo,
 	TLGroupShape,
 	TLKeyboardEventInfo,
@@ -18,6 +16,7 @@ import {
 	pointInPolygon,
 	toRichText,
 } from '@tldraw/editor'
+import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
 import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
@@ -98,12 +97,6 @@ export class Idle extends StateNode {
 			case 'shape': {
 				const { shape } = info
 
-				if (this.isOverArrowLabelTest(shape)) {
-					// We're moving the label on a shape.
-					this.parent.transition('pointing_arrow_label', info)
-					break
-				}
-
 				if (this.editor.isShapeOrAncestorLocked(shape)) {
 					this.parent.transition('pointing_canvas', info)
 					break
@@ -595,22 +588,7 @@ export class Idle extends StateNode {
 	isOverArrowLabelTest(shape: TLShape | undefined) {
 		if (!shape) return false
 
-		// todo: Extract into general hit test for arrows
-		if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
-			const pointInShapeSpace = this.editor.getPointInShapeSpace(
-				shape,
-				this.editor.inputs.currentPagePoint
-			)
-			// How should we handle multiple labels? Do shapes ever have multiple labels?
-			const labelGeometry = this.editor.getShapeGeometry<Group2d>(shape).children[1]
-			// Knowing what we know about arrows... if the shape has no text in its label,
-			// then the label geometry should not be there.
-			if (labelGeometry && pointInPolygon(pointInShapeSpace, labelGeometry.vertices)) {
-				return true
-			}
-		}
-
-		return false
+		return isOverArrowLabel(this.editor, shape)
 	}
 
 	handleDoubleClickOnCanvas(info: TLClickEventInfo) {

package/src/lib/tools/SelectTool/childStates/PointingShape.ts

@@ -1,4 +1,5 @@
 import { StateNode, TLPointerEventInfo, TLShape } from '@tldraw/editor'
+import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getTextLabels } from '../../../utils/shapes/shapes'
 
 export class PointingShape extends StateNode {
@@ -210,6 +211,12 @@ export class PointingShape extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this.editor.inputs.isDragging) {
+			if (isOverArrowLabel(this.editor, this.hitShape)) {
+				// We're moving the label on a shape.
+				this.parent.transition('pointing_arrow_label', { ...info, shape: this.hitShape })
+				return
+			}
+
 			if (this.didCtrlOnEnter) {
 				this.parent.transition('brushing', info)
 			} else {

package/src/lib/tools/SelectTool/childStates/Resizing.ts

@@ -122,8 +122,19 @@ export class Resizing extends StateNode {
 	}
 
 	private cancel() {
-		// Restore initial models
+		// Call onResizeCancel callback before resetting
+		const { shapeSnapshots } = this.snapshot
+
+		shapeSnapshots.forEach(({ shape }) => {
+			const current = this.editor.getShape(shape.id)
+			if (current) {
+				const util = this.editor.getShapeUtil(shape)
+				util.onResizeCancel?.(shape, current)
+			}
+		})
+
 		this.editor.bailToMark(this.markId)
+
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
 		} else {

package/src/lib/tools/SelectTool/childStates/Rotating.ts

@@ -109,6 +109,17 @@ export class Rotating extends StateNode {
 	}
 
 	private cancel() {
+		// Call onRotateCancel callback before bailing to mark
+		const { shapeSnapshots } = this.snapshot
+
+		shapeSnapshots.forEach(({ shape }) => {
+			const current = this.editor.getShape(shape.id)
+			if (current) {
+				const util = this.editor.getShapeUtil(shape)
+				util.onRotateCancel?.(shape, current)
+			}
+		})
+
 		this.editor.bailToMark(this.markId)
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)

package/src/lib/tools/SelectTool/childStates/Translating.ts

@@ -203,6 +203,17 @@ export class Translating extends StateNode {
 	}
 
 	private cancel() {
+		// Call onTranslateCancel callback before resetting
+		const { movingShapes } = this.snapshot
+
+		movingShapes.forEach((shape) => {
+			const current = this.editor.getShape(shape.id)
+			if (current) {
+				const util = this.editor.getShapeUtil(shape)
+				util.onTranslateCancel?.(shape, current)
+			}
+		})
+
 		this.reset()
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd)

package/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts

@@ -1,5 +1,6 @@
 import { Editor, TLShape } from '@tldraw/editor'
 
+/** @public */
 export function getHitShapeOnCanvasPointerDown(
 	editor: Editor,
 	hitLabels = false

package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -210,9 +210,49 @@ export function DefaultKeyboardShortcutsDialogContent() {
 						/* do nothing */
 					}}
 				/>
+				<TldrawUiMenuItem
+					id="a11y-rotate-shape-cw"
+					label="a11y.rotate-shape-cw"
+					kbd="shift+﹥"
+					onSelect={() => {
+						/* do nothing */
+					}}
+				/>
+				<TldrawUiMenuItem
+					id="a11y-rotate-shape-cw-fine"
+					label="a11y.rotate-shape-cw-fine"
+					kbd="shift+alt+﹥"
+					onSelect={() => {
+						/* do nothing */
+					}}
+				/>
+				<TldrawUiMenuItem
+					id="a11y-rotate-shape-ccw"
+					label="a11y.rotate-shape-ccw"
+					kbd="shift+﹤"
+					onSelect={() => {
+						/* do nothing */
+					}}
+				/>
+				<TldrawUiMenuItem
+					id="a11y-rotate-shape-ccw-fine"
+					label="a11y.rotate-shape-ccw-fine"
+					kbd="shift+alt+﹤"
+					onSelect={() => {
+						/* do nothing */
+					}}
+				/>
 				<TldrawUiMenuActionItem actionId="enlarge-shapes" />
 				<TldrawUiMenuActionItem actionId="shrink-shapes" />
 				<TldrawUiMenuActionItem actionId="a11y-repeat-shape-announce" />
+				<TldrawUiMenuItem
+					id="a11y-open-keyboard-shortcuts"
+					label="a11y.open-keyboard-shortcuts"
+					kbd="cmd+alt+/"
+					onSelect={() => {
+						/* do nothing */
+					}}
+				/>
 			</TldrawUiMenuGroup>
 			{showCollaborationUi && (
 				<TldrawUiMenuGroup label="shortcuts-dialog.collaboration" id="collaboration">

package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx

@@ -19,6 +19,7 @@ import {
 	ToggleEdgeScrollingItem,
 	ToggleFocusModeItem,
 	ToggleGridItem,
+	ToggleKeyboardShortcutsItem,
 	ToggleLockMenuItem,
 	TogglePasteAtCursorItem,
 	ToggleReduceMotionItem,
@@ -161,6 +162,7 @@ export function PreferencesGroup() {
 					<ToggleFocusModeItem />
 					<ToggleEdgeScrollingItem />
 					<ToggleReduceMotionItem />
+					<ToggleKeyboardShortcutsItem />
 					<ToggleDynamicSizeModeItem />
 					<TogglePasteAtCursorItem />
 					<ToggleDebugModeItem />

package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx

@@ -45,7 +45,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								title={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}
 								onClick={() => actions['zoom-out'].onSelect('navigation-zone')}
 							>
-								<TldrawUiButtonIcon icon="minus" />
+								<TldrawUiButtonIcon small icon="minus" />
 							</TldrawUiToolbarButton>
 						)}
 						{ZoomMenu && <ZoomMenu key="zoom-menu" />}
@@ -56,7 +56,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								title={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}
 								onClick={() => actions['zoom-in'].onSelect('navigation-zone')}
 							>
-								<TldrawUiButtonIcon icon="plus" />
+								<TldrawUiButtonIcon small icon="plus" />
 							</TldrawUiToolbarButton>
 						)}
 						{Minimap && (
@@ -64,10 +64,9 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								type="icon"
 								data-testid="minimap.toggle-button"
 								title={msg('navigation-zone.toggle-minimap')}
-								className="tlui-navigation-panel__toggle"
 								onClick={toggleMinimap}
 							>
-								<TldrawUiButtonIcon icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'} />
+								<TldrawUiButtonIcon small icon={collapsed ? 'chevron-right' : 'chevron-left'} />
 							</TldrawUiToolbarButton>
 						)}
 					</>

package/src/lib/ui/components/Spinner.tsx

@@ -1,3 +1,4 @@
+import { DefaultSpinner } from '@tldraw/editor'
 import React from 'react'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 
@@ -5,28 +6,5 @@ import { useTranslation } from '../hooks/useTranslation/useTranslation'
 export function Spinner(props: React.SVGProps<SVGSVGElement>) {
 	const msg = useTranslation()
 
-	return (
-		<svg
-			width={16}
-			height={16}
-			viewBox="0 0 16 16"
-			{...props}
-			aria-label={msg('app.loading')}
-			aria-hidden="false"
-		>
-			<g strokeWidth={2} fill="none" fillRule="evenodd">
-				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
-				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 8 8"
-						to="360 8 8"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-			</g>
-		</svg>
-	)
+	return <DefaultSpinner aria-label={msg('app.loading')} {...props} />
 }

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

@@ -451,6 +451,7 @@ export function OpacitySlider() {
 			steps={tldrawSupportedOpacities.length - 1}
 			title={msg('style-panel.opacity')}
 			onHistoryMark={onHistoryMark}
+			ariaValueModifier={25}
 		/>
 	)
 }

package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx

@@ -6,10 +6,12 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 
-interface ToggleToolLockedButtonProps {
+/** @public */
+export interface ToggleToolLockedButtonProps {
 	activeToolId?: string
 }
 
+/** @public @react */
 export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps) {
 	const editor = useEditor()
 	const breakpoint = useBreakpoint()

package/src/lib/ui/components/menu-items.tsx

@@ -634,6 +634,23 @@ export function ToggleReduceMotionItem() {
 	)
 }
 
+/** @public @react */
+export function ToggleKeyboardShortcutsItem() {
+	const editor = useEditor()
+	const keyboardShortcuts = useValue(
+		'keyboardShortcuts',
+		() => editor.user.getAreKeyboardShortcutsEnabled(),
+		[editor]
+	)
+
+	return (
+		<TldrawUiMenuActionCheckboxItem
+			actionId="toggle-keyboard-shortcuts"
+			checked={keyboardShortcuts}
+		/>
+	)
+}
+
 /** @public @react */
 export function ToggleDebugModeItem() {
 	const editor = useEditor()

package/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx

@@ -1,8 +1,8 @@
-import { TldrawUiIcon } from '../TldrawUiIcon'
+import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'
 
 /** @public */
 export interface TLUiButtonIconProps {
-	icon: string
+	icon: string | TLUiIconJsx
 	small?: boolean
 	invertIcon?: boolean
 }

package/src/lib/ui/components/primitives/TldrawUiDialog.tsx

@@ -65,7 +65,7 @@ export interface TLUiDialogBodyProps {
 /** @public @react */
 export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) {
 	return (
-		<div className={classNames('tlui-dialog__body', className)} style={style}>
+		<div className={classNames('tlui-dialog__body', className)} style={style} tabIndex={0}>
 			{children}
 		</div>
 	)

package/src/lib/ui/components/primitives/TldrawUiIcon.tsx

@@ -1,11 +1,14 @@
 import classNames from 'classnames'
-import { memo, useLayoutEffect, useRef } from 'react'
+import { cloneElement, memo, ReactElement, useLayoutEffect, useRef } from 'react'
 import { useAssetUrls } from '../../context/asset-urls'
 import { TLUiIconType } from '../../icon-types'
 
+/** @public */
+export type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>
+
 /** @public */
 export interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {
-	icon: TLUiIconType | Exclude<string, TLUiIconType>
+	icon: TLUiIconType | Exclude<string, TLUiIconType> | TLUiIconJsx
 	label: string
 	small?: boolean
 	color?: string
@@ -24,6 +27,41 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 	className,
 	...props
 }: TLUiIconProps) {
+	if (typeof icon === 'string') {
+		return (
+			<TldrawUIIconInner
+				label={label}
+				small={small}
+				invertIcon={invertIcon}
+				icon={icon}
+				color={color}
+				className={className}
+				{...props}
+			/>
+		)
+	}
+
+	return cloneElement(icon, {
+		...props,
+		className: classNames({ 'tlui-icon__small': small }, className, icon.props.className),
+		'aria-label': label,
+		style: {
+			color,
+			transform: invertIcon ? 'scale(-1, 1)' : undefined,
+			...icon.props.style,
+		},
+	})
+})
+
+function TldrawUIIconInner({
+	label,
+	small,
+	invertIcon,
+	icon,
+	color,
+	className,
+	...props
+}: TLUiIconProps & { icon: TLUiIconType | Exclude<string, TLUiIconType> }) {
 	const assetUrls = useAssetUrls()
 	const asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']
 	const ref = useRef<HTMLDivElement>(null)
@@ -69,4 +107,4 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 			}}
 		/>
 	)
-})
+}

package/src/lib/ui/components/primitives/TldrawUiSlider.tsx

@@ -13,6 +13,7 @@ export interface TLUiSliderProps {
 	onValueChange(value: number): void
 	onHistoryMark(id: string): void
 	'data-testid'?: string
+	ariaValueModifier?: number
 }
 
 /** @public @react */
@@ -26,6 +27,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 		label,
 		onValueChange,
 		['data-testid']: testId,
+		ariaValueModifier = 1,
 	}: TLUiSliderProps,
 	ref
 ) {
@@ -81,7 +83,10 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 				</_Slider.Track>
 				{value !== null && (
 					<_Slider.Thumb
-						aria-label={msg('style-panel.opacity')}
+						aria-valuemin={(min ?? 0) * ariaValueModifier}
+						aria-valuenow={value * ariaValueModifier}
+						aria-valuemax={steps * ariaValueModifier}
+						aria-label={title + ' — ' + msg(label as TLUiTranslationKey)}
 						className="tlui-slider__thumb"
 						dir="ltr"
 						ref={ref}

package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx

@@ -76,6 +76,10 @@ export const TldrawUiToolbarToggleGroup = ({
 		<_Toolbar.ToggleGroup
 			type={type}
 			{...props}
+			// TODO: this fixes a bug in Radix until they fix it.
+			// https://github.com/radix-ui/primitives/issues/3188
+			// https://github.com/radix-ui/primitives/pull/3189
+			role="radiogroup"
 			className={classnames('tlui-toolbar-toggle-group', className)}
 		>
 			{children}

package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx

@@ -5,7 +5,7 @@ import { TLUiEventSource } from '../../../context/events'
 import { useReadonly } from '../../../hooks/useReadonly'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
-import { TldrawUiIcon } from '../TldrawUiIcon'
+import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
@@ -14,7 +14,7 @@ export interface TLUiMenuCheckboxItemProps<
 	TranslationKey extends string = string,
 	IconType extends string = string,
 > {
-	icon?: IconType
+	icon?: IconType | TLUiIconJsx
 	id: string
 	kbd?: string
 	title?: string

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -12,6 +12,7 @@ import { TldrawUiButton } from '../Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon'
 import { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel'
 import { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'
+import { TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { TldrawUiToolbarButton } from '../TldrawUiToolbar'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
@@ -25,11 +26,11 @@ export interface TLUiMenuItemProps<
 	/**
 	 * The icon to display on the item. Icons are only shown in certain menu types.
 	 */
-	icon?: IconType
+	icon?: IconType | TLUiIconJsx
 	/**
 	 * An icon to display to the left of the menu item.
 	 */
-	iconLeft?: IconType
+	iconLeft?: IconType | TLUiIconJsx
 	/**
 	 * The keyboard shortcut to display on the item.
 	 */
@@ -218,7 +219,6 @@ export function TldrawUiMenuItem<
 						preventDefault(e)
 						onSelect('toolbar')
 					}}
-					role="option"
 					title={titleStr}
 					type="tool"
 				>
@@ -237,7 +237,6 @@ export function TldrawUiMenuItem<
 					data-value={id}
 					disabled={disabled}
 					onClick={() => onSelect('toolbar')}
-					role="option"
 					title={titleStr}
 					type="icon"
 				>

package/src/lib/ui/context/actions.tsx

@@ -28,6 +28,7 @@ import { fitFrameToContent, removeFrame } from '../../utils/frames/frames'
 import { generateShapeAnnouncementMessage } from '../components/A11y'
 import { EditLinkDialog } from '../components/EditLinkDialog'
 import { EmbedDialog } from '../components/EmbedDialog'
+import { DefaultKeyboardShortcutsDialog } from '../components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog'
 import { useShowCollaborationUi } from '../hooks/useCollaborationStatus'
 import { flattenShapesToImages } from '../hooks/useFlatten'
 import { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'
@@ -42,12 +43,13 @@ export interface TLUiActionItem<
 	TransationKey extends string = string,
 	IconType extends string = string,
 > {
-	icon?: IconType
+	icon?: IconType | React.ReactElement
 	id: string
 	kbd?: string
 	label?: TransationKey | { [key: string]: TransationKey }
 	readonlyOk?: boolean
 	checkbox?: boolean
+	isRequiredA11yAction?: boolean
 	onSelect(source: TLUiEventSource): Promise<void> | void
 }
 
@@ -168,6 +170,15 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					helpers.addDialog({ component: EmbedDialog })
 				},
 			},
+			{
+				id: 'open-kbd-shortcuts',
+				label: 'action.open-kbd-shortcuts',
+				kbd: 'cmd+alt+/,ctrl+alt+/',
+				onSelect(source) {
+					trackEvent('open-kbd-shortcuts', { source })
+					helpers.addDialog({ component: DefaultKeyboardShortcutsDialog })
+				},
+			},
 			{
 				id: 'insert-media',
 				label: 'action.insert-media',
@@ -502,7 +513,6 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 								}
 					}
 
-					if (!editor.canCreateShapes(ids)) return
 					editor.markHistoryStoppingPoint('duplicate shapes')
 					editor.duplicateShapes(ids, offset)
 
@@ -1027,17 +1037,20 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				id: 'rotate-cw',
 				label: 'action.rotate-cw',
 				icon: 'rotate-cw',
+				kbd: 'shift+.,shift+alt+.',
 				onSelect(source) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					trackEvent('rotate-cw', { source })
+					const isFine = editor.inputs.altKey
+					trackEvent('rotate-cw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-cw')
 					editor.run(() => {
-						const offset = editor.getSelectionRotation() % (HALF_PI / 2)
-						const dontUseOffset = approximately(offset, 0) || approximately(offset, HALF_PI / 2)
+						const rotation = HALF_PI / (isFine ? 96 : 6)
+						const offset = editor.getSelectionRotation() % rotation
+						const dontUseOffset = approximately(offset, 0) || approximately(offset, rotation)
 						const selectedShapeIds = editor.getSelectedShapeIds()
-						editor.rotateShapesBy(selectedShapeIds, HALF_PI / 2 - (dontUseOffset ? 0 : offset))
+						editor.rotateShapesBy(selectedShapeIds, rotation - (dontUseOffset ? 0 : offset))
 						kickoutOccludedShapes(editor, selectedShapeIds)
 					})
 				},
@@ -1046,17 +1059,21 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				id: 'rotate-ccw',
 				label: 'action.rotate-ccw',
 				icon: 'rotate-ccw',
+				// omg double comma
+				kbd: 'shift+,,shift+alt+,',
 				onSelect(source) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					trackEvent('rotate-ccw', { source })
+					const isFine = editor.inputs.altKey
+					trackEvent('rotate-ccw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-ccw')
 					editor.run(() => {
-						const offset = editor.getSelectionRotation() % (HALF_PI / 2)
+						const rotation = HALF_PI / (isFine ? 96 : 6)
+						const offset = editor.getSelectionRotation() % rotation
 						const offsetCloseToZero = approximately(offset, 0)
 						const selectedShapeIds = editor.getSelectedShapeIds()
-						editor.rotateShapesBy(selectedShapeIds, offsetCloseToZero ? -(HALF_PI / 2) : -offset)
+						editor.rotateShapesBy(selectedShapeIds, offsetCloseToZero ? -rotation : -offset)
 						kickoutOccludedShapes(editor, selectedShapeIds)
 					})
 				},
@@ -1234,6 +1251,21 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				},
 				checkbox: true,
 			},
+			{
+				id: 'toggle-keyboard-shortcuts',
+				label: {
+					default: 'action.toggle-keyboard-shortcuts',
+					menu: 'action.toggle-keyboard-shortcuts.menu',
+				},
+				readonlyOk: true,
+				onSelect(source) {
+					trackEvent('toggle-keyboard-shortcuts', { source })
+					editor.user.updateUserPreferences({
+						areKeyboardShortcutsEnabled: !editor.user.getAreKeyboardShortcutsEnabled(),
+					})
+				},
+				checkbox: true,
+			},
 			{
 				id: 'toggle-edge-scrolling',
 				label: {
@@ -1530,6 +1562,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				id: 'adjust-shape-styles',
 				label: 'a11y.adjust-shape-styles',
 				kbd: 'cmd+Enter,ctrl+Enter',
+				isRequiredA11yAction: true,
 				onSelect: async (source) => {
 					if (!canApplySelectionAction()) return
 
@@ -1543,6 +1576,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 			{
 				id: 'a11y-open-context-menu',
 				kbd: 'cmd+shift+Enter,ctrl+shift+Enter',
+				isRequiredA11yAction: true,
 				readonlyOk: true,
 				onSelect: async (source) => {
 					if (!canApplySelectionAction()) return
@@ -1595,6 +1629,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				id: 'a11y-repeat-shape-announce',
 				kbd: 'alt+r',
 				label: 'a11y.repeat-shape',
+				isRequiredA11yAction: true,
 				readonlyOk: true,
 				onSelect: async (source) => {
 					const selectedShapeIds = editor.getSelectedShapeIds()

package/src/lib/ui/context/events.tsx

@@ -76,8 +76,8 @@ export interface TLUiEventMap {
 	'delete-shapes': null
 	'select-all-shapes': null
 	'select-none-shapes': null
-	'rotate-ccw': null
-	'rotate-cw': null
+	'rotate-ccw': { fine: boolean }
+	'rotate-cw': { fine: boolean }
 	'zoom-in': { towardsCursor: boolean }
 	'zoom-out': { towardsCursor: boolean }
 	'zoom-to-fit': null
@@ -107,6 +107,7 @@ export interface TLUiEventMap {
 	'toggle-paste-at-cursor': null
 	'toggle-lock': null
 	'toggle-reduce-motion': null
+	'toggle-keyboard-shortcuts': null
 	'toggle-edge-scrolling': null
 	'color-scheme': { value: string }
 	'exit-pen-mode': null
@@ -127,6 +128,7 @@ export interface TLUiEventMap {
 	'copy-link': null
 	'image-replace': null
 	'video-replace': null
+	'open-kbd-shortcuts': null
 	'rich-text': {
 		operation:
 			| 'bold'