feat: Implement compatibility bridge for legacy single-SVG callers

- Added compatibility lookups for legacy single-SVG callers to ensure existing workflows function during migration to new architecture.
- Implemented `getLayerSvg`, `getLayerSurface`, and `queryMap` functions as stable globals.
- Migrated relevant code in `draw-state-labels.ts` to utilize the new `queryMap` function for scene-aware lookups.
- Updated `layers.js` to manage layer visibility and registration more effectively.
- Introduced `LayersModule` to handle layer registration, visibility, and ordering.
- Created `WebGLSurfaceLayer` and `SvgLayer` classes to encapsulate layer behavior.
- Refactored `TextureAtlasLayer` to utilize the new layer management system.
- Updated HTML structure to accommodate new SVG and canvas elements.
- Ensured all TypeScript checks pass with zero errors on modified files.

public/main.js

@@ -120,6 +120,45 @@ compass.append("use").attr("xlink:href", "#defs-compass-rose");
 
 // fogging
 fogging.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
+
+// bootstrap layers registry
+{
+  const regSvg = (id, el, visible = true) => Layers.register(id, "svg", visible, el.node());
+  regSvg("ocean", ocean);
+  regSvg("lakes", lakes);
+  regSvg("landmass", landmass);
+  regSvg("texture", texture);
+  regSvg("terrs", terrs);
+  regSvg("biomes", biomes);
+  regSvg("cells", cells);
+  regSvg("gridOverlay", gridOverlay);
+  regSvg("coordinates", coordinates);
+  regSvg("compass", compass, false);
+  regSvg("rivers", rivers);
+  regSvg("terrain", terrain);
+  regSvg("relig", relig);
+  regSvg("cults", cults);
+  regSvg("regions", regions);
+  regSvg("provs", provs);
+  regSvg("zones", zones);
+  regSvg("borders", borders);
+  regSvg("routes", routes);
+  regSvg("temperature", temperature);
+  regSvg("coastline", coastline);
+  regSvg("ice", ice);
+  regSvg("prec", prec, false);
+  regSvg("population", population);
+  regSvg("emblems", emblems, false);
+  regSvg("icons", icons);
+  regSvg("labels", labels);
+  regSvg("armies", armies);
+  regSvg("markers", markers);
+  regSvg("ruler", ruler, false);
+  Layers.register("fogging-cont", "svg", true, document.getElementById("fogging-cont"));
+  regSvg("debug", debug);
+  Layers.register("webgl-canvas", "webgl", true, Scene.getCanvas());
+}
+
 fogging
   .append("rect")
   .attr("x", 0)

public/modules/ui/layers.js

@@ -108,6 +108,8 @@ function applyLayersPreset() {
     const shouldBeOn = layers.includes(el.id);
     if (shouldBeOn) el.classList.remove("buttonoff");
     else el.classList.add("buttonoff");
+    const layerId = Layers.layerIdForToggle(el.id);
+    if (layerId) Layers.setVisible(layerId, shouldBeOn);
   });
 }
 
@@ -957,49 +959,28 @@ function layerIsOn(el) {
 
 function turnButtonOff(el) {
   byId(el).classList.add("buttonoff");
+  const layerId = Layers.layerIdForToggle(el);
+  if (layerId) Layers.setVisible(layerId, false);
   getCurrentPreset();
 }
 
 function turnButtonOn(el) {
   byId(el).classList.remove("buttonoff");
+  const layerId = Layers.layerIdForToggle(el);
+  if (layerId) Layers.setVisible(layerId, true);
   getCurrentPreset();
 }
 
+// define connection between option layer buttons and actual svg groups to move the element
+function getLayer(id) {
+  const layerId = Layers.layerIdForToggle(id);
+  return layerId ? $(`#${layerId}`) : null;
+}
+
 // move layers on mapLayers dragging (jquery sortable)
 $("#mapLayers").sortable({items: "li:not(.solid)", containment: "parent", cancel: ".solid", update: moveLayer});
 function moveLayer(event, ui) {
-  const el = getLayer(ui.item.attr("id"));
-  if (!el) return;
-  const prev = getLayer(ui.item.prev().attr("id"));
-  const next = getLayer(ui.item.next().attr("id"));
-  if (prev) el.insertAfter(prev);
-  else if (next) el.insertBefore(next);
-}
-
-// define connection between option layer buttons and actual svg groups to move the element
-function getLayer(id) {
-  if (id === "toggleHeight") return $("#terrs");
-  if (id === "toggleBiomes") return $("#biomes");
-  if (id === "toggleCells") return $("#cells");
-  if (id === "toggleGrid") return $("#gridOverlay");
-  if (id === "toggleCoordinates") return $("#coordinates");
-  if (id === "toggleCompass") return $("#compass");
-  if (id === "toggleRivers") return $("#rivers");
-  if (id === "toggleRelief") return $("#terrain");
-  if (id === "toggleReligions") return $("#relig");
-  if (id === "toggleCultures") return $("#cults");
-  if (id === "toggleStates") return $("#regions");
-  if (id === "toggleProvinces") return $("#provs");
-  if (id === "toggleBorders") return $("#borders");
-  if (id === "toggleRoutes") return $("#routes");
-  if (id === "toggleTemperature") return $("#temperature");
-  if (id === "togglePrecipitation") return $("#prec");
-  if (id === "togglePopulation") return $("#population");
-  if (id === "toggleIce") return $("#ice");
-  if (id === "toggleTexture") return $("#texture");
-  if (id === "toggleEmblems") return $("#emblems");
-  if (id === "toggleLabels") return $("#labels");
-  if (id === "toggleBurgIcons") return $("#icons");
-  if (id === "toggleMarkers") return $("#markers");
-  if (id === "toggleRulers") return $("#ruler");
+  const layerId = Layers.layerIdForToggle(ui.item.attr("id"));
+  if (!layerId) return;
+  Layers.reorder(layerId, Layers.layerIdForToggle(ui.item.prev().attr("id")));
 }