ixmaps-gl 0.2.16 → 0.2.18

package/ixmaps-gl.js

@@ -82,7 +82,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.16';
+  const IXMAPS_GL_VERSION = '0.2.18';
 
   const LIB_URLS = {
     // Bumped 3.6.2 -> 5.x (2026-09-21, globe-projection compat fix): native
@@ -716,6 +716,9 @@
   // another theme's data: .data({name})). See loadNamedTheme in build().
   const _namedDataWaiters = new Map();   // name → Set of resolve(table)
   const _namedDataListeners = new Map(); // name → Set of fn(table)
+  // names whose next publications feed only the theme that asked for them
+  // (a FEATURE's dependent broker refresh, see featureDependents) → count
+  const _quietNamedData = new Map();
   function namedTable(name) {
     try { const t = global[name]; return t && typeof t === 'object' && typeof t.json === 'function' ? t : null; } catch (e) { return null; }
   }
@@ -744,6 +747,7 @@
     const waiters = _namedDataWaiters.get(name);
     if (waiters) [...waiters].forEach(resolve => resolve(table));
     const listeners = _namedDataListeners.get(name);
+    if (_quietNamedData.get(name)) return;
     // after the handing-over code finished (a broker's own theme first)
     if (listeners && listeners.size && table) setTimeout(() => [...listeners].forEach(fn => fn(table)), 0);
   }
@@ -1856,12 +1860,22 @@
     if (typeof colorscheme === 'string') {
       try {
         const fn = new Function('return (' + colorscheme + ')')();
-        const objTheme = { szLabelA: labels, colorScheme: new Array(labels.length) };
-        fn(objTheme);
-        return objTheme.colorScheme;
-      } catch (err) {
-        console.warn('[ixmaps-gl] colorscheme function failed to evaluate, using fallback palette:', err);
-      }
+        if (typeof fn === 'function') {
+          const objTheme = { szLabelA: labels, colorScheme: new Array(labels.length) };
+          fn(objTheme);
+          return objTheme.colorScheme;
+        }
+      } catch (err) { /* not code — a flat color-list string, below */ }
+      // GL-PORT COMPAT: flat's Themes.toArray (maptheme.js 999-1017) — a
+      // string colorscheme that isn't a colorscheme FUNCTION is a COLOR
+      // LIST: '|' separated, or ',' separated when there's no RGB() token
+      // (kept whole). A single "#dd0088" is ONE single-color class (the
+      // fire page's KDE isobands), not a broken function silently falling
+      // back to the default palette.
+      const list = (/\|/.test(colorscheme) || /rgb/i.test(colorscheme)) ? colorscheme.split('|') : colorscheme.split(',');
+      if (list.length === 1 && list[0].trim() === 'none') return null; // no fill, the array branch's ['none']
+      if (list.every(c => parseCssColor(c))) return labels.length ? labels.map((_, i) => list[i % list.length]) : list;
+      console.warn('[ixmaps-gl] colorscheme "' + colorscheme + '" is neither a colorscheme function nor a color list, using the fallback palette');
     }
     return labels.map((_, i) => FALLBACK_PALETTE[i % FALLBACK_PALETTE.length]);
   }
@@ -1914,6 +1928,11 @@
   // _prepareDominant) doing its own `.map(hexToRgb)` that would break on
   // the diverging sweep's own output.
   function resolveClassColors(colorscheme, labels, classes) {
+    // flat's colorscheme ["none"] is an explicit NO-FILL (a chart of
+    // unfilled symbols, only its values/boxes/titles drawn — the fire
+    // areas page's SIF chart): NO class colors, never the fallback
+    // palette, which would paint symbol circles flat never draws
+    if (Array.isArray(colorscheme) && colorscheme.length === 1 && colorscheme[0] === 'none') return null;
     const resolved = resolveColorScheme(colorscheme, labels, classes);
     return (resolved || labels.map((_, i) => FALLBACK_PALETTE[i % FALLBACK_PALETTE.length]))
       .map(c => Array.isArray(c) ? c : (parseCssColor(c) || [130, 130, 130]));
@@ -2431,7 +2450,10 @@
   // (flat stores most of these as given and lets arithmetic coerce them;
   // its runtime changeThemeStyle applies Number() — the same result for
   // every clean value.) A linewidth list is typed element by element.
-  const STYLE_NUMBER_KEYS = ['linewidth', 'fillopacity', 'scale', 'classes', 'valuedecimals', 'normalsizevalue',
+  // Not valuedecimals: flat's `nValueDecimals || default` depends on the raw
+  // type (a string "0" counts, a number 0 doesn't) — read it through
+  // explicitValueDecimals / legendDecimals.
+  const STYLE_NUMBER_KEYS = ['linewidth', 'fillopacity', 'scale', 'classes', 'normalsizevalue',
     'sizepow', 'rangescale', 'minvalue', 'maxvalue', 'markersize', 'boxopacity', 'outlierscale', 'valuescale',
     'brightness', 'fractionscale', 'dopacityscale', 'dopacitypow', 'gridwidthpx', 'textscale', 'rangecentervalue',
     'shadowblur', 'shadowdx', 'shadowdy', 'maxshadow', 'offsetx', 'offsety', 'gridx', 'boxmargin', 'borderwidth',
@@ -2457,6 +2479,44 @@
     return typeof v === 'number' ? v : NaN;
   }
 
+  // flat's changeThemeStyle arithmetic (maptheme.js doChangeThemeStyle,
+  // 4962-5334): these numeric keys go through __calcNewValue (4486) — flag
+  // "pow" current^v, "factor" current·v, "add"/"delta" current+v, else v.
+  // The value is the theme's current one, or flat's own fallback where its
+  // code has one (`mapTheme.nBrightness || 1`, …; fillopacity: 1 when the
+  // new value is < 1, else 0)
+  const FLAT_STYLE_CALC_KEYS = {
+    opacity: 0, fillopacity: null, blur: 0, dopacityscale: 0, dopacitypow: 0, brightness: 1, rangescale: 1,
+    normalsizevalue: 0, minvalue: 1, maxvalue: 1, valuescale: 0, linewidth: 0, markersize: 0, gapsize: 0,
+    offsetx: 0, offsety: 0, rotation: 0, minvaluesize: 0, minvaluevalue: 0, clipvaluesize: 0, minsize: 0,
+    minchartsize: 0, maxcharts: 0, sizepow: 0, outlierscale: 0, clipsize: 0, clipframerate: 1,
+    gridwidth: 1, gridmatrix: 1, gridwidthpx: 50, gridoffsetx: 0, gridoffsety: 0
+  };
+  // the new value of style[key] after flat's changeThemeStyle(…, "key:value",
+  // flag), or null when flat leaves the theme as it is. scale is a resize
+  // FACTOR there (__calcFactor, 4502: "factor" v, "add" (current+v)/current,
+  // else v/current; no pow/delta), multiplied into nScale by
+  // MapTheme.resize (26544) — a factor of 0 or NaN is falsy, so the
+  // Themes.execute loop (3326) skips the resize: scale:0 changes nothing.
+  // Other keys: the value string as given
+  function flatChangedStyleValue(key, current, value, flag) {
+    const f = String(flag || '');
+    const cur = Number(Array.isArray(current) ? current[0] : current);
+    const v = Number(value);
+    if (key === 'scale') {
+      const now = Number.isFinite(cur) && cur ? cur : 1;
+      const factor = /factor/.test(f) ? v : /add/.test(f) ? (now + v) / now : v / now;
+      return factor ? now * factor : null;
+    }
+    if (!(key in FLAT_STYLE_CALC_KEYS) || !/pow|factor|add|delta/.test(f)) return value;
+    const fallback = FLAT_STYLE_CALC_KEYS[key] == null ? (v < 1 ? 1 : 0) : FLAT_STYLE_CALC_KEYS[key];
+    const base = Number.isFinite(cur) && cur ? cur : fallback;
+    const n = Number.isFinite(v) ? v : 0;
+    if (/pow/.test(f)) return Math.pow(base, n);
+    if (/factor/.test(f)) return base * n;
+    return base + n;
+  }
+
   function normalizeTheme(def) {
     // real ixmaps-flat (htmlgui.js newTheme) merges .meta() INTO style first
     // — meta wins — and only then reads type, bindings and style properties
@@ -2589,6 +2649,16 @@
       return String(text).split(' ').map(w => (dict["'" + w + "'"] !== undefined ? String(dict["'" + w + "'"]) : w)).join(' ');
     };
   }
+  // make the map container the positioning context of what the engine
+  // mounts inside it (splash, pinned tooltip, legends) — only when it is
+  // unpositioned. The RENDERED position decides, never el.style (inline
+  // only): a page's #map_div { position:absolute; top:0; bottom:0 } from a
+  // stylesheet reads as "" there, and overwriting it with relative drops
+  // the top/bottom stretch — the div's height collapses to 0, a blank map
+  // (accidents_app.html from 0.2.15 on)
+  function anchorInside(el) {
+    if (el && getComputedStyle(el).position === 'static') el.style.position = 'relative';
+  }
   function showSplash(el, text) {
     ensureSplashStyle();
     // Checks the actual RENDERED position, not el.style (the inline
@@ -2602,7 +2672,7 @@
     // height silently collapsed to 0 — invisible map, invisible splash,
     // both zero-height. Only truly static (unpositioned) elements need
     // this at all.
-    if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
+    anchorInside(el);
     const splash = document.createElement('div');
     splash.className = 'ixmaps-splash';
     splash.innerHTML = '<div class="ixmaps-splash-mark"><span class="ixmaps-splash-ping"></span><span class="ixmaps-splash-dot"></span></div>' +
@@ -3144,7 +3214,7 @@
       // relative pixels, and styling the page's own body (relative) breaks
       // any page element absolutely positioned against it (AirBnB's
       // #onmap-buttons on a zero-height all-float body flew off-screen)
-      el.style.position = el.style.position || 'relative';
+      anchorInside(el);
       el.appendChild(pinnedTooltipEl);
     }
     return { getTooltip, onClick, mount };
@@ -3341,7 +3411,7 @@
         // panel's max-height resolves against the MAP's height — the stack's
         // former parent anchor collapsed it to 0 on pages whose body has
         // only floated children (height 0)
-        el.style.position = el.style.position || 'relative';
+        anchorInside(el);
         el.appendChild(legendStack);
         return legendStack;
       };
@@ -3387,7 +3457,7 @@
         rt._triggerRedraw = () => { refresh(); };
         if (subThemeCapable(rt)) rt._onMarksChanged = () => updateSubTheme(rt);
         if (!legendOn || !el.parentElement || !legendApplies(rt)) return;
-        el.style.position = el.style.position || 'relative';
+        anchorInside(el);
         {
         // .type("...|NOLEGEND") — the fourth real legend-related type()
         // token: opts a theme OUT of the legend entirely (real engine's
@@ -3412,28 +3482,36 @@
           // sync — no separate light/dark branch anywhere else.
           // flat's look (flatLegendLook) unless the page picks one with
           // this engine's own legendtheme
-          const opacityOpt = parseFloat(builder._engineOptions.basemapopacity);
-          const legendBackground = builder.mapOptions.legendBackground || builder.mapOptions.legendbackground;
-          const flatLook = flatLegendLook(builder.mapOptions.mapType, isNaN(opacityOpt) ? 1 : opacityOpt, legendBackground);
-          // effective darkness (style background vs page background, see
-          // effectiveMapDark): a dark basemap faded to <= 0.5 over a DARK
-          // page still reads dark — flatLegendLook's name heuristic would
-          // wrongly switch the panel (and the tooltip) to light there
-          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 legendColors = 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)',
-                selectBg: 'rgba(0,0,0,0.04)', selectBorder: 'rgba(0,0,0,0.2)' }
-            : { bg: 'rgba(28,30,34,0.92)', fg: '#eee', shadow: '0 2px 10px rgba(0,0,0,0.45)',
-                rowMarked: 'rgba(255,255,255,0.14)', track: 'rgba(255,255,255,0.08)',
-                selectBg: 'rgba(255,255,255,0.08)', selectBorder: 'rgba(255,255,255,0.25)' };
-          // 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) legendColors.bg = looksDark ? '#111' : flatLook.bg;
+          // The look is decided again once the basemap style exists (see
+          // rt._relookLegend below): a panel built before the style loads
+          // can only get effectiveMapDark's name-heuristic fallback, which
+          // reads a dark basemap faded to <= 0.5 as light.
+          const lookColors = () => {
+            const opacityOpt = parseFloat(builder._engineOptions.basemapopacity);
+            const legendBackground = builder.mapOptions.legendBackground || builder.mapOptions.legendbackground;
+            const flatLook = flatLegendLook(builder.mapOptions.mapType, isNaN(opacityOpt) ? 1 : opacityOpt, legendBackground);
+            // effective darkness (style background vs page background, see
+            // effectiveMapDark): a dark basemap faded to <= 0.5 over a DARK
+            // page still reads dark — flatLegendLook's name heuristic would
+            // wrongly switch the panel (and the tooltip) to light there
+            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 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)',
+                  selectBg: 'rgba(0,0,0,0.04)', selectBorder: 'rgba(0,0,0,0.2)' }
+              : { bg: 'rgba(28,30,34,0.92)', fg: '#eee', shadow: '0 2px 10px rgba(0,0,0,0.45)',
+                  rowMarked: 'rgba(255,255,255,0.14)', track: 'rgba(255,255,255,0.08)',
+                  selectBg: 'rgba(255,255,255,0.08)', selectBorder: 'rgba(255,255,255,0.25)' };
+            // 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;
+            return colors;
+          };
+          const legendColors = lookColors();
           // max-height:66.6% resolves against el's own height (the map
           // container, which always has a definite height for the map
           // itself to render into) since this panel sits in the stack,
