mapshaper 0.7.65 → 0.7.67

package/www/mapshaper-gui.js

@@ -1031,98 +1031,6 @@
     return _el;
   }
 
-  function filterLayerByIds(lyr, ids) {
-    var shapes;
-    if (lyr.shapes) {
-      shapes = ids.map(function(id) {
-        return lyr.shapes[id];
-      });
-      return utils$1.defaults({shapes: shapes, data: null}, lyr);
-    }
-    return lyr;
-  }
-
-  function formatLayerNameForDisplay(name) {
-    return name || '[unnamed]';
-  }
-
-  function cleanLayerName(raw) {
-    return raw.replace(/[\n\t/\\]/g, '')
-      .replace(/^[.\s]+/, '').replace(/[.\s]+$/, '');
-  }
-
-  function updateLayerStackOrder(layers) {
-    // 1. assign ascending ids to unassigned layers above the range of other layers
-    layers.forEach(function(o, i) {
-      if (!o.layer.menu_order) o.layer.menu_order = 1e6 + i;
-    });
-    // 2. sort in ascending order
-    layers.sort(function(a, b) {
-      return a.layer.menu_order - b.layer.menu_order;
-    });
-    // 3. assign consecutve ids
-    layers.forEach(function(o, i) {
-      o.layer.menu_order = i + 1;
-    });
-    return layers;
-  }
-
-  function sortLayersForMenuDisplay(layers) {
-    layers = updateLayerStackOrder(layers);
-    return layers.reverse();
-  }
-
-  function setLayerPinning(lyr, pinned) {
-    lyr.pinned = !!pinned;
-  }
-
-
-  function calcDotScale(layers, ext) {
-    var bbox = ext.getBounds().scale(1.3).toArray(); // add buffer
-    // var topTier = 50000; // can be a bottleneck
-    var topTier = 10000; // short-circuit counting here
-    var count = 0;
-    layers = layers.filter(function(lyr) {
-      return lyr.geometry_type == 'point' && lyr.gui.style?.dotSize > 0;
-    });
-    layers.forEach(function(lyr) {
-      count += countPoints(lyr.gui.displayLayer.shapes, topTier, bbox);
-    });
-    count = Math.min(topTier, count) || 1;
-    var k = Math.pow(5 - utils$1.clamp(Math.log10(count), 1, 4), 1.25);
-
-    // zoom adjustments
-    var mapScale = ext.scale();
-    if (mapScale < 0.5) {
-      k *= Math.pow(mapScale + 0.5, 0.35);
-    } else if (mapScale > 1) {
-      // scale faster at first
-      k *= Math.pow(Math.min(mapScale, 4), 0.25);
-      k *= Math.pow(mapScale, 0.02);
-    }
-
-    // scale down when map is small
-    var smallSide = Math.min(ext.width(), ext.height());
-    k *= utils$1.clamp(smallSide / 500, 0.5, 1);
-    return k;
-  }
-
-  function countPoints(shapes, max, bbox) {
-    var count = 0;
-    var shp, p;
-    // short-circuit point counting above top threshold
-    for (var i=0, n=shapes.length; i<n && count<max; i++) {
-      shp = shapes[i];
-      for (var j=0, m=(shp ? shp.length : 0); j<m; j++) {
-        p = shp[j];
-        if (p[0] > bbox[0] && p[0] < bbox[2] && p[1] > bbox[1] && p[1] < bbox[3]) {
-          count ++;
-        }
-      }
-    }
-    return count;
-  }
-
   async function showPrompt(msg, title) {
     var popup = showPopupAlert(msg, title);
     return new Promise(function(resolve) {
@@ -2669,7 +2577,7 @@
     return obj === Object(obj); // via underscore
   }
 
-  function clamp$4(val, min, max) {
+  function clamp$5(val, min, max) {
     return val < min ? min : (val > max ? max : val);
   }
 
@@ -3145,12 +3053,12 @@
     return decimals >= 0 ? num.toFixed(decimals) : String(num);
   }
 
-  function formatNumber$2(val) {
+  function formatNumber$3(val) {
     return val + '';
   }
 
   function formatIntlNumber(val) {
-    var str = formatNumber$2(val);
+    var str = formatNumber$3(val);
     return '"' + str.replace('.', ',') + '"'; // need to quote if comma-delimited
   }
 
@@ -3320,7 +3228,7 @@
   function findValueByRank(arr, rank) {
     if (!arr.length || rank < 1 || rank > arr.length) error$1("[findValueByRank()] invalid input");
 
-    rank = clamp$4(rank | 0, 1, arr.length);
+    rank = clamp$5(rank | 0, 1, arr.length);
     var k = rank - 1, // conv. rank to array index
         n = arr.length,
         l = 0,
@@ -3694,12 +3602,12 @@
   // self-import and the resulting Rollup circular-dependency warning.
   var utils = {
     addThousandsSep, addslashes, arrayToIndex,
-    clamp: clamp$4, cleanNumericString, contains, copyElements, countValues, createBuffer,
+    clamp: clamp$5, cleanNumericString, contains, copyElements, countValues, createBuffer,
     defaults, difference,
     endsWith, every, expandoBuffer, extend, extendBuffer,
     find, findMedian, findQuantile, findRankByValue, findStringPrefix,
     findValueByPct, findValueByRank, forEach, forEachProperty, format,
-    formatDateISO, formatIntlNumber, formatNumber: formatNumber$2, formatNumberForDisplay,
+    formatDateISO, formatIntlNumber, formatNumber: formatNumber$3, formatNumberForDisplay,
     formatVersionedName, formatter,
     genericSort, getArrayBounds, getGenericComparator, getKeyComparator,
     getSortedIds, getUniqueName, groupBy,
@@ -7433,11 +7341,6 @@
           model.setDefaultTarget([target.layers[0]], target.dataset);
         }
       }
-      if (opts.display_all && importTotal === 0) {
-        model.getLayers().forEach(function(o) {
-          setLayerPinning(o.layer, true);
-        });
-      }
       model.updated({select: true}); // trigger redraw
     }
 
@@ -8674,6 +8577,123 @@
     }
   }
 
+  function filterLayerByIds(lyr, ids) {
+    var shapes;
+    if (lyr.shapes) {
+      shapes = ids.map(function(id) {
+        return lyr.shapes[id];
+      });
+      return utils$1.defaults({shapes: shapes, data: null}, lyr);
+    }
+    return lyr;
+  }
+
+  function formatLayerNameForDisplay(name) {
+    return name || '[unnamed]';
+  }
+
+  function cleanLayerName(raw) {
+    return raw.replace(/[\n\t/\\]/g, '')
+      .replace(/^[.\s]+/, '').replace(/[.\s]+$/, '');
+  }
+
+  function updateLayerStackOrder(layers) {
+    // 1. assign ascending ids to unassigned layers above the range of other layers
+    layers.forEach(function(o, i) {
+      if (!o.layer.menu_order) o.layer.menu_order = 1e6 + i;
+    });
+    // 2. sort in ascending order
+    layers.sort(function(a, b) {
+      return a.layer.menu_order - b.layer.menu_order;
+    });
+    // 3. assign consecutve ids
+    layers.forEach(function(o, i) {
+      o.layer.menu_order = i + 1;
+    });
+    return layers;
+  }
+
+  function sortLayersForMenuDisplay(layers) {
+    layers = updateLayerStackOrder(layers);
+    return layers.reverse();
+  }
+
+  function setLayerPinning(lyr, pinned) {
+    lyr.pinned = !!pinned;
+  }
+
+  // Whether a layer can be shown on the map alongside the active layer, and so
+  // has an eye icon in the layers panel. A frame is drawn by preview mode, and a
+  // data-only layer has nothing to draw.
+  function layerIsPinnable(lyr, dataset) {
+    if (dataset && internal.isFrameLayer(lyr, dataset.arcs)) return false;
+    return internal.layerIsGeometric(lyr) || internal.layerHasRaster(lyr) ||
+      internal.layerHasFurniture(lyr);
+  }
+
+  // Every layer is visible until something says otherwise, so that a layer
+  // made or imported next to another does not hide it -- a reference layer used
+  // as a guide for drawing or labelling would otherwise vanish the moment the
+  // new layer became the active one. Only layers whose visibility has never
+  // been set are touched: a snapshot stores every layer's, and a layer hidden
+  // with its eye icon stays hidden.
+  //
+  // layers: [{layer, dataset}], as from model.getLayers()
+  function showNewLayers(layers) {
+    layers.forEach(function(o) {
+      if (o.layer.pinned === undefined && layerIsPinnable(o.layer, o.dataset)) {
+        setLayerPinning(o.layer, true);
+      }
+    });
+  }
+
+
+  function calcDotScale(layers, ext) {
+    var bbox = ext.getBounds().scale(1.3).toArray(); // add buffer
+    // var topTier = 50000; // can be a bottleneck
+    var topTier = 10000; // short-circuit counting here
+    var count = 0;
+    layers = layers.filter(function(lyr) {
+      return lyr.geometry_type == 'point' && lyr.gui.style?.dotSize > 0;
+    });
+    layers.forEach(function(lyr) {
+      count += countPoints(lyr.gui.displayLayer.shapes, topTier, bbox);
+    });
+    count = Math.min(topTier, count) || 1;
+    var k = Math.pow(5 - utils$1.clamp(Math.log10(count), 1, 4), 1.25);
+
+    // zoom adjustments
+    var mapScale = ext.scale();
+    if (mapScale < 0.5) {
+      k *= Math.pow(mapScale + 0.5, 0.35);
+    } else if (mapScale > 1) {
+      // scale faster at first
+      k *= Math.pow(Math.min(mapScale, 4), 0.25);
+      k *= Math.pow(mapScale, 0.02);
+    }
+
+    // scale down when map is small
+    var smallSide = Math.min(ext.width(), ext.height());
+    k *= utils$1.clamp(smallSide / 500, 0.5, 1);
+    return k;
+  }
+
+  function countPoints(shapes, max, bbox) {
+    var count = 0;
+    var shp, p;
+    // short-circuit point counting above top threshold
+    for (var i=0, n=shapes.length; i<n && count<max; i++) {
+      shp = shapes[i];
+      for (var j=0, m=(shp ? shp.length : 0); j<m; j++) {
+        p = shp[j];
+        if (p[0] > bbox[0] && p[0] < bbox[2] && p[1] > bbox[1] && p[1] < bbox[3]) {
+          count ++;
+        }
+      }
+    }
+    return count;
+  }
+
   // lyr: a map layer with gui property
   // displayCRS: CRS to use for display, or null (which clears any current display CRS)
   function projectLayerForDisplay(lyr, displayCRS) {
@@ -10392,6 +10412,20 @@
     return false;
   }
 
+  // Test if the map should be re-framed when the content it was showing had no
+  // area -- a single point, or points in a line -- such as the first label
+  // placed on an otherwise empty map. Such bounds are padded by a token amount,
+  // so mapNeedsReset()'s area-change rule would compare the new bounds against
+  // almost nothing: a second label anywhere in view grows the area by more than
+  // its threshold, and the map zooms in to the two labels. The view is the
+  // only real scale left to compare against, and new content smaller than the
+  // view is no reason to zoom in to it.
+  function mapNeedsResetFromCollapsedBounds(newBounds, viewportBounds, flags) {
+    var chgThreshold = flags.proj ? 1e3 : 1e8;
+    if (!newBounds.intersects(viewportBounds)) return true;
+    return newBounds.area() / viewportBounds.area() > chgThreshold;
+  }
+
   // Test if an update may have affected the visible shape of arcs
   // @flags Flags from update event
   function arcsMayHaveChanged(flags) {
@@ -11373,10 +11407,22 @@
       }
 
       if (lyr && lyr.gui.geographic) {
+        // Above the actions, because it is what they would be applied to: the
+        // labels that share something with the one pointed at, read and chosen
+        // before "copy as GeoJSON" or "delete label" means anything definite.
+        // Each item carries the number it would select, so that what the click
+        // is about to do is visible before it happens.
+        if (e.selectActions?.length) {
+          addMenuLabel('select');
+          e.selectActions.forEach(function(action) {
+            addMenuItem(action.label + getCountHtml(action.count), action.run);
+          });
+        }
+
         if (e.deleteVertex || e.deletePoint || copyable || e.deleteFeature ||
             e.flipLabel) {
 
-          addMenuLabel('selection');
+          addMenuLabel('actions');
           if (e.deleteVertex) {
             addMenuItem('delete vertex', e.deleteVertex);
           }
@@ -11524,6 +11570,12 @@
     return 'band values';
   }
 
+  // How many features a "select" item would select, in the grey of a menu
+  // heading: it qualifies the item rather than being part of what it says.
+  function getCountHtml(count) {
+    return ' <span class="contextmenu-count">' + count + '</span>';
+  }
+
   // A color tile, used in place of the bullet that other menu items get.
   function getSwatchHtml(color) {
     return '<span class="contextmenu-swatch" style="background-color: ' +
@@ -11762,7 +11814,9 @@
         layerCount++;
       });
 
