From ed9a0ba73922bf8678a2e22d92808738a35cf4a1 Mon Sep 17 00:00:00 2001
From: Dobidop <67412288+Dobidop@users.noreply.github.com>
Date: Sun, 22 Mar 2026 12:04:48 +0100
Subject: [PATCH 1/8] implement basic tectonics + tectonic direction and
 velocity

---
 .claude/settings.local.json                   |   19 +
 public/config/tectonic-templates.js           |   70 +
 public/modules/dynamic/heightmap-selection.js |   24 +-
 public/modules/ui/options.js                  |    8 +-
 public/modules/ui/tectonic-editor.js          |  443 ++++++
 public/modules/ui/tools.js                    |    1 +
 src/index.html                                |   21 +
 src/modules/heightmap-generator.ts            |   27 +-
 src/modules/tectonic-generator.ts             | 1364 +++++++++++++++++
 src/types/TectonicMetadata.ts                 |   60 +
 src/types/global.ts                           |    1 +
 11 files changed, 2029 insertions(+), 9 deletions(-)
 create mode 100644 .claude/settings.local.json
 create mode 100644 public/config/tectonic-templates.js
 create mode 100644 public/modules/ui/tectonic-editor.js
 create mode 100644 src/modules/tectonic-generator.ts
 create mode 100644 src/types/TectonicMetadata.ts

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 00000000..6a1992c3
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,19 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:github.com)",
+      "Bash(xargs grep:*)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "WebFetch(domain:api.github.com)",
+      "WebFetch(domain:jandjheydorn.com)",
+      "Bash(npx tsc:*)",
+      "Bash(npx vite:*)",
+      "Bash(node_modules/.bin/tsc --noEmit --pretty)",
+      "Bash(npm exec:*)",
+      "Bash(npm install:*)",
+      "mcp__puppeteer__puppeteer_navigate",
+      "mcp__puppeteer__puppeteer_screenshot",
+      "mcp__puppeteer__puppeteer_evaluate"
+    ]
+  }
+}
diff --git a/public/config/tectonic-templates.js b/public/config/tectonic-templates.js
new file mode 100644
index 00000000..549a1b57
--- /dev/null
+++ b/public/config/tectonic-templates.js
@@ -0,0 +1,70 @@
+"use strict";
+
+const tectonicTemplates = (function () {
+  return {
+    tectonic: {
+      id: 14,
+      name: "Tectonic",
+      template: "tectonic",
+      probability: 10,
+      config: {
+        plateCount: 20,
+        continentalRatio: 0.2,
+        collisionIntensity: 1.5,
+        noiseLevel: 0.3,
+        hotspotCount: 3,
+        smoothingPasses: 3,
+        erosionPasses: 5,
+        seaLevel: 5
+      }
+    },
+    tectonicPangea: {
+      id: 15,
+      name: "Tectonic Pangea",
+      template: "tectonic",
+      probability: 5,
+      config: {
+        plateCount: 8,
+        continentalRatio: 0.55,
+        collisionIntensity: 1.2,
+        noiseLevel: 0.25,
+        hotspotCount: 3,
+        smoothingPasses: 4,
+        erosionPasses: 2,
+        seaLevel: -3
+      }
+    },
+    tectonicArchipelago: {
+      id: 16,
+      name: "Tectonic Archipelago",
+      template: "tectonic",
+      probability: 5,
+      config: {
+        plateCount: 15,
+        continentalRatio: 0.25,
+        collisionIntensity: 0.8,
+        noiseLevel: 0.35,
+        hotspotCount: 5,
+        smoothingPasses: 3,
+        erosionPasses: 2,
+        seaLevel: 3
+      }
+    },
+    tectonicRift: {
+      id: 17,
+      name: "Tectonic Rift",
+      template: "tectonic",
+      probability: 3,
+      config: {
+        plateCount: 10,
+        continentalRatio: 0.4,
+        collisionIntensity: 1.5,
+        noiseLevel: 0.3,
+        hotspotCount: 2,
+        smoothingPasses: 3,
+        erosionPasses: 3,
+        seaLevel: 0
+      }
+    }
+  };
+})();
diff --git a/public/modules/dynamic/heightmap-selection.js b/public/modules/dynamic/heightmap-selection.js
index 3c1fe962..02955910 100644
--- a/public/modules/dynamic/heightmap-selection.js
+++ b/public/modules/dynamic/heightmap-selection.js
@@ -194,11 +194,19 @@ function insertHtml() {
 
   const sections = document.getElementsByClassName("heightmap-selection_container");
 
-  sections[0].innerHTML = Object.keys(heightmapTemplates)
+  const allTemplateKeys = Object.keys(heightmapTemplates);
+  if (typeof tectonicTemplates !== "undefined") {
+    allTemplateKeys.push(...Object.keys(tectonicTemplates));
+  }
+
+  sections[0].innerHTML = allTemplateKeys
     .map(key => {
-      const name = heightmapTemplates[key].name;
+      const isTectonic = typeof tectonicTemplates !== "undefined" && key in tectonicTemplates;
+      const name = isTectonic ? tectonicTemplates[key].name : heightmapTemplates[key].name;
       Math.random = aleaPRNG(initialSeed);
-      const heights = HeightmapGenerator.fromTemplate(graph, key);
+      const heights = isTectonic
+        ? HeightmapGenerator.fromTectonic(graph, tectonicTemplates[key].config)
+        : HeightmapGenerator.fromTemplate(graph, key);
 
       return /* html */ `<article data-id="${key}" data-seed="${initialSeed}">
         <img src="${getHeightmapPreview(heights)}" alt="${name}" />
@@ -255,6 +263,8 @@ function getSeed() {
 }
 
 function getName(id) {
+  const isTectonic = typeof tectonicTemplates !== "undefined" && id in tectonicTemplates;
+  if (isTectonic) return tectonicTemplates[id].name;
   const isTemplate = id in heightmapTemplates;
   return isTemplate ? heightmapTemplates[id].name : precreatedHeightmaps[id].name;
 }
@@ -266,7 +276,10 @@ function getGraph(currentGraph) {
 }
 
 function drawTemplatePreview(id) {
-  const heights = HeightmapGenerator.fromTemplate(graph, id);
+  const isTectonic = typeof tectonicTemplates !== "undefined" && id in tectonicTemplates;
+  const heights = isTectonic
+    ? HeightmapGenerator.fromTectonic(graph, tectonicTemplates[id].config)
+    : HeightmapGenerator.fromTemplate(graph, id);
   const dataUrl = getHeightmapPreview(heights);
   const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
   article.querySelector("img").src = dataUrl;
@@ -294,8 +307,9 @@ function redrawAll() {
     const {id, seed} = article.dataset;
     Math.random = aleaPRNG(seed);
 
+    const isTectonic = typeof tectonicTemplates !== "undefined" && id in tectonicTemplates;
     const isTemplate = id in heightmapTemplates;
-    if (isTemplate) drawTemplatePreview(id);
+    if (isTectonic || isTemplate) drawTemplatePreview(id);
     else drawPrecreatedHeightmap(id);
   }
 }
diff --git a/public/modules/ui/options.js b/public/modules/ui/options.js
index 07d77cb0..17757c90 100644
--- a/public/modules/ui/options.js
+++ b/public/modules/ui/options.js
@@ -624,8 +624,14 @@ function randomizeHeightmapTemplate() {
   for (const key in heightmapTemplates) {
     templates[key] = heightmapTemplates[key].probability || 0;
   }
+  if (typeof tectonicTemplates !== "undefined") {
+    for (const key in tectonicTemplates) {
+      templates[key] = tectonicTemplates[key].probability || 0;
+    }
+  }
   const template = rw(templates);
-  const name = heightmapTemplates[template].name;
+  const isTectonic = typeof tectonicTemplates !== "undefined" && template in tectonicTemplates;
+  const name = isTectonic ? tectonicTemplates[template].name : heightmapTemplates[template].name;
   applyOption(byId("templateInput"), template, name);
 }
 
diff --git a/public/modules/ui/tectonic-editor.js b/public/modules/ui/tectonic-editor.js
new file mode 100644
index 00000000..fe60402e
--- /dev/null
+++ b/public/modules/ui/tectonic-editor.js
@@ -0,0 +1,443 @@
+"use strict";
+
+// Tectonic Plate Editor
+// Visualizes tectonic plates and allows editing plate properties (type, velocity)
+// then regenerates terrain from the modified plate configuration
+
+let tectonicViewMode = "plates"; // "plates" or "heights"
+
+function editTectonics() {
+  if (customization) return tip("Please exit the customization mode first", false, "error");
+
+  if (!window.tectonicGenerator || !window.tectonicMetadata) {
+    return tip("Tectonic data not available. Generate a map using a Tectonic template first.", false, "error");
+  }
+
+  closeDialogs(".stable");
+  tectonicViewMode = "plates";
+
+  const plates = window.tectonicGenerator.getPlates();
+  const plateIds = window.tectonicMetadata.plateIds;
+  const plateColors = generatePlateColors(plates.length);
+
+  drawPlateOverlay(plateIds, plateColors, plates);
+  buildPlateList(plates, plateColors);
+
+  $("#tectonicEditor").dialog({
+    title: "Tectonic Plate Editor",
+    resizable: false,
+    width: "22em",
+    position: {my: "right top", at: "right-10 top+10", of: "svg"},
+    close: closeTectonicEditor
+  });
+
+  if (modules.editTectonics) return;
+  modules.editTectonics = true;
+
+  byId("tectonicRegenerate").addEventListener("click", regenerateFromEditor);
+  byId("tectonicToggleOverlay").addEventListener("click", togglePlateOverlay);
+  byId("tectonicApplyMap").addEventListener("click", applyToMap);
+  byId("tectonicClose").addEventListener("click", () => $("#tectonicEditor").dialog("close"));
+}
+
+function generatePlateColors(count) {
+  const colors = [];
+  for (let i = 0; i < count; i++) {
+    const hue = (i * 360 / count + 15) % 360;
+    const sat = 60 + (i % 3) * 15;
+    const lit = 45 + (i % 2) * 15;
+    colors.push(`hsl(${hue}, ${sat}%, ${lit}%)`);
+  }
+  return colors;
+}
+
+// Height-to-color function matching FMG's heightmap editor
+function tectonicHeightColor(h) {
+  if (h < 20) {
+    // Ocean: deep blue to light blue
+    const t = h / 20;
+    const r = Math.round(30 + t * 40);
+    const g = Math.round(60 + t * 80);
+    const b = Math.round(120 + t * 100);
+    return `rgb(${r},${g},${b})`;
+  } else {
+    // Land: green to brown to white
+    const t = (h - 20) / 80;
+    if (t < 0.3) {
+      const s = t / 0.3;
+      return `rgb(${Math.round(80 + s * 60)},${Math.round(160 + s * 40)},${Math.round(60 + s * 20)})`;
+    } else if (t < 0.7) {
+      const s = (t - 0.3) / 0.4;
+      return `rgb(${Math.round(140 + s * 60)},${Math.round(200 - s * 80)},${Math.round(80 - s * 40)})`;
+    } else {
+      const s = (t - 0.7) / 0.3;
+      return `rgb(${Math.round(200 + s * 55)},${Math.round(120 + s * 135)},${Math.round(40 + s * 215)})`;
+    }
+  }
+}
+
+function drawPlateOverlay(plateIds, plateColors, plates) {
+  viewbox.select("#tectonicOverlay").remove();
+  const overlay = viewbox.insert("g", "#terrs").attr("id", "tectonicOverlay");
+  const numCells = plateIds.length;
+
+  for (let i = 0; i < numCells; i++) {
+    const pid = plateIds[i];
+    if (pid < 0 || pid >= plates.length) continue;
+
+    const points = getGridPolygon(i);
+    if (!points) continue;
+
+    overlay.append("polygon")
+      .attr("points", points)
+      .attr("fill", plateColors[pid])
+      .attr("fill-opacity", 0.35)
+      .attr("stroke", plateColors[pid])
+      .attr("stroke-opacity", 0.5)
+      .attr("stroke-width", 0.2)
+      .attr("data-plate", pid)
+      .on("click", function () {
+        highlightPlate(pid, plateColors);
+      });
+  }
+
+  drawVelocityArrows(overlay, plates, plateIds, plateColors);
+}
+
+function drawHeightOverlay(heights) {
+  viewbox.select("#tectonicOverlay").remove();
+  const overlay = viewbox.insert("g", "#terrs").attr("id", "tectonicOverlay");
+  const numCells = heights.length;
+
+  for (let i = 0; i < numCells; i++) {
+    const points = getGridPolygon(i);
+    if (!points) continue;
+
+    overlay.append("polygon")
+      .attr("points", points)
+      .attr("fill", tectonicHeightColor(heights[i]))
+      .attr("fill-opacity", 0.85)
+      .attr("stroke", tectonicHeightColor(heights[i]))
+      .attr("stroke-opacity", 0.5)
+      .attr("stroke-width", 0.1);
+  }
+}
+
+function drawVelocityArrows(overlay, plates, plateIds, plateColors) {
+  const arrowGroup = overlay.append("g").attr("id", "velocityArrows");
+
+  for (const plate of plates) {
+    const centroid = computeGridPlateCentroid(plate.id, plateIds);
+    if (!centroid) continue;
+
+    const [cx, cy] = centroid;
+    const vel = plate.velocity;
+    const arrowScale = 30;
+    const dx = vel[0] * arrowScale;
+    const dy = -vel[1] * arrowScale;
+    const mag = Math.sqrt(dx * dx + dy * dy);
+    if (mag < 2) continue;
+
+    arrowGroup.append("line")
+      .attr("x1", cx).attr("y1", cy)
+      .attr("x2", cx + dx).attr("y2", cy + dy)
+      .attr("stroke", plateColors[plate.id])
+      .attr("stroke-width", 2)
+      .attr("stroke-opacity", 0.9)
+      .attr("marker-end", "url(#tectonicArrowhead)");
+
+    arrowGroup.append("text")
+      .attr("x", cx).attr("y", cy - 5)
+      .attr("text-anchor", "middle")
+      .attr("font-size", "8px")
+      .attr("fill", plateColors[plate.id])
+      .attr("stroke", "#000")
+      .attr("stroke-width", 0.3)
+      .attr("paint-order", "stroke")
+      .text(`P${plate.id}`);
+  }
+
+  if (!document.getElementById("tectonicArrowhead")) {
+    const defs = d3.select("svg").select("defs");
+    defs.append("marker")
+      .attr("id", "tectonicArrowhead")
+      .attr("viewBox", "0 0 10 10")
+      .attr("refX", 8).attr("refY", 5)
+      .attr("markerWidth", 6).attr("markerHeight", 6)
+      .attr("orient", "auto-start-reverse")
+      .append("path")
+      .attr("d", "M 0 0 L 10 5 L 0 10 z")
+      .attr("fill", "#fff")
+      .attr("stroke", "#333")
+      .attr("stroke-width", 0.5);
+  }
+}
+
+function computeGridPlateCentroid(plateId, plateIds) {
+  let sumX = 0, sumY = 0, count = 0;
+  for (let i = 0; i < plateIds.length; i++) {
+    if (plateIds[i] !== plateId) continue;
+    const [x, y] = grid.points[i];
+    sumX += x;
+    sumY += y;
+    count++;
+  }
+  if (count === 0) return null;
+  return [sumX / count, sumY / count];
+}
+
+function highlightPlate(plateId, plateColors) {
+  viewbox.select("#tectonicOverlay").selectAll("polygon")
+    .attr("fill-opacity", function () {
+      return +this.getAttribute("data-plate") === plateId ? 0.6 : 0.15;
+    });
+
+  const row = byId(`tectonicPlate_${plateId}`);
+  if (row) {
+    row.scrollIntoView({behavior: "smooth", block: "nearest"});
+    row.style.outline = "2px solid " + plateColors[plateId];
+    setTimeout(() => row.style.outline = "", 1500);
+  }
+}
+
+function buildPlateList(plates, plateColors) {
+  const container = byId("tectonicPlateList");
+  container.innerHTML = "";
+
+  const table = document.createElement("table");
+  table.style.width = "100%";
+  table.style.borderCollapse = "collapse";
+  table.style.fontSize = "11px";
+
+  const header = document.createElement("tr");
+  header.innerHTML = `
+    <th style="width:30px">ID</th>
+    <th style="width:60px">Type</th>
+    <th>Velocity</th>
+    <th style="width:50px">Dir</th>
+  `;
+  table.appendChild(header);
+
+  for (const plate of plates) {
+    const row = document.createElement("tr");
+    row.id = `tectonicPlate_${plate.id}`;
+    row.style.borderBottom = "1px solid #444";
+    row.style.cursor = "pointer";
+
+    const vel = plate.velocity;
+    const speed = Math.sqrt(vel[0] * vel[0] + vel[1] * vel[1] + vel[2] * vel[2]).toFixed(2);
+    const dirDeg = Math.round(Math.atan2(-vel[1], vel[0]) * 180 / Math.PI);
+
+    row.innerHTML = `
+      <td style="text-align:center">
+        <span style="display:inline-block;width:12px;height:12px;background:${plateColors[plate.id]};border-radius:2px;vertical-align:middle"></span>
+        ${plate.id}
+      </td>
+      <td>
+        <select data-plate="${plate.id}" class="plateTypeSelect" style="font-size:10px;width:100%">
+          <option value="continental" ${!plate.isOceanic ? "selected" : ""}>Land</option>
+          <option value="oceanic" ${plate.isOceanic ? "selected" : ""}>Ocean</option>
+        </select>
+      </td>
+      <td style="text-align:center">
+        <input type="range" data-plate="${plate.id}" class="plateSpeedRange"
+          min="0" max="1.5" step="0.05" value="${speed}"
+          style="width:60px;vertical-align:middle">
+        <span class="plateSpeedLabel" style="font-size:9px">${speed}</span>
+      </td>
+      <td style="text-align:center">
+        <input type="number" data-plate="${plate.id}" class="plateDirInput"
+          min="-180" max="180" step="15" value="${dirDeg}"
+          style="width:45px;font-size:10px">
+      </td>
+    `;
+
+    row.addEventListener("click", (e) => {
+      if (e.target.tagName === "SELECT" || e.target.tagName === "INPUT") return;
+      highlightPlate(plate.id, plateColors);
+    });
+
+    table.appendChild(row);
+  }
+
+  container.appendChild(table);
+
+  container.querySelectorAll(".plateTypeSelect").forEach(select => {
+    select.addEventListener("change", function () {
+      const pid = +this.getAttribute("data-plate");
+      plates[pid].isOceanic = this.value === "oceanic";
+    });
+  });
+
+  container.querySelectorAll(".plateSpeedRange").forEach(slider => {
+    slider.addEventListener("input", function () {
+      const pid = +this.getAttribute("data-plate");
+      const plate = plates[pid];
+      const newSpeed = +this.value;
+      this.parentElement.querySelector(".plateSpeedLabel").textContent = newSpeed.toFixed(2);
+
+      const oldSpeed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
+      if (oldSpeed > 0.001) {
+        const scale = newSpeed / oldSpeed;
+        plate.velocity[0] *= scale;
+        plate.velocity[1] *= scale;
+        plate.velocity[2] *= scale;
+      } else {
+        plate.velocity[0] = newSpeed;
+        plate.velocity[1] = 0;
+        plate.velocity[2] = 0;
+      }
+    });
+  });
+
+  container.querySelectorAll(".plateDirInput").forEach(input => {
+    input.addEventListener("change", function () {
+      const pid = +this.getAttribute("data-plate");
+      const plate = plates[pid];
+      const dirRad = (+this.value) * Math.PI / 180;
+      const speed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
+      plate.velocity[0] = Math.cos(dirRad) * speed;
+      plate.velocity[1] = -Math.sin(dirRad) * speed;
+      plate.velocity[2] = 0;
+    });
+  });
+}
+
+function regenerateFromEditor() {
+  const generator = window.tectonicGenerator;
+  if (!generator) return tip("No tectonic generator available", false, "error");
+
+  tip("Regenerating terrain from edited plates...", true, "warn");
+
+  setTimeout(() => {
+    try {
+      const result = generator.regenerate();
+
+      // Update grid heights
+      grid.cells.h = result.heights;
+      window.tectonicMetadata = result.metadata;
+
+      // Show the regenerated heightmap as a visual overlay
+      tectonicViewMode = "heights";
+      drawHeightOverlay(result.heights);
+
+      // Log changes for debugging
+      let water = 0, land = 0, minH = 100, maxH = 0;
+      for (let i = 0; i < result.heights.length; i++) {
+        const h = result.heights[i];
+        if (h < 20) water++; else land++;
+        if (h < minH) minH = h;
+        if (h > maxH) maxH = h;
+      }
+      console.log(`Tectonic regeneration: ${land} land (${(land / result.heights.length * 100).toFixed(1)}%), heights ${minH}-${maxH}`);
+
+      tip("Terrain regenerated. Click 'Apply to Map' to regenerate the full map.", true, "success");
+    } catch (e) {
+      console.error("Tectonic regeneration failed:", e);
+      tip("Regeneration failed: " + e.message, false, "error");
+    }
+  }, 50);
+}
+
+function applyToMap() {
+  if (!window.tectonicGenerator) return tip("No tectonic generator available", false, "error");
+
+  // Close the editor overlay
+  closeTectonicEditor();
+  $("#tectonicEditor").dialog("close");
+
+  tip("Rebuilding map from edited tectonics...", true, "warn");
+
+  setTimeout(() => {
+    try {
+      // grid.cells.h is already set by regenerateFromEditor
+      // Run the full downstream pipeline WITHOUT regenerating the heightmap
+      undraw();
+      pack = {};
+
+      Features.markupGrid();
+      addLakesInDeepDepressions();
+      openNearSeaLakes();
+
+      OceanLayers();
+      defineMapSize();
+      calculateMapCoordinates();
+      calculateTemperatures();
+      generatePrecipitation();
+
+      reGraph();
+      Features.markupPack();
+      createDefaultRuler();
+
+      Rivers.generate();
+      Biomes.define();
+      Features.defineGroups();
+
+      Ice.generate();
+
+      rankCells();
+      Cultures.generate();
+      Cultures.expand();
+
+      Burgs.generate();
+      States.generate();
+      Routes.generate();
+      Religions.generate();
+
+      Burgs.specify();
+      States.collectStatistics();
+      States.defineStateForms();
+
+      Provinces.generate();
+      Provinces.getPoles();
+
+      Rivers.specify();
+      Lakes.defineNames();
+
+      Military.generate();
+      Markers.generate();
+      Zones.generate();
+
+      drawScaleBar(scaleBar, scale);
+      Names.getMapName();
+
+      drawLayers();
+      if (ThreeD.options.isOn) ThreeD.redraw();
+
+      fitMapToScreen();
+      clearMainTip();
+      tip("Map rebuilt from edited tectonics", true, "success");
+    } catch (e) {
+      console.error("Failed to rebuild map:", e);
+      tip("Rebuild failed: " + e.message, false, "error");
+    }
+  }, 100);
+}
+
+function togglePlateOverlay() {
+  const overlay = viewbox.select("#tectonicOverlay");
+
+  if (tectonicViewMode === "heights") {
+    // Switch back to plate view
+    tectonicViewMode = "plates";
+    const plates = window.tectonicGenerator.getPlates();
+    const plateColors = generatePlateColors(plates.length);
+    drawPlateOverlay(window.tectonicMetadata.plateIds, plateColors, plates);
+    return;
+  }
+
+  if (overlay.empty()) {
+    const plates = window.tectonicGenerator.getPlates();
+    const plateColors = generatePlateColors(plates.length);
+    drawPlateOverlay(window.tectonicMetadata.plateIds, plateColors, plates);
+  } else {
+    const visible = overlay.style("display") !== "none";
+    overlay.style("display", visible ? "none" : null);
+  }
+}
+
+function closeTectonicEditor() {
+  viewbox.select("#tectonicOverlay").remove();
+  d3.select("#tectonicArrowhead").remove();
+  tectonicViewMode = "plates";
+}
diff --git a/public/modules/ui/tools.js b/public/modules/ui/tools.js
index 34c1cd12..6e4495ec 100644
--- a/public/modules/ui/tools.js
+++ b/public/modules/ui/tools.js
@@ -9,6 +9,7 @@ toolsContent.addEventListener("click", function (event) {
 
   // click on open Editor buttons
   if (button === "editHeightmapButton") editHeightmap();
+  else if (button === "editTectonicsButton") editTectonics();
   else if (button === "editBiomesButton") editBiomes();
   else if (button === "editStatesButton") editStates();
   else if (button === "editProvincesButton") editProvinces();
diff --git a/src/index.html b/src/index.html
index dffaa816..eee1e9c6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2123,6 +2123,13 @@
             >
               Heightmap
             </button>
+            <button
+              id="editTectonicsButton"
+              data-tip="Click to open Tectonic Plates Editor (requires tectonic template)"
+              data-shortcut="Shift + T"
+            >
+              Tectonics
+            </button>
             <button id="overviewMarkersButton" data-tip="Click to open Markers Overview" data-shortcut="Shift + K">
               Markers
             </button>
@@ -4098,6 +4105,18 @@
         <div id="regimentSelectorBody" class="table"></div>
       </div>
 
+      <div id="tectonicEditor" class="dialog stable" style="display: none">
+        <div id="tectonicPlateList" style="max-height: 300px; overflow-y: auto"></div>
+        <div style="margin-top: 8px">
+          <button id="tectonicRegenerate" data-tip="Regenerate terrain preview from edited plates">Regenerate Preview</button>
+          <button id="tectonicApplyMap" data-tip="Apply changes and regenerate the full map">Apply to Map</button>
+        </div>
+        <div style="margin-top: 4px">
+          <button id="tectonicToggleOverlay" data-tip="Switch between plate view and height view">Toggle View</button>
+          <button id="tectonicClose" data-tip="Close editor and remove overlay">Close</button>
+        </div>
+      </div>
+
       <div id="brushesPanel" class="dialog stable" style="display: none">
         <div id="brushesButtons" style="display: inline-block">
           <button id="brushRaise" data-tip="Raise brush: increase height of cells in radius by Power value">
@@ -8538,6 +8557,7 @@
     <script type="module" src="renderers/index.ts"></script>
 
     <script defer src="config/heightmap-templates.js"></script>
+    <script defer src="config/tectonic-templates.js"></script>
     <script defer src="config/precreated-heightmaps.js"></script>
     <script defer src="libs/alea.min.js?v1.105.0"></script>
     <script defer src="libs/polylabel.min.js?v1.105.0"></script>
@@ -8554,6 +8574,7 @@
     <script defer src="modules/ui/tools.js?v=1.113.3"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.105.4"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=1.113.0"></script>
+    <script defer src="modules/ui/tectonic-editor.js?v=1.0.0"></script>
     <script defer src="modules/ui/provinces-editor.js?v=1.108.1"></script>
     <script defer src="modules/ui/biomes-editor.js?v=1.112.0"></script>
     <script defer src="modules/ui/namesbase-editor.js?v=1.105.11"></script>
diff --git a/src/modules/heightmap-generator.ts b/src/modules/heightmap-generator.ts
index 9a6d462a..8cc1865e 100644
--- a/src/modules/heightmap-generator.ts
+++ b/src/modules/heightmap-generator.ts
@@ -10,6 +10,8 @@ import {
   P,
   rand,
 } from "../utils";
+import { TectonicPlateGenerator } from "./tectonic-generator";
+import type { TectonicConfig } from "../types/TectonicMetadata";
 
 declare global {
   var HeightmapGenerator: HeightmapModule;
@@ -596,17 +598,36 @@ class HeightmapModule {
     TIME && console.time("defineHeightmap");
     const id = (byId("templateInput")! as HTMLInputElement).value;
     Math.random = Alea(seed);
+
+    const isTectonic =
+      typeof tectonicTemplates !== "undefined" && id in tectonicTemplates;
     const isTemplate = id in heightmapTemplates;
 
-    const heights = isTemplate
-      ? this.fromTemplate(graph, id)
-      : await this.fromPrecreated(graph, id);
+    let heights: Uint8Array | null;
+    if (isTectonic) {
+      heights = this.fromTectonic(graph, tectonicTemplates[id].config);
+    } else if (isTemplate) {
+      heights = this.fromTemplate(graph, id);
+    } else {
+      heights = await this.fromPrecreated(graph, id);
+    }
+
     TIME && console.timeEnd("defineHeightmap");
 
     this.clearData();
     return heights as Uint8Array;
   }
 
+  fromTectonic(graph: any, config: TectonicConfig): Uint8Array {
+    this.setGraph(graph);
+    const generator = new TectonicPlateGenerator(this.grid!, config);
+    const result = generator.generate();
+    this.heights = result.heights;
+    window.tectonicMetadata = result.metadata;
+    window.tectonicGenerator = generator;
+    return this.heights;
+  }
+
   fromTemplate(graph: any, id: string): Uint8Array | null {
     const templateString = heightmapTemplates[id]?.template || "";
     const steps = templateString.split("\n");
diff --git a/src/modules/tectonic-generator.ts b/src/modules/tectonic-generator.ts
new file mode 100644
index 00000000..7651b984
--- /dev/null
+++ b/src/modules/tectonic-generator.ts
@@ -0,0 +1,1364 @@
+import {minmax} from "../utils/numberUtils";
+import {P} from "../utils/probabilityUtils";
+import type {
+  TectonicConfig,
+  TectonicPlate,
+  PlateBoundary,
+  TectonicMetadata,
+  BoundarySubtype
+} from "../types/TectonicMetadata";
+
+interface TectonicResult {
+  heights: Uint8Array;
+  metadata: TectonicMetadata;
+}
+
+interface Grid {
+  cells: {
+    i: Uint32Array | number[];
+    c: number[][];
+    b: number[];
+    h?: Uint8Array;
+  };
+  points: [number, number][];
+  cellsX: number;
+  cellsY: number;
+  cellsDesired: number;
+  spacing: number;
+}
+
+// Icosphere face: 3 vertex indices forming a triangle
+type Face = [number, number, number];
+
+// ============================================================
+// Icosphere mesh for spherical tectonic simulation
+// ============================================================
+
+class IcoSphereMesh {
+  vertices: [number, number, number][]; // unit sphere positions
+  faces: Face[];
+  neighbors: number[][]; // per-face adjacency
+  centroids: [number, number, number][]; // per-face centroid on unit sphere
+
+  constructor(subdivisions: number) {
+    this.vertices = [];
+    this.faces = [];
+    this.neighbors = [];
+    this.centroids = [];
+    this.buildIcosahedron();
+    for (let i = 0; i < subdivisions; i++) {
+      this.subdivide();
+    }
+    this.computeFaceData();
+  }
+
+  private buildIcosahedron(): void {
+    const t = (1 + Math.sqrt(5)) / 2; // golden ratio
+
+    // 12 vertices of icosahedron (normalized to unit sphere)
+    const raw: [number, number, number][] = [
+      [-1, t, 0],
+      [1, t, 0],
+      [-1, -t, 0],
+      [1, -t, 0],
+      [0, -1, t],
+      [0, 1, t],
+      [0, -1, -t],
+      [0, 1, -t],
+      [t, 0, -1],
+      [t, 0, 1],
+      [-t, 0, -1],
+      [-t, 0, 1]
+    ];
+
+    this.vertices = raw.map(v => this.normalize(v));
+
+    // 20 triangular faces
+    this.faces = [
+      [0, 11, 5],
+      [0, 5, 1],
+      [0, 1, 7],
+      [0, 7, 10],
+      [0, 10, 11],
+      [1, 5, 9],
+      [5, 11, 4],
+      [11, 10, 2],
+      [10, 7, 6],
+      [7, 1, 8],
+      [3, 9, 4],
+      [3, 4, 2],
+      [3, 2, 6],
+      [3, 6, 8],
+      [3, 8, 9],
+      [4, 9, 5],
+      [2, 4, 11],
+      [6, 2, 10],
+      [8, 6, 7],
+      [9, 8, 1]
+    ];
+  }
+
+  private normalize(v: [number, number, number]): [number, number, number] {
+    const len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+    return [v[0] / len, v[1] / len, v[2] / len];
+  }
+
+  private midpointCache = new Map<string, number>();
+
+  private getMidpoint(a: number, b: number): number {
+    const key = Math.min(a, b) + "-" + Math.max(a, b);
+    if (this.midpointCache.has(key)) return this.midpointCache.get(key)!;
+
+    const va = this.vertices[a];
+    const vb = this.vertices[b];
+    const mid: [number, number, number] = this.normalize([
+      (va[0] + vb[0]) / 2,
+      (va[1] + vb[1]) / 2,
+      (va[2] + vb[2]) / 2
+    ]);
+    const idx = this.vertices.length;
+    this.vertices.push(mid);
+    this.midpointCache.set(key, idx);
+    return idx;
+  }
+
+  private subdivide(): void {
+    this.midpointCache.clear();
+    const newFaces: Face[] = [];
+
+    for (const [a, b, c] of this.faces) {
+      const ab = this.getMidpoint(a, b);
+      const bc = this.getMidpoint(b, c);
+      const ca = this.getMidpoint(c, a);
+
+      newFaces.push([a, ab, ca]);
+      newFaces.push([b, bc, ab]);
+      newFaces.push([c, ca, bc]);
+      newFaces.push([ab, bc, ca]);
+    }
+
+    this.faces = newFaces;
+  }
+
+  private computeFaceData(): void {
+    const numFaces = this.faces.length;
+
+    // Compute centroids
+    this.centroids = this.faces.map(([a, b, c]) => {
+      const va = this.vertices[a];
+      const vb = this.vertices[b];
+      const vc = this.vertices[c];
+      return this.normalize([
+        (va[0] + vb[0] + vc[0]) / 3,
+        (va[1] + vb[1] + vc[1]) / 3,
+        (va[2] + vb[2] + vc[2]) / 3
+      ]);
+    });
+
+    // Build face adjacency: two faces are neighbors if they share an edge (2 vertices)
+    const edgeToFace = new Map<string, number[]>();
+    for (let f = 0; f < numFaces; f++) {
+      const [a, b, c] = this.faces[f];
+      const edges = [
+        [Math.min(a, b), Math.max(a, b)],
+        [Math.min(b, c), Math.max(b, c)],
+        [Math.min(a, c), Math.max(a, c)]
+      ];
+      for (const [e0, e1] of edges) {
+        const key = e0 + "-" + e1;
+        if (!edgeToFace.has(key)) edgeToFace.set(key, []);
+        edgeToFace.get(key)!.push(f);
+      }
+    }
+
+    this.neighbors = new Array(numFaces).fill(null).map(() => []);
+    for (const faces of edgeToFace.values()) {
+      if (faces.length === 2) {
+        this.neighbors[faces[0]].push(faces[1]);
+        this.neighbors[faces[1]].push(faces[0]);
+      }
+    }
+  }
+
+  // Convert unit sphere position to (lon, lat) in radians
+  toLonLat(v: [number, number, number]): [number, number] {
+    const lat = Math.asin(minmax(v[1], -1, 1));
+    const lon = Math.atan2(v[2], v[0]);
+    return [lon, lat];
+  }
+}
+
+// ============================================================
+// Spherical tectonic plate generator
+// ============================================================
+
+// Simple seeded PRNG (mulberry32) for deterministic regeneration
+function mulberry32(seed: number): () => number {
+  return function () {
+    seed |= 0;
+    seed = (seed + 0x6d2b79f5) | 0;
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export class TectonicPlateGenerator {
+  private grid: Grid;
+  private config: TectonicConfig;
+  private numGridCells: number;
+
+  // Sphere mesh
+  private sphere!: IcoSphereMesh;
+  private numSphereFaces!: number;
+
+  // Per-sphere-face data
+  private plateAssignment!: Int8Array;
+  private elevations!: Float32Array;
+  private boundaryFlags!: Uint8Array;
+  private boundaryConvergence!: Float32Array;
+
+  private plates: TectonicPlate[] = [];
+  private boundaries: PlateBoundary[] = [];
+
+  // Seeded PRNG for deterministic elevation pipeline
+  private elevationSeed: number = 0;
+  private rng: () => number = Math.random;
+
+  constructor(grid: Grid, config: TectonicConfig) {
+    this.grid = grid;
+    this.config = config;
+    this.numGridCells = grid.points.length;
+  }
+
+  generate(): TectonicResult {
+    // Choose icosphere subdivision level to roughly match grid resolution
+    // Sub 4 = 5120 faces, Sub 5 = 20480 faces, Sub 6 = 81920 faces
+    const targetFaces = this.numGridCells * 2; // oversample sphere for quality
+    let subdivisions = 4;
+    if (targetFaces > 10000) subdivisions = 5;
+    if (targetFaces > 40000) subdivisions = 6;
+
+    this.sphere = new IcoSphereMesh(subdivisions);
+    this.numSphereFaces = this.sphere.faces.length;
+
+    this.plateAssignment = new Int8Array(this.numSphereFaces).fill(-1);
+    this.elevations = new Float32Array(this.numSphereFaces);
+    this.boundaryFlags = new Uint8Array(this.numSphereFaces);
+    this.boundaryConvergence = new Float32Array(this.numSphereFaces);
+
+    // Run tectonic simulation on sphere
+    this.seedPlates();
+    this.growPlates();
+    this.perturbBoundaries();
+    this.classifyPlates();
+    this.assignVelocities();
+
+    // Save a seed for the elevation pipeline so regeneration is deterministic
+    this.elevationSeed = Math.floor(Math.random() * 2147483647);
+    this.runElevationPipeline();
+
+    // Project sphere onto flat grid
+    return this.projectAndFinalize();
+  }
+
+  // Run the elevation pipeline with a deterministic PRNG
+  private runElevationPipeline(): void {
+    this.rng = mulberry32(this.elevationSeed);
+    this.assignBaseElevations();
+    this.detectBoundaries();
+    this.computeBoundaryElevations();
+    this.diffuseElevations();
+    this.generateContinentalShelves();
+    this.addHotspots();
+    this.applyErosion();
+    this.applyNoise();
+  }
+
+  // Regenerate terrain from edited plate state (skips plate growth, re-runs elevation pipeline)
+  // Call after modifying plates[].isOceanic or plates[].velocity externally
+  regenerate(): TectonicResult {
+    // Reset elevation data but keep plate assignments and sphere mesh
+    this.elevations = new Float32Array(this.numSphereFaces);
+    this.boundaryFlags = new Uint8Array(this.numSphereFaces);
+    this.boundaryConvergence = new Float32Array(this.numSphereFaces);
+    this.boundaries = [];
+
+    // Re-run with same seed so noise/hotspots/erosion are deterministic
+    // Only plate-driven effects (base elevation, boundary types) change
+    this.runElevationPipeline();
+
+    return this.projectAndFinalize();
+  }
+
+  // Get current plates for editor access
+  getPlates(): TectonicPlate[] {
+    return this.plates;
+  }
+
+  // Get grid-level plate IDs for visualization (from last projectAndFinalize)
+  getGridPlateIds(): Uint8Array | null {
+    return window.tectonicMetadata?.plateIds ?? null;
+  }
+
+
+  // ---- Step 1: Seed plates on sphere ----
+  private seedPlates(): void {
+    const {plateCount} = this.config;
+    const effectivePlateCount = Math.min(plateCount, Math.floor(Math.sqrt(this.numSphereFaces) / 5));
+
+    // Minimum angular separation between seeds
+    const minAngularSep = Math.PI / Math.sqrt(effectivePlateCount) * 0.6;
+    const seeds: number[] = [];
+
+    let attempts = 0;
+    while (seeds.length < effectivePlateCount && attempts < effectivePlateCount * 200) {
+      const candidate = Math.floor(Math.random() * this.numSphereFaces);
+      attempts++;
+
+      // Check angular distance to existing seeds
+      let tooClose = false;
+      const cC = this.sphere.centroids[candidate];
+      for (const s of seeds) {
+        const cS = this.sphere.centroids[s];
+        const dot = cC[0] * cS[0] + cC[1] * cS[1] + cC[2] * cS[2];
+        const angle = Math.acos(minmax(dot, -1, 1));
+        if (angle < minAngularSep) {
+          tooClose = true;
+          break;
+        }
+      }
+      if (tooClose) continue;
+
+      seeds.push(candidate);
+    }
+
+    // Fallback: fill remaining with random faces
+    while (seeds.length < effectivePlateCount) {
+      const candidate = Math.floor(Math.random() * this.numSphereFaces);
+      if (!seeds.includes(candidate)) seeds.push(candidate);
+    }
+
+    for (let i = 0; i < seeds.length; i++) {
+      this.plates.push({
+        id: i,
+        cells: new Set([seeds[i]]),
+        isOceanic: false,
+        velocity: [0, 0, 0],
+        baseElevation: 0,
+        seedCell: seeds[i]
+      });
+      this.plateAssignment[seeds[i]] = i;
+    }
+  }
+
+  // ---- Step 2: Grow plates via randomized frontier BFS on sphere ----
+  private growPlates(): void {
+    const plateGrowthRate = this.plates.map(() => 0.3 + Math.random() * 0.7);
+    const frontier: number[][] = this.plates.map(() => []);
+
+    for (const plate of this.plates) {
+      for (const neighbor of this.sphere.neighbors[plate.seedCell]) {
+        if (this.plateAssignment[neighbor] === -1) {
+          frontier[plate.id].push(neighbor);
+        }
+      }
+    }
+
+    let unassigned = this.numSphereFaces - this.plates.length;
+    let maxIterations = this.numSphereFaces * 3;
+
+    while (unassigned > 0 && maxIterations-- > 0) {
+      let anyGrew = false;
+
+      for (const plate of this.plates) {
+        const pid = plate.id;
+        if (frontier[pid].length === 0) continue;
+
+        const claimCount = Math.max(1, Math.floor(frontier[pid].length * plateGrowthRate[pid] * (0.3 + Math.random() * 0.4)));
+        this.shuffleArray(frontier[pid]);
+
+        let claimed = 0;
+        const newFrontier: number[] = [];
+
+        for (const cell of frontier[pid]) {
+          if (this.plateAssignment[cell] !== -1) continue;
+          if (claimed >= claimCount) {
+            newFrontier.push(cell);
+            continue;
+          }
+
+          if (Math.random() > 0.7 + plateGrowthRate[pid] * 0.3) {
+            newFrontier.push(cell);
+            continue;
+          }
+
+          this.plateAssignment[cell] = pid;
+          plate.cells.add(cell);
+          claimed++;
+          unassigned--;
+          anyGrew = true;
+
+          for (const neighbor of this.sphere.neighbors[cell]) {
+            if (this.plateAssignment[neighbor] === -1) {
+              newFrontier.push(neighbor);
+            }
+          }
+        }
+
+        frontier[pid] = newFrontier;
+      }
+
+      if (!anyGrew) break;
+    }
+
+    // Assign any remaining
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      if (this.plateAssignment[i] === -1) {
+        for (const neighbor of this.sphere.neighbors[i]) {
+          if (this.plateAssignment[neighbor] !== -1) {
+            this.plateAssignment[i] = this.plateAssignment[neighbor];
+            this.plates[this.plateAssignment[neighbor]].cells.add(i);
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  // ---- Step 3: Perturb boundaries ----
+  private perturbBoundaries(): void {
+    const passes = 3;
+
+    for (let pass = 0; pass < passes; pass++) {
+      for (let i = 0; i < this.numSphereFaces; i++) {
+        const myPlate = this.plateAssignment[i];
+        if (myPlate === -1) continue;
+
+        const adjacentPlates: number[] = [];
+        let samePlateNeighborCount = 0;
+
+        for (const n of this.sphere.neighbors[i]) {
+          const np = this.plateAssignment[n];
+          if (np !== myPlate && np !== -1) {
+            adjacentPlates.push(np);
+          } else {
+            samePlateNeighborCount++;
+          }
+        }
+
+        if (adjacentPlates.length === 0) continue;
+        if (samePlateNeighborCount < 2) continue;
+        if (Math.random() > 0.25) continue;
+
+        const targetPlate = adjacentPlates[Math.floor(Math.random() * adjacentPlates.length)];
+        this.plates[myPlate].cells.delete(i);
+        this.plateAssignment[i] = targetPlate;
+        this.plates[targetPlate].cells.add(i);
+      }
+    }
+  }
+
+  private shuffleArray<T>(arr: T[]): void {
+    for (let i = arr.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      const tmp = arr[i];
+      arr[i] = arr[j];
+      arr[j] = tmp;
+    }
+  }
+
+  // ---- Step 4: Classify plates ----
+  private classifyPlates(): void {
+    const {continentalRatio} = this.config;
+    const targetContinental = Math.max(1, Math.round(this.plates.length * continentalRatio));
+
+    // Shuffle plates for random classification order
+    const plateOrder = [...this.plates];
+    this.shuffleArray(plateOrder);
+
+    let continentalCount = 0;
+    let oceanicCount = 0;
+
+    for (const plate of plateOrder) {
+      const needMoreContinental = continentalCount < targetContinental;
+      const needMoreOceanic = oceanicCount < (this.plates.length - targetContinental);
+
+      if (needMoreContinental && !needMoreOceanic) {
+        plate.isOceanic = false;
+      } else if (!needMoreContinental && needMoreOceanic) {
+        plate.isOceanic = true;
+      } else {
+        plate.isOceanic = P(1 - continentalRatio);
+      }
+
+      if (plate.isOceanic) oceanicCount++;
+      else continentalCount++;
+    }
+
+    // Guarantee at least 1 of each
+    if (continentalCount === 0) {
+      const largest = this.plates.reduce((a, b) => a.cells.size > b.cells.size ? a : b);
+      largest.isOceanic = false;
+    }
+    if (oceanicCount === 0) {
+      const smallest = this.plates.reduce((a, b) => a.cells.size < b.cells.size ? a : b);
+      smallest.isOceanic = true;
+    }
+  }
+
+  // ---- Step 5: Assign velocities as 3D tangent vectors on sphere ----
+  private assignVelocities(): void {
+    for (const plate of this.plates) {
+      // Pick a random rotation axis and speed
+      // The velocity is a tangent vector at the plate centroid
+      const centroid = this.computePlateCentroid(plate);
+      const magnitude = 0.3 + Math.random() * 0.7;
+
+      // Random tangent direction: cross centroid with a random vector
+      const randomVec: [number, number, number] = this.normalize3([
+        Math.random() - 0.5,
+        Math.random() - 0.5,
+        Math.random() - 0.5
+      ]);
+
+      // Tangent = cross(centroid, randomVec), normalized and scaled
+      const tangent = this.cross(centroid, randomVec);
+      const tanLen = this.length3(tangent);
+      if (tanLen > 0.001) {
+        plate.velocity = [
+          (tangent[0] / tanLen) * magnitude,
+          (tangent[1] / tanLen) * magnitude,
+          (tangent[2] / tanLen) * magnitude
+        ];
+      } else {
+        plate.velocity = [magnitude, 0, 0];
+      }
+    }
+  }
+
+  // ---- Step 6: Set base elevations ----
+  private assignBaseElevations(): void {
+    for (const plate of this.plates) {
+      // Continental base: 28-45 (closer to sea level = more varied coastlines)
+      // Oceanic base: 0-8 (deep ocean)
+      plate.baseElevation = plate.isOceanic
+        ? Math.floor(this.rng() * 9)          // 0-8
+        : 28 + Math.floor(this.rng() * 18);   // 28-45
+
+      for (const cell of plate.cells) {
+        // Add per-cell variation for more interesting interior terrain
+        const variation = plate.isOceanic
+          ? (this.rng() - 0.5) * 4
+          : (this.rng() - 0.5) * 14;
+        this.elevations[cell] = plate.baseElevation + variation;
+      }
+    }
+
+    // Add inland depressions on continental plates (future inland seas)
+    this.addInlandDepressions();
+  }
+
+  // Create random low-elevation depressions on continental plates
+  // These can dip below sea level, forming inland seas like Caspian, Mediterranean, Hudson Bay
+  private addInlandDepressions(): void {
+    for (const plate of this.plates) {
+      if (plate.isOceanic) continue;
+
+      // 1-3 depressions per continental plate, proportional to plate size
+      const numDepressions = Math.max(1, Math.floor(plate.cells.size / 3000) + (this.rng() < 0.5 ? 1 : 0));
+
+      const cellArray = [...plate.cells];
+
+      for (let d = 0; d < numDepressions; d++) {
+        // Pick a random cell not near plate edge as depression center
+        const center = cellArray[Math.floor(this.rng() * cellArray.length)];
+
+        // Depression depth: some just create lowlands, some breach sea level
+        const depth = 10 + this.rng() * 25; // 10-35 reduction
+        const radius = 3 + Math.floor(this.rng() * 4); // BFS hops
+
+        // BFS spread with decay
+        const visited = new Set<number>();
+        visited.add(center);
+        const queue: [number, number][] = [[center, 0]];
+
+        while (queue.length > 0) {
+          const [cell, dist] = queue.shift()!;
+          if (dist > radius) continue;
+
+          const factor = 1 - (dist / (radius + 1));
+          this.elevations[cell] -= depth * factor * factor; // quadratic falloff
+
+          for (const n of this.sphere.neighbors[cell]) {
+            if (!visited.has(n) && this.plateAssignment[n] === plate.id) {
+              visited.add(n);
+              queue.push([n, dist + 1]);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // ---- Step 7: Detect boundaries and classify ----
+  private detectBoundaries(): void {
+    const pairMap = new Map<string, {plateA: number; plateB: number; cells: number[]}>();
+
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      const myPlate = this.plateAssignment[i];
+      if (myPlate === -1) continue;
+
+      for (const neighbor of this.sphere.neighbors[i]) {
+        const neighborPlate = this.plateAssignment[neighbor];
+        if (neighborPlate === -1 || neighborPlate === myPlate) continue;
+
+        this.boundaryFlags[i] = 1;
+
+        const a = Math.min(myPlate, neighborPlate);
+        const b = Math.max(myPlate, neighborPlate);
+        const key = a + "-" + b;
+
+        if (!pairMap.has(key)) {
+          pairMap.set(key, {plateA: a, plateB: b, cells: []});
+        }
+        const pair = pairMap.get(key)!;
+        if (!pair.cells.includes(i)) {
+          pair.cells.push(i);
+        }
+        break;
+      }
+    }
+
+    // Compute convergence for each plate pair
+    for (const [, pair] of pairMap) {
+      const centroidA = this.computePlateCentroid(this.plates[pair.plateA]);
+      const centroidB = this.computePlateCentroid(this.plates[pair.plateB]);
+
+      const convergence = this.computeConvergence(
+        this.plates[pair.plateA],
+        this.plates[pair.plateB],
+        centroidA,
+        centroidB
+      );
+
+      const plateA = this.plates[pair.plateA];
+      const plateB = this.plates[pair.plateB];
+
+      let subtype: BoundarySubtype;
+      const isConvergent = convergence > 0.3;
+      const isDivergent = convergence < -0.3;
+
+      if (isConvergent) {
+        if (!plateA.isOceanic && !plateB.isOceanic) subtype = "cont-cont";
+        else if (plateA.isOceanic && plateB.isOceanic) subtype = "ocean-ocean";
+        else subtype = "ocean-cont";
+      } else if (isDivergent) {
+        if (plateA.isOceanic && plateB.isOceanic) subtype = "ocean-rift";
+        else if (!plateA.isOceanic && !plateB.isOceanic) subtype = "cont-rift";
+        else subtype = "ocean-rift";
+      } else {
+        subtype = "transform";
+      }
+
+      this.boundaries.push({
+        plateA: pair.plateA,
+        plateB: pair.plateB,
+        cells: pair.cells,
+        convergence,
+        subtype
+      });
+
+      for (const cell of pair.cells) {
+        this.boundaryConvergence[cell] = convergence;
+      }
+    }
+  }
+
+  private computePlateCentroid(plate: TectonicPlate): [number, number, number] {
+    let sx = 0, sy = 0, sz = 0;
+    for (const cell of plate.cells) {
+      const c = this.sphere.centroids[cell];
+      sx += c[0];
+      sy += c[1];
+      sz += c[2];
+    }
+    const n = plate.cells.size || 1;
+    return this.normalize3([sx / n, sy / n, sz / n]);
+  }
+
+  private computeConvergence(
+    plateA: TectonicPlate,
+    plateB: TectonicPlate,
+    centroidA: [number, number, number],
+    centroidB: [number, number, number]
+  ): number {
+    // Great circle direction from A to B
+    const dx = centroidB[0] - centroidA[0];
+    const dy = centroidB[1] - centroidA[1];
+    const dz = centroidB[2] - centroidA[2];
+    const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+    if (dist === 0) return 0;
+
+    const dirX = dx / dist;
+    const dirY = dy / dist;
+    const dirZ = dz / dist;
+
+    // How much A moves toward B + how much B moves toward A
+    const convA = plateA.velocity[0] * dirX + plateA.velocity[1] * dirY + plateA.velocity[2] * dirZ;
+    const convB = -(plateB.velocity[0] * dirX + plateB.velocity[1] * dirY + plateB.velocity[2] * dirZ);
+
+    return (convA + convB) * this.config.collisionIntensity;
+  }
+
+  // ---- Step 8: Boundary elevations ----
+  private computeBoundaryElevations(): void {
+    for (const boundary of this.boundaries) {
+      const absConv = Math.abs(boundary.convergence);
+
+      for (const cell of boundary.cells) {
+        const cellPlate = this.plates[this.plateAssignment[cell]];
+        let delta = 0;
+
+        switch (boundary.subtype) {
+          case "cont-cont":
+            // Himalayas-scale fold mountains — tallest features
+            delta = (40 + this.rng() * 40) * Math.max(absConv, 0.5);
+            break;
+          case "ocean-cont":
+            if (cellPlate.isOceanic) {
+              // Deep ocean trench (Mariana-style)
+              delta = -(12 + this.rng() * 10) * Math.max(absConv, 0.4);
+            } else {
+              // Andes-scale volcanic arc
+              delta = (30 + this.rng() * 35) * Math.max(absConv, 0.4);
+            }
+            break;
+          case "ocean-ocean":
+            // Island arc (Japan-style) — peaks should breach sea level
+            delta = (20 + this.rng() * 20) * Math.max(absConv, 0.4);
+            break;
+          case "ocean-rift":
+            // Mid-ocean ridge
+            delta = (5 + this.rng() * 5) * Math.max(absConv, 0.3);
+            break;
+          case "cont-rift":
+            // Continental rift — deep inland depressions that can form seas
+            delta = -(18 + this.rng() * 15) * Math.max(absConv, 0.4);
+            break;
+          case "transform":
+            delta = (this.rng() - 0.5) * 10;
+            break;
+        }
+
+        this.elevations[cell] += delta;
+      }
+    }
+  }
+
+  // ---- Step 9: Diffuse elevations ----
+  private diffuseElevations(): void {
+    const {smoothingPasses} = this.config;
+
+    for (let pass = 0; pass < smoothingPasses; pass++) {
+      const newElevations = new Float32Array(this.elevations);
+
+      for (let i = 0; i < this.numSphereFaces; i++) {
+        const neighbors = this.sphere.neighbors[i];
+        if (!neighbors || neighbors.length === 0) continue;
+
+        let sum = 0;
+        for (const n of neighbors) {
+          sum += this.elevations[n];
+        }
+        const neighborAvg = sum / neighbors.length;
+
+        if (this.boundaryFlags[i]) {
+          newElevations[i] = this.elevations[i] * 0.92 + neighborAvg * 0.08;
+        } else {
+          newElevations[i] = this.elevations[i] * 0.6 + neighborAvg * 0.4;
+        }
+      }
+
+      this.elevations = newElevations;
+    }
+  }
+
+  // ---- Step 10: Continental shelves ----
+  private generateContinentalShelves(): void {
+    const maxShelfHops = 3;
+    const shelfTarget = 18;
+
+    const coastCells: number[] = [];
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      if (this.elevations[i] >= 20) {
+        for (const n of this.sphere.neighbors[i]) {
+          if (this.elevations[n] < 20) {
+            coastCells.push(i);
+            break;
+          }
+        }
+      }
+    }
+
+    const distance = new Int8Array(this.numSphereFaces).fill(-1);
+    const queue: number[] = [];
+
+    for (const coast of coastCells) {
+      for (const n of this.sphere.neighbors[coast]) {
+        if (this.elevations[n] < 20 && distance[n] === -1) {
+          distance[n] = 1;
+          queue.push(n);
+        }
+      }
+    }
+
+    let idx = 0;
+    while (idx < queue.length) {
+      const cell = queue[idx++];
+      const d = distance[cell];
+      if (d >= maxShelfHops) continue;
+
+      for (const n of this.sphere.neighbors[cell]) {
+        if (this.elevations[n] < 20 && distance[n] === -1) {
+          distance[n] = d + 1;
+          queue.push(n);
+        }
+      }
+    }
+
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      if (distance[i] > 0 && distance[i] <= maxShelfHops) {
+        const factor = 1.0 - distance[i] / (maxShelfHops + 1);
+        this.elevations[i] = this.elevations[i] + (shelfTarget - this.elevations[i]) * factor * 0.4;
+      }
+    }
+  }
+
+  // ---- Step 11: Hotspot volcanoes ----
+  private addHotspots(): void {
+    const {hotspotCount} = this.config;
+
+    for (let h = 0; h < hotspotCount; h++) {
+      let center = -1;
+      let attempts = 0;
+      while (attempts < 100) {
+        const candidate = Math.floor(this.rng() * this.numSphereFaces);
+        if (!this.boundaryFlags[candidate]) {
+          center = candidate;
+          break;
+        }
+        attempts++;
+      }
+      if (center === -1) continue;
+
+      const peakHeight = 25 + Math.floor(this.rng() * 21); // 25-45
+      const change = new Float32Array(this.numSphereFaces);
+      change[center] = peakHeight;
+
+      const visited = new Uint8Array(this.numSphereFaces);
+      visited[center] = 1;
+      const queue = [center];
+
+      while (queue.length > 0) {
+        const cell = queue.shift()!;
+        for (const neighbor of this.sphere.neighbors[cell]) {
+          if (visited[neighbor]) continue;
+          visited[neighbor] = 1;
+          change[neighbor] = change[cell] * (0.7 + this.rng() * 0.15);
+          if (change[neighbor] > 1) queue.push(neighbor);
+        }
+      }
+
+      for (let i = 0; i < this.numSphereFaces; i++) {
+        this.elevations[i] += change[i];
+      }
+    }
+  }
+
+  // ---- Step 12: Erosion ----
+  private applyErosion(): void {
+    const {erosionPasses} = this.config;
+    if (erosionPasses === 0) return;
+
+    const particleCount = Math.floor(this.numSphereFaces * 0.3);
+
+    for (let pass = 0; pass < erosionPasses; pass++) {
+      const erosion = new Float32Array(this.numSphereFaces);
+      const deposition = new Float32Array(this.numSphereFaces);
+
+      for (let p = 0; p < particleCount; p++) {
+        let cell = Math.floor(this.rng() * this.numSphereFaces);
+        if (this.elevations[cell] < 20) continue;
+
+        let sediment = 0;
+        const maxSteps = 30;
+
+        for (let step = 0; step < maxSteps; step++) {
+          let minNeighbor = -1;
+          let minHeight = this.elevations[cell];
+
+          for (const n of this.sphere.neighbors[cell]) {
+            const h = this.elevations[n] - erosion[n] + deposition[n];
+            if (h < minHeight) {
+              minHeight = h;
+              minNeighbor = n;
+            }
+          }
+
+          if (minNeighbor === -1) break;
+
+          const currentH = this.elevations[cell] - erosion[cell] + deposition[cell];
+          const slope = currentH - minHeight;
+
+          const erodeAmount = Math.min(slope * 0.15, 2);
+          erosion[cell] += erodeAmount;
+          sediment += erodeAmount;
+
+          if (slope < 2 && sediment > 0) {
+            const depositAmount = Math.min(sediment * 0.3, 1);
+            deposition[minNeighbor] += depositAmount;
+            sediment -= depositAmount;
+          }
+
+          cell = minNeighbor;
+
+          if (this.elevations[cell] < 20) {
+            deposition[cell] += sediment * 0.5;
+            break;
+          }
+        }
+      }
+
+      for (let i = 0; i < this.numSphereFaces; i++) {
+        this.elevations[i] = this.elevations[i] - erosion[i] * 0.5 + deposition[i] * 0.3;
+      }
+    }
+  }
+
+  // ---- Step 13: Noise ----
+  private applyNoise(): void {
+    const {noiseLevel} = this.config;
+    if (noiseLevel === 0) return;
+
+    const rawNoise = new Float32Array(this.numSphereFaces);
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      rawNoise[i] = this.rng() * 2 - 1;
+    }
+
+    for (let pass = 0; pass < 3; pass++) {
+      const smoothed = new Float32Array(this.numSphereFaces);
+      for (let i = 0; i < this.numSphereFaces; i++) {
+        const neighbors = this.sphere.neighbors[i];
+        let sum = rawNoise[i];
+        for (const n of neighbors) {
+          sum += rawNoise[n];
+        }
+        smoothed[i] = sum / (neighbors.length + 1);
+      }
+      rawNoise.set(smoothed);
+    }
+
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      const isLand = this.elevations[i] >= 20;
+      const amplitude = isLand ? noiseLevel * 8 : noiseLevel * 3;
+      this.elevations[i] += rawNoise[i] * amplitude;
+    }
+  }
+
+  // ============================================================
+  // Post-projection grid-level enhancements
+  // ============================================================
+
+  // Add fractal noise near coastlines to create irregular, realistic edges
+  // This pushes some coastal land below sea level (creating bays/inlets)
+  // and some shallow ocean above sea level (creating peninsulas/headlands)
+  private applyCoastalFractal(elevations: Float32Array): void {
+    const seaLevel = 20;
+    const perturbRange = 5; // BFS hops from coast to apply fractal noise
+
+    // Find cells near coastline (both land and ocean side)
+    const coastDist = new Int8Array(this.numGridCells).fill(-1);
+    const queue: number[] = [];
+
+    for (let i = 0; i < this.numGridCells; i++) {
+      const isLand = elevations[i] >= seaLevel;
+      for (const n of this.grid.cells.c[i]) {
+        const nIsLand = elevations[n] >= seaLevel;
+        if (isLand !== nIsLand) {
+          if (coastDist[i] === -1) {
+            coastDist[i] = 0;
+            queue.push(i);
+          }
+          break;
+        }
+      }
+    }
+
+    let idx = 0;
+    while (idx < queue.length) {
+      const cell = queue[idx++];
+      const d = coastDist[cell];
+      if (d >= perturbRange) continue;
+      for (const n of this.grid.cells.c[cell]) {
+        if (coastDist[n] === -1) {
+          coastDist[n] = d + 1;
+          queue.push(n);
+        }
+      }
+    }
+
+    // Generate spatially coherent noise (smooth random values on grid)
+    const noise = new Float32Array(this.numGridCells);
+    for (let i = 0; i < this.numGridCells; i++) {
+      noise[i] = this.rng() * 2 - 1;
+    }
+    // Smooth twice for spatial coherence (not too smooth — we want fractal detail)
+    for (let pass = 0; pass < 2; pass++) {
+      const smoothed = new Float32Array(this.numGridCells);
+      for (let i = 0; i < this.numGridCells; i++) {
+        const neighbors = this.grid.cells.c[i];
+        let sum = noise[i];
+        for (const n of neighbors) sum += noise[n];
+        smoothed[i] = sum / (neighbors.length + 1);
+      }
+      noise.set(smoothed);
+    }
+
+    // Apply noise near coastlines — strongest right at the coast, fading inland/seaward
+    for (let i = 0; i < this.numGridCells; i++) {
+      if (coastDist[i] < 0 || coastDist[i] > perturbRange) continue;
+
+      const t = coastDist[i] / perturbRange; // 0 at coast, 1 at edge of influence
+      const strength = (1 - t * t) * 10; // quadratic falloff, max ±10 at coastline
+
+      elevations[i] += noise[i] * strength;
+    }
+  }
+
+  // ============================================================
+  // Projection: sphere → flat grid (equirectangular)
+  // ============================================================
+
+  private projectAndFinalize(): TectonicResult {
+    // Build spatial lookup for sphere faces: bin by (lon, lat)
+    const faceLonLat = this.sphere.centroids.map(c => this.sphere.toLonLat(c));
+
+    // For each grid cell, find the nearest sphere face and sample its elevation
+    const gridWidth = this.grid.cellsX * this.grid.spacing;
+    const gridHeight = this.grid.cellsY * this.grid.spacing;
+
+    // Grid cell (x, y) → (lon, lat) via equirectangular projection
+    // x: 0..gridWidth → lon: -π..π
+    // y: 0..gridHeight → lat: π/2..-π/2 (top = north pole, bottom = south pole)
+    const gridElevations = new Float32Array(this.numGridCells);
+    const gridPlateIds = new Int8Array(this.numGridCells).fill(-1);
+
+    // Build a bucketed spatial index for fast nearest-face lookup
+    const lonBuckets = 72; // 5° per bucket
+    const latBuckets = 36;
+    const buckets: number[][] = new Array(lonBuckets * latBuckets).fill(null).map(() => []);
+
+    for (let f = 0; f < this.numSphereFaces; f++) {
+      const [lon, lat] = faceLonLat[f];
+      const bLon = Math.floor(((lon + Math.PI) / (2 * Math.PI)) * lonBuckets) % lonBuckets;
+      const bLat = minmax(Math.floor(((lat + Math.PI / 2) / Math.PI) * latBuckets), 0, latBuckets - 1);
+      buckets[bLat * lonBuckets + bLon].push(f);
+    }
+
+    for (let gi = 0; gi < this.numGridCells; gi++) {
+      const [gx, gy] = this.grid.points[gi];
+
+      // Map grid position to lon/lat
+      const lon = (gx / gridWidth) * 2 * Math.PI - Math.PI;
+      const lat = (1 - gy / gridHeight) * Math.PI - Math.PI / 2;
+
+      // Find nearest sphere face via bucket search
+      const bLon = Math.floor(((lon + Math.PI) / (2 * Math.PI)) * lonBuckets) % lonBuckets;
+      const bLat = minmax(Math.floor(((lat + Math.PI / 2) / Math.PI) * latBuckets), 0, latBuckets - 1);
+
+      let bestFace = -1;
+      let bestDist = Infinity;
+
+      // Search nearby buckets (3x3 neighborhood)
+      for (let dlat = -1; dlat <= 1; dlat++) {
+        for (let dlon = -1; dlon <= 1; dlon++) {
+          const bl = bLat + dlat;
+          if (bl < 0 || bl >= latBuckets) continue;
+          const bln = ((bLon + dlon) % lonBuckets + lonBuckets) % lonBuckets;
+          const bucket = buckets[bl * lonBuckets + bln];
+
+          for (const f of bucket) {
+            const [fLon, fLat] = faceLonLat[f];
+            // Angular distance with longitude wrapping
+            let dLon = lon - fLon;
+            if (dLon > Math.PI) dLon -= 2 * Math.PI;
+            else if (dLon < -Math.PI) dLon += 2 * Math.PI;
+            const dLat = lat - fLat;
+            const dist = dLon * dLon + dLat * dLat;
+            if (dist < bestDist) {
+              bestDist = dist;
+              bestFace = f;
+            }
+          }
+        }
+      }
+
+      if (bestFace === -1) {
+        // Fallback: brute force search (shouldn't happen with proper bucketing)
+        for (let f = 0; f < this.numSphereFaces; f++) {
+          const [fLon, fLat] = faceLonLat[f];
+          let dLon = lon - fLon;
+          if (dLon > Math.PI) dLon -= 2 * Math.PI;
+          else if (dLon < -Math.PI) dLon += 2 * Math.PI;
+          const dLat = lat - fLat;
+          const dist = dLon * dLon + dLat * dLat;
+          if (dist < bestDist) {
+            bestDist = dist;
+            bestFace = f;
+          }
+        }
+      }
+
+      gridElevations[gi] = this.elevations[bestFace];
+      gridPlateIds[gi] = this.plateAssignment[bestFace];
+    }
+
+    // Light smoothing to remove pixelation from sphere→grid sampling
+    // Only 1 pass with gentle blend to preserve peaks and valleys
+    {
+      const smoothed = new Float32Array(gridElevations);
+      for (let i = 0; i < this.numGridCells; i++) {
+        const neighbors = this.grid.cells.c[i];
+        if (!neighbors || neighbors.length === 0) continue;
+        let sum = 0;
+        for (const n of neighbors) sum += gridElevations[n];
+        smoothed[i] = gridElevations[i] * 0.8 + (sum / neighbors.length) * 0.2;
+      }
+      gridElevations.set(smoothed);
+    }
+
+    // Force top/bottom border cells to deep ocean (poles)
+    // Left/right edges are the projection seam — they should match naturally
+    const {cellsX, cellsY} = this.grid;
+    for (let i = 0; i < this.numGridCells; i++) {
+      if (!this.grid.cells.b[i]) continue;
+      const row = Math.floor(i / cellsX);
+      const isTopBottom = row === 0 || row === cellsY - 1;
+      if (isTopBottom) {
+        gridElevations[i] = Math.min(gridElevations[i], Math.floor(this.rng() * 6));
+      }
+    }
+
+    // Ensure left/right edge cells have matching elevations (same longitude on sphere)
+    for (let row = 0; row < cellsY; row++) {
+      const leftCell = row * cellsX;
+      const rightCell = row * cellsX + (cellsX - 1);
+      const avg = (gridElevations[leftCell] + gridElevations[rightCell]) / 2;
+      gridElevations[leftCell] = avg;
+      gridElevations[rightCell] = avg;
+    }
+
+    // ---- Sea level adjustment ----
+    // Shift elevations to control land/water balance
+    // Positive seaLevel = more water, negative = more land
+    const seaLevelShift = this.config.seaLevel;
+    if (seaLevelShift !== 0) {
+      for (let i = 0; i < this.numGridCells; i++) {
+        gridElevations[i] -= seaLevelShift;
+      }
+    }
+
+    // ---- Fractal coastline perturbation ----
+    // Add noise near coastlines to create irregular, fractal-like edges
+    this.applyCoastalFractal(gridElevations);
+
+    // Clamp and quantize to final heightmap
+    const heights = new Uint8Array(this.numGridCells);
+    for (let i = 0; i < this.numGridCells; i++) {
+      heights[i] = minmax(Math.round(gridElevations[i]), 0, 100);
+    }
+
+    // Compute metadata on the grid
+    const roughness = new Float32Array(this.numGridCells);
+    const boundaryType = new Int8Array(this.numGridCells);
+    const isOceanicArr = new Uint8Array(this.numGridCells);
+
+    // Detect grid-level boundaries by checking plate assignment changes
+    const gridBoundaryFlags = new Uint8Array(this.numGridCells);
+    const gridBoundaryConv = new Float32Array(this.numGridCells);
+
+    for (let i = 0; i < this.numGridCells; i++) {
+      const pid = gridPlateIds[i];
+      if (pid >= 0) {
+        isOceanicArr[i] = this.plates[pid].isOceanic ? 1 : 0;
+      }
+      for (const n of this.grid.cells.c[i]) {
+        if (gridPlateIds[n] !== pid && gridPlateIds[n] >= 0 && pid >= 0) {
+          gridBoundaryFlags[i] = 1;
+          // Find the boundary convergence for this pair
+          const a = Math.min(pid, gridPlateIds[n]);
+          const b = Math.max(pid, gridPlateIds[n]);
+          for (const boundary of this.boundaries) {
+            if (boundary.plateA === a && boundary.plateB === b) {
+              gridBoundaryConv[i] = boundary.convergence;
+              break;
+            }
+          }
+          break;
+        }
+      }
+    }
+
+    // BFS distance from boundaries for roughness
+    const distFromBoundary = new Float32Array(this.numGridCells).fill(Infinity);
+    const bfsQueue: number[] = [];
+
+    for (let i = 0; i < this.numGridCells; i++) {
+      if (gridBoundaryFlags[i]) {
+        distFromBoundary[i] = 0;
+        bfsQueue.push(i);
+        const conv = gridBoundaryConv[i];
+        if (conv > 0.3) boundaryType[i] = 1;
+        else if (conv < -0.3) boundaryType[i] = -1;
+        else boundaryType[i] = 2;
+      }
+    }
+
+    let bfsIdx = 0;
+    while (bfsIdx < bfsQueue.length) {
+      const cell = bfsQueue[bfsIdx++];
+      for (const n of this.grid.cells.c[cell]) {
+        const newDist = distFromBoundary[cell] + 1;
+        if (newDist < distFromBoundary[n]) {
+          distFromBoundary[n] = newDist;
+          bfsQueue.push(n);
+        }
+      }
+    }
+
+    const maxDecayDist = 10;
+    for (let i = 0; i < this.numGridCells; i++) {
+      if (distFromBoundary[i] === 0) {
+        const absConv = Math.abs(gridBoundaryConv[i]);
+        roughness[i] = minmax(0.5 + absConv * 0.5, 0.1, 1.0);
+      } else if (distFromBoundary[i] < maxDecayDist) {
+        const factor = 1.0 - distFromBoundary[i] / maxDecayDist;
+        roughness[i] = 0.1 + factor * 0.5;
+      } else {
+        roughness[i] = 0.1 + this.rng() * 0.1;
+      }
+    }
+
+    const metadata: TectonicMetadata = {
+      plateIds: new Uint8Array(gridPlateIds.buffer.slice(0)),
+      boundaryType,
+      roughness,
+      isOceanic: isOceanicArr,
+      plates: this.plates,
+      boundaries: this.boundaries
+    };
+
+    this.logDiagnostics(heights);
+
+    return {heights, metadata};
+  }
+
+  private logDiagnostics(heights: Uint8Array): void {
+    const n = heights.length;
+
+    // Basic stats
+    let min = 100, max = 0, sum = 0;
+    const histogram = new Array(10).fill(0); // 10 buckets of 10
+    let waterCount = 0, landCount = 0;
+
+    for (let i = 0; i < n; i++) {
+      const h = heights[i];
+      if (h < min) min = h;
+      if (h > max) max = h;
+      sum += h;
+      histogram[Math.min(Math.floor(h / 10), 9)]++;
+      if (h < 20) waterCount++;
+      else landCount++;
+    }
+
+    // Sphere-level stats (pre-projection)
+    let sphereMin = Infinity, sphereMax = -Infinity;
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      if (this.elevations[i] < sphereMin) sphereMin = this.elevations[i];
+      if (this.elevations[i] > sphereMax) sphereMax = this.elevations[i];
+    }
+
+    // Plate breakdown
+    const plateStats: string[] = [];
+    for (const plate of this.plates) {
+      const type = plate.isOceanic ? "oceanic" : "continental";
+      plateStats.push(`  Plate ${plate.id}: ${type}, ${plate.cells.size} faces, base=${plate.baseElevation.toFixed(1)}`);
+    }
+
+    // Boundary breakdown
+    const boundaryStats: string[] = [];
+    const subtypeCounts: Record<string, number> = {};
+    for (const b of this.boundaries) {
+      subtypeCounts[b.subtype] = (subtypeCounts[b.subtype] || 0) + 1;
+    }
+    for (const [subtype, count] of Object.entries(subtypeCounts)) {
+      boundaryStats.push(`  ${subtype}: ${count} boundaries`);
+    }
+
+    console.log(`
+╔══════════════════════════════════════════════════════╗
+║         TECTONIC HEIGHTMAP DIAGNOSTICS               ║
+╠══════════════════════════════════════════════════════╣
+║ SPHERE                                               ║
+║   Faces: ${this.numSphereFaces.toString().padEnd(43)}║
+║   Elevation range: ${sphereMin.toFixed(1)} — ${sphereMax.toFixed(1)}${" ".repeat(Math.max(0, 30 - `${sphereMin.toFixed(1)} — ${sphereMax.toFixed(1)}`.length))}║
+║                                                      ║
+║ GRID OUTPUT (0-100 scale, sea level = 20)            ║
+║   Cells: ${n.toString().padEnd(43)}║
+║   Height range: ${min} — ${max}${" ".repeat(Math.max(0, 35 - `${min} — ${max}`.length))}║
+║   Mean height: ${(sum / n).toFixed(1).padEnd(37)}║
+║   Water cells: ${waterCount} (${(waterCount / n * 100).toFixed(1)}%)${" ".repeat(Math.max(0, 30 - `${waterCount} (${(waterCount / n * 100).toFixed(1)}%)`.length))}║
+║   Land cells:  ${landCount} (${(landCount / n * 100).toFixed(1)}%)${" ".repeat(Math.max(0, 30 - `${landCount} (${(landCount / n * 100).toFixed(1)}%)`.length))}║
+║                                                      ║
+║ HEIGHT DISTRIBUTION                                  ║
+║   0-9:   ${histogram[0].toString().padStart(6)} ${"█".repeat(Math.round(histogram[0] / n * 50)).padEnd(30)}║
+║   10-19: ${histogram[1].toString().padStart(6)} ${"█".repeat(Math.round(histogram[1] / n * 50)).padEnd(30)}║
+║   20-29: ${histogram[2].toString().padStart(6)} ${"█".repeat(Math.round(histogram[2] / n * 50)).padEnd(30)}║
+║   30-39: ${histogram[3].toString().padStart(6)} ${"█".repeat(Math.round(histogram[3] / n * 50)).padEnd(30)}║
+║   40-49: ${histogram[4].toString().padStart(6)} ${"█".repeat(Math.round(histogram[4] / n * 50)).padEnd(30)}║
+║   50-59: ${histogram[5].toString().padStart(6)} ${"█".repeat(Math.round(histogram[5] / n * 50)).padEnd(30)}║
+║   60-69: ${histogram[6].toString().padStart(6)} ${"█".repeat(Math.round(histogram[6] / n * 50)).padEnd(30)}║
+║   70-79: ${histogram[7].toString().padStart(6)} ${"█".repeat(Math.round(histogram[7] / n * 50)).padEnd(30)}║
+║   80-89: ${histogram[8].toString().padStart(6)} ${"█".repeat(Math.round(histogram[8] / n * 50)).padEnd(30)}║
+║   90-100:${histogram[9].toString().padStart(6)} ${"█".repeat(Math.round(histogram[9] / n * 50)).padEnd(30)}║
+║                                                      ║
+║ PLATES (${this.plates.length})                                          ║
+${plateStats.map(s => `║${s.padEnd(54)}║`).join("\n")}
+║                                                      ║
+║ BOUNDARIES                                           ║
+${boundaryStats.map(s => `║${s.padEnd(54)}║`).join("\n")}
+╚══════════════════════════════════════════════════════╝
+`);
+  }
+
+  // ---- Vector math utilities ----
+
+  private normalize3(v: [number, number, number]): [number, number, number] {
+    const len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+    if (len === 0) return [0, 1, 0];
+    return [v[0] / len, v[1] / len, v[2] / len];
+  }
+
+  private cross(a: [number, number, number], b: [number, number, number]): [number, number, number] {
+    return [
+      a[1] * b[2] - a[2] * b[1],
+      a[2] * b[0] - a[0] * b[2],
+      a[0] * b[1] - a[1] * b[0]
+    ];
+  }
+
+  private length3(v: [number, number, number]): number {
+    return Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+  }
+}
diff --git a/src/types/TectonicMetadata.ts b/src/types/TectonicMetadata.ts
new file mode 100644
index 00000000..21f890df
--- /dev/null
+++ b/src/types/TectonicMetadata.ts
@@ -0,0 +1,60 @@
+export interface TectonicPlate {
+  id: number;
+  cells: Set<number>;
+  isOceanic: boolean;
+  velocity: [number, number, number]; // 3D velocity vector on sphere surface
+  baseElevation: number;
+  seedCell: number;
+}
+
+export type BoundarySubtype =
+  | "cont-cont"
+  | "ocean-cont"
+  | "ocean-ocean"
+  | "cont-rift"
+  | "ocean-rift"
+  | "transform";
+
+export interface PlateBoundary {
+  plateA: number;
+  plateB: number;
+  cells: number[];
+  convergence: number;
+  subtype: BoundarySubtype;
+}
+
+export interface TectonicConfig {
+  plateCount: number;
+  continentalRatio: number;
+  collisionIntensity: number;
+  noiseLevel: number;
+  hotspotCount: number;
+  smoothingPasses: number;
+  erosionPasses: number;
+  seaLevel: number; // elevation shift: 0 = default, positive = more water, negative = more land
+}
+
+export const DEFAULT_TECTONIC_CONFIG: TectonicConfig = {
+  plateCount: 12,
+  continentalRatio: 0.35,
+  collisionIntensity: 1.0,
+  noiseLevel: 0.3,
+  hotspotCount: 3,
+  smoothingPasses: 3,
+  erosionPasses: 2,
+  seaLevel: 0
+};
+
+export interface TectonicMetadata {
+  plateIds: Uint8Array;
+  boundaryType: Int8Array;
+  roughness: Float32Array;
+  isOceanic: Uint8Array;
+  plates: TectonicPlate[];
+  boundaries: PlateBoundary[];
+}
+
+declare global {
+  var tectonicMetadata: TectonicMetadata | null;
+  var tectonicGenerator: import("../modules/tectonic-generator").TectonicPlateGenerator | null;
+}
diff --git a/src/types/global.ts b/src/types/global.ts
index efc45d7c..1534bf8e 100644
--- a/src/types/global.ts
+++ b/src/types/global.ts
@@ -15,6 +15,7 @@ declare global {
   var options: any;
 
   var heightmapTemplates: any;
+  var tectonicTemplates: any;
   var Routes: any;
   var populationRate: number;
   var urbanDensity: number;

From d2b9dd119b99bf900ae106bd2ef97134f9a5cd0d Mon Sep 17 00:00:00 2001
From: Dobidop <67412288+Dobidop@users.noreply.github.com>
Date: Sun, 22 Mar 2026 12:17:56 +0100
Subject: [PATCH 2/8] improved tectonic edit UI

---
 public/modules/ui/tectonic-editor.js | 457 ++++++++++++++++-----------
 src/index.html                       |   4 +-
 2 files changed, 273 insertions(+), 188 deletions(-)

diff --git a/public/modules/ui/tectonic-editor.js b/public/modules/ui/tectonic-editor.js
index fe60402e..538c7c93 100644
--- a/public/modules/ui/tectonic-editor.js
+++ b/public/modules/ui/tectonic-editor.js
@@ -1,10 +1,11 @@
 "use strict";
 
 // Tectonic Plate Editor
-// Visualizes tectonic plates and allows editing plate properties (type, velocity)
-// then regenerates terrain from the modified plate configuration
+// Click plates to select & edit, drag arrows to set velocity/direction
 
 let tectonicViewMode = "plates"; // "plates" or "heights"
+let tectonicPlateColors = [];
+let tectonicSelectedPlate = -1;
 
 function editTectonics() {
   if (customization) return tip("Please exit the customization mode first", false, "error");
@@ -15,18 +16,18 @@ function editTectonics() {
 
   closeDialogs(".stable");
   tectonicViewMode = "plates";
+  tectonicSelectedPlate = -1;
 
   const plates = window.tectonicGenerator.getPlates();
-  const plateIds = window.tectonicMetadata.plateIds;
-  const plateColors = generatePlateColors(plates.length);
+  tectonicPlateColors = generatePlateColors(plates.length);
 
-  drawPlateOverlay(plateIds, plateColors, plates);
-  buildPlateList(plates, plateColors);
+  drawPlateOverlay();
+  closePlatePopup();
 
   $("#tectonicEditor").dialog({
     title: "Tectonic Plate Editor",
     resizable: false,
-    width: "22em",
+    width: "20em",
     position: {my: "right top", at: "right-10 top+10", of: "svg"},
     close: closeTectonicEditor
   });
@@ -51,80 +52,80 @@ function generatePlateColors(count) {
   return colors;
 }
 
-// Height-to-color function matching FMG's heightmap editor
 function tectonicHeightColor(h) {
   if (h < 20) {
-    // Ocean: deep blue to light blue
     const t = h / 20;
-    const r = Math.round(30 + t * 40);
-    const g = Math.round(60 + t * 80);
-    const b = Math.round(120 + t * 100);
-    return `rgb(${r},${g},${b})`;
-  } else {
-    // Land: green to brown to white
-    const t = (h - 20) / 80;
-    if (t < 0.3) {
-      const s = t / 0.3;
-      return `rgb(${Math.round(80 + s * 60)},${Math.round(160 + s * 40)},${Math.round(60 + s * 20)})`;
-    } else if (t < 0.7) {
-      const s = (t - 0.3) / 0.4;
-      return `rgb(${Math.round(140 + s * 60)},${Math.round(200 - s * 80)},${Math.round(80 - s * 40)})`;
-    } else {
-      const s = (t - 0.7) / 0.3;
-      return `rgb(${Math.round(200 + s * 55)},${Math.round(120 + s * 135)},${Math.round(40 + s * 215)})`;
-    }
+    return `rgb(${Math.round(30 + t * 40)},${Math.round(60 + t * 80)},${Math.round(120 + t * 100)})`;
   }
+  const t = (h - 20) / 80;
+  if (t < 0.3) {
+    const s = t / 0.3;
+    return `rgb(${Math.round(80 + s * 60)},${Math.round(160 + s * 40)},${Math.round(60 + s * 20)})`;
+  }
+  if (t < 0.7) {
+    const s = (t - 0.3) / 0.4;
+    return `rgb(${Math.round(140 + s * 60)},${Math.round(200 - s * 80)},${Math.round(80 - s * 40)})`;
+  }
+  const s = (t - 0.7) / 0.3;
+  return `rgb(${Math.round(200 + s * 55)},${Math.round(120 + s * 135)},${Math.round(40 + s * 215)})`;
 }
 
-function drawPlateOverlay(plateIds, plateColors, plates) {
+// ---- Overlay Drawing ----
+
+function drawPlateOverlay() {
+  const plates = window.tectonicGenerator.getPlates();
+  const plateIds = window.tectonicMetadata.plateIds;
+  const colors = tectonicPlateColors;
+
   viewbox.select("#tectonicOverlay").remove();
   const overlay = viewbox.insert("g", "#terrs").attr("id", "tectonicOverlay");
-  const numCells = plateIds.length;
 
-  for (let i = 0; i < numCells; i++) {
+  // Cell polygons
+  const cellGroup = overlay.append("g").attr("id", "plateCells");
+  for (let i = 0; i < plateIds.length; i++) {
     const pid = plateIds[i];
     if (pid < 0 || pid >= plates.length) continue;
-
     const points = getGridPolygon(i);
     if (!points) continue;
 
-    overlay.append("polygon")
+    const selected = pid === tectonicSelectedPlate;
+    cellGroup.append("polygon")
       .attr("points", points)
-      .attr("fill", plateColors[pid])
-      .attr("fill-opacity", 0.35)
-      .attr("stroke", plateColors[pid])
-      .attr("stroke-opacity", 0.5)
+      .attr("fill", colors[pid])
+      .attr("fill-opacity", tectonicSelectedPlate === -1 ? 0.35 : (selected ? 0.55 : 0.15))
+      .attr("stroke", colors[pid])
+      .attr("stroke-opacity", 0.4)
       .attr("stroke-width", 0.2)
       .attr("data-plate", pid)
-      .on("click", function () {
-        highlightPlate(pid, plateColors);
-      });
+      .on("click", function () { selectPlate(pid); });
   }
 
-  drawVelocityArrows(overlay, plates, plateIds, plateColors);
+  // Velocity arrows (draggable)
+  drawVelocityArrows(overlay, plates, plateIds, colors);
 }
 
 function drawHeightOverlay(heights) {
   viewbox.select("#tectonicOverlay").remove();
   const overlay = viewbox.insert("g", "#terrs").attr("id", "tectonicOverlay");
-  const numCells = heights.length;
 
-  for (let i = 0; i < numCells; i++) {
+  for (let i = 0; i < heights.length; i++) {
     const points = getGridPolygon(i);
     if (!points) continue;
-
+    const c = tectonicHeightColor(heights[i]);
     overlay.append("polygon")
       .attr("points", points)
-      .attr("fill", tectonicHeightColor(heights[i]))
+      .attr("fill", c)
       .attr("fill-opacity", 0.85)
-      .attr("stroke", tectonicHeightColor(heights[i]))
+      .attr("stroke", c)
       .attr("stroke-opacity", 0.5)
       .attr("stroke-width", 0.1);
   }
 }
 
-function drawVelocityArrows(overlay, plates, plateIds, plateColors) {
+function drawVelocityArrows(overlay, plates, plateIds, colors) {
+  ensureArrowheadMarker();
   const arrowGroup = overlay.append("g").attr("id", "velocityArrows");
+  const arrowScale = 30;
 
   for (const plate of plates) {
     const centroid = computeGridPlateCentroid(plate.id, plateIds);
@@ -132,196 +133,285 @@ function drawVelocityArrows(overlay, plates, plateIds, plateColors) {
 
     const [cx, cy] = centroid;
     const vel = plate.velocity;
-    const arrowScale = 30;
     const dx = vel[0] * arrowScale;
     const dy = -vel[1] * arrowScale;
     const mag = Math.sqrt(dx * dx + dy * dy);
-    if (mag < 2) continue;
 
+    const tipX = cx + dx;
+    const tipY = cy + dy;
+
+    // Arrow line
     arrowGroup.append("line")
+      .attr("class", "velocityLine")
+      .attr("data-plate", plate.id)
       .attr("x1", cx).attr("y1", cy)
-      .attr("x2", cx + dx).attr("y2", cy + dy)
-      .attr("stroke", plateColors[plate.id])
-      .attr("stroke-width", 2)
+      .attr("x2", tipX).attr("y2", tipY)
+      .attr("stroke", colors[plate.id])
+      .attr("stroke-width", mag < 2 ? 1 : 2)
       .attr("stroke-opacity", 0.9)
+      .attr("stroke-dasharray", mag < 2 ? "2,2" : "none")
       .attr("marker-end", "url(#tectonicArrowhead)");
 
+    // Draggable handle at arrow tip
+    arrowGroup.append("circle")
+      .attr("class", "velocityHandle")
+      .attr("data-plate", plate.id)
+      .attr("cx", tipX).attr("cy", tipY)
+      .attr("r", 5)
+      .attr("fill", colors[plate.id])
+      .attr("fill-opacity", 0.7)
+      .attr("stroke", "#fff")
+      .attr("stroke-width", 1)
+      .attr("cursor", "grab")
+      .call(d3.drag()
+        .on("start", function () { d3.select(this).attr("cursor", "grabbing"); })
+        .on("drag", function () { dragVelocityHandle(this, plate, cx, cy, arrowScale); })
+        .on("end", function () { d3.select(this).attr("cursor", "grab"); })
+      );
+
+    // Plate label
     arrowGroup.append("text")
-      .attr("x", cx).attr("y", cy - 5)
+      .attr("x", cx).attr("y", cy - 6)
       .attr("text-anchor", "middle")
       .attr("font-size", "8px")
-      .attr("fill", plateColors[plate.id])
+      .attr("fill", colors[plate.id])
       .attr("stroke", "#000")
       .attr("stroke-width", 0.3)
       .attr("paint-order", "stroke")
-      .text(`P${plate.id}`);
+      .attr("cursor", "pointer")
+      .text(`P${plate.id}`)
+      .on("click", function () { selectPlate(plate.id); });
   }
+}
 
-  if (!document.getElementById("tectonicArrowhead")) {
-    const defs = d3.select("svg").select("defs");
-    defs.append("marker")
-      .attr("id", "tectonicArrowhead")
-      .attr("viewBox", "0 0 10 10")
-      .attr("refX", 8).attr("refY", 5)
-      .attr("markerWidth", 6).attr("markerHeight", 6)
-      .attr("orient", "auto-start-reverse")
-      .append("path")
-      .attr("d", "M 0 0 L 10 5 L 0 10 z")
-      .attr("fill", "#fff")
-      .attr("stroke", "#333")
-      .attr("stroke-width", 0.5);
+function dragVelocityHandle(handle, plate, cx, cy, arrowScale) {
+  const [mx, my] = d3.mouse(viewbox.node());
+
+  // Update handle position
+  d3.select(handle).attr("cx", mx).attr("cy", my);
+
+  // Update arrow line
+  viewbox.select(`.velocityLine[data-plate="${plate.id}"]`)
+    .attr("x2", mx).attr("y2", my);
+
+  // Compute new velocity from drag position
+  const dx = mx - cx;
+  const dy = my - cy;
+  plate.velocity[0] = dx / arrowScale;
+  plate.velocity[1] = -dy / arrowScale; // flip Y
+  plate.velocity[2] = 0;
+
+  // Update popup if this plate is selected
+  if (tectonicSelectedPlate === plate.id) {
+    updatePopupValues(plate);
   }
 }
 
+function ensureArrowheadMarker() {
+  if (document.getElementById("tectonicArrowhead")) return;
+  d3.select("svg").select("defs").append("marker")
+    .attr("id", "tectonicArrowhead")
+    .attr("viewBox", "0 0 10 10")
+    .attr("refX", 8).attr("refY", 5)
+    .attr("markerWidth", 6).attr("markerHeight", 6)
+    .attr("orient", "auto-start-reverse")
+    .append("path")
+    .attr("d", "M 0 0 L 10 5 L 0 10 z")
+    .attr("fill", "#fff")
+    .attr("stroke", "#333")
+    .attr("stroke-width", 0.5);
+}
+
 function computeGridPlateCentroid(plateId, plateIds) {
   let sumX = 0, sumY = 0, count = 0;
   for (let i = 0; i < plateIds.length; i++) {
     if (plateIds[i] !== plateId) continue;
-    const [x, y] = grid.points[i];
-    sumX += x;
-    sumY += y;
+    sumX += grid.points[i][0];
+    sumY += grid.points[i][1];
     count++;
   }
   if (count === 0) return null;
   return [sumX / count, sumY / count];
 }
 
-function highlightPlate(plateId, plateColors) {
-  viewbox.select("#tectonicOverlay").selectAll("polygon")
+// ---- Plate Selection & Popup ----
+
+function selectPlate(plateId) {
+  const plates = window.tectonicGenerator.getPlates();
+  if (plateId < 0 || plateId >= plates.length) return;
+
+  tectonicSelectedPlate = plateId;
+
+  // Update overlay opacity to highlight selected plate
+  viewbox.select("#plateCells").selectAll("polygon")
     .attr("fill-opacity", function () {
-      return +this.getAttribute("data-plate") === plateId ? 0.6 : 0.15;
+      return +this.getAttribute("data-plate") === plateId ? 0.55 : 0.15;
     });
 
-  const row = byId(`tectonicPlate_${plateId}`);
-  if (row) {
-    row.scrollIntoView({behavior: "smooth", block: "nearest"});
-    row.style.outline = "2px solid " + plateColors[plateId];
-    setTimeout(() => row.style.outline = "", 1500);
-  }
+  showPlatePopup(plates[plateId]);
 }
 
-function buildPlateList(plates, plateColors) {
-  const container = byId("tectonicPlateList");
-  container.innerHTML = "";
+function showPlatePopup(plate) {
+  closePlatePopup();
 
-  const table = document.createElement("table");
-  table.style.width = "100%";
-  table.style.borderCollapse = "collapse";
-  table.style.fontSize = "11px";
+  const plateIds = window.tectonicMetadata.plateIds;
+  const centroid = computeGridPlateCentroid(plate.id, plateIds);
+  if (!centroid) return;
 
-  const header = document.createElement("tr");
-  header.innerHTML = `
-    <th style="width:30px">ID</th>
-    <th style="width:60px">Type</th>
-    <th>Velocity</th>
-    <th style="width:50px">Dir</th>
+  // Count cells
+  let cellCount = 0;
+  for (let i = 0; i < plateIds.length; i++) {
+    if (plateIds[i] === plate.id) cellCount++;
+  }
+  const pct = (cellCount / plateIds.length * 100).toFixed(1);
+
+  const vel = plate.velocity;
+  const speed = Math.sqrt(vel[0] ** 2 + vel[1] ** 2 + vel[2] ** 2);
+  const dirDeg = Math.round(Math.atan2(-vel[1], vel[0]) * 180 / Math.PI);
+  const color = tectonicPlateColors[plate.id];
+
+  const popup = document.createElement("div");
+  popup.id = "tectonicPlatePopup";
+  popup.style.cssText = `
+    position: absolute; z-index: 1000;
+    background: rgba(30,30,30,0.95); color: #eee;
+    border: 2px solid ${color}; border-radius: 6px;
+    padding: 10px 14px; font-size: 12px;
+    min-width: 180px; pointer-events: auto;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
   `;
-  table.appendChild(header);
 
-  for (const plate of plates) {
-    const row = document.createElement("tr");
-    row.id = `tectonicPlate_${plate.id}`;
-    row.style.borderBottom = "1px solid #444";
-    row.style.cursor = "pointer";
+  popup.innerHTML = `
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
+      <strong style="color:${color}">Plate ${plate.id}</strong>
+      <span style="font-size:10px;color:#999">${cellCount} cells (${pct}%)</span>
+    </div>
+    <div style="margin-bottom:6px">
+      <label style="font-size:11px">Type: </label>
+      <select id="popupPlateType" style="font-size:11px;margin-left:4px">
+        <option value="continental" ${!plate.isOceanic ? "selected" : ""}>Continental</option>
+        <option value="oceanic" ${plate.isOceanic ? "selected" : ""}>Oceanic</option>
+      </select>
+    </div>
+    <div style="margin-bottom:6px">
+      <label style="font-size:11px">Speed: </label>
+      <input id="popupPlateSpeed" type="range" min="0" max="1.5" step="0.05" value="${speed.toFixed(2)}"
+        style="width:80px;vertical-align:middle">
+      <span id="popupSpeedLabel" style="font-size:10px">${speed.toFixed(2)}</span>
+    </div>
+    <div style="margin-bottom:8px">
+      <label style="font-size:11px">Direction: </label>
+      <input id="popupPlateDir" type="range" min="-180" max="180" step="5" value="${dirDeg}"
+        style="width:80px;vertical-align:middle">
+      <span id="popupDirLabel" style="font-size:10px">${dirDeg}&deg;</span>
+    </div>
+    <div style="font-size:10px;color:#888;text-align:center">
+      Drag the arrow on the map to set velocity
+    </div>
+  `;
 
-    const vel = plate.velocity;
-    const speed = Math.sqrt(vel[0] * vel[0] + vel[1] * vel[1] + vel[2] * vel[2]).toFixed(2);
-    const dirDeg = Math.round(Math.atan2(-vel[1], vel[0]) * 180 / Math.PI);
+  document.body.appendChild(popup);
 
-    row.innerHTML = `
-      <td style="text-align:center">
-        <span style="display:inline-block;width:12px;height:12px;background:${plateColors[plate.id]};border-radius:2px;vertical-align:middle"></span>
-        ${plate.id}
-      </td>
-      <td>
-        <select data-plate="${plate.id}" class="plateTypeSelect" style="font-size:10px;width:100%">
-          <option value="continental" ${!plate.isOceanic ? "selected" : ""}>Land</option>
-          <option value="oceanic" ${plate.isOceanic ? "selected" : ""}>Ocean</option>
-        </select>
-      </td>
-      <td style="text-align:center">
-        <input type="range" data-plate="${plate.id}" class="plateSpeedRange"
-          min="0" max="1.5" step="0.05" value="${speed}"
-          style="width:60px;vertical-align:middle">
-        <span class="plateSpeedLabel" style="font-size:9px">${speed}</span>
-      </td>
-      <td style="text-align:center">
-        <input type="number" data-plate="${plate.id}" class="plateDirInput"
-          min="-180" max="180" step="15" value="${dirDeg}"
-          style="width:45px;font-size:10px">
-      </td>
-    `;
+  // Position popup near the plate centroid but in screen coords
+  const svgRect = document.querySelector("svg").getBoundingClientRect();
+  const svgEl = document.querySelector("svg");
+  const ctm = svgEl.getScreenCTM();
+  const screenX = centroid[0] * ctm.a + ctm.e;
+  const screenY = centroid[1] * ctm.d + ctm.f;
 
-    row.addEventListener("click", (e) => {
-      if (e.target.tagName === "SELECT" || e.target.tagName === "INPUT") return;
-      highlightPlate(plate.id, plateColors);
-    });
+  popup.style.left = Math.min(screenX + 20, window.innerWidth - 220) + "px";
+  popup.style.top = Math.max(screenY - 60, 10) + "px";
 
-    table.appendChild(row);
-  }
-
-  container.appendChild(table);
-
-  container.querySelectorAll(".plateTypeSelect").forEach(select => {
-    select.addEventListener("change", function () {
-      const pid = +this.getAttribute("data-plate");
-      plates[pid].isOceanic = this.value === "oceanic";
-    });
+  // Listeners
+  byId("popupPlateType").addEventListener("change", function () {
+    plate.isOceanic = this.value === "oceanic";
   });
 
-  container.querySelectorAll(".plateSpeedRange").forEach(slider => {
-    slider.addEventListener("input", function () {
-      const pid = +this.getAttribute("data-plate");
-      const plate = plates[pid];
-      const newSpeed = +this.value;
-      this.parentElement.querySelector(".plateSpeedLabel").textContent = newSpeed.toFixed(2);
-
-      const oldSpeed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
-      if (oldSpeed > 0.001) {
-        const scale = newSpeed / oldSpeed;
-        plate.velocity[0] *= scale;
-        plate.velocity[1] *= scale;
-        plate.velocity[2] *= scale;
-      } else {
-        plate.velocity[0] = newSpeed;
-        plate.velocity[1] = 0;
-        plate.velocity[2] = 0;
-      }
-    });
-  });
-
-  container.querySelectorAll(".plateDirInput").forEach(input => {
-    input.addEventListener("change", function () {
-      const pid = +this.getAttribute("data-plate");
-      const plate = plates[pid];
-      const dirRad = (+this.value) * Math.PI / 180;
-      const speed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
-      plate.velocity[0] = Math.cos(dirRad) * speed;
-      plate.velocity[1] = -Math.sin(dirRad) * speed;
+  byId("popupPlateSpeed").addEventListener("input", function () {
+    const newSpeed = +this.value;
+    byId("popupSpeedLabel").textContent = newSpeed.toFixed(2);
+    const oldSpeed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
+    if (oldSpeed > 0.001) {
+      const s = newSpeed / oldSpeed;
+      plate.velocity[0] *= s;
+      plate.velocity[1] *= s;
+      plate.velocity[2] *= s;
+    } else {
+      plate.velocity[0] = newSpeed;
+      plate.velocity[1] = 0;
       plate.velocity[2] = 0;
-    });
+    }
+    redrawArrowForPlate(plate);
+  });
+
+  byId("popupPlateDir").addEventListener("input", function () {
+    const deg = +this.value;
+    byId("popupDirLabel").textContent = deg + "\u00B0";
+    const speed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
+    const rad = deg * Math.PI / 180;
+    plate.velocity[0] = Math.cos(rad) * speed;
+    plate.velocity[1] = -Math.sin(rad) * speed;
+    plate.velocity[2] = 0;
+    redrawArrowForPlate(plate);
   });
 }
 
+function updatePopupValues(plate) {
+  const speedEl = byId("popupPlateSpeed");
+  const dirEl = byId("popupPlateDir");
+  if (!speedEl || !dirEl) return;
+
+  const vel = plate.velocity;
+  const speed = Math.sqrt(vel[0] ** 2 + vel[1] ** 2 + vel[2] ** 2);
+  const dirDeg = Math.round(Math.atan2(-vel[1], vel[0]) * 180 / Math.PI);
+
+  speedEl.value = speed.toFixed(2);
+  byId("popupSpeedLabel").textContent = speed.toFixed(2);
+  dirEl.value = dirDeg;
+  byId("popupDirLabel").textContent = dirDeg + "\u00B0";
+}
+
+function redrawArrowForPlate(plate) {
+  const plateIds = window.tectonicMetadata.plateIds;
+  const centroid = computeGridPlateCentroid(plate.id, plateIds);
+  if (!centroid) return;
+
+  const arrowScale = 30;
+  const [cx, cy] = centroid;
+  const dx = plate.velocity[0] * arrowScale;
+  const dy = -plate.velocity[1] * arrowScale;
+  const tipX = cx + dx;
+  const tipY = cy + dy;
+
+  viewbox.select(`.velocityLine[data-plate="${plate.id}"]`)
+    .attr("x2", tipX).attr("y2", tipY);
+  viewbox.select(`.velocityHandle[data-plate="${plate.id}"]`)
+    .attr("cx", tipX).attr("cy", tipY);
+}
+
+function closePlatePopup() {
+  const popup = byId("tectonicPlatePopup");
+  if (popup) popup.remove();
+}
+
+// ---- Actions ----
+
 function regenerateFromEditor() {
   const generator = window.tectonicGenerator;
   if (!generator) return tip("No tectonic generator available", false, "error");
 
-  tip("Regenerating terrain from edited plates...", true, "warn");
+  tip("Regenerating terrain preview...", true, "warn");
+  closePlatePopup();
 
   setTimeout(() => {
     try {
       const result = generator.regenerate();
-
-      // Update grid heights
       grid.cells.h = result.heights;
       window.tectonicMetadata = result.metadata;
 
-      // Show the regenerated heightmap as a visual overlay
       tectonicViewMode = "heights";
       drawHeightOverlay(result.heights);
 
-      // Log changes for debugging
       let water = 0, land = 0, minH = 100, maxH = 0;
       for (let i = 0; i < result.heights.length; i++) {
         const h = result.heights[i];
@@ -329,9 +419,9 @@ function regenerateFromEditor() {
         if (h < minH) minH = h;
         if (h > maxH) maxH = h;
       }
-      console.log(`Tectonic regeneration: ${land} land (${(land / result.heights.length * 100).toFixed(1)}%), heights ${minH}-${maxH}`);
+      console.log(`Tectonic regen: ${land} land (${(land / result.heights.length * 100).toFixed(1)}%), heights ${minH}-${maxH}`);
 
-      tip("Terrain regenerated. Click 'Apply to Map' to regenerate the full map.", true, "success");
+      tip("Preview ready. Click 'Apply to Map' to rebuild.", true, "success");
     } catch (e) {
       console.error("Tectonic regeneration failed:", e);
       tip("Regeneration failed: " + e.message, false, "error");
@@ -342,7 +432,7 @@ function regenerateFromEditor() {
 function applyToMap() {
   if (!window.tectonicGenerator) return tip("No tectonic generator available", false, "error");
 
-  // Close the editor overlay
+  closePlatePopup();
   closeTectonicEditor();
   $("#tectonicEditor").dialog("close");
 
@@ -350,8 +440,6 @@ function applyToMap() {
 
   setTimeout(() => {
     try {
-      // grid.cells.h is already set by regenerateFromEditor
-      // Run the full downstream pipeline WITHOUT regenerating the heightmap
       undraw();
       pack = {};
 
@@ -415,21 +503,16 @@ function applyToMap() {
 }
 
 function togglePlateOverlay() {
-  const overlay = viewbox.select("#tectonicOverlay");
-
   if (tectonicViewMode === "heights") {
-    // Switch back to plate view
     tectonicViewMode = "plates";
-    const plates = window.tectonicGenerator.getPlates();
-    const plateColors = generatePlateColors(plates.length);
-    drawPlateOverlay(window.tectonicMetadata.plateIds, plateColors, plates);
+    tectonicSelectedPlate = -1;
+    drawPlateOverlay();
     return;
   }
 
+  const overlay = viewbox.select("#tectonicOverlay");
   if (overlay.empty()) {
-    const plates = window.tectonicGenerator.getPlates();
-    const plateColors = generatePlateColors(plates.length);
-    drawPlateOverlay(window.tectonicMetadata.plateIds, plateColors, plates);
+    drawPlateOverlay();
   } else {
     const visible = overlay.style("display") !== "none";
     overlay.style("display", visible ? "none" : null);
@@ -437,7 +520,9 @@ function togglePlateOverlay() {
 }
 
 function closeTectonicEditor() {
+  closePlatePopup();
   viewbox.select("#tectonicOverlay").remove();
   d3.select("#tectonicArrowhead").remove();
   tectonicViewMode = "plates";
+  tectonicSelectedPlate = -1;
 }
diff --git a/src/index.html b/src/index.html
index eee1e9c6..dac015ac 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4106,8 +4106,8 @@
       </div>
 
       <div id="tectonicEditor" class="dialog stable" style="display: none">
-        <div id="tectonicPlateList" style="max-height: 300px; overflow-y: auto"></div>
-        <div style="margin-top: 8px">
+        <p style="font-size:11px;margin:0 0 6px">Click a plate to edit. Drag arrows to set velocity.</p>
+        <div style="margin-top: 4px">
           <button id="tectonicRegenerate" data-tip="Regenerate terrain preview from edited plates">Regenerate Preview</button>
           <button id="tectonicApplyMap" data-tip="Apply changes and regenerate the full map">Apply to Map</button>
         </div>

From 7778c8ffdb0754fe7741a7c36383717ac6968deb Mon Sep 17 00:00:00 2001
From: Dobidop <67412288+Dobidop@users.noreply.github.com>
Date: Sun, 22 Mar 2026 14:41:40 +0100
Subject: [PATCH 3/8] Added tectonic painter editor

---
 public/modules/ui/tectonic-editor.js | 183 ++++++++++++++++++++++-----
 src/index.html                       |   9 +-
 src/modules/tectonic-generator.ts    |  26 ++++
 3 files changed, 185 insertions(+), 33 deletions(-)

diff --git a/public/modules/ui/tectonic-editor.js b/public/modules/ui/tectonic-editor.js
index 538c7c93..bd56eae2 100644
--- a/public/modules/ui/tectonic-editor.js
+++ b/public/modules/ui/tectonic-editor.js
@@ -2,10 +2,13 @@
 
 // Tectonic Plate Editor
 // Click plates to select & edit, drag arrows to set velocity/direction
+// Paint mode: brush to reassign cells between plates
 
 let tectonicViewMode = "plates"; // "plates" or "heights"
 let tectonicPlateColors = [];
 let tectonicSelectedPlate = -1;
+let tectonicPaintMode = false;
+let tectonicBrushRadius = 10;
 
 function editTectonics() {
   if (customization) return tip("Please exit the customization mode first", false, "error");
@@ -17,12 +20,14 @@ function editTectonics() {
   closeDialogs(".stable");
   tectonicViewMode = "plates";
   tectonicSelectedPlate = -1;
+  tectonicPaintMode = false;
 
   const plates = window.tectonicGenerator.getPlates();
   tectonicPlateColors = generatePlateColors(plates.length);
 
   drawPlateOverlay();
   closePlatePopup();
+  updatePaintButtonState();
 
   $("#tectonicEditor").dialog({
     title: "Tectonic Plate Editor",
@@ -38,9 +43,16 @@ function editTectonics() {
   byId("tectonicRegenerate").addEventListener("click", regenerateFromEditor);
   byId("tectonicToggleOverlay").addEventListener("click", togglePlateOverlay);
   byId("tectonicApplyMap").addEventListener("click", applyToMap);
+  byId("tectonicPaintToggle").addEventListener("click", togglePaintMode);
+  byId("tectonicBrushSize").addEventListener("input", function () {
+    tectonicBrushRadius = +this.value;
+    byId("tectonicBrushSizeLabel").textContent = this.value;
+  });
   byId("tectonicClose").addEventListener("click", () => $("#tectonicEditor").dialog("close"));
 }
 
+// ---- Color Utilities ----
+
 function generatePlateColors(count) {
   const colors = [];
   for (let i = 0; i < count; i++) {
@@ -80,7 +92,6 @@ function drawPlateOverlay() {
   viewbox.select("#tectonicOverlay").remove();
   const overlay = viewbox.insert("g", "#terrs").attr("id", "tectonicOverlay");
 
-  // Cell polygons
   const cellGroup = overlay.append("g").attr("id", "plateCells");
   for (let i = 0; i < plateIds.length; i++) {
     const pid = plateIds[i];
@@ -97,10 +108,12 @@ function drawPlateOverlay() {
       .attr("stroke-opacity", 0.4)
       .attr("stroke-width", 0.2)
       .attr("data-plate", pid)
-      .on("click", function () { selectPlate(pid); });
+      .attr("data-cell", i)
+      .on("click", function () {
+        if (!tectonicPaintMode) selectPlate(pid);
+      });
   }
 
-  // Velocity arrows (draggable)
   drawVelocityArrows(overlay, plates, plateIds, colors);
 }
 
@@ -136,11 +149,9 @@ function drawVelocityArrows(overlay, plates, plateIds, colors) {
     const dx = vel[0] * arrowScale;
     const dy = -vel[1] * arrowScale;
     const mag = Math.sqrt(dx * dx + dy * dy);
-
     const tipX = cx + dx;
     const tipY = cy + dy;
 
-    // Arrow line
     arrowGroup.append("line")
       .attr("class", "velocityLine")
       .attr("data-plate", plate.id)
@@ -152,7 +163,6 @@ function drawVelocityArrows(overlay, plates, plateIds, colors) {
       .attr("stroke-dasharray", mag < 2 ? "2,2" : "none")
       .attr("marker-end", "url(#tectonicArrowhead)");
 
-    // Draggable handle at arrow tip
     arrowGroup.append("circle")
       .attr("class", "velocityHandle")
       .attr("data-plate", plate.id)
@@ -169,7 +179,6 @@ function drawVelocityArrows(overlay, plates, plateIds, colors) {
         .on("end", function () { d3.select(this).attr("cursor", "grab"); })
       );
 
-    // Plate label
     arrowGroup.append("text")
       .attr("x", cx).attr("y", cy - 6)
       .attr("text-anchor", "middle")
@@ -186,25 +195,15 @@ function drawVelocityArrows(overlay, plates, plateIds, colors) {
 
 function dragVelocityHandle(handle, plate, cx, cy, arrowScale) {
   const [mx, my] = d3.mouse(viewbox.node());
-
-  // Update handle position
   d3.select(handle).attr("cx", mx).attr("cy", my);
-
-  // Update arrow line
   viewbox.select(`.velocityLine[data-plate="${plate.id}"]`)
     .attr("x2", mx).attr("y2", my);
 
-  // Compute new velocity from drag position
-  const dx = mx - cx;
-  const dy = my - cy;
-  plate.velocity[0] = dx / arrowScale;
-  plate.velocity[1] = -dy / arrowScale; // flip Y
+  plate.velocity[0] = (mx - cx) / arrowScale;
+  plate.velocity[1] = -(my - cy) / arrowScale;
   plate.velocity[2] = 0;
 
-  // Update popup if this plate is selected
-  if (tectonicSelectedPlate === plate.id) {
-    updatePopupValues(plate);
-  }
+  if (tectonicSelectedPlate === plate.id) updatePopupValues(plate);
 }
 
 function ensureArrowheadMarker() {
@@ -242,7 +241,6 @@ function selectPlate(plateId) {
 
   tectonicSelectedPlate = plateId;
 
-  // Update overlay opacity to highlight selected plate
   viewbox.select("#plateCells").selectAll("polygon")
     .attr("fill-opacity", function () {
       return +this.getAttribute("data-plate") === plateId ? 0.55 : 0.15;
@@ -258,7 +256,6 @@ function showPlatePopup(plate) {
   const centroid = computeGridPlateCentroid(plate.id, plateIds);
   if (!centroid) return;
 
-  // Count cells
   let cellCount = 0;
   for (let i = 0; i < plateIds.length; i++) {
     if (plateIds[i] === plate.id) cellCount++;
@@ -306,23 +303,19 @@ function showPlatePopup(plate) {
       <span id="popupDirLabel" style="font-size:10px">${dirDeg}&deg;</span>
     </div>
     <div style="font-size:10px;color:#888;text-align:center">
-      Drag the arrow on the map to set velocity
+      Drag arrow or use sliders &bull; Enable Paint to reshape
     </div>
   `;
 
   document.body.appendChild(popup);
 
-  // Position popup near the plate centroid but in screen coords
-  const svgRect = document.querySelector("svg").getBoundingClientRect();
   const svgEl = document.querySelector("svg");
   const ctm = svgEl.getScreenCTM();
   const screenX = centroid[0] * ctm.a + ctm.e;
   const screenY = centroid[1] * ctm.d + ctm.f;
-
   popup.style.left = Math.min(screenX + 20, window.innerWidth - 220) + "px";
   popup.style.top = Math.max(screenY - 60, 10) + "px";
 
-  // Listeners
   byId("popupPlateType").addEventListener("change", function () {
     plate.isOceanic = this.value === "oceanic";
   });
@@ -378,10 +371,8 @@ function redrawArrowForPlate(plate) {
 
   const arrowScale = 30;
   const [cx, cy] = centroid;
-  const dx = plate.velocity[0] * arrowScale;
-  const dy = -plate.velocity[1] * arrowScale;
-  const tipX = cx + dx;
-  const tipY = cy + dy;
+  const tipX = cx + plate.velocity[0] * arrowScale;
+  const tipY = cy + -plate.velocity[1] * arrowScale;
 
   viewbox.select(`.velocityLine[data-plate="${plate.id}"]`)
     .attr("x2", tipX).attr("y2", tipY);
@@ -394,14 +385,140 @@ function closePlatePopup() {
   if (popup) popup.remove();
 }
 
+// ---- Paint Mode ----
+
+function togglePaintMode() {
+  tectonicPaintMode = !tectonicPaintMode;
+  updatePaintButtonState();
+
+  if (tectonicPaintMode) {
+    if (tectonicSelectedPlate === -1) {
+      tip("Select a plate first (click on a plate), then paint to expand it", true, "warn");
+      tectonicPaintMode = false;
+      updatePaintButtonState();
+      return;
+    }
+    enterPaintMode();
+  } else {
+    exitPaintMode();
+  }
+}
+
+function updatePaintButtonState() {
+  const btn = byId("tectonicPaintToggle");
+  if (!btn) return;
+  btn.classList.toggle("pressed", tectonicPaintMode);
+  btn.textContent = tectonicPaintMode ? "Paint: ON" : "Paint";
+
+  const brushControls = byId("tectonicBrushControls");
+  if (brushControls) brushControls.style.display = tectonicPaintMode ? "block" : "none";
+}
+
+function enterPaintMode() {
+  tip(`Paint mode: drag on map to assign cells to Plate ${tectonicSelectedPlate}`, true, "warn");
+  viewbox.style("cursor", "crosshair");
+
+  // Add drag handler for painting
+  viewbox.call(
+    d3.drag()
+      .on("start", paintStart)
+      .on("drag", paintDrag)
+      .on("end", paintEnd)
+  );
+}
+
+function exitPaintMode() {
+  viewbox.style("cursor", "default");
+  // Restore default zoom behavior
+  viewbox.on(".drag", null);
+  svg.call(zoom);
+  removeBrushCircle();
+  clearMainTip();
+}
+
+function paintStart() {
+  if (!tectonicPaintMode || tectonicSelectedPlate === -1) return;
+  const [x, y] = d3.mouse(this);
+  paintCellsAt(x, y);
+}
+
+function paintDrag() {
+  if (!tectonicPaintMode || tectonicSelectedPlate === -1) return;
+  const [x, y] = d3.mouse(this);
+  moveBrushCircle(x, y);
+  paintCellsAt(x, y);
+}
+
+function paintEnd() {
+  if (!tectonicPaintMode) return;
+  removeBrushCircle();
+  // Redraw overlay to reflect changes
+  drawPlateOverlay();
+}
+
+function paintCellsAt(x, y) {
+  const r = tectonicBrushRadius;
+  const cellsInRadius = findGridAll(x, y, r);
+  if (!cellsInRadius || cellsInRadius.length === 0) return;
+
+  const generator = window.tectonicGenerator;
+  const plateIds = window.tectonicMetadata.plateIds;
+
+  // Reassign cells on the sphere
+  generator.reassignCells(cellsInRadius, tectonicSelectedPlate);
+
+  // Update grid-level metadata to match
+  for (const gc of cellsInRadius) {
+    plateIds[gc] = tectonicSelectedPlate;
+  }
+
+  // Update visual overlay for painted cells
+  const colors = tectonicPlateColors;
+  const cellGroup = viewbox.select("#plateCells");
+  for (const gc of cellsInRadius) {
+    const poly = cellGroup.select(`polygon[data-cell="${gc}"]`);
+    if (!poly.empty()) {
+      poly.attr("fill", colors[tectonicSelectedPlate])
+        .attr("stroke", colors[tectonicSelectedPlate])
+        .attr("data-plate", tectonicSelectedPlate)
+        .attr("fill-opacity", 0.55);
+    }
+  }
+}
+
+function moveBrushCircle(x, y) {
+  let circle = byId("tectonicBrushCircle");
+  if (!circle) {
+    const svg = viewbox.node().ownerSVGElement;
+    const ns = "http://www.w3.org/2000/svg";
+    circle = document.createElementNS(ns, "circle");
+    circle.id = "tectonicBrushCircle";
+    circle.setAttribute("fill", "none");
+    circle.setAttribute("stroke", tectonicPlateColors[tectonicSelectedPlate] || "#fff");
+    circle.setAttribute("stroke-width", "1.5");
+    circle.setAttribute("stroke-dasharray", "4,3");
+    circle.setAttribute("pointer-events", "none");
+    viewbox.node().appendChild(circle);
+  }
+  circle.setAttribute("cx", x);
+  circle.setAttribute("cy", y);
+  circle.setAttribute("r", tectonicBrushRadius);
+}
+
+function removeBrushCircle() {
+  const circle = byId("tectonicBrushCircle");
+  if (circle) circle.remove();
+}
+
 // ---- Actions ----
 
 function regenerateFromEditor() {
   const generator = window.tectonicGenerator;
   if (!generator) return tip("No tectonic generator available", false, "error");
 
-  tip("Regenerating terrain preview...", true, "warn");
+  if (tectonicPaintMode) { exitPaintMode(); tectonicPaintMode = false; updatePaintButtonState(); }
   closePlatePopup();
+  tip("Regenerating terrain preview...", true, "warn");
 
   setTimeout(() => {
     try {
@@ -432,6 +549,7 @@ function regenerateFromEditor() {
 function applyToMap() {
   if (!window.tectonicGenerator) return tip("No tectonic generator available", false, "error");
 
+  if (tectonicPaintMode) { exitPaintMode(); tectonicPaintMode = false; updatePaintButtonState(); }
   closePlatePopup();
   closeTectonicEditor();
   $("#tectonicEditor").dialog("close");
@@ -520,6 +638,7 @@ function togglePlateOverlay() {
 }
 
 function closeTectonicEditor() {
+  if (tectonicPaintMode) { exitPaintMode(); tectonicPaintMode = false; }
   closePlatePopup();
   viewbox.select("#tectonicOverlay").remove();
   d3.select("#tectonicArrowhead").remove();
diff --git a/src/index.html b/src/index.html
index dac015ac..097123af 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4108,10 +4108,17 @@
       <div id="tectonicEditor" class="dialog stable" style="display: none">
         <p style="font-size:11px;margin:0 0 6px">Click a plate to edit. Drag arrows to set velocity.</p>
         <div style="margin-top: 4px">
+          <button id="tectonicPaintToggle" data-tip="Toggle paint mode to reshape plates with a brush">Paint</button>
           <button id="tectonicRegenerate" data-tip="Regenerate terrain preview from edited plates">Regenerate Preview</button>
-          <button id="tectonicApplyMap" data-tip="Apply changes and regenerate the full map">Apply to Map</button>
+        </div>
+        <div id="tectonicBrushControls" style="display:none;margin-top:4px;font-size:11px">
+          <label>Brush size: </label>
+          <input id="tectonicBrushSize" type="range" min="3" max="40" step="1" value="10"
+            style="width:80px;vertical-align:middle">
+          <span id="tectonicBrushSizeLabel">10</span>
         </div>
         <div style="margin-top: 4px">
+          <button id="tectonicApplyMap" data-tip="Apply changes and regenerate the full map">Apply to Map</button>
           <button id="tectonicToggleOverlay" data-tip="Switch between plate view and height view">Toggle View</button>
           <button id="tectonicClose" data-tip="Close editor and remove overlay">Close</button>
         </div>
diff --git a/src/modules/tectonic-generator.ts b/src/modules/tectonic-generator.ts
index 7651b984..9e46dc18 100644
--- a/src/modules/tectonic-generator.ts
+++ b/src/modules/tectonic-generator.ts
@@ -221,6 +221,9 @@ export class TectonicPlateGenerator {
   private plates: TectonicPlate[] = [];
   private boundaries: PlateBoundary[] = [];
 
+  // Grid→sphere mapping for editor cell reassignment
+  private gridToSphere!: Int32Array;
+
   // Seeded PRNG for deterministic elevation pipeline
   private elevationSeed: number = 0;
   private rng: () => number = Math.random;
@@ -291,6 +294,27 @@ export class TectonicPlateGenerator {
     return this.projectAndFinalize();
   }
 
+  // Reassign grid cells to a different plate, propagating to sphere faces
+  reassignCells(gridCells: number[], newPlateId: number): void {
+    if (newPlateId < 0 || newPlateId >= this.plates.length) return;
+
+    for (const gc of gridCells) {
+      if (gc < 0 || gc >= this.numGridCells) continue;
+
+      // Find current plate and remove from it
+      const sphereFace = this.gridToSphere[gc];
+      if (sphereFace >= 0) {
+        const oldPlateId = this.plateAssignment[sphereFace];
+        if (oldPlateId >= 0 && oldPlateId < this.plates.length) {
+          this.plates[oldPlateId].cells.delete(sphereFace);
+        }
+        // Assign to new plate on sphere
+        this.plateAssignment[sphereFace] = newPlateId;
+        this.plates[newPlateId].cells.add(sphereFace);
+      }
+    }
+  }
+
   // Get current plates for editor access
   getPlates(): TectonicPlate[] {
     return this.plates;
@@ -1053,6 +1077,7 @@ export class TectonicPlateGenerator {
     // y: 0..gridHeight → lat: π/2..-π/2 (top = north pole, bottom = south pole)
     const gridElevations = new Float32Array(this.numGridCells);
     const gridPlateIds = new Int8Array(this.numGridCells).fill(-1);
+    this.gridToSphere = new Int32Array(this.numGridCells).fill(-1);
 
     // Build a bucketed spatial index for fast nearest-face lookup
     const lonBuckets = 72; // 5° per bucket
@@ -1122,6 +1147,7 @@ export class TectonicPlateGenerator {
 
       gridElevations[gi] = this.elevations[bestFace];
       gridPlateIds[gi] = this.plateAssignment[bestFace];
+      this.gridToSphere[gi] = bestFace;
     }
 
     // Light smoothing to remove pixelation from sphere→grid sampling

From 6bda3c3c16136757e8f761e2914309b5f20d80dd Mon Sep 17 00:00:00 2001
From: Dobidop <67412288+Dobidop@users.noreply.github.com>
Date: Sun, 22 Mar 2026 12:04:48 +0100
Subject: [PATCH 4/8] implement basic tectonics + tectonic direction and
 velocity

---
 public/config/tectonic-templates.js           |   70 +
 public/modules/dynamic/heightmap-selection.js |   24 +-
 public/modules/ui/options.js                  |    8 +-
 public/modules/ui/tectonic-editor.js          |  443 ++++++
 public/modules/ui/tools.js                    |    1 +
 src/index.html                                |   21 +
 src/modules/heightmap-generator.ts            |   27 +-
 src/modules/tectonic-generator.ts             | 1364 +++++++++++++++++
 src/types/TectonicMetadata.ts                 |   60 +
 src/types/global.ts                           |    1 +
 10 files changed, 2010 insertions(+), 9 deletions(-)
 create mode 100644 public/config/tectonic-templates.js
 create mode 100644 public/modules/ui/tectonic-editor.js
 create mode 100644 src/modules/tectonic-generator.ts
 create mode 100644 src/types/TectonicMetadata.ts

diff --git a/public/config/tectonic-templates.js b/public/config/tectonic-templates.js
new file mode 100644
index 00000000..549a1b57
--- /dev/null
+++ b/public/config/tectonic-templates.js
@@ -0,0 +1,70 @@
+"use strict";
+
+const tectonicTemplates = (function () {
+  return {
+    tectonic: {
+      id: 14,
+      name: "Tectonic",
+      template: "tectonic",
+      probability: 10,
+      config: {
+        plateCount: 20,
+        continentalRatio: 0.2,
+        collisionIntensity: 1.5,
+        noiseLevel: 0.3,
+        hotspotCount: 3,
+        smoothingPasses: 3,
+        erosionPasses: 5,
+        seaLevel: 5
+      }
+    },
+    tectonicPangea: {
+      id: 15,
+      name: "Tectonic Pangea",
+      template: "tectonic",
+      probability: 5,
+      config: {
+        plateCount: 8,
+        continentalRatio: 0.55,
+        collisionIntensity: 1.2,
+        noiseLevel: 0.25,
+        hotspotCount: 3,
+        smoothingPasses: 4,
+        erosionPasses: 2,
+        seaLevel: -3
+      }
+    },
+    tectonicArchipelago: {
+      id: 16,
+      name: "Tectonic Archipelago",
+      template: "tectonic",
+      probability: 5,
+      config: {
+        plateCount: 15,
+        continentalRatio: 0.25,
+        collisionIntensity: 0.8,
+        noiseLevel: 0.35,
+        hotspotCount: 5,
+        smoothingPasses: 3,
+        erosionPasses: 2,
+        seaLevel: 3
+      }
+    },
+    tectonicRift: {
+      id: 17,
+      name: "Tectonic Rift",
+      template: "tectonic",
+      probability: 3,
+      config: {
+        plateCount: 10,
+        continentalRatio: 0.4,
+        collisionIntensity: 1.5,
+        noiseLevel: 0.3,
+        hotspotCount: 2,
+        smoothingPasses: 3,
+        erosionPasses: 3,
+        seaLevel: 0
+      }
+    }
+  };
+})();
diff --git a/public/modules/dynamic/heightmap-selection.js b/public/modules/dynamic/heightmap-selection.js
index 3c1fe962..02955910 100644
--- a/public/modules/dynamic/heightmap-selection.js
+++ b/public/modules/dynamic/heightmap-selection.js
@@ -194,11 +194,19 @@ function insertHtml() {
 
   const sections = document.getElementsByClassName("heightmap-selection_container");
 
-  sections[0].innerHTML = Object.keys(heightmapTemplates)
+  const allTemplateKeys = Object.keys(heightmapTemplates);
+  if (typeof tectonicTemplates !== "undefined") {
+    allTemplateKeys.push(...Object.keys(tectonicTemplates));
+  }
+
+  sections[0].innerHTML = allTemplateKeys
     .map(key => {
-      const name = heightmapTemplates[key].name;
+      const isTectonic = typeof tectonicTemplates !== "undefined" && key in tectonicTemplates;
+      const name = isTectonic ? tectonicTemplates[key].name : heightmapTemplates[key].name;
       Math.random = aleaPRNG(initialSeed);
-      const heights = HeightmapGenerator.fromTemplate(graph, key);
+      const heights = isTectonic
+        ? HeightmapGenerator.fromTectonic(graph, tectonicTemplates[key].config)
+        : HeightmapGenerator.fromTemplate(graph, key);
 
       return /* html */ `<article data-id="${key}" data-seed="${initialSeed}">
         <img src="${getHeightmapPreview(heights)}" alt="${name}" />
@@ -255,6 +263,8 @@ function getSeed() {
 }
 
 function getName(id) {
+  const isTectonic = typeof tectonicTemplates !== "undefined" && id in tectonicTemplates;
+  if (isTectonic) return tectonicTemplates[id].name;
   const isTemplate = id in heightmapTemplates;
   return isTemplate ? heightmapTemplates[id].name : precreatedHeightmaps[id].name;
 }
@@ -266,7 +276,10 @@ function getGraph(currentGraph) {
 }
 
 function drawTemplatePreview(id) {
-  const heights = HeightmapGenerator.fromTemplate(graph, id);
+  const isTectonic = typeof tectonicTemplates !== "undefined" && id in tectonicTemplates;
+  const heights = isTectonic
+    ? HeightmapGenerator.fromTectonic(graph, tectonicTemplates[id].config)
+    : HeightmapGenerator.fromTemplate(graph, id);
   const dataUrl = getHeightmapPreview(heights);
   const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
   article.querySelector("img").src = dataUrl;
@@ -294,8 +307,9 @@ function redrawAll() {
     const {id, seed} = article.dataset;
     Math.random = aleaPRNG(seed);
 
+    const isTectonic = typeof tectonicTemplates !== "undefined" && id in tectonicTemplates;
     const isTemplate = id in heightmapTemplates;
-    if (isTemplate) drawTemplatePreview(id);
+    if (isTectonic || isTemplate) drawTemplatePreview(id);
     else drawPrecreatedHeightmap(id);
   }
 }
diff --git a/public/modules/ui/options.js b/public/modules/ui/options.js
index 07d77cb0..17757c90 100644
--- a/public/modules/ui/options.js
+++ b/public/modules/ui/options.js
@@ -624,8 +624,14 @@ function randomizeHeightmapTemplate() {
   for (const key in heightmapTemplates) {
     templates[key] = heightmapTemplates[key].probability || 0;
   }
+  if (typeof tectonicTemplates !== "undefined") {
+    for (const key in tectonicTemplates) {
+      templates[key] = tectonicTemplates[key].probability || 0;
+    }
+  }
   const template = rw(templates);
-  const name = heightmapTemplates[template].name;
+  const isTectonic = typeof tectonicTemplates !== "undefined" && template in tectonicTemplates;
+  const name = isTectonic ? tectonicTemplates[template].name : heightmapTemplates[template].name;
   applyOption(byId("templateInput"), template, name);
 }
 
diff --git a/public/modules/ui/tectonic-editor.js b/public/modules/ui/tectonic-editor.js
new file mode 100644
index 00000000..fe60402e
--- /dev/null
+++ b/public/modules/ui/tectonic-editor.js
@@ -0,0 +1,443 @@
+"use strict";
+
+// Tectonic Plate Editor
+// Visualizes tectonic plates and allows editing plate properties (type, velocity)
+// then regenerates terrain from the modified plate configuration
+
+let tectonicViewMode = "plates"; // "plates" or "heights"
+
+function editTectonics() {
+  if (customization) return tip("Please exit the customization mode first", false, "error");
+
+  if (!window.tectonicGenerator || !window.tectonicMetadata) {
+    return tip("Tectonic data not available. Generate a map using a Tectonic template first.", false, "error");
+  }
+
+  closeDialogs(".stable");
+  tectonicViewMode = "plates";
+
+  const plates = window.tectonicGenerator.getPlates();
+  const plateIds = window.tectonicMetadata.plateIds;
+  const plateColors = generatePlateColors(plates.length);
+
+  drawPlateOverlay(plateIds, plateColors, plates);
+  buildPlateList(plates, plateColors);
+
+  $("#tectonicEditor").dialog({
+    title: "Tectonic Plate Editor",
+    resizable: false,
+    width: "22em",
+    position: {my: "right top", at: "right-10 top+10", of: "svg"},
+    close: closeTectonicEditor
+  });
+
+  if (modules.editTectonics) return;
+  modules.editTectonics = true;
+
+  byId("tectonicRegenerate").addEventListener("click", regenerateFromEditor);
+  byId("tectonicToggleOverlay").addEventListener("click", togglePlateOverlay);
+  byId("tectonicApplyMap").addEventListener("click", applyToMap);
+  byId("tectonicClose").addEventListener("click", () => $("#tectonicEditor").dialog("close"));
+}
+
+function generatePlateColors(count) {
+  const colors = [];
+  for (let i = 0; i < count; i++) {
+    const hue = (i * 360 / count + 15) % 360;
+    const sat = 60 + (i % 3) * 15;
+    const lit = 45 + (i % 2) * 15;
+    colors.push(`hsl(${hue}, ${sat}%, ${lit}%)`);
+  }
+  return colors;
+}
+
+// Height-to-color function matching FMG's heightmap editor
+function tectonicHeightColor(h) {
+  if (h < 20) {
+    // Ocean: deep blue to light blue
+    const t = h / 20;
+    const r = Math.round(30 + t * 40);
+    const g = Math.round(60 + t * 80);
+    const b = Math.round(120 + t * 100);
+    return `rgb(${r},${g},${b})`;
+  } else {
+    // Land: green to brown to white
+    const t = (h - 20) / 80;
+    if (t < 0.3) {
+      const s = t / 0.3;
+      return `rgb(${Math.round(80 + s * 60)},${Math.round(160 + s * 40)},${Math.round(60 + s * 20)})`;
+    } else if (t < 0.7) {
+      const s = (t - 0.3) / 0.4;
+      return `rgb(${Math.round(140 + s * 60)},${Math.round(200 - s * 80)},${Math.round(80 - s * 40)})`;
+    } else {
+      const s = (t - 0.7) / 0.3;
+      return `rgb(${Math.round(200 + s * 55)},${Math.round(120 + s * 135)},${Math.round(40 + s * 215)})`;
+    }
+  }
+}
+
+function drawPlateOverlay(plateIds, plateColors, plates) {
+  viewbox.select("#tectonicOverlay").remove();
+  const overlay = viewbox.insert("g", "#terrs").attr("id", "tectonicOverlay");
+  const numCells = plateIds.length;
+
+  for (let i = 0; i < numCells; i++) {
+    const pid = plateIds[i];
+    if (pid < 0 || pid >= plates.length) continue;
+
+    const points = getGridPolygon(i);
+    if (!points) continue;
+
+    overlay.append("polygon")
+      .attr("points", points)
+      .attr("fill", plateColors[pid])
+      .attr("fill-opacity", 0.35)
+      .attr("stroke", plateColors[pid])
+      .attr("stroke-opacity", 0.5)
+      .attr("stroke-width", 0.2)
+      .attr("data-plate", pid)
+      .on("click", function () {
+        highlightPlate(pid, plateColors);
+      });
+  }
+
+  drawVelocityArrows(overlay, plates, plateIds, plateColors);
+}
+
+function drawHeightOverlay(heights) {
+  viewbox.select("#tectonicOverlay").remove();
+  const overlay = viewbox.insert("g", "#terrs").attr("id", "tectonicOverlay");
+  const numCells = heights.length;
+
+  for (let i = 0; i < numCells; i++) {
+    const points = getGridPolygon(i);
+    if (!points) continue;
+
+    overlay.append("polygon")
+      .attr("points", points)
+      .attr("fill", tectonicHeightColor(heights[i]))
+      .attr("fill-opacity", 0.85)
+      .attr("stroke", tectonicHeightColor(heights[i]))
+      .attr("stroke-opacity", 0.5)
+      .attr("stroke-width", 0.1);
+  }
+}
+
+function drawVelocityArrows(overlay, plates, plateIds, plateColors) {
+  const arrowGroup = overlay.append("g").attr("id", "velocityArrows");
+
+  for (const plate of plates) {
+    const centroid = computeGridPlateCentroid(plate.id, plateIds);
+    if (!centroid) continue;
+
+    const [cx, cy] = centroid;
+    const vel = plate.velocity;
+    const arrowScale = 30;
+    const dx = vel[0] * arrowScale;
+    const dy = -vel[1] * arrowScale;
+    const mag = Math.sqrt(dx * dx + dy * dy);
+    if (mag < 2) continue;
+
+    arrowGroup.append("line")
+      .attr("x1", cx).attr("y1", cy)
+      .attr("x2", cx + dx).attr("y2", cy + dy)
+      .attr("stroke", plateColors[plate.id])
+      .attr("stroke-width", 2)
+      .attr("stroke-opacity", 0.9)
+      .attr("marker-end", "url(#tectonicArrowhead)");
+
+    arrowGroup.append("text")
+      .attr("x", cx).attr("y", cy - 5)
+      .attr("text-anchor", "middle")
+      .attr("font-size", "8px")
+      .attr("fill", plateColors[plate.id])
+      .attr("stroke", "#000")
+      .attr("stroke-width", 0.3)
+      .attr("paint-order", "stroke")
+      .text(`P${plate.id}`);
+  }
+
+  if (!document.getElementById("tectonicArrowhead")) {
+    const defs = d3.select("svg").select("defs");
+    defs.append("marker")
+      .attr("id", "tectonicArrowhead")
+      .attr("viewBox", "0 0 10 10")
+      .attr("refX", 8).attr("refY", 5)
+      .attr("markerWidth", 6).attr("markerHeight", 6)
+      .attr("orient", "auto-start-reverse")
+      .append("path")
+      .attr("d", "M 0 0 L 10 5 L 0 10 z")
+      .attr("fill", "#fff")
+      .attr("stroke", "#333")
+      .attr("stroke-width", 0.5);
+  }
+}
+
+function computeGridPlateCentroid(plateId, plateIds) {
+  let sumX = 0, sumY = 0, count = 0;
+  for (let i = 0; i < plateIds.length; i++) {
+    if (plateIds[i] !== plateId) continue;
+    const [x, y] = grid.points[i];
+    sumX += x;
+    sumY += y;
+    count++;
+  }
+  if (count === 0) return null;
+  return [sumX / count, sumY / count];
+}
+
+function highlightPlate(plateId, plateColors) {
+  viewbox.select("#tectonicOverlay").selectAll("polygon")
+    .attr("fill-opacity", function () {
+      return +this.getAttribute("data-plate") === plateId ? 0.6 : 0.15;
+    });
+
+  const row = byId(`tectonicPlate_${plateId}`);
+  if (row) {
+    row.scrollIntoView({behavior: "smooth", block: "nearest"});
+    row.style.outline = "2px solid " + plateColors[plateId];
+    setTimeout(() => row.style.outline = "", 1500);
+  }
+}
+
+function buildPlateList(plates, plateColors) {
+  const container = byId("tectonicPlateList");
+  container.innerHTML = "";
+
+  const table = document.createElement("table");
+  table.style.width = "100%";
+  table.style.borderCollapse = "collapse";
+  table.style.fontSize = "11px";
+
+  const header = document.createElement("tr");
+  header.innerHTML = `
+    <th style="width:30px">ID</th>
+    <th style="width:60px">Type</th>
+    <th>Velocity</th>
+    <th style="width:50px">Dir</th>
+  `;
+  table.appendChild(header);
+
+  for (const plate of plates) {
+    const row = document.createElement("tr");
+    row.id = `tectonicPlate_${plate.id}`;
+    row.style.borderBottom = "1px solid #444";
+    row.style.cursor = "pointer";
+
+    const vel = plate.velocity;
+    const speed = Math.sqrt(vel[0] * vel[0] + vel[1] * vel[1] + vel[2] * vel[2]).toFixed(2);
+    const dirDeg = Math.round(Math.atan2(-vel[1], vel[0]) * 180 / Math.PI);
+
+    row.innerHTML = `
+      <td style="text-align:center">
+        <span style="display:inline-block;width:12px;height:12px;background:${plateColors[plate.id]};border-radius:2px;vertical-align:middle"></span>
+        ${plate.id}
+      </td>
+      <td>
+        <select data-plate="${plate.id}" class="plateTypeSelect" style="font-size:10px;width:100%">
+          <option value="continental" ${!plate.isOceanic ? "selected" : ""}>Land</option>
+          <option value="oceanic" ${plate.isOceanic ? "selected" : ""}>Ocean</option>
+        </select>
+      </td>
+      <td style="text-align:center">
+        <input type="range" data-plate="${plate.id}" class="plateSpeedRange"
+          min="0" max="1.5" step="0.05" value="${speed}"
+          style="width:60px;vertical-align:middle">
+        <span class="plateSpeedLabel" style="font-size:9px">${speed}</span>
+      </td>
+      <td style="text-align:center">
+        <input type="number" data-plate="${plate.id}" class="plateDirInput"
+          min="-180" max="180" step="15" value="${dirDeg}"
+          style="width:45px;font-size:10px">
+      </td>
+    `;
+
+    row.addEventListener("click", (e) => {
+      if (e.target.tagName === "SELECT" || e.target.tagName === "INPUT") return;
+      highlightPlate(plate.id, plateColors);
+    });
+
+    table.appendChild(row);
+  }
+
+  container.appendChild(table);
+
+  container.querySelectorAll(".plateTypeSelect").forEach(select => {
+    select.addEventListener("change", function () {
+      const pid = +this.getAttribute("data-plate");
+      plates[pid].isOceanic = this.value === "oceanic";
+    });
+  });
+
+  container.querySelectorAll(".plateSpeedRange").forEach(slider => {
+    slider.addEventListener("input", function () {
+      const pid = +this.getAttribute("data-plate");
+      const plate = plates[pid];
+      const newSpeed = +this.value;
+      this.parentElement.querySelector(".plateSpeedLabel").textContent = newSpeed.toFixed(2);
+
+      const oldSpeed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
+      if (oldSpeed > 0.001) {
+        const scale = newSpeed / oldSpeed;
+        plate.velocity[0] *= scale;
+        plate.velocity[1] *= scale;
+        plate.velocity[2] *= scale;
+      } else {
+        plate.velocity[0] = newSpeed;
+        plate.velocity[1] = 0;
+        plate.velocity[2] = 0;
+      }
+    });
+  });
+
+  container.querySelectorAll(".plateDirInput").forEach(input => {
+    input.addEventListener("change", function () {
+      const pid = +this.getAttribute("data-plate");
+      const plate = plates[pid];
+      const dirRad = (+this.value) * Math.PI / 180;
+      const speed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
+      plate.velocity[0] = Math.cos(dirRad) * speed;
+      plate.velocity[1] = -Math.sin(dirRad) * speed;
+      plate.velocity[2] = 0;
+    });
+  });
+}
+
+function regenerateFromEditor() {
+  const generator = window.tectonicGenerator;
+  if (!generator) return tip("No tectonic generator available", false, "error");
+
+  tip("Regenerating terrain from edited plates...", true, "warn");
+
+  setTimeout(() => {
+    try {
+      const result = generator.regenerate();
+
+      // Update grid heights
+      grid.cells.h = result.heights;
+      window.tectonicMetadata = result.metadata;
+
+      // Show the regenerated heightmap as a visual overlay
+      tectonicViewMode = "heights";
+      drawHeightOverlay(result.heights);
+
+      // Log changes for debugging
+      let water = 0, land = 0, minH = 100, maxH = 0;
+      for (let i = 0; i < result.heights.length; i++) {
+        const h = result.heights[i];
+        if (h < 20) water++; else land++;
+        if (h < minH) minH = h;
+        if (h > maxH) maxH = h;
+      }
+      console.log(`Tectonic regeneration: ${land} land (${(land / result.heights.length * 100).toFixed(1)}%), heights ${minH}-${maxH}`);
+
+      tip("Terrain regenerated. Click 'Apply to Map' to regenerate the full map.", true, "success");
+    } catch (e) {
+      console.error("Tectonic regeneration failed:", e);
+      tip("Regeneration failed: " + e.message, false, "error");
+    }
+  }, 50);
+}
+
+function applyToMap() {
+  if (!window.tectonicGenerator) return tip("No tectonic generator available", false, "error");
+
+  // Close the editor overlay
+  closeTectonicEditor();
+  $("#tectonicEditor").dialog("close");
+
+  tip("Rebuilding map from edited tectonics...", true, "warn");
+
+  setTimeout(() => {
+    try {
+      // grid.cells.h is already set by regenerateFromEditor
+      // Run the full downstream pipeline WITHOUT regenerating the heightmap
+      undraw();
+      pack = {};
+
+      Features.markupGrid();
+      addLakesInDeepDepressions();
+      openNearSeaLakes();
+
+      OceanLayers();
+      defineMapSize();
+      calculateMapCoordinates();
+      calculateTemperatures();
+      generatePrecipitation();
+
+      reGraph();
+      Features.markupPack();
+      createDefaultRuler();
+
+      Rivers.generate();
+      Biomes.define();
+      Features.defineGroups();
+
+      Ice.generate();
+
+      rankCells();
+      Cultures.generate();
+      Cultures.expand();
+
+      Burgs.generate();
+      States.generate();
+      Routes.generate();
+      Religions.generate();
+
+      Burgs.specify();
+      States.collectStatistics();
+      States.defineStateForms();
+
+      Provinces.generate();
+      Provinces.getPoles();
+
+      Rivers.specify();
+      Lakes.defineNames();
+
+      Military.generate();
+      Markers.generate();
+      Zones.generate();
+
+      drawScaleBar(scaleBar, scale);
+      Names.getMapName();
+
+      drawLayers();
+      if (ThreeD.options.isOn) ThreeD.redraw();
+
+      fitMapToScreen();
+      clearMainTip();
+      tip("Map rebuilt from edited tectonics", true, "success");
+    } catch (e) {
+      console.error("Failed to rebuild map:", e);
+      tip("Rebuild failed: " + e.message, false, "error");
+    }
+  }, 100);
+}
+
+function togglePlateOverlay() {
+  const overlay = viewbox.select("#tectonicOverlay");
+
+  if (tectonicViewMode === "heights") {
+    // Switch back to plate view
+    tectonicViewMode = "plates";
+    const plates = window.tectonicGenerator.getPlates();
+    const plateColors = generatePlateColors(plates.length);
+    drawPlateOverlay(window.tectonicMetadata.plateIds, plateColors, plates);
+    return;
+  }
+
+  if (overlay.empty()) {
+    const plates = window.tectonicGenerator.getPlates();
+    const plateColors = generatePlateColors(plates.length);
+    drawPlateOverlay(window.tectonicMetadata.plateIds, plateColors, plates);
+  } else {
+    const visible = overlay.style("display") !== "none";
+    overlay.style("display", visible ? "none" : null);
+  }
+}
+
+function closeTectonicEditor() {
+  viewbox.select("#tectonicOverlay").remove();
+  d3.select("#tectonicArrowhead").remove();
+  tectonicViewMode = "plates";
+}
diff --git a/public/modules/ui/tools.js b/public/modules/ui/tools.js
index 34c1cd12..6e4495ec 100644
--- a/public/modules/ui/tools.js
+++ b/public/modules/ui/tools.js
@@ -9,6 +9,7 @@ toolsContent.addEventListener("click", function (event) {
 
   // click on open Editor buttons
   if (button === "editHeightmapButton") editHeightmap();
+  else if (button === "editTectonicsButton") editTectonics();
   else if (button === "editBiomesButton") editBiomes();
   else if (button === "editStatesButton") editStates();
   else if (button === "editProvincesButton") editProvinces();
diff --git a/src/index.html b/src/index.html
index dffaa816..eee1e9c6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2123,6 +2123,13 @@
             >
               Heightmap
             </button>
+            <button
+              id="editTectonicsButton"
+              data-tip="Click to open Tectonic Plates Editor (requires tectonic template)"
+              data-shortcut="Shift + T"
+            >
+              Tectonics
+            </button>
             <button id="overviewMarkersButton" data-tip="Click to open Markers Overview" data-shortcut="Shift + K">
               Markers
             </button>
@@ -4098,6 +4105,18 @@
         <div id="regimentSelectorBody" class="table"></div>
       </div>
 
+      <div id="tectonicEditor" class="dialog stable" style="display: none">
+        <div id="tectonicPlateList" style="max-height: 300px; overflow-y: auto"></div>
+        <div style="margin-top: 8px">
+          <button id="tectonicRegenerate" data-tip="Regenerate terrain preview from edited plates">Regenerate Preview</button>
+          <button id="tectonicApplyMap" data-tip="Apply changes and regenerate the full map">Apply to Map</button>
+        </div>
+        <div style="margin-top: 4px">
+          <button id="tectonicToggleOverlay" data-tip="Switch between plate view and height view">Toggle View</button>
+          <button id="tectonicClose" data-tip="Close editor and remove overlay">Close</button>
+        </div>
+      </div>
+
       <div id="brushesPanel" class="dialog stable" style="display: none">
         <div id="brushesButtons" style="display: inline-block">
           <button id="brushRaise" data-tip="Raise brush: increase height of cells in radius by Power value">
@@ -8538,6 +8557,7 @@
     <script type="module" src="renderers/index.ts"></script>
 
     <script defer src="config/heightmap-templates.js"></script>
+    <script defer src="config/tectonic-templates.js"></script>
     <script defer src="config/precreated-heightmaps.js"></script>
     <script defer src="libs/alea.min.js?v1.105.0"></script>
     <script defer src="libs/polylabel.min.js?v1.105.0"></script>
@@ -8554,6 +8574,7 @@
     <script defer src="modules/ui/tools.js?v=1.113.3"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.105.4"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=1.113.0"></script>
+    <script defer src="modules/ui/tectonic-editor.js?v=1.0.0"></script>
     <script defer src="modules/ui/provinces-editor.js?v=1.108.1"></script>
     <script defer src="modules/ui/biomes-editor.js?v=1.112.0"></script>
     <script defer src="modules/ui/namesbase-editor.js?v=1.105.11"></script>
diff --git a/src/modules/heightmap-generator.ts b/src/modules/heightmap-generator.ts
index 9a6d462a..8cc1865e 100644
--- a/src/modules/heightmap-generator.ts
+++ b/src/modules/heightmap-generator.ts
@@ -10,6 +10,8 @@ import {
   P,
   rand,
 } from "../utils";
+import { TectonicPlateGenerator } from "./tectonic-generator";
+import type { TectonicConfig } from "../types/TectonicMetadata";
 
 declare global {
   var HeightmapGenerator: HeightmapModule;
@@ -596,17 +598,36 @@ class HeightmapModule {
     TIME && console.time("defineHeightmap");
     const id = (byId("templateInput")! as HTMLInputElement).value;
     Math.random = Alea(seed);
+
+    const isTectonic =
+      typeof tectonicTemplates !== "undefined" && id in tectonicTemplates;
     const isTemplate = id in heightmapTemplates;
 
-    const heights = isTemplate
-      ? this.fromTemplate(graph, id)
-      : await this.fromPrecreated(graph, id);
+    let heights: Uint8Array | null;
+    if (isTectonic) {
+      heights = this.fromTectonic(graph, tectonicTemplates[id].config);
+    } else if (isTemplate) {
+      heights = this.fromTemplate(graph, id);
+    } else {
+      heights = await this.fromPrecreated(graph, id);
+    }
+
     TIME && console.timeEnd("defineHeightmap");
 
     this.clearData();
     return heights as Uint8Array;
   }
 
+  fromTectonic(graph: any, config: TectonicConfig): Uint8Array {
+    this.setGraph(graph);
+    const generator = new TectonicPlateGenerator(this.grid!, config);
+    const result = generator.generate();
+    this.heights = result.heights;
+    window.tectonicMetadata = result.metadata;
+    window.tectonicGenerator = generator;
+    return this.heights;
+  }
+
   fromTemplate(graph: any, id: string): Uint8Array | null {
     const templateString = heightmapTemplates[id]?.template || "";
     const steps = templateString.split("\n");
diff --git a/src/modules/tectonic-generator.ts b/src/modules/tectonic-generator.ts
new file mode 100644
index 00000000..7651b984
--- /dev/null
+++ b/src/modules/tectonic-generator.ts
@@ -0,0 +1,1364 @@
+import {minmax} from "../utils/numberUtils";
+import {P} from "../utils/probabilityUtils";
+import type {
+  TectonicConfig,
+  TectonicPlate,
+  PlateBoundary,
+  TectonicMetadata,
+  BoundarySubtype
+} from "../types/TectonicMetadata";
+
+interface TectonicResult {
+  heights: Uint8Array;
+  metadata: TectonicMetadata;
+}
+
+interface Grid {
+  cells: {
+    i: Uint32Array | number[];
+    c: number[][];
+    b: number[];
+    h?: Uint8Array;
+  };
+  points: [number, number][];
+  cellsX: number;
+  cellsY: number;
+  cellsDesired: number;
+  spacing: number;
+}
+
+// Icosphere face: 3 vertex indices forming a triangle
+type Face = [number, number, number];
+
+// ============================================================
+// Icosphere mesh for spherical tectonic simulation
+// ============================================================
+
+class IcoSphereMesh {
+  vertices: [number, number, number][]; // unit sphere positions
+  faces: Face[];
+  neighbors: number[][]; // per-face adjacency
+  centroids: [number, number, number][]; // per-face centroid on unit sphere
+
+  constructor(subdivisions: number) {
+    this.vertices = [];
+    this.faces = [];
+    this.neighbors = [];
+    this.centroids = [];
+    this.buildIcosahedron();
+    for (let i = 0; i < subdivisions; i++) {
+      this.subdivide();
+    }
+    this.computeFaceData();
+  }
+
+  private buildIcosahedron(): void {
+    const t = (1 + Math.sqrt(5)) / 2; // golden ratio
+
+    // 12 vertices of icosahedron (normalized to unit sphere)
+    const raw: [number, number, number][] = [
+      [-1, t, 0],
+      [1, t, 0],
+      [-1, -t, 0],
+      [1, -t, 0],
+      [0, -1, t],
+      [0, 1, t],
+      [0, -1, -t],
+      [0, 1, -t],
+      [t, 0, -1],
+      [t, 0, 1],
+      [-t, 0, -1],
+      [-t, 0, 1]
+    ];
+
+    this.vertices = raw.map(v => this.normalize(v));
+
+    // 20 triangular faces
+    this.faces = [
+      [0, 11, 5],
+      [0, 5, 1],
+      [0, 1, 7],
+      [0, 7, 10],
+      [0, 10, 11],
+      [1, 5, 9],
+      [5, 11, 4],
+      [11, 10, 2],
+      [10, 7, 6],
+      [7, 1, 8],
+      [3, 9, 4],
+      [3, 4, 2],
+      [3, 2, 6],
+      [3, 6, 8],
+      [3, 8, 9],
+      [4, 9, 5],
+      [2, 4, 11],
+      [6, 2, 10],
+      [8, 6, 7],
+      [9, 8, 1]
+    ];
+  }
+
+  private normalize(v: [number, number, number]): [number, number, number] {
+    const len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+    return [v[0] / len, v[1] / len, v[2] / len];
+  }
+
+  private midpointCache = new Map<string, number>();
+
+  private getMidpoint(a: number, b: number): number {
+    const key = Math.min(a, b) + "-" + Math.max(a, b);
+    if (this.midpointCache.has(key)) return this.midpointCache.get(key)!;
+
+    const va = this.vertices[a];
+    const vb = this.vertices[b];
+    const mid: [number, number, number] = this.normalize([
+      (va[0] + vb[0]) / 2,
+      (va[1] + vb[1]) / 2,
+      (va[2] + vb[2]) / 2
+    ]);
+    const idx = this.vertices.length;
+    this.vertices.push(mid);
+    this.midpointCache.set(key, idx);
+    return idx;
+  }
+
+  private subdivide(): void {
+    this.midpointCache.clear();
+    const newFaces: Face[] = [];
+
+    for (const [a, b, c] of this.faces) {
+      const ab = this.getMidpoint(a, b);
+      const bc = this.getMidpoint(b, c);
+      const ca = this.getMidpoint(c, a);
+
+      newFaces.push([a, ab, ca]);
+      newFaces.push([b, bc, ab]);
+      newFaces.push([c, ca, bc]);
+      newFaces.push([ab, bc, ca]);
+    }
+
+    this.faces = newFaces;
+  }
+
+  private computeFaceData(): void {
+    const numFaces = this.faces.length;
+
+    // Compute centroids
+    this.centroids = this.faces.map(([a, b, c]) => {
+      const va = this.vertices[a];
+      const vb = this.vertices[b];
+      const vc = this.vertices[c];
+      return this.normalize([
+        (va[0] + vb[0] + vc[0]) / 3,
+        (va[1] + vb[1] + vc[1]) / 3,
+        (va[2] + vb[2] + vc[2]) / 3
+      ]);
+    });
+
+    // Build face adjacency: two faces are neighbors if they share an edge (2 vertices)
+    const edgeToFace = new Map<string, number[]>();
+    for (let f = 0; f < numFaces; f++) {
+      const [a, b, c] = this.faces[f];
+      const edges = [
+        [Math.min(a, b), Math.max(a, b)],
+        [Math.min(b, c), Math.max(b, c)],
+        [Math.min(a, c), Math.max(a, c)]
+      ];
+      for (const [e0, e1] of edges) {
+        const key = e0 + "-" + e1;
+        if (!edgeToFace.has(key)) edgeToFace.set(key, []);
+        edgeToFace.get(key)!.push(f);
+      }
+    }
+
+    this.neighbors = new Array(numFaces).fill(null).map(() => []);
+    for (const faces of edgeToFace.values()) {
+      if (faces.length === 2) {
+        this.neighbors[faces[0]].push(faces[1]);
+        this.neighbors[faces[1]].push(faces[0]);
+      }
+    }
+  }
+
+  // Convert unit sphere position to (lon, lat) in radians
+  toLonLat(v: [number, number, number]): [number, number] {
+    const lat = Math.asin(minmax(v[1], -1, 1));
+    const lon = Math.atan2(v[2], v[0]);
+    return [lon, lat];
+  }
+}
+
+// ============================================================
+// Spherical tectonic plate generator
+// ============================================================
+
+// Simple seeded PRNG (mulberry32) for deterministic regeneration
+function mulberry32(seed: number): () => number {
+  return function () {
+    seed |= 0;
+    seed = (seed + 0x6d2b79f5) | 0;
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export class TectonicPlateGenerator {
+  private grid: Grid;
+  private config: TectonicConfig;
+  private numGridCells: number;
+
+  // Sphere mesh
+  private sphere!: IcoSphereMesh;
+  private numSphereFaces!: number;
+
+  // Per-sphere-face data
+  private plateAssignment!: Int8Array;
+  private elevations!: Float32Array;
+  private boundaryFlags!: Uint8Array;
+  private boundaryConvergence!: Float32Array;
+
+  private plates: TectonicPlate[] = [];
+  private boundaries: PlateBoundary[] = [];
+
+  // Seeded PRNG for deterministic elevation pipeline
+  private elevationSeed: number = 0;
+  private rng: () => number = Math.random;
+
+  constructor(grid: Grid, config: TectonicConfig) {
+    this.grid = grid;
+    this.config = config;
+    this.numGridCells = grid.points.length;
+  }
+
+  generate(): TectonicResult {
+    // Choose icosphere subdivision level to roughly match grid resolution
+    // Sub 4 = 5120 faces, Sub 5 = 20480 faces, Sub 6 = 81920 faces
+    const targetFaces = this.numGridCells * 2; // oversample sphere for quality
+    let subdivisions = 4;
+    if (targetFaces > 10000) subdivisions = 5;
+    if (targetFaces > 40000) subdivisions = 6;
+
+    this.sphere = new IcoSphereMesh(subdivisions);
+    this.numSphereFaces = this.sphere.faces.length;
+
+    this.plateAssignment = new Int8Array(this.numSphereFaces).fill(-1);
+    this.elevations = new Float32Array(this.numSphereFaces);
+    this.boundaryFlags = new Uint8Array(this.numSphereFaces);
+    this.boundaryConvergence = new Float32Array(this.numSphereFaces);
+
+    // Run tectonic simulation on sphere
+    this.seedPlates();
+    this.growPlates();
+    this.perturbBoundaries();
+    this.classifyPlates();
+    this.assignVelocities();
+
+    // Save a seed for the elevation pipeline so regeneration is deterministic
+    this.elevationSeed = Math.floor(Math.random() * 2147483647);
+    this.runElevationPipeline();
+
+    // Project sphere onto flat grid
+    return this.projectAndFinalize();
+  }
+
+  // Run the elevation pipeline with a deterministic PRNG
+  private runElevationPipeline(): void {
+    this.rng = mulberry32(this.elevationSeed);
+    this.assignBaseElevations();
+    this.detectBoundaries();
+    this.computeBoundaryElevations();
+    this.diffuseElevations();
+    this.generateContinentalShelves();
+    this.addHotspots();
+    this.applyErosion();
+    this.applyNoise();
+  }
+
+  // Regenerate terrain from edited plate state (skips plate growth, re-runs elevation pipeline)
+  // Call after modifying plates[].isOceanic or plates[].velocity externally
+  regenerate(): TectonicResult {
+    // Reset elevation data but keep plate assignments and sphere mesh
+    this.elevations = new Float32Array(this.numSphereFaces);
+    this.boundaryFlags = new Uint8Array(this.numSphereFaces);
+    this.boundaryConvergence = new Float32Array(this.numSphereFaces);
+    this.boundaries = [];
+
+    // Re-run with same seed so noise/hotspots/erosion are deterministic
+    // Only plate-driven effects (base elevation, boundary types) change
+    this.runElevationPipeline();
+
+    return this.projectAndFinalize();
+  }
+
+  // Get current plates for editor access
+  getPlates(): TectonicPlate[] {
+    return this.plates;
+  }
+
+  // Get grid-level plate IDs for visualization (from last projectAndFinalize)
+  getGridPlateIds(): Uint8Array | null {
+    return window.tectonicMetadata?.plateIds ?? null;
+  }
+
+
+  // ---- Step 1: Seed plates on sphere ----
+  private seedPlates(): void {
+    const {plateCount} = this.config;
+    const effectivePlateCount = Math.min(plateCount, Math.floor(Math.sqrt(this.numSphereFaces) / 5));
+
+    // Minimum angular separation between seeds
+    const minAngularSep = Math.PI / Math.sqrt(effectivePlateCount) * 0.6;
+    const seeds: number[] = [];
+
+    let attempts = 0;
+    while (seeds.length < effectivePlateCount && attempts < effectivePlateCount * 200) {
+      const candidate = Math.floor(Math.random() * this.numSphereFaces);
+      attempts++;
+
+      // Check angular distance to existing seeds
+      let tooClose = false;
+      const cC = this.sphere.centroids[candidate];
+      for (const s of seeds) {
+        const cS = this.sphere.centroids[s];
+        const dot = cC[0] * cS[0] + cC[1] * cS[1] + cC[2] * cS[2];
+        const angle = Math.acos(minmax(dot, -1, 1));
+        if (angle < minAngularSep) {
+          tooClose = true;
+          break;
+        }
+      }
+      if (tooClose) continue;
+
+      seeds.push(candidate);
+    }
+
+    // Fallback: fill remaining with random faces
+    while (seeds.length < effectivePlateCount) {
+      const candidate = Math.floor(Math.random() * this.numSphereFaces);
+      if (!seeds.includes(candidate)) seeds.push(candidate);
+    }
+
+    for (let i = 0; i < seeds.length; i++) {
+      this.plates.push({
+        id: i,
+        cells: new Set([seeds[i]]),
+        isOceanic: false,
+        velocity: [0, 0, 0],
+        baseElevation: 0,
+        seedCell: seeds[i]
+      });
+      this.plateAssignment[seeds[i]] = i;
+    }
+  }
+
+  // ---- Step 2: Grow plates via randomized frontier BFS on sphere ----
+  private growPlates(): void {
+    const plateGrowthRate = this.plates.map(() => 0.3 + Math.random() * 0.7);
+    const frontier: number[][] = this.plates.map(() => []);
+
+    for (const plate of this.plates) {
+      for (const neighbor of this.sphere.neighbors[plate.seedCell]) {
+        if (this.plateAssignment[neighbor] === -1) {
+          frontier[plate.id].push(neighbor);
+        }
+      }
+    }
+
+    let unassigned = this.numSphereFaces - this.plates.length;
+    let maxIterations = this.numSphereFaces * 3;
+
+    while (unassigned > 0 && maxIterations-- > 0) {
+      let anyGrew = false;
+
+      for (const plate of this.plates) {
+        const pid = plate.id;
+        if (frontier[pid].length === 0) continue;
+
+        const claimCount = Math.max(1, Math.floor(frontier[pid].length * plateGrowthRate[pid] * (0.3 + Math.random() * 0.4)));
+        this.shuffleArray(frontier[pid]);
+
+        let claimed = 0;
+        const newFrontier: number[] = [];
+
+        for (const cell of frontier[pid]) {
+          if (this.plateAssignment[cell] !== -1) continue;
+          if (claimed >= claimCount) {
+            newFrontier.push(cell);
+            continue;
+          }
+
+          if (Math.random() > 0.7 + plateGrowthRate[pid] * 0.3) {
+            newFrontier.push(cell);
+            continue;
+          }
+
+          this.plateAssignment[cell] = pid;
+          plate.cells.add(cell);
+          claimed++;
+          unassigned--;
+          anyGrew = true;
+
+          for (const neighbor of this.sphere.neighbors[cell]) {
+            if (this.plateAssignment[neighbor] === -1) {
+              newFrontier.push(neighbor);
+            }
+          }
+        }
+
+        frontier[pid] = newFrontier;
+      }
+
+      if (!anyGrew) break;
+    }
+
+    // Assign any remaining
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      if (this.plateAssignment[i] === -1) {
+        for (const neighbor of this.sphere.neighbors[i]) {
+          if (this.plateAssignment[neighbor] !== -1) {
+            this.plateAssignment[i] = this.plateAssignment[neighbor];
+            this.plates[this.plateAssignment[neighbor]].cells.add(i);
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  // ---- Step 3: Perturb boundaries ----
+  private perturbBoundaries(): void {
+    const passes = 3;
+
+    for (let pass = 0; pass < passes; pass++) {
+      for (let i = 0; i < this.numSphereFaces; i++) {
+        const myPlate = this.plateAssignment[i];
+        if (myPlate === -1) continue;
+
+        const adjacentPlates: number[] = [];
+        let samePlateNeighborCount = 0;
+
+        for (const n of this.sphere.neighbors[i]) {
+          const np = this.plateAssignment[n];
+          if (np !== myPlate && np !== -1) {
+            adjacentPlates.push(np);
+          } else {
+            samePlateNeighborCount++;
+          }
+        }
+
+        if (adjacentPlates.length === 0) continue;
+        if (samePlateNeighborCount < 2) continue;
+        if (Math.random() > 0.25) continue;
+
+        const targetPlate = adjacentPlates[Math.floor(Math.random() * adjacentPlates.length)];
+        this.plates[myPlate].cells.delete(i);
+        this.plateAssignment[i] = targetPlate;
+        this.plates[targetPlate].cells.add(i);
+      }
+    }
+  }
+
+  private shuffleArray<T>(arr: T[]): void {
+    for (let i = arr.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      const tmp = arr[i];
+      arr[i] = arr[j];
+      arr[j] = tmp;
+    }
+  }
+
+  // ---- Step 4: Classify plates ----
+  private classifyPlates(): void {
+    const {continentalRatio} = this.config;
+    const targetContinental = Math.max(1, Math.round(this.plates.length * continentalRatio));
+
+    // Shuffle plates for random classification order
+    const plateOrder = [...this.plates];
+    this.shuffleArray(plateOrder);
+
+    let continentalCount = 0;
+    let oceanicCount = 0;
+
+    for (const plate of plateOrder) {
+      const needMoreContinental = continentalCount < targetContinental;
+      const needMoreOceanic = oceanicCount < (this.plates.length - targetContinental);
+
+      if (needMoreContinental && !needMoreOceanic) {
+        plate.isOceanic = false;
+      } else if (!needMoreContinental && needMoreOceanic) {
+        plate.isOceanic = true;
+      } else {
+        plate.isOceanic = P(1 - continentalRatio);
+      }
+
+      if (plate.isOceanic) oceanicCount++;
+      else continentalCount++;
+    }
+
+    // Guarantee at least 1 of each
+    if (continentalCount === 0) {
+      const largest = this.plates.reduce((a, b) => a.cells.size > b.cells.size ? a : b);
+      largest.isOceanic = false;
+    }
+    if (oceanicCount === 0) {
+      const smallest = this.plates.reduce((a, b) => a.cells.size < b.cells.size ? a : b);
+      smallest.isOceanic = true;
+    }
+  }
+
+  // ---- Step 5: Assign velocities as 3D tangent vectors on sphere ----
+  private assignVelocities(): void {
+    for (const plate of this.plates) {
+      // Pick a random rotation axis and speed
+      // The velocity is a tangent vector at the plate centroid
+      const centroid = this.computePlateCentroid(plate);
+      const magnitude = 0.3 + Math.random() * 0.7;
+
+      // Random tangent direction: cross centroid with a random vector
+      const randomVec: [number, number, number] = this.normalize3([
+        Math.random() - 0.5,
+        Math.random() - 0.5,
+        Math.random() - 0.5
+      ]);
+
+      // Tangent = cross(centroid, randomVec), normalized and scaled
+      const tangent = this.cross(centroid, randomVec);
+      const tanLen = this.length3(tangent);
+      if (tanLen > 0.001) {
+        plate.velocity = [
+          (tangent[0] / tanLen) * magnitude,
+          (tangent[1] / tanLen) * magnitude,
+          (tangent[2] / tanLen) * magnitude
+        ];
+      } else {
+        plate.velocity = [magnitude, 0, 0];
+      }
+    }
+  }
+
+  // ---- Step 6: Set base elevations ----
+  private assignBaseElevations(): void {
+    for (const plate of this.plates) {
+      // Continental base: 28-45 (closer to sea level = more varied coastlines)
+      // Oceanic base: 0-8 (deep ocean)
+      plate.baseElevation = plate.isOceanic
+        ? Math.floor(this.rng() * 9)          // 0-8
+        : 28 + Math.floor(this.rng() * 18);   // 28-45
+
+      for (const cell of plate.cells) {
+        // Add per-cell variation for more interesting interior terrain
+        const variation = plate.isOceanic
+          ? (this.rng() - 0.5) * 4
+          : (this.rng() - 0.5) * 14;
+        this.elevations[cell] = plate.baseElevation + variation;
+      }
+    }
+
+    // Add inland depressions on continental plates (future inland seas)
+    this.addInlandDepressions();
+  }
+
+  // Create random low-elevation depressions on continental plates
+  // These can dip below sea level, forming inland seas like Caspian, Mediterranean, Hudson Bay
+  private addInlandDepressions(): void {
+    for (const plate of this.plates) {
+      if (plate.isOceanic) continue;
+
+      // 1-3 depressions per continental plate, proportional to plate size
+      const numDepressions = Math.max(1, Math.floor(plate.cells.size / 3000) + (this.rng() < 0.5 ? 1 : 0));
+
+      const cellArray = [...plate.cells];
+
+      for (let d = 0; d < numDepressions; d++) {
+        // Pick a random cell not near plate edge as depression center
+        const center = cellArray[Math.floor(this.rng() * cellArray.length)];
+
+        // Depression depth: some just create lowlands, some breach sea level
+        const depth = 10 + this.rng() * 25; // 10-35 reduction
+        const radius = 3 + Math.floor(this.rng() * 4); // BFS hops
+
+        // BFS spread with decay
+        const visited = new Set<number>();
+        visited.add(center);
+        const queue: [number, number][] = [[center, 0]];
+
+        while (queue.length > 0) {
+          const [cell, dist] = queue.shift()!;
+          if (dist > radius) continue;
+
+          const factor = 1 - (dist / (radius + 1));
+          this.elevations[cell] -= depth * factor * factor; // quadratic falloff
+
+          for (const n of this.sphere.neighbors[cell]) {
+            if (!visited.has(n) && this.plateAssignment[n] === plate.id) {
+              visited.add(n);
+              queue.push([n, dist + 1]);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // ---- Step 7: Detect boundaries and classify ----
+  private detectBoundaries(): void {
+    const pairMap = new Map<string, {plateA: number; plateB: number; cells: number[]}>();
+
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      const myPlate = this.plateAssignment[i];
+      if (myPlate === -1) continue;
+
+      for (const neighbor of this.sphere.neighbors[i]) {
+        const neighborPlate = this.plateAssignment[neighbor];
+        if (neighborPlate === -1 || neighborPlate === myPlate) continue;
+
+        this.boundaryFlags[i] = 1;
+
+        const a = Math.min(myPlate, neighborPlate);
+        const b = Math.max(myPlate, neighborPlate);
+        const key = a + "-" + b;
+
+        if (!pairMap.has(key)) {
+          pairMap.set(key, {plateA: a, plateB: b, cells: []});
+        }
+        const pair = pairMap.get(key)!;
+        if (!pair.cells.includes(i)) {
+          pair.cells.push(i);
+        }
+        break;
+      }
+    }
+
+    // Compute convergence for each plate pair
+    for (const [, pair] of pairMap) {
+      const centroidA = this.computePlateCentroid(this.plates[pair.plateA]);
+      const centroidB = this.computePlateCentroid(this.plates[pair.plateB]);
+
+      const convergence = this.computeConvergence(
+        this.plates[pair.plateA],
+        this.plates[pair.plateB],
+        centroidA,
+        centroidB
+      );
+
+      const plateA = this.plates[pair.plateA];
+      const plateB = this.plates[pair.plateB];
+
+      let subtype: BoundarySubtype;
+      const isConvergent = convergence > 0.3;
+      const isDivergent = convergence < -0.3;
+
+      if (isConvergent) {
+        if (!plateA.isOceanic && !plateB.isOceanic) subtype = "cont-cont";
+        else if (plateA.isOceanic && plateB.isOceanic) subtype = "ocean-ocean";
+        else subtype = "ocean-cont";
+      } else if (isDivergent) {
+        if (plateA.isOceanic && plateB.isOceanic) subtype = "ocean-rift";
+        else if (!plateA.isOceanic && !plateB.isOceanic) subtype = "cont-rift";
+        else subtype = "ocean-rift";
+      } else {
+        subtype = "transform";
+      }
+
+      this.boundaries.push({
+        plateA: pair.plateA,
+        plateB: pair.plateB,
+        cells: pair.cells,
+        convergence,
+        subtype
+      });
+
+      for (const cell of pair.cells) {
+        this.boundaryConvergence[cell] = convergence;
+      }
+    }
+  }
+
+  private computePlateCentroid(plate: TectonicPlate): [number, number, number] {
+    let sx = 0, sy = 0, sz = 0;
+    for (const cell of plate.cells) {
+      const c = this.sphere.centroids[cell];
+      sx += c[0];
+      sy += c[1];
+      sz += c[2];
+    }
+    const n = plate.cells.size || 1;
+    return this.normalize3([sx / n, sy / n, sz / n]);
+  }
+
+  private computeConvergence(
+    plateA: TectonicPlate,
+    plateB: TectonicPlate,
+    centroidA: [number, number, number],
+    centroidB: [number, number, number]
+  ): number {
+    // Great circle direction from A to B
+    const dx = centroidB[0] - centroidA[0];
+    const dy = centroidB[1] - centroidA[1];
+    const dz = centroidB[2] - centroidA[2];
+    const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+    if (dist === 0) return 0;
+
+    const dirX = dx / dist;
+    const dirY = dy / dist;
+    const dirZ = dz / dist;
+
+    // How much A moves toward B + how much B moves toward A
+    const convA = plateA.velocity[0] * dirX + plateA.velocity[1] * dirY + plateA.velocity[2] * dirZ;
+    const convB = -(plateB.velocity[0] * dirX + plateB.velocity[1] * dirY + plateB.velocity[2] * dirZ);
+
+    return (convA + convB) * this.config.collisionIntensity;
+  }
+
+  // ---- Step 8: Boundary elevations ----
+  private computeBoundaryElevations(): void {
+    for (const boundary of this.boundaries) {
+      const absConv = Math.abs(boundary.convergence);
+
+      for (const cell of boundary.cells) {
+        const cellPlate = this.plates[this.plateAssignment[cell]];
+        let delta = 0;
+
+        switch (boundary.subtype) {
+          case "cont-cont":
+            // Himalayas-scale fold mountains — tallest features
+            delta = (40 + this.rng() * 40) * Math.max(absConv, 0.5);
+            break;
+          case "ocean-cont":
+            if (cellPlate.isOceanic) {
+              // Deep ocean trench (Mariana-style)
+              delta = -(12 + this.rng() * 10) * Math.max(absConv, 0.4);
+            } else {
+              // Andes-scale volcanic arc
+              delta = (30 + this.rng() * 35) * Math.max(absConv, 0.4);
+            }
+            break;
+          case "ocean-ocean":
+            // Island arc (Japan-style) — peaks should breach sea level
+            delta = (20 + this.rng() * 20) * Math.max(absConv, 0.4);
+            break;
+          case "ocean-rift":
+            // Mid-ocean ridge
+            delta = (5 + this.rng() * 5) * Math.max(absConv, 0.3);
+            break;
+          case "cont-rift":
+            // Continental rift — deep inland depressions that can form seas
+            delta = -(18 + this.rng() * 15) * Math.max(absConv, 0.4);
+            break;
+          case "transform":
+            delta = (this.rng() - 0.5) * 10;
+            break;
+        }
+
+        this.elevations[cell] += delta;
+      }
+    }
+  }
+
+  // ---- Step 9: Diffuse elevations ----
+  private diffuseElevations(): void {
+    const {smoothingPasses} = this.config;
+
+    for (let pass = 0; pass < smoothingPasses; pass++) {
+      const newElevations = new Float32Array(this.elevations);
+
+      for (let i = 0; i < this.numSphereFaces; i++) {
+        const neighbors = this.sphere.neighbors[i];
+        if (!neighbors || neighbors.length === 0) continue;
+
+        let sum = 0;
+        for (const n of neighbors) {
+          sum += this.elevations[n];
+        }
+        const neighborAvg = sum / neighbors.length;
+
+        if (this.boundaryFlags[i]) {
+          newElevations[i] = this.elevations[i] * 0.92 + neighborAvg * 0.08;
+        } else {
+          newElevations[i] = this.elevations[i] * 0.6 + neighborAvg * 0.4;
+        }
+      }
+
+      this.elevations = newElevations;
+    }
+  }
+
+  // ---- Step 10: Continental shelves ----
+  private generateContinentalShelves(): void {
+    const maxShelfHops = 3;
+    const shelfTarget = 18;
+
+    const coastCells: number[] = [];
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      if (this.elevations[i] >= 20) {
+        for (const n of this.sphere.neighbors[i]) {
+          if (this.elevations[n] < 20) {
+            coastCells.push(i);
+            break;
+          }
+        }
+      }
+    }
+
+    const distance = new Int8Array(this.numSphereFaces).fill(-1);
+    const queue: number[] = [];
+
+    for (const coast of coastCells) {
+      for (const n of this.sphere.neighbors[coast]) {
+        if (this.elevations[n] < 20 && distance[n] === -1) {
+          distance[n] = 1;
+          queue.push(n);
+        }
+      }
+    }
+
+    let idx = 0;
+    while (idx < queue.length) {
+      const cell = queue[idx++];
+      const d = distance[cell];
+      if (d >= maxShelfHops) continue;
+
+      for (const n of this.sphere.neighbors[cell]) {
+        if (this.elevations[n] < 20 && distance[n] === -1) {
+          distance[n] = d + 1;
+          queue.push(n);
+        }
+      }
+    }
+
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      if (distance[i] > 0 && distance[i] <= maxShelfHops) {
+        const factor = 1.0 - distance[i] / (maxShelfHops + 1);
+        this.elevations[i] = this.elevations[i] + (shelfTarget - this.elevations[i]) * factor * 0.4;
+      }
+    }
+  }
+
+  // ---- Step 11: Hotspot volcanoes ----
+  private addHotspots(): void {
+    const {hotspotCount} = this.config;
+
+    for (let h = 0; h < hotspotCount; h++) {
+      let center = -1;
+      let attempts = 0;
+      while (attempts < 100) {
+        const candidate = Math.floor(this.rng() * this.numSphereFaces);
+        if (!this.boundaryFlags[candidate]) {
+          center = candidate;
+          break;
+        }
+        attempts++;
+      }
+      if (center === -1) continue;
+
+      const peakHeight = 25 + Math.floor(this.rng() * 21); // 25-45
+      const change = new Float32Array(this.numSphereFaces);
+      change[center] = peakHeight;
+
+      const visited = new Uint8Array(this.numSphereFaces);
+      visited[center] = 1;
+      const queue = [center];
+
+      while (queue.length > 0) {
+        const cell = queue.shift()!;
+        for (const neighbor of this.sphere.neighbors[cell]) {
+          if (visited[neighbor]) continue;
+          visited[neighbor] = 1;
+          change[neighbor] = change[cell] * (0.7 + this.rng() * 0.15);
+          if (change[neighbor] > 1) queue.push(neighbor);
+        }
+      }
+
+      for (let i = 0; i < this.numSphereFaces; i++) {
+        this.elevations[i] += change[i];
+      }
+    }
+  }
+
+  // ---- Step 12: Erosion ----
+  private applyErosion(): void {
+    const {erosionPasses} = this.config;
+    if (erosionPasses === 0) return;
+
+    const particleCount = Math.floor(this.numSphereFaces * 0.3);
+
+    for (let pass = 0; pass < erosionPasses; pass++) {
+      const erosion = new Float32Array(this.numSphereFaces);
+      const deposition = new Float32Array(this.numSphereFaces);
+
+      for (let p = 0; p < particleCount; p++) {
+        let cell = Math.floor(this.rng() * this.numSphereFaces);
+        if (this.elevations[cell] < 20) continue;
+
+        let sediment = 0;
+        const maxSteps = 30;
+
+        for (let step = 0; step < maxSteps; step++) {
+          let minNeighbor = -1;
+          let minHeight = this.elevations[cell];
+
+          for (const n of this.sphere.neighbors[cell]) {
+            const h = this.elevations[n] - erosion[n] + deposition[n];
+            if (h < minHeight) {
+              minHeight = h;
+              minNeighbor = n;
+            }
+          }
+
+          if (minNeighbor === -1) break;
+
+          const currentH = this.elevations[cell] - erosion[cell] + deposition[cell];
+          const slope = currentH - minHeight;
+
+          const erodeAmount = Math.min(slope * 0.15, 2);
+          erosion[cell] += erodeAmount;
+          sediment += erodeAmount;
+
+          if (slope < 2 && sediment > 0) {
+            const depositAmount = Math.min(sediment * 0.3, 1);
+            deposition[minNeighbor] += depositAmount;
+            sediment -= depositAmount;
+          }
+
+          cell = minNeighbor;
+
+          if (this.elevations[cell] < 20) {
+            deposition[cell] += sediment * 0.5;
+            break;
+          }
+        }
+      }
+
+      for (let i = 0; i < this.numSphereFaces; i++) {
+        this.elevations[i] = this.elevations[i] - erosion[i] * 0.5 + deposition[i] * 0.3;
+      }
+    }
+  }
+
+  // ---- Step 13: Noise ----
+  private applyNoise(): void {
+    const {noiseLevel} = this.config;
+    if (noiseLevel === 0) return;
+
+    const rawNoise = new Float32Array(this.numSphereFaces);
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      rawNoise[i] = this.rng() * 2 - 1;
+    }
+
+    for (let pass = 0; pass < 3; pass++) {
+      const smoothed = new Float32Array(this.numSphereFaces);
+      for (let i = 0; i < this.numSphereFaces; i++) {
+        const neighbors = this.sphere.neighbors[i];
+        let sum = rawNoise[i];
+        for (const n of neighbors) {
+          sum += rawNoise[n];
+        }
+        smoothed[i] = sum / (neighbors.length + 1);
+      }
+      rawNoise.set(smoothed);
+    }
+
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      const isLand = this.elevations[i] >= 20;
+      const amplitude = isLand ? noiseLevel * 8 : noiseLevel * 3;
+      this.elevations[i] += rawNoise[i] * amplitude;
+    }
+  }
+
+  // ============================================================
+  // Post-projection grid-level enhancements
+  // ============================================================
+
+  // Add fractal noise near coastlines to create irregular, realistic edges
+  // This pushes some coastal land below sea level (creating bays/inlets)
+  // and some shallow ocean above sea level (creating peninsulas/headlands)
+  private applyCoastalFractal(elevations: Float32Array): void {
+    const seaLevel = 20;
+    const perturbRange = 5; // BFS hops from coast to apply fractal noise
+
+    // Find cells near coastline (both land and ocean side)
+    const coastDist = new Int8Array(this.numGridCells).fill(-1);
+    const queue: number[] = [];
+
+    for (let i = 0; i < this.numGridCells; i++) {
+      const isLand = elevations[i] >= seaLevel;
+      for (const n of this.grid.cells.c[i]) {
+        const nIsLand = elevations[n] >= seaLevel;
+        if (isLand !== nIsLand) {
+          if (coastDist[i] === -1) {
+            coastDist[i] = 0;
+            queue.push(i);
+          }
+          break;
+        }
+      }
+    }
+
+    let idx = 0;
+    while (idx < queue.length) {
+      const cell = queue[idx++];
+      const d = coastDist[cell];
+      if (d >= perturbRange) continue;
+      for (const n of this.grid.cells.c[cell]) {
+        if (coastDist[n] === -1) {
+          coastDist[n] = d + 1;
+          queue.push(n);
+        }
+      }
+    }
+
+    // Generate spatially coherent noise (smooth random values on grid)
+    const noise = new Float32Array(this.numGridCells);
+    for (let i = 0; i < this.numGridCells; i++) {
+      noise[i] = this.rng() * 2 - 1;
+    }
+    // Smooth twice for spatial coherence (not too smooth — we want fractal detail)
+    for (let pass = 0; pass < 2; pass++) {
+      const smoothed = new Float32Array(this.numGridCells);
+      for (let i = 0; i < this.numGridCells; i++) {
+        const neighbors = this.grid.cells.c[i];
+        let sum = noise[i];
+        for (const n of neighbors) sum += noise[n];
+        smoothed[i] = sum / (neighbors.length + 1);
+      }
+      noise.set(smoothed);
+    }
+
+    // Apply noise near coastlines — strongest right at the coast, fading inland/seaward
+    for (let i = 0; i < this.numGridCells; i++) {
+      if (coastDist[i] < 0 || coastDist[i] > perturbRange) continue;
+
+      const t = coastDist[i] / perturbRange; // 0 at coast, 1 at edge of influence
+      const strength = (1 - t * t) * 10; // quadratic falloff, max ±10 at coastline
+
+      elevations[i] += noise[i] * strength;
+    }
+  }
+
+  // ============================================================
+  // Projection: sphere → flat grid (equirectangular)
+  // ============================================================
+
+  private projectAndFinalize(): TectonicResult {
+    // Build spatial lookup for sphere faces: bin by (lon, lat)
+    const faceLonLat = this.sphere.centroids.map(c => this.sphere.toLonLat(c));
+
+    // For each grid cell, find the nearest sphere face and sample its elevation
+    const gridWidth = this.grid.cellsX * this.grid.spacing;
+    const gridHeight = this.grid.cellsY * this.grid.spacing;
+
+    // Grid cell (x, y) → (lon, lat) via equirectangular projection
+    // x: 0..gridWidth → lon: -π..π
+    // y: 0..gridHeight → lat: π/2..-π/2 (top = north pole, bottom = south pole)
+    const gridElevations = new Float32Array(this.numGridCells);
+    const gridPlateIds = new Int8Array(this.numGridCells).fill(-1);
+
+    // Build a bucketed spatial index for fast nearest-face lookup
+    const lonBuckets = 72; // 5° per bucket
+    const latBuckets = 36;
+    const buckets: number[][] = new Array(lonBuckets * latBuckets).fill(null).map(() => []);
+
+    for (let f = 0; f < this.numSphereFaces; f++) {
+      const [lon, lat] = faceLonLat[f];
+      const bLon = Math.floor(((lon + Math.PI) / (2 * Math.PI)) * lonBuckets) % lonBuckets;
+      const bLat = minmax(Math.floor(((lat + Math.PI / 2) / Math.PI) * latBuckets), 0, latBuckets - 1);
+      buckets[bLat * lonBuckets + bLon].push(f);
+    }
+
+    for (let gi = 0; gi < this.numGridCells; gi++) {
+      const [gx, gy] = this.grid.points[gi];
+
+      // Map grid position to lon/lat
+      const lon = (gx / gridWidth) * 2 * Math.PI - Math.PI;
+      const lat = (1 - gy / gridHeight) * Math.PI - Math.PI / 2;
+
+      // Find nearest sphere face via bucket search
+      const bLon = Math.floor(((lon + Math.PI) / (2 * Math.PI)) * lonBuckets) % lonBuckets;
+      const bLat = minmax(Math.floor(((lat + Math.PI / 2) / Math.PI) * latBuckets), 0, latBuckets - 1);
+
+      let bestFace = -1;
+      let bestDist = Infinity;
+
+      // Search nearby buckets (3x3 neighborhood)
+      for (let dlat = -1; dlat <= 1; dlat++) {
+        for (let dlon = -1; dlon <= 1; dlon++) {
+          const bl = bLat + dlat;
+          if (bl < 0 || bl >= latBuckets) continue;
+          const bln = ((bLon + dlon) % lonBuckets + lonBuckets) % lonBuckets;
+          const bucket = buckets[bl * lonBuckets + bln];
+
+          for (const f of bucket) {
+            const [fLon, fLat] = faceLonLat[f];
+            // Angular distance with longitude wrapping
+            let dLon = lon - fLon;
+            if (dLon > Math.PI) dLon -= 2 * Math.PI;
+            else if (dLon < -Math.PI) dLon += 2 * Math.PI;
+            const dLat = lat - fLat;
+            const dist = dLon * dLon + dLat * dLat;
+            if (dist < bestDist) {
+              bestDist = dist;
+              bestFace = f;
+            }
+          }
+        }
+      }
+
+      if (bestFace === -1) {
+        // Fallback: brute force search (shouldn't happen with proper bucketing)
+        for (let f = 0; f < this.numSphereFaces; f++) {
+          const [fLon, fLat] = faceLonLat[f];
+          let dLon = lon - fLon;
+          if (dLon > Math.PI) dLon -= 2 * Math.PI;
+          else if (dLon < -Math.PI) dLon += 2 * Math.PI;
+          const dLat = lat - fLat;
+          const dist = dLon * dLon + dLat * dLat;
+          if (dist < bestDist) {
+            bestDist = dist;
+            bestFace = f;
+          }
+        }
+      }
+
+      gridElevations[gi] = this.elevations[bestFace];
+      gridPlateIds[gi] = this.plateAssignment[bestFace];
+    }
+
+    // Light smoothing to remove pixelation from sphere→grid sampling
+    // Only 1 pass with gentle blend to preserve peaks and valleys
+    {
+      const smoothed = new Float32Array(gridElevations);
+      for (let i = 0; i < this.numGridCells; i++) {
+        const neighbors = this.grid.cells.c[i];
+        if (!neighbors || neighbors.length === 0) continue;
+        let sum = 0;
+        for (const n of neighbors) sum += gridElevations[n];
+        smoothed[i] = gridElevations[i] * 0.8 + (sum / neighbors.length) * 0.2;
+      }
+      gridElevations.set(smoothed);
+    }
+
+    // Force top/bottom border cells to deep ocean (poles)
+    // Left/right edges are the projection seam — they should match naturally
+    const {cellsX, cellsY} = this.grid;
+    for (let i = 0; i < this.numGridCells; i++) {
+      if (!this.grid.cells.b[i]) continue;
+      const row = Math.floor(i / cellsX);
+      const isTopBottom = row === 0 || row === cellsY - 1;
+      if (isTopBottom) {
+        gridElevations[i] = Math.min(gridElevations[i], Math.floor(this.rng() * 6));
+      }
+    }
+
+    // Ensure left/right edge cells have matching elevations (same longitude on sphere)
+    for (let row = 0; row < cellsY; row++) {
+      const leftCell = row * cellsX;
+      const rightCell = row * cellsX + (cellsX - 1);
+      const avg = (gridElevations[leftCell] + gridElevations[rightCell]) / 2;
+      gridElevations[leftCell] = avg;
+      gridElevations[rightCell] = avg;
+    }
+
+    // ---- Sea level adjustment ----
+    // Shift elevations to control land/water balance
+    // Positive seaLevel = more water, negative = more land
+    const seaLevelShift = this.config.seaLevel;
+    if (seaLevelShift !== 0) {
+      for (let i = 0; i < this.numGridCells; i++) {
+        gridElevations[i] -= seaLevelShift;
+      }
+    }
+
+    // ---- Fractal coastline perturbation ----
+    // Add noise near coastlines to create irregular, fractal-like edges
+    this.applyCoastalFractal(gridElevations);
+
+    // Clamp and quantize to final heightmap
+    const heights = new Uint8Array(this.numGridCells);
+    for (let i = 0; i < this.numGridCells; i++) {
+      heights[i] = minmax(Math.round(gridElevations[i]), 0, 100);
+    }
+
+    // Compute metadata on the grid
+    const roughness = new Float32Array(this.numGridCells);
+    const boundaryType = new Int8Array(this.numGridCells);
+    const isOceanicArr = new Uint8Array(this.numGridCells);
+
+    // Detect grid-level boundaries by checking plate assignment changes
+    const gridBoundaryFlags = new Uint8Array(this.numGridCells);
+    const gridBoundaryConv = new Float32Array(this.numGridCells);
+
+    for (let i = 0; i < this.numGridCells; i++) {
+      const pid = gridPlateIds[i];
+      if (pid >= 0) {
+        isOceanicArr[i] = this.plates[pid].isOceanic ? 1 : 0;
+      }
+      for (const n of this.grid.cells.c[i]) {
+        if (gridPlateIds[n] !== pid && gridPlateIds[n] >= 0 && pid >= 0) {
+          gridBoundaryFlags[i] = 1;
+          // Find the boundary convergence for this pair
+          const a = Math.min(pid, gridPlateIds[n]);
+          const b = Math.max(pid, gridPlateIds[n]);
+          for (const boundary of this.boundaries) {
+            if (boundary.plateA === a && boundary.plateB === b) {
+              gridBoundaryConv[i] = boundary.convergence;
+              break;
+            }
+          }
+          break;
+        }
+      }
+    }
+
+    // BFS distance from boundaries for roughness
+    const distFromBoundary = new Float32Array(this.numGridCells).fill(Infinity);
+    const bfsQueue: number[] = [];
+
+    for (let i = 0; i < this.numGridCells; i++) {
+      if (gridBoundaryFlags[i]) {
+        distFromBoundary[i] = 0;
+        bfsQueue.push(i);
+        const conv = gridBoundaryConv[i];
+        if (conv > 0.3) boundaryType[i] = 1;
+        else if (conv < -0.3) boundaryType[i] = -1;
+        else boundaryType[i] = 2;
+      }
+    }
+
+    let bfsIdx = 0;
+    while (bfsIdx < bfsQueue.length) {
+      const cell = bfsQueue[bfsIdx++];
+      for (const n of this.grid.cells.c[cell]) {
+        const newDist = distFromBoundary[cell] + 1;
+        if (newDist < distFromBoundary[n]) {
+          distFromBoundary[n] = newDist;
+          bfsQueue.push(n);
+        }
+      }
+    }
+
+    const maxDecayDist = 10;
+    for (let i = 0; i < this.numGridCells; i++) {
+      if (distFromBoundary[i] === 0) {
+        const absConv = Math.abs(gridBoundaryConv[i]);
+        roughness[i] = minmax(0.5 + absConv * 0.5, 0.1, 1.0);
+      } else if (distFromBoundary[i] < maxDecayDist) {
+        const factor = 1.0 - distFromBoundary[i] / maxDecayDist;
+        roughness[i] = 0.1 + factor * 0.5;
+      } else {
+        roughness[i] = 0.1 + this.rng() * 0.1;
+      }
+    }
+
+    const metadata: TectonicMetadata = {
+      plateIds: new Uint8Array(gridPlateIds.buffer.slice(0)),
+      boundaryType,
+      roughness,
+      isOceanic: isOceanicArr,
+      plates: this.plates,
+      boundaries: this.boundaries
+    };
+
+    this.logDiagnostics(heights);
+
+    return {heights, metadata};
+  }
+
+  private logDiagnostics(heights: Uint8Array): void {
+    const n = heights.length;
+
+    // Basic stats
+    let min = 100, max = 0, sum = 0;
+    const histogram = new Array(10).fill(0); // 10 buckets of 10
+    let waterCount = 0, landCount = 0;
+
+    for (let i = 0; i < n; i++) {
+      const h = heights[i];
+      if (h < min) min = h;
+      if (h > max) max = h;
+      sum += h;
+      histogram[Math.min(Math.floor(h / 10), 9)]++;
+      if (h < 20) waterCount++;
+      else landCount++;
+    }
+
+    // Sphere-level stats (pre-projection)
+    let sphereMin = Infinity, sphereMax = -Infinity;
+    for (let i = 0; i < this.numSphereFaces; i++) {
+      if (this.elevations[i] < sphereMin) sphereMin = this.elevations[i];
+      if (this.elevations[i] > sphereMax) sphereMax = this.elevations[i];
+    }
+
+    // Plate breakdown
+    const plateStats: string[] = [];
+    for (const plate of this.plates) {
+      const type = plate.isOceanic ? "oceanic" : "continental";
+      plateStats.push(`  Plate ${plate.id}: ${type}, ${plate.cells.size} faces, base=${plate.baseElevation.toFixed(1)}`);
+    }
+
+    // Boundary breakdown
+    const boundaryStats: string[] = [];
+    const subtypeCounts: Record<string, number> = {};
+    for (const b of this.boundaries) {
+      subtypeCounts[b.subtype] = (subtypeCounts[b.subtype] || 0) + 1;
+    }
+    for (const [subtype, count] of Object.entries(subtypeCounts)) {
+      boundaryStats.push(`  ${subtype}: ${count} boundaries`);
+    }
+
+    console.log(`
+╔══════════════════════════════════════════════════════╗
+║         TECTONIC HEIGHTMAP DIAGNOSTICS               ║
+╠══════════════════════════════════════════════════════╣
+║ SPHERE                                               ║
+║   Faces: ${this.numSphereFaces.toString().padEnd(43)}║
+║   Elevation range: ${sphereMin.toFixed(1)} — ${sphereMax.toFixed(1)}${" ".repeat(Math.max(0, 30 - `${sphereMin.toFixed(1)} — ${sphereMax.toFixed(1)}`.length))}║
+║                                                      ║
+║ GRID OUTPUT (0-100 scale, sea level = 20)            ║
+║   Cells: ${n.toString().padEnd(43)}║
+║   Height range: ${min} — ${max}${" ".repeat(Math.max(0, 35 - `${min} — ${max}`.length))}║
+║   Mean height: ${(sum / n).toFixed(1).padEnd(37)}║
+║   Water cells: ${waterCount} (${(waterCount / n * 100).toFixed(1)}%)${" ".repeat(Math.max(0, 30 - `${waterCount} (${(waterCount / n * 100).toFixed(1)}%)`.length))}║
+║   Land cells:  ${landCount} (${(landCount / n * 100).toFixed(1)}%)${" ".repeat(Math.max(0, 30 - `${landCount} (${(landCount / n * 100).toFixed(1)}%)`.length))}║
+║                                                      ║
+║ HEIGHT DISTRIBUTION                                  ║
+║   0-9:   ${histogram[0].toString().padStart(6)} ${"█".repeat(Math.round(histogram[0] / n * 50)).padEnd(30)}║
+║   10-19: ${histogram[1].toString().padStart(6)} ${"█".repeat(Math.round(histogram[1] / n * 50)).padEnd(30)}║
+║   20-29: ${histogram[2].toString().padStart(6)} ${"█".repeat(Math.round(histogram[2] / n * 50)).padEnd(30)}║
+║   30-39: ${histogram[3].toString().padStart(6)} ${"█".repeat(Math.round(histogram[3] / n * 50)).padEnd(30)}║
+║   40-49: ${histogram[4].toString().padStart(6)} ${"█".repeat(Math.round(histogram[4] / n * 50)).padEnd(30)}║
+║   50-59: ${histogram[5].toString().padStart(6)} ${"█".repeat(Math.round(histogram[5] / n * 50)).padEnd(30)}║
+║   60-69: ${histogram[6].toString().padStart(6)} ${"█".repeat(Math.round(histogram[6] / n * 50)).padEnd(30)}║
+║   70-79: ${histogram[7].toString().padStart(6)} ${"█".repeat(Math.round(histogram[7] / n * 50)).padEnd(30)}║
+║   80-89: ${histogram[8].toString().padStart(6)} ${"█".repeat(Math.round(histogram[8] / n * 50)).padEnd(30)}║
+║   90-100:${histogram[9].toString().padStart(6)} ${"█".repeat(Math.round(histogram[9] / n * 50)).padEnd(30)}║
+║                                                      ║
+║ PLATES (${this.plates.length})                                          ║
+${plateStats.map(s => `║${s.padEnd(54)}║`).join("\n")}
+║                                                      ║
+║ BOUNDARIES                                           ║
+${boundaryStats.map(s => `║${s.padEnd(54)}║`).join("\n")}
+╚══════════════════════════════════════════════════════╝
+`);
+  }
+
+  // ---- Vector math utilities ----
+
+  private normalize3(v: [number, number, number]): [number, number, number] {
+    const len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+    if (len === 0) return [0, 1, 0];
+    return [v[0] / len, v[1] / len, v[2] / len];
+  }
+
+  private cross(a: [number, number, number], b: [number, number, number]): [number, number, number] {
+    return [
+      a[1] * b[2] - a[2] * b[1],
+      a[2] * b[0] - a[0] * b[2],
+      a[0] * b[1] - a[1] * b[0]
+    ];
+  }
+
+  private length3(v: [number, number, number]): number {
+    return Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+  }
+}
diff --git a/src/types/TectonicMetadata.ts b/src/types/TectonicMetadata.ts
new file mode 100644
index 00000000..21f890df
--- /dev/null
+++ b/src/types/TectonicMetadata.ts
@@ -0,0 +1,60 @@
+export interface TectonicPlate {
+  id: number;
+  cells: Set<number>;
+  isOceanic: boolean;
+  velocity: [number, number, number]; // 3D velocity vector on sphere surface
+  baseElevation: number;
+  seedCell: number;
+}
+
+export type BoundarySubtype =
+  | "cont-cont"
+  | "ocean-cont"
+  | "ocean-ocean"
+  | "cont-rift"
+  | "ocean-rift"
+  | "transform";
+
+export interface PlateBoundary {
+  plateA: number;
+  plateB: number;
+  cells: number[];
+  convergence: number;
+  subtype: BoundarySubtype;
+}
+
+export interface TectonicConfig {
+  plateCount: number;
+  continentalRatio: number;
+  collisionIntensity: number;
+  noiseLevel: number;
+  hotspotCount: number;
+  smoothingPasses: number;
+  erosionPasses: number;
+  seaLevel: number; // elevation shift: 0 = default, positive = more water, negative = more land
+}
+
+export const DEFAULT_TECTONIC_CONFIG: TectonicConfig = {
+  plateCount: 12,
+  continentalRatio: 0.35,
+  collisionIntensity: 1.0,
+  noiseLevel: 0.3,
+  hotspotCount: 3,
+  smoothingPasses: 3,
+  erosionPasses: 2,
+  seaLevel: 0
+};
+
+export interface TectonicMetadata {
+  plateIds: Uint8Array;
+  boundaryType: Int8Array;
+  roughness: Float32Array;
+  isOceanic: Uint8Array;
+  plates: TectonicPlate[];
+  boundaries: PlateBoundary[];
+}
+
+declare global {
+  var tectonicMetadata: TectonicMetadata | null;
+  var tectonicGenerator: import("../modules/tectonic-generator").TectonicPlateGenerator | null;
+}
diff --git a/src/types/global.ts b/src/types/global.ts
index efc45d7c..1534bf8e 100644
--- a/src/types/global.ts
+++ b/src/types/global.ts
@@ -15,6 +15,7 @@ declare global {
   var options: any;
 
   var heightmapTemplates: any;
+  var tectonicTemplates: any;
   var Routes: any;
   var populationRate: number;
   var urbanDensity: number;

From 18bddd0cec35e16c680fc5d1556ee9895b564172 Mon Sep 17 00:00:00 2001
From: Dobidop <67412288+Dobidop@users.noreply.github.com>
Date: Sun, 22 Mar 2026 12:17:56 +0100
Subject: [PATCH 5/8] improved tectonic edit UI

---
 public/modules/ui/tectonic-editor.js | 457 ++++++++++++++++-----------
 src/index.html                       |   4 +-
 2 files changed, 273 insertions(+), 188 deletions(-)

diff --git a/public/modules/ui/tectonic-editor.js b/public/modules/ui/tectonic-editor.js
index fe60402e..538c7c93 100644
--- a/public/modules/ui/tectonic-editor.js
+++ b/public/modules/ui/tectonic-editor.js
@@ -1,10 +1,11 @@
 "use strict";
 
 // Tectonic Plate Editor
-// Visualizes tectonic plates and allows editing plate properties (type, velocity)
-// then regenerates terrain from the modified plate configuration
+// Click plates to select & edit, drag arrows to set velocity/direction
 
 let tectonicViewMode = "plates"; // "plates" or "heights"
+let tectonicPlateColors = [];
+let tectonicSelectedPlate = -1;
 
 function editTectonics() {
   if (customization) return tip("Please exit the customization mode first", false, "error");
@@ -15,18 +16,18 @@ function editTectonics() {
 
   closeDialogs(".stable");
   tectonicViewMode = "plates";
+  tectonicSelectedPlate = -1;
 
   const plates = window.tectonicGenerator.getPlates();
-  const plateIds = window.tectonicMetadata.plateIds;
-  const plateColors = generatePlateColors(plates.length);
+  tectonicPlateColors = generatePlateColors(plates.length);
 
-  drawPlateOverlay(plateIds, plateColors, plates);
-  buildPlateList(plates, plateColors);
+  drawPlateOverlay();
+  closePlatePopup();
 
   $("#tectonicEditor").dialog({
     title: "Tectonic Plate Editor",
     resizable: false,
-    width: "22em",
+    width: "20em",
     position: {my: "right top", at: "right-10 top+10", of: "svg"},
     close: closeTectonicEditor
   });
@@ -51,80 +52,80 @@ function generatePlateColors(count) {
   return colors;
 }
 
-// Height-to-color function matching FMG's heightmap editor
 function tectonicHeightColor(h) {
   if (h < 20) {
-    // Ocean: deep blue to light blue
     const t = h / 20;
-    const r = Math.round(30 + t * 40);
-    const g = Math.round(60 + t * 80);
-    const b = Math.round(120 + t * 100);
-    return `rgb(${r},${g},${b})`;
-  } else {
-    // Land: green to brown to white
-    const t = (h - 20) / 80;
-    if (t < 0.3) {
-      const s = t / 0.3;
-      return `rgb(${Math.round(80 + s * 60)},${Math.round(160 + s * 40)},${Math.round(60 + s * 20)})`;
-    } else if (t < 0.7) {
-      const s = (t - 0.3) / 0.4;
-      return `rgb(${Math.round(140 + s * 60)},${Math.round(200 - s * 80)},${Math.round(80 - s * 40)})`;
-    } else {
-      const s = (t - 0.7) / 0.3;
-      return `rgb(${Math.round(200 + s * 55)},${Math.round(120 + s * 135)},${Math.round(40 + s * 215)})`;
-    }
+    return `rgb(${Math.round(30 + t * 40)},${Math.round(60 + t * 80)},${Math.round(120 + t * 100)})`;
   }
+  const t = (h - 20) / 80;
+  if (t < 0.3) {
+    const s = t / 0.3;
+    return `rgb(${Math.round(80 + s * 60)},${Math.round(160 + s * 40)},${Math.round(60 + s * 20)})`;
+  }
+  if (t < 0.7) {
+    const s = (t - 0.3) / 0.4;
+    return `rgb(${Math.round(140 + s * 60)},${Math.round(200 - s * 80)},${Math.round(80 - s * 40)})`;
+  }
+  const s = (t - 0.7) / 0.3;
+  return `rgb(${Math.round(200 + s * 55)},${Math.round(120 + s * 135)},${Math.round(40 + s * 215)})`;
 }
 
-function drawPlateOverlay(plateIds, plateColors, plates) {
+// ---- Overlay Drawing ----
+
+function drawPlateOverlay() {
+  const plates = window.tectonicGenerator.getPlates();
+  const plateIds = window.tectonicMetadata.plateIds;
+  const colors = tectonicPlateColors;
+
   viewbox.select("#tectonicOverlay").remove();
   const overlay = viewbox.insert("g", "#terrs").attr("id", "tectonicOverlay");
-  const numCells = plateIds.length;
 
-  for (let i = 0; i < numCells; i++) {
+  // Cell polygons
+  const cellGroup = overlay.append("g").attr("id", "plateCells");
+  for (let i = 0; i < plateIds.length; i++) {
     const pid = plateIds[i];
     if (pid < 0 || pid >= plates.length) continue;
-
     const points = getGridPolygon(i);
     if (!points) continue;
 
-    overlay.append("polygon")
+    const selected = pid === tectonicSelectedPlate;
+    cellGroup.append("polygon")
       .attr("points", points)
-      .attr("fill", plateColors[pid])
-      .attr("fill-opacity", 0.35)
-      .attr("stroke", plateColors[pid])
-      .attr("stroke-opacity", 0.5)
+      .attr("fill", colors[pid])
+      .attr("fill-opacity", tectonicSelectedPlate === -1 ? 0.35 : (selected ? 0.55 : 0.15))
+      .attr("stroke", colors[pid])
+      .attr("stroke-opacity", 0.4)
       .attr("stroke-width", 0.2)
       .attr("data-plate", pid)
-      .on("click", function () {
-        highlightPlate(pid, plateColors);
-      });
+      .on("click", function () { selectPlate(pid); });
   }
 
-  drawVelocityArrows(overlay, plates, plateIds, plateColors);
+  // Velocity arrows (draggable)
+  drawVelocityArrows(overlay, plates, plateIds, colors);
 }
 
 function drawHeightOverlay(heights) {
   viewbox.select("#tectonicOverlay").remove();
   const overlay = viewbox.insert("g", "#terrs").attr("id", "tectonicOverlay");
-  const numCells = heights.length;
 
-  for (let i = 0; i < numCells; i++) {
+  for (let i = 0; i < heights.length; i++) {
     const points = getGridPolygon(i);
     if (!points) continue;
-
+    const c = tectonicHeightColor(heights[i]);
     overlay.append("polygon")
       .attr("points", points)
-      .attr("fill", tectonicHeightColor(heights[i]))
+      .attr("fill", c)
       .attr("fill-opacity", 0.85)
-      .attr("stroke", tectonicHeightColor(heights[i]))
+      .attr("stroke", c)
       .attr("stroke-opacity", 0.5)
       .attr("stroke-width", 0.1);
   }
 }
 
-function drawVelocityArrows(overlay, plates, plateIds, plateColors) {
+function drawVelocityArrows(overlay, plates, plateIds, colors) {
+  ensureArrowheadMarker();
   const arrowGroup = overlay.append("g").attr("id", "velocityArrows");
+  const arrowScale = 30;
 
   for (const plate of plates) {
     const centroid = computeGridPlateCentroid(plate.id, plateIds);
@@ -132,196 +133,285 @@ function drawVelocityArrows(overlay, plates, plateIds, plateColors) {
 
     const [cx, cy] = centroid;
     const vel = plate.velocity;
-    const arrowScale = 30;
     const dx = vel[0] * arrowScale;
     const dy = -vel[1] * arrowScale;
     const mag = Math.sqrt(dx * dx + dy * dy);
-    if (mag < 2) continue;
 
+    const tipX = cx + dx;
+    const tipY = cy + dy;
+
+    // Arrow line
     arrowGroup.append("line")
+      .attr("class", "velocityLine")
+      .attr("data-plate", plate.id)
       .attr("x1", cx).attr("y1", cy)
-      .attr("x2", cx + dx).attr("y2", cy + dy)
-      .attr("stroke", plateColors[plate.id])
-      .attr("stroke-width", 2)
+      .attr("x2", tipX).attr("y2", tipY)
+      .attr("stroke", colors[plate.id])
+      .attr("stroke-width", mag < 2 ? 1 : 2)
       .attr("stroke-opacity", 0.9)
+      .attr("stroke-dasharray", mag < 2 ? "2,2" : "none")
       .attr("marker-end", "url(#tectonicArrowhead)");
 
+    // Draggable handle at arrow tip
+    arrowGroup.append("circle")
+      .attr("class", "velocityHandle")
+      .attr("data-plate", plate.id)
+      .attr("cx", tipX).attr("cy", tipY)
+      .attr("r", 5)
+      .attr("fill", colors[plate.id])
+      .attr("fill-opacity", 0.7)
+      .attr("stroke", "#fff")
+      .attr("stroke-width", 1)
+      .attr("cursor", "grab")
+      .call(d3.drag()
+        .on("start", function () { d3.select(this).attr("cursor", "grabbing"); })
+        .on("drag", function () { dragVelocityHandle(this, plate, cx, cy, arrowScale); })
+        .on("end", function () { d3.select(this).attr("cursor", "grab"); })
+      );
+
+    // Plate label
     arrowGroup.append("text")
-      .attr("x", cx).attr("y", cy - 5)
+      .attr("x", cx).attr("y", cy - 6)
       .attr("text-anchor", "middle")
       .attr("font-size", "8px")
-      .attr("fill", plateColors[plate.id])
+      .attr("fill", colors[plate.id])
       .attr("stroke", "#000")
       .attr("stroke-width", 0.3)
       .attr("paint-order", "stroke")
-      .text(`P${plate.id}`);
+      .attr("cursor", "pointer")
+      .text(`P${plate.id}`)
+      .on("click", function () { selectPlate(plate.id); });
   }
+}
 
-  if (!document.getElementById("tectonicArrowhead")) {
-    const defs = d3.select("svg").select("defs");
-    defs.append("marker")
-      .attr("id", "tectonicArrowhead")
-      .attr("viewBox", "0 0 10 10")
-      .attr("refX", 8).attr("refY", 5)
-      .attr("markerWidth", 6).attr("markerHeight", 6)
-      .attr("orient", "auto-start-reverse")
-      .append("path")
-      .attr("d", "M 0 0 L 10 5 L 0 10 z")
-      .attr("fill", "#fff")
-      .attr("stroke", "#333")
-      .attr("stroke-width", 0.5);
+function dragVelocityHandle(handle, plate, cx, cy, arrowScale) {
+  const [mx, my] = d3.mouse(viewbox.node());
+
+  // Update handle position
+  d3.select(handle).attr("cx", mx).attr("cy", my);
+
+  // Update arrow line
+  viewbox.select(`.velocityLine[data-plate="${plate.id}"]`)
+    .attr("x2", mx).attr("y2", my);
+
+  // Compute new velocity from drag position
+  const dx = mx - cx;
+  const dy = my - cy;
+  plate.velocity[0] = dx / arrowScale;
+  plate.velocity[1] = -dy / arrowScale; // flip Y
+  plate.velocity[2] = 0;
+
+  // Update popup if this plate is selected
+  if (tectonicSelectedPlate === plate.id) {
+    updatePopupValues(plate);
   }
 }
 
+function ensureArrowheadMarker() {
+  if (document.getElementById("tectonicArrowhead")) return;
+  d3.select("svg").select("defs").append("marker")
+    .attr("id", "tectonicArrowhead")
+    .attr("viewBox", "0 0 10 10")
+    .attr("refX", 8).attr("refY", 5)
+    .attr("markerWidth", 6).attr("markerHeight", 6)
+    .attr("orient", "auto-start-reverse")
+    .append("path")
+    .attr("d", "M 0 0 L 10 5 L 0 10 z")
+    .attr("fill", "#fff")
+    .attr("stroke", "#333")
+    .attr("stroke-width", 0.5);
+}
+
 function computeGridPlateCentroid(plateId, plateIds) {
   let sumX = 0, sumY = 0, count = 0;
   for (let i = 0; i < plateIds.length; i++) {
     if (plateIds[i] !== plateId) continue;
-    const [x, y] = grid.points[i];
-    sumX += x;
-    sumY += y;
+    sumX += grid.points[i][0];
+    sumY += grid.points[i][1];
     count++;
   }
   if (count === 0) return null;
   return [sumX / count, sumY / count];
 }
 
-function highlightPlate(plateId, plateColors) {
-  viewbox.select("#tectonicOverlay").selectAll("polygon")
+// ---- Plate Selection & Popup ----
+
+function selectPlate(plateId) {
+  const plates = window.tectonicGenerator.getPlates();
+  if (plateId < 0 || plateId >= plates.length) return;
+
+  tectonicSelectedPlate = plateId;
+
+  // Update overlay opacity to highlight selected plate
+  viewbox.select("#plateCells").selectAll("polygon")
     .attr("fill-opacity", function () {
-      return +this.getAttribute("data-plate") === plateId ? 0.6 : 0.15;
+      return +this.getAttribute("data-plate") === plateId ? 0.55 : 0.15;
     });
 
-  const row = byId(`tectonicPlate_${plateId}`);
-  if (row) {
-    row.scrollIntoView({behavior: "smooth", block: "nearest"});
-    row.style.outline = "2px solid " + plateColors[plateId];
-    setTimeout(() => row.style.outline = "", 1500);
-  }
+  showPlatePopup(plates[plateId]);
 }
 
-function buildPlateList(plates, plateColors) {
-  const container = byId("tectonicPlateList");
-  container.innerHTML = "";
+function showPlatePopup(plate) {
+  closePlatePopup();
 
-  const table = document.createElement("table");
-  table.style.width = "100%";
-  table.style.borderCollapse = "collapse";
-  table.style.fontSize = "11px";
+  const plateIds = window.tectonicMetadata.plateIds;
+  const centroid = computeGridPlateCentroid(plate.id, plateIds);
+  if (!centroid) return;
 
-  const header = document.createElement("tr");
-  header.innerHTML = `
-    <th style="width:30px">ID</th>
-    <th style="width:60px">Type</th>
-    <th>Velocity</th>
-    <th style="width:50px">Dir</th>
+  // Count cells
+  let cellCount = 0;
+  for (let i = 0; i < plateIds.length; i++) {
+    if (plateIds[i] === plate.id) cellCount++;
+  }
+  const pct = (cellCount / plateIds.length * 100).toFixed(1);
+
+  const vel = plate.velocity;
+  const speed = Math.sqrt(vel[0] ** 2 + vel[1] ** 2 + vel[2] ** 2);
+  const dirDeg = Math.round(Math.atan2(-vel[1], vel[0]) * 180 / Math.PI);
+  const color = tectonicPlateColors[plate.id];
+
+  const popup = document.createElement("div");
+  popup.id = "tectonicPlatePopup";
+  popup.style.cssText = `
+    position: absolute; z-index: 1000;
+    background: rgba(30,30,30,0.95); color: #eee;
+    border: 2px solid ${color}; border-radius: 6px;
+    padding: 10px 14px; font-size: 12px;
+    min-width: 180px; pointer-events: auto;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
   `;
-  table.appendChild(header);
 
-  for (const plate of plates) {
-    const row = document.createElement("tr");
-    row.id = `tectonicPlate_${plate.id}`;
-    row.style.borderBottom = "1px solid #444";
-    row.style.cursor = "pointer";
+  popup.innerHTML = `
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
+      <strong style="color:${color}">Plate ${plate.id}</strong>
+      <span style="font-size:10px;color:#999">${cellCount} cells (${pct}%)</span>
+    </div>
+    <div style="margin-bottom:6px">
+      <label style="font-size:11px">Type: </label>
+      <select id="popupPlateType" style="font-size:11px;margin-left:4px">
+        <option value="continental" ${!plate.isOceanic ? "selected" : ""}>Continental</option>
+        <option value="oceanic" ${plate.isOceanic ? "selected" : ""}>Oceanic</option>
+      </select>
+    </div>
+    <div style="margin-bottom:6px">
+      <label style="font-size:11px">Speed: </label>
+      <input id="popupPlateSpeed" type="range" min="0" max="1.5" step="0.05" value="${speed.toFixed(2)}"
+        style="width:80px;vertical-align:middle">
+      <span id="popupSpeedLabel" style="font-size:10px">${speed.toFixed(2)}</span>
+    </div>
+    <div style="margin-bottom:8px">
+      <label style="font-size:11px">Direction: </label>
+      <input id="popupPlateDir" type="range" min="-180" max="180" step="5" value="${dirDeg}"
+        style="width:80px;vertical-align:middle">
+      <span id="popupDirLabel" style="font-size:10px">${dirDeg}&deg;</span>
+    </div>
+    <div style="font-size:10px;color:#888;text-align:center">
+      Drag the arrow on the map to set velocity
+    </div>
+  `;
 
-    const vel = plate.velocity;
-    const speed = Math.sqrt(vel[0] * vel[0] + vel[1] * vel[1] + vel[2] * vel[2]).toFixed(2);
-    const dirDeg = Math.round(Math.atan2(-vel[1], vel[0]) * 180 / Math.PI);
+  document.body.appendChild(popup);
 
-    row.innerHTML = `
-      <td style="text-align:center">
-        <span style="display:inline-block;width:12px;height:12px;background:${plateColors[plate.id]};border-radius:2px;vertical-align:middle"></span>
-        ${plate.id}
-      </td>
-      <td>
-        <select data-plate="${plate.id}" class="plateTypeSelect" style="font-size:10px;width:100%">
-          <option value="continental" ${!plate.isOceanic ? "selected" : ""}>Land</option>
-          <option value="oceanic" ${plate.isOceanic ? "selected" : ""}>Ocean</option>
-        </select>
-      </td>
-      <td style="text-align:center">
-        <input type="range" data-plate="${plate.id}" class="plateSpeedRange"
-          min="0" max="1.5" step="0.05" value="${speed}"
-          style="width:60px;vertical-align:middle">
-        <span class="plateSpeedLabel" style="font-size:9px">${speed}</span>
-      </td>
-      <td style="text-align:center">
-        <input type="number" data-plate="${plate.id}" class="plateDirInput"
-          min="-180" max="180" step="15" value="${dirDeg}"
-          style="width:45px;font-size:10px">
-      </td>
-    `;
+  // Position popup near the plate centroid but in screen coords
+  const svgRect = document.querySelector("svg").getBoundingClientRect();
+  const svgEl = document.querySelector("svg");
+  const ctm = svgEl.getScreenCTM();
+  const screenX = centroid[0] * ctm.a + ctm.e;
+  const screenY = centroid[1] * ctm.d + ctm.f;
 
-    row.addEventListener("click", (e) => {
-      if (e.target.tagName === "SELECT" || e.target.tagName === "INPUT") return;
-      highlightPlate(plate.id, plateColors);
-    });
+  popup.style.left = Math.min(screenX + 20, window.innerWidth - 220) + "px";
+  popup.style.top = Math.max(screenY - 60, 10) + "px";
 
-    table.appendChild(row);
-  }
-
-  container.appendChild(table);
-
-  container.querySelectorAll(".plateTypeSelect").forEach(select => {
-    select.addEventListener("change", function () {
-      const pid = +this.getAttribute("data-plate");
-      plates[pid].isOceanic = this.value === "oceanic";
-    });
+  // Listeners
+  byId("popupPlateType").addEventListener("change", function () {
+    plate.isOceanic = this.value === "oceanic";
   });
 
-  container.querySelectorAll(".plateSpeedRange").forEach(slider => {
-    slider.addEventListener("input", function () {
-      const pid = +this.getAttribute("data-plate");
-      const plate = plates[pid];
-      const newSpeed = +this.value;
-      this.parentElement.querySelector(".plateSpeedLabel").textContent = newSpeed.toFixed(2);
-
-      const oldSpeed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
-      if (oldSpeed > 0.001) {
-        const scale = newSpeed / oldSpeed;
-        plate.velocity[0] *= scale;
-        plate.velocity[1] *= scale;
-        plate.velocity[2] *= scale;
-      } else {
-        plate.velocity[0] = newSpeed;
-        plate.velocity[1] = 0;
-        plate.velocity[2] = 0;
-      }
-    });
-  });
-
-  container.querySelectorAll(".plateDirInput").forEach(input => {
-    input.addEventListener("change", function () {
-      const pid = +this.getAttribute("data-plate");
-      const plate = plates[pid];
-      const dirRad = (+this.value) * Math.PI / 180;
-      const speed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
-      plate.velocity[0] = Math.cos(dirRad) * speed;
-      plate.velocity[1] = -Math.sin(dirRad) * speed;
+  byId("popupPlateSpeed").addEventListener("input", function () {
+    const newSpeed = +this.value;
+    byId("popupSpeedLabel").textContent = newSpeed.toFixed(2);
+    const oldSpeed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
+    if (oldSpeed > 0.001) {
+      const s = newSpeed / oldSpeed;
+      plate.velocity[0] *= s;
+      plate.velocity[1] *= s;
+      plate.velocity[2] *= s;
+    } else {
+      plate.velocity[0] = newSpeed;
+      plate.velocity[1] = 0;
       plate.velocity[2] = 0;
-    });
+    }
+    redrawArrowForPlate(plate);
+  });
+
+  byId("popupPlateDir").addEventListener("input", function () {
+    const deg = +this.value;
+    byId("popupDirLabel").textContent = deg + "\u00B0";
+    const speed = Math.sqrt(plate.velocity[0] ** 2 + plate.velocity[1] ** 2 + plate.velocity[2] ** 2);
+    const rad = deg * Math.PI / 180;
+    plate.velocity[0] = Math.cos(rad) * speed;
+    plate.velocity[1] = -Math.sin(rad) * speed;
+    plate.velocity[2] = 0;
+    redrawArrowForPlate(plate);
   });
 }
 
+function updatePopupValues(plate) {
+  const speedEl = byId("popupPlateSpeed");
+  const dirEl = byId("popupPlateDir");
+  if (!speedEl || !dirEl) return;
+
+  const vel = plate.velocity;
+  const speed = Math.sqrt(vel[0] ** 2 + vel[1] ** 2 + vel[2] ** 2);
+  const dirDeg = Math.round(Math.atan2(-vel[1], vel[0]) * 180 / Math.PI);
+
+  speedEl.value = speed.toFixed(2);
+  byId("popupSpeedLabel").textContent = speed.toFixed(2);
+  dirEl.value = dirDeg;
+  byId("popupDirLabel").textContent = dirDeg + "\u00B0";
+}
+
+function redrawArrowForPlate(plate) {
+  const plateIds = window.tectonicMetadata.plateIds;
+  const centroid = computeGridPlateCentroid(plate.id, plateIds);
+  if (!centroid) return;
+
+  const arrowScale = 30;
+  const [cx, cy] = centroid;
+  const dx = plate.velocity[0] * arrowScale;
+  const dy = -plate.velocity[1] * arrowScale;
+  const tipX = cx + dx;
+  const tipY = cy + dy;
+
+  viewbox.select(`.velocityLine[data-plate="${plate.id}"]`)
+    .attr("x2", tipX).attr("y2", tipY);
+  viewbox.select(`.velocityHandle[data-plate="${plate.id}"]`)
+    .attr("cx", tipX).attr("cy", tipY);
+}
+
+function closePlatePopup() {
+  const popup = byId("tectonicPlatePopup");
+  if (popup) popup.remove();
+}
+
+// ---- Actions ----
+
 function regenerateFromEditor() {
   const generator = window.tectonicGenerator;
   if (!generator) return tip("No tectonic generator available", false, "error");
 
-  tip("Regenerating terrain from edited plates...", true, "warn");
+  tip("Regenerating terrain preview...", true, "warn");
+  closePlatePopup();
 
   setTimeout(() => {
     try {
       const result = generator.regenerate();
-
-      // Update grid heights
       grid.cells.h = result.heights;
       window.tectonicMetadata = result.metadata;
 
-      // Show the regenerated heightmap as a visual overlay
       tectonicViewMode = "heights";
       drawHeightOverlay(result.heights);
 
-      // Log changes for debugging
       let water = 0, land = 0, minH = 100, maxH = 0;
       for (let i = 0; i < result.heights.length; i++) {
         const h = result.heights[i];
@@ -329,9 +419,9 @@ function regenerateFromEditor() {
         if (h < minH) minH = h;
         if (h > maxH) maxH = h;
       }
-      console.log(`Tectonic regeneration: ${land} land (${(land / result.heights.length * 100).toFixed(1)}%), heights ${minH}-${maxH}`);
+      console.log(`Tectonic regen: ${land} land (${(land / result.heights.length * 100).toFixed(1)}%), heights ${minH}-${maxH}`);
 
-      tip("Terrain regenerated. Click 'Apply to Map' to regenerate the full map.", true, "success");
+      tip("Preview ready. Click 'Apply to Map' to rebuild.", true, "success");
     } catch (e) {
       console.error("Tectonic regeneration failed:", e);
       tip("Regeneration failed: " + e.message, false, "error");
@@ -342,7 +432,7 @@ function regenerateFromEditor() {
 function applyToMap() {
   if (!window.tectonicGenerator) return tip("No tectonic generator available", false, "error");
 
-  // Close the editor overlay
+  closePlatePopup();
   closeTectonicEditor();
   $("#tectonicEditor").dialog("close");
 
@@ -350,8 +440,6 @@ function applyToMap() {
 
   setTimeout(() => {
     try {
-      // grid.cells.h is already set by regenerateFromEditor
-      // Run the full downstream pipeline WITHOUT regenerating the heightmap
       undraw();
       pack = {};
 
@@ -415,21 +503,16 @@ function applyToMap() {
 }
 
 function togglePlateOverlay() {
-  const overlay = viewbox.select("#tectonicOverlay");
-
   if (tectonicViewMode === "heights") {
-    // Switch back to plate view
     tectonicViewMode = "plates";
-    const plates = window.tectonicGenerator.getPlates();
-    const plateColors = generatePlateColors(plates.length);
-    drawPlateOverlay(window.tectonicMetadata.plateIds, plateColors, plates);
+    tectonicSelectedPlate = -1;
+    drawPlateOverlay();
     return;
   }
 
+  const overlay = viewbox.select("#tectonicOverlay");
   if (overlay.empty()) {
-    const plates = window.tectonicGenerator.getPlates();
-    const plateColors = generatePlateColors(plates.length);
-    drawPlateOverlay(window.tectonicMetadata.plateIds, plateColors, plates);
+    drawPlateOverlay();
   } else {
     const visible = overlay.style("display") !== "none";
     overlay.style("display", visible ? "none" : null);
@@ -437,7 +520,9 @@ function togglePlateOverlay() {
 }
 
 function closeTectonicEditor() {
+  closePlatePopup();
   viewbox.select("#tectonicOverlay").remove();
   d3.select("#tectonicArrowhead").remove();
   tectonicViewMode = "plates";
+  tectonicSelectedPlate = -1;
 }
diff --git a/src/index.html b/src/index.html
index eee1e9c6..dac015ac 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4106,8 +4106,8 @@
       </div>
 
       <div id="tectonicEditor" class="dialog stable" style="display: none">
-        <div id="tectonicPlateList" style="max-height: 300px; overflow-y: auto"></div>
-        <div style="margin-top: 8px">
+        <p style="font-size:11px;margin:0 0 6px">Click a plate to edit. Drag arrows to set velocity.</p>
+        <div style="margin-top: 4px">
           <button id="tectonicRegenerate" data-tip="Regenerate terrain preview from edited plates">Regenerate Preview</button>
           <button id="tectonicApplyMap" data-tip="Apply changes and regenerate the full map">Apply to Map</button>
         </div>

From 2a341346abacb3394b9e01b4732f90c6f2258d06 Mon Sep 17 00:00:00 2001
From: Dobidop <67412288+Dobidop@users.noreply.github.com>
Date: Sun, 22 Mar 2026 14:41:40 +0100
Subject: [PATCH 6/8] Added tectonic painter editor

---
 public/modules/ui/tectonic-editor.js | 183 ++++++++++++++++++++++-----
 src/index.html                       |   9 +-
 src/modules/tectonic-generator.ts    |  26 ++++
 3 files changed, 185 insertions(+), 33 deletions(-)

diff --git a/public/modules/ui/tectonic-editor.js b/public/modules/ui/tectonic-editor.js
index 538c7c93..bd56eae2 100644
--- a/public/modules/ui/tectonic-editor.js
+++ b/public/modules/ui/tectonic-editor.js
@@ -2,10 +2,13 @@
 
 // Tectonic Plate Editor
 // Click plates to select & edit, drag arrows to set velocity/direction
+// Paint mode: brush to reassign cells between plates
 
 let tectonicViewMode = "plates"; // "plates" or "heights"
 let tectonicPlateColors = [];
 let tectonicSelectedPlate = -1;
+let tectonicPaintMode = false;
+let tectonicBrushRadius = 10;
 
 function editTectonics() {
   if (customization) return tip("Please exit the customization mode first", false, "error");
@@ -17,12 +20,14 @@ function editTectonics() {
   closeDialogs(".stable");
   tectonicViewMode = "plates";
   tectonicSelectedPlate = -1;
+  tectonicPaintMode = false;
 
   const plates = window.tectonicGenerator.getPlates();
   tectonicPlateColors = generatePlateColors(plates.length);
 
   drawPlateOverlay();
   closePlatePopup();
+  updatePaintButtonState();
 
   $("#tectonicEditor").dialog({
     title: "Tectonic Plate Editor",
@@ -38,9 +43,16 @@ function editTectonics() {
   byId("tectonicRegenerate").addEventListener("click", regenerateFromEditor);
   byId("tectonicToggleOverlay").addEventListener("click", togglePlateOverlay);
   byId("tectonicApplyMap").addEventListener("click", applyToMap);
+  byId("tectonicPaintToggle").addEventListener("click", togglePaintMode);
+  byId("tectonicBrushSize").addEventListener("input", function () {
+    tectonicBrushRadius = +this.value;
+    byId("tectonicBrushSizeLabel").textContent = this.value;
+  });
   byId("tectonicClose").addEventListener("click", () => $("#tectonicEditor").dialog("close"));
 }
 
+// ---- Color Utilities ----
+
 function generatePlateColors(count) {
   const colors = [];
   for (let i = 0; i < count; i++) {
@@ -80,7 +92,6 @@ function drawPlateOverlay() {
   viewbox.select("#tectonicOverlay").remove();
   const overlay = viewbox.insert("g", "#terrs").attr("id", "tectonicOverlay");
 
-  // Cell polygons
   const cellGroup = overlay.append("g").attr("id", "plateCells");
   for (let i = 0; i < plateIds.length; i++) {
     const pid = plateIds[i];
@@ -97,10 +108,12 @@ function drawPlateOverlay() {
       .attr("stroke-opacity", 0.4)
       .attr("stroke-width", 0.2)
       .attr("data-plate", pid)
-      .on("click", function () { selectPlate(pid); });
+      .attr("data-cell", i)
+      .on("click", function () {
+        if (!tectonicPaintMode) selectPlate(pid);
+      });
   }
 
-  // Velocity arrows (draggable)
   drawVelocityArrows(overlay, plates, plateIds, colors);
 }
 
@@ -136,11 +149,9 @@ function drawVelocityArrows(overlay, plates, plateIds, colors) {
     const dx = vel[0] * arrowScale;
     const dy = -vel[1] * arrowScale;
     const mag = Math.sqrt(dx * dx + dy * dy);
-
     const tipX = cx + dx;
     const tipY = cy + dy;
 
-    // Arrow line
     arrowGroup.append("line")
       .attr("class", "velocityLine")
       .attr("data-plate", plate.id)
@@ -152,7 +163,6 @@ function drawVelocityArrows(overlay, plates, plateIds, colors) {
       .attr("stroke-dasharray", mag < 2 ? "2,2" : "none")
       .attr("marker-end", "url(#tectonicArrowhead)");
 
-    // Draggable handle at arrow tip
     arrowGroup.append("circle")
       .attr("class", "velocityHandle")
       .attr("data-plate", plate.id)
@@ -169,7 +179,6 @@ function drawVelocityArrows(overlay, plates, plateIds, colors) {
         .on("end", function () { d3.select(this).attr("cursor", "grab"); })
       );
 
-    // Plate label
     arrowGroup.append("text")
       .attr("x", cx).attr("y", cy - 6)
       .attr("text-anchor", "middle")
@@ -186,25 +195,15 @@ function drawVelocityArrows(overlay, plates, plateIds, colors) {
 
 function dragVelocityHandle(handle, plate, cx, cy, arrowScale) {
   const [mx, my] = d3.mouse(viewbox.node());
-
-  // Update handle position
   d3.select(handle).attr("cx", mx).attr("cy", my);
-
-  // Update arrow line
   viewbox.select(`.velocityLine[data-plate="${plate.id}"]`)
     .attr("x2", mx).attr("y2", my);
 
-  // Compute new velocity from drag position
-  const dx = mx - cx;
-  const dy = my - cy;
-  plate.velocity[0] = dx / arrowScale;
-  plate.velocity[1] = -dy / arrowScale; // flip Y
+  plate.velocity[0] = (mx - cx) / arrowScale;
+  plate.velocity[1] = -(my - cy) / arrowScale;
   plate.velocity[2] = 0;
 
-  // Update popup if this plate is selected
-  if (tectonicSelectedPlate === plate.id) {
-    updatePopupValues(plate);
-  }
+  if (tectonicSelectedPlate === plate.id) updatePopupValues(plate);
 }
 
 function ensureArrowheadMarker() {
@@ -242,7 +241,6 @@ function selectPlate(plateId) {
 
   tectonicSelectedPlate = plateId;
 
-  // Update overlay opacity to highlight selected plate
   viewbox.select("#plateCells").selectAll("polygon")
     .attr("fill-opacity", function () {
       return +this.getAttribute("data-plate") === plateId ? 0.55 : 0.15;
@@ -258,7 +256,6 @@ function showPlatePopup(plate) {
   const centroid = computeGridPlateCentroid(plate.id, plateIds);
   if (!centroid) return;
 
-  // Count cells
   let cellCount = 0;
   for (let i = 0; i < plateIds.length; i++) {
     if (plateIds[i] === plate.id) cellCount++;
@@ -306,23 +303,19 @@ function showPlatePopup(plate) {
       <span id="popupDirLabel" style="font-size:10px">${dirDeg}&deg;</span>
     </div>
     <div style="font-size:10px;color:#888;text-align:center">
-      Drag the arrow on the map to set velocity
+      Drag arrow or use sliders &bull; Enable Paint to reshape
     </div>
   `;
 
   document.body.appendChild(popup);
 
-  // Position popup near the plate centroid but in screen coords
-  const svgRect = document.querySelector("svg").getBoundingClientRect();
   const svgEl = document.querySelector("svg");
   const ctm = svgEl.getScreenCTM();
   const screenX = centroid[0] * ctm.a + ctm.e;
   const screenY = centroid[1] * ctm.d + ctm.f;
-
   popup.style.left = Math.min(screenX + 20, window.innerWidth - 220) + "px";
   popup.style.top = Math.max(screenY - 60, 10) + "px";
 
-  // Listeners
   byId("popupPlateType").addEventListener("change", function () {
     plate.isOceanic = this.value === "oceanic";
   });
@@ -378,10 +371,8 @@ function redrawArrowForPlate(plate) {
 
   const arrowScale = 30;
   const [cx, cy] = centroid;
-  const dx = plate.velocity[0] * arrowScale;
-  const dy = -plate.velocity[1] * arrowScale;
-  const tipX = cx + dx;
-  const tipY = cy + dy;
+  const tipX = cx + plate.velocity[0] * arrowScale;
+  const tipY = cy + -plate.velocity[1] * arrowScale;
 
   viewbox.select(`.velocityLine[data-plate="${plate.id}"]`)
     .attr("x2", tipX).attr("y2", tipY);
@@ -394,14 +385,140 @@ function closePlatePopup() {
   if (popup) popup.remove();
 }
 
+// ---- Paint Mode ----
+
+function togglePaintMode() {
+  tectonicPaintMode = !tectonicPaintMode;
+  updatePaintButtonState();
+
+  if (tectonicPaintMode) {
+    if (tectonicSelectedPlate === -1) {
+      tip("Select a plate first (click on a plate), then paint to expand it", true, "warn");
+      tectonicPaintMode = false;
+      updatePaintButtonState();
+      return;
+    }
+    enterPaintMode();
+  } else {
+    exitPaintMode();
+  }
+}
+
+function updatePaintButtonState() {
+  const btn = byId("tectonicPaintToggle");
+  if (!btn) return;
+  btn.classList.toggle("pressed", tectonicPaintMode);
+  btn.textContent = tectonicPaintMode ? "Paint: ON" : "Paint";
+
+  const brushControls = byId("tectonicBrushControls");
+  if (brushControls) brushControls.style.display = tectonicPaintMode ? "block" : "none";
+}
+
+function enterPaintMode() {
+  tip(`Paint mode: drag on map to assign cells to Plate ${tectonicSelectedPlate}`, true, "warn");
+  viewbox.style("cursor", "crosshair");
+
+  // Add drag handler for painting
+  viewbox.call(
+    d3.drag()
+      .on("start", paintStart)
+      .on("drag", paintDrag)
+      .on("end", paintEnd)
+  );
+}
+
+function exitPaintMode() {
+  viewbox.style("cursor", "default");
+  // Restore default zoom behavior
+  viewbox.on(".drag", null);
+  svg.call(zoom);
+  removeBrushCircle();
+  clearMainTip();
+}
+
+function paintStart() {
+  if (!tectonicPaintMode || tectonicSelectedPlate === -1) return;
+  const [x, y] = d3.mouse(this);
+  paintCellsAt(x, y);
+}
+
+function paintDrag() {
+  if (!tectonicPaintMode || tectonicSelectedPlate === -1) return;
+  const [x, y] = d3.mouse(this);
+  moveBrushCircle(x, y);
+  paintCellsAt(x, y);
+}
+
+function paintEnd() {
+  if (!tectonicPaintMode) return;
+  removeBrushCircle();
+  // Redraw overlay to reflect changes
+  drawPlateOverlay();
+}
+
+function paintCellsAt(x, y) {
+  const r = tectonicBrushRadius;
+  const cellsInRadius = findGridAll(x, y, r);
+  if (!cellsInRadius || cellsInRadius.length === 0) return;
+
+  const generator = window.tectonicGenerator;
+  const plateIds = window.tectonicMetadata.plateIds;
+
+  // Reassign cells on the sphere
+  generator.reassignCells(cellsInRadius, tectonicSelectedPlate);
+
+  // Update grid-level metadata to match
+  for (const gc of cellsInRadius) {
+    plateIds[gc] = tectonicSelectedPlate;
+  }
+
+  // Update visual overlay for painted cells
+  const colors = tectonicPlateColors;
+  const cellGroup = viewbox.select("#plateCells");
+  for (const gc of cellsInRadius) {
+    const poly = cellGroup.select(`polygon[data-cell="${gc}"]`);
+    if (!poly.empty()) {
+      poly.attr("fill", colors[tectonicSelectedPlate])
+        .attr("stroke", colors[tectonicSelectedPlate])
+        .attr("data-plate", tectonicSelectedPlate)
+        .attr("fill-opacity", 0.55);
+    }
+  }
+}
+
+function moveBrushCircle(x, y) {
+  let circle = byId("tectonicBrushCircle");
+  if (!circle) {
+    const svg = viewbox.node().ownerSVGElement;
+    const ns = "http://www.w3.org/2000/svg";
+    circle = document.createElementNS(ns, "circle");
+    circle.id = "tectonicBrushCircle";
+    circle.setAttribute("fill", "none");
+    circle.setAttribute("stroke", tectonicPlateColors[tectonicSelectedPlate] || "#fff");
+    circle.setAttribute("stroke-width", "1.5");
+    circle.setAttribute("stroke-dasharray", "4,3");
+    circle.setAttribute("pointer-events", "none");
+    viewbox.node().appendChild(circle);
+  }
+  circle.setAttribute("cx", x);
+  circle.setAttribute("cy", y);
+  circle.setAttribute("r", tectonicBrushRadius);
+}
+
+function removeBrushCircle() {
+  const circle = byId("tectonicBrushCircle");
+  if (circle) circle.remove();
+}
+
 // ---- Actions ----
 
 function regenerateFromEditor() {
   const generator = window.tectonicGenerator;
   if (!generator) return tip("No tectonic generator available", false, "error");
 
-  tip("Regenerating terrain preview...", true, "warn");
+  if (tectonicPaintMode) { exitPaintMode(); tectonicPaintMode = false; updatePaintButtonState(); }
   closePlatePopup();
+  tip("Regenerating terrain preview...", true, "warn");
 
   setTimeout(() => {
     try {
@@ -432,6 +549,7 @@ function regenerateFromEditor() {
 function applyToMap() {
   if (!window.tectonicGenerator) return tip("No tectonic generator available", false, "error");
 
+  if (tectonicPaintMode) { exitPaintMode(); tectonicPaintMode = false; updatePaintButtonState(); }
   closePlatePopup();
   closeTectonicEditor();
   $("#tectonicEditor").dialog("close");
@@ -520,6 +638,7 @@ function togglePlateOverlay() {
 }
 
 function closeTectonicEditor() {
+  if (tectonicPaintMode) { exitPaintMode(); tectonicPaintMode = false; }
   closePlatePopup();
   viewbox.select("#tectonicOverlay").remove();
   d3.select("#tectonicArrowhead").remove();
diff --git a/src/index.html b/src/index.html
index dac015ac..097123af 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4108,10 +4108,17 @@
       <div id="tectonicEditor" class="dialog stable" style="display: none">
         <p style="font-size:11px;margin:0 0 6px">Click a plate to edit. Drag arrows to set velocity.</p>
         <div style="margin-top: 4px">
+          <button id="tectonicPaintToggle" data-tip="Toggle paint mode to reshape plates with a brush">Paint</button>
           <button id="tectonicRegenerate" data-tip="Regenerate terrain preview from edited plates">Regenerate Preview</button>
-          <button id="tectonicApplyMap" data-tip="Apply changes and regenerate the full map">Apply to Map</button>
+        </div>
+        <div id="tectonicBrushControls" style="display:none;margin-top:4px;font-size:11px">
+          <label>Brush size: </label>
+          <input id="tectonicBrushSize" type="range" min="3" max="40" step="1" value="10"
+            style="width:80px;vertical-align:middle">
+          <span id="tectonicBrushSizeLabel">10</span>
         </div>
         <div style="margin-top: 4px">
+          <button id="tectonicApplyMap" data-tip="Apply changes and regenerate the full map">Apply to Map</button>
           <button id="tectonicToggleOverlay" data-tip="Switch between plate view and height view">Toggle View</button>
           <button id="tectonicClose" data-tip="Close editor and remove overlay">Close</button>
         </div>
diff --git a/src/modules/tectonic-generator.ts b/src/modules/tectonic-generator.ts
index 7651b984..9e46dc18 100644
--- a/src/modules/tectonic-generator.ts
+++ b/src/modules/tectonic-generator.ts
@@ -221,6 +221,9 @@ export class TectonicPlateGenerator {
   private plates: TectonicPlate[] = [];
   private boundaries: PlateBoundary[] = [];
 
+  // Grid→sphere mapping for editor cell reassignment
+  private gridToSphere!: Int32Array;
+
   // Seeded PRNG for deterministic elevation pipeline
   private elevationSeed: number = 0;
   private rng: () => number = Math.random;
@@ -291,6 +294,27 @@ export class TectonicPlateGenerator {
     return this.projectAndFinalize();
   }
 
+  // Reassign grid cells to a different plate, propagating to sphere faces
+  reassignCells(gridCells: number[], newPlateId: number): void {
+    if (newPlateId < 0 || newPlateId >= this.plates.length) return;
+
+    for (const gc of gridCells) {
+      if (gc < 0 || gc >= this.numGridCells) continue;
+
+      // Find current plate and remove from it
+      const sphereFace = this.gridToSphere[gc];
+      if (sphereFace >= 0) {
+        const oldPlateId = this.plateAssignment[sphereFace];
+        if (oldPlateId >= 0 && oldPlateId < this.plates.length) {
+          this.plates[oldPlateId].cells.delete(sphereFace);
+        }
+        // Assign to new plate on sphere
+        this.plateAssignment[sphereFace] = newPlateId;
+        this.plates[newPlateId].cells.add(sphereFace);
+      }
+    }
+  }
+
   // Get current plates for editor access
   getPlates(): TectonicPlate[] {
     return this.plates;
@@ -1053,6 +1077,7 @@ export class TectonicPlateGenerator {
     // y: 0..gridHeight → lat: π/2..-π/2 (top = north pole, bottom = south pole)
     const gridElevations = new Float32Array(this.numGridCells);
     const gridPlateIds = new Int8Array(this.numGridCells).fill(-1);
+    this.gridToSphere = new Int32Array(this.numGridCells).fill(-1);
 
     // Build a bucketed spatial index for fast nearest-face lookup
     const lonBuckets = 72; // 5° per bucket
@@ -1122,6 +1147,7 @@ export class TectonicPlateGenerator {
 
       gridElevations[gi] = this.elevations[bestFace];
       gridPlateIds[gi] = this.plateAssignment[bestFace];
+      this.gridToSphere[gi] = bestFace;
     }
 
     // Light smoothing to remove pixelation from sphere→grid sampling

From 84b906192644b98956de359b2546417d77533adf Mon Sep 17 00:00:00 2001
From: Dobidop <67412288+Dobidop@users.noreply.github.com>
Date: Sun, 22 Mar 2026 15:18:36 +0100
Subject: [PATCH 7/8] update .gitignore

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 1281a744..c2be55ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,5 @@
 /_bmad
 /_bmad-output
 .github/agents/bmad-*
-.github/prompts/bmad-*
\ No newline at end of file
+.github/prompts/bmad-*
+/.claude
\ No newline at end of file

From 61e76eb6e7b636f3ec80785e9d49084a80954e50 Mon Sep 17 00:00:00 2001
From: Dobidop <67412288+Dobidop@users.noreply.github.com>
Date: Sun, 22 Mar 2026 15:20:16 +0100
Subject: [PATCH 8/8] Delete .claude/settings.local.json

---
 .claude/settings.local.json | 19 -------------------
 1 file changed, 19 deletions(-)
 delete mode 100644 .claude/settings.local.json

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
deleted file mode 100644
index 6a1992c3..00000000
--- a/.claude/settings.local.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "WebFetch(domain:github.com)",
-      "Bash(xargs grep:*)",
-      "WebFetch(domain:raw.githubusercontent.com)",
-      "WebFetch(domain:api.github.com)",
-      "WebFetch(domain:jandjheydorn.com)",
-      "Bash(npx tsc:*)",
-      "Bash(npx vite:*)",
-      "Bash(node_modules/.bin/tsc --noEmit --pretty)",
-      "Bash(npm exec:*)",
-      "Bash(npm install:*)",
-      "mcp__puppeteer__puppeteer_navigate",
-      "mcp__puppeteer__puppeteer_screenshot",
-      "mcp__puppeteer__puppeteer_evaluate"
-    ]
-  }
-}