ixmaps-gl 0.2.23 → 0.2.25

package/ixmaps-gl.js

@@ -45,7 +45,11 @@
 // range adjustments; see flatRangeParts). A CHOROPLETH
 // layer's geometry is borrowed from a FEATURE base layer sharing the same
 // .layer() name (the real engine's own convention), joined via
-// binding.lookup — see joinChoroplethFeatures. HEADTAIL breaks are flat's
+// binding.lookup — see joinChoroplethFeatures. POSITION (maptheme.js
+// 8328-8353) is a theme that renders nothing itself: it loads a table of
+// id + position pairs and provides the id→position join that other themes
+// on the same .layer() name consume via binding.lookup — see
+// joinChartPositions. HEADTAIL breaks are flat's
 // (headTailBreaks); LOG/POW2/POW3 are recognized type flags but not
 // implemented, see KNOWN_INERT_FLAGS. CHART|USER draws a page's own chart
 // function (style.userdraw, _buildUserChartLayers), CHART|LABEL flat's
@@ -96,7 +100,7 @@
   // ---------------------------------------------------------------
   // this engine's release (= package.json "version", checked by
   // test/unit/version.test.mjs); ixmaps.glVersion, and logged once at start
-  const IXMAPS_GL_VERSION = '0.2.23';
+  const IXMAPS_GL_VERSION = '0.2.25';
 
   const LIB_URLS = {
     // Bumped 3.6.2 -> 5.x (2026-09-21, globe-projection compat fix): native
@@ -216,7 +220,7 @@
   let IconLayer, ScatterplotLayer, GeoJsonLayer, MapLibreOverlay, TextLayer, PathLayer, PathStyleExtension;
   // PieSliceLayer (see makePieSliceLayer) and BarShapeLayer
   // (makeBarShapeLayer) are derived from ScatterplotLayer once deck.gl is there
-  let PieSliceLayer, BarShapeLayer;
+  let PieSliceLayer, BarShapeLayer, FlowPathLayer;
 
   // CHART|PIE / DONUT slices (_buildPieLayers): one instance per slice — a
   // ScatterplotLayer circle (billboarded, pixel radius, pixel offset, the
@@ -238,6 +242,111 @@
   // without anti-aliasing between them (a hard partition: no background
   // seam shows between two slices); the circle's rim keeps
   // ScatterplotLayer's own anti-aliasing.
+  // flat's VECTOR|DASH (maptheme.js 18240-18256, the bezier branch):
+  // the flow lines are dashed — one long dash, a small gap — and the
+  // dash pattern MOVES toward the target: flat animates each SVG line's
+  // stroke-dashoffset from d1+d2+random down to random (1-2s, infinite),
+  // the offset decreasing walking the pattern along the path direction.
+  // Here the same in the fragment shader — but deck.gl tessellates a
+  // path into per-SEGMENT quads whose vPathPosition.y restarts at 0 at
+  // every segment vertex (and is in half-stroke-width units, not
+  // pixels), so the pattern is NOT continuous from the segment
+  // coordinate alone. deck's own PathStyleExtension with dashMode
+  // 'path' (HIGH_PRECISION_DASH) supplies the missing cumulative term:
+  // its calculateDashMetrics fills per-segment [distance so far, path
+  // length] and its vertex shader turns it into vDashOffset, making
+  //   alongPath = vPathPosition.y + vDashOffset
+  // continuous across segments (deck's own dash shader uses exactly
+  // this; the pattern is periodic, so the mod() in vDashOffset is
+  // seamless). The extension's own gap stays 0 (getDashArray's second
+  // component — it renders the line solid); THIS layer's
+  // DECKGL_FILTER_COLOR discards the moving gap: the solid length and
+  // flat's random per-arc phase as an instanced attribute, a time
+  // uniform advanced by the wall clock (one full dash cycle every 2s),
+  // and fragments outside the moving dash window discarded — the layers
+  // themselves are NOT rebuilt per frame. The discard skips the picking
+  // pass (picking.isActive): flat's dashed SVG line is hover-tested
+  // across its gaps too, so the arcs keep their tooltips while the
+  // dash runs
+  function makeFlowPathLayer(Base) {
+    // deck.gl 9: a layer's custom uniforms live in shader MODULES — an
+    // std140 block named <module>Uniforms, its layout declared by the
+    // module's own GLSL and uniformTypes, values pushed per draw via
+    // setShaderModuleProps (the picking module's picking.isActive works
+    // exactly the same way). A plain GLSL uniform would have no backing
+    // buffer, and deck 8's state.model.setUniforms() no longer exists.
+    const FLOW_MODULE = {
+      name: 'flow',
+      uniformTypes: { uFlowTime: 'f32' },
+      defaultUniforms: { uFlowTime: 0 },
+      vs: 'layout(std140) uniform flowUniforms { float uFlowTime; } flow;',
+      fs: 'layout(std140) uniform flowUniforms { float uFlowTime; } flow;'
+    };
+    class Layer extends Base {
+      getShaders() {
+        const shaders = super.getShaders();
+        shaders.modules = (shaders.modules || []).concat(FLOW_MODULE);
+        const inject = Object.assign({}, shaders.inject || {});
+        inject['vs:#decl'] = (inject['vs:#decl'] || '') + `
+in vec2 instanceFlowPhase;
+out vec2 vFlowPhase;
+`;
+        inject['vs:#main-end'] = (inject['vs:#main-end'] || '') + `
+vFlowPhase = instanceFlowPhase;
+`;
+        inject['fs:#decl'] = (inject['fs:#decl'] || '') + `
+in vec2 vFlowPhase;
+`;
+        // before the picking module's own filter; the dash is skipped
+        // there (see the class comment). vDashArray/vDashOffset come
+        // from the PathStyleExtension (see the layer's extensions),
+        // the position along the path is geometry.uv (the path
+        // layer's main sets it to vPathPosition before the filter
+        // runs; the varying itself is NOT redeclared here — the base
+        // shader already declares it, and the injected block lands
+        // before the base source, so a redeclaration is a
+        // redefinition error). uFlowTime comes from the flow module's
+        // block (see FLOW_MODULE)
+        inject['fs:DECKGL_FILTER_COLOR'] = (inject['fs:DECKGL_FILTER_COLOR'] || '') + `
+{
+  float period = vDashArray.x;
+  float pickingActive = 0.0;
+#ifdef MODULE_PICKING
+  pickingActive = picking.isActive;
+#endif
+  if (period > 0.0 && pickingActive < 0.5) {
+    float alongPath = geometry.uv.y + vDashOffset;
+    float pos = fract((alongPath - flow.uFlowTime * period + vFlowPhase.y) / period);
+    if (pos * period > vFlowPhase.x) discard;
+  }
+}
+`;
+        shaders.inject = inject;
+        return shaders;
+      }
+      initializeState() {
+        super.initializeState();
+        this.getAttributeManager().addInstanced({
+          instanceFlowPhase: { size: 2, accessor: 'getFlowPhase', defaultValue: [0, 0] }
+        });
+      }
+      draw(opts) {
+        // one full dash cycle every 2s — flat's animate dur (the bezier
+        // branch); the offset decreases, so the pattern walks toward
+        // the target (alongPath grows along the path). setProps on
+        // the shader inputs; the model's predraw flushes the uniform
+        // buffer when super.draw renders
+        this.setShaderModuleProps({ flow: { uFlowTime: (Date.now() % 2000) / 2000 } });
+        super.draw(opts);
+      }
+    }
+    Layer.layerName = 'FlowPathLayer';
+    Layer.defaultProps = Object.assign({}, Base.defaultProps, {
+      getFlowPhase: { type: 'accessor', value: [0, 0] }
+    });
+    return Layer;
+  }
+
   function makePieSliceLayer(Base) {
     class Layer extends Base {
       getShaders() {
@@ -289,12 +398,15 @@ in vec4 vPieLineColor;
   }
   // in device pixels (fwidth: CSS px per device pixel), so a hairline
   // stays one at any device pixel ratio. Half the outline lies inside
-  // each slice (the other half in its neighbour); below a pixel it fades
-  // in by its width
+  // each slice (the other half in its neighbour). No fade-in by the
+  // width: the browser rasterizes flat's sub-pixel SVG strokes as
+  // hairlines — one device pixel at FULL opacity (Skia's stroke floor,
+  // measured on the ISTAT story: 0.17 CSS px strokes render gray 32) —
+  // so the line keeps full alpha and only its extent grows past 1px
   float pieAA = max(fwidth(pieR), 1e-4);
   float pieH = vPieLineWidth * 0.5 / pieAA;
   float pieDD = pieD / pieAA;
-  float pieLine = pieH > 0.0 ? clamp(min(pieH + 0.5 - pieDD, 2.0 * pieH), 0.0, 1.0) : 0.0;
+  float pieLine = pieH > 0.0 ? clamp(pieH + 0.5 - pieDD, 0.0, 1.0) : 0.0;
   float pieRim = clamp((vPieRadius - pieR) / pieAA + 0.5, 0.0, 1.0);
   color = vec4(mix(color.rgb, vPieLineColor.rgb, pieLine), mix(color.a, vPieLineColor.a * pieRim, pieLine));
   if (pieInner > 0.0) color.a *= clamp((pieR - pieInner) / pieAA + 0.5, 0.0, 1.0);
@@ -499,6 +611,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         ({ IconLayer, ScatterplotLayer, GeoJsonLayer, MapLibreOverlay, TextLayer, PathLayer, PathStyleExtension } = global.deck);
         PieSliceLayer = makePieSliceLayer(ScatterplotLayer);
         BarShapeLayer = makeBarShapeLayer(ScatterplotLayer);
+        FlowPathLayer = makeFlowPathLayer(PathLayer);
         // which engine and libraries this page really runs (a page may
         // bring its own MapLibre/deck.gl — the loaded ones are named)
         const ml = global.maplibregl && typeof global.maplibregl.getVersion === 'function' ? global.maplibregl.getVersion() : '?';
@@ -530,7 +643,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // crafted link must not be able to load arbitrary code into the page.
   // ---------------------------------------------------------------
   // v0.1.6: knows this engine's aliases, lookupfield rule, meta↔style, builder methods, project loading
-  const VALIDATOR_URL_DEFAULT = 'https://cdn.jsdelivr.net/gh/gjrichter/ixmaps-grammar@v0.1.27/dist/validate.mjs';
+  const VALIDATOR_URL_DEFAULT = 'https://cdn.jsdelivr.net/gh/gjrichter/ixmaps-grammar@v0.1.28/dist/validate.mjs';
   // a page may set ixmaps.validate BEFORE loading this script — the
   // `global.ixmaps = {...}` export below would otherwise overwrite it
   const _preloadValidate = global.ixmaps && global.ixmaps.validate;
@@ -658,10 +771,17 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return ring;
   }
 
+  // a quantized topology's point positions are absolute (not delta-encoded
+  // like arcs) quantized integers: x * scale + translate
+  function decodePoint(p, transform) {
+    if (!transform) return p;
+    return [p[0] * transform.scale[0] + transform.translate[0], p[1] * transform.scale[1] + transform.translate[1]];
+  }
+
   function topoGeometryToGeoJSON(geom, arcs, transform) {
     switch (geom.type) {
-      case 'Point': return { type: 'Point', coordinates: geom.coordinates };
-      case 'MultiPoint': return { type: 'MultiPoint', coordinates: geom.coordinates };
+      case 'Point': return { type: 'Point', coordinates: decodePoint(geom.coordinates, transform) };
+      case 'MultiPoint': return { type: 'MultiPoint', coordinates: geom.coordinates.map(p => decodePoint(p, transform)) };
       case 'LineString': return { type: 'LineString', coordinates: ringCoords(geom.arcs, arcs, transform) };
       case 'MultiLineString': return { type: 'MultiLineString', coordinates: geom.arcs.map(a => ringCoords(a, arcs, transform)) };
       case 'Polygon': return { type: 'Polygon', coordinates: geom.arcs.map(ring => ringCoords(ring, arcs, transform)) };
@@ -670,8 +790,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     }
   }
 
-  function topojsonToFeatureCollection(topo) {
-    const objName = Object.keys(topo.objects)[0];
+  function topojsonToFeatureCollection(topo, objectName) {
+    // .data({object: "NAME"}) selects the topojson object to show; without
+    // one (or with an unknown name) it stays the file's FIRST object, the
+    // previous behaviour
+    const objName = (objectName && topo.objects[objectName]) ? objectName : Object.keys(topo.objects)[0];
     const obj = topo.objects[objName];
     const geoms = obj.type === 'GeometryCollection' ? obj.geometries : [obj];
     const features = geoms.map(g => ({
@@ -787,7 +910,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       }
       return false;
     });
-    return features.length === fc.features.length ? fc : Object.assign({}, fc, { features });
+    const out = features.length === fc.features.length ? fc : Object.assign({}, fc, { features });
+    // a {type:"Sphere"} feature is flat's ocean backdrop: not drawn as a shape, the globe's own
+    // surface takes its color (see applySphereBackdrop)
+    if (fc.features.some(f => f && f.geometry && f.geometry.type === 'Sphere')) Object.defineProperty(out, '_sphere', { value: true, enumerable: false });
+    return out;
   }
 
   // CHOROPLETH's own .data() (e.g. the comuni demographics CSV in
@@ -826,7 +953,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   function dataSourceKey(data) {
     const d = data || {};
     return JSON.stringify({ url: d.url, urls: d.urls, type: d.type, query: d.query,
-      process: d.process && String(d.process), ext: d.ext, name: d.ext ? d.name : undefined });
+      process: d.process && String(d.process), ext: d.ext, name: d.ext ? d.name : undefined,
+      // .data({object}) selects a topojson object — two themes on the same
+      // URL with different objects must NOT share one cache entry (the
+      // DISS page's 5 layers of one file)
+      object: d.object });
   }
   function dataCacheKey(data, binding) {
     const b = binding || {};
@@ -926,11 +1057,40 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // ixmaps-flat dev tree, Themes.prototype.setExternalData). This engine
   // has no such pipeline to resume, so the bridge only needs to do the
   // ONE thing fetchLayerData actually needs: resolve the promise a
-  // query()-mode fetch is awaiting. build()'s layer-loading loop is
-  // strictly sequential (one .data({query}) in flight at a time, see its
-  // dataCache), so a single pending-resolver slot is enough — not a
-  // registry keyed by data name like the real engine's.
-  let _pendingQueryResolve = null;
+  // query()-mode fetch is awaiting. Queries run in parallel (several
+  // layers, a later map.layer()), so every pending one has its own entry,
+  // keyed by the options object its query function received — real pages
+  // hand that same object back: query(themeObj, options) …
+  // ixmaps.setExternalData(data, options). In data order: oldest first.
+  const _pendingQueries = new Map(); // options object → { name, resolve, reject, timer }
+  // a pending query's timeout (0: DATAJS_LOAD_TIMEOUT_MS) — a field so the
+  // unit tests can shorten it
+  const QUERY_HANDOFF = { timeoutMs: 0 };
+  function settleQuery(opts, err, data) {
+    const q = _pendingQueries.get(opts);
+    if (!q) return;
+    _pendingQueries.delete(opts);
+    clearTimeout(q.timer);
+    if (err) q.reject(err); else q.resolve(data);
+  }
+  // the pending query a setExternalData(data, opt) belongs to: the one
+  // given that very options object, else the one of that data name, else —
+  // no name — the oldest (exact while only one is pending)
+  function pendingQueryOf(opt) {
+    if (opt && _pendingQueries.has(opt)) return opt;
+    const name = opt && opt.name;
+    if (name != null && name !== '') {
+      for (const [o, q] of _pendingQueries) if (q.name === String(name)) return o;
+      return null;
+    }
+    const first = _pendingQueries.keys().next();
+    if (first.done) return null;
+    if (_pendingQueries.size > 1) {
+      console.warn('[ixmaps-gl] ixmaps.setExternalData without its query\'s options object or a name, while ' + _pendingQueries.size +
+        ' .data({query}) fetches are pending — handed to the oldest; pass the options the query function received');
+    }
+    return first.value;
+  }
   // Data by name, as flat (maptheme.js 2570-2593, 8286-8310):
   // setExternalData(data, {type, name}) makes a data.js Table of the data
   // and keeps it as window[name]; whoever waits for that name gets it, and
@@ -976,6 +1136,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // globals a data name must not overwrite
   const _engineGlobalsGuard = { ixmaps: 1, Data: 1, deck: 1, maplibregl: 1, window: 1, document: 1, $: 1, jQuery: 1 };
   function setExternalDataBridge(dataObj, opt) {
+    const query = pendingQueryOf(opt);
+    if (query) {
+      if (dataObj == null) settleQuery(query, new Error('[ixmaps-gl] .data({query}): the query handed over no data (ixmaps.setExternalData(null, …))'));
+      else settleQuery(query, null, dataObj);
+      return;
+    }
     const name = opt && opt.name;
     if (name != null && name !== '') {
       (dataObj == null ? Promise.resolve(null) : externalDataToTable(dataObj, opt))
@@ -983,13 +1149,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         .catch(err => { console.error(err); publishNamedData(String(name), null); });
       return;
     }
-    if (!_pendingQueryResolve) {
-      console.warn('[ixmaps-gl] ixmaps.setExternalData called with no pending .data({query}) fetch — ignored');
-      return;
-    }
-    const resolve = _pendingQueryResolve;
-    _pendingQueryResolve = null;
-    resolve(dataObj);
+    console.warn('[ixmaps-gl] ixmaps.setExternalData called with no pending .data({query}) fetch — ignored');
   }
 
   // ---------------------------------------------------------------
@@ -1371,7 +1531,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // genuinely CSV-shaped .obj with a missing binding.position would
     // throw, even though this .obj was never row data in the first place.
     if (dataConfig.obj) {
-      if (dataConfig.type === 'topojson') return topojsonToFeatureCollection(dataConfig.obj);
+      if (dataConfig.type === 'topojson') return topojsonToFeatureCollection(dataConfig.obj, dataConfig.object);
       if (dataConfig.type === 'geojson') return sanitizeGeoJSON(dataConfig.obj);
       let obj = dataConfig.obj;
       if (dataConfig.process) {
@@ -1387,7 +1547,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         }
         obj = runDataProcess(obj, dataConfig);
       }
-      const rows = typeof obj.json === 'function' ? obj.json() : obj;
+      // a raw jsonDB object ({fields, records}) → rows, with or without
+      // process (and without needing data.js)
+      const isJsonDb = !Array.isArray(obj) && Array.isArray(obj.fields) && Array.isArray(obj.records);
+      const rows = typeof obj.json === 'function' ? obj.json() : isJsonDb ? dataTableRows(obj) : obj;
       return rowsResult(rows, binding);
     }
 
@@ -1397,9 +1560,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           '<script src="https://cdn.jsdelivr.net/gh/gjrichter/data.js@master/data.js"> before ixmaps-gl.js');
       }
       const queryFn = typeof dataConfig.query === 'function' ? dataConfig.query : new Function(`return (${dataConfig.query});`)();
-      const dataObj = await new Promise(resolve => {
-        _pendingQueryResolve = resolve;
-        queryFn({}, {});
+      // its own options object: the query hands it back with the data
+      const opts = { type: dataConfig.type, name: dataConfig.name };
+      const timeoutMs = QUERY_HANDOFF.timeoutMs || DATAJS_LOAD_TIMEOUT_MS;
+      const dataObj = await new Promise((resolve, reject) => {
+        const timer = setTimeout(() => settleQuery(opts, new Error(`[ixmaps-gl] .data({query}): no data handed over (ixmaps.setExternalData) within ${timeoutMs / 1000}s`)), timeoutMs);
+        _pendingQueries.set(opts, { name: dataConfig.name != null ? String(dataConfig.name) : null, resolve, reject, timer });
+        try { queryFn({}, opts); } catch (err) { settleQuery(opts, err); }
       });
       return rowsResult((dataConfig.process ? runDataProcess(dataObj, dataConfig) : dataObj).json(), binding);
     }
@@ -1421,8 +1588,21 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // parser (PapaParse), so the Table arrives via the callback
         const tables = await Promise.all(texts.map(dataJsCsvTable));
         let table = tables[0];
-        for (const t of tables.slice(1)) table.records = table.records.concat(t.records);
-        if (table.table) table.table.records = table.records.length;
+        // records are positional: align each later file's columns to the
+        // first file's by name (a column only a later file has is added),
+        // as the no-data.js path below gets from each file's own header
+        for (const t of tables.slice(1)) {
+          const ids = table.fields.map(f => f.id);
+          const tIds = t.fields.map(f => f.id);
+          if (tIds.length === ids.length && tIds.every((id, c) => id === ids[c])) {
+            table.records = table.records.concat(t.records);
+            continue;
+          }
+          t.fields.forEach(f => { if (!ids.includes(f.id)) { ids.push(f.id); table.fields.push(f); } });
+          const src = ids.map(id => tIds.indexOf(id));
+          table.records = table.records.concat(t.records.map(rec => src.map(c => (c < 0 ? undefined : rec[c]))));
+        }
+        if (table.table) { table.table.records = table.records.length; table.table.fields = table.fields.length; }
         if (scriptProcess) table = scriptProcess(table);
         else if (dataConfig.process) table = runDataProcess(table, dataConfig);
         rows = dataTableRows(table);
@@ -1444,7 +1624,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // them into a table with a geometry column, and back)
       const resp = await fetch(dataConfig.url);
       if (!resp.ok) throw new Error(`[ixmaps-gl] failed to fetch ${dataConfig.url}: ${resp.status}`);
-      if (dataConfig.type === 'topojson') return topojsonToFeatureCollection(await resp.json());
+      if (dataConfig.type === 'topojson') return topojsonToFeatureCollection(await resp.json(), dataConfig.object);
       return sanitizeGeoJSON(await resp.json());
     }
     // every other format (json, jsonstat, ndjson, rss, kml, gml, geobuf,