-      if (pinnableCount < 2) {
+      // Shown for a single layer too: it says whether the next layer made or
+      // imported will be drawn over this one or replace it on the map.
+      if (pinnableCount < 1) {
         pinAll.hide();
       } else {
         pinAll.show();
@@ -12204,8 +12258,7 @@
     }
 
     function isPinnable(lyr, dataset) {
-      if (dataset && internal.isFrameLayer(lyr, dataset.arcs)) return false;
-      return internal.layerIsGeometric(lyr) || internal.layerHasRaster(lyr) || internal.layerHasFurniture(lyr);
+      return layerIsPinnable(lyr, dataset);
     }
 
     function layerCanBeStyled(lyr) {
@@ -13711,6 +13764,13 @@
   // keeps them out of a character class so that "\\n" is matched as a pair.
   var ANY_NEWLINE = /\r\n|\\n|<br>|\n|\r/gi;
 
+  // A line break the wrapper inserted rather than one the user typed. It consumes
+  // no character -- the space the line broke at stays before it -- so removing
+  // every one gives back the text as typed. See
+  // docs/development/text-annotation-design.md.
+  var SOFT_BREAK = '<wbr>';
+  var SOFT_BREAK_RXP = /<wbr>/gi;
+
   // How a label lays out its line breaks, which is not the same for the two kinds.
   // An anchored label stacks its lines with <tspan>. A path label joins them with
   // a space, because a <tspan> inside a <textPath> advances along the curve
@@ -13725,10 +13785,72 @@
   // all, and a line the user has just opened with Enter and not yet typed into.
   var TEXT_PLACEHOLDER = '\u200b';
 
-  // Data value -> the string the user edits, with real newlines.
+  // Data value -> the string the user edits, with real newlines and without the
+  // wrapper's soft breaks, which are rewrapped rather than edited.
   function decodeLabelText(val) {
     if (val === null || val === undefined || val === '') return '';
-    return String(val).replace(ANY_NEWLINE, '\n');
+    return String(val).replace(ANY_NEWLINE, '\n').replace(SOFT_BREAK_RXP, '');
+  }
+
+  // Data value -> {text, breaks}: the string the user edits, and the offsets in
+  // it where the stored value has a soft break.
+  function readSoftBreaks(val) {
+    var str = val === null || val === undefined ? '' : String(val).replace(ANY_NEWLINE, '\n');
+    var parts = str.split(SOFT_BREAK_RXP);
+    var breaks = [];
+    var text = parts[0];
+    for (var i = 1; i < parts.length; i++) {
+      breaks.push(text.length);
+      text += parts[i];
+    }
+    return {text: text, breaks: breaks};
+  }
+
+  // The string the user edits, plus soft breaks at @breaks (ascending offsets
+  // into it) -> the same string with the markers written in.
+  function insertSoftBreaks(text, breaks) {
+    var out = '', prev = 0;
+    if (!breaks || breaks.length === 0) return text;
+    for (var i = 0; i < breaks.length; i++) {
+      out += text.substring(prev, breaks[i]) + SOFT_BREAK;
+      prev = breaks[i];
+    }
+    return out + text.substring(prev);
+  }
+
+  // Where a laid-out text's lines start because they were wrapped, given each
+  // character's top edge (see gui-label-wrap.mjs).
+  //
+  // @getTop(i) returns the top of character i in px, or null for one with no box.
+  // A line that starts after a typed newline is not a soft break, and neither is
+  // a character with no box -- the break lands on the next one that has a box.
+  // The low half of a surrogate pair is never asked about.
+  function findSoftBreaks(text, getTop, threshold) {
+    var breaks = [], lastTop = null, afterNewline = false, i, c, top;
+    for (i = 0; i < text.length; i++) {
+      c = text.charCodeAt(i);
+      if (c == 10) {
+        afterNewline = true;
+        continue;
+      }
+      if (c >= 0xDC00 && c <= 0xDFFF) continue;
+      top = getTop(i);
+      if (top === null) continue;
+      if (lastTop !== null && !afterNewline && top > lastTop + threshold) {
+        breaks.push(i);
+      }
+      lastTop = top;
+      afterNewline = false;
+    }
+    return breaks;
+  }
+
+  function sameSoftBreaks(a, b) {
+    if (a.length != b.length) return false;
+    for (var i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
   }
 
   // The string the user edits -> the data value. Newlines become the escape,
@@ -13745,12 +13867,28 @@
   // break that started it. That does two things: an empty line gets something to
   // lay out, so a line the user has just opened appears and can hold the caret,
   // and the rendered characters stay aligned one-for-one with the edited ones.
-  function getRenderedLines(str) {
+  //
+  // @breaks: offsets of soft breaks, which also start a line. A soft break
+  // consumes no character, so its line gets no placeholder and the alignment
+  // holds.
+  function getRenderedLines(str, breaks) {
     var text = decodeLabelText(str);
+    var lines = [], start = 0, lead = '', b = 0, i;
     if (text === '') return [TEXT_PLACEHOLDER];
-    return text.split('\n').map(function(line, i) {
-      return i === 0 ? line : TEXT_PLACEHOLDER + line;
-    });
+    breaks = breaks || [];
+    for (i = 0; i <= text.length; i++) {
+      while (b < breaks.length && breaks[b] < i) b++;
+      if (i == text.length || text.charAt(i) == '\n') {
+        lines.push(lead + text.substring(start, i));
+        start = i + 1;
+        lead = TEXT_PLACEHOLDER;
+      } else if (breaks[b] === i && i > start) {
+        lines.push(lead + text.substring(start, i));
+        start = i;
+        lead = '';
+      }
+    }
+    return lines;
   }
 
   // Whether the text would draw nothing at all: empty, or made only of
@@ -13941,10 +14079,11 @@
   //
   // label-pos places text relative to an anchor point, which a path label does
   // not have -- its text runs along the curve. Writing it there would put a
-  // property on the feature that nothing reads.
+  // property on the feature that nothing reads. label-width is the same: a path
+  // label is one line.
   function getStyleFields$1(style, isPathLabel) {
     return Object.keys(style || {}).filter(function(name) {
-      return !(isPathLabel && name == 'label-pos');
+      return !(isPathLabel && (name == 'label-pos' || name == 'label-width'));
     });
   }
 
@@ -14006,18 +14145,45 @@
   //   anchor: the value for text-anchor
   //   id:     feature id of the label
   //   target: layer name, or null to use the current target
+  //   via:    (optional) the callout-via the text carried with it
   function getLabelOffsetCommand(opts) {
     var parts = ['-style', 'dx=' + opts.dx, 'dy=' + opts.dy,
       'text-anchor=' + opts.anchor, 'label-pos='];
+    if (opts.via) parts.push('callout-via=' + quoteCommandValue(opts.via));
     parts.push('ids=' + opts.id);
     if (opts.target) parts.push('target=' + quoteCommandValue(opts.target));
     return parts.join(' ');
   }
 
+  // The command a drag on one of a label's handles writes, run once on release.
+  //
+  //   values: {field: value}, where '' removes the field -- which is what
+  //     -style reads an empty value as, and how a handle goes back to automatic
+  //   id:     feature id of the label
+  //   opts:
+  //     target: layer name, or null to use the current target
+  //     text:   (optional) rewrapped label-text, with real newlines and soft
+  //       breaks. A second -style in the same string, so that a new width and
+  //       the lines it breaks into are one undo step.
+  function getLabelStyleCommand(values, id, opts) {
+    var o = opts || {};
+    var parts = ['-style'];
+    Object.keys(values).forEach(function(name) {
+      var val = values[name];
+      parts.push(name + '=' + (val === '' ? '' : quoteCommandValue(String(val))));
+    });
+    parts.push('ids=' + id);
+    if (o.target) parts.push('target=' + quoteCommandValue(o.target));
+    if (typeof o.text == 'string') {
+      parts.push(getLabelTextCommand(o.text, id, o.target));
+    }
+    return parts.join(' ');
+  }
+
   // The command that saves edited text, run once when an editing session ends so
   // that a session is one undo step rather than one per keystroke.
   //
-  //   text: the edited string, with real newlines
+  //   text: the edited string, with real newlines and any soft breaks
   //   id:   feature id of the label
   //   target: layer name, or null to use the current target
   function getLabelTextCommand(text, id, target) {
@@ -15613,16 +15779,16 @@
     function getCanvasPoint(canvas, evt) {
       var rect = canvas.getBoundingClientRect();
       return {
-        x: clamp$3(Math.round((evt.clientX - rect.left) / rect.width * (canvas.width - 1)), 0, canvas.width - 1),
-        y: clamp$3(Math.round((evt.clientY - rect.top) / rect.height * (canvas.height - 1)), 0, canvas.height - 1)
+        x: clamp$4(Math.round((evt.clientX - rect.left) / rect.width * (canvas.width - 1)), 0, canvas.width - 1),
+        y: clamp$4(Math.round((evt.clientY - rect.top) / rect.height * (canvas.height - 1)), 0, canvas.height - 1)
       };
     }
 
     function setPickerColor(hsb) {
       pickerColor = {
-        h: clamp$3(Math.round(hsb.h), 0, 255),
-        s: clamp$3(Math.round(hsb.s), 0, 255),
-        b: clamp$3(Math.round(hsb.b), 0, 255)
+        h: clamp$4(Math.round(hsb.h), 0, 255),
+        s: clamp$4(Math.round(hsb.s), 0, 255),
+        b: clamp$4(Math.round(hsb.b), 0, 255)
       };
       drawColorPicker();
       updatePickerFields();
@@ -15763,7 +15929,7 @@
   }
 
   function pctToByte(val) {
-    return Math.round(clamp$3(val, 0, 100) / 100 * 255);
+    return Math.round(clamp$4(val, 0, 100) / 100 * 255);
   }
 
   function byteToDegrees(val) {
@@ -15771,14 +15937,14 @@
   }
 
   function degreesToByte(val) {
-    return Math.round(clamp$3(val, 0, 360) / 360 * 255);
+    return Math.round(clamp$4(val, 0, 360) / 360 * 255);
   }
 
   function parseNumberField(str) {
     return Number(String(str).replace(/[°%]/g, '').trim());
   }
 
-  function clamp$3(val, min, max) {
+  function clamp$4(val, min, max) {
     return isFinite(val) ? Math.max(min, Math.min(max, val)) : min;
   }
 
@@ -16166,9 +16332,12 @@
         setDisplay(shown);
         return;
       }
+      var changed = String(val) !== shown;
       setDisplay(String(val));
-      if (String(val) !== shown && o.onSet) o.onSet(val);
+      // Before onSet, which can take focus away: the blur fires 'change', and
+      // the commit it re-enters has to find this value already shown.
       shown = String(val);
+      if (changed && o.onSet) o.onSet(val);
     }
 
     function setDisplay(str) {
@@ -16193,6 +16362,13 @@
       setDisplay(shown);
     };
 
+    // What the field shows while it is blank, or '' for nothing. The panel uses
+    // it to say that the selected features disagree about the size, which is one
+    // of the two reasons the field can be empty.
+    this.setPlaceholder = function(str) {
+      input.attr('placeholder', str || '');
+    };
+
     this.setDisabled = function(off) {
       disabled = !!off;
       input.node().disabled = disabled;
@@ -16496,7 +16672,12 @@
     'dominant-baseline',
     'label-pos', 'label-side', 'label-start-offset', 'dx', 'dy',
     'fill', 'opacity', 'css', 'class',
-    'icon', 'icon-size', 'icon-color', 'icon-opacity'
+    'halo-width', 'halo-color', 'halo-opacity',
+    'icon', 'icon-size', 'icon-color', 'icon-opacity',
+    // not callout-via or callout-attach, which are placed for one label's
+    // surroundings rather than chosen as a style
+    'callout', 'callout-end', 'callout-end-size', 'callout-color', 'callout-opacity', 'callout-width',
+    'callout-gap'
   ];
 
   // values: [[field, value], ...], the form the panel's controls produce
@@ -16551,6 +16732,24 @@
     gui.state.new_label_style = null;
   }
 
+  // What a two-state control shows for a group of labels: 'on', 'off', or
+  // 'mixed' when they disagree.
+  //
+  // The panel's other controls say "they disagree" by showing nothing -- an empty
+  // select, an unlit button, a blank field. A switch has no empty state to fall
+  // back on, so it needs a third one named here.
+  //
+  // flags: one truthy/falsy value per label, in any order
+  function getToggleState(flags) {
+    var on = 0;
+    var i;
+    for (i = 0; i < flags.length; i++) {
+      if (flags[i]) on++;
+    }
+    if (on === 0) return 'off';
+    return on == flags.length ? 'on' : 'mixed';
+  }
+
   // What a drag on a label's glyphs means: 'fixed' moves the label, anchor and
   // text together, and 'draggable' leaves the anchor where it is and offsets the
   // text from it.
@@ -16567,23 +16766,49 @@
   //
   // Fixed on entry, so that a stray drag cannot displace text in a session that
   // never asked for it, and remembered while the tool stays on.
+  //
+  // Text blocks keep a mode of their own, which starts out Draggable. A block is
+  // usually an annotation set off from the point it is about, and is placed by
+  // dragging it away from its anchor; point text more often sits where its
+  // position puts it and is moved as a whole.
+  //
+  // @kind: 'point' (the default) or 'block' -- see getLabelPositionKind()
   var LABEL_POSITION_MODES = ['fixed', 'draggable'];
 
-  function getLabelPositionMode(gui) {
-    return gui.state.label_position_mode || 'fixed';
+  var DEFAULT_POSITION_MODES = {point: 'fixed', block: 'draggable'};
+
+  function getLabelPositionMode(gui, kind) {
+    var k = kind == 'block' ? 'block' : 'point';
+    var modes = gui.state.label_position_modes || {};
+    return modes[k] || DEFAULT_POSITION_MODES[k];
   }
 
-  function setLabelPositionMode(gui, mode) {
-    gui.state.label_position_mode =
-      LABEL_POSITION_MODES.indexOf(mode) > -1 ? mode : 'fixed';
+  // With no @kind, sets both kinds: 'fixed' puts point text in Fixed mode and
+  // blocks back to their own default, which is what the tool does on entry.
+  function setLabelPositionMode(gui, mode, kind) {
+    var modes = gui.state.label_position_modes || {};
+    var val = LABEL_POSITION_MODES.indexOf(mode) > -1 ? mode : 'fixed';
+    if (kind) {
+      modes[kind == 'block' ? 'block' : 'point'] = val;
+    } else {
+      modes = {point: val, block: DEFAULT_POSITION_MODES.block};
+    }
+    gui.state.label_position_modes = modes;
     // The panel's toggle and the tool's drag both read this, and neither owns the
     // other; the panel also has to relight the grid, whose cells mean something
     // different in each mode.
     gui.dispatchEvent('label_position_mode_change');
   }
 
-  function labelTextIsDraggable(gui) {
-    return getLabelPositionMode(gui) == 'draggable';
+  function labelTextIsDraggable(gui, kind) {
+    return getLabelPositionMode(gui, kind) == 'draggable';
+  }
+
+  // Which position mode governs a label: 'block' for a text block (a label with
+  // a wrap width), 'point' for any other.
+  function getLabelPositionKind(rec) {
+    var w = rec ? Number(rec['label-width']) : 0;
+    return w > 0 && isFinite(w) ? 'block' : 'point';
   }
 
   // The label currently open for text editing, or null: {id, refocus}.
@@ -16661,6 +16886,9 @@
   //   anchor:  the justification it is drawn with
   //   width:   the width of its text, in the same space; 0 if unmeasurable
   //   aligned: whether it carries a label-align (see below)
+  //   keepAnchor: (optional) leave the justification alone, for a text block:
+  //     its lines are laid out within a column, and re-justifying them as the
+  //     block passes its anchor would rearrange the text rather than move it
   // delta: {dx, dy} -- how far the pointer has moved, in the same space.
   //
   // Returns two descriptions of the same placement:
@@ -16688,7 +16916,7 @@
     // that correction, 'start' is the one text-anchor whose dx is the left edge
     // itself -- which is also the value that would leave the label where it is
     // if the alignment were later removed.
-    var anchor = start.aligned ? 'start' :
+    var anchor = start.aligned ? 'start' : start.keepAnchor ? drawnAnchor :
       width > 0 ? getAnchorForCentre(left + width / 2, width) : drawnAnchor;
     // An aligned label goes on being drawn with the anchor its alignment gives
     // it, whatever the drag writes: the alignment is unchanged, so the renderer
@@ -16756,32 +16984,206 @@
     return Math.round(px * PRECISION) / PRECISION;
   }
 
-  var fontField = 'font-family';
-  var fontSizeField = 'font-size';
-  var fontStyleField = 'font-style';
-  var fontWeightField = 'font-weight';
-  var fillField = 'fill';
-  var opacityField = 'opacity';
-  var letterSpacingField = 'letter-spacing';
-  var lineHeightField = 'line-height';
-  var textAnchorField = 'text-anchor';
-  var labelAlignField = 'label-align';
+  // Wrapping a text block to its label-width, with the browser's own line
+  // breaker.
+  //
+  // There is no API that reports where a browser breaks lines, so the text is
+  // laid out in an offscreen <div> at the label's width and font, and read back:
+  // Range.getClientRects() gives each character's line box, and a character
+  // sitting lower than the one before it starts a line. Everything the browser
+  // knows about line breaking -- UAX #14 classes, breaks after hyphens, none at
+  // no-break spaces, CJK, dictionary breaking for Thai -- comes with it.
+  //
+  // The font is read back from a rendered sample of the label rather than
+  // assembled from the record, so that the layer's defaults and any inline css
+  // apply exactly as they do on the map.
+  //
+  // See docs/development/text-annotation-design.md.
+
+  // Properties that change where lines break, and so the ones a change to which
+  // has to rewrap a text block.
+  var WRAP_FIELDS = ['label-width', 'font-family', 'font-size',
+    'font-weight', 'font-style', 'font-stretch', 'letter-spacing', 'css'];
+
+  var COPIED_STYLES = ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle',
+    'fontStretch', 'fontVariant', 'fontKerning', 'fontFeatureSettings',
+    'fontVariationSettings', 'letterSpacing', 'wordSpacing', 'textTransform'];
+
+  // Lines are laid out far apart, so that a character in a fallback font sitting
+  // a little higher or lower than its neighbours is not mistaken for a new line.
+  var LINE_HEIGHT = 3;
+
+  var CACHE_LIMIT = 2000;
+  var cache$2 = new Map();
+  var wrapper = null;
+
+  // The label's width in px, or 0 for a label that does not wrap.
+  function getLabelWrapWidth(rec) {
+    var w = rec ? Number(rec['label-width']) : 0;
+    return w > 0 && isFinite(w) ? w : 0;
+  }
+
+  // Offsets into @text (real newlines, no soft breaks) where a line starts
+  // because it was wrapped, in ascending order.
+  function getSoftBreaks(text, rec) {
+    var width = getLabelWrapWidth(rec);
+    var key, breaks;
+    if (!width || !text) return [];
+    key = getWrapKey(text, rec);
+    if (cache$2.has(key)) return cache$2.get(key);
+    breaks = measureSoftBreaks(text, rec, width);
+    if (cache$2.size >= CACHE_LIMIT) cache$2.clear();
+    cache$2.set(key, breaks);
+    return breaks;
+  }
+
+  // A stored label-text value, rewrapped for @rec's width and font. Returned
+  // unchanged when neither the old value nor the new one has a soft break, so
+  // that a label that does not wrap keeps the line breaks it was written with.
+  function rewrapLabelValue(value, rec) {
+    var o = readSoftBreaks(value);
+    var breaks = getSoftBreaks(o.text, rec);
+    if (sameSoftBreaks(o.breaks, breaks)) return value;
+    return encodeLabelText(insertSoftBreaks(o.text, breaks));
+  }
+
+  function clearWrapCache() {
+    cache$2.clear();
+  }
+
+  function getWrapKey(text, rec) {
+    var parts = [text];
+    WRAP_FIELDS.forEach(function(name) {
+      var val = rec[name];
+      parts.push(val === null || val === undefined ? '' : String(val));
+    });
+    parts.push(rec['class'] || '');
+    return parts.join('\u0000');
+  }
+
+  function measureSoftBreaks(text, rec, width) {
+    var w = getWrapper();
+    var style, fontSize, node, range;
+    if (!w) return [];
+    style = getLabelFontStyle(w, rec);
+    if (!style) return [];
+    COPIED_STYLES.forEach(function(name) {
+      w.div.style[name] = style[name] || '';
+    });
+    w.div.style.width = width + 'px';
+    w.div.textContent = text;
+    node = w.div.firstChild;
+    fontSize = parseFloat(style.fontSize) || 12;
+    range = document.createRange();
+    var breaks = findSoftBreaks(text, function(i) {
+      var end = isHighSurrogate(text.charCodeAt(i)) ? i + 2 : i + 1;
+      var r;
+      range.setStart(node, i);
+      range.setEnd(node, Math.min(end, text.length));
+      r = range.getBoundingClientRect();
+      return r.height > 0 ? r.top : null;
+    }, fontSize * LINE_HEIGHT / 2);
+    w.div.textContent = '';
+    return breaks;
+  }
+
+  function isHighSurrogate(c) {
+    return c >= 0xD800 && c <= 0xDBFF;
+  }
+
+  // The computed font of @rec's label, from a sample rendered by the same code
+  // as the map, inside the defaults a label inherits from its layer's group.
+  function getLabelFontStyle(w, rec) {
+    var sample = Object.assign({}, rec, {'label-text': 'x'});
+    var node, cs, out;
+    delete sample['label-align'];
+    w.svg.innerHTML = internal.svg.stringify({
+      tag: 'g',
+      properties: internal.getLabelTextDefaults(),
+      children: [internal.svg.renderStyledLabel(sample)]
+    });
+    node = w.svg.querySelector('text');
+    if (!node) return null;
+    cs = window.getComputedStyle(node);
+    out = {};
+    COPIED_STYLES.forEach(function(name) {
+      out[name] = cs[name];
+    });
+    w.svg.innerHTML = '';
+    return out;
+  }
+
+  // Positioned off the page rather than hidden with display:none, which gives an
+  // element no layout and its text no lines.
+  function getWrapper() {
+    var box, div, svg;
+    if (wrapper) return wrapper;
+    if (typeof document == 'undefined') return null;
+    box = document.createElement('div');
+    box.setAttribute('class', 'label-wrap-measure');
+    box.setAttribute('aria-hidden', 'true');
+    div = document.createElement('div');
+    div.style.whiteSpace = 'pre-wrap';
+    div.style.overflowWrap = 'break-word';
+    div.style.lineHeight = String(LINE_HEIGHT);
+    div.style.padding = '0';
+    div.style.border = '0';
+    div.style.boxSizing = 'content-box';
+    svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    box.appendChild(div);
+    box.appendChild(svg);
+    document.body.appendChild(box);
+    wrapper = {div: div, svg: svg};
+    return wrapper;
+  }
+
+  var fontField = 'font-family';
+  var fontSizeField = 'font-size';
+  var fontStyleField = 'font-style';
+  var fontWeightField = 'font-weight';
+  var fillField = 'fill';
+  var opacityField = 'opacity';
+  var letterSpacingField = 'letter-spacing';
+  var lineHeightField = 'line-height';
+  var textAnchorField = 'text-anchor';
+  var labelAlignField = 'label-align';
   var cssField = 'css';
+  var haloWidthField = 'halo-width';
+  var haloColorField = 'halo-color';
+  var haloOpacityField = 'halo-opacity';
   var iconField = 'icon';
   var iconSizeField = 'icon-size';
   var iconColorField = 'icon-color';
   var iconOpacityField = 'icon-opacity';
+  var calloutField = 'callout';
+  var calloutEndField = 'callout-end';
+  var calloutEndSizeField = 'callout-end-size';
+  var calloutColorField = 'callout-color';
+  var calloutOpacityField = 'callout-opacity';
+  var calloutWidthField = 'callout-width';
+  var calloutGapField = 'callout-gap';
+  var defaultCalloutShape = 'line';
+  var defaultCalloutWidth = 1;
   var defaultFontSize = 12;
   var defaultFontStyle = 'normal';
   var defaultFontWeight = '400';
   var defaultLabelColor = '#000000';
   var defaultIconColor = '#000000';
   var defaultIconSize = 5;
+  // The width a halo is switched on at: past the edge of the glyphs, so a
+  // stroke of twice this.
+  var defaultHaloWidth = 2;
+  var defaultHaloColor = internal.svg.DEFAULT_HALO_COLOR;
   // The line height field shows this rather than renderLabel()'s 1.1em default,
   // and shows it as a placeholder rather than a value, so that a label carries
   // no line-height until one is chosen. "auto" is the honest description of a
   // blank field: something else decides.
   var lineHeightPlaceholder = 'auto';
+  // What a control shows for a selection whose labels disagree about it. One
+  // word, used in every field and menu that can be in that state: the panel
+  // otherwise says it by showing nothing, which is also what an unset property
+  // looks like.
+  var MIXED_TEXT = 'mixed';
   var labelStyleMode = 'label_style';
   var labelStylePanelMode = 'label_style_tool';
   var labelMode = 'label';
@@ -16798,10 +17200,20 @@
     labelAlignField,
     cssField,
     'label-pos',
+    haloWidthField,
+    haloColorField,
+    haloOpacityField,
     iconField,
     iconSizeField,
     iconColorField,
-    iconOpacityField
+    iconOpacityField,
+    calloutField,
+    calloutEndField,
+    calloutEndSizeField,
+    calloutColorField,
+    calloutOpacityField,
+    calloutWidthField,
+    calloutGapField
   ];
   var labelPositions = ['nw', 'n', 'ne', 'w', 'c', 'e', 'sw', 's', 'se'];
   // The position an icon moves a centred label to when it is switched on: upper
@@ -16863,6 +17275,41 @@
     center: '<line x1="3" y1="4.5" x2="13" y2="4.5"></line><line x1="5.5" y1="8" x2="10.5" y2="8"></line><line x1="4" y1="11.5" x2="12" y2="11.5"></line>',
     right: '<line x1="3" y1="4.5" x2="13" y2="4.5"></line><line x1="8" y1="8" x2="13" y2="8"></line><line x1="5" y1="11.5" x2="13" y2="11.5"></line>'
   };
+  // As with icons, no "none" among the shapes: the section's switch says whether
+  // there is a callout. The ends do have one, since a line with no marker is a
+  // shape of its own rather than the absence of a callout.
+  var calloutShapes = [{
+    name: 'line',
+    title: 'straight'
+  }, {
+    name: 'elbow',
+    title: 'elbow'
+  }, {
+    name: 'curve',
+    title: 'curve'
+  }];
+  var calloutEnds = [{
+    name: 'none',
+    title: 'no marker at the anchor'
+  }, {
+    name: 'arrow',
+    title: 'solid arrowhead at the anchor'
+  }, {
+    name: 'open-arrow',
+    title: 'open arrowhead at the anchor'
+  }];
+  // The anchor is at the lower left of the shapes and at the left of the ends,
+  // which is where the markers go. The arrowheads are drawn to the renderer's
+  // angles, with sides the same visible length -- the open one's stroke
+  // included -- so that they compare as the drawn arrows do.
+  var calloutButtonSymbols = {
+    line: '<path d="M3.5 12.5L12.5 3.5"></path>',
+    elbow: '<path d="M3.5 12.5L8 4.5H13"></path>',
+    curve: '<path d="M3.5 12.5Q4.5 4.5 12.5 4"></path>',
+    none: '<path d="M3 8H13"></path>',
+    arrow: '<path d="M6.7 8H13"></path><path class="fill" d="M2.5 8L8.53 5.57V10.43Z"></path>',
+    'open-arrow': '<path d="M3.2 8H13"></path><path d="M7.38 5.07L3.2 8L7.38 10.93"></path>'
+  };
   var iconButtonSymbols = {
     circle: '<circle cx="8" cy="8" r="4.25"></circle>',
     square: '<rect x="4" y="4" width="8" height="8"></rect>',
@@ -16877,11 +17324,15 @@
     // label-style-panel carries the styling the point and layer panels share; the
     // second class is this panel's own, as theirs are
     var panel = El('div').addClass('label-style-panel text-style-panel rollover').appendTo(parent).hide();
-    var presetControl, fontSelect, fontStyleSelect, fontSizeInput, colorFieldBox, colorChit, colorInput, colorPicker, opacityInput, letterSpacingInput, lineHeightInput, alignBtns, cssInput, posBtns, dragModeBtns, iconToggle, iconGroupEl, iconBtns, iconSizeInput, iconColorFieldBox, iconColorChit, iconColorInput, iconColorPicker, iconOpacityInput, editingStatus, clearLink, closeBtn, hit;
+    var presetControl, fontSelect, fontStyleSelect, fontSizeInput, colorFieldBox, colorChit, colorInput, colorPicker, opacityInput, letterSpacingInput, lineHeightInput, alignBtns, cssInput, posBtns, dragModeBtns, haloToggle, haloWidthInput, haloColorFieldBox, haloColorChit, haloColorInput, haloColorPicker, haloOpacityInput, iconToggle, iconGroupEl, iconBtns, iconSizeInput, iconColorFieldBox, iconColorChit, iconColorInput, iconColorPicker, iconOpacityInput, haloSection, iconSection, calloutSection, calloutToggle, calloutShapeGroupEl, calloutShapeBtns, calloutEndGroupEl, calloutEndBtns, calloutColorFieldBox, calloutColorChit, calloutColorInput, calloutColorPicker, calloutOpacityInput, calloutWidthInput, calloutEndSizeInput, calloutGapInput, editingStatus, clearLink, closeBtn, hit;
     var fontOptionsRendered = false;
     // The shape the toggle turns back on, so that switching a symbol off and on
     // again does not silently change a star into a circle.
     var lastIconShape = defaultIconShape;
+    // Likewise the halo's width, which is what switching one off removes.
+    var lastHaloWidth = defaultHaloWidth;
+    // And the callout's shape.
+    var lastCalloutShape = defaultCalloutShape;
 
     initPanel();
     gui.addMode(labelStylePanelMode, turnOn, turnOff);
@@ -16981,8 +17432,18 @@
       });
 
       var header = El('div').addClass('label-style-panel-title').appendTo(panel).text('Label styles');
+      // In label mode the panel belongs to the mode, so closing it leaves the
+      // mode: a panel that shut while the map stayed armed for placing labels
+      // would leave the tool half on, with no panel to turn it off from. Every
+      // other style panel's × closes a panel and nothing else, and this one
+      // reads as the same button, which is the argument for it doing the whole
+      // of what the user asked for rather than part.
       closeBtn = El('button').addClass('label-style-close').appendTo(header).text('×').on('click', function() {
-        gui.clearMode();
+        if (labelModeIsOn()) {
+          gui.interaction.turnOff(); // the tool's own turnOff() takes the panel
+        } else {
+          gui.clearMode();
+        }
       });
 
       var selectRow = El('div').addClass('label-style-selection-row').appendTo(panel);
@@ -17050,6 +17511,9 @@
       // Letter spacing takes the right-hand column on its own, above line
       // height: the two spacing values read as a pair there, and the left of the
       // row is where the alignment buttons go.
+      //
+      // A text block's width is not here: it is set by dragging the block's
+      // handle, and a field for it would be clutter on every other label.
       var letterRow = El('div').addClass('label-style-row label-split-row').appendTo(textSection);
       El('div').addClass('label-split-cell').appendTo(letterRow);
       var letterCell = El('div').addClass('label-split-cell label-spacing-row').appendTo(letterRow);
@@ -17088,15 +17552,69 @@
       var positionRow = El('label').addClass('label-style-row').appendTo(textSection);
       El('span').appendTo(positionRow).text('Offset from anchor');
 
+      // A halo is a yes/no that its three values then qualify, as a symbol is, so
+      // it is switched the same way and its controls are inert while it is off.
+      // Its rows are ones the Text section already has: a colour and its opacity
+      // on one line, and a width in the narrow column beneath, where letter
+      // spacing sits above.
+      haloSection = addSection('Halo');
+      var haloTitle = haloSection.findChild('.label-style-section-title');
+      haloToggle = makeToggle(haloTitle, {
+        title: 'Draw a halo around the text',
+        className: 'label-halo-toggle',
+        onChange: setHaloOn
+      });
+
+      var haloColorRow = El('div').addClass('label-style-row label-split-row').appendTo(haloSection);
+      var haloColorCell = El('div').addClass('label-split-cell label-color-row').appendTo(haloColorRow);
+      haloColorChit = El('div').addClass('label-color-chit').attr('role', 'button');
+      haloColorInput = El('input').attr('type', 'text').attr('title', 'Halo color');
+      haloColorFieldBox = makeColorField(haloColorCell, haloColorChit, haloColorInput);
+      haloColorChit.on('click', function() {
+        if (this.classList.contains('disabled')) return;
+        haloColorPicker.toggle();
+      });
+      haloColorInput.on('change', function() {
+        var color = haloColorInput.node().value.trim();
+        if (color) {
+          if (isHexColor(color)) {
+            haloColorPicker.setColor(color);
+          }
+          applyHaloColor(color);
+        }
+      });
+      haloColorPicker = initColorPicker(haloColorCell, haloColorChit, haloColorInput, applyHaloColor);
+
+      var haloOpacityCell = El('div').addClass('label-split-cell label-opacity-row').appendTo(haloColorRow);
+      haloOpacityInput = addOpacityInput(haloOpacityCell, applyHaloOpacity);
+
+      var haloWidthRow = El('div').addClass('label-style-row label-split-row').appendTo(haloSection);
+      El('div').addClass('label-split-cell').appendTo(haloWidthRow);
+      var haloWidthCell = El('div').addClass('label-split-cell label-spacing-row').appendTo(haloWidthRow);
+      El('span').appendTo(haloWidthCell).text('Width');
+      // Halves as well as whole pixels: a halo is usually 1 to 2px, and the
+      // step between those two is most of the range anyone uses.
+      haloWidthInput = new SizeField(haloWidthCell, {
+        title: 'How far the halo extends past the text, in px',
+        min: 0.1,
+        max: 50,
+        step: 0.5,
+        bigStep: 2,
+        onSet: applyHaloWidth,
+        onStep: nudgeHaloWidth,
+        onDone: releaseFocus
+      });
+
       // Whether the label has a symbol is one question and which symbol it has is
       // another, so the first is a switch on the section's heading rather than a
       // fifth shape button reading "none". Everything below it is inert while it
       // is off, which is also the honest reading of an icon-size or icon-color on
       // a label with no icon: nothing to apply it to.
-      var iconSection = addSection('Icon');
+      iconSection = addSection('Icon');
       var iconTitle = iconSection.findChild('.label-style-section-title');
       iconToggle = makeToggle(iconTitle, {
         title: 'Draw a symbol at the label anchor',
+        className: 'label-icon-toggle',
         onChange: setIconOn
       });
       // The size's caption sits on the heading line, over its own column. It
@@ -17152,6 +17670,8 @@
       var iconOpacityCell = El('div').addClass('label-split-cell label-opacity-row label-icon-opacity-row').appendTo(iconColorRow);
       iconOpacityInput = addOpacityInput(iconOpacityCell, applyIconOpacity);
 
+      initCalloutSection();
+
       var posRow = El('div').addClass('label-style-row label-position-row').appendTo(textSection);
 
 
@@ -17175,7 +17695,7 @@
       dragModeBtns = {};
       labelDragModes.forEach(function(item) {
         dragModeBtns[item.name] = makePanelButton(dragModeGroup, item.label, function() {
-            setLabelPositionMode(gui, item.name);
+            setLabelPositionMode(gui, item.name, getPositionModeKind());
           })
           .attr('data-drag-mode', item.name)
           .attr('title', item.title);
@@ -17196,6 +17716,116 @@
       });
     }
 