@@ -3472,6 +3550,17 @@
           // themselves authored with their own leading space (e.g.
           // " MW") in real pages.
           const legendUnit = rt.style.legendunits || rt.style.units || '';
+          // 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._multiFields && rt._isMultiFieldSequence();
+          const legendTotalText = v => (multiFieldLegend
+            ? 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];
+          const legendFill = i => (multiFieldLegend && rt._partNoFill && rt._partNoFill.has(i)
+            ? `transparent;box-shadow:inset 0 0 0 1px rgb(${outlineRgb.join(',')})` : null);
           // row labels go into innerHTML: the page's own .style({label})
           // stays HTML, as in flat; categories read from the data are
           // escaped (a value could carry markup)
@@ -3513,6 +3602,22 @@
             const globeCenter = proj.type === 'globe' ? map.getCenter() : null;
             totals = new Array(rt.categoryLabels.length).fill(0);
             if (rt._rangeClassed) { totals = rangeClassLegendTotals(rt, bbox, globeCenter); maxTotal = Math.max(0, ...totals); order = totals.map((v, i) => i).sort((a, b) => totals[b] - totals[a]); return; }
+            // a per-item chart over several value fields: a row per field,
+            // the field's sum over the visible items (flat's NYC status
+            // legend: bikes / empty docks / e-bikes, biggest sum first)
+            if (rt._multiFields && rt._isMultiFieldSequence()) {
+              (rt._activeFeatures || rt.features).forEach(f => {
+                const c = f.geometry && f.geometry.coordinates;
+                if (!c || typeof c[0] !== 'number') return;
+                const [lng, lat] = c;
+                if (lng < bbox[0] || lng > bbox[2] || lat < bbox[1] || lat > bbox[3]) return;
+                if (globeCenter && !isOnVisibleHemisphere(lng, lat, globeCenter)) return;
+                rt._multiFields.forEach((k, i) => { totals[i] += parseFloat(f.properties[k]) || 0; });
+              });
+              maxTotal = Math.max(0, ...totals);
+              order = totals.map((v, i) => i).sort((a, b) => totals[b] - totals[a]);
+              return;
+            }
             // _activeFeatures (set by setFacetFilter/clearFacetFilter,
             // e.g. the country-select dropdown below) is the facet-
             // filtered subset when a filter is active, null otherwise —
