Add pointer event type and commit increment key check

src/app/App.tsx

@@ -1,4 +1,12 @@
-import { useEffect, useRef, useState, type CSSProperties, type ChangeEvent, type KeyboardEvent as ReactKeyboardEvent } from "react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ChangeEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent
+} from "react";
 
 import { createCreateBoxBrushCommand } from "../commands/create-box-brush-command";
 import { createMoveBoxBrushCommand } from "../commands/move-box-brush-command";
@@ -275,6 +283,10 @@ function isTextEntryTarget(target: EventTarget | null): boolean {
   );
 }
 
+function isCommitIncrementKey(key: string): boolean {
+  return key === "ArrowUp" || key === "ArrowDown" || key === "PageUp" || key === "PageDown";
+}
+
 function sortDocumentMaterials(materials: Record<string, MaterialDef>): MaterialDef[] {
   return Object.values(materials).sort((left, right) => {
     const leftStarterIndex = STARTER_MATERIAL_ORDER.get(left.id) ?? Number.MAX_SAFE_INTEGER;