Revamp key/code input processing which fixes Option key on Mac and other locales

Closes #742
Closes #746

editor/src/messages/input_mapper/default_mapping.rs

@@ -23,44 +23,44 @@ pub fn default_mapping() -> Mapping {
 		// MovementMessage
 		entry!(
 			PointerMove;
-			refresh_keys=[KeyControl],
+			refresh_keys=[Control],
-			action_dispatch=MovementMessage::PointerMove { snap_angle: KeyControl, wait_for_snap_angle_release: true, snap_zoom: KeyControl, zoom_from_viewport: None },
+			action_dispatch=MovementMessage::PointerMove { snap_angle: Control, wait_for_snap_angle_release: true, snap_zoom: Control, zoom_from_viewport: None },
 		),
 		// NORMAL PRIORITY:
 		//
 		// TransformLayerMessage
-		entry!(KeyDown(KeyEnter); action_dispatch=TransformLayerMessage::ApplyTransformOperation),
+		entry!(KeyDown(Enter); action_dispatch=TransformLayerMessage::ApplyTransformOperation),
 		entry!(KeyDown(Lmb); action_dispatch=TransformLayerMessage::ApplyTransformOperation),
-		entry!(KeyDown(KeyEscape); action_dispatch=TransformLayerMessage::CancelTransformOperation),
+		entry!(KeyDown(Escape); action_dispatch=TransformLayerMessage::CancelTransformOperation),
 		entry!(KeyDown(Rmb); action_dispatch=TransformLayerMessage::CancelTransformOperation),
 		entry!(KeyDown(KeyX); action_dispatch=TransformLayerMessage::ConstrainX),
 		entry!(KeyDown(KeyY); action_dispatch=TransformLayerMessage::ConstrainY),
-		entry!(KeyDown(KeyBackspace); action_dispatch=TransformLayerMessage::TypeBackspace),
+		entry!(KeyDown(Backspace); action_dispatch=TransformLayerMessage::TypeBackspace),
-		entry!(KeyDown(KeyMinus); action_dispatch=TransformLayerMessage::TypeNegate),
+		entry!(KeyDown(Minus); action_dispatch=TransformLayerMessage::TypeNegate),
-		entry!(KeyDown(KeyComma); action_dispatch=TransformLayerMessage::TypeDecimalPoint),
+		entry!(KeyDown(Comma); action_dispatch=TransformLayerMessage::TypeDecimalPoint),
-		entry!(KeyDown(KeyPeriod); action_dispatch=TransformLayerMessage::TypeDecimalPoint),
+		entry!(KeyDown(Period); action_dispatch=TransformLayerMessage::TypeDecimalPoint),
-		entry!(PointerMove; refresh_keys=[KeyShift, KeyControl], action_dispatch=TransformLayerMessage::PointerMove { slow_key: KeyShift, snap_key: KeyControl }),
+		entry!(PointerMove; refresh_keys=[Shift, Control], action_dispatch=TransformLayerMessage::PointerMove { slow_key: Shift, snap_key: Control }),
 		//
 		// SelectToolMessage
-		entry!(PointerMove; refresh_keys=[KeyControl, KeyShift, KeyAlt], action_dispatch=SelectToolMessage::PointerMove { axis_align: KeyShift, snap_angle: KeyControl, center: KeyAlt }),
+		entry!(PointerMove; refresh_keys=[Control, Shift, Alt], action_dispatch=SelectToolMessage::PointerMove { axis_align: Shift, snap_angle: Control, center: Alt }),
-		entry!(KeyDown(Lmb); action_dispatch=SelectToolMessage::DragStart { add_to_selection: KeyShift }),
+		entry!(KeyDown(Lmb); action_dispatch=SelectToolMessage::DragStart { add_to_selection: Shift }),
 		entry!(KeyUp(Lmb); action_dispatch=SelectToolMessage::DragStop),
-		entry!(KeyDown(KeyEnter); action_dispatch=SelectToolMessage::DragStop),
+		entry!(KeyDown(Enter); action_dispatch=SelectToolMessage::DragStop),
 		entry!(DoubleClick; action_dispatch=SelectToolMessage::EditLayer),
 		entry!(KeyDown(Rmb); action_dispatch=SelectToolMessage::Abort),
-		entry!(KeyDown(KeyEscape); action_dispatch=SelectToolMessage::Abort),
+		entry!(KeyDown(Escape); action_dispatch=SelectToolMessage::Abort),
 		//
 		// ArtboardToolMessage
 		entry!(KeyDown(Lmb); action_dispatch=ArtboardToolMessage::PointerDown),
-		entry!(PointerMove; refresh_keys=[KeyShift, KeyAlt], action_dispatch=ArtboardToolMessage::PointerMove { constrain_axis_or_aspect: KeyShift, center: KeyAlt }),
+		entry!(PointerMove; refresh_keys=[Shift, Alt], action_dispatch=ArtboardToolMessage::PointerMove { constrain_axis_or_aspect: Shift, center: Alt }),
 		entry!(KeyUp(Lmb); action_dispatch=ArtboardToolMessage::PointerUp),
-		entry!(KeyDown(KeyDelete); action_dispatch=ArtboardToolMessage::DeleteSelected),
+		entry!(KeyDown(Delete); action_dispatch=ArtboardToolMessage::DeleteSelected),
-		entry!(KeyDown(KeyBackspace); action_dispatch=ArtboardToolMessage::DeleteSelected),
+		entry!(KeyDown(Backspace); action_dispatch=ArtboardToolMessage::DeleteSelected),
 		//
 		// NavigateToolMessage
-		entry!(KeyUp(Lmb); modifiers=[KeyShift], action_dispatch=NavigateToolMessage::ClickZoom { zoom_in: false }),
+		entry!(KeyUp(Lmb); modifiers=[Shift], action_dispatch=NavigateToolMessage::ClickZoom { zoom_in: false }),
 		entry!(KeyUp(Lmb); action_dispatch=NavigateToolMessage::ClickZoom { zoom_in: true }),
-		entry!(PointerMove; refresh_keys=[KeyControl], action_dispatch=NavigateToolMessage::PointerMove { snap_angle: KeyControl, snap_zoom: KeyControl }),
+		entry!(PointerMove; refresh_keys=[Control], action_dispatch=NavigateToolMessage::PointerMove { snap_angle: Control, snap_zoom: Control }),
 		entry!(KeyDown(Mmb); action_dispatch=NavigateToolMessage::TranslateCanvasBegin),
 		entry!(KeyDown(Rmb); action_dispatch=NavigateToolMessage::RotateCanvasBegin),
 		entry!(KeyDown(Lmb); action_dispatch=NavigateToolMessage::ZoomCanvasBegin),
@@ -74,59 +74,59 @@ pub fn default_mapping() -> Mapping {
 		//
 		// TextToolMessage
 		entry!(KeyUp(Lmb); action_dispatch=TextToolMessage::Interact),
-		entry!(KeyDown(KeyEscape); action_dispatch=TextToolMessage::Abort),
+		entry!(KeyDown(Escape); action_dispatch=TextToolMessage::Abort),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyEnter); modifiers=[KeyControl], action_dispatch=TextToolMessage::CommitText),
+			standard!(KeyDown(Enter); modifiers=[Control], action_dispatch=TextToolMessage::CommitText),
-			mac_only!(KeyDown(KeyEnter); modifiers=[KeyCommand], action_dispatch=TextToolMessage::CommitText),
+			mac_only!(KeyDown(Enter); modifiers=[Command], action_dispatch=TextToolMessage::CommitText),
 		),
 		//
 		// GradientToolMessage
 		entry!(KeyDown(Lmb); action_dispatch=GradientToolMessage::PointerDown),
-		entry!(PointerMove; refresh_keys=[KeyShift], action_dispatch=GradientToolMessage::PointerMove { constrain_axis: KeyShift }),
+		entry!(PointerMove; refresh_keys=[Shift], action_dispatch=GradientToolMessage::PointerMove { constrain_axis: Shift }),
 		entry!(KeyUp(Lmb); action_dispatch=GradientToolMessage::PointerUp),
 		//
 		// RectangleToolMessage
 		entry!(KeyDown(Lmb); action_dispatch=RectangleToolMessage::DragStart),
 		entry!(KeyUp(Lmb); action_dispatch=RectangleToolMessage::DragStop),
 		entry!(KeyDown(Rmb); action_dispatch=RectangleToolMessage::Abort),
-		entry!(KeyDown(KeyEscape); action_dispatch=RectangleToolMessage::Abort),
+		entry!(KeyDown(Escape); action_dispatch=RectangleToolMessage::Abort),
-		entry!(PointerMove; refresh_keys=[KeyAlt, KeyShift], action_dispatch=RectangleToolMessage::Resize { center: KeyAlt, lock_ratio: KeyShift }),
+		entry!(PointerMove; refresh_keys=[Alt, Shift], action_dispatch=RectangleToolMessage::Resize { center: Alt, lock_ratio: Shift }),
 		//
 		// EllipseToolMessage
 		entry!(KeyDown(Lmb); action_dispatch=EllipseToolMessage::DragStart),
 		entry!(KeyUp(Lmb); action_dispatch=EllipseToolMessage::DragStop),
 		entry!(KeyDown(Rmb); action_dispatch=EllipseToolMessage::Abort),
-		entry!(KeyDown(KeyEscape); action_dispatch=EllipseToolMessage::Abort),
+		entry!(KeyDown(Escape); action_dispatch=EllipseToolMessage::Abort),
-		entry!(PointerMove; refresh_keys=[KeyAlt, KeyShift], action_dispatch=EllipseToolMessage::Resize { center: KeyAlt, lock_ratio: KeyShift }),
+		entry!(PointerMove; refresh_keys=[Alt, Shift], action_dispatch=EllipseToolMessage::Resize { center: Alt, lock_ratio: Shift }),
 		//
 		// ShapeToolMessage
 		entry!(KeyDown(Lmb); action_dispatch=ShapeToolMessage::DragStart),
 		entry!(KeyUp(Lmb); action_dispatch=ShapeToolMessage::DragStop),
 		entry!(KeyDown(Rmb); action_dispatch=ShapeToolMessage::Abort),
-		entry!(KeyDown(KeyEscape); action_dispatch=ShapeToolMessage::Abort),
+		entry!(KeyDown(Escape); action_dispatch=ShapeToolMessage::Abort),
-		entry!(PointerMove; refresh_keys=[KeyAlt, KeyShift], action_dispatch=ShapeToolMessage::Resize { center: KeyAlt, lock_ratio: KeyShift }),
+		entry!(PointerMove; refresh_keys=[Alt, Shift], action_dispatch=ShapeToolMessage::Resize { center: Alt, lock_ratio: Shift }),
 		//
 		// LineToolMessage
 		entry!(KeyDown(Lmb); action_dispatch=LineToolMessage::DragStart),
 		entry!(KeyUp(Lmb); action_dispatch=LineToolMessage::DragStop),
 		entry!(KeyDown(Rmb); action_dispatch=LineToolMessage::Abort),
-		entry!(KeyDown(KeyEscape); action_dispatch=LineToolMessage::Abort),
+		entry!(KeyDown(Escape); action_dispatch=LineToolMessage::Abort),
-		entry!(PointerMove; refresh_keys=[KeyAlt, KeyShift, KeyControl], action_dispatch=LineToolMessage::Redraw { center: KeyAlt, lock_angle: KeyControl, snap_angle: KeyShift }),
+		entry!(PointerMove; refresh_keys=[Alt, Shift, Control], action_dispatch=LineToolMessage::Redraw { center: Alt, lock_angle: Control, snap_angle: Shift }),
 		//
 		// PathToolMessage
-		entry!(KeyDown(Lmb); action_dispatch=PathToolMessage::DragStart { add_to_selection: KeyShift }),
+		entry!(KeyDown(Lmb); action_dispatch=PathToolMessage::DragStart { add_to_selection: Shift }),
-		entry!(PointerMove; refresh_keys=[KeyAlt, KeyShift], action_dispatch=PathToolMessage::PointerMove { alt_mirror_angle: KeyAlt, shift_mirror_distance: KeyShift }),
+		entry!(PointerMove; refresh_keys=[Alt, Shift], action_dispatch=PathToolMessage::PointerMove { alt_mirror_angle: Alt, shift_mirror_distance: Shift }),
-		entry!(KeyDown(KeyDelete); action_dispatch=PathToolMessage::Delete),
+		entry!(KeyDown(Delete); action_dispatch=PathToolMessage::Delete),
-		entry!(KeyDown(KeyBackspace); action_dispatch=PathToolMessage::Delete),
+		entry!(KeyDown(Backspace); action_dispatch=PathToolMessage::Delete),
 		entry!(KeyUp(Lmb); action_dispatch=PathToolMessage::DragStop),
 		//
 		// PenToolMessage
-		entry!(PointerMove; refresh_keys=[KeyShift, KeyControl], action_dispatch=PenToolMessage::PointerMove { snap_angle: KeyControl, break_handle: KeyShift }),
+		entry!(PointerMove; refresh_keys=[Shift, Control], action_dispatch=PenToolMessage::PointerMove { snap_angle: Control, break_handle: Shift }),
 		entry!(KeyDown(Lmb); action_dispatch=PenToolMessage::DragStart),
 		entry!(KeyUp(Lmb); action_dispatch=PenToolMessage::DragStop),
 		entry!(KeyDown(Rmb); action_dispatch=PenToolMessage::Confirm),
-		entry!(KeyDown(KeyEscape); action_dispatch=PenToolMessage::Confirm),
+		entry!(KeyDown(Escape); action_dispatch=PenToolMessage::Confirm),
-		entry!(KeyDown(KeyEnter); action_dispatch=PenToolMessage::Confirm),
+		entry!(KeyDown(Enter); action_dispatch=PenToolMessage::Confirm),
 		//
 		// FreehandToolMessage
 		entry!(PointerMove; action_dispatch=FreehandToolMessage::PointerMove),
@@ -138,8 +138,8 @@ pub fn default_mapping() -> Mapping {
 		entry!(KeyDown(Lmb); action_dispatch=SplineToolMessage::DragStart),
 		entry!(KeyUp(Lmb); action_dispatch=SplineToolMessage::DragStop),
 		entry!(KeyDown(Rmb); action_dispatch=SplineToolMessage::Confirm),
-		entry!(KeyDown(KeyEscape); action_dispatch=SplineToolMessage::Confirm),
+		entry!(KeyDown(Escape); action_dispatch=SplineToolMessage::Confirm),
-		entry!(KeyDown(KeyEnter); action_dispatch=SplineToolMessage::Confirm),
+		entry!(KeyDown(Enter); action_dispatch=SplineToolMessage::Confirm),
 		//
 		// FillToolMessage
 		entry!(KeyDown(Lmb); action_dispatch=FillToolMessage::LeftMouseDown),
@@ -160,114 +160,104 @@ pub fn default_mapping() -> Mapping {
 		entry!(KeyDown(KeyE); action_dispatch=ToolMessage::ActivateToolEllipse),
 		entry!(KeyDown(KeyY); action_dispatch=ToolMessage::ActivateToolShape),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyX); modifiers=[KeyShift, KeyControl], action_dispatch=ToolMessage::ResetColors),
+			standard!(KeyDown(KeyX); modifiers=[Shift, Control], action_dispatch=ToolMessage::ResetColors),
-			mac_only!(KeyDown(KeyX); modifiers=[KeyShift, KeyCommand], action_dispatch=ToolMessage::ResetColors),
+			mac_only!(KeyDown(KeyX); modifiers=[Shift, Command], action_dispatch=ToolMessage::ResetColors),
 		),
-		entry!(KeyDown(KeyX); modifiers=[KeyShift], action_dispatch=ToolMessage::SwapColors),
+		entry!(KeyDown(KeyX); modifiers=[Shift], action_dispatch=ToolMessage::SwapColors),
-		entry!(KeyDown(KeyC); modifiers=[KeyAlt], action_dispatch=ToolMessage::SelectRandomPrimaryColor),
+		entry!(KeyDown(KeyC); modifiers=[Alt], action_dispatch=ToolMessage::SelectRandomPrimaryColor),
 		//
 		// DocumentMessage
