mnfst 0.5.158 → 0.5.160

package/lib/manifest.chart.css

@@ -73,7 +73,7 @@
             stroke-width: 1.5;
             transition: r var(--transition-duration, .1s) ease;
 
-            &:hover {
+            &:not(.map-point):hover {
                 r: 5
             }
         }
@@ -142,6 +142,37 @@
             pointer-events: none
         }
 
+        /* Timeline / Gantt */
+        & rect.gantt-segment {
+            fill: var(--color-chart-color, var(--color-chart-1));
+            transition: opacity var(--transition-duration, .1s) ease;
+
+            &:hover {
+                opacity: 0.82
+            }
+        }
+
+        & rect.gantt-point {
+            fill: var(--color-chart-color, var(--color-content-stark, oklch(20.5% 0 0)))
+        }
+
+        & text.gantt-track {
+            fill: var(--color-chart-label);
+            font-size: 0.75rem
+        }
+
+        /* Reference marker */
+        & line.gantt-marker {
+            stroke: var(--color-chart-color, var(--color-content-subtle, oklch(55.6% 0 0)));
+            stroke-width: 1.5;
+            stroke-dasharray: 3 3
+        }
+
+        & text.gantt-marker-label {
+            fill: var(--color-chart-color, var(--color-content-subtle, oklch(55.6% 0 0)));
+            font-size: 0.625rem
+        }
+
         /* Value labels drawn on/above segments */
         & text.value {
             fill: var(--color-content-stark, oklch(20.5% 0 0));
@@ -158,8 +189,32 @@
             }
         }
 
-        /* Heatmap cell — fill interpolates between the two heat tokens by the
-           per-cell --heat percentage (0% = low, 100% = high) */
+        /* World map city / point markers */
+        & circle.map-point {
+            fill: var(--color-chart-color, var(--color-accent-content, oklch(20.5% 0 0)));
+            stroke: var(--color-page, oklch(98.5% 0 0));
+            stroke-width: 1;
+            fill-opacity: 0.82;
+            transition: opacity var(--transition-duration, .1s) ease;
+
+            &:hover {
+                opacity: 0.82
+            }
+        }
+
+        /* World map regions */
+        & path.map-region {
+            fill: var(--color-chart-color, var(--color-surface-2, color-mix(in oklch, oklch(20.5% 0 0) 8%, transparent)));
+            stroke: var(--color-page, oklch(98.5% 0 0));
+            stroke-width: 0.4;
+            transition: opacity var(--transition-duration, .1s) ease;
+
+            &:hover {
+                opacity: 0.82
+            }
+        }
+
+        /* Heatmap cell */
         & rect.heat-cell {
             fill: color-mix(in oklch, var(--color-chart-heat-high, var(--color-chart-1)) var(--heat, 0%), var(--color-chart-heat-low, var(--color-surface-2)));
             transition: opacity var(--transition-duration, .1s) ease;
@@ -169,7 +224,7 @@
             }
         }
 
-        /* Legend — <footer> sibling below the SVG; <span> items, <i> swatches */
+        /* Legend */
         & footer {
             display: flex;
             flex-flow: row wrap;
@@ -194,9 +249,7 @@
             }
         }
 
-        /* Heatmap gradient legend — low label, ramp bar (spans the grid), high
-           label. Footer is padded to the chart margins in JS so the bar aligns
-           with the columns. */
+        /* Heatmap gradient legend */
         & footer.heat-legend {
             flex-wrap: nowrap;
             gap: 0.5rem;
@@ -209,8 +262,7 @@
             }
         }
 