@@ -1549,7 +1729,29 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // first filter left.
   function filterAndJoin(raw, spec, runtimes, expr = spec.filter) {
     const f = applyWhereFilter(raw, expr);
-    return f.type === 'Table' ? joinTableFeatures(spec, f, runtimes) : f;
+    return f.type === 'Table' ? joinTableFeatures(spec, f, runtimes) : chartAnchoredFeatures(f, spec);
+  }
+  // a CHART theme over geojson SHAPES (the TELRAAM page binds
+  // lookup:"geometry" — each chart at its own feature's shape): lines and
+  // polygons carry no [lng, lat] position, so every chart pipeline test
+  // (typeof c[0] === 'number', inViewport, ...) drops them silently and
+  // nothing renders. flat positions such a chart at the shape's center
+  // (its ptPos, flatShapeCenter) — normalize the features to Point at
+  // that anchor up front. FEATURE(S)/CHOROPLETH keep their real geometry,
+  // VECTOR/BEZIER keep their lines (their own renderers)
+  function chartAnchoredFeatures(fc, spec) {
+    const chart = fc && fc.type === 'FeatureCollection' && spec.flags && spec.flags.has('CHART')
+      && !spec.flags.has('FEATURE') && !spec.flags.has('FEATURES')
+      && !spec.flags.has('CHOROPLETH') && !isVectorChart(spec.flags)
+      && fc.features.some(f => f && f.geometry && f.geometry.type !== 'Point');
+    if (!chart) return fc;
+    const features = fc.features.map(f => {
+      const t = f && f.geometry && f.geometry.type;
+      if (!t || t === 'Point') return f;
+      const anchor = flatShapeCenter(f.geometry);
+      return anchor ? { type: 'Feature', geometry: { type: 'Point', coordinates: anchor }, properties: f.properties } : f;
+    });
+    return { type: 'FeatureCollection', features };
   }
   function applyWhereFilter(fc, filterExpr) {
     if (!filterExpr) return fc;
@@ -1658,6 +1860,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // each layer where its shape is found (maptheme.js 9324, 10376); records
   // with no shape are left out (10387-10392)
   //
+  // A POSITION theme is a layer's id→position PROVIDER: flat loads it, draws
+  // nothing, and only registers its records as themeNodesPosA entries
+  // (maptheme.js 8328-8353 — "don't create SVG objects but only entries in
+  // map.Themes.themeNodesPosA[]"), the same registry getNodePosition reads
+  // — so here it takes part in the join index exactly like a FEATURE layer
+  // of center points, its binding.id against the consumer's lookup key
+  //
   // flat runs the after-aggregation steps after EACH layer's pass, over all
   // items; DIFFERENCE turns a record's value fields into their difference
   // and drops the last, so a second pass leaves the earlier layers' items
@@ -1672,7 +1881,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const features = [];
     const indexes = layers.map(layer => {
       const index = new Map();
-      runtimes.filter(r => r.name === layer && (r.flags.has('FEATURE') || r.flags.has('FEATURES'))).forEach(r => {
+      runtimes.filter(r => r.name === layer && (r.flags.has('FEATURE') || r.flags.has('FEATURES') || r.flags.has('POSITION'))).forEach(r => {
         // in theme order, as flat's layer holds the themes' shapes
         for (const [k, v] of featurePositionIndex(r)) { if (flatShapeWins(index.get(k), v.area)) index.set(k, v); }
       });
@@ -1759,6 +1968,25 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return Math.min(0.9, o);
   }
 
+  // flat's DOPACITY formula inside the COMPOSECOLOR branch (maptheme.js
+  // 13489-13505): (dopacityscale || 1) · (v/max)^(1/dopacitypow) — no 0.9
+  // cap and no 0.0001 clip here, unlike the DOMINANT branch: flat writes
+  // the raw SVG stroke-/fill-opacity property and the browser clamps at 1
+  function composedDopacityAlpha(style, flags, v, max) {
+    const scale = styleNum(style.dopacityscale) || 1;
+    const pow = 1 / (styleNum(style.dopacitypow) || 1);
+    const o = scale * Math.pow(v, pow) / Math.pow(max, pow);
+    return isFinite(o) ? Math.max(0, Math.min(1, o)) : 0;
+  }
+
+  // a choropleth shape's outline color: a LINE shape strokes with its value
+  // color; any other shape keeps the theme's outline, hidden while a class
+  // is isolated and the shape is not in it
+  function choroplethOutlineColor(isLine, valueColorOf, d, isolating, unmarkedEvidence, lineRgb) {
+    if (isLine) return valueColorOf(d);
+    return isolating && unmarkedEvidence(d) === 'hide' ? [0, 0, 0, 0] : lineRgb;
+  }
+
   function joinChoroplethFeatures(spec, table, runtimes) {
     // a page can define several FEATURE layers of one name — e.g. the
     // comuni as polygons and as center points (for chart positions); flat
@@ -1795,21 +2023,25 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     if (isAggregatedCategoricalChoropleth(spec)) {
       const groups = new Map();
       for (const row of table.rows) {
-        const key = String(row[lookupField]);
+        if (row[lookupField] == null) continue;
+        const key = flatLookupKey(row[lookupField], spec.style);
         if (!groups.has(key)) groups.set(key, []);
         groups.get(key).push(row);
       }
       return {
         type: 'FeatureCollection',
         features: geomRt.features.map(f => {
-          const rows = groups.get(String(f.properties[idField]));
+          const rows = f.properties[idField] == null ? null : groups.get(String(f.properties[idField]));
           const properties = rows ? Object.assign({}, rows[0]) : {};
           if (rows) Object.defineProperty(properties, AGGREGATED_ROWS, { value: rows });
           return { type: 'Feature', geometry: f.geometry, properties, _flatAreaKm2: flatShapeAreaKm2(geomRt, f) };
         })
       };
     }
-    const rowsByKey = new Map(table.rows.map(row => [String(row[lookupField]), row]));
+    // the data side's key as flat makes it (lookupdigits/toupper/tonumber),
+    // the geometry id as is — the same rule as joinChartPositions
+    // a missing key on either side joins nothing (not "undefined" to "undefined")
+    const rowsByKey = new Map(table.rows.filter(row => row[lookupField] != null).map(row => [flatLookupKey(row[lookupField], spec.style), row]));
     // Unmatched polygons (no CSV row for that id) keep their geometry with
     // empty properties — real-world data: not every comune necessarily has
     // a row in every demographic source. Renders as "no data" (see
@@ -1818,7 +2050,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const features = geomRt.features.map(f => ({
       type: 'Feature',
       geometry: f.geometry,
-      properties: rowsByKey.get(String(f.properties[idField])) || {},
+      properties: (f.properties[idField] != null && rowsByKey.get(String(f.properties[idField]))) || {},
       _flatAreaKm2: flatShapeAreaKm2(geomRt, f)
     }));
     return { type: 'FeatureCollection', features };
@@ -2091,6 +2323,36 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // colorscheme (isGeneratedColorScheme above), never as the step count.
   function resolveColorScheme(colorscheme, labels, classes) {
     if (!colorscheme) return labels.map((_, i) => FALLBACK_PALETTE[i % FALLBACK_PALETTE.length]);
+    // flat's custom per-value color function (maptheme.js 12677-12705):
+    // colorscheme: ["byvalue", function(value){ return color; }] — every
+    // known category value gets its color from the function and the
+    // result REPLACES the whole scheme (so neither classes nor the
+    // generated-sweep machinery below ever see it, as in flat). A
+    // function that throws, or one a non-categorical theme hands no
+    // values to iterate, falls back to the default palette — exactly
+    // flat's own two fallbacks. The function may also arrive serialized
+    // (a project-JSON string), like the whole-scheme string function
+    // below evaluates one.
+    if (Array.isArray(colorscheme) && colorscheme.length > 1 && colorscheme[0] === 'byvalue') {
+      let fnByValue = null;
+      if (typeof colorscheme[1] === 'function') fnByValue = colorscheme[1];
+      else if (typeof colorscheme[1] === 'string') {
+        try {
+          const f = new Function('return (' + colorscheme[1] + ')')();
+          if (typeof f === 'function') fnByValue = f;
+        } catch (err) { /* not code */ }
+      }
+      if (fnByValue) {
+        try {
+          const byValueA = labels.map(l => fnByValue(l));
+          if (byValueA.length) return byValueA;
+          console.warn('[ixmaps-gl] colorscheme "byvalue" function needs a categorical theme with known values — using the fallback palette');
+        } catch (err) {
+          console.warn('[ixmaps-gl] colorscheme "byvalue" function threw "' + err + '" — using the fallback palette');
+        }
+      }
+      return labels.map((_, i) => FALLBACK_PALETTE[i % FALLBACK_PALETTE.length]);
+    }
     colorscheme = applyClassesToColorScheme(colorscheme, classes);
     if (isGeneratedColorScheme(colorscheme)) {
       const [, cc1, cc2, nParam1, nParam2] = colorscheme;
@@ -2196,15 +2458,22 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // mean — see the NOOUTLIER block in _buildChartLayers) has real
   // behavior now; bare OUTLIER (the real source's "keep ONLY the
   // outliers" inverse mode) stays unimplemented — no config here uses it.
-  const KNOWN_INERT_FLAGS = ['SEQUENCE', 'STAR', 'SORT', 'DOWN', 'RECT', 'CLIPTOGEOBOUNDS', 'OUTLIER',
+  // SEQUENCE/STAR/SORT/DOWN/RECT are implemented now (the sequence
+  // symbol chart, sequenceLayout + snapToAggregationGrid) — removed from
+  // this list; the rest is still recognized-but-inert
+  const KNOWN_INERT_FLAGS = ['CLIPTOGEOBOUNDS', 'OUTLIER',
     'POW2', 'POW3', 'NOSORT'];
-  // flat's PIE / DONUT variants with no rendering here (see _buildPieLayers)
-  const PIE_INERT_FLAGS = [/3D/, /VOLUME/, /HEIGHT/, /STARBURST/, /FLOWER/, /RAYS/, /BOW/, /ZOOM/, /DIRECTION/, /DIRECTED/, /POLAR/];
+  // flat's PIE / DONUT variants with no rendering here (see _buildPieLayers).
+  // STARBURST / FLOWER / RAYS (the starburst rays, with the XLRAYS & kin
+  // angle/gap variants) and POLAR (its reference circles) ARE drawn — see
+  // pieSliceLayout; the rest is still recognized-but-inert
+  const PIE_INERT_FLAGS = [/3D/, /VOLUME/, /HEIGHT/, /BOW/, /ZOOM/, /DIRECTION/, /DIRECTED/];
   // ... and of AGGREGATE / CATEGORICAL pies: GRIDSIZE's pie the size of its
-  // grid cell (drawn by the SIZE rule instead), AUTOSIZE, DOPACITY, the
-  // chart BOX and TITLE, GAUGE, MULTIPLE / DIFFUSE, the post-aggregation
-  // value arithmetic (DIFFERENCE, FRACTION, PERCENT …, field100)
-  const PIE_AGGREGATE_INERT_FLAGS = [/^GRIDSIZE$/, /AUTOSIZE/, /DOPACITY/, /BOX/, /TITLE/, /^GAUGE$/, /^MULTIPLE$/, /^DIFFUSE$/,
+  // grid cell (drawn by the SIZE rule instead), AUTOSIZE, DOPACITY,
+  // GAUGE, MULTIPLE / DIFFUSE, the post-aggregation
+  // value arithmetic (DIFFERENCE, FRACTION, PERCENT …, field100).
+  // The chart BOX and TITLE ARE drawn (see _buildPieLayers)
+  const PIE_AGGREGATE_INERT_FLAGS = [/^GRIDSIZE$/, /AUTOSIZE/, /DOPACITY/, /^GAUGE$/, /^MULTIPLE$/, /^DIFFUSE$/,
     /^DIFFERENCE$/, /^FRACTION$/, /^PERCENT$/, /^PERMILLE$/, /^PRODUCT$/, /^CALCVAL$/, /^RELATIVE$/];
   // flat's BAR / BARS variants with no rendering here (see flatBarLayout):
   // the bar is drawn plain (SMALLARROW as ARROW) — tested as substrings,
@@ -2214,11 +2483,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     /^DIFFERENCE$/, /^FRACTION$/, /^PERCENT$/, /^PERMILLE$/, /^PRODUCT$/, /^CALCVAL$/, /^RELATIVE$/];
   // flat's VECTOR / BEZIER modifiers with no rendering here (see
   // _buildVectorLayers), the word → what happens instead
+  // (DASH IS drawn — the animated flow, see makeFlowPathLayer)
   const VECTOR_INERT_FLAGS = {
     VALUES: 'the value text along the curve is not drawn yet',
     DYNAMICWIDTH: 'not drawn yet (flat widens by the log of the length in its own map units) — the plain width instead',
-    LONG: 'not drawn yet (its bow depends on flat\'s own map units) — the default bow instead',
-    DASH: 'drawn as static dashes — flat\'s dash animation is not ported'
+    LONG: 'not drawn yet (its bow depends on flat\'s own map units) — the default bow instead'
   };
   const _warnedFlags = new Set();
 
@@ -2263,6 +2532,18 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // makes while the map is still building wait for it
   let _resolveMapReady;
   const _mapReady = new Promise(r => { _resolveMapReady = r; });
+  // a map declared with an options name (Map(id, {name})) → the deferred of
+  // ITS build: ixmaps.map("name") calls made while it is still building wait
+  // for that map, not whichever map is built first
+  const _namedMapReady = Object.create(null);
+  function namedMapReady(name) {
+    if (!_namedMapReady[name]) {
+      let resolve;
+      const promise = new Promise(r => { resolve = r; });
+      _namedMapReady[name] = { promise, resolve };
+    }
+    return _namedMapReady[name];
+  }
 
   // flat's ixmaps.require(url) fetches the script and evals it
   // (htmlgui.js 3911-3934); here each one runs globally, in order, before
@@ -2382,7 +2663,16 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // key wins. Always into a new object — the page's own objects are never
     // mutated. Aliases (geo → position, ...) are resolved in normalizeTheme.
     binding(b) {
-      this._binding = Object.assign({}, this._binding, b);
+      // flat's toString joins an array with '|' (maptheme.js 1014): a
+      // binding given as an ARRAY — .binding({value: ["out","in"]}, the
+      // pendolari page's saldo pie) is a MULTI-FIELD binding, not one
+      // field named "out,in" (which would find no column and draw
+      // nothing). Normalized once, here, for every consumer that
+      // splits binding.value on '|'
+      const norm = {};
+      // (an empty or missing argument keeps what earlier calls set)
+      for (const [k, v] of Object.entries(b || {})) norm[k] = Array.isArray(v) ? v.join('|') : v;
+      this._binding = Object.assign({}, this._binding, norm);
       return this;
     }
     filter(expr) { this._filterExpr = expr; return this; }
@@ -2477,6 +2767,27 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return construct;
   }
   const unwrapLayer = x => (typeof x === 'function' && x.__ixLayer) ? x.__ixLayer : x;
+  // flat's layer builder finalizers — definition(), define() AND json()
+  // (htmlgui_flat.js 2056-2083) — all return the plain DEFINITION object,
+  // so a real page's .layer(ixmaps.layer("x").data()...json()) hands
+  // map.layer() that object rather than the builder. Wrap it back into a
+  // LayerBuilder whose definition() reproduces it (the def's own slots;
+  // its type/filter/title live INSIDE style, where definition() put them)
+  function asLayerBuilder(x) {
+    const lb = unwrapLayer(x);
+    if (lb instanceof LayerBuilder) return lb;
+    if (lb && typeof lb === 'object' && (lb.layer || lb.data || lb.style)) {
+      const b = new LayerBuilder(lb.layer || 'layer');
+      b._data = lb.data || null;
+      b._binding = lb.binding || {};
+      b._style = lb.style || {};
+      b._meta = lb.meta || {};
+      if (lb.field != null) b._field = lb.field;
+      if (lb.field100 != null) b._field100 = lb.field100;
+      return b;
+    }
+    return lb;
+  }
 
   // ---------------------------------------------------------------
   // Binding aliases. Real ixmaps-flat accepts ~50 .binding() keys and maps
@@ -2487,7 +2798,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // edit it by hand; `npm run unit` fails when it drifts.
   // ---------------------------------------------------------------
   // <grammar:binding-aliases>
-  // generated from ixmaps-grammar 0.1.27 (ixmaps-flat 1.0.42, 2b978d5 2026-10-02) — 52 aliases
+  // generated from ixmaps-grammar 0.1.28 (ixmaps-flat 1.0.42, 2b978d5 2026-10-02) — 52 aliases
   const FLAT_BINDING_ALIASES = {
     "aggregation": "style.aggregationfield",
     "aggregationfield": "style.aggregationfield",
@@ -2549,7 +2860,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // both — so .style({tooltip}) is a tooltip and .meta({fillopacity}) a style
   // property. GENERATED by test/sync-grammar.mjs — do not edit.
   // <grammar:meta-keys>
-  // generated from ixmaps-grammar 0.1.27 — 5 meta keys
+  // generated from ixmaps-grammar 0.1.28 — 5 meta keys
   const FLAT_META_KEYS = ["description","name","snippet","title","tooltip"];
   // </grammar:meta-keys>
 
@@ -2651,27 +2962,75 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // that kind: the data processing function (data.process /
   // style.dbtableProcess), the broker query (data.query /
   // style.dbtableQuery — without it a data.name still reaches a
-  // provider the PAGE defined as ixmaps[name]) and a colorscheme given
-  // as a string, which resolveColorScheme evaluates as a function
-  // (an array colorscheme is data and stays).
+  // provider the PAGE defined as ixmaps[name]) and a colorscheme
+  // resolveColorScheme would evaluate: a string, or ["byvalue", "<fn>"]
+  // (any other array colorscheme is data and stays). normalizeTheme
+  // merges meta INTO style, so every style key is checked under meta too.
+  const isColorSchemeCode = v => typeof v === 'string'
+    || (Array.isArray(v) && v[0] === 'byvalue' && typeof v[1] === 'string');
   const PROJECT_CODE_KEYS = [
     ['data', 'process', 'data.process function'],
     ['style', 'dbtableProcess', 'data.process function'],
     ['data', 'query', 'data.query function'],
     ['style', 'dbtableQuery', 'data.query function'],
-    ['style', 'colorscheme', 'colorscheme function', v => typeof v === 'string'],
-  ];
+    ['style', 'colorscheme', 'colorscheme function', isColorSchemeCode],
+  ].flatMap(k => (k[0] === 'style' ? [k, ['meta', ...k.slice(1)]] : [k]));
+  // A project's legend texts (title, snippet, description — in style or
+  // meta, normalizeTheme fills meta from either) are shown as HTML, as on
+  // flat: citation links in a description are real. A project's markup is
+  // cleaned to formatting tags and plain attributes so nothing in it runs;
+  // a page's own .meta()/.style() HTML stays as given.
+  const PROJECT_HTML_KEYS = ['title', 'snippet', 'description'];
+  const PROJECT_HTML_DROP = new Set(['SCRIPT', 'STYLE', 'IFRAME', 'FRAME', 'FRAMESET', 'OBJECT', 'EMBED', 'SVG', 'MATH',
+    'TEMPLATE', 'NOSCRIPT', 'LINK', 'META', 'BASE', 'FORM', 'INPUT', 'BUTTON', 'SELECT', 'TEXTAREA', 'AUDIO', 'VIDEO', 'SOURCE']);
+  const PROJECT_HTML_TAGS = new Set(['A', 'B', 'I', 'EM', 'STRONG', 'U', 'S', 'SMALL', 'SUB', 'SUP', 'BR', 'P', 'DIV', 'SPAN',
+    'UL', 'OL', 'LI', 'HR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'IMG', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH', 'CODE', 'BLOCKQUOTE']);
+  const PROJECT_HTML_ATTRS = new Set(['href', 'src', 'alt', 'title', 'target', 'rel', 'class', 'style', 'width', 'height', 'colspan', 'rowspan']);
+  function sanitizeProjectHtml(html) {
+    const s = String(html);
+    if (!/[<&]/.test(s)) return s;
+    // no DOM to parse with (Node): the text, escaped
+    if (typeof global.DOMParser !== 'function') return escapeHtml(s);
+    // an inert document: nothing in it runs or loads while it is cleaned
+    const body = new global.DOMParser().parseFromString('<!doctype html><body>' + s, 'text/html').body;
+    for (const el of Array.from(body.querySelectorAll('*'))) {
+      if (PROJECT_HTML_DROP.has(el.tagName.toUpperCase())) { el.remove(); continue; }
+      if (!PROJECT_HTML_TAGS.has(el.tagName.toUpperCase())) { el.replaceWith(...el.childNodes); continue; }
+      for (const a of Array.from(el.attributes)) {
+        const name = a.name.toLowerCase();
+        if (!PROJECT_HTML_ATTRS.has(name)
+          || ((name === 'href' || name === 'src') && /^(javascript|vbscript|data):/i.test(a.value.replace(/[\s\u0000-\u001f]/g, '')))) {
+          el.removeAttribute(a.name);
+        }
+      }
+    }
+    return body.innerHTML;
+  }
+
   function withoutProjectCode(t, report) {
     const found = PROJECT_CODE_KEYS.filter(([part, key, , isCode]) =>
       t[part] && t[part][key] != null && (!isCode || isCode(t[part][key])));
-    if (!found.length) return t;
+    const html = [];
+    for (const part of ['style', 'meta']) {
+      for (const key of PROJECT_HTML_KEYS) {
+        const v = t[part] && t[part][key];
+        if (typeof v !== 'string') continue;
+        const clean = sanitizeProjectHtml(v);
+        if (clean !== v) html.push([part, key, clean]);
+      }
+    }
+    if (!found.length && !html.length) return t;
     const copy = Object.assign({}, t);
-    found.forEach(([part, key]) => {
-      if (copy[part] === t[part]) copy[part] = Object.assign({}, t[part]);
-      delete copy[part][key];
-    });
-    const what = [...new Set(found.map(f => f[2]))].join(', ');
-    report.notes.push(`theme "${t.layer}": the project's ${what} is never run by ixmaps-gl`);
+    const own = part => { if (copy[part] === t[part]) copy[part] = Object.assign({}, t[part]); return copy[part]; };
+    found.forEach(([part, key]) => { delete own(part)[key]; });
+    html.forEach(([part, key, clean]) => { own(part)[key] = clean; });
+    if (found.length) {
+      const what = [...new Set(found.map(f => f[2]))].join(', ');
+      report.notes.push(`theme "${t.layer}": the project's ${what} is never run by ixmaps-gl`);
+    }
+    if (html.length) {
+      report.notes.push(`theme "${t.layer}": the project's ${[...new Set(html.map(h => h[1]))].join(', ')} HTML is cleaned to formatting markup by ixmaps-gl`);
+    }
     return copy;
   }
 
@@ -2905,6 +3264,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     }
 
     typeStyleNumbers(style);
+    // flat's own fill-opacity fallback (maptheme.js 13406:
+    // `this.fillOpacity = this.fillOpacity ? this.fillOpacity : this.nOpacity`)
+    // — an "opacity" style is the fill opacity whenever "fillopacity" is
+    // not set, as flat realizes every theme
+    // (Number("") and Number(null) are 0: an empty opacity must not hide the theme)
+    if (!styleNum(style.fillopacity) && style.opacity != null && String(style.opacity).trim() !== ''
+      && Number.isFinite(Number(style.opacity))) {
+      style.fillopacity = Number(style.opacity);
+    }
     return { name: def.layer, data: def.data, binding, targets, geometry, flags, typeStr, style, meta, filter };
   }
 
@@ -3061,7 +3429,58 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     light: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
     dark: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
   };
+  // flat's own raster-tile basemaps (htmlgui_sync_Leaflet.js __addTileLayer
+  // list, ArcGIS block): a mapType NAME flat resolves to real raster tiles
+  // resolves to the SAME tiles here, as a built MapLibre raster style —
+  // "ArcGIS - Topo" was falling through to CARTO Positron before, a
+  // non-topographic look nothing like flat's. Styles are built once per
+  // name, so the same name is the SAME style object and setMapType's
+  // "same style: nothing to reload" identity test keeps working.
+  const ESRI_ATTRIBUTION = 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community';
+  const FLAT_RASTER_BASEMAPS = [
+    { name: 'ArcGIS - Topo', aliases: ['terrain'], maxzoom: 19,
+      tiles: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png' },
+    { name: 'ArcGIS - Light Gray Base', maxzoom: 19,
+      tiles: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}.png' },
+    { name: 'ArcGIS - Ocean Basemap', maxzoom: 13,
+      tiles: 'https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}.png' },
+    { name: 'ArcGIS - Hillshade', maxzoom: 16,
+      tiles: 'https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}.png' },
+  ];
+  const _rasterBasemapStyles = new Map();
+  function buildRasterBasemapStyle(entry) {
+    if (_rasterBasemapStyles.has(entry.name)) return _rasterBasemapStyles.get(entry.name);
+    const sourceId = 'ixmaps-raster-basemap';
+    const style = {
+      version: 8,
+      sources: {
+        [sourceId]: {
+          type: 'raster',
+          tiles: [entry.tiles],
+          tileSize: 256,
+          maxzoom: entry.maxzoom,
+          attribution: ESRI_ATTRIBUTION
+        }
+      },
+      // raster-opacity (applyBasemapOpacity's raster entry) fades this
+      // layer like any other basemap
+      layers: [{ id: sourceId, type: 'raster', source: sourceId, paint: {} }]
+    };
+    _rasterBasemapStyles.set(entry.name, style);
+    return style;
+  }
+  // flat's mapTypeTranslate ("terrain" → "ArcGIS - Topo", ...) applies to
+  // the raster names too
+  function flatRasterBasemap(mapType) {
+    if (typeof mapType !== 'string') return null;
+    const t = mapType.trim();
+    for (const entry of FLAT_RASTER_BASEMAPS) {
+      if (t === entry.name || (entry.aliases || []).includes(t)) return entry;
+    }
+  }
   function resolveBasemapStyleUrl(mapType) {
+    const raster = flatRasterBasemap(mapType);
+    if (raster) return buildRasterBasemapStyle(raster);
     return typeof mapType === 'string' && /dark|black|night|matter/i.test(mapType) ? BASEMAP_STYLE_URLS.dark : BASEMAP_STYLE_URLS.light;
   }
   // Real ixmaps-flat's legend look (tools/legend.js 3773-3845, via
@@ -3170,6 +3589,32 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return false;
   }
 
+  // The ocean of flat's world / orthographic maps is a {type:"Sphere"} feature: the whole map disc,
+  // filled with the layer's color. Here it is the surface of the map (the globe, or the flat
+  // map): a background layer under everything, in that color and opacity.
+  const SPHERE_BACKDROP_LAYER_ID = '__ixmaps_gl_sphere_backdrop';
+  function applySphereBackdrop(map, style) {
+    const cs = style && style.colorscheme;
+    const color = Array.isArray(cs) ? cs[0] : cs;
+    if (!color || color === 'none') return;
+    const opacity = Number.isFinite(styleNum(style.fillopacity)) ? styleNum(style.fillopacity) : 1;
+    const paint = () => {
+      try {
+        const id = map.getLayer(BLANK_BACKGROUND_LAYER_ID) ? BLANK_BACKGROUND_LAYER_ID : SPHERE_BACKDROP_LAYER_ID;
+        if (id === SPHERE_BACKDROP_LAYER_ID && !map.getLayer(id)) {
+          const first = (map.getStyle().layers || [])[0];
+          map.addLayer({ id, type: 'background', paint: {} }, first && first.id);
+        }
+        map.setPaintProperty(id, 'background-color', color);
+        map.setPaintProperty(id, 'background-opacity', opacity);
+      } catch (e) { console.warn('[ixmaps-gl] the {type:"Sphere"} ocean backdrop could not be set:', e); }
+    };
+    // isStyleLoaded() is also false AFTER the style loaded while tiles or
+    // images load (every pan/zoom) — 'style.load' never fires again then, so
+    // a Sphere theme defined at such a moment would never get its color
+    if (map.isStyleLoaded() || (map.style && map.style._loaded)) paint(); else map.once('style.load', paint);
+  }
+
   function buildBlankBackgroundStyle(color) {
     return {
       version: 8,
@@ -3316,7 +3761,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // visible (an element larger than the viewport ends up at its edge)
     function keepTooltipVisible(tipEl, x, y) {
       const w = tipEl.offsetWidth, h = tipEl.offsetHeight;
-      const vw = global.innerWidth || 1200, vh = global.innerHeight || 800;
+      // x/y and the translate are relative to the map container (it clips,
+      // overflow:hidden): its size is the room, not the window's — they
+      // differ on an embedded map
+      const vw = el.clientWidth || global.innerWidth || 1200, vh = el.clientHeight || global.innerHeight || 800;
       let tx = x > vw / 2 ? x - w - 30 : x + 30;
       let ty = y > vh / 2 ? y - h - 20 : y + 20;
       tx = Math.min(Math.max(8, tx), Math.max(8, vw - w - 8));
@@ -3659,6 +4107,14 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // explicit request (real engine's own fallback is right-anchored
       // too, just without an opinion on vertical placement).
       const legendAlignCss = legendAlignCssFor(builder.mapOptions);
+      // flat's align:"center"/"top" legend realizing (htmlgui_flat.js
+      // 445-480, legend.css 516-550): not a floating corner panel but a
+      // full-width bar over the map's top edge — width 100% capped at
+      // legendMaxWidth (1200px), legendBackground (default
+      // rgba(255,255,255,0.9)), rounded BOTTOM corners only, the title
+      // centered above, the class chips inline-block side by side and
+      // the chart-size slider inline in that same row
+      const legendCenter = /^(center|top)$/i.test(String(builder.mapOptions.align || '').trim());
       // Real ixmaps-flat's SUB-THEME (MapTheme.createSubTheme,
       // maptheme.js 14284-14292 / 15010-15160; map.Themes.enableSubThemes
       // defaults to true): marking fields of a multi-field choropleth
@@ -3728,7 +4184,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         if (legendStack && legendStack.parentNode) return legendStack;
         legendStack = document.createElement('div');
         legendStack.className = 'ix-legend-stack';
-        legendStack.style.cssText = 'position:absolute;' + legendAlignCss + 'z-index:6;width:280px;'
+        legendStack.style.cssText = legendCenter
+          // flat's center legend: the full-width bar, the panel carries
+          // the background (no stack-level radius or shadow)
+          ? 'position:absolute;left:50%;transform:translateX(-50%);top:0;z-index:6;width:100%;max-width:1200px;'
+            + 'display:flex;flex-direction:column;pointer-events:none;'
+          : 'position:absolute;' + legendAlignCss + 'z-index:6;width:280px;'
           + 'display:flex;flex-direction:column;max-height:66.6%;overflow-y:auto;'
           + 'border-radius:6px;box-shadow:' + shadow + ';pointer-events:auto;';
         if (!document.getElementById('ix-legend-stack-css')) {
@@ -3838,7 +4299,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             const looksDark = typeof builder.__effectiveDark === 'function'
               ? builder.__effectiveDark(isNaN(opacityOpt) ? 1 : opacityOpt, builder.mapOptions.mapType, legendBackground)
               : flatLook.dark;
-            const isLightLegend = rt.style.legendtheme === 'light' || (rt.style.legendtheme !== 'dark' && !looksDark);
+            const isLightLegend = legendCenter || rt.style.legendtheme === 'light' || (rt.style.legendtheme !== 'dark' && !looksDark);
             const colors = isLightLegend
               ? { bg: 'rgba(255,255,255,0.92)', fg: '#1a1a1a', shadow: '0 2px 10px rgba(0,0,0,0.18)',
                   rowMarked: 'rgba(0,0,0,0.08)', track: 'rgba(0,0,0,0.08)',
@@ -3849,7 +4310,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             // the panel bg follows the same effective decision (flatLegendLook
             // would hand the dark look a light bg here: its dark branch never
             // ran for this map, its light bg would clash with dark rows/text)
-            if (!rt.style.legendtheme) colors.bg = looksDark ? '#111' : flatLook.bg;
+            if (!rt.style.legendtheme && !legendCenter) colors.bg = looksDark ? '#111' : flatLook.bg;
             return colors;
           };
           const legendColors = lookColors();
@@ -3867,7 +4328,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // one box for every theme, as flat's #map-legend (legend.js
           // 2200-2460): the panels stack in the legend stack in theme
           // order, a line between them (see layoutLegends)
-          panel.style.cssText = 'position:relative;flex:0 1 auto;min-height:0;overflow:hidden;'
+          panel.style.cssText = legendCenter
+            // flat's center legend bar: full width, centered text, the
+            // light legendBackground, rounded bottom corners only
+            ? 'position:relative;display:flex;flex-direction:column;text-align:center;'
+              + 'background:' + legendColors.bg + ';color:' + legendColors.fg + ';font:12px/1.4 -apple-system,Arial,sans-serif;'
+              + 'padding:6px 12px 10px;pointer-events:auto;border-radius:0 0 6px 6px;'
+            : 'position:relative;flex:0 1 auto;min-height:0;overflow:hidden;'
             + 'display:flex;flex-direction:column;text-align:left;'
             + 'background:' + legendColors.bg + ';color:' + legendColors.fg + ';font:12px/1.4 -apple-system,Arial,sans-serif;'
             + 'padding:10px 12px 12px;pointer-events:auto;';
@@ -3897,13 +4364,17 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // twin pages)
           const flatUnitLegend = rt._isVectorChart() || rt._isAggregatedPie();
           const rawLegendUnit = rt.style.legendunits || rt.style.units || '';
-          const legendUnit = flatUnitLegend && rawLegendUnit && rawLegendUnit[0] !== '.' && rawLegendUnit[0] !== ' ' ? ' ' + rawLegendUnit : rawLegendUnit;
+          // COUNT: the rows are record counts — flat prints them as whole numbers
+          // with no unit (legend.js 705, 810: __formatValue(count, nDecimals,
+          // "BLANK") + (COUNT ? "" : " " + unit))
+          const countLegend = flatFlag(rt.flags, 'COUNT') && !useSum;
+          const legendUnit = countLegend ? '' : flatUnitLegend && rawLegendUnit && rawLegendUnit[0] !== '.' && rawLegendUnit[0] !== ' ' ? ' ' + rawLegendUnit : rawLegendUnit;
           // a per-item chart over several value fields: the row values as
           // flat's legend prints them (legend.js 610, 810: __formatValue
           // with valuedecimals, else 2, "BLANK" — whole numbers without
           // decimals), a colorscheme "none" part as an outline in linecolor
           const multiFieldLegend = rt._isMultiFieldChart();
-          const legendTotalText = v => ((multiFieldLegend || flatUnitLegend)
+          const legendTotalText = v => ((multiFieldLegend || flatUnitLegend || countLegend)
             ? flatFormatValue(v, legendDecimals(rt.style), 'BLANK')
             : rt._formatTooltipValue(v));
           const outlineRgb = rt.style.linecolor && styleLineColor(rt.style.linecolor) !== 'none' ? hexOrNamedToRgb(styleLineColor(rt.style.linecolor)) : [128, 128, 128];
@@ -3937,6 +4408,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // branch uses (no antimeridian wraparound handling — matches
           // that existing convention, not a new gap this introduces).
           let totals, maxTotal, order, rowsScroll;
+          // hoisted so the chart-size slider below can join the chips row
+          // in flat's center legend (legend-top-align's inline slider)
+          let rowsEl = null;
           // No-op default: TEXTLEGEND never reassigns this (see below),
           // so the LATER unconditional-looking `renderRows()` call
           // safely does nothing rather than needing its own isTextOnly
@@ -3993,8 +4467,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // share, then overflow-y:auto scrolls just the row list) —
           // the header above and description/slider below stay put.
           rowsScroll = document.createElement('div');
-          rowsScroll.style.cssText = 'flex:1 1 auto;min-height:0;overflow-y:auto;';
-          const rowsEl = document.createElement('div');
+          rowsScroll.style.cssText = legendCenter
+            // flat's center bar: one wrapped, centered row holding the
+            // chips AND the inline chart-size slider (legend.css 521-550)
+            ? 'flex:0 1 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;'
+            : 'flex:1 1 auto;min-height:0;overflow-y:auto;';
+          rowsEl = document.createElement('div');
           rowsEl.className = 'ix-legend-rows';
           // .type("...|SIMPLELEGEND") — real ixmaps-flat's OTHER legend
           // variant (confirmed against a real-engine screenshot, per
@@ -4019,7 +4497,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // smaller categories packed 3-4 per row) rather than a fixed
           // column count.
           if (rt.flags.has('SIMPLELEGEND') || rt.flags.has('COMPACTLEGEND')) {
-            rowsEl.style.cssText = 'display:flex;flex-wrap:wrap;gap:4px;';
+            // centered: inline-flex so the chips shrink to content inside
+            // the wrapping centered row (the slider joins as a sibling)
+            rowsEl.style.cssText = legendCenter ? 'display:inline-flex;flex-wrap:wrap;gap:4px;'
+              : 'display:flex;flex-wrap:wrap;gap:4px;';
           }
           rowsScroll.appendChild(rowsEl);
 
@@ -4196,7 +4677,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // same 400ms as the facets sidebar's own onRedraw use), same
           // signal already used elsewhere in this file for "the visible
           // data just changed, recompute".
-          engineApi.onRedraw(() => { computeTotals(); renderRows(); });
+          // a panel replaced (rebuild, legend off) or a removed theme: the
+          // listener goes with it — else one per rebuild piles up, each
+          // recomputing a stale runtime on every redraw
+          const offRedraw = engineApi.onRedraw(() => {
+            if (rt._legendPanel !== panel || !runtimes.includes(rt)) { offRedraw(); return; }
+            computeTotals(); renderRows();
+          });
           }
 
           // rt._triggerRedraw: see its own doc comment on LayerRuntime
@@ -4329,6 +4816,101 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             bodyEl.appendChild(desc);
           }
 
+          // flat's TIME SLIDER (legend.js 2488-2530, the szTimeField
+          // branch of makeColorLegendHTMLLong): a theme with a timefield
+          // (style.timefield, resolved into binding.time) gets a slider
+          // over its records' time span — at the span's start every
+          // record shows (setTimeFrame's own start-of-frame rule),
+          // elsewhere a [value, value+range) window. The window size is
+          // flat's own default (a day; 28 days for a span over 120 days,
+          // an hour under 7 — legend.js 2722-2729) and the range buttons
+          // below (hour/day/week/month/year, only the ones the span
+          // supports, and only when there's more than one — legend.js
+          // 2512-2543) replace it, as flat's ixmaps.setSliderRange.
+          if (rt.binding && rt.binding.time) {
+            const timeField = rt.binding.time;
+            const toMs = v => (typeof v === 'number' ? v : new Date(v).getTime());
+            let uMin = Infinity, uMax = -Infinity;
+            rt.features.forEach(f => {
+              const t = toMs((f.properties || {})[timeField]);
+              if (!isNaN(t)) { if (t < uMin) uMin = t; if (t > uMax) uMax = t; }
+            });
+            // one step guard: no span (no/broken time values) — no slider
+            if (Number.isFinite(uMin) && Number.isFinite(uMax) && uMax > uMin) {
+              const uDay = 1000 * 60 * 60 * 24;
+              const days = (uMax - uMin) / uDay;
+              let range = days > 120 ? uDay * 28 : days < 7 ? 1000 * 60 * 60 : uDay;
+              const timeRow = document.createElement('div');
+              timeRow.style.cssText = 'margin-top:10px;font-size:11px;opacity:0.8;';
+              // textContent: the field name comes from the page / project JSON
+              const timeLabel = document.createElement('span');
+              timeLabel.style.cssText = 'font-weight:600;';
+              timeLabel.textContent = String(rt.style.timefield || timeField);
+              const timeSpan = document.createElement('span');
+              timeSpan.className = 'ix-legend-time-span';
+              timeRow.append(timeLabel, ': ', timeSpan);
+              bodyEl.appendChild(timeRow);
+              const timeSlider = document.createElement('input');
+              timeSlider.type = 'range';
+              timeSlider.min = String(uMin);
+              timeSlider.max = String(uMax);
+              timeSlider.value = String(uMin);
+              timeSlider.style.cssText = 'width:100%;margin-top:0.4em;'; // flat's own slider width (legend.js 2503)
+              timeRow.appendChild(timeSlider);
+              const spanEl = () => timeRow.querySelector('.ix-legend-time-span');
+              const applyTimeFrame = () => {
+                const v = Number(timeSlider.value);
+                if (v <= uMin) {
+                  // flat: slider at its start position = every record
+                  rt.setTimeFrame(null, null);
+                  spanEl().textContent = '';
+                } else {
+                  rt.setTimeFrame(v, v + range);
+                  // flat's span text (legend.js 2737-2745): date - date
+                  // for a day-and-up window, date-time under it
+                  spanEl().textContent = range < uDay
+                    ? new Date(v).toLocaleDateString() + ' ' + new Date(v).toLocaleTimeString()
+                    : new Date(v).toLocaleDateString() + ' - ' + new Date(v + range).toLocaleDateString();
+                }
+                // a discrete control, not a pan/zoom stream: full refresh,
+                // so the rows/totals (onRedraw → computeTotals) follow live
+                refresh();
+              };
+              timeSlider.addEventListener('input', applyTimeFrame);
+              const rangeChoices = [
+                ['hour', 1000 * 60 * 60, days < 2],
+                ['day', uDay, days > 1],
+                ['week', uDay * 7, days > 13],
+                ['month', uDay * 28, days > 55],
+                ['year', uDay * 356, days > 365]
+              ].filter(c => c[2]);
+              if (rangeChoices.length > 1) {
+                const btnRow = document.createElement('div');
+                btnRow.style.cssText = 'display:flex;gap:4px;margin-top:4px;';
+                rangeChoices.forEach(([name, ms]) => {
+                  const b = document.createElement('button');
+                  b.type = 'button';
+                  b.textContent = name;
+                  const paint = active => {
+                    b.style.cssText = 'background:transparent;border:1px solid '
+                      + (active ? 'currentColor' : 'rgba(128,128,128,0.5)')
+                      + ';color:inherit;font:inherit;font-size:10px;padding:1px 7px;'
+                      + 'border-radius:4px;cursor:pointer;opacity:' + (active ? 1 : 0.55) + ';'
+                      + (active ? 'font-weight:600;' : '');
+                  };
+                  paint(ms === range);
+                  b.addEventListener('click', () => {
+                    range = ms;
+                    [...btnRow.children].forEach(x => paint(x === b));
+                    applyTimeFrame();
+                  });
+                  btnRow.appendChild(b);
+                });
+                timeRow.appendChild(btnRow);
+              }
+            }
+          }
+
           // Chart-size slider — real engine's own range (legend.js:
           // 3196-3202), 100% == scale:1, wired to changeThemeStyle(
           // themeId,"scale:"+pct/100,"set")+redrawTheme there; this
@@ -4353,20 +4935,30 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             : Math.round((styleNum(rt.style.scale) || 1) * 100);
           const sliderLabel = isOpacitySlider ? 'Opacity' : 'Chart size';
           sliderRow.innerHTML = sliderLabel + ': <span class="ix-legend-scale-val">' + initialPct + '</span>%';
-          bodyEl.appendChild(sliderRow);
+          // flat's center legend: the slider is INLINE in the chips row
+          // (legend.css 541-550: inline-block, one item width, no wrap,
+          // its input 80px) — a sibling of the chips container so the
+          // row re-render can't wipe it
+          const sliderHost = legendCenter && rowsScroll ? rowsScroll : bodyEl;
+          sliderRow.style.cssText = legendCenter && rowsScroll
+            ? 'display:inline-block;margin:0 0 0.5em 1.5em;font-size:11px;opacity:0.8;white-space:nowrap;'
+            : sliderRow.style.cssText;
+          sliderHost.appendChild(sliderRow);
           const slider = document.createElement('input');
           slider.type = 'range';
           slider.min = isOpacitySlider ? '0' : '25';
           slider.max = isOpacitySlider ? '100' : '200';
           slider.value = String(initialPct);
-          slider.style.cssText = 'width:50%;margin-top:0.4em;'; // flat's own inline slider style (legend.js 2392)
+          slider.style.cssText = legendCenter && rowsScroll
+            ? 'width:80px;vertical-align:middle;margin:0 0 0 0.5em;' // flat's inline slider width (legend.css 548)
+            : 'width:50%;margin-top:0.4em;'; // flat's own inline slider style (legend.js 2392)
           slider.addEventListener('input', () => {
             const pct = parseInt(slider.value, 10);
             sliderRow.querySelector('.ix-legend-scale-val').textContent = pct;
             rt.setStyle(isOpacitySlider ? { fillopacity: pct / 100 } : { scale: pct / 100 });
             quietRefresh();
           });
-          bodyEl.appendChild(slider);
+          sliderHost.appendChild(slider);
           }
         }
       };
@@ -4406,7 +4998,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       }
       return this;
     }
-    options(o) { this._engineOptions = o; return this; }
+    // merged, as flat's options() sets each key on its own (ixmaps.setOptions)
+    // and the live map's options() below does — .options({a}).options({b})
+    // keeps a
+    options(o) { if (o && typeof o === 'object') Object.assign(this._engineOptions, o); return this; }
     local(...args) { this._locals.push(args); return this; }
     // flat's .require(url) (htmlgui.js ixmaps.require): a script the page
     // needs (a chart library, a user chart) — page code, like a <script>
@@ -4434,7 +5029,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         this._layerBuilders.push(lb);
         return lb;
       }
-      this._layerBuilders.push(unwrapLayer(nameOrBuilder));
+      this._layerBuilders.push(asLayerBuilder(nameOrBuilder));
       return this;
     }
     // .Layer() — alias of .layer()
