diff --git a/src/layers/renderers/index.ts b/src/layers/renderers/index.ts
index 6ddd94a0..44f19397 100644
--- a/src/layers/renderers/index.ts
+++ b/src/layers/renderers/index.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {TIME} from "config/logging";
 import {drawBiomes} from "./drawBiomes";
 import {drawBorders} from "./drawBorders";
diff --git a/src/layers/toggles.ts b/src/layers/toggles.ts
index 69409366..96458f98 100644
--- a/src/layers/toggles.ts
+++ b/src/layers/toggles.ts
@@ -8,6 +8,8 @@ import {editStyle, calculateFriendlyGridSize, shiftCompass} from "modules/ui/sty
 import {turnLayerButtonOn, turnLayerButtonOff, layerIsOn} from "./utils";
 import {renderLayer} from "./renderers";
 import {getInputNumber, getInputValue} from "utils/nodeUtils";
+// @ts-expect-error js module
+import {editUnits} from "modules/ui/editors";
 
 const layerTogglesMap = {
   toggleBiomes,
@@ -465,20 +467,14 @@ function toggleScaleBar(event?: MouseEvent) {
   if (!layerIsOn("toggleScaleBar")) {
     turnLayerButtonOn("toggleScaleBar");
     $("#scaleBar").fadeIn();
-    if (isCtrlPressed(event)) openUnitsEditor();
+    if (isCtrlPressed(event)) editUnits();
   } else {
-    if (isCtrlPressed(event)) openUnitsEditor();
+    if (isCtrlPressed(event)) editUnits();
     else {
       $("#scaleBar").fadeOut();
       turnLayerButtonOff("toggleScaleBar");
     }
   }
-
-  async function openUnitsEditor() {
-    // @ts-ignore untyped module
-    const {editUnits} = await import("../modules/ui/units-editor.js");
-    editUnits();
-  }
 }
 
 function toggleZones(event?: MouseEvent) {
diff --git a/src/main.ts b/src/main.ts
index a75a8095..1d639b5c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,6 +14,8 @@ import {addGlobalListeners} from "./scripts/listeners";
 import {tip} from "./scripts/tooltips";
 import {checkForUpdates} from "./scripts/updater";
 import {getInputNumber} from "utils/nodeUtils";
+// @ts-expect-error js module
+import {editUnits} from "modules/ui/editors";
 
 checkForUpdates();
 addGlobalListeners();
@@ -52,7 +54,7 @@ svgHeight = graphHeight;
 
 defineSvg(graphWidth, graphHeight);
 
-scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
+scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", editUnits);
 legend
   .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
   .on("click", () => clearLegend());
diff --git a/src/modules/io/load.js b/src/modules/io/load.js
index feb96949..f63a76c0 100644
--- a/src/modules/io/load.js
+++ b/src/modules/io/load.js
@@ -11,6 +11,7 @@ import {link} from "utils/linkUtils";
 import {minmax, rn} from "utils/numberUtils";
 import {regenerateMap} from "scripts/generation";
 import {reMarkFeatures} from "modules/markup";
+import {editUnits} from "modules/ui/editors";
 
 // add drag to upload logic, pull request from @evyatron
 export function addDragToUpload() {
@@ -480,7 +481,7 @@ async function parseLoadedData(data) {
     })();
 
     void (function restoreEvents() {
-      scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
+      scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", editUnits);
       legend
         .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
         .on("click", () => clearLegend());
diff --git a/src/modules/ui/editors.js b/src/modules/ui/editors.js
index 1e987d5c..c24525a3 100644
--- a/src/modules/ui/editors.js
+++ b/src/modules/ui/editors.js
@@ -1027,20 +1027,25 @@ function refreshAllEditors() {
 }
 
 // dynamically loaded editors
-async function editStates() {
+export async function editStates() {
   if (customization) return;
   const Editor = await import("../dynamic/editors/states-editor.js?v=12062022");
   Editor.open();
 }
 
-async function editCultures() {
+export async function editCultures() {
   if (customization) return;
   const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.87.01");
   Editor.open();
 }
 
-async function editReligions() {
+export async function editReligions() {
   if (customization) return;
   const Editor = await import("../dynamic/editors/religions-editor.js?v=1.87.01");
   Editor.open();
 }
+
+export async function editUnits() {
+  const {open} = await import("./units-editor.js");
+  open();
+}
diff --git a/src/modules/ui/tools.js b/src/modules/ui/tools.js
index 2f3b06c0..d0eb2a3b 100644
--- a/src/modules/ui/tools.js
+++ b/src/modules/ui/tools.js
@@ -1,16 +1,17 @@
 import * as d3 from "d3";
 
-import {restoreDefaultEvents} from "scripts/events";
-import {findCell} from "utils/graphUtils";
-import {last} from "utils/arrayUtils";
-import {tip, clearMainTip} from "scripts/tooltips";
-import {rn} from "utils/numberUtils";
-import {isCtrlPressed} from "utils/keyboardUtils";
-import {prompt} from "scripts/prompt";
-import {getNextId} from "utils/nodeUtils";
-import {P, generateSeed} from "utils/probabilityUtils";
 import {turnLayerButtonOn} from "layers";
+import {editUnits} from "modules/ui/editors";
 import {aleaPRNG} from "scripts/aleaPRNG";
+import {restoreDefaultEvents} from "scripts/events";
+import {prompt} from "scripts/prompt";
+import {clearMainTip, tip} from "scripts/tooltips";
+import {last} from "utils/arrayUtils";
+import {findCell} from "utils/graphUtils";
+import {isCtrlPressed} from "utils/keyboardUtils";
+import {getNextId} from "utils/nodeUtils";
+import {rn} from "utils/numberUtils";
+import {generateSeed, P} from "utils/probabilityUtils";
 
 toolsContent.addEventListener("click", function (event) {
   if (customization) return tip("Please exit the customization mode first", false, "warning");
diff --git a/src/modules/ui/units-editor.js b/src/modules/ui/units-editor.js
index 7b9c4536..db5d1cc8 100644
--- a/src/modules/ui/units-editor.js
+++ b/src/modules/ui/units-editor.js
@@ -5,7 +5,7 @@ import {findCell} from "utils/graphUtils";
 import {tip} from "scripts/tooltips";
 import {prompt} from "scripts/prompt";
 
-export function editUnits() {
+export function open() {
   closeDialogs("#unitsEditor, .stable");
   $("#unitsEditor").dialog();
 
diff --git a/src/scripts/prompt.ts b/src/scripts/prompt.ts
index 362d138e..544e12c1 100644
--- a/src/scripts/prompt.ts
+++ b/src/scripts/prompt.ts
@@ -1,5 +1,3 @@
-import {ERROR} from "../config/logging";
-
 interface IPromptStringOptions {
   default: string;
   required?: boolean;
diff --git a/src/scripts/rankCells.ts b/src/scripts/rankCells.js
similarity index 100%
rename from src/scripts/rankCells.ts
rename to src/scripts/rankCells.js
diff --git a/src/scripts/reGraph.ts b/src/scripts/reGraph.ts
index 4bc12883..a1546487 100644
--- a/src/scripts/reGraph.ts
+++ b/src/scripts/reGraph.ts
@@ -10,7 +10,7 @@ import {rn} from "utils/numberUtils";
 export function reGraph() {
   TIME && console.time("reGraph");
   const {cells: gridCells, points, features} = grid;
-  const newCells: {p: number[][]; g: number[]; h: number[]} = {p: [], g: [], h: []}; // store new data
+  const newCells: {p: TPoints; g: number[]; h: number[]} = {p: [], g: [], h: []}; // store new data
   const spacing2 = grid.spacing ** 2;
 
   for (const i of gridCells.i) {
diff --git a/src/types/common.d.ts b/src/types/common.d.ts
index 24894af4..f8a7c118 100644
--- a/src/types/common.d.ts
+++ b/src/types/common.d.ts
@@ -6,5 +6,7 @@ interface Dict<T> {
   [key: string]: T;
 }
 
+type IntArray = Uint8Array | Uint16Array | Uint32Array;
+
 type RGB = `rgb(${number}, ${number}, ${number})`;
 type Hex = `#${string}`;
diff --git a/src/types/grid.d.ts b/src/types/grid.d.ts
index d547aad8..6b06abce 100644
--- a/src/types/grid.d.ts
+++ b/src/types/grid.d.ts
@@ -1,7 +1,21 @@
 interface IGrid {
+  spacing: number;
+  boundary: TPoints;
   points: TPoints;
+  features: IFeature[];
   cells: {
-    h: TypedArray;
-    prec: number[];
+    i: IntArray;
+    b: IntArray;
+    c: number[][];
+    h: IntArray;
+    t: IntArray;
+    f: IntArray;
+    prec: IntArray;
   };
 }
+interface IFeature {
+  i: number;
+  land: boolean;
+  border: boolean;
+  type: "ocean" | "lake" | "island";
+}
diff --git a/src/types/pack.d.ts b/src/types/pack.d.ts
index 9fdd34cd..e75bfb9b 100644
--- a/src/types/pack.d.ts
+++ b/src/types/pack.d.ts
@@ -1,10 +1,20 @@
 interface IPack {
+  vertices: {
+    p: TPoints;
+    v: number[][];
+    c: number[][];
+  };
   cells: {
-    i: number[];
-    g: number[];
-    h: number[];
-    pop: number[];
-    burg: number[];
+    i: IntArray;
+    p: TPoints;
+    v: number[][];
+    c: number[][];
+    g: IntArray;
+    h: IntArray;
+    pop: Float32Array;
+    burg: IntArray;
+    area: IntArray;
+    q: d3.Quadtree<number[]>;
   };
   states: IState[];
   cultures: ICulture[];
diff --git a/src/utils/colorUtils.ts b/src/utils/colorUtils.ts
index afa63735..b41bb11e 100644
--- a/src/utils/colorUtils.ts
+++ b/src/utils/colorUtils.ts
@@ -15,18 +15,28 @@ const c12: Hex[] = [
   "#eb8de7"
 ];
 
+type ColorScheme = (n: number) => string;
+const colorSchemeMap: Dict<ColorScheme> = {
+  default: d3.scaleSequential(d3.interpolateRainbow),
+  bright: d3.scaleSequential(d3.interpolateSpectral),
+  light: d3.scaleSequential(d3.interpolateRdYlGn),
+  green: d3.scaleSequential(d3.interpolateGreens),
+  monochrome: d3.scaleSequential(d3.interpolateGreys)
+};
+
 export function getColors(number: number) {
-  const cRB = d3.scaleSequential(d3.interpolateRainbow);
+  const scheme = colorSchemeMap.default;
   const colors = d3.shuffle(
     d3
       .range(number)
-      .map((index: number) => (index < 12 ? c12[index] : d3.color(cRB((index - 12) / (number - 12))).hex()))
+      .map((index: number) => (index < 12 ? c12[index] : d3.color(scheme((index - 12) / (number - 12)))!.formatHex()))
   );
   return colors;
 }
 
-export function getRandomColor() {
-  return d3.color(d3.scaleSequential(d3.interpolateRainbow)(Math.random())).hex();
+export function getRandomColor(): Hex {
+  const rgb = colorSchemeMap.default(Math.random());
+  return d3.color(rgb)!.formatHex() as Hex;
 }
 
 // mix a color with a random color
@@ -36,22 +46,13 @@ export function getMixedColor(hexColor: string, mixation = 0.2, bright = 0.3) {
   const color2 = getRandomColor();
   const mixedColor = d3.interpolate(color1, color2)(mixation);
 
-  return d3.color(mixedColor).brighter(bright).hex();
+  return d3.color(mixedColor)!.brighter(bright).hex();
 }
 
 export function getColorScheme(schemeName: string) {
   return colorSchemeMap[schemeName] || colorSchemeMap.default;
 }
 
-type ColorScheme = (n: number) => RGB;
-const colorSchemeMap: Dict<ColorScheme> = {
-  default: d3.scaleSequential(d3.interpolateSpectral),
-  bright: d3.scaleSequential(d3.interpolateSpectral),
-  light: d3.scaleSequential(d3.interpolateRdYlGn),
-  green: d3.scaleSequential(d3.interpolateGreens),
-  monochrome: d3.scaleSequential(d3.interpolateGreys)
-};
-
 export function getHeightColor(height: number, scheme = getColorScheme("default")) {
   const fittedValue = height < 20 ? height - 5 : height;
   return scheme(1 - fittedValue / 100);
diff --git a/src/utils/coordinateUtils.ts b/src/utils/coordinateUtils.ts
index b7c86d40..8515aa0c 100644
--- a/src/utils/coordinateUtils.ts
+++ b/src/utils/coordinateUtils.ts
@@ -1,13 +1,11 @@
 import {rn} from "./numberUtils";
 
-const {mapCoordinates, graphWidth, graphHeight} = window;
-
 function getLongitude(x: number, decimals = 2) {
-  return rn(mapCoordinates.lonW + (x / graphWidth) * mapCoordinates.lonT, decimals);
+  return rn(window.mapCoordinates.lonW + (x / graphWidth) * window.mapCoordinates.lonT, decimals);
 }
 
 function getLatitude(y: number, decimals = 2) {
-  return rn(mapCoordinates.latN - (y / graphHeight) * mapCoordinates.latT, decimals);
+  return rn(window.mapCoordinates.latN - (y / graphHeight) * window.mapCoordinates.latT, decimals);
 }
 
 export function getCoordinates(x: number, y: number, decimals = 2) {
diff --git a/src/utils/graphUtils.ts b/src/utils/graphUtils.ts
index 50a22691..6164d6c7 100644
--- a/src/utils/graphUtils.ts
+++ b/src/utils/graphUtils.ts
@@ -148,7 +148,9 @@ export function getPackPolygon(i: number) {
 }
 
 // return closest cell index
-export function findCell(x: number, y: number, radius = Infinity) {
+export function findCell(x: number, y: number): number;
+export function findCell(x: number, y: number, radius: number): number | undefined;
+export function findCell(x: number, y: number, radius = Infinity): number | undefined {
   const found = pack.cells.q.find(x, y, radius);
   return found ? found[2] : undefined;
 }
diff --git a/src/utils/lineUtils.ts b/src/utils/lineUtils.ts
index 50078159..d6ff2b2e 100644
--- a/src/utils/lineUtils.ts
+++ b/src/utils/lineUtils.ts
@@ -2,7 +2,6 @@ import {polygon} from "lineclip";
 
 // clip polygon by graph bbox
 export function clipPoly(points: TPoints) {
-  // @ts-expect-error graphWidth/graphWidth are global variables
   return polygon(points, [0, 0, graphWidth, graphWidth]);
 }
 
@@ -39,7 +38,6 @@ export function getSegmentId(points: TPoints, point: TPoint, step = 10) {
 
 // return center point of common edge of 2 pack cells
 export function getMiddlePoint(cell1: number, cell2: number) {
-  // @ts-expect-error pack is global variable
   const {cells, vertices} = pack;
 
   const commonVertices = cells.v[cell1].filter((vertex: number) =>