mapshaper 0.7.15 → 0.7.17

package/www/mapshaper-gui.js

@@ -1476,29 +1476,27 @@
   }
 
   function SessionSnapshots(gui) {
-    var _menuOpen = false;
-    var _menuTimeout;
-    var btn, menu;
-
     gui.sessionSnapshots = {
+      enabled: false,
       saveSnapshot: function() {
         return saveSnapshot(gui);
       },
       restoreLatestSnapshot: function() {
         return restoreLatestSnapshot(gui);
+      },
+      renderSnapshotList: function(el) {
+        return renderSnapshotList(el, gui);
       }
     };
 
     init();
 
     async function init() {
-      btn = gui.buttons.addButton('#ribbon-icon').addClass('menu-btn save-btn');
       var enabled = await isStorageEnabled();
       if (!enabled) {
-        btn.remove();
         return;
       }
-      menu = El('div').addClass('nav-sub-menu save-menu').appendTo(btn.node());
+      gui.sessionSnapshots.enabled = true;
       startLifecycle();
       await initialCleanup();
 
@@ -1514,98 +1512,6 @@
         announceLeaving();
         attemptOwnDataDeletion();
       });
-
-      btn.on('mouseenter', function() {
-        btn.addClass('hover');
-        clearTimeout(_menuTimeout); // prevent timed closing
-        if (!_menuOpen) {
-          openMenu();
-        }
-      });
-
-      btn.on('mouseleave', function() {
-        if (!_menuOpen) {
-          btn.removeClass('hover');
-        } else {
-          closeMenu(200);
-        }
-      });
-    }
-
-    async function renderMenu() {
-      var snapshots = await fetchSnapshotList();
-
-      menu.empty();
-
-      addMenuLink({
-        slug: 'stash',
-        // label: 'save data snapshot',
-        label: 'create a snapshot',
-        action: saveSnapshot
-      });
-
-
-
-      // var available = await getAvailableStorage();
-      // if (available) {
-      //   El('div').addClass('save-menu-entry').text(available + ' available').appendTo(menu);
-      // }
-
-      // if (snapshots.length > 0) {
-      //   El('div').addClass('save-menu-entry').text('snapshots').appendTo(menu);
-      // }
-
-      snapshots.forEach(function(item, i) {
-        var line = El('div').appendTo(menu).addClass('save-menu-item');
-        El('span').appendTo(line).html(`<span class="save-item-label">#${item.number}</span> `);
-        // show snapshot size
-        El('span').appendTo(line).html(` <span class="save-item-size">${item.display_size}</span>`);
-        El('span').addClass('save-menu-btn').appendTo(line).on('click', async function(e) {
-          await restoreSnapshotById(item.id, gui);
-          closeMenu(100);
-        }).text('restore');
-        El('span').addClass('save-menu-btn').appendTo(line).on('click', async function(e) {
-          var obj = await idb$2.get(item.id);
-          await internal.compressSnapshotForExport(obj);
-          var buf = internal.pack(obj);
-          var fileName = `snapshot-${String(item.number).padStart(2, '0')}.msx`;
-          // choose output filename and directory every time, if supported
-          saveBlobToLocalFile2(fileName, new Blob([buf]));
-        }).text('export');
-        El('span').addClass('save-menu-btn').appendTo(line).on('click', async function(e) {
-          await removeSnapshotById(item.id);
-          closeMenu(300);
-          renderMenu();
-        }).text('remove');
-      });
-    }
-
-    function addMenuLink(item) {
-      var line = El('div').appendTo(menu);
-      var link = El('div').addClass('save-menu-link save-menu-entry').attr('data-name', item.slug).text(item.label).appendTo(line);
-      link.on('click', async function(e) {
-        await item.action(gui);
-        e.stopPropagation();
-      });
-    }
-
-    function openMenu() {
-      clearTimeout(_menuTimeout);
-      if (!_menuOpen) {
-        btn.addClass('open');
-        _menuOpen = true;
-        renderMenu();
-      }
-    }
-
-    function closeMenu(delay) {
-      if (!_menuOpen) return;
-      clearTimeout(_menuTimeout);
-      _menuTimeout = setTimeout(function() {
-        _menuOpen = false;
-        btn.removeClass('open');
-        btn.removeClass('hover');
-      }, delay || 0);
     }
 
     async function saveSnapshot(gui) {
@@ -1631,10 +1537,37 @@
       await idb$2.set(entry.id, obj);
       ownSnapshotIds.add(entry.id);
       await addToIndex(entry);
-      renderMenu();
     }
   }
 
+  async function renderSnapshotList(el, gui) {
+    var snapshots = await fetchSnapshotList();
+    el.empty();
+    snapshots.forEach(function(item) {
+      var line = El('div').appendTo(el).addClass('save-menu-item');
+      El('span').appendTo(line).html(`<span class="save-item-label">#${item.number}</span> `);
+      El('span').appendTo(line).html(` <span class="save-item-size">${item.display_size}</span>`);
+      El('span').addClass('save-menu-btn').appendTo(line).on('click', async function(e) {
+        e.stopPropagation();
+        await restoreSnapshotById(item.id, gui);
+      }).text('restore');
+      El('span').addClass('save-menu-btn').appendTo(line).on('click', async function(e) {
+        var obj;
+        e.stopPropagation();
+        obj = await idb$2.get(item.id);
+        await internal.compressSnapshotForExport(obj);
+        var buf = internal.pack(obj);
+        var fileName = `snapshot-${String(item.number).padStart(2, '0')}.msx`;
+        saveBlobToLocalFile2(fileName, new Blob([buf]));
+      }).text('export');
+      El('span').addClass('save-menu-btn').appendTo(line).on('click', async function(e) {
+        e.stopPropagation();
+        await removeSnapshotById(item.id);
+        renderSnapshotList(el, gui);
+      }).text('remove');
+    });
+  }
+
   async function fetchSnapshotList() {
     await pruneIndexAgainstKeys();
     var index = await fetchIndex();
@@ -1708,6 +1641,7 @@
   }
 
   function importDatasets(datasets, gui) {
+    regenerateRasterPreviews(datasets);
     gui.model.addDatasets(datasets);
     var target = findTargetLayer(datasets);
     delete target.layers[0].active; // kludge, active flag only used in snapshots now
@@ -1715,6 +1649,17 @@
     gui.model.updated({select: true, arc_count: true}); // arc_count to refresh display shapes
   }
 
+  function regenerateRasterPreviews(datasets) {
+    datasets.forEach(function(dataset) {
+      dataset.layers.forEach(function(lyr) {
+        var raster = lyr.raster;
+        if (!raster || !raster.grid || raster.view && raster.view.preview) return;
+        raster.view = raster.view || {};
+        raster.view.preview = internal.createRasterPreview(raster);
+      });
+    });
+  }
+
   async function captureSnapshot(gui) {
     var lyr = gui.model.getActiveLayer()?.layer;
     if (!lyr) return null; // no data -- no snapshot
@@ -2477,77 +2422,303 @@
     return bytes;
   }
 
-  // Fall back to browserify's Buffer polyfill
-  var B = typeof Buffer != 'undefined' ? Buffer : require$1('buffer').Buffer;
+  var PAYLOAD_FIELDS = {
+    table: ['records'],
+    'table-records': ['records'],
+    'table-fields': ['columns'],
+    'table-schema': ['fields'],
+    arcs: ['nn', 'xx', 'yy', 'zz', 'zlimit'],
+    'arcs-simplification': ['zz'],
+    layer: ['shapes', 'raster']
+  };
 