+    // Switched like the halo and the symbol, and shaped like them: the choices on
+    // the first line, a colour and its opacity on the next, then the sizes. The
+    // line's geometry -- its corner or bend, where it meets the text, how far it
+    // stops short of the anchor -- is a matter of positions, which are dragged on
+    // the map rather than typed here. See docs/development/text-annotation-design.md.
+    function initCalloutSection() {
+      calloutSection = addSection('Callout');
+      calloutToggle = makeToggle(calloutSection.findChild('.label-style-section-title'), {
+        title: 'Draw a line from the label anchor to its text',
+        className: 'label-callout-toggle',
+        onChange: setCalloutOn
+      });
+
+      // Each choice in the wide column with the size that qualifies it beside
+      // it, as Alignment has Line height: the line's shape and its width, then
+      // the marker and its size.
+      var shapeRow = El('div').addClass('label-style-row label-split-row').appendTo(calloutSection);
+      var shapeCell = El('div').addClass('label-split-cell label-align-row').appendTo(shapeRow);
+      El('span').appendTo(shapeCell).text('Line');
+      calloutShapeGroupEl = El('div').addClass('label-btn-group label-callout-buttons').appendTo(shapeCell);
+      calloutShapeBtns = {};
+      calloutShapes.forEach(function(item) {
+        calloutShapeBtns[item.name] = makeCalloutButton(calloutShapeGroupEl, item, function() {
+          applyCalloutShape(item.name);
+        });
+      });
+      var widthCell = El('div').addClass('label-split-cell label-spacing-row label-callout-width-row').appendTo(shapeRow);
+      El('span').appendTo(widthCell).text('Width');
+      calloutWidthInput = new SizeField(widthCell, {
+        title: 'Callout line width in px',
+        min: 0.25,
+        max: 20,
+        step: 0.5,
+        bigStep: 2,
+        decimals: 2,
+        onSet: applyCalloutWidth,
+        onStep: nudgeCalloutWidth,
+        onDone: releaseFocus
+      });
+
+      var endRow = El('div').addClass('label-style-row label-split-row').appendTo(calloutSection);
+      var endCell = El('div').addClass('label-split-cell label-align-row').appendTo(endRow);
+      El('span').appendTo(endCell).text('End');
+      calloutEndGroupEl = El('div').addClass('label-btn-group label-callout-buttons').appendTo(endCell);
+      calloutEndBtns = {};
+      calloutEnds.forEach(function(item) {
+        calloutEndBtns[item.name] = makeCalloutButton(calloutEndGroupEl, item, function() {
+          applyCalloutEnd(item.name);
+        });
+      });
+      var endSizeCell = El('div').addClass('label-split-cell label-spacing-row label-callout-end-size-row').appendTo(endRow);
+      El('span').appendTo(endSizeCell).text('Size');
+      calloutEndSizeInput = new SizeField(endSizeCell, {
+        title: 'Arrowhead size in px, the length of its sides',
+        min: 1,
+        max: 60,
+        step: 1,
+        bigStep: 5,
+        onSet: applyCalloutEndSize,
+        onStep: nudgeCalloutEndSize,
+        onDone: releaseFocus
+      });
+
+      var colorRow = El('div').addClass('label-style-row label-split-row').appendTo(calloutSection);
+      var colorCell = El('div').addClass('label-split-cell label-color-row').appendTo(colorRow);
+      calloutColorChit = El('div').addClass('label-color-chit').attr('role', 'button');
+      calloutColorInput = El('input').attr('type', 'text').attr('title', 'Callout color');
+      calloutColorFieldBox = makeColorField(colorCell, calloutColorChit, calloutColorInput);
+      calloutColorChit.on('click', function() {
+        if (this.classList.contains('disabled')) return;
+        calloutColorPicker.toggle();
+      });
+      calloutColorInput.on('change', function() {
+        var color = calloutColorInput.node().value.trim();
+        if (color) {
+          if (isHexColor(color)) {
+            calloutColorPicker.setColor(color);
+          }
+          applyCalloutColor(color);
+        }
+      });
+      calloutColorPicker = initColorPicker(colorCell, calloutColorChit, calloutColorInput, applyCalloutColor);
+      var opacityCell = El('div').addClass('label-split-cell label-opacity-row').appendTo(colorRow);
+      calloutOpacityInput = addOpacityInput(opacityCell, applyCalloutOpacity);
+
+      // The gap in the narrow column, under the sizes: it has a blank state,
+      // "auto", which clears the anchor's symbol, so it is not a size field.
+      var gapRow = El('div').addClass('label-style-row label-split-row').appendTo(calloutSection);
+      El('div').addClass('label-split-cell').appendTo(gapRow);
+      var gapCell = El('div').addClass('label-split-cell label-spacing-row label-callout-gap-row').appendTo(gapRow);
+      El('span').appendTo(gapCell).text('Gap');
+      calloutGapInput = El('input').attr('type', 'text').addClass('label-measure-input')
+        .attr('title', 'Space between the callout and the anchor, in px')
+        .attr('placeholder', 'auto')
+        .attr('data-placeholder', 'auto')
+        .appendTo(gapCell)
+        .on('change', function() {
+          applyCalloutGap(calloutGapInput.node().value.trim());
+        });
+    }
+
+    function makeCalloutButton(parent, item, action) {
+      var btn = makePanelButton(parent, '', action)
+        .attr('data-callout', item.name)
+        .attr('title', item.title);
+      El('<svg class="label-callout-symbol" viewBox="0 0 16 16" aria-hidden="true">' +
+        calloutButtonSymbols[item.name] + '</svg>').appendTo(btn);
+      return btn;
+    }
+
     function appendIconButtonSymbol(btn, iconName) {
       var svg = '<svg class="label-icon-symbol" viewBox="0 0 16 16" aria-hidden="true">' +
         iconButtonSymbols[iconName] + '</svg>';
@@ -17215,26 +17845,39 @@
       return makePanelSection(panel, title, opts);
     }
 
-    // A two-state switch: a track with a knob that sits left when off and right
-    // when on, which is the direction users expect and the only thing that says
-    // which state is which without a label for each.
+    // A switch: a track with a knob that sits left when off and right when on,
+    // which is the direction users expect and the only thing that says which
+    // state is which without a label for each. A third state says that the
+    // labels it is asking about disagree -- the knob sits over the join of a
+    // half-and-half track, which is the panel's only control that has to show
+    // "some of them" rather than a value.
+    //
+    // role=checkbox rather than switch, which is what it looks like: 'mixed' is a
+    // legal aria-checked value for a checkbox and not for a switch, and a switch
+    // reporting a mixed selection as unchecked would be telling a screen reader
+    // the one thing the third state exists to avoid saying.
     function makeToggle(parent, opts) {
-      var track = El('div').addClass('label-toggle').attr('role', 'switch').appendTo(parent);
-      var on = false;
+      var track = El('div').addClass('label-toggle').attr('role', 'checkbox').appendTo(parent);
+      var state = 'off';
+      if (opts.className) track.addClass(opts.className);
       var disabled = false;
       El('div').addClass('label-toggle-knob').appendTo(track);
       if (opts.title) track.attr('title', opts.title);
+      // A click on a mixed switch turns everything on. It is the convention, and
+      // it is the reading that reaches a state the switch can describe: the next
+      // click then turns everything off, so both are one click away.
       track.on('click', function() {
         if (disabled) return;
-        opts.onChange(!on);
+        opts.onChange(state != 'on');
       });
       return {
-        setState: function(isOn) {
-          on = !!isOn;
-          track.classed('on', on).attr('aria-checked', on ? 'true' : 'false');
-        },
-        getState: function() {
-          return on;
+        // val: 'on', 'off' or 'mixed'; anything else reads as off
+        setState: function(val) {
+          state = val == 'on' || val == 'mixed' ? val : 'off';
+          track.classed('on', state == 'on')
+            .classed('mixed', state == 'mixed')
+            .attr('aria-checked', state == 'mixed' ? 'mixed' :
+              state == 'on' ? 'true' : 'false');
         },
         setDisabled: function(off) {
           disabled = !!off;
@@ -17257,6 +17900,9 @@
     function makeMeasureInput(parent, field, placeholder) {
       var input = El('input').attr('type', 'text').addClass('label-measure-input')
         .attr('placeholder', placeholder)
+        // The field's own placeholder, kept because the shown one is replaced
+        // while the selection disagrees -- see setMixedPlaceholder().
+        .attr('data-placeholder', placeholder)
         .appendTo(parent)
         .on('change', function() {
           applyStyleValues([[field, input.node().value.trim()]]);
@@ -17299,9 +17945,7 @@
       renderFontOptions();
       gui.state.label_style_panel_open = true;
       panel.show();
-      // In label mode the panel belongs to the mode rather than being a thing the
-      // user opened, and closing it would leave the tool half on.
-      closeBtn[labelModeIsOn() ? 'hide' : 'show']();
+      closeBtn.show();
       textBtn.addClass('selected');
       updateControls();
       updateSelectionDisplay();
@@ -17428,51 +18072,98 @@
       // With nothing selected the menu shows the font the next label will be
       // made in; with labels selected it shows the font they are drawn in, which
       // for a label carrying none is whatever sans-serif resolves to here.
-      var fontVal = getCommonValue(ids, fontField,
+      var font = getShownValue(ids, fontField,
         {useDefault: true, defaultValue: getFontNameForTarget(ids)});
-      var fontSizeVal = getCommonValue(ids, fontSizeField, {useDefault: true, defaultValue: defaultFontSize});
+      var fontSize = getShownValue(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 opacityVal = getCommonValue(ids, opacityField, {useDefault: true, defaultValue: 1});
-      var letterSpacingVal = getCommonValue(ids, letterSpacingField);
-      var lineHeightVal = getCommonValue(ids, lineHeightField);
+      var fill = getShownValue(ids, fillField, {useDefault: true, defaultValue: defaultLabelColor});
+      var opacity = getShownValue(ids, opacityField, {useDefault: true, defaultValue: 1});
+      var letterSpacing = getShownValue(ids, letterSpacingField);
+      var lineHeight = getShownValue(ids, lineHeightField);
       var alignVal = getCommonAlignment(ids);
-      var cssVal = getCommonValue(ids, cssField);
+      var css = getShownValue(ids, cssField);
       var posVal = getCommonValue(ids, 'label-pos');
-      var iconVal = getCommonValue(ids, iconField);
-      var iconSizeVal = getCommonValue(ids, iconSizeField, {useDefault: true, defaultValue: defaultIconSize});
-      var iconColorVal = getCommonValue(ids, iconColorField, {useDefault: true, defaultValue: defaultIconColor});
-      var iconOpacityVal = getCommonValue(ids, iconOpacityField, {useDefault: true, defaultValue: 1});
+      // From the labels that have a symbol, so that a selection where only some
+      // do shows the symbols it has rather than blanking every field because the
+      // rest of the selection has nothing to compare.
+      var iconIds = getIconValueIds();
+      var iconVal = getCommonValue(iconIds, iconField);
+      var iconSize = getShownValue(iconIds, iconSizeField, {useDefault: true, defaultValue: defaultIconSize});
+      var iconColor = getShownValue(iconIds, iconColorField, {useDefault: true, defaultValue: defaultIconColor});
+      var iconOpacity = getShownValue(iconIds, iconOpacityField, {useDefault: true, defaultValue: 1});
+      var haloIds = getHaloValueIds();
+      var haloWidth = getShownValue(haloIds, haloWidthField, {useDefault: true, defaultValue: lastHaloWidth});
+      var haloColor = getShownValue(haloIds, haloColorField, {useDefault: true, defaultValue: defaultHaloColor});
+      var haloOpacity = getShownValue(haloIds, haloOpacityField, {useDefault: true, defaultValue: 1});
       updateEditingStatus(manualIds.length, !!getLabelTextSession(gui));
       updateSavedStyleControls();
       fontSelect.node().disabled = !showValues;
-      updateFontControl(fontVal);
-      updateFontStyleControls(fontVal, fontStyleVal, fontWeightVal);
-      updateFontSizeControls(showValues ? fontSizeVal : '');
-      updateColorControls(showValues ? fillVal : '');
-      updateOpacityControl(opacityInput, showValues ? opacityVal : '');
-      updateMeasureControl(letterSpacingInput, showValues ? letterSpacingVal : '');
-      updateMeasureControl(lineHeightInput, showValues ? lineHeightVal : '');
+      updateFontControl(font);
+      updateFontStyleControls(font.value, fontStyleVal, fontWeightVal);
+      updateFontSizeControls(fontSize);
+      updateColorControls(fill);
+      updateOpacityControl(opacityInput, opacity);
+      updateMeasureControl(letterSpacingInput, letterSpacing);
+      updateMeasureControl(lineHeightInput, lineHeight);
       updateAlignButtons(showValues ? alignVal : '');
-      updateCssControl(showValues ? cssVal : '');
+      updateCssControl(css);
       updatePositionButtons(showValues ? posVal : '', ids);
+      var haloOff = updateHaloToggle();
+      updateHaloWidthControl(haloWidth, haloOff);
+      updateSwatchField(haloColorInput, haloColorFieldBox, haloColorChit,
+        haloColorPicker, haloColor, haloOff);
+      updateOpacityControl(haloOpacityInput, haloOpacity, haloOff);
       // The symbol's controls keep showing their values while the switch is off,
       // greyed: what they show is what the symbol comes back as.
       var iconOff = updateIconControls(showValues ? iconVal : '');
-      updateIconSizeControls(showValues ? iconSizeVal : '', iconOff);
-      updateIconColorControls(showValues ? iconColorVal : '', iconOff);
-      updateOpacityControl(iconOpacityInput, showValues ? iconOpacityVal : '', iconOff);
-    }
-
-    function updateOpacityControl(input, val, disabled) {
+      updateIconSizeControls(iconSize, iconOff);
+      updateIconColorControls(iconColor, iconOff);
+      updateOpacityControl(iconOpacityInput, iconOpacity, iconOff);
+      var calloutOff = updateCalloutValueControls();
+      setSectionCollapsed(haloSection, haloOff, haloColorPicker);
+      setSectionCollapsed(iconSection, iconOff, iconColorPicker);
+      setSectionCollapsed(calloutSection, calloutOff, calloutColorPicker);
+    }
+
+    // A section whose switch is off shows only its heading. What is under it is
+    // inert while it is off, so hiding it loses nothing, and the panel stays short
+    // enough to hold all of them. The values are kept, greyed, for the moment it
+    // is switched back on, which is what they come back as.
+    //
+    // An open picker is closed with its section: it hangs from the colour field,
+    // and a picker left open over a hidden field would change a colour nobody
+    // can see.
+    function setSectionCollapsed(section, collapsed, picker) {
+      section.classed('collapsed', collapsed);
+      if (collapsed && picker.visible()) picker.hide();
+    }
+
+    // Every field that can show a value can also show nothing, which is why each
+    // of these takes a {value, mixed} rather than a value: a field blank because
+    // the selected labels disagree says so, in the placeholder, where one blank
+    // because the property is unset shows what the renderer will do instead.
+    function updateOpacityControl(input, shown, disabled) {
       input.node().disabled = disabled || !controlsEnabled();
-      input.node().value = val === '' ? '' : formatOpacityPct(val);
+      input.node().value = shown.value === '' ? '' : formatOpacityPct(shown.value);
+      setMixedPlaceholder(input, shown.mixed);
     }
 
-    function updateMeasureControl(input, val) {
+    function updateMeasureControl(input, shown) {
+      var val = shown.value;
       input.node().disabled = !controlsEnabled();
       input.node().value = val || val === 0 ? String(val) : '';
+      setMixedPlaceholder(input, shown.mixed);
+    }
+
+    // A field showing nothing because the labels disagree says "mixed" where it
+    // would otherwise show its own placeholder -- the spacing fields show the
+    // value the renderer uses when the property is absent, which is not what is
+    // true of a mixed selection.
+    function setMixedPlaceholder(input, mixed) {
+      var el = input.node();
+      var own = el.getAttribute('data-placeholder') || '';
+      el.setAttribute('placeholder', mixed ? MIXED_TEXT : own);
     }
 
     // Alignment stays live whatever is selected, including nothing. It was
@@ -17496,7 +18187,6 @@
       // to take. The commands ignore a position given for one, and a disabled
       // button says so where a console warning would not.
       var disabled = !controlsEnabled() || everyLabelIsOnAPath(ids);
-      var locked = !disabled && gridIsLockedToCentre(ids);
       // Faintly, and only when no cell is lit: a label carrying offsets is not
       // at any of the nine, but one of them is roughly where it is and clicking
       // it is the way back.
@@ -17504,37 +18194,11 @@
       labelPositions.forEach(function(name) {
         posBtns[name].classed('selected', !disabled && name == pos);
         posBtns[name].classed('nearest', name == nearest);
-        setPanelButtonDisabled(posBtns[name], disabled || locked && name != 'c');
+        setPanelButtonDisabled(posBtns[name], disabled);
       });
       updateDragModeButtons();
     }
 
-    // The nine positions place text around something, so with nothing drawn at
-    // the anchor the grid is locked to the centre cell: there is no answer to
-    // "north-east of what?", and the centre is what -add-label gives a new label
-    // anyway. The cell stays clickable, because text over its own symbol is a
-    // real thing to ask for.
-    //
-    // The test is whether the label draws a symbol, not whether it has an icon:
-    // a styled dots layer given label text by the point panel's "Create labels"
-    // keeps its r and fill, and keying this on icon= alone would lock the
-    // commonest labels in the app to the middle of their own dots.
-    //
-    // A default and a guard rather than an invariant. A label that arrives
-    // positioned with nothing at its anchor -- from the CLI, from an expression,
-    // from the legacy positioning mode -- is shown as it is, with the grid live:
-    // refusing to display what is in the record is worse than letting an odd
-    // state be edited. Dragging is not gated on a symbol either, since a labels
-    // layer whose dots live in a different layer still needs its text placed.
-    function gridIsLockedToCentre(ids) {
-      var table = getActiveTable();
-      if (!everyTargetLacksASymbol(ids)) return false;
-      if (ids.length === 0) return !labelIsPlaced(getNewLabelStyle(gui));
-      return ids.every(function(id) {
-        return !labelIsPlaced(table && table.getRecordAt(id));
-      });
-    }
-
     // Whether a label has been put somewhere other than on top of its anchor: a
     // position of its own other than the centre one, or offsets from a drag.
     function labelIsPlaced(rec) {
@@ -17544,16 +18208,6 @@
         internal.hasStyleValue(rec, 'dy');
     }
 
-    function everyTargetLacksASymbol(ids) {
-      var table = getActiveTable();
-      if (ids.length === 0) {
-        return !internal.featureHasSvgSymbol(getNewLabelStyle(gui));
-      }
-      return ids.every(function(id) {
-        return !internal.featureHasSvgSymbol(table && table.getRecordAt(id));
-      });
-    }
-
     // Which of the nine positions a dragged label is nearest, or ''.
     //
     // Only for a single label: the cell is a hint about where one label sits,
@@ -17585,11 +18239,12 @@
       }));
     }
 
-    // The toggle is the tool's state and not the selection's, so nothing here
-    // reads a record. It is inert outside the label tool, where there is no drag
-    // on a label for it to describe.
+    // The toggle is the tool's state and not the selection's, but there is one
+    // for point text and one for text blocks, and it shows the one for the kind
+    // of label selected. It is inert outside the label tool, where there is no
+    // drag on a label for it to describe.
     function updateDragModeButtons() {
-      var mode = getLabelPositionMode(gui);
+      var mode = getLabelPositionMode(gui, getPositionModeKind());
       var disabled = !labelModeIsOn();
       labelDragModes.forEach(function(item) {
         dragModeBtns[item.name].classed('selected', !disabled && item.name == mode);
@@ -17597,6 +18252,16 @@
       });
     }
 
+    // 'block' when the labels the panel is pointed at are all text blocks, and
+    // otherwise 'point', including for the next label to be made.
+    function getPositionModeKind() {
+      var table = getActiveTable();
+      var ids = getTargetIds();
+      return ids.length > 0 && table && ids.every(function(id) {
+        return getLabelPositionKind(table.getRecordAt(id)) == 'block';
+      }) ? 'block' : 'point';
+    }
+
     function everyLabelIsOnAPath(ids) {
       return someLabelIsOnAPath(ids, 'every');
     }
@@ -17631,8 +18296,9 @@
       return labelModeIsOn() ? 'new labels' : 'all';
     }
 
-    function updateFontSizeControls(fontSizeVal) {
-      fontSizeInput.setValue(fontSizeVal || '');
+    function updateFontSizeControls(shown) {
+      fontSizeInput.setValue(shown.value || '');
+      fontSizeInput.setPlaceholder(shown.mixed ? MIXED_TEXT : '');
       fontSizeInput.setDisabled(!controlsEnabled());
     }
 
@@ -17645,15 +18311,43 @@
     // here, and a project moves between machines. It is added to the menu as
     // itself rather than replaced by an installed font, since the name is the
     // user's data and choosing something else for them would restyle the label.
-    function updateFontControl(fontVal) {
+    function updateFontControl(shown) {
+      var fontVal = shown.value;
+      // A font menu is a list of fonts, so "they are in different fonts" cannot
+      // be one of the fonts: it is an entry that appears only while it is true,
+      // and picking it does nothing (applyFont() ignores a blank value). The
+      // list stays live, so choosing a font is how the selection is brought into
+      // line -- as it is for the face menu below.
+      setMixedOption(fontSelect, shown.mixed);
       fontSelect.node().value = fontVal || '';
       if (fontVal && fontSelect.node().selectedIndex < 0) {
         El('option').attr('value', fontVal).text(fontVal).appendTo(fontSelect);
         fontSelect.node().value = fontVal;
       }
-      // Nothing selected, rather than the first font in the list, for a
-      // selection whose labels are in different fonts.
-      if (!fontVal) fontSelect.node().selectedIndex = -1;
+      // Nothing selected, rather than the first font in the list, for a target
+      // there is nothing to say about -- a disabled menu with no labels behind it.
+      if (!fontVal && !shown.mixed) fontSelect.node().selectedIndex = -1;
+    }
+
+    // Adds or removes a menu's "mixed" entry, which carries no value: a select
+    // showing nothing looks like a control that failed to load, and this is the
+    // one state the panel cannot express by lighting no button.
+    //
+    // First in the list, and removed as soon as the selection agrees, so that it
+    // is never an option among the real ones.
+    function setMixedOption(select, mixed) {
+      var el = select.node();
+      var first = el.options[0];
+      var has = !!first && first.value === '' && first.dataset.mixed == 'true';
+      if (mixed && !has) {
+        first = document.createElement('option');
+        first.value = '';
+        first.textContent = MIXED_TEXT;
+        first.dataset.mixed = 'true';
+        el.insertBefore(first, el.firstChild);
+      } else if (!mixed && has) {
+        el.removeChild(first);
+      }
     }
 
     // The faces the chosen font is installed with, and no entry for "whatever
@@ -17673,12 +18367,13 @@
           El('option').attr('value', variant.value).appendTo(fontStyleSelect).text(variant.label);
         });
       }
+      // The faces are rebuilt above, so the "mixed" entry goes on afterwards.
+      setMixedOption(fontStyleSelect, mixed);
       fontStyleSelect.node().disabled = disabled;
       fontStyleSelect.node().value = shown ? shown.value : '';
-      // Nothing selected rather than the first face, for a selection that does
-      // not agree on one: the list is still live, so picking a face is how the
-      // selection is brought into line.
-      if (!shown) fontStyleSelect.node().selectedIndex = -1;
+      // Nothing selected rather than the first face, for a menu with no font to
+      // list the faces of.
+      if (!shown && !mixed) fontStyleSelect.node().selectedIndex = -1;
     }
 
     // The face the panel shows for a label in @fontName. A font-style and
@@ -17689,76 +18384,374 @@
       return getNearestFontStyleVariant(fontName, fontStyleVal, fontWeightVal);
     }
 