-		entry!(KeyDown(KeyDelete); action_dispatch=DocumentMessage::DeleteSelectedLayers),
+		entry!(KeyDown(Delete); action_dispatch=DocumentMessage::DeleteSelectedLayers),
-		entry!(KeyDown(KeyBackspace); action_dispatch=DocumentMessage::DeleteSelectedLayers),
+		entry!(KeyDown(Backspace); action_dispatch=DocumentMessage::DeleteSelectedLayers),
-		entry!(KeyDown(KeyP); modifiers=[KeyAlt], action_dispatch=DocumentMessage::DebugPrintDocument),
+		entry!(KeyDown(KeyP); modifiers=[Alt], action_dispatch=DocumentMessage::DebugPrintDocument),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyZ); modifiers=[KeyControl, KeyShift], action_dispatch=DocumentMessage::Redo),
+			standard!(KeyDown(KeyZ); modifiers=[Control, Shift], action_dispatch=DocumentMessage::Redo),
-			mac_only!(KeyDown(KeyZ); modifiers=[KeyCommand, KeyShift], action_dispatch=DocumentMessage::Redo),
+			mac_only!(KeyDown(KeyZ); modifiers=[Command, Shift], action_dispatch=DocumentMessage::Redo),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyZ); modifiers=[KeyControl], action_dispatch=DocumentMessage::Undo),
+			standard!(KeyDown(KeyZ); modifiers=[Control], action_dispatch=DocumentMessage::Undo),
-			mac_only!(KeyDown(KeyZ); modifiers=[KeyCommand], action_dispatch=DocumentMessage::Undo),
+			mac_only!(KeyDown(KeyZ); modifiers=[Command], action_dispatch=DocumentMessage::Undo),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyA); modifiers=[KeyControl, KeyAlt], action_dispatch=DocumentMessage::DeselectAllLayers),
+			standard!(KeyDown(KeyA); modifiers=[Control, Alt], action_dispatch=DocumentMessage::DeselectAllLayers),
-			mac_only!(KeyDown(KeyA); modifiers=[KeyCommand, KeyAlt], action_dispatch=DocumentMessage::DeselectAllLayers),
+			mac_only!(KeyDown(KeyA); modifiers=[Command, Alt], action_dispatch=DocumentMessage::DeselectAllLayers),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyA); modifiers=[KeyControl], action_dispatch=DocumentMessage::SelectAllLayers),
+			standard!(KeyDown(KeyA); modifiers=[Control], action_dispatch=DocumentMessage::SelectAllLayers),
-			mac_only!(KeyDown(KeyA); modifiers=[KeyCommand], action_dispatch=DocumentMessage::SelectAllLayers),
+			mac_only!(KeyDown(KeyA); modifiers=[Command], action_dispatch=DocumentMessage::SelectAllLayers),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyS); modifiers=[KeyControl], action_dispatch=DocumentMessage::SaveDocument),
+			standard!(KeyDown(KeyS); modifiers=[Control], action_dispatch=DocumentMessage::SaveDocument),
-			mac_only!(KeyDown(KeyS); modifiers=[KeyCommand], action_dispatch=DocumentMessage::SaveDocument),
+			mac_only!(KeyDown(KeyS); modifiers=[Command], action_dispatch=DocumentMessage::SaveDocument),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyD); modifiers=[KeyControl], action_dispatch=DocumentMessage::DuplicateSelectedLayers),
+			standard!(KeyDown(KeyD); modifiers=[Control], action_dispatch=DocumentMessage::DuplicateSelectedLayers),
-			mac_only!(KeyDown(KeyD); modifiers=[KeyCommand], action_dispatch=DocumentMessage::DuplicateSelectedLayers),
+			mac_only!(KeyDown(KeyD); modifiers=[Command], action_dispatch=DocumentMessage::DuplicateSelectedLayers),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyG); modifiers=[KeyControl], action_dispatch=DocumentMessage::GroupSelectedLayers),
+			standard!(KeyDown(KeyG); modifiers=[Control], action_dispatch=DocumentMessage::GroupSelectedLayers),
-			mac_only!(KeyDown(KeyG); modifiers=[KeyCommand], action_dispatch=DocumentMessage::GroupSelectedLayers),
+			mac_only!(KeyDown(KeyG); modifiers=[Command], action_dispatch=DocumentMessage::GroupSelectedLayers),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyG); modifiers=[KeyControl, KeyShift], action_dispatch=DocumentMessage::UngroupSelectedLayers),
+			standard!(KeyDown(KeyG); modifiers=[Control, Shift], action_dispatch=DocumentMessage::UngroupSelectedLayers),
-			mac_only!(KeyDown(KeyG); modifiers=[KeyCommand, KeyShift], action_dispatch=DocumentMessage::UngroupSelectedLayers),
+			mac_only!(KeyDown(KeyG); modifiers=[Command, Shift], action_dispatch=DocumentMessage::UngroupSelectedLayers),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyN); modifiers=[KeyControl, KeyShift], action_dispatch=DocumentMessage::CreateEmptyFolder { container_path: vec![] }),
+			standard!(KeyDown(KeyN); modifiers=[Control, Shift], action_dispatch=DocumentMessage::CreateEmptyFolder { container_path: vec![] }),
-			mac_only!(KeyDown(KeyN); modifiers=[KeyCommand, KeyShift], action_dispatch=DocumentMessage::CreateEmptyFolder { container_path: vec![] }),
+			mac_only!(KeyDown(KeyN); modifiers=[Command, Shift], action_dispatch=DocumentMessage::CreateEmptyFolder { container_path: vec![] }),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(Key0); modifiers=[KeyControl], action_dispatch=DocumentMessage::ZoomCanvasToFitAll),
+			standard!(KeyDown(Digit0); modifiers=[Control], action_dispatch=DocumentMessage::ZoomCanvasToFitAll),
-			mac_only!(KeyDown(Key0); modifiers=[KeyCommand], action_dispatch=DocumentMessage::ZoomCanvasToFitAll),
+			mac_only!(KeyDown(Digit0); modifiers=[Command], action_dispatch=DocumentMessage::ZoomCanvasToFitAll),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(Key1); modifiers=[KeyControl], action_dispatch=DocumentMessage::ZoomCanvasTo100Percent),
+			standard!(KeyDown(Digit1); modifiers=[Control], action_dispatch=DocumentMessage::ZoomCanvasTo100Percent),
-			mac_only!(KeyDown(Key1); modifiers=[KeyCommand], action_dispatch=DocumentMessage::ZoomCanvasTo100Percent),
+			mac_only!(KeyDown(Digit1); modifiers=[Command], action_dispatch=DocumentMessage::ZoomCanvasTo100Percent),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(Key2); modifiers=[KeyControl], action_dispatch=DocumentMessage::ZoomCanvasTo200Percent),
+			standard!(KeyDown(Digit2); modifiers=[Control], action_dispatch=DocumentMessage::ZoomCanvasTo200Percent),
-			mac_only!(KeyDown(Key2); modifiers=[KeyCommand], action_dispatch=DocumentMessage::ZoomCanvasTo200Percent),
+			mac_only!(KeyDown(Digit2); modifiers=[Command], action_dispatch=DocumentMessage::ZoomCanvasTo200Percent),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyLeftBracket); modifiers=[KeyControl, KeyShift], action_dispatch=DocumentMessage::SelectedLayersLowerToBack),
+			standard!(KeyDown(BracketLeft); modifiers=[Control, Shift], action_dispatch=DocumentMessage::SelectedLayersLowerToBack),
-			mac_only!(KeyDown(KeyLeftBracket); modifiers=[KeyCommand, KeyShift], action_dispatch=DocumentMessage::SelectedLayersLowerToBack),
+			mac_only!(KeyDown(BracketLeft); modifiers=[Command, Shift], action_dispatch=DocumentMessage::SelectedLayersLowerToBack),
 		),
 		entry_multiplatform!(
-			// TODO: Delete this in favor of the KeyLeftBracket (non-shifted version of this key) mapping above once the input system can distinguish between the non-shifted and shifted keys (important for other language keyboards)
+			standard!(KeyDown(BracketRight); modifiers=[Control, Shift], action_dispatch=DocumentMessage::SelectedLayersRaiseToFront),
-			standard!(KeyDown(KeyLeftCurlyBracket); modifiers=[KeyControl, KeyShift], action_dispatch=DocumentMessage::SelectedLayersLowerToBack),
+			mac_only!(KeyDown(BracketRight); modifiers=[Command, Shift], action_dispatch=DocumentMessage::SelectedLayersRaiseToFront),
-			mac_only!(KeyDown(KeyLeftCurlyBracket); modifiers=[KeyCommand, KeyShift], action_dispatch=DocumentMessage::SelectedLayersLowerToBack),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyRightBracket); modifiers=[KeyControl, KeyShift], action_dispatch=DocumentMessage::SelectedLayersRaiseToFront),
+			standard!(KeyDown(BracketLeft); modifiers=[Control], action_dispatch=DocumentMessage::SelectedLayersLower),
-			mac_only!(KeyDown(KeyRightBracket); modifiers=[KeyCommand, KeyShift], action_dispatch=DocumentMessage::SelectedLayersRaiseToFront),
+			mac_only!(KeyDown(BracketLeft); modifiers=[Command], action_dispatch=DocumentMessage::SelectedLayersLower),
 		),
 		entry_multiplatform!(
-			// TODO: Delete this in favor of the KeyRightBracket (non-shifted version of this key) mapping above once the input system can distinguish between the non-shifted and shifted keys (important for other language keyboards)
+			standard!(KeyDown(BracketRight); modifiers=[Control], action_dispatch=DocumentMessage::SelectedLayersRaise),
-			standard!(KeyDown(KeyRightCurlyBracket); modifiers=[KeyControl, KeyShift], action_dispatch=DocumentMessage::SelectedLayersRaiseToFront),
+			mac_only!(KeyDown(BracketRight); modifiers=[Command], action_dispatch=DocumentMessage::SelectedLayersRaise),
-			mac_only!(KeyDown(KeyRightCurlyBracket); modifiers=[KeyCommand, KeyShift], action_dispatch=DocumentMessage::SelectedLayersRaiseToFront),
 		),
-		entry_multiplatform!(
+		entry!(KeyDown(ArrowUp); modifiers=[Shift, ArrowLeft], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -BIG_NUDGE_AMOUNT, delta_y: -BIG_NUDGE_AMOUNT }),
-			standard!(KeyDown(KeyLeftBracket); modifiers=[KeyControl], action_dispatch=DocumentMessage::SelectedLayersLower),
+		entry!(KeyDown(ArrowUp); modifiers=[Shift, ArrowRight], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: BIG_NUDGE_AMOUNT, delta_y: -BIG_NUDGE_AMOUNT }),
-			mac_only!(KeyDown(KeyLeftBracket); modifiers=[KeyCommand], action_dispatch=DocumentMessage::SelectedLayersLower),
+		entry!(KeyDown(ArrowUp); modifiers=[Shift], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: 0., delta_y: -BIG_NUDGE_AMOUNT }),
-		),
+		entry!(KeyDown(ArrowDown); modifiers=[Shift, ArrowLeft], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -BIG_NUDGE_AMOUNT, delta_y: BIG_NUDGE_AMOUNT }),
-		entry_multiplatform!(
+		entry!(KeyDown(ArrowDown); modifiers=[Shift, ArrowRight], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: BIG_NUDGE_AMOUNT, delta_y: BIG_NUDGE_AMOUNT }),
-			standard!(KeyDown(KeyRightBracket); modifiers=[KeyControl], action_dispatch=DocumentMessage::SelectedLayersRaise),
+		entry!(KeyDown(ArrowDown); modifiers=[Shift], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: 0., delta_y: BIG_NUDGE_AMOUNT }),
-			mac_only!(KeyDown(KeyRightBracket); modifiers=[KeyCommand], action_dispatch=DocumentMessage::SelectedLayersRaise),
+		entry!(KeyDown(ArrowLeft); modifiers=[Shift, ArrowUp], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -BIG_NUDGE_AMOUNT, delta_y: -BIG_NUDGE_AMOUNT }),
-		),
+		entry!(KeyDown(ArrowLeft); modifiers=[Shift, ArrowDown], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -BIG_NUDGE_AMOUNT, delta_y: BIG_NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowUp); modifiers=[KeyShift, KeyArrowLeft], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -BIG_NUDGE_AMOUNT, delta_y: -BIG_NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowLeft); modifiers=[Shift], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -BIG_NUDGE_AMOUNT, delta_y: 0. }),
-		entry!(KeyDown(KeyArrowUp); modifiers=[KeyShift, KeyArrowRight], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: BIG_NUDGE_AMOUNT, delta_y: -BIG_NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowRight); modifiers=[Shift, ArrowUp], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: BIG_NUDGE_AMOUNT, delta_y: -BIG_NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowUp); modifiers=[KeyShift], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: 0., delta_y: -BIG_NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowRight); modifiers=[Shift, ArrowDown], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: BIG_NUDGE_AMOUNT, delta_y: BIG_NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowDown); modifiers=[KeyShift, KeyArrowLeft], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -BIG_NUDGE_AMOUNT, delta_y: BIG_NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowRight); modifiers=[Shift], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: BIG_NUDGE_AMOUNT, delta_y: 0. }),
-		entry!(KeyDown(KeyArrowDown); modifiers=[KeyShift, KeyArrowRight], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: BIG_NUDGE_AMOUNT, delta_y: BIG_NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowUp); modifiers=[ArrowLeft], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -NUDGE_AMOUNT, delta_y: -NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowDown); modifiers=[KeyShift], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: 0., delta_y: BIG_NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowUp); modifiers=[ArrowRight], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: -NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowLeft); modifiers=[KeyShift, KeyArrowUp], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -BIG_NUDGE_AMOUNT, delta_y: -BIG_NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowUp); action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: 0., delta_y: -NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowLeft); modifiers=[KeyShift, KeyArrowDown], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -BIG_NUDGE_AMOUNT, delta_y: BIG_NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowDown); modifiers=[ArrowLeft], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -NUDGE_AMOUNT, delta_y: NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowLeft); modifiers=[KeyShift], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -BIG_NUDGE_AMOUNT, delta_y: 0. }),
+		entry!(KeyDown(ArrowDown); modifiers=[ArrowRight], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowRight); modifiers=[KeyShift, KeyArrowUp], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: BIG_NUDGE_AMOUNT, delta_y: -BIG_NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowDown); action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: 0., delta_y: NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowRight); modifiers=[KeyShift, KeyArrowDown], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: BIG_NUDGE_AMOUNT, delta_y: BIG_NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowLeft); modifiers=[ArrowUp], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -NUDGE_AMOUNT, delta_y: -NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowRight); modifiers=[KeyShift], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: BIG_NUDGE_AMOUNT, delta_y: 0. }),
+		entry!(KeyDown(ArrowLeft); modifiers=[ArrowDown], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -NUDGE_AMOUNT, delta_y: NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowUp); modifiers=[KeyArrowLeft], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -NUDGE_AMOUNT, delta_y: -NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowLeft); action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -NUDGE_AMOUNT, delta_y: 0. }),
-		entry!(KeyDown(KeyArrowUp); modifiers=[KeyArrowRight], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: -NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowRight); modifiers=[ArrowUp], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: -NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowUp); action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: 0., delta_y: -NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowRight); modifiers=[ArrowDown], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowDown); modifiers=[KeyArrowLeft], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -NUDGE_AMOUNT, delta_y: NUDGE_AMOUNT }),
+		entry!(KeyDown(ArrowRight); action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: 0. }),
-		entry!(KeyDown(KeyArrowDown); modifiers=[KeyArrowRight], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowDown); action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: 0., delta_y: NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowLeft); modifiers=[KeyArrowUp], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -NUDGE_AMOUNT, delta_y: -NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowLeft); modifiers=[KeyArrowDown], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -NUDGE_AMOUNT, delta_y: NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowLeft); action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: -NUDGE_AMOUNT, delta_y: 0. }),
-		entry!(KeyDown(KeyArrowRight); modifiers=[KeyArrowUp], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: -NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowRight); modifiers=[KeyArrowDown], action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: NUDGE_AMOUNT }),
-		entry!(KeyDown(KeyArrowRight); action_dispatch=DocumentMessage::NudgeSelectedLayers { delta_x: NUDGE_AMOUNT, delta_y: 0. }),
 		//
 		// TransformLayerMessage
 		entry!(KeyDown(KeyG); action_dispatch=TransformLayerMessage::BeginGrab),
@@ -275,85 +265,85 @@ pub fn default_mapping() -> Mapping {
 		entry!(KeyDown(KeyS); action_dispatch=TransformLayerMessage::BeginScale),
 		//
 		// MovementMessage
-		entry!(KeyDown(Mmb); modifiers=[KeyControl], action_dispatch=MovementMessage::RotateCanvasBegin),
+		entry!(KeyDown(Mmb); modifiers=[Control], action_dispatch=MovementMessage::RotateCanvasBegin),
-		entry!(KeyDown(Mmb); modifiers=[KeyShift], action_dispatch=MovementMessage::ZoomCanvasBegin),
+		entry!(KeyDown(Mmb); modifiers=[Shift], action_dispatch=MovementMessage::ZoomCanvasBegin),
 		entry!(KeyDown(Mmb); action_dispatch=MovementMessage::TranslateCanvasBegin),
 		entry!(KeyUp(Mmb); action_dispatch=MovementMessage::TransformCanvasEnd),
-		entry!(KeyDown(Lmb); modifiers=[KeySpace], action_dispatch=MovementMessage::TranslateCanvasBegin),
+		entry!(KeyDown(Lmb); modifiers=[Space], action_dispatch=MovementMessage::TranslateCanvasBegin),
-		entry!(KeyUp(Lmb); modifiers=[KeySpace], action_dispatch=MovementMessage::TransformCanvasEnd),
+		entry!(KeyUp(Lmb); modifiers=[Space], action_dispatch=MovementMessage::TransformCanvasEnd),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyPlus); modifiers=[KeyControl], action_dispatch=MovementMessage::IncreaseCanvasZoom { center_on_mouse: false }),
+			standard!(KeyDown(NumpadAdd); modifiers=[Control], action_dispatch=MovementMessage::IncreaseCanvasZoom { center_on_mouse: false }),
-			mac_only!(KeyDown(KeyPlus); modifiers=[KeyCommand], action_dispatch=MovementMessage::IncreaseCanvasZoom { center_on_mouse: false }),
+			mac_only!(KeyDown(NumpadAdd); modifiers=[Command], action_dispatch=MovementMessage::IncreaseCanvasZoom { center_on_mouse: false }),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyEquals); modifiers=[KeyControl], action_dispatch=MovementMessage::IncreaseCanvasZoom { center_on_mouse: false }),
+			standard!(KeyDown(Equal); modifiers=[Control], action_dispatch=MovementMessage::IncreaseCanvasZoom { center_on_mouse: false }),
-			mac_only!(KeyDown(KeyEquals); modifiers=[KeyCommand], action_dispatch=MovementMessage::IncreaseCanvasZoom { center_on_mouse: false }),
+			mac_only!(KeyDown(Equal); modifiers=[Command], action_dispatch=MovementMessage::IncreaseCanvasZoom { center_on_mouse: false }),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyMinus); modifiers=[KeyControl], action_dispatch=MovementMessage::DecreaseCanvasZoom { center_on_mouse: false }),
+			standard!(KeyDown(Minus); modifiers=[Control], action_dispatch=MovementMessage::DecreaseCanvasZoom { center_on_mouse: false }),
-			mac_only!(KeyDown(KeyMinus); modifiers=[KeyCommand], action_dispatch=MovementMessage::DecreaseCanvasZoom { center_on_mouse: false }),
+			mac_only!(KeyDown(Minus); modifiers=[Command], action_dispatch=MovementMessage::DecreaseCanvasZoom { center_on_mouse: false }),
 		),