@@ -3645,7 +3750,7 @@
               for (let line = 0; line < nLines; line++) {
                 for (let c = 0; c < n; c++) {
                   const ix = flatFlag(rt.flags, 'INVERT') ? n - c - 1 : c;
-                  const rgb = rt.categoryColorsRgb[ix];
+                  const rgb = rt.categoryColorsRgb[ix] || [128, 128, 128]; // colorscheme "none": no class colors
                   const part = rt.partsA[ix];
                   const title = part ? flatFormatValue(part.min, dec, '') + unit + ' ... ' + flatFormatValue(part.max, dec, '') + unit : '';
                   const marked = rt._markedClasses.has(ix);
@@ -3676,8 +3781,8 @@
             // flat drops the rows without a count once any row has one
             // (legend.js 754-760, 787-789: fCountBars && !count)
             rowsEl.innerHTML = order.filter(i => !(maxTotal > 0) || totals[i]).map(i => {
-              const rgb = rt.categoryColorsRgb[i];
-              const color = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
+              const rgb = rt.categoryColorsRgb[i] || [128, 128, 128]; // colorscheme "none": no class colors
+              const color = legendFill(i) || `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
               const marked = rt._markedClasses.has(i);
               const dimmed = rt._markedClasses.size > 0 && !marked;
               const rowStyle = 'padding:4px 3px;border-radius:4px;cursor:pointer;opacity:' + (dimmed ? 0.4 : 1) + ';'
@@ -3704,7 +3809,7 @@
                   + '<div style="display:flex;align-items:center;gap:6px;">'
                   + '<span style="flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:' + color + ';"></span>'
                   + '<span style="flex:0 0 auto;width:' + barPx + 'px;height:6px;background:' + color + ';border-radius:3px;"></span>'
-                  + '<span style="flex:0 0 auto;white-space:nowrap;">' + rt._formatTooltipValue(totals[i]) + legendUnit + '</span>'
+                  + '<span style="flex:0 0 auto;white-space:nowrap;">' + legendTotalText(totals[i]) + legendUnit + '</span>'
                   + '</div>'
                   + '</div>';
               }
@@ -3715,7 +3820,7 @@
                 + '<span style="flex:1 1 auto;min-width:0;height:6px;background:' + legendColors.track + ';border-radius:3px;overflow:hidden;">'
                 + '<span style="display:block;height:100%;width:' + pct + '%;background:' + color + ';border-radius:3px;"></span>'
                 + '</span>'
-                + '<span style="flex:0 0 auto;text-align:right;min-width:60px;">' + rt._formatTooltipValue(totals[i]) + legendUnit + '</span>'
+                + '<span style="flex:0 0 auto;text-align:right;min-width:60px;">' + legendTotalText(totals[i]) + legendUnit + '</span>'
                 + '</div>'
                 + '</div>';
             }).join('');
@@ -3827,6 +3932,7 @@
           // sharing the same data source and calls refresh()), so this
           // is UI wiring only, no new filtering logic.
           const filterField = rt.style.legendfilter;
+          let filterSelect = null;
           if (filterField) {
             const facet = engineApi.getFacets(rt.name, [filterField], { bbox: [-180, -85, 180, 85] })[0];
             const values = (facet && facet.type === 'textual')
@@ -3842,8 +3948,27 @@
               else engineApi.clearFacetFilter(rt.name, filterField);
             });
             bodyEl.appendChild(filterEl);
+            filterSelect = filterEl;
           }
 
+          // re-apply the look in place once the basemap style is known
+          // (createLegend's 'style.load' listener) — restyled, not rebuilt,
+          // so the filter choice, slider and folding survive
+          rt._relookLegend = () => {
+            const c = lookColors();
+            if (c.bg === legendColors.bg && c.fg === legendColors.fg) return;
+            Object.assign(legendColors, c);
+            panel.style.background = c.bg;
+            panel.style.color = c.fg;
+            if (filterSelect) {
+              filterSelect.style.background = c.selectBg;
+              filterSelect.style.color = c.fg;
+              filterSelect.style.borderColor = c.selectBorder;
+            }
+            if (stack) stack.style.boxShadow = c.shadow;
+            if (!isTextOnly) renderRows();
+          };
+
           if (!isTextOnly) { bodyEl.appendChild(rowsScroll); renderRows(); }
 
           if (rt.meta.description) {
@@ -3900,6 +4025,9 @@
         }
       };
       runtimes.forEach(rt => addLegendPanel(rt));
+      // every style (the initial one, setProjectJSON swaps) can change the
+      // effective darkness the panels were built with
+      map.on('style.load', () => runtimes.forEach(rt => { if (rt._legendPanel && rt._relookLegend) rt._relookLegend(); }));
     }
     return { addLegendPanel, setLegendOption, updateSubTheme, layoutLegends };
   }
@@ -4296,7 +4424,7 @@
         legendEl.innerHTML = this._legendHtml;
         // inside the map container, never the page's body (see the pinned
         // tooltip mount) — styling body breaks page-positioned elements
-        el.style.position = el.style.position || 'relative';
+        anchorInside(el);
         el.appendChild(legendEl);
       }
 
@@ -4436,6 +4564,33 @@
           return engineApi;
         },
         replaceTheme: (id, layerBuilder, flag) => engineApi.replace(id, layerBuilder, flag),
+        // flat's newTheme(title, theme, flag) (htmlgui.js 1540-1570, the
+        // handle's newTheme forwards to it): with "replace" the theme of the
+        // same id goes first, "clearcharts" every CHART theme, "clear" /
+        // "clearall" every theme — LOCKED themes stay (flat's
+        // Themes.removeAll, maptheme.js 3047-3050: the fuel-price page's
+        // nuts2 base) — then the theme is added; "force" removes nothing
+        newTheme: (title, layerBuilder, flag) => {
+          layerBuilder = unwrapLayer(layerBuilder);
+          const f = String(flag || '');
+          _chainedLayers = _chainedLayers.then(() => {
+            if (!/force/i.test(f)) {
+              if (/replace/i.test(f)) {
+                const def = layerBuilder.definition();
+                const id = (def.style && def.style.name) || (def.meta && def.meta.name);
+                if (id) removeThemeById(id);
+              } else if (/clearcharts|clear|clearall/i.test(f)) {
+                const charts = /clearcharts/i.test(f);
+                const doomed = runtimes.filter(rt => !flatFlag(rt.flags, 'LOCKED') && (!charts || rt.flags.has('CHART')));
+                const byName = new Map();
+                doomed.forEach(rt => { if (!byName.has(rt.name)) byName.set(rt.name, []); byName.get(rt.name).push(rt); });
+                byName.forEach((list, name) => removeRuntimes(name, list));
+              }
+            }
+            return engineApi.defineLayer(layerBuilder);
+          }).catch(err => console.error('[ixmaps-gl] map.newTheme():', err));
+          return engineApi;
+        },
         remove: (id) => { removeThemeById(id); return engineApi; },
         // flat's map.setMapType(id) / setMapTypeId / mapType (htmlgui_flat.js
         // mapApi): swap the basemap at runtime. MapLibre's setStyle replaces
@@ -4557,23 +4712,40 @@
         // "filter:WHERE ..." value reuses rt.setRuntimeFilter, the SAME
         // applyWhereFilter grammar the layer's own load-time .filter()
         // already parses — just invoked again at runtime.
+        //
+        // themeId null: every theme but the FEATURE ones (flat's
+        // Themes.changeThemeStyle, maptheme.js 4464: `szFlag.match(/FEATURE/)`
+        // skipped), one redraw for all. Numeric keys follow flat's
+        // "factor"/"add"/"pow" flags and scale its resize factor
+        // (flatChangedStyleValue) — the scale slider's
+        // changeThemeStyle(null, null, 'scale:' + v, 'set').
         changeThemeStyle: (themeId, styleKeyValue, action) => {
-          const rt = findRuntime(themeId);
-          if (!rt) return;
+          const targets = themeId == null
+            ? runtimes.filter(r => ![...r.flags].some(f => /FEATURE/.test(f)))
+            : [findRuntime(themeId)].filter(Boolean);
+          if (!targets.length) return;
           const colonIdx = String(styleKeyValue).indexOf(':');
           const key = colonIdx === -1 ? String(styleKeyValue) : styleKeyValue.slice(0, colonIdx);
           const value = colonIdx === -1 ? '' : styleKeyValue.slice(colonIdx + 1);
-          if (validation) validation.style(themeId, { [key]: value });
-          if (key === 'filter') {
-            rt.setRuntimeFilter(action === 'remove' ? '' : value);
-            refresh();
-          } else if (key === 'type') {
+          if (key === 'type') {
             console.warn(`[ixmaps-gl] changeThemeStyle: changing the type ("${value}") is not supported`);
-          } else {
-            // any other style key, as flat: "set" writes it, "remove" drops it
-            rt.setStyle({ [key]: /remove/.test(action || '') ? undefined : value });
-            refresh();
+            return;
           }
+          let changed = false;
+          targets.forEach(rt => {
+            if (validation) validation.style(themeIdOf(rt), { [key]: value });
+            if (key === 'filter') {
+              rt.setRuntimeFilter(action === 'remove' ? '' : value);
+              changed = true;
+              return;
+            }
+            // any other style key, as flat: "set" writes it, "remove" drops it
+            const next = /remove/.test(action || '') ? undefined : flatChangedStyleValue(key, rt.style[key], value, action);
+            if (next === null) return;
+            rt.setStyle({ [key]: next });
+            changed = true;
+          });
+          if (changed) refresh();
         },
         // flat's ixmaps.setThemeTimeFrame(szId, min, max): show only the
         // records whose timefield lies in [min, max) (ms or Date-
@@ -4663,10 +4835,17 @@
               .catch(err => console.error('[ixmaps-gl] map.layer():', err));
             return engineApi;
           }
-          // map.layer(name).data()...define(): replaces a theme of that name
+          // map.layer(name).data()...define(): adds a theme on that layer.
+          // NO same-name auto-remove here: flat lets several themes SHARE one
+          // .layer() name (a page's feature base + its chart overlay, the
+          // NYC status page's two "Station" themes — the overlay joins onto
+          // the base's geometry by lookup, removing the base would kill
+          // both). Replacement is by THEME ID (style.name/meta.name), and
+          // happens inside defineFromDefinition instead — a re-defined id
+          // (the page's 10s live refresh) replaces its own previous theme.
           const lb = new LayerBuilder(nameOrBuilder);
           lb.define = () => {
-            _chainedLayers = _chainedLayers.then(() => { engineApi.removeTheme(nameOrBuilder); return engineApi.defineLayer(lb); })
+            _chainedLayers = _chainedLayers.then(() => engineApi.defineLayer(lb))
               .catch(err => console.error('[ixmaps-gl] map.layer().define():', err));
             return _chainedLayers;
           };
@@ -4695,8 +4874,22 @@
         // Removes every runtime whose OWN .layer(name) matches — a theme
         // may legitimately be split across more than one runtime sharing
         // one name (the CHOROPLETH/FEATURE-donor pair above), so this
-        // removes all of them, not just the first match.
-        removeTheme: (name) => removeRuntimes(name, runtimes.filter(r => r.name === name)),
+        // removes all of them, not just the first match. GL-PORT COMPAT:
+        // flat addresses a theme by its ID — style.name / meta.name —
+        // as much as by its layer name (htmlgui.js removeTheme), and a
+        // real page's own rebuild loop typically knows only the id it
+        // set via .meta({name}) (the fire page's KDE: removeTheme
+        // ("kde_fires") for the layer "kde_fires_layer"). Layer name
+        // first, then the id — without the fallback every rebuild
+        // removed nothing and stacked another copy of the theme,
+        // compounding opacity (same semantics removeThemeById already
+        // implements for the handle's .remove(id)).
+        removeTheme: (name) => {
+          const byLayer = runtimes.filter(r => r.name === name);
+          if (byLayer.length) return removeRuntimes(name, byLayer);
+          const byId = runtimes.filter(r => (r.style && r.style.name === name) || (r.meta && r.meta.name === name));
+          return byId.length ? removeRuntimes(byId[0].name, byId) : false;
+        },
         // flat's refreshTheme (maptheme.js Themes.refreshTheme): the
         // theme's data is loaded again — a broker is called again — and
         // replaces the old features in place (draw order, legend, style
@@ -4825,10 +5018,15 @@
         else map.fitBounds(bounds, { padding: 30, animate: false, maxZoom: 16 });
       }
 
-      async function loadNamedTheme(rt, force) {
+      // quiet: the broker's data fills only this theme — not broadcast to
+      // the other themes of the name (flat's refreshTheme reloads one theme;
+      // setExternalData only releases themes still waiting for the data,
+      // maptheme.js 2570-2591)
+      async function loadNamedTheme(rt, force, quiet = false) {
         const spec = normalizeTheme(rt._definition);
         const name = String(spec.data.name);
         const broker = brokerTheme(spec);
+        if (quiet && broker) _quietNamedData.set(name, (_quietNamedData.get(name) || 0) + 1);
         rt._loading = (rt._loading || 0) + 1;
         if (broker) { pendingLoads++; rt._brokerLoading = (rt._brokerLoading || 0) + 1; setDataLoading(); }
         try {
@@ -4850,6 +5048,7 @@
           else console.error(`[ixmaps-gl] theme "${themeIdOf(rt)}": no data —`, err);
         } finally {
           rt._loading--;
+          if (quiet && broker) { const n = (_quietNamedData.get(name) || 1) - 1; if (n) _quietNamedData.set(name, n); else _quietNamedData.delete(name); }
           if (broker) { pendingLoads--; rt._brokerLoading--; setDataLoading(); }
         }
       }
@@ -4898,7 +5097,11 @@
       }
       // flat, after a FEATURE theme is drawn (maptheme.js 18947-18962): the
       // other themes on its layer are placed again, and a data.query broker
-      // among them is refreshed 500 ms later
+      // among them is refreshed 500 ms later — quietly: its new data fills
+      // that theme only. Broadcast to every theme of the name, a FEATURE
+      // theme sharing the broker's data name (the fire areas page: SIF
+      // polygons and chart both "data_2") was refilled, drawn, refreshed
+      // its dependent again — an endless reload of ~15k records every 3 s
       function featureDependents(featureRt) {
         runtimes.forEach(dep => {
           if (dep === featureRt || dep.flags.has('FEATURE') || dep.flags.has('FEATURES')) return;
@@ -4906,7 +5109,7 @@
           const spec = normalizeTheme(dep._definition || {});
           if (dep._named && spec.data && spec.data.query) {
             clearTimeout(dep._dependentTimer);
-            dep._dependentTimer = setTimeout(() => { if (runtimes.includes(dep)) loadNamedTheme(dep, true); }, 500);
+            dep._dependentTimer = setTimeout(() => { if (runtimes.includes(dep)) loadNamedTheme(dep, true, true); }, 500);
           } else if (dep._named && dep._lastTable && !dep._loading) {
             fillNamedTheme(dep, spec, dep._lastTable, null);
           }
@@ -4915,10 +5118,18 @@
 
       // One theme definition (real ixmaps-flat's shape — from a builder's
       // definition() or a project file) → a new runtime on this map. Shared
-      // by defineLayer and loadProject. Purely additive, see defineLayer.
+      // by defineLayer and loadProject. Purely additive across LAYER names —
+      // several themes legitimately share one (a FEATURE base + its CHART
+      // overlay, the CHOROPLETH/FEATURE-donor pair) — but a re-defined
+      // THEME ID (style.name/meta.name) replaces its own previous theme, as
+      // flat itself does ("defining a theme with the same name replaces it
+      // in place"; a page's live-refresh loop relies on it, e.g. the NYC
+      // status page re-defining its two themes every 10s).
       async function defineFromDefinition(def) {
         if (validation) validation.definition(def);
         const pdef = projectThemeToDefinition(def);
+        const replacedId = (pdef.meta && pdef.meta.name) || (pdef.style && pdef.style.name);
+        if (replacedId) removeThemeById(replacedId);
         let spec = normalizeTheme(pdef);
         let raw;
         const deferred = deferredFeatureLoad(spec, map.getZoom());
@@ -5093,10 +5304,26 @@
       // never by size, so resizing the SAME cached icon every frame
       // creates no new atlas entries — none of the reclustering risk
       // above applies to a pure size change.
+      //
+      // globe: MapLibre shifts getZoom() by log2(cos(center lat)) as the
+      // center moves north/south (the globe keeps its size on screen); the
+      // grid zoom takes that out, so a gridwidthpx grid changes on zoom
+      // only, not on pan (flat's orthographic keeps its scale on rotation)
+      // — rounded so float noise doesn't miss GridAggregateIndex's
+      // per-zoom cache. Measured on the GHS orthographic page: center lat
+      // 17.2° → 47.2° moved getZoom() 2.467 → 1.975, re-binning the
+      // 3 px MEAN cloud (cells changing color) on every pan.
+      function gridZoomOf() {
+        const z = map.getZoom();
+        const proj = typeof map.getProjection === 'function' && map.getProjection();
+        if (!proj || proj.type !== 'globe') return z;
+        const lat = map.getCenter().lat * Math.PI / 180;
+        return Math.round((z - Math.log2(Math.cos(lat))) * 1e6) / 1e6;
+      }
       function refreshLayers() {
         const liveZoom = map.getZoom();
         // frozen only while MapLibre really is zooming (see 'moveend')
-        const zoom = isZooming && map.isZooming() ? stableGridZoom : liveZoom;
+        const zoom = isZooming && map.isZooming() ? stableGridZoom : gridZoomOf();
         const viewMoving = map.isMoving();
         const bounds = map.getBounds();
         const bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
@@ -5179,11 +5406,11 @@
       // zoom too) picks up the hide/show within one 150ms tick — still
       // effectively instant, without the unthrottled rebuild storm.
       let isZooming = false;
-      let stableGridZoom = map.getZoom();
+      let stableGridZoom = gridZoomOf();
       map.on('zoomstart', () => { isZooming = true; });
       map.on('zoomend', () => {
         isZooming = false;
-        stableGridZoom = map.getZoom();
+        stableGridZoom = gridZoomOf();
         // Was: clearTimeout(refreshTimer); refreshLayers(); — a DIRECT,
         // un-throttled rebuild on every single zoomend. That was fine
         // while every runtime's per-tick cost was cheap (viewport-scoped
@@ -5233,7 +5460,7 @@
         // the same arrows at every zoom, while the scale gates (liveZoom)
         // still switched.
         isZooming = false;
-        stableGridZoom = map.getZoom();
+        stableGridZoom = gridZoomOf();
         refresh();
       });
 
@@ -5452,7 +5679,7 @@
   // as ixmaps.map() does). The builder's own methods with different
   // semantics — layer, view, options, require, attribution, on — keep
   // theirs and are not overridden.
-  for (const m of ['replace', 'add', 'remove', 'removeTheme', 'replaceTheme', 'changeThemeStyle', 'setThemeStyle',
+  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',
     'getThemes', 'theme', 'setView']) {
@@ -5572,8 +5799,11 @@
           // itself, which stays purely additive for every other caller —
           // see its own comment for why (the CHOROPLETH/FEATURE-donor
           // pairing needs two runtimes sharing one name to coexist).
+          // NO same-LAYER-name auto-remove (see engineApi.layer's own
+          // comment — several themes legitimately share one layer name);
+          // a re-defined THEME ID replaces its own previous theme inside
+          // defineFromDefinition instead
           lb.define = () => {
-            resolvedApi.removeTheme(nameOrBuilder);
             return resolvedApi.defineLayer(lb);
           };
         }
@@ -5856,6 +6086,41 @@
         * (flatChartBranch(flags) === 'bubble' ? 0.5 : 1);
       return Math.max(VALUE_RADIUS_MIN, Math.min(VALUE_RADIUS_MAX, fixed * zoomFactor));
     }
+    // NOSIZE: every chart ONE fixed radius, whatever the item's value;
+    // normalsizevalue doesn't scale it. Which one depends on flat's SYMBOL
+    // sub-branch:
+    //  - a CATEGORICAL theme without AGGREGATE/GROUP ("symbol equals
+    //    value", maptheme.js 21566-21625, "GR 01.07.2023 redesign size
+    //    handling"): the normal radius itself
+    //  - every other symbol chart (the per-part ladder, 21829-21896):
+    //    SEQUENCE normalX(chart size / 3), 2/3 of it; otherwise
+    //    nMaxRadius / 5 — measured on the fire areas page's SIF chart
+    //    (CHART|SYMBOL|NOSIZE: r 60 units at normalX(1) 20, i.e. 3 of the
+    //    15-unit normal radius)
+    // The BUBBLE draw keeps its own older NOSIZE value, half of it
+    // (maptheme.js 19839)
+    if (flags && flags.has('NOSIZE') && !flags.has('PLOT') && !flags.has('GRIDSIZE')) {
+      const symbolEqualsValue = flags.has('CATEGORICAL') && !flags.has('AGGREGATE') && !flatFlag(flags, 'GROUP');
+      const fixed = NORMAL_RADIUS_PX * (styleNum(style.scale) || 1)
+        * (flatChartBranch(flags) === 'bubble' ? 0.5
+          : symbolEqualsValue ? 1
+          : flatFlag(flags, 'SEQUENCE') ? 2 / 3 : 1 / 5);
+      return Math.max(VALUE_RADIUS_MIN, Math.min(VALUE_RADIUS_MAX, fixed * zoomFactor));
+    }
+    // Same redesign, the rule around it (maptheme.js 21612-21625) — only in
+    // flat's "symbol equals value" sub-branch, a CATEGORICAL theme without
+    // AGGREGATE/GROUP: the symbol resizes by itemA[a].nSize, which flat only
+    // sets for a theme with a bound szSizeField (maptheme.js 9144-9153), so
+    // WITHOUT a size field every item keeps the DEFAULT normal radius,
+    // whatever its value. Every other symbol chart (the per-part ladder,
+    // 21850-21851) and BUBBLE (19851) scale by the value — below.
+    if (flags && flags.has('SYMBOL') && !flags.has('BUBBLE') && !flags.has('USER')
+      && !flags.has('FIXSIZE') && !flags.has('PLOT') && !flags.has('GRIDSIZE')
+      && flags.has('CATEGORICAL') && !flags.has('AGGREGATE') && !flatFlag(flags, 'GROUP')
+      && !style.sizefield) {
+      const fixed = NORMAL_RADIUS_PX * (styleNum(style.scale) || 1);
+      return Math.max(VALUE_RADIUS_MIN, Math.min(VALUE_RADIUS_MAX, fixed * zoomFactor));
+    }
     // Real default (maptheme.js ~line 5059) when the theme sets no
     // normalsizevalue: the dataset's own max value on the bound size
     // field (maxSizeValue, from LayerRuntime._prepare), not a fixed
@@ -6168,9 +6433,9 @@
 
   // a chart's VALUES text (maptheme.js 20979-21017): an explicit valuefield
   // prints that field of the record ($title$: the title; a non-number as
-  // is), else the value; numbers formatted with valuedecimals (flat's `||`:
-  // 0 or unset → 1 decimal below 1 — or when the max value is at most 1 —
-  // else none) plus the unit, which flat stores with a leading space unless
+  // is), else the value; numbers formatted with valuedecimals when set
+  // (explicitValueDecimals: a given "0" counts), else 1 decimal below 1 —
+  // or when the max value is at most 1 — else none, plus the unit, which flat stores with a leading space unless
   // it starts with "." (9675) and appends only up to 5 characters.
   // A CATEGORICAL bubble prints its size value when size is bound to a
   // field (its value, see resolveAggregateValue), as flat does; with
@@ -6184,11 +6449,30 @@
     if (!field || field !== binding.value || !flags.has('CATEGORICAL') || !labels || labels[i] == null) return null;
     return { [field]: labels[i] };
   }
+  // style.valuedecimals as flat reads it: nValueDecimals keeps the raw
+  // style string, so an explicit "0" is truthy in flat's `nValueDecimals ||
+  // default` and counts (fire areas page: valuedecimals "0", 0.48 → "1 ha");
+  // null when not set
+  // (valuedecimals is therefore not typed: STYLE_NUMBER_KEYS). Flat's
+  // truthiness: unset, "" and a numeric 0 fall back to the default
+  function explicitValueDecimals(style) {
+    const v = style && style.valuedecimals;
+    if (!v) return null;
+    const n = Number(v);
+    return Number.isFinite(n) ? n : null;
+  }
+  // the legend's decimals (legend.js 610): valuedecimals when defined, else 2
+  function legendDecimals(style) {
+    const v = style && style.valuedecimals;
+    const n = v == null || v === '' ? NaN : Number(v);
+    return Number.isFinite(n) ? n : 2;
+  }
   function flatValueText(raw, title, value, style, flags, opts = {}) {
     const units = style.units ? String(style.units) : '';
     const unit = units ? (units[0] === '.' ? '' : ' ') + units : '';
     const unitText = unit.length <= 5 ? unit : '';
-    const dec = v => styleNum(style.valuedecimals) || ((v < 1 || (opts.maxValue != null && opts.maxValue <= 1)) ? 1 : 0);
+    const explicitDec = explicitValueDecimals(style);
+    const dec = v => (explicitDec != null ? explicitDec : ((v < 1 || (opts.maxValue != null && opts.maxValue <= 1)) ? 1 : 0));
     const signed = (v, text) => {
       if (flags && (flags.has('DIFFERENCE') || flags.has('RELATIVE') || flags.has('SIGN'))) {
         if (v === 0) return '+/-' + text;
@@ -6201,7 +6485,7 @@
     if (field && raw && raw[field] != null && raw[field] !== '') {
       if (isNaN(raw[field])) return String(raw[field]);
       const v = Number(raw[field]);
-      return signed(v, flatGroupedValue(v, styleNum(style.valuedecimals) || (v < 1 ? 1 : 0), opts.noBreaks) + unitText);
+      return signed(v, flatGroupedValue(v, explicitDec != null ? explicitDec : (v < 1 ? 1 : 0), opts.noBreaks) + unitText);
     }
     return signed(value, flatGroupedValue(value, dec(value), opts.noBreaks) + unitText);
   }
@@ -6303,19 +6587,29 @@
   }
 
   function valuesHiddenByScale(style, zoom) {
-    const m = /^1:(\d+(?:\.\d+)?)$/.exec(style.valueupper || '');
+    // flat accepts both 'valueupper' and 'valuesupper' (maptheme.js 1710,
+    // "GR 15.03.2017 accept also 'valuesupper'"), same for the lower pair
+    const m = /^1:(\d+(?:\.\d+)?)$/.exec(style.valueupper || style.valuesupper || '');
     if (!m) return false;
     const upperRatio = parseFloat(m[1]);
     const scaleDenominator = scaleDenominatorAt(zoom);
     return scaleDenominator > upperRatio;
   }
+  // flat's chart LABEL scale gate (maptheme.js 24536-24537): the label is
+  // visible while the scale passes <= against BOTH bounds — flat's own
+  // lower test reads <= too, kept as-is for parity
+  function labelHiddenByScale(style, zoom) {
+    const upper = scaleDenom(style.labelupper), lower = scaleDenom(style.labellower);
+    const scale = scaleDenominatorAt(zoom);
+    return !!((upper && scale > upper) || (lower && scale > lower));
+  }
 
   // contrasting text color against a bubble's own fill — standard relative
   // luminance; approximates the real engine's __maptheme_getChartColors(...)
   // .textColor (white text on ixmaps' typically dark/saturated palette,
   // dark text on pale fills) without needing its exact color-space table.
   function contrastTextColor(fillRgb) {
-    const [r, g, b] = fillRgb;
+    const [r, g, b] = fillRgb || [128, 128, 128];
     const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
     return luminance > 0.6 ? [30, 30, 30] : [255, 255, 255];
   }
@@ -6751,6 +7045,83 @@
     return { offset, index, extent };
   }
 
+  // Chart texts covered by charts drawn after them. Flat draws each chart
+  // as one SVG group (glow, symbol, value text, in that order) in the
+  // sorted draw order, so a later chart's symbol and glow paint over the
+  // texts of every chart beneath it; here the texts are separate TextLayers
+  // above every icon. This composites that occlusion on the CPU: for each
+  // text, the transmittance Π(1 − α) of every LATER chart's symbol parts
+  // and glow at a few sample points of the text box, averaged — the
+  // fraction of the text still showing through, its alpha. Partly covered
+  // texts fade instead of being clipped (no per-pixel mask in deck.gl).
+  //   charts: in draw order, { x, y, parts: [{ dx, dy, r, shape, alpha }],
+  //     glowR, glowAlpha } in screen pixels; a part's alpha its opacity,
+  //     glowR 0 for none (glowAlpha scales glowProfileAlpha)
+  //   texts: { order (index into charts), x, y, w, h }
+  // Returns each text's transmittance, 0..1.
+  const OCCLUSION_CELL_PX = 64;
+  // below this a text is as good as hidden: left out of its TextLayer
+  const CHART_TEXT_MIN_TRANSMITTANCE = 0.08;
+  function chartTextTransmittance(charts, texts) {
+    const grid = new Map();
+    charts.forEach((c, k) => {
+      let ext = c.glowR || 0;
+      for (const p of c.parts) ext = Math.max(ext, Math.hypot(p.dx, p.dy) + p.r * Math.SQRT2);
+      const x0 = Math.floor((c.x - ext) / OCCLUSION_CELL_PX), x1 = Math.floor((c.x + ext) / OCCLUSION_CELL_PX);
+      const y0 = Math.floor((c.y - ext) / OCCLUSION_CELL_PX), y1 = Math.floor((c.y + ext) / OCCLUSION_CELL_PX);
+      for (let gx = x0; gx <= x1; gx++) {
+        for (let gy = y0; gy <= y1; gy++) {
+          const key = gx + ',' + gy;
+          let cell = grid.get(key);
+          if (!cell) grid.set(key, cell = []);
+          cell.push(k);
+        }
+      }
+    });
+    const alphaAt = (c, x, y) => {
+      let keep = 1;
+      if (c.glowR) {
+        const d = Math.hypot(x - c.x, y - c.y) / c.glowR;
+        if (d < 1) keep *= 1 - c.glowAlpha * glowProfileAlpha(d);
+      }
+      for (const p of c.parts) {
+        if (insideSymbolShape(p.shape, x - c.x - p.dx, y - c.y - p.dy, p.r)) keep *= 1 - p.alpha;
+      }
+      return keep;
+    };
+    // the box center and four points inside its corners
+    const SAMPLES = [[0, 0], [-0.35, -0.3], [0.35, -0.3], [-0.35, 0.3], [0.35, 0.3]];
+    return texts.map(t => {
+      let sum = 0;
+      for (const [sx, sy] of SAMPLES) {
+        const x = t.x + sx * t.w, y = t.y + sy * t.h;
+        const cell = grid.get(Math.floor(x / OCCLUSION_CELL_PX) + ',' + Math.floor(y / OCCLUSION_CELL_PX));
+        let keep = 1;
+        // cells list charts in draw order: only the later ones cover
+        if (cell) for (let i = cell.length - 1; i >= 0 && cell[i] > t.order && keep > 0; i--) keep *= alphaAt(charts[cell[i]], x, y);
+        sum += keep;
+      }
+      return sum / SAMPLES.length;
+    });
+  }
+  // _getGlowIcon's radial gradient: 0.28 at the center, 0.09 at half the
+  // radius, 0 at the edge (d = distance / radius)
+  function glowProfileAlpha(d) {
+    return d < 0.5 ? 0.28 - 0.19 * d / 0.5 : d < 1 ? 0.09 * (1 - (d - 0.5) / 0.5) : 0;
+  }
+  // inside drawSymbolPath's shape of radius r, (dx, dy) from its center;
+  // the shapes without their own test as the circle
+  function insideSymbolShape(shape, dx, dy, r) {
+    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 '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;
+      default: return dx * dx + dy * dy <= r * r;
+    }
+  }
+
   // A pixel offset [dx, dy] (y down) from lngLat at MapLibre zoom `zoom`,
   // as lng/lat (Web Mercator, 512 px world tiles) — for shapes too large
   // for an icon, drawn in map coordinates (rebuilt with every refresh).
@@ -6830,6 +7201,25 @@
     return parts;
   }
 
+  // CHART|SYMBOL|SEQUENCE|RINGS (flat maptheme.js 21293-21318): the parts
+  // nest on the center — each non-zero part sized by the running total of
+  // the non-zero parts up to it (its own value included), biggest first
+  // so the smaller ones stay on top; parts of value 0 are left out.
+  // radiusOf(total) is the ring's radius. Measured on flat (NYC status:
+  // 63 | 75 | 3 → r 161.5 | 353.8 | 361.5 at max radius 300, max value
+  // 117). Returns { i, v (the part's own value), c (running total), r, x, y }.
+  function ringsLayout(counts, radiusOf) {
+    const parts = [];
+    let total = 0;
+    counts.forEach((v, i) => {
+      if (!v) return;
+      total += v;
+      const r = radiusOf(total);
+      if (r > 0) parts.push({ i, v, c: total, r, x: 0, y: 0 });
+    });
+    return parts.sort((a, b) => b.c - a.c);
+  }
+
   // ---------------------------------------------------------------
   // Classification — pure functions (no LayerRuntime state): class
   // breaks for a numeric field, and which class a value falls in.
@@ -7966,6 +8356,18 @@
     return out;
   }
 
+  // Every runtime ever built gets a fresh number: a theme rebuilt through
+  // removeTheme() + defineLayer() (a page's own refresh loop, e.g. the fire
+  // page's KDE isobands) is a NEW runtime whose data may differ from the
+  // runtime it replaces — if its deck.gl layer kept the SAME id, deck would
+  // update the old layer's state in place, and under the interleaved overlay
+  // those in-place updates can leave the PREVIOUS generation's geometry on
+  // screen (the exact failure _dataLayerId's own comment documents for
+  // replaceFeatures: "updates in place, arriving over each other, left
+  // triangles across sections"). A unique -dN suffix per runtime forces deck
+  // to build a genuinely new layer and dispose the old one.
+  let LAYER_DATA_GENERATION = 0;
+
   class LayerRuntime {
     // spec: a normalizeTheme() result — never a raw LayerBuilder
     constructor(spec, fc, mapOptions) {
@@ -7974,6 +8376,8 @@
       this.style = spec.style;
       this.flags = symbolsFlagCompat(spec.flags, spec.style);
       this.meta = spec.meta;
+      // see LAYER_DATA_GENERATION above — unique per runtime, see _dataLayerId
+      this._dataGen = ++LAYER_DATA_GENERATION;
       // GL-PORT COMPAT: retained only for ixmaps.getThemeObj()'s szFilter
       // (real ixmaps-flat global compat shim, see _globalThemeRegistry) —
       // this engine's own filtering is fully static/load-time (see
@@ -8144,6 +8548,21 @@
         // ("investimento"/"tamponamento"/...) needs the display text, not
         // a raw numeric code it could never match against.
         this.categoryColorsRgb = resolveClassColors(this.style.colorscheme, this.categoryDisplayLabels, this.style.classes);
+      } else if (this._isMultiFieldSequence()) {
+        // CHART|SYMBOL|SEQUENCE over several value fields (no CATEGORICAL,
+        // no AGGREGATE): one part per field, colored by the colorscheme in
+        // field order, labeled by .style({label}) (flat's szFieldsA /
+        // szLabelA). A colorscheme entry "none" is a part without fill —
+        // only its outline in linecolor (flat: fill:none). The parts' max
+        // value is flat's nMax: the biggest single field value of any
+        // record (maptheme.js nMaxA → nMax), measured on the NYC status page
+        Object.assign(this, computeMultiFieldClasses(this.binding, this.style));
+        this.categoryIndexByLabel = new Map(this.categoryLabels.map((v, i) => [v, i]));
+        const scheme = Array.isArray(this.style.colorscheme) ? this.style.colorscheme : [];
+        this._partNoFill = new Set(this._multiFields.map((f, i) => i).filter(i => String(scheme[i]).trim().toLowerCase() === 'none'));
+        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;
       } else if (this.binding.value) {
         // real engine's OTHER coloring mode (maptheme.js distributeValues,
         // partsA): a NUMERIC bound value, not CATEGORICAL, is classed into
@@ -8156,6 +8575,24 @@
         // "which bucket does this feature belong to", and once buckets +
         // colors exist, everything downstream is identical.
         this._buildPartsA();
+      } else if (this.style.colorscheme != null) {
+        // GL-PORT COMPAT: a theme with NO classification at all (no
+        // CATEGORICAL categories, no numeric binding.value to range-class)
+        // still has classes in the real engine — exactly ONE, its implicit
+        // bucket: _resolveClassIndex returns 0 for every feature, and flat
+        // colors them all with colorScheme[0] (every MapTheme is built
+        // from its colorscheme array — one entry, one class, e.g. the
+        // fire page's KDE isobands: FEATURE|CHOROPLETH, colorscheme
+        // "#dd0088", no value field — every iso band one flat magenta).
+        // Without this branch categoryColorsRgb stayed undefined while
+        // cat was still 0, and the choropleth's getFillColor crashed on
+        // categoryColorsRgb[0] — deck.gl killed the layer at init and
+        // the theme never drew. A colorscheme that resolves to NO colors
+        // (the explicit no-fill ["none"] — flat draws unfilled symbols,
+        // only their values/boxes/titles) keeps that: resolving it to the
+        // fallback palette would paint symbol circles flat never draws.
+        const resolved = resolveColorScheme(this.style.colorscheme, [''], this.style.classes);
+        this.categoryColorsRgb = resolved ? resolved.map(c => Array.isArray(c) ? c : (parseCssColor(c) || [130, 130, 130])) : null;
       }
 
       // facet-driven dynamic filter state (see setFacetFilter/getFacets) —
@@ -8225,6 +8662,17 @@
     // this with AGGREGATE clustering yet, so a clustered GROUP bubble
     // always stays circular (_buildBubbleIcon, untouched).
     _resolveSymbolShape(props) {
+      // flat's class→symbol mapping (maptheme.js 1417, 2074-2077, 12937):
+      // `symbols` WITHOUT a symbolfield names the shape per COLOR class —
+      // szSymbolsA[class], the last entry repeating when the array is
+      // shorter than the classes (a single entry, like the fire page's
+      // symbols: ["square"], shapes every class). Only GL's implemented
+      // shapes draw (drawSymbolPath); flat-only names fall back to circle.
+      if (!this.style.symbolfield && Array.isArray(this.style.symbols)) {
+        const s = this.style.symbols;
+        const cat = props && props.cat != null ? props.cat : 0;
+        return normalizeSymbolShape(s[Math.min(cat, s.length - 1)]);
+      }
       if (!this.style.symbolfield || !Array.isArray(this.style.symbolvalues) || !Array.isArray(this.style.symbols)) return 'circle';
       // CORRECTED: found live via pickObject, not assumed — the properties
       // this actually receives at render time (from _computeAggregatedItems'
@@ -8286,6 +8734,19 @@
       // they'd never even share a cell in the first place). Every
       // feature goes into ONE bucket; _buildChartLayers resolves the real
       // 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)
+        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 } };
+        })];
+        this._clusterIndices = null;
+        this._clusterRadiusPx = null;
+        this._aggregateStatsCache = null;
+        return;
+      }
       if (this._rangeClassed) {
         // flat colors/classes an aggregated cell by the SUM of the value
         // field (nValuesA, maptheme.js:10870ff; classified by nValuesA[0],
@@ -8488,7 +8949,11 @@
     }
 
     _usesAggregationIndex() {
-      return (this.flags.has('AGGREGATE') || isSymbolChart(this.flags)) && !this.flags.has('GRIDSIZE');
+      // GRIDSIZE bins its own grid (_ensureGridIndex) — PLOT curves and the
+      // plain mesh; a classed GRIDSIZE symbol chart is aggregated like any
+      // other (see _isPlainGridMesh)
+      return (this.flags.has('AGGREGATE') || isSymbolChart(this.flags))
+        && (!this.flags.has('GRIDSIZE') || (!this.flags.has('PLOT') && !this._isPlainGridMesh()));
     }
 
     _rebuildActiveFeatures() {
@@ -8772,7 +9237,7 @@
       return this._glowIconCache.get(key);
     }
 
