diff --git a/.gitignore b/.gitignore
index 4d29575..4306416 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# typescript
+tsconfig.tsbuildinfo
\ No newline at end of file
diff --git a/package.json b/package.json
index 423154f..f1380b2 100644
--- a/package.json
+++ b/package.json
@@ -1,36 +1,37 @@
 {
   "name": "owlbear-rodeo",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "private": true,
   "dependencies": {
     "@babylonjs/core": "^4.2.0",
     "@babylonjs/loaders": "^4.2.0",
-    "@dnd-kit/core": "^3.0.4",
-    "@dnd-kit/sortable": "^3.1.0",
+    "@dnd-kit/core": "^3.1.1",
+    "@dnd-kit/sortable": "^4.0.0",
     "@mitchemmc/dexie-export-import": "^1.0.1",
-    "@msgpack/msgpack": "^2.4.1",
-    "@react-spring/konva": "^9.2.3",
-    "@sentry/integrations": "^6.3.0",
-    "@sentry/react": "^6.3.0",
-    "@stripe/stripe-js": "^1.13.1",
-    "@tensorflow/tfjs": "^3.3.0",
+    "@msgpack/msgpack": "^2.7.0",
+    "@react-spring/konva": "^9.2.4",
+    "@sentry/integrations": "^6.11.0",
+    "@sentry/react": "^6.11.0",
+    "@stripe/stripe-js": "^1.16.0",
+    "@tensorflow/tfjs": "^3.8.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.0.2",
-    "ammo.js": "kripken/ammo.js#aab297a4164779c3a9d8dc8d9da26958de3cb778",
+    "ajv": "^8.6.2",
+    "ammo.js": "kripken/ammo.js",
     "case": "^1.6.3",
-    "color": "^3.1.3",
-    "comlink": "^4.3.0",
+    "color": "^3.2.1",
+    "comlink": "^4.3.1",
     "deep-diff": "^1.0.2",
     "dexie": "3.1.0-beta.13",
-    "dexie-react-hooks": "^1.0.6",
+    "dexie-react-hooks": "^1.0.7",
     "err-code": "^3.0.1",
-    "fake-indexeddb": "^3.1.2",
+    "fake-indexeddb": "^3.1.3",
     "file-saver": "^2.0.5",
     "fuse.js": "^6.4.6",
     "image-outline": "^0.1.0",
     "intersection-observer": "^0.12.0",
-    "konva": "^8.1.1",
+    "konva": "^8.1.3",
     "lodash.chunk": "^4.2.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
@@ -38,36 +39,37 @@
     "lodash.unset": "^4.5.2",
     "normalize-wheel": "^1.0.1",
     "pepjs": "^0.5.3",
-    "polygon-clipping": "^0.15.2",
+    "polygon-clipping": "^0.15.3",
     "pretty-bytes": "^5.6.0",
     "raw.macro": "^0.4.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-intersection-observer": "^8.32.0",
     "react-konva": "^17.0.2-5",
+    "react-konva-utils": "^0.1.7",
     "react-markdown": "4",
     "react-media": "^2.0.0-rc.1",
-    "react-modal": "^3.12.1",
-    "react-resize-detector": "4.2.3",
+    "react-modal": "^3.14.3",
+    "react-resize-detector": "^6.7.4",
     "react-router-dom": "^5.1.2",
-    "react-router-hash-link": "^2.2.2",
+    "react-router-hash-link": "^2.4.3",
     "react-scripts": "^4.0.3",
-    "react-select": "^4.2.1",
-    "react-spring": "^9.2.3",
+    "react-select": "^4.3.1",
+    "react-spring": "^9.2.4",
     "react-textarea-autosize": "^8.3.3",
-    "react-toast-notifications": "^2.4.3",
+    "react-toast-notifications": "^2.5.1",
     "react-use-gesture": "^9.1.3",
     "shortid": "^2.2.15",
-    "simple-peer": "feross/simple-peer#694/head",
-    "simplebar-react": "^2.1.0",
+    "simple-peer": "^9.11.0",
+    "simplebar-react": "^2.3.5",
     "simplify-js": "^1.2.4",
-    "socket.io-client": "^4.0.0",
+    "socket.io-client": "^4.1.3",
     "socket.io-msgpack-parser": "^3.0.1",
     "source-map-explorer": "^2.5.2",
-    "theme-ui": "^0.3.1",
-    "use-image": "^1.0.7",
+    "theme-ui": "^0.10.0",
+    "use-image": "^1.0.8",
     "uuid": "^8.3.2",
-    "webrtc-adapter": "^7.7.1"
+    "webrtc-adapter": "^8.1.0"
   },
   "resolutions": {
     "simple-peer/get-browser-rtc": "substack/get-browser-rtc#4/head"
@@ -95,6 +97,25 @@
     ]
   },
   "devDependencies": {
+    "@types/color": "^3.0.1",
+    "@types/deep-diff": "^1.0.0",
+    "@types/file-saver": "^2.0.2",
+    "@types/jest": "^26.0.23",
+    "@types/lodash.chunk": "^4.2.6",
+    "@types/lodash.clonedeep": "^4.5.6",
+    "@types/lodash.get": "^4.4.6",
+    "@types/lodash.set": "^4.3.6",
+    "@types/node": "^15.6.0",
+    "@types/normalize-wheel": "^1.0.0",
+    "@types/react": "^17.0.6",
+    "@types/react-dom": "^17.0.5",
+    "@types/react-modal": "^3.12.0",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/react-select": "^4.0.17",
+    "@types/shortid": "^0.0.29",
+    "@types/simple-peer": "^9.11.1",
+    "@types/uuid": "^8.3.1",
+    "typescript": "^4.2.4",
     "worker-loader": "^3.0.8"
   }
 }
diff --git a/src/App.js b/src/App.tsx
similarity index 97%
rename from src/App.js
rename to src/App.tsx
index 99058b5..94eb780 100644
--- a/src/App.js
+++ b/src/App.tsx
@@ -1,8 +1,7 @@
-import React from "react";
 import { ThemeProvider } from "theme-ui";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
-import theme from "./theme.js";
+import theme from "./theme";
 import Home from "./routes/Home";
 import Game from "./routes/Game";
 import About from "./routes/About";
diff --git a/src/actions/Action.js b/src/actions/Action.ts
similarity index 67%
rename from src/actions/Action.js
rename to src/actions/Action.ts
index a147f2b..a6f12fe 100644
--- a/src/actions/Action.js
+++ b/src/actions/Action.ts
@@ -1,40 +1,31 @@
-// Load Diff for auto complete
-// eslint-disable-next-line no-unused-vars
 import { Diff } from "deep-diff";
 
 import { diff, revertChanges } from "../helpers/diff";
 import cloneDeep from "lodash.clonedeep";
 
-/**
- * @callback ActionUpdate
- * @param {any} state
- */
-
 /**
  * Implementation of the Command Pattern
  * Wraps an update function with internal state to support undo
  */
-class Action {
+class Action<State> {
   /**
    * The update function called with the current state and should return the updated state
    * This is implemented in the child class
-   *
-   * @type {ActionUpdate}
    */
-  update;
+  update(state: State): State {
+    return state;
+  }
 
   /**
    * The changes caused by the last state update
-   * @type {Diff}
    */
-  changes;
+  changes: Diff<State, State>[] | undefined;
 
   /**
    * Executes the action update on the state
-   * @param {any} state The current state to update
-   * @returns {any} The updated state
+   * @param {State} state The current state to update
    */
-  execute(state) {
+  execute(state: State): State {
     if (state && this.update) {
       let newState = this.update(cloneDeep(state));
       this.changes = diff(state, newState);
@@ -45,10 +36,10 @@ class Action {
 
   /**
    * Reverts the changes caused by the last call of `execute`
-   * @param {any} state The current state to perform the undo on
-   * @returns {any} The state with the last changes reverted
+   * @param {State} state The current state to perform the undo on
+   * @returns {State} The state with the last changes reverted
    */
-  undo(state) {
+  undo(state: State): State {
     if (state && this.changes) {
       let revertedState = cloneDeep(state);
       revertChanges(revertedState, this.changes);
diff --git a/src/actions/AddShapeAction.js b/src/actions/AddShapeAction.js
deleted file mode 100644
index 5147d05..0000000
--- a/src/actions/AddShapeAction.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Action from "./Action";
-
-class AddShapeAction extends Action {
-  constructor(shapes) {
-    super();
-    this.update = (shapesById) => {
-      for (let shape of shapes) {
-        shapesById[shape.id] = shape;
-      }
-      return shapesById;
-    };
-  }
-}
-
-export default AddShapeAction;
diff --git a/src/actions/AddStatesAction.ts b/src/actions/AddStatesAction.ts
new file mode 100644
index 0000000..14d9053
--- /dev/null
+++ b/src/actions/AddStatesAction.ts
@@ -0,0 +1,21 @@
+import Action from "./Action";
+
+import { ID } from "../types/Action";
+
+class AddStatesAction<State extends ID> extends Action<Record<string, State>> {
+  states: State[];
+
+  constructor(states: State[]) {
+    super();
+    this.states = states;
+  }
+
+  update(statesById: Record<string, State>) {
+    for (let state of this.states) {
+      statesById[state.id] = state;
+    }
+    return statesById;
+  }
+}
+
+export default AddStatesAction;
diff --git a/src/actions/CutFogAction.ts b/src/actions/CutFogAction.ts
new file mode 100644
index 0000000..779a921
--- /dev/null
+++ b/src/actions/CutFogAction.ts
@@ -0,0 +1,41 @@
+import polygonClipping from "polygon-clipping";
+
+import Action from "./Action";
+import {
+  addPolygonDifferenceToFog,
+  addPolygonIntersectionToFog,
+  fogToGeometry,
+} from "../helpers/actions";
+
+import { Fog, FogState } from "../types/Fog";
+
+class CutFogAction extends Action<FogState> {
+  fogs: Fog[];
+
+  constructor(fog: Fog[]) {
+    super();
+    this.fogs = fog;
+  }
+
+  update(fogsById: FogState): FogState {
+    let actionGeom = this.fogs.map(fogToGeometry);
+    let cutFogs: FogState = {};
+    for (let fog of Object.values(fogsById)) {
+      const fogGeom = fogToGeometry(fog);
+      try {
+        const difference = polygonClipping.difference(fogGeom, ...actionGeom);
+        const intersection = polygonClipping.intersection(
+          fogGeom,
+          ...actionGeom
+        );
+        addPolygonDifferenceToFog(fog, difference, cutFogs);
+        addPolygonIntersectionToFog(fog, intersection, cutFogs);
+      } catch {
+        console.error("Unable to find intersection for fogs");
+      }
+    }
+    return cutFogs;
+  }
+}
+
+export default CutFogAction;
diff --git a/src/actions/CutShapeAction.js b/src/actions/CutShapeAction.js
deleted file mode 100644
index 59688e6..0000000
--- a/src/actions/CutShapeAction.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import polygonClipping from "polygon-clipping";
-
-import Action from "./Action";
-import {
-  addPolygonDifferenceToShapes,
-  addPolygonIntersectionToShapes,
-  shapeToGeometry,
-} from "../helpers/actions";
-
-class CutShapeAction extends Action {
-  constructor(shapes) {
-    super();
-    this.update = (shapesById) => {
-      let actionGeom = shapes.map(shapeToGeometry);
-      let cutShapes = {};
-      for (let shape of Object.values(shapesById)) {
-        const shapeGeom = shapeToGeometry(shape);
-        try {
-          const difference = polygonClipping.difference(
-            shapeGeom,
-            ...actionGeom
-          );
-          const intersection = polygonClipping.intersection(
-            shapeGeom,
-            ...actionGeom
-          );
-          addPolygonDifferenceToShapes(shape, difference, cutShapes);
-          addPolygonIntersectionToShapes(shape, intersection, cutShapes);
-        } catch {
-          console.error("Unable to find intersection for shapes");
-        }
-      }
-      return cutShapes;
-    };
-  }
-}
-
-export default CutShapeAction;
diff --git a/src/actions/EditShapeAction.js b/src/actions/EditShapeAction.js
deleted file mode 100644
index e531df5..0000000
--- a/src/actions/EditShapeAction.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Action from "./Action";
-
-class EditShapeAction extends Action {
-  constructor(shapes) {
-    super();
-    this.update = (shapesById) => {
-      for (let edit of shapes) {
-        if (edit.id in shapesById) {
-          shapesById[edit.id] = { ...shapesById[edit.id], ...edit };
-        }
-      }
-      return shapesById;
-    };
-  }
-}
-
-export default EditShapeAction;
diff --git a/src/actions/EditStatesAction.ts b/src/actions/EditStatesAction.ts
new file mode 100644
index 0000000..247828c
--- /dev/null
+++ b/src/actions/EditStatesAction.ts
@@ -0,0 +1,23 @@
+import Action from "./Action";
+
+import { ID } from "../types/Action";
+
+class EditStatesAction<State extends ID> extends Action<Record<string, State>> {
+  edits: Partial<State>[];
+
+  constructor(edits: Partial<State>[]) {
+    super();
+    this.edits = edits;
+  }
+
+  update(statesById: Record<string, State>) {
+    for (let edit of this.edits) {
+      if (edit.id !== undefined && edit.id in statesById) {
+        statesById[edit.id] = { ...statesById[edit.id], ...edit };
+      }
+    }
+    return statesById;
+  }
+}
+
+export default EditStatesAction;
diff --git a/src/actions/RemoveShapeAction.js b/src/actions/RemoveShapeAction.js
deleted file mode 100644
index baa2df0..0000000
--- a/src/actions/RemoveShapeAction.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Action from "./Action";
-import { omit } from "../helpers/shared";
-
-class RemoveShapeAction extends Action {
-  constructor(shapeIds) {
-    super();
-    this.update = (shapesById) => {
-      return omit(shapesById, shapeIds);
-    };
-  }
-}
-
-export default RemoveShapeAction;
diff --git a/src/actions/RemoveStatesAction.ts b/src/actions/RemoveStatesAction.ts
new file mode 100644
index 0000000..aa422ad
--- /dev/null
+++ b/src/actions/RemoveStatesAction.ts
@@ -0,0 +1,21 @@
+import Action from "./Action";
+import { omit } from "../helpers/shared";
+
+import { ID } from "../types/Action";
+
+class RemoveStatesAction<State extends ID> extends Action<
+  Record<string, State>
+> {
+  stateIds: string[];
+
+  constructor(stateIds: string[]) {
+    super();
+    this.stateIds = stateIds;
+  }
+
+  update(statesById: Record<string, State>) {
+    return omit(statesById, this.stateIds);
+  }
+}
+
+export default RemoveStatesAction;
diff --git a/src/actions/SubtractFogAction.ts b/src/actions/SubtractFogAction.ts
new file mode 100644
index 0000000..9fa6ff7
--- /dev/null
+++ b/src/actions/SubtractFogAction.ts
@@ -0,0 +1,32 @@
+import polygonClipping from "polygon-clipping";
+
+import Action from "./Action";
+import { addPolygonDifferenceToFog, fogToGeometry } from "../helpers/actions";
+
+import { Fog, FogState } from "../types/Fog";
+
+class SubtractFogAction extends Action<FogState> {
+  fogs: Fog[];
+
+  constructor(fogs: Fog[]) {
+    super();
+    this.fogs = fogs;
+  }
+
+  update(fogsById: FogState): FogState {
+    const actionGeom = this.fogs.map(fogToGeometry);
+    let subtractedFogs: FogState = {};
+    for (let fog of Object.values(fogsById)) {
+      const fogGeom = fogToGeometry(fog);
+      try {
+        const difference = polygonClipping.difference(fogGeom, ...actionGeom);
+        addPolygonDifferenceToFog(fog, difference, subtractedFogs);
+      } catch {
+        console.error("Unable to find difference for fogs");
+      }
+    }
+    return subtractedFogs;
+  }
+}
+
+export default SubtractFogAction;
diff --git a/src/actions/SubtractShapeAction.js b/src/actions/SubtractShapeAction.js
deleted file mode 100644
index 13f915a..0000000
--- a/src/actions/SubtractShapeAction.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import polygonClipping from "polygon-clipping";
-
-import Action from "./Action";
-import {
-  addPolygonDifferenceToShapes,
-  shapeToGeometry,
-} from "../helpers/actions";
-
-class SubtractShapeAction extends Action {
-  constructor(shapes) {
-    super();
-    this.update = (shapesById) => {
-      const actionGeom = shapes.map(shapeToGeometry);
-      let subtractedShapes = {};
-      for (let shape of Object.values(shapesById)) {
-        const shapeGeom = shapeToGeometry(shape);
-        try {
-          const difference = polygonClipping.difference(
-            shapeGeom,
-            ...actionGeom
-          );
-          addPolygonDifferenceToShapes(shape, difference, subtractedShapes);
-        } catch {
-          console.error("Unable to find difference for shapes");
-        }
-      }
-      return subtractedShapes;
-    };
-  }
-}
-
-export default SubtractShapeAction;
diff --git a/src/actions/index.js b/src/actions/index.js
deleted file mode 100644
index 7822cc1..0000000
--- a/src/actions/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import AddShapeAction from "./AddShapeAction";
-import CutShapeAction from "./CutShapeAction";
-import EditShapeAction from "./EditShapeAction";
-import RemoveShapeAction from "./RemoveShapeAction";
-import SubtractShapeAction from "./SubtractShapeAction";
-
-export {
-  AddShapeAction,
-  CutShapeAction,
-  EditShapeAction,
-  RemoveShapeAction,
-  SubtractShapeAction,
-};
diff --git a/src/actions/index.ts b/src/actions/index.ts
new file mode 100644
index 0000000..4b37526
--- /dev/null
+++ b/src/actions/index.ts
@@ -0,0 +1,13 @@
+import AddStatesAction from "./AddStatesAction";
+import CutFogAction from "./CutFogAction";
+import EditStatesAction from "./EditStatesAction";
+import RemoveStatesAction from "./RemoveStatesAction";
+import SubtractFogAction from "./SubtractFogAction";
+
+export {
+  AddStatesAction,
+  CutFogAction,
+  EditStatesAction,
+  RemoveStatesAction,
+  SubtractFogAction,
+};
diff --git a/src/components/Accordion.js b/src/components/Accordion.tsx
similarity index 84%
rename from src/components/Accordion.js
rename to src/components/Accordion.tsx
index bbb2488..736da4f 100644
--- a/src/components/Accordion.js
+++ b/src/components/Accordion.tsx
@@ -3,7 +3,13 @@ import { Box, Flex, Text, IconButton, Divider } from "theme-ui";
 
 import ExpandMoreIcon from "../icons/ExpandMoreIcon";
 
-function Accordion({ heading, children, defaultOpen }) {
+type AccordianProps = {
+  heading: string;
+  children: React.ReactNode;
+  defaultOpen: boolean;
+};
+
+function Accordion({ heading, children, defaultOpen }: AccordianProps) {
   const [open, setOpen] = useState(defaultOpen);
 
   return (
diff --git a/src/components/DatabaseDisabledMessage.tsx b/src/components/DatabaseDisabledMessage.tsx
new file mode 100644
index 0000000..f00b673
--- /dev/null
+++ b/src/components/DatabaseDisabledMessage.tsx
@@ -0,0 +1,24 @@
+import { Box, Text } from "theme-ui";
+
+import Link from "./Link";
+
+function DatabaseDisabledMessage({ type }: { type: string }) {
+  return (
+    <Box
+      sx={{
+        textAlign: "center",
+        borderRadius: "2px",
+        gridArea: "1 / 1 / span 1 / span 4",
+      }}
+      bg="highlight"
+      p={1}
+    >
+      <Text as="p" variant="body2">
+        {type} saving is unavailable. See <Link to="/faq#database">FAQ</Link>{" "}
+        for more information.
+      </Text>
+    </Box>
+  );
+}
+
+export default DatabaseDisabledMessage;
diff --git a/src/components/Divider.js b/src/components/Divider.tsx
similarity index 63%
rename from src/components/Divider.js
rename to src/components/Divider.tsx
index 0d51b0a..37b5a54 100644
--- a/src/components/Divider.js
+++ b/src/components/Divider.tsx
@@ -1,7 +1,16 @@
-import React from "react";
-import { Divider } from "theme-ui";
+import { Divider, DividerProps } from "theme-ui";
 
-function StyledDivider({ vertical, color, fill }) {
+type StyledDividerProps = {
+  vertical: boolean;
+  fill: boolean;
+} & DividerProps;
+
+function StyledDivider({
+  vertical,
+  color,
+  fill,
+  ...props
+}: StyledDividerProps) {
   return (
     <Divider
       my={vertical ? 0 : 2}
@@ -13,6 +22,7 @@ function StyledDivider({ vertical, color, fill }) {
         borderRadius: "2px",
         opacity: 0.5,
       }}
+      {...props}
     />
   );
 }
diff --git a/src/components/Footer.js b/src/components/Footer.tsx
similarity index 96%
rename from src/components/Footer.js
rename to src/components/Footer.tsx
index aa83ee9..fd1e6b8 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Flex } from "theme-ui";
 
 import Link from "./Link";
diff --git a/src/components/Link.js b/src/components/Link.tsx
similarity index 61%
rename from src/components/Link.js
rename to src/components/Link.tsx
index 5f29f97..ddd4b5c 100644
--- a/src/components/Link.js
+++ b/src/components/Link.tsx
@@ -1,8 +1,7 @@
-import React from "react";
-import { Link as ThemeLink } from "theme-ui";
+import { Link as ThemeLink, LinkProps } from "theme-ui";
 import { HashLink as RouterLink } from "react-router-hash-link";
 
-function Link({ to, ...rest }) {
+function Link({ to, ...rest }: { to: string } & LinkProps) {
   return (
     <RouterLink to={to}>
       <ThemeLink as="span" {...rest} />
diff --git a/src/components/LoadingBar.js b/src/components/LoadingBar.tsx
similarity index 69%
rename from src/components/LoadingBar.js
rename to src/components/LoadingBar.tsx
index 68e56dc..3f1c1e9 100644
--- a/src/components/LoadingBar.js
+++ b/src/components/LoadingBar.tsx
@@ -1,9 +1,14 @@
 import React, { useEffect, useRef } from "react";
 import { Progress } from "theme-ui";
 
-function LoadingBar({ isLoading, loadingProgressRef }) {
-  const requestRef = useRef();
-  const progressBarRef = useRef();
+type LoadingBarProps = {
+  isLoading: boolean;
+  loadingProgressRef: React.MutableRefObject<number>;
+};
+
+function LoadingBar({ isLoading, loadingProgressRef }: LoadingBarProps) {
+  const requestRef = useRef<number>();
+  const progressBarRef = useRef<HTMLProgressElement>(null);
 
   // Use an animation frame to update the progress bar
   // This bypasses react allowing the animation to be smooth
@@ -21,7 +26,9 @@ function LoadingBar({ isLoading, loadingProgressRef }) {
     requestRef.current = requestAnimationFrame(animate);
 
     return () => {
-      cancelAnimationFrame(requestRef.current);
+      if (requestRef.current !== undefined) {
+        cancelAnimationFrame(requestRef.current);
+      }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
diff --git a/src/components/LoadingOverlay.js b/src/components/LoadingOverlay.tsx
similarity index 79%
rename from src/components/LoadingOverlay.js
rename to src/components/LoadingOverlay.tsx
index 5e46bc0..87b24ce 100644
--- a/src/components/LoadingOverlay.js
+++ b/src/components/LoadingOverlay.tsx
@@ -3,7 +3,12 @@ import { Box } from "theme-ui";
 
 import Spinner from "./Spinner";
 
-function LoadingOverlay({ bg, children }) {
+type LoadingOverlayProps = {
+  bg: string;
+  children?: React.ReactNode;
+};
+
+function LoadingOverlay({ bg, children }: LoadingOverlayProps) {
   return (
     <Box
       sx={{
diff --git a/src/components/Markdown.js b/src/components/Markdown.tsx
similarity index 63%
rename from src/components/Markdown.js
rename to src/components/Markdown.tsx
index 388ea77..e07f63d 100644
--- a/src/components/Markdown.js
+++ b/src/components/Markdown.tsx
@@ -1,24 +1,26 @@
 import React from "react";
 import {
   Text,
+  TextProps,
   Image as UIImage,
+  ImageProps,
   Link as UILink,
   Message,
-  Embed,
+  Box,
 } from "theme-ui";
 import ReactMarkdown from "react-markdown";
 
-function Paragraph(props) {
+function Paragraph(props: TextProps) {
   return <Text as="p" my={2} variant="body2" {...props} />;
 }
 
-function Heading({ level, ...props }) {
+function Heading({ level, ...props }: { level: number } & TextProps) {
   const fontSize = level === 1 ? 5 : level === 2 ? 3 : 1;
   return (
     <Text
       mt={2}
       mb={1}
-      as={`h${level}`}
+      as={`h${level}` as React.ElementType}
       sx={{ fontSize }}
       variant="heading"
       {...props}
@@ -26,11 +28,37 @@ function Heading({ level, ...props }) {
   );
 }
 
-function Image(props) {
+function Image(props: ImageProps) {
   if (props.alt === "embed:") {
-    return <Embed as="span" sx={{ display: "block" }} src={props.src} my={2} />;
+    return (
+      <Box
+        as="span"
+        sx={{
+          display: "block",
+          width: "100%",
+          height: 0,
+          paddingBottom: "56.25%",
+          position: "relative",
+        }}
+        my={2}
+      >
+        <iframe
+          src={props.src}
+          style={{
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            border: 0,
+          }}
+          title="Video"
+        />
+      </Box>
+    );
   }
-  if (props.src.endsWith(".mp4")) {
+  if (props.src?.endsWith(".mp4")) {
     return (
       <video
         style={{ width: "100%", margin: "8px 0" }}
@@ -39,7 +67,7 @@ function Image(props) {
         playsInline
         loop
         controls
-        {...props}
+        src={props.src}
       />
     );
   }
@@ -47,11 +75,17 @@ function Image(props) {
   return <UIImage mt={2} sx={{ borderRadius: "4px" }} {...props} />;
 }
 
-function ListItem(props) {
+function ListItem(props: TextProps) {
   return <Text as="li" variant="body2" my={1} {...props} />;
 }
 
-function Code({ children, value }) {
+function Code({
+  children,
+  value,
+}: {
+  value: string;
+  children: React.ReactNode;
+}) {
   let variant = "";
   if (value.startsWith("Warning:")) {
     variant = "warning";
@@ -71,7 +105,7 @@ function Code({ children, value }) {
   );
 }
 
-function Table({ children }) {
+function Table({ children }: { children: React.ReactNode }) {
   return (
     <Text
       as="table"
@@ -83,7 +117,7 @@ function Table({ children }) {
   );
 }
 
-function TableHead(props) {
+function TableHead(props: TextProps) {
   return (
     <Text
       as="thead"
@@ -94,7 +128,7 @@ function TableHead(props) {
   );
 }
 
-function TableBody(props) {
+function TableBody(props: TextProps) {
   return (
     <Text
       as="tbody"
@@ -105,7 +139,7 @@ function TableBody(props) {
   );
 }
 
-function TableRow({ children }) {
+function TableRow({ children }: { children: React.ReactNode }) {
   return (
     <Text
       as="tr"
@@ -119,7 +153,7 @@ function TableRow({ children }) {
   );
 }
 
-function TableCell({ children }) {
+function TableCell({ children }: { children: React.ReactNode }) {
   return (
     <Text as="td" p={2}>
       {children}
@@ -127,11 +161,17 @@ function TableCell({ children }) {
   );
 }
 
-function Link({ href, children }) {
+function Link({ href, children }: { href: string; children: React.ReactNode }) {
   return <UILink href={href}>{children}</UILink>;
 }
 
-function Markdown({ source, assets }) {
+function Markdown({
+  source,
+  assets,
+}: {
+  source: string;
+  assets: Record<string, string>;
+}) {
   const renderers = {
     paragraph: Paragraph,
     heading: Heading,
diff --git a/src/components/Modal.js b/src/components/Modal.tsx
similarity index 80%
rename from src/components/Modal.js
rename to src/components/Modal.tsx
index 664d7a9..9912b99 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.tsx
@@ -1,8 +1,13 @@
-import React from "react";
-import Modal from "react-modal";
+import React, { ReactChild } from "react";
+import Modal, { Props } from "react-modal";
 import { useThemeUI, Close } from "theme-ui";
-
 import { useSpring, animated, config } from "react-spring";
+import CSS from "csstype";
+
+type ModalProps = Props & {
+  children: ReactChild | ReactChild[];
+  allowClose: boolean;
+};
 
 function StyledModal({
   isOpen,
@@ -11,7 +16,7 @@ function StyledModal({
   allowClose,
   style,
   ...props
-}) {
+}: ModalProps) {
   const { theme } = useThemeUI();
 
   const openAnimation = useSpring({
@@ -31,16 +36,17 @@ function StyledModal({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
+          ...(style?.overlay || {}),
         },
         content: {
-          backgroundColor: theme.colors.background,
+          backgroundColor: theme.colors?.background as CSS.Property.Color,
           top: "initial",
           left: "initial",
           bottom: "initial",
           right: "initial",
           maxHeight: "100%",
-          ...style,
-        },
+          ...(style?.content || {}),
+        } as React.CSSProperties,
       }}
       contentElement={(props, content) => (
         <animated.div {...props} style={{ ...props.style, ...openAnimation }}>
diff --git a/src/components/RadioIconButton.js b/src/components/RadioIconButton.tsx
similarity index 54%
rename from src/components/RadioIconButton.js
rename to src/components/RadioIconButton.tsx
index 14579bc..c8399fe 100644
--- a/src/components/RadioIconButton.js
+++ b/src/components/RadioIconButton.tsx
@@ -1,7 +1,17 @@
-import React from "react";
-import { IconButton } from "theme-ui";
+import { IconButton, IconButtonProps } from "theme-ui";
 
-function RadioIconButton({ title, onClick, isSelected, disabled, children }) {
+type RadioButttonProps = {
+  isSelected: boolean;
+} & IconButtonProps;
+
+function RadioIconButton({
+  title,
+  onClick,
+  isSelected,
+  disabled,
+  children,
+  ...props
+}: RadioButttonProps) {
   return (
     <IconButton
       aria-label={title}
@@ -9,6 +19,7 @@ function RadioIconButton({ title, onClick, isSelected, disabled, children }) {
       onClick={onClick}
       sx={{ color: isSelected ? "primary" : "text" }}
       disabled={disabled}
+      {...props}
     >
       {children}
     </IconButton>
diff --git a/src/components/Search.js b/src/components/Search.tsx
similarity index 88%
rename from src/components/Search.js
rename to src/components/Search.tsx
index df00aa1..762de5c 100644
--- a/src/components/Search.js
+++ b/src/components/Search.tsx
@@ -1,9 +1,8 @@
-import React from "react";
-import { Box, Input } from "theme-ui";
+import { Box, Input, InputProps } from "theme-ui";
 
 import SearchIcon from "../icons/SearchIcon";
 
-function Search(props) {
+function Search(props: InputProps) {
   return (
     <Box sx={{ position: "relative", flexGrow: 1 }}>
       <Input
diff --git a/src/components/Select.js b/src/components/Select.js
deleted file mode 100644
index d39c797..0000000
--- a/src/components/Select.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from "react";
-import ReactSelect from "react-select";
-import Creatable from "react-select/creatable";
-import { useThemeUI } from "theme-ui";
-
-function Select({ creatable, ...props }) {
-  const { theme } = useThemeUI();
-
-  const Component = creatable ? Creatable : ReactSelect;
-
-  return (
-    <Component
-      styles={{
-        menu: (provided, state) => ({
-          ...provided,
-          backgroundColor: theme.colors.background,
-          color: theme.colors.text,
-          borderRadius: "4px",
-          borderColor: theme.colors.gray,
-          borderStyle: "solid",
-          borderWidth: "1px",
-          fontFamily: theme.fonts.body2,
-          opacity: state.isDisabled ? 0.5 : 1,
-        }),
-        control: (provided, state) => ({
-          ...provided,
-          backgroundColor: "transparent",
-          color: theme.colors.text,
-          borderColor: theme.colors.text,
-          opacity: state.isDisabled ? 0.5 : 1,
-        }),
-        singleValue: (provided) => ({
-          ...provided,
-          color: theme.colors.text,
-          fontFamily: theme.fonts.body2,
-        }),
-        option: (provided, state) => ({
-          ...provided,
-          color: theme.colors.text,
-          opacity: state.isDisabled ? 0.5 : 1,
-        }),
-        dropdownIndicator: (provided, state) => ({
-          ...provided,
-          color: theme.colors.text,
-          ":hover": {
-            color: state.isDisabled
-              ? theme.colors.disabled
-              : theme.colors.primary,
-          },
-        }),
-        input: (provided, state) => ({
-          ...provided,
-          color: theme.colors.text,
-          opacity: state.isDisabled ? 0.5 : 1,
-        }),
-        container: (provided) => ({
-          ...provided,
-          margin: "4px 0",
-        }),
-      }}
-      theme={(t) => ({
-        ...t,
-        colors: {
-          ...t.colors,
-          primary: theme.colors.primary,
-          primary50: theme.colors.secondary,
-          primary25: theme.colors.highlight,
-        },
-      })}
-      captureMenuScroll={false}
-      {...props}
-    />
-  );
-}
-
-export default Select;
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 0000000..c358076
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,83 @@
+import ReactSelect, { Props } from "react-select";
+import Creatable from "react-select/creatable";
+import { useThemeUI } from "theme-ui";
+
+type SelectProps = {
+  creatable?: boolean;
+} & Props;
+
+function Select({ creatable, ...props }: SelectProps) {
+  const { theme } = useThemeUI();
+
+  const Component: any = creatable ? Creatable : ReactSelect;
+
+  return (
+    <Component
+      styles={{
+        menu: (provided: any, state: any) => ({
+          ...provided,
+          backgroundColor: theme.colors?.background,
+          color: theme.colors?.text,
+          borderRadius: "4px",
+          borderColor: theme.colors?.gray,
+          borderStyle: "solid",
+          borderWidth: "1px",
+          fontFamily: (theme.fonts as any)?.body2,
+          opacity: state.isDisabled ? 0.5 : 1,
+        }),
+        control: (provided: any, state: any) => ({
+          ...provided,
+          backgroundColor: "transparent",
+          color: theme.colors?.text,
+          borderColor: theme.colors?.text,
+          opacity: state.isDisabled ? 0.5 : 1,
+        }),
+        singleValue: (provided: any) => ({
+          ...provided,
+          color: theme.colors?.text,
+          fontFamily: (theme.fonts as any).body2,
+        }),
+        option: (provided: any, state: any) => ({
+          ...provided,
+          color: theme.colors?.text,
+          opacity: state.isDisabled ? 0.5 : 1,
+        }),
+        dropdownIndicator: (provided: any, state: any) => ({
+          ...provided,
+          color: theme.colors?.text,
+          ":hover": {
+            color: state.isDisabled
+              ? theme.colors?.disabled
+              : theme.colors?.primary,
+          },
+        }),
+        input: (provided: any, state: any) => ({
+          ...provided,
+          color: theme.colors?.text,
+          opacity: state.isDisabled ? 0.5 : 1,
+        }),
+        container: (provided: any) => ({
+          ...provided,
+          margin: "4px 0",
+        }),
+      }}
+      theme={(t: any) => ({
+        ...t,
+        colors: {
+          ...t.colors,
+          primary: theme.colors?.primary,
+          primary50: theme.colors?.secondary,
+          primary25: theme.colors?.highlight,
+        },
+      })}
+      captureMenuScroll={false}
+      {...props}
+    />
+  );
+}
+
+Select.defaultProps = {
+  creatable: false,
+};
+
+export default Select;
diff --git a/src/components/SettingsButton.js b/src/components/SettingsButton.tsx
similarity index 94%
rename from src/components/SettingsButton.js
rename to src/components/SettingsButton.tsx
index 750978c..111ca00 100644
--- a/src/components/SettingsButton.js
+++ b/src/components/SettingsButton.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { IconButton } from "theme-ui";
 
 import SettingsIcon from "../icons/SettingsIcon";
diff --git a/src/components/Slider.js b/src/components/Slider.tsx
similarity index 76%
rename from src/components/Slider.js
rename to src/components/Slider.tsx
index fdc601b..9a28e28 100644
--- a/src/components/Slider.js
+++ b/src/components/Slider.tsx
@@ -1,10 +1,25 @@
-import React, { useState } from "react";
-import { Box, Slider as ThemeSlider } from "theme-ui";
+import { useState } from "react";
+import { Box, Slider as ThemeSlider, SliderProps } from "theme-ui";
 
-function Slider({ min, max, value, ml, mr, labelFunc, ...rest }) {
+type SliderModalProps = SliderProps & {
+  min: number;
+  max: number;
+  value: number;
+  labelFunc: (value: number) => string;
+};
+
+function Slider({
+  min,
+  max,
+  value,
+  ml,
+  mr,
+  labelFunc,
+  ...rest
+}: SliderModalProps) {
   const percentValue = ((value - min) * 100) / (max - min);
 
-  const [labelVisible, setLabelVisible] = useState(false);
+  const [labelVisible, setLabelVisible] = useState<boolean>(false);
 
   return (
     <Box sx={{ position: "relative" }} ml={ml} mr={mr}>
@@ -63,7 +78,7 @@ Slider.defaultProps = {
   value: 0,
   ml: 0,
   mr: 0,
-  labelFunc: (value) => value,
+  labelFunc: (value: number) => value,
 };
 
 export default Slider;
diff --git a/src/components/Spinner.js b/src/components/Spinner.tsx
similarity index 94%
rename from src/components/Spinner.js
rename to src/components/Spinner.tsx
index 1dc1153..abdd7ee 100644
--- a/src/components/Spinner.js
+++ b/src/components/Spinner.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Box } from "theme-ui";
 
 import "./Spinner.css";
diff --git a/src/components/TextareaAutoSize.js b/src/components/TextareaAutoSize.js
deleted file mode 100644
index 53e58aa..0000000
--- a/src/components/TextareaAutoSize.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import TextareaAutosize from "react-textarea-autosize";
-import "./TextareaAutoSize.css";
-
-function StyledTextareaAutoSize(props) {
-  return <TextareaAutosize className="textarea-auto-size" {...props} />;
-}
-
-export default StyledTextareaAutoSize;
diff --git a/src/components/TextareaAutoSize.tsx b/src/components/TextareaAutoSize.tsx
new file mode 100644
index 0000000..5884f56
--- /dev/null
+++ b/src/components/TextareaAutoSize.tsx
@@ -0,0 +1,10 @@
+import TextareaAutosize, {
+  TextareaAutosizeProps,
+} from "react-textarea-autosize";
+import "./TextareaAutoSize.css";
+
+function StyledTextareaAutoSize(props: TextareaAutosizeProps) {
+  return <TextareaAutosize className="textarea-auto-size" {...props} />;
+}
+
+export default StyledTextareaAutoSize;
diff --git a/src/components/Toast.js b/src/components/Toast.tsx
similarity index 80%
rename from src/components/Toast.js
rename to src/components/Toast.tsx
index 70def29..c90abee 100644
--- a/src/components/Toast.js
+++ b/src/components/Toast.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Box, Text } from "theme-ui";
 import { ToastProvider as DefaultToastProvider } from "react-toast-notifications";
 
-function CustomToast({ children }) {
+function CustomToast({ children }: { children?: React.ReactNode }) {
   return (
     <Box
       m={2}
@@ -17,7 +17,7 @@ function CustomToast({ children }) {
   );
 }
 
-export function ToastProvider({ children }) {
+export function ToastProvider({ children }: { children?: React.ReactNode }) {
   return (
     <DefaultToastProvider
       components={{ Toast: CustomToast }}
diff --git a/src/components/UpgradingLoadingOverlay.js b/src/components/UpgradingLoadingOverlay.tsx
similarity index 93%
rename from src/components/UpgradingLoadingOverlay.js
rename to src/components/UpgradingLoadingOverlay.tsx
index c284cbb..f144c1d 100644
--- a/src/components/UpgradingLoadingOverlay.js
+++ b/src/components/UpgradingLoadingOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Text } from "theme-ui";
 
 import LoadingOverlay from "./LoadingOverlay";
@@ -21,7 +21,7 @@ const facts = [
 ];
 
 function UpgradingLoadingOverlay() {
-  const [subText, setSubText] = useState();
+  const [subText, setSubText] = useState<string>();
 
   useEffect(() => {
     let index = 0;
@@ -33,7 +33,7 @@ function UpgradingLoadingOverlay() {
     }
 
     // Show first fact after 10 seconds then every 20 seconds after that
-    let interval;
+    let interval: NodeJS.Timeout;
     let timeout = setTimeout(() => {
       updateFact();
       interval = setInterval(() => {
diff --git a/src/components/banner/Banner.js b/src/components/banner/Banner.tsx
similarity index 73%
rename from src/components/banner/Banner.js
rename to src/components/banner/Banner.tsx
index 6a64017..1b0e023 100644
--- a/src/components/banner/Banner.js
+++ b/src/components/banner/Banner.tsx
@@ -1,6 +1,15 @@
-import React from "react";
 import Modal from "react-modal";
 import { useThemeUI, Close } from "theme-ui";
+import { RequestCloseEventHandler } from "../../types/Events";
+import CSS from "csstype";
+
+type BannerProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  children: React.ReactNode;
+  allowClose: boolean;
+  backgroundColor?: CSS.Property.Color;
+};
 
 function Banner({
   isOpen,
@@ -8,7 +17,7 @@ function Banner({
   children,
   allowClose,
   backgroundColor,
-}) {
+}: BannerProps) {
   const { theme } = useThemeUI();
 
   return (
@@ -18,7 +27,8 @@ function Banner({
       style={{
         overlay: { bottom: "0", top: "initial", zIndex: 2000 },
         content: {
-          backgroundColor: backgroundColor || theme.colors.highlight,
+          backgroundColor:
+            backgroundColor || (theme.colors?.highlight as CSS.Property.Color),
           color: "hsl(210, 50%, 96%)",
           top: "initial",
           left: "50%",
diff --git a/src/components/banner/ErrorBanner.js b/src/components/banner/ErrorBanner.tsx
similarity index 57%
rename from src/components/banner/ErrorBanner.js
rename to src/components/banner/ErrorBanner.tsx
index 6bb3574..d68f390 100644
--- a/src/components/banner/ErrorBanner.js
+++ b/src/components/banner/ErrorBanner.tsx
@@ -1,9 +1,15 @@
-import React from "react";
 import { Box, Text } from "theme-ui";
 
 import Banner from "./Banner";
 
-function ErrorBanner({ error, onRequestClose }) {
+import { RequestCloseEventHandler } from "../../types/Events";
+
+type ErrorBannerProps = {
+  error: Error | undefined;
+  onRequestClose: RequestCloseEventHandler;
+};
+
+function ErrorBanner({ error, onRequestClose }: ErrorBannerProps) {
   return (
     <Banner isOpen={!!error} onRequestClose={onRequestClose}>
       <Box p={1}>
diff --git a/src/components/banner/OfflineBanner.js b/src/components/banner/OfflineBanner.tsx
similarity index 91%
rename from src/components/banner/OfflineBanner.js
rename to src/components/banner/OfflineBanner.tsx
index d5d90ad..2680e0a 100644
--- a/src/components/banner/OfflineBanner.js
+++ b/src/components/banner/OfflineBanner.tsx
@@ -1,10 +1,9 @@
-import React from "react";
 import { Flex } from "theme-ui";
 
 import Banner from "./Banner";
 import OfflineIcon from "../../icons/OfflineIcon";
 
-function OfflineBanner({ isOpen }) {
+function OfflineBanner({ isOpen }: { isOpen: boolean }) {
   return (
     <Banner
       isOpen={isOpen}
diff --git a/src/components/banner/ReconnectBanner.js b/src/components/banner/ReconnectBanner.tsx
similarity index 91%
rename from src/components/banner/ReconnectBanner.js
rename to src/components/banner/ReconnectBanner.tsx
index 7fa917a..33237cc 100644
--- a/src/components/banner/ReconnectBanner.js
+++ b/src/components/banner/ReconnectBanner.tsx
@@ -1,10 +1,9 @@
-import React from "react";
 import { Flex } from "theme-ui";
 
 import Banner from "./Banner";
 import ReconnectingIcon from "../../icons/ReconnectingIcon";
 
-function ReconnectBanner({ isOpen }) {
+function ReconnectBanner({ isOpen }: { isOpen: boolean }) {
   return (
     <Banner
       isOpen={isOpen}
diff --git a/src/components/map/controls/DrawingToolSettings.js b/src/components/controls/DrawingToolSettings.tsx
similarity index 62%
rename from src/components/map/controls/DrawingToolSettings.js
rename to src/components/controls/DrawingToolSettings.tsx
index 2537e3f..8a5f8e4 100644
--- a/src/components/map/controls/DrawingToolSettings.js
+++ b/src/components/controls/DrawingToolSettings.tsx
@@ -1,39 +1,49 @@
-import React, { useEffect } from "react";
-import { Flex, IconButton } from "theme-ui";
+import { useEffect } from "react";
+import { Flex } from "theme-ui";
 import { useMedia } from "react-media";
 
-import RadioIconButton from "../../RadioIconButton";
+import RadioIconButton from "../RadioIconButton";
 
-import ColorControl from "./ColorControl";
-import AlphaBlendToggle from "./AlphaBlendToggle";
-import ToolSection from "./ToolSection";
+import ColorControl from "./shared/ColorControl";
+import AlphaBlendToggle from "./shared/AlphaBlendToggle";
+import ToolSection from "./shared/ToolSection";
+import ShapeFillToggle from "./shared/ShapeFillToggle";
 
-import BrushIcon from "../../../icons/BrushToolIcon";
-import BrushPaintIcon from "../../../icons/BrushPaintIcon";
-import BrushLineIcon from "../../../icons/BrushLineIcon";
-import BrushRectangleIcon from "../../../icons/BrushRectangleIcon";
-import BrushCircleIcon from "../../../icons/BrushCircleIcon";
-import BrushTriangleIcon from "../../../icons/BrushTriangleIcon";
-import EraseAllIcon from "../../../icons/EraseAllIcon";
-import EraseIcon from "../../../icons/EraseToolIcon";
+import BrushIcon from "../../icons/BrushToolIcon";
+import BrushPaintIcon from "../../icons/BrushPaintIcon";
+import BrushLineIcon from "../../icons/BrushLineIcon";
+import BrushRectangleIcon from "../../icons/BrushRectangleIcon";
+import BrushCircleIcon from "../../icons/BrushCircleIcon";
+import BrushTriangleIcon from "../../icons/BrushTriangleIcon";
+import EraseIcon from "../../icons/EraseToolIcon";
 
-import UndoButton from "./UndoButton";
-import RedoButton from "./RedoButton";
+import Divider from "../Divider";
 
-import Divider from "../../Divider";
+import { useKeyboard } from "../../contexts/KeyboardContext";
 
-import { useKeyboard } from "../../../contexts/KeyboardContext";
+import shortcuts from "../../shortcuts";
 
-import shortcuts from "../../../shortcuts";
+import {
+  DrawingToolSettings as DrawingToolSettingsType,
+  DrawingToolType,
+} from "../../types/Drawing";
+import EraseAllButton from "./shared/EraseAllButton";
+
+type DrawingToolSettingsProps = {
+  settings: DrawingToolSettingsType;
+  onSettingChange: (change: Partial<DrawingToolSettingsType>) => void;
+  onToolAction: (action: string) => void;
+  disabledActions: string[];
+};
 
 function DrawingToolSettings({
   settings,
   onSettingChange,
   onToolAction,
   disabledActions,
-}) {
+}: DrawingToolSettingsProps) {
   // Keyboard shotcuts
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEvent) {
     if (shortcuts.drawBrush(event)) {
       onSettingChange({ type: "brush" });
     } else if (shortcuts.drawPaint(event)) {
@@ -50,10 +60,8 @@ function DrawingToolSettings({
       onSettingChange({ type: "erase" });
     } else if (shortcuts.drawBlend(event)) {
       onSettingChange({ useBlending: !settings.useBlending });
-    } else if (shortcuts.redo(event) && !disabledActions.includes("redo")) {
-      onToolAction("mapRedo");
-    } else if (shortcuts.undo(event) && !disabledActions.includes("undo")) {
-      onToolAction("mapUndo");
+    } else if (shortcuts.drawFill(event)) {
+      onSettingChange({ useShapeFill: !settings.useShapeFill });
     }
   }
   useKeyboard(handleKeyDown);
@@ -111,11 +119,14 @@ function DrawingToolSettings({
       <ColorControl
         color={settings.color}
         onColorChange={(color) => onSettingChange({ color })}
+        exclude={["primary"]}
       />
       <Divider vertical />
       <ToolSection
         tools={tools}
-        onToolClick={(tool) => onSettingChange({ type: tool.id })}
+        onToolClick={(tool) =>
+          onSettingChange({ type: tool.id as DrawingToolType })
+        }
         collapse={isSmallScreen}
       />
       <Divider vertical />
@@ -127,27 +138,18 @@ function DrawingToolSettings({
       >
         <EraseIcon />
       </RadioIconButton>
-      <IconButton
-        aria-label="Erase All"
-        title="Erase All"
-        onClick={() => onToolAction("eraseAll")}
+      <EraseAllButton
+        onToolAction={onToolAction}
         disabled={disabledActions.includes("erase")}
-      >
-        <EraseAllIcon />
-      </IconButton>
+      />
       <Divider vertical />
       <AlphaBlendToggle
         useBlending={settings.useBlending}
         onBlendingChange={(useBlending) => onSettingChange({ useBlending })}
       />
-      <Divider vertical />
-      <UndoButton
-        onClick={() => onToolAction("mapUndo")}
-        disabled={disabledActions.includes("undo")}
-      />
-      <RedoButton
-        onClick={() => onToolAction("mapRedo")}
-        disabled={disabledActions.includes("redo")}
+      <ShapeFillToggle
+        useShapeFill={settings.useShapeFill}
+        onShapeFillChange={(useShapeFill) => onSettingChange({ useShapeFill })}
       />
     </Flex>
   );
diff --git a/src/components/map/controls/FogToolSettings.js b/src/components/controls/FogToolSettings.tsx
similarity index 64%
rename from src/components/map/controls/FogToolSettings.js
rename to src/components/controls/FogToolSettings.tsx
index 5eb14d7..79d4cc9 100644
--- a/src/components/map/controls/FogToolSettings.js
+++ b/src/components/controls/FogToolSettings.tsx
@@ -1,37 +1,39 @@
-import React from "react";
 import { Flex } from "theme-ui";
 import { useMedia } from "react-media";
 
-import RadioIconButton from "../../RadioIconButton";
+import RadioIconButton from "../RadioIconButton";
 
-import MultilayerToggle from "./MultilayerToggle";
-import FogPreviewToggle from "./FogPreviewToggle";
-import FogCutToggle from "./FogCutToggle";
+import MultilayerToggle from "./shared/MultilayerToggle";
+import FogPreviewToggle from "./shared/FogPreviewToggle";
+import FogCutToggle from "./shared/FogCutToggle";
 
-import FogBrushIcon from "../../../icons/FogBrushIcon";
-import FogPolygonIcon from "../../../icons/FogPolygonIcon";
-import FogRemoveIcon from "../../../icons/FogRemoveIcon";
-import FogToggleIcon from "../../../icons/FogToggleIcon";
-import FogRectangleIcon from "../../../icons/FogRectangleIcon";
+import FogBrushIcon from "../../icons/FogBrushIcon";
+import FogPolygonIcon from "../../icons/FogPolygonIcon";
+import FogRemoveIcon from "../../icons/FogRemoveIcon";
+import FogToggleIcon from "../../icons/FogToggleIcon";
+import FogRectangleIcon from "../../icons/FogRectangleIcon";
 
-import UndoButton from "./UndoButton";
-import RedoButton from "./RedoButton";
-import ToolSection from "./ToolSection";
+import ToolSection from "./shared/ToolSection";
 
-import Divider from "../../Divider";
+import Divider from "../Divider";
 
-import { useKeyboard } from "../../../contexts/KeyboardContext";
+import { useKeyboard } from "../../contexts/KeyboardContext";
 
-import shortcuts from "../../../shortcuts";
+import shortcuts from "../../shortcuts";
 
-function BrushToolSettings({
-  settings,
-  onSettingChange,
-  onToolAction,
-  disabledActions,
-}) {
+import {
+  FogToolSettings as FogToolSettingsType,
+  FogToolType,
+} from "../../types/Fog";
+
+type FogToolSettingsProps = {
+  settings: FogToolSettingsType;
+  onSettingChange: (change: Partial<FogToolSettingsType>) => void;
+};
+
+function FogToolSettings({ settings, onSettingChange }: FogToolSettingsProps) {
   // Keyboard shortcuts
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEvent) {
     if (shortcuts.fogPolygon(event)) {
       onSettingChange({ type: "polygon" });
     } else if (shortcuts.fogBrush(event)) {
@@ -48,10 +50,6 @@ function BrushToolSettings({
       onSettingChange({ useFogCut: !settings.useFogCut });
     } else if (shortcuts.fogRectangle(event)) {
       onSettingChange({ type: "rectangle" });
-    } else if (shortcuts.redo(event) && !disabledActions.includes("redo")) {
-      onToolAction("fogRedo");
-    } else if (shortcuts.undo(event) && !disabledActions.includes("undo")) {
-      onToolAction("fogUndo");
     }
   }
 
@@ -86,7 +84,9 @@ function BrushToolSettings({
     <Flex sx={{ alignItems: "center" }}>
       <ToolSection
         tools={drawTools}
-        onToolClick={(tool) => onSettingChange({ type: tool.id })}
+        onToolClick={(tool) =>
+          onSettingChange({ type: tool.id as FogToolType })
+        }
         collapse={isSmallScreen}
       />
       <Divider vertical />
@@ -121,17 +121,8 @@ function BrushToolSettings({
         useFogPreview={settings.preview}
         onFogPreviewChange={(preview) => onSettingChange({ preview })}
       />
-      <Divider vertical />
-      <UndoButton
-        onClick={() => onToolAction("fogUndo")}
-        disabled={disabledActions.includes("undo")}
-      />
-      <RedoButton
-        onClick={() => onToolAction("fogRedo")}
-        disabled={disabledActions.includes("redo")}
-      />
     </Flex>
   );
 }
 
-export default BrushToolSettings;
+export default FogToolSettings;
diff --git a/src/components/controls/PointerToolSettings.tsx b/src/components/controls/PointerToolSettings.tsx
new file mode 100644
index 0000000..ebbab14
--- /dev/null
+++ b/src/components/controls/PointerToolSettings.tsx
@@ -0,0 +1,27 @@
+import { Flex } from "theme-ui";
+
+import ColorControl from "./shared/ColorControl";
+
+import { PointerToolSettings as PointerToolSettingsType } from "../../types/Pointer";
+
+type PointerToolSettingsProps = {
+  settings: PointerToolSettingsType;
+  onSettingChange: (change: Partial<PointerToolSettingsType>) => void;
+};
+
+function PointerToolSettings({
+  settings,
+  onSettingChange,
+}: PointerToolSettingsProps) {
+  return (
+    <Flex sx={{ alignItems: "center" }}>
+      <ColorControl
+        color={settings.color}
+        onColorChange={(color) => onSettingChange({ color })}
+        exclude={["black", "darkGray", "lightGray", "white", "primary"]}
+      />
+    </Flex>
+  );
+}
+
+export default PointerToolSettings;
diff --git a/src/components/controls/SelectToolSettings.tsx b/src/components/controls/SelectToolSettings.tsx
new file mode 100644
index 0000000..25c367b
--- /dev/null
+++ b/src/components/controls/SelectToolSettings.tsx
@@ -0,0 +1,63 @@
+import { Flex } from "theme-ui";
+
+import {
+  SelectToolSettings as SelectToolSettingsType,
+  SelectToolType,
+} from "../../types/Select";
+
+import { useKeyboard } from "../../contexts/KeyboardContext";
+
+import ToolSection from "./shared/ToolSection";
+
+import shortcuts from "../../shortcuts";
+
+import RectIcon from "../../icons/SelectRectangleIcon";
+import PathIcon from "../../icons/SelectPathIcon";
+
+type SelectToolSettingsProps = {
+  settings: SelectToolSettingsType;
+  onSettingChange: (change: Partial<SelectToolSettingsType>) => void;
+};
+
+function SelectToolSettings({
+  settings,
+  onSettingChange,
+}: SelectToolSettingsProps) {
+  // Keyboard shotcuts
+  function handleKeyDown(event: KeyboardEvent) {
+    if (shortcuts.selectPath(event)) {
+      onSettingChange({ type: "path" });
+    } else if (shortcuts.selectRect(event)) {
+      onSettingChange({ type: "rectangle" });
+    }
+  }
+  useKeyboard(handleKeyDown);
+
+  const tools = [
+    {
+      id: "rectangle",
+      title: "Rectangle Selection (R)",
+      isSelected: settings.type === "rectangle",
+      icon: <RectIcon />,
+    },
+    {
+      id: "path",
+      title: "Lasso Selection (L)",
+      isSelected: settings.type === "path",
+      icon: <PathIcon />,
+    },
+  ];
+
+  return (
+    <Flex sx={{ alignItems: "center" }}>
+      <ToolSection
+        tools={tools}
+        onToolClick={(tool) =>
+          onSettingChange({ type: tool.id as SelectToolType })
+        }
+      />
+    </Flex>
+  );
+}
+
+export default SelectToolSettings;
diff --git a/src/components/map/controls/AlphaBlendToggle.js b/src/components/controls/shared/AlphaBlendToggle.tsx
similarity index 71%
rename from src/components/map/controls/AlphaBlendToggle.js
rename to src/components/controls/shared/AlphaBlendToggle.tsx
index ff0f276..7ae0400 100644
--- a/src/components/map/controls/AlphaBlendToggle.js
+++ b/src/components/controls/shared/AlphaBlendToggle.tsx
@@ -1,10 +1,17 @@
-import React from "react";
 import { IconButton } from "theme-ui";
 
 import BlendOnIcon from "../../../icons/BlendOnIcon";
 import BlendOffIcon from "../../../icons/BlendOffIcon";
 
-function AlphaBlendToggle({ useBlending, onBlendingChange }) {
+type AlphaBlendToggleProps = {
+  useBlending: boolean;
+  onBlendingChange: (useBlending: boolean) => void;
+};
+
+function AlphaBlendToggle({
+  useBlending,
+  onBlendingChange,
+}: AlphaBlendToggleProps) {
   return (
     <IconButton
       aria-label={useBlending ? "Disable Blending (O)" : "Enable Blending (O)"}
diff --git a/src/components/map/controls/ColorControl.js b/src/components/controls/shared/ColorControl.tsx
similarity index 76%
rename from src/components/map/controls/ColorControl.js
rename to src/components/controls/shared/ColorControl.tsx
index d00128c..a0a3544 100644
--- a/src/components/map/controls/ColorControl.js
+++ b/src/components/controls/shared/ColorControl.tsx
@@ -1,10 +1,16 @@
 import React, { useState } from "react";
-import { Box } from "theme-ui";
+import { Box, SxProp } from "theme-ui";
 
-import colors, { colorOptions } from "../../../helpers/colors";
-import MapMenu from "../MapMenu";
+import colors, { colorOptions, Color } from "../../../helpers/colors";
+import MapMenu from "../../map/MapMenu";
 
-function ColorCircle({ color, selected, onClick, sx }) {
+type ColorCircleProps = {
+  color: Color;
+  selected: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+} & SxProp;
+
+function ColorCircle({ color, selected, onClick, sx }: ColorCircleProps) {
   return (
     <Box
       key={color}
@@ -34,24 +40,30 @@ function ColorCircle({ color, selected, onClick, sx }) {
   );
 }
 
-function ColorControl({ color, onColorChange, exclude }) {
+type ColorControlProps = {
+  color: Color;
+  onColorChange: (newColor: Color) => void;
+  exclude: Color[];
+};
+
+function ColorControl({ color, onColorChange, exclude }: ColorControlProps) {
   const [showColorMenu, setShowColorMenu] = useState(false);
   const [colorMenuOptions, setColorMenuOptions] = useState({});
 
-  function handleControlClick(event) {
+  function handleControlClick(event: React.MouseEvent<HTMLDivElement>) {
     if (showColorMenu) {
       setShowColorMenu(false);
       setColorMenuOptions({});
     } else {
       setShowColorMenu(true);
-      const rect = event.target.getBoundingClientRect();
+      const rect = event.currentTarget.getBoundingClientRect();
       setColorMenuOptions({
         // Align the right of the submenu to the left of the tool and center vertically
         left: `${rect.left + rect.width / 2}px`,
         top: `${rect.bottom + 16}px`,
         style: { transform: "translateX(-50%)" },
         // Exclude this node from the sub menus auto close
-        excludeNode: event.target,
+        excludeNode: event.currentTarget,
       });
     }
   }
diff --git a/src/components/controls/shared/EraseAllButton.tsx b/src/components/controls/shared/EraseAllButton.tsx
new file mode 100644
index 0000000..b502241
--- /dev/null
+++ b/src/components/controls/shared/EraseAllButton.tsx
@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from "react";
+import { Button, IconButton } from "theme-ui";
+
+import EraseAllIcon from "../../../icons/EraseAllIcon";
+import MapMenu from "../../map/MapMenu";
+
+type EraseAllButtonProps = {
+  onToolAction: (action: string) => void;
+  disabled: boolean;
+};
+
+function EraseAllButton({ onToolAction, disabled }: EraseAllButtonProps) {
+  const [isEraseAllConfirmOpen, setIsEraseAllConfirmOpen] = useState(false);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [menuLeft, setMenuLeft] = useState(0);
+  const [menuTop, setMenuTop] = useState(0);
+  useEffect(() => {
+    const button = buttonRef.current;
+    if (isEraseAllConfirmOpen && button) {
+      const rect = button.getBoundingClientRect();
+      setMenuLeft(rect.left + rect.width / 2);
+      setMenuTop(rect.bottom + 8);
+    }
+  }, [isEraseAllConfirmOpen]);
+
+  return (
+    <>
+      <IconButton
+        aria-label="Erase All"
+        title="Erase All"
+        onClick={() => setIsEraseAllConfirmOpen(true)}
+        disabled={disabled}
+        ref={buttonRef}
+      >
+        <EraseAllIcon />
+      </IconButton>
+      <MapMenu
+        isOpen={isEraseAllConfirmOpen}
+        onRequestClose={() => setIsEraseAllConfirmOpen(false)}
+        left={menuLeft}
+        top={menuTop}
+        style={{ transform: "translateX(-50%)" }}
+      >
+        <Button
+          disabled={disabled}
+          onClick={() => {
+            setIsEraseAllConfirmOpen(false);
+            onToolAction("eraseAll");
+          }}
+        >
+          Erase All
+        </Button>
+      </MapMenu>
+    </>
+  );
+}
+
+export default EraseAllButton;
diff --git a/src/components/map/controls/FogCutToggle.js b/src/components/controls/shared/FogCutToggle.tsx
similarity index 71%
rename from src/components/map/controls/FogCutToggle.js
rename to src/components/controls/shared/FogCutToggle.tsx
index d401e59..a99b133 100644
--- a/src/components/map/controls/FogCutToggle.js
+++ b/src/components/controls/shared/FogCutToggle.tsx
@@ -1,10 +1,19 @@
-import React from "react";
 import { IconButton } from "theme-ui";
 
 import CutOnIcon from "../../../icons/FogCutOnIcon";
 import CutOffIcon from "../../../icons/FogCutOffIcon";
 
-function FogCutToggle({ useFogCut, onFogCutChange, disabled }) {
+type FogCutToggleProps = {
+  useFogCut: boolean;
+  onFogCutChange: (useFogCut: boolean) => void;
+  disabled?: boolean;
+};
+
+function FogCutToggle({
+  useFogCut,
+  onFogCutChange,
+  disabled,
+}: FogCutToggleProps) {
   return (
     <IconButton
       aria-label={
diff --git a/src/components/map/controls/FogPreviewToggle.js b/src/components/controls/shared/FogPreviewToggle.tsx
similarity index 73%
rename from src/components/map/controls/FogPreviewToggle.js
rename to src/components/controls/shared/FogPreviewToggle.tsx
index d58e15b..fb1543f 100644
--- a/src/components/map/controls/FogPreviewToggle.js
+++ b/src/components/controls/shared/FogPreviewToggle.tsx
@@ -1,10 +1,17 @@
-import React from "react";
 import { IconButton } from "theme-ui";
 
 import PreviewOnIcon from "../../../icons/FogPreviewOnIcon";
 import PreviewOffIcon from "../../../icons/FogPreviewOffIcon";
 
-function FogPreviewToggle({ useFogPreview, onFogPreviewChange }) {
+type FogPreviewToggleProps = {
+  useFogPreview: boolean;
+  onFogPreviewChange: (useFogCut: boolean) => void;
+};
+
+function FogPreviewToggle({
+  useFogPreview,
+  onFogPreviewChange,
+}: FogPreviewToggleProps) {
   return (
     <IconButton
       aria-label={
diff --git a/src/components/map/controls/MultilayerToggle.js b/src/components/controls/shared/MultilayerToggle.tsx
similarity index 71%
rename from src/components/map/controls/MultilayerToggle.js
rename to src/components/controls/shared/MultilayerToggle.tsx
index 590e310..5abd153 100644
--- a/src/components/map/controls/MultilayerToggle.js
+++ b/src/components/controls/shared/MultilayerToggle.tsx
@@ -1,10 +1,19 @@
-import React from "react";
 import { IconButton } from "theme-ui";
 
 import MultilayerOnIcon from "../../../icons/FogMultilayerOnIcon";
 import MultilayerOffIcon from "../../../icons/FogMultilayerOffIcon";
 
-function MultilayerToggle({ multilayer, onMultilayerChange, disabled }) {
+type MultilayerToggleProps = {
+  multilayer: boolean;
+  onMultilayerChange: (multilayer: boolean) => void;
+  disabled?: boolean;
+};
+
+function MultilayerToggle({
+  multilayer,
+  onMultilayerChange,
+  disabled,
+}: MultilayerToggleProps) {
   return (
     <IconButton
       aria-label={
diff --git a/src/components/map/controls/RedoButton.js b/src/components/controls/shared/RedoButton.tsx
similarity index 73%
rename from src/components/map/controls/RedoButton.js
rename to src/components/controls/shared/RedoButton.tsx
index f784e77..26e953d 100644
--- a/src/components/map/controls/RedoButton.js
+++ b/src/components/controls/shared/RedoButton.tsx
@@ -5,7 +5,12 @@ import RedoIcon from "../../../icons/RedoIcon";
 
 import { isMacLike } from "../../../helpers/shared";
 
-function RedoButton({ onClick, disabled }) {
+type RedoButtonProps = {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+};
+
+function RedoButton({ onClick, disabled }: RedoButtonProps) {
   return (
     <IconButton
       title={`Redo (${isMacLike ? "Cmd" : "Ctrl"} + Shift + Z)`}
diff --git a/src/components/controls/shared/ShapeFillToggle.tsx b/src/components/controls/shared/ShapeFillToggle.tsx
new file mode 100644
index 0000000..eafb51e
--- /dev/null
+++ b/src/components/controls/shared/ShapeFillToggle.tsx
@@ -0,0 +1,28 @@
+import { IconButton } from "theme-ui";
+
+import ShapeFillOnIcon from "../../../icons/ShapeFillOnIcon";
+import ShapeFillOffIcon from "../../../icons/ShapeFillOffIcon";
+
+type ShapeFillToggleProps = {
+  useShapeFill: boolean;
+  onShapeFillChange: (useShapeFill: boolean) => void;
+};
+
+function ShapeFillToggle({
+  useShapeFill,
+  onShapeFillChange,
+}: ShapeFillToggleProps) {
+  return (
+    <IconButton
+      aria-label={
+        useShapeFill ? "Disable Shape Fill (G)" : "Enable Shape Fill (G)"
+      }
+      title={useShapeFill ? "Disable Shape Fill (G)" : "Enable Shape Fill (G)"}
+      onClick={() => onShapeFillChange(!useShapeFill)}
+    >
+      {useShapeFill ? <ShapeFillOnIcon /> : <ShapeFillOffIcon />}
+    </IconButton>
+  );
+}
+
+export default ShapeFillToggle;
diff --git a/src/components/map/controls/ToolSection.js b/src/components/controls/shared/ToolSection.tsx
similarity index 74%
rename from src/components/map/controls/ToolSection.js
rename to src/components/controls/shared/ToolSection.tsx
index 25b37a4..fbf5a01 100644
--- a/src/components/map/controls/ToolSection.js
+++ b/src/components/controls/shared/ToolSection.tsx
@@ -3,10 +3,24 @@ import { Box, Flex } from "theme-ui";
 
 import RadioIconButton from "../../RadioIconButton";
 
+export type Tool = {
+  id: string;
+  title: string;
+  isSelected: boolean;
+  icon: React.ReactNode;
+  disabled?: boolean;
+};
+
+type ToolSectionProps = {
+  collapse: boolean;
+  tools: Tool[];
+  onToolClick: (tool: Tool) => void;
+};
+
 // Section of map tools with the option to collapse into a vertical list
-function ToolSection({ collapse, tools, onToolClick }) {
+function ToolSection({ collapse, tools, onToolClick }: ToolSectionProps) {
   const [showMore, setShowMore] = useState(false);
-  const [collapsedTool, setCollapsedTool] = useState();
+  const [collapsedTool, setCollapsedTool] = useState<Tool>();
 
   useEffect(() => {
     const selectedTool = tools.find((tool) => tool.isSelected);
@@ -20,7 +34,7 @@ function ToolSection({ collapse, tools, onToolClick }) {
     }
   }, [tools]);
 
-  function handleToolClick(tool) {
+  function handleToolClick(tool: Tool) {
     if (collapse && tool.isSelected) {
       setShowMore(!showMore);
     } else if (collapse && !tool.isSelected) {
@@ -29,7 +43,7 @@ function ToolSection({ collapse, tools, onToolClick }) {
     onToolClick(tool);
   }
 
-  function renderTool(tool) {
+  function renderTool(tool: Tool) {
     return (
       <RadioIconButton
         title={tool.title}
@@ -85,17 +99,21 @@ function ToolSection({ collapse, tools, onToolClick }) {
       </Box>
     );
   } else {
-    return tools.map((tool) => (
-      <RadioIconButton
-        title={tool.title}
-        onClick={() => handleToolClick(tool)}
-        key={tool.id}
-        isSelected={tool.isSelected}
-        disabled={tool.disabled}
-      >
-        {tool.icon}
-      </RadioIconButton>
-    ));
+    return (
+      <>
+        {tools.map((tool) => (
+          <RadioIconButton
+            title={tool.title}
+            onClick={() => handleToolClick(tool)}
+            key={tool.id}
+            isSelected={tool.isSelected}
+            disabled={tool.disabled}
+          >
+            {tool.icon}
+          </RadioIconButton>
+        ))}
+      </>
+    );
   }
 }
 
diff --git a/src/components/map/controls/UndoButton.js b/src/components/controls/shared/UndoButton.tsx
similarity index 72%
rename from src/components/map/controls/UndoButton.js
rename to src/components/controls/shared/UndoButton.tsx
index 93232d7..f223c7c 100644
--- a/src/components/map/controls/UndoButton.js
+++ b/src/components/controls/shared/UndoButton.tsx
@@ -5,7 +5,12 @@ import UndoIcon from "../../../icons/UndoIcon";
 
 import { isMacLike } from "../../../helpers/shared";
 
-function UndoButton({ onClick, disabled }) {
+type UndoButtonProps = {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+};
+
+function UndoButton({ onClick, disabled }: UndoButtonProps) {
   return (
     <IconButton
       title={`Undo (${isMacLike ? "Cmd" : "Ctrl"} + Z)`}
diff --git a/src/components/dice/DiceButton.js b/src/components/dice/DiceButton.tsx
similarity index 58%
rename from src/components/dice/DiceButton.js
rename to src/components/dice/DiceButton.tsx
index 45c9d74..c9b8ab1 100644
--- a/src/components/dice/DiceButton.js
+++ b/src/components/dice/DiceButton.tsx
@@ -3,7 +3,21 @@ import { IconButton } from "theme-ui";
 
 import Count from "./DiceButtonCount";
 
-function DiceButton({ title, children, count, onClick, disabled }) {
+type DiceButtonProps = {
+  title: string;
+  children: React.ReactNode;
+  count?: number;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  disabled: boolean;
+};
+
+function DiceButton({
+  title,
+  children,
+  count,
+  onClick,
+  disabled,
+}: DiceButtonProps) {
   return (
     <IconButton
       title={title}
diff --git a/src/components/dice/DiceButtonCount.js b/src/components/dice/DiceButtonCount.tsx
similarity index 87%
rename from src/components/dice/DiceButtonCount.js
rename to src/components/dice/DiceButtonCount.tsx
index 4b17aac..fdf25b6 100644
--- a/src/components/dice/DiceButtonCount.js
+++ b/src/components/dice/DiceButtonCount.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, Text } from "theme-ui";
 
-function DiceButtonCount({ children }) {
+function DiceButtonCount({ children }: { children: React.ReactNode }) {
   return (
     <Box
       sx={{
diff --git a/src/components/dice/DiceButtons.js b/src/components/dice/DiceButtons.tsx
similarity index 82%
rename from src/components/dice/DiceButtons.js
rename to src/components/dice/DiceButtons.tsx
index f966113..fbad44b 100644
--- a/src/components/dice/DiceButtons.js
+++ b/src/components/dice/DiceButtons.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Flex, IconButton, Box } from "theme-ui";
 import SimpleBar from "simplebar-react";
 
@@ -18,9 +18,25 @@ import SelectDiceButton from "./SelectDiceButton";
 
 import Divider from "../Divider";
 
+import Dice from "../../dice/Dice";
+
 import { dice } from "../../dice";
 import useSetting from "../../hooks/useSetting";
 
+import { DefaultDice, DiceRoll, DiceType } from "../../types/Dice";
+import { DiceShareChangeEventHandler } from "../../types/Events";
+
+type DiceButtonsProps = {
+  diceRolls: DiceRoll[];
+  onDiceAdd: (style: typeof Dice, type: DiceType) => void;
+  onDiceLoad: (dice: DefaultDice) => void;
+  diceTraySize: "single" | "double";
+  onDiceTraySizeChange: (newSize: "single" | "double") => void;
+  shareDice: boolean;
+  onShareDiceChange: DiceShareChangeEventHandler;
+  loading: boolean;
+};
+
 function DiceButtons({
   diceRolls,
   onDiceAdd,
@@ -30,29 +46,32 @@ function DiceButtons({
   shareDice,
   onShareDiceChange,
   loading,
-}) {
+}: DiceButtonsProps) {
   const [currentDiceStyle, setCurrentDiceStyle] = useSetting("dice.style");
-  const [currentDice, setCurrentDice] = useState(
-    dice.find((d) => d.key === currentDiceStyle)
+  const [currentDice, setCurrentDice] = useState<DefaultDice>(
+    dice.find((d) => d.key === currentDiceStyle) || dice[0]
   );
 
   useEffect(() => {
     const initialDice = dice.find((d) => d.key === currentDiceStyle);
-    onDiceLoad(initialDice);
-    setCurrentDice(initialDice);
+    if (initialDice) {
+      onDiceLoad(initialDice);
+      setCurrentDice(initialDice);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const diceCounts = {};
+  const diceCounts: Partial<Record<DiceType, number>> = {};
   for (let dice of diceRolls) {
     if (dice.type in diceCounts) {
-      diceCounts[dice.type] += 1;
+      // TODO: Check type
+      diceCounts[dice.type]! += 1;
     } else {
       diceCounts[dice.type] = 1;
     }
   }
 
-  async function handleDiceChange(dice) {
+  async function handleDiceChange(dice: DefaultDice) {
     await onDiceLoad(dice);
     setCurrentDice(dice);
     setCurrentDiceStyle(dice.key);
diff --git a/src/components/dice/DiceInteraction.js b/src/components/dice/DiceInteraction.tsx
similarity index 66%
rename from src/components/dice/DiceInteraction.js
rename to src/components/dice/DiceInteraction.tsx
index 26c1090..26adb41 100644
--- a/src/components/dice/DiceInteraction.js
+++ b/src/components/dice/DiceInteraction.tsx
@@ -1,10 +1,10 @@
-import React, { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState } from "react";
 import { Engine } from "@babylonjs/core/Engines/engine";
 import { Scene } from "@babylonjs/core/scene";
 import { Vector3, Color4, Matrix } from "@babylonjs/core/Maths/math";
 import { AmmoJSPlugin } from "@babylonjs/core/Physics/Plugins/ammoJSPlugin";
 import { TargetCamera } from "@babylonjs/core/Cameras/targetCamera";
-import * as AMMO from "ammo.js";
+import Ammo from "ammo.js";
 
 import "@babylonjs/core/Physics/physicsEngineComponent";
 import "@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent";
@@ -19,20 +19,44 @@ import ReactResizeDetector from "react-resize-detector";
 import usePreventTouch from "../../hooks/usePreventTouch";
 
 import ErrorBanner from "../banner/ErrorBanner";
+import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
 
 const diceThrowSpeed = 2;
 
-function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
-  const [error, setError] = useState();
+type SceneMountEvent = {
+  scene: Scene;
+  engine: Engine;
+  canvas: HTMLCanvasElement;
+};
 
-  const sceneRef = useRef();
-  const engineRef = useRef();
-  const canvasRef = useRef();
-  const containerRef = useRef();
+type SceneMountEventHandler = (event: SceneMountEvent) => void;
+
+type DiceInteractionProps = {
+  onSceneMount?: SceneMountEventHandler;
+  onPointerDown: () => void;
+  onPointerUp: () => void;
+};
+
+function DiceInteraction({
+  onSceneMount,
+  onPointerDown,
+  onPointerUp,
+}: DiceInteractionProps) {
+  const [error, setError] = useState<Error | undefined>();
+
+  const sceneRef = useRef<Scene>();
+  const engineRef = useRef<Engine>();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    const canvas = canvasRef.current;
+
+    if (!canvas) {
+      return;
+    }
+
     try {
-      const canvas = canvasRef.current;
       const engine = new Engine(canvas, true, {
         preserveDrawingBuffer: true,
         stencil: true,
@@ -40,10 +64,9 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
       const scene = new Scene(engine);
       scene.clearColor = new Color4(0, 0, 0, 0);
       // Enable physics
-      scene.enablePhysics(
-        new Vector3(0, -98, 0),
-        new AmmoJSPlugin(false, AMMO)
-      );
+      Ammo().then(() => {
+        scene.enablePhysics(new Vector3(0, -98, 0), new AmmoJSPlugin(false));
+      });
 
       let camera = new TargetCamera("camera", new Vector3(0, 33.5, 0), scene);
       camera.fov = 0.65;
@@ -86,21 +109,27 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
     }
   }, [onSceneMount]);
 
-  const selectedMeshRef = useRef();
-  const selectedMeshVelocityWindowRef = useRef([]);
+  const selectedMeshRef = useRef<AbstractMesh | null>(null);
+  const selectedMeshVelocityWindowRef = useRef<Vector3[]>([]);
   const selectedMeshVelocityWindowSize = 4;
-  const selectedMeshMassRef = useRef();
+  const selectedMeshMassRef = useRef<number>(0);
   function handlePointerDown() {
     const scene = sceneRef.current;
     if (scene) {
       const pickInfo = scene.pick(scene.pointerX, scene.pointerY);
-      if (pickInfo.hit && pickInfo.pickedMesh.name !== "dice_tray") {
-        pickInfo.pickedMesh.physicsImpostor.setLinearVelocity(Vector3.Zero());
-        pickInfo.pickedMesh.physicsImpostor.setAngularVelocity(Vector3.Zero());
+      if (
+        pickInfo &&
+        pickInfo.hit &&
+        pickInfo.pickedMesh &&
+        pickInfo.pickedMesh.name !== "dice_tray"
+      ) {
+        pickInfo.pickedMesh.physicsImpostor?.setLinearVelocity(Vector3.Zero());
+        pickInfo.pickedMesh.physicsImpostor?.setAngularVelocity(Vector3.Zero());
 
         // Save the meshes mass and set it to 0 so we can pick it up
-        selectedMeshMassRef.current = pickInfo.pickedMesh.physicsImpostor.mass;
-        pickInfo.pickedMesh.physicsImpostor.setMass(0);
+        selectedMeshMassRef.current =
+          pickInfo.pickedMesh.physicsImpostor?.mass || 0;
+        pickInfo.pickedMesh.physicsImpostor?.setMass(0);
 
         selectedMeshRef.current = pickInfo.pickedMesh;
       }
@@ -123,27 +152,29 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
       }
 
       // Re-apply the meshes mass
-      selectedMesh.physicsImpostor.setMass(selectedMeshMassRef.current);
-      selectedMesh.physicsImpostor.forceUpdate();
+      selectedMesh.physicsImpostor?.setMass(selectedMeshMassRef.current);
+      selectedMesh.physicsImpostor?.forceUpdate();
 
-      selectedMesh.physicsImpostor.applyImpulse(
+      selectedMesh.physicsImpostor?.applyImpulse(
         velocity.scale(diceThrowSpeed * selectedMesh.physicsImpostor.mass),
         selectedMesh.physicsImpostor.getObjectCenter()
       );
     }
     selectedMeshRef.current = null;
     selectedMeshVelocityWindowRef.current = [];
-    selectedMeshMassRef.current = null;
+    selectedMeshMassRef.current = 0;
 
     onPointerUp();
   }
 
-  function handleResize(width, height) {
-    const engine = engineRef.current;
-    if (engine) {
-      engine.resize();
-      canvasRef.current.width = width;
-      canvasRef.current.height = height;
+  function handleResize(width?: number, height?: number) {
+    if (width && height) {
+      const engine = engineRef.current;
+      if (engine && canvasRef.current) {
+        engine.resize();
+        canvasRef.current.width = width;
+        canvasRef.current.height = height;
+      }
     }
   }
 
@@ -159,7 +190,12 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
       }}
       ref={containerRef}
     >
-      <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+      <ReactResizeDetector
+        handleWidth
+        handleHeight
+        onResize={handleResize}
+        targetRef={containerRef}
+      >
         <canvas
           onPointerDown={handlePointerDown}
           onPointerUp={handlePointerUp}
@@ -169,7 +205,7 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
           style={{ outline: "none" }}
         />
       </ReactResizeDetector>
-      <ErrorBanner error={error} onRequestClose={() => setError()} />
+      <ErrorBanner error={error} onRequestClose={() => setError(undefined)} />
     </div>
   );
 }
diff --git a/src/components/dice/DiceResults.js b/src/components/dice/DiceResults.tsx
similarity index 90%
rename from src/components/dice/DiceResults.js
rename to src/components/dice/DiceResults.tsx
index c0f1965..0613b93 100644
--- a/src/components/dice/DiceResults.js
+++ b/src/components/dice/DiceResults.tsx
@@ -5,17 +5,28 @@ import ClearDiceIcon from "../../icons/ClearDiceIcon";
 import RerollDiceIcon from "../../icons/RerollDiceIcon";
 
 import { getDiceRollTotal } from "../../helpers/dice";
+import { DiceRoll } from "../../types/Dice";
 
 const maxDiceRollsShown = 6;
 
-function DiceResults({ diceRolls, onDiceClear, onDiceReroll }) {
+type DiceResultsProps = {
+  diceRolls: DiceRoll[];
+  onDiceClear: () => void;
+  onDiceReroll: () => void;
+};
+
+function DiceResults({
+  diceRolls,
+  onDiceClear,
+  onDiceReroll,
+}: DiceResultsProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
   if (diceRolls.length === 0) {
     return null;
   }
 
-  let rolls = [];
+  let rolls: React.ReactChild[] = [];
   if (diceRolls.length > 1) {
     rolls = diceRolls
       .filter((dice) => dice.roll !== "unknown")
diff --git a/src/components/dice/DiceTile.js b/src/components/dice/DiceTile.tsx
similarity index 57%
rename from src/components/dice/DiceTile.js
rename to src/components/dice/DiceTile.tsx
index b9e1eb1..1048938 100644
--- a/src/components/dice/DiceTile.js
+++ b/src/components/dice/DiceTile.tsx
@@ -1,9 +1,17 @@
-import React from "react";
 import { Image } from "theme-ui";
 
 import Tile from "../tile/Tile";
 
-function DiceTile({ dice, isSelected, onDiceSelect, onDone }) {
+import { DefaultDice } from "../../types/Dice";
+
+type DiceTileProps = {
+  dice: DefaultDice;
+  isSelected: boolean;
+  onDiceSelect: (dice: DefaultDice) => void;
+  onDone: (dice: DefaultDice) => void;
+};
+
+function DiceTile({ dice, isSelected, onDiceSelect, onDone }: DiceTileProps) {
   return (
     <div style={{ cursor: "pointer" }}>
       <Tile
diff --git a/src/components/dice/DiceTiles.js b/src/components/dice/DiceTiles.tsx
similarity index 71%
rename from src/components/dice/DiceTiles.js
rename to src/components/dice/DiceTiles.tsx
index 671848b..33a9086 100644
--- a/src/components/dice/DiceTiles.js
+++ b/src/components/dice/DiceTiles.tsx
@@ -1,12 +1,25 @@
-import React from "react";
 import { Grid } from "theme-ui";
 import SimpleBar from "simplebar-react";
 
 import DiceTile from "./DiceTile";
 
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
+import { DefaultDice } from "../../types/Dice";
+import { DiceSelectEventHandler } from "../../types/Events";
 
-function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
+type DiceTileProps = {
+  dice: DefaultDice[];
+  onDiceSelect: DiceSelectEventHandler;
+  selectedDice: DefaultDice;
+  onDone: DiceSelectEventHandler;
+};
+
+function DiceTiles({
+  dice,
+  onDiceSelect,
+  selectedDice,
+  onDone,
+}: DiceTileProps) {
   const layout = useResponsiveLayout();
 
   return (
@@ -29,7 +42,6 @@ function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
             isSelected={selectedDice && dice.key === selectedDice.key}
             onDiceSelect={onDiceSelect}
             onDone={onDone}
-            size={layout.tileSize}
           />
         ))}
       </Grid>
diff --git a/src/components/dice/DiceTrayOverlay.js b/src/components/dice/DiceTrayOverlay.tsx
similarity index 81%
rename from src/components/dice/DiceTrayOverlay.js
rename to src/components/dice/DiceTrayOverlay.tsx
index 62028a3..a1294d1 100644
--- a/src/components/dice/DiceTrayOverlay.js
+++ b/src/components/dice/DiceTrayOverlay.tsx
@@ -1,10 +1,12 @@
-import React, { useRef, useCallback, useEffect, useState } from "react";
+import { useRef, useCallback, useEffect, useState } from "react";
 import { Vector3 } from "@babylonjs/core/Maths/math";
 import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
 import { ShadowGenerator } from "@babylonjs/core/Lights/Shadows/shadowGenerator";
 import { CubeTexture } from "@babylonjs/core/Materials/Textures/cubeTexture";
+import { Scene } from "@babylonjs/core";
 import { Box } from "theme-ui";
 
+// @ts-ignore
 import environment from "../../dice/environment.dds";
 
 import DiceInteraction from "./DiceInteraction";
@@ -18,25 +20,41 @@ import DiceTray from "../../dice/diceTray/DiceTray";
 import { useDiceLoading } from "../../contexts/DiceLoadingContext";
 
 import { getDiceRoll } from "../../helpers/dice";
+
 import useSetting from "../../hooks/useSetting";
 
+import { DefaultDice, DiceMesh, DiceRoll, DiceType } from "../../types/Dice";
+import {
+  DiceRollsChangeEventHandler,
+  DiceShareChangeEventHandler,
+} from "../../types/Events";
+
+type DiceTrayOverlayProps = {
+  isOpen: boolean;
+  shareDice: boolean;
+  onShareDiceChange: DiceShareChangeEventHandler;
+  diceRolls: DiceRoll[];
+  onDiceRollsChange: DiceRollsChangeEventHandler;
+};
+
 function DiceTrayOverlay({
   isOpen,
   shareDice,
-  onShareDiceChage,
+  onShareDiceChange,
   diceRolls,
   onDiceRollsChange,
-}) {
-  const sceneRef = useRef();
-  const shadowGeneratorRef = useRef();
-  const diceRefs = useRef([]);
+}: DiceTrayOverlayProps) {
+  const sceneRef = useRef<Scene>();
+  const shadowGeneratorRef = useRef<ShadowGenerator>();
+  const diceRefs = useRef<DiceMesh[]>([]);
   const sceneVisibleRef = useRef(false);
   const sceneInteractionRef = useRef(false);
   // Add to the counter to ingore sleep values
   const sceneKeepAwakeRef = useRef(0);
-  const diceTrayRef = useRef();
+  const diceTrayRef = useRef<DiceTray>();
 
-  const [diceTraySize, setDiceTraySize] = useState("single");
+  const [diceTraySize, setDiceTraySize] =
+    useState<"single" | "double">("single");
   const { assetLoadStart, assetLoadFinish, isLoading } = useDiceLoading();
   const [fullScreen] = useSetting("map.fullScreen");
 
@@ -50,7 +68,7 @@ function DiceTrayOverlay({
   }
 
   // Forces rendering for 1 second
-  function forceRender() {
+  function forceRender(): () => void {
     // Force rerender
     sceneKeepAwakeRef.current++;
     let triggered = false;
@@ -97,7 +115,7 @@ function DiceTrayOverlay({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  async function initializeScene(scene) {
+  async function initializeScene(scene: Scene) {
     handleAssetLoadStart();
     let light = new DirectionalLight(
       "DirectionalLight",
@@ -124,16 +142,14 @@ function DiceTrayOverlay({
     handleAssetLoadFinish();
   }
 
-  function update(scene) {
-    function getDiceSpeed(dice) {
-      const diceSpeed = dice.instance.physicsImpostor
-        .getLinearVelocity()
-        .length();
+  function update(scene: Scene) {
+    function getDiceSpeed(dice: DiceMesh) {
+      const diceSpeed =
+        dice.instance.physicsImpostor?.getLinearVelocity()?.length() || 0;
       // If the dice is a d100 check the d10 as well
-      if (dice.type === "d100") {
-        const d10Speed = dice.d10Instance.physicsImpostor
-          .getLinearVelocity()
-          .length();
+      if (dice.d10Instance) {
+        const d10Speed =
+          dice.d10Instance.physicsImpostor?.getLinearVelocity()?.length() || 0;
         return Math.max(diceSpeed, d10Speed);
       } else {
         return diceSpeed;
@@ -157,14 +173,14 @@ function DiceTrayOverlay({
       const dice = die[i];
       const speed = getDiceSpeed(dice);
       // If the speed has been below 0.01 for 1s set dice to sleep
-      if (speed < 0.01 && !dice.sleepTimout) {
-        dice.sleepTimout = setTimeout(() => {
+      if (speed < 0.01 && !dice.sleepTimeout) {
+        dice.sleepTimeout = setTimeout(() => {
           dice.asleep = true;
         }, 1000);
-      } else if (speed > 0.5 && (dice.asleep || dice.sleepTimout)) {
+      } else if (speed > 0.5 && (dice.asleep || dice.sleepTimeout)) {
         dice.asleep = false;
-        clearTimeout(dice.sleepTimout);
-        dice.sleepTimout = null;
+        dice.sleepTimeout && clearTimeout(dice.sleepTimeout);
+        dice.sleepTimeout = undefined;
       }
     }
 
@@ -173,14 +189,14 @@ function DiceTrayOverlay({
     }
   }
 
-  function handleDiceAdd(style, type) {
+  function handleDiceAdd(style: typeof Dice, type: DiceType) {
     const scene = sceneRef.current;
     const shadowGenerator = shadowGeneratorRef.current;
     if (scene && shadowGenerator) {
       const instance = style.createInstance(type, scene);
       shadowGenerator.addShadowCaster(instance);
-      Dice.roll(instance);
-      let dice = { type, instance, asleep: false };
+      style.roll(instance);
+      let dice: DiceMesh = { type, instance, asleep: false };
       // If we have a d100 add a d10 as well
       if (type === "d100") {
         const d10Instance = style.createInstance("d10", scene);
@@ -196,7 +212,7 @@ function DiceTrayOverlay({
     const die = diceRefs.current;
     for (let dice of die) {
       dice.instance.dispose();
-      if (dice.type === "d100") {
+      if (dice.d10Instance) {
         dice.d10Instance.dispose();
       }
     }
@@ -208,14 +224,14 @@ function DiceTrayOverlay({
     const die = diceRefs.current;
     for (let dice of die) {
       Dice.roll(dice.instance);
-      if (dice.type === "d100") {
+      if (dice.d10Instance) {
         Dice.roll(dice.d10Instance);
       }
       dice.asleep = false;
     }
   }
 
-  async function handleDiceLoad(dice) {
+  async function handleDiceLoad(dice: DefaultDice) {
     handleAssetLoadStart();
     const scene = sceneRef.current;
     if (scene) {
@@ -230,10 +246,13 @@ function DiceTrayOverlay({
   });
 
   useEffect(() => {
-    let renderTimeout;
-    let renderCleanup;
+    let renderTimeout: NodeJS.Timeout;
+    let renderCleanup: () => void;
     function handleResize() {
       const map = document.querySelector(".map");
+      if (!map) {
+        return;
+      }
       const mapRect = map.getBoundingClientRect();
 
       const availableWidth = mapRect.width - 108; // Subtract padding
@@ -283,7 +302,7 @@ function DiceTrayOverlay({
         return;
       }
 
-      let newRolls = [];
+      let newRolls: DiceRoll[] = [];
       for (let i = 0; i < die.length; i++) {
         const dice = die[i];
         let roll = getDiceRoll(dice);
@@ -345,7 +364,7 @@ function DiceTrayOverlay({
         onDiceTraySizeChange={setDiceTraySize}
         diceTraySize={diceTraySize}
         shareDice={shareDice}
-        onShareDiceChange={onShareDiceChage}
+        onShareDiceChange={onShareDiceChange}
         loading={isLoading}
       />
       {isLoading && (
diff --git a/src/components/dice/SelectDiceButton.js b/src/components/dice/SelectDiceButton.tsx
similarity index 66%
rename from src/components/dice/SelectDiceButton.js
rename to src/components/dice/SelectDiceButton.tsx
index f5c9fda..02c30fa 100644
--- a/src/components/dice/SelectDiceButton.js
+++ b/src/components/dice/SelectDiceButton.tsx
@@ -1,10 +1,22 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { IconButton } from "theme-ui";
 
 import SelectDiceIcon from "../../icons/SelectDiceIcon";
 import SelectDiceModal from "../../modals/SelectDiceModal";
 
-function SelectDiceButton({ onDiceChange, currentDice, disabled }) {
+import { DefaultDice } from "../../types/Dice";
+
+type SelectDiceButtonProps = {
+  onDiceChange: (dice: DefaultDice) => void;
+  currentDice: DefaultDice;
+  disabled: boolean;
+};
+
+function SelectDiceButton({
+  onDiceChange,
+  currentDice,
+  disabled,
+}: SelectDiceButtonProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   function openModal() {
@@ -14,7 +26,7 @@ function SelectDiceButton({ onDiceChange, currentDice, disabled }) {
     setIsModalOpen(false);
   }
 
-  function handleDone(dice) {
+  function handleDone(dice: DefaultDice) {
     onDiceChange(dice);
     closeModal();
   }
@@ -39,4 +51,8 @@ function SelectDiceButton({ onDiceChange, currentDice, disabled }) {
   );
 }
 
+SelectDiceButton.defaultProps = {
+  disabled: false,
+};
+
 export default SelectDiceButton;
diff --git a/src/components/drag/Draggable.js b/src/components/drag/Draggable.tsx
similarity index 69%
rename from src/components/drag/Draggable.js
rename to src/components/drag/Draggable.tsx
index e138e94..cb0858b 100644
--- a/src/components/drag/Draggable.js
+++ b/src/components/drag/Draggable.tsx
@@ -1,7 +1,14 @@
 import React from "react";
 import { useDraggable } from "@dnd-kit/core";
+import { Data } from "@dnd-kit/core/dist/store/types";
 
-function Draggable({ id, children, data }) {
+type DraggableProps = {
+  id: string;
+  children: React.ReactNode;
+  data?: Data;
+};
+
+function Draggable({ id, children, data }: DraggableProps) {
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id,
     data,
diff --git a/src/components/drag/Droppable.js b/src/components/drag/Droppable.tsx
similarity index 62%
rename from src/components/drag/Droppable.js
rename to src/components/drag/Droppable.tsx
index d11d00f..3213e6e 100644
--- a/src/components/drag/Droppable.js
+++ b/src/components/drag/Droppable.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 import { useDroppable } from "@dnd-kit/core";
 
-function Droppable({ id, children, disabled, ...props }) {
+type DroppableProps = React.HTMLAttributes<HTMLDivElement> & {
+  id: string;
+  disabled: boolean;
+};
+
+function Droppable({ id, children, disabled, ...props }: DroppableProps) {
   const { setNodeRef } = useDroppable({ id, disabled });
 
   return (
diff --git a/src/components/image/GlobalImageDrop.js b/src/components/image/GlobalImageDrop.tsx
similarity index 66%
rename from src/components/image/GlobalImageDrop.js
rename to src/components/image/GlobalImageDrop.tsx
index f36ad2f..d495f8d 100644
--- a/src/components/image/GlobalImageDrop.js
+++ b/src/components/image/GlobalImageDrop.tsx
@@ -20,9 +20,23 @@ import { useTokenData } from "../../contexts/TokenDataContext";
 import { useAssets } from "../../contexts/AssetsContext";
 import { useMapStage } from "../../contexts/MapStageContext";
 
-import useImageDrop from "../../hooks/useImageDrop";
+import useImageDrop, { ImageDropEvent } from "../../hooks/useImageDrop";
 
-function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
+import { Map } from "../../types/Map";
+import { MapState } from "../../types/MapState";
+import { TokenState } from "../../types/TokenState";
+
+type GlobalImageDropProps = {
+  children?: React.ReactNode;
+  onMapChange: (map: Map, mapState: MapState) => void;
+  onMapTokensStateCreate: (states: TokenState[]) => void;
+};
+
+function GlobalImageDrop({
+  children,
+  onMapChange,
+  onMapTokensStateCreate,
+}: GlobalImageDropProps) {
   const { addToast } = useToasts();
 
   const userId = useUserId();
@@ -32,17 +46,15 @@ function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
 
   const mapStageRef = useMapStage();
 
-  const [isLargeImageWarningModalOpen, setShowLargeImageWarning] = useState(
-    false
-  );
+  const [isLargeImageWarningModalOpen, setShowLargeImageWarning] =
+    useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const droppedImagesRef = useRef();
-  const dropPositionRef = useRef();
-  // maps or tokens
-  const [droppingType, setDroppingType] = useState("maps");
+  const droppedImagesRef = useRef<File[]>();
+  const dropPositionRef = useRef<Vector2>();
+  const [droppingType, setDroppingType] = useState<"maps" | "tokens">("maps");
 
-  async function handleDrop(files, dropPosition) {
+  async function handleDrop({ files, dropPosition }: ImageDropEvent) {
     if (navigator.storage) {
       // Attempt to enable persistant storage
       await navigator.storage.persist();
@@ -87,55 +99,65 @@ function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
   }
 
   async function handleMaps() {
-    setIsLoading(true);
-    let maps = [];
-    for (let file of droppedImagesRef.current) {
-      const { map, assets } = await createMapFromFile(file, userId);
-      await addMap(map);
-      await addAssets(assets);
-      maps.push(map);
-    }
+    if (droppedImagesRef.current && userId) {
+      setIsLoading(true);
+      let maps = [];
+      for (let file of droppedImagesRef.current) {
+        const { map, assets } = await createMapFromFile(file, userId);
+        await addMap(map);
+        await addAssets(assets);
+        maps.push(map);
+      }
 
-    // Change map if only 1 dropped
-    if (maps.length === 1) {
-      const mapState = await getMapState(maps[0].id);
-      onMapChange(maps[0], mapState);
-    }
+      // Change map if only 1 dropped
+      if (maps.length === 1) {
+        const mapState = await getMapState(maps[0].id);
+        if (mapState) {
+          onMapChange(maps[0], mapState);
+        }
+      }
 
-    setIsLoading(false);
-    droppedImagesRef.current = undefined;
+      setIsLoading(false);
+      droppedImagesRef.current = undefined;
+    }
   }
 
   async function handleTokens() {
-    setIsLoading(true);
-    // Keep track of tokens so we can add them to the map
-    let tokens = [];
-    for (let file of droppedImagesRef.current) {
-      const { token, assets } = await createTokenFromFile(file, userId);
-      await addToken(token);
-      await addAssets(assets);
-      tokens.push(token);
-    }
-    setIsLoading(false);
-    droppedImagesRef.current = undefined;
+    if (droppedImagesRef.current && userId) {
+      setIsLoading(true);
+      // Keep track of tokens so we can add them to the map
+      let tokens = [];
+      for (let file of droppedImagesRef.current) {
+        const { token, assets } = await createTokenFromFile(file, userId);
+        await addToken(token);
+        await addAssets(assets);
+        tokens.push(token);
+      }
+      setIsLoading(false);
+      droppedImagesRef.current = undefined;
 
-    const dropPosition = dropPositionRef.current;
-    const mapStage = mapStageRef.current;
-    if (mapStage && dropPosition) {
-      const mapPosition = clientPositionToMapPosition(mapStage, dropPosition);
-      if (mapPosition) {
-        let tokenStates = [];
-        let offset = new Vector2(0, 0);
-        for (let token of tokens) {
-          if (token) {
-            tokenStates.push(
-              createTokenState(token, Vector2.add(mapPosition, offset), userId)
-            );
-            offset = Vector2.add(offset, 0.01);
+      const dropPosition = dropPositionRef.current;
+      const mapStage = mapStageRef.current;
+      if (mapStage && dropPosition) {
+        const mapPosition = clientPositionToMapPosition(mapStage, dropPosition);
+        if (mapPosition) {
+          let tokenStates = [];
+          let offset = new Vector2(0, 0);
+          for (let token of tokens) {
+            if (token) {
+              tokenStates.push(
+                createTokenState(
+                  token,
+                  Vector2.add(mapPosition, offset),
+                  userId
+                )
+              );
+              offset = Vector2.add(offset, 0.01);
+            }
+          }
+          if (tokenStates.length > 0) {
+            onMapTokensStateCreate(tokenStates);
           }
-        }
-        if (tokenStates.length > 0) {
-          onMapTokensStateCreate(tokenStates);
         }
       }
     }
@@ -149,9 +171,8 @@ function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
     setDroppingType("tokens");
   }
 
-  const { dragging, containerListeners, overlayListeners } = useImageDrop(
-    handleDrop
-  );
+  const { dragging, containerListeners, overlayListeners } =
+    useImageDrop(handleDrop);
 
   return (
     <Flex sx={{ height: "100%", flexGrow: 1 }} {...containerListeners}>
diff --git a/src/components/image/ImageDrop.js b/src/components/image/ImageDrop.tsx
similarity index 66%
rename from src/components/image/ImageDrop.js
rename to src/components/image/ImageDrop.tsx
index d46e14f..bab2c21 100644
--- a/src/components/image/ImageDrop.js
+++ b/src/components/image/ImageDrop.tsx
@@ -1,12 +1,17 @@
 import React from "react";
 import { Box, Flex, Text } from "theme-ui";
 
-import useImageDrop from "../../hooks/useImageDrop";
+import useImageDrop, { ImageDropEvent } from "../../hooks/useImageDrop";
 
-function ImageDrop({ onDrop, dropText, children }) {
-  const { dragging, containerListeners, overlayListeners } = useImageDrop(
-    onDrop
-  );
+type ImageDropProps = {
+  onDrop: (event: ImageDropEvent) => void;
+  dropText: string;
+  children?: React.ReactNode;
+};
+
+function ImageDrop({ onDrop, dropText, children }: ImageDropProps) {
+  const { dragging, containerListeners, overlayListeners } =
+    useImageDrop(onDrop);
   return (
     <Box {...containerListeners}>
       {children}
diff --git a/src/components/konva/Drawing.tsx b/src/components/konva/Drawing.tsx
new file mode 100644
index 0000000..897e109
--- /dev/null
+++ b/src/components/konva/Drawing.tsx
@@ -0,0 +1,92 @@
+import Konva from "konva";
+import { Circle, Line, Rect } from "react-konva";
+import {
+  useMapHeight,
+  useMapWidth,
+} from "../../contexts/MapInteractionContext";
+import colors from "../../helpers/colors";
+import { scaleAndFlattenPoints } from "../../helpers/konva";
+import Vector2 from "../../helpers/Vector2";
+
+import { Drawing as DrawingType } from "../../types/Drawing";
+
+type DrawingProps = {
+  drawing: DrawingType;
+} & Konva.ShapeConfig;
+
+function Drawing({ drawing, ...props }: DrawingProps) {
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const mapSize = new Vector2(mapWidth, mapHeight);
+
+  const defaultProps = {
+    fill: colors[drawing.color] || drawing.color,
+    stroke: colors[drawing.color] || drawing.color,
+    opacity: drawing.blend ? 0.5 : 1,
+    id: drawing.id,
+  };
+
+  if (drawing.type === "path") {
+    return (
+      <Line
+        points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
+        tension={0.5}
+        closed={drawing.pathType === "fill"}
+        fillEnabled={drawing.pathType === "fill"}
+        lineCap="round"
+        lineJoin="round"
+        {...defaultProps}
+        {...props}
+      />
+    );
+  } else if (drawing.type === "shape") {
+    if (drawing.shapeType === "rectangle") {
+      return (
+        <Rect
+          x={drawing.data.x * mapWidth}
+          y={drawing.data.y * mapHeight}
+          width={drawing.data.width * mapWidth}
+          height={drawing.data.height * mapHeight}
+          fillEnabled={props.strokeWidth === 0}
+          {...defaultProps}
+          {...props}
+        />
+      );
+    } else if (drawing.shapeType === "circle") {
+      const minSide = mapWidth < mapHeight ? mapWidth : mapHeight;
+      return (
+        <Circle
+          x={drawing.data.x * mapWidth}
+          y={drawing.data.y * mapHeight}
+          radius={drawing.data.radius * minSide}
+          fillEnabled={props.strokeWidth === 0}
+          {...defaultProps}
+          {...props}
+        />
+      );
+    } else if (drawing.shapeType === "triangle") {
+      return (
+        <Line
+          points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
+          closed={true}
+          fillEnabled={props.strokeWidth === 0}
+          {...defaultProps}
+          {...props}
+        />
+      );
+    } else if (drawing.shapeType === "line") {
+      return (
+        <Line
+          points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
+          lineCap="round"
+          {...defaultProps}
+          {...props}
+        />
+      );
+    }
+  }
+
+  return null;
+}
+
+export default Drawing;
diff --git a/src/components/konva/Fog.tsx b/src/components/konva/Fog.tsx
new file mode 100644
index 0000000..28fd92d
--- /dev/null
+++ b/src/components/konva/Fog.tsx
@@ -0,0 +1,143 @@
+import Konva from "konva";
+import { Line } from "react-konva";
+
+import { scaleAndFlattenPoints } from "../../helpers/konva";
+
+import { Fog as FogType } from "../../types/Fog";
+import {
+  useMapHeight,
+  useMapWidth,
+} from "../../contexts/MapInteractionContext";
+import Vector2 from "../../helpers/Vector2";
+
+type FogProps = {
+  fog: FogType;
+} & Konva.LineConfig;
+
+// Holes should be wound in the opposite direction as the containing points array
+function Fog({ fog, opacity, ...props }: FogProps) {
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const mapSize = new Vector2(mapWidth, mapHeight);
+
+  const points = scaleAndFlattenPoints(fog.data.points, mapSize);
+  const holes = fog.data.holes.map((hole) =>
+    scaleAndFlattenPoints(hole, mapSize)
+  );
+
+  // Converted from https://github.com/rfestag/konva/blob/master/src/shapes/Line.ts
+  function drawLine(
+    points: number[],
+    context: Konva.Context,
+    shape: Konva.Line
+  ) {
+    const length = points.length;
+    const tension = shape.tension();
+    const closed = shape.closed();
+    const bezier = shape.bezier();
+
+    if (!length) {
+      return;
+    }
+
+    context.moveTo(points[0], points[1]);
+
+    if (tension !== 0 && length > 4) {
+      const tensionPoints = shape.getTensionPoints();
+      const tensionLength = tensionPoints.length;
+      let n = closed ? 0 : 4;
+
+      if (!closed) {
+        context.quadraticCurveTo(
+          tensionPoints[0],
+          tensionPoints[1],
+          tensionPoints[2],
+          tensionPoints[3]
+        );
+      }
+
+      while (n < tensionLength - 2) {
+        context.bezierCurveTo(
+          tensionPoints[n++],
+          tensionPoints[n++],
+          tensionPoints[n++],
+          tensionPoints[n++],
+          tensionPoints[n++],
+          tensionPoints[n++]
+        );
+      }
+
+      if (!closed) {
+        context.quadraticCurveTo(
+          tensionPoints[tensionLength - 2],
+          tensionPoints[tensionLength - 1],
+          points[length - 2],
+          points[length - 1]
+        );
+      }
+    } else if (bezier) {
+      // no tension but bezier
+      let n = 2;
+
+      while (n < length) {
+        context.bezierCurveTo(
+          points[n++],
+          points[n++],
+          points[n++],
+          points[n++],
+          points[n++],
+          points[n++]
+        );
+      }
+    } else {
+      // no tension
+      for (let n = 2; n < length; n += 2) {
+        context.lineTo(points[n], points[n + 1]);
+      }
+    }
+  }
+
+  // Draw points and holes
+  function sceneFunc(context: Konva.Context, shape: Konva.Line) {
+    const points = shape.points();
+    const closed = shape.closed();
+
+    if (!points.length) {
+      return;
+    }
+
+    context.beginPath();
+    drawLine(points, context, shape);
+
+    context.beginPath();
+    drawLine(points, context, shape);
+
+    // closed e.g. polygons and blobs
+    if (closed) {
+      context.closePath();
+      if (holes && holes.length) {
+        for (let hole of holes) {
+          drawLine(hole, context, shape);
+          context.closePath();
+        }
+      }
+      context.fillStrokeShape(shape);
+    } else {
+      // open e.g. lines and splines
+      context.strokeShape(shape);
+    }
+  }
+
+  return (
+    <Line
+      points={points}
+      closed
+      lineCap="round"
+      lineJoin="round"
+      {...props}
+      sceneFunc={sceneFunc as any}
+    />
+  );
+}
+
+export default Fog;
diff --git a/src/components/Grid.js b/src/components/konva/Grid.tsx
similarity index 58%
rename from src/components/Grid.js
rename to src/components/konva/Grid.tsx
index 8dc3018..2ab410e 100644
--- a/src/components/Grid.js
+++ b/src/components/konva/Grid.tsx
@@ -1,22 +1,21 @@
-import React from "react";
 import { Group, Rect } from "react-konva";
 import useImage from "use-image";
 
-import Vector2 from "../helpers/Vector2";
+import Vector2 from "../../helpers/Vector2";
 
 import {
   useGrid,
   useGridPixelSize,
   useGridOffset,
   useGridCellPixelSize,
-} from "../contexts/GridContext";
+} from "../../contexts/GridContext";
 
-import squarePatternDark from "../images/SquarePatternDark.png";
-import squarePatternLight from "../images/SquarePatternLight.png";
-import hexPatternDark from "../images/HexPatternDark.png";
-import hexPatternLight from "../images/HexPatternLight.png";
+import squarePatternDark from "../../images/SquarePatternDark.png";
+import squarePatternLight from "../../images/SquarePatternLight.png";
+import hexPatternDark from "../../images/HexPatternDark.png";
+import hexPatternLight from "../../images/HexPatternLight.png";
 
-function Grid({ stroke }) {
+function Grid({ stroke }: { stroke: "black" | "white" }) {
   const grid = useGrid();
   const gridPixelSize = useGridPixelSize();
   const gridOffset = useGridOffset();
@@ -45,26 +44,32 @@ function Grid({ stroke }) {
 
   const negativeGridOffset = Vector2.multiply(gridOffset, -1);
 
-  let patternProps = {};
+  let patternProps: Record<any, any> = {};
   if (grid.type === "square") {
     // Square grid pattern is 150 DPI
     const scale = gridCellPixelSize.width / 300;
-    patternProps.fillPatternScaleX = scale;
-    patternProps.fillPatternScaleY = scale;
-    patternProps.fillPatternOffsetX = gridCellPixelSize.width / scale / 2;
-    patternProps.fillPatternOffsetY = gridCellPixelSize.height / scale / 2;
+    if (scale > 0) {
+      patternProps.fillPatternScaleX = scale;
+      patternProps.fillPatternScaleY = scale;
+      patternProps.fillPatternOffsetX = gridCellPixelSize.width / scale / 2;
+      patternProps.fillPatternOffsetY = gridCellPixelSize.height / scale / 2;
+    }
   } else if (grid.type === "hexVertical") {
     // Hex tile pattern is 153 DPI to better fit hex tiles
     const scale = gridCellPixelSize.width / 153;
-    patternProps.fillPatternScaleX = scale;
-    patternProps.fillPatternScaleY = scale;
-    patternProps.fillPatternOffsetY = gridCellPixelSize.radius / scale / 2;
+    if (scale > 0) {
+      patternProps.fillPatternScaleX = scale;
+      patternProps.fillPatternScaleY = scale;
+      patternProps.fillPatternOffsetY = gridCellPixelSize.radius / scale / 2;
+    }
   } else if (grid.type === "hexHorizontal") {
     const scale = gridCellPixelSize.height / 153;
-    patternProps.fillPatternScaleX = scale;
-    patternProps.fillPatternScaleY = scale;
-    patternProps.fillPatternOffsetY = -gridCellPixelSize.radius / scale / 2;
-    patternProps.fillPatternRotation = 90;
+    if (scale > 0) {
+      patternProps.fillPatternScaleX = scale;
+      patternProps.fillPatternScaleY = scale;
+      patternProps.fillPatternOffsetY = -gridCellPixelSize.radius / scale / 2;
+      patternProps.fillPatternRotation = 90;
+    }
   }
 
   return (
diff --git a/src/components/konva/Note.tsx b/src/components/konva/Note.tsx
new file mode 100644
index 0000000..e961854
--- /dev/null
+++ b/src/components/konva/Note.tsx
@@ -0,0 +1,304 @@
+import { useEffect, useState, useRef } from "react";
+import { Rect, Text } from "react-konva";
+import Konva from "konva";
+import { useSpring, animated } from "@react-spring/konva";
+
+import { useUserId } from "../../contexts/UserIdContext";
+import {
+  useSetPreventMapInteraction,
+  useMapWidth,
+  useMapHeight,
+} from "../../contexts/MapInteractionContext";
+import { useGridCellPixelSize } from "../../contexts/GridContext";
+
+import colors from "../../helpers/colors";
+
+import usePrevious from "../../hooks/usePrevious";
+import useGridSnapping from "../../hooks/useGridSnapping";
+
+import { Note as NoteType } from "../../types/Note";
+import {
+  NoteChangeEventHandler,
+  NoteDragEventHandler,
+  NoteMenuCloseEventHandler,
+  NoteMenuOpenEventHandler,
+} from "../../types/Events";
+import { Map } from "../../types/Map";
+
+import Transformer from "./Transformer";
+
+const defaultFontSize = 144;
+const minFontSize = 16;
+
+type NoteProps = {
+  note: NoteType;
+  map: Map | null;
+  onNoteChange?: NoteChangeEventHandler;
+  onNoteMenuOpen?: NoteMenuOpenEventHandler;
+  onNoteMenuClose?: NoteMenuCloseEventHandler;
+  draggable: boolean;
+  onNoteDragStart?: NoteDragEventHandler;
+  onNoteDragEnd?: NoteDragEventHandler;
+  fadeOnHover: boolean;
+  selected: boolean;
+};
+
+function Note({
+  note,
+  map,
+  onNoteChange,
+  onNoteMenuOpen,
+  onNoteMenuClose,
+  draggable,
+  onNoteDragStart,
+  onNoteDragEnd,
+  fadeOnHover,
+  selected,
+}: NoteProps) {
+  const userId = useUserId();
+
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const setPreventMapInteraction = useSetPreventMapInteraction();
+
+  const gridCellPixelSize = useGridCellPixelSize();
+
+  const minCellSize = Math.min(
+    gridCellPixelSize.width,
+    gridCellPixelSize.height
+  );
+  const noteWidth = minCellSize * note.size;
+  const noteHeight = noteWidth;
+  const notePadding = noteWidth / 10;
+
+  const snapPositionToGrid = useGridSnapping();
+
+  function handleDragStart(event: Konva.KonvaEventObject<DragEvent>) {
+    onNoteDragStart?.(event, note.id);
+  }
+
+  function handleDragMove(event: Konva.KonvaEventObject<DragEvent>) {
+    const noteGroup = event.target;
+    // Snap to corners of grid
+    if (map?.snapToGrid) {
+      noteGroup.position(snapPositionToGrid(noteGroup.position()));
+    }
+  }
+
+  function handleDragEnd(event: Konva.KonvaEventObject<DragEvent>) {
+    const noteGroup = event.target;
+    if (userId) {
+      onNoteChange?.({
+        [note.id]: {
+          x: noteGroup.x() / mapWidth,
+          y: noteGroup.y() / mapHeight,
+          lastModifiedBy: userId,
+          lastModified: Date.now(),
+        },
+      });
+    }
+    onNoteDragEnd?.(event, note.id);
+    setPreventMapInteraction(false);
+  }
+
+  function handleClick(event: Konva.KonvaEventObject<MouseEvent>) {
+    if (draggable) {
+      const noteNode = event.target;
+      onNoteMenuOpen && onNoteMenuOpen(note.id, noteNode, true);
+    }
+  }
+
+  // Store note pointer down time to check for a click when note is locked
+  const notePointerDownTimeRef = useRef<number>(0);
+  function handlePointerDown(event: Konva.KonvaEventObject<PointerEvent>) {
+    if (draggable) {
+      setPreventMapInteraction(true);
+    }
+    if (note.locked && map?.owner === userId) {
+      notePointerDownTimeRef.current = event.evt.timeStamp;
+    }
+  }
+
+  function handlePointerUp(event: Konva.KonvaEventObject<PointerEvent>) {
+    if (draggable) {
+      setPreventMapInteraction(false);
+    }
+    // Check note click when locked and we are the map owner
+    // We can't use onClick because that doesn't check pointer distance
+    if (note.locked && map?.owner === userId) {
+      // If down and up time is small trigger a click
+      const delta = event.evt.timeStamp - notePointerDownTimeRef.current;
+      if (delta < 300) {
+        const noteNode = event.target;
+        onNoteMenuOpen?.(note.id, noteNode, true);
+      }
+    }
+  }
+
+  const [noteOpacity, setNoteOpacity] = useState(1);
+  function handlePointerEnter() {
+    if (fadeOnHover) {
+      setNoteOpacity(0.5);
+    }
+  }
+
+  function handlePointerLeave() {
+    if (noteOpacity !== 1.0) {
+      setNoteOpacity(1.0);
+    }
+  }
+
+  const [fontScale, setFontScale] = useState(1);
+  useEffect(() => {
+    const text = textRef.current;
+    function findFontSize() {
+      if (!text) {
+        return;
+      }
+      // Create an array from 1 / minFontSize of the note height to the full note height
+      let sizes = Array.from(
+        { length: Math.ceil(noteHeight - notePadding * 2) },
+        (_, i) => i + Math.ceil(noteHeight / minFontSize)
+      );
+
+      if (sizes.length > 0) {
+        const size = sizes.reduce((prev, curr) => {
+          text.fontSize(curr);
+          const width = text.getTextWidth() + notePadding * 2;
+          const height = text.height() + notePadding * 2;
+          if (width < noteWidth && height < noteHeight) {
+            return curr;
+          } else {
+            return prev;
+          }
+        });
+        setFontScale(size / defaultFontSize);
+      }
+    }
+
+    findFontSize();
+  }, [note, note.text, note.visible, noteWidth, noteHeight, notePadding]);
+
+  const textRef = useRef<Konva.Text>(null);
+
+  const noteRef = useRef<Konva.Group>(null);
+  const [isTransforming, setIsTransforming] = useState(false);
+  function handleTransformStart() {
+    setIsTransforming(true);
+    onNoteMenuClose?.();
+  }
+
+  function handleTransformEnd(event: Konva.KonvaEventObject<Event>) {
+    if (noteRef.current) {
+      const sizeChange = event.target.scaleX();
+      const rotation = event.target.rotation();
+      onNoteChange?.({
+        [note.id]: {
+          size: note.size * sizeChange,
+          rotation: rotation,
+        },
+      });
+      onNoteMenuOpen?.(note.id, noteRef.current, false);
+      noteRef.current.scaleX(1);
+      noteRef.current.scaleY(1);
+    }
+    setIsTransforming(false);
+  }
+
+  // Animate to new note positions if edited by others
+  const noteX = note.x * mapWidth;
+  const noteY = note.y * mapHeight;
+  const previousWidth = usePrevious(mapWidth);
+  const previousHeight = usePrevious(mapHeight);
+  const resized = mapWidth !== previousWidth || mapHeight !== previousHeight;
+  const skipAnimation = note.lastModifiedBy === userId || resized;
+  const props = useSpring({
+    x: noteX,
+    y: noteY,
+    immediate: skipAnimation,
+  });
+
+  // When a note is hidden if you aren't the map owner hide it completely
+  if (map && !note.visible && map.owner !== userId) {
+    return null;
+  }
+
+  const noteName = `note${note.locked ? "-locked" : ""}`;
+
+  return (
+    <>
+      <animated.Group
+        {...props}
+        id={note.id}
+        onClick={handleClick}
+        onTap={handleClick}
+        width={noteWidth}
+        height={note.textOnly ? undefined : noteHeight}
+        rotation={note.rotation}
+        offsetX={noteWidth / 2}
+        offsetY={noteHeight / 2}
+        draggable={draggable}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragMove={handleDragMove}
+        onMouseDown={handlePointerDown}
+        onMouseUp={handlePointerUp}
+        onTouchStart={handlePointerDown}
+        onTouchEnd={handlePointerUp}
+        onMouseEnter={handlePointerEnter}
+        onMouseLeave={handlePointerLeave}
+        opacity={note.visible ? noteOpacity : 0.5}
+        name={noteName}
+        ref={noteRef}
+      >
+        {!note.textOnly && (
+          <Rect
+            width={noteWidth}
+            height={noteHeight}
+            shadowColor="rgba(0, 0, 0, 0.16)"
+            shadowOffset={{ x: 0, y: 3 }}
+            shadowBlur={6}
+            cornerRadius={0.25}
+            fill={colors[note.color]}
+          />
+        )}
+        <Text
+          text={note.text}
+          fill={
+            note.textOnly
+              ? colors[note.color]
+              : note.color === "black" || note.color === "darkGray"
+              ? "white"
+              : "black"
+          }
+          align="left"
+          verticalAlign="middle"
+          padding={notePadding / fontScale}
+          fontSize={defaultFontSize}
+          // Scale font instead of changing font size to avoid kerning issues with Firefox
+          scaleX={fontScale}
+          scaleY={fontScale}
+          width={noteWidth / fontScale}
+          height={note.textOnly ? undefined : noteHeight / fontScale}
+          wrap="word"
+        />
+        {/* Use an invisible text block to work out text sizing */}
+        <Text visible={false} ref={textRef} text={note.text} wrap="none" />
+      </animated.Group>
+      <Transformer
+        active={(!note.locked && selected) || isTransforming}
+        nodes={noteRef.current ? [noteRef.current] : []}
+        onTransformEnd={handleTransformEnd}
+        onTransformStart={handleTransformStart}
+        gridScale={map?.grid.measurement.scale || ""}
+      />
+    </>
+  );
+}
+
+Note.defaultProps = {
+  fadeOnHover: false,
+  draggable: false,
+};
+
+export default Note;
diff --git a/src/components/konva/Pointer.tsx b/src/components/konva/Pointer.tsx
new file mode 100644
index 0000000..cadbbbb
--- /dev/null
+++ b/src/components/konva/Pointer.tsx
@@ -0,0 +1,169 @@
+import Color from "color";
+import Konva from "konva";
+import { useEffect, useRef } from "react";
+import { Circle, Group, Line } from "react-konva";
+import Vector2 from "../../helpers/Vector2";
+
+interface PointerPoint extends Vector2 {
+  lifetime: number;
+}
+
+type PointerProps = {
+  position: Vector2;
+  size: number;
+  duration: number;
+  segments: number;
+  color: string;
+};
+
+function Pointer({ position, size, duration, segments, color }: PointerProps) {
+  const trailRef = useRef<Konva.Line>(null);
+  const pointsRef = useRef<PointerPoint[]>([]);
+  const prevPositionRef = useRef(position);
+  const positionRef = useRef(position);
+  const circleRef = useRef<Konva.Circle>(null);
+  // Color of the end of the trail
+  const transparentColorRef = useRef(
+    Color(color).lighten(0.5).alpha(0).string()
+  );
+
+  useEffect(() => {
+    // Lighten color to give it a `glow` effect
+    transparentColorRef.current = Color(color).lighten(0.5).alpha(0).string();
+  }, [color]);
+
+  // Keep track of position so we can use it in the trail animation
+  useEffect(() => {
+    positionRef.current = position;
+  }, [position]);
+
+  // Add a new point every time position is changed
+  useEffect(() => {
+    if (Vector2.compare(position, prevPositionRef.current, 0.0001)) {
+      return;
+    }
+    pointsRef.current.push({ ...position, lifetime: duration });
+    prevPositionRef.current = position;
+  }, [position, duration]);
+
+  // Advance lifetime of trail
+  useEffect(() => {
+    let prevTime = performance.now();
+    let request = requestAnimationFrame(animate);
+    function animate(time: number) {
+      request = requestAnimationFrame(animate);
+      const deltaTime = time - prevTime;
+      prevTime = time;
+
+      if (pointsRef.current.length === 0) {
+        return;
+      }
+
+      let expired = 0;
+      for (let point of pointsRef.current) {
+        point.lifetime -= deltaTime;
+        if (point.lifetime < 0) {
+          expired++;
+        }
+      }
+      if (expired > 0) {
+        pointsRef.current = pointsRef.current.slice(expired);
+      }
+
+      // Update the circle position to keep it in sync with the trail
+      if (circleRef && circleRef.current) {
+        circleRef.current.x(positionRef.current.x);
+        circleRef.current.y(positionRef.current.y);
+      }
+
+      if (trailRef && trailRef.current) {
+        trailRef.current.getLayer()?.draw();
+      }
+    }
+
+    return () => {
+      cancelAnimationFrame(request);
+    };
+  }, []);
+
+  // Custom scene function for drawing a trail from a line
+  function sceneFunc(context: Konva.Context) {
+    // Resample points to ensure a smooth trail
+    const resampledPoints = Vector2.resample(pointsRef.current, segments);
+    if (resampledPoints.length === 0) {
+      return;
+    }
+    // Draws a line offset in the direction perpendicular to its travel direction
+    const drawOffsetLine = (from: Vector2, to: Vector2, alpha: number) => {
+      const forward = Vector2.normalize(Vector2.subtract(from, to));
+      // Rotate the forward vector 90 degrees based off of the direction
+      const side = Vector2.rotate90(forward);
+
+      // Offset the `to` position by the size of the point and in the side direction
+      const toSize = (alpha * size) / 2;
+      const toOffset = Vector2.add(to, Vector2.multiply(side, toSize));
+
+      context.lineTo(toOffset.x, toOffset.y);
+    };
+    context.beginPath();
+    // Sample the points starting from the tail then traverse counter clockwise drawing each point
+    // offset to make a taper, stops at the base of the trail
+    context.moveTo(resampledPoints[0].x, resampledPoints[0].y);
+    for (let i = 1; i < resampledPoints.length; i++) {
+      const from = resampledPoints[i - 1];
+      const to = resampledPoints[i];
+      drawOffsetLine(from, to, i / resampledPoints.length);
+    }
+    // Start from the base of the trail and continue drawing down back to the end of the tail
+    for (let i = resampledPoints.length - 2; i >= 0; i--) {
+      const from = resampledPoints[i + 1];
+      const to = resampledPoints[i];
+      drawOffsetLine(from, to, i / resampledPoints.length);
+    }
+    context.lineTo(resampledPoints[0].x, resampledPoints[0].y);
+    context.closePath();
+
+    // Create a radial gradient from the center of the trail to the tail
+    const gradientCenter = resampledPoints[resampledPoints.length - 1];
+    const gradientEnd = resampledPoints[0];
+    const gradientRadius = Vector2.magnitude(
+      Vector2.subtract(gradientCenter, gradientEnd)
+    );
+    let gradient = context.createRadialGradient(
+      gradientCenter.x,
+      gradientCenter.y,
+      0,
+      gradientCenter.x,
+      gradientCenter.y,
+      gradientRadius
+    );
+    gradient.addColorStop(0, color);
+    gradient.addColorStop(1, transparentColorRef.current);
+    // @ts-ignore
+    context.fillStyle = gradient;
+    context.fill();
+  }
+
+  return (
+    <Group>
+      <Line sceneFunc={sceneFunc} ref={trailRef} />
+      <Circle
+        x={position.x}
+        y={position.y}
+        fill={color}
+        width={size}
+        height={size}
+        ref={circleRef}
+      />
+    </Group>
+  );
+}
+
+Pointer.defaultProps = {
+  // Duration of each point in milliseconds
+  duration: 200,
+  // Number of segments in the trail, resampled from the points
+  segments: 20,
+};
+
+export default Pointer;
diff --git a/src/components/konva/Ruler.tsx b/src/components/konva/Ruler.tsx
new file mode 100644
index 0000000..5b93b4d
--- /dev/null
+++ b/src/components/konva/Ruler.tsx
@@ -0,0 +1,69 @@
+import { Group, Label, Line, Tag, Text } from "react-konva";
+
+import { useGridStrokeWidth } from "../../contexts/GridContext";
+import {
+  useDebouncedStageScale,
+  useMapHeight,
+  useMapWidth,
+} from "../../contexts/MapInteractionContext";
+
+import { scaleAndFlattenPoints } from "../../helpers/konva";
+import Vector2 from "../../helpers/Vector2";
+
+import { GridScale } from "../../types/Grid";
+
+type RulerProps = {
+  points: Vector2[];
+  scale: GridScale;
+  length: number;
+};
+
+function Ruler({ points, scale, length }: RulerProps) {
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const mapSize = new Vector2(mapWidth, mapHeight);
+
+  const gridStrokeWidth = useGridStrokeWidth();
+
+  const linePoints = scaleAndFlattenPoints(points, mapSize);
+
+  const lineCenter = Vector2.multiply(Vector2.centroid(points), mapSize);
+
+  return (
+    <Group>
+      <Line
+        points={linePoints}
+        strokeWidth={1.5 * gridStrokeWidth}
+        stroke="hsla(230, 25%, 18%, 0.8)"
+        lineCap="round"
+      />
+      <Line
+        points={linePoints}
+        strokeWidth={0.25 * gridStrokeWidth}
+        stroke="white"
+        lineCap="round"
+      />
+      <Label
+        x={lineCenter.x}
+        y={lineCenter.y}
+        offsetX={26}
+        offsetY={26}
+        scaleX={1 / stageScale}
+        scaleY={1 / stageScale}
+      >
+        <Tag fill="hsla(230, 25%, 18%, 0.8)" cornerRadius={4} />
+        <Text
+          text={`${(length * scale.multiplier).toFixed(scale.digits)}${
+            scale.unit
+          }`}
+          fill="white"
+          fontSize={24}
+          padding={4}
+        />
+      </Label>
+    </Group>
+  );
+}
+
+export default Ruler;
diff --git a/src/components/konva/Selection.tsx b/src/components/konva/Selection.tsx
new file mode 100644
index 0000000..4cafaf9
--- /dev/null
+++ b/src/components/konva/Selection.tsx
@@ -0,0 +1,274 @@
+import Konva from "konva";
+import { Line, Rect } from "react-konva";
+
+import colors from "../../helpers/colors";
+import { scaleAndFlattenPoints } from "../../helpers/konva";
+
+import { useGridStrokeWidth } from "../../contexts/GridContext";
+import {
+  useMapHeight,
+  useMapWidth,
+  useStageScale,
+} from "../../contexts/MapInteractionContext";
+import { useUserId } from "../../contexts/UserIdContext";
+
+import {
+  Selection as SelectionType,
+  SelectionItemType,
+} from "../../types/Select";
+import { useEffect, useRef } from "react";
+import Vector2 from "../../helpers/Vector2";
+import { SelectionItemsChangeEventHandler } from "../../types/Events";
+import { TokenState } from "../../types/TokenState";
+import { Map } from "../../types/Map";
+import { Note } from "../../types/Note";
+import useGridSnapping from "../../hooks/useGridSnapping";
+
+const dashAnimationSpeed = -0.01;
+
+type SelectionProps = {
+  selection: SelectionType;
+  onSelectionChange: (selection: SelectionType | null) => void;
+  onSelectionItemsChange: SelectionItemsChangeEventHandler;
+  onPreventSelectionChange: (preventSelection: boolean) => void;
+  onSelectionDragStart: () => void;
+  onSelectionDragEnd: () => void;
+  map: Map;
+} & Konva.ShapeConfig;
+
+function Selection({
+  selection,
+  onSelectionChange,
+  onSelectionItemsChange,
+  onPreventSelectionChange,
+  onSelectionDragStart,
+  onSelectionDragEnd,
+  map,
+  ...props
+}: SelectionProps) {
+  const userId = useUserId();
+
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const stageScale = useStageScale();
+  const gridStrokeWidth = useGridStrokeWidth();
+
+  const snapPositionToGrid = useGridSnapping();
+
+  const intersectingNodesRef = useRef<
+    {
+      type: SelectionItemType;
+      node: Konva.Node;
+      id: string;
+      initialX: number;
+      initialY: number;
+    }[]
+  >([]);
+  const initialDragPositionRef = useRef({ x: 0, y: 0 });
+
+  function handleDragStart(event: Konva.KonvaEventObject<DragEvent>) {
+    initialDragPositionRef.current = event.target.position();
+    const stage = event.target.getStage();
+    if (stage) {
+      for (let item of selection.items) {
+        const node = stage.findOne(`#${item.id}`);
+        // Don't drag locked nodes
+        if (node && !node.name().endsWith("-locked")) {
+          intersectingNodesRef.current.push({
+            ...item,
+            node,
+            initialX: node.x(),
+            initialY: node.y(),
+          });
+        }
+      }
+    }
+    onSelectionDragStart();
+  }
+
+  function handleDragMove(event: Konva.KonvaEventObject<DragEvent>) {
+    const deltaPosition = Vector2.subtract(
+      event.target.position(),
+      initialDragPositionRef.current
+    );
+    for (let item of intersectingNodesRef.current) {
+      let itemPosition = Vector2.add(
+        { x: item.initialX, y: item.initialY },
+        deltaPosition
+      );
+      if (map.snapToGrid) {
+        itemPosition = snapPositionToGrid(itemPosition);
+      }
+      item.node.position(itemPosition);
+    }
+  }
+
+  function handleDragEnd(event: Konva.KonvaEventObject<DragEvent>) {
+    const tokenChanges: Record<string, Partial<TokenState>> = {};
+    const noteChanges: Record<string, Partial<Note>> = {};
+    for (let item of intersectingNodesRef.current) {
+      if (item.type === "token") {
+        tokenChanges[item.id] = {
+          x: item.node.x() / mapWidth,
+          y: item.node.y() / mapHeight,
+          lastModifiedBy: userId,
+          lastModified: Date.now(),
+        };
+      } else {
+        noteChanges[item.id] = {
+          x: item.node.x() / mapWidth,
+          y: item.node.y() / mapHeight,
+          lastModifiedBy: userId,
+          lastModified: Date.now(),
+        };
+      }
+    }
+    onSelectionItemsChange(tokenChanges, noteChanges);
+    onSelectionChange({
+      ...selection,
+      x: event.target.x() / mapWidth,
+      y: event.target.y() / mapHeight,
+    });
+    intersectingNodesRef.current = [];
+    onPreventSelectionChange(false);
+    onSelectionDragEnd();
+  }
+
+  function handlePointerDown() {
+    onPreventSelectionChange(true);
+  }
+
+  function handlePointerUp() {
+    onPreventSelectionChange(false);
+  }
+
+  const hasItems = selection.items.length > 0;
+
+  // Update cursor when mouse enter and out of selection
+  function handleMouseEnter(event: Konva.KonvaEventObject<MouseEvent>) {
+    let stage = event.target.getStage();
+    if (stage && hasItems) {
+      stage.content.style.cursor = "move";
+    }
+  }
+
+  function handleMouseOut(event: Konva.KonvaEventObject<MouseEvent>) {
+    let stage = event.target.getStage();
+    if (stage) {
+      stage.content.style.cursor = "";
+    }
+  }
+
+  // Update cursor to move when selection is made or removed
+  useEffect(() => {
+    var node: Konva.Node | null = null;
+    if (lineRef.current) {
+      node = lineRef.current;
+    } else if (rectRef.current) {
+      node = rectRef.current;
+    }
+    let stage = node?.getStage();
+    if (stage && hasItems) {
+      stage.content.style.cursor = "move";
+    }
+    return () => {
+      if (stage) {
+        stage.content.style.cursor = "";
+      }
+    };
+  }, [hasItems]);
+
+  const requestRef = useRef<number>();
+  const lineRef = useRef<Konva.Line>(null);
+  const rectRef = useRef<Konva.Rect>(null);
+  useEffect(() => {
+    let prevTime = performance.now();
+    function animate(time: number) {
+      const delta = time - prevTime;
+      prevTime = time;
+      if (!hasItems) {
+        return;
+      }
+      requestRef.current = requestAnimationFrame(animate);
+      if (lineRef.current) {
+        lineRef.current.dashOffset(
+          lineRef.current.dashOffset() + delta * dashAnimationSpeed
+        );
+      }
+      if (rectRef.current) {
+        rectRef.current.dashOffset(
+          rectRef.current.dashOffset() + delta * dashAnimationSpeed
+        );
+      }
+    }
+
+    requestRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (requestRef.current !== undefined) {
+        cancelAnimationFrame(requestRef.current);
+      }
+    };
+  }, [hasItems]);
+
+  const strokeWidth = (gridStrokeWidth * 0.75) / stageScale;
+  const defaultProps = {
+    stroke: colors.primary,
+    strokeWidth: strokeWidth,
+    dash: hasItems ? [strokeWidth / 2, strokeWidth * 2] : [],
+    onDragStart: handleDragStart,
+    onDragMove: handleDragMove,
+    onDragEnd: handleDragEnd,
+    draggable: true,
+    onMouseDown: handlePointerDown,
+    onMouseUp: handlePointerUp,
+    onTouchStart: handlePointerDown,
+    onTouchEnd: handlePointerUp,
+    onMouseEnter: handleMouseEnter,
+    onMouseOut: handleMouseOut,
+    // Increase stroke width when drawing a selection to
+    // prevent deselection click event from firing
+    hitStrokeWidth: hasItems ? undefined : 100,
+    id: "selection",
+  };
+  const x = selection.x * mapWidth;
+  const y = selection.y * mapHeight;
+
+  if (selection.type === "path") {
+    return (
+      <Line
+        points={scaleAndFlattenPoints(selection.data.points, {
+          x: mapWidth,
+          y: mapHeight,
+        })}
+        tension={0.5}
+        closed={hasItems}
+        lineCap="round"
+        lineJoin="round"
+        x={x}
+        y={y}
+        {...defaultProps}
+        {...props}
+        ref={lineRef}
+      />
+    );
+  } else {
+    return (
+      <Rect
+        x={x}
+        y={y}
+        offsetX={-selection.data.x * mapWidth}
+        offsetY={-selection.data.y * mapHeight}
+        width={selection.data.width * mapWidth}
+        height={selection.data.height * mapHeight}
+        lineCap="round"
+        lineJoin="round"
+        {...defaultProps}
+        {...props}
+        ref={rectRef}
+      />
+    );
+  }
+}
+
+export default Selection;
diff --git a/src/components/konva/Tick.tsx b/src/components/konva/Tick.tsx
new file mode 100644
index 0000000..cd39f1e
--- /dev/null
+++ b/src/components/konva/Tick.tsx
@@ -0,0 +1,48 @@
+import Konva from "konva";
+import { useState } from "react";
+import { Circle, Group, Path } from "react-konva";
+
+type TickProps = {
+  x: number;
+  y: number;
+  scale: number;
+  onClick: (evt: Konva.KonvaEventObject<MouseEvent>) => void;
+  cross: boolean;
+};
+
+export function Tick({ x, y, scale, onClick, cross }: TickProps) {
+  const [fill, setFill] = useState("white");
+  function handleEnter() {
+    setFill("hsl(260, 100%, 80%)");
+  }
+
+  function handleLeave() {
+    setFill("white");
+  }
+  return (
+    <Group
+      x={x}
+      y={y}
+      scaleX={scale}
+      scaleY={scale}
+      onMouseEnter={handleEnter}
+      onMouseLeave={handleLeave}
+      onClick={onClick}
+      onTap={onClick}
+    >
+      <Circle radius={12} fill="hsla(230, 25%, 18%, 0.8)" />
+      <Path
+        offsetX={12}
+        offsetY={12}
+        fill={fill}
+        data={
+          cross
+            ? "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+            : "M9 16.2l-3.5-3.5c-.39-.39-1.01-.39-1.4 0-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0L9 16.2z"
+        }
+      />
+    </Group>
+  );
+}
+
+export default Tick;
diff --git a/src/components/konva/Token.tsx b/src/components/konva/Token.tsx
new file mode 100644
index 0000000..5695a03
--- /dev/null
+++ b/src/components/konva/Token.tsx
@@ -0,0 +1,505 @@
+import { useState, useRef, useCallback, useMemo } from "react";
+import { Image as KonvaImage, Group } from "react-konva";
+import { useSpring, animated } from "@react-spring/konva";
+import Konva from "konva";
+import useImage from "use-image";
+
+import usePrevious from "../../hooks/usePrevious";
+import useGridSnapping from "../../hooks/useGridSnapping";
+
+import { useUserId } from "../../contexts/UserIdContext";
+import {
+  useSetPreventMapInteraction,
+  useMapWidth,
+  useMapHeight,
+} from "../../contexts/MapInteractionContext";
+import { useGridCellPixelSize } from "../../contexts/GridContext";
+import { useDataURL } from "../../contexts/AssetsContext";
+
+import TokenStatus from "./TokenStatus";
+import TokenLabel from "./TokenLabel";
+import TokenOutline from "./TokenOutline";
+
+import { Intersection, getScaledOutline } from "../../helpers/token";
+import Vector2 from "../../helpers/Vector2";
+
+import { tokenSources } from "../../tokens";
+import { TokenState } from "../../types/TokenState";
+import { Map } from "../../types/Map";
+import {
+  TokenDragEventHandler,
+  TokenMenuCloseChangeEventHandler,
+  TokenMenuOpenChangeEventHandler,
+  TokenStateChangeEventHandler,
+  CustomTransformEventHandler,
+} from "../../types/Events";
+import Transformer from "./Transformer";
+import TokenAttachment from "./TokenAttachment";
+import { MapState } from "../../types/MapState";
+
+type MapTokenProps = {
+  tokenState: TokenState;
+  onTokenStateChange: TokenStateChangeEventHandler;
+  onTokenMenuOpen: TokenMenuOpenChangeEventHandler;
+  onTokenMenuClose: TokenMenuCloseChangeEventHandler;
+  onTokenDragStart: TokenDragEventHandler;
+  onTokenDragEnd: TokenDragEventHandler;
+  onTokenTransformStart: CustomTransformEventHandler;
+  onTokenTransformEnd: CustomTransformEventHandler;
+  transforming: boolean;
+  draggable: boolean;
+  selectable: boolean;
+  fadeOnHover: boolean;
+  map: Map;
+  mapState: MapState;
+  selected: boolean;
+};
+
+function Token({
+  tokenState,
+  onTokenStateChange,
+  onTokenMenuOpen,
+  onTokenMenuClose,
+  onTokenDragStart,
+  onTokenDragEnd,
+  onTokenTransformStart,
+  onTokenTransformEnd,
+  transforming,
+  draggable,
+  selectable,
+  fadeOnHover,
+  map,
+  mapState,
+  selected,
+}: MapTokenProps) {
+  const userId = useUserId();
+
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const setPreventMapInteraction = useSetPreventMapInteraction();
+
+  const gridCellPixelSize = useGridCellPixelSize();
+
+  const tokenURL = useDataURL(tokenState, tokenSources);
+  const [tokenImage] = useImage(tokenURL || "");
+
+  const tokenAspectRatio = tokenState.width / tokenState.height;
+
+  const snapPositionToGrid = useGridSnapping();
+
+  const [dragging, setDragging] = useState(false);
+  const previousDragPositionRef = useRef({ x: 0, y: 0 });
+
+  // Tokens that are attached to this token and should move when it moves
+  const attachedTokensRef = useRef<Konva.Node[]>([]);
+  // If this an attachment is it over a character
+  const [attachmentOverCharacter, setAttachmentOverCharacter] = useState(false);
+  // The characters that we're present when an attachment is dragged, used to highlight the attachment
+  const attachmentCharactersRef = useRef<Konva.Node[]>([]);
+  const attachmentThreshold = useMemo(
+    () => Vector2.componentMin(gridCellPixelSize) / 4,
+    [gridCellPixelSize]
+  );
+
+  function handleDragStart(event: Konva.KonvaEventObject<DragEvent>) {
+    const tokenGroup = event.target as Konva.Shape;
+    previousDragPositionRef.current = tokenGroup.position();
+
+    attachedTokensRef.current = getAttachedTokens();
+
+    if (tokenState.category === "attachment") {
+      // If we're dragging an attachment add all characters to the attachment characters
+      // So we can check for highlights
+      const characters = tokenGroup.getLayer()?.find(".character") || [];
+      attachmentCharactersRef.current = characters;
+    }
+
+    setDragging(true);
+    onTokenDragStart(
+      event,
+      tokenState.id,
+      attachedTokensRef.current.map((token) => token.id())
+    );
+  }
+
+  function handleDragMove(event: Konva.KonvaEventObject<DragEvent>) {
+    const tokenGroup = event.target;
+    // Snap to corners of grid
+    if (map.snapToGrid) {
+      tokenGroup.position(snapPositionToGrid(tokenGroup.position()));
+    }
+    if (attachedTokensRef.current.length > 0) {
+      const deltaPosition = Vector2.subtract(
+        tokenGroup.position(),
+        previousDragPositionRef.current
+      );
+      for (let other of attachedTokensRef.current) {
+        other.position(Vector2.add(other.position(), deltaPosition));
+      }
+      previousDragPositionRef.current = tokenGroup.position();
+    }
+    // Check whether an attachment is over a character
+    if (tokenState.category === "attachment") {
+      const characters = attachmentCharactersRef.current;
+      let overCharacter = false;
+      for (let character of characters) {
+        const distance = Vector2.distance(
+          tokenGroup.position(),
+          character.position()
+        );
+        if (distance < attachmentThreshold) {
+          overCharacter = true;
+          break;
+        }
+      }
+      if (attachmentOverCharacter !== overCharacter) {
+        setAttachmentOverCharacter(overCharacter);
+      }
+    }
+  }
+
+  function handleDragEnd(event: Konva.KonvaEventObject<DragEvent>) {
+    const tokenGroup = event.target;
+
+    const attachedTokenChanges: Record<string, Partial<TokenState>> = {};
+    if (attachedTokensRef.current.length > 0) {
+      for (let other of attachedTokensRef.current) {
+        attachedTokenChanges[other.id()] = {
+          x: other.x() / mapWidth,
+          y: other.y() / mapHeight,
+          lastModifiedBy: userId,
+          lastModified: Date.now(),
+        };
+      }
+    }
+
+    setPreventMapInteraction(false);
+    onTokenStateChange({
+      ...attachedTokenChanges,
+      [tokenState.id]: {
+        x: tokenGroup.x() / mapWidth,
+        y: tokenGroup.y() / mapHeight,
+        lastModifiedBy: userId,
+        lastModified: Date.now(),
+      },
+    });
+
+    setDragging(false);
+
+    onTokenDragEnd(
+      event,
+      tokenState.id,
+      attachedTokensRef.current.map((token) => token.id())
+    );
+
+    attachmentCharactersRef.current = [];
+    attachedTokensRef.current = [];
+    setAttachmentOverCharacter(false);
+  }
+
+  function handleClick() {
+    if (selectable && draggable && transformRootRef.current) {
+      onTokenMenuOpen(tokenState.id, transformRootRef.current, true);
+    }
+  }
+
+  const [tokenOpacity, setTokenOpacity] = useState(1);
+  // Store token pointer down time to check for a click when token is locked
+  const tokenPointerDownTimeRef = useRef<number>(0);
+  function handlePointerDown(event: Konva.KonvaEventObject<PointerEvent>) {
+    if (draggable) {
+      setPreventMapInteraction(true);
+    }
+    if (tokenState.locked && selectable) {
+      tokenPointerDownTimeRef.current = event.evt.timeStamp;
+    }
+  }
+
+  function handlePointerUp(event: Konva.KonvaEventObject<PointerEvent>) {
+    if (draggable) {
+      setPreventMapInteraction(false);
+    }
+    // Check token click when locked and selectable
+    // We can't use onClick because that doesn't check pointer distance
+    if (tokenState.locked && selectable && transformRootRef.current) {
+      // If down and up time is small trigger a click
+      const delta = event.evt.timeStamp - tokenPointerDownTimeRef.current;
+      if (delta < 300) {
+        onTokenMenuOpen(tokenState.id, transformRootRef.current, true);
+      }
+    }
+  }
+
+  function handlePointerEnter() {
+    if (fadeOnHover) {
+      setTokenOpacity(0.5);
+    }
+  }
+
+  function handlePointerLeave() {
+    if (tokenOpacity !== 1.0) {
+      setTokenOpacity(1.0);
+    }
+  }
+
+  const transformRootRef = useRef<Konva.Group>(null);
+
+  const minCellSize = Math.min(
+    gridCellPixelSize.width,
+    gridCellPixelSize.height
+  );
+  const tokenWidth = minCellSize * tokenState.size;
+  const tokenHeight = (minCellSize / tokenAspectRatio) * tokenState.size;
+
+  // Animate to new token positions if edited by others
+  const tokenX = tokenState.x * mapWidth;
+  const tokenY = tokenState.y * mapHeight;
+  const previousWidth = usePrevious(mapWidth);
+  const previousHeight = usePrevious(mapHeight);
+  const resized = mapWidth !== previousWidth || mapHeight !== previousHeight;
+  const skipAnimation = tokenState.lastModifiedBy === userId || resized;
+  const props = useSpring({
+    x: tokenX,
+    y: tokenY,
+    immediate: skipAnimation,
+  });
+
+  const getAttachedTokens = useCallback(() => {
+    const transformRoot = transformRootRef.current;
+    const tokenGroup = transformRoot?.parent;
+    const layer = transformRoot?.getLayer();
+    let attachedTokens: Konva.Node[] = [];
+    if (tokenGroup && layer) {
+      if (tokenState.category === "vehicle") {
+        const tokenIntersection = new Intersection(
+          getScaledOutline(tokenState, tokenWidth, tokenHeight),
+          { x: tokenX - tokenWidth / 2, y: tokenY - tokenHeight / 2 },
+          { x: tokenX, y: tokenY },
+          tokenState.rotation
+        );
+
+        // Find all other characters on the map and check whether they're
+        // intersecting the vehicle
+        const characters = layer.find(".character");
+        const attachments = layer.find(".attachment");
+        const tokens = [...characters, ...attachments];
+        for (let other of tokens) {
+          const id = other.id();
+          if (id in mapState.tokens) {
+            const position = {
+              x: mapState.tokens[id].x * mapWidth,
+              y: mapState.tokens[id].y * mapHeight,
+            };
+            if (tokenIntersection.intersects(position)) {
+              attachedTokens.push(other);
+            }
+          }
+        }
+      }
+
+      if (tokenState.category === "character") {
+        // Find all attachments and check whether they are close to the center of this token
+        const attachments = layer.find(".attachment");
+        for (let attachment of attachments) {
+          const id = attachment.id();
+          if (id in mapState.tokens) {
+            const position = {
+              x: mapState.tokens[id].x * mapWidth,
+              y: mapState.tokens[id].y * mapHeight,
+            };
+            const distance = Vector2.distance(tokenGroup.position(), position);
+            if (distance < attachmentThreshold) {
+              attachedTokens.push(attachment);
+            }
+          }
+        }
+      }
+    }
+
+    return attachedTokens;
+  }, [
+    attachmentThreshold,
+    tokenHeight,
+    tokenWidth,
+    tokenState,
+    tokenX,
+    tokenY,
+    mapState,
+    mapWidth,
+    mapHeight,
+  ]);
+
+  // Override transform active to always show this transformer when using it
+  const [overrideTransformActive, setOverrideTransformActive] = useState(false);
+
+  function handleTransformStart(
+    event: Konva.KonvaEventObject<Event>,
+    attachments: Konva.Node[]
+  ) {
+    setOverrideTransformActive(true);
+    onTokenTransformStart(event, attachments);
+    onTokenMenuClose();
+  }
+
+  function handleTransformEnd(
+    event: Konva.KonvaEventObject<Event>,
+    attachments: Konva.Node[]
+  ) {
+    const transformer = event.currentTarget as Konva.Transformer;
+    const nodes = [...transformer.nodes(), ...attachments];
+    const tokenChanges: Record<string, Partial<TokenState>> = {};
+    for (let node of nodes) {
+      const id = node.id();
+      if (id in mapState.tokens) {
+        const sizeChange = node.scaleX();
+        const rotation = node.rotation();
+        const xChange = node.x() / mapWidth;
+        const yChange = node.y() / mapHeight;
+        tokenChanges[id] = {
+          size: mapState.tokens[id].size * sizeChange,
+          rotation: rotation,
+          x: mapState.tokens[id].x + xChange,
+          y: mapState.tokens[id].y + yChange,
+        };
+      }
+      node.scaleX(1);
+      node.scaleY(1);
+      node.x(0);
+      node.y(0);
+    }
+
+    onTokenStateChange(tokenChanges);
+    if (transformRootRef.current) {
+      onTokenMenuOpen(tokenState.id, transformRootRef.current, false);
+    }
+    setOverrideTransformActive(false);
+    onTokenTransformEnd(event, attachments);
+  }
+
+  const transformerActive = useMemo(
+    () => (!tokenState.locked && selected) || overrideTransformActive,
+    [tokenState, selected, overrideTransformActive]
+  );
+
+  const transformerAttachments = useMemo(() => {
+    if (transformerActive) {
+      // Find attached transform roots
+      return getAttachedTokens().map((node) =>
+        (node as Konva.Group).findOne(".transform-root")
+      );
+    } else {
+      return [];
+    }
+  }, [getAttachedTokens, transformerActive]);
+
+  // When a token is hidden if you aren't the map owner hide it completely
+  if (map && !tokenState.visible && map.owner !== userId) {
+    return null;
+  }
+
+  // Token name is used by on click to find whether a token is a vehicle or prop
+  let tokenName = "";
+  if (tokenState) {
+    tokenName = tokenState.category;
+  }
+  if (tokenState && tokenState.locked) {
+    tokenName = tokenName + "-locked";
+  }
+
+  return (
+    <>
+      <animated.Group
+        {...props}
+        width={tokenWidth}
+        height={tokenHeight}
+        draggable={draggable}
+        onMouseDown={handlePointerDown}
+        onMouseUp={handlePointerUp}
+        onMouseEnter={handlePointerEnter}
+        onMouseLeave={handlePointerLeave}
+        onTouchStart={handlePointerDown}
+        onTouchEnd={handlePointerUp}
+        onClick={handleClick}
+        onTap={handleClick}
+        onDragEnd={handleDragEnd}
+        onDragStart={handleDragStart}
+        onDragMove={handleDragMove}
+        opacity={tokenState.visible ? tokenOpacity : 0.5}
+        name={tokenName}
+        id={tokenState.id}
+      >
+        <Group
+          ref={transformRootRef}
+          id={tokenState.id}
+          name="transform-root"
+          rotation={tokenState.rotation}
+          offsetX={tokenWidth / 2}
+          offsetY={tokenHeight / 2}
+        >
+          <Group width={tokenWidth} height={tokenHeight} x={0} y={0}>
+            <TokenOutline
+              outline={getScaledOutline(tokenState, tokenWidth, tokenHeight)}
+              hidden={!!tokenImage}
+              // Disable hit detection for attachments
+              hitFunc={
+                tokenState.category === "attachment" ? () => {} : undefined
+              }
+            />
+          </Group>
+          <KonvaImage
+            width={tokenWidth}
+            height={tokenHeight}
+            x={0}
+            y={0}
+            image={tokenImage}
+            hitFunc={() => {}}
+          />
+        </Group>
+        {!transforming ? (
+          <Group offsetX={tokenWidth / 2} offsetY={tokenHeight / 2}>
+            {tokenState.statuses?.length > 0 ? (
+              <TokenStatus
+                tokenState={tokenState}
+                width={tokenWidth}
+                height={tokenHeight}
+              />
+            ) : null}
+            {tokenState.category === "attachment" ? (
+              <Group offsetX={-tokenWidth / 2} offsetY={-tokenHeight / 2}>
+                <Group rotation={tokenState.rotation}>
+                  <TokenAttachment
+                    tokenHeight={tokenHeight}
+                    dragging={dragging}
+                    highlight={attachmentOverCharacter}
+                    radius={attachmentThreshold * 2}
+                  />
+                </Group>
+              </Group>
+            ) : null}
+            {tokenState.label ? (
+              <TokenLabel
+                tokenState={tokenState}
+                width={tokenWidth}
+                height={tokenHeight}
+              />
+            ) : null}
+          </Group>
+        ) : null}
+      </animated.Group>
+      <Transformer
+        active={transformerActive}
+        nodes={
+          transformRootRef.current
+            ? [transformRootRef.current as Konva.Node]
+            : []
+        }
+        attachments={transformerAttachments}
+        onTransformEnd={handleTransformEnd}
+        onTransformStart={handleTransformStart}
+        gridScale={map.grid.measurement.scale}
+      />
+    </>
+  );
+}
+
+export default Token;
diff --git a/src/components/konva/TokenAttachment.tsx b/src/components/konva/TokenAttachment.tsx
new file mode 100644
index 0000000..2511094
--- /dev/null
+++ b/src/components/konva/TokenAttachment.tsx
@@ -0,0 +1,54 @@
+import { Circle, Group, Rect } from "react-konva";
+
+type TokenAttachmentProps = {
+  tokenHeight: number;
+  dragging: boolean;
+  highlight: boolean;
+  radius: number;
+};
+
+function TokenAttachment({
+  tokenHeight,
+  dragging,
+  highlight,
+  radius,
+}: TokenAttachmentProps) {
+  const width = radius / 3;
+  const height = radius / 8;
+  return (
+    <Group>
+      {/* Make a bigger hidden rect for hit registration */}
+      <Rect
+        width={width * 2}
+        height={height * 2}
+        x={-width}
+        y={tokenHeight / 2 - height}
+        cornerRadius={2.5}
+        fill="transparent"
+      />
+      <Rect
+        width={width}
+        height={height}
+        x={-width / 2}
+        y={tokenHeight / 2 - height / 2}
+        cornerRadius={2.5}
+        fill="rgba(36, 39, 51, 0.8)"
+        shadowColor="rgba(0,0,0,0.5)"
+        shadowOffsetY={radius / 40}
+        shadowBlur={radius / 15}
+        hitFunc={() => {}}
+      />
+      {dragging ? (
+        <Circle
+          radius={radius}
+          stroke={
+            highlight ? "hsl(260, 100%, 80%)" : "rgba(255, 255, 255, 0.85)"
+          }
+          strokeWidth={0.5}
+        />
+      ) : null}
+    </Group>
+  );
+}
+
+export default TokenAttachment;
diff --git a/src/components/token/TokenLabel.js b/src/components/konva/TokenLabel.tsx
similarity index 80%
rename from src/components/token/TokenLabel.js
rename to src/components/konva/TokenLabel.tsx
index b178149..bb4c4e5 100644
--- a/src/components/token/TokenLabel.js
+++ b/src/components/konva/TokenLabel.tsx
@@ -1,13 +1,22 @@
-import React, { useRef, useEffect, useState } from "react";
+import Konva from "konva";
+import { useRef, useEffect, useState } from "react";
 import { Rect, Text, Group } from "react-konva";
 
 import useSetting from "../../hooks/useSetting";
+import { TokenState } from "../../types/TokenState";
 
 const maxTokenSize = 3;
-const defaultFontSize = 16;
+const defaultFontSize = 144;
+const minFontSize = 16;
 
-function TokenLabel({ tokenState, width, height }) {
-  const [labelSize] = useSetting("map.labelSize");
+type TokenLabelProps = {
+  tokenState: TokenState;
+  width: number;
+  height: number;
+};
+
+function TokenLabel({ tokenState, width, height }: TokenLabelProps) {
+  const [labelSize] = useSetting<number>("map.labelSize");
 
   const paddingY =
     (height / 12 / tokenState.size) * Math.min(tokenState.size, maxTokenSize);
@@ -22,15 +31,15 @@ function TokenLabel({ tokenState, width, height }) {
       return;
     }
 
-    let fontSizes = [];
-    for (let size = 20 * labelSize; size >= 6; size--) {
+    let fontSizes: number[] = [];
+    for (let size = minFontSize * labelSize; size >= 6; size--) {
       const verticalSize = height / size / tokenState.size;
       const tokenSize = Math.min(tokenState.size, maxTokenSize);
       const fontSize = verticalSize * tokenSize * labelSize;
       fontSizes.push(fontSize);
     }
 
-    function findFontScale() {
+    const findFontScale = () => {
       const size = fontSizes.reduce((prev, curr) => {
         text.fontSize(curr);
         const textWidth = text.getTextWidth() + paddingX * 2;
@@ -42,7 +51,7 @@ function TokenLabel({ tokenState, width, height }) {
       }, 1);
 
       setFontScale(size / defaultFontSize);
-    }
+    };
 
     findFontScale();
   }, [
@@ -68,8 +77,8 @@ function TokenLabel({ tokenState, width, height }) {
     }
   }, [tokenState.label, paddingX, width, fontScale]);
 
-  const textRef = useRef();
-  const textSizerRef = useRef();
+  const textRef = useRef<Konva.Text>(null);
+  const textSizerRef = useRef<Konva.Text>(null);
 
   return (
     <Group y={height - (defaultFontSize * fontScale + paddingY) / 2}>
diff --git a/src/components/konva/TokenOutline.tsx b/src/components/konva/TokenOutline.tsx
new file mode 100644
index 0000000..932800f
--- /dev/null
+++ b/src/components/konva/TokenOutline.tsx
@@ -0,0 +1,51 @@
+import Konva from "konva";
+import { Rect, Circle, Line } from "react-konva";
+
+import colors from "../../helpers/colors";
+import { Outline } from "../../types/Outline";
+
+type TokenOutlineProps = {
+  outline: Outline;
+  hidden: boolean;
+} & Konva.ShapeConfig;
+
+function TokenOutline({ outline, hidden, ...props }: TokenOutlineProps) {
+  const sharedProps = {
+    fill: colors.black,
+    opacity: hidden ? 0 : 0.8,
+  };
+  if (outline.type === "rect") {
+    return (
+      <Rect
+        width={outline.width}
+        height={outline.height}
+        x={outline.x}
+        y={outline.y}
+        {...sharedProps}
+        {...props}
+      />
+    );
+  } else if (outline.type === "circle") {
+    return (
+      <Circle
+        radius={outline.radius}
+        x={outline.x}
+        y={outline.y}
+        {...sharedProps}
+        {...props}
+      />
+    );
+  } else {
+    return (
+      <Line
+        points={outline.points}
+        closed
+        tension={outline.points.length < 200 ? 0 : 0.33}
+        {...sharedProps}
+        {...props}
+      />
+    );
+  }
+}
+
+export default TokenOutline;
diff --git a/src/components/token/TokenStatus.js b/src/components/konva/TokenStatus.tsx
similarity index 77%
rename from src/components/token/TokenStatus.js
rename to src/components/konva/TokenStatus.tsx
index 8a6c436..fd0db1c 100644
--- a/src/components/token/TokenStatus.js
+++ b/src/components/konva/TokenStatus.tsx
@@ -1,9 +1,15 @@
-import React from "react";
 import { Circle, Group } from "react-konva";
 
 import colors from "../../helpers/colors";
+import { TokenState } from "../../types/TokenState";
 
-function TokenStatus({ tokenState, width, height }) {
+type TokenStatusProps = {
+  tokenState: TokenState;
+  width: number;
+  height: number;
+};
+
+function TokenStatus({ tokenState, width, height }: TokenStatusProps) {
   // Ensure statuses is an array and filter empty values
   const statuses = [...new Set((tokenState?.statuses || []).filter((s) => s))];
   return (
diff --git a/src/components/konva/Transformer.tsx b/src/components/konva/Transformer.tsx
new file mode 100644
index 0000000..7707a18
--- /dev/null
+++ b/src/components/konva/Transformer.tsx
@@ -0,0 +1,543 @@
+import Konva from "konva";
+import { Transform } from "konva/lib/Util";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  useGridCellPixelSize,
+  useGridSnappingSensitivity,
+} from "../../contexts/GridContext";
+import { useSetPreventMapInteraction } from "../../contexts/MapInteractionContext";
+import { useMapStage } from "../../contexts/MapStageContext";
+
+import { roundTo } from "../../helpers/shared";
+import Vector2 from "../../helpers/Vector2";
+import { parseGridScale } from "../../helpers/grid";
+
+import scaleDark from "../../images/ScaleDark.png";
+import rotateDark from "../../images/RotateDark.png";
+
+import { CustomTransformEventHandler } from "../../types/Events";
+
+type TransformerProps = {
+  active: boolean;
+  nodes: Konva.Node[];
+  attachments: Konva.Node[];
+  onTransformStart?: CustomTransformEventHandler;
+  onTransform?: CustomTransformEventHandler;
+  onTransformEnd?: CustomTransformEventHandler;
+  gridScale: string;
+  portalSelector: string;
+};
+
+export class CustomTransformer extends Konva.Transformer {
+  attachments: Konva.Node[] = [];
+
+  // Override fitNodesInto applying transform to attachments as well
+  _fitNodesInto(newAttrs: any, evt?: any) {
+    var oldAttrs = this._getNodeRect();
+
+    const minSize = 1;
+
+    if (
+      Konva.Util._inRange(
+        newAttrs.width,
+        -this.padding() * 2 - minSize,
+        minSize
+      )
+    ) {
+      this.update();
+      return;
+    }
+    if (
+      Konva.Util._inRange(
+        newAttrs.height,
+        -this.padding() * 2 - minSize,
+        minSize
+      )
+    ) {
+      this.update();
+      return;
+    }
+
+    const allowNegativeScale = this.flipEnabled();
+    var t = new Transform();
+    t.rotate(this.rotation());
+    if (
+      this._movingAnchorName &&
+      newAttrs.width < 0 &&
+      this._movingAnchorName.indexOf("left") >= 0
+    ) {
+      const offset = t.point({
+        x: -this.padding() * 2,
+        y: 0,
+      });
+      newAttrs.x += offset.x;
+      newAttrs.y += offset.y;
+      newAttrs.width += this.padding() * 2;
+      this._movingAnchorName = this._movingAnchorName.replace("left", "right");
+      this._anchorDragOffset.x -= offset.x;
+      this._anchorDragOffset.y -= offset.y;
+      if (!allowNegativeScale) {
+        this.update();
+        return;
+      }
+    } else if (
+      this._movingAnchorName &&
+      newAttrs.width < 0 &&
+      this._movingAnchorName.indexOf("right") >= 0
+    ) {
+      const offset = t.point({
+        x: this.padding() * 2,
+        y: 0,
+      });
+      this._movingAnchorName = this._movingAnchorName.replace("right", "left");
+      this._anchorDragOffset.x -= offset.x;
+      this._anchorDragOffset.y -= offset.y;
+      newAttrs.width += this.padding() * 2;
+      if (!allowNegativeScale) {
+        this.update();
+        return;
+      }
+    }
+    if (
+      this._movingAnchorName &&
+      newAttrs.height < 0 &&
+      this._movingAnchorName.indexOf("top") >= 0
+    ) {
+      const offset = t.point({
+        x: 0,
+        y: -this.padding() * 2,
+      });
+      newAttrs.x += offset.x;
+      newAttrs.y += offset.y;
+      this._movingAnchorName = this._movingAnchorName.replace("top", "bottom");
+      this._anchorDragOffset.x -= offset.x;
+      this._anchorDragOffset.y -= offset.y;
+      newAttrs.height += this.padding() * 2;
+      if (!allowNegativeScale) {
+        this.update();
+        return;
+      }
+    } else if (
+      this._movingAnchorName &&
+      newAttrs.height < 0 &&
+      this._movingAnchorName.indexOf("bottom") >= 0
+    ) {
+      const offset = t.point({
+        x: 0,
+        y: this.padding() * 2,
+      });
+      this._movingAnchorName = this._movingAnchorName.replace("bottom", "top");
+      this._anchorDragOffset.x -= offset.x;
+      this._anchorDragOffset.y -= offset.y;
+      newAttrs.height += this.padding() * 2;
+      if (!allowNegativeScale) {
+        this.update();
+        return;
+      }
+    }
+
+    if (this.boundBoxFunc()) {
+      const bounded = this.boundBoxFunc()(oldAttrs, newAttrs);
+      if (bounded) {
+        newAttrs = bounded;
+      } else {
+        Konva.Util.warn(
+          "boundBoxFunc returned falsy. You should return new bound rect from it!"
+        );
+      }
+    }
+
+    // base size value doesn't really matter
+    // we just need to think about bounding boxes as transforms
+    // but how?
+    // the idea is that we have a transformed rectangle with the size of "baseSize"
+    const baseSize = 10000000;
+    const oldTr = new Transform();
+    oldTr.translate(oldAttrs.x, oldAttrs.y);
+    oldTr.rotate(oldAttrs.rotation);
+    oldTr.scale(oldAttrs.width / baseSize, oldAttrs.height / baseSize);
+
+    const newTr = new Transform();
+    newTr.translate(newAttrs.x, newAttrs.y);
+    newTr.rotate(newAttrs.rotation);
+    newTr.scale(newAttrs.width / baseSize, newAttrs.height / baseSize);
+
+    // now lets think we had [old transform] and n ow we have [new transform]
+    // Now, the questions is: how can we transform "parent" to go from [old transform] into [new transform]
+    // in equation it will be:
+    // [delta transform] * [old transform] = [new transform]
+    // that means that
+    // [delta transform] = [new transform] * [old transform inverted]
+    const delta = newTr.multiply(oldTr.invert());
+
+    [...this._nodes, ...this.attachments].forEach((node) => {
+      // for each node we have the same [delta transform]
+      // the equations is
+      // [delta transform] * [parent transform] * [old local transform] = [parent transform] * [new local transform]
+      // and we need to find [new local transform]
+      // [new local] = [parent inverted] * [delta] * [parent] * [old local]
+      const parentTransform = node.getParent().getAbsoluteTransform();
+      const localTransform = node.getTransform().copy();
+      // skip offset:
+      localTransform.translate(node.offsetX(), node.offsetY());
+
+      const newLocalTransform = new Transform();
+      newLocalTransform
+        .multiply(parentTransform.copy().invert())
+        .multiply(delta)
+        .multiply(parentTransform)
+        .multiply(localTransform);
+
+      const attrs = newLocalTransform.decompose();
+      node.setAttrs(attrs);
+      this._fire("transform", { evt: evt, target: node });
+      node._fire("transform", { evt: evt, target: node });
+      node.getLayer()?.batchDraw();
+    });
+    this.rotation(Konva.Util._getRotation(newAttrs.rotation));
+    this._resetTransformCache();
+    this.update();
+    this.getLayer()?.batchDraw();
+  }
+}
+
+function Transformer({
+  active,
+  nodes,
+  attachments,
+  onTransformStart,
+  onTransform,
+  onTransformEnd,
+  gridScale,
+  portalSelector,
+}: TransformerProps) {
+  const setPreventMapInteraction = useSetPreventMapInteraction();
+
+  const gridCellPixelSize = useGridCellPixelSize();
+  const gridCellAbsoluteSizeRef = useRef({
+    x: 0,
+    y: 0,
+  });
+  const scale = parseGridScale(gridScale);
+
+  const snappingSensitivity = useGridSnappingSensitivity();
+  // Clamp snapping to 0 to accound for -1 snapping override
+  const gridSnappingSensitivity = useMemo(
+    () => Math.max(snappingSensitivity, 0),
+    [snappingSensitivity]
+  );
+
+  const mapStageRef = useMapStage();
+  const transformerRef = useRef<CustomTransformer | null>(null);
+
+  useEffect(() => {
+    let transformer = transformerRef.current;
+    const stage = mapStageRef.current;
+    if (active && stage && !transformer) {
+      transformer = new CustomTransformer({
+        centeredScaling: true,
+        rotateAnchorOffset: 16,
+        enabledAnchors: ["middle-left", "middle-right"],
+        flipEnabled: false,
+        ignoreStroke: true,
+        borderStroke: "invisible",
+        anchorStroke: "invisible",
+        anchorCornerRadius: 24,
+        borderStrokeWidth: 0,
+        anchorSize: 48,
+      });
+      const portal = stage.findOne<Konva.Group>(portalSelector);
+      if (portal) {
+        portal.add(transformer);
+        transformerRef.current = transformer;
+      }
+    }
+
+    return () => {
+      if (stage && transformer) {
+        transformer.destroy();
+        transformerRef.current = null;
+      }
+    };
+  }, [mapStageRef, portalSelector, active]);
+
+  useEffect(() => {
+    transformerRef.current?.boundBoxFunc((oldBox, newBox) => {
+      let snapBox = { ...newBox };
+      const movingAnchor = movingAnchorRef.current;
+      if (movingAnchor === "middle-left" || movingAnchor === "middle-right") {
+        // Account for grid snapping
+        const nearestCellWidth = roundTo(
+          snapBox.width,
+          gridCellAbsoluteSizeRef.current.x
+        );
+        const distanceToSnap = Math.abs(snapBox.width - nearestCellWidth);
+        let snapping = false;
+        if (
+          distanceToSnap <
+          gridCellAbsoluteSizeRef.current.x * gridSnappingSensitivity
+        ) {
+          snapBox.width = nearestCellWidth;
+          snapping = true;
+        }
+
+        const deltaWidth = snapBox.width - oldBox.width;
+        // Account for node ratio
+        const inverseRatio =
+          Math.round(oldBox.height) / Math.round(oldBox.width);
+        const deltaHeight = inverseRatio * deltaWidth;
+
+        // Account for node rotation
+        // Create a transform to unrotate the x,y position of the Box
+        const rotator = new Transform();
+        rotator.rotate(-snapBox.rotation);
+
+        // Unrotate and add the resize amount
+        let rotatedMin = rotator.point({ x: snapBox.x, y: snapBox.y });
+        rotatedMin.y = rotatedMin.y - deltaHeight / 2;
+        // Snap x position if needed
+        if (snapping) {
+          const snapDelta = newBox.width - nearestCellWidth;
+          rotatedMin.x = rotatedMin.x + snapDelta / 2;
+        }
+
+        // Rotated back
+        rotator.invert();
+        rotatedMin = rotator.point(rotatedMin);
+
+        snapBox = {
+          ...snapBox,
+          height: snapBox.height + deltaHeight,
+          x: rotatedMin.x,
+          y: rotatedMin.y,
+        };
+      }
+
+      if (snapBox.width < 5 || snapBox.height < 5) {
+        return oldBox;
+      }
+      return snapBox;
+    });
+  });
+
+  useEffect(() => {
+    transformerRef.current?.rotationSnaps(
+      snappingSensitivity === -1
+        ? [] // Disabled rotation snapping if grid snapping disabled with shortcut
+        : [...Array(24).keys()].map((n) => n * 15)
+    );
+  });
+
+  const movingAnchorRef = useRef<string>();
+  const transformTextRef = useRef<Konva.Group>();
+
+  useEffect(() => {
+    function updateGridCellAbsoluteSize() {
+      if (active) {
+        const transformer = transformerRef.current;
+        const stage = transformer?.getStage();
+        const mapImage = stage?.findOne("#mapImage");
+        if (!mapImage) {
+          return;
+        }
+
+        // Use min side for hex grids
+        const minSize = Vector2.componentMin(gridCellPixelSize);
+        const size = new Vector2(minSize, minSize);
+
+        // Get grid cell size in screen coordinates
+        const mapTransform = mapImage.getAbsoluteTransform();
+        const absoluteSize = Vector2.subtract(
+          mapTransform.point(size),
+          mapTransform.point({ x: 0, y: 0 })
+        );
+
+        gridCellAbsoluteSizeRef.current = absoluteSize;
+      }
+    }
+
+    function handleTransformStart(e: Konva.KonvaEventObject<Event>) {
+      const transformer = transformerRef.current;
+      if (transformer) {
+        movingAnchorRef.current = transformer._movingAnchorName;
+        setPreventMapInteraction(true);
+
+        const transformText = new Konva.Label();
+        const stageScale = transformer.getStage()?.scale() || { x: 1, y: 1 };
+        transformText.scale(Vector2.divide({ x: 1, y: 1 }, stageScale));
+
+        const tag = new Konva.Tag();
+        tag.fill("hsla(230, 25%, 15%, 0.8)");
+        tag.cornerRadius(4);
+        // @ts-ignore
+        tag.pointerDirection("down");
+        tag.pointerHeight(4);
+        tag.pointerWidth(4);
+
+        const text = new Konva.Text();
+        text.fontSize(16);
+        text.padding(4);
+        text.fill("white");
+
+        transformText.add(tag);
+        transformText.add(text);
+
+        transformer.getLayer()?.add(transformText);
+        transformTextRef.current = transformText;
+
+        updateGridCellAbsoluteSize();
+        updateTransformText();
+
+        onTransformStart && onTransformStart(e, attachments);
+      }
+    }
+
+    function updateTransformText() {
+      const movingAnchor = movingAnchorRef.current;
+      const transformText = transformTextRef.current;
+      const transformer = transformerRef.current;
+      const node = transformer?.nodes()[0];
+      if (node && transformText && transformer) {
+        const text = transformText.getChildren()[1] as Konva.Text;
+        if (movingAnchor === "rotater") {
+          text.text(`${node.rotation().toFixed(0)}°`);
+        } else {
+          const nodeRect = node.getClientRect({ skipShadow: true });
+          const nodeScale = Vector2.divide(
+            { x: nodeRect.width, y: nodeRect.height },
+            gridCellAbsoluteSizeRef.current
+          );
+          text.text(
+            `${(nodeScale.x * scale.multiplier).toFixed(scale.digits)}${
+              scale.unit
+            }`
+          );
+        }
+
+        const nodePosition = node.getStage()?.getPointerPosition();
+        if (nodePosition) {
+          transformText.absolutePosition({
+            x: nodePosition.x,
+            y: nodePosition.y,
+          });
+        }
+      }
+    }
+
+    function handleTransform(e: Konva.KonvaEventObject<Event>) {
+      updateTransformText();
+      onTransform?.(e, attachments);
+    }
+
+    function handleTransformEnd(e: Konva.KonvaEventObject<Event>) {
+      setPreventMapInteraction(false);
+      transformTextRef.current?.destroy();
+      transformTextRef.current = undefined;
+      onTransformEnd && onTransformEnd(e, attachments);
+    }
+
+    transformerRef.current?.on("transformstart", handleTransformStart);
+    transformerRef.current?.on("transform", handleTransform);
+    transformerRef.current?.on("transformend", handleTransformEnd);
+
+    return () => {
+      transformerRef.current?.off("transformstart", handleTransformStart);
+      transformerRef.current?.off("transform", handleTransform);
+      transformerRef.current?.off("transformend", handleTransformEnd);
+    };
+  });
+
+  const [anchorScale, anchorScaleStatus] = useAnchorImage(96, scaleDark);
+  const [anchorRotate, anchorRotateStatus] = useAnchorImage(96, rotateDark);
+
+  // Add nodes to transformer and setup
+  useEffect(() => {
+    const transformer = transformerRef.current;
+    if (
+      active &&
+      transformer &&
+      anchorScaleStatus === "loaded" &&
+      anchorRotateStatus === "loaded"
+    ) {
+      transformer.setNodes(nodes);
+      transformer.attachments = attachments;
+
+      const middleLeft = transformer.findOne<Konva.Rect>(".middle-left");
+      const middleRight = transformer.findOne<Konva.Rect>(".middle-right");
+      const rotater = transformer.findOne<Konva.Rect>(".rotater");
+
+      middleLeft.fillPriority("pattern");
+      middleLeft.fillPatternImage(anchorScale);
+      middleLeft.strokeEnabled(false);
+      middleLeft.fillPatternScaleX(-0.5);
+      middleLeft.fillPatternScaleY(0.5);
+
+      middleRight.fillPriority("pattern");
+      middleRight.fillPatternImage(anchorScale);
+      middleRight.strokeEnabled(false);
+      middleRight.fillPatternScaleX(0.5);
+      middleRight.fillPatternScaleY(0.5);
+
+      rotater.fillPriority("pattern");
+      rotater.fillPatternImage(anchorRotate);
+      rotater.strokeEnabled(false);
+      rotater.fillPatternScaleX(0.5);
+      rotater.fillPatternScaleY(0.5);
+
+      transformer.getLayer()?.batchDraw();
+    }
+  }, [
+    active,
+    nodes,
+    attachments,
+    anchorScale,
+    anchorRotate,
+    anchorScaleStatus,
+    anchorRotateStatus,
+  ]);
+
+  return null;
+}
+
+Transformer.defaultProps = {
+  portalSelector: "#portal",
+  attachments: [],
+};
+
+type AnchorImageStatus = "loading" | "loaded" | "failed";
+
+function useAnchorImage(
+  size: number,
+  source: string
+): [HTMLCanvasElement, AnchorImageStatus] {
+  const [canvas] = useState(document.createElement("canvas"));
+  const [status, setStatus] = useState<AnchorImageStatus>("loading");
+
+  useEffect(() => {
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    const image = new Image();
+    image.src = source;
+    image.onload = () => {
+      const imageRatio = image.width / image.height;
+      const imageWidth = canvas.height * imageRatio;
+      ctx?.drawImage(
+        image,
+        canvas.width / 2 - imageWidth / 2,
+        0,
+        imageWidth,
+        canvas.height
+      );
+      setStatus("loaded");
+    };
+    image.onerror = () => {
+      setStatus("failed");
+    };
+  }, [canvas, size, source]);
+
+  return [canvas, status];
+}
+
+export default Transformer;
diff --git a/src/components/map/DragOverlay.js b/src/components/map/DragOverlay.js
deleted file mode 100644
index 57f140e..0000000
--- a/src/components/map/DragOverlay.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Box, IconButton } from "theme-ui";
-
-import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
-
-function DragOverlay({ dragging, node, onRemove }) {
-  const [isRemoveHovered, setIsRemoveHovered] = useState(false);
-  const removeTokenRef = useRef();
-
-  // Detect token hover on remove icon manually to support touch devices
-  useEffect(() => {
-    const map = document.querySelector(".map");
-    const mapRect = map.getBoundingClientRect();
-
-    function detectRemoveHover() {
-      if (!node || !dragging || !removeTokenRef.current) {
-        return;
-      }
-      const stage = node.getStage();
-      if (!stage) {
-        return;
-      }
-      const pointerPosition = stage.getPointerPosition();
-      const screenSpacePointerPosition = {
-        x: pointerPosition.x + mapRect.left,
-        y: pointerPosition.y + mapRect.top,
-      };
-      const removeIconPosition = removeTokenRef.current.getBoundingClientRect();
-
-      if (
-        screenSpacePointerPosition.x > removeIconPosition.left &&
-        screenSpacePointerPosition.y > removeIconPosition.top &&
-        screenSpacePointerPosition.x < removeIconPosition.right &&
-        screenSpacePointerPosition.y < removeIconPosition.bottom
-      ) {
-        if (!isRemoveHovered) {
-          setIsRemoveHovered(true);
-        }
-      } else if (isRemoveHovered) {
-        setIsRemoveHovered(false);
-      }
-    }
-
-    let handler;
-    if (node && dragging) {
-      handler = setInterval(detectRemoveHover, 100);
-    }
-
-    return () => {
-      if (handler) {
-        clearInterval(handler);
-      }
-    };
-  }, [isRemoveHovered, dragging, node]);
-
-  // Detect drag end of token image and remove it if it is over the remove icon
-  useEffect(() => {
-    if (!dragging && node && isRemoveHovered) {
-      onRemove();
-    }
-  });
-
-  return (
-    dragging && (
-      <Box
-        sx={{
-          position: "absolute",
-          bottom: "32px",
-          left: "50%",
-          borderRadius: "50%",
-          transform: isRemoveHovered
-            ? "translateX(-50%) scale(2.0)"
-            : "translateX(-50%) scale(1.5)",
-          transition: "transform 250ms ease",
-          color: isRemoveHovered ? "primary" : "text",
-          pointerEvents: "none",
-        }}
-        bg="overlay"
-        ref={removeTokenRef}
-      >
-        <IconButton>
-          <RemoveTokenIcon />
-        </IconButton>
-      </Box>
-    )
-  );
-}
-
-export default DragOverlay;
diff --git a/src/components/map/DragOverlay.tsx b/src/components/map/DragOverlay.tsx
new file mode 100644
index 0000000..f0767fe
--- /dev/null
+++ b/src/components/map/DragOverlay.tsx
@@ -0,0 +1,101 @@
+import { useEffect, useRef, useState } from "react";
+import { Box, IconButton } from "theme-ui";
+
+import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
+import { useMapStage } from "../../contexts/MapStageContext";
+
+type DragOverlayProps = {
+  dragging: boolean;
+  onRemove: () => void;
+};
+
+function DragOverlay({ dragging, onRemove }: DragOverlayProps) {
+  const [isRemoveHovered, setIsRemoveHovered] = useState(false);
+  const removeTokenRef = useRef<HTMLDivElement>(null);
+
+  const mapStageRef = useMapStage();
+
+  // Detect token hover on remove icon manually to support touch devices
+  useEffect(() => {
+    function detectRemoveHover() {
+      const mapStage = mapStageRef.current;
+      if (!mapStage || !dragging || !removeTokenRef.current) {
+        return;
+      }
+      const map = document.querySelector(".map");
+      if (!map) {
+        return;
+      }
+      const mapRect = map.getBoundingClientRect();
+      const pointerPosition = mapStage.getPointerPosition();
+      if (!pointerPosition) {
+        return;
+      }
+      const screenSpacePointerPosition = {
+        x: pointerPosition.x + mapRect.left,
+        y: pointerPosition.y + mapRect.top,
+      };
+      const removeIconPosition = removeTokenRef.current.getBoundingClientRect();
+
+      if (
+        screenSpacePointerPosition.x > removeIconPosition.left &&
+        screenSpacePointerPosition.y > removeIconPosition.top &&
+        screenSpacePointerPosition.x < removeIconPosition.right &&
+        screenSpacePointerPosition.y < removeIconPosition.bottom
+      ) {
+        if (!isRemoveHovered) {
+          setIsRemoveHovered(true);
+        }
+      } else if (isRemoveHovered) {
+        setIsRemoveHovered(false);
+      }
+    }
+
+    let handler: NodeJS.Timeout;
+    if (dragging) {
+      handler = setInterval(detectRemoveHover, 100);
+    }
+
+    return () => {
+      if (handler) {
+        clearInterval(handler);
+      }
+    };
+  }, [isRemoveHovered, dragging, mapStageRef]);
+
+  // Detect drag end of token image and remove it if it is over the remove icon
+  useEffect(() => {
+    if (!dragging && isRemoveHovered) {
+      onRemove();
+    }
+  });
+
+  if (!dragging) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        bottom: "32px",
+        left: "50%",
+        borderRadius: "50%",
+        transform: isRemoveHovered
+          ? "translateX(-50%) scale(2.0)"
+          : "translateX(-50%) scale(1.5)",
+        transition: "transform 250ms ease",
+        color: isRemoveHovered ? "primary" : "text",
+        pointerEvents: "none",
+      }}
+      bg="overlay"
+      ref={removeTokenRef}
+    >
+      <IconButton>
+        <RemoveTokenIcon />
+      </IconButton>
+    </Box>
+  );
+}
+
+export default DragOverlay;
diff --git a/src/components/map/Map.js b/src/components/map/Map.js
deleted file mode 100644
index af5e9bc..0000000
--- a/src/components/map/Map.js
+++ /dev/null
@@ -1,373 +0,0 @@
-import React, { useState } from "react";
-import { Box } from "theme-ui";
-import { useToasts } from "react-toast-notifications";
-
-import MapControls from "./MapControls";
-import MapInteraction from "./MapInteraction";
-import MapTokens from "./MapTokens";
-import MapDrawing from "./MapDrawing";
-import MapFog from "./MapFog";
-import MapGrid from "./MapGrid";
-import MapMeasure from "./MapMeasure";
-import NetworkedMapPointer from "../../network/NetworkedMapPointer";
-import MapNotes from "./MapNotes";
-
-import { useTokenData } from "../../contexts/TokenDataContext";
-import { useSettings } from "../../contexts/SettingsContext";
-
-import TokenMenu from "../token/TokenMenu";
-import TokenDragOverlay from "../token/TokenDragOverlay";
-import NoteMenu from "../note/NoteMenu";
-import NoteDragOverlay from "../note/NoteDragOverlay";
-
-import {
-  AddShapeAction,
-  CutShapeAction,
-  EditShapeAction,
-  RemoveShapeAction,
-} from "../../actions";
-
-function Map({
-  map,
-  mapState,
-  mapActions,
-  onMapTokenStateChange,
-  onMapTokenStateRemove,
-  onMapChange,
-  onMapReset,
-  onMapDraw,
-  onMapDrawUndo,
-  onMapDrawRedo,
-  onFogDraw,
-  onFogDrawUndo,
-  onFogDrawRedo,
-  onMapNoteChange,
-  onMapNoteRemove,
-  allowMapDrawing,
-  allowFogDrawing,
-  allowMapChange,
-  allowNoteEditing,
-  disabledTokens,
-  session,
-}) {
-  const { addToast } = useToasts();
-
-  const { tokensById } = useTokenData();
-
-  const [selectedToolId, setSelectedToolId] = useState("move");
-  const { settings, setSettings } = useSettings();
-
-  function handleToolSettingChange(tool, change) {
-    setSettings((prevSettings) => ({
-      ...prevSettings,
-      [tool]: {
-        ...prevSettings[tool],
-        ...change,
-      },
-    }));
-  }
-
-  const drawShapes = Object.values(mapState?.drawShapes || {});
-  const fogShapes = Object.values(mapState?.fogShapes || {});
-
-  function handleToolAction(action) {
-    if (action === "eraseAll") {
-      onMapDraw(new RemoveShapeAction(drawShapes.map((s) => s.id)));
-    }
-    if (action === "mapUndo") {
-      onMapDrawUndo();
-    }
-    if (action === "mapRedo") {
-      onMapDrawRedo();
-    }
-    if (action === "fogUndo") {
-      onFogDrawUndo();
-    }
-    if (action === "fogRedo") {
-      onFogDrawRedo();
-    }
-  }
-
-  function handleMapShapeAdd(shape) {
-    onMapDraw(new AddShapeAction([shape]));
-  }
-
-  function handleMapShapesRemove(shapeIds) {
-    onMapDraw(new RemoveShapeAction(shapeIds));
-  }
-
-  function handleFogShapesAdd(shapes) {
-    onFogDraw(new AddShapeAction(shapes));
-  }
-
-  function handleFogShapesCut(shapes) {
-    onFogDraw(new CutShapeAction(shapes));
-  }
-
-  function handleFogShapesRemove(shapeIds) {
-    onFogDraw(new RemoveShapeAction(shapeIds));
-  }
-
-  function handleFogShapesEdit(shapes) {
-    onFogDraw(new EditShapeAction(shapes));
-  }
-
-  const disabledControls = [];
-  if (!allowMapDrawing) {
-    disabledControls.push("drawing");
-  }
-  if (!map) {
-    disabledControls.push("move");
-    disabledControls.push("measure");
-    disabledControls.push("pointer");
-  }
-  if (!allowFogDrawing) {
-    disabledControls.push("fog");
-  }
-  if (!allowMapChange) {
-    disabledControls.push("map");
-  }
-  if (!allowNoteEditing) {
-    disabledControls.push("note");
-  }
-
-  const disabledSettings = { fog: [], drawing: [] };
-  if (drawShapes.length === 0) {
-    disabledSettings.drawing.push("erase");
-  }
-  if (!mapState || mapActions.mapDrawActionIndex < 0) {
-    disabledSettings.drawing.push("undo");
-  }
-  if (
-    !mapState ||
-    mapActions.mapDrawActionIndex === mapActions.mapDrawActions.length - 1
-  ) {
-    disabledSettings.drawing.push("redo");
-  }
-  if (!mapState || mapActions.fogDrawActionIndex < 0) {
-    disabledSettings.fog.push("undo");
-  }
-  if (
-    !mapState ||
-    mapActions.fogDrawActionIndex === mapActions.fogDrawActions.length - 1
-  ) {
-    disabledSettings.fog.push("redo");
-  }
-
-  const mapControls = (
-    <MapControls
-      onMapChange={onMapChange}
-      onMapReset={onMapReset}
-      currentMap={map}
-      currentMapState={mapState}
-      onSelectedToolChange={setSelectedToolId}
-      selectedToolId={selectedToolId}
-      toolSettings={settings}
-      onToolSettingChange={handleToolSettingChange}
-      onToolAction={handleToolAction}
-      disabledControls={disabledControls}
-      disabledSettings={disabledSettings}
-    />
-  );
-
-  const [isTokenMenuOpen, setIsTokenMenuOpen] = useState(false);
-  const [tokenMenuOptions, setTokenMenuOptions] = useState({});
-  const [tokenDraggingOptions, setTokenDraggingOptions] = useState();
-  function handleTokenMenuOpen(tokenStateId, tokenImage) {
-    setTokenMenuOptions({ tokenStateId, tokenImage });
-    setIsTokenMenuOpen(true);
-  }
-
-  const mapTokens = map && mapState && (
-    <MapTokens
-      map={map}
-      mapState={mapState}
-      tokenDraggingOptions={tokenDraggingOptions}
-      setTokenDraggingOptions={setTokenDraggingOptions}
-      onMapTokenStateChange={onMapTokenStateChange}
-      handleTokenMenuOpen={handleTokenMenuOpen}
-      selectedToolId={selectedToolId}
-      disabledTokens={disabledTokens}
-    />
-  );
-
-  const tokenMenu = (
-    <TokenMenu
-      isOpen={isTokenMenuOpen}
-      onRequestClose={() => setIsTokenMenuOpen(false)}
-      onTokenStateChange={onMapTokenStateChange}
-      tokenState={mapState && mapState.tokens[tokenMenuOptions.tokenStateId]}
-      tokenImage={tokenMenuOptions.tokenImage}
-      map={map}
-    />
-  );
-
-  const tokenDragOverlay = tokenDraggingOptions && (
-    <TokenDragOverlay
-      onTokenStateRemove={(state) => {
-        onMapTokenStateRemove(state);
-        setTokenDraggingOptions(null);
-      }}
-      onTokenStateChange={onMapTokenStateChange}
-      tokenState={tokenDraggingOptions && tokenDraggingOptions.tokenState}
-      tokenGroup={tokenDraggingOptions && tokenDraggingOptions.tokenGroup}
-      dragging={!!(tokenDraggingOptions && tokenDraggingOptions.dragging)}
-      token={tokensById[tokenDraggingOptions.tokenState.tokenId]}
-    />
-  );
-
-  const mapDrawing = (
-    <MapDrawing
-      map={map}
-      shapes={drawShapes}
-      onShapeAdd={handleMapShapeAdd}
-      onShapesRemove={handleMapShapesRemove}
-      active={selectedToolId === "drawing"}
-      toolSettings={settings.drawing}
-    />
-  );
-
-  const mapFog = (
-    <MapFog
-      map={map}
-      shapes={fogShapes}
-      onShapesAdd={handleFogShapesAdd}
-      onShapesCut={handleFogShapesCut}
-      onShapesRemove={handleFogShapesRemove}
-      onShapesEdit={handleFogShapesEdit}
-      onShapeError={addToast}
-      active={selectedToolId === "fog"}
-      toolSettings={settings.fog}
-      editable={allowFogDrawing && !settings.fog.preview}
-    />
-  );
-
-  const mapGrid = map && map.showGrid && <MapGrid map={map} />;
-
-  const mapMeasure = (
-    <MapMeasure
-      map={map}
-      active={selectedToolId === "measure"}
-      selectedToolSettings={settings[selectedToolId]}
-    />
-  );
-
-  const mapPointer = (
-    <NetworkedMapPointer
-      active={selectedToolId === "pointer"}
-      session={session}
-    />
-  );
-
-  const [isNoteMenuOpen, setIsNoteMenuOpen] = useState(false);
-  const [noteMenuOptions, setNoteMenuOptions] = useState({});
-  const [noteDraggingOptions, setNoteDraggingOptions] = useState();
-  function handleNoteMenuOpen(noteId, noteNode) {
-    setNoteMenuOptions({ noteId, noteNode });
-    setIsNoteMenuOpen(true);
-  }
-
-  function sortNotes(a, b, noteDraggingOptions) {
-    if (
-      noteDraggingOptions &&
-      noteDraggingOptions.dragging &&
-      noteDraggingOptions.noteId === a.id
-    ) {
-      // If dragging token `a` move above
-      return 1;
-    } else if (
-      noteDraggingOptions &&
-      noteDraggingOptions.dragging &&
-      noteDraggingOptions.noteId === b.id
-    ) {
-      // If dragging token `b` move above
-      return -1;
-    } else {
-      // Else sort so last modified is on top
-      return a.lastModified - b.lastModified;
-    }
-  }
-
-  const mapNotes = (
-    <MapNotes
-      map={map}
-      active={selectedToolId === "note"}
-      selectedToolSettings={settings[selectedToolId]}
-      onNoteAdd={onMapNoteChange}
-      onNoteChange={onMapNoteChange}
-      notes={
-        mapState
-          ? Object.values(mapState.notes).sort((a, b) =>
-              sortNotes(a, b, noteDraggingOptions)
-            )
-          : []
-      }
-      onNoteMenuOpen={handleNoteMenuOpen}
-      draggable={
-        allowNoteEditing &&
-        (selectedToolId === "note" || selectedToolId === "move")
-      }
-      onNoteDragStart={(e, noteId) =>
-        setNoteDraggingOptions({ dragging: true, noteId, noteGroup: e.target })
-      }
-      onNoteDragEnd={() =>
-        setNoteDraggingOptions({ ...noteDraggingOptions, dragging: false })
-      }
-      fadeOnHover={selectedToolId === "drawing"}
-    />
-  );
-
-  const noteMenu = (
-    <NoteMenu
-      isOpen={isNoteMenuOpen}
-      onRequestClose={() => setIsNoteMenuOpen(false)}
-      onNoteChange={onMapNoteChange}
-      note={mapState && mapState.notes[noteMenuOptions.noteId]}
-      noteNode={noteMenuOptions.noteNode}
-      map={map}
-    />
-  );
-
-  const noteDragOverlay = (
-    <NoteDragOverlay
-      dragging={!!(noteDraggingOptions && noteDraggingOptions.dragging)}
-      noteGroup={noteDraggingOptions && noteDraggingOptions.noteGroup}
-      noteId={noteDraggingOptions && noteDraggingOptions.noteId}
-      onNoteRemove={(noteId) => {
-        onMapNoteRemove(noteId);
-        setNoteDraggingOptions(null);
-      }}
-    />
-  );
-
-  return (
-    <Box sx={{ flexGrow: 1 }}>
-      <MapInteraction
-        map={map}
-        mapState={mapState}
-        controls={
-          <>
-            {mapControls}
-            {tokenMenu}
-            {noteMenu}
-            {tokenDragOverlay}
-            {noteDragOverlay}
-          </>
-        }
-        selectedToolId={selectedToolId}
-        onSelectedToolChange={setSelectedToolId}
-        disabledControls={disabledControls}
-      >
-        {mapGrid}
-        {mapDrawing}
-        {mapNotes}
-        {mapTokens}
-        {mapFog}
-        {mapPointer}
-        {mapMeasure}
-      </MapInteraction>
-    </Box>
-  );
-}
-
-export default Map;
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
new file mode 100644
index 0000000..7c1565d
--- /dev/null
+++ b/src/components/map/Map.tsx
@@ -0,0 +1,243 @@
+import { useState } from "react";
+import { Box } from "theme-ui";
+import { useToasts } from "react-toast-notifications";
+
+import MapControls from "./MapControls";
+import MapInteraction from "./MapInteraction";
+import MapGrid from "./MapGrid";
+
+import DrawingTool from "../tools/DrawingTool";
+import FogTool from "../tools/FogTool";
+import MeasureTool from "../tools/MeasureTool";
+import NetworkedMapPointer from "../../network/NetworkedMapPointer";
+
+import { useSettings } from "../../contexts/SettingsContext";
+import { useUserId } from "../../contexts/UserIdContext";
+
+import Action from "../../actions/Action";
+import {
+  AddStatesAction,
+  CutFogAction,
+  EditStatesAction,
+  RemoveStatesAction,
+} from "../../actions";
+
+import Session from "../../network/Session";
+
+import { Drawing, DrawingState } from "../../types/Drawing";
+import { Fog, FogState } from "../../types/Fog";
+import { Map as MapType, MapToolId } from "../../types/Map";
+import { MapState } from "../../types/MapState";
+import { Settings } from "../../types/Settings";
+import {
+  MapChangeEventHandler,
+  MapResetEventHandler,
+  TokenStateRemoveHandler,
+  NoteChangeEventHandler,
+  NoteRemoveEventHander,
+  TokenStateChangeEventHandler,
+  NoteCreateEventHander,
+  SelectionItemsChangeEventHandler,
+  SelectionItemsRemoveEventHandler,
+  SelectionItemsCreateEventHandler,
+  TokensStateCreateHandler,
+} from "../../types/Events";
+
+import useMapTokens from "../../hooks/useMapTokens";
+import useMapNotes from "../../hooks/useMapNotes";
+import { MapActions } from "../../hooks/useMapActions";
+import useMapSelection from "../../hooks/useMapSelection";
+
+type MapProps = {
+  map: MapType | null;
+  mapState: MapState | null;
+  mapActions: MapActions;
+  onMapTokenStateChange: TokenStateChangeEventHandler;
+  onMapTokenStateRemove: TokenStateRemoveHandler;
+  onMapTokensStateCreate: TokensStateCreateHandler;
+  onSelectionItemsChange: SelectionItemsChangeEventHandler;
+  onSelectionItemsRemove: SelectionItemsRemoveEventHandler;
+  onSelectionItemsCreate: SelectionItemsCreateEventHandler;
+  onMapChange: MapChangeEventHandler;
+  onMapReset: MapResetEventHandler;
+  onMapDraw: (action: Action<DrawingState>) => void;
+  onFogDraw: (action: Action<FogState>) => void;
+  onMapNoteCreate: NoteCreateEventHander;
+  onMapNoteChange: NoteChangeEventHandler;
+  onMapNoteRemove: NoteRemoveEventHander;
+  allowMapChange: boolean;
+  session: Session;
+  onUndo: () => void;
+  onRedo: () => void;
+};
+
+function Map({
+  map,
+  mapState,
+  mapActions,
+  onMapTokenStateChange,
+  onMapTokenStateRemove,
+  onMapTokensStateCreate,
+  onSelectionItemsChange,
+  onSelectionItemsRemove,
+  onSelectionItemsCreate,
+  onMapChange,
+  onMapReset,
+  onMapDraw,
+  onFogDraw,
+  onMapNoteCreate,
+  onMapNoteChange,
+  onMapNoteRemove,
+  allowMapChange,
+  session,
+  onUndo,
+  onRedo,
+}: MapProps) {
+  const { addToast } = useToasts();
+
+  const userId = useUserId();
+
+  const [selectedToolId, setSelectedToolId] = useState<MapToolId>("move");
+  const { settings, setSettings } = useSettings();
+
+  function handleToolSettingChange(change: Partial<Settings>) {
+    setSettings((prevSettings) => ({
+      ...prevSettings,
+      ...change,
+    }));
+  }
+
+  const drawShapes = Object.values(mapState?.drawings || {});
+  const fogShapes = Object.values(mapState?.fogs || {});
+
+  function handleToolAction(action: string) {
+    if (action === "eraseAll") {
+      onMapDraw(new RemoveStatesAction(drawShapes.map((s) => s.id)));
+    }
+  }
+
+  function handleMapShapeAdd(shape: Drawing) {
+    onMapDraw(new AddStatesAction([shape]));
+  }
+
+  function handleMapShapesRemove(shapeIds: string[]) {
+    onMapDraw(new RemoveStatesAction(shapeIds));
+  }
+
+  function handleFogShapesAdd(shapes: Fog[]) {
+    onFogDraw(new AddStatesAction(shapes));
+  }
+
+  function handleFogShapesCut(shapes: Fog[]) {
+    onFogDraw(new CutFogAction(shapes));
+  }
+
+  function handleFogShapesRemove(shapeIds: string[]) {
+    onFogDraw(new RemoveStatesAction(shapeIds));
+  }
+
+  function handleFogShapesEdit(shapes: Partial<Fog>[]) {
+    onFogDraw(new EditStatesAction(shapes));
+  }
+
+  const { tokens, propTokens, tokenMenu, tokenDragOverlay } = useMapTokens(
+    map,
+    mapState,
+    onMapTokenStateChange,
+    onMapTokenStateRemove,
+    onMapTokensStateCreate,
+    selectedToolId
+  );
+
+  const { notes, noteMenu, noteDragOverlay } = useMapNotes(
+    map,
+    mapState,
+    onMapNoteCreate,
+    onMapNoteChange,
+    onMapNoteRemove,
+    selectedToolId
+  );
+
+  const { selectionTool, selectionMenu, selectionDragOverlay } =
+    useMapSelection(
+      map,
+      mapState,
+      onSelectionItemsChange,
+      onSelectionItemsRemove,
+      onSelectionItemsCreate,
+      selectedToolId,
+      settings.select
+    );
+
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <MapInteraction
+        map={map}
+        mapState={mapState}
+        controls={
+          <>
+            <MapControls
+              onMapChange={onMapChange}
+              onMapReset={onMapReset}
+              map={map}
+              mapState={mapState}
+              mapActions={mapActions}
+              allowMapChange={allowMapChange}
+              onSelectedToolChange={setSelectedToolId}
+              selectedToolId={selectedToolId}
+              toolSettings={settings}
+              onToolSettingChange={handleToolSettingChange}
+              onToolAction={handleToolAction}
+              onUndo={onUndo}
+              onRedo={onRedo}
+            />
+            {tokenMenu}
+            {noteMenu}
+            {selectionMenu}
+            {tokenDragOverlay}
+            {noteDragOverlay}
+            {selectionDragOverlay}
+          </>
+        }
+        selectedToolId={selectedToolId}
+        onSelectedToolChange={setSelectedToolId}
+      >
+        {map && map.showGrid && <MapGrid map={map} />}
+        {propTokens}
+        <DrawingTool
+          map={map}
+          drawings={drawShapes}
+          onDrawingAdd={handleMapShapeAdd}
+          onDrawingsRemove={handleMapShapesRemove}
+          active={selectedToolId === "drawing"}
+          toolSettings={settings.drawing}
+        />
+        {notes}
+        {tokens}
+        <FogTool
+          map={map}
+          shapes={fogShapes}
+          onShapesAdd={handleFogShapesAdd}
+          onShapesCut={handleFogShapesCut}
+          onShapesRemove={handleFogShapesRemove}
+          onShapesEdit={handleFogShapesEdit}
+          onShapeError={addToast}
+          active={selectedToolId === "fog"}
+          toolSettings={settings.fog}
+          editable={
+            !!(map?.owner === userId || mapState?.editFlags.includes("fog")) &&
+            !settings.fog.preview
+          }
+        />
+        <NetworkedMapPointer
+          active={selectedToolId === "pointer"}
+          session={session}
+        />
+        <MeasureTool map={map} active={selectedToolId === "measure"} />
+        {selectionTool}
+      </MapInteraction>
+    </Box>
+  );
+}
+
+export default Map;
diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js
deleted file mode 100644
index 44b3f77..0000000
--- a/src/components/map/MapControls.js
+++ /dev/null
@@ -1,226 +0,0 @@
-import React, { useState, Fragment } from "react";
-import { IconButton, Flex, Box } from "theme-ui";
-
-import RadioIconButton from "../RadioIconButton";
-import Divider from "../Divider";
-
-import SelectMapButton from "./SelectMapButton";
-
-import FogToolSettings from "./controls/FogToolSettings";
-import DrawingToolSettings from "./controls/DrawingToolSettings";
-import PointerToolSettings from "./controls/PointerToolSettings";
-
-import MoveToolIcon from "../../icons/MoveToolIcon";
-import FogToolIcon from "../../icons/FogToolIcon";
-import BrushToolIcon from "../../icons/BrushToolIcon";
-import MeasureToolIcon from "../../icons/MeasureToolIcon";
-import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
-import PointerToolIcon from "../../icons/PointerToolIcon";
-import FullScreenIcon from "../../icons/FullScreenIcon";
-import FullScreenExitIcon from "../../icons/FullScreenExitIcon";
-import NoteToolIcon from "../../icons/NoteToolIcon";
-
-import useSetting from "../../hooks/useSetting";
-
-function MapContols({
-  onMapChange,
-  onMapReset,
-  currentMap,
-  currentMapState,
-  selectedToolId,
-  onSelectedToolChange,
-  toolSettings,
-  onToolSettingChange,
-  onToolAction,
-  disabledControls,
-  disabledSettings,
-}) {
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [fullScreen, setFullScreen] = useSetting("map.fullScreen");
-
-  const toolsById = {
-    move: {
-      id: "move",
-      icon: <MoveToolIcon />,
-      title: "Move Tool (W)",
-    },
-    fog: {
-      id: "fog",
-      icon: <FogToolIcon />,
-      title: "Fog Tool (F)",
-      SettingsComponent: FogToolSettings,
-    },
-    drawing: {
-      id: "drawing",
-      icon: <BrushToolIcon />,
-      title: "Drawing Tool (D)",
-      SettingsComponent: DrawingToolSettings,
-    },
-    measure: {
-      id: "measure",
-      icon: <MeasureToolIcon />,
-      title: "Measure Tool (M)",
-    },
-    pointer: {
-      id: "pointer",
-      icon: <PointerToolIcon />,
-      title: "Pointer Tool (Q)",
-      SettingsComponent: PointerToolSettings,
-    },
-    note: {
-      id: "note",
-      icon: <NoteToolIcon />,
-      title: "Note Tool (N)",
-    },
-  };
-  const tools = ["move", "fog", "drawing", "measure", "pointer", "note"];
-
-  const sections = [
-    {
-      id: "map",
-      component: (
-        <SelectMapButton
-          onMapChange={onMapChange}
-          onMapReset={onMapReset}
-          currentMap={currentMap}
-          currentMapState={currentMapState}
-          disabled={disabledControls.includes("map")}
-        />
-      ),
-    },
-    {
-      id: "tools",
-      component: tools.map((tool) => (
-        <RadioIconButton
-          key={tool}
-          title={toolsById[tool].title}
-          onClick={() => onSelectedToolChange(tool)}
-          isSelected={selectedToolId === tool}
-          disabled={disabledControls.includes(tool)}
-        >
-          {toolsById[tool].icon}
-        </RadioIconButton>
-      )),
-    },
-  ];
-
-  let controls = null;
-  if (sections.length === 1 && sections[0].id === "map") {
-    controls = (
-      <Box
-        sx={{
-          display: "block",
-          backgroundColor: "overlay",
-          borderRadius: "4px",
-        }}
-        m={2}
-      >
-        {sections[0].component}
-      </Box>
-    );
-  } else if (sections.length > 0) {
-    controls = (
-      <>
-        <IconButton
-          aria-label={isExpanded ? "Hide Map Controls" : "Show Map Controls"}
-          title={isExpanded ? "Hide Map Controls" : "Show Map Controls"}
-          onClick={() => setIsExpanded(!isExpanded)}
-          sx={{
-            transform: `rotate(${isExpanded ? "0" : "180deg"})`,
-            display: "block",
-            backgroundColor: "overlay",
-            borderRadius: "50%",
-          }}
-          m={2}
-        >
-          <ExpandMoreIcon />
-        </IconButton>
-        <Box
-          sx={{
-            flexDirection: "column",
-            alignItems: "center",
-            display: isExpanded ? "flex" : "none",
-            backgroundColor: "overlay",
-            borderRadius: "4px",
-          }}
-          p={2}
-        >
-          {sections.map((section, index) => (
-            <Fragment key={section.id}>
-              {section.component}
-              {index !== sections.length - 1 && <Divider />}
-            </Fragment>
-          ))}
-        </Box>
-      </>
-    );
-  }
-
-  function getToolSettings() {
-    const Settings = toolsById[selectedToolId].SettingsComponent;
-    if (Settings) {
-      return (
-        <Box
-          sx={{
-            position: "absolute",
-            top: "4px",
-            left: "50%",
-            transform: "translateX(-50%)",
-            backgroundColor: "overlay",
-            borderRadius: "4px",
-          }}
-          p={1}
-        >
-          <Settings
-            settings={toolSettings[selectedToolId]}
-            onSettingChange={(change) =>
-              onToolSettingChange(selectedToolId, change)
-            }
-            onToolAction={onToolAction}
-            disabledActions={disabledSettings[selectedToolId]}
-          />
-        </Box>
-      );
-    } else {
-      return null;
-    }
-  }
-
-  return (
-    <>
-      <Flex
-        sx={{
-          position: "absolute",
-          top: 0,
-          right: 0,
-          flexDirection: "column",
-          alignItems: "center",
-        }}
-        mx={1}
-      >
-        {controls}
-      </Flex>
-      {getToolSettings()}
-      <Box
-        sx={{
-          position: "absolute",
-          right: "4px",
-          bottom: 0,
-          backgroundColor: "overlay",
-          borderRadius: "50%",
-        }}
-        m={2}
-      >
-        <IconButton
-          onClick={() => setFullScreen(!fullScreen)}
-          aria-label={fullScreen ? "Exit Full Screen" : "Enter Full Screen"}
-          title={fullScreen ? "Exit Full Screen" : "Enter Full Screen"}
-        >
-          {fullScreen ? <FullScreenExitIcon /> : <FullScreenIcon />}
-        </IconButton>
-      </Box>
-    </>
-  );
-}
-
-export default MapContols;
diff --git a/src/components/map/MapControls.tsx b/src/components/map/MapControls.tsx
new file mode 100644
index 0000000..d24351b
--- /dev/null
+++ b/src/components/map/MapControls.tsx
@@ -0,0 +1,390 @@
+import { useState, Fragment, useEffect, useMemo } from "react";
+import { IconButton, Flex, Box } from "theme-ui";
+
+import RadioIconButton from "../RadioIconButton";
+import Divider from "../Divider";
+
+import SelectMapButton from "./SelectMapButton";
+
+import FogToolSettings from "../controls/FogToolSettings";
+import DrawingToolSettings from "../controls/DrawingToolSettings";
+import PointerToolSettings from "../controls/PointerToolSettings";
+import SelectToolSettings from "../controls/SelectToolSettings";
+
+import MoveToolIcon from "../../icons/MoveToolIcon";
+import FogToolIcon from "../../icons/FogToolIcon";
+import BrushToolIcon from "../../icons/BrushToolIcon";
+import MeasureToolIcon from "../../icons/MeasureToolIcon";
+import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
+import PointerToolIcon from "../../icons/PointerToolIcon";
+import FullScreenIcon from "../../icons/FullScreenIcon";
+import FullScreenExitIcon from "../../icons/FullScreenExitIcon";
+import NoteToolIcon from "../../icons/NoteToolIcon";
+import SelectToolIcon from "../../icons/SelectToolIcon";
+
+import UndoButton from "../controls/shared/UndoButton";
+import RedoButton from "../controls/shared/RedoButton";
+
+import useSetting from "../../hooks/useSetting";
+
+import { Map, MapTool, MapToolId } from "../../types/Map";
+import { MapState } from "../../types/MapState";
+import {
+  MapChangeEventHandler,
+  MapResetEventHandler,
+} from "../../types/Events";
+import { Settings } from "../../types/Settings";
+
+import { useKeyboard } from "../../contexts/KeyboardContext";
+
+import shortcuts from "../../shortcuts";
+import { useUserId } from "../../contexts/UserIdContext";
+import { isEmpty } from "../../helpers/shared";
+import { MapActions } from "../../hooks/useMapActions";
+
+type MapControlsProps = {
+  onMapChange: MapChangeEventHandler;
+  onMapReset: MapResetEventHandler;
+  map: Map | null;
+  mapState: MapState | null;
+  mapActions: MapActions;
+  allowMapChange: boolean;
+  selectedToolId: MapToolId;
+  onSelectedToolChange: (toolId: MapToolId) => void;
+  toolSettings: Settings;
+  onToolSettingChange: (change: Partial<Settings>) => void;
+  onToolAction: (actionId: string) => void;
+  onUndo: () => void;
+  onRedo: () => void;
+};
+
+function MapContols({
+  onMapChange,
+  onMapReset,
+  map,
+  mapState,
+  mapActions,
+  allowMapChange,
+  selectedToolId,
+  onSelectedToolChange,
+  toolSettings,
+  onToolSettingChange,
+  onToolAction,
+  onUndo,
+  onRedo,
+}: MapControlsProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [fullScreen, setFullScreen] = useSetting("map.fullScreen");
+
+  const userId = useUserId();
+
+  const disabledControls = useMemo(() => {
+    const isOwner = map && map.owner === userId;
+    const allowMapDrawing = isOwner || mapState?.editFlags.includes("drawing");
+    const allowFogDrawing = isOwner || mapState?.editFlags.includes("fog");
+    const allowNoteEditing = isOwner || mapState?.editFlags.includes("notes");
+
+    const disabled: MapToolId[] = [];
+    if (!allowMapChange) {
+      disabled.push("map");
+    }
+    if (!map) {
+      disabled.push("move");
+      disabled.push("measure");
+      disabled.push("pointer");
+      disabled.push("select");
+    }
+    if (!map || !allowMapDrawing) {
+      disabled.push("drawing");
+    }
+    if (!map || !allowFogDrawing) {
+      disabled.push("fog");
+    }
+    if (!map || !allowNoteEditing) {
+      disabled.push("note");
+    }
+    if (!map || mapActions.actionIndex < 0) {
+      disabled.push("undo");
+    }
+    if (!map || mapActions.actionIndex === mapActions.actions.length - 1) {
+      disabled.push("redo");
+    }
+    return disabled;
+  }, [map, mapState, mapActions, allowMapChange, userId]);
+
+  // Change back to move tool if selected tool becomes disabled
+  useEffect(() => {
+    if (disabledControls.includes(selectedToolId)) {
+      onSelectedToolChange("move");
+    }
+  }, [selectedToolId, disabledControls, onSelectedToolChange]);
+
+  const disabledSettings = useMemo(() => {
+    const disabled: Partial<Record<keyof Settings, string[]>> = {
+      drawing: [],
+    };
+    if (mapState && isEmpty(mapState.drawings)) {
+      disabled.drawing?.push("erase");
+    }
+    return disabled;
+  }, [mapState]);
+
+  const toolsById: Record<string, MapTool> = {
+    move: {
+      id: "move",
+      icon: <MoveToolIcon />,
+      title: "Move Tool (W)",
+    },
+    select: {
+      id: "select",
+      icon: <SelectToolIcon />,
+      title: "Select Tool (S)",
+      SettingsComponent: SelectToolSettings,
+    },
+    fog: {
+      id: "fog",
+      icon: <FogToolIcon />,
+      title: "Fog Tool (F)",
+      SettingsComponent: FogToolSettings,
+    },
+    drawing: {
+      id: "drawing",
+      icon: <BrushToolIcon />,
+      title: "Drawing Tool (D)",
+      SettingsComponent: DrawingToolSettings,
+    },
+    measure: {
+      id: "measure",
+      icon: <MeasureToolIcon />,
+      title: "Measure Tool (M)",
+    },
+    pointer: {
+      id: "pointer",
+      icon: <PointerToolIcon />,
+      title: "Pointer Tool (Q)",
+      SettingsComponent: PointerToolSettings,
+    },
+    note: {
+      id: "note",
+      icon: <NoteToolIcon />,
+      title: "Note Tool (N)",
+    },
+  };
+  const tools: MapToolId[] = [
+    "move",
+    "select",
+    "fog",
+    "drawing",
+    "measure",
+    "pointer",
+    "note",
+  ];
+
+  const sections = [
+    {
+      id: "map",
+      component: (
+        <SelectMapButton
+          onMapChange={onMapChange}
+          onMapReset={onMapReset}
+          currentMap={map}
+          currentMapState={mapState}
+          disabled={disabledControls.includes("map")}
+        />
+      ),
+    },
+    {
+      id: "tools",
+      component: tools.map((tool) => (
+        <RadioIconButton
+          key={tool}
+          title={toolsById[tool].title}
+          onClick={() => onSelectedToolChange(tool)}
+          isSelected={selectedToolId === tool}
+          disabled={disabledControls.includes(tool)}
+        >
+          {toolsById[tool].icon}
+        </RadioIconButton>
+      )),
+    },
+    {
+      id: "history",
+      component: (
+        <>
+          <UndoButton
+            onClick={onUndo}
+            disabled={disabledControls.includes("undo")}
+          />
+          <RedoButton
+            onClick={onRedo}
+            disabled={disabledControls.includes("redo")}
+          />
+        </>
+      ),
+    },
+  ];
+
+  let controls = null;
+  if (sections.length === 1 && sections[0].id === "map") {
+    controls = (
+      <Box
+        sx={{
+          display: "block",
+          backgroundColor: "overlay",
+          borderRadius: "4px",
+        }}
+        m={2}
+      >
+        {sections[0].component}
+      </Box>
+    );
+  } else if (sections.length > 0) {
+    controls = (
+      <>
+        <IconButton
+          aria-label={isExpanded ? "Hide Map Controls" : "Show Map Controls"}
+          title={isExpanded ? "Hide Map Controls" : "Show Map Controls"}
+          onClick={() => setIsExpanded(!isExpanded)}
+          sx={{
+            transform: `rotate(${isExpanded ? "0" : "180deg"})`,
+            display: "block",
+            backgroundColor: "overlay",
+            borderRadius: "50%",
+          }}
+          m={2}
+        >
+          <ExpandMoreIcon />
+        </IconButton>
+        <Box
+          sx={{
+            flexDirection: "column",
+            alignItems: "center",
+            display: isExpanded ? "flex" : "none",
+            backgroundColor: "overlay",
+            borderRadius: "4px",
+          }}
+          p={2}
+        >
+          {sections.map((section, index) => (
+            <Fragment key={section.id}>
+              {section.component}
+              {index !== sections.length - 1 && <Divider />}
+            </Fragment>
+          ))}
+        </Box>
+      </>
+    );
+  }
+
+  function getToolSettings() {
+    const Settings = toolsById[selectedToolId].SettingsComponent;
+    if (
+      !Settings ||
+      (selectedToolId !== "fog" &&
+        selectedToolId !== "drawing" &&
+        selectedToolId !== "pointer" &&
+        selectedToolId !== "select")
+    ) {
+      return null;
+    }
+    return (
+      <Box
+        sx={{
+          position: "absolute",
+          top: "4px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          backgroundColor: "overlay",
+          borderRadius: "4px",
+        }}
+        p={1}
+      >
+        <Settings
+          settings={toolSettings[selectedToolId]}
+          onSettingChange={(
+            change: Partial<Settings["fog" | "drawing" | "pointer" | "select"]>
+          ) =>
+            onToolSettingChange({
+              [selectedToolId]: {
+                ...toolSettings[selectedToolId],
+                ...change,
+              },
+            })
+          }
+          onToolAction={onToolAction}
+          disabledActions={disabledSettings[selectedToolId]}
+        />
+      </Box>
+    );
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (shortcuts.moveTool(event) && !disabledControls.includes("move")) {
+      onSelectedToolChange("move");
+    }
+    if (shortcuts.selectTool(event) && !disabledControls.includes("select")) {
+      onSelectedToolChange("select");
+    }
+    if (shortcuts.drawingTool(event) && !disabledControls.includes("drawing")) {
+      onSelectedToolChange("drawing");
+    }
+    if (shortcuts.fogTool(event) && !disabledControls.includes("fog")) {
+      onSelectedToolChange("fog");
+    }
+    if (shortcuts.measureTool(event) && !disabledControls.includes("measure")) {
+      onSelectedToolChange("measure");
+    }
+    if (shortcuts.pointerTool(event) && !disabledControls.includes("pointer")) {
+      onSelectedToolChange("pointer");
+    }
+    if (shortcuts.noteTool(event) && !disabledControls.includes("note")) {
+      onSelectedToolChange("note");
+    }
+    if (shortcuts.redo(event) && !disabledControls.includes("redo")) {
+      onRedo();
+    }
+    if (shortcuts.undo(event) && !disabledControls.includes("undo")) {
+      onUndo();
+    }
+  }
+
+  useKeyboard(handleKeyDown);
+
+  return (
+    <>
+      <Flex
+        sx={{
+          position: "absolute",
+          top: 0,
+          right: 0,
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+        mx={1}
+      >
+        {controls}
+      </Flex>
+      {getToolSettings()}
+      <Box
+        sx={{
+          position: "absolute",
+          right: "4px",
+          bottom: 0,
+          backgroundColor: "overlay",
+          borderRadius: "50%",
+        }}
+        m={2}
+      >
+        <IconButton
+          onClick={() => setFullScreen(!fullScreen)}
+          aria-label={fullScreen ? "Exit Full Screen" : "Enter Full Screen"}
+          title={fullScreen ? "Exit Full Screen" : "Enter Full Screen"}
+        >
+          {fullScreen ? <FullScreenExitIcon /> : <FullScreenIcon />}
+        </IconButton>
+      </Box>
+    </>
+  );
+}
+
+export default MapContols;
diff --git a/src/components/map/MapDrawing.js b/src/components/map/MapDrawing.js
deleted file mode 100644
index ccce9fd..0000000
--- a/src/components/map/MapDrawing.js
+++ /dev/null
@@ -1,282 +0,0 @@
-import React, { useState, useEffect } from "react";
-import shortid from "shortid";
-import { Group, Line, Rect, Circle } from "react-konva";
-
-import {
-  useDebouncedStageScale,
-  useMapWidth,
-  useMapHeight,
-  useInteractionEmitter,
-} from "../../contexts/MapInteractionContext";
-import { useMapStage } from "../../contexts/MapStageContext";
-import {
-  useGridCellNormalizedSize,
-  useGridStrokeWidth,
-} from "../../contexts/GridContext";
-
-import Vector2 from "../../helpers/Vector2";
-import {
-  getDefaultShapeData,
-  getUpdatedShapeData,
-  simplifyPoints,
-} from "../../helpers/drawing";
-import colors from "../../helpers/colors";
-import { getRelativePointerPosition } from "../../helpers/konva";
-
-import useGridSnapping from "../../hooks/useGridSnapping";
-
-function MapDrawing({
-  map,
-  shapes,
-  onShapeAdd,
-  onShapesRemove,
-  active,
-  toolSettings,
-}) {
-  const stageScale = useDebouncedStageScale();
-  const mapWidth = useMapWidth();
-  const mapHeight = useMapHeight();
-  const interactionEmitter = useInteractionEmitter();
-
-  const gridCellNormalizedSize = useGridCellNormalizedSize();
-  const gridStrokeWidth = useGridStrokeWidth();
-
-  const mapStageRef = useMapStage();
-  const [drawingShape, setDrawingShape] = useState(null);
-  const [isBrushDown, setIsBrushDown] = useState(false);
-  const [erasingShapes, setErasingShapes] = useState([]);
-
-  const shouldHover = toolSettings.type === "erase" && active;
-  const isBrush =
-    toolSettings.type === "brush" || toolSettings.type === "paint";
-  const isShape =
-    toolSettings.type === "line" ||
-    toolSettings.type === "rectangle" ||
-    toolSettings.type === "circle" ||
-    toolSettings.type === "triangle";
-
-  const snapPositionToGrid = useGridSnapping();
-
-  useEffect(() => {
-    if (!active) {
-      return;
-    }
-    const mapStage = mapStageRef.current;
-
-    function getBrushPosition() {
-      const mapImage = mapStage.findOne("#mapImage");
-      let position = getRelativePointerPosition(mapImage);
-      if (map.snapToGrid && isShape) {
-        position = snapPositionToGrid(position);
-      }
-      return Vector2.divide(position, {
-        x: mapImage.width(),
-        y: mapImage.height(),
-      });
-    }
-
-    function handleBrushDown() {
-      const brushPosition = getBrushPosition();
-      const commonShapeData = {
-        color: toolSettings.color,
-        blend: toolSettings.useBlending,
-        id: shortid.generate(),
-      };
-      if (isBrush) {
-        setDrawingShape({
-          type: "path",
-          pathType: toolSettings.type === "brush" ? "stroke" : "fill",
-          data: { points: [brushPosition] },
-          strokeWidth: toolSettings.type === "brush" ? 1 : 0,
-          ...commonShapeData,
-        });
-      } else if (isShape) {
-        setDrawingShape({
-          type: "shape",
-          shapeType: toolSettings.type,
-          data: getDefaultShapeData(toolSettings.type, brushPosition),
-          strokeWidth: toolSettings.type === "line" ? 1 : 0,
-          ...commonShapeData,
-        });
-      }
-      setIsBrushDown(true);
-    }
-
-    function handleBrushMove() {
-      const brushPosition = getBrushPosition();
-      if (isBrushDown && drawingShape) {
-        if (isBrush) {
-          setDrawingShape((prevShape) => {
-            const prevPoints = prevShape.data.points;
-            if (
-              Vector2.compare(
-                prevPoints[prevPoints.length - 1],
-                brushPosition,
-                0.001
-              )
-            ) {
-              return prevShape;
-            }
-            const simplified = simplifyPoints(
-              [...prevPoints, brushPosition],
-              1 / 1000 / stageScale
-            );
-            return {
-              ...prevShape,
-              data: { points: simplified },
-            };
-          });
-        } else if (isShape) {
-          setDrawingShape((prevShape) => ({
-            ...prevShape,
-            data: getUpdatedShapeData(
-              prevShape.shapeType,
-              prevShape.data,
-              brushPosition,
-              gridCellNormalizedSize,
-              mapWidth,
-              mapHeight
-            ),
-          }));
-        }
-      }
-    }
-
-    function handleBrushUp() {
-      if (isBrush && drawingShape) {
-        if (drawingShape.data.points.length > 1) {
-          onShapeAdd(drawingShape);
-        }
-      } else if (isShape && drawingShape) {
-        onShapeAdd(drawingShape);
-      }
-
-      eraseHoveredShapes();
-
-      setDrawingShape(null);
-      setIsBrushDown(false);
-    }
-
-    interactionEmitter.on("dragStart", handleBrushDown);
-    interactionEmitter.on("drag", handleBrushMove);
-    interactionEmitter.on("dragEnd", handleBrushUp);
-
-    return () => {
-      interactionEmitter.off("dragStart", handleBrushDown);
-      interactionEmitter.off("drag", handleBrushMove);
-      interactionEmitter.off("dragEnd", handleBrushUp);
-    };
-  });
-
-  function handleShapeOver(shape, isDown) {
-    if (shouldHover && isDown) {
-      if (erasingShapes.findIndex((s) => s.id === shape.id) === -1) {
-        setErasingShapes((prevShapes) => [...prevShapes, shape]);
-      }
-    }
-  }
-
-  function eraseHoveredShapes() {
-    if (erasingShapes.length > 0) {
-      onShapesRemove(erasingShapes.map((shape) => shape.id));
-      setErasingShapes([]);
-    }
-  }
-
-  function renderShape(shape) {
-    const defaultProps = {
-      key: shape.id,
-      onMouseMove: () => handleShapeOver(shape, isBrushDown),
-      onTouchOver: () => handleShapeOver(shape, isBrushDown),
-      onMouseDown: () => handleShapeOver(shape, true),
-      onTouchStart: () => handleShapeOver(shape, true),
-      onMouseUp: eraseHoveredShapes,
-      onTouchEnd: eraseHoveredShapes,
-      fill: colors[shape.color] || shape.color,
-      opacity: shape.blend ? 0.5 : 1,
-      id: shape.id,
-    };
-    if (shape.type === "path") {
-      return (
-        <Line
-          points={shape.data.points.reduce(
-            (acc, point) => [...acc, point.x * mapWidth, point.y * mapHeight],
-            []
-          )}
-          stroke={colors[shape.color] || shape.color}
-          tension={0.5}
-          closed={shape.pathType === "fill"}
-          fillEnabled={shape.pathType === "fill"}
-          lineCap="round"
-          lineJoin="round"
-          strokeWidth={gridStrokeWidth * shape.strokeWidth}
-          {...defaultProps}
-        />
-      );
-    } else if (shape.type === "shape") {
-      if (shape.shapeType === "rectangle") {
-        return (
-          <Rect
-            x={shape.data.x * mapWidth}
-            y={shape.data.y * mapHeight}
-            width={shape.data.width * mapWidth}
-            height={shape.data.height * mapHeight}
-            {...defaultProps}
-          />
-        );
-      } else if (shape.shapeType === "circle") {
-        const minSide = mapWidth < mapHeight ? mapWidth : mapHeight;
-        return (
-          <Circle
-            x={shape.data.x * mapWidth}
-            y={shape.data.y * mapHeight}
-            radius={shape.data.radius * minSide}
-            {...defaultProps}
-          />
-        );
-      } else if (shape.shapeType === "triangle") {
-        return (
-          <Line
-            points={shape.data.points.reduce(
-              (acc, point) => [...acc, point.x * mapWidth, point.y * mapHeight],
-              []
-            )}
-            closed={true}
-            {...defaultProps}
-          />
-        );
-      } else if (shape.shapeType === "line") {
-        return (
-          <Line
-            points={shape.data.points.reduce(
-              (acc, point) => [...acc, point.x * mapWidth, point.y * mapHeight],
-              []
-            )}
-            strokeWidth={gridStrokeWidth * shape.strokeWidth}
-            stroke={colors[shape.color] || shape.color}
-            lineCap="round"
-            {...defaultProps}
-          />
-        );
-      }
-    }
-  }
-
-  function renderErasingShape(shape) {
-    const eraseShape = {
-      ...shape,
-      color: "#BB99FF",
-    };
-    return renderShape(eraseShape);
-  }
-
-  return (
-    <Group>
-      {shapes.map(renderShape)}
-      {drawingShape && renderShape(drawingShape)}
-      {erasingShapes.length > 0 && erasingShapes.map(renderErasingShape)}
-    </Group>
-  );
-}
-
-export default MapDrawing;
diff --git a/src/components/map/MapEditBar.js b/src/components/map/MapEditBar.tsx
similarity index 84%
rename from src/components/map/MapEditBar.js
rename to src/components/map/MapEditBar.tsx
index c1ec6a4..84a9942 100644
--- a/src/components/map/MapEditBar.js
+++ b/src/components/map/MapEditBar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Flex, Close, IconButton } from "theme-ui";
 
 import { groupsFromIds, itemsFromGroups } from "../../helpers/group";
@@ -13,13 +13,32 @@ import { useMapData } from "../../contexts/MapDataContext";
 import { useKeyboard } from "../../contexts/KeyboardContext";
 
 import shortcuts from "../../shortcuts";
+import { Map } from "../../types/Map";
+import {
+  MapChangeEventHandler,
+  MapResetEventHandler,
+} from "../../types/Events";
 
-function MapEditBar({ currentMap, disabled, onMapChange, onMapReset, onLoad }) {
+type MapEditBarProps = {
+  currentMap: Map | null;
+  disabled: boolean;
+  onMapChange: MapChangeEventHandler;
+  onMapReset: MapResetEventHandler;
+  onLoad: (loading: boolean) => void;
+};
+
+function MapEditBar({
+  currentMap,
+  disabled,
+  onMapChange,
+  onMapReset,
+  onLoad,
+}: MapEditBarProps) {
   const [hasMapState, setHasMapState] = useState(false);
 
   const { maps, mapStates, removeMaps, resetMap } = useMapData();
 
-  const { activeGroups, selectedGroupIds, onGroupSelect } = useGroup();
+  const { activeGroups, selectedGroupIds, onClearSelection } = useGroup();
 
   useEffect(() => {
     const selectedGroups = groupsFromIds(selectedGroupIds, activeGroups);
@@ -33,8 +52,8 @@ function MapEditBar({ currentMap, disabled, onMapChange, onMapReset, onLoad }) {
     for (let state of selectedMapStates) {
       if (
         Object.values(state.tokens).length > 0 ||
-        Object.values(state.drawShapes).length > 0 ||
-        Object.values(state.fogShapes).length > 0 ||
+        Object.values(state.drawings).length > 0 ||
+        Object.values(state.fogs).length > 0 ||
         Object.values(state.notes).length > 0
       ) {
         _hasMapState = true;
@@ -56,7 +75,7 @@ function MapEditBar({ currentMap, disabled, onMapChange, onMapReset, onLoad }) {
     setIsMapsRemoveModalOpen(false);
     const selectedMaps = getSelectedMaps();
     const selectedMapIds = selectedMaps.map((map) => map.id);
-    onGroupSelect();
+    onClearSelection();
     await removeMaps(selectedMapIds);
     // Removed the map from the map screen if needed
     if (currentMap && selectedMapIds.includes(currentMap.id)) {
@@ -84,7 +103,7 @@ function MapEditBar({ currentMap, disabled, onMapChange, onMapReset, onLoad }) {
   /**
    * Shortcuts
    */
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEvent) {
     if (disabled) {
       return;
     }
@@ -117,7 +136,7 @@ function MapEditBar({ currentMap, disabled, onMapChange, onMapReset, onLoad }) {
       <Close
         title="Clear Selection"
         aria-label="Clear Selection"
-        onClick={() => onGroupSelect()}
+        onClick={() => onClearSelection()}
       />
       <Flex>
         <IconButton
diff --git a/src/components/map/MapEditor.js b/src/components/map/MapEditor.tsx
similarity index 80%
rename from src/components/map/MapEditor.js
rename to src/components/map/MapEditor.tsx
index 1040468..57261a4 100644
--- a/src/components/map/MapEditor.js
+++ b/src/components/map/MapEditor.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef } from "react";
 import { Box, IconButton } from "theme-ui";
 import { Stage, Layer, Image } from "react-konva";
+import Konva from "konva";
 import ReactResizeDetector from "react-resize-detector";
 
 import useMapImage from "../../hooks/useMapImage";
@@ -21,8 +22,16 @@ import GridOffIcon from "../../icons/GridOffIcon";
 
 import MapGrid from "./MapGrid";
 import MapGridEditor from "./MapGridEditor";
+import { Map } from "../../types/Map";
+import { GridInset } from "../../types/Grid";
+import { MapSettingsChangeEventHandler } from "../../types/Events";
 
-function MapEditor({ map, onSettingsChange }) {
+type MapEditorProps = {
+  map: Map;
+  onSettingsChange: MapSettingsChangeEventHandler;
+};
+
+function MapEditor({ map, onSettingsChange }: MapEditorProps) {
   const [mapImage] = useMapImage(map);
 
   const [stageWidth, setStageWidth] = useState(1);
@@ -32,16 +41,21 @@ function MapEditor({ map, onSettingsChange }) {
   const defaultInset = getGridDefaultInset(map.grid, map.width, map.height);
 
   const stageTranslateRef = useRef({ x: 0, y: 0 });
-  const mapStageRef = useRef();
-  const mapLayerRef = useRef();
+  const mapStageRef = useRef<Konva.Stage>(null);
+  const mapLayerRef = useRef<Konva.Layer>(null);
   const [preventMapInteraction, setPreventMapInteraction] = useState(false);
 
-  function handleResize(width, height) {
-    setStageWidth(width);
-    setStageHeight(height);
+  function handleResize(width?: number, height?: number): void {
+    if (width) {
+      setStageWidth(width);
+    }
+
+    if (height) {
+      setStageHeight(height);
+    }
   }
 
-  const containerRef = useRef();
+  const containerRef = useRef<HTMLDivElement>(null);
   usePreventOverscroll(containerRef);
 
   const [mapWidth, mapHeight] = useImageCenter(
@@ -57,27 +71,31 @@ function MapEditor({ map, onSettingsChange }) {
   );
 
   useStageInteraction(
-    mapStageRef.current,
+    mapStageRef,
     stageScale,
     setStageScale,
     stageTranslateRef,
-    mapLayerRef.current,
+    mapLayerRef,
     getGridMaxZoom(map.grid),
     "move",
     preventMapInteraction
   );
 
-  function handleGridChange(inset) {
-    onSettingsChange("grid", {
-      ...map.grid,
-      inset,
+  function handleGridChange(inset: GridInset) {
+    onSettingsChange({
+      grid: {
+        ...map.grid,
+        inset,
+      },
     });
   }
 
   function handleMapReset() {
-    onSettingsChange("grid", {
-      ...map.grid,
-      inset: defaultInset,
+    onSettingsChange({
+      grid: {
+        ...map.grid,
+        inset: defaultInset,
+      },
     });
   }
 
@@ -118,10 +136,16 @@ function MapEditor({ map, onSettingsChange }) {
           bg="muted"
           ref={containerRef}
         >
-          <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+          <ReactResizeDetector
+            handleWidth
+            handleHeight
+            onResize={handleResize}
+            targetRef={containerRef}
+          >
             <KonvaBridge
-              stageRender={(children) => (
+              stageRender={(children: React.ReactNode) => (
                 <Stage
+                  // @ts-ignore https://github.com/konvajs/react-konva/issues/342
                   width={stageWidth}
                   height={stageHeight}
                   scale={{ x: stageScale, y: stageScale }}
diff --git a/src/components/map/MapGrid.js b/src/components/map/MapGrid.tsx
similarity index 71%
rename from src/components/map/MapGrid.js
rename to src/components/map/MapGrid.tsx
index be5e9ba..a5d5c9a 100644
--- a/src/components/map/MapGrid.js
+++ b/src/components/map/MapGrid.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import useImage from "use-image";
 
 import { useDataURL } from "../../contexts/AssetsContext";
@@ -7,9 +7,10 @@ import { mapSources as defaultMapSources } from "../../maps";
 
 import { getImageLightness } from "../../helpers/image";
 
-import Grid from "../Grid";
+import Grid from "../konva/Grid";
+import { Map } from "../../types/Map";
 
-function MapGrid({ map }) {
+function MapGrid({ map }: { map: Map }) {
   let mapSourceMap = map;
   const mapURL = useDataURL(
     mapSourceMap,
@@ -17,13 +18,14 @@ function MapGrid({ map }) {
     undefined,
     map.type === "file"
   );
-  const [mapImage, mapLoadingStatus] = useImage(mapURL);
+
+  const [mapImage, mapLoadingStatus] = useImage(mapURL || "");
 
   const [isImageLight, setIsImageLight] = useState(true);
 
   // When the map changes find the average lightness of its pixels
   useEffect(() => {
-    if (mapLoadingStatus === "loaded") {
+    if (mapLoadingStatus === "loaded" && mapImage) {
       setIsImageLight(getImageLightness(mapImage));
     }
   }, [mapImage, mapLoadingStatus]);
diff --git a/src/components/map/MapGridEditor.js b/src/components/map/MapGridEditor.tsx
similarity index 89%
rename from src/components/map/MapGridEditor.js
rename to src/components/map/MapGridEditor.tsx
index a059180..0475566 100644
--- a/src/components/map/MapGridEditor.js
+++ b/src/components/map/MapGridEditor.tsx
@@ -1,5 +1,6 @@
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { Group, Circle, Rect } from "react-konva";
+import Konva from "konva";
 
 import {
   useDebouncedStageScale,
@@ -12,8 +13,15 @@ import { useKeyboard } from "../../contexts/KeyboardContext";
 import Vector2 from "../../helpers/Vector2";
 
 import shortcuts from "../../shortcuts";
+import { Map } from "../../types/Map";
+import { GridInset } from "../../types/Grid";
 
-function MapGridEditor({ map, onGridChange }) {
+type MapGridEditorProps = {
+  map: Map;
+  onGridChange: (inset: GridInset) => void;
+};
+
+function MapGridEditor({ map, onGridChange }: MapGridEditorProps) {
   const stageScale = useDebouncedStageScale();
   const mapWidth = useMapWidth();
   const mapHeight = useMapHeight();
@@ -39,21 +47,25 @@ function MapGridEditor({ map, onGridChange }) {
   }
   const handlePositions = getHandlePositions();
 
-  const handlePreviousPositionRef = useRef();
+  const handlePreviousPositionRef = useRef<Vector2>();
 
-  function handleScaleCircleDragStart(event) {
+  function handleScaleCircleDragStart(
+    event: Konva.KonvaEventObject<MouseEvent>
+  ) {
     const handle = event.target;
     const position = getHandleNormalizedPosition(handle);
     handlePreviousPositionRef.current = position;
   }
 
-  function handleScaleCircleDragMove(event) {
+  function handleScaleCircleDragMove(
+    event: Konva.KonvaEventObject<MouseEvent>
+  ) {
     const handle = event.target;
     onGridChange(getHandleInset(handle));
     handlePreviousPositionRef.current = getHandleNormalizedPosition(handle);
   }
 
-  function handleScaleCircleDragEnd(event) {
+  function handleScaleCircleDragEnd(event: Konva.KonvaEventObject<MouseEvent>) {
     onGridChange(getHandleInset(event.target));
     setPreventMapInteraction(false);
   }
@@ -66,11 +78,14 @@ function MapGridEditor({ map, onGridChange }) {
     setPreventMapInteraction(false);
   }
 
-  function getHandleInset(handle) {
+  function getHandleInset(handle: Konva.Node): GridInset {
     const name = handle.name();
 
     // Find distance and direction of dragging
     const previousPosition = handlePreviousPositionRef.current;
+    if (!previousPosition) {
+      return map.grid.inset;
+    }
     const position = getHandleNormalizedPosition(handle);
     const distance = Vector2.distance(previousPosition, position);
     const direction = Vector2.normalize(
@@ -154,7 +169,7 @@ function MapGridEditor({ map, onGridChange }) {
     }
   }
 
-  function nudgeGrid(direction, scale) {
+  function nudgeGrid(direction: Vector2, scale: number) {
     const inset = map.grid.inset;
     const gridSizeNormalized = Vector2.divide(
       Vector2.subtract(inset.bottomRight, inset.topLeft),
@@ -170,7 +185,7 @@ function MapGridEditor({ map, onGridChange }) {
     });
   }
 
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEvent) {
     const nudgeAmount = event.shiftKey ? 2 : 0.5;
     if (shortcuts.gridNudgeUp(event)) {
       // Stop arrow up/down scrolling if overflowing
@@ -191,7 +206,7 @@ function MapGridEditor({ map, onGridChange }) {
 
   useKeyboard(handleKeyDown);
 
-  function getHandleNormalizedPosition(handle) {
+  function getHandleNormalizedPosition(handle: Konva.Node) {
     return Vector2.divide({ x: handle.x(), y: handle.y() }, mapSize);
   }
 
diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.tsx
similarity index 76%
rename from src/components/map/MapInteraction.js
rename to src/components/map/MapInteraction.tsx
index 61ba335..031a761 100644
--- a/src/components/map/MapInteraction.js
+++ b/src/components/map/MapInteraction.tsx
@@ -1,7 +1,8 @@
 import React, { useRef, useEffect, useState } from "react";
 import { Box } from "theme-ui";
 import ReactResizeDetector from "react-resize-detector";
-import { Stage, Layer, Image } from "react-konva";
+import { Stage, Layer, Image, Group } from "react-konva";
+import Konva from "konva";
 import { EventEmitter } from "events";
 
 import useMapImage from "../../hooks/useMapImage";
@@ -18,6 +19,19 @@ import { GridProvider } from "../../contexts/GridContext";
 import { useKeyboard } from "../../contexts/KeyboardContext";
 
 import shortcuts from "../../shortcuts";
+import { Map, MapToolId } from "../../types/Map";
+import { MapState } from "../../types/MapState";
+
+type SelectedToolChangeEventHanlder = (tool: MapToolId) => void;
+
+type MapInteractionProps = {
+  map: Map | null;
+  mapState: MapState | null;
+  children?: React.ReactNode;
+  controls: React.ReactNode;
+  selectedToolId: MapToolId;
+  onSelectedToolChange: SelectedToolChangeEventHanlder;
+};
 
 function MapInteraction({
   map,
@@ -26,8 +40,7 @@ function MapInteraction({
   controls,
   selectedToolId,
   onSelectedToolChange,
-  disabledControls,
-}) {
+}: MapInteractionProps) {
   const [mapImage, mapImageStatus] = useMapImage(map);
 
   const [mapLoaded, setMapLoaded] = useState(false);
@@ -47,17 +60,17 @@ function MapInteraction({
   // Avoid state udpates when panning the map by using a ref and updating the konva element directly
   const stageTranslateRef = useRef({ x: 0, y: 0 });
   const mapStageRef = useMapStage();
-  const mapLayerRef = useRef();
-  const mapImageRef = useRef();
+  const mapLayerRef = useRef<Konva.Layer>(null);
+  const mapImageRef = useRef<Konva.Image>(null);
 
-  function handleResize(width, height) {
-    if (width > 0 && height > 0) {
+  function handleResize(width?: number, height?: number) {
+    if (width && height && width > 0 && height > 0) {
       setStageWidth(width);
       setStageHeight(height);
     }
   }
 
-  const containerRef = useRef();
+  const containerRef = useRef<HTMLDivElement>(null);
   usePreventOverscroll(containerRef);
 
   const [mapWidth, mapHeight] = useImageCenter(
@@ -76,11 +89,11 @@ function MapInteraction({
   const [interactionEmitter] = useState(new EventEmitter());
 
   useStageInteraction(
-    mapStageRef.current,
+    mapStageRef,
     stageScale,
     setStageScale,
     stageTranslateRef,
-    mapLayerRef.current,
+    mapLayerRef,
     getGridMaxZoom(map?.grid),
     selectedToolId,
     preventMapInteraction,
@@ -105,44 +118,23 @@ function MapInteraction({
     }
   );
 
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEvent) {
     // Change to move tool when pressing space
     if (shortcuts.move(event) && selectedToolId === "move") {
       // Stop active state on move icon from being selected
       event.preventDefault();
     }
-    if (
-      shortcuts.move(event) &&
-      selectedToolId !== "move" &&
-      !disabledControls.includes("move")
-    ) {
+    if (map && shortcuts.move(event) && selectedToolId !== "move") {
       event.preventDefault();
       previousSelectedToolRef.current = selectedToolId;
       onSelectedToolChange("move");
     }
-
-    // Basic keyboard shortcuts
-    if (shortcuts.moveTool(event) && !disabledControls.includes("move")) {
-      onSelectedToolChange("move");
-    }
-    if (shortcuts.drawingTool(event) && !disabledControls.includes("drawing")) {
-      onSelectedToolChange("drawing");
-    }
-    if (shortcuts.fogTool(event) && !disabledControls.includes("fog")) {
-      onSelectedToolChange("fog");
-    }
-    if (shortcuts.measureTool(event) && !disabledControls.includes("measure")) {
-      onSelectedToolChange("measure");
-    }
-    if (shortcuts.pointerTool(event) && !disabledControls.includes("pointer")) {
-      onSelectedToolChange("pointer");
-    }
-    if (shortcuts.noteTool(event) && !disabledControls.includes("note")) {
-      onSelectedToolChange("note");
+    if (!event.repeat && shortcuts.move(event) && selectedToolId === "move") {
+      previousSelectedToolRef.current = "move";
     }
   }
 
-  function handleKeyUp(event) {
+  function handleKeyUp(event: KeyboardEvent) {
     if (shortcuts.move(event) && selectedToolId === "move") {
       onSelectedToolChange(previousSelectedToolRef.current);
     }
@@ -150,7 +142,7 @@ function MapInteraction({
 
   useKeyboard(handleKeyDown, handleKeyUp);
 
-  function getCursorForTool(tool) {
+  function getCursorForTool(tool: MapToolId) {
     switch (tool) {
       case "move":
         return "move";
@@ -160,6 +152,7 @@ function MapInteraction({
       case "measure":
       case "pointer":
       case "note":
+      case "select":
         return "crosshair";
       default:
         return "default";
@@ -178,7 +171,11 @@ function MapInteraction({
 
   return (
     <MapInteractionProvider value={mapInteraction}>
-      <GridProvider grid={map?.grid} width={mapWidth} height={mapHeight}>
+      <GridProvider
+        grid={map?.grid || null}
+        width={mapWidth}
+        height={mapHeight}
+      >
         <Box
           sx={{
             position: "relative",
@@ -191,10 +188,16 @@ function MapInteraction({
           ref={containerRef}
           className="map"
         >
-          <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+          <ReactResizeDetector
+            handleWidth
+            handleHeight
+            onResize={handleResize}
+            targetRef={containerRef}
+          >
             <KonvaBridge
               stageRender={(children) => (
                 <Stage
+                  // @ts-ignore
                   width={stageWidth}
                   height={stageHeight}
                   scale={{ x: stageScale, y: stageScale }}
@@ -206,14 +209,14 @@ function MapInteraction({
             >
               <Layer ref={mapLayerRef}>
                 <Image
-                  image={mapLoaded && mapImage}
+                  image={(mapLoaded && mapImage) || undefined}
                   width={mapWidth}
                   height={mapHeight}
                   id="mapImage"
                   ref={mapImageRef}
                 />
-
                 {mapLoaded && children}
+                <Group id="portal" />
               </Layer>
             </KonvaBridge>
           </ReactResizeDetector>
diff --git a/src/components/map/MapLoadingOverlay.js b/src/components/map/MapLoadingOverlay.tsx
similarity index 92%
rename from src/components/map/MapLoadingOverlay.js
rename to src/components/map/MapLoadingOverlay.tsx
index e3b77b6..9c191b3 100644
--- a/src/components/map/MapLoadingOverlay.js
+++ b/src/components/map/MapLoadingOverlay.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Box } from "theme-ui";
 
 import { useMapLoading } from "../../contexts/MapLoadingContext";
@@ -8,8 +7,11 @@ import LoadingBar from "../LoadingBar";
 function MapLoadingOverlay() {
   const { isLoading, loadingProgressRef } = useMapLoading();
 
+  if (!isLoading) {
+    return null;
+  }
+
   return (
-    isLoading && (
       <Box
         sx={{
           position: "absolute",
@@ -29,8 +31,7 @@ function MapLoadingOverlay() {
           loadingProgressRef={loadingProgressRef}
         />
       </Box>
-    )
-  );
+    );
 }
 
 export default MapLoadingOverlay;
diff --git a/src/components/map/MapMeasure.js b/src/components/map/MapMeasure.js
deleted file mode 100644
index 5e5acc6..0000000
--- a/src/components/map/MapMeasure.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Group, Line, Text, Label, Tag } from "react-konva";
-
-import {
-  useDebouncedStageScale,
-  useMapWidth,
-  useMapHeight,
-  useInteractionEmitter,
-} from "../../contexts/MapInteractionContext";
-import { useMapStage } from "../../contexts/MapStageContext";
-import {
-  useGrid,
-  useGridCellPixelSize,
-  useGridCellNormalizedSize,
-  useGridStrokeWidth,
-  useGridOffset,
-} from "../../contexts/GridContext";
-
-import {
-  getDefaultShapeData,
-  getUpdatedShapeData,
-} from "../../helpers/drawing";
-import Vector2 from "../../helpers/Vector2";
-import { getRelativePointerPosition } from "../../helpers/konva";
-import { parseGridScale, gridDistance } from "../../helpers/grid";
-
-import useGridSnapping from "../../hooks/useGridSnapping";
-
-function MapMeasure({ map, active }) {
-  const stageScale = useDebouncedStageScale();
-  const mapWidth = useMapWidth();
-  const mapHeight = useMapHeight();
-  const interactionEmitter = useInteractionEmitter();
-
-  const grid = useGrid();
-  const gridCellNormalizedSize = useGridCellNormalizedSize();
-  const gridCellPixelSize = useGridCellPixelSize();
-  const gridStrokeWidth = useGridStrokeWidth();
-  const gridOffset = useGridOffset();
-
-  const mapStageRef = useMapStage();
-  const [drawingShapeData, setDrawingShapeData] = useState(null);
-  const [isBrushDown, setIsBrushDown] = useState(false);
-
-  const gridScale = parseGridScale(active && grid.measurement.scale);
-
-  const snapPositionToGrid = useGridSnapping(
-    grid.measurement.type === "euclidean" ? 0 : 1,
-    false
-  );
-
-  useEffect(() => {
-    if (!active) {
-      return;
-    }
-    const mapStage = mapStageRef.current;
-    const mapImage = mapStage?.findOne("#mapImage");
-
-    function getBrushPosition() {
-      const mapImage = mapStage.findOne("#mapImage");
-      let position = getRelativePointerPosition(mapImage);
-      if (map.snapToGrid) {
-        position = snapPositionToGrid(position);
-      }
-      return Vector2.divide(position, {
-        x: mapImage.width(),
-        y: mapImage.height(),
-      });
-    }
-
-    function handleBrushDown() {
-      const brushPosition = getBrushPosition();
-      const { points } = getDefaultShapeData("line", brushPosition);
-      const length = 0;
-      setDrawingShapeData({ length, points });
-      setIsBrushDown(true);
-    }
-
-    function handleBrushMove() {
-      const brushPosition = getBrushPosition();
-      if (isBrushDown && drawingShapeData) {
-        const { points } = getUpdatedShapeData(
-          "line",
-          drawingShapeData,
-          brushPosition,
-          gridCellNormalizedSize
-        );
-        // Convert back to pixel values
-        const a = Vector2.subtract(
-          Vector2.multiply(points[0], {
-            x: mapImage.width(),
-            y: mapImage.height(),
-          }),
-          gridOffset
-        );
-        const b = Vector2.subtract(
-          Vector2.multiply(points[1], {
-            x: mapImage.width(),
-            y: mapImage.height(),
-          }),
-          gridOffset
-        );
-        const length = gridDistance(grid, a, b, gridCellPixelSize);
-        setDrawingShapeData({
-          length,
-          points,
-        });
-      }
-    }
-
-    function handleBrushUp() {
-      setDrawingShapeData(null);
-      setIsBrushDown(false);
-    }
-
-    interactionEmitter.on("dragStart", handleBrushDown);
-    interactionEmitter.on("drag", handleBrushMove);
-    interactionEmitter.on("dragEnd", handleBrushUp);
-
-    return () => {
-      interactionEmitter.off("dragStart", handleBrushDown);
-      interactionEmitter.off("drag", handleBrushMove);
-      interactionEmitter.off("dragEnd", handleBrushUp);
-    };
-  });
-
-  function renderShape(shapeData) {
-    const linePoints = shapeData.points.reduce(
-      (acc, point) => [...acc, point.x * mapWidth, point.y * mapHeight],
-      []
-    );
-
-    const lineCenter = Vector2.multiply(
-      Vector2.divide(Vector2.add(shapeData.points[0], shapeData.points[1]), 2),
-      { x: mapWidth, y: mapHeight }
-    );
-
-    return (
-      <Group>
-        <Line
-          points={linePoints}
-          strokeWidth={1.5 * gridStrokeWidth}
-          stroke="hsla(230, 25%, 18%, 0.8)"
-          lineCap="round"
-        />
-        <Line
-          points={linePoints}
-          strokeWidth={0.25 * gridStrokeWidth}
-          stroke="white"
-          lineCap="round"
-        />
-        <Label
-          x={lineCenter.x}
-          y={lineCenter.y}
-          offsetX={26}
-          offsetY={26}
-          scaleX={1 / stageScale}
-          scaleY={1 / stageScale}
-        >
-          <Tag fill="hsla(230, 25%, 18%, 0.8)" cornerRadius={4} />
-          <Text
-            text={`${(shapeData.length * gridScale.multiplier).toFixed(
-              gridScale.digits
-            )}${gridScale.unit}`}
-            fill="white"
-            fontSize={24}
-            padding={4}
-          />
-        </Label>
-      </Group>
-    );
-  }
-
-  return <Group>{drawingShapeData && renderShape(drawingShapeData)}</Group>;
-}
-
-export default MapMeasure;
diff --git a/src/components/map/MapMenu.js b/src/components/map/MapMenu.tsx
similarity index 56%
rename from src/components/map/MapMenu.js
rename to src/components/map/MapMenu.tsx
index c107f6b..f46e519 100644
--- a/src/components/map/MapMenu.js
+++ b/src/components/map/MapMenu.tsx
@@ -1,6 +1,23 @@
 import React, { useEffect, useState } from "react";
 import Modal from "react-modal";
 import { useThemeUI } from "theme-ui";
+import CSS from "csstype";
+
+import { RequestCloseEventHandler } from "../../types/Events";
+import { useInteractionEmitter } from "../../contexts/MapInteractionContext";
+
+type MapMenuProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  onModalContent: (instance: HTMLDivElement) => void;
+  top: number | string;
+  left: number | string;
+  bottom: number | string;
+  right: number | string;
+  children: React.ReactNode;
+  style: React.CSSProperties;
+  excludeNode: Node | null;
+};
 
 function MapMenu({
   isOpen,
@@ -14,41 +31,59 @@ function MapMenu({
   style,
   // A node to exclude from the pointer event for closing
   excludeNode,
-}) {
+}: MapMenuProps) {
   // Save modal node in state to ensure that the pointer listeners
   // are removed if the open state changed not from the onRequestClose
   // callback
-  const [modalContentNode, setModalContentNode] = useState(null);
+  const [modalContentNode, setModalContentNode] = useState<Node | null>(null);
+
+  const interactionEmitter = useInteractionEmitter();
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    function handleDragMove() {
+      onRequestClose();
+    }
+
+    interactionEmitter?.on("dragStart", handleDragMove);
+    return () => {
+      interactionEmitter?.off("dragStart", handleDragMove);
+    };
+  });
 
   useEffect(() => {
     // Close modal if interacting with any other element
-    function handleInteraction(event) {
+    function handleInteraction(event: Event) {
       const path = event.composedPath();
       if (
+        modalContentNode &&
         !path.includes(modalContentNode) &&
         !(excludeNode && path.includes(excludeNode)) &&
         !(event.target instanceof HTMLTextAreaElement)
       ) {
         onRequestClose();
-        document.body.removeEventListener("pointerdown", handleInteraction);
+        document.body.removeEventListener("pointerup", handleInteraction);
         document.body.removeEventListener("wheel", handleInteraction);
       }
     }
 
     if (modalContentNode) {
-      document.body.addEventListener("pointerdown", handleInteraction);
+      document.body.addEventListener("pointerup", handleInteraction);
       // Check for wheel event to close modal as well
       document.body.addEventListener("wheel", handleInteraction);
     }
 
     return () => {
       if (modalContentNode) {
-        document.body.removeEventListener("pointerdown", handleInteraction);
+        document.body.removeEventListener("pointerup", handleInteraction);
+        document.body.removeEventListener("wheel", handleInteraction);
       }
     };
   }, [modalContentNode, excludeNode, onRequestClose]);
 
-  function handleModalContent(node) {
+  function handleModalContent(node: HTMLDivElement) {
     setModalContentNode(node);
     onModalContent(node);
   }
@@ -62,7 +97,7 @@ function MapMenu({
       style={{
         overlay: { top: "0", bottom: "initial" },
         content: {
-          backgroundColor: theme.colors.overlay,
+          backgroundColor: theme.colors?.overlay as CSS.Property.Color,
           top,
           left,
           right,
diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.tsx
similarity index 70%
rename from src/components/map/MapSettings.js
rename to src/components/map/MapSettings.tsx
index 8f05c3b..f867792 100644
--- a/src/components/map/MapSettings.js
+++ b/src/components/map/MapSettings.tsx
@@ -9,8 +9,16 @@ import { mapSources as defaultMapSources } from "../../maps";
 
 import Divider from "../Divider";
 import Select from "../Select";
+import { Map, MapQuality } from "../../types/Map";
+import { EditFlag, MapState } from "../../types/MapState";
+import {
+  MapSettingsChangeEventHandler,
+  MapStateSettingsChangeEventHandler,
+} from "../../types/Events";
+import { Grid, GridMeasurementType, GridType } from "../../types/Grid";
 
-const qualitySettings = [
+type QualityTypeSetting = { value: MapQuality; label: string };
+const qualitySettings: QualityTypeSetting[] = [
   { value: "low", label: "Low" },
   { value: "medium", label: "Medium" },
   { value: "high", label: "High" },
@@ -18,42 +26,53 @@ const qualitySettings = [
   { value: "original", label: "Original" },
 ];
 
-const gridTypeSettings = [
+type GridTypeSetting = { value: GridType; label: string };
+const gridTypeSettings: GridTypeSetting[] = [
   { value: "square", label: "Square" },
   { value: "hexVertical", label: "Hex Vertical" },
   { value: "hexHorizontal", label: "Hex Horizontal" },
 ];
 
-const gridSquareMeasurementTypeSettings = [
+type GridMeasurementTypeSetting = { value: GridMeasurementType; label: string };
+const gridSquareMeasurementTypeSettings: GridMeasurementTypeSetting[] = [
   { value: "chebyshev", label: "Chessboard (D&D 5e)" },
   { value: "alternating", label: "Alternating Diagonal (D&D 3.5e)" },
   { value: "euclidean", label: "Euclidean" },
   { value: "manhattan", label: "Manhattan" },
 ];
 
-const gridHexMeasurementTypeSettings = [
+const gridHexMeasurementTypeSettings: GridMeasurementTypeSetting[] = [
   { value: "manhattan", label: "Manhattan" },
   { value: "euclidean", label: "Euclidean" },
 ];
 
+type MapSettingsProps = {
+  map: Map;
+  mapState: MapState;
+  onSettingsChange: MapSettingsChangeEventHandler;
+  onStateSettingsChange: MapStateSettingsChangeEventHandler;
+};
+
 function MapSettings({
   map,
   mapState,
   onSettingsChange,
   onStateSettingsChange,
-}) {
-  function handleFlagChange(event, flag) {
+}: MapSettingsProps) {
+  function handleFlagChange(
+    event: React.ChangeEvent<HTMLInputElement>,
+    flag: EditFlag
+  ) {
     if (event.target.checked) {
-      onStateSettingsChange("editFlags", [...mapState.editFlags, flag]);
+      onStateSettingsChange({ editFlags: [...mapState.editFlags, flag] });
     } else {
-      onStateSettingsChange(
-        "editFlags",
-        mapState.editFlags.filter((f) => f !== flag)
-      );
+      onStateSettingsChange({
+        editFlags: mapState.editFlags.filter((f) => f !== flag),
+      });
     }
   }
 
-  function handleGridSizeXChange(event) {
+  function handleGridSizeXChange(event: React.ChangeEvent<HTMLInputElement>) {
     const value = parseInt(event.target.value) || 0;
     let grid = {
       ...map.grid,
@@ -63,10 +82,10 @@ function MapSettings({
       },
     };
     grid.inset = getGridUpdatedInset(grid, map.width, map.height);
-    onSettingsChange("grid", grid);
+    onSettingsChange({ grid });
   }
 
-  function handleGridSizeYChange(event) {
+  function handleGridSizeYChange(event: React.ChangeEvent<HTMLInputElement>) {
     const value = parseInt(event.target.value) || 0;
     let grid = {
       ...map.grid,
@@ -76,12 +95,15 @@ function MapSettings({
       },
     };
     grid.inset = getGridUpdatedInset(grid, map.width, map.height);
-    onSettingsChange("grid", grid);
+    onSettingsChange({ grid });
   }
 
-  function handleGridTypeChange(option) {
+  function handleGridTypeChange(option: GridTypeSetting | null) {
+    if (!option) {
+      return;
+    }
     const type = option.value;
-    let grid = {
+    let grid: Grid = {
       ...map.grid,
       type,
       measurement: {
@@ -90,10 +112,15 @@ function MapSettings({
       },
     };
     grid.inset = getGridUpdatedInset(grid, map.width, map.height);
-    onSettingsChange("grid", grid);
+    onSettingsChange({ grid });
   }
 
-  function handleGridMeasurementTypeChange(option) {
+  function handleGridMeasurementTypeChange(
+    option: GridMeasurementTypeSetting | null
+  ) {
+    if (!option) {
+      return;
+    }
     const grid = {
       ...map.grid,
       measurement: {
@@ -101,10 +128,19 @@ function MapSettings({
         type: option.value,
       },
     };
-    onSettingsChange("grid", grid);
+    onSettingsChange({ grid });
   }
 
-  function handleGridMeasurementScaleChange(event) {
+  function handleQualityChange(option: QualityTypeSetting | null) {
+    if (!option) {
+      return;
+    }
+    onSettingsChange({ quality: option.value });
+  }
+
+  function handleGridMeasurementScaleChange(
+    event: React.ChangeEvent<HTMLInputElement>
+  ) {
     const grid = {
       ...map.grid,
       measurement: {
@@ -112,7 +148,7 @@ function MapSettings({
         scale: event.target.value,
       },
     };
-    onSettingsChange("grid", grid);
+    onSettingsChange({ grid });
   }
 
   const mapURL = useDataURL(map, defaultMapSources);
@@ -124,7 +160,7 @@ function MapSettings({
         const blob = await response.blob();
         let size = blob.size;
         size /= 1000000; // Bytes to Megabytes
-        setMapSize(size.toFixed(2));
+        setMapSize(parseFloat(size.toFixed(2)));
       } else {
         setMapSize(0);
       }
@@ -168,7 +204,7 @@ function MapSettings({
         <Input
           name="name"
           value={(map && map.name) || ""}
-          onChange={(e) => onSettingsChange("name", e.target.value)}
+          onChange={(e) => onSettingsChange({ name: e.target.value })}
           disabled={mapEmpty}
           my={1}
         />
@@ -185,10 +221,11 @@ function MapSettings({
               isDisabled={mapEmpty}
               options={gridTypeSettings}
               value={
-                !mapEmpty &&
-                gridTypeSettings.find((s) => s.value === map.grid.type)
+                mapEmpty
+                  ? undefined
+                  : gridTypeSettings.find((s) => s.value === map.grid.type)
               }
-              onChange={handleGridTypeChange}
+              onChange={handleGridTypeChange as any}
               isSearchable={false}
             />
           </Box>
@@ -197,7 +234,9 @@ function MapSettings({
               <Checkbox
                 checked={!mapEmpty && map.showGrid}
                 disabled={mapEmpty}
-                onChange={(e) => onSettingsChange("showGrid", e.target.checked)}
+                onChange={(e) =>
+                  onSettingsChange({ showGrid: e.target.checked })
+                }
               />
               Draw Grid
             </Label>
@@ -206,7 +245,7 @@ function MapSettings({
                 checked={!mapEmpty && map.snapToGrid}
                 disabled={mapEmpty}
                 onChange={(e) =>
-                  onSettingsChange("snapToGrid", e.target.checked)
+                  onSettingsChange({ snapToGrid: e.target.checked })
                 }
               />
               Snap to Grid
@@ -224,12 +263,13 @@ function MapSettings({
                   : gridHexMeasurementTypeSettings
               }
               value={
-                !mapEmpty &&
-                gridSquareMeasurementTypeSettings.find(
-                  (s) => s.value === map.grid.measurement.type
-                )
+                mapEmpty
+                  ? undefined
+                  : gridSquareMeasurementTypeSettings.find(
+                      (s) => s.value === map.grid.measurement.type
+                    )
               }
-              onChange={handleGridMeasurementTypeChange}
+              onChange={handleGridMeasurementTypeChange as any}
               isSearchable={false}
             />
           </Box>
@@ -254,14 +294,17 @@ function MapSettings({
             <Select
               options={qualitySettings}
               value={
-                !mapEmpty &&
-                qualitySettings.find((s) => s.value === map.quality)
+                mapEmpty
+                  ? undefined
+                  : qualitySettings.find((s) => s.value === map.quality)
               }
               isDisabled={mapEmpty}
-              onChange={(option) => onSettingsChange("quality", option.value)}
-              isOptionDisabled={(option) =>
-                mapEmpty ||
-                (option.value !== "original" && !map.resolutions[option.value])
+              onChange={handleQualityChange as any}
+              isOptionDisabled={
+                ((option: QualityTypeSetting) =>
+                  mapEmpty ||
+                  (option.value !== "original" &&
+                    !map.resolutions[option.value])) as any
               }
               isSearchable={false}
             />
diff --git a/src/components/map/MapTile.js b/src/components/map/MapTile.tsx
similarity index 62%
rename from src/components/map/MapTile.js
rename to src/components/map/MapTile.tsx
index c061b19..09f817b 100644
--- a/src/components/map/MapTile.js
+++ b/src/components/map/MapTile.tsx
@@ -1,7 +1,18 @@
 import React from "react";
+import { Map } from "../../types/Map";
 
 import Tile from "../tile/Tile";
-import MapImage from "./MapImage";
+import MapImage from "./MapTileImage";
+
+type MapTileProps = {
+  map: Map;
+  isSelected: boolean;
+  onSelect: (mapId: string) => void;
+  onEdit: (mapId: string) => void;
+  onDoubleClick: () => void;
+  canEdit: boolean;
+  badges: React.ReactChild[];
+};
 
 function MapTile({
   map,
@@ -11,7 +22,7 @@ function MapTile({
   onDoubleClick,
   canEdit,
   badges,
-}) {
+}: MapTileProps) {
   return (
     <Tile
       title={map.name}
diff --git a/src/components/map/MapTileGroup.js b/src/components/map/MapTileGroup.tsx
similarity index 68%
rename from src/components/map/MapTileGroup.js
rename to src/components/map/MapTileGroup.tsx
index 753fc63..18846d9 100644
--- a/src/components/map/MapTileGroup.js
+++ b/src/components/map/MapTileGroup.tsx
@@ -1,12 +1,28 @@
-import React from "react";
 import { Grid } from "theme-ui";
 
 import Tile from "../tile/Tile";
-import MapImage from "./MapImage";
+import MapImage from "./MapTileImage";
 
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
-function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
+import { Map } from "../../types/Map";
+import { GroupContainer } from "../../types/Group";
+
+type MapTileGroupProps = {
+  group: GroupContainer;
+  maps: Map[];
+  isSelected: boolean;
+  onSelect: (groupId: string) => void;
+  onDoubleClick: () => void;
+};
+
+function MapTileGroup({
+  group,
+  maps,
+  isSelected,
+  onSelect,
+  onDoubleClick,
+}: MapTileGroupProps) {
   const layout = useResponsiveLayout();
 
   return (
diff --git a/src/components/map/MapImage.js b/src/components/map/MapTileImage.tsx
similarity index 50%
rename from src/components/map/MapImage.js
rename to src/components/map/MapTileImage.tsx
index c9c71f8..9cf1a34 100644
--- a/src/components/map/MapImage.js
+++ b/src/components/map/MapTileImage.tsx
@@ -1,10 +1,14 @@
-import React from "react";
-import { Image } from "theme-ui";
+import { Image, ImageProps } from "theme-ui";
 
 import { useDataURL } from "../../contexts/AssetsContext";
 import { mapSources as defaultMapSources } from "../../maps";
+import { Map } from "../../types/Map";
 
-const MapTileImage = React.forwardRef(({ map, ...props }, ref) => {
+type MapTileImageProps = {
+  map: Map;
+} & ImageProps;
+
+function MapTileImage({ map, ...props }: MapTileImageProps) {
   const mapURL = useDataURL(
     map,
     defaultMapSources,
@@ -12,7 +16,7 @@ const MapTileImage = React.forwardRef(({ map, ...props }, ref) => {
     map.type === "file"
   );
 
-  return <Image src={mapURL} ref={ref} {...props} />;
-});
+  return <Image src={mapURL} {...props} />;
+}
 
 export default MapTileImage;
diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.tsx
similarity index 77%
rename from src/components/map/MapTiles.js
rename to src/components/map/MapTiles.tsx
index 811bb0c..a8a7ff3 100644
--- a/src/components/map/MapTiles.js
+++ b/src/components/map/MapTiles.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import MapTile from "./MapTile";
 import MapTileGroup from "./MapTileGroup";
 
@@ -10,15 +8,26 @@ import { getGroupItems } from "../../helpers/group";
 
 import { useGroup } from "../../contexts/GroupContext";
 
-function MapTiles({ mapsById, onMapEdit, onMapSelect, subgroup }) {
-  const {
-    selectedGroupIds,
-    selectMode,
-    onGroupOpen,
-    onGroupSelect,
-  } = useGroup();
+import { Map } from "../../types/Map";
+import { Group } from "../../types/Group";
 
-  function renderTile(group) {
+type MapTileProps = {
+  mapsById: Record<string, Map>;
+  onMapEdit: (mapId: string) => void;
+  onMapSelect: (groupId: string) => void;
+  subgroup: boolean;
+};
+
+function MapTiles({
+  mapsById,
+  onMapEdit,
+  onMapSelect,
+  subgroup,
+}: MapTileProps) {
+  const { selectedGroupIds, selectMode, onGroupOpen, onGroupSelect } =
+    useGroup();
+
+  function renderTile(group: Group) {
     if (group.type === "item") {
       const map = mapsById[group.id];
       if (map) {
@@ -66,4 +75,8 @@ function MapTiles({ mapsById, onMapEdit, onMapSelect, subgroup }) {
   );
 }
 
+MapTiles.defaultProps = {
+  subgroup: false,
+};
+
 export default MapTiles;
diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js
deleted file mode 100644
index f7e14ad..0000000
--- a/src/components/map/MapToken.js
+++ /dev/null
@@ -1,277 +0,0 @@
-import React, { useState, useRef } from "react";
-import { Image as KonvaImage, Group } from "react-konva";
-import { useSpring, animated } from "@react-spring/konva";
-import useImage from "use-image";
-
-import usePrevious from "../../hooks/usePrevious";
-import useGridSnapping from "../../hooks/useGridSnapping";
-
-import { useUserId } from "../../contexts/UserIdContext";
-import {
-  useSetPreventMapInteraction,
-  useMapWidth,
-  useMapHeight,
-} from "../../contexts/MapInteractionContext";
-import { useGridCellPixelSize } from "../../contexts/GridContext";
-import { useDataURL } from "../../contexts/AssetsContext";
-
-import TokenStatus from "../token/TokenStatus";
-import TokenLabel from "../token/TokenLabel";
-import TokenOutline from "../token/TokenOutline";
-
-import { Intersection, getScaledOutline } from "../../helpers/token";
-import Vector2 from "../../helpers/Vector2";
-
-import { tokenSources } from "../../tokens";
-
-function MapToken({
-  tokenState,
-  onTokenStateChange,
-  onTokenMenuOpen,
-  onTokenDragStart,
-  onTokenDragEnd,
-  draggable,
-  fadeOnHover,
-  map,
-}) {
-  const userId = useUserId();
-
-  const mapWidth = useMapWidth();
-  const mapHeight = useMapHeight();
-  const setPreventMapInteraction = useSetPreventMapInteraction();
-
-  const gridCellPixelSize = useGridCellPixelSize();
-
-  const tokenURL = useDataURL(tokenState, tokenSources);
-  const [tokenImage] = useImage(tokenURL);
-
-  const tokenAspectRatio = tokenState.width / tokenState.height;
-
-  const snapPositionToGrid = useGridSnapping();
-
-  const intersectingTokensRef = useRef([]);
-  const previousDragPositionRef = useRef({ x: 0, y: 0 });
-
-  function handleDragStart(event) {
-    const tokenGroup = event.target;
-
-    if (tokenState.category === "vehicle") {
-      previousDragPositionRef.current = tokenGroup.position();
-      const tokenIntersection = new Intersection(
-        getScaledOutline(tokenState, tokenWidth, tokenHeight),
-        { x: tokenX - tokenWidth / 2, y: tokenY - tokenHeight / 2 },
-        { x: tokenX, y: tokenY },
-        tokenState.rotation
-      );
-
-      // Find all other tokens on the map
-      const layer = tokenGroup.getLayer();
-      const tokens = layer.find(".character");
-      for (let other of tokens) {
-        if (other === tokenGroup) {
-          continue;
-        }
-        if (tokenIntersection.intersects(other.position())) {
-          intersectingTokensRef.current.push(other);
-        }
-      }
-    }
-
-    onTokenDragStart(event);
-  }
-
-  function handleDragMove(event) {
-    const tokenGroup = event.target;
-    // Snap to corners of grid
-    if (map.snapToGrid) {
-      tokenGroup.position(snapPositionToGrid(tokenGroup.position()));
-    }
-    if (tokenState.category === "vehicle") {
-      const deltaPosition = Vector2.subtract(
-        tokenGroup.position(),
-        previousDragPositionRef.current
-      );
-      for (let other of intersectingTokensRef.current) {
-        other.position(Vector2.add(other.position(), deltaPosition));
-      }
-      previousDragPositionRef.current = tokenGroup.position();
-    }
-  }
-
-  function handleDragEnd(event) {
-    const tokenGroup = event.target;
-
-    const mountChanges = {};
-    if (tokenState.category === "vehicle") {
-      for (let other of intersectingTokensRef.current) {
-        mountChanges[other.id()] = {
-          x: other.x() / mapWidth,
-          y: other.y() / mapHeight,
-          lastModifiedBy: userId,
-          lastModified: Date.now(),
-        };
-      }
-      intersectingTokensRef.current = [];
-    }
-
-    setPreventMapInteraction(false);
-    onTokenStateChange({
-      ...mountChanges,
-      [tokenState.id]: {
-        x: tokenGroup.x() / mapWidth,
-        y: tokenGroup.y() / mapHeight,
-        lastModifiedBy: userId,
-        lastModified: Date.now(),
-      },
-    });
-    onTokenDragEnd(event);
-  }
-
-  function handleClick(event) {
-    if (draggable) {
-      const tokenImage = event.target;
-      onTokenMenuOpen(tokenState.id, tokenImage);
-    }
-  }
-
-  const [tokenOpacity, setTokenOpacity] = useState(1);
-  // Store token pointer down time to check for a click when token is locked
-  const tokenPointerDownTimeRef = useRef();
-  function handlePointerDown(event) {
-    if (draggable) {
-      setPreventMapInteraction(true);
-    }
-    if (tokenState.locked && map.owner === userId) {
-      tokenPointerDownTimeRef.current = event.evt.timeStamp;
-    }
-  }
-
-  function handlePointerUp(event) {
-    if (draggable) {
-      setPreventMapInteraction(false);
-    }
-    // Check token click when locked and we are the map owner
-    // We can't use onClick because that doesn't check pointer distance
-    if (tokenState.locked && map.owner === userId) {
-      // If down and up time is small trigger a click
-      const delta = event.evt.timeStamp - tokenPointerDownTimeRef.current;
-      if (delta < 300) {
-        const tokenImage = event.target;
-        onTokenMenuOpen(tokenState.id, tokenImage);
-      }
-    }
-  }
-
-  function handlePointerEnter() {
-    if (fadeOnHover) {
-      setTokenOpacity(0.5);
-    }
-  }
-
-  function handlePointerLeave() {
-    if (tokenOpacity !== 1.0) {
-      setTokenOpacity(1.0);
-    }
-  }
-
-  const minCellSize = Math.min(
-    gridCellPixelSize.width,
-    gridCellPixelSize.height
-  );
-  const tokenWidth = minCellSize * tokenState.size;
-  const tokenHeight = (minCellSize / tokenAspectRatio) * tokenState.size;
-
-  // Animate to new token positions if edited by others
-  const tokenX = tokenState.x * mapWidth;
-  const tokenY = tokenState.y * mapHeight;
-  const previousWidth = usePrevious(mapWidth);
-  const previousHeight = usePrevious(mapHeight);
-  const resized = mapWidth !== previousWidth || mapHeight !== previousHeight;
-  const skipAnimation = tokenState.lastModifiedBy === userId || resized;
-  const props = useSpring({
-    x: tokenX,
-    y: tokenY,
-    immediate: skipAnimation,
-  });
-
-  // When a token is hidden if you aren't the map owner hide it completely
-  if (map && !tokenState.visible && map.owner !== userId) {
-    return null;
-  }
-
-  // Token name is used by on click to find whether a token is a vehicle or prop
-  let tokenName = "";
-  if (tokenState) {
-    tokenName = tokenState.category;
-  }
-  if (tokenState && tokenState.locked) {
-    tokenName = tokenName + "-locked";
-  }
-
-  return (
-    <animated.Group
-      {...props}
-      width={tokenWidth}
-      height={tokenHeight}
-      draggable={draggable}
-      onMouseDown={handlePointerDown}
-      onMouseUp={handlePointerUp}
-      onMouseEnter={handlePointerEnter}
-      onMouseLeave={handlePointerLeave}
-      onTouchStart={handlePointerDown}
-      onTouchEnd={handlePointerUp}
-      onClick={handleClick}
-      onTap={handleClick}
-      onDragEnd={handleDragEnd}
-      onDragStart={handleDragStart}
-      onDragMove={handleDragMove}
-      opacity={tokenState.visible ? tokenOpacity : 0.5}
-      name={tokenName}
-      id={tokenState.id}
-    >
-      <Group
-        width={tokenWidth}
-        height={tokenHeight}
-        x={0}
-        y={0}
-        rotation={tokenState.rotation}
-        offsetX={tokenWidth / 2}
-        offsetY={tokenHeight / 2}
-      >
-        <TokenOutline
-          outline={getScaledOutline(tokenState, tokenWidth, tokenHeight)}
-          hidden={!!tokenImage}
-        />
-      </Group>
-      <KonvaImage
-        width={tokenWidth}
-        height={tokenHeight}
-        x={0}
-        y={0}
-        image={tokenImage}
-        rotation={tokenState.rotation}
-        offsetX={tokenWidth / 2}
-        offsetY={tokenHeight / 2}
-        hitFunc={() => {}}
-      />
-      <Group offsetX={tokenWidth / 2} offsetY={tokenHeight / 2}>
-        {tokenState.statuses?.length > 0 ? (
-          <TokenStatus
-            tokenState={tokenState}
-            width={tokenWidth}
-            height={tokenHeight}
-          />
-        ) : null}
-        {tokenState.label ? (
-          <TokenLabel
-            tokenState={tokenState}
-            width={tokenWidth}
-            height={tokenHeight}
-          />
-        ) : null}
-      </Group>
-    </animated.Group>
-  );
-}
-
-export default MapToken;
diff --git a/src/components/map/MapTokens.js b/src/components/map/MapTokens.js
deleted file mode 100644
index 957d038..0000000
--- a/src/components/map/MapTokens.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from "react";
-import { Group } from "react-konva";
-
-import MapToken from "./MapToken";
-
-function MapTokens({
-  map,
-  mapState,
-  tokenDraggingOptions,
-  setTokenDraggingOptions,
-  onMapTokenStateChange,
-  handleTokenMenuOpen,
-  selectedToolId,
-  disabledTokens,
-}) {
-  function getMapTokenCategoryWeight(category) {
-    switch (category) {
-      case "character":
-        return 0;
-      case "vehicle":
-        return 1;
-      case "prop":
-        return 2;
-      default:
-        return 0;
-    }
-  }
-
-  // Sort so vehicles render below other tokens
-  function sortMapTokenStates(a, b, tokenDraggingOptions) {
-    // If categories are different sort in order "prop", "vehicle", "character"
-    if (b.category !== a.category) {
-      const aWeight = getMapTokenCategoryWeight(a.category);
-      const bWeight = getMapTokenCategoryWeight(b.category);
-      return bWeight - aWeight;
-    } else if (
-      tokenDraggingOptions &&
-      tokenDraggingOptions.dragging &&
-      tokenDraggingOptions.tokenState.id === a.id
-    ) {
-      // If dragging token a move above
-      return 1;
-    } else if (
-      tokenDraggingOptions &&
-      tokenDraggingOptions.dragging &&
-      tokenDraggingOptions.tokenState.id === b.id
-    ) {
-      // If dragging token b move above
-      return -1;
-    } else {
-      // Else sort so last modified is on top
-      return a.lastModified - b.lastModified;
-    }
-  }
-
-  return (
-    <Group>
-      {Object.values(mapState.tokens)
-        .sort((a, b) => sortMapTokenStates(a, b, tokenDraggingOptions))
-        .map((tokenState) => (
-          <MapToken
-            key={tokenState.id}
-            tokenState={tokenState}
-            onTokenStateChange={onMapTokenStateChange}
-            onTokenMenuOpen={handleTokenMenuOpen}
-            onTokenDragStart={(e) =>
-              setTokenDraggingOptions({
-                dragging: true,
-                tokenState,
-                tokenGroup: e.target,
-              })
-            }
-            onTokenDragEnd={() =>
-              setTokenDraggingOptions({
-                ...tokenDraggingOptions,
-                dragging: false,
-              })
-            }
-            draggable={
-              selectedToolId === "move" &&
-              !(tokenState.id in disabledTokens) &&
-              !tokenState.locked
-            }
-            fadeOnHover={selectedToolId === "drawing"}
-            map={map}
-          />
-        ))}
-    </Group>
-  );
-}
-
-export default MapTokens;
diff --git a/src/components/map/SelectMapButton.js b/src/components/map/SelectMapButton.tsx
similarity index 73%
rename from src/components/map/SelectMapButton.js
rename to src/components/map/SelectMapButton.tsx
index 18c1654..f5f3ea9 100644
--- a/src/components/map/SelectMapButton.js
+++ b/src/components/map/SelectMapButton.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { IconButton } from "theme-ui";
 
 import SelectMapModal from "../../modals/SelectMapModal";
@@ -6,6 +6,20 @@ import SelectMapIcon from "../../icons/SelectMapIcon";
 
 import { useMapData } from "../../contexts/MapDataContext";
 import { useUserId } from "../../contexts/UserIdContext";
+import {
+  MapChangeEventHandler,
+  MapResetEventHandler,
+} from "../../types/Events";
+import { Map } from "../../types/Map";
+import { MapState } from "../../types/MapState";
+
+type SelectMapButtonProps = {
+  onMapChange: MapChangeEventHandler;
+  onMapReset: MapResetEventHandler;
+  currentMap: Map | null;
+  currentMapState: MapState | null;
+  disabled: boolean;
+};
 
 function SelectMapButton({
   onMapChange,
@@ -13,7 +27,7 @@ function SelectMapButton({
   currentMap,
   currentMapState,
   disabled,
-}) {
+}: SelectMapButtonProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const { updateMapState } = useMapData();
diff --git a/src/components/map/SelectMapSelectButton.js b/src/components/map/SelectMapSelectButton.tsx
similarity index 77%
rename from src/components/map/SelectMapSelectButton.js
rename to src/components/map/SelectMapSelectButton.tsx
index 4d7ae35..d80abb1 100644
--- a/src/components/map/SelectMapSelectButton.js
+++ b/src/components/map/SelectMapSelectButton.tsx
@@ -1,11 +1,18 @@
-import React from "react";
 import { Button } from "theme-ui";
 
 import { useGroup } from "../../contexts/GroupContext";
 
 import { findGroup } from "../../helpers/group";
 
-function SelectMapSelectButton({ onMapSelect, disabled }) {
+type SelectMapSelectButtonProps = {
+  onMapSelect: (mapId: string) => void;
+  disabled: boolean;
+};
+
+function SelectMapSelectButton({
+  onMapSelect,
+  disabled,
+}: SelectMapSelectButtonProps) {
   const { activeGroups, selectedGroupIds } = useGroup();
 
   function handleSelectClick() {
diff --git a/src/components/map/controls/PointerToolSettings.js b/src/components/map/controls/PointerToolSettings.js
deleted file mode 100644
index 9d04ab9..0000000
--- a/src/components/map/controls/PointerToolSettings.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import { Flex } from "theme-ui";
-
-import ColorControl from "./ColorControl";
-
-function PointerToolSettings({ settings, onSettingChange }) {
-  return (
-    <Flex sx={{ alignItems: "center" }}>
-      <ColorControl
-        color={settings.color}
-        onColorChange={(color) => onSettingChange({ color })}
-        exclude={["black", "darkGray", "lightGray", "white"]}
-      />
-    </Flex>
-  );
-}
-
-export default PointerToolSettings;
diff --git a/src/components/note/Note.js b/src/components/note/Note.js
deleted file mode 100644
index cfca951..0000000
--- a/src/components/note/Note.js
+++ /dev/null
@@ -1,232 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import { Rect, Text } from "react-konva";
-import { useSpring, animated } from "@react-spring/konva";
-
-import { useUserId } from "../../contexts/UserIdContext";
-import {
-  useSetPreventMapInteraction,
-  useMapWidth,
-  useMapHeight,
-} from "../../contexts/MapInteractionContext";
-import { useGridCellPixelSize } from "../../contexts/GridContext";
-
-import colors from "../../helpers/colors";
-
-import usePrevious from "../../hooks/usePrevious";
-import useGridSnapping from "../../hooks/useGridSnapping";
-
-const defaultFontSize = 16;
-
-function Note({
-  note,
-  map,
-  onNoteChange,
-  onNoteMenuOpen,
-  draggable,
-  onNoteDragStart,
-  onNoteDragEnd,
-  fadeOnHover,
-}) {
-  const userId = useUserId();
-
-  const mapWidth = useMapWidth();
-  const mapHeight = useMapHeight();
-  const setPreventMapInteraction = useSetPreventMapInteraction();
-
-  const gridCellPixelSize = useGridCellPixelSize();
-
-  const minCellSize = Math.min(
-    gridCellPixelSize.width,
-    gridCellPixelSize.height
-  );
-  const noteWidth = minCellSize * note.size;
-  const noteHeight = noteWidth;
-  const notePadding = noteWidth / 10;
-
-  const snapPositionToGrid = useGridSnapping();
-
-  function handleDragStart(event) {
-    onNoteDragStart && onNoteDragStart(event, note.id);
-  }
-
-  function handleDragMove(event) {
-    const noteGroup = event.target;
-    // Snap to corners of grid
-    if (map.snapToGrid) {
-      noteGroup.position(snapPositionToGrid(noteGroup.position()));
-    }
-  }
-
-  function handleDragEnd(event) {
-    const noteGroup = event.target;
-    onNoteChange &&
-      onNoteChange({
-        ...note,
-        x: noteGroup.x() / mapWidth,
-        y: noteGroup.y() / mapHeight,
-        lastModifiedBy: userId,
-        lastModified: Date.now(),
-      });
-    onNoteDragEnd && onNoteDragEnd(note.id);
-    setPreventMapInteraction(false);
-  }
-
-  function handleClick(event) {
-    if (draggable) {
-      const noteNode = event.target;
-      onNoteMenuOpen && onNoteMenuOpen(note.id, noteNode);
-    }
-  }
-
-  // Store note pointer down time to check for a click when note is locked
-  const notePointerDownTimeRef = useRef();
-  function handlePointerDown(event) {
-    if (draggable) {
-      setPreventMapInteraction(true);
-    }
-    if (note.locked && map.owner === userId) {
-      notePointerDownTimeRef.current = event.evt.timeStamp;
-    }
-  }
-
-  function handlePointerUp(event) {
-    if (draggable) {
-      setPreventMapInteraction(false);
-    }
-    // Check note click when locked and we are the map owner
-    // We can't use onClick because that doesn't check pointer distance
-    if (note.locked && map.owner === userId) {
-      // If down and up time is small trigger a click
-      const delta = event.evt.timeStamp - notePointerDownTimeRef.current;
-      if (delta < 300) {
-        const noteNode = event.target;
-        onNoteMenuOpen(note.id, noteNode);
-      }
-    }
-  }
-
-  const [noteOpacity, setNoteOpacity] = useState(1);
-  function handlePointerEnter() {
-    if (fadeOnHover) {
-      setNoteOpacity(0.5);
-    }
-  }
-
-  function handlePointerLeave() {
-    if (noteOpacity !== 1.0) {
-      setNoteOpacity(1.0);
-    }
-  }
-
-  const [fontScale, setFontScale] = useState(1);
-  useEffect(() => {
-    const text = textRef.current;
-
-    if (!text) {
-      return;
-    }
-
-    function findFontSize() {
-      // Create an array from 1 / defaultFontSize of the note height to the full note height
-      let sizes = Array.from(
-        { length: Math.ceil(noteHeight - notePadding * 2) },
-        (_, i) => i + Math.ceil(noteHeight / defaultFontSize)
-      );
-
-      if (sizes.length > 0) {
-        const size = sizes.reduce((prev, curr) => {
-          text.fontSize(curr);
-          const width = text.getTextWidth() + notePadding * 2;
-          const height = text.height() + notePadding * 2;
-          if (width < noteWidth && height < noteHeight) {
-            return curr;
-          } else {
-            return prev;
-          }
-        });
-        setFontScale(size / defaultFontSize);
-      }
-    }
-
-    findFontSize();
-  }, [note, note.text, note.visible, noteWidth, noteHeight, notePadding]);
-
-  const textRef = useRef();
-
-  // Animate to new note positions if edited by others
-  const noteX = note.x * mapWidth;
-  const noteY = note.y * mapHeight;
-  const previousWidth = usePrevious(mapWidth);
-  const previousHeight = usePrevious(mapHeight);
-  const resized = mapWidth !== previousWidth || mapHeight !== previousHeight;
-  const skipAnimation = note.lastModifiedBy === userId || resized;
-  const props = useSpring({
-    x: noteX,
-    y: noteY,
-    immediate: skipAnimation,
-  });
-
-  // When a note is hidden if you aren't the map owner hide it completely
-  if (map && !note.visible && map.owner !== userId) {
-    return null;
-  }
-
-  return (
-    <animated.Group
-      {...props}
-      onClick={handleClick}
-      onTap={handleClick}
-      width={noteWidth}
-      height={note.textOnly ? undefined : noteHeight}
-      offsetX={noteWidth / 2}
-      offsetY={noteHeight / 2}
-      draggable={draggable}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragMove={handleDragMove}
-      onMouseDown={handlePointerDown}
-      onMouseUp={handlePointerUp}
-      onTouchStart={handlePointerDown}
-      onTouchEnd={handlePointerUp}
-      onMouseEnter={handlePointerEnter}
-      onMouseLeave={handlePointerLeave}
-      opacity={note.visible ? noteOpacity : 0.5}
-    >
-      {!note.textOnly && (
-        <Rect
-          width={noteWidth}
-          height={noteHeight}
-          shadowColor="rgba(0, 0, 0, 0.16)"
-          shadowOffset={{ x: 0, y: 3 }}
-          shadowBlur={6}
-          cornerRadius={0.25}
-          fill={colors[note.color]}
-        />
-      )}
-      <Text
-        text={note.text}
-        fill={
-          note.textOnly
-            ? colors[note.color]
-            : note.color === "black" || note.color === "darkGray"
-            ? "white"
-            : "black"
-        }
-        align="left"
-        verticalAlign="middle"
-        padding={notePadding / fontScale}
-        fontSize={defaultFontSize}
-        // Scale font instead of changing font size to avoid kerning issues with Firefox
-        scaleX={fontScale}
-        scaleY={fontScale}
-        width={noteWidth / fontScale}
-        height={note.textOnly ? undefined : noteHeight / fontScale}
-        wrap="word"
-      />
-      {/* Use an invisible text block to work out text sizing */}
-      <Text visible={false} ref={textRef} text={note.text} wrap="none" />
-    </animated.Group>
-  );
-}
-
-export default Note;
diff --git a/src/components/note/NoteDragOverlay.js b/src/components/note/NoteDragOverlay.js
deleted file mode 100644
index bcd2179..0000000
--- a/src/components/note/NoteDragOverlay.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-import DragOverlay from "../map/DragOverlay";
-
-function NoteDragOverlay({ onNoteRemove, noteId, noteGroup, dragging }) {
-  function handleNoteRemove() {
-    onNoteRemove(noteId);
-  }
-
-  return (
-    <DragOverlay
-      dragging={dragging}
-      onRemove={handleNoteRemove}
-      node={noteGroup}
-    />
-  );
-}
-
-export default NoteDragOverlay;
diff --git a/src/components/note/NoteDragOverlay.tsx b/src/components/note/NoteDragOverlay.tsx
new file mode 100644
index 0000000..3bf61f9
--- /dev/null
+++ b/src/components/note/NoteDragOverlay.tsx
@@ -0,0 +1,27 @@
+import { NoteRemoveEventHander } from "../../types/Events";
+import { NoteDraggingOptions } from "../../types/Note";
+
+import DragOverlay from "../map/DragOverlay";
+
+type NoteDragOverlayProps = {
+  onNoteRemove: NoteRemoveEventHander;
+  draggingOptions: NoteDraggingOptions;
+};
+
+function NoteDragOverlay({
+  onNoteRemove,
+  draggingOptions,
+}: NoteDragOverlayProps) {
+  function handleNoteRemove() {
+    onNoteRemove([draggingOptions.noteId]);
+  }
+
+  return (
+    <DragOverlay
+      dragging={draggingOptions.dragging}
+      onRemove={handleNoteRemove}
+    />
+  );
+}
+
+export default NoteDragOverlay;
diff --git a/src/components/note/NoteMenu.js b/src/components/note/NoteMenu.tsx
similarity index 55%
rename from src/components/note/NoteMenu.js
rename to src/components/note/NoteMenu.tsx
index 8060fd8..f2b6f81 100644
--- a/src/components/note/NoteMenu.js
+++ b/src/components/note/NoteMenu.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { Box, Flex, Text, IconButton } from "theme-ui";
+import { Box, Flex, IconButton } from "theme-ui";
+import Konva from "konva";
 
-import Slider from "../Slider";
 import TextareaAutosize from "../TextareaAutoSize";
 
 import MapMenu from "../map/MapMenu";
 
-import colors, { colorOptions } from "../../helpers/colors";
+import colors, { Color, colorOptions } from "../../helpers/colors";
 
 import usePrevious from "../../hooks/usePrevious";
 
@@ -19,93 +19,108 @@ import TextIcon from "../../icons/NoteTextIcon";
 
 import { useUserId } from "../../contexts/UserIdContext";
 
-const defaultNoteMaxSize = 6;
+import {
+  NoteChangeEventHandler,
+  RequestCloseEventHandler,
+} from "../../types/Events";
+import { Note } from "../../types/Note";
+import { Map } from "../../types/Map";
+
+type NoteMenuProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  note?: Note;
+  noteNode?: Konva.Node;
+  focus: boolean;
+  onNoteChange: NoteChangeEventHandler;
+  map: Map | null;
+};
 
 function NoteMenu({
   isOpen,
   onRequestClose,
   note,
   noteNode,
+  focus,
   onNoteChange,
   map,
-}) {
+}: NoteMenuProps) {
   const userId = useUserId();
 
   const wasOpen = usePrevious(isOpen);
 
-  const [noteMaxSize, setNoteMaxSize] = useState(defaultNoteMaxSize);
   const [menuLeft, setMenuLeft] = useState(0);
   const [menuTop, setMenuTop] = useState(0);
   useEffect(() => {
     if (isOpen && !wasOpen && note) {
-      setNoteMaxSize(Math.max(note.size, defaultNoteMaxSize));
       // Update menu position
       if (noteNode) {
         const nodeRect = noteNode.getClientRect();
         const mapElement = document.querySelector(".map");
-        const mapRect = mapElement.getBoundingClientRect();
-
-        // Center X for the menu which is 156px wide
-        setMenuLeft(mapRect.left + nodeRect.x + nodeRect.width / 2 - 156 / 2);
-        // Y 12px from the bottom
-        setMenuTop(mapRect.top + nodeRect.y + nodeRect.height + 12);
+        if (mapElement) {
+          const mapRect = mapElement.getBoundingClientRect();
+          // Center X for the menu which is 156px wide
+          setMenuLeft(mapRect.left + nodeRect.x + nodeRect.width / 2 - 156 / 2);
+          // Y 20px from the bottom
+          setMenuTop(mapRect.top + nodeRect.y + nodeRect.height + 20);
+        }
       }
     }
   }, [isOpen, note, wasOpen, noteNode]);
 
-  function handleTextChange(event) {
+  function handleTextChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
     const text = event.target.value.substring(0, 1024);
-    note && onNoteChange({ ...note, text: text });
+    note && onNoteChange({ [note.id]: { text: text } });
   }
 
-  function handleColorChange(color) {
+  function handleColorChange(color: Color) {
     if (!note) {
       return;
     }
-    onNoteChange({ ...note, color: color });
-  }
-
-  function handleSizeChange(event) {
-    const newSize = parseFloat(event.target.value);
-    note && onNoteChange({ ...note, size: newSize });
+    onNoteChange({ [note.id]: { color: color } });
   }
 
   function handleVisibleChange() {
-    note && onNoteChange({ ...note, visible: !note.visible });
+    note && onNoteChange({ [note.id]: { visible: !note.visible } });
   }
 
   function handleLockChange() {
-    note && onNoteChange({ ...note, locked: !note.locked });
+    note && onNoteChange({ [note.id]: { locked: !note.locked } });
   }
 
   function handleModeChange() {
-    note && onNoteChange({ ...note, textOnly: !note.textOnly });
+    note && onNoteChange({ [note.id]: { textOnly: !note.textOnly } });
   }
 
-  function handleModalContent(node) {
+  function handleModalContent(node: HTMLElement) {
     if (node) {
       // Focus input
-      const tokenLabelInput = node.querySelector("#changeNoteText");
-      tokenLabelInput.focus();
-      tokenLabelInput.select();
+      const tokenLabelInput =
+        node.querySelector<HTMLInputElement>("#changeNoteText");
+      if (tokenLabelInput && focus) {
+        tokenLabelInput.focus();
+        tokenLabelInput.select();
+      }
 
       // Ensure menu is in bounds
       const nodeRect = node.getBoundingClientRect();
       const mapElement = document.querySelector(".map");
-      const mapRect = mapElement.getBoundingClientRect();
-      setMenuLeft((prevLeft) =>
-        Math.min(
-          mapRect.right - nodeRect.width,
-          Math.max(mapRect.left, prevLeft)
-        )
-      );
-      setMenuTop((prevTop) =>
-        Math.min(mapRect.bottom - nodeRect.height, prevTop)
-      );
+      if (mapElement) {
+        const mapRect = mapElement.getBoundingClientRect();
+        setMenuLeft((prevLeft) =>
+          Math.min(
+            mapRect.right - nodeRect.width,
+            Math.max(mapRect.left, prevLeft)
+          )
+        );
+        setMenuTop((prevTop) =>
+          Math.min(mapRect.bottom - nodeRect.height, prevTop)
+        );
+      }
     }
   }
 
-  function handleTextKeyPress(e) {
+  function handleTextKeyPress(e: React.KeyboardEvent<HTMLTextAreaElement>) {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       onRequestClose();
@@ -144,53 +159,37 @@ function NoteMenu({
             justifyContent: "space-between",
           }}
         >
-          {colorOptions.map((color) => (
-            <Box
-              key={color}
-              sx={{
-                width: "16.66%",
-                paddingTop: "16.66%",
-                borderRadius: "50%",
-                transform: "scale(0.75)",
-                backgroundColor: colors[color],
-                cursor: "pointer",
-              }}
-              onClick={() => handleColorChange(color)}
-              aria-label={`Note label Color ${color}`}
-            >
-              {note && note.color === color && (
-                <Box
-                  sx={{
-                    width: "100%",
-                    height: "100%",
-                    border: "2px solid white",
-                    position: "absolute",
-                    top: 0,
-                    borderRadius: "50%",
-                  }}
-                />
-              )}
-            </Box>
-          ))}
+          {colorOptions
+            .filter((color) => color !== "primary")
+            .map((color) => (
+              <Box
+                key={color}
+                sx={{
+                  width: "16.66%",
+                  paddingTop: "16.66%",
+                  borderRadius: "50%",
+                  transform: "scale(0.75)",
+                  backgroundColor: colors[color],
+                  cursor: "pointer",
+                }}
+                onClick={() => handleColorChange(color)}
+                aria-label={`Note label Color ${color}`}
+              >
+                {note && note.color === color && (
+                  <Box
+                    sx={{
+                      width: "100%",
+                      height: "100%",
+                      border: "2px solid white",
+                      position: "absolute",
+                      top: 0,
+                      borderRadius: "50%",
+                    }}
+                  />
+                )}
+              </Box>
+            ))}
         </Box>
-        <Flex sx={{ alignItems: "center" }}>
-          <Text
-            as="label"
-            variant="body2"
-            sx={{ width: "40%", fontSize: "16px" }}
-            p={1}
-          >
-            Size:
-          </Text>
-          <Slider
-            value={(note && note.size) || 1}
-            onChange={handleSizeChange}
-            step={0.5}
-            min={0.5}
-            max={noteMaxSize}
-            mr={1}
-          />
-        </Flex>
         {/* Only show hide and lock token actions to map owners */}
         {map && map.owner === userId && (
           <Flex sx={{ alignItems: "center", justifyContent: "space-around" }}>
@@ -222,4 +221,8 @@ function NoteMenu({
   );
 }
 
+NoteMenu.defaultProps = {
+  focus: false,
+};
+
 export default NoteMenu;
diff --git a/src/components/party/AddPartyMemberButton.js b/src/components/party/AddPartyMemberButton.tsx
similarity index 88%
rename from src/components/party/AddPartyMemberButton.js
rename to src/components/party/AddPartyMemberButton.tsx
index b2932b1..27762c6 100644
--- a/src/components/party/AddPartyMemberButton.js
+++ b/src/components/party/AddPartyMemberButton.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { IconButton } from "theme-ui";
 
 import AddPartyMemberModal from "../../modals/AddPartyMemberModal";
 import AddPartyMemberIcon from "../../icons/AddPartyMemberIcon";
 
-function AddPartyMemberButton({ gameId }) {
+function AddPartyMemberButton({ gameId }: { gameId: string }) {
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   function openModal() {
     setIsAddModalOpen(true);
diff --git a/src/components/party/ChangeNicknameButton.js b/src/components/party/ChangeNicknameButton.tsx
similarity index 71%
rename from src/components/party/ChangeNicknameButton.js
rename to src/components/party/ChangeNicknameButton.tsx
index 20231af..16b8f16 100644
--- a/src/components/party/ChangeNicknameButton.js
+++ b/src/components/party/ChangeNicknameButton.tsx
@@ -1,10 +1,18 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, ChangeEvent, FormEvent } from "react";
 import { IconButton } from "theme-ui";
 
 import ChangeNicknameModal from "../../modals/ChangeNicknameModal";
 import ChangeNicknameIcon from "../../icons/ChangeNicknameIcon";
 
-function ChangeNicknameButton({ nickname, onChange }) {
+type ChangeNicknameButtonProps = {
+  nickname: string;
+  onChange: (nickname: string) => void;
+};
+
+function ChangeNicknameButton({
+  nickname,
+  onChange,
+}: ChangeNicknameButtonProps) {
   const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
   function openModal() {
     setIsChangeModalOpen(true);
@@ -19,14 +27,14 @@ function ChangeNicknameButton({ nickname, onChange }) {
     setChangedNickname(nickname);
   }, [nickname]);
 
-  function handleChangeSubmit(event) {
+  function handleChangeSubmit(event: FormEvent) {
     event.preventDefault();
     onChange(changedNickname);
     closeModal();
   }
 
-  function handleChange(event) {
-    setChangedNickname(event.target.value);
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    setChangedNickname(event.target?.value);
   }
   return (
     <>
diff --git a/src/components/party/DiceRoll.js b/src/components/party/DiceRoll.tsx
similarity index 58%
rename from src/components/party/DiceRoll.js
rename to src/components/party/DiceRoll.tsx
index f04d11b..1fa4e0b 100644
--- a/src/components/party/DiceRoll.js
+++ b/src/components/party/DiceRoll.tsx
@@ -1,13 +1,19 @@
-import React from "react";
 import { Flex, Box, Text } from "theme-ui";
+import { DiceRoll as DiceRollType, DiceType } from "../../types/Dice";
 
-function DiceRoll({ rolls, type, children }) {
+type DiceRollProps = {
+  rolls: DiceRollType[];
+  type: DiceType;
+  children: React.ReactNode;
+};
+
+function DiceRoll({ rolls, type, children }: DiceRollProps) {
   return (
     <Flex sx={{ flexWrap: "wrap" }}>
       <Box sx={{ transform: "scale(0.8)" }}>{children}</Box>
       {rolls
         .filter((d) => d.type === type && d.roll !== "unknown")
-        .map((dice, index) => (
+        .map((dice, index: string | number) => (
           <Text as="p" my={1} variant="caption" mx={1} key={index}>
             {dice.roll}
           </Text>
diff --git a/src/components/party/DiceRolls.js b/src/components/party/DiceRolls.tsx
similarity index 53%
rename from src/components/party/DiceRolls.js
rename to src/components/party/DiceRolls.tsx
index b20b3bd..36619c2 100644
--- a/src/components/party/DiceRolls.js
+++ b/src/components/party/DiceRolls.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Flex, Text, IconButton } from "theme-ui";
 
 import DiceRollsIcon from "../../icons/DiceRollsIcon";
@@ -13,8 +13,9 @@ import D100Icon from "../../icons/D100Icon";
 import DiceRoll from "./DiceRoll";
 
 import { getDiceRollTotal } from "../../helpers/dice";
+import { DiceRoll as DiceRollType, DiceType } from "../../types/Dice";
 
-const diceIcons = [
+const diceIcons: { type: DiceType; Icon: React.ElementType }[] = [
   { type: "d20", Icon: D20Icon },
   { type: "d12", Icon: D12Icon },
   { type: "d10", Icon: D10Icon },
@@ -24,10 +25,14 @@ const diceIcons = [
   { type: "d100", Icon: D100Icon },
 ];
 
-function DiceRolls({ rolls }) {
+type DiceRollsProps = {
+  rolls: DiceRollType[];
+};
+
+function DiceRolls({ rolls }: DiceRollsProps) {
   const total = getDiceRollTotal(rolls);
 
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState<boolean>(false);
 
   let expandedRolls = [];
   for (let icon of diceIcons) {
@@ -40,32 +45,34 @@ function DiceRolls({ rolls }) {
     }
   }
 
+  if (total <= 0) {
+    return null;
+  }
+
   return (
-    total > 0 && (
-      <Flex sx={{ flexDirection: "column" }}>
-        <Flex sx={{ alignItems: "center" }}>
-          <IconButton
-            title={expanded ? "Hide Rolls" : "Show Rolls"}
-            aria-label={expanded ? "Hide Rolls" : "Show Rolls"}
-            onClick={() => setExpanded(!expanded)}
-          >
-            <DiceRollsIcon />
-          </IconButton>
-          <Text px={1} as="p" my={1} variant="body2" sx={{ width: "100%" }}>
-            {total}
-          </Text>
-        </Flex>
-        {expanded && (
-          <Flex
-            sx={{
-              flexDirection: "column",
-            }}
-          >
-            {expandedRolls}
-          </Flex>
-        )}
+    <Flex sx={{ flexDirection: "column" }}>
+      <Flex sx={{ alignItems: "center" }}>
+        <IconButton
+          title={expanded ? "Hide Rolls" : "Show Rolls"}
+          aria-label={expanded ? "Hide Rolls" : "Show Rolls"}
+          onClick={() => setExpanded(!expanded)}
+        >
+          <DiceRollsIcon />
+        </IconButton>
+        <Text px={1} as="p" my={1} variant="body2" sx={{ width: "100%" }}>
+          {total}
+        </Text>
       </Flex>
-    )
+      {expanded && (
+        <Flex
+          sx={{
+            flexDirection: "column",
+          }}
+        >
+          {expandedRolls}
+        </Flex>
+      )}
+    </Flex>
   );
 }
 
diff --git a/src/components/party/DiceTrayButton.js b/src/components/party/DiceTrayButton.tsx
similarity index 82%
rename from src/components/party/DiceTrayButton.js
rename to src/components/party/DiceTrayButton.tsx
index d4591a9..591930b 100644
--- a/src/components/party/DiceTrayButton.js
+++ b/src/components/party/DiceTrayButton.tsx
@@ -9,14 +9,27 @@ import useSetting from "../../hooks/useSetting";
 
 import LoadingOverlay from "../LoadingOverlay";
 
+import {
+  DiceShareChangeEventHandler,
+  DiceRollsChangeEventHandler,
+} from "../../types/Events";
+import { DiceRoll } from "../../types/Dice";
+
 const DiceTrayOverlay = React.lazy(() => import("../dice/DiceTrayOverlay"));
 
+type DiceTrayButtonProps = {
+  shareDice: boolean;
+  onShareDiceChange: DiceShareChangeEventHandler;
+  diceRolls: DiceRoll[];
+  onDiceRollsChange: DiceRollsChangeEventHandler;
+};
+
 function DiceTrayButton({
   shareDice,
-  onShareDiceChage,
+  onShareDiceChange,
   diceRolls,
   onDiceRollsChange,
-}) {
+}: DiceTrayButtonProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [fullScreen] = useSetting("map.fullScreen");
 
@@ -69,7 +82,7 @@ function DiceTrayButton({
           <DiceTrayOverlay
             isOpen={isExpanded}
             shareDice={shareDice}
-            onShareDiceChage={onShareDiceChage}
+            onShareDiceChange={onShareDiceChange}
             diceRolls={diceRolls}
             onDiceRollsChange={onDiceRollsChange}
           />
diff --git a/src/components/party/Nickname.js b/src/components/party/Nickname.tsx
similarity index 70%
rename from src/components/party/Nickname.js
rename to src/components/party/Nickname.tsx
index 12cdd33..2c49d82 100644
--- a/src/components/party/Nickname.js
+++ b/src/components/party/Nickname.tsx
@@ -1,10 +1,16 @@
-import React from "react";
 import { Text, Flex } from "theme-ui";
 
 import Stream from "./Stream";
 import DiceRolls from "./DiceRolls";
+import { DiceRoll } from "../../types/Dice";
 
-function Nickname({ nickname, stream, diceRolls }) {
+type NicknameProps = {
+  nickname: string;
+  stream?: MediaStream;
+  diceRolls?: DiceRoll[];
+};
+
+function Nickname({ nickname, stream, diceRolls }: NicknameProps) {
   return (
     <Flex sx={{ flexDirection: "column" }}>
       <Text
diff --git a/src/components/party/Party.js b/src/components/party/Party.tsx
similarity index 78%
rename from src/components/party/Party.js
rename to src/components/party/Party.tsx
index 1158602..efc1871 100644
--- a/src/components/party/Party.js
+++ b/src/components/party/Party.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Flex, Box, Text } from "theme-ui";
 import SimpleBar from "simplebar-react";
 
@@ -15,28 +15,48 @@ import useSetting from "../../hooks/useSetting";
 
 import { useParty } from "../../contexts/PartyContext";
 import { usePlayerState, usePlayerUpdater } from "../../contexts/PlayerContext";
+import { DiceRoll } from "../../types/Dice";
+import {
+  StreamEndEventHandler,
+  StreamStartEventHandler,
+} from "../../types/Events";
+import { Timer as TimerType } from "../../types/Timer";
 
-function Party({ gameId, stream, partyStreams, onStreamStart, onStreamEnd }) {
+type PartyProps = {
+  gameId: string;
+  stream: MediaStream | null;
+  partyStreams: Record<string, MediaStream>;
+  onStreamStart: StreamStartEventHandler;
+  onStreamEnd: StreamEndEventHandler;
+};
+
+function Party({
+  gameId,
+  stream,
+  partyStreams,
+  onStreamStart,
+  onStreamEnd,
+}: PartyProps) {
   const setPlayerState = usePlayerUpdater();
   const playerState = usePlayerState();
   const partyState = useParty();
 
-  const [fullScreen] = useSetting("map.fullScreen");
-  const [shareDice, setShareDice] = useSetting("dice.shareDice");
+  const [fullScreen] = useSetting<boolean>("map.fullScreen");
+  const [shareDice, setShareDice] = useSetting<boolean>("dice.shareDice");
 
-  function handleTimerStart(newTimer) {
+  function handleTimerStart(newTimer: TimerType) {
     setPlayerState((prevState) => ({ ...prevState, timer: newTimer }));
   }
 
   function handleTimerStop() {
-    setPlayerState((prevState) => ({ ...prevState, timer: null }));
+    setPlayerState((prevState) => ({ ...prevState, timer: undefined }));
   }
 
   useEffect(() => {
     let prevTime = performance.now();
     let request = requestAnimationFrame(update);
     let counter = 0;
-    function update(time) {
+    function update(time: number) {
       request = requestAnimationFrame(update);
       const deltaTime = time - prevTime;
       prevTime = time;
@@ -45,12 +65,12 @@ function Party({ gameId, stream, partyStreams, onStreamStart, onStreamEnd }) {
         counter += deltaTime;
         // Update timer every second
         if (counter > 1000) {
-          const newTimer = {
+          const newTimer: TimerType = {
             ...playerState.timer,
             current: playerState.timer.current - counter,
           };
           if (newTimer.current < 0) {
-            setPlayerState((prevState) => ({ ...prevState, timer: null }));
+            setPlayerState((prevState) => ({ ...prevState, timer: undefined }));
           } else {
             setPlayerState((prevState) => ({ ...prevState, timer: newTimer }));
           }
@@ -63,11 +83,11 @@ function Party({ gameId, stream, partyStreams, onStreamStart, onStreamEnd }) {
     };
   }, [playerState.timer, setPlayerState]);
 
-  function handleNicknameChange(newNickname) {
+  function handleNicknameChange(newNickname: string) {
     setPlayerState((prevState) => ({ ...prevState, nickname: newNickname }));
   }
 
-  function handleDiceRollsChange(newDiceRolls) {
+  function handleDiceRollsChange(newDiceRolls: DiceRoll[]) {
     setPlayerState(
       (prevState) => ({
         ...prevState,
@@ -77,7 +97,7 @@ function Party({ gameId, stream, partyStreams, onStreamStart, onStreamEnd }) {
     );
   }
 
-  function handleShareDiceChange(newShareDice) {
+  function handleShareDiceChange(newShareDice: boolean) {
     setShareDice(newShareDice);
     setPlayerState((prevState) => ({
       ...prevState,
@@ -124,14 +144,14 @@ function Party({ gameId, stream, partyStreams, onStreamStart, onStreamEnd }) {
         >
           <Nickname
             nickname={`${playerState.nickname} (you)`}
-            diceRolls={shareDice && playerState.dice.rolls}
+            diceRolls={shareDice ? playerState.dice.rolls : undefined}
           />
           {Object.entries(partyState).map(([id, { nickname, dice }]) => (
             <Nickname
               nickname={nickname}
               key={id}
               stream={partyStreams[id]}
-              diceRolls={dice.share && dice.rolls}
+              diceRolls={dice.share ? dice.rolls : undefined}
             />
           ))}
           {playerState.timer && <Timer timer={playerState.timer} index={0} />}
@@ -167,7 +187,7 @@ function Party({ gameId, stream, partyStreams, onStreamStart, onStreamEnd }) {
       </Box>
       <DiceTrayButton
         shareDice={shareDice}
-        onShareDiceChage={handleShareDiceChange}
+        onShareDiceChange={handleShareDiceChange}
         diceRolls={(playerState.dice && playerState.dice.rolls) || []}
         onDiceRollsChange={handleDiceRollsChange}
       />
diff --git a/src/components/party/StartStreamButton.js b/src/components/party/StartStreamButton.tsx
similarity index 80%
rename from src/components/party/StartStreamButton.js
rename to src/components/party/StartStreamButton.tsx
index df41e9d..eb603a7 100644
--- a/src/components/party/StartStreamButton.js
+++ b/src/components/party/StartStreamButton.tsx
@@ -1,12 +1,26 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { IconButton, Box, Text } from "theme-ui";
 import adapter from "webrtc-adapter";
 
 import Link from "../Link";
 
 import StartStreamModal from "../../modals/StartStreamModal";
+import {
+  StreamEndEventHandler,
+  StreamStartEventHandler,
+} from "../../types/Events";
 
-function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
+type StartStreamProps = {
+  onStreamStart: StreamStartEventHandler;
+  onStreamEnd: StreamEndEventHandler;
+  stream: MediaStream | null;
+};
+
+function StartStreamButton({
+  onStreamStart,
+  onStreamEnd,
+  stream,
+}: StartStreamProps) {
   const [isStreamModalOpoen, setIsStreamModalOpen] = useState(false);
   function openModal() {
     setIsStreamModalOpen(true);
@@ -44,7 +58,9 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
   const [noAudioTrack, setNoAudioTrack] = useState(false);
 
   function handleStreamStart() {
-    navigator.mediaDevices
+    // Must be defined this way in typescript due to open issue - https://github.com/microsoft/TypeScript/issues/33232
+    const mediaDevices: any = navigator.mediaDevices;
+    mediaDevices
       .getDisplayMedia({
         video: true,
         audio: {
@@ -53,10 +69,12 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
           echoCancellation: false,
         },
       })
-      .then((localStream) => {
+      .then((localStream: MediaStream) => {
         const tracks = localStream.getTracks();
 
-        const hasAudio = tracks.some((track) => track.kind === "audio");
+        const hasAudio = tracks.some(
+          (track: { kind: string }) => track.kind === "audio"
+        );
         setNoAudioTrack(!hasAudio);
 
         // Ensure an audio track is present
diff --git a/src/components/party/StartTimerButton.js b/src/components/party/StartTimerButton.tsx
similarity index 66%
rename from src/components/party/StartTimerButton.js
rename to src/components/party/StartTimerButton.tsx
index 266ba6f..1e06c91 100644
--- a/src/components/party/StartTimerButton.js
+++ b/src/components/party/StartTimerButton.tsx
@@ -1,10 +1,25 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { IconButton } from "theme-ui";
 
 import StartTimerModal from "../../modals/StartTimerModal";
 import StartTimerIcon from "../../icons/StartTimerIcon";
+import {
+  TimerStartEventHandler,
+  TimerStopEventHandler,
+} from "../../types/Events";
+import { Timer } from "../../types/Timer";
 
-function StartTimerButton({ onTimerStart, onTimerStop, timer }) {
+type StartTimerButtonProps = {
+  onTimerStart: TimerStartEventHandler;
+  onTimerStop: TimerStopEventHandler;
+  timer?: Timer;
+};
+
+function StartTimerButton({
+  onTimerStart,
+  onTimerStop,
+  timer,
+}: StartTimerButtonProps) {
   const [isTimerModalOpen, setIsTimerModalOpen] = useState(false);
 
   function openModal() {
diff --git a/src/components/party/Stream.js b/src/components/party/Stream.tsx
similarity index 85%
rename from src/components/party/Stream.js
rename to src/components/party/Stream.tsx
index 631f4e1..2a7ef67 100644
--- a/src/components/party/Stream.js
+++ b/src/components/party/Stream.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, ChangeEvent } from "react";
 import { Text, IconButton, Box, Flex } from "theme-ui";
 
 import StreamMuteIcon from "../../icons/StreamMuteIcon";
@@ -6,13 +6,17 @@ import StreamMuteIcon from "../../icons/StreamMuteIcon";
 import Banner from "../banner/Banner";
 import Slider from "../Slider";
 
-function Stream({ stream, nickname }) {
+type StreamProps = {
+  stream: MediaStream;
+  nickname: string;
+};
+
+function Stream({ stream, nickname }: StreamProps) {
   const [streamVolume, setStreamVolume] = useState(1);
-  const [showStreamInteractBanner, setShowStreamInteractBanner] = useState(
-    false
-  );
+  const [showStreamInteractBanner, setShowStreamInteractBanner] =
+    useState(false);
   const [streamMuted, setStreamMuted] = useState(false);
-  const audioRef = useRef();
+  const audioRef = useRef<HTMLAudioElement>(null);
 
   useEffect(() => {
     if (audioRef.current) {
@@ -44,27 +48,31 @@ function Stream({ stream, nickname }) {
     }
   }
 
-  function handleVolumeChange(event) {
-    const volume = parseFloat(event.target.value);
+  function handleVolumeChange(event: ChangeEvent<HTMLInputElement>) {
+    const volume = parseFloat(event.target?.value);
     setStreamVolume(volume);
   }
 
   // Platforms like iOS don't allow you to control audio volume
   // Detect this by trying to change the audio volume
-  const [isVolumeControlAvailable, setIsVolumeControlAvailable] = useState(
-    true
-  );
+  const [isVolumeControlAvailable, setIsVolumeControlAvailable] =
+    useState(true);
   useEffect(() => {
-    let audio = audioRef.current;
-    function checkVolumeControlAvailable() {
+    const audio = audioRef.current;
+    if (!audio) {
+      return;
+    }
+    const checkVolumeControlAvailable = () => {
       const prevVolume = audio.volume;
       // Set volume to 0.5, then check if the value actually stuck 100ms later
       audio.volume = 0.5;
       setTimeout(() => {
-        setIsVolumeControlAvailable(audio.volume === 0.5);
-        audio.volume = prevVolume;
-      }, [100]);
-    }
+        if (audio) {
+          setIsVolumeControlAvailable(audio.volume === 0.5);
+          audio.volume = prevVolume;
+        }
+      }, 100);
+    };
 
     audio.addEventListener("playing", checkVolumeControlAvailable);
 
@@ -74,10 +82,10 @@ function Stream({ stream, nickname }) {
   }, []);
 
   // Use an audio context gain node to control volume to go past 100%
-  const audioGainRef = useRef();
+  const audioGainRef = useRef<GainNode>();
   useEffect(() => {
-    let audioContext;
-    if (stream && !streamMuted && isVolumeControlAvailable) {
+    let audioContext: AudioContext;
+    if (stream && !streamMuted && isVolumeControlAvailable && audioGainRef) {
       audioContext = new AudioContext();
       let source = audioContext.createMediaStreamSource(stream);
       let gainNode = audioContext.createGain();
diff --git a/src/components/party/Timer.js b/src/components/party/Timer.tsx
similarity index 82%
rename from src/components/party/Timer.js
rename to src/components/party/Timer.tsx
index 51b576a..68c9495 100644
--- a/src/components/party/Timer.js
+++ b/src/components/party/Timer.tsx
@@ -1,11 +1,17 @@
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import ReactDOM from "react-dom";
 import { Box, Progress } from "theme-ui";
 
 import usePortal from "../../hooks/usePortal";
+import { Timer as TimerType } from "../../types/Timer";
 
-function Timer({ timer, index }) {
-  const progressBarRef = useRef();
+type TimerProps = {
+  timer?: TimerType;
+  index: number;
+};
+
+function Timer({ timer, index }: TimerProps) {
+  const progressBarRef = useRef<HTMLProgressElement>(null);
 
   useEffect(() => {
     if (progressBarRef.current && timer) {
@@ -16,7 +22,7 @@ function Timer({ timer, index }) {
   useEffect(() => {
     let request = requestAnimationFrame(animate);
     let previousTime = performance.now();
-    function animate(time) {
+    function animate(time: number) {
       request = requestAnimationFrame(animate);
       const deltaTime = time - previousTime;
       previousTime = time;
diff --git a/src/components/selection/SelectionDragOverlay.tsx b/src/components/selection/SelectionDragOverlay.tsx
new file mode 100644
index 0000000..947b234
--- /dev/null
+++ b/src/components/selection/SelectionDragOverlay.tsx
@@ -0,0 +1,33 @@
+import { SelectionItemsRemoveEventHandler } from "../../types/Events";
+import { Selection } from "../../types/Select";
+
+import DragOverlay from "../map/DragOverlay";
+
+type NoteDragOverlayProps = {
+  onSelectionItemsRemove: SelectionItemsRemoveEventHandler;
+  selection: Selection;
+  dragging: boolean;
+};
+
+function NoteDragOverlay({
+  onSelectionItemsRemove,
+  selection,
+  dragging,
+}: NoteDragOverlayProps) {
+  function handleNoteRemove() {
+    const tokenIds: string[] = [];
+    const noteIds: string[] = [];
+    for (let item of selection.items) {
+      if (item.type === "token") {
+        tokenIds.push(item.id);
+      } else {
+        noteIds.push(item.id);
+      }
+    }
+    onSelectionItemsRemove(tokenIds, noteIds);
+  }
+
+  return <DragOverlay dragging={dragging} onRemove={handleNoteRemove} />;
+}
+
+export default NoteDragOverlay;
diff --git a/src/components/selection/SelectionMenu.tsx b/src/components/selection/SelectionMenu.tsx
new file mode 100644
index 0000000..aa1d372
--- /dev/null
+++ b/src/components/selection/SelectionMenu.tsx
@@ -0,0 +1,436 @@
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, IconButton } from "theme-ui";
+import { useToasts } from "react-toast-notifications";
+import { v4 as uuid } from "uuid";
+
+import MapMenu from "../map/MapMenu";
+
+import usePrevious from "../../hooks/usePrevious";
+
+import LockIcon from "../../icons/TokenLockIcon";
+import UnlockIcon from "../../icons/TokenUnlockIcon";
+import ShowIcon from "../../icons/TokenShowIcon";
+import HideIcon from "../../icons/TokenHideIcon";
+import CopyIcon from "../../icons/CopyIcon";
+import PasteIcon from "../../icons/PasteIcon";
+
+import { useUserId } from "../../contexts/UserIdContext";
+
+import {
+  SelectionItemsChangeEventHandler,
+  RequestCloseEventHandler,
+  SelectionItemsCreateEventHandler,
+} from "../../types/Events";
+import { Map } from "../../types/Map";
+import { Selection, SelectionItem } from "../../types/Select";
+import { TokenState, TokenStates } from "../../types/TokenState";
+import { Note, Notes } from "../../types/Note";
+import { getSelectionPoints } from "../../helpers/selection";
+import Vector2 from "../../helpers/Vector2";
+import { useMapStage } from "../../contexts/MapStageContext";
+import { MapState } from "../../types/MapState";
+import { isMapState } from "../../validators/MapState";
+import { isSelection } from "../../validators/Selection";
+import { getRelativePointerPosition } from "../../helpers/konva";
+import { useKeyboard } from "../../contexts/KeyboardContext";
+import shortcuts from "../../shortcuts";
+import { clipboardSupported } from "../../helpers/shared";
+
+type SelectionMenuProps = {
+  isOpen: boolean;
+  active: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  onRequestOpen: () => void;
+  selection: Selection | null;
+  onSelectionChange: React.Dispatch<React.SetStateAction<Selection | null>>;
+  onSelectionItemsChange: SelectionItemsChangeEventHandler;
+  onSelectionItemsCreate: SelectionItemsCreateEventHandler;
+  map: Map | null;
+  mapState: MapState | null;
+};
+
+function SelectionMenu({
+  isOpen,
+  active,
+  onRequestClose,
+  onRequestOpen,
+  selection,
+  onSelectionChange,
+  onSelectionItemsChange,
+  onSelectionItemsCreate,
+  map,
+  mapState,
+}: SelectionMenuProps) {
+  const { addToast } = useToasts();
+
+  const userId = useUserId();
+
+  const wasOpen = usePrevious(isOpen);
+
+  const mapStageRef = useMapStage();
+
+  const [menuLeft, setMenuLeft] = useState(0);
+  const [menuTop, setMenuTop] = useState(0);
+
+  const selectionMenuWidth = selection === null ? 48 : 156;
+
+  useEffect(() => {
+    const mapStage = mapStageRef.current;
+    if (isOpen && !wasOpen && mapStage) {
+      const mapImage = mapStage.findOne("#mapImage");
+      if (!mapImage) {
+        return;
+      }
+      let menuPosition = { x: 0, y: 0 };
+      if (selection) {
+        const points = getSelectionPoints(selection);
+        const bounds = Vector2.getBoundingBox(points);
+
+        menuPosition = new Vector2(
+          bounds.center.x + selection.x,
+          bounds.max.y + selection.y
+        );
+        menuPosition = Vector2.multiply(menuPosition, {
+          x: mapImage.width(),
+          y: mapImage.height(),
+        });
+      } else {
+        const position = getRelativePointerPosition(mapImage);
+        if (position) {
+          menuPosition = position;
+        }
+      }
+
+      const transform = mapImage.getAbsoluteTransform().copy();
+      const absolutePosition = transform.point(menuPosition);
+      const mapElement = document.querySelector(".map");
+      if (mapElement) {
+        const mapRect = mapElement.getBoundingClientRect();
+        setMenuLeft(mapRect.left + absolutePosition.x - selectionMenuWidth / 2);
+        setMenuTop(mapRect.top + absolutePosition.y + 12);
+      }
+    }
+  }, [isOpen, selection, wasOpen, mapStageRef, selectionMenuWidth]);
+
+  // Open paste menu if clicking without a selection
+  // Ensure that paste menu is closed when clicking and that the click hasn't moved far
+  const openOnDownRef = useRef(false);
+  const downPositionRef = useRef({ x: 0, y: 0 });
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    function handlePointerDown(event: PointerEvent) {
+      openOnDownRef.current = isOpen || !!selection;
+      downPositionRef.current = { x: event.clientX, y: event.clientY };
+    }
+    function handlePointerUp(event: MouseEvent | TouchEvent) {
+      let position;
+      if (event instanceof MouseEvent) {
+        position = { x: event.clientX, y: event.clientY };
+      } else {
+        position = {
+          x: event.changedTouches[0].clientX,
+          y: event.changedTouches[0].clientY,
+        };
+      }
+      const deltaPosition = Vector2.distance(position, downPositionRef.current);
+      if (
+        !openOnDownRef.current &&
+        !selection &&
+        deltaPosition < 10 &&
+        event.target instanceof HTMLCanvasElement
+      ) {
+        onRequestOpen();
+      }
+    }
+    const mapElement = document.querySelector<HTMLElement>(".map");
+    mapElement?.addEventListener("pointerdown", handlePointerDown);
+    mapElement?.addEventListener("mouseup", handlePointerUp);
+    mapElement?.addEventListener("touchend", handlePointerUp);
+
+    return () => {
+      mapElement?.removeEventListener("pointerdown", handlePointerDown);
+      mapElement?.removeEventListener("mouseup", handlePointerUp);
+      mapElement?.removeEventListener("touchend", handlePointerUp);
+    };
+  }, [isOpen, active, selection, onRequestOpen]);
+
+  function handleModalContent(node: HTMLElement) {
+    if (node) {
+      // Ensure menu is in bounds
+      const nodeRect = node.getBoundingClientRect();
+      const mapElement = document.querySelector(".map");
+      if (mapElement) {
+        const mapRect = mapElement.getBoundingClientRect();
+        setMenuLeft((prevLeft) =>
+          Math.min(
+            mapRect.right - nodeRect.width,
+            Math.max(mapRect.left, prevLeft)
+          )
+        );
+        setMenuTop((prevTop) =>
+          Math.min(mapRect.bottom - nodeRect.height, prevTop)
+        );
+      }
+    }
+  }
+
+  function updateSelectedItems(change: Partial<TokenState> | Partial<Note>) {
+    if (selection) {
+      const tokenChanges: Record<string, Partial<TokenState>> = {};
+      const noteChanges: Record<string, Partial<Note>> = {};
+      for (let item of selection.items) {
+        if (item.type === "token") {
+          tokenChanges[item.id] = change;
+        } else {
+          noteChanges[item.id] = change;
+        }
+      }
+      onSelectionItemsChange(tokenChanges, noteChanges);
+    }
+  }
+
+  const [itemsVisible, setItemsVisible] = useState(false);
+  function handleVisibleChange() {
+    updateSelectedItems({ visible: !itemsVisible });
+    setItemsVisible(!itemsVisible);
+  }
+
+  const [itemsLocked, setItemsLocked] = useState(false);
+  function handleLockChange() {
+    updateSelectedItems({ locked: !itemsLocked });
+    setItemsLocked(!itemsLocked);
+  }
+
+  // Update lock and visible state depending on selected items
+  useEffect(() => {
+    if (isOpen && selection && mapState) {
+      let allVisible = true;
+      let allLocked = true;
+      for (let item of selection.items) {
+        if (item.type === "token") {
+          const tokenState = mapState.tokens[item.id];
+          if (!tokenState.visible) {
+            allVisible = false;
+          }
+          if (!tokenState.locked) {
+            allLocked = false;
+          }
+        } else {
+          const note = mapState.notes[item.id];
+          if (!note.visible) {
+            allVisible = false;
+          }
+          if (!note.locked) {
+            allLocked = false;
+          }
+        }
+      }
+      setItemsVisible(allVisible);
+      setItemsLocked(allLocked);
+    }
+  }, [mapState, selection, isOpen]);
+
+  function addSuccessToast(
+    message: string,
+    tokens?: TokenStates,
+    notes?: Notes
+  ) {
+    const numTokens = tokens ? Object.keys(tokens).length : 0;
+    const numNotes = notes ? Object.keys(notes).length : 0;
+    const tokenText = `${numTokens} token${numTokens > 1 ? "s" : ""}`;
+    const noteText = `${numNotes} note${numNotes > 1 ? "s" : ""}`;
+    if (numTokens > 0 && numNotes > 0) {
+      addToast(`${message} ${tokenText} and ${noteText}`);
+    } else if (numTokens > 0) {
+      addToast(`${message} ${tokenText}`);
+    } else if (numNotes > 0) {
+      addToast(`${message} ${noteText}`);
+    }
+  }
+
+  // Keep a local copy of the clipboard if the device doesn't support the clipboard api i.e. iOS
+  const localClipboardDataRef = useRef<string>("");
+  async function handleCopy() {
+    let version = process.env.REACT_APP_VERSION;
+    if (!version || !selection || !mapState) {
+      return;
+    }
+    let clipboard: { version: string; data: MapState; selection: Selection } = {
+      version,
+      selection,
+      data: {
+        tokens: {},
+        notes: {},
+        drawings: {},
+        editFlags: [],
+        fogs: {},
+        mapId: mapState.mapId,
+      },
+    };
+    for (let item of selection.items) {
+      if (item.type === "token" && clipboard.data.tokens) {
+        clipboard.data.tokens[item.id] = mapState.tokens[item.id];
+      } else if (item.type === "note" && clipboard.data.notes) {
+        clipboard.data.notes[item.id] = mapState.notes[item.id];
+      }
+    }
+    if (await clipboardSupported()) {
+      await navigator.clipboard.writeText(JSON.stringify(clipboard));
+    } else {
+      localClipboardDataRef.current = JSON.stringify(clipboard);
+    }
+    addSuccessToast("Copied", clipboard.data.tokens, clipboard.data.notes);
+  }
+
+  async function handlePaste() {
+    let version = process.env.REACT_APP_VERSION;
+
+    if (!version || !mapState) {
+      return;
+    }
+    try {
+      let clipboardText;
+      if (await clipboardSupported()) {
+        clipboardText = await navigator.clipboard.readText();
+      } else {
+        clipboardText = localClipboardDataRef.current;
+      }
+      const clipboard = JSON.parse(clipboardText);
+      if (
+        clipboard.version === version &&
+        isMapState(clipboard.data) &&
+        isSelection(clipboard.selection)
+      ) {
+        // Find new selection position
+        const mapStage = mapStageRef.current;
+        const mapImage = mapStage?.findOne("#mapImage");
+        if (!mapImage) {
+          return;
+        }
+        const position = getRelativePointerPosition(mapImage);
+        if (!position) {
+          return;
+        }
+        const normalizedPosition = Vector2.divide(position, {
+          x: mapImage.width(),
+          y: mapImage.height(),
+        });
+
+        const clipboardSelection = clipboard.selection as Selection;
+        const points = getSelectionPoints(clipboardSelection);
+        const center = Vector2.centroid(points);
+
+        let selectionDelta = Vector2.subtract(normalizedPosition, center);
+
+        const clipboardState = clipboard.data as MapState;
+        let tokenStates: TokenState[] = [];
+        let notes: Note[] = [];
+        let selectionItems: SelectionItem[] = [];
+        for (let token of Object.values(clipboardState.tokens)) {
+          const newId = uuid();
+          tokenStates.push({
+            ...token,
+            x: token.x + selectionDelta.x,
+            y: token.y + selectionDelta.y,
+            id: newId,
+          });
+          selectionItems.push({ id: newId, type: "token" });
+        }
+        for (let note of Object.values(clipboardState.notes)) {
+          const newId = uuid();
+          notes.push({
+            ...note,
+            x: note.x + selectionDelta.x,
+            y: note.y + selectionDelta.y,
+            id: newId,
+          });
+          selectionItems.push({ id: newId, type: "note" });
+        }
+        onSelectionItemsCreate(tokenStates, notes);
+
+        onSelectionChange({
+          ...clipboardSelection,
+          items: selectionItems,
+          x: clipboardSelection.x + selectionDelta.x,
+          y: clipboardSelection.y + selectionDelta.y,
+        });
+
+        onRequestClose();
+      } else {
+        addToast("Invalid data");
+      }
+    } catch {
+      addToast("Unable to paste");
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (active) {
+      if (selection && shortcuts.copy(event)) {
+        handleCopy();
+      }
+      if (shortcuts.paste(event)) {
+        handlePaste();
+      }
+    }
+  }
+
+  useKeyboard(handleKeyDown);
+
+  return (
+    <MapMenu
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      top={`${menuTop}px`}
+      left={`${menuLeft}px`}
+      onModalContent={handleModalContent}
+    >
+      <Box sx={{ width: `${selectionMenuWidth}px`, overflow: "hidden" }} p={1}>
+        <Flex sx={{ alignItems: "center", justifyContent: "space-around" }}>
+          {selection ? (
+            <>
+              {/* Only show hide and lock token actions to map owners */}
+              {map && map.owner === userId && (
+                <>
+                  <IconButton
+                    onClick={handleVisibleChange}
+                    title={itemsVisible ? "Hide Items" : "Show Items"}
+                    aria-label={itemsVisible ? "Hide Items" : "Show Items"}
+                  >
+                    {itemsVisible ? <ShowIcon /> : <HideIcon />}
+                  </IconButton>
+                  <IconButton
+                    onClick={handleLockChange}
+                    title={itemsLocked ? "Unlock Items" : "Lock Items"}
+                    aria-label={itemsLocked ? "Unlock Items" : "Lock Items"}
+                  >
+                    {itemsLocked ? <LockIcon /> : <UnlockIcon />}
+                  </IconButton>
+                </>
+              )}
+              <IconButton
+                title="Copy Items"
+                aria-label="Copy Items"
+                onClick={handleCopy}
+              >
+                <CopyIcon />
+              </IconButton>
+            </>
+          ) : (
+            <IconButton
+              title="Paste Items"
+              aria-label="Paste Items"
+              onClick={handlePaste}
+            >
+              <PasteIcon />
+            </IconButton>
+          )}
+        </Flex>
+      </Box>
+    </MapMenu>
+  );
+}
+
+export default SelectionMenu;
diff --git a/src/components/tile/LazyTile.js b/src/components/tile/LazyTile.tsx
similarity index 79%
rename from src/components/tile/LazyTile.js
rename to src/components/tile/LazyTile.tsx
index 54eaa06..d6dca84 100644
--- a/src/components/tile/LazyTile.js
+++ b/src/components/tile/LazyTile.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { Box } from "theme-ui";
+import { Box, ThemeUIStyleObject } from "theme-ui";
 import { useInView } from "react-intersection-observer";
 
-function LazyTile({ children }) {
+function LazyTile({ children }: { children: React.ReactNode }) {
   const [ref, inView] = useInView({ triggerOnce: false });
 
-  const sx = inView
+  const sx: ThemeUIStyleObject = inView
     ? {}
     : { width: "100%", height: "0", paddingTop: "100%", position: "relative" };
 
diff --git a/src/components/tile/SortableTile.js b/src/components/tile/SortableTile.tsx
similarity index 84%
rename from src/components/tile/SortableTile.js
rename to src/components/tile/SortableTile.tsx
index cc9c8a0..5cf3905 100644
--- a/src/components/tile/SortableTile.js
+++ b/src/components/tile/SortableTile.tsx
@@ -6,6 +6,16 @@ import { animated, useSpring } from "react-spring";
 
 import { GROUP_ID_PREFIX } from "../../contexts/TileDragContext";
 
+type SortableTileProps = {
+  id: string;
+  disableGrouping: boolean;
+  disableSorting: boolean;
+  hidden: boolean;
+  children: React.ReactNode;
+  isDragging: boolean;
+  cursor: string;
+};
+
 function SortableTile({
   id,
   disableGrouping,
@@ -14,7 +24,7 @@ function SortableTile({
   children,
   isDragging,
   cursor,
-}) {
+}: SortableTileProps) {
   const {
     attributes,
     listeners,
@@ -35,7 +45,7 @@ function SortableTile({
   };
 
   // Sort div left aligned
-  const sortDropStyle = {
+  const sortDropStyle: React.CSSProperties = {
     position: "absolute",
     left: "-5px",
     top: 0,
@@ -46,7 +56,7 @@ function SortableTile({
   };
 
   // Group div center aligned
-  const groupDropStyle = {
+  const groupDropStyle: React.CSSProperties = {
     position: "absolute",
     top: 0,
     left: 0,
@@ -55,7 +65,7 @@ function SortableTile({
     borderWidth: "4px",
     borderRadius: "4px",
     borderStyle:
-      over?.id === `${GROUP_ID_PREFIX}${id}` && active.id !== id
+      over?.id === `${GROUP_ID_PREFIX}${id}` && active?.id !== id
         ? "solid"
         : "none",
   };
diff --git a/src/components/tile/SortableTiles.js b/src/components/tile/SortableTiles.tsx
similarity index 79%
rename from src/components/tile/SortableTiles.js
rename to src/components/tile/SortableTiles.tsx
index a42bfbd..9c8b97b 100644
--- a/src/components/tile/SortableTiles.js
+++ b/src/components/tile/SortableTiles.tsx
@@ -15,8 +15,14 @@ import {
   GROUP_SORTABLE_ID,
 } from "../../contexts/TileDragContext";
 import { useGroup } from "../../contexts/GroupContext";
+import { Group } from "../../types/Group";
 
-function SortableTiles({ renderTile, subgroup }) {
+type SortableTilesProps = {
+  renderTile: (group: Group) => React.ReactNode;
+  subgroup: boolean;
+};
+
+function SortableTiles({ renderTile, subgroup }: SortableTilesProps) {
   const dragId = useTileDragId();
   const dragCursor = useTileDragCursor();
   const overGroupId = useTileOverGroupId();
@@ -38,14 +44,14 @@ function SortableTiles({ renderTile, subgroup }) {
   const sortableId = subgroup ? GROUP_SORTABLE_ID : BASE_SORTABLE_ID;
 
   // Only populate selected groups if needed
-  let selectedGroupIds = [];
+  let selectedGroupIds: string[] = [];
   if ((subgroup && openGroupId) || (!subgroup && !openGroupId)) {
     selectedGroupIds = allSelectedIds;
   }
-  const disableSorting = (openGroupId && !subgroup) || filter;
-  const disableGrouping = subgroup || disableSorting || filter;
+  const disableSorting = !!((openGroupId && !subgroup) || filter);
+  const disableGrouping = !!(subgroup || disableSorting || filter);
 
-  function renderSortableGroup(group, selectedGroups) {
+  function renderSortableGroup(group: Group, selectedGroups: Group[]) {
     if (overGroupId === group.id && dragId && group.id !== dragId) {
       // If dragging over a group render a preview of that group
       const previewGroup = moveGroupsInto(
@@ -61,7 +67,7 @@ function SortableTiles({ renderTile, subgroup }) {
   function renderTiles() {
     const groupsByIds = keyBy(activeGroups, "id");
     const selectedGroupIdsSet = new Set(selectedGroupIds);
-    let selectedGroups = [];
+    let selectedGroups: Group[] = [];
     let hasSelectedContainerGroup = false;
     for (let groupId of selectedGroupIds) {
       const group = groupsByIds[groupId];
@@ -72,8 +78,8 @@ function SortableTiles({ renderTile, subgroup }) {
         }
       }
     }
-    return activeGroups.map((group) => {
-      const isDragging = dragId && selectedGroupIdsSet.has(group.id);
+    return activeGroups.map((group: Group) => {
+      const isDragging = dragId !== null && selectedGroupIdsSet.has(group.id);
       const disableTileGrouping =
         disableGrouping || isDragging || hasSelectedContainerGroup;
       return (
@@ -84,7 +90,7 @@ function SortableTiles({ renderTile, subgroup }) {
             disableSorting={disableSorting}
             hidden={group.id === openGroupId}
             isDragging={isDragging}
-            cursor={dragCursor}
+            cursor={dragCursor || ""}
           >
             {renderSortableGroup(group, selectedGroups)}
           </SortableTile>
diff --git a/src/components/tile/SortableTilesDragOverlay.js b/src/components/tile/SortableTilesDragOverlay.tsx
similarity index 87%
rename from src/components/tile/SortableTilesDragOverlay.js
rename to src/components/tile/SortableTilesDragOverlay.tsx
index 848b793..7464171 100644
--- a/src/components/tile/SortableTilesDragOverlay.js
+++ b/src/components/tile/SortableTilesDragOverlay.tsx
@@ -8,8 +8,17 @@ import Vector2 from "../../helpers/Vector2";
 
 import { useTileDragId } from "../../contexts/TileDragContext";
 import { useGroup } from "../../contexts/GroupContext";
+import { Group } from "../../types/Group";
 
-function SortableTilesDragOverlay({ renderTile, subgroup }) {
+type SortableTilesDragOverlayProps = {
+  renderTile: (group: Group) => React.ReactNode;
+  subgroup: boolean;
+};
+
+function SortableTilesDragOverlay({
+  renderTile,
+  subgroup,
+}: SortableTilesDragOverlayProps) {
   const dragId = useTileDragId();
   const {
     groups,
@@ -27,14 +36,13 @@ function SortableTilesDragOverlay({ renderTile, subgroup }) {
     : groups;
 
   // Only populate selected groups if needed
-  let selectedGroupIds = [];
+  let selectedGroupIds: string[] = [];
   if ((subgroup && openGroupId) || (!subgroup && !openGroupId)) {
     selectedGroupIds = allSelectedIds;
   }
   const dragBounce = useSpring({
     transform: !!dragId ? "scale(0.9)" : "scale(1)",
     config: config.wobbly,
-    position: "relative",
   });
 
   function renderDragOverlays() {
@@ -66,7 +74,7 @@ function SortableTilesDragOverlay({ renderTile, subgroup }) {
             transform: `translate(${coords[index].x}%, ${coords[index].y}%)`,
           }}
         >
-          <animated.div style={dragBounce}>
+          <animated.div style={{ ...dragBounce, position: "relative" }}>
             {renderTile(group)}
             {index === selectedIndices.length - 1 &&
               selectedGroupIds.length > 1 && (
diff --git a/src/components/tile/Tile.js b/src/components/tile/Tile.tsx
similarity index 91%
rename from src/components/tile/Tile.js
rename to src/components/tile/Tile.tsx
index c550657..220c483 100644
--- a/src/components/tile/Tile.js
+++ b/src/components/tile/Tile.tsx
@@ -3,6 +3,18 @@ import { Flex, IconButton, Box, Text, Badge } from "theme-ui";
 
 import EditTileIcon from "../../icons/EditTileIcon";
 
+type TileProps = {
+  title: string;
+  isSelected: boolean;
+  onSelect: () => void;
+  onEdit: () => void;
+  onDoubleClick: () => void;
+  canEdit: boolean;
+  badges: React.ReactChild[];
+  editTitle: string;
+  children: React.ReactNode;
+};
+
 function Tile({
   title,
   isSelected,
@@ -13,7 +25,7 @@ function Tile({
   badges,
   editTitle,
   children,
-}) {
+}: TileProps) {
   return (
     <Box
       sx={{
diff --git a/src/components/tile/TileActionBar.js b/src/components/tile/TileActionBar.tsx
similarity index 89%
rename from src/components/tile/TileActionBar.js
rename to src/components/tile/TileActionBar.tsx
index 5865a61..f28184c 100644
--- a/src/components/tile/TileActionBar.js
+++ b/src/components/tile/TileActionBar.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Flex, IconButton } from "theme-ui";
 
 import AddIcon from "../../icons/AddIcon";
@@ -10,11 +9,16 @@ import RadioIconButton from "../RadioIconButton";
 
 import { useGroup } from "../../contexts/GroupContext";
 
-function TileActionBar({ onAdd, addTitle }) {
+type TileActionBarProps = {
+  onAdd: () => void;
+  addTitle: string;
+};
+
+function TileActionBar({ onAdd, addTitle }: TileActionBarProps) {
   const {
     selectMode,
     onSelectModeChange,
-    onGroupSelect,
+    onClearSelection,
     filter,
     onFilterChange,
   } = useGroup();
@@ -33,7 +37,7 @@ function TileActionBar({ onAdd, addTitle }) {
           outlineOffset: "0px",
         },
       }}
-      onFocus={() => onGroupSelect()}
+      onFocus={() => onClearSelection()}
     >
       <Search value={filter} onChange={(e) => onFilterChange(e.target.value)} />
       <Flex
diff --git a/src/components/tile/TilesContainer.js b/src/components/tile/TilesContainer.tsx
similarity index 84%
rename from src/components/tile/TilesContainer.js
rename to src/components/tile/TilesContainer.tsx
index 97cd304..7508155 100644
--- a/src/components/tile/TilesContainer.js
+++ b/src/components/tile/TilesContainer.tsx
@@ -9,8 +9,8 @@ import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
 import Droppable from "../drag/Droppable";
 
-function TilesContainer({ children }) {
-  const { onGroupSelect } = useGroup();
+function TilesContainer({ children }: { children: React.ReactNode }) {
+  const { onClearSelection } = useGroup();
 
   const { theme } = useThemeUI();
 
@@ -21,9 +21,9 @@ function TilesContainer({ children }) {
       <SimpleBar
         style={{
           height: layout.tileContainerHeight,
-          backgroundColor: theme.colors.muted,
+          backgroundColor: theme.colors?.muted as string,
         }}
-        onClick={() => onGroupSelect()}
+        onClick={() => onClearSelection()}
       >
         <Grid
           p={3}
diff --git a/src/components/tile/TilesOverlay.js b/src/components/tile/TilesOverlay.tsx
similarity index 80%
rename from src/components/tile/TilesOverlay.js
rename to src/components/tile/TilesOverlay.tsx
index 9d024b0..79c5761 100644
--- a/src/components/tile/TilesOverlay.js
+++ b/src/components/tile/TilesOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { Box, Close, Grid, useThemeUI, IconButton, Text, Flex } from "theme-ui";
 import { useSpring, animated, config } from "react-spring";
 import ReactResizeDetector from "react-resize-detector";
@@ -16,13 +16,19 @@ import GroupNameModal from "../../modals/GroupNameModal";
 import { renameGroup } from "../../helpers/group";
 
 import Droppable from "../drag/Droppable";
+import { Group } from "../../types/Group";
 
-function TilesOverlay({ modalSize, children }) {
+type TilesOverlayProps = {
+  modalSize: { width: number; height: number };
+  children: React.ReactNode;
+};
+
+function TilesOverlay({ modalSize, children }: TilesOverlayProps) {
   const {
     groups,
     openGroupId,
     onGroupClose,
-    onGroupSelect,
+    onClearSelection,
     onGroupsChange,
   } = useGroup();
 
@@ -36,24 +42,31 @@ function TilesOverlay({ modalSize, children }) {
     config: config.gentle,
   });
 
+  const containerRef = useRef<HTMLDivElement>(null);
   const [containerSize, setContinerSize] = useState({ width: 0, height: 0 });
-  function handleContainerResize(width, height) {
-    const size = Math.min(width, height) - 16;
-    setContinerSize({ width: size, height: size });
+  function handleContainerResize(width?: number, height?: number) {
+    if (width && height) {
+      const size = Math.min(width, height) - 16;
+      setContinerSize({ width: size, height: size });
+    }
   }
 
   const [isGroupNameModalOpen, setIsGroupNameModalOpen] = useState(false);
-  function handleGroupNameChange(name) {
-    onGroupsChange(renameGroup(groups, openGroupId, name));
-    setIsGroupNameModalOpen(false);
+  function handleGroupNameChange(name: string) {
+    if (openGroupId) {
+      onGroupsChange(renameGroup(groups, openGroupId, name));
+      setIsGroupNameModalOpen(false);
+    }
   }
 
-  const group = groups.find((group) => group.id === openGroupId);
+  const group = groups.find((group: Group) => group.id === openGroupId);
 
   if (!openGroupId) {
     return null;
   }
 
+  const groupName = group && group.type === "group" && group.name;
+
   return (
     <>
       <Box
@@ -64,11 +77,13 @@ function TilesOverlay({ modalSize, children }) {
           top: 0,
         }}
         bg="overlay"
+        ref={containerRef}
       />
       <ReactResizeDetector
         handleWidth
         handleHeight
         onResize={handleContainerResize}
+        targetRef={containerRef}
       >
         <animated.div
           style={{
@@ -104,14 +119,14 @@ function TilesOverlay({ modalSize, children }) {
           >
             <Flex my={1} sx={{ position: "relative" }}>
               <Text as="p" my="2px">
-                {group?.name}
+                {groupName}
               </Text>
               <IconButton
                 sx={{
                   width: "24px",
                   height: "24px",
-                  position: group?.name ? "absolute" : "relative",
-                  left: group?.name ? "100%" : 0,
+                  position: groupName ? "absolute" : "relative",
+                  left: groupName ? "100%" : 0,
                 }}
                 title="Edit Group"
                 aria-label="Edit Group"
@@ -125,9 +140,9 @@ function TilesOverlay({ modalSize, children }) {
                 width: containerSize.width - 16,
                 height: containerSize.height - 48,
                 marginBottom: "8px",
-                backgroundColor: theme.colors.muted,
+                backgroundColor: theme.colors?.muted as string,
               }}
-              onClick={() => onGroupSelect()}
+              onClick={() => onClearSelection()}
             >
               <Grid
                 sx={{
@@ -179,7 +194,7 @@ function TilesOverlay({ modalSize, children }) {
       </ReactResizeDetector>
       <GroupNameModal
         isOpen={isGroupNameModalOpen}
-        name={group?.name}
+        name={groupName || ""}
         onSubmit={handleGroupNameChange}
         onRequestClose={() => setIsGroupNameModalOpen(false)}
       />
diff --git a/src/components/token/SelectTokensButton.js b/src/components/token/SelectTokensButton.tsx
similarity index 72%
rename from src/components/token/SelectTokensButton.js
rename to src/components/token/SelectTokensButton.tsx
index 398aef7..35961a2 100644
--- a/src/components/token/SelectTokensButton.js
+++ b/src/components/token/SelectTokensButton.tsx
@@ -1,11 +1,18 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { IconButton } from "theme-ui";
 
 import SelectTokensIcon from "../../icons/SelectTokensIcon";
 
 import SelectTokensModal from "../../modals/SelectTokensModal";
+import { TokensStateCreateHandler } from "../../types/Events";
 
-function SelectTokensButton({ onMapTokensStateCreate }) {
+type SelectTokensButtonProps = {
+  onMapTokensStateCreate: TokensStateCreateHandler;
+};
+
+function SelectTokensButton({
+  onMapTokensStateCreate,
+}: SelectTokensButtonProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   function openModal() {
     setIsModalOpen(true);
@@ -14,9 +21,6 @@ function SelectTokensButton({ onMapTokensStateCreate }) {
     setIsModalOpen(false);
   }
 
-  function handleDone() {
-    closeModal();
-  }
   return (
     <>
       <IconButton
@@ -29,7 +33,6 @@ function SelectTokensButton({ onMapTokensStateCreate }) {
       <SelectTokensModal
         isOpen={isModalOpen}
         onRequestClose={closeModal}
-        onDone={handleDone}
         onMapTokensStateCreate={onMapTokensStateCreate}
       />
     </>
diff --git a/src/components/token/TokenBar.js b/src/components/token/TokenBar.tsx
similarity index 85%
rename from src/components/token/TokenBar.js
rename to src/components/token/TokenBar.tsx
index 83947a7..bb8f2c0 100644
--- a/src/components/token/TokenBar.js
+++ b/src/components/token/TokenBar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { createPortal } from "react-dom";
 import { Box, Flex, Grid } from "theme-ui";
 import SimpleBar from "simplebar-react";
@@ -9,6 +9,7 @@ import {
   KeyboardSensor,
   useSensor,
   useSensors,
+  DragStartEvent,
 } from "@dnd-kit/core";
 
 import TokenBarToken from "./TokenBarToken";
@@ -23,7 +24,7 @@ import usePreventSelect from "../../hooks/usePreventSelect";
 import { useTokenData } from "../../contexts/TokenDataContext";
 import { useUserId } from "../../contexts/UserIdContext";
 import { useMapStage } from "../../contexts/MapStageContext";
-import DragContext from "../../contexts/DragContext";
+import DragContext, { CustomDragEndEvent } from "../../contexts/DragContext";
 
 import {
   createTokenState,
@@ -31,13 +32,19 @@ import {
 } from "../../helpers/token";
 import { findGroup } from "../../helpers/group";
 import Vector2 from "../../helpers/Vector2";
+import { TokensStateCreateHandler } from "../../types/Events";
+import { Group } from "../../types/Group";
 
-function TokenBar({ onMapTokensStateCreate }) {
+type TokenBarProps = {
+  onMapTokensStateCreate: TokensStateCreateHandler;
+};
+
+function TokenBar({ onMapTokensStateCreate }: TokenBarProps) {
   const userId = useUserId();
   const { tokensById, tokenGroups } = useTokenData();
-  const [fullScreen] = useSetting("map.fullScreen");
+  const [fullScreen] = useSetting<boolean>("map.fullScreen");
 
-  const [dragId, setDragId] = useState();
+  const [dragId, setDragId] = useState<string | null>(null);
 
   const mapStageRef = useMapStage();
 
@@ -52,14 +59,20 @@ function TokenBar({ onMapTokensStateCreate }) {
 
   const [preventSelect, resumeSelect] = usePreventSelect();
 
-  function handleDragStart({ active }) {
+  function handleDragStart({ active }: DragStartEvent) {
     setDragId(active.id);
     preventSelect();
   }
 
-  function handleDragEnd({ active, overlayNodeClientRect }) {
+  function handleDragEnd({
+    active,
+    overlayNodeClientRect,
+  }: CustomDragEndEvent) {
     setDragId(null);
-
+    resumeSelect();
+    if (!userId) {
+      return;
+    }
     const mapStage = mapStageRef.current;
     if (mapStage && overlayNodeClientRect) {
       const dragRect = overlayNodeClientRect;
@@ -96,8 +109,6 @@ function TokenBar({ onMapTokensStateCreate }) {
         }
       }
     }
-
-    resumeSelect();
   }
 
   function handleDragCancel() {
@@ -105,7 +116,7 @@ function TokenBar({ onMapTokensStateCreate }) {
     resumeSelect();
   }
 
-  function renderToken(group, draggable = true) {
+  function renderToken(group: Group, draggable = true) {
     if (group.type === "item") {
       const token = tokensById[group.id];
       if (token && !token.hideInSidebar) {
@@ -140,6 +151,8 @@ function TokenBar({ onMapTokensStateCreate }) {
     }
   }
 
+  const dragGroup = dragId && findGroup(tokenGroups, dragId);
+
   return (
     <DragContext
       onDragStart={handleDragStart}
@@ -188,7 +201,7 @@ function TokenBar({ onMapTokensStateCreate }) {
         </Flex>
         {createPortal(
           <DragOverlay dropAnimation={null}>
-            {dragId && renderToken(findGroup(tokenGroups, dragId), false)}
+            {dragGroup && renderToken(dragGroup, false)}
           </DragOverlay>,
           document.body
         )}
diff --git a/src/components/token/TokenBarToken.js b/src/components/token/TokenBarToken.tsx
similarity index 82%
rename from src/components/token/TokenBarToken.js
rename to src/components/token/TokenBarToken.tsx
index cd89691..5c96fd8 100644
--- a/src/components/token/TokenBarToken.js
+++ b/src/components/token/TokenBarToken.tsx
@@ -1,10 +1,15 @@
-import React from "react";
 import { Box } from "theme-ui";
 import { useInView } from "react-intersection-observer";
 
 import TokenImage from "./TokenImage";
 
-function TokenBarToken({ token }) {
+import { Token } from "../../types/Token";
+
+type TokenBarTokenProps = {
+  token: Token;
+};
+
+function TokenBarToken({ token }: TokenBarTokenProps) {
   const [ref, inView] = useInView({ triggerOnce: true });
 
   return (
diff --git a/src/components/token/TokenBarTokenGroup.js b/src/components/token/TokenBarTokenGroup.tsx
similarity index 84%
rename from src/components/token/TokenBarTokenGroup.js
rename to src/components/token/TokenBarTokenGroup.tsx
index 7b36d60..19c770a 100644
--- a/src/components/token/TokenBarTokenGroup.js
+++ b/src/components/token/TokenBarTokenGroup.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import { useState, useRef } from "react";
 import { Grid, Flex, Box } from "theme-ui";
 import { useSpring, animated } from "react-spring";
 import { useDraggable } from "@dnd-kit/core";
@@ -11,10 +11,22 @@ import Draggable from "../drag/Draggable";
 import Vector2 from "../../helpers/Vector2";
 
 import GroupIcon from "../../icons/GroupIcon";
+import { GroupContainer } from "../../types/Group";
+import { Token } from "../../types/Token";
 
-function TokenBarTokenGroup({ group, tokens, draggable }) {
+type TokenBarTokenGroupProps = {
+  group: GroupContainer;
+  tokens: Token[];
+  draggable: boolean;
+};
+
+function TokenBarTokenGroup({
+  group,
+  tokens,
+  draggable,
+}: TokenBarTokenGroupProps) {
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-    id: draggable && group.id,
+    id: draggable ? group.id : "",
     disabled: !draggable,
   });
   const [isOpen, setIsOpen] = useState(false);
@@ -23,7 +35,7 @@ function TokenBarTokenGroup({ group, tokens, draggable }) {
     height: isOpen ? (tokens.length + 1) * 56 : 56,
   });
 
-  function renderToken(token) {
+  function renderToken(token: Token) {
     if (draggable) {
       return (
         <Draggable id={token.id} key={token.id}>
@@ -77,7 +89,6 @@ function TokenBarTokenGroup({ group, tokens, draggable }) {
             gridTemplateRows: "1fr 1fr",
           }}
           p="2px"
-          alt={group.name}
           title={group.name}
           {...listeners}
           {...attributes}
@@ -100,10 +111,13 @@ function TokenBarTokenGroup({ group, tokens, draggable }) {
 
   // Reject the opening of a group if the pointer has moved
   const clickDownPositionRef = useRef(new Vector2(0, 0));
-  function handleOpenDown(event) {
+  function handleOpenDown(event: React.PointerEvent<HTMLDivElement>) {
     clickDownPositionRef.current = new Vector2(event.clientX, event.clientY);
   }
-  function handleOpenClick(event, newOpen) {
+  function handleOpenClick(
+    event: React.MouseEvent<HTMLDivElement>,
+    newOpen: boolean
+  ) {
     const clickPosition = new Vector2(event.clientX, event.clientY);
     const distance = Vector2.distance(
       clickPosition,
diff --git a/src/components/token/TokenDragOverlay.js b/src/components/token/TokenDragOverlay.js
deleted file mode 100644
index f484a0c..0000000
--- a/src/components/token/TokenDragOverlay.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-
-import { useUserId } from "../../contexts/UserIdContext";
-import {
-  useMapWidth,
-  useMapHeight,
-} from "../../contexts/MapInteractionContext";
-
-import DragOverlay from "../map/DragOverlay";
-
-function TokenDragOverlay({
-  onTokenStateRemove,
-  onTokenStateChange,
-  token,
-  tokenState,
-  tokenGroup,
-  dragging,
-}) {
-  const userId = useUserId();
-
-  const mapWidth = useMapWidth();
-  const mapHeight = useMapHeight();
-
-  function handleTokenRemove() {
-    // Handle other tokens when a vehicle gets deleted
-    if (token && token.category === "vehicle") {
-      const layer = tokenGroup.getLayer();
-      const mountedTokens = tokenGroup.find(".token");
-      for (let mountedToken of mountedTokens) {
-        // Save and restore token position after moving layer
-        const position = mountedToken.absolutePosition();
-        mountedToken.moveTo(layer);
-        mountedToken.absolutePosition(position);
-        onTokenStateChange({
-          [mountedToken.id()]: {
-            x: mountedToken.x() / mapWidth,
-            y: mountedToken.y() / mapHeight,
-            lastModifiedBy: userId,
-            lastModified: Date.now(),
-          },
-        });
-      }
-    }
-    onTokenStateRemove(tokenState);
-  }
-
-  return (
-    <DragOverlay
-      dragging={dragging}
-      onRemove={handleTokenRemove}
-      node={tokenGroup}
-    />
-  );
-}
-
-export default TokenDragOverlay;
diff --git a/src/components/token/TokenDragOverlay.tsx b/src/components/token/TokenDragOverlay.tsx
new file mode 100644
index 0000000..b99542b
--- /dev/null
+++ b/src/components/token/TokenDragOverlay.tsx
@@ -0,0 +1,29 @@
+import DragOverlay from "../map/DragOverlay";
+import { TokenStateRemoveHandler } from "../../types/Events";
+import { TokenDraggingOptions } from "../../types/Token";
+
+type TokenDragOverlayProps = {
+  onTokenStateRemove: TokenStateRemoveHandler;
+  draggingOptions: TokenDraggingOptions;
+};
+
+function TokenDragOverlay({
+  onTokenStateRemove,
+  draggingOptions,
+}: TokenDragOverlayProps) {
+  function handleTokenRemove() {
+    onTokenStateRemove([
+      draggingOptions.tokenStateId,
+      ...draggingOptions.attachedTokenStateIds,
+    ]);
+  }
+
+  return (
+    <DragOverlay
+      dragging={draggingOptions.dragging}
+      onRemove={handleTokenRemove}
+    />
+  );
+}
+
+export default TokenDragOverlay;
diff --git a/src/components/token/TokenEditBar.js b/src/components/token/TokenEditBar.tsx
similarity index 89%
rename from src/components/token/TokenEditBar.js
rename to src/components/token/TokenEditBar.tsx
index 273d733..be4e656 100644
--- a/src/components/token/TokenEditBar.js
+++ b/src/components/token/TokenEditBar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Flex, Close, IconButton } from "theme-ui";
 
 import { groupsFromIds, itemsFromGroups } from "../../helpers/group";
@@ -15,10 +15,15 @@ import { useKeyboard } from "../../contexts/KeyboardContext";
 
 import shortcuts from "../../shortcuts";
 
-function TokenEditBar({ disabled, onLoad }) {
+type TokenEditBarProps = {
+  disabled: boolean;
+  onLoad: (load: boolean) => void;
+};
+
+function TokenEditBar({ disabled, onLoad }: TokenEditBarProps) {
   const { tokens, removeTokens, updateTokensHidden } = useTokenData();
 
-  const { activeGroups, selectedGroupIds, onGroupSelect } = useGroup();
+  const { activeGroups, selectedGroupIds, onClearSelection } = useGroup();
 
   const [allTokensVisible, setAllTokensVisisble] = useState(false);
 
@@ -40,12 +45,12 @@ function TokenEditBar({ disabled, onLoad }) {
     setIsTokensRemoveModalOpen(false);
     const selectedTokens = getSelectedTokens();
     const selectedTokenIds = selectedTokens.map((token) => token.id);
-    onGroupSelect();
+    onClearSelection();
     await removeTokens(selectedTokenIds);
     onLoad(false);
   }
 
-  async function handleTokensHide(hideInSidebar) {
+  async function handleTokensHide(hideInSidebar: boolean) {
     const selectedTokens = getSelectedTokens();
     const selectedTokenIds = selectedTokens.map((token) => token.id);
     // Show loading indicator if hiding more than 10 tokens
@@ -61,7 +66,7 @@ function TokenEditBar({ disabled, onLoad }) {
   /**
    * Shortcuts
    */
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEvent) {
     if (disabled) {
       return;
     }
@@ -101,7 +106,7 @@ function TokenEditBar({ disabled, onLoad }) {
       <Close
         title="Clear Selection"
         aria-label="Clear Selection"
-        onClick={() => onGroupSelect()}
+        onClick={() => onClearSelection()}
       />
       <Flex>
         <IconButton
diff --git a/src/components/token/TokenHiddenBadge.js b/src/components/token/TokenHiddenBadge.tsx
similarity index 76%
rename from src/components/token/TokenHiddenBadge.js
rename to src/components/token/TokenHiddenBadge.tsx
index a7d633f..1a0003e 100644
--- a/src/components/token/TokenHiddenBadge.js
+++ b/src/components/token/TokenHiddenBadge.tsx
@@ -1,10 +1,13 @@
-import React from "react";
 import { Flex } from "theme-ui";
 
 import TokenShowIcon from "../../icons/TokenShowIcon";
 import TokenHideIcon from "../../icons/TokenHideIcon";
 
-function TokenHiddenBadge({ hidden }) {
+type TokenHiddenBadgeProps = {
+  hidden: boolean;
+};
+
+function TokenHiddenBadge({ hidden }: TokenHiddenBadgeProps) {
   return (
     <Flex
       sx={{
diff --git a/src/components/token/TokenImage.js b/src/components/token/TokenImage.tsx
similarity index 74%
rename from src/components/token/TokenImage.js
rename to src/components/token/TokenImage.tsx
index 44c2a77..02de716 100644
--- a/src/components/token/TokenImage.js
+++ b/src/components/token/TokenImage.tsx
@@ -1,13 +1,18 @@
-import React, { useState } from "react";
-import { Image, Box } from "theme-ui";
+import { useState } from "react";
+import { Image, Box, ImageProps } from "theme-ui";
 
 import { useDataURL } from "../../contexts/AssetsContext";
 
 import { tokenSources as defaultTokenSources } from "../../tokens";
+import { Token } from "../../types/Token";
 
-import { TokenOutlineSVG } from "./TokenOutline";
+import TokenOutlineSVG from "./TokenOutline";
 
-const TokenImage = React.forwardRef(({ token, ...props }, ref) => {
+type TokenImageProps = {
+  token: Token;
+} & ImageProps;
+
+function TokenImage({ token, ...props }: TokenImageProps) {
   const tokenURL = useDataURL(
     token,
     defaultTokenSources,
@@ -35,12 +40,11 @@ const TokenImage = React.forwardRef(({ token, ...props }, ref) => {
       <Image
         onLoad={() => setShowOutline(false)}
         src={tokenURL}
-        ref={ref}
         style={showOutline ? { display: "none" } : props.style}
         {...props}
       />
     </>
   );
-});
+}
 
 export default TokenImage;
diff --git a/src/components/token/TokenMenu.js b/src/components/token/TokenMenu.js
deleted file mode 100644
index 03ce419..0000000
--- a/src/components/token/TokenMenu.js
+++ /dev/null
@@ -1,267 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Box, Input, Flex, Text, IconButton } from "theme-ui";
-
-import Slider from "../Slider";
-
-import MapMenu from "../map/MapMenu";
-
-import colors, { colorOptions } from "../../helpers/colors";
-
-import usePrevious from "../../hooks/usePrevious";
-
-import LockIcon from "../../icons/TokenLockIcon";
-import UnlockIcon from "../../icons/TokenUnlockIcon";
-import ShowIcon from "../../icons/TokenShowIcon";
-import HideIcon from "../../icons/TokenHideIcon";
-
-import { useUserId } from "../../contexts/UserIdContext";
-
-const defaultTokenMaxSize = 6;
-function TokenMenu({
-  isOpen,
-  onRequestClose,
-  tokenState,
-  tokenImage,
-  onTokenStateChange,
-  map,
-}) {
-  const userId = useUserId();
-
-  const wasOpen = usePrevious(isOpen);
-
-  const [tokenMaxSize, setTokenMaxSize] = useState(defaultTokenMaxSize);
-  const [menuLeft, setMenuLeft] = useState(0);
-  const [menuTop, setMenuTop] = useState(0);
-  useEffect(() => {
-    if (isOpen && !wasOpen && tokenState) {
-      setTokenMaxSize(Math.max(tokenState.size, defaultTokenMaxSize));
-      // Update menu position
-      if (tokenImage) {
-        const imageRect = tokenImage.getClientRect();
-        const mapElement = document.querySelector(".map");
-        const mapRect = mapElement.getBoundingClientRect();
-
-        // Center X for the menu which is 156px wide
-        setMenuLeft(mapRect.left + imageRect.x + imageRect.width / 2 - 156 / 2);
-        // Y 12px from the bottom
-        setMenuTop(mapRect.top + imageRect.y + imageRect.height + 12);
-      }
-    }
-  }, [isOpen, tokenState, wasOpen, tokenImage]);
-
-  function handleLabelChange(event) {
-    const label = event.target.value.substring(0, 48);
-    tokenState && onTokenStateChange({ [tokenState.id]: { label: label } });
-  }
-
-  function handleStatusChange(status) {
-    if (!tokenState) {
-      return;
-    }
-    const statuses = new Set(tokenState.statuses.filter((s) => s));
-    if (statuses.has(status)) {
-      statuses.delete(status);
-    } else {
-      statuses.add(status);
-    }
-    onTokenStateChange({
-      [tokenState.id]: { statuses: [...statuses] },
-    });
-  }
-
-  function handleSizeChange(event) {
-    const newSize = parseFloat(event.target.value);
-    tokenState && onTokenStateChange({ [tokenState.id]: { size: newSize } });
-  }
-
-  function handleRotationChange(event) {
-    const newRotation = parseInt(event.target.value);
-    tokenState &&
-      onTokenStateChange({
-        [tokenState.id]: { rotation: newRotation },
-      });
-  }
-
-  function handleVisibleChange() {
-    tokenState &&
-      onTokenStateChange({
-        [tokenState.id]: { visible: !tokenState.visible },
-      });
-  }
-
-  function handleLockChange() {
-    tokenState &&
-      onTokenStateChange({
-        [tokenState.id]: { locked: !tokenState.locked },
-      });
-  }
-
-  function handleModalContent(node) {
-    if (node) {
-      // Focus input
-      const tokenLabelInput = node.querySelector("#changeTokenLabel");
-      tokenLabelInput.focus();
-      tokenLabelInput.select();
-
-      // Ensure menu is in bounds
-      const nodeRect = node.getBoundingClientRect();
-      const mapElement = document.querySelector(".map");
-      const mapRect = mapElement.getBoundingClientRect();
-      setMenuLeft((prevLeft) =>
-        Math.min(
-          mapRect.right - nodeRect.width,
-          Math.max(mapRect.left, prevLeft)
-        )
-      );
-      setMenuTop((prevTop) =>
-        Math.min(mapRect.bottom - nodeRect.height, prevTop)
-      );
-    }
-  }
-
-  return (
-    <MapMenu
-      isOpen={isOpen}
-      onRequestClose={onRequestClose}
-      top={`${menuTop}px`}
-      left={`${menuLeft}px`}
-      onModalContent={handleModalContent}
-    >
-      <Box sx={{ width: "156px", overflow: "hidden" }} p={1}>
-        <Flex
-          as="form"
-          onSubmit={(e) => {
-            e.preventDefault();
-            onRequestClose();
-          }}
-          sx={{ alignItems: "center" }}
-        >
-          <Text
-            as="label"
-            variant="body2"
-            sx={{ width: "45%", fontSize: "16px" }}
-            p={1}
-          >
-            Label:
-          </Text>
-          <Input
-            id="changeTokenLabel"
-            onChange={handleLabelChange}
-            value={(tokenState && tokenState.label) || ""}
-            sx={{
-              padding: "4px",
-              border: "none",
-              ":focus": {
-                outline: "none",
-              },
-            }}
-            autoComplete="off"
-          />
-        </Flex>
-        <Box
-          sx={{
-            display: "flex",
-            flexWrap: "wrap",
-            justifyContent: "space-between",
-          }}
-        >
-          {colorOptions.map((color) => (
-            <Box
-              key={color}
-              sx={{
-                width: "16.66%",
-                paddingTop: "16.66%",
-                borderRadius: "50%",
-                transform: "scale(0.75)",
-                backgroundColor: colors[color],
-                cursor: "pointer",
-              }}
-              onClick={() => handleStatusChange(color)}
-              aria-label={`Token label Color ${color}`}
-            >
-              {tokenState &&
-                tokenState.statuses &&
-                tokenState.statuses.includes(color) && (
-                  <Box
-                    sx={{
-                      width: "100%",
-                      height: "100%",
-                      border: "2px solid white",
-                      position: "absolute",
-                      top: 0,
-                      borderRadius: "50%",
-                    }}
-                  />
-                )}
-            </Box>
-          ))}
-        </Box>
-        <Flex sx={{ alignItems: "center" }}>
-          <Text
-            as="label"
-            variant="body2"
-            sx={{ width: "40%", fontSize: "16px" }}
-            p={1}
-          >
-            Size:
-          </Text>
-          <Slider
-            value={(tokenState && tokenState.size) || 1}
-            onChange={handleSizeChange}
-            step={0.5}
-            min={0.5}
-            max={tokenMaxSize}
-            mr={1}
-          />
-        </Flex>
-        <Flex sx={{ alignItems: "center" }}>
-          <Text
-            as="label"
-            variant="body2"
-            sx={{ width: "65%", fontSize: "16px" }}
-            p={1}
-          >
-            Rotate:
-          </Text>
-          <Slider
-            value={(tokenState && tokenState.rotation) || 0}
-            onChange={handleRotationChange}
-            step={15}
-            min={0}
-            max={360}
-            mr={1}
-          />
-        </Flex>
-        {/* Only show hide and lock token actions to map owners */}
-        {map && map.owner === userId && (
-          <Flex sx={{ alignItems: "center", justifyContent: "space-around" }}>
-            <IconButton
-              onClick={handleVisibleChange}
-              title={
-                tokenState && tokenState.visible ? "Hide Token" : "Show Token"
-              }
-              aria-label={
-                tokenState && tokenState.visible ? "Hide Token" : "Show Token"
-              }
-            >
-              {tokenState && tokenState.visible ? <ShowIcon /> : <HideIcon />}
-            </IconButton>
-            <IconButton
-              onClick={handleLockChange}
-              title={
-                tokenState && tokenState.locked ? "Unlock Token" : "Lock Token"
-              }
-              aria-label={
-                tokenState && tokenState.locked ? "Unlock Token" : "Lock Token"
-              }
-            >
-              {tokenState && tokenState.locked ? <LockIcon /> : <UnlockIcon />}
-            </IconButton>
-          </Flex>
-        )}
-      </Box>
-    </MapMenu>
-  );
-}
-
-export default TokenMenu;
diff --git a/src/components/token/TokenMenu.tsx b/src/components/token/TokenMenu.tsx
new file mode 100644
index 0000000..dfa1f64
--- /dev/null
+++ b/src/components/token/TokenMenu.tsx
@@ -0,0 +1,285 @@
+import React, { useEffect, useState } from "react";
+import { Box, Input, Flex, Text, IconButton } from "theme-ui";
+import Konva from "konva";
+
+import MapMenu from "../map/MapMenu";
+
+import colors, { Color, colorOptions } from "../../helpers/colors";
+
+import usePrevious from "../../hooks/usePrevious";
+
+import LockIcon from "../../icons/TokenLockIcon";
+import UnlockIcon from "../../icons/TokenUnlockIcon";
+import ShowIcon from "../../icons/TokenShowIcon";
+import HideIcon from "../../icons/TokenHideIcon";
+import TokenCharacterIcon from "../../icons/TokenCharacterIcon";
+import TokenPropIcon from "../../icons/TokenPropIcon";
+import TokenMountIcon from "../../icons/TokenMountIcon";
+import TokenAttachmentIcon from "../../icons/TokenAttachmentIcon";
+
+import { useUserId } from "../../contexts/UserIdContext";
+
+import {
+  RequestCloseEventHandler,
+  TokenStateChangeEventHandler,
+} from "../../types/Events";
+import { TokenState } from "../../types/TokenState";
+import { Map } from "../../types/Map";
+import { TokenCategory } from "../../types/Token";
+
+const tokenCategories: Record<
+  TokenCategory,
+  { title: string; icon: React.ReactNode; next: TokenCategory }
+> = {
+  character: {
+    title: "Character",
+    icon: <TokenCharacterIcon />,
+    next: "prop",
+  },
+  prop: {
+    title: "Prop",
+    icon: <TokenPropIcon />,
+    next: "vehicle",
+  },
+  vehicle: {
+    title: "Mount",
+    icon: <TokenMountIcon />,
+    next: "attachment",
+  },
+  attachment: {
+    title: "Attachment",
+    icon: <TokenAttachmentIcon />,
+    next: "character",
+  },
+};
+
+type TokenMenuProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  tokenState?: TokenState;
+  tokenImage?: Konva.Node;
+  focus: boolean;
+  onTokenStateChange: TokenStateChangeEventHandler;
+  map: Map | null;
+};
+
+function TokenMenu({
+  isOpen,
+  onRequestClose,
+  tokenState,
+  tokenImage,
+  focus,
+  onTokenStateChange,
+  map,
+}: TokenMenuProps) {
+  const userId = useUserId();
+
+  const wasOpen = usePrevious(isOpen);
+
+  const [menuLeft, setMenuLeft] = useState(0);
+  const [menuTop, setMenuTop] = useState(0);
+  useEffect(() => {
+    if (isOpen && !wasOpen && tokenState) {
+      // Update menu position
+      if (tokenImage) {
+        const imageRect = tokenImage.getClientRect();
+        const mapElement = document.querySelector(".map");
+        if (mapElement) {
+          const mapRect = mapElement.getBoundingClientRect();
+          // Center X for the menu which is 156px wide
+          setMenuLeft(
+            mapRect.left + imageRect.x + imageRect.width / 2 - 156 / 2
+          );
+          // Y 20px from the bottom
+          setMenuTop(mapRect.top + imageRect.y + imageRect.height + 20);
+        }
+      }
+    }
+  }, [isOpen, tokenState, wasOpen, tokenImage]);
+
+  function handleLabelChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const label = event.target.value.substring(0, 48);
+    tokenState && onTokenStateChange({ [tokenState.id]: { label: label } });
+  }
+
+  function handleStatusChange(status: Color) {
+    if (!tokenState) {
+      return;
+    }
+    const statuses = new Set(tokenState.statuses.filter((s) => s));
+    if (statuses.has(status)) {
+      statuses.delete(status);
+    } else {
+      statuses.add(status);
+    }
+    onTokenStateChange({
+      [tokenState.id]: { statuses: [...statuses] },
+    });
+  }
+
+  function handleVisibleChange() {
+    tokenState &&
+      onTokenStateChange({
+        [tokenState.id]: { visible: !tokenState.visible },
+      });
+  }
+
+  function handleLockChange() {
+    tokenState &&
+      onTokenStateChange({
+        [tokenState.id]: { locked: !tokenState.locked },
+      });
+  }
+
+  function handleCategoryChange() {
+    tokenState &&
+      onTokenStateChange({
+        [tokenState.id]: {
+          category: tokenCategories[tokenState.category].next,
+        },
+      });
+  }
+
+  function handleModalContent(node: HTMLElement) {
+    if (node) {
+      // Focus input
+      const tokenLabelInput =
+        node.querySelector<HTMLInputElement>("#changeTokenLabel");
+      if (tokenLabelInput && focus) {
+        tokenLabelInput.focus();
+        tokenLabelInput.select();
+      }
+
+      // Ensure menu is in bounds
+      const nodeRect = node.getBoundingClientRect();
+      const mapElement = document.querySelector(".map");
+      if (mapElement) {
+        const mapRect = mapElement.getBoundingClientRect();
+        setMenuLeft((prevLeft) =>
+          Math.min(
+            mapRect.right - nodeRect.width,
+            Math.max(mapRect.left, prevLeft)
+          )
+        );
+        setMenuTop((prevTop) =>
+          Math.min(mapRect.bottom - nodeRect.height, prevTop)
+        );
+      }
+    }
+  }
+
+  return (
+    <MapMenu
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      top={`${menuTop}px`}
+      left={`${menuLeft}px`}
+      onModalContent={handleModalContent}
+    >
+      <Box sx={{ width: "156px", overflow: "hidden" }} p={1}>
+        <Flex
+          as="form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            onRequestClose();
+          }}
+          sx={{ alignItems: "center" }}
+        >
+          <Text
+            as="label"
+            variant="body2"
+            sx={{ width: "45%", fontSize: "16px" }}
+            p={1}
+          >
+            Label:
+          </Text>
+          <Input
+            id="changeTokenLabel"
+            onChange={handleLabelChange}
+            value={(tokenState && tokenState.label) || ""}
+            sx={{
+              padding: "4px",
+              border: "none",
+              ":focus": {
+                outline: "none",
+              },
+            }}
+            autoComplete="off"
+          />
+        </Flex>
+        <Box
+          sx={{
+            display: "flex",
+            flexWrap: "wrap",
+            justifyContent: "space-between",
+          }}
+        >
+          {colorOptions
+            .filter((color) => color !== "primary")
+            .map((color) => (
+              <Box
+                key={color}
+                sx={{
+                  width: "16.66%",
+                  paddingTop: "16.66%",
+                  borderRadius: "50%",
+                  transform: "scale(0.75)",
+                  backgroundColor: colors[color],
+                  cursor: "pointer",
+                }}
+                onClick={() => handleStatusChange(color)}
+                aria-label={`Token label Color ${color}`}
+              >
+                {tokenState &&
+                  tokenState.statuses &&
+                  tokenState.statuses.includes(color) && (
+                    <Box
+                      sx={{
+                        width: "100%",
+                        height: "100%",
+                        border: "2px solid white",
+                        position: "absolute",
+                        top: 0,
+                        borderRadius: "50%",
+                      }}
+                    />
+                  )}
+              </Box>
+            ))}
+        </Box>
+        {/* Only show hide and lock token actions to map owners */}
+        {map && map.owner === userId && tokenState && (
+          <Flex sx={{ alignItems: "center", justifyContent: "space-around" }}>
+            <IconButton
+              onClick={handleVisibleChange}
+              title={tokenState.visible ? "Hide Token" : "Show Token"}
+              aria-label={tokenState.visible ? "Hide Token" : "Show Token"}
+            >
+              {tokenState.visible ? <ShowIcon /> : <HideIcon />}
+            </IconButton>
+            <IconButton
+              onClick={handleLockChange}
+              title={tokenState.locked ? "Unlock Token" : "Lock Token"}
+              aria-label={tokenState.locked ? "Unlock Token" : "Lock Token"}
+            >
+              {tokenState.locked ? <LockIcon /> : <UnlockIcon />}
+            </IconButton>
+            <IconButton
+              onClick={handleCategoryChange}
+              title={tokenCategories[tokenState.category].title}
+              aria-label={tokenCategories[tokenState.category].title}
+            >
+              {tokenCategories[tokenState.category].icon}
+            </IconButton>
+          </Flex>
+        )}
+      </Box>
+    </MapMenu>
+  );
+}
+
+TokenMenu.defaultProps = {
+  focus: false,
+};
+
+export default TokenMenu;
diff --git a/src/components/token/TokenOutline.js b/src/components/token/TokenOutline.tsx
similarity index 58%
rename from src/components/token/TokenOutline.js
rename to src/components/token/TokenOutline.tsx
index 20d4396..541d3da 100644
--- a/src/components/token/TokenOutline.js
+++ b/src/components/token/TokenOutline.tsx
@@ -1,9 +1,16 @@
-import React from "react";
-import { Rect, Circle, Line } from "react-konva";
+import { Outline } from "../../types/Outline";
 
-import colors from "../../helpers/colors";
+type TokenOutlineSVGProps = {
+  outline: Outline;
+  width: number;
+  height: number;
+};
 
-export function TokenOutlineSVG({ outline, width, height }) {
+export function TokenOutlineSVG({
+  outline,
+  width,
+  height,
+}: TokenOutlineSVGProps) {
   if (outline.type === "rect") {
     return (
       <svg
@@ -55,40 +62,4 @@ export function TokenOutlineSVG({ outline, width, height }) {
   }
 }
 
-function TokenOutline({ outline, hidden }) {
-  const sharedProps = {
-    fill: colors.black,
-    opacity: hidden ? 0 : 0.8,
-  };
-  if (outline.type === "rect") {
-    return (
-      <Rect
-        width={outline.width}
-        height={outline.height}
-        x={outline.x}
-        y={outline.y}
-        {...sharedProps}
-      />
-    );
-  } else if (outline.type === "circle") {
-    return (
-      <Circle
-        radius={outline.radius}
-        x={outline.x}
-        y={outline.y}
-        {...sharedProps}
-      />
-    );
-  } else {
-    return (
-      <Line
-        points={outline.points}
-        closed
-        tension={outline.points < 200 ? 0 : 0.33}
-        {...sharedProps}
-      />
-    );
-  }
-}
-
-export default TokenOutline;
+export default TokenOutlineSVG;
diff --git a/src/components/token/TokenPreview.js b/src/components/token/TokenPreview.tsx
similarity index 55%
rename from src/components/token/TokenPreview.js
rename to src/components/token/TokenPreview.tsx
index 4ceab47..56b63b9 100644
--- a/src/components/token/TokenPreview.js
+++ b/src/components/token/TokenPreview.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef } from "react";
 import { Box, IconButton } from "theme-ui";
 import { Stage, Layer, Image, Rect, Group } from "react-konva";
 import ReactResizeDetector from "react-resize-detector";
 import useImage from "use-image";
+import Konva from "konva";
 
 import usePreventOverscroll from "../../hooks/usePreventOverscroll";
 import useStageInteraction from "../../hooks/useStageInteraction";
@@ -17,33 +18,36 @@ import GridOffIcon from "../../icons/GridOffIcon";
 
 import { tokenSources } from "../../tokens";
 
-import Grid from "../Grid";
+import Grid from "../konva/Grid";
+import { Token } from "../../types/Token";
+import SettingsContext, { useSettings } from "../../contexts/SettingsContext";
 
-function TokenPreview({ token }) {
-  const [tokenSourceData, setTokenSourceData] = useState({});
-  useEffect(() => {
-    if (token.id !== tokenSourceData.id) {
-      setTokenSourceData(token);
-    }
-  }, [token, tokenSourceData]);
+type TokenPreviewProps = {
+  token: Token;
+};
 
-  const tokenURL = useDataURL(tokenSourceData, tokenSources);
-  const [tokenSourceImage] = useImage(tokenURL);
+function TokenPreview({ token }: TokenPreviewProps) {
+  const settings = useSettings();
+
+  const tokenURL = useDataURL(token, tokenSources);
+  const [tokenSourceImage] = useImage(tokenURL || "");
 
   const [stageWidth, setStageWidth] = useState(1);
   const [stageHeight, setStageHeight] = useState(1);
   const [stageScale, setStageScale] = useState(1);
 
   const stageTranslateRef = useRef({ x: 0, y: 0 });
-  const tokenStageRef = useRef();
-  const tokenLayerRef = useRef();
+  const tokenStageRef = useRef<Konva.Stage>(null);
+  const tokenLayerRef = useRef<Konva.Layer>(null);
 
-  function handleResize(width, height) {
-    setStageWidth(width);
-    setStageHeight(height);
+  function handleResize(width?: number, height?: number) {
+    if (width && height) {
+      setStageWidth(width);
+      setStageHeight(height);
+    }
   }
 
-  const containerRef = useRef();
+  const containerRef = useRef<HTMLDivElement>(null);
   usePreventOverscroll(containerRef);
 
   const [tokenWidth, tokenHeight] = useImageCenter(
@@ -59,11 +63,11 @@ function TokenPreview({ token }) {
   );
 
   useStageInteraction(
-    tokenStageRef.current,
+    tokenStageRef,
     stageScale,
     setStageScale,
     stageTranslateRef,
-    tokenLayerRef.current
+    tokenLayerRef
   );
 
   const [showGridPreview, setShowGridPreview] = useState(true);
@@ -92,45 +96,53 @@ function TokenPreview({ token }) {
       bg="muted"
       ref={containerRef}
     >
-      <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+      <ReactResizeDetector
+        handleWidth
+        handleHeight
+        onResize={handleResize}
+        targetRef={containerRef}
+      >
         <Stage
           width={stageWidth}
           height={stageHeight}
           scale={{ x: stageScale, y: stageScale }}
           ref={tokenStageRef}
         >
-          <Layer ref={tokenLayerRef}>
-            <Image
-              image={tokenSourceImage}
-              width={tokenWidth}
-              height={tokenHeight}
-            />
-            {showGridPreview && (
-              <Group offsetY={gridHeight - tokenHeight}>
-                <GridProvider
-                  grid={{
-                    size: { x: gridX, y: gridY },
-                    inset: {
-                      topLeft: { x: 0, y: 0 },
-                      bottomRight: { x: 1, y: 1 },
-                    },
-                    type: "square",
-                  }}
-                  width={gridWidth}
-                  height={gridHeight}
-                >
-                  <Grid />
-                </GridProvider>
-                <Rect
-                  width={gridWidth}
-                  height={gridHeight}
-                  fill="transparent"
-                  stroke="rgba(255, 255, 255, 0.75)"
-                  strokeWidth={borderWidth}
-                />
-              </Group>
-            )}
-          </Layer>
+          <SettingsContext.Provider value={settings}>
+            <Layer ref={tokenLayerRef}>
+              <Image
+                image={tokenSourceImage}
+                width={tokenWidth}
+                height={tokenHeight}
+              />
+              {showGridPreview && (
+                <Group offsetY={gridHeight - tokenHeight}>
+                  <GridProvider
+                    grid={{
+                      size: { x: gridX, y: gridY },
+                      inset: {
+                        topLeft: { x: 0, y: 0 },
+                        bottomRight: { x: 1, y: 1 },
+                      },
+                      type: "square",
+                      measurement: { type: "chebyshev", scale: "5ft" },
+                    }}
+                    width={gridWidth}
+                    height={gridHeight}
+                  >
+                    <Grid />
+                  </GridProvider>
+                  <Rect
+                    width={gridWidth}
+                    height={gridHeight}
+                    fill="transparent"
+                    stroke="rgba(255, 255, 255, 0.75)"
+                    strokeWidth={borderWidth}
+                  />
+                </Group>
+              )}
+            </Layer>
+          </SettingsContext.Provider>
         </Stage>
       </ReactResizeDetector>
       <IconButton
diff --git a/src/components/token/TokenSettings.js b/src/components/token/TokenSettings.tsx
similarity index 59%
rename from src/components/token/TokenSettings.js
rename to src/components/token/TokenSettings.tsx
index 47e20df..d3ec4cf 100644
--- a/src/components/token/TokenSettings.js
+++ b/src/components/token/TokenSettings.tsx
@@ -1,17 +1,26 @@
-import React from "react";
 import { Flex, Box, Input, Label } from "theme-ui";
 
 import { isEmpty } from "../../helpers/shared";
 
 import Select from "../Select";
 
-const categorySettings = [
+import { Token, TokenCategory } from "../../types/Token";
+import { TokenSettingsChangeEventHandler } from "../../types/Events";
+
+type CategorySetting = { value: TokenCategory; label: string };
+const categorySettings: CategorySetting[] = [
   { value: "character", label: "Character" },
   { value: "prop", label: "Prop" },
-  { value: "vehicle", label: "Vehicle / Mount" },
+  { value: "vehicle", label: "Mount" },
+  { value: "attachment", label: "Attachment" },
 ];
 
-function TokenSettings({ token, onSettingsChange }) {
+type TokenSettingsProps = {
+  token: Token;
+  onSettingsChange: TokenSettingsChangeEventHandler;
+};
+
+function TokenSettings({ token, onSettingsChange }: TokenSettingsProps) {
   const tokenEmpty = !token || isEmpty(token);
   return (
     <Flex sx={{ flexDirection: "column" }}>
@@ -20,7 +29,7 @@ function TokenSettings({ token, onSettingsChange }) {
         <Input
           name="name"
           value={(token && token.name) || ""}
-          onChange={(e) => onSettingsChange("name", e.target.value)}
+          onChange={(e) => onSettingsChange({ name: e.target.value })}
           disabled={tokenEmpty}
           my={1}
         />
@@ -30,12 +39,14 @@ function TokenSettings({ token, onSettingsChange }) {
         <Select
           options={categorySettings}
           value={
-            !tokenEmpty &&
-            categorySettings.find((s) => s.value === token.defaultCategory)
+            tokenEmpty
+              ? undefined
+              : categorySettings.find((s) => s.value === token.defaultCategory)
           }
           isDisabled={tokenEmpty}
-          onChange={(option) =>
-            onSettingsChange("defaultCategory", option.value)
+          onChange={
+            ((option: CategorySetting) =>
+              onSettingsChange({ defaultCategory: option.value })) as any
           }
           isSearchable={false}
         />
@@ -47,7 +58,7 @@ function TokenSettings({ token, onSettingsChange }) {
           name="tokenSize"
           value={`${(token && token.defaultSize) || 0}`}
           onChange={(e) =>
-            onSettingsChange("defaultSize", parseFloat(e.target.value))
+            onSettingsChange({ defaultSize: parseFloat(e.target.value) })
           }
           disabled={tokenEmpty}
           min={1}
@@ -59,7 +70,7 @@ function TokenSettings({ token, onSettingsChange }) {
         <Input
           name="label"
           value={(token && token.defaultLabel) || ""}
-          onChange={(e) => onSettingsChange("defaultLabel", e.target.value)}
+          onChange={(e) => onSettingsChange({ defaultLabel: e.target.value })}
           disabled={tokenEmpty}
           my={1}
         />
diff --git a/src/components/token/TokenTile.js b/src/components/token/TokenTile.tsx
similarity index 66%
rename from src/components/token/TokenTile.js
rename to src/components/token/TokenTile.tsx
index 1146b24..891412c 100644
--- a/src/components/token/TokenTile.js
+++ b/src/components/token/TokenTile.tsx
@@ -1,8 +1,18 @@
 import React from "react";
+import { Token } from "../../types/Token";
 
 import Tile from "../tile/Tile";
 import TokenImage from "./TokenImage";
 
+type TokenTileProps = {
+  token: Token;
+  isSelected: boolean;
+  onSelect: (tokenId: string) => void;
+  onTokenEdit: (tokenId: string) => void;
+  canEdit: boolean;
+  badges: React.ReactChild[];
+};
+
 function TokenTile({
   token,
   isSelected,
@@ -10,7 +20,7 @@ function TokenTile({
   onTokenEdit,
   canEdit,
   badges,
-}) {
+}: TokenTileProps) {
   return (
     <Tile
       title={token.name}
diff --git a/src/components/token/TokenTileGroup.js b/src/components/token/TokenTileGroup.tsx
similarity index 78%
rename from src/components/token/TokenTileGroup.js
rename to src/components/token/TokenTileGroup.tsx
index 7390d43..3cbf876 100644
--- a/src/components/token/TokenTileGroup.js
+++ b/src/components/token/TokenTileGroup.tsx
@@ -1,10 +1,19 @@
-import React from "react";
 import { Grid } from "theme-ui";
 
 import Tile from "../tile/Tile";
 import TokenImage from "./TokenImage";
 
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
+import { GroupContainer } from "../../types/Group";
+import { Token } from "../../types/Token";
+
+type TokenTileProps = {
+  group: GroupContainer;
+  tokens: Token[];
+  isSelected: boolean;
+  onSelect: (tokenId: string) => void;
+  onDoubleClick: () => void;
+};
 
 function TokenTileGroup({
   group,
@@ -12,7 +21,7 @@ function TokenTileGroup({
   isSelected,
   onSelect,
   onDoubleClick,
-}) {
+}: TokenTileProps) {
   const layout = useResponsiveLayout();
 
   return (
diff --git a/src/components/token/TokenTiles.js b/src/components/token/TokenTiles.tsx
similarity index 79%
rename from src/components/token/TokenTiles.js
rename to src/components/token/TokenTiles.tsx
index 55b5948..c92bcdc 100644
--- a/src/components/token/TokenTiles.js
+++ b/src/components/token/TokenTiles.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import TokenTile from "./TokenTile";
 import TokenTileGroup from "./TokenTileGroup";
 import TokenHiddenBadge from "./TokenHiddenBadge";
@@ -10,16 +8,20 @@ import SortableTilesDragOverlay from "../tile/SortableTilesDragOverlay";
 import { getGroupItems } from "../../helpers/group";
 
 import { useGroup } from "../../contexts/GroupContext";
+import { Token } from "../../types/Token";
+import { Group } from "../../types/Group";
 
-function TokenTiles({ tokensById, onTokenEdit, subgroup }) {
-  const {
-    selectedGroupIds,
-    selectMode,
-    onGroupOpen,
-    onGroupSelect,
-  } = useGroup();
+type TokenTilesProps = {
+  tokensById: Record<string, Token>;
+  onTokenEdit: (tokenId: string) => void;
+  subgroup: boolean;
+};
 
-  function renderTile(group) {
+function TokenTiles({ tokensById, onTokenEdit, subgroup }: TokenTilesProps) {
+  const { selectedGroupIds, selectMode, onGroupOpen, onGroupSelect } =
+    useGroup();
+
+  function renderTile(group: Group) {
     if (group.type === "item") {
       const token = tokensById[group.id];
       if (token) {
@@ -70,4 +72,8 @@ function TokenTiles({ tokensById, onTokenEdit, subgroup }) {
   );
 }
 
+TokenTiles.defaultProps = {
+  subgroup: false,
+};
+
 export default TokenTiles;
diff --git a/src/components/tools/DrawingTool.tsx b/src/components/tools/DrawingTool.tsx
new file mode 100644
index 0000000..f155da4
--- /dev/null
+++ b/src/components/tools/DrawingTool.tsx
@@ -0,0 +1,263 @@
+import { useState, useEffect } from "react";
+import shortid from "shortid";
+import { Group } from "react-konva";
+
+import {
+  useDebouncedStageScale,
+  useMapWidth,
+  useMapHeight,
+  useInteractionEmitter,
+} from "../../contexts/MapInteractionContext";
+import { useMapStage } from "../../contexts/MapStageContext";
+import {
+  useGridCellNormalizedSize,
+  useGridStrokeWidth,
+} from "../../contexts/GridContext";
+
+import Vector2 from "../../helpers/Vector2";
+import {
+  getDefaultShapeData,
+  getUpdatedShapeData,
+  simplifyPoints,
+} from "../../helpers/drawing";
+import { getRelativePointerPosition } from "../../helpers/konva";
+
+import useGridSnapping from "../../hooks/useGridSnapping";
+
+import DrawingShape from "../konva/Drawing";
+
+import { Map } from "../../types/Map";
+import {
+  Drawing,
+  DrawingToolSettings,
+  drawingToolIsShape,
+  Shape,
+} from "../../types/Drawing";
+
+export type DrawingAddEventHanlder = (drawing: Drawing) => void;
+export type DrawingsRemoveEventHandler = (drawingIds: string[]) => void;
+
+type MapDrawingProps = {
+  map: Map | null;
+  drawings: Drawing[];
+  onDrawingAdd: DrawingAddEventHanlder;
+  onDrawingsRemove: DrawingsRemoveEventHandler;
+  active: boolean;
+  toolSettings: DrawingToolSettings;
+};
+
+function DrawingTool({
+  map,
+  drawings,
+  onDrawingAdd: onShapeAdd,
+  onDrawingsRemove: onShapesRemove,
+  active,
+  toolSettings,
+}: MapDrawingProps) {
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const interactionEmitter = useInteractionEmitter();
+
+  const gridCellNormalizedSize = useGridCellNormalizedSize();
+  const gridStrokeWidth = useGridStrokeWidth();
+
+  const mapStageRef = useMapStage();
+  const [drawing, setDrawing] = useState<Drawing | null>(null);
+  const [isBrushDown, setIsBrushDown] = useState(false);
+  const [erasingDrawings, setErasingDrawings] = useState<Drawing[]>([]);
+
+  const shouldHover = toolSettings.type === "erase" && active;
+
+  const isBrush =
+    toolSettings.type === "brush" || toolSettings.type === "paint";
+  const isShape =
+    toolSettings.type === "line" ||
+    toolSettings.type === "rectangle" ||
+    toolSettings.type === "circle" ||
+    toolSettings.type === "triangle";
+
+  const snapPositionToGrid = useGridSnapping();
+
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    const mapStage = mapStageRef.current;
+
+    function getBrushPosition() {
+      if (!mapStage || !map) {
+        return;
+      }
+      const mapImage = mapStage.findOne("#mapImage");
+      let position = getRelativePointerPosition(mapImage);
+      if (!position) {
+        return;
+      }
+      if (map.snapToGrid && isShape) {
+        position = snapPositionToGrid(position);
+      }
+      return Vector2.divide(position, {
+        x: mapImage.width(),
+        y: mapImage.height(),
+      });
+    }
+
+    function handleBrushDown() {
+      const brushPosition = getBrushPosition();
+      if (!brushPosition) {
+        return;
+      }
+      const commonShapeData = {
+        color: toolSettings.color,
+        blend: toolSettings.useBlending,
+        id: shortid.generate(),
+      };
+      const type = toolSettings.type;
+      if (isBrush) {
+        setDrawing({
+          type: "path",
+          pathType: type === "brush" ? "stroke" : "fill",
+          data: { points: [brushPosition] },
+          strokeWidth: type === "brush" ? 1 : 0,
+          ...commonShapeData,
+        });
+      } else if (isShape && drawingToolIsShape(type)) {
+        setDrawing({
+          type: "shape",
+          shapeType: type,
+          data: getDefaultShapeData(type, brushPosition),
+          strokeWidth:
+            toolSettings.type === "line" || !toolSettings.useShapeFill ? 1 : 0,
+          ...commonShapeData,
+        } as Shape);
+      }
+      setIsBrushDown(true);
+    }
+
+    function handleBrushMove() {
+      const brushPosition = getBrushPosition();
+      if (!brushPosition) {
+        return;
+      }
+      if (isBrushDown && drawing) {
+        if (isBrush) {
+          setDrawing((prevShape) => {
+            if (prevShape?.type !== "path") {
+              return prevShape;
+            }
+            const prevPoints = prevShape.data.points;
+            if (
+              Vector2.compare(
+                prevPoints[prevPoints.length - 1],
+                brushPosition,
+                0.001
+              )
+            ) {
+              return prevShape;
+            }
+            const simplified = simplifyPoints(
+              [...prevPoints, brushPosition],
+              1 / 1000 / stageScale
+            );
+            return {
+              ...prevShape,
+              data: { points: simplified },
+            };
+          });
+        } else if (isShape) {
+          setDrawing((prevShape) => {
+            if (prevShape?.type !== "shape") {
+              return prevShape;
+            }
+            return {
+              ...prevShape,
+              data: getUpdatedShapeData(
+                prevShape.shapeType,
+                prevShape.data,
+                brushPosition,
+                gridCellNormalizedSize,
+                mapWidth,
+                mapHeight
+              ),
+            } as Shape;
+          });
+        }
+      }
+    }
+
+    function handleBrushUp() {
+      if (isBrush && drawing && drawing.type === "path") {
+        if (drawing.data.points.length > 1) {
+          onShapeAdd(drawing);
+        }
+      } else if (isShape && drawing) {
+        onShapeAdd(drawing);
+      }
+
+      eraseHoveredShapes();
+
+      setDrawing(null);
+      setIsBrushDown(false);
+    }
+
+    interactionEmitter?.on("dragStart", handleBrushDown);
+    interactionEmitter?.on("drag", handleBrushMove);
+    interactionEmitter?.on("dragEnd", handleBrushUp);
+
+    return () => {
+      interactionEmitter?.off("dragStart", handleBrushDown);
+      interactionEmitter?.off("drag", handleBrushMove);
+      interactionEmitter?.off("dragEnd", handleBrushUp);
+    };
+  });
+
+  function handleShapeOver(shape: Drawing, isDown: boolean) {
+    if (shouldHover && isDown) {
+      if (erasingDrawings.findIndex((s) => s.id === shape.id) === -1) {
+        setErasingDrawings((prevShapes) => [...prevShapes, shape]);
+      }
+    }
+  }
+
+  function eraseHoveredShapes() {
+    if (erasingDrawings.length > 0) {
+      onShapesRemove(erasingDrawings.map((shape) => shape.id));
+      setErasingDrawings([]);
+    }
+  }
+
+  function renderDrawing(shape: Drawing) {
+    return (
+      <DrawingShape
+        drawing={shape}
+        key={shape.id}
+        onMouseMove={() => handleShapeOver(shape, isBrushDown)}
+        onTouchOver={() => handleShapeOver(shape, isBrushDown)}
+        onMouseDown={() => handleShapeOver(shape, true)}
+        onTouchStart={() => handleShapeOver(shape, true)}
+        onMouseUp={eraseHoveredShapes}
+        onTouchEnd={eraseHoveredShapes}
+        strokeWidth={gridStrokeWidth * shape.strokeWidth}
+      />
+    );
+  }
+
+  function renderErasingDrawing(drawing: Drawing) {
+    const eraseShape: Drawing = {
+      ...drawing,
+      color: "primary",
+    };
+    return renderDrawing(eraseShape);
+  }
+
+  return (
+    <Group>
+      {drawings.map(renderDrawing)}
+      {drawing && renderDrawing(drawing)}
+      {erasingDrawings.length > 0 && erasingDrawings.map(renderErasingDrawing)}
+    </Group>
+  );
+}
+
+export default DrawingTool;
diff --git a/src/components/map/MapFog.js b/src/components/tools/FogTool.tsx
similarity index 70%
rename from src/components/map/MapFog.js
rename to src/components/tools/FogTool.tsx
index 7614328..9ac7552 100644
--- a/src/components/map/MapFog.js
+++ b/src/components/tools/FogTool.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback } from "react";
 import shortid from "shortid";
 import { Group, Line } from "react-konva";
 import useImage from "use-image";
@@ -20,10 +20,11 @@ import {
   useGridStrokeWidth,
   useGridCellPixelOffset,
   useGridOffset,
+  useGridSnappingSensitivity,
 } from "../../contexts/GridContext";
 import { useKeyboard } from "../../contexts/KeyboardContext";
 
-import Vector2 from "../../helpers/Vector2";
+import Vector2, { BoundingBox } from "../../helpers/Vector2";
 import {
   simplifyPoints,
   mergeFogShapes,
@@ -31,23 +32,45 @@ import {
   getGuidesFromBoundingBoxes,
   getGuidesFromGridCell,
   findBestGuides,
+  Guide,
 } from "../../helpers/drawing";
 import colors from "../../helpers/colors";
-import {
-  HoleyLine,
-  Tick,
-  getRelativePointerPosition,
-} from "../../helpers/konva";
+import { getRelativePointerPosition } from "../../helpers/konva";
 import { keyBy } from "../../helpers/shared";
 
-import SubtractShapeAction from "../../actions/SubtractShapeAction";
-import CutShapeAction from "../../actions/CutShapeAction";
+import SubtractFogAction from "../../actions/SubtractFogAction";
+import CutFogAction from "../../actions/CutFogAction";
 
 import useSetting from "../../hooks/useSetting";
 
 import shortcuts from "../../shortcuts";
 
-function MapFog({
+import { Map } from "../../types/Map";
+import { Fog, FogToolSettings } from "../../types/Fog";
+
+import FogShape from "../konva/Fog";
+import Tick from "../konva/Tick";
+
+type FogAddEventHandler = (fog: Fog[]) => void;
+type FogCutEventHandler = (fog: Fog[]) => void;
+type FogRemoveEventHandler = (fogId: string[]) => void;
+type FogEditEventHandler = (edit: Partial<Fog>[]) => void;
+type FogErrorEventHandler = (message: string) => void;
+
+type MapFogProps = {
+  map: Map | null;
+  shapes: Fog[];
+  onShapesAdd: FogAddEventHandler;
+  onShapesCut: FogCutEventHandler;
+  onShapesRemove: FogRemoveEventHandler;
+  onShapesEdit: FogEditEventHandler;
+  onShapeError: FogErrorEventHandler;
+  active: boolean;
+  toolSettings: FogToolSettings;
+  editable: boolean;
+};
+
+function FogTool({
   map,
   shapes,
   onShapesAdd,
@@ -58,7 +81,7 @@ function MapFog({
   active,
   toolSettings,
   editable,
-}) {
+}: MapFogProps) {
   const stageScale = useDebouncedStageScale();
   const mapWidth = useMapWidth();
   const mapHeight = useMapHeight();
@@ -71,20 +94,25 @@ function MapFog({
   const gridCellPixelOffset = useGridCellPixelOffset();
   const gridOffset = useGridOffset();
 
-  const [gridSnappingSensitivity] = useSetting("map.gridSnappingSensitivity");
-  const [showFogGuides] = useSetting("fog.showGuides");
-  const [editOpacity] = useSetting("fog.editOpacity");
+  const snappingSensitivity = useGridSnappingSensitivity();
+  // Clamp snapping to 0 to accound for -1 snapping override
+  const gridSnappingSensitivity = Math.max(snappingSensitivity, 0);
+
+  const [showFogGuides] = useSetting<boolean>("fog.showGuides");
+  const [editOpacity] = useSetting<number>("fog.editOpacity");
   const mapStageRef = useMapStage();
 
-  const [drawingShape, setDrawingShape] = useState(null);
+  const [drawingShape, setDrawingShape] = useState<Fog | null>(null);
   const [isBrushDown, setIsBrushDown] = useState(false);
-  const [editingShapes, setEditingShapes] = useState([]);
+  const [editingShapes, setEditingShapes] = useState<Fog[]>([]);
 
   // Shapes that have been merged for fog
   const [fogShapes, setFogShapes] = useState(shapes);
   // Bounding boxes for guides
-  const [fogShapeBoundingBoxes, setFogShapeBoundingBoxes] = useState([]);
-  const [guides, setGuides] = useState([]);
+  const [fogShapeBoundingBoxes, setFogShapeBoundingBoxes] = useState<
+    BoundingBox[]
+  >([]);
+  const [guides, setGuides] = useState<Guide[]>([]);
 
   const shouldHover =
     active &&
@@ -108,8 +136,14 @@ function MapFog({
     const mapStage = mapStageRef.current;
 
     function getBrushPosition(snapping = true) {
+      if (!mapStage) {
+        return;
+      }
       const mapImage = mapStage.findOne("#mapImage");
       let position = getRelativePointerPosition(mapImage);
+      if (!position) {
+        return;
+      }
       if (shouldUseGuides && snapping) {
         for (let guide of guides) {
           if (guide.orientation === "vertical") {
@@ -129,6 +163,9 @@ function MapFog({
     function handleBrushDown() {
       if (toolSettings.type === "brush") {
         const brushPosition = getBrushPosition();
+        if (!brushPosition) {
+          return;
+        }
         setDrawingShape({
           type: "fog",
           data: {
@@ -143,6 +180,9 @@ function MapFog({
       }
       if (toolSettings.type === "rectangle") {
         const brushPosition = getBrushPosition();
+        if (!brushPosition) {
+          return;
+        }
         setDrawingShape({
           type: "fog",
           data: {
@@ -166,7 +206,13 @@ function MapFog({
     function handleBrushMove() {
       if (toolSettings.type === "brush" && isBrushDown && drawingShape) {
         const brushPosition = getBrushPosition();
+        if (!brushPosition) {
+          return;
+        }
         setDrawingShape((prevShape) => {
+          if (!prevShape) {
+            return prevShape;
+          }
           const prevPoints = prevShape.data.points;
           if (
             Vector2.compare(
@@ -193,7 +239,13 @@ function MapFog({
       if (toolSettings.type === "rectangle" && isBrushDown && drawingShape) {
         const prevPoints = drawingShape.data.points;
         const brushPosition = getBrushPosition();
+        if (!brushPosition) {
+          return;
+        }
         setDrawingShape((prevShape) => {
+          if (!prevShape) {
+            return prevShape;
+          }
           return {
             ...prevShape,
             data: {
@@ -223,7 +275,7 @@ function MapFog({
           const shapesToSubtract = shapes.filter((shape) =>
             cut ? !shape.visible : shape.visible
           );
-          const subtractAction = new SubtractShapeAction(shapesToSubtract);
+          const subtractAction = new SubtractFogAction(shapesToSubtract);
           const state = subtractAction.execute({
             [drawingShape.id]: drawingShape,
           });
@@ -235,19 +287,13 @@ function MapFog({
         if (drawingShapes.length > 0) {
           if (cut) {
             // Run a pre-emptive cut action to check whether we've cut anything
-            const cutAction = new CutShapeAction(drawingShapes);
+            const cutAction = new CutFogAction(drawingShapes);
             const state = cutAction.execute(keyBy(shapes, "id"));
 
             if (Object.keys(state).length === shapes.length) {
               onShapeError("No fog to cut");
             } else {
-              onShapesCut(
-                drawingShapes.map((shape) => ({
-                  id: shape.id,
-                  type: shape.type,
-                  data: shape.data,
-                }))
-              );
+              onShapesCut(drawingShapes);
             }
           } else {
             onShapesAdd(
@@ -272,71 +318,75 @@ function MapFog({
     function handlePointerClick() {
       if (toolSettings.type === "polygon") {
         const brushPosition = getBrushPosition();
-        setDrawingShape((prevDrawingShape) => {
-          if (prevDrawingShape) {
-            return {
-              ...prevDrawingShape,
-              data: {
-                ...prevDrawingShape.data,
-                points: [...prevDrawingShape.data.points, brushPosition],
-              },
-            };
-          } else {
-            return {
-              type: "fog",
-              data: {
-                points: [brushPosition, brushPosition],
-                holes: [],
-              },
-              strokeWidth: 0.5,
-              color: toolSettings.useFogCut ? "red" : "black",
-              id: shortid.generate(),
-              visible: true,
-            };
-          }
-        });
+        if (brushPosition) {
+          setDrawingShape((prevDrawingShape) => {
+            if (prevDrawingShape) {
+              return {
+                ...prevDrawingShape,
+                data: {
+                  ...prevDrawingShape.data,
+                  points: [...prevDrawingShape.data.points, brushPosition],
+                },
+              };
+            } else {
+              return {
+                type: "fog",
+                data: {
+                  points: [brushPosition, brushPosition],
+                  holes: [],
+                },
+                strokeWidth: 0.5,
+                color: toolSettings.useFogCut ? "red" : "black",
+                id: shortid.generate(),
+                visible: true,
+              };
+            }
+          });
+        }
       }
     }
 
     function handlePointerMove() {
       if (shouldUseGuides) {
-        let guides = [];
+        let guides: Guide[] = [];
         const brushPosition = getBrushPosition(false);
-        const absoluteBrushPosition = Vector2.multiply(brushPosition, {
-          x: mapWidth,
-          y: mapHeight,
-        });
-        if (map.snapToGrid) {
+        if (brushPosition) {
+          const absoluteBrushPosition = Vector2.multiply(brushPosition, {
+            x: mapWidth,
+            y: mapHeight,
+          });
+          if (map?.snapToGrid) {
+            guides.push(
+              ...getGuidesFromGridCell(
+                absoluteBrushPosition,
+                grid,
+                gridCellPixelSize,
+                gridOffset,
+                gridCellPixelOffset,
+                gridSnappingSensitivity,
+                { x: mapWidth, y: mapHeight }
+              )
+            );
+          }
+
           guides.push(
-            ...getGuidesFromGridCell(
-              absoluteBrushPosition,
-              grid,
-              gridCellPixelSize,
-              gridOffset,
-              gridCellPixelOffset,
-              gridSnappingSensitivity,
-              { x: mapWidth, y: mapHeight }
+            ...getGuidesFromBoundingBoxes(
+              brushPosition,
+              fogShapeBoundingBoxes,
+              gridCellNormalizedSize,
+              gridSnappingSensitivity
             )
           );
+
+          setGuides(findBestGuides(brushPosition, guides));
         }
-
-        guides.push(
-          ...getGuidesFromBoundingBoxes(
-            brushPosition,
-            fogShapeBoundingBoxes,
-            gridCellNormalizedSize,
-            gridSnappingSensitivity
-          )
-        );
-
-        setGuides(findBestGuides(brushPosition, guides));
       }
       if (toolSettings.type === "polygon") {
         const brushPosition = getBrushPosition();
-        if (toolSettings.type === "polygon" && drawingShape) {
+        if (toolSettings.type === "polygon" && drawingShape && brushPosition) {
           setDrawingShape((prevShape) => {
             if (!prevShape) {
-              return;
+              return prevShape;
             }
             return {
               ...prevShape,
@@ -354,32 +404,33 @@ function MapFog({
       setGuides([]);
     }
 
-    interactionEmitter.on("dragStart", handleBrushDown);
-    interactionEmitter.on("drag", handleBrushMove);
-    interactionEmitter.on("dragEnd", handleBrushUp);
+    interactionEmitter?.on("dragStart", handleBrushDown);
+    interactionEmitter?.on("drag", handleBrushMove);
+    interactionEmitter?.on("dragEnd", handleBrushUp);
     // Use mouse events for polygon and erase to allow for single clicks
-    mapStage.on("mousedown touchstart", handlePointerMove);
-    mapStage.on("mousemove touchmove", handlePointerMove);
-    mapStage.on("click tap", handlePointerClick);
-    mapStage.on("touchend", handelTouchEnd);
+    mapStage?.on("mousedown touchstart", handlePointerMove);
+    mapStage?.on("mousemove touchmove", handlePointerMove);
+    mapStage?.on("click tap", handlePointerClick);
+    mapStage?.on("touchend", handelTouchEnd);
 
     return () => {
-      interactionEmitter.off("dragStart", handleBrushDown);
-      interactionEmitter.off("drag", handleBrushMove);
-      interactionEmitter.off("dragEnd", handleBrushUp);
-      mapStage.off("mousedown touchstart", handlePointerMove);
-      mapStage.off("mousemove touchmove", handlePointerMove);
-      mapStage.off("click tap", handlePointerClick);
-      mapStage.off("touchend", handelTouchEnd);
+      interactionEmitter?.off("dragStart", handleBrushDown);
+      interactionEmitter?.off("drag", handleBrushMove);
+      interactionEmitter?.off("dragEnd", handleBrushUp);
+      mapStage?.off("mousedown touchstart", handlePointerMove);
+      mapStage?.off("mousemove touchmove", handlePointerMove);
+      mapStage?.off("click tap", handlePointerClick);
+      mapStage?.off("touchend", handelTouchEnd);
     };
   });
 
   const finishDrawingPolygon = useCallback(() => {
     const cut = toolSettings.useFogCut;
-
+    if (!drawingShape) {
+      return;
+    }
     let polygonShape = {
-      id: drawingShape.id,
-      type: drawingShape.type,
+      ...drawingShape,
       data: {
         ...drawingShape.data,
         // Remove the last point as it hasn't been placed yet
@@ -393,7 +444,7 @@ function MapFog({
       const shapesToSubtract = shapes.filter((shape) =>
         cut ? !shape.visible : shape.visible
       );
-      const subtractAction = new SubtractShapeAction(shapesToSubtract);
+      const subtractAction = new SubtractFogAction(shapesToSubtract);
       const state = subtractAction.execute({
         [polygonShape.id]: polygonShape,
       });
@@ -405,7 +456,7 @@ function MapFog({
     if (polygonShapes.length > 0) {
       if (cut) {
         // Run a pre-emptive cut action to check whether we've cut anything
-        const cutAction = new CutShapeAction(polygonShapes);
+        const cutAction = new CutFogAction(polygonShapes);
         const state = cutAction.execute(keyBy(shapes, "id"));
 
         if (Object.keys(state).length === shapes.length) {
@@ -442,7 +493,7 @@ function MapFog({
   ]);
 
   // Add keyboard shortcuts
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEvent) {
     if (
       shortcuts.fogFinishPolygon(event) &&
       toolSettings.type === "polygon" &&
@@ -460,17 +511,22 @@ function MapFog({
       toolSettings.type === "polygon"
     ) {
       if (drawingShape.data.points.length > 2) {
-        setDrawingShape((drawingShape) => ({
-          ...drawingShape,
-          data: {
-            ...drawingShape.data,
-            points: [
-              // Shift last point to previous point
-              ...drawingShape.data.points.slice(0, -2),
-              ...drawingShape.data.points.slice(-1),
-            ],
-          },
-        }));
+        setDrawingShape((prevShape) => {
+          if (!prevShape) {
+            return prevShape;
+          }
+          return {
+            ...prevShape,
+            data: {
+              ...prevShape.data,
+              points: [
+                // Shift last point to previous point
+                ...prevShape.data.points.slice(0, -2),
+                ...prevShape.data.points.slice(-1),
+              ],
+            },
+          };
+        });
       } else {
         setDrawingShape(null);
       }
@@ -483,7 +539,7 @@ function MapFog({
   useEffect(() => {
     setDrawingShape((prevShape) => {
       if (!prevShape) {
-        return;
+        return prevShape;
       }
       return {
         ...prevShape,
@@ -509,7 +565,7 @@ function MapFog({
     }
   }
 
-  function handleShapeOver(shape, isDown) {
+  function handleShapeOver(shape: Fog, isDown: boolean) {
     if (shouldHover && isDown) {
       if (editingShapes.findIndex((s) => s.id === shape.id) === -1) {
         setEditingShapes((prevShapes) => [...prevShapes, shape]);
@@ -517,43 +573,32 @@ function MapFog({
     }
   }
 
-  function reducePoints(acc, point) {
-    return [...acc, point.x * mapWidth, point.y * mapHeight];
-  }
-
-  function renderShape(shape) {
-    const points = shape.data.points.reduce(reducePoints, []);
-    const holes =
-      shape.data.holes &&
-      shape.data.holes.map((hole) => hole.reduce(reducePoints, []));
+  function renderShape(shape: Fog) {
     const opacity = editable ? editOpacity : 1;
-    // Control opacity only on fill as using opacity with stroke leads to performance issues
-    const fill = new Color(colors[shape.color] || shape.color)
-      .alpha(opacity)
-      .string();
     const stroke =
       editable && active
         ? colors.lightGray
         : colors[shape.color] || shape.color;
+    // Control opacity only on fill as using opacity with stroke leads to performance issues
+    const fill = new Color(colors[shape.color] || shape.color)
+      .alpha(opacity)
+      .string();
     return (
-      <HoleyLine
+      <FogShape
         key={shape.id}
+        fog={shape}
         onMouseMove={() => handleShapeOver(shape, isBrushDown)}
         onTouchOver={() => handleShapeOver(shape, isBrushDown)}
         onMouseDown={() => handleShapeOver(shape, true)}
         onTouchStart={() => handleShapeOver(shape, true)}
         onMouseUp={eraseHoveredShapes}
         onTouchEnd={eraseHoveredShapes}
-        points={points}
         stroke={stroke}
-        fill={fill}
-        closed
-        lineCap="round"
-        lineJoin="round"
+        opacity={opacity}
         strokeWidth={gridStrokeWidth * shape.strokeWidth}
+        fill={fill}
         fillPatternImage={patternImage}
         fillPriority={editable && !shape.visible ? "pattern" : "color"}
-        holes={holes}
         // Disable collision if the fog is transparent and we're not editing it
         // This allows tokens to be moved under the fog
         hitFunc={editable && !active ? () => {} : undefined}
@@ -561,15 +606,15 @@ function MapFog({
     );
   }
 
-  function renderEditingShape(shape) {
-    const editingShape = {
+  function renderEditingShape(shape: Fog) {
+    const editingShape: Fog = {
       ...shape,
-      color: "#BB99FF",
+      color: "primary",
     };
     return renderShape(editingShape);
   }
 
-  function renderPolygonAcceptTick(shape) {
+  function renderPolygonAcceptTick(shape: Fog) {
     if (shape.data.points.length === 0) {
       return null;
     }
@@ -611,7 +656,7 @@ function MapFog({
   }
 
   useEffect(() => {
-    function shapeVisible(shape) {
+    function shapeVisible(shape: Fog) {
       return (active && !toolSettings.preview) || shape.visible;
     }
 
@@ -643,4 +688,4 @@ function MapFog({
   );
 }
 
-export default MapFog;
+export default FogTool;
diff --git a/src/components/tools/MeasureTool.tsx b/src/components/tools/MeasureTool.tsx
new file mode 100644
index 0000000..7e352b3
--- /dev/null
+++ b/src/components/tools/MeasureTool.tsx
@@ -0,0 +1,155 @@
+import { useState, useEffect } from "react";
+import { Group } from "react-konva";
+
+import { useInteractionEmitter } from "../../contexts/MapInteractionContext";
+import { useMapStage } from "../../contexts/MapStageContext";
+import {
+  useGrid,
+  useGridCellPixelSize,
+  useGridCellNormalizedSize,
+  useGridOffset,
+} from "../../contexts/GridContext";
+
+import {
+  getDefaultShapeData,
+  getUpdatedShapeData,
+} from "../../helpers/drawing";
+import Vector2 from "../../helpers/Vector2";
+import { getRelativePointerPosition } from "../../helpers/konva";
+import { parseGridScale, gridDistance } from "../../helpers/grid";
+
+import Ruler from "../konva/Ruler";
+
+import useGridSnapping from "../../hooks/useGridSnapping";
+import { Map } from "../../types/Map";
+import { PointsData } from "../../types/Drawing";
+
+type MapMeasureProps = {
+  map: Map | null;
+  active: boolean;
+};
+
+type MeasureData = { length: number; points: Vector2[] };
+
+function MeasureTool({ map, active }: MapMeasureProps) {
+  const interactionEmitter = useInteractionEmitter();
+
+  const grid = useGrid();
+  const gridCellNormalizedSize = useGridCellNormalizedSize();
+  const gridCellPixelSize = useGridCellPixelSize();
+  const gridOffset = useGridOffset();
+
+  const mapStageRef = useMapStage();
+  const [drawingShapeData, setDrawingShapeData] =
+    useState<MeasureData | null>(null);
+  const [isBrushDown, setIsBrushDown] = useState(false);
+
+  const gridScale = parseGridScale(active ? grid.measurement.scale : null);
+
+  const snapPositionToGrid = useGridSnapping(
+    grid.measurement.type === "euclidean" ? 0 : 1,
+    false
+  );
+
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    const mapStage = mapStageRef.current;
+    const mapImage = mapStage?.findOne("#mapImage");
+
+    function getBrushPosition() {
+      if (!mapImage) {
+        return;
+      }
+      let position = getRelativePointerPosition(mapImage);
+      if (!position) {
+        return;
+      }
+      if (map?.snapToGrid) {
+        position = snapPositionToGrid(position);
+      }
+      return Vector2.divide(position, {
+        x: mapImage.width(),
+        y: mapImage.height(),
+      });
+    }
+
+    function handleBrushDown() {
+      const brushPosition = getBrushPosition();
+      if (!brushPosition) {
+        return;
+      }
+      const { points } = getDefaultShapeData(
+        "line",
+        brushPosition
+      ) as PointsData;
+      const length = 0;
+      setDrawingShapeData({ length, points });
+      setIsBrushDown(true);
+    }
+
+    function handleBrushMove() {
+      const brushPosition = getBrushPosition();
+      if (isBrushDown && drawingShapeData && brushPosition && mapImage) {
+        const { points } = getUpdatedShapeData(
+          "line",
+          drawingShapeData,
+          brushPosition,
+          gridCellNormalizedSize,
+          1,
+          1
+        ) as PointsData;
+        // Convert back to pixel values
+        const a = Vector2.subtract(
+          Vector2.multiply(points[0], {
+            x: mapImage.width(),
+            y: mapImage.height(),
+          }),
+          gridOffset
+        );
+        const b = Vector2.subtract(
+          Vector2.multiply(points[1], {
+            x: mapImage.width(),
+            y: mapImage.height(),
+          }),
+          gridOffset
+        );
+        const length = gridDistance(grid, a, b, gridCellPixelSize);
+        setDrawingShapeData({
+          length,
+          points,
+        });
+      }
+    }
+
+    function handleBrushUp() {
+      setDrawingShapeData(null);
+      setIsBrushDown(false);
+    }
+
+    interactionEmitter?.on("dragStart", handleBrushDown);
+    interactionEmitter?.on("drag", handleBrushMove);
+    interactionEmitter?.on("dragEnd", handleBrushUp);
+
+    return () => {
+      interactionEmitter?.off("dragStart", handleBrushDown);
+      interactionEmitter?.off("drag", handleBrushMove);
+      interactionEmitter?.off("dragEnd", handleBrushUp);
+    };
+  });
+
+  return (
+    <Group>
+      {drawingShapeData && (
+        <Ruler
+          points={drawingShapeData.points}
+          scale={gridScale}
+          length={drawingShapeData.length}
+        />
+      )}
+    </Group>
+  );
+}
+
+export default MeasureTool;
diff --git a/src/components/map/MapNotes.js b/src/components/tools/NoteTool.tsx
similarity index 53%
rename from src/components/map/MapNotes.js
rename to src/components/tools/NoteTool.tsx
index d28f364..98195d8 100644
--- a/src/components/map/MapNotes.js
+++ b/src/components/tools/NoteTool.tsx
@@ -1,6 +1,7 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import shortid from "shortid";
 import { Group } from "react-konva";
+import Konva from "konva";
 
 import { useInteractionEmitter } from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
@@ -11,29 +12,39 @@ import { getRelativePointerPosition } from "../../helpers/konva";
 
 import useGridSnapping from "../../hooks/useGridSnapping";
 
-import Note from "../note/Note";
+import Note from "../konva/Note";
+
+import { Map } from "../../types/Map";
+import { Note as NoteType } from "../../types/Note";
+import {
+  NoteCreateEventHander,
+  NoteMenuOpenEventHandler,
+} from "../../types/Events";
 
 const defaultNoteSize = 2;
 
-function MapNotes({
+type MapNoteProps = {
+  map: Map | null;
+  active: boolean;
+  onNoteCreate: NoteCreateEventHander;
+  onNoteMenuOpen: NoteMenuOpenEventHandler;
+  children: React.ReactNode;
+};
+
+function NoteTool({
   map,
   active,
-  onNoteAdd,
-  onNoteChange,
-  notes,
+  onNoteCreate,
   onNoteMenuOpen,
-  draggable,
-  onNoteDragStart,
-  onNoteDragEnd,
-  fadeOnHover,
-}) {
+  children,
+}: MapNoteProps) {
   const interactionEmitter = useInteractionEmitter();
   const userId = useUserId();
   const mapStageRef = useMapStage();
   const [isBrushDown, setIsBrushDown] = useState(false);
-  const [noteData, setNoteData] = useState(null);
+  const [noteData, setNoteData] = useState<NoteType | null>(null);
 
-  const creatingNoteRef = useRef();
+  const creatingNoteRef = useRef<Konva.Group>(null);
 
   const snapPositionToGrid = useGridSnapping();
 
@@ -44,9 +55,15 @@ function MapNotes({
     const mapStage = mapStageRef.current;
 
     function getBrushPosition() {
+      if (!mapStage) {
+        return;
+      }
       const mapImage = mapStage.findOne("#mapImage");
       let position = getRelativePointerPosition(mapImage);
-      if (map.snapToGrid) {
+      if (!position) {
+        return;
+      }
+      if (map?.snapToGrid) {
         position = snapPositionToGrid(position);
       }
       return Vector2.divide(position, {
@@ -57,6 +74,9 @@ function MapNotes({
 
     function handleBrushDown() {
       const brushPosition = getBrushPosition();
+      if (!brushPosition || !userId) {
+        return;
+      }
       setNoteData({
         x: brushPosition.x,
         y: brushPosition.y,
@@ -69,6 +89,7 @@ function MapNotes({
         locked: false,
         color: "yellow",
         textOnly: false,
+        rotation: 0,
       });
       setIsBrushDown(true);
     }
@@ -76,57 +97,53 @@ function MapNotes({
     function handleBrushMove() {
       if (noteData) {
         const brushPosition = getBrushPosition();
-        setNoteData((prev) => ({
-          ...prev,
-          x: brushPosition.x,
-          y: brushPosition.y,
-        }));
+        if (!brushPosition) {
+          return;
+        }
+        setNoteData((prev) => {
+          if (!prev) {
+            return prev;
+          }
+          return {
+            ...prev,
+            x: brushPosition.x,
+            y: brushPosition.y,
+          };
+        });
         setIsBrushDown(true);
       }
     }
 
     function handleBrushUp() {
-      if (noteData) {
-        onNoteAdd(noteData);
-        onNoteMenuOpen(noteData.id, creatingNoteRef.current);
+      if (noteData && creatingNoteRef.current) {
+        onNoteCreate([noteData]);
+        onNoteMenuOpen(noteData.id, creatingNoteRef.current, true);
       }
       setNoteData(null);
       setIsBrushDown(false);
     }
 
-    interactionEmitter.on("dragStart", handleBrushDown);
-    interactionEmitter.on("drag", handleBrushMove);
-    interactionEmitter.on("dragEnd", handleBrushUp);
+    interactionEmitter?.on("dragStart", handleBrushDown);
+    interactionEmitter?.on("drag", handleBrushMove);
+    interactionEmitter?.on("dragEnd", handleBrushUp);
 
     return () => {
-      interactionEmitter.off("dragStart", handleBrushDown);
-      interactionEmitter.off("drag", handleBrushMove);
-      interactionEmitter.off("dragEnd", handleBrushUp);
+      interactionEmitter?.off("dragStart", handleBrushDown);
+      interactionEmitter?.off("drag", handleBrushMove);
+      interactionEmitter?.off("dragEnd", handleBrushUp);
     };
   });
 
   return (
-    <Group>
-      {notes.map((note) => (
-        <Note
-          note={note}
-          map={map}
-          key={note.id}
-          onNoteMenuOpen={onNoteMenuOpen}
-          draggable={draggable && !note.locked}
-          onNoteChange={onNoteChange}
-          onNoteDragStart={onNoteDragStart}
-          onNoteDragEnd={onNoteDragEnd}
-          fadeOnHover={fadeOnHover}
-        />
-      ))}
+    <Group id="notes">
+      {children}
       <Group ref={creatingNoteRef}>
         {isBrushDown && noteData && (
-          <Note note={noteData} map={map} draggable={false} />
+          <Note note={noteData} map={map} selected={false} />
         )}
       </Group>
     </Group>
   );
 }
 
-export default MapNotes;
+export default NoteTool;
diff --git a/src/components/map/MapPointer.js b/src/components/tools/PointerTool.tsx
similarity index 51%
rename from src/components/map/MapPointer.js
rename to src/components/tools/PointerTool.tsx
index e78ac33..de30bf0 100644
--- a/src/components/map/MapPointer.js
+++ b/src/components/tools/PointerTool.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Group } from "react-konva";
 
 import {
@@ -9,15 +9,24 @@ import {
 import { useMapStage } from "../../contexts/MapStageContext";
 import { useGridStrokeWidth } from "../../contexts/GridContext";
 
-import {
-  getRelativePointerPositionNormalized,
-  Trail,
-} from "../../helpers/konva";
+import { getRelativePointerPositionNormalized } from "../../helpers/konva";
 import Vector2 from "../../helpers/Vector2";
 
-import colors from "../../helpers/colors";
+import Pointer from "../konva/Pointer";
 
-function MapPointer({
+import colors, { Color } from "../../helpers/colors";
+
+type MapPointerProps = {
+  active: boolean;
+  position: Vector2;
+  onPointerDown?: (position: Vector2) => void;
+  onPointerMove?: (position: Vector2) => void;
+  onPointerUp?: (position: Vector2) => void;
+  visible: boolean;
+  color: Color;
+};
+
+function PointerTool({
   active,
   position,
   onPointerDown,
@@ -25,7 +34,7 @@ function MapPointer({
   onPointerUp,
   visible,
   color,
-}) {
+}: MapPointerProps) {
   const mapWidth = useMapWidth();
   const mapHeight = useMapHeight();
   const interactionEmitter = useInteractionEmitter();
@@ -40,30 +49,36 @@ function MapPointer({
     const mapStage = mapStageRef.current;
 
     function getBrushPosition() {
+      if (!mapStage) {
+        return;
+      }
       const mapImage = mapStage.findOne("#mapImage");
       return getRelativePointerPositionNormalized(mapImage);
     }
 
     function handleBrushDown() {
-      onPointerDown && onPointerDown(getBrushPosition());
+      const brushPosition = getBrushPosition();
+      brushPosition && onPointerDown?.(brushPosition);
     }
 
     function handleBrushMove() {
-      onPointerMove && visible && onPointerMove(getBrushPosition());
+      const brushPosition = getBrushPosition();
+      brushPosition && visible && onPointerMove?.(brushPosition);
     }
 
     function handleBrushUp() {
-      onPointerMove && onPointerUp(getBrushPosition());
+      const brushPosition = getBrushPosition();
+      brushPosition && onPointerUp?.(brushPosition);
     }
 
-    interactionEmitter.on("dragStart", handleBrushDown);
-    interactionEmitter.on("drag", handleBrushMove);
-    interactionEmitter.on("dragEnd", handleBrushUp);
+    interactionEmitter?.on("dragStart", handleBrushDown);
+    interactionEmitter?.on("drag", handleBrushMove);
+    interactionEmitter?.on("dragEnd", handleBrushUp);
 
     return () => {
-      interactionEmitter.off("dragStart", handleBrushDown);
-      interactionEmitter.off("drag", handleBrushMove);
-      interactionEmitter.off("dragEnd", handleBrushUp);
+      interactionEmitter?.off("dragStart", handleBrushDown);
+      interactionEmitter?.off("drag", handleBrushMove);
+      interactionEmitter?.off("dragEnd", handleBrushUp);
     };
   });
 
@@ -72,7 +87,7 @@ function MapPointer({
   return (
     <Group>
       {visible && (
-        <Trail
+        <Pointer
           position={Vector2.multiply(position, { x: mapWidth, y: mapHeight })}
           color={colors[color]}
           size={size}
@@ -83,8 +98,8 @@ function MapPointer({
   );
 }
 
-MapPointer.defaultProps = {
+PointerTool.defaultProps = {
   color: "red",
 };
 
-export default MapPointer;
+export default PointerTool;
diff --git a/src/components/tools/SelectTool.tsx b/src/components/tools/SelectTool.tsx
new file mode 100644
index 0000000..2a29ca8
--- /dev/null
+++ b/src/components/tools/SelectTool.tsx
@@ -0,0 +1,287 @@
+import { useState, useEffect, useRef } from "react";
+import { Group } from "react-konva";
+import Konva from "konva";
+
+import {
+  useDebouncedStageScale,
+  useMapWidth,
+  useMapHeight,
+  useInteractionEmitter,
+} from "../../contexts/MapInteractionContext";
+import { useMapStage } from "../../contexts/MapStageContext";
+
+import {
+  getDefaultShapeData,
+  getUpdatedShapeData,
+  simplifyPoints,
+} from "../../helpers/drawing";
+import Vector2 from "../../helpers/Vector2";
+import {
+  getRelativePointerPosition,
+  scaleAndFlattenPoints,
+} from "../../helpers/konva";
+import { Intersection } from "../../helpers/token";
+
+import {
+  Selection as SelectionType,
+  SelectionItem,
+  SelectToolSettings,
+} from "../../types/Select";
+import { RectData } from "../../types/Drawing";
+import { Map } from "../../types/Map";
+import { useGridCellNormalizedSize } from "../../contexts/GridContext";
+import Selection from "../konva/Selection";
+import { SelectionItemsChangeEventHandler } from "../../types/Events";
+import { getSelectionPoints } from "../../helpers/selection";
+
+type MapSelectProps = {
+  active: boolean;
+  toolSettings: SelectToolSettings;
+  onSelectionItemsChange: SelectionItemsChangeEventHandler;
+  selection: SelectionType | null;
+  onSelectionChange: React.Dispatch<React.SetStateAction<SelectionType | null>>;
+  onSelectionMenuOpen: (open: boolean) => void;
+  onSelectionDragStart: () => void;
+  onSelectionDragEnd: () => void;
+  disabledTokens: Record<string, boolean>;
+  disabledNotes: Record<string, boolean>;
+  map: Map;
+};
+
+function SelectTool({
+  active,
+  toolSettings,
+  onSelectionItemsChange,
+  selection,
+  onSelectionChange,
+  onSelectionMenuOpen,
+  onSelectionDragStart,
+  onSelectionDragEnd,
+  disabledTokens,
+  disabledNotes,
+  map,
+}: MapSelectProps) {
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const interactionEmitter = useInteractionEmitter();
+
+  const gridCellNormalizedSize = useGridCellNormalizedSize();
+
+  const mapStageRef = useMapStage();
+  const [isBrushDown, setIsBrushDown] = useState(false);
+
+  // Use a ref here to prevent case where brush down event
+  // would fire before React state was refreshed
+  const preventSelectionRef = useRef(false);
+
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    const mapStage = mapStageRef.current;
+    const mapImage = mapStage?.findOne("#mapImage");
+
+    function getBrushPosition() {
+      if (!mapImage) {
+        return;
+      }
+      let position = getRelativePointerPosition(mapImage);
+      if (!position) {
+        return;
+      }
+      return Vector2.divide(position, {
+        x: mapImage.width(),
+        y: mapImage.height(),
+      });
+    }
+
+    function handleBrushDown() {
+      const brushPosition = getBrushPosition();
+      if (!brushPosition || preventSelectionRef.current) {
+        return;
+      }
+      if (toolSettings.type === "path") {
+        onSelectionChange({
+          type: "path",
+          items: [],
+          data: { points: [brushPosition] },
+          x: 0,
+          y: 0,
+        });
+      } else {
+        onSelectionChange({
+          type: "rectangle",
+          items: [],
+          data: getDefaultShapeData("rectangle", brushPosition) as RectData,
+          x: 0,
+          y: 0,
+        });
+      }
+      setIsBrushDown(true);
+    }
+
+    function handleBrushMove() {
+      const brushPosition = getBrushPosition();
+      if (!brushPosition || preventSelectionRef.current) {
+        return;
+      }
+      if (isBrushDown && selection && mapImage) {
+        if (selection.type === "path") {
+          onSelectionChange((prevSelection) => {
+            if (prevSelection?.type !== "path") {
+              return prevSelection;
+            }
+            const prevPoints = prevSelection.data.points;
+            if (
+              Vector2.compare(
+                prevPoints[prevPoints.length - 1],
+                brushPosition,
+                0.001
+              )
+            ) {
+              return prevSelection;
+            }
+            const simplified = simplifyPoints(
+              [...prevPoints, brushPosition],
+              1 / 1000 / stageScale
+            );
+            return {
+              ...prevSelection,
+              data: { points: simplified },
+            };
+          });
+        } else {
+          onSelectionChange((prevSelection) => {
+            if (prevSelection?.type !== "rectangle") {
+              return prevSelection;
+            }
+            return {
+              ...prevSelection,
+              data: getUpdatedShapeData(
+                "rectangle",
+                prevSelection.data,
+                brushPosition,
+                gridCellNormalizedSize,
+                mapWidth,
+                mapHeight
+              ) as RectData,
+            };
+          });
+        }
+      }
+    }
+
+    function handleBrushUp() {
+      if (preventSelectionRef.current) {
+        return;
+      }
+      if (selection && mapStage) {
+        const tokensGroups = mapStage.find<Konva.Group>("#tokens");
+        const notesGroups = mapStage.find<Konva.Group>("#notes");
+        const points = getSelectionPoints(selection);
+        const intersection = new Intersection(
+          {
+            type: "path",
+            points: scaleAndFlattenPoints(points, {
+              x: mapWidth,
+              y: mapHeight,
+            }),
+          },
+          { x: selection.x, y: selection.y },
+          { x: 0, y: 0 },
+          0
+        );
+
+        let intersectingItems: SelectionItem[] = [];
+
+        for (let tokensGroup of tokensGroups) {
+          const tokens = tokensGroup.children;
+          if (tokens) {
+            for (let token of tokens) {
+              if (
+                token.id() &&
+                !(token.id() in disabledTokens) &&
+                intersection.intersects(token.position())
+              ) {
+                intersectingItems.push({ type: "token", id: token.id() });
+              }
+            }
+          }
+        }
+
+        for (let notesGroup of notesGroups) {
+          const notes = notesGroup.children;
+          if (notes) {
+            for (let note of notes) {
+              if (
+                note.id() &&
+                !(note.id() in disabledNotes) &&
+                intersection.intersects(note.position())
+              ) {
+                intersectingItems.push({ type: "note", id: note.id() });
+              }
+            }
+          }
+        }
+
+        if (intersectingItems.length > 0) {
+          onSelectionChange((prevSelection) => {
+            if (!prevSelection) {
+              return prevSelection;
+            }
+            return { ...prevSelection, items: intersectingItems };
+          });
+          onSelectionMenuOpen(true);
+        } else {
+          onSelectionChange(null);
+        }
+      } else {
+        onSelectionChange(null);
+      }
+
+      setIsBrushDown(false);
+    }
+
+    function handlePointerClick(event: Konva.KonvaEventObject<MouseEvent>) {
+      if (event.target.id() === "selection") {
+        onSelectionMenuOpen(true);
+      } else {
+        onSelectionChange(null);
+        onSelectionMenuOpen(false);
+      }
+    }
+
+    interactionEmitter?.on("dragStart", handleBrushDown);
+    interactionEmitter?.on("drag", handleBrushMove);
+    interactionEmitter?.on("dragEnd", handleBrushUp);
+    mapStage?.on("click tap", handlePointerClick);
+
+    return () => {
+      interactionEmitter?.off("dragStart", handleBrushDown);
+      interactionEmitter?.off("drag", handleBrushMove);
+      interactionEmitter?.off("dragEnd", handleBrushUp);
+      mapStage?.off("click tap", handlePointerClick);
+    };
+  });
+
+  return (
+    <Group>
+      {selection && (
+        <Selection
+          selection={selection}
+          onSelectionChange={onSelectionChange}
+          onSelectionItemsChange={onSelectionItemsChange}
+          onPreventSelectionChange={(prevent: boolean) =>
+            (preventSelectionRef.current = prevent)
+          }
+          onSelectionDragStart={onSelectionDragStart}
+          onSelectionDragEnd={onSelectionDragEnd}
+          map={map}
+        />
+      )}
+    </Group>
+  );
+}
+
+export default SelectTool;
diff --git a/src/contexts/AssetsContext.js b/src/contexts/AssetsContext.tsx
similarity index 64%
rename from src/contexts/AssetsContext.js
rename to src/contexts/AssetsContext.tsx
index 4ff0b03..bb97192 100644
--- a/src/contexts/AssetsContext.js
+++ b/src/contexts/AssetsContext.tsx
@@ -8,49 +8,27 @@ import { useDatabase } from "./DatabaseContext";
 import useDebounce from "../hooks/useDebounce";
 
 import { omit } from "../helpers/shared";
+import { Asset } from "../types/Asset";
 
-/**
- * @typedef Asset
- * @property {string} id
- * @property {number} width
- * @property {number} height
- * @property {Uint8Array} file
- * @property {string} mime
- * @property {string} owner
- */
+export type GetAssetEventHanlder = (
+  assetId: string
+) => Promise<Asset | undefined>;
+export type AddAssetsEventHandler = (assets: Asset[]) => Promise<void>;
+export type PutAssetEventsHandler = (asset: Asset) => Promise<void>;
 
-/**
- * @callback getAsset
- * @param {string} assetId
- * @returns {Promise<Asset|undefined>}
- */
+type AssetsContextValue = {
+  getAsset: GetAssetEventHanlder;
+  addAssets: AddAssetsEventHandler;
+  putAsset: PutAssetEventsHandler;
+};
 
-/**
- * @callback addAssets
- * @param {Asset[]} assets
- */
-
-/**
- * @callback putAsset
- * @param {Asset} asset
- */
-
-/**
- * @typedef AssetsContext
- * @property {getAsset} getAsset
- * @property {addAssets} addAssets
- * @property {putAsset} putAsset
- */
-
-/**
- * @type {React.Context<undefined|AssetsContext>}
- */
-const AssetsContext = React.createContext();
+const AssetsContext =
+  React.createContext<AssetsContextValue | undefined>(undefined);
 
 // 100 MB max cache size
 const maxCacheSize = 1e8;
 
-export function AssetsProvider({ children }) {
+export function AssetsProvider({ children }: { children: React.ReactNode }) {
   const { worker, database, databaseStatus } = useDatabase();
 
   useEffect(() => {
@@ -59,35 +37,41 @@ export function AssetsProvider({ children }) {
     }
   }, [worker, databaseStatus]);
 
-  const getAsset = useCallback(
+  const getAsset = useCallback<GetAssetEventHanlder>(
     async (assetId) => {
-      return await database.table("assets").get(assetId);
+      if (database) {
+        return await database.table("assets").get(assetId);
+      }
     },
     [database]
   );
 
-  const addAssets = useCallback(
+  const addAssets = useCallback<AddAssetsEventHandler>(
     async (assets) => {
-      await database.table("assets").bulkAdd(assets);
+      if (database) {
+        await database.table("assets").bulkAdd(assets);
+      }
     },
     [database]
   );
 
-  const putAsset = useCallback(
+  const putAsset = useCallback<PutAssetEventsHandler>(
     async (asset) => {
-      // Check for broadcast channel and attempt to use worker to put map to avoid UI lockup
-      // Safari doesn't support BC so fallback to single thread
-      if (window.BroadcastChannel) {
-        const packedAsset = encode(asset);
-        const success = await worker.putData(
-          Comlink.transfer(packedAsset, [packedAsset.buffer]),
-          "assets"
-        );
-        if (!success) {
+      if (database) {
+        // Check for broadcast channel and attempt to use worker to put map to avoid UI lockup
+        // Safari doesn't support BC so fallback to single thread
+        if (window.BroadcastChannel) {
+          const packedAsset = encode(asset);
+          const success = await worker.putData(
+            Comlink.transfer(packedAsset, [packedAsset.buffer]),
+            "assets"
+          );
+          if (!success) {
+            await database.table("assets").put(asset);
+          }
+        } else {
           await database.table("assets").put(asset);
         }
-      } else {
-        await database.table("assets").put(asset);
       }
     },
     [database, worker]
@@ -119,25 +103,31 @@ export function useAssets() {
  * @property {number} references
  */
 
-/**
- * @type React.Context<undefined|Object.<string, AssetURL>>
- */
-export const AssetURLsStateContext = React.createContext();
+type AssetURL = {
+  url: string | null;
+  id: string;
+  references: number;
+};
 
-/**
- * @type React.Context<undefined|React.Dispatch<React.SetStateAction<{}>>>
- */
-export const AssetURLsUpdaterContext = React.createContext();
+type AssetURLs = Record<string, AssetURL>;
+
+export const AssetURLsStateContext =
+  React.createContext<AssetURLs | undefined>(undefined);
+
+export const AssetURLsUpdaterContext =
+  React.createContext<
+    React.Dispatch<React.SetStateAction<AssetURLs>> | undefined
+  >(undefined);
 
 /**
  * Helper to manage sharing of custom image sources between uses of useAssetURL
  */
-export function AssetURLsProvider({ children }) {
-  const [assetURLs, setAssetURLs] = useState({});
+export function AssetURLsProvider({ children }: { children: React.ReactNode }) {
+  const [assetURLs, setAssetURLs] = useState<AssetURLs>({});
   const { database } = useDatabase();
 
   // Keep track of the assets that need to be loaded
-  const [assetKeys, setAssetKeys] = useState([]);
+  const [assetKeys, setAssetKeys] = useState<string[]>([]);
 
   // Load assets after 100ms
   const loadingDebouncedAssetURLs = useDebounce(assetURLs, 100);
@@ -147,7 +137,7 @@ export function AssetURLsProvider({ children }) {
     if (!loadingDebouncedAssetURLs) {
       return;
     }
-    let keysToLoad = [];
+    let keysToLoad: string[] = [];
     for (let url of Object.values(loadingDebouncedAssetURLs)) {
       if (url.url === null) {
         keysToLoad.push(url.id);
@@ -159,8 +149,8 @@ export function AssetURLsProvider({ children }) {
   }, [loadingDebouncedAssetURLs]);
 
   // Get the new assets whenever the keys change
-  const assets = useLiveQuery(
-    () => database?.table("assets").bulkGet(assetKeys),
+  const assets = useLiveQuery<Asset[]>(
+    () => database?.table("assets").bulkGet(assetKeys) || [],
     [database, assetKeys]
   );
 
@@ -198,7 +188,7 @@ export function AssetURLsProvider({ children }) {
       let urlsToCleanup = [];
       for (let url of Object.values(prevURLs)) {
         if (url.references <= 0) {
-          URL.revokeObjectURL(url.url);
+          url.url && URL.revokeObjectURL(url.url);
           urlsToCleanup.push(url.id);
         }
       }
@@ -221,13 +211,13 @@ export function AssetURLsProvider({ children }) {
 
 /**
  * Helper function to load either file or default asset into a URL
- * @param {string} assetId
- * @param {"file"|"default"} type
- * @param {Object.<string, string>} defaultSources
- * @param {string|undefined} unknownSource
- * @returns {string|undefined}
  */
-export function useAssetURL(assetId, type, defaultSources, unknownSource) {
+export function useAssetURL(
+  assetId: string | null,
+  type: "file" | "default" | null,
+  defaultSources: Record<string, string>,
+  unknownSource?: string
+) {
   const assetURLs = useContext(AssetURLsStateContext);
   if (assetURLs === undefined) {
     throw new Error("useAssetURL must be used within a AssetURLsProvider");
@@ -241,9 +231,8 @@ export function useAssetURL(assetId, type, defaultSources, unknownSource) {
     if (!assetId || type !== "file") {
       return;
     }
-
-    function updateAssetURL() {
-      function increaseReferences(prevURLs) {
+    const updateAssetURL = () => {
+      const increaseReferences = (prevURLs: AssetURLs): AssetURLs => {
         return {
           ...prevURLs,
           [assetId]: {
@@ -251,15 +240,15 @@ export function useAssetURL(assetId, type, defaultSources, unknownSource) {
             references: prevURLs[assetId].references + 1,
           },
         };
-      }
+      };
 
-      function createReference(prevURLs) {
+      const createReference = (prevURLs: AssetURLs): AssetURLs => {
         return {
           ...prevURLs,
           [assetId]: { url: null, id: assetId, references: 1 },
         };
-      }
-      setAssetURLs((prevURLs) => {
+      };
+      setAssetURLs?.((prevURLs) => {
         if (assetId in prevURLs) {
           // Check if the asset url is already added and increase references
           return increaseReferences(prevURLs);
@@ -267,7 +256,7 @@ export function useAssetURL(assetId, type, defaultSources, unknownSource) {
           return createReference(prevURLs);
         }
       });
-    }
+    };
 
     updateAssetURL();
 
@@ -304,48 +293,45 @@ export function useAssetURL(assetId, type, defaultSources, unknownSource) {
   return unknownSource;
 }
 
-/**
- * @typedef FileData
- * @property {string} file
- * @property {"file"} type
- * @property {string} thumbnail
- * @property {string=} quality
- * @property {Object.<string, string>=} resolutions
- */
+type FileData = {
+  file: string;
+  type: "file";
+  thumbnail?: string;
+  quality?: string;
+  resolutions?: Record<string, string>;
+};
 
-/**
- * @typedef DefaultData
- * @property {string} key
- * @property {"default"} type
- */
+type DefaultData = {
+  key: string;
+  type: "default";
+};
 
 /**
  * Load a map or token into a URL taking into account a thumbnail and multiple resolutions
- * @param {FileData|DefaultData} data
- * @param {Object.<string, string>} defaultSources
- * @param {string|undefined} unknownSource
- * @param {boolean} thumbnail
- * @returns {string|undefined}
  */
 export function useDataURL(
-  data,
-  defaultSources,
-  unknownSource,
+  data: FileData | DefaultData | null,
+  defaultSources: Record<string, string>,
+  unknownSource: string | undefined = undefined,
   thumbnail = false
 ) {
-  const [assetId, setAssetId] = useState();
+  const [assetId, setAssetId] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!data) {
-      return;
-    }
     function loadAssetId() {
+      if (!data) {
+        return;
+      }
       if (data.type === "default") {
         setAssetId(data.key);
       } else {
-        if (thumbnail) {
+        if (thumbnail && data.thumbnail) {
           setAssetId(data.thumbnail);
-        } else if (data.resolutions && data.quality !== "original") {
+        } else if (
+          data.resolutions &&
+          data.quality &&
+          data.quality !== "original"
+        ) {
           setAssetId(data.resolutions[data.quality]);
         } else {
           setAssetId(data.file);
@@ -357,8 +343,8 @@ export function useDataURL(
   }, [data, thumbnail]);
 
   const assetURL = useAssetURL(
-    assetId,
-    data?.type,
+    assetId || null,
+    data?.type || null,
     defaultSources,
     unknownSource
   );
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.tsx
similarity index 66%
rename from src/contexts/AuthContext.js
rename to src/contexts/AuthContext.tsx
index cd0b4e9..c775d44 100644
--- a/src/contexts/AuthContext.js
+++ b/src/contexts/AuthContext.tsx
@@ -2,9 +2,15 @@ import React, { useState, useEffect, useContext } from "react";
 
 import FakeStorage from "../helpers/FakeStorage";
 
-const AuthContext = React.createContext();
+type AuthContextValue = {
+  password: string;
+  setPassword: React.Dispatch<React.SetStateAction<string>>;
+};
 
-let storage;
+const AuthContext =
+  React.createContext<AuthContextValue | undefined>(undefined);
+
+let storage: Storage | FakeStorage;
 try {
   sessionStorage.setItem("__test", "__test");
   sessionStorage.removeItem("__test");
@@ -14,8 +20,10 @@ try {
   storage = new FakeStorage();
 }
 
-export function AuthProvider({ children }) {
-  const [password, setPassword] = useState(storage.getItem("auth") || "");
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [password, setPassword] = useState<string>(
+    storage.getItem("auth") || ""
+  );
 
   useEffect(() => {
     storage.setItem("auth", password);
diff --git a/src/contexts/DatabaseContext.js b/src/contexts/DatabaseContext.tsx
similarity index 78%
rename from src/contexts/DatabaseContext.js
rename to src/contexts/DatabaseContext.tsx
index b797dbf..01e49a2 100644
--- a/src/contexts/DatabaseContext.js
+++ b/src/contexts/DatabaseContext.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useContext } from "react";
-// eslint-disable-next-line no-unused-vars
 import Dexie from "dexie";
 import * as Comlink from "comlink";
 
@@ -7,28 +6,31 @@ import ErrorBanner from "../components/banner/ErrorBanner";
 
 import { getDatabase } from "../database";
 
+//@ts-ignore
 import DatabaseWorker from "worker-loader!../workers/DatabaseWorker"; // eslint-disable-line import/no-webpack-loader-syntax
+import { DatabaseWorkerService } from "../workers/DatabaseWorker";
 
-/**
- * @typedef DatabaseContext
- * @property {Dexie|undefined} database
- * @property {any} worker
- * @property {string} databaseStatus
- * @property {Error|undefined} databaseError
- */
+export type DatabaseStatus = "loading" | "disabled" | "upgrading" | "loaded";
 
-/**
- * @type {React.Context<undefined|DatabaseContext>}
- */
-const DatabaseContext = React.createContext();
+type DatabaseContextValue = {
+  database: Dexie | undefined;
+  databaseStatus: DatabaseStatus;
+  databaseError: Error | undefined;
+  worker: Comlink.Remote<DatabaseWorkerService>;
+};
 
-const worker = Comlink.wrap(new DatabaseWorker());
+const DatabaseContext =
+  React.createContext<DatabaseContextValue | undefined>(undefined);
 
-export function DatabaseProvider({ children }) {
-  const [database, setDatabase] = useState();
-  // "loading" | "disabled" | "upgrading" | "loaded"
-  const [databaseStatus, setDatabaseStatus] = useState("loading");
-  const [databaseError, setDatabaseError] = useState();
+const worker: Comlink.Remote<DatabaseWorkerService> = Comlink.wrap(
+  new DatabaseWorker()
+);
+
+export function DatabaseProvider({ children }: { children: React.ReactNode }) {
+  const [database, setDatabase] = useState<Dexie>();
+  const [databaseStatus, setDatabaseStatus] =
+    useState<DatabaseStatus>("loading");
+  const [databaseError, setDatabaseError] = useState<Error>();
 
   useEffect(() => {
     // Create a test database and open it to see if indexedDB is enabled
@@ -69,7 +71,7 @@ export function DatabaseProvider({ children }) {
       window.indexedDB.deleteDatabase("__test");
     };
 
-    function handleDatabaseError(event) {
+    function handleDatabaseError(event: PromiseRejectionEvent) {
       if (event) {
         event.preventDefault();
         if (event.reason instanceof Dexie.DexieError) {
@@ -118,7 +120,7 @@ export function DatabaseProvider({ children }) {
         {children}
         <ErrorBanner
           error={databaseError}
-          onRequestClose={() => setDatabaseError()}
+          onRequestClose={() => setDatabaseError(undefined)}
         />
       </>
     </DatabaseContext.Provider>
diff --git a/src/contexts/DiceLoadingContext.js b/src/contexts/DiceLoadingContext.tsx
similarity index 60%
rename from src/contexts/DiceLoadingContext.js
rename to src/contexts/DiceLoadingContext.tsx
index 8bc9ed3..57ae3b1 100644
--- a/src/contexts/DiceLoadingContext.js
+++ b/src/contexts/DiceLoadingContext.tsx
@@ -1,8 +1,18 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, ReactChild } from "react";
 
-const DiceLoadingContext = React.createContext();
+export type AssetLoadStartEventHandler = () => void;
+export type AssetLoadFinishEventHandler = () => void;
 
-export function DiceLoadingProvider({ children }) {
+type DiceLoadingContextValue = {
+  assetLoadStart: AssetLoadStartEventHandler;
+  assetLoadFinish: AssetLoadFinishEventHandler;
+  isLoading: boolean;
+};
+
+const DiceLoadingContext =
+  React.createContext<DiceLoadingContextValue | undefined>(undefined);
+
+export function DiceLoadingProvider({ children }: { children: ReactChild }) {
   const [loadingAssetCount, setLoadingAssetCount] = useState(0);
 
   function assetLoadStart() {
diff --git a/src/contexts/DragContext.js b/src/contexts/DragContext.js
deleted file mode 100644
index 2614b0f..0000000
--- a/src/contexts/DragContext.js
+++ /dev/null
@@ -1,75 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-import React, { useRef, ReactNode } from "react";
-import {
-  DndContext,
-  useDndContext,
-  useDndMonitor,
-  // eslint-disable-next-line no-unused-vars
-  DragEndEvent,
-} from "@dnd-kit/core";
-
-/**
- * Wrap a dnd-kit DndContext with a position monitor to get the
- * active drag element on drag end
- * TODO: use look into fixing this upstream
- * Related: https://github.com/clauderic/dnd-kit/issues/238
- */
-
-/**
- * @typedef DragEndOverlayEvent
- * @property {DOMRect} overlayNodeClientRect
- *
- * @typedef {DragEndEvent & DragEndOverlayEvent} DragEndWithOverlayProps
- */
-
-/**
- * @callback DragEndWithOverlayEvent
- * @param {DragEndWithOverlayProps} props
- */
-
-/**
- * @typedef CustomDragProps
- * @property {DragEndWithOverlayEvent=} onDragEnd
- * @property {ReactNode} children
- */
-
-/**
- * @param {CustomDragProps} props
- */
-function DragPositionMonitor({ children, onDragEnd }) {
-  const { overlayNode } = useDndContext();
-
-  const overlayNodeClientRectRef = useRef();
-  function handleDragMove() {
-    if (overlayNode?.nodeRef?.current) {
-      overlayNodeClientRectRef.current = overlayNode.nodeRef.current.getBoundingClientRect();
-    }
-  }
-
-  function handleDragEnd(props) {
-    onDragEnd &&
-      onDragEnd({
-        ...props,
-        overlayNodeClientRect: overlayNodeClientRectRef.current,
-      });
-  }
-  useDndMonitor({ onDragEnd: handleDragEnd, onDragMove: handleDragMove });
-
-  return children;
-}
-
-/**
- * TODO: Import Props interface from dnd-kit with conversion to Typescript
- * @param {CustomDragProps} props
- */
-function DragContext({ children, onDragEnd, ...props }) {
-  return (
-    <DndContext {...props}>
-      <DragPositionMonitor onDragEnd={onDragEnd}>
-        {children}
-      </DragPositionMonitor>
-    </DndContext>
-  );
-}
-
-export default DragContext;
diff --git a/src/contexts/DragContext.tsx b/src/contexts/DragContext.tsx
new file mode 100644
index 0000000..c60def2
--- /dev/null
+++ b/src/contexts/DragContext.tsx
@@ -0,0 +1,67 @@
+import { useRef } from "react";
+import {
+  DndContext,
+  useDndContext,
+  useDndMonitor,
+  DragEndEvent,
+} from "@dnd-kit/core";
+
+import { Props } from "@dnd-kit/core/dist/components/DndContext/DndContext";
+
+/**
+ * Wrap a dnd-kit DndContext with a position monitor to get the
+ * active drag element on drag end
+ * TODO: use look into fixing this upstream
+ * Related: https://github.com/clauderic/dnd-kit/issues/238
+ */
+
+type DragEndWithOverlayEvent = {
+  overlayNodeClientRect?: DOMRect;
+};
+
+export type CustomDragEndEvent = DragEndWithOverlayEvent & DragEndEvent;
+
+type CustomDragProps = {
+  onDragEnd?: (event: CustomDragEndEvent) => void;
+};
+
+function DragPositionMonitor({ onDragEnd }: CustomDragProps) {
+  const { overlayNode } = useDndContext();
+
+  const overlayNodeClientRectRef = useRef<DOMRect>();
+  function handleDragMove() {
+    if (overlayNode?.nodeRef?.current) {
+      overlayNodeClientRectRef.current =
+        overlayNode.nodeRef.current.getBoundingClientRect();
+    }
+  }
+
+  function handleDragEnd(props: DragEndEvent) {
+    onDragEnd &&
+      onDragEnd({
+        ...props,
+        overlayNodeClientRect: overlayNodeClientRectRef.current,
+      });
+  }
+  useDndMonitor({ onDragEnd: handleDragEnd, onDragMove: handleDragMove });
+
+  return null;
+}
+
+/**
+ * @param {CustomDragProps} props
+ */
+function DragContext({
+  children,
+  onDragEnd,
+  ...props
+}: CustomDragProps & Props) {
+  return (
+    <DndContext {...props}>
+      <DragPositionMonitor onDragEnd={onDragEnd} />
+      {children}
+    </DndContext>
+  );
+}
+
+export default DragContext;
diff --git a/src/contexts/GridContext.js b/src/contexts/GridContext.tsx
similarity index 71%
rename from src/contexts/GridContext.js
rename to src/contexts/GridContext.tsx
index a4b173f..cbd19de 100644
--- a/src/contexts/GridContext.js
+++ b/src/contexts/GridContext.tsx
@@ -2,8 +2,15 @@ import React, { useContext, useState, useEffect } from "react";
 
 import Vector2 from "../helpers/Vector2";
 import Size from "../helpers/Size";
-// eslint-disable-next-line no-unused-vars
-import { getGridPixelSize, getCellPixelSize, Grid } from "../helpers/grid";
+import { getGridPixelSize, getCellPixelSize } from "../helpers/grid";
+
+import { Grid } from "../types/Grid";
+
+import useSetting from "../hooks/useSetting";
+
+import shortcuts from "../shortcuts";
+
+import { useBlur, useKeyboard } from "./KeyboardContext";
 
 /**
  * @typedef GridContextValue
@@ -15,11 +22,21 @@ import { getGridPixelSize, getCellPixelSize, Grid } from "../helpers/grid";
  * @property {number} gridStrokeWidth Stroke width of the grid in pixels
  * @property {Vector2} gridCellPixelOffset Offset of the grid cells to convert the center position of hex cells to the top left
  */
+type GridContextValue = {
+  grid: Grid;
+  gridPixelSize: Size;
+  gridCellPixelSize: Size;
+  gridCellNormalizedSize: Size;
+  gridOffset: Vector2;
+  gridStrokeWidth: number;
+  gridCellPixelOffset: Vector2;
+  gridSnappingSensitivity: number;
+};
 
 /**
  * @type {GridContextValue}
  */
-const defaultValue = {
+const defaultValue: GridContextValue = {
   grid: {
     size: new Vector2(0, 0),
     inset: { topLeft: new Vector2(0, 0), bottomRight: new Vector2(1, 1) },
@@ -35,6 +52,7 @@ const defaultValue = {
   gridOffset: new Vector2(0, 0),
   gridStrokeWidth: 0,
   gridCellPixelOffset: new Vector2(0, 0),
+  gridSnappingSensitivity: 0,
 };
 
 export const GridContext = React.createContext(defaultValue.grid);
@@ -54,14 +72,31 @@ export const GridStrokeWidthContext = React.createContext(
 export const GridCellPixelOffsetContext = React.createContext(
   defaultValue.gridCellPixelOffset
 );
+export const GridSnappingSensitivityContext = React.createContext(
+  defaultValue.gridSnappingSensitivity
+);
 
 const defaultStrokeWidth = 1 / 10;
 
-export function GridProvider({ grid: inputGrid, width, height, children }) {
-  let grid = inputGrid;
+type GridProviderProps = {
+  grid: Grid | null;
+  width: number;
+  height: number;
+  children: React.ReactNode;
+};
 
-  if (!grid?.size.x || !grid?.size.y) {
+export function GridProvider({
+  grid: inputGrid,
+  width,
+  height,
+  children,
+}: GridProviderProps) {
+  let grid: Grid;
+
+  if (!inputGrid || !inputGrid.size.x || !inputGrid.size.y) {
     grid = defaultValue.grid;
+  } else {
+    grid = inputGrid;
   }
 
   const [gridPixelSize, setGridPixelSize] = useState(
@@ -115,6 +150,40 @@ export function GridProvider({ grid: inputGrid, width, height, children }) {
     setGridCellPixelOffset(_gridCellPixelOffset);
   }, [grid, width, height]);
 
+  const [gridSnappingSensitivity, setGridSnappingSensitivity] = useState(
+    defaultValue.gridSnappingSensitivity
+  );
+  const [defaultSnappingSensitivity] = useSetting<number>(
+    "map.gridSnappingSensitivity"
+  );
+  useEffect(() => {
+    if (
+      gridSnappingSensitivity !== defaultSnappingSensitivity &&
+      gridSnappingSensitivity !== -1 // Snapping not disabled
+    ) {
+      setGridSnappingSensitivity(defaultSnappingSensitivity);
+    }
+  }, [defaultSnappingSensitivity, gridSnappingSensitivity]);
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (shortcuts.disableSnapping(event)) {
+      setGridSnappingSensitivity(-1);
+    }
+  }
+
+  function handleKeyUp(event: KeyboardEvent) {
+    if (shortcuts.disableSnapping(event)) {
+      setGridSnappingSensitivity(defaultSnappingSensitivity);
+    }
+  }
+
+  function handleBlur() {
+    setGridSnappingSensitivity(defaultSnappingSensitivity);
+  }
+
+  useKeyboard(handleKeyDown, handleKeyUp);
+  useBlur(handleBlur);
+
   return (
     <GridContext.Provider value={grid}>
       <GridPixelSizeContext.Provider value={gridPixelSize}>
@@ -127,7 +196,11 @@ export function GridProvider({ grid: inputGrid, width, height, children }) {
                 <GridCellPixelOffsetContext.Provider
                   value={gridCellPixelOffset}
                 >
-                  {children}
+                  <GridSnappingSensitivityContext.Provider
+                    value={gridSnappingSensitivity}
+                  >
+                    {children}
+                  </GridSnappingSensitivityContext.Provider>
                 </GridCellPixelOffsetContext.Provider>
               </GridStrokeWidthContext.Provider>
             </GridOffsetContext.Provider>
@@ -197,3 +270,13 @@ export function useGridCellPixelOffset() {
   }
   return context;
 }
+
+export function useGridSnappingSensitivity() {
+  const context = useContext(GridSnappingSensitivityContext);
+  if (context === undefined) {
+    throw new Error(
+      "useGridSnappingSensitivity must be used within a GridProvider"
+    );
+  }
+  return context;
+}
diff --git a/src/contexts/GroupContext.js b/src/contexts/GroupContext.js
deleted file mode 100644
index 3b2138d..0000000
--- a/src/contexts/GroupContext.js
+++ /dev/null
@@ -1,240 +0,0 @@
-import React, { useState, useContext, useEffect } from "react";
-import cloneDeep from "lodash.clonedeep";
-import Fuse from "fuse.js";
-
-import { useKeyboard, useBlur } from "./KeyboardContext";
-
-import { getGroupItems, groupsFromIds } from "../helpers/group";
-
-import shortcuts from "../shortcuts";
-
-const GroupContext = React.createContext();
-
-export function GroupProvider({
-  groups,
-  itemNames,
-  onGroupsChange,
-  onGroupsSelect,
-  disabled,
-  children,
-}) {
-  const [selectedGroupIds, setSelectedGroupIds] = useState([]);
-  // Either single, multiple or range
-  const [selectMode, setSelectMode] = useState("single");
-
-  /**
-   * Group Open
-   */
-  const [openGroupId, setOpenGroupId] = useState();
-  const [openGroupItems, setOpenGroupItems] = useState([]);
-  useEffect(() => {
-    if (openGroupId) {
-      const openGroups = groupsFromIds([openGroupId], groups);
-      if (openGroups.length === 1) {
-        const openGroup = openGroups[0];
-        setOpenGroupItems(getGroupItems(openGroup));
-      } else {
-        // Close group if we can't find it
-        // This can happen if it was deleted or all it's items were deleted
-        setOpenGroupItems([]);
-        setOpenGroupId();
-      }
-    } else {
-      setOpenGroupItems([]);
-    }
-  }, [openGroupId, groups]);
-
-  function handleGroupOpen(groupId) {
-    setSelectedGroupIds([]);
-    setOpenGroupId(groupId);
-  }
-
-  function handleGroupClose() {
-    setSelectedGroupIds([]);
-    setOpenGroupId();
-  }
-
-  /**
-   * Search
-   */
-  const [filter, setFilter] = useState();
-  const [filteredGroupItems, setFilteredGroupItems] = useState([]);
-  const [fuse, setFuse] = useState();
-  // Update search index when items change
-  useEffect(() => {
-    let items = [];
-    for (let group of groups) {
-      const itemsToAdd = getGroupItems(group);
-      const namedItems = itemsToAdd.map((item) => ({
-        ...item,
-        name: itemNames[item.id],
-      }));
-      items.push(...namedItems);
-    }
-    setFuse(new Fuse(items, { keys: ["name"] }));
-  }, [groups, itemNames]);
-
-  // Perform search when search changes
-  useEffect(() => {
-    if (filter) {
-      const query = fuse.search(filter);
-      setFilteredGroupItems(query.map((result) => result.item));
-      setOpenGroupId();
-    } else {
-      setFilteredGroupItems([]);
-    }
-  }, [filter, fuse]);
-
-  /**
-   * Handlers
-   */
-
-  const activeGroups = openGroupId
-    ? openGroupItems
-    : filter
-    ? filteredGroupItems
-    : groups;
-
-  /**
-   * @param {string|undefined} groupId The group to apply changes to, leave undefined to replace the full group object
-   */
-  function handleGroupsChange(newGroups, groupId) {
-    if (groupId) {
-      // If a group is specidifed then update that group with the new items
-      const groupIndex = groups.findIndex((group) => group.id === groupId);
-      let updatedGroups = cloneDeep(groups);
-      const group = updatedGroups[groupIndex];
-      updatedGroups[groupIndex] = { ...group, items: newGroups };
-      onGroupsChange(updatedGroups);
-    } else {
-      onGroupsChange(newGroups);
-    }
-  }
-
-  function handleGroupSelect(groupId) {
-    let groupIds = [];
-    if (groupId) {
-      switch (selectMode) {
-        case "single":
-          groupIds = [groupId];
-          break;
-        case "multiple":
-          if (selectedGroupIds.includes(groupId)) {
-            groupIds = selectedGroupIds.filter((id) => id !== groupId);
-          } else {
-            groupIds = [...selectedGroupIds, groupId];
-          }
-          break;
-        case "range":
-          if (selectedGroupIds.length > 0) {
-            const currentIndex = activeGroups.findIndex(
-              (g) => g.id === groupId
-            );
-            const lastIndex = activeGroups.findIndex(
-              (g) => g.id === selectedGroupIds[selectedGroupIds.length - 1]
-            );
-            let idsToAdd = [];
-            let idsToRemove = [];
-            const direction = currentIndex > lastIndex ? 1 : -1;
-            for (
-              let i = lastIndex + direction;
-              direction < 0 ? i >= currentIndex : i <= currentIndex;
-              i += direction
-            ) {
-              const id = activeGroups[i].id;
-              if (selectedGroupIds.includes(id)) {
-                idsToRemove.push(id);
-              } else {
-                idsToAdd.push(id);
-              }
-            }
-            groupIds = [...selectedGroupIds, ...idsToAdd].filter(
-              (id) => !idsToRemove.includes(id)
-            );
-          } else {
-            groupIds = [groupId];
-          }
-          break;
-        default:
-          groupIds = [];
-      }
-    }
-    setSelectedGroupIds(groupIds);
-    onGroupsSelect(groupIds);
-  }
-
-  /**
-   * Shortcuts
-   */
-  function handleKeyDown(event) {
-    if (disabled) {
-      return;
-    }
-    if (shortcuts.selectRange(event)) {
-      setSelectMode("range");
-    }
-    if (shortcuts.selectMultiple(event)) {
-      setSelectMode("multiple");
-    }
-  }
-
-  function handleKeyUp(event) {
-    if (disabled) {
-      return;
-    }
-    if (shortcuts.selectRange(event) && selectMode === "range") {
-      setSelectMode("single");
-    }
-    if (shortcuts.selectMultiple(event) && selectMode === "multiple") {
-      setSelectMode("single");
-    }
-  }
-
-  useKeyboard(handleKeyDown, handleKeyUp);
-
-  // Set select mode to single when cmd+tabing
-  function handleBlur() {
-    setSelectMode("single");
-  }
-
-  useBlur(handleBlur);
-
-  const value = {
-    groups,
-    activeGroups,
-    openGroupId,
-    openGroupItems,
-    filter,
-    filteredGroupItems,
-    selectedGroupIds,
-    selectMode,
-    onSelectModeChange: setSelectMode,
-    onGroupOpen: handleGroupOpen,
-    onGroupClose: handleGroupClose,
-    onGroupsChange: handleGroupsChange,
-    onGroupSelect: handleGroupSelect,
-    onFilterChange: setFilter,
-  };
-
-  return (
-    <GroupContext.Provider value={value}>{children}</GroupContext.Provider>
-  );
-}
-
-GroupProvider.defaultProps = {
-  groups: [],
-  itemNames: {},
-  onGroupsChange: () => {},
-  onGroupsSelect: () => {},
-  disabled: false,
-};
-
-export function useGroup() {
-  const context = useContext(GroupContext);
-  if (context === undefined) {
-    throw new Error("useGroup must be used within a GroupProvider");
-  }
-  return context;
-}
-
-export default GroupContext;
diff --git a/src/contexts/GroupContext.tsx b/src/contexts/GroupContext.tsx
new file mode 100644
index 0000000..cb0feca
--- /dev/null
+++ b/src/contexts/GroupContext.tsx
@@ -0,0 +1,294 @@
+import React, { useState, useContext, useEffect } from "react";
+import cloneDeep from "lodash.clonedeep";
+import Fuse from "fuse.js";
+
+import { useKeyboard, useBlur } from "./KeyboardContext";
+
+import { getGroupItems, groupsFromIds } from "../helpers/group";
+
+import shortcuts from "../shortcuts";
+import { Group, GroupItem } from "../types/Group";
+
+export type GroupSelectMode = "single" | "multiple" | "range";
+export type GroupSelectModeChangeEventHandler = (
+  selectMode: GroupSelectMode
+) => void;
+export type GroupOpenEventHandler = (groupId: string) => void;
+export type GroupCloseEventHandler = () => void;
+export type GroupsChangeEventHandler = (newGroups: Group[]) => void;
+export type SubgroupsChangeEventHandler = (
+  items: GroupItem[],
+  groupId: string
+) => void;
+export type GroupSelectEventHandler = (groupId: string) => void;
+export type GroupsSelectEventHandler = (groupIds: string[]) => void;
+export type GroupClearSelectionEventHandler = () => void;
+export type GroupFilterChangeEventHandler = (filter: string) => void;
+export type GroupClearFilterEventHandler = () => void;
+
+type GroupContextValue = {
+  groups: Group[];
+  activeGroups: Group[] | GroupItem[];
+  openGroupId: string | undefined;
+  openGroupItems: GroupItem[];
+  filter: string | undefined;
+  filteredGroupItems: GroupItem[];
+  selectedGroupIds: string[];
+  selectMode: GroupSelectMode;
+  onSelectModeChange: GroupSelectModeChangeEventHandler;
+  onGroupOpen: GroupOpenEventHandler;
+  onGroupClose: GroupCloseEventHandler;
+  onGroupsChange: GroupsChangeEventHandler;
+  onSubgroupChange: SubgroupsChangeEventHandler;
+  onGroupSelect: GroupSelectEventHandler;
+  onClearSelection: GroupClearSelectionEventHandler;
+  onFilterChange: GroupFilterChangeEventHandler;
+  onFilterClear: GroupClearFilterEventHandler;
+};
+
+const GroupContext =
+  React.createContext<GroupContextValue | undefined>(undefined);
+
+type GroupProviderProps = {
+  groups: Group[];
+  itemNames: Record<string, string>;
+  onGroupsChange: GroupsChangeEventHandler;
+  onGroupsSelect: GroupsSelectEventHandler;
+  disabled: boolean;
+  children: React.ReactNode;
+};
+
+export function GroupProvider({
+  groups,
+  itemNames,
+  onGroupsChange,
+  onGroupsSelect,
+  disabled,
+  children,
+}: GroupProviderProps) {
+  const [selectedGroupIds, setSelectedGroupIds] = useState<string[]>([]);
+  const [selectMode, setSelectMode] = useState<GroupSelectMode>("single");
+
+  /**
+   * Group Open
+   */
+  const [openGroupId, setOpenGroupId] = useState<string>();
+  const [openGroupItems, setOpenGroupItems] = useState<GroupItem[]>([]);
+  useEffect(() => {
+    if (openGroupId) {
+      const openGroups = groupsFromIds([openGroupId], groups);
+      if (openGroups.length === 1) {
+        const openGroup = openGroups[0];
+        setOpenGroupItems(getGroupItems(openGroup));
+      } else {
+        // Close group if we can't find it
+        // This can happen if it was deleted or all it's items were deleted
+        setOpenGroupItems([]);
+        setOpenGroupId(undefined);
+      }
+    } else {
+      setOpenGroupItems([]);
+    }
+  }, [openGroupId, groups]);
+
+  function handleGroupOpen(groupId: string) {
+    setSelectedGroupIds([]);
+    setOpenGroupId(groupId);
+  }
+
+  function handleGroupClose() {
+    setSelectedGroupIds([]);
+    setOpenGroupId(undefined);
+  }
+
+  /**
+   * Search
+   */
+  const [filter, setFilter] = useState<string>();
+  const [filteredGroupItems, setFilteredGroupItems] = useState<GroupItem[]>([]);
+  const [fuse, setFuse] = useState<Fuse<GroupItem & { name: string }>>();
+  // Update search index when items change
+  useEffect(() => {
+    let items = [];
+    for (let group of groups) {
+      const itemsToAdd = getGroupItems(group);
+      const namedItems = itemsToAdd.map((item) => ({
+        ...item,
+        name: itemNames[item.id],
+      }));
+      items.push(...namedItems);
+    }
+    setFuse(new Fuse(items, { keys: ["name"] }));
+  }, [groups, itemNames]);
+
+  // Perform search when search changes
+  useEffect(() => {
+    if (filter && fuse) {
+      const query = fuse.search(filter);
+      setFilteredGroupItems(query.map((result) => result.item));
+      setOpenGroupId(undefined);
+    } else {
+      setFilteredGroupItems([]);
+    }
+  }, [filter, fuse]);
+
+  /**
+   * Handlers
+   */
+
+  const activeGroups = openGroupId
+    ? openGroupItems
+    : filter
+    ? filteredGroupItems
+    : groups;
+
+  function handleGroupsChange(newGroups: Group[]) {
+    onGroupsChange(newGroups);
+  }
+
+  function handleSubgroupChange(items: GroupItem[], groupId: string) {
+    const groupIndex = groups.findIndex((group) => group.id === groupId);
+    let updatedGroups = cloneDeep(groups);
+    const group = updatedGroups[groupIndex];
+    if (group.type === "group") {
+      updatedGroups[groupIndex] = {
+        ...group,
+        items,
+      };
+      onGroupsChange(updatedGroups);
+    } else {
+      throw new Error(`Group ${group} not a subgroup`);
+    }
+  }
+
+  function handleGroupSelect(groupId: string) {
+    let groupIds: string[] = [];
+    switch (selectMode) {
+      case "single":
+        groupIds = [groupId];
+        break;
+      case "multiple":
+        if (selectedGroupIds.includes(groupId)) {
+          groupIds = selectedGroupIds.filter((id) => id !== groupId);
+        } else {
+          groupIds = [...selectedGroupIds, groupId];
+        }
+        break;
+      case "range":
+        if (selectedGroupIds.length > 0) {
+          const currentIndex = activeGroups.findIndex((g) => g.id === groupId);
+          const lastIndex = activeGroups.findIndex(
+            (g) => g.id === selectedGroupIds[selectedGroupIds.length - 1]
+          );
+          let idsToAdd: string[] = [];
+          let idsToRemove: string[] = [];
+          const direction = currentIndex > lastIndex ? 1 : -1;
+          for (
+            let i = lastIndex + direction;
+            direction < 0 ? i >= currentIndex : i <= currentIndex;
+            i += direction
+          ) {
+            const id = activeGroups[i].id;
+            if (selectedGroupIds.includes(id)) {
+              idsToRemove.push(id);
+            } else {
+              idsToAdd.push(id);
+            }
+          }
+          groupIds = [...selectedGroupIds, ...idsToAdd].filter(
+            (id) => !idsToRemove.includes(id)
+          );
+        } else {
+          groupIds = [groupId];
+        }
+        break;
+      default:
+        groupIds = [];
+    }
+    setSelectedGroupIds(groupIds);
+    onGroupsSelect(groupIds);
+  }
+
+  function handleClearSelection() {
+    setSelectedGroupIds([]);
+    onGroupsSelect([]);
+  }
+
+  /**
+   * Shortcuts
+   */
+  function handleKeyDown(event: KeyboardEvent) {
+    if (disabled) {
+      return;
+    }
+    if (shortcuts.selectRange(event)) {
+      setSelectMode("range");
+    }
+    if (shortcuts.selectMultiple(event)) {
+      setSelectMode("multiple");
+    }
+  }
+
+  function handleKeyUp(event: KeyboardEvent) {
+    if (disabled) {
+      return;
+    }
+    if (shortcuts.selectRange(event) && selectMode === "range") {
+      setSelectMode("single");
+    }
+    if (shortcuts.selectMultiple(event) && selectMode === "multiple") {
+      setSelectMode("single");
+    }
+  }
+
+  useKeyboard(handleKeyDown, handleKeyUp);
+
+  // Set select mode to single when cmd+tabing
+  function handleBlur() {
+    setSelectMode("single");
+  }
+
+  useBlur(handleBlur);
+
+  const value = {
+    groups,
+    activeGroups,
+    openGroupId,
+    openGroupItems,
+    filter,
+    filteredGroupItems,
+    selectedGroupIds,
+    selectMode,
+    onSelectModeChange: setSelectMode,
+    onGroupOpen: handleGroupOpen,
+    onGroupClose: handleGroupClose,
+    onGroupsChange: handleGroupsChange,
+    onSubgroupChange: handleSubgroupChange,
+    onGroupSelect: handleGroupSelect,
+    onClearSelection: handleClearSelection,
+    onFilterChange: setFilter,
+    onFilterClear: () => setFilter(undefined),
+  };
+
+  return (
+    <GroupContext.Provider value={value}>{children}</GroupContext.Provider>
+  );
+}
+
+GroupProvider.defaultProps = {
+  groups: [],
+  itemNames: {},
+  onGroupsChange: () => {},
+  onGroupsSelect: () => {},
+  disabled: false,
+};
+
+export function useGroup() {
+  const context = useContext(GroupContext);
+  if (context === undefined) {
+    throw new Error("useGroup must be used within a GroupProvider");
+  }
+  return context;
+}
+
+export default GroupContext;
diff --git a/src/contexts/KeyboardContext.js b/src/contexts/KeyboardContext.tsx
similarity index 77%
rename from src/contexts/KeyboardContext.js
rename to src/contexts/KeyboardContext.tsx
index 592e60f..96d91c8 100644
--- a/src/contexts/KeyboardContext.js
+++ b/src/contexts/KeyboardContext.tsx
@@ -1,12 +1,15 @@
 import React, { useEffect, useState, useContext } from "react";
 import { EventEmitter } from "events";
 
-const KeyboardContext = React.createContext({ keyEmitter: new EventEmitter() });
+const keyboardEmitter = new EventEmitter();
+keyboardEmitter.setMaxListeners(100);
 
-export function KeyboardProvider({ children }) {
-  const [keyEmitter] = useState(new EventEmitter());
+const KeyboardContext = React.createContext({ keyEmitter: keyboardEmitter });
+
+export function KeyboardProvider({ children }: { children: React.ReactNode }) {
+  const [keyEmitter] = useState(keyboardEmitter);
   useEffect(() => {
-    function handleKeyDown(event) {
+    function handleKeyDown(event: Event) {
       // Ignore text input
       if (
         event.target instanceof HTMLInputElement ||
@@ -17,7 +20,7 @@ export function KeyboardProvider({ children }) {
       keyEmitter.emit("keyDown", event);
     }
 
-    function handleKeyUp(event) {
+    function handleKeyUp(event: Event) {
       // Ignore text input
       if (
         event.target instanceof HTMLInputElement ||
@@ -45,11 +48,10 @@ export function KeyboardProvider({ children }) {
   );
 }
 
-/**
- * @param {KeyboardEvent} onKeyDown
- * @param {KeyboardEvent} onKeyUp
- */
-export function useKeyboard(onKeyDown, onKeyUp) {
+export function useKeyboard(
+  onKeyDown?: (event: KeyboardEvent) => void,
+  onKeyUp?: (event: KeyboardEvent) => void
+) {
   const context = useContext(KeyboardContext);
   if (context === undefined) {
     throw new Error("useKeyboard must be used within a KeyboardProvider");
@@ -78,7 +80,7 @@ export function useKeyboard(onKeyDown, onKeyUp) {
  * Handler to handle a blur event. Useful when using a shortcut that uses the Alt or Cmd
  * @param {FocusEvent} onBlur
  */
-export function useBlur(onBlur) {
+export function useBlur(onBlur: EventListenerOrEventListenerObject) {
   useEffect(() => {
     if (onBlur) {
       window.addEventListener("blur", onBlur);
diff --git a/src/contexts/MapDataContext.js b/src/contexts/MapDataContext.js
deleted file mode 100644
index f33cf98..0000000
--- a/src/contexts/MapDataContext.js
+++ /dev/null
@@ -1,190 +0,0 @@
-import React, {
-  useEffect,
-  useState,
-  useContext,
-  useCallback,
-  useMemo,
-} from "react";
-import { useLiveQuery } from "dexie-react-hooks";
-
-import { useDatabase } from "./DatabaseContext";
-
-import { removeGroupsItems } from "../helpers/group";
-
-const MapDataContext = React.createContext();
-
-const defaultMapState = {
-  tokens: {},
-  drawShapes: {},
-  fogShapes: {},
-  // Flags to determine what other people can edit
-  editFlags: ["drawing", "tokens", "notes"],
-  notes: {},
-};
-
-export function MapDataProvider({ children }) {
-  const { database } = useDatabase();
-
-  const mapsQuery = useLiveQuery(
-    () => database?.table("maps").toArray(),
-    [database]
-  );
-  const mapStatesQuery = useLiveQuery(
-    () => database?.table("states").toArray(),
-    [database]
-  );
-
-  const maps = useMemo(() => mapsQuery || [], [mapsQuery]);
-  const mapStates = useMemo(() => mapStatesQuery || [], [mapStatesQuery]);
-  const mapsLoading = useMemo(
-    () => !mapsQuery || !mapStatesQuery,
-    [mapsQuery, mapStatesQuery]
-  );
-
-  const mapGroupQuery = useLiveQuery(
-    () => database?.table("groups").get("maps"),
-    [database]
-  );
-
-  const [mapGroups, setMapGroups] = useState([]);
-  useEffect(() => {
-    async function updateMapGroups() {
-      const group = await database.table("groups").get("maps");
-      setMapGroups(group.items);
-    }
-    if (database && mapGroupQuery) {
-      updateMapGroups();
-    }
-  }, [mapGroupQuery, database]);
-
-  const getMap = useCallback(
-    async (mapId) => {
-      let map = await database.table("maps").get(mapId);
-      return map;
-    },
-    [database]
-  );
-
-  const getMapState = useCallback(
-    async (mapId) => {
-      let mapState = await database.table("states").get(mapId);
-      return mapState;
-    },
-    [database]
-  );
-
-  /**
-   * Adds a map to the database, also adds an assosiated state and group for that map
-   * @param {Object} map map to add
-   */
-  const addMap = useCallback(
-    async (map) => {
-      // Just update map database as react state will be updated with an Observable
-      const state = { ...defaultMapState, mapId: map.id };
-      await database.table("maps").add(map);
-      await database.table("states").add(state);
-      const group = await database.table("groups").get("maps");
-      await database.table("groups").update("maps", {
-        items: [{ id: map.id, type: "item" }, ...group.items],
-      });
-    },
-    [database]
-  );
-
-  const removeMaps = useCallback(
-    async (ids) => {
-      const maps = await database.table("maps").bulkGet(ids);
-      // Remove assets linked with maps
-      let assetIds = [];
-      for (let map of maps) {
-        if (map.type === "file") {
-          assetIds.push(map.file);
-          assetIds.push(map.thumbnail);
-          for (let res of Object.values(map.resolutions)) {
-            assetIds.push(res);
-          }
-        }
-      }
-
-      const group = await database.table("groups").get("maps");
-      let items = removeGroupsItems(group.items, ids);
-      await database.table("groups").update("maps", { items });
-
-      await database.table("maps").bulkDelete(ids);
-      await database.table("states").bulkDelete(ids);
-      await database.table("assets").bulkDelete(assetIds);
-    },
-    [database]
-  );
-
-  const resetMap = useCallback(
-    async (id) => {
-      const state = { ...defaultMapState, mapId: id };
-      await database.table("states").put(state);
-      return state;
-    },
-    [database]
-  );
-
-  const updateMap = useCallback(
-    async (id, update) => {
-      await database.table("maps").update(id, update);
-    },
-    [database]
-  );
-
-  const updateMapState = useCallback(
-    async (id, update) => {
-      await database.table("states").update(id, update);
-    },
-    [database]
-  );
-
-  const updateMapGroups = useCallback(
-    async (groups) => {
-      // Update group state immediately to avoid animation delay
-      setMapGroups(groups);
-      await database.table("groups").update("maps", { items: groups });
-    },
-    [database]
-  );
-
-  const [mapsById, setMapsById] = useState({});
-  useEffect(() => {
-    setMapsById(
-      maps.reduce((obj, map) => {
-        obj[map.id] = map;
-        return obj;
-      }, {})
-    );
-  }, [maps]);
-
-  const value = {
-    maps,
-    mapStates,
-    mapGroups,
-    addMap,
-    removeMaps,
-    resetMap,
-    updateMap,
-    updateMapState,
-    getMap,
-    mapsLoading,
-    getMapState,
-    updateMapGroups,
-    mapsById,
-  };
-  return (
-    <MapDataContext.Provider value={value}>{children}</MapDataContext.Provider>
-  );
-}
-
-export function useMapData() {
-  const context = useContext(MapDataContext);
-  if (context === undefined) {
-    throw new Error("useMapData must be used within a MapDataProvider");
-  }
-  return context;
-}
-
-export default MapDataContext;
diff --git a/src/contexts/MapDataContext.tsx b/src/contexts/MapDataContext.tsx
new file mode 100644
index 0000000..a29f903
--- /dev/null
+++ b/src/contexts/MapDataContext.tsx
@@ -0,0 +1,229 @@
+import React, {
+  useEffect,
+  useState,
+  useContext,
+  useCallback,
+  useMemo,
+} from "react";
+import { useLiveQuery } from "dexie-react-hooks";
+
+import { useDatabase } from "./DatabaseContext";
+
+import { Map } from "../types/Map";
+import { MapState } from "../types/MapState";
+
+import { removeGroupsItems } from "../helpers/group";
+
+import { Group } from "../types/Group";
+
+export type AddMapEventHandler = (map: Map) => Promise<void>;
+export type RemoveMapsEventHandler = (ids: string[]) => Promise<void>;
+export type ResetMapEventHandler = (id: string) => Promise<MapState>;
+export type UpdateMapEventHanlder = (
+  id: string,
+  update: Partial<Map>
+) => Promise<void>;
+export type UpdateMapStateEventHandler = (
+  id: string,
+  update: Partial<MapState>
+) => Promise<void>;
+export type GetMapStateEventHandler = (
+  id: string
+) => Promise<MapState | undefined>;
+export type GetMapEventHandler = (id: string) => Promise<Map | undefined>;
+export type UpdateMapGroupsEventHandler = (groups: Group[]) => Promise<void>;
+
+type MapDataContextValue = {
+  maps: Array<Map>;
+  mapStates: MapState[];
+  /** Adds a map to the database, also adds an assosiated state and group for that map */
+  addMap: AddMapEventHandler;
+  removeMaps: RemoveMapsEventHandler;
+  resetMap: ResetMapEventHandler;
+  updateMap: UpdateMapEventHanlder;
+  updateMapState: UpdateMapStateEventHandler;
+  getMapState: GetMapStateEventHandler;
+  getMap: GetMapEventHandler;
+  mapsLoading: boolean;
+  updateMapGroups: UpdateMapGroupsEventHandler;
+  mapsById: Record<string, Map>;
+  mapGroups: Group[];
+};
+
+const MapDataContext =
+  React.createContext<MapDataContextValue | undefined>(undefined);
+
+const defaultMapState: Omit<MapState, "mapId"> = {
+  tokens: {},
+  drawings: {},
+  fogs: {},
+  editFlags: ["drawing", "tokens", "notes"],
+  notes: {},
+};
+
+export function MapDataProvider({ children }: { children: React.ReactNode }) {
+  const { database } = useDatabase();
+
+  const mapsQuery = useLiveQuery<Map[]>(
+    () => database?.table("maps").toArray() || [],
+    [database]
+  );
+  const mapStatesQuery = useLiveQuery<MapState[]>(
+    () => database?.table("states").toArray() || [],
+    [database]
+  );
+
+  const maps = useMemo(() => mapsQuery || [], [mapsQuery]);
+  const mapStates = useMemo(() => mapStatesQuery || [], [mapStatesQuery]);
+  const mapsLoading = useMemo(
+    () => !mapsQuery || !mapStatesQuery,
+    [mapsQuery, mapStatesQuery]
+  );
+
+  const mapGroupQuery = useLiveQuery(
+    () => database?.table("groups").get("maps"),
+    [database]
+  );
+
+  const [mapGroups, setMapGroups] = useState<Group[]>([]);
+  useEffect(() => {
+    async function updateMapGroups() {
+      const group = await database?.table("groups").get("maps");
+      setMapGroups(group.items);
+    }
+    if (database && mapGroupQuery) {
+      updateMapGroups();
+    }
+  }, [mapGroupQuery, database]);
+
+  const getMap = useCallback<GetMapEventHandler>(
+    async (mapId) => {
+      let map = await database?.table("maps").get(mapId);
+      return map;
+    },
+    [database]
+  );
+
+  const getMapState = useCallback<GetMapStateEventHandler>(
+    async (mapId) => {
+      let mapState = await database?.table("states").get(mapId);
+      return mapState;
+    },
+    [database]
+  );
+
+  const addMap = useCallback<AddMapEventHandler>(
+    async (map) => {
+      if (database) {
+        // Just update map database as react state will be updated with an Observable
+        const state = { ...defaultMapState, mapId: map.id };
+        await database.table("maps").add(map);
+        await database.table("states").add(state);
+        const group = await database.table("groups").get("maps");
+        await database.table("groups").update("maps", {
+          items: [{ id: map.id, type: "item" }, ...group.items],
+        });
+      }
+    },
+    [database]
+  );
+
+  const removeMaps = useCallback<RemoveMapsEventHandler>(
+    async (ids) => {
+      if (database) {
+        const maps = await database.table("maps").bulkGet(ids);
+        // Remove assets linked with maps
+        let assetIds = [];
+        for (let map of maps) {
+          if (map.type === "file") {
+            assetIds.push(map.file);
+            assetIds.push(map.thumbnail);
+            for (let res of Object.values(map.resolutions)) {
+              assetIds.push(res);
+            }
+          }
+        }
+
+        const group = await database.table("groups").get("maps");
+        let items = removeGroupsItems(group.items, ids);
+        await database.table("groups").update("maps", { items });
+
+        await database.table("maps").bulkDelete(ids);
+        await database.table("states").bulkDelete(ids);
+        await database.table("assets").bulkDelete(assetIds);
+      }
+    },
+    [database]
+  );
+
+  const resetMap = useCallback<ResetMapEventHandler>(
+    async (id) => {
+      const state: MapState = { ...defaultMapState, mapId: id };
+      await database?.table("states").put(state);
+      return state;
+    },
+    [database]
+  );
+
+  const updateMap = useCallback<UpdateMapEventHanlder>(
+    async (id, update) => {
+      await database?.table("maps").update(id, update);
+    },
+    [database]
+  );
+
+  const updateMapState = useCallback<UpdateMapStateEventHandler>(
+    async (id, update) => {
+      await database?.table("states").update(id, update);
+    },
+    [database]
+  );
+
+  const updateMapGroups = useCallback<UpdateMapGroupsEventHandler>(
+    async (groups) => {
+      // Update group state immediately to avoid animation delay
+      setMapGroups(groups);
+      await database?.table("groups").update("maps", { items: groups });
+    },
+    [database]
+  );
+
+  const [mapsById, setMapsById] = useState<Record<string, Map>>({});
+  useEffect(() => {
+    setMapsById(
+      maps.reduce((obj: Record<string, Map>, map) => {
+        obj[map.id] = map;
+        return obj;
+      }, {})
+    );
+  }, [maps]);
+
+  const value = {
+    maps,
+    mapStates,
+    mapGroups,
+    addMap,
+    removeMaps,
+    resetMap,
+    updateMap,
+    updateMapState,
+    getMap,
+    mapsLoading,
+    getMapState,
+    updateMapGroups,
+    mapsById,
+  };
+  return (
+    <MapDataContext.Provider value={value}>{children}</MapDataContext.Provider>
+  );
+}
+
+export function useMapData() {
+  const context = useContext(MapDataContext);
+  if (context === undefined) {
+    throw new Error("useMapData must be used within a MapDataProvider");
+  }
+  return context;
+}
+
+export default MapDataContext;
diff --git a/src/contexts/MapInteractionContext.js b/src/contexts/MapInteractionContext.tsx
similarity index 70%
rename from src/contexts/MapInteractionContext.js
rename to src/contexts/MapInteractionContext.tsx
index 1132999..7362c86 100644
--- a/src/contexts/MapInteractionContext.js
+++ b/src/contexts/MapInteractionContext.tsx
@@ -1,16 +1,45 @@
 import React, { useContext } from "react";
+import { EventEmitter } from "stream";
 import useDebounce from "../hooks/useDebounce";
 
-export const StageScaleContext = React.createContext();
-export const DebouncedStageScaleContext = React.createContext();
-export const StageWidthContext = React.createContext();
-export const StageHeightContext = React.createContext();
-export const SetPreventMapInteractionContext = React.createContext();
-export const MapWidthContext = React.createContext();
-export const MapHeightContext = React.createContext();
-export const InteractionEmitterContext = React.createContext();
+type MapInteraction = {
+  stageScale: number;
+  stageWidth: number;
+  stageHeight: number;
+  setPreventMapInteraction: React.Dispatch<React.SetStateAction<boolean>>;
+  mapWidth: number;
+  mapHeight: number;
+  interactionEmitter: EventEmitter | null;
+};
 
-export function MapInteractionProvider({ value, children }) {
+export const StageScaleContext =
+  React.createContext<MapInteraction["stageScale"] | undefined>(undefined);
+export const DebouncedStageScaleContext =
+  React.createContext<MapInteraction["stageScale"] | undefined>(undefined);
+export const StageWidthContext =
+  React.createContext<MapInteraction["stageWidth"] | undefined>(undefined);
+export const StageHeightContext =
+  React.createContext<MapInteraction["stageHeight"] | undefined>(undefined);
+export const SetPreventMapInteractionContext =
+  React.createContext<MapInteraction["setPreventMapInteraction"] | undefined>(
+    undefined
+  );
+export const MapWidthContext =
+  React.createContext<MapInteraction["mapWidth"] | undefined>(undefined);
+export const MapHeightContext =
+  React.createContext<MapInteraction["mapHeight"] | undefined>(undefined);
+export const InteractionEmitterContext =
+  React.createContext<MapInteraction["interactionEmitter"] | undefined>(
+    undefined
+  );
+
+export function MapInteractionProvider({
+  value,
+  children,
+}: {
+  value: MapInteraction;
+  children: React.ReactNode;
+}) {
   const {
     stageScale,
     stageWidth,
diff --git a/src/contexts/MapLoadingContext.js b/src/contexts/MapLoadingContext.tsx
similarity index 70%
rename from src/contexts/MapLoadingContext.js
rename to src/contexts/MapLoadingContext.tsx
index 3c12990..eeca152 100644
--- a/src/contexts/MapLoadingContext.js
+++ b/src/contexts/MapLoadingContext.tsx
@@ -1,13 +1,34 @@
 import React, { useState, useRef, useContext, useCallback } from "react";
 
-const MapLoadingContext = React.createContext();
+type MapLoadingProgress = {
+  count: number;
+  total: number;
+};
 
-export function MapLoadingProvider({ children }) {
+type MapLoadingProgressUpdate = MapLoadingProgress & {
+  id: string;
+};
+
+type MapLoadingContextValue = {
+  isLoading: boolean;
+  assetLoadStart: (id: string) => void;
+  assetProgressUpdate: (update: MapLoadingProgressUpdate) => void;
+  loadingProgressRef: React.MutableRefObject<number>;
+};
+
+const MapLoadingContext =
+  React.createContext<MapLoadingContextValue | undefined>(undefined);
+
+export function MapLoadingProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const [isLoading, setIsLoading] = useState(false);
   // Mapping from asset id to the count and total number of pieces loaded
-  const assetProgressRef = useRef({});
+  const assetProgressRef = useRef<Record<string, MapLoadingProgress>>({});
   // Loading progress of all assets between 0 and 1
-  const loadingProgressRef = useRef(null);
+  const loadingProgressRef = useRef<number>(0);
 
   const assetLoadStart = useCallback((id) => {
     setIsLoading(true);
diff --git a/src/contexts/MapStageContext.js b/src/contexts/MapStageContext.tsx
similarity index 66%
rename from src/contexts/MapStageContext.js
rename to src/contexts/MapStageContext.tsx
index c5c3952..468b6a6 100644
--- a/src/contexts/MapStageContext.js
+++ b/src/contexts/MapStageContext.tsx
@@ -1,8 +1,9 @@
 import React, { useContext } from "react";
+import Konva from "konva";
 
-const MapStageContext = React.createContext({
-  mapStageRef: { current: null },
-});
+export type MapStage = React.MutableRefObject<Konva.Stage | null>;
+
+const MapStageContext = React.createContext<MapStage | undefined>(undefined);
 export const MapStageProvider = MapStageContext.Provider;
 
 export function useMapStage() {
diff --git a/src/contexts/PartyContext.js b/src/contexts/PartyContext.tsx
similarity index 63%
rename from src/contexts/PartyContext.js
rename to src/contexts/PartyContext.tsx
index 905112e..e8ffc9d 100644
--- a/src/contexts/PartyContext.js
+++ b/src/contexts/PartyContext.tsx
@@ -1,12 +1,20 @@
 import React, { useState, useEffect, useContext } from "react";
+import Session from "../network/Session";
 
-const PartyContext = React.createContext();
+import { PartyState } from "../types/PartyState";
 
-export function PartyProvider({ session, children }) {
-  const [partyState, setPartyState] = useState({});
+const PartyContext = React.createContext<PartyState | undefined>(undefined);
+
+type PartyProviderProps = {
+  session: Session;
+  children: React.ReactNode;
+};
+
+export function PartyProvider({ session, children }: PartyProviderProps) {
+  const [partyState, setPartyState] = useState<PartyState>({});
 
   useEffect(() => {
-    function handleSocketPartyState(partyState) {
+    function handleSocketPartyState(partyState: PartyState) {
       if (partyState) {
         const { [session.id]: _, ...otherMembersState } = partyState;
         setPartyState(otherMembersState);
diff --git a/src/contexts/PlayerContext.js b/src/contexts/PlayerContext.tsx
similarity index 77%
rename from src/contexts/PlayerContext.js
rename to src/contexts/PlayerContext.tsx
index ca90483..ef19607 100644
--- a/src/contexts/PlayerContext.js
+++ b/src/contexts/PlayerContext.tsx
@@ -3,23 +3,32 @@ import React, { useEffect, useContext } from "react";
 import { useDatabase } from "./DatabaseContext";
 import { useUserId } from "./UserIdContext";
 
-import { getRandomMonster } from "../helpers/monsters";
+import useNetworkedState, {
+  SetNetworkedState,
+} from "../hooks/useNetworkedState";
+import Session, { SessionStatus } from "../network/Session";
+import { PlayerState } from "../types/PlayerState";
 
-import useNetworkedState from "../hooks/useNetworkedState";
+export const PlayerStateContext =
+  React.createContext<PlayerState | undefined>(undefined);
+export const PlayerUpdaterContext =
+  React.createContext<SetNetworkedState<PlayerState> | undefined>(undefined);
 
-export const PlayerStateContext = React.createContext();
-export const PlayerUpdaterContext = React.createContext(() => {});
+type PlayerProviderProps = {
+  session: Session;
+  children: React.ReactNode;
+};
 
-export function PlayerProvider({ session, children }) {
+export function PlayerProvider({ session, children }: PlayerProviderProps) {
   const userId = useUserId();
   const { database, databaseStatus } = useDatabase();
 
-  const [playerState, setPlayerState] = useNetworkedState(
+  const [playerState, setPlayerState] = useNetworkedState<PlayerState>(
     {
       nickname: "",
-      timer: null,
+      timer: undefined,
       dice: { share: false, rolls: [] },
-      sessionId: null,
+      sessionId: undefined,
       userId,
     },
     session,
@@ -33,16 +42,12 @@ export function PlayerProvider({ session, children }) {
       return;
     }
     async function loadNickname() {
-      const storedNickname = await database.table("user").get("nickname");
+      const storedNickname = await database?.table("user").get("nickname");
       if (storedNickname !== undefined) {
         setPlayerState((prevState) => ({
           ...prevState,
           nickname: storedNickname.value,
         }));
-      } else {
-        const name = getRandomMonster();
-        setPlayerState((prevState) => ({ ...prevState, nickname: name }));
-        database.table("user").add({ key: "nickname", value: name });
       }
     }
 
@@ -92,7 +97,7 @@ export function PlayerProvider({ session, children }) {
       updateSessionId();
     }
 
-    function handleSocketStatus(status) {
+    function handleSocketStatus(status: SessionStatus) {
       if (status === "joined") {
         updateSessionId();
       }
diff --git a/src/contexts/SettingsContext.js b/src/contexts/SettingsContext.tsx
similarity index 60%
rename from src/contexts/SettingsContext.js
rename to src/contexts/SettingsContext.tsx
index c9df1e7..a76dbe5 100644
--- a/src/contexts/SettingsContext.js
+++ b/src/contexts/SettingsContext.tsx
@@ -2,15 +2,20 @@ import React, { useState, useEffect, useContext } from "react";
 
 import { getSettings } from "../settings";
 
-const SettingsContext = React.createContext({
-  settings: {},
-  setSettings: () => {},
-});
+import { Settings } from "../types/Settings";
+
+type SettingsContextValue = {
+  settings: Settings;
+  setSettings: React.Dispatch<React.SetStateAction<Settings>>;
+};
+
+const SettingsContext =
+  React.createContext<SettingsContextValue | undefined>(undefined);
 
 const settingsProvider = getSettings();
 
-export function SettingsProvider({ children }) {
-  const [settings, setSettings] = useState(settingsProvider.getAll());
+export function SettingsProvider({ children }: { children: React.ReactNode }) {
+  const [settings, setSettings] = useState<Settings>(settingsProvider.getAll());
 
   useEffect(() => {
     settingsProvider.setAll(settings);
diff --git a/src/contexts/TileDragContext.js b/src/contexts/TileDragContext.tsx
similarity index 72%
rename from src/contexts/TileDragContext.js
rename to src/contexts/TileDragContext.tsx
index 3a0f52f..e344833 100644
--- a/src/contexts/TileDragContext.js
+++ b/src/contexts/TileDragContext.tsx
@@ -6,19 +6,27 @@ import {
   useSensor,
   useSensors,
   closestCenter,
+  RectEntry,
 } from "@dnd-kit/core";
 
-import DragContext from "./DragContext";
+import DragContext, { CustomDragEndEvent } from "./DragContext";
+import { DragStartEvent, DragOverEvent, ViewRect } from "@dnd-kit/core";
+import { DragCancelEvent } from "@dnd-kit/core/dist/types";
 
 import { useGroup } from "./GroupContext";
 
 import { moveGroupsInto, moveGroups, ungroup } from "../helpers/group";
+import Vector2 from "../helpers/Vector2";
 
 import usePreventSelect from "../hooks/usePreventSelect";
+import { GroupItem } from "../types/Group";
 
-const TileDragIdContext = React.createContext();
-const TileOverGroupIdContext = React.createContext();
-const TileDragCursorContext = React.createContext();
+const TileDragIdContext =
+  React.createContext<string | undefined | null>(undefined);
+const TileOverGroupIdContext =
+  React.createContext<string | undefined | null>(undefined);
+const TileDragCursorContext =
+  React.createContext<string | undefined | null>(undefined);
 
 export const BASE_SORTABLE_ID = "__base__";
 export const GROUP_SORTABLE_ID = "__group__";
@@ -27,7 +35,7 @@ export const UNGROUP_ID = "__ungroup__";
 export const ADD_TO_MAP_ID = "__add__";
 
 // Custom rectIntersect that takes a point
-function rectIntersection(rects, point) {
+function rectIntersection(rects: RectEntry[], point: Vector2) {
   for (let rect of rects) {
     const [id, bounds] = rect;
     if (
@@ -44,20 +52,30 @@ function rectIntersection(rects, point) {
   return null;
 }
 
+type TileDragProviderProps = {
+  onDragAdd?: (selectedGroupIds: string[], rect: DOMRect) => void;
+  onDragStart?: (event: DragStartEvent) => void;
+  onDragEnd?: (event: CustomDragEndEvent) => void;
+  onDragCancel?: (event: DragCancelEvent) => void;
+  children?: React.ReactNode;
+};
+
 export function TileDragProvider({
   onDragAdd,
   onDragStart,
   onDragEnd,
   onDragCancel,
   children,
-}) {
+}: TileDragProviderProps) {
   const {
     groups,
     activeGroups,
     openGroupId,
     selectedGroupIds,
     onGroupsChange,
+    onSubgroupChange,
     onGroupSelect,
+    onClearSelection,
     filter,
   } = useGroup();
 
@@ -71,23 +89,23 @@ export function TileDragProvider({
 
   const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
 
-  const [dragId, setDragId] = useState(null);
-  const [overId, setOverId] = useState(null);
+  const [dragId, setDragId] = useState<string | null>(null);
+  const [overId, setOverId] = useState<string | null>(null);
   const [dragCursor, setDragCursor] = useState("pointer");
 
   const [preventSelect, resumeSelect] = usePreventSelect();
 
-  const [overGroupId, setOverGroupId] = useState(null);
+  const [overGroupId, setOverGroupId] = useState<string | null>(null);
   useEffect(() => {
     setOverGroupId(
       (overId && overId.startsWith(GROUP_ID_PREFIX) && overId.slice(9)) || null
     );
   }, [overId]);
 
-  function handleDragStart(event) {
-    const { active, over } = event;
+  function handleDragStart(event: DragStartEvent) {
+    const { active } = event;
     setDragId(active.id);
-    setOverId(over?.id || null);
+    setOverId(null);
     if (!selectedGroupIds.includes(active.id)) {
       onGroupSelect(active.id);
     }
@@ -98,7 +116,7 @@ export function TileDragProvider({
     preventSelect();
   }
 
-  function handleDragOver(event) {
+  function handleDragOver(event: DragOverEvent) {
     const { over } = event;
 
     setOverId(over?.id || null);
@@ -116,7 +134,7 @@ export function TileDragProvider({
     }
   }
 
-  function handleDragEnd(event) {
+  function handleDragEnd(event: CustomDragEndEvent) {
     const { active, over, overlayNodeClientRect } = event;
 
     setDragId(null);
@@ -130,23 +148,29 @@ export function TileDragProvider({
       selectedIndices = selectedIndices.sort((a, b) => a - b);
 
       if (over.id.startsWith(GROUP_ID_PREFIX)) {
-        onGroupSelect();
+        onClearSelection();
         // Handle tile group
         const overId = over.id.slice(9);
         if (overId !== active.id) {
           const overGroupIndex = activeGroups.findIndex(
             (group) => group.id === overId
           );
-          onGroupsChange(
-            moveGroupsInto(activeGroups, overGroupIndex, selectedIndices),
-            openGroupId
+          const newGroups = moveGroupsInto(
+            activeGroups,
+            overGroupIndex,
+            selectedIndices
           );
+          if (!openGroupId) {
+            onGroupsChange(newGroups);
+          }
         }
       } else if (over.id === UNGROUP_ID) {
-        onGroupSelect();
-        // Handle tile ungroup
-        const newGroups = ungroup(groups, openGroupId, selectedIndices);
-        onGroupsChange(newGroups);
+        if (openGroupId) {
+          onClearSelection();
+          // Handle tile ungroup
+          const newGroups = ungroup(groups, openGroupId, selectedIndices);
+          onGroupsChange(newGroups);
+        }
       } else if (over.id === ADD_TO_MAP_ID) {
         onDragAdd &&
           overlayNodeClientRect &&
@@ -156,10 +180,16 @@ export function TileDragProvider({
         const overGroupIndex = activeGroups.findIndex(
           (group) => group.id === over.id
         );
-        onGroupsChange(
-          moveGroups(activeGroups, overGroupIndex, selectedIndices),
-          openGroupId
+        const newGroups = moveGroups(
+          activeGroups,
+          overGroupIndex,
+          selectedIndices
         );
+        if (openGroupId) {
+          onSubgroupChange(newGroups as GroupItem[], openGroupId);
+        } else {
+          onGroupsChange(newGroups);
+        }
       }
     }
 
@@ -168,7 +198,7 @@ export function TileDragProvider({
     onDragEnd && onDragEnd(event);
   }
 
-  function handleDragCancel(event) {
+  function handleDragCancel(event: DragCancelEvent) {
     setDragId(null);
     setOverId(null);
     setDragCursor("pointer");
@@ -178,7 +208,7 @@ export function TileDragProvider({
     onDragCancel && onDragCancel(event);
   }
 
-  function customCollisionDetection(rects, rect) {
+  function customCollisionDetection(rects: RectEntry[], rect: ViewRect) {
     const rectCenter = {
       x: rect.left + rect.width / 2,
       y: rect.top + rect.height / 2,
diff --git a/src/contexts/TokenDataContext.js b/src/contexts/TokenDataContext.js
deleted file mode 100644
index a805ac5..0000000
--- a/src/contexts/TokenDataContext.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React, {
-  useEffect,
-  useState,
-  useContext,
-  useCallback,
-  useMemo,
-} from "react";
-import { useLiveQuery } from "dexie-react-hooks";
-
-import { useDatabase } from "./DatabaseContext";
-
-import { removeGroupsItems } from "../helpers/group";
-
-const TokenDataContext = React.createContext();
-
-export function TokenDataProvider({ children }) {
-  const { database } = useDatabase();
-
-  const tokensQuery = useLiveQuery(
-    () => database?.table("tokens").toArray(),
-    [database]
-  );
-
-  const tokens = useMemo(() => tokensQuery || [], [tokensQuery]);
-  const tokensLoading = useMemo(() => !tokensQuery, [tokensQuery]);
-
-  const tokenGroupQuery = useLiveQuery(
-    () => database?.table("groups").get("tokens"),
-    [database]
-  );
-
-  const [tokenGroups, setTokenGroups] = useState([]);
-  useEffect(() => {
-    async function updateTokenGroups() {
-      const group = await database.table("groups").get("tokens");
-      setTokenGroups(group.items);
-    }
-    if (database && tokenGroupQuery) {
-      updateTokenGroups();
-    }
-  }, [tokenGroupQuery, database]);
-
-  const getToken = useCallback(
-    async (tokenId) => {
-      let token = await database.table("tokens").get(tokenId);
-      return token;
-    },
-    [database]
-  );
-
-  // Add token and add it to the token group
-  const addToken = useCallback(
-    async (token) => {
-      await database.table("tokens").add(token);
-      const group = await database.table("groups").get("tokens");
-      await database.table("groups").update("tokens", {
-        items: [{ id: token.id, type: "item" }, ...group.items],
-      });
-    },
-    [database]
-  );
-
-  const removeTokens = useCallback(
-    async (ids) => {
-      const tokens = await database.table("tokens").bulkGet(ids);
-      let assetIds = [];
-      for (let token of tokens) {
-        if (token.type === "file") {
-          assetIds.push(token.file);
-          assetIds.push(token.thumbnail);
-        }
-      }
-
-      const group = await database.table("groups").get("tokens");
-      let items = removeGroupsItems(group.items, ids);
-      await database.table("groups").update("tokens", { items });
-
-      await database.table("tokens").bulkDelete(ids);
-      await database.table("assets").bulkDelete(assetIds);
-    },
-    [database]
-  );
-
-  const updateToken = useCallback(
-    async (id, update) => {
-      await database.table("tokens").update(id, update);
-    },
-    [database]
-  );
-
-  const updateTokensHidden = useCallback(
-    async (ids, hideInSidebar) => {
-      // // Update immediately to avoid UI delay
-      // setTokens((prevTokens) => {
-      //   let newTokens = [...prevTokens];
-      //   for (let id of ids) {
-      //     const tokenIndex = newTokens.findIndex((token) => token.id === id);
-      //     newTokens[tokenIndex].hideInSidebar = hideInSidebar;
-      //   }
-      //   return newTokens;
-      // });
-      await Promise.all(
-        ids.map((id) => database.table("tokens").update(id, { hideInSidebar }))
-      );
-    },
-    [database]
-  );
-
-  const updateTokenGroups = useCallback(
-    async (groups) => {
-      // Update group state immediately to avoid animation delay
-      setTokenGroups(groups);
-      await database.table("groups").update("tokens", { items: groups });
-    },
-    [database]
-  );
-
-  const [tokensById, setTokensById] = useState({});
-  useEffect(() => {
-    setTokensById(
-      tokens.reduce((obj, token) => {
-        obj[token.id] = token;
-        return obj;
-      }, {})
-    );
-  }, [tokens]);
-
-  const value = {
-    tokens,
-    addToken,
-    tokenGroups,
-    removeTokens,
-    updateToken,
-    tokensById,
-    tokensLoading,
-    getToken,
-    updateTokenGroups,
-    updateTokensHidden,
-  };
-
-  return (
-    <TokenDataContext.Provider value={value}>
-      {children}
-    </TokenDataContext.Provider>
-  );
-}
-
-export function useTokenData() {
-  const context = useContext(TokenDataContext);
-  if (context === undefined) {
-    throw new Error("useTokenData must be used within a TokenDataProvider");
-  }
-  return context;
-}
-
-export default TokenDataContext;
diff --git a/src/contexts/TokenDataContext.tsx b/src/contexts/TokenDataContext.tsx
new file mode 100644
index 0000000..cfe05e8
--- /dev/null
+++ b/src/contexts/TokenDataContext.tsx
@@ -0,0 +1,183 @@
+import React, {
+  useEffect,
+  useState,
+  useContext,
+  useCallback,
+  useMemo,
+} from "react";
+import { useLiveQuery } from "dexie-react-hooks";
+
+import { useDatabase } from "./DatabaseContext";
+
+import { removeGroupsItems } from "../helpers/group";
+
+import { Token } from "../types/Token";
+import { Group } from "../types/Group";
+
+export type AddTokenEventHandler = (token: Token) => Promise<void>;
+export type RemoveTokensEventHandler = (ids: string[]) => Promise<void>;
+export type UpdateTokenEventHandler = (
+  id: string,
+  update: Partial<Token>
+) => Promise<void>;
+export type GetTokenEventHandler = (
+  tokenId: string
+) => Promise<Token | undefined>;
+export type UpdateTokenGroupsEventHandler = (groups: Group[]) => Promise<void>;
+export type UpdateTokensHiddenEventHandler = (
+  ids: string[],
+  hideInSidebar: boolean
+) => Promise<void>;
+
+type TokenDataContextValue = {
+  tokens: Token[];
+  addToken: AddTokenEventHandler;
+  tokenGroups: Group[];
+  removeTokens: RemoveTokensEventHandler;
+  updateToken: UpdateTokenEventHandler;
+  getToken: GetTokenEventHandler;
+  tokensById: Record<string, Token>;
+  tokensLoading: boolean;
+  updateTokenGroups: UpdateTokenGroupsEventHandler;
+  updateTokensHidden: UpdateTokensHiddenEventHandler;
+};
+
+const TokenDataContext =
+  React.createContext<TokenDataContextValue | undefined>(undefined);
+
+export function TokenDataProvider({ children }: { children: React.ReactNode }) {
+  const { database } = useDatabase();
+
+  const tokensQuery = useLiveQuery<Token[]>(
+    () => database?.table("tokens").toArray() || [],
+    [database]
+  );
+
+  const tokens = useMemo(() => tokensQuery || [], [tokensQuery]);
+  const tokensLoading = useMemo(() => !tokensQuery, [tokensQuery]);
+
+  const tokenGroupQuery = useLiveQuery(
+    () => database?.table("groups").get("tokens"),
+    [database]
+  );
+
+  const [tokenGroups, setTokenGroups] = useState<Group[]>([]);
+  useEffect(() => {
+    async function updateTokenGroups() {
+      const group = await database?.table("groups").get("tokens");
+      setTokenGroups(group.items);
+    }
+    if (database && tokenGroupQuery) {
+      updateTokenGroups();
+    }
+  }, [tokenGroupQuery, database]);
+
+  const getToken = useCallback<GetTokenEventHandler>(
+    async (tokenId) => {
+      let token = await database?.table("tokens").get(tokenId);
+      return token;
+    },
+    [database]
+  );
+
+  // Add token and add it to the token group
+  const addToken = useCallback<AddTokenEventHandler>(
+    async (token) => {
+      if (database) {
+        await database.table("tokens").add(token);
+        const group = await database.table("groups").get("tokens");
+        await database.table("groups").update("tokens", {
+          items: [{ id: token.id, type: "item" }, ...group.items],
+        });
+      }
+    },
+    [database]
+  );
+
+  const removeTokens = useCallback<RemoveTokensEventHandler>(
+    async (ids) => {
+      if (database) {
+        const tokens = await database.table("tokens").bulkGet(ids);
+        let assetIds = [];
+        for (let token of tokens) {
+          if (token.type === "file") {
+            assetIds.push(token.file);
+            assetIds.push(token.thumbnail);
+          }
+        }
+
+        const group = await database.table("groups").get("tokens");
+        let items = removeGroupsItems(group.items, ids);
+        await database.table("groups").update("tokens", { items });
+
+        await database.table("tokens").bulkDelete(ids);
+        await database.table("assets").bulkDelete(assetIds);
+      }
+    },
+    [database]
+  );
+
+  const updateToken = useCallback<UpdateTokenEventHandler>(
+    async (id, update) => {
+      await database?.table("tokens").update(id, update);
+    },
+    [database]
+  );
+
+  const updateTokensHidden = useCallback<UpdateTokensHiddenEventHandler>(
+    async (ids: string[], hideInSidebar: boolean) => {
+      await Promise.all(
+        ids.map((id) => database?.table("tokens").update(id, { hideInSidebar }))
+      );
+    },
+    [database]
+  );
+
+  const updateTokenGroups = useCallback<UpdateTokenGroupsEventHandler>(
+    async (groups: Group[]) => {
+      // Update group state immediately to avoid animation delay
+      setTokenGroups(groups);
+      await database?.table("groups").update("tokens", { items: groups });
+    },
+    [database]
+  );
+
+  const [tokensById, setTokensById] = useState({});
+  useEffect(() => {
+    setTokensById(
+      tokens.reduce((obj: Record<string, Token>, token: Token) => {
+        obj[token.id] = token;
+        return obj;
+      }, {})
+    );
+  }, [tokens]);
+
+  const value = {
+    tokens,
+    addToken,
+    tokenGroups,
+    removeTokens,
+    updateToken,
+    tokensById,
+    tokensLoading,
+    getToken,
+    updateTokenGroups,
+    updateTokensHidden,
+  };
+
+  return (
+    <TokenDataContext.Provider value={value}>
+      {children}
+    </TokenDataContext.Provider>
+  );
+}
+
+export function useTokenData() {
+  const context = useContext(TokenDataContext);
+  if (context === undefined) {
+    throw new Error("useTokenData must be used within a TokenDataProvider");
+  }
+  return context;
+}
+
+export default TokenDataContext;
diff --git a/src/contexts/UserIdContext.js b/src/contexts/UserIdContext.tsx
similarity index 64%
rename from src/contexts/UserIdContext.js
rename to src/contexts/UserIdContext.tsx
index 72d3bb8..7630c38 100644
--- a/src/contexts/UserIdContext.js
+++ b/src/contexts/UserIdContext.tsx
@@ -1,12 +1,10 @@
 import React, { useEffect, useState, useContext } from "react";
 
 import { useDatabase } from "./DatabaseContext";
-/**
- * @type {React.Context<string|undefined>}
- */
-const UserIdContext = React.createContext();
 
-export function UserIdProvider({ children }) {
+const UserIdContext = React.createContext<string | undefined>(undefined);
+
+export function UserIdProvider({ children }: { children: React.ReactNode }) {
   const { database, databaseStatus } = useDatabase();
 
   const [userId, setUserId] = useState();
@@ -15,9 +13,11 @@ export function UserIdProvider({ children }) {
       return;
     }
     async function loadUserId() {
-      const storedUserId = await database.table("user").get("userId");
-      if (storedUserId) {
-        setUserId(storedUserId.value);
+      if (database) {
+        const storedUserId = await database.table("user").get("userId");
+        if (storedUserId) {
+          setUserId(storedUserId.value);
+        }
       }
     }
 
diff --git a/src/database.js b/src/database.ts
similarity index 69%
rename from src/database.js
rename to src/database.ts
index c834c95..0d1013f 100644
--- a/src/database.js
+++ b/src/database.ts
@@ -2,18 +2,21 @@
 import Dexie, { DexieOptions } from "dexie";
 import { v4 as uuid } from "uuid";
 
-import { loadVersions } from "./upgrade";
+import { loadVersions, UpgradeEventHandler } from "./upgrade";
 import { getDefaultMaps } from "./maps";
 import { getDefaultTokens } from "./tokens";
+import { getRandomMonster } from "./helpers/monsters";
 
 /**
  * Populate DB with initial data
  * @param {Dexie} db
  */
-function populate(db) {
+function populate(db: Dexie) {
   db.on("populate", () => {
     const userId = uuid();
     db.table("user").add({ key: "userId", value: userId });
+    const nickname = getRandomMonster();
+    db.table("user").add({ key: "nickname", value: nickname });
     const { maps, mapStates } = getDefaultMaps(userId);
     db.table("maps").bulkAdd(maps);
     db.table("states").bulkAdd(mapStates);
@@ -35,16 +38,16 @@ function populate(db) {
  * @param {string=} name
  * @param {number=} versionNumber
  * @param {boolean=} populateData
- * @param {import("./upgrade").OnUpgrade=} onUpgrade
+ * @param {UpgradeEventHandler=} onUpgrade
  * @returns {Dexie}
  */
 export function getDatabase(
-  options,
-  name = "OwlbearRodeoDB",
-  versionNumber = undefined,
-  populateData = true,
-  onUpgrade = undefined
-) {
+  options: DexieOptions,
+  name: string | undefined = "OwlbearRodeoDB",
+  versionNumber: number | undefined = undefined,
+  populateData: boolean | undefined = true,
+  onUpgrade: UpgradeEventHandler | undefined = undefined
+): Dexie {
   let db = new Dexie(name, options);
   loadVersions(db, versionNumber, onUpgrade);
   if (populateData) {
diff --git a/src/dice/Dice.js b/src/dice/Dice.ts
similarity index 62%
rename from src/dice/Dice.js
rename to src/dice/Dice.ts
index 23dee18..f984bd5 100644
--- a/src/dice/Dice.js
+++ b/src/dice/Dice.ts
@@ -1,7 +1,10 @@
 import { Vector3 } from "@babylonjs/core/Maths/math";
 import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
 import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
-import { PhysicsImpostor } from "@babylonjs/core/Physics/physicsImpostor";
+import {
+  PhysicsImpostor,
+  PhysicsImpostorParameters,
+} from "@babylonjs/core/Physics/physicsImpostor";
 
 import d4Source from "./shared/d4.glb";
 import d6Source from "./shared/d6.glb";
@@ -13,6 +16,19 @@ import d100Source from "./shared/d100.glb";
 
 import { lerp } from "../helpers/shared";
 import { importTextureAsync } from "../helpers/babylon";
+import {
+  AbstractMesh,
+  InstancedMesh,
+  Material,
+  Mesh,
+  Scene,
+} from "@babylonjs/core";
+import {
+  DiceType,
+  BaseDiceTextureSources,
+  isDiceMeshes,
+  DiceMeshes,
+} from "../types/Dice";
 
 const minDiceRollSpeed = 600;
 const maxDiceRollSpeed = 800;
@@ -20,9 +36,13 @@ const maxDiceRollSpeed = 800;
 class Dice {
   static instanceCount = 0;
 
-  static async loadMeshes(material, scene, sourceOverrides) {
-    let meshes = {};
-    const addToMeshes = async (type, defaultSource) => {
+  static async loadMeshes(
+    material: Material,
+    scene: Scene,
+    sourceOverrides?: Record<DiceType, string>
+  ): Promise<DiceMeshes> {
+    let meshes: Partial<DiceMeshes> = {};
+    const addToMeshes = async (type: DiceType, defaultSource: string) => {
       let source = sourceOverrides ? sourceOverrides[type] : defaultSource;
       const mesh = await this.loadMesh(source, material, scene);
       meshes[type] = mesh;
@@ -36,12 +56,16 @@ class Dice {
       addToMeshes("d20", d20Source),
       addToMeshes("d100", d100Source),
     ]);
-    return meshes;
+    if (isDiceMeshes(meshes)) {
+      return meshes;
+    } else {
+      throw new Error("Dice meshes failed to load, missing mesh source");
+    }
   }
 
-  static async loadMesh(source, material, scene) {
+  static async loadMesh(source: string, material: Material, scene: Scene) {
     let mesh = (await SceneLoader.ImportMeshAsync("", source, "", scene))
-      .meshes[1];
+      .meshes[1] as Mesh;
     mesh.setParent(null);
 
     mesh.material = material;
@@ -51,7 +75,11 @@ class Dice {
     return mesh;
   }
 
-  static async loadMaterial(materialName, textures, scene) {
+  static async loadMaterial(
+    materialName: string,
+    textures: BaseDiceTextureSources,
+    scene: Scene
+  ) {
     let pbr = new PBRMaterial(materialName, scene);
     let [albedo, normal, metalRoughness] = await Promise.all([
       importTextureAsync(textures.albedo),
@@ -59,7 +87,7 @@ class Dice {
       importTextureAsync(textures.metalRoughness),
     ]);
     pbr.albedoTexture = albedo;
-    pbr.normalTexture = normal;
+    pbr.bumpTexture = normal;
     pbr.metallicTexture = metalRoughness;
     pbr.useRoughnessFromMetallicTextureAlpha = false;
     pbr.useRoughnessFromMetallicTextureGreen = true;
@@ -67,14 +95,22 @@ class Dice {
     return pbr;
   }
 
-  static createInstanceFromMesh(mesh, name, physicalProperties, scene) {
+  static createInstanceFromMesh(
+    mesh: Mesh,
+    name: string,
+    physicalProperties: PhysicsImpostorParameters,
+    scene: Scene
+  ) {
     let instance = mesh.createInstance(name);
     instance.position = mesh.position;
     for (let child of mesh.getChildTransformNodes()) {
-      const locator = child.clone();
+      const locator = child.clone(child.name, instance);
+      if (!locator) {
+        throw new Error("Unable to clone dice locator");
+      }
       locator.setAbsolutePosition(child.getAbsolutePosition());
       locator.name = child.name;
-      instance.addChild(locator);
+      instance.addChild(locator as AbstractMesh);
     }
 
     instance.physicsImpostor = new PhysicsImpostor(
@@ -87,7 +123,7 @@ class Dice {
     return instance;
   }
 
-  static getDicePhysicalProperties(diceType) {
+  static getDicePhysicalProperties(diceType: DiceType) {
     switch (diceType) {
       case "d4":
         return { mass: 4, friction: 4 };
@@ -100,24 +136,27 @@ class Dice {
         return { mass: 7, friction: 4 };
       case "d12":
         return { mass: 8, friction: 4 };
-      case "20":
+      case "d20":
         return { mass: 10, friction: 4 };
       default:
         return { mass: 10, friction: 4 };
     }
   }
 
-  static roll(instance) {
-    instance.physicsImpostor.setLinearVelocity(Vector3.Zero());
-    instance.physicsImpostor.setAngularVelocity(Vector3.Zero());
+  static roll(instance: InstancedMesh) {
+    instance.physicsImpostor?.setLinearVelocity(Vector3.Zero());
+    instance.physicsImpostor?.setAngularVelocity(Vector3.Zero());
 
     const scene = instance.getScene();
-    const diceTraySingle = scene.getNodeByID("dice_tray_single");
-    const diceTrayDouble = scene.getNodeByID("dice_tray_double");
-    const visibleDiceTray = diceTraySingle.isVisible
+    const diceTraySingle = scene.getMeshByID("dice_tray_single");
+    const diceTrayDouble = scene.getMeshByID("dice_tray_double");
+    const visibleDiceTray = diceTraySingle?.isVisible
       ? diceTraySingle
       : diceTrayDouble;
-    const trayBounds = visibleDiceTray.getBoundingInfo().boundingBox;
+    if (!visibleDiceTray) {
+      throw new Error("No dice tray to roll in");
+    }
+    const trayBounds = visibleDiceTray?.getBoundingInfo().boundingBox;
 
     const position = new Vector3(
       trayBounds.center.x + (Math.random() * 2 - 1),
@@ -142,13 +181,17 @@ class Dice {
       .normalizeToNew()
       .scale(lerp(minDiceRollSpeed, maxDiceRollSpeed, Math.random()));
 
-    instance.physicsImpostor.applyImpulse(
+    instance.physicsImpostor?.applyImpulse(
       impulse,
       instance.physicsImpostor.getObjectCenter()
     );
   }
 
-  static createInstance(mesh, physicalProperties, scene) {
+  static createInstanceMesh(
+    mesh: Mesh,
+    physicalProperties: PhysicsImpostorParameters,
+    scene: Scene
+  ): InstancedMesh {
     this.instanceCount++;
 
     return this.createInstanceFromMesh(
@@ -158,6 +201,14 @@ class Dice {
       scene
     );
   }
+
+  static async load(scene: Scene) {
+    throw new Error(`Unable to load ${scene}`);
+  }
+
+  static createInstance(diceType: DiceType, scene: Scene): InstancedMesh {
+    throw new Error(`No instance available for ${diceType} in ${scene}`);
+  }
 }
 
 export default Dice;
diff --git a/src/dice/diceTray/DiceTray.js b/src/dice/diceTray/DiceTray.ts
similarity index 83%
rename from src/dice/diceTray/DiceTray.js
rename to src/dice/diceTray/DiceTray.ts
index 1e9ec71..78ffd86 100644
--- a/src/dice/diceTray/DiceTray.js
+++ b/src/dice/diceTray/DiceTray.ts
@@ -2,6 +2,7 @@ import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
 import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
 import { PhysicsImpostor } from "@babylonjs/core/Physics/physicsImpostor";
 import { Mesh } from "@babylonjs/core/Meshes/mesh";
+import { AbstractMesh, Scene, ShadowGenerator } from "@babylonjs/core";
 
 import singleMeshSource from "./single.glb";
 import doubleMeshSource from "./double.glb";
@@ -18,35 +19,44 @@ import { importTextureAsync } from "../../helpers/babylon";
 
 class DiceTray {
   _size;
+
   get size() {
     return this._size;
   }
+
   set size(newSize) {
     this._size = newSize;
     const wallOffsetWidth = this.collisionSize / 2 + this.width / 2 - 0.5;
     const wallOffsetHeight = this.collisionSize / 2 + this.height / 2 - 0.5;
-    this.wallTop.position.z = -wallOffsetHeight;
-    this.wallRight.position.x = -wallOffsetWidth;
-    this.wallBottom.position.z = wallOffsetHeight;
-    this.wallLeft.position.x = wallOffsetWidth;
-    this.singleMesh.isVisible = newSize === "single";
-    this.doubleMesh.isVisible = newSize === "double";
+    if (this.wallTop) this.wallTop.position.z = -wallOffsetHeight;
+    if (this.wallRight) this.wallRight.position.x = -wallOffsetWidth;
+    if (this.wallBottom) this.wallBottom.position.z = wallOffsetHeight;
+    if (this.wallLeft) this.wallLeft.position.x = wallOffsetWidth;
+    if (this.singleMesh) this.singleMesh.isVisible = newSize === "single";
+    if (this.doubleMesh) this.doubleMesh.isVisible = newSize === "double";
   }
+
   scene;
   shadowGenerator;
+
   get width() {
     return this.size === "single" ? 10 : 20;
   }
+
   height = 20;
   collisionSize = 50;
-  wallTop;
-  wallRight;
-  wallBottom;
-  wallLeft;
-  singleMesh;
-  doubleMesh;
+  wallTop?: Mesh;
+  wallRight?: Mesh;
+  wallBottom?: Mesh;
+  wallLeft?: Mesh;
+  singleMesh?: AbstractMesh;
+  doubleMesh?: AbstractMesh;
 
-  constructor(initialSize, scene, shadowGenerator) {
+  constructor(
+    initialSize: string,
+    scene: Scene,
+    shadowGenerator: ShadowGenerator
+  ) {
     this._size = initialSize;
     this.scene = scene;
     this.shadowGenerator = shadowGenerator;
@@ -57,7 +67,13 @@ class DiceTray {
     await this.loadMeshes();
   }
 
-  createCollision(name, x, y, z, friction) {
+  createCollision(
+    name: string,
+    x: number,
+    y: number,
+    z: number,
+    friction: number
+  ): Mesh {
     let collision = Mesh.CreateBox(
       name,
       this.collisionSize,
@@ -142,7 +158,7 @@ class DiceTray {
     this.singleMesh.name = "dice_tray";
     let singleMaterial = new PBRMaterial("dice_tray_mat_single", this.scene);
     singleMaterial.albedoTexture = singleAlbedoTexture;
-    singleMaterial.normalTexture = singleNormalTexture;
+    singleMaterial.bumpTexture = singleNormalTexture;
     singleMaterial.metallicTexture = singleMetalRoughnessTexture;
     singleMaterial.useRoughnessFromMetallicTextureAlpha = false;
     singleMaterial.useRoughnessFromMetallicTextureGreen = true;
@@ -158,7 +174,7 @@ class DiceTray {
     this.doubleMesh.name = "dice_tray";
     let doubleMaterial = new PBRMaterial("dice_tray_mat_double", this.scene);
     doubleMaterial.albedoTexture = doubleAlbedoTexture;
-    doubleMaterial.normalTexture = doubleNormalTexture;
+    doubleMaterial.bumpTexture = doubleNormalTexture;
     doubleMaterial.metallicTexture = doubleMetalRoughnessTexture;
     doubleMaterial.useRoughnessFromMetallicTextureAlpha = false;
     doubleMaterial.useRoughnessFromMetallicTextureGreen = true;
diff --git a/src/dice/galaxy/GalaxyDice.js b/src/dice/galaxy/GalaxyDice.ts
similarity index 68%
rename from src/dice/galaxy/GalaxyDice.js
rename to src/dice/galaxy/GalaxyDice.ts
index ebe8548..c05de32 100644
--- a/src/dice/galaxy/GalaxyDice.js
+++ b/src/dice/galaxy/GalaxyDice.ts
@@ -1,14 +1,17 @@
+import { InstancedMesh, Material, Scene } from "@babylonjs/core";
 import Dice from "../Dice";
 
 import albedo from "./albedo.jpg";
 import metalRoughness from "./metalRoughness.jpg";
 import normal from "./normal.jpg";
 
-class GalaxyDice extends Dice {
-  static meshes;
-  static material;
+import { DiceMeshes, DiceType } from "../../types/Dice";
 
-  static async load(scene) {
+class GalaxyDice extends Dice {
+  static meshes: DiceMeshes;
+  static material: Material;
+
+  static async load(scene: Scene) {
     if (!this.material) {
       this.material = await this.loadMaterial(
         "galaxy_pbr",
@@ -21,12 +24,12 @@ class GalaxyDice extends Dice {
     }
   }
 
-  static createInstance(diceType, scene) {
+  static createInstance(diceType: DiceType, scene: Scene): InstancedMesh {
     if (!this.material || !this.meshes) {
       throw Error("Dice not loaded, call load before creating an instance");
     }
 
-    return Dice.createInstance(
+    return super.createInstanceMesh(
       this.meshes[diceType],
       this.getDicePhysicalProperties(diceType),
       scene
diff --git a/src/dice/gemstone/GemstoneDice.js b/src/dice/gemstone/GemstoneDice.ts
similarity index 77%
rename from src/dice/gemstone/GemstoneDice.js
rename to src/dice/gemstone/GemstoneDice.ts
index 4545912..bc4653b 100644
--- a/src/dice/gemstone/GemstoneDice.js
+++ b/src/dice/gemstone/GemstoneDice.ts
@@ -1,5 +1,6 @@
 import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
 import { Color3 } from "@babylonjs/core/Maths/math";
+import { Material, Scene } from "@babylonjs/core";
 
 import Dice from "../Dice";
 
@@ -8,17 +9,22 @@ import metalRoughness from "./metalRoughness.jpg";
 import normal from "./normal.jpg";
 
 import { importTextureAsync } from "../../helpers/babylon";
+import { BaseDiceTextureSources, DiceMeshes, DiceType } from "../../types/Dice";
 
 class GemstoneDice extends Dice {
-  static meshes;
-  static material;
+  static meshes: DiceMeshes;
+  static material: Material;
 
-  static getDicePhysicalProperties(diceType) {
+  static getDicePhysicalProperties(diceType: DiceType) {
     let properties = super.getDicePhysicalProperties(diceType);
     return { mass: properties.mass * 1.5, friction: properties.friction };
   }
 
-  static async loadMaterial(materialName, textures, scene) {
+  static async loadMaterial(
+    materialName: string,
+    textures: BaseDiceTextureSources,
+    scene: Scene
+  ) {
     let pbr = new PBRMaterial(materialName, scene);
     let [albedo, normal, metalRoughness] = await Promise.all([
       importTextureAsync(textures.albedo),
@@ -26,7 +32,7 @@ class GemstoneDice extends Dice {
       importTextureAsync(textures.metalRoughness),
     ]);
     pbr.albedoTexture = albedo;
-    pbr.normalTexture = normal;
+    pbr.bumpTexture = normal;
     pbr.metallicTexture = metalRoughness;
     pbr.useRoughnessFromMetallicTextureAlpha = false;
     pbr.useRoughnessFromMetallicTextureGreen = true;
@@ -41,7 +47,7 @@ class GemstoneDice extends Dice {
     return pbr;
   }
 
-  static async load(scene) {
+  static async load(scene: Scene) {
     if (!this.material) {
       this.material = await this.loadMaterial(
         "gemstone_pbr",
@@ -54,12 +60,12 @@ class GemstoneDice extends Dice {
     }
   }
 
-  static createInstance(diceType, scene) {
+  static createInstance(diceType: DiceType, scene: Scene) {
     if (!this.material || !this.meshes) {
       throw Error("Dice not loaded, call load before creating an instance");
     }
 
-    return Dice.createInstance(
+    return Dice.createInstanceMesh(
       this.meshes[diceType],
       this.getDicePhysicalProperties(diceType),
       scene
diff --git a/src/dice/glass/GlassDice.js b/src/dice/glass/GlassDice.ts
similarity index 72%
rename from src/dice/glass/GlassDice.js
rename to src/dice/glass/GlassDice.ts
index ec063dc..a631048 100644
--- a/src/dice/glass/GlassDice.js
+++ b/src/dice/glass/GlassDice.ts
@@ -1,5 +1,6 @@
 import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
 import { Color3 } from "@babylonjs/core/Maths/math";
+import { Material, Scene } from "@babylonjs/core";
 
 import Dice from "../Dice";
 
@@ -9,16 +10,27 @@ import normal from "./normal.jpg";
 
 import { importTextureAsync } from "../../helpers/babylon";
 
-class GlassDice extends Dice {
-  static meshes;
-  static material;
+import { BaseDiceTextureSources, DiceMeshes, DiceType } from "../../types/Dice";
 
-  static getDicePhysicalProperties(diceType) {
+type GlassDiceTextureSources = Pick<
+  BaseDiceTextureSources,
+  "albedo" | "normal"
+> & { mask: string };
+
+class GlassDice extends Dice {
+  static meshes: DiceMeshes;
+  static material: Material;
+
+  static getDicePhysicalProperties(diceType: DiceType) {
     let properties = super.getDicePhysicalProperties(diceType);
     return { mass: properties.mass * 1.5, friction: properties.friction };
   }
 
-  static async loadMaterial(materialName, textures, scene) {
+  static async loadGlassMaterial(
+    materialName: string,
+    textures: GlassDiceTextureSources,
+    scene: Scene
+  ) {
     let pbr = new PBRMaterial(materialName, scene);
     let [albedo, normal, mask] = await Promise.all([
       importTextureAsync(textures.albedo),
@@ -26,7 +38,7 @@ class GlassDice extends Dice {
       importTextureAsync(textures.mask),
     ]);
     pbr.albedoTexture = albedo;
-    pbr.normalTexture = normal;
+    pbr.bumpTexture = normal;
     pbr.roughness = 0.25;
     pbr.metallic = 0;
     pbr.subSurface.isRefractionEnabled = true;
@@ -43,9 +55,9 @@ class GlassDice extends Dice {
     return pbr;
   }
 
-  static async load(scene) {
+  static async load(scene: Scene) {
     if (!this.material) {
-      this.material = await this.loadMaterial(
+      this.material = await this.loadGlassMaterial(
         "glass_pbr",
         { albedo, mask, normal },
         scene
@@ -56,12 +68,12 @@ class GlassDice extends Dice {
     }
   }
 
-  static createInstance(diceType, scene) {
+  static createInstance(diceType: DiceType, scene: Scene) {
     if (!this.material || !this.meshes) {
       throw Error("Dice not loaded, call load before creating an instance");
     }
 
-    return Dice.createInstance(
+    return Dice.createInstanceMesh(
       this.meshes[diceType],
       this.getDicePhysicalProperties(diceType),
       scene
diff --git a/src/dice/index.js b/src/dice/index.ts
similarity index 79%
rename from src/dice/index.js
rename to src/dice/index.ts
index 62e22b9..5c71cbc 100644
--- a/src/dice/index.js
+++ b/src/dice/index.ts
@@ -17,8 +17,13 @@ import SunsetPreview from "./sunset/preview.png";
 import WalnutPreview from "./walnut/preview.png";
 import GlassPreview from "./glass/preview.png";
 import GemstonePreview from "./gemstone/preview.png";
+import Dice from "./Dice";
 
-export const diceClasses = {
+import { DefaultDice } from "../types/Dice";
+
+type DiceClasses = Record<string, typeof Dice>;
+
+export const diceClasses: DiceClasses = {
   galaxy: GalaxyDice,
   nebula: NebulaDice,
   sunrise: SunriseDice,
@@ -29,7 +34,9 @@ export const diceClasses = {
   gemstone: GemstoneDice,
 };
 
-export const dicePreviews = {
+type DicePreview = Record<string, string>;
+
+export const dicePreviews: DicePreview = {
   galaxy: GalaxyPreview,
   nebula: NebulaPreview,
   sunrise: SunrisePreview,
@@ -40,7 +47,7 @@ export const dicePreviews = {
   gemstone: GemstonePreview,
 };
 
-export const dice = Object.keys(diceClasses).map((key) => ({
+export const dice: DefaultDice[] = Object.keys(diceClasses).map((key) => ({
   key,
   name: Case.capital(key),
   class: diceClasses[key],
diff --git a/src/dice/iron/IronDice.js b/src/dice/iron/IronDice.ts
similarity index 70%
rename from src/dice/iron/IronDice.js
rename to src/dice/iron/IronDice.ts
index 917ab6c..c9a7be8 100644
--- a/src/dice/iron/IronDice.js
+++ b/src/dice/iron/IronDice.ts
@@ -1,19 +1,22 @@
+import { Material, Scene } from "@babylonjs/core";
 import Dice from "../Dice";
 
 import albedo from "./albedo.jpg";
 import metalRoughness from "./metalRoughness.jpg";
 import normal from "./normal.jpg";
 
-class IronDice extends Dice {
-  static meshes;
-  static material;
+import { DiceMeshes, DiceType } from "../../types/Dice";
 
-  static getDicePhysicalProperties(diceType) {
+class IronDice extends Dice {
+  static meshes: DiceMeshes;
+  static material: Material;
+
+  static getDicePhysicalProperties(diceType: DiceType) {
     let properties = super.getDicePhysicalProperties(diceType);
     return { mass: properties.mass * 2, friction: properties.friction };
   }
 
-  static async load(scene) {
+  static async load(scene: Scene) {
     if (!this.material) {
       this.material = await this.loadMaterial(
         "iron_pbr",
@@ -26,12 +29,12 @@ class IronDice extends Dice {
     }
   }
 
-  static createInstance(diceType, scene) {
+  static createInstance(diceType: DiceType, scene: Scene) {
     if (!this.material || !this.meshes) {
       throw Error("Dice not loaded, call load before creating an instance");
     }
 
-    return Dice.createInstance(
+    return Dice.createInstanceMesh(
       this.meshes[diceType],
       this.getDicePhysicalProperties(diceType),
       scene
diff --git a/src/dice/nebula/NebulaDice.js b/src/dice/nebula/NebulaDice.ts
similarity index 70%
rename from src/dice/nebula/NebulaDice.js
rename to src/dice/nebula/NebulaDice.ts
index fe687f1..662b569 100644
--- a/src/dice/nebula/NebulaDice.js
+++ b/src/dice/nebula/NebulaDice.ts
@@ -1,14 +1,17 @@
+import { Material, Scene } from "@babylonjs/core";
 import Dice from "../Dice";
 
 import albedo from "./albedo.jpg";
 import metalRoughness from "./metalRoughness.jpg";
 import normal from "./normal.jpg";
 
-class NebulaDice extends Dice {
-  static meshes;
-  static material;
+import { DiceMeshes, DiceType } from "../../types/Dice";
 
-  static async load(scene) {
+class NebulaDice extends Dice {
+  static meshes: DiceMeshes;
+  static material: Material;
+
+  static async load(scene: Scene) {
     if (!this.material) {
       this.material = await this.loadMaterial(
         "neubula_pbr",
@@ -21,12 +24,12 @@ class NebulaDice extends Dice {
     }
   }
 
-  static createInstance(diceType, scene) {
+  static createInstance(diceType: DiceType, scene: Scene) {
     if (!this.material || !this.meshes) {
       throw Error("Dice not loaded, call load before creating an instance");
     }
 
-    return Dice.createInstance(
+    return Dice.createInstanceMesh(
       this.meshes[diceType],
       this.getDicePhysicalProperties(diceType),
       scene
diff --git a/src/dice/sunrise/SunriseDice.js b/src/dice/sunrise/SunriseDice.ts
similarity index 70%
rename from src/dice/sunrise/SunriseDice.js
rename to src/dice/sunrise/SunriseDice.ts
index d92f6f0..2d1df72 100644
--- a/src/dice/sunrise/SunriseDice.js
+++ b/src/dice/sunrise/SunriseDice.ts
@@ -1,14 +1,17 @@
+import { Material, Scene } from "@babylonjs/core";
 import Dice from "../Dice";
 
 import albedo from "./albedo.jpg";
 import metalRoughness from "./metalRoughness.jpg";
 import normal from "./normal.jpg";
 
-class SunriseDice extends Dice {
-  static meshes;
-  static material;
+import { DiceMeshes, DiceType } from "../../types/Dice";
 
-  static async load(scene) {
+class SunriseDice extends Dice {
+  static meshes: DiceMeshes;
+  static material: Material;
+
+  static async load(scene: Scene) {
     if (!this.material) {
       this.material = await this.loadMaterial(
         "sunrise_pbr",
@@ -21,12 +24,12 @@ class SunriseDice extends Dice {
     }
   }
 
-  static createInstance(diceType, scene) {
+  static createInstance(diceType: DiceType, scene: Scene) {
     if (!this.material || !this.meshes) {
       throw Error("Dice not loaded, call load before creating an instance");
     }
 
-    return Dice.createInstance(
+    return super.createInstanceMesh(
       this.meshes[diceType],
       this.getDicePhysicalProperties(diceType),
       scene
diff --git a/src/dice/sunset/SunsetDice.js b/src/dice/sunset/SunsetDice.ts
similarity index 70%
rename from src/dice/sunset/SunsetDice.js
rename to src/dice/sunset/SunsetDice.ts
index c0e6884..bfa107f 100644
--- a/src/dice/sunset/SunsetDice.js
+++ b/src/dice/sunset/SunsetDice.ts
@@ -1,14 +1,17 @@
+import { Material, Scene } from "@babylonjs/core";
 import Dice from "../Dice";
 
 import albedo from "./albedo.jpg";
 import metalRoughness from "./metalRoughness.jpg";
 import normal from "./normal.jpg";
 
-class SunsetDice extends Dice {
-  static meshes;
-  static material;
+import { DiceMeshes, DiceType } from "../../types/Dice";
 
-  static async load(scene) {
+class SunsetDice extends Dice {
+  static meshes: DiceMeshes;
+  static material: Material;
+
+  static async load(scene: Scene) {
     if (!this.material) {
       this.material = await this.loadMaterial(
         "sunset_pbr",
@@ -21,12 +24,12 @@ class SunsetDice extends Dice {
     }
   }
 
-  static createInstance(diceType, scene) {
+  static createInstance(diceType: DiceType, scene: Scene) {
     if (!this.material || !this.meshes) {
       throw Error("Dice not loaded, call load before creating an instance");
     }
 
-    return Dice.createInstance(
+    return super.createInstanceMesh(
       this.meshes[diceType],
       this.getDicePhysicalProperties(diceType),
       scene
diff --git a/src/dice/walnut/WalnutDice.js b/src/dice/walnut/WalnutDice.ts
similarity index 78%
rename from src/dice/walnut/WalnutDice.js
rename to src/dice/walnut/WalnutDice.ts
index b5e5755..c489723 100644
--- a/src/dice/walnut/WalnutDice.js
+++ b/src/dice/walnut/WalnutDice.ts
@@ -1,3 +1,4 @@
+import { Material, Scene } from "@babylonjs/core";
 import Dice from "../Dice";
 
 import albedo from "./albedo.jpg";
@@ -11,6 +12,7 @@ import d10Source from "./d10.glb";
 import d12Source from "./d12.glb";
 import d20Source from "./d20.glb";
 import d100Source from "./d100.glb";
+import { DiceMeshes, DiceType } from "../../types/Dice";
 
 const sourceOverrides = {
   d4: d4Source,
@@ -23,15 +25,15 @@ const sourceOverrides = {
 };
 
 class WalnutDice extends Dice {
-  static meshes;
-  static material;
+  static meshes: DiceMeshes;
+  static material: Material;
 
-  static getDicePhysicalProperties(diceType) {
+  static getDicePhysicalProperties(diceType: DiceType) {
     let properties = super.getDicePhysicalProperties(diceType);
     return { mass: properties.mass * 1.4, friction: properties.friction };
   }
 
-  static async load(scene) {
+  static async load(scene: Scene) {
     if (!this.material) {
       this.material = await this.loadMaterial(
         "walnut_pbr",
@@ -48,12 +50,12 @@ class WalnutDice extends Dice {
     }
   }
 
-  static createInstance(diceType, scene) {
+  static createInstance(diceType: DiceType, scene: Scene) {
     if (!this.material || !this.meshes) {
       throw Error("Dice not loaded, call load before creating an instance");
     }
 
-    return Dice.createInstance(
+    return super.createInstanceMesh(
       this.meshes[diceType],
       this.getDicePhysicalProperties(diceType),
       scene
diff --git a/src/docs/assets/UsingDrawing.mp4 b/src/docs/assets/UsingDrawing.mp4
index 8d94efb..f47411f 100644
Binary files a/src/docs/assets/UsingDrawing.mp4 and b/src/docs/assets/UsingDrawing.mp4 differ
diff --git a/src/docs/assets/WorkingWithTokens.mp4 b/src/docs/assets/WorkingWithTokens.mp4
index aae6a4a..1811110 100644
Binary files a/src/docs/assets/WorkingWithTokens.mp4 and b/src/docs/assets/WorkingWithTokens.mp4 differ
diff --git a/src/docs/assets/index.js b/src/docs/assets/index.ts
similarity index 100%
rename from src/docs/assets/index.js
rename to src/docs/assets/index.ts
diff --git a/src/docs/howTo/shortcuts.md b/src/docs/howTo/shortcuts.md
index 8d0f823..b7c0a48 100644
--- a/src/docs/howTo/shortcuts.md
+++ b/src/docs/howTo/shortcuts.md
@@ -1,50 +1,58 @@
 ## General
 
-| Shortcut         | Description    |
-| ---------------- | -------------- |
-| W                | Move Tool      |
-| Space Bar (Hold) | Move Tool      |
-| F                | Fog Tool       |
-| D                | Drawing Tool   |
-| M                | Measure Tool   |
-| Q                | Pointer Tool   |
-| N                | Note Tool      |
-| +                | Zoom In        |
-| -                | Zoom Out       |
-| Shift + Zoom     | Precision Zoom |
+| Shortcut         | Description             |
+| ---------------- | ----------------------- |
+| W                | Move Tool               |
+| Space Bar (Hold) | Move Tool               |
+| F                | Fog Tool                |
+| D                | Drawing Tool            |
+| M                | Measure Tool            |
+| Q                | Pointer Tool            |
+| N                | Note Tool               |
+| +                | Zoom In                 |
+| -                | Zoom Out                |
+| Shift + Zoom     | Precision Zoom          |
+| Ctrl + Z         | Undo                    |
+| Ctrl + Shift + Z | Redo                    |
+| Ctrl (Hold)      | Disabled Grid Snapping  |
+| Alt + Drag       | Duplicate Token or Note |
+
+## Select Tool
+
+| Shortcut | Description     |
+| -------- | --------------- |
+| Ctrl + C | Copy Selection  |
+| Ctrl + V | Paste Selection |
 
 ## Fog Tool
 
-| Shortcut         | Description            |
-| ---------------- | ---------------------- |
-| P                | Fog Polygon            |
-| Enter            | Accept Fog Polygon     |
-| Escape           | Cancel Fog Polygon     |
-| Backspace        | Undo Fog Polygon Point |
-| R                | Fog Rectangle          |
-| B                | Fog Brush              |
-| T                | Toggle Fog             |
-| E                | Erase Fog              |
-| C                | Cut Fog                |
-| L                | Multilayer Toggle      |
-| F                | Fog Preview Toggle     |
-| Ctrl + Z         | Undo                   |
-| Ctrl + Shift + Z | Redo                   |
+| Shortcut  | Description            |
+| --------- | ---------------------- |
+| P         | Fog Polygon            |
+| Enter     | Accept Fog Polygon     |
+| Escape    | Cancel Fog Polygon     |
+| Backspace | Undo Fog Polygon Point |
+| R         | Fog Rectangle          |
+| B         | Fog Brush              |
+| T         | Toggle Fog             |
+| E         | Erase Fog              |
+| C         | Cut Fog                |
+| L         | Multilayer Toggle      |
+| F         | Fog Preview Toggle     |
 
 ## Drawing Tool
 
-| Shortcut         | Description     |
-| ---------------- | --------------- |
-| B                | Brush           |
-| P                | Paint           |
-| L                | Line            |
-| R                | Rectangle       |
-| C                | Circle          |
-| T                | Triangle        |
-| E                | Erase           |
-| O                | Blending Toggle |
-| Ctrl + Z         | Undo            |
-| Ctrl + Shift + Z | Redo            |
+| Shortcut | Description       |
+| -------- | ----------------- |
+| B        | Brush             |
+| P        | Paint             |
+| L        | Line              |
+| R        | Rectangle         |
+| C        | Circle            |
+| T        | Triangle          |
+| E        | Erase             |
+| O        | Blending Toggle   |
+| G        | Shape Fill Toggle |
 
 ## Select Map/Token Screen
 
diff --git a/src/docs/howTo/usingDrawing.md b/src/docs/howTo/usingDrawing.md
index 8cd9db6..ffb6456 100644
--- a/src/docs/howTo/usingDrawing.md
+++ b/src/docs/howTo/usingDrawing.md
@@ -6,17 +6,16 @@ The Drawing Tool allows you to draw on top of a map. To access the Drawing Tool
 
 A summary of the Drawing Tool options are listed below.
 
-| Option    | Description                                         |
-| --------- | --------------------------------------------------- |
-| Color     | Change the color of the drawings                    |
-| Brush     | Draw free form lines                                |
-| Paint     | Draw free form shapes                               |
-| Line      | Draw a single straight line                         |
-| Rectangle | Draw a rectangle                                    |
-| Circle    | Draw a circle                                       |
-| Triangle  | Draw a triangle                                     |
-| Erase     | Click and drag to select drawings, release to erase |
-| Erase All | Erases all drawings on the map                      |
-| Blending  | Enables/Disables alpha blending                     |
-| Undo      | Undo drawing or erasing                             |
-| Redo      | Redo drawing or erasing                             |
+| Option     | Description                                         |
+| ---------- | --------------------------------------------------- |
+| Color      | Change the color of the drawings                    |
+| Brush      | Draw free form lines                                |
+| Paint      | Draw free form shapes                               |
+| Line       | Draw a single straight line                         |
+| Rectangle  | Draw a rectangle                                    |
+| Circle     | Draw a circle                                       |
+| Triangle   | Draw a triangle                                     |
+| Erase      | Click and drag to select drawings, release to erase |
+| Erase All  | Erases all drawings on the map                      |
+| Blending   | Enables/Disables alpha blending                     |
+| Shape Fill | Enables/Disables shape fill                         |
diff --git a/src/docs/howTo/usingFog.md b/src/docs/howTo/usingFog.md
index cc60364..ff7e6db 100644
--- a/src/docs/howTo/usingFog.md
+++ b/src/docs/howTo/usingFog.md
@@ -18,5 +18,3 @@ A summary of the Fog Tool options are listed below.
 | Fog Cutting   | Enables/Disables fog cutting                       |
 | Layer Toggle  | Changes between single layer and multilayer fog    |
 | Fog Preview   | Enables/Disables a preview of the final fog shapes |
-| Undo          | Undo a fog action                                  |
-| Redo          | Redo a fog action                                  |
diff --git a/src/docs/howTo/usingTokens.md b/src/docs/howTo/usingTokens.md
index b37ace6..003a07b 100644
--- a/src/docs/howTo/usingTokens.md
+++ b/src/docs/howTo/usingTokens.md
@@ -18,10 +18,11 @@ An overview of each setting is listed below:
 
 - Label: allows you to write text that is then displayed at the bottom of the token.
 - Status: allows you to overlay a coloured ring on top of the token, these can be useful for showing status effects.
-- Size: controls the size of the token each notch represents how many grid cells the token takes up in the horizontal direction.
-- Rotation: the direction the token faces, restrained to 15 degree increments.
 - Hide / Show (GM Only): toggle the visibility of the token, useful for tracking invisible enemies.
 - Lock / Unlock (GM Only): when a token is locked it can't be moved until it is unlocked again.
+- Category (GM Only): Change the token category. See Editing Tokens for more information about token categories.
+
+Tokens can be resized by using the controls on the left and right of the token or rotated with the control on the top.
 
 To delete a token drag in into the delete button that appears when dragging.
 
@@ -55,7 +56,8 @@ Next you can change the Category of your token, a summary of the options is belo
 
 - Character - when selected this token will render on top of all other tokens. Used for things like players or enemies.
 - Prop - when selected this token will render beneath all other tokens. Used for things like items or markers.
-- Vehicle / Mount - when selected this token will render beneath characters but above props and when moved a character on top of this token will also be moved.
+- Mount - when selected this token will render beneath characters but above props and when moved a character on top of this token will also be moved.
+- Attachment - when selected this token will attach to any character underneath it. Used for auras or markers.
 
 Lastly you can adjust the default size that is used when adding the token to the map by adjusting the Default Size Input.
 
diff --git a/src/docs/releaseNotes/v1.10.0.md b/src/docs/releaseNotes/v1.10.0.md
new file mode 100644
index 0000000..76666b2
--- /dev/null
+++ b/src/docs/releaseNotes/v1.10.0.md
@@ -0,0 +1,56 @@
+![embed:](https://www.youtube.com/embed/wiUue6IWb2E)
+
+## Major Changes
+
+This release focuses on improving the workflow when using tokens.
+
+### Multi-Select Tool
+
+A new multi-select tool allows you to drag to select multiple notes or tokens at once. You can then move, delete, hide and lock the items selected. You can also copy all the tokens and notes with the copy button or by using a copy shortcut. Once copied you can then paste the selection on the same map, a different map or (if your browser supports it) even a different instance of Owlbear Rodeo running on the same computer.
+
+With this tool we hope to reduce the work in managing large battles with many tokens and also help to reduce the setup work of using a common set of tokens across maps.
+
+### Improved Token Scaling and Rotation
+
+New reworked controls for adjusting size and rotation for tokens and notes.
+
+With a token or note selected you can drag the handles to the left and right to resize or use the handle at the top to rotate.
+
+When resizing you are no longer restricted to predefined increments but it will still snap to your grid to make it easier to match common token sizes.
+
+With this design we are also able to remove the old cap on token sizes, so feel free to import large tokens directly onto a map without worrying about adjusting the token settings beforehand.
+
+We think this design strikes a good balance of adding extra control while still maintaining the design language that makes Owlbear Rodeo approachable.
+
+### Attachment Tokens
+
+A new category of tokens called Attachments have been added.
+
+When a token is marked as an attachment it can only be interacted with by clicking on a small anchor at the bottom of the token. This means that attachments can be placed on top of other tokens without interrupting any movements of the token underneath.
+
+As well as this any attachment on a character when it is moved is automatically moved along with the character.
+
+Finally when dragging an attachment a circle will appear in it's center showing which token it will be attached to.
+
+We see this category being useful for things like a paladin's aura in D&D but the feature was designed to be flexible so we're excited to see what other use cases the community comes up with.
+
+### Global Undo/Redo
+
+The undo/redo commands found in the fog and drawing tool have been removed in favour of a global undo queue.
+
+With this all changes made to a game are able to be undone. This includes drawings and fog but also all changes to tokens and notes as well.
+
+With the introduction of the multi-select tool this was needed to allow you to undo if you accidentally delete all your tokens on your map.
+
+## Minor Changes
+
+- Converted the project to Typescript.
+- Added a new shortcut for disabling grid snapping temporarily by holding down Ctrl/Cmd.
+- Added a new shortcut to duplicate tokens / notes by dragging while holding down the Alt key.
+- Added a new option when editing tokens on a map to change the token category.
+- Prop tokens are now displayed under drawings and notes.
+- Added a new option for drawings to draw shapes with outlines only.
+- Added a confirmation dialog for erasing all drawings.
+- Deleting, rotating and resizing a mount token will now update all tokens attached to it.
+- Fixed an issue where a player could still use a tool when changing to a new map with that tool disabled.
+- Fixed an issue with emoji being blurred when zooming in on a map.
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..77a1323
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,23 @@
+declare module "pepjs";
+declare module "socket.io-msgpack-parser";
+declare module "fake-indexeddb";
+declare module "fake-indexeddb/lib/FDBKeyRange";
+declare module "*.glb" {
+  const source: string;
+  export default source;
+}
+declare module "*.png" {
+  const source: string;
+  export default source;
+}
+declare module "*.mp4" {
+  const source: string;
+  export default source;
+}
+declare module "*.bin" {
+  const source: string;
+  export default source;
+}
+declare module "react-router-hash-link";
+declare module "intersection-observer";
+declare module "ammo.js";
diff --git a/src/helpers/FakeStorage.js b/src/helpers/FakeStorage.ts
similarity index 66%
rename from src/helpers/FakeStorage.js
rename to src/helpers/FakeStorage.ts
index d464924..b4af379 100644
--- a/src/helpers/FakeStorage.js
+++ b/src/helpers/FakeStorage.ts
@@ -2,17 +2,17 @@
  * A faked local or session storage used when the user has disabled storage
  */
 class FakeStorage {
-  data = {};
-  key(index) {
+  data: { [keyName: string]: any } = {};
+  key(index: number) {
     return Object.keys(this.data)[index] || null;
   }
-  getItem(keyName) {
+  getItem(keyName: string) {
     return this.data[keyName] || null;
   }
-  setItem(keyName, keyValue) {
+  setItem(keyName: string, keyValue: any) {
     this.data[keyName] = keyValue;
   }
-  removeItem(keyName) {
+  removeItem(keyName: string) {
     delete this.data[keyName];
   }
   clear() {
diff --git a/src/helpers/KonvaBridge.js b/src/helpers/KonvaBridge.tsx
similarity index 87%
rename from src/helpers/KonvaBridge.js
rename to src/helpers/KonvaBridge.tsx
index c71e9a4..bcd4e37 100644
--- a/src/helpers/KonvaBridge.js
+++ b/src/helpers/KonvaBridge.tsx
@@ -35,6 +35,7 @@ import {
   useGridCellPixelOffset,
   useGridOffset,
   useGridPixelSize,
+  useGridSnappingSensitivity,
   GridContext,
   GridPixelSizeContext,
   GridCellPixelSizeContext,
@@ -42,13 +43,24 @@ import {
   GridOffsetContext,
   GridStrokeWidthContext,
   GridCellPixelOffsetContext,
+  GridSnappingSensitivityContext,
 } from "../contexts/GridContext";
 import DatabaseContext, { useDatabase } from "../contexts/DatabaseContext";
 
+type StageRender = (wrapped: React.ReactNode) => React.ReactElement;
+
+type KonvaBridgeProps = {
+  stageRender: StageRender;
+  children: React.ReactNode;
+};
+
 /**
  * Provide a bridge for konva that forwards our contexts
  */
-function KonvaBridge({ stageRender, children }) {
+function KonvaBridge({
+  stageRender,
+  children,
+}: KonvaBridgeProps): React.ReactElement {
   const mapStageRef = useMapStage();
   const userId = useUserId();
   const settings = useSettings();
@@ -73,6 +85,7 @@ function KonvaBridge({ stageRender, children }) {
   const gridStrokeWidth = useGridStrokeWidth();
   const gridCellPixelOffset = useGridCellPixelOffset();
   const gridOffset = useGridOffset();
+  const gridSnappingSensitivity = useGridSnappingSensitivity();
 
   const database = useDatabase();
 
@@ -118,7 +131,13 @@ function KonvaBridge({ stageRender, children }) {
                                                 <GridCellPixelOffsetContext.Provider
                                                   value={gridCellPixelOffset}
                                                 >
-                                                  {children}
+                                                  <GridSnappingSensitivityContext.Provider
+                                                    value={
+                                                      gridSnappingSensitivity
+                                                    }
+                                                  >
+                                                    {children}
+                                                  </GridSnappingSensitivityContext.Provider>
                                                 </GridCellPixelOffsetContext.Provider>
                                               </GridStrokeWidthContext.Provider>
                                             </GridOffsetContext.Provider>
diff --git a/src/helpers/Settings.js b/src/helpers/Settings.ts
similarity index 85%
rename from src/helpers/Settings.js
rename to src/helpers/Settings.ts
index 348fc3f..f4c4382 100644
--- a/src/helpers/Settings.js
+++ b/src/helpers/Settings.ts
@@ -8,7 +8,7 @@ class Settings {
   currentVersion;
   storage;
 
-  constructor(name) {
+  constructor(name: string) {
     this.name = name;
     // Try and use local storage if it is available, if not mock it with an in memory storage
     try {
@@ -22,30 +22,30 @@ class Settings {
     this.currentVersion = this.get("__version");
   }
 
-  version(versionNumber, upgradeFunction) {
+  version(versionNumber: number, upgradeFunction: Function) {
     if (versionNumber > this.currentVersion) {
       this.currentVersion = versionNumber;
       this.setAll(upgradeFunction(this.getAll()));
     }
   }
 
-  getAll() {
+  getAll(): any {
     return JSON.parse(this.storage.getItem(this.name));
   }
 
-  get(key) {
+  get(key: string) {
     const settings = this.getAll();
     return settings && settings[key];
   }
 
-  setAll(newSettings) {
+  setAll(newSettings: any) {
     this.storage.setItem(
       this.name,
       JSON.stringify({ ...newSettings, __version: this.currentVersion })
     );
   }
 
-  set(key, value) {
+  set(key: string, value: string) {
     let settings = this.getAll();
     settings[key] = value;
     this.setAll(settings);
diff --git a/src/helpers/Size.js b/src/helpers/Size.ts
similarity index 72%
rename from src/helpers/Size.js
rename to src/helpers/Size.ts
index 8330c45..eddfd43 100644
--- a/src/helpers/Size.js
+++ b/src/helpers/Size.ts
@@ -8,9 +8,9 @@ class Size extends Vector2 {
   /**
    * @param {number} width
    * @param {number} height
-   * @param {number=} radius Used to represent hexagon sizes
+   * @param {number} radius Used to represent hexagon sizes
    */
-  constructor(width, height, radius) {
+  constructor(width: number, height: number, radius?: number) {
     super(width, height);
     this._radius = radius;
   }
@@ -18,35 +18,35 @@ class Size extends Vector2 {
   /**
    * @returns {number}
    */
-  get width() {
+  get width(): number {
     return this.x;
   }
 
   /**
    * @param {number} width
    */
-  set width(width) {
+  set width(width: number) {
     this.x = width;
   }
 
   /**
    * @returns {number}
    */
-  get height() {
+  get height(): number {
     return this.y;
   }
 
   /**
    * @param {number} height
    */
-  set height(height) {
+  set height(height: number) {
     this.y = height;
   }
 
   /**
    * @returns {number}
    */
-  get radius() {
+  get radius(): number {
     if (this._radius) {
       return this._radius;
     } else {
@@ -57,7 +57,7 @@ class Size extends Vector2 {
   /**
    * @param {number} radius
    */
-  set radius(radius) {
+  set radius(radius: number) {
     this._radius = radius;
   }
 }
diff --git a/src/helpers/Vector2.js b/src/helpers/Vector2.ts
similarity index 79%
rename from src/helpers/Vector2.js
rename to src/helpers/Vector2.ts
index b6da555..f3f6e37 100644
--- a/src/helpers/Vector2.js
+++ b/src/helpers/Vector2.ts
@@ -5,6 +5,14 @@ import {
   floorTo as floorToNumber,
 } from "./shared";
 
+export type BoundingBox = {
+  min: Vector2;
+  max: Vector2;
+  width: number;
+  height: number;
+  center: Vector2;
+};
+
 /**
  * Vector class with x, y and static helper methods
  */
@@ -12,17 +20,17 @@ class Vector2 {
   /**
    * @type {number} x - X component of the vector
    */
-  x;
+  x: number;
   /**
    * @type {number} y - Y component of the vector
    */
-  y;
+  y: number;
 
   /**
    * @param {number} x
    * @param {number} y
    */
-  constructor(x, y) {
+  constructor(x: number, y: number) {
     this.x = x;
     this.y = y;
   }
@@ -31,15 +39,16 @@ class Vector2 {
    * @param {Vector2} p
    * @returns {number} Length squared of `p`
    */
-  static lengthSquared(p) {
+  static lengthSquared(p: Vector2): number {
     return p.x * p.x + p.y * p.y;
   }
 
   /**
+   * Returns the length of vector `p` Note: magnitude to not conflict with native length property
    * @param {Vector2} p
    * @returns {number} Length of `p`
    */
-  static length(p) {
+  static magnitude(p: Vector2): number {
     return Math.sqrt(this.lengthSquared(p));
   }
 
@@ -47,8 +56,8 @@ class Vector2 {
    * @param {Vector2} p
    * @returns {Vector2} `p` normalized, if length of `p` is 0 `{x: 0, y: 0}` is returned
    */
-  static normalize(p) {
-    const l = this.length(p);
+  static normalize(p: Vector2): Vector2 {
+    const l = this.magnitude(p);
     if (l === 0) {
       return { x: 0, y: 0 };
     }
@@ -60,7 +69,7 @@ class Vector2 {
    * @param {Vector2} b
    * @returns {number}  Dot product between `a` and `b`
    */
-  static dot(a, b) {
+  static dot(a: Vector2, b: Vector2): number {
     return a.x * b.x + a.y * b.y;
   }
 
@@ -69,7 +78,7 @@ class Vector2 {
    * @param {(Vector2 | number)} b
    * @returns {Vector2} a - b
    */
-  static subtract(a, b) {
+  static subtract(a: Vector2, b: Vector2 | number): Vector2 {
     if (typeof b === "number") {
       return { x: a.x - b, y: a.y - b };
     } else {
@@ -82,7 +91,7 @@ class Vector2 {
    * @param {(Vector2 | number)} b
    * @returns {Vector2} a + b
    */
-  static add(a, b) {
+  static add(a: Vector2, b: Vector2 | number): Vector2 {
     if (typeof b === "number") {
       return { x: a.x + b, y: a.y + b };
     } else {
@@ -95,7 +104,7 @@ class Vector2 {
    * @param {(Vector2 | number)} b
    * @returns {Vector2} a * b
    */
-  static multiply(a, b) {
+  static multiply(a: Vector2, b: Vector2 | number): Vector2 {
     if (typeof b === "number") {
       return { x: a.x * b, y: a.y * b };
     } else {
@@ -108,7 +117,7 @@ class Vector2 {
    * @param {(Vector2 | number)} b
    * @returns {Vector2} a / b
    */
-  static divide(a, b) {
+  static divide(a: Vector2, b: Vector2 | number): Vector2 {
     if (typeof b === "number") {
       return { x: a.x / b, y: a.y / b };
     } else {
@@ -123,7 +132,7 @@ class Vector2 {
    * @param {number} angle Angle of rotation in degrees
    * @returns {Vector2} Rotated point
    */
-  static rotate(point, origin, angle) {
+  static rotate(point: Vector2, origin: Vector2, angle: number): Vector2 {
     const cos = Math.cos(toRadians(angle));
     const sin = Math.sin(toRadians(angle));
     const dif = this.subtract(point, origin);
@@ -139,48 +148,63 @@ class Vector2 {
    * @param {number} angle Angle of rotation in degrees
    * @returns {Vector2} Rotated direction
    */
-  static rotateDirection(direction, angle) {
+  static rotateDirection(direction: Vector2, angle: number): Vector2 {
     return this.rotate(direction, { x: 0, y: 0 }, angle);
   }
 
   /**
-   * Returns the min of `value` and `minimum`, if `minimum` is undefined component wise min is returned instead
+   * Returns the min of `a` and `b`
    * @param {Vector2} a
-   * @param {(Vector2 | number)} [minimum] Value to compare
-   * @returns {(Vector2 | number)}
+   * @param {Vector2 | number} b Value to compare
+   * @returns {Vector2}
    */
-  static min(a, minimum) {
-    if (minimum === undefined) {
-      return a.x < a.y ? a.x : a.y;
-    } else if (typeof minimum === "number") {
-      return { x: Math.min(a.x, minimum), y: Math.min(a.y, minimum) };
+  static min(a: Vector2, b: Vector2 | number): Vector2 {
+    if (typeof b === "number") {
+      return { x: Math.min(a.x, b), y: Math.min(a.y, b) };
     } else {
-      return { x: Math.min(a.x, minimum.x), y: Math.min(a.y, minimum.y) };
+      return { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y) };
     }
   }
+
   /**
-   * Returns the max of `a` and `maximum`, if `maximum` is undefined component wise max is returned instead
+   * Returns the component wise minimum of `a`
    * @param {Vector2} a
-   * @param {(Vector2 | number)} [maximum] Value to compare
-   * @returns {(Vector2 | number)}
+   * @returns {number}
    */
-  static max(a, maximum) {
-    if (maximum === undefined) {
-      return a.x > a.y ? a.x : a.y;
-    } else if (typeof maximum === "number") {
-      return { x: Math.max(a.x, maximum), y: Math.max(a.y, maximum) };
+  static componentMin(a: Vector2): number {
+    return a.x < a.y ? a.x : a.y;
+  }
+
+  /**
+   * Returns the max of `a` and `b`
+   * @param {Vector2} a
+   * @param {Vector2 | number} b Value to compare
+   * @returns {Vector2}
+   */
+  static max(a: Vector2, b: Vector2 | number): Vector2 {
+    if (typeof b === "number") {
+      return { x: Math.max(a.x, b), y: Math.max(a.y, b) };
     } else {
-      return { x: Math.max(a.x, maximum.x), y: Math.max(a.y, maximum.y) };
+      return { x: Math.max(a.x, b.x), y: Math.max(a.y, b.y) };
     }
   }
 
+  /**
+   * Returns the component wise maximum of `a`
+   * @param {Vector2} a
+   * @returns {number)}
+   */
+  static componentMax(a: Vector2): number {
+    return a.x > a.y ? a.x : a.y;
+  }
+
   /**
    * Rounds `p` to the nearest value of `to`
    * @param {Vector2} p
    * @param {Vector2} to
    * @returns {Vector2}
    */
-  static roundTo(p, to) {
+  static roundTo(p: Vector2, to: Vector2): Vector2 {
     return {
       x: roundToNumber(p.x, to.x),
       y: roundToNumber(p.y, to.y),
@@ -193,7 +217,7 @@ class Vector2 {
    * @param {Vector2} to
    * @returns {Vector2}
    */
-  static floorTo(p, to) {
+  static floorTo(p: Vector2, to: Vector2): Vector2 {
     return {
       x: floorToNumber(p.x, to.x),
       y: floorToNumber(p.y, to.y),
@@ -204,7 +228,7 @@ class Vector2 {
    * @param {Vector2} a
    * @returns {Vector2} The component wise sign of `a`
    */
-  static sign(a) {
+  static sign(a: Vector2): Vector2 {
     return { x: Math.sign(a.x), y: Math.sign(a.y) };
   }
 
@@ -212,7 +236,7 @@ class Vector2 {
    * @param {Vector2} a
    * @returns {Vector2} The component wise absolute of `a`
    */
-  static abs(a) {
+  static abs(a: Vector2): Vector2 {
     return { x: Math.abs(a.x), y: Math.abs(a.y) };
   }
 
@@ -221,7 +245,7 @@ class Vector2 {
    * @param {(Vector2 | number)} b
    * @returns {Vector2} `a` to the power of `b`
    */
-  static pow(a, b) {
+  static pow(a: Vector2, b: Vector2 | number): Vector2 {
     if (typeof b === "number") {
       return { x: Math.pow(a.x, b), y: Math.pow(a.y, b) };
     } else {
@@ -233,7 +257,7 @@ class Vector2 {
    * @param {Vector2} a
    * @returns {number} The dot product between `a` and `a`
    */
-  static dot2(a) {
+  static dot2(a: Vector2): number {
     return this.dot(a, a);
   }
 
@@ -244,7 +268,7 @@ class Vector2 {
    * @param {number} max
    * @returns {Vector2}
    */
-  static clamp(a, min, max) {
+  static clamp(a: Vector2, min: number, max: number): Vector2 {
     return {
       x: Math.min(Math.max(a.x, min), max),
       y: Math.min(Math.max(a.y, min), max),
@@ -259,11 +283,11 @@ class Vector2 {
    * @param {Vector2} b End of the line
    * @returns {Object} The distance to and the closest point on the line segment
    */
-  static distanceToLine(p, a, b) {
+  static distanceToLine(p: Vector2, a: Vector2, b: Vector2): Object {
     const pa = this.subtract(p, a);
     const ba = this.subtract(b, a);
     const h = Math.min(Math.max(this.dot(pa, ba) / this.dot(ba, ba), 0), 1);
-    const distance = this.length(this.subtract(pa, this.multiply(ba, h)));
+    const distance = this.magnitude(this.subtract(pa, this.multiply(ba, h)));
     const point = this.add(a, this.multiply(ba, h));
     return { distance, point };
   }
@@ -278,7 +302,12 @@ class Vector2 {
    * @param {Vector2} C End of the curve
    * @returns {Object} The distance to and the closest point on the curve
    */
-  static distanceToQuadraticBezier(pos, A, B, C) {
+  static distanceToQuadraticBezier(
+    pos: Vector2,
+    A: Vector2,
+    B: Vector2,
+    C: Vector2
+  ): Object {
     let distance = 0;
     let point = { x: pos.x, y: pos.y };
 
@@ -358,7 +387,7 @@ class Vector2 {
    * @param {Vector2[]} points
    * @returns {BoundingBox}
    */
-  static getBoundingBox(points) {
+  static getBoundingBox(points: Vector2[]): BoundingBox {
     let minX = Number.MAX_VALUE;
     let maxX = Number.MIN_VALUE;
     let minY = Number.MAX_VALUE;
@@ -389,7 +418,7 @@ class Vector2 {
    * @param {Vector2[]} points
    * @returns {boolean}
    */
-  static pointInPolygon(p, points) {
+  static pointInPolygon(p: Vector2, points: Vector2[]): boolean {
     const bounds = this.getBoundingBox(points);
     if (
       p.x < bounds.min.x ||
@@ -422,8 +451,9 @@ class Vector2 {
    * @param {Vector2} a
    * @param {Vector2} b
    * @param {number} threshold
+   * @returns {boolean}
    */
-  static compare(a, b, threshold) {
+  static compare(a: Vector2, b: Vector2, threshold: number): boolean {
     return this.lengthSquared(this.subtract(a, b)) < threshold * threshold;
   }
 
@@ -431,9 +461,10 @@ class Vector2 {
    * Returns the distance between two vectors
    * @param {Vector2} a
    * @param {Vector2} b
+   * @returns {number}
    */
-  static distance(a, b) {
-    return this.length(this.subtract(a, b));
+  static distance(a: Vector2, b: Vector2): number {
+    return this.magnitude(this.subtract(a, b));
   }
 
   /**
@@ -443,15 +474,16 @@ class Vector2 {
    * @param {number} alpha
    * @returns {Vector2}
    */
-  static lerp(a, b, alpha) {
+  static lerp(a: Vector2, b: Vector2, alpha: number): Vector2 {
     return { x: lerpNumber(a.x, b.x, alpha), y: lerpNumber(a.y, b.y, alpha) };
   }
 
   /**
    * Returns total length of a an array of points treated as a path
    * @param {Vector2[]} points the array of points in the path
+   * @returns {number}
    */
-  static pathLength(points) {
+  static pathLength(points: Vector2[]): number {
     let l = 0;
     for (let i = 1; i < points.length; i++) {
       l += this.distance(points[i - 1], points[i]);
@@ -464,8 +496,9 @@ class Vector2 {
    * based off of http://depts.washington.edu/acelab/proj/dollar/index.html
    * @param {Vector2[]} points the points to resample
    * @param {number} n the number of new points
+   * @returns {Vector2[]}
    */
-  static resample(points, n) {
+  static resample(points: Vector2[], n: number): Vector2[] {
     if (points.length === 0 || n <= 0) {
       return [];
     }
@@ -501,7 +534,10 @@ class Vector2 {
    * @param {("counterClockwise"|"clockwise")=} direction Direction to rotate the vector
    * @returns {Vector2}
    */
-  static rotate90(p, direction = "clockwise") {
+  static rotate90(
+    p: Vector2,
+    direction: "counterClockwise" | "clockwise" = "clockwise"
+  ): Vector2 {
     if (direction === "clockwise") {
       return { x: p.y, y: -p.x };
     } else {
@@ -514,7 +550,7 @@ class Vector2 {
    * @param {Vector2[]} points
    * @returns {Vector2}
    */
-  static centroid(points) {
+  static centroid(points: Vector2[]): Vector2 {
     let center = { x: 0, y: 0 };
     for (let point of points) {
       center.x += point.x;
@@ -531,7 +567,7 @@ class Vector2 {
    * @param {Vector2[]} points
    * @returns {boolean}
    */
-  static rectangular(points) {
+  static rectangular(points: Vector2[]): boolean {
     if (points.length !== 4) {
       return false;
     }
@@ -554,7 +590,7 @@ class Vector2 {
    * @param {Vector2[]} points
    * @returns {boolean}
    */
-  static circular(points, threshold = 0.1) {
+  static circular(points: Vector2[], threshold = 0.1): boolean {
     const centroid = this.centroid(points);
     let distances = [];
     for (let point of points) {
diff --git a/src/helpers/Vector3.js b/src/helpers/Vector3.ts
similarity index 88%
rename from src/helpers/Vector3.js
rename to src/helpers/Vector3.ts
index d29b8b0..169bb83 100644
--- a/src/helpers/Vector3.js
+++ b/src/helpers/Vector3.ts
@@ -5,22 +5,22 @@ class Vector3 {
   /**
    * @type {number} x - X component of the vector
    */
-  x;
+  x: number;
   /**
    * @type {number} y - Y component of the vector
    */
-  y;
+  y: number;
   /**
    * @type {number} z - Z component of the vector
    */
-  z;
+  z: number;
 
   /**
    * @param {number} x
    * @param {number} y
    * @param {number} z
    */
-  constructor(x, y, z) {
+  constructor(x: number, y: number, z: number) {
     this.x = x;
     this.y = y;
     this.z = z;
@@ -31,7 +31,7 @@ class Vector3 {
    * @param {Vector3} cube
    * @returns {Vector3}
    */
-  static cubeRound(cube) {
+  static cubeRound(cube: Vector3): Vector3 {
     var rX = Math.round(cube.x);
     var rY = Math.round(cube.y);
     var rZ = Math.round(cube.z);
diff --git a/src/helpers/actions.js b/src/helpers/actions.js
deleted file mode 100644
index 90d882b..0000000
--- a/src/helpers/actions.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import shortid from "shortid";
-
-export function addPolygonDifferenceToShapes(shape, difference, shapes) {
-  for (let i = 0; i < difference.length; i++) {
-    let newId = shortid.generate();
-    // Holes detected
-    let holes = [];
-    if (difference[i].length > 1) {
-      for (let j = 1; j < difference[i].length; j++) {
-        holes.push(difference[i][j].map(([x, y]) => ({ x, y })));
-      }
-    }
-
-    const points = difference[i][0].map(([x, y]) => ({ x, y }));
-
-    shapes[newId] = {
-      ...shape,
-      id: newId,
-      data: {
-        points,
-        holes,
-      },
-    };
-  }
-}
-
-export function addPolygonIntersectionToShapes(shape, intersection, shapes) {
-  for (let i = 0; i < intersection.length; i++) {
-    let newId = shortid.generate();
-
-    const points = intersection[i][0].map(([x, y]) => ({ x, y }));
-
-    shapes[newId] = {
-      ...shape,
-      id: newId,
-      data: {
-        points,
-        holes: [],
-      },
-      // Default intersection visibility to false
-      visible: false,
-    };
-  }
-}
-
-export function shapeToGeometry(shape) {
-  const shapePoints = shape.data.points.map(({ x, y }) => [x, y]);
-  const shapeHoles = shape.data.holes.map((hole) =>
-    hole.map(({ x, y }) => [x, y])
-  );
-  return [[shapePoints, ...shapeHoles]];
-}
diff --git a/src/helpers/actions.ts b/src/helpers/actions.ts
new file mode 100644
index 0000000..a50b77f
--- /dev/null
+++ b/src/helpers/actions.ts
@@ -0,0 +1,70 @@
+import { MultiPolygon, Ring, Polygon, Geom } from "polygon-clipping";
+import shortid from "shortid";
+import { Fog, FogState } from "../types/Fog";
+
+export function addPolygonDifferenceToFog(
+  fog: Fog,
+  difference: MultiPolygon,
+  shapes: FogState
+) {
+  for (let i = 0; i < difference.length; i++) {
+    let newId = shortid.generate();
+    // Holes detected
+    let holes = [];
+    if (difference[i].length > 1) {
+      for (let j = 1; j < difference[i].length; j++) {
+        holes.push(
+          difference[i][j].map(([x, y]: [x: number, y: number]) => ({ x, y }))
+        );
+      }
+    }
+
+    const points = difference[i][0].map(([x, y]: [x: number, y: number]) => ({
+      x,
+      y,
+    }));
+
+    shapes[newId] = {
+      ...fog,
+      id: newId,
+      data: {
+        points,
+        holes,
+      },
+    };
+  }
+}
+
+export function addPolygonIntersectionToFog(
+  shape: Fog,
+  intersection: MultiPolygon,
+  shapes: FogState
+) {
+  for (let i = 0; i < intersection.length; i++) {
+    let newId = shortid.generate();
+
+    const points = intersection[i][0].map(([x, y]: [x: number, y: number]) => ({
+      x,
+      y,
+    }));
+
+    shapes[newId] = {
+      ...shape,
+      id: newId,
+      data: {
+        points,
+        holes: [],
+      },
+      // Default intersection visibility to false
+      visible: false,
+    };
+  }
+}
+
+export function fogToGeometry(fog: Fog): Geom {
+  const shapePoints: Ring = fog.data.points.map(({ x, y }) => [x, y]);
+  const shapeHoles: Polygon = fog.data.holes.map((hole) =>
+    hole.map(({ x, y }) => [x, y])
+  );
+  return [[shapePoints, ...shapeHoles]];
+}
diff --git a/src/helpers/babylon.js b/src/helpers/babylon.ts
similarity index 84%
rename from src/helpers/babylon.js
rename to src/helpers/babylon.ts
index a70c79c..230a07c 100644
--- a/src/helpers/babylon.js
+++ b/src/helpers/babylon.ts
@@ -1,7 +1,7 @@
 import { Texture } from "@babylonjs/core/Materials/Textures/texture";
 
 // Turn texture load into an async function so it can be awaited
-export async function importTextureAsync(url) {
+export async function importTextureAsync(url: string): Promise<Texture> {
   return new Promise((resolve, reject) => {
     let texture = new Texture(
       url,
diff --git a/src/helpers/blobToBuffer.js b/src/helpers/blobToBuffer.ts
similarity index 64%
rename from src/helpers/blobToBuffer.js
rename to src/helpers/blobToBuffer.ts
index e228557..f97396a 100644
--- a/src/helpers/blobToBuffer.js
+++ b/src/helpers/blobToBuffer.ts
@@ -2,21 +2,17 @@
  * @param {Blob} blob
  * @returns {Promise<Uint8Array>}
  */
-async function blobToBuffer(blob) {
+async function blobToBuffer(blob: Blob): Promise<Uint8Array> {
   if (blob.arrayBuffer) {
     const arrayBuffer = await blob.arrayBuffer();
     return new Uint8Array(arrayBuffer);
   } else {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       const reader = new FileReader();
 
-      function onLoadEnd(event) {
+      function onLoadEnd() {
         reader.removeEventListener("loadend", onLoadEnd, false);
-        if (event.error) {
-          reject(event.error);
-        } else {
-          resolve(Buffer.from(reader.result));
-        }
+        resolve(Buffer.from(reader.result as ArrayBuffer));
       }
 
       reader.addEventListener("loadend", onLoadEnd, false);
diff --git a/src/helpers/colors.js b/src/helpers/colors.ts
similarity index 74%
rename from src/helpers/colors.js
rename to src/helpers/colors.ts
index ccb5e32..946aae2 100644
--- a/src/helpers/colors.js
+++ b/src/helpers/colors.ts
@@ -12,8 +12,13 @@ const colors = {
   darkGray: "rgb(90, 90, 90)",
   lightGray: "rgb(179, 179, 179)",
   white: "rgb(255, 255, 255)",
+  primary: "hsl(260, 100%, 80%)",
 };
 
-export const colorOptions = Object.keys(colors);
+export type Colors = typeof colors;
+
+export type Color = keyof Colors;
+
+export const colorOptions = Object.keys(colors) as Color[];
 
 export default colors;
diff --git a/src/helpers/dexie.js b/src/helpers/dexie.js
deleted file mode 100644
index 9c82927..0000000
--- a/src/helpers/dexie.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import set from "lodash.set";
-import unset from "lodash.unset";
-import cloneDeep from "lodash.clonedeep";
-
-/**
- * Remove all empty values from an object recursively
- * @param {Object} obj
- */
-function trimArraysInObject(obj) {
-  for (let key in obj) {
-    const value = obj[key];
-    if (Array.isArray(value)) {
-      let arr = [];
-      for (let i = 0; i < value.length; i++) {
-        const el = value[i];
-        if (typeof el === "object") {
-          arr.push(trimArraysInObject(el));
-        } else if (el !== undefined) {
-          arr.push(el);
-        }
-      }
-      obj[key] = arr;
-    } else if (typeof obj[key] === "object") {
-      obj[key] = trimArraysInObject(obj[key]);
-    }
-  }
-  return obj;
-}
-
-export function applyObservableChange(change) {
-  // Custom application of dexie change to fix issue with array indices being wrong
-  // https://github.com/dfahlander/Dexie.js/issues/1176
-  // TODO: Fix dexie observable source
-  let obj = cloneDeep(change.oldObj);
-  const changes = Object.entries(change.mods).reverse();
-  for (let [key, value] of changes) {
-    if (value === null) {
-      unset(obj, key);
-    } else {
-      obj = set(obj, key, value);
-    }
-  }
-
-  // Trim empty values from calling unset on arrays
-  obj = trimArraysInObject(obj);
-
-  return obj;
-}
diff --git a/src/helpers/dice.js b/src/helpers/dice.ts
similarity index 74%
rename from src/helpers/dice.js
rename to src/helpers/dice.ts
index 4a8c6d1..fd24865 100644
--- a/src/helpers/dice.js
+++ b/src/helpers/dice.ts
@@ -1,12 +1,15 @@
+import { InstancedMesh, TransformNode } from "@babylonjs/core";
 import { Vector3 } from "@babylonjs/core/Maths/math";
 
+import { DiceMesh, DiceRoll } from "../types/Dice";
+
 /**
  * Find the number facing up on a mesh instance of a dice
  * @param {Object} instance The dice instance
  */
-export function getDiceInstanceRoll(instance) {
+export function getDiceInstanceRoll(instance: InstancedMesh) {
   let highestDot = -1;
-  let highestLocator;
+  let highestLocator: TransformNode | undefined = undefined;
   for (let locator of instance.getChildTransformNodes()) {
     let dif = locator
       .getAbsolutePosition()
@@ -27,12 +30,11 @@ export function getDiceInstanceRoll(instance) {
 
 /**
  * Find the number facing up on a dice object
- * @param {Object} dice The Dice object
  */
-export function getDiceRoll(dice) {
+export function getDiceRoll(dice: DiceMesh) {
   let number = getDiceInstanceRoll(dice.instance);
   // If the dice is a d100 add the d10
-  if (dice.type === "d100") {
+  if (dice.d10Instance) {
     const d10Number = getDiceInstanceRoll(dice.d10Instance);
     // Both zero set to 100
     if (d10Number === 0 && number === 0) {
@@ -46,8 +48,8 @@ export function getDiceRoll(dice) {
   return { type: dice.type, roll: number };
 }
 
-export function getDiceRollTotal(diceRolls) {
-  return diceRolls.reduce((accumulator, dice) => {
+export function getDiceRollTotal(diceRolls: DiceRoll[]) {
+  return diceRolls.reduce((accumulator: number, dice) => {
     if (dice.roll === "unknown") {
       return accumulator;
     } else {
diff --git a/src/helpers/diff.js b/src/helpers/diff.ts
similarity index 69%
rename from src/helpers/diff.js
rename to src/helpers/diff.ts
index c1b503a..9eee365 100644
--- a/src/helpers/diff.js
+++ b/src/helpers/diff.ts
@@ -1,7 +1,7 @@
-import { applyChange, revertChange, diff as deepDiff } from "deep-diff";
+import { applyChange, Diff, revertChange, diff as deepDiff } from "deep-diff";
 import get from "lodash.get";
 
-export function applyChanges(target, changes) {
+export function applyChanges<LHS>(target: LHS, changes: Diff<LHS>[]) {
   for (let change of changes) {
     if (change.path && (change.kind === "E" || change.kind === "A")) {
       // If editing an object or array ensure that the value exists
@@ -15,7 +15,7 @@ export function applyChanges(target, changes) {
   }
 }
 
-export function revertChanges(target, changes) {
+export function revertChanges<LHS>(target: LHS, changes: Diff<LHS>[]) {
   for (let change of changes) {
     revertChange(target, true, change);
   }
diff --git a/src/helpers/drawing.js b/src/helpers/drawing.ts
similarity index 78%
rename from src/helpers/drawing.js
rename to src/helpers/drawing.ts
index 00966a3..a4d2dee 100644
--- a/src/helpers/drawing.js
+++ b/src/helpers/drawing.ts
@@ -1,78 +1,20 @@
 import simplify from "simplify-js";
-import polygonClipping from "polygon-clipping";
+import polygonClipping, { Geom, Polygon, Ring } from "polygon-clipping";
 
-import Vector2 from "./Vector2";
+import Vector2, { BoundingBox } from "./Vector2";
+import Size from "./Size";
 import { toDegrees } from "./shared";
 import { getNearestCellCoordinates, getCellLocation } from "./grid";
 
-/**
- * @typedef PointsData
- * @property {Vector2[]} points
- */
-
-/**
- * @typedef RectData
- * @property {number} x
- * @property {number} y
- * @property {number} width
- * @property {number} height
- */
-
-/**
- * @typedef CircleData
- * @property {number} x
- * @property {number} y
- * @property {number} radius
- */
-/**
- * @typedef FogData
- * @property {Vector2[]} points
- * @property {Vector2[]} holes
- */
-
-/**
- * @typedef {(PointsData|RectData|CircleData)} ShapeData
- */
-
-/**
- * @typedef {("line"|"rectangle"|"circle"|"triangle")} ShapeType
- */
-
-/**
- * @typedef {("fill"|"stroke")} PathType
- */
-
-/**
- * @typedef Path
- * @property {boolean} blend
- * @property {string} color
- * @property {PointsData} data
- * @property {string} id
- * @property {PathType} pathType
- * @property {number} strokeWidth
- * @property {"path"} type
- */
-
-/**
- * @typedef Shape
- * @property {boolean} blend
- * @property {string} color
- * @property {ShapeData} data
- * @property {string} id
- * @property {ShapeType} shapeType
- * @property {number} strokeWidth
- * @property {"shape"} type
- */
-
-/**
- * @typedef Fog
- * @property {string} color
- * @property {FogData} data
- * @property {string} id
- * @property {number} strokeWidth
- * @property {"fog"} type
- * @property {boolean} visible
- */
+import {
+  ShapeType,
+  ShapeData,
+  PointsData,
+  RectData,
+  CircleData,
+} from "../types/Drawing";
+import { Fog } from "../types/Fog";
+import { Grid } from "../types/Grid";
 
 /**
  *
@@ -80,7 +22,10 @@ import { getNearestCellCoordinates, getCellLocation } from "./grid";
  * @param {Vector2} brushPosition
  * @returns {ShapeData}
  */
-export function getDefaultShapeData(type, brushPosition) {
+export function getDefaultShapeData(
+  type: ShapeType,
+  brushPosition: Vector2
+): ShapeData {
   if (type === "line") {
     return {
       points: [
@@ -105,6 +50,8 @@ export function getDefaultShapeData(type, brushPosition) {
         { x: brushPosition.x, y: brushPosition.y },
       ],
     };
+  } else {
+    throw new Error("Shape type not implemented");
   }
 }
 
@@ -112,7 +59,7 @@ export function getDefaultShapeData(type, brushPosition) {
  * @param {Vector2} cellSize
  * @returns {Vector2}
  */
-export function getGridCellRatio(cellSize) {
+export function getGridCellRatio(cellSize: Vector2): Vector2 {
   if (cellSize.x < cellSize.y) {
     return { x: cellSize.y / cellSize.x, y: 1 };
   } else if (cellSize.y < cellSize.x) {
@@ -131,30 +78,33 @@ export function getGridCellRatio(cellSize) {
  * @returns {ShapeData}
  */
 export function getUpdatedShapeData(
-  type,
-  data,
-  brushPosition,
-  gridCellNormalizedSize,
-  mapWidth,
-  mapHeight
-) {
+  type: ShapeType,
+  data: ShapeData,
+  brushPosition: Vector2,
+  gridCellNormalizedSize: Vector2,
+  mapWidth: number,
+  mapHeight: number
+): ShapeData {
   if (type === "line") {
+    data = data as PointsData;
     return {
       points: [data.points[0], { x: brushPosition.x, y: brushPosition.y }],
-    };
+    } as PointsData;
   } else if (type === "circle") {
+    data = data as CircleData;
     const gridRatio = getGridCellRatio(gridCellNormalizedSize);
     const dif = Vector2.subtract(brushPosition, {
       x: data.x,
       y: data.y,
     });
     const scaled = Vector2.multiply(dif, gridRatio);
-    const distance = Vector2.length(scaled);
+    const distance = Vector2.magnitude(scaled);
     return {
       ...data,
       radius: distance,
     };
   } else if (type === "rectangle") {
+    data = data as RectData;
     const dif = Vector2.subtract(brushPosition, { x: data.x, y: data.y });
     return {
       ...data,
@@ -162,6 +112,7 @@ export function getUpdatedShapeData(
       height: dif.y,
     };
   } else if (type === "triangle") {
+    data = data as PointsData;
     // Convert to absolute coordinates
     const mapSize = { x: mapWidth, y: mapHeight };
     const brushPositionPixel = Vector2.multiply(brushPosition, mapSize);
@@ -169,7 +120,7 @@ export function getUpdatedShapeData(
     const points = data.points;
     const startPixel = Vector2.multiply(points[0], mapSize);
     const dif = Vector2.subtract(brushPositionPixel, startPixel);
-    const length = Vector2.length(dif);
+    const length = Vector2.magnitude(dif);
     const direction = Vector2.normalize(dif);
     // Get the angle for a triangle who's width is the same as it's length
     const angle = Math.atan(length / 2 / (length === 0 ? 1 : length));
@@ -189,6 +140,8 @@ export function getUpdatedShapeData(
         Vector2.add(Vector2.multiply(rightDirNorm, sideLength), points[0]),
       ],
     };
+  } else {
+    throw new Error("Shape type not implemented");
   }
 }
 
@@ -197,7 +150,10 @@ export function getUpdatedShapeData(
  * @param {Vector2[]} points
  * @param {number} tolerance
  */
-export function simplifyPoints(points, tolerance) {
+export function simplifyPoints(
+  points: Vector2[],
+  tolerance: number
+): Vector2[] {
   return simplify(points, tolerance);
 }
 
@@ -207,43 +163,53 @@ export function simplifyPoints(points, tolerance) {
  * @param {boolean} ignoreHidden
  * @returns {Fog[]}
  */
-export function mergeFogShapes(shapes, ignoreHidden = true) {
+export function mergeFogShapes(
+  shapes: Fog[],
+  ignoreHidden: boolean = true
+): Fog[] {
   if (shapes.length === 0) {
     return shapes;
   }
-  let geometries = [];
+  let geometries: Geom[] = [];
   for (let shape of shapes) {
     if (ignoreHidden && !shape.visible) {
       continue;
     }
-    const shapePoints = shape.data.points.map(({ x, y }) => [x, y]);
-    const shapeHoles = shape.data.holes.map((hole) =>
-      hole.map(({ x, y }) => [x, y])
+    const shapePoints: Ring = shape.data.points.map(({ x, y }) => [x, y]);
+    const shapeHoles: Polygon = shape.data.holes.map((hole) =>
+      hole.map(({ x, y }: { x: number; y: number }) => [x, y])
     );
-    let shapeGeom = [[shapePoints, ...shapeHoles]];
+    let shapeGeom: Geom = [[shapePoints, ...shapeHoles]];
     geometries.push(shapeGeom);
   }
   if (geometries.length === 0) {
-    return geometries;
+    return [];
   }
   try {
-    let union = polygonClipping.union(...geometries);
-    let merged = [];
+    let union = polygonClipping.union(geometries[0], ...geometries.slice(1));
+    let merged: Fog[] = [];
     for (let i = 0; i < union.length; i++) {
-      let holes = [];
+      let holes: Vector2[][] = [];
       if (union[i].length > 1) {
         for (let j = 1; j < union[i].length; j++) {
           holes.push(union[i][j].map(([x, y]) => ({ x, y })));
         }
       }
+      // find the first visible shape
+      let visibleShape = shapes.find((shape) => ignoreHidden || shape.visible);
+      if (!visibleShape) {
+        // TODO: handle if visible shape not found
+        throw Error;
+      }
       merged.push({
         // Use the data of the first visible shape as the merge
-        ...shapes.find((shape) => ignoreHidden || shape.visible),
+        ...visibleShape,
         id: `merged-${i}`,
         data: {
           points: union[i][0].map(([x, y]) => ({ x, y })),
           holes,
         },
+        type: "fog",
       });
     }
     return merged;
@@ -258,7 +224,10 @@ export function mergeFogShapes(shapes, ignoreHidden = true) {
  * @param {boolean} maxPoints Max amount of points per shape to get bounds for
  * @returns {Vector2.BoundingBox[]}
  */
-export function getFogShapesBoundingBoxes(shapes, maxPoints = 0) {
+export function getFogShapesBoundingBoxes(
+  shapes: Fog[],
+  maxPoints = 0
+): BoundingBox[] {
   let boxes = [];
   for (let shape of shapes) {
     if (maxPoints > 0 && shape.data.points.length > maxPoints) {
@@ -269,20 +238,21 @@ export function getFogShapesBoundingBoxes(shapes, maxPoints = 0) {
   return boxes;
 }
 
-/**
- * @typedef Edge
- * @property {Vector2} start
- * @property {Vector2} end
- */
-
 /**
  * @typedef Guide
  * @property {Vector2} start
  * @property {Vector2} end
  * @property {("horizontal"|"vertical")} orientation
- * @property {number}
+ * @property {number} distance
  */
 
+export type Guide = {
+  start: Vector2;
+  end: Vector2;
+  orientation: "horizontal" | "vertical";
+  distance: number;
+};
+
 /**
  * @param {Vector2} brushPosition Brush position in pixels
  * @param {Vector2} grid
@@ -294,14 +264,14 @@ export function getFogShapesBoundingBoxes(shapes, maxPoints = 0) {
  * @returns {Guide[]}
  */
 export function getGuidesFromGridCell(
-  brushPosition,
-  grid,
-  gridCellSize,
-  gridOffset,
-  gridCellOffset,
-  snappingSensitivity,
-  mapSize
-) {
+  brushPosition: Vector2,
+  grid: Grid,
+  gridCellSize: Size,
+  gridOffset: Vector2,
+  gridCellOffset: Vector2,
+  snappingSensitivity: number,
+  mapSize: Vector2
+): Guide[] {
   let boundingBoxes = [];
   // Add map bounds
   boundingBoxes.push(
@@ -361,11 +331,11 @@ export function getGuidesFromGridCell(
  * @returns {Guide[]}
  */
 export function getGuidesFromBoundingBoxes(
-  brushPosition,
-  boundingBoxes,
-  gridCellSize,
-  snappingSensitivity
-) {
+  brushPosition: Vector2,
+  boundingBoxes: BoundingBox[],
+  gridCellSize: Vector2, // TODO: check if this was meant to be of type Size
+  snappingSensitivity: number
+): Guide[] {
   let horizontalEdges = [];
   let verticalEdges = [];
   for (let bounds of boundingBoxes) {
@@ -395,7 +365,7 @@ export function getGuidesFromBoundingBoxes(
       end: { x: bounds.max.x, y: bounds.max.y },
     });
   }
-  let guides = [];
+  let guides: Guide[] = [];
   for (let edge of verticalEdges) {
     const distance = Math.abs(brushPosition.x - edge.start.x);
     if (distance / gridCellSize.x < snappingSensitivity) {
@@ -416,8 +386,11 @@ export function getGuidesFromBoundingBoxes(
  * @param {Guide[]} guides
  * @returns {Guide[]}
  */
-export function findBestGuides(brushPosition, guides) {
-  let bestGuides = [];
+export function findBestGuides(
+  brushPosition: Vector2,
+  guides: Guide[]
+): Guide[] {
+  let bestGuides: Guide[] = [];
   let verticalGuide = guides
     .filter((guide) => guide.orientation === "vertical")
     .sort((a, b) => a.distance - b.distance)[0];
diff --git a/src/helpers/grid.js b/src/helpers/grid.ts
similarity index 81%
rename from src/helpers/grid.js
rename to src/helpers/grid.ts
index 57ecd2a..626164a 100644
--- a/src/helpers/grid.js
+++ b/src/helpers/grid.ts
@@ -4,30 +4,11 @@ import Vector2 from "./Vector2";
 import Size from "./Size";
 
 import { logError } from "./logging";
+import { Grid, GridInset, GridScale } from "../types/Grid";
 
 const SQRT3 = 1.73205;
 const GRID_TYPE_NOT_IMPLEMENTED = new Error("Grid type not implemented");
 
-/**
- * @typedef GridInset
- * @property {Vector2} topLeft Top left position of the inset
- * @property {Vector2} bottomRight Bottom right position of the inset
- */
-
-/**
- * @typedef GridMeasurement
- * @property {("chebyshev"|"alternating"|"euclidean"|"manhattan")} type
- * @property {string} scale
- */
-
-/**
- * @typedef Grid
- * @property {GridInset} inset The inset of the grid from the map
- * @property {Vector2} size The number of columns and rows of the grid as `x` and `y`
- * @property {("square"|"hexVertical"|"hexHorizontal")} type
- * @property {GridMeasurement} measurement
- */
-
 /**
  * Gets the size of a grid in pixels taking into account the inset
  * @param {Grid} grid
@@ -35,7 +16,11 @@ const GRID_TYPE_NOT_IMPLEMENTED = new Error("Grid type not implemented");
  * @param {number} baseHeight Height of the grid in pixels before inset
  * @returns {Size}
  */
-export function getGridPixelSize(grid, baseWidth, baseHeight) {
+export function getGridPixelSize(
+  grid: Required<Grid>,
+  baseWidth: number,
+  baseHeight: number
+): Size {
   const width = (grid.inset.bottomRight.x - grid.inset.topLeft.x) * baseWidth;
   const height = (grid.inset.bottomRight.y - grid.inset.topLeft.y) * baseHeight;
   return new Size(width, height);
@@ -48,7 +33,11 @@ export function getGridPixelSize(grid, baseWidth, baseHeight) {
  * @param {number} gridHeight Height of the grid in pixels after inset
  * @returns {Size}
  */
-export function getCellPixelSize(grid, gridWidth, gridHeight) {
+export function getCellPixelSize(
+  grid: Grid,
+  gridWidth: number,
+  gridHeight: number
+): Size {
   if (grid.size.x === 0 || grid.size.y === 0) {
     return new Size(0, 0);
   }
@@ -75,7 +64,12 @@ export function getCellPixelSize(grid, gridWidth, gridHeight) {
  * @param {Size} cellSize Cell size in pixels
  * @returns {Vector2}
  */
-export function getCellLocation(grid, col, row, cellSize) {
+export function getCellLocation(
+  grid: Grid,
+  col: number,
+  row: number,
+  cellSize: Size
+): Vector2 {
   switch (grid.type) {
     case "square":
       return {
@@ -105,7 +99,12 @@ export function getCellLocation(grid, col, row, cellSize) {
  * @param {Size} cellSize Cell size in pixels
  * @returns {Vector2}
  */
-export function getNearestCellCoordinates(grid, x, y, cellSize) {
+export function getNearestCellCoordinates(
+  grid: Grid,
+  x: number,
+  y: number,
+  cellSize: Size
+): Vector2 {
   switch (grid.type) {
     case "square":
       return Vector2.divide(Vector2.floorTo({ x, y }, cellSize), cellSize);
@@ -135,7 +134,12 @@ export function getNearestCellCoordinates(grid, x, y, cellSize) {
  * @param {Size} cellSize Cell size in pixels
  * @returns {Vector2[]}
  */
-export function getCellCorners(grid, x, y, cellSize) {
+export function getCellCorners(
+  grid: Grid,
+  x: number,
+  y: number,
+  cellSize: Size
+): Vector2[] {
   const position = new Vector2(x, y);
   switch (grid.type) {
     case "square":
@@ -175,8 +179,12 @@ export function getCellCorners(grid, x, y, cellSize) {
  * Get the height of a grid based off of its width
  * @param {Grid} grid
  * @param {number} gridWidth Width of the grid in pixels after inset
+ * @returns {number}
  */
-function getGridHeightFromWidth(grid, gridWidth) {
+function getGridHeightFromWidth(
+  grid: Pick<Grid, "type" | "size">,
+  gridWidth: number
+): number {
   switch (grid.type) {
     case "square":
       return (grid.size.y * gridWidth) / grid.size.x;
@@ -198,7 +206,11 @@ function getGridHeightFromWidth(grid, gridWidth) {
  * @param {number} mapHeight Height of the map in pixels before inset
  * @returns {GridInset}
  */
-export function getGridDefaultInset(grid, mapWidth, mapHeight) {
+export function getGridDefaultInset(
+  grid: Pick<Grid, "type" | "size">,
+  mapWidth: number,
+  mapHeight: number
+): GridInset {
   // Max the width of the inset and figure out the resulting height value
   const insetHeightNorm = getGridHeightFromWidth(grid, mapWidth) / mapHeight;
   return { topLeft: { x: 0, y: 0 }, bottomRight: { x: 1, y: insetHeightNorm } };
@@ -211,7 +223,11 @@ export function getGridDefaultInset(grid, mapWidth, mapHeight) {
  * @param {number} mapHeight Height of the map in pixels before inset
  * @returns {GridInset}
  */
-export function getGridUpdatedInset(grid, mapWidth, mapHeight) {
+export function getGridUpdatedInset(
+  grid: Grid,
+  mapWidth: number,
+  mapHeight: number
+): GridInset {
   let inset = {
     topLeft: { ...grid.inset.topLeft },
     bottomRight: { ...grid.inset.bottomRight },
@@ -229,10 +245,10 @@ export function getGridUpdatedInset(grid, mapWidth, mapHeight) {
 
 /**
  * Get the max zoom for a grid
- * @param {Grid} grid
+ * @param {Grid=} grid
  * @returns {number}
  */
-export function getGridMaxZoom(grid) {
+export function getGridMaxZoom(grid?: Grid): number {
   if (!grid) {
     return 10;
   }
@@ -246,7 +262,10 @@ export function getGridMaxZoom(grid) {
  * @param {("hexVertical"|"hexHorizontal")} type
  * @returns {Vector2}
  */
-export function hexCubeToOffset(cube, type) {
+export function hexCubeToOffset(
+  cube: Vector3,
+  type: "hexVertical" | "hexHorizontal"
+) {
   if (type === "hexVertical") {
     const x = cube.x + (cube.z + (cube.z & 1)) / 2;
     const y = cube.z;
@@ -263,7 +282,10 @@ export function hexCubeToOffset(cube, type) {
  * @param {("hexVertical"|"hexHorizontal")} type
  * @returns {Vector3}
  */
-export function hexOffsetToCube(offset, type) {
+export function hexOffsetToCube(
+  offset: Vector2,
+  type: "hexVertical" | "hexHorizontal"
+) {
   if (type === "hexVertical") {
     const x = offset.x - (offset.y + (offset.y & 1)) / 2;
     const z = offset.y;
@@ -282,22 +304,32 @@ export function hexOffsetToCube(offset, type) {
  * @param {Grid} grid
  * @param {Vector2} a
  * @param {Vector2} b
+ * @param {Size} cellSize
  */
-export function gridDistance(grid, a, b, cellSize) {
+export function gridDistance(
+  grid: Grid,
+  a: Vector2,
+  b: Vector2,
+  cellSize: Size
+) {
   // Get grid coordinates
   const aCoord = getNearestCellCoordinates(grid, a.x, a.y, cellSize);
   const bCoord = getNearestCellCoordinates(grid, b.x, b.y, cellSize);
   if (grid.type === "square") {
     if (grid.measurement.type === "chebyshev") {
-      return Vector2.max(Vector2.abs(Vector2.subtract(aCoord, bCoord)));
+      return Vector2.componentMax(
+        Vector2.abs(Vector2.subtract(aCoord, bCoord))
+      );
     } else if (grid.measurement.type === "alternating") {
       // Alternating diagonal distance like D&D 3.5 and Pathfinder
       const delta = Vector2.abs(Vector2.subtract(aCoord, bCoord));
-      const max = Vector2.max(delta);
-      const min = Vector2.min(delta);
+      const max = Vector2.componentMax(delta);
+      const min = Vector2.componentMin(delta);
       return max - min + Math.floor(1.5 * min);
     } else if (grid.measurement.type === "euclidean") {
-      return Vector2.length(Vector2.divide(Vector2.subtract(a, b), cellSize));
+      return Vector2.magnitude(
+        Vector2.divide(Vector2.subtract(a, b), cellSize)
+      );
     } else if (grid.measurement.type === "manhattan") {
       return Math.abs(aCoord.x - bCoord.x) + Math.abs(aCoord.y - bCoord.y);
     }
@@ -313,38 +345,36 @@ export function gridDistance(grid, a, b, cellSize) {
         2
       );
     } else if (grid.measurement.type === "euclidean") {
-      return Vector2.length(Vector2.divide(Vector2.subtract(a, b), cellSize));
+      return Vector2.magnitude(
+        Vector2.divide(Vector2.subtract(a, b), cellSize)
+      );
     }
   }
+  return 0;
 }
 
-/**
- * @typedef GridScale
- * @property {number} multiplier The number multiplier of the scale
- * @property {string} unit The unit of the scale
- * @property {number} digits The precision of the scale
- */
-
 /**
  * Parse a string representation of scale e.g. 5ft into a `GridScale`
  * @param {string} scale
  * @returns {GridScale}
  */
 
-export function parseGridScale(scale) {
+export function parseGridScale(scale: string | null): GridScale {
   if (typeof scale === "string") {
     const match = scale.match(/(\d*)(\.\d*)?([a-zA-Z]*)/);
-    const integer = parseFloat(match[1]);
-    const fractional = parseFloat(match[2]);
-    const unit = match[3] || "";
-    if (!isNaN(integer) && !isNaN(fractional)) {
-      return {
-        multiplier: integer + fractional,
-        unit: unit,
-        digits: match[2].length - 1,
-      };
-    } else if (!isNaN(integer) && isNaN(fractional)) {
-      return { multiplier: integer, unit: unit, digits: 0 };
+    if (match) {
+      const integer = parseFloat(match[1]);
+      const fractional = parseFloat(match[2]);
+      const unit = match[3] || "";
+      if (!isNaN(integer) && !isNaN(fractional)) {
+        return {
+          multiplier: integer + fractional,
+          unit: unit,
+          digits: match[2].length - 1,
+        };
+      } else if (!isNaN(integer) && isNaN(fractional)) {
+        return { multiplier: integer, unit: unit, digits: 0 };
+      }
     }
   }
   return { multiplier: 1, unit: "", digits: 0 };
@@ -355,7 +385,7 @@ export function parseGridScale(scale) {
  * @param {number} n
  * @returns {number[]}
  */
-function factors(n) {
+function factors(n: number): number[] {
   const numbers = Array.from(Array(n + 1), (_, i) => i);
   return numbers.filter((i) => n % i === 0);
 }
@@ -367,7 +397,7 @@ function factors(n) {
  * @param {number} b
  * @returns {number}
  */
-function gcd(a, b) {
+function gcd(a: number, b: number): number {
   while (b !== 0) {
     const t = b;
     b = a % b;
@@ -382,7 +412,7 @@ function gcd(a, b) {
  * @param {number} b
  * @returns {number[]}
  */
-function dividers(a, b) {
+function dividers(a: number, b: number): number[] {
   const d = gcd(a, b);
   return factors(d);
 }
@@ -401,7 +431,7 @@ const maxGridSize = 200;
  * @param {number} y
  * @returns {boolean}
  */
-export function gridSizeVaild(x, y) {
+export function gridSizeVaild(x: number, y: number): boolean {
   return (
     x > minGridSize && y > minGridSize && x < maxGridSize && y < maxGridSize
   );
@@ -409,11 +439,14 @@ export function gridSizeVaild(x, y) {
 
 /**
  * Finds a grid size for an image by finding the closest size to the average grid size
- * @param {Image} image
+ * @param {HTMLImageElement} image
  * @param {number[]} candidates
- * @returns {Vector2}
+ * @returns {Vector2 | null}
  */
-function gridSizeHeuristic(image, candidates) {
+function gridSizeHeuristic(
+  image: HTMLImageElement,
+  candidates: number[]
+): Vector2 | null {
   const width = image.width;
   const height = image.height;
   // Find the best candidate by comparing the absolute z-scores of each axis
@@ -441,11 +474,15 @@ function gridSizeHeuristic(image, candidates) {
 
 /**
  * Finds the grid size of an image by running the image through a machine learning model
- * @param {Image} image
+ * @param {HTMLImageElement} image
  * @param {number[]} candidates
- * @returns {Vector2}
+ * @returns {Vector2 | null}
  */
-async function gridSizeML(image, candidates) {
+async function gridSizeML(
+  image: HTMLImageElement,
+  candidates: number[]
+): Promise<Vector2 | null> {
+  // TODO: check this function because of context and CanvasImageSource -> JSDoc and Typescript do not match
   const width = image.width;
   const height = image.height;
   const ratio = width / height;
@@ -454,6 +491,11 @@ async function gridSizeML(image, candidates) {
   canvas.width = 2048;
   canvas.height = Math.floor(2048 / ratio);
 
+  // TODO: handle if context is null
+  if (!context) {
+    return null;
+  }
+
   context.drawImage(image, 0, 0, canvas.width, canvas.height);
 
   let imageData = context.getImageData(
@@ -507,11 +549,13 @@ async function gridSizeML(image, candidates) {
 
 /**
  * Finds the grid size of an image by either using a ML model or falling back to a heuristic
- * @param {Image} image
+ * @param {HTMLImageElement} image
  * @returns {Vector2}
  */
-export async function getGridSizeFromImage(image) {
-  const candidates = dividers(image.width, image.height);
+export async function getGridSizeFromImage(image: HTMLImageElement) {
+  const width = image.width;
+  const height = image.height;
+  const candidates = dividers(width, height);
   let prediction;
 
   // Try and use ML grid detection
diff --git a/src/helpers/group.js b/src/helpers/group.ts
similarity index 58%
rename from src/helpers/group.js
rename to src/helpers/group.ts
index dd8571b..78124ff 100644
--- a/src/helpers/group.js
+++ b/src/helpers/group.ts
@@ -2,34 +2,14 @@ import { v4 as uuid } from "uuid";
 import cloneDeep from "lodash.clonedeep";
 
 import { keyBy } from "./shared";
-
-/**
- * @typedef GroupItem
- * @property {string} id
- * @property {"item"} type
- */
-
-/**
- * @typedef GroupContainer
- * @property {string} id
- * @property {"group"} type
- * @property {GroupItem[]} items
- * @property {string} name
- */
-
-/**
- * @typedef {GroupItem|GroupContainer} Group
- */
+import { Group, GroupContainer, GroupItem } from "../types/Group";
 
 /**
  * Transform an array of group ids to their groups
- * @param {string[]} groupIds
- * @param {Group[]} groups
- * @return {Group[[]}
  */
-export function groupsFromIds(groupIds, groups) {
+export function groupsFromIds(groupIds: string[], groups: Group[]): Group[] {
   const groupsByIds = keyBy(groups, "id");
-  const filteredGroups = [];
+  const filteredGroups: Group[] = [];
   for (let groupId of groupIds) {
     if (groupId in groupsByIds) {
       filteredGroups.push(groupsByIds[groupId]);
@@ -40,10 +20,8 @@ export function groupsFromIds(groupIds, groups) {
 
 /**
  * Get all items from a group including all sub groups
- * @param {Group} group
- * @return {GroupItem[]}
  */
-export function getGroupItems(group) {
+export function getGroupItems(group: Group): GroupItem[] {
   if (group.type === "group") {
     let groups = [];
     for (let item of group.items) {
@@ -57,14 +35,14 @@ export function getGroupItems(group) {
 
 /**
  * Transform an array of groups into their assosiated items
- * @param {Group[]} groups
- * @param {any[]} allItems
- * @param {string} itemKey
- * @returns {any[]}
  */
-export function itemsFromGroups(groups, allItems, itemKey = "id") {
+export function itemsFromGroups<Item>(
+  groups: Group[],
+  allItems: Item[],
+  itemKey = "id"
+): Item[] {
   const allItemsById = keyBy(allItems, itemKey);
-  const groupedItems = [];
+  const groupedItems: Item[] = [];
 
   for (let group of groups) {
     const groupItems = getGroupItems(group);
@@ -76,47 +54,52 @@ export function itemsFromGroups(groups, allItems, itemKey = "id") {
 }
 
 /**
- * Combine two groups
- * @param {Group} a
- * @param {Group} b
- * @returns {GroupContainer}
+ * Combine a group and a group item
  */
-export function combineGroups(a, b) {
-  if (a.type === "item") {
-    return {
-      id: uuid(),
-      type: "group",
-      items: [a, b],
-      name: "",
-    };
-  }
-  if (a.type === "group") {
-    return {
-      id: a.id,
-      type: "group",
-      items: [...a.items, b],
-      name: a.name,
-    };
+export function combineGroups(a: Group, b: Group): GroupContainer {
+  switch (a.type) {
+    case "item":
+      if (b.type !== "item") {
+        throw new Error("Unable to combine two GroupContainers");
+      }
+      return {
+        id: uuid(),
+        type: "group",
+        items: [a, b],
+        name: "",
+      };
+    case "group":
+      if (b.type !== "item") {
+        throw new Error("Unable to combine two GroupContainers");
+      }
+      return {
+        id: a.id,
+        type: "group",
+        items: [...a.items, b],
+        name: a.name,
+      };
+    default:
+      throw new Error("Group type not implemented");
   }
 }
 
 /**
  * Immutably move group at indices `indices` into group at index `into`
- * @param {Group[]} groups
- * @param {number} into
- * @param {number[]} indices
- * @returns {Group[]}
  */
-export function moveGroupsInto(groups, into, indices) {
+export function moveGroupsInto(
+  groups: Group[],
+  into: number,
+  indices: number[]
+): Group[] {
   const newGroups = cloneDeep(groups);
 
   const intoGroup = newGroups[into];
-  let fromGroups = [];
+  let fromGroups: Group[] = [];
   for (let i of indices) {
     fromGroups.push(newGroups[i]);
   }
 
-  let combined = intoGroup;
+  let combined: Group = intoGroup;
   for (let fromGroup of fromGroups) {
     combined = combineGroups(combined, fromGroup);
   }
@@ -133,12 +116,12 @@ export function moveGroupsInto(groups, into, indices) {
 
 /**
  * Immutably move group at indices `indices` to index `to`
- * @param {Group[]} groups
- * @param {number} into
- * @param {number[]} indices
- * @returns {Group[]}
  */
-export function moveGroups(groups, to, indices) {
+export function moveGroups(
+  groups: Group[],
+  to: number,
+  indices: number[]
+): Group[] {
   const newGroups = cloneDeep(groups);
 
   let fromGroups = [];
@@ -160,28 +143,31 @@ export function moveGroups(groups, to, indices) {
 
 /**
  * Move items from a sub group to the start of the base group
- * @param {Group[]} groups
- * @param {string} fromId The id of the group to move from
- * @param {number[]} indices The indices of the items in the group
+ * @param fromId The id of the group to move from
+ * @param indices The indices of the items in the group
  */
-export function ungroup(groups, fromId, indices) {
+export function ungroup(groups: Group[], fromId: string, indices: number[]) {
   const newGroups = cloneDeep(groups);
 
-  let fromIndex = newGroups.findIndex((group) => group.id === fromId);
+  const fromIndex = newGroups.findIndex((group) => group.id === fromId);
+  const from = newGroups[fromIndex];
+  if (from.type !== "group") {
+    throw new Error(`Unable to ungroup ${fromId}, not a group`);
+  }
 
-  let items = [];
+  let items: GroupItem[] = [];
   for (let i of indices) {
-    items.push(newGroups[fromIndex].items[i]);
+    items.push(from.items[i]);
   }
 
   // Remove items from previous group
   for (let item of items) {
-    const i = newGroups[fromIndex].items.findIndex((el) => el.id === item.id);
-    newGroups[fromIndex].items.splice(i, 1);
+    const i = from.items.findIndex((el) => el.id === item.id);
+    from.items.splice(i, 1);
   }
 
   // If we have no more items in the group delete it
-  if (newGroups[fromIndex].items.length === 0) {
+  if (from.items.length === 0) {
     newGroups.splice(fromIndex, 1);
   }
 
@@ -193,11 +179,8 @@ export function ungroup(groups, fromId, indices) {
 
 /**
  * Recursively find a group within a group array
- * @param {Group[]} groups
- * @param {string} groupId
- * @returns {Group}
  */
-export function findGroup(groups, groupId) {
+export function findGroup(groups: Group[], groupId: string): Group | undefined {
   for (let group of groups) {
     if (group.id === groupId) {
       return group;
@@ -213,28 +196,33 @@ export function findGroup(groups, groupId) {
 
 /**
  * Transform and item array to a record of item ids to item names
- * @param {any[]} items
- * @param {string=} itemKey
  */
-export function getItemNames(items, itemKey = "id") {
-  let names = {};
+export function getItemNames<Item extends { name: string; id: string }>(
+  items: Item[]
+) {
+  let names: Record<string, string> = {};
   for (let item of items) {
-    names[item[itemKey]] = item.name;
+    names[item.id] = item.name;
   }
   return names;
 }
 
 /**
  * Immutably rename a group
- * @param {Group[]} groups
- * @param {string} groupId
- * @param {string} newName
  */
-export function renameGroup(groups, groupId, newName) {
+export function renameGroup(
+  groups: Group[],
+  groupId: string,
+  newName: string
+): Group[] {
   let newGroups = cloneDeep(groups);
   const groupIndex = newGroups.findIndex((group) => group.id === groupId);
+  const group = newGroups[groupIndex];
+  if (group.type !== "group") {
+    throw new Error(`Unable to rename group ${groupId}, not of type group`);
+  }
   if (groupIndex >= 0) {
-    newGroups[groupIndex].name = newName;
+    group.name = newName;
   }
   return newGroups;
 }
@@ -244,7 +232,7 @@ export function renameGroup(groups, groupId, newName) {
  * @param {Group[]} groups
  * @param {string[]} itemIds
  */
-export function removeGroupsItems(groups, itemIds) {
+export function removeGroupsItems(groups: Group[], itemIds: string[]): Group[] {
   let newGroups = cloneDeep(groups);
 
   for (let i = newGroups.length - 1; i >= 0; i--) {
@@ -258,11 +246,11 @@ export function removeGroupsItems(groups, itemIds) {
       for (let j = items.length - 1; j >= 0; j--) {
         const item = items[j];
         if (itemIds.includes(item.id)) {
-          newGroups[i].items.splice(j, 1);
+          group.items.splice(j, 1);
         }
       }
       // Remove group if no items are left
-      if (newGroups[i].items.length === 0) {
+      if (group.items.length === 0) {
         newGroups.splice(i, 1);
       }
     }
diff --git a/src/helpers/image.js b/src/helpers/image.ts
similarity index 67%
rename from src/helpers/image.js
rename to src/helpers/image.ts
index 2223741..605bd83 100644
--- a/src/helpers/image.js
+++ b/src/helpers/image.ts
@@ -3,19 +3,25 @@ import imageOutline from "image-outline";
 import blobToBuffer from "./blobToBuffer";
 import Vector2 from "./Vector2";
 
+import { Outline } from "../types/Outline";
+
 const lightnessDetectionOffset = 0.1;
 
 /**
  * @param {HTMLImageElement} image
  * @returns {boolean} True is the image is light
  */
-export function getImageLightness(image) {
+export function getImageLightness(image: HTMLImageElement): boolean {
   const width = image.width;
   const height = image.height;
   let canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
   let context = canvas.getContext("2d");
+  if (!context) {
+    return false;
+  }
+
   context.drawImage(image, 0, 0);
   const imageData = context.getImageData(0, 0, width, height);
 
@@ -40,12 +46,12 @@ export function getImageLightness(image) {
   return norm + lightnessDetectionOffset >= 0;
 }
 
-/**
- * @typedef CanvasImage
- * @property {Blob|null} blob The blob of the resized image, `null` if the image was unable to be resized to that dimension
- * @property {number} width
- * @property {number} height
- */
+type CanvasImage = {
+  file: Uint8Array;
+  width: number;
+  height: number;
+  mime: string;
+};
 
 /**
  * @param {HTMLCanvasElement} canvas
@@ -53,11 +59,25 @@ export function getImageLightness(image) {
  * @param {number} quality
  * @returns {Promise<CanvasImage>}
  */
-export async function canvasToImage(canvas, type, quality) {
+export async function canvasToImage(
+  canvas: HTMLCanvasElement,
+  type: string,
+  quality: number
+): Promise<CanvasImage | undefined> {
   return new Promise((resolve) => {
     canvas.toBlob(
-      (blob) => {
-        resolve({ blob, width: canvas.width, height: canvas.height });
+      async (blob) => {
+        if (blob) {
+          const file = await blobToBuffer(blob);
+          resolve({
+            file,
+            width: canvas.width,
+            height: canvas.height,
+            mime: type,
+          });
+        } else {
+          resolve(undefined);
+        }
       },
       type,
       quality
@@ -70,9 +90,14 @@ export async function canvasToImage(canvas, type, quality) {
  * @param {number} size the size of the longest edge of the new image
  * @param {string} type the mime type of the image
  * @param {number} quality if image is a jpeg or webp this is the quality setting
- * @returns {Promise<CanvasImage>}
+ * @returns {Promise<CanvasImage | undefined>}
  */
-export async function resizeImage(image, size, type, quality) {
+export async function resizeImage(
+  image: HTMLImageElement,
+  size: number,
+  type: string,
+  quality: number
+): Promise<CanvasImage | undefined> {
   const width = image.width;
   const height = image.height;
   const ratio = width / height;
@@ -85,28 +110,27 @@ export async function resizeImage(image, size, type, quality) {
     canvas.height = size;
   }
   let context = canvas.getContext("2d");
-  context.drawImage(image, 0, 0, canvas.width, canvas.height);
-
+  if (context) {
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  } else {
+    return undefined;
+  }
   return await canvasToImage(canvas, type, quality);
 }
 
-/**
- * @typedef ImageAsset
- * @property {number} width
- * @property {number} height
- * @property {Uint8Array} file
- * @property {string} mime
- */
-
 /**
  * Create a image file with resolution `size`x`size` with cover cropping
  * @param {HTMLImageElement} image the image to resize
  * @param {string} type the mime type of the image
  * @param {number} size the width and height of the thumbnail
  * @param {number} quality if image is a jpeg or webp this is the quality setting
- * @returns {Promise<ImageAsset>}
  */
-export async function createThumbnail(image, type, size = 300, quality = 0.5) {
+export async function createThumbnail(
+  image: HTMLImageElement,
+  type: string,
+  size = 300,
+  quality = 0.5
+): Promise<CanvasImage | undefined> {
   let canvas = document.createElement("canvas");
   canvas.width = size;
   canvas.height = size;
@@ -115,82 +139,51 @@ export async function createThumbnail(image, type, size = 300, quality = 0.5) {
   if (ratio > 1) {
     const center = image.width / 2;
     const halfHeight = image.height / 2;
-    context.drawImage(
-      image,
-      center - halfHeight,
-      0,
-      image.height,
-      image.height,
-      0,
-      0,
-      canvas.width,
-      canvas.height
-    );
+    if (context) {
+      context.drawImage(
+        image,
+        center - halfHeight,
+        0,
+        image.height,
+        image.height,
+        0,
+        0,
+        canvas.width,
+        canvas.height
+      );
+    }
   } else {
     const center = image.height / 2;
     const halfWidth = image.width / 2;
-    context.drawImage(
-      image,
-      0,
-      center - halfWidth,
-      image.width,
-      image.width,
-      0,
-      0,
-      canvas.width,
-      canvas.height
-    );
+    if (context) {
+      context.drawImage(
+        image,
+        0,
+        center - halfWidth,
+        image.width,
+        image.width,
+        0,
+        0,
+        canvas.width,
+        canvas.height
+      );
+    }
   }
 
-  const thumbnailImage = await canvasToImage(canvas, type, quality);
-
-  let thumbnailBuffer = null;
-  if (thumbnailImage.blob) {
-    thumbnailBuffer = await blobToBuffer(thumbnailImage.blob);
-  }
-  return {
-    file: thumbnailBuffer,
-    width: thumbnailImage.width,
-    height: thumbnailImage.height,
-    mime: type,
-  };
+  return await canvasToImage(canvas, type, quality);
 }
 
-/**
- * @typedef CircleOutline
- * @property {"circle"} type
- * @property {number} x - Center X of the circle
- * @property {number} y - Center Y of the circle
- * @property {number} radius
- */
-
-/**
- * @typedef RectOutline
- * @property {"rect"} type
- * @property {number} width
- * @property {number} height
- * @property {number} x - Leftmost X position of the rect
- * @property {number} y - Topmost Y position of the rect
- */
-
-/**
- * @typedef PathOutline
- * @property {"path"} type
- * @property {number[]} points - Alternating x, y coordinates zipped together
- */
-
-/**
- * @typedef {CircleOutline|RectOutline|PathOutline} Outline
- */
-
 /**
  * Get the outline of an image
  * @param {HTMLImageElement} image
  * @returns {Outline}
  */
-export function getImageOutline(image, maxPoints = 100) {
+export function getImageOutline(
+  image: HTMLImageElement,
+  maxPoints: number = 100
+): Outline {
   // Basic rect outline for fail conditions
-  const defaultOutline = {
+  const defaultOutline: Outline = {
     type: "rect",
     x: 0,
     y: 0,
diff --git a/src/helpers/konva.js b/src/helpers/konva.js
deleted file mode 100644
index e391a64..0000000
--- a/src/helpers/konva.js
+++ /dev/null
@@ -1,327 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { Line, Group, Path, Circle } from "react-konva";
-// eslint-disable-next-line no-unused-vars
-import Konva from "konva";
-import Color from "color";
-import Vector2 from "./Vector2";
-
-// Holes should be wound in the opposite direction as the containing points array
-export function HoleyLine({ holes, ...props }) {
-  // Converted from https://github.com/rfestag/konva/blob/master/src/shapes/Line.ts
-  function drawLine(points, context, shape) {
-    const length = points.length;
-    const tension = shape.tension();
-    const closed = shape.closed();
-    const bezier = shape.bezier();
-
-    if (!length) {
-      return;
-    }
-
-    context.moveTo(points[0], points[1]);
-
-    if (tension !== 0 && length > 4) {
-      const tensionPoints = shape.getTensionPoints();
-      const tensionLength = tensionPoints.length;
-      let n = closed ? 0 : 4;
-
-      if (!closed) {
-        context.quadraticCurveTo(
-          tensionPoints[0],
-          tensionPoints[1],
-          tensionPoints[2],
-          tensionPoints[3]
-        );
-      }
-
-      while (n < tensionLength - 2) {
-        context.bezierCurveTo(
-          tensionPoints[n++],
-          tensionPoints[n++],
-          tensionPoints[n++],
-          tensionPoints[n++],
-          tensionPoints[n++],
-          tensionPoints[n++]
-        );
-      }
-
-      if (!closed) {
-        context.quadraticCurveTo(
-          tensionPoints[tensionLength - 2],
-          tensionPoints[tensionLength - 1],
-          points[length - 2],
-          points[length - 1]
-        );
-      }
-    } else if (bezier) {
-      // no tension but bezier
-      let n = 2;
-
-      while (n < length) {
-        context.bezierCurveTo(
-          points[n++],
-          points[n++],
-          points[n++],
-          points[n++],
-          points[n++],
-          points[n++]
-        );
-      }
-    } else {
-      // no tension
-      for (let n = 2; n < length; n += 2) {
-        context.lineTo(points[n], points[n + 1]);
-      }
-    }
-  }
-
-  // Draw points and holes
-  function sceneFunc(context, shape) {
-    const points = shape.points();
-    const closed = shape.closed();
-
-    if (!points.length) {
-      return;
-    }
-
-    context.beginPath();
-    drawLine(points, context, shape);
-
-    context.beginPath();
-    drawLine(points, context, shape);
-
-    // closed e.g. polygons and blobs
-    if (closed) {
-      context.closePath();
-      if (holes && holes.length) {
-        for (let hole of holes) {
-          drawLine(hole, context, shape);
-          context.closePath();
-        }
-      }
-      context.fillStrokeShape(shape);
-    } else {
-      // open e.g. lines and splines
-      context.strokeShape(shape);
-    }
-  }
-
-  return <Line sceneFunc={sceneFunc} {...props} />;
-}
-
-export function Tick({ x, y, scale, onClick, cross }) {
-  const [fill, setFill] = useState("white");
-  function handleEnter() {
-    setFill("hsl(260, 100%, 80%)");
-  }
-
-  function handleLeave() {
-    setFill("white");
-  }
-  return (
-    <Group
-      x={x}
-      y={y}
-      scaleX={scale}
-      scaleY={scale}
-      onMouseEnter={handleEnter}
-      onMouseLeave={handleLeave}
-      onClick={onClick}
-      onTap={onClick}
-    >
-      <Circle radius={12} fill="hsla(230, 25%, 18%, 0.8)" />
-      <Path
-        offsetX={12}
-        offsetY={12}
-        fill={fill}
-        data={
-          cross
-            ? "M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-            : "M9 16.2l-3.5-3.5c-.39-.39-1.01-.39-1.4 0-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0L9 16.2z"
-        }
-      />
-    </Group>
-  );
-}
-
-export function Trail({ position, size, duration, segments, color }) {
-  const trailRef = useRef();
-  const pointsRef = useRef([]);
-  const prevPositionRef = useRef(position);
-  const positionRef = useRef(position);
-  const circleRef = useRef();
-  // Color of the end of the trial
-  const transparentColorRef = useRef(
-    Color(color).lighten(0.5).alpha(0).string()
-  );
-
-  useEffect(() => {
-    // Lighten color to give it a `glow` effect
-    transparentColorRef.current = Color(color).lighten(0.5).alpha(0).string();
-  }, [color]);
-
-  // Keep track of position so we can use it in the trail animation
-  useEffect(() => {
-    positionRef.current = position;
-  }, [position]);
-
-  // Add a new point every time position is changed
-  useEffect(() => {
-    if (Vector2.compare(position, prevPositionRef.current, 0.0001)) {
-      return;
-    }
-    pointsRef.current.push({ ...position, lifetime: duration });
-    prevPositionRef.current = position;
-  }, [position, duration]);
-
-  // Advance lifetime of trail
-  useEffect(() => {
-    let prevTime = performance.now();
-    let request = requestAnimationFrame(animate);
-    function animate(time) {
-      request = requestAnimationFrame(animate);
-      const deltaTime = time - prevTime;
-      prevTime = time;
-
-      if (pointsRef.current.length === 0) {
-        return;
-      }
-
-      let expired = 0;
-      for (let point of pointsRef.current) {
-        point.lifetime -= deltaTime;
-        if (point.lifetime < 0) {
-          expired++;
-        }
-      }
-      if (expired > 0) {
-        pointsRef.current = pointsRef.current.slice(expired);
-      }
-
-      // Update the circle position to keep it in sync with the trail
-      if (circleRef.current) {
-        circleRef.current.x(positionRef.current.x);
-        circleRef.current.y(positionRef.current.y);
-      }
-
-      if (trailRef.current) {
-        trailRef.current.getLayer().draw();
-      }
-    }
-
-    return () => {
-      cancelAnimationFrame(request);
-    };
-  }, []);
-
-  // Custom scene function for drawing a trail from a line
-  function sceneFunc(context) {
-    // Resample points to ensure a smooth trail
-    const resampledPoints = Vector2.resample(pointsRef.current, segments);
-    if (resampledPoints.length === 0) {
-      return;
-    }
-    // Draws a line offset in the direction perpendicular to its travel direction
-    const drawOffsetLine = (from, to, alpha) => {
-      const forward = Vector2.normalize(Vector2.subtract(from, to));
-      // Rotate the forward vector 90 degrees based off of the direction
-      const side = Vector2.rotate90(forward);
-
-      // Offset the `to` position by the size of the point and in the side direction
-      const toSize = (alpha * size) / 2;
-      const toOffset = Vector2.add(to, Vector2.multiply(side, toSize));
-
-      context.lineTo(toOffset.x, toOffset.y);
-    };
-    context.beginPath();
-    // Sample the points starting from the tail then traverse counter clockwise drawing each point
-    // offset to make a taper, stops at the base of the trail
-    context.moveTo(resampledPoints[0].x, resampledPoints[0].y);
-    for (let i = 1; i < resampledPoints.length; i++) {
-      const from = resampledPoints[i - 1];
-      const to = resampledPoints[i];
-      drawOffsetLine(from, to, i / resampledPoints.length);
-    }
-    // Start from the base of the trail and continue drawing down back to the end of the tail
-    for (let i = resampledPoints.length - 2; i >= 0; i--) {
-      const from = resampledPoints[i + 1];
-      const to = resampledPoints[i];
-      drawOffsetLine(from, to, i / resampledPoints.length);
-    }
-    context.lineTo(resampledPoints[0].x, resampledPoints[0].y);
-    context.closePath();
-
-    // Create a radial gradient from the center of the trail to the tail
-    const gradientCenter = resampledPoints[resampledPoints.length - 1];
-    const gradientEnd = resampledPoints[0];
-    const gradientRadius = Vector2.length(
-      Vector2.subtract(gradientCenter, gradientEnd)
-    );
-    let gradient = context.createRadialGradient(
-      gradientCenter.x,
-      gradientCenter.y,
-      0,
-      gradientCenter.x,
-      gradientCenter.y,
-      gradientRadius
-    );
-    gradient.addColorStop(0, color);
-    gradient.addColorStop(1, transparentColorRef.current);
-    context.fillStyle = gradient;
-    context.fill();
-  }
-
-  return (
-    <Group>
-      <Line sceneFunc={sceneFunc} ref={trailRef} />
-      <Circle
-        x={position.x}
-        y={position.y}
-        fill={color}
-        width={size}
-        height={size}
-        ref={circleRef}
-      />
-    </Group>
-  );
-}
-
-Trail.defaultProps = {
-  // Duration of each point in milliseconds
-  duration: 200,
-  // Number of segments in the trail, resampled from the points
-  segments: 20,
-};
-
-/**
- * @param {Konva.Node} node
- * @returns {Vector2}
- */
-export function getRelativePointerPosition(node) {
-  let transform = node.getAbsoluteTransform().copy();
-  transform.invert();
-  let position = node.getStage().getPointerPosition();
-  return transform.point(position);
-}
-
-export function getRelativePointerPositionNormalized(node) {
-  const relativePosition = getRelativePointerPosition(node);
-  return {
-    x: relativePosition.x / node.width(),
-    y: relativePosition.y / node.height(),
-  };
-}
-
-/**
- * Converts points from alternating array form to vector array form
- * @param {number[]} points points in an x, y alternating array
- * @returns {Vector2[]} a `Vector2` array
- */
-export function convertPointArray(points) {
-  return points.reduce((acc, _, i, arr) => {
-    if (i % 2 === 0) {
-      acc.push({ x: arr[i], y: arr[i + 1] });
-    }
-    return acc;
-  }, []);
-}
diff --git a/src/helpers/konva.ts b/src/helpers/konva.ts
new file mode 100644
index 0000000..4cdd25b
--- /dev/null
+++ b/src/helpers/konva.ts
@@ -0,0 +1,64 @@
+import Konva from "konva";
+import Vector2 from "./Vector2";
+
+/**
+ * @param {Konva.Node} node
+ * @returns {Vector2}
+ */
+export function getRelativePointerPosition(
+  node: Konva.Node
+): Vector2 | undefined {
+  let transform = node.getAbsoluteTransform().copy();
+  transform.invert();
+  let position = node.getStage()?.getPointerPosition();
+  if (!position) {
+    return;
+  }
+  return transform.point(position);
+}
+
+export function getRelativePointerPositionNormalized(
+  node: Konva.Node
+): Vector2 | undefined {
+  const relativePosition = getRelativePointerPosition(node);
+  if (!relativePosition) {
+    return;
+  }
+  return {
+    x: relativePosition.x / node.width(),
+    y: relativePosition.y / node.height(),
+  };
+}
+
+/**
+ * Converts points from alternating array form to vector array form
+ * @param {number[]} numbers points in an x, y alternating array
+ * @returns {Vector2[]} a `Vector2` array
+ */
+export function convertNumbersToPoints(numbers: number[]): Vector2[] {
+  return numbers.reduce((acc: Vector2[], _, i, arr) => {
+    if (i % 2 === 0) {
+      acc.push({ x: arr[i], y: arr[i + 1] });
+    }
+    return acc;
+  }, []);
+}
+
+/**
+ * Converts points from vector array form to alternating number array form
+ * @param {Vector2[]} points
+ * @returns {number[]}
+ */
+export function convertPointsToNumbers(points: Vector2[]): number[] {
+  return points.reduce(
+    (acc: number[], point: Vector2) => [...acc, point.x, point.y],
+    []
+  );
+}
+
+export function scaleAndFlattenPoints(
+  points: Vector2[],
+  scale: Vector2
+): number[] {
+  return convertPointsToNumbers(points.map((p) => Vector2.multiply(p, scale)));
+}
diff --git a/src/helpers/logging.js b/src/helpers/logging.ts
similarity index 77%
rename from src/helpers/logging.js
rename to src/helpers/logging.ts
index e8be741..b7c9a75 100644
--- a/src/helpers/logging.js
+++ b/src/helpers/logging.ts
@@ -1,6 +1,6 @@
 import { captureException } from "@sentry/react";
 
-export function logError(error) {
+export function logError(error: Error): void {
   console.error(error);
   if (process.env.REACT_APP_LOGGING === "true") {
     captureException(error);
diff --git a/src/helpers/map.js b/src/helpers/map.ts
similarity index 74%
rename from src/helpers/map.js
rename to src/helpers/map.ts
index c493698..13382a2 100644
--- a/src/helpers/map.js
+++ b/src/helpers/map.ts
@@ -10,14 +10,16 @@ import {
 } from "./grid";
 import Vector2 from "./Vector2";
 
-const defaultMapProps = {
-  showGrid: false,
-  snapToGrid: true,
-  quality: "original",
-  group: "",
+import { Map, FileMapResolutions, FileMap } from "../types/Map";
+import { Asset } from "../types/Asset";
+
+type Resolution = {
+  size: number;
+  quality: number;
+  id: "low" | "medium" | "high" | "ultra";
 };
 
-const mapResolutions = [
+const mapResolutions: Resolution[] = [
   {
     size: 30, // Pixels per grid
     quality: 0.5, // JPEG compression quality
@@ -30,33 +32,36 @@ const mapResolutions = [
 
 /**
  * Get the asset id of the preview file to send for a map
- * @param {any} map
- * @returns {undefined|string}
  */
-export function getMapPreviewAsset(map) {
-  const res = map.resolutions;
-  switch (map.quality) {
-    case "low":
-      return;
-    case "medium":
-      return res.low;
-    case "high":
-      return res.medium;
-    case "ultra":
-      return res.medium;
-    case "original":
-      if (res.medium) {
-        return res.medium;
-      } else if (res.low) {
+export function getMapPreviewAsset(map: Map): string | undefined {
+  if (map.type === "file") {
+    const res = map.resolutions;
+    switch (map.quality) {
+      case "low":
+        return;
+      case "medium":
         return res.low;
-      }
-      return;
-    default:
-      return;
+      case "high":
+        return res.medium;
+      case "ultra":
+        return res.medium;
+      case "original":
+        if (res.medium) {
+          return res.medium;
+        } else if (res.low) {
+          return res.low;
+        }
+        return;
+      default:
+        return;
+    }
   }
 }
 
-export async function createMapFromFile(file, userId) {
+export async function createMapFromFile(
+  file: File,
+  userId: string
+): Promise<{ map: Map; assets: Asset[] }> {
   let image = new Image();
 
   const buffer = await blobToBuffer(file);
@@ -107,10 +112,10 @@ export async function createMapFromFile(file, userId) {
         gridSize = { x: 22, y: 22 };
       }
 
-      let assets = [];
+      let assets: Asset[] = [];
 
       // Create resolutions
-      const resolutions = {};
+      const resolutions: FileMapResolutions = {};
       for (let resolution of mapResolutions) {
         const resolutionPixelSize = Vector2.multiply(gridSize, resolution.size);
         if (
@@ -119,20 +124,16 @@ export async function createMapFromFile(file, userId) {
         ) {
           const resized = await resizeImage(
             image,
-            Vector2.max(resolutionPixelSize),
+            Vector2.componentMax(resolutionPixelSize),
             file.type,
             resolution.quality
           );
-          if (resized.blob) {
+          if (resized) {
             const assetId = uuid();
             resolutions[resolution.id] = assetId;
-            const resizedBuffer = await blobToBuffer(resized.blob);
             const asset = {
-              file: resizedBuffer,
-              width: resized.width,
-              height: resized.height,
+              ...resized,
               id: assetId,
-              mime: file.type,
               owner: userId,
             };
             assets.push(asset);
@@ -141,12 +142,11 @@ export async function createMapFromFile(file, userId) {
       }
       // Create thumbnail
       const thumbnailImage = await createThumbnail(image, file.type);
-      const thumbnail = {
-        ...thumbnailImage,
-        id: uuid(),
-        owner: userId,
-      };
-      assets.push(thumbnail);
+      const thumbnailId = uuid();
+      if (thumbnailImage) {
+        const thumbnail = { ...thumbnailImage, id: thumbnailId, owner: userId };
+        assets.push(thumbnail);
+      }
 
       const fileAsset = {
         id: uuid(),
@@ -158,11 +158,11 @@ export async function createMapFromFile(file, userId) {
       };
       assets.push(fileAsset);
 
-      const map = {
+      const map: FileMap = {
         name,
         resolutions,
         file: fileAsset.id,
-        thumbnail: thumbnail.id,
+        thumbnail: thumbnailId,
         type: "file",
         grid: {
           size: gridSize,
@@ -183,7 +183,9 @@ export async function createMapFromFile(file, userId) {
         created: Date.now(),
         lastModified: Date.now(),
         owner: userId,
-        ...defaultMapProps,
+        showGrid: false,
+        snapToGrid: true,
+        quality: "original",
       };
 
       URL.revokeObjectURL(url);
diff --git a/src/helpers/monsters.js b/src/helpers/monsters.ts
similarity index 98%
rename from src/helpers/monsters.js
rename to src/helpers/monsters.ts
index cd64a1c..c07a82e 100644
--- a/src/helpers/monsters.js
+++ b/src/helpers/monsters.ts
@@ -1,4 +1,4 @@
-const monsters = [
+const monsters: string[] = [
   "Aboleth",
   "Acolyte",
   "Black Dragon",
@@ -295,6 +295,6 @@ const monsters = [
 
 export default monsters;
 
-export function getRandomMonster() {
+export function getRandomMonster(): string {
   return monsters[Math.floor(Math.random() * monsters.length)];
 }
diff --git a/src/helpers/selection.ts b/src/helpers/selection.ts
new file mode 100644
index 0000000..58b66ab
--- /dev/null
+++ b/src/helpers/selection.ts
@@ -0,0 +1,24 @@
+import { Selection } from "../types/Select";
+import Vector2 from "./Vector2";
+
+export function getSelectionPoints(selection: Selection): Vector2[] {
+  let points: Vector2[] = [];
+  if (selection.type === "path") {
+    points = selection.data.points;
+  } else {
+    points.push({ x: selection.data.x, y: selection.data.y });
+    points.push({
+      x: selection.data.x + selection.data.width,
+      y: selection.data.y,
+    });
+    points.push({
+      x: selection.data.x + selection.data.width,
+      y: selection.data.y + selection.data.height,
+    });
+    points.push({
+      x: selection.data.x,
+      y: selection.data.y + selection.data.height,
+    });
+  }
+  return points;
+}
diff --git a/src/helpers/shared.js b/src/helpers/shared.js
deleted file mode 100644
index 5940429..0000000
--- a/src/helpers/shared.js
+++ /dev/null
@@ -1,98 +0,0 @@
-export function omit(obj, keys) {
-  let tmp = {};
-  for (let [key, value] of Object.entries(obj)) {
-    if (keys.includes(key)) {
-      continue;
-    }
-    tmp[key] = value;
-  }
-  return tmp;
-}
-
-export function fromEntries(iterable) {
-  if (Object.fromEntries) {
-    return Object.fromEntries(iterable);
-  }
-  return [...iterable].reduce((obj, [key, val]) => {
-    obj[key] = val;
-    return obj;
-  }, {});
-}
-
-// Check to see if all tracks are muted
-export function isStreamStopped(stream) {
-  return stream.getTracks().reduce((a, b) => a && b, { mute: true });
-}
-
-export function roundTo(x, to) {
-  return Math.round(x / to) * to;
-}
-
-export function floorTo(x, to) {
-  return Math.floor(x / to) * to;
-}
-
-export function toRadians(angle) {
-  return angle * (Math.PI / 180);
-}
-
-export function toDegrees(angle) {
-  return angle * (180 / Math.PI);
-}
-
-export function lerp(a, b, alpha) {
-  return a * (1 - alpha) + b * alpha;
-}
-
-// Console log an image
-export function logImage(url, width, height) {
-  const style = [
-    "font-size: 1px;",
-    `padding: ${height}px ${width}px;`,
-    `background: url(${url}) no-repeat;`,
-    "background-size: contain;",
-  ].join(" ");
-  console.log("%c ", style);
-}
-
-export function isEmpty(obj) {
-  return Object.keys(obj).length === 0 && obj.constructor === Object;
-}
-
-export function keyBy(array, key) {
-  return array.reduce(
-    (prev, current) => ({ ...prev, [key ? current[key] : current]: current }),
-    {}
-  );
-}
-
-export function groupBy(array, key) {
-  return array.reduce((prev, current) => {
-    const k = current[key];
-    (prev[k] || (prev[k] = [])).push(current);
-    return prev;
-  }, {});
-}
-
-export const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
-
-export function shuffle(array) {
-  let temp = [...array];
-  var currentIndex = temp.length,
-    randomIndex;
-
-  // While there remain elements to shuffle...
-  while (0 !== currentIndex) {
-    // Pick a remaining element...
-    randomIndex = Math.floor(Math.random() * currentIndex);
-    currentIndex--;
-
-    // And swap it with the current element.
-    [temp[currentIndex], temp[randomIndex]] = [
-      temp[randomIndex],
-      temp[currentIndex],
-    ];
-  }
-
-  return temp;
-}
diff --git a/src/helpers/shared.ts b/src/helpers/shared.ts
new file mode 100644
index 0000000..152dcae
--- /dev/null
+++ b/src/helpers/shared.ts
@@ -0,0 +1,133 @@
+export function omit(obj: Record<PropertyKey, any>, keys: string[]) {
+  let tmp: Record<PropertyKey, any> = {};
+  for (let [key, value] of Object.entries(obj)) {
+    if (keys.includes(key)) {
+      continue;
+    }
+    tmp[key] = value;
+  }
+  return tmp;
+}
+
+export function fromEntries(iterable: Iterable<[string | number, any]>) {
+  if (Object.fromEntries) {
+    return Object.fromEntries(iterable);
+  }
+  return [...iterable].reduce(
+    (obj: Record<string | number, any>, [key, val]) => {
+      obj[key] = val;
+      return obj;
+    },
+    {}
+  );
+}
+
+// Check to see if all tracks are muted
+export function isStreamStopped(stream: MediaStream): boolean {
+  // TODO: Check what this thing actually does
+  return stream.getTracks().reduce((a, b) => a && b, { muted: true }).muted;
+}
+
+export function roundTo(x: number, to: number): number {
+  return Math.round(x / to) * to;
+}
+
+export function floorTo(x: number, to: number): number {
+  return Math.floor(x / to) * to;
+}
+
+export function toRadians(angle: number): number {
+  return angle * (Math.PI / 180);
+}
+
+export function toDegrees(angle: number): number {
+  return angle * (180 / Math.PI);
+}
+
+export function lerp(a: number, b: number, alpha: number): number {
+  return a * (1 - alpha) + b * alpha;
+}
+
+// Console log an image
+export function logImage(url: string, width: number, height: number): void {
+  const style = [
+    "font-size: 1px;",
+    `padding: ${height}px ${width}px;`,
+    `background: url(${url}) no-repeat;`,
+    "background-size: contain;",
+  ].join(" ");
+  console.log("%c ", style);
+}
+
+export function isEmpty(obj: Object): boolean {
+  return Object.keys(obj).length === 0 && obj.constructor === Object;
+}
+
+export function keyBy<Type extends Record<PropertyKey, any>>(
+  array: Type[],
+  key: string
+): Record<string, Type> {
+  return array.reduce(
+    (prev, current) => ({
+      ...prev,
+      [key ? current[key] : current]: current,
+    }),
+    {}
+  );
+}
+
+export function groupBy(array: Record<PropertyKey, any>[], key: string) {
+  return array.reduce((prev: Record<string, any[]>, current) => {
+    const k = current[key];
+    (prev[k] || (prev[k] = [])).push(current);
+    return prev;
+  }, {});
+}
+
+export const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+
+export function shuffle<Type>(array: Type[]) {
+  let temp = [...array];
+  var currentIndex = temp.length,
+    randomIndex;
+
+  // While there remain elements to shuffle...
+  while (0 !== currentIndex) {
+    // Pick a remaining element...
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [temp[currentIndex], temp[randomIndex]] = [
+      temp[randomIndex],
+      temp[currentIndex],
+    ];
+  }
+
+  return temp;
+}
+
+/**
+ * Check that read and write permission is granted for clipboard.
+ * If permission has yet to be granted or denied request it.
+ * This will also return false if the browser does not support reading
+ * and writing to the clipboard e.g. for Safari or Firefox
+ */
+export async function clipboardSupported(): Promise<boolean> {
+  // @ts-ignore
+  if (navigator.clipboard?.readText && navigator.clipboard?.writeText) {
+    if (navigator.permissions) {
+      let query = await navigator.permissions.query({ name: "clipboard-read" });
+      if (query.state === "prompt") {
+        try {
+          await navigator.clipboard.readText();
+          query = await navigator.permissions.query({ name: "clipboard-read" });
+        } catch {
+          return false;
+        }
+      }
+      return query.state === "granted";
+    }
+  }
+  return false;
+}
diff --git a/src/helpers/timer.js b/src/helpers/timer.ts
similarity index 78%
rename from src/helpers/timer.js
rename to src/helpers/timer.ts
index bcbe425..757bf8d 100644
--- a/src/helpers/timer.js
+++ b/src/helpers/timer.ts
@@ -1,12 +1,14 @@
+import { Duration } from "../types/Timer";
+
 const MILLISECONDS_IN_HOUR = 3600000;
 const MILLISECONDS_IN_MINUTE = 60000;
 const MILLISECONDS_IN_SECOND = 1000;
 
 /**
  * Returns a timers duration in milliseconds
- * @param {Object} t The object with an hour, minute and second property
+ * @param {Time} t The object with an hour, minute and second property
  */
-export function getHMSDuration(t) {
+export function getHMSDuration(t: Duration): number {
   if (!t) {
     return 0;
   }
@@ -21,7 +23,7 @@ export function getHMSDuration(t) {
  * Returns an object with an hour, minute and second property
  * @param {number} duration The duration in milliseconds
  */
-export function getDurationHMS(duration) {
+export function getDurationHMS(duration: number): Duration {
   let workingDuration = duration;
   const hour = Math.floor(workingDuration / MILLISECONDS_IN_HOUR);
   workingDuration -= hour * MILLISECONDS_IN_HOUR;
diff --git a/src/helpers/token.js b/src/helpers/token.ts
similarity index 81%
rename from src/helpers/token.js
rename to src/helpers/token.ts
index d5eefc4..f225837 100644
--- a/src/helpers/token.js
+++ b/src/helpers/token.ts
@@ -1,12 +1,22 @@
 import { v4 as uuid } from "uuid";
 import Case from "case";
+import Konva from "konva";
 
 import blobToBuffer from "./blobToBuffer";
 import { createThumbnail, getImageOutline } from "./image";
 import Vector2 from "./Vector2";
 
-export function createTokenState(token, position, userId) {
-  let tokenState = {
+import { Token, FileToken } from "../types/Token";
+import { TokenState, BaseTokenState } from "../types/TokenState";
+import { Asset } from "../types/Asset";
+import { Outline } from "../types/Outline";
+
+export function createTokenState(
+  token: Token,
+  position: Vector2,
+  userId: string
+): TokenState {
+  let tokenState: BaseTokenState = {
     id: uuid(),
     tokenId: token.id,
     owner: userId,
@@ -21,20 +31,29 @@ export function createTokenState(token, position, userId) {
     rotation: 0,
     locked: false,
     visible: true,
-    type: token.type,
     outline: token.outline,
     width: token.width,
     height: token.height,
   };
   if (token.type === "file") {
-    tokenState.file = token.file;
-  } else if (token.type === "default") {
-    tokenState.key = token.key;
+    return {
+      ...tokenState,
+      type: "file",
+      file: token.file,
+    };
+  } else {
+    return {
+      ...tokenState,
+      type: "default",
+      key: token.key,
+    };
   }
-  return tokenState;
 }
 
-export async function createTokenFromFile(file, userId) {
+export async function createTokenFromFile(
+  file: File,
+  userId: string
+): Promise<{ token: Token; assets: Asset[] }> {
   if (!file) {
     return Promise.reject();
   }
@@ -77,10 +96,13 @@ export async function createTokenFromFile(file, userId) {
 
   return new Promise((resolve, reject) => {
     image.onload = async function () {
-      let assets = [];
+      let assets: Asset[] = [];
       const thumbnailImage = await createThumbnail(image, file.type);
-      const thumbnail = { ...thumbnailImage, id: uuid(), owner: userId };
-      assets.push(thumbnail);
+      const thumbnailId = uuid();
+      if (thumbnailImage) {
+        const thumbnail = { ...thumbnailImage, id: thumbnailId, owner: userId };
+        assets.push(thumbnail);
+      }
 
       const fileAsset = {
         id: uuid(),
@@ -94,10 +116,10 @@ export async function createTokenFromFile(file, userId) {
 
       const outline = getImageOutline(image);
 
-      const token = {
+      const token: FileToken = {
         name,
         defaultSize,
-        thumbnail: thumbnail.id,
+        thumbnail: thumbnailId,
         file: fileAsset.id,
         id: uuid(),
         type: "file",
@@ -107,7 +129,6 @@ export async function createTokenFromFile(file, userId) {
         defaultCategory: "character",
         defaultLabel: "",
         hideInSidebar: false,
-        group: "",
         width: image.width,
         height: image.height,
         outline,
@@ -122,12 +143,15 @@ export async function createTokenFromFile(file, userId) {
 }
 
 export function clientPositionToMapPosition(
-  mapStage,
-  clientPosition,
+  mapStage: Konva.Stage,
+  clientPosition: Vector2,
   checkMapBounds = true
-) {
+): Vector2 | undefined {
   const mapImage = mapStage.findOne("#mapImage");
   const map = document.querySelector(".map");
+  if (!map) {
+    return;
+  }
   const mapRect = map.getBoundingClientRect();
 
   // Check map bounds
@@ -158,7 +182,11 @@ export function clientPositionToMapPosition(
   return normalizedPosition;
 }
 
-export function getScaledOutline(tokenState, tokenWidth, tokenHeight) {
+export function getScaledOutline(
+  tokenState: TokenState,
+  tokenWidth: number,
+  tokenHeight: number
+): Outline {
   let outline = tokenState.outline;
   if (outline.type === "rect") {
     return {
@@ -187,14 +215,23 @@ export function getScaledOutline(tokenState, tokenWidth, tokenHeight) {
 }
 
 export class Intersection {
+  outline;
+  position;
+  center;
+  rotation;
+  points: Vector2[] | undefined;
   /**
-   *
    * @param {Outline} outline
    * @param {Vector2} position - Top left position of the token
    * @param {Vector2} center - Center position of the token
    * @param {number} rotation - Rotation of the token in degrees
    */
-  constructor(outline, position, center, rotation) {
+  constructor(
+    outline: Outline,
+    position: Vector2,
+    center: Vector2,
+    rotation: number
+  ) {
     this.outline = outline;
     this.position = position;
     this.center = center;
@@ -253,8 +290,11 @@ export class Intersection {
    * @param {Vector2} point
    * @returns {boolean}
    */
-  intersects(point) {
-    if (this.outline.type === "rect" || this.outline.type === "path") {
+  intersects(point: Vector2) {
+    if (
+      this.points &&
+      (this.outline.type === "rect" || this.outline.type === "path")
+    ) {
       return Vector2.pointInPolygon(point, this.points);
     } else if (this.outline.type === "circle") {
       return Vector2.distance(this.center, point) < this.outline.radius;
diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.ts
similarity index 67%
rename from src/hooks/useDebounce.js
rename to src/hooks/useDebounce.ts
index bf82898..b880252 100644
--- a/src/hooks/useDebounce.js
+++ b/src/hooks/useDebounce.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 
-function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState();
+function useDebounce<Type>(value: Type, delay: number): Type | undefined {
+  const [debouncedValue, setDebouncedValue] = useState<Type>();
 
   useEffect(() => {
     const timeout = setTimeout(() => {
diff --git a/src/hooks/useGridSnapping.js b/src/hooks/useGridSnapping.ts
similarity index 73%
rename from src/hooks/useGridSnapping.js
rename to src/hooks/useGridSnapping.ts
index aa52040..6a9714b 100644
--- a/src/hooks/useGridSnapping.js
+++ b/src/hooks/useGridSnapping.ts
@@ -5,13 +5,12 @@ import {
   getCellCorners,
 } from "../helpers/grid";
 
-import useSetting from "./useSetting";
-
 import {
   useGrid,
   useGridOffset,
   useGridCellPixelSize,
   useGridCellPixelOffset,
+  useGridSnappingSensitivity,
 } from "../contexts/GridContext";
 
 /**
@@ -19,14 +18,20 @@ import {
  * @param {number=} snappingSensitivity 1 = Always snap, 0 = never snap if undefined the default user setting will be used
  * @param {boolean=} useCorners Snap to grid cell corners
  */
-function useGridSnapping(snappingSensitivity, useCorners = true) {
-  const [defaultSnappingSensitivity] = useSetting(
-    "map.gridSnappingSensitivity"
-  );
-  snappingSensitivity =
-    snappingSensitivity === undefined
-      ? defaultSnappingSensitivity
-      : snappingSensitivity;
+function useGridSnapping(
+  snappingSensitivity: number | undefined = undefined,
+  useCorners: boolean = true
+) {
+  const defaultSnappingSensitivity = useGridSnappingSensitivity();
+  let gridSnappingSensitivity: number;
+  if (defaultSnappingSensitivity === -1) {
+    // Snapping disabled via shortcut
+    gridSnappingSensitivity = 0;
+  } else if (snappingSensitivity === undefined) {
+    gridSnappingSensitivity = defaultSnappingSensitivity;
+  } else {
+    gridSnappingSensitivity = snappingSensitivity;
+  }
 
   const grid = useGrid();
   const gridOffset = useGridOffset();
@@ -36,7 +41,7 @@ function useGridSnapping(snappingSensitivity, useCorners = true) {
   /**
    * @param {Vector2} node The node to snap
    */
-  function snapPositionToGrid(position) {
+  function snapPositionToGrid(position: Vector2) {
     // Account for grid offset
     let offsetPosition = Vector2.subtract(
       Vector2.subtract(position, gridOffset),
@@ -70,7 +75,7 @@ function useGridSnapping(snappingSensitivity, useCorners = true) {
       const distanceToSnapPoint = Vector2.distance(offsetPosition, snapPoint);
       if (
         distanceToSnapPoint <
-        Vector2.min(gridCellPixelSize) * snappingSensitivity
+        Vector2.componentMin(gridCellPixelSize) * gridSnappingSensitivity
       ) {
         // Reverse grid offset
         let offsetSnapPoint = Vector2.add(
diff --git a/src/hooks/useImageCenter.js b/src/hooks/useImageCenter.ts
similarity index 66%
rename from src/hooks/useImageCenter.js
rename to src/hooks/useImageCenter.ts
index 3ffa355..00f3423 100644
--- a/src/hooks/useImageCenter.js
+++ b/src/hooks/useImageCenter.ts
@@ -1,21 +1,31 @@
+import Konva from "konva";
 import { useEffect, useRef } from "react";
 
+import { MapStage } from "../contexts/MapStageContext";
+import Vector2 from "../helpers/Vector2";
+
+type ImageData = {
+  id: string;
+  width: number;
+  height: number;
+};
+
 function useImageCenter(
-  data,
-  stageRef,
-  stageWidth,
-  stageHeight,
-  stageTranslateRef,
-  setStageScale,
-  imageLayerRef,
-  containerRef,
+  data: ImageData | null,
+  stageRef: MapStage,
+  stageWidth: number,
+  stageHeight: number,
+  stageTranslateRef: React.MutableRefObject<Vector2>,
+  setStageScale: React.Dispatch<React.SetStateAction<number>>,
+  imageLayerRef: React.RefObject<Konva.Layer>,
+  containerRef: React.RefObject<HTMLDivElement>,
   responsive = false
 ) {
   const stageRatio = stageWidth / stageHeight;
   const imageRatio = data ? data.width / data.height : 1;
 
-  let imageWidth;
-  let imageHeight;
+  let imageWidth: number;
+  let imageHeight: number;
   if (stageRatio > imageRatio) {
     imageWidth = data ? stageHeight / (data.height / data.width) : stageWidth;
     imageHeight = stageHeight;
@@ -25,7 +35,7 @@ function useImageCenter(
   }
 
   // Reset image translate and stage scale
-  const previousDataIdRef = useRef();
+  const previousDataIdRef = useRef<string>();
   const previousStageRatioRef = useRef(stageRatio);
   useEffect(() => {
     if (!data) {
@@ -33,7 +43,12 @@ function useImageCenter(
     }
 
     const layer = imageLayerRef.current;
-    const containerRect = containerRef.current.getBoundingClientRect();
+    const container = containerRef.current;
+    const stage = stageRef.current;
+    if (!container || !stage) {
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
     const previousDataId = previousDataIdRef.current;
     const previousStageRatio = previousStageRatioRef.current;
 
@@ -56,7 +71,7 @@ function useImageCenter(
         };
       }
       layer.position(newTranslate);
-      stageRef.current.position({ x: 0, y: 0 });
+      stage.position({ x: 0, y: 0 });
       stageTranslateRef.current = { x: 0, y: 0 };
 
       setStageScale(1);
diff --git a/src/hooks/useImageDrop.js b/src/hooks/useImageDrop.ts
similarity index 70%
rename from src/hooks/useImageDrop.js
rename to src/hooks/useImageDrop.ts
index bf38044..dde5616 100644
--- a/src/hooks/useImageDrop.js
+++ b/src/hooks/useImageDrop.ts
@@ -3,41 +3,51 @@ import { useToasts } from "react-toast-notifications";
 
 import Vector2 from "../helpers/Vector2";
 
+export type ImageDropEvent = {
+  files: File[];
+  dropPosition: Vector2;
+};
+
 function useImageDrop(
-  onImageDrop,
+  onImageDrop: (event: ImageDropEvent) => void,
   supportFileTypes = ["image/jpeg", "image/gif", "image/png", "image/webp"]
 ) {
   const { addToast } = useToasts();
 
   const [dragging, setDragging] = useState(false);
-  function onDragEnter(event) {
+  function onDragEnter(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
     setDragging(true);
   }
 
-  function onDragLeave(event) {
+  function onDragLeave(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
     setDragging(false);
   }
 
-  function onDragOver(event) {
+  function onDragOver(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
-    event.dataTransfer.dropEffect = "copy";
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "copy";
+    }
   }
 
-  async function onDrop(event) {
+  async function onDrop(event: React.DragEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
     let imageFiles = [];
 
     // Check if the dropped image is from a URL
-    const html = event.dataTransfer.getData("text/html");
+    const html = event.dataTransfer?.getData("text/html");
     if (html) {
       try {
         const urlMatch = html.match(/src="?([^"\s]+)"?\s*/);
+        if (!urlMatch) {
+          throw new Error("Unable to find image source");
+        }
         const url = urlMatch[1].replace("&amp;", "&"); // Reverse html encoding of url parameters
         let name = "";
         const altMatch = html.match(/alt="?([^"]+)"?\s*/);
@@ -46,8 +56,10 @@ function useImageDrop(
         }
         const response = await fetch(url);
         if (response.ok) {
-          const file = await response.blob();
-          file.name = name;
+          const blob = await response.blob();
+          const file = new File([blob], name, {
+            type: blob.type,
+          });
           if (supportFileTypes.includes(file.type)) {
             imageFiles.push(file);
           } else {
@@ -63,7 +75,7 @@ function useImageDrop(
       }
     }
 
-    const files = event.dataTransfer.files;
+    const files = event.dataTransfer?.files || [];
     for (let file of files) {
       if (supportFileTypes.includes(file.type)) {
         imageFiles.push(file);
@@ -72,7 +84,7 @@ function useImageDrop(
       }
     }
     const dropPosition = new Vector2(event.clientX, event.clientY);
-    onImageDrop(imageFiles, dropPosition);
+    onImageDrop({ files: imageFiles, dropPosition });
     setDragging(false);
   }
 
diff --git a/src/hooks/useMapActions.ts b/src/hooks/useMapActions.ts
new file mode 100644
index 0000000..37d3065
--- /dev/null
+++ b/src/hooks/useMapActions.ts
@@ -0,0 +1,149 @@
+import { useState, useCallback } from "react";
+import Action from "../actions/Action";
+import { DrawingState } from "../types/Drawing";
+import { FogState } from "../types/Fog";
+import { MapState } from "../types/MapState";
+import { Notes } from "../types/Note";
+import { TokenStates } from "../types/TokenState";
+
+export type DrawingsAction = {
+  type: "drawings";
+  action: Action<DrawingState>;
+};
+export type FogsAction = { type: "fogs"; action: Action<FogState> };
+export type TokensAction = { type: "tokens"; action: Action<TokenStates> };
+export type NotesAction = { type: "notes"; action: Action<Notes> };
+
+export type MapAction =
+  | DrawingsAction
+  | FogsAction
+  | TokensAction
+  | NotesAction;
+
+export type MapActions = {
+  actions: MapAction[][];
+  actionIndex: number;
+};
+
+export type AddActionsEventHandler = (actions: MapAction[]) => void;
+export type UpdateActionIndexEventHandler = (change: number) => void;
+export type ResetActionsEventHandler = () => void;
+
+const defaultMapActions: MapActions = {
+  actions: [],
+  actionIndex: -1,
+};
+
+function useMapActions(
+  setCurrentMapState: React.Dispatch<React.SetStateAction<MapState | null>>
+): [
+  MapActions,
+  AddActionsEventHandler,
+  UpdateActionIndexEventHandler,
+  ResetActionsEventHandler
+] {
+  const [mapActions, setMapActions] = useState(defaultMapActions);
+
+  function applyMapActionsToState(
+    mapState: MapState,
+    actions: MapAction[]
+  ): MapState {
+    for (let mapAction of actions) {
+      if (mapAction.type === "drawings") {
+        mapState.drawings = mapAction.action.execute(mapState.drawings);
+      } else if (mapAction.type === "fogs") {
+        mapState.fogs = mapAction.action.execute(mapState.fogs);
+      } else if (mapAction.type === "tokens") {
+        mapState.tokens = mapAction.action.execute(mapState.tokens);
+      } else if (mapAction.type === "notes") {
+        mapState.notes = mapAction.action.execute(mapState.notes);
+      }
+    }
+    return mapState;
+  }
+
+  function undoMapActionsToState(
+    mapState: MapState,
+    actions: MapAction[]
+  ): MapState {
+    for (let mapAction of actions) {
+      if (mapAction.type === "drawings") {
+        mapState.drawings = mapAction.action.undo(mapState.drawings);
+      } else if (mapAction.type === "fogs") {
+        mapState.fogs = mapAction.action.undo(mapState.fogs);
+      } else if (mapAction.type === "tokens") {
+        mapState.tokens = mapAction.action.undo(mapState.tokens);
+      } else if (mapAction.type === "notes") {
+        mapState.notes = mapAction.action.undo(mapState.notes);
+      }
+    }
+    return mapState;
+  }
+
+  function addActions(actions: MapAction[]) {
+    setMapActions((prevActions) => {
+      const newActions = [
+        ...prevActions.actions.slice(0, prevActions.actionIndex + 1),
+        actions,
+      ];
+      const newIndex = newActions.length - 1;
+      return {
+        actions: newActions,
+        actionIndex: newIndex,
+      };
+    });
+
+    // Update map state by performing the actions on it
+    setCurrentMapState((prevMapState) => {
+      if (!prevMapState) {
+        return prevMapState;
+      }
+      let state = { ...prevMapState };
+      state = applyMapActionsToState(state, actions);
+      return state;
+    });
+  }
+
+  function updateActionIndex(change: number) {
+    const prevIndex = mapActions.actionIndex;
+    const newIndex = Math.min(
+      Math.max(mapActions.actionIndex + change, -1),
+      mapActions.actions.length - 1
+    );
+
+    setMapActions((prevMapActions) => ({
+      ...prevMapActions,
+      actionIndex: newIndex,
+    }));
+
+    // Update map state by either performing the actions or undoing them
+    setCurrentMapState((prevMapState) => {
+      if (!prevMapState) {
+        return prevMapState;
+      }
+      let state = { ...prevMapState };
+      if (prevIndex < newIndex) {
+        // Redo
+        for (let i = prevIndex + 1; i < newIndex + 1; i++) {
+          const actions = mapActions.actions[i];
+          state = applyMapActionsToState(state, actions);
+        }
+      } else {
+        // Undo
+        for (let i = prevIndex; i > newIndex; i--) {
+          const actions = mapActions.actions[i];
+          state = undoMapActionsToState(state, actions);
+        }
+      }
+      return state;
+    });
+  }
+
+  const resetActions = useCallback(() => {
+    setMapActions(defaultMapActions);
+  }, []);
+
+  return [mapActions, addActions, updateActionIndex, resetActions];
+}
+
+export default useMapActions;
diff --git a/src/hooks/useMapImage.js b/src/hooks/useMapImage.ts
similarity index 59%
rename from src/hooks/useMapImage.js
rename to src/hooks/useMapImage.ts
index 02cf5b6..c9bbfa5 100644
--- a/src/hooks/useMapImage.js
+++ b/src/hooks/useMapImage.ts
@@ -5,14 +5,18 @@ import { useDataURL } from "../contexts/AssetsContext";
 
 import { mapSources as defaultMapSources } from "../maps";
 
-function useMapImage(map) {
+import { Map } from "../types/Map";
+
+function useMapImage(
+  map: Map | null
+): [HTMLImageElement | undefined, "loaded" | "loading" | "failed"] {
   const mapURL = useDataURL(map, defaultMapSources);
-  const [mapImage, mapImageStatus] = useImage(mapURL);
+  const [mapImage, mapImageStatus] = useImage(mapURL || "");
 
   // Create a map source that only updates when the image is fully loaded
-  const [loadedMapImage, setLoadedMapImage] = useState();
+  const [loadedMapImage, setLoadedMapImage] = useState<HTMLImageElement>();
   useEffect(() => {
-    if (mapImageStatus === "loaded") {
+    if (mapImageStatus === "loaded" && mapImage) {
       setLoadedMapImage(mapImage);
     }
   }, [mapImage, mapImageStatus]);
diff --git a/src/hooks/useMapNotes.tsx b/src/hooks/useMapNotes.tsx
new file mode 100644
index 0000000..43647da
--- /dev/null
+++ b/src/hooks/useMapNotes.tsx
@@ -0,0 +1,182 @@
+import Konva from "konva";
+import { KonvaEventObject } from "konva/lib/Node";
+import { useState } from "react";
+import { v4 as uuid } from "uuid";
+
+import Note from "../components/konva/Note";
+import NoteDragOverlay from "../components/note/NoteDragOverlay";
+import NoteMenu from "../components/note/NoteMenu";
+import NoteTool from "../components/tools/NoteTool";
+import { useBlur, useKeyboard } from "../contexts/KeyboardContext";
+import { useUserId } from "../contexts/UserIdContext";
+import shortcuts from "../shortcuts";
+import {
+  NoteChangeEventHandler,
+  NoteCreateEventHander,
+  NoteRemoveEventHander,
+} from "../types/Events";
+import { Map, MapToolId } from "../types/Map";
+import { MapState } from "../types/MapState";
+import {
+  Note as NoteType,
+  NoteDraggingOptions,
+  NoteMenuOptions,
+} from "../types/Note";
+
+function useMapNotes(
+  map: Map | null,
+  mapState: MapState | null,
+  onNoteCreate: NoteCreateEventHander,
+  onNoteChange: NoteChangeEventHandler,
+  onNoteRemove: NoteRemoveEventHander,
+  selectedToolId: MapToolId
+) {
+  const userId = useUserId();
+  const allowNoteEditing = !!(
+    map?.owner === userId || mapState?.editFlags.includes("notes")
+  );
+
+  const [isNoteMenuOpen, setIsNoteMenuOpen] = useState<boolean>(false);
+  const [noteMenuOptions, setNoteMenuOptions] = useState<NoteMenuOptions>();
+  const [noteDraggingOptions, setNoteDraggingOptions] =
+    useState<NoteDraggingOptions>();
+
+  function handleNoteMenuOpen(
+    noteId: string,
+    noteNode: Konva.Node,
+    focus: boolean
+  ) {
+    setNoteMenuOptions({ noteId, noteNode, focus });
+    setIsNoteMenuOpen(true);
+  }
+
+  function handleNoteMenuClose() {
+    setIsNoteMenuOpen(false);
+  }
+
+  function handleNoteDragStart(_: KonvaEventObject<DragEvent>, noteId: string) {
+    if (duplicateNote) {
+      const note = mapState?.notes[noteId];
+      if (note) {
+        onNoteCreate([{ ...note, id: uuid() }]);
+      }
+    }
+    setNoteDraggingOptions({ dragging: true, noteId });
+  }
+
+  function handleNoteDragEnd() {
+    noteDraggingOptions &&
+      setNoteDraggingOptions({ ...noteDraggingOptions, dragging: false });
+  }
+
+  function handleNoteRemove(noteIds: string[]) {
+    onNoteRemove(noteIds);
+    setNoteDraggingOptions(undefined);
+  }
+
+  const [duplicateNote, setDuplicateNote] = useState(false);
+  function handleKeyDown(event: KeyboardEvent) {
+    if (shortcuts.duplicate(event)) {
+      setDuplicateNote(true);
+    }
+  }
+
+  function handleKeyUp(event: KeyboardEvent) {
+    if (shortcuts.duplicate(event)) {
+      setDuplicateNote(false);
+    }
+  }
+
+  function handleBlur() {
+    setDuplicateNote(false);
+  }
+
+  useKeyboard(handleKeyDown, handleKeyUp);
+  useBlur(handleBlur);
+
+  const notes = (
+    <NoteTool
+      map={map}
+      active={selectedToolId === "note"}
+      onNoteCreate={onNoteCreate}
+      onNoteMenuOpen={handleNoteMenuOpen}
+    >
+      {(mapState
+        ? Object.values(mapState.notes).sort((a, b) =>
+            sortNotes(a, b, noteDraggingOptions)
+          )
+        : []
+      ).map((note) => (
+        <Note
+          note={note}
+          map={map}
+          key={note.id}
+          onNoteMenuOpen={handleNoteMenuOpen}
+          onNoteMenuClose={handleNoteMenuClose}
+          draggable={
+            allowNoteEditing &&
+            (selectedToolId === "note" || selectedToolId === "move") &&
+            !note.locked
+          }
+          onNoteChange={onNoteChange}
+          onNoteDragStart={handleNoteDragStart}
+          onNoteDragEnd={handleNoteDragEnd}
+          fadeOnHover={selectedToolId === "drawing"}
+          selected={
+            !!noteMenuOptions &&
+            isNoteMenuOpen &&
+            noteMenuOptions.noteId === note.id
+          }
+        />
+      ))}
+    </NoteTool>
+  );
+
+  const noteMenu = (
+    <NoteMenu
+      isOpen={isNoteMenuOpen}
+      onRequestClose={handleNoteMenuClose}
+      onNoteChange={onNoteChange}
+      note={noteMenuOptions && mapState?.notes[noteMenuOptions.noteId]}
+      noteNode={noteMenuOptions?.noteNode}
+      focus={noteMenuOptions?.focus}
+      map={map}
+    />
+  );
+
+  const noteDragOverlay = noteDraggingOptions ? (
+    <NoteDragOverlay
+      draggingOptions={noteDraggingOptions}
+      onNoteRemove={handleNoteRemove}
+    />
+  ) : null;
+
+  return { notes, noteMenu, noteDragOverlay };
+}
+
+export default useMapNotes;
+
+function sortNotes(
+  a: NoteType,
+  b: NoteType,
+  noteDraggingOptions?: NoteDraggingOptions
+) {
+  if (
+    noteDraggingOptions &&
+    noteDraggingOptions.dragging &&
+    noteDraggingOptions.noteId === a.id
+  ) {
+    // If dragging token `a` move above
+    return 1;
+  } else if (
+    noteDraggingOptions &&
+    noteDraggingOptions.dragging &&
+    noteDraggingOptions.noteId === b.id
+  ) {
+    // If dragging token `b` move above
+    return -1;
+  } else {
+    // Else sort so last modified is on top
+    return a.lastModified - b.lastModified;
+  }
+}
diff --git a/src/hooks/useMapSelection.tsx b/src/hooks/useMapSelection.tsx
new file mode 100644
index 0000000..60e5a73
--- /dev/null
+++ b/src/hooks/useMapSelection.tsx
@@ -0,0 +1,183 @@
+import { useEffect, useState } from "react";
+import { v4 as uuid } from "uuid";
+
+import SelectionDragOverlay from "../components/selection/SelectionDragOverlay";
+import SelectionMenu from "../components/selection/SelectionMenu";
+import SelectTool from "../components/tools/SelectTool";
+import { useBlur, useKeyboard } from "../contexts/KeyboardContext";
+import { useUserId } from "../contexts/UserIdContext";
+import shortcuts from "../shortcuts";
+import {
+  SelectionItemsChangeEventHandler,
+  SelectionItemsCreateEventHandler,
+  SelectionItemsRemoveEventHandler,
+} from "../types/Events";
+import { Map, MapToolId } from "../types/Map";
+import { MapState } from "../types/MapState";
+import { Note } from "../types/Note";
+import { Selection } from "../types/Select";
+import { SelectToolSettings } from "../types/Select";
+import { TokenState } from "../types/TokenState";
+
+function useMapSelection(
+  map: Map | null,
+  mapState: MapState | null,
+  onSelectionItemsChange: SelectionItemsChangeEventHandler,
+  onSelectionItemsRemove: SelectionItemsRemoveEventHandler,
+  onSelectionItemsCreate: SelectionItemsCreateEventHandler,
+  selectedToolId: MapToolId,
+  settings: SelectToolSettings
+) {
+  const userId = useUserId();
+  const disabledTokens: Record<string, boolean> = {};
+  const disabledNotes: Record<string, boolean> = {};
+  if (mapState && map && map.owner !== userId) {
+    if (!mapState.editFlags.includes("tokens")) {
+      for (let token of Object.values(mapState.tokens)) {
+        if (token.owner !== userId) {
+          disabledTokens[token.id] = true;
+        }
+      }
+    }
+    if (!mapState.editFlags.includes("notes")) {
+      for (let note of Object.values(mapState.notes)) {
+        disabledNotes[note.id] = true;
+      }
+    }
+  }
+
+  const [isSelectionMenuOpen, setIsSelectionMenuOpen] =
+    useState<boolean>(false);
+  const [isSelectionDragging, setIsSelectionDragging] = useState(false);
+  const [selection, setSelection] = useState<Selection | null>(null);
+
+  function handleSelectionMenuOpen(open: boolean) {
+    setIsSelectionMenuOpen(open);
+  }
+
+  const active = selectedToolId === "select";
+
+  // Remove selection when changing tools
+  useEffect(() => {
+    if (!active) {
+      setSelection(null);
+      setIsSelectionMenuOpen(false);
+    }
+  }, [active]);
+
+  // Remove selection when changing maps
+  useEffect(() => {
+    setSelection(null);
+    setIsSelectionMenuOpen(false);
+  }, [map]);
+
+  function handleSelectionDragStart() {
+    if (duplicateSelection && selection) {
+      const tokenStates: TokenState[] = [];
+      const notes: Note[] = [];
+      for (let item of selection.items) {
+        if (item.type === "token") {
+          const token = mapState?.tokens[item.id];
+          if (token && !token.locked) {
+            tokenStates.push({ ...token, id: uuid() });
+          }
+        } else {
+          const note = mapState?.notes[item.id];
+          if (note && !note.locked) {
+            notes.push({ ...note, id: uuid() });
+          }
+        }
+      }
+      onSelectionItemsCreate(tokenStates, notes);
+    }
+    setIsSelectionDragging(true);
+  }
+
+  function handleSelectionDragEnd() {
+    setIsSelectionDragging(false);
+  }
+
+  function handleSelectionItemsRemove(
+    tokenStateIds: string[],
+    noteIds: string[]
+  ) {
+    setSelection(null);
+    onSelectionItemsRemove(tokenStateIds, noteIds);
+  }
+
+  const [duplicateSelection, setDuplicateSelection] = useState(false);
+  function handleKeyDown(event: KeyboardEvent) {
+    if (shortcuts.duplicate(event)) {
+      setDuplicateSelection(true);
+    }
+    if (shortcuts.delete(event) && selection && active) {
+      const tokenIds: string[] = [];
+      const noteIds: string[] = [];
+      for (let item of selection.items) {
+        if (item.type === "token") {
+          tokenIds.push(item.id);
+        } else {
+          noteIds.push(item.id);
+        }
+      }
+      handleSelectionItemsRemove(tokenIds, noteIds);
+      setIsSelectionMenuOpen(false);
+    }
+  }
+
+  function handleKeyUp(event: KeyboardEvent) {
+    if (shortcuts.duplicate(event)) {
+      setDuplicateSelection(false);
+    }
+  }
+
+  function handleBlur() {
+    setDuplicateSelection(false);
+  }
+
+  useKeyboard(handleKeyDown, handleKeyUp);
+  useBlur(handleBlur);
+
+  const selectionTool = map ? (
+    <SelectTool
+      active={active}
+      toolSettings={settings}
+      onSelectionItemsChange={onSelectionItemsChange}
+      selection={selection}
+      onSelectionChange={setSelection}
+      onSelectionMenuOpen={handleSelectionMenuOpen}
+      onSelectionDragStart={handleSelectionDragStart}
+      onSelectionDragEnd={handleSelectionDragEnd}
+      disabledTokens={disabledTokens}
+      disabledNotes={disabledNotes}
+      map={map}
+    />
+  ) : null;
+
+  const selectionMenu = (
+    <SelectionMenu
+      isOpen={isSelectionMenuOpen}
+      active={active}
+      onRequestClose={() => setIsSelectionMenuOpen(false)}
+      onRequestOpen={() => setIsSelectionMenuOpen(true)}
+      selection={selection}
+      onSelectionChange={setSelection}
+      onSelectionItemsChange={onSelectionItemsChange}
+      onSelectionItemsCreate={onSelectionItemsCreate}
+      map={map}
+      mapState={mapState}
+    />
+  );
+
+  const selectionDragOverlay = selection ? (
+    <SelectionDragOverlay
+      dragging={isSelectionDragging}
+      selection={selection}
+      onSelectionItemsRemove={handleSelectionItemsRemove}
+    />
+  ) : null;
+
+  return { selectionTool, selectionMenu, selectionDragOverlay };
+}
+
+export default useMapSelection;
diff --git a/src/hooks/useMapTokens.tsx b/src/hooks/useMapTokens.tsx
new file mode 100644
index 0000000..5b3cb31
--- /dev/null
+++ b/src/hooks/useMapTokens.tsx
@@ -0,0 +1,266 @@
+import { Group } from "react-konva";
+import { v4 as uuid } from "uuid";
+
+import { Map, MapToolId } from "../types/Map";
+import { MapState } from "../types/MapState";
+import {
+  TokenCategory,
+  TokenDraggingOptions,
+  TokenMenuOptions,
+} from "../types/Token";
+import { TokenState } from "../types/TokenState";
+import {
+  TokenStateRemoveHandler,
+  TokenStateChangeEventHandler,
+  TokensStateCreateHandler,
+} from "../types/Events";
+import { useState } from "react";
+import Konva from "konva";
+import Token from "../components/konva/Token";
+import { KonvaEventObject } from "konva/lib/Node";
+import TokenMenu from "../components/token/TokenMenu";
+import TokenDragOverlay from "../components/token/TokenDragOverlay";
+import { useUserId } from "../contexts/UserIdContext";
+import { useBlur, useKeyboard } from "../contexts/KeyboardContext";
+import shortcuts from "../shortcuts";
+
+function useMapTokens(
+  map: Map | null,
+  mapState: MapState | null,
+  onTokenStateChange: TokenStateChangeEventHandler,
+  onTokenStateRemove: TokenStateRemoveHandler,
+  onTokensStateCreate: TokensStateCreateHandler,
+  selectedToolId: MapToolId
+) {
+  const userId = useUserId();
+  const disabledTokens: Record<string, boolean> = {};
+  if (mapState && map) {
+    if (!mapState.editFlags.includes("tokens") && map.owner !== userId) {
+      for (let token of Object.values(mapState.tokens)) {
+        if (token.owner !== userId) {
+          disabledTokens[token.id] = true;
+        }
+      }
+    }
+  }
+
+  const [isTokenMenuOpen, setIsTokenMenuOpen] = useState<boolean>(false);
+  const [tokenMenuOptions, setTokenMenuOptions] = useState<TokenMenuOptions>();
+  const [tokenDraggingOptions, setTokenDraggingOptions] =
+    useState<TokenDraggingOptions>();
+
+  function handleTokenMenuOpen(
+    tokenStateId: string,
+    tokenImage: Konva.Node,
+    focus: boolean
+  ) {
+    setTokenMenuOptions({ tokenStateId, tokenImage, focus });
+    setIsTokenMenuOpen(true);
+  }
+
+  function handleTokenMenuClose() {
+    setIsTokenMenuOpen(false);
+  }
+
+  function handleTokenDragStart(
+    _: KonvaEventObject<DragEvent>,
+    tokenStateId: string,
+    attachedTokenStateIds: string[]
+  ) {
+    if (duplicateToken) {
+      let newStates: TokenState[] = [];
+      for (let id of [tokenStateId, ...attachedTokenStateIds]) {
+        const state = mapState?.tokens[id];
+        if (state) {
+          newStates.push({ ...state, id: uuid() });
+        }
+      }
+      onTokensStateCreate(newStates);
+    }
+    setTokenDraggingOptions({
+      dragging: true,
+      tokenStateId,
+      attachedTokenStateIds,
+    });
+  }
+
+  function handleTokenDragEnd() {
+    tokenDraggingOptions &&
+      setTokenDraggingOptions({
+        ...tokenDraggingOptions,
+        dragging: false,
+      });
+  }
+
+  function handleTokenStateRemove(tokenStateIds: string[]) {
+    onTokenStateRemove(tokenStateIds);
+    setTokenDraggingOptions(undefined);
+  }
+
+  const [duplicateToken, setDuplicateToken] = useState(false);
+  function handleKeyDown(event: KeyboardEvent) {
+    if (shortcuts.duplicate(event)) {
+      setDuplicateToken(true);
+    }
+  }
+
+  function handleKeyUp(event: KeyboardEvent) {
+    if (shortcuts.duplicate(event)) {
+      setDuplicateToken(false);
+    }
+  }
+
+  function handleBlur() {
+    setDuplicateToken(false);
+  }
+
+  useKeyboard(handleKeyDown, handleKeyUp);
+  useBlur(handleBlur);
+
+  const [transformingTokensIds, setTransformingTokenIds] = useState<string[]>(
+    []
+  );
+  function handleTokenTransformStart(
+    event: Konva.KonvaEventObject<Event>,
+    attachments: Konva.Node[]
+  ) {
+    const transformer = event.currentTarget as Konva.Transformer;
+    const nodes = transformer.nodes();
+    setTransformingTokenIds(
+      [...nodes, ...attachments].map((node) => node.id())
+    );
+  }
+
+  function handleTokenTransformEnd() {
+    setTransformingTokenIds([]);
+  }
+
+  function tokenFromTokenState(tokenState: TokenState) {
+    return (
+      map &&
+      mapState && (
+        <Token
+          key={tokenState.id}
+          tokenState={tokenState}
+          onTokenStateChange={onTokenStateChange}
+          onTokenMenuOpen={handleTokenMenuOpen}
+          onTokenMenuClose={handleTokenMenuClose}
+          onTokenDragStart={handleTokenDragStart}
+          onTokenDragEnd={handleTokenDragEnd}
+          onTokenTransformStart={handleTokenTransformStart}
+          onTokenTransformEnd={handleTokenTransformEnd}
+          transforming={transformingTokensIds.includes(tokenState.id)}
+          draggable={
+            selectedToolId === "move" &&
+            !(tokenState.id in disabledTokens) &&
+            !tokenState.locked
+          }
+          selectable={
+            selectedToolId === "move" &&
+            ((!(tokenState.id in disabledTokens) && !tokenState.locked) ||
+              map.owner === userId)
+          }
+          fadeOnHover={
+            tokenState.category !== "prop" && selectedToolId === "drawing"
+          }
+          map={map}
+          mapState={mapState}
+          selected={
+            !!tokenMenuOptions &&
+            isTokenMenuOpen &&
+            tokenMenuOptions.tokenStateId === tokenState.id
+          }
+        />
+      )
+    );
+  }
+
+  const tokens = map && mapState && (
+    <Group id="tokens">
+      {Object.values(mapState.tokens)
+        .filter((tokenState) => tokenState.category !== "prop")
+        .sort((a, b) => sortMapTokenStates(a, b, tokenDraggingOptions))
+        .map(tokenFromTokenState)}
+    </Group>
+  );
+
+  const propTokens = map && mapState && (
+    <Group id="tokens">
+      {Object.values(mapState.tokens)
+        .filter((tokenState) => tokenState.category === "prop")
+        .sort((a, b) => sortMapTokenStates(a, b, tokenDraggingOptions))
+        .map(tokenFromTokenState)}
+    </Group>
+  );
+
+  const tokenMenu = (
+    <TokenMenu
+      isOpen={isTokenMenuOpen}
+      onRequestClose={handleTokenMenuClose}
+      onTokenStateChange={onTokenStateChange}
+      tokenState={
+        tokenMenuOptions && mapState?.tokens[tokenMenuOptions.tokenStateId]
+      }
+      focus={tokenMenuOptions?.focus}
+      tokenImage={tokenMenuOptions?.tokenImage}
+      map={map}
+    />
+  );
+
+  const tokenDragOverlay = tokenDraggingOptions && (
+    <TokenDragOverlay
+      onTokenStateRemove={handleTokenStateRemove}
+      draggingOptions={tokenDraggingOptions}
+    />
+  );
+
+  return { tokens, propTokens, tokenMenu, tokenDragOverlay };
+}
+
+export default useMapTokens;
+
+function getMapTokenCategoryWeight(category: TokenCategory) {
+  switch (category) {
+    case "attachment":
+      return 0;
+    case "character":
+      return 1;
+    case "vehicle":
+      return 2;
+    case "prop":
+      return 3;
+    default:
+      return 0;
+  }
+}
+
+// Sort so vehicles render below other tokens
+function sortMapTokenStates(
+  a: TokenState,
+  b: TokenState,
+  tokenDraggingOptions?: TokenDraggingOptions
+) {
+  // If categories are different sort in order "prop", "vehicle", "character", "attachment"
+  if (b.category !== a.category) {
+    const aWeight = getMapTokenCategoryWeight(a.category);
+    const bWeight = getMapTokenCategoryWeight(b.category);
+    return bWeight - aWeight;
+  } else if (
+    tokenDraggingOptions &&
+    tokenDraggingOptions.dragging &&
+    tokenDraggingOptions.tokenStateId === a.id
+  ) {
+    // If dragging token a move above
+    return 1;
+  } else if (
+    tokenDraggingOptions &&
+    tokenDraggingOptions.dragging &&
+    tokenDraggingOptions.tokenStateId === b.id
+  ) {
+    // If dragging token b move above
+    return -1;
+  } else {
+    // Else sort so last modified is on top
+    return a.lastModified - b.lastModified;
+  }
+}
diff --git a/src/hooks/useNetworkedState.js b/src/hooks/useNetworkedState.ts
similarity index 69%
rename from src/hooks/useNetworkedState.js
rename to src/hooks/useNetworkedState.ts
index 99ef54d..8f201f6 100644
--- a/src/hooks/useNetworkedState.js
+++ b/src/hooks/useNetworkedState.ts
@@ -1,36 +1,45 @@
 import { useEffect, useState, useRef, useCallback } from "react";
 import cloneDeep from "lodash.clonedeep";
+import { Diff } from "deep-diff";
 
 import useDebounce from "./useDebounce";
 import { diff, applyChanges } from "../helpers/diff";
+import Session from "../network/Session";
 
 /**
- * @callback setNetworkedState
- * @param {any} update The updated state or a state function passed into setState
- * @param {boolean} sync Whether to sync the update with the session
- * @param {boolean} force Whether to force a full update, usefull when partialUpdates is enabled
+ * @param update The updated state or a state function passed into setState
+ * @param sync Whether to sync the update with the session
+ * @param force Whether to force a full update, usefull when partialUpdates is enabled
  */
+export type SetNetworkedState<S> = (
+  update: React.SetStateAction<S>,
+  sync?: boolean,
+  force?: boolean
+) => void;
+
+type Update<T> = {
+  id: string;
+  changes: Diff<T>[];
+};
 
 /**
  * Helper to sync a react state to a `Session`
  *
- * @param {any} initialState
+ * @param {S} initialState
  * @param {Session} session `Session` instance
  * @param {string} eventName Name of the event to send to the session
  * @param {number} debounceRate Amount to debounce before sending to the session (ms)
  * @param {boolean} partialUpdates Allow sending of partial updates to the session
  * @param {string} partialUpdatesKey Key to lookup in the state to identify a partial update
- *
- * @returns {[any, setNetworkedState]}
  */
-function useNetworkedState(
-  initialState,
-  session,
-  eventName,
-  debounceRate = 500,
-  partialUpdates = true,
-  partialUpdatesKey = "id"
-) {
+function useNetworkedState<S extends { readonly [x: string]: any } | null>(
+  initialState: S,
+  session: Session,
+  eventName: string,
+  debounceRate: number = 500,
+  partialUpdates: boolean = true,
+  partialUpdatesKey: string = "id"
+): [S, SetNetworkedState<S>] {
   const [state, _setState] = useState(initialState);
   // Used to control whether the state needs to be sent to the socket
   const dirtyRef = useRef(false);
@@ -39,19 +48,17 @@ function useNetworkedState(
   const forceUpdateRef = useRef(false);
 
   // Update dirty at the same time as state
-  const setState = useCallback((update, sync = true, force = false) => {
-    dirtyRef.current = sync;
-    forceUpdateRef.current = force;
-    _setState(update);
-  }, []);
-
-  const eventNameRef = useRef(eventName);
-  useEffect(() => {
-    eventNameRef.current = eventName;
-  }, [eventName]);
+  const setState = useCallback<SetNetworkedState<S>>(
+    (update, sync = true, force = false) => {
+      dirtyRef.current = sync;
+      forceUpdateRef.current = force;
+      _setState(update);
+    },
+    []
+  );
 
   const debouncedState = useDebounce(state, debounceRate);
-  const lastSyncedStateRef = useRef();
+  const lastSyncedStateRef = useRef<S>();
   useEffect(() => {
     if (session.socket && dirtyRef.current) {
       // If partial updates enabled, send just the changes to the socket
@@ -63,6 +70,9 @@ function useNetworkedState(
       ) {
         const changes = diff(lastSyncedStateRef.current, debouncedState);
         if (changes) {
+          if (!debouncedState) {
+            return;
+          }
           const update = { id: debouncedState[partialUpdatesKey], changes };
           session.socket.emit(`${eventName}_update`, update);
         }
@@ -82,12 +92,12 @@ function useNetworkedState(
   ]);
 
   useEffect(() => {
-    function handleSocketEvent(data) {
+    function handleSocketEvent(data: S) {
       _setState(data);
       lastSyncedStateRef.current = data;
     }
 
-    function handleSocketUpdateEvent(update) {
+    function handleSocketUpdateEvent(update: Update<S>) {
       _setState((prevState) => {
         if (prevState && prevState[partialUpdatesKey] === update.id) {
           let newState = { ...prevState };
diff --git a/src/hooks/usePortal.js b/src/hooks/usePortal.ts
similarity index 79%
rename from src/hooks/usePortal.js
rename to src/hooks/usePortal.ts
index cb8c2f9..d9c3499 100644
--- a/src/hooks/usePortal.js
+++ b/src/hooks/usePortal.ts
@@ -6,7 +6,7 @@ import { useRef, useEffect } from "react";
  * Creates DOM element to be used as React root.
  * @returns {HTMLElement}
  */
-function createRootElement(id) {
+function createRootElement(id: string) {
   const rootContainer = document.createElement("div");
   rootContainer.setAttribute("id", id);
   return rootContainer;
@@ -16,11 +16,13 @@ function createRootElement(id) {
  * Appends element as last child of body.
  * @param {HTMLElement} rootElem
  */
-function addRootElement(rootElem) {
-  document.body.insertBefore(
-    rootElem,
-    document.body.lastElementChild.nextElementSibling
-  );
+function addRootElement(rootElem: HTMLElement) {
+  if (document.body.lastElementChild) {
+    document.body.insertBefore(
+      rootElem,
+      document.body.lastElementChild?.nextElementSibling
+    );
+  }
 }
 
 /**
@@ -34,13 +36,15 @@ function addRootElement(rootElem) {
  * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
  * @returns {HTMLElement} The DOM node to use as the Portal target.
  */
-function usePortal(id) {
-  const rootElemRef = useRef(null);
+function usePortal(id: string): HTMLElement {
+  const rootElemRef = useRef<HTMLElement | null>(null);
 
   useEffect(
     function setupElement() {
       // Look for existing target dom element to append to
-      const existingParent = document.querySelector(`#${id}`);
+      const existingParent: HTMLElement | null = document.querySelector(
+        `#${id}`
+      );
       // Parent is either a new root or the existing dom element
       const parentElem = existingParent || createRootElement(id);
 
@@ -50,10 +54,10 @@ function usePortal(id) {
       }
 
       // Add the detached element to the parent
-      parentElem.appendChild(rootElemRef.current);
+      rootElemRef.current && parentElem.appendChild(rootElemRef.current);
 
       return function removeElement() {
-        rootElemRef.current.remove();
+        rootElemRef.current && rootElemRef.current.remove();
         if (parentElem.childNodes.length === -1) {
           parentElem.remove();
         }
diff --git a/src/hooks/usePreventOverscroll.js b/src/hooks/usePreventOverscroll.ts
similarity index 74%
rename from src/hooks/usePreventOverscroll.js
rename to src/hooks/usePreventOverscroll.ts
index 73cd602..b0c74c6 100644
--- a/src/hooks/usePreventOverscroll.js
+++ b/src/hooks/usePreventOverscroll.ts
@@ -1,10 +1,10 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 
-function usePreventOverscroll(elementRef) {
+function usePreventOverscroll(elementRef: React.RefObject<HTMLElement>) {
   useEffect(() => {
     // Stop overscroll on chrome and safari
     // also stop pinch to zoom on chrome
-    function preventOverscroll(event) {
+    function preventOverscroll(event: WheelEvent) {
       event.preventDefault();
     }
     const element = elementRef.current;
diff --git a/src/hooks/usePreventSelect.js b/src/hooks/usePreventSelect.ts
similarity index 67%
rename from src/hooks/usePreventSelect.js
rename to src/hooks/usePreventSelect.ts
index 82d36bd..7737fa9 100644
--- a/src/hooks/usePreventSelect.js
+++ b/src/hooks/usePreventSelect.ts
@@ -1,11 +1,8 @@
 function usePreventSelect() {
   function clearSelection() {
-    if (window.getSelection) {
-      window.getSelection().removeAllRanges();
-    }
-    if (document.selection) {
-      document.selection.empty();
-    }
+    window?.getSelection()?.removeAllRanges();
+    // @ts-ignore
+    document?.selection?.empty();
   }
   function preventSelect() {
     clearSelection();
diff --git a/src/hooks/usePreventTouch.js b/src/hooks/usePreventTouch.ts
similarity index 78%
rename from src/hooks/usePreventTouch.js
rename to src/hooks/usePreventTouch.ts
index b101e4b..137b80f 100644
--- a/src/hooks/usePreventTouch.js
+++ b/src/hooks/usePreventTouch.ts
@@ -1,9 +1,9 @@
 import { useEffect } from "react";
 
-function usePreventTouch(elementRef) {
+function usePreventTouch(elementRef: React.RefObject<HTMLElement>) {
   useEffect(() => {
     // Stop 3d touch
-    function prevent3DTouch(event) {
+    function prevent3DTouch(event: TouchEvent) {
       event.preventDefault();
     }
     const element = elementRef.current;
diff --git a/src/hooks/usePrevious.js b/src/hooks/usePrevious.ts
similarity index 68%
rename from src/hooks/usePrevious.js
rename to src/hooks/usePrevious.ts
index 8b8ac74..2c621c2 100644
--- a/src/hooks/usePrevious.js
+++ b/src/hooks/usePrevious.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 
-function usePrevious(value) {
-  const ref = useRef();
+function usePrevious<T>(value: T): T {
+  const ref = useRef<T>(value);
   useEffect(() => {
     ref.current = value;
   }, [value]);
diff --git a/src/hooks/useResponsiveLayout.js b/src/hooks/useResponsiveLayout.ts
similarity index 100%
rename from src/hooks/useResponsiveLayout.js
rename to src/hooks/useResponsiveLayout.ts
diff --git a/src/hooks/useSetting.js b/src/hooks/useSetting.ts
similarity index 68%
rename from src/hooks/useSetting.js
rename to src/hooks/useSetting.ts
index f8553e7..293dc90 100644
--- a/src/hooks/useSetting.js
+++ b/src/hooks/useSetting.ts
@@ -5,14 +5,14 @@ import { useSettings } from "../contexts/SettingsContext";
 
 /**
  * Helper to get and set nested settings that are saved in local storage
- * @param {String} path The path to the setting within the Settings object provided by the SettingsContext
+ * @param {string} path The path to the setting within the Settings object provided by the SettingsContext
  */
-function useSetting(path) {
+function useSetting<Type>(path: string): [Type, (value: Type) => void] {
   const { settings, setSettings } = useSettings();
 
-  const setting = get(settings, path);
+  const setting = get(settings, path) as Type;
 
-  const setSetting = (value) =>
+  const setSetting = (value: Type) =>
     setSettings((prev) => {
       const updated = set({ ...prev }, path, value);
       return updated;
diff --git a/src/hooks/useStageInteraction.js b/src/hooks/useStageInteraction.ts
similarity index 74%
rename from src/hooks/useStageInteraction.js
rename to src/hooks/useStageInteraction.ts
index a35d69c..88ad511 100644
--- a/src/hooks/useStageInteraction.js
+++ b/src/hooks/useStageInteraction.ts
@@ -1,35 +1,42 @@
 import { useRef, useEffect, useState } from "react";
 import { useGesture } from "react-use-gesture";
+import { Handlers } from "react-use-gesture/dist/types";
 import normalizeWheel from "normalize-wheel";
+import Konva from "konva";
 
 import { useKeyboard, useBlur } from "../contexts/KeyboardContext";
+import { MapStage } from "../contexts/MapStageContext";
 
 import shortcuts from "../shortcuts";
 
+import Vector2 from "../helpers/Vector2";
+
 const wheelZoomSpeed = -1;
 const touchZoomSpeed = 0.005;
 const minZoom = 0.1;
 
+type StageScaleChangeEventHandler = (newScale: number) => void;
+
 function useStageInteraction(
-  stage,
-  stageScale,
-  onStageScaleChange,
-  stageTranslateRef,
-  layer,
+  stageRef: MapStage,
+  stageScale: number,
+  onStageScaleChange: StageScaleChangeEventHandler,
+  stageTranslateRef: React.MutableRefObject<Vector2>,
+  layerRef: React.RefObject<Konva.Layer>,
   maxZoom = 10,
   tool = "move",
   preventInteraction = false,
-  gesture = {}
+  gesture: Handlers = {}
 ) {
   const isInteractingWithCanvas = useRef(false);
-  const pinchPreviousDistanceRef = useRef();
-  const pinchPreviousOriginRef = useRef();
+  const pinchPreviousDistanceRef = useRef<number>(0);
+  const pinchPreviousOriginRef = useRef<Vector2>({ x: 0, y: 0 });
 
   const [zoomSpeed, setZoomSpeed] = useState(1);
 
   // Prevent accessibility pinch to zoom on Mac
   useEffect(() => {
-    function handleGesture(e) {
+    function handleGesture(e: Event) {
       e.preventDefault();
     }
     window.addEventListener("gesturestart", handleGesture);
@@ -45,12 +52,18 @@ function useStageInteraction(
       ...gesture,
       onWheelStart: (props) => {
         const { event } = props;
+        const layer = layerRef.current;
         isInteractingWithCanvas.current =
-          layer && event.target === layer.getCanvas()._canvas;
+          layer !== null && event.target === layer.getCanvas()._canvas;
         gesture.onWheelStart && gesture.onWheelStart(props);
       },
       onWheel: (props) => {
-        if (preventInteraction || !isInteractingWithCanvas.current) {
+        const stage = stageRef.current;
+        if (
+          preventInteraction ||
+          !isInteractingWithCanvas.current ||
+          stage === null
+        ) {
           return;
         }
         const { event, last } = props;
@@ -69,24 +82,27 @@ function useStageInteraction(
 
           // Center on pointer
           const pointer = stage.getPointerPosition();
-          const newTranslate = {
-            x: pointer.x - ((pointer.x - stage.x()) / stageScale) * newScale,
-            y: pointer.y - ((pointer.y - stage.y()) / stageScale) * newScale,
-          };
+          if (pointer) {
+            const newTranslate = {
+              x: pointer.x - ((pointer.x - stage.x()) / stageScale) * newScale,
+              y: pointer.y - ((pointer.y - stage.y()) / stageScale) * newScale,
+            };
 
-          stage.position(newTranslate);
+            stage.position(newTranslate);
 
-          stageTranslateRef.current = newTranslate;
+            stageTranslateRef.current = newTranslate;
 
-          onStageScaleChange(newScale);
+            onStageScaleChange(newScale);
+          }
         }
 
         gesture.onWheel && gesture.onWheel(props);
       },
       onPinchStart: (props) => {
         const { event } = props;
+        const layer = layerRef.current;
         isInteractingWithCanvas.current =
-          layer && event.target === layer.getCanvas()._canvas;
+          layer !== null && event.target === layer.getCanvas()._canvas;
         const { da, origin } = props;
         const [distance] = da;
         const [originX, originY] = origin;
@@ -95,9 +111,17 @@ function useStageInteraction(
         gesture.onPinchStart && gesture.onPinchStart(props);
       },
       onPinch: (props) => {
-        if (preventInteraction || !isInteractingWithCanvas.current) {
+        const layer = layerRef.current;
+        const stage = stageRef.current;
+        if (
+          preventInteraction ||
+          !isInteractingWithCanvas.current ||
+          layer === null ||
+          stage === null
+        ) {
           return;
         }
+
         const { da, origin } = props;
         const [distance] = da;
         const [originX, originY] = origin;
@@ -148,16 +172,19 @@ function useStageInteraction(
       },
       onDragStart: (props) => {
         const { event } = props;
+        const layer = layerRef.current;
         isInteractingWithCanvas.current =
-          layer && event.target === layer.getCanvas()._canvas;
+          layer !== null && event.target === layer.getCanvas()._canvas;
         gesture.onDragStart && gesture.onDragStart(props);
       },
       onDrag: (props) => {
         const { delta, pinching } = props;
+        const stage = stageRef.current;
         if (
           preventInteraction ||
           pinching ||
-          !isInteractingWithCanvas.current
+          !isInteractingWithCanvas.current ||
+          stage === null
         ) {
           return;
         }
@@ -186,10 +213,11 @@ function useStageInteraction(
     }
   );
 
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEvent) {
     // TODO: Find better way to detect whether keyboard event should fire.
     // This one fires on all open stages
-    if (preventInteraction) {
+    const stage = stageRef.current;
+    if (preventInteraction || stage === null) {
       return;
     }
     if (shortcuts.stageZoomIn(event) || shortcuts.stageZoomOut(event)) {
@@ -222,7 +250,7 @@ function useStageInteraction(
     }
   }
 
-  function handleKeyUp(event) {
+  function handleKeyUp(event: KeyboardEvent) {
     if (shortcuts.stagePrecisionZoom(event)) {
       setZoomSpeed(1);
     }
diff --git a/src/icons/AddIcon.js b/src/icons/AddIcon.tsx
similarity index 90%
rename from src/icons/AddIcon.js
rename to src/icons/AddIcon.tsx
index 88db9d1..340ee91 100644
--- a/src/icons/AddIcon.js
+++ b/src/icons/AddIcon.tsx
@@ -1,6 +1,4 @@
-import React from "react";
-
-function AddIcon({ large }) {
+function AddIcon({ large }: { large: boolean }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/AddPartyMemberIcon.js b/src/icons/AddPartyMemberIcon.tsx
similarity index 95%
rename from src/icons/AddPartyMemberIcon.js
rename to src/icons/AddPartyMemberIcon.tsx
index 596e40b..1c5bf21 100644
--- a/src/icons/AddPartyMemberIcon.js
+++ b/src/icons/AddPartyMemberIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function AddPartyMemberIcon() {
   return (
     <svg
diff --git a/src/icons/BlendOffIcon.js b/src/icons/BlendOffIcon.tsx
similarity index 96%
rename from src/icons/BlendOffIcon.js
rename to src/icons/BlendOffIcon.tsx
index b5c6590..2a573cd 100644
--- a/src/icons/BlendOffIcon.js
+++ b/src/icons/BlendOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BlendOffIcon() {
   return (
     <svg
diff --git a/src/icons/BlendOnIcon.js b/src/icons/BlendOnIcon.tsx
similarity index 95%
rename from src/icons/BlendOnIcon.js
rename to src/icons/BlendOnIcon.tsx
index 9382f9a..6992627 100644
--- a/src/icons/BlendOnIcon.js
+++ b/src/icons/BlendOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BlendOnIcon() {
   return (
     <svg
diff --git a/src/icons/BrushCircleIcon.js b/src/icons/BrushCircleIcon.tsx
similarity index 92%
rename from src/icons/BrushCircleIcon.js
rename to src/icons/BrushCircleIcon.tsx
index b4cf4ed..bf769d8 100644
--- a/src/icons/BrushCircleIcon.js
+++ b/src/icons/BrushCircleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushCircleIcon() {
   return (
     <svg
diff --git a/src/icons/BrushLineIcon.js b/src/icons/BrushLineIcon.tsx
similarity index 93%
rename from src/icons/BrushLineIcon.js
rename to src/icons/BrushLineIcon.tsx
index 33483b9..90f11da 100644
--- a/src/icons/BrushLineIcon.js
+++ b/src/icons/BrushLineIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushLineIcon() {
   return (
     <svg
diff --git a/src/icons/BrushPaintIcon.js b/src/icons/BrushPaintIcon.tsx
similarity index 94%
rename from src/icons/BrushPaintIcon.js
rename to src/icons/BrushPaintIcon.tsx
index 3a59e77..4cbf863 100644
--- a/src/icons/BrushPaintIcon.js
+++ b/src/icons/BrushPaintIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushPaintIcon() {
   return (
     <svg
diff --git a/src/icons/BrushRectangleIcon.js b/src/icons/BrushRectangleIcon.tsx
similarity index 93%
rename from src/icons/BrushRectangleIcon.js
rename to src/icons/BrushRectangleIcon.tsx
index 9856b88..863b946 100644
--- a/src/icons/BrushRectangleIcon.js
+++ b/src/icons/BrushRectangleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushRectangleIcon() {
   return (
     <svg
diff --git a/src/icons/BrushStrokeIcon.js b/src/icons/BrushStrokeIcon.tsx
similarity index 94%
rename from src/icons/BrushStrokeIcon.js
rename to src/icons/BrushStrokeIcon.tsx
index f626cb7..432c6e1 100644
--- a/src/icons/BrushStrokeIcon.js
+++ b/src/icons/BrushStrokeIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushStrokeIcon() {
   return (
     <svg
diff --git a/src/icons/BrushToolIcon.js b/src/icons/BrushToolIcon.tsx
similarity index 94%
rename from src/icons/BrushToolIcon.js
rename to src/icons/BrushToolIcon.tsx
index e9a9c68..264cb66 100644
--- a/src/icons/BrushToolIcon.js
+++ b/src/icons/BrushToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushToolIcon() {
   return (
     <svg
diff --git a/src/icons/BrushTriangleIcon.js b/src/icons/BrushTriangleIcon.tsx
similarity index 93%
rename from src/icons/BrushTriangleIcon.js
rename to src/icons/BrushTriangleIcon.tsx
index 94c7389..7c0e4be 100644
--- a/src/icons/BrushTriangleIcon.js
+++ b/src/icons/BrushTriangleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function BrushTriangleIcon() {
   return (
     <svg
diff --git a/src/icons/ChangeNicknameIcon.js b/src/icons/ChangeNicknameIcon.tsx
similarity index 94%
rename from src/icons/ChangeNicknameIcon.js
rename to src/icons/ChangeNicknameIcon.tsx
index 3c5d1a8..c1fdb9f 100644
--- a/src/icons/ChangeNicknameIcon.js
+++ b/src/icons/ChangeNicknameIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ChangeNicknameIcon() {
   return (
     <svg
diff --git a/src/icons/ClearDiceIcon.js b/src/icons/ClearDiceIcon.tsx
similarity index 95%
rename from src/icons/ClearDiceIcon.js
rename to src/icons/ClearDiceIcon.tsx
index 030f248..b99ed12 100644
--- a/src/icons/ClearDiceIcon.js
+++ b/src/icons/ClearDiceIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ClearDiceIcon() {
   return (
     <svg
diff --git a/src/icons/CopyIcon.tsx b/src/icons/CopyIcon.tsx
new file mode 100644
index 0000000..43ab7e3
--- /dev/null
+++ b/src/icons/CopyIcon.tsx
@@ -0,0 +1,16 @@
+function CopyIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M15,20H5V7c0-0.55-0.45-1-1-1h0C3.45,6,3,6.45,3,7v13c0,1.1,0.9,2,2,2h10c0.55,0,1-0.45,1-1v0C16,20.45,15.55,20,15,20z M20,16V4c0-1.1-0.9-2-2-2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9C19.1,18,20,17.1,20,16z M18,16H9V4h9V16z" />
+    </svg>
+  );
+}
+
+export default CopyIcon;
diff --git a/src/icons/D100Icon.js b/src/icons/D100Icon.tsx
similarity index 98%
rename from src/icons/D100Icon.js
rename to src/icons/D100Icon.tsx
index 70aa34c..53f4bb2 100644
--- a/src/icons/D100Icon.js
+++ b/src/icons/D100Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D100Icon() {
   return (
     <svg
diff --git a/src/icons/D10Icon.js b/src/icons/D10Icon.tsx
similarity index 97%
rename from src/icons/D10Icon.js
rename to src/icons/D10Icon.tsx
index c045d0b..17ba251 100644
--- a/src/icons/D10Icon.js
+++ b/src/icons/D10Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D10Icon() {
   return (
     <svg
diff --git a/src/icons/D12Icon.js b/src/icons/D12Icon.tsx
similarity index 97%
rename from src/icons/D12Icon.js
rename to src/icons/D12Icon.tsx
index fa34680..514303e 100644
--- a/src/icons/D12Icon.js
+++ b/src/icons/D12Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D12Icon() {
   return (
     <svg
diff --git a/src/icons/D20Icon.js b/src/icons/D20Icon.tsx
similarity index 98%
rename from src/icons/D20Icon.js
rename to src/icons/D20Icon.tsx
index 5975f0e..ce7e643 100644
--- a/src/icons/D20Icon.js
+++ b/src/icons/D20Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D20Icon() {
   return (
     <svg
diff --git a/src/icons/D4Icon.js b/src/icons/D4Icon.tsx
similarity index 95%
rename from src/icons/D4Icon.js
rename to src/icons/D4Icon.tsx
index c9377cd..90f0514 100644
--- a/src/icons/D4Icon.js
+++ b/src/icons/D4Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D4Icon() {
   return (
     <svg
diff --git a/src/icons/D6Icon.js b/src/icons/D6Icon.tsx
similarity index 97%
rename from src/icons/D6Icon.js
rename to src/icons/D6Icon.tsx
index 8135fa2..c21859e 100644
--- a/src/icons/D6Icon.js
+++ b/src/icons/D6Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D6Icon() {
   return (
     <svg
diff --git a/src/icons/D8Icon.js b/src/icons/D8Icon.tsx
similarity index 98%
rename from src/icons/D8Icon.js
rename to src/icons/D8Icon.tsx
index ad7bef1..cd00d13 100644
--- a/src/icons/D8Icon.js
+++ b/src/icons/D8Icon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function D8Icon() {
   return (
     <svg
diff --git a/src/icons/DiceRollsIcon.js b/src/icons/DiceRollsIcon.tsx
similarity index 96%
rename from src/icons/DiceRollsIcon.js
rename to src/icons/DiceRollsIcon.tsx
index 572a707..a93af41 100644
--- a/src/icons/DiceRollsIcon.js
+++ b/src/icons/DiceRollsIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function DiceRollsIcon() {
   return (
     <svg
diff --git a/src/icons/DonateIcon.js b/src/icons/DonateIcon.tsx
similarity index 95%
rename from src/icons/DonateIcon.js
rename to src/icons/DonateIcon.tsx
index 3d4e819..85a9fbf 100644
--- a/src/icons/DonateIcon.js
+++ b/src/icons/DonateIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function DonateIcon() {
   return (
     <svg
diff --git a/src/icons/EditTileIcon.js b/src/icons/EditTileIcon.tsx
similarity index 94%
rename from src/icons/EditTileIcon.js
rename to src/icons/EditTileIcon.tsx
index 8f17bcb..36722a8 100644
--- a/src/icons/EditTileIcon.js
+++ b/src/icons/EditTileIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function EditTileIcon() {
   return (
     <svg
diff --git a/src/icons/EraseAllIcon.js b/src/icons/EraseAllIcon.tsx
similarity index 96%
rename from src/icons/EraseAllIcon.js
rename to src/icons/EraseAllIcon.tsx
index d5e66a9..725e8eb 100644
--- a/src/icons/EraseAllIcon.js
+++ b/src/icons/EraseAllIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function EraseAllIcon() {
   return (
     <svg
diff --git a/src/icons/EraseToolIcon.js b/src/icons/EraseToolIcon.tsx
similarity index 95%
rename from src/icons/EraseToolIcon.js
rename to src/icons/EraseToolIcon.tsx
index e15389e..7b80d4c 100644
--- a/src/icons/EraseToolIcon.js
+++ b/src/icons/EraseToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function EraseToolIcon() {
   return (
     <svg
diff --git a/src/icons/ExpandMoreDiceIcon.js b/src/icons/ExpandMoreDiceIcon.tsx
similarity index 92%
rename from src/icons/ExpandMoreDiceIcon.js
rename to src/icons/ExpandMoreDiceIcon.tsx
index 53f0a14..1da5d39 100644
--- a/src/icons/ExpandMoreDiceIcon.js
+++ b/src/icons/ExpandMoreDiceIcon.tsx
@@ -1,6 +1,4 @@
-import React from "react";
-
-function ExpandMoreDiceIcon({ isExpanded }) {
+function ExpandMoreDiceIcon({ isExpanded }: { isExpanded: boolean }) {
   return (
     <svg
       width="24"
diff --git a/src/icons/ExpandMoreDiceTrayIcon.js b/src/icons/ExpandMoreDiceTrayIcon.tsx
similarity index 96%
rename from src/icons/ExpandMoreDiceTrayIcon.js
rename to src/icons/ExpandMoreDiceTrayIcon.tsx
index 2b860d9..ad62768 100644
--- a/src/icons/ExpandMoreDiceTrayIcon.js
+++ b/src/icons/ExpandMoreDiceTrayIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ExpandMoreDotIcon() {
   return (
     <svg
diff --git a/src/icons/ExpandMoreDotIcon.js b/src/icons/ExpandMoreDotIcon.tsx
similarity index 94%
rename from src/icons/ExpandMoreDotIcon.js
rename to src/icons/ExpandMoreDotIcon.tsx
index 6259f07..d47c5ee 100644
--- a/src/icons/ExpandMoreDotIcon.js
+++ b/src/icons/ExpandMoreDotIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ExpandMoreDotIcon() {
   return (
     <svg
diff --git a/src/icons/ExpandMoreIcon.js b/src/icons/ExpandMoreIcon.tsx
similarity index 94%
rename from src/icons/ExpandMoreIcon.js
rename to src/icons/ExpandMoreIcon.tsx
index 35e4078..b18d0cb 100644
--- a/src/icons/ExpandMoreIcon.js
+++ b/src/icons/ExpandMoreIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ExpandMoreIcon() {
   return (
     <svg
diff --git a/src/icons/FogBrushIcon.js b/src/icons/FogBrushIcon.tsx
similarity index 94%
rename from src/icons/FogBrushIcon.js
rename to src/icons/FogBrushIcon.tsx
index 827c10d..9b914e8 100644
--- a/src/icons/FogBrushIcon.js
+++ b/src/icons/FogBrushIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogBrushIcon() {
   return (
     <svg
diff --git a/src/icons/FogCutOffIcon.js b/src/icons/FogCutOffIcon.tsx
similarity index 96%
rename from src/icons/FogCutOffIcon.js
rename to src/icons/FogCutOffIcon.tsx
index f04bbe0..df8b7cf 100644
--- a/src/icons/FogCutOffIcon.js
+++ b/src/icons/FogCutOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogCutOffIcon() {
   return (
     <svg
diff --git a/src/icons/FogCutOnIcon.js b/src/icons/FogCutOnIcon.tsx
similarity index 96%
rename from src/icons/FogCutOnIcon.js
rename to src/icons/FogCutOnIcon.tsx
index fef6529..f892b21 100644
--- a/src/icons/FogCutOnIcon.js
+++ b/src/icons/FogCutOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogCutOnIcon() {
   return (
     <svg
diff --git a/src/icons/FogMultilayerOffIcon.js b/src/icons/FogMultilayerOffIcon.tsx
similarity index 97%
rename from src/icons/FogMultilayerOffIcon.js
rename to src/icons/FogMultilayerOffIcon.tsx
index f71da9b..06333ff 100644
--- a/src/icons/FogMultilayerOffIcon.js
+++ b/src/icons/FogMultilayerOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogMultilayerOffIcon() {
   return (
     <svg
diff --git a/src/icons/FogMultilayerOnIcon.js b/src/icons/FogMultilayerOnIcon.tsx
similarity index 96%
rename from src/icons/FogMultilayerOnIcon.js
rename to src/icons/FogMultilayerOnIcon.tsx
index 361e770..4e2a4de 100644
--- a/src/icons/FogMultilayerOnIcon.js
+++ b/src/icons/FogMultilayerOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogMultilayerOnIcon() {
   return (
     <svg
diff --git a/src/icons/FogPolygonIcon.js b/src/icons/FogPolygonIcon.tsx
similarity index 94%
rename from src/icons/FogPolygonIcon.js
rename to src/icons/FogPolygonIcon.tsx
index cfd2bd1..6c6c6ed 100644
--- a/src/icons/FogPolygonIcon.js
+++ b/src/icons/FogPolygonIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogPolygonIcon() {
   return (
     <svg
diff --git a/src/icons/FogPreviewOffIcon.js b/src/icons/FogPreviewOffIcon.tsx
similarity index 96%
rename from src/icons/FogPreviewOffIcon.js
rename to src/icons/FogPreviewOffIcon.tsx
index 458c9d6..3633fd6 100644
--- a/src/icons/FogPreviewOffIcon.js
+++ b/src/icons/FogPreviewOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogPreviewOffIcon() {
   return (
     <svg
diff --git a/src/icons/FogPreviewOnIcon.js b/src/icons/FogPreviewOnIcon.tsx
similarity index 94%
rename from src/icons/FogPreviewOnIcon.js
rename to src/icons/FogPreviewOnIcon.tsx
index baacee1..6a533a8 100644
--- a/src/icons/FogPreviewOnIcon.js
+++ b/src/icons/FogPreviewOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogPreviewOnIcon() {
   return (
     <svg
diff --git a/src/icons/FogRectangleIcon.js b/src/icons/FogRectangleIcon.tsx
similarity index 93%
rename from src/icons/FogRectangleIcon.js
rename to src/icons/FogRectangleIcon.tsx
index 7a41096..f592119 100644
--- a/src/icons/FogRectangleIcon.js
+++ b/src/icons/FogRectangleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogRectangleIcon() {
   return (
     <svg
diff --git a/src/icons/FogRemoveIcon.js b/src/icons/FogRemoveIcon.tsx
similarity index 95%
rename from src/icons/FogRemoveIcon.js
rename to src/icons/FogRemoveIcon.tsx
index 9ad8330..6deb60d 100644
--- a/src/icons/FogRemoveIcon.js
+++ b/src/icons/FogRemoveIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogRemoveIcon() {
   return (
     <svg
diff --git a/src/icons/FogToggleIcon.js b/src/icons/FogToggleIcon.tsx
similarity index 95%
rename from src/icons/FogToggleIcon.js
rename to src/icons/FogToggleIcon.tsx
index 569288b..0ae8040 100644
--- a/src/icons/FogToggleIcon.js
+++ b/src/icons/FogToggleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogToggleIcon() {
   return (
     <svg
diff --git a/src/icons/FogToolIcon.js b/src/icons/FogToolIcon.tsx
similarity index 94%
rename from src/icons/FogToolIcon.js
rename to src/icons/FogToolIcon.tsx
index d81bd89..b7e071b 100644
--- a/src/icons/FogToolIcon.js
+++ b/src/icons/FogToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FogToolIcon() {
   return (
     <svg
diff --git a/src/icons/FullScreenExitIcon.js b/src/icons/FullScreenExitIcon.tsx
similarity index 95%
rename from src/icons/FullScreenExitIcon.js
rename to src/icons/FullScreenExitIcon.tsx
index 7e23c78..4dc246d 100644
--- a/src/icons/FullScreenExitIcon.js
+++ b/src/icons/FullScreenExitIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FullScreenIcon() {
   return (
     <svg
diff --git a/src/icons/FullScreenIcon.js b/src/icons/FullScreenIcon.tsx
similarity index 95%
rename from src/icons/FullScreenIcon.js
rename to src/icons/FullScreenIcon.tsx
index 0abc848..cb4b2ab 100644
--- a/src/icons/FullScreenIcon.js
+++ b/src/icons/FullScreenIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function FullScreenIcon() {
   return (
     <svg
diff --git a/src/icons/GestureOffIcon.js b/src/icons/GestureOffIcon.tsx
similarity index 96%
rename from src/icons/GestureOffIcon.js
rename to src/icons/GestureOffIcon.tsx
index a424e5a..69c85aa 100644
--- a/src/icons/GestureOffIcon.js
+++ b/src/icons/GestureOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function GestureOffIcon() {
   return (
     <svg
diff --git a/src/icons/GestureOnIcon.js b/src/icons/GestureOnIcon.tsx
similarity index 95%
rename from src/icons/GestureOnIcon.js
rename to src/icons/GestureOnIcon.tsx
index f3c4f4c..df27bf2 100644
--- a/src/icons/GestureOnIcon.js
+++ b/src/icons/GestureOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function GestureOnIcon() {
   return (
     <svg
diff --git a/src/icons/GridOffIcon.js b/src/icons/GridOffIcon.tsx
similarity index 96%
rename from src/icons/GridOffIcon.js
rename to src/icons/GridOffIcon.tsx
index a1287c2..3475c26 100644
--- a/src/icons/GridOffIcon.js
+++ b/src/icons/GridOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function GridOffIcon() {
   return (
     <svg
diff --git a/src/icons/GridOnIcon.js b/src/icons/GridOnIcon.tsx
similarity index 95%
rename from src/icons/GridOnIcon.js
rename to src/icons/GridOnIcon.tsx
index 1796b30..55bb43a 100644
--- a/src/icons/GridOnIcon.js
+++ b/src/icons/GridOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function GridOnIcon() {
   return (
     <svg
diff --git a/src/icons/GroupIcon.js b/src/icons/GroupIcon.tsx
similarity index 94%
rename from src/icons/GroupIcon.js
rename to src/icons/GroupIcon.tsx
index 1285cfb..61dd10f 100644
--- a/src/icons/GroupIcon.js
+++ b/src/icons/GroupIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function GroupIcon() {
   return (
     <svg
diff --git a/src/icons/HelpIcon.js b/src/icons/HelpIcon.tsx
similarity index 96%
rename from src/icons/HelpIcon.js
rename to src/icons/HelpIcon.tsx
index f45c9a8..599ba39 100644
--- a/src/icons/HelpIcon.js
+++ b/src/icons/HelpIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function HelpIcon() {
   return (
     <svg
diff --git a/src/icons/MeasureToolIcon.js b/src/icons/MeasureToolIcon.tsx
similarity index 97%
rename from src/icons/MeasureToolIcon.js
rename to src/icons/MeasureToolIcon.tsx
index d62c53b..4d55ece 100644
--- a/src/icons/MeasureToolIcon.js
+++ b/src/icons/MeasureToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function MeasureToolIcon() {
   return (
     <svg
diff --git a/src/icons/MoveIcon.js b/src/icons/MoveIcon.tsx
similarity index 96%
rename from src/icons/MoveIcon.js
rename to src/icons/MoveIcon.tsx
index 233a691..b961751 100644
--- a/src/icons/MoveIcon.js
+++ b/src/icons/MoveIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function MoveIcon() {
   return (
     <svg
diff --git a/src/icons/MoveToolIcon.js b/src/icons/MoveToolIcon.tsx
similarity index 96%
rename from src/icons/MoveToolIcon.js
rename to src/icons/MoveToolIcon.tsx
index 04120c8..50b8891 100644
--- a/src/icons/MoveToolIcon.js
+++ b/src/icons/MoveToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function MoveToolIcon() {
   return (
     <svg
diff --git a/src/icons/NoteTextIcon.js b/src/icons/NoteTextIcon.tsx
similarity index 95%
rename from src/icons/NoteTextIcon.js
rename to src/icons/NoteTextIcon.tsx
index 0b3404f..c406101 100644
--- a/src/icons/NoteTextIcon.js
+++ b/src/icons/NoteTextIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function NoteTextIcon() {
   return (
     <svg
diff --git a/src/icons/NoteToolIcon.js b/src/icons/NoteToolIcon.tsx
similarity index 95%
rename from src/icons/NoteToolIcon.js
rename to src/icons/NoteToolIcon.tsx
index e9bb0e5..f40c42f 100644
--- a/src/icons/NoteToolIcon.js
+++ b/src/icons/NoteToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function NoteToolIcon() {
   return (
     <svg
diff --git a/src/icons/OfflineIcon.js b/src/icons/OfflineIcon.tsx
similarity index 97%
rename from src/icons/OfflineIcon.js
rename to src/icons/OfflineIcon.tsx
index 75e1c05..8c9e227 100644
--- a/src/icons/OfflineIcon.js
+++ b/src/icons/OfflineIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function PointerToolIcon() {
   return (
     <svg
diff --git a/src/icons/PasteIcon.tsx b/src/icons/PasteIcon.tsx
new file mode 100644
index 0000000..4922858
--- /dev/null
+++ b/src/icons/PasteIcon.tsx
@@ -0,0 +1,16 @@
+function PasteIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm6 18H6c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1h1v1c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V4h1c.55 0 1 .45 1 1v14c0 .55-.45 1-1 1z" />
+    </svg>
+  );
+}
+
+export default PasteIcon;
diff --git a/src/icons/PointerToolIcon.js b/src/icons/PointerToolIcon.tsx
similarity index 93%
rename from src/icons/PointerToolIcon.js
rename to src/icons/PointerToolIcon.tsx
index 1e7bf24..71380a2 100644
--- a/src/icons/PointerToolIcon.js
+++ b/src/icons/PointerToolIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function PointerToolIcon() {
   return (
     <svg
diff --git a/src/icons/ReconnectingIcon.js b/src/icons/ReconnectingIcon.tsx
similarity index 97%
rename from src/icons/ReconnectingIcon.js
rename to src/icons/ReconnectingIcon.tsx
index b7ccdc9..1d30553 100644
--- a/src/icons/ReconnectingIcon.js
+++ b/src/icons/ReconnectingIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ReconnectingIcon() {
   return (
     <svg
diff --git a/src/icons/RedoIcon.js b/src/icons/RedoIcon.tsx
similarity index 95%
rename from src/icons/RedoIcon.js
rename to src/icons/RedoIcon.tsx
index 6f0896b..e8e2b15 100644
--- a/src/icons/RedoIcon.js
+++ b/src/icons/RedoIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function RedoIcon() {
   return (
     <svg
diff --git a/src/icons/RemoveMapIcon.js b/src/icons/RemoveMapIcon.tsx
similarity index 94%
rename from src/icons/RemoveMapIcon.js
rename to src/icons/RemoveMapIcon.tsx
index a7dd3f3..d82225c 100644
--- a/src/icons/RemoveMapIcon.js
+++ b/src/icons/RemoveMapIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function RemoveMapIcon() {
   return (
     <svg
diff --git a/src/icons/RemoveTokenIcon.js b/src/icons/RemoveTokenIcon.tsx
similarity index 94%
rename from src/icons/RemoveTokenIcon.js
rename to src/icons/RemoveTokenIcon.tsx
index 2f587d2..9506d0c 100644
--- a/src/icons/RemoveTokenIcon.js
+++ b/src/icons/RemoveTokenIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function RemoveTokenIcon() {
   return (
     <svg
diff --git a/src/icons/RerollDiceIcon.js b/src/icons/RerollDiceIcon.tsx
similarity index 97%
rename from src/icons/RerollDiceIcon.js
rename to src/icons/RerollDiceIcon.tsx
index 0f3a5b1..2eb7c45 100644
--- a/src/icons/RerollDiceIcon.js
+++ b/src/icons/RerollDiceIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function RerollDiceIcon() {
   return (
     <svg
diff --git a/src/icons/ResetMapIcon.js b/src/icons/ResetMapIcon.tsx
similarity index 95%
rename from src/icons/ResetMapIcon.js
rename to src/icons/ResetMapIcon.tsx
index 02ac13b..fbfbb14 100644
--- a/src/icons/ResetMapIcon.js
+++ b/src/icons/ResetMapIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ResetMapIcon() {
   return (
     <svg
diff --git a/src/icons/SearchIcon.js b/src/icons/SearchIcon.tsx
similarity index 95%
rename from src/icons/SearchIcon.js
rename to src/icons/SearchIcon.tsx
index 095987b..ab178a8 100644
--- a/src/icons/SearchIcon.js
+++ b/src/icons/SearchIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SearchIcon() {
   return (
     <svg
diff --git a/src/icons/SelectDiceIcon.js b/src/icons/SelectDiceIcon.tsx
similarity index 96%
rename from src/icons/SelectDiceIcon.js
rename to src/icons/SelectDiceIcon.tsx
index c51c1a2..47e64c6 100644
--- a/src/icons/SelectDiceIcon.js
+++ b/src/icons/SelectDiceIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SelectDiceIcon() {
   return (
     <svg
diff --git a/src/icons/SelectMapIcon.js b/src/icons/SelectMapIcon.tsx
similarity index 95%
rename from src/icons/SelectMapIcon.js
rename to src/icons/SelectMapIcon.tsx
index dbfd967..d449968 100644
--- a/src/icons/SelectMapIcon.js
+++ b/src/icons/SelectMapIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SelectMapIcon() {
   return (
     <svg
diff --git a/src/icons/SelectMultipleIcon.js b/src/icons/SelectMultipleIcon.tsx
similarity index 96%
rename from src/icons/SelectMultipleIcon.js
rename to src/icons/SelectMultipleIcon.tsx
index 4b7184f..6e7e703 100644
--- a/src/icons/SelectMultipleIcon.js
+++ b/src/icons/SelectMultipleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SelectMultipleIcon() {
   return (
     <svg
diff --git a/src/icons/SelectPathIcon.tsx b/src/icons/SelectPathIcon.tsx
new file mode 100644
index 0000000..8651e29
--- /dev/null
+++ b/src/icons/SelectPathIcon.tsx
@@ -0,0 +1,17 @@
+function SelectPathIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <rect fill="none" height="24" width="24" />
+      <path d="M5 17a1 1 0 011 1 4 4 0 001.6 3.2 1 1 0 11-1.2 1.6A6 6 0 014 18a1 1 0 011-1zM6.087 16.521a1 1 0 011.322-.504c.898.402 1.815.683 2.744.836a1 1 0 01-.326 1.974 13.145 13.145 0 01-3.236-.984 1 1 0 01-.504-1.322zM12 1c6.031 0 11 3.974 11 9.022a8.19 8.19 0 01-.376 2.278 1 1 0 01-1.908-.6A6.162 6.162 0 0021 10c0-3.811-3.988-7-9-7-5.012 0-9 3.189-9 6.992a5.8 5.8 0 001.143 3.412 1 1 0 11-1.606 1.192A7.806 7.806 0 011 10c0-5.026 4.969-9 11-9z" />
+      <path d="M5 13a3 3 0 100 6 3 3 0 000-6zm0 2a1 1 0 110 2 1 1 0 010-2zM14.488 10.35l-.187-.01A1.34 1.34 0 0013 11.68v10c.02.6.39 1.092.926 1.27a1 1 0 00.314.05h.09l.158-.01.153-.034c.343-.09.592-.26.769-.496l2.304-3.45h3.956a1.323 1.323 0 001.26-.884 1.33 1.33 0 00-.434-1.494l-7.323-5.986a1.313 1.313 0 00-.685-.297z" />
+    </svg>
+  );
+}
+
+export default SelectPathIcon;
diff --git a/src/icons/SelectRectangleIcon.tsx b/src/icons/SelectRectangleIcon.tsx
new file mode 100644
index 0000000..d7d9694
--- /dev/null
+++ b/src/icons/SelectRectangleIcon.tsx
@@ -0,0 +1,17 @@
+function SelectRectangleIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <rect fill="none" height="24" width="24" />
+      <path d="M18.75 3c1.186 0 2.165.93 2.245 2.097L21 5.25V11a1 1 0 01-2 0V6.167a1.17 1.17 0 00-1.04-1.16L17.833 5H6.167a1.17 1.17 0 00-1.16 1.04L5 6.167v11.666a1.17 1.17 0 001.04 1.16l.127.007H11a1 1 0 010 2H5.25a2.257 2.257 0 01-2.245-2.097L3 18.75V5.25c0-1.186.93-2.165 2.097-2.245L5.25 3h13.5z" />
+      <path d="M14.33 10h-.03a1.34 1.34 0 00-1.3 1.34v10c.02.6.39 1.092.926 1.27l.153.05h.251l.14-.007a1.35 1.35 0 00.94-.533l2.304-3.45h3.956a1.323 1.323 0 001.26-.884 1.33 1.33 0 00-.434-1.494l-7.323-5.986A1.312 1.312 0 0014.33 10z" />
+    </svg>
+  );
+}
+
+export default SelectRectangleIcon;
diff --git a/src/icons/SelectSingleIcon.js b/src/icons/SelectSingleIcon.tsx
similarity index 94%
rename from src/icons/SelectSingleIcon.js
rename to src/icons/SelectSingleIcon.tsx
index 47b0bd6..08959b6 100644
--- a/src/icons/SelectSingleIcon.js
+++ b/src/icons/SelectSingleIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SelectSingleIcon() {
   return (
     <svg
diff --git a/src/icons/SelectTokensIcon.js b/src/icons/SelectTokensIcon.tsx
similarity index 94%
rename from src/icons/SelectTokensIcon.js
rename to src/icons/SelectTokensIcon.tsx
index 0637422..2a62390 100644
--- a/src/icons/SelectTokensIcon.js
+++ b/src/icons/SelectTokensIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SelectMapIcon() {
   return (
     <svg
diff --git a/src/icons/SelectToolIcon.tsx b/src/icons/SelectToolIcon.tsx
new file mode 100644
index 0000000..cf8a310
--- /dev/null
+++ b/src/icons/SelectToolIcon.tsx
@@ -0,0 +1,17 @@
+function SelectToolIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <rect fill="none" height="24" width="24" />
+      <path d="M5 17a1 1 0 011 1 4 4 0 001.6 3.2 1 1 0 11-1.2 1.6A6 6 0 014 18a1 1 0 011-1zM6.087 16.521a1 1 0 011.322-.504c.898.402 1.815.683 2.744.836a1 1 0 01-.326 1.974 13.145 13.145 0 01-3.236-.984 1 1 0 01-.504-1.322zM12 1c6.031 0 11 3.974 11 9.022a8.19 8.19 0 01-.376 2.278 1 1 0 01-1.908-.6A6.162 6.162 0 0021 10c0-3.811-3.988-7-9-7-5.012 0-9 3.189-9 6.992a5.8 5.8 0 001.143 3.412 1 1 0 11-1.606 1.192A7.806 7.806 0 011 10c0-5.026 4.969-9 11-9z" />
+      <path d="M5 13a3 3 0 100 6 3 3 0 000-6zm0 2a1 1 0 110 2 1 1 0 010-2zM14.488 10.35l-.187-.01A1.34 1.34 0 0013 11.68v10c.02.6.39 1.092.926 1.27a1 1 0 00.314.05h.09l.158-.01.153-.034c.343-.09.592-.26.769-.496l2.304-3.45h3.956a1.323 1.323 0 001.26-.884 1.33 1.33 0 00-.434-1.494l-7.323-5.986a1.313 1.313 0 00-.685-.297z" />
+    </svg>
+  );
+}
+
+export default SelectToolIcon;
diff --git a/src/icons/SettingsIcon.js b/src/icons/SettingsIcon.tsx
similarity index 97%
rename from src/icons/SettingsIcon.js
rename to src/icons/SettingsIcon.tsx
index 13bceb9..cb3d218 100644
--- a/src/icons/SettingsIcon.js
+++ b/src/icons/SettingsIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SettingsIcon() {
   return (
     <svg
diff --git a/src/icons/ShapeFillOffIcon.tsx b/src/icons/ShapeFillOffIcon.tsx
new file mode 100644
index 0000000..a7abeb1
--- /dev/null
+++ b/src/icons/ShapeFillOffIcon.tsx
@@ -0,0 +1,16 @@
+function ShapeFillOffIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M3.414 6.52L16.85 19.953a1 1 0 01-1.414 1.415l-2.644-2.644-1.783 1.783a1.688 1.688 0 01-1.025.484l-.16.008c-.371 0-.751-.128-1.058-.378l-.126-.114-6.147-6.147a1.664 1.664 0 01-.11-2.249l.11-.12 1.782-1.784L2 7.934a1 1 0 111.414-1.415zM7.85 2.695l.097.086 9.21 9.21c.62.62.656 1.597.109 2.25l-.11.12-1.769 1.768-2.954-2.954h2.745L9.824 7.823 8.45 9.195 6.87 7.613l1.379-1.377L6.37 4.358a1.113 1.113 0 010-1.576 1.113 1.113 0 011.479-.086zm-.607 10.48L5.856 11.79 4.47 13.176h2.772zM19.882 21a2.242 2.242 0 002.236-2.235c0-1.487-2.236-3.912-2.236-3.912s-2.235 2.425-2.235 3.912A2.242 2.242 0 0019.882 21z" />
+    </svg>
+  );
+}
+
+export default ShapeFillOffIcon;
diff --git a/src/icons/ShapeFillOnIcon.tsx b/src/icons/ShapeFillOnIcon.tsx
new file mode 100644
index 0000000..49834ab
--- /dev/null
+++ b/src/icons/ShapeFillOnIcon.tsx
@@ -0,0 +1,16 @@
+function ShapeFillOnIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M8.639 20.508c.324.324.76.492 1.185.492.424 0 .86-.168 1.184-.492l6.147-6.147c.66-.648.66-1.71 0-2.37l-9.21-9.209a1.113 1.113 0 00-1.575 0 1.113 1.113 0 000 1.576l1.878 1.878-5.756 5.756c-.66.66-.66 1.72 0 2.37l6.147 6.146zM9.824 7.823l5.353 5.353H4.47l5.354-5.353zM19.882 21a2.242 2.242 0 002.236-2.235c0-1.487-2.236-3.912-2.236-3.912s-2.235 2.425-2.235 3.912A2.242 2.242 0 0019.882 21z" />
+    </svg>
+  );
+}
+
+export default ShapeFillOnIcon;
diff --git a/src/icons/ShareDiceOffIcon.js b/src/icons/ShareDiceOffIcon.tsx
similarity index 96%
rename from src/icons/ShareDiceOffIcon.js
rename to src/icons/ShareDiceOffIcon.tsx
index 8834ac4..27c73ab 100644
--- a/src/icons/ShareDiceOffIcon.js
+++ b/src/icons/ShareDiceOffIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ShareDiceOffIcon() {
   return (
     <svg
diff --git a/src/icons/ShareDiceOnIcon.js b/src/icons/ShareDiceOnIcon.tsx
similarity index 95%
rename from src/icons/ShareDiceOnIcon.js
rename to src/icons/ShareDiceOnIcon.tsx
index 0f4401d..011cc3c 100644
--- a/src/icons/ShareDiceOnIcon.js
+++ b/src/icons/ShareDiceOnIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function ShareDiceOnIcon() {
   return (
     <svg
diff --git a/src/icons/SocialPatreonIcon.js b/src/icons/SocialPatreonIcon.tsx
similarity index 95%
rename from src/icons/SocialPatreonIcon.js
rename to src/icons/SocialPatreonIcon.tsx
index 676d906..aa92de6 100644
--- a/src/icons/SocialPatreonIcon.js
+++ b/src/icons/SocialPatreonIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SocialPatreonIcon() {
   return (
     <svg
diff --git a/src/icons/SocialRedditIcon.js b/src/icons/SocialRedditIcon.tsx
similarity index 97%
rename from src/icons/SocialRedditIcon.js
rename to src/icons/SocialRedditIcon.tsx
index 191322f..f31a092 100644
--- a/src/icons/SocialRedditIcon.js
+++ b/src/icons/SocialRedditIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SocialRedditIcon() {
   return (
     <svg
diff --git a/src/icons/SocialTwitterIcon.js b/src/icons/SocialTwitterIcon.tsx
similarity index 96%
rename from src/icons/SocialTwitterIcon.js
rename to src/icons/SocialTwitterIcon.tsx
index 9b52ab0..e599e7b 100644
--- a/src/icons/SocialTwitterIcon.js
+++ b/src/icons/SocialTwitterIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SocialTwitterIcon() {
   return (
     <svg
diff --git a/src/icons/SocialYouTubeIcon.js b/src/icons/SocialYouTubeIcon.tsx
similarity index 96%
rename from src/icons/SocialYouTubeIcon.js
rename to src/icons/SocialYouTubeIcon.tsx
index 00ccfd4..f21e4f1 100644
--- a/src/icons/SocialYouTubeIcon.js
+++ b/src/icons/SocialYouTubeIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function SocialYouTubeIcon() {
   return (
     <svg
diff --git a/src/icons/StartTimerIcon.js b/src/icons/StartTimerIcon.tsx
similarity index 96%
rename from src/icons/StartTimerIcon.js
rename to src/icons/StartTimerIcon.tsx
index f55517f..d8698fe 100644
--- a/src/icons/StartTimerIcon.js
+++ b/src/icons/StartTimerIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function StartTimerIcon() {
   return (
     <svg
diff --git a/src/icons/StreamMuteIcon.js b/src/icons/StreamMuteIcon.tsx
similarity index 95%
rename from src/icons/StreamMuteIcon.js
rename to src/icons/StreamMuteIcon.tsx
index 82c5288..bfe1876 100644
--- a/src/icons/StreamMuteIcon.js
+++ b/src/icons/StreamMuteIcon.tsx
@@ -1,6 +1,4 @@
-import React from "react";
-
-function StreamMuteIcon({ muted }) {
+function StreamMuteIcon({ muted }: { muted: boolean }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/TokenAttachmentIcon.tsx b/src/icons/TokenAttachmentIcon.tsx
new file mode 100644
index 0000000..08c6ed0
--- /dev/null
+++ b/src/icons/TokenAttachmentIcon.tsx
@@ -0,0 +1,16 @@
+function TokenAttachmentIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M12,2C6.49,2,2,6.49,2,12s4.49,10,10,10s10-4.49,10-10S17.51,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M15,12c0,1.66-1.34,3-3,3s-3-1.34-3-3s1.34-3,3-3S15,10.34,15,12z" />
+    </svg>
+  );
+}
+
+export default TokenAttachmentIcon;
diff --git a/src/icons/TokenCharacterIcon.tsx b/src/icons/TokenCharacterIcon.tsx
new file mode 100644
index 0000000..1f18e28
--- /dev/null
+++ b/src/icons/TokenCharacterIcon.tsx
@@ -0,0 +1,16 @@
+function TokenCharacterIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M20.75 6.99c-.14-.55-.69-.87-1.24-.75-2.38.53-5.03.76-7.51.76s-5.13-.23-7.51-.76c-.55-.12-1.1.2-1.24.75-.14.56.2 1.13.75 1.26 1.61.36 3.35.61 5 .75v12c0 .55.45 1 1 1s1-.45 1-1v-5h2v5c0 .55.45 1 1 1s1-.45 1-1V9c1.65-.14 3.39-.39 4.99-.75.56-.13.9-.7.76-1.26zM12 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" />
+    </svg>
+  );
+}
+
+export default TokenCharacterIcon;
diff --git a/src/icons/TokenHideIcon.js b/src/icons/TokenHideIcon.tsx
similarity index 96%
rename from src/icons/TokenHideIcon.js
rename to src/icons/TokenHideIcon.tsx
index 3ab7dd3..f5473c4 100644
--- a/src/icons/TokenHideIcon.js
+++ b/src/icons/TokenHideIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function TokenHideIcon() {
   return (
     <svg
diff --git a/src/icons/TokenLockIcon.js b/src/icons/TokenLockIcon.tsx
similarity index 94%
rename from src/icons/TokenLockIcon.js
rename to src/icons/TokenLockIcon.tsx
index c4785d9..b893bd9 100644
--- a/src/icons/TokenLockIcon.js
+++ b/src/icons/TokenLockIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function TokenLockIcon() {
   return (
     <svg
diff --git a/src/icons/TokenMountIcon.tsx b/src/icons/TokenMountIcon.tsx
new file mode 100644
index 0000000..6926e6d
--- /dev/null
+++ b/src/icons/TokenMountIcon.tsx
@@ -0,0 +1,16 @@
+function TokenMountIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M22.006 6v2.71c0 .472-.302.89-.75 1.04a1.005 1.005 0 01-1.17-.42l-1.12-1.79c-.13-.21-.46-.12-.46.13v3.58c0 .98-.39 1.86-1 2.53v5.97a1.25 1.25 0 01-2.5 0V15h-.25c-.21 0-.42-.03-.62-.06l-4.44-.74-1.12 2.01.712 3.55A1.037 1.037 0 018.27 21a1.559 1.559 0 01-1.525-1.238l-.74-3.512c-.03-.3 0-.6.16-.86l1.02-1.81a3.272 3.272 0 01-1.68-2.77c-.04.15-.06.37-.03.69.03.44.14 1.09.07 1.81-.04.72-.37 1.46-.79 1.95-.43.49-.9.83-1.4 1.09-.5.26-.89-.23-.7-.7.19-.47.38-.89.42-1.28.06-.37-.01-.67-.12-.94l-.53-1.13c-.21-.51-.47-1.25-.42-2.12.03-.85.5-1.96 1.39-2.57.9-.61 1.87-.69 2.66-.53.5.1 1.01.34 1.45.68.37-.17.8-.26 1.25-.26h5.75V7c0-2.21 1.79-4 4-4h3.5l-.89 1.34c.54.36.89.97.89 1.66z" />
+    </svg>
+  );
+}
+
+export default TokenMountIcon;
diff --git a/src/icons/TokenPropIcon.tsx b/src/icons/TokenPropIcon.tsx
new file mode 100644
index 0000000..e632beb
--- /dev/null
+++ b/src/icons/TokenPropIcon.tsx
@@ -0,0 +1,16 @@
+function TokenPropIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M16.96,12h0.08c0.81,0,1.28-0.91,0.82-1.57l-5.08-7.25c-0.4-0.57-1.24-0.57-1.64,0L6.1,10.43C5.64,11.09,6.12,12,6.93,12 h0.04l-2.9,4.46C3.63,17.12,4.11,18,4.91,18h5.08v2.02c0,1.09,0.89,1.98,1.98,1.98h0c1.09,0,1.98-0.89,1.98-1.98V18h5.15 c0.8,0,1.28-0.89,0.83-1.55L16.96,12z" />
+    </svg>
+  );
+}
+
+export default TokenPropIcon;
diff --git a/src/icons/TokenShowIcon.js b/src/icons/TokenShowIcon.tsx
similarity index 94%
rename from src/icons/TokenShowIcon.js
rename to src/icons/TokenShowIcon.tsx
index b6c6792..1bf0e7d 100644
--- a/src/icons/TokenShowIcon.js
+++ b/src/icons/TokenShowIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function TokenShowIcon() {
   return (
     <svg
diff --git a/src/icons/TokenUnlockIcon.js b/src/icons/TokenUnlockIcon.tsx
similarity index 95%
rename from src/icons/TokenUnlockIcon.js
rename to src/icons/TokenUnlockIcon.tsx
index 23133e6..eb3ae1a 100644
--- a/src/icons/TokenUnlockIcon.js
+++ b/src/icons/TokenUnlockIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function TokenUnlockIcon() {
   return (
     <svg
diff --git a/src/icons/UndoIcon.js b/src/icons/UndoIcon.tsx
similarity index 95%
rename from src/icons/UndoIcon.js
rename to src/icons/UndoIcon.tsx
index da08de0..0624eec 100644
--- a/src/icons/UndoIcon.js
+++ b/src/icons/UndoIcon.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 function UndoIcon() {
   return (
     <svg
diff --git a/src/images/RotateDark.png b/src/images/RotateDark.png
new file mode 100644
index 0000000..d8ec78d
Binary files /dev/null and b/src/images/RotateDark.png differ
diff --git a/src/images/ScaleDark.png b/src/images/ScaleDark.png
new file mode 100644
index 0000000..20af45d
Binary files /dev/null and b/src/images/ScaleDark.png differ
diff --git a/src/index.js b/src/index.tsx
similarity index 99%
rename from src/index.js
rename to src/index.tsx
index 687aa88..b9fe446 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom";
 import * as Sentry from "@sentry/react";
 import { Dedupe } from "@sentry/integrations";
diff --git a/src/maps/index.js b/src/maps/index.ts
similarity index 79%
rename from src/maps/index.js
rename to src/maps/index.ts
index 99c4192..fc75ef2 100644
--- a/src/maps/index.js
+++ b/src/maps/index.ts
@@ -1,5 +1,8 @@
 import Case from "case";
 
+import { DefaultMap } from "../types/Map";
+import { MapState } from "../types/MapState";
+
 import blankImage from "./Blank.jpg";
 import grassImage from "./Grass.jpg";
 import sandImage from "./Sand.jpg";
@@ -18,15 +21,18 @@ export const mapSources = {
   wood: woodImage,
 };
 
-export function getDefaultMaps(userId) {
+export function getDefaultMaps(userId: string): {
+  maps: DefaultMap[];
+  mapStates: MapState[];
+} {
   const mapKeys = Object.keys(mapSources);
-  let maps = [];
-  let mapStates = [];
+  let maps: DefaultMap[] = [];
+  let mapStates: MapState[] = [];
   for (let i = 0; i < mapKeys.length; i++) {
     const key = mapKeys[i];
     const name = Case.capital(key);
     const id = `__default-${name}`;
-    const map = {
+    const map: DefaultMap = {
       id,
       key,
       name,
@@ -44,14 +50,13 @@ export function getDefaultMaps(userId) {
       lastModified: Date.now(),
       showGrid: key !== "stone",
       snapToGrid: true,
-      group: "",
     };
     maps.push(map);
-    const state = {
+    const state: MapState = {
       mapId: id,
       tokens: {},
-      drawShapes: {},
-      fogShapes: {},
+      drawings: {},
+      fogs: {},
       editFlags: ["drawing", "tokens", "notes"],
       notes: {},
     };
diff --git a/src/ml/Model.js b/src/ml/Model.ts
similarity index 70%
rename from src/ml/Model.js
rename to src/ml/Model.ts
index 3809bf4..98fc567 100644
--- a/src/ml/Model.js
+++ b/src/ml/Model.ts
@@ -1,15 +1,21 @@
+import { ModelJSON } from "@tensorflow/tfjs-core/dist/io/types";
 import blobToBuffer from "../helpers/blobToBuffer";
 
 class Model {
-  constructor(config, weightsMapping) {
+  config: ModelJSON;
+  weightsMapping: { [path: string]: string };
+  constructor(config: ModelJSON, weightsMapping: { [path: string]: string }) {
     this.config = config;
     this.weightsMapping = weightsMapping;
   }
 
   async load() {
     // Load weights from the manifest then fetch them into an ArrayBuffer
-    let buffers = [];
-    const manifest = this.config.weightsManifest[0];
+    let buffers: ArrayBuffer[] = [];
+    if (this.config === undefined) {
+      return;
+    }
+    const manifest = this.config?.weightsManifest[0];
     for (let path of manifest.paths) {
       const url = this.weightsMapping[path];
       const response = await fetch(url);
diff --git a/src/ml/gridSize/GridSizeModel.js b/src/ml/gridSize/GridSizeModel.ts
similarity index 76%
rename from src/ml/gridSize/GridSizeModel.js
rename to src/ml/gridSize/GridSizeModel.ts
index 6775f75..6652393 100644
--- a/src/ml/gridSize/GridSizeModel.js
+++ b/src/ml/gridSize/GridSizeModel.ts
@@ -2,17 +2,19 @@ import Model from "../Model";
 
 import config from "./model.json";
 import weights from "./group1-shard1of1.bin";
+import { LayersModel } from "@tensorflow/tfjs";
+import { ModelJSON } from "@tensorflow/tfjs-core/dist/io/types";
 
 class GridSizeModel extends Model {
   // Store model as static to prevent extra network requests
-  static model;
+  static model: LayersModel;
   // Load tensorflow dynamically
-  static tf;
+  static tf: any;
   constructor() {
-    super(config, { "group1-shard1of1.bin": weights });
+    super(config as ModelJSON, { "group1-shard1of1.bin": weights });
   }
 
-  async predict(imageData) {
+  async predict(imageData: ImageData) {
     if (!GridSizeModel.tf) {
       GridSizeModel.tf = await import("@tensorflow/tfjs");
     }
diff --git a/src/modals/AddPartyMemberModal.js b/src/modals/AddPartyMemberModal.tsx
similarity index 72%
rename from src/modals/AddPartyMemberModal.js
rename to src/modals/AddPartyMemberModal.tsx
index 7a29568..5cf613d 100644
--- a/src/modals/AddPartyMemberModal.js
+++ b/src/modals/AddPartyMemberModal.tsx
@@ -1,9 +1,20 @@
-import React from "react";
 import { Box, Label, Text } from "theme-ui";
 
 import Modal from "../components/Modal";
 
-function AddPartyMemberModal({ isOpen, onRequestClose, gameId }) {
+import { RequestCloseEventHandler } from "../types/Events";
+
+type AddPartyMemberModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  gameId: string;
+};
+
+function AddPartyMemberModal({
+  isOpen,
+  onRequestClose,
+  gameId,
+}: AddPartyMemberModalProps) {
   return (
     <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
       <Box>
diff --git a/src/modals/AuthModal.js b/src/modals/AuthModal.tsx
similarity index 58%
rename from src/modals/AuthModal.js
rename to src/modals/AuthModal.tsx
index 0c19e13..ae32f5a 100644
--- a/src/modals/AuthModal.js
+++ b/src/modals/AuthModal.tsx
@@ -1,27 +1,32 @@
-import React, { useState, useRef } from "react";
+import { useState, useRef, ChangeEvent, FormEvent } from "react";
 import { Box, Input, Button, Label, Flex } from "theme-ui";
 
 import { useAuth } from "../contexts/AuthContext";
 
 import Modal from "../components/Modal";
 
-function AuthModal({ isOpen, onSubmit }) {
-  const { password, setPassword } = useAuth();
-  const [tmpPassword, setTempPassword] = useState(password);
+type AuthModalProps = {
+  isOpen: boolean;
+  onSubmit: (newPassword: string) => void;
+};
 
-  function handleChange(event) {
-    setTempPassword(event.target.value);
+function AuthModal({ isOpen, onSubmit }: AuthModalProps) {
+  const { password, setPassword } = useAuth();
+  const [tmpPassword, setTempPassword] = useState<string>(password);
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>): void {
+    setTempPassword(event.target?.value);
   }
 
-  function handleSubmit(event) {
+  function handleSubmit(event: FormEvent<HTMLElement>): void {
     event.preventDefault();
     setPassword(tmpPassword);
     onSubmit(tmpPassword);
   }
 
-  const inputRef = useRef();
-  function focusInput() {
-    inputRef.current && inputRef.current.focus();
+  const inputRef = useRef<HTMLInputElement>(null);
+  function focusInput(): void {
+    inputRef.current && inputRef.current?.focus();
   }
 
   return (
diff --git a/src/modals/ChangeNicknameModal.js b/src/modals/ChangeNicknameModal.tsx
similarity index 65%
rename from src/modals/ChangeNicknameModal.js
rename to src/modals/ChangeNicknameModal.tsx
index 8c6916c..1fe7b02 100644
--- a/src/modals/ChangeNicknameModal.js
+++ b/src/modals/ChangeNicknameModal.tsx
@@ -1,18 +1,28 @@
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { Box, Input, Button, Label, Flex } from "theme-ui";
 
 import Modal from "../components/Modal";
 
+import { RequestCloseEventHandler } from "../types/Events";
+
+type ChangeNicknameModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  onChangeSubmit: React.FormEventHandler<HTMLDivElement>;
+  nickname: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+};
+
 function ChangeNicknameModal({
   isOpen,
   onRequestClose,
   onChangeSubmit,
   nickname,
   onChange,
-}) {
-  const inputRef = useRef();
+}: ChangeNicknameModalProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
   function focusInput() {
-    inputRef.current && inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   return (
diff --git a/src/modals/ConfirmModal.js b/src/modals/ConfirmModal.tsx
similarity index 79%
rename from src/modals/ConfirmModal.js
rename to src/modals/ConfirmModal.tsx
index 70c1402..acb6d7f 100644
--- a/src/modals/ConfirmModal.js
+++ b/src/modals/ConfirmModal.tsx
@@ -1,8 +1,16 @@
-import React from "react";
 import { Box, Label, Flex, Button, Text } from "theme-ui";
 
 import Modal from "../components/Modal";
 
+type ConfirmModalProps = {
+  isOpen: boolean;
+  onRequestClose: () => void;
+  onConfirm: () => void;
+  confirmText: string;
+  label: string;
+  description: string;
+};
+
 function ConfirmModal({
   isOpen,
   onRequestClose,
@@ -10,12 +18,12 @@ function ConfirmModal({
   confirmText,
   label,
   description,
-}) {
+}: ConfirmModalProps) {
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
-      style={{ maxWidth: "300px" }}
+      style={{ content: { maxWidth: "300px" } }}
     >
       <Box>
         <Label py={2}>{label}</Label>
diff --git a/src/modals/EditMapModal.js b/src/modals/EditMapModal.tsx
similarity index 67%
rename from src/modals/EditMapModal.js
rename to src/modals/EditMapModal.tsx
index 4582b05..e4a08ce 100644
--- a/src/modals/EditMapModal.js
+++ b/src/modals/EditMapModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Button, Flex, Label, useThemeUI } from "theme-ui";
 import SimpleBar from "simplebar-react";
 
@@ -10,6 +10,21 @@ import { isEmpty } from "../helpers/shared";
 import { getGridDefaultInset } from "../helpers/grid";
 
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
+import { Map } from "../types/Map";
+import { MapState } from "../types/MapState";
+import {
+  UpdateMapEventHanlder,
+  UpdateMapStateEventHandler,
+} from "../contexts/MapDataContext";
+
+type EditMapProps = {
+  isOpen: boolean;
+  onDone: () => void;
+  map: Map;
+  mapState: MapState;
+  onUpdateMap: UpdateMapEventHanlder;
+  onUpdateMapState: UpdateMapStateEventHandler;
+};
 
 function EditMapModal({
   isOpen,
@@ -18,7 +33,7 @@ function EditMapModal({
   mapState,
   onUpdateMap,
   onUpdateMapState,
-}) {
+}: EditMapProps) {
   const { theme } = useThemeUI();
 
   function handleClose() {
@@ -37,52 +52,45 @@ function EditMapModal({
    */
   // Local cache of map setting changes
   // Applied when done is clicked or map selection is changed
-  const [mapSettingChanges, setMapSettingChanges] = useState({});
-  const [mapStateSettingChanges, setMapStateSettingChanges] = useState({});
+  const [mapSettingChanges, setMapSettingChanges] = useState<Partial<Map>>({});
+  const [mapStateSettingChanges, setMapStateSettingChanges] = useState<
+    Partial<MapState>
+  >({});
 
-  function handleMapSettingsChange(key, value) {
+  function handleMapSettingsChange(change: Partial<Map>) {
     setMapSettingChanges((prevChanges) => ({
       ...prevChanges,
-      [key]: value,
-      lastModified: Date.now(),
+      ...change,
     }));
   }
 
-  function handleMapStateSettingsChange(key, value) {
+  function handleMapStateSettingsChange(change: Partial<MapState>) {
     setMapStateSettingChanges((prevChanges) => ({
       ...prevChanges,
-      [key]: value,
+      ...change,
     }));
   }
 
   async function applyMapChanges() {
     if (!isEmpty(mapSettingChanges) || !isEmpty(mapStateSettingChanges)) {
       // Ensure grid values are positive
-      let verifiedChanges = { ...mapSettingChanges };
-      if ("grid" in verifiedChanges && "size" in verifiedChanges.grid) {
+      let verifiedChanges: Partial<Map> = { ...mapSettingChanges };
+      if (verifiedChanges.grid) {
         verifiedChanges.grid.size.x = verifiedChanges.grid.size.x || 1;
         verifiedChanges.grid.size.y = verifiedChanges.grid.size.y || 1;
       }
       // Ensure inset isn't flipped
-      if ("grid" in verifiedChanges && "inset" in verifiedChanges.grid) {
+      if (verifiedChanges.grid) {
         const inset = verifiedChanges.grid.inset;
         if (
           inset.topLeft.x > inset.bottomRight.x ||
           inset.topLeft.y > inset.bottomRight.y
         ) {
-          if ("size" in verifiedChanges.grid) {
-            verifiedChanges.grid.inset = getGridDefaultInset(
-              { size: verifiedChanges.grid.size, type: map.grid.type },
-              map.width,
-              map.height
-            );
-          } else {
-            verifiedChanges.grid.inset = getGridDefaultInset(
-              map.grid,
-              map.width,
-              map.height
-            );
-          }
+          verifiedChanges.grid.inset = getGridDefaultInset(
+            { size: verifiedChanges.grid.size, type: map.grid.type },
+            map.width,
+            map.height
+          );
         }
       }
       await onUpdateMap(map.id, mapSettingChanges);
@@ -93,11 +101,13 @@ function EditMapModal({
     }
   }
 
-  const selectedMapWithChanges = map && {
-    ...map,
-    ...mapSettingChanges,
-  };
-  const selectedMapStateWithChanges = mapState && {
+  const selectedMapWithChanges =
+    map &&
+    ({
+      ...map,
+      ...mapSettingChanges,
+    } as Map);
+  const selectedMapStateWithChanges: MapState = mapState && {
     ...mapState,
     ...mapStateSettingChanges,
   };
@@ -113,11 +123,13 @@ function EditMapModal({
       isOpen={isOpen}
       onRequestClose={handleClose}
       style={{
-        maxWidth: layout.modalSize,
-        width: "calc(100% - 16px)",
-        padding: 0,
-        display: "flex",
-        overflow: "hidden",
+        content: {
+          maxWidth: layout.modalSize,
+          width: "calc(100% - 16px)",
+          padding: 0,
+          display: "flex",
+          overflow: "hidden",
+        },
       }}
     >
       <Flex
@@ -133,7 +145,7 @@ function EditMapModal({
           style={{
             minHeight: 0,
             padding: "16px",
-            backgroundColor: theme.colors.muted,
+            backgroundColor: theme.colors?.muted as string,
             margin: "0 8px",
             height: "100%",
           }}
diff --git a/src/modals/EditTokenModal.js b/src/modals/EditTokenModal.tsx
similarity index 70%
rename from src/modals/EditTokenModal.js
rename to src/modals/EditTokenModal.tsx
index 322f075..0aeb921 100644
--- a/src/modals/EditTokenModal.js
+++ b/src/modals/EditTokenModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Button, Flex, Label, useThemeUI } from "theme-ui";
 import SimpleBar from "simplebar-react";
 
@@ -10,7 +10,23 @@ import { isEmpty } from "../helpers/shared";
 
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
 
-function EditTokenModal({ isOpen, onDone, token, onUpdateToken }) {
+import { Token } from "../types/Token";
+
+import { UpdateTokenEventHandler } from "../contexts/TokenDataContext";
+
+type EditModalProps = {
+  isOpen: boolean;
+  onDone: () => void;
+  token: Token;
+  onUpdateToken: UpdateTokenEventHandler;
+};
+
+function EditTokenModal({
+  isOpen,
+  onDone,
+  token,
+  onUpdateToken,
+}: EditModalProps) {
   const { theme } = useThemeUI();
 
   function handleClose() {
@@ -23,10 +39,16 @@ function EditTokenModal({ isOpen, onDone, token, onUpdateToken }) {
     onDone();
   }
 
-  const [tokenSettingChanges, setTokenSettingChanges] = useState({});
+  const [tokenSettingChanges, setTokenSettingChanges] = useState<
+    Partial<Token>
+  >({});
 
-  function handleTokenSettingsChange(key, value) {
-    setTokenSettingChanges((prevChanges) => ({ ...prevChanges, [key]: value }));
+  // TODO: CHANGE MAP BACK? OR CHANGE THIS TO PARTIAL
+  function handleTokenSettingsChange(change: Partial<Token>) {
+    setTokenSettingChanges((prevChanges) => ({
+      ...prevChanges,
+      ...change,
+    }));
   }
 
   async function applyTokenChanges() {
@@ -45,7 +67,7 @@ function EditTokenModal({ isOpen, onDone, token, onUpdateToken }) {
   const selectedTokenWithChanges = {
     ...token,
     ...tokenSettingChanges,
-  };
+  } as Token;
 
   const layout = useResponsiveLayout();
 
@@ -58,11 +80,13 @@ function EditTokenModal({ isOpen, onDone, token, onUpdateToken }) {
       isOpen={isOpen}
       onRequestClose={handleClose}
       style={{
-        maxWidth: layout.modalSize,
-        width: "calc(100% - 16px)",
-        padding: 0,
-        display: "flex",
-        overflow: "hidden",
+        content: {
+          maxWidth: layout.modalSize,
+          width: "calc(100% - 16px)",
+          padding: 0,
+          display: "flex",
+          overflow: "hidden",
+        },
       }}
     >
       <Flex
@@ -78,7 +102,7 @@ function EditTokenModal({ isOpen, onDone, token, onUpdateToken }) {
           style={{
             minHeight: 0,
             padding: "16px",
-            backgroundColor: theme.colors.muted,
+            backgroundColor: theme.colors?.muted as string,
             margin: "0 8px",
             height: "100%",
           }}
diff --git a/src/modals/ForceUpdateModal.js b/src/modals/ForceUpdateModal.tsx
similarity index 79%
rename from src/modals/ForceUpdateModal.js
rename to src/modals/ForceUpdateModal.tsx
index 7edf7bc..6bd7223 100644
--- a/src/modals/ForceUpdateModal.js
+++ b/src/modals/ForceUpdateModal.tsx
@@ -1,14 +1,13 @@
-import React from "react";
 import { Box, Label, Text } from "theme-ui";
 
 import Modal from "../components/Modal";
 
-function ForceUpdateModal({ isOpen }) {
+function ForceUpdateModal({ isOpen }: { isOpen: boolean }) {
   return (
     <Modal
       isOpen={isOpen}
       allowClose={false}
-      style={{ maxWidth: "450px" }}
+      style={{ content: { maxWidth: "450px" } }}
     >
       <Box>
         <Label py={2}>New Update Available</Label>
diff --git a/src/modals/GameExpiredModal.js b/src/modals/GameExpiredModal.tsx
similarity index 67%
rename from src/modals/GameExpiredModal.js
rename to src/modals/GameExpiredModal.tsx
index 981a2b7..11d8228 100644
--- a/src/modals/GameExpiredModal.js
+++ b/src/modals/GameExpiredModal.tsx
@@ -1,14 +1,20 @@
-import React from "react";
 import { Box, Label, Flex, Button, Text } from "theme-ui";
 
 import Modal from "../components/Modal";
 
-function GameExpiredModal({ isOpen, onRequestClose }) {
+import { RequestCloseEventHandler } from "../types/Events";
+
+type GameExpiredModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+};
+
+function GameExpiredModal({ isOpen, onRequestClose }: GameExpiredModalProps) {
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
-      style={{ maxWidth: "450px" }}
+      style={{ content: { maxWidth: "450px" } }}
     >
       <Box>
         <Label py={2}>Game Timed Out</Label>
diff --git a/src/modals/GettingStartedModal.js b/src/modals/GettingStartedModal.tsx
similarity index 68%
rename from src/modals/GettingStartedModal.js
rename to src/modals/GettingStartedModal.tsx
index 9a8e157..019195e 100644
--- a/src/modals/GettingStartedModal.js
+++ b/src/modals/GettingStartedModal.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Box, Label, Text } from "theme-ui";
 import raw from "raw.macro";
 
@@ -6,14 +5,24 @@ import Modal from "../components/Modal";
 import Markdown from "../components/Markdown";
 import Link from "../components/Link";
 
+import { RequestCloseEventHandler } from "../types/Events";
+
 const gettingStarted = raw("../docs/howTo/gettingStarted.md");
 
-function GettingStartedModal({ isOpen, onRequestClose }) {
+type GettingStartedModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+};
+
+function GettingStartedModal({
+  isOpen,
+  onRequestClose,
+}: GettingStartedModalProps) {
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
-      style={{ maxWidth: "450px" }}
+      style={{ content: { maxWidth: "450px" } }}
     >
       <Box>
         <Label py={2}>Getting Started</Label>
diff --git a/src/modals/GroupNameModal.js b/src/modals/GroupNameModal.tsx
similarity index 61%
rename from src/modals/GroupNameModal.js
rename to src/modals/GroupNameModal.tsx
index f410256..556325d 100644
--- a/src/modals/GroupNameModal.js
+++ b/src/modals/GroupNameModal.tsx
@@ -3,25 +3,41 @@ import { Box, Input, Button, Label, Flex } from "theme-ui";
 
 import Modal from "../components/Modal";
 
-function GroupNameModal({ isOpen, name, onSubmit, onRequestClose }) {
+import { RequestCloseEventHandler } from "../types/Events";
+
+export type GroupNameEventHandler = (name: string) => void;
+
+type GroupNameModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  name: string;
+  onSubmit: GroupNameEventHandler;
+};
+
+function GroupNameModal({
+  isOpen,
+  name,
+  onSubmit,
+  onRequestClose,
+}: GroupNameModalProps) {
   const [tmpName, setTempName] = useState(name);
 
   useEffect(() => {
     setTempName(name);
   }, [name]);
 
-  function handleChange(event) {
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     setTempName(event.target.value);
   }
 
-  function handleSubmit(event) {
+  function handleSubmit(event: React.FormEvent<HTMLDivElement>) {
     event.preventDefault();
     onSubmit(tmpName);
   }
 
-  const inputRef = useRef();
+  const inputRef = useRef<HTMLInputElement>(null);
   function focusInput() {
-    inputRef.current && inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   return (
diff --git a/src/modals/ImportExportModal.js b/src/modals/ImportExportModal.tsx
similarity index 84%
rename from src/modals/ImportExportModal.js
rename to src/modals/ImportExportModal.tsx
index f8eeb5a..8a53a38 100644
--- a/src/modals/ImportExportModal.js
+++ b/src/modals/ImportExportModal.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect } from "react";
 import { Box, Label, Text, Button, Flex } from "theme-ui";
 import { saveAs } from "file-saver";
 import * as Comlink from "comlink";
@@ -14,34 +14,50 @@ import ErrorBanner from "../components/banner/ErrorBanner";
 import { useUserId } from "../contexts/UserIdContext";
 import { useDatabase } from "../contexts/DatabaseContext";
 
-import SelectDataModal from "./SelectDataModal";
+import SelectDataModal, { SelectData } from "./SelectDataModal";
 
 import { getDatabase } from "../database";
+import { Map } from "../types/Map";
+import { MapState } from "../types/MapState";
+import { Token } from "../types/Token";
+import { Group } from "../types/Group";
+import { RequestCloseEventHandler } from "../types/Events";
+import { Asset } from "../types/Asset";
 
 const importDBName = "OwlbearRodeoImportDB";
 
 class MissingAssetError extends Error {
-  constructor(message) {
+  constructor(message: string) {
     super(message);
     this.name = "MissingAssetError";
   }
 }
 
-function ImportExportModal({ isOpen, onRequestClose }) {
+function ImportExportModal({
+  isOpen,
+  onRequestClose,
+}: {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+}) {
   const { worker } = useDatabase();
   const userId = useUserId();
 
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState();
+  const [error, setError] = useState<Error>();
 
   const backgroundTaskRunningRef = useRef(false);
-  const fileInputRef = useRef();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const [showImportSelector, setShowImportSelector] = useState(false);
   const [showExportSelector, setShowExportSelector] = useState(false);
 
   const { addToast } = useToasts();
-  function addSuccessToast(message, maps, tokens) {
+  function addSuccessToast(
+    message: string,
+    maps: SelectData[],
+    tokens: SelectData[]
+  ) {
     const mapText = `${maps.length} map${maps.length > 1 ? "s" : ""}`;
     const tokenText = `${tokens.length} token${tokens.length > 1 ? "s" : ""}`;
     if (maps.length > 0 && tokens.length > 0) {
@@ -61,18 +77,24 @@ function ImportExportModal({ isOpen, onRequestClose }) {
 
   const loadingProgressRef = useRef(0);
 
-  function handleDBProgress({ completedRows, totalRows }) {
+  function handleDBProgress({
+    completedRows,
+    totalRows,
+  }: {
+    completedRows: number;
+    totalRows: number;
+  }) {
     loadingProgressRef.current = completedRows / totalRows;
   }
 
-  async function handleImportDatabase(file) {
+  async function handleImportDatabase(file: File) {
     setIsLoading(true);
     backgroundTaskRunningRef.current = true;
     try {
       await worker.importData(
         file,
         importDBName,
-        Comlink.proxy(handleDBProgress)
+        Comlink.proxy(handleDBProgress) as any
       );
 
       setIsLoading(false);
@@ -94,7 +116,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
     }
     // Set file input to null to allow adding the same data 2 times in a row
     if (fileInputRef.current) {
-      fileInputRef.current.value = null;
+      fileInputRef.current.value = "";
     }
   }
 
@@ -103,7 +125,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
   }
 
   useEffect(() => {
-    function handleBeforeUnload(event) {
+    function handleBeforeUnload(event: BeforeUnloadEvent) {
       if (backgroundTaskRunningRef.current) {
         event.returnValue =
           "Database is still processing, are you sure you want to leave?";
@@ -131,10 +153,10 @@ function ImportExportModal({ isOpen, onRequestClose }) {
   }
 
   async function handleImportSelectorConfirm(
-    checkedMaps,
-    checkedTokens,
-    checkedMapGroups,
-    checkedTokenGroups
+    checkedMaps: SelectData[],
+    checkedTokens: SelectData[],
+    checkedMapGroups: Group[],
+    checkedTokenGroups: Group[]
   ) {
     setIsLoading(true);
     backgroundTaskRunningRef.current = true;
@@ -145,13 +167,13 @@ function ImportExportModal({ isOpen, onRequestClose }) {
     const db = getDatabase({});
     try {
       // Keep track of a mapping of old token ids to new ones to apply them to the map states
-      let newTokenIds = {};
+      let newTokenIds: Record<string, string> = {};
       // Mapping of old asset ids to new asset ids
-      let newAssetIds = {};
+      let newAssetIds: Record<string, string> = {};
       // Mapping of old maps ids to new map ids
-      let newMapIds = {};
+      let newMapIds: Record<string, string> = {};
 
-      let newTokens = [];
+      let newTokens: Token[] = [];
       if (checkedTokens.length > 0) {
         const tokenIds = checkedTokens.map((token) => token.id);
         const tokensToAdd = await importDB.table("tokens").bulkGet(tokenIds);
@@ -180,26 +202,25 @@ function ImportExportModal({ isOpen, onRequestClose }) {
         }
       }
 
-      let newMaps = [];
-      let newStates = [];
+      let newMaps: Map[] = [];
+      let newStates: MapState[] = [];
       if (checkedMaps.length > 0) {
         const mapIds = checkedMaps.map((map) => map.id);
         const mapsToAdd = await importDB.table("maps").bulkGet(mapIds);
         for (let map of mapsToAdd) {
-          let state = await importDB.table("states").get(map.id);
+          let state: MapState = await importDB.table("states").get(map.id);
           // Apply new token ids to imported state
           for (let tokenState of Object.values(state.tokens)) {
             if (tokenState.tokenId in newTokenIds) {
-              state.tokens[tokenState.id].tokenId =
-                newTokenIds[tokenState.tokenId];
+              tokenState.tokenId = newTokenIds[tokenState.tokenId];
             }
             // Change token state file asset id
             if (tokenState.type === "file" && tokenState.file in newAssetIds) {
-              state.tokens[tokenState.id].file = newAssetIds[tokenState.file];
+              tokenState.file = newAssetIds[tokenState.file];
             }
             // Change token state owner if owned by the user of the map
-            if (tokenState.owner === map.owner) {
-              state.tokens[tokenState.id].owner = userId;
+            if (tokenState.owner === map.owner && userId) {
+              tokenState.owner = userId;
             }
           }
           // Generate new ids
@@ -213,7 +234,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
             const newThumbnailId = uuid();
             newAssetIds[map.file] = newFileId;
             newAssetIds[map.thumbnail] = newThumbnailId;
-            const newResolutionIds = {};
+            const newResolutionIds: Record<string, string> = {};
             for (let res of Object.keys(map.resolutions)) {
               newResolutionIds[res] = uuid();
               newAssetIds[map.resolutions[res]] = newResolutionIds[res];
@@ -237,7 +258,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
       const assetsToAdd = await importDB
         .table("assets")
         .bulkGet(Object.keys(newAssetIds));
-      let newAssets = [];
+      let newAssets: Asset[] = [];
       for (let asset of assetsToAdd) {
         if (asset) {
           newAssets.push({
@@ -251,7 +272,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
       }
 
       // Add map groups with new ids
-      let newMapGroups = [];
+      let newMapGroups: Group[] = [];
       if (checkedMapGroups.length > 0) {
         for (let group of checkedMapGroups) {
           if (group.type === "item") {
@@ -270,7 +291,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
       }
 
       // Add token groups with new ids
-      let newTokenGroups = [];
+      let newTokenGroups: Group[] = [];
       if (checkedTokenGroups.length > 0) {
         for (let group of checkedTokenGroups) {
           if (group.type === "item") {
@@ -340,7 +361,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
     backgroundTaskRunningRef.current = false;
   }
 
-  function exportSelectorFilter(table) {
+  function exportSelectorFilter(table: string) {
     return (
       table === "maps" ||
       table === "tokens" ||
@@ -353,7 +374,10 @@ function ImportExportModal({ isOpen, onRequestClose }) {
     setShowExportSelector(false);
   }
 
-  async function handleExportSelectorConfirm(checkedMaps, checkedTokens) {
+  async function handleExportSelectorConfirm(
+    checkedMaps: SelectData[],
+    checkedTokens: SelectData[]
+  ) {
     setShowExportSelector(false);
     setIsLoading(true);
     backgroundTaskRunningRef.current = true;
@@ -363,7 +387,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
 
     try {
       const buffer = await worker.exportData(
-        Comlink.proxy(handleDBProgress),
+        Comlink.proxy(handleDBProgress) as any,
         mapIds,
         tokenIds
       );
@@ -395,7 +419,9 @@ function ImportExportModal({ isOpen, onRequestClose }) {
             Select import or export then select the data you wish to use
           </Text>
           <input
-            onChange={(event) => handleImportDatabase(event.target.files[0])}
+            onChange={(event) =>
+              event.target.files && handleImportDatabase(event.target.files[0])
+            }
             type="file"
             accept=".owlbear"
             style={{ display: "none" }}
@@ -429,7 +455,7 @@ function ImportExportModal({ isOpen, onRequestClose }) {
             </Box>
           </Box>
         )}
-        <ErrorBanner error={error} onRequestClose={() => setError()} />
+        <ErrorBanner error={error} onRequestClose={() => setError(undefined)} />
         <SelectDataModal
           isOpen={showImportSelector}
           onRequestClose={handleImportSelectorClose}
diff --git a/src/modals/JoinModal.js b/src/modals/JoinModal.tsx
similarity index 68%
rename from src/modals/JoinModal.js
rename to src/modals/JoinModal.tsx
index 7eff3c6..7ec0118 100644
--- a/src/modals/JoinModal.js
+++ b/src/modals/JoinModal.tsx
@@ -1,25 +1,32 @@
-import React, { useState, useRef } from "react";
+import { useState, useRef, FormEvent, ChangeEvent } from "react";
 import { Box, Label, Input, Button, Flex } from "theme-ui";
 import { useHistory } from "react-router-dom";
 
 import Modal from "../components/Modal";
 
-function JoinModal({ isOpen, onRequestClose }) {
+import { RequestCloseEventHandler } from "../types/Events";
+
+type JoinModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+};
+
+function JoinModal({ isOpen, onRequestClose }: JoinModalProps) {
   let history = useHistory();
   const [gameId, setGameId] = useState("");
 
-  function handleChange(event) {
-    setGameId(event.target.value);
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    setGameId(event.target?.value);
   }
 
-  function handleSubmit(event) {
+  function handleSubmit(event: FormEvent<HTMLDivElement>) {
     event.preventDefault();
     history.push(`/game/${gameId}`);
   }
 
-  const inputRef = useRef();
+  const inputRef = useRef<HTMLInputElement>(null);
   function focusInput() {
-    inputRef.current && inputRef.current.focus();
+    inputRef.current?.focus();
   }
 
   return (
diff --git a/src/modals/SelectDataModal.js b/src/modals/SelectDataModal.tsx
similarity index 77%
rename from src/modals/SelectDataModal.js
rename to src/modals/SelectDataModal.tsx
index bfe6d46..ce3306f 100644
--- a/src/modals/SelectDataModal.js
+++ b/src/modals/SelectDataModal.tsx
@@ -8,6 +8,38 @@ import Divider from "../components/Divider";
 
 import { getDatabase } from "../database";
 
+import { Map } from "../types/Map";
+import { Group, GroupContainer } from "../types/Group";
+import { MapState } from "../types/MapState";
+import { Token } from "../types/Token";
+import { RequestCloseEventHandler } from "../types/Events";
+
+export type SelectData = {
+  name: string;
+  id: string;
+  type: "default" | "file";
+  checked: boolean;
+};
+
+export type ConfirmDataEventHandler = (
+  checkedMaps: SelectData[],
+  checkedTokens: SelectData[],
+  checkedMapGroups: Group[],
+  checkedTokenGroups: Group[]
+) => void;
+
+type SelectDataProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  onConfirm: ConfirmDataEventHandler;
+  confirmText: string;
+  label: string;
+  databaseName: string;
+  filter: (table: string, data: Map | MapState | Token, id: string) => boolean;
+};
+
+type DataRecord = Record<string, SelectData>;
+
 function SelectDataModal({
   isOpen,
   onRequestClose,
@@ -16,12 +48,14 @@ function SelectDataModal({
   label,
   databaseName,
   filter,
-}) {
-  const [maps, setMaps] = useState({});
-  const [mapGroups, setMapGroups] = useState([]);
-  const [tokensByMap, setTokensByMap] = useState({});
-  const [tokens, setTokens] = useState({});
-  const [tokenGroups, setTokenGroups] = useState([]);
+}: SelectDataProps) {
+  const [maps, setMaps] = useState<DataRecord>({});
+  const [mapGroups, setMapGroups] = useState<Group[]>([]);
+  const [tokensByMap, setTokensByMap] = useState<Record<string, Set<string>>>(
+    {}
+  );
+  const [tokens, setTokens] = useState<DataRecord>({});
+  const [tokenGroups, setTokenGroups] = useState<Group[]>([]);
 
   const [isLoading, setIsLoading] = useState(false);
   const hasMaps = Object.values(maps).length > 0;
@@ -32,13 +66,13 @@ function SelectDataModal({
       if (isOpen && databaseName) {
         setIsLoading(true);
         const db = getDatabase({ addons: [] }, databaseName);
-        let loadedMaps = {};
-        let loadedTokensByMap = {};
-        let loadedTokens = {};
+        let loadedMaps: DataRecord = {};
+        let loadedTokensByMap: Record<string, Set<string>> = {};
+        let loadedTokens: DataRecord = {};
         await db
           .table("maps")
-          .filter((map) => filter("maps", map, map.id))
-          .each((map) => {
+          .filter((map: Map) => filter("maps", map, map.id))
+          .each((map: Map) => {
             loadedMaps[map.id] = {
               name: map.name,
               id: map.id,
@@ -48,8 +82,8 @@ function SelectDataModal({
           });
         await db
           .table("states")
-          .filter((state) => filter("states", state, state.mapId))
-          .each((state) => {
+          .filter((state: MapState) => filter("states", state, state.mapId))
+          .each((state: MapState) => {
             loadedTokensByMap[state.mapId] = new Set(
               Object.values(state.tokens).map(
                 (tokenState) => tokenState.tokenId
@@ -59,8 +93,8 @@ function SelectDataModal({
 
         await db
           .table("tokens")
-          .filter((token) => filter("tokens", token, token.id))
-          .each((token) => {
+          .filter((token: Token) => filter("tokens", token, token.id))
+          .each((token: Token) => {
             loadedTokens[token.id] = {
               name: token.name,
               id: token.id,
@@ -91,9 +125,11 @@ function SelectDataModal({
   }, [isOpen, databaseName, filter]);
 
   // An object mapping a tokenId to how many checked maps it is currently used in
-  const [tokenUsedCount, setTokenUsedCount] = useState({});
+  const [tokenUsedCount, setTokenUsedCount] = useState<Record<string, number>>(
+    {}
+  );
   useEffect(() => {
-    let tokensUsed = {};
+    let tokensUsed: Record<string, number> = {};
     for (let mapId in maps) {
       if (maps[mapId].checked && mapId in tokensByMap) {
         for (let tokenId of tokensByMap[mapId]) {
@@ -118,7 +154,7 @@ function SelectDataModal({
     });
   }, [maps, tokensByMap]);
 
-  function getCheckedGroups(groups, data) {
+  function getCheckedGroups(groups: Group[], data: DataRecord) {
     let checkedGroups = [];
     for (let group of groups) {
       if (group.type === "item") {
@@ -149,7 +185,10 @@ function SelectDataModal({
     onConfirm(checkedMaps, checkedTokens, checkedMapGroups, checkedTokenGroups);
   }
 
-  function handleMapsChanged(event, maps) {
+  function handleMapsChanged(
+    event: React.ChangeEvent<HTMLInputElement>,
+    maps: SelectData[]
+  ) {
     setMaps((prevMaps) => {
       let newMaps = { ...prevMaps };
       for (let map of maps) {
@@ -179,7 +218,10 @@ function SelectDataModal({
     }
   }
 
-  function handleTokensChanged(event, tokens) {
+  function handleTokensChanged(
+    event: React.ChangeEvent<HTMLInputElement>,
+    tokens: SelectData[]
+  ) {
     setTokens((prevTokens) => {
       let newTokens = { ...prevTokens };
       for (let token of tokens) {
@@ -197,7 +239,15 @@ function SelectDataModal({
       (token) => !(token.id in tokenUsedCount) && token.checked
     ) || Object.values(tokens).every((token) => token.id in tokenUsedCount);
 
-  function renderGroupContainer(group, checked, renderItem, onGroupChange) {
+  function renderGroupContainer(
+    group: GroupContainer,
+    checked: boolean,
+    renderItem: (group: Group) => React.ReactNode,
+    onGroupChange: (
+      event: React.ChangeEvent<HTMLInputElement>,
+      group: GroupContainer
+    ) => void
+  ) {
     return (
       <Flex
         ml={4}
@@ -212,7 +262,9 @@ function SelectDataModal({
         <Label my={1} sx={{ fontFamily: "body2" }}>
           <Checkbox
             checked={checked}
-            onChange={(e) => onGroupChange(e, group)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              onGroupChange(e, group)
+            }
           />
           {group.name}
         </Label>
@@ -234,7 +286,7 @@ function SelectDataModal({
     );
   }
 
-  function renderMapGroup(group) {
+  function renderMapGroup(group: Group) {
     if (group.type === "item") {
       const map = maps[group.id];
       if (map) {
@@ -242,7 +294,9 @@ function SelectDataModal({
           <Label key={map.id} my={1} pl={4} sx={{ fontFamily: "body2" }}>
             <Checkbox
               checked={map.checked}
-              onChange={(e) => handleMapsChanged(e, [map])}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleMapsChanged(e, [map])
+              }
             />
             {map.name}
           </Label>
@@ -266,7 +320,7 @@ function SelectDataModal({
     }
   }
 
-  function renderTokenGroup(group) {
+  function renderTokenGroup(group: Group) {
     if (group.type === "item") {
       const token = tokens[group.id];
       if (token) {
@@ -275,7 +329,9 @@ function SelectDataModal({
             <Label sx={{ fontFamily: "body2" }}>
               <Checkbox
                 checked={token.checked}
-                onChange={(e) => handleTokensChanged(e, [token])}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  handleTokensChanged(e, [token])
+                }
                 disabled={
                   token.type !== "default" && token.id in tokenUsedCount
                 }
@@ -317,7 +373,7 @@ function SelectDataModal({
     <Modal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
-      style={{ maxWidth: "450px", width: "100%" }}
+      style={{ content: { maxWidth: "450px", width: "100%" } }}
     >
       <Box
         sx={{
@@ -349,7 +405,7 @@ function SelectDataModal({
                   <Label>
                     <Checkbox
                       checked={Object.values(maps).some((map) => map.checked)}
-                      onChange={(e) =>
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                         handleMapsChanged(e, Object.values(maps))
                       }
                     />
@@ -365,7 +421,7 @@ function SelectDataModal({
                 <Label>
                   <Checkbox
                     checked={tokensSelectChecked}
-                    onChange={(e) =>
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                       handleTokensChanged(e, Object.values(tokens))
                     }
                   />
diff --git a/src/modals/SelectDiceModal.js b/src/modals/SelectDiceModal.tsx
similarity index 63%
rename from src/modals/SelectDiceModal.js
rename to src/modals/SelectDiceModal.tsx
index 693331e..ce11c86 100644
--- a/src/modals/SelectDiceModal.js
+++ b/src/modals/SelectDiceModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Flex, Label, Button } from "theme-ui";
 
 import Modal from "../components/Modal";
@@ -8,7 +8,25 @@ import { dice } from "../dice";
 
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
 
-function SelectDiceModal({ isOpen, onRequestClose, onDone, defaultDice }) {
+import {
+  DiceSelectEventHandler,
+  RequestCloseEventHandler,
+} from "../types/Events";
+import { DefaultDice } from "../types/Dice";
+
+type SelectDiceProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  onDone: DiceSelectEventHandler;
+  defaultDice: DefaultDice;
+};
+
+function SelectDiceModal({
+  isOpen,
+  onRequestClose,
+  onDone,
+  defaultDice,
+}: SelectDiceProps) {
   const [selectedDice, setSelectedDice] = useState(defaultDice);
   const layout = useResponsiveLayout();
 
@@ -16,7 +34,9 @@ function SelectDiceModal({ isOpen, onRequestClose, onDone, defaultDice }) {
     <Modal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
-      style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
+      style={{
+        content: { maxWidth: layout.modalSize, width: "calc(100% - 16px)" },
+      }}
     >
       <Flex
         sx={{
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.tsx
similarity index 70%
rename from src/modals/SelectMapModal.js
rename to src/modals/SelectMapModal.tsx
index 46a69a1..b46a435 100644
--- a/src/modals/SelectMapModal.js
+++ b/src/modals/SelectMapModal.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect } from "react";
 import { Flex, Label, Box } from "theme-ui";
 import { useToasts } from "react-toast-notifications";
 import ReactResizeDetector from "react-resize-detector";
@@ -8,6 +8,7 @@ import ConfirmModal from "./ConfirmModal";
 
 import Modal from "../components/Modal";
 import LoadingOverlay from "../components/LoadingOverlay";
+import DatabaseDisabledMessage from "../components/DatabaseDisabledMessage";
 
 import ImageDrop from "../components/image/ImageDrop";
 
@@ -29,6 +30,22 @@ import { useUserId } from "../contexts/UserIdContext";
 import { useAssets } from "../contexts/AssetsContext";
 import { GroupProvider } from "../contexts/GroupContext";
 import { TileDragProvider } from "../contexts/TileDragContext";
+import { useDatabase } from "../contexts/DatabaseContext";
+
+import { Map } from "../types/Map";
+import {
+  MapChangeEventHandler,
+  MapResetEventHandler,
+  RequestCloseEventHandler,
+} from "../types/Events";
+
+type SelectMapProps = {
+  isOpen: boolean;
+  onDone: RequestCloseEventHandler;
+  onMapChange: MapChangeEventHandler;
+  onMapReset: MapResetEventHandler;
+  currentMap: Map | null;
+};
 
 function SelectMapModal({
   isOpen,
@@ -37,9 +54,11 @@ function SelectMapModal({
   onMapReset,
   // The map currently being view in the map screen
   currentMap,
-}) {
+}: SelectMapProps) {
   const { addToast } = useToasts();
 
+  const { databaseStatus } = useDatabase();
+
   const userId = useUserId();
   const {
     maps,
@@ -66,15 +85,14 @@ function SelectMapModal({
    * Image Upload
    */
 
-  const fileInputRef = useRef();
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  const [isLargeImageWarningModalOpen, setShowLargeImageWarning] = useState(
-    false
-  );
-  const largeImageWarningFiles = useRef();
+  const [isLargeImageWarningModalOpen, setShowLargeImageWarning] =
+    useState(false);
+  const largeImageWarningFiles = useRef<File[]>();
 
-  async function handleImagesUpload(files) {
+  async function handleImagesUpload(files: File[]) {
     if (navigator.storage) {
       // Attempt to enable persistant storage
       await navigator.storage.persist();
@@ -106,7 +124,7 @@ function SelectMapModal({
   function clearFileInput() {
     // Set file input to null to allow adding the same image 2 times in a row
     if (fileInputRef.current) {
-      fileInputRef.current.value = null;
+      fileInputRef.current.value = "";
     }
   }
 
@@ -125,19 +143,23 @@ function SelectMapModal({
   async function handleLargeImageWarningConfirm() {
     setShowLargeImageWarning(false);
     const files = largeImageWarningFiles.current;
-    for (let file of files) {
-      await handleImageUpload(file);
+    if (files) {
+      for (let file of files) {
+        await handleImageUpload(file);
+      }
     }
     largeImageWarningFiles.current = undefined;
     clearFileInput();
   }
 
-  async function handleImageUpload(file) {
-    setIsLoading(true);
-    const { map, assets } = await createMapFromFile(file, userId);
-    await addMap(map);
-    await addAssets(assets);
-    setIsLoading(false);
+  async function handleImageUpload(file: File) {
+    if (userId) {
+      setIsLoading(true);
+      const { map, assets } = await createMapFromFile(file, userId);
+      await addMap(map);
+      await addAssets(assets);
+      setIsLoading(false);
+    }
   }
 
   /**
@@ -151,14 +173,14 @@ function SelectMapModal({
   /**
    * Map Controls
    */
-  async function handleMapSelect(mapId) {
+  async function handleMapSelect(mapId: string) {
     if (isLoading) {
       return;
     }
     if (mapId) {
       setIsLoading(true);
-      const map = await getMap(mapId);
-      const mapState = await getMapState(mapId);
+      const map = (await getMap(mapId)) || null;
+      const mapState = (await getMapState(mapId)) || null;
       onMapChange(map, mapState);
       setIsLoading(false);
     } else {
@@ -167,22 +189,22 @@ function SelectMapModal({
     onDone();
   }
 
-  const [editingMapId, setEditingMapId] = useState();
+  const [editingMapId, setEditingMapId] = useState<string>();
 
   const [isDraggingMap, setIsDraggingMap] = useState(false);
 
   const [canAddDraggedMap, setCanAddDraggedMap] = useState(false);
-  function handleGroupsSelect(groupIds) {
+  function handleGroupsSelect(groupIds: string[]) {
     if (groupIds.length === 1) {
       // Only allow adding a map from dragging if there is a single group item selected
       const group = findGroup(mapGroups, groupIds[0]);
-      setCanAddDraggedMap(group && group.type === "item");
+      setCanAddDraggedMap(group !== undefined && group.type === "item");
     } else {
       setCanAddDraggedMap(false);
     }
   }
 
-  function handleDragAdd(groupIds) {
+  function handleDragAdd(groupIds: string[]) {
     if (groupIds.length === 1) {
       handleMapSelect(groupIds[0]);
     }
@@ -191,20 +213,35 @@ function SelectMapModal({
   const layout = useResponsiveLayout();
 
   const [modalSize, setModalSize] = useState({ width: 0, height: 0 });
-  function handleModalResize(width, height) {
-    setModalSize({ width, height });
+  function handleModalResize(width?: number, height?: number) {
+    if (width && height) {
+      setModalSize({ width, height });
+    }
   }
 
+  const editingMap =
+    editingMapId && maps.find((map) => map.id === editingMapId);
+  const editingMapState =
+    editingMapId && mapStates.find((state) => state.mapId === editingMapId);
+
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={handleClose}
-      style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
+      style={{
+        content: { maxWidth: layout.modalSize, width: "calc(100% - 16px)" },
+      }}
       shouldCloseOnEsc={!isDraggingMap}
     >
-      <ImageDrop onDrop={handleImagesUpload} dropText="Drop map to import">
+      <ImageDrop
+        onDrop={({ files }) => handleImagesUpload(files)}
+        dropText="Drop map to import"
+      >
         <input
-          onChange={(event) => handleImagesUpload(event.target.files)}
+          onChange={(event) =>
+            event.target.files &&
+            handleImagesUpload(Array.from(event.target.files))
+          }
           type="file"
           accept="image/jpeg, image/gif, image/png, image/webp"
           style={{ display: "none" }}
@@ -235,12 +272,15 @@ function SelectMapModal({
               <TileActionBar onAdd={openImageDialog} addTitle="Import Map(s)" />
               <Box sx={{ position: "relative" }}>
                 <TileDragProvider
-                  onDragAdd={canAddDraggedMap && handleDragAdd}
+                  onDragAdd={(canAddDraggedMap && handleDragAdd) || undefined}
                   onDragStart={() => setIsDraggingMap(true)}
                   onDragEnd={() => setIsDraggingMap(false)}
                   onDragCancel={() => setIsDraggingMap(false)}
                 >
                   <TilesContainer>
+                    {databaseStatus === "disabled" && (
+                      <DatabaseDisabledMessage type="Map" />
+                    )}
                     <MapTiles
                       mapsById={mapsById}
                       onMapEdit={setEditingMapId}
@@ -249,7 +289,7 @@ function SelectMapModal({
                   </TilesContainer>
                 </TileDragProvider>
                 <TileDragProvider
-                  onDragAdd={canAddDraggedMap && handleDragAdd}
+                  onDragAdd={(canAddDraggedMap && handleDragAdd) || undefined}
                   onDragStart={() => setIsDraggingMap(true)}
                   onDragEnd={() => setIsDraggingMap(false)}
                   onDragCancel={() => setIsDraggingMap(false)}
@@ -265,7 +305,7 @@ function SelectMapModal({
                 </TileDragProvider>
                 <MapEditBar
                   currentMap={currentMap}
-                  disabled={isLoading || editingMapId}
+                  disabled={isLoading || !!editingMapId}
                   onMapChange={onMapChange}
                   onMapReset={onMapReset}
                   onLoad={setIsLoading}
@@ -279,18 +319,19 @@ function SelectMapModal({
           </GroupProvider>
         </ReactResizeDetector>
       </ImageDrop>
-      {(isLoading || mapsLoading) && <LoadingOverlay bg="overlay" />}
-      <EditMapModal
-        isOpen={!!editingMapId}
-        onDone={() => setEditingMapId()}
-        map={editingMapId && maps.find((map) => map.id === editingMapId)}
-        mapState={
-          editingMapId &&
-          mapStates.find((state) => state.mapId === editingMapId)
-        }
-        onUpdateMap={updateMap}
-        onUpdateMapState={updateMapState}
-      />
+      <>{(isLoading || mapsLoading) && <LoadingOverlay bg="overlay" />}</>
+      <>
+        {editingMap && editingMapState && (
+          <EditMapModal
+            isOpen={!!editingMapId}
+            onDone={() => setEditingMapId(undefined)}
+            map={editingMap}
+            mapState={editingMapState}
+            onUpdateMap={updateMap}
+            onUpdateMapState={updateMapState}
+          />
+        )}
+      </>
       <ConfirmModal
         isOpen={isLargeImageWarningModalOpen}
         onRequestClose={handleLargeImageWarningCancel}
diff --git a/src/modals/SelectTokensModal.js b/src/modals/SelectTokensModal.tsx
similarity index 77%
rename from src/modals/SelectTokensModal.js
rename to src/modals/SelectTokensModal.tsx
index 769adc6..15c4c9e 100644
--- a/src/modals/SelectTokensModal.js
+++ b/src/modals/SelectTokensModal.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect } from "react";
 import { Flex, Label, Button, Box } from "theme-ui";
 import { useToasts } from "react-toast-notifications";
 import ReactResizeDetector from "react-resize-detector";
@@ -8,6 +8,7 @@ import ConfirmModal from "./ConfirmModal";
 
 import Modal from "../components/Modal";
 import LoadingOverlay from "../components/LoadingOverlay";
+import DatabaseDisabledMessage from "../components/DatabaseDisabledMessage";
 
 import ImageDrop from "../components/image/ImageDrop";
 
@@ -34,10 +35,29 @@ import { useAssets } from "../contexts/AssetsContext";
 import { GroupProvider } from "../contexts/GroupContext";
 import { TileDragProvider } from "../contexts/TileDragContext";
 import { useMapStage } from "../contexts/MapStageContext";
+import { useDatabase } from "../contexts/DatabaseContext";
 
-function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
+import { TokenState } from "../types/TokenState";
+import {
+  TokensStateCreateHandler,
+  RequestCloseEventHandler,
+} from "../types/Events";
+
+type SelectTokensModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  onMapTokensStateCreate: TokensStateCreateHandler;
+};
+
+function SelectTokensModal({
+  isOpen,
+  onRequestClose,
+  onMapTokensStateCreate,
+}: SelectTokensModalProps) {
   const { addToast } = useToasts();
 
+  const { databaseStatus } = useDatabase();
+
   const userId = useUserId();
   const {
     tokens,
@@ -60,15 +80,14 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
    * Image Upload
    */
 
-  const fileInputRef = useRef();
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  const [isLargeImageWarningModalOpen, setShowLargeImageWarning] = useState(
-    false
-  );
-  const largeImageWarningFiles = useRef();
+  const [isLargeImageWarningModalOpen, setShowLargeImageWarning] =
+    useState(false);
+  const largeImageWarningFiles = useRef<File[]>();
 
-  async function handleImagesUpload(files) {
+  async function handleImagesUpload(files: File[]) {
     if (navigator.storage) {
       // Attempt to enable persistant storage
       await navigator.storage.persist();
@@ -100,7 +119,7 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
   function clearFileInput() {
     // Set file input to null to allow adding the same image 2 times in a row
     if (fileInputRef.current) {
-      fileInputRef.current.value = null;
+      fileInputRef.current.value = "";
     }
   }
 
@@ -119,6 +138,9 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
   async function handleLargeImageWarningConfirm() {
     setShowLargeImageWarning(false);
     const files = largeImageWarningFiles.current;
+    if (!files) {
+      return;
+    }
     for (let file of files) {
       await handleImageUpload(file);
     }
@@ -126,7 +148,10 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
     clearFileInput();
   }
 
-  async function handleImageUpload(file) {
+  async function handleImageUpload(file: File) {
+    if (!userId) {
+      return;
+    }
     setIsLoading(true);
     const { token, assets } = await createTokenFromFile(file, userId);
     await addToken(token);
@@ -137,12 +162,12 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
   /**
    * Token controls
    */
-  const [editingTokenId, setEditingTokenId] = useState();
+  const [editingTokenId, setEditingTokenId] = useState<string>();
 
   const [isDraggingToken, setIsDraggingToken] = useState(false);
 
   const mapStageRef = useMapStage();
-  function handleTokensAddToMap(groupIds, rect) {
+  function handleTokensAddToMap(groupIds: string[], rect: DOMRect) {
     let clientPosition = new Vector2(
       rect.width / 2 + rect.left,
       rect.height / 2 + rect.top
@@ -153,11 +178,11 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
     }
 
     let position = clientPositionToMapPosition(mapStage, clientPosition, false);
-    if (!position) {
+    if (!position || !userId) {
       return;
     }
 
-    let newTokenStates = [];
+    let newTokenStates: TokenState[] = [];
 
     for (let id of groupIds) {
       if (id in tokensById) {
@@ -191,20 +216,33 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
   const layout = useResponsiveLayout();
 
   const [modalSize, setModalSize] = useState({ width: 0, height: 0 });
-  function handleModalResize(width, height) {
-    setModalSize({ width, height });
+  function handleModalResize(width?: number, height?: number) {
+    if (width && height) {
+      setModalSize({ width, height });
+    }
   }
 
+  const editingToken =
+    editingTokenId && tokens.find((token) => token.id === editingTokenId);
+
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={onRequestClose}
-      style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
+      style={{
+        content: { maxWidth: layout.modalSize, width: "calc(100% - 16px)" },
+      }}
       shouldCloseOnEsc={!isDraggingToken}
     >
-      <ImageDrop onDrop={handleImagesUpload} dropText="Drop token to import">
+      <ImageDrop
+        onDrop={({ files }) => handleImagesUpload(files)}
+        dropText="Drop token to import"
+      >
         <input
-          onChange={(event) => handleImagesUpload(event.target.files)}
+          onChange={(event) =>
+            event.target.files &&
+            handleImagesUpload(Array.from(event.target.files))
+          }
           type="file"
           accept="image/jpeg, image/gif, image/png, image/webp"
           style={{ display: "none" }}
@@ -243,6 +281,9 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
                   onDragCancel={() => setIsDraggingToken(false)}
                 >
                   <TilesContainer>
+                    {databaseStatus === "disabled" && (
+                      <DatabaseDisabledMessage type="Token" />
+                    )}
                     <TokenTiles
                       tokensById={tokensById}
                       onTokenEdit={setEditingTokenId}
@@ -280,15 +321,17 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
           </GroupProvider>
         </ReactResizeDetector>
       </ImageDrop>
-      {(isLoading || tokensLoading) && <LoadingOverlay bg="overlay" />}
-      <EditTokenModal
-        isOpen={!!editingTokenId}
-        onDone={() => setEditingTokenId()}
-        token={
-          editingTokenId && tokens.find((token) => token.id === editingTokenId)
-        }
-        onUpdateToken={updateToken}
-      />
+      <>{(isLoading || tokensLoading) && <LoadingOverlay bg="overlay" />}</>
+      <>
+        {editingToken && (
+          <EditTokenModal
+            isOpen={!!editingTokenId}
+            onDone={() => setEditingTokenId(undefined)}
+            token={editingToken}
+            onUpdateToken={updateToken}
+          />
+        )}
+      </>
       <ConfirmModal
         isOpen={isLargeImageWarningModalOpen}
         onRequestClose={handleLargeImageWarningCancel}
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.tsx
similarity index 74%
rename from src/modals/SettingsModal.js
rename to src/modals/SettingsModal.tsx
index 9ca0f9c..286017f 100644
--- a/src/modals/SettingsModal.js
+++ b/src/modals/SettingsModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import {
   Label,
   Flex,
@@ -22,17 +22,26 @@ import useSetting from "../hooks/useSetting";
 import ConfirmModal from "./ConfirmModal";
 import ImportExportModal from "./ImportExportModal";
 
-function SettingsModal({ isOpen, onRequestClose }) {
+import { MapState } from "../types/MapState";
+import { RequestCloseEventHandler } from "../types/Events";
+
+type SettingsModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+};
+
+function SettingsModal({ isOpen, onRequestClose }: SettingsModalProps) {
   const { database, databaseStatus } = useDatabase();
   const userId = useUserId();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [labelSize, setLabelSize] = useSetting("map.labelSize");
-  const [gridSnappingSensitivity, setGridSnappingSensitivity] = useSetting(
-    "map.gridSnappingSensitivity"
-  );
-  const [showFogGuides, setShowFogGuides] = useSetting("fog.showGuides");
-  const [fogEditOpacity, setFogEditOpacity] = useSetting("fog.editOpacity");
-  const [storageEstimate, setStorageEstimate] = useState();
+  const [labelSize, setLabelSize] = useSetting<number>("map.labelSize");
+  const [gridSnappingSensitivity, setGridSnappingSensitivity] =
+    useSetting<number>("map.gridSnappingSensitivity");
+  const [showFogGuides, setShowFogGuides] =
+    useSetting<boolean>("fog.showGuides");
+  const [fogEditOpacity, setFogEditOpacity] =
+    useSetting<number>("fog.editOpacity");
+  const [storageEstimate, setStorageEstimate] = useState<StorageEstimate>();
   const [isImportExportModalOpen, setIsImportExportModalOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -59,8 +68,8 @@ function SettingsModal({ isOpen, onRequestClose }) {
     setIsLoading(true);
     try {
       localStorage.clear();
-      database.close();
-      await database.delete();
+      database?.close();
+      await database?.delete();
     } catch {
     } finally {
       window.location.reload();
@@ -72,25 +81,28 @@ function SettingsModal({ isOpen, onRequestClose }) {
     // Clear saved settings
     localStorage.clear();
 
-    const assets = await database
-      .table("assets")
-      .where("owner")
-      .notEqual(userId)
-      .toArray();
-    const states = await database.table("states").toArray();
-    for (let asset of assets) {
-      let inUse = false;
-      for (let state of states) {
-        for (let tokenState of Object.values(state.tokens)) {
-          if (tokenState.type === "file" && asset.id === tokenState.file) {
-            inUse = true;
+    if (database && userId) {
+      const assets = await database
+        .table("assets")
+        .where("owner")
+        .notEqual(userId)
+        .toArray();
+      const states: MapState[] = await database.table("states").toArray();
+      for (let asset of assets) {
+        let inUse = false;
+        for (let state of states) {
+          for (let tokenState of Object.values(state.tokens)) {
+            if (tokenState.type === "file" && asset.id === tokenState.file) {
+              inUse = true;
+            }
           }
         }
-      }
-      if (!inUse) {
-        await database.table("assets").delete(asset.id);
+        if (!inUse) {
+          await database.table("assets").delete(asset.id);
+        }
       }
     }
+
     window.location.reload();
   }
 
@@ -129,7 +141,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
               sx={{ width: "initial" }}
               value={fogEditOpacity}
               onChange={(e) => setFogEditOpacity(parseFloat(e.target.value))}
-              labelFunc={(value) => `${Math.round(value * 100)}%`}
+              labelFunc={(value: number) => `${Math.round(value * 100)}%`}
             />
           </Label>
           <Label py={2}>
@@ -142,7 +154,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
               sx={{ width: "initial" }}
               value={labelSize}
               onChange={(e) => setLabelSize(parseFloat(e.target.value))}
-              labelFunc={(value) => `${value}x`}
+              labelFunc={(value: number) => `${value}x`}
             />
           </Label>
           <Label py={2}>
@@ -157,7 +169,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
               onChange={(e) =>
                 setGridSnappingSensitivity(parseFloat(e.target.value))
               }
-              labelFunc={(value) => `${value * 2}`}
+              labelFunc={(value: number) => `${value * 2}`}
             />
           </Label>
           <Divider bg="text" />
@@ -188,13 +200,14 @@ function SettingsModal({ isOpen, onRequestClose }) {
               Import / Export Data
             </Button>
           </Flex>
-          {storageEstimate && (
+          {storageEstimate! && (
             <Flex sx={{ justifyContent: "center" }}>
               <Text variant="caption">
-                Storage Used: {prettyBytes(storageEstimate.usage)} of{" "}
-                {prettyBytes(storageEstimate.quota)} (
+                Storage Used: {prettyBytes(storageEstimate.usage as number)} of{" "}
+                {prettyBytes(storageEstimate.quota as number)} (
                 {Math.round(
-                  (storageEstimate.usage / Math.max(storageEstimate.quota, 1)) *
+                  ((storageEstimate.usage as number) /
+                    Math.max(storageEstimate.quota as number, 1)) *
                     100
                 )}
                 %)
diff --git a/src/modals/StartModal.js b/src/modals/StartModal.tsx
similarity index 75%
rename from src/modals/StartModal.js
rename to src/modals/StartModal.tsx
index 7aa23fd..a823f8b 100644
--- a/src/modals/StartModal.js
+++ b/src/modals/StartModal.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import { ChangeEvent, useRef } from "react";
 import { Box, Label, Input, Button, Flex, Checkbox } from "theme-ui";
 import { useHistory } from "react-router-dom";
 import shortid from "shortid";
@@ -9,20 +9,27 @@ import useSetting from "../hooks/useSetting";
 
 import Modal from "../components/Modal";
 
-function StartModal({ isOpen, onRequestClose }) {
+import { RequestCloseEventHandler } from "../types/Events";
+
+type StartModalProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+};
+
+function StartModal({ isOpen, onRequestClose }: StartModalProps) {
   let history = useHistory();
   const { password, setPassword } = useAuth();
 
-  function handlePasswordChange(event) {
+  function handlePasswordChange(event: ChangeEvent<HTMLInputElement>) {
     setPassword(event.target.value);
   }
 
-  const [usePassword, setUsePassword] = useSetting("game.usePassword");
-  function handleUsePasswordChange(event) {
+  const [usePassword, setUsePassword] = useSetting<boolean>("game.usePassword");
+  function handleUsePasswordChange(event: ChangeEvent<HTMLInputElement>) {
     setUsePassword(event.target.checked);
   }
 
-  function handleSubmit(event) {
+  function handleSubmit(event: ChangeEvent<HTMLInputElement>) {
     event.preventDefault();
     if (!usePassword) {
       setPassword("");
@@ -30,7 +37,7 @@ function StartModal({ isOpen, onRequestClose }) {
     history.push(`/game/${shortid.generate()}`);
   }
 
-  const inputRef = useRef();
+  const inputRef = useRef<HTMLInputElement>(null);
   function focusInput() {
     inputRef.current && inputRef.current.focus();
   }
diff --git a/src/modals/StartStreamModal.js b/src/modals/StartStreamModal.tsx
similarity index 69%
rename from src/modals/StartStreamModal.js
rename to src/modals/StartStreamModal.tsx
index 9d44f98..e5a83ad 100644
--- a/src/modals/StartStreamModal.js
+++ b/src/modals/StartStreamModal.tsx
@@ -1,8 +1,26 @@
-import React from "react";
 import { Box, Text, Button, Label, Flex } from "theme-ui";
 
 import Modal from "../components/Modal";
 
+import {
+  RequestCloseEventHandler,
+  StreamEndEventHandler,
+} from "../types/Events";
+
+export type StreamOpenAndStartEventHandler = () => void;
+
+type StartStreamProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  isSupported: boolean;
+  unavailableMessage: JSX.Element;
+  stream: MediaStream | null;
+  noAudioTrack: boolean;
+  noAudioMessage: JSX.Element;
+  onStreamStart: StreamOpenAndStartEventHandler;
+  onStreamEnd: StreamEndEventHandler;
+};
+
 function StartStreamModal({
   isOpen,
   onRequestClose,
@@ -13,7 +31,7 @@ function StartStreamModal({
   noAudioMessage,
   onStreamStart,
   onStreamEnd,
-}) {
+}: StartStreamProps) {
   return (
     <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
       <Box>
diff --git a/src/modals/StartTimerModal.js b/src/modals/StartTimerModal.tsx
similarity index 72%
rename from src/modals/StartTimerModal.js
rename to src/modals/StartTimerModal.tsx
index b6fdd94..72a6a56 100644
--- a/src/modals/StartTimerModal.js
+++ b/src/modals/StartTimerModal.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import { ChangeEvent, useRef } from "react";
 import { Box, Label, Input, Button, Flex, Text } from "theme-ui";
 
 import Modal from "../components/Modal";
@@ -7,23 +7,38 @@ import { getHMSDuration, getDurationHMS } from "../helpers/timer";
 
 import useSetting from "../hooks/useSetting";
 
+import {
+  RequestCloseEventHandler,
+  TimerStartEventHandler,
+  TimerStopEventHandler,
+} from "../types/Events";
+import { Timer } from "../types/Timer";
+
+type StartTimerProps = {
+  isOpen: boolean;
+  onRequestClose: RequestCloseEventHandler;
+  onTimerStart: TimerStartEventHandler;
+  onTimerStop: TimerStopEventHandler;
+  timer?: Timer;
+};
+
 function StartTimerModal({
   isOpen,
   onRequestClose,
   onTimerStart,
   onTimerStop,
   timer,
-}) {
-  const inputRef = useRef();
+}: StartTimerProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
   function focusInput() {
     inputRef.current && inputRef.current.focus();
   }
 
-  const [hour, setHour] = useSetting("timer.hour");
-  const [minute, setMinute] = useSetting("timer.minute");
-  const [second, setSecond] = useSetting("timer.second");
+  const [hour, setHour] = useSetting<number>("timer.hour");
+  const [minute, setMinute] = useSetting<number>("timer.minute");
+  const [second, setSecond] = useSetting<number>("timer.second");
 
-  function handleSubmit(event) {
+  function handleSubmit(event: ChangeEvent<HTMLInputElement>) {
     event.preventDefault();
     if (timer) {
       onTimerStop();
@@ -44,7 +59,7 @@ function StartTimerModal({
     paddingLeft: 0,
   };
 
-  function parseValue(value, max) {
+  function parseValue(value: string, max: number) {
     const num = parseInt(value);
     if (isNaN(num)) {
       return 0;
@@ -77,10 +92,10 @@ function StartTimerModal({
             </Text>
             <Input
               sx={inputStyle}
-              value={`${timer ? timerHMS.hour : hour}`}
+              value={`${timerHMS ? timerHMS.hour : hour}`}
               onChange={(e) => setHour(parseValue(e.target.value, 24))}
               type="number"
-              disabled={timer}
+              disabled={!!timer}
               min={0}
               max={24}
             />
@@ -89,11 +104,11 @@ function StartTimerModal({
             </Text>
             <Input
               sx={inputStyle}
-              value={`${timer ? timerHMS.minute : minute}`}
+              value={`${timerHMS ? timerHMS.minute : minute}`}
               onChange={(e) => setMinute(parseValue(e.target.value, 59))}
               type="number"
               ref={inputRef}
-              disabled={timer}
+              disabled={!!timer}
               min={0}
               max={59}
             />
@@ -102,10 +117,10 @@ function StartTimerModal({
             </Text>
             <Input
               sx={inputStyle}
-              value={`${timer ? timerHMS.second : second}`}
+              value={`${timerHMS ? timerHMS.second : second}`}
               onChange={(e) => setSecond(parseValue(e.target.value, 59))}
               type="number"
-              disabled={timer}
+              disabled={!!timer}
               min={0}
               max={59}
             />
diff --git a/src/network/Connection.js b/src/network/Connection.ts
similarity index 68%
rename from src/network/Connection.js
rename to src/network/Connection.ts
index 84f7c1b..fbc0c55 100644
--- a/src/network/Connection.js
+++ b/src/network/Connection.ts
@@ -8,18 +8,37 @@ import blobToBuffer from "../helpers/blobToBuffer";
 // http://viblast.com/blog/2015/2/5/webrtc-data-channel-message-size/
 const MAX_BUFFER_SIZE = 16000;
 
+type NetworkChunk = {
+  __chunked: boolean;
+  data: Uint8Array;
+  id: string;
+  index: number;
+  total: number;
+};
+
+type LocalChunk = {
+  data: Uint8Array[];
+  count: number;
+  total: number;
+};
+
+export type DataProgressEvent = {
+  id: string;
+  count: number;
+  total: number;
+};
+
 class Connection extends SimplePeer {
-  constructor(props) {
+  currentChunks: Record<string, LocalChunk>;
+  constructor(props: SimplePeer.Options) {
     super(props);
     this.currentChunks = {};
-    this.dataChannels = {};
     this.on("data", this.handleData);
-    this.on("datachannel", this.handleDataChannel);
   }
 
   // Intercept the data event with decoding and chunking support
-  handleData(packed) {
-    const unpacked = decode(packed);
+  handleData(packed: Uint8Array) {
+    const unpacked = decode(packed) as NetworkChunk;
     // If the special property __chunked is set and true
     // The data is a partial chunk of the a larger file
     // So wait until all chunks are collected and assembled
@@ -43,7 +62,6 @@ class Connection extends SimplePeer {
       // All chunks have been loaded
       if (chunk.count === chunk.total) {
         // Merge chunks with a blob
-        // TODO: Look at a more efficient way to recombine buffer data
         const merged = new Blob(chunk.data);
         blobToBuffer(merged).then((buffer) => {
           this.emit("dataComplete", decode(buffer));
@@ -59,50 +77,23 @@ class Connection extends SimplePeer {
    * Custom send function with encoding, chunking and data channel support
    * Uses `write` to send the data to allow for buffer / backpressure handling
    * @param {any} object
-   * @param {string=} channel
    * @param {string=} chunkId Optional ID to use for chunking
    */
-  sendObject(object, channel, chunkId) {
+  sendObject(object: any, chunkId?: string) {
     try {
       const packedData = encode(object);
       const chunks = this.chunk(packedData, chunkId);
       for (let chunk of chunks) {
-        if (this.dataChannels[channel]) {
-          this.dataChannels[channel].write(encode(chunk));
-        } else {
-          this.write(encode(chunk));
-        }
+        this.write(encode(chunk));
       }
     } catch (error) {
       console.error(error);
     }
   }
 
-  // Override the create data channel function to store our own named reference to it
-  // and to use our custom data handler
-  createDataChannel(channelName, channelConfig, opts) {
-    const channel = super.createDataChannel(channelName, channelConfig, opts);
-    this.handleDataChannel(channel);
-    return channel;
-  }
-
-  handleDataChannel(channel) {
-    const channelName = channel.channelName;
-    this.dataChannels[channelName] = channel;
-    channel.on("data", this.handleData.bind(this));
-    channel.on("error", (error) => {
-      this.emit("error", error);
-    });
-  }
-
   // Converted from https://github.com/peers/peerjs/
-  /**
-   * Chunk byte array
-   * @param {Uint8Array} data
-   * @param {string=} chunkId
-   * @returns {Uint8Array[]}
-   */
-  chunk(data, chunkId) {
+  /** Chunk byte array */
+  chunk(data: Uint8Array, chunkId?: string): NetworkChunk[] {
     const chunks = [];
     const size = data.byteLength;
     const total = Math.ceil(size / MAX_BUFFER_SIZE);
diff --git a/src/network/NetworkedMapAndTokens.js b/src/network/NetworkedMapAndTokens.js
deleted file mode 100644
index 9caf9b3..0000000
--- a/src/network/NetworkedMapAndTokens.js
+++ /dev/null
@@ -1,503 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { useToasts } from "react-toast-notifications";
-
-import { useMapData } from "../contexts/MapDataContext";
-import { useMapLoading } from "../contexts/MapLoadingContext";
-import { useUserId } from "../contexts/UserIdContext";
-import { useDatabase } from "../contexts/DatabaseContext";
-import { useParty } from "../contexts/PartyContext";
-import { useAssets } from "../contexts/AssetsContext";
-
-import { omit } from "../helpers/shared";
-
-import useDebounce from "../hooks/useDebounce";
-import useNetworkedState from "../hooks/useNetworkedState";
-
-// Load session for auto complete
-// eslint-disable-next-line no-unused-vars
-import Session from "./Session";
-
-import Map from "../components/map/Map";
-import TokenBar from "../components/token/TokenBar";
-
-import GlobalImageDrop from "../components/image/GlobalImageDrop";
-
-const defaultMapActions = {
-  mapDrawActions: [],
-  mapDrawActionIndex: -1,
-  fogDrawActions: [],
-  fogDrawActionIndex: -1,
-};
-
-/**
- * @typedef {object} NetworkedMapProps
- * @property {Session} session
- */
-
-/**
- * @param {NetworkedMapProps} props
- */
-function NetworkedMapAndTokens({ session }) {
-  const { addToast } = useToasts();
-  const userId = useUserId();
-  const partyState = useParty();
-  const { assetLoadStart, assetProgressUpdate, isLoading } = useMapLoading();
-
-  const { updateMapState } = useMapData();
-  const { getAsset, putAsset } = useAssets();
-
-  const [currentMap, setCurrentMap] = useState(null);
-  const [currentMapState, setCurrentMapState] = useNetworkedState(
-    null,
-    session,
-    "map_state",
-    500,
-    true,
-    "mapId"
-  );
-  const [assetManifest, setAssetManifest] = useNetworkedState(
-    null,
-    session,
-    "manifest",
-    500,
-    true,
-    "mapId"
-  );
-
-  async function loadAssetManifestFromMap(map, mapState) {
-    const assets = {};
-    const { owner } = map;
-    let processedTokens = new Set();
-    for (let tokenState of Object.values(mapState.tokens)) {
-      if (tokenState.file && !processedTokens.has(tokenState.file)) {
-        processedTokens.add(tokenState.file);
-        assets[tokenState.file] = {
-          id: tokenState.file,
-          owner: tokenState.owner,
-        };
-      }
-    }
-    if (map.type === "file") {
-      assets[map.thumbnail] = { id: map.thumbnail, owner };
-      const qualityId = map.resolutions[map.quality];
-      if (qualityId) {
-        assets[qualityId] = { id: qualityId, owner };
-      } else {
-        assets[map.file] = { id: map.file, owner };
-      }
-    }
-    setAssetManifest({ mapId: map.id, assets }, true, true);
-  }
-
-  function addAssetsIfNeeded(assets) {
-    setAssetManifest((prevManifest) => {
-      if (prevManifest?.assets) {
-        let newAssets = { ...prevManifest.assets };
-        for (let asset of assets) {
-          const id = asset.id;
-          const exists = id in newAssets;
-          if (!exists) {
-            newAssets[id] = asset;
-          }
-        }
-        return { ...prevManifest, assets: newAssets };
-      }
-      return prevManifest;
-    });
-  }
-
-  // Keep track of assets we are already requesting to prevent from loading them multiple times
-  const requestingAssetsRef = useRef(new Set());
-
-  useEffect(() => {
-    if (!assetManifest || !userId) {
-      return;
-    }
-
-    async function requestAssetsIfNeeded() {
-      for (let asset of Object.values(assetManifest.assets)) {
-        if (
-          asset.owner === userId ||
-          requestingAssetsRef.current.has(asset.id)
-        ) {
-          continue;
-        }
-
-        const owner = Object.values(partyState).find(
-          (player) => player.userId === asset.owner
-        );
-
-        // Ensure requests are added before any async operation to prevent them from sending twice
-        requestingAssetsRef.current.add(asset.id);
-
-        const cachedAsset = await getAsset(asset.id);
-        if (!owner) {
-          // Add no owner toast if we don't have asset in out cache
-          if (!cachedAsset) {
-            // TODO: Stop toast from appearing multiple times
-            addToast("Unable to find owner for asset");
-          }
-          requestingAssetsRef.current.delete(asset.id);
-          continue;
-        }
-
-        if (cachedAsset) {
-          requestingAssetsRef.current.delete(asset.id);
-        } else {
-          assetLoadStart(asset.id);
-          session.sendTo(owner.sessionId, "assetRequest", asset);
-        }
-      }
-    }
-
-    requestAssetsIfNeeded();
-  }, [
-    assetManifest,
-    partyState,
-    session,
-    userId,
-    addToast,
-    getAsset,
-    assetLoadStart,
-  ]);
-
-  /**
-   * Map state
-   */
-
-  const { database } = useDatabase();
-  // Sync the map state to the database after 500ms of inactivity
-  const debouncedMapState = useDebounce(currentMapState, 500);
-  useEffect(() => {
-    if (
-      debouncedMapState &&
-      debouncedMapState.mapId &&
-      currentMap &&
-      currentMap.owner === userId &&
-      database
-    ) {
-      updateMapState(debouncedMapState.mapId, debouncedMapState);
-    }
-  }, [currentMap, debouncedMapState, userId, database, updateMapState]);
-
-  async function handleMapChange(newMap, newMapState) {
-    // Clear map before sending new one
-    setCurrentMap(null);
-    session.socket?.emit("map", null);
-
-    setCurrentMapState(newMapState, true, true);
-    setCurrentMap(newMap);
-
-    session.socket?.emit("map", newMap);
-
-    if (!newMap || !newMapState) {
-      setAssetManifest(null, true, true);
-      return;
-    }
-
-    await loadAssetManifestFromMap(newMap, newMapState);
-  }
-
-  function handleMapReset(newMapState) {
-    setCurrentMapState(newMapState, true, true);
-    setMapActions(defaultMapActions);
-  }
-
-  const [mapActions, setMapActions] = useState(defaultMapActions);
-
-  function addMapActions(actions, indexKey, actionsKey, shapesKey) {
-    setMapActions((prevMapActions) => {
-      const newActions = [
-        ...prevMapActions[actionsKey].slice(0, prevMapActions[indexKey] + 1),
-        ...actions,
-      ];
-      const newIndex = newActions.length - 1;
-      return {
-        ...prevMapActions,
-        [actionsKey]: newActions,
-        [indexKey]: newIndex,
-      };
-    });
-    // Update map state by performing the actions on it
-    setCurrentMapState((prevMapState) => {
-      if (prevMapState) {
-        let shapes = prevMapState[shapesKey];
-        for (let action of actions) {
-          shapes = action.execute(shapes);
-        }
-        return {
-          ...prevMapState,
-          [shapesKey]: shapes,
-        };
-      }
-    });
-  }
-
-  function updateActionIndex(change, indexKey, actionsKey, shapesKey) {
-    const prevIndex = mapActions[indexKey];
-    const newIndex = Math.min(
-      Math.max(mapActions[indexKey] + change, -1),
-      mapActions[actionsKey].length - 1
-    );
-
-    setMapActions((prevMapActions) => ({
-      ...prevMapActions,
-      [indexKey]: newIndex,
-    }));
-
-    // Update map state by either performing the actions or undoing them
-    setCurrentMapState((prevMapState) => {
-      if (prevMapState) {
-        let shapes = prevMapState[shapesKey];
-        if (prevIndex < newIndex) {
-          // Redo
-          for (let i = prevIndex + 1; i < newIndex + 1; i++) {
-            let action = mapActions[actionsKey][i];
-            shapes = action.execute(shapes);
-          }
-        } else {
-          // Undo
-          for (let i = prevIndex; i > newIndex; i--) {
-            let action = mapActions[actionsKey][i];
-            shapes = action.undo(shapes);
-          }
-        }
-        return {
-          ...prevMapState,
-          [shapesKey]: shapes,
-        };
-      }
-    });
-
-    return newIndex;
-  }
-
-  function handleMapDraw(action) {
-    addMapActions(
-      [action],
-      "mapDrawActionIndex",
-      "mapDrawActions",
-      "drawShapes"
-    );
-  }
-
-  function handleMapDrawUndo() {
-    updateActionIndex(-1, "mapDrawActionIndex", "mapDrawActions", "drawShapes");
-  }
-
-  function handleMapDrawRedo() {
-    updateActionIndex(1, "mapDrawActionIndex", "mapDrawActions", "drawShapes");
-  }
-
-  function handleFogDraw(action) {
-    addMapActions(
-      [action],
-      "fogDrawActionIndex",
-      "fogDrawActions",
-      "fogShapes"
-    );
-  }
-
-  function handleFogDrawUndo() {
-    updateActionIndex(-1, "fogDrawActionIndex", "fogDrawActions", "fogShapes");
-  }
-
-  function handleFogDrawRedo() {
-    updateActionIndex(1, "fogDrawActionIndex", "fogDrawActions", "fogShapes");
-  }
-
-  // If map changes clear map actions
-  const previousMapIdRef = useRef();
-  useEffect(() => {
-    if (currentMap && currentMap.id !== previousMapIdRef.current) {
-      setMapActions(defaultMapActions);
-      previousMapIdRef.current = currentMap.id;
-    }
-  }, [currentMap]);
-
-  function handleNoteChange(note) {
-    setCurrentMapState((prevMapState) => ({
-      ...prevMapState,
-      notes: {
-        ...prevMapState.notes,
-        [note.id]: note,
-      },
-    }));
-  }
-
-  function handleNoteRemove(noteId) {
-    setCurrentMapState((prevMapState) => ({
-      ...prevMapState,
-      notes: omit(prevMapState.notes, [noteId]),
-    }));
-  }
-
-  /**
-   * Token state
-   */
-
-  async function handleMapTokensStateCreate(tokenStates) {
-    if (!currentMap || !currentMapState) {
-      return;
-    }
-
-    let assets = [];
-    for (let tokenState of tokenStates) {
-      if (tokenState.type === "file") {
-        assets.push({ id: tokenState.file, owner: tokenState.owner });
-      }
-    }
-    if (assets.length > 0) {
-      addAssetsIfNeeded(assets);
-    }
-
-    setCurrentMapState((prevMapState) => {
-      let newMapTokens = { ...prevMapState.tokens };
-      for (let tokenState of tokenStates) {
-        newMapTokens[tokenState.id] = tokenState;
-      }
-      return { ...prevMapState, tokens: newMapTokens };
-    });
-  }
-
-  function handleMapTokenStateChange(change) {
-    if (!currentMapState) {
-      return;
-    }
-    setCurrentMapState((prevMapState) => {
-      let tokens = { ...prevMapState.tokens };
-      for (let id in change) {
-        if (id in tokens) {
-          tokens[id] = { ...tokens[id], ...change[id] };
-        }
-      }
-
-      return {
-        ...prevMapState,
-        tokens,
-      };
-    });
-  }
-
-  function handleMapTokenStateRemove(tokenState) {
-    setCurrentMapState((prevMapState) => {
-      const { [tokenState.id]: old, ...rest } = prevMapState.tokens;
-      return { ...prevMapState, tokens: rest };
-    });
-  }
-
-  useEffect(() => {
-    async function handlePeerData({ id, data, reply }) {
-      if (id === "assetRequest") {
-        const asset = await getAsset(data.id);
-        if (asset) {
-          reply("assetResponseSuccess", asset, undefined, data.id);
-        } else {
-          reply("assetResponseFail", data.id, undefined, data.id);
-        }
-      }
-
-      if (id === "assetResponseSuccess") {
-        const asset = data;
-        await putAsset(asset);
-        requestingAssetsRef.current.delete(asset.id);
-      }
-
-      if (id === "assetResponseFail") {
-        const assetId = data;
-        requestingAssetsRef.current.delete(assetId);
-      }
-    }
-
-    function handlePeerDataProgress({ id, total, count }) {
-      assetProgressUpdate({ id, total, count });
-    }
-
-    async function handleSocketMap(map) {
-      if (map) {
-        setCurrentMap(map);
-      } else {
-        setCurrentMap(null);
-      }
-    }
-
-    session.on("peerData", handlePeerData);
-    session.on("peerDataProgress", handlePeerDataProgress);
-    session.socket?.on("map", handleSocketMap);
-
-    return () => {
-      session.off("peerData", handlePeerData);
-      session.off("peerDataProgress", handlePeerDataProgress);
-      session.socket?.off("map", handleSocketMap);
-    };
-  });
-
-  const canChangeMap = !isLoading;
-
-  const canEditMapDrawing =
-    currentMap &&
-    currentMapState &&
-    (currentMapState.editFlags.includes("drawing") ||
-      currentMap.owner === userId);
-
-  const canEditFogDrawing =
-    currentMap &&
-    currentMapState &&
-    (currentMapState.editFlags.includes("fog") || currentMap.owner === userId);
-
-  const canEditNotes =
-    currentMap &&
-    currentMapState &&
-    (currentMapState.editFlags.includes("notes") ||
-      currentMap.owner === userId);
-
-  const disabledMapTokens = {};
-  // If we have a map and state and have the token permission disabled
-  // and are not the map owner
-  if (
-    currentMapState &&
-    currentMap &&
-    !currentMapState.editFlags.includes("tokens") &&
-    currentMap.owner !== userId
-  ) {
-    for (let token of Object.values(currentMapState.tokens)) {
-      if (token.owner !== userId) {
-        disabledMapTokens[token.id] = true;
-      }
-    }
-  }
-
-  return (
-    <GlobalImageDrop
-      onMapChange={handleMapChange}
-      onMapTokensStateCreate={handleMapTokensStateCreate}
-    >
-      <Map
-        map={currentMap}
-        mapState={currentMapState}
-        mapActions={mapActions}
-        onMapTokenStateChange={handleMapTokenStateChange}
-        onMapTokenStateRemove={handleMapTokenStateRemove}
-        onMapChange={handleMapChange}
-        onMapReset={handleMapReset}
-        onMapDraw={handleMapDraw}
-        onMapDrawUndo={handleMapDrawUndo}
-        onMapDrawRedo={handleMapDrawRedo}
-        onFogDraw={handleFogDraw}
-        onFogDrawUndo={handleFogDrawUndo}
-        onFogDrawRedo={handleFogDrawRedo}
-        onMapNoteChange={handleNoteChange}
-        onMapNoteRemove={handleNoteRemove}
-        allowMapDrawing={canEditMapDrawing}
-        allowFogDrawing={canEditFogDrawing}
-        allowMapChange={canChangeMap}
-        allowNoteEditing={canEditNotes}
-        disabledTokens={disabledMapTokens}
-        session={session}
-      />
-      <TokenBar onMapTokensStateCreate={handleMapTokensStateCreate} />
-    </GlobalImageDrop>
-  );
-}
-
-export default NetworkedMapAndTokens;
diff --git a/src/network/NetworkedMapAndTokens.tsx b/src/network/NetworkedMapAndTokens.tsx
new file mode 100644
index 0000000..997c53e
--- /dev/null
+++ b/src/network/NetworkedMapAndTokens.tsx
@@ -0,0 +1,441 @@
+import { useState, useEffect, useRef } from "react";
+import { useToasts } from "react-toast-notifications";
+
+import { useMapData } from "../contexts/MapDataContext";
+import { useMapLoading } from "../contexts/MapLoadingContext";
+import { useUserId } from "../contexts/UserIdContext";
+import { useDatabase } from "../contexts/DatabaseContext";
+import { useParty } from "../contexts/PartyContext";
+import { useAssets } from "../contexts/AssetsContext";
+
+import useDebounce from "../hooks/useDebounce";
+import useNetworkedState from "../hooks/useNetworkedState";
+import useMapActions from "../hooks/useMapActions";
+
+import Session, { PeerDataEvent, PeerDataProgressEvent } from "./Session";
+
+import Action from "../actions/Action";
+
+import Map from "../components/map/Map";
+import TokenBar from "../components/token/TokenBar";
+
+import GlobalImageDrop from "../components/image/GlobalImageDrop";
+
+import { Map as MapType } from "../types/Map";
+import { MapState } from "../types/MapState";
+import {
+  AssetManifest,
+  AssetManifestAsset,
+  AssetManifestAssets,
+} from "../types/Asset";
+import { TokenState } from "../types/TokenState";
+import { DrawingState } from "../types/Drawing";
+import { FogState } from "../types/Fog";
+import { Note } from "../types/Note";
+import {
+  AddStatesAction,
+  EditStatesAction,
+  RemoveStatesAction,
+} from "../actions";
+
+/**
+ * @typedef {object} NetworkedMapProps
+ * @property {Session} session
+ */
+
+/**
+ * @param {NetworkedMapProps} props
+ */
+function NetworkedMapAndTokens({ session }: { session: Session }) {
+  const { addToast } = useToasts();
+  const userId = useUserId();
+  const partyState = useParty();
+  const { assetLoadStart, assetProgressUpdate, isLoading } = useMapLoading();
+
+  const { updateMapState } = useMapData();
+  const { getAsset, putAsset } = useAssets();
+
+  const [currentMap, setCurrentMap] = useState<MapType | null>(null);
+  const [currentMapState, setCurrentMapState] =
+    useNetworkedState<MapState | null>(
+      null,
+      session,
+      "map_state",
+      500,
+      true,
+      "mapId"
+    );
+  const [assetManifest, setAssetManifest] =
+    useNetworkedState<AssetManifest | null>(
+      null,
+      session,
+      "manifest",
+      500,
+      true,
+      "mapId"
+    );
+
+  async function loadAssetManifestFromMap(map: MapType, mapState: MapState) {
+    const assets: AssetManifestAssets = {};
+    const { owner } = map;
+    let processedTokens = new Set();
+    for (let tokenState of Object.values(mapState.tokens)) {
+      if (tokenState.type === "file" && !processedTokens.has(tokenState.file)) {
+        processedTokens.add(tokenState.file);
+        assets[tokenState.file] = {
+          id: tokenState.file,
+          owner: tokenState.owner,
+        };
+      }
+    }
+    if (map.type === "file") {
+      assets[map.thumbnail] = { id: map.thumbnail, owner };
+      if (map.quality !== "original") {
+        const qualityId = map.resolutions[map.quality];
+        if (qualityId) {
+          assets[qualityId] = { id: qualityId, owner };
+        }
+      } else {
+        assets[map.file] = { id: map.file, owner };
+      }
+    }
+    setAssetManifest({ mapId: map.id, assets }, true, true);
+  }
+
+  function addAssetsIfNeeded(assets: AssetManifestAsset[]) {
+    setAssetManifest((prevManifest) => {
+      if (prevManifest?.assets) {
+        let newAssets = { ...prevManifest.assets };
+        for (let asset of assets) {
+          const id = asset.id;
+          const exists = id in newAssets;
+          if (!exists) {
+            newAssets[id] = asset;
+          }
+        }
+        return { ...prevManifest, assets: newAssets };
+      }
+      return prevManifest;
+    });
+  }
+
+  // Keep track of assets we are already requesting to prevent from loading them multiple times
+  const requestingAssetsRef = useRef(new Set());
+
+  useEffect(() => {
+    if (!assetManifest || !userId) {
+      return;
+    }
+
+    async function requestAssetsIfNeeded() {
+      if (!assetManifest) {
+        return;
+      }
+      for (let asset of Object.values(assetManifest.assets)) {
+        if (
+          asset.owner === userId ||
+          requestingAssetsRef.current.has(asset.id)
+        ) {
+          continue;
+        }
+
+        const owner = Object.values(partyState).find(
+          (player) => player.userId === asset.owner
+        );
+
+        // Ensure requests are added before any async operation to prevent them from sending twice
+        requestingAssetsRef.current.add(asset.id);
+
+        const cachedAsset = await getAsset(asset.id);
+        if (!owner) {
+          // Add no owner toast if we don't have asset in out cache
+          if (!cachedAsset) {
+            // TODO: Stop toast from appearing multiple times
+            addToast("Unable to find owner for asset");
+          }
+          requestingAssetsRef.current.delete(asset.id);
+          continue;
+        }
+
+        if (cachedAsset) {
+          requestingAssetsRef.current.delete(asset.id);
+        } else if (owner.sessionId) {
+          assetLoadStart(asset.id);
+          session.sendTo(owner.sessionId, "assetRequest", asset);
+        }
+      }
+    }
+
+    requestAssetsIfNeeded();
+  }, [
+    assetManifest,
+    partyState,
+    session,
+    userId,
+    addToast,
+    getAsset,
+    assetLoadStart,
+  ]);
+
+  /**
+   * Map state
+   */
+
+  const { database } = useDatabase();
+  // Sync the map state to the database after 500ms of inactivity
+  const debouncedMapState = useDebounce(currentMapState, 500);
+  useEffect(() => {
+    if (
+      debouncedMapState &&
+      debouncedMapState.mapId &&
+      currentMap &&
+      currentMap?.owner === userId &&
+      database
+    ) {
+      updateMapState(debouncedMapState.mapId, debouncedMapState);
+    }
+  }, [currentMap, debouncedMapState, userId, database, updateMapState]);
+
+  async function handleMapChange(
+    newMap: MapType | null,
+    newMapState: MapState | null
+  ) {
+    // Clear map before sending new one
+    setCurrentMap(null);
+    session.socket?.emit("map", null);
+
+    setCurrentMapState(newMapState, true, true);
+    setCurrentMap(newMap);
+
+    session.socket?.emit("map", newMap);
+
+    if (!newMap || !newMapState) {
+      setAssetManifest(null, true, true);
+      return;
+    }
+
+    await loadAssetManifestFromMap(newMap, newMapState);
+  }
+
+  const [mapActions, addActions, updateActionIndex, resetActions] =
+    useMapActions(setCurrentMapState);
+
+  function handleMapReset(newMapState: MapState) {
+    setCurrentMapState(newMapState, true, true);
+    resetActions();
+  }
+
+  function handleMapDraw(action: Action<DrawingState>) {
+    addActions([{ type: "drawings", action }]);
+  }
+
+  function handleFogDraw(action: Action<FogState>) {
+    addActions([{ type: "fogs", action }]);
+  }
+
+  function handleUndo() {
+    updateActionIndex(-1);
+  }
+
+  function handleRedo() {
+    updateActionIndex(1);
+  }
+
+  // If map changes clear map actions
+  const previousMapIdRef = useRef<string>();
+  useEffect(() => {
+    if (currentMap && currentMap?.id !== previousMapIdRef.current) {
+      resetActions();
+      previousMapIdRef.current = currentMap?.id;
+    }
+  }, [currentMap, resetActions]);
+
+  function handleNoteCreate(notes: Note[]) {
+    const action = new AddStatesAction(notes);
+    addActions([{ type: "notes", action }]);
+  }
+
+  function handleNoteChange(changes: Record<string, Partial<Note>>) {
+    let edits: Partial<Note>[] = [];
+    for (let id in changes) {
+      edits.push({ ...changes[id], id });
+    }
+    const action = new EditStatesAction(edits);
+    addActions([{ type: "notes", action }]);
+  }
+
+  function handleNoteRemove(noteIds: string[]) {
+    const action = new RemoveStatesAction<Note>(noteIds);
+    addActions([{ type: "notes", action }]);
+  }
+
+  /**
+   * Token state
+   */
+
+  async function handleMapTokensStateCreate(tokenStates: TokenState[]) {
+    if (!currentMap || !currentMapState) {
+      return;
+    }
+
+    let assets: AssetManifestAsset[] = [];
+    for (let tokenState of tokenStates) {
+      if (tokenState.type === "file") {
+        assets.push({ id: tokenState.file, owner: tokenState.owner });
+      }
+    }
+    if (assets.length > 0) {
+      addAssetsIfNeeded(assets);
+    }
+
+    const action = new AddStatesAction(tokenStates);
+    addActions([{ type: "tokens", action }]);
+  }
+
+  function handleMapTokenStateChange(
+    changes: Record<string, Partial<TokenState>>
+  ) {
+    let edits: Partial<TokenState>[] = [];
+    for (let id in changes) {
+      edits.push({ ...changes[id], id });
+    }
+    const action = new EditStatesAction(edits);
+    addActions([{ type: "tokens", action }]);
+  }
+
+  function handleMapTokenStateRemove(tokenStateIds: string[]) {
+    const action = new RemoveStatesAction<TokenState>(tokenStateIds);
+    addActions([{ type: "tokens", action }]);
+  }
+
+  function handleSelectionItemsChange(
+    tokenChanges: Record<string, Partial<TokenState>>,
+    noteChanges: Record<string, Partial<Note>>
+  ) {
+    let tokenEdits: Partial<TokenState>[] = [];
+    for (let id in tokenChanges) {
+      tokenEdits.push({ ...tokenChanges[id], id });
+    }
+    const tokenAction = new EditStatesAction(tokenEdits);
+
+    let noteEdits: Partial<Note>[] = [];
+    for (let id in noteChanges) {
+      noteEdits.push({ ...noteChanges[id], id });
+    }
+    const noteAction = new EditStatesAction(noteEdits);
+
+    addActions([
+      { type: "tokens", action: tokenAction },
+      { type: "notes", action: noteAction },
+    ]);
+  }
+
+  function handleSelectionItemsRemove(
+    tokenStateIds: string[],
+    noteIds: string[]
+  ) {
+    const tokenAction = new RemoveStatesAction<TokenState>(tokenStateIds);
+    const noteAction = new RemoveStatesAction<Note>(noteIds);
+    addActions([
+      { type: "tokens", action: tokenAction },
+      { type: "notes", action: noteAction },
+    ]);
+  }
+
+  function handleSelectionItemsCreate(
+    tokenStates: TokenState[],
+    notes: Note[]
+  ) {
+    const tokenAction = new AddStatesAction(tokenStates);
+    const noteAction = new AddStatesAction(notes);
+    addActions([
+      { type: "tokens", action: tokenAction },
+      { type: "notes", action: noteAction },
+    ]);
+  }
+
+  useEffect(() => {
+    async function handlePeerData({ id, data, reply }: PeerDataEvent) {
+      if (id === "assetRequest") {
+        const asset = await getAsset(data.id);
+        if (asset) {
+          reply("assetResponseSuccess", asset, data.id);
+        } else {
+          reply("assetResponseFail", data.id, data.id);
+        }
+      }
+
+      if (id === "assetResponseSuccess") {
+        const asset = data;
+        await putAsset(asset);
+        requestingAssetsRef.current.delete(asset.id);
+      }
+
+      if (id === "assetResponseFail") {
+        const assetId = data;
+        requestingAssetsRef.current.delete(assetId);
+      }
+    }
+
+    function handlePeerDataProgress({
+      id,
+      total,
+      count,
+    }: PeerDataProgressEvent) {
+      assetProgressUpdate({ id, total, count });
+    }
+
+    async function handleSocketMap(map?: MapType) {
+      if (map) {
+        setCurrentMap(map);
+      } else {
+        setCurrentMap(null);
+      }
+    }
+
+    session.on("peerData", handlePeerData);
+    session.on("peerDataProgress", handlePeerDataProgress);
+    session.socket?.on("map", handleSocketMap);
+
+    return () => {
+      session.off("peerData", handlePeerData);
+      session.off("peerDataProgress", handlePeerDataProgress);
+      session.socket?.off("map", handleSocketMap);
+    };
+  });
+
+  const canChangeMap = !isLoading;
+
+  return (
+    <GlobalImageDrop
+      onMapChange={handleMapChange}
+      onMapTokensStateCreate={handleMapTokensStateCreate}
+    >
+      <Map
+        map={currentMap}
+        mapState={currentMapState}
+        mapActions={mapActions}
+        onMapTokenStateChange={handleMapTokenStateChange}
+        onMapTokenStateRemove={handleMapTokenStateRemove}
+        onMapTokensStateCreate={handleMapTokensStateCreate}
+        onSelectionItemsChange={handleSelectionItemsChange}
+        onSelectionItemsRemove={handleSelectionItemsRemove}
+        onSelectionItemsCreate={handleSelectionItemsCreate}
+        onMapChange={handleMapChange}
+        onMapReset={handleMapReset}
+        onMapDraw={handleMapDraw}
+        onFogDraw={handleFogDraw}
+        onMapNoteCreate={handleNoteCreate}
+        onMapNoteChange={handleNoteChange}
+        onMapNoteRemove={handleNoteRemove}
+        allowMapChange={canChangeMap}
+        session={session}
+        onUndo={handleUndo}
+        onRedo={handleRedo}
+      />
+      <TokenBar onMapTokensStateCreate={handleMapTokensStateCreate} />
+    </GlobalImageDrop>
+  );
+}
+
+export default NetworkedMapAndTokens;
diff --git a/src/network/NetworkedMapPointer.js b/src/network/NetworkedMapPointer.tsx
similarity index 75%
rename from src/network/NetworkedMapPointer.js
rename to src/network/NetworkedMapPointer.tsx
index 87b5437..cd44086 100644
--- a/src/network/NetworkedMapPointer.js
+++ b/src/network/NetworkedMapPointer.tsx
@@ -1,21 +1,39 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Group } from "react-konva";
 
 import { useUserId } from "../contexts/UserIdContext";
 
-import MapPointer from "../components/map/MapPointer";
+import PointerTool from "../components/tools/PointerTool";
 import { isEmpty } from "../helpers/shared";
 import Vector2 from "../helpers/Vector2";
 
 import useSetting from "../hooks/useSetting";
+import Session from "./Session";
+import { Color } from "../helpers/colors";
+import { PointerState } from "../types/Pointer";
 
 // Send pointer updates every 50ms (20fps)
 const sendTickRate = 50;
 
-function NetworkedMapPointer({ session, active }) {
+type InterpolatedPointerState = PointerState & { time: number };
+
+type PointerInterpolation = {
+  id: string;
+  from: InterpolatedPointerState | null;
+  to: InterpolatedPointerState;
+};
+
+type NetworkedMapPointerProps = {
+  session: Session;
+  active: boolean;
+};
+
+function NetworkedMapPointer({ session, active }: NetworkedMapPointerProps) {
   const userId = useUserId();
-  const [localPointerState, setLocalPointerState] = useState({});
-  const [pointerColor] = useSetting("pointer.color");
+  const [localPointerState, setLocalPointerState] = useState<
+    Record<string, PointerState>
+  >({});
+  const [pointerColor] = useSetting<Color>("pointer.color");
 
   const sessionRef = useRef(session);
   useEffect(() => {
@@ -38,12 +56,12 @@ function NetworkedMapPointer({ session, active }) {
   // Send pointer updates every sendTickRate to peers to save on bandwidth
   // We use requestAnimationFrame as setInterval was being blocked during
   // re-renders on Chrome with Windows
-  const ownPointerUpdateRef = useRef();
+  const ownPointerUpdateRef = useRef<PointerState | null>(null);
   useEffect(() => {
     let prevTime = performance.now();
     let request = requestAnimationFrame(update);
     let counter = 0;
-    function update(time) {
+    function update(time: number) {
       request = requestAnimationFrame(update);
       const deltaTime = time - prevTime;
       counter += deltaTime;
@@ -70,7 +88,10 @@ function NetworkedMapPointer({ session, active }) {
     };
   }, []);
 
-  function updateOwnPointerState(position, visible) {
+  function updateOwnPointerState(position: Vector2, visible: boolean) {
+    if (!userId) {
+      return;
+    }
     setLocalPointerState((prev) => ({
       ...prev,
       [userId]: { position, visible, id: userId, color: pointerColor },
@@ -83,23 +104,23 @@ function NetworkedMapPointer({ session, active }) {
     };
   }
 
-  function handleOwnPointerDown(position) {
+  function handleOwnPointerDown(position: Vector2) {
     updateOwnPointerState(position, true);
   }
 
-  function handleOwnPointerMove(position) {
+  function handleOwnPointerMove(position: Vector2) {
     updateOwnPointerState(position, true);
   }
 
-  function handleOwnPointerUp(position) {
+  function handleOwnPointerUp(position: Vector2) {
     updateOwnPointerState(position, false);
   }
 
   // Handle pointer data receive
-  const interpolationsRef = useRef({});
+  const interpolationsRef = useRef<Record<string, PointerInterpolation>>({});
   useEffect(() => {
     // TODO: Handle player disconnect while pointer visible
-    function handleSocketPlayerPointer(pointer) {
+    function handleSocketPlayerPointer(pointer: InterpolatedPointerState) {
       const interpolations = interpolationsRef.current;
       const id = pointer.id;
       if (!(id in interpolations)) {
@@ -145,7 +166,7 @@ function NetworkedMapPointer({ session, active }) {
     function animate() {
       request = requestAnimationFrame(animate);
       const time = performance.now();
-      let interpolatedPointerState = {};
+      let interpolatedPointerState: Record<string, PointerState> = {};
       for (let interp of Object.values(interpolationsRef.current)) {
         if (!interp.from || !interp.to) {
           continue;
@@ -192,14 +213,18 @@ function NetworkedMapPointer({ session, active }) {
   return (
     <Group>
       {Object.values(localPointerState).map((pointer) => (
-        <MapPointer
+        <PointerTool
           key={pointer.id}
           active={pointer.id === userId ? active : false}
           position={pointer.position}
           visible={pointer.visible}
-          onPointerDown={pointer.id === userId && handleOwnPointerDown}
-          onPointerMove={pointer.id === userId && handleOwnPointerMove}
-          onPointerUp={pointer.id === userId && handleOwnPointerUp}
+          onPointerDown={
+            pointer.id === userId ? handleOwnPointerDown : undefined
+          }
+          onPointerMove={
+            pointer.id === userId ? handleOwnPointerMove : undefined
+          }
+          onPointerUp={pointer.id === userId ? handleOwnPointerUp : undefined}
           color={pointer.color}
         />
       ))}
diff --git a/src/network/NetworkedParty.js b/src/network/NetworkedParty.tsx
similarity index 77%
rename from src/network/NetworkedParty.js
rename to src/network/NetworkedParty.tsx
index f153b1c..fa24364 100644
--- a/src/network/NetworkedParty.js
+++ b/src/network/NetworkedParty.tsx
@@ -1,9 +1,7 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { useToasts } from "react-toast-notifications";
 
-// Load session for auto complete
-// eslint-disable-next-line no-unused-vars
-import Session from "./Session";
+import Session, { PeerTrackAddedEvent, PeerTrackRemovedEvent } from "./Session";
 import { isStreamStopped, omit } from "../helpers/shared";
 
 import { useParty } from "../contexts/PartyContext";
@@ -16,24 +14,30 @@ import Party from "../components/party/Party";
  * @property {Session} session
  */
 
+type NetworkedPartyProps = { gameId: string; session: Session };
+
 /**
  * @param {NetworkedPartyProps} props
  */
-function NetworkedParty({ gameId, session }) {
+function NetworkedParty({ gameId, session }: NetworkedPartyProps) {
   const partyState = useParty();
-  const [stream, setStream] = useState(null);
-  const [partyStreams, setPartyStreams] = useState({});
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const [partyStreams, setPartyStreams] = useState<Record<string, MediaStream>>(
+    {}
+  );
 
   const { addToast } = useToasts();
 
-  function handleStreamStart(localStream) {
+  function handleStreamStart(localStream: MediaStream) {
     setStream(localStream);
     const tracks = localStream.getTracks();
     for (let track of tracks) {
       // Only add the audio track of the stream to the remote peer
       if (track.kind === "audio") {
         for (let player of Object.values(partyState)) {
-          session.startStreamTo(player.sessionId, track, localStream);
+          if (player.sessionId) {
+            session.startStreamTo(player.sessionId, track, localStream);
+          }
         }
       }
     }
@@ -48,7 +52,9 @@ function NetworkedParty({ gameId, session }) {
         // Only sending audio so only remove the audio track
         if (track.kind === "audio") {
           for (let player of Object.values(partyState)) {
-            session.endStreamTo(player.sessionId, track, localStream);
+            if (player.sessionId) {
+              session.endStreamTo(player.sessionId, track, localStream);
+            }
           }
         }
       }
@@ -57,7 +63,7 @@ function NetworkedParty({ gameId, session }) {
   );
 
   // Keep a reference to players who have just joined to show the joined notification
-  const joinedPlayersRef = useRef([]);
+  const joinedPlayersRef = useRef<string[]>([]);
   useEffect(() => {
     if (joinedPlayersRef.current.length > 0) {
       for (let id of joinedPlayersRef.current) {
@@ -70,7 +76,7 @@ function NetworkedParty({ gameId, session }) {
   }, [partyState, addToast]);
 
   useEffect(() => {
-    function handlePlayerJoined(sessionId) {
+    function handlePlayerJoined(sessionId: string) {
       if (stream) {
         const tracks = stream.getTracks();
         for (let track of tracks) {
@@ -84,20 +90,26 @@ function NetworkedParty({ gameId, session }) {
       joinedPlayersRef.current.push(sessionId);
     }
 
-    function handlePlayerLeft(sessionId) {
+    function handlePlayerLeft(sessionId: string) {
       if (partyState[sessionId]) {
         addToast(`${partyState[sessionId].nickname} left the party`);
       }
     }
 
-    function handlePeerTrackAdded({ peer, stream: remoteStream }) {
+    function handlePeerTrackAdded({
+      peer,
+      stream: remoteStream,
+    }: PeerTrackAddedEvent) {
       setPartyStreams((prevStreams) => ({
         ...prevStreams,
         [peer.id]: remoteStream,
       }));
     }
 
-    function handlePeerTrackRemoved({ peer, stream: remoteStream }) {
+    function handlePeerTrackRemoved({
+      peer,
+      stream: remoteStream,
+    }: PeerTrackRemovedEvent) {
       if (isStreamStopped(remoteStream)) {
         setPartyStreams((prevStreams) => omit(prevStreams, [peer.id]));
       } else {
diff --git a/src/network/Session.js b/src/network/Session.ts
similarity index 55%
rename from src/network/Session.js
rename to src/network/Session.ts
index ce2ad57..de04cc1 100644
--- a/src/network/Session.js
+++ b/src/network/Session.ts
@@ -1,49 +1,33 @@
-import io from "socket.io-client";
+import io, { Socket } from "socket.io-client";
 import msgParser from "socket.io-msgpack-parser";
 import { EventEmitter } from "events";
 
-import Connection from "./Connection";
+import Connection, { DataProgressEvent } from "./Connection";
 
 import { omit } from "../helpers/shared";
 import { logError } from "../helpers/logging";
+import { SignalData } from "simple-peer";
 
 /**
- * @typedef {object} SessionPeer
  * @property {string} id - The socket id of the peer
  * @property {Connection} connection - The actual peer connection
  * @property {boolean} initiator - Is this peer the initiator of the connection
  * @property {boolean} ready - Ready for data to be sent
  */
+export type SessionPeer = {
+  id: string;
+  connection: Connection;
+  initiator: boolean;
+  ready: boolean;
+};
 
-/**
- * @callback peerReply
- * @param {string} id - The id of the event
- * @param {object} data - The data to send
- * @param {string=} channel - The channel to send to
- * @param {string=} chunkId
- */
+export type PeerData = any;
 
-/**
- * Session Status Event - Status of the session has changed
- *
- * @event Session#status
- * @property {"ready"|"joining"|"joined"|"offline"|"reconnecting"|"auth"|"needs_update"} status
- */
+export type PeerReply = (id: string, data: PeerData, chunkId?: string) => void;
 
 /**
  *
  * Handles connections to multiple peers
- *
- * @fires Session#peerConnect
- * @fires Session#peerData
- * @fires Session#peerTrackAdded
- * @fires Session#peerTrackRemoved
- * @fires Session#peerDisconnect
- * @fires Session#peerError
- * @fires Session#status
- * @fires Session#playerJoined
- * @fires Session#playerLeft
- * @fires Session#gameExpired
  */
 class Session extends EventEmitter {
   /**
@@ -51,24 +35,24 @@ class Session extends EventEmitter {
    *
    * @type {io.Socket}
    */
-  socket;
+  socket: Socket = io();
 
   /**
    * A mapping of socket ids to session peers
    *
    * @type {Object.<string, SessionPeer>}
    */
-  peers;
+  peers: Record<string, SessionPeer>;
 
   get id() {
     return this.socket && this.socket.id;
   }
 
-  _iceServers;
+  _iceServers: RTCIceServer[] = [];
 
   // Store party id and password for reconnect
-  _gameId;
-  _password;
+  _gameId: string = "";
+  _password: string = "";
 
   constructor() {
     super();
@@ -82,6 +66,9 @@ class Session extends EventEmitter {
    */
   async connect() {
     try {
+      if (!process.env.REACT_APP_ICE_SERVERS_URL) {
+        return;
+      }
       const response = await fetch(process.env.REACT_APP_ICE_SERVERS_URL);
       if (!response.ok) {
         throw Error("Unable to fetch ICE servers");
@@ -89,6 +76,9 @@ class Session extends EventEmitter {
       const data = await response.json();
       this._iceServers = data.iceServers;
 
+      if (!process.env.REACT_APP_BROKER_URL) {
+        return;
+      }
       this.socket = io(process.env.REACT_APP_BROKER_URL, {
         withCredentials: true,
         parser: msgParser,
@@ -118,13 +108,10 @@ class Session extends EventEmitter {
   /**
    * Send data to a single peer
    *
-   * @param {string} sessionId - The socket id of the player to send to
-   * @param {string} eventId - The id of the event to send
-   * @param {object} data
-   * @param {string=} channel
-   * @param {string=} chunkId
+   * @param sessionId - The socket id of the player to send to
+   * @param eventId - The id of the event to send
    */
-  sendTo(sessionId, eventId, data, channel, chunkId) {
+  sendTo(sessionId: string, eventId: string, data: PeerData, chunkId?: string) {
     if (!(sessionId in this.peers)) {
       if (!this._addPeer(sessionId, true)) {
         return;
@@ -135,14 +122,13 @@ class Session extends EventEmitter {
       this.peers[sessionId].connection.once("connect", () => {
         this.peers[sessionId].connection.sendObject(
           { id: eventId, data },
-          channel,
           chunkId
         );
       });
     } else {
       this.peers[sessionId].connection.sendObject(
         { id: eventId, data },
-        channel
+        chunkId
       );
     }
   }
@@ -154,7 +140,11 @@ class Session extends EventEmitter {
    * @param {MediaStreamTrack} track
    * @param {MediaStream} stream
    */
-  startStreamTo(sessionId, track, stream) {
+  startStreamTo(
+    sessionId: string,
+    track: MediaStreamTrack,
+    stream: MediaStream
+  ) {
     if (!(sessionId in this.peers)) {
       if (!this._addPeer(sessionId, true)) {
         return;
@@ -177,7 +167,7 @@ class Session extends EventEmitter {
    * @param {MediaStreamTrack} track
    * @param {MediaStream} stream
    */
-  endStreamTo(sessionId, track, stream) {
+  endStreamTo(sessionId: string, track: MediaStreamTrack, stream: MediaStream) {
     if (sessionId in this.peers) {
       this.peers[sessionId].connection.removeTrack(track, stream);
     }
@@ -189,7 +179,7 @@ class Session extends EventEmitter {
    * @param {string} gameId - the id of the party to join
    * @param {string} password - the password of the party
    */
-  async joinGame(gameId, password) {
+  async joinGame(gameId: string, password: string) {
     if (typeof gameId !== "string" || typeof password !== "string") {
       console.error(
         "Unable to join game: invalid game ID or password",
@@ -216,7 +206,7 @@ class Session extends EventEmitter {
    * @param {boolean} initiator
    * @returns {boolean} True if peer was added successfully
    */
-  _addPeer(id, initiator) {
+  _addPeer(id: string, initiator: boolean): boolean {
     try {
       const connection = new Connection({
         initiator,
@@ -229,113 +219,84 @@ class Session extends EventEmitter {
 
       const peer = { id, connection, initiator, ready: false };
 
-      function reply(id, data, channel, chunkId) {
-        peer.connection.sendObject({ id, data }, channel, chunkId);
-      }
+      const reply: PeerReply = (id, data, chunkId) => {
+        peer.connection.sendObject({ id, data }, chunkId);
+      };
 
-      function handleSignal(signal) {
+      const handleSignal = (signal: SignalData) => {
         this.socket.emit("signal", JSON.stringify({ to: peer.id, signal }));
-      }
+      };
 
-      function handleConnect() {
+      const handleConnect = () => {
         if (peer.id in this.peers) {
           this.peers[peer.id].ready = true;
         }
-        /**
-         * Peer Connect Event - A peer has connected
-         *
-         * @event Session#peerConnect
-         * @type {object}
-         * @property {SessionPeer} peer
-         * @property {peerReply} reply
-         */
-        this.emit("peerConnect", { peer, reply });
-      }
+        const peerConnectEvent: PeerConnectEvent = {
+          peer,
+          reply,
+        };
+        this.emit("peerConnect", peerConnectEvent);
+      };
 
-      function handleDataComplete(data) {
-        /**
-         * Peer Data Event - Data received by a peer
-         *
-         * @event Session#peerData
-         * @type {object}
-         * @property {SessionPeer} peer
-         * @property {string} id
-         * @property {object} data
-         * @property {peerReply} reply
-         */
-        this.emit("peerData", {
+      const handleDataComplete = (data: any) => {
+        const peerDataEvent: PeerDataEvent = {
           peer,
           id: data.id,
           data: data.data,
-          reply,
-        });
-      }
+          reply: reply,
+        };
+        this.emit("peerData", peerDataEvent);
+      };
 
-      function handleDataProgress({ id, count, total }) {
-        this.emit("peerDataProgress", {
+      const handleDataProgress = ({ id, count, total }: DataProgressEvent) => {
+        const peerDataProgressEvent: PeerDataProgressEvent = {
           peer,
           id,
           count,
           total,
           reply,
-        });
-      }
+        };
 
-      function handleTrack(track, stream) {
-        /**
-         * Peer Track Added Event - A `MediaStreamTrack` was added by a peer
-         *
-         * @event Session#peerTrackAdded
-         * @type {object}
-         * @property {SessionPeer} peer
-         * @property {MediaStreamTrack} track
-         * @property {MediaStream} stream
-         */
-        this.emit("peerTrackAdded", { peer, track, stream });
+        this.emit("peerDataProgress", peerDataProgressEvent);
+      };
+
+      const handleTrack = (track: MediaStreamTrack, stream: MediaStream) => {
+        const peerTrackAddedEvent: PeerTrackAddedEvent = {
+          peer,
+          track,
+          stream,
+        };
+        this.emit("peerTrackAdded", peerTrackAddedEvent);
         track.addEventListener("mute", () => {
-          /**
-           * Peer Track Removed Event - A `MediaStreamTrack` was removed by a peer
-           *
-           * @event Session#peerTrackRemoved
-           * @type {object}
-           * @property {SessionPeer} peer
-           * @property {MediaStreamTrack} track
-           * @property {MediaStream} stream
-           */
-          this.emit("peerTrackRemoved", { peer, track, stream });
+          const peerTrackRemovedEvent: PeerTrackRemovedEvent = {
+            peer,
+            track,
+            stream,
+          };
+          this.emit("peerTrackRemoved", peerTrackRemovedEvent);
         });
-      }
+      };
 
-      function handleClose() {
-        /**
-         * Peer Disconnect Event - A peer has disconnected
-         *
-         * @event Session#peerDisconnect
-         * @type {object}
-         * @property {SessionPeer} peer
-         */
-        this.emit("peerDisconnect", { peer });
+      const handleClose = () => {
+        const peerDisconnectEvent: PeerDisconnectEvent = { peer };
+        this.emit("peerDisconnect", peerDisconnectEvent);
         if (peer.id in this.peers) {
           peer.connection.destroy();
           this.peers = omit(this.peers, [peer.id]);
         }
-      }
+      };
 
-      function handleError(error) {
-        /**
-         * Peer Error Event - An error occured with a peer connection
-         *
-         * @event Session#peerError
-         * @type {object}
-         * @property {SessionPeer} peer
-         * @property {Error} error
-         */
-        this.emit("peerError", { peer, error });
+      const handleError = (error: PeerError) => {
+        const peerErrorEvent: PeerErrorEvent = {
+          peer,
+          error,
+        };
+        this.emit("peerError", peerErrorEvent);
         if (peer.id in this.peers) {
           peer.connection.destroy();
           this.peers = omit(this.peers, [peer.id]);
         }
-      }
+      };
 
       peer.connection.on("signal", handleSignal.bind(this));
       peer.connection.on("connect", handleConnect.bind(this));
@@ -363,31 +324,14 @@ class Session extends EventEmitter {
   }
 
   _handleGameExpired() {
-    /**
-     * Game Expired Event - A joining game has expired
-     *
-     * @event Session#gameExpired
-     */
     this.emit("gameExpired");
   }
 
-  _handlePlayerJoined(id) {
-    /**
-     * Player Joined Event - A player has joined the game
-     *
-     * @event Session#playerJoined
-     * @property {string} id
-     */
+  _handlePlayerJoined(id: string) {
     this.emit("playerJoined", id);
   }
 
-  _handlePlayerLeft(id) {
-    /**
-     * Player Left Event - A player has left the game
-     *
-     * @event Session#playerLeft
-     * @property {string} id
-     */
+  _handlePlayerLeft(id: string) {
     this.emit("playerLeft", id);
     if (id in this.peers) {
       this.peers[id].connection.destroy();
@@ -395,7 +339,7 @@ class Session extends EventEmitter {
     }
   }
 
-  _handleSignal(data) {
+  _handleSignal(data: { from: string; signal: SignalData }) {
     const { from, signal } = data;
     if (!(from in this.peers)) {
       if (!this._addPeer(from, false)) {
@@ -429,14 +373,96 @@ class Session extends EventEmitter {
   }
 
   _handleForceUpdate() {
-    /**
-     * Force Update Event - An update has been released
-     *
-     * @event Session#forceUpdate
-     */
     this.socket.disconnect();
     this.emit("status", "needs_update");
   }
 }
 
+export type PeerConnectEvent = {
+  peer: SessionPeer;
+  reply: PeerReply;
+};
+export type PeerConnectEventHandler = (event: PeerConnectEvent) => void;
+
+export type PeerDataEvent = {
+  peer: SessionPeer;
+  id: string;
+  data: PeerData;
+  reply: PeerReply;
+};
+export type PeerDataEventHandler = (event: PeerDataEvent) => void;
+
+export type PeerDataProgressEvent = {
+  peer: SessionPeer;
+  id: string;
+  count: number;
+  total: number;
+  reply: PeerReply;
+};
+export type PeerDataProgressEventHandler = (
+  event: PeerDataProgressEvent
+) => void;
+
+export type PeerTrackAddedEvent = {
+  peer: SessionPeer;
+  track: MediaStreamTrack;
+  stream: MediaStream;
+};
+export type PeerTrackAddedEventHandler = (event: PeerTrackAddedEvent) => void;
+
+export type PeerTrackRemovedEvent = {
+  peer: SessionPeer;
+  track: MediaStreamTrack;
+  stream: MediaStream;
+};
+export type PeerTrackRemovedEventHandler = (
+  event: PeerTrackRemovedEvent
+) => void;
+
+export type PeerDisconnectEvent = { peer: SessionPeer };
+export type PeerDisconnectEventHandler = (event: PeerDisconnectEvent) => void;
+
+export type PeerError = Error & { code: string };
+export type PeerErrorEvent = { peer: SessionPeer; error: PeerError };
+export type PeerErrorEventHandler = (event: PeerErrorEvent) => void;
+
+export type SessionStatus =
+  | "ready"
+  | "joining"
+  | "joined"
+  | "offline"
+  | "reconnecting"
+  | "auth"
+  | "needs_update";
+export type SessionStatusHandler = (status: SessionStatus) => void;
+
+export type PlayerJoinedHandler = (id: string) => void;
+export type PlayerLeftHandler = (id: string) => void;
+export type GameExpiredHandler = () => void;
+
+declare interface Session {
+  /** Peer Connect Event - A peer has connected */
+  on(event: "peerConnect", listener: PeerConnectEventHandler): this;
+  /** Peer Data Event - Data received by a peer */
+  on(event: "peerData", listener: PeerDataEventHandler): this;
+  /** Peer Data Progress Event - Part of some data received by a peer */
+  on(event: "peerDataProgress", listener: PeerDataProgressEventHandler): this;
+  /** Peer Track Added Event - A `MediaStreamTrack` was added by a peer */
+  on(event: "peerTrackAdded", listener: PeerTrackAddedEventHandler): this;
+  /** Peer Track Removed Event - A `MediaStreamTrack` was removed by a peer */
+  on(event: "peerTrackRemoved", listener: PeerTrackRemovedEventHandler): this;
+  /** Peer Disconnect Event - A peer has disconnected */
+  on(event: "peerDisconnect", listener: PeerDisconnectEventHandler): this;
+  /** Peer Error Event - An error occured with a peer connection */
+  on(event: "peerError", listener: PeerErrorEventHandler): this;
+  /** Session Status Event - Status of the session has changed */
+  on(event: "status", listener: SessionStatusHandler): this;
+  /** Player Joined Event - A player has joined the game */
+  on(event: "playerJoined", listener: PlayerJoinedHandler): this;
+  /** Player Left Event - A player has left the game */
+  on(event: "playerLeft", listener: PlayerLeftHandler): this;
+  /** Game Expired Event - A joining game has expired */
+  on(event: "gameExpired", listener: GameExpiredHandler): this;
+}
+
 export default Session;
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/routes/About.js b/src/routes/About.tsx
similarity index 98%
rename from src/routes/About.js
rename to src/routes/About.tsx
index 48cc76a..5b62508 100644
--- a/src/routes/About.js
+++ b/src/routes/About.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Flex, Text, Link as ExternalLink } from "theme-ui";
 
 import Footer from "../components/Footer";
diff --git a/src/routes/Donate.js b/src/routes/Donate.tsx
similarity index 79%
rename from src/routes/Donate.js
rename to src/routes/Donate.tsx
index 20da3f5..718a1a0 100644
--- a/src/routes/Donate.js
+++ b/src/routes/Donate.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { ChangeEvent, FormEvent, useEffect, useState } from "react";
 import {
   Box,
   Flex,
@@ -16,37 +16,44 @@ import ErrorBanner from "../components/banner/ErrorBanner";
 import LoadingOverlay from "../components/LoadingOverlay";
 
 import { logError } from "../helpers/logging";
+import { Stripe } from "@stripe/stripe-js";
 
-const prices = [
+type Price = { price?: string; name: string; value: number };
+
+const prices: Price[] = [
   { price: "$5.00", name: "Small", value: 5 },
   { price: "$15.00", name: "Medium", value: 15 },
   { price: "$30.00", name: "Large", value: 30 },
 ];
+
 function Donate() {
   const location = useLocation();
   const query = new URLSearchParams(location.search);
   const hasDonated = query.has("success");
 
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+  const [error, setError] = useState<Error | undefined>(undefined);
 
-  const [stripe, setStripe] = useState();
+  const [stripe, setStripe] = useState<Stripe>();
   useEffect(() => {
     import("@stripe/stripe-js").then(({ loadStripe }) => {
-      loadStripe(process.env.REACT_APP_STRIPE_API_KEY)
+      loadStripe(process.env.REACT_APP_STRIPE_API_KEY as string)
         .then((stripe) => {
-          setStripe(stripe);
-          setLoading(false);
+          if (stripe) {
+            setStripe(stripe);
+            setLoading(false);
+          }
         })
         .catch((error) => {
           logError(error);
+          // TODO: check setError -> cannot work with value as a string
           setError(error.message);
           setLoading(false);
         });
     });
   }, []);
 
-  async function handleSubmit(event) {
+  async function handleSubmit(event: FormEvent<HTMLDivElement>) {
     event.preventDefault();
     if (loading) {
       return;
@@ -64,20 +71,22 @@ function Donate() {
       }
     );
     const session = await response.json();
-    const result = await stripe.redirectToCheckout({ sessionId: session.id });
+    const result = await stripe?.redirectToCheckout({ sessionId: session.id });
 
-    if (result.error) {
-      setError(result.error.message);
+    if (result?.error) {
+      const stripeError = new Error(result.error.message);
+      setError(stripeError);
     }
   }
 
   const [selectedPrice, setSelectedPrice] = useState("Medium");
   const [value, setValue] = useState(15);
 
-  function handlePriceChange(price) {
+  function handlePriceChange(price: Price) {
     setValue(price.value);
     setSelectedPrice(price.name);
   }
+
   return (
     <Flex
       sx={{
@@ -149,7 +158,9 @@ function Donate() {
               name="donation"
               min={1}
               value={value}
-              onChange={(e) => setValue(e.target.value)}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                setValue(parseInt(e.target.value))
+              }
             />
           </Box>
         )}
@@ -159,7 +170,7 @@ function Donate() {
       </Flex>
       <Footer />
       {loading && <LoadingOverlay />}
-      <ErrorBanner error={error} onRequestClose={() => setError()} />
+      <ErrorBanner error={error} onRequestClose={() => setError(undefined)} />
     </Flex>
   );
 }
diff --git a/src/routes/FAQ.js b/src/routes/FAQ.tsx
similarity index 98%
rename from src/routes/FAQ.js
rename to src/routes/FAQ.tsx
index 29c90e7..a1c1d1b 100644
--- a/src/routes/FAQ.js
+++ b/src/routes/FAQ.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Flex, Text, Box } from "theme-ui";
 import raw from "raw.macro";
 
diff --git a/src/routes/Game.js b/src/routes/Game.tsx
similarity index 90%
rename from src/routes/Game.js
rename to src/routes/Game.tsx
index 78043b3..9d9e20e 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.tsx
@@ -1,6 +1,7 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Flex, Box, Text } from "theme-ui";
 import { useParams } from "react-router-dom";
+import Konva from "konva";
 
 import Banner from "../components/banner/Banner";
 import ReconnectBanner from "../components/banner/ReconnectBanner";
@@ -27,15 +28,15 @@ import { MapLoadingProvider } from "../contexts/MapLoadingContext";
 import NetworkedMapAndTokens from "../network/NetworkedMapAndTokens";
 import NetworkedParty from "../network/NetworkedParty";
 
-import Session from "../network/Session";
+import Session, { PeerErrorEvent, SessionStatus } from "../network/Session";
 
 function Game() {
-  const { id: gameId } = useParams();
+  const { id: gameId }: { id: string } = useParams();
   const { password } = useAuth();
   const { databaseStatus } = useDatabase();
 
   const [session] = useState(new Session());
-  const [sessionStatus, setSessionStatus] = useState();
+  const [sessionStatus, setSessionStatus] = useState<SessionStatus>();
 
   useEffect(() => {
     async function connect() {
@@ -49,9 +50,9 @@ function Game() {
   }, [session]);
 
   // Handle session errors
-  const [peerError, setPeerError] = useState(null);
+  const [peerError, setPeerError] = useState<string | null>(null);
   useEffect(() => {
-    function handlePeerError({ error }) {
+    function handlePeerError({ error }: PeerErrorEvent) {
       if (error.code === "ERR_WEBRTC_SUPPORT") {
         setPeerError("WebRTC not supported.");
       } else if (error.code === "ERR_CREATE_OFFER") {
@@ -65,7 +66,7 @@ function Game() {
   }, [session]);
 
   useEffect(() => {
-    function handleStatus(status) {
+    function handleStatus(status: SessionStatus) {
       setSessionStatus(status);
     }
 
@@ -99,7 +100,7 @@ function Game() {
     }
   }, [gameId, password, databaseStatus, session, sessionStatus]);
 
-  function handleAuthSubmit(newPassword) {
+  function handleAuthSubmit(newPassword: string) {
     if (databaseStatus === "loaded" || databaseStatus === "disabled") {
       session.joinGame(gameId, newPassword);
     }
@@ -107,7 +108,7 @@ function Game() {
 
   // A ref to the Konva stage
   // the ref will be assigned in the MapInteraction component
-  const mapStageRef = useRef();
+  const mapStageRef = useRef<Konva.Stage | null>(null);
 
   return (
     <AssetsProvider>
diff --git a/src/routes/Home.js b/src/routes/Home.tsx
similarity index 97%
rename from src/routes/Home.js
rename to src/routes/Home.tsx
index 17c93f5..4747936 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Flex, Button, Image, Text, IconButton, Link } from "theme-ui";
 import { useHistory } from "react-router-dom";
 
@@ -23,9 +23,8 @@ import owlington from "../images/Owlington.png";
 function Home() {
   const [isStartModalOpen, setIsStartModalOpen] = useState(false);
   const [isJoinModalOpen, setIsJoinModalOpen] = useState(false);
-  const [isGettingStartedModalOpen, setIsGettingStartedModalOpen] = useState(
-    false
-  );
+  const [isGettingStartedModalOpen, setIsGettingStartedModalOpen] =
+    useState(false);
 
   // Reset password on visiting home
   const { setPassword } = useAuth();
@@ -80,6 +79,7 @@ function Home() {
         </Text>
         <Button
           as="a"
+          // @ts-ignore
           href="https://patreon.com/owlbearrodeo"
           mt={4}
           mx={2}
@@ -94,6 +94,7 @@ function Home() {
         </Button>
         <Button
           as="a"
+          // @ts-ignore
           href="/donate"
           mt={2}
           mb={4}
diff --git a/src/routes/HowTo.js b/src/routes/HowTo.tsx
similarity index 99%
rename from src/routes/HowTo.js
rename to src/routes/HowTo.tsx
index ff445b9..67690bb 100644
--- a/src/routes/HowTo.js
+++ b/src/routes/HowTo.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Flex, Text } from "theme-ui";
 import raw from "raw.macro";
 import { useLocation } from "react-router-dom";
diff --git a/src/routes/ReleaseNotes.js b/src/routes/ReleaseNotes.tsx
similarity index 94%
rename from src/routes/ReleaseNotes.js
rename to src/routes/ReleaseNotes.tsx
index 54633f1..1d240a0 100644
--- a/src/routes/ReleaseNotes.js
+++ b/src/routes/ReleaseNotes.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Flex, Text } from "theme-ui";
 import raw from "raw.macro";
 import { useLocation } from "react-router-dom";
@@ -27,6 +26,7 @@ const v170 = raw("../docs/releaseNotes/v1.7.0.md");
 const v180 = raw("../docs/releaseNotes/v1.8.0.md");
 const v181 = raw("../docs/releaseNotes/v1.8.1.md");
 const v190 = raw("../docs/releaseNotes/v1.9.0.md");
+const v1100 = raw("../docs/releaseNotes/v1.10.0.md");
 
 function ReleaseNotes() {
   const location = useLocation();
@@ -51,8 +51,13 @@ function ReleaseNotes() {
         <Text mb={2} variant="heading" as="h1" sx={{ fontSize: 5 }}>
           Release Notes
         </Text>
+        <div id="v1100">
+          <Accordion heading="v1.10.0" defaultOpen>
+            <Markdown source={v1100} />
+          </Accordion>
+        </div>
         <div id="v190">
-          <Accordion heading="v1.9.0" defaultOpen>
+          <Accordion heading="v1.9.0" defaultOpen={location.hash === "#v190"}>
             <Markdown source={v190} />
           </Accordion>
         </div>
diff --git a/src/serviceWorker.js b/src/serviceWorker.ts
similarity index 92%
rename from src/serviceWorker.js
rename to src/serviceWorker.ts
index c4838eb..0d79aeb 100644
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.ts
@@ -20,9 +20,13 @@ const isLocalhost = Boolean(
     )
 );
 
-export function register(config) {
+export function register(config: any) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
+    if (!process.env.PUBLIC_URL) {
+      // TODO: handle is PUBLIC_URL has not been set
+      return; 
+    }
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
@@ -54,9 +58,9 @@ export function register(config) {
   }
 }
 
-function registerValidSW(swUrl, config) {
+function registerValidSW(swUrl: string | URL, config: any) {
   navigator.serviceWorker
-    .register(swUrl)
+    .register(swUrl as string)
     .then(registration => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
@@ -98,7 +102,8 @@ function registerValidSW(swUrl, config) {
     });
 }
 
-function checkValidServiceWorker(swUrl, config) {
+// TODO: handle swUrl -> type has to be handled as RequestInfo OR string | URL
+function checkValidServiceWorker(swUrl: any, config: any) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
     headers: { 'Service-Worker': 'script' }
diff --git a/src/settings.js b/src/settings.ts
similarity index 72%
rename from src/settings.js
rename to src/settings.ts
index 9264056..3666b06 100644
--- a/src/settings.js
+++ b/src/settings.ts
@@ -1,6 +1,6 @@
 import Settings from "./helpers/Settings";
 
-function loadVersions(settings) {
+function loadVersions(settings: Settings) {
   settings.version(1, () => ({
     fog: {
       type: "polygon",
@@ -28,17 +28,17 @@ function loadVersions(settings) {
     },
   }));
   // v1.5.2 - Added full screen support for map and label size
-  settings.version(2, (prev) => ({
+  settings.version(2, (prev: any) => ({
     ...prev,
     map: { fullScreen: false, labelSize: 1 },
   }));
   // v1.7.0 - Added game password
-  settings.version(3, (prev) => ({
+  settings.version(3, (prev: any) => ({
     ...prev,
     game: { usePassword: true },
   }));
   // v1.8.0 - Added pointer color, grid snapping sensitivity and remove measure
-  settings.version(4, (prev) => {
+  settings.version(4, (prev: any) => {
     let newSettings = {
       ...prev,
       pointer: { color: "red" },
@@ -48,22 +48,35 @@ function loadVersions(settings) {
     return newSettings;
   });
   // v1.8.0 - Removed edge snapping for multilayer
-  settings.version(5, (prev) => {
+  settings.version(5, (prev: any) => {
     let newSettings = { ...prev };
     delete newSettings.fog.useEdgeSnapping;
     newSettings.fog.multilayer = false;
     return newSettings;
   });
   // v1.8.1 - Add show guides toggle
-  settings.version(6, (prev) => ({
+  settings.version(6, (prev: any) => ({
     ...prev,
     fog: { ...prev.fog, showGuides: true },
   }));
   // v1.8.1 - Add fog edit opacity
-  settings.version(7, (prev) => ({
+  settings.version(7, (prev: any) => ({
     ...prev,
     fog: { ...prev.fog, editOpacity: 0.5 },
   }));
+  // v1.10.0 - Add select tool
+  settings.version(8, (prev: any) => ({
+    ...prev,
+    select: { type: "rectangle" },
+  }));
+  // v1.10.0 - Add use shape fill setting
+  settings.version(9, (prev: any) => ({
+    ...prev,
+    drawing: {
+      ...prev.drawing,
+      useShapeFill: true,
+    },
+  }));
 }
 
 export function getSettings() {
diff --git a/src/shortcuts.js b/src/shortcuts.ts
similarity index 70%
rename from src/shortcuts.js
rename to src/shortcuts.ts
index 35eea4a..6433aa3 100644
--- a/src/shortcuts.js
+++ b/src/shortcuts.ts
@@ -2,7 +2,7 @@
  * @param {KeyboardEvent} event
  * @returns {boolean}
  */
-function hasModifier(event) {
+function hasModifier(event: KeyboardEvent): boolean {
   return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 }
 
@@ -12,55 +12,46 @@ function hasModifier(event) {
  * @param {string} key
  * @returns {boolean}
  */
-function singleKey(event, key) {
+function singleKey(event: KeyboardEvent, key: string): boolean {
   return (
     !hasModifier(event) &&
     (event.key === key || event.key === key.toUpperCase())
   );
 }
 
-/**
- * @param {Keyboard} event
- */
-function undo(event) {
+function undo(event: KeyboardEvent): boolean {
   const { key, ctrlKey, metaKey, shiftKey } = event;
   return (key === "z" || key === "Z") && (ctrlKey || metaKey) && !shiftKey;
 }
 
-/**
- * @param {Keyboard} event
- */
-function redo(event) {
+function redo(event: KeyboardEvent): boolean {
   const { key, ctrlKey, metaKey, shiftKey } = event;
   return (key === "z" || key === "Z") && (ctrlKey || metaKey) && shiftKey;
 }
 
-/**
- * @param {Keyboard} event
- */
-function zoomIn(event) {
+function copy(event: KeyboardEvent): boolean {
+  const { key, ctrlKey, metaKey, shiftKey } = event;
+  return (key === "c" || key === "C") && (ctrlKey || metaKey) && !shiftKey;
+}
+
+function paste(event: KeyboardEvent): boolean {
+  const { key, ctrlKey, metaKey, shiftKey } = event;
+  return (key === "v" || key === "V") && (ctrlKey || metaKey) && !shiftKey;
+}
+
+function zoomIn(event: KeyboardEvent): boolean {
   const { key, ctrlKey, metaKey } = event;
   return (key === "=" || key === "+") && !ctrlKey && !metaKey;
 }
 
-/**
- * @param {Keyboard} event
- */
-function zoomOut(event) {
+function zoomOut(event: KeyboardEvent): boolean {
   const { key, ctrlKey, metaKey } = event;
   return (key === "-" || key === "_") && !ctrlKey && !metaKey;
 }
 
-/**
- * @callback shortcut
- * @param {KeyboardEvent} event
- * @returns {boolean}
- */
+type Shortcut = (event: KeyboardEvent) => boolean;
 
-/**
- * @type {Object.<string, shortcut>}
- */
-const shortcuts = {
+const shortcuts: Record<string, Shortcut> = {
   // Tools
   move: (event) => singleKey(event, " "),
   moveTool: (event) => singleKey(event, "w"),
@@ -83,6 +74,7 @@ const shortcuts = {
   drawTriangle: (event) => singleKey(event, "t"),
   drawErase: (event) => singleKey(event, "e"),
   drawBlend: (event) => singleKey(event, "o"),
+  drawFill: (event) => singleKey(event, "g"),
   // Fog tool
   fogPolygon: (event) => singleKey(event, "p"),
   fogRectangle: (event) => singleKey(event, "r"),
@@ -94,6 +86,10 @@ const shortcuts = {
   fogCut: (event) => singleKey(event, "c"),
   fogFinishPolygon: ({ key }) => key === "Enter",
   fogCancelPolygon: ({ key }) => key === "Escape",
+  // Select tool
+  selectTool: (event) => singleKey(event, "s"),
+  selectPath: (event) => singleKey(event, "l"),
+  selectRect: (event) => singleKey(event, "r"),
   // Stage interaction
   stageZoomIn: zoomIn,
   stageZoomOut: zoomOut,
@@ -104,7 +100,11 @@ const shortcuts = {
   // Common
   undo,
   redo,
+  copy,
+  paste,
   delete: ({ key }) => key === "Backspace" || key === "Delete",
+  disableSnapping: ({ key }) => key === "Control" || key === "Meta",
+  duplicate: ({ key }) => key === "Alt",
 };
 
 export default shortcuts;
diff --git a/src/theme.js b/src/theme.ts
similarity index 97%
rename from src/theme.js
rename to src/theme.ts
index b3baef4..8ec9e70 100644
--- a/src/theme.js
+++ b/src/theme.ts
@@ -1,4 +1,7 @@
 const theme = {
+  config: {
+    useColorSchemeMediaQuery: false,
+  },
   colors: {
     text: "hsl(210, 50%, 96%)",
     background: "hsl(230, 25%, 18%)",
@@ -157,9 +160,10 @@ const theme = {
     ".comment": {
       fontStyle: "italic",
     },
-    ".property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable": {
-      color: "purple",
-    },
+    ".property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable":
+      {
+        color: "purple",
+      },
     ".atrule,.attr-value,.keyword": {
       color: "primary",
     },
diff --git a/src/tokens/index.js b/src/tokens/index.ts
similarity index 91%
rename from src/tokens/index.js
rename to src/tokens/index.ts
index baf607d..68a70c7 100644
--- a/src/tokens/index.js
+++ b/src/tokens/index.ts
@@ -1,4 +1,5 @@
 import Case from "case";
+import { DefaultToken } from "../types/Token";
 
 import aberration from "./Aberration.png";
 import artificer from "./Artificer.png";
@@ -67,7 +68,7 @@ export const tokenSources = {
   undead,
 };
 
-function getDefaultTokenSize(key) {
+function getDefaultTokenSize(key: string) {
   switch (key) {
     case "dragon":
     case "elemental":
@@ -80,13 +81,13 @@ function getDefaultTokenSize(key) {
   }
 }
 
-export function getDefaultTokens(userId) {
+export function getDefaultTokens(userId: string): DefaultToken[] {
   const tokenKeys = Object.keys(tokenSources);
-  let tokens = [];
+  let tokens: DefaultToken[] = [];
   for (let i = 0; i < tokenKeys.length; i++) {
     const key = tokenKeys[i];
     const name = Case.capital(key);
-    const token = {
+    const token: DefaultToken = {
       key,
       name,
       id: `__default-${name}`,
diff --git a/src/types/Action.ts b/src/types/Action.ts
new file mode 100644
index 0000000..0832e29
--- /dev/null
+++ b/src/types/Action.ts
@@ -0,0 +1,5 @@
+/**
+ * Shared types for the Action class
+ */
+
+export type ID = { id: string };
diff --git a/src/types/Asset.ts b/src/types/Asset.ts
new file mode 100644
index 0000000..cc452cb
--- /dev/null
+++ b/src/types/Asset.ts
@@ -0,0 +1,12 @@
+export type Asset = {
+  file: Uint8Array;
+  width: number;
+  height: number;
+  id: string;
+  owner: string;
+  mime: string;
+};
+
+export type AssetManifestAsset = Pick<Asset, "id" | "owner">;
+export type AssetManifestAssets = Record<string, AssetManifestAsset>;
+export type AssetManifest = { mapId: string; assets: AssetManifestAssets };
diff --git a/src/types/Dice.ts b/src/types/Dice.ts
new file mode 100644
index 0000000..1bb51b6
--- /dev/null
+++ b/src/types/Dice.ts
@@ -0,0 +1,51 @@
+import { InstancedMesh, Mesh } from "@babylonjs/core";
+import Dice from "../dice/Dice";
+
+export type DiceType = "d4" | "d6" | "d8" | "d10" | "d12" | "d20" | "d100";
+
+export type DiceRoll = {
+  type: DiceType;
+  roll: number | "unknown";
+};
+
+export type DiceMesh = {
+  type: DiceType;
+  instance: InstancedMesh;
+  asleep: boolean;
+  sleepTimeout?: NodeJS.Timeout;
+  d10Instance?: InstancedMesh;
+};
+
+export type DiceState = {
+  share: boolean;
+  rolls: DiceRoll[];
+};
+
+export type DefaultDice = {
+  key: string;
+  name: string;
+  class: typeof Dice;
+  preview: string;
+};
+
+export type BaseDiceTextureSources = {
+  albedo: string;
+  normal: string;
+  metalRoughness: string;
+};
+
+export type DiceMeshes = Record<DiceType, Mesh>;
+
+export function isDiceMeshes(
+  meshes: Partial<DiceMeshes>
+): meshes is DiceMeshes {
+  return (
+    !!meshes.d4 &&
+    !!meshes.d6 &&
+    !!meshes.d8 &&
+    !!meshes.d10 &&
+    !!meshes.d12 &&
+    !!meshes.d20 &&
+    !!meshes.d100
+  );
+}
diff --git a/src/types/Drawing.ts b/src/types/Drawing.ts
new file mode 100644
index 0000000..f0c0713
--- /dev/null
+++ b/src/types/Drawing.ts
@@ -0,0 +1,95 @@
+import Vector2 from "../helpers/Vector2";
+import { Color } from "../helpers/colors";
+
+export type DrawingToolType =
+  | "brush"
+  | "paint"
+  | "line"
+  | "rectangle"
+  | "circle"
+  | "triangle"
+  | "erase";
+
+export type DrawingToolSettings = {
+  type: DrawingToolType;
+  color: Color;
+  useBlending: boolean;
+  useShapeFill: boolean;
+};
+
+export type PointsData = {
+  points: Vector2[];
+};
+
+export type RectData = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type CircleData = {
+  x: number;
+  y: number;
+  radius: number;
+};
+
+export type ShapeData = PointsData | RectData | CircleData;
+
+export type BaseDrawing = {
+  blend: boolean;
+  color: Color;
+  id: string;
+  strokeWidth: number;
+};
+
+export type BaseShape = BaseDrawing & {
+  type: "shape";
+};
+
+export type Line = BaseShape & {
+  shapeType: "line";
+  data: PointsData;
+};
+
+export type Rectangle = BaseShape & {
+  shapeType: "rectangle";
+  data: RectData;
+};
+
+export type Circle = BaseShape & {
+  shapeType: "circle";
+  data: CircleData;
+};
+
+export type Triangle = BaseShape & {
+  shapeType: "triangle";
+  data: PointsData;
+};
+
+export type ShapeType =
+  | Line["shapeType"]
+  | Rectangle["shapeType"]
+  | Circle["shapeType"]
+  | Triangle["shapeType"];
+
+export type Shape = Line | Rectangle | Circle | Triangle;
+
+export type Path = BaseDrawing & {
+  type: "path";
+  pathType: "fill" | "stroke";
+  data: PointsData;
+};
+
+export type Drawing = Shape | Path;
+
+export function drawingToolIsShape(type: DrawingToolType): type is ShapeType {
+  return (
+    type === "line" ||
+    type === "rectangle" ||
+    type === "circle" ||
+    type === "triangle"
+  );
+}
+
+export type DrawingState = Record<string, Drawing>;
diff --git a/src/types/Events.ts b/src/types/Events.ts
new file mode 100644
index 0000000..ad4a825
--- /dev/null
+++ b/src/types/Events.ts
@@ -0,0 +1,83 @@
+import Konva from "konva";
+import { DefaultDice, DiceRoll } from "./Dice";
+import { Map } from "./Map";
+import { MapState } from "./MapState";
+import { Note } from "./Note";
+import { Timer } from "./Timer";
+import { Token } from "./Token";
+import { TokenState } from "./TokenState";
+
+export type MapChangeEventHandler = (
+  map: Map | null,
+  mapState: MapState | null
+) => void;
+export type MapResetEventHandler = (newState: MapState) => void;
+export type MapSettingsChangeEventHandler = (change: Partial<Map>) => void;
+export type MapStateSettingsChangeEventHandler = (
+  change: Partial<MapState>
+) => void;
+
+export type DiceSelectEventHandler = (dice: DefaultDice) => void;
+
+export type RequestCloseEventHandler = () => void;
+
+export type TokensStateCreateHandler = (states: TokenState[]) => void;
+export type TokenStateRemoveHandler = (tokenStateIds: string[]) => void;
+export type TokenStateChangeEventHandler = (
+  changes: Record<string, Partial<TokenState>>
+) => void;
+export type TokenMenuOpenChangeEventHandler = (
+  tokenStateId: string,
+  tokenImage: Konva.Node,
+  focus: boolean
+) => void;
+export type TokenMenuCloseChangeEventHandler = () => void;
+export type TokenSettingsChangeEventHandler = (change: Partial<Token>) => void;
+export type TokenDragEventHandler = (
+  event: Konva.KonvaEventObject<DragEvent>,
+  tokenStateId: string,
+  attachedTokenStateIds: string[]
+) => void;
+
+export type NoteCreateEventHander = (notes: Note[]) => void;
+export type NoteRemoveEventHander = (noteIds: string[]) => void;
+export type NoteChangeEventHandler = (
+  changes: Record<string, Partial<Note>>
+) => void;
+export type NoteMenuOpenEventHandler = (
+  noteId: string,
+  noteNode: Konva.Node,
+  focus: boolean
+) => void;
+export type NoteMenuCloseEventHandler = () => void;
+export type NoteDragEventHandler = (
+  event: Konva.KonvaEventObject<DragEvent>,
+  noteId: string
+) => void;
+
+export type DiceShareChangeEventHandler = (share: boolean) => void;
+export type DiceRollsChangeEventHandler = (newRolls: DiceRoll[]) => void;
+
+export type StreamStartEventHandler = (stream: MediaStream) => void;
+export type StreamEndEventHandler = (stream: MediaStream) => void;
+
+export type TimerStartEventHandler = (event: Timer) => void;
+export type TimerStopEventHandler = () => void;
+
+export type SelectionItemsChangeEventHandler = (
+  tokenChanges: Record<string, Partial<TokenState>>,
+  noteChanges: Record<string, Partial<Note>>
+) => void;
+export type SelectionItemsRemoveEventHandler = (
+  tokenStateIds: string[],
+  noteIds: string[]
+) => void;
+export type SelectionItemsCreateEventHandler = (
+  tokenStates: TokenState[],
+  notes: Note[]
+) => void;
+
+export type CustomTransformEventHandler = (
+  event: Konva.KonvaEventObject<Event>,
+  attachments: Konva.Node[]
+) => void;
diff --git a/src/types/Fog.ts b/src/types/Fog.ts
new file mode 100644
index 0000000..9a5ab54
--- /dev/null
+++ b/src/types/Fog.ts
@@ -0,0 +1,32 @@
+import Vector2 from "../helpers/Vector2";
+import { Color } from "../helpers/colors";
+
+export type FogToolType =
+  | "polygon"
+  | "rectangle"
+  | "brush"
+  | "toggle"
+  | "remove";
+
+export type FogToolSettings = {
+  type: FogToolType;
+  multilayer: boolean;
+  preview: boolean;
+  useFogCut: boolean;
+};
+
+export type FogData = {
+  points: Vector2[];
+  holes: Vector2[][];
+};
+
+export type Fog = {
+  color: Color;
+  data: FogData;
+  id: string;
+  strokeWidth: number;
+  type: "fog";
+  visible: boolean;
+};
+
+export type FogState = Record<string, Fog>;
diff --git a/src/types/Grid.ts b/src/types/Grid.ts
new file mode 100644
index 0000000..73cfbc1
--- /dev/null
+++ b/src/types/Grid.ts
@@ -0,0 +1,39 @@
+import Vector2 from "../helpers/Vector2";
+
+export type GridInset = {
+  /** Top left position of the inset */
+  topLeft: Vector2;
+  /** Bottom right position of the inset */
+  bottomRight: Vector2;
+};
+
+export type GridMeasurementType =
+  | "chebyshev"
+  | "alternating"
+  | "euclidean"
+  | "manhattan";
+
+export type GridMeasurement = {
+  type: GridMeasurementType;
+  scale: string;
+};
+
+export type GridType = "square" | "hexVertical" | "hexHorizontal";
+
+export type Grid = {
+  /** The inset of the grid from the map */
+  inset: GridInset;
+  /** The number of columns and rows of the grid as `x` and `y` */
+  size: Vector2;
+  type: GridType;
+  measurement: GridMeasurement;
+};
+
+export type GridScale = {
+  /** The number multiplier of the scale */
+  multiplier: number;
+  /** The unit of the scale */
+  unit: string;
+  /** The precision of the scale */
+  digits: number;
+};
diff --git a/src/types/Group.ts b/src/types/Group.ts
new file mode 100644
index 0000000..37faa00
--- /dev/null
+++ b/src/types/Group.ts
@@ -0,0 +1,13 @@
+export type GroupItem = {
+  id: string;
+  type: "item";
+};
+
+export type GroupContainer = {
+  id: string;
+  type: "group";
+  items: GroupItem[];
+  name: string;
+};
+
+export type Group = GroupItem | GroupContainer;
diff --git a/src/types/Map.ts b/src/types/Map.ts
new file mode 100644
index 0000000..0e59922
--- /dev/null
+++ b/src/types/Map.ts
@@ -0,0 +1,58 @@
+import React from "react";
+import { Grid } from "./Grid";
+
+export type MapToolId =
+  | "map"
+  | "move"
+  | "select"
+  | "fog"
+  | "drawing"
+  | "measure"
+  | "pointer"
+  | "note"
+  | "undo"
+  | "redo";
+
+export type MapTool = {
+  id: MapToolId;
+  icon: React.ReactNode;
+  title: string;
+  SettingsComponent?: React.ElementType;
+};
+
+export type BaseMap = {
+  id: string;
+  name: string;
+  owner: string;
+  grid: Grid;
+  width: number;
+  height: number;
+  lastModified: number;
+  created: number;
+  showGrid: boolean;
+  snapToGrid: boolean;
+};
+
+export type DefaultMap = BaseMap & {
+  type: "default";
+  key: string;
+};
+
+export type FileMapResolutions = {
+  low?: string;
+  medium?: string;
+  high?: string;
+  ultra?: string;
+};
+
+export type MapQuality = keyof FileMapResolutions | "original";
+
+export type FileMap = BaseMap & {
+  type: "file";
+  file: string;
+  resolutions: FileMapResolutions;
+  thumbnail: string;
+  quality: MapQuality;
+};
+
+export type Map = DefaultMap | FileMap;
diff --git a/src/types/MapState.ts b/src/types/MapState.ts
new file mode 100644
index 0000000..8b3ec72
--- /dev/null
+++ b/src/types/MapState.ts
@@ -0,0 +1,15 @@
+import { DrawingState } from "./Drawing";
+import { FogState } from "./Fog";
+import { Notes } from "./Note";
+import { TokenStates } from "./TokenState";
+
+export type EditFlag = "drawing" | "tokens" | "notes" | "fog";
+
+export type MapState = {
+  tokens: TokenStates;
+  drawings: DrawingState;
+  fogs: FogState;
+  editFlags: Array<EditFlag>;
+  notes: Notes;
+  mapId: string;
+};
diff --git a/src/types/Note.ts b/src/types/Note.ts
new file mode 100644
index 0000000..c7c746d
--- /dev/null
+++ b/src/types/Note.ts
@@ -0,0 +1,30 @@
+import Konva from "konva";
+import { Color } from "../helpers/colors";
+
+export type Note = {
+  id: string;
+  color: Color;
+  lastModified: number;
+  lastModifiedBy: string;
+  locked: boolean;
+  size: number;
+  text: string;
+  textOnly: boolean;
+  visible: boolean;
+  x: number;
+  y: number;
+  rotation: number;
+};
+
+export type NoteMenuOptions = {
+  noteId: string;
+  noteNode: Konva.Node;
+  focus: boolean;
+};
+
+export type NoteDraggingOptions = {
+  dragging: boolean;
+  noteId: string;
+};
+
+export type Notes = Record<string, Note>;
diff --git a/src/types/Outline.ts b/src/types/Outline.ts
new file mode 100644
index 0000000..d045cc4
--- /dev/null
+++ b/src/types/Outline.ts
@@ -0,0 +1,21 @@
+export type CircleOutline = {
+  type: "circle";
+  x: number;
+  y: number;
+  radius: number;
+};
+
+export type RectOutline = {
+  type: "rect";
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+};
+
+export type PathOutline = {
+  type: "path";
+  points: number[];
+};
+
+export type Outline = CircleOutline | RectOutline | PathOutline;
diff --git a/src/types/PartyState.ts b/src/types/PartyState.ts
new file mode 100644
index 0000000..e9a453c
--- /dev/null
+++ b/src/types/PartyState.ts
@@ -0,0 +1,3 @@
+import { PlayerState } from "./PlayerState";
+
+export type PartyState = Record<string, PlayerState>;
diff --git a/src/types/PlayerState.ts b/src/types/PlayerState.ts
new file mode 100644
index 0000000..4aa2f97
--- /dev/null
+++ b/src/types/PlayerState.ts
@@ -0,0 +1,10 @@
+import { Timer } from "./Timer";
+import { DiceState } from "./Dice";
+
+export type PlayerState = {
+  nickname: string;
+  timer?: Timer;
+  dice: DiceState;
+  sessionId?: string;
+  userId?: string;
+};
diff --git a/src/types/Pointer.ts b/src/types/Pointer.ts
new file mode 100644
index 0000000..254cc4b
--- /dev/null
+++ b/src/types/Pointer.ts
@@ -0,0 +1,13 @@
+import Vector2 from "../helpers/Vector2";
+import { Color } from "../helpers/colors";
+
+export type PointerToolSettings = {
+  color: Color;
+};
+
+export type PointerState = {
+  position: Vector2;
+  visible: boolean;
+  id: string;
+  color: Color;
+};
diff --git a/src/types/Select.ts b/src/types/Select.ts
new file mode 100644
index 0000000..84b4275
--- /dev/null
+++ b/src/types/Select.ts
@@ -0,0 +1,32 @@
+import { RectData, PointsData } from "./Drawing";
+
+export type SelectToolType = "path" | "rectangle";
+
+export type SelectToolSettings = {
+  type: SelectToolType;
+};
+
+export type SelectionItemType = "token" | "note";
+
+export type SelectionItem = {
+  type: SelectionItemType;
+  id: string;
+};
+
+export type BaseSelection = {
+  items: SelectionItem[];
+  x: number;
+  y: number;
+};
+
+export type RectSelection = BaseSelection & {
+  data: RectData;
+  type: "rectangle";
+};
+
+export type PathSelection = BaseSelection & {
+  data: PointsData;
+  type: "path";
+};
+
+export type Selection = RectSelection | PathSelection;
diff --git a/src/types/Settings.ts b/src/types/Settings.ts
new file mode 100644
index 0000000..420dfd5
--- /dev/null
+++ b/src/types/Settings.ts
@@ -0,0 +1,37 @@
+import { Duration } from "./Timer";
+import { DrawingToolSettings } from "./Drawing";
+import { FogToolSettings } from "./Fog";
+import { PointerToolSettings } from "./Pointer";
+import { SelectToolSettings } from "./Select";
+
+export type DrawingSettings = DrawingToolSettings;
+export type FogSettings = FogToolSettings & {
+  editOpacity: number;
+  showGuides: boolean;
+};
+export type DiceSettings = {
+  shareDice: boolean;
+  style: string;
+};
+export type GameSettings = {
+  usePassword: boolean;
+};
+export type MapSettings = {
+  fullScreen: boolean;
+  labeSize: number;
+  gridSnappingSensitivity: number;
+};
+export type PointerSettings = PointerToolSettings;
+export type TimerSettings = Duration;
+export type SelectSettings = SelectToolSettings;
+
+export type Settings = {
+  dice: DiceSettings;
+  drawing: DrawingSettings;
+  fog: FogSettings;
+  game: GameSettings;
+  map: MapSettings;
+  pointer: PointerSettings;
+  timer: TimerSettings;
+  select: SelectSettings;
+};
diff --git a/src/types/Timer.ts b/src/types/Timer.ts
new file mode 100644
index 0000000..eb199b3
--- /dev/null
+++ b/src/types/Timer.ts
@@ -0,0 +1,10 @@
+export type Duration = {
+  hour: number;
+  minute: number;
+  second: number;
+};
+
+export type Timer = {
+  current: number;
+  max: number;
+};
diff --git a/src/types/Token.ts b/src/types/Token.ts
new file mode 100644
index 0000000..d68fb16
--- /dev/null
+++ b/src/types/Token.ts
@@ -0,0 +1,44 @@
+import Konva from "konva";
+import { Outline } from "./Outline";
+
+export type TokenCategory = "character" | "vehicle" | "prop" | "attachment";
+
+export type BaseToken = {
+  id: string;
+  name: string;
+  defaultSize: number;
+  defaultCategory: TokenCategory;
+  defaultLabel: string;
+  hideInSidebar: boolean;
+  width: number;
+  height: number;
+  owner: string;
+  created: number;
+  lastModified: number;
+  outline: Outline;
+};
+
+export type DefaultToken = BaseToken & {
+  type: "default";
+  key: string;
+};
+
+export type FileToken = BaseToken & {
+  type: "file";
+  file: string;
+  thumbnail: string;
+};
+
+export type Token = DefaultToken | FileToken;
+
+export type TokenMenuOptions = {
+  tokenStateId: string;
+  tokenImage: Konva.Node;
+  focus: boolean;
+};
+
+export type TokenDraggingOptions = {
+  dragging: boolean;
+  tokenStateId: string;
+  attachedTokenStateIds: string[];
+};
diff --git a/src/types/TokenState.ts b/src/types/TokenState.ts
new file mode 100644
index 0000000..7432685
--- /dev/null
+++ b/src/types/TokenState.ts
@@ -0,0 +1,37 @@
+import { Color } from "../helpers/colors";
+import { Outline } from "./Outline";
+import { TokenCategory } from "./Token";
+
+export type BaseTokenState = {
+  id: string;
+  tokenId: string;
+  owner: string;
+  size: number;
+  category: TokenCategory;
+  label: string;
+  statuses: Color[];
+  x: number;
+  y: number;
+  lastModifiedBy: string;
+  lastModified: number;
+  rotation: number;
+  locked: boolean;
+  visible: boolean;
+  outline: Outline;
+  width: number;
+  height: number;
+};
+
+export type DefaultTokenState = BaseTokenState & {
+  type: "default";
+  key: string;
+};
+
+export type FileTokenState = BaseTokenState & {
+  type: "file";
+  file: string;
+};
+
+export type TokenState = DefaultTokenState | FileTokenState;
+
+export type TokenStates = Record<string, TokenState>;
diff --git a/src/types/external/image.outline.d.ts b/src/types/external/image.outline.d.ts
new file mode 100644
index 0000000..13c602f
--- /dev/null
+++ b/src/types/external/image.outline.d.ts
@@ -0,0 +1,14 @@
+declare module "image-outline" {
+  type ImageOutlineOptions = {
+    opacityThreshold?: number;
+    simplifyThreshold?: number;
+    pixelFn?: "opaque" | "not-white" | "not-black";
+  };
+
+  declare function imageOutline(
+    imageElement: HTMLImageElement,
+    options: ImageOutlineOptions
+  ): { x: number; y: number }[];
+
+  export default imageOutline;
+}
diff --git a/src/upgrade.js b/src/upgrade.ts
similarity index 89%
rename from src/upgrade.js
rename to src/upgrade.ts
index a90dd5a..1c6881b 100644
--- a/src/upgrade.js
+++ b/src/upgrade.ts
@@ -9,31 +9,28 @@ import blobToBuffer from "./helpers/blobToBuffer";
 import { getGridDefaultInset } from "./helpers/grid";
 import { createThumbnail, getImageOutline } from "./helpers/image";
 import {
-  AddShapeAction,
-  EditShapeAction,
-  RemoveShapeAction,
-  SubtractShapeAction,
-  CutShapeAction,
+  AddStatesAction,
+  EditStatesAction,
+  RemoveStatesAction,
+  SubtractFogAction,
+  CutFogAction,
 } from "./actions";
 import { getDefaultMaps } from "./maps";
 import { getDefaultTokens } from "./tokens";
+import { Outline } from "./types/Outline";
+import { Group, GroupContainer } from "./types/Group";
 
-/**
- * @callback OnUpgrade
- * @param {number} versionNumber
- */
+export type UpgradeEventHandler = (versionNumber: number) => void;
 
-/**
- * @callback VersionCallback
- * @param {Version} version
- * @param {OnUpgrade=} onUpgrade
- */
+type VersionCallback = (
+  version: Version,
+  onUpgrade?: UpgradeEventHandler
+) => void;
 
 /**
  * Mapping of version number to their upgrade function
- * @type {Object.<number, VersionCallback>}
  */
-export const versions = {
+export const versions: Record<number, VersionCallback> = {
   // v1.2.0
   1(v) {
     v.stores({
@@ -48,7 +45,7 @@ export const versions = {
     v.stores({}).upgrade(async (tx) => {
       onUpgrade?.(2);
       const maps = await Dexie.waitFor(tx.table("maps").toArray());
-      let mapBuffers = {};
+      let mapBuffers: Record<string, ArrayBuffer> = {};
       for (let map of maps) {
         mapBuffers[map.id] = await Dexie.waitFor(blobToBuffer(map.file));
       }
@@ -68,7 +65,7 @@ export const versions = {
         .table("states")
         .toCollection()
         .modify((state) => {
-          function mapTokenId(id) {
+          function mapTokenId(id: string) {
             switch (id) {
               case "__default-Axes":
                 return "__default-Barbarian";
@@ -291,7 +288,7 @@ export const versions = {
     v.stores({}).upgrade(async (tx) => {
       onUpgrade?.(15);
       const tokens = await Dexie.waitFor(tx.table("tokens").toArray());
-      let tokenSizes = {};
+      let tokenSizes: Record<string, { width: number; height: number }> = {};
       for (let token of tokens) {
         const url = URL.createObjectURL(new Blob([token.file]));
         let image = new Image();
@@ -385,7 +382,7 @@ export const versions = {
       const userId = (await Dexie.waitFor(tx.table("user").get("userId")))
         .value;
       const maps = await Dexie.waitFor(tx.table("maps").toArray());
-      const thumbnails = {};
+      const thumbnails: Record<string, any> = {};
       for (let map of maps) {
         try {
           if (map.owner === userId) {
@@ -409,7 +406,7 @@ export const versions = {
       const userId = (await Dexie.waitFor(tx.table("user").get("userId")))
         .value;
       const tokens = await Dexie.waitFor(tx.table("tokens").toArray());
-      const thumbnails = {};
+      const thumbnails: Record<string, any> = {};
       for (let token of tokens) {
         try {
           if (token.owner === userId) {
@@ -527,9 +524,7 @@ export const versions = {
             });
           }
         }
-        maps = null;
         await tx.table("assets").bulkAdd(assets);
-        assets = null;
       }
     });
   },
@@ -571,9 +566,7 @@ export const versions = {
             });
           }
         }
-        tokens = null;
         await tx.table("assets").bulkAdd(assets);
-        assets = null;
       }
     });
   },
@@ -582,8 +575,8 @@ export const versions = {
     v.stores({}).upgrade(async (tx) => {
       onUpgrade?.(26);
 
-      let mapUpdates = {};
-      let tokenUpdates = {};
+      let mapUpdates: Record<string, any> = {};
+      let tokenUpdates: Record<string, any> = {};
 
       const primaryKeys = await Dexie.waitFor(
         tx.table("assets").toCollection().primaryKeys()
@@ -617,7 +610,6 @@ export const versions = {
             mapUpdates[prevId][resolution] = id;
           }
         }
-        assets = null;
       }
 
       await tx
@@ -786,9 +778,9 @@ export const versions = {
   34(v, onUpgrade) {
     v.stores({ groups: "id" }).upgrade(async (tx) => {
       onUpgrade?.(34);
-      function groupItems(items) {
-        let groups = [];
-        let subGroups = {};
+      function groupItems(items: { id: string; group: string }[]) {
+        let groups: Group[] = [];
+        let subGroups: Record<string, GroupContainer> = {};
         for (let item of items) {
           if (!item.group) {
             groups.push({ id: item.id, type: "item" });
@@ -842,17 +834,65 @@ export const versions = {
       _uncommittedChanges: null,
     });
   },
+  // v1.10.0 - Add rotation to notes
+  37(v, onUpgrade) {
+    v.stores({}).upgrade((tx) => {
+      onUpgrade?.(37);
+      tx.table("states")
+        .toCollection()
+        .modify((state) => {
+          for (let id in state.notes) {
+            state.notes[id].rotation = 0;
+          }
+        });
+    });
+  },
+  // v1.10.0 - Delete groups again
+  38(v, onUpgrade) {
+    v.stores({}).upgrade((tx) => {
+      onUpgrade?.(38);
+      tx.table("maps")
+        .toCollection()
+        .modify((map) => {
+          delete map.group;
+        });
+      tx.table("tokens")
+        .toCollection()
+        .modify((token) => {
+          delete token.group;
+        });
+    });
+  },
+  // v1.10.0 - Rename drawShapes and fogShapes in state
+  39(v, onUpgrade) {
+    v.stores({}).upgrade((tx) => {
+      onUpgrade?.(39);
+      tx.table("states")
+        .toCollection()
+        .modify((state) => {
+          state.drawings = state.drawShapes;
+          state.fogs = state.fogShapes;
+
+          delete state.drawShapes;
+          delete state.fogShapes;
+        });
+    });
+  },
 };
 
-export const latestVersion = 36;
+export const latestVersion = 39;
 
 /**
  * Load versions onto a database up to a specific version number
  * @param {Dexie} db
  * @param {number=} upTo version number to load up to, latest version if undefined
- * @param {OnUpgrade=} onUpgrade
+ * @param {UpgradeEventHandler=} onUpgrade
  */
-export function loadVersions(db, upTo = latestVersion, onUpgrade = undefined) {
+export function loadVersions(
+  db: Dexie,
+  upTo: number | undefined = latestVersion,
+  onUpgrade: UpgradeEventHandler | undefined
+) {
   for (let versionNumber = 1; versionNumber <= upTo; versionNumber++) {
     versions[versionNumber](db.version(versionNumber), onUpgrade);
   }
@@ -861,10 +901,8 @@ export function loadVersions(db, upTo = latestVersion, onUpgrade = undefined) {
 /**
  * Convert from the previous representation of actions (1.7.0) to the new representation (1.8.0)
  * and combine into shapes
- * @param {Array} actions
- * @param {number} actionIndex
  */
-function convertOldActionsToShapes(actions, actionIndex) {
+function convertOldActionsToShapes(actions: any[], actionIndex: number) {
   let newShapes = {};
   for (let i = 0; i <= actionIndex; i++) {
     const action = actions[i];
@@ -874,18 +912,18 @@ function convertOldActionsToShapes(actions, actionIndex) {
     let newAction;
     if (action.shapes) {
       if (action.type === "add") {
-        newAction = new AddShapeAction(action.shapes);
+        newAction = new AddStatesAction(action.shapes);
       } else if (action.type === "edit") {
-        newAction = new EditShapeAction(action.shapes);
+        newAction = new EditStatesAction(action.shapes);
       } else if (action.type === "remove") {
-        newAction = new RemoveShapeAction(action.shapes);
+        newAction = new RemoveStatesAction(action.shapes);
       } else if (action.type === "subtract") {
-        newAction = new SubtractShapeAction(action.shapes);
+        newAction = new SubtractFogAction(action.shapes);
       } else if (action.type === "cut") {
-        newAction = new CutShapeAction(action.shapes);
+        newAction = new CutFogAction(action.shapes);
       }
     } else if (action.type === "remove" && action.shapeIds) {
-      newAction = new RemoveShapeAction(action.shapeIds);
+      newAction = new RemoveStatesAction(action.shapeIds);
     }
 
     if (newAction) {
@@ -896,8 +934,14 @@ function convertOldActionsToShapes(actions, actionIndex) {
 }
 
 // Helper to create a thumbnail for a file in a db
-async function createDataThumbnail(data) {
-  let url;
+async function createDataThumbnail(data: any): Promise<{
+  file: Uint8Array;
+  width: number;
+  height: number;
+  type: "file";
+  id: "thumbnail";
+}> {
+  let url: string;
   if (data?.resolutions?.low?.file) {
     url = URL.createObjectURL(new Blob([data.resolutions.low.file]));
   } else {
@@ -907,14 +951,16 @@ async function createDataThumbnail(data) {
     new Promise((resolve) => {
       let image = new Image();
       image.onload = async () => {
-        const thumbnail = await createThumbnail(image);
-        resolve({
-          file: thumbnail.file,
-          width: thumbnail.width,
-          height: thumbnail.height,
-          type: "file",
-          id: "thumbnail",
-        });
+        const thumbnail = await createThumbnail(image, "");
+        if (thumbnail) {
+          resolve({
+            file: thumbnail.file,
+            width: thumbnail.width,
+            height: thumbnail.height,
+            type: "file",
+            id: "thumbnail",
+          });
+        }
       };
       image.src = url;
     }),
@@ -922,7 +968,9 @@ async function createDataThumbnail(data) {
   );
 }
 
-async function createDataOutline(data) {
+async function createDataOutline(
+  data: any
+): Promise<{ id: string; outline: Outline }> {
   const url = URL.createObjectURL(new Blob([data.file]));
   return await Dexie.waitFor(
     new Promise((resolve) => {
diff --git a/src/validators/Color.ts b/src/validators/Color.ts
new file mode 100644
index 0000000..21ea8f8
--- /dev/null
+++ b/src/validators/Color.ts
@@ -0,0 +1,26 @@
+import Ajv, { JSONSchemaType } from "ajv";
+import { Color } from "../helpers/colors";
+
+const ajv = new Ajv();
+
+export const ColorSchema: JSONSchemaType<Color> = {
+  $id: "https://www.owlbear.rodeo/schemas/color.json",
+  enum: [
+    "black",
+    "blue",
+    "darkGray",
+    "green",
+    "lightGray",
+    "orange",
+    "pink",
+    "primary",
+    "purple",
+    "red",
+    "teal",
+    "white",
+    "yellow",
+  ],
+  type: "string",
+};
+
+export const isColor = ajv.compile<Color>(ColorSchema);
diff --git a/src/validators/Drawing.ts b/src/validators/Drawing.ts
new file mode 100644
index 0000000..dc975db
--- /dev/null
+++ b/src/validators/Drawing.ts
@@ -0,0 +1,225 @@
+import Ajv from "ajv";
+import { Drawing } from "../types/Drawing";
+
+import { ColorSchema } from "./Color";
+import { Vector2Schema } from "./Vector2";
+
+export const DrawingSchema = {
+  $id: "https://www.owlbear.rodeo/schemas/drawing.json",
+  anyOf: [
+    {
+      $ref: "#/definitions/Shape",
+    },
+    {
+      $ref: "#/definitions/Path",
+    },
+  ],
+  definitions: {
+    PointsData: {
+      properties: {
+        points: {
+          items: {
+            $ref: "vector2.json",
+          },
+          type: "array",
+        },
+      },
+      required: ["points"],
+      type: "object",
+    },
+    RectData: {
+      properties: {
+        height: {
+          type: "number",
+        },
+        width: {
+          type: "number",
+        },
+        x: {
+          type: "number",
+        },
+        y: {
+          type: "number",
+        },
+      },
+      required: ["height", "width", "x", "y"],
+      type: "object",
+    },
+    CircleData: {
+      properties: {
+        radius: {
+          type: "number",
+        },
+        x: {
+          type: "number",
+        },
+        y: {
+          type: "number",
+        },
+      },
+      required: ["radius", "x", "y"],
+      type: "object",
+    },
+    BaseDrawing: {
+      properties: {
+        blend: {
+          type: "boolean",
+        },
+        color: {
+          $ref: "color.json",
+        },
+        id: {
+          type: "string",
+        },
+        strokeWidth: {
+          type: "number",
+        },
+      },
+      required: ["blend", "color", "id", "strokeWidth"],
+      type: "object",
+    },
+    BaseShape: {
+      allOf: [
+        {
+          $ref: "#/definitions/BaseDrawing",
+        },
+        {
+          properties: {
+            type: {
+              enum: ["shape"],
+              type: "string",
+            },
+          },
+          required: ["type"],
+          type: "object",
+        },
+      ],
+    },
+    Line: {
+      allOf: [
+        {
+          $ref: "#/definitions/BaseShape",
+        },
+        {
+          properties: {
+            data: {
+              $ref: "#/definitions/PointsData",
+            },
+            shapeType: {
+              enum: ["line"],
+              type: "string",
+            },
+          },
+          required: ["data", "shapeType"],
+          type: "object",
+        },
+      ],
+    },
+    Rectangle: {
+      allOf: [
+        {
+          $ref: "#/definitions/BaseShape",
+        },
+        {
+          properties: {
+            data: {
+              $ref: "#/definitions/RectData",
+            },
+            shapeType: {
+              enum: ["rectangle"],
+              type: "string",
+            },
+          },
+          required: ["data", "shapeType"],
+          type: "object",
+        },
+      ],
+    },
+    Circle: {
+      allOf: [
+        {
+          $ref: "#/definitions/BaseShape",
+        },
+        {
+          properties: {
+            data: {
+              $ref: "#/definitions/CircleData",
+            },
+            shapeType: {
+              enum: ["circle"],
+              type: "string",
+            },
+          },
+          required: ["data", "shapeType"],
+          type: "object",
+        },
+      ],
+    },
+    Triangle: {
+      allOf: [
+        {
+          $ref: "#/definitions/BaseShape",
+        },
+        {
+          properties: {
+            data: {
+              $ref: "#/definitions/PointsData",
+            },
+            shapeType: {
+              enum: ["triangle"],
+              type: "string",
+            },
+          },
+          required: ["data", "shapeType"],
+          type: "object",
+        },
+      ],
+    },
+    Shape: {
+      anyOf: [
+        {
+          $ref: "#/definitions/Line",
+        },
+        {
+          $ref: "#/definitions/Rectangle",
+        },
+        {
+          $ref: "#/definitions/Circle",
+        },
+        {
+          $ref: "#/definitions/Triangle",
+        },
+      ],
+    },
+    Path: {
+      allOf: [
+        {
+          $ref: "#/definitions/BaseDrawing",
+        },
+        {
+          properties: {
+            data: {
+              $ref: "#/definitions/PointsData",
+            },
+            pathType: {
+              enum: ["fill", "stroke"],
+              type: "string",
+            },
+            type: {
+              enum: ["path"],
+              type: "string",
+            },
+          },
+          required: ["data", "pathType", "type"],
+          type: "object",
+        },
+      ],
+    },
+  },
+};
+
+export const ajv = new Ajv({
+  schemas: [DrawingSchema, ColorSchema, Vector2Schema],
+});
+
+export const isDrawing = ajv.compile<Drawing>(DrawingSchema);
diff --git a/src/validators/Fog.ts b/src/validators/Fog.ts
new file mode 100644
index 0000000..72f26a5
--- /dev/null
+++ b/src/validators/Fog.ts
@@ -0,0 +1,59 @@
+import Ajv from "ajv";
+import { Fog } from "../types/Fog";
+
+import { Vector2Schema } from "./Vector2";
+import { ColorSchema } from "./Color";
+
+export const FogSchema = {
+  $id: "https://www.owlbear.rodeo/schemas/fog.json",
+  properties: {
+    color: {
+      $ref: "color.json",
+    },
+    data: {
+      $ref: "#/definitions/FogData",
+    },
+    id: {
+      type: "string",
+    },
+    strokeWidth: {
+      type: "number",
+    },
+    type: {
+      enum: ["fog"],
+      type: "string",
+    },
+    visible: {
+      type: "boolean",
+    },
+  },
+  required: ["color", "data", "id", "strokeWidth", "type", "visible"],
+  type: "object",
+  definitions: {
+    FogData: {
+      properties: {
+        holes: {
+          items: {
+            items: {
+              $ref: "vector2.json",
+            },
+            type: "array",
+          },
+          type: "array",
+        },
+        points: {
+          items: {
+            $ref: "vector2.json",
+          },
+          type: "array",
+        },
+      },
+      required: ["holes", "points"],
+      type: "object",
+    },
+  },
+};
+
+const ajv = new Ajv({ schemas: [FogSchema, ColorSchema, Vector2Schema] });
+
+export const isFog = ajv.compile<Fog>(FogSchema);
diff --git a/src/validators/MapState.ts b/src/validators/MapState.ts
new file mode 100644
index 0000000..7e1e87f
--- /dev/null
+++ b/src/validators/MapState.ts
@@ -0,0 +1,97 @@
+import Ajv from "ajv";
+import { MapState } from "../types/MapState";
+
+import { DrawingSchema } from "./Drawing";
+import { FogSchema } from "./Fog";
+import { NoteSchema } from "./Note";
+import { TokenStateSchema } from "./TokenState";
+import { Vector2Schema } from "./Vector2";
+import { ColorSchema } from "./Color";
+import { OutlineSchema } from "./Outline";
+
+export const MapStateSchema: any = {
+  $id: "https://www.owlbear.rodeo/schemas/map-state.json",
+  properties: {
+    tokens: {
+      $ref: "#/definitions/TokenStates",
+    },
+    drawings: {
+      $ref: "#/definitions/DrawingState",
+    },
+    fogs: {
+      $ref: "#/definitions/FogState",
+    },
+    editFlags: {
+      items: {
+        enum: ["drawing", "fog", "notes", "tokens"],
+        type: "string",
+      },
+      type: "array",
+    },
+    notes: {
+      $ref: "#/definitions/Notes",
+    },
+    mapId: {
+      type: "string",
+    },
+  },
+  required: ["drawings", "editFlags", "fogs", "mapId", "notes", "tokens"],
+  type: "object",
+  definitions: {
+    TokenStates: {
+      propertyNames: {
+        type: "string",
+      },
+      additionalProperties: {
+        $ref: "token-state.json",
+      },
+      required: [],
+      type: "object",
+    },
+    DrawingState: {
+      propertyNames: {
+        type: "string",
+      },
+      additionalProperties: {
+        $ref: "drawing.json",
+      },
+      required: [],
+      type: "object",
+    },
+    FogState: {
+      propertyNames: {
+        type: "string",
+      },
+      additionalProperties: {
+        $ref: "fog.json",
+      },
+      required: [],
+      type: "object",
+    },
+    Notes: {
+      propertyNames: {
+        type: "string",
+      },
+      additionalProperties: {
+        $ref: "note.json",
+      },
+      required: [],
+      type: "object",
+    },
+  },
+};
+
+export const ajv = new Ajv({
+  schemas: [
+    MapStateSchema,
+    DrawingSchema,
+    FogSchema,
+    NoteSchema,
+    TokenStateSchema,
+    Vector2Schema,
+    ColorSchema,
+    OutlineSchema,
+  ],
+});
+
+export const isMapState = ajv.compile<MapState>(MapStateSchema);
diff --git a/src/validators/Note.ts b/src/validators/Note.ts
new file mode 100644
index 0000000..f9b966e
--- /dev/null
+++ b/src/validators/Note.ts
@@ -0,0 +1,66 @@
+import Ajv, { JSONSchemaType } from "ajv";
+import { Note } from "../types/Note";
+
+import { Vector2Schema } from "./Vector2";
+import { ColorSchema } from "./Color";
+
+export const NoteSchema: JSONSchemaType<Note> = {
+  $id: "https://www.owlbear.rodeo/schemas/note.json",
+  properties: {
+    color: {
+      $ref: "color.json",
+    },
+    id: {
+      type: "string",
+    },
+    lastModified: {
+      type: "number",
+    },
+    lastModifiedBy: {
+      type: "string",
+    },
+    locked: {
+      type: "boolean",
+    },
+    size: {
+      type: "number",
+    },
+    text: {
+      type: "string",
+    },
+    textOnly: {
+      type: "boolean",
+    },
+    visible: {
+      type: "boolean",
+    },
+    x: {
+      type: "number",
+    },
+    y: {
+      type: "number",
+    },
+    rotation: {
+      type: "number",
+    },
+  },
+  required: [
+    "color",
+    "id",
+    "lastModified",
+    "lastModifiedBy",
+    "locked",
+    "size",
+    "text",
+    "textOnly",
+    "visible",
+    "x",
+    "y",
+    "rotation",
+  ],
+  type: "object",
+};
+
+const ajv = new Ajv({ schemas: [NoteSchema, ColorSchema, Vector2Schema] });
+
+export const isNote = ajv.compile<Note>(NoteSchema);
diff --git a/src/validators/Outline.ts b/src/validators/Outline.ts
new file mode 100644
index 0000000..8f7559c
--- /dev/null
+++ b/src/validators/Outline.ts
@@ -0,0 +1,80 @@
+import Ajv from "ajv";
+import { Outline } from "../types/Outline";
+
+const ajv = new Ajv();
+
+export const OutlineSchema = {
+  $id: "https://www.owlbear.rodeo/schemas/outline.json",
+  anyOf: [
+    {
+      $ref: "#/definitions/CircleOutline",
+    },
+    {
+      $ref: "#/definitions/RectOutline",
+    },
+    {
+      $ref: "#/definitions/PathOutline",
+    },
+  ],
+  definitions: {
+    CircleOutline: {
+      properties: {
+        radius: {
+          type: "number",
+        },
+        type: {
+          enum: ["circle"],
+          type: "string",
+        },
+        x: {
+          type: "number",
+        },
+        y: {
+          type: "number",
+        },
+      },
+      required: ["radius", "type", "x", "y"],
+      type: "object",
+    },
+    RectOutline: {
+      properties: {
+        height: {
+          type: "number",
+        },
+        type: {
+          enum: ["rect"],
+          type: "string",
+        },
+        width: {
+          type: "number",
+        },
+        x: {
+          type: "number",
+        },
+        y: {
+          type: "number",
+        },
+      },
+      required: ["height", "type", "width", "x", "y"],
+      type: "object",
+    },
+    PathOutline: {
+      properties: {
+        points: {
+          items: {
+            type: "number",
+          },
+          type: "array",
+        },
+        type: {
+          enum: ["path"],
+          type: "string",
+        },
+      },
+      required: ["points", "type"],
+      type: "object",
+    },
+  },
+};
+
+export const isOutline = ajv.compile<Outline>(OutlineSchema);
diff --git a/src/validators/Selection.ts b/src/validators/Selection.ts
new file mode 100644
index 0000000..f40537e
--- /dev/null
+++ b/src/validators/Selection.ts
@@ -0,0 +1,100 @@
+import Ajv from "ajv";
+import { Selection } from "../types/Select";
+
+import { DrawingSchema } from "./Drawing";
+import { Vector2Schema } from "./Vector2";
+import { ColorSchema } from "./Color";
+
+export const SelectionSchema = {
+  $id: "https://www.owlbear.rodeo/schemas/selection.json",
+  anyOf: [
+    {
+      $ref: "#/definitions/RectSelection",
+    },
+    {
+      $ref: "#/definitions/PathSelection",
+    },
+  ],
+  definitions: {
+    SelectionItemType: {
+      enum: ["token", "note"],
+      type: "string",
+    },
+    SelectionItem: {
+      properties: {
+        type: {
+          $ref: "#/definitions/SelectionItemType",
+        },
+        id: {
+          type: "string",
+        },
+      },
+      required: ["type", "id"],
+      type: "object",
+    },
+    BaseSelection: {
+      properties: {
+        items: {
+          items: {
+            $ref: "#/definitions/SelectionItem",
+          },
+          type: "array",
+        },
+        x: {
+          type: "number",
+        },
+        y: {
+          type: "number",
+        },
+      },
+      required: ["items", "x", "y"],
+      type: "object",
+    },
+    RectSelection: {
+      allOf: [
+        {
+          $ref: "#/definitions/BaseSelection",
+        },
+        {
+          properties: {
+            data: {
+              $ref: "drawing.json#/definitions/RectData",
+            },
+            type: {
+              enum: ["rectangle"],
+              type: "string",
+            },
+          },
+          required: ["data", "type"],
+          type: "object",
+        },
+      ],
+    },
+    PathSelection: {
+      allOf: [
+        {
+          $ref: "#/definitions/BaseSelection",
+        },
+        {
+          properties: {
+            data: {
+              $ref: "drawing.json#/definitions/PointsData",
+            },
+            type: {
+              enum: ["path"],
+              type: "string",
+            },
+          },
+          required: ["data", "type"],
+          type: "object",
+        },
+      ],
+    },
+  },
+};
+
+const ajv = new Ajv({
+  schemas: [SelectionSchema, DrawingSchema, Vector2Schema, ColorSchema],
+});
+
+export const isSelection = ajv.compile<Selection>(SelectionSchema);
diff --git a/src/validators/TokenState.ts b/src/validators/TokenState.ts
new file mode 100644
index 0000000..774d60d
--- /dev/null
+++ b/src/validators/TokenState.ts
@@ -0,0 +1,147 @@
+import Ajv from "ajv";
+import { TokenState } from "../types/TokenState";
+
+import { ColorSchema } from "./Color";
+import { OutlineSchema } from "./Outline";
+
+export const TokenStateSchema = {
+  $id: "https://www.owlbear.rodeo/schemas/token-state.json",
+  anyOf: [
+    {
+      $ref: "#/definitions/DefaultTokenState",
+    },
+    {
+      $ref: "#/definitions/FileTokenState",
+    },
+  ],
+  definitions: {
+    TokenCategory: {
+      enum: ["character", "prop", "vehicle", "attachment"],
+      type: "string",
+    },
+    BaseTokenState: {
+      properties: {
+        category: {
+          $ref: "#/definitions/TokenCategory",
+        },
+        height: {
+          type: "number",
+        },
+        id: {
+          type: "string",
+        },
+        label: {
+          type: "string",
+        },
+        lastModified: {
+          type: "number",
+        },
+        lastModifiedBy: {
+          type: "string",
+        },
+        locked: {
+          type: "boolean",
+        },
+        outline: {
+          $ref: "outline.json",
+        },
+        owner: {
+          type: "string",
+        },
+        rotation: {
+          type: "number",
+        },
+        size: {
+          type: "number",
+        },
+        statuses: {
+          items: {
+            $ref: "color.json",
+          },
+          type: "array",
+        },
+        tokenId: {
+          type: "string",
+        },
+        visible: {
+          type: "boolean",
+        },
+        width: {
+          type: "number",
+        },
+        x: {
+          type: "number",
+        },
+        y: {
+          type: "number",
+        },
+      },
+      required: [
+        "category",
+        "height",
+        "id",
+        "label",
+        "lastModified",
+        "lastModifiedBy",
+        "locked",
+        "outline",
+        "owner",
+        "rotation",
+        "size",
+        "statuses",
+        "tokenId",
+        "visible",
+        "width",
+        "x",
+        "y",
+      ],
+      type: "object",
+    },
+    DefaultTokenState: {
+      allOf: [
+        {
+          $ref: "#/definitions/BaseTokenState",
+        },
+        {
+          properties: {
+            key: {
+              type: "string",
+            },
+            type: {
+              enum: ["default"],
+              type: "string",
+            },
+          },
+          required: ["key", "type"],
+          type: "object",
+        },
+      ],
+    },
+    FileTokenState: {
+      allOf: [
+        {
+          $ref: "#/definitions/BaseTokenState",
+        },
+        {
+          properties: {
+            file: {
+              type: "string",
+            },
+            type: {
+              enum: ["file"],
+              type: "string",
+            },
+          },
+          required: ["file", "type"],
+          type: "object",
+        },
+      ],
+    },
+  },
+};
+
+export const ajv = new Ajv({
+  schemas: [TokenStateSchema, ColorSchema, OutlineSchema],
+});
+
+export const isTokenState = ajv.compile<TokenState>(TokenStateSchema);
diff --git a/src/validators/Vector2.ts b/src/validators/Vector2.ts
new file mode 100644
index 0000000..8d92895
--- /dev/null
+++ b/src/validators/Vector2.ts
@@ -0,0 +1,20 @@
+import Ajv, { JSONSchemaType } from "ajv";
+import Vector2 from "../helpers/Vector2";
+
+const ajv = new Ajv();
+
+export const Vector2Schema: JSONSchemaType<Vector2> = {
+  $id: "https://www.owlbear.rodeo/schemas/vector2.json",
+  properties: {
+    x: {
+      type: "number",
+    },
+    y: {
+      type: "number",
+    },
+  },
+  required: ["x", "y"],
+  type: "object",
+};
+
+export const isVector2 = ajv.compile<Vector2>(Vector2Schema);
diff --git a/src/workers/DatabaseWorker.js b/src/workers/DatabaseWorker.ts
similarity index 81%
rename from src/workers/DatabaseWorker.js
rename to src/workers/DatabaseWorker.ts
index e58774f..4665445 100644
--- a/src/workers/DatabaseWorker.js
+++ b/src/workers/DatabaseWorker.ts
@@ -4,11 +4,17 @@ import {
   exportDB,
   peakImportFile,
 } from "@mitchemmc/dexie-export-import";
+import { ExportProgress } from "@mitchemmc/dexie-export-import/dist/export";
 import { encode, decode } from "@msgpack/msgpack";
 
 import { getDatabase } from "../database";
 import blobToBuffer from "../helpers/blobToBuffer";
 
+import { Map } from "../types/Map";
+import { Token } from "../types/Token";
+
+type ProgressCallback = (progress: ExportProgress) => boolean;
+
 // Worker to load large amounts of database data on a separate thread
 let service = {
   /**
@@ -16,7 +22,7 @@ let service = {
    * @param {string} table Table to load from
    * @param {string=} key Optional database key to load, if undefined whole table will be loaded
    */
-  async loadData(table, key) {
+  async loadData<T>(table: string, key?: string): Promise<Uint8Array> {
     try {
       let db = getDatabase({});
       if (key) {
@@ -26,7 +32,7 @@ let service = {
         return Comlink.transfer(packed, [packed.buffer]);
       } else {
         // Load entire table
-        let items = [];
+        let items: T[] = [];
         // Use a cursor instead of toArray to prevent IPC max size error
         await db.table(table).each((item) => {
           items.push(item);
@@ -36,7 +42,9 @@ let service = {
         const packed = encode(items);
         return Comlink.transfer(packed, [packed.buffer]);
       }
-    } catch {}
+    } catch {
+      throw new Error("Unable to load database");
+    }
   },
 
   /**
@@ -44,7 +52,7 @@ let service = {
    * @param {Uint8Array} data
    * @param {string} table
    */
-  async putData(data, table) {
+  async putData(data: Uint8Array, table: string): Promise<boolean> {
     try {
       let db = getDatabase({});
       const decoded = decode(data);
@@ -61,23 +69,31 @@ let service = {
    * @param {string[]} mapIds An array of map ids to export
    * @param {string[]} tokenIds An array of token ids to export
    */
-  async exportData(progressCallback, mapIds, tokenIds) {
+  async exportData(
+    progressCallback: ProgressCallback,
+    mapIds: string[],
+    tokenIds: string[]
+  ) {
     let db = getDatabase({});
 
     // Add assets for selected maps and tokens
-    const maps = await db.table("maps").where("id").anyOf(mapIds).toArray();
+    const maps = await db
+      .table<Map>("maps")
+      .where("id")
+      .anyOf(mapIds)
+      .toArray();
     const tokens = await db
-      .table("tokens")
+      .table<Token>("tokens")
       .where("id")
       .anyOf(tokenIds)
       .toArray();
-    const assetIds = [];
+    const assetIds: string[] = [];
     for (let map of maps) {
       if (map.type === "file") {
         assetIds.push(map.file);
         assetIds.push(map.thumbnail);
         for (let res of Object.values(map.resolutions)) {
-          assetIds.push(res);
+          res && assetIds.push(res);
         }
       }
     }
@@ -88,7 +104,7 @@ let service = {
       }
     }
 
-    const filter = (table, value) => {
+    const filter = (table: string, value: any) => {
       if (table === "maps") {
         return mapIds.includes(value.id);
       }
@@ -109,7 +125,7 @@ let service = {
       return false;
     };
 
-    const data = await exportDB(db, {
+    const data = await exportDB(db as any, {
       progressCallback,
       filter,
       numRowsPerChunk: 1,
@@ -125,9 +141,13 @@ let service = {
    * Import into current database
    * @param {Blob} data
    * @param {string} databaseName The name of the database to import into
-   * @param {function} progressCallback
+   * @param {ProgressCallback} progressCallback
    */
-  async importData(data, databaseName, progressCallback) {
+  async importData(
+    data: Blob,
+    databaseName: string,
+    progressCallback: ProgressCallback
+  ) {
     const importMeta = await peakImportFile(data);
     if (!importMeta.data) {
       throw new Error("Uanble to parse file");
@@ -156,7 +176,7 @@ let service = {
       importMeta.data.databaseVersion,
       false
     );
-    await importInto(importDB, data, {
+    await importInto(importDB as any, data, {
       progressCallback,
       acceptNameDiff: true,
       overwriteValues: true,
@@ -180,12 +200,12 @@ let service = {
    * Removes largest assets first
    * @param {number} maxCacheSize Max size of cache in bytes
    */
-  async cleanAssetCache(maxCacheSize) {
+  async cleanAssetCache(maxCacheSize: number) {
     try {
       let db = getDatabase({});
       const userId = (await db.table("user").get("userId")).value;
 
-      const assetSizes = [];
+      const assetSizes: { id: string; size: number }[] = [];
       await db
         .table("assets")
         .where("owner")
@@ -212,4 +232,6 @@ let service = {
   },
 };
 
+export type DatabaseWorkerService = typeof service;
+
 Comlink.expose(service);
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..6703f06
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "target": "es6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "declaration": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "incremental": true,
+    "noFallthroughCasesInSwitch": true,
+    "typeRoots": [
+      "src/types/external",
+      "node_modules/@types"
+    ]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules/**/*",
+    "build/**/*"
+  ]
+}
diff --git a/yarn.lock b/yarn.lock
index 9344f82..6bc5bc7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,14 +2,21 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@7.10.4", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.5.5":
+"@babel/code-frame@7.10.4", "@babel/code-frame@^7.5.5":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
   integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
+  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
+  dependencies:
+    "@babel/highlight" "^7.14.5"
+
+"@babel/code-frame@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
   integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
@@ -270,12 +277,12 @@
   dependencies:
     "@babel/types" "^7.13.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz#ec67e4404f41750463e455cc3203f6a32e93fcb0"
-  integrity sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==
+"@babel/helper-module-imports@^7.0.0":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
+  integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==
   dependencies:
-    "@babel/types" "^7.12.13"
+    "@babel/types" "^7.14.5"
 
 "@babel/helper-module-imports@^7.12.1":
   version "7.12.5"
@@ -284,6 +291,13 @@
   dependencies:
     "@babel/types" "^7.12.5"
 
+"@babel/helper-module-imports@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz#ec67e4404f41750463e455cc3203f6a32e93fcb0"
+  integrity sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==
+  dependencies:
+    "@babel/types" "^7.12.13"
+
 "@babel/helper-module-transforms@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz#7954fec71f5b32c48e4b303b437c34453fd7247c"
@@ -418,11 +432,16 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
-"@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.12.11":
+"@babel/helper-validator-identifier@^7.10.4":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
   integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
+"@babel/helper-validator-identifier@^7.12.11", "@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
+  integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
+
 "@babel/helper-validator-option@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9"
@@ -462,12 +481,12 @@
     "@babel/traverse" "^7.12.5"
     "@babel/types" "^7.12.5"
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
-  integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13", "@babel/highlight@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
+  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
+    "@babel/helper-validator-identifier" "^7.14.5"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
@@ -1656,11 +1675,11 @@
     "@babel/plugin-transform-typescript" "^7.12.1"
 
 "@babel/runtime-corejs3@^7.10.2":
-  version "7.12.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.12.5.tgz#ffee91da0eb4c6dae080774e94ba606368e414f4"
-  integrity sha512-roGr54CsTmNPPzZoCP1AmDXuBoNao7tnSA83TXTwt+UK5QVyh1DIJnrgYRPWKCF2flqZQXwa7Yr8v7VmLzF0YQ==
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.14.9.tgz#fb21b1cf11650dcb8fcf4de2e6b3b8cf411da3f3"
+  integrity sha512-64RiH2ON4/y8qYtoa8rUiyam/tUVyGqRyNYhe+vCRGmjnV4bUlZvY+mwd0RrmLoCpJpdq3RsrNqKb7SJdw/4kw==
   dependencies:
-    core-js-pure "^3.0.0"
+    core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
 "@babel/runtime@7.12.1":
@@ -1670,24 +1689,31 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.9.6":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.14.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
+  integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.12.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
-  integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
+"@babel/runtime@^7.13.10":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -1748,7 +1774,7 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.10.4", "@babel/types@^7.12.13", "@babel/types@^7.12.17", "@babel/types@^7.13.0":
+"@babel/types@^7.10.4", "@babel/types@^7.12.17", "@babel/types@^7.13.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.0.tgz#74424d2816f0171b4100f0ab34e9a374efdf7f80"
   integrity sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==
@@ -1757,6 +1783,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.12.13", "@babel/types@^7.14.5":
+  version "7.15.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
+  integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.9"
+    to-fast-properties "^2.0.0"
+
 "@babylonjs/core@4.2.0", "@babylonjs/core@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@babylonjs/core/-/core-4.2.0.tgz#d1cfd43d7e3d2e58cde79083f04eeb607f6c8f18"
@@ -1803,19 +1837,19 @@
   dependencies:
     tslib "^2.0.0"
 
-"@dnd-kit/core@^3.0.4":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-3.0.4.tgz#b10a0ffc9300a665108a4f7387b1c55dc6bf9c7f"
-  integrity sha512-EoUNyRWnRm8l0okwqG0iUwB0zrPkqBfJrIPdb3kMrTjoG/+70i4RnIuAhdKDnOxldFynWahPfJV3YBoDgeudgg==
+"@dnd-kit/core@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-3.1.1.tgz#c5ad6665931f5a51e74226220e58ac7514f3faf0"
+  integrity sha512-18YY5+1lTqJbGSg6JBSa/fjAOTUYAysFrQ5Ti8oppEPHFacQbC+owM51y2z2KN0LkDHBfGZKw2sFT7++ttwfpA==
   dependencies:
     "@dnd-kit/accessibility" "^3.0.0"
     "@dnd-kit/utilities" "^2.0.0"
     tslib "^2.0.0"
 
-"@dnd-kit/sortable@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/sortable/-/sortable-3.1.0.tgz#4638ea3d9202287ffb186679b593b3407c7e737d"
-  integrity sha512-BwnNgqMTqwIASdu9/x5PdqnAaFakx4HrflDP/zHfZAnGm912+Y545PlztVtAdxK+U6L3pXPR1BQaZO7JQjDxmg==
+"@dnd-kit/sortable@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/sortable/-/sortable-4.0.0.tgz#81dd2b014a16527cf89602dc40060d9ee4dad352"
+  integrity sha512-teYVFy6mQG/u6F6CaGxAkzPfiNJvguFzWfJ/zonYQRxfANHX6QJ6GziMG9KON/Ae9Q2ODJP8vib+guWJrDXeGg==
   dependencies:
     "@dnd-kit/utilities" "^2.0.0"
     tslib "^2.0.0"
@@ -1827,6 +1861,24 @@
   dependencies:
     tslib "^2.0.0"
 
+"@emotion/babel-plugin@^11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
+  integrity sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "^4.0.3"
+
 "@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -1837,10 +1889,10 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/cache@^11.0.0", "@emotion/cache@^11.1.3":
-  version "11.1.3"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd"
-  integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==
+"@emotion/cache@^11.4.0":
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
+  integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
   dependencies:
     "@emotion/memoize" "^0.7.4"
     "@emotion/sheet" "^1.0.0"
@@ -1848,7 +1900,7 @@
     "@emotion/weak-memoize" "^0.2.5"
     stylis "^4.0.3"
 
-"@emotion/core@^10.0.0":
+"@emotion/core@^10.0.14":
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
   integrity sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==
@@ -1860,18 +1912,6 @@
     "@emotion/sheet" "0.9.4"
     "@emotion/utils" "0.11.3"
 
-"@emotion/core@^10.0.14":
-  version "10.0.35"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
-  integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/cache" "^10.0.27"
-    "@emotion/css" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
-
 "@emotion/css@^10.0.27":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
@@ -1886,32 +1926,39 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.1":
+"@emotion/is-prop-valid@^0.8.1":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
   dependencies:
     "@emotion/memoize" "0.7.4"
 
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz#29ef6be1e946fb4739f9707def860f316f668cde"
+  integrity sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
-"@emotion/memoize@^0.7.1", "@emotion/memoize@^0.7.4":
+"@emotion/memoize@^0.7.1", "@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
 "@emotion/react@^11.1.1":
-  version "11.1.5"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66"
-  integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==
+  version "11.4.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.1.tgz#a1b0b767b5bad57515ffb0cad9349614d27f4d57"
+  integrity sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==
   dependencies:
-    "@babel/runtime" "^7.7.2"
-    "@emotion/cache" "^11.1.3"
-    "@emotion/serialize" "^1.0.0"
-    "@emotion/sheet" "^1.0.1"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/sheet" "^1.0.2"
     "@emotion/utils" "^1.0.0"
     "@emotion/weak-memoize" "^0.2.5"
     hoist-non-react-statics "^3.3.1"
@@ -1927,10 +1974,10 @@
     "@emotion/utils" "0.11.3"
     csstype "^2.5.7"
 
-"@emotion/serialize@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.1.tgz#322cdebfdbb5a88946f17006548191859b9b0855"
-  integrity sha512-TXlKs5sgUKhFlszp/rg4lIAZd7UUSmJpwaf9/lAEFcUh2vPi32i7x4wk7O8TN8L8v2Ol8k0CxnhRBY0zQalTxA==
+"@emotion/serialize@^1.0.0", "@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
   dependencies:
     "@emotion/hash" "^0.8.0"
     "@emotion/memoize" "^0.7.4"
@@ -1943,28 +1990,21 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
-"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
-  integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
+"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.2.tgz#1d9ffde531714ba28e62dac6a996a8b1089719d0"
+  integrity sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw==
 
-"@emotion/styled-base@^10.0.27":
-  version "10.0.31"
-  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
-  integrity sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==
+"@emotion/styled@^11.0.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.3.0.tgz#d63ee00537dfb6ff612e31b0e915c5cf9925a207"
+  integrity sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==
   dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/is-prop-valid" "0.8.8"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/utils" "0.11.3"
-
-"@emotion/styled@^10.0.0":
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
-  integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
-  dependencies:
-    "@emotion/styled-base" "^10.0.27"
-    babel-plugin-emotion "^10.0.27"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.3.0"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/utils" "^1.0.0"
 
 "@emotion/stylis@0.8.5":
   version "0.8.5"
@@ -2226,7 +2266,12 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
-"@mdx-js/react@^1.0.0":
+"@juggle/resize-observer@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
+  integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
+
+"@mdx-js/react@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.22.tgz#ae09b4744fddc74714ee9f9d6f17a66e77c43573"
   integrity sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==
@@ -2239,10 +2284,10 @@
     dexie "^3.0.0-alpha.5 || ^2.0.4"
     rollup-plugin-sourcemaps "^0.6.3"
 
-"@msgpack/msgpack@^2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@msgpack/msgpack/-/msgpack-2.4.1.tgz#b3df36494b73a021242207e320af2c054145e4fe"
-  integrity sha512-AcfV3ZlyAzX2cqpuvcrV8Cbhpe0GxoNOdVIejqKWrqNtO3sYj+AI5fzoreRIjfDV1usE+NUes2AeKcG9tGanGQ==
+"@msgpack/msgpack@^2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@msgpack/msgpack/-/msgpack-2.7.0.tgz#3a0fbe4e0406f6576895f990857e19da97376f18"
+  integrity sha512-mlRYq9FSsOd4m+3wZWatemn3hGFZPWNJ4JQOdrir4rrMK2PyIk26idKBoUWrqF3HJJHl+5GpRU+M0wEruJwecg==
 
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
@@ -2285,26 +2330,26 @@
     source-map "^0.7.3"
 
 "@react-spring/animated@~9.2.0":
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.2.3.tgz#271226099d356b7b6d99240375dd8f62f450e997"
-  integrity sha512-xxYOxxrk4r+yy218lVnkR027GXGvHcadDnnXRW0l6atcL+1AGYwimMwIuvzlvnsVnyoK0YUABEeGjk9ENOrVMQ==
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.2.4.tgz#062ecc0fdfef89f2541a42d8500428b70035f879"
+  integrity sha512-AfV6ZM8pCCAT29GY5C8/1bOPjZrv/7kD0vedjiE/tEYvNDwg9GlscrvsTViWR2XykJoYrDfdkYArrldWpsCJ5g==
   dependencies:
     "@react-spring/shared" "~9.2.0"
     "@react-spring/types" "~9.2.0"
 
 "@react-spring/core@~9.2.0":
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.2.3.tgz#b3926ef8f2694bfb251318d7b44abac1fa5321d0"
-  integrity sha512-8qJbj0xjjoYGVqdmNd2bVaFzKSAwrMVLweHkaYJiTY6p0g7LhSdt5KSl1MjYA4Rj6S4wO1KgefAPK6mH6MtGtA==
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.2.4.tgz#275a4a065e3a315a4f5fb28c9a6f62ce718c25d6"
+  integrity sha512-R+PwyfsjiuYCWqaTTfCpYpRmsP0h87RNm7uxC1Uxy7QAHUfHEm2sAHn+AdHPwq/MbVwDssVT8C5yf2WGcqiXGg==
   dependencies:
     "@react-spring/animated" "~9.2.0"
     "@react-spring/shared" "~9.2.0"
     "@react-spring/types" "~9.2.0"
 
-"@react-spring/konva@^9.2.3", "@react-spring/konva@~9.2.0":
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.3.tgz#7a0a1cd7b2b365c7e9c6a14002c3ec6f37f3663a"
-  integrity sha512-lycvgmlag3/CeemuoI2bTVgu/LK98VzNTyBClXyppduGwGwR/iJPYjOFraL7pTKyEGp2qMCo1URISc6W43PkQg==
+"@react-spring/konva@^9.2.4", "@react-spring/konva@~9.2.0":
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.4.tgz#e467b24b3b110ba496526c9001439ce561641e0d"
+  integrity sha512-19anDOIkfjcydDTfGgVIuZ3lruZxKubYGs9oHCswaP8SRLj7c1kkopJHUr/S4LXGxiIdqdF0XucWm0iTEPEq4w==
   dependencies:
     "@react-spring/animated" "~9.2.0"
     "@react-spring/core" "~9.2.0"
@@ -2312,9 +2357,9 @@
     "@react-spring/types" "~9.2.0"
 
 "@react-spring/native@~9.2.0":
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.3.tgz#a98c43fad6322e9c77e0fad602f83caf56f45c93"
-  integrity sha512-odPk/NfMgLTp9bh4Rz2joWKMiNIC4/n+m60lGG0Eznmg3nYgtZ5+GMcph3A5dn5XWJGLywxrPiy8/wf+5LaVtA==
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.4.tgz#0fd335a44c05023f5428df444d8f1aa3da7abfc9"
+  integrity sha512-xKJWKh5qOhSclpL3iuGwJRLoZzTNvlBEnIrMs8yh8xvX6z9Lmnu4uGu5DpfrnM1GzBvRoktoCoLEx/VcEYFSng==
   dependencies:
     "@react-spring/animated" "~9.2.0"
     "@react-spring/core" "~9.2.0"
@@ -2322,22 +2367,22 @@
     "@react-spring/types" "~9.2.0"
 
 "@react-spring/rafz@~9.2.0":
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.2.3.tgz#ffde337240b6880a2488d3ca67e4b01688881793"
-  integrity sha512-ThBI3HWp1Y82uRSFVpoykwgM3M9s3SJD6ilKKp9C2OTPcGhWiRGt1IMjzKPwB+F1NX3psbPTt30Bev8WzA/DQQ==
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.2.4.tgz#44793e9adc14dd0dcd1573d094368af11a89d73a"
+  integrity sha512-SOKf9eue+vAX+DGo7kWYNl9i9J3gPUlQjifIcV9Bzw9h3i30wPOOP0TjS7iMG/kLp2cdHQYDNFte6nt23VAZkQ==
 
 "@react-spring/shared@~9.2.0":
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.2.3.tgz#eaa4a4e6bf4f43d10b4a5c920a917e84047ac50e"
-  integrity sha512-MehdmKao1oUAwSEJo8BXOz1OGgsSav/dimD1Vz920hirShj9s/I4zKnWtkdK92xQ4n35D/xD3hATHkXbt/WSvg==
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.2.4.tgz#f9cc66ac5308a77293330a18518e34121f4008c1"
+  integrity sha512-ZEr4l2BxmyFRUvRA2VCkPfCJii4E7cGkwbjmTBx1EmcGrOnde/V2eF5dxqCTY3k35QuCegkrWe0coRJVkh8q2Q==
   dependencies:
     "@react-spring/rafz" "~9.2.0"
     "@react-spring/types" "~9.2.0"
 
 "@react-spring/three@~9.2.0":
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.3.tgz#1871a6c7dcb20ab284b8ce4af1805c86c9bb27ed"
-  integrity sha512-DMns/lTWmJ7EFJHf+7CERBAUWWZ314FPQGAcOXFHvMXfxfzBwV8/HGuvlKcdNsTqXfCi3PcYQEAWhpFF/YgVbA==
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.4.tgz#849c97658a6e1410b6f823ad21e2ee33feada820"
+  integrity sha512-ljFig7XW099VWwRPKPUf+4yYLivp/sSWXN3oO5SJOF/9BSoV1quS/9chZ5Myl5J14od3CsHf89Tv4FdlX5kHlA==
   dependencies:
     "@react-spring/animated" "~9.2.0"
     "@react-spring/core" "~9.2.0"
@@ -2345,14 +2390,14 @@
     "@react-spring/types" "~9.2.0"
 
 "@react-spring/types@~9.2.0":
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.3.tgz#08b5ca1cb262328529ee558796395f073b6029b0"
-  integrity sha512-G7AWUJavwsvvvprnYmqUXE5N1XKINktc8V72ipvkFTE3DD3GApYpX/ORNmieJljKJYvBSBzpRSIzk2qELUs30Q==
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.4.tgz#2365ce9d761f548a9adcb2cd68714bf26765a5de"
+  integrity sha512-zHUXrWO8nweUN/ISjrjqU7GgXXvoEbFca1CgiE0TY0H/dqJb3l+Rhx8ecPVNYimzFg3ZZ1/T0egpLop8SOv4aA==
 
 "@react-spring/web@~9.2.0":
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.3.tgz#b9037719b489863ca2ad39caaacff6d315bbaea8"
-  integrity sha512-dWRcgVDbO2UI9I03n/HVmCx9tY++Na+RwRzkzXv3E53BcFsjvnWGArnpj+xE/XgXiaII3ep2RmUj5jyYoukqGg==
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.4.tgz#c6d5464a954bfd0d7bc90117050f796a95ebfa08"
+  integrity sha512-vtPvOalLFvuju/MDBtoSnCyt0xXSL6Amyv82fljOuWPl1yGd4M1WteijnYL9Zlriljl0a3oXcPunAVYTD9dbDQ==
   dependencies:
     "@react-spring/animated" "~9.2.0"
     "@react-spring/core" "~9.2.0"
@@ -2360,9 +2405,9 @@
     "@react-spring/types" "~9.2.0"
 
 "@react-spring/zdog@~9.2.0":
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.3.tgz#f41cf4f99ddde1cbb9a4c76202a4d2bf8d4b9886"
-  integrity sha512-Ne06eVaV/SQrtdMixLPmkfO2mhoqpkPEAsqW92Bh+hODdEdPwVvexitKPx29uc6F2/zOu9t8NAJfqbOsq3j1Hw==
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.4.tgz#db1d1924fe9920e917d889c4d3bb138bd0885cf1"
+  integrity sha512-rv7ptedS37SHr6yuCbRkUErAzAhebdgt8f4KUtZWzseC+7qLNkaZWf+uujgsb881qAuX9b9yz8rre9UKeYepgw==
   dependencies:
     "@react-spring/animated" "~9.2.0"
     "@react-spring/core" "~9.2.0"
@@ -2397,78 +2442,78 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@sentry/browser@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.3.0.tgz#523430667bff290220909fb96f35706ff808fed6"
-  integrity sha512-Rse9j5XwN9n7GnfW1mNscTS4YQ0oiBNJcaSk3Mw/vQT872Wh60yKyx5wxAw5GujFZI0NgdyPlZwZ/tGQwirRxA==
+"@sentry/browser@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.11.0.tgz#9e90bbc0488ebcdd1e67937d8d5b4f13c3f6dee0"
+  integrity sha512-Qr2QRA0t5/S9QQqxzYKvM9W8prvmiWuldfwRX4hubovXzcXLgUi4WK0/H612wSbYZ4dNAEcQbtlxFWJNN4wxdg==
   dependencies:
-    "@sentry/core" "6.3.0"
-    "@sentry/types" "6.3.0"
-    "@sentry/utils" "6.3.0"
+    "@sentry/core" "6.11.0"
+    "@sentry/types" "6.11.0"
+    "@sentry/utils" "6.11.0"
     tslib "^1.9.3"
 
-"@sentry/core@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.3.0.tgz#3b8db24918a00c0b77f1663fc6d9be925f66bb3e"
-  integrity sha512-voot/lJ9gRXB6bx6tVqbEbD6jOd4Sx6Rfmm6pzfpom9C0q+fjIZTatTLq8GdXj8DzxaH1MBDSwtaq/eC3NqYpA==
+"@sentry/core@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.11.0.tgz#40e94043afcf6407a109be26655c77832c64e740"
+  integrity sha512-09TB+f3pqEq8LFahFWHO6I/4DxHo+NcS52OkbWMDqEi6oNZRD7PhPn3i14LfjsYVv3u3AESU8oxSEGbFrr2UjQ==
   dependencies:
-    "@sentry/hub" "6.3.0"
-    "@sentry/minimal" "6.3.0"
-    "@sentry/types" "6.3.0"
-    "@sentry/utils" "6.3.0"
+    "@sentry/hub" "6.11.0"
+    "@sentry/minimal" "6.11.0"
+    "@sentry/types" "6.11.0"
+    "@sentry/utils" "6.11.0"
     tslib "^1.9.3"
 
-"@sentry/hub@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.3.0.tgz#4225b3b0f31fe47f24d80753b257a4b57de5d651"
-  integrity sha512-lAnW3Om66t9IR+t1wya1NpOF9lGbvYG6Ca8wxJJGJ1t2PxKwyxpZKzRx0q8M1QFhlZ5cETCzxmM7lBEZ4QVCBg==
+"@sentry/hub@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.11.0.tgz#ddf9ddb0577d1c8290dc02c0242d274fe84d6c16"
+  integrity sha512-pT9hf+ZJfVFpoZopoC+yJmFNclr4NPqPcl2cgguqCHb69DklD1NxgBNWK8D6X05qjnNFDF991U6t1mxP9HrGuw==
   dependencies:
-    "@sentry/types" "6.3.0"
-    "@sentry/utils" "6.3.0"
+    "@sentry/types" "6.11.0"
+    "@sentry/utils" "6.11.0"
     tslib "^1.9.3"
 
-"@sentry/integrations@^6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-6.3.0.tgz#2091889d1d4a319d48e84ebce43405c6a7fee5b7"
-  integrity sha512-/bl0wykJr+7zJHmnAulI+/J1kT5AI/019jWSXX7nmfIhp2sRXNUw0jeNVh+xfwrbR6Ik6IleAyzwHNYKzedGVQ==
+"@sentry/integrations@^6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-6.11.0.tgz#da0706306b5ff13eaae5771095d7fc82c9f4c68b"
+  integrity sha512-CtSMW+PJlw+EunDJ+9LCWxRcXQIsUDlcUZOhFyAdmM5YIbg2V0IqHtnYg8X2sSGRO3aTEc7lOG5nF4lqr3R0yg==
   dependencies:
-    "@sentry/types" "6.3.0"
-    "@sentry/utils" "6.3.0"
+    "@sentry/types" "6.11.0"
+    "@sentry/utils" "6.11.0"
     localforage "^1.8.1"
     tslib "^1.9.3"
 
-"@sentry/minimal@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.3.0.tgz#e64d87c92a4676a11168672a96589f46985f2b22"
-  integrity sha512-ZdPUwdPQkaKroy67NkwQRqmnfKyd/C1OyouM9IqYKyBjAInjOijwwc/Rd91PMHalvCOGfp1scNZYbZ+YFs/qQQ==
+"@sentry/minimal@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.11.0.tgz#806d5512658370e40827b3e3663061db708fff33"
+  integrity sha512-XkZ7qrdlGp4IM/gjGxf1Q575yIbl5RvPbg+WFeekpo16Ufvzx37Mr8c2xsZaWosISVyE6eyFpooORjUlzy8EDw==
   dependencies:
-    "@sentry/hub" "6.3.0"
-    "@sentry/types" "6.3.0"
+    "@sentry/hub" "6.11.0"
+    "@sentry/types" "6.11.0"
     tslib "^1.9.3"
 
-"@sentry/react@^6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-6.3.0.tgz#97763bf006991460126fa7235ebc662cd340f804"
-  integrity sha512-5+Q2p65WMxslaW96209wUp0kfqT0HTyVV+4TTCIOA6Aj3rnKesQaR44mXHXlQVTQh2/8fk1PTkMEsvWJdSPkjA==
+"@sentry/react@^6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-6.11.0.tgz#291a184b0f1ae75a78d592e78171f0a1c3609490"
+  integrity sha512-Qq57pqxE5VVsRp/ou+xv/R15ds54vv8F4/WbS+a4vEB1KqdX2NzfFDuKni5G+pZD4XNl9CI+LeUyiKtD4K/k7Q==
   dependencies:
-    "@sentry/browser" "6.3.0"
-    "@sentry/minimal" "6.3.0"
-    "@sentry/types" "6.3.0"
-    "@sentry/utils" "6.3.0"
+    "@sentry/browser" "6.11.0"
+    "@sentry/minimal" "6.11.0"
+    "@sentry/types" "6.11.0"
+    "@sentry/utils" "6.11.0"
     hoist-non-react-statics "^3.3.2"
     tslib "^1.9.3"
 
-"@sentry/types@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.3.0.tgz#919cc1870f34b7126546c77e3c695052795d3add"
-  integrity sha512-xWyCYDmFPjS5ex60kxOOHbHEs4vs00qHbm0iShQfjl4OSg9S2azkcWofDmX8Xbn0FSOUXgdPCjNJW1B0bPVhCA==
+"@sentry/types@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.11.0.tgz#5122685478d32ddacd3a891cbcf550012df85f7c"
+  integrity sha512-gm5H9eZhL6bsIy/h3T+/Fzzz2vINhHhqd92CjHle3w7uXdTdFV98i2pDpErBGNTSNzbntqOMifYEB5ENtZAvcg==
 
-"@sentry/utils@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.3.0.tgz#e28645b6d4acd03a478e58bfe112ea02f81e94a0"
-  integrity sha512-NZzw4oLelgvCsVBG2e+ZtFtaBvgA7rZYtcGFbZTphhAlYoJ6JMCQUzYk0iwJK79yR1quh510x4UE0jynvvToWg==
+"@sentry/utils@6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.11.0.tgz#d1dee4faf4d9c42c54bba88d5a66fb96b902a14c"
+  integrity sha512-IOvyFHcnbRQxa++jO+ZUzRvFHEJ1cZjrBIQaNVc0IYF0twUOB5PTP6joTcix38ldaLeapaPZ9LGfudbvYvxkdg==
   dependencies:
-    "@sentry/types" "6.3.0"
+    "@sentry/types" "6.11.0"
     tslib "^1.9.3"
 
 "@sinonjs/commons@^1.7.0":
@@ -2485,10 +2530,10 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@stripe/stripe-js@^1.13.1":
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.13.1.tgz#71384666dbd575f154bcdf923f5aa0f7be22d31c"
-  integrity sha512-mmW+38/RJiWP0B7jmekL+MTDpkDMi34ygZ3j0NIoGa/h6eAXlGDA4lOqqg6aMH9Jd2RzDUndKxvSPPQnFnpdqw==
+"@stripe/stripe-js@^1.16.0":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.16.0.tgz#73bce24fb7f47d719caa6b151e58e49b4167d463"
+  integrity sha512-ZSHbiwTrISoaTbpercmYGuY7QTg7HxfFyNgbJBaYbwHWbzMhpEdGTsmMpaBXIU6iiqwEEDaIyD8O6yJ+H5DWCg==
 
 "@styled-system/background@^5.1.2":
   version "5.1.2"
@@ -2700,66 +2745,68 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
-"@tensorflow/tfjs-backend-cpu@3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-3.3.0.tgz#aa0a3ed2c6237a6e0c169678c5bd4b5a88766b1c"
-  integrity sha512-DLctv+PUZni26kQW1hq8jwQQ8u+GGc/p764WQIC4/IDagGtfGAUW1mHzWcTxtni2l4re1VrwE41ogWLhv4sGHg==
+"@tensorflow/tfjs-backend-cpu@3.8.0":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-3.8.0.tgz#1b0655d5ca1b57370c1ea9586d571f3d63ca7393"
+  integrity sha512-iSwHrqX0Ixh1kelfmxIgChKft/KrcZk9EMHQcX+878XnX7mxB2HfWUqfiJVIcq+Fyr4I3oE4ncbbpmlKMxA85A==
   dependencies:
     "@types/seedrandom" "2.4.27"
     seedrandom "2.4.3"
 
-"@tensorflow/tfjs-backend-webgl@3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-3.3.0.tgz#29dd665f6a856c9defcb9108164f845e1fdcd02e"
-  integrity sha512-GWCtXbrjPTyye3ooId9GlcNDwnIMskZarUpNIQ5g/zeISLfwEQoutA/UqJF+HzuEHgGMsWFkmaO3xKVT7UMpdg==
+"@tensorflow/tfjs-backend-webgl@3.8.0":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-3.8.0.tgz#35fc3c69979805a0f84a5ffa99fe431512c72f6b"
+  integrity sha512-Pjv+oWPf+7YS8kz/UFh2QBeD3F74R63AEU48a44LVh63YHXvdRg/M/Mvhjd55Oe0crDbBLej287SgVB8DHjUXg==
   dependencies:
-    "@tensorflow/tfjs-backend-cpu" "3.3.0"
+    "@tensorflow/tfjs-backend-cpu" "3.8.0"
     "@types/offscreencanvas" "~2019.3.0"
     "@types/seedrandom" "2.4.27"
     "@types/webgl-ext" "0.0.30"
     "@types/webgl2" "0.0.5"
     seedrandom "2.4.3"
 
-"@tensorflow/tfjs-converter@3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-converter/-/tfjs-converter-3.3.0.tgz#d9f2ffd0fbdbb47c07d5fd7c3e5dc180cff317aa"
-  integrity sha512-k57wN4yelePhmO9orcT/wzGMIuyedrMpVtg0FhxpV6BQu0+TZ/ti3W4Kb97GWJsoHKXMoing9SnioKfVnBW6hw==
+"@tensorflow/tfjs-converter@3.8.0":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-converter/-/tfjs-converter-3.8.0.tgz#78dd1c96acd775ceb112cd0c30deb5120a8a7536"
+  integrity sha512-IWalZtKNfsSHt9He3Tvfje71gwMnFg5msQEiEnAtVnz1Zly0Yi0mycGLp5TPyqPhZCcJ+i9OhgkAlL4sbjP1hw==
 
-"@tensorflow/tfjs-core@3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-core/-/tfjs-core-3.3.0.tgz#3d26bd03cb58e0ecf46c96d118c39c4a90b7f5ed"
-  integrity sha512-6G+LcCiQBl4Kza5mDbWbf8QSWBTW3l7SDjGhQzMO1ITtQatHzxkuHGHcJ4CTUJvNA0JmKf4QJWOvlFqEmxwyLQ==
+"@tensorflow/tfjs-core@3.8.0":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-core/-/tfjs-core-3.8.0.tgz#b7390db21bbcbf4c3da0c540d9318164d987767c"
+  integrity sha512-0VKqNpnTiXIeOql3dnEyPOxKA9yDA366onv3sphm6k8KAzkr+is+GHOHzmo8mL7+AujiOb6o0J7BYhr7yvpNjA==
   dependencies:
+    "@types/long" "^4.0.1"
     "@types/offscreencanvas" "~2019.3.0"
     "@types/seedrandom" "2.4.27"
     "@types/webgl-ext" "0.0.30"
+    long "4.0.0"
     node-fetch "~2.6.1"
     seedrandom "2.4.3"
 
-"@tensorflow/tfjs-data@3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-data/-/tfjs-data-3.3.0.tgz#ba943bd6a486fa4cb3ca312c12646ea4dcf6cce4"
-  integrity sha512-0x28tRe6RJu5GmYq3IYN2GNnOgXU0nY+o6zZrlijkK+W3vjSTJlZzaBSifoeD6J8gzVpjs8W8qd/JKHQ1MQp8w==
+"@tensorflow/tfjs-data@3.8.0":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-data/-/tfjs-data-3.8.0.tgz#eb60485c35f5e493cab675e3071dc814d1c0dc5d"
+  integrity sha512-TuzI2ggCKb3lLUAsTGT/CMOkMZgrmgu1dQckEnft621RDJSQTN1o7xC0YLDmuwLwfUmWJax8TvsSxXBy2M5GSg==
   dependencies:
     "@types/node-fetch" "^2.1.2"
     node-fetch "~2.6.1"
 
-"@tensorflow/tfjs-layers@3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-layers/-/tfjs-layers-3.3.0.tgz#d2097c5b22ec12e5fdbe470a88ca0a34a95ca11f"
-  integrity sha512-qO+TL2I29vWUiuFcQJXNyayWFYagwR+SIfbex8p5jjYaCGHGwE5GQcrH+ngoCgKZxm5tdMvYJsJPnih2M3fYzQ==
+"@tensorflow/tfjs-layers@3.8.0":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-layers/-/tfjs-layers-3.8.0.tgz#f8afbc375aacab7457ac5d6a83d5c5b292105681"
+  integrity sha512-O7r0zkGFM2DTS2NdWhGUrKNgoY1GR7IX5aGIj50SQ8WnPWwY9gaVI7b+euP2Yg7A6kDiFXJIST+MY9EottyqSA==
 
-"@tensorflow/tfjs@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs/-/tfjs-3.3.0.tgz#db92099dd48c0eb1c1673f705125d2b57496a1a3"
-  integrity sha512-xo22GCUCGcPtNGIdDpLPrp9ms3atXmzX8AF4y3aIBEwK5KlvGe+ZhcoQ2xEOCPQGBr7NB7AO6rwT8gRoziAHVg==
+"@tensorflow/tfjs@^3.8.0":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs/-/tfjs-3.8.0.tgz#76e9e5447c1d1725bcc25904c2c8c21f615acb0f"
+  integrity sha512-4tVMEfGT8l8JBei/O0K0j7pcNbWR7C9r6WAuvoFXQBiu6FkwUhnM+rNrBHoh1/UaYKKm1enVbiyAP9+sbSFRaw==
   dependencies:
-    "@tensorflow/tfjs-backend-cpu" "3.3.0"
-    "@tensorflow/tfjs-backend-webgl" "3.3.0"
-    "@tensorflow/tfjs-converter" "3.3.0"
-    "@tensorflow/tfjs-core" "3.3.0"
-    "@tensorflow/tfjs-data" "3.3.0"
-    "@tensorflow/tfjs-layers" "3.3.0"
+    "@tensorflow/tfjs-backend-cpu" "3.8.0"
+    "@tensorflow/tfjs-backend-webgl" "3.8.0"
+    "@tensorflow/tfjs-converter" "3.8.0"
+    "@tensorflow/tfjs-core" "3.8.0"
+    "@tensorflow/tfjs-data" "3.8.0"
+    "@tensorflow/tfjs-layers" "3.8.0"
     argparse "^1.0.10"
     chalk "^4.1.0"
     core-js "3"
@@ -2767,23 +2814,23 @@
     yargs "^16.0.3"
 
 "@testing-library/dom@^7.28.1":
-  version "7.30.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.30.0.tgz#53697851f7708a1448cc30b74a2ea056dd709cd6"
-  integrity sha512-v4GzWtltaiDE0yRikLlcLAfEiiK8+ptu6OuuIebm9GdC2XlZTNDPGEfM2UkEtnH7hr9TRq2sivT5EA9P1Oy7bw==
+  version "7.31.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.31.2.tgz#df361db38f5212b88555068ab8119f5d841a8c4a"
+  integrity sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
     "@types/aria-query" "^4.2.0"
     aria-query "^4.2.2"
     chalk "^4.1.0"
-    dom-accessibility-api "^0.5.4"
+    dom-accessibility-api "^0.5.6"
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
 "@testing-library/jest-dom@^5.11.9":
-  version "5.11.9"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.9.tgz#e6b3cd687021f89f261bd53cbe367041fbd3e975"
-  integrity sha512-Mn2gnA9d1wStlAIT2NU8J15LNob0YFBVjs2aEQ3j8rsfRQo+lAs7/ui1i2TGaJjapLmuNPLTsrm+nPjmZDwpcQ==
+  version "5.14.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz#8501e16f1e55a55d675fe73eecee32cdaddb9766"
+  integrity sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==
   dependencies:
     "@babel/runtime" "^7.9.2"
     "@types/testing-library__jest-dom" "^5.9.1"
@@ -2791,78 +2838,95 @@
     chalk "^3.0.0"
     css "^3.0.0"
     css.escape "^1.5.1"
+    dom-accessibility-api "^0.5.6"
     lodash "^4.17.15"
     redent "^3.0.0"
 
 "@testing-library/react@^11.2.5":
-  version "11.2.5"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.5.tgz#ae1c36a66c7790ddb6662c416c27863d87818eb9"
-  integrity sha512-yEx7oIa/UWLe2F2dqK0FtMF9sJWNXD+2PPtp39BvE0Kh9MJ9Kl0HrZAgEuhUJR+Lx8Di6Xz+rKwSdEPY2UV8ZQ==
+  version "11.2.7"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.7.tgz#b29e2e95c6765c815786c0bc1d5aed9cb2bf7818"
+  integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^7.28.1"
 
 "@testing-library/user-event@^13.0.2":
-  version "13.0.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.0.2.tgz#f629bfd44fb09c9e3b18e048076b397e6e97952d"
-  integrity sha512-OYlNDcoqNZJhQvP5tsNM4/i27XIyA5DMi8xMwAJ0VLGW5BqjsSrYtL29WvHEdHu+cI6wo6UMHy6atdwtTNVUiw==
+  version "13.2.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.2.1.tgz#7a71a39e50b4a733afbe2916fa2b99966e941f98"
+  integrity sha512-cczlgVl+krjOb3j1625usarNEibI0IFRJrSWX9UsJ1HKYFgCQv9Nb7QAipUDXl3Xdz8NDTsiS78eAkPSxlzTlw==
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-"@theme-ui/color-modes@0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.3.5.tgz#e280d1ff8be9f648c161b899e5049cb45a73cb90"
-  integrity sha512-3n5ExAnp1gAuVVFdGF2rRLyrVsa7qtmUXx+gj1wPJsADq23EE4ctkppC+aIfPFxT196WhR8fjErrVuO7Rh+wAg==
+"@theme-ui/color-modes@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.10.0.tgz#85071f16d7d4458f3dab5a7af8b9ea459da4dcd0"
+  integrity sha512-6sZaagCFK48p2YjecLljFwPkiB3/R9dMNKUQC3+fnaH3N9FcsflNWpjKAYhtQ5QLKvYacFdqczT4YaMtGwKb/Q==
   dependencies:
-    "@emotion/core" "^10.0.0"
-    "@theme-ui/core" "0.3.5"
-    "@theme-ui/css" "0.3.5"
+    "@emotion/react" "^11.1.1"
+    "@theme-ui/core" "0.10.0"
+    "@theme-ui/css" "0.10.0"
     deepmerge "^4.2.2"
 
-"@theme-ui/components@0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.3.5.tgz#cd0b5a1292f88b3df2c5b6b299b0a6cdc6da52e5"
-  integrity sha512-RdWwnN43H1Tq80lGCu6icNuYCWoHHNtwH+LJGaGfiPkv/uMXWrwzKPLMiAuYM5b3ofKtmdaAcxZLjqAld97jkw==
+"@theme-ui/components@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.10.0.tgz#c1aa9cade71e5a6cf7c19f9e0ade900122ef23f9"
+  integrity sha512-zPA+16fP+R140kns+3FBhybsPzNjcCWHgXcwIPjww1dfDnlXRa7al9Nz4Y8zyWvk1wNiGqUa09Y1sabK6EYspQ==
   dependencies:
-    "@emotion/core" "^10.0.0"
-    "@emotion/styled" "^10.0.0"
+    "@emotion/react" "^11.1.1"
+    "@emotion/styled" "^11.0.0"
     "@styled-system/color" "^5.1.2"
     "@styled-system/should-forward-prop" "^5.1.2"
     "@styled-system/space" "^5.1.2"
-    "@theme-ui/css" "0.3.5"
+    "@theme-ui/css" "0.10.0"
+    "@types/styled-system" "^5.1.10"
 
-"@theme-ui/core@0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.3.5.tgz#096ded31193bfe83c50d09eca0fb086cab2ac7e1"
-  integrity sha512-80gbG4BW0ZQgZ8TWSG7vY72uXDxmkI/GttjpJee7AJlWVrPh7RCD2E3cuFPjqXzt7o4BJ9lZSHmTXcLzixNtRw==
+"@theme-ui/core@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.10.0.tgz#2373d53368da5fa561915414ade070a9de0e9678"
+  integrity sha512-3DeTHGqyqIi05JCsJ+G+fqW6YsX/oGJiaAvMgLfd86tGdJOnDseEBQG41oDFHSWtQSJDpBcoFgAWMGITmYdH+g==
   dependencies:
-    "@emotion/core" "^10.0.0"
-    "@theme-ui/css" "0.3.5"
+    "@emotion/react" "^11.1.1"
+    "@theme-ui/css" "0.10.0"
+    "@theme-ui/parse-props" "0.10.0"
     deepmerge "^4.2.2"
 
-"@theme-ui/css@0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.3.5.tgz#cfd228c74bcc7840a7fe9e507858486ee4d403dc"
-  integrity sha512-XqsyXmifbnHOui1flSq4V7Lb3U+06Dbn2Q/leyr/cRd6Xgc0naiztdmD0MbXNvxgU51a2Ur9hyP4PnO5wE0yRg==
-
-"@theme-ui/mdx@0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.3.5.tgz#60d26102dcc8b2095269de461dcf8f51fa18cf4c"
-  integrity sha512-KMf5kkEcItQ3qIj7dston/kBOZc82ST2R0pUcyk/u8ZclX4ingRtZkMxm2zpmxybzdSUY3DIKf2MTK9CxUSpOQ==
+"@theme-ui/css@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.10.0.tgz#871f63334fb138491406c32f8347d53b19846a9b"
+  integrity sha512-Up3HqXoy2ERn/9gVxApCSl2n9vwtHBwPrYlMyEjX0YPs/rxmo+Aqe3kAxO+SG9idMw08mtdaDfMIFaPsBE5ovA==
   dependencies:
-    "@emotion/core" "^10.0.0"
-    "@emotion/styled" "^10.0.0"
-    "@mdx-js/react" "^1.0.0"
+    "@emotion/react" "^11.1.1"
+    csstype "^3.0.5"
 
-"@theme-ui/theme-provider@0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.3.5.tgz#98ad67d8e2e38a6347ea604878202f49fea38088"
-  integrity sha512-C1kVsGyrh/pqO/j4+KSF5IvVW1DOnZoQmpaJ9EjyU4bqY0PCTZfuNdNPfydKaDWiYxrKGXKBeX0xjvLLU6R0zQ==
+"@theme-ui/mdx@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.10.0.tgz#14124cb194df8023f7253391900d8d17a6011a92"
+  integrity sha512-IcDrQONVrOFQFCFdyrlNoTTKmhw7ELtrLktRYmmWtCEz+KHpBiEVdxNo2yvz/05zF2BPGKOqu4wkMpUR13wNSQ==
   dependencies:
-    "@emotion/core" "^10.0.0"
-    "@theme-ui/color-modes" "0.3.5"
-    "@theme-ui/core" "0.3.5"
-    "@theme-ui/mdx" "0.3.5"
+    "@emotion/react" "^11.1.1"
+    "@emotion/styled" "^11.0.0"
+    "@mdx-js/react" "^1.6.22"
+    "@theme-ui/core" "0.10.0"
+    "@theme-ui/css" "0.10.0"
+
+"@theme-ui/parse-props@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/parse-props/-/parse-props-0.10.0.tgz#8d2f4f3b3edafd925c3872ddd559e2b62006f43f"
+  integrity sha512-UfcLyThXYsB9azc8qbsZVgbF7xf+GLF2Hhy+suyjwQ3XSVOx97B5ZsuzCNUGbggtBw4dXayJgRmMz0FHyp0L8Q==
+  dependencies:
+    "@emotion/react" "^11.1.1"
+    "@theme-ui/css" "0.10.0"
+
+"@theme-ui/theme-provider@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.10.0.tgz#16586af579bef804f1e4997a131134d2465bfd5d"
+  integrity sha512-1AVsegjEAw7uidr0/qJMoKktKbdXuXRjfukI9712GZleft3dzoHhkQUO7IefXjbafyu/plzo/WTXkbz0A4uhmA==
+  dependencies:
+    "@emotion/react" "^11.1.1"
+    "@theme-ui/color-modes" "0.10.0"
+    "@theme-ui/core" "0.10.0"
+    "@theme-ui/css" "0.10.0"
+    "@theme-ui/mdx" "0.10.0"
 
 "@types/anymatch@*":
   version "1.3.1"
@@ -2870,9 +2934,9 @@
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
 "@types/aria-query@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
-  integrity sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
+  integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
 
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.12"
@@ -2907,11 +2971,35 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/color-convert@*":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.0.tgz#8f5ee6b9e863dcbee5703f5a517ffb13d3ea4e22"
+  integrity sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==
+  dependencies:
+    "@types/color-name" "*"
+
+"@types/color-name@*":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
+"@types/color@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.2.tgz#3779043e782f562aa9157b5fc6bd07e14fd8e7f3"
+  integrity sha512-INiJl6sfNn8iyC5paxVzqiVUEj2boIlFki02uRTAkKwAj++7aAF+ZfEv/XrIeBa0XI/fTZuDHW8rEEcEVnON+Q==
+  dependencies:
+    "@types/color-convert" "*"
+
 "@types/component-emitter@^1.2.10":
   version "1.2.10"
   resolved "https://registry.yarnpkg.com/@types/component-emitter/-/component-emitter-1.2.10.tgz#ef5b1589b9f16544642e473db5ea5639107ef3ea"
   integrity sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg==
 
+"@types/deep-diff@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/deep-diff/-/deep-diff-1.0.1.tgz#eae15119c68b72b541731872a2883da89dc39396"
+  integrity sha512-cZIq2GFcPmW0/M7dtLuphyoU8f3zpTcBgV+wkFFJ0CK0lwRVGGLaBSJZ98qs4LjtLimPq1Bb2VJnhGn6SEE4IA==
+
 "@types/eslint@^7.2.6":
   version "7.2.7"
   resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.7.tgz#f7ef1cf0dceab0ae6f9a976a0a9af14ab1baca26"
@@ -2930,6 +3018,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/file-saver@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.3.tgz#b734c4f5a04d20615eaed3dc106e2ab321082009"
+  integrity sha512-MBIou8pd/41jkff7s97B47bc9+p0BszqqDJsO51yDm49uUxeKzrfuNl5fSLC6BpLEWKA8zlwyqALVmXrFwoBHQ==
+
 "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
@@ -2945,6 +3038,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/history@*":
+  version "4.7.9"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724"
+  integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@@ -2963,16 +3061,24 @@
     "@types/istanbul-lib-coverage" "*"
 
 "@types/istanbul-reports@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz#508b13aa344fa4976234e75dddcc34925737d821"
-  integrity sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
+  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
   dependencies:
     "@types/istanbul-lib-report" "*"
 
 "@types/jest@*":
-  version "26.0.15"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.15.tgz#12e02c0372ad0548e07b9f4e19132b834cb1effe"
-  integrity sha512-s2VMReFXRg9XXxV+CW9e5Nz8fH2K1aEhwgjUqPPbQd7g95T0laAcvLv032EhFHIa5GHsZ8W7iJEQVaJq6k3Gog==
+  version "27.0.0"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.0.0.tgz#f1c28f741371739c7cd0e8edb5ed8e67acfa6c35"
+  integrity sha512-IlpQZVpxufe+3qPaAqEoSPHVSxnJh1cf0BqqWHJeKiAUbwnHdmNzjP3ZCWSZSTbmAGXQPNk9QmM3Bif0pR54rg==
+  dependencies:
+    jest-diff "^26.0.0"
+    pretty-format "^26.0.0"
+
+"@types/jest@^26.0.23":
+  version "26.0.24"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.24.tgz#943d11976b16739185913a1936e0de0c4a7d595a"
+  integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==
   dependencies:
     jest-diff "^26.0.0"
     pretty-format "^26.0.0"
@@ -2987,29 +3093,77 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash.chunk@^4.2.6":
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.chunk/-/lodash.chunk-4.2.6.tgz#9d35f05360b0298715d7f3d9efb34dd4f77e5d2a"
+  integrity sha512-SPlusB7jxXyGcTXYcUdWr7WmhArO/rmTq54VN88iKMxGUhyg79I4Q8n4riGn3kjaTjOJrVlHhxgX/d7woak5BQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash.clonedeep@^4.5.6":
+  version "4.5.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.6.tgz#3b6c40a0affe0799a2ce823b440a6cf33571d32b"
+  integrity sha512-cE1jYr2dEg1wBImvXlNtp0xDoS79rfEdGozQVgliDZj1uERH4k+rmEMTudP9b4VQ8O6nRb5gPqft0QzEQGMQgA==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash.get@^4.4.6":
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.get/-/lodash.get-4.4.6.tgz#0c7ac56243dae0f9f09ab6f75b29471e2e777240"
+  integrity sha512-E6zzjR3GtNig8UJG/yodBeJeIOtgPkMgsLjDU3CbgCAPC++vJ0eCMnJhVpRZb/ENqEFlov1+3K9TKtY4UdWKtQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash.set@^4.3.6":
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.set/-/lodash.set-4.3.6.tgz#33e635c2323f855359225df6a5c8c6f1f1908264"
+  integrity sha512-ZeGDDlnRYTvS31Laij0RsSaguIUSBTYIlJFKL3vm3T2OAZAQj2YpSvVWJc0WiG4jqg9fGX6PAPGvDqBcHfSgFg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.170"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.170.tgz#0d67711d4bf7f4ca5147e9091b847479b87925d6"
+  integrity sha512-bpcvu/MKHHeYX+qeEN8GE7DIravODWdACVA1ctevD8CN24RhPZIKMn9ntfAsrvLfSX3cR5RrBKAbYm9bGs0A+Q==
+
+"@types/long@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.1.tgz#459c65fa1867dafe6a8f322c4c51695663cc55e9"
+  integrity sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
 "@types/node-fetch@^2.1.2":
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.7.tgz#20a2afffa882ab04d44ca786449a276f9f6bbf3c"
-  integrity sha512-o2WVNf5UhWRkxlf6eq+jMZDu7kjgpgJfl4xVNlvryc95O/6F2ld8ztKX+qu+Rjyet93WAWm5LjeX9H5FGkODvw==
+  version "2.5.12"
+  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.12.tgz#8a6f779b1d4e60b7a57fb6fd48d84fb545b9cc66"
+  integrity sha512-MKgC4dlq4kKNa/mYrwpKfzQMB5X3ee5U6fSprkKpToBqBmX4nFZL9cW5jl6sWn+xpRJ7ypWh2yyqqr8UUCstSw==
   dependencies:
     "@types/node" "*"
     form-data "^3.0.0"
 
 "@types/node@*":
-  version "14.14.8"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.8.tgz#2127bd81949a95c8b7d3240f3254352d72563aec"
-  integrity sha512-z/5Yd59dCKI5kbxauAJgw6dLPzW+TNOItNE00PkpzNwUIEwdj/Lsqwq94H5DdYBX7C13aRA0CY32BK76+neEUA==
+  version "16.4.13"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.13.tgz#7dfd9c14661edc65cccd43a29eb454174642370d"
+  integrity sha512-bLL69sKtd25w7p1nvg9pigE4gtKVpGTPojBFLMkGHXuUgap2sLqQt2qUnqmVCDfzGUL0DRNZP+1prIZJbMeAXg==
+
+"@types/node@^15.6.0":
+  version "15.14.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.7.tgz#29fea9a5b14e2b75c19028e1c7a32edd1e89fe92"
+  integrity sha512-FA45p37/mLhpebgbPWWCKfOisTjxGK9lwcHlJ6XVLfu3NgfcazOJHdYUZCWPMK8QX4LhNZdmfo6iMz9FqpUbaw==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
+"@types/normalize-wheel@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/normalize-wheel/-/normalize-wheel-1.0.0.tgz#d973b53557dc59c6136b5b737ae930e9218cb452"
+  integrity sha512-SzWYVzP7Q8w4/976Gi3a6+J/8/VNTq6AW7wDafXorr1MYTxyZqJTbUvwQt1hiG3PXyFUMIKr+s6q3+MLz2c/TQ==
+
 "@types/offscreencanvas@~2019.3.0":
   version "2019.3.0"
   resolved "https://registry.yarnpkg.com/@types/offscreencanvas/-/offscreencanvas-2019.3.0.tgz#3336428ec7e9180cf4566dfea5da04eb586a6553"
@@ -3025,11 +3179,78 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.5.tgz#b6ab3bba29e16b821d84e09ecfaded462b816b00"
   integrity sha512-UEyp8LwZ4Dg30kVU2Q3amHHyTn1jEdhCIE59ANed76GaT1Vp76DD3ZWSAxgCrw6wJ0TqeoBpqmfUHiUDPs//HQ==
 
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
 "@types/q@^1.5.1":
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-dom@*", "@types/react-dom@^17.0.5":
+  version "17.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
+  integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-modal@^3.12.0":
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.12.1.tgz#fd1558762ed96020291b831190c85bc721aad3c1"
+  integrity sha512-pgq/jAnSJqHX7NXTFyUSXwlFOBUGngBXavFmAIKE7bkM7WNKyF/9XvmMr2+eIBOvR8waiA0Nj2qHfDZqMgeT6w==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-router-dom@^5.1.7":
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.8.tgz#bf3e1c8149b3d62eaa206d58599de82df0241192"
+  integrity sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.16.tgz#f3ba045fb96634e38b21531c482f9aeb37608a99"
+  integrity sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
+"@types/react-select@^4.0.17":
+  version "4.0.17"
+  resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-4.0.17.tgz#2e5ab4042c09c988bfc2711550329b0c3c9f8513"
+  integrity sha512-ZK5wcBhJaqC8ntQl0CJvK2KXNNsk1k5flM7jO+vNPPlceRzdJQazA6zTtQUyNr6exp5yrAiwiudtYxgGlgGHLg==
+  dependencies:
+    "@emotion/serialize" "^1.0.0"
+    "@types/react" "*"
+    "@types/react-dom" "*"
+    "@types/react-transition-group" "*"
+
+"@types/react-transition-group@*":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.2.tgz#38890fd9db68bf1f2252b99a942998dc7877c5b3"
+  integrity sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^17.0.6":
+  version "17.0.16"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.16.tgz#056f40c45645761527baeb7d89d842a6abdf285a"
+  integrity sha512-3kCUiOOlQTwUUvjNFkbBTWMTxdTGybz/PfjCw9JmaRGcEDBQh+nGMg7/E9P2rklhJuYVd25IYLNcvqgSPCPksg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/resize-observer-browser@^0.1.5":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz#d8e6c2f830e2650dc06fe74464472ff64b54a302"
+  integrity sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg==
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -3037,11 +3258,28 @@
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/seedrandom@2.4.27":
   version "2.4.27"
   resolved "https://registry.yarnpkg.com/@types/seedrandom/-/seedrandom-2.4.27.tgz#9db563937dd86915f69092bc43259d2f48578e41"
   integrity sha1-nbVjk33YaRX2kJK8QyWdL0hXjkE=
 
+"@types/shortid@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/shortid/-/shortid-0.0.29.tgz#8093ee0416a6e2bf2aa6338109114b3fbffa0e9b"
+  integrity sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=
+
+"@types/simple-peer@^9.11.1":
+  version "9.11.1"
+  resolved "https://registry.yarnpkg.com/@types/simple-peer/-/simple-peer-9.11.1.tgz#bef6ff1e75178d83438e33aa6a4df2fd98fded1d"
+  integrity sha512-Pzqbau/WlivSXdRC0He2Wz/ANj2wbi4gzJrtysZz93jvOyI2jo/ibMjUe6AvPllFl/UO6QXT/A0Rcp44bDQB5A==
+  dependencies:
+    "@types/node" "*"
+
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -3052,15 +3290,22 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
+"@types/styled-system@^5.1.10":
+  version "5.1.11"
+  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.11.tgz#158849f3b14cdf8bf27a10f0cf87a2c3a89eb680"
+  integrity sha512-R+JxEZYa5T0HD2urViR/mdklVaGhwbNOtDoWWGQ1+z1CGs/gF1UAKCaS//YwsUwterEKpyaKxgaXyFNKF04GCA==
+  dependencies:
+    csstype "^3.0.2"
+
 "@types/tapable@*", "@types/tapable@^1.0.5":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
   integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
 
 "@types/testing-library__jest-dom@^5.9.1":
-  version "5.9.5"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz#5bf25c91ad2d7b38f264b12275e5c92a66d849b0"
-  integrity sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==
+  version "5.14.1"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.1.tgz#014162a5cee6571819d48e999980694e2f657c3c"
+  integrity sha512-Gk9vaXfbzc5zCXI9eYE9BI5BNHEp4D3FWjgqBE/ePGYElLAP+KvxBcsdkwfIVvezs605oiyd/VrpiHe3Oeg+Aw==
   dependencies:
     "@types/jest" "*"
 
@@ -3071,6 +3316,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/uuid@^8.3.1":
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.1.tgz#1a32969cf8f0364b3d8c8af9cc3555b7805df14f"
+  integrity sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg==
+
 "@types/webgl-ext@0.0.30":
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@types/webgl-ext/-/webgl-ext-0.0.30.tgz#0ce498c16a41a23d15289e0b844d945b25f0fb9d"
@@ -3103,14 +3353,14 @@
     source-map "^0.6.0"
 
 "@types/yargs-parser@*":
-  version "15.0.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
-  integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
+  version "20.2.1"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129"
+  integrity sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==
 
 "@types/yargs@^15.0.0":
-  version "15.0.10"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.10.tgz#0fe3c8173a0d5c3e780b389050140c3f5ea6ea74"
-  integrity sha512-z8PNtlhrj7eJNLmrAivM7rjBESG6JwC5xP3RVk12i/8HVP7Xnx/sEmERnRImyEuUaJfO942X0qMOYsoupaJbZQ==
+  version "15.0.14"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.14.tgz#26d821ddb89e70492160b66d10a0eb6df8f6fb06"
+  integrity sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==
   dependencies:
     "@types/yargs-parser" "*"
 
@@ -3458,14 +3708,24 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^8.6.2:
+  version "8.6.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.6.2.tgz#2fb45e0e5fcbc0813326c1c3da535d1881bb0571"
+  integrity sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
-ammo.js@kripken/ammo.js#aab297a4164779c3a9d8dc8d9da26958de3cb778:
+ammo.js@kripken/ammo.js:
   version "0.0.2"
-  resolved "https://codeload.github.com/kripken/ammo.js/tar.gz/aab297a4164779c3a9d8dc8d9da26958de3cb778"
+  resolved "https://codeload.github.com/kripken/ammo.js/tar.gz/c40aee525f2e3d4d2917938bf4e0b21d27f40d3c"
 
 ansi-colors@^3.0.0:
   version "3.2.4"
@@ -3847,7 +4107,7 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@2.8.0, babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.8.0:
+babel-plugin-macros@2.8.0, babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1, babel-plugin-macros@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -3988,17 +4248,17 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
-base64-arraybuffer-es6@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/base64-arraybuffer-es6/-/base64-arraybuffer-es6-0.6.0.tgz#036f79f57588dca0018de7792ddf149299382007"
-  integrity sha512-57nLqKj4ShsDwFJWJsM4sZx6u60WbCge35rWRSevUwqxDtRwwxiKAO800zD2upPv4CfdWjQp//wSLar35nDKvA==
+base64-arraybuffer-es6@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer-es6/-/base64-arraybuffer-es6-0.7.0.tgz#dbe1e6c87b1bf1ca2875904461a7de40f21abc86"
+  integrity sha512-ESyU/U1CFZDJUdr+neHRhNozeCv72Y7Vm0m1DCbjX3KBjT6eYocvAJlSk6+8+HkVwXlT1FNxhGW6q3UKAlCvvw==
 
 base64-arraybuffer@0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz#9818c79e059b1355f97e0428a017c838e90ba812"
   integrity sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=
 
-base64-js@^1.0.2:
+base64-js@^1.0.2, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
@@ -4278,6 +4538,14 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
 builtin-modules@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
@@ -4467,9 +4735,9 @@ chalk@^3.0.0:
     supports-color "^7.1.0"
 
 chalk@^4.0.0, chalk@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
-  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
   dependencies:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
@@ -4649,7 +4917,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1:
+color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -4673,15 +4941,15 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
-  integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
+color-string@^1.5.4, color-string@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.6.0.tgz#c3915f61fe267672cb7e1e064c9d692219f6c312"
+  integrity sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==
   dependencies:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.0.0, color@^3.1.3:
+color@^3.0.0:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
   integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
@@ -4689,6 +4957,14 @@ color@^3.0.0, color@^3.1.3:
     color-convert "^1.9.1"
     color-string "^1.5.4"
 
+color@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
+  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
+  dependencies:
+    color-convert "^1.9.3"
+    color-string "^1.6.0"
+
 colorette@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
@@ -4701,10 +4977,10 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-comlink@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/comlink/-/comlink-4.3.0.tgz#80b3366baccd87897dab3638ebfcfae28b2f87c7"
-  integrity sha512-mu4KKKNuW8TvkfpW/H88HBPeILubBS6T94BdD1VWBXNXfiyqVtwUCVNO1GeNOBTsIswzsMjWlycYr+77F5b84g==
+comlink@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/comlink/-/comlink-4.3.1.tgz#0c6b9d69bcd293715c907c33fe8fc45aecad13c5"
+  integrity sha512-+YbhUdNrpBZggBAHWcgQMLPLH1KDF3wJpeqrCKieWQ8RL7atmgsgTQko1XEBK6PsecfopWNntopJ+ByYG1lRaA==
 
 commander@^2.20.0:
   version "2.20.3"
@@ -4810,7 +5086,7 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@1.7.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@1.7.0, convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -4822,6 +5098,13 @@ convert-source-map@^0.3.3:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
   integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA=
 
+convert-source-map@^1.5.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -4865,21 +5148,31 @@ core-js-compat@^3.8.1, core-js-compat@^3.9.0:
     browserslist "^4.16.3"
     semver "7.0.0"
 
-core-js-pure@^3.0.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.7.0.tgz#28a57c861d5698e053f0ff36905f7a3301b4191e"
-  integrity sha512-EZD2ckZysv8MMt4J6HSvS9K2GdtlZtdBncKAmF9lr2n0c9dJUaUN88PSTjvgwCgQPWKTkERXITgS6JJRAnljtg==
+core-js-pure@^3.16.0:
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.16.1.tgz#b997df2669c957a5b29f06e95813a171f993592e"
+  integrity sha512-TyofCdMzx0KMhi84mVRS8rL1XsRk2SPUNz2azmth53iRN0/08Uim9fdhQTaZTG1LqaXHYVci4RDHka6WrXfnvg==
 
-core-js@3, core-js@^3.0.1, core-js@^3.6.5:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.7.0.tgz#b0a761a02488577afbf97179e4681bf49568520f"
-  integrity sha512-NwS7fI5M5B85EwpWuIwJN4i/fbisQUwLwiSNUWeXlkAZ0sbBjLEvLvFLf1uzAUV66PcEPt4xCGCmOZSxVf3xzA==
+core-js@3, core-js@^3.0.1:
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249"
+  integrity sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==
 
-core-js@^2.4.0, core-js@^2.5.3:
+core-js@^2.4.0:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^2.5.3:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
+core-js@^3.6.5:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.7.0.tgz#b0a761a02488577afbf97179e4681bf49568520f"
+  integrity sha512-NwS7fI5M5B85EwpWuIwJN4i/fbisQUwLwiSNUWeXlkAZ0sbBjLEvLvFLf1uzAUV66PcEPt4xCGCmOZSxVf3xzA==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -5226,14 +5519,14 @@ cssstyle@^2.2.0:
     cssom "~0.3.6"
 
 csstype@^2.5.7:
-  version "2.6.16"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.16.tgz#544d69f547013b85a40d15bff75db38f34fe9c39"
-  integrity sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==
+  version "2.6.17"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e"
+  integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==
 
-csstype@^3.0.2:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8"
-  integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
+csstype@^3.0.2, csstype@^3.0.5:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
 cwise-compiler@^1.1.2:
   version "1.1.3"
@@ -5309,10 +5602,10 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "2.1.2"
 
-debug@~4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
-  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
+debug@^4.3.1, debug@~4.3.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
   dependencies:
     ms "2.1.2"
 
@@ -5454,10 +5747,10 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
-dexie-react-hooks@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/dexie-react-hooks/-/dexie-react-hooks-1.0.6.tgz#a21d116addb2bb785507bf924cc6e963d858d5d5"
-  integrity sha512-OFoOBC4BQzkVGicuWl/cIMtlPp0wTAnUXwUJzq+l/zp0XVGmwEWkemRFq7JbudJLT0DINFVVzgVhGV7KOUK7uA==
+dexie-react-hooks@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/dexie-react-hooks/-/dexie-react-hooks-1.0.7.tgz#50316a7829a6dfa013b8471f66b010cc77f00d3e"
+  integrity sha512-hqXGFbfgu1rdfcGHQUPwW2G0iWyupoNWnk3ODvqr+HdZt2ip3y1e/dcWIOsEnlUWWCWk6a3+ok0fvECU05eE2A==
 
 dexie@3.1.0-beta.13:
   version "3.1.0-beta.13"
@@ -5537,10 +5830,10 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.4:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
-  integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
+dom-accessibility-api@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.7.tgz#8c2aa6325968f2933160a0b7dbb380893ddf3e7d"
+  integrity sha512-ml3lJIq9YjUfM9TUnEPvEYWFSwivwIGBPKpewX7tii7fwCazA8yCioGdqQcNsItPpfFvSJ3VIdMQPj60LJhcQA==
 
 dom-converter@^0.2:
   version "0.2.0"
@@ -5550,9 +5843,9 @@ dom-converter@^0.2:
     utila "~0.4"
 
 dom-helpers@^5.0.1:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
-  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
   dependencies:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
@@ -5772,10 +6065,10 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-engine.io-client@~5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-5.0.0.tgz#65733887c8999d280e1dd7f241779a2c66e9559e"
-  integrity sha512-e6GK0Fqvq45Nu/j7YdIVqXtDPvlsggAcfml3QiEiGdJ1qeh7IQU6knxSN3+yy9BmbnXtIfjo1hK4MFyHKdc9mQ==
+engine.io-client@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-5.1.2.tgz#27108da9b39ae03262443d945caf2caa3655c4cb"
+  integrity sha512-blRrgXIE0A/eurWXRzvfCLG7uUFJqfTGFsyJzXSK71srMMGJ2VraBLg8Mdw28uUxSpVicepBN9X7asqpD1mZcQ==
   dependencies:
     base64-arraybuffer "0.1.4"
     component-emitter "~1.3.0"
@@ -5788,9 +6081,11 @@ engine.io-client@~5.0.0:
     yeast "0.1.2"
 
 engine.io-parser@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-4.0.1.tgz#6444c3cf2523ba4fc3bbaedd4fe425e6bcb16479"
-  integrity sha512-v5aZK1hlckcJDGmHz3W8xvI3NUHYc9t8QtTbqdR5OaH3S9iJZilPubauOm+vLWOMMWzpE3hiq92l9lTAHamRCg==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-4.0.2.tgz#e41d0b3fb66f7bf4a3671d2038a154024edb501e"
+  integrity sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==
+  dependencies:
+    base64-arraybuffer "0.1.4"
 
 enhanced-resolve@^4.3.0:
   version "4.3.0"
@@ -5818,11 +6113,6 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
   integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
-err-code@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
-  integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
-
 err-code@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-3.0.1.tgz#a444c7b992705f2b120ee320b09972eef331c920"
@@ -5939,6 +6229,11 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
 escodegen@^1.14.1:
   version "1.14.3"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
@@ -6379,10 +6674,10 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-fake-indexeddb@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/fake-indexeddb/-/fake-indexeddb-3.1.2.tgz#8073a12ed3b254f7afc064f3cc2629f0110a5303"
-  integrity sha512-W60eRBrE8r9o/EePyyUc63sr2I/MI9p3zVwLlC1WI1xdmQVqqM6+wec9KDWDz2EZyvJKhrDvy3cGC6hK8L1pfg==
+fake-indexeddb@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fake-indexeddb/-/fake-indexeddb-3.1.3.tgz#76d59146a6b994b9bb50ac9949cbd96ad6cca760"
+  integrity sha512-kpWYPIUGmxW8Q7xG7ampGL63fU/kYNukrIyy9KFj3+KVlFbE/SmvWebzWXBiCMeR0cPK6ufDoGC7MFkPhPLH9w==
   dependencies:
     realistic-structured-clone "^2.0.1"
     setimmediate "^1.0.5"
@@ -6608,9 +6903,9 @@ fork-ts-checker-webpack-plugin@4.1.6:
     worker-rpc "^0.1.0"
 
 form-data@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.0.tgz#31b7e39c85f1355b7139ee0c647cf0de7f83c682"
-  integrity sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
+  integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.8"
@@ -6738,7 +7033,7 @@ gensync@^1.0.0-beta.1:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-browser-rtc@^1.0.0, get-browser-rtc@substack/get-browser-rtc#4/head:
+get-browser-rtc@^1.1.0, get-browser-rtc@substack/get-browser-rtc#4/head:
   version "1.1.0"
   resolved "https://codeload.github.com/substack/get-browser-rtc/tar.gz/8c8b8e086026bc68b24b872ecd8f6c3e83885097"
 
@@ -7261,7 +7556,7 @@ identity-obj-proxy@3.0.0:
   dependencies:
     harmony-reflect "^1.4.6"
 
-ieee754@^1.1.4:
+ieee754@^1.1.4, ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
@@ -7556,13 +7851,20 @@ is-core-module@^2.0.0:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.1.0, is-core-module@^2.2.0:
+is-core-module@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
   integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.2.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491"
+  integrity sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -8415,6 +8717,11 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
@@ -8529,10 +8836,10 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
   integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
 
-konva@^8.1.1:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/konva/-/konva-8.1.1.tgz#c92c3f81b371947eade7a8f76ee2df34c71b333c"
-  integrity sha512-2jLijU0N2DNJwBoWzwyxHwqx4GLPjTppSD9TU/G49B2MJ8Sf10E7Y0EmuULjYcNDIFsY+3zMt0VFonKNfyz7WA==
+konva@^8.1.3:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/konva/-/konva-8.1.3.tgz#d13627446894f954c4b78280b26757af6821b822"
+  integrity sha512-3/6fkpgQOMP4dB5qnOAZcCu4ZUmbZEg0Yy01yKEIDWUSJumGOLApTKkS5jvq9KTniijpHGAsKlz1c9fC0Kad+w==
 
 language-subtag-registry@~0.3.2:
   version "0.3.21"
@@ -8674,11 +8981,6 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash-es@^4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
-  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
-
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -8754,12 +9056,12 @@ lodash.unset@^4.5.2:
   resolved "https://registry.yarnpkg.com/lodash.unset/-/lodash.unset-4.5.2.tgz#370d1d3e85b72a7e1b0cdf2d272121306f23e4ed"
   integrity sha1-Nw0dPoW3Kn4bDN8tJyEhMG8j5O0=
 
-"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.5:
+"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.5:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
-lodash@^4.17.19:
+lodash@^4.17.15, lodash@^4.17.19, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8769,6 +9071,11 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
   integrity sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==
 
+long@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
+  integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -8885,9 +9192,9 @@ media-typer@0.3.0:
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
 memoize-one@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
-  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
 memory-fs@^0.4.1:
   version "0.4.1"
@@ -8975,6 +9282,11 @@ mime-db@1.47.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.47.0.tgz#8cb313e59965d3c05cfbf898915a267af46a335c"
   integrity sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==
 
+mime-db@1.49.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.49.0.tgz#f3dfde60c99e9cf3bc9701d687778f537001cbed"
+  integrity sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==
+
 "mime-db@>= 1.43.0 < 2":
   version "1.45.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.45.0.tgz#cceeda21ccd7c3a745eba2decd55d4b73e7879ea"
@@ -8987,7 +9299,14 @@ mime-types@^2.0.1:
   dependencies:
     mime-db "1.47.0"
 
-mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
+mime-types@^2.1.12:
+  version "2.1.32"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.32.tgz#1d00e89e7de7fe02008db61001d9e02852670fd5"
+  integrity sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==
+  dependencies:
+    mime-db "1.49.0"
+
+mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
   version "2.1.27"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
   integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
@@ -9853,9 +10172,9 @@ path-key@^3.0.0, path-key@^3.1.0:
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
 path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-to-regexp@0.1.7:
   version "0.1.7"
@@ -9976,10 +10295,10 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
-polygon-clipping@^0.15.2:
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/polygon-clipping/-/polygon-clipping-0.15.2.tgz#076199182bf23a4a6cf6c7003f3b81ecf30b2cb8"
-  integrity sha512-qsUFQSY4nA++1/b76dy0BJGwL0FZAk05Y4hZprctLIhAddE8KUUr3TxIF4sAxIQtjH9xvaBe3raaRQrcSI4wlA==
+polygon-clipping@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/polygon-clipping/-/polygon-clipping-0.15.3.tgz#0215840438470ba2e9e6593625e4ea5c1087b4b7"
+  integrity sha512-ho0Xx5DLkgxRx/+n4O74XyJ67DcyN3Tu9bGYKsnTukGAW6ssnuak6Mwcyb1wHy9MZc9xsUWqIoiazkZB5weECg==
   dependencies:
     splaytree "^3.1.0"
 
@@ -10864,15 +11183,10 @@ querystringify@^2.1.1:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
   integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
 
-queue-microtask@^1.1.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.2.tgz#abf64491e6ecf0f38a6502403d4cda04f372dfd3"
-  integrity sha512-dB15eXv3p2jDlbOiNLyMabYg1/sXvppd8DP2J3EOCQ0AkuSXCW2tP7mnVouVLJKgUMY6yP0kcQDVpLCN13h4Xg==
-
-raf-schd@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
-  integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
+queue-microtask@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
 raf@^3.4.1:
   version "3.4.1"
@@ -10886,7 +11200,7 @@ ramda@^0.27.1:
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
   integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==
 
-randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.3, randombytes@^2.0.5, randombytes@^2.1.0:
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
   integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
@@ -10965,14 +11279,14 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
-  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    scheduler "^0.20.1"
+    scheduler "^0.20.2"
 
 react-error-overlay@^6.0.9:
   version "6.0.9"
@@ -10997,11 +11311,19 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
 react-is@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
-  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-konva@^17.0.2-5:
+react-konva-utils@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/react-konva-utils/-/react-konva-utils-0.1.7.tgz#f3feb6c0dd5a930020fd10a0f57d5c7a904166c8"
+  integrity sha512-wjNq4TsPXaig2Zufg6nBeFQpijR3FJ4iL2YrmtlwQN7Ase158eWHrpHKNySdMo2E4OSls8220sIaTY5TlrzqyA==
+  dependencies:
+    react-konva "^17.0.2-4"
+    use-image "^1.0.7"
+
+react-konva@^17.0.2-4, react-konva@^17.0.2-5:
   version "17.0.2-5"
   resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-17.0.2-5.tgz#e70b0acf323402de0a540f27b300fbe7ed151849"
   integrity sha512-IyzdfqRDK8r1ulp/jbLPX18AuO+n5yNtL0+4T0QEUsgArRqIl/VRCG1imA5mYJBk0cBNC5+fWDHN+HWEW62ZEQ==
@@ -11038,13 +11360,13 @@ react-media@^2.0.0-rc.1:
     json2mq "^0.2.0"
     prop-types "^15.5.10"
 
-react-modal@^3.12.1:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.12.1.tgz#38c33f70d81c33d02ff1ed115530443a3dc2afd3"
-  integrity sha512-WGuXn7Fq31PbFJwtWmOk+jFtGC7E9tJVbFX0lts8ZoS5EPi9+WWylUJWLKKVm3H4GlQ7ZxY7R6tLlbSIBQ5oZA==
+react-modal@^3.14.3:
+  version "3.14.3"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.3.tgz#7eb7c5ec85523e5843e2d4737cc17fc3f6aeb1c0"
+  integrity sha512-+C2KODVKyu20zHXPJxfOOcf571L1u/EpFlH+oS/3YDn8rgVE51QZuxuuIwabJ8ZFnOEHaD+r6XNjqwtxZnXO0g==
   dependencies:
     exenv "^1.2.0"
-    prop-types "^15.5.10"
+    prop-types "^15.7.2"
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
@@ -11062,15 +11384,14 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-react-resize-detector@4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-4.2.3.tgz#7df258668a30bdfd88e655bbdb27db7fd7b23127"
-  integrity sha512-4AeS6lxdz2KOgDZaOVt1duoDHrbYwSrUX32KeM9j6t9ISyRphoJbTRCMS1aPFxZHFqcCGLT1gMl3lEcSWZNW0A==
+react-resize-detector@^6.7.4:
+  version "6.7.4"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-6.7.4.tgz#594cc026115af05484e8011157b5dc2137492680"
+  integrity sha512-wzvGmUdEDMhiUHVZGnl4kuyj/TEQhvbB5LyAGkbYXetwJ2O+u/zftmPvU+kxiO1h+d9aUqQBKcNLS7TvB3ytqA==
   dependencies:
-    lodash "^4.17.15"
-    lodash-es "^4.17.15"
-    prop-types "^15.7.2"
-    raf-schd "^4.0.2"
+    "@types/resize-observer-browser" "^0.1.5"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
     resize-observer-polyfill "^1.5.1"
 
 react-router-dom@^5.1.2:
@@ -11086,10 +11407,10 @@ react-router-dom@^5.1.2:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router-hash-link@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/react-router-hash-link/-/react-router-hash-link-2.2.2.tgz#df8cccc57014a5fb9e7defe5bb28292370bb8681"
-  integrity sha512-+8u5aAiRVWAFutH2Zwcm7UiuHmfed3Yn+d6aMVP8WGclMSv2ySAbGx836UifZO/+5o5QVhOS71soYHy0NVJN5g==
+react-router-hash-link@^2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/react-router-hash-link/-/react-router-hash-link-2.4.3.tgz#570824d53d6c35ce94d73a46c8e98673a127bf08"
+  integrity sha512-NU7GWc265m92xh/aYD79Vr1W+zAIXDWp3L2YZOYP4rCqPnJ6LI6vh3+rKgkidtYijozHclaEQTAHaAaMWPVI4A==
   dependencies:
     prop-types "^15.7.2"
 
@@ -11175,23 +11496,23 @@ react-scripts@^4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react-select@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.2.1.tgz#15c4837dffc1c23e91b7fde606c468cc10000a06"
-  integrity sha512-JwwZjsR10AD5RXmx4iEkN0Ndim/uSaQ8j8cxMwOg8SJFeyXwu/m+sdSQ0ds0AWFm7hhXG9kusC3CQ/s4UNcOIg==
+react-select@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"
+  integrity sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q==
   dependencies:
     "@babel/runtime" "^7.12.0"
-    "@emotion/cache" "^11.0.0"
+    "@emotion/cache" "^11.4.0"
     "@emotion/react" "^11.1.1"
     memoize-one "^5.0.0"
     prop-types "^15.6.0"
     react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
-react-spring@^9.2.3:
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.3.tgz#ff644f8857782389b47171239ee8dead372ebd46"
-  integrity sha512-D3fx9A7UjX4yp35TM3YxbhzKhjq6nFaEs4/RkKT+/Ch732opG6iUek9jt+mwR1bST29aa9Da6mWipAtQbD2U3g==
+react-spring@^9.2.4:
+  version "9.2.4"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.4.tgz#9d89b0321664d594f957dca9459b13d94b3dfa39"
+  integrity sha512-bMjbyTW0ZGd+/h9cjtohLqCwOGqX2OuaTvalOVfLCGmhzEg/u3GgopI3LAm4UD2Br3MNdVdGgNVoESg4MGqKFQ==
   dependencies:
     "@react-spring/core" "~9.2.0"
     "@react-spring/konva" "~9.2.0"
@@ -11209,18 +11530,18 @@ react-textarea-autosize@^8.3.3:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react-toast-notifications@^2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/react-toast-notifications/-/react-toast-notifications-2.4.3.tgz#ebf2ee776615a97906cef214352cfd9fe800c583"
-  integrity sha512-Ya/i2dCjN95Ytb/pwbAVmDMSKQwGeeGOhUThtjFQx2XAFKE+fQnodLlIylhgZfsInxdUXPFGFnzTdGS8JafuLA==
+react-toast-notifications@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/react-toast-notifications/-/react-toast-notifications-2.5.1.tgz#30216eedb5608ec69719a818b9a2e09283e90074"
+  integrity sha512-eYuuiSPGLyuMHojRH2U7CbENvFHsvNia39pLM/s10KipIoNs14T7RIJk4aU2N+l++OsSgtJqnFObx9bpwLMU5A==
   dependencies:
     "@emotion/core" "^10.0.14"
     react-transition-group "^4.4.1"
 
 react-transition-group@^4.3.0, react-transition-group@^4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
-  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
   dependencies:
     "@babel/runtime" "^7.5.5"
     dom-helpers "^5.0.1"
@@ -11232,10 +11553,10 @@ react-use-gesture@^9.1.3:
   resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-9.1.3.tgz#92bd143e4f58e69bd424514a5bfccba2a1d62ec0"
   integrity sha512-CdqA2SmS/fj3kkS2W8ZU8wjTbVBAIwDWaRprX7OKaj7HlGwBasGEFggmk5qNklknqk9zK/h8D355bEJFTpqEMg==
 
-react@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
-  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -11289,7 +11610,7 @@ read-pkg@^5.2.0:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
+readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -11356,7 +11677,12 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.5, regenerator-runtime@^0.13.7:
+regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.5:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regenerator-runtime@^0.13.7:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
@@ -11522,6 +11848,11 @@ require-directory@^2.1.1:
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
@@ -11731,13 +12062,6 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
-rtcpeerconnection-shim@^1.2.15:
-  version "1.2.15"
-  resolved "https://registry.yarnpkg.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz#e7cc189a81b435324c4949aa3dfb51888684b243"
-  integrity sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==
-  dependencies:
-    sdp "^2.6.0"
-
 run-parallel@^1.1.9:
   version "1.1.10"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
@@ -11815,14 +12139,6 @@ saxes@^5.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.1:
-  version "0.20.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
-  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 scheduler@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
@@ -11858,10 +12174,10 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-sdp@^2.12.0, sdp@^2.6.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/sdp/-/sdp-2.12.0.tgz#338a106af7560c86e4523f858349680350d53b22"
-  integrity sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==
+sdp@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/sdp/-/sdp-3.0.3.tgz#669958d54663ea9f4a46cc66518c9d980c52c61e"
+  integrity sha512-8EkfckS+XZQaPLyChu4ey7PghrdcraCVNpJe2Gfdi2ON1ylQ7OasuKX+b37R9slnRChwIAiQgt+oj8xXGD8x+A==
 
 seedrandom@2.4.3:
   version "2.4.3"
@@ -12048,16 +12364,18 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
-simple-peer@feross/simple-peer#694/head:
-  version "9.7.2"
-  resolved "https://codeload.github.com/feross/simple-peer/tar.gz/0d08d07b83ff3b8c60401688d80642d24dfeffe2"
+simple-peer@^9.11.0:
+  version "9.11.0"
+  resolved "https://registry.yarnpkg.com/simple-peer/-/simple-peer-9.11.0.tgz#e8d27609c7a610c3ddd75767da868e8daab67571"
+  integrity sha512-qvdNu/dGMHBm2uQ7oLhQBMhYlrOZC1ywXNCH/i8I4etxR1vrjCnU6ZSQBptndB1gcakjo2+w4OHo7Sjza1SHxg==
   dependencies:
-    debug "^4.0.1"
-    err-code "^2.0.3"
-    get-browser-rtc "^1.0.0"
-    queue-microtask "^1.1.0"
-    randombytes "^2.0.3"
-    readable-stream "^3.4.0"
+    buffer "^6.0.3"
+    debug "^4.3.1"
+    err-code "^3.0.1"
+    get-browser-rtc "^1.1.0"
+    queue-microtask "^1.2.3"
+    randombytes "^2.1.0"
+    readable-stream "^3.6.0"
 
 simple-swizzle@^0.2.2:
   version "0.2.2"
@@ -12066,25 +12384,25 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-simplebar-react@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-2.3.0.tgz#c5fdd4042a7c603687684407fa7b20e9dc1f8fab"
-  integrity sha512-ZhWEe4UkshSJ9xPG1F/W58UMJdA3fzgtXGrYsya3hxdMbIYoKUKEhdBsqdMoeaLGyn/5dbMPqDLinkLeg0W0cQ==
+simplebar-react@^2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-2.3.5.tgz#9d85803d01585f8a4899d45e7e681aef744568c6"
+  integrity sha512-tzlU4C96awc6yRtxRF3hm91daQyEOHVpVpAaaGaWL6jL0uSqqTrXyYdTerjUqYxf6X4ev9tPKXecEBOaFWSC4Q==
   dependencies:
     prop-types "^15.6.1"
-    simplebar "^5.3.0"
+    simplebar "^5.3.5"
 
-simplebar@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-5.3.0.tgz#857de63296401ed0c3026845514fe5db69795be5"
-  integrity sha512-LgrGdIWpwHLLlI9HqfnGql62H/iZlF0KDZ7w3ZNbd2ZLwh9NKsODLHPzQgUlqQ8aZe7Y6/1xJMXK1PU5e810+w==
+simplebar@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-5.3.5.tgz#799d14cdc8bb8ed245789745b9f3741d05403944"
+  integrity sha512-mcTlXEiva8pSMdNEzeV3C1KyBHk7Sn2Pe46U1Uwo53dCuQqdJIK0bEJrIPs8W4/RqJquKIsC8Y1h7+aqOl8ccA==
   dependencies:
+    "@juggle/resize-observer" "^3.3.1"
     can-use-dom "^0.1.0"
     core-js "^3.0.1"
     lodash.debounce "^4.0.8"
     lodash.memoize "^4.1.2"
     lodash.throttle "^4.1.1"
-    resize-observer-polyfill "^1.5.1"
 
 simplify-js@^1.2.4:
   version "1.2.4"
@@ -12140,16 +12458,16 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-socket.io-client@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.0.0.tgz#643cc25e5b5bbe37be75ecd317156a3335bb495a"
-  integrity sha512-27yQxmXJAEYF19Ygyl8FPJ0if0wegpSmkIIbrWJeI7n7ST1JyH8bbD5v3fjjGY5cfCanACJ3dARUAyiVFNrlTQ==
+socket.io-client@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.1.3.tgz#236daa642a9f229932e00b7221e843bf74232a62"
+  integrity sha512-hISFn6PDpgDifVUiNklLHVPTMv1LAk8poHArfIUdXa+gKgbr0MZbAlquDFqCqsF30yBqa+jg42wgos2FK50BHA==
   dependencies:
     "@types/component-emitter" "^1.2.10"
     backo2 "~1.0.2"
     component-emitter "~1.3.0"
     debug "~4.3.1"
-    engine.io-client "~5.0.0"
+    engine.io-client "~5.1.2"
     parseuri "0.0.6"
     socket.io-parser "~4.0.4"
 
@@ -12473,9 +12791,9 @@ string-width@^3.0.0, string-width@^3.1.0:
     strip-ansi "^5.1.0"
 
 string-width@^4.1.0, string-width@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
-  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
+  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
   dependencies:
     emoji-regex "^8.0.0"
     is-fullwidth-code-point "^3.0.0"
@@ -12630,9 +12948,9 @@ stylehacks@^4.0.0:
     postcss-selector-parser "^3.0.0"
 
 stylis@^4.0.3:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.7.tgz#412a90c28079417f3d27c028035095e4232d2904"
-  integrity sha512-OFFeUXFgwnGOKvEXaSv0D0KQ5ADP0n6g3SVONx6I/85JzNZ3u50FRwB3lVIk1QO2HNdI75tbVzc4Z66Gdp9voA==
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
 
 supports-color@^5.3.0:
   version "5.5.0"
@@ -12811,17 +13129,17 @@ text-table@0.2.0, text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-theme-ui@^0.3.1:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.3.5.tgz#db29a4df0ad6cbf0fde42aab1cd9941c4b813efc"
-  integrity sha512-yxooGhvkdjFDotDeIFehKo5k6NnLZ3gsLSe8EDe2aDcoWqg1mZjkjjr8EYtVCrK3mk/tYz97AT5BpEnUfamNCQ==
+theme-ui@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.10.0.tgz#4fce8fbe7ad008ec07b383eaf5f468b0317fcfa1"
+  integrity sha512-6uj9/4n6gZrlhrfQKt+QoLdtVc46ETJZv42iqedCatXaaTA5tHN1j7TJDmvYD9ooD/CT0+hsvOrx2d2etb/kYg==
   dependencies:
-    "@theme-ui/color-modes" "0.3.5"
-    "@theme-ui/components" "0.3.5"
-    "@theme-ui/core" "0.3.5"
-    "@theme-ui/css" "0.3.5"
-    "@theme-ui/mdx" "0.3.5"
-    "@theme-ui/theme-provider" "0.3.5"
+    "@theme-ui/color-modes" "0.10.0"
+    "@theme-ui/components" "0.10.0"
+    "@theme-ui/core" "0.10.0"
+    "@theme-ui/css" "0.10.0"
+    "@theme-ui/mdx" "0.10.0"
+    "@theme-ui/theme-provider" "0.10.0"
 
 throat@^5.0.0:
   version "5.0.0"
@@ -12937,13 +13255,6 @@ tough-cookie@^3.0.1:
     psl "^1.1.28"
     punycode "^2.1.1"
 
-tr46@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
-  integrity sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=
-  dependencies:
-    punycode "^2.1.0"
-
 tr46@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
@@ -12951,6 +13262,13 @@ tr46@^2.0.2:
   dependencies:
     punycode "^2.1.1"
 
+tr46@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
+  integrity sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==
+  dependencies:
+    punycode "^2.1.1"
+
 trim-trailing-lines@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
@@ -13099,20 +13417,30 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typeson-registry@^1.0.0-alpha.20:
-  version "1.0.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/typeson-registry/-/typeson-registry-1.0.0-alpha.37.tgz#23e6bffc264b4dfc80603e2a8545bd4750102d42"
-  integrity sha512-xXkriUyWzsBCNmMLyLXXFkc2UQbK7nDB8ItS3LJWlKMJvfzZfRBaZFPxH6cfjJYD4mQbv1mAxjk/9mRfyWe88g==
-  dependencies:
-    base64-arraybuffer-es6 "0.6.0"
-    typeson "5.18.2"
-    whatwg-url "7.1.0"
+typescript@^4.2.4:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
 
-typeson@5.18.2, typeson@^5.8.2:
+typeson-registry@^1.0.0-alpha.20:
+  version "1.0.0-alpha.39"
+  resolved "https://registry.yarnpkg.com/typeson-registry/-/typeson-registry-1.0.0-alpha.39.tgz#9e0f5aabd5eebfcffd65a796487541196f4b1211"
+  integrity sha512-NeGDEquhw+yfwNhguLPcZ9Oj0fzbADiX4R0WxvoY8nGhy98IbzQy1sezjoEFWOywOboj/DWehI+/aUlRVrJnnw==
+  dependencies:
+    base64-arraybuffer-es6 "^0.7.0"
+    typeson "^6.0.0"
+    whatwg-url "^8.4.0"
+
+typeson@^5.8.2:
   version "5.18.2"
   resolved "https://registry.yarnpkg.com/typeson/-/typeson-5.18.2.tgz#0d217fc0e11184a66aa7ca0076d9aa7707eb7bc2"
   integrity sha512-Vetd+OGX05P4qHyHiSLdHZ5Z5GuQDrHHwSdjkqho9NSCYVSLSfRMjklD/unpHH8tXBR9Z/R05rwJSuMpMFrdsw==
 
+typeson@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/typeson/-/typeson-6.1.0.tgz#5b2a53705a5f58ff4d6f82f965917cabd0d7448b"
+  integrity sha512-6FTtyGr8ldU0pfbvW/eOZrEtEkczHRUtduBnA90Jh9kMPCiFNnXIon3vF41N0S4tV1HHQt4Hk1j4srpESziCaA==
+
 unherit@^1.0.4:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
@@ -13323,10 +13651,10 @@ use-composed-ref@^1.0.0:
   dependencies:
     ts-essentials "^2.0.3"
 
-use-image@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/use-image/-/use-image-1.0.7.tgz#b2c42b78d32868762a37631673eb169a244d5ad1"
-  integrity sha512-Z8hB8+lAGe25iqO3YaHO7bSvBSGErEakYQ6RGyRrPZoMDLKBIuZ67ikzn8f5ydjWorqFzeX+U3vVwnXoE1Q56Q==
+use-image@^1.0.7, use-image@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/use-image/-/use-image-1.0.8.tgz#a8fa4ae359afbb0fc30c7cab0a7f4d537281a9d4"
+  integrity sha512-mTQBg+e+tLXvhxq2MozH2ZdUPglG7ozLUlSB036soydO1wg1ZV5msZ4X3aw7gX4ozW0P9yHYZAiZB+qbIdQJZQ==
 
 use-isomorphic-layout-effect@^1.0.0:
   version "1.1.1"
@@ -13653,13 +13981,12 @@ webpack@4.44.2:
     watchpack "^1.7.4"
     webpack-sources "^1.4.1"
 
-webrtc-adapter@^7.7.1:
-  version "7.7.1"
-  resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz#b2c227a6144983b35057df67bd984a7d4bfd17f1"
-  integrity sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==
+webrtc-adapter@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-8.1.0.tgz#89429d837eb43c7a2885a0eb66390af6c552bba6"
+  integrity sha512-I+y/LWBiGYPVhIb8Ww7nyoNWhrCYENeGoRvZuyytLn/h+ahDBgItvuIfMdzT+xhOnjLIMVkOykttGJPv1dr6kA==
   dependencies:
-    rtcpeerconnection-shim "^1.2.15"
-    sdp "^2.12.0"
+    sdp "^3.0.2"
 
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
@@ -13692,15 +14019,6 @@ whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
-whatwg-url@7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
-  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
-  dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^1.0.1"
-    webidl-conversions "^4.0.2"
-
 whatwg-url@^8.0.0:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.4.0.tgz#50fb9615b05469591d2b2bd6dfaed2942ed72837"
@@ -13710,6 +14028,15 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^6.1.0"
 
+whatwg-url@^8.4.0:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
+  integrity sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==
+  dependencies:
+    lodash "^4.7.0"
+    tr46 "^2.1.0"
+    webidl-conversions "^6.1.0"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
@@ -13971,9 +14298,9 @@ ws@^7.2.3:
   integrity sha512-kyFwXuV/5ymf+IXhS6f0+eAFvydbaBW3zjpT6hUdAh/hbVjTIB5EHBGi0bPoCLSK2wcuz3BrEkB9LrYv1Nm4NQ==
 
 ws@~7.4.2:
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.4.tgz#383bc9742cb202292c9077ceab6f6047b17f2d59"
-  integrity sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw==
+  version "7.4.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
+  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
 x-is-string@^0.1.0:
   version "0.1.0"
@@ -14001,9 +14328,9 @@ y18n@^4.0.0:
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
 y18n@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18"
-  integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
 yallist@^3.0.2:
   version "3.1.1"
@@ -14042,9 +14369,9 @@ yargs-parser@^18.1.2:
     decamelize "^1.2.0"
 
 yargs-parser@^20.2.2:
-  version "20.2.4"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
-  integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
 yargs@^13.3.2:
   version "13.3.2"
@@ -14079,20 +14406,7 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yargs@^16.0.3:
-  version "16.1.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.1.1.tgz#5a4a095bd1ca806b0a50d0c03611d38034d219a1"
-  integrity sha512-hAD1RcFP/wfgfxgMVswPE+z3tlPFtxG8/yWUrG2i17sTWGCGqWnxKcLTF4cUKDUK8fzokwsmO9H0TDkRbMHy8w==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
-
-yargs@^16.2.0:
+yargs@^16.0.3, yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
   integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==