From 0d71f10f05bfada9ee32c2f7b9b4b03f25a3da6b Mon Sep 17 00:00:00 2001
From: GoteGuru <meszaros.gergely@gmail.com>
Date: Wed, 18 May 2022 11:56:44 +0200
Subject: [PATCH 1/9] Submap live preview.

---
 index.html           |   5 +-
 modules/io/export.js |   8 ++-
 modules/ui/submap.js | 160 ++++++++++++++++++++++++++++++++++---------
 3 files changed, 137 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index 6aac18d2..6493e516 100644
--- a/index.html
+++ b/index.html
@@ -4370,8 +4370,8 @@
 
           <div>Shift</div>
           <div>
-            <label>X: <input id="submapShiftX" type="number" min="0" size="4" value="0" /></label>
-            <label>Y: <input id="submapShiftY" type="number" min="0" size="4" value="0" /></label>
+            <label>X: <input id="submapShiftX" type="number" size="4" value="0" /></label>
+            <label>Y: <input id="submapShiftY" type="number" size="4" value="0" /></label>
           </div>
 
           <div>Rotate</div>
@@ -4395,6 +4395,7 @@
             <label for="submapMirrorV" class="checkbox-label">vertically</label>
           </div>
         </div>
+        <div id="submapPreview" style="border:1px solid black; margin: 1em auto; overflow:hidden"></div>
       </div>
 
       <div id="submapOptionsDialog" style="display: none" class="dialog">