@@ -4459,8 +5054,38 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // the Map(id, opts, map => map.options(...)) callback form worked).
       // One microtask lets the caller's whole synchronous chain land first.
       await null;
-      const el = document.getElementById(this.containerId);
-      if (!el) throw new Error(`[ixmaps-gl] container #${this.containerId} not found`);
+      // the DASH flow animation's repaint loop (see refreshLayers): MapLibre
+      // renders on demand only, so the shader's wall-clock dash (see
+      // makeFlowPathLayer) needs a continuous frame request while any flow
+      // layer is on screen — one handle per map, or another map's refresh
+      // cancels (or blocks) this map's loop
+      let _flowRepaintRAF = null;
+      let el = document.getElementById(this.containerId);
+      if (!el) {
+        // flat's own fallback for a missing target div (htmlgui_flat.js
+        // 1055-1082): auto-create it instead of hard-failing, with a
+        // RANDOMIZED id suffix — two calls that both forgot their div
+        // and both name the same id must not collide on one element —
+        // opt.width/height (else 100%), appended to document.body, and a
+        // loud warning; reassigning this.containerId keeps every
+        // downstream lookup (the MapLibre container, the splash cleanup
+        // in createMap) consistent automatically
+        const szOriginalDiv = this.containerId;
+        do {
+          this.containerId = szOriginalDiv + '-' + Math.random().toString(36).slice(2, 8);
+        } while (document.getElementById(this.containerId));
+        console.warn('[ixmaps-gl] container #' + szOriginalDiv + ' not found in the document — creating #' + this.containerId
+          + ' automatically. Add <div id="' + szOriginalDiv + '"></div> to the page to avoid this warning.');
+        el = document.createElement('div');
+        el.id = this.containerId;
+        el.style.width = (this.mapOptions && this.mapOptions.width) ? String(this.mapOptions.width) : '100%';
+        // a percentage height would collapse against a body without a
+        // height of its own (the blank-screen case): the window's
+        // innerHeight instead, like flat's fullscreen fallback
+        el.style.height = (this.mapOptions && this.mapOptions.height) ? String(this.mapOptions.height)
+          : (global.innerHeight || 800) + 'px';
+        document.body.appendChild(el);
+      }
       // flat's init replaces the container's content with its own map page
       // (mappage.html via innerHTML), so a page's placeholder inside the
       // map div ("connecting to Internet ...", the fuel-price page) goes
@@ -4482,13 +5107,22 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         else if (typeof v === 'string' && /^\s*\d+(\.\d+)?\s*%\s*$/.test(v)
           && !(dim === 'width' ? el.clientWidth : el.clientHeight)) el.style[dim] = v.trim();
       }
-      // without width/height flat's map is "fullscreen" (htmlgui_flat.js
+      // without height flat's map is "fullscreen" (htmlgui_flat.js
       // 847-876): it fills the window, whatever the page's CSS gives the
-      // container — a container left without a height gets the window's
-      if (!(this.mapOptions && (this.mapOptions.width || this.mapOptions.height))) {
-        if (!el.clientHeight) el.style.height = '100vh';
-        if (!el.clientWidth) el.style.width = '100%';
+      // container. PER SIDE — also when only a width is given (the World
+      // Dataviz Prize pages: width 100%, no height), where the old
+      // both-sides gate left the container collapsed at 0 (a blank
+      // screen): no height option and no effective CSS height gets the
+      // window's innerHeight, kept current on window resizes (MapLibre
+      // follows its container's own size)
+      if (!(this.mapOptions && this.mapOptions.height) && !el.clientHeight) {
+        this._heightFallbackToWindow = true;
+        el.style.height = (global.innerHeight || 800) + 'px';
+        global.addEventListener('resize', () => {
+          if (this._heightFallbackToWindow) el.style.height = (global.innerHeight || 800) + 'px';
+        });
       }
+      if (!(this.mapOptions && this.mapOptions.width) && !el.clientWidth) el.style.width = '100%';
 
       // shown for the whole build() (library lazy-load + every layer's own
       // data fetch, real-world verified as the two slowest phases) through
@@ -4515,8 +5149,6 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const svgProjection = flatSvgProjectionOf(this.mapOptions.map)
         || (isFlatOrthographicName(this.mapOptions.mapProjection) ? FLAT_ORTHOGRAPHIC_PROJECTION : null);
       if (svgProjection) flatSvgProjectionByOptions.set(this._engineOptions, svgProjection);
-      const planeProjection = flatPlaneProjectionOf(this.mapOptions);
-      if (planeProjection) flatPlaneProjectionByOptions.set(this._engineOptions, planeProjection);
       if (isFlatOrthographicName(this.mapOptions.mapProjection)) {
         flatOrthographicByOptions.set(this._engineOptions, true);
         if (this._viewCenter) flatViewCenterByOptions.set(this._engineOptions, { lat: this._viewCenter[0], lng: this._viewCenter[1] });
@@ -4562,6 +5194,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // build() and every later defineLayer()/refreshTheme() share it
       const dataCache = this._dataCache = this._dataCache || new Map();
       const runtimes = [];
+      const sphereBackdrops = []; // {type:"Sphere"} layers read before the map exists
       // themes whose data comes by name (see namedDataTheme) start empty and
       // load on their own once the map is built, as in flat, where every
       // theme loads independently: a broker that answers late — or only
@@ -4593,9 +5226,17 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // instead of colliding with each other under one 'null' entry.
         let raw, cacheKey;
         const deferred = deferredFeatureLoad(spec, initialZoom);
-        if (deferred || named) {
+        // flat's WMS theme type (maptheme.js 8207-8247, the szFlag /\bWMS|IMAGE\b/
+        // realize branch) has NO data of its own — .data({server}) is an
+        // Esri MapServer export endpoint rendered as one image per view.
+        // Here the same theme becomes a MapLibre raster tile source (one
+        // 256px image per XYZ tile via the {bbox-epsg-3857} placeholder —
+        // real cached tiles, not a re-fetched viewport image per pan), see
+        // syncWmsLayers: no records to load, ever
+        const wms = spec.flags.has('WMS') || spec.flags.has('IMAGE');
+        if (deferred || named || wms) {
           raw = { type: 'FeatureCollection', features: [] };
-          cacheKey = named ? 'name:' + spec.data.name : 'deferred:' + spec.name;
+          cacheKey = named ? 'name:' + spec.data.name : wms ? 'wms:' + spec.name : 'deferred:' + spec.name;
         } else if (spec.data && spec.data.obj) {
           raw = await fetchLayerData(spec.data, spec.binding, this._engineOptions);
           cacheKey = 'obj:' + spec.name;
@@ -4618,6 +5259,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         rt._named = named;
         rt._zoomToPending = wantsZoomToExtent(spec.flags);
         runtimes.push(rt);
+        if (fc._sphere) sphereBackdrops.push(rt.style);
         notifyNewTheme(rt);
         _globalThemeRegistry.set(rt.name, rt);
         // See findRuntime's own comment on the three real theme-id
@@ -4676,6 +5318,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         renderWorldCopies: this._engineOptions.worldcopies !== false
       });
       engineOptionsByMap.set(map, this._engineOptions);
+      sphereBackdrops.forEach(style => applySphereBackdrop(map, style));
       // the live-SVG pane USER charts render into (see chartHostFor) —
       // registered here, keyed by this map's options object, so every
       // runtime (including later loadProject/map.layer ones) finds it
@@ -4810,7 +5453,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // a page legend (map.legend(html)) is positioned by the map's
         // own align option — the same rule that places the native stack
         legendEl.style.cssText = 'position:absolute;' + legendAlignCssFor(this.mapOptions) + 'z-index:5;pointer-events:none';
-        legendEl.innerHTML = this._legendHtml;
+        // flat's legend takes the pane's html OR a URL to it (htmlgui):
+        // a value without a tag is fetched, its html shown
+        if (/<[a-z!]/i.test(this._legendHtml)) legendEl.innerHTML = this._legendHtml;
+        else fetch(this._legendHtml).then(r => r.ok ? r.text() : '').then(t => { legendEl.innerHTML = t; }).catch(() => {});
         // inside the map container, never the page's body (see the pinned
         // tooltip mount) — styling body breaks page-positioned elements
         anchorInside(el);
@@ -5166,6 +5812,16 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           const rt = findRuntime(themeId);
           if (rt) { rt._hidden = !visible; refresh(); }
         },
+        // flat's Api.switchLayer (htmlgui.js 3383, htmlgui_flat.js 1531):
+        // every theme of the LAYER named — setThemeVisible takes one theme
+        // id, this takes the layer name and switches all of its themes
+        switchLayer: (layerName, visible) => {
+          const targets = runtimes.filter(r => r.name === layerName);
+          if (!targets.length) console.warn(`[ixmaps-gl] switchLayer: no layer named "${layerName}"`);
+          targets.forEach(rt => { rt._hidden = !visible; });
+          if (targets.length) refresh();
+          return engineApi;
+        },
         getCategoryColor: (themeId, value) => {
           const rt = findRuntime(themeId);
           if (!rt || !rt.categoryIndexByLabel) return null;
@@ -5175,7 +5831,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // called after every redraw (pan/zoom, or any of the setters above)
         // so a page can keep a facets sidebar in sync, mirroring the real
         // engine's htmlgui_onDrawTheme hook
-        onRedraw: (cb) => { redrawListeners.push(cb); },
+        // returns an unsubscribe (the legend drops its listener with its panel)
+        onRedraw: (cb) => {
+          redrawListeners.push(cb);
+          return () => { const i = redrawListeners.indexOf(cb); if (i >= 0) redrawListeners.splice(i, 1); };
+        },
         refresh: () => refresh(),
         // Adds ONE new layer/theme to an ALREADY-BUILT map — build()'s own
         // loop above only ever runs once, at construction, so a caller
@@ -5300,9 +5960,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           for (const rt of targets) {
             if (rt._named) { await loadNamedTheme(rt, true); continue; }
             const spec = normalizeTheme(rt._definition);
-            // flat's refresh reloads, cache or not (maptheme.js 2366: datacache = false);
-            // the fresh result also replaces the cached one for later themes
-            const raw = spec.data && spec.data.obj
+            // a WMS theme has no records to reload (see build()'s wms
+            // branch) — its raster layer is re-synced by the refresh below
+            const raw = (spec.flags.has('WMS') || spec.flags.has('IMAGE'))
+              ? { type: 'FeatureCollection', features: [] }
+              : spec.data && spec.data.obj
               ? await fetchLayerData(spec.data, rt._specBinding, builder._engineOptions)
               : await cachedLayerData(builder._dataCache, spec.data, rt._specBinding, builder._engineOptions, { reload: true }).promise;
             rt.replaceFeatures(filterAndJoin(raw, spec, runtimes));
@@ -5323,7 +5985,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // layers — leaving its groups mounted keeps the charts on the
           // map after map.remove()/replace() (censimenti's sidebar)
           if (rt._clearUserChartPane) rt._clearUserChartPane();
+          if (rt._chartPaneDefs) { rt._chartPaneDefs.remove(); rt._chartPaneDefs = null; }
           if (rt._chartHost && rt._chartHost.runtimes) rt._chartHost.runtimes.delete(rt);
+          // and its hidden <name>_init group (userChartHost, on the body)
+          if (rt._userChartGroup) { rt._userChartGroup.remove(); rt._userChartGroup = null; }
         });
         const removed = removedRuntimes.length > 0;
         // stale-registry guard: _globalThemeRegistry is a bare name->
@@ -5531,8 +6196,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         let raw;
         const deferred = deferredFeatureLoad(spec, map.getZoom());
         const named = namedDataTheme(spec);
+        // WMS themes carry no records (see build()'s own wms branch)
+        const wms = spec.flags.has('WMS') || spec.flags.has('IMAGE');
         let sourceKey = null;
-        if (deferred || named) {
+        if (deferred || named || wms) {
           raw = { type: 'FeatureCollection', features: [] };
         } else if (spec.data && spec.data.obj) {
           // in memory already — nothing to cache (see build())
@@ -5552,6 +6219,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         rt._dataSourceKey = named ? 'name:' + spec.data.name
           : sourceKey || JSON.stringify({ url: spec.data && spec.data.url, urls: spec.data && spec.data.urls, type: spec.data && spec.data.type, query: spec.data && spec.data.query, obj: !!(spec.data && spec.data.obj) });
         runtimes.push(rt);
+        if (fc._sphere) applySphereBackdrop(map, rt.style);
         _globalThemeRegistry.set(rt.name, rt);
         if (rt.meta && rt.meta.name && rt.meta.name !== rt.name) _globalThemeRegistry.set(rt.meta.name, rt);
         if (themeIdOf(rt) !== rt.name) _globalThemeRegistry.set(themeIdOf(rt), rt);
@@ -5622,8 +6290,6 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           const svgProjection = flatSvgProjectionOf(svg) || (/orthographic\.svg$/i.test(svg) ? FLAT_ORTHOGRAPHIC_PROJECTION : null);
           if (svgProjection) flatSvgProjectionByOptions.set(builder._engineOptions, svgProjection);
           else flatSvgProjectionByOptions.delete(builder._engineOptions);
-          if (svgProjection && svgProjection.invert) flatPlaneProjectionByOptions.set(builder._engineOptions, svgProjection);
-          else flatPlaneProjectionByOptions.delete(builder._engineOptions);
           if (/orthographic\.svg$/i.test(svg)) flatOrthographicByOptions.set(builder._engineOptions, true);
           else { flatOrthographicByOptions.delete(builder._engineOptions); flatViewCenterByOptions.delete(builder._engineOptions); }
         }
@@ -5794,7 +6460,87 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           if (order !== refreshLayers._lastOrder) { refreshLayers._lastOrder = order; console.info('[ixmaps-gl debug] draw order (bottom → top): ' + order); }
         }
         overlay.setProps({ layers });
+        // start/stop the flow repaint loop: any layer whose paths carry
+        // dash offsets animates, and only then (a static map renders
+        // nothing new; the loop is one rAF, one triggerRepaint each)
+        const flowOn = layers.some(l => l.constructor.layerName === 'FlowPathLayer'
+          && l.props.data && l.props.data.some(d => d.dash && d.dash[0] + d.dash[1] > 0));
+        if (glDebug()) console.info('[ixmaps-gl debug] flow loop on: ' + flowOn + ' (' + layers.filter(l => l.constructor.layerName === 'FlowPathLayer').length + ' flow layers, '
+          + (layers.find(l => l.constructor.layerName === 'FlowPathLayer') || {props: {data: []}}).props.data.length + ' paths)');
+        if (flowOn) {
+          if (_flowRepaintRAF == null) {
+            const loop = () => { if (map.triggerRepaint) map.triggerRepaint(); _flowRepaintRAF = global.requestAnimationFrame(loop); };
+            _flowRepaintRAF = global.requestAnimationFrame(loop);
+          }
+        } else if (_flowRepaintRAF != null) {
+          global.cancelAnimationFrame(_flowRepaintRAF);
+          _flowRepaintRAF = null;
+        }
+        // flat's WMS themes render as native raster layers, not deck.gl —
+        // reconcile them with the current runtimes on every rebuild
+        syncWmsLayers();
+      }
+
+      // flat's WMS theme type (szFlag /\bWMS|IMAGE\b/, maptheme.js 8207-8247):
+      // .data({server}) names an Esri MapServer export endpoint, flat draws
+      // ONE f=image request per view (bbox in 4326, the view's pixel size),
+      // opacity from fillOpacity || nOpacity || 0.8. Here the same theme is
+      // a MapLibre raster tile source instead — the SAME export call per
+      // 256px XYZ tile ({bbox-epsg-3857} → bboxSR=3857), which MapLibre
+      // caches, loads progressively and never re-fetches per pan step;
+      // deck.gl's interleaved layers stay on top of it. server is read
+      // from .style() as flat does (maptheme.js 1408: styleObj.server),
+      // or from .data() as this port's own pages write it.
+      // ids of the raster layers this function ever added — lets it skip
+      // map.getStyle() (a deep copy of the whole style) on every rebuild
+      // of a page that has no WMS theme
+      const wmsLayerIds = new Set();
+      function syncWmsLayers() {
+        if (!map || !map.getLayer) return;
+        const idOf = name => 'ixmaps-wms:' + String(name).replace(/[^a-zA-Z0-9_-]/g, '_');
+        const desired = new Map();
+        runtimes.forEach(rt => {
+          if (!(rt.flags.has('WMS') || rt.flags.has('IMAGE'))) return;
+          const server = (rt.style && rt.style.server) || (rt._definition && rt._definition.data && rt._definition.data.server);
+          if (server) desired.set(rt.name, { rt, server });
+        });
+        if (!desired.size && !wmsLayerIds.size) return;
+        // a removed WMS theme takes its raster layer with it — as flat's
+        // clearWMS does (ids are sanitized names, compare id-to-id)
+        const ownedIds = new Set([...desired.keys()].map(idOf));
+        [...wmsLayerIds].forEach(id => {
+          if (ownedIds.has(id)) return;
+          wmsLayerIds.delete(id);
+          try { if (map.getLayer(id)) map.removeLayer(id); } catch (e) { /* already gone */ }
+          try { if (map.getSource(id)) map.removeSource(id); } catch (e) { /* already gone */ }
+        });
+        desired.forEach(({ rt, server }, name) => {
+          const id = idOf(name);
+          wmsLayerIds.add(id);
+          const sep = server.indexOf('?') >= 0 ? '&' : '?';
+          const tiles = [server + sep + 'f=image&transparent=true&bbox={bbox-epsg-3857}&bboxSR=3857&size=256,256'];
+          if (!map.getSource(id)) {
+            map.addSource(id, { type: 'raster', tiles, tileSize: 256 });
+          }
+          if (!map.getLayer(id)) {
+            map.addLayer({ id, type: 'raster', source: id, paint: { 'raster-opacity': 1 } });
+          }
+          // flat's own opacity reading (maptheme.js 8240): fillOpacity ||
+          // nOpacity || 0.8 — style "opacity" already folded into
+          // fillopacity by normalizeTheme
+          const opacity = styleNum(rt.style.fillopacity) || 0.8;
+          if ((map.getPaintProperty(id, 'raster-opacity') || 1) !== opacity) {
+            map.setPaintProperty(id, 'raster-opacity', opacity);
+          }
+          const vis = rt._hidden ? 'none' : 'visible';
+          if ((map.getLayoutProperty(id, 'visibility') || 'visible') !== vis) {
+            map.setLayoutProperty(id, 'visibility', vis);
+          }
+        });
       }
+      // a style swap (setMapType) drops every native layer — rebuild the
+      // WMS ones once the new style stands
+      map.on('style.load', () => syncWmsLayers());
 
       // isZooming flips true/false on every 'zoomstart'/'zoomend' pair —
       // and a scroll-wheel or trackpad zoom fires MANY such pairs per
@@ -5890,7 +6636,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         } finally { inDrawThemeHook = false; }
       }
       function notifyRedraw() {
-        redrawListeners.forEach(cb => { try { cb(); } catch (err) { console.error('[ixmaps-gl] onRedraw callback failed:', err); } });
+        redrawListeners.slice().forEach(cb => { try { cb(); } catch (err) { console.error('[ixmaps-gl] onRedraw callback failed:', err); } });
         callDrawThemeHooks();
       }
 
@@ -6072,6 +6818,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         };
       }
       _resolveMapReady(engineApi);
+      if (this.mapOptions && this.mapOptions.name) namedMapReady(this.mapOptions.name).resolve(engineApi);
       resolveBuilt();
       namedLoads.forEach(rt => { listenNamedData(rt); if (!rt._deferredLoad) loadNamedTheme(rt, false); });
       return engineApi;