-		entry!(WheelScroll; modifiers=[KeyControl], action_dispatch=MovementMessage::WheelCanvasZoom),
+		entry!(WheelScroll; modifiers=[Control], action_dispatch=MovementMessage::WheelCanvasZoom),
-		entry!(WheelScroll; modifiers=[KeyShift], action_dispatch=MovementMessage::WheelCanvasTranslate { use_y_as_x: true }),
+		entry!(WheelScroll; modifiers=[Shift], action_dispatch=MovementMessage::WheelCanvasTranslate { use_y_as_x: true }),
 		entry!(WheelScroll; action_dispatch=MovementMessage::WheelCanvasTranslate { use_y_as_x: false }),
-		entry!(KeyDown(KeyPageUp); modifiers=[KeyShift], action_dispatch=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(1., 0.) }),
+		entry!(KeyDown(PageUp); modifiers=[Shift], action_dispatch=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(1., 0.) }),
-		entry!(KeyDown(KeyPageDown); modifiers=[KeyShift], action_dispatch=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(-1., 0.) }),
+		entry!(KeyDown(PageDown); modifiers=[Shift], action_dispatch=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(-1., 0.) }),
-		entry!(KeyDown(KeyPageUp); action_dispatch=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(0., 1.) }),
+		entry!(KeyDown(PageUp); action_dispatch=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(0., 1.) }),
-		entry!(KeyDown(KeyPageDown); action_dispatch=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(0., -1.) }),
+		entry!(KeyDown(PageDown); action_dispatch=MovementMessage::TranslateCanvasByViewportFraction { delta: DVec2::new(0., -1.) }),
 		//
 		// PortfolioMessage
 		entry_multiplatform!(
-			standard!(KeyDown(KeyO); modifiers=[KeyControl], action_dispatch=PortfolioMessage::OpenDocument),
+			standard!(KeyDown(KeyO); modifiers=[Control], action_dispatch=PortfolioMessage::OpenDocument),
-			mac_only!(KeyDown(KeyO); modifiers=[KeyCommand], action_dispatch=PortfolioMessage::OpenDocument),
+			mac_only!(KeyDown(KeyO); modifiers=[Command], action_dispatch=PortfolioMessage::OpenDocument),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyI); modifiers=[KeyControl], action_dispatch=PortfolioMessage::Import),
+			standard!(KeyDown(KeyI); modifiers=[Control], action_dispatch=PortfolioMessage::Import),
-			mac_only!(KeyDown(KeyI); modifiers=[KeyCommand], action_dispatch=PortfolioMessage::Import),
+			mac_only!(KeyDown(KeyI); modifiers=[Command], action_dispatch=PortfolioMessage::Import),
 		),
-		entry!(KeyDown(KeyTab); modifiers=[KeyControl], action_dispatch=PortfolioMessage::NextDocument),
+		entry!(KeyDown(Tab); modifiers=[Control], action_dispatch=PortfolioMessage::NextDocument),
-		entry!(KeyDown(KeyTab); modifiers=[KeyControl, KeyShift], action_dispatch=PortfolioMessage::PrevDocument),
+		entry!(KeyDown(Tab); modifiers=[Control, Shift], action_dispatch=PortfolioMessage::PrevDocument),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyW); modifiers=[KeyControl], action_dispatch=PortfolioMessage::CloseActiveDocumentWithConfirmation),
+			standard!(KeyDown(KeyW); modifiers=[Control], action_dispatch=PortfolioMessage::CloseActiveDocumentWithConfirmation),
-			mac_only!(KeyDown(KeyW); modifiers=[KeyCommand], action_dispatch=PortfolioMessage::CloseActiveDocumentWithConfirmation),
+			mac_only!(KeyDown(KeyW); modifiers=[Command], action_dispatch=PortfolioMessage::CloseActiveDocumentWithConfirmation),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyX); modifiers=[KeyControl], action_dispatch=PortfolioMessage::Cut { clipboard: Clipboard::Device }),
+			standard!(KeyDown(KeyX); modifiers=[Control], action_dispatch=PortfolioMessage::Cut { clipboard: Clipboard::Device }),
-			mac_only!(KeyDown(KeyX); modifiers=[KeyCommand], action_dispatch=PortfolioMessage::Cut { clipboard: Clipboard::Device }),
+			mac_only!(KeyDown(KeyX); modifiers=[Command], action_dispatch=PortfolioMessage::Cut { clipboard: Clipboard::Device }),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyC); modifiers=[KeyControl], action_dispatch=PortfolioMessage::Copy { clipboard: Clipboard::Device }),
+			standard!(KeyDown(KeyC); modifiers=[Control], action_dispatch=PortfolioMessage::Copy { clipboard: Clipboard::Device }),
-			mac_only!(KeyDown(KeyC); modifiers=[KeyCommand], action_dispatch=PortfolioMessage::Copy { clipboard: Clipboard::Device }),
+			mac_only!(KeyDown(KeyC); modifiers=[Command], action_dispatch=PortfolioMessage::Copy { clipboard: Clipboard::Device }),
 		),
 		entry_multiplatform!(
 			// This shortcut is intercepted in the frontend; it exists here only as a shortcut mapping source
-			standard!(KeyDown(KeyV); modifiers=[KeyControl], action_dispatch=FrontendMessage::TriggerPaste),
+			standard!(KeyDown(KeyV); modifiers=[Control], action_dispatch=FrontendMessage::TriggerPaste),
-			mac_only!(KeyDown(KeyV); modifiers=[KeyCommand], action_dispatch=FrontendMessage::TriggerPaste),
+			mac_only!(KeyDown(KeyV); modifiers=[Command], action_dispatch=FrontendMessage::TriggerPaste),
 		),
 		//
 		// DialogMessage
 		entry_multiplatform!(
-			standard!(KeyDown(KeyN); modifiers=[KeyControl], action_dispatch=DialogMessage::RequestNewDocumentDialog),
+			standard!(KeyDown(KeyN); modifiers=[Control], action_dispatch=DialogMessage::RequestNewDocumentDialog),
-			mac_only!(KeyDown(KeyN); modifiers=[KeyCommand], action_dispatch=DialogMessage::RequestNewDocumentDialog),
+			mac_only!(KeyDown(KeyN); modifiers=[Command], action_dispatch=DialogMessage::RequestNewDocumentDialog),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyW); modifiers=[KeyControl, KeyAlt], action_dispatch=DialogMessage::CloseAllDocumentsWithConfirmation),
+			standard!(KeyDown(KeyW); modifiers=[Control, Alt], action_dispatch=DialogMessage::CloseAllDocumentsWithConfirmation),
-			mac_only!(KeyDown(KeyW); modifiers=[KeyCommand, KeyAlt], action_dispatch=DialogMessage::CloseAllDocumentsWithConfirmation),
+			mac_only!(KeyDown(KeyW); modifiers=[Command, Alt], action_dispatch=DialogMessage::CloseAllDocumentsWithConfirmation),
 		),
 		entry_multiplatform!(
-			standard!(KeyDown(KeyE); modifiers=[KeyControl], action_dispatch=DialogMessage::RequestExportDialog),
+			standard!(KeyDown(KeyE); modifiers=[Control], action_dispatch=DialogMessage::RequestExportDialog),
-			mac_only!(KeyDown(KeyE); modifiers=[KeyCommand], action_dispatch=DialogMessage::RequestExportDialog),
+			mac_only!(KeyDown(KeyE); modifiers=[Command], action_dispatch=DialogMessage::RequestExportDialog),
 		),
 		//
 		// DebugMessage
-		entry!(KeyDown(KeyT); modifiers=[KeyAlt], action_dispatch=DebugMessage::ToggleTraceLogs),
+		entry!(KeyDown(KeyT); modifiers=[Alt], action_dispatch=DebugMessage::ToggleTraceLogs),
-		entry!(KeyDown(Key0); modifiers=[KeyAlt], action_dispatch=DebugMessage::MessageOff),
+		entry!(KeyDown(Digit0); modifiers=[Alt], action_dispatch=DebugMessage::MessageOff),
-		entry!(KeyDown(Key1); modifiers=[KeyAlt], action_dispatch=DebugMessage::MessageNames),
+		entry!(KeyDown(Digit1); modifiers=[Alt], action_dispatch=DebugMessage::MessageNames),
-		entry!(KeyDown(Key2); modifiers=[KeyAlt], action_dispatch=DebugMessage::MessageContents),
+		entry!(KeyDown(Digit2); modifiers=[Alt], action_dispatch=DebugMessage::MessageContents),
 	];
 	let (mut key_up, mut key_down, mut double_click, mut wheel_scroll, mut pointer_move) = mappings;
 
 	// TODO: Hardcode these 10 lines into 10 lines of declarations, or make this use a macro to do all 10 in one line