-    _buildBubbleIcon(counts, colors, marked = null) {
+    _buildBubbleIcon(counts, colors, marked = null, shapes = null) {
       // The cache key quantizes each count's RATIO to the group's total,
       // not the raw count — computeBubblePackLayout's radii are purely
       // sqrt(c/total), so two clusters with wildly different absolute
@@ -8802,7 +9267,7 @@
       // coarse share buckets that can put a small marked part at 0
       const key = counts.map(c => Math.round((c / total) * RATIO_BUCKETS)).join('-') + (marked
         ? '|iso:' + counts.map((c, i) => (c > 0 && marked.has(i) ? i + ':' + Math.round(Math.sqrt(c / total) * 100) : null)).filter(Boolean).join(',')
-        : '');
+        : '') + (shapes ? '|sym:' + shapes.map(v => String(v).toLowerCase()).join(',') : '');
       if (this._iconCache.has(key)) return this._iconCache.get(key);
       const size = BUBBLE_ICON_SIZE;
       const canvas = document.createElement('canvas');
@@ -8811,8 +9276,16 @@
       const { present, radii, offsets, fitScale } = (marked && isolatedBubblePackLayout(counts, size, marked)) || computeBubblePackLayout(counts, size);
       const cx = size / 2, cy = size / 2;
       present.forEach((p, i) => {
+        // flat draws each part of an aggregated SYMBOL theme as ITS class's
+        // symbol shape (the szSymbol switch runs per part, maptheme.js
+        // 21995-22060) — `symbols` names them per class like
+        // _resolveSymbolShape; circles when the name isn't one GL draws
+        const shape = shapes ? normalizeSymbolShape(shapes[Math.min(p.i, shapes.length - 1)]) : 'circle';
+        const px = cx + offsets[i].x * fitScale, py = cy + offsets[i].y * fitScale;
         ctx.beginPath();
-        ctx.arc(cx + offsets[i].x * fitScale, cy + offsets[i].y * fitScale, radii[i] * fitScale, 0, Math.PI * 2);
+        if (shape === 'circle') ctx.arc(px, py, radii[i] * fitScale, 0, Math.PI * 2);
+        else drawSymbolPath(ctx, shape, px, py, radii[i] * fitScale);
+        ctx.closePath();
         ctx.fillStyle = `rgb(${colors[p.i].join(',')})`;
         ctx.globalAlpha = 0.9; ctx.fill(); ctx.globalAlpha = 1;
         ctx.lineWidth = 1; ctx.strokeStyle = '#fff'; ctx.stroke();
@@ -8862,14 +9335,22 @@
       ctx.beginPath();
       drawSymbolPath(ctx, shape, c, c, r);
       ctx.closePath();
+      // flat's "empty" (maptheme.js 21629-21631): the circle geometry, but
+      // a fully transparent fill and a gray outline (fill-opacity:0,
+      // stroke #888888) — a shapeless spot marker
       ctx.fillStyle = `rgb(${colorRgb.join(',')})`;
-      ctx.globalAlpha = opacity;
+      ctx.globalAlpha = shape === 'empty' ? 0 : opacity;
       ctx.fill();
       if (borderWidth > 0 && borderColorRgb) {
         ctx.globalAlpha = 1;
         ctx.strokeStyle = `rgb(${borderColorRgb.join(',')})`;
         ctx.lineWidth = borderWidth;
         ctx.stroke();
+      } else if (shape === 'empty') {
+        ctx.globalAlpha = 1;
+        ctx.strokeStyle = '#888888';
+        ctx.lineWidth = 1;
+        ctx.stroke();
       }
       const icon = { url: canvas.toDataURL(), width: size, height: size, anchorX: size / 2, anchorY: size / 2, id: key };
       return this._cacheIcon(key, icon);
@@ -9146,7 +9627,8 @@
     _formatTooltipValue(value) {
       const num = Number(value);
       if (isNaN(num)) return String(value);
-      const rawDecimals = styleNum(this.style.valuedecimals);
+      const vd = this.style.valuedecimals;
+      const rawDecimals = vd == null || vd === '' ? NaN : Number(vd);
       const decimals = isNaN(rawDecimals) ? 2 : rawDecimals;
       // flat's __formatValue (mapscript.js 6268ff) rounds twice: first to
       // one decimal more (toFixed), then to the precision (Math.round) —
@@ -9215,16 +9697,19 @@
       // GRIDSIZE (spatial grid binning) is checked before the generic
       // CHART|SYMBOL bubble pipeline, same "more specific base type wins"
       // precedence as DOT: PLOT+GRIDSIZE is the per-year curves mini-chart
-      // (_buildPlotLayers); GRIDSIZE alone (no PLOT — the real engine's
-      // "grid" companion layer) is a plain uniform grid mesh, sized to the
-      // full cell pitch regardless of SIZE/QUANTILE/MEAN, matching
-      // maptheme.js's own `GRIDSIZE && !PLOT -> nRadius = nGridSize/2` rule
-      // (SIZE/QUANTILE/MEAN have no visible effect there in the real
-      // engine either — confirmed, not a gap in this port).
+      // (_buildPlotLayers); GRIDSIZE without PLOT is flat's symbol chart
+      // with `nRadius = nGridSize/2` (maptheme.js 21843) — every chart the
+      // size of its cell, colored by its class (QUANTILE of the MEAN, the
+      // fuel-price page). Only a plain one-color grid (the "grid"
+      // 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('GRIDSIZE')) return this._buildGridMeshLayers(zoom, bbox);
+      // 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,
+      // below in _buildChartLayers (_gridChartRadiusPx)
+      if (this.flags.has('GRIDSIZE') && this._isPlainGridMesh()) return this._buildGridMeshLayers(zoom, bbox);
       // CHOROPLETH is checked before the generic FEATURE dispatch — a
       // CHOROPLETH layer's own type string doesn't carry FEATURE/FEATURES
       // (only its geometry-donor base layer does, see
@@ -9259,7 +9744,16 @@
 
     _buildFeaturesLayers(zoom, bbox) {
       const cs = this.style.colorscheme;
-      const raw = Array.isArray(cs) ? cs[0] : cs;
+      // a generated scheme's first entry is the class COUNT, not a color —
+      // flat colors an unclassed theme with the sweep's FIRST generated
+      // color (maptheme colorScheme[0] after realize generates the sweep),
+      // never the bare count string (a near-white dot for "5","white","blue"
+      // — the NYC page's station base)
+      let raw = Array.isArray(cs) ? cs[0] : cs;
+      if (Array.isArray(cs) && isGeneratedColorScheme(cs)) {
+        const sweep = flatColorSweep(cs[1], cs[2], Number(cs[0]) || 5, cs[3], cs[4]);
+        if (sweep && sweep.length) raw = sweep[0];
+      }
       const filled = raw !== 'none';
       // FEATURE|CATEGORICAL: polygons coloured by their category (flat colours
       // each shape by its class), not one flat fill
@@ -9288,7 +9782,7 @@
         getFillColor: byCategory
           ? f => {
             const cat = this._resolveClassIndex(f.properties[this.binding.value]);
-            return [...(cat != null ? this.categoryColorsRgb[cat] : nodataRgb).slice(0, 3), catAlpha];
+            return [...(cat != null ? (this.categoryColorsRgb || [])[cat] || nodataRgb : nodataRgb).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
@@ -9495,7 +9989,7 @@
         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;
+            || (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];
@@ -9510,7 +10004,15 @@
         // 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.
-        opacity: dopacityActive ? 1 : baseOpacity
+        opacity: dopacityActive ? 1 : baseOpacity,
+        // Same coplanar z-fighting fix as the FEATURE/FEATURES GeoJsonLayer
+        // (see _buildFeaturesLayers' own comment): under globe projection
+        // the interleaved polygon surface and MapLibre's own sphere mesh
+        // compete for the same depth-buffer real estate and the fill comes
+        // out moiré/hatched ("holes"), never under flat Mercator. Draw
+        // order against other polygon layers is unchanged — depthCompare
+        // only settles the fight against the map's own surface.
+        parameters: { depthCompare: 'always' }
       })];
     }
 
@@ -9563,9 +10065,37 @@
     // style.values/xaxis (explicit, see _prepare) if set, else whatever
     // CATEGORICAL auto-discovered.
     // a per-item PLOT: no GRIDSIZE grid, several value fields per item
+    // GRIDSIZE without PLOT drawn as one uniform square per cell: only a
+    // plain grid — a single color, no VALUES, no GLOW
+    _isPlainGridMesh() {
+      return !this.flags.has('PLOT') && (this.categoryColorsRgb || []).length <= 1
+        && !this.flags.has('VALUES') && !this.flags.has('GLOW');
+    }
+    // GRIDSIZE (no PLOT) symbol chart radius, px: flat's nGridSize / 2
+    // (maptheme.js 21843), nGridSize the aggregation cell pitch / nAutoSize
+    // (16944-16952: RECT or no AGGREGATE 1.0, with GAP 1.15; else 0.75,
+    // with GAP 0.8) · style.scale. Measured on the fuel-price page: 5 px
+    // cells, RECT|GAP → nGridSize 4.35 px, circle r 2.17 px. null when not
+    // a GRIDSIZE chart or no grid at this scale.
+    _gridChartRadiusPx(zoom, liveZoom) {
+      if (!this.flags.has('GRIDSIZE') || this.flags.has('PLOT') || !this._clusterRadiusPx) return null;
+      const fromZoom = this._clusterUsesFixedZoom ? GRIDWIDTH_METERS_REFERENCE_ZOOM : zoom;
+      const cellPx = this._clusterRadiusPx * Math.pow(2, liveZoom - fromZoom);
+      const rect = flatFlag(this.flags, 'RECT') || !this.flags.has('AGGREGATE');
+      const gap = flatFlag(this.flags, 'GAP');
+      const autoSize = rect ? (gap ? 1.15 : 1.0) : (gap ? 0.8 : 0.75);
+      return cellPx / autoSize * (styleNum(this.style.scale) || 1) / 2;
+    }
     _isItemPlot() {
       return this.flags.has('PLOT') && !this.flags.has('GRIDSIZE') && String(this.binding.value || '').includes('|');
     }
+    // a per-item SEQUENCE chart: CHART|SYMBOL|SEQUENCE, several value
+    // fields per item, one part per field (no CATEGORICAL, no AGGREGATE)
+    _isMultiFieldSequence() {
+      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')
+        && String(this.binding.value || '').includes('|');
+    }
     _itemPlotFields() {
       return String(this.binding.value || '').split('|');
     }
@@ -10419,6 +10949,20 @@
             ...(f.properties.titleRaw ? { titleRaw: f.properties.titleRaw } : {}) }
         };
       });