-        /* Cursor-following tooltip — chrome comes from manifest.tooltip.css
-           (.tooltip); only the pointer-tracking positioning lives here */
+        /* Cursor-following tooltip */
         & .tooltip {
             position: absolute;
             left: 0;

package/lib/manifest.charts.js

@@ -68,6 +68,18 @@
 
 	const SVGNS = 'http://www.w3.org/2000/svg';
 
+	// Lazy localized country names per locale (i18n-iso-countries, keyed by
+	// alpha-2). Falls back to {} (English atlas names) if a locale isn't covered.
+	const _namePacks = {}, _namePackPromise = {};
+	function loadCountryNames(locale) {
+		if (_namePacks[locale]) return Promise.resolve(_namePacks[locale]);
+		if (_namePackPromise[locale]) return _namePackPromise[locale];
+		_namePackPromise[locale] = fetch('https://cdn.jsdelivr.net/npm/i18n-iso-countries@7/langs/' + locale + '.json')
+			.then(r => r.json()).then(d => (_namePacks[locale] = d.countries || {}))
+			.catch(() => (_namePacks[locale] = {}));
+		return _namePackPromise[locale];
+	}
+
 	/* ---- Lazy-load d3 micro-modules once ---------------------------- */
 	let d3Promise = null;
 	function loadD3() {
@@ -87,6 +99,42 @@
 
 	const prefersReducedMotion = () => { try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (_) { return false; } };
 
+	// Reconcile the ~20 Natural Earth atlas names that differ from the
+	// country-by-continent source so every rendered country lands in a continent.
+	const _norm = s => String(s || '').toLowerCase().replace(/\./g, '').replace(/\s+/g, ' ').trim();
+	const ATLAS_CONT = { 'fiji': 'Oceania', 'w sahara': 'Africa', 'united states of america': 'North America', 'dem rep congo': 'Africa', 'dominican rep': 'North America', 'falkland is': 'South America', 'fr s antarctic lands': 'Antarctica', 'timor-leste': 'Asia', "côte d'ivoire": 'Africa', 'central african rep': 'Africa', 'eq guinea': 'Africa', 'solomon is': 'Oceania', 'taiwan': 'Asia', 'czechia': 'Europe', 'n cyprus': 'Asia', 'somaliland': 'Africa', 'bosnia and herz': 'Europe', 'macedonia': 'Europe', 'kosovo': 'Europe', 's sudan': 'Africa' };
+
+	/* ---- World map: lazy-load d3-geo + topojson + reference data ----
+	   Geometry (world-atlas) plus ISO codes (i18n-iso-countries) and
+	   continent membership (country-json) — all third-party CDN, fetched
+	   once and indexed onto `geo.meta`. No geographic tables are bundled. */
+	let geoPromise = null;
+	function loadGeo() {
+		if (window.__manifestGeo) return Promise.resolve(window.__manifestGeo);
+		if (geoPromise) return geoPromise;
+		geoPromise = Promise.all([
+			import('https://esm.run/d3-geo@3'),
+			import('https://esm.run/topojson-client@3'),
+			fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then(r => r.json()),
+			fetch('https://cdn.jsdelivr.net/npm/i18n-iso-countries@7/codes.json').then(r => r.json()),
+			fetch('https://cdn.jsdelivr.net/npm/country-json/src/country-by-continent.json').then(r => r.json())
+		]).then(([geo, topo, world, codes, contList]) => {
+			const a2 = {}, a3 = {}, num2a2 = {};
+			codes.forEach(c => { const n = Number(c[2]); if (!n) return; a2[c[0]] = n; a3[c[1]] = n; num2a2[n] = c[0]; });
+			const nameToCont = {}; contList.forEach(r => { nameToCont[_norm(r.country)] = r.continent; });
+			const members = {}, idToCont = {};
+			(world.objects.countries.geometries || []).forEach(gm => {
+				const id = Number(gm.id), nm = _norm(gm.properties && gm.properties.name);
+				const cont = nameToCont[nm] || ATLAS_CONT[nm];
+				if (cont) { idToCont[id] = cont; (members[cont] = members[cont] || []).push(id); }
+			});
+			const g = { ...geo, topojson: topo, world, meta: { a2, a3, num2a2, members, idToCont } };
+			window.__manifestGeo = g;
+			return g;
+		}).catch((err) => { geoPromise = null; throw err; });
+		return geoPromise;
+	}
+
 	function initializeChartsPlugin() {
 		const Alpine = window.Alpine;
 		const _registry = Alpine.reactive ? Alpine.reactive({}) : {};
@@ -116,6 +164,19 @@
 		/* ---- Config normalization ----------------------------------- */
 		function num(v, d) { const n = Number(v); return isNaN(n) ? d : n; }
 
+		// Timeline values: Date → ms, number → as-is, string → parsed date (or
+		// numeric fallback). NaN when absent.
+		function toTime(v) {
+			if (v == null) return NaN;
+			if (v instanceof Date) return v.getTime();
+			if (typeof v === 'number') return v;
+			const t = Date.parse(v);
+			return isNaN(t) ? Number(v) : t;
+		}
+		function chartLocale() {
+			try { return Alpine.store('locale')?.current || document.documentElement.lang || 'en'; } catch (_) { return 'en'; }
+		}
+
 		function configFromDom(el) {
 			// Declarative authoring: <figure x-chart.line><data series="Revenue" :values="..."></data></figure>
 			const cfg = { series: [], labels: [] };
@@ -150,10 +211,13 @@
 			cfg.gap = num(cfg.gap, 1);               // heatmap tile gutter in px
 			cfg.labels = Array.isArray(cfg.labels) ? cfg.labels : [];
 
-			// Series may be omitted in favor of a single `data` array.
-			if (!cfg.series && cfg.data) cfg.series = [{ name: cfg.name || '', data: cfg.data }];
+			// Series may be omitted in favor of a single `data` array. (A map's
+			// `data` is a region→value object, left untouched for drawMap.)
+			if (!cfg.series && Array.isArray(cfg.data) && cfg.type !== 'map') cfg.series = [{ name: cfg.name || '', data: cfg.data }];
 			if (!Array.isArray(cfg.series)) cfg.series = [];
 
+			if (cfg.type === 'map') cfg.map = cfg.map || 'world';
+
 			// Pie/donut: accept [{label,value}] in data.
 			if ((cfg.type === 'pie' || cfg.type === 'donut') && cfg.series.length) {
 				const s = cfg.series[0];
@@ -163,6 +227,14 @@
 				}
 			}
 
+			// Gantt: series are tracks of time/numeric/category segments.
+			// (`timeline` accepted as a legacy alias.)
+			if (cfg.type === 'gantt' || cfg.type === 'timeline') {
+				cfg.type = 'gantt';
+				cfg.rowHeight = num(cfg.rowHeight, 28);
+				cfg.markers = Array.isArray(cfg.markers) ? cfg.markers : [];
+			}
+
 			// Gauge: a single value, from `value` or the first series datum.
 			if (cfg.type === 'gauge') {
 				if (cfg.value != null && !cfg.series.length) cfg.series = [{ data: [num(cfg.value, 0)] }];
@@ -285,7 +357,28 @@
 			const cfg = state.config; const d3 = state.d3; const el = state.el;
 			if (!cfg || !d3) return;
 			const width = Math.max(120, el.clientWidth || el.getBoundingClientRect().width || 600);
-			const height = cfg.height;
+
+			// Maps have their own data shape, async geo deps, and aspect-based
+			// height — handled before the cartesian/series path.
+			if (cfg.type === 'map') {
+				el.innerHTML = ''; probePalette(el);
+				const geo = window.__manifestGeo;
+				if (!geo) {
+					el.style.minHeight = (cfg.height || 320) + 'px';
+					loadGeo().then(() => state.schedule()).catch(() => state.renderError('Map data failed to load.'));
+					return;
+				}
+				_suppressAnim = !!state._drawn; state._drawn = true;
+				const mh = cfg.height || Math.round(width * 0.52);
+				el.style.minHeight = mh + 'px';
+				const mroot = svg('svg', { viewBox: `0 0 ${width} ${mh}`, width: '100%', height: String(mh), role: 'img', 'aria-label': cfg.title || 'map', preserveAspectRatio: 'xMidYMid meet' }, el);
+				drawMap(state, mroot, width, mh, geo);
+				return;
+			}
+
+			// Gantt sizes by track count, not a fixed height.
+			const height = cfg.type === 'gantt' ? ganttHeight(cfg) : cfg.height;
+			if (cfg.type === 'gantt') el.style.minHeight = height + 'px';
 
 			el.innerHTML = '';
 			probePalette(el);
@@ -304,9 +397,16 @@
 			if (cfg.type === 'pie' || cfg.type === 'donut') drawPie(state, root, width, height);
 			else if (cfg.type === 'gauge') drawGauge(state, root, width, height);
 			else if (cfg.type === 'heatmap') drawHeatmap(state, root, width, height);
+			else if (cfg.type === 'gantt') drawGantt(state, root, width, height);
 			else drawCartesian(state, root, width, height);
 		}
 
+		// Gantt height derives from track count (one lane per series) + axis.
+		function ganttHeight(cfg) {
+			const n = Math.max(1, (cfg.series || []).length);
+			return 4 + n * cfg.rowHeight + 22;
+		}
+
 		// Palette size is CSS-driven: count consecutive --color-chart-N custom
 		// properties (themes can extend past 8 by defining --color-chart-9, …);
 		// segment colours cycle through however many exist. Re-probed per draw
@@ -671,6 +771,261 @@
 			state.el.appendChild(footer);
 		}
 
+		// Gantt — each series is a track (row); its data is an array
+		// of `{ from, to, status?, label?, color? }` segments on a shared X axis.
+		// The axis adapts to the data: numbers → linear (0–10, distance, %),
+		// date-ish values → time, other strings → category (ordinal stages). A
+		// segment with no `to` is a point marker. Single track = a status strip;
+		// many tracks = swimlanes / Gantt.
+		function drawGantt(state, root, width, height) {
+			const cfg = state.config, d3 = state.d3;
+			const tracks = cfg.series;
+			const trackName = (t, i) => t.name || String(i + 1);
+			const showLabels = cfg.axis;
+			const unit = cfg.unit || '';
+			const m = { top: 4, right: 10, bottom: 22, left: showLabels ? 92 : 8 };
+			const iw = width - m.left - m.right;
+			const ih = height - m.top - m.bottom;
+
+			// Axis kind from the first segment's `from`.
+			let firstFrom;
+			for (const t of tracks) { if (t.data && t.data.length) { firstFrom = t.data[0].from; break; } }
+			const mode = (firstFrom instanceof Date) ? 'time'
+				: typeof firstFrom === 'number' ? 'numeric'
+					: (!isNaN(Date.parse(firstFrom)) ? 'time' : 'category');
+
+			let x, ticks, fmt, pos;
+			if (mode === 'category') {
+				const seen = [];
+				tracks.forEach(t => (t.data || []).forEach(s => [s.from, s.to].forEach(v => { if (v != null && seen.indexOf(String(v)) < 0) seen.push(String(v)); })));
+				const domain = (cfg.labels && cfg.labels.length) ? cfg.labels.map(String) : seen;
+				x = d3.scalePoint().domain(domain).range([0, iw]);
+				pos = v => x(String(v));
+				ticks = domain;
+				fmt = v => String(v);
+			} else {
+				const conv = mode === 'time' ? toTime : (v => num(v, 0));
+				let dmin = Infinity, dmax = -Infinity;
+				tracks.forEach(t => (t.data || []).forEach(s => {
+					const a = conv(s.from), b = conv(s.to != null ? s.to : s.from);
+					if (a < dmin) dmin = a; if (b > dmax) dmax = b;
+				}));
+				if (cfg.min != null) dmin = conv(cfg.min);
+				if (cfg.max != null) dmax = conv(cfg.max);
+				if (!isFinite(dmin) || !isFinite(dmax) || dmin === dmax) { dmin = 0; dmax = 1; }
+				x = (mode === 'time' ? d3.scaleTime() : d3.scaleLinear()).domain([dmin, dmax]).range([0, iw]);
+				pos = v => x(conv(v));
+				ticks = x.ticks(Math.max(2, Math.floor(iw / 80)));
+				fmt = mode === 'time' ? ganttFmt(dmin, dmax) : (v => String(v) + unit);
+			}
+			const tipVal = v => mode === 'time' ? fmt(toTime(v)) : String(v) + (mode === 'numeric' ? unit : '');
+
+			const lane = ih / Math.max(1, tracks.length);
+			const pad = Math.min(6, lane * 0.18);
+			const plot = svg('g', { transform: `translate(${m.left},${m.top})` }, root);
+
+			// Grid lines + axis ticks (shared, at the bottom).
+			ticks.forEach(tk => {
+				const xx = pos(tk);
+				if (xx == null || isNaN(xx)) return;
+				if (cfg.grid) svg('line', { x1: xx, x2: xx, y1: 0, y2: ih }, plot);
+				text(plot, fmt(tk), { x: xx, y: ih + 14, 'text-anchor': 'middle' });
+			});
+
+			// Status → colour, stable across tracks. A per-segment `color` wins;
+			// else the config `colors` map; else the palette in first-seen order.
+			const statusColors = {}; let next = 0;
+			const colorFor = (s) => {
+				if (s.color) return s.color;
+				if (s.status == null) return seriesColorVar(0);
+				if (!(s.status in statusColors)) statusColors[s.status] = (cfg.colors && cfg.colors[s.status]) || seriesColorVar(next++);
+				return statusColors[s.status];
+			};
+
+			tracks.forEach((t, ti) => {
+				const y0 = ti * lane, by = y0 + pad, bh = Math.max(0, lane - pad * 2);
+				if (showLabels) text(plot, trackName(t, ti), { class: 'gantt-track', x: -8, y: y0 + lane / 2, 'text-anchor': 'end', 'dominant-baseline': 'central' });
+				(t.data || []).forEach(s => {
+					const x1 = pos(s.from);
+					if (x1 == null || isNaN(x1)) return;
+					const x2 = s.to != null ? pos(s.to) : x1;
+					const color = colorFor(s);
+					const label = s.status != null ? s.status : (s.label || '');
+					if (!(x2 > x1)) {
+						const pt = svg('rect', { class: 'gantt-point', x: x1 - 1.5, y: by, width: 3, height: bh, style: `--color-chart-color:${color}` }, plot);
+						applyTip(pt, (t.name ? t.name + ' · ' : '') + label + ' · ' + tipVal(s.from), cfg);
+						return;
+					}
+					const seg = svg('rect', { class: 'gantt-segment', x: x1, y: by, width: Math.max(1, x2 - x1), height: bh, style: `--color-chart-color:${color}` }, plot);
+					applyTip(seg, (t.name ? t.name + ' · ' : '') + label + ' · ' + tipVal(s.from) + ' – ' + tipVal(s.to), cfg);
+					animate(seg, [{ opacity: 0 }, { opacity: 1 }], { duration: 300, delay: ti * 30 });
+					if (cfg.dataLabels && label && (x2 - x1) > 26) dataLabel(plot, label, (x1 + x2) / 2, y0 + lane / 2, 'middle', 'central', 'inverse');
+				});
+			});
+
+			// Reference markers (e.g. a "now" line).
+			cfg.markers.forEach(mk => {
+				const xx = pos(mk.at);
+				if (!(xx >= 0 && xx <= iw)) return;
+				svg('line', { class: 'gantt-marker', x1: xx, x2: xx, y1: 0, y2: ih, style: mk.color ? `--color-chart-color:${mk.color}` : '' }, plot);
+				if (mk.label) text(plot, mk.label, { class: 'gantt-marker-label', x: xx, y: -1, 'text-anchor': 'middle' });
+			});
+
+			// Status legend (categorical), when more than one is present.
+			const statuses = Object.keys(statusColors);
+			if (cfg.legend && statuses.length > 1) drawSwatchLegend(state, statuses.map(name => ({ name, color: statusColors[name] })));
+		}
+
+		// Axis/tooltip date formatter sized to the visible span.
+		function ganttFmt(dmin, dmax) {
+			const DAY = 86400000, span = dmax - dmin;
+			const opts = span <= 2 * DAY ? { hour: '2-digit', minute: '2-digit' }
+				: span <= 120 * DAY ? { month: 'short', day: 'numeric' }
+					: { month: 'short', year: 'numeric' };
+			let f; try { f = new Intl.DateTimeFormat(chartLocale(), opts); } catch (_) { f = null; }
+			return v => f ? f.format(new Date(v)) : new Date(v).toISOString().slice(0, 16);
+		}
+
+		/* ---- World map (choropleth) --------------------------------- */
+		// Resolve an author key to country numeric id(s): numeric ISO, alpha-2,
+		// alpha-3, continent (name or code → all members), or country name (atlas
+		// names + a few common aliases). Returns [] when unresolved.
+		const _mapAlias = { 'united states': 'united states of america', usa: 'united states of america', 'u.s.': 'united states of america', uk: 'united kingdom', 'great britain': 'united kingdom', russia: 'russia', czechia: 'czechia', 'czech republic': 'czechia', 'south korea': 'south korea', 'north korea': 'north korea', 'dr congo': 'dem. rep. congo', 'democratic republic of the congo': 'dem. rep. congo', tanzania: 'tanzania', bolivia: 'bolivia', laos: 'laos' };
+		const _contAlias = { 'n. america': 'north america', 'n america': 'north america', 's. america': 'south america', 's america': 'south america' };
+		let _nameIdx = null;
+		function nameIndex(geo) {
+			if (_nameIdx) return _nameIdx;
+			_nameIdx = {};
+			geo.world.objects.countries.geometries.forEach(g => { if (g.properties && g.properties.name) _nameIdx[String(g.properties.name).toLowerCase()] = Number(g.id); });
+			Object.keys(_mapAlias).forEach(a => { const id = _nameIdx[_mapAlias[a]]; if (id != null) _nameIdx[a] = id; });
+			return _nameIdx;
+		}
+		function resolveRegion(key, geo) {
+			const k = String(key).trim(); if (!k) return { kind: '', ids: [] };
+			if (/^\d+$/.test(k)) return { kind: 'country', ids: [Number(k)] };
+			const meta = geo.meta || {}, up = k.toUpperCase(), low = k.toLowerCase();
+			if (k.length === 2 && meta.a2 && meta.a2[up] != null) return { kind: 'country', ids: [meta.a2[up]] };
+			if (k.length === 3 && meta.a3 && meta.a3[up] != null) return { kind: 'country', ids: [meta.a3[up]] };
+			const members = meta.members || {};
+			const cont = Object.keys(members).find(c => c.toLowerCase() === (_contAlias[low] || low));
+			if (cont) return { kind: 'continent', code: cont, ids: members[cont] };
+			const id = nameIndex(geo)[low];
+			return id != null ? { kind: 'country', ids: [id] } : { kind: '', ids: [] };
+		}
+
+		// Choropleth: country (or continent-grouped) regions coloured sequentially
+		// (numeric values → heat ramp) or categorically (string values → palette).
+		function drawMap(state, root, width, height, geo) {
+			const cfg = state.config;
+			const fc = geo.topojson.feature(geo.world, geo.world.objects.countries);
+			const projection = geo.geoNaturalEarth1().fitSize([width, height], fc);
+			const path = geo.geoPath(projection);
+
+			// Author data: an object { key: value } or an array of { id|code|name, value } / [key, value].
+			let entries = [];
+			if (Array.isArray(cfg.data)) entries = cfg.data.map(d => Array.isArray(d) ? [d[0], d[1]] : [d.id != null ? d.id : (d.code != null ? d.code : d.name), d.value]);
+			else if (cfg.data && typeof cfg.data === 'object') entries = Object.entries(cfg.data);
+
+			const valueById = {};
+			entries.forEach(([key, val]) => resolveRegion(key, geo).ids.forEach(id => { valueById[id] = val; }));
+
+			// Display-name resolution: `_ui.map.regions` override → localized
+			// pack (per $locale) → English atlas name. Async packs trigger a
+			// redraw when they arrive.
+			const num2a2 = (geo.meta && geo.meta.num2a2) || {};
+			const locale = chartLocale();
+			const ui = (window.ManifestUI && window.ManifestUI.resolve) ? window.ManifestUI.resolve('map', {}) : {};
+			const overrides = ui.regions || {};
+			let pack = null;
+			if (locale && locale !== 'en') { if (_namePacks[locale]) pack = _namePacks[locale]; else loadCountryNames(locale).then(() => state.schedule()); }
+			const displayName = (id, eng) => {
+				const a2 = num2a2[id];
+				if (a2 != null && overrides[a2] != null) return overrides[a2];
+				if (overrides[id] != null) return overrides[id];
+				if (overrides[String(id)] != null) return overrides[String(id)];
+				if (overrides[eng] != null) return overrides[eng];
+				if (pack && a2 && pack[a2]) return pack[a2];
+				return eng;
+			};
+
+			// Author-supplied place gazetteer (config `places` or `_ui.map.cities`)
+			// for resolving point names → coords. No city data is bundled; authors
+			// source it from a third-party library in their own project.
+			const placesSrc = cfg.places || ui.cities || null;
+			let places = null;
+			if (placesSrc) { places = {}; Object.keys(placesSrc).forEach(k => { places[k.toLowerCase()] = placesSrc[k]; }); }
+
+			// Sequential when every value is numeric, else categorical.
+			const vals = entries.map(e => e[1]);
+			const numeric = vals.length > 0 && vals.every(v => typeof v === 'number' || (typeof v === 'string' && v.trim() !== '' && !isNaN(+v)));
+			let lo = Infinity, hi = -Infinity;
+			if (numeric) { Object.values(valueById).forEach(v => { const n = +v; if (n < lo) lo = n; if (n > hi) hi = n; }); if (!isFinite(lo)) { lo = 0; hi = 1; } if (lo === hi) hi = lo + 1; }
+			const palette = {}; let pIdx = 0;
+
+			const plot = svg('g', {}, root);
+			fc.features.forEach(f => {
+				const id = Number(f.id), v = valueById[id];
+				const region = svg('path', { class: 'map-region', d: path(f) }, plot);
+				const name = displayName(id, (f.properties && f.properties.name) || String(id));
+				if (v != null && v !== '') {
+					if (numeric) { const t = Math.round((+v - lo) / (hi - lo) * 100); region.setAttribute('style', `--color-chart-color:color-mix(in oklch, var(--color-chart-heat-high) ${t}%, var(--color-chart-heat-low))`); }
+					else { if (!(v in palette)) palette[v] = seriesColorVar(pIdx++); region.setAttribute('style', `--color-chart-color:${palette[v]}`); }
+					applyTip(region, name + ': ' + v, cfg);
+					animate(region, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 });
+				} else {
+					applyTip(region, name, cfg);
+				}
+			});
+
+			// City / point markers (proportional symbols) — projected through the
+			// same projection. `points: [{ lat, lng, value?, label?, color? }]`.
+			const pts = Array.isArray(cfg.points) ? cfg.points : [];
+			if (pts.length) {
+				const coord = (p) => {
+					let lat = p.lat != null ? p.lat : p.latitude;
+					let lng = p.lng != null ? p.lng : (p.lon != null ? p.lon : (p.long != null ? p.long : p.longitude));
+					if ((lat == null || lng == null) && places) {
+						const hit = places[String(p.city || p.name || '').toLowerCase()];
+						if (hit) { if (Array.isArray(hit)) { lat = hit[0]; lng = hit[1]; } else { lat = hit.lat; lng = hit.lng; } }
+					}
+					return (lat == null || lng == null) ? null : [+lng, +lat];
+				};
+				const pv = pts.map(p => p.value);
+				const sized = pv.length > 0 && pv.every(v => typeof v === 'number');
+				let pmin = Infinity, pmax = -Infinity;
+				if (sized) { pv.forEach(v => { if (v < pmin) pmin = v; if (v > pmax) pmax = v; }); if (!isFinite(pmin)) { pmin = 0; pmax = 1; } if (pmin === pmax) pmax = pmin + 1; }
+				const rOf = (v) => sized ? 3 + Math.sqrt((+v - pmin) / (pmax - pmin)) * 13 : 4;
+				pts.forEach(p => {
+					const c = coord(p), xy = c && projection(c);
+					if (!xy) return;
+					const label = p.label || p.city || p.name || '';
+					const dot = svg('circle', { class: 'map-point', cx: xy[0], cy: xy[1], r: rOf(p.value), style: p.color ? `--color-chart-color:${p.color}` : '' }, plot);
+					applyTip(dot, label + (p.value != null ? (label ? ': ' : '') + p.value : ''), cfg);
+					animate(dot, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 });
+				});
+			}
+
+			if (cfg.legend) {
+				if (numeric) drawHeatLegend(state, Math.round(lo), Math.round(hi), { left: 8, right: 8 });
+				else if (entries.length) { const items = Object.keys(palette).map(name => ({ name, color: palette[name] })); if (items.length) drawSwatchLegend(state, items); }
+			}
+		}
+
+		// Categorical swatch legend from an explicit [{ name, color }] list
+		// (gantt statuses carry their own colour, unlike series legends).
+		function drawSwatchLegend(state, items) {
+			const footer = document.createElement('footer');
+			items.forEach(it => {
+				const item = document.createElement('span');
+				const sw = document.createElement('i');
+				sw.style.setProperty('--color-chart-color', it.color);
+				const tx = document.createElement('span');
+				tx.textContent = it.name;
+				item.append(sw, tx); footer.appendChild(item);
+			});
+			state.el.appendChild(footer);
+		}
+
 		// Legend is a <footer> sibling below the SVG (inline flex), not an
 		// absolute overlay — so it never collides with axis labels. Each item is
 		// a <span> with an <i> swatch carrying the series colour.