-	const NUMBER_KEYS: [Key; 10] = [Key0, Key1, Key2, Key3, Key4, Key5, Key6, Key7, Key8, Key9];
+	const NUMBER_KEYS: [Key; 10] = [Digit0, Digit1, Digit2, Digit3, Digit4, Digit5, Digit6, Digit7, Digit8, Digit9];
 	for (i, key) in NUMBER_KEYS.iter().enumerate() {
 		key_down[*key as usize].0.insert(
 			0,

editor/src/messages/input_mapper/input_mapper_message_handler.rs

@@ -82,7 +82,7 @@ impl InputMapperMessageHandler {
 
 				keys.sort_by(|a, b| {
 					// Order according to platform guidelines mentioned at https://ux.stackexchange.com/questions/58185/normative-ordering-for-modifier-key-combinations
-					const ORDER: [Key; 4] = [Key::KeyControl, Key::KeyAlt, Key::KeyShift, Key::KeyCommand];
+					const ORDER: [Key; 4] = [Key::Control, Key::Alt, Key::Shift, Key::Command];
 
 					match (ORDER.contains(a), ORDER.contains(b)) {
 						(true, true) => ORDER.iter().position(|key| key == a).unwrap().cmp(&ORDER.iter().position(|key| key == b).unwrap()),

editor/src/messages/input_mapper/utility_types/input_keyboard.rs

@@ -3,6 +3,7 @@ use crate::messages::prelude::*;
 pub use graphene::DocumentResponse;
 
 use bitflags::bitflags;
+use serde::ser::SerializeStruct;
 use serde::{Deserialize, Serialize};
 use std::fmt::{self, Display, Formatter};
 use std::ops::{BitAnd, BitAndAssign, BitOr, BitOrAssign, BitXor, BitXorAssign};
@@ -34,18 +35,27 @@ bitflags! {
 	}
 }
 
-// TODO: Consider renaming to `KeyMessage` for consistency with other messages that implement `#[impl_message(..)]`
+// Currently this is mostly based on the JS `KeyboardEvent.code` list: <https://www.w3.org/TR/uievents-code/>
+// But in the future, especially once users can customize keyboard mappings, we should deviate more from this so we have actual symbols
+// like `+` (which doesn't exist because it's the shifted version of `=` on the US keyboard, after which these scan codes are named).
+// We'd ideally like to bind shortcuts to symbols, not scan codes, so the shortcut for "zoom in" is `Ctrl +` which the user can press
+// (although we ignore the shift key, so the user doesn't have to press `Ctrl Shift +` on a US keyboard), even if the keyboard layout
+// is for a different locale where the `+` key is somewhere entirely different, shifted or not. This would then also work for numpad `+`.
 #[impl_message(Message, InputMapperMessage, KeyDown)]
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Deserialize)]
 pub enum Key {
-	UnknownKey,
+	// Writing system keys
-
+	Digit0,
-	// Mouse keys
+	Digit1,
-	Lmb,
+	Digit2,
-	Rmb,
+	Digit3,
-	Mmb,
+	Digit4,
-
+	Digit5,
-	// Keyboard keys
+	Digit6,
+	Digit7,
+	Digit8,
+	Digit9,
+	//
 	KeyA,
 	KeyB,
 	KeyC,
@@ -72,52 +82,192 @@ pub enum Key {
 	KeyX,
 	KeyY,
 	KeyZ,
-	Key0,
+	//
-	Key1,
+	Backquote,
-	Key2,
+	Backslash,
-	Key3,
+	BracketLeft,
-	Key4,
+	BracketRight,
-	Key5,
+	Comma,
-	Key6,
+	Equal,
-	Key7,
+	Minus,
-	Key8,
+	Period,
-	Key9,
+	Quote,
-	KeyEnter,
+	Semicolon,
-	KeyEquals,
+	Slash,
-	KeyMinus,
+
-	KeyPlus,
+	// Functional keys
-	KeyShift,
+	Alt,
-	KeySpace,
+	Meta,
-	KeyControl,
+	Shift,
-	KeyCommand,
+	Control,
-	KeyMeta,
+	Backspace,
-	KeyDelete,
+	CapsLock,
-	KeyBackspace,
+	ContextMenu,
-	KeyAlt,
+	Enter,
-	KeyEscape,
+	Space,
-	KeyTab,
+	Tab,
-	KeyArrowUp,
+
-	KeyArrowDown,
+	// Control pad keys
-	KeyArrowLeft,
+	Delete,
-	KeyArrowRight,
+	End,
-	KeyLeftBracket,
+	Help,
-	KeyRightBracket,
+	Home,
-	KeyLeftCurlyBracket,
+	Insert,
-	KeyRightCurlyBracket,
+	PageDown,
-	KeyPageUp,
+	PageUp,
-	KeyPageDown,
+
-	KeyComma,
+	// Arrow pad keys
-	KeyPeriod,
+	ArrowDown,
+	ArrowLeft,
+	ArrowRight,
+	ArrowUp,
+
+	// Numpad keys
+	// Numpad0,
+	// Numpad1,
+	// Numpad2,
+	// Numpad3,
+	// Numpad4,
+	// Numpad5,
+	// Numpad6,
+	// Numpad7,
+	// Numpad8,
+	// Numpad9,
+	NumLock,
+	NumpadAdd,
+	// NumpadBackspace,
+	// NumpadClear,
+	// NumpadClearEntry,
+	// NumpadComma,
+	// NumpadDecimal,
+	// NumpadDivide,
+	// NumpadEnter,
+	// NumpadEqual,
+	NumpadHash,
+	// NumpadMemoryAdd,
+	// NumpadMemoryClear,
+	// NumpadMemoryRecall,
+	// NumpadMemoryStore,
+	// NumpadMemorySubtract,
+	NumpadMultiply,
+	NumpadParenLeft,
+	NumpadParenRight,
+	// NumpadStar,
+	// NumpadSubtract,
+
+	// Function keys
+	Escape,
+	F1,
+	F2,
+	F3,
+	F4,
+	F5,
+	F6,
+	F7,
+	F8,
+	F9,
+	F10,
+	F11,
+	F12,
+	F13,
+	F14,
+	F15,
+	F16,
+	F17,
+	F18,
+	F19,
+	F20,
+	F21,
+	F22,
+	F23,
+	F24,
+	Fn,
+	FnLock,
+	PrintScreen,
+	ScrollLock,
+	Pause,
+
+	// Unidentified keys
+	Unidentified,
+
+	// Other keys that aren't part of the W3C spec
+	Command,
+	Lmb,
+	Rmb,
+	Mmb,
 
 	// This has to be the last element in the enum
 	NumKeys,
 }
 
+impl Serialize for Key {
+	fn serialize<S: serde::Serializer>(&self, serializer: S) -> Result<S::Ok, S::Error> {
+		let key = format!("{:?}", self);
+		let label = self.to_string();
+
+		let mut state = serializer.serialize_struct("KeyWithLabel", 2)?;
+		state.serialize_field("key", &key)?;
+		state.serialize_field("label", &label)?;
+		state.end()
+	}
+}
+
 impl fmt::Display for Key {
+	// TODO: Relevant key labels should be localized when we get around to implementing localization/internationalization
 	fn fmt(&self, f: &mut fmt::Formatter) -> std::fmt::Result {
 		let key_name = format!("{:?}", self);
 
-		let name = if &key_name[0..3] == "Key" { key_name.chars().skip(3).collect::<String>() } else { key_name };
+		// Writing system keys
+		const DIGIT_PREFIX: &str = "Digit";
+		if key_name.len() == DIGIT_PREFIX.len() + 1 && &key_name[0..DIGIT_PREFIX.len()] == "Digit" {
+			return write!(f, "{}", key_name.chars().skip(DIGIT_PREFIX.len()).collect::<String>());
+		}
+		const KEY_PREFIX: &str = "Key";
+		if key_name.len() == KEY_PREFIX.len() + 1 && &key_name[0..KEY_PREFIX.len()] == "Key" {
+			return write!(f, "{}", key_name.chars().skip(KEY_PREFIX.len()).collect::<String>());
+		}
+
+		let name = match self {
+			// Writing system keys
+			Self::Backquote => "`",
+			Self::Backslash => "\\",
+			Self::BracketLeft => "[",
+			Self::BracketRight => "]",
+			Self::Comma => ",",
+			Self::Equal => "=",
+			Self::Minus => "-",
+			Self::Period => ".",
+			Self::Quote => "'",
+			Self::Semicolon => ";",
+			Self::Slash => "/",
+
+			// Functional keys
+			Self::Control => "Ctrl",
+
+			// Control pad keys
+			Self::Delete => "Del",
+			Self::PageDown => "PgDn",
+			Self::PageUp => "PgUp",
+
+			// Arrow pad keys
+			Self::ArrowDown => "↓",
+			Self::ArrowLeft => "←",
+			Self::ArrowRight => "→",
+			Self::ArrowUp => "↑",
+
+			// Numpad keys
+			Self::NumpadAdd => "Numpad +",
+			Self::NumpadHash => "Numpad #",
+			Self::NumpadMultiply => "Numpad *",
+			Self::NumpadParenLeft => "Numpad (",
+			Self::NumpadParenRight => "Numpad )",
+
+			// Function keys
+			Self::Escape => "Esc",
+			Self::PrintScreen => "PrtScr",
+
+			_ => key_name.as_str(),
+		};
 
 		write!(f, "{}", name)
 	}

editor/src/messages/input_preprocessor/input_preprocessor_message_handler.rs

@@ -139,12 +139,12 @@ impl InputPreprocessorMessageHandler {
 	}
 
 	fn handle_modifier_keys(&mut self, modifier_keys: ModifierKeys, keyboard_platform: KeyboardPlatformLayout, responses: &mut VecDeque<Message>) {
-		self.handle_modifier_key(Key::KeyShift, modifier_keys.contains(ModifierKeys::SHIFT), responses);
+		self.handle_modifier_key(Key::Shift, modifier_keys.contains(ModifierKeys::SHIFT), responses);
-		self.handle_modifier_key(Key::KeyAlt, modifier_keys.contains(ModifierKeys::ALT), responses);
+		self.handle_modifier_key(Key::Alt, modifier_keys.contains(ModifierKeys::ALT), responses);
-		self.handle_modifier_key(Key::KeyControl, modifier_keys.contains(ModifierKeys::CONTROL), responses);
+		self.handle_modifier_key(Key::Control, modifier_keys.contains(ModifierKeys::CONTROL), responses);
 		let meta_or_command = match keyboard_platform {
-			KeyboardPlatformLayout::Mac => Key::KeyCommand,
+			KeyboardPlatformLayout::Mac => Key::Command,
-			KeyboardPlatformLayout::Standard => Key::KeyMeta,
+			KeyboardPlatformLayout::Standard => Key::Meta,
 		};
 		self.handle_modifier_key(meta_or_command, modifier_keys.contains(ModifierKeys::META_OR_COMMAND), responses);
 	}
@@ -186,8 +186,8 @@ mod test {
 
 		input_preprocessor.process_message(message, KeyboardPlatformLayout::Standard, &mut responses);
 
-		assert!(input_preprocessor.keyboard.get(Key::KeyAlt as usize));
+		assert!(input_preprocessor.keyboard.get(Key::Alt as usize));
-		assert_eq!(responses.pop_front(), Some(InputMapperMessage::KeyDown(Key::KeyAlt).into()));
+		assert_eq!(responses.pop_front(), Some(InputMapperMessage::KeyDown(Key::Alt).into()));
 	}
 
 	#[test]
@@ -202,8 +202,8 @@ mod test {
 
 		input_preprocessor.process_message(message, KeyboardPlatformLayout::Standard, &mut responses);
 
-		assert!(input_preprocessor.keyboard.get(Key::KeyControl as usize));
+		assert!(input_preprocessor.keyboard.get(Key::Control as usize));
-		assert_eq!(responses.pop_front(), Some(InputMapperMessage::KeyDown(Key::KeyControl).into()));
+		assert_eq!(responses.pop_front(), Some(InputMapperMessage::KeyDown(Key::Control).into()));
 	}
 
 	#[test]
@@ -218,14 +218,14 @@ mod test {
 
 		input_preprocessor.process_message(message, KeyboardPlatformLayout::Standard, &mut responses);
 
-		assert!(input_preprocessor.keyboard.get(Key::KeyShift as usize));
+		assert!(input_preprocessor.keyboard.get(Key::Shift as usize));
-		assert_eq!(responses.pop_front(), Some(InputMapperMessage::KeyDown(Key::KeyShift).into()));
+		assert_eq!(responses.pop_front(), Some(InputMapperMessage::KeyDown(Key::Shift).into()));
 	}
 
 	#[test]
 	fn process_action_key_down_handle_modifier_keys() {
 		let mut input_preprocessor = InputPreprocessorMessageHandler::default();
-		input_preprocessor.keyboard.set(Key::KeyControl as usize);
+		input_preprocessor.keyboard.set(Key::Control as usize);
 
 		let key = Key::KeyA;
 		let modifier_keys = ModifierKeys::empty();
@@ -235,8 +235,8 @@ mod test {
 
 		input_preprocessor.process_message(message, KeyboardPlatformLayout::Standard, &mut responses);
 
-		assert!(!input_preprocessor.keyboard.get(Key::KeyControl as usize));
+		assert!(!input_preprocessor.keyboard.get(Key::Control as usize));
-		assert_eq!(responses.pop_front(), Some(InputMapperMessage::KeyUp(Key::KeyControl).into()));
+		assert_eq!(responses.pop_front(), Some(InputMapperMessage::KeyUp(Key::Control).into()));
 	}
 
 	#[test]
@@ -251,9 +251,9 @@ mod test {
 
 		input_preprocessor.process_message(message, KeyboardPlatformLayout::Standard, &mut responses);
 
-		assert!(input_preprocessor.keyboard.get(Key::KeyControl as usize));
+		assert!(input_preprocessor.keyboard.get(Key::Control as usize));
-		assert!(input_preprocessor.keyboard.get(Key::KeyShift as usize));
+		assert!(input_preprocessor.keyboard.get(Key::Shift as usize));
-		assert!(responses.contains(&InputMapperMessage::KeyDown(Key::KeyControl).into()));
+		assert!(responses.contains(&InputMapperMessage::KeyDown(Key::Control).into()));
-		assert!(responses.contains(&InputMapperMessage::KeyDown(Key::KeyControl).into()));
+		assert!(responses.contains(&InputMapperMessage::KeyDown(Key::Control).into()));
 	}
 }

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -1358,6 +1358,7 @@ impl DocumentMessageHandler {
 				size: 24,
 				icon: "ZoomIn".into(),
 				tooltip: "Zoom In".into(),
+				tooltip_shortcut: action_keys!(MovementMessageDiscriminant::IncreaseCanvasZoom),
 				on_update: WidgetCallback::new(|_| MovementMessage::IncreaseCanvasZoom { center_on_mouse: false }.into()),
 				..IconButton::default()
 			})),
@@ -1365,6 +1366,7 @@ impl DocumentMessageHandler {
 				size: 24,
 				icon: "ZoomOut".into(),
 				tooltip: "Zoom Out".into(),
+				tooltip_shortcut: action_keys!(MovementMessageDiscriminant::DecreaseCanvasZoom),
 				on_update: WidgetCallback::new(|_| MovementMessage::DecreaseCanvasZoom { center_on_mouse: false }.into()),
 				..IconButton::default()
 			})),
@@ -1372,6 +1374,7 @@ impl DocumentMessageHandler {
 				size: 24,
 				icon: "ZoomReset".into(),
 				tooltip: "Zoom to 100%".into(),
+				tooltip_shortcut: action_keys!(DocumentMessageDiscriminant::ZoomCanvasTo100Percent),
 				on_update: WidgetCallback::new(|_| MovementMessage::SetCanvasZoom { zoom_factor: 1. }.into()),
 				..IconButton::default()
 			})),

editor/src/messages/portfolio/document/movement/movement_message_handler.rs