-    function updateColorControls(colorVal) {
+    function updateColorControls(shown) {
+      var colorVal = shown.value;
       var disabled = !controlsEnabled();
       colorInput.node().disabled = disabled;
       colorInput.node().value = colorVal || '';
+      setMixedPlaceholder(colorInput, shown.mixed);
       colorFieldBox.classed('disabled', disabled);
       setPanelButtonDisabled(colorChit, disabled);
+      // An empty swatch is how the field says "no colour", so a mixed one is
+      // marked instead of being left blank to mean two things.
+      colorChit.classed('mixed', shown.mixed);
       colorChit.css('background-color', isHexColor(colorVal) ? colorVal : 'transparent');
       if (colorPicker.visible()) {
         return; // avoid HSB -> RGB -> HSB rounding jumps after picker commits
       }
+      // Only this field's own picker: the halo's or the symbol's may be the one
+      // open, and a text fill like "blue" says nothing about either.
       if (isHexColor(colorVal)) {
         colorPicker.setColor(colorVal);
       } else {
-        hideColorPicker();
+        colorPicker.hide();
       }
     }
 
-    function updateCssControl(cssVal) {
+    function updateCssControl(shown) {
       cssInput.node().disabled = !controlsEnabled();
-      cssInput.node().value = cssVal || '';
+      cssInput.node().value = shown.value || '';
+      setMixedPlaceholder(cssInput, shown.mixed);
     }
 
     // The toggle reads the data rather than holding a state of its own: a symbol
     // is on when the target has one, which is what makes it follow an undo.
     //
-    // A selection where only some labels have a symbol counts as on, so that the
-    // section stays usable -- turning the switch off then removes every symbol in
-    // it, and a shape applies to all of them. Treating it as off would show the
-    // one state from which nothing in the section can be reached.
+    // A selection where only some labels have a symbol shows the switch mixed,
+    // and the section stays usable: there are symbols in the selection to style.
+    // What the controls below it then act on narrows to the labels that have one
+    // -- see getIconTargetIds() -- so styling a symbol never creates one. The
+    // switch is still the only way to ask for that, and clicking a shape is the
+    // one thing in the section that applies to every selected label, because
+    // choosing a shape for a group is a plain statement about all of it.
     function updateIconControls(iconVal) {
       var enabled = controlsEnabled();
-      var on = enabled && !everyTargetLacksAnIcon();
+      var state = enabled ? getIconState() : 'off';
+      var off = state == 'off';
       if (iconVal) lastIconShape = iconVal;
-      iconToggle.setState(on);
+      iconToggle.setState(state);
       iconToggle.setDisabled(!enabled);
       // The group is faded as a whole rather than button by button, so that the
       // border the buttons share fades with them -- a live border around dead
       // buttons is the one part of a disabled control that still looks usable.
-      iconGroupEl.classed('disabled', !on);
+      iconGroupEl.classed('disabled', off);
       iconTypes.forEach(function(icon) {
-        iconBtns[icon.name].classed('selected', on && icon.name == iconVal);
-        setPanelButtonDisabled(iconBtns[icon.name], !on);
+        iconBtns[icon.name].classed('selected', !off && icon.name == iconVal);
+        setPanelButtonDisabled(iconBtns[icon.name], off);
       });
-      return !on;
+      return off;
     }
 
     function setIconOn(on) {
       applyIcon(on ? lastIconShape : '');
     }
 
-    function updateIconSizeControls(iconSizeVal, iconOff) {
-      iconSizeInput.setValue(iconSizeVal || '');
+    function updateIconSizeControls(shown, iconOff) {
+      iconSizeInput.setValue(shown.value || '');
+      iconSizeInput.setPlaceholder(shown.mixed ? MIXED_TEXT : '');
       iconSizeInput.setDisabled(iconOff || !controlsEnabled());
     }
 
-    function updateIconColorControls(colorVal, iconOff) {
-      var disabled = iconOff || !controlsEnabled();
-      iconColorInput.node().disabled = disabled;
-      iconColorInput.node().value = colorVal || '';
-      iconColorFieldBox.classed('disabled', disabled);
-      setPanelButtonDisabled(iconColorChit, disabled);
-      iconColorChit.css('background-color', isHexColor(colorVal) ? colorVal : 'transparent');
-      if (iconColorPicker.visible()) {
+    function updateIconColorControls(shown, iconOff) {
+      updateSwatchField(iconColorInput, iconColorFieldBox, iconColorChit,
+        iconColorPicker, shown, iconOff);
+    }
+
+    // A colour field belonging to a section with a switch: the symbol's and the
+    // halo's, which both go on showing their colour, greyed, while switched off.
+    function updateSwatchField(input, fieldBox, chit, picker, shown, sectionOff) {
+      var colorVal = shown.value;
+      var disabled = sectionOff || !controlsEnabled();
+      input.node().disabled = disabled;
+      input.node().value = colorVal || '';
+      setMixedPlaceholder(input, shown.mixed);
+      fieldBox.classed('disabled', disabled);
+      setPanelButtonDisabled(chit, disabled);
+      chit.classed('mixed', shown.mixed);
+      chit.css('background-color', isHexColor(colorVal) ? colorVal : 'transparent');
+      if (picker.visible()) {
         return; // avoid HSB -> RGB -> HSB rounding jumps after picker commits
       }
       if (isHexColor(colorVal)) {
-        iconColorPicker.setColor(colorVal);
+        picker.setColor(colorVal);
       } else {
-        iconColorPicker.hide();
+        picker.hide();
+      }
+    }
+
+    // The switch reads the data, as the symbol's does, so that it follows an
+    // undo. A halo is on for a label whose halo-width is above 0.
+    //
+    // The width, colour and opacity go on showing while it is off, greyed: the
+    // colour and opacity stay on the label, and the width is the one the halo
+    // comes back at.
+    function updateHaloToggle() {
+      var enabled = controlsEnabled();
+      var state = enabled ? getHaloState() : 'off';
+      haloToggle.setState(state);
+      haloToggle.setDisabled(!enabled);
+      return state == 'off';
+    }
+
+    function updateHaloWidthControl(shown, haloOff) {
+      if (!haloOff && Number(shown.value) > 0) lastHaloWidth = Number(shown.value);
+      haloWidthInput.setValue(shown.value || '');
+      haloWidthInput.setPlaceholder(shown.mixed ? MIXED_TEXT : '');
+      haloWidthInput.setDisabled(haloOff || !controlsEnabled());
+    }
+
+    function getHaloState() {
+      var ids = getTargetIds();
+      var table = getActiveTable();
+      if (ids.length === 0) {
+        return internal.svg.labelHasHalo(labelModeIsOn() ? getNewLabelStyle(gui) : null) ? 'on' : 'off';
+      }
+      return getToggleState(ids.map(function(id) {
+        return internal.svg.labelHasHalo(table && table.getRecordAt(id));
+      }));
+    }
+
+    // Switching a halo on gives every target the same width: the one the
+    // selection's halos already share, where they share one, so that a mixed
+    // selection is brought into line with the labels that had a halo rather
+    // than reset. Switching it off removes the width and leaves the colour and
+    // opacity, which is how a halo switched off and on again comes back as it
+    // was.
+    function setHaloOn(on) {
+      var width = on ? getNumericSize(getHaloValueIds(), haloWidthField, lastHaloWidth) : '';
+      applyStyleValues([[haloWidthField, width]]);
+    }
+
+    function applyHaloWidth(value) {
+      applyStyleValues([[haloWidthField, value]], getHaloTargetIds());
+    }
+
+    function nudgeHaloWidth(delta) {
+      var width = getNumericSize(getHaloTargetIds(), haloWidthField, lastHaloWidth);
+      if (!controlsEnabled() || getHaloState() == 'off') return;
+      width = Math.max(0.5, Math.round((width + delta) * 10) / 10);
+      applyHaloWidth(width);
+    }
+
+    function applyHaloColor(color) {
+      applyStyleValues([[haloColorField, color]], getHaloTargetIds());
+    }
+
+    // Full opacity is stored as no halo-opacity, as it is for the text's own.
+    function applyHaloOpacity(value) {
+      applyStyleValues([[haloOpacityField, value >= 1 ? '' : value]], getHaloTargetIds());
+    }
+
+    // The labels a halo's width, colour or opacity goes to: the targets that
+    // have a halo, for the reason the symbol's values go only to labels with a
+    // symbol. Empty for "new labels", as there.
+    function getHaloTargetIds() {
+      var table = getActiveTable();
+      return getTargetIds().filter(function(id) {
+        return internal.svg.labelHasHalo(table && table.getRecordAt(id));
+      });
+    }
+
+    // As getIconValueIds(): the labels the section shows the values of.
+    function getHaloValueIds() {
+      var ids = getHaloTargetIds();
+      return ids.length > 0 ? ids : getTargetIds();
+    }
+
+    // The switch reads the data, as the halo's does. A callout is on for a label
+    // whose callout names a shape.
+    function getCalloutState() {
+      var ids = getTargetIds();
+      var table = getActiveTable();
+      if (ids.length === 0) {
+        return internal.svg.labelHasCallout(labelModeIsOn() ? getNewLabelStyle(gui) : null) ? 'on' : 'off';
+      }
+      return getToggleState(ids.map(function(id) {
+        return internal.svg.labelHasCallout(table && table.getRecordAt(id));
+      }));
+    }
+
+    // The labels a callout's end, colour, width and gap go to: the targets that
+    // have a callout, for the reason the symbol's values go only to labels with a
+    // symbol.
+    function getCalloutTargetIds() {
+      var table = getActiveTable();
+      return getTargetIds().filter(function(id) {
+        return internal.svg.labelHasCallout(table && table.getRecordAt(id));
+      });
+    }
+
+    function getCalloutValueIds() {
+      var ids = getCalloutTargetIds();
+      return ids.length > 0 ? ids : getTargetIds();
+    }
+
+    // Switching a callout on gives every target the shape the selection's
+    // callouts share, or the last one used. Switching it off removes the shape
+    // alone, so that a callout switched off and on again comes back with the
+    // corner, the attachment and the look it had.
+    function setCalloutOn(on) {
+      var shape = on ? getCommonValue(getCalloutTargetIds(), calloutField) || lastCalloutShape : '';
+      applyStyleValues([[calloutField, shape]]);
+    }
+
+    // A shape is a plain statement about every selected label, as a symbol's is.
+    function applyCalloutShape(shape) {
+      applyStyleValues([[calloutField, shape]]);
+    }
+
+    // No marker is stored as no callout-end.
+    function applyCalloutEnd(end) {
+      applyStyleValues([[calloutEndField, end == 'none' ? '' : end]], getCalloutTargetIds());
+    }
+
+    function applyCalloutColor(color) {
+      applyStyleValues([[calloutColorField, color]], getCalloutTargetIds());
+    }
+
+    function applyCalloutOpacity(value) {
+      applyStyleValues([[calloutOpacityField, value >= 1 ? '' : value]], getCalloutTargetIds());
+    }
+
+    function applyCalloutWidth(value) {
+      applyStyleValues([[calloutWidthField, value]], getCalloutTargetIds());
+    }
+
+    function nudgeCalloutWidth(delta) {
+      var width = getNumericSize(getCalloutTargetIds(), calloutWidthField, defaultCalloutWidth);
+      if (!controlsEnabled() || getCalloutState() == 'off') return;
+      applyCalloutWidth(Math.max(0.25, Math.round((width + delta) * 4) / 4));
+    }
+
+    // A marker size goes to the callouts that have a marker to size, as a
+    // symbol's size goes only to labels with a symbol.
+    function applyCalloutEndSize(value) {
+      applyStyleValues([[calloutEndSizeField, value]], getCalloutEndTargetIds());
+    }
+
+    // Stepped from the size each marker is drawn at, which for one with no
+    // callout-end-size is the default its line width gives it.
+    function nudgeCalloutEndSize(delta) {
+      var shown = getCalloutEndSizeShown(getCalloutEndTargetIds());
+      var size = Number(shown.value);
+      if (!controlsEnabled() || !(size > 0)) return;
+      applyCalloutEndSize(Math.max(1, Math.round(size + delta)));
+    }
+
+    function getCalloutEndTargetIds() {
+      var table = getActiveTable();
+      return getCalloutTargetIds().filter(function(id) {
+        return getCalloutEnd(table && table.getRecordAt(id)) != 'none';
+      });
+    }
+
+    function getCalloutEnd(rec) {
+      return internal.svg.getCalloutEndType(rec);
+    }
+
+    // The size a marker is drawn at: its own, or the default for its kind and
+    // line width.
+    function getCalloutEndSizeShown(ids) {
+      return getShownRecordValues(ids, function(rec) {
+        var size = rec ? Number(rec[calloutEndSizeField]) : 0;
+        var width = rec ? Number(rec[calloutWidthField]) : 0;
+        if (size > 0) return size;
+        return internal.svg.getDefaultCalloutEndSize(getCalloutEnd(rec),
+          width > 0 ? width : defaultCalloutWidth);
+      });
+    }
+
+    // Blank is "auto", which clears the anchor's symbol, and 0 is no gap at all:
+    // the two are different, which is why this is not a size field.
+    function applyCalloutGap(str) {
+      var val = Number(str);
+      if (str !== '' && !(isFinite(val) && val >= 0)) {
+        updateControls();
+        return;
+      }
+      applyStyleValues([[calloutGapField, str === '' ? '' : val]], getCalloutTargetIds());
+    }
+
+    // Returns whether the section is off.
+    function updateCalloutValueControls() {
+      var enabled = controlsEnabled();
+      var state = enabled ? getCalloutState() : 'off';
+      var off = state == 'off';
+      var ids = getCalloutValueIds();
+      var shape = enabled ? getCommonValue(ids, calloutField) : '';
+      var end = enabled ? getCommonValue(ids, calloutEndField, {useDefault: true, defaultValue: 'none'}) : '';
+      var width = getShownValue(ids, calloutWidthField, {useDefault: true, defaultValue: defaultCalloutWidth});
+      var gap = getCalloutGapShown(ids);
+      if (shape && shape != 'none') lastCalloutShape = shape;
+      calloutToggle.setState(state);
+      calloutToggle.setDisabled(!enabled);
+      updateButtonGroup(calloutShapeGroupEl, calloutShapeBtns, off ? '' : shape, off);
+      updateButtonGroup(calloutEndGroupEl, calloutEndBtns, off ? '' : end, off);
+      updateSwatchField(calloutColorInput, calloutColorFieldBox, calloutColorChit,
+        calloutColorPicker, getCalloutColorShown(ids), off);
+      updateOpacityControl(calloutOpacityInput,
+        getShownValue(ids, calloutOpacityField, {useDefault: true, defaultValue: 1}), off);
+      calloutWidthInput.setValue(width.value || '');
+      calloutWidthInput.setPlaceholder(width.mixed ? MIXED_TEXT : '');
+      calloutWidthInput.setDisabled(off || !enabled);
+      updateCalloutEndSizeControl(off || !enabled);
+      calloutGapInput.node().disabled = off || !enabled;
+      calloutGapInput.node().value = gap.value;
+      setMixedPlaceholder(calloutGapInput, gap.mixed);
+      return off;
+    }
+
+    // Inert with no marker to size. With nothing selected it describes the next
+    // label's marker, which the new-label style holds.
+    function updateCalloutEndSizeControl(off) {
+      var ids = getTargetIds().length > 0 ? getCalloutEndTargetIds() : [];
+      var noMarker = getTargetIds().length > 0 ? ids.length === 0 :
+        getCalloutEnd(labelModeIsOn() ? getNewLabelStyle(gui) : null) == 'none';
+      var shown = off || noMarker ? {value: '', mixed: false} : getCalloutEndSizeShown(ids);
+      calloutEndSizeInput.setValue(shown.value);
+      calloutEndSizeInput.setPlaceholder(shown.mixed ? MIXED_TEXT : '');
+      calloutEndSizeInput.setDisabled(off || noMarker);
+    }
+
+    function updateButtonGroup(groupEl, btns, selected, off) {
+      groupEl.classed('disabled', off);
+      Object.keys(btns).forEach(function(name) {
+        btns[name].classed('selected', name == selected);
+        setPanelButtonDisabled(btns[name], off);
+      });
+    }
+
+    // The colour a callout is drawn in, which is the text's unless it has its
+    // own -- so a label with red text shows red here, not the black that
+    // getCommonValueInfo() would supply for an unset callout-color.
+    function getCalloutColorShown(ids) {
+      return getShownRecordValues(ids, function(rec) {
+        return rec && (rec[calloutColorField] || rec[fillField]) || defaultLabelColor;
+      });
+    }
+
+    // getCommonValueInfo() reads 0 as unset, and a gap of 0 is a value.
+    function getCalloutGapShown(ids) {
+      return getShownRecordValues(ids, function(rec) {
+        var val = rec ? rec[calloutGapField] : null;
+        return val || val === 0 ? String(val) : '';
+      });
+    }
+
+    // {value, mixed} for a value worked out from each target's record, or from
+    // the new-label style when there is no target.
+    function getShownRecordValues(ids, fn) {
+      var table = getActiveTable();
+      var vals;
+      if (!controlsEnabled()) return {value: '', mixed: false};
+      if (ids.length === 0) {
+        return {value: fn(labelModeIsOn() ? getNewLabelStyle(gui) : null), mixed: false};
       }
+      vals = ids.map(function(id) {
+        return fn(table && table.getRecordAt(id));
+      });
+      return vals.every(function(val) { return val === vals[0]; }) ?
+        {value: vals[0], mixed: false} : {value: '', mixed: true};
     }
 
     function updateSavedStyleControls() {
@@ -17766,29 +18759,57 @@
     }
 
     function getCommonValue(ids, field, opts) {
+      return getCommonValueInfo(ids, field, opts).value;
+    }
+
+    // What the target labels say about one property:
+    //
+    //   value: the value they agree on, or '' if they do not
+    //   mixed: whether they disagree
+    //
+    // Both, because a control showing nothing has to be able to say which of the
+    // two kinds of nothing it means. Blank is also what an unset property looks
+    // like -- a label carries no letter-spacing until one is chosen -- and a
+    // field that reads the same either way leaves the user to guess whether the
+    // selection is uniform.
+    function getCommonValueInfo(ids, field, opts) {
       var table = getActiveTable();
       var records = table && table.getRecords();
       var value, val, hasValue;
-      if (ids.length === 0) return getNewLabelValue(field, opts);
-      if (!records) return '';
+      if (ids.length === 0) {
+        return {value: getNewLabelValue(field, opts), mixed: false};
+      }
+      if (!records) return {value: '', mixed: false};
       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 '';
-          }
+          // A property nobody set reads as what it renders as, where the caller
+          // says what that is: a label with font-size=12 and one with no
+          // font-size are drawn the same and agree. Without a default the two
+          // disagree, which is right for a property that means nothing when it
+          // is absent -- one label carrying inline css and one not are not in
+          // the same state.
+          val = opts && opts.useDefault ? opts.defaultValue : '';
         } else {
           hasValue = true;
         }
         if (i === 0) {
           value = val;
         } else if (val != value) {
-          return '';
+          return {value: '', mixed: true};
         }
       }
-      return hasValue || opts && opts.useDefault ? value : '';
+      return {
+        value: hasValue || opts && opts.useDefault ? value : '',
+        mixed: false
+      };
+    }
+
+    // The same, as a control shows it: nothing at all, and nothing to say about
+    // it, while there is no target to read.
+    function getShownValue(ids, field, opts) {
+      if (!controlsEnabled()) return {value: '', mixed: false};
+      return getCommonValueInfo(ids, field, opts);
     }
 
     // The alignment the labels are *drawn* with, rather than the one they carry.
@@ -17944,15 +18965,44 @@
       addStyleValue(style, labelAlignField, getSelectedAlignment());
       addStyleValue(style, cssField, cssInput.node().value.trim());
       addStyleValue(style, 'label-pos', getSelectedLabelPosition());
+      // A style saved without a halo carries no halo-width, so applying it
+      // leaves a halo alone rather than removing one; the same is true of icons.
+      if (getHaloState() == 'on') {
+        addStyleValue(style, haloWidthField, haloWidthInput.getValue());
+        addStyleValue(style, haloColorField, haloColorInput.node().value.trim());
+        addStyleValue(style, haloOpacityField, getOpacityBelowFull(haloOpacityInput));
+      }
       addStyleValue(style, iconField, icon);
       if (icon) {
         addStyleValue(style, iconSizeField, iconSizeInput.getValue());
         addStyleValue(style, iconColorField, iconColorInput.node().value.trim());
         addStyleValue(style, iconOpacityField, getIconOpacityToWrite());
       }
+      // A callout's shape and look, but not its geometry: a corner or an
+      // attachment point is placed for one label's surroundings, and means
+      // nothing on another.
+      if (getCalloutState() == 'on') {
+        addStyleValue(style, calloutField, getSelectedButton(calloutShapeBtns));
+        addStyleValue(style, calloutEndField, getSelectedButton(calloutEndBtns));
+        addStyleValue(style, calloutEndSizeField,
+          getCommonValue(getCalloutEndTargetIds(), calloutEndSizeField));
+        addStyleValue(style, calloutColorField,
+          getCommonValue(getCalloutTargetIds(), calloutColorField));
+        addStyleValue(style, calloutOpacityField, getOpacityBelowFull(calloutOpacityInput));
+        addStyleValue(style, calloutWidthField, calloutWidthInput.getValue());
+        addStyleValue(style, calloutGapField, getCommonValue(getCalloutTargetIds(), calloutGapField));
+      }
       return style;
     }
 
+    function getSelectedButton(btns) {
+      var out = '';
+      Object.keys(btns).forEach(function(name) {
+        if (btns[name].hasClass('selected')) out = name;
+      });
+      return out;
+    }
+
     // A saved style carries an opacity only if it has one to carry: saving at
     // 100% and applying it should not write a property the label did not have.
     function getOpacityBelowFull(input) {
@@ -18017,7 +19067,11 @@
       var ids = getTargetIds();
       var styles = [[iconField, iconName || '']];
       if (iconName) {
-        styles.push([iconSizeField, getNumericSize(ids, iconSizeField, defaultIconSize)]);
+        // The size the symbols in the selection already share, where they share
+        // one: a shape applied to a mixed selection gives the labels that had no
+        // symbol the size of the ones that did, rather than resetting them all to
+        // the default.
+        styles.push([iconSizeField, getNumericSize(getIconValueIds(), iconSizeField, defaultIconSize)]);
         // The symbol's own opacity goes on with it, because the label's opacity
         // is applied to both elements: without this, text set to 50% would give
         // a half-faded symbol while the Icon section showed it at 100%.
@@ -18029,25 +19083,21 @@
       applyStyleValues(styles);
     }
 
-    // Switching a symbol on or off changes which positions are legal, so the
-    // position moves with it -- in the same command, which makes the pair one
-    // undo step.
+    // Switching a symbol on moves a label sitting at the centre out from under
+    // it, in the same command, so that the pair is one undo step and the text
+    // is never briefly drawn over the symbol it just asked for.
     //
-    // On: the centre cell stops being the default and a label sitting there
-    // moves out from under its new symbol. Off: the grid locks back to the
-    // centre, so the position goes and the offsets go with it -- label-pos=c
-    // clears dx, dy and text-anchor by itself. That makes switching a symbol off
-    // destructive, since a hand-placed label loses its placement; being one
-    // undoable command is what makes that acceptable.
+    // Switching one off moves nothing. It used to put the label back to the
+    // centre, which threw away a placement the user had made by hand for the
+    // sake of an invariant -- that text with nothing at its anchor sits on the
+    // anchor -- that was never worth what it cost.
     //
     // Not for path labels, whose text runs along a curve: the commands ignore a
     // position given for one and warn about it, and a warning from switching a
     // symbol on would be about something the user did not ask for.
     function addIconPositionChange(styles, ids, iconOn) {
-      if (anyLabelIsOnAPath(ids)) return;
-      if (!iconOn) {
-        styles.push(['label-pos', 'c']);
-      } else if (everyTargetIsCentred(ids)) {
+      if (anyLabelIsOnAPath(ids) || !iconOn) return;
+      if (everyTargetIsCentred(ids)) {
         styles.push(['label-pos', labelPositionBesideIcon]);
       }
     }
@@ -18061,45 +19111,74 @@
     }
 
     function applyIconSize(value) {
-      applyStyleValues([[iconSizeField, value]]);
+      applyStyleValues([[iconSizeField, value]], getIconTargetIds());
     }
 
     function applyIconColor(color) {
-      applyStyleValues([[iconColorField, color]]);
+      applyStyleValues([[iconColorField, color]], getIconTargetIds());
     }
 
     function applyIconOpacity(value) {
-      applyStyleValues([[iconOpacityField, value]]);
+      applyStyleValues([[iconOpacityField, value]], getIconTargetIds());
     }
 
     function nudgeIconSize(delta) {
-      var ids = getTargetIds();
-      var size = getNumericSize(ids, iconSizeField, defaultIconSize);
+      var size = getNumericSize(getIconTargetIds(), iconSizeField, defaultIconSize);
       if (!controlsEnabled()) return;
       size = Math.max(1, size + delta);
       applyIconSize(size);
     }
 
+    // Whether the target labels have a symbol: 'on', 'off', or 'mixed' when only
+    // some of them do.
+    //
     // An icon-size or icon-color on a label with no symbol draws nothing, which
     // is why the shape, size and colour controls are inert until the toggle puts
     // a symbol there to style.
-    function everyTargetLacksAnIcon() {
+    function getIconState() {
       var ids = getTargetIds();
       var table = getActiveTable();
-      if (ids.length === 0) return !getNewLabelValue(iconField);
-      return ids.every(function(id) {
+      if (ids.length === 0) return getNewLabelValue(iconField) ? 'on' : 'off';
+      return getToggleState(ids.map(function(id) {
         var rec = table && table.getRecordAt(id);
-        return !(rec && rec[iconField]);
+        return !!(rec && rec[iconField]);
+      }));
+    }
+
+    // The labels an icon-size, icon-color or icon-opacity goes to: those in the
+    // target that have a symbol, which is all of them unless the switch is mixed.
+    // Writing one of these to a label with no icon would add a property that
+    // draws nothing and a column to the user's table.
+    //
+    // Empty for a target with no symbol anywhere, which is the state those
+    // controls are disabled in, and empty for "new labels", where the style is
+    // held by the tool rather than by any feature.
+    function getIconTargetIds() {
+      var ids = getTargetIds();
+      var table = getActiveTable();
+      return ids.filter(function(id) {
+        var rec = table && table.getRecordAt(id);
+        return !!(rec && rec[iconField]);
       });
     }
 
+    // The labels the section's controls *show* the values of, which is not quite
+    // the set they write to: with no symbol anywhere the fields go on showing
+    // what the target carries, greyed, because that is what the symbol comes back
+    // as when the switch is turned on. Narrowing there would show the values held
+    // for the next label instead of the ones stored on the selection.
+    function getIconValueIds() {
+      var ids = getIconTargetIds();
+      return ids.length > 0 ? ids : getTargetIds();
+    }
+
     function getIconOpacityToWrite() {
       var val = parseOpacityValue(iconOpacityInput.node().value);
       if (val !== null) return val;
       // The field reads blank while the section is off, so a symbol switched off
       // and on again takes back the fade still stored on the label rather than
       // being reset to full.
-      var stored = getCommonValue(getTargetIds(), iconOpacityField, {useDefault: true, defaultValue: 1});
+      var stored = getCommonValue(getIconValueIds(), iconOpacityField, {useDefault: true, defaultValue: 1});
       val = stored === '' ? 1 : Number(stored);
       return isFinite(val) ? val : 1;
     }
@@ -18126,7 +19205,9 @@
 
     function hideColorPicker() {
       colorPicker.hide();
+      haloColorPicker.hide();
       iconColorPicker.hide();
+      calloutColorPicker.hide();
     }
 
     function isFormElement(node) {
@@ -18152,7 +19233,10 @@
       }
     }
 
-    function applyStyleValues(styles) {
+    // idsArg: (optional) the labels to write to, when they are not the whole
+    //   target -- an icon property goes only to the labels that have a symbol.
+    function applyStyleValues(styles, idsArg) {
+      var ids = idsArg || getTargetIds();
       if (styles.length === 0) return;
       releaseFocus();
       // What the panel is set to is always what the next label gets, whether or
@@ -18165,8 +19249,8 @@
         // style, so it has to be redrawn to show the change -- it is the preview.
         refreshPendingLabel();
       }
-      if (getTargetIds().length > 0) {
-        applyStyleCommand(styles);
+      if (ids.length > 0) {
+        applyStyleCommand(styles, ids);
         return;
       }
       if (!labelModeIsOn()) return;
@@ -18178,9 +19262,8 @@
       if (session && session.id == -1 && session.refresh) session.refresh();
     }
 
-    function applyStyleCommand(styles) {
+    function applyStyleCommand(styles, ids) {
       var lyr = getActiveLayer();
-      var ids = getTargetIds();
       var parts = ['-style'];
       if (!gui.console || !lyr) return;
       styles.forEach(function(style) {
@@ -18189,6 +19272,7 @@
       if (ids.length < internal.getFeatureCount(lyr)) {
         parts.push('ids=' + ids.join(','));
       }
+      parts = parts.concat(getRewrapCommands(styles, ids, lyr));
       runGuiEditCommand(gui, parts.join(' '), {
         title: 'Label styles',
         onDone: function() {
@@ -18199,6 +19283,29 @@
       });
     }
 
+    // A text block's breaks are only right for the width and font they were
+    // found with, so a change to either rewraps it in the same command: one undo
+    // step, and no moment at which the block is drawn with its old lines in its
+    // new font. One -style per label, since each has text of its own.
+    function getRewrapCommands(styles, ids, lyr) {
+      var table = lyr.data;
+      var changes = {};
+      var out = [];
+      styles.forEach(function(style) { changes[style[0]] = style[1]; });
+      if (!table || !WRAP_FIELDS.some(function(name) { return name in changes; })) {
+        return out;
+      }
+      ids.forEach(function(id) {
+        var rec = table.getRecordAt(id);
+        var value = rec && rec['label-text'];
+        var wrapped;
+        if (!value || everyLabelIsOnAPath([id])) return;
+        wrapped = rewrapLabelValue(value, Object.assign({}, rec, changes));
+        if (wrapped !== value) out.push(getLabelTextCommand(wrapped, id, null));
+      });
+      return out;
+    }
+
     // The yellow halo, which belongs to the older label_style mode. The label
     // tool draws its selection as an outline instead (gui-label-selection.mjs),
     // because a halo says "this text is marked" where an outline says "this is
@@ -19394,6 +20501,9 @@
         self.setDefaultTarget([active.layer], active.dataset);
         gui.session.setTargetLayer(active.layer); // add -target command to target single layer
       }
+      // Before anything hears of the update, so that the map draws a layer that
+      // has just arrived along with the ones already showing.
+      showNewLayers(self.getLayers());
       if (flags.select) {
         self.dispatchEvent('select', active);
       }
@@ -19990,12 +21100,7 @@
     var defs = [];
     var symbols = lyr.shapes.map(function(shp, i) {
       var d = records[i];
-      var obj = shp && d ? renderSymbol(d, shp, view, defs, idPrefix, i) : null;
-      if (!obj) return null;
-      obj.properties.class = addClass(obj.properties.class, 'mapshaper-svg-symbol');
-      obj.properties.transform = getSvgSymbolTransform(shp[0], ext);
-      obj.properties['data-id'] = i;
-      return obj;
+      return shp && d ? renderLayerSymbol(d, shp, ext, view, defs, idPrefix, i) : null;
     }).filter(Boolean);
     var obj = internal.getEmptyLayerForSVG(lyr, {});
     // <defs> has to come first so the layer's own markup can reference it
@@ -20004,6 +21109,41 @@
     return internal.svg.stringify(obj);
   }
 
+  function renderLayerSymbol(d, shp, ext, view, defs, idPrefix, i) {
+    var obj = renderSymbol(d, shp, view, defs, idPrefix, i);
+    if (!obj) return null;
+    obj.properties.class = addClass(obj.properties.class, 'mapshaper-svg-symbol');
+    obj.properties.transform = getSvgSymbolTransform(shp[0], ext);
+    obj.properties['data-id'] = i;
+    return obj;
+  }
+
+  // Redraws one anchored label's symbol from @rec, which need not be its record:
+  // a drag previews its edit this way, and the command it commits then redraws
+  // the layer from the data. The node is rendered exactly as renderSymbols()
+  // renders it, so the hit test, the selection cue and the drag's own lookups
+  // find it as they found the one it replaces.
+  //
+  // Anchored labels only: a path label's baseline lives in the layer's <defs>,
+  // which this leaves alone.
+  // Returns the new node, or null if there was nothing to replace.
+  function replaceAnchoredSymbol(container, id, rec, shp, ext) {
+    var old = container && shp && !internal.svg.shapeIsPathLabel(shp, rec) ?
+      container.querySelector('.mapshaper-svg-symbol[data-id="' + id + '"]') : null;
+    var obj = old ? renderLayerSymbol(rec, shp, ext, null, null, '', id) : null;
+    var tmp, node;
+    if (!obj) return null;
+    tmp = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    tmp.innerHTML = internal.svg.stringify(obj);
+    node = tmp.firstElementChild;
+    if (!node) return null;
+    // Off-screen symbols are hidden by repositionSymbols(), which would not know
+    // to hide this one again until the map moved.
+    if (old.hasAttribute('display')) node.setAttribute('display', old.getAttribute('display'));
+    old.parentNode.replaceChild(node, old);
+    return node;
+  }
+
   // Markup for a label that is not in any layer yet: the one being typed into
   // before it has been created.
   //
@@ -20540,7 +21680,9 @@
     // What the click found in the selection as it stood before the click, which
     // the click itself is about to replace. The label tool reads this to tell a
     // click that selects a label from a click on the label that was already the
-    // whole selection -- its gesture for editing that label's text.
+    // whole selection -- its gesture for editing that label's text -- and a click
+    // off a selection from one on empty map, since a click on an unlabelled
+    // feature selects it before the tool hears of the click.
     //
     // An additive click never qualifies: shift-click means toggle, and it would
     // otherwise open a text session on the label it was removing.
@@ -20551,7 +21693,8 @@
       var id = hitData.ids.length > 0 ? hitData.ids[0] : -1;
       return {
         clicked_only_selection: id > -1 && !eventUsesAdditiveSelection(e) &&
-          selectionIds.length == 1 && selectionIds[0] === id
+          selectionIds.length == 1 && selectionIds[0] === id,
+        had_selection: selectionIds.length > 0
       };
     }
 
@@ -24015,32 +25158,248 @@
     return len > 0 ? geom.distance2D(x1, y1, p[0], p[1]) / len : 0;
   }
 
-  // Sliding a path label's text along its curve, and flipping it across.
+  // The handles on a selected anchored label, and what dragging each one
+  // writes, as pure functions of the label's record and the pointer.
   //
-  // Both are one gesture -- a drag on the glyphs, Illustrator's model -- and both
-  // are answered by the same question about the pointer: where it falls on the
-  // curve, and which side of it the pointer is on. The first gives an offset
-  // along the path, the second gives the side; crossing the curve mid-drag flips.
+  // - width: on a text block only, at the bottom corner of its column on the
+  //   side that is free to move -- the right for text that starts at its
+  //   anchor, the left for text that ends there, the right for centred text,
+  //   which grows both ways. Dragging it sets label-width. Point text has none:
+  //   a label stays the kind it was made as, and a handle that turned point
+  //   text into a block was a way to do that by accident.
+  // - via: the elbow's corner, or the point the curve passes through.
+  // - attach: where the line meets the text, which slides around the padded box.
+  // - gap: where the line stops short of the anchor.
   //
-  // The math is here, away from the tool, because it is worth testing on its own
-  // and needs nothing from the map: it works on a polyline, which the caller
-  // flattens the curve into at whatever tolerance suits the view.
+  // A corner rather than the middle of the free side for the width handle,
+  // because the middle of a side is where an elbow meets a one-line label, and
+  // the two handles would sit on top of each other.
   //
-  // See docs/development/label-tool-design.md.
+  // Everything is in the label's own space -- origin at the anchor, y down, px
+  // -- which is the space the callout is worked out in. See
+  // docs/development/text-annotation-design.md.
 
-  // Where a point falls on a polyline, or null if there is no polyline to fall
-  // on.
-  //
-  // Returns:
-  //   t:    position of the nearest point, as a fraction of arc length
-  //   side: which side of the path the point is on, as the sign of the cross
-  //         product of the segment direction with the offset from it -- 0 when
-  //         the point is exactly on the line
-  //   dist: how far the point is from the path
-  function projectOntoPolyline(points, p) {
-    var best = null;
-    var before = 0;
-    var total, i, seg;
+  // The narrowest a text block can be dragged to, px. Narrower than a character
+  // or two, and every character gets a line of its own.
+  var MIN_LABEL_WIDTH = 10;
+
+  // How far out from the anchor the line has to stop before its gap handle is
+  // drawn, in screen px. Nearer than that the handle sits on the anchor's own,
+  // and the anchor is the one that matters more.
+  var MIN_GAP_HANDLE = 6;
+
+  // rec:     the label's record
+  // textBox: the rendered text's bbox, {x, y, width, height}, or null
+  // opts:
+  //   symbolRadius: radius of the symbol at the anchor, which the default gap
+  //     clears
+  //   scale:   screen px per label px
+  //   padding: how far outside the text the selection box is drawn
+  // Returns {handles: [{kind, point}], column}, where column is the x-range
+  //   [xmin, xmax] a text block wraps within, or null for point text. The
+  //   width handle sits on the column's corner, not the text's.
+  function getAnchoredLabelHandles(rec, textBox, opts) {
+    var o = opts || {};
+    var handles = [];
+    var column = getLabelColumn(rec);
+    var shape = internal.svg.getLabelCalloutShape(rec, o.symbolRadius || 0);
+    var width = textBox && column ?
+      getWidthHandlePoint(rec, textBox, column, o.padding || 0) : null;
+    // Nearer-first matters only for ties, which go to the earlier handle: the
+    // callout's own handles are smaller and sit on the line, so they win.
+    if (shape) {
+      if (shape.via) handles.push({kind: 'via', point: shape.via});
+      handles.push({kind: 'attach', point: shape.attach});
+      if (length(shape.tip) * (o.scale || 1) >= MIN_GAP_HANDLE) {
+        handles.push({kind: 'gap', point: shape.tip});
+      }
+    }
+    if (width) handles.push({kind: 'width', point: width});
+    return {handles: handles, column: column};
+  }
+
+  // The x-range a text block's lines wrap within, from where its drawn anchor
+  // puts it, or null for a label with no width.
+  function getLabelColumn(rec) {
+    var w = Number(rec && rec['label-width']);
+    var drawn, anchor;
+    if (!(w > 0 && isFinite(w))) return null;
+    drawn = internal.svg.getDrawnLabelOffset(rec);
+    anchor = getDrawnAnchor(drawn);
+    if (anchor == 'end') return [drawn.dx - w, drawn.dx];
+    if (anchor == 'middle') return [drawn.dx - w / 2, drawn.dx + w / 2];
+    return [drawn.dx, drawn.dx + w];
+  }
+
+  // An anchor the record does not set is inherited from the layer's group,
+  // which is 'middle' -- see getLabelTextDefaults().
+  function getDrawnAnchor(drawn) {
+    return drawn && drawn['text-anchor'] || 'middle';
+  }
+
+  function getWidthHandlePoint(rec, box, column, pad) {
+    var anchor = getDrawnAnchor(internal.svg.getDrawnLabelOffset(rec));
+    var xmin = Math.min(column[0], box.x);
+    var xmax = Math.max(column[1], box.x + box.width);
+    var y = box.y + box.height + pad;
+    return anchor == 'end' ? [xmin - pad, y] : [xmax + pad, y];
+  }
+
+  // The label-width a drag on the width handle sets, in whole px.
+  // anchor: the drawn text-anchor; dx: the drawn dx, which is the edge (or for
+  //   centred text the middle) that stays put
+  // x:   where the handle has been dragged to
+  // pad: how far outside the text the handle is drawn
+  function getDraggedWidth(anchor, dx, x, pad) {
+    var w;
+    if (anchor == 'end') w = dx - x - pad;
+    else if (anchor == 'middle') w = 2 * (Math.abs(x - dx) - pad);
+    else w = x - pad - dx;
+    return Math.max(MIN_LABEL_WIDTH, Math.round(w));
+  }
+
+  // Where a dragged via point lands: on a line level with, or plumb with, the
+  // anchor or the attachment point @t when it comes within @tol of one. Those
+  // are the alignments that make an elbow's legs horizontal or vertical.
+  function snapCalloutVia(p, t, tol) {
+    return [snapTo(p[0], [0, t[0]], tol), snapTo(p[1], [0, t[1]], tol)];
+  }
+
+  // Where on the padded @box a dragged attachment point lands, as the
+  // [fx, fy] fractions callout-attach stores: on the edge nearest @p, and at the
+  // middle of that edge or at a corner when within @tol of one. A side also
+  // snaps to the first line's midline, where an automatic elbow meets it.
+  function getAttachFraction(box, p, tol) {
+    var w = box.xmax - box.xmin;
+    var h = box.ymax - box.ymin;
+    var x = clamp$3(p[0], box.xmin, box.xmax);
+    var y = clamp$3(p[1], box.ymin, box.ymax);
+    var edge = getNearestEdge(box, x, y);
+    var fx, fy, midline;
+    if (edge == 'left' || edge == 'right') {
+      fx = edge == 'left' ? 0 : 1;
+      midline = h > 0 && box.midline > box.ymin && box.midline < box.ymax ?
+        (box.midline - box.ymin) / h : 0.5;
+      fy = h > 0 ? snapTo((y - box.ymin) / h, [0, midline, 0.5, 1], tol / h) : 0.5;
+    } else {
+      fy = edge == 'top' ? 0 : 1;
+      fx = w > 0 ? snapTo((x - box.xmin) / w, [0, 0.5, 1], tol / w) : 0.5;
+    }
+    return [roundTo(fx, 1000), roundTo(fy, 1000)];
+  }
+
+  function getNearestEdge(box, x, y) {
+    var d = {
+      left: x - box.xmin,
+      right: box.xmax - x,
+      top: y - box.ymin,
+      bottom: box.ymax - y
+    };
+    return Object.keys(d).reduce(function(memo, key) {
+      return d[key] < d[memo] ? key : memo;
+    }, 'left');
+  }
+
+  // The callout-gap a drag on the gap handle sets: how far from the anchor the
+  // line now stops, px.
+  function getDraggedGap(p) {
+    return roundTo(length(p), 10);
+  }
+
+  // Where a callout's via point goes when its text moves, which takes the
+  // attachment point from @t0 to @t1.
+  //
+  // A curve keeps its shape: the via point is rotated and scaled about the
+  // anchor by whatever takes @t0 to @t1. An elbow keeps its corner in
+  // proportion across the span from anchor to text, and a leg that was level
+  // with the text (or plumb with it) stays so, since that is almost always what
+  // a corner was put there for.
+  //
+  // type: 'elbow' or 'curve'
+  function followCalloutVia(type, via, t0, t1) {
+    var d2, re, im;
+    if (type == 'curve') {
+      d2 = t0[0] * t0[0] + t0[1] * t0[1];
+      if (!(d2 > 0)) return via.slice();
+      re = (t1[0] * t0[0] + t1[1] * t0[1]) / d2;
+      im = (t1[1] * t0[0] - t1[0] * t0[1]) / d2;
+      return [via[0] * re - via[1] * im, via[0] * im + via[1] * re];
+    }
+    return [followElbowCoord(via[0], t0[0], t1[0]), followElbowCoord(via[1], t0[1], t1[1])];
+  }
+
+  // Close enough to count as level, in px: the values are stored in tenths.
+  var LEVEL_TOLERANCE = 0.05;
+
+  function followElbowCoord(v, t0, t1) {
+    if (Math.abs(v - t0) < LEVEL_TOLERANCE) return t1;
+    // Scaling by a span of almost nothing throws the corner miles away, so a
+    // text that started nearly in line with its anchor moves the corner with it
+    // instead.
+    if (Math.abs(t0) < 1) return v + t1 - t0;
+    return v * t1 / t0;
+  }
+
+  // 'x,y', as callout-via and callout-attach store a pair
+  function formatPointPair(p) {
+    return formatNumber$2(p[0]) + ',' + formatNumber$2(p[1]);
+  }
+
+  function formatNumber$2(n) {
+    var val = roundTo(n, 10);
+    return String(val === 0 ? 0 : val); // no "-0"
+  }
+
+  function snapTo(val, targets, tol) {
+    var best = val, bestDist = tol;
+    targets.forEach(function(t) {
+      var d = Math.abs(val - t);
+      if (d <= bestDist) {
+        bestDist = d;
+        best = t;
+      }
+    });
+    return best;
+  }
+
+  function clamp$3(val, min, max) {
+    return val < min ? min : val > max ? max : val;
+  }
+
+  function length(p) {
+    return Math.sqrt(p[0] * p[0] + p[1] * p[1]);
+  }
+
+  function roundTo(n, k) {
+    return Math.round(n * k) / k;
+  }
+
+  // Sliding a path label's text along its curve, and flipping it across.
+  //
+  // Both are one gesture -- a drag on the glyphs, Illustrator's model -- and both
+  // are answered by the same question about the pointer: where it falls on the
+  // curve, and which side of it the pointer is on. The first gives an offset
+  // along the path, the second gives the side; crossing the curve mid-drag flips.
+  //
+  // The math is here, away from the tool, because it is worth testing on its own
+  // and needs nothing from the map: it works on a polyline, which the caller
+  // flattens the curve into at whatever tolerance suits the view.
+  //
+  // See docs/development/label-tool-design.md.
+
+  // Where a point falls on a polyline, or null if there is no polyline to fall
+  // on.
+  //
+  // Returns:
+  //   t:    position of the nearest point, as a fraction of arc length
+  //   side: which side of the path the point is on, as the sign of the cross
+  //         product of the segment direction with the offset from it -- 0 when
+  //         the point is exactly on the line
+  //   dist: how far the point is from the path
+  function projectOntoPolyline(points, p) {
+    var best = null;
+    var before = 0;
+    var total, i, seg;
     if (!points || points.length < 2) return null;
     for (i = 1; i < points.length; i++) {
       seg = projectOntoSegment(points[i - 1], points[i], p);
@@ -24607,6 +25966,7 @@
         created: false,
         onClose: opts && opts.onClose || null,
         startText: decodeLabelText(rec['label-text']),
+        startBreaks: readSoftBreaks(rec['label-text']).breaks,
         nodes: null
       };
       startSession();
@@ -24651,6 +26011,7 @@
         created: true,
         onClose: opts.onClose || null,
         startText: '',
+        startBreaks: [],
         nodes: null
       };
       startSession();
@@ -24788,10 +26149,15 @@
     //   there is no session to abandon -- it was created before this one, perhaps
     //   by the script the file was built by.
     // - An existing label whose text changed has that text **saved**.
+    //
+    // A text block is saved with the soft breaks it was last drawn with, and is
+    // saved even when the typed text did not change if those breaks did: a font
+    // installed since, or a width set from the console, moves them.
     function commit(o) {
       var blank = textHasNoGlyphs(o.text);
+      var breaks = getBreaks(o);
       if (o.pending) {
-        if (!blank) o.pending.create(o.text);
+        if (!blank) o.pending.create(insertSoftBreaks(o.text, breaks));
         return;
       }
       if (blank) {
@@ -24799,12 +26165,23 @@
         removeLabel(o);
         return;
       }
-      if (o.text === o.startText) return;
-      runGuiEditCommand(gui, getLabelTextCommand(o.text, o.id, o.target.name), {
+      if (o.text === o.startText && sameSoftBreaks(breaks, o.startBreaks)) return;
+      runGuiEditCommand(gui, getLabelTextCommand(insertSoftBreaks(o.text, breaks),
+        o.id, o.target.name), {
         title: 'Label text'
       });
     }
 
+    // Where the session's text wraps, as offsets into it. Only an anchored label
+    // wraps: a path label's text runs along its curve on one line.
+    function getBreaks(o) {
+      var shp = o.pending ? o.pending.coords : o.target.shapes && o.target.shapes[o.id];
+      var rec;
+      if (!shp || shp.length > 1) return [];
+      rec = o.pending ? o.pending.getStyle() : getRecord(o.target, o.id);
+      return getSoftBreaks(o.text, rec);
+    }
+
     // Deletes the label's feature, geometry and all.
     //
     // -filter is the command for this: dropping a feature is not a label
@@ -24887,7 +26264,9 @@
     // when there is no text, exactly as it does for a committed empty label.
     function getPendingRecord(o) {
       var rec = Object.assign({}, o.pending.getStyle());
-      rec['label-text'] = encodeLabelText(o.text);
+      // With its soft breaks, so that what is aligned and what a callout meets
+      // is the block as wrapped
+      rec['label-text'] = encodeLabelText(insertSoftBreaks(o.text, getBreaks(o)));
       // No need to expand label-pos here, or to measure its text: the renderer
       // resolves the position and asks for the width it needs, so a pending
       // label is laid out by exactly the same code as a committed one.
@@ -24937,12 +26316,14 @@
     //     getRenderedLines() gives it one.
     function writeText(o) {
       var content = o.nodes.content;
+      var breaks = getBreaks(o);
+      var written = o.text + '\u0000' + breaks.join(',');
       var lines, i, tspan;
       // refresh() runs on every map render, which during a pan is every frame;
       // rebuilding text nodes that already say the right thing is pure waste
-      if (o.writtenTo === content && o.writtenText === o.text) return;
+      if (o.writtenTo === content && o.writtenText === written) return;
       o.writtenTo = content;
-      o.writtenText = o.text;
+      o.writtenText = written;
       o.nodes.text.setAttributeNS(XML_NS, 'space', 'preserve');
       while (content.firstChild) content.removeChild(content.firstChild);
       // A <textPath> runs along its baseline, so a second line would advance
@@ -24954,7 +26335,10 @@
         content.appendChild(document.createTextNode(getRenderedContent(o.text)));
         return;
       }
-      lines = getRenderedLines(o.text);
+      // A soft break keeps the space it broke at at the end of its line, where
+      // the rendered label drops it: here every typed character has to be one
+      // the caret can sit beside.
+      lines = getRenderedLines(o.text, breaks);
       content.appendChild(document.createTextNode(lines[0]));
       for (i = 1; i < lines.length; i++) {
         tspan = document.createElementNS(SVG_NS$3, 'tspan');
@@ -25040,6 +26424,7 @@
       if (pathId) {
         groups.back.appendChild(ghostPath(pathId));
       } else if (box) {
+        appendColumn(o, groups.back, box);
         groups.back.appendChild(rect(box, 'label-edit-box'));
       }
       getSelectionRects(provider, bands[0], bands[1], rendered).forEach(function(r) {
@@ -25050,6 +26435,22 @@
       syncTransform(o, groups);
     }
 
+    // A text block's column -- the width it wraps to -- as a faint dashed box
+    // behind the box around the text, which is usually narrower. Without it a
+    // text block just placed looks like any other label: a caret in a box the
+    // size of nothing.
+    function appendColumn(o, g, box) {
+      var rec = o.pending ? getPendingRecord(o) : getRecord(o.target, o.id);
+      var column = rec ? getLabelColumn(rec) : null;
+      if (!column) return;
+      g.appendChild(rect({
+        x: column[0] - BOX_PADDING$1,
+        y: box.y,
+        width: column[1] - column[0] + BOX_PADDING$1 * 2,
+        height: box.height
+      }, 'label-edit-column'));
+    }
+
     // Keeps clicks near the label inside the session instead of ending it.
     //
     // Glyph-precise hit testing is not enough for this: a curved label's bounding
@@ -25353,6 +26754,8 @@
   var BOX_PADDING = 3;
   var ANCHOR_RADIUS = 3.5;
   var KNOT_RADIUS = 3;
+  var WIDTH_HANDLE_SIZE = 6;
+  var GAP_HANDLE_RADIUS = 2.5;
 
   // How many labels get an outline before the cue falls back to the halo.
   //
@@ -25361,13 +26764,26 @@
   // layer instead of rebuilding it, and the cue moves with the map by wearing the
   // label's own transform -- but a select-all on a big layer would still pay it,
   // for an outline per label too small to tell apart anyway.
+  //
+  // Over the cap the selected labels wear a halo instead (.label-cue-marked),
+  // which is a class on the text node and costs no measurement. It says less
+  // than an outline -- no anchors, no knots, no box -- but a selection of
+  // hundreds is a group being restyled rather than objects being handled one by
+  // one, and the one thing it has to say is which labels are in it. This used to
+  // draw nothing at all, so selecting a whole layer left the map unchanged.
   var MAX_OUTLINES = 200;
 
   // getEditingId: returns the feature id of an open text editing session, or -1.
   //   A label being typed into draws its own box and does not want a second one.
-  function LabelSelection(gui, ext, hit, getEditingId) {
+  // getHandles: (optional) function(target, id, textBox) returning
+  //   {handles, column} for a selected anchored label, as from
+  //   getAnchoredLabelHandles(), or null. The tool decides when a label has
+  //   handles, and gives a text block's column from what is on screen, which
+  //   during a drag is not the data.
+  function LabelSelection(gui, ext, hit, getEditingId, getHandles) {
     var self = {};
     var groups = []; // one <g> per drawn cue, in the layer's markup
+    var marked = []; // text nodes wearing the halo, when there are too many to outline
     var drawn = null; // what those cues represent, so hover does not redraw them
     var on = false;
     var tetherId = -1; // the label whose text is being dragged off its anchor
@@ -25397,9 +26813,11 @@
     // markup and takes the old cues with it.
     self.refresh = function(force) {
       var target = hit.getHitTarget();
-      var ids = on ? getDrawableIds() : [];
-      var hoverId = on ? getHoverId(ids) : -1;
-      var key = ids.join(',') + '/' + hoverId + '/' + tetherId;
+      var selected = on ? hit.getSelectionIds() : [];
+      var tooMany = selected.length > MAX_OUTLINES;
+      var ids = tooMany ? [] : selected;
+      var hoverId = on ? getHoverId(selected) : -1;
+      var key = selected.join(',') + '/' + hoverId + '/' + tetherId;
       // Hover fires on every pointer move, and most of them change nothing here.
       if (!force && drawn === key) return;
       clearAll();
@@ -25414,6 +26832,9 @@
         // would offer handles that cannot be grabbed.
         draw(target, id, 'label-cue-selected', true);
       });
+      // Too many to outline: a halo on the glyphs instead, which is the whole cue
+      // for those labels.
+      if (tooMany) markAll(target, selected);
     };
 
     // The label under the pointer, when showing it would say something: not one
@@ -25425,10 +26846,23 @@
       return id;
     }
 
-    // The selected labels, or none if there are too many to outline usefully.
-    function getDrawableIds() {
-      var ids = hit.getSelectionIds();
-      return ids.length > MAX_OUTLINES ? [] : ids;
+    // Puts the halo on each selected label's glyphs. A class of its own rather
+    // than the label_style mode's yellow one: that class is cleared on every
+    // model update while the label tool is on, so the two would fight.
+    function markAll(target, ids) {
+      ids.forEach(function(id) {
+        var nodes = findNodes(target, id);
+        if (!nodes) return;
+        nodes.text.classList.add('label-cue-marked');
+        marked.push(nodes.text);
+      });
+    }
+
+    function clearMarks() {
+      marked.forEach(function(node) {
+        node.classList.remove('label-cue-marked');
+      });
+      marked = [];
     }
 
     function draw(target, id, className, withHandles) {
@@ -25441,7 +26875,7 @@
         g.appendChild(curve(nodes.pathId));
         if (withHandles) appendKnotHandles(g, target, id);
       } else {
-        appendAnchoredCue(g, nodes, rec, id);
+        appendAnchoredCue(g, nodes, rec, id, withHandles ? target : null);
       }
       groups.push(g);
     }
@@ -25457,14 +26891,76 @@
     // ring inside it would. What is left -- offset text with nothing at its
     // anchor -- is the case where the ring is the only thing that says what the
     // text hangs off.
-    function appendAnchoredCue(g, nodes, rec, id) {
+    //
+    // A selected label's handles go in a group of their own, after the symbol
+    // rather than before it: they sit on the callout and on the edge of the box,
+    // and painted beneath the line they would be hidden by it.
+    //
+    // @handleTarget: the layer, when the label is selected and so may have
+    //   handles, or null
+    //
+    // A selected text block also shows its column, the width it wraps to, as a
+    // fainter dashed box behind the solid one. The solid box is the label itself
+    // -- the wrapped text, which is what a callout meets -- and is usually
+    // narrower than its column; the column is what the width handle drags.
+    function appendAnchoredCue(g, nodes, rec, id, handleTarget) {
       var box = measure(nodes.content);
+      var o = box && handleTarget && getHandles ? getHandles(handleTarget, id, box) : null;
+      var column = o ? o.column : null;
       if (!box) return;
+      if (column) g.appendChild(columnRect(box, column, BOX_PADDING));
       if (box.width || box.height) g.appendChild(rect(box, BOX_PADDING));
       if (id === tetherId) g.appendChild(tether(box));
       if (!internal.featureHasSvgSymbol(rec) && !boxHoldsOrigin(box)) {
         g.appendChild(anchorMarker());
       }
+      if (o && o.handles.length > 0) appendHandles(nodes, o.handles);
+    }
+
+    // The column's own extent across, and the text's up and down: a column has
+    // no height of its own.
+    function columnRect(box, column, pad) {
+      var el = rect({x: column[0], y: box.y, width: column[1] - column[0],
+        height: box.height}, pad);
+      el.setAttribute('class', 'label-cue-column');
+      return el;
+    }
+
+    function appendHandles(nodes, handles) {
+      var g = document.createElementNS(SVG_NS$2, 'g');
+      var transform = nodes.symbol.getAttribute('transform');
+      var display = nodes.symbol.getAttribute('display');
+      g.setAttribute('class', 'label-cue label-cue-handles');
+      if (transform) g.setAttribute('transform', transform);
+      if (display) g.setAttribute('display', display);
+      handles.forEach(function(h) {
+        g.appendChild(labelHandle(h));
+      });
+      nodes.symbol.parentNode.insertBefore(g, nodes.symbol.nextSibling);
+      groups.push(g);
+    }
+
+    // A square for the width handle, which is a corner of the box, and a ring
+    // for the callout's, which are points on its line -- filled for the end
+    // that meets the text, so that the two ends of the line read differently.
+    function labelHandle(h) {
+      var p = h.point;
+      var el;
+      if (h.kind == 'width') {
+        el = document.createElementNS(SVG_NS$2, 'rect');
+        el.setAttribute('x', p[0] - WIDTH_HANDLE_SIZE / 2);
+        el.setAttribute('y', p[1] - WIDTH_HANDLE_SIZE / 2);
+        el.setAttribute('width', WIDTH_HANDLE_SIZE);
+        el.setAttribute('height', WIDTH_HANDLE_SIZE);
+      } else {
+        el = document.createElementNS(SVG_NS$2, 'circle');
+        el.setAttribute('cx', p[0]);
+        el.setAttribute('cy', p[1]);
+        el.setAttribute('r', h.kind == 'gap' ? GAP_HANDLE_RADIUS : KNOT_RADIUS);
+      }
+      el.setAttribute('class', 'label-cue-handle label-cue-' + h.kind);
+      el.setAttribute('data-handle', h.kind);
+      return el;
     }
 
     // Whether the label's anchor point is inside the box drawn around its text.
@@ -25502,7 +26998,8 @@
       var content;
       if (!text) return null;
       content = text.querySelector('textPath') || text;
-      return {symbol: symbol, content: content, pathId: getPathId(content)};
+      return {symbol: symbol, text: text, content: content,
+        pathId: getPathId(content)};
     }
 
     // The id of the baseline a path label is laid along, or null for an anchored
@@ -25599,12 +27096,183 @@
         if (g.parentNode) g.parentNode.removeChild(g);
       });
       groups = [];
+      clearMarks();
       drawn = null;
     }
 
     return self;
   }
 
+  // Selecting a group of labels by pointing at one of them: every label on the
+  // layer, or the ones that share its text style, its colour or its symbol.
+  //
+  // Styling a group is something the panel could already do -- a control shows
+  // nothing when the selected labels disagree, and writes to all of them -- but
+  // there was no way to select more than a shift-click's worth. These are the
+  // predicates the context menu offers, as pure functions so that they can be
+  // tested without a map.
+  //
+  // See docs/development/label-tool-design.md.
+
+  // The properties that make up "the same text style": how the glyphs are drawn,
+  // and nothing about where the text sits.
+  //
+  // Alignment, position, offsets and a path label's start offset are left out
+  // deliberately. They are what the panel's other sections edit, and two labels
+  // in the same font at the same size are in the same text style whether one of
+  // them is centred and the other hangs north-east of its anchor -- which is
+  // usually the difference between a label placed by hand and one that was not.
+  //
+  // css and class are in, because either can carry anything the properties above
+  // carry and more: two labels are not in the same text style if one of them is
+  // wearing a stylesheet the other is not.
+  var TEXT_STYLE_FIELDS = [
+    'font-family', 'font-size', 'font-style', 'font-weight', 'font-stretch',
+    'letter-spacing', 'line-height', 'css', 'class'
+  ];
+
+  // The colour of the text, and not its opacity: the item says colour, and a
+  // label faded to 50% is the same colour as one that is not.
+  var FILL_FIELDS = ['fill'];
+
+  // The shape of the symbol, and not its size or colour, for the same reason.
+  var ICON_FIELDS = ['icon'];
+
+  // What a property means when a label does not carry it.
+  //
+  // Compared after this substitution, so that a label with font-size=12 and one
+  // with no font-size match: they render identically, and the panel already
+  // treats them as agreeing. Without it the commonest pair of labels on a map --
+  // one the panel has touched and one it has not -- would count as different
+  // text styles while looking the same.
+  //
+  // font-family is deliberately absent. An unset font is whatever the browser
+  // resolves sans-serif to, which differs by machine and is a real difference
+  // from a font the user named, so an unset font is its own value and matches
+  // only another unset one. css, class and icon are absent because they have no
+  // default: not having one is not the same as having a particular one.
+  var STYLE_DEFAULTS = {
+    'font-size': 12,
+    'font-style': 'normal',
+    'font-weight': '400',
+    'letter-spacing': 0,
+    fill: '#000000'
+  };
+
+  // The items the "select" section offers, in menu order.
+  //
+  // needs: a property the pointed-at label must carry for the item to be worth
+  //   offering. "Same icon" on a label with no symbol would select every label
+  //   that has none, which is a question nobody asked and which "all labels"
+  //   nearly answers anyway.
+  // always: offered whatever it matches, rather than only when it says something
+  //   the other items do not. See getLabelSelectActions().
+  var SELECT_KINDS = [
+    {name: 'all', label: 'all labels'},
+    {name: 'text-style', label: 'same text style', fields: TEXT_STYLE_FIELDS,
+      always: true},
+    {name: 'fill', label: 'same fill color', fields: FILL_FIELDS},
+    {name: 'icon', label: 'same icon', fields: ICON_FIELDS, needs: 'icon'}
+  ];
+
+  // Every label on the layer, in ascending id order.
+  //
+  // Not every feature: a labels layer can hold plain points as well -- a dots
+  // layer given label text by the point panel is one -- and a point is not
+  // something the label panel can style.
+  //
+  //   records: the layer's data records, or null
+  //   isLabel: (rec) -> whether a record is a label at all. Injected rather than
+  //     imported so that this module stays testable without the GUI's internals;
+  //     the caller passes internal.svg.featureIsLabel.
+  function getAllLabelIds(records, isLabel) {
+    var ids = [];
+    var i;
+    for (i = 0; records && i < records.length; i++) {
+      if (isLabel(records[i])) ids.push(i);
+    }
+    return ids;
+  }
+
+  // The labels that match label @id on @kind, in ascending id order.
+  //
+  //   records: the layer's data records, or null
+  //   id:      the label the predicate is taken from, which is always in the result
+  //   kind:    'all', 'text-style', 'fill' or 'icon'
+  //   isLabel: as getAllLabelIds()
+  function getMatchingLabelIds(records, id, kind, isLabel) {
+    var defn = findKind(kind);
+    var rec = records && records[id];
+    if (!defn || !rec || !isLabel(rec)) return [];
+    return getAllLabelIds(records, isLabel).filter(function(i) {
+      return !defn.fields || fieldsMatch(records[i], rec, defn.fields);
+    });
+  }
+
+  // The menu items worth offering for a right-click on label @id, as
+  // [{name, label, ids}, ...].
+  //
+  // "All labels" and "same text style" are always offered, the first because it
+  // asks nothing of the layer and the second because it is the item this section
+  // is mostly for: styling the type of a map as a group. Offering it only when it
+  // differs from "all labels" would make it come and go between one right-click
+  // and the next, and its count is worth reading either way -- "same text style
+  // 40" over a layer of 40 says the labels are uniform, which is a fact about the
+  // layer and not a reason to hide the item.
+  //
+  // The rest are dropped rather than shown and disabled when:
+  //
+  // - They would select the label already pointed at and nothing else, which
+  //   would look like a way of narrowing the selection to one label -- a plain
+  //   click on that label already is one.
+  // - They match every label on the layer, which "all labels" says more plainly.
+  // A layer with one label on it gets no section at all: every item there would
+  // select the label that was right-clicked, which clicking it already does.
+  function getLabelSelectActions(records, id, isLabel) {
+    var rec = records && records[id];
+    var all = getMatchingLabelIds(records, id, 'all', isLabel);
+    var out = [];
+    if (!rec || all.length < 2) return out;
+    SELECT_KINDS.forEach(function(defn) {
+      var always = defn.name == 'all' || defn.always;
+      var ids;
+      if (defn.needs && !hasValue(rec[defn.needs])) return;
+      ids = defn.name == 'all' ? all :
+        getMatchingLabelIds(records, id, defn.name, isLabel);
+      if (!always && (ids.length < 2 || ids.length === all.length)) return;
+      out.push({name: defn.name, label: defn.label, ids: ids});
+    });
+    return out;
+  }
+
+  function findKind(name) {
+    var found = null;
+    SELECT_KINDS.forEach(function(defn) {
+      if (defn.name == name) found = defn;
+    });
+    return found;
+  }
+
+  function fieldsMatch(a, b, fields) {
+    return fields.every(function(field) {
+      return styleValue(a, field) === styleValue(b, field);
+    });
+  }
+
+  // A property as it is compared: what the label carries, or what it means to
+  // carry nothing, as a string so that 12 and '12' are one value.
+  function styleValue(rec, field) {
+    var val = rec ? rec[field] : null;
+    if (!hasValue(val)) {
+      val = field in STYLE_DEFAULTS ? STYLE_DEFAULTS[field] : '';
+    }
+    return String(val);
+  }
+
+  function hasValue(val) {
+    return !(val === undefined || val === null || val === '');
+  }
+
   // State of a label curve being drawn, and the operations the curvature tool
   // performs on it.
   //
@@ -25759,8 +27427,17 @@
   // resolve and still leaves a short polyline to walk per mouse move.
   var FLATTEN_PX = 0.5;
 
+  // How near a dragged handle has to come to an alignment to snap to it, px on
+  // screen
+  var SNAP_PX = 5;
+
+  // The width a text block placed with a click wraps to, px, when the panel does
+  // not set one
+  var DEFAULT_BLOCK_WIDTH = 160;
+
   function initLabelTool(gui, ext, hit) {
-    // which kind of label a click creates: null, 'anchor' or 'path'
+    // which kind of label a click creates: null, 'anchor', 'block' or 'path'.
+    // A block is an anchored label with a wrap width.
     var armed = null;
     var curve = createCurveState();
     // The pointer's position while a curve is being drawn, in display
@@ -25783,11 +27460,27 @@
     // coordinates. A drag on a label's text starts from here rather than from
     // the dragstart event -- see beginTextDrag().
     var hoverPoint = null;
+    // A drag on one of a selected anchored label's own handles -- its width or
+    // its callout -- or null. See gui-label-handles.mjs.
+    var handleDrag = null;
+    // The handles last drawn, {id, handles}, which is what the pointer is tested
+    // against: they are worked out when the cue is drawn rather than on every
+    // mouse move, since placing them measures the label.
+    var shownHandles = null;
+    // A drag on the map that is setting a new text block's width, or null
+    var blockDrag = null;
+    // A drag that has been released and whose command has not redrawn the map
+    // yet, or null. Its preview is still what is on screen, so the cue goes on
+    // being drawn from it rather than from the data, which has not changed yet.
+    var releasedDrag = null;
+    // The mouseup that ended the last block drag, or null. A short one is
+    // followed by a click from the same mouseup, which it has already handled.
+    var blockRelease = null;
     var editor = new LabelEditor(gui, ext);
     var selection = new LabelSelection(gui, ext, hit, function() {
       return editor.isOpen() ? editor.getFeatureId() : -1;
-    });
-    var toolbar, anchorBtn, pathBtn, alert;
+    }, getLabelHandles);
+    var toolbar, anchorBtn, blockBtn, pathBtn, alert;
 
     gui.addMode('label_tool', turnOn, turnOff);
 
@@ -25859,6 +27552,11 @@
       hideInstructions();
       drag = null;
       textDrag = null;
+      handleDrag = null;
+      releasedDrag = null;
+      blockRelease = null;
+      shownHandles = null;
+      clearBlockDrag();
       hoverHandle = null;
       hoverTextId = -1;
       hoverPoint = null;
@@ -25866,6 +27564,8 @@
       // go back whether or not it was a crosshair.
       gui.container.findChild('.map-layers').classed('label-tool', false);
       gui.container.findChild('.map-layers').classed('label-handle', false);
+      gui.container.findChild('.map-layers').classed('label-text-drag', false);
+      gui.container.findChild('.map-layers').classed('label-resize', false);
       if (toolbar) toolbar.hide();
       if (gui.interaction.getMode() == 'label') {
         // the mode change came from somewhere other than the mode menu
@@ -25891,6 +27591,14 @@
       }).on('click', function() {
         setArmed(armed == 'anchor' ? null : 'anchor');
       });
+      // A tool of its own, although a text block is only a label with a width,
+      // because otherwise the width is something found by dragging a handle on a
+      // label that already exists -- and nothing on screen says it is there.
+      blockBtn = toolbar.addButton('#text-block-icon', {
+        tooltip: 'Add a text block'
+      }).on('click', function() {
+        setArmed(armed == 'block' ? null : 'block');
+      });
       pathBtn = toolbar.addButton('#curved-text-icon', {
         tooltip: 'Add a label along a path'
       }).on('click', function() {
@@ -25910,6 +27618,7 @@
     function updateButtons() {
       if (!toolbar) return;
       anchorBtn.setSelected(armed == 'anchor');
+      blockBtn.setSelected(armed == 'block');
       pathBtn.setSelected(armed == 'path');
       updateCursor();
     }
@@ -25923,22 +27632,34 @@
     // wrong even with a tool armed.
     function updateCursor() {
       var el = gui.container.findChild('.map-layers');
-      // A selected path label's glyphs are a handle as much as its knots are: a
-      // drag there slides the text along its curve.
-      var onHandle = active() && (!!hoverHandle || hoverTextId > -1);
-      var placing = active() && !!armed && hit.getHitId() == -1 && !onHandle;
+      // The text and the control points get different cursors, because they are
+      // often close together -- a callout's attachment point is on the text's
+      // box, and a path label's knots sit under its glyphs -- and a drag on one
+      // does something quite different from a drag on the other.
+      var onText = active() && hoverTextId > -1;
+      var onHandle = active() && !onText && !!hoverHandle;
+      var resizing = onHandle && hoverHandle.kind == 'width';
+      var placing = active() && !!armed && hit.getHitId() == -1 && !onText && !onHandle;
       el.classed('label-tool', placing);
-      el.classed('label-handle', onHandle);
+      el.classed('label-text-drag', onText);
+      el.classed('label-handle', onHandle && !resizing);
+      el.classed('label-resize', resizing);
     }
 
     function showInstructions() {
+      var msg;
       hideInstructions();
       if (!armed) return;
-      alert = showPopupAlert(armed == 'anchor' ?
-        'Click on the map to place a label.' :
-        'Click to draw a curved path. Type Esc or double-click ' +
-        'to finish. Backspace removes the last point.',
-        null, {non_blocking: true, max_width: '330px'});
+      if (armed == 'anchor') {
+        msg = 'Click on the map to place a label.';
+      } else if (armed == 'block') {
+        msg = 'Click on the map to place a text block, or drag across it ' +
+          'to set the width the text wraps to.';
+      } else {
+        msg = 'Click to draw a curved path. Type Esc or double-click ' +
+          'to finish. Backspace removes the last point.';
+      }
+      alert = showPopupAlert(msg, null, {non_blocking: true, max_width: '330px'});
     }
 
     function hideInstructions() {
@@ -25954,10 +27675,20 @@
     // editing acts on exactly one and has nothing to do with the panel.
     hit.on('click', function(e) {
       if (!active()) return;
+      // A press that moved a little is both a block drag and a click, released
+      // by the same mouseup; the drag has answered it already.
+      if (blockRelease && getDomEvent(e) == blockRelease) {
+        blockRelease = null;
+        return;
+      }
       if (armed == 'path' && drawingCurve()) {
         extendCurve(pixToMapCoords(e.x, e.y));
         return;
       }
+      // A label's handles sit on its callout and its box, which the hit test
+      // counts as the label, and a second click there would open its text. A
+      // click on a handle is half of the double-click that resets it.
+      if (hoverHandle && hoverHandle.kind && !editor.isOpen()) return;
       // A click away from the text finishes the label being typed into, and does
       // nothing else: leaving one label is its own gesture, and placing the next
       // one takes another click. This is also what makes one undo step cover one
@@ -25982,10 +27713,18 @@
       if (e.id > -1 && clickLabel(e.id, e)) return;
       if (editor.isOpen()) return; // a click within the text moved the caret
       // Nothing was hit. Any selection is now over with, and the click means
-      // whatever the armed tool says it means.
+      // whatever the armed tool says it means -- except with the text block
+      // tool, where clicking off a selected block is how it is let go of, and
+      // a block dropped at the same time would be one more thing to delete.
+      if (armed == 'block' && e.had_selection) {
+        deselectLabels();
+        return;
+      }
       deselectLabels();
       if (armed == 'anchor') {
-        beginLabel([pixToMapCoords(e.x, e.y)], []);
+        beginLabel([pixToMapCoords(e.x, e.y)]);
+      } else if (armed == 'block') {
+        beginLabel([pixToMapCoords(e.x, e.y)], getBlockStyle);
       } else if (armed == 'path') {
         extendCurve(pixToMapCoords(e.x, e.y));
       }
@@ -26004,6 +27743,7 @@
       if (!active()) return;
       id = getRightClickedLabel(e);
       if (target && id > -1) {
+        e.selectActions = getSelectActions(target, id);
         e.deleteFeature = getDeleteAction(target, id);
         // Nobody guesses that text is dragged across its own curve, and there is
         // no bracket drawn to suggest it, so the gesture has a second way in.
@@ -26032,6 +27772,43 @@
       return -1;
     }
 
+    // The "select" items for a right-click on label @id: the labels that share
+    // something with it, so that a style can be changed across a group without
+    // shift-clicking every one of it.
+    //
+    // The predicate comes from the label pointed at rather than from whatever
+    // happens to be selected -- a right-click deliberately leaves the selection
+    // alone -- and running an item replaces the selection with what it matched.
+    function getSelectActions(target, id) {
+      var records = target.data ? target.data.getRecords() : null;
+      return getLabelSelectActions(records, id, internal.svg.featureIsLabel)
+        .map(function(action) {
+          return {
+            label: action.label,
+            count: action.ids.length,
+            run: function() { selectLabels(action.ids); }
+          };
+        });
+    }
+
+    // A label being typed into is not a label being styled, so a group selection
+    // ends the session -- which saves its text, as clicking away would. Closing
+    // first and selecting second, because closing puts the label it was editing
+    // back in the selection when the selection is empty.
+    function selectLabels(ids) {
+      if (editor.isOpen()) editor.close();
+      hit.setSelectionIds(ids);
+    }
+
+    // Cmd/Ctrl-A: the keyboard way to the menu's "all labels", for the commonest
+    // of the group selections -- restyling a layer's labels as one.
+    function selectAllLabels() {
+      var target = hit.getHitTarget();
+      var records = target && target.data ? target.data.getRecords() : null;
+      var ids = getAllLabelIds(records, internal.svg.featureIsLabel);
+      if (ids.length > 0) selectLabels(ids);
+    }
+
     // Deleting a label ends whatever was being done to it first: its text
     // session would otherwise write the text back to an id that now belongs to
     // the label that moved up into the gap, and the same shift is why the
@@ -26145,15 +27922,19 @@
       return editor.ownsNode(getEventNode(e));
     }
 
-    // The DOM node a hit event came from. A hit event's originalEvent is the
-    // mouse event, whose own originalEvent is the DOM one, so the node is two
-    // levels down.
+    // The DOM node a hit event came from.
     function getEventNode(e) {
-      var mouseEvt = e && e.originalEvent;
-      var domEvt = mouseEvt && mouseEvt.originalEvent || mouseEvt;
+      var domEvt = getDomEvent(e);
       return domEvt && domEvt.target || null;
     }
 
+    // The DOM event behind a hit event: its originalEvent is the mouse event,
+    // whose own originalEvent is the DOM one.
+    function getDomEvent(e) {
+      var mouseEvt = e && e.originalEvent;
+      return mouseEvt && mouseEvt.originalEvent || mouseEvt || null;
+    }
+
     function deselectLabels() {
       if (hit.getSelectionIds().length > 0) hit.clearSelection();
     }
@@ -26188,6 +27969,7 @@
     // find its nodes again and write the text being edited back into them, and
     // the selection cues have to be drawn onto the new markup.
     gui.on('map_rendered', function(e) {
+      if (!e || e.action != 'hover') releasedDrag = null;
       editor.refresh();
       // The cues went with the old markup, so they have to be drawn again --
       // except after a 'hover' draw, which leaves the SVG alone. That draw now
@@ -26242,7 +28024,14 @@
         if (beginTextDrag(e)) consumeDrag(e);
         return;
       }
-      if (!hoverHandle) return;
+      if (!hoverHandle) {
+        if (armed == 'block' && beginBlockDrag(e)) consumeDrag(e);
+        return;
+      }
+      if (hoverHandle.kind) {
+        if (beginHandleDrag(hoverHandle)) consumeDrag(e);
+        return;
+      }
       beginKnotDrag(hoverHandle);
       consumeDrag(e);
     });
@@ -26277,6 +28066,16 @@
         updateTextDrag(e);
         return;
       }
+      if (handleDrag) {
+        consumeDrag(e);
+        updateHandleDrag(e);
+        return;
+      }
+      if (blockDrag) {
+        consumeDrag(e);
+        updateBlockDrag(e);
+        return;
+      }
       if (!drag) return;
       consumeDrag(e);
       shp = getDisplayShapes(drag.target)[drag.id];
@@ -26299,6 +28098,7 @@
       if (textDrag) {
         o = textDrag;
         textDrag = null;
+        if (o.moved) releasedDrag = o;
         consumeDrag(e);
         selection.setTether(-1);
         // A press that never moved is a click, which the click handler has
@@ -26306,6 +28106,22 @@
         if (o.moved) commitTextDrag(o);
         return;
       }
+      if (handleDrag) {
+        o = handleDrag;
+        handleDrag = null;
+        if (o.values) releasedDrag = o;
+        consumeDrag(e);
+        if (o.values) commitHandleDrag(o);
+        return;
+      }
+      if (blockDrag) {
+        o = blockDrag;
+        clearBlockDrag();
+        blockRelease = getDomEvent(e);
+        consumeDrag(e);
+        commitBlockDrag(o);
+        return;
+      }
       if (!o) return;
       consumeDrag(e);
       drag = null;
@@ -26340,6 +28156,301 @@
       });
     }
 
+    // The handles a selected anchored label draws, for LabelSelection: only on a
+    // label that is the whole selection, since a handle edits one label, and
+    // not while anything else is going on. Kept as shownHandles for the hover
+    // test, which then tests the pointer against exactly what is on screen.
+    //
+    // During a drag they are worked out from the record being previewed, so that
+    // the handle follows the pointer and the others follow the line.
+    //
+    // Every selected text block gets its column, handles or not, and that too
+    // comes from the preview: the text moves by its attributes during an offset
+    // drag, and a column read from the data stayed where the text had been.
+    function getLabelHandles(target, id, textBox) {
+      var ids = hit.getSelectionIds();
+      var rec = getPreviewRecord(id) || getRecord(target, id);
+      var o;
+      if (!rec || isPathLabel(target, id)) return null;
+      if (!active() || editor.isOpen() || drawingCurve() || textDrag ||
+          ids.length != 1 || ids[0] != id) {
+        shownHandles = null;
+        return {handles: [], column: getLabelColumn(rec)};
+      }
+      o = getAnchoredLabelHandles(rec, textBox, {
+        symbolRadius: internal.svg.getAnchorSymbolRadius(rec),
+        scale: ext.getSymbolScale() || 1,
+        padding: BOX_PADDING
+      });
+      shownHandles = {id: id, target: target, handles: o.handles};
+      return o;
+    }
+
+    function getPreviewRecord(id) {
+      var o = handleDrag || textDrag || releasedDrag;
+      return o && o.id == id && o.previewRec || null;
+    }
+
+    // The label handle nearest the pointer, within reach of it, or null.
+    // Returns a handle shaped like findNearestKnot()'s, plus its kind, its point
+    // in label space and the pointer's, and its distance in screen px.
+    function findLabelHandle(target, e) {
+      var o = shownHandles;
+      var ids = hit.getSelectionIds();
+      var scale = ext.getSymbolScale() || 1;
+      var shp, q, best = null;
+      if (!o || o.target != target || ids.length != 1 || ids[0] != o.id) return null;
+      shp = getDisplayShapes(target)[o.id];
+      if (!shp) return null;
+      q = getLabelSpacePoint(shp[0], e);
+      o.handles.forEach(function(h) {
+        var dist = Math.sqrt(Math.pow(h.point[0] - q.x, 2) +
+          Math.pow(h.point[1] - q.y, 2)) * scale;
+        if (dist <= KNOT_HIT_THRESHOLD && (!best || dist < best.dist)) {
+          best = {id: o.id, kind: h.kind, point: h.point, pointer: [q.x, q.y], dist: dist};
+        }
+      });
+      return best;
+    }
+
+    function beginHandleDrag(handle) {
+      var target = hit.getHitTarget();
+      var rec = getRecord(target, handle.id);
+      var shp = getDisplayShapes(target)[handle.id];
+      var drawn, shape;
+      if (!rec || !shp) return false;
+      drawn = internal.svg.getDrawnLabelOffset(rec);
+      shape = internal.svg.getLabelCalloutShape(rec, internal.svg.getAnchorSymbolRadius(rec));
+      if (handle.kind != 'width' && !shape) return false;
+      handleDrag = {
+        kind: handle.kind,
+        id: handle.id,
+        target: target,
+        rec: rec,
+        anchor: shp[0],
+        // Where within the handle it was grabbed, so that it tracks the pointer
+        // rather than jumping to it -- measured from the last hover, as a knot's
+        // is, since dragstart arrives after the first move.
+        grab: [handle.point[0] - handle.pointer[0], handle.point[1] - handle.pointer[1]],
+        textAnchor: getDrawnAnchor(drawn),
+        dx: drawn.dx,
+        // The padded box the attachment point slides around. It does not move
+        // while the point does: callout-attach is where on the box, not where
+        // the box is.
+        box: shape ? shape.box : null,
+        values: null,
+        previewRec: null
+      };
+      return true;
+    }
+
+    function updateHandleDrag(e) {
+      var o = handleDrag;
+      var q = getLabelSpacePoint(o.anchor, e);
+      var values = getHandleDragValues(o, [q.x + o.grab[0], q.y + o.grab[1]]);
+      if (!values || o.values && sameValues(values, o.values)) return;
+      o.values = values;
+      o.previewRec = Object.assign({}, o.rec, values);
+      previewLabel(o.target, o.id, o.previewRec);
+    }
+
+    // The fields a handle dragged to @p writes, all of them in their stored form.
+    function getHandleDragValues(o, p) {
+      var tol = SNAP_PX / (ext.getSymbolScale() || 1);
+      var width, shape, via;
+      if (o.kind == 'width') {
+        width = getDraggedWidth(o.textAnchor, o.dx, p[0], BOX_PADDING);
+        return {
+          'label-width': width,
+          'label-text': rewrapLabelValue(o.rec['label-text'],
+            Object.assign({}, o.rec, {'label-width': width}))
+        };
+      }
+      if (o.kind == 'via') {
+        // Snapped against where the line meets the text with the via point
+        // where the pointer is, because an automatic attachment faces the via
+        // point and moves with it. Only an elbow's corner snaps: level and plumb
+        // legs are what an elbow is for, but a curve's midpoint has no reason to
+        // line up with anything, and snapping it made the curve hard to place.
+        shape = internal.svg.getLabelCalloutShape(
+          Object.assign({}, o.rec, {'callout-via': formatPointPair(p)}),
+          internal.svg.getAnchorSymbolRadius(o.rec));
+        via = shape && shape.kind != 'bezier' ? snapCalloutVia(p, shape.attach, tol) : p;
+        return {'callout-via': formatPointPair(via)};
+      }
+      if (o.kind == 'attach') {
+        return {'callout-attach': formatPointPair(getAttachFraction(o.box, p, tol))};
+      }
+      if (o.kind == 'gap') {
+        return {'callout-gap': getDraggedGap(p)};
+      }
+      return null;
+    }
+
+    function sameValues(a, b) {
+      return Object.keys(a).every(function(k) { return a[k] === b[k]; });
+    }
+
+    // Redraws one label from @rec without touching its data, then redraws its
+    // cue around the result. The command the drag ends with redraws the layer
+    // from the data, which replaces this.
+    function previewLabel(target, id, rec) {
+      var shp = getDisplayShapes(target)[id];
+      var container = target.gui && target.gui.svg_container;
+      if (!replaceAnchoredSymbol(container, id, rec, shp, ext)) return;
+      selection.refresh(true);
+    }
+
+    // As with an offset drag, the preview is left in place for the command's own
+    // redraw to replace, and is only taken back if the command fails.
+    function commitHandleDrag(o) {
+      var values = Object.assign({}, o.values);
+      var text = values['label-text'];
+      delete values['label-text'];
+      runHandleCommand(o.target, o.id, values,
+        text !== undefined && text !== o.rec['label-text'] ? text : null,
+        handleTitles[o.kind]);
+    }
+
+    var handleTitles = {
+      width: 'Set label width',
+      via: 'Move callout bend',
+      attach: 'Move callout end',
+      gap: 'Set callout gap'
+    };
+
+    // text: rewrapped label-text to write with the values, or null
+    function runHandleCommand(target, id, values, text, title) {
+      var ids = hit.getSelectionIds();
+      runGuiEditCommand(gui, getLabelStyleCommand(values, id, {
+        target: target.name,
+        text: text === null ? undefined : text
+      }), {
+        title: title,
+        // The label stays selected, so its handles are still there to be dragged
+        // again. Re-running the command rebuilds the layer, which drops the
+        // selection.
+        onSuccess: function() { hit.setSelectionIds(ids); },
+        onError: function() { gui.dispatchEvent('map-needs-refresh'); }
+      });
+    }
+
+    // Double-clicking a callout handle gives the label back the callout's own
+    // choice of bend, attachment or gap. The width handle has no automatic value
+    // to go back to: taking the width away would turn the block into point text.
+    function resetHandle(handle) {
+      var target = hit.getHitTarget();
+      var rec = getRecord(target, handle.id);
+      var field = {via: 'callout-via', attach: 'callout-attach',
+        gap: 'callout-gap'}[handle.kind];
+      var values = {};
+      if (!rec || !field || isBlank(rec[field])) return;
+      values[field] = '';
+      runHandleCommand(target, handle.id, values, null, handleTitles[handle.kind]);
+    }
+
+    function isBlank(val) {
+      return val === undefined || val === null || val === '';
+    }
+
+    // Dragging across the map with the text block tool armed sets the new
+    // block's width, which runs between the points pressed and released.
+    function beginBlockDrag(e) {
+      var target = hit.getHitTarget();
+      // Not from a label, whose text a drag there belongs to
+      if (!target || e.id > -1 && isLabel(target, e.id)) return false;
+      if (editor.isOpen()) return false;
+      blockDrag = {
+        target: target,
+        from: getPointerPixels(e),
+        start: hoverPoint || pixToMapCoords(e.x, e.y),
+        width: 0,
+        guide: null
+      };
+      return true;
+    }
+
+    function updateBlockDrag(e) {
+      var o = blockDrag;
+      var scale = ext.getSymbolScale() || 1;
+      o.width = (e.x - o.from[0]) / scale;
+      drawBlockGuide(o, scale);
+    }
+
+    // A dashed box the height of a line, from the press to the pointer, drawn
+    // with a symbol's transform so that it scales as the label will. In the
+    // map's shared <svg> rather than the layer's group, like a pending label,
+    // since a layer with no labels in it yet has no group to draw into.
+    function drawBlockGuide(o, scale) {
+      var container = gui.map.getSvgRoot();
+      var style = getStyleForNewLabel();
+      var h = getNewFontSize(style) * 1.2;
+      var p = ext.translateCoords(o.start[0], o.start[1]);
+      var el = o.guide;
+      if (!container) return;
+      if (!el) {
+        el = o.guide = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        el.setAttribute('class', 'label-block-guide');
+        container.appendChild(el);
+      }
+      el.setAttribute('transform', internal.svg.getTransform(p, scale));
+      el.setAttribute('x', Math.min(0, o.width));
+      el.setAttribute('y', 0);
+      el.setAttribute('width', Math.abs(o.width));
+      el.setAttribute('height', h);
+    }
+
+    function clearBlockDrag() {
+      var el = blockDrag && blockDrag.guide;
+      if (el && el.parentNode) el.parentNode.removeChild(el);
+      blockDrag = null;
+    }
+
+    // A drag too short to mean a width is a click, and does what a click would:
+    // lets go of the selection if there is one, and otherwise places a block at
+    // the default width. A drag to the left places the block the same as a drag
+    // to the right from where it ended, so that its text is left-aligned like
+    // any other block's.
+    function commitBlockDrag(o) {
+      var width = Math.round(Math.abs(o.width));
+      var start = o.start;
+      var p;
+      if (width < MIN_LABEL_WIDTH) {
+        if (hit.getSelectionIds().length > 0) {
+          deselectLabels();
+        } else {
+          beginLabel([start], getBlockStyle);
+        }
+        return;
+      }
+      deselectLabels();
+      if (o.width < 0) {
+        p = ext.translateCoords(start[0], start[1]);
+        start = pixToMapCoords(p[0] + o.width * (ext.getSymbolScale() || 1), p[1]);
+      }
+      beginLabel([start], function() { return getBlockStyle(width); });
+    }
+
+    // A text block's style: the new label's, with a wrap width -- @width or a
+    // default -- and placed with the top left of its column at the anchor, so
+    // that its text is left-aligned and fills the box a drag drew. The offsets
+    // that do that replace the position the panel names.
+    function getBlockStyle(width) {
+      var style = Object.assign({}, getStyleForNewLabel());
+      delete style['label-pos'];
+      return Object.assign(style, {
+        'label-width': width > 0 ? width : DEFAULT_BLOCK_WIDTH,
+        'text-anchor': 'start',
+        dx: 0,
+        dy: Math.round(getNewFontSize(style) * 0.8)
+      });
+    }
+
+    function getNewFontSize(style) {
+      var px = parseFloat(style['font-size']);
+      return px > 0 ? px : internal.svg.DEFAULT_LABEL_FONT_SIZE || 12;
+    }
+
     // What a drag on a selected label's glyphs means, which depends on the kind
     // of label and -- for an anchored one -- on the tool's position mode.
     //
@@ -26352,7 +28463,7 @@
       var shp = id > -1 ? getDisplayShapes(target)[id] : null;
       if (id < 0 || !shp) return false;
       if (isPathLabel(target, id)) return beginPathTextDrag(e, target, id);
-      if (labelTextIsDraggable(gui)) return beginOffsetDrag(e, target, id);
+      if (textIsDraggable(target, id)) return beginOffsetDrag(e, target, id);
       beginKnotDrag({
         id: id,
         index: 0,
@@ -26487,6 +28598,8 @@
         kind: 'offset',
         id: id,
         target: target,
+        rec: rec,
+        previewRec: null,
         // dx and dy are in the space inside the label's symbol group, so pointer
         // movement is divided by the scale that group wears.
         scale: ext.getSymbolScale() || 1,
@@ -26503,7 +28616,8 @@
           // multi-line label -- which is the width its justification is
           // measured against.
           width: box ? box.width : 0,
-          aligned: !!internal.svg.getAlignmentAnchor(rec['label-align'])
+          aligned: !!internal.svg.getAlignmentAnchor(rec['label-align']),
+          keepAnchor: getLabelPositionKind(rec) == 'block'
         },
         // What the attributes said before the preview wrote over them, so that
         // the command is what changes the label rather than the drag.
@@ -26512,14 +28626,32 @@
           y: nodes.text.getAttribute('y'),
           anchor: nodes.text.getAttribute('text-anchor')
         },
+        callout: getOffsetDragCallout(rec),
         moved: false
       };
       // The hairline to the anchor, which is what the drag is measured from and
-      // often the only thing on screen that says so.
-      selection.setTether(id);
+      // often the only thing on screen that says so. A callout says it already.
+      if (!textDrag.callout) selection.setTether(id);
       return true;
     }
 
+    // What an offset drag needs to carry a label's callout along, or null for a
+    // label without one: the record to redraw it from, and for a callout bent
+    // by hand, its via point and where the line met the text at the start.
+    function getOffsetDragCallout(rec) {
+      var shape;
+      if (!internal.svg.labelHasCallout(rec)) return null;
+      shape = internal.svg.getLabelCalloutShape(rec, internal.svg.getAnchorSymbolRadius(rec));
+      return {
+        rec: rec,
+        box: internal.svg.getLabelTextBox(rec),
+        // the shape's via point is the stored one when there is one
+        via: rec['callout-via'] && shape && shape.via ? shape.via.slice() : null,
+        attach: shape ? shape.attach : null,
+        type: shape && shape.kind == 'bezier' ? 'curve' : 'elbow'
+      };
+    }
+
     function updateOffsetDrag(e) {
       var o = textDrag;
       o.values = getOffsetDragValues(o.start, {
@@ -26527,7 +28659,41 @@
         dy: (e.y - o.from[1]) / o.scale
       });
       o.moved = true;
-      previewOffset(o);
+      // The record as the drag will leave it, which the selection cue reads a
+      // text block's column from while the drag is on
+      o.previewRec = Object.assign({}, o.rec, {
+        dx: o.values.dx,
+        dy: o.values.dy,
+        'text-anchor': o.values['text-anchor']
+      });
+      delete o.previewRec['label-pos'];
+      if (o.callout) {
+        previewCalloutOffset(o, getDomEvent(e));
+      } else {
+        previewOffset(o);
+      }
+    }
+
+    // A label with a callout is redrawn rather than moved by its attributes, as
+    // previewOffset() does, because the line has to be worked out again for
+    // where the text now is. Redrawn from the fields the drag will write, which
+    // is also what makes the preview the same as the result.
+    //
+    // A via point placed by hand goes with the text, unless Alt is held: a bend
+    // put there to clear something usually still has to, and one left behind by
+    // a long drag doubles the line back on itself.
+    function previewCalloutOffset(o, evt) {
+      var c = o.callout;
+      var rec = o.previewRec;
+      var box, t1;
+      o.via = null;
+      if (c.via && c.attach && !(evt && evt.altKey)) {
+        box = internal.svg.getLabelTextBox(rec);
+        t1 = [c.attach[0] + box.xmin - c.box.xmin, c.attach[1] + box.ymin - c.box.ymin];
+        o.via = formatPointPair(followCalloutVia(c.type, c.via, c.attach, t1));
+        rec['callout-via'] = o.via;
+      }
+      previewLabel(o.target, o.id, rec);
     }
 
     // Shows the offset by writing it onto the rendered text, as the path drag
@@ -26553,6 +28719,12 @@
 
     function restoreOffset(o) {
       var nodes = findLabelNodes(o.target, o.id);
+      releasedDrag = null;
+      if (o.callout) {
+        // redrawn rather than written on, so redrawn back
+        gui.dispatchEvent('map-needs-refresh');
+        return;
+      }
       if (!nodes) return;
       // The renderer always writes x and y on an anchored label, so the removal
       // case is for markup this tool did not draw.
@@ -26574,6 +28746,7 @@
         dx: o.values.dx,
         dy: o.values.dy,
         anchor: o.values['text-anchor'],
+        via: o.via || null,
         id: o.id,
         target: o.target.name
       }), {
@@ -26676,8 +28849,9 @@
     function updateHoverHandle(e) {
       var found = drawingCurve() || editor.isOpen() || !e.overMap ? null :
         findHandle(hit.getHitTarget(), e);
-      var changed = !!found != !!hoverHandle;
-      if (drag || textDrag) return;
+      var changed = !!found != !!hoverHandle ||
+        !!found && found.kind != hoverHandle.kind;
+      if (dragging()) return;
       hoverHandle = found;
       if (changed) {
         updateHoverText(); // a knot handle takes the glyphs' turn away
@@ -26696,16 +28870,30 @@
     // text, and letting the handle win there would leave the text ungrabbable.
     function updateHoverText() {
       var id = findDraggableText();
-      if (drag || textDrag) return;
+      if (dragging()) return;
       hoverTextId = id > -1 && (!hoverHandle || glyphsOutrankHandle(id)) ? id : -1;
     }
 
+    // Point text and text blocks each have a position mode -- see
+    // getLabelPositionMode().
+    function textIsDraggable(target, id) {
+      return labelTextIsDraggable(gui, getLabelPositionKind(getRecord(target, id)));
+    }
+
+    function dragging() {
+      return !!(drag || textDrag || handleDrag || blockDrag);
+    }
+
     // The exception is about the pointer being on the glyphs, not about the mode:
     // an offset label's anchor is out from under its text, and taking the handle
     // away there left it with no anchor handle at all -- dragging the symbol of a
     // label positioned ne slid its text instead of moving the label.
+    //
+    // Only the anchor: the width and callout handles sit on the edge of the box
+    // and would otherwise never be grabbable in Draggable mode.
     function glyphsOutrankHandle(id) {
-      return hoverHandle.id == id && labelTextIsDraggable(gui) &&
+      return !hoverHandle.kind && hoverHandle.id == id &&
+        textIsDraggable(hit.getHitTarget(), id) &&
         !isPathLabel(hit.getHitTarget(), id) && pointerIsOverText(id);
     }
 
@@ -26748,14 +28936,24 @@
     }
 
     // The handle under the pointer, or null. Only a selected label's handles are
-    // grabbable -- see gui-label-knots.mjs.
+    // grabbable -- see gui-label-knots.mjs. A knot and a label handle within
+    // reach of the pointer go to whichever is nearer: a callout's gap handle can
+    // sit close to the anchor.
     function findHandle(target, e) {
       var shapes = target && getDisplayShapes(target);
       var ids = hit.getSelectionIds();
       var p = pixToMapCoords(e.x, e.y);
-      var handle;
+      var handle, labelHandle, knotPix;
       if (!shapes || ids.length === 0) return null;
       handle = findNearestKnot(shapes, ids, p, scaleThreshold(KNOT_HIT_THRESHOLD));
+      labelHandle = findLabelHandle(target, e);
+      if (handle && labelHandle) {
+        knotPix = ext.translateCoords(handle.point[0], handle.point[1]);
+        if (Math.hypot(knotPix[0] - e.x, knotPix[1] - e.y) < labelHandle.dist) {
+          labelHandle = null;
+        }
+      }
+      if (labelHandle) return labelHandle;
       if (handle) handle.pointer = p;
       return handle;
     }
@@ -26797,6 +28995,10 @@
         }
         return;
       }