package/lib/manifest.combobox.css

@@ -2,7 +2,7 @@
 
 @layer components {
 
-    /* Field shell — inherits input tokens so it reads as a normal field */
+    /* Wrapper */
     :where(.combobox):not(.unstyle) {
         display: flex;
         flex-wrap: wrap;
@@ -40,16 +40,8 @@
             pointer-events: none
         }
 
-        /* Inner typing surface. The :not(.unstyle) lifts specificity above
-           manifest.input.css, which sorts after this file in the bundled CSS and
-           would otherwise re-apply its own width/background/hover to the editor. */
+        /* Inner typing surface */
         &> :where(input:not([type=hidden]), textarea):not(.unstyle) {
-            /* flex-basis (not min-width) sets the wrap threshold: the editor fills
-               the rest of the row, and once less than 7rem is left it wraps to its
-               own line. min-width:0 is REQUIRED — a flex item's default min-width:auto
-               is its content size, and WebKit enforces it by crushing the
-               flex-shrink:0 chips to an ellipsis. Resetting it to 0 lets the editor
-               shrink/wrap instead, so the chips keep their room. */
             flex: 1 1 7rem;
             min-width: 0;
             width: auto;
@@ -75,7 +67,7 @@
     /* Chips */
     :where(.combobox-chip):not(.unstyle) {
         display: inline-flex;
-        flex: 0 0 auto;                /* hold content width; don't grow or shrink — overflow:hidden below otherwise lets flex squeeze chips to an ellipsis (notably Safari) */
+        flex: 0 0 auto;
         align-items: center;
         gap: var(--spacing, 0.25rem);
         max-width: 100%;
@@ -117,7 +109,7 @@
             }
         }
 
-        /* Locked — selected but not removable; no × button, so restore the right padding */
+        /* Non-removable */
         &[data-locked] {
             padding-inline-end: calc(var(--spacing, 0.25rem) * 2);
             cursor: default
@@ -130,9 +122,8 @@
         }
     }
 