diff --git a/modules/io/export.js b/modules/io/export.js
index 5d30d013..689c2741 100644
--- a/modules/io/export.js
+++ b/modules/io/export.js
@@ -139,7 +139,7 @@ async function saveTiles() {
 
 // parse map svg to object url
 async function getMapURL(type, options = {}) {
-  const {debug = false, globe = false, noLabels = false, noWater = false, fullMap = false} = options;
+  const {debug = false, globe = false, noLabels = false, noWater = false, noScaleBar = false, noIce = false, fullMap = false} = options;
 
   if (fullMap) drawScaleBar(1);
 
@@ -164,6 +164,12 @@ async function getMapURL(type, options = {}) {
     clone.select("#oceanBase").attr("opacity", 0);
     clone.select("#oceanPattern").attr("opacity", 0);
   }
+  if (noScaleBar) {
+    clone.select("#scaleBar")?.remove()
+  }
+  if (noIce) {
+    clone.select("#ice")?.remove()
+  }
   if (fullMap) {
     // reset transform to show the whole map
     clone.attr("width", graphWidth).attr("height", graphHeight);
diff --git a/modules/ui/submap.js b/modules/ui/submap.js
index 0a903443..9c27f4d5 100644
--- a/modules/ui/submap.js
+++ b/modules/ui/submap.js
@@ -2,20 +2,29 @@
 // UI elements for submap generation
 
 window.UISubmap = (function () {
-  document.getElementById("submapPointsInput").addEventListener("input", function () {
-    const output = document.getElementById("submapPointsOutputFormatted");
+  const byId = document.getElementById.bind(document);
+  byId("submapPointsInput").addEventListener("input", function () {
+    const output = byId("submapPointsOutputFormatted");
     const cells = cellsDensityMap[+this.value] || 1000;
     this.dataset.cells = cells;
     output.value = getCellsDensityValue(cells);
     output.style.color = getCellsDensityColor(cells);
   });
 
-  document.getElementById("submapScaleInput").addEventListener("input", function (event) {
+  byId("submapScaleInput").addEventListener("input", function (event) {
     const exp = Math.pow(1.1, +event.target.value);
-    document.getElementById("submapScaleOutput").value = rn(exp,2);
-    event.stopPropagation();
+    byId("submapScaleOutput").value = rn(exp,2);
   });
 
+  byId("submapAngleInput").addEventListener("input", function (event) {
+    byId("submapAngleOutput").value = event.target.value;
+  });
+
+  const $previewBox = byId("submapPreview");
+  const $scaleInput = byId("submapScaleInput");
+  const $shiftX = byId("submapShiftX");
+  const $shiftY = byId("submapShiftY");
+
   function openSubmapMenu() {
     $("#submapOptionsDialog").dialog({
       title: "Create a submap",
@@ -34,21 +43,59 @@ window.UISubmap = (function () {
     });
   }
 
-  function openResampleMenu() {
+  const getTransformInput = _ => ({
+    angle: (+byId("submapAngleInput").value / 180) * Math.PI,
+    shiftX: +byId("submapShiftX").value,
+    shiftY: +byId("submapShiftY").value,
+    ratio: +byId("submapScaleInput").value,
+    mirrorH: byId("submapMirrorH").checked,
+    mirrorV: byId("submapMirrorV").checked,
+  })
+
+  async function openResampleMenu() {
     resetZoom(0);
 
-    document.getElementById("submapAngleInput").value = 0;
-    document.getElementById("submapAngleOutput").value = "0";
-    document.getElementById("submapScaleInput").value = 1;
-    document.getElementById("submapScaleOutput").value = 1;
-    document.getElementById("submapShiftX").value = 0;
-    document.getElementById("submapShiftY").value = 0;
-    document.getElementById("submapMirrorH").checked = false;
-    document.getElementById("submapMirrorV").checked = false;
+    byId("submapAngleInput").value = 0;
+    byId("submapAngleOutput").value = "0";
+    byId("submapScaleOutput").value = 1;
+    byId("submapMirrorH").checked = false;
+    byId("submapMirrorV").checked = false;
+    $scaleInput.value = 0;
+    $shiftX.value = 0;
+    $shiftY.value = 0;
+
+    const previewScale = 400 / graphWidth;
+    const [w, h] = [400, graphHeight * previewScale];
+    $previewBox.style.width = w + 'px';
+    $previewBox.style.height = h + 'px';
+    $previewBox.style.position = 'relative';
+
+    // handle mouse input
+    const dispatchInput = e => e.dispatchEvent(new Event('input', {bubbles:true}));
+
+    // mouse wheel
+    $previewBox.onwheel = e => {
+      $scaleInput.value = $scaleInput.valueAsNumber - Math.sign(e.deltaY);
+      dispatchInput($scaleInput);
+    };
+
+    // mouse drag
+    let mouseIsDown = false, mouseX = 0, mouseY = 0;
+    $previewBox.onmousedown = e => [ mouseIsDown, mouseX, mouseY ] = [ true, $shiftX.value - e.clientX / previewScale, $shiftY.value - e.clientY / previewScale];
+    $previewBox.onmouseup = _ => mouseIsDown = false;
+    $previewBox.onmouseleave = _ => mouseIsDown = false;
+    $previewBox.onmousemove = e => {
+      if (!mouseIsDown) return;
+      e.preventDefault();
+      $shiftX.value = Math.round(mouseX + e.clientX / previewScale);
+      $shiftY.value = Math.round(mouseY + e.clientY / previewScale);
+      dispatchInput($shiftX);
+      // dispatchInput($shiftY); // not needed X bubbles anyway
+    };
 
     $("#resampleDialog").dialog({
       title: "Resample map",
-      width: "30em",
+      width: "430px",
       resizable: false,
       position: {my: "center", at: "center", of: "svg"},
       buttons: {
@@ -61,25 +108,72 @@ window.UISubmap = (function () {
         }
       }
     });
+
+    // use double resolution for PNG to get sharper image
+    const $preview = await loadPreview($previewBox, w*2, h*2);
+    // could be done with SVG. Faster to load, slower to use.
+    // const $preview = await loadPreviewSVG($previewBox, w, h);
+    $preview.style.position = "absolute";
+    $preview.style.width = w + "px";
+    $preview.style.height = h + "px";
+
+    byId("resampleDialog").oninput = event => {
+      const { angle, shiftX, shiftY, ratio, mirrorH, mirrorV } = getTransformInput();
+      const scale = Math.pow(1.1,ratio);
+      const transformStyle = `
+        translate(${shiftX*previewScale}px, ${shiftY*previewScale}px)
+        scale(${mirrorH?-scale:scale}, ${mirrorV?-scale:scale})
+        rotate(${angle}rad)
+      `;
+
+      $preview.style.transform = transformStyle;
+      $preview.style['transform-origin'] = 'center';
+      event.stopPropagation();
+    }
+  }
+
+  async function loadPreview($container, w, h) {
+    const url = await getMapURL("png", { globe: false, noWater: true, fullMap: true, noLabels: false, noScaleBar: true, noIce: true });
+
+    const link = document.createElement("a");
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    canvas.width = w;
+    canvas.height = h;
+    const img = new Image();
+    img.src = url;
+    img.onload = function () {
+      ctx.drawImage(img, 0, 0, w, h);
+    };
+    $container.textContent = '';
+    $container.appendChild(canvas);
+    return canvas;
+  }
+
+  // currently unused alternative to PNG version
+  async function loadPreviewSVG($container, w, h) {
+    $container.innerHTML = /*html*/`
+      <svg id="submapPreviewSVG" viewBox="0 0 ${graphWidth} ${graphHeight}">
+        <rect width="100%" height="100%" fill="${byId('styleOceanFill').value}" />
+        <rect fill="url(#oceanic)" width="100%" height="100%" />
+        <use href="#map"></use>
+      </svg>
+    `;
+    return byId("submapPreviewSVG");
   }
 
   // Resample the whole map to different cell resolution or shape
   const resampleCurrentMap = debounce(function () {
     WARN && console.warn("Resampling current map");
-    const cellNumId = +document.getElementById("submapPointsInput").value;
+    const cellNumId = +byId("submapPointsInput").value;
     if (!cellsDensityMap[cellNumId]) return console.error("Unknown cell number!");
 
-    const angle = (+document.getElementById("submapAngleInput").value / 180) * Math.PI;
-    const shiftX = +document.getElementById("submapShiftX").value;
-    const shiftY = +document.getElementById("submapShiftY").value;
-    const ratio = +document.getElementById("submapScaleInput").value;
-    const mirrorH = document.getElementById("submapMirrorH").checked;
-    const mirrorV = document.getElementById("submapMirrorV").checked;
+    const { angle, shiftX, shiftY, ratio, mirrorH, mirrorV } = getTransformInput()
 
     const [cx, cy] = [graphWidth / 2, graphHeight / 2];
     const rot = alfa => (x, y) => [(x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx, (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy];
-    const scale = ratio => (x, y) => [(x-cx) * ratio + cx, (y-cy) * ratio + cy];
     const shift = (dx, dy) => (x, y) => [x + dx, y + dy];
+    const scale = r => (x, y) => [(x-cx) * r + cx, (y-cy) * r + cy];
     const flipH = (x, y) => [-x + 2 * cx, y];
     const flipV = (x, y) => [x, -y + 2 * cy];
     const app = (f, g) => (x, y) => f(...g(x, y));
@@ -89,13 +183,13 @@ window.UISubmap = (function () {
     let inverse = id;
 
     if (angle) [projection, inverse] = [rot(angle), rot(-angle)];
+    if (ratio) [projection, inverse] = [app(scale(Math.pow(1.1,ratio)), projection), app(inverse, scale(Math.pow(1.1,-ratio)))];
+    if (mirrorH) [projection, inverse] = [app(flipH, projection), app(inverse, flipH)];
+    if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
     if (shiftX || shiftY) {
       projection = app(shift(shiftX, shiftY), projection);
       inverse = app(inverse, shift(-shiftX, -shiftY));
     }
-    if (ratio) [projection, inverse] = [app(scale(Math.pow(1.1,ratio)), projection), app(inverse, scale(Math.pow(1.1,-ratio)))];
-    if (mirrorH) [projection, inverse] = [app(flipH, projection), app(inverse, flipH)];
-    if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
 
     changeCellsDensity(cellNumId);
     startResample({
@@ -115,7 +209,7 @@ window.UISubmap = (function () {
   const generateSubmap = debounce(function () {
     WARN && console.warn("Resampling current map");
     closeDialogs("#worldConfigurator, #options3d");
-    const checked = id => Boolean(document.getElementById(id).checked);
+    const checked = id => Boolean(byId(id).checked);
 
     // Create projection func from current zoom extents
     const [[x0, y0], [x1, y1]] = getViewBoxExtent();
@@ -136,14 +230,14 @@ window.UISubmap = (function () {
     };
 
     // converting map position on the planet
-    const mapSizeOutput = document.getElementById("mapSizeOutput");
-    const latitudeOutput = document.getElementById("latitudeOutput");
+    const mapSizeOutput = byId("mapSizeOutput");
+    const latitudeOutput = byId("latitudeOutput");
     const latN = 90 - ((180 - (mapSizeInput.value / 100) * 180) * latitudeOutput.value) / 100;
     const newLatN = latN - ((y0 / graphHeight) * mapSizeOutput.value * 180) / 100;
     mapSizeOutput.value /= scale;
     latitudeOutput.value = ((90 - newLatN) / (180 - (mapSizeOutput.value / 100) * 180)) * 100;
-    document.getElementById("mapSizeInput").value = mapSizeOutput.value;
-    document.getElementById("latitudeInput").value = latitudeOutput.value;
+    byId("mapSizeInput").value = mapSizeOutput.value;
+    byId("latitudeInput").value = latitudeOutput.value;
 
     // fix scale
     distanceScaleInput.value = distanceScaleOutput.value = rn((distanceScale = distanceScaleOutput.value / scale), 2);
@@ -188,7 +282,7 @@ window.UISubmap = (function () {
 
   function changeStyles(scale) {
     // resize burgIcons
-    const burgIcons = [...document.getElementById("burgIcons").querySelectorAll("g")];
+    const burgIcons = [...byId("burgIcons").querySelectorAll("g")];
     for (const bi of burgIcons) {
       const newRadius = rn(minmax(bi.getAttribute("size") * scale, 0.2, 10), 2);
       changeRadius(newRadius, bi.id);
@@ -197,7 +291,7 @@ window.UISubmap = (function () {
     }
 
     // burglabels
-    const burgLabels = [...document.getElementById("burgLabels").querySelectorAll("g")];
+    const burgLabels = [...byId("burgLabels").querySelectorAll("g")];
     for (const bl of burgLabels) {
       const size = +bl.dataset["size"];
       bl.dataset["size"] = Math.max(rn((size + size / scale) / 2, 2), 1) * scale;

From ae4e62a154d438d7f379dc499c23db8f25898178 Mon Sep 17 00:00:00 2001
From: GoteGuru <meszaros.gergely@gmail.com>
Date: Wed, 18 May 2022 14:02:29 +0200
Subject: [PATCH 2/9] FIX: destroyed population on resample

---
 modules/ui/submap.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/modules/ui/submap.js b/modules/ui/submap.js
index 0a903443..827efc0e 100644
--- a/modules/ui/submap.js
+++ b/modules/ui/submap.js
@@ -106,6 +106,7 @@ window.UISubmap = (function () {
       promoteTowns: false,
       smoothHeightMap: false,
       rescaleStyles: false,
+      scale: 1,
       projection,
       inverse
     });

From 70e7adb5d087eac5d330b031caedc1b8db182c8e Mon Sep 17 00:00:00 2001
From: GoteGuru <meszaros.gergely@gmail.com>
Date: Wed, 18 May 2022 23:01:48 +0200
Subject: [PATCH 3/9] fix formatting

---
 modules/io/export.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/modules/io/export.js b/modules/io/export.js
index 689c2741..2fed9553 100644
--- a/modules/io/export.js
+++ b/modules/io/export.js
@@ -164,12 +164,8 @@ async function getMapURL(type, options = {}) {
     clone.select("#oceanBase").attr("opacity", 0);
     clone.select("#oceanPattern").attr("opacity", 0);
   }
-  if (noScaleBar) {
-    clone.select("#scaleBar")?.remove()
-  }
-  if (noIce) {
-    clone.select("#ice")?.remove()
-  }
+  if (noScaleBar) clone.select("#scaleBar")?.remove();
+  if (noIce) clone.select("#ice")?.remove();
   if (fullMap) {
     // reset transform to show the whole map
     clone.attr("width", graphWidth).attr("height", graphHeight);

From 2d8c5355bb46e2cb377ca7d7e96192cefe7406ea Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Thu, 19 May 2022 00:19:24 +0300
Subject: [PATCH 4/9] load dynamically cultures editor

---
 index.css                                  |   10 -
 index.html                                 |   88 +-
 modules/dynamic/editors/cultures-editor.js | 1017 ++++++++++++++++++++
 modules/dynamic/editors/states-editor.js   |   26 +-
 modules/ui/biomes-editor.js                |    6 +-
 modules/ui/coastline-editor.js             |    6 +-
 modules/ui/cultures-editor.js              |  979 -------------------
 modules/ui/editors.js                      |   30 +-
 modules/ui/general.js                      |   15 +-
 modules/ui/lakes-editor.js                 |    7 +-
 modules/ui/measurers.js                    |    3 +-
 modules/ui/provinces-editor.js             |    8 +-
 modules/ui/religions-editor.js             |    6 +-
 modules/ui/zones-editor.js                 |    7 +-
 versioning.js                              |    2 +-
 15 files changed, 1091 insertions(+), 1119 deletions(-)
 create mode 100644 modules/dynamic/editors/cultures-editor.js
 delete mode 100644 modules/ui/cultures-editor.js

diff --git a/index.css b/index.css
index 848d8420..f070c939 100644
--- a/index.css
+++ b/index.css
@@ -1452,15 +1452,6 @@ div.states > .small {
   font-size: 0.9em;
 }
 
-div.states > .cultureName {
-  width: 7em;
-}
-
-div.states > .culturePopulation {
-  width: 4em;
-  cursor: pointer;
-}
-
 div.states > select {
   width: 7em;
   cursor: pointer;
@@ -1471,7 +1462,6 @@ div.states > select {
   appearance: none;
 }
 
-div.states > .cultureBase,
 div.states > .burgName,
 div.states > .burgState,
 div.states > .burgCulture {
diff --git a/index.html b/index.html
index 6aac18d2..9a9c5582 100644
--- a/index.html
+++ b/index.html
@@ -107,7 +107,7 @@
         }
       }
     </style>
-    <link rel="stylesheet" href="index.css?v=15052022" />
+    <link rel="stylesheet" href="index.css?v=18052022" />
     <link rel="stylesheet" href="icons.css" />
     <link rel="stylesheet" href="libs/jquery-ui.css" />
   </head>
@@ -3343,73 +3343,6 @@
         </div>
       </div>
 
-      <div id="culturesEditor" class="dialog stable" style="display: none">
-        <div id="culturesHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture&nbsp;</div>
-          <div style="left: 9.9em" data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells&nbsp;</div>
-          <div style="left: 14.5em" data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expan.&nbsp;</div>
-          <div style="left: 20.3em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div style="left: 29.1em" data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 33em" data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">
-            Population&nbsp;
-          </div>
-          <div style="left: 39.5em" data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase&nbsp;</div>
-          <div style="left: 47em" data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">
-            Emblems&nbsp;
-          </div>
-        </div>
-        <div id="culturesBody" class="table" data-type="absolute"></div>
-
-        <div id="culturesFooter" class="totalLine">
-          <div data-tip="Cultures number" style="margin-left: 12px">Cultures:&nbsp;<span id="culturesFooterCultures">0</span></div>
-          <div data-tip="Total land cells number" style="margin-left: 12px">Cells:&nbsp;<span id="culturesFooterCells">0</span></div>
-          <div data-tip="Total land area" style="margin-left: 12px">Land Area:&nbsp;<span id="culturesFooterArea">0</span></div>
-          <div data-tip="Total population" style="margin-left: 12px">Population:&nbsp;<span id="culturesFooterPopulation">0</span></div>
-        </div>
-
-        <div id="culturesBottom">
-          <button id="culturesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
-          <button id="culturesEditStyle" data-tip="Edit cultures style in Style Editor" class="icon-adjust"></button>
-          <button id="culturesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
-          <button id="culturesPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
-          <button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
-          <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
-          <div id="culturesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
-              >Brush size:
-              <input
-                id="culturesManuallyBrush"
-                oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
-                type="range"
-                min="5"
-                max="99"
-                value="15"
-                style="width: 7em"
-              />
-              <input
-                id="culturesManuallyBrushNumber"
-                oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value"
-                type="number"
-                min="5"
-                max="99"
-                value="15"
-              /> </label
-            ><br />
-            <button id="culturesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
-            <button id="culturesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
-          </div>
-          <button id="culturesEditNamesBase" data-tip="Edit a database used for names generation" class="icon-font"></button>
-          <button id="culturesAdd" data-tip="Add a new culture. Hold Shift to add multiple" class="icon-plus"></button>
-          <button id="culturesExport" data-tip="Download cultures-related data" class="icon-download"></button>
-          <button id="culturesImport" data-tip="Upload cultures-related data" class="icon-upload"></button>
-          <button id="culturesRecalculate" data-tip="Recalculate cultures based on current values of growth-related attributes" class="icon-retweet"></button>
-          <span data-tip="Allow culture centers, expansion and type changes to take an immediate effect">
-            <input id="culturesAutoChange" class="checkbox" type="checkbox" />
-            <label for="culturesAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
-          </span>
-        </div>
-      </div>
-
       <div id="namesbaseEditor" class="dialog stable textual" style="display: none">
         <div id="namesbaseBasesTop">
           <span>Select base: </span>
@@ -6193,39 +6126,38 @@
     <script src="libs/alea.min.js"></script>
     <script src="modules/fonts.js?v=11052022"></script>
     <script src="modules/ui/layers.js"></script>
-    <script src="modules/ui/measurers.js"></script>
+    <script src="modules/ui/measurers.js?v=18052022"></script>
     <script src="modules/ui/stylePresets.js"></script>
 
-    <script src="modules/ui/general.js?v=15052022"></script>
+    <script src="modules/ui/general.js?v=18052022"></script>
     <script src="modules/ui/options.js?v=14052022"></script>
     <script src="main.js?v=15052022"></script>
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js"></script>
-    <script defer src="modules/ui/editors.js?v=15052022"></script>
+    <script defer src="modules/ui/editors.js?v=18052022"></script>
     <script defer src="modules/ui/tools.js"></script>
     <script defer src="modules/ui/world-configurator.js"></script>
     <script defer src="modules/ui/heightmap-editor.js"></script>
-    <script defer src="modules/ui/provinces-editor.js"></script>
-    <script defer src="modules/ui/biomes-editor.js"></script>
-    <script defer src="modules/ui/cultures-editor.js"></script>
+    <script defer src="modules/ui/provinces-editor.js?v=18052022"></script>
+    <script defer src="modules/ui/biomes-editor.js?v=18052022"></script>
     <script defer src="modules/ui/namesbase-editor.js"></script>
     <script defer src="modules/ui/elevation-profile.js"></script>
     <script defer src="modules/ui/temperature-graph.js"></script>
     <script defer src="modules/ui/routes-editor.js"></script>
     <script defer src="modules/ui/ice-editor.js"></script>
-    <script defer src="modules/ui/lakes-editor.js"></script>
-    <script defer src="modules/ui/coastline-editor.js"></script>
+    <script defer src="modules/ui/lakes-editor.js?v=18052022"></script>
+    <script defer src="modules/ui/coastline-editor.js?v=18052022"></script>
     <script defer src="modules/ui/labels-editor.js"></script>
     <script defer src="modules/ui/rivers-editor.js"></script>
     <script defer src="modules/ui/rivers-creator.js"></script>
     <script defer src="modules/ui/relief-editor.js"></script>
-    <script defer src="modules/ui/religions-editor.js"></script>
+    <script defer src="modules/ui/religions-editor.js?v=18052022"></script>
     <script defer src="modules/ui/burg-editor.js"></script>
     <script defer src="modules/ui/units-editor.js"></script>
     <script defer src="modules/ui/notes-editor.js"></script>
     <script defer src="modules/ui/diplomacy-editor.js"></script>
-    <script defer src="modules/ui/zones-editor.js"></script>
+    <script defer src="modules/ui/zones-editor.js?v=18052022"></script>
     <script defer src="modules/ui/burgs-overview.js"></script>
     <script defer src="modules/ui/rivers-overview.js"></script>
     <script defer src="modules/ui/military-overview.js"></script>
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
new file mode 100644
index 00000000..fddb8bb5
--- /dev/null
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -0,0 +1,1017 @@
+const body = insertEditorHtml();
+addListeners();
+
+const cultureTypes = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
+
+export function open() {
+  closeDialogs("#culturesEditor, .stable");
+  if (!layerIsOn("toggleCultures")) toggleCultures();
+  if (layerIsOn("toggleStates")) toggleStates();
+  if (layerIsOn("toggleBiomes")) toggleBiomes();
+  if (layerIsOn("toggleReligions")) toggleReligions();
+  if (layerIsOn("toggleProvinces")) toggleProvinces();
+
+  refreshCulturesEditor();
+
+  $("#culturesEditor").dialog({
+    title: "Cultures Editor",
+    resizable: false,
+    width: fitContent(),
+    close: closeCulturesEditor,
+    position: {my: "right top", at: "right-10 top+10", of: "svg"}
+  });
+  body.focus();
+}
+
+function insertEditorHtml() {
+  const editorHtml = /* html */ `<div id="culturesEditor" class="dialog stable" style="display: none">
+    <div id="culturesHeader" class="header">
+      <div style="left: 1.8em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture&nbsp;</div>
+      <div style="left: 9.9em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+      <div style="left: 16.2em" data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase&nbsp;</div>
+      <div style="left: 24.5em" data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells&nbsp;</div>
+      <div style="left: 29.8em" data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion&nbsp;</div>
+      <div style="left: 37.2em" data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+      <div style="left: 42.8em" data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">Population&nbsp;</div>
+      <div style="left: 50.8em" data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">Emblems&nbsp;</div>
+    </div>
+    <div id="culturesBody" class="table" data-type="absolute"></div>
+
+    <div id="culturesFooter" class="totalLine">
+      <div data-tip="Cultures number" style="margin-left: 12px">Cultures:&nbsp;<span id="culturesFooterCultures">0</span></div>
+      <div data-tip="Total land cells number" style="margin-left: 12px">Cells:&nbsp;<span id="culturesFooterCells">0</span></div>
+      <div data-tip="Total land area" style="margin-left: 12px">Land Area:&nbsp;<span id="culturesFooterArea">0</span></div>
+      <div data-tip="Total population" style="margin-left: 12px">Population:&nbsp;<span id="culturesFooterPopulation">0</span></div>
+    </div>
+
+    <div id="culturesBottom">
+      <button id="culturesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+      <button id="culturesEditStyle" data-tip="Edit cultures style in Style Editor" class="icon-adjust"></button>
+      <button id="culturesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
+      <button id="culturesPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
+      <button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
+      <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
+      <div id="culturesManuallyButtons" style="display: none">
+        <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic">Brush size:
+          <input
+            id="culturesManuallyBrush"
+            oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
+            type="range"
+            min="5"
+            max="99"
+            value="15"
+            style="width: 7em"
+          />
+          <input
+            id="culturesManuallyBrushNumber"
+            oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value"
+            type="number"
+            min="5"
+            max="99"
+            value="15"
+          /> </label><br />
+        <button id="culturesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
+        <button id="culturesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
+      </div>
+      <button id="culturesEditNamesBase" data-tip="Edit a database used for names generation" class="icon-font"></button>
+      <button id="culturesAdd" data-tip="Add a new culture. Hold Shift to add multiple" class="icon-plus"></button>
+      <button id="culturesExport" data-tip="Download cultures-related data" class="icon-download"></button>
+      <button id="culturesImport" data-tip="Upload cultures-related data" class="icon-upload"></button>
+      <button id="culturesRecalculate" data-tip="Recalculate cultures based on current values of growth-related attributes" class="icon-retweet"></button>
+      <span data-tip="Allow culture centers, expansion and type changes to take an immediate effect">
+        <input id="culturesAutoChange" class="checkbox" type="checkbox" />
+        <label for="culturesAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
+      </span>
+    </div>
+  </div>`;
+
+  const dialogs = document.getElementById("dialogs");
+  dialogs.insertAdjacentHTML("beforeend", editorHtml);
+
+  return document.getElementById("culturesBody");
+}
+
+function addListeners() {
+  applySortingByHeader("culturesHeader");
+
+  document.getElementById("culturesEditorRefresh").addEventListener("click", refreshCulturesEditor);
+  document.getElementById("culturesEditStyle").addEventListener("click", () => editStyle("cults"));
+  document.getElementById("culturesLegend").addEventListener("click", toggleLegend);
+  document.getElementById("culturesPercentage").addEventListener("click", togglePercentageMode);
+  document.getElementById("culturesHeirarchy").addEventListener("click", showHierarchy);
+  document.getElementById("culturesRecalculate").addEventListener("click", () => recalculateCultures(true));
+  document.getElementById("culturesManually").addEventListener("click", enterCultureManualAssignent);
+  document.getElementById("culturesManuallyApply").addEventListener("click", applyCultureManualAssignent);
+  document.getElementById("culturesManuallyCancel").addEventListener("click", () => exitCulturesManualAssignment());
+  document.getElementById("culturesEditNamesBase").addEventListener("click", editNamesbase);
+  document.getElementById("culturesAdd").addEventListener("click", enterAddCulturesMode);
+  document.getElementById("culturesExport").addEventListener("click", downloadCulturesData);
+  document.getElementById("culturesImport").addEventListener("click", () => document.getElementById("culturesCSVToLoad").click());
+  document.getElementById("culturesCSVToLoad").addEventListener("change", uploadCulturesData);
+}
+
+function refreshCulturesEditor() {
+  culturesCollectStatistics();
+  culturesEditorAddLines();
+  drawCultureCenters();
+}
+
+function culturesCollectStatistics() {
+  const {cells, cultures, burgs} = pack;
+  cultures.forEach(c => (c.cells = c.area = c.rural = c.urban = 0));
+
+  for (const i of cells.i) {
+    if (cells.h[i] < 20) continue;
+    const cultureId = cells.culture[i];
+    cultures[cultureId].cells += 1;
+    cultures[cultureId].area += cells.area[i];
+    cultures[cultureId].rural += cells.pop[i];
+    const burgId = cells.burg[i];
+    if (burgId) cultures[cultureId].urban += burgs[burgId].population;
+  }
+}
+
+function culturesEditorAddLines() {
+  const unit = getAreaUnit();
+  let lines = "";
+  let totalArea = 0;
+  let totalPopulation = 0;
+
+  const emblemShapeGroup = document.getElementById("emblemShape")?.selectedOptions[0]?.parentNode?.label;
+  const selectShape = emblemShapeGroup === "Diversiform";
+
+  for (const c of pack.cultures) {
+    if (c.removed) continue;
+    const area = getArea(c.area);
+    const rural = c.rural * populationRate;
+    const urban = c.urban * populationRate * urbanization;
+    const population = rn(rural + urban);
+    const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to edit`;
+    totalArea += area;
+    totalPopulation += population;
+
+    if (!c.i) {
+      // Uncultured (neutral) line
+      lines += /* html */ `<div
+          class="states"
+          data-id=${c.i}
+          data-name="${c.name}"
+          data-color=""
+          data-cells=${c.cells}
+          data-area=${area}
+          data-population=${population}
+          data-base=${c.base}
+          data-type=""
+          data-expansionism=""
+          data-emblems="${c.shield}"
+        >
+          <svg width="11" height="11" class="placeholder"></svg>
+          <input data-tip="Neutral culture name. Click and type to change" class="cultureName italic" style="width: 7em"
+            value="${c.name}" autocorrect="off" spellcheck="false" />
+          <span class="icon-cw placeholder"></span>
+          <select class="cultureType placeholder">${getTypeOptions(c.type)}</select>
+          <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">${getBaseOptions(c.base)}</select>
+          <span data-tip="Cells count" class="icon-check-empty hide"></span>
+          <div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
+          <span class="icon-resize-full placeholder hide"></span>
+          <input class="cultureExpan placeholder hide" type="number" />
+          <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
+          <div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
+          <span data-tip="${populationTip}" class="icon-male hide"></span>
+          <div data-tip="${populationTip}" class="culturePopulation hide pointer" style="width: 5em">${si(population)}</div>
+          <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
+          ${getShapeOptions(selectShape, c.shield)}
+        </div>`;
+      continue;
+    }
+
+    lines += /* html */ `<div
+        class="states cultures"
+        data-id=${c.i}
+        data-name="${c.name}"
+        data-color="${c.color}"
+        data-cells=${c.cells}
+        data-area=${area}
+        data-population=${population}
+        data-base=${c.base}
+        data-type=${c.type}
+        data-expansionism=${c.expansionism}
+        data-emblems="${c.shield}"
+      >
+        <fill-box fill="${c.color}"></fill-box>
+        <input data-tip="Culture name. Click and type to change" class="cultureName" style="width: 7em"
+          value="${c.name}" autocorrect="off" spellcheck="false" />
+        <span data-tip="Regenerate culture name" class="icon-cw hiddenIcon" style="visibility: hidden"></span>
+        <select data-tip="Culture type. Defines growth model. Click to change" class="cultureType">${getTypeOptions(c.type)}</select>
+        <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">${getBaseOptions(c.base)}</select>
+        <span data-tip="Cells count" class="icon-check-empty hide"></span>
+        <div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
+        <span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
+        <input
+          data-tip="Culture expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
+          class="cultureExpan hide"
+          type="number"
+          min="0"
+          max="99"
+          step=".1"
+          value=${c.expansionism}
+        />
+        <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
+        <div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
+        <span data-tip="${populationTip}" class="icon-male hide"></span>
+        <div data-tip="${populationTip}" class="culturePopulation hide pointer" style="width: 5em">${si(population)}</div>
+        <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
+        ${getShapeOptions(selectShape, c.shield)}
+        <span data-tip="Remove culture" class="icon-trash-empty hide"></span>
+      </div>`;
+  }
+  body.innerHTML = lines;
+
+  // update footer
+  document.getElementById("culturesFooterCultures").innerHTML = pack.cultures.filter(c => c.i && !c.removed).length;
+  document.getElementById("culturesFooterCells").innerHTML = pack.cells.h.filter(h => h >= 20).length;
+  document.getElementById("culturesFooterArea").innerHTML = `${si(totalArea)} ${unit}`;
+  document.getElementById("culturesFooterPopulation").innerHTML = si(totalPopulation);
+  document.getElementById("culturesFooterArea").dataset.area = totalArea;
+  document.getElementById("culturesFooterPopulation").dataset.population = totalPopulation;
+
+  // add listeners
+  body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseenter", cultureHighlightOn));
+  body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseleave", cultureHighlightOff));
+  body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectCultureOnLineClick));
+  body.querySelectorAll("fill-box").forEach(el => el.addEventListener("click", cultureChangeColor));
+  body.querySelectorAll("div > input.cultureName").forEach(el => el.addEventListener("input", cultureChangeName));
+  body.querySelectorAll("div > span.icon-cw").forEach(el => el.addEventListener("click", cultureRegenerateName));
+  body.querySelectorAll("div > input.cultureExpan").forEach(el => el.addEventListener("input", cultureChangeExpansionism));
+  body.querySelectorAll("div > select.cultureType").forEach(el => el.addEventListener("change", cultureChangeType));
+  body.querySelectorAll("div > select.cultureBase").forEach(el => el.addEventListener("change", cultureChangeBase));
+  body.querySelectorAll("div > select.cultureEmblems").forEach(el => el.addEventListener("change", cultureChangeEmblemsShape));
+  body.querySelectorAll("div > div.culturePopulation").forEach(el => el.addEventListener("click", changePopulation));
+  body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.addEventListener("click", cultureRegenerateBurgs));
+  body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", cultureRemove));
+
+  culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
+
+  if (body.dataset.type === "percentage") {
+    body.dataset.type = "absolute";
+    togglePercentageMode();
+  }
+  applySorting(culturesHeader);
+  $("#culturesEditor").dialog({width: fitContent()});
+}
+
+function getTypeOptions(type) {
+  let options = "";
+  cultureTypes.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
+  return options;
+}
+
+function getBaseOptions(base) {
+  let options = "";
+  nameBases.forEach((n, i) => (options += `<option ${base === i ? "selected" : ""} value="${i}">${n.name}</option>`));
+  return options;
+}
+
+function getShapeOptions(selectShape, selected) {
+  if (!selectShape) return "";
+
+  const shapes = Object.keys(COA.shields.types)
+    .map(type => Object.keys(COA.shields[type]))
+    .flat();
+  const options = shapes.map(shape => `<option ${shape === selected ? "selected" : ""} value="${shape}">${capitalize(shape)}</option>`);
+  return `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureEmblems hide">${options}</select>`;
+}
+
+function cultureHighlightOn(event) {
+  const culture = +event.target.dataset.id;
+  const info = document.getElementById("cultureInfo");
+  if (info) {
+    d3.select("#hierarchy")
+      .select("g[data-id='" + culture + "'] > path")
+      .classed("selected", 1);
+    const c = pack.cultures[culture];
+    const rural = c.rural * populationRate;
+    const urban = c.urban * populationRate * urbanization;
+    const population = rural + urban > 0 ? si(rn(rural + urban)) + " people" : "Extinct";
+    info.innerHTML = `${c.name} culture. ${c.type}. ${population}`;
+    tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
+  }
+
+  if (!layerIsOn("toggleCultures")) return;
+  if (customization) return;
+
+  const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
+  cults
+    .select("#culture" + culture)
+    .raise()
+    .transition(animate)
+    .attr("stroke-width", 2.5)
+    .attr("stroke", "#d0240f");
+  debug
+    .select("#cultureCenter" + culture)
+    .raise()
+    .transition(animate)
+    .attr("r", 8)
+    .attr("stroke", "#d0240f");
+}
+
+function cultureHighlightOff(event) {
+  const culture = +event.target.dataset.id;
+  const info = document.getElementById("cultureInfo");
+  if (info) {
+    d3.select("#hierarchy")
+      .select("g[data-id='" + culture + "'] > path")
+      .classed("selected", 0);
+    info.innerHTML = "&#8205;";
+    tip("");
+  }
+
+  if (!layerIsOn("toggleCultures")) return;
+  cults
+    .select("#culture" + culture)
+    .transition()
+    .attr("stroke-width", null)
+    .attr("stroke", null);
+  debug
+    .select("#cultureCenter" + culture)
+    .transition()
+    .attr("r", 6)
+    .attr("stroke", null);
+}
+
+function cultureChangeColor() {
+  const el = this;
+  const currentFill = el.getAttribute("fill");
+  const culture = +el.parentNode.dataset.id;
+
+  const callback = newFill => {
+    el.fill = newFill;
+    pack.cultures[culture].color = newFill;
+    cults
+      .select("#culture" + culture)
+      .attr("fill", newFill)
+      .attr("stroke", newFill);
+    debug.select("#cultureCenter" + culture).attr("fill", newFill);
+  };
+
+  openPicker(currentFill, callback);
+}
+
+function cultureChangeName() {
+  const culture = +this.parentNode.dataset.id;
+  this.parentNode.dataset.name = this.value;
+  pack.cultures[culture].name = this.value;
+  pack.cultures[culture].code = abbreviate(
+    this.value,
+    pack.cultures.map(c => c.code)
+  );
+}
+
+function cultureRegenerateName() {
+  const culture = +this.parentNode.dataset.id;
+  const name = Names.getCultureShort(culture);
+  this.parentNode.querySelector("input.cultureName").value = name;
+  pack.cultures[culture].name = name;
+}
+
+function cultureChangeExpansionism() {
+  const culture = +this.parentNode.dataset.id;
+  this.parentNode.dataset.expansionism = this.value;
+  pack.cultures[culture].expansionism = +this.value;
+  recalculateCultures();
+}
+
+function cultureChangeType() {
+  const culture = +this.parentNode.dataset.id;
+  this.parentNode.dataset.type = this.value;
+  pack.cultures[culture].type = this.value;
+  recalculateCultures();
+}
+
+function cultureChangeBase() {
+  const culture = +this.parentNode.dataset.id;
+  const v = +this.value;
+  this.parentNode.dataset.base = pack.cultures[culture].base = v;
+}
+
+function cultureChangeEmblemsShape() {
+  const culture = +this.parentNode.dataset.id;
+  const shape = this.value;
+  this.parentNode.dataset.emblems = pack.cultures[culture].shield = shape;
+
+  const rerenderCOA = (id, coa) => {
+    const coaEl = document.getElementById(id);
+    if (!coaEl) return; // not rendered
+    coaEl.remove();
+    COArenderer.trigger(id, coa);
+  };
+
+  pack.states.forEach(state => {
+    if (state.culture !== culture || !state.i || state.removed || !state.coa || state.coa === "custom") return;
+    if (shape === state.coa.shield) return;
+    state.coa.shield = shape;
+    rerenderCOA("stateCOA" + state.i, state.coa);
+  });
+
+  pack.provinces.forEach(province => {
+    if (pack.cells.culture[province.center] !== culture || !province.i || province.removed || !province.coa || province.coa === "custom") return;
+    if (shape === province.coa.shield) return;
+    province.coa.shield = shape;
+    rerenderCOA("provinceCOA" + province.i, province.coa);
+  });
+
+  pack.burgs.forEach(burg => {
+    if (burg.culture !== culture || !burg.i || burg.removed || !burg.coa || burg.coa === "custom") return;
+    if (shape === burg.coa.shield) return;
+    burg.coa.shield = shape;
+    rerenderCOA("burgCOA" + burg.i, burg.coa);
+  });
+}
+
+function changePopulation() {
+  const cultureId = +this.parentNode.dataset.id;
+  const culture = pack.cultures[cultureId];
+  if (!culture.cells) return tip("Culture does not have any cells, cannot change population", false, "error");
+
+  const rural = rn(culture.rural * populationRate);
+  const urban = rn(culture.urban * populationRate * urbanization);
+  const total = rural + urban;
+  const l = n => Number(n).toLocaleString();
+  const burgs = pack.burgs.filter(b => !b.removed && b.culture === cultureId);
+
+  alertMessage.innerHTML = /* html */ `Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
+      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"} />
+      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+
+  const update = function () {
+    const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
+    if (isNaN(totalNew)) return;
+    totalPop.innerHTML = l(totalNew);
+    totalPopPerc.innerHTML = rn((totalNew / total) * 100);
+  };
+
+  ruralPop.oninput = () => update();
+  urbanPop.oninput = () => update();
+
+  $("#alert").dialog({
+    resizable: false,
+    title: "Change culture population",
+    width: "24em",
+    buttons: {
+      Apply: function () {
+        applyPopulationChange(rural, urban, ruralPop.value, urbanPop.value, cultureId);
+        $(this).dialog("close");
+      },
+      Cancel: function () {
+        $(this).dialog("close");
+      }
+    },
+    position: {my: "center", at: "center", of: "svg"}
+  });
+}
+
+function applyPopulationChange(oldRural, oldUrban, newRural, newUrban, culture) {
+  const ruralChange = newRural / oldRural;
+  if (isFinite(ruralChange) && ruralChange !== 1) {
+    const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
+    cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
+  }
+  if (!isFinite(ruralChange) && +newRural > 0) {
+    const points = newRural / populationRate;
+    const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
+    const pop = rn(points / cells.length);
+    cells.forEach(i => (pack.cells.pop[i] = pop));
+  }
+
+  const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
+  const urbanChange = newUrban / oldUrban;
+  if (isFinite(urbanChange) && urbanChange !== 1) {
+    burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
+  }
+  if (!isFinite(urbanChange) && +newUrban > 0) {
+    const points = newUrban / populationRate / urbanization;
+    const population = rn(points / burgs.length, 4);
+    burgs.forEach(b => (b.population = population));
+  }
+
+  refreshCulturesEditor();
+}
+
+function cultureRegenerateBurgs() {
+  if (customization === 4) return;
+
+  const cultureId = +this.parentNode.dataset.id;
+  const cBurgs = pack.burgs.filter(b => b.culture === cultureId && !b.lock);
+  cBurgs.forEach(b => {
+    b.name = Names.getCulture(cultureId);
+    labels.select("[data-id='" + b.i + "']").text(b.name);
+  });
+  tip(`Names for ${cBurgs.length} burgs are regenerated`, false, "success");
+}
+
+function removeCulture(cultureId) {
+  cults.select("#culture" + cultureId).remove();
+  debug.select("#cultureCenter" + cultureId).remove();
+
+  const {burgs, states, cells, cultures} = pack;
+
+  burgs.filter(b => b.culture == cultureId).forEach(b => (b.culture = 0));
+  states.forEach(s => {
+    if (s.culture === cultureId) s.culture = 0;
+  });
+  cells.culture.forEach((c, i) => {
+    if (c === cultureId) cells.culture[i] = 0;
+  });
+  cultures[cultureId].removed = true;
+
+  const origin = cultures[cultureId].origin;
+  cultures.forEach(c => {
+    if (c.origin === cultureId) c.origin = origin;
+  });
+  refreshCulturesEditor();
+}
+
+function cultureRemove() {
+  if (customization === 4) return;
+  const cultureId = +this.parentNode.dataset.id;
+
+  alertMessage.innerHTML = "Are you sure you want to remove the culture? <br>This action cannot be reverted";
+  $("#alert").dialog({
+    resizable: false,
+    title: "Remove culture",
+    buttons: {
+      Remove: function () {
+        removeCulture(cultureId);
+        $(this).dialog("close");
+      },
+      Cancel: function () {
+        $(this).dialog("close");
+      }
+    }
+  });
+}
+
+function drawCultureCenters() {
+  const tooltip = "Drag to move the culture center (ancestral home)";
+  debug.select("#cultureCenters").remove();
+  const cultureCenters = debug.append("g").attr("id", "cultureCenters").attr("stroke-width", 2).attr("stroke", "#444444").style("cursor", "move");
+
+  const data = pack.cultures.filter(c => c.i && !c.removed);
+  cultureCenters
+    .selectAll("circle")
+    .data(data)
+    .enter()
+    .append("circle")
+    .attr("id", d => "cultureCenter" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("r", 6)
+    .attr("fill", d => d.color)
+    .attr("cx", d => pack.cells.p[d.center][0])
+    .attr("cy", d => pack.cells.p[d.center][1])
+    .on("mouseenter", d => {
+      tip(tooltip, true);
+      body.querySelector(`div[data-id='${d.i}']`).classList.add("selected");
+      cultureHighlightOn(event);
+    })
+    .on("mouseleave", d => {
+      tip("", true);
+      body.querySelector(`div[data-id='${d.i}']`).classList.remove("selected");
+      cultureHighlightOff(event);
+    })
+    .call(d3.drag().on("start", cultureCenterDrag));
+}
+
+function cultureCenterDrag() {
+  const el = d3.select(this);
+  const c = +this.id.slice(13);
+  d3.event.on("drag", () => {
+    el.attr("cx", d3.event.x).attr("cy", d3.event.y);
+    const cell = findCell(d3.event.x, d3.event.y);
+    if (pack.cells.h[cell] < 20) return; // ignore dragging on water
+    pack.cultures[c].center = cell;
+    recalculateCultures();
+  });
+}
+
+function toggleLegend() {
+  if (legend.selectAll("*").size()) {
+    clearLegend();
+    return;
+  } // hide legend
+  const data = pack.cultures
+    .filter(c => c.i && !c.removed && c.cells)
+    .sort((a, b) => b.area - a.area)
+    .map(c => [c.i, c.color, c.name]);
+  drawLegend("Cultures", data);
+}
+
+function togglePercentageMode() {
+  if (body.dataset.type === "absolute") {
+    body.dataset.type = "percentage";
+    const totalCells = +culturesFooterCells.innerHTML;
+    const totalArea = +culturesFooterArea.dataset.area;
+    const totalPopulation = +culturesFooterPopulation.dataset.population;
+
+    body.querySelectorAll(":scope > div").forEach(function (el) {
+      el.querySelector(".cultureCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
+      el.querySelector(".cultureArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
+      el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
+    });
+  } else {
+    body.dataset.type = "absolute";
+    culturesEditorAddLines();
+  }
+}
+
+function showHierarchy() {
+  // build hierarchy tree
+  pack.cultures[0].origin = null;
+  const validCultures = pack.cultures.filter(c => !c.removed);
+  if (validCultures.length < 3) return tip("Not enough cultures to show hierarchy", false, "error");
+
+  const root = d3
+    .stratify()
+    .id(d => d.i)
+    .parentId(d => d.origin)(validCultures);
+  const treeWidth = root.leaves().length;
+  const treeHeight = root.height;
+  const width = treeWidth * 40;
+  const height = treeHeight * 60;
+
+  const margin = {top: 10, right: 10, bottom: -5, left: 10};
+  const w = width - margin.left - margin.right;
+  const h = height + 30 - margin.top - margin.bottom;
+  const treeLayout = d3.tree().size([w, h]);
+
+  // prepare svg
+  alertMessage.innerHTML = "<div id='cultureInfo' class='chartInfo'>&#8205;</div>";
+  const svg = d3
+    .select("#alertMessage")
+    .insert("svg", "#cultureInfo")
+    .attr("id", "hierarchy")
+    .attr("width", width)
+    .attr("height", height)
+    .style("text-anchor", "middle");
+  const graph = svg.append("g").attr("transform", `translate(10, -45)`);
+  const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
+  const nodes = graph.append("g");
+
+  renderTree();
+  function renderTree() {
+    treeLayout(root);
+    links
+      .selectAll("path")
+      .data(root.links())
+      .enter()
+      .append("path")
+      .attr("d", d => {
+        return (
+          "M" +
+          d.source.x +
+          "," +
+          d.source.y +
+          "C" +
+          d.source.x +
+          "," +
+          (d.source.y * 3 + d.target.y) / 4 +
+          " " +
+          d.target.x +
+          "," +
+          (d.source.y * 2 + d.target.y) / 3 +
+          " " +
+          d.target.x +
+          "," +
+          d.target.y
+        );
+      });
+
+    const node = nodes
+      .selectAll("g")
+      .data(root.descendants())
+      .enter()
+      .append("g")
+      .attr("data-id", d => d.data.i)
+      .attr("stroke", "#333333")
+      .attr("transform", d => `translate(${d.x}, ${d.y})`)
+      .on("mouseenter", () => cultureHighlightOn(event))
+      .on("mouseleave", () => cultureHighlightOff(event))
+      .call(d3.drag().on("start", d => dragToReorigin(d)));
+
+    node
+      .append("path")
+      .attr("d", d => {
+        if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0";
+        // small circle
+        else if (d.data.type === "Generic") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0";
+        // circle
+        else if (d.data.type === "River") return "M0,-14L14,0L0,14L-14,0Z";
+        // diamond
+        else if (d.data.type === "Lake") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z";
+        // hexagon
+        else if (d.data.type === "Naval") return "M-11,-11h22v22h-22Z"; // square
+        if (d.data.type === "Highland") return "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z"; // concave square
+        if (d.data.type === "Nomadic") return "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z"; // octagon
+        if (d.data.type === "Hunting") return "M0,-14l14,11l-6,14h-16l-6,-14Z"; // pentagon
+        return "M-11,-11h22v22h-22Z"; // square
+      })
+      .attr("fill", d => (d.data.i ? d.data.color : "#ffffff"))
+      .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
+
+    node
+      .append("text")
+      .attr("dy", ".35em")
+      .text(d => (d.data.i ? d.data.code : ""));
+  }
+
+  $("#alert").dialog({
+    title: "Cultures tree",
+    width: fitContent(),
+    resizable: false,
+    position: {my: "left center", at: "left+10 center", of: "svg"},
+    buttons: {},
+    close: () => {
+      alertMessage.innerHTML = "";
+    }
+  });
+
+  function dragToReorigin(d) {
+    if (isCtrlClick(d3.event.sourceEvent)) return changeCode(d);
+
+    const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
+
+    d3.event.on("drag", () => {
+      originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
+    });
+
+    d3.event.on("end", () => {
+      originLine.remove();
+      const selected = graph.select("path.selected");
+      if (!selected.size()) return;
+      const culture = d.data.i;
+      const oldOrigin = d.data.origin;
+      let newOrigin = selected.datum().data.i;
+      if (newOrigin == oldOrigin) return; // already a child of the selected node
+      if (newOrigin == culture) newOrigin = 0; // move to top
+      if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child
+      pack.cultures[culture].origin = d.data.origin = newOrigin; // change data
+      showHierarchy(); // update hierarchy
+    });
+  }
+
+  function changeCode(d) {
+    prompt(`Please provide an abbreviation for culture: ${d.data.name}`, {default: d.data.code}, v => {
+      pack.cultures[d.data.i].code = v;
+      nodes
+        .select("g[data-id='" + d.data.i + "']")
+        .select("text")
+        .text(v);
+    });
+  }
+}
+
+function recalculateCultures(must) {
+  if (!must && !culturesAutoChange.checked) return;
+
+  pack.cells.culture = new Uint16Array(pack.cells.i.length);
+  pack.cultures.forEach(function (c) {
+    if (!c.i || c.removed) return;
+    pack.cells.culture[c.center] = c.i;
+  });
+
+  Cultures.expand();
+  drawCultures();
+  pack.burgs.forEach(b => (b.culture = pack.cells.culture[b.cell]));
+  refreshCulturesEditor();
+  document.querySelector("input.cultureExpan").focus(); // to not trigger hotkeys
+}
+
+function enterCultureManualAssignent() {
+  if (!layerIsOn("toggleCultures")) toggleCultures();
+  customization = 4;
+  cults.append("g").attr("id", "temp");
+  document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "none"));
+  document.getElementById("culturesManuallyButtons").style.display = "inline-block";
+  debug.select("#cultureCenters").style("display", "none");
+
+  culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
+  culturesFooter.style.display = "none";
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
+  $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
+
+  tip("Click on culture to select, drag the circle to change culture", true);
+  viewbox
+    .style("cursor", "crosshair")
+    .on("click", selectCultureOnMapClick)
+    .call(d3.drag().on("start", dragCultureBrush))
+    .on("touchmove mousemove", moveCultureBrush);
+
+  body.querySelector("div").classList.add("selected");
+}
+
+function selectCultureOnLineClick(i) {
+  if (customization !== 4) return;
+  body.querySelector("div.selected").classList.remove("selected");
+  this.classList.add("selected");
+}
+
+function selectCultureOnMapClick() {
+  const point = d3.mouse(this);
+  const i = findCell(point[0], point[1]);
+  if (pack.cells.h[i] < 20) return;
+
+  const assigned = cults.select("#temp").select("polygon[data-cell='" + i + "']");
+  const culture = assigned.size() ? +assigned.attr("data-culture") : pack.cells.culture[i];
+
+  body.querySelector("div.selected").classList.remove("selected");
+  body.querySelector("div[data-id='" + culture + "']").classList.add("selected");
+}
+
+function dragCultureBrush() {
+  const radius = +culturesManuallyBrush.value;
+
+  d3.event.on("drag", () => {
+    if (!d3.event.dx && !d3.event.dy) return;
+    const p = d3.mouse(this);
+    moveCircle(p[0], p[1], radius);
+
+    const found = radius > 5 ? findAll(p[0], p[1], radius) : [findCell(p[0], p[1], radius)];
+    const selection = found.filter(isLand);
+    if (selection) changeCultureForSelection(selection);
+  });
+}
+
+function changeCultureForSelection(selection) {
+  const temp = cults.select("#temp");
+  const selected = body.querySelector("div.selected");
+
+  const cultureNew = +selected.dataset.id;
+  const color = pack.cultures[cultureNew].color || "#ffffff";
+
+  selection.forEach(function (i) {
+    const exists = temp.select("polygon[data-cell='" + i + "']");
+    const cultureOld = exists.size() ? +exists.attr("data-culture") : pack.cells.culture[i];
+    if (cultureNew === cultureOld) return;
+
+    // change of append new element
+    if (exists.size()) exists.attr("data-culture", cultureNew).attr("fill", color).attr("stroke", color);
+    else
+      temp.append("polygon").attr("data-cell", i).attr("data-culture", cultureNew).attr("points", getPackPolygon(i)).attr("fill", color).attr("stroke", color);
+  });
+}
+
+function moveCultureBrush() {
+  showMainTip();
+  const point = d3.mouse(this);
+  const radius = +culturesManuallyBrush.value;
+  moveCircle(point[0], point[1], radius);
+}
+
+function applyCultureManualAssignent() {
+  const changed = cults.select("#temp").selectAll("polygon");
+  changed.each(function () {
+    const i = +this.dataset.cell;
+    const c = +this.dataset.culture;
+    pack.cells.culture[i] = c;
+    if (pack.cells.burg[i]) pack.burgs[pack.cells.burg[i]].culture = c;
+  });
+
+  if (changed.size()) {
+    drawCultures();
+    refreshCulturesEditor();
+  }
+  exitCulturesManualAssignment();
+}
+
+function exitCulturesManualAssignment(close) {
+  customization = 0;
+  cults.select("#temp").remove();
+  removeCircle();
+  document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "inline-block"));
+  document.getElementById("culturesManuallyButtons").style.display = "none";
+
+  culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
+  culturesFooter.style.display = "block";
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
+  if (!close) $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
+
+  debug.select("#cultureCenters").style("display", null);
+  restoreDefaultEvents();
+  clearMainTip();
+  const selected = body.querySelector("div.selected");
+  if (selected) selected.classList.remove("selected");
+}
+
+function enterAddCulturesMode() {
+  if (this.classList.contains("pressed")) return exitAddCultureMode();
+
+  customization = 9;
+  this.classList.add("pressed");
+  tip("Click on the map to add a new culture", true);
+  viewbox.style("cursor", "crosshair").on("click", addCulture);
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
+}
+
+function exitAddCultureMode() {
+  customization = 0;
+  restoreDefaultEvents();
+  clearMainTip();
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
+  if (culturesAdd.classList.contains("pressed")) culturesAdd.classList.remove("pressed");
+}
+
+function addCulture() {
+  const point = d3.mouse(this);
+  const center = findCell(point[0], point[1]);
+
+  if (pack.cells.h[center] < 20) return tip("You cannot place culture center into the water. Please click on a land cell", false, "error");
+  const occupied = pack.cultures.some(c => !c.removed && c.center === center);
+  if (occupied) return tip("This cell is already a culture center. Please select a different cell", false, "error");
+
+  if (d3.event.shiftKey === false) exitAddCultureMode();
+  Cultures.add(center);
+
+  drawCultureCenters();
+  culturesEditorAddLines();
+}
+
+function downloadCulturesData() {
+  let data = `Id,Culture,Color,Cells,Expansionism,Type,Area ${getAreaUnit("2")},Population,Namesbase,Emblems Shape,Origin\n`; // headers
+
+  body.querySelectorAll(":scope > div").forEach(function (el) {
+    data += el.dataset.id + ",";
+    data += el.dataset.name + ",";
+    data += el.dataset.color + ",";
+    data += el.dataset.cells + ",";
+    data += el.dataset.expansionism + ",";
+    data += el.dataset.type + ",";
+    data += el.dataset.area + ",";
+    data += el.dataset.population + ",";
+    const base = +el.dataset.base;
+    data += nameBases[base].name + ",";
+    data += el.dataset.emblems + ",";
+    data += pack.cultures[+el.dataset.id].origin + "\n";
+  });
+
+  const name = getFileName("Cultures") + ".csv";
+  downloadFile(data, name);
+}
+
+function closeCulturesEditor() {
+  debug.select("#cultureCenters").remove();
+  exitCulturesManualAssignment("close");
+  exitAddCultureMode();
+}
+
+async function uploadCulturesData() {
+  const csv = await Formats.csvParser(this.files[0]);
+  this.value = "";
+
+  const {cultures, cells} = pack;
+  const shapes = Object.keys(COA.shields.types)
+    .map(type => Object.keys(COA.shields[type]))
+    .flat();
+
+  const populated = cells.pop.map((c, i) => (c ? i : null)).filter(c => c);
+  cultures.forEach(item => {
+    if (item.i) item.removed = true;
+  });
+
+  for (const c of csv.iterator((a, b) => +a[0] > +b[0])) {
+    let current;
+    if (+c.id < cultures.length) {
+      current = cultures[c.id];
+
+      const ratio = current.urban / (current.rural + current.urban);
+      applyPopulationChange(current.rural, current.urban, c.population * (1 - ratio), c.population * ratio, +c.id);
+    } else {
+      current = {i: cultures.length, center: ra(populated), area: 0, cells: 0, origin: 0, rural: 0, urban: 0};
+      cultures.push(current);
+    }
+
+    current.removed = false;
+    current.name = c.culture;
+    current.code = abbreviate(
+      current.name,
+      cultures.map(c => c.code)
+    );
+
+    current.color = c.color;
+    current.expansionism = +c.expansionism;
+    current.origin = +c.origin;
+
+    if (cultureTypes.includes(c.type)) current.type = c.type;
+    else current.type = "Generic";
+
+    const shieldShape = c["emblems shape"].toLowerCase();
+    if (shapes.includes(shieldShape)) current.shield = shieldShape;
+    else current.shield = "heater";
+
+    const nameBaseIndex = nameBases.findIndex(n => n.name == c.namesbase);
+    current.base = nameBaseIndex === -1 ? 0 : nameBaseIndex;
+  }
+
+  cultures.filter(c => c.removed).forEach(c => removeCulture(c.i));
+
+  drawCultures();
+  refreshCulturesEditor();
+}
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index a02076ea..28aa0f7c 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -126,6 +126,8 @@ function insertEditorHtml() {
 }
 
 function addListeners() {
+  applySortingByHeader("statesHeader");
+
   document.getElementById("statesEditorRefresh").addEventListener("click", refreshStatesEditor);
   document.getElementById("statesEditStyle").addEventListener("click", () => editStyle("regions"));
   document.getElementById("statesLegend").addEventListener("click", toggleLegend);
@@ -143,15 +145,6 @@ function addListeners() {
   document.getElementById("statesAdd").addEventListener("click", enterAddStateMode);
   document.getElementById("statesExport").addEventListener("click", downloadStatesData);
 
-  document
-    .getElementById("statesHeader")
-    .querySelectorAll(".sortable")
-    .forEach(function (element) {
-      element.addEventListener("click", function () {
-        sortLines(this);
-      });
-    });
-
   body.addEventListener("click", function (event) {
     const element = event.target;
     const classList = element.classList;
@@ -192,7 +185,7 @@ function refreshStatesEditor() {
 
 // add line for each state
 function statesEditorAddLines() {
-  const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+  const unit = getAreaUnit();
   const hidden = statesRegenerateButtons.style.display === "block" ? "" : "hidden"; // show/hide regenerate columns
   let lines = "",
     totalArea = 0,
@@ -201,7 +194,7 @@ function statesEditorAddLines() {
 
   for (const s of pack.states) {
     if (s.removed) continue;
-    const area = s.area * distanceScaleInput.value ** 2;
+    const area = getArea(s.area);
     const rural = s.rural * populationRate;
     const urban = s.urban * populationRate * urbanization;
     const population = rn(rural + urban);
@@ -238,7 +231,7 @@ function statesEditorAddLines() {
         <span data-tip="Burgs count" class="icon-dot-circled hide" style="padding-right: 1px"></span>
         <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
         <span data-tip="Neutral lands area" style="padding-right: 4px" class="icon-map-o hide"></span>
-        <div data-tip="Neutral lands area" class="stateArea hide" style="width: 6em">${si(area) + unit}</div>
+        <div data-tip="Neutral lands area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
         <div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
         <select class="cultureType ${hidden} placeholder show hide">${getTypeOptions(0)}</select>
@@ -277,7 +270,7 @@ function statesEditorAddLines() {
       <span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
       <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
       <span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
-      <div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area) + unit}</div>
+      <div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
       <span data-tip="${populationTip}" class="icon-male hide"></span>
       <div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
       <select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">${getTypeOptions(s.type)}</select>
@@ -296,7 +289,7 @@ function statesEditorAddLines() {
   statesFooterStates.innerHTML = pack.states.filter(s => s.i && !s.removed).length;
   statesFooterCells.innerHTML = pack.cells.h.filter(h => h >= 20).length;
   statesFooterBurgs.innerHTML = totalBurgs;
-  statesFooterArea.innerHTML = si(totalArea) + unit;
+  statesFooterArea.innerHTML = `${si(totalArea)} ${unit}`;
   statesFooterPopulation.innerHTML = si(totalPopulation);
   statesFooterArea.dataset.area = totalArea;
   statesFooterPopulation.dataset.population = totalPopulation;
@@ -784,8 +777,7 @@ function showStatesChart() {
     d3.select(ev.target).select("circle").classed("selected", 1);
     const state = d.data.fullName;
 
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-    const area = d.data.area * distanceScaleInput.value ** 2 + unit;
+    const area = getArea(d.data.area) + " " + getAreaUnit();
     const rural = rn(d.data.rural * populationRate);
     const urban = rn(d.data.urban * populationRate * urbanization);
 
@@ -1289,7 +1281,7 @@ function exitAddStateMode() {
 }
 
 function downloadStatesData() {
-  const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
+  const unit = getAreaUnit("2");
   let data =
     "Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area " + unit + ",Total Population,Rural Population,Urban Population\n"; // headers
   body.querySelectorAll(":scope > div").forEach(function (el) {
diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js
index 868a2505..0cfc5ee2 100644
--- a/modules/ui/biomes-editor.js
+++ b/modules/ui/biomes-editor.js
@@ -76,7 +76,7 @@ function editBiomes() {
   }
 
   function biomesEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = " " + getAreaUnit();
     const b = biomesData;
     let lines = "",
       totalArea = 0,
@@ -84,7 +84,7 @@ function editBiomes() {
 
     for (const i of b.i) {
       if (!i || biomesData.name[i] === "removed") continue; // ignore water and removed biomes
-      const area = b.area[i] * distanceScaleInput.value ** 2;
+      const area = getArea(b.area[i]);
       const rural = b.rural[i] * populationRate;
       const urban = b.urban[i] * populationRate * urbanization;
       const population = rn(rural + urban);
@@ -281,7 +281,7 @@ function editBiomes() {
     b.cells.push(0);
     b.area.push(0);
 
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = getAreaUnit();
     const line = `<div class="states biomes" data-id="${i}" data-name="${b.name[i]}" data-habitability=${b.habitability[i]} data-cells=0 data-area=0 data-population=0 data-color=${b.color[i]}>
       <fill-box fill="${b.color[i]}"></fill-box>
       <input data-tip="Biome name. Click and type to change" class="biomeName" value="${b.name[i]}" autocorrect="off" spellcheck="false">
diff --git a/modules/ui/coastline-editor.js b/modules/ui/coastline-editor.js
index faa50b8d..2f918cd9 100644
--- a/modules/ui/coastline-editor.js
+++ b/modules/ui/coastline-editor.js
@@ -57,9 +57,8 @@ function editCoastline(node = d3.event.target) {
       .call(d3.drag().on("drag", dragVertex))
       .on("mousemove", () => tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights"));
 
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     const area = pack.features[f].area;
-    coastlineArea.innerHTML = si(area * distanceScaleInput.value ** 2) + unit;
+    coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
   }
 
   function dragVertex() {
@@ -89,9 +88,8 @@ function editCoastline(node = d3.event.target) {
     defs.select("mask#land > path#land_" + f).attr("d", d); // update land mask
     defs.select("mask#water > path#water_" + f).attr("d", d); // update water mask
 
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     const area = Math.abs(d3.polygonArea(points));
-    coastlineArea.innerHTML = si(area * distanceScaleInput.value ** 2) + unit;
+    coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
   }
 
   function showGroupSection() {
diff --git a/modules/ui/cultures-editor.js b/modules/ui/cultures-editor.js
deleted file mode 100644
index 1b869c78..00000000
--- a/modules/ui/cultures-editor.js
+++ /dev/null
@@ -1,979 +0,0 @@
-"use strict";
-function editCultures() {
-  const cultureTypes = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
-  if (customization) return;
-  closeDialogs("#culturesEditor, .stable");
-  if (!layerIsOn("toggleCultures")) toggleCultures();
-  if (layerIsOn("toggleStates")) toggleStates();
-  if (layerIsOn("toggleBiomes")) toggleBiomes();
-  if (layerIsOn("toggleReligions")) toggleReligions();
-  if (layerIsOn("toggleProvinces")) toggleProvinces();
-
-  const body = document.getElementById("culturesBody");
-  drawCultureCenters();
-  refreshCulturesEditor();
-
-  if (modules.editCultures) return;
-  modules.editCultures = true;
-
-  $("#culturesEditor").dialog({
-    title: "Cultures Editor",
-    resizable: false,
-    width: fitContent(),
-    close: closeCulturesEditor,
-    position: {my: "right top", at: "right-10 top+10", of: "svg"}
-  });
-  body.focus();
-
-  // add listeners
-  document.getElementById("culturesEditorRefresh").addEventListener("click", refreshCulturesEditor);
-  document.getElementById("culturesEditStyle").addEventListener("click", () => editStyle("cults"));
-  document.getElementById("culturesLegend").addEventListener("click", toggleLegend);
-  document.getElementById("culturesPercentage").addEventListener("click", togglePercentageMode);
-  document.getElementById("culturesHeirarchy").addEventListener("click", showHierarchy);
-  document.getElementById("culturesRecalculate").addEventListener("click", () => recalculateCultures(true));
-  document.getElementById("culturesManually").addEventListener("click", enterCultureManualAssignent);
-  document.getElementById("culturesManuallyApply").addEventListener("click", applyCultureManualAssignent);
-  document.getElementById("culturesManuallyCancel").addEventListener("click", () => exitCulturesManualAssignment());
-  document.getElementById("culturesEditNamesBase").addEventListener("click", editNamesbase);
-  document.getElementById("culturesAdd").addEventListener("click", enterAddCulturesMode);
-  document.getElementById("culturesExport").addEventListener("click", downloadCulturesData);
-  document.getElementById("culturesImport").addEventListener("click", () => document.getElementById("culturesCSVToLoad").click());
-  document.getElementById("culturesCSVToLoad").addEventListener("change", uploadCulturesData);
-
-  function refreshCulturesEditor() {
-    culturesCollectStatistics();
-    culturesEditorAddLines();
-    drawCultureCenters();
-  }
-
-  function culturesCollectStatistics() {
-    const cells = pack.cells,
-      cultures = pack.cultures;
-    cultures.forEach(c => (c.cells = c.area = c.rural = c.urban = 0));
-
-    for (const i of cells.i) {
-      if (cells.h[i] < 20) continue;
-      const c = cells.culture[i];
-      cultures[c].cells += 1;
-      cultures[c].area += cells.area[i];
-      cultures[c].rural += cells.pop[i];
-      if (cells.burg[i]) cultures[c].urban += pack.burgs[cells.burg[i]].population;
-    }
-  }
-
-  // add line for each culture
-  function culturesEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-    let lines = "";
-    let totalArea = 0;
-    let totalPopulation = 0;
-
-    const emblemShapeGroup = document.getElementById("emblemShape").selectedOptions[0].parentNode.label;
-    const selectShape = emblemShapeGroup === "Diversiform";
-
-    for (const c of pack.cultures) {
-      if (c.removed) continue;
-      const area = c.area * distanceScaleInput.value ** 2;
-      const rural = c.rural * populationRate;
-      const urban = c.urban * populationRate * urbanization;
-      const population = rn(rural + urban);
-      const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to edit`;
-      totalArea += area;
-      totalPopulation += population;
-
-      if (!c.i) {
-        // Uncultured (neutral) line
-        lines += /* html */ `<div
-          class="states"
-          data-id=${c.i}
-          data-name="${c.name}"
-          data-color=""
-          data-cells=${c.cells}
-          data-area=${area}
-          data-population=${population}
-          data-base=${c.base}
-          data-type=""
-          data-expansionism=""
-          data-emblems="${c.shield}"
-        >
-          <svg width="9" height="9" class="placeholder"></svg>
-          <input data-tip="Neutral culture name. Click and type to change" class="cultureName italic" value="${c.name}" autocorrect="off" spellcheck="false" />
-          <span class="icon-cw placeholder"></span>
-          <span data-tip="Cells count" class="icon-check-empty hide"></span>
-          <div data-tip="Cells count" class="stateCells hide">${c.cells}</div>
-          <span class="icon-resize-full placeholder hide"></span>
-          <input class="statePower placeholder hide" type="number" />
-          <select class="cultureType placeholder">
-            ${getTypeOptions(c.type)}
-          </select>
-          <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
-          <div data-tip="Culture area" class="biomeArea hide">${si(area) + unit}</div>
-          <span data-tip="${populationTip}" class="icon-male hide"></span>
-          <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-          <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
-          <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">
-            ${getBaseOptions(c.base)}
-          </select>
-          ${
-            selectShape
-              ? `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureShape hide">${getShapeOptions(c.shield)}</select>`
-              : ""
-          }
-        </div>`;
-        continue;
-      }
-
-      lines += /* html */ `<div
-        class="states cultures"
-        data-id=${c.i}
-        data-name="${c.name}"
-        data-color="${c.color}"
-        data-cells=${c.cells}
-        data-area=${area}
-        data-population=${population}
-        data-base=${c.base}
-        data-type=${c.type}
-        data-expansionism=${c.expansionism}
-        data-emblems="${c.shield}"
-      >
-        <fill-box fill="${c.color}"></fill-box>
-        <input data-tip="Culture name. Click and type to change" class="cultureName" value="${c.name}" autocorrect="off" spellcheck="false" />
-        <span data-tip="Regenerate culture name" class="icon-cw hiddenIcon" style="visibility: hidden"></span>
-        <span data-tip="Cells count" class="icon-check-empty hide"></span>
-        <div data-tip="Cells count" class="stateCells hide">${c.cells}</div>
-        <span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
-        <input
-          data-tip="Culture expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
-          class="statePower hide"
-          type="number"
-          min="0"
-          max="99"
-          step=".1"
-          value=${c.expansionism}
-        />
-        <select data-tip="Culture type. Defines growth model. Click to change" class="cultureType">
-          ${getTypeOptions(c.type)}
-        </select>
-        <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
-        <div data-tip="Culture area" class="biomeArea hide">${si(area) + unit}</div>
-        <span data-tip="${populationTip}" class="icon-male hide"></span>
-        <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-        <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
-        <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">
-          ${getBaseOptions(c.base)}
-        </select>
-        ${
-          selectShape
-            ? `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureShape hide">${getShapeOptions(c.shield)}</select>`
-            : ""
-        }
-        <span data-tip="Remove culture" class="icon-trash-empty hide"></span>
-      </div>`;
-    }
-    body.innerHTML = lines;
-
-    // update footer
-    culturesFooterCultures.innerHTML = pack.cultures.filter(c => c.i && !c.removed).length;
-    culturesFooterCells.innerHTML = pack.cells.h.filter(h => h >= 20).length;
-    culturesFooterArea.innerHTML = si(totalArea) + unit;
-    culturesFooterPopulation.innerHTML = si(totalPopulation);
-    culturesFooterArea.dataset.area = totalArea;
-    culturesFooterPopulation.dataset.population = totalPopulation;
-
-    // add listeners
-    body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseenter", ev => cultureHighlightOn(ev)));
-    body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseleave", ev => cultureHighlightOff(ev)));
-    body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectCultureOnLineClick));
-    body.querySelectorAll("fill-box").forEach(el => el.addEventListener("click", cultureChangeColor));
-    body.querySelectorAll("div > input.cultureName").forEach(el => el.addEventListener("input", cultureChangeName));
-    body.querySelectorAll("div > span.icon-cw").forEach(el => el.addEventListener("click", cultureRegenerateName));
-    body.querySelectorAll("div > input.statePower").forEach(el => el.addEventListener("input", cultureChangeExpansionism));
-    body.querySelectorAll("div > select.cultureType").forEach(el => el.addEventListener("change", cultureChangeType));
-    body.querySelectorAll("div > select.cultureBase").forEach(el => el.addEventListener("change", cultureChangeBase));
-    body.querySelectorAll("div > select.cultureShape").forEach(el => el.addEventListener("change", cultureChangeShape));
-    body.querySelectorAll("div > div.culturePopulation").forEach(el => el.addEventListener("click", changePopulation));
-    body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.addEventListener("click", cultureRegenerateBurgs));
-    body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", cultureRemove));
-
-    culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
-
-    if (body.dataset.type === "percentage") {
-      body.dataset.type = "absolute";
-      togglePercentageMode();
-    }
-    applySorting(culturesHeader);
-    $("#culturesEditor").dialog({width: fitContent()});
-  }
-
-  function getTypeOptions(type) {
-    let options = "";
-    cultureTypes.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
-    return options;
-  }
-
-  function getBaseOptions(base) {
-    let options = "";
-    nameBases.forEach((n, i) => (options += `<option ${base === i ? "selected" : ""} value="${i}">${n.name}</option>`));
-    return options;
-  }
-
-  function getShapeOptions(selected) {
-    const shapes = Object.keys(COA.shields.types)
-      .map(type => Object.keys(COA.shields[type]))
-      .flat();
-    return shapes.map(shape => `<option ${shape === selected ? "selected" : ""} value="${shape}">${capitalize(shape)}</option>`);
-  }
-
-  function cultureHighlightOn(event) {
-    const culture = +event.target.dataset.id;
-    const info = document.getElementById("cultureInfo");
-    if (info) {
-      d3.select("#hierarchy")
-        .select("g[data-id='" + culture + "'] > path")
-        .classed("selected", 1);
-      const c = pack.cultures[culture];
-      const rural = c.rural * populationRate;
-      const urban = c.urban * populationRate * urbanization;
-      const population = rural + urban > 0 ? si(rn(rural + urban)) + " people" : "Extinct";
-      info.innerHTML = /* html */ `${c.name} culture. ${c.type}. ${population}`;
-      tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
-    }
-
-    if (!layerIsOn("toggleCultures")) return;
-    if (customization) return;
-    const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
-    cults
-      .select("#culture" + culture)
-      .raise()
-      .transition(animate)
-      .attr("stroke-width", 2.5)
-      .attr("stroke", "#d0240f");
-    debug
-      .select("#cultureCenter" + culture)
-      .raise()
-      .transition(animate)
-      .attr("r", 8)
-      .attr("stroke", "#d0240f");
-  }
-
-  function cultureHighlightOff(event) {
-    const culture = +event.target.dataset.id;
-    const info = document.getElementById("cultureInfo");
-    if (info) {
-      d3.select("#hierarchy")
-        .select("g[data-id='" + culture + "'] > path")
-        .classed("selected", 0);
-      info.innerHTML = "&#8205;";
-      tip("");
-    }
-
-    if (!layerIsOn("toggleCultures")) return;
-    cults
-      .select("#culture" + culture)
-      .transition()
-      .attr("stroke-width", null)
-      .attr("stroke", null);
-    debug
-      .select("#cultureCenter" + culture)
-      .transition()
-      .attr("r", 6)
-      .attr("stroke", null);
-  }
-
-  function cultureChangeColor() {
-    const el = this;
-    const currentFill = el.getAttribute("fill");
-    const culture = +el.parentNode.dataset.id;
-
-    const callback = newFill => {
-      el.fill = newFill;
-      pack.cultures[culture].color = newFill;
-      cults
-        .select("#culture" + culture)
-        .attr("fill", newFill)
-        .attr("stroke", newFill);
-      debug.select("#cultureCenter" + culture).attr("fill", newFill);
-    };
-
-    openPicker(currentFill, callback);
-  }
-
-  function cultureChangeName() {
-    const culture = +this.parentNode.dataset.id;
-    this.parentNode.dataset.name = this.value;
-    pack.cultures[culture].name = this.value;
-    pack.cultures[culture].code = abbreviate(
-      this.value,
-      pack.cultures.map(c => c.code)
-    );
-  }
-
-  function cultureRegenerateName() {
-    const culture = +this.parentNode.dataset.id;
-    const name = Names.getCultureShort(culture);
-    this.parentNode.querySelector("input.cultureName").value = name;
-    pack.cultures[culture].name = name;
-  }
-
-  function cultureChangeExpansionism() {
-    const culture = +this.parentNode.dataset.id;
-    this.parentNode.dataset.expansionism = this.value;
-    pack.cultures[culture].expansionism = +this.value;
-    recalculateCultures();
-  }
-
-  function cultureChangeType() {
-    const culture = +this.parentNode.dataset.id;
-    this.parentNode.dataset.type = this.value;
-    pack.cultures[culture].type = this.value;
-    recalculateCultures();
-  }
-
-  function cultureChangeBase() {
-    const culture = +this.parentNode.dataset.id;
-    const v = +this.value;
-    this.parentNode.dataset.base = pack.cultures[culture].base = v;
-  }
-
-  function cultureChangeShape() {
-    const culture = +this.parentNode.dataset.id;
-    const shape = this.value;
-    this.parentNode.dataset.emblems = pack.cultures[culture].shield = shape;
-
-    const rerenderCOA = (id, coa) => {
-      const coaEl = document.getElementById(id);
-      if (!coaEl) return; // not rendered
-      coaEl.remove();
-      COArenderer.trigger(id, coa);
-    };
-
-    pack.states.forEach(state => {
-      if (state.culture !== culture || !state.i || state.removed || !state.coa || state.coa === "custom") return;
-      if (shape === state.coa.shield) return;
-      state.coa.shield = shape;
-      rerenderCOA("stateCOA" + state.i, state.coa);
-    });
-
-    pack.provinces.forEach(province => {
-      if (pack.cells.culture[province.center] !== culture || !province.i || province.removed || !province.coa || province.coa === "custom") return;
-      if (shape === province.coa.shield) return;
-      province.coa.shield = shape;
-      rerenderCOA("provinceCOA" + province.i, province.coa);
-    });
-
-    pack.burgs.forEach(burg => {
-      if (burg.culture !== culture || !burg.i || burg.removed || !burg.coa || burg.coa === "custom") return;
-      if (shape === burg.coa.shield) return;
-      burg.coa.shield = shape;
-      rerenderCOA("burgCOA" + burg.i, burg.coa);
-    });
-  }
-
-  function changePopulation() {
-    const culture = +this.parentNode.dataset.id;
-    const c = pack.cultures[culture];
-    if (!c.cells) {
-      tip("Culture does not have any cells, cannot change population", false, "error");
-      return;
-    }
-    const rural = rn(c.rural * populationRate);
-    const urban = rn(c.urban * populationRate * urbanization);
-    const total = rural + urban;
-    const l = n => Number(n).toLocaleString();
-    const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
-
-    alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
-      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"} />
-      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
-
-    const update = function () {
-      const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
-      if (isNaN(totalNew)) return;
-      totalPop.innerHTML = l(totalNew);
-      totalPopPerc.innerHTML = rn((totalNew / total) * 100);
-    };
-
-    ruralPop.oninput = () => update();
-    urbanPop.oninput = () => update();
-
-    $("#alert").dialog({
-      resizable: false,
-      title: "Change culture population",
-      width: "24em",
-      buttons: {
-        Apply: function () {
-          applyPopulationChange(rural, urban, ruralPop.value, urbanPop.value, culture);
-          $(this).dialog("close");
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      },
-      position: {my: "center", at: "center", of: "svg"}
-    });
-  }
-
-  function applyPopulationChange(oldRural, oldUrban, newRural, newUrban, culture) {
-    const ruralChange = newRural / oldRural;
-    if (isFinite(ruralChange) && ruralChange !== 1) {
-      const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
-      cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
-    }
-    if (!isFinite(ruralChange) && +newRural > 0) {
-      const points = newRural / populationRate;
-      const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
-      const pop = rn(points / cells.length);
-      cells.forEach(i => (pack.cells.pop[i] = pop));
-    }
-
-    const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
-    const urbanChange = newUrban / oldUrban;
-    if (isFinite(urbanChange) && urbanChange !== 1) {
-      burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
-    }
-    if (!isFinite(urbanChange) && +newUrban > 0) {
-      const points = newUrban / populationRate / urbanization;
-      const population = rn(points / burgs.length, 4);
-      burgs.forEach(b => (b.population = population));
-    }
-
-    refreshCulturesEditor();
-  }
-
-  function cultureRegenerateBurgs() {
-    if (customization === 4) return;
-    const culture = +this.parentNode.dataset.id;
-    const cBurgs = pack.burgs.filter(b => b.culture === culture && !b.lock);
-    cBurgs.forEach(b => {
-      b.name = Names.getCulture(culture);
-      labels.select("[data-id='" + b.i + "']").text(b.name);
-    });
-    tip(`Names for ${cBurgs.length} burgs are regenerated`, false, "success");
-  }
-
-  function removeCultureModel(culture) {
-    cults.select("#culture" + culture).remove();
-    debug.select("#cultureCenter" + culture).remove();
-
-    pack.burgs.filter(b => b.culture == culture).forEach(b => (b.culture = 0));
-    pack.states.forEach((s, i) => {
-      if (s.culture === culture) s.culture = 0;
-    });
-    pack.cells.culture.forEach((c, i) => {
-      if (c === culture) pack.cells.culture[i] = 0;
-    });
-    pack.cultures[culture].removed = true;
-
-    const origin = pack.cultures[culture].origin;
-    pack.cultures.forEach(c => {
-      if (c.origin === culture) c.origin = origin;
-    });
-    refreshCulturesEditor();
-  }
-
-  function cultureRemove() {
-    if (customization === 4) return;
-    const culture = +this.parentNode.dataset.id;
-
-    alertMessage.innerHTML = "Are you sure you want to remove the culture? <br>This action cannot be reverted";
-    $("#alert").dialog({
-      resizable: false,
-      title: "Remove culture",
-      buttons: {
-        Remove: function () {
-          removeCultureModel(culture);
-          $(this).dialog("close");
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      }
-    });
-  }
-
-  function drawCultureCenters() {
-    const tooltip = "Drag to move the culture center (ancestral home)";
-    debug.select("#cultureCenters").remove();
-    const cultureCenters = debug.append("g").attr("id", "cultureCenters").attr("stroke-width", 2).attr("stroke", "#444444").style("cursor", "move");
-
-    const data = pack.cultures.filter(c => c.i && !c.removed);
-    cultureCenters
-      .selectAll("circle")
-      .data(data)
-      .enter()
-      .append("circle")
-      .attr("id", d => "cultureCenter" + d.i)
-      .attr("data-id", d => d.i)
-      .attr("r", 6)
-      .attr("fill", d => d.color)
-      .attr("cx", d => pack.cells.p[d.center][0])
-      .attr("cy", d => pack.cells.p[d.center][1])
-      .on("mouseenter", d => {
-        tip(tooltip, true);
-        body.querySelector(`div[data-id='${d.i}']`).classList.add("selected");
-        cultureHighlightOn(event);
-      })
-      .on("mouseleave", d => {
-        tip("", true);
-        body.querySelector(`div[data-id='${d.i}']`).classList.remove("selected");
-        cultureHighlightOff(event);
-      })
-      .call(d3.drag().on("start", cultureCenterDrag));
-  }
-
-  function cultureCenterDrag() {
-    const el = d3.select(this);
-    const c = +this.id.slice(13);
-    d3.event.on("drag", () => {
-      el.attr("cx", d3.event.x).attr("cy", d3.event.y);
-      const cell = findCell(d3.event.x, d3.event.y);
-      if (pack.cells.h[cell] < 20) return; // ignore dragging on water
-      pack.cultures[c].center = cell;
-      recalculateCultures();
-    });
-  }
-
-  function toggleLegend() {
-    if (legend.selectAll("*").size()) {
-      clearLegend();
-      return;
-    } // hide legend
-    const data = pack.cultures
-      .filter(c => c.i && !c.removed && c.cells)
-      .sort((a, b) => b.area - a.area)
-      .map(c => [c.i, c.color, c.name]);
-    drawLegend("Cultures", data);
-  }
-
-  function togglePercentageMode() {
-    if (body.dataset.type === "absolute") {
-      body.dataset.type = "percentage";
-      const totalCells = +culturesFooterCells.innerHTML;
-      const totalArea = +culturesFooterArea.dataset.area;
-      const totalPopulation = +culturesFooterPopulation.dataset.population;
-
-      body.querySelectorAll(":scope > div").forEach(function (el) {
-        el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
-        el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
-        el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
-      });
-    } else {
-      body.dataset.type = "absolute";
-      culturesEditorAddLines();
-    }
-  }
-
-  function showHierarchy() {
-    // build hierarchy tree
-    pack.cultures[0].origin = null;
-    const cultures = pack.cultures.filter(c => !c.removed);
-    if (cultures.length < 3) {
-      tip("Not enough cultures to show hierarchy", false, "error");
-      return;
-    }
-    const root = d3
-      .stratify()
-      .id(d => d.i)
-      .parentId(d => d.origin)(cultures);
-    const treeWidth = root.leaves().length;
-    const treeHeight = root.height;
-    const width = treeWidth * 40,
-      height = treeHeight * 60;
-
-    const margin = {top: 10, right: 10, bottom: -5, left: 10};
-    const w = width - margin.left - margin.right;
-    const h = height + 30 - margin.top - margin.bottom;
-    const treeLayout = d3.tree().size([w, h]);
-
-    // prepare svg
-    alertMessage.innerHTML = "<div id='cultureInfo' class='chartInfo'>&#8205;</div>";
-    const svg = d3
-      .select("#alertMessage")
-      .insert("svg", "#cultureInfo")
-      .attr("id", "hierarchy")
-      .attr("width", width)
-      .attr("height", height)
-      .style("text-anchor", "middle");
-    const graph = svg.append("g").attr("transform", `translate(10, -45)`);
-    const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
-    const nodes = graph.append("g");
-
-    renderTree();
-    function renderTree() {
-      treeLayout(root);
-      links
-        .selectAll("path")
-        .data(root.links())
-        .enter()
-        .append("path")
-        .attr("d", d => {
-          return (
-            "M" +
-            d.source.x +
-            "," +
-            d.source.y +
-            "C" +
-            d.source.x +
-            "," +
-            (d.source.y * 3 + d.target.y) / 4 +
-            " " +
-            d.target.x +
-            "," +
-            (d.source.y * 2 + d.target.y) / 3 +
-            " " +
-            d.target.x +
-            "," +
-            d.target.y
-          );
-        });
-
-      const node = nodes
-        .selectAll("g")
-        .data(root.descendants())
-        .enter()
-        .append("g")
-        .attr("data-id", d => d.data.i)
-        .attr("stroke", "#333333")
-        .attr("transform", d => `translate(${d.x}, ${d.y})`)
-        .on("mouseenter", () => cultureHighlightOn(event))
-        .on("mouseleave", () => cultureHighlightOff(event))
-        .call(d3.drag().on("start", d => dragToReorigin(d)));
-
-      node
-        .append("path")
-        .attr("d", d => {
-          if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0";
-          // small circle
-          else if (d.data.type === "Generic") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0";
-          // circle
-          else if (d.data.type === "River") return "M0,-14L14,0L0,14L-14,0Z";
-          // diamond
-          else if (d.data.type === "Lake") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z";
-          // hexagon
-          else if (d.data.type === "Naval") return "M-11,-11h22v22h-22Z"; // square
-          if (d.data.type === "Highland") return "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z"; // concave square
-          if (d.data.type === "Nomadic") return "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z"; // octagon
-          if (d.data.type === "Hunting") return "M0,-14l14,11l-6,14h-16l-6,-14Z"; // pentagon
-          return "M-11,-11h22v22h-22Z"; // square
-        })
-        .attr("fill", d => (d.data.i ? d.data.color : "#ffffff"))
-        .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
-
-      node
-        .append("text")
-        .attr("dy", ".35em")
-        .text(d => (d.data.i ? d.data.code : ""));
-    }
-
-    $("#alert").dialog({
-      title: "Cultures tree",
-      width: fitContent(),
-      resizable: false,
-      position: {my: "left center", at: "left+10 center", of: "svg"},
-      buttons: {},
-      close: () => {
-        alertMessage.innerHTML = "";
-      }
-    });
-
-    function dragToReorigin(d) {
-      if (isCtrlClick(d3.event.sourceEvent)) {
-        changeCode(d);
-        return;
-      }
-
-      const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
-
-      d3.event.on("drag", () => {
-        originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
-      });
-
-      d3.event.on("end", () => {
-        originLine.remove();
-        const selected = graph.select("path.selected");
-        if (!selected.size()) return;
-        const culture = d.data.i;
-        const oldOrigin = d.data.origin;
-        let newOrigin = selected.datum().data.i;
-        if (newOrigin == oldOrigin) return; // already a child of the selected node
-        if (newOrigin == culture) newOrigin = 0; // move to top
-        if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child
-        pack.cultures[culture].origin = d.data.origin = newOrigin; // change data
-        showHierarchy(); // update hierarchy
-      });
-    }
-
-    function changeCode(d) {
-      prompt(`Please provide an abbreviation for culture: ${d.data.name}`, {default: d.data.code}, v => {
-        pack.cultures[d.data.i].code = v;
-        nodes
-          .select("g[data-id='" + d.data.i + "']")
-          .select("text")
-          .text(v);
-      });
-    }
-  }
-
-  function recalculateCultures(must) {
-    if (!must && !culturesAutoChange.checked) return;
-
-    pack.cells.culture = new Uint16Array(pack.cells.i.length);
-    pack.cultures.forEach(function (c) {
-      if (!c.i || c.removed) return;
-      pack.cells.culture[c.center] = c.i;
-    });
-    Cultures.expand();
-    drawCultures();
-    pack.burgs.forEach(b => (b.culture = pack.cells.culture[b.cell]));
-    refreshCulturesEditor();
-    document.querySelector("input.statePower").focus(); // to not trigger hotkeys
-  }
-
-  function enterCultureManualAssignent() {
-    if (!layerIsOn("toggleCultures")) toggleCultures();
-    customization = 4;
-    cults.append("g").attr("id", "temp");
-    document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "none"));
-    document.getElementById("culturesManuallyButtons").style.display = "inline-block";
-    debug.select("#cultureCenters").style("display", "none");
-
-    culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
-    culturesHeader.querySelector("div[data-sortby='type']").style.left = "8.8em";
-    culturesHeader.querySelector("div[data-sortby='base']").style.left = "13.6em";
-    culturesFooter.style.display = "none";
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
-    $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
-
-    tip("Click on culture to select, drag the circle to change culture", true);
-    viewbox
-      .style("cursor", "crosshair")
-      .on("click", selectCultureOnMapClick)
-      .call(d3.drag().on("start", dragCultureBrush))
-      .on("touchmove mousemove", moveCultureBrush);
-
-    body.querySelector("div").classList.add("selected");
-  }
-
-  function selectCultureOnLineClick(i) {
-    if (customization !== 4) return;
-    body.querySelector("div.selected").classList.remove("selected");
-    this.classList.add("selected");
-  }
-
-  function selectCultureOnMapClick() {
-    const point = d3.mouse(this);
-    const i = findCell(point[0], point[1]);
-    if (pack.cells.h[i] < 20) return;
-
-    const assigned = cults.select("#temp").select("polygon[data-cell='" + i + "']");
-    const culture = assigned.size() ? +assigned.attr("data-culture") : pack.cells.culture[i];
-
-    body.querySelector("div.selected").classList.remove("selected");
-    body.querySelector("div[data-id='" + culture + "']").classList.add("selected");
-  }
-
-  function dragCultureBrush() {
-    const r = +culturesManuallyBrush.value;
-
-    d3.event.on("drag", () => {
-      if (!d3.event.dx && !d3.event.dy) return;
-      const p = d3.mouse(this);
-      moveCircle(p[0], p[1], r);
-
-      const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
-      const selection = found.filter(isLand);
-      if (selection) changeCultureForSelection(selection);
-    });
-  }
-
-  function changeCultureForSelection(selection) {
-    const temp = cults.select("#temp");
-    const selected = body.querySelector("div.selected");
-
-    const cultureNew = +selected.dataset.id;
-    const color = pack.cultures[cultureNew].color || "#ffffff";
-
-    selection.forEach(function (i) {
-      const exists = temp.select("polygon[data-cell='" + i + "']");
-      const cultureOld = exists.size() ? +exists.attr("data-culture") : pack.cells.culture[i];
-      if (cultureNew === cultureOld) return;
-
-      // change of append new element
-      if (exists.size()) exists.attr("data-culture", cultureNew).attr("fill", color).attr("stroke", color);
-      else
-        temp
-          .append("polygon")
-          .attr("data-cell", i)
-          .attr("data-culture", cultureNew)
-          .attr("points", getPackPolygon(i))
-          .attr("fill", color)
-          .attr("stroke", color);
-    });
-  }
-
-  function moveCultureBrush() {
-    showMainTip();
-    const point = d3.mouse(this);
-    const radius = +culturesManuallyBrush.value;
-    moveCircle(point[0], point[1], radius);
-  }
-
-  function applyCultureManualAssignent() {
-    const changed = cults.select("#temp").selectAll("polygon");
-    changed.each(function () {
-      const i = +this.dataset.cell;
-      const c = +this.dataset.culture;
-      pack.cells.culture[i] = c;
-      if (pack.cells.burg[i]) pack.burgs[pack.cells.burg[i]].culture = c;
-    });
-
-    if (changed.size()) {
-      drawCultures();
-      refreshCulturesEditor();
-    }
-    exitCulturesManualAssignment();
-  }
-
-  function exitCulturesManualAssignment(close) {
-    customization = 0;
-    cults.select("#temp").remove();
-    removeCircle();
-    document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("culturesManuallyButtons").style.display = "none";
-
-    culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
-    culturesHeader.querySelector("div[data-sortby='type']").style.left = "18.6em";
-    culturesHeader.querySelector("div[data-sortby='base']").style.left = "35.8em";
-    culturesFooter.style.display = "block";
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
-    if (!close) $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
-
-    debug.select("#cultureCenters").style("display", null);
-    restoreDefaultEvents();
-    clearMainTip();
-    const selected = body.querySelector("div.selected");
-    if (selected) selected.classList.remove("selected");
-  }
-
-  function enterAddCulturesMode() {
-    if (this.classList.contains("pressed")) {
-      exitAddCultureMode();
-      return;
-    }
-    customization = 9;
-    this.classList.add("pressed");
-    tip("Click on the map to add a new culture", true);
-    viewbox.style("cursor", "crosshair").on("click", addCulture);
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
-  }
-
-  function exitAddCultureMode() {
-    customization = 0;
-    restoreDefaultEvents();
-    clearMainTip();
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
-    if (culturesAdd.classList.contains("pressed")) culturesAdd.classList.remove("pressed");
-  }
-
-  function addCulture() {
-    const point = d3.mouse(this);
-    const center = findCell(point[0], point[1]);
-    if (pack.cells.h[center] < 20) {
-      tip("You cannot place culture center into the water. Please click on a land cell", false, "error");
-      return;
-    }
-    const occupied = pack.cultures.some(c => !c.removed && c.center === center);
-    if (occupied) {
-      tip("This cell is already a culture center. Please select a different cell", false, "error");
-      return;
-    }
-
-    if (d3.event.shiftKey === false) exitAddCultureMode();
-    Cultures.add(center);
-
-    drawCultureCenters();
-    culturesEditorAddLines();
-  }
-
-  function downloadCulturesData() {
-    const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
-    let data = "Id,Culture,Color,Cells,Expansionism,Type,Area " + unit + ",Population,Namesbase,Emblems Shape,Origin\n"; // headers
-
-    body.querySelectorAll(":scope > div").forEach(function (el) {
-      data += el.dataset.id + ",";
-      data += el.dataset.name + ",";
-      data += el.dataset.color + ",";
-      data += el.dataset.cells + ",";
-      data += el.dataset.expansionism + ",";
-      data += el.dataset.type + ",";
-      data += el.dataset.area + ",";
-      data += el.dataset.population + ",";
-      const base = +el.dataset.base;
-      data += nameBases[base].name + ",";
-      data += el.dataset.emblems + ",";
-      data += pack.cultures[+el.dataset.id].origin + "\n";
-    });
-
-    const name = getFileName("Cultures") + ".csv";
-    downloadFile(data, name);
-  }
-
-  function closeCulturesEditor() {
-    debug.select("#cultureCenters").remove();
-    exitCulturesManualAssignment("close");
-    exitAddCultureMode();
-  }
-
-  async function uploadCulturesData() {
-    const csv = await Formats.csvParser(this.files[0]);
-    this.value = "";
-
-    const cultures = pack.cultures;
-    const shapes = Object.keys(COA.shields.types)
-      .map(type => Object.keys(COA.shields[type]))
-      .flat();
-    const populated = pack.cells.pop.map((c, i) => (c ? i : null)).filter(c => c);
-    cultures.forEach(item => {
-      if (item.i) item.removed = true;
-    });
-    for (const c of csv.iterator((a, b) => +a[0] > +b[0])) {
-      let current;
-      if (+c.id < cultures.length) {
-        current = cultures[c.id];
-
-        const ratio = current.urban / (current.rural + current.urban);
-        applyPopulationChange(current.rural, current.urban, c.population * (1 - ratio), c.population * ratio, +c.id);
-      } else {
-        current = {i: cultures.length, center: ra(populated), area: 0, cells: 0, origin: 0, rural: 0, urban: 0};
-        cultures.push(current);
-      }
-
-      current.removed = false;
-      current.name = c.culture;
-      current.code = abbreviate(
-        current.name,
-        cultures.map(c => c.code)
-      );
-
-      current.color = c.color;
-      current.expansionism = +c.expansionism;
-      current.origin = +c.origin;
-
-      if (cultureTypes.includes(c.type)) current.type = c.type;
-      else current.type = "Generic";
-
-      const shieldShape = c["emblems shape"].toLowerCase();
-      if (shapes.includes(shieldShape)) current.shield = shieldShape;
-      else current.shield = "heater";
-
-      const nameBaseIndex = nameBases.findIndex(n => n.name == c.namesbase);
-      current.base = nameBaseIndex === -1 ? 0 : nameBaseIndex;
-    }
-
-    cultures.filter(c => c.removed).forEach(c => removeCultureModel(c.i));
-
-    drawCultures();
-    refreshCulturesEditor();
-  }
-}
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index 8200607e..f8172db5 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -85,6 +85,17 @@ document.querySelectorAll(".sortable").forEach(function (e) {
   });
 });
 
+function applySortingByHeader(headerContainer) {
+  document
+    .getElementById(headerContainer)
+    .querySelectorAll(".sortable")
+    .forEach(function (element) {
+      element.addEventListener("click", function () {
+        sortLines(this);
+      });
+    });
+}
+
 function sortLines(headerElement) {
   const type = headerElement.classList.contains("alphabetically") ? "name" : "number";
   let order = headerElement.className.includes("-down") ? "-up" : "-down";
@@ -1050,6 +1061,17 @@ function selectIcon(initial, callback) {
   });
 }
 
+function getAreaUnit(squareMark = "²") {
+  return document.getElementById("areaUnit").value === "square"
+    ? document.getElementById("distanceUnitInput").value + squareMark
+    : document.getElementById("areaUnit").value;
+}
+
+function getArea(rawArea) {
+  const distanceScale = document.getElementById("distanceScaleInput")?.value;
+  return rawArea * distanceScale ** 2;
+}
+
 function confirmationDialog(options) {
   const {
     title = "Confirm action",
@@ -1097,6 +1119,12 @@ function refreshAllEditors() {
 // dynamically loaded editors
 async function editStates() {
   if (customization) return;
-  const StateEditor = await import("../dynamic/editors/states-editor.js");
+  const StateEditor = await import("../dynamic/editors/states-editor.js?v=18052022");
   StateEditor.open();
 }
+
+async function editCultures() {
+  if (customization) return;
+  const CulturesEditor = await import("../dynamic/editors/cultures-editor.js");
+  CulturesEditor.open();
+}
diff --git a/modules/ui/general.js b/modules/ui/general.js
index f56a234d..0d0fde7b 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -202,18 +202,18 @@ function showMapTooltip(point, e, i, g) {
     const province = pack.cells.province[i];
     const prov = province ? pack.provinces[province].fullName + ", " : "";
     tip(prov + stateName);
-    if (document.getElementById('statesEditor')?.offsetParent) highlightEditorLine(statesEditor, state);
-    if (document.getElementById('diplomacyEditor')?.offsetParent) highlightEditorLine(diplomacyEditor, state);
-    if (document.getElementById('militaryOverview')?.offsetParent) highlightEditorLine(militaryOverview, state);
-    if (document.getElementById('provincesEditor')?.offsetParent) highlightEditorLine(provincesEditor, province);
+    if (document.getElementById("statesEditor")?.offsetParent) highlightEditorLine(statesEditor, state);
+    if (document.getElementById("diplomacyEditor")?.offsetParent) highlightEditorLine(diplomacyEditor, state);
+    if (document.getElementById("militaryOverview")?.offsetParent) highlightEditorLine(militaryOverview, state);
+    if (document.getElementById("provincesEditor")?.offsetParent) highlightEditorLine(provincesEditor, province);
   } else if (layerIsOn("toggleCultures") && pack.cells.culture[i]) {
     const culture = pack.cells.culture[i];
     tip("Culture: " + pack.cultures[culture].name);
-    if (culturesEditor?.offsetParent) highlightEditorLine(culturesEditor, culture);
+    if (document.getElementById("culturesEditor")?.offsetParent) highlightEditorLine(culturesEditor, culture);
   } else if (layerIsOn("toggleHeight")) tip("Height: " + getFriendlyHeight(point));
 }
 
-function highlightEditorLine(editor, id, timeout = 15000) {
+function highlightEditorLine(editor, id, timeout = 10000) {
   Array.from(editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
   const hovered = Array.from(editor.querySelectorAll("div")).find(el => el.dataset.id == id);
   if (hovered) hovered.classList.add("hovered"); // add hovered class
@@ -233,8 +233,7 @@ function updateCellInfo(point, i, g) {
   infoLon.innerHTML = toDMS(getLongitude(x, 4), "lon");
 
   infoCell.innerHTML = i;
-  const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-  infoArea.innerHTML = cells.area[i] ? si(cells.area[i] * distanceScaleInput.value ** 2) + unit : "n/a";
+  infoArea.innerHTML = cells.area[i] ? si(getArea(cells.area[i])) + " " + getAreaUnit() : "n/a";
   infoEvelation.innerHTML = getElevation(pack.features[f], pack.cells.h[i]);
   infoDepth.innerHTML = getDepth(pack.features[f], pack.cells.h[i], point);
   infoTemp.innerHTML = convertTemperature(grid.cells.temp[g]);
diff --git a/modules/ui/lakes-editor.js b/modules/ui/lakes-editor.js
index eba1bd0d..972a9cb8 100644
--- a/modules/ui/lakes-editor.js
+++ b/modules/ui/lakes-editor.js
@@ -45,9 +45,7 @@ function editLake() {
 
     const l = getLake();
     document.getElementById("lakeName").value = l.name;
-
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-    document.getElementById("lakeArea").value = si(l.area * distanceScaleInput.value ** 2) + unit;
+    document.getElementById("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
 
     const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v]));
     document.getElementById("lakeShoreLength").value = si(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
@@ -118,9 +116,8 @@ function editLake() {
     elSelected.attr("d", d);
     defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
 
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     feature.area = Math.abs(d3.polygonArea(points));
-    document.getElementById("lakeArea").value = si(feature.area * distanceScaleInput.value ** 2) + unit;
+    document.getElementById("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
   }
 
   function changeName() {
diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js
index 488aafe4..3c11eada 100644
--- a/modules/ui/measurers.js
+++ b/modules/ui/measurers.js
@@ -528,8 +528,7 @@ class Planimeter extends Measurer {
     if (this.points.length < 3) return;
 
     const polygonArea = rn(Math.abs(d3.polygonArea(this.points)));
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-    const area = si(polygonArea * distanceScaleInput.value ** 2) + " " + unit;
+    const area = si(getArea(polygonArea)) + " " + getAreaUnit();
     const c = polylabel([this.points], 1.0);
     this.el.select("text").attr("x", c[0]).attr("y", c[1]).text(area);
   }
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index 33ef6dc2..269ff25a 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -108,7 +108,7 @@ function editProvinces() {
 
   // add line for each state
   function provincesEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = " " + getAreaUnit();
     const selectedState = +document.getElementById("provincesFilterState").value;
     let filtered = pack.provinces.filter(p => p.i && !p.removed); // all valid burgs
     if (selectedState != -1) filtered = filtered.filter(p => p.state === selectedState); // filtered by state
@@ -118,8 +118,7 @@ function editProvinces() {
       totalPopulation = 0;
 
     for (const p of filtered) {
-      const area = p.area * distanceScaleInput.value ** 2;
-      totalArea += area;
+      totalArea += getArea(p.area);
       const rural = p.rural * populationRate;
       const urban = p.urban * populationRate * urbanization;
       const population = rn(rural + urban);
@@ -632,8 +631,7 @@ function editProvinces() {
       const name = d.data.fullName;
       const state = pack.states[d.data.state].fullName;
 
-      const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-      const area = d.data.area * distanceScaleInput.value ** 2 + unit;
+      const area = getArea(d.data.area) + " " + getAreaUnit();
       const rural = rn(d.data.rural * populationRate);
       const urban = rn(d.data.urban * populationRate * urbanization);
 
diff --git a/modules/ui/religions-editor.js b/modules/ui/religions-editor.js
index f0f55921..e4e9d174 100644
--- a/modules/ui/religions-editor.js
+++ b/modules/ui/religions-editor.js
@@ -59,7 +59,7 @@ function editReligions() {
 
   // add line for each religion
   function religionsEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = " " + getAreaUnit();
     let lines = "",
       totalArea = 0,
       totalPopulation = 0;
@@ -67,7 +67,7 @@ function editReligions() {
     for (const r of pack.religions) {
       if (r.removed) continue;
 
-      const area = r.area * distanceScaleInput.value ** 2;
+      const area = getArea(r.area);
       const rural = r.rural * populationRate;
       const urban = r.urban * populationRate * urbanization;
       const population = rn(rural + urban);
@@ -117,7 +117,7 @@ function editReligions() {
           data-deity=""
           data-expansionism=""
         >
-          <svg width="9" height="9" class="placeholder"></svg>
+          <svg width="11" height="11" class="placeholder"></svg>
           <input data-tip="Religion name. Click and type to change" class="religionName italic" value="${r.name}" autocorrect="off" spellcheck="false" />
           <select data-tip="Religion type" class="religionType placeholder">
             ${getTypeOptions(r.type)}
diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index bd27840c..759447dd 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -67,7 +67,7 @@ function editZones() {
 
   // add line for each zone
   function zonesEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = " " + getAreaUnit();
 
     const typeToFilterBy = document.getElementById("zonesFilterType").value;
     const zones = Array.from(document.querySelectorAll("#zones > g"));
@@ -78,7 +78,7 @@ function editZones() {
       const description = zoneEl.dataset.description;
       const type = zoneEl.dataset.type;
       const fill = zoneEl.getAttribute("fill");
-      const area = d3.sum(c.map(i => pack.cells.area[i])) * distanceScaleInput.value ** 2;
+      const area = getArea(d3.sum(c.map(i => pack.cells.area[i])));
       const rural = d3.sum(c.map(i => pack.cells.pop[i])) * populationRate;
       const urban = d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
       const population = rural + urban;
@@ -107,7 +107,8 @@ function editZones() {
     body.innerHTML = lines.join("");
 
     // update footer
-    const totalArea = (zonesFooterArea.dataset.area = graphWidth * graphHeight * distanceScaleInput.value ** 2);
+    const totalArea = getArea(graphWidth * graphHeight);
+    zonesFooterArea.dataset.area = totalArea;
     const totalPop = (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) * populationRate;
     zonesFooterPopulation.dataset.population = totalPop;
     zonesFooterNumber.innerHTML = /* html */ `${filteredZones.length} of ${zones.length}`;
diff --git a/versioning.js b/versioning.js
index 07617b2a..bc71f893 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 // version and caching control
 
-const version = "1.82.01"; // generator version, update each time
+const version = "1.82.02"; // generator version, update each time
 
 {
   document.title += " v" + version;

From 5c81170c4219765104eb9c171f1ebba20c5f8d0b Mon Sep 17 00:00:00 2001
From: GoteGuru <meszaros.gergely@gmail.com>
Date: Wed, 18 May 2022 23:34:47 +0200
Subject: [PATCH 5/9] rename resample to transform

---
 index.html           | 2 +-
 modules/ui/submap.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 6493e516..8b56c954 100644
--- a/index.html
+++ b/index.html
@@ -1732,7 +1732,7 @@
           <p>Click to create a new map:</p>
           <div>
             <button id="openSubmapMenu" data-tip="Click to generate a submap from the current viewport">Submap</button>
-            <button id="openResampleMenu" data-tip="Click to transform the map">Resample</button>
+            <button id="openResampleMenu" data-tip="Click to transform the map">Transform</button>
           </div>
         </div>
 
diff --git a/modules/ui/submap.js b/modules/ui/submap.js
index 9c27f4d5..2a7813e9 100644
--- a/modules/ui/submap.js
+++ b/modules/ui/submap.js
@@ -94,7 +94,7 @@ window.UISubmap = (function () {
     };
 
     $("#resampleDialog").dialog({
-      title: "Resample map",
+      title: "Transform map",
       width: "430px",
       resizable: false,
       position: {my: "center", at: "center", of: "svg"},

From 06fe93f6fd9aad0ca2175e2d4b73f5f8f46e70cd Mon Sep 17 00:00:00 2001
From: GoteGuru <meszaros.gergely@gmail.com>
Date: Wed, 18 May 2022 23:40:04 +0200
Subject: [PATCH 6/9] rename resample button to Transform

---
 modules/ui/submap.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ui/submap.js b/modules/ui/submap.js
index 2a7813e9..ffbfecbb 100644
--- a/modules/ui/submap.js
+++ b/modules/ui/submap.js
@@ -99,7 +99,7 @@ window.UISubmap = (function () {
       resizable: false,
       position: {my: "center", at: "center", of: "svg"},
       buttons: {
-        Resample: function () {
+        Transform: function () {
           $(this).dialog("close");
           resampleCurrentMap();
         },

From 77ae7f5bcdd600d5473d1129b4f7e5551e4a792e Mon Sep 17 00:00:00 2001
From: GoteGuru <meszaros.gergely@gmail.com>
Date: Wed, 18 May 2022 23:52:21 +0200
Subject: [PATCH 7/9] Improve readability. Remove labels from preview.

---
 modules/ui/submap.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/modules/ui/submap.js b/modules/ui/submap.js
index ffbfecbb..38024581 100644
--- a/modules/ui/submap.js
+++ b/modules/ui/submap.js
@@ -81,7 +81,11 @@ window.UISubmap = (function () {
 
     // mouse drag
     let mouseIsDown = false, mouseX = 0, mouseY = 0;
-    $previewBox.onmousedown = e => [ mouseIsDown, mouseX, mouseY ] = [ true, $shiftX.value - e.clientX / previewScale, $shiftY.value - e.clientY / previewScale];
+    $previewBox.onmousedown = e => {
+      mouseIsDown = true;
+      mouseX = $shiftX.value - e.clientX / previewScale;
+      mouseY = $shiftY.value - e.clientY / previewScale;
+    }
     $previewBox.onmouseup = _ => mouseIsDown = false;
     $previewBox.onmouseleave = _ => mouseIsDown = false;
     $previewBox.onmousemove = e => {
@@ -133,9 +137,8 @@ window.UISubmap = (function () {
   }
 
   async function loadPreview($container, w, h) {
-    const url = await getMapURL("png", { globe: false, noWater: true, fullMap: true, noLabels: false, noScaleBar: true, noIce: true });
+    const url = await getMapURL("png", { globe: false, noWater: true, fullMap: true, noLabels: true, noScaleBar: true, noIce: true });
 
-    const link = document.createElement("a");
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     canvas.width = w;

From 5dea22c4a3298498ca177420a511d4ade717a63b Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Thu, 19 May 2022 19:17:02 +0300
Subject: [PATCH 8/9] hotfix for provinces editor

---
 index.html                     | 4 ++--
 modules/ui/provinces-editor.js | 3 ++-
 versioning.js                  | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index fae4f700..7071f303 100644
--- a/index.html
+++ b/index.html
@@ -4328,7 +4328,7 @@
             <label for="submapMirrorV" class="checkbox-label">vertically</label>
           </div>
         </div>
-        <div id="submapPreview" style="border:1px solid black; margin: 1em auto; overflow:hidden"></div>
+        <div id="submapPreview" style="border: 1px solid black; margin: 1em auto; overflow: hidden"></div>
       </div>
 
       <div id="submapOptionsDialog" style="display: none" class="dialog">
@@ -6140,7 +6140,7 @@
     <script defer src="modules/ui/tools.js"></script>
     <script defer src="modules/ui/world-configurator.js"></script>
     <script defer src="modules/ui/heightmap-editor.js"></script>
-    <script defer src="modules/ui/provinces-editor.js?v=18052022"></script>
+    <script defer src="modules/ui/provinces-editor.js?v=19052022"></script>
     <script defer src="modules/ui/biomes-editor.js?v=18052022"></script>
     <script defer src="modules/ui/namesbase-editor.js"></script>
     <script defer src="modules/ui/elevation-profile.js"></script>
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index 269ff25a..3cac626f 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -118,7 +118,8 @@ function editProvinces() {
       totalPopulation = 0;
 
     for (const p of filtered) {
-      totalArea += getArea(p.area);
+      const area = getArea(p.area);
+      totalArea += area;
       const rural = p.rural * populationRate;
       const urban = p.urban * populationRate * urbanization;
       const population = rn(rural + urban);
diff --git a/versioning.js b/versioning.js
index bc71f893..8ab97f9c 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 // version and caching control
 
-const version = "1.82.02"; // generator version, update each time
+const version = "1.82.03"; // generator version, update each time
 
 {
   document.title += " v" + version;

From 6cc4c01bad9405811a65b1124ec3acd6aed5d317 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Fri, 20 May 2022 00:07:13 +0300
Subject: [PATCH 9/9] dropbox - load script from local

---
 index.html              | 2 +-
 libs/dropbox-sdk.min.js | 1 +
 modules/io/cloud.js     | 2 +-
 versioning.js           | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 libs/dropbox-sdk.min.js

diff --git a/index.html b/index.html
index 7071f303..19014b96 100644
--- a/index.html
+++ b/index.html
@@ -6178,7 +6178,7 @@
 
     <script defer src="modules/io/save.js"></script>
     <script defer src="modules/io/load.js?v=15052022-5"></script>
-    <script defer src="modules/io/cloud.js"></script>
+    <script defer src="modules/io/cloud.js?v=24052022"></script>
     <script defer src="modules/io/export.js"></script>
     <script defer src="modules/io/export-json.js"></script>
     <script defer src="modules/io/formats.js"></script>
diff --git a/libs/dropbox-sdk.min.js b/libs/dropbox-sdk.min.js
new file mode 100644
index 00000000..c5e32fc2
--- /dev/null
+++ b/libs/dropbox-sdk.min.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Dropbox={})}(this,(function(e){"use strict";function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var r=0;t.length>r;r++){var s=t[r];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}function s(e,t,s){return t&&r(e.prototype,t),s&&r(e,s),e}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function n(e,t){return(n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function a(e,t,r){return(a=u()?Reflect.construct:function(e,t,r){var s=[null];s.push.apply(s,t);var i=new(Function.bind.apply(e,s));return r&&n(i,r.prototype),i}).apply(null,arguments)}function o(e){var t="function"==typeof Map?new Map:void 0;return(o=function(e){if(null===e||-1===Function.toString.call(e).indexOf("[native code]"))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return a(e,arguments,i(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),n(r,e)})(e)}function c(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}var p="app",l="user",f="team",h="dropboxapi.com",m="dropbox.com",d={api:"api",notify:"bolt",content:"api-content"},_={};function q(e){var t="000".concat(e.charCodeAt(0).toString(16)).slice(-4);return"\\u".concat(t)}_.accountSetProfilePhoto=function(e){return this.request("account/set_profile_photo",e,"user","api","rpc")},_.authTokenFromOauth1=function(e){return this.request("auth/token/from_oauth1",e,"app","api","rpc")},_.authTokenRevoke=function(){return this.request("auth/token/revoke",null,"user","api","rpc")},_.checkApp=function(e){return this.request("check/app",e,"app","api","rpc")},_.checkUser=function(e){return this.request("check/user",e,"user","api","rpc")},_.contactsDeleteManualContacts=function(){return this.request("contacts/delete_manual_contacts",null,"user","api","rpc")},_.contactsDeleteManualContactsBatch=function(e){return this.request("contacts/delete_manual_contacts_batch",e,"user","api","rpc")},_.filePropertiesPropertiesAdd=function(e){return this.request("file_properties/properties/add",e,"user","api","rpc")},_.filePropertiesPropertiesOverwrite=function(e){return this.request("file_properties/properties/overwrite",e,"user","api","rpc")},_.filePropertiesPropertiesRemove=function(e){return this.request("file_properties/properties/remove",e,"user","api","rpc")},_.filePropertiesPropertiesSearch=function(e){return this.request("file_properties/properties/search",e,"user","api","rpc")},_.filePropertiesPropertiesSearchContinue=function(e){return this.request("file_properties/properties/search/continue",e,"user","api","rpc")},_.filePropertiesPropertiesUpdate=function(e){return this.request("file_properties/properties/update",e,"user","api","rpc")},_.filePropertiesTemplatesAddForTeam=function(e){return this.request("file_properties/templates/add_for_team",e,"team","api","rpc")},_.filePropertiesTemplatesAddForUser=function(e){return this.request("file_properties/templates/add_for_user",e,"user","api","rpc")},_.filePropertiesTemplatesGetForTeam=function(e){return this.request("file_properties/templates/get_for_team",e,"team","api","rpc")},_.filePropertiesTemplatesGetForUser=function(e){return this.request("file_properties/templates/get_for_user",e,"user","api","rpc")},_.filePropertiesTemplatesListForTeam=function(){return this.request("file_properties/templates/list_for_team",null,"team","api","rpc")},_.filePropertiesTemplatesListForUser=function(){return this.request("file_properties/templates/list_for_user",null,"user","api","rpc")},_.filePropertiesTemplatesRemoveForTeam=function(e){return this.request("file_properties/templates/remove_for_team",e,"team","api","rpc")},_.filePropertiesTemplatesRemoveForUser=function(e){return this.request("file_properties/templates/remove_for_user",e,"user","api","rpc")},_.filePropertiesTemplatesUpdateForTeam=function(e){return this.request("file_properties/templates/update_for_team",e,"team","api","rpc")},_.filePropertiesTemplatesUpdateForUser=function(e){return this.request("file_properties/templates/update_for_user",e,"user","api","rpc")},_.fileRequestsCount=function(){return this.request("file_requests/count",null,"user","api","rpc")},_.fileRequestsCreate=function(e){return this.request("file_requests/create",e,"user","api","rpc")},_.fileRequestsDelete=function(e){return this.request("file_requests/delete",e,"user","api","rpc")},_.fileRequestsDeleteAllClosed=function(){return this.request("file_requests/delete_all_closed",null,"user","api","rpc")},_.fileRequestsGet=function(e){return this.request("file_requests/get",e,"user","api","rpc")},_.fileRequestsListV2=function(e){return this.request("file_requests/list_v2",e,"user","api","rpc")},_.fileRequestsList=function(){return this.request("file_requests/list",null,"user","api","rpc")},_.fileRequestsListContinue=function(e){return this.request("file_requests/list/continue",e,"user","api","rpc")},_.fileRequestsUpdate=function(e){return this.request("file_requests/update",e,"user","api","rpc")},_.filesAlphaGetMetadata=function(e){return this.request("files/alpha/get_metadata",e,"user","api","rpc")},_.filesAlphaUpload=function(e){return this.request("files/alpha/upload",e,"user","content","upload")},_.filesCopyV2=function(e){return this.request("files/copy_v2",e,"user","api","rpc")},_.filesCopy=function(e){return this.request("files/copy",e,"user","api","rpc")},_.filesCopyBatchV2=function(e){return this.request("files/copy_batch_v2",e,"user","api","rpc")},_.filesCopyBatch=function(e){return this.request("files/copy_batch",e,"user","api","rpc")},_.filesCopyBatchCheckV2=function(e){return this.request("files/copy_batch/check_v2",e,"user","api","rpc")},_.filesCopyBatchCheck=function(e){return this.request("files/copy_batch/check",e,"user","api","rpc")},_.filesCopyReferenceGet=function(e){return this.request("files/copy_reference/get",e,"user","api","rpc")},_.filesCopyReferenceSave=function(e){return this.request("files/copy_reference/save",e,"user","api","rpc")},_.filesCreateFolderV2=function(e){return this.request("files/create_folder_v2",e,"user","api","rpc")},_.filesCreateFolder=function(e){return this.request("files/create_folder",e,"user","api","rpc")},_.filesCreateFolderBatch=function(e){return this.request("files/create_folder_batch",e,"user","api","rpc")},_.filesCreateFolderBatchCheck=function(e){return this.request("files/create_folder_batch/check",e,"user","api","rpc")},_.filesDeleteV2=function(e){return this.request("files/delete_v2",e,"user","api","rpc")},_.filesDelete=function(e){return this.request("files/delete",e,"user","api","rpc")},_.filesDeleteBatch=function(e){return this.request("files/delete_batch",e,"user","api","rpc")},_.filesDeleteBatchCheck=function(e){return this.request("files/delete_batch/check",e,"user","api","rpc")},_.filesDownload=function(e){return this.request("files/download",e,"user","content","download")},_.filesDownloadZip=function(e){return this.request("files/download_zip",e,"user","content","download")},_.filesExport=function(e){return this.request("files/export",e,"user","content","download")},_.filesGetFileLockBatch=function(e){return this.request("files/get_file_lock_batch",e,"user","api","rpc")},_.filesGetMetadata=function(e){return this.request("files/get_metadata",e,"user","api","rpc")},_.filesGetPreview=function(e){return this.request("files/get_preview",e,"user","content","download")},_.filesGetTemporaryLink=function(e){return this.request("files/get_temporary_link",e,"user","api","rpc")},_.filesGetTemporaryUploadLink=function(e){return this.request("files/get_temporary_upload_link",e,"user","api","rpc")},_.filesGetThumbnail=function(e){return this.request("files/get_thumbnail",e,"user","content","download")},_.filesGetThumbnailV2=function(e){return this.request("files/get_thumbnail_v2",e,"app, user","content","download")},_.filesGetThumbnailBatch=function(e){return this.request("files/get_thumbnail_batch",e,"user","content","rpc")},_.filesListFolder=function(e){return this.request("files/list_folder",e,"user","api","rpc")},_.filesListFolderContinue=function(e){return this.request("files/list_folder/continue",e,"user","api","rpc")},_.filesListFolderGetLatestCursor=function(e){return this.request("files/list_folder/get_latest_cursor",e,"user","api","rpc")},_.filesListFolderLongpoll=function(e){return this.request("files/list_folder/longpoll",e,"noauth","notify","rpc")},_.filesListRevisions=function(e){return this.request("files/list_revisions",e,"user","api","rpc")},_.filesLockFileBatch=function(e){return this.request("files/lock_file_batch",e,"user","api","rpc")},_.filesMoveV2=function(e){return this.request("files/move_v2",e,"user","api","rpc")},_.filesMove=function(e){return this.request("files/move",e,"user","api","rpc")},_.filesMoveBatchV2=function(e){return this.request("files/move_batch_v2",e,"user","api","rpc")},_.filesMoveBatch=function(e){return this.request("files/move_batch",e,"user","api","rpc")},_.filesMoveBatchCheckV2=function(e){return this.request("files/move_batch/check_v2",e,"user","api","rpc")},_.filesMoveBatchCheck=function(e){return this.request("files/move_batch/check",e,"user","api","rpc")},_.filesPaperCreate=function(e){return this.request("files/paper/create",e,"user","api","upload")},_.filesPaperUpdate=function(e){return this.request("files/paper/update",e,"user","api","upload")},_.filesPermanentlyDelete=function(e){return this.request("files/permanently_delete",e,"user","api","rpc")},_.filesPropertiesAdd=function(e){return this.request("files/properties/add",e,"user","api","rpc")},_.filesPropertiesOverwrite=function(e){return this.request("files/properties/overwrite",e,"user","api","rpc")},_.filesPropertiesRemove=function(e){return this.request("files/properties/remove",e,"user","api","rpc")},_.filesPropertiesTemplateGet=function(e){return this.request("files/properties/template/get",e,"user","api","rpc")},_.filesPropertiesTemplateList=function(){return this.request("files/properties/template/list",null,"user","api","rpc")},_.filesPropertiesUpdate=function(e){return this.request("files/properties/update",e,"user","api","rpc")},_.filesRestore=function(e){return this.request("files/restore",e,"user","api","rpc")},_.filesSaveUrl=function(e){return this.request("files/save_url",e,"user","api","rpc")},_.filesSaveUrlCheckJobStatus=function(e){return this.request("files/save_url/check_job_status",e,"user","api","rpc")},_.filesSearch=function(e){return this.request("files/search",e,"user","api","rpc")},_.filesSearchV2=function(e){return this.request("files/search_v2",e,"user","api","rpc")},_.filesSearchContinueV2=function(e){return this.request("files/search/continue_v2",e,"user","api","rpc")},_.filesUnlockFileBatch=function(e){return this.request("files/unlock_file_batch",e,"user","api","rpc")},_.filesUpload=function(e){return this.request("files/upload",e,"user","content","upload")},_.filesUploadSessionAppendV2=function(e){return this.request("files/upload_session/append_v2",e,"user","content","upload")},_.filesUploadSessionAppend=function(e){return this.request("files/upload_session/append",e,"user","content","upload")},_.filesUploadSessionFinish=function(e){return this.request("files/upload_session/finish",e,"user","content","upload")},_.filesUploadSessionFinishBatch=function(e){return this.request("files/upload_session/finish_batch",e,"user","api","rpc")},_.filesUploadSessionFinishBatchCheck=function(e){return this.request("files/upload_session/finish_batch/check",e,"user","api","rpc")},_.filesUploadSessionStart=function(e){return this.request("files/upload_session/start",e,"user","content","upload")},_.paperDocsArchive=function(e){return this.request("paper/docs/archive",e,"user","api","rpc")},_.paperDocsCreate=function(e){return this.request("paper/docs/create",e,"user","api","upload")},_.paperDocsDownload=function(e){return this.request("paper/docs/download",e,"user","api","download")},_.paperDocsFolderUsersList=function(e){return this.request("paper/docs/folder_users/list",e,"user","api","rpc")},_.paperDocsFolderUsersListContinue=function(e){return this.request("paper/docs/folder_users/list/continue",e,"user","api","rpc")},_.paperDocsGetFolderInfo=function(e){return this.request("paper/docs/get_folder_info",e,"user","api","rpc")},_.paperDocsList=function(e){return this.request("paper/docs/list",e,"user","api","rpc")},_.paperDocsListContinue=function(e){return this.request("paper/docs/list/continue",e,"user","api","rpc")},_.paperDocsPermanentlyDelete=function(e){return this.request("paper/docs/permanently_delete",e,"user","api","rpc")},_.paperDocsSharingPolicyGet=function(e){return this.request("paper/docs/sharing_policy/get",e,"user","api","rpc")},_.paperDocsSharingPolicySet=function(e){return this.request("paper/docs/sharing_policy/set",e,"user","api","rpc")},_.paperDocsUpdate=function(e){return this.request("paper/docs/update",e,"user","api","upload")},_.paperDocsUsersAdd=function(e){return this.request("paper/docs/users/add",e,"user","api","rpc")},_.paperDocsUsersList=function(e){return this.request("paper/docs/users/list",e,"user","api","rpc")},_.paperDocsUsersListContinue=function(e){return this.request("paper/docs/users/list/continue",e,"user","api","rpc")},_.paperDocsUsersRemove=function(e){return this.request("paper/docs/users/remove",e,"user","api","rpc")},_.paperFoldersCreate=function(e){return this.request("paper/folders/create",e,"user","api","rpc")},_.sharingAddFileMember=function(e){return this.request("sharing/add_file_member",e,"user","api","rpc")},_.sharingAddFolderMember=function(e){return this.request("sharing/add_folder_member",e,"user","api","rpc")},_.sharingCheckJobStatus=function(e){return this.request("sharing/check_job_status",e,"user","api","rpc")},_.sharingCheckRemoveMemberJobStatus=function(e){return this.request("sharing/check_remove_member_job_status",e,"user","api","rpc")},_.sharingCheckShareJobStatus=function(e){return this.request("sharing/check_share_job_status",e,"user","api","rpc")},_.sharingCreateSharedLink=function(e){return this.request("sharing/create_shared_link",e,"user","api","rpc")},_.sharingCreateSharedLinkWithSettings=function(e){return this.request("sharing/create_shared_link_with_settings",e,"user","api","rpc")},_.sharingGetFileMetadata=function(e){return this.request("sharing/get_file_metadata",e,"user","api","rpc")},_.sharingGetFileMetadataBatch=function(e){return this.request("sharing/get_file_metadata/batch",e,"user","api","rpc")},_.sharingGetFolderMetadata=function(e){return this.request("sharing/get_folder_metadata",e,"user","api","rpc")},_.sharingGetSharedLinkFile=function(e){return this.request("sharing/get_shared_link_file",e,"user","content","download")},_.sharingGetSharedLinkMetadata=function(e){return this.request("sharing/get_shared_link_metadata",e,"user","api","rpc")},_.sharingGetSharedLinks=function(e){return this.request("sharing/get_shared_links",e,"user","api","rpc")},_.sharingListFileMembers=function(e){return this.request("sharing/list_file_members",e,"user","api","rpc")},_.sharingListFileMembersBatch=function(e){return this.request("sharing/list_file_members/batch",e,"user","api","rpc")},_.sharingListFileMembersContinue=function(e){return this.request("sharing/list_file_members/continue",e,"user","api","rpc")},_.sharingListFolderMembers=function(e){return this.request("sharing/list_folder_members",e,"user","api","rpc")},_.sharingListFolderMembersContinue=function(e){return this.request("sharing/list_folder_members/continue",e,"user","api","rpc")},_.sharingListFolders=function(e){return this.request("sharing/list_folders",e,"user","api","rpc")},_.sharingListFoldersContinue=function(e){return this.request("sharing/list_folders/continue",e,"user","api","rpc")},_.sharingListMountableFolders=function(e){return this.request("sharing/list_mountable_folders",e,"user","api","rpc")},_.sharingListMountableFoldersContinue=function(e){return this.request("sharing/list_mountable_folders/continue",e,"user","api","rpc")},_.sharingListReceivedFiles=function(e){return this.request("sharing/list_received_files",e,"user","api","rpc")},_.sharingListReceivedFilesContinue=function(e){return this.request("sharing/list_received_files/continue",e,"user","api","rpc")},_.sharingListSharedLinks=function(e){return this.request("sharing/list_shared_links",e,"user","api","rpc")},_.sharingModifySharedLinkSettings=function(e){return this.request("sharing/modify_shared_link_settings",e,"user","api","rpc")},_.sharingMountFolder=function(e){return this.request("sharing/mount_folder",e,"user","api","rpc")},_.sharingRelinquishFileMembership=function(e){return this.request("sharing/relinquish_file_membership",e,"user","api","rpc")},_.sharingRelinquishFolderMembership=function(e){return this.request("sharing/relinquish_folder_membership",e,"user","api","rpc")},_.sharingRemoveFileMember=function(e){return this.request("sharing/remove_file_member",e,"user","api","rpc")},_.sharingRemoveFileMember2=function(e){return this.request("sharing/remove_file_member_2",e,"user","api","rpc")},_.sharingRemoveFolderMember=function(e){return this.request("sharing/remove_folder_member",e,"user","api","rpc")},_.sharingRevokeSharedLink=function(e){return this.request("sharing/revoke_shared_link",e,"user","api","rpc")},_.sharingSetAccessInheritance=function(e){return this.request("sharing/set_access_inheritance",e,"user","api","rpc")},_.sharingShareFolder=function(e){return this.request("sharing/share_folder",e,"user","api","rpc")},_.sharingTransferFolder=function(e){return this.request("sharing/transfer_folder",e,"user","api","rpc")},_.sharingUnmountFolder=function(e){return this.request("sharing/unmount_folder",e,"user","api","rpc")},_.sharingUnshareFile=function(e){return this.request("sharing/unshare_file",e,"user","api","rpc")},_.sharingUnshareFolder=function(e){return this.request("sharing/unshare_folder",e,"user","api","rpc")},_.sharingUpdateFileMember=function(e){return this.request("sharing/update_file_member",e,"user","api","rpc")},_.sharingUpdateFolderMember=function(e){return this.request("sharing/update_folder_member",e,"user","api","rpc")},_.sharingUpdateFolderPolicy=function(e){return this.request("sharing/update_folder_policy",e,"user","api","rpc")},_.teamDevicesListMemberDevices=function(e){return this.request("team/devices/list_member_devices",e,"team","api","rpc")},_.teamDevicesListMembersDevices=function(e){return this.request("team/devices/list_members_devices",e,"team","api","rpc")},_.teamDevicesListTeamDevices=function(e){return this.request("team/devices/list_team_devices",e,"team","api","rpc")},_.teamDevicesRevokeDeviceSession=function(e){return this.request("team/devices/revoke_device_session",e,"team","api","rpc")},_.teamDevicesRevokeDeviceSessionBatch=function(e){return this.request("team/devices/revoke_device_session_batch",e,"team","api","rpc")},_.teamFeaturesGetValues=function(e){return this.request("team/features/get_values",e,"team","api","rpc")},_.teamGetInfo=function(){return this.request("team/get_info",null,"team","api","rpc")},_.teamGroupsCreate=function(e){return this.request("team/groups/create",e,"team","api","rpc")},_.teamGroupsDelete=function(e){return this.request("team/groups/delete",e,"team","api","rpc")},_.teamGroupsGetInfo=function(e){return this.request("team/groups/get_info",e,"team","api","rpc")},_.teamGroupsJobStatusGet=function(e){return this.request("team/groups/job_status/get",e,"team","api","rpc")},_.teamGroupsList=function(e){return this.request("team/groups/list",e,"team","api","rpc")},_.teamGroupsListContinue=function(e){return this.request("team/groups/list/continue",e,"team","api","rpc")},_.teamGroupsMembersAdd=function(e){return this.request("team/groups/members/add",e,"team","api","rpc")},_.teamGroupsMembersList=function(e){return this.request("team/groups/members/list",e,"team","api","rpc")},_.teamGroupsMembersListContinue=function(e){return this.request("team/groups/members/list/continue",e,"team","api","rpc")},_.teamGroupsMembersRemove=function(e){return this.request("team/groups/members/remove",e,"team","api","rpc")},_.teamGroupsMembersSetAccessType=function(e){return this.request("team/groups/members/set_access_type",e,"team","api","rpc")},_.teamGroupsUpdate=function(e){return this.request("team/groups/update",e,"team","api","rpc")},_.teamLegalHoldsCreatePolicy=function(e){return this.request("team/legal_holds/create_policy",e,"team","api","rpc")},_.teamLegalHoldsGetPolicy=function(e){return this.request("team/legal_holds/get_policy",e,"team","api","rpc")},_.teamLegalHoldsListHeldRevisions=function(e){return this.request("team/legal_holds/list_held_revisions",e,"team","api","rpc")},_.teamLegalHoldsListHeldRevisionsContinue=function(e){return this.request("team/legal_holds/list_held_revisions_continue",e,"team","api","rpc")},_.teamLegalHoldsListPolicies=function(e){return this.request("team/legal_holds/list_policies",e,"team","api","rpc")},_.teamLegalHoldsReleasePolicy=function(e){return this.request("team/legal_holds/release_policy",e,"team","api","rpc")},_.teamLegalHoldsUpdatePolicy=function(e){return this.request("team/legal_holds/update_policy",e,"team","api","rpc")},_.teamLinkedAppsListMemberLinkedApps=function(e){return this.request("team/linked_apps/list_member_linked_apps",e,"team","api","rpc")},_.teamLinkedAppsListMembersLinkedApps=function(e){return this.request("team/linked_apps/list_members_linked_apps",e,"team","api","rpc")},_.teamLinkedAppsListTeamLinkedApps=function(e){return this.request("team/linked_apps/list_team_linked_apps",e,"team","api","rpc")},_.teamLinkedAppsRevokeLinkedApp=function(e){return this.request("team/linked_apps/revoke_linked_app",e,"team","api","rpc")},_.teamLinkedAppsRevokeLinkedAppBatch=function(e){return this.request("team/linked_apps/revoke_linked_app_batch",e,"team","api","rpc")},_.teamMemberSpaceLimitsExcludedUsersAdd=function(e){return this.request("team/member_space_limits/excluded_users/add",e,"team","api","rpc")},_.teamMemberSpaceLimitsExcludedUsersList=function(e){return this.request("team/member_space_limits/excluded_users/list",e,"team","api","rpc")},_.teamMemberSpaceLimitsExcludedUsersListContinue=function(e){return this.request("team/member_space_limits/excluded_users/list/continue",e,"team","api","rpc")},_.teamMemberSpaceLimitsExcludedUsersRemove=function(e){return this.request("team/member_space_limits/excluded_users/remove",e,"team","api","rpc")},_.teamMemberSpaceLimitsGetCustomQuota=function(e){return this.request("team/member_space_limits/get_custom_quota",e,"team","api","rpc")},_.teamMemberSpaceLimitsRemoveCustomQuota=function(e){return this.request("team/member_space_limits/remove_custom_quota",e,"team","api","rpc")},_.teamMemberSpaceLimitsSetCustomQuota=function(e){return this.request("team/member_space_limits/set_custom_quota",e,"team","api","rpc")},_.teamMembersAddV2=function(e){return this.request("team/members/add_v2",e,"team","api","rpc")},_.teamMembersAdd=function(e){return this.request("team/members/add",e,"team","api","rpc")},_.teamMembersAddJobStatusGetV2=function(e){return this.request("team/members/add/job_status/get_v2",e,"team","api","rpc")},_.teamMembersAddJobStatusGet=function(e){return this.request("team/members/add/job_status/get",e,"team","api","rpc")},_.teamMembersDeleteProfilePhotoV2=function(e){return this.request("team/members/delete_profile_photo_v2",e,"team","api","rpc")},_.teamMembersDeleteProfilePhoto=function(e){return this.request("team/members/delete_profile_photo",e,"team","api","rpc")},_.teamMembersGetAvailableTeamMemberRoles=function(){return this.request("team/members/get_available_team_member_roles",null,"team","api","rpc")},_.teamMembersGetInfoV2=function(e){return this.request("team/members/get_info_v2",e,"team","api","rpc")},_.teamMembersGetInfo=function(e){return this.request("team/members/get_info",e,"team","api","rpc")},_.teamMembersListV2=function(e){return this.request("team/members/list_v2",e,"team","api","rpc")},_.teamMembersList=function(e){return this.request("team/members/list",e,"team","api","rpc")},_.teamMembersListContinueV2=function(e){return this.request("team/members/list/continue_v2",e,"team","api","rpc")},_.teamMembersListContinue=function(e){return this.request("team/members/list/continue",e,"team","api","rpc")},_.teamMembersMoveFormerMemberFiles=function(e){return this.request("team/members/move_former_member_files",e,"team","api","rpc")},_.teamMembersMoveFormerMemberFilesJobStatusCheck=function(e){return this.request("team/members/move_former_member_files/job_status/check",e,"team","api","rpc")},_.teamMembersRecover=function(e){return this.request("team/members/recover",e,"team","api","rpc")},_.teamMembersRemove=function(e){return this.request("team/members/remove",e,"team","api","rpc")},_.teamMembersRemoveJobStatusGet=function(e){return this.request("team/members/remove/job_status/get",e,"team","api","rpc")},_.teamMembersSecondaryEmailsAdd=function(e){return this.request("team/members/secondary_emails/add",e,"team","api","rpc")},_.teamMembersSecondaryEmailsDelete=function(e){return this.request("team/members/secondary_emails/delete",e,"team","api","rpc")},_.teamMembersSecondaryEmailsResendVerificationEmails=function(e){return this.request("team/members/secondary_emails/resend_verification_emails",e,"team","api","rpc")},_.teamMembersSendWelcomeEmail=function(e){return this.request("team/members/send_welcome_email",e,"team","api","rpc")},_.teamMembersSetAdminPermissionsV2=function(e){return this.request("team/members/set_admin_permissions_v2",e,"team","api","rpc")},_.teamMembersSetAdminPermissions=function(e){return this.request("team/members/set_admin_permissions",e,"team","api","rpc")},_.teamMembersSetProfileV2=function(e){return this.request("team/members/set_profile_v2",e,"team","api","rpc")},_.teamMembersSetProfile=function(e){return this.request("team/members/set_profile",e,"team","api","rpc")},_.teamMembersSetProfilePhotoV2=function(e){return this.request("team/members/set_profile_photo_v2",e,"team","api","rpc")},_.teamMembersSetProfilePhoto=function(e){return this.request("team/members/set_profile_photo",e,"team","api","rpc")},_.teamMembersSuspend=function(e){return this.request("team/members/suspend",e,"team","api","rpc")},_.teamMembersUnsuspend=function(e){return this.request("team/members/unsuspend",e,"team","api","rpc")},_.teamNamespacesList=function(e){return this.request("team/namespaces/list",e,"team","api","rpc")},_.teamNamespacesListContinue=function(e){return this.request("team/namespaces/list/continue",e,"team","api","rpc")},_.teamPropertiesTemplateAdd=function(e){return this.request("team/properties/template/add",e,"team","api","rpc")},_.teamPropertiesTemplateGet=function(e){return this.request("team/properties/template/get",e,"team","api","rpc")},_.teamPropertiesTemplateList=function(){return this.request("team/properties/template/list",null,"team","api","rpc")},_.teamPropertiesTemplateUpdate=function(e){return this.request("team/properties/template/update",e,"team","api","rpc")},_.teamReportsGetActivity=function(e){return this.request("team/reports/get_activity",e,"team","api","rpc")},_.teamReportsGetDevices=function(e){return this.request("team/reports/get_devices",e,"team","api","rpc")},_.teamReportsGetMembership=function(e){return this.request("team/reports/get_membership",e,"team","api","rpc")},_.teamReportsGetStorage=function(e){return this.request("team/reports/get_storage",e,"team","api","rpc")},_.teamTeamFolderActivate=function(e){return this.request("team/team_folder/activate",e,"team","api","rpc")},_.teamTeamFolderArchive=function(e){return this.request("team/team_folder/archive",e,"team","api","rpc")},_.teamTeamFolderArchiveCheck=function(e){return this.request("team/team_folder/archive/check",e,"team","api","rpc")},_.teamTeamFolderCreate=function(e){return this.request("team/team_folder/create",e,"team","api","rpc")},_.teamTeamFolderGetInfo=function(e){return this.request("team/team_folder/get_info",e,"team","api","rpc")},_.teamTeamFolderList=function(e){return this.request("team/team_folder/list",e,"team","api","rpc")},_.teamTeamFolderListContinue=function(e){return this.request("team/team_folder/list/continue",e,"team","api","rpc")},_.teamTeamFolderPermanentlyDelete=function(e){return this.request("team/team_folder/permanently_delete",e,"team","api","rpc")},_.teamTeamFolderRename=function(e){return this.request("team/team_folder/rename",e,"team","api","rpc")},_.teamTeamFolderUpdateSyncSettings=function(e){return this.request("team/team_folder/update_sync_settings",e,"team","api","rpc")},_.teamTokenGetAuthenticatedAdmin=function(){return this.request("team/token/get_authenticated_admin",null,"team","api","rpc")},_.teamLogGetEvents=function(e){return this.request("team_log/get_events",e,"team","api","rpc")},_.teamLogGetEventsContinue=function(e){return this.request("team_log/get_events/continue",e,"team","api","rpc")},_.usersFeaturesGetValues=function(e){return this.request("users/features/get_values",e,"user","api","rpc")},_.usersGetAccount=function(e){return this.request("users/get_account",e,"user","api","rpc")},_.usersGetAccountBatch=function(e){return this.request("users/get_account_batch",e,"user","api","rpc")},_.usersGetCurrentAccount=function(){return this.request("users/get_current_account",null,"user","api","rpc")},_.usersGetSpaceUsage=function(){return this.request("users/get_space_usage",null,"user","api","rpc")};var g=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:h,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:".";return t!==h&&void 0!==d[e]&&(e=d[e],r="-"),"https://".concat(e).concat(r).concat(t,"/2/")},b=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:m;return e!==m&&(e="meta-".concat(e)),"https://".concat(e,"/oauth2/authorize")},v=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:h,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:".",r="api";return e!==h&&(r=d[r],t="-"),"https://".concat(r).concat(t).concat(e,"/oauth2/token")};function k(e){return JSON.stringify(e).replace(/[\u007f-\uffff]/g,q)}function y(e){return new Date(Date.now()+1e3*e)}function A(){return"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope||"undefined"==typeof module||"undefined"!=typeof window}function C(){return"undefined"!=typeof window}function S(e){return e.toString("base64").replace(/\+/g,"-").replace(/\//g,"_").replace(/=/g,"")}var T,L,w,M=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&n(e,t)}(o,e);var r,s,a=(r=o,s=u(),function(){var e,t=i(r);if(s){var n=i(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return c(this,e)});function o(e,r,s){var i;return t(this,o),(i=a.call(this,"Response failed with a ".concat(e," code"))).name="DropboxResponseError",i.status=e,i.headers=r,i.error=s,i}return o}(o(Error)),P=function e(r,s,i){t(this,e),this.status=r,this.headers=s,this.result=i};function R(e){return e.text().then((function(t){var r;try{r=JSON.parse(t)}catch(e){r=t}throw new M(e.status,e.headers,r)}))}function F(e){return e.ok?e.text().then((function(t){var r;try{r=JSON.parse(t)}catch(e){r=t}return new P(e.status,e.headers,r)})):R(e)}T=C()?window.fetch.bind(window):require("node-fetch"),L=C()?window.crypto||window.msCrypto:require("crypto"),w="undefined"==typeof TextEncoder?require("util").TextEncoder:TextEncoder;var D,G=["legacy","offline","online"],U=["code","token"],x=["none","user","team"],E=function(){function e(r){t(this,e),this.fetch=(r=r||{}).fetch||T,this.accessToken=r.accessToken,this.accessTokenExpiresAt=r.accessTokenExpiresAt,this.refreshToken=r.refreshToken,this.clientId=r.clientId,this.clientSecret=r.clientSecret,this.domain=r.domain,this.domainDelimiter=r.domainDelimiter}return s(e,[{key:"setAccessToken",value:function(e){this.accessToken=e}},{key:"getAccessToken",value:function(){return this.accessToken}},{key:"setClientId",value:function(e){this.clientId=e}},{key:"getClientId",value:function(){return this.clientId}},{key:"setClientSecret",value:function(e){this.clientSecret=e}},{key:"getClientSecret",value:function(){return this.clientSecret}},{key:"getRefreshToken",value:function(){return this.refreshToken}},{key:"setRefreshToken",value:function(e){this.refreshToken=e}},{key:"getAccessTokenExpiresAt",value:function(){return this.accessTokenExpiresAt}},{key:"setAccessTokenExpiresAt",value:function(e){this.accessTokenExpiresAt=e}},{key:"setCodeVerifier",value:function(e){this.codeVerifier=e}},{key:"getCodeVerifier",value:function(){return this.codeVerifier}},{key:"generateCodeChallenge",value:function(){var e,t=this,r=(new w).encode(this.codeVerifier);if(C())return L.subtle.digest("SHA-256",r).then((function(r){var s=btoa(String.fromCharCode.apply(null,new Uint8Array(r)));e=S(s).substr(0,128),t.codeChallenge=e}));var s=L.createHash("sha256").update(r).digest();return e=S(s),this.codeChallenge=e,Promise.resolve()}},{key:"generatePKCECodes",value:function(){var e;if(C()){var t=new Uint8Array(128),r=L.getRandomValues(t);e=S(btoa(r)).substr(0,128)}else{e=S(L.randomBytes(128)).substr(0,128)}return this.codeVerifier=e,this.generateCodeChallenge()}},{key:"getAuthenticationUrl",value:function(e,t){var r,s=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"token",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,u=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null,a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"none",o=arguments.length>6&&void 0!==arguments[6]&&arguments[6],c=this.getClientId(),p=b(this.domain);if(!c)throw Error("A client id is required. You can set the client id using .setClientId().");if("code"!==i&&!e)throw Error("A redirect uri is required.");if(!U.includes(i))throw Error("Authorization type must be code or token");if(n&&!G.includes(n))throw Error("Token Access Type must be legacy, offline, or online");if(u&&!(u instanceof Array))throw Error("Scope must be an array of strings");if(!x.includes(a))throw Error("includeGrantedScopes must be none, user, or team");return r="code"===i?"".concat(p,"?response_type=code&client_id=").concat(c):"".concat(p,"?response_type=token&client_id=").concat(c),e&&(r+="&redirect_uri=".concat(e)),t&&(r+="&state=".concat(t)),n&&(r+="&token_access_type=".concat(n)),u&&(r+="&scope=".concat(u.join(" "))),"none"!==a&&(r+="&include_granted_scopes=".concat(a)),o?this.generatePKCECodes().then((function(){return r+="&code_challenge_method=S256",r+="&code_challenge=".concat(s.codeChallenge)})):Promise.resolve(r)}},{key:"getAccessTokenFromCode",value:function(e,t){var r=this.getClientId(),s=this.getClientSecret();if(!r)throw Error("A client id is required. You can set the client id using .setClientId().");var i=v(this.domain,this.domainDelimiter);if(i+="?grant_type=authorization_code",i+="&code=".concat(t),i+="&client_id=".concat(r),s)i+="&client_secret=".concat(s);else{if(!this.codeVerifier)throw Error("You must use PKCE when generating the authorization URL to not include a client secret");i+="&code_verifier=".concat(this.codeVerifier)}e&&(i+="&redirect_uri=".concat(e));return this.fetch(i,{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"}}).then((function(e){return F(e)}))}},{key:"checkAndRefreshAccessToken",value:function(){var e=this.getRefreshToken()&&this.getClientId(),t=!this.getAccessTokenExpiresAt()||new Date(Date.now()+3e5)>=this.getAccessTokenExpiresAt(),r=!this.getAccessToken();return(t||r)&&e?this.refreshAccessToken():Promise.resolve()}},{key:"refreshAccessToken",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,r=v(this.domain,this.domainDelimiter),s=this.getClientId(),i=this.getClientSecret();if(!s)throw Error("A client id is required. You can set the client id using .setClientId().");if(t&&!(t instanceof Array))throw Error("Scope must be an array of strings");var n={"Content-Type":"application/json"};r+="?grant_type=refresh_token&refresh_token=".concat(this.getRefreshToken()),r+="&client_id=".concat(s),i&&(r+="&client_secret=".concat(i)),t&&(r+="&scope=".concat(t.join(" ")));var u={method:"POST"};return u.headers=n,this.fetch(r,u).then((function(e){return F(e)})).then((function(t){e.setAccessToken(t.result.access_token),e.setAccessTokenExpiresAt(y(t.result.expires_in))}))}}]),e}();D="undefined"!=typeof window?window.fetch.bind(window):require("node-fetch");var V="undefined"==typeof btoa?function(e){return Buffer.from(e).toString("base64")}:btoa;e.Dropbox=function(){function e(r){t(this,e),this.auth=(r=r||{}).auth?r.auth:new E(r),this.fetch=r.fetch||D,this.selectUser=r.selectUser,this.selectAdmin=r.selectAdmin,this.pathRoot=r.pathRoot,this.domain=r.domain,this.domainDelimiter=r.domainDelimiter,Object.assign(this,_)}return s(e,[{key:"request",value:function(e,t,r,s,i){if(r.split(",").length>1){var n=r.replace(" ","").split(",");n.includes(l)&&this.auth.getAccessToken()?r=l:n.includes(f)&&this.auth.getAccessToken()?r=f:n.includes(p)&&(r=p)}switch(i){case"rpc":return this.rpcRequest(e,t,r,s);case"download":return this.downloadRequest(e,t,r,s);case"upload":return this.uploadRequest(e,t,r,s);default:throw Error("Invalid request style: ".concat(i))}}},{key:"rpcRequest",value:function(e,t,r,s){var i=this;return this.auth.checkAndRefreshAccessToken().then((function(){var e,s={method:"POST",body:t?JSON.stringify(t):null,headers:{}};switch(t&&(s.headers["Content-Type"]="application/json"),r){case p:if(!i.auth.clientId||!i.auth.clientSecret)throw Error("A client id and secret is required for this function");e=V("".concat(i.auth.clientId,":").concat(i.auth.clientSecret)),s.headers.Authorization="Basic ".concat(e);break;case f:case l:s.headers.Authorization="Bearer ".concat(i.auth.getAccessToken());break;case"noauth":break;default:throw Error("Unhandled auth type: ".concat(r))}return i.setCommonHeaders(s),s})).then((function(t){return i.fetch(g(s,i.domain,i.domainDelimiter)+e,t)})).then((function(e){return F(e)}))}},{key:"downloadRequest",value:function(e,t,r,s){var i=this;return this.auth.checkAndRefreshAccessToken().then((function(){if(r!==l)throw Error("Unexpected auth type: ".concat(r));var e={method:"POST",headers:{Authorization:"Bearer ".concat(i.auth.getAccessToken()),"Dropbox-API-Arg":k(t)}};return i.setCommonHeaders(e),e})).then((function(t){return i.fetch(g(s,i.domain,i.domainDelimiter)+e,t)})).then((function(e){return function(e){return e.ok?new Promise((function(t){A()?e.blob().then((function(e){return t(e)})):e.buffer().then((function(e){return t(e)}))})).then((function(t){var r=JSON.parse(e.headers.get("dropbox-api-result"));return A()?r.fileBlob=t:r.fileBinary=t,new P(e.status,e.headers,r)})):R(e)}(e)}))}},{key:"uploadRequest",value:function(e,t,r,s){var i=this;return this.auth.checkAndRefreshAccessToken().then((function(){if(r!==l)throw Error("Unexpected auth type: ".concat(r));var e=t.contents;delete t.contents;var s={body:e,method:"POST",headers:{Authorization:"Bearer ".concat(i.auth.getAccessToken()),"Content-Type":"application/octet-stream","Dropbox-API-Arg":k(t)}};return i.setCommonHeaders(s),s})).then((function(t){return i.fetch(g(s,i.domain,i.domainDelimiter)+e,t)})).then((function(e){return F(e)}))}},{key:"setCommonHeaders",value:function(e){this.selectUser&&(e.headers["Dropbox-API-Select-User"]=this.selectUser),this.selectAdmin&&(e.headers["Dropbox-API-Select-Admin"]=this.selectAdmin),this.pathRoot&&(e.headers["Dropbox-API-Path-Root"]=this.pathRoot)}}]),e}(),e.DropboxAuth=E,e.DropboxResponse=P,e.DropboxResponseError=M,Object.defineProperty(e,"__esModule",{value:!0})}));
diff --git a/modules/io/cloud.js b/modules/io/cloud.js
index 54f42bce..ef59d821 100644
--- a/modules/io/cloud.js
+++ b/modules/io/cloud.js
@@ -52,7 +52,7 @@ window.Cloud = (function () {
     },
 
     async connect(token) {
-      await import("https://unpkg.com/dropbox@10.8.0/dist/Dropbox-sdk.min.js");
+      await import("../../libs/dropbox-sdk.min.js");
       const auth = new Dropbox.DropboxAuth({clientId: this.clientId});
       auth.setAccessToken(token);
       this.api = new Dropbox.Dropbox({auth});
diff --git a/versioning.js b/versioning.js
index 8ab97f9c..767559d4 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 // version and caching control
 
-const version = "1.82.03"; // generator version, update each time
+const version = "1.82.04"; // generator version, update each time
 
 {
   document.title += " v" + version;