+      if (hoverHandle && hoverHandle.kind && !editor.isOpen()) {
+        resetHandle(hoverHandle);
+        return;
+      }
       // Double-clicking a label reaches straight into its text, which is the
       // gesture most editors use and saves selecting it first. The single-click
       // route got there already if the label was the selection; this covers the
@@ -26807,8 +29009,17 @@
     gui.keyboard.on('keydown', function(e) {
       if (!active()) return;
       // While a session is open the textarea has focus and handles its own keys;
-      // it stops propagation for the ones it acts on.
+      // it stops propagation for the ones it acts on. Cmd-A there means select
+      // the text being typed, which is the browser's to handle.
       if (editor.isOpen()) return;
+      // Not while a curve is being drawn: that gesture owns the keyboard, and
+      // selecting the layer in the middle of placing a label is not what the
+      // keystroke can have meant.
+      if (isSelectAll(e) && !drawingCurve()) {
+        selectAllLabels();
+        consume(e); // the default is to select the whole page
+        return;
+      }
       if (e.keyName == 'esc') {
         // One rung per press, innermost first: the curve being drawn, then the
         // selection, then the armed tool. The hit control's own escape handler
@@ -26839,6 +29050,16 @@
       }
     }, null, 10);
 
+    // Cmd-A on a Mac, Ctrl-A elsewhere. Read from the key rather than the
+    // keyCode, as undo and redo are.
+    function isSelectAll(e) {
+      var evt = e.originalEvent;
+      if (!evt || !(evt.metaKey || evt.ctrlKey) || evt.shiftKey || evt.altKey) {
+        return false;
+      }
+      return (evt.key || '').toLowerCase() == 'a';
+    }
+
     // Suppresses the key's default action as well as the rest of the GUI's
     // handlers. The default matters here: finishing a curve opens an editing
     // session and focuses its textarea, and without this the same Enter goes on