-    /* Trigger (editor:none button mode) — transparent; the shell is the field.
-       Fills the row like the input editor, with a select-style caret. */
-    :where(.combobox) > button:not(.unstyle) {
+    /* Button trigger */
+    :where(.combobox)>button:not(.unstyle) {
         flex: 1 1 auto;
         align-self: stretch;
         min-width: 7rem;
@@ -161,10 +152,7 @@
         }
     }
 
-    /* Chip-less field (single input, textarea, or button trigger): the editor IS
-       the field — it fills the whole wrapper and carries the padding, so the click
-       target, caret and text selection align with the field edges instead of
-       floating inside the wrapper's padding. */
+    /* Chip-less */
     :where(.combobox):has(> :where(input:not([type=hidden]), textarea, button):not(.unstyle)):not(:has(.combobox-chip)) {
         padding: 0;
 
@@ -175,15 +163,10 @@
         }
     }
 
-    /* Listbox — base look comes from menu[popover]; these are combobox-only extras.
-       Selectors deliberately AVOID :where() on the option part so they out-specify
-       dropdown.css's `menu li { display: inline-flex }` (0,1,0), which sorts after
-       this file in the bundle and would otherwise keep filtered options visible. */
+    /* Listbox */
     :where(menu[role=listbox]):not(.unstyle) {
 
-        /* Active descendant — only shown while the keyboard is driving (data-kbd).
-           On a mouse-opened menu the hover state alone highlights, so the first
-           option isn't left with a persistent background. */
+        /* Active descendant */
         &[data-kbd] [role=option][aria-current="true"] {
             color: var(--color-field-inverse, oklch(43.9% 0 0));
             background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))