+      // MEAN (no CATEGORICAL): a cell's value is the mean of its records,
+      // not their sum (flat's MEAN aggregation) — what its label prints,
+      // its size and its class follow. The fuel-price page: 119 stations,
+      // sum 270.0 → 2.27 €
+      if (this.flags.has('MEAN') && !this.flags.has('CATEGORICAL')) {
+        groups.forEach(g => {
+          const p = g.properties;
+          const n = groupRecordCount(p);
+          if (!(n > 0)) return;
+          if (p.recordCounts) p.counts = p.counts.map((c, i) => (p.recordCounts[i] ? c / p.recordCounts[i] : c));
+          p.total = p.total / n;
+          if (p.classTotal !== undefined) p.classTotal = p.classTotal / n;
+        });
+      }
       return { individual, groups };
     }
 
@@ -10546,6 +11090,10 @@
       // _computeAggregatedItems below — a plain (non-AGGREGATE)
       // BUBBLE/CHART theme never reads them.
       if (this.flags.has('AGGREGATE')) this._ensureClusterIndices(zoom);
+      // GRIDSIZE: every chart the size of its grid cell, whatever its value
+      // (_gridChartRadiusPx); otherwise valueRadius
+      const gridR = this._gridChartRadiusPx(zoom, liveZoom);
+      const vRadius = v => (gridR != null ? gridR : valueRadius(v, liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue));
       // AGGREGATE sums without a normalsizevalue: flat's default is the
       // largest aggregated value (defaultNormalSizeValue leaves it unset, the
       // sizes depend on the aggregation)