@@ -26890,8 +29111,12 @@
     // So the click opens a *pending* session, which draws the label and holds its
     // text, and the label becomes a feature only when the session ends with
     // something in it. See LabelEditor.openPending().
-    function beginLabel(displayCoords) {
+    //
+    // getStyle: (optional) the new label's style, when it is not simply the
+    //   panel's -- a text block's adds a width
+    function beginLabel(displayCoords, getStyle) {
       var target = hit.getHitTarget();
+      var styleFn = getStyle || getStyleForNewLabel;
       if (!target) return;
       hideInstructions();
       editor.openPending(target, {
@@ -26900,15 +29125,15 @@
         // or a position while the caret is sitting there is visible immediately.
         // The same style the label will be created with, down to the font it is
         // named in, so that committing it changes nothing on screen.
-        getStyle: getStyleForNewLabel,
-        create: function(text) { createLabel(displayCoords, text); }
+        getStyle: styleFn,
+        create: function(text) { createLabel(displayCoords, text, styleFn()); }
       });
     }
 
     // Creates the label being typed into. One command carries its geometry, its
     // style and its text, so a new label is a single entry in the session history
     // and a single step to undo.
-    function createLabel(displayCoords, text) {
+    function createLabel(displayCoords, text, style) {
       var target = hit.getHitTarget();
       var coords = displayCoords.map(function(p) {
         return target ? translateDisplayPoint(target, p) : p;
@@ -26918,7 +29143,7 @@
         text: text,
         // whatever the style panel was set to while nothing was selected, so that
         // a font can be chosen before the first label exists
-        style: getStyleForNewLabel()
+        style: style
       }), {title: 'Add label'});
     }
 
@@ -26985,7 +29210,7 @@
       },
       referenceStyle = { // outline style for reference layers
         type: 'outline',
-        strokeColors: [null, '#78c110'], // upped saturation from #86c927
+        strokeColors: [null, '#87b73b'], // was 78c110
         strokeWidth: 0.85,
         dotColor: "#73ba20",
         dotSize: 1
@@ -30207,6 +32432,9 @@
     // getContentLayerBounds() instead. Recorded because the difference matters
     // when deciding whether an update should reset the view.
     var _boundsArePlaceholder = false;
+    // Whether the content's bounds had no width or no height before they were
+    // padded in calcFullBounds() -- see mapNeedsResetFromCollapsedBounds().
+    var _boundsAreCollapsed = false;
 
     var RESIZE_REDRAW_DELAY = 200;
 
@@ -30473,6 +32701,7 @@
       // read before calcFullBounds() below, which describes the map as it is
       // after this update
       var prevBoundsWerePlaceholder = _boundsArePlaceholder;
+      var prevBoundsWereCollapsed = _boundsAreCollapsed;
       var fullBounds;
       var needReset;
 
@@ -30555,6 +32784,8 @@
         // screen, so the view they chose it in is the one to keep, unless what
         // arrived is not in it.
         needReset = !fullBounds.intersects(_ext.getBounds());
+      } else if (prevBoundsWereCollapsed) {
+        needReset = mapNeedsResetFromCollapsedBounds(fullBounds, _ext.getBounds(), e.flags);
       } else {
         needReset = mapNeedsReset(fullBounds, _ext.getFullBounds(), _ext.getBounds(), e.flags);
       }
