minerva-design 1.4.0 → 1.5.0

package/dist/weapp/charts/canvas.js

@@ -163,12 +163,84 @@ var unpackColor = (packed) => [
 	(packed >>> 16 & 255) / 255,
 	(packed >>> 24 & 255) / 255
 ];
-/** Color at `t` (0-1) of a ramp through `stops` */
-var rampColor = (stops, t) => {
-	if (stops.length === 1) return stops[0];
-	const p = clamp01(t) * (stops.length - 1);
-	const i = Math.min(stops.length - 2, Math.floor(p));
-	return mix(stops[i], stops[i + 1], p - i);
+/** Relative luminance (sRGB approximation) */
+var luminance = (c) => .2126 * c[0] + .7152 * c[1] + .0722 * c[2];
+var toLinear = (v) => v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+var toGamma = (v) => v <= .0031308 ? v * 12.92 : 1.055 * Math.max(0, v) ** (1 / 2.4) - .055;
+/** sRGB -> OKLab (perceptually uniform: even steps look even) */
+var toOklab = (c) => {
+	const r = toLinear(c[0]);
+	const g = toLinear(c[1]);
+	const b = toLinear(c[2]);
+	const l = Math.cbrt(.4122214708 * r + .5363325363 * g + .0514459929 * b);
+	const m = Math.cbrt(.2119034982 * r + .6806995451 * g + .1073969566 * b);
+	const s = Math.cbrt(.0883024619 * r + .2817188376 * g + .6299787005 * b);
+	return [
+		.2104542553 * l + .793617785 * m - .0040720468 * s,
+		1.9779984951 * l - 2.428592205 * m + .4505937099 * s,
+		.0259040371 * l + .7827717662 * m - .808675766 * s,
+		c[3]
+	];
+};
+/** OKLab -> sRGB, clamped to the gamut */
+var fromOklab = (c) => {
+	const l = (c[0] + .3963377774 * c[1] + .2158037573 * c[2]) ** 3;
+	const m = (c[0] - .1055613458 * c[1] - .0638541728 * c[2]) ** 3;
+	const s = (c[0] - .0894841775 * c[1] - 1.291485548 * c[2]) ** 3;
+	return [
+		clamp01(toGamma(4.0767416621 * l - 3.3077115913 * m + .2309699292 * s)),
+		clamp01(toGamma(-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s)),
+		clamp01(toGamma(-.0041960863 * l - .7034186147 * m + 1.707614701 * s)),
+		c[3]
+	];
+};
+/** Mixes two colors in OKLab (no muddy gray middle) */
+var mixOklab = (a, b, t) => {
+	const p = toOklab(a);
+	const q = toOklab(b);
+	return fromOklab([
+		p[0] + (q[0] - p[0]) * t,
+		p[1] + (q[1] - p[1]) * t,
+		p[2] + (q[2] - p[2]) * t,
+		p[3] + (q[3] - p[3]) * t
+	]);
+};
+/**
+* A color with another OKLab lightness (0-1) and its chroma scaled by
+* `chroma` (the hue is kept)
+*/
+var withLightness = (c, lightness, chroma = 1) => {
+	const [, a, b, alpha] = toOklab(c);
+	return fromOklab([
+		lightness,
+		a * chroma,
+		b * chroma,
+		alpha
+	]);
+};
+/**
+* Packed colors (`packColor`) of `size` even steps along a ramp through
+* `stops`, interpolated in OKLab: a lookup table for many values
+*/
+var oklabRamp = (stops, size = 256) => {
+	const lut = new Uint32Array(size);
+	if (!stops.length) return lut;
+	const lab = stops.map(toOklab);
+	for (let k = 0; k < size; k++) {
+		const p = k / Math.max(1, size - 1) * (lab.length - 1);
+		const i = Math.min(lab.length - 2, Math.floor(p));
+		const a = lab[Math.max(0, i)];
+		const b = lab[Math.min(lab.length - 1, i + 1)];
+		const t = lab.length === 1 ? 0 : p - i;
+		const c = fromOklab([
+			a[0] + (b[0] - a[0]) * t,
+			a[1] + (b[1] - a[1]) * t,
+			a[2] + (b[2] - a[2]) * t,
+			a[3] + (b[3] - a[3]) * t
+		]);
+		lut[k] = packColor(c) || 1;
+	}
+	return lut;
 };
 /**
 * Points of the curve through `x[i], y[i]` (`i` in `[start, end)`), as
@@ -422,7 +494,8 @@ var normalizeData = (data, resolveX, resolveY = toNumber) => {
 		y0: null,
 		q1: null,
 		q3: null,
-		outliers: null
+		outliers: null,
+		details: null
 	};
 	if (isColumns(data)) {
 		const count = data.y.length;
@@ -472,6 +545,7 @@ var normalizeData = (data, resolveX, resolveY = toNumber) => {
 	let q1 = null;
 	let q3 = null;
 	let outliers = null;
+	let details = null;
 	const nanColumn = () => new Float64Array(count).fill(NaN);
 	for (let i = 0; i < count; i++) {
 		const item = list[i];
@@ -508,6 +582,10 @@ var normalizeData = (data, resolveX, resolveY = toNumber) => {
 				outliers ??= new Array(count);
 				outliers[i] = d.outliers;
 			}
+			if (d.details !== void 0 && d.details.length) {
+				details ??= new Array(count);
+				details[i] = d.details;
+			}
 		} else {
 			x[i] = i;
 			y[i] = NaN;
@@ -524,7 +602,8 @@ var normalizeData = (data, resolveX, resolveY = toNumber) => {
 		y0,
 		q1,
 		q3,
-		outliers
+		outliers,
+		details
 	});
 };
 /** First index whose x is >= value (sorted x) */
@@ -691,6 +770,22 @@ var screenRect = (s, xa, xb, ya, yb) => {
 		height: d - c
 	};
 };