@@ -164,7 +164,7 @@ impl MessageHandler<MovementMessage, (&Document, &InputPreprocessorMessageHandle
 				responses.push_back(
 					FrontendMessage::UpdateInputHints {
 						hint_data: HintData(vec![HintGroup(vec![HintInfo {
-							key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+							key_groups: vec![KeysGroup(vec![Key::Control])],
 							key_groups_mac: None,
 							mouse: None,
 							label: String::from("Snap 15°"),
@@ -246,7 +246,7 @@ impl MessageHandler<MovementMessage, (&Document, &InputPreprocessorMessageHandle
 				responses.push_back(
 					FrontendMessage::UpdateInputHints {
 						hint_data: HintData(vec![HintGroup(vec![HintInfo {
-							key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+							key_groups: vec![KeysGroup(vec![Key::Control])],
 							key_groups_mac: None,
 							mouse: None,
 							label: String::from("Snap Increments"),

editor/src/messages/portfolio/menu_bar/menu_bar_message_handler.rs

@@ -242,6 +242,7 @@ impl PropertyHolder for MenuBarMessageHandler {
 				children: MenuEntryGroups(vec![
 					vec![MenuEntry {
 						label: "About Graphite".into(),
+						icon: Some("GraphiteLogo".into()),
 						action: MenuEntry::create_action(|_| DialogMessage::RequestAboutGraphiteDialog.into()),
 						..MenuEntry::default()
 					}],

editor/src/messages/tool/tool_messages/artboard_tool.rs

@@ -424,7 +424,7 @@ impl Fsm for ArtboardToolFsmState {
 					plus: false,
 				}]),
 				HintGroup(vec![HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyBackspace])],
+					key_groups: vec![KeysGroup(vec![Key::Backspace])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Delete Artboard"),
@@ -432,7 +432,7 @@ impl Fsm for ArtboardToolFsmState {
 				}]),
 			]),
 			ArtboardToolFsmState::Dragging => HintData(vec![HintGroup(vec![HintInfo {
-				key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+				key_groups: vec![KeysGroup(vec![Key::Shift])],
 				key_groups_mac: None,
 				mouse: None,
 				label: String::from("Constrain to Axis"),
@@ -440,14 +440,14 @@ impl Fsm for ArtboardToolFsmState {
 			}])]),
 			ArtboardToolFsmState::Drawing | ArtboardToolFsmState::ResizingBounds => HintData(vec![HintGroup(vec![
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Constrain Square"),
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("From Center"),

editor/src/messages/tool/tool_messages/ellipse_tool.rs

@@ -191,14 +191,14 @@ impl Fsm for EllipseToolFsmState {
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Constrain Circular"),
 					plus: true,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("From Center"),
@@ -207,14 +207,14 @@ impl Fsm for EllipseToolFsmState {
 			])]),
 			EllipseToolFsmState::Drawing => HintData(vec![HintGroup(vec![
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Constrain Circular"),
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("From Center"),

editor/src/messages/tool/tool_messages/gradient_tool.rs

@@ -469,7 +469,7 @@ impl Fsm for GradientToolFsmState {
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Snap 15°"),
@@ -477,7 +477,7 @@ impl Fsm for GradientToolFsmState {
 				},
 			])]),
 			GradientToolFsmState::Drawing => HintData(vec![HintGroup(vec![HintInfo {
-				key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+				key_groups: vec![KeysGroup(vec![Key::Shift])],
 				key_groups_mac: None,
 				mouse: None,
 				label: String::from("Snap 15°"),

editor/src/messages/tool/tool_messages/line_tool.rs

@@ -247,21 +247,21 @@ impl Fsm for LineToolFsmState {
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Snap 15°"),
 					plus: true,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("From Center"),
 					plus: true,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+					key_groups: vec![KeysGroup(vec![Key::Control])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Lock Angle"),
@@ -270,21 +270,21 @@ impl Fsm for LineToolFsmState {
 			])]),
 			LineToolFsmState::Drawing => HintData(vec![HintGroup(vec![
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Snap 15°"),
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("From Center"),
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+					key_groups: vec![KeysGroup(vec![Key::Control])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Lock Angle"),

editor/src/messages/tool/tool_messages/navigate_tool.rs

@@ -201,7 +201,7 @@ impl Fsm for NavigateToolFsmState {
 						plus: false,
 					},
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+						key_groups: vec![KeysGroup(vec![Key::Shift])],
 						key_groups_mac: None,
 						mouse: None,
 						label: String::from("Zoom Out"),
@@ -217,7 +217,7 @@ impl Fsm for NavigateToolFsmState {
 						plus: false,
 					},
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+						key_groups: vec![KeysGroup(vec![Key::Control])],
 						key_groups_mac: None,
 						mouse: None,
 						label: String::from("Snap Increments"),
@@ -240,7 +240,7 @@ impl Fsm for NavigateToolFsmState {
 						plus: false,
 					},
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+						key_groups: vec![KeysGroup(vec![Key::Control])],
 						key_groups_mac: None,
 						mouse: None,
 						label: String::from("Snap 15°"),
@@ -249,14 +249,14 @@ impl Fsm for NavigateToolFsmState {
 				]),
 			]),
 			NavigateToolFsmState::Tilting => HintData(vec![HintGroup(vec![HintInfo {
-				key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+				key_groups: vec![KeysGroup(vec![Key::Control])],
 				key_groups_mac: None,
 				mouse: None,
 				label: String::from("Snap 15°"),
 				plus: false,
 			}])]),
 			NavigateToolFsmState::Zooming => HintData(vec![HintGroup(vec![HintInfo {
-				key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+				key_groups: vec![KeysGroup(vec![Key::Control])],
 				key_groups_mac: None,
 				mouse: None,
 				label: String::from("Snap Increments"),

editor/src/messages/tool/tool_messages/path_tool.rs

@@ -312,7 +312,7 @@ impl Fsm for PathToolFsmState {
 						plus: false,
 					},
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+						key_groups: vec![KeysGroup(vec![Key::Shift])],
 						key_groups_mac: None,
 						mouse: None,
 						label: String::from("Grow/Shrink Selection"),
@@ -329,10 +329,10 @@ impl Fsm for PathToolFsmState {
 				HintGroup(vec![
 					HintInfo {
 						key_groups: vec![
-							KeysGroup(vec![Key::KeyArrowUp]),
+							KeysGroup(vec![Key::ArrowUp]),
-							KeysGroup(vec![Key::KeyArrowRight]),
+							KeysGroup(vec![Key::ArrowRight]),
-							KeysGroup(vec![Key::KeyArrowDown]),
+							KeysGroup(vec![Key::ArrowDown]),
-							KeysGroup(vec![Key::KeyArrowLeft]),
+							KeysGroup(vec![Key::ArrowLeft]),
 						],
 						key_groups_mac: None,
 						mouse: None,
@@ -340,7 +340,7 @@ impl Fsm for PathToolFsmState {
 						plus: false,
 					},
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+						key_groups: vec![KeysGroup(vec![Key::Shift])],
 						key_groups_mac: None,
 						mouse: None,
 						label: String::from("Big Increment Nudge"),
@@ -373,14 +373,14 @@ impl Fsm for PathToolFsmState {
 			]),
 			PathToolFsmState::Dragging => HintData(vec![HintGroup(vec![
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Split/Align Handles (Toggle)"),
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Share Lengths of Aligned Handles"),

editor/src/messages/tool/tool_messages/pen_tool.rs

@@ -395,21 +395,21 @@ impl Fsm for PenToolFsmState {
 					plus: false,
 				}]),
 				HintGroup(vec![HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+					key_groups: vec![KeysGroup(vec![Key::Control])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Snap 15°"),
 					plus: false,
 				}]),
 				HintGroup(vec![HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Break Handle"),
 					plus: false,
 				}]),
 				HintGroup(vec![HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyEnter])],
+					key_groups: vec![KeysGroup(vec![Key::Enter])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("End Path"),

editor/src/messages/tool/tool_messages/rectangle_tool.rs

@@ -192,14 +192,14 @@ impl Fsm for RectangleToolFsmState {
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Constrain Square"),
 					plus: true,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("From Center"),
@@ -208,14 +208,14 @@ impl Fsm for RectangleToolFsmState {
 			])]),
 			RectangleToolFsmState::Drawing => HintData(vec![HintGroup(vec![
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Constrain Square"),
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("From Center"),

editor/src/messages/tool/tool_messages/select_tool.rs

@@ -742,14 +742,14 @@ impl Fsm for SelectToolFsmState {
 						plus: false,
 					},
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+						key_groups: vec![KeysGroup(vec![Key::Control])],
-						key_groups_mac: Some(vec![KeysGroup(vec![Key::KeyCommand])]),
+						key_groups_mac: Some(vec![KeysGroup(vec![Key::Command])]),
 						mouse: None,
 						label: String::from("Innermost"),
 						plus: true,
 					},
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+						key_groups: vec![KeysGroup(vec![Key::Shift])],
 						key_groups_mac: None,
 						mouse: None,
 						label: String::from("Grow/Shrink Selection"),
@@ -765,7 +765,7 @@ impl Fsm for SelectToolFsmState {
 						plus: false,
 					},
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+						key_groups: vec![KeysGroup(vec![Key::Shift])],
 						key_groups_mac: None,
 						mouse: None,
 						label: String::from("Grow/Shrink Selection"),
@@ -775,10 +775,10 @@ impl Fsm for SelectToolFsmState {
 				HintGroup(vec![
 					HintInfo {
 						key_groups: vec![
-							KeysGroup(vec![Key::KeyArrowUp]),
+							KeysGroup(vec![Key::ArrowUp]),
-							KeysGroup(vec![Key::KeyArrowRight]),
+							KeysGroup(vec![Key::ArrowRight]),
-							KeysGroup(vec![Key::KeyArrowDown]),
+							KeysGroup(vec![Key::ArrowDown]),
-							KeysGroup(vec![Key::KeyArrowLeft]),
+							KeysGroup(vec![Key::ArrowLeft]),
 						],
 						key_groups_mac: None,
 						mouse: None,
@@ -786,7 +786,7 @@ impl Fsm for SelectToolFsmState {
 						plus: false,
 					},
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+						key_groups: vec![KeysGroup(vec![Key::Shift])],
 						key_groups_mac: None,
 						mouse: None,
 						label: String::from("Big Increment Nudge"),
@@ -795,15 +795,15 @@ impl Fsm for SelectToolFsmState {
 				]),
 				HintGroup(vec![
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+						key_groups: vec![KeysGroup(vec![Key::Alt])],
 						key_groups_mac: None,
 						mouse: Some(MouseMotion::LmbDrag),
 						label: String::from("Move Duplicate"),
 						plus: false,
 					},
 					HintInfo {
-						key_groups: vec![KeysGroup(vec![Key::KeyControl, Key::KeyD])],
+						key_groups: vec![KeysGroup(vec![Key::Control, Key::KeyD])],
-						key_groups_mac: Some(vec![KeysGroup(vec![Key::KeyCommand, Key::KeyD])]),
+						key_groups_mac: Some(vec![KeysGroup(vec![Key::Command, Key::KeyD])]),
 						mouse: None,
 						label: String::from("Duplicate"),
 						plus: false,
@@ -812,14 +812,14 @@ impl Fsm for SelectToolFsmState {
 			]),
 			SelectToolFsmState::Dragging => HintData(vec![HintGroup(vec![
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Constrain to Axis"),
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+					key_groups: vec![KeysGroup(vec![Key::Control])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Snap to Points (coming soon)"),
@@ -829,7 +829,7 @@ impl Fsm for SelectToolFsmState {
 			SelectToolFsmState::DrawingBox => HintData(vec![]),
 			SelectToolFsmState::ResizingBounds => HintData(vec![]),
 			SelectToolFsmState::RotatingBounds => HintData(vec![HintGroup(vec![HintInfo {
-				key_groups: vec![KeysGroup(vec![Key::KeyControl])],
+				key_groups: vec![KeysGroup(vec![Key::Control])],
 				key_groups_mac: None,
 				mouse: None,
 				label: String::from("Snap 15°"),

editor/src/messages/tool/tool_messages/shape_tool.rs

@@ -235,14 +235,14 @@ impl Fsm for ShapeToolFsmState {
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Constrain 1:1 Aspect"),
 					plus: true,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("From Center"),
@@ -251,14 +251,14 @@ impl Fsm for ShapeToolFsmState {
 			])]),
 			ShapeToolFsmState::Drawing => HintData(vec![HintGroup(vec![
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyShift])],
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Constrain 1:1 Aspect"),
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyAlt])],
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("From Center"),

editor/src/messages/tool/tool_messages/spline_tool.rs

@@ -267,7 +267,7 @@ impl Fsm for SplineToolFsmState {
 					plus: false,
 				}]),
 				HintGroup(vec![HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyEnter])],
+					key_groups: vec![KeysGroup(vec![Key::Enter])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("End Spline"),

editor/src/messages/tool/tool_messages/text_tool.rs

@@ -474,14 +474,14 @@ impl Fsm for TextToolFsmState {
 			])]),
 			TextToolFsmState::Editing => HintData(vec![HintGroup(vec![
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyControl, Key::KeyEnter])],
+					key_groups: vec![KeysGroup(vec![Key::Control, Key::Enter])],
-					key_groups_mac: Some(vec![KeysGroup(vec![Key::KeyCommand, Key::KeyEnter])]),
+					key_groups_mac: Some(vec![KeysGroup(vec![Key::Command, Key::Enter])]),
 					mouse: None,
 					label: String::from("Commit Edit"),
 					plus: false,
 				},
 				HintInfo {
-					key_groups: vec![KeysGroup(vec![Key::KeyEscape])],
+					key_groups: vec![KeysGroup(vec![Key::Escape])],
 					key_groups_mac: None,
 					mouse: None,
 					label: String::from("Discard Edit"),

frontend/src/components/floating-menus/MenuList.vue

@@ -33,7 +33,7 @@
 
 					<span class="entry-label" :style="{ fontFamily: `${!entry.font ? 'inherit' : entry.value}` }">{{ entry.label }}</span>
 
-					<UserInputLabel v-if="entry.shortcut?.keys.length" :inputKeys="[entry.shortcut.keys]" :requiresLock="entry.shortcutRequiresLock" />
+					<UserInputLabel v-if="entry.shortcut?.keys.length" :keysWithLabelsGroups="[entry.shortcut.keys]" :requiresLock="entry.shortcutRequiresLock" />
 
 					<div class="submenu-arrow" v-if="entry.children?.length"></div>
 					<div class="no-submenu-arrow" v-else></div>

frontend/src/components/panels/LayerTree.vue

@@ -267,7 +267,7 @@
 <script lang="ts">
 import { defineComponent, nextTick } from "vue";
 
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
 import { defaultWidgetLayout, UpdateDocumentLayerTreeStructure, UpdateDocumentLayerDetails, UpdateLayerTreeOptionsLayout, LayerPanelEntry } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
@@ -350,9 +350,9 @@ export default defineComponent({
 		async selectLayer(ctrl: boolean, cmd: boolean, shift: boolean, listing: LayerListingInfo, event: Event) {
 			if (listing.editingName) return;
 
-			const ctrlOrCmd = operatingSystemIsMac() ? cmd : ctrl;
+			const ctrlOrCmd = platformIsMac() ? cmd : ctrl;
 			// Pressing the Ctrl key on a Mac, or the Cmd key on another platform, is a violation of the `.exact` qualifier so we filter it out here
-			const opposite = operatingSystemIsMac() ? ctrl : cmd;
+			const opposite = platformIsMac() ? ctrl : cmd;
 
 			if (!opposite) this.editor.instance.select_layer(listing.entry.path, ctrlOrCmd, shift);
 

frontend/src/components/widgets/inputs/FieldInput.vue

@@ -117,7 +117,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 
@@ -133,7 +133,7 @@ export default defineComponent({
 	data() {
 		return {
 			id: `${Math.random()}`.substring(2),
-			macKeyboardLayout: operatingSystemIsMac(),
+			macKeyboardLayout: platformIsMac(),
 		};
 	},
 	computed: {

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -72,18 +72,20 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
-import { MenuEntry, UpdateMenuBarLayout, MenuListEntry } from "@/wasm-communication/messages";
+import { MenuEntry, UpdateMenuBarLayout, MenuListEntry, KeyRaw, KeysGroup } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 // TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should handle correctly
-const controlOrCommand = operatingSystemIsMac() ? "KeyCommand" : "KeyControl";
+const controlOrCommand = platformIsMac() ? "Command" : "Control";
-const LOCK_REQUIRING_SHORTCUTS = [
+const LOCK_REQUIRING_SHORTCUTS: KeyRaw[][] = [
-	[controlOrCommand, "KeyN"],
-	[controlOrCommand, "KeyShift", "KeyT"],
 	[controlOrCommand, "KeyW"],
+	[controlOrCommand, "KeyN"],
+	[controlOrCommand, "Shift", "KeyN"],
+	[controlOrCommand, "KeyT"],
+	[controlOrCommand, "Shift", "KeyT"],
 ];
 
 type FrontendMenuColumn = {
@@ -96,7 +98,13 @@ export default defineComponent({
 	inject: ["editor"],
 	mounted() {
 		this.editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (updateMenuBarLayout) => {
-			const shortcutRequiresLock = (shortcut: string[]): boolean => LOCK_REQUIRING_SHORTCUTS.some((lockKeyCombo) => shortcut.every((shortcutKey, index) => shortcutKey === lockKeyCombo[index]));
+			const arraysEqual = (a: KeyRaw[], b: KeyRaw[]): boolean => a.length === b.length && a.every((aValue, i) => aValue === b[i]);
+			const shortcutRequiresLock = (shortcut: KeysGroup): boolean => {
+				const shortcutKeys = shortcut.map((keyWithLabel) => keyWithLabel.key);
+
+				// If this shortcut matches any of the browser-reserved shortcuts
+				return LOCK_REQUIRING_SHORTCUTS.some((lockKeyCombo) => arraysEqual(shortcutKeys, lockKeyCombo));
+			};
 
 			const menuEntryToFrontendMenuEntry = (subLayout: MenuEntry[][]): FrontendMenuEntry[][] =>
 				subLayout.map((group) =>
@@ -104,7 +112,7 @@ export default defineComponent({
 						...entry,
 						children: entry.children ? menuEntryToFrontendMenuEntry(entry.children) : undefined,
 						action: (): void => this.editor.instance.update_layout(updateMenuBarLayout.layout_target, entry.action.widgetId, undefined),
-						shortcutRequiresLock: entry.shortcut?.keys ? shortcutRequiresLock(entry.shortcut.keys) : undefined,
+						shortcutRequiresLock: entry.shortcut ? shortcutRequiresLock(entry.shortcut.keys) : undefined,
 					}))
 				);
 

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -1,17 +1,17 @@
 <template>
 	<IconLabel class="user-input-label keyboard-lock-notice" v-if="displayKeyboardLockNotice" :icon="'Info'" :title="keyboardLockInfoMessage" />
 	<LayoutRow class="user-input-label" v-else>
-		<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
+		<template v-for="(keysWithLabels, i) in keysWithLabelsGroups" :key="i">
-			<span class="group-gap" v-if="keyGroupIndex > 0"></span>
+			<span class="group-gap" v-if="i > 0"></span>
-			<template v-for="(keyInfo, index) in keyTextOrIconList(keyGroup)" :key="index">
+			<template v-for="(keyInfo, j) in keyTextOrIconList(keysWithLabels)" :key="j">
 				<span class="input-key" :class="keyInfo.width">
 					<IconLabel v-if="keyInfo.icon" :icon="keyInfo.icon" />
-					<template v-else>{{ keyInfo.text }}</template>
+					<template v-else-if="keyInfo.label !== undefined">{{ keyInfo.label }}</template>
 				</span>
 			</template>
 		</template>
-		<span class="input-mouse" v-if="inputMouse">
+		<span class="input-mouse" v-if="mouseMotion">
-			<IconLabel :icon="mouseHintIcon(inputMouse)" />
+			<IconLabel :icon="mouseHintIcon(mouseMotion)" />
 		</span>
 		<span class="hint-text" v-if="hasSlotContent">
 			<slot></slot>
@@ -54,23 +54,23 @@
 		border-color: var(--color-7-middlegray);
 		color: var(--color-e-nearwhite);
 
-		&.width-16 {
+		&.width-1 {
 			width: 16px;
 		}
 
-		&.width-24 {
+		&.width-2 {
 			width: 24px;
 		}
 
-		&.width-32 {
+		&.width-3 {
 			width: 32px;
 		}
 
-		&.width-40 {
+		&.width-4 {
 			width: 40px;
 		}
 
-		&.width-48 {
+		&.width-5 {
 			width: 48px;
 		}
 
@@ -133,32 +133,22 @@
 import { defineComponent, PropType } from "vue";
 
 import { IconName } from "@/utility-functions/icons";
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
-import { HintInfo, KeysGroup } from "@/wasm-communication/messages";
+import { KeyRaw, KeysGroup, Key, MouseMotion } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
-// Definitions
+type LabelData = { label?: string; icon?: IconName; width: string };
-const textMap = {
+
-	Shift: "Shift",
+// Keys that become icons if they are listed here with their units of width
-	Control: "Ctrl",
+const ICON_WIDTHS_MAC = {
-	Alt: "Alt",
+	Shift: 2,
-	Delete: "Del",
+	Control: 2,
-	PageUp: "PgUp",
+	Option: 2,
-	PageDown: "PgDn",
+	Command: 2,
-	Equals: "=",
-	Minus: "-",
-	Plus: "+",
-	Escape: "Esc",
-	Comma: ",",
-	Period: ".",
-	LeftBracket: "[",
-	RightBracket: "]",
-	LeftCurlyBracket: "{",
-	RightCurlyBracket: "}",
 };
-const iconsAndWidthsStandard = {
+const ICON_WIDTHS = {
 	ArrowUp: 1,
 	ArrowRight: 1,
 	ArrowDown: 1,
@@ -167,19 +157,14 @@ const iconsAndWidthsStandard = {
 	Enter: 2,
 	Tab: 2,
 	Space: 3,
-};
+	...(platformIsMac() ? ICON_WIDTHS_MAC : {}),
-const iconsAndWidthsMac = {
-	Shift: 2,
-	Control: 2,
-	Option: 2,
-	Command: 2,
 };
 
 export default defineComponent({
 	inject: ["fullscreen"],
 	props: {
-		inputKeys: { type: Array as PropType<HintInfo["keyGroups"]>, default: () => [] },
+		keysWithLabelsGroups: { type: Array as PropType<KeysGroup[]>, default: () => [] },
-		inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null },
+		mouseMotion: { type: String as PropType<MouseMotion | null>, default: null },
 		requiresLock: { type: Boolean as PropType<boolean>, default: false },
 	},
 	computed: {
@@ -202,54 +187,58 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		keyTextOrIconList(keyGroup: KeysGroup): { text: string | null; icon: IconName | null; width: string }[] {
+		keyTextOrIconList(keyGroup: KeysGroup): LabelData[] {
-			return keyGroup.map((inputKey) => this.keyTextOrIcon(inputKey));
+			return keyGroup.map((key) => this.keyTextOrIcon(key));
 		},
-		keyTextOrIcon(input: string): { text: string | null; icon: IconName | null; width: string } {
+		keyTextOrIcon(keyWithLabel: Key): LabelData {
-			let keyText = input;
+			// `key` is the name of the `Key` enum in Rust, while `label` is the localized string to display (if it doesn't become an icon)
-			if (operatingSystemIsMac()) {
+			let key = keyWithLabel.key;
-				keyText = keyText.replace("Alt", "Option");
+			const label = keyWithLabel.label;
-			}
 
-			const iconsAndWidths = operatingSystemIsMac() ? { ...iconsAndWidthsStandard, ...iconsAndWidthsMac } : iconsAndWidthsStandard;
+			// Replace Alt with Option on Mac
+			if (key === "Alt" && platformIsMac()) key = "Option";
 
-			// Strip off the "Key" prefix
+			// Either display an icon...
-			const text = keyText.replace(/^(?:Key)?(.*)$/, "$1");
+			// @ts-expect-error We want undefined if it isn't in the object
+			const iconWidth: number | undefined = ICON_WIDTHS[key];
+			const icon = iconWidth !== undefined && iconWidth > 0 && (this.keyboardHintIcon(key) || false);
+			if (icon) return { icon, width: `width-${iconWidth}` };
 
-			// If it's an icon, return the icon identifier
+			// ...or display text
-			if (Object.keys(iconsAndWidths).includes(text)) {
+			return { label, width: `width-${label.length}` };
-				// @ts-expect-error This is safe because of the if block we are in
-				const width = iconsAndWidths[text] * 8 + 8;
-				return {
-					text: null,
-					icon: this.keyboardHintIcon(text),
-					width: `width-${width}`,
-				};
-			}
-
-			// Otherwise, return the text string
-			let result;
-			// Letters and numbers
-			if (/^[A-Z0-9]$/.test(text)) {
-				result = text;
-			}
-			// Abbreviated names
-			else if (Object.keys(textMap).includes(text)) {
-				// @ts-expect-error This is safe because of the if block we are in
-				result = textMap[text];
-			}
-			// Other
-			else {
-				result = text;
-			}
-
-			return { text: result, icon: null, width: `width-${(result || " ").length * 8 + 8}` };
 		},
-		mouseHintIcon(input: HintInfo["mouse"]): IconName {
+		mouseHintIcon(input: MouseMotion | null): IconName {
 			return `MouseHint${input}` as IconName;
 		},
-		keyboardHintIcon(input: HintInfo["keyGroups"][0][0]): IconName {
+		keyboardHintIcon(input: KeyRaw): IconName | undefined {
-			return `Keyboard${input}` as IconName;
+			switch (input) {
+				case "ArrowDown":
+					return "KeyboardArrowDown";
+				case "ArrowLeft":
+					return "KeyboardArrowLeft";
+				case "ArrowRight":
+					return "KeyboardArrowRight";
+				case "ArrowUp":
+					return "KeyboardArrowUp";
+				case "Backspace":
+					return "KeyboardBackspace";
+				case "Command":
+					return "KeyboardCommand";
+				case "Control":
+					return "KeyboardControl";
+				case "Enter":
+					return "KeyboardEnter";
+				case "Option":
+					return "KeyboardOption";
+				case "Shift":
+					return "KeyboardShift";
+				case "Space":
+					return "KeyboardSpace";
+				case "Tab":
+					return "KeyboardTab";
+				default:
+					return undefined;
+			}
 		},
 	},
 	components: {

frontend/src/components/window/status-bar/StatusBar.vue

@@ -5,7 +5,7 @@
 				<Separator :type="'Section'" v-if="index !== 0" />
 				<template v-for="hint in hintGroup" :key="hint">
 					<LayoutRow v-if="hint.plus" class="plus">+</LayoutRow>
-					<UserInputLabel :inputMouse="hint.mouse" :inputKeys="inputKeysForPlatform(hint)">{{ hint.label }}</UserInputLabel>
+					<UserInputLabel :mouseMotion="hint.mouse" :keysWithLabelsGroups="inputKeysForPlatform(hint)">{{ hint.label }}</UserInputLabel>
 				</template>
 			</template>
 		</LayoutRow>
@@ -48,7 +48,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
 import { HintData, HintInfo, KeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -64,7 +64,7 @@ export default defineComponent({
 	},
 	methods: {
 		inputKeysForPlatform(hint: HintInfo): KeysGroup[] {
-			if (operatingSystemIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
+			if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
 			return hint.keyGroups;
 		},
 	},

frontend/src/components/window/workspace/Panel.vue

@@ -34,7 +34,7 @@
 									<TextButton :label="'New Document:'" :icon="'File'" :action="() => newDocument()" />
 								</td>
 								<td>
-									<UserInputLabel :inputKeys="[[...platformModifiers(true), 'KeyN']]" />
+									<UserInputLabel :keysWithLabelsGroups="[[...platformModifiers(true), { key: 'KeyN', label: 'N' }]]" />
 								</td>
 							</tr>
 							<tr>
@@ -42,7 +42,7 @@
 									<TextButton :label="'Open Document:'" :icon="'Folder'" :action="() => openDocument()" />
 								</td>
 								<td>
-									<UserInputLabel :inputKeys="[[...platformModifiers(false), 'KeyO']]" />
+									<UserInputLabel :keysWithLabelsGroups="[[...platformModifiers(false), { key: 'KeyO', label: 'O' }]]" />
 								</td>
 							</tr>
 						</table>
@@ -211,7 +211,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
+
+import { KeysGroup, Key } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -255,14 +257,15 @@ export default defineComponent({
 		openDocument() {
 			this.editor.instance.document_open();
 		},
-		platformModifiers(reservedKey: boolean) {
+		platformModifiers(reservedKey: boolean): KeysGroup {
 			// TODO: Remove this by properly feeding these keys from a layout provided by the backend
 
-			if (operatingSystemIsMac()) {
+			const ALT: Key = { key: "Alt", label: "Alt" };
-				return reservedKey ? ["KeyControl", "KeyCommand"] : ["KeyCommand"]; // TODO: Change Mac from Control+Command to Alt+Command when we can read Alt+letter modifiers
+			const COMMAND: Key = { key: "Command", label: "Command" };
-			}
+			const CONTROL: Key = { key: "Control", label: "Control" };
 
-			return reservedKey ? ["KeyControl", "KeyAlt"] : ["KeyControl"];
+			if (platformIsMac()) return reservedKey ? [ALT, COMMAND] : [COMMAND];
+			return reservedKey ? [CONTROL, ALT] : [CONTROL];
 		},
 	},
 	components: {

frontend/src/io-managers/input.ts

@@ -1,8 +1,8 @@
 import { DialogState } from "@/state-providers/dialog";
 import { FullscreenState } from "@/state-providers/fullscreen";
 import { PortfolioState } from "@/state-providers/portfolio";
-import { makeKeyboardModifiersBitfield, textInputCleanup, getLatinKey } from "@/utility-functions/keyboard-entry";
+import { makeKeyboardModifiersBitfield, textInputCleanup, getLocalizedScanCode } from "@/utility-functions/keyboard-entry";
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
 import { stripIndents } from "@/utility-functions/strip-indents";
 import { Editor } from "@/wasm-communication/editor";
 import { TriggerPaste } from "@/wasm-communication/messages";
@@ -33,8 +33,8 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 		{ target: window, eventName: "beforeunload", action: (e: BeforeUnloadEvent): void => onBeforeUnload(e) },
 		{ target: window.document, eventName: "contextmenu", action: (e: MouseEvent): void => e.preventDefault() },
 		{ target: window.document, eventName: "fullscreenchange", action: (): void => fullscreen.fullscreenModeChanged() },
-		{ target: window, eventName: "keyup", action: (e: KeyboardEvent): void => onKeyUp(e) },
+		{ target: window, eventName: "keyup", action: (e: KeyboardEvent): Promise<void> => onKeyUp(e) },
-		{ target: window, eventName: "keydown", action: (e: KeyboardEvent): void => onKeyDown(e) },
+		{ target: window, eventName: "keydown", action: (e: KeyboardEvent): Promise<void> => onKeyDown(e) },
 		{ target: window, eventName: "pointermove", action: (e: PointerEvent): void => onPointerMove(e) },
 		{ target: window, eventName: "pointerdown", action: (e: PointerEvent): void => onPointerDown(e) },
 		{ target: window, eventName: "pointerup", action: (e: PointerEvent): void => onPointerUp(e) },
@@ -63,66 +63,62 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 
 	// Keyboard events
 
-	function shouldRedirectKeyboardEventToBackend(e: KeyboardEvent): boolean {
+	async function shouldRedirectKeyboardEventToBackend(e: KeyboardEvent): Promise<boolean> {
 		// Don't redirect when a modal is covering the workspace
 		if (dialog.dialogIsVisible()) return false;
 
-		const key = getLatinKey(e);
+		const key = await getLocalizedScanCode(e);
-		if (!key) return false;
 
 		// TODO: Switch to a system where everything is sent to the backend, then the input preprocessor makes decisions and kicks some inputs back to the frontend
-		const ctrlOrCmd = operatingSystemIsMac() ? e.metaKey : e.ctrlKey;
+		const accelKey = platformIsMac() ? e.metaKey : e.ctrlKey;
 
 		// Don't redirect user input from text entry into HTML elements
-		if (key !== "escape" && !(ctrlOrCmd && key === "enter") && targetIsTextField(e.target)) return false;
+		if (targetIsTextField(e.target) && key !== "Escape" && !(key === "Enter" && accelKey)) return false;
 
 		// Don't redirect paste
-		if (key === "v" && ctrlOrCmd) return false;
+		if (key === "KeyV" && accelKey) return false;
 
 		// Don't redirect a fullscreen request
-		if (key === "f11" && e.type === "keydown" && !e.repeat) {
+		if (key === "F11" && e.type === "keydown" && !e.repeat) {
 			e.preventDefault();
 			fullscreen.toggleFullscreen();
 			return false;
 		}
 
 		// Don't redirect a reload request
-		if (key === "f5" || (ctrlOrCmd && key === "r")) return false;
+		if (key === "F5") return false;
+		if (key === "KeyR" && accelKey) return false;
 
 		// Don't redirect debugging tools
-		if (key === "f12" || key === "f8") return false;
+		if (["F12", "F8"].includes(key)) return false;
-		if (ctrlOrCmd && e.shiftKey && key === "c") return false;
+		if (["KeyC", "KeyI", "KeyJ"].includes(key) && accelKey && e.shiftKey) return false;
-		if (ctrlOrCmd && e.shiftKey && key === "i") return false;
-		if (ctrlOrCmd && e.shiftKey && key === "j") return false;
 
 		// Don't redirect tab or enter if not in canvas (to allow navigating elements)
-		if (!canvasFocused && !targetIsTextField(e.target) && ["tab", "enter", " ", "arrowdown", "arrowup", "arrowleft", "arrowright"].includes(key.toLowerCase())) return false;
+		if (!canvasFocused && !targetIsTextField(e.target) && ["Tab", "Enter", "Space", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp"].includes(key)) return false;
 
 		// Redirect to the backend
 		return true;
 	}
 
-	function onKeyDown(e: KeyboardEvent): void {
+	async function onKeyDown(e: KeyboardEvent): Promise<void> {
-		const key = getLatinKey(e);
+		const key = await getLocalizedScanCode(e);
-		if (!key) return;
 
-		if (shouldRedirectKeyboardEventToBackend(e)) {
+		if (await shouldRedirectKeyboardEventToBackend(e)) {
 			e.preventDefault();
 			const modifiers = makeKeyboardModifiersBitfield(e);
 			editor.instance.on_key_down(key, modifiers);
 			return;
 		}
 
-		if (dialog.dialogIsVisible()) {
+		if (dialog.dialogIsVisible() && key === "Escape") {
-			if (key === "escape") dialog.dismissDialog();
+			dialog.dismissDialog();
 		}
 	}
 
-	function onKeyUp(e: KeyboardEvent): void {
+	async function onKeyUp(e: KeyboardEvent): Promise<void> {
-		const key = getLatinKey(e);
+		const key = await getLocalizedScanCode(e);
-		if (!key) return;
 
-		if (shouldRedirectKeyboardEventToBackend(e)) {
+		if (await shouldRedirectKeyboardEventToBackend(e)) {
 			e.preventDefault();
 			const modifiers = makeKeyboardModifiersBitfield(e);
 			editor.instance.on_key_up(key, modifiers);

frontend/src/utility-functions/keyboard-entry.ts

@@ -17,63 +17,380 @@ export function textInputCleanup(text: string): string {
 	return text;
 }
 
-// This function is a naive, temporary solution to allow non-Latin keyboards to fall back on the physical QWERTY layout
+// This function tries to find what scan code the user pressed, even if using a non-US keyboard.
-export function getLatinKey(e: KeyboardEvent): string | null {
+// Directly using `KeyboardEvent.code` scan code only works on a US QWERTY layout, because alternate layouts like
-	const key = e.key.toLowerCase();
+// QWERTZ (German) or AZERTY (French) will end up reporting the wrong keys.
-	const isPrintable = !ALL_PRINTABLE_KEYS.has(e.key);
+// Directly using `KeyboardEvent.key` doesn't work because the results are often garbage, as the printed character
+// varies when the Shift key is pressed, or worse, when the Option (Alt) key on a Mac is pressed.
+// This function does its best to try and sort through both of those sources of information to determine the localized scan code.
+//
+// This function is an imperfect stopgap solution to allow non-US keyboards to be handled on a best-effort basis.
+// Eventually we will need a more robust system based on a giant database of keyboard layouts from all around the world.
+// We'd provide the user a choice of layout, and aim to detect a default based on the `key` and `code` values entered by the user
+// combined with `Keyboard.getLayoutMap()` where supported in Chromium-based browsers and perhaps the browser's language and IP address.
+// We are also limited by browser APIs, since the spec doesn't support what we need it to:
+// <https://github.com/WICG/keyboard-map/issues/26>
+// In the desktop version of VS Code, this is achieved with this Electron plugin:
+// <https://github.com/Microsoft/node-native-keymap>
+// We may be able to port that (it's a relatively small codebase) to Rust for use with Tauri.
+// But on the web, just like VS Code, we're limited by the shortcomings of the spec.
+// A collection of further insights:
+// <https://docs.google.com/document/d/1p17IBbYGsZivLIMhKZOaCJFAJFokbPfKrkB37fOPXSM/edit>
+// And it's a really good idea to read the explainer on keyboard layout variations and the whole spec (it's quite digestible):
+// <https://www.w3.org/TR/uievents-code/#key-alphanumeric-writing-system>
+export async function getLocalizedScanCode(e: KeyboardEvent): Promise<string> {
+	const keyText = e.key;
+	const scanCode = e.code;
 
-	// Control characters (those which are non-printable) are handled normally
+	// Use the key code directly if it isn't one that changes per locale (i.e. isn't a writing system key or one of the other few exceptions)
-	if (!isPrintable) return key;
+	const scanCodeNotLocaleSpecific = !LOCALE_SPECIFIC_KEY_CODES.includes(scanCode);
+	if (scanCodeNotLocaleSpecific) {
+		return scanCode;
+	}
 
-	// These non-Latin characters should fall back to the Latin equivalent at the key location
+	// Use the key directly if it's one of the exceptions that usually don't change, but sometimes do in a predictable way
-	const LAST_LATIN_UNICODE_CHAR = 0x024f;
+	if (SCAN_CODES_FOR_NON_WRITING_KEYS_THAT_VARY_PER_LOCALE.includes(scanCode)) {
-	if (key.length > 1 || key.charCodeAt(0) > LAST_LATIN_UNICODE_CHAR) return keyCodeToKey(e.code);
+		// Numpad comma and period which swap in some locales as decimal and thousands separator symbols
+		if (NUMPAD_DECIMAL_AND_THOUSANDS_SEPARATORS.includes(scanCode)) {
+			switch (scanCode) {
+				case ".":
+					return "NumpadDecimal";
+				case ",":
+					return "NumpadComma";
+				default:
+					return scanCode;
+			}
+		}
 
-	// Otherwise, this is a printable Latin character
+		// The AltRight key changes from a key value of "Alt" to "AltGraph" on keyboards with an AltGraph key
-	return e.key.toLowerCase();
+		if (scanCode === "AltRight") {
+			return keyText === "Alt" ? "AltRight" : "AltGraph";
+		}
+	}
+
+	// Use good-enough-for-now heuristics on the writing system keys, which are commonly subject to change by locale
+
+	// Number scan codes
+	const scanCodeDigit = /^Digit[0-9]$/.test(scanCode);
+	if (scanCodeDigit) {
+		// For now it's good enough to treat every digit key, regardless of locale, as just its digit from the standard US layout.
+		// Even on a keyboard like the French AZERTY layout, where numbers are shifted, users still refer to those keys by their numbers.
+		// This unfortunately means that any special symbols under these keys are overridden by their number, making it impossible to access some shortcuts that rely on those special symbols.
+		// We'll have to deal with that for now, and find a way to upgrade or properly replace this system, or assign alternate keymaps based on locale, when people complain.
+		return scanCode;
+	}
+
+	// Letter scan codes
+	const scanCodeLetter = scanCode.match(/^Key([A-Z])$/);
+	if (scanCodeLetter) {
+		const scanCodeLetterValue = String(scanCodeLetter[1]);
+
+		// If the scan code matches the key letter (ignoring diacritics and case), use that letter directly
+		const letterOfScanCodeMatchesKey =
+			scanCodeLetterValue ===
+			keyText
+				.normalize("NFD")
+				.replace(/\p{Diacritic}/gu, "")
+				.toUpperCase();
+		if (letterOfScanCodeMatchesKey) {
+			return scanCode;
+		}
+
+		// If the key text isn't one of the named attribute values, that means it must be the literal unicode value which we use directly
+		// It is likely a weird symbol that isn't in the A-Z range even with accents removed.
+		// It might be a symbol from an Option key combination on a Mac. Or it might be from a non-Latin alphabet like Cyrillic.
+		if (!KEY_ATTRIBUTE_VALUES.has(keyText)) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			if (navigator && "keyboard" in navigator && "getLayoutMap" in (navigator as any).keyboard) {
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				const layout = await (navigator as any).keyboard.getLayoutMap();
+
+				type KeyCode = string;
+				type KeySymbol = string;
+				// Get all the keyboard mappings and transform the key symbols to uppercase
+				const keyboardLayoutMap: [KeyCode, KeySymbol][] = [...layout.entries()].map(([keyCode, keySymbol]) => [keyCode, keySymbol.toUpperCase()]);
+
+				// If we match the uppercase version of the pressed key character, use the scan code that produces it
+				const matchedEntry = keyboardLayoutMap.find(([_, keySymbol]) => keySymbol === keyText.toUpperCase());
+				if (matchedEntry) return matchedEntry[0];
+			}
+
+			// If the keyboard layout API is unavailable, or it didn't match anything, just return the scan code that the user typed
+			// This isn't perfect because alternate keyboard layouts may end up having the US QWERTY key,
+			// but it's all we can do without a giant database of keyboard layouts and Mac Option key combinations
+			return scanCode;
+		}
+
+		// If the key's named attribute value shares a name with a scan code, use that scan code
+		if (KEY_CODE_NAMES.includes(keyText)) {
+			return scanCodeFromKeyText(keyText);
+		}
+		if (KEY_ATTRIBUTE_VALUES_INVOLVING_HANDEDNESS.includes(keyText)) {
+			// Since for some reason we're in a situation where we are using the key instead of the scan code to
+			// match one of the modifier keys which have both a Left and Right variant as part of the scan code names,
+			// but no handedness as part of the key's named attribute values, we default to the left side as it's more common.
+			return `${keyText}Left`;
+		}
+
+		// All reasonable attempts to figure out what this key is has now failed, so we fall back on the US QWERTY layout scan code
+		return scanCode;
+	}
+
+	// If the key text is the unicode character for one of the standard symbols on the US keyboard, use the symbol even though it's not located on the same scan code as on a US keyboard
+	if (WRITING_SYSTEM_SPECIAL_CHARS.includes(keyText)) {
+		return scanCodeFromKeyText(keyText);
+	}
+
+	// If the key is otherwise totally unrecognized, we ignore it
+	if (keyText === "Unidentified" || scanCode === "Unidentified") return "Unidentified";
+
+	// As a last resort, we just use the scan code
+	return scanCode;
 }
 
-export function keyCodeToKey(code: string): string | null {
+function scanCodeFromKeyText(keyText: string): string {
-	// Letters
+	// There are many possible unicode symbols as well as named attribute values, but we only care about finding the equivalent scan code (based on the US keyboard) without regard for modifiers
-	if (code.match(/^Key[A-Z]$/)) return code.replace("Key", "").toLowerCase();
 
-	// Numbers
+	// Match any handed modifier keys by claiming it's the left-handed modifier
-	if (code.match(/^Digit[0-9]$/)) return code.replace("Digit", "");
+	if (KEY_ATTRIBUTE_VALUES_INVOLVING_HANDEDNESS.includes(keyText)) {
-	if (code.match(/^Numpad[0-9]$/)) return code.replace("Numpad", "");
+		return `${keyText}Left`;
+	}
+
+	// Match any named attribute keys to an identical key name
+	const identicalName = KEY_CODE_NAMES.find((code) => code === keyText);
+	if (identicalName) return keyText;
+
+	// Match the space character
+	// Order matters because the next step assumes it can safely ignore the space character
+	if (keyText === " ") return "Space";
+
+	// Match individual characters by the scan code which produces that symbol on a US keyboard, either shifted or not
+	// This also includes the `Digit*` and `Key*` codes
+	const matchedScanCode = KEY_CODES.find((info) => info.keys?.us?.includes(keyText));
+	if (matchedScanCode) return matchedScanCode.code;
+
+	return "Unidentified";
+}
+
+type KeyCategories = "writing-system" | "functional" | "functional-jp-kr" | "control-pad" | "arrow-pad" | "numpad" | "function" | "media" | "unidentified";
+type KeyboardLocale = "us";
+type ScanCodeInfo = { code: string; category: KeyCategories; keys?: Record<KeyboardLocale, string | undefined> };
+const KEY_CODES: ScanCodeInfo[] = [
+	// Writing system keys
+	// Codes produce different printed characters depending on locale
+	// https://www.w3.org/TR/uievents-code/#key-alphanumeric-writing-system
+
+	{ code: "Digit0", category: "writing-system", keys: { us: "0 )" } },
+	{ code: "Digit1", category: "writing-system", keys: { us: "1 !" } },
+	{ code: "Digit2", category: "writing-system", keys: { us: "2 @" } },
+	{ code: "Digit3", category: "writing-system", keys: { us: "3 #" } },
+	{ code: "Digit4", category: "writing-system", keys: { us: "4 $" } },
+	{ code: "Digit5", category: "writing-system", keys: { us: "5 %" } },
+	{ code: "Digit6", category: "writing-system", keys: { us: "6 ^" } },
+	{ code: "Digit7", category: "writing-system", keys: { us: "7 &" } },
+	{ code: "Digit8", category: "writing-system", keys: { us: "8 *" } },
+	{ code: "Digit9", category: "writing-system", keys: { us: "9 (" } },
+
+	{ code: "KeyA", category: "writing-system", keys: { us: "a A" } },
+	{ code: "KeyB", category: "writing-system", keys: { us: "b B" } },
+	{ code: "KeyC", category: "writing-system", keys: { us: "c C" } },
+	{ code: "KeyD", category: "writing-system", keys: { us: "d D" } },
+	{ code: "KeyE", category: "writing-system", keys: { us: "e E" } },
+	{ code: "KeyF", category: "writing-system", keys: { us: "f F" } },
+	{ code: "KeyG", category: "writing-system", keys: { us: "g G" } },
+	{ code: "KeyH", category: "writing-system", keys: { us: "h H" } },
+	{ code: "KeyI", category: "writing-system", keys: { us: "i I" } },
+	{ code: "KeyJ", category: "writing-system", keys: { us: "j J" } },
+	{ code: "KeyK", category: "writing-system", keys: { us: "k K" } },
+	{ code: "KeyL", category: "writing-system", keys: { us: "l L" } },
+	{ code: "KeyM", category: "writing-system", keys: { us: "m M" } },
+	{ code: "KeyN", category: "writing-system", keys: { us: "n N" } },
+	{ code: "KeyO", category: "writing-system", keys: { us: "o O" } },
+	{ code: "KeyP", category: "writing-system", keys: { us: "p P" } },
+	{ code: "KeyQ", category: "writing-system", keys: { us: "q Q" } },
+	{ code: "KeyR", category: "writing-system", keys: { us: "r R" } },
+	{ code: "KeyS", category: "writing-system", keys: { us: "s S" } },
+	{ code: "KeyT", category: "writing-system", keys: { us: "t T" } },
+	{ code: "KeyU", category: "writing-system", keys: { us: "u U" } },
+	{ code: "KeyV", category: "writing-system", keys: { us: "v V" } },
+	{ code: "KeyW", category: "writing-system", keys: { us: "w W" } },
+	{ code: "KeyX", category: "writing-system", keys: { us: "x X" } },
+	{ code: "KeyY", category: "writing-system", keys: { us: "y Y" } },
+	{ code: "KeyZ", category: "writing-system", keys: { us: "z Z" } },
+
+	{ code: "Backquote", category: "writing-system", keys: { us: "` ~" } },
+	{ code: "Backslash", category: "writing-system", keys: { us: "\\ |" } },
+	{ code: "BracketLeft", category: "writing-system", keys: { us: "[ {" } },
+	{ code: "BracketRight", category: "writing-system", keys: { us: "] }" } },
+	{ code: "Comma", category: "writing-system", keys: { us: ", <" } },
+	{ code: "Equal", category: "writing-system", keys: { us: "= +" } },
+	{ code: "Minus", category: "writing-system", keys: { us: "- _" } },
+	{ code: "Period", category: "writing-system", keys: { us: ". >" } },
+	{ code: "Quote", category: "writing-system", keys: { us: "' \"" } },
+	{ code: "Semicolon", category: "writing-system", keys: { us: "; :" } },
+	{ code: "Slash", category: "writing-system", keys: { us: "/ ?" } },
+
+	{ code: "IntlBackslash", category: "writing-system", keys: { us: undefined } },
+	{ code: "IntlRo", category: "writing-system", keys: { us: undefined } },
+	{ code: "IntlYen", category: "writing-system", keys: { us: undefined } },
+
+	// Functional keys
+	// https://www.w3.org/TR/uievents-code/#key-alphanumeric-functional
+	// Codes have the same meaning regardless of locale, except for "AltRight"
+	{ code: "AltLeft", category: "functional" },
+	{ code: "AltRight", category: "functional" }, // Exception: `key` value is either "Alt" or "AltGraph" depending on locale (e.g. US vs. French, respectively)
+	// The W3C table includes this in the Writing System Keys table instead of the Functional Keys table, but its diagrams
+	// and text describe it as a functional key, so it has been moved here under the assumption that the table is incorrect
+	// https://github.com/w3c/uievents-code/issues/34
+	{ code: "Backspace", category: "writing-system" }, // Shares a name with a key attribute
+	{ code: "CapsLock", category: "functional" }, // Shares a name with a key attribute
+	{ code: "ContextMenu", category: "functional" }, // Shares a name with a key attribute
+	{ code: "ControlLeft", category: "functional" }, // Shares a name with a key attribute as "Control"
+	{ code: "ControlRight", category: "functional" }, // Shares a name with a key attribute as "Control"
+	{ code: "Enter", category: "functional" }, // Shares a name with a key attribute
+	{ code: "MetaLeft", category: "functional" }, // Shares a name with a key attribute as "Meta"
+	{ code: "MetaRight", category: "functional" }, // Shares a name with a key attribute as "Meta"
+	{ code: "ShiftLeft", category: "functional" }, // Shares a name with a key attribute as "Shift"
+	{ code: "ShiftRight", category: "functional" }, // Shares a name with a key attribute as "Shift"
+	{ code: "Space", category: "functional" },
+	{ code: "Tab", category: "functional" }, // Shares a name with a key attribute
+
+	// Functional Japanese/Korean keys
+	{ code: "Convert", category: "functional-jp-kr" }, // Shares a name with a key attribute
+	{ code: "KanaMode", category: "functional-jp-kr" }, // Shares a name with a key attribute
+	{ code: "Lang1", category: "functional-jp-kr" },
+	{ code: "Lang2", category: "functional-jp-kr" },
+	{ code: "Lang3", category: "functional-jp-kr" },
+	{ code: "Lang4", category: "functional-jp-kr" },
+	{ code: "Lang5", category: "functional-jp-kr" },
+	{ code: "NonConvert", category: "functional-jp-kr" }, // Shares a name with a key attribute
+
+	// Control pad keys
+	{ code: "Delete", category: "control-pad" }, // Shares a name with a key attribute
+	{ code: "End", category: "control-pad" }, // Shares a name with a key attribute
+	{ code: "Help", category: "control-pad" }, // Shares a name with a key attribute
+	{ code: "Home", category: "control-pad" }, // Shares a name with a key attribute
+	{ code: "Insert", category: "control-pad" }, // Shares a name with a key attribute
+	{ code: "PageDown", category: "control-pad" }, // Shares a name with a key attribute
+	{ code: "PageUp", category: "control-pad" }, // Shares a name with a key attribute
+
+	// Arrow pad keys
+	{ code: "ArrowDown", category: "arrow-pad" }, // Shares a name with a key attribute
+	{ code: "ArrowLeft", category: "arrow-pad" }, // Shares a name with a key attribute
+	{ code: "ArrowRight", category: "arrow-pad" }, // Shares a name with a key attribute
+	{ code: "ArrowUp", category: "arrow-pad" }, // Shares a name with a key attribute
+
+	// Numpad keys
+	{ code: "Numpad0", category: "numpad" },
+	{ code: "Numpad1", category: "numpad" },
+	{ code: "Numpad2", category: "numpad" },
+	{ code: "Numpad3", category: "numpad" },
+	{ code: "Numpad4", category: "numpad" },
+	{ code: "Numpad5", category: "numpad" },
+	{ code: "Numpad6", category: "numpad" },
+	{ code: "Numpad7", category: "numpad" },
+	{ code: "Numpad8", category: "numpad" },
+	{ code: "Numpad9", category: "numpad" },
+	{ code: "NumLock", category: "numpad" }, // Shares a name with a key attribute
+	{ code: "NumpadAdd", category: "numpad" },
+	{ code: "NumpadBackspace", category: "numpad" },
+	{ code: "NumpadClear", category: "numpad" },
+	{ code: "NumpadClearEntry", category: "numpad" },
+	{ code: "NumpadComma", category: "numpad" }, // Exception: Produces either a comma (,) or period (.) depending on locale (e.g. comma in US vs. period in Brazil)
+	{ code: "NumpadDecimal", category: "numpad" }, // Exception: Produces either a comma (,) or period (.) depending on locale (e.g. period in US vs. decimal in Brazil)
+	{ code: "NumpadDivide", category: "numpad" },
+	{ code: "NumpadEnter", category: "numpad" },
+	{ code: "NumpadEqual", category: "numpad" },
+	{ code: "NumpadHash", category: "numpad" },
+	{ code: "NumpadMemoryAdd", category: "numpad" },
+	{ code: "NumpadMemoryClear", category: "numpad" },
+	{ code: "NumpadMemoryRecall", category: "numpad" },
+	{ code: "NumpadMemoryStore", category: "numpad" },
+	{ code: "NumpadMemorySubtract", category: "numpad" },
+	{ code: "NumpadMultiply", category: "numpad" },
+	{ code: "NumpadParenLeft", category: "numpad" },
+	{ code: "NumpadParenRight", category: "numpad" },
+	{ code: "NumpadStar", category: "numpad" },
+	{ code: "NumpadSubtract", category: "numpad" },
 
 	// Function keys
-	if (code.match(/^F[1-9]|F1[0-9]|F20$/)) return code.replace("F", "").toLowerCase();
+	{ code: "Escape", category: "function" }, // Shares a name with a key attribute
+	{ code: "F1", category: "function" }, // Shares a name with a key attribute
+	{ code: "F2", category: "function" }, // Shares a name with a key attribute
+	{ code: "F3", category: "function" }, // Shares a name with a key attribute
+	{ code: "F4", category: "function" }, // Shares a name with a key attribute
+	{ code: "F5", category: "function" }, // Shares a name with a key attribute
+	{ code: "F6", category: "function" }, // Shares a name with a key attribute
+	{ code: "F7", category: "function" }, // Shares a name with a key attribute
+	{ code: "F8", category: "function" }, // Shares a name with a key attribute
+	{ code: "F9", category: "function" }, // Shares a name with a key attribute
+	{ code: "F10", category: "function" }, // Shares a name with a key attribute
+	{ code: "F11", category: "function" }, // Shares a name with a key attribute
+	{ code: "F12", category: "function" }, // Shares a name with a key attribute
+	{ code: "F13", category: "function" }, // Shares a name with a key attribute
+	{ code: "F14", category: "function" }, // Shares a name with a key attribute
+	{ code: "F15", category: "function" }, // Shares a name with a key attribute
+	{ code: "F16", category: "function" }, // Shares a name with a key attribute
+	{ code: "F17", category: "function" }, // Shares a name with a key attribute
+	{ code: "F18", category: "function" }, // Shares a name with a key attribute
+	{ code: "F19", category: "function" }, // Shares a name with a key attribute
+	{ code: "F20", category: "function" }, // Shares a name with a key attribute
+	{ code: "F21", category: "function" }, // Shares a name with a key attribute
+	{ code: "F22", category: "function" }, // Shares a name with a key attribute
+	{ code: "F23", category: "function" }, // Shares a name with a key attribute
+	{ code: "F24", category: "function" }, // Shares a name with a key attribute
+	{ code: "Fn", category: "function" }, // Shares a name with a key attribute
+	{ code: "FnLock", category: "function" }, // Shares a name with a key attribute
+	{ code: "PrintScreen", category: "function" }, // Shares a name with a key attribute
+	{ code: "ScrollLock", category: "function" }, // Shares a name with a key attribute
+	{ code: "Pause", category: "function" }, // Shares a name with a key attribute
 
-	// Other characters
+	// Media keys
-	if (SPECIAL_CHARACTERS[code]) return SPECIAL_CHARACTERS[code];
+	{ code: "BrowserBack", category: "media" }, // Shares a name with a key attribute
+	{ code: "BrowserFavorites", category: "media" }, // Shares a name with a key attribute
+	{ code: "BrowserForward", category: "media" }, // Shares a name with a key attribute
+	{ code: "BrowserHome", category: "media" }, // Shares a name with a key attribute
+	{ code: "BrowserRefresh", category: "media" }, // Shares a name with a key attribute
+	{ code: "BrowserSearch", category: "media" }, // Shares a name with a key attribute
+	{ code: "BrowserStop", category: "media" }, // Shares a name with a key attribute
+	{ code: "Eject", category: "media" }, // Shares a name with a key attribute
+	{ code: "LaunchApp1", category: "media" },
+	{ code: "LaunchApp2", category: "media" },
+	{ code: "LaunchMail", category: "media" }, // Shares a name with a key attribute
+	{ code: "MediaPlayPause", category: "media" }, // Shares a name with a key attribute
+	{ code: "MediaSelect", category: "media" },
+	{ code: "MediaStop", category: "media" }, // Shares a name with a key attribute
+	{ code: "MediaTrackNext", category: "media" }, // Shares a name with a key attribute
+	{ code: "MediaTrackPrevious", category: "media" }, // Shares a name with a key attribute
+	{ code: "Power", category: "media" }, // Shares a name with a key attribute
+	{ code: "Sleep", category: "media" },
+	{ code: "AudioVolumeDown", category: "media" }, // Shares a name with a key attribute
+	{ code: "AudioVolumeMute", category: "media" }, // Shares a name with a key attribute
+	{ code: "AudioVolumeUp", category: "media" }, // Shares a name with a key attribute
+	{ code: "WakeUp", category: "media" }, // Shares a name with a key attribute
 
-	return null;
+	// Unidentified keys
-}
+	{ code: "Unidentified", category: "unidentified" }, // Shares a name with a key attribute
+];
+const KEY_CODE_NAMES = Object.values(KEY_CODES).map((info) => info.code);
+// const KEY_CODE_NAMES_WITHOUT_HANDEDNESS = KEY_CODE_NAMES.filter((code) => !(code.endsWith("Right") && HANDED_KEY_ATTRIBUTE_VALUES.some((modifier) => code === `${modifier}Right`))).map((code) =>
+// code.endsWith("Left") && HANDED_KEY_ATTRIBUTE_VALUES.some((modifier) => code === `${modifier}Left`) ? code.replace("Left", "") : code
+// );
+const NUMPAD_DECIMAL_AND_THOUSANDS_SEPARATORS = ["NumpadComma", "NumpadDecimal"];
+const SCAN_CODES_FOR_NON_WRITING_KEYS_THAT_VARY_PER_LOCALE = ["AltRight", ...NUMPAD_DECIMAL_AND_THOUSANDS_SEPARATORS];
+const LOCALE_SPECIFIC_KEY_CODES_INFO = KEY_CODES.filter((key) => key.category === "writing-system" || SCAN_CODES_FOR_NON_WRITING_KEYS_THAT_VARY_PER_LOCALE.includes(key.code));
+const LOCALE_SPECIFIC_KEY_CODES = LOCALE_SPECIFIC_KEY_CODES_INFO.map((info) => info.code);
+const WRITING_SYSTEM_SPECIAL_CHARS = Object.values(KEY_CODES)
+	.filter((info) => info.category === "writing-system")
+	.flatMap((info) => info.keys?.us?.split(" "))
+	.filter((character) => character && !/[a-zA-Z0-9]/.test(character)) as string[];
 
-const SPECIAL_CHARACTERS: Record<string, string> = {
+const KEY_ATTRIBUTE_VALUES_INVOLVING_HANDEDNESS = ["Control", "Meta", "Shift"];
-	BracketLeft: "[",
+const KEY_ATTRIBUTE_VALUES = new Set([
-	BracketRight: "]",
-	Backslash: "\\",
-	Slash: "/",
-	Period: ".",
-	Comma: ",",
-	Equal: "=",
-	Minus: "-",
-	Quote: "'",
-	Semicolon: ";",
-	NumpadEqual: "=",
-	NumpadDivide: "/",
-	NumpadMultiply: "*",
-	NumpadSubtract: "-",
-	NumpadAdd: "+",
-	NumpadDecimal: ".",
-} as const;
-
-const ALL_PRINTABLE_KEYS = new Set([
 	// Modifier
-	"Alt",
+	"Alt", // Glyph modifier key
-	"AltGraph",
+	"AltGraph", // Glyph modifier key
-	"CapsLock",
+	"CapsLock", // Glyph modifier key
 	"Control",
 	"Fn",
 	"FnLock",
@@ -83,12 +400,15 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"Shift",
 	"Symbol",
 	"SymbolLock",
+
 	// Legacy modifier
 	"Hyper",
 	"Super",
+
 	// White space
-	"Enter",
+	"Enter", // Control character
-	"Tab",
+	"Tab", // Control character
+
 	// Navigation
 	"ArrowDown",
 	"ArrowLeft",
@@ -98,26 +418,28 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"Home",
 	"PageDown",
 	"PageUp",
+
 	// Editing
-	"Backspace",
+	"Backspace", // Control character
 	"Clear",
 	"Copy",
 	"CrSel",
 	"Cut",
-	"Delete",
+	"Delete", // Control character
 	"EraseEof",
 	"ExSel",
 	"Insert",
 	"Paste",
 	"Redo",
 	"Undo",
+
 	// UI
 	"Accept",
 	"Again",
 	"Attn",
 	"Cancel",
 	"ContextMenu",
-	"Escape",
+	"Escape", // Control character
 	"Execute",
 	"Find",
 	"Help",
@@ -127,6 +449,7 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"Select",
 	"ZoomIn",
 	"ZoomOut",
+
 	// Device
 	"BrightnessDown",
 	"BrightnessUp",
@@ -138,6 +461,7 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"Hibernate",
 	"Standby",
 	"WakeUp",
+
 	// IME composition keys
 	"AllCandidates",
 	"Alphanumeric",
@@ -156,10 +480,12 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"PreviousCandidate",
 	"Process",
 	"SingleCandidate",
+
 	// Korean-specific
 	"HangulMode",
 	"HanjaMode",
 	"JunjaMode",
+
 	// Japanese-specific
 	"Eisu",
 	"Hankaku",
@@ -171,6 +497,7 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"Romaji",
 	"Zenkaku",
 	"ZenkakuHankaku",
+
 	// Common function
 	"F1",
 	"F2",
@@ -184,10 +511,43 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"F10",
 	"F11",
 	"F12",
+	"F13",
+	"F14",
+	"F15",
+	"F16",
+	"F17",
+	"F18",
+	"F19",
+	"F20",
+	"F21",
+	"F22",
+	"F23",
+	"F24",
 	"Soft1",
 	"Soft2",
 	"Soft3",
 	"Soft4",
+	"Soft5",
+	"Soft6",
+	"Soft7",
+	"Soft8",
+	"Soft9",
+	"Soft10",
+	"Soft11",
+	"Soft12",
+	"Soft13",
+	"Soft14",
+	"Soft15",
+	"Soft16",
+	"Soft17",
+	"Soft18",
+	"Soft19",
+	"Soft20",
+	"Soft21",
+	"Soft22",
+	"Soft23",
+	"Soft24",
+
 	// Multimedia
 	"ChannelDown",
 	"ChannelUp",
@@ -210,9 +570,11 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"Print",
 	"Save",
 	"SpellCheck",
+
 	// Multimedia numpad
-	"Key11",
+	"Digit11",
-	"Key12",
+	"Digit12",
+
 	// Audio
 	"AudioBalanceLeft",
 	"AudioBalanceRight",
@@ -231,9 +593,11 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"MicrophoneVolumeDown",
 	"MicrophoneVolumeUp",
 	"MicrophoneVolumeMute",
+
 	// Speech
 	"SpeechCorrectionList",
 	"SpeechInputToggle",
+
 	// Application
 	"LaunchApplication1",
 	"LaunchApplication2",
@@ -248,6 +612,7 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"LaunchWebBrowser",
 	"LaunchWebCam",
 	"LaunchWordProcessor",
+
 	// Browser
 	"BrowserBack",
 	"BrowserFavorites",
@@ -256,6 +621,7 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"BrowserRefresh",
 	"BrowserSearch",
 	"BrowserStop",
+
 	// Mobile phone
 	"AppSwitch",
 	"Call",
@@ -269,6 +635,7 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"Notification",
 	"MannerMode",
 	"VoiceDial",
+
 	// TV
 	"TV",
 	"TV3DMode",
@@ -300,6 +667,7 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"TVTerrestrialAnalog",
 	"TVTerrestrialDigital",
 	"TVTimer",
+
 	// Media controls
 	"AVRInput",
 	"AVRPower",
@@ -373,4 +741,7 @@ const ALL_PRINTABLE_KEYS = new Set([
 	"VideoModeNext",
 	"Wink",
 	"ZoomToggle",
+
+	// Unidentified
+	"Unidentified",
 ]);

frontend/src/utility-functions/platform.ts

@@ -49,6 +49,6 @@ export function operatingSystem(detailed = false): string {
 	return osTable[userAgentOS || "Unknown"];
 }
 
-export function operatingSystemIsMac(): boolean {
+export function platformIsMac(): boolean {
 	return operatingSystem() === "Mac";
 }

frontend/src/utility-functions/strip-indents.ts

@@ -2,7 +2,7 @@ export function stripIndents(stringPieces: TemplateStringsArray, ...substitution
 	const interleavedSubstitutions = stringPieces.flatMap((stringPiece, index) => [stringPiece, substitutions[index] !== undefined ? substitutions[index] : ""]);
 	const stringLines = interleavedSubstitutions.join("").split("\n");
 
-	const visibleLineTabPrefixLengths = stringLines.map((line) => (line.match(/\S/) ? (line.match(/^(\t*)/) || [])[1].length : Infinity));
+	const visibleLineTabPrefixLengths = stringLines.map((line) => (/\S/.test(line) ? (line.match(/^(\t*)/) || [])[1].length : Infinity));
 	const commonTabPrefixLength = Math.min(...visibleLineTabPrefixLengths);
 
 	const linesWithoutCommonTabPrefix = stringLines.map((line) => line.substring(commonTabPrefixLength));

frontend/src/wasm-communication/messages.ts

@@ -90,7 +90,12 @@ export class HintInfo {
 	readonly plus!: boolean;
 }
 
-export type KeysGroup = string[]; // Array of Rust enum `Key`
+// Rust enum `Key`
+export type KeyRaw = string;
+// Serde converts a Rust `Key` enum variant into this format (via a custom serializer) with both the `Key` variant name (called `RawKey` in TS) and the localized `label` for the key
+export type Key = { key: KeyRaw; label: string };
+export type KeysGroup = Key[];
+export type ActionKeys = { keys: KeysGroup };
 
 export type MouseMotion = string;
 
@@ -406,14 +411,25 @@ export class ColorInput extends WidgetProps {
 	tooltip!: string;
 }
 
-export type Keys = { keys: string[] };
+export type MenuColumn = {
+	label: string;
+	children: MenuEntry[][];
+};
+
+export type MenuEntry = {
+	shortcut: ActionKeys | undefined;
+	action: Widget;
+	label: string;
+	icon: string | undefined;
+	children: undefined | MenuEntry[][];
+};
 
 export interface MenuListEntryData<Value = string> {
 	value?: Value;
 	label?: string;
 	icon?: IconName;
 	font?: URL;
-	shortcut?: Keys;
+	shortcut?: ActionKeys;
 	shortcutRequiresLock?: boolean;
 	disabled?: boolean;
 	action?: () => void;
@@ -781,19 +797,6 @@ export class UpdateMenuBarLayout extends JsMessage {
 	layout!: MenuColumn[];
 }
 
-export type MenuColumn = {
-	label: string;
-	children: MenuEntry[][];
-};
-
-export type MenuEntry = {
-	shortcut: Keys | undefined;
-	action: Widget;
-	label: string;
-	icon: string | undefined;
-	children: undefined | MenuEntry[][];
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createMenuLayout(menuLayout: any[]): MenuColumn[] {
 	return menuLayout.map((column) => ({ ...column, children: createMenuLayoutRecursive(column.children) }));

frontend/wasm/src/helpers.rs

@@ -76,70 +76,151 @@ pub fn translate_key(name: &str) -> Key {
 
 	log::trace!("Key event received: {}", name);
 
-	match name.to_lowercase().as_str() {
+	match name {
-		"a" => KeyA,
+		// Writing system keys
-		"b" => KeyB,
+		"Digit0" | "Numpad0" => Digit0,
-		"c" => KeyC,
+		"Digit1" | "Numpad1" => Digit1,
-		"d" => KeyD,
+		"Digit2" | "Numpad2" => Digit2,
-		"e" => KeyE,
+		"Digit3" | "Numpad3" => Digit3,
-		"f" => KeyF,
+		"Digit4" | "Numpad4" => Digit4,
-		"g" => KeyG,
+		"Digit5" | "Numpad5" => Digit5,
-		"h" => KeyH,
+		"Digit6" | "Numpad6" => Digit6,
-		"i" => KeyI,
+		"Digit7" | "Numpad7" => Digit7,
-		"j" => KeyJ,
+		"Digit8" | "Numpad8" => Digit8,
-		"k" => KeyK,
+		"Digit9" | "Numpad9" => Digit9,
-		"l" => KeyL,
+		//
-		"m" => KeyM,
+		"KeyA" => KeyA,
-		"n" => KeyN,
+		"KeyB" => KeyB,
-		"o" => KeyO,
+		"KeyC" => KeyC,
-		"p" => KeyP,
+		"KeyD" => KeyD,
-		"q" => KeyQ,
+		"KeyE" => KeyE,
-		"r" => KeyR,
+		"KeyF" => KeyF,
-		"s" => KeyS,
+		"KeyG" => KeyG,
-		"t" => KeyT,
+		"KeyH" => KeyH,
-		"u" => KeyU,
+		"KeyI" => KeyI,
-		"v" => KeyV,
+		"KeyJ" => KeyJ,
-		"w" => KeyW,
+		"KeyK" => KeyK,
-		"x" => KeyX,
+		"KeyL" => KeyL,
-		"y" => KeyY,
+		"KeyM" => KeyM,
-		"z" => KeyZ,
+		"KeyN" => KeyN,
-		"0" => Key0,
+		"KeyO" => KeyO,
-		"1" => Key1,
+		"KeyP" => KeyP,
-		"2" => Key2,
+		"KeyQ" => KeyQ,
-		"3" => Key3,
+		"KeyR" => KeyR,
-		"4" => Key4,
+		"KeyS" => KeyS,
-		"5" => Key5,
+		"KeyT" => KeyT,
-		"6" => Key6,
+		"KeyU" => KeyU,
-		"7" => Key7,
+		"KeyV" => KeyV,
-		"8" => Key8,
+		"KeyW" => KeyW,
-		"9" => Key9,
+		"KeyX" => KeyX,
-		"enter" => KeyEnter,
+		"KeyY" => KeyY,
-		"=" => KeyEquals,
+		"KeyZ" => KeyZ,
-		"+" => KeyPlus,
+		//
-		"-" => KeyMinus,
+		"Backquote" => Backquote,
-		"shift" => KeyShift,
+		"Backslash" => Backslash,
-		// When using linux + chrome + the neo keyboard layout, the shift key is recognized as caps
+		"BracketLeft" => BracketLeft,
-		"capslock" => KeyShift,
+		"BracketRight" => BracketRight,
-		" " => KeySpace,
+		"Comma" | "NumpadComma" => Comma,
-		"control" => KeyControl,
+		"Equal" | "NumpadEqual" => Equal,
-		"command" => KeyCommand,
+		"Minus" | "NumpadSubtract" => Minus,
-		"delete" => KeyDelete,
+		"Period" | "NumpadDecimal" => Period,
-		"backspace" => KeyBackspace,
+		"Quote" => Quote,
-		"alt" => KeyAlt,
+		"Semicolon" => Semicolon,
-		"escape" => KeyEscape,
+		"Slash" | "NumpadDivide" => Slash,
-		"tab" => KeyTab,
+
-		"arrowup" => KeyArrowUp,
+		// Functional keys
-		"arrowdown" => KeyArrowDown,
+		"AltLeft" | "AltRight" | "AltGraph" => Alt,
-		"arrowleft" => KeyArrowLeft,
+		"MetaLeft" | "MetaRight" => Meta,
-		"arrowright" => KeyArrowRight,
+		"ShiftLeft" | "ShiftRight" => Shift,
-		"[" => KeyLeftBracket,
+		"ControlLeft" | "ControlRight" => Control,
-		"]" => KeyRightBracket,
+		"Backspace" | "NumpadBackspace" => Backspace,
-		"{" => KeyLeftCurlyBracket,
+		"CapsLock" => CapsLock,
-		"}" => KeyRightCurlyBracket,
+		"ContextMenu" => ContextMenu,
-		"pageup" => KeyPageUp,
+		"Enter" | "NumpadEnter" => Enter,
-		"pagedown" => KeyPageDown,
+		"Space" => Space,
-		"," => KeyComma,
+		"Tab" => Tab,
-		"." => KeyPeriod,
+
-		_ => UnknownKey,
+		// Control pad keys
+		"Delete" => Delete,
+		"End" => End,
+		"Help" => Help,
+		"Home" => Home,
+		"Insert" => Insert,
+		"PageDown" => PageDown,
+		"PageUp" => PageUp,
+
+		// Arrow pad keys
+		"ArrowDown" => ArrowDown,
+		"ArrowLeft" => ArrowLeft,
+		"ArrowRight" => ArrowRight,
+		"ArrowUp" => ArrowUp,
+
+		// Numpad keys
+		// "Numpad0" => KeyNumpad0,
+		// "Numpad1" => KeyNumpad1,
+		// "Numpad2" => KeyNumpad2,
+		// "Numpad3" => KeyNumpad3,
+		// "Numpad4" => KeyNumpad4,
+		// "Numpad5" => KeyNumpad5,
+		// "Numpad6" => KeyNumpad6,
+		// "Numpad7" => KeyNumpad7,
+		// "Numpad8" => KeyNumpad8,
+		// "Numpad9" => KeyNumpad9,
+		"NumLock" => NumLock,
+		"NumpadAdd" => NumpadAdd,
+		// "NumpadBackspace" => KeyNumpadBackspace,
+		// "NumpadClear" => NumpadClear,
+		// "NumpadClearEntry" => NumpadClearEntry,
+		// "NumpadComma" => KeyNumpadComma,
+		// "NumpadDecimal" => KeyNumpadDecimal,
+		// "NumpadDivide" => KeyNumpadDivide,
+		// "NumpadEnter" => KeyNumpadEnter,
+		// "NumpadEqual" => KeyNumpadEqual,
+		"NumpadHash" => NumpadHash,
+		// "NumpadMemoryAdd" => NumpadMemoryAdd,
+		// "NumpadMemoryClear" => NumpadMemoryClear,
+		// "NumpadMemoryRecall" => NumpadMemoryRecall,
+		// "NumpadMemoryStore" => NumpadMemoryStore,
+		// "NumpadMemorySubtract" => NumpadMemorySubtract,
+		"NumpadMultiply" | "NumpadStar" => NumpadMultiply,
+		"NumpadParenLeft" => NumpadParenLeft,
+		"NumpadParenRight" => NumpadParenRight,
+		// "NumpadStar" => NumpadStar,
+		// "NumpadSubtract" => KeyNumpadSubtract,
+
+		// Function keys
+		"Escape" => Escape,
+		"F1" => F1,
+		"F2" => F2,
+		"F3" => F3,
+		"F4" => F4,
+		"F5" => F5,
+		"F6" => F6,
+		"F7" => F7,
+		"F8" => F8,
+		"F9" => F9,
+		"F10" => F10,
+		"F11" => F11,
+		"F12" => F12,
+		"F13" => F13,
+		"F14" => F14,
+		"F15" => F15,
+		"F16" => F16,
+		"F17" => F17,
+		"F18" => F18,
+		"F19" => F19,
+		"F20" => F20,
+		"F21" => F21,
+		"F22" => F22,
+		"F23" => F23,
+		"F24" => F24,
+		"Fn" => Fn,
+		"FnLock" => FnLock,
+		"PrintScreen" => PrintScreen,
+		"ScrollLock" => ScrollLock,
+		"Pause" => Pause,
+
+		// Unidentified keys
+		_ => Unidentified,
 	}
 }