@@ -30635,7 +32866,8 @@
       b.scale(1 + marginPct / 100 * 2);
 
       // Inflate display bounding box of single-point layers and collapsed shapes a bit
-      if (b.width() === 0 || b.height() === 0) {
+      _boundsAreCollapsed = b.width() === 0 || b.height() === 0;
+      if (_boundsAreCollapsed) {
         b.padBounds(1e-4, 1e-4, 1e-4, 1e-4);
       }
       return b;
@@ -30847,8 +33079,7 @@
     var mapLayers = gui.container.findChild('.map-layers').node();
     var map = gui.container.findChild('.mshp-main-map');
     var toggle = gui.buttons.addButton('#frame-tool-icon')
-      .addClass('menu-btn preview-toggle')
-      .attr('title', 'Toggle map preview');
+      .addClass('menu-btn preview-toggle');
     var readout = El('div')
       .addClass('preview-readout')
       .appendTo(map)
@@ -30968,7 +33199,11 @@
       var available = hasFrame();
       toggle.removeClass('disabled');
       toggle.classed('selected', available && self.isOn());
-      toggle.attr('title', available ? 'Toggle map preview' : 'Add map frame');
+      // data-tooltip, not title: the CSS label in .nav-btn[data-tooltip] appears
+      // without the browser's delay and matches the arrow menu's type.
+      var label = available ? 'Toggle map preview' : 'Add map frame';
+      toggle.attr('data-tooltip', label);
+      toggle.attr('aria-label', label);
       toggle.attr('aria-disabled', 'false');
       toggle.attr('aria-pressed', available && self.isOn() ? 'true' : 'false');
       if (gui.map.isPreviewView()) {
@@ -33320,7 +35555,6 @@
     if (manifest.catalog) {
       opts.catalog = manifest.catalog;
     }
-    opts.display_all = vars['display-all'] || vars.a || !!manifest.display_all;
     opts.quick_view = vars['quick-view'] || vars.q || !!manifest.quick_view;
     opts.target = vars.target || manifest.target || null;
     opts.name = vars.name || manifest.name || null;