@@ -6090,7 +6837,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // theirs and are not overridden.
   for (const m of ['replace', 'add', 'newTheme', 'remove', 'removeTheme', 'replaceTheme', 'changeThemeStyle', 'setThemeStyle',
     'refreshTheme', 'redrawTheme', 'setBasemapOpacity', 'setMapType', 'setMapTypeId', 'mapType', 'setProjection', 'resize',
-    'loadProject', 'project', 'setThemeVisible', 'setThemeTimeFrame', 'show', 'hide', 'getZoom', 'getThemeObj',
+    'loadProject', 'project', 'setThemeVisible', 'switchLayer', 'setThemeTimeFrame', 'show', 'hide', 'getZoom', 'getThemeObj',
     'getThemes', 'theme', 'setView']) {
     if (!MapBuilder.prototype[m]) {
       MapBuilder.prototype[m] = function (...args) {
@@ -6103,6 +6850,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // class used throughout this file — a real bug caught during testing
   // (every `new Map()` below silently resolved to *this* function instead)
   function createMap(containerId, options, mapFn) {
+    if (options && options.name) namedMapReady(options.name);
     const builder = new MapBuilder(containerId, options);
     if (mapFn) mapFn(builder);
     // If build() rejects (bad data URL, misconfigured CHOROPLETH join,
@@ -6113,7 +6861,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // .catch()/await still sees the real failure — this only guarantees
     // the splash doesn't outlive it.
     const promise = builder.build().catch(err => {
-      const el = document.getElementById(containerId);
+      // builder.containerId, not the closure's: build() reassigns it when
+      // it had to auto-create a missing container (flat's fallback above)
+      const el = document.getElementById(builder.containerId);
       const splash = el && el.querySelector('.ixmaps-splash');
       if (splash) hideSplash(splash);
       throw err;
@@ -6168,7 +6918,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // flat's mapApi.setView(center, zoom) (htmlgui_flat.js 1327) — the
       // same live-or-build-time split as .view() above
       promise.setView = (...args) => promise.view(...args);
-      promise.options = (...args) => { builder.options(...args); return promise; };
+      // post-build: the live map's options() (merged into the options
+      // object the running themes hold), as .view() above — the builder's
+      // own is read once, by build()
+      promise.options = (...args) => { if (resolvedApi) resolvedApi.options(...args); else builder.options(...args); return promise; };
       promise.attribution = (...args) => { builder.attribution(...args); return promise; };
       promise.legend = (...args) => { builder.legend(...args); return promise; };
       promise.local = (...args) => { builder.local(...args); return promise; };
@@ -6392,11 +7145,6 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // the flat SVG projection a map's options object belongs to (set by the
   // map's init and loadProject; the runtimes only see the options object)
   const flatSvgProjectionByOptions = new WeakMap();
-  // the projection plane a map's VECTOR / BEZIER flows are drawn in: flat's
-  // map file, or the Map() option mapProjection ("equalearth") — flat computes
-  // the curves in its map's own coordinates, so the same flow bows around the
-  // pole there. (Unlike flatSvgProjectionByOptions it leaves the view framing alone.)
-  const flatPlaneProjectionByOptions = new WeakMap();
   // a map that is flat's orthographic one (drawn as MapLibre's globe): its object scale is
   // flat's (scale × the globe's pixels per degree at its center, measured on flat 2026-10-10
   // on the mechanical-goods globe page, the same at view zooms 2.5 and 3.5: 197.44e6; the
@@ -6439,12 +7187,6 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const radius = 512 * Math.pow(2, zoom) / (2 * Math.PI * c);
     return Math.log2(globeDiscRadius(radius, height > 0 ? height : 768) * 2 * Math.PI / 512);
   }
-  function flatPlaneProjectionOf(mapOptions) {
-    const byUrl = flatSvgProjectionOf(mapOptions.map);
-    if (byUrl) return byUrl;
-    const named = FLAT_SVG_PROJECTIONS[String(mapOptions.mapProjection || '').trim().toLowerCase()];
-    return named || null;
-  }
   // flat SVG map scale ÷ the Mercator one at the same on-screen size (1
   // without a flat SVG projection)
   function flatMapScaleRatio(mapOptions) {
@@ -7232,8 +7974,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     _measureCtx.font = fontPx + 'px arial';
     return _measureCtx.measureText(text).width;
   }
-  function wrapTitleLines(text, fontPx, widthPx) {
-    const width = w => titleTextWidth(w, fontPx);
+  function wrapTitleLines(text, fontPx, widthPx, measure = titleTextWidth) {
+    const width = w => measure(w, fontPx);
     const lines = [];
     for (const word of String(text).split(/\s+/).filter(Boolean)) {
       const last = lines.length ? lines[lines.length - 1] + ' ' + word : null;
@@ -7519,6 +8261,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // independently-rendered systems (deck.gl's icon quad, MapLibre's own
   // globe-sphere mesh) competing for the same depth-buffer real estate.
   const ICON_LAYER_GLOBE_PARAMETERS = { cullMode: 'none', depthCompare: 'always' };
+  // a transparent 1x1 PNG — the placeholder icon of an external symbol
+  // file still being rasterized (see _buildSequenceChartLayers' urlIcon)
+  const TRANSPARENT_1PX_PNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
 
   // GLOBE_HORIZON_DEG / isOnVisibleHemisphere: `depthCompare: 'always'`
   // above (needed to stop the near-surface z-fighting/half-moon bug —
@@ -7790,6 +8535,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     switch (shape) {
       case 'squarefull': return Math.abs(dx) <= r && Math.abs(dy) <= r;
       case 'square': return Math.abs(dx) <= r * Math.SQRT1_2 && Math.abs(dy) <= r * Math.SQRT1_2;
+      case 'roundrectfull': return Math.abs(dx) <= r && Math.abs(dy) <= r;
       case 'roundrect': return Math.abs(dx) <= r * 0.8 && Math.abs(dy) <= r * 0.8;
       case 'diamond': case 'carot': return Math.abs(dx) + Math.abs(dy) <= r;
       case 'empty': return false;
@@ -8179,39 +8925,55 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return { bars, texts, lines, extent: ext[0] <= ext[2] ? ext : [0, 0, 0, 0], width: W, sizer };
   }
 
-  // flat's BOX and TITLE around a chart (maptheme.js 18758-18905), in the
-  // chart's units: `extent` the chart's [x0, y0, x1, y1]; o: { margin
-  // (boxmargin, 2), titleFont, title (text or ''), bottomTitle, alignRight,
-  // measure }. The margin is min(2 m, m · width / 30); the title's first
-  // baseline 0.7 font above the chart (BOTTOMTITLE: one font below), its
-  // lines wrapped to the chart's width and stacked upward; the box encloses
-  // chart and title, its top trimmed by 0.1 font when titled. Returns
-  // { rect: [x0, y0, x1, y1], title: { lines, x, anchor, baseline, font } | null }
-  function flatChartBox(extent, o) {
+  // THE box-and-title layout of every chart type (flat's BOX block,
+  // maptheme.js 18757-18925): single symbol, SEQUENCE, PIE and BAR all call
+  // this. `extent`: the chart's drawn [x0, y0, x1, y1] around its anchor (px;
+  // chart units with unit 1). o: { unit (px per flat unit, default 1), margin
+  // (boxmargin, flat's 2), circular (CIRCULARBOX), radius / center (the
+  // circle's base radius and center; default the extent's half longer side
+  // and its center), titleText (with the titleunits suffix, '' / null: no
+  // title), titleFont (px, or w => px for DTEXT), bottomTitle, alignRight,
+  // wrap, measure }. Returns { rect (rectangular box), boxR / cx / cy (the
+  // circular box: radius, center), w (the extent's width), title { text,
+  // lines, x, anchor, top, baseline, f, extent } }.
+  // The margin is min(2 m u, m w / 30); the title's first baseline 0.7 font
+  // above the box (BOTTOMTITLE: one font below), wrapped to the chart's width
+  // (the circle's diameter); a rectangular box grows to enclose the title,
+  // its top trimmed by 0.1 font. arial: ascent 0.905, descent 0.212.
+  function chartBoxLayout(extent, o) {
     const e = extent.slice();
-    const w = e[2] - e[0];
-    const margin = Math.min(2 * o.margin, o.margin * w / 30);
+    const w = e[2] - e[0], h = e[3] - e[1];
+    const unit = o.unit == null ? 1 : o.unit;
+    const circular = !!o.circular;
+    const margin = Math.min(2 * o.margin * unit, o.margin * w / 30);
+    const center = o.center || [(e[0] + e[2]) / 2, (e[1] + e[3]) / 2];
+    const boxR = circular ? (o.radius != null ? o.radius : Math.max(w, h) / 2) * 1.1 + margin : 0;
     let title = null;
-    if (o.title) {
-      const f = o.titleFont;
-      const measure = o.measure || ((text, font) => text.length * font * 0.55);
-      const lines = [];
-      for (const word of String(o.title).split(/\s+/).filter(Boolean)) {
-        const last = lines.length ? lines[lines.length - 1] + ' ' + word : null;
-        if (last !== null && measure(last, f) <= w) lines[lines.length - 1] = last;
-        else lines.push(word);
-      }
+    if (o.titleText) {
+      const f = typeof o.titleFont === 'function' ? o.titleFont(w) : o.titleFont;
+      const measure = o.measure || titleTextWidth;
+      const lines = wrapTitleLines(o.titleText, f, circular ? boxR * 2 : w, measure).split('\n');
       const width = Math.max(...lines.map(l => measure(l, f)));
-      const baseline = o.bottomTitle ? e[3] + f : e[1] - 0.7 * f - (lines.length - 1) * f;
-      const x = o.alignRight ? e[2] : e[0];
-      const x0 = o.alignRight ? x - width : x;
-      title = { lines, x, anchor: o.alignRight ? 'end' : 'start', baseline, font: f };
-      e[0] = Math.min(e[0], x0);
-      e[1] = Math.min(e[1], baseline - 0.905 * f) + 0.1 * f;
-      e[2] = Math.max(e[2], x0 + width);
-      e[3] = Math.max(e[3], baseline + (lines.length - 1) * f + 0.212 * f);
+      // first baseline; lines go down one font each
+      const base = circular
+        ? (o.bottomTitle ? center[1] + boxR + f : center[1] - boxR - 0.7 * f - (lines.length - 1) * f)
+        : (o.bottomTitle ? e[3] + f : e[1] - 0.7 * f - (lines.length - 1) * f);
+      const x = circular ? center[0] + unit / 2 : (o.alignRight ? e[2] : e[0]);
+      const anchor = circular ? 'middle' : (o.alignRight ? 'end' : 'start');
+      const x0 = anchor === 'middle' ? x - width / 2 : anchor === 'end' ? x - width : x;
+      title = { text: lines.join('\n'), lines, x, anchor, top: base - 0.8 * f, baseline: base, f,
+        extent: [x0, base - 0.905 * f, x0 + width, base + (lines.length - 1) * f + 0.212 * f] };
     }
-    return { rect: [e[0] - margin, e[1] - margin, e[2] + margin, e[3] + margin], title, width: w };
+    let rect = null;
+    if (!circular) {
+      const b = e.slice();
+      if (title) {
+        b[0] = Math.min(b[0], title.extent[0]); b[1] = Math.min(b[1], title.extent[1]) + 0.1 * title.f;
+        b[2] = Math.max(b[2], title.extent[2]); b[3] = Math.max(b[3], title.extent[3]);
+      }
+      rect = [b[0] - margin, b[1] - margin, b[2] + margin, b[3] + margin];
+    }
+    return { rect, boxR, cx: center[0], cy: center[1], w, margin, title };
   }
 
   // CHART|PIE / DONUT: one pie's slices as real ixmaps-flat lays them out —
@@ -8243,10 +9005,38 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   //    centered on 12 o'clock), HALF over 180° from 270° (HALFPLUS10 200°
   //    from 260°, HALFMINUS10 160° from 280°, HALFPLUS20 220° from 250°,
   //    HALFMINUS20 140° from 290°)
+  //  - STARBURST (piechart.js 246, 324-355, 415-420): every part >= 0, the
+  //    angles EQUAL (the value is the ray's radius, not its sweep) and the
+  //    percents NOT normalized — raw values. The FLOWER/RAYS variants
+  //    (XLFLOWER/XLRAYS, LFLOWER/LRAYS, XSFLOWER/XSRAYS, SFLOWER/SRAYS,
+  //    FLOWER/RAYS) cap the ray angle (maxAngle / 4 / 12 / 10 / none) and
+  //    inset a gap (10 / 20 / 40 / 33 / 35 % of it) on both sides of each
+  //    ray. The ray RADIUS is
+  //    computed in _buildPieLayers (it needs the theme's maxValue)
   function pieSliceLayout(values, t, opts = {}) {
     t = String(t || '');
     const has = re => re.test(t);
-    const parts = values.map(v => (isNaN(v) ? 0 : v));
+    // flat's STARBURST (piechart.js realize 246, 324-355, 415-420): the
+    // parts get EQUAL angles — the value is the ray's radius, not its
+    // sweep — and every part is clamped to >= 0. The FLOWER/RAYS
+    // variants (flat maps XLFLOWER to XLRAYS & kin, maptheme.js
+    // 20169-20186) cap the ray angle and leave a gap between the rays.
+    // flat's `nRadInner = max(5, nRadInner)` for the ray variants is 5
+    // units of the chart's INTERNAL coordinate system — measured on the
+    // ISTAT story: 5 of the disc's 197 internal units, 0.28 screen px,
+    // sub-pixel and invisible (the petals go to the center; an inner
+    // radius shows only with DONUT) — so starInner here is 0 for the
+    // ray variants too, and only DONUT+STARBURST starts its rays at
+    // the donut's inner radius (see _buildPieLayers)
+    const star = has(/STARBURST/);
+    const starRay = !star ? null
+      : /XLFLOWER|XLRAYS/.test(t) ? { cap: 4, gap: 0.10 }
+      : /LFLOWER|LRAYS/.test(t) ? { cap: 4, gap: 0.20 }
+      : /XSFLOWER|XSRAYS/.test(t) ? { cap: 12, gap: 0.40 }
+      : /SFLOWER|SRAYS/.test(t) ? { cap: 10, gap: 0.33 }
+      : /FLOWER|RAYS/.test(t) ? { cap: 1, gap: 0.35 }
+      : { cap: 1, gap: 0 };
+    const parts = values.map(v => (isNaN(v) ? 0 : star ? Math.max(0, v) : v));
     const sum = parts.reduce((a, v) => a + v, 0);
     const autocomplete = has(/AUTOCOMPLETE/);
     if (sum === 0 && !autocomplete) return null;
@@ -8299,13 +9089,18 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // flat draws its "Pie error: no values !" circle here
     if (!any && !autocomplete) return null;
     const pctSum = slices.reduce((a, sl) => a + sl.percent, 0);
-    if (pctSum !== 100) {
+    // flat's STARBURST keeps the parts' raw values (piechart.js 246-258:
+    // no 100% normalization, no AUTOCOMPLETE) — the value is the radius
+    if (!star && pctSum !== 100) {
       if (autocomplete && pctSum < 100) slices.push({ i: -1, value: null, percent: Math.floor((100 - pctSum) * 100000) / 100000, complement: true });
       else slices.forEach(sl => { sl.percent = sl.percent / pctSum * 100; });
     }
     let end = 0;
     if (has(/SYMMETRIC/) && slices.length) {
-      if (has(/BIGTOTOP/)) {
+      if (star) {
+        // flat piechart.js 296-299: the first ray centered on 12 o'clock
+        end = 360 - Math.floor(360 / parts.length / 2);
+      } else if (has(/BIGTOTOP/)) {
         end = 360;
         let x = 0;
         for (; x < slices.length && slices[x] !== biggest; x++) end -= slices[x].percent < 100 ? Math.floor(360 / 100 * slices[x].percent) : 0;
@@ -8326,6 +9121,20 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     if (has(/HALFMINUS20/)) maxAngle = 140;
     const out = [];
     slices.forEach((sl, k) => {
+      if (star) {
+        // flat piechart.js 324-355, 395-403: the angles advance by the
+        // FULL equal angle (the ray variants capped), the gap inset on
+        // both sides of a ray; a ray's own sweep is that reduced angle
+        const angle = Math.min(maxAngle / starRay.cap, maxAngle / parts.length);
+        const base = end % 360;
+        end = base + angle;
+        if (end > 360) end = end % 360;
+        const sweep = angle * (1 - 2 * starRay.gap);
+        const start = base + angle * starRay.gap;
+        if (sweep <= 0 || start < 0) return;
+        out.push(Object.assign(sl, { start, sweep, k }));
+        return;
+      }
       const sweep = sl.percent / 100 * maxAngle;
       const start = end % 360;
       end = start + sweep;
@@ -8452,6 +9261,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const parts = [], zeroNot = [];
     for (let k = 0; k < o.fields.length; k++) {
       let v = parseFloat(raw[o.fields[k]]);
+      // flat's weights multiply every record's per-field value as it is
+      // accumulated (maptheme.js 10506-10508) — the SIZE (nValueSize)
+      // stays raw, exactly as there
+      if (o.weights) v = v * o.weights(k);
       zeroNot[k] = false;
       if (isNaN(v)) {
         if (!r.undefinedOk) return null;
@@ -8661,6 +9474,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); }
     return (h >>> 0) / 4294967296;
   }
+  // a flow's dash phase in [0, 1): flat's random one, the same for the
+  // same arc on every rebuild
+  function flowDashPhase(p1, p2) {
+    return hashUnit('dash:' + p1[0] + ',' + p1[1] + '&' + p2[0] + ',' + p2[1]);
+  }
 
   // points of a cubic Bézier, n segments (n + 1 points)
   function cubicBezierPoints(p0, c1, c2, p3, n) {
@@ -8804,7 +9622,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const word = w => { const re = new RegExp('\\b' + w + '\\b'); return [...flags].some(f => re.test(f)); };
     const info = {
       sort: word('SORT'), up: word('UP'), down: word('DOWN'),
-      star: has('STAR') && !has('CENTER'), horz: has('HORZ') && !has('CENTER'),
+      star: has('STAR') && !flatFlag(flags, 'CENTER'), horz: has('HORZ') && !flatFlag(flags, 'CENTER'),
       expand: has('EXPAND'), expandmax: has('EXPANDMAX'), linear: has('LINEAR'), sizep1: has('SIZEP1'),
       compress: has('COMPRESS'), compressmax: has('COMPRESSMAX')
     };
@@ -8823,14 +9641,21 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const up = fl.up;
     const maxR = opts.maxRadius || 0;
     const nStarParts = opts.nParts || counts.length;
-    let angle = 0, starR = null, x = 0;
+    // flat's star radius (nStarRadius, 0 per chart) is set ONLY by the FIRST
+    // part of the sorted order (maptheme.js 22301-22316: `if (i === 0)`), and a
+    // part of value 0 is skipped before it (22222): a chart whose first part
+    // (with SORT|UP the smallest) is 0 keeps star radius 0, so with UP every
+    // part sits on the center — only a chart with ALL parts non-zero spreads
+    // into its star. (A cell of a CATEGORICAL AGGREGATE theme has a zero part
+    // for every category it lacks.)
+    let angle = 0, starR = 0, x = 0;
     order.forEach((p, k) => {
       if (!p.v) return;
       const r = radiusOf(p.v);
       if (!(r > 0)) return;
       let px = 0, py = 0;
       if (star) {
-        if (starR === null) {
+        if (k === 0) {
           starR = r;
           if (fl.expand && fl.sort && up) {
             const big = order[order.length - 1].v, mv = opts.maxValue || big || 1;
@@ -8838,7 +9663,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           }
           if (fl.compress) starR *= fl.compressmax ? 0.25 : 0.5;
         }
-        if (parts.length > 0 || up) {
+        // flat: `(i > 0 || UP) && nRadius` — i the part's index in the sorted order
+        if (k > 0 || up) {
           const c = starR + r;
           const b = Math.sqrt(Math.max(0, c * c - r * r));
           let f = 90 - Math.asin(Math.min(1, b / c)) / Math.PI * 180;
@@ -9052,6 +9878,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // which every other caller here still relies on unchanged.
   function resolvePartsClass(value, partsA) {
     if (!partsA || isNaN(value)) return null;
+    // explicit ranges: a value below the first break is class 0, as flat's
+    // class loop (value < parts[0].max) puts it
+    if (partsA.length && partsA[0].clampLow && value < partsA[0].min) return 0;
     for (let i = 0; i < partsA.length; i++) {
       const isLast = i === partsA.length - 1;
       const inLower = value >= partsA[i].min;
@@ -9384,7 +10213,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // 7740-7801): a value that is no number counts as 0 — unless
   // UNDEFINEDISNOTVALUE —, and 0 is a value — unless ZEROISNOTVALUE
   function flatNumber(v, flags) {
-    let n = parseFloat(v);
+    // flat's own value scan (maptheme.js __scanValue 9265-9272): a
+    // value with a comma is EUROPEAN format — dots stripped as
+    // thousands separators, the comma is the decimal ("78,8" -> 78.8);
+    // a value without one is parsed plain, blanks stripped. Applied
+    // to every theme value in flat, so also here
+    const s = String(v);
+    let n = s.includes(',') ? parseFloat(s.replace(/\./g, '').replace(/,/g, '.')) : parseFloat(s.replace(/ /g, ''));
     if (isNaN(n)) n = flags && flags.has('UNDEFINEDISNOTVALUE') ? NaN : 0;
     if (n === 0 && flags && flags.has('ZEROISNOTVALUE')) return NaN;
     return n;
@@ -9395,11 +10230,35 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const bins = [arr.reduce((a, v) => (v < a ? v : a), Infinity), m];
     while (arr.length > 1) {
       arr = arr.filter(d => d > m);
+      // every value left equals the last mean (a tie at the top): there is
+      // no head above it — mean([]) would add a NaN break (flat's own bug)
+      if (!arr.length) break;
       m = mean(arr);
       bins.push(m);
     }
     return bins;
   }
+  // Explicit class breaks: .style({ranges}) with the RANGES flag (flat,
+  // maptheme.js 2324 / 12905-12960). n+1 break values (a comma or "|"
+  // separated string, or an array) are n classes [r_i, r_i+1] — a class
+  // max is nudged by 1e-9 as flat does, so a break value belongs to the class
+  // below it. Not for CATEGORICAL (there the values are exact categories).
+  // null when the theme has no usable explicit ranges.
+  function explicitRangeBreaks(style, flags) {
+    if (!flags || !flags.has('RANGES') || flags.has('CATEGORICAL')) return null;
+    let r = style && style.ranges;
+    if (typeof r === 'string') r = r.split(r.includes('|') ? '|' : ',');
+    if (!Array.isArray(r)) return null;
+    r = r.map(Number);
+    return r.length > 1 && r.every(isFinite) ? r : null;
+  }
+  function explicitRangeParts(breaks) {
+    const parts = [];
+    for (let i = 0; i < breaks.length - 1; i++) parts.push({ min: breaks[i], max: breaks[i + 1] + 0.000000001 });
+    parts[0].clampLow = true;
+    return parts;
+  }
+
   function flatRangeParts(values, nMin, nMax, nParts, flags, centerValue) {
     const rawMin = nMin, rawMax = nMax;
     if (centerValue != null && !isNaN(centerValue)) {
@@ -9424,6 +10283,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // values above the last mean, while more than one is left
     if (flags.has('HEADTAIL')) {
       const b = headTailBreaks(values);
+      // fewer breaks than classes (small or low-variance data): the surplus
+      // classes padded at the top with the last break, as naturalBreaks
+      // does — flat reads past the end (undefined bounds, records in no class)
+      while (b.length < nParts + 1) b.push(b[b.length - 1]);
       parts = new Array(nParts).fill(null).map((_, i) => ({ min: b[i], max: b[i + 1] - 0.000001 }));
     } else if (flags.has('QUANTILE')) parts = quantileBreaks(values, nParts);
     else if (flags.has('NATURAL')) parts = naturalBreaks(values, nParts);
@@ -9523,6 +10386,44 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // On copies of the features' properties — the page's data is not changed.
   // AGGREGATE themes: not here — flat computes field100 on the aggregated
   // sums (aggregateField100).
+  // .style({weights}) — flat's weighted values: every record's per-field
+  // value × its field's weight, BEFORE the field100 arithmetic (the
+  // per-record multiply in addItemValues, maptheme.js 9007-9009; the
+  // aggregate loader reads the weight per value field at 10506-10508).
+  // One number, or a pipe list with one weight per value field; a field
+  // beyond the list takes the first weight (flat: `szWeightsA[i] ||
+  // szWeightsA[0]`), the aggregate loader instead repeats the LAST one
+  // (10262-10266) — `repeatLast`; no weights at all leaves the values raw.
+  // The Milano page: weights 0.1 over km-long street lengths + FRACTION →
+  // cars per 100 m
+  function fieldWeightOf(style, nFields, repeatLast) {
+    const w = style && style.weights;
+    if (w == null || w === '') return null;
+    // flat's toArray (maptheme.js 999-1014): split on '|' when the
+    // string has one, else on ',' — "1,10,10" is a THREE-weight list
+    // (the Happy Planet page), not one weight of 1
+    const s = Array.isArray(w) ? w.join('|') : String(w);
+    const list = (s.includes('|') ? s.split('|') : s.split(',')).map(v => parseFloat(v));
+    if (!list.some(v => !isNaN(v))) return null;
+    if (repeatLast) { const last = list[list.length - 1]; while (list.length < nFields) list.push(last); }
+    return i => list[i] || list[0] || 1;
+  }
+  // flat's weighted record for the AGGREGATE path (maptheme.js 10506-10508):
+  // the value fields' own values weighted — the class value and the field100
+  // value stay raw, exactly as flat reads them
+  function weightedRecord(f, weightOf) {
+    // a pie record's parts were weighted in flatPieRecord, and its size
+    // (nValueSize) stays raw — nothing to do here
+    if (f.properties && f.properties.pie) return f;
+    const p = Object.assign({}, f.properties);
+    if (p.value !== undefined && !isNaN(p.value)) p.value = p.value * weightOf(0);
+    if (Array.isArray(p.series)) p.series = p.series.map((v, i) => (isNaN(v) ? v : v * weightOf(i)));
+    // the multi-field pie's parts — the SAME per-field values as series,
+    // but the grid cell's pie accumulates THESE (flatPieAccumulate's
+    // rec.parts), so they carry the weights too
+    if (Array.isArray(p.parts)) p.parts = p.parts.map((v, i) => (isNaN(v) ? v : v * weightOf(i)));
+    return Object.assign({}, f, { properties: p });
+  }
   function applyField100(features, binding, flags, style) {
     if (!binding || !binding.value || !Array.isArray(features)) return features;
     // AGGREGATE: flat applies field100 to the aggregated sums
@@ -9532,7 +10433,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const fields = String(binding.value).split('|');
     const auto100 = flags.has('AUTO100') && !flags.has('AGGREGATE');
     const seriesDifference = flags.has('DIFFERENCE') && fields.length > 1;
-    if (!f100 && !auto100 && !seriesDifference) return features;
+    // flat's weights run even without a field100 (addItemValues multiplies
+    // every record's values, maptheme.js 9007-9009)
+    const weightOf = fieldWeightOf(style, fields.length, false);
+    if (!f100 && !auto100 && !seriesDifference && !weightOf) return features;
     const f100A = f100 ? String(f100).split('|') : null;
     const fractionScale = styleNum(style && style.fractionscale) || 1;
     const names = fields.map(field => (field[0] === '!' ? field.slice(1) : field));
@@ -9540,12 +10444,16 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return features.map(f => {
       if (!f || !f.properties) return f;
       const props = Object.assign({}, f.properties);
-      let values = names.map(name => parseFloat(f.properties[name]));
+      let values = names.map(name => flatScanValue(f.properties[name]));
+      // the weights run BEFORE the field100 arithmetic, as in flat's
+      // addItemValues — the FRACTION of a weighted value is the weighted
+      // per-unit value
+      if (weightOf) values = values.map((v, i) => (isNaN(v) ? v : v * weightOf(i)));
       if (f100A || auto100) {
         const sum = auto100 ? values.reduce((a, v) => a + (isNaN(v) ? 0 : v), 0) : 0;
         values = values.map((v, i) => {
           if (isNaN(v)) return v;
-          const v100 = auto100 ? sum : parseFloat(f.properties[f100A[Math.min(i, f100A.length - 1)]]);
+          const v100 = auto100 ? sum : flatScanValue(f.properties[f100A[Math.min(i, f100A.length - 1)]]);
           if (v === 0 && !flags.has('ZEROISVALUE')) return 0;
           if (fields[i][0] === '!') return (isNaN(v100) ? 0 : v100) - v;
           if (flags.has('CALCVAL') || flags.has('CALC100')) return v100 ? Math.round(v * v100 / 100) : v;
@@ -9591,7 +10499,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // DIFFERENCE over several value fields: the difference is the value
     const fields = String(binding.value).split('|');
     const valueOf = flags && flags.has('DIFFERENCE') && fields.length > 1
-      ? p => cellAggregatedValues({ sums: fields.map(k => parseFloat(p[k]) || 0), counts: fields.map(() => 1) }, flags, style)[0]
+      // without AGGREGATE applyField100 already differenced every record
+      // (flat's nValuesA, popped): the first field IS the value
+      ? (!flags.has('AGGREGATE') ? p => flatNumber(p[fields[0]], flags)
+        : p => cellAggregatedValues({ sums: fields.map(k => parseFloat(p[k]) || 0), counts: fields.map(() => 1) }, flags, style)[0])
       // "$item$" is flat's record count: 1 per record
       : binding.value === '$item$' ? () => 1
       : p => (p && Object.keys(p).length ? flatNumber(p[binding.value], flags) : NaN);
@@ -9618,11 +10529,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     out._valueMax = nMax;
     const sorted = values.slice().sort((a, b) => a - b);
     out._valueMedian = sorted[Math.floor((sorted.length - 1) / 2)];
-    const nParts = Math.trunc(styleNum(style.classes)) || colorSchemeClassCount(style.colorscheme) || DEFAULT_RANGE_CLASSES;
+    const breaks = explicitRangeBreaks(style, flags);
+    const nParts = breaks ? breaks.length - 1
+      : Math.trunc(styleNum(style.classes)) || colorSchemeClassCount(style.colorscheme) || DEFAULT_RANGE_CLASSES;
     const placeholders = new Array(nParts).fill('');
-    const colorsRgb = resolveClassColors(style.colorscheme, placeholders, style.classes);
+    const colorsRgb = resolveClassColors(style.colorscheme, placeholders, breaks ? nParts : style.classes);
 
-    out.partsA = flatRangeParts(values, nMin, nMax, nParts, flags, styleNum(style.rangecentervalue));
+    out.partsA = breaks ? explicitRangeParts(breaks) : flatRangeParts(values, nMin, nMax, nParts, flags, styleNum(style.rangecentervalue));
     out._nRangeParts = nParts; // the configured count; partsA may have fewer (all values equal)
 
     out.categoryLabels = out.partsA.map(p => `${formatValue(p.min)} - ${formatValue(p.max)}`);
@@ -9760,6 +10673,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // (maptheme.js 11086-11101): each value becomes the next minus it
   // (RELATIVE: in % of it when it is above field100min, else 0), the last
   // one is dropped
+  // How a record joins its cell's running value (flat's MAX / MIN / SUM
+  // aggregation, maptheme.js 10880-10901): MAX / MIN keep the extreme
+  // (a missing part counts 0, as in flat), SUM adds. `first`: the cell's
+  // first record, which just starts the value.
+  function aggCombiner(flags) {
+    const max = flags.has('MAX'), min = flags.has('MIN');
+    return (acc, v, first) => (first ? v : max ? Math.max(acc || 0, v) : min ? Math.min(acc || 0, v) : acc + v);
+  }
+
   function cellAggregatedValues(cell, flags, style) {
     const useMean = flags.has('MEAN');
     const values = cell.sums.map((s, i) => (useMean && cell.counts[i] > 0 ? s / cell.counts[i] : s));
@@ -9825,6 +10747,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // relocates a field aggregation, maptheme.js 11141) — instead of a grid
   function aggregateOnGrid(features, zoom, cellPx, flags, post, field) {
     const relocate = flags.has('RELOCATE') || !!field;
+    const combine = aggCombiner(flags);
+    // MAX / MIN aggregation: the cell IS one defined record — the one
+    // holding the biggest (smallest) size — so its title follows THAT
+    // record, not the first one's (flat re-sets the merging record's
+    // szTitle under __fMax, maptheme.js 10870-10874; here it is the
+    // record that actually holds it)
+    const maxAgg = flags.has('MAX'), minAgg = flags.has('MIN');
     const cells = new Map();
     for (const f of features) {
       const [lng, lat] = f.geometry.coordinates;
@@ -9846,34 +10775,54 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         (cell.raws = cell.raws || []).push(f.properties.raw);
       }
       cell.sumX += p.x; cell.sumY += p.y; cell.n++;
-      cell.value += f.properties.value;
-      if (f.properties.classValue !== undefined) cell.classValue += f.properties.classValue;
-      if (post) cell.value100 += f.properties.value100 || 0;
+      const first = cell.n === 1;
+      cell.value = combine(cell.value, f.properties.value, first);
+      if (f.properties.classValue !== undefined) cell.classValue = combine(cell.classValue, f.properties.classValue, first);
+      if (post) cell.value100 = combine(cell.value100, f.properties.value100 || 0, first);
       // an AGGREGATE / CATEGORICAL pie's record (flatPieRecord): its parts
       // and size added to the cell's item as flat does (flatPieAccumulate)
       if (f.properties.pie) cell.pie = flatPieAccumulate(cell.pie || null, f.properties.pie, flags);
       const series = f.properties.series;
       if (series) {
         if (!cell.series) cell.series = new Array(series.length).fill(0);
-        for (let i = 0; i < series.length; i++) cell.series[i] += series[i];
+        for (let i = 0; i < series.length; i++) cell.series[i] = combine(cell.series[i], series[i], first);
+      }
+      // a multi-field SEQUENCE record's size-field value (flat's
+      // nValueSize): MAX/MIN/summed into the item's nSize, as flat does
+      if (f.properties.size !== undefined) cell.size = combine(typeof cell.size === 'number' ? cell.size : 0, f.properties.size, first);
+      // MAX / MIN: which record the cell's title belongs to (see the
+      // comment at the top — the size field carries the magnitude, else
+      // the combined value)
+      if (maxAgg || minAgg) {
+        const m = typeof f.properties.size === 'number' ? Math.abs(f.properties.size) : Math.abs(f.properties.value || 0);
+        if (cell.titleMax === undefined || (maxAgg ? m > cell.titleMax : m < cell.titleMax)) {
+          cell.titleMax = m;
+          cell.titleFrom = f;
+          cell.titleX = p.x; cell.titleY = p.y;
+        }
       }
     }
     const out = [];
     for (const cell of cells.values()) {
-      const x = relocate ? cell.sumX / cell.n : cell.snapped.x;
-      const y = relocate ? cell.sumY / cell.n : cell.snapped.y;
+      // RELOCATE: at the records' mean position — with MAX / MIN at the
+      // record holding the max (min), the one the cell IS (and its title's);
+      // only the position follows it, never a value
+      const atTitle = relocate && cell.titleFrom;
+      const x = atTitle ? cell.titleX : relocate ? cell.sumX / cell.n : cell.snapped.x;
+      const y = atTitle ? cell.titleY : relocate ? cell.sumY / cell.n : cell.snapped.y;
       const ll = worldPixelToLngLat(x, y, zoom);
       const geometry = { type: 'Point', coordinates: [ll.lng, ll.lat] };
       const hasClass = cell.first.properties.classValue !== undefined;
       let props = cell.n > 1
-        // titleRaw: the cell's first record — flat titles an aggregated
-        // item by it (itemTitle)
+        // titleRaw: the record the cell's title belongs to — with MAX/MIN
+        // the one holding the max (min), else the first (flat's itemTitle)
         ? { cluster: true, point_count: cell.n, value: cell.value, ...(hasClass ? { classValue: cell.classValue } : {}),
-            titleRaw: cell.first.properties.raw || cell.first.properties,
+            titleRaw: (cell.titleFrom || cell.first).properties.raw || (cell.titleFrom || cell.first).properties,
             ...(cell.raws && cell.raws.length ? { raws: cell.raws } : {}) }
         : cell.first.properties;
       if (cell.series && cell.n > 1) props = Object.assign({}, props, { series: cell.series });
       if (cell.pie) props = Object.assign({}, props, { pie: cell.pie });
+      if (typeof cell.size === 'number' && cell.n > 1) props = Object.assign({}, props, { size: cell.size });
       // a field aggregation's cell key (the field value): the categories of
       // one cell are merged by it (groupCoLocated), not by their positions
       if (field) props = Object.assign({}, props, { aggKey: cell.key });
@@ -9937,7 +10886,18 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       let cell = cells.get(key);
       if (!cell) { cell = { sumX: 0, sumY: 0, n: 0, cx: snapped.x, cy: snapped.y, counts: new Array(n).fill(0), recordCounts: new Array(n).fill(0), classTotal: undefined }; cells.set(key, cell); }
       cell.sumX += p.x; cell.sumY += p.y; cell.n++;
-      if (!cell.titleRaw) cell.titleRaw = f.properties.titleRaw || f.properties.raw || null;
+      // the cell's title: with MAX/MIN aggregation the member holding the
+      // biggest (smallest) size (the cell IS that one item), else the
+      // first — flat's itemTitle
+      const maxAgg = flags.has('MAX'), minAgg = flags.has('MIN');
+      const titleOf = f => f.properties.titleRaw || f.properties.raw || null;
+      if (maxAgg || minAgg) {
+        const m = typeof f.properties.size === 'number' ? Math.abs(f.properties.size) : Math.abs(f.properties.total || f.properties.value || 0);
+        if (cell.titleMax === undefined || (maxAgg ? m > cell.titleMax : m < cell.titleMax)) {
+          cell.titleMax = m;
+          cell.titleRaw = titleOf(f);
+        }
+      } else if (!cell.titleRaw) cell.titleRaw = titleOf(f);
       // the members' own records, for the tooltip's {{theme.item.data}} —
       // flat's __add_data tables them (numbered, up to 50) for aggregated
       // items too; references only, so no copy is made. A member can itself
@@ -9952,6 +10912,18 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       }
       cell.counts[f.properties.cat] += f.properties.value;
       if (f.properties.classValue !== undefined) cell.classTotal = (cell.classTotal || 0) + f.properties.classValue;
+      // a multi-field SEQUENCE cell's per-field parts and its size-field
+      // value (see _buildAggregationIndex) — combined with the theme's
+      // own MAX/MIN/sum combiner, so a re-grouped cell keeps them
+      const combineSeries = cell.combineSeries || (cell.combineSeries = aggCombiner(flags));
+      const memberSeries = f.properties.series;
+      if (memberSeries) {
+        if (!cell.series) cell.series = new Array(memberSeries.length).fill(0);
+        for (let i = 0; i < memberSeries.length; i++) cell.series[i] = combineSeries(cell.series[i], memberSeries[i], cell.n === 1);
+      }
+      if (typeof f.properties.size === 'number') {
+        cell.size = combineSeries(typeof cell.size === 'number' ? cell.size : 0, f.properties.size, cell.n === 1);
+      }
       // point_count is the aggregated-record count of a multi-record
       // cell (aggregateOnGrid; absent on a single-record cell)
       // — tracked separately from counts (the summed bound VALUE) purely
@@ -9965,7 +10937,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         geometry: { type: 'Point', coordinates: [ll.lng, ll.lat] },
         properties: { counts: cell.counts, total: cell.counts.reduce((a, c) => a + c, 0), recordCounts: cell.recordCounts, ...(cell.classTotal !== undefined ? { classTotal: cell.classTotal } : {}),
           ...(cell.raws && cell.raws.length ? { raws: cell.raws } : {}),
-          ...(cell.titleRaw ? { titleRaw: cell.titleRaw } : {}) }
+          ...(cell.titleRaw ? { titleRaw: cell.titleRaw } : {}),
+          ...(cell.series ? { series: cell.series } : {}),
+          ...(typeof cell.size === 'number' ? { size: cell.size } : {}) }
       };
     });
   }
@@ -10136,17 +11110,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // could ever need it (a plain "px" gridwidth, or an aggregation
       // array with only "px" entries, never reads this field).
       const gridwidthIsMeters = typeof this.style.gridwidth === 'string' ? !/px\s*$/i.test(this.style.gridwidth) : this.style.gridwidth != null;
-      if (gridwidthIsMeters || aggregationHasMetersEntry(this.style.aggregation)) {
-        let minLat = Infinity, maxLat = -Infinity;
-        this.features.forEach(f => {
-          const lat = f.geometry && f.geometry.coordinates && f.geometry.coordinates[1];
-          if (typeof lat === 'number' && !isNaN(lat)) {
-            if (lat < minLat) minLat = lat;
-            if (lat > maxLat) maxLat = lat;
-          }
-        });
-        this._gridRefLat = (minLat <= maxLat) ? (minLat + maxLat) / 2 : 0;
-      }
+      // aggregationscale: flat's alias of aggregation, read the same way in
+      // _ensureClusterIndices
+      if (gridwidthIsMeters || aggregationHasMetersEntry(this.style.aggregation || this.style.aggregationscale)) this._scanGridRefLat();
 
       // a bar chart's parts are a pie's (its value fields or categories)
       if ((this._isPieChart() || this._isBarChart()) && this.binding.value) {
@@ -10233,6 +11199,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         let max = 0;
         for (const f of this.features) for (const field of this._multiFields) { const v = Math.abs(parseFloat(f.properties[field])); if (v > max) max = v; }
         this._multiFieldPartMax = max || 1;
+        // AUTO100's scale, measured on these features by _buildSequenceChartLayers
+        this._seqAuto100Max = null;
       } else if (this.binding.value) {
         // real engine's OTHER coloring mode (maptheme.js distributeValues,
         // partsA): a NUMERIC bound value, not CATEGORICAL, is classed into
@@ -10369,6 +11337,33 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // pure: resolveComposedColor → see "Classification — pure functions"
     _resolveComposedColor(props) { return resolveComposedColor(this, props); }
 
+    // flat's DOPACITY value inside the COMPOSECOLOR branch (maptheme.js
+    // 13489-13505): nMyValue = the item's raw weighted value sum /
+    // ((field100/100) || 1), the max the color blend's own (nMax). The
+    // raw weighted sum is reconstructed from the part values the field100
+    // arithmetic left in the properties — those carry the arithmetic's own
+    // multiplier (FRACTION ×fractionscale, PERMILLE ×1000, the default
+    // percent ×100, see applyField100), which must be divided back out:
+    // flat's nValueSum is the RAW weighted sum, whatever the flags.
+    // (RELATIVE/INVERT subtract after the multiply — not reconstructable
+    // from the parts; flat's own composed branch never pairs them.)
+    _composedDopacityAlpha(props) {
+      const fields = this._multiFields || [];
+      const f100A = this.binding && this.binding.field100 ? String(this.binding.field100).split('|') : null;
+      const multiplier = this.flags.has('FRACTION') ? (styleNum(this.style.fractionscale) || 1)
+        : this.flags.has('PERMILLE') ? 1000 : 100;
+      let sum = 0;
+      fields.forEach((field, i) => {
+        const part = parseFloat(props[field]);
+        if (isNaN(part)) return;
+        const v100 = f100A ? parseFloat(props[f100A[Math.min(i, f100A.length - 1)]]) : NaN;
+        sum += isNaN(v100) ? part : (part * v100) / multiplier;
+      });
+      const v100_0 = f100A ? parseFloat(props[f100A[0]]) : NaN;
+      const nMyValue = sum / ((v100_0 / 100) || 1);
+      return composedDopacityAlpha(this.style, this.flags, nMyValue, this._composeColorMax || 1);
+    }
+
     // pure: buildPartsA → see "Classification — pure functions"
     _buildPartsA() { const r = computeRangeClasses(this.features, this.binding, this.style, this.flags, v => this._formatTooltipValue(v)); if (r) Object.assign(this, r); }
 
@@ -10395,6 +11390,14 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     _resolveAggregateValue(props) { return resolveAggregateValue(this.binding, this.flags, props); }
 
     _buildAggregationIndex(sourceFeatures) {
+      // only records with a point position are drawn: a GeoJSON feature may
+      // have geometry null (RFC 7946 — open-data exports of unlocated
+      // records), or a shape chartAnchoredFeatures could not anchor; they
+      // stay in the data (counts, facets), as on flat, but have no chart
+      sourceFeatures = sourceFeatures.filter(f => {
+        const c = f.geometry && f.geometry.coordinates;
+        return !!c && typeof c[0] === 'number' && isFinite(c[0]) && isFinite(c[1]);
+      });
       // an AGGREGATE / CATEGORICAL pie: one bucket, each record carrying its
       // contribution to its item (flatPieRecord), added up per position or
       // grid cell by aggregateOnGrid (flatPieAccumulate)
@@ -10404,9 +11407,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const rules = flatValueRules(t, fields ? fields.length : 1);
         const sizeField = this.binding.size && this.binding.size !== '$item$' ? this.binding.size : null;
         const feats = [];
+        // flat's per-field weights (maptheme.js 10506-10508), applied to
+        // every record's parts inside flatPieRecord
+        const pieWeightOf = fieldWeightOf(this.style, fields ? fields.length : 1, true);
         for (const f of sourceFeatures) {
-          const c = f.geometry && f.geometry.coordinates;
-          if (!c || typeof c[0] !== 'number' || !isFinite(c[0]) || !isFinite(c[1])) continue;
           const p = f.properties || {};
           let cat;
           if (this._pieCategorical) {
@@ -10414,7 +11418,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             const i = k == null ? undefined : this._pieCategoryIndex.get(k);
             cat = i == null ? -1 : i;
           }
-          const pie = flatPieRecord(p, { rules, sizeField, cat, fields });
+          const pie = flatPieRecord(p, { rules, sizeField, cat, fields, weights: pieWeightOf });
           if (!pie) continue;
           feats.push({ type: 'Feature', geometry: f.geometry, properties: { value: pie.size, pie, raw: p } });
         }
@@ -10437,11 +11441,18 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // 7-class color once it knows each cell's actual aggregated total.
       if (this._multiFields && this._isMultiFieldSequence()) {
         // one bucket; each record carries its field values as the chart's
-        // parts. Its value — the draw order — is the first field's, as
-        // flat's chart node value (NYC status: value="63" = e-bikes)
+        // parts — and, the same array, as `series` so that an AGGREGATE
+        // theme's grid cells combine them PER FIELD (aggregateOnGrid), as
+        // flat accumulates its per-field nValuesA (maptheme.js 10876-10889)
+        // — plus its size-field value (flat's nValueSize, the item nSize
+        // MAX/MIN/sum). Its value — the draw order — is the first field's,
+        // as flat's chart node value (NYC status: value="63" = e-bikes)
+        const sizeField = this.binding.size && this.binding.size !== '$item$' ? this.binding.size : null;
         this._featuresByCategory = [sourceFeatures.map(f => {
           const parts = this._multiFields.map(k => parseFloat(f.properties[k]) || 0);
-          return { type: 'Feature', geometry: f.geometry, properties: { value: parts[0], parts, raw: f.properties } };
+          const size = sizeField ? Math.abs(parseFloat(f.properties[sizeField]) || 0) : undefined;
+          return { type: 'Feature', geometry: f.geometry,
+            properties: { value: parts[0], parts, series: parts, ...(size !== undefined ? { size } : {}), raw: f.properties } };
         })];
         this._clusterIndices = null;
         this._clusterRadiusPx = null;
@@ -10466,7 +11477,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const seriesFields = String(this.binding.value || '').split('|');
         this._seriesDifference = this.flags.has('DIFFERENCE') && seriesFields.length > 1 && !this._aggregateField100;
         const seriesOf = props => seriesFields.map(k => parseFloat(props[k]) || 0);
-        const seriesValue = props => cellAggregatedValues({ sums: seriesOf(props), counts: seriesFields.map(() => 1) }, this.flags, this.style)[0];
+        // without AGGREGATE the records are already differenced (applyField100)
+        const seriesValue = !this.flags.has('AGGREGATE') ? props => parseFloat(props[seriesFields[0]]) || 0 : props => cellAggregatedValues({ sums: seriesOf(props), counts: seriesFields.map(() => 1) }, this.flags, this.style)[0];
         this._featuresByCategory = [sourceFeatures.map(f => ({
           type: 'Feature',
           geometry: f.geometry,
@@ -10824,6 +11836,20 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       });
     }
 
+    // the meters grid's reference latitude: the middle of the data's own
+    // latitude extent (see _prepare)
+    _scanGridRefLat() {
+      let minLat = Infinity, maxLat = -Infinity;
+      this.features.forEach(f => {
+        const lat = f.geometry && f.geometry.coordinates && f.geometry.coordinates[1];
+        if (typeof lat === 'number' && !isNaN(lat)) {
+          if (lat < minLat) minLat = lat;
+          if (lat > maxLat) maxLat = lat;
+        }
+      });
+      this._gridRefLat = (minLat <= maxLat) ? (minLat + maxLat) / 2 : 0;
+    }
+
     // (re)builds the per-category GridAggregateIndex for the grid width
     // resolved at the given zoom, only when that width changed. Grid width,
     // as flat reads it (maptheme.js:1892-1908, 7990-8008): gridwidthpx and
@@ -10834,6 +11860,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // style.aggregation bracket; none → no grid (exact positions).
     _ensureClusterIndices(zoom) {
       let radiusPx;
+      // a meters grid set later by setStyle (gridwidth / aggregation) never
+      // went through _prepare's scan — not the equator, the data's latitude
+      if (this._gridRefLat === undefined) this._scanGridRefLat();
       // GL-PORT COMPAT: a real-ixmaps-flat page's own gridwidth is
       // sometimes a fixed SCREEN-PIXEL size (e.g. style.gridwidth:"3px",
       // confirmed against a real ported page) rather than this engine's
@@ -10880,6 +11909,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         this._clusterUsesFixedZoom = false;
       }
       if (this._clusterIndices && this._clusterRadiusPx === radiusPx && this._clusterField === aggField) return;
+      // new cells (e.g. a runtime gridwidth): the zoom-keyed stats of the
+      // old ones (breaks, NORMALIZE, NOOUTLIER, sizeMax) no longer apply
+      this._aggregateStatsCache = null;
       this._clusterRadiusPx = radiusPx;
       this._clusterField = aggField;
       // after aggregation, on the cell sums: field100 of a value-based
@@ -10888,7 +11920,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const post = this._seriesDifference
         ? (v, v100, series) => (series ? cellAggregatedValues({ sums: series, counts: series.map(() => 1) }, this.flags, this.style)[0] : v)
         : this._aggregateField100 ? (v, v100) => aggregateField100(v, v100, this.flags, this.style) : undefined;
-      this._clusterIndices = this._featuresByCategory.map(feats => new GridAggregateIndex(radiusPx, this.flags, post, aggField).load(feats));
+      // flat's weights multiply every record's value fields as they are
+      // accumulated (maptheme.js 10506-10508), before the sums' field100
+      // arithmetic above — a weighted SUM, not a sum weighted afterward
+      const weightOf = fieldWeightOf(this.style, (this._multiFields || [this.binding && this.binding.value]).length, true);
+      this._clusterIndices = this._featuresByCategory.map(feats =>
+        new GridAggregateIndex(radiusPx, this.flags, post, aggField).load(weightOf ? feats.map(f => weightedRecord(f, weightOf)) : feats));
     }
 
     // Reverted from the source-accurate two-flat-circle GLOW (radius*6
@@ -11139,6 +12176,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const raw = props.raw || props.titleRaw;
       const title = this.binding.title && raw && raw[this.binding.title] != null ? String(raw[this.binding.title]) : '';
       const aggregated = !!(props.counts || props.cluster);
+      // MAX / MIN aggregation: the item IS one defined record — the one
+      // holding the max (min) — so it carries that record's real title;
+      // "(n)" is the label of a summed/mean aggregate
+      if (this.flags.has('MAX') || this.flags.has('MIN')) return title;
       if (aggregated && this._clusterRadiusPx && !this._clusterField) {
         const n = groupRecordCount(props);
         if (!title || n > 3) return '(' + n + ')';
@@ -11471,7 +12512,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // companion layer) takes the uniform mesh shortcut.
       if (this.flags.has('GRIDSIZE') && this.flags.has('PLOT')) return this._buildPlotLayers(zoom, bbox);
       // PLOT without GRIDSIZE: one line chart per item over its value fields
-      if (this.flags.has('PLOT') && this._isItemPlot()) return this._buildItemPlotLayers(zoom);
+      if (this.flags.has('PLOT') && this._isItemPlot()) return this._buildItemPlotLayers(zoom, liveZoom);
       // a plain grid (one color, no values or glow — the Germany page's
       // companion "grid" layer) as one square per cell; a classed GRIDSIZE
       // chart (the fuel-price page) is a symbol chart sized to the grid,
@@ -11498,6 +12539,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // unmatched polygon, so the donor's fill serves no purpose once
       // superseded.
       if (this._isChoroplethGeometryDonor) return [];
+      // flat's WMS theme (one server image over the view) renders here as
+      // a native MapLibre raster source+layer managed by syncWmsLayers —
+      // not as deck.gl layers — so its own build returns nothing
+      if (this.flags.has('WMS') || this.flags.has('IMAGE')) return [];
+      // flat's POSITION theme (maptheme.js 8328-8353): loads its data and
+      // draws nothing — it only exists as this layer's id→position provider
+      // for the join (joinChartPositions reads its features, its binding.id
+      // against the consumers' lookup key), so no renderer runs for it
+      if (this.flags.has('POSITION')) return [];
       if (this.flags.has('FEATURE') || this.flags.has('FEATURES')) {
         return featuresHiddenByScale(this.style, liveZoom) ? [] : this._buildFeaturesLayers(liveZoom, bbox);
       }
@@ -11539,6 +12589,20 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // each shape by its class), not one flat fill
       const byCategory = filled && this.flags.has('CATEGORICAL') && this.categoryIndexByLabel && this.binding.value
         && this.categoryColorsRgb && this.categoryColorsRgb.length;
+      // a NUMERIC bound value classes every shape too (flat's
+      // distributeValues → partsA; paintShape, maptheme.js 13991-14018,
+      // paints each shape in `colorScheme[nIndex]` — a line as
+      // fill:none;stroke:class-color, a polygon filled with it): the
+      // TELRAAM speed segments, green→red by v85
+      const byClass = !byCategory && this._rangeClassed && this.partsA
+        && this.categoryColorsRgb && this.categoryColorsRgb.length
+        // "$item$" (or a field list) is no numeric field: a plain FEATURE
+        // layer keeps its one fill color
+        && this.binding.value && this.binding.value !== '$item$' && !String(this.binding.value).includes('|');
+      const classColorOf = f => {
+        const cls = this._resolvePartsClass(parseFloat(f.properties && f.properties[this.binding.value]));
+        return this.classRgb(cls);
+      };
       const catAlpha = Math.round(255 * (styleNum(this.style.fillopacity) || 1));
       const nodataRgb = parseCssColor(this.style.nodatacolor) || [255, 255, 255];
       const shadow = filled && flatShadowOn(this.style, this.features.length, zoom)
@@ -11558,14 +12622,19 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // flat puts fillopacity into the shape's fill-opacity only
         // (maptheme.js 13407, 14071-14078): the outline stays opaque
         // (a fill color's own alpha — rgba(…, 0.5) — times fillopacity)
-        ...(byCategory ? { updateTriggers: { getFillColor: JSON.stringify(this.categoryColorsRgb) } } : {}),
+        ...(byCategory || byClass ? { updateTriggers: { getFillColor: JSON.stringify(this.categoryColorsRgb), getLineColor: JSON.stringify(this.categoryColorsRgb) } } : {}),
         getFillColor: byCategory
           ? f => {
             const cat = this._resolveClassIndex(f.properties[this.binding.value]);
             return [...(cat != null ? (this.categoryColorsRgb || [])[cat] || nodataRgb : nodataRgb).slice(0, 3), catAlpha];
           }
+          : byClass ? f => [...classColorOf(f).slice(0, 3), catAlpha]
           : filled ? [...hexOrNamedToRgb(raw).slice(0, 3), Math.round(255 * cssColorAlpha(raw) * (styleNum(this.style.fillopacity) || 1))] : [0, 0, 0, 0],
-        getLineColor: this.style.linecolor
+        getLineColor: byClass
+          // flat's paintShape strokes a line shape with its class color
+          // (fill:none;stroke:class-color), at stroke-opacity fillopacity
+          ? f => [...classColorOf(f).slice(0, 3), catAlpha]
+          : this.style.linecolor
           ? withAlpha(hexOrNamedToRgb(styleLineColor(this.style.linecolor)), cssColorAlpha(styleLineColor(this.style.linecolor)))
           : [130, 130, 130],
         lineWidthMinPixels: styleNum(this.style.linewidth) || 1,
@@ -11655,12 +12724,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const isComposeColor = this.flags.has('COMPOSECOLOR');
       const baseOpacity = resolveFillOpacity(this.style, this.mapOptions, zoom);
       // DOPACITY needs a PER-FEATURE opacity, which deck.gl only supports
-      // via getFillColor's own alpha channel (its layer-level `opacity`
-      // prop is one number for every feature) — see _resolveDopacityAlpha.
-      // Not meaningful combined with COMPOSECOLOR (no single driving value
-      // per polygon there), matching the real engine's own separate
-      // DOPACITY/COMPOSECOLOR branches.
-      const dopacityActive = !isComposeColor &&
+      // via the color accessors' own alpha channel (its layer-level
+      // `opacity` prop is one number for every feature) — see
+      // _resolveDopacityAlpha. COMPOSECOLOR runs DOPACITY too, with its own
+      // formula on the item's value sum (flat maptheme.js 13485-13506,
+      // composedDopacityAlpha) — it is only the DOMINANT/range
+      // _resolveDopacityAlpha that has no single driving value there
+      const dopacityActive =
         (this.flags.has('DOPACITY') || this.flags.has('DOPACITYMIN') || this.flags.has('DOPACITYMAX') || this.flags.has('DOPACITYMINMAX'));
       // AGGREGATE CATEGORICAL: every polygon's parts and dominant class
       // (aggregatedCategoricalClass), the biggest part per class over all
@@ -11703,7 +12773,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             return {
               type: 'Feature',
               geometry: f.geometry,
-              properties: { raw: f.properties, composedColor: this._resolveComposedColor(f.properties) }
+              properties: {
+                raw: f.properties, composedColor: this._resolveComposedColor(f.properties),
+                // flat's DOPACITY inside the COMPOSECOLOR branch (maptheme.js
+                // 13485-13506): opacity from the item's raw weighted value
+                // sum over (field100/100), against the same nMax the color
+                // blend normalizes by. The raw weighted sum is reconstructed
+                // from the fractioned part values (raw = part × its field100)
+                dopacityAlpha: dopacityActive ? this._composedDopacityAlpha(f.properties) : null
+              }
             };
           }
           if (isDominant) {
@@ -11759,6 +12837,29 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // deck.gl re-runs the color accessors only for new data or a changed trigger
       const colorKey = JSON.stringify([[...this._markedClasses], !!this._onMarksChanged, evidenceMode,
         this.categoryColorsRgb, fallbackRgb, classAlpha, lineRgb]);
+      // flat paints a LINE shape's value color as its STROKE (paintShape on
+      // a line shape, szShapeType line — its DOPACITY writes stroke-opacity
+      // there too): a choropleth over line geometry, the Milano street lines,
+      // shows the value color ON the line; a polygon keeps it as its fill
+      const isLineGeometry = d => { const t = d.geometry && d.geometry.type; return t === 'LineString' || t === 'MultiLineString'; };
+      const valueColorOf = d => {
+        if (!hasData(d)) return [0, 0, 0, 0];
+        const rgb = d.properties.composedColor
+          || (d.properties.cat != null ? (this.categoryColorsRgb || [])[d.properties.cat] : null) || fallbackRgb;
+        const evidence = unmarkedEvidence(d);
+        if (evidence === 'hide') return [0, 0, 0, 0];
+        if (evidence === 'gray') return [...grayOf(rgb), 90];
+        const a = alphaOfClass(d.properties.cat);
+        return d.properties.dopacityAlpha != null ? [...rgb.slice(0, 3), Math.round(d.properties.dopacityAlpha * a * 255)] : withAlpha(rgb, a);
+      };
+      // flat re-styles the SAME shape nodes the FEATURE base drew, so a line
+      // choropleth keeps the base's own line width — the donor's linewidth
+      // is the fallback when the choropleth has none of its own
+      const donorRt = [..._globalThemeRegistry.values()].find(r => r.name === this.name && r._isChoroplethGeometryDonor);
+      const anyLine = collection.features.some(isLineGeometry);
+      const isolating = !!(this._markedClasses.size && !this._onMarksChanged && evidenceMode === 'isolate');
+      const lineW = styleNum(this.style.linewidth)
+        || (anyLine && donorRt && styleNum(donorRt.style.linewidth)) || 1;
       return [new GeoJsonLayer({
         id: this._dataLayerId(`ix-choropleth-${this.name}`),
         data: collection,
@@ -11766,21 +12867,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         pickable: true,
         stroked: true,
         filled: true,
-        getFillColor: d => {
-          if (!hasData(d)) return [0, 0, 0, 0];
-          const rgb = d.properties.composedColor
-            || (d.properties.cat != null ? (this.categoryColorsRgb || [])[d.properties.cat] : null) || fallbackRgb;
-          const evidence = unmarkedEvidence(d);
-          if (evidence === 'hide') return [0, 0, 0, 0];
-          if (evidence === 'gray') return [...grayOf(rgb), 90];
-          const a = alphaOfClass(d.properties.cat);
-          return d.properties.dopacityAlpha != null ? [...rgb.slice(0, 3), Math.round(d.properties.dopacityAlpha * a * 255)] : withAlpha(rgb, a);
-        },
-        // a per-polygon accessor only while a class is isolated
-        getLineColor: this._markedClasses.size && !this._onMarksChanged && evidenceMode === 'isolate'
-          ? d => (unmarkedEvidence(d) === 'hide' ? [0, 0, 0, 0] : lineRgb)
-          : lineRgb,
-        lineWidthMinPixels: styleNum(this.style.linewidth) || 1,
+        getFillColor: d => valueColorOf(d),
+        // a constant unless a shape needs its own color (line geometry, or a
+        // class isolated) — deck.gl then skips a per-item accessor call
+        getLineColor: !anyLine && !isolating ? lineRgb
+          : d => choroplethOutlineColor(isLineGeometry(d), valueColorOf, d, isolating, unmarkedEvidence, lineRgb),
+        lineWidthMinPixels: lineW,
         // per-feature alpha (baked above) already carries the resolved
         // base opacity — a layer-level opacity on TOP of that would
         // multiply it a second time.
@@ -11817,6 +12909,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const categories = this._plotCategories();
 
       const cells = new Map();
+      const combine = aggCombiner(this.flags);
       source.forEach(f => {
         const ci = this._gridCategoryIndex(f.properties[this.binding.value]);
         if (ci == null) return;
@@ -11834,7 +12927,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           cells.set(key, cell);
         }
         const v = this._resolveAggregateValue(f.properties);
-        cell.sums[ci] += v;
+        cell.sums[ci] = combine(cell.sums[ci], v, cell.counts[ci] === 0);
         cell.counts[ci]++;
       });
 
@@ -11872,8 +12965,14 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // a per-item SEQUENCE chart: CHART|SYMBOL|SEQUENCE, several value
     // fields per item, one part per field (no CATEGORICAL, no AGGREGATE)
     _isMultiFieldSequence() {
+      // AGGREGATE is allowed: flat's loadAndAggregateValuesOfTheme
+      // aggregates a multi-field SEQUENCE theme per FIELD (its per-field
+      // nValuesA, MAX/MIN per field, else summed — maptheme.js 10876-10889)
+      // and AUTO100 then normalizes every item's parts to % of their own
+      // sum (12166-12176) — the parts ride the grid cells as `series` and
+      // the per-item % is applied in _buildSequenceChartLayers
       return this.flags.has('CHART') && this.flags.has('SYMBOL') && flatFlag(this.flags, 'SEQUENCE')
-        && !this.flags.has('CATEGORICAL') && !this.flags.has('AGGREGATE') && !this.flags.has('PLOT')
+        && !this.flags.has('CATEGORICAL') && !this.flags.has('PLOT')
         && String(this.binding.value || '').includes('|');
     }
     _itemPlotFields() {
@@ -11999,16 +13098,20 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       return explicit ? fields.map((f, i) => String(explicit[i] != null ? explicit[i] : f)) : fields;
     }
 
-    _buildItemPlotLayers(zoom) {
+    _buildItemPlotLayers(zoom, liveZoom = zoom) {
       const fields = this._itemPlotFields();
       const items = [];
       let dMin = Infinity, dMax = -Infinity;
+      // facet / runtime WHERE / time frame narrow the drawn charts, as in
+      // every other renderer; the value range stays the full data's (as
+      // the bubbles' _maxSizeValue), so a filter does not rescale them
+      const active = this._activeFeatures ? new Set(this._activeFeatures) : null;
       for (const f of this.features) {
         const pos = itemAnchor(f.geometry);
         if (!pos) continue;
         const values = fields.map(k => parseFloat(f.properties[k]));
         for (const v of values) if (!isNaN(v)) { dMin = Math.min(dMin, v); dMax = Math.max(dMax, v); }
-        items.push({ geometry: { type: 'Point', coordinates: pos }, properties: { values, raw: f.properties } });
+        if (!active || active.has(f)) items.push({ geometry: { type: 'Point', coordinates: pos }, properties: { values, raw: f.properties } });
       }
       if (!items.length) return [];
       const sMin = styleNum(this.style.minvalue), sMaxRaw = this.style.maxvalue;
@@ -12027,7 +13130,18 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const S = 2 * NORMAL_RADIUS_PX * (styleNum(this.style.scale) || 1) * objectZoomFactor(zoom, this.mapOptions);
       const color = parseCssColor(Array.isArray(this.style.colorscheme) ? this.style.colorscheme[0] : this.style.colorscheme) || [0, 102, 204];
       const fillOpacity = styleNum(this.style.fillopacity);
-      return [new IconLayer({
+      // BOX / TITLE: flat's chart-group box around every chart; the chart's
+      // drawn extent is its plot geometry's bounding box (chart units × S px,
+      // y up in the geometry, down on screen)
+      const boxRows = this._boxRows(items, { unit: S / (2 * NORMAL_RADIUS_PX), liveZoom, extentOf: d => {
+        const b = itemPlotGeometry(d.properties.values, rangeFor(d.properties.values), this.style, this.flags, sizeMax).bbox;
+        return [b.x0 * S, -b.y1 * S, b.x1 * S, -b.y0 * S];
+      } });
+      const boxLayers = boxRows ? this._boxTitleLayers(boxRows, {
+        unit: S / (2 * NORMAL_RADIUS_PX), liveZoom, positionOf: b => b.d.geometry.coordinates, offsetOf: () => [0, 0],
+        ids: { circle: `ix-itemplot-box-${this.name}`, icon: `ix-itemplot-box-${this.name}`, polygons: `ix-itemplot-box-polygons-${this.name}`, titles: `ix-itemplot-titles-${this.name}` }
+      }) : { box: [], titles: [] };
+      return [...boxLayers.box, new IconLayer({
         id: `ix-itemplot-${this.name}-g${this._iconGeneration}`,
         data: items, pickable: true,
         getPosition: d => d.geometry.coordinates,
@@ -12037,7 +13151,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         getSize: d => this._buildItemPlotIcon(d.properties.values, rangeFor(d.properties.values), sizeMax, color, fillOpacity).heightUnits * S,
         sizeUnits: 'pixels',
         updateTriggers: { getSize: [S] }
-      })];
+      }), ...boxLayers.titles];
     }
 
     // canvas for one per-item PLOT chart (itemPlotGeometry), RASTER px per
@@ -12175,14 +13289,22 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       datasetMax = datasetMax || 1;
       if (isNaN(normalSizeValue)) normalSizeValue = datasetMax;
 
-      return [new IconLayer({
+      // BOX / TITLE: flat's chart-group box around every chart; the chart is
+      // the iconSize square on the cell's center (flat's chart size is 30 units)
+      const boxRows = this._boxRows(data, { unit: iconSize / 30, liveZoom: zoom,
+        extentOf: () => [-iconSize / 2, -iconSize / 2, iconSize / 2, iconSize / 2] });
+      const boxLayers = boxRows ? this._boxTitleLayers(boxRows, {
+        unit: iconSize / 30, liveZoom: zoom, positionOf: b => b.d.geometry.coordinates, offsetOf: () => [0, 0],
+        ids: { circle: `ix-plot-box-${this.name}`, icon: `ix-plot-box-${this.name}`, polygons: `ix-plot-box-polygons-${this.name}`, titles: `ix-plot-titles-${this.name}` }
+      }) : { box: [], titles: [] };
+      return [...boxLayers.box, new IconLayer({
         id: `ix-plot-${this.name}-g${this._iconGeneration}`,
         data, pickable: true,
         getPosition: d => d.geometry.coordinates,
         getIcon: d => this._buildPlotIcon(d.properties.values, categories, labels, normalSizeValue, datasetMax, datasetMin),
         getSize: iconSize,
         sizeUnits: 'pixels'
-      })];
+      }), ...boxLayers.titles];
     }
 
     // Canvas rendering for one cell's mini-chart — BOX background, AREA
@@ -12300,9 +13422,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       canvas.width = W; canvas.height = H;
       const ctx = canvas.getContext('2d');
 
-      // BOX
+      // BOX (a plot without the BOX flag keeps its own canvas box; with it the
+      // shared box layer draws it — see _buildPlotLayers)
       const boxOpacity = styleNum(this.style.boxopacity);
-      if (!isNaN(boxOpacity) && boxOpacity > 0) {
+      if (!flatFlag(this.flags, 'BOX') && !isNaN(boxOpacity) && boxOpacity > 0) {
         ctx.fillStyle = `rgba(255,255,255,${boxOpacity})`;
         ctx.fillRect(0, 0, W, H);
       }
@@ -12548,6 +13671,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // async image decode, the whole drawing is synchronous
       const items = [];
       const defsSeen = new Set();
+      // this drawing's defs, swapped in for the previous drawing's below —
+      // appended to the shared pane <defs> on every draw they grew without
+      // bound (and getElementById then found a stale earlier copy)
+      const paneDefs = document.createElementNS(SVG_NS, 'g');
       let html = '';
       for (const d of combined) {
         const value = valueOf(d);
@@ -12564,11 +13691,17 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         for (const id of chart.ids) {
           if (defsSeen.has(id)) continue;
           defsSeen.add(id);
-          const def = this._userChartGroup.ownerDocument.getElementById(id);
-          if (def) chartHost.defs.appendChild(def.cloneNode(true));
+          // drawn now (fresh), else a cached chart's: the previous drawing's copy
+          const def = this._userChartGroup.querySelector('#' + CSS.escape(id)) || this._userChartGroup.ownerDocument.getElementById(id);
+          if (def) paneDefs.appendChild(def.cloneNode(true));
         }
         items.push({ d, coords: d.geometry.coordinates, ox: chart.ox, oy: chart.oy, s: pxPerUnit,
-          r: Math.max(chart.vw, chart.vh) * pxPerUnit / 2 });
+          r: Math.max(chart.vw, chart.vh) * pxPerUnit / 2,
+          // the chart's measured box (flat's getBox of the chart group) in px
+          // around the map position: the pane draws a chart point at
+          // p + s · (point − origin)
+          ext: [(chart.bb.x - chart.ox) * pxPerUnit, (chart.bb.y - chart.oy) * pxPerUnit,
+            (chart.bb.x + chart.bb.width - chart.ox) * pxPerUnit, (chart.bb.y + chart.bb.height - chart.oy) * pxPerUnit] });
       }
       if (glDebug()) console.info(`[ixmaps-gl debug] ${themeIdOf(this)}: zoom ${mapLibreToFlatZoom(liveZoom).toFixed(2)}, ${combined.length} charts, ${items.length} drawn${this._viewMoving ? ' (moving)' : ''}`);
       if (!items.length) {
@@ -12577,6 +13710,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         this._chartItems = null;
         return (this._userChartLastLayers = []);
       }
+      chartHost.defs.appendChild(paneDefs);
+      if (this._chartPaneDefs) this._chartPaneDefs.remove();
+      this._chartPaneDefs = paneDefs;
       if (this._chartPaneGroup) this._chartPaneGroup.remove();
       this._chartPaneGroup = document.createElementNS(SVG_NS, 'g');
       chartHost.pane.appendChild(this._chartPaneGroup);
@@ -12585,11 +13721,24 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       for (let i = 0; i < items.length; i++) items[i].el = els[i];
       this._chartItems = items;
       chartHost.runtimes.add(this);
+      this._chartHost = chartHost; // removeRuntimes takes it out again
       chartHost.update();
       // picking: a transparent circle per chart — the VISIBLE chart is the
       // live SVG in the pane; this deck layer only serves hover, click and
       // the tooltips (pickedFeature unwraps the {d, icon} entry shape)
-      this._userChartLastLayers = [new ScatterplotLayer({
+      // BOX / TITLE: flat's chart-group box around the chart as the page's
+      // function drew it (its measured box). The chart itself is a live SVG in
+      // the pane above the deck canvas, so the box lies under it and the title
+      // (outside the box) beside it
+      const extOf = new Map(items.map(it => [it.d, it.ext]));
+      const boxRows = this._boxRows(items.map(it => it.d), {
+        unit: objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(this.style.scale) || 1), liveZoom, extentOf: d => extOf.get(d) });
+      const boxLayers = boxRows ? this._boxTitleLayers(boxRows, {
+        unit: objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(this.style.scale) || 1), liveZoom,
+        positionOf: b => b.d.geometry.coordinates, offsetOf: () => [0, 0],
+        ids: { circle: `ix-user-box-${this.name}`, icon: `ix-user-box-${this.name}`, polygons: `ix-user-box-polygons-${this.name}`, titles: `ix-user-titles-${this.name}` }
+      }) : { box: [], titles: [] };
+      this._userChartLastLayers = [...boxLayers.box, new ScatterplotLayer({
         id: `ix-bubbles-${this.name}`,
         data: items.map(it => ({ d: it.d, icon: true, r: it.r })),
         pickable: true,
@@ -12598,7 +13747,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         radiusUnits: 'pixels', radiusMinPixels: 1,
         stroked: false, filled: true, getFillColor: [0, 0, 0, 0],
         parameters: ICON_LAYER_GLOBE_PARAMETERS
-      })];
+      }), ...boxLayers.titles];
       return this._userChartLastLayers;
     }
     // the chart's SVG, cached by its draw parameters — a failing draw
@@ -12653,7 +13802,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           const vx = bb.x - pad, vy = bb.y - pad, vw = bb.width + 2 * pad, vh = bb.height + 2 * pad;
           // the chart's origin (0,0 — or the point flat moves it to, ret) sits at the map position
           const ox = (ret && ret.x) || 0, oy = (ret && ret.y) || 0;
-          chart = { vx, vy, vw, vh, ox, oy, markup, ids: [...ids],
+          chart = { vx, vy, vw, vh, ox, oy, markup, ids: [...ids], bb: { x: bb.x, y: bb.y, width: bb.width, height: bb.height },
             svg: `<svg xmlns="${SVG_NS}" width="__W__" height="__H__" viewBox="${vx} ${vy} ${vw} ${vh}"><defs>${defs}</defs>${markup}</svg>` };
         }
       } catch (e) {
@@ -12666,6 +13815,187 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       return chart;
     }
 
+    // flat's BOX block belongs to the box: the box owns its TITLE — no BOX, no
+    // title — so everything about both is decided here and in _boxRows, for
+    // every chart type (single symbol, SEQUENCE, PIE, BAR): the gates (BOX /
+    // TITLE flags, boxupper / boxlower / titleupper scale), the margin, the
+    // title font (DTEXT follows the chart), BOTTOMTITLE, align, CIRCULARBOX.
+    // null when there is no box at this zoom.
+    _boxSpec(liveZoom) {
+      const st = this.style;
+      if (!(flatFlag(this.flags, 'BOX') && !boxHiddenByScale(st, liveZoom))) return null;
+      const titleUpper = scaleDenom(st.titleupper);
+      const titleScale = styleNum(st.textscale) || styleNum(st.valuescale) || 1;
+      return {
+        circular: flatFlag(this.flags, 'CIRCULAR'),
+        margin: styleNum(st.boxmargin) || 2,
+        bottomTitle: flatFlag(this.flags, 'BOTTOMTITLE'),
+        alignRight: /right/.test(String(st.align || '')),
+        titleShown: flatFlag(this.flags, 'TITLE') && !!this.binding.title
+          && !(titleUpper && scaleDenominatorAt(liveZoom) > titleUpper),
+        // DTEXT: the title font follows the chart, max(0.9u, min(W/5, 14u /
+        // scale)) (18815) — measured on the fire areas page's SIF chart
+        // (W 362 units → font 72.35)
+        titleFontOf: (unit, w) => (flatFlag(this.flags, 'DTEXT')
+          ? Math.max(0.9 * unit, Math.min(w / 5, 14 * unit / (styleNum(st.scale) || 1)))
+          : 5 * unit) * titleScale
+      };
+    }
+
+    // the layout row of every item's box and title (chartBoxLayout + the spec
+    // above); null without a box (items: the array, or a function building it
+    // only when there is a box). o: { unit (px per flat unit), liveZoom,
+    // extentOf (item -> its drawn [x0, y0, x1, y1], px around the anchor),
+    // radiusOf / centerOf (the circular box's base, default the extent's) }.
+    // A row: { d: item, geometry, properties, w (the chart's width — flat's
+    // size measure W, the stroke and corner basis), boxR / cx / cy (circle),
+    // rect (rectangle), title }
+    _boxRows(items, o) {
+      const spec = this._boxSpec(o.liveZoom);
+      if (!spec) return null;
+      // flat appends style.titleunits (its parse adds the leading space,
+      // maptheme.js 1470; szTitle += at 18827)
+      const units = this.style.titleunits ? ' ' + this.style.titleunits : '';
+      return (typeof items === 'function' ? items() : items).map(d => {
+        const itemTitle = spec.titleShown ? this._itemTitle(d.properties) : null;
+        const L = chartBoxLayout(o.extentOf(d), { unit: o.unit, margin: spec.margin, circular: spec.circular,
+          radius: o.radiusOf ? o.radiusOf(d) : undefined, center: o.centerOf ? o.centerOf(d) : undefined,
+          titleText: itemTitle ? itemTitle + units : null, titleFont: w => spec.titleFontOf(o.unit, w),
+          bottomTitle: spec.bottomTitle, alignRight: spec.alignRight });
+        // geometry/properties of the chart's feature on the row: the circular
+        // box is pickable, and the tooltip (buildTooltipHtml, the click-pin)
+        // works on the feature's own properties
+        return { d, geometry: d.geometry, properties: d.properties, w: L.w, boxR: L.boxR, cx: L.cx, cy: L.cy,
+          rect: L.rect, title: L.title };
+      });
+    }
+
+    // THE box-and-title layers of every chart type: rows are _boxRows results.
+    // o: { unit, liveZoom, positionOf (row -> [lng, lat]), offsetOf (row ->
+    // the chart's [dx, dy] px move: align / offsetx / offsety), box (false:
+    // the title layer only — a BAR draws its box as a shader shape), ids:
+    // { circle, icon, polygons, titles } } — the layer ids stay each chart
+    // type's own. Returns { box: [layers], titles: [layers] }: the caller
+    // pushes them where its draw order wants them.
+    _boxTitleLayers(rows, o) {
+      const st = this.style;
+      const { unit, liveZoom, positionOf, offsetOf, ids } = o;
+      const circular = flatFlag(this.flags, 'CIRCULAR');
+      const box = [], titles = [];
+      // flat: fill-opacity (boxopacity || 1) on the raw style value — the usual
+      // string "0" is transparent; typed here, a given 0 is too
+      const boxOpacity = isNaN(styleNum(st.boxopacity)) ? 1 : styleNum(st.boxopacity);
+      if (o.box === false) {
+        // the title layer only
+      } else if (circular) {
+        const boxNone = isNoneColor(st.boxcolor), borderNone = isNoneColor(st.bordercolor);
+        const boxRgb = hexOrNamedToRgb(boxNone ? '#eeeeee' : st.boxcolor || '#eeeeee');
+        const boxAlpha = boxNone ? 0 : Math.round(255 * boxOpacity);
+        const borderRgb = borderNone ? null : hexOrNamedToRgb(st.bordercolor || '#dddddd');
+        // Always a ScatterplotLayer: its shader circle is smooth at any
+        // size, where an icon — a 48px canvas texture deck.gl scales up —
+        // pixelated with large boxes. ScatterplotLayer has no pixel offset,
+        // so the chart's align/offsetx/offsety move and flat's circular box
+        // position (the chart's bounding-box center, 18793) are baked into
+        // map coordinates (pixelOffsetLngLat). Pickable: flat's box is part
+        // of the chart group, so hovering it fires the chart's tooltip — the
+        // symbols sit above it, so they keep their own
+        box.push(new ScatterplotLayer({
+          id: ids.circle,
+          data: rows, pickable: true,
+          getPosition: b => { const f = offsetOf(b); return pixelOffsetLngLat(positionOf(b), [f[0] + b.cx, f[1] + b.cy], liveZoom); },
+          getRadius: b => b.boxR,
+          radiusUnits: 'pixels',
+          stroked: !borderNone,
+          getFillColor: [...boxRgb.slice(0, 3), boxAlpha],
+          getLineColor: [...(borderRgb || boxRgb).slice(0, 3), 255],
+          getLineWidth: unit / 20,
+          lineWidthUnits: 'pixels',
+          parameters: ICON_LAYER_GLOBE_PARAMETERS
+        }));
+      } else {
+        // flat's rectangular box (the chart and its title plus the margin)
+        const borderStyle = String(st.borderstyle || '');
+        const boxLook = {
+          fill: st.boxcolor || 'white',
+          fillOpacity: boxOpacity,
+          stroke: borderStyle === 'none' || isNoneColor(styleLineColor(st.bordercolor)) ? null : styleLineColor(st.bordercolor) || '#bbbbbb',
+          strokeOpacity: /^(solid|dotted|dashed)$/.test(borderStyle) ? 1 : 0.3,
+        };
+        const borderWidth = styleNum(st.borderwidth) || 1;
+        const borderRadius = styleNum(st.borderradius);
+        const strokeOf = b => borderWidth * 0.2 * b.w / 30;
+        // a box larger than BOX_ICON_MAX_PX (a MULTIQUAD grid of thousands
+        // of items) would need a huge canvas: it is drawn as a polygon in
+        // map coordinates instead (square corners)
+        const bigBox = b => Math.max(b.rect[2] - b.rect[0], b.rect[3] - b.rect[1]) > BOX_ICON_MAX_PX;
+        const iconBoxes = rows.filter(b => !bigBox(b)), polygonBoxes = rows.filter(bigBox);
+        iconBoxes.forEach(b => {
+          b.icon = this._buildBoxIcon(b.rect[2] - b.rect[0], b.rect[3] - b.rect[1],
+            isNaN(borderRadius) ? 0 : borderRadius * Math.min(unit, b.w / 30),
+            strokeOf(b), boxLook);
+        });
+        if (polygonBoxes.length) {
+          const fillRgb = hexOrNamedToRgb(boxLook.fill);
+          const strokeRgb = boxLook.stroke ? hexOrNamedToRgb(boxLook.stroke) : null;
+          box.push(new GeoJsonLayer({
+            id: ids.polygons,
+            data: polygonBoxes.map(b => {
+              const f = offsetOf(b), c = positionOf(b), r = b.rect;
+              const at = (x, y) => pixelOffsetLngLat(c, [x + f[0], y + f[1]], liveZoom);
+              return { type: 'Feature', properties: { stroke: strokeOf(b) },
+                geometry: { type: 'Polygon', coordinates: [[at(r[0], r[1]), at(r[2], r[1]), at(r[2], r[3]), at(r[0], r[3]), at(r[0], r[1])]] } };
+            }),
+            pickable: false,
+            filled: boxLook.fillOpacity > 0,
+            stroked: !!strokeRgb,
+            getFillColor: [...fillRgb.slice(0, 3), Math.round(255 * boxLook.fillOpacity)],
+            getLineColor: strokeRgb ? [...strokeRgb.slice(0, 3), Math.round(255 * boxLook.strokeOpacity)] : [0, 0, 0, 0],
+            getLineWidth: f => f.properties.stroke,
+            lineWidthUnits: 'pixels',
+            parameters: ICON_LAYER_GLOBE_PARAMETERS
+          }));
+        }
+        if (iconBoxes.length) box.push(new IconLayer({
+          // the generation suffix (like every icon-atlas layer id, see
+          // ICON_ATLAS_RESET_AFTER): every zoom creates a new set of box
+          // rasters, and deck.gl's atlas never evicts
+          id: `${ids.icon}-g${this._iconGeneration}`,
+          data: iconBoxes, pickable: false,
+          getPosition: positionOf,
+          getIcon: b => b.icon,
+          // the icon is drawn at 2× with a stroke padding around the box
+          getSize: b => b.icon.height / 2,
+          getPixelOffset: b => { const f = offsetOf(b); return [(b.rect[0] + b.rect[2]) / 2 + f[0], (b.rect[1] + b.rect[3]) / 2 + f[1]]; },
+          sizeUnits: 'pixels',
+          billboard: true,
+          parameters: ICON_LAYER_GLOBE_PARAMETERS
+        }));
+      }
+      const titleData = rows.filter(b => b.title);
+      if (titleData.length) titles.push(new TextLayer({
+        id: ids.titles,
+        data: titleData, pickable: false,
+        getPosition: positionOf,
+        getText: b => b.title.text,
+        getSize: b => b.title.f,
+        sizeUnits: 'pixels',
+        fontFamily: 'arial',
+        characterSet: 'auto',
+        lineHeight: 1,
+        getColor: [...hexOrNamedToRgb(st.textcolor || '#888888').slice(0, 3), 255],
+        fontSettings: { sdf: true },
+        outlineWidth: 1 / 7,
+        outlineColor: [255, 255, 255, 128],
+        getTextAnchor: b => b.title.anchor,
+        // top of the text ≈ first baseline − 0.8 font
+        getAlignmentBaseline: 'top',
+        getPixelOffset: b => { const f = offsetOf(b); return [b.title.x + f[0], b.title.top + f[1]]; },
+        parameters: ICON_LAYER_GLOBE_PARAMETERS
+      }));
+      return { box, titles };
+    }
+
     // BOX (see the BOX block in _buildChartLayers): a rectangle icon
     // w×h px, rounded corners rx, stroke sw px; drawn at twice the size
     _buildBoxIcon(w, h, rx, sw, look) {
@@ -12684,8 +14014,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         ctx.arcTo(x, y + hh, x, y, rr); ctx.arcTo(x, y, x + ww, y, rr); ctx.closePath();
       };
       path();
-      ctx.globalAlpha = look.fillOpacity; ctx.fillStyle = look.fill; ctx.fill();
-      if (look.stroke && S > 0) { ctx.globalAlpha = look.strokeOpacity; ctx.strokeStyle = look.stroke; ctx.lineWidth = S * k; ctx.stroke(); }
+      if (!isNoneColor(look.fill)) { ctx.globalAlpha = look.fillOpacity; ctx.fillStyle = look.fill; ctx.fill(); }
+      if (look.stroke && !isNoneColor(look.stroke) && S > 0) { ctx.globalAlpha = look.strokeOpacity; ctx.strokeStyle = look.stroke; ctx.lineWidth = S * k; ctx.stroke(); }
       // getSize is the icon's height: the padding is part of it
       const icon = { url: canvas.toDataURL(), width: canvas.width, height: canvas.height, anchorX: canvas.width / 2, anchorY: canvas.height / 2, id: key };
       return this._cacheIcon(key, icon);
@@ -12836,7 +14166,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const groups = doRelocate ? this._groupCoLocated(clusterFeatures, effectiveZoom) : clusterFeatures.map(f => {
         return {
           geometry: f.geometry,
-          properties: { counts: this._oneHot(f.properties.cat, f.properties.point_count), total: f.properties.value,
+          // counts is the summed bound VALUE and recordCounts the record
+          // count, as groupCoLocated builds them (RELOCATE) — RELOCATE
+          // moves the item, it never changes a value
+          properties: { counts: this._oneHot(f.properties.cat, f.properties.value),
+            recordCounts: this._oneHot(f.properties.cat, f.properties.point_count), total: f.properties.value,
             ...(f.properties.classValue !== undefined ? { classTotal: f.properties.classValue } : {}),
             ...(f.properties.titleRaw ? { titleRaw: f.properties.titleRaw } : {}) }
         };
@@ -12936,7 +14270,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const rangeSource = this._classSeparate && this.binding.size && !normalize ? rawSizeTotals : totals;
         let nMin = Infinity, nMax = -Infinity;
         for (const v of rangeSource) { if (v < nMin) nMin = v; if (v > nMax) nMax = v; }
-        breaks = flatRangeParts(totals, nMin, nMax, nParts, this.flags, styleNum(this.style.rangecentervalue));
+        const explicit = explicitRangeBreaks(this.style, this.flags);
+        breaks = explicit ? explicitRangeParts(explicit)
+          : flatRangeParts(totals, nMin, nMax, nParts, this.flags, styleNum(this.style.rangecentervalue));
       }
 
       // The theme's own classes follow the aggregated items, as flat's do
@@ -13253,15 +14589,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // DTEXT: the title font follows the chart, max(0.9u, min(W/5,
       // 14u / scale)) (18815) — measured on the fire areas page's SIF chart
       // (W 362 units → font 72.35).
-      const boxShown = flatFlag(this.flags, 'BOX') && !boxHiddenByScale(this.style, liveZoom);
-      const circular = flatFlag(this.flags, 'CIRCULAR');
       const unitPx = objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(this.style.scale) || 1);
-      const boxMarginU = styleNum(this.style.boxmargin) || 2;
-      const titleShown = boxShown && flatFlag(this.flags, 'TITLE') && !!this.binding.title;
-      const titleScale = styleNum(this.style.textscale) || styleNum(this.style.valuescale) || 1;
-      const titleFontOf = W => (flatFlag(this.flags, 'DTEXT')
-        ? Math.max(0.9 * unitPx, Math.min(W / 5, 14 * unitPx / (styleNum(this.style.scale) || 1)))
-        : 5 * unitPx) * titleScale;
       // the chart's value text and label (see VALUES and LABEL below), shared
       // with the box: flat's box encloses whatever the chart group draws
       const valuesShown = this.flags.has('VALUES') && !valuesHiddenByScale(this.style, zoom);
@@ -13269,144 +14597,35 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const labelShown = !!this.style.labelfield && !flatFlag(this.flags, 'NORMSIZE') && !flatFlag(this.flags, 'ZOOM')
         && !labelHiddenByScale(this.style, zoom);
       const labelOf = labelShown ? this._chartLabelFn(unitPx) : null;
-      // flat: fill-opacity (boxopacity || 1) on the raw style value — the
-      // usual string "0" is transparent; typed here, a given 0 is too
-      const boxOpacity = isNaN(styleNum(this.style.boxopacity)) ? 1 : styleNum(this.style.boxopacity);
-      const bottomTitle = flatFlag(this.flags, 'BOTTOMTITLE');
-      const alignRight = /right/.test(String(this.style.align || ''));
-      // with MULTIQUAD only the first item of a position gets its box/title
-      const boxLayout = boxShown ? combined.filter(d => !multi || multi.index.get(d) === 0).map(d => {
-        const r = vRadius(sizeValueOf(d));
-        const ext = multi ? multi.extent.get(d) : [0, 0, 0, 0];
-        const chart = [ext[0] - r, ext[1] - r, ext[2] + r, ext[3] + r];
-        const grow = e => { if (!e) return; chart[0] = Math.min(chart[0], e[0]); chart[1] = Math.min(chart[1], e[1]); chart[2] = Math.max(chart[2], e[2]); chart[3] = Math.max(chart[3], e[3]); };
-        if (valueTextOf && !d.properties.counts) { const v = valueTextOf(d, r); if (v) grow(v.extent); }
-        if (labelOf) { const l = labelOf(d, r); if (l) grow(l.extent); }
-        const w = chart[2] - chart[0];
-        const margin = Math.min(2 * boxMarginU * unitPx, boxMarginU * w / 30);
-        const boxR = circular ? r * 1.1 + margin : r;
-        const titleFontPx = titleFontOf(w);
-        let title = null;
-        if (titleShown) {
-          const text = this._itemTitle(d.properties);
-          if (text) {
-            const f = titleFontPx;
-            const lines = wrapTitleLines(text, f, circular ? boxR * 2 : w).split('\n');
-            const width = Math.max(...lines.map(l => titleTextWidth(l, f)));
-            // first baseline; lines go down one font each
-            const base = circular
-              ? (bottomTitle ? boxR + f : -boxR - 0.7 * f - (lines.length - 1) * f)
-              : (bottomTitle ? chart[3] + f : chart[1] - 0.7 * f - (lines.length - 1) * f);
-            const x = circular ? unitPx / 2 : (alignRight ? chart[2] : chart[0]);
-            const anchor = circular ? 'middle' : (alignRight ? 'end' : 'start');
-            const x0 = anchor === 'middle' ? x - width / 2 : anchor === 'end' ? x - width : x;
-            // arial: ascent 0.905, descent 0.212 of the font size
-            title = { text: lines.join('\n'), x, anchor, top: base - 0.8 * f, f,
-              extent: [x0, base - 0.905 * f, x0 + width, base + (lines.length - 1) * f + 0.212 * f] };
-          }
-        }
-        let rect = null;
-        if (!circular) {
-          const e = chart.slice();
-          // with a title flat trims 0.1 font off the top of chart + title
-          if (title) { e[0] = Math.min(e[0], title.extent[0]); e[1] = Math.min(e[1], title.extent[1]) + 0.1 * titleFontPx; e[2] = Math.max(e[2], title.extent[2]); e[3] = Math.max(e[3], title.extent[3]); }
-          rect = [e[0] - margin, e[1] - margin, e[2] + margin, e[3] + margin];
+      // with MULTIQUAD only the first item of a position gets its box/title;
+      // the circle sits on the anchor (0, 0), its base radius the symbol's
+      const boxLayout = this._boxRows(() => combined.filter(d => !multi || multi.index.get(d) === 0), {
+        unit: unitPx, liveZoom,
+        radiusOf: d => vRadius(sizeValueOf(d)), centerOf: () => [0, 0],
+        extentOf: d => {
+          const r = vRadius(sizeValueOf(d));
+          const ext = multi ? multi.extent.get(d) : [0, 0, 0, 0];
+          const chart = [ext[0] - r, ext[1] - r, ext[2] + r, ext[3] + r];
+          const grow = e => { if (!e) return; chart[0] = Math.min(chart[0], e[0]); chart[1] = Math.min(chart[1], e[1]); chart[2] = Math.max(chart[2], e[2]); chart[3] = Math.max(chart[3], e[3]); };
+          if (valueTextOf && !d.properties.counts) { const v = valueTextOf(d, r); if (v) grow(v.extent); }
+          if (labelOf) { const l = labelOf(d, r); if (l) grow(l.extent); }
+          return chart;
         }
-        return { d, r, w, boxR, rect, title };
+      });
+      // (the title layers are pushed after the symbols, below)
+      const boxLayers = boxLayout ? this._boxTitleLayers(boxLayout, {
+        unit: unitPx, liveZoom,
+        positionOf: b => b.d.geometry.coordinates, offsetOf: b => alignOf(b.d),
+        ids: { circle: `ix-box-${this.name}`, icon: `ix-box-${this.name}`, polygons: `ix-box-polygons-${this.name}`, titles: `ix-titles-${this.name}` }
       }) : null;
-      if (boxShown && circular) {
-        const boxRgb = hexOrNamedToRgb(this.style.boxcolor || '#eeeeee');
-        const boxAlpha = Math.round(255 * boxOpacity);
-        const borderRgb = hexOrNamedToRgb(this.style.bordercolor || '#dddddd');
-        // ScatterplotLayer has no pixel offset: a moved chart (align,
-        // offsetx/offsety) gets its circle as an icon
-        if (alignOf.active) layers.push(new IconLayer({
-          id: `ix-box-${this.name}-g${this._iconGeneration}`,
-          data: boxLayout, pickable: false,
-          getPosition: b => b.d.geometry.coordinates,
-          getIcon: b => this._buildSingleIcon(boxRgb, boxAlpha / 255, 'circle', borderRgb,
-            Math.round(unitPx / 20 * BUBBLE_ICON_SIZE / Math.max(1, 2 * b.boxR) * 4) / 4),
-          getSize: b => b.boxR * 2,
-          getPixelOffset: b => alignOf(b.d),
-          sizeUnits: 'pixels',
-          billboard: true,
-          parameters: ICON_LAYER_GLOBE_PARAMETERS
-        }));
-        else layers.push(new ScatterplotLayer({
-          id: `ix-box-${this.name}`,
-          data: boxLayout, pickable: false,
-          getPosition: b => b.d.geometry.coordinates,
-          getRadius: b => b.boxR,
-          radiusUnits: 'pixels',
-          stroked: true,
-          getFillColor: [...boxRgb.slice(0, 3), boxAlpha],
-          getLineColor: [...borderRgb.slice(0, 3), 255],
-          getLineWidth: unitPx / 20,
-          lineWidthUnits: 'pixels',
-          parameters: ICON_LAYER_GLOBE_PARAMETERS
-        }));
-      } else if (boxShown) {
-        const borderStyle = String(this.style.borderstyle || '');
-        const boxLook = {
-          fill: this.style.boxcolor || 'white',
-          fillOpacity: boxOpacity,
-          stroke: borderStyle === 'none' ? null : styleLineColor(this.style.bordercolor) || '#bbbbbb',
-          strokeOpacity: /^(solid|dotted|dashed)$/.test(borderStyle) ? 1 : 0.3,
-        };
-        const borderWidth = styleNum(this.style.borderwidth) || 1;
-        const borderRadius = styleNum(this.style.borderradius);
-        const strokeOf = b => borderWidth * 0.2 * b.w / 30;
-        // a box larger than BOX_ICON_MAX_PX (a MULTIQUAD grid of thousands
-        // of items) would need a huge canvas: it is drawn as a polygon in
-        // map coordinates instead (square corners)
-        const bigBox = b => Math.max(b.rect[2] - b.rect[0], b.rect[3] - b.rect[1]) > BOX_ICON_MAX_PX;
-        const iconBoxes = boxLayout.filter(b => !bigBox(b)), polygonBoxes = boxLayout.filter(bigBox);
-        iconBoxes.forEach(b => {
-          b.icon = this._buildBoxIcon(b.rect[2] - b.rect[0], b.rect[3] - b.rect[1],
-            isNaN(borderRadius) ? 0 : borderRadius * Math.min(unitPx, b.w / 30),
-            strokeOf(b), boxLook);
-        });
-        if (polygonBoxes.length) {
-          const fillRgb = hexOrNamedToRgb(boxLook.fill);
-          const strokeRgb = boxLook.stroke ? hexOrNamedToRgb(boxLook.stroke) : null;
-          layers.push(new GeoJsonLayer({
-            id: `ix-box-polygons-${this.name}`,
-            data: polygonBoxes.map(b => {
-              const o = alignOf(b.d), c = b.d.geometry.coordinates, r = b.rect;
-              const at = (x, y) => pixelOffsetLngLat(c, [x + o[0], y + o[1]], liveZoom);
-              return { type: 'Feature', properties: { stroke: strokeOf(b) },
-                geometry: { type: 'Polygon', coordinates: [[at(r[0], r[1]), at(r[2], r[1]), at(r[2], r[3]), at(r[0], r[3]), at(r[0], r[1])]] } };
-            }),
-            pickable: false,
-            filled: boxLook.fillOpacity > 0,
-            stroked: !!strokeRgb,
-            getFillColor: [...fillRgb.slice(0, 3), Math.round(255 * boxLook.fillOpacity)],
-            getLineColor: strokeRgb ? [...strokeRgb.slice(0, 3), Math.round(255 * boxLook.strokeOpacity)] : [0, 0, 0, 0],
-            getLineWidth: f => f.properties.stroke,
-            lineWidthUnits: 'pixels',
-            parameters: ICON_LAYER_GLOBE_PARAMETERS
-          }));
-        }
-        if (iconBoxes.length) layers.push(new IconLayer({
-          id: `ix-box-${this.name}-g${this._iconGeneration}`,
-          data: iconBoxes, pickable: false,
-          getPosition: b => b.d.geometry.coordinates,
-          getIcon: b => b.icon,
-          // the icon is drawn at 2× with a stroke padding around the box
-          getSize: b => b.icon.height / 2,
-          getPixelOffset: b => { const o = alignOf(b.d); return [(b.rect[0] + b.rect[2]) / 2 + o[0], (b.rect[1] + b.rect[3]) / 2 + o[1]]; },
-          sizeUnits: 'pixels',
-          billboard: true,
-          parameters: ICON_LAYER_GLOBE_PARAMETERS
-        }));
-      }
+      if (boxLayers) layers.push(...boxLayers.box);
 
       // flat's per-part SYMBOL branch (everything but CATEGORICAL without
-      // AGGREGATE/GROUP) draws a square of side 2r, the other one 1.6r
-      // (drawSymbolPath's own square)
+      // AGGREGATE/GROUP) draws a square or roundrect of side 2r, the other
+      // one 1.6r (drawSymbolPath's own square / roundrect)
       const perPartBranch = flatChartBranch(this.flags) === 'symbol'
         && !(this.flags.has('CATEGORICAL') && !this.flags.has('AGGREGATE') && !flatFlag(this.flags, 'GROUP'));
-      const shapeOf = props => { const sh = this._resolveSymbolShape(props); return sh === 'square' && perPartBranch ? 'squarefull' : sh; };
+      const shapeOf = props => { const sh = this._resolveSymbolShape(props); return perPartBranch && (sh === 'square' || sh === 'roundrect') ? sh + 'full' : sh; };
       // a range-classed cell is ONE class: one symbol in its class color,
       // fillopacity and linecolor, as a single item (flat draws one
       // symbol) — the packed multi-category icon is for CATEGORICAL cells
@@ -13507,29 +14726,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         parameters: ICON_LAYER_GLOBE_PARAMETERS
       }));
 
-      const titleData = boxLayout ? boxLayout.filter(b => b.title) : [];
-      if (titleData.length) {
-        layers.push(new TextLayer({
-          id: `ix-titles-${this.name}`,
-          data: titleData, pickable: false,
-          getPosition: b => b.d.geometry.coordinates,
-          getText: b => b.title.text,
-          getSize: b => b.title.f,
-          sizeUnits: 'pixels',
-          fontFamily: 'arial',
-          characterSet: 'auto',
-          lineHeight: 1,
-          getColor: [...hexOrNamedToRgb(this.style.textcolor || '#888888').slice(0, 3), 255],
-          fontSettings: { sdf: true },
-          outlineWidth: 1 / 7,
-          outlineColor: [255, 255, 255, 128],
-          getTextAnchor: b => b.title.anchor,
-          // top of the text ≈ first baseline − 0.8 font
-          getAlignmentBaseline: 'top',
-          getPixelOffset: b => { const o = alignOf(b.d); return [b.title.x + o[0], b.title.top + o[1]]; },
-          parameters: ICON_LAYER_GLOBE_PARAMETERS
-        }));
-      }
+      if (boxLayers) layers.push(...boxLayers.titles);
 
       // VALUES: bold value label centered on each bubble (see
       // flatValueText/valuesFontSizePx above). Labels are their own
@@ -13730,13 +14927,55 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     _buildSequenceChartLayers(charts, zoom, liveZoom) {
       const st = this.style;
       const multi = !!this._multiFields && this._isMultiFieldSequence();
-      const seqMax = multi ? (styleNum(st.normalsizevalue) || this._multiFieldPartMax) : this._sequenceMaxValue(zoom);
+      // AGGREGATE + AUTO100 (flat normalizes the aggregated item's
+      // nValuesA to % of their own sum, maptheme.js 12166-12176): every
+      // item's parts in % of that item. Without AGGLEARATE, applyField100
+      // already normalized the records' field values (auto100 there) —
+      // this must not run twice
+      const auto100 = multi && this.flags.has('AUTO100') && this.flags.has('AGGREGATE');
+      // The value scale must be measured on the SAME scale the parts are
+      // drawn in. With AGGREGATE, AUTO100 normalizes every item's parts to
+      // % of their own sum at layout time (the records themselves stay
+      // raw — applyField100 skips AGGREGATE themes), so the raw-features
+      // _multiFieldPartMax (~1.0 here) is 100x off the drawn values and
+      // would blow every part's radius up by sqrt(100). flat's own
+      // nMaxValue fallback (nNormalSizeValue || nAllMaxValue,
+      // maptheme.js 21796) measures nAllMaxValue on the NORMALIZED item
+      // values (12166-12176), so the scale matches the parts. Without
+      // AUTO100 the records were already normalized by applyField100 and
+      // _multiFieldPartMax IS that scale (NYC status page)
+      if (multi && auto100 && !this._seqAuto100Max) {
+        let m = 0;
+        for (const f of this.features) {
+          const parts = this._multiFields.map(k => parseFloat(f.properties && f.properties[k]) || 0);
+          const sum = parts.reduce((a, v) => a + v, 0);
+          if (sum > 0) for (const v of parts) { const nv = v / (sum / 100); if (nv > m) m = nv; }
+        }
+        this._seqAuto100Max = m || 1;
+      }
+      const seqMax = multi
+        ? (auto100 ? this._seqAuto100Max : (styleNum(st.normalsizevalue) || this._multiFieldPartMax))
+        : this._sequenceMaxValue(zoom);
       const unit = objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(st.scale) || 1);
       const normalR = NORMAL_RADIUS_PX * unit;
       const sizePow = resolveSizePow(st, this.flags);
-      const partRadius = multi
-        ? v => Math.max(VALUE_RADIUS_MIN, normalR * Math.pow(Math.abs(v) / seqMax, 1 / sizePow))
-        : v => valueRadius(v, liveZoom, st, this.mapOptions, this.flags, seqMax);
+      // flat's size field on a SEQUENCE chart part (maptheme.js 21851-21874):
+      // the radius carries BOTH the part's value AND the item's size —
+      // nMaxRadius · (nValue/nMaxValue)^(1/p) · (nSize/nMaxSize)^(1/p),
+      // nMaxSize the biggest item size (measured on the records; MAX, the
+      // one combiner flat's star-part charts pair with a size field, keeps
+      // the cells' max equal to the records' max)
+      const sizeField = multi && this.binding.size && this.binding.size !== '$item$' ? this.binding.size : null;
+      let sizeMax = 0;
+      if (sizeField) {
+        for (const f of this.features) { const v = Math.abs(parseFloat(f.properties && f.properties[sizeField]) || 0); if (v > sizeMax) sizeMax = v; }
+      }
+      const itemSizeFactor = d => {
+        if (!sizeField) return 1;
+        const sz = typeof d.properties.size === 'number' ? d.properties.size
+          : Math.abs(parseFloat((d.properties.raw || {})[sizeField]) || 0);
+        return sizeMax > 0 ? Math.pow(sz / sizeMax, 1 / sizePow) : 0;
+      };
       const rings = flatFlag(this.flags, 'RINGS');
       const centerValues = flatFlag(this.flags, 'CENTERVALUES');
       const noFill = this._partNoFill || new Set();
@@ -13749,17 +14988,116 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const borderRgb = st.linecolor && styleLineColor(st.linecolor) !== 'none' ? hexOrNamedToRgb(styleLineColor(st.linecolor)) : null;
       const lineWidth = styleNum(st.linewidth) || 1;
       const symbols = Array.isArray(st.symbols) ? st.symbols : null;
+      // flat draws an external .svg/.png/.jpeg symbol file as an <image>
+      // node (maptheme.js 22190-22199), the chart's own shape otherwise.
+      // Here the same URL is the part's IconLayer icon — deck.gl loads
+      // it itself (its ImageBitmap loader falls back to <img>, which
+      // rasterizes SVG) — NOT tinted: these files carry their own colors,
+      // and flat doesn't recolor an <image> either
+      const urlSymbolOf = i => {
+        const s = symbols && (symbols[i] || symbols[0]);
+        return typeof s === 'string' && /\.(svg|png|jpe?g)([?#]|$)/i.test(s.trim()) ? s.trim() : null;
+      };
+      if (!this._urlIconCache) this._urlIconCache = new Map();
+      const urlIcon = u => {
+        if (!this._urlIconCache.has(u)) {
+          // the placeholder is a transparent 1x1 PNG, NOT the raw symbol
+          // URL: deck.gl would immediately try to load that itself, and an
+          // SVG without natural dimensions (a viewBox only, the bus
+          // pictogram of the City-moving page) makes Chrome's
+          // createImageBitmap throw — a console error and a part that
+          // never renders. The real raster replaces it below
+          const entry = { url: TRANSPARENT_1PX_PNG, width: 256, height: 256, anchorX: 128, anchorY: 128, mask: false, id: 'seq-sym-pending:' + u };
+          this._urlIconCache.set(u, entry);
+          // fetch the symbol ONCE and rasterize it into the descriptor's
+          // own 256px cell here: deck then always sees exactly the declared
+          // dimensions, and dimension-less SVGs work like any other. The
+          // redraw lets the next getIcon see the patched descriptor
+          fetch(u).then(r => r.ok ? r.text() : null).then(text => new Promise((resolve, reject) => {
+            if (typeof text !== 'string' || !/<svg[\s>]/i.test(text)) { reject(new Error('not svg')); return; }
+            if (!/\swidth\s*=/i.test(text) || !/\sheight\s*=/i.test(text)) {
+              const vb = text.match(/viewBox\s*=\s*["']([^"']*)["']/i);
+              const p = vb && vb[1].trim().split(/[\s,]+/).map(Number);
+              if (p && p.length === 4 && isFinite(p[2]) && p[2] > 0 && isFinite(p[3]) && p[3] > 0) {
+                text = text.replace(/<svg/i, '<svg width="' + p[2] + '" height="' + p[3] + '"');
+              }
+            }
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = () => reject(new Error('svg decode failed'));
+            img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
+          })).then(img => {
+            const size = entry.width;
+            const canvas = document.createElement('canvas');
+            canvas.width = size; canvas.height = size;
+            const ctx = canvas.getContext('2d');
+            const s = Math.min(size / (img.naturalWidth || size), size / (img.naturalHeight || size));
+            const dw = (img.naturalWidth || size) * s, dh = (img.naturalHeight || size) * s;
+            ctx.drawImage(img, (size - dw) / 2, (size - dh) / 2, dw, dh);
+            entry.url = canvas.toDataURL('image/png');
+            entry.id = 'seq-sym-raster:' + u;
+            if (this._triggerRedraw) this._triggerRedraw();
+          }).catch(() => {
+            // not an SVG (a PNG/JPEG symbol): deck's own URL loading takes
+            // it from here — and a pre-sized SVG that failed to rasterize
+            // gets that same second chance
+            entry.url = u;
+            entry.id = 'seq-sym-natural:' + u;
+            if (this._triggerRedraw) this._triggerRedraw();
+          });
+        }
+        return this._urlIconCache.get(u);
+      };
       const shapeOf = i => { const sh = symbols && (symbols[i] || symbols[0]); return normalizeSymbolShape(sh); };
       const colorOf = i => this.classRgb(i);
-      const parts = [], glows = [];
+      const allParts = [], allGlows = [];
       for (const d of charts) {
-        const counts = d.properties.parts || d.properties.counts;
+        // parts: the record's own field values (a per-item chart, or the
+        // single-record cell of an aggregated one); series: a multi-record
+        // AGGREGATE cell's per-field combination (aggregateOnGrid); counts:
+        // the CATEGORICAL variant
+        let counts = d.properties.parts || d.properties.series || d.properties.counts;
+        if (!Array.isArray(counts)) continue;
+        if (auto100) {
+          const sum = counts.reduce((a, v) => a + (v || 0), 0);
+          counts = counts.map(v => sum > 0 ? v / (sum / 100) : 0);
+        }
+        // flat's aggregated CATEGORICAL item holds a value per category only up
+        // to the highest category it has (measured on flat: the chart's star and
+        // glow follow the categories present as 0..k, 985 of 988 charts of the
+        // concessioni page): trailing zeros are no parts, so with SORT|UP the
+        // smallest part — order index 0, the one that sets the star radius and
+        // carries the glow — is a zero only when a category BELOW the highest
+        // one is missing
+        if (!d.properties.parts && !d.properties.series) {
+          let n = counts.length;
+          while (n > 0 && !counts[n - 1]) n--;
+          if (n < counts.length) counts = counts.slice(0, n);
+        }
+        const sizeFactor = itemSizeFactor(d);
+        const partRadius = multi
+          ? v => Math.max(VALUE_RADIUS_MIN, normalR * Math.pow(Math.abs(v) / seqMax, 1 / sizePow) * sizeFactor)
+          : v => valueRadius(v, liveZoom, st, this.mapOptions, this.flags, seqMax);
         let layout = rings ? ringsLayout(counts, partRadius)
           : sequenceLayout(counts, this.flags, partRadius, { maxRadius: normalR, maxValue: seqMax, nParts: nCats, rangeScale: styleNum(st.rangescale) || 0 });
         if (!layout.length) continue;
         // GLOW belongs to the first part (sorted) or to every part, and
         // hides with it when its class is not marked
-        const glowParts = new Set(sorted ? [layout[0].i] : layout.map(p => p.i));
+        // every chart glows (deliberately NOT flat's rule, which gives the glow to
+        // the part at sorted order index 0 — a zero, skipped, whenever a category
+        // below the highest is missing — so only about a quarter of flat's charts
+        // glow): a sorted chart's glow belongs to its biggest part, an unsorted
+        // one glows with every part as in flat
+        const biggest = layout.reduce((m, p) => (p.v > m.v ? p : m), layout[0]);
+        const glowParts = new Set(sorted ? [biggest.i] : layout.map(p => p.i));
+        // the chart's drawn extent (flat: map.Dom.getBox of its shape
+        // group) — the parts' star cluster — for BOX / CIRCULARBOX sizing
+        let ex0 = Infinity, ey0 = Infinity, ex1 = -Infinity, ey1 = -Infinity;
+        layout.forEach(p => {
+          ex0 = Math.min(ex0, p.x - p.r); ey0 = Math.min(ey0, p.y - p.r);
+          ex1 = Math.max(ex1, p.x + p.r); ey1 = Math.max(ey1, p.y + p.r);
+        });
+        d._seqExtent = [ex0, ey0, ex1, ey1];
         if (marking && !gray) {
           layout = layout.filter(p => this._markedClasses.has(p.i)).map(p => ({ ...p, x: 0, y: 0 }));
           if (!layout.length) continue;
@@ -13768,101 +15106,286 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         d._seqLast = layout[layout.length - 1].r;
         const items = layout.map(p => {
           const item = { geometry: d.geometry, properties: d.properties, chart: d, part: p };
-          if (glowParts.has(p.i)) glows.push(item);
+          if (glowParts.has(p.i)) allGlows.push(item);
           return item;
         });
         // STAR: the first part (its center) is put on top at the end (23145)
         if (star && items.length > 1) items.push(items.shift());
-        parts.push(...items);
+        allParts.push(...items);
       }
       const alignOf = this._chartAlignFn(liveZoom, d => (d.chart || d)._seqLast || 0);
       const offsetOf = item => { const o = alignOf(item.chart); return [o[0] + item.part.x, o[1] + item.part.y]; };
       const alphaOf = item => (gray && !this._markedClasses.has(item.part.i) ? DIMMED_ICON_ALPHA : 255);
       const layers = [];
-      if (glows.length && this.flags.has('GLOW') && !glowHiddenByScale(st, liveZoom)) {
-        layers.push(new IconLayer({
-          id: `ix-glow-${this.name}-g${this._iconGeneration}`,
-          data: glows, pickable: false,
-          getPosition: d => d.geometry.coordinates,
-          getIcon: d => this._getGlowIcon(colorOf(d.part.i)),
-          getSize: d => d.part.r * 11,
-          getPixelOffset: offsetOf,
-          getColor: d => [255, 255, 255, alphaOf(d)],
-          sizeUnits: 'pixels', billboard: true,
-          parameters: ICON_LAYER_GLOBE_PARAMETERS
-        }));
-      } else if (glows.length && this.flags.has('AURA') && !glowHiddenByScale(st, liveZoom)) {
+      // BOX / CIRCULARBOX with TITLE / BOTTOMTITLE — flat's own box block
+      // (maptheme.js 18757-18925) on a SEQUENCE chart's extent: the star
+      // cluster of parts (d._seqExtent), not one bubble's radius.
+      //  - CIRCULARBOX: a circle of max(w,h)/2 · 1.1 + margin, margin
+      //    min(2m, m·w/30u), m = boxmargin (2) · u; boxcolor (#eeeeee) at
+      //    boxopacity, stroke bordercolor (#dddddd) one SVG unit (u/20)
+      //  - the title (TITLE / BOTTOMTITLE) in textcolor (#888888) over
+      //    the half-opaque white halo, centered under the circle
+      //    (BOTTOMTITLE: one font below its bottom edge), DTEXT font
+      //    max(0.9u, min(w/5, 14u/scale)) · textscale, wrapped to the
+      //    circle's width — gated by titleupper (shown while the map
+      //    scale is that bound or coarser, 18810) and boxupper/boxlower
+      // (flat centers the circular box and its title on the chart's
+      // bounding-box CENTER — maptheme.js 18793-18798 — not on its anchor: a
+      // star cluster's satellites spread asymmetrically around it; the
+      // circle's title baselines are measured on the resized box, 18798-18830)
+      const circular = flatFlag(this.flags, 'CIRCULAR');
+      const boxLayoutAll = this._boxRows(() => charts.filter(d => d._seqExtent), { unit, liveZoom, extentOf: d => d._seqExtent });
+      // per-chart overlap bands (see the band computation in the
+      // box block): a Map chart → band index, filled only when
+      // boxes are drawn; empty (single band) otherwise
+      const bandOfChart = new Map();
+      let nBands = 1;
+      if (boxLayoutAll) {
+        // flat draws every chart as ONE group — its box, its symbols,
+        // its title, its values together — and the groups are sorted by
+        // size, so a bigger chart covers a smaller one ENTIRELY
+        // (chartMap's ascending sort, the biggest drawn last). deck.gl
+        // stacks whole layers, so with every box in one layer below
+        // every symbol, a bigger chart's box covered a smaller chart's
+        // box while that chart's symbols floated on top of it (the
+        // City-moving page's overlapping circles). Charts are grouped
+        // into overlap "bands" instead — an interval coloring assigned
+        // biggest-chart-first: within a band no two charts overlap
+        // (their box + title extents, in map pixel space, disjoint),
+        // and a chart is always in a band above every smaller chart it
+        // overlaps. Each band then draws its charts' complete group
+        // (box, title, glow, symbols, values), the smallest band first
+        // — deck.gl draws the first layer at the bottom — so between
+        // two overlapping charts the bigger one is wholly on top, as
+        // flat draws it. Overlap-free themes keep one band and today's
+        // exact single layers
+        const world = 512 * Math.pow(2, liveZoom);
+        const anchorPx = d => {
+          const o = alignOf(d), c = d.geometry.coordinates;
+          const lat = c[1] * Math.PI / 180;
+          return [(c[0] + 180) / 360 * world + o[0],
+            (0.5 - Math.log(Math.tan(Math.PI / 4 + lat / 2)) / (2 * Math.PI)) * world + o[1]];
+        };
+        const sizeOfBand = b => circular ? b.boxR
+          : b.rect ? Math.max(b.rect[2] - b.rect[0], b.rect[3] - b.rect[1]) / 2 : 0;
+        const bandRects = [];
+        for (const b of boxLayoutAll.slice().sort((a, c) => sizeOfBand(c) - sizeOfBand(a))) {
+          // the chart's whole drawn extent: parts cluster, box and
+          // title, as px around the (align-moved) anchor
+          const e = b.d._seqExtent || [0, 0, 0, 0];
+          let x0 = e[0], y0 = e[1], x1 = e[2], y1 = e[3];
+          if (circular) { x0 = Math.min(x0, b.cx - b.boxR); y0 = Math.min(y0, b.cy - b.boxR); x1 = Math.max(x1, b.cx + b.boxR); y1 = Math.max(y1, b.cy + b.boxR); }
+          else if (b.rect) { x0 = Math.min(x0, b.rect[0]); y0 = Math.min(y0, b.rect[1]); x1 = Math.max(x1, b.rect[2]); y1 = Math.max(y1, b.rect[3]); }
+          if (b.title) { x0 = Math.min(x0, b.title.extent[0]); y0 = Math.min(y0, b.title.extent[1]); x1 = Math.max(x1, b.title.extent[2]); y1 = Math.max(y1, b.title.extent[3]); }
+          const p = anchorPx(b.d);
+          const r = [p[0] + x0, p[1] + y0, p[0] + x1, p[1] + y1];
+          let k = 0;
+          while (bandRects[k] && bandRects[k].some(q => r[0] < q[2] && q[0] < r[2] && r[1] < q[3] && q[1] < r[3])) k++;
+          (bandRects[k] = bandRects[k] || []).push(r);
+          bandOfChart.set(b.d, k);
+        }
+        nBands = bandRects.length;
+      }
+      // one band's whole chart group — box, title, glow, symbols and
+      // values of ITS charts only (the closure's boxLayout, glows and
+      // parts are the band's slices) — pushed as one deck.gl layer
+      // sequence, in today's order. bs: the band's id suffix
+      const drawBand = (boxLayout, glows, parts, bs) => {
+        if (boxLayout) {
+          const L = this._boxTitleLayers(boxLayout, {
+            unit, liveZoom,
+            positionOf: b => b.d.geometry.coordinates, offsetOf: b => alignOf(b.d),
+            ids: { circle: `ix-seqbox-${this.name}${bs}`, icon: `ix-seqbox-${this.name}${bs}`,
+              polygons: `ix-seqbox-polygons-${this.name}${bs}`, titles: `ix-seqtitles-${this.name}${bs}` }
+          });
+          layers.push(...L.box, ...L.titles);
+        }
+        if (glows.length && this.flags.has('GLOW') && !glowHiddenByScale(st, liveZoom)) {
+          layers.push(new IconLayer({
+            id: `ix-glow-${this.name}${bs}-g${this._iconGeneration}`,
+            data: glows, pickable: false,
+            getPosition: d => d.geometry.coordinates,
+            getIcon: d => this._getGlowIcon(colorOf(d.part.i)),
+            getSize: d => d.part.r * 11,
+            getPixelOffset: offsetOf,
+            getColor: d => [255, 255, 255, alphaOf(d)],
+            sizeUnits: 'pixels', billboard: true,
+            parameters: ICON_LAYER_GLOBE_PARAMETERS
+          }));
+        } else if (glows.length && this.flags.has('AURA') && !glowHiddenByScale(st, liveZoom)) {
+          layers.push(new IconLayer({
+            id: `ix-aura-${this.name}${bs}-g${this._iconGeneration}`,
+            data: glows, pickable: false,
+            getPosition: d => d.geometry.coordinates,
+            getIcon: d => this._buildSingleIcon(borderRgb || colorOf(d.part.i), 0.3, 'circle', null, 0),
+            getSize: d => d.part.r * 2 * 1.3,
+            getPixelOffset: offsetOf,
+            getColor: d => [255, 255, 255, alphaOf(d)],
+            sizeUnits: 'pixels', billboard: true,
+            parameters: ICON_LAYER_GLOBE_PARAMETERS
+          }));
+        }
         layers.push(new IconLayer({
-          id: `ix-aura-${this.name}-g${this._iconGeneration}`,
-          data: glows, pickable: false,
+          id: `ix-bubbles-${this.name}${bs}-g${this._iconGeneration}`,
+          data: parts, pickable: true,
           getPosition: d => d.geometry.coordinates,
-          getIcon: d => this._buildSingleIcon(borderRgb || colorOf(d.part.i), 0.3, 'circle', null, 0),
-          getSize: d => d.part.r * 2 * 1.3,
+          // the stroke, in the icon raster's pixels (the icon is drawn at 2r)
+          getIcon: d => {
+            // an external symbol file: the URL icon as flat's <image> (see
+            // urlSymbolOf above), scaled to the part's diameter like flat's
+            // fu.scale(nRadius / nMaxRadius) on a nChartSize image
+            const u = urlSymbolOf(d.part.i);
+            if (u) return urlIcon(u);
+            return this._buildSingleIcon(colorOf(d.part.i), noFill.has(d.part.i) ? 0 : fillOpacity, shapeOf(d.part.i), borderRgb,
+              borderRgb ? Math.round(lineWidth * unit * Math.min(2 * d.part.r / normalR, 0.2) * BUBBLE_ICON_SIZE / Math.max(1, 2 * d.part.r) * 4) / 4 : 0);
+          },
+          getSize: d => d.part.r * 2,
           getPixelOffset: offsetOf,
           getColor: d => [255, 255, 255, alphaOf(d)],
           sizeUnits: 'pixels', billboard: true,
           parameters: ICON_LAYER_GLOBE_PARAMETERS
         }));
-      }
-      layers.push(new IconLayer({
-        id: `ix-bubbles-${this.name}-g${this._iconGeneration}`,
-        data: parts, pickable: true,
-        getPosition: d => d.geometry.coordinates,
-        // the stroke, in the icon raster's pixels (the icon is drawn at 2r)
-        getIcon: d => this._buildSingleIcon(colorOf(d.part.i), noFill.has(d.part.i) ? 0 : fillOpacity, shapeOf(d.part.i), borderRgb,
-          borderRgb ? Math.round(lineWidth * unit * Math.min(2 * d.part.r / normalR, 0.2) * BUBBLE_ICON_SIZE / Math.max(1, 2 * d.part.r) * 4) / 4 : 0),
-        getSize: d => d.part.r * 2,
-        getPixelOffset: offsetOf,
-        getColor: d => [255, 255, 255, alphaOf(d)],
-        sizeUnits: 'pixels', billboard: true,
-        parameters: ICON_LAYER_GLOBE_PARAMETERS
-      }));
-      // VALUES on each part (maptheme.js 22188-22250): the part's value — with
-      // COUNT its record count, with valuefield on the categorical field the
-      // class name — formatted with valuedecimals (else none) plus the unit;
-      // font min(1, 3.2 / L) · r · valuescale, L the length of the theme's
-      // biggest value text (szMaxText), normal weight, in valuecolor /
-      // textcolor, else ChartColors.textColor of the part color.
-      // CENTERVALUES: only on the first part (class 0), its own value
-      if ((this.flags.has('VALUES') || centerValues) && !valuesHiddenByScale(st, zoom)) {
-        const valueScale = styleNum(st.valuescale) || 1;
-        const { noBreaks } = this._valueTextOpts();
-        const units = st.units ? String(st.units) : '';
-        const unit = units ? (units[0] === '.' ? '' : ' ') + units : '';
-        const unitText = unit.length <= 5 ? unit : '';
-        const dec = explicitValueDecimals(st) || 0;
-        const fmt = v => flatGroupedValue(v, dec, noBreaks) + unitText;
-        const maxLen = fmt(seqMax).length;
-        const textOverride = st.valuecolor || st.textcolor;
-        const counting = flatFlag(this.flags, 'COUNT');
-        const labels = [];
-        parts.forEach(d => {
-          if (centerValues && d.part.i !== 0) return;
-          const rec = this._categoryValueRecord(d.part.i);
-          const name = rec ? String(rec[st.valuefield]) : null;
-          const t = counting && d.properties.recordCounts ? d.properties.recordCounts[d.part.i] : d.part.v;
-          const text = name != null ? name : fmt(t);
-          const L = Math.max((name != null ? name.length : 0) + 1, maxLen);
-          const fontSize = Math.min(1, 3.2 / L) * d.part.r * valueScale;
-          if (fontSize > VALUES_MIN_FONT_PX) {
-            labels.push({ geometry: d.geometry, text, fontSize, pixelOffset: offsetOf(d), alpha: alphaOf(d),
-              color: textOverride ? hexOrNamedToRgb(textOverride) : flatChartTextRgb(colorOf(d.part.i)) });
+        // VALUES on each part (maptheme.js 22188-22260): the part's value — with
+        // COUNT its record count, with valuefield on the categorical field the
+        // class name — formatted with valuedecimals (else none) plus the unit.
+        //  - a SHAPE part (circle & kin): font min(1, 3.2 / L) · r · valuescale,
+        //    L the length of the theme's biggest value text (szMaxText), normal
+        //    weight, in valuecolor / textcolor, else ChartColors.textColor of
+        //    the part color
+        //  - an IMAGE-symbol part (an external .svg, the TELRAAM pictograms):
+        //    flat's own other branch (22253-22256) — font max(r · 0.8, 1) ·
+        //    valuescale, the text over createTextLabel's background box (white,
+        //    its rgba(…,0.3) fill × the 0.5 fill-opacity) and in
+        //    ChartColors.lowColor — the 0.7 derivate of the part color —
+        //    regardless of valuecolor/textcolor (flat passes cColor.lowColor
+        //    straight into createTextLabel)
+        // CENTERVALUES: only on the first part (class 0), its own value
+        if ((this.flags.has('VALUES') || centerValues) && !valuesHiddenByScale(st, zoom)) {
+          const valueScale = styleNum(st.valuescale) || 1;
+          const { noBreaks } = this._valueTextOpts();
+          const units = st.units ? String(st.units) : '';
+          const unit = units ? (units[0] === '.' ? '' : ' ') + units : '';
+          const unitText = unit.length <= 5 ? unit : '';
+          const dec = explicitValueDecimals(st) || 0;
+          const fmt = v => flatGroupedValue(v, dec, noBreaks) + unitText;
+          const maxLen = fmt(seqMax).length;
+          const textOverride = st.valuecolor || st.textcolor;
+          const counting = flatFlag(this.flags, 'COUNT');
+          const labels = [];
+          parts.forEach(d => {
+            if (centerValues && d.part.i !== 0) return;
+            const rec = this._categoryValueRecord(d.part.i);
+            const name = rec ? String(rec[st.valuefield]) : null;
+            const t = counting && d.properties.recordCounts ? d.properties.recordCounts[d.part.i] : d.part.v;
+            const text = name != null ? name : fmt(t);
+            const image = !!urlSymbolOf(d.part.i);
+            const L = Math.max((name != null ? name.length : 0) + 1, maxLen);
+            const fontSize = image
+              ? Math.max(d.part.r * 0.8, 1) * valueScale
+              : Math.min(1, 3.2 / L) * d.part.r * valueScale;
+            if (fontSize > VALUES_MIN_FONT_PX) {
+              labels.push({ geometry: d.geometry, text, fontSize, pixelOffset: offsetOf(d), alpha: alphaOf(d),
+                image,
+                color: image ? flatDerivateRgb(colorOf(d.part.i), 0.7)
+                  : textOverride ? hexOrNamedToRgb(textOverride) : flatChartTextRgb(colorOf(d.part.i)) });
+            }
+          });
+          if (labels.length) {
+            // VALUEBACKGROUND on URL-symbol parts: a fading white border
+            // around the value's own CHARACTER SHAPES — the glyphs
+            // re-drawn in white on rings of pixel offsets (a stroke of
+            // copies, no box): the width is a fraction of the font size,
+            // so the halo scales with every label; the shape-part values
+            // keep flat's plain text (no outline)
+            if (flatFlag(this.flags, 'VALUEBACKGROUND')) {
+              const haloLabels = labels.filter(l => l.image);
+              const plainLabels = labels.filter(l => !l.image);
+              if (haloLabels.length) {
+                // a real outline around the characters: the label's own
+                // glyphs re-drawn in white on rings of pixel offsets — a
+                // stroke of copies that hugs the character shapes (deck's
+                // SDF outline is only a faint, buffer-clipped rim). The
+                // base radius is a small fraction of the font size (the
+                // 1px floor keeps it tiny until labels get big), and the
+                // ring alphas fall off, so the border fades to nothing
+                const DIRS = 16, RINGS = [[1, 210], [2, 120], [3.2, 65]];
+                const haloCopies = [];
+                for (const l of haloLabels) {
+                  const rb = Math.max(0.75, l.fontSize * 0.015);
+                  for (let ring = 0; ring < RINGS.length; ring++) {
+                    for (let dir = 0; dir < DIRS; dir++) {
+                      const a = (dir / DIRS) * 2 * Math.PI;
+                      haloCopies.push({ ...l,
+                        dx: Math.cos(a), dy: Math.sin(a),
+                        radius: rb * RINGS[ring][0],
+                        haloAlpha: Math.round(RINGS[ring][1] * l.alpha / 255) });
+                    }
+                  }
+                }
+                layers.push(new TextLayer({
+                  id: `ix-cluster-values-halo-${this.name}${bs}`,
+                  data: haloCopies, pickable: false,
+                  getPosition: d => d.geometry.coordinates,
+                  getText: d => d.text,
+                  getSize: d => d.fontSize,
+                  getColor: d => [255, 255, 255, d.haloAlpha],
+                  getPixelOffset: d => [d.pixelOffset[0] + d.dx * d.radius, d.pixelOffset[1] + d.dy * d.radius],
+                  sizeUnits: 'pixels', fontFamily: 'arial', fontWeight: 'normal',
+                  characterSet: 'auto',
+                  getTextAnchor: 'middle', getAlignmentBaseline: 'center'
+                }));
+                layers.push(new TextLayer({
+                  id: `ix-cluster-values-${this.name}${bs}`,
+                  data: haloLabels, pickable: false,
+                  getPosition: d => d.geometry.coordinates,
+                  getText: d => d.text,
+                  getSize: d => d.fontSize,
+                  getColor: d => [...d.color.slice(0, 3), d.alpha],
+                  getPixelOffset: d => d.pixelOffset,
+                  sizeUnits: 'pixels', fontFamily: 'arial', fontWeight: 'normal',
+                  characterSet: 'auto',
+                  getTextAnchor: 'middle', getAlignmentBaseline: 'center'
+                }));
+              }
+              if (plainLabels.length) layers.push(new TextLayer({
+                id: `ix-cluster-values-plain-${this.name}${bs}`,
+                data: plainLabels, pickable: false,
+                getPosition: d => d.geometry.coordinates,
+                getText: d => d.text,
+                getSize: d => d.fontSize,
+                getColor: d => [...d.color.slice(0, 3), d.alpha],
+                getPixelOffset: d => d.pixelOffset,
+                sizeUnits: 'pixels', fontFamily: 'arial', fontWeight: 'normal',
+                characterSet: 'auto',
+                getTextAnchor: 'middle', getAlignmentBaseline: 'center'
+              }));
+            } else {
+            layers.push(new TextLayer({
+              id: `ix-cluster-values-${this.name}${bs}`,
+              data: labels, pickable: false,
+              getPosition: d => d.geometry.coordinates,
+              getText: d => d.text,
+              getSize: d => d.fontSize,
+              getColor: d => [...d.color.slice(0, 3), d.alpha],
+              getPixelOffset: d => d.pixelOffset,
+              sizeUnits: 'pixels', fontFamily: 'arial', fontWeight: 'normal',
+              characterSet: 'auto',
+              getTextAnchor: 'middle', getAlignmentBaseline: 'center'
+            }));
+            }
           }
-        });
-        if (labels.length) {
-          layers.push(new TextLayer({
-            id: `ix-cluster-values-${this.name}`,
-            data: labels, pickable: false,
-            getPosition: d => d.geometry.coordinates,
-            getText: d => d.text,
-            getSize: d => d.fontSize,
-            getColor: d => [...d.color.slice(0, 3), d.alpha],
-            getPixelOffset: d => d.pixelOffset,
-            sizeUnits: 'pixels', fontFamily: 'arial', fontWeight: 'normal',
-            characterSet: 'auto',
-            getTextAnchor: 'middle', getAlignmentBaseline: 'center'
-          }));
         }
+      };
+      const chartBand = c => bandOfChart.get(c) || 0;
+      if (nBands > 1) {
+        // deck.gl draws the FIRST layer at the bottom: the smallest
+        // charts' band first, the biggest (band 0) last, on top
+        for (let k = nBands - 1; k >= 0; k--) drawBand(
+          boxLayoutAll ? boxLayoutAll.filter(b => chartBand(b.d) === k) : null,
+          allGlows.filter(g => chartBand(g.chart) === k),
+          allParts.filter(p => chartBand(p.chart) === k), '-b' + k);
+      } else {
+        drawBand(boxLayoutAll, allGlows, allParts, '');
       }
       return layers;
     }
@@ -13922,8 +15445,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     //    CENTERVALUE the item's record count
     // Not drawn here (a console note at type parsing, PIE_INERT_FLAGS,
     // PIE_AGGREGATE_INERT_FLAGS):
-    // 3D, VOLUME, HEIGHT, STARBURST, FLOWER/RAYS, BOW, ZOOM, DIRECTION /
-    // DIRECTED, POLAR — the pie is drawn flat and plain instead. Nor
+    // 3D, VOLUME, HEIGHT, BOW, ZOOM, DIRECTION / DIRECTED — the pie is
+    // drawn flat and plain instead; POLAR without STARBURST has no
+    // effect in flat either. STARBURST (with the FLOWER/RAYS angle/gap
+    // variants) and its POLAR circles ARE drawn (pieSliceLayout). Nor
     // style.clipparts, showparts, gridx (flat's several pies per item).
     // Known divergence: flat draws a chart's value labels in the chart's
     // own group, so a bigger pie drawn later covers a smaller neighbour's
@@ -13987,6 +15512,17 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const lineRgb = line === 'none' ? null : hexOrNamedToRgb(line);
       const lineWidthOf = r => (lineRgb ? (styleNum(st.linewidth) || 0.1) * r / 15 : 0);
       const lineRgba = lineRgb ? [...lineRgb.slice(0, 3), Math.round(255 * lineAlpha)] : [0, 0, 0, 0];
+      // flat's STARBURST (maptheme.js 20262-20275, piechart.js 281-287,
+      // 415-420): the parts get equal angles and a ray's radius carries
+      // its value — inner + span · sqrt(v / maxValue) · scale, scale =
+      // maxValue / (normalsizevalue || maxValue) · 2.14 (with SIZE flat
+      // sets only maxValue, so a part at the reference value reaches
+      // 2.14 R). maxValue: style.maxvalue (the reference — the ISTAT
+      // story's national mean), else the biggest part value over the
+      // items (flat's max of the per-part maxima nMaxA). The star's
+      // inner px (the ray variants' 5px) comes off the layout
+      const star = has(/STARBURST/);
+      let starMaxPart = 0;
 
       const charts = [];
       if (agg) {
@@ -14001,6 +15537,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           if (!layout) continue;
           if (cat) layout.slices.forEach(sl => { sl.single = values.length === 1; });
           const sum = values.reduce((a, v) => a + (isNaN(v) ? 0 : v), 0);
+          if (star) for (const v of values) if (v > starMaxPart) starMaxPart = v;
           const r = nSizeOf(sum, size) * unit;
           if (!(r > 0) || !isFinite(r)) continue;
           // flat's draw-order key (maptheme.js 16812-16860): with a size
@@ -14025,6 +15562,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const layout = pieSliceLayout(values, t, { centerPart: st.centerpart });
         if (!layout) continue;
         const sum = values.reduce((a, v) => a + v, 0);
+        if (star) for (const v of values) if (v > starMaxPart) starMaxPart = v;
         const size = this.binding.size ? parseFloat(raw[this.binding.size]) : undefined;
         const r = nSizeOf(sum, size) * unit;
         if (!(r > 0) || !isFinite(r)) continue;
@@ -14057,14 +15595,80 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       });
 
       const TAU = 2 * Math.PI;
-      const slices = [], centers = [], glows = [];
+      const slices = [], centers = [], glows = [], polar = [], polarDashes = [];
       const glowOn = has(/GLOW/) && !has(/ZOOM/) && !glowHiddenByScale(st, liveZoom);
+      // the STARBURST ray scale (see the star comment above): style
+      // maxvalue, else the biggest part value over the items — flat's
+      // `this.nMaxValue || max(nMaxA)`. Without SIZE flat also sets the
+      // donut's normalSizeValue (normalsizevalue, else maxValue), which
+      // dampens the scale
+      const starMax = styleNum(st.maxvalue);
+      const starRef = !isNaN(starMax) && starMax > 0 ? starMax : (starMaxPart > 0 ? starMaxPart : 1);
+      const starNsv = has(/\bSIZE\b/) ? starRef : (nsv || starRef);
+      const starScale = starRef / starNsv * 2.14;
+      // a chart's rays start at the CENTER — flat's `max(5, nRadInner)`
+      // for the ray variants is 5 units of the chart's internal
+      // coordinate system, sub-pixel and invisible on screen (see
+      // pieSliceLayout) — and only with DONUT at the donut's inner
+      // radius (flat piechart.js 326-327: nRadOuter += nRadInner, the
+      // span stays R)
+      const starInnerOf = ch => (ch.layout.inner || 0) * ch.r;
+      const starRadius = (v, R, inner) => Math.max(1, inner + (R - inner) * Math.sqrt(Math.max(0, v) / starRef) * starScale);
       for (const ch of charts) {
+        const starInner = star ? starInnerOf(ch) : 0;
+        if (star && has(/POLAR/)) {
+          // flat piechart.js 435-452: the STARBURST's reference circles —
+          // a white disc at the reference value (fill-opacity 0.25,
+          // #444444 border, solid) and range rings at 75 / 50 / 25 % of
+          // it, the 75% and 25% rings DASHED (stroke-dasharray 50 50 in
+          // the chart group's units, on for half of each cycle). All of
+          // them under every ray. The stroke widths are flat's 1px /
+          // 3px — in the CHART GROUP's coordinate system, whose scale
+          // is ~0.017 of the screen, so on screen they are sub-pixel
+          // hairlines (measured on the ISTAT story: the disc's 197
+          // group-units radius is 11.2px on screen); 1px ≈ 1.1% and
+          // 3px ≈ 3.2% of the base radius R, taken here as fractions
+          // of ch.r so they stay hairlines at every zoom, as in flat
+          const lw1 = ch.r * 0.0108, lw3 = ch.r * 0.0325;
+          const w = ch.r - starInner;
+          polar.push({ position: ch.c, r: starInner + w * starScale, off: ch.off,
+            fill: [255, 255, 255, 64], line: [68, 68, 68, 255], lw: lw1 });
+          polar.push({ position: ch.c, r: starInner + w * Math.sqrt(0.5) * starScale, off: ch.off,
+            fill: [0, 0, 0, 0], line: [68, 68, 68, 255], lw: lw1 });
+          // the dashed rings: one chord per dash — flat's own arcs are
+          // octant polylines, so straight chords are as faithful. The
+          // dash count is flat's geometry: a 50-unit dash on the ring's
+          // group radius — the ring in group units is ~17.7 × its
+          // screen radius (the chart group scale measured on the
+          // story), so a cycle is 100 group units = 100/(17.7 · 2π ·
+          // ringR_screen) of the circle: ~11 dashes around the 75%,
+          // ~6 around the 25% ring, at every zoom
+          for (const q of [0.75, 0.25]) {
+            const rr = starInner + w * Math.sqrt(q) * starScale;
+            const cycles = Math.max(q > 0.5 ? 4 : 3, Math.round((q > 0.5 ? 2.06 : 1.19) * ch.r));
+            const seg = 2 * Math.PI / cycles;
+            for (let i = 0; i < cycles; i++) {
+              const a0 = i * seg, a1 = a0 + seg / 2;
+              // 0 at 12 o'clock, clockwise (pieSliceLayout's convention);
+              // pixelOffsetLngLat's y grows down
+              polarDashes.push({
+                path: [
+                  pixelOffsetLngLat(ch.c, [Math.sin(a0) * rr, -Math.cos(a0) * rr], liveZoom),
+                  pixelOffsetLngLat(ch.c, [Math.sin(a1) * rr, -Math.cos(a1) * rr], liveZoom)
+                ], lw: lw3
+              });
+            }
+          }
+        }
         for (const sl of ch.layout.slices) {
           const rgb = sliceRgb(sl);
+          // STARBURST: this ray's own radius (the value), its inner the
+          // px starInner as a fraction of that radius — the shader takes
+          // a fraction of the instance radius, which varies per ray here
+          const rayR = star ? starRadius(sl.value, ch.r, starInner) : ch.r;
           slices.push({
-            position: ch.c, r: ch.r, off: ch.off, properties: ch.properties, chart: ch, part: sl,
-            slice: [sl.start * Math.PI / 180, sl.sweep >= 360 ? TAU : sl.sweep * Math.PI / 180, ch.layout.inner],
+            position: ch.c, r: rayR, off: ch.off, properties: ch.properties, chart: ch, part: sl,
+            slice: [sl.start * Math.PI / 180, sl.sweep >= 360 ? TAU : sl.sweep * Math.PI / 180, star ? starInner / rayR : ch.layout.inner],
             fill: [...rgb.slice(0, 3), !sl.complement && noFill.has(sl.i) ? 0 : Math.round(255 * fillAlpha)]
           });
         }
@@ -14088,13 +15692,80 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         radiusUnits: 'pixels', billboard: true, stroked: false, filled: true, antialiasing: true,
         parameters: ICON_LAYER_GLOBE_PARAMETERS
       };
-      const layers = [new PieSliceLayer(Object.assign({}, discProps, {
+      // flat's BOX / TITLE for a pie (maptheme.js 18446-18925, the same
+      // block the sequence builder draws): a rectangle around the
+      // chart's drawn extent — on a STARBURST the longest ray, the
+      // disc otherwise — plus, with TITLE, the item's title (an
+      // aggregated grid cell of more than 3 records without its own:
+      // "(n)", see _itemTitle) at the chart's left edge, wrapped to
+      // the chart's width, in textcolor (#888888) over a half-opaque
+      // white halo, its first baseline 0.7 font above the box — the
+      // box grows to enclose it, its top trimmed by 0.1 font. The
+      // box: white at boxopacity, #bbbbbb border at 0.3 opacity
+      // (borderstyle solid/dotted/dashed: 1, none: no border),
+      // borderwidth · 0.2 · width/chartSize px wide. Both are removed
+      // outside boxupper / titleupper (maptheme.js 18758-18760, the
+      // TITLE gate 18809-18811)
+      // the chart's drawn extent, px around the anchor (flat's getBox of the
+      // shape group — the longest ray on a STARBURST)
+      const boxRows = this._boxRows(charts, { unit, liveZoom, extentOf: ch => {
+        let e = ch.r;
+        if (star) { const in0 = starInnerOf(ch); for (const sl of ch.layout.slices) e = Math.max(e, starRadius(sl.value, ch.r, in0)); }
+        return [-e, -e, e, e];
+      } });
+      const layers = [];
+      if (boxRows && boxRows.length) {
+        const L = this._boxTitleLayers(boxRows, {
+          unit, liveZoom,
+          positionOf: b => b.d.c, offsetOf: b => b.d.off,
+          ids: { circle: `ix-pie-box-${this.name}`, icon: `ix-pie-box-${this.name}`, polygons: `ix-pie-box-polygons-${this.name}`, titles: `ix-pie-titles-${this.name}` }
+        });
+        layers.push(...L.box, ...L.titles);
+      }
+      if (polar.length) {
+        layers.push(new ScatterplotLayer({
+          id: `ix-pie-polar-${this.name}`,
+          data: polar, pickable: false,
+          getPosition: d => d.position,
+          getRadius: d => d.r,
+          getPixelOffset: d => d.off,
+          radiusUnits: 'pixels', billboard: true,
+          filled: true, stroked: true,
+          getFillColor: d => d.fill,
+          getLineColor: d => d.line,
+          getLineWidth: d => d.lw,
+          lineWidthUnits: 'pixels',
+          parameters: ICON_LAYER_GLOBE_PARAMETERS
+        }));
+        // flat's dashed range rings (see the polar block): one chord per
+        // dash, drawn in map coordinates at the current zoom — the
+        // chart anchors move on zoom, and the layers rebuild with them
+        if (polarDashes.length) {
+          layers.push(new PathLayer({
+            id: `ix-pie-polar-dashes-${this.name}`,
+            data: polarDashes, pickable: false,
+            getPath: d => d.path,
+            getColor: [68, 68, 68, 255],
+            getWidth: d => d.lw,
+            widthUnits: 'pixels',
+            parameters: ICON_LAYER_GLOBE_PARAMETERS
+          }));
+        }
+      }
+      layers.push(new PieSliceLayer(Object.assign({}, discProps, {
         id: `ix-pie-${this.name}`,
         data: slices, pickable: true,
         getLineColor: lineRgba,
         getSlice: d => d.slice,
-        getSliceLineWidth: d => lineWidthOf(d.r)
-      }))];
+        // flat's pie outline (piechart.js: normalX(linewidth) · R / 300)
+        // is 2% of the radius — sub-pixel for every small chart, and the
+        // browser rasterizes it as a HAIRLINE: one device pixel at full
+        // opacity (Skia's stroke floor). The 1 device-px floor here
+        // matches that: the width is in the shader's device-pixel
+        // space (pieAA = fwidth), so the CSS width is scaled by the
+        // device pixel ratio first
+        getSliceLineWidth: d => (lineWidthOf(d.r) > 0 ? Math.max(lineWidthOf(d.r) * (global.devicePixelRatio || 1), 1) : 0)
+      })));
       if (centers.length) {
         layers.push(new PieSliceLayer(Object.assign({}, discProps, { id: `ix-pie-center-${this.name}`, data: centers, pickable: true })));
       }
@@ -14308,7 +15979,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     //    STACKED beside the column on leader lines; flat's values color
     //    #798697 (textcolor), negative red (valuecolor); DTEXT and a sized
     //    POINTER fade small values
-    //  - BOX / TITLE (flatChartBox): a box around chart and title, the
+    //  - BOX / TITLE (chartBoxLayout): a box around chart and title, the
     //    item's title above it — boxcolor (white) at boxopacity, bordercolor
     //    (#bbbbbb) at 0.3, borderwidth · 0.2 · w / 30; title 5 u ·
     //    textscale in textcolor (#888888) over a white halo
@@ -14404,13 +16075,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       }
       applyFlatMaxCharts(charts, st);
 
-      const boxShown = flatFlag(this.flags, 'BOX') && !boxHiddenByScale(st, liveZoom);
-      const titleShown = boxShown && flatFlag(this.flags, 'TITLE') && !!this.binding.title;
-      const titleFont = 5 * (num(st.textscale) || num(st.valuescale) || 1);
+      // a BAR draws its box as a shader shape (rectangle only, no CIRCULARBOX):
+      // the gates, margin, title font and placement are the box's, shared with
+      // every chart type (_boxSpec / chartBoxLayout, here in chart units)
+      const boxSpec = this._boxSpec(liveZoom);
+      const boxUnits = st.titleunits ? ' ' + st.titleunits : '';
       const boxOpacity = isNaN(styleNum(st.boxopacity)) ? 1 : styleNum(st.boxopacity);
       const borderStyle = String(st.borderstyle || '');
-      const boxFill = [...hexOrNamedToRgb(st.boxcolor || 'white').slice(0, 3), Math.round(255 * boxOpacity)];
-      const boxLine = borderStyle === 'none' ? [0, 0, 0, 0]
+      const boxFill = [...hexOrNamedToRgb(isNoneColor(st.boxcolor) ? 'white' : st.boxcolor || 'white').slice(0, 3), isNoneColor(st.boxcolor) ? 0 : Math.round(255 * boxOpacity)];
+      const boxLine = borderStyle === 'none' || isNoneColor(styleLineColor(st.bordercolor)) ? [0, 0, 0, 0]
         : [...hexOrNamedToRgb(styleLineColor(st.bordercolor) || '#bbbbbb').slice(0, 3), Math.round(255 * (/^(solid|dotted|dashed)$/.test(borderStyle) ? 1 : 0.3))];
       const borderWidth = num(st.borderwidth) || 1;
       const lc = st.linecolor != null && st.linecolor !== '' ? styleLineColor(st.linecolor) : null;
@@ -14435,10 +16108,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       for (const ch of charts) {
         const L = ch.layout;
         let box = null;
-        if (boxShown) {
-          const title = titleShown ? this._itemTitle(ch.properties) : '';
-          box = flatChartBox(L.extent, { margin: num(st.boxmargin) || 2, titleFont, title: title ? title + (st.titleunits || '') : '',
-            bottomTitle: flatFlag(this.flags, 'BOTTOMTITLE'), alignRight: /right/.test(String(st.align || '')), measure });
+        if (boxSpec) {
+          const title = boxSpec.titleShown ? this._itemTitle(ch.properties) : '';
+          box = chartBoxLayout(L.extent, { unit: 1, margin: boxSpec.margin, titleText: title ? title + boxUnits : '',
+            titleFont: w => boxSpec.titleFontOf(1, w), bottomTitle: boxSpec.bottomTitle, alignRight: boxSpec.alignRight, measure });
         }
         const ext = box ? box.rect : L.extent;
         // align / offsetx / offsety (flatChartAlignOffset), the chart's
@@ -14447,9 +16120,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         if (box) {
           const r = box.rect;
           shape(ch, { base: [(r[0] + r[2]) / 2, r[3]], dir: 0, len: r[3] - r[1], w2: (r[2] - r[0]) / 2, sw: (r[2] - r[0]) / 2, band: 0, head: 0 },
-            boxFill, boxLine, borderWidth * 0.2 * box.width / 30, null, true);
-          if (box.title) titles.push({ position: ch.c, text: box.title.lines.join('\n'), font: box.title.font * unit, anchor: box.title.anchor,
-            off: [box.title.x * unit + ch.off[0], (box.title.baseline - 0.8 * box.title.font) * unit + ch.off[1]] });
+            boxFill, boxLine, borderWidth * 0.2 * box.w / 30, null, true);
+          // the title in px, rendered by the shared title layer
+          if (box.title) titles.push({ d: ch, title: { text: box.title.text, x: box.title.x * unit, anchor: box.title.anchor,
+            top: box.title.top * unit, f: box.title.f * unit } });
         }
         for (const b of L.bars) {
           const rgb = this.classRgb(b.cls);
@@ -14517,18 +16191,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           backgroundPadding: [0.3, 0, 0.4, 0.1].map(k => k * boxed.reduce((a, d) => a + d.font, 0) / boxed.length)
         })));
       }
-      if (titles.length) {
-        layers.push(new TextLayer({
-          id: `ix-bar-titles-${this.name}`, data: titles, pickable: false,
-          getPosition: d => d.position, getText: d => d.text, getSize: d => d.font,
-          sizeUnits: 'pixels', fontFamily: 'arial', characterSet: 'auto', lineHeight: 1,
-          getColor: [...hexOrNamedToRgb(st.textcolor || '#888888').slice(0, 3), 255],
-          fontSettings: { sdf: true }, outlineWidth: 1 / 7, outlineColor: [255, 255, 255, 128],
-          getTextAnchor: d => d.anchor, getAlignmentBaseline: 'top',
-          getPixelOffset: d => d.off,
-          parameters: ICON_LAYER_GLOBE_PARAMETERS
-        }));
-      }
+      if (titles.length) layers.push(...this._boxTitleLayers(titles, {
+        box: false, unit, liveZoom, positionOf: b => b.d.c, offsetOf: b => b.d.off,
+        ids: { titles: `ix-bar-titles-${this.name}` }
+      }).titles);
       return layers;
     }
 
@@ -14715,22 +16381,28 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         return [(lng + 180) / 360 * world, (0.5 - Math.log((1 + s) / (1 - s)) / (4 * Math.PI)) * world];
       };
       const mercToLngLat = ([x, y]) => [x / world * 360 - 180, (2 * Math.atan(Math.exp((0.5 - y / world) * 2 * Math.PI)) - Math.PI / 2) * 180 / Math.PI];
-      // the curves are computed in the plane of flat's map (Equal Earth), at the screen
-      // size of this map's degree of longitude on the equator, then mapped back: the
-      // flow bows around the pole as on flat. Mercator's plane stays the default.
-      // On the globe (flat's orthographic map) the plane is the one of the view center,
-      // for the flows whose two ends face the viewer; the others keep Mercator's.
+      // the curves are computed in the plane the map is DISPLAYED in: Web
+      // Mercator under MapLibre's mercator projection; on the globe (flat's
+      // orthographic map) the orthographic plane of the view center, for
+      // the flows whose two ends face the viewer (the others keep
+      // Mercator's). flat's own Equal Earth / Winkel plane (e1cb264) is NOT
+      // used: this engine displays those maps in Web Mercator too (a flat
+      // SVG map in another projection is reported "not available — mercator
+      // used"), and a curve bowed in the Equal Earth plane swings far
+      // toward the pole once Mercator renders it — measured on
+      // mechanical_goods_flows.html: Japan→USA at 82°N, its bow almost half
+      // the chord, where the Mercator curve stays at 63°N — the "deviated
+      // near the north pole" vectors. Flat bows its curves in the plane of
+      // ITS map; here the plane of the display.
       const planeFns = (proj, k) => ({
         toPx: ([lng, lat]) => { const q = proj.project(lat, lng); return [q[0] * k, -q[1] * k]; },
         toLngLat: ([x, y]) => { const q = proj.invert(x / k, -y / k); return [q[1], q[0]]; }
       });
       const mercFns = { toPx: mercToPx, toLngLat: mercToLngLat };
-      const fixedPlane = flatPlaneProjectionByOptions.get(this.mapOptions);
-      const fixedFns = fixedPlane && fixedPlane.invert ? planeFns(fixedPlane, (world / 360) / fixedPlane.project(0, 1)[0]) : null;
       const planeCenter = flatViewCenterByOptions.get(this.mapOptions) || globeCenter;
-      const ortho = !fixedFns && globeCenter ? orthographicPlane(planeCenter.lat, planeCenter.lng) : null;
+      const ortho = globeCenter ? orthographicPlane(planeCenter.lat, planeCenter.lng) : null;
       const orthoFns = ortho ? planeFns(ortho, world / (2 * Math.PI)) : null;
-      const fnsOf = it => (fixedFns || (orthoFns && ortho.inFront(it.p1) && ortho.inFront(it.p2) ? orthoFns : mercFns));
+      const fnsOf = it => (orthoFns && ortho.inFront(it.p1) && ortho.inFront(it.p2) ? orthoFns : mercFns);
       const inBox = c => c && c[0] >= bbox[0] && c[0] <= bbox[2] && c[1] >= bbox[1] && c[1] <= bbox[3];
 
       const sizePow = resolveSizePow(st, this.flags);
@@ -14829,7 +16501,6 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // — every size equal — SVG ignores: the opacity stays)
           if (dop || dopMin) { const d = dopacity(it); if (isFinite(d)) { lineAlpha = d; headAlpha = d; } }
           if (gradient) stops = fadeGradientStops(pts, lay.vx, lay.vy, fade);
-          if (dash) dashArr = [50 * oz, 5 * oz + sw];
           pts = pts.map(p => [p[0] + a[0], p[1] + a[1]]);
           end = [end[0] + a[0], end[1] + a[1]];
         } else {
@@ -14843,7 +16514,25 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           headS = 4; refX = 4; refY = 2;
           lineAlpha = fo || 0.3;
           headAlpha = Math.min(1, (fo || 0.3) * 2);
-          if (dash) dashArr = [50 * oz, 15 * oz];
+        }
+        if (dash) {
+          // flat's dash pattern: one long dash (50 px at the object scale)
+          // and a small gap, its phase walking toward the target — a flow
+          // of any length gets its own count of dashes that way: long ones
+          // many, short ones none at all (a solid line). style.dashcount
+          // instead divides the flow into that many dash+gap periods:
+          // every flow, long or short, shows the same pattern and moves at
+          // the same relative speed (one full dash cycle every 2s), the
+          // arrows as on the region-migration page
+          const nDashes = Math.round(styleNum(st.dashcount) || 0);
+          if (nDashes >= 1) {
+            let flowPx = 0;
+            for (let i = 1; i < pts.length; i++) flowPx += Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]);
+            const period = flowPx / nDashes;
+            dashArr = [period * 0.85, period * 0.15];
+          } else {
+            dashArr = bezier ? [50 * oz, 5 * oz + sw] : [50 * oz, 15 * oz];
+          }
         }
         // a line under a pixel: one pixel at its width as opacity
         const drawW = Math.max(1, sw);
@@ -14869,7 +16558,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         let run = [], runColors = [];
         const flush = () => {
           if (run.length > 1) {
-            const dash = dashArr ? [dashArr[0] / drawW, dashArr[1] / drawW] : [0, 0];
+            // the flow triple: [dash, gap] in px (the shader's path
+            // distance unit) + flat's random per-arc dashoffset phase
+            // (maptheme.js 18249), fixed per arc: the layers are rebuilt on
+            // every pan/zoom, a new random phase each time made dashes jump
+            const dash = dashArr ? [dashArr[0], dashArr[1], flowDashPhase(p1, p2)] : [0, 0, 0];
             if (globeCenter && !dashArr) {
               // on the globe deck.gl draws only the first three quarters of a path that has a
               // color per vertex (also an equal one): one color per path, a gradient as one
@@ -14904,12 +16597,22 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             fill: [...rgb.slice(0, 3), Math.round(255 * Math.min(1, headAlpha) * groupAlpha)] });
         }
       }
-      const layers = [new PathLayer({
+      // always FlowPathLayer: without dash offsets its flow hook no-ops
+      // (solid lines), with them the pattern walks toward the target
+      // (see makeFlowPathLayer). The dash triple is px; deck's path
+      // shader measures along-path positions in HALF-STROKE-WIDTH
+      // units (see makeFlowPathLayer), so the accessors convert:
+      // getDashArray carries the pattern period (its gap stays 0 — the
+      // extension renders solid, the moving gap is the flow hook),
+      // getFlowPhase the solid length and flat's random per-arc phase
+      const layers = [new FlowPathLayer({
         id: `ix-vector-${this.name}`, data: paths, pickable: true,
         getPath: d => d.path, getColor: d => d.colors, getWidth: d => d.width,
+        getDashArray: d => [(d.dash[0] + d.dash[1]) * 2 / Math.max(d.width, 1), 0],
+        getFlowPhase: d => [d.dash[0] * 2 / Math.max(d.width, 1), d.dash[2]],
         widthUnits: 'pixels', capRounded: dash && bezier, jointRounded: false, billboard: false,
-        parameters: ICON_LAYER_GLOBE_PARAMETERS,
-        ...(dash ? { getDashArray: d => d.dash, extensions: [new PathStyleExtension({ dash: true })] } : {})
+        extensions: [new PathStyleExtension({ dash: true, dashMode: 'path' })],
+        parameters: ICON_LAYER_GLOBE_PARAMETERS
       })];
       if (heads.length) {
         // the head count in the id: deck kept a same-id polygon layer's
@@ -15009,7 +16712,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const v = raw && raw[this.style.labelfield];
         let text = v == null || v === '' ? '' : String(v);
         if (!text) return null;
-        const num = parseFloat(text.replace(',', '.'));
+        // flat reads it with __scanValue: "1.234,5", "12 500"
+        const num = flatScanValue(text);
         text = (!isNaN(num) ? flatGroupedValue(num, dec != null ? dec : 2, noBreaks) : text) + units;
         const width = Math.max(titleTextWidth(text, f), (text.length + 2) * f * 0.5);
         const x = width / 3, y = f / 3 + r + 5 * unitPx;
@@ -15181,6 +16885,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // the box is sized by the value's own text, not the valuefield's
       const boxStyle = Object.assign({}, this.style, { valuefield: undefined });
       const boxes = [], texts = [];
+      // the label's drawn extent for the chart-group BOX (below): x from -r
+      // to 1.05r, y from -0.83f to 0.77f around the chart origin
+      const labelExtent = new Map();
       for (const d of combined) {
         const r = radiusOf(d);
         if (!(r > 0)) continue;
@@ -15195,6 +16902,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const o = alignOf(d);
         // the box's center relative to the chart's: x from −r to 1.05r, y from −0.83f to 0.77f
         boxes.push({ ...d, icon, pixelOffset: [o[0] + 0.025 * r, o[1] - 0.03 * f] });
+        labelExtent.set(d, [-r, -0.83 * f, 1.05 * r, 0.77 * f]);
         if (showValues) {
           const text = textOf(props);
           const fontSize = Math.min(r * 0.8, r * 3.3 / Math.max(1, text.length)) * valueScale;
@@ -15202,7 +16910,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           if (fontSize > 0) texts.push({ ...d, text, fontSize, color, pixelOffset: o });
         }
       }
-      const layers = [];
+      // BOX / TITLE: flat's chart-group box around the label chart
+      const boxRows = this._boxRows(() => combined.filter(d => labelExtent.has(d)), { unit, liveZoom, extentOf: d => labelExtent.get(d) });
+      const boxLayers = boxRows ? this._boxTitleLayers(boxRows, {
+        unit, liveZoom, positionOf: b => b.d.geometry.coordinates, offsetOf: b => alignOf(b.d),
+        ids: { circle: `ix-label-box-${this.name}`, icon: `ix-label-box-${this.name}`, polygons: `ix-label-box-polygons-${this.name}`, titles: `ix-label-titles-${this.name}` }
+      }) : null;
+      const layers = boxLayers ? [...boxLayers.box] : [];
       if (boxes.length) {
         layers.push(new IconLayer({
           id: `ix-bubbles-${this.name}-g${this._iconGeneration}`,
@@ -15236,6 +16950,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           parameters: ICON_LAYER_GLOBE_PARAMETERS
         }));
       }
+      if (boxLayers) layers.push(...boxLayers.titles);
       return layers;
     }
 
@@ -15295,8 +17010,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         ctx.lineTo(cx + r, cy - r * 0.6);
         ctx.lineTo(cx, cy + r);
         break;
+      // flat's per-part SYMBOL roundrect (maptheme.js 22039): side 2r, like
+      // 'squarefull'; the other branch (21639) is 1.6r
+      case 'roundrectfull':
       case 'roundrect': {
-        const s = r * 0.8;
+        const s = shape === 'roundrectfull' ? r : r * 0.8;
         if (ctx.roundRect) ctx.roundRect(cx - s, cy - s, s * 2, s * 2, r * 0.3);
         else ctx.rect(cx - s, cy - s, s * 2, s * 2);
         break;
@@ -15365,6 +17083,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   function withAlpha(rgb, a) {
     return a >= 1 ? rgb.slice(0, 3) : [...rgb.slice(0, 3), Math.round(255 * Math.max(0, a))];
   }
+  // a style color of "none": no paint (flat writes it into the SVG style:
+  // fill:none / stroke:none) — neither a color nor a canvas fillStyle
+  function isNoneColor(v) {
+    return typeof v === 'string' && v.trim().toLowerCase() === 'none';
+  }
   function hexOrNamedToRgb(v) {
     const NAMED = { gray: [128, 128, 128], grey: [128, 128, 128], black: [0, 0, 0], white: [255, 255, 255] };
     return parseCssColor(v) || NAMED[v] || [130, 130, 130];
@@ -15481,21 +17204,34 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // last built map; called while the map is still building, they run once
   // it is ready.
   const MAP_HANDLE_METHODS = ['replace', 'add', 'newTheme', 'remove', 'removeTheme', 'replaceTheme', 'changeThemeStyle', 'setThemeStyle',
-    'refreshTheme', 'setBasemapOpacity', 'setMapType', 'setMapTypeId', 'mapType', 'setProjection', 'resize', 'view', 'options', 'layer', 'loadProject', 'require', 'setThemeVisible', 'setThemeTimeFrame', 'attribution'];
+    'refreshTheme', 'setBasemapOpacity', 'setMapType', 'setMapTypeId', 'mapType', 'setProjection', 'resize', 'view', 'options', 'layer', 'loadProject', 'require', 'setThemeVisible', 'switchLayer', 'setThemeTimeFrame', 'attribution'];
   const _mapHandles = Object.create(null);
   function makeMapHandle(szMap) {
     const h = {};
-    const api = () => (szMap && _mapApis[szMap]) || _lastMapApi;
+    // a name a Map() declared waits for that map; any other name (or none)
+    // is the last built map, as before
+    const declared = () => szMap && _namedMapReady[szMap];
+    const api = () => (szMap && _mapApis[szMap]) || (declared() ? null : _lastMapApi);
     for (const m of MAP_HANDLE_METHODS) {
       h[m] = (...args) => {
         const a = api();
         if (a) { const r = a[m](...args); return r === a ? h : r; }
-        _mapReady.then(ready => ready[m](...args));
+        (declared() ? declared().promise : _mapReady).then(ready => ready[m](...args))
+          .catch(err => console.error(`[ixmaps-gl] map(${szMap ? '"' + szMap + '"' : ''}).${m}:`, err));
         return h;
       };
     }
     h.getZoom = () => { const a = api(); return a ? a.getZoom() : undefined; };
     h.getThemeObj = id => getThemeObj(id);
+    // flat's mapApi.message(szText) (htmlgui_flat.js 1381): a short status
+    // line over the map — the same accepted no-op as the global
+    // ixmaps.message ("flat shows a short status message on the map;
+    // not ported"), here for a page's own map().message('...') calls
+    h.message = () => h;
+    // flat's mapApi.getProjectString() (htmlgui_flat.js 1375): the
+    // project JSON of the map — the global's, of the last built map (a
+    // page's code-view overlay calls it through the handle, WBGT port)
+    h.getProjectString = () => getProjectString();
     // flat's mapApi.theme(szTheme) (htmlgui_flat.js 1571): the theme handle
     h.theme = szTheme => new themeApi(szMap, szTheme);
     // flat's mapApi aliases (htmlgui_flat.js 1286+): show/hide a theme,
@@ -15946,9 +17682,14 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // their own comments) are still real, directly-callable globals a
       // page's OWN custom UI can use too — only THIS generated markup
       // happens to reach them via delegation instead of inline HTML.
+      // the handlers below outlive this call: they read the theme id of
+      // the LATEST call into this container (a theme switch re-renders
+      // the same div for another theme)
+      container._ixFacetsId = szId;
       if (!container.dataset.ixFacetsWired) {
         container.dataset.ixFacetsWired = '1';
         container.addEventListener('click', e => {
+          const szId = container._ixFacetsId;
           const moreBtn = e.target.closest('[data-role="more"]');
           if (moreBtn) { moreBtn.hidden = true; moreBtn.nextElementSibling.hidden = false; return; }
 
@@ -15974,7 +17715,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         container.addEventListener('keyup', e => {
           if (e.key !== 'Enter') return;
           const input = e.target.closest('[data-role="search"]');
-          if (input) global.__setFilter(szId, input.closest('[data-field]').dataset.field, input.value);
+          if (input) global.__setFilter(container._ixFacetsId, input.closest('[data-field]').dataset.field, input.value);
         });
       }
     }
@@ -16157,6 +17898,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     newTheme: (title, theme, flag) => _mapHandle.newTheme(title, theme, flag),
     // flat's time slider: show the records of a theme (null = all themes) whose timefield lies in [min, max)
     setThemeTimeFrame: (szId, nMin, nMax) => _mapHandle.setThemeTimeFrame(szId, nMin, nMax),
+    // flat's ixmaps.switchLayer(szLayerName, fState) (htmlgui.js 3383): every
+    // theme of the named layer on the last built map shown or hidden
+    switchLayer: (szLayerName, fState) => _mapHandle.switchLayer(szLayerName, fState),
     setBasemapOpacity: compatSetBasemapOpacity,
     // this engine's version (flat's own ixmaps.version numbers flat)
     glVersion: IXMAPS_GL_VERSION,
@@ -16181,19 +17925,19 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // test-only: lets test/unit/*.test.mjs call pure internals directly (the
   // engine runs in a Node vm there); deliberately NOT on the ixmaps object
   global.__ixmapsGlInternals = {
-    IXMAPS_GL_VERSION, applyFlatMaxCharts, youtubeClickToPlay, symbolsFlagCompat, tooltipTable, legendRowLabels, scaleDenom, cssColorAlpha, aggregatedCategoricalClass, dominantDopacityAlpha, isAggregatedCategoricalChoropleth, computeBubblePackLayout, isolatedBubblePackLayout, sequenceLayout, ringsLayout, pieSliceLayout, pieValueLabelLayout, isBarChart, flatBarLayout, flatChartBox, flatValueRules, flatPieRecord, flatPieAccumulate, flatPieItemValues, flatVectorItems, orthographicPlane, vectorArcHeight, pathBackIndex, greatCircleMeters, cameraOptions, bezierVectorLayout, cubicBezierPoints, arrowMarkerTriangle, fadeGradientStops, flatToArray, hashUnit, multiQuadOffsets, pixelOffsetLngLat, chartTextTransmittance, insideSymbolShape,
-    normalizeTheme, projectThemeToDefinition, withoutProjectCode, groupRecordCount, resolveBasemapStyleUrl, resolveMapTypeColor, LayerBuilder, LayerRuntime, MapBuilder, typeStyleNumbers, styleNum,
+    IXMAPS_GL_VERSION, applyFlatMaxCharts, youtubeClickToPlay, symbolsFlagCompat, tooltipTable, legendRowLabels, scaleDenom, cssColorAlpha, aggregatedCategoricalClass, dominantDopacityAlpha, isAggregatedCategoricalChoropleth, computeBubblePackLayout, isolatedBubblePackLayout, sequenceLayout, ringsLayout, pieSliceLayout, pieValueLabelLayout, isBarChart, flatBarLayout, flatValueRules, flatPieRecord, flatPieAccumulate, flatPieItemValues, flatVectorItems, orthographicPlane, vectorArcHeight, pathBackIndex, greatCircleMeters, cameraOptions, bezierVectorLayout, cubicBezierPoints, arrowMarkerTriangle, fadeGradientStops, flatToArray, hashUnit, flowDashPhase, multiQuadOffsets, pixelOffsetLngLat, chartTextTransmittance, insideSymbolShape,
+    chartBoxLayout, choroplethOutlineColor, normalizeTheme, projectThemeToDefinition, withoutProjectCode, groupRecordCount, resolveBasemapStyleUrl, resolveMapTypeColor, LayerBuilder, LayerRuntime, MapBuilder, typeStyleNumbers, styleNum,
     resolveScriptUrl, isTrustedScriptUrl, loadProcessingScript, loadBrokerData, applyBrokerThemePatch, makeBrokerTheme,
     equalIntervalBreaks, quantileBreaks, naturalBreaks, evenStrideSample, jenksBreakValues, partsFromBreakValues, resolvePartsClass,
     computeAlphaStats, computeMultiFieldClasses, computeDominantStats, resolveDominantClass, computeComposeColorStats,
     resolveComposedColor, computeRangeClasses, colorSchemeClassCount, resolveDopacityAlpha,
     flatColorSweep, applyClassesToColorScheme, resolveClassColors, flatOutlierStats, parseCssColor, flatLegendLook,
     flatToMapLibreZoom, mapLibreToFlatZoom, flatViewToMapLibreZoom, mapLibreToFlatViewZoom, flatSvgProjectionOf, flatSvgProjectionByOptions, normalSizeScaleOf, scaleDenominatorAt, resolveZoomReference, resolveAggregationPx, valuesHiddenByScale,
-    fetchLayerData, parseCsvText, dataTableRows, geometryRowsToFeatureCollection, filterFlatValues, applyField100, field100Binding, rangeClassLegendTotals, resolveAggregateValue, classValueSeparate, cellAggregatedValues, oneHot, groupCoLocated, aggregateOnGrid, GridAggregateIndex, flatRangeParts, aggregateField100, valueRadius, itemPlotGeometry, itemAnchor, objectZoomFactor, resolveZoomReference, defaultNormalSizeValue,
-    applyWhereFilter, joinChartPositions, flatLookupKey, flatShapeCenter, chartHiddenByScale, glowHiddenByScale, isSymbolChart, flatChartAlignOffset, flatChartBranch, flatValueText, categoryValueRecord, flatDerivateRgb, flatBubbleLook, bubbleIconLook, flatChartTextRgb, flatGroupedValue, flatNoBreaks, featuresHiddenByScale, boxHiddenByScale, flatShadowOn, snapToAggregationGrid,
+    fetchLayerData, QUERY_HANDOFF, parseCsvText, dataTableRows, geometryRowsToFeatureCollection, filterFlatValues, applyField100, field100Binding, rangeClassLegendTotals, resolveAggregateValue, classValueSeparate, cellAggregatedValues, oneHot, groupCoLocated, aggregateOnGrid, GridAggregateIndex, flatRangeParts, explicitRangeBreaks, explicitRangeParts, resolvePartsClass, isNoneColor, aggregateField100, valueRadius, itemPlotGeometry, itemAnchor, objectZoomFactor, resolveZoomReference, defaultNormalSizeValue,
+    applyWhereFilter, joinChartPositions, joinChoroplethFeatures, flatLookupKey, flatShapeCenter, chartHiddenByScale, glowHiddenByScale, isSymbolChart, flatChartAlignOffset, flatChartBranch, flatValueText, categoryValueRecord, flatDerivateRgb, flatBubbleLook, bubbleIconLook, flatChartTextRgb, flatGroupedValue, flatNoBreaks, featuresHiddenByScale, boxHiddenByScale, flatShadowOn, snapToAggregationGrid,
     drawSymbolPath, normalizeSymbolShape,
     flatFormatValue, themeStyleArgs, flatChangedStyleValue, explicitValueDecimals, legendDecimals,
-    dataCacheKey, dataCacheDisabled, cachedLayerData, featuresBounds, wantsZoomToExtent, legendIsOn,
+    dataCacheKey, dataCacheDisabled, cachedLayerData, featuresBounds, wantsZoomToExtent, legendIsOn, applySphereBackdrop,
   };
   global.__setFilter = __setFilter;
   global.__removeFacets = __removeFacets;