@@ -10688,7 +11236,7 @@
         if (userLayers) return layers.concat(userLayers);
       }
       if (this.flags.has('LABEL')) return layers.concat(this._buildLabelChartLayers(combined, zoom, liveZoom, sizeValueOf));
-      if (flatFlag(this.flags, 'SEQUENCE') && this.flags.has('CATEGORICAL') && this.flags.has('AGGREGATE')) {
+      if ((flatFlag(this.flags, 'SEQUENCE') && this.flags.has('CATEGORICAL') && this.flags.has('AGGREGATE')) || (this._multiFields && this._isMultiFieldSequence())) {
         return layers.concat(this._buildSequenceChartLayers(combined, zoom, liveZoom));
       }
       const fillOpacity = styleNum(this.style.fillopacity) || 0.85;
@@ -10703,7 +11251,7 @@
       const singleBorderWidthPx = styleNum(this.style.linewidth) || 0;
 
       const itemRgb = d => this.categoryColorsRgb[d.properties.counts ? dominant(d.properties.counts) : d.properties.cat] || [128, 128, 128];
-      const radiusOf = d => valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue);
+      const radiusOf = d => vRadius(sizeValueOf(d));
       // align / offsetx / offsety: the whole chart moves (flatChartAlignOffset)
       // MULTIQUAD / MULTISQUARE: the items at one position side by side
       // (multiQuadOffsets), added to the chart position
@@ -10726,7 +11274,7 @@
           id: `ix-symbolshadow-${this.name}-g${this._iconGeneration}`,
           data: combined, pickable: false,
           getPosition: d => d.geometry.coordinates,
-          getIcon: d => this._getShadowIcon(radiusOf(d), blurPx, d.properties.counts ? 'circle' : this._resolveSymbolShape(d.properties)),
+          getIcon: d => this._getShadowIcon(radiusOf(d), blurPx, d.properties.counts && !Array.isArray(this.style.symbols) ? 'circle' : this._resolveSymbolShape(d.properties)),
           getSize: d => radiusOf(d) * 3, // disc = 2/3 of the icon → its diameter is 2r
           getPixelOffset: alignOf.active ? d => { const o = alignOf(d); return [o[0] + dx, o[1] + dy]; } : [dx, dy],
           getColor: d => {
@@ -10751,8 +11299,8 @@
           id: `ix-glow-${this.name}-g${this._iconGeneration}`,
           data: combined, pickable: false,
           getPosition: d => d.geometry.coordinates,
-          getIcon: d => this._getGlowIcon(this.categoryColorsRgb[d.properties.counts ? dominant(this._groupIsolation(d) ? d.properties.counts.map((c, i) => (this._markedClasses.has(i) ? c : 0)) : d.properties.counts) : d.properties.cat]),
-          getSize: d => valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue) * (d.properties.counts ? 9 : 11),
+          getIcon: d => this._getGlowIcon((this.categoryColorsRgb || [])[d.properties.counts ? dominant(this._groupIsolation(d) ? d.properties.counts.map((c, i) => (this._markedClasses.has(i) ? c : 0)) : d.properties.counts) : d.properties.cat]),
+          getSize: d => vRadius(sizeValueOf(d)) * (d.properties.counts ? 9 : 11),
           getColor: d => [255, 255, 255, this._iconAlpha(d)],
           ...(alignOf.active ? { getPixelOffset: alignOf } : {}),
           sizeUnits: 'pixels',
@@ -10798,15 +11346,29 @@
       // Box and title are removed outside boxupper/boxlower.
       // Flat draws box and title in the chart group, which is scaled by
       // style.scale: the units below are u · scale. Its size measure W is
-      // the chart's width (2r; with MULTIQUAD the width of the whole grid
-      // at the position, the box enclosing all of it); flat's chart size
-      // is 30 units.
+      // the width of the drawn chart (flat's getBox of the chart group,
+      // 18785): the symbol (with MULTIQUAD the whole grid at the position,
+      // the box enclosing all of it), its value text and its label
+      // (chartItemExtent); flat's chart size is 30 units.
+      // 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 titleFontPx = 5 * unitPx * (styleNum(this.style.textscale) || styleNum(this.style.valuescale) || 1);
+      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);
+      const valueTextOf = valuesShown ? this._chartValueTextFn() : null;
+      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);
@@ -10814,12 +11376,16 @@
       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 = valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue);
+        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);
@@ -10835,7 +11401,7 @@
             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,
+            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] };
           }
         }
@@ -10935,17 +11501,27 @@
         }));
       }
 
+      // 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)
+      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; };
+      // 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
+      const singleSymbol = d => !d.properties.counts || (this._rangeClassed && d.properties.cat != null);
       layers.push(new IconLayer({
         id: `ix-bubbles-${this.name}-g${this._iconGeneration}`,
         data: combined, pickable: true,
         getPosition: d => d.geometry.coordinates,
-        getIcon: d => d.properties.counts
-          ? this._buildBubbleIcon(d.properties.counts, this.categoryColorsRgb, this._groupIsolation(d))
-          : this._buildSingleIcon(this.categoryColorsRgb[d.properties.cat], fillOpacity, this._resolveSymbolShape(d.properties), singleBorderColorRgb, singleBorderWidthPx),
-        getSize: d => valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue) * 2,
+        getIcon: d => !singleSymbol(d)
+          ? this._buildBubbleIcon(d.properties.counts, this.categoryColorsRgb, this._groupIsolation(d), Array.isArray(this.style.symbols) ? this.style.symbols : null)
+          : this._buildSingleIcon((this.categoryColorsRgb || [])[d.properties.cat], fillOpacity, shapeOf(d.properties), singleBorderColorRgb, singleBorderWidthPx),
+        getSize: d => vRadius(sizeValueOf(d)) * 2,
         // group icons bake a fixed 0.9 alpha; an explicit fillopacity scales it
         // so a near-transparent theme doesn't show opaque 1-px-cell clusters
-        getColor: d => [255, 255, 255, Math.round(this._iconAlpha(d) * (d.properties.counts && this.style.fillopacity != null ? fillOpacity : 1))],
+        getColor: d => [255, 255, 255, Math.round(this._iconAlpha(d) * (!singleSymbol(d) && this.style.fillopacity != null ? fillOpacity : 1))],
         ...(alignOf.active ? { getPixelOffset: alignOf } : {}),
         sizeUnits: 'pixels',
         billboard: true,
@@ -10959,7 +11535,7 @@
           data: titleData, pickable: false,
           getPosition: b => b.d.geometry.coordinates,
           getText: b => b.title.text,
-          getSize: titleFontPx,
+          getSize: b => b.title.f,
           sizeUnits: 'pixels',
           fontFamily: 'arial',
           characterSet: 'auto',
@@ -10979,23 +11555,29 @@
       // VALUES: bold value label centered on each bubble (see
       // flatValueText/valuesFontSizePx above). Labels are their own
       // layers, added last in the array so they draw on top of every icon
-      // layer (a small bubble's label can still show over a bigger
-      // neighboring bubble's icon — a known, accepted gap). Entries whose
+      // layer; a label under later-drawn charts is faded or dropped by
+      // _occludeChartTexts, as flat's later chart groups cover it. Entries whose
       // computed font size would be sub-pixel are dropped rather than
       // rendered at getSize: 0, matching the real engine's own "too
       // small to bother" gate.
-      if (this.flags.has('VALUES') && !valuesHiddenByScale(this.style, zoom)) {
+      if (valuesShown) {
         const valueScale = styleNum(this.style.valuescale) || 1;
         const textOpts = this._valueTextOpts();
+        const pointValueOf = valueTextOf || this._chartValueTextFn();
 
+        // draw order of each chart (see chartTextTransmittance below); an
+        // item maxcharts left out draws no chart, so no text either
+        const orderOf = new Map(combined.map((d, k) => [d, k]));
         const pointLabels = individual.reduce((out, d) => {
-          const radius = valueRadius(d.properties.value, liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue);
-          // flat's VALUES label prints the value (nValuesA), not the size
-          const text = flatValueText(d.properties.raw, this.binding.title && d.properties.raw ? d.properties.raw[this.binding.title] : undefined,
-            d.properties.classValue !== undefined ? d.properties.classValue : d.properties.value, this.style, this.flags, textOpts);
-          const fontSize = valuesFontSizePx(radius, text, valueScale);
+          if (!orderOf.has(d)) return out;
+          const radius = vRadius(d.properties.value);
+          // flat's VALUES label prints the value (nValuesA), not the size;
+          // its font by flat's chart branch (_chartValueTextFn)
+          const { text, fontSize, bold, baseline } = pointValueOf(d, radius);
           if (fontSize > VALUES_MIN_FONT_PX) {
-            out.push({ geometry: d.geometry, text, fontSize, color: resolveTextColor(this.style, contrastTextColor(this.categoryColorsRgb[d.properties.cat])), pixelOffset: alignOf(d) });
+            const o = alignOf(d);
+            out.push({ geometry: d.geometry, text, fontSize, bold, color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[d.properties.cat])),
+              pixelOffset: baseline ? [o[0], o[1] + baseline - 0.35 * fontSize] : o, order: orderOf.get(d) });
           }
           return out;
         }, []);
@@ -11011,11 +11593,25 @@
         // would misrepresent every category's own count as one summed
         // number nobody's individual bubble actually shows.
         const groupLabels = groups.reduce((out, d) => {
+          if (!orderOf.has(d)) return out;
           const counts = d.properties.counts;
-          const outerRadiusPx = valueRadius(d.properties.total, liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue);
+          const outerRadiusPx = vRadius(d.properties.total);
           const iconSizePx = outerRadiusPx * 2; // matches the cluster IconLayer's own getSize (*2) below
           const pxPerCanvasUnit = iconSizePx / BUBBLE_ICON_SIZE;
           const iso = this._groupIsolation(d);
+          // a range-classed cell is one symbol (see the bubbles layer): its
+          // value text as a single chart's (_chartValueTextFn)
+          if (this._rangeClassed && d.properties.cat != null) {
+            const value = d.properties.classTotal !== undefined ? d.properties.classTotal : d.properties.total;
+            const v = pointValueOf({ properties: { value, cat: d.properties.cat } }, outerRadiusPx);
+            if (v.fontSize > VALUES_MIN_FONT_PX) {
+              const o = alignOf(d);
+              out.push({ geometry: d.geometry, text: v.text, fontSize: v.fontSize, bold: v.bold,
+                color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[d.properties.cat])),
+                pixelOffset: v.baseline ? [o[0], o[1] + v.baseline - 0.35 * v.fontSize] : o, order: orderOf.get(d) });
+            }
+            return out;
+          }
           const { present, radii, offsets, fitScale } = (iso && isolatedBubblePackLayout(counts, BUBBLE_ICON_SIZE, iso)) || computeBubblePackLayout(counts, BUBBLE_ICON_SIZE);
 
           present.forEach((p, i) => {
@@ -11026,14 +11622,25 @@
             if (fontSize > VALUES_MIN_FONT_PX) {
               out.push({
                 geometry: d.geometry, text, fontSize,
-                color: resolveTextColor(this.style, contrastTextColor(this.categoryColorsRgb[p.i])),
-                pixelOffset: [offsets[i].x * fitScale * pxPerCanvasUnit + alignOf(d)[0], offsets[i].y * fitScale * pxPerCanvasUnit + alignOf(d)[1]]
+                color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[p.i])),
+                pixelOffset: [offsets[i].x * fitScale * pxPerCanvasUnit + alignOf(d)[0], offsets[i].y * fitScale * pxPerCanvasUnit + alignOf(d)[1]],
+                order: orderOf.get(d)
               });
             }
           });
           return out;
         }, []);
 