-  // We do NOT import from mapshaper-logging here to avoid a circular dependency
-  function error$1() {
-    throw new Error(Array.prototype.slice.call(arguments).join(' '));
+  async function storeUndoUnits(units, store, entryId, role) {
+    var stored = [];
+    try {
+      for (var i = 0; i < units.length; i++) {
+        stored.push(await storeUndoUnit(units[i], store, entryId, role));
+      }
+    } catch(e) {
+      await store.delMany(getStoredUndoPayloadRefs(stored));
+      throw e;
+    }
+    return stored;
   }
 
-  var uniqCount = 0;
-  function getUniqueName(prefix) {
-    return (prefix || "__id_") + (++uniqCount);
+  async function restoreStoredUndoUnits(units, store) {
+    var hydrated = await hydrateStoredUndoUnits(units, store);
+    internal.restoreCapturedUnits(hydrated);
   }
 
-  function isFunction(obj) {
-    return typeof obj == 'function';
+  async function hydrateStoredUndoUnits(units, store) {
+    var hydrated = [];
+    for (var i = 0; i < units.length; i++) {
+      hydrated.push(await hydrateStoredUndoUnit(units[i], store));
+    }
+    return hydrated;
   }
 
-  function isPromise(arg) {
-    return arg ? isFunction(arg.then) : false;
+  function getStoredUndoPayloadRefs(units) {
+    var refs = [];
+    units.forEach(function(unit) {
+      if (unit.payloadRef) refs.push(unit.payloadRef);
+    });
+    return refs;
   }
 
-  function isObject(obj) {
-    return obj === Object(obj); // via underscore
+  function getUndoRestoreFlags(units, baseFlags) {
+    var flags = Object.assign({}, baseFlags || {}, {undo_restore: true});
+    units.forEach(function(unit) {
+      if (unit.type == 'changed') return;
+      if (unit.type == 'arcs') {
+        flags.arc_count = true;
+      } else if (unit.type == 'arcs-simplification') {
+        flags.simplify = true;
+      } else if (unit.type == 'table' ||
+          unit.type == 'table-records' ||
+          unit.type == 'table-fields' ||
+          unit.type == 'table-order' ||
+          unit.type == 'table-schema') {
+        flags.same_table = false;
+      } else if (unit.type == 'catalog' || unit.type == 'dataset') {
+        flags.select = true;
+        flags.arc_count = true;
+      } else if (unit.type == 'dataset-info') {
+        flags.info = true;
+      } else if (unit.type == 'layer' ||
+          unit.type == 'layer-metadata' ||
+          unit.type == 'layer-order') {
+        flags.select = true;
+      }
+    });
+    return flags;
   }
 
-  function clamp(val, min, max) {
-    return val < min ? min : (val > max ? max : val);
+  async function storeUndoUnit(unit, store, entryId, role) {
+    var payload = await getUnitPayload(unit);
+    var stored = stripPayload(unit);
+    if (payload) {
+      stored.payloadRef = await store.put(payload, {
+        entryId: entryId,
+        role: role,
+        unitType: unit.type
+      });
+    }
+    return stored;
   }
 
-  function isArray(obj) {
-    return Array.isArray(obj);
+  async function hydrateStoredUndoUnit(unit, store) {
+    var hydrated = Object.assign({}, unit);
+    var payload;
+    if (unit.payloadRef) {
+      payload = await store.get(unit.payloadRef);
+      if (!payload) {
+        throw new Error('Missing undo payload: ' + unit.payloadRef.key);
+      }
+      payload = unpackPayload(unit, payload);
+      Object.assign(hydrated, payload);
+    }
+    delete hydrated.payloadRef;
+    return hydrated;
   }
 
-  // Is obj a valid number or NaN? (test if obj is type number)
-  function isNumber(obj) {
-    return obj != null && obj.constructor == Number;
+  async function getUnitPayload(unit) {
+    var fields = PAYLOAD_FIELDS[unit.type];
+    var payload, hasPayload;
+    if (!fields) return null;
+    payload = {};
+    fields.forEach(function(field) {
+      if (field in unit) {
+        payload[field] = unit[field];
+        hasPayload = true;
+      }
+    });
+    if (!hasPayload) return null;
+    if (unit.type == 'layer') return packLayerPayload(payload);
+    return unit.type == 'table' ? packTablePayload(payload) : payload;
   }
 
-  function isValidNumber(val) {
-    return isNumber(val) && !isNaN(val);
+  async function packLayerPayload(payload) {
+    if (payload.raster) {
+      payload = Object.assign({}, payload, {
+        raster: packRasterUndoPayload(payload.raster)
+      });
+    }
+    return payload;
   }
 
-  // Similar to isFinite() but does not coerce strings or other types
-  function isFiniteNumber(val) {
-    return isValidNumber(val) && val !== Infinity && val !== -Infinity;
+  async function packTablePayload(payload) {
+    return {
+      packedRecords: packRecordsAsColumns(payload.records)
+    };
   }
 
-  // This uses type conversion
-  // export function isFiniteNumber(val) {
-  //   return val > -Infinity && val < Infinity;
-  // }
-
-  function isNonNegNumber(val) {
-    return isNumber(val) && val >= 0;
+  function unpackPayload(unit, payload) {
+    if (unit.type == 'table' && payload.packedRecords) {
+      return {
+        records: unpackRecordsFromColumns(payload.packedRecords)
+      };
+    }
+    if (unit.type == 'layer' && payload.raster) {
+      return Object.assign({}, payload, {
+        raster: unpackRasterUndoPayload(payload.raster)
+      });
+    }
+    return payload;
   }
 
-  function isInteger(obj) {
-    return isNumber(obj) && ((obj | 0) === obj);
+  function packRasterUndoPayload(raster) {
+    var copy = Object.assign({}, raster);
+    if (raster.view) {
+      copy.view = Object.assign({}, raster.view);
+      if (raster.view.preview) {
+        copy.view.preview = stripPreviewPixels(raster.view.preview);
+      }
+    }
+    if (raster.preview) {
+      copy.preview = stripPreviewPixels(raster.preview);
+    }
+    return copy;
   }
 
-  function isEven(obj) {
-    return (obj % 2) === 0;
+  function unpackRasterUndoPayload(raster) {
+    var copy = Object.assign({}, raster);
+    if (raster.view) {
+      copy.view = Object.assign({}, raster.view);
+      if (raster.view.preview && !raster.view.preview.pixels && raster.grid && raster.grid.samples) {
+        copy.view.preview = internal.renderRasterPreview(raster.grid, raster.view.recipe, raster.view.preview.width, raster.view.preview.height);
+      }
+    }
+    return copy;
   }
 
-  function isOdd(obj) {
-    return (obj % 2) === 1;
+  function stripPreviewPixels(preview) {
+    var copy = Object.assign({}, preview);
+    delete copy.canvas;
+    delete copy.pixels;
+    return copy;
   }
 
-  function isString(obj) {
-    return obj != null && obj.toString === String.prototype.toString;
-    // TODO: replace w/ something better.
+  function packRecordsAsColumns(records) {
+    var fields = getRecordFields(records);
+    return {
+      fields: fields,
+      types: fields.map(function() { return null; }),
+      data: fields.map(function(field) {
+        return records.map(function(rec) {
+          return rec ? rec[field] : undefined;
+        });
+      }),
+      size: records.length
+    };
+  }
+
+  function getRecordFields(records) {
+    var index = {};
+    records.forEach(function(rec) {
+      Object.keys(rec || {}).forEach(function(field) {
+        index[field] = true;
+      });
+    });
+    return Object.keys(index);
+  }
+
+  function unpackRecordsFromColumns(data) {
+    var records = [];
+    for (var i = 0; i < data.size; i++) {
+      records[i] = {};
+    }
+    data.fields.forEach(function(field, j) {
+      var values = data.data[j];
+      values.forEach(function(val, i) {
+        records[i][field] = val;
+      });
+    });
+    return records;
+  }
+
+  function stripPayload(unit) {
+    var fields = PAYLOAD_FIELDS[unit.type];
+    var stripped = Object.assign({}, unit);
+    if (fields) {
+      fields.forEach(function(field) {
+        delete stripped[field];
+      });
+    }
+    return stripped;
+  }
+
+  // Fall back to browserify's Buffer polyfill
+  var B = typeof Buffer != 'undefined' ? Buffer : require$1('buffer').Buffer;
+
+  // We do NOT import from mapshaper-logging here to avoid a circular dependency
+  function error$1() {
+    throw new Error(Array.prototype.slice.call(arguments).join(' '));
+  }
+
+  var uniqCount = 0;
+  function getUniqueName(prefix) {
+    return (prefix || "__id_") + (++uniqCount);
+  }
+
+  function isFunction(obj) {
+    return typeof obj == 'function';
+  }
+
+  function isPromise(arg) {
+    return arg ? isFunction(arg.then) : false;
+  }
+
+  function isObject(obj) {
+    return obj === Object(obj); // via underscore
+  }
+
+  function clamp(val, min, max) {
+    return val < min ? min : (val > max ? max : val);
+  }
+
+  function isArray(obj) {
+    return Array.isArray(obj);
+  }
+
+  // Is obj a valid number or NaN? (test if obj is type number)
+  function isNumber(obj) {
+    return obj != null && obj.constructor == Number;
+  }
+
+  function isValidNumber(val) {
+    return isNumber(val) && !isNaN(val);
+  }
+
+  // Similar to isFinite() but does not coerce strings or other types
+  function isFiniteNumber(val) {
+    return isValidNumber(val) && val !== Infinity && val !== -Infinity;
+  }
+
+  // This uses type conversion
+  // export function isFiniteNumber(val) {
+  //   return val > -Infinity && val < Infinity;
+  // }
+
+  function isNonNegNumber(val) {
+    return isNumber(val) && val >= 0;
+  }
+
+  function isInteger(obj) {
+    return isNumber(obj) && ((obj | 0) === obj);
+  }
+
+  function isEven(obj) {
+    return (obj % 2) === 0;
+  }
+
+  function isOdd(obj) {
+    return (obj % 2) === 1;
+  }
+
+  function isString(obj) {
+    return obj != null && obj.toString === String.prototype.toString;
+    // TODO: replace w/ something better.
   }
 
   function isDate(obj) {
@@ -4629,6 +4800,10 @@
     return this;
   };
 
+  function runningInBrowser() {
+    return typeof window !== 'undefined' && typeof window.document !== 'undefined';
+  }
+
   // Lightweight hooks that make in-place mutations observable to GUI undo.
   // Normal CLI runs leave activeTransaction unset, so capture hooks are no-ops.
 
@@ -4833,6 +5008,8 @@
   }
 
   var DEFAULT_MAX_PREVIEW_PIXELS = 4e6;
+  var MAX_EXACT_AVERAGE_PIXELS = 256;
+  var MAX_APPROX_AVERAGE_STEPS = 16;
 
   function getRasterGrid(raster) {
     return raster && (raster.grid || raster);
@@ -4978,6 +5155,13 @@
     });
   }
 
+  function renderRasterExportPreview(raster, bbox, width, height, opts) {
+    var grid = getRasterGrid(raster);
+    var recipe = getRasterViewRecipe(grid, raster.view && raster.view.recipe, opts);
+    var stats = getRasterViewScalingStats(raster, recipe);
+    return renderRasterGridPreview(grid, recipe, width, height, stats, bbox, getRasterExportResamplingMethod(grid, bbox, width, height));
+  }
+
   function getRasterScalingStats(grid, recipe) {
     recipe = getRasterViewRecipe(grid, recipe);
     return getScalingStats(grid.samples, grid.bands, grid.nodata, recipe);
@@ -5002,7 +5186,7 @@
     return stats;
   }
 
-  function renderRasterGridPreview(grid, recipe, width, height, statsArg, sourceBbox) {
+  function renderRasterGridPreview(grid, recipe, width, height, statsArg, sourceBbox, resamplingMethod) {
     var samples = grid.samples;
     var bands = grid.bands;
     var noData = grid.nodata;
@@ -5010,23 +5194,29 @@
     var stats = statsArg || getScalingStats(samples, bands, noData, recipe);
     var sourceRange = recipe.scaling == 'none' ? getPixelTypeRange(grid.pixelType) : null;
     var displayRange = getDisplayRange(recipe.scaleRange);
-    var src, dest, val, isNoData, j;
+    var src, dest, val, isNoData, j, sample;
     for (var y = 0; y < height; y++) {
       for (var x = 0; x < width; x++) {
-        src = getPreviewSourceOffset(grid, sourceBbox, x, y, width, height, bands);
         dest = (y * width + x) * 4;
-        isNoData = noData !== null && noData !== undefined && allSamplesAreNoData(samples, src, bands, noData);
+        if (resamplingMethod) {
+          sample = getResampledRasterSample(grid, sourceBbox, x, y, width, height, resamplingMethod);
+          isNoData = !sample.valid;
+        } else {
+          src = getPreviewSourceOffset(grid, sourceBbox, x, y, width, height, bands);
+          sample = null;
+          isNoData = noData !== null && noData !== undefined && allSamplesAreNoData(samples, src, bands, noData);
+        }
         if (bands == 1) {
-          val = scaleSample(samples[src], stats && stats[0], sourceRange, displayRange);
+          val = scaleSample(sample ? sample.values[0] : samples[src], stats && stats[0], sourceRange, displayRange);
           pixels[dest] = val;
           pixels[dest + 1] = val;
           pixels[dest + 2] = val;
           pixels[dest + 3] = isNoData ? 0 : 255;
         } else {
           for (j = 0; j < 3; j++) {
-            pixels[dest + j] = scaleSample(samples[src + j], stats && stats[j], sourceRange, displayRange);
+            pixels[dest + j] = scaleSample(sample ? sample.values[j] : samples[src + j], stats && stats[j], sourceRange, displayRange);
           }
-          pixels[dest + 3] = isNoData ? 0 : bands >= 4 ? scaleSample(samples[src + 3], stats && stats[3], sourceRange, [0, 255]) : 255;
+          pixels[dest + 3] = isNoData ? 0 : bands >= 4 ? scaleSample(sample ? sample.values[3] : samples[src + 3], stats && stats[3], sourceRange, [0, 255]) : 255;
         }
       }
     }
@@ -5040,6 +5230,156 @@
     };
   }
 
+  function getRasterExportResamplingMethod(grid, bbox, width, height) {
+    var srcSize = getRasterSourcePixelSize$1(grid, bbox);
+    return width < srcSize.width || height < srcSize.height ? 'average' : 'bilinear';
+  }
+
+  function getRasterSourcePixelSize$1(grid, bbox) {
+    var rb = grid.bbox;
+    return {
+      width: Math.abs((bbox[2] - bbox[0]) / (rb[2] - rb[0]) * grid.width),
+      height: Math.abs((bbox[3] - bbox[1]) / (rb[3] - rb[1]) * grid.height)
+    };
+  }
+
+  function getResampledRasterSample(grid, bbox, x, y, width, height, method) {
+    return method == 'average' ?
+      getAverageRasterSample(grid, bbox, x, y, width, height) :
+      getBilinearRasterSample(grid, bbox, x, y, width, height);
+  }
+
+  function getAverageRasterSample(grid, bbox, x, y, width, height) {
+    var bounds = getRasterSourcePixelBounds(grid, bbox, x, y, width, height);
+    if (getSourcePixelBoundsArea(bounds) > MAX_EXACT_AVERAGE_PIXELS) {
+      return getApproxAverageRasterSample(grid, bounds);
+    }
+    var samples = grid.samples;
+    var bands = grid.bands;
+    var values = new Array(bands).fill(0);
+    var total = 0;
+    var src, weight;
+    var x0 = Math.max(0, Math.floor(bounds.x0));
+    var x1 = Math.min(grid.width, Math.ceil(bounds.x1));
+    var y0 = Math.max(0, Math.floor(bounds.y0));
+    var y1 = Math.min(grid.height, Math.ceil(bounds.y1));
+    for (var sy = y0; sy < y1; sy++) {
+      for (var sx = x0; sx < x1; sx++) {
+        weight = getIntervalOverlap(bounds.x0, bounds.x1, sx, sx + 1) *
+          getIntervalOverlap(bounds.y0, bounds.y1, sy, sy + 1);
+        if (weight <= 0) continue;
+        src = (sy * grid.width + sx) * bands;
+        if (sampleIsNoData(samples, src, bands, grid.nodata)) continue;
+        for (var band = 0; band < bands; band++) {
+          values[band] += samples[src + band] * weight;
+        }
+        total += weight;
+      }
+    }
+    if (total <= 0) return {valid: false, values: values};
+    for (var i = 0; i < bands; i++) values[i] /= total;
+    return {valid: true, values: values};
+  }
+
+  function getApproxAverageRasterSample(grid, bounds) {
+    var samples = grid.samples;
+    var bands = grid.bands;
+    var values = new Array(bands).fill(0);
+    var xSteps = Math.min(MAX_APPROX_AVERAGE_STEPS, Math.max(1, Math.ceil(Math.abs(bounds.x1 - bounds.x0))));
+    var ySteps = Math.min(MAX_APPROX_AVERAGE_STEPS, Math.max(1, Math.ceil(Math.abs(bounds.y1 - bounds.y0))));
+    var count = 0;
+    var sx, sy, src;
+    for (var y = 0; y < ySteps; y++) {
+      for (var x = 0; x < xSteps; x++) {
+        sx = Math.max(0, Math.min(grid.width - 1, Math.floor(bounds.x0 + (x + 0.5) / xSteps * (bounds.x1 - bounds.x0))));
+        sy = Math.max(0, Math.min(grid.height - 1, Math.floor(bounds.y0 + (y + 0.5) / ySteps * (bounds.y1 - bounds.y0))));
+        src = (sy * grid.width + sx) * bands;
+        if (sampleIsNoData(samples, src, bands, grid.nodata)) continue;
+        for (var band = 0; band < bands; band++) {
+          values[band] += samples[src + band];
+        }
+        count++;
+      }
+    }
+    if (count === 0) return {valid: false, values: values};
+    for (var i = 0; i < bands; i++) values[i] /= count;
+    return {valid: true, values: values};
+  }
+
+  function getBilinearRasterSample(grid, bbox, x, y, width, height) {
+    var p = getRasterSourcePixelCenter(grid, bbox, x, y, width, height);
+    var x0 = Math.max(0, Math.min(grid.width - 1, Math.floor(p.x)));
+    var y0 = Math.max(0, Math.min(grid.height - 1, Math.floor(p.y)));
+    var x1 = Math.max(0, Math.min(grid.width - 1, x0 + 1));
+    var y1 = Math.max(0, Math.min(grid.height - 1, y0 + 1));
+    var tx = Math.max(0, Math.min(1, p.x - x0));
+    var ty = Math.max(0, Math.min(1, p.y - y0));
+    var samples = grid.samples;
+    var bands = grid.bands;
+    var values = new Array(bands).fill(0);
+    var offsets = [
+      (y0 * grid.width + x0) * bands,
+      (y0 * grid.width + x1) * bands,
+      (y1 * grid.width + x0) * bands,
+      (y1 * grid.width + x1) * bands
+    ];
+    var weights = [
+      (1 - tx) * (1 - ty),
+      tx * (1 - ty),
+      (1 - tx) * ty,
+      tx * ty
+    ];
+    var total = 0;
+    offsets.forEach(function(src, i) {
+      if (weights[i] <= 0 || sampleIsNoData(samples, src, bands, grid.nodata)) return;
+      for (var band = 0; band < bands; band++) {
+        values[band] += samples[src + band] * weights[i];
+      }
+      total += weights[i];
+    });
+    if (total <= 0) return {valid: false, values: values};
+    for (var j = 0; j < bands; j++) values[j] /= total;
+    return {valid: true, values: values};
+  }
+
+  function getRasterSourcePixelBounds(grid, bbox, x, y, width, height) {
+    return {
+      x0: mapXToRasterPixel(grid, bbox[0] + x / width * (bbox[2] - bbox[0])),
+      x1: mapXToRasterPixel(grid, bbox[0] + (x + 1) / width * (bbox[2] - bbox[0])),
+      y0: mapYToRasterPixel(grid, bbox[3] - y / height * (bbox[3] - bbox[1])),
+      y1: mapYToRasterPixel(grid, bbox[3] - (y + 1) / height * (bbox[3] - bbox[1]))
+    };
+  }
+
+  function getRasterSourcePixelCenter(grid, bbox, x, y, width, height) {
+    var mapX = bbox[0] + (x + 0.5) / width * (bbox[2] - bbox[0]);
+    var mapY = bbox[3] - (y + 0.5) / height * (bbox[3] - bbox[1]);
+    return {
+      x: mapXToRasterPixel(grid, mapX) - 0.5,
+      y: mapYToRasterPixel(grid, mapY) - 0.5
+    };
+  }
+
+  function mapXToRasterPixel(grid, x) {
+    return (x - grid.bbox[0]) / (grid.bbox[2] - grid.bbox[0]) * grid.width;
+  }
+
+  function mapYToRasterPixel(grid, y) {
+    return (grid.bbox[3] - y) / (grid.bbox[3] - grid.bbox[1]) * grid.height;
+  }
+
+  function getIntervalOverlap(a0, a1, b0, b1) {
+    return Math.max(0, Math.min(Math.max(a0, a1), b1) - Math.max(Math.min(a0, a1), b0));
+  }
+
+  function getSourcePixelBoundsArea(bounds) {
+    return Math.abs((bounds.x1 - bounds.x0) * (bounds.y1 - bounds.y0));
+  }
+
+  function sampleIsNoData(samples, offset, bands, noData) {
+    return noData !== null && noData !== undefined && allSamplesAreNoData(samples, offset, bands, noData);
+  }
+
   function renderRawEightBitPreview(grid, width, height, sourceBbox) {
     var samples = grid.samples;
     var bands = grid.bands;
@@ -5104,7 +5444,12 @@
     noteLayerWillChange(lyr, {operation: 'clipRasterToBBox', unit: 'raster'});
     raster.grid = cropRasterGrid(grid, crop, clipBbox);
     raster.view = raster.view || {};
-    raster.view.preview = createRasterPreview(raster, opts || {});
+    delete raster.view.scalingStats;
+    if (runningInBrowser()) {
+      raster.view.preview = createRasterPreview(raster, opts || {});
+    } else {
+      delete raster.view.preview;
+    }
     clearLegacyRasterFields(raster);
     markLayerChanged(lyr, {operation: 'clipRasterToBBox', unit: 'raster'});
     return true;
@@ -6159,239 +6504,13 @@
     return Object.keys(index);
   }
 
-  var PAYLOAD_FIELDS = {
-    table: ['records'],
-    'table-records': ['records'],
-    'table-fields': ['columns'],
-    'table-schema': ['fields'],
-    arcs: ['nn', 'xx', 'yy', 'zz', 'zlimit'],
-    'arcs-simplification': ['zz'],
-    layer: ['shapes', 'raster']
-  };
-
-  async function storeUndoUnits(units, store, entryId, role) {
-    var stored = [];
-    try {
-      for (var i = 0; i < units.length; i++) {
-        stored.push(await storeUndoUnit(units[i], store, entryId, role));
-      }
-    } catch(e) {
-      await store.delMany(getStoredUndoPayloadRefs(stored));
-      throw e;
-    }
-    return stored;
-  }
-
-  async function restoreStoredUndoUnits(units, store) {
-    var hydrated = await hydrateStoredUndoUnits(units, store);
-    restoreCapturedUnits(hydrated);
-  }
-
-  async function hydrateStoredUndoUnits(units, store) {
-    var hydrated = [];
-    for (var i = 0; i < units.length; i++) {
-      hydrated.push(await hydrateStoredUndoUnit(units[i], store));
-    }
-    return hydrated;
-  }
+  function createStoredUndoHistory(gui) {
+    var undoEntryId = 0;
 
-  function getStoredUndoPayloadRefs(units) {
-    var refs = [];
-    units.forEach(function(unit) {
-      if (unit.payloadRef) refs.push(unit.payloadRef);
-    });
-    return refs;
-  }
-
-  function getUndoRestoreFlags(units, baseFlags) {
-    var flags = Object.assign({}, baseFlags || {}, {undo_restore: true});
-    units.forEach(function(unit) {
-      if (unit.type == 'changed') return;
-      if (unit.type == 'arcs') {
-        flags.arc_count = true;
-      } else if (unit.type == 'arcs-simplification') {
-        flags.simplify = true;
-      } else if (unit.type == 'table' ||
-          unit.type == 'table-records' ||
-          unit.type == 'table-fields' ||
-          unit.type == 'table-order' ||
-          unit.type == 'table-schema') {
-        flags.same_table = false;
-      } else if (unit.type == 'catalog' || unit.type == 'dataset') {
-        flags.select = true;
-        flags.arc_count = true;
-      } else if (unit.type == 'dataset-info') {
-        flags.info = true;
-      } else if (unit.type == 'layer' ||
-          unit.type == 'layer-metadata' ||
-          unit.type == 'layer-order') {
-        flags.select = true;
-      }
-    });
-    return flags;
-  }
-
-  async function storeUndoUnit(unit, store, entryId, role) {
-    var payload = await getUnitPayload(unit);
-    var stored = stripPayload(unit);
-    if (payload) {
-      stored.payloadRef = await store.put(payload, {
-        entryId: entryId,
-        role: role,
-        unitType: unit.type
-      });
-    }
-    return stored;
-  }
-
-  async function hydrateStoredUndoUnit(unit, store) {
-    var hydrated = Object.assign({}, unit);
-    var payload;
-    if (unit.payloadRef) {
-      payload = await store.get(unit.payloadRef);
-      if (!payload) {
-        throw new Error('Missing undo payload: ' + unit.payloadRef.key);
-      }
-      payload = unpackPayload(unit, payload);
-      Object.assign(hydrated, payload);
-    }
-    delete hydrated.payloadRef;
-    return hydrated;
-  }
-
-  async function getUnitPayload(unit) {
-    var fields = PAYLOAD_FIELDS[unit.type];
-    var payload, hasPayload;
-    if (!fields) return null;
-    payload = {};
-    fields.forEach(function(field) {
-      if (field in unit) {
-        payload[field] = unit[field];
-        hasPayload = true;
-      }
-    });
-    if (!hasPayload) return null;
-    if (unit.type == 'layer') return packLayerPayload(payload);
-    return unit.type == 'table' ? packTablePayload(payload) : payload;
-  }
-
-  async function packLayerPayload(payload) {
-    if (payload.raster) {
-      payload = Object.assign({}, payload, {
-        raster: packRasterUndoPayload(payload.raster)
-      });
-    }
-    return payload;
-  }
-
-  async function packTablePayload(payload) {
-    return {
-      packedRecords: packRecordsAsColumns(payload.records)
-    };
-  }
-
-  function unpackPayload(unit, payload) {
-    if (unit.type == 'table' && payload.packedRecords) {
-      return {
-        records: unpackRecordsFromColumns(payload.packedRecords)
-      };
-    }
-    if (unit.type == 'layer' && payload.raster) {
-      return Object.assign({}, payload, {
-        raster: unpackRasterUndoPayload(payload.raster)
-      });
-    }
-    return payload;
-  }
-
-  function packRasterUndoPayload(raster) {
-    var copy = Object.assign({}, raster);
-    if (raster.view) {
-      copy.view = Object.assign({}, raster.view);
-      if (raster.view.preview) {
-        copy.view.preview = stripPreviewPixels(raster.view.preview);
-      }
-    }
-    if (raster.preview) {
-      copy.preview = stripPreviewPixels(raster.preview);
-    }
-    return copy;
-  }
-
-  function unpackRasterUndoPayload(raster) {
-    var copy = Object.assign({}, raster);
-    if (raster.view) {
-      copy.view = Object.assign({}, raster.view);
-      if (raster.view.preview && !raster.view.preview.pixels && raster.grid && raster.grid.samples) {
-        copy.view.preview = renderRasterPreview(raster.grid, raster.view.recipe, raster.view.preview.width, raster.view.preview.height);
-      }
-    }
-    return copy;
-  }
-
-  function stripPreviewPixels(preview) {
-    var copy = Object.assign({}, preview);
-    delete copy.canvas;
-    delete copy.pixels;
-    return copy;
-  }
-
-  function packRecordsAsColumns(records) {
-    var fields = getRecordFields(records);
-    return {
-      fields: fields,
-      types: fields.map(function() { return null; }),
-      data: fields.map(function(field) {
-        return records.map(function(rec) {
-          return rec ? rec[field] : undefined;
-        });
-      }),
-      size: records.length
-    };
-  }
-
-  function getRecordFields(records) {
-    var index = {};
-    records.forEach(function(rec) {
-      Object.keys(rec || {}).forEach(function(field) {
-        index[field] = true;
-      });
-    });
-    return Object.keys(index);
-  }
-
-  function unpackRecordsFromColumns(data) {
-    var records = [];
-    for (var i = 0; i < data.size; i++) {
-      records[i] = {};
-    }
-    data.fields.forEach(function(field, j) {
-      var values = data.data[j];
-      values.forEach(function(val, i) {
-        records[i][field] = val;
-      });
-    });
-    return records;
-  }
-
-  function stripPayload(unit) {
-    var fields = PAYLOAD_FIELDS[unit.type];
-    var stripped = Object.assign({}, unit);
-    if (fields) {
-      fields.forEach(function(field) {
-        delete stripped[field];
-      });
-    }
-    return stripped;
-  }
-
-  function createStoredUndoHistory(gui) {
-    var undoEntryId = 0;
-
-    return {
-      addTransaction: addTransaction,
-      getPayloadStore: getPayloadStore
-    };
+    return {
+      addTransaction: addTransaction,
+      getPayloadStore: getPayloadStore
+    };
 
     async function addTransaction(tx, opts) {
       var undoUnits, redoCaptureUnits, updateFlags, store, entryId, storedUndoUnits,
@@ -6752,14 +6871,38 @@
   async function considerReprojecting(gui, dataset, opts) {
     var mapCRS = gui.map.getActiveLayerCRS();
     var dataCRS = internal.getDatasetCRS(dataset);
+    var msg, reproject;
     if (!dataCRS || !mapCRS || internal.crsAreEqual(mapCRS, dataCRS)) return;
-    var msg = `The input file ${dataset?.info?.input_files[0] || ''} has a different projection from the current selected layer. Would you like to reproject it to match?`;
-    var reproject = await showPrompt(msg, 'Reproject file?');
+    if (!datasetCanBeReprojected(dataset, dataCRS, mapCRS)) {
+      notifyProjectionMismatch(gui, dataset);
+      return;
+    }
+    msg = `The input file ${dataset?.info?.input_files[0] || ''} has a different projection from the current selected layer. Would you like to reproject it to match?`;
+    reproject = await showPrompt(msg, 'Reproject file?');
     if (reproject) {
       internal.projectDataset(dataset, dataCRS, mapCRS, {densify: true});
     }
   }
 
+  function datasetCanBeReprojected(dataset, srcCRS, destCRS) {
+    var bounds = internal.getDatasetBounds(dataset);
+    var transform, p;
+    if (!bounds || !bounds.hasBounds()) return false;
+    transform = internal.getProjTransform2(srcCRS, destCRS);
+    p = transform(bounds.centerX(), bounds.centerY());
+    return !!(p && isFinite(p[0]) && isFinite(p[1]));
+  }
+
+  function notifyProjectionMismatch(gui, dataset) {
+    if (!gui.notify) return;
+    gui.notify({
+      severity: 'warn',
+      body: `The input file ${dataset?.info?.input_files[0] || ''} has a different projection from the current selected layer, but Mapshaper cannot transform it to the current projection.`,
+      dedupKey: 'projection-mismatch:' + (dataset?.info?.input_files?.[0] || '')
+    });
+  }
+
+
   var geopackagePromise = null;
   var geoParquetPromise = null;
   var geoTIFFPromise = null;
@@ -6903,7 +7046,7 @@
   async function persistRasterLayerSamples(dataset) {
     var promises = [];
     dataset.layers.forEach(function(lyr) {
-      var grid = lyr.raster && getRasterGrid(lyr.raster);
+      var grid = lyr.raster && internal.getRasterGrid(lyr.raster);
       var key;
       if (!grid || !grid.samples) return;
       key = makeRasterSamplesKey(lyr.name);
@@ -8459,12 +8602,6 @@
     } else if (internal.layerHasRaster(layer)) {
       gui.geographic = true;
       gui.displayLayer = layer;
-      if (needReprojectionForDisplay(sourceCRS, displayCRS)) {
-        // Raster warping is not supported yet; hide rather than misplace pixels.
-        gui.unprojectable = true;
-        gui.displayLayer = {shapes: []};
-        notifyRasterReprojectionBlocked(layer, opts);
-      }
     } else if (layer.geometry_type) {
       gui.geographic = true;
       gui.displayLayer = layer;
@@ -8489,22 +8626,18 @@
           // Don't try to draw paths containing coordinates that failed to project
           gui.displayLayer = internal.filterPathLayerByArcIds(gui.displayLayer, emptyArcs);
         }
+      } else if (internal.layerHasRaster(layer)) {
+        gui.bounds = getProjectedRasterDisplayBounds(layer, sourceCRS, displayCRS);
       }
     }
 
-    gui.bounds = getDisplayBounds(gui.displayLayer, gui.displayArcs);
+    gui.bounds = gui.bounds || getDisplayBounds(gui.displayLayer, gui.displayArcs);
     layer.gui = gui;
   }
 
-  function notifyRasterReprojectionBlocked(layer, opts) {
-    if (!opts.notify) return;
-    opts.notify({
-      severity: 'warn',
-      title: 'Raster layer hidden',
-      body: 'The raster layer "' + (layer.name || '[unnamed]') +
-        '" cannot be displayed in the current map projection because raster reprojection is not supported yet.',
-      dedupKey: 'raster-reprojection-blocked:' + (layer.menu_id || layer.name || '')
-    });
+  function getProjectedRasterDisplayBounds(layer, sourceCRS, displayCRS) {
+    var bbox = internal.getProjectedRasterGridBBox(layer.raster, sourceCRS, displayCRS, {raster_mesh_interval: 32});
+    return bbox ? new Bounds$1(bbox) : new Bounds$1();
   }
 
   function getDisplayBounds(lyr, arcs) {
@@ -10655,8 +10788,8 @@
       if (e.deleteLayer) {
        addMenuItem('delete layer', e.deleteLayer, '');
       }
-      if (e.selectLayer) {
-       addMenuItem('select layer', e.selectLayer, '');
+      if (e.showLayerInfo) {
+       addMenuItem('show info', e.showLayerInfo, '');
       }
 
       if (lyr && lyr.gui.geographic) {
@@ -11083,6 +11216,15 @@
         }
       }
 
+      function showLayerInfo() {
+        var target = findLayerById(id);
+        var popup, content;
+        if (!target) return;
+        popup = showPopupAlert('', 'Layer info');
+        content = popup.container().addClass('layer-info-popup');
+        content.node().appendChild(renderLayerInfo(internal.getLayerInfo(target.layer, target.dataset)));
+      }
+
       function openLayerMenu(e) {
         var menuEvent = e;
         e.stopPropagation();
@@ -11094,7 +11236,7 @@
           };
         }
         menuEvent.deleteLayer = deleteLayer;
-        menuEvent.selectLayer = selectLayer;
+        menuEvent.showLayerInfo = showLayerInfo;
         menuEvent.contextMenuId = 'layer-' + id;
         openContextMenu(menuEvent, null, null);
       }
@@ -11173,7 +11315,7 @@
       if (isFrame) {
         str = 'map frame';
       } else if (internal.layerHasRaster(lyr)) {
-        str = utils$1.format('%,d x %,d %s', getRasterWidth(lyr.raster), getRasterHeight(lyr.raster), type);
+        str = utils$1.format('%,d x %,d %s', internal.getRasterWidth(lyr.raster), internal.getRasterHeight(lyr.raster), type);
       } else if (type) {
         str = utils$1.format('%,d %s%s', n, type, utils$1.pluralSuffix(n));
       } else {
@@ -11182,44 +11324,137 @@
       return str;
     }
 
-    function renameLayer(target, name) {
-      var undoTransaction;
-      if (!target || target.layer.name == name) return;
-      undoTransaction = createUndoTransaction(gui, 'rename layer');
-      if (undoTransaction) {
-        undoTransaction.captureLayerMetadataBefore(target.layer, {operation: 'renameLayer', unit: 'name'});
-        target.layer.name = name;
-        markLayerChanged(target.layer, {operation: 'renameLayer', unit: 'name'});
-        addUndoTransactionToHistory(gui, undoTransaction, {
-          flags: {select: true},
-          entryPrefix: 'rename-layer'
-        });
-      } else {
-        target.layer.name = name;
+    function renderLayerInfo(info) {
+      var container = document.createElement('div');
+      var title = document.createElement('div');
+      container.className = 'console-info';
+      title.className = 'console-info-title';
+      title.textContent = 'Layer: ' + (info.layer_name || '[unnamed layer]');
+      container.appendChild(title);
+      container.appendChild(renderKeyValueTable(getInfoRows(info), 'console-info-table'));
+      if (!info.raster_type) {
+        container.appendChild(renderAttributeInfoTable(info.attribute_data));
       }
-      gui.session.layerRenamed(target.layer, name);
-      updateMenuBtn();
+      return container;
     }
 
-    function markLayerChanged(layer, detail) {
-      if (internal.UndoTracking && internal.UndoTracking.markLayerChanged) {
-        internal.UndoTracking.markLayerChanged(layer, detail);
+    function getInfoRows(info) {
+      var rows = [
+        ['Type', info.raster_type ? 'raster data' : info.geometry_type || 'tabular data']
+      ];
+      if (info.raster_type) {
+        rows.push(['Size', utils$1.format('%,d x %,d x %,d', info.raster_width, info.raster_height, info.raster_bands)]);
+        rows.push(['Data', info.raster_pixel_type || 'unknown']);
+      } else {
+        rows.push(['Records', utils$1.format('%,d', info.feature_count)]);
+      }
+      if (info.null_shape_count > 0) {
+        rows.push(['Nulls', utils$1.format("%'d", info.null_shape_count)]);
+      }
+      if (info.raster_type || info.geometry_type && info.feature_count > info.null_shape_count) {
+        rows.push(['Bounds', info.bbox.join(',')]);
+        rows.push(['CRS', info.proj4]);
       }
+      rows.push(['Source', info.source_file || 'n/a']);
+      return rows;
     }
 
-    function isPinnable(lyr) {
-      return internal.layerIsGeometric(lyr) || internal.layerHasRaster(lyr) || internal.layerHasFurniture(lyr);
+    function renderAttributeInfoTable(fields) {
+      var wrapper = document.createElement('div');
+      var title = document.createElement('div');
+      wrapper.className = 'console-attribute-info';
+      title.className = 'console-info-subtitle';
+      title.textContent = 'Attribute data';
+      wrapper.appendChild(title);
+      if (!fields) {
+        var none = document.createElement('div');
+        none.className = 'console-info-empty';
+        none.textContent = '[none]';
+        wrapper.appendChild(none);
+        return wrapper;
+      }
+      wrapper.appendChild(renderDataTable(
+        [['Field', 'First value']].concat(fields.map(function(o) {
+          var valKey = 'first_value' in o ? 'first_value' : 'value';
+          return [o.field, formatInfoValue(o[valKey])];
+        })),
+        'console-attribute-table'
+      ));
+      return wrapper;
     }
 
-    function rowHTML(c1, c2, cname) {
-      return utils$1.format('<div class="row%s"><div class="col1">%s</div>' +
-        '<div class="col2">%s</div></div>', cname ? ' ' + cname : '', c1, c2);
+    function renderKeyValueTable(rows, className) {
+      return renderDataTable(rows, className + ' console-key-value-table');
     }
-  }
 
-  // Hamburger menu in the top-right of the header. After the user starts
-  // editing, the splash bar (Docs / GitHub / Survey / Sponsor) is hidden by
-  // gui.mjs; this menu is the post-edit replacement, exposing the same links
+    function renderDataTable(rows, className) {
+      var table = document.createElement('table');
+      var tbody = document.createElement('tbody');
+      table.className = className;
+      rows.forEach(function(row, i) {
+        var tr = document.createElement('tr');
+        row.forEach(function(val) {
+          var cell = document.createElement(i === 0 && rows.length > 1 && className == 'console-attribute-table' ? 'th' : 'td');
+          cell.textContent = val == null ? '' : String(val);
+          tr.appendChild(cell);
+        });
+        tbody.appendChild(tr);
+      });
+      table.appendChild(tbody);
+      return table;
+    }
+
+    function formatInfoValue(val) {
+      if (val === null || val === undefined) return '';
+      if (utils$1.isString(val)) {
+        return "'" + val.replace(/[\r\t\n]/g, function(c) {
+          return c == '\n' ? '\\n' : c == '\r' ? '\\r' : '\\t';
+        }) + "'";
+      }
+      if (utils$1.isNumber(val) || val === true || val === false) {
+        return String(val);
+      }
+      return JSON.stringify(val);
+    }
+
+    function renameLayer(target, name) {
+      var undoTransaction;
+      if (!target || target.layer.name == name) return;
+      undoTransaction = createUndoTransaction(gui, 'rename layer');
+      if (undoTransaction) {
+        undoTransaction.captureLayerMetadataBefore(target.layer, {operation: 'renameLayer', unit: 'name'});
+        target.layer.name = name;
+        markLayerChanged(target.layer, {operation: 'renameLayer', unit: 'name'});
+        addUndoTransactionToHistory(gui, undoTransaction, {
+          flags: {select: true},
+          entryPrefix: 'rename-layer'
+        });
+      } else {
+        target.layer.name = name;
+      }
+      gui.session.layerRenamed(target.layer, name);
+      updateMenuBtn();
+    }
+
+    function markLayerChanged(layer, detail) {
+      if (internal.UndoTracking && internal.UndoTracking.markLayerChanged) {
+        internal.UndoTracking.markLayerChanged(layer, detail);
+      }
+    }
+
+    function isPinnable(lyr) {
+      return internal.layerIsGeometric(lyr) || internal.layerHasRaster(lyr) || internal.layerHasFurniture(lyr);
+    }
+
+    function rowHTML(c1, c2, cname) {
+      return utils$1.format('<div class="row%s"><div class="col1">%s</div>' +
+        '<div class="col2">%s</div></div>', cname ? ' ' + cname : '', c1, c2);
+    }
+  }
+
+  // Hamburger menu in the top-right of the header. After the user starts
+  // editing, the splash bar (Docs / GitHub / Survey / Sponsor) is hidden by
+  // gui.mjs; this menu is the post-edit replacement, exposing the same links
   // from a single button so the editing controls don't have to share the row.
 
 
@@ -11282,6 +11517,8 @@
     var note = menu.findChild('.history-menu-note');
     var clearBtn = menu.findChild('.history-clear-btn');
     var commandLogBtn = menu.findChild('.history-command-log-btn');
+    var createSnapshotBtn = menu.findChild('.history-create-snapshot-btn');
+    var snapshotList = menu.findChild('.history-snapshot-list');
 
     gui.appUndoIsEnabled = isAppUndoEnabled;
 
@@ -11334,6 +11571,13 @@
       gui.clearMode();
     });
 
+    createSnapshotBtn.on('click', function(e) {
+      e.stopPropagation();
+      if (!createSnapshotBtn.hasClass('disabled') && gui.sessionSnapshots) {
+        gui.sessionSnapshots.saveSnapshot().then(renderSnapshotList);
+      }
+    });
+
     document.addEventListener('keydown', function(e) {
       if (gui.getMode() == 'history_menu' && e.key == 'Escape') {
         gui.clearMode();
@@ -11347,6 +11591,7 @@
     function turnOn() {
       btn.attr('aria-expanded', 'true');
       updateMenuState();
+      renderSnapshotList();
       menu.show();
     }
 
@@ -11359,6 +11604,7 @@
       // setItemEnabled(undoBtn, gui.undo.canUndo());
       // setItemEnabled(redoBtn, gui.undo.canRedo());
       setItemEnabled(clearBtn, gui.undo.canUndo() || gui.undo.canRedo());
+      setItemEnabled(createSnapshotBtn, !!(gui.sessionSnapshots && gui.sessionSnapshots.enabled));
       updateToggle();
     }
 
@@ -11381,6 +11627,14 @@
       }
       return Promise.resolve();
     }
+
+    function renderSnapshotList() {
+      if (gui.sessionSnapshots && gui.sessionSnapshots.enabled && snapshotList) {
+        gui.sessionSnapshots.renderSnapshotList(snapshotList);
+      } else if (snapshotList) {
+        snapshotList.empty();
+      }
+    }
   }
 
   function isAppUndoEnabled() {
@@ -12317,6 +12571,7 @@
       info: 'inspect features',
       box: 'rectangle tool',
       data: 'edit attributes',
+      label_style: 'style labels',
       labels: 'position labels',
       edit_points: 'add/drag points',
       edit_lines: 'draw/edit polylines',
@@ -12351,6 +12606,7 @@
       });
 
       btn.on('mouseenter', function() {
+        if (gui.state.label_style_panel_open) return;
         btn.addClass('hover');
         if (_menuOpen) {
           clearTimeout(_menuTimeout); // prevent timed closing
@@ -12363,7 +12619,10 @@
       });
 
       btn.on('click', function(e) {
-        if (active()) {
+        if (_editMode == 'label_style') {
+          setMode('info');
+          closeMenu();
+        } else if (active()) {
           setMode('off');
           closeMenu();
         } else if (_menuOpen) {
@@ -12374,6 +12633,7 @@
         }
         e.stopPropagation();
       });
+
     }
 
     this.turnOff = function() {
@@ -12385,7 +12645,7 @@
     };
 
     this.modeUsesHitDetection = function(mode) {
-      return ['info', 'selection', 'data', 'labels', 'edit_points', 'vertices', 'rectangles', 'edit_lines', 'edit_polygons', 'snip_lines'].includes(mode);
+      return ['info', 'selection', 'data', 'label_style', 'labels', 'edit_points', 'vertices', 'rectangles', 'edit_lines', 'edit_polygons', 'snip_lines'].includes(mode);
     };
 
     this.modeUsesPopup = function(mode) {
@@ -12393,7 +12653,7 @@
     };
 
     this.modeSupportsUndo = function(mode) {
-      return ['data', 'labels', 'edit_points', 'edit_lines', 'edit_polygons', 'vertices', 'rectangles'].includes(mode);
+      return ['data', 'label_style', 'labels', 'edit_points', 'edit_lines', 'edit_polygons', 'vertices', 'rectangles'].includes(mode);
     };
 
     this.getMode = getInteractionMode;
@@ -12475,11 +12735,16 @@
     // if current editing mode is not available, turn off the tool
     function updateCurrentMode() {
       var modes = getAvailableModes();
-      if (modes.indexOf(_editMode) == -1) {
+      if (modes.indexOf(_editMode) == -1 && !labelStyleModeIsAvailable()) {
         setMode('off');
       }
     }
 
+    function labelStyleModeIsAvailable() {
+      var o = gui.model.getActiveLayer();
+      return _editMode == 'label_style' && o && o.layer && internal.layerHasLabels(o.layer);
+    }
+
     function openMenu() {
       clearTimeout(_menuTimeout);
       if (!_menuOpen) {
@@ -12530,7 +12795,7 @@
       }
       btn.classed('hover', _menuOpen);
       // btn.classed('selected', active() && !_menuOpen);
-      btn.classed('selected', active());
+      btn.classed('selected', active() && _editMode != 'label_style');
     }
 
     function updateSelectionHighlight() {
@@ -12611,142 +12876,1924 @@
       return el.node();
     };
 
-    function updateVisibility() {
-      var shouldShow = visible && GUI.isActiveInstance(gui);
-      if (shouldShow) {
-        clearTimeout(hideTimer);
-        hideTimer = null;
-        el.css('display', 'flex');
-        // wait one frame so the browser registers the initial state before
-        // the transition kicks in
-        requestAnimationFrame(function() {
-          el.addClass('visible');
+    function updateVisibility() {
+      var shouldShow = visible && GUI.isActiveInstance(gui);
+      if (shouldShow) {
+        clearTimeout(hideTimer);
+        hideTimer = null;
+        el.css('display', 'flex');
+        // wait one frame so the browser registers the initial state before
+        // the transition kicks in
+        requestAnimationFrame(function() {
+          el.addClass('visible');
+        });
+      } else {
+        el.removeClass('visible');
+        // wait for the transition to finish before hiding completely
+        clearTimeout(hideTimer);
+        hideTimer = setTimeout(function() {
+          if (!(visible && GUI.isActiveInstance(gui))) {
+            el.css('display', 'none');
+          }
+        }, transitionMs);
+      }
+    }
+  }
+
+  function ToolbarButton(parent, iconRef, opts) {
+    var btn = El('div').addClass('floating-toolbar-btn').appendTo(parent);
+    if (iconRef) {
+      var iconNode = El('body').findChild(iconRef);
+      if (iconNode) {
+        var icon = iconNode.node().cloneNode(true);
+        if (icon.hasAttribute('id')) icon.removeAttribute('id');
+        btn.node().appendChild(icon);
+      }
+    }
+    var enabled = true;
+    var clickHandlers = [];
+
+    if (opts.tooltip) setTooltip(opts.tooltip);
+
+    // Block native dblclick to avoid the map's double-click zoom
+    btn.on('dblclick', function(e) { e.stopPropagation(); });
+
+    btn.on('click', function(e) {
+      if (!enabled) return;
+      for (var i = 0; i < clickHandlers.length; i++) {
+        clickHandlers[i](e);
+      }
+    });
+
+    this.on = function(event, fn) {
+      if (event == 'click') {
+        clickHandlers.push(fn);
+      } else {
+        btn.on(event, fn);
+      }
+      return this;
+    };
+
+    this.enable = function() { return this.setEnabled(true); };
+    this.disable = function() { return this.setEnabled(false); };
+
+    this.setEnabled = function(b) {
+      enabled = !!b;
+      btn.classed('disabled', !enabled);
+      return this;
+    };
+
+    this.setTooltip = setTooltip;
+
+    this.node = function() {
+      return btn.node();
+    };
+
+    function setTooltip(text) {
+      btn.attr('data-tooltip', text);
+    }
+  }
+
+  // Floating toolbar that exposes undo/redo while the user is in an editing
+  // interaction mode. The toolbar is the first consumer of FloatingToolbar;
+  // future per-mode toolbars (e.g. feature styling) can follow the same pattern.
+
+  function EditToolbar(gui) {
+    var toolbar = new FloatingToolbar(gui, { name: 'edit-toolbar' });
+    var isMac = navigator.userAgent.includes('Mac');
+    var modKey = isMac ? '\u2318' : 'Ctrl+';
+    var shiftKey = isMac ? '\u21e7' : 'Shift+';
+
+    var undoBtn = toolbar.addButton('#undo-icon', {
+      tooltip: 'Undo (' + modKey + 'Z)'
+    }).on('click', function() {
+      gui.undo.undo();
+    });
+
+    var redoBtn = toolbar.addButton('#redo-icon', {
+      tooltip: 'Redo (' + shiftKey + modKey + 'Z)'
+    }).on('click', function() {
+      gui.undo.redo();
+    });
+
+    updateButtons();
+
+    gui.on('interaction_mode_change', function() {
+      updateVisibility();
+      // history is cleared on mode change; refresh button states next tick
+      updateButtons();
+    });
+
+    gui.on('history_change', function(e) {
+      undoBtn.setEnabled(!!e.canUndo);
+      redoBtn.setEnabled(!!e.canRedo);
+      // Visibility may also depend on history (e.g. attribute edits via popup
+      // happen in modes that don't otherwise support undo).
+      updateVisibility();
+    });
+
+    updateVisibility();
+
+    function updateVisibility() {
+      if (!gui.interaction) {
+        toolbar.hide();
+        return;
+      }
+      var mode = gui.interaction.getMode();
+      var hasHistory = gui.undo.canUndo() || gui.undo.canRedo();
+      if (gui.interaction.modeSupportsUndo(mode) || hasHistory) {
+        toolbar.show();
+      } else {
+        toolbar.hide();
+      }
+    }
+
+    function updateButtons() {
+      undoBtn.setEnabled(gui.undo.canUndo());
+      redoBtn.setEnabled(gui.undo.canRedo());
+    }
+  }
+
+  var sans = [{
+    name: 'NYTFranklin'
+  }, {
+    name: 'Acumin Pro'
+  }, {
+    name: 'Akzidenz-Grotesk'
+  }, {
+    name: 'Arial'
+  }, {
+    name: 'Avenir',
+    alternates: ['Avenir Next']
+  }, {
+    name: 'Bahnschrift'
+  }, {
+    name: 'Brandon Grotesque'
+  }, {
+    name: 'Cabin'
+  }, {
+    name: 'Calibri'
+  }, {
+    name: 'Candara'
+  }, {
+    name: 'Cantarell'
+  }, {
+    name: 'Century Gothic'
+  }, {
+    name: 'Clearview'
+  }, {
+    name: 'Corbel'
+  }, {
+    name: 'DejaVu Sans'
+  }, {
+    name: 'DIN 1451',
+    alternates: ['DIN']
+  }, {
+    name: 'DM Sans'
+  }, {
+    name: 'FF Meta'
+  }, {
+    name: 'Fira Sans'
+  }, {
+    name: 'Frutiger',
+    alternates: ['Frutiger Next']
+  }, {
+    name: 'Futura'
+  }, {
+    name: 'Gill Sans',
+    alternates: ['Gill Sans MT']
+  }, {
+    name: 'Gotham'
+  }, {
+    name: 'Gudea'
+  }, {
+    name: 'Helvetica',
+    alternates: ['Helvetica Neue']
+  }, {
+    name: 'IBM Plex Sans'
+  }, {
+    name: 'Inter'
+  }, {
+    name: 'Interstate'
+  }, {
+    name: 'ITC Stone Sans'
+  }, {
+    name: 'Josefin Sans'
+  }, {
+    name: 'Karla'
+  }, {
+    name: 'Lato'
+  }, {
+    name: 'Liberation Sans'
+  }, {
+    name: 'Lucida Grande',
+    alternates: ['Lucida Sans', 'Lucida Sans Unicode']
+  }, {
+    name: 'Montserrat'
+  }, {
+    name: 'Museo Sans'
+  }, {
+    name: 'Myriad Pro'
+  }, {
+    name: 'Neue Haas Grotesk',
+    alternates: ['Neue Haas Grotesk Text Pro']
+  }, {
+    name: 'Nunito Sans',
+    alternates: ['Nunito']
+  }, {
+    name: 'Open Sans'
+  }, {
+    name: 'Optima'
+  }, {
+    name: 'Overpass'
+  }, {
+    name: 'Poppins'
+  }, {
+    name: 'Proxima Nova'
+  }, {
+    name: 'PT Sans'
+  }, {
+    name: 'Raleway'
+  }, {
+    name: 'Roboto',
+    alternates: ['Noto Sans']
+  }, {
+    name: 'Rotis Sans Serif'
+  }, {
+    name: 'Rubik'
+  }, {
+    name: 'San Francisco',
+    alternates: ['SF Pro']
+  }, {
+    name: 'Scala Sans'
+  }, {
+    name: 'Segoe UI'
+  }, {
+    name: 'Source Sans Pro',
+    alternates: ['Source Sans 3']
+  }, {
+    name: 'Tahoma'
+  }, {
+    name: 'Trebuchet MS'
+  }, {
+    name: 'Tw Cen MT'
+  }, {
+    name: 'Ubuntu'
+  }, {
+    name: 'Univers'
+  }, {
+    name: 'Verdana'
+  }, {
+    name: 'Work Sans'
+  }
+  ];
+
+  var condensed = [{
+    name: 'Arial Narrow'
+  }, {
+    name: 'Barlow Condensed'
+  }, {
+    name: 'Bebas Neue'
+  }, {
+    name: 'DIN Condensed'
+  }, {
+    name: 'Franklin Gothic',
+    alternates: ['Franklin Gothic Medium']
+  }, {
+    name: 'Fira Sans Condensed'
+  }, {
+    name: 'Helvetica Condensed'
+  }, {
+    name: 'Impact'
+  }, {
+    name: 'News Gothic MT'
+  }, {
+    name: 'Oswald'
+  }, {
+    name: 'PT Sans Narrow'
+  }, {
+    name: 'Roboto Condensed'
+  }, {
+    name: 'Trade Gothic',
+    alternates: ['Trade Gothic Next']
+  }, {
+    name: 'Univers Condensed'
+  }];
+
+  var mono = [{
+    name: 'Andale Mono'
+  }, {
+    name: 'Cascadia Code',
+    alternates: ['Cascadia Mono']
+  }, {
+    name: 'Consolas'
+  }, {
+    name: 'Courier New'
+  }, {
+    name: 'DejaVu Sans Mono'
+  }, {
+    name: 'Fira Mono',
+    alternates: ['Fira Code']
+  }, {
+    name: 'IBM Plex Mono'
+  }, {
+    name: 'Inconsolata'
+  }, {
+    name: 'JetBrains Mono'
+  }, {
+    name: 'Liberation Mono'
+  }, {
+    name: 'Lucida Console'
+  }, {
+    name: 'Menlo'
+  }, {
+    name: 'Monaco'
+  }, {
+    name: 'Roboto Mono'
+  }, {
+    name: 'SF Mono'
+  }, {
+    name: 'Source Code Pro'
+  }, {
+    name: 'Ubuntu Mono'
+  }];
+
+  var serif = [{
+    name: 'NYTCheltenham'
+  }, {
+    name: 'Adobe Caslon Pro',
+    alternates: ['Caslon']
+  }, {
+    name: 'Adobe Garamond Pro',
+    alternates: ['Garamond']
+  }, {
+    name: 'Baskerville'
+  }, {
+    name: 'Bodoni',
+    alternates: ['Bodoni MT', 'Bodoni 72']
+  }, {
+    name: 'Book Antiqua'
+  }, {
+    name: 'Bookman Old Style'
+  }, {
+    name: 'Cambria'
+  }, {
+    name: 'Century Schoolbook'
+  }, {
+    name: 'Clarendon'
+  }, {
+    name: 'Cochin'
+  }, {
+    name: 'Constantia'
+  }, {
+    name: 'Crimson Pro',
+    alternates: ['Crimson Text']
+  }, {
+    name: 'DejaVu Serif'
+  }, {
+    name: 'Didot'
+  }, {
+    name: 'EB Garamond'
+  }, {
+    name: 'Georgia'
+  }, {
+    name: 'Goudy Old Style'
+  }, {
+    name: 'Hoefler Text'
+  }, {
+    name: 'IBM Plex Serif'
+  }, {
+    name: 'IM Fell'
+  }, {
+    name: 'Liberation Serif'
+  }, {
+    name: 'Libre Baskerville'
+  }, {
+    name: 'Lora'
+  }, {
+    name: 'Merriweather'
+  }, {
+    name: 'Minion Pro'
+  }, {
+    name: 'Noto Serif'
+  }, {
+    name: 'Palatino',
+    alternates: ['Palatino Linotype']
+  }, {
+    name: 'Perpetua'
+  }, {
+    name: 'Playfair Display'
+  }, {
+    name: 'PT Serif'
+  }, {
+    name: 'Roboto Slab'
+  }, {
+    name: 'Rockwell'
+  }, {
+    name: 'Sabon',
+    alternates: ['Sabon Next']
+  }, {
+    name: 'Sitka'
+  }, {
+    name: 'Source Serif Pro',
+    alternates: ['Source Serif 4']
+  }, {
+    name: 'Times New Roman'
+  }, {
+    name: 'Zilla Slab'
+  }];
+
+  var fontCategories = [{
+    name: 'Sans serif',
+    fonts: sans
+  }, {
+    name: 'Condensed',
+    fonts: condensed
+  }, {
+    name: 'Serif',
+    fonts: serif
+  }, {
+    name: 'Monospace',
+    fonts: mono
+  }];
+
+  var cachedFonts = null;
+  var cachedFontStyles = {};
+  var fontWeights = [100, 200, 300, 400, 500, 600, 700, 800, 900];
+  var fontStyles = ['normal', 'italic'];
+  var preferredWeights = [400, 700, 900, 500, 300, 600, 800, 200, 100];
+  var weightNames = {
+    100: 'Thin',
+    200: 'Extra Light',
+    300: 'Light',
+    400: 'Regular',
+    500: 'Medium',
+    600: 'Semi Bold',
+    700: 'Bold',
+    800: 'Extra Bold',
+    900: 'Black'
+  };
+
+  // Return a list of the above fonts that are installed on the user's computer
+  // sorted by category, alphabetically within each category.
+  function getInstalledFonts() {
+    if (!cachedFonts) {
+      cachedFonts = detectInstalledFonts();
+    }
+    return cachedFonts;
+  }
+
+  function getFontStyleVariants(fontName) {
+    if (!fontName) return [];
+    if (!cachedFontStyles[fontName]) {
+      cachedFontStyles[fontName] = detectFontStyleVariants(fontName);
+    }
+    return cachedFontStyles[fontName];
+  }
+
+  function detectInstalledFonts() {
+    var detector = getCanvasFontDetector();
+    return fontCategories.map(function(category) {
+      var fonts = category.fonts.filter(function(font) {
+        return detector && fontIsInstalled(font, detector);
+      });
+      return {
+        name: category.name,
+        fonts: fonts.map(function(font) {
+          return font.name;
+        }).sort(sortNames)
+      };
+    }).filter(function(category) {
+      return category.fonts.length > 0;
+    });
+  }
+
+  function fontIsInstalled(font, detector) {
+    return getFontNames(font).some(function(name) {
+      return detector(name);
+    });
+  }
+
+  function getFontNames(font) {
+    var alternates = font.alternates || [];
+    if (!Array.isArray(alternates)) {
+      alternates = [alternates];
+    }
+    return [font.name].concat(alternates);
+  }
+
+  function sortNames(a, b) {
+    return a.toLowerCase() < b.toLowerCase() ? -1 :
+      a.toLowerCase() > b.toLowerCase() ? 1 : 0;
+  }
+
+  function getCanvasFontDetector() {
+    var canvas, ctx, baselines;
+    if (typeof document == 'undefined') return null;
+    canvas = document.createElement('canvas');
+    ctx = canvas && canvas.getContext && canvas.getContext('2d');
+    if (!ctx) return null;
+    baselines = getBaselineWidths(ctx);
+    return function(fontName) {
+      return fontIsDetectable(ctx, baselines, fontName);
+    };
+  }
+
+  function getBaselineWidths(ctx) {
+    return {
+      monospace: measureFont(ctx, 'monospace'),
+      'sans-serif': measureFont(ctx, 'sans-serif'),
+      serif: measureFont(ctx, 'serif')
+    };
+  }
+
+  function fontIsDetectable(ctx, baselines, fontName) {
+    return Object.keys(baselines).some(function(generic) {
+      return measureFont(ctx, quoteFontName(fontName) + ',' + generic) != baselines[generic];
+    });
+  }
+
+  function measureFont(ctx, fontFamily) {
+    ctx.font = '72px ' + fontFamily;
+    return ctx.measureText('mmmmmmmmmmlliMW@#0123456789').width;
+  }
+
+  function quoteFontName(name) {
+    return '"' + String(name).replace(/\\/g, '\\\\').replace(/"/g, '\\"') + '"';
+  }
+
+  function detectFontStyleVariants(fontName) {
+    var canvas, ctx, groups;
+    if (typeof document == 'undefined') return getDefaultFontStyleVariants();
+    canvas = document.createElement('canvas');
+    ctx = canvas && canvas.getContext && canvas.getContext('2d');
+    if (!ctx) return getDefaultFontStyleVariants();
+    groups = {};
+    fontStyles.forEach(function(style) {
+      fontWeights.forEach(function(weight) {
+        var sig = measureFontVariant(ctx, fontName, weight, style);
+        var key = style + '|' + sig;
+        if (!groups[key]) {
+          groups[key] = {
+            style: style,
+            weights: []
+          };
+        }
+        groups[key].weights.push(weight);
+      });
+    });
+    var variants = Object.keys(groups).map(function(key) {
+      var group = groups[key];
+      return getFontStyleVariant(getPreferredWeight(group.weights), group.style);
+    }).sort(sortFontStyleVariants);
+    return variants.length > 0 ? variants : getDefaultFontStyleVariants();
+  }
+
+  function getDefaultFontStyleVariants() {
+    return [getFontStyleVariant(400, 'normal')];
+  }
+
+  function getFontStyleVariant(weight, style) {
+    return {
+      label: getFontStyleLabel(weight, style),
+      value: style + '|' + weight,
+      style: style,
+      weight: String(weight)
+    };
+  }
+
+  function getPreferredWeight(weights) {
+    for (var i=0; i<preferredWeights.length; i++) {
+      if (weights.indexOf(preferredWeights[i]) > -1) {
+        return preferredWeights[i];
+      }
+    }
+    return weights[0];
+  }
+
+  function sortFontStyleVariants(a, b) {
+    if (a.style != b.style) {
+      return a.style == 'normal' ? -1 : 1;
+    }
+    return Number(a.weight) - Number(b.weight);
+  }
+
+  function getFontStyleLabel(weight, style) {
+    var name = weightNames[weight] || String(weight);
+    if (style == 'italic') {
+      return weight == 400 ? 'Italic' : name + ' Italic';
+    }
+    return name;
+  }
+
+  function measureFontVariant(ctx, fontName, weight, style) {
+    return [
+      measureFontSample(ctx, fontName, weight, style, 'Hamburgefonts 0123456789'),
+      measureFontSample(ctx, fontName, weight, style, 'mmmmmmmmmmlliMW@#'),
+      measureFontSample(ctx, fontName, weight, style, 'Quick brown fox')
+    ].join('|');
+  }
+
+  function measureFontSample(ctx, fontName, weight, style, text) {
+    var metrics;
+    ctx.font = style + ' ' + weight + ' 72px ' + quoteFontName(fontName) + ',sans-serif';
+    metrics = ctx.measureText(text);
+    return [
+      metrics.width,
+      metrics.actualBoundingBoxLeft || 0,
+      metrics.actualBoundingBoxRight || 0,
+      metrics.actualBoundingBoxAscent || 0,
+      metrics.actualBoundingBoxDescent || 0
+    ].map(roundMetric).join(',');
+  }
+
+  function roundMetric(val) {
+    return Math.round(val * 100) / 100;
+  }
+
+  var labelTextField = 'label-text';
+  var fontField = 'font-family';
+  var fontSizeField = 'font-size';
+  var fontStyleField = 'font-style';
+  var fontWeightField = 'font-weight';
+  var fillField = 'fill';
+  var cssField = 'css';
+  var iconField = 'icon';
+  var iconSizeField = 'icon-size';
+  var defaultFontSize = 12;
+  var defaultFontStyle = 'normal';
+  var defaultFontWeight = '400';
+  var defaultLabelColor = '#000000';
+  var defaultIconSize = 5;
+  var labelStyleMode = 'label_style';
+  var labelStylePanelMode = 'label_style_tool';
+  var savedStylesKey = 'label_styles';
+  var labelPositionFields = internal.labelPositionFields;
+  var savedStyleFields = [
+    fontField,
+    fontSizeField,
+    fontStyleField,
+    fontWeightField,
+    fillField,
+    cssField,
+    'label-pos',
+    iconField,
+    iconSizeField
+  ];
+  var labelPositions = ['nw', 'n', 'ne', 'w', 'c', 'e', 'sw', 's', 'se'];
+  var iconTypes = [{
+    name: ''
+  }, {
+    name: 'circle'
+  }, {
+    name: 'square'
+  }, {
+    name: 'ring'
+  }, {
+    name: 'star'
+  }];
+  var iconButtonSymbols = {
+    '': '<line x1="4.25" y1="4.25" x2="11.75" y2="11.75"></line><line x1="11.75" y1="4.25" x2="4.25" y2="11.75"></line>',
+    circle: '<circle cx="8" cy="8" r="4.25"></circle>',
+    square: '<rect x="4" y="4" width="8" height="8"></rect>',
+    ring: '<circle cx="8" cy="8" r="3.8"></circle>',
+    star: '<path d="M8 3.2l1.18 2.92 3.14.22-2.42 2 .76 3.06L8 9.75 5.34 11.4l.76-3.06-2.42-2 3.14-.22L8 3.2z"></path>'
+  };
+
+  function LabelTool(gui) {
+    // button is only visible when label editing is available
+    // clicking the button opens a panel for applying styles to labels
+    var textBtn = gui.buttons.addButton('#text-tool-icon').addClass('menu-btn pointer-btn');
+    var parent = gui.container.findChild('.mshp-main-map');
+    var panel = El('div').addClass('label-style-panel rollover').appendTo(parent).hide();
+    var createPanel = El('div').addClass('label-style-panel label-create-panel rollover').appendTo(parent).hide();
+    var createFieldSelect, createExprInput, createCopyCheckbox, createBtn;
+    var styleSelect, fontSelect, fontStyleSelect, fontSizeText, colorChit, colorInput, colorPicker, sbCanvas, hueCanvas, sbMarker, hueMarker, pickerHsbInputs, cssInput, posBtns, iconBtns, iconSizeText, hit;
+    var fontOptionsRendered = false;
+    var pickerColor = {h: 0, s: 0, b: 0};
+    var pendingStyleHistory = null;
+
+    initCreatePanel();
+    initPanel();
+    gui.addMode(labelStylePanelMode, turnOn, turnOff, textBtn);
+    gui.model.on('update', updateVisibility);
+    gui.model.on('update', function() {
+      setTimeout(updateSelectionDisplay, 0);
+    });
+    gui.on('interaction_mode_change', function(e) {
+      if (panel.visible() && e.mode != labelStyleMode && gui.getMode() == labelStylePanelMode) {
+        gui.clearMode();
+      }
+    });
+
+    hit = gui.map.getHitControl && gui.map.getHitControl();
+    if (hit) {
+      hit.on('change', function(e) {
+        if (e.mode == labelStyleMode) {
+          updateSelectionDisplay();
+          updateControls();
+        }
+      });
+    }
+
+    updateVisibility();
+
+    function initPanel() {
+      var header = El('div').addClass('label-style-panel-title').appendTo(panel).text('Label styles');
+      El('button').addClass('label-style-close').appendTo(header).text('×').on('click', function() {
+        gui.clearMode();
+      });
+
+      var selectRow = El('div').addClass('label-style-row label-style-selection-row').appendTo(panel);
+      El('button').appendTo(selectRow).text('Select all').on('click', selectAllLabels);
+      El('button').appendTo(selectRow).text('Clear').on('click', clearSelection);
+
+      var fontRow = El('label').addClass('label-style-row').appendTo(panel);
+      El('span').appendTo(fontRow).text('Font');
+      fontSelect = El('select').appendTo(fontRow).on('change', function() {
+        if (fontSelect.node().value) {
+          applyFont(fontSelect.node().value);
+        }
+      });
+
+      var fontStyleRow = El('label').addClass('label-style-row').appendTo(panel);
+      El('span').appendTo(fontStyleRow).text('Font style');
+      fontStyleSelect = El('select').appendTo(fontStyleRow).on('change', function() {
+        if (fontStyleSelect.node().value) {
+          applyFontStyleVariant(fontStyleSelect.node().value);
+        }
+      });
+
+      var colorSizeRow = El('div').addClass('label-style-row label-split-row').appendTo(panel);
+      var colorRow = El('div').addClass('label-split-cell label-color-row').appendTo(colorSizeRow);
+      El('span').appendTo(colorRow).text('Color');
+      colorChit = makePanelButton(colorRow, '', toggleColorPicker).addClass('label-color-chit');
+      colorInput = El('input').attr('type', 'text').appendTo(colorRow).on('change', function() {
+        var color = colorInput.node().value.trim();
+        if (color) {
+          if (isHexColor(color)) {
+            setPickerColor(hexToHsb(color));
+          }
+          applyLabelColor(color);
+        }
+      });
+      initColorPicker(colorRow);
+
+      var fontSizeRow = El('div').addClass('label-split-cell label-size-row').appendTo(colorSizeRow);
+      El('span').appendTo(fontSizeRow).text('Font size');
+      makePanelButton(fontSizeRow, '−', function() {
+        nudgeFontSize(-1);
+      });
+      fontSizeText = El('span').addClass('label-size-value').appendTo(fontSizeRow);
+      makePanelButton(fontSizeRow, '+', function() {
+        nudgeFontSize(1);
+      });
+
+      var cssRow = El('label').addClass('label-style-row label-css-row').appendTo(panel);
+      El('span').appendTo(cssRow).text('Inline CSS');
+      cssInput = El('input').attr('type', 'text').appendTo(cssRow).on('change', function() {
+        applyInlineCss(cssInput.node().value.trim());
+      });
+
+      var iconSizeRow = El('div').addClass('label-style-row label-split-row').appendTo(panel);
+      var iconRow = El('div').addClass('label-split-cell').appendTo(iconSizeRow);
+      El('div').addClass('label-style-row-label').appendTo(iconRow).text('Icon');
+      var iconGroup = El('div').addClass('label-icon-buttons').appendTo(iconRow);
+      iconBtns = {};
+      iconTypes.forEach(function(icon) {
+        var btn = makePanelButton(iconGroup, '', function() {
+            applyIcon(icon.name);
+          })
+          .attr('data-icon', icon.name || 'none')
+          .attr('title', icon.name || 'no icon');
+        iconBtns[icon.name] = btn;
+        appendIconButtonSymbol(btn, icon.name);
+      });
+
+      var sizeRow = El('div').addClass('label-split-cell label-icon-size-row').appendTo(iconSizeRow);
+      El('span').appendTo(sizeRow).text('Icon size');
+      makePanelButton(sizeRow, '−', function() {
+        nudgeIconSize(-1);
+      });
+      iconSizeText = El('span').addClass('label-icon-size-value').appendTo(sizeRow);
+      makePanelButton(sizeRow, '+', function() {
+        nudgeIconSize(1);
+      });
+
+      var posRow = El('div').addClass('label-style-row').appendTo(panel);
+      El('div').addClass('label-style-row-label').appendTo(posRow).text('Position');
+      var grid = El('div').addClass('label-position-grid').appendTo(posRow);
+      posBtns = {};
+      labelPositions.forEach(function(pos) {
+        posBtns[pos] = makePanelButton(grid, '', function() {
+            applyLabelPosition(pos);
+          })
+          .attr('data-position', pos)
+          .attr('title', pos);
+      });
+
+      var savedRow = El('div').addClass('label-style-row label-saved-style-row').appendTo(panel);
+      El('span').appendTo(savedRow).text('Presets');
+      styleSelect = El('select').appendTo(savedRow).on('change', function() {
+        if (styleSelect.node().value) {
+          applySavedStyle(styleSelect.node().value);
+        }
+        updateSavedStyleControls();
+      });
+      El('button').appendTo(savedRow).text('Save preset').on('click', saveCurrentStyle);
+      El('button').appendTo(savedRow).text('Delete').on('click', deleteSelectedStyle);
+      renderSavedStyles();
+    }
+
+    function initCreatePanel() {
+      var header = El('div').addClass('label-style-panel-title').appendTo(createPanel).text('Create labels');
+      El('button').addClass('label-style-close').appendTo(header).text('×').on('click', function() {
+        gui.clearMode();
+      });
+
+      var fieldRow = El('label').addClass('label-style-row').appendTo(createPanel);
+      El('span').appendTo(fieldRow).text('Label field');
+      createFieldSelect = El('select').appendTo(fieldRow).on('change', function() {
+        var field = createFieldSelect.node().value;
+        if (field) {
+          createExprInput.node().value = getFieldExpression(field);
+        }
+        updateCreateButton();
+      });
+
+      var exprRow = El('label').addClass('label-style-row label-create-expression-row').appendTo(createPanel);
+      El('span').appendTo(exprRow).text('or expression');
+      createExprInput = El('input')
+        .attr('type', 'text')
+        .appendTo(exprRow)
+        .on('input', updateCreateButton)
+        .on('change', updateCreateButton);
+
+      var copyRow = El('label').addClass('label-style-row label-create-copy-row').appendTo(createPanel);
+      createCopyCheckbox = El('input').attr('type', 'checkbox').appendTo(copyRow);
+      El('span').appendTo(copyRow).text('Create as new layer');
+
+      var btnRow = El('div').addClass('label-style-row').appendTo(createPanel);
+      createBtn = El('button').appendTo(btnRow).text('Create labels').on('click', createLabels);
+    }
+
+    function appendIconButtonSymbol(btn, iconName) {
+      var svg = '<svg class="label-icon-symbol" viewBox="0 0 16 16" aria-hidden="true">' +
+        iconButtonSymbols[iconName] + '</svg>';
+      El(svg).appendTo(btn);
+    }
+
+    function makePanelButton(parent, label, action) {
+      return El('div')
+        .addClass('label-panel-btn')
+        .attr('role', 'button')
+        .attr('tabindex', '0')
+        .appendTo(parent)
+        .text(label)
+        .on('click', function(e) {
+          if (this.classList.contains('disabled')) return;
+          action(e);
+        })
+        .on('keydown', function(e) {
+          if (e.key == 'Enter' || e.key == ' ') {
+            e.preventDefault();
+            if (!this.classList.contains('disabled')) action(e);
+          }
+        });
+    }
+
+    function setPanelButtonDisabled(el, disabled) {
+      el.classed('disabled', !!disabled)
+        .attr('aria-disabled', disabled ? 'true' : 'false')
+        .attr('tabindex', disabled ? '-1' : '0');
+    }
+
+    function turnOn() {
+      if (!activeLayerIsPointLayer()) {
+        gui.clearMode();
+        return;
+      }
+      if (!activeLayerHasLabels()) {
+        showCreatePanel();
+        return;
+      }
+      showStylePanel();
+    }
+
+    function showStylePanel() {
+      renderFontOptions();
+      createPanel.hide();
+      gui.interaction.setMode(labelStyleMode);
+      gui.state.label_style_panel_open = true;
+      panel.show();
+      textBtn.addClass('selected');
+      updateControls();
+      updateSelectionDisplay();
+    }
+
+    function showCreatePanel() {
+      panel.hide();
+      hideColorPicker();
+      if (gui.interaction.getMode() == labelStyleMode) {
+        gui.interaction.turnOff();
+      }
+      gui.state.label_style_panel_open = true;
+      createPanel.show();
+      textBtn.addClass('selected');
+      renderCreateFields();
+      updateCreateButton();
+    }
+
+    function turnOff() {
+      if (panel.visible()) {
+        flushPendingStyleHistory();
+      }
+      panel.hide();
+      createPanel.hide();
+      hideColorPicker();
+      gui.state.label_style_panel_open = false;
+      textBtn.removeClass('selected');
+      clearSelectionDisplay();
+      if (hit) hit.clearSelection();
+      if (gui.interaction.getMode() == labelStyleMode) {
+        gui.interaction.turnOff();
+      }
+    }
+
+    function updateVisibility() {
+      var enabled = activeLayerIsPointLayer();
+      textBtn.classed('disabled', !enabled);
+      textBtn[enabled ? 'show' : 'hide']();
+      if (!enabled && gui.getMode() == labelStylePanelMode) {
+        gui.clearMode();
+      }
+    }
+
+    function activeLayerHasLabels() {
+      var active = gui.model.getActiveLayer();
+      return !!(active && internal.layerHasLabels(active.layer));
+    }
+
+    function activeLayerIsPointLayer() {
+      var active = gui.model.getActiveLayer();
+      return !!(active && active.layer && active.layer.geometry_type == 'point');
+    }
+
+    function renderFontOptions() {
+      if (fontOptionsRendered) return;
+      fontOptionsRendered = true;
+      fontSelect.empty();
+      El('option').attr('value', '').appendTo(fontSelect).text('');
+      getInstalledFonts().forEach(function(group) {
+        var optgroup = El('optgroup').attr('label', group.name).appendTo(fontSelect);
+        group.fonts.forEach(function(fontName) {
+          El('option').attr('value', fontName).appendTo(optgroup).text(fontName);
+        });
+      });
+    }
+
+    function renderCreateFields() {
+      var lyr = getActiveLayer();
+      var records = lyr && lyr.data ? lyr.data.getRecords() : [];
+      var fields = lyr && lyr.data ? lyr.data.getFields().filter(function(field) {
+        return internal.getColumnType(field, records) == 'string';
+      }) : [];
+      var value = createFieldSelect.node().value;
+      createFieldSelect.empty();
+      El('option').attr('value', '').appendTo(createFieldSelect).text('');
+      fields.forEach(function(field) {
+        El('option').attr('value', field).appendTo(createFieldSelect).text(field);
+      });
+      createFieldSelect.node().disabled = fields.length === 0;
+      createFieldSelect.node().value = fields.indexOf(value) > -1 ? value : '';
+    }
+
+    function updateCreateButton() {
+      createBtn.node().disabled = createExprInput.node().value.trim() === '';
+    }
+
+    function getFieldExpression(field) {
+      return 'd[' + JSON.stringify(field) + ']';
+    }
+
+    function createLabels() {
+      var active = gui.model.getActiveLayer();
+      var srcLyr = active && active.layer;
+      var dataset = active && active.dataset;
+      var expr = createExprInput.node().value.trim();
+      var lyr;
+      if (!srcLyr || srcLyr.geometry_type != 'point' || !expr) return;
+      lyr = createCopyCheckbox.node().checked ? makeLabelLayerCopy(srcLyr, dataset) : srcLyr;
+      if (!applyLabelText(lyr, expr)) return;
+      if (lyr != srcLyr) {
+        addLabelLayerCopy(lyr, srcLyr, dataset);
+        recordCreateLabelsCommand(expr, lyr);
+        selectLabelLayerCopy(lyr, dataset);
+      } else {
+        gui.model.updated({style: true, same_table: true});
+        recordCreateLabelsCommand(expr);
+      }
+      showStylePanel();
+      setTimeout(function() {
+        selectAllLabels();
+      }, 0);
+    }
+
+    function makeLabelLayerCopy(srcLyr, dataset) {
+      var lyr = internal.copyLayer(srcLyr);
+      delete lyr.gui;
+      lyr.name = 'labels';
+      return lyr;
+    }
+
+    function addLabelLayerCopy(lyr, srcLyr, dataset) {
+      var i = dataset.layers.indexOf(srcLyr);
+      internal.noteDatasetWillChange(dataset, {operation: 'createLabelLayer', unit: 'layers'});
+      dataset.layers.splice(i + 1, 0, lyr);
+      internal.markDatasetChanged(dataset, {operation: 'createLabelLayer', unit: 'layers'});
+    }
+
+    function selectLabelLayerCopy(lyr, dataset) {
+      gui.model.setDefaultTarget([lyr], dataset);
+      gui.model.updated({select: true});
+    }
+
+    function applyLabelText(lyr, expr) {
+      var table = internal.getLayerDataTable(lyr);
+      var hasField = table.fieldExists(labelTextField);
+      var records = table.getRecords();
+      var accessor;
+      try {
+        accessor = internal.getSymbolPropertyAccessor(expr, labelTextField, lyr);
+      } catch(e) {
+        showPopupAlert(e.message || 'Invalid label expression', 'Create labels');
+        return false;
+      }
+      if (hasField) {
+        table.captureFieldsBefore([labelTextField], {operation: 'create-labels'});
+      } else {
+        table.captureSchemaBefore({operation: 'create-labels', fields: [labelTextField]});
+      }
+      records.forEach(function(rec, i) {
+        if (!rec) rec = records[i] = {};
+        rec[labelTextField] = accessor(i);
+      });
+      if (hasField) {
+        table.markFieldsChanged([labelTextField], {operation: 'create-labels'});
+      } else {
+        table.markSchemaChanged({operation: 'create-labels', fields: [labelTextField]});
+      }
+      return true;
+    }
+
+    function updatePendingStyleHistory(lyr, ids, fields) {
+      if (!gui.session || !lyr || ids.length === 0) return;
+      if (pendingStyleHistory && (pendingStyleHistory.layer != lyr ||
+          !sameIds(pendingStyleHistory.ids, ids))) {
+        flushPendingStyleHistory();
+      }
+      if (!pendingStyleHistory) {
+        pendingStyleHistory = {
+          layer: lyr,
+          ids: ids.concat(),
+          fields: []
+        };
+      }
+      getHistoryStyleFields(fields).forEach(function(field) {
+        if (pendingStyleHistory.fields.indexOf(field) == -1) {
+          pendingStyleHistory.fields.push(field);
+        }
+      });
+    }
+
+    function flushPendingStyleHistory() {
+      var cmd;
+      if (!pendingStyleHistory || !gui.session) return;
+      cmd = getStyleHistoryCommand(pendingStyleHistory);
+      pendingStyleHistory = null;
+      if (cmd) {
+        gui.session.consoleCommands(cmd);
+      }
+    }
+
+    function getStyleHistoryCommand(entry) {
+      var table = entry.layer.data;
+      var records = table && table.getRecords();
+      var fields = entry.fields.filter(function(field) {
+        return field != labelTextField;
+      });
+      var parts = ['-style'];
+      var values;
+      if (!records || fields.length === 0) return '';
+      values = getHistoryStyleValues(records, entry.ids, fields);
+      Object.keys(values).forEach(function(field) {
+        parts.push(field + '=' + quoteCommandValue(values[field]));
+      });
+      if (parts.length == 1) return '';
+      if (getActiveLayer() != entry.layer) {
+        parts.push('target=' + internal.formatOptionValue(internal.getLayerTargetId(gui.model, entry.layer)));
+      }
+      if (entry.ids.length < internal.getFeatureCount(entry.layer)) {
+        parts.push('where=' + quoteCommandValue(getIdsWhereExpression(entry.ids)));
+      }
+      return parts.join(' ');
+    }
+
+    function getHistoryStyleValues(records, ids, fields) {
+      return fields.reduce(function(memo, field) {
+        var value = getCommonRecordValue(records, ids, field);
+        if (value !== undefined && value !== null && value !== '') {
+          memo[field] = value;
+        }
+        return memo;
+      }, {});
+    }
+
+    function getCommonRecordValue(records, ids, field) {
+      var value, val;
+      for (var i=0; i<ids.length; i++) {
+        val = records[ids[i]] && records[ids[i]][field];
+        if (i === 0) {
+          value = val;
+        } else if (val != value) {
+          return undefined;
+        }
+      }
+      return value;
+    }
+
+    function getHistoryStyleFields(fields) {
+      var out = [];
+      fields.forEach(function(field) {
+        if (field == 'dx' || field == 'dy' || field == 'text-anchor') return;
+        if (out.indexOf(field) == -1) out.push(field);
+      });
+      return out;
+    }
+
+    function getIdsWhereExpression(ids) {
+      return '[' + ids.join(',') + '].indexOf($.id)>-1';
+    }
+
+    function sameIds(a, b) {
+      if (!a || !b || a.length != b.length) return false;
+      for (var i=0; i<a.length; i++) {
+        if (a[i] != b[i]) return false;
+      }
+      return true;
+    }
+
+    function recordCreateLabelsCommand(expr, copyLyr) {
+      var cmd = '';
+      if (!gui.session) return;
+      if (copyLyr) {
+        cmd += '-filter true + name=' + internal.formatOptionValue(copyLyr.name) + ' ';
+      }
+      cmd += '-style label-text=' + quoteCommandValue(expr);
+      gui.session.consoleCommands(cmd);
+    }
+
+    function quoteCommandValue(str) {
+      return "'" + String(str).replace(/'/g, "\\'") + "'";
+    }
+
+    function selectAllLabels() {
+      var lyr = getActiveLayer();
+      var ids = [];
+      if (!hit || !lyr) return;
+      for (var i=0, n=internal.getFeatureCount(lyr); i<n; i++) {
+        ids.push(i);
+      }
+      hit.clearSelection();
+      if (ids.length > 0) {
+        hit.addSelectionIds(ids);
+      }
+      updateSelectionDisplay();
+      updateControls();
+    }
+
+    function clearSelection() {
+      if (hit) hit.clearSelection();
+      updateSelectionDisplay();
+      updateControls();
+    }
+
+    function getActiveLayer() {
+      var active = gui.model.getActiveLayer();
+      return active && active.layer;
+    }
+
+    function getActiveTable() {
+      var lyr = getActiveLayer();
+      return lyr && lyr.data || null;
+    }
+
+    function getSelectionIds() {
+      return hit ? hit.getSelectionIds() : [];
+    }
+
+    function updateControls() {
+      var ids = getSelectionIds();
+      var fontVal = getCommonValue(ids, fontField);
+      var fontSizeVal = getCommonValue(ids, fontSizeField, {useDefault: true, defaultValue: defaultFontSize});
+      var fontStyleVal = getCommonValue(ids, fontStyleField, {useDefault: true, defaultValue: defaultFontStyle});
+      var fontWeightVal = getCommonValue(ids, fontWeightField, {useDefault: true, defaultValue: defaultFontWeight});
+      var fillVal = getCommonValue(ids, fillField, {useDefault: true, defaultValue: defaultLabelColor});
+      var cssVal = getCommonValue(ids, cssField);
+      var posVal = getCommonValue(ids, 'label-pos');
+      var iconVal = getCommonValue(ids, iconField);
+      var iconSizeVal = getCommonValue(ids, iconSizeField, {useDefault: true, defaultValue: defaultIconSize});
+      styleSelect.node().disabled = ids.length === 0;
+      updateSavedStyleControls();
+      fontSelect.node().disabled = ids.length === 0;
+      fontSelect.node().value = fontVal;
+      updateFontStyleControls(fontVal, fontStyleVal, fontWeightVal);
+      updateFontSizeControls(ids.length ? fontSizeVal : '');
+      updateColorControls(ids.length ? fillVal : '');
+      updateCssControl(ids.length ? cssVal : '');
+      updatePositionButtons(ids.length ? posVal : '');
+      updateIconButtons(ids.length ? iconVal : '');
+      updateIconSizeControls(ids.length ? iconSizeVal : '');
+    }
+
+    function updatePositionButtons(pos) {
+      var disabled = getSelectionIds().length === 0;
+      labelPositions.forEach(function(name) {
+        posBtns[name].classed('selected', name == pos);
+        setPanelButtonDisabled(posBtns[name], disabled);
+      });
+    }
+
+    function updateFontSizeControls(fontSizeVal) {
+      var disabled = getSelectionIds().length === 0;
+      fontSizeText.text(fontSizeVal || '');
+      panel.findChildren('.label-size-row .label-panel-btn').forEach(function(btn) {
+        setPanelButtonDisabled(btn, disabled);
+      });
+    }
+
+    function updateFontStyleControls(fontName, fontStyleVal, fontWeightVal) {
+      var disabled = getSelectionIds().length === 0 || !fontName;
+      fontStyleSelect.empty();
+      El('option').attr('value', '').appendTo(fontStyleSelect).text('');
+      if (fontName) {
+        getFontStyleVariants(fontName).forEach(function(variant) {
+          El('option').attr('value', variant.value).appendTo(fontStyleSelect).text(variant.label);
+        });
+      }
+      fontStyleSelect.node().disabled = disabled;
+      fontStyleSelect.node().value = fontStyleVal && fontWeightVal ?
+        fontStyleVal + '|' + fontWeightVal : '';
+    }
+
+    function updateColorControls(colorVal) {
+      var disabled = getSelectionIds().length === 0;
+      colorInput.node().disabled = disabled;
+      colorInput.node().value = colorVal || '';
+      setPanelButtonDisabled(colorChit, disabled || !isHexColor(colorVal));
+      colorChit.css('background-color', isHexColor(colorVal) ? colorVal : 'transparent');
+      if (colorPicker.visible()) {
+        return; // avoid HSB -> RGB -> HSB rounding jumps after picker commits
+      }
+      if (isHexColor(colorVal)) {
+        setPickerColor(hexToHsb(colorVal));
+      } else {
+        hideColorPicker();
+      }
+    }
+
+    function updateCssControl(cssVal) {
+      cssInput.node().disabled = getSelectionIds().length === 0;
+      cssInput.node().value = cssVal || '';
+    }
+
+    function updateIconButtons(iconVal) {
+      var disabled = getSelectionIds().length === 0;
+      iconTypes.forEach(function(icon) {
+        iconBtns[icon.name].classed('selected', !disabled && icon.name == iconVal);
+        setPanelButtonDisabled(iconBtns[icon.name], disabled);
+      });
+    }
+
+    function updateIconSizeControls(iconSizeVal) {
+      var disabled = getSelectionIds().length === 0;
+      iconSizeText.text(iconSizeVal || '');
+      panel.findChildren('.label-icon-size-row .label-panel-btn').forEach(function(btn) {
+        setPanelButtonDisabled(btn, disabled);
+      });
+    }
+
+    function updateSavedStyleControls() {
+      var disabled = getSelectionIds().length === 0;
+      var buttons = panel.findChildren('.label-saved-style-row button');
+      buttons.forEach(function(btn, i) {
+        btn.node().disabled = i === 0 ? disabled : disabled || !styleSelect.node().value;
+      });
+    }
+
+    function getCommonValue(ids, field, opts) {
+      var table = getActiveTable();
+      var records = table && table.getRecords();
+      var value, val, hasValue;
+      if (!records || ids.length === 0) return '';
+      for (var i=0; i<ids.length; i++) {
+        val = records[ids[i]] && records[ids[i]][field];
+        if (!val) {
+          if (opts && opts.useDefault) {
+            val = opts.defaultValue;
+          } else {
+            return '';
+          }
+        } else {
+          hasValue = true;
+        }
+        if (i === 0) {
+          value = val;
+        } else if (val != value) {
+          return '';
+        }
+      }
+      return hasValue || opts && opts.useDefault ? value : '';
+    }
+
+    function applyFont(fontName) {
+      applyStyleFields([fontField], function(rec) {
+        rec[fontField] = fontName;
+      });
+    }
+
+    function nudgeFontSize(delta) {
+      var ids = getSelectionIds();
+      var size = getNumericSize(ids, fontSizeField, defaultFontSize);
+      if (ids.length === 0) return;
+      size = Math.max(1, size + delta);
+      applyStyleFields([fontSizeField], function(rec) {
+        rec[fontSizeField] = size;
+      });
+    }
+
+    function applyFontStyleVariant(value) {
+      var variant = parseFontStyleVariant(value);
+      if (!variant) return;
+      applyStyleFields([fontStyleField, fontWeightField], function(rec) {
+        rec[fontStyleField] = variant.style;
+        rec[fontWeightField] = variant.weight;
+      });
+    }
+
+    function applyLabelColor(color) {
+      applyStyleFields([fillField], function(rec) {
+        rec[fillField] = color;
+      });
+    }
+
+    function applyInlineCss(css) {
+      applyStyleFields([cssField], function(rec) {
+        rec[cssField] = css || undefined;
+      });
+    }
+
+    function saveCurrentStyle() {
+      openSaveStylePopup();
+    }
+
+    function openSaveStylePopup() {
+      var popup = showPopupAlert('', 'Save label style');
+      var el = popup.container();
+      el.addClass('option-menu');
+      el.html(`<div><input type="text" class="style-name text-input" placeholder="style name"></div>
+      <div tabindex="0" class="btn dialog-btn">Save</div>`);
+      var input = el.findChild('.style-name');
+      var btn = el.findChild('.btn');
+      input.node().focus();
+      btn.on('click', function() {
+        var name = input.node().value.trim();
+        if (!name) return;
+        saveStyleWithName(name);
+        popup.close();
+      });
+      input.on('keydown', function(e) {
+        if (e.key == 'Enter') {
+          btn.node().click();
+        }
+      });
+    }
+
+    function saveStyleWithName(name) {
+      var styles = getSavedStyles().filter(function(item) {
+        return item.name != name;
+      });
+      var i;
+      styles.push({
+        name: name,
+        style: getCurrentStyle()
+      });
+      styles.sort(function(a, b) {
+        return a.name.toLowerCase() < b.name.toLowerCase() ? -1 :
+          a.name.toLowerCase() > b.name.toLowerCase() ? 1 : 0;
+      });
+      GUI.setSavedValue(savedStylesKey, styles);
+      renderSavedStyles();
+      for (i=0; i<styleSelect.node().options.length; i++) {
+        if (styleSelect.node().options[i].value == name) {
+          styleSelect.node().selectedIndex = i;
+          break;
+        }
+      }
+    }
+
+    async function deleteSelectedStyle() {
+      var name = styleSelect.node().value;
+      var styles;
+      if (!name) return;
+      if (!await showPrompt('Delete label style "' + name + '"?', 'Delete preset')) return;
+      styles = getSavedStyles().filter(function(item) {
+        return item.name != name;
+      });
+      GUI.setSavedValue(savedStylesKey, styles);
+      renderSavedStyles();
+      updateSavedStyleControls();
+    }
+
+    function applySavedStyle(name) {
+      var item = getSavedStyles().find(function(item) {
+        return item.name == name;
+      });
+      if (!item) return;
+      applyStyleObject(item.style);
+    }
+
+    function getSavedStyles() {
+      var styles = GUI.getSavedValue(savedStylesKey);
+      return Array.isArray(styles) ? styles : [];
+    }
+
+    function renderSavedStyles() {
+      var value = styleSelect && styleSelect.node().value;
+      if (!styleSelect) return;
+      styleSelect.empty();
+      El('option').attr('value', '').appendTo(styleSelect).text('Apply preset...');
+      getSavedStyles().forEach(function(item) {
+        El('option').attr('value', item.name).appendTo(styleSelect).text(item.name);
+      });
+      styleSelect.node().value = value || '';
+      updateSavedStyleControls();
+    }
+
+    function getCurrentStyle() {
+      var style = {};
+      var fontStyle = parseFontStyleVariant(fontStyleSelect.node().value);
+      var icon = getSelectedIcon();
+      addStyleValue(style, fontField, fontSelect.node().value);
+      if (fontStyle) {
+        style[fontStyleField] = fontStyle.style;
+        style[fontWeightField] = fontStyle.weight;
+      }
+      addStyleValue(style, fontSizeField, getNumericControlValue(fontSizeText));
+      addStyleValue(style, fillField, colorInput.node().value.trim());
+      addStyleValue(style, cssField, cssInput.node().value.trim());
+      addStyleValue(style, 'label-pos', getSelectedLabelPosition());
+      addStyleValue(style, iconField, icon);
+      if (icon) {
+        addStyleValue(style, iconSizeField, getNumericControlValue(iconSizeText));
+      }
+      return style;
+    }
+
+    function addStyleValue(style, field, value) {
+      if (value || value === 0) {
+        style[field] = value;
+      }
+    }
+
+    function getNumericControlValue(el) {
+      var value = Number(el.text());
+      return isFinite(value) && value > 0 ? value : null;
+    }
+
+    function getSelectedLabelPosition() {
+      var out = '';
+      labelPositions.forEach(function(pos) {
+        if (posBtns[pos].hasClass('selected')) out = pos;
+      });
+      return out;
+    }
+
+    function getSelectedIcon() {
+      var out = '';
+      iconTypes.forEach(function(icon) {
+        if (iconBtns[icon.name].hasClass('selected')) out = icon.name;
+      });
+      return out;
+    }
+
+    function applyStyleObject(style) {
+      var fields = Object.keys(style || {}).reduce(function(memo, field) {
+        if (field == 'label-pos') {
+          labelPositionFields.forEach(function(field) {
+            if (memo.indexOf(field) == -1) memo.push(field);
+          });
+        } else if (field != 'dx' && field != 'dy') {
+          memo.push(field);
+        }
+        return memo;
+      }, []);
+      applyStyleFields(fields, function(rec) {
+        savedStyleFields.forEach(function(field) {
+          if (field in style && field != 'label-pos') {
+            rec[field] = style[field];
+          }
+        });
+        if (style['label-pos']) {
+          internal.setLabelPositionStyle(rec, style['label-pos']);
+        }
+      });
+    }
+
+    function parseFontStyleVariant(value) {
+      var parts = String(value).split('|');
+      if (parts.length != 2) return null;
+      return {
+        style: parts[0],
+        weight: parts[1]
+      };
+    }
+
+    function applyLabelPosition(pos) {
+      applyStyleFields(labelPositionFields, function(rec) {
+        internal.setLabelPositionStyle(rec, pos);
+      });
+    }
+
+    function applyIcon(iconName) {
+      applyStyleFields([iconField, iconSizeField], function(rec) {
+        if (iconName) {
+          rec[iconField] = iconName;
+          if (!(rec[iconSizeField] > 0)) {
+            rec[iconSizeField] = defaultIconSize;
+          }
+        } else {
+          rec[iconField] = undefined;
+          rec[iconSizeField] = undefined;
+        }
+      });
+    }
+
+    function nudgeIconSize(delta) {
+      var ids = getSelectionIds();
+      var size = getNumericSize(ids, iconSizeField, defaultIconSize);
+      if (ids.length === 0) return;
+      size = Math.max(1, size + delta);
+      applyStyleFields([iconField, iconSizeField], function(rec) {
+        if (!rec[iconField]) {
+          rec[iconField] = 'circle';
+        }
+        rec[iconSizeField] = size;
+      });
+    }
+
+    function getNumericSize(ids, field, defaultValue) {
+      var val = getCommonValue(ids, field);
+      val = val ? Number(val) : defaultValue;
+      return isFinite(val) && val > 0 ? val : defaultValue;
+    }
+
+    function isHexColor(str) {
+      return /^#[0-9a-f]{6}$/i.test(str);
+    }
+
+    function initColorPicker(colorRow) {
+      colorPicker = El('div').addClass('label-color-picker').appendTo(colorRow).hide();
+      var sbWrap = El('div').addClass('label-color-canvas-wrap').appendTo(colorPicker);
+      sbCanvas = El('canvas').attr('width', '256').attr('height', '256').appendTo(sbWrap);
+      sbMarker = makePickerMarker().appendTo(sbWrap);
+      var hueWrap = El('div').addClass('label-color-canvas-wrap').appendTo(colorPicker);
+      hueCanvas = El('canvas').attr('width', '256').attr('height', '18').appendTo(hueWrap);
+      hueMarker = makePickerMarker().appendTo(hueWrap);
+      pickerHsbInputs = {};
+      var hsbRow = El('div').addClass('label-color-picker-fields').appendTo(colorPicker);
+      addPickerNumberInput(hsbRow, 'h', 'H');
+      addPickerNumberInput(hsbRow, 's', 'S');
+      addPickerNumberInput(hsbRow, 'b', 'B');
+      El('button').appendTo(hsbRow).text('Close').on('click', closePickerColor);
+      sbCanvas.on('mousedown', function(e) {
+        startCanvasDrag(e, updateSbFromEvent);
+      });
+      hueCanvas.on('mousedown', function(e) {
+        startCanvasDrag(e, updateHueFromEvent);
+      });
+      setPickerColor(pickerColor);
+    }
+
+    function addPickerNumberInput(row, name, label) {
+      var wrapper = El('label').appendTo(row);
+      El('span').appendTo(wrapper).text(label);
+      pickerHsbInputs[name] = El('input')
+        .attr('type', 'text')
+        .appendTo(wrapper)
+        .on('change', function() {
+          var h = parseNumberField(pickerHsbInputs.h.node().value);
+          var s = parseNumberField(pickerHsbInputs.s.node().value);
+          var b = parseNumberField(pickerHsbInputs.b.node().value);
+          if (!isFinite(h) || !isFinite(s) || !isFinite(b)) return;
+          setPickerColor({
+            h: degreesToByte(h),
+            s: pctToByte(s),
+            b: pctToByte(b)
+          });
+          commitPickerColor();
         });
+    }
+
+    function toggleColorPicker() {
+      if (colorPicker.visible()) {
+        hideColorPicker();
       } else {
-        el.removeClass('visible');
-        // wait for the transition to finish before hiding completely
-        clearTimeout(hideTimer);
-        hideTimer = setTimeout(function() {
-          if (!(visible && GUI.isActiveInstance(gui))) {
-            el.css('display', 'none');
-          }
-        }, transitionMs);
+        colorPicker.show();
+        drawColorPicker();
       }
     }
-  }
 
-  function ToolbarButton(parent, iconRef, opts) {
-    var btn = El('div').addClass('floating-toolbar-btn').appendTo(parent);
-    if (iconRef) {
-      var iconNode = El('body').findChild(iconRef);
-      if (iconNode) {
-        var icon = iconNode.node().cloneNode(true);
-        if (icon.hasAttribute('id')) icon.removeAttribute('id');
-        btn.node().appendChild(icon);
+    function hideColorPicker() {
+      colorPicker.hide();
+    }
+
+    function startCanvasDrag(e, update) {
+      var evt = e.originalEvent || e;
+      colorPicker.addClass('dragging-color');
+      El('body').addClass('dragging-color-picker');
+      update(evt);
+      document.addEventListener('mousemove', onmove);
+      document.addEventListener('mouseup', onup);
+      evt.preventDefault();
+      function onmove(evt) {
+        update(evt);
+      }
+      function onup() {
+        document.removeEventListener('mousemove', onmove);
+        document.removeEventListener('mouseup', onup);
+        colorPicker.removeClass('dragging-color');
+        El('body').removeClass('dragging-color-picker');
+        commitPickerColor();
       }
     }
-    var enabled = true;
-    var clickHandlers = [];
 
-    if (opts.tooltip) setTooltip(opts.tooltip);
+    function updateSbFromEvent(evt) {
+      var p = getCanvasPoint(sbCanvas.node(), evt);
+      setPickerColor({
+        h: pickerColor.h,
+        s: p.x,
+        b: 255 - p.y
+      });
+    }
 
-    // Block native dblclick to avoid the map's double-click zoom
-    btn.on('dblclick', function(e) { e.stopPropagation(); });
+    function updateHueFromEvent(evt) {
+      var p = getCanvasPoint(hueCanvas.node(), evt);
+      setPickerColor({
+        h: p.x,
+        s: pickerColor.s,
+        b: pickerColor.b
+      });
+    }
 
-    btn.on('click', function(e) {
-      if (!enabled) return;
-      for (var i = 0; i < clickHandlers.length; i++) {
-        clickHandlers[i](e);
-      }
-    });
+    function getCanvasPoint(canvas, evt) {
+      var rect = canvas.getBoundingClientRect();
+      return {
+        x: clamp(Math.round((evt.clientX - rect.left) / rect.width * (canvas.width - 1)), 0, canvas.width - 1),
+        y: clamp(Math.round((evt.clientY - rect.top) / rect.height * (canvas.height - 1)), 0, canvas.height - 1)
+      };
+    }
 
-    this.on = function(event, fn) {
-      if (event == 'click') {
-        clickHandlers.push(fn);
-      } else {
-        btn.on(event, fn);
+    function setPickerColor(hsb) {
+      pickerColor = {
+        h: clamp(Math.round(hsb.h), 0, 255),
+        s: clamp(Math.round(hsb.s), 0, 255),
+        b: clamp(Math.round(hsb.b), 0, 255)
+      };
+      drawColorPicker();
+      updatePickerFields();
+    }
+
+    function updatePickerFields() {
+      var hex = hsbToHex(pickerColor);
+      pickerHsbInputs.h.node().value = byteToDegrees(pickerColor.h) + '°';
+      pickerHsbInputs.s.node().value = byteToPct(pickerColor.s) + '%';
+      pickerHsbInputs.b.node().value = byteToPct(pickerColor.b) + '%';
+      colorInput.node().value = hex;
+      colorChit.css('background-color', hex);
+    }
+
+    function drawColorPicker() {
+      if (!sbCanvas) return;
+      drawSaturationBrightnessCanvas();
+      drawHueCanvas();
+    }
+
+    function drawSaturationBrightnessCanvas() {
+      var ctx = sbCanvas.node().getContext('2d');
+      var image = ctx.createImageData(256, 256);
+      var data = image.data;
+      var i = 0;
+      for (var y=0; y<256; y++) {
+        for (var x=0; x<256; x++) {
+          var rgb = hsbToRgb({
+            h: pickerColor.h,
+            s: x,
+            b: 255 - y
+          });
+          data[i++] = rgb.r;
+          data[i++] = rgb.g;
+          data[i++] = rgb.b;
+          data[i++] = 255;
+        }
       }
-      return this;
-    };
+      ctx.putImageData(image, 0, 0);
+      positionMarker(sbMarker, pickerColor.s, 255 - pickerColor.b, pickerColor);
+    }
+
+    function drawHueCanvas() {
+      var ctx = hueCanvas.node().getContext('2d');
+      var image = ctx.createImageData(256, 18);
+      var data = image.data;
+      var i = 0;
+      for (var y=0; y<18; y++) {
+        for (var x=0; x<256; x++) {
+          var rgb = hsbToRgb({h: x, s: 255, b: 255});
+          data[i++] = rgb.r;
+          data[i++] = rgb.g;
+          data[i++] = rgb.b;
+          data[i++] = 255;
+        }
+      }
+      ctx.putImageData(image, 0, 0);
+      positionMarker(hueMarker, pickerColor.h, 9, {h: pickerColor.h, s: 255, b: 255});
+    }
 
-    this.enable = function() { return this.setEnabled(true); };
-    this.disable = function() { return this.setEnabled(false); };
+    function commitPickerColor() {
+      applyLabelColor(hsbToHex(pickerColor));
+    }
 
-    this.setEnabled = function(b) {
-      enabled = !!b;
-      btn.classed('disabled', !enabled);
-      return this;
-    };
+    function closePickerColor() {
+      hideColorPicker();
+    }
 
-    this.setTooltip = setTooltip;
+    function getMarkerColor(rgb) {
+      var luminance = rgb.r * 0.2126 + rgb.g * 0.7152 + rgb.b * 0.0722;
+      return luminance < 128 ? '#fff' : '#000';
+    }
 
-    this.node = function() {
-      return btn.node();
-    };
+    function makePickerMarker() {
+      return El('<svg class="label-color-marker" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"></circle></svg>');
+    }
 
-    function setTooltip(text) {
-      btn.attr('data-tooltip', text);
+    function positionMarker(marker, x, y, hsb) {
+      var rgb = hsbToRgb(hsb);
+      x = utils$1.clamp(x, 1, 254);
+      y = utils$1.clamp(y, 1, 254) + 0.5;
+      marker.css({
+        left: x - 8,
+        top: y - 8
+      });
+      marker.findChild('circle').attr('stroke', getMarkerColor(rgb));
+    }
+
+    function hexToHsb(hex) {
+      var r = parseInt(hex.substr(1, 2), 16);
+      var g = parseInt(hex.substr(3, 2), 16);
+      var b = parseInt(hex.substr(5, 2), 16);
+      var max = Math.max(r, g, b);
+      var min = Math.min(r, g, b);
+      var d = max - min;
+      var h = 0;
+      if (d) {
+        if (max == r) h = ((g - b) / d) % 6;
+        else if (max == g) h = (b - r) / d + 2;
+        else h = (r - g) / d + 4;
+        h *= 60;
+        if (h < 0) h += 360;
+      }
+      return {
+        h: Math.round(h / 360 * 255),
+        s: Math.round(max === 0 ? 0 : d / max * 255),
+        b: max
+      };
     }
-  }
 
-  // Floating toolbar that exposes undo/redo while the user is in an editing
-  // interaction mode. The toolbar is the first consumer of FloatingToolbar;
-  // future per-mode toolbars (e.g. feature styling) can follow the same pattern.
+    function hsbToHex(hsb) {
+      var rgb = hsbToRgb(hsb);
+      return '#' + [rgb.r, rgb.g, rgb.b].map(function(val) {
+        return val.toString(16).padStart(2, '0');
+      }).join('');
+    }
 
-  function EditToolbar(gui) {
-    var toolbar = new FloatingToolbar(gui, { name: 'edit-toolbar' });
-    var isMac = navigator.userAgent.includes('Mac');
-    var modKey = isMac ? '\u2318' : 'Ctrl+';
-    var shiftKey = isMac ? '\u21e7' : 'Shift+';
+    function hsbToRgb(hsb) {
+      var h = hsb.h / 255 * 360;
+      var s = hsb.s / 255;
+      var v = hsb.b / 255;
+      var c = v * s;
+      var x = c * (1 - Math.abs((h / 60) % 2 - 1));
+      var m = v - c;
+      var rgb = h < 60 ? [c, x, 0] :
+        h < 120 ? [x, c, 0] :
+        h < 180 ? [0, c, x] :
+        h < 240 ? [0, x, c] :
+        h < 300 ? [x, 0, c] : [c, 0, x];
+      return {
+        r: Math.round((rgb[0] + m) * 255),
+        g: Math.round((rgb[1] + m) * 255),
+        b: Math.round((rgb[2] + m) * 255)
+      };
+    }
 
-    var undoBtn = toolbar.addButton('#undo-icon', {
-      tooltip: 'Undo (' + modKey + 'Z)'
-    }).on('click', function() {
-      gui.undo.undo();
-    });
+    function byteToPct(val) {
+      return Math.round(val / 255 * 100);
+    }
 
-    var redoBtn = toolbar.addButton('#redo-icon', {
-      tooltip: 'Redo (' + shiftKey + modKey + 'Z)'
-    }).on('click', function() {
-      gui.undo.redo();
-    });
+    function pctToByte(val) {
+      return Math.round(clamp(val, 0, 100) / 100 * 255);
+    }
 
-    updateButtons();
+    function byteToDegrees(val) {
+      return Math.round(val / 255 * 360);
+    }
 
-    gui.on('interaction_mode_change', function() {
-      updateVisibility();
-      // history is cleared on mode change; refresh button states next tick
-      updateButtons();
-    });
+    function degreesToByte(val) {
+      return Math.round(clamp(val, 0, 360) / 360 * 255);
+    }
 
-    gui.on('history_change', function(e) {
-      undoBtn.setEnabled(!!e.canUndo);
-      redoBtn.setEnabled(!!e.canRedo);
-      // Visibility may also depend on history (e.g. attribute edits via popup
-      // happen in modes that don't otherwise support undo).
-      updateVisibility();
-    });
+    function parseNumberField(str) {
+      return Number(String(str).replace(/[°%]/g, '').trim());
+    }
 
-    updateVisibility();
+    function clamp(val, min, max) {
+      return isFinite(val) ? Math.max(min, Math.min(max, val)) : min;
+    }
 
-    function updateVisibility() {
-      if (!gui.interaction) {
-        toolbar.hide();
-        return;
+    function applyStyleFields(fields, updateRecord) {
+      var table = getActiveTable();
+      var ids = getSelectionIds();
+      var lyr = getActiveLayer();
+      var hasNewFields;
+      if (!table || ids.length === 0) return;
+      hasNewFields = fields.some(function(field) {
+        return !table.fieldExists(field);
+      });
+      gui.dispatchEvent('data_preupdate', {ids: ids});
+      if (hasNewFields) {
+        table.captureSchemaBefore({operation: 'label-style', fields: fields});
+      } else {
+        table.captureFieldsBefore(fields, {operation: 'label-style'});
       }
-      var mode = gui.interaction.getMode();
-      var hasHistory = gui.undo.canUndo() || gui.undo.canRedo();
-      if (gui.interaction.modeSupportsUndo(mode) || hasHistory) {
-        toolbar.show();
+      updateRecords(ids, table, updateRecord);
+      if (hasNewFields) {
+        table.markSchemaChanged({operation: 'label-style'});
       } else {
-        toolbar.hide();
+        table.markFieldsChanged(fields, {operation: 'label-style'});
       }
+      gui.dispatchEvent('data_postupdate', {ids: ids});
+      gui.model.updated({style: true, same_table: true});
+      updatePendingStyleHistory(lyr, ids, fields);
+      setTimeout(updateSelectionDisplay, 0);
+      updateControls();
+      updateSelectionDisplay();
     }
 
-    function updateButtons() {
-      undoBtn.setEnabled(gui.undo.canUndo());
-      redoBtn.setEnabled(gui.undo.canRedo());
+    function updateRecords(ids, table, updateRecord) {
+      var records = table.getRecords();
+      ids.forEach(function(id) {
+        var rec = records[id] || {};
+        updateRecord(rec);
+        records[id] = rec;
+      });
+    }
+
+    function updateSelectionDisplay() {
+      clearSelectionDisplay();
+      getSelectionIds().forEach(function(id) {
+        var textNode = getTextNodeById(id);
+        if (textNode) {
+          textNode.classList.add('label-style-selected');
+        }
+      });
+    }
+
+    function clearSelectionDisplay() {
+      var lyr = hit && hit.getHitTarget();
+      var container = lyr && lyr.gui && lyr.gui.svg_container;
+      if (!container) return;
+      container.querySelectorAll('.label-style-selected').forEach(function(node) {
+        node.classList.remove('label-style-selected');
+      });
+    }
+
+    function getTextNodeById(id) {
+      var lyr = hit && hit.getHitTarget();
+      var container = lyr && lyr.gui && lyr.gui.svg_container;
+      var symbol = container && container.querySelector('[data-id="' + id + '"]');
+      if (!symbol) return null;
+      return symbol.tagName == 'text' ? symbol : symbol.querySelector('text');
     }
+
   }
 
   function Model(gui) {
@@ -13466,7 +15513,8 @@
     }
 
     function selectable() {
-      return interactionMode() == 'selection';
+      var mode = interactionMode();
+      return mode == 'selection' || mode == 'label_style';
     }
 
     function pinnable() {
@@ -13484,7 +15532,7 @@
       var mode = interactionMode();
       // click used to pin popup and select features
       return mode == 'data' || mode == 'info' || mode == 'selection' ||
-      mode == 'rectangles' || mode == 'edit_points';
+      mode == 'label_style' || mode == 'rectangles' || mode == 'edit_points';
     }
 
     self.getHitId = function() {
@@ -16817,6 +18865,8 @@
     var style;
     if (layerHasDrawableStyle(lyr) && !opts.outlineMode) {
       style = getCanvasDisplayStyle(lyr);
+    } else if (internal.layerHasLabels(lyr) && opts.interactionMode == 'label_style') {
+      style = {dotSize: 0};
     } else if (internal.layerHasLabels(lyr) && !opts.outlineMode) {
       style = copyBaseStyle(activeStyleForLabels);
     } else if (opts.darkMode) {
@@ -17171,11 +19221,11 @@
   utils$1.inherit(MapExtent, EventDispatcher);
 
   var MAX_VIEWPORT_PREVIEW_PIXELS = 6e6;
-  var cache = new WeakMap();
-  var requestId = 0;
+  var cache$1 = new WeakMap();
+  var requestId$1 = 0;
 
   function getCachedRasterViewportPreview(layer, ext) {
-    var entry = cache.get(layer);
+    var entry = cache$1.get(layer);
     var params = getRasterViewportPreviewParams(layer, ext);
     if (!entry || !params || entry.key != params.key) return null;
     return entry.preview;
@@ -17183,24 +19233,24 @@
 
   function scheduleRasterViewportPreview(layer, ext, onReady) {
     var params = getRasterViewportPreviewParams(layer, ext);
-    var entry = cache.get(layer);
+    var entry = cache$1.get(layer);
     var id, stats, timing, preview;
     if (!params || !params.needed) return;
     if (entry && entry.key == params.key) return;
-    id = ++requestId;
-    cache.set(layer, {key: params.key, pending: id});
+    id = ++requestId$1;
+    cache$1.set(layer, {key: params.key, pending: id});
     setTimeout(function() {
-      var current = cache.get(layer);
+      var current = cache$1.get(layer);
       if (!current || current.pending != id) return;
       timing = {};
       stats = getCachedRasterScalingStats(params, timing);
-      timing.renderStart = getTimer();
-      preview = renderRasterViewportPreview(params.grid, params.recipe, params.bbox, params.width, params.height, stats);
-      timing.renderMs = getTimer() - timing.renderStart;
+      timing.renderStart = getTimer$1();
+      preview = internal.renderRasterViewportPreview(params.grid, params.recipe, params.bbox, params.width, params.height, stats);
+      timing.renderMs = getTimer$1() - timing.renderStart;
       logRasterPreviewTiming(params, timing);
-      current = cache.get(layer);
+      current = cache$1.get(layer);
       if (!preview || !current || current.pending != id) return;
-      cache.set(layer, {
+      cache$1.set(layer, {
         key: params.key,
         preview: preview
       });
@@ -17209,23 +19259,23 @@
   }
 
   function invalidateRasterViewportPreview(layer) {
-    cache.delete(layer);
+    cache$1.delete(layer);
   }
 
   function getRasterViewportPreviewParams(layer, ext) {
     var raster = layer && layer.raster;
-    var grid = getRasterGrid(raster);
-    var rasterBbox = getRasterBBox(raster);
+    var grid = internal.getRasterGrid(raster);
+    var rasterBbox = internal.getRasterBBox(raster);
     var mapBbox = ext.getBounds().toArray();
-    var visibleBbox = rasterBbox && intersectBboxes(rasterBbox, mapBbox);
-    var preview = getRasterPreview(raster);
+    var visibleBbox = rasterBbox && internal.intersectBboxes(rasterBbox, mapBbox);
+    var preview = internal.getRasterPreview(raster);
     var recipe, pixelRatio, t, p1, p2, displayWidth, displayHeight, crop, width, height, scale, key, needed;
     if (!grid || !grid.samples || !visibleBbox || !grid.bbox) return null;
     if (!supportsNorthUpRaster(grid)) return null;
     crop = getRasterSourceWindow(grid, visibleBbox);
     if (!crop) return null;
     visibleBbox = crop.bbox;
-    recipe = getRasterViewRecipe(grid, raster.view && raster.view.recipe);
+    recipe = internal.getRasterViewRecipe(grid, raster.view && raster.view.recipe);
     pixelRatio = GUI.getPixelRatio();
     t = ext.getTransform(pixelRatio);
     p1 = t.transform(mapBbox[0], mapBbox[3]);
@@ -17273,46 +19323,46 @@
       timing.statsSource = 'none';
       return null;
     }
-    key = getRasterScalingStatsKey(params.grid, params.recipe);
+    key = internal.getRasterScalingStatsKey(params.grid, params.recipe);
     if (cached && cached.key == key) {
       timing.statsMs = 0;
       timing.statsSource = 'raster-view-cache';
       return cached.stats;
     }
     timing.statsSource = 'computed';
-    timing.statsStart = getTimer();
-    cached = getRasterViewScalingStats(params.raster, params.recipe);
-    timing.statsMs = getTimer() - timing.statsStart;
+    timing.statsStart = getTimer$1();
+    cached = internal.getRasterViewScalingStats(params.raster, params.recipe);
+    timing.statsMs = getTimer$1() - timing.statsStart;
     return cached;
   }
 
   function logRasterPreviewTiming(params, timing) {
-    if (!rasterDebugIsOn()) return;
+    if (!rasterDebugIsOn$1()) return;
     console.log([
       'Raster viewport preview:',
       params.width + 'x' + params.height,
       'from',
       params.sourceWidth + 'x' + params.sourceHeight,
       'source px,',
-      'stats=' + formatMs(timing.statsMs),
+      'stats=' + formatMs$1(timing.statsMs),
       '(' + timing.statsSource + '),',
-      'render=' + formatMs(timing.renderMs) + ',',
-      'total=' + formatMs(timing.statsMs + timing.renderMs) + ',',
+      'render=' + formatMs$1(timing.renderMs) + ',',
+      'total=' + formatMs$1(timing.statsMs + timing.renderMs) + ',',
       'scaling=' + params.recipe.scaling,
       'type=' + params.recipe.type
     ].join(' '));
   }
 
-  function rasterDebugIsOn() {
+  function rasterDebugIsOn$1() {
     var vars = GUI.getUrlVars();
     return vars['raster-debug'] === true || vars['raster-debug'] == '1' || vars.raster_debug === true || vars.raster_debug == '1';
   }
 
-  function getTimer() {
+  function getTimer$1() {
     return typeof performance != 'undefined' && performance.now ? performance.now() : Date.now();
   }
 
-  function formatMs(ms) {
+  function formatMs$1(ms) {
     return Math.round(ms * 10) / 10 + 'ms';
   }
 
@@ -17362,6 +19412,162 @@
     return Math.round(val * 1e9) / 1e9;
   }
 
+  var MAX_REPROJECTED_PREVIEW_PIXELS = 6e6;
+  var cache = new WeakMap();
+  var requestId = 0;
+
+  function getCachedRasterReprojectedPreview(layer, ext) {
+    var params = getRasterReprojectedPreviewParams(layer, ext);
+    var entry = cache.get(layer);
+    if (!entry || !entry.preview) return null;
+    if (!params || entry.key != params.key) return entry.preview;
+    return entry.preview;
+  }
+
+  function scheduleRasterReprojectedPreview(layer, ext, onReady) {
+    var params = getRasterReprojectedPreviewParams(layer, ext);
+    var entry = cache.get(layer);
+    var id, timing;
+    if (!params) return;
+    if (entry && entry.key == params.key) return;
+    id = ++requestId;
+    cache.set(layer, {key: params.key, pending: id});
+    setTimeout(function() {
+      var current = cache.get(layer);
+      var grid, preview;
+      if (!current || current.pending != id) return;
+      timing = {};
+      try {
+        grid = internal.projectRasterGridForward({grid: params.grid}, params.sourceCRS, params.displayCRS, {
+          raster_mesh_interval: params.meshInterval,
+          output_bbox: params.bbox,
+          output_width: params.width,
+          output_height: params.height,
+          sample_method: params.sampleMethod,
+          timing: timing
+        });
+      } catch(e) {
+        cache.delete(layer);
+        if (typeof console != 'undefined' && console.warn) {
+          console.warn('Unable to reproject raster preview', e);
+        }
+        return;
+      }
+      timing.renderStart = getTimer();
+      preview = internal.renderRasterPreview(grid, params.recipe, grid.width, grid.height, params.stats);
+      applyCoverageMask(preview, grid.coverage);
+      timing.renderMs = getTimer() - timing.renderStart;
+      logRasterReprojectionTiming(params, timing);
+      preview.bbox = grid.bbox;
+      current = cache.get(layer);
+      if (!current || current.pending != id) return;
+      cache.set(layer, {key: params.key, preview: preview});
+      onReady();
+    }, 0);
+  }
+
+  function getRasterReprojectedPreviewParams(layer, ext) {
+    var raster = layer && layer.raster;
+    var gui = layer && layer.gui;
+    var sourceDataset = gui && gui.source && gui.source.dataset;
+    var sourceInfo = sourceDataset && internal.getDatasetCrsInfo(sourceDataset);
+    var sourceCRS = sourceInfo && sourceInfo.crs;
+    var displayCRS = gui && gui.dynamic_crs;
+    var sourceGrid = internal.getRasterGrid(raster);
+    var rasterBbox = gui && gui.bounds && gui.bounds.hasBounds() && gui.bounds.toArray();
+    var viewBbox = ext && ext.getBounds().toArray();
+    var bbox = rasterBbox && viewBbox && internal.intersectBboxes(rasterBbox, viewBbox);
+    var size = bbox && getPreviewSize(ext, sourceGrid);
+    var recipe, stats;
+    if (!sourceCRS || !displayCRS || !sourceGrid || !sourceGrid.samples || !bbox || !size) return null;
+    recipe = internal.getRasterViewRecipe(sourceGrid, raster.view && raster.view.recipe);
+    stats = internal.getRasterViewScalingStats(raster, recipe);
+    return {
+      key: getRasterReprojectedPreviewKey(layer, bbox, size, sourceCRS, displayCRS, recipe),
+      grid: sourceGrid,
+      sourceCRS: sourceCRS,
+      displayCRS: displayCRS,
+      bbox: bbox,
+      width: size.width,
+      height: size.height,
+      recipe: recipe,
+      stats: stats,
+      sampleMethod: getRasterReprojectionSampleMethod(),
+      meshInterval: 32
+    };
+  }
+
+  function getPreviewSize(ext, grid) {
+    var pixelRatio = GUI.getPixelRatio();
+    var t = ext.getTransform(pixelRatio);
+    var mapBbox = ext.getBounds().toArray();
+    var p1 = t.transform(mapBbox[0], mapBbox[3]);
+    var p2 = t.transform(mapBbox[2], mapBbox[1]);
+    var width = Math.max(1, Math.round(Math.abs(p2[0] - p1[0])));
+    var height = Math.max(1, Math.round(Math.abs(p2[1] - p1[1])));
+    var scale = Math.min(1, Math.sqrt(MAX_REPROJECTED_PREVIEW_PIXELS / (width * height)));
+    width = Math.min(grid.width, Math.max(1, Math.round(width * scale)));
+    height = Math.min(grid.height, Math.max(1, Math.round(height * scale)));
+    return {width: width, height: height};
+  }
+
+  function getRasterReprojectedPreviewKey(layer, bbox, size, sourceCRS, displayCRS, recipe) {
+    return [
+      size.width,
+      size.height,
+      bbox.join(','),
+      internal.crsToProj4(sourceCRS),
+      internal.crsToProj4(displayCRS),
+      recipe.type,
+      recipe.scaling,
+      recipe.scaleRange && recipe.scaleRange.join(','),
+      recipe.percentileRange && recipe.percentileRange.join(','),
+      getRasterReprojectionSampleMethod(),
+      layer.raster && layer.raster.grid && layer.raster.grid.samples && layer.raster.grid.samples.length
+    ].join('|');
+  }
+
+  function applyCoverageMask(preview, coverage) {
+    var pixels = preview && preview.pixels;
+    if (!pixels || !coverage) return;
+    for (var i = 0; i < coverage.length; i++) {
+      if (!coverage[i]) pixels[i * 4 + 3] = 0;
+    }
+  }
+
+  function getRasterReprojectionSampleMethod() {
+    var vars = GUI.getUrlVars();
+    var val = vars['raster-bilinear'] ?? vars.raster_bilinear;
+    return val === false || val == '0' ? 'nearest' : 'bilinear';
+  }
+
+  function logRasterReprojectionTiming(params, timing) {
+    if (!rasterDebugIsOn()) return;
+    console.log([
+      'Raster reprojection preview:',
+      params.width + 'x' + params.height,
+      'mesh=' + formatMs(timing.meshMs),
+      'rasterize=' + formatMs(timing.rasterizeMs),
+      'render=' + formatMs(timing.renderMs),
+      'total=' + formatMs((timing.meshMs || 0) + (timing.rasterizeMs || 0) + (timing.renderMs || 0)) + ',',
+      'vertices=' + timing.meshVertices,
+      'sampling=' + params.sampleMethod
+    ].join(' '));
+  }
+
+  function rasterDebugIsOn() {
+    var vars = GUI.getUrlVars();
+    return vars['raster-debug'] === true || vars['raster-debug'] == '1' || vars.raster_debug === true || vars.raster_debug == '1';
+  }
+
+  function formatMs(ms) {
+    return Math.round((ms || 0) * 10) / 10 + 'ms';
+  }
+
+  function getTimer() {
+    return typeof performance != 'undefined' && performance.now ? performance.now() : Date.now();
+  }
+
   var hatches = {}; // cached patterns
 
   function getCanvasFillEffect(ctx, shp, arcs, ext, style) {
@@ -17620,11 +19826,29 @@
     _self.drawRasterLayer = function(layer, opts) {
       var raster = layer.raster;
       var options = opts || {};
-      var preview = options.action == 'nav' ? null : getCachedRasterViewportPreview(layer, _ext);
-      var bbox = preview && preview.bbox;
+      var preview = null;
+      var bbox;
+      if (layer.gui && layer.gui.dynamic_crs) {
+        preview = getCachedRasterReprojectedPreview(layer, _ext);
+        if (!preview) {
+          if (options.action != 'nav' && options.onViewportPreviewReady) {
+            scheduleRasterReprojectedPreview(layer, _ext, options.onViewportPreviewReady);
+          }
+          return;
+        }
+        bbox = preview.bbox;
+        if (!preview.pixels || !bbox) return;
+        drawRasterPreview(preview, bbox);
+        if (options.action != 'nav' && options.onViewportPreviewReady) {
+          scheduleRasterReprojectedPreview(layer, _ext, options.onViewportPreviewReady);
+        }
+        return;
+      }
+      preview = options.action == 'nav' ? null : getCachedRasterViewportPreview(layer, _ext);
+      bbox = preview && preview.bbox;
       if (!preview) {
-        preview = raster && getRasterPreview(raster);
-        bbox = raster && getRasterBBox(raster);
+        preview = raster && internal.getRasterPreview(raster);
+        bbox = raster && internal.getRasterBBox(raster);
         if (options.action != 'nav' && options.onViewportPreviewReady) {
           scheduleRasterViewportPreview(layer, _ext, options.onViewportPreviewReady);
         }
@@ -18897,6 +21121,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     this.isActiveLayer = isActiveLayer;
     this.isVisibleLayer = isVisibleLayer;
     this.getActiveLayer = function() { return _activeLyr; };
+    this.getHitControl = function() { return _hit; };
     // this.getViewData = function() {
     //   return {
     //     isPreview: isPreviewView(),
@@ -19289,7 +21514,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       _renderer.drawMainLayers(contentLayers, action);
 
       // draw hover & selection overlay
-      if (!_overlayLayers || action != 'nav') {
+      if (!_overlayLayers || action != 'nav' || getGlobalStyleOptions().interactionMode == 'label_style') {
         // cache layers to use when panning/zooming
         _overlayLayers = getOverlayLayers(_activeLyr, _hit.getHitState(), getGlobalStyleOptions());
       }
@@ -20068,6 +22293,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     }
     gui.interaction = new InteractionMode(gui);
     gui.editToolbar = new EditToolbar(gui);
+    gui.labelTool = new LabelTool(gui);
 
     gui.showProgressMessage = function(msg) {
       if (!gui.progressMessage) {