+/**
+* Inset (per side) and corner radius of heatmap cells of `width` ×
+* `height` CSS pixels: a hairline apart (1px, 2px on large cells), corners
+* of `radius` at most 20% of the cell; tiny cells touch
+*/
+var heatCellStyle = (width, height, radius) => {
+	const size = Math.min(Math.abs(width), Math.abs(height));
+	if (!(size >= 4)) return {
+		inset: 0,
+		radius: 0
+	};
+	return {
+		inset: Math.round(Math.min(1, .5 + size / 96) * 4) / 4,
+		radius: Math.round(Math.max(0, Math.min(radius, size * .2)) * 4) / 4
+	};
+};
 /** Room for the axes, then the plot area */
 var computePlot = (input) => {
 	const { width, height, padding, fontSize } = input;
@@ -941,6 +1036,31 @@ var formatValue = (value, locale) => {
 };
 /** `formatValue` bound to a locale */
 var valueFormatter = (locale) => (value) => formatValue(value, locale);
+var MINUTE$1 = 6e4;
+var HOUR$1 = 36e5;
+var DAY$1 = 864e5;
+/**
+* Length of a time range in its natural unit, in the words of a locale:
+* whole weeks (`4 weeks`, `4周`), else days (`26 days`, `26 jours`), hours
+* or minutes
+*/
+var formatDuration = (ms, locale) => {
+	if (!Number.isFinite(ms)) return "–";
+	const abs = Math.abs(ms);
+	const days = abs / DAY$1;
+	const weeks = days / 7;
+	const [value, unit] = days >= 7 && Math.abs(weeks - Math.round(weeks)) < 1e-6 ? [Math.round(weeks), "week"] : days >= 1 ? [Math.round(days * 10) / 10, "day"] : abs >= HOUR$1 ? [Math.round(abs / HOUR$1 * 10) / 10, "hour"] : [Math.round(abs / MINUTE$1), "minute"];
+	try {
+		return numberFormat(locale, {
+			style: "unit",
+			unit,
+			unitDisplay: "long",
+			maximumFractionDigits: 1
+		}).format(value);
+	} catch {
+		return `${value} ${unit}${value === 1 ? "" : "s"}`;
+	}
+};
 /**
 * `12.5` -> `12.5%` (`12,5 %` in French): one decimal at most, exactly one
 * with `fixed` (`75.0%`)
@@ -969,7 +1089,13 @@ var CHART_LABELS = {
 		y: "y",
 		series: "Series",
 		chart: "Chart",
-		chartOf: "Chart: {series}"
+		chartOf: "Chart: {series}",
+		start: "Start",
+		end: "End",
+		duration: "Duration",
+		progress: "Progress",
+		dependencies: "Depends on",
+		outlier: "Outlier"
 	},
 	zh: {
 		open: "开盘",
@@ -985,7 +1111,13 @@ var CHART_LABELS = {
 		value: "数值",
 		series: "系列",
 		chart: "图表",
-		chartOf: "图表：{series}"
+		chartOf: "图表：{series}",
+		start: "开始",
+		end: "结束",
+		duration: "时长",
+		progress: "进度",
+		dependencies: "前置任务",
+		outlier: "异常值"
 	},
 	ja: {
 		open: "始値",
@@ -1001,7 +1133,13 @@ var CHART_LABELS = {
 		value: "値",
 		series: "系列",
 		chart: "グラフ",
-		chartOf: "グラフ：{series}"
+		chartOf: "グラフ：{series}",
+		start: "開始",
+		end: "終了",
+		duration: "期間",
+		progress: "進捗",
+		dependencies: "先行タスク",
+		outlier: "外れ値"
 	},
 	fr: {
 		open: "Ouverture",
@@ -1017,7 +1155,13 @@ var CHART_LABELS = {
 		value: "Valeur",
 		series: "Série",
 		chart: "Graphique",
-		chartOf: "Graphique : {series}"
+		chartOf: "Graphique : {series}",
+		start: "Début",
+		end: "Fin",
+		duration: "Durée",
+		progress: "Avancement",
+		dependencies: "Dépend de",
+		outlier: "Valeur aberrante"
 	}
 };
 /** Texts of a locale with the overrides */
@@ -1100,6 +1244,12 @@ var GridIndex = class {
 };
 //#endregion
 //#region ../charts/src/engine/model.ts
+/** Plotted units of a log axis: the base-10 logarithm of the values */
+var LOG_MAP = {
+	scale: 1,
+	offset: 0,
+	log: true
+};
 var firstX = (data) => {
 	if (typeof data === "object" && data !== null && !("length" in data)) {
 		const xs = data.x;
@@ -1282,13 +1432,11 @@ var alignedDomain = (lo, hi, left, count) => {
 var mapped = /* @__PURE__ */ new WeakMap();
 /** Columns of a right-axis series in left axis units (cached with the data) */
 var mapColumns = (raw, map) => {
-	const key = `${map.scale},${map.offset}`;
+	const key = `${map.scale},${map.offset},${!!map.log}`;
 	const hit = mapped.get(raw);
 	if (hit && hit.key === key) return hit.cols;
-	const f = (v) => v * map.scale + map.offset;
+	const f = mapper(map);
 	const column = (a) => a ? a.map(f) : null;
-	const lo = f(raw.yMin);
-	const hi = f(raw.yMax);
 	const cols = {
 		...raw,
 		y: raw.y.map(f),
@@ -1298,16 +1446,116 @@ var mapColumns = (raw, map) => {
 		y0: column(raw.y0),
 		q1: column(raw.q1),
 		q3: column(raw.q3),
-		outliers: raw.outliers ? raw.outliers.map((list) => list?.map(f)) : null,
-		yMin: Math.min(lo, hi),
-		yMax: Math.max(lo, hi)
-	};
+		outliers: raw.outliers ? raw.outliers.map((list) => list?.map(f)) : null
+	};
+	if (map.log) {
+		const range = [Infinity, -Infinity];
+		const add = (a) => {
+			if (!a) return;
+			for (let i = 0; i < a.length; i++) {
+				const v = a[i];
+				if (!Number.isFinite(v)) continue;
+				if (v < range[0]) range[0] = v;
+				if (v > range[1]) range[1] = v;
+			}
+		};
+		for (const c of [
+			cols.y,
+			cols.y0,
+			cols.high,
+			cols.low,
+			cols.q1,
+			cols.q3
+		]) add(c);
+		cols.outliers?.forEach((list) => add(list));
+		cols.yMin = range[0] <= range[1] ? range[0] : NaN;
+		cols.yMax = range[0] <= range[1] ? range[1] : NaN;
+	} else {
+		const lo = f(raw.yMin);
+		const hi = f(raw.yMax);
+		cols.yMin = Math.min(lo, hi);
+		cols.yMax = Math.max(lo, hi);
+	}
 	mapped.set(raw, {
 		key,
 		cols
 	});
 	return cols;
 };
+/** A log range widened to whole decades (`[0.3, 2.4]` -> `[0, 3]`) */
+var decades = (range) => {
+	const lo = Math.floor(range[0] + 1e-9);
+	const hi = Math.ceil(range[1] - 1e-9);
+	return [lo, hi > lo ? hi : lo + 1];
+};
+/**
+* Plots a series through a map: its columns, bars, stacks and lower
+* edges (bars / areas of the right axis start at `zero`)
+*/
+var logColumns = (s, map, zero = -Infinity) => {
+	const f = mapper(map);
+	const column = (a) => a ? a.map(f) : null;
+	const rawBase = s.stackBase;
+	s.cols = mapColumns(s.raw, map);
+	s.barBase = s.barBase && !s.floating ? s.barBase.map((v) => v === 0 ? map.log ? -Infinity : f(0) : f(v)) : column(s.barBase);
+	s.barTop = column(s.barTop);
+	s.stackTop = column(s.stackTop);
+	s.stackBase = rawBase && rawBase === s.raw.y0 ? s.cols.y0 : rawBase ? column(rawBase) : s.type === "area" ? new Float64Array(s.cols.count).fill(zero) : null;
+};
+/** Value -> plotted units of a map (`-Infinity` for 0 on log axes) */
+var mapper = (map) => (v) => (map.log ? Math.log10(v) : v) * map.scale + map.offset;
+/** Value of the y axis -> plotted y (the logarithm on log axes) */
+var toPlotY = (model, value) => model.y.type === "log" ? Math.log10(value) : value;
+/** Plotted y -> value of the y axis */
+var fromPlotY = (model, value) => model.y.type === "log" ? 10 ** value : value;
+/** Replaces the bases of bars / areas on log axes (`-Infinity`) by the bottom of the axis */
+var floorBases = (s, floor) => {
+	for (const a of [s.barBase, s.stackBase]) {
+		if (!a) continue;
+		for (let i = 0; i < a.length; i++) if (a[i] === -Infinity) a[i] = floor;
+	}
+};
+/** Position (0-1) of a heatmap value on its color ramp */
+var heatPosition = (s, v) => {
+	const [lo, hi] = s.valueRange;
+	const mid = s.colorMidpoint;
+	let t;
+	if (mid !== null && mid > lo && mid < hi) t = v < mid ? (v - lo) / (mid - lo) * .5 : .5 + (v - mid) / (hi - mid) * .5;
+	else t = (v - lo) / (hi - lo || 1);
+	return t < 0 ? 0 : t > 1 ? 1 : t;
+};
+/**
+* Built-in ramps of heatmaps, perceptual (OKLab) and theme-aware: light
+* themes go from a near-white tint to a deep hue, dark themes from a dark
+* tint of the surface to a bright saturated hue; diverging ramps meet in a
+* neutral middle
+*/
+var heatmapStops = (scheme, color, theme, negative) => {
+	const dark = luminance(theme.background) < .4;
+	if (scheme === "diverging") {
+		const neutral = mixOklab(theme.surface, theme.textMuted, dark ? .12 : .08);
+		const end = (c) => dark ? withLightness(c, .7, 1.25) : withLightness(c, .5, 1.05);
+		const side = (c) => mixOklab(neutral, end(c), .5);
+		return [
+			end(negative),
+			side(negative),
+			neutral,
+			side(color),
+			end(color)
+		];
+	}
+	return dark ? [
+		mixOklab(theme.surface, color, .14),
+		withLightness(color, .46, .95),
+		withLightness(color, .64, 1.2),
+		withLightness(color, .8, 1.15)
+	] : [
+		mixOklab(theme.surface, color, .06),
+		withLightness(color, .8, .6),
+		withLightness(color, .58, 1),
+		withLightness(color, .36, .9)
+	];
+};
 var buildModel = (options, theme, hidden, cache, resolver = null) => {
 	const resolve = resolver ?? theme.resolve ?? ((value, fallback) => resolveStaticColor(value, {}, fallback));
 	const input = options.series;
@@ -1325,7 +1573,8 @@ var buildModel = (options, theme, hidden, cache, resolver = null) => {
 	const yOpts = options.yAxis;
 	const heatmapData = input.filter((s) => s.type === "heatmap").map((s) => s.data);
 	const yCategories = yOpts?.type === "category" || !yOpts?.type && heatmapData.length ? [...yOpts?.categories ?? collectYCategories(heatmapData)] : [];
-	const yType = yOpts?.type === "category" || yCategories.length ? "category" : yOpts?.type === "time" || !yOpts?.type && hasDateY(datas) ? "time" : "linear";
+	const yType = yOpts?.type === "category" || yCategories.length ? "category" : yOpts?.type === "time" || !yOpts?.type && hasDateY(datas) ? "time" : yOpts?.type === "log" ? "log" : "linear";
+	const yLog = yType === "log";
 	const yCategoryMap = new Map(yCategories.map((c, i) => [c, i]));
 	const resolveY = (v) => typeof v === "number" ? v : typeof v === "string" ? yType === "category" ? yCategoryMap.get(v) ?? NaN : yType === "time" ? Date.parse(v) : Number(v) : v instanceof Date ? v.getTime() : NaN;
 	const resolverKey = `${xType}|${categories.join("
")}|${yType}|${yCategories.join("
")}`;
@@ -1362,20 +1611,36 @@ var buildModel = (options, theme, hidden, cache, resolver = null) => {
 		let colorScale = [];
 		let valueRange = [0, 1];
 		let cellColors = null;
+		let colorMidpoint = null;
+		let colorLut = null;
 		if (type === "heatmap") {
-			colorScale = s.colorScale && s.colorScale.length ? s.colorScale.map((c) => resolve(c, color)) : [mix(theme.background, color, .08), color];
+			const scale = s.colorScale;
+			const scheme = scale === "diverging" ? "diverging" : "sequential";
+			colorScale = typeof scale === "object" && scale.length ? scale.map((c) => resolve(c, color)) : heatmapStops(scheme, color, theme, resolve(DEFAULT_DOWN, [
+				.86,
+				.15,
+				.15,
+				1
+			]));
 			valueRange = s.valueRange ? [s.valueRange[0], s.valueRange[1]] : [cols.valueMin, cols.valueMax];
 			if (!Number.isFinite(valueRange[0])) valueRange = [0, 1];
-			const values = cols.value ?? cols.y;
 			const [lo, hi] = valueRange;
-			const span = hi - lo || 1;
+			colorMidpoint = s.colorMidpoint ?? (scheme === "diverging" && typeof scale !== "object" ? lo < 0 && hi > 0 ? 0 : (lo + hi) / 2 : null);
+			const lut = oklabRamp(colorScale);
+			colorLut = lut;
+			const values = cols.value ?? cols.y;
+			const ramp = {
+				valueRange,
+				colorMidpoint
+			};
 			cellColors = new Uint32Array(cols.count);
 			for (let i = 0; i < cols.count; i++) {
 				const v = values[i];
 				if (!Number.isFinite(v) || !Number.isFinite(cols.y[i])) continue;
-				cellColors[i] = packColor(rampColor(colorScale, (v - lo) / span));
+				cellColors[i] = lut[Math.round(heatPosition(ramp, v) * 255)];
 			}
 		}
+		const connector = s.connector ? typeof s.connector === "object" ? s.connector : {} : null;
 		const id = s.id ?? String(index);
 		return {
 			index,
@@ -1421,6 +1686,16 @@ var buildModel = (options, theme, hidden, cache, resolver = null) => {
 			},
 			colorScale,
 			valueRange,
+			colorMidpoint,
+			colorLut,
+			tooltip: s.tooltip !== false,
+			outlierShape: s.outlierShape ?? "hollow",
+			outlierSize: s.outlierSize ?? s.pointSize ?? 7,
+			connector: connector && type === "bar" ? {
+				color: connector.color ? resolve(connector.color, theme.textMuted) : theme.textMuted,
+				dash: [...connector.dash ?? [3, 3]],
+				width: connector.width ?? 1
+			} : null,
 			radius: s.radius ?? (type === "heatmap" ? 2 : type === "boxplot" ? 0 : 3),
 			format: s.format,
 			valueName: s.valueName
@@ -1521,14 +1796,18 @@ var buildModel = (options, theme, hidden, cache, resolver = null) => {
 	if (xOpts?.min !== void 0) xRange[0] = xOpts.min;
 	if (xOpts?.max !== void 0) xRange[1] = xOpts.max;
 	xRange = ensureSpan(xRange[0], xRange[1]);
-	const valuesOf = (list, zero) => {
+	if (yLog) for (const s of series) {
+		if (s.yAxis === "right" || s.type === "heatmap") continue;
+		logColumns(s, LOG_MAP);
+	}
+	const valuesOf = (list, zero, log = false) => {
 		const values = [];
 		for (const s of list) if (s.type === "bar" && s.barBase && s.barTop) values.push(...extent(s.barBase), ...extent(s.barTop));
 		else if (s.stackBase && s.stackTop) values.push(...extent(s.stackBase), ...extent(s.stackTop));
 		else if (s.type === "heatmap") values.push(s.cols.yMin - s.cellHalf.y, s.cols.yMax + s.cellHalf.y);
 		else values.push(s.cols.yMin, s.cols.yMax);
 		const listBars = list.filter((s) => s.type === "bar");
-		if (listBars.some((s) => !s.floating) || zero) values.push(0);
+		if (!log && (listBars.some((s) => !s.floating) || zero)) values.push(0);
 		if (listBars.some((s) => s.showLabels)) {
 			const [lo, hi] = extent(values);
 			if (hi > 0) values.push(hi + (hi - Math.min(0, lo)) * .1);
@@ -1542,7 +1821,7 @@ var buildModel = (options, theme, hidden, cache, resolver = null) => {
 	let yRange;
 	if (yType === "category") yRange = [-.5, Math.max(1, yCategories.length) - .5];
 	else {
-		const yValues = valuesOf(leftSeries, yOpts?.zero);
+		const yValues = valuesOf(leftSeries, yOpts?.zero, yLog);
 		const filled = leftBars.length > 0 || leftSeries.some((s) => s.type === "area");
 		yRange = ensureSpan(...extent(yValues));
 		if (series.every((s) => s.type === "scatter")) {
@@ -1553,43 +1832,50 @@ var buildModel = (options, theme, hidden, cache, resolver = null) => {
 			yRange = [yRange[0] - pad, yRange[1] + pad];
 		}
 		if ((yOpts?.nice ?? !heatmaps.length) && yType === "linear") yRange = niceDomain(yRange[0], yRange[1], yOpts?.tickCount ?? 5);
+		if (yLog && yOpts?.nice !== false) yRange = decades(yRange);
 		if (percent && (bars.length || stackedLines.length)) yRange = [extent(yValues)[0] < 0 ? -100 : 0, 100];
-		if (filled && !yOpts?.zero) {
+		if (filled && !yOpts?.zero && !yLog) {
 			if (yRange[0] < 0 && extent(yValues)[0] >= 0) yRange[0] = 0;
 		}
 	}
-	if (yOpts?.min !== void 0) yRange[0] = yOpts.min;
-	if (yOpts?.max !== void 0) yRange[1] = yOpts.max;
+	const yBound = (v) => yLog ? Math.log10(v) : v;
+	if (yOpts?.min !== void 0) yRange[0] = yBound(yOpts.min);
+	if (yOpts?.max !== void 0) yRange[1] = yBound(yOpts.max);
 	yRange = ensureSpan(yRange[0], yRange[1]);
+	if (yLog) {
+		for (const s of series) if (s.yAxis === "left") floorBases(s, yRange[0]);
+	}
 	const y2Opts = options.yAxis2;
 	let y2 = null;
 	let y2Map = null;
 	const rightSeries = series.filter((s) => s.yAxis === "right");
 	if (rightSeries.length && yType !== "category") {
-		const [lo, hi] = ensureSpan(...extent(valuesOf(rightSeries.filter((s) => !s.hidden), y2Opts?.zero)));
-		let domain = y2Opts?.nice === false ? [lo, hi] : alignedDomain(lo, hi, yRange, yOpts?.tickCount ?? 5);
-		if (y2Opts?.min !== void 0) domain[0] = y2Opts.min;
-		if (y2Opts?.max !== void 0) domain[1] = y2Opts.max;
+		const y2Log = y2Opts?.type === "log";
+		const rightVisible = rightSeries.filter((s) => !s.hidden);
+		const [lo, hi] = ensureSpan(...extent(y2Log ? rightVisible.flatMap((s) => {
+			const c = mapColumns(s.raw, LOG_MAP);
+			return [c.yMin, c.yMax];
+		}) : valuesOf(rightVisible, y2Opts?.zero)));
+		let domain = y2Opts?.nice === false ? [lo, hi] : y2Log ? decades([lo, hi]) : alignedDomain(lo, hi, yRange, yOpts?.tickCount ?? 5);
+		const y2Bound = (v) => y2Log ? Math.log10(v) : v;
+		if (y2Opts?.min !== void 0) domain[0] = y2Bound(y2Opts.min);
+		if (y2Opts?.max !== void 0) domain[1] = y2Bound(y2Opts.max);
 		domain = ensureSpan(domain[0], domain[1]);
 		const scale = (yRange[1] - yRange[0]) / (domain[1] - domain[0]);
 		const map = {
 			scale,
-			offset: yRange[0] - domain[0] * scale
+			offset: yRange[0] - domain[0] * scale,
+			log: y2Log
 		};
 		y2Map = map;
-		const f = (v) => v * map.scale + map.offset;
-		const column = (a) => a ? a.map(f) : null;
-		const zero = f(Math.min(Math.max(0, domain[0]), domain[1]));
+		const zero = y2Log ? yRange[0] : mapper(map)(Math.min(Math.max(0, domain[0]), domain[1]));
 		for (const s of rightSeries) {
-			const rawBase = s.stackBase;
-			s.cols = mapColumns(s.raw, map);
-			s.barBase = column(s.barBase);
-			s.barTop = column(s.barTop);
-			s.stackTop = column(s.stackTop);
-			s.stackBase = rawBase && rawBase === s.raw.y0 ? s.cols.y0 : rawBase ? column(rawBase) : s.type === "area" ? new Float64Array(s.cols.count).fill(zero) : null;
+			logColumns(s, map, zero);
+			floorBases(s, yRange[0]);
 		}
-		y2 = axisModel(y2Opts, "linear", [], false, locale);
+		y2 = axisModel(y2Opts, y2Log ? "log" : "linear", [], false, locale);
 	}
+	const timeline = yType === "time" && series.some((s) => s.type === "bar") && series.every((s) => s.type === "bar" ? s.floating : s.type === "scatter");
 	const zoomOption = options.interaction === false ? false : options.interaction === true || options.interaction === void 0 ? true : options.interaction.zoom ?? true;
 	const zoomAxes = zoomOption === false ? {
 		x: false,
@@ -1621,8 +1907,8 @@ var buildModel = (options, theme, hidden, cache, resolver = null) => {
 		},
 		allScatter,
 		zoom: zoomAxes,
-		tooltipMode: tooltipOptions?.mode ?? (allScatter ? "nearest" : "axis"),
-		baseline: Math.min(Math.max(0, yRange[0]), yRange[1]),
+		tooltipMode: tooltipOptions?.mode ?? (allScatter ? "nearest" : timeline ? "item" : "axis"),
+		baseline: yLog ? yRange[0] : Math.min(Math.max(0, yRange[0]), yRange[1]),
 		minSpan: {
 			x: xType === "category" ? 1 : (xRange[1] - xRange[0]) * 1e-7,
 			y: yType === "category" ? 1 : (yRange[1] - yRange[0]) * 1e-7
@@ -1892,6 +2178,19 @@ var drawForeground = (ctx, input) => {
 	ctx.beginPath();
 	ctx.rect(plot.x, plot.y, plot.width, plot.height);
 	ctx.clip();
+	for (const c of input.connectors ?? []) {
+		ctx.strokeStyle = c.color;
+		ctx.lineWidth = c.width;
+		ctx.setLineDash([...c.dash]);
+		ctx.beginPath();
+		const along = c.y0 === c.y1;
+		const x0 = along ? c.x0 : crisp(c.x0);
+		const y0 = along ? crisp(c.y0) : c.y0;
+		ctx.moveTo(x0, y0);
+		ctx.lineTo(along ? c.x1 : x0, along ? y0 : c.y1);
+		ctx.stroke();
+	}
+	ctx.setLineDash([]);
 	const halo = toCss(theme.background, .9);
 	const occupied = [];
 	const labelHeight = theme.fontSize + 4;
@@ -2302,6 +2601,7 @@ var axisTicks = (axis, range, count) => {
 	}
 	const values = linearTicks(min, max, count);
 	const step = tickStep(min, max, count);
+	if (axis.type === "log") return logTicks(axis, min, max, count);
 	const tick = axis.format ?? tickFormatter(step, Math.max(Math.abs(min), Math.abs(max)), axis.locale);
 	return {
 		values,
@@ -2309,6 +2609,41 @@ var axisTicks = (axis, range, count) => {
 		formatValue: axis.format ?? ((value) => formatValue(value, axis.locale))
 	};
 };
+/**
+* Ticks of a log axis (`min` / `max` are exponents): every decade, with 2
+* and 5 between them on short ranges, every few decades on long ones;
+* labelled with the values (`1k`, `10k`)
+*/
+var logTicks = (axis, min, max, count) => {
+	const span = max - min;
+	const values = [];
+	const raw = [];
+	const push = (v) => {
+		const e = Math.log10(v);
+		if (e >= min - 1e-9 && e <= max + 1e-9) {
+			values.push(e);
+			raw.push(v);
+		}
+	};
+	if (span < 1) {
+		for (const v of linearTicks(10 ** min, 10 ** max, count)) if (v > 0) push(v);
+	} else {
+		const every = Math.max(1, Math.ceil(span / Math.max(1, count)));
+		const between = span * 3 <= count * 1.6 ? [2, 5] : [];
+		for (let e = Math.floor(min); e <= Math.ceil(max); e++) {
+			if (e % every !== 0) continue;
+			const decade = Number((10 ** e).toPrecision(12));
+			push(decade);
+			for (const m of between) push(Number((m * decade).toPrecision(12)));
+		}
+	}
+	const label = axis.format ?? ((v) => formatCompact(v, 2, axis.locale));
+	return {
+		values,
+		labels: raw.map(label),
+		formatValue: axis.format ?? ((value) => formatValue(value, axis.locale))
+	};
+};
 var DEFAULT_PADDING = {
 	top: 12,
 	right: 16,
@@ -2316,9 +2651,13 @@ var DEFAULT_PADDING = {
 	left: 4
 };
 var fallbackResolve = (_value, fallback) => fallback;
-/** Annotation colors resolved against the theme */
-var resolveAnnotations = (annotations, theme) => {
+/**
+* Annotation colors resolved against the theme; `mapY` turns y values into
+* plotted units (log axes)
+*/
+var resolveAnnotations = (annotations, theme, mapY) => {
 	const resolve = theme.resolve ?? fallbackResolve;
+	const y = (v) => mapY && v !== void 0 ? mapY(v) : v;
 	return (annotations ?? []).map((a) => {
 		if (a.type === "rect") {
 			const color = a.color ? resolve(a.color, theme.primary) : theme.primary;
@@ -2326,8 +2665,8 @@ var resolveAnnotations = (annotations, theme) => {
 				type: "rect",
 				x0: a.x0,
 				x1: a.x1,
-				y0: a.y0,
-				y1: a.y1,
+				y0: y(a.y0),
+				y1: y(a.y1),
 				color,
 				opacity: a.opacity ?? .08,
 				label: a.label,
@@ -2338,7 +2677,7 @@ var resolveAnnotations = (annotations, theme) => {
 		if (a.type === "text") return {
 			type: "text",
 			x: a.x,
-			y: a.y,
+			y: y(a.y),
 			text: a.text,
 			anchor: a.anchor ?? "center",
 			color: a.color ? resolve(a.color, theme.textMuted) : theme.textMuted,
@@ -2347,7 +2686,7 @@ var resolveAnnotations = (annotations, theme) => {
 		return {
 			type: "line",
 			axis: a.axis,
-			value: a.value,
+			value: a.axis === "y" ? y(a.value) : a.value,
 			color: a.color ? resolve(a.color, theme.textMuted) : theme.textMuted,
 			width: a.width ?? 1,
 			dash: [...a.dash ?? [4, 4]],
@@ -2363,7 +2702,7 @@ var layoutChart = (input) => {
 	const yTicks = axisTicks(model.y, view.y, yCount);
 	let yLabelWidth = 0;
 	if (model.y.visible) for (const label of yTicks.labels) yLabelWidth = Math.max(yLabelWidth, measure(label));
-	const y2Ticks = rightTicks(model, yTicks);
+	const y2Ticks = rightTicks(model, yTicks, view.y, yCount);
 	let y2LabelWidth = 0;
 	if (y2Ticks && model.y2?.visible) for (const label of y2Ticks.labels) y2LabelWidth = Math.max(y2LabelWidth, measure(label));
 	let categoryWidth = 48;
@@ -2398,11 +2737,23 @@ var layoutChart = (input) => {
 		y2Ticks
 	};
 };
-/** Right axis ticks: the left ticks labelled in right axis units */
-var rightTicks = (model, yTicks) => {
+/**
+* Right axis ticks: the left ticks labelled in right axis units; log axes
+* get their own decades
+*/
+var rightTicks = (model, yTicks, view, count) => {
 	const axis = model.y2;
 	const map = model.y2Map;
 	if (!axis || !map || !map.scale) return null;
+	if (map.log) {
+		const a = (view[0] - map.offset) / map.scale;
+		const b = (view[1] - map.offset) / map.scale;
+		const ticks = axisTicks(axis, [Math.min(a, b), Math.max(a, b)], count);
+		return {
+			...ticks,
+			values: ticks.values.map((e) => e * map.scale + map.offset)
+		};
+	}
 	const raw = yTicks.values.map((v) => (v - map.offset) / map.scale);
 	const step = raw.length > 1 ? Math.abs(raw[1] - raw[0]) : 1;
 	let maxAbs = 0;
@@ -2546,6 +2897,25 @@ var candidateOf = (s, i, px, py, sc) => {
 		inside
 	};
 };
+/** Outlier of a box under a pixel (`undefined` when none is in reach) */
+var outlierAt = (s, i, px, py, sc, slop) => {
+	const list = s.cols.outliers?.[i];
+	if (!list) return void 0;
+	const center = sc.xToPx(s.cols.x[i] + slotOffset(s));
+	const ax = alongX(sc, px, py) - center;
+	const ay = alongY(sc, px, py);
+	const reach = s.outlierSize / 2 + 4 + slop;
+	let best;
+	let bestDist = reach;
+	list.forEach((v, k) => {
+		const d = Math.hypot(ax, sc.yToPx(v) - ay);
+		if (d <= bestDist) {
+			bestDist = d;
+			best = s.raw.outliers?.[i]?.[k] ?? v;
+		}
+	});
+	return best;
+};
 /** Diameter of a scatter dot */
 var dotSize = (s, i) => s.cols.size && s.cols.size[i] > 0 ? s.cols.size[i] : s.pointSize;
 var maxSizes = /* @__PURE__ */ new WeakMap();
@@ -2648,7 +3018,11 @@ var hoverItemOf = (s, index) => {
 var eventOf = (candidates, xTicks) => {
 	if (!candidates.length) return null;
 	candidates.sort((a, b) => a.series.index - b.series.index);
-	const items = candidates.map((c) => hoverItemOf(c.series, c.index));
+	const items = candidates.map((c) => {
+		const item = hoverItemOf(c.series, c.index);
+		if (c.outlier !== void 0) item.outlier = c.outlier;
+		return item;
+	});
 	const x = items[0].x;
 	return {
 		items,
@@ -2669,7 +3043,7 @@ var hitTest = (model, sc, xTicks, px, py, slop = 0) => {
 	const scatter = [];
 	const others = [];
 	for (const s of model.series) {
-		if (s.hidden || s.cols.count === 0) continue;
+		if (s.hidden || !s.tooltip || s.cols.count === 0) continue;
 		if (s.type === "scatter") {
 			const i = nearestScatter(s, px, py, sc, slop);
 			if (i >= 0) scatter.push(candidateOf(s, i, px, py, sc));
@@ -2683,9 +3057,23 @@ var hitTest = (model, sc, xTicks, px, py, slop = 0) => {
 			}
 		} else {
 			const i = nearestX(s, at.x);
-			if (i >= 0) others.push(candidateOf(s, i, px, py, sc));
+			if (i < 0) continue;
+			const c = candidateOf(s, i, px, py, sc);
+			if (s.type === "boxplot") {
+				c.outlier = outlierAt(s, i, px, py, sc, slop);
+				if (c.outlier !== void 0) {
+					c.inside = true;
+					c.dist = 0;
+				}
+			}
+			others.push(c);
 		}
 	}
+	if (model.tooltipMode === "item") {
+		const all = [...scatter, ...others].filter((c) => c.inside || c.series.type === "scatter" || (c.series.type === "line" || c.series.type === "area") && c.dist <= 8 + slop);
+		if (!all.length) return null;
+		return eventOf([all.reduce((a, b) => b.dist < a.dist || b.dist === a.dist && b.series.index > a.series.index ? b : a)], xTicks);
+	}
 	if (model.tooltipMode === "nearest") {
 		const all = [...scatter, ...others].filter((c) => c.inside || c.series.type === "scatter" || c.dist <= 32 + slop);
 		if (!all.length) return null;
@@ -2718,6 +3106,12 @@ var CHANGE_PERCENT = {
 	minimumFractionDigits: 2,
 	maximumFractionDigits: 2
 };
+/** Extra rows of a point (`details` of its datum) */
+var detailRows = (s, index) => s.raw.details?.[index]?.map((d) => ({
+	color: null,
+	name: d.name,
+	value: d.value
+})) ?? [];
 /**
 * Default tooltip content of a hover payload; `y2Ticks` formats the values
 * of the right axis series
@@ -2728,6 +3122,32 @@ var tooltipContent$1 = (model, event, yTicks, y2Ticks = null) => {
 	const names = model.labels;
 	const first = event.items[0];
 	const firstSeries = first ? model.series[first.seriesIndex] : null;
+	if (event.items.length === 1 && first && firstSeries?.type === "bar" && first.y0 !== void 0 && model.y.type === "time") {
+		const format = formatOf(firstSeries);
+		return {
+			title: first.label ?? event.xLabel,
+			titleColor: first.color,
+			subtitle: first.label !== void 0 ? `${event.xLabel} · ${firstSeries.name}` : firstSeries.name,
+			rows: [
+				{
+					color: null,
+					name: names.start,
+					value: format(first.y0)
+				},
+				{
+					color: null,
+					name: names.end,
+					value: format(first.y)
+				},
+				{
+					color: null,
+					name: names.duration,
+					value: formatDuration(first.y - first.y0, model.locale)
+				},
+				...detailRows(firstSeries, first.index)
+			]
+		};
+	}
 	if (event.items.length === 1 && firstSeries?.type === "heatmap") {
 		const yName = model.y.type === "category" ? model.y.categories[Math.round(first.y)] ?? yFormat(first.y) : yFormat(first.y);
 		return {
@@ -2737,7 +3157,7 @@ var tooltipContent$1 = (model, event, yTicks, y2Ticks = null) => {
 				color: first.color,
 				name: first.label ?? firstSeries.name,
 				value: first.value === void 0 ? "–" : (firstSeries.format ?? model.formatValue)(first.value)
-			}]
+			}, ...detailRows(firstSeries, first.index)]
 		};
 	}
 	if (event.items.every((it) => model.series[it.seriesIndex].type === "scatter") && event.items.length === 1) {
@@ -2751,11 +3171,15 @@ var tooltipContent$1 = (model, event, yTicks, y2Ticks = null) => {
 		if (model.x.type === "category") return {
 			title: it.label ?? event.xLabel,
 			titleColor: null,
-			rows: [{
-				color: it.color,
-				name: it.seriesName,
-				value: formatOf(s)(it.y)
-			}, ...valueRow]
+			rows: [
+				{
+					color: it.color,
+					name: it.seriesName,
+					value: formatOf(s)(it.y)
+				},
+				...valueRow,
+				...detailRows(s, it.index)
+			]
 		};
 		const rows = [
 			{
@@ -2768,7 +3192,8 @@ var tooltipContent$1 = (model, event, yTicks, y2Ticks = null) => {
 				name: (s.yAxis === "right" ? model.y2?.title : model.y.title) ?? names.y,
 				value: formatOf(s)(it.y)
 			},
-			...valueRow
+			...valueRow,
+			...detailRows(s, it.index)
 		];
 		if (it.label !== void 0 && model.series.length > 1) rows.push({
 			color: null,
@@ -2810,6 +3235,18 @@ var tooltipContent$1 = (model, event, yTicks, y2Ticks = null) => {
 			continue;
 		}
 		if (s.type === "boxplot") {
+			if (it.outlier !== void 0) {
+				rows.push({
+					color: it.color,
+					name: it.label ? `${it.seriesName} · ${it.label}` : it.seriesName,
+					value: ""
+				}, {
+					color: null,
+					name: names.outlier,
+					value: format(it.outlier)
+				});
+				continue;
+			}
 			rows.push({
 				color: it.color,
 				name: it.label ? `${it.seriesName} · ${it.label}` : it.seriesName,
@@ -2844,6 +3281,7 @@ var tooltipContent$1 = (model, event, yTicks, y2Ticks = null) => {
 			name: it.label && binTitle === null ? `${it.seriesName} · ${it.label}` : it.seriesName,
 			value
 		});
+		rows.push(...detailRows(s, it.index));
 	}
 	if (model.percent) {
 		const totals = /* @__PURE__ */ new Map();
@@ -2874,6 +3312,18 @@ var hoverMarks = (model, sc, event) => {
 	let bandHi = -Infinity;
 	for (const it of event.items) {
 		const s = model.series[it.seriesIndex];
+		if (s.type === "boxplot" && it.outlier !== void 0) {
+			const p = toScreen(sc, it.x + slotOffset(s), plottedOutlier(s, it));
+			marks.push({
+				kind: "dot",
+				x: p.x,
+				y: p.y,
+				size: s.outlierSize + 3,
+				color: it.color,
+				halo: toCss(s.pointColors?.[it.index] ?? s.color, .2)
+			});
+			continue;
+		}
 		if (s.type === "bar" || s.type === "candlestick" || s.type === "boxplot") {
 			const c = sc.xToPx(it.x + slotOffset(s));
 			const half = Math.max(s.barHalfWidth / Math.abs(sc.xPerPx), 1);
@@ -2886,9 +3336,37 @@ var hoverMarks = (model, sc, event) => {
 			const cy = sc.yToPx(it.y);
 			const hw = Math.abs(s.cellHalf.x / sc.xPerPx);
 			const hh = Math.abs(s.cellHalf.y / sc.yPerPx);
+			const cell = screenRect(sc, cx - hw, cx + hw, cy - hh, cy + hh);
+			const style = heatCellStyle(cell.width, cell.height, s.radius);
+			const top = Math.max(plot.y, cell.y);
+			const bottom = Math.min(plot.y + plot.height, cell.y + cell.height);
+			const left = Math.max(plot.x, cell.x);
+			const right = Math.min(plot.x + plot.width, cell.x + cell.width);
+			if (bottom > top) marks.push({
+				kind: "guide",
+				x: plot.x,
+				y: top,
+				width: plot.width,
+				height: bottom - top
+			});
+			if (right > left) marks.push({
+				kind: "guide",
+				x: left,
+				y: plot.y,
+				width: right - left,
+				height: plot.height
+			});
+			const packed = s.cellColors?.[it.index];
+			const fill = packed ? unpackColor(packed) : s.color;
 			marks.push({
 				kind: "cell",
-				...screenRect(sc, cx - hw, cx + hw, cy - hh, cy + hh)
+				x: cell.x + style.inset,
+				y: cell.y + style.inset,
+				width: Math.max(1, cell.width - style.inset * 2),
+				height: Math.max(1, cell.height - style.inset * 2),
+				color: it.color,
+				ring: contrastRing(fill),
+				radius: style.radius
 			});
 			continue;
 		}
@@ -2928,6 +3406,86 @@ var hoverMarks = (model, sc, event) => {
 	}
 	return marks;
 };
+/** Ring of a hovered cell: light on dark fills, dark on light ones */
+var contrastRing = (fill) => luminance(fill) > .45 ? "rgba(15, 23, 42, 0.78)" : "rgba(255, 255, 255, 0.9)";
+/** Plotted value of the hovered outlier of a box */
+var plottedOutlier = (s, it) => {
+	const raw = s.raw.outliers?.[it.index];
+	const k = raw ? raw.indexOf(it.outlier ?? NaN) : -1;
+	return (k >= 0 ? s.cols.outliers?.[it.index]?.[k] : void 0) ?? it.outlier ?? 0;
+};
+/**
+* Connectors of the bar series (`connector`, waterfalls): from the end of
+* every bar to the next bar, at the value where the next one starts
+*/
+var connectorSegments = (model, sc) => {
+	const out = [];
+	for (const s of model.series) {
+		const c = s.connector;
+		if (!c || s.hidden || s.type !== "bar" || !s.barTop) continue;
+		const { x, count } = s.cols;
+		const top = s.barTop;
+		const half = s.barHalfWidth;
+		const [v0, v1] = sc.view.x[0] <= sc.view.x[1] ? sc.view.x : [sc.view.x[1], sc.view.x[0]];
+		const color = toCss(c.color, .75);
+		let prev = -1;
+		for (let i = 0; i < count && out.length < 1200; i++) {
+			if (!Number.isFinite(top[i]) || !Number.isFinite(x[i])) continue;
+			if (prev >= 0 && x[i] + half >= v0 && x[prev] - half <= v1) {
+				const a = toScreen(sc, x[prev] + s.barOffset + half, top[prev]);
+				const b = toScreen(sc, x[i] + s.barOffset - half, top[prev]);
+				out.push({
+					x0: a.x,
+					y0: a.y,
+					x1: b.x,
+					y1: b.y,
+					color,
+					width: c.width,
+					dash: c.dash
+				});
+			}
+			prev = i;
+		}
+	}
+	return out;
+};
+var COLOR_STOPS = 12;
+/**
+* Color legend of a heatmap chart (every series is a heatmap; the first
+* visible one), `null` otherwise
+*/
+var colorLegend = (model) => {
+	if (!model.series.length || model.series.some((s) => s.type !== "heatmap")) return null;
+	const s = model.series.find((it) => !it.hidden && it.colorLut);
+	const lut = s?.colorLut;
+	if (!s || !lut) return null;
+	const stops = [];
+	for (let k = 0; k < COLOR_STOPS; k++) {
+		const packed = lut[Math.round(k / 11 * (lut.length - 1))];
+		stops.push(toCss(unpackColor(packed ?? 0)));
+	}
+	const format = s.format ?? model.formatValue;
+	const [lo, hi] = s.valueRange;
+	const labels = [{
+		at: 0,
+		text: format(lo)
+	}, {
+		at: 1,
+		text: format(hi)
+	}];
+	const mid = s.colorMidpoint;
+	if (mid !== null && mid > lo && mid < hi) labels.splice(1, 0, {
+		at: .5,
+		text: format(mid)
+	});
+	return {
+		seriesIndex: s.index,
+		stops,
+		labels
+	};
+};
+/** Whether the legend shows (`legend` option; heatmaps get their color legend) */
+var legendShown = (option, model, named) => option === void 0 ? named > 1 || colorLegend(model) !== null : !!option;
 /** Swatch of a series in the legend */
 var legendShape = (type) => type === "scatter" ? "dot" : type === "line" ? "line" : "square";
 /** Whether the guide line follows the pointer */
@@ -3112,7 +3670,7 @@ var createChartController = (config) => {
 			};
 			zoomed = !sameRange(view.x, base.x) || !sameRange(view.y, base.y);
 		}
-		annotations = resolveAnnotations(options.annotations, theme);
+		annotations = resolveAnnotations(options.annotations, theme, model.y.type === "log" ? Math.log10 : void 0);
 		if (hover) {
 			if (!hover.event.items.every((it) => model.series[it.seriesIndex] && !model.series[it.seriesIndex].hidden && it.index < model.series[it.seriesIndex].cols.count)) setHover(null);
 		}
@@ -3121,9 +3679,46 @@ var createChartController = (config) => {
 	const legendLayout = () => {
 		const option = options.legend;
 		const named = options.series.filter((s) => s.name).length;
-		if (!(option === void 0 ? named > 1 : !!option)) return null;
+		if (!legendShown(option, model, named)) return null;
 		const cfg = typeof option === "object" ? option : {};
 		const position = cfg.position === "bottom" ? "bottom" : "top";
+		const ramp = colorLegend(model);
+		if (ramp) {
+			const first = ramp.labels[0]?.text ?? "";
+			const last = ramp.labels[ramp.labels.length - 1]?.text ?? "";
+			const barWidth = Math.max(60, Math.min(160, width * .32));
+			const right = width - 4 - measure(last, 11) - 8;
+			const barX = right - barWidth;
+			const cy = (position === "bottom" ? height - LEGEND_ROW$1 : 0) + LEGEND_ROW$1 / 2;
+			return {
+				entries: [],
+				colors: {
+					bar: {
+						x: barX,
+						y: cy - 4,
+						width: barWidth,
+						height: 8
+					},
+					stops: ramp.stops,
+					labels: [{
+						text: first,
+						x: barX - 8,
+						y: cy,
+						align: "right"
+					}, {
+						text: last,
+						x: right + 8,
+						y: cy,
+						align: "left"
+					}],
+					ticks: ramp.labels.filter((l) => l.at > 0 && l.at < 1).map((l) => barX + l.at * barWidth),
+					caret: null
+				},
+				position,
+				toggle: false,
+				height: 26
+			};
+		}
 		const entries = [];
 		let x = 4;
 		let row = 0;
@@ -3152,6 +3747,7 @@ var createChartController = (config) => {
 		if (position === "bottom") for (const e of entries) e.box.y += height - legendHeight + 6;
 		return {
 			entries,
+			colors: null,
 			position,
 			toggle: cfg.toggle ?? true,
 			height: legendHeight
@@ -3172,13 +3768,21 @@ var createChartController = (config) => {
 		const padding = 8;
 		let w = 0;
 		let lines;
+		const swatchWidth = content.rows.some((row) => row.color) ? 14 : 0;
 		if (text) {
 			for (const line of text) w = Math.max(w, measure(line, 12));
 			lines = text.length;
 		} else {
 			w = measure(content.title, 12, 600) + (content.titleColor ? 14 : 0);
-			for (const row of content.rows) w = Math.max(w, (row.color ? 14 : 0) + measure(row.name, 12) + 16 + measure(row.value, 12, 600));
-			lines = 1 + content.rows.length;
+			if (content.subtitle) w = Math.max(w, measure(content.subtitle, 11) + (content.titleColor ? 14 : 0));
+			let names = 0;
+			let values = 0;
+			for (const row of content.rows) {
+				names = Math.max(names, measure(row.name, 12));
+				values = Math.max(values, measure(row.value, 12, 600));
+			}
+			if (content.rows.length) w = Math.max(w, swatchWidth + names + 16 + values);
+			lines = 1 + (content.subtitle ? 1 : 0) + content.rows.length;
 		}
 		const boxW = Math.ceil(Math.max(w, 96) + 16 + 4);
 		const boxH = lines * lineHeight + 16;
@@ -3196,7 +3800,8 @@ var createChartController = (config) => {
 				height: boxH
 			},
 			lineHeight,
-			padding
+			padding,
+			swatchWidth
 		};
 	};
 	const computeScene = () => {
@@ -3245,7 +3850,8 @@ var createChartController = (config) => {
 			pointLabels,
 			legend,
 			hover: null,
-			dragging: null
+			dragging: null,
+			connectors: connectorSegments(model, layout.scales)
 		};
 		scene = next;
 		if (hover) {
@@ -3258,6 +3864,10 @@ var createChartController = (config) => {
 				crosshairY: horizontal ? guide : null,
 				tooltip: gesture?.kind === "pan" || gesture?.kind === "point" ? null : tooltipLayout(hover.event, hover.x, hover.y)
 			};
+			const colors = legend?.colors;
+			const it = hover.event.items[0];
+			const s = it ? model.series[it.seriesIndex] : void 0;
+			if (colors && it && s?.type === "heatmap" && it.value !== void 0) colors.caret = colors.bar.x + heatPosition(s, it.value) * colors.bar.width;
 		}
 		if (gesture?.kind === "point") {
 			const s = model.series[gesture.item.seriesIndex];
@@ -3302,7 +3912,11 @@ var createChartController = (config) => {
 		const sc = scales();
 		if (!sc) return null;
 		const { plot } = sc;
-		return toData(sc, Math.max(plot.x, Math.min(plot.x + plot.width, x)), Math.max(plot.y, Math.min(plot.y + plot.height, y)));
+		const p = toData(sc, Math.max(plot.x, Math.min(plot.x + plot.width, x)), Math.max(plot.y, Math.min(plot.y + plot.height, y)));
+		return {
+			x: p.x,
+			y: fromPlotY(model, p.y)
+		};
 	};
 	const setViewInternal = (next, notify) => {
 		const { base, minSpan } = model;
@@ -3592,11 +4206,16 @@ var createChartController = (config) => {
 		},
 		toPixel(x, y) {
 			const sc = scales();
-			return sc ? toScreen(sc, x, y) : null;
+			return sc ? toScreen(sc, x, toPlotY(model, y)) : null;
 		},
 		fromPixel(x, y) {
 			const sc = scales();
-			return sc ? toData(sc, x, y) : null;
+			if (!sc) return null;
+			const p = toData(sc, x, y);
+			return {
+				x: p.x,
+				y: fromPlotY(model, p.y)
+			};
 		},
 		on(type, listener) {
 			let set = listeners[type];
@@ -3853,7 +4472,8 @@ var scenePrimitives = (scene, limits = {}) => {
 			const hh = Math.abs(s.cellHalf.y / sc.yPerPx);
 			const rects = [];
 			const colors = [];
-			const inset = hw > 3 && hh > 3 ? 1 : 0;
+			const style = heatCellStyle(hw * 2, hh * 2, s.radius);
+			const inset = style.inset;
 			for (let i = 0; i < count && rects.length / 4 < maxBars * 4; i++) {
 				const c = s.cellColors?.[i];
 				if (!c) continue;
@@ -3868,7 +4488,7 @@ var scenePrimitives = (scene, limits = {}) => {
 				color: s.colorCss,
 				rects,
 				colors,
-				radius: s.radius
+				radius: style.radius
 			});
 			continue;
 		}
@@ -3970,7 +4590,7 @@ var boxPrimitives = (s, sc, range, xLo, xHi, maxBars) => {
 				x: cx,
 				y: sc.yToPx(v)
 			};
-			dots.push(p.x, p.y, s.pointSize);
+			dots.push(p.x, p.y, s.outlierSize);
 			dotColors.push(color);
 		}
 	}
@@ -3991,9 +4611,10 @@ var boxPrimitives = (s, sc, range, xLo, xHi, maxBars) => {
 	if (dots.length) prims.push({
 		kind: "dots",
 		seriesIndex: s.index,
-		opacity: .85,
+		opacity: s.outlierShape === "hollow" ? 0 : .85,
 		dots,
-		colors: dotColors
+		colors: dotColors,
+		stroke: 1.25
 	});
 	return prims;
 };
@@ -4049,8 +4670,39 @@ var barItem = (key, version, s, count, write, extra) => {
 		...extra
 	};
 };
-/** Render items of the visible series, back to front */
-var buildItems = (model, origin, version) => {
+/**
+* Inset and radius of the cells of a heatmap at a pixel density; the
+* renderers fade small insets out and overlap tiny cells (no seams)
+*/
+var cellStyleOf = (s, density) => {
+	if (!density) return {
+		inset: .5,
+		radius: Math.min(s.radius, 2)
+	};
+	const style = heatCellStyle(s.cellHalf.x * 2 * density.x, s.cellHalf.y * 2 * density.y, s.radius);
+	return {
+		inset: Math.max(.5, style.inset),
+		radius: style.radius
+	};
+};
+/**
+* What the heatmap items depend on besides the model: their cell style at
+* the current pixel density (`""` without heatmaps)
+*/
+var cellStyleKey = (model, density) => {
+	let key = "";
+	for (const s of model.series) {
+		if (s.type !== "heatmap" || s.hidden) continue;
+		const style = cellStyleOf(s, density);
+		key += `${style.inset}/${style.radius};`;
+	}
+	return key;
+};
+/**
+* Render items of the visible series, back to front; `density` sizes the
+* gaps and corners of heatmap cells
+*/
+var buildItems = (model, origin, version, density) => {
 	const items = [];
 	/** Outlines of the areas are drawn with the lines, above the bars */
 	const outlines = [];
@@ -4195,6 +4847,7 @@ var buildItems = (model, origin, version) => {
 			case "heatmap": {
 				const colors = s.cellColors;
 				const hy = s.cellHalf.y;
+				const style = cellStyleOf(s, density);
 				items.push(barItem(`${s.key}:cells`, version, s, count, (i, f, u) => {
 					const c = colors ? colors[i] : 0;
 					const valid = c !== 0 && Number.isFinite(x[i]);
@@ -4204,8 +4857,8 @@ var buildItems = (model, origin, version) => {
 					u[i * 4 + 3] = c;
 				}, {
 					halfWidth: s.cellHalf.x,
-					radius: s.radius,
-					inset: 1,
+					radius: style.radius,
+					inset: style.inset,
 					minHalf: 0,
 					sorted
 				}));
@@ -4395,7 +5048,7 @@ var boxItems = (s, origin, version) => {
 					const valid = Number.isFinite(v) && Number.isFinite(x[i]);
 					f[j * 4] = valid ? ox(i) : GAP;
 					f[j * 4 + 1] = valid ? oy(v) : GAP;
-					f[j * 4 + 2] = s.pointSize;
+					f[j * 4 + 2] = s.outlierSize;
 					u[j * 4 + 3] = colorAt(i);
 					j++;
 				}
@@ -4407,8 +5060,8 @@ var boxItems = (s, origin, version) => {
 				color: s.color,
 				instances: buffer,
 				count: n,
-				opacity: .85,
-				stroke: n <= 5e3 ? 1.25 : 0
+				opacity: s.outlierShape === "hollow" ? 0 : .85,
+				stroke: s.outlierShape === "hollow" || n <= 5e3 ? 1.25 : 0
 			});
 		}
 	}
@@ -4806,7 +5459,8 @@ var itemsSignature = (model, themeKey, stackOf) => {
 	for (const s of model.series) {
 		signature += `\n${s.key}|${s.type}|${idOf(s.cols)}|${s.colorCss}|${s.hidden}|${s.lineWidth}|${s.pointSize}|${s.opacity}|${s.barOffset}|${s.barHalfWidth}|${stackOf(s.index) ?? ""}|${s.curve}|${s.radius}`;
 		if (s.type === "candlestick") signature += `|${s.upColor}/${s.downColor}`;
-		else if (s.type === "heatmap") signature += `|${s.colorScale.join(";")}/${s.valueRange[0]},${s.valueRange[1]}/${s.cellHalf.x},${s.cellHalf.y}`;
+		else if (s.type === "heatmap") signature += `|${s.colorScale.join(";")}/${s.valueRange[0]},${s.valueRange[1]}/${s.colorMidpoint}/${s.cellHalf.x},${s.cellHalf.y}`;
+		else if (s.type === "boxplot") signature += `|${s.outlierShape}/${s.outlierSize}`;
 	}
 	return signature;
 };
@@ -4882,17 +5536,64 @@ var drawPrimitives = (ctx, primitives, plot) => {
 		}
 		ctx.globalAlpha = 1;
 	} else {
-		ctx.globalAlpha = p.opacity;
+		const stroke = p.stroke ?? 0;
 		for (let k = 0; k < p.dots.length; k += 3) {
-			ctx.fillStyle = p.colors[k / 3] ?? "#888";
+			const color = p.colors[k / 3] ?? "#888";
+			const r = p.dots[k + 2] / 2;
 			ctx.beginPath();
-			ctx.arc(p.dots[k], p.dots[k + 1], p.dots[k + 2] / 2, 0, Math.PI * 2);
-			ctx.fill();
+			ctx.arc(p.dots[k], p.dots[k + 1], Math.max(0, r - stroke / 2), 0, Math.PI * 2);
+			if (p.opacity > 0) {
+				ctx.globalAlpha = p.opacity;
+				ctx.fillStyle = color;
+				ctx.fill();
+			}
+			if (stroke > 0) {
+				ctx.globalAlpha = 1;
+				ctx.lineWidth = stroke;
+				ctx.strokeStyle = color;
+				ctx.stroke();
+			}
 		}
 		ctx.globalAlpha = 1;
 	}
 	ctx.restore();
 };
+/** The visual map of a heatmap: gradient bar, value labels, hover caret */
+var drawColorLegend = (ctx, ramp, scene) => {
+	const { theme } = scene;
+	const { bar, stops } = ramp;
+	const n = stops.length;
+	if (typeof ctx.createLinearGradient === "function") {
+		const gradient = ctx.createLinearGradient(bar.x, 0, bar.x + bar.width, 0);
+		stops.forEach((c, k) => gradient.addColorStop(k / Math.max(1, n - 1), c));
+		ctx.fillStyle = gradient;
+		roundedRect(ctx, bar.x, bar.y, bar.width, bar.height, bar.height / 2);
+		ctx.fill();
+	} else {
+		const w = bar.width / n;
+		stops.forEach((c, k) => {
+			ctx.fillStyle = c;
+			ctx.fillRect(bar.x + k * w, bar.y, w + .5, bar.height);
+		});
+	}
+	ctx.fillStyle = toCss(theme.text, .35);
+	for (const t of ramp.ticks) ctx.fillRect(Math.round(t), bar.y - 2, 1, bar.height + 4);
+	ctx.font = font(theme, 11);
+	ctx.textBaseline = "middle";
+	ctx.fillStyle = toCss(theme.textMuted);
+	for (const l of ramp.labels) {
+		ctx.textAlign = l.align;
+		ctx.fillText(l.text, l.x, l.y);
+	}
+	if (ramp.caret !== null) {
+		roundedRect(ctx, ramp.caret - 2, bar.y - 3, 4, bar.height + 6, 2);
+		ctx.fillStyle = toCss(theme.text);
+		ctx.fill();
+		ctx.lineWidth = 1.5;
+		ctx.strokeStyle = toCss(theme.background);
+		ctx.stroke();
+	}
+};
 /** Draws a scene (legend, axes, data, labels, hover) on a 2D context */
 var drawScene = (ctx, scene, items, origin, pixelRatio, painter = createCanvas2dPainter(ctx)) => {
 	const { width, height, theme, model, view, layout } = scene;
@@ -4914,6 +5615,8 @@ var drawScene = (ctx, scene, items, origin, pixelRatio, painter = createCanvas2d
 		theme,
 		annotations: scene.annotations
 	});
+	const ramp = scene.legend?.colors;
+	if (ramp) drawColorLegend(ctx, ramp, scene);
 	if (scene.legend) {
 		ctx.font = font(theme, 12);
 		ctx.textBaseline = "middle";
@@ -4966,6 +5669,11 @@ var drawScene = (ctx, scene, items, origin, pixelRatio, painter = createCanvas2d
 		}, Math.round(plot.x * dpr), Math.round(plot.y * dpr));
 	}
 	ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+	for (const mark of scene.hover?.marks ?? []) {
+		if (mark.kind !== "guide") continue;
+		ctx.fillStyle = toCss(theme.text, .06);
+		ctx.fillRect(mark.x, mark.y, mark.width, mark.height);
+	}
 	drawForeground(ctx, {
 		width,
 		height,
@@ -4973,7 +5681,8 @@ var drawScene = (ctx, scene, items, origin, pixelRatio, painter = createCanvas2d
 		theme,
 		annotations: scene.annotations,
 		pointLabels: [],
-		clear: false
+		clear: false,
+		connectors: scene.connectors
 	});
 	if (scene.pointLabels.length) {
 		ctx.save();
@@ -5017,15 +5726,25 @@ var drawScene = (ctx, scene, items, origin, pixelRatio, painter = createCanvas2d
 			ctx.restore();
 		}
 		for (const mark of hover.marks) {
-			if (mark.kind === "band") continue;
+			if (mark.kind === "band" || mark.kind === "guide") continue;
 			if (mark.kind === "cell") {
-				roundedRect(ctx, mark.x, mark.y, mark.width, mark.height, 3);
-				ctx.lineWidth = 3;
-				ctx.strokeStyle = toCss(theme.background);
-				ctx.stroke();
-				ctx.lineWidth = 1.5;
-				ctx.strokeStyle = toCss(theme.text, .55);
-				ctx.stroke();
+				const grow = Math.min(3, mark.width * .06, mark.height * .06);
+				const r = Math.max(2, mark.radius);
+				ctx.save();
+				ctx.shadowColor = "rgba(15, 23, 42, 0.4)";
+				ctx.shadowBlur = 12;
+				ctx.shadowOffsetY = 4;
+				roundedRect(ctx, mark.x - grow, mark.y - grow, mark.width + grow * 2, mark.height + grow * 2, r);
+				ctx.fillStyle = mark.color;
+				ctx.fill();
+				ctx.restore();
+				const inset = Math.min(2.75, mark.width / 5, mark.height / 5);
+				if (mark.width > 8 && mark.height > 8) {
+					roundedRect(ctx, mark.x + inset, mark.y + inset, mark.width - inset * 2, mark.height - inset * 2, Math.max(1, r - inset / 2));
+					ctx.lineWidth = 1.5;
+					ctx.strokeStyle = mark.ring;
+					ctx.stroke();
+				}
 				continue;
 			}
 			ctx.beginPath();
@@ -5095,6 +5814,12 @@ var drawScene = (ctx, scene, items, origin, pixelRatio, painter = createCanvas2d
 			ctx.textAlign = "left";
 			ctx.fillText(content.title, x, y);
 			y += lineHeight;
+			if (content.subtitle) {
+				ctx.font = font(theme, 11);
+				ctx.fillStyle = toCss(theme.textMuted);
+				ctx.fillText(content.subtitle, x, y - 2);
+				y += lineHeight;
+			}
 			for (const row of content.rows) {
 				x = left;
 				if (row.color) {
@@ -5102,8 +5827,8 @@ var drawScene = (ctx, scene, items, origin, pixelRatio, painter = createCanvas2d
 					ctx.beginPath();
 					ctx.arc(x + 4, y, 4, 0, Math.PI * 2);
 					ctx.fill();
-					x += 14;
 				}
+				x += tip.swatchWidth;
 				ctx.font = font(theme, 12);
 				ctx.textAlign = "left";
 				ctx.fillStyle = toCss(theme.textMuted);
@@ -5133,6 +5858,7 @@ var createCanvasChart = (config) => {
 	let frameId = null;
 	let items = [];
 	let itemsModel = null;
+	let itemsKey0 = "";
 	let itemsKey = "";
 	let options = config.options;
 	/** Ids of the themes seen (the controller replaces its theme on changes) */
@@ -5171,15 +5897,21 @@ var createCanvasChart = (config) => {
 		fontSet = "";
 		if (itemsModel !== scene.model) {
 			itemsModel = scene.model;
-			const key = itemsSignature(scene.model, themeId(scene.theme), (index) => options.series[index]?.stack);
-			if (key !== itemsKey) {
-				itemsKey = key;
-				origin = {
-					x: mid(scene.model.base.x),
-					y: mid(scene.model.base.y)
-				};
-				items = buildItems(scene.model, origin, ++version);
-			}
+			itemsKey0 = itemsSignature(scene.model, themeId(scene.theme), (index) => options.series[index]?.stack);
+		}
+		const sc = scene.layout.scales;
+		const density = {
+			x: 1 / Math.abs(sc.xPerPx),
+			y: 1 / Math.abs(sc.yPerPx)
+		};
+		const key = `${itemsKey0}|${cellStyleKey(scene.model, density)}`;
+		if (key !== itemsKey) {
+			itemsKey = key;
+			origin = {
+				x: mid(scene.model.base.x),
+				y: mid(scene.model.base.y)
+			};
+			items = buildItems(scene.model, origin, ++version, density);
 		}
 		drawScene(ctx, scene, items, origin, dpr, painter);
 		fontSet = "";
@@ -5347,6 +6079,7 @@ var heatmapChartOptions = (config, base = {}) => {
 			})),
 			colorScale: config.colorScale,
 			valueRange: config.valueRange,
+			colorMidpoint: config.colorMidpoint,
 			radius: config.radius,
 			format: config.format
 		}],
@@ -5366,7 +6099,7 @@ var heatmapChartOptions = (config, base = {}) => {
 			grid: false,
 			...base.yAxis
 		},
-		legend: base.legend ?? false,
+		legend: base.legend ?? true,
 		interaction: base.interaction ?? { zoom: false },
 		tooltip: base.tooltip ?? { mode: "nearest" }
 	};
@@ -5811,7 +6544,8 @@ var waterfallSeries = (steps, options = {}) => {
 		color: total,
 		data,
 		showLabels: options.labels ?? false,
-		format: options.format
+		format: options.format,
+		connector: options.connector ?? true
 	};
 };
 /**
@@ -5920,7 +6654,10 @@ var time = (v) => v instanceof Date ? v.getTime() : v === void 0 ? NaN : v;
 var ganttSeries = (tasks, options = {}) => {
 	const locale = resolveLocale(options.locale);
 	const names = presetLabels(locale);
+	const rows = chartLabels(locale);
 	const taskName = options.taskName ?? names.tasks;
+	const progressName = options.progressName ?? names.progress;
+	const separator = /^(zh|ja)\b/i.test(locale) ? "、" : ", ";
 	const groups = [];
 	for (const t of tasks) {
 		const g = t.group ?? taskName;
@@ -5943,19 +6680,32 @@ var ganttSeries = (tasks, options = {}) => {
 		opacity: .3,
 		barWidth: .62,
 		radius: 4,
-		data: tasks.filter((t) => !t.milestone && (t.group ?? taskName) === g).map((t) => ({
-			x: t.name,
-			y0: time(t.start),
-			y: time(t.end ?? t.start),
-			...t.color ? { color: t.color } : {}
-		}))
+		data: tasks.filter((t) => !t.milestone && (t.group ?? taskName) === g).map((t) => {
+			const details = [];
+			if (t.progress !== void 0) details.push({
+				name: progressName,
+				value: formatProgress(Math.min(1, Math.max(0, t.progress)))
+			});
+			if (t.dependencies?.length) details.push({
+				name: options.dependenciesName ?? rows.dependencies,
+				value: t.dependencies.join(separator)
+			});
+			return {
+				x: t.name,
+				y0: time(t.start),
+				y: time(t.end ?? t.start),
+				...t.color ? { color: t.color } : {},
+				...details.length ? { details } : {}
+			};
+		})
 	}));
 	const progress = tasks.filter((t) => !t.milestone && t.progress !== void 0 && t.progress > 0);
 	if (progress.length) series.push({
 		id: "gantt:progress",
-		name: options.progressName ?? names.progress,
+		name: progressName,
 		type: "bar",
 		stack: "gantt",
+		tooltip: false,
 		color: "var(--text-secondary-color, #6b7280)",
 		radius: 4,
 		data: progress.map((t) => {
@@ -6055,6 +6805,65 @@ var ellipsize = (text, max, font, measure) => {
 	}
 	return lo ? text.slice(0, lo).trimEnd() + "…" : "";
 };
+/** Characters that must not start a line (closing brackets and punctuation) */
+var NO_LINE_START = /^[)\]}、。，．：；！？）」』】》〉,.:;!?%…]/;
+/** Greedy line breaking at `max` pixels, without a line limit */
+var breakLines = (text, max, font, measure) => {
+	const lines = [];
+	let rest = text.trim();
+	while (rest) {
+		if (measure(rest, font) <= max) {
+			lines.push(rest);
+			break;
+		}
+		let lo = 0;
+		let hi = rest.length;
+		while (lo < hi) {
+			const mid = lo + hi + 1 >> 1;
+			if (measure(rest.slice(0, mid), font) <= max) lo = mid;
+			else hi = mid - 1;
+		}
+		if (!lo) return null;
+		let cut = lo;
+		if (rest[lo] !== " ") {
+			const space = rest.lastIndexOf(" ", lo);
+			if (space > lo * .4) cut = space;
+			else while (cut > 1 && NO_LINE_START.test(rest.slice(cut))) cut--;
+		}
+		lines.push(rest.slice(0, cut).trimEnd());
+		rest = rest.slice(cut).trimStart();
+	}
+	return lines;
+};
+/**
+* Breaks a text into at most `maxLines` lines of `max` pixels, at spaces when
+* possible (anywhere otherwise, e.g. CJK, never before closing punctuation);
+* a text that fits is balanced across its lines, one that does not ends the
+* last line with an ellipsis
+*/
+var wrapText = (text, max, font, measure, maxLines = 2) => {
+	const whole = text.trim();
+	if (!whole || maxLines < 1) return [];
+	const lines = breakLines(whole, max, font, measure);
+	if (!lines) {
+		const last = ellipsize(whole, max, font, measure);
+		return last ? [last] : [];
+	}
+	if (lines.length > maxLines) {
+		const head = lines.slice(0, maxLines - 1);
+		let rest = whole;
+		for (const line of head) rest = rest.slice(line.length).trimStart();
+		const tail = ellipsize(rest, max, font, measure);
+		return tail ? [...head, tail] : head;
+	}
+	if (lines.length < 2) return lines;
+	const lo = measure(whole, font) / lines.length;
+	for (let k = 0; k <= 8; k++) {
+		const balanced = breakLines(whole, lo + (max - lo) * k / 8, font, measure);
+		if (balanced && balanced.length <= lines.length) return balanced;
+	}
+	return lines;
+};
 /** Stable keys of named values: the name, `name#2` for duplicates */
 var uniqueKeys = (names) => {
 	const seen = /* @__PURE__ */ new Map();
@@ -6342,6 +7151,56 @@ var linkStyle = (ctx, node) => {
 	gradient.addColorStop(1, node.color1);
 	return gradient;
 };
+/** Whether a chord ribbon joins an arc to itself (a self flow) */
+var ribbonIsLoop = (node) => Math.abs(node.s0 - node.t0) < 1e-9 && Math.abs(node.s1 - node.t1) < 1e-9;
+/** Control point of the inward bulge of a self-flow ribbon */
+var loopControl = (node) => {
+	const m = (node.s0 + node.s1) / 2;
+	return [node.cx + node.r * .4 * Math.cos(m), node.cy + node.r * .4 * Math.sin(m)];
+};
+/** Outline of a chord ribbon: source arc, curve, target arc or arrowhead, curve */
+var ribbonPath = (ctx, node) => {
+	const { cx, cy, r } = node;
+	const at = (a, radius = r) => [cx + radius * Math.cos(a), cy + radius * Math.sin(a)];
+	ctx.beginPath();
+	const s = at(node.s0);
+	ctx.moveTo(s[0], s[1]);
+	if (node.s1 > node.s0) ctx.arc(cx, cy, r, node.s0, node.s1);
+	if (ribbonIsLoop(node)) {
+		const [qx, qy] = loopControl(node);
+		ctx.quadraticCurveTo(qx, qy, s[0], s[1]);
+		ctx.closePath();
+		return;
+	}
+	if (node.head > 0) {
+		const p0 = at(node.t0, r - node.head);
+		const tip = at((node.t0 + node.t1) / 2);
+		const p1 = at(node.t1, r - node.head);
+		ctx.quadraticCurveTo(cx, cy, p0[0], p0[1]);
+		ctx.lineTo(tip[0], tip[1]);
+		ctx.lineTo(p1[0], p1[1]);
+	} else {
+		const t = at(node.t0);
+		ctx.quadraticCurveTo(cx, cy, t[0], t[1]);
+		if (node.t1 > node.t0) ctx.arc(cx, cy, r, node.t0, node.t1);
+	}
+	ctx.quadraticCurveTo(cx, cy, s[0], s[1]);
+	ctx.closePath();
+};
+var ribbonStyle = (ctx, node) => {
+	if (node.color0 === node.color1 || typeof ctx.createLinearGradient !== "function") return node.color0;
+	const ms = (node.s0 + node.s1) / 2;
+	const mt = (node.t0 + node.t1) / 2;
+	const x0 = node.cx + node.r * Math.cos(ms);
+	const y0 = node.cy + node.r * Math.sin(ms);
+	const x1 = node.cx + node.r * Math.cos(mt);
+	const y1 = node.cy + node.r * Math.sin(mt);
+	if (Math.hypot(x1 - x0, y1 - y0) < 1) return node.color0;
+	const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+	gradient.addColorStop(0, node.color0);
+	gradient.addColorStop(1, node.color1);
+	return gradient;
+};
 /**
 * Draws a scene in CSS pixels (the caller sets the pixel-ratio transform and
 * clears the canvas). `hover` emphasizes an item and dims the others.
@@ -6494,6 +7353,17 @@ var drawShapeScene = (ctx, scene, hover) => {
 				ctx.stroke();
 				ctx.lineCap = "round";
 				break;
+			case "ribbon":
+				if (active && node.activeAlpha !== void 0) ctx.globalAlpha = base * node.activeAlpha;
+				ribbonPath(ctx, node);
+				ctx.fillStyle = ribbonStyle(ctx, node);
+				ctx.fill();
+				if (focused) {
+					ctx.strokeStyle = node.color0;
+					ctx.lineWidth = 1;
+					ctx.stroke();
+				}
+				break;
 			case "guide": {
 				const k = hover?.indicator;
 				if (k === void 0 || !node.ends[k]) break;
@@ -6571,8 +7441,10 @@ var drawShapeTooltip = (ctx, theme, box) => {
 		ctx.font = font(theme, 12, 600);
 		ctx.fillStyle = toCss(theme.text);
 		ctx.textAlign = "left";
-		ctx.fillText(content.title, x, y);
-		y += lineHeight;
+		for (const line of box.titleLines ?? [content.title]) {
+			ctx.fillText(line, x, y);
+			y += lineHeight;
+		}
 		for (const row of content.rows) {
 			x = left;
 			if (row.color) {
@@ -6656,6 +7528,7 @@ var nodeContains = (node, x, y) => {
 			return wrapFrom(Math.atan2(y - node.cy, x - node.cx), node.a0) <= node.a1;
 		}
 		case "link": return pointNearLink(x, y, node);
+		case "ribbon": return Math.hypot(x - node.cx, y - node.cy) <= node.r + 1 && pointInPolygon(x, y, ribbonOutline(node));
 		default: return false;
 	}
 };
@@ -6691,6 +7564,46 @@ var pointNearLink = (x, y, node) => {
 	return false;
 };
 var clampUnit = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+/** Polygon (flat x, y list) approximating a chord ribbon, as drawn */
+var ribbonOutline = (node) => {
+	const { cx, cy, r } = node;
+	const pts = [];
+	const arc = (a0, a1, radius = r) => {
+		const steps = Math.max(1, Math.ceil((a1 - a0) / .06));
+		for (let k = 0; k <= steps; k++) {
+			const a = a0 + (a1 - a0) * k / steps;
+			pts.push(cx + radius * Math.cos(a), cy + radius * Math.sin(a));
+		}
+	};
+	const quad = (qx, qy, x, y) => {
+		const x0 = pts[pts.length - 2];
+		const y0 = pts[pts.length - 1];
+		for (let k = 1; k <= 16; k++) {
+			const t = k / 16;
+			const u = 1 - t;
+			pts.push(u * u * x0 + 2 * u * t * qx + t * t * x, u * u * y0 + 2 * u * t * qy + t * t * y);
+		}
+	};
+	const at = (a, radius = r) => [cx + radius * Math.cos(a), cy + radius * Math.sin(a)];
+	arc(node.s0, Math.max(node.s0, node.s1));
+	const s = at(node.s0);
+	if (ribbonIsLoop(node)) {
+		const [qx, qy] = loopControl(node);
+		quad(qx, qy, s[0], s[1]);
+		return pts;
+	}
+	if (node.head > 0) {
+		const p0 = at(node.t0, r - node.head);
+		quad(cx, cy, p0[0], p0[1]);
+		pts.push(...at((node.t0 + node.t1) / 2), ...at(node.t1, r - node.head));
+	} else {
+		const t = at(node.t0);
+		quad(cx, cy, t[0], t[1]);
+		arc(node.t0, Math.max(node.t0, node.t1));
+	}
+	quad(cx, cy, s[0], s[1]);
+	return pts;
+};
 /** Radar: the vertex under the pointer, else the smallest polygon containing it */
 var hitRadar = (scene, x, y) => {
 	const radar = scene.radar;
@@ -6811,6 +7724,8 @@ var rangeFills = (o, c, count) => {
 		return own ? resolveWith(theme, own, gray) : gray;
 	});
 };
+/** Line height of the wrapped names */
+var NAME_LINE = 15;
 var layoutBullet = (o, c) => {
 	const { theme, area, measure, hidden } = c;
 	const keys = keysOf$3(o);
@@ -6834,9 +7749,14 @@ var layoutBullet = (o, c) => {
 	const items = [];
 	const hasSubtitle = o.data.some((d, i) => !!d.subtitle && weights[i] > 0);
 	const valueText = o.data.map((d) => c.format(finite(d.value)));
-	const labelW = vertical ? 0 : Math.min(area.width * .32, Math.max(0, ...o.data.map((d) => Math.max(measure(d.name, nameFont), d.subtitle ? measure(d.subtitle, subFont) : 0))) + 14);
+	const nameW = o.data.map((d) => measure(d.name, nameFont));
+	const labelCap = area.width * (area.width < 420 ? .34 : .4);
+	const lineW = o.data.map((d, i) => nameW[i] <= labelCap - 14 ? nameW[i] : Math.max(0, ...wrapText(d.name, labelCap - 14, nameFont, measure, 2).map((l) => measure(l, nameFont))));
+	const labelW = vertical ? 0 : Math.min(labelCap, Math.max(0, ...o.data.map((d, i) => Math.max(lineW[i], d.subtitle ? measure(d.subtitle, subFont) : 0))) + 14);
 	const valueW = vertical ? 0 : Math.min(area.width * .2, Math.max(0, ...valueText.map((t) => measure(t, valueFont))) + 12);
-	const labelH = vertical ? 22 + (hasSubtitle ? 14 : 0) : 0;
+	const columnW = area.width / total;
+	const wraps = vertical && o.data.some((_, i) => weights[i] > 0 && nameW[i] > columnW - 8);
+	const labelH = vertical ? 22 + (wraps ? NAME_LINE : 0) + (hasSubtitle ? 14 : 0) : 0;
 	const valueH = vertical ? 20 : 0;
 	const unit = (vertical ? area.width : area.height) / total;
 	let offset = 0;
@@ -6970,25 +7890,25 @@ var layoutBullet = (o, c) => {
 		}
 		if (vertical) {
 			const room = Math.max(0, slot - 8);
-			const name = ellipsize(d.name, room, nameFont, measure);
+			const lines = wrapText(d.name, room, nameFont, measure, wraps ? 2 : 1);
 			const bottom = area.y + area.height;
-			if (name) nodes.push({
+			lines.forEach((line, k) => nodes.push({
 				kind: "text",
 				x: mid,
-				y: bottom - labelH + 16,
-				text: name,
+				y: bottom - labelH + 16 + k * NAME_LINE,
+				text: line,
 				font: nameFont,
 				color: text,
 				align: "center",
 				baseline: "middle",
 				hit: i,
 				alpha
-			});
+			}));
 			const sub = d.subtitle ? ellipsize(d.subtitle, room, subFont, measure) : "";
 			if (sub) nodes.push({
 				kind: "text",
 				x: mid,
-				y: bottom - labelH + 31,
+				y: bottom - labelH + 31 + (wraps ? NAME_LINE : 0),
 				text: sub,
 				font: subFont,
 				color: muted,
@@ -7012,25 +7932,28 @@ var layoutBullet = (o, c) => {
 			});
 		} else {
 			const room = Math.max(0, labelW - 14);
-			const name = ellipsize(d.name, room, nameFont, measure);
-			const sub = d.subtitle && slot >= 34 ? ellipsize(d.subtitle, room, subFont, measure) : "";
+			const avail = slot - 4;
+			const sub = d.subtitle && avail >= 29 ? ellipsize(d.subtitle, room, subFont, measure) : "";
+			const subH = sub ? 13 : 0;
+			const lines = wrapText(d.name, room, nameFont, measure, avail >= 30 + subH ? 2 : 1);
+			const top = mid - (lines.length * NAME_LINE + subH) / 2;
 			const x = area.x + labelW - 14;
-			if (name) nodes.push({
+			lines.forEach((line, k) => nodes.push({
 				kind: "text",
 				x,
-				y: sub ? mid - 7 : mid,
-				text: name,
+				y: top + NAME_LINE / 2 + k * NAME_LINE,
+				text: line,
 				font: nameFont,
 				color: text,
 				align: "right",
 				baseline: "middle",
 				hit: i,
 				alpha
-			});
+			}));
 			if (sub) nodes.push({
 				kind: "text",
 				x,
-				y: mid + 8,
+				y: top + lines.length * NAME_LINE + subH / 2,
 				text: sub,
 				font: subFont,
 				color: muted,
@@ -7112,6 +8035,7 @@ var SHAPE_LABELS = {
 		target: "Target",
 		ofTarget: "Of target",
 		range: "Range",
+		reverse: "Reverse",
 		series: "Series {index}",
 		pieChart: "Pie chart",
 		donutChart: "Donut chart",
@@ -7125,7 +8049,8 @@ var SHAPE_LABELS = {
 		sunburstChart: "Sunburst chart",
 		radialBarChart: "Radial bar chart",
 		calendarHeatmap: "Calendar heatmap",
-		bulletChart: "Bullet chart"
+		bulletChart: "Bullet chart",
+		chordChart: "Chord diagram"
 	},
 	zh: {
 		noData: "暂无数据",
@@ -7142,6 +8067,7 @@ var SHAPE_LABELS = {
 		target: "目标",
 		ofTarget: "目标达成",
 		range: "区间",
+		reverse: "反向",
 		series: "系列 {index}",
 		pieChart: "饼图",
 		donutChart: "环形图",
@@ -7155,7 +8081,8 @@ var SHAPE_LABELS = {
 		sunburstChart: "旭日图",
 		radialBarChart: "径向条形图",
 		calendarHeatmap: "日历热力图",
-		bulletChart: "子弹图"
+		bulletChart: "子弹图",
+		chordChart: "弦图"
 	},
 	ja: {
 		noData: "データなし",
@@ -7172,6 +8099,7 @@ var SHAPE_LABELS = {
 		target: "目標",
 		ofTarget: "目標達成率",
 		range: "範囲",
+		reverse: "逆方向",
 		series: "系列 {index}",
 		pieChart: "円グラフ",
 		donutChart: "ドーナツグラフ",
@@ -7185,7 +8113,8 @@ var SHAPE_LABELS = {
 		sunburstChart: "サンバースト図",
 		radialBarChart: "円形棒グラフ",
 		calendarHeatmap: "カレンダーヒートマップ",
-		bulletChart: "ブレットグラフ"
+		bulletChart: "ブレットグラフ",
+		chordChart: "コードダイアグラム"
 	},
 	fr: {
 		noData: "Aucune donnée",
@@ -7202,6 +8131,7 @@ var SHAPE_LABELS = {
 		target: "Objectif",
 		ofTarget: "Atteinte de l’objectif",
 		range: "Plage",
+		reverse: "Sens inverse",
 		series: "Série {index}",
 		pieChart: "Graphique circulaire",
 		donutChart: "Graphique en anneau",
@@ -7215,7 +8145,8 @@ var SHAPE_LABELS = {
 		sunburstChart: "Diagramme en rayons de soleil",
 		radialBarChart: "Graphique à barres radiales",
 		calendarHeatmap: "Calendrier thermique",
-		bulletChart: "Graphique à puces"
+		bulletChart: "Graphique à puces",
+		chordChart: "Diagramme d’accords"
 	}
 };
 /** Texts of a chart: its `locale` (the page language by default) and `texts` overrides */
@@ -7787,6 +8718,581 @@ var layoutCalendar = (o, c) => {
 	};
 };
 //#endregion
+//#region ../charts/src/engine/shapes/chord.ts
+/**
+* Resolves the groups (declared, then the ones only named by links) and
+* the square flow matrix (from `links`, else `matrix`)
+*/
+var resolveChord = (o) => {
+	const names = [];
+	const colors = [];
+	const byName = /* @__PURE__ */ new Map();
+	for (const g of o.groups ?? []) {
+		const group = typeof g === "string" ? { name: g } : g;
+		if (!group || typeof group.name !== "string") continue;
+		if (!byName.has(group.name)) byName.set(group.name, names.length);
+		names.push(group.name);
+		colors.push(group.color);
+	}
+	const cellColors = /* @__PURE__ */ new Map();
+	if (o.links) {
+		const declared = names.length;
+		const resolve = (end) => {
+			if (typeof end === "number") return Number.isInteger(end) && end >= 0 && end < declared ? end : -1;
+			if (typeof end !== "string") return -1;
+			const known = byName.get(end);
+			if (known !== void 0) return known;
+			byName.set(end, names.length);
+			names.push(end);
+			colors.push(void 0);
+			return names.length - 1;
+		};
+		const flows = [];
+		for (const l of o.links) {
+			if (!l) continue;
+			const s = resolve(l.source);
+			const t = resolve(l.target);
+			if (s < 0 || t < 0) continue;
+			flows.push([
+				s,
+				t,
+				positive(l.value),
+				l.color
+			]);
+		}
+		const n = names.length;
+		const matrix = names.map(() => new Array(n).fill(0));
+		for (const [s, t, v, color] of flows) {
+			matrix[s][t] += v;
+			if (color) cellColors.set(s * n + t, color);
+		}
+		return {
+			names,
+			colors,
+			matrix,
+			cellColors
+		};
+	}
+	const rows = o.matrix ?? [];
+	const n = Math.max(names.length, rows.length);
+	for (let i = names.length; i < n; i++) {
+		names.push(String(i + 1));
+		colors.push(void 0);
+	}
+	return {
+		names,
+		colors,
+		matrix: names.map((_, i) => names.map((__, j) => positive(rows[i]?.[j]))),
+		cellColors
+	};
+};
+/** Keys of the animated quantities: `~group` (shown 0-1) and `group→group` */
+var chordKeys = (m) => {
+	const keys = uniqueKeys(m.names);
+	return {
+		group: (i) => `~${keys[i]}`,
+		cell: (i, j) => `${keys[i]}\u2192${keys[j]}`
+	};
+};
+/** Whether a cell is a flow of the diagram (directed: self flows are ignored) */
+var isFlow = (m, directed, i, j) => m.matrix[i][j] > 0 && !(directed && i === j);
+var chordValues = (o, hidden, out) => {
+	const m = resolveChord(o);
+	const k = chordKeys(m);
+	const directed = !!o.directed;
+	m.names.forEach((_, i) => {
+		out.set(k.group(i), hidden.has(i) ? 0 : 1);
+		m.names.forEach((__, j) => {
+			if (isFlow(m, directed, i, j)) out.set(k.cell(i, j), hidden.has(i) || hidden.has(j) ? 0 : m.matrix[i][j]);
+		});
+	});
+};
+/** Totals of a matrix: outgoing, incoming and arc value of every group */
+var totals = (matrix, directed) => {
+	const n = matrix.length;
+	const out = new Array(n).fill(0);
+	const inc = new Array(n).fill(0);
+	for (let i = 0; i < n; i++) for (let j = 0; j < n; j++) {
+		if (directed && i === j) continue;
+		out[i] += matrix[i][j];
+		inc[j] += matrix[i][j];
+	}
+	return {
+		out,
+		inc,
+		value: out.map((v, i) => directed ? v + inc[i] : v)
+	};
+};
+/** Smallest of 1, 2, 5 × 10^k not below `raw` */
+var niceCeil = (raw) => {
+	if (!(raw > 0) || !Number.isFinite(raw)) return 0;
+	const base = Math.pow(10, Math.floor(Math.log10(raw)));
+	for (const f of [
+		1,
+		2,
+		5,
+		10
+	]) if (f * base >= raw * (1 - 1e-9)) return f * base;
+	return 10 * base;
+};
+var LABEL_FONT_SIZE = 12;
+var TICK_BAND = 22;
+var layoutChord = (o, c) => {
+	const { theme, area, measure, hidden } = c;
+	const model = resolveChord(o);
+	const { names, matrix: raw } = model;
+	const n = names.length;
+	if (!n) return emptyLayout(c);
+	const directed = !!o.directed;
+	const keys = chordKeys(model);
+	const flow = (i, j) => isFlow(model, directed, i, j);
+	const shown = raw.map((row, i) => row.map((v, j) => flow(i, j) ? Math.max(0, c.value(keys.cell(i, j), hidden.has(i) || hidden.has(j) ? 0 : v)) : 0));
+	const target = raw.map((row, i) => row.map((v, j) => flow(i, j) && !hidden.has(i) && !hidden.has(j) ? v : 0));
+	const now = totals(shown, directed);
+	const goal = totals(target, directed);
+	const whole = goal.value.reduce((a, b) => a + b, 0);
+	const visibleWeight = names.map((_, i) => goal.value[i] > 0 || now.value[i] > 1e-9 ? clamp(c.value(keys.group(i), hidden.has(i) ? 0 : 1), 0, 1) : 0);
+	const sumNow = now.value.reduce((a, b) => a + b, 0);
+	if (sumNow <= 1e-12) return emptyLayout(c);
+	const allGoal = totals(raw.map((row, i) => row.map((v, j) => flow(i, j) ? v : 0)), directed).value;
+	const order = names.map((_, i) => i);
+	if (o.sortGroups === "ascending" || o.sortGroups === "descending") {
+		const sign = o.sortGroups === "ascending" ? 1 : -1;
+		order.sort((a, b) => sign * (allGoal[a] - allGoal[b]) || a - b);
+	}
+	const pos = new Array(n);
+	order.forEach((g, p) => pos[g] = p);
+	const cx = area.x + area.width / 2;
+	const cy = area.y + area.height / 2;
+	const half = Math.min(area.width, area.height) / 2;
+	const labelMode = o.labels ?? "auto";
+	const nameFont = font(theme, LABEL_FONT_SIZE, 500);
+	const tickFont = font(theme, 10);
+	const tickOption = o.ticks;
+	const showTicks = tickOption === false ? false : typeof tickOption === "number" ? tickOption > 0 : half >= 150;
+	const tickBand = showTicks ? TICK_BAND : 0;
+	const pad = clamp(finite(o.padAngle, 2), 0, 45) * (Math.PI / 180);
+	const padTotal = pad * visibleWeight.reduce((a, b) => a + b, 0);
+	const padScale = padTotal > TAU * .5 ? TAU * .5 / padTotal : 1;
+	const k = (TAU - padTotal * padScale) / sumNow;
+	const start = -Math.PI / 2 + finite(o.startAngle) * Math.PI / 180;
+	const arcs = new Array(n);
+	{
+		let a = start + pad * padScale * (visibleWeight[order[0]] ?? 0) / 2;
+		for (const g of order) {
+			const a0 = a;
+			const a1 = a0 + now.value[g] * k;
+			arcs[g] = {
+				a0,
+				a1
+			};
+			a = a1 + pad * padScale * visibleWeight[g];
+		}
+	}
+	const drawnGroup = (g) => arcs[g].a1 - arcs[g].a0 > 1e-6;
+	const nameW = names.map((name) => measure(name, nameFont));
+	const fitsTangential = (r) => order.every((g) => !drawnGroup(g) || nameW[g] + 6 <= (arcs[g].a1 - arcs[g].a0 + pad * padScale * .8) * r);
+	let mode = labelMode === "none" ? "none" : labelMode === "radial" ? "radial" : "tangential";
+	const tangentialRoom = 22;
+	if (labelMode === "auto" && !fitsTangential(Math.max(1, half - 12))) mode = "radial";
+	const reach = (a) => {
+		const cos = Math.abs(Math.cos(a));
+		const sin = Math.abs(Math.sin(a));
+		return Math.min(cos > 1e-6 ? (area.width / 2 - 2) / cos : Infinity, sin > 1e-6 ? (area.height / 2 - LABEL_FONT_SIZE / 2 - 1) / sin : Infinity);
+	};
+	const midOf = (g) => (arcs[g].a0 + arcs[g].a1) / 2;
+	const horizontal = (a) => Math.abs(Math.sin(a)) > .92;
+	let outer;
+	if (mode === "radial") {
+		outer = half - tickBand - 8;
+		for (const g of order) if (drawnGroup(g) && visibleWeight[g] > .5) {
+			const a = midOf(g);
+			const need = horizontal(a) ? 14 : nameW[g];
+			outer = Math.min(outer, reach(a) - need - tickBand - 10);
+		}
+		outer = Math.max(half * .5, outer);
+	} else outer = half - tickBand - (mode === "none" ? 0 : tangentialRoom) - 2;
+	outer = Math.max(16, outer);
+	const arcWidth = clamp(finite(o.arcWidth, clamp(outer * .06, 8, 18)), 2, outer * .5);
+	const inner = outer - arcWidth;
+	const ribbonR = Math.max(4, inner - 2);
+	const segments = names.map(() => []);
+	for (let i = 0; i < n; i++) for (let j = 0; j < n; j++) if (directed) {
+		if (flow(i, j)) {
+			segments[i].push({
+				j,
+				dir: "out",
+				raw: raw[i][j],
+				a0: 0,
+				a1: 0
+			});
+			segments[j].push({
+				j: i,
+				dir: "in",
+				raw: raw[i][j],
+				a0: 0,
+				a1: 0
+			});
+		}
+	} else if (flow(i, j) || flow(j, i)) segments[i].push({
+		j,
+		dir: "out",
+		raw: raw[i][j],
+		a0: 0,
+		a1: 0
+	});
+	const sortSub = o.sortSubgroups ?? "auto";
+	segments.forEach((list, i) => {
+		const offset = (j) => {
+			const d = (pos[j] - pos[i] + n) % n;
+			return d === 0 ? n / 2 : d;
+		};
+		list.sort((a, b) => {
+			const dir = Number(a.dir === "in") - Number(b.dir === "in");
+			if (sortSub === "ascending" || sortSub === "descending") return (sortSub === "ascending" ? 1 : -1) * (a.raw - b.raw) || pos[a.j] - pos[b.j] || dir;
+			if (sortSub === "none") return pos[a.j] - pos[b.j] || dir;
+			return offset(b.j) - offset(a.j) || dir;
+		});
+		let a = arcs[i].a0;
+		for (const s of list) {
+			const v = s.dir === "out" ? shown[i][s.j] : shown[s.j][i];
+			s.a0 = a;
+			s.a1 = a + v * k;
+			a = s.a1;
+		}
+	});
+	const segment = (g, j, dir) => segments[g].find((s) => s.j === j && s.dir === dir);
+	const css = names.map((_, i) => c.color(model.colors[i], i)).map((col) => toCss(col));
+	const neutral = toCss(mix(theme.grid, theme.textMuted, .45));
+	const colorMode = o.ribbonColor ?? "gradient";
+	const opacity = clamp(finite(o.ribbonOpacity, .65), .02, 1);
+	const activeAlpha = Math.min(1, opacity + .25);
+	const head = o.arrows ?? directed ? clamp(ribbonR * .07, 5, 12) : 0;
+	const ribbons = [];
+	const ribbonIndex = (s, t) => n + s * n + t;
+	for (let i = 0; i < n; i++) for (let j = directed ? 0 : i; j < n; j++) if (directed) {
+		if (!flow(i, j)) continue;
+		const src = segment(i, j, "out");
+		const tgt = segment(j, i, "in");
+		if (src && tgt) ribbons.push({
+			index: ribbonIndex(i, j),
+			s: i,
+			t: j,
+			src,
+			tgt
+		});
+	} else {
+		if (!flow(i, j) && !flow(j, i)) continue;
+		const [s, t] = raw[j][i] > raw[i][j] ? [j, i] : [i, j];
+		const src = segment(s, t, "out");
+		const tgt = segment(t, s, "out");
+		if (src && tgt) ribbons.push({
+			index: ribbonIndex(s, t),
+			s,
+			t,
+			src,
+			tgt
+		});
+	}
+	const ribbonsOf = names.map(() => []);
+	for (const r of ribbons) {
+		ribbonsOf[r.s].push(r.index);
+		if (r.t !== r.s) ribbonsOf[r.t].push(r.index);
+	}
+	const nodes = [];
+	const width = (r) => r.src.a1 - r.src.a0 + (r.tgt.a1 - r.tgt.a0);
+	for (const r of ribbons.slice().sort((a, b) => width(b) - width(a))) {
+		if (width(r) <= 1e-6) continue;
+		const own = model.cellColors.get(r.s * n + r.t) ?? (directed ? void 0 : model.cellColors.get(r.t * n + r.s));
+		let c0;
+		let c1;
+		if (own) c0 = c1 = toCss(c.color(own, r.s));
+		else if (colorMode === "source") c0 = c1 = css[r.s];
+		else if (colorMode === "target") c0 = c1 = css[r.t];
+		else if (colorMode === "neutral") c0 = c1 = neutral;
+		else {
+			c0 = css[r.s];
+			c1 = css[r.t];
+		}
+		nodes.push({
+			kind: "ribbon",
+			cx,
+			cy,
+			r: ribbonR,
+			s0: r.src.a0,
+			s1: r.src.a1,
+			t0: r.tgt.a0,
+			t1: r.tgt.a1,
+			head: r.s === r.t ? 0 : head,
+			color0: c0,
+			color1: c1,
+			alpha: opacity,
+			activeAlpha,
+			hit: r.index,
+			also: r.s === r.t ? [r.s] : [r.s, r.t]
+		});
+	}
+	for (const g of order) {
+		if (!drawnGroup(g)) continue;
+		nodes.push({
+			kind: "sector",
+			cx,
+			cy,
+			r0: inner,
+			r1: outer,
+			a0: arcs[g].a0,
+			a1: arcs[g].a1,
+			pad: 0,
+			corner: Math.min(2, arcWidth / 4),
+			fill: css[g],
+			hit: g,
+			also: ribbonsOf[g],
+			alpha: visibleWeight[g]
+		});
+	}
+	const muted = toCss(theme.textMuted);
+	const tickColor = toCss(theme.textMuted, .7);
+	if (showTicks) {
+		const unitPx = k * outer;
+		const tickFormat = o.tickFormat ?? localeFormat(c.locale);
+		const labelPx = measure(tickFormat(Math.max(...allGoal)), tickFont) + 14;
+		let major = typeof tickOption === "number" ? tickOption : niceCeil(labelPx / Math.max(unitPx, 1e-12));
+		const count = sumNow / Math.max(major, 1e-12);
+		if (!(major > 0) || count > 240) major = niceCeil(sumNow / 240);
+		const minor = major / 5 * unitPx >= 5 ? major / 5 : major / 2 * unitPx >= 5 ? major / 2 : major;
+		const perMajor = Math.round(major / minor);
+		const tickR = outer + 2;
+		const labelR = outer + 15;
+		let lastEnd = -Infinity;
+		let firstStart = null;
+		for (const g of order) {
+			if (!drawnGroup(g)) continue;
+			const { a0, a1 } = arcs[g];
+			const also = ribbonsOf[g];
+			for (let m = 0;; m++) {
+				const a = a0 + m * minor * k;
+				if (a > a1 + 1e-9) break;
+				const isMajor = m % perMajor === 0;
+				const len = isMajor ? 5 : 3;
+				if (unitPx * minor >= 3 || isMajor) nodes.push({
+					kind: "line",
+					points: [
+						cx + tickR * Math.cos(a),
+						cy + tickR * Math.sin(a),
+						cx + (tickR + len) * Math.cos(a),
+						cy + (tickR + len) * Math.sin(a)
+					],
+					color: tickColor,
+					width: 1,
+					hit: g,
+					also
+				});
+				if (!isMajor) continue;
+				const text = tickFormat(m * minor);
+				const halfAngle = (measure(text, tickFont) / 2 + 3) / labelR;
+				if (a - halfAngle < lastEnd) continue;
+				if (firstStart !== null && a + halfAngle > firstStart + TAU) continue;
+				if (firstStart === null) firstStart = a - halfAngle;
+				lastEnd = a + halfAngle;
+				nodes.push({
+					kind: "text",
+					x: cx + labelR * Math.cos(a),
+					y: cy + labelR * Math.sin(a),
+					text,
+					font: tickFont,
+					color: muted,
+					align: "center",
+					baseline: "middle",
+					rotate: upright(a + Math.PI / 2),
+					hit: g,
+					also
+				});
+			}
+		}
+	}
+	if (mode !== "none") {
+		const nameR = outer + tickBand + 6;
+		const color = toCss(theme.text);
+		const placed = [];
+		const lineGap = 15;
+		const samples = (x, y, dx, dy, length) => {
+			const pts = [];
+			const steps = Math.max(1, Math.ceil(length / 6));
+			for (let s = 0; s <= steps; s++) pts.push([x + dx * length * s / steps, y + dy * length * s / steps]);
+			return pts;
+		};
+		const collides = (pts) => placed.some((other) => other.some(([x, y]) => pts.some(([u, v]) => Math.hypot(x - u, y - v) < lineGap)));
+		const byValue = order.filter((g) => drawnGroup(g) && visibleWeight[g] > .5).sort((a, b) => now.value[b] - now.value[a]);
+		for (const g of byValue) {
+			const { a0, a1 } = arcs[g];
+			const mid = (a0 + a1) / 2;
+			if (mode === "tangential") {
+				const room = (a1 - a0 + pad * padScale * .8) * (nameR + 6) - 6;
+				const text = ellipsize(names[g], room, nameFont, measure);
+				if (!text) continue;
+				nodes.push({
+					kind: "text",
+					x: cx + (nameR + 6) * Math.cos(mid),
+					y: cy + (nameR + 6) * Math.sin(mid),
+					text,
+					font: nameFont,
+					color,
+					align: "center",
+					baseline: "middle",
+					rotate: upright(mid + Math.PI / 2),
+					hit: g,
+					also: ribbonsOf[g]
+				});
+				continue;
+			}
+			const ax = cx + nameR * Math.cos(mid);
+			const ay = cy + nameR * Math.sin(mid);
+			if (horizontal(mid)) {
+				const y = ay + Math.sign(Math.sin(mid)) * 7;
+				const outward = Math.cos(mid) >= 0 ? "left" : "right";
+				const aligns = [
+					"center",
+					outward,
+					outward === "left" ? "right" : "left"
+				];
+				const clear = (pts) => pts.every(([x, py]) => Math.hypot(x - cx, py - cy) >= nameR + 2);
+				for (const align of aligns) {
+					const room = align === "center" ? 2 * Math.min(ax - area.x, area.x + area.width - ax) - 4 : align === "left" ? area.x + area.width - ax - 2 : ax - area.x - 2;
+					const text = ellipsize(names[g], room, nameFont, measure);
+					if (!text) continue;
+					const w = measure(text, nameFont);
+					const pts = samples(align === "left" ? ax : align === "right" ? ax - w : ax - w / 2, y, 1, 0, w);
+					if (!clear(pts) || collides(pts)) continue;
+					placed.push(pts);
+					nodes.push({
+						kind: "text",
+						x: ax,
+						y,
+						text,
+						font: nameFont,
+						color,
+						align,
+						baseline: "middle",
+						hit: g,
+						also: ribbonsOf[g]
+					});
+					break;
+				}
+				continue;
+			}
+			const text = ellipsize(names[g], reach(mid) - nameR - 2, nameFont, measure);
+			if (!text) continue;
+			const pts = samples(ax, ay, Math.cos(mid), Math.sin(mid), measure(text, nameFont));
+			if (collides(pts)) continue;
+			placed.push(pts);
+			const right = Math.cos(mid) >= 0;
+			nodes.push({
+				kind: "text",
+				x: ax,
+				y: ay,
+				text,
+				font: nameFont,
+				color,
+				align: right ? "left" : "right",
+				baseline: "middle",
+				rotate: right ? mid : mid + Math.PI,
+				hit: g,
+				also: ribbonsOf[g]
+			});
+		}
+	}
+	const items = [];
+	const asymmetric = directed || raw.some((row, i) => row.some((v, j) => Math.abs(v - raw[j][i]) > 1e-12));
+	for (const g of order) {
+		const value = goal.value[g];
+		if (!(value > 0) || hidden.has(g)) continue;
+		const percent = whole > 0 ? value / whole : 0;
+		const mid = (arcs[g].a0 + arcs[g].a1) / 2;
+		items.push({
+			index: g,
+			name: names[g],
+			value,
+			percent,
+			share: c.percent(percent),
+			color: css[g],
+			x: cx + outer * Math.cos(mid),
+			y: cy + outer * Math.sin(mid),
+			rows: [
+				...directed || !asymmetric ? [{
+					name: c.labels.value,
+					value: c.format(value)
+				}] : [],
+				...asymmetric ? [{
+					name: c.labels.outgoing,
+					value: c.format(goal.out[g])
+				}, {
+					name: c.labels.incoming,
+					value: c.format(goal.inc[g])
+				}] : [],
+				{
+					name: c.labels.share,
+					value: c.percent(percent)
+				}
+			]
+		});
+	}
+	const flowTotal = target.reduce((s, row) => s + row.reduce((a, b) => a + b, 0), 0);
+	const ribbonItems = ribbons.filter((r) => target[r.s][r.t] > 0 || target[r.t][r.s] > 0).sort((a, b) => pos[a.s] - pos[b.s] || a.src.a0 - b.src.a0 || pos[a.t] - pos[b.t]);
+	for (const r of ribbonItems) {
+		const value = target[r.s][r.t];
+		const reverse = r.s !== r.t && target[r.s][r.t] + target[r.t][r.s] > 0 ? raw[r.t][r.s] : 0;
+		const percent = flowTotal > 0 ? value / flowTotal : 0;
+		const source = names[r.s];
+		const tgt = names[r.t];
+		const ms = (r.src.a0 + r.src.a1) / 2;
+		const mt = (r.tgt.a0 + r.tgt.a1) / 2;
+		const x = r.s === r.t ? cx + ribbonR * .7 * Math.cos(ms) : .25 * (cx + ribbonR * Math.cos(ms)) + .5 * cx + .25 * (cx + ribbonR * Math.cos(mt));
+		const y = r.s === r.t ? cy + ribbonR * .7 * Math.sin(ms) : .25 * (cy + ribbonR * Math.sin(ms)) + .5 * cy + .25 * (cy + ribbonR * Math.sin(mt));
+		items.push({
+			index: r.index,
+			name: r.s === r.t ? source : `${source} \u2192 ${tgt}`,
+			value,
+			percent,
+			share: c.percent(percent),
+			color: css[r.s],
+			x,
+			y,
+			rows: [
+				{
+					name: c.labels.value,
+					value: c.format(value)
+				},
+				...r.s !== r.t && (!directed || reverse > 0) ? [{
+					name: c.labels.reverse,
+					value: c.format(reverse)
+				}] : [],
+				{
+					name: c.labels.share,
+					value: c.percent(percent)
+				}
+			],
+			event: {
+				source,
+				target: tgt,
+				reverseValue: reverse
+			}
+		});
+	}
+	const enter = clamp(c.enter, 0, 1);
+	return {
+		nodes,
+		items,
+		dim: .25,
+		empty: false,
+		...enter < 1 ? { enter: {
+			alpha: enter,
+			scale: .94 + .06 * enter,
+			cx,
+			cy
+		} } : {}
+	};
+};
+//#endregion
 //#region ../charts/src/engine/shapes/funnel.ts
 var keysOf$2 = (o) => uniqueKeys(o.data.map((d) => d.name));
 var funnelValues = (o, hidden, out) => {
@@ -10430,6 +11936,9 @@ var layoutShapeScene = (input) => {
 		case "bullet":
 			result = layoutBullet(o, c);
 			break;
+		case "chord":
+			result = layoutChord(o, c);
+			break;
 		default: result = layoutTreemap(o, c);
 	}
 	return {
@@ -10472,6 +11981,9 @@ var shapeValues = (o, hidden = NO_HIDDEN, focus = NO_FOCUS) => {
 		case "bullet":
 			bulletValues(o, hidden, out);
 			break;
+		case "chord":
+			chordValues(o, hidden, out);
+			break;
 		default: treemapValues(o, hidden, out);
 	}
 	return out;
@@ -10575,12 +12087,24 @@ var shapeLegend = (o, theme, hidden = NO_HIDDEN) => {
 		case "calendarHeatmap":
 			shown = true;
 			entries = calendarLegend(o, theme, hidden);
+			break;
+		case "chord": {
+			shown = true;
+			const m = resolveChord(o);
+			entries = m.names.map((name, i) => ({
+				index: i,
+				name,
+				color: color(m.colors[i], i),
+				hidden: hidden.has(i)
+			}));
+			break;
+		}
 	}
 	return shown && entries.length ? entries : null;
 };
 /**
 * Number of toggleable entries (slices, stages, series, top-level nodes,
-* sankey nodes, bars, rows, calendar levels)
+* sankey nodes, bars, rows, calendar levels, chord groups)
 */
 var toggleCount = (o) => {
 	switch (o.type) {
@@ -10588,6 +12112,7 @@ var toggleCount = (o) => {
 		case "gauge": return 0;
 		case "sankey": return resolveSankey(o).names.length;
 		case "calendarHeatmap": return calendarModel(o)?.count ?? 0;
+		case "chord": return resolveChord(o).names.length;
 		default: return o.data.length;
 	}
 };
@@ -10758,6 +12283,7 @@ var layoutShapeTooltip = (value, anchorX, anchorY, width, height, theme, measure
 	let lines;
 	let content;
 	let text;
+	let titleLines;
 	if (typeof value === "string") {
 		text = value.split("\n");
 		const f = font(theme, 12);
@@ -10765,9 +12291,14 @@ var layoutShapeTooltip = (value, anchorX, anchorY, width, height, theme, measure
 		lines = text.length;
 	} else {
 		content = value;
-		w = (value.color ? 14 : 0) + measure(value.title, font(theme, 12, 600));
+		const titleFont = font(theme, 12, 600);
+		const dot = value.color ? 14 : 0;
+		const maxTitle = Math.max(60, Math.min(260, width - 16 - 18) - dot);
+		titleLines = wrapText(value.title, maxTitle, titleFont, measure, 3);
+		if (!titleLines.length) titleLines = [value.title];
+		for (const line of titleLines) w = Math.max(w, dot + measure(line, titleFont));
 		for (const row of value.rows) w = Math.max(w, (row.color ? 14 : 0) + measure(row.name, font(theme, 12)) + 16 + measure(row.value, font(theme, 12, 600)));
-		lines = 1 + value.rows.length;
+		lines = titleLines.length + value.rows.length;
 	}
 	const bw = Math.max(96, Math.ceil(w + 18 + 4));
 	const bh = lines * lineHeight + 18;
@@ -10782,7 +12313,10 @@ var layoutShapeTooltip = (value, anchorX, anchorY, width, height, theme, measure
 		height: bh,
 		padding,
 		lineHeight,
-		...content ? { content } : {},
+		...content ? {
+			content,
+			titleLines
+		} : {},
 		...text ? { text } : {}
 	};
 };
@@ -11308,6 +12842,12 @@ Object.defineProperty(exports, "formatCompact", {
 		return formatCompact;
 	}
 });
+Object.defineProperty(exports, "formatDuration", {
+	enumerable: true,
+	get: function() {
+		return formatDuration;
+	}
+});
 Object.defineProperty(exports, "formatValue", {
 	enumerable: true,
 	get: function() {