+        // a text under later charts fades by what still shows through them
+        // (chartTextTransmittance), as flat's per-chart SVG groups paint
+        // each later symbol and glow over it; nearly hidden ones are dropped
+        const visible = this._occludeChartTexts(combined, pointLabels.concat(groupLabels), {
+          liveZoom, globeCenter, alignOf, radiusOf, sizeValueOf, singleSymbol, shapeOf, fillOpacity, vRadius,
+          singleBorderWidthPx
+        });
+        const keepVisible = labels => labels.filter(l => visible.has(l));
+        const shownPointLabels = keepVisible(pointLabels), shownGroupLabels = keepVisible(groupLabels);
+
         const textLayerCommonProps = {
           pickable: false,
           getPosition: d => d.geometry.coordinates,
@@ -11043,11 +11650,61 @@
           sizeUnits: 'pixels',
           fontFamily: 'arial',
           fontWeight: 'bold',
+          // the glyphs of the actual texts, not deck's ASCII default — a
+          // unit like " €" (the fuel-price page) is outside it ("Missing
+          // character: €" and no glyph)
+          characterSet: 'auto',
           getTextAnchor: 'middle',
           getAlignmentBaseline: 'center'
         };
-        if (pointLabels.length) layers.push(new TextLayer({ id: `ix-points-values-${this.name}`, data: pointLabels, ...(alignOf.active ? { getPixelOffset: d => d.pixelOffset } : {}), ...textLayerCommonProps }));
-        if (groupLabels.length) layers.push(new TextLayer({ id: `ix-cluster-values-${this.name}`, data: groupLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps }));
+        // flat's SYMBOL branch writes its values in normal weight
+        if (shownPointLabels.length) layers.push(new TextLayer({ id: `ix-points-values-${this.name}`, data: shownPointLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
+          fontWeight: shownPointLabels[0].bold === false ? 'normal' : 'bold' }));
+        if (shownGroupLabels.length) layers.push(new TextLayer({ id: `ix-cluster-values-${this.name}`, data: shownGroupLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
+          fontWeight: shownGroupLabels[0].bold === false ? 'normal' : 'bold' }));
+      }
+
+      // LABEL: flat's chart label (maptheme.js 24533-24590) — a small text
+      // below-right of each chart, the .style({labelfield}) record value
+      // (the fire page's labelfield ANNO: the fire year "2 014"), black at
+      // 0.7 opacity on a white 0.4-opacity rounded background box, font
+      // 5·unit·textscale. Gated by labelupper/labellower (flat's own test
+      // compares <= against BOTH), suppressed by NORMSIZE/ZOOM, a numeric
+      // label formatted like a value (valuedecimals) plus labelunits.
+      if (labelShown) {
+        const labelFontPx = 5 * unitPx * (styleNum(this.style.textscale) || 1);
+        if (labelFontPx > VALUES_MIN_FONT_PX) {
+          const labelData = [];
+          for (const d of individual) {
+            if (!d.properties || !d.properties.raw) continue;
+            // _chartLabelFn: text, and its place below-right of the chart
+            const l = labelOf(d, radiusOf(d));
+            if (!l) continue;
+            const o = alignOf(d);
+            // drawn centered: flat's baseline sits 0.35 font below the
+            // middle of its background box (-0.95 .. +0.25 font)
+            labelData.push({ geometry: d.geometry, text: l.text, fontSize: l.fontSize,
+              pixelOffset: [l.offset[0] + o[0], l.offset[1] - 0.35 * l.fontSize + o[1]] });
+          }
+          if (labelData.length) layers.push(new TextLayer({
+            id: `ix-labels-${this.name}`,
+            data: labelData, pickable: false,
+            getPosition: d => d.geometry.coordinates,
+            getText: d => d.text,
+            getSize: d => d.fontSize,
+            getColor: [0, 0, 0, Math.round(0.7 * 255)],
+            sizeUnits: 'pixels',
+            fontFamily: 'arial',
+            characterSet: 'auto',
+            getTextAnchor: 'middle',
+            getAlignmentBaseline: 'center',
+            getPixelOffset: d => d.pixelOffset,
+            background: true,
+            getBackgroundColor: [255, 255, 255, Math.round(0.4 * 255)],
+            backgroundPadding: [labelFontPx * 0.25, labelFontPx * 0.1],
+            parameters: ICON_LAYER_GLOBE_PARAMETERS
+          }));
+        }
       }
 
       return layers;
@@ -11083,12 +11740,25 @@
     //  - VALUES: each part's value (COUNT: its records; valuefield: the class name)
     //  - align / offsets as the SYMBOL branch: half size the normal radius
     // A part's pick object carries its chart's properties (tooltip).
+    // The same for a per-item chart over several value fields
+    // (_isMultiFieldSequence): a part per field, max value the biggest
+    // field value of any record (normalsizevalue overrides), the part
+    // radius value-scaled as above; a colorscheme "none" part is only its
+    // outline. RINGS nests the parts (ringsLayout); CENTERVALUES prints
+    // only the first part's value (flat: nClass 0, maptheme.js 22216).
     _buildSequenceChartLayers(charts, zoom, liveZoom) {
       const st = this.style;
-      const seqMax = this._sequenceMaxValue(zoom);
-      const partRadius = v => valueRadius(v, liveZoom, st, this.mapOptions, this.flags, seqMax);
+      const multi = !!this._multiFields && this._isMultiFieldSequence();
+      const seqMax = multi ? (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);
+      const rings = flatFlag(this.flags, 'RINGS');
+      const centerValues = flatFlag(this.flags, 'CENTERVALUES');
+      const noFill = this._partNoFill || new Set();
       const nCats = this.categoryLabels ? this.categoryLabels.length : 1;
       const marking = this._markedClasses.size && !this._onMarksChanged;
       const gray = marking && String(st.evidence || 'isolate') === 'isolate_gray';
@@ -11097,11 +11767,13 @@
       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;
-      const shapeOf = i => { const sh = symbols && (symbols[i] || symbols[0]); return /^(circle|square|diamond|triangle)$/.test(sh) ? sh : 'circle'; };
+      const shapeOf = i => { const sh = symbols && (symbols[i] || symbols[0]); return normalizeSymbolShape(sh); };
       const colorOf = i => this.categoryColorsRgb[i] || [128, 128, 128];
       const parts = [], glows = [];
       for (const d of charts) {
-        let layout = sequenceLayout(d.properties.counts, this.flags, partRadius, { maxRadius: normalR, maxValue: seqMax, nParts: nCats, rangeScale: styleNum(st.rangescale) || 0 });
+        const counts = d.properties.parts || d.properties.counts;
+        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
@@ -11155,7 +11827,7 @@
         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), fillOpacity, shapeOf(d.part.i), borderRgb,
+        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,
@@ -11168,20 +11840,22 @@
       // 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
-      if (this.flags.has('VALUES') && !valuesHiddenByScale(st, zoom)) {
+      // 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 = styleNum(st.valuedecimals) || 0;
+        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;
@@ -11241,6 +11915,69 @@
     // the class name (the records' own valuefield value) — otherwise none
     _categoryValueRecord(i) { return categoryValueRecord(this.style, this.binding, this.flags, this.categoryLabels, i); }
 
+    // A single chart's VALUES text: (item, its radius px) → { text,
+    // fontSize, extent } — extent [x0, y0, x1, y1] in px around the chart
+    // center (y down), as the box encloses it. The font by flat's branch:
+    //  - SYMBOL (maptheme.js 22200-22202, 21705-21708): min(1, 3.2 / L)
+    //    (hexagon 2.7) · r · valuescale, L the length of the theme's biggest
+    //    value text (szMaxText: the max value formatted, plus the unit up to
+    //    5 characters, 21479) — normal weight, baseline 0.33 font below the
+    //    center (fire areas SIF chart: r 60, valuescale 3, "7 242 ha" → 72)
+    //  - BUBBLE: valuesFontSizePx, bold, centered
+    _chartValueTextFn() {
+      const valueScale = styleNum(this.style.valuescale) || 1;
+      const textOpts = this._valueTextOpts();
+      const symbol = flatChartBranch(this.flags) === 'symbol';
+      let maxLen = 1;
+      if (symbol) {
+        const vMax = this._valueMax !== undefined ? this._valueMax : (this._valueTextRange || [])[1];
+        if (isFinite(vMax)) maxLen = Math.max(1, flatValueText(null, null, vMax, this.style, this.flags, textOpts).length);
+      }
+      return (d, r) => {
+        const p = d.properties;
+        const text = flatValueText(p.raw, this.binding.title && p.raw ? p.raw[this.binding.title] : undefined,
+          p.classValue !== undefined ? p.classValue : p.value, this.style, this.flags, textOpts);
+        if (!symbol) {
+          const fontSize = valuesFontSizePx(r, text, valueScale);
+          const tw = titleTextWidth(text, fontSize);
+          return { text, fontSize, bold: true, extent: [-tw / 2, -fontSize / 2, tw / 2, fontSize / 2] };
+        }
+        const k = this._resolveSymbolShape(p) === 'hexagon' ? 2.7 : 3.2;
+        const fontSize = Math.min(1, k / maxLen) * r * valueScale;
+        const tw = titleTextWidth(text, fontSize);
+        return { text, fontSize, bold: false, baseline: 0.33 * fontSize,
+          extent: [-tw / 2, (0.33 - 0.905) * fontSize, tw / 2, (0.33 + 0.212) * fontSize] };
+      };
+    }
+
+    // A single chart's LABEL (.style({labelfield}), maptheme.js 24533-24590):
+    // (item, its radius px) → { text, fontSize, offset, extent } or null.
+    // Font 5u · textscale; a number formatted like a value — valuedecimals
+    // when set (flat's nValueDecimals is the raw style string, so "0"
+    // counts), else 2 — plus labelunits. The background box is the wider of
+    // the text and (length + 2) · font / 2, 1.2 font high from 0.95 font
+    // above the baseline; the label sits at (width / 3, font / 3 + the
+    // chart's anchor y: r + 5u). Fire areas page: "2 010" at (116.7, 193.3)
+    // units, box 350 × 120.
+    _chartLabelFn(unitPx) {
+      const f = 5 * unitPx * (styleNum(this.style.textscale) || 1);
+      const dec = explicitValueDecimals(this.style);
+      const { noBreaks } = this._valueTextOpts();
+      const units = String(this.style.labelunits || '');
+      return (d, r) => {
+        const raw = d.properties && d.properties.raw;
+        const v = raw && raw[this.style.labelfield];
+        let text = v == null || v === '' ? '' : String(v);
+        if (!text) return null;
+        const num = parseFloat(text.replace(',', '.'));
+        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;
+        return { text, fontSize: f, offset: [x, y], width,
+          extent: [x - width / 2, y - 0.95 * f, x + width / 2, y + 0.25 * f] };
+      };
+    }
+
     // value-text options (flatValueText): flat's formatValue NOBREAKS for a
     // theme of values within 1000-3000, the max value for the decimals
     _valueTextOpts() {
@@ -11285,6 +12022,67 @@
     //    the item color (stroke font/7, opacity 0.5).
     // Both moved by the chart position (flatChartAlignOffset). The text is
     // the hover target of TEXTONLY, the box of LABEL.
+    // The charts of _buildChartLayers' bubbles layer (and its GLOW / AURA)
+    // as chartTextTransmittance's occluders, in draw order and screen
+    // pixels, and each text's resulting alpha: the text's color gets it,
+    // the returned Set holds the texts still visible. Screen pixels:
+    // Web Mercator world pixels at the live zoom; under globe a local
+    // equal-area frame around the view center at the scale MapLibre's
+    // globe matches Mercator's there (the limb's foreshortening ignored).
+    _occludeChartTexts(combined, texts, o) {
+      const visible = new Set();
+      if (!texts.length) return visible;
+      const toRad = Math.PI / 180;
+      let screenOf;
+      if (o.globeCenter) {
+        const s = 512 * Math.pow(2, o.liveZoom) / 360 / Math.cos(o.globeCenter.lat * toRad);
+        screenOf = c => [(((c[0] - o.globeCenter.lng) % 360 + 540) % 360 - 180) * Math.cos(c[1] * toRad) * s, -c[1] * s];
+      } else {
+        screenOf = c => { const p = lngLatToWorldPixel(c[0], c[1], o.liveZoom); return [p.x, p.y]; };
+      }
+      const glowOn = this.flags.has('GLOW') && !glowHiddenByScale(this.style, o.liveZoom);
+      const auraOn = !glowOn && this.flags.has('AURA') && !this.flags.has('ZOOM');
+      const symbols = Array.isArray(this.style.symbols) ? this.style.symbols : null;
+      const charts = combined.map(d => {
+        const [x, y] = screenOf(d.geometry.coordinates);
+        const a = o.alignOf(d), r = o.radiusOf(d), iconAlpha = this._iconAlpha(d) / 255;
+        let parts;
+        if (o.singleSymbol(d)) {
+          // the icon's shape is inset by half its border (_buildSingleIcon)
+          const shape = o.shapeOf(d.properties);
+          parts = [{ dx: 0, dy: 0, r: r * (1 - o.singleBorderWidthPx / BUBBLE_ICON_SIZE), shape, alpha: o.fillOpacity * iconAlpha }];
+        } else {
+          // _buildBubbleIcon's packed parts, its baked 0.9 alpha scaled by an
+          // explicit fillopacity like the bubbles layer's getColor
+          const counts = d.properties.counts, iso = this._groupIsolation(d);
+          const { present, radii, offsets, fitScale } = (iso && isolatedBubblePackLayout(counts, BUBBLE_ICON_SIZE, iso)) || computeBubblePackLayout(counts, BUBBLE_ICON_SIZE);
+          const px = 2 * r / BUBBLE_ICON_SIZE * fitScale;
+          const alpha = 0.9 * (this.style.fillopacity != null ? o.fillOpacity : 1) * iconAlpha;
+          parts = present.map((p, i) => ({ dx: offsets[i].x * px, dy: offsets[i].y * px, r: radii[i] * px,
+            shape: symbols ? normalizeSymbolShape(symbols[Math.min(p.i, symbols.length - 1)]) : 'circle', alpha }));
+        }
+        if (auraOn) parts.push({ dx: 0, dy: 0, r: r * 1.3, shape: 'circle', alpha: 0.3 * iconAlpha });
+        return {
+          x: x + a[0], y: y + a[1], parts,
+          glowR: glowOn ? o.vRadius(o.sizeValueOf(d)) * (d.properties.counts ? 9 : 11) / 2 : 0,
+          glowAlpha: iconAlpha
+        };
+      });
+      // the text box: Arial digits are ~0.56 em wide, ~0.7 em high
+      const boxes = texts.map(t => {
+        const [x, y] = screenOf(t.geometry.coordinates);
+        return { order: t.order, x: x + t.pixelOffset[0], y: y + t.pixelOffset[1], w: 0.56 * t.fontSize * String(t.text).length, h: 0.7 * t.fontSize };
+      });
+      const shown = chartTextTransmittance(charts, boxes);
+      texts.forEach((t, i) => {
+        if (shown[i] < CHART_TEXT_MIN_TRANSMITTANCE) return;
+        const c = t.color || [0, 0, 0];
+        if (shown[i] < 1) t.color = [c[0], c[1], c[2], Math.round((c[3] != null ? c[3] : 255) * shown[i])];
+        visible.add(t);
+      });
+      return visible;
+    }
+
     _buildLabelChartLayers(combined, zoom, liveZoom, sizeValueOf) {
       const textOnly = this.flags.has('TEXTONLY');
       const showValues = this.flags.has('VALUES') && !valuesHiddenByScale(this.style, zoom);
@@ -11431,14 +12229,28 @@
   // DOWN, confirmed against a real ported page's own comment ("il motore
   // disegna il triangolo con la punta in basso" — "the engine draws the
   // triangle with the tip at the bottom").
+  // flat's symbol shapes (maptheme.js 21625-21680). Geometry follows flat
+  // where GL didn't have an established shape already (square, diamond,
+  // triangle keep GL's own proportions — pages already shipped with them):
+  //   roundrect — rect 1.6r, rounded 0.3r; label — wide flat rect 1.6r×0.8r;
+  //   carot — flat's alias of diamond; hexagon — vertices (±r,0),(±r/2,±r·sin60°);
+  //   cross — flat's 8-arm path (A=0.4r, B=0.8r); empty — the circle
+  //   geometry, but _buildSingleIcon gives it flat's transparent fill +
+  //   gray stroke (fill-opacity:0, stroke #888888)
   function drawSymbolPath(ctx, shape, cx, cy, r) {
     switch (shape) {
+      // flat's per-part SYMBOL square (maptheme.js 22037): side 2r — with
+      // GRIDSIZE the whole cell (the fuel-price grid, contiguous squares)
+      case 'squarefull':
+        ctx.rect(cx - r, cy - r, 2 * r, 2 * r);
+        break;
       case 'square': {
         const s = r * Math.SQRT2;
         ctx.rect(cx - s / 2, cy - s / 2, s, s);
         break;
       }
       case 'diamond':
+      case 'carot': // flat: carot and diamond are the same rotated rect
         ctx.moveTo(cx, cy - r);
         ctx.lineTo(cx + r, cy);
         ctx.lineTo(cx, cy + r);
@@ -11449,10 +12261,58 @@
         ctx.lineTo(cx + r, cy - r * 0.6);
         ctx.lineTo(cx, cy + r);
         break;
+      case 'roundrect': {
+        const s = 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;
+      }
+      case 'label': {
+        const w = r * 0.8, h = r * 0.4;
+        ctx.rect(cx - w, cy - h, w * 2, h * 2);
+        break;
+      }
+      case 'hexagon': {
+        const A = r / 2, B = r * Math.sin(Math.PI / 3);
+        ctx.moveTo(cx - r, cy);
+        ctx.lineTo(cx - A, cy - B);
+        ctx.lineTo(cx + A, cy - B);
+        ctx.lineTo(cx + r, cy);
+        ctx.lineTo(cx + A, cy + B);
+        ctx.lineTo(cx - A, cy + B);
+        break;
+      }
+      case 'cross': {
+        // flat's own path, vertex for vertex: a plus of arm thickness A
+        // reaching to ±(B + A/2) (maptheme.js 21652-21655)
+        const A = r * 0.4, B = r * 0.8, E = B + A / 2;
+        ctx.moveTo(cx, cy - E);
+        ctx.lineTo(cx + A / 2, cy - E);
+        ctx.lineTo(cx + A / 2, cy - A / 2);
+        ctx.lineTo(cx + E, cy - A / 2);
+        ctx.lineTo(cx + E, cy + A / 2);
+        ctx.lineTo(cx + A / 2, cy + A / 2);
+        ctx.lineTo(cx + A / 2, cy + E);
+        ctx.lineTo(cx - A / 2, cy + E);
+        ctx.lineTo(cx - A / 2, cy + A / 2);
+        ctx.lineTo(cx - E, cy + A / 2);
+        ctx.lineTo(cx - E, cy - A / 2);
+        ctx.lineTo(cx - A / 2, cy - A / 2);
+        ctx.lineTo(cx - A / 2, cy - E);
+        break;
+      }
+      case 'empty':
       default: // circle
         ctx.arc(cx, cy, r, 0, Math.PI * 2);
     }
   }
+  // the shape names flat's szSymbol switch knows (maptheme.js 21625) —
+  // anything else falls back to circle, never silently dropped
+  const SYMBOL_SHAPE_RE = /^(circle|square|diamond|triangle|roundrect|carot|hexagon|cross|empty|label)$/;
+  function normalizeSymbolShape(name) {
+    const n = String(name || '').toLowerCase();
+    return SYMBOL_SHAPE_RE.test(n) ? n : 'circle';
+  }
 
   // a color's own opacity, 0..1, as SVG paints it in flat: "none" (SVG's
   // no paint — a polygon with only its outline, or a class not painted)
@@ -11586,7 +12446,7 @@
   // map named by szMap (its Map() options name) or, without a name, the
   // last built map; called while the map is still building, they run once
   // it is ready.
-  const MAP_HANDLE_METHODS = ['replace', 'add', 'remove', 'removeTheme', 'replaceTheme', 'changeThemeStyle', 'setThemeStyle',
+  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'];
   const _mapHandles = Object.create(null);
   function makeMapHandle(szMap) {
@@ -12251,6 +13111,8 @@
     htmlgui_getAttributionString: () => (_lastMapApi && _lastMapApi.getAttribution ? _lastMapApi.getAttribution() : ''),
     changeThemeStyle: compatChangeThemeStyle,
     removeTheme: compatRemoveTheme,
+    // flat's ixmaps.newTheme(title, theme, flag) — on the last built map
+    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),
     setBasemapOpacity: compatSetBasemapOpacity,
@@ -12277,7 +13139,7 @@
   // 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, youtubeClickToPlay, symbolsFlagCompat, tooltipTable, legendRowLabels, scaleDenom, cssColorAlpha, aggregatedCategoricalClass, dominantDopacityAlpha, isAggregatedCategoricalChoropleth, computeBubblePackLayout, isolatedBubblePackLayout, sequenceLayout, multiQuadOffsets, pixelOffsetLngLat,
+    IXMAPS_GL_VERSION, youtubeClickToPlay, symbolsFlagCompat, tooltipTable, legendRowLabels, scaleDenom, cssColorAlpha, aggregatedCategoricalClass, dominantDopacityAlpha, isAggregatedCategoricalChoropleth, computeBubblePackLayout, isolatedBubblePackLayout, chartTextTransmittance, glowProfileAlpha, insideSymbolShape, sequenceLayout, ringsLayout, multiQuadOffsets, pixelOffsetLngLat,
     normalizeTheme, projectThemeToDefinition, withoutProjectCode, groupRecordCount, resolveBasemapStyleUrl, resolveMapTypeColor, LayerBuilder, LayerRuntime, MapBuilder, typeStyleNumbers, styleNum,
     resolveScriptUrl, isTrustedScriptUrl, loadProcessingScript, loadBrokerData, applyBrokerThemePatch, makeBrokerTheme,
     equalIntervalBreaks, quantileBreaks, naturalBreaks, evenStrideSample, jenksBreakValues, partsFromBreakValues, resolvePartsClass,
@@ -12287,7 +13149,8 @@
     flatToMapLibreZoom, mapLibreToFlatZoom, 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, flatChartTextRgb, flatGroupedValue, flatNoBreaks, featuresHiddenByScale, boxHiddenByScale, flatShadowOn, snapToAggregationGrid,
-    flatFormatValue, themeStyleArgs,
+    drawSymbolPath, normalizeSymbolShape,
+    flatFormatValue, themeStyleArgs, flatChangedStyleValue, explicitValueDecimals, legendDecimals,
     dataCacheKey, dataCacheDisabled, cachedLayerData, featuresBounds, wantsZoomToExtent, legendIsOn,
   };
   global.__setFilter = __setFilter;