minerva-design 1.3.0 → 1.5.0

package/dist/native/components/Chart/scene.js

@@ -1,12 +1,13 @@
 import { part as e } from "../../internal/parts.js";
 import { toCss as t } from "../../charts/src/engine/color.js";
-import { scenePrimitives as n } from "../../charts/src/engine/controller.js";
+import { lineOf as n, rectOf as r, textBox as i } from "../../charts/src/engine/overlay.js";
+import { scenePrimitives as a } from "../../charts/src/engine/controller.js";
 import "../../charts/src/canvas.js";
-import { measureChartText as r } from "./measure.js";
-import { StyleSheet as i, Text as a, View as o } from "react-native";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { measureChartText as o } from "./measure.js";
+import { StyleSheet as s, Text as c, View as l } from "react-native";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/Chart/scene.tsx
-var u = {
+var p = {
 	linePoints: 1200,
 	dotsPerSeries: 800,
 	dots: 2e3,
@@ -14,61 +15,61 @@ var u = {
 	bars: 1500,
 	areaColumns: 200,
 	dashes: 200
-}, d = "chart", f = (e) => Math.ceil(e * 1.35), p = (e, t) => Math.ceil(r(e, `${t.weight ?? 400} ${t.size}px sans-serif`) * 1.4 + t.size * 2);
-function m(e, t, n, r, i, o, s, l, u) {
-	let d = f(s.size), m = (d - s.size) / 2, h = p(t, s), g = o === "top" ? r - m : o === "bottom" ? r - d + m : r - d / 2, _ = i === "left" ? {
+}, m = "chart", h = (e) => Math.ceil(e * 1.35), g = (e, t) => Math.ceil(o(e, `${t.weight ?? 400} ${t.size}px sans-serif`) * 1.4 + t.size * 2);
+function _(e, t, n, r, i, a, o, s, l) {
+	let u = h(o.size), f = (u - o.size) / 2, p = g(t, o), m = a === "top" ? r - f : a === "bottom" ? r - u + f : r - u / 2, _ = i === "left" ? {
 		left: n,
-		width: h
+		width: p
 	} : i === "right" ? {
-		right: l - n,
-		width: h
+		right: s - n,
+		width: p
 	} : {
-		left: n - h / 2,
-		width: h
+		left: n - p / 2,
+		width: p
 	};
-	return /* @__PURE__ */ c(a, {
+	return /* @__PURE__ */ d(c, {
 		numberOfLines: 1,
 		style: [{
 			position: "absolute",
-			top: g,
+			top: m,
 			..._,
 			textAlign: i,
-			fontSize: s.size,
-			lineHeight: d,
-			color: s.color,
-			fontWeight: String(s.weight ?? 400),
+			fontSize: o.size,
+			lineHeight: u,
+			color: o.color,
+			fontWeight: String(o.weight ?? 400),
 			includeFontPadding: !1,
-			...s.family ? { fontFamily: s.family } : null,
-			...s.halo ? {
-				textShadowColor: s.halo,
+			...o.family ? { fontFamily: o.family } : null,
+			...o.halo ? {
+				textShadowColor: o.halo,
 				textShadowRadius: 3,
 				textShadowOffset: {
 					width: 0,
 					height: 0
 				}
 			} : null
-		}, u],
+		}, l],
 		children: t
 	}, e);
 }
-var h = (e, t, n, r, i, a, s) => /* @__PURE__ */ c(o, { style: [{
+var v = (e, t, n, r, i, a, o) => /* @__PURE__ */ d(l, { style: [{
 	position: "absolute",
 	left: t,
 	top: n,
 	width: r,
 	height: i,
 	backgroundColor: a
-}, s] }, e), g = (e, t, n, r, i, a) => h(e, t - r / 2, n - r / 2, r, r, i, {
+}, o] }, e), y = (e, t, n, r, i, a) => v(e, t - r / 2, n - r / 2, r, r, i, {
 	borderRadius: r / 2,
 	...a
-}), _ = (e, t, n, r, i, a, o) => {
+}), b = (e, t, n, r, i, a, o) => {
 	let s = r - t, c = i - n, l = Math.hypot(s, c) + a;
-	return h(e, (t + r) / 2 - l / 2, (n + i) / 2 - a / 2, l, a, o, {
+	return v(e, (t + r) / 2 - l / 2, (n + i) / 2 - a / 2, l, a, o, {
 		borderRadius: a / 2,
 		transform: [{ rotate: `${Math.atan2(c, s)}rad` }]
 	});
 };
-function v(e, t, n = u.dashes) {
+function x(e, t, n = p.dashes) {
 	let r = t.filter((e) => Number.isFinite(e) && e >= 0);
 	r.length % 2 && (r = [...r, ...r]);
 	let i = r.reduce((e, t) => e + t, 0);
@@ -80,8 +81,8 @@ function v(e, t, n = u.dashes) {
 	}
 	return s;
 }
-var y = (e, t, n, r, i, a, o, s) => v(i, s).map(([i, s], c) => t === "y" ? h(`${e}-${c}`, r + i, n, s, a, o) : h(`${e}-${c}`, n, r + i, a, s, o)), b = (e, t = 1) => Math.round(e) + .5 - t / 2;
-function x(e, t) {
+var S = (e, t, n, r, i, a, o, s) => x(i, s).map(([i, s], c) => t === "y" ? v(`${e}-${c}`, r + i, n, s, a, o) : v(`${e}-${c}`, n, r + i, a, s, o)), C = (e, t = 1) => Math.round(e) + .5 - t / 2;
+function w(e, t) {
 	let n = e.length / 2, r = n > t ? Math.ceil(n / t) : 1, i = [];
 	for (let t = 0; t < n; t += r) {
 		let n = e[t * 2], r = e[t * 2 + 1], a = i.length;
@@ -90,131 +91,176 @@ function x(e, t) {
 	let a = e[n * 2 - 2], o = e[n * 2 - 1], s = i.length;
 	return n > 1 && (i[s - 2] !== a || i[s - 1] !== o) && i.push(a, o), i;
 }
-function S(e, t, n, r, i, a, o) {
-	let s = t.length / 2;
-	if (s < 2) return [];
-	let c = t[0] <= t[s * 2 - 2], l = (e) => c ? e : s - 1 - e, d = (e) => t[l(e) * 2], f = (e) => t[l(e) * 2 + 1], p = (e) => o ? o[l(e)] : n, m = Math.max(a.x, d(0)), g = Math.min(a.x + a.width, d(s - 1));
-	if (g <= m) return [];
-	let _ = Math.max(2, a.width / u.areaColumns), v = [], y = 0;
-	for (let t = Math.floor(m), n = 0; t < g; n++) {
-		let o = Math.min(Math.ceil(g), Math.round(t + _)), c = (t + o) / 2;
-		for (; y < s - 2 && d(y + 1) < c;) y++;
-		let l = d(y), u = d(y + 1), m = u === l ? 0 : Math.max(0, Math.min(1, (c - l) / (u - l))), b = f(y) + (f(y + 1) - f(y)) * m, x = p(y) + (p(y + 1) - p(y)) * m;
-		if (Number.isFinite(b) && Number.isFinite(x)) {
-			let s = Math.min(b, x);
-			v.push(h(`${e}-${n}`, t - a.x, s - a.y, o - t, Math.abs(x - b), r, { opacity: i }));
+function T(e, t, n, r, i, a, o, s = !1) {
+	let c = s ? t.map((e, n) => t[n % 2 ? n - 1 : n + 1]) : t, l = s ? {
+		x: a.y,
+		y: a.x,
+		width: a.height,
+		height: a.width
+	} : a, u = c.length / 2;
+	if (u < 2) return [];
+	let d = c[0] <= c[u * 2 - 2], f = (e) => d ? e : u - 1 - e, m = (e) => c[f(e) * 2], h = (e) => c[f(e) * 2 + 1], g = (e) => o ? o[f(e)] : n, _ = Math.max(l.x, m(0)), y = Math.min(l.x + l.width, m(u - 1));
+	if (y <= _) return [];
+	let b = Math.max(2, l.width / p.areaColumns), x = [], S = 0;
+	for (let t = Math.floor(_), n = 0; t < y; n++) {
+		let a = Math.min(Math.ceil(y), Math.round(t + b)), o = (t + a) / 2;
+		for (; S < u - 2 && m(S + 1) < o;) S++;
+		let c = m(S), d = m(S + 1), f = d === c ? 0 : Math.max(0, Math.min(1, (o - c) / (d - c))), p = h(S) + (h(S + 1) - h(S)) * f, _ = g(S) + (g(S + 1) - g(S)) * f;
+		if (Number.isFinite(p) && Number.isFinite(_)) {
+			let o = Math.min(p, _), c = Math.abs(_ - p);
+			x.push(s ? v(`${e}-${n}`, o - l.y, t - l.x, c, a - t, r, { opacity: i }) : v(`${e}-${n}`, t - l.x, o - l.y, a - t, c, r, { opacity: i }));
 		}
-		t = o;
+		t = a;
 	}
-	return v;
+	return x;
 }
-function C(e) {
-	let { plot: t } = e.layout, n = e.model.series.filter((e) => !e.hidden), r = n.filter((e) => e.type === "line" || e.type === "area").length, i = n.filter((e) => e.type === "scatter").length, a = Math.max(150, u.linePoints / Math.max(1, r)), o = Math.max(100, Math.min(u.dotsPerSeries, u.dots / Math.max(1, i)));
+function E(e) {
+	let { plot: t } = e.layout, n = e.model.series.filter((e) => !e.hidden), r = n.filter((e) => e.type === "line" || e.type === "area").length, i = n.filter((e) => e.type === "scatter").length, a = Math.max(150, p.linePoints / Math.max(1, r)), o = Math.max(100, Math.min(p.dotsPerSeries, p.dots / Math.max(1, i)));
 	return {
 		perLine: a,
 		options: {
 			columnWidth: Math.max(3, t.width * 4 / a),
 			maxDots: o,
-			maxBars: u.barsPerSeries,
+			maxBars: p.barsPerSeries,
 			dotCell: Math.max(4, Math.sqrt(t.width * t.height / o) * 1.15 + 1)
 		}
 	};
 }
-function w(e) {
-	let { plot: t } = e.layout, { perLine: r, options: i } = C(e), a = n(e, i), o = t.x, s = t.y, c = [], l = u.dots, d = u.bars;
-	return a.forEach((e, n) => {
-		let i = `${e.kind}${e.seriesIndex}-${n}`;
+function D(e) {
+	let { plot: t } = e.layout, { perLine: n, options: r } = E(e), i = a(e, r), o = t.x, s = t.y, c = [], l = p.dots, u = p.bars;
+	return i.forEach((e, r) => {
+		let i = `${e.kind}${e.seriesIndex}-${r}`;
 		if (e.kind === "area") {
-			e.segments.forEach((n, r) => c.push(...S(`${i}-${r}`, n, e.baseline, e.color, e.opacity, t, e.bottoms?.[r])));
+			e.segments.forEach((n, r) => c.push(...T(`${i}-${r}`, n, e.baseline, e.color, e.opacity, t, e.bottoms?.[r], e.horizontal)));
 			return;
 		}
 		if (e.kind === "line") {
 			let t = 0;
 			for (let n of e.segments) t += n.length / 2;
-			e.segments.forEach((n, a) => {
-				let l = x(n, Math.max(2, Math.round(r * n.length / 2 / Math.max(1, t))));
+			e.segments.forEach((r, a) => {
+				let l = w(r, Math.max(2, Math.round(n * r.length / 2 / Math.max(1, t))));
 				if (l.length === 2) {
-					c.push(g(`${i}-${a}`, l[0] - o, l[1] - s, e.width * 1.5, e.color));
+					c.push(y(`${i}-${a}`, l[0] - o, l[1] - s, e.width * 1.5, e.color));
 					return;
 				}
-				for (let t = 0; t + 3 < l.length; t += 2) c.push(_(`${i}-${a}-${t}`, l[t] - o, l[t + 1] - s, l[t + 2] - o, l[t + 3] - s, e.width, e.color));
+				for (let t = 0; t + 3 < l.length; t += 2) c.push(b(`${i}-${a}-${t}`, l[t] - o, l[t + 1] - s, l[t + 2] - o, l[t + 3] - s, e.width, e.color));
 			});
 			return;
 		}
 		if (e.kind === "bars") {
-			let t = e.rects.length / 4, n = t > d ? Math.ceil(t / Math.max(1, d)) : 1;
+			let t = e.rects.length / 4, n = t > u ? Math.ceil(t / Math.max(1, u)) : 1;
 			for (let r = 0; r < t; r += n) {
 				let [t, n, a, l] = e.rects.slice(r * 4, r * 4 + 4), u = Math.min(e.radius ?? 0, a / 2, l / 2);
-				c.push(h(`${i}-${r}`, t - o, n - s, Math.max(a, .5), l, e.colors?.[r] ?? e.color, u > .5 ? { borderRadius: u } : void 0));
+				c.push(v(`${i}-${r}`, t - o, n - s, Math.max(a, .5), l, e.colors?.[r] ?? e.color, u > .5 || e.opacity !== void 0 ? {
+					...u > .5 ? { borderRadius: u } : null,
+					...e.opacity === void 0 ? null : { opacity: e.opacity }
+				} : void 0));
 			}
-			d = Math.max(0, d - Math.ceil(t / n));
+			u = Math.max(0, u - Math.ceil(t / n));
 			return;
 		}
-		let a = e.dots.length / 3, u = a > l ? Math.ceil(a / Math.max(1, l)) : 1;
-		for (let t = 0; t < a; t += u) c.push(g(`${i}-${t}`, e.dots[t * 3] - o, e.dots[t * 3 + 1] - s, e.dots[t * 3 + 2], e.colors[t], { opacity: e.opacity }));
-		l = Math.max(0, l - Math.ceil(a / u));
+		let a = e.dots.length / 3, d = a > l ? Math.ceil(a / Math.max(1, l)) : 1, f = e.stroke ?? 0;
+		for (let t = 0; t < a; t += d) {
+			let n = e.colors[t] ?? "#888";
+			c.push(y(`${i}-${t}`, e.dots[t * 3] - o, e.dots[t * 3 + 1] - s, e.dots[t * 3 + 2], e.opacity > 0 ? n : "transparent", f > 0 && e.opacity < 1 ? {
+				borderWidth: f,
+				borderColor: n,
+				opacity: 1
+			} : { opacity: e.opacity }));
+		}
+		l = Math.max(0, l - Math.ceil(a / d));
 	}), c;
 }
-var T = (e, t) => {
-	let { plot: n } = t, r = e.x0 === void 0 ? -Infinity : t.xToPx(e.x0), i = e.x1 === void 0 ? Infinity : t.xToPx(e.x1), a = e.y0 === void 0 ? Infinity : t.yToPx(e.y0), o = e.y1 === void 0 ? -Infinity : t.yToPx(e.y1), s = Math.max(n.x, Math.min(r, i)), c = Math.min(n.x + n.width, Math.max(r, i)), l = Math.max(n.y, Math.min(a, o)), u = Math.min(n.y + n.height, Math.max(a, o));
-	return {
-		x: s,
-		y: l,
-		width: c - s,
-		height: u - l
-	};
-}, E = (e, t, n, r) => {
-	let { plot: i } = t, a = e.x === void 0 ? i.x + i.width / 2 : t.xToPx(e.x), o = e.y === void 0 ? i.y + i.height / 2 : t.yToPx(e.y), s = a - n / 2, c = o - r / 2;
-	return e.anchor === "top" ? c = o + 6 : e.anchor === "bottom" ? c = o - 6 - r : e.anchor === "left" ? s = a + 6 : e.anchor === "right" && (s = a - 6 - n), s = Math.max(i.x + 6, Math.min(s, i.x + i.width - 6 - n)), c = Math.max(i.y + 2, Math.min(c, i.y + i.height - 2 - r)), {
-		x: s,
-		y: c,
-		width: n,
-		height: r
-	};
-}, D = (e, n) => t(e, n);
-function O(t, n) {
-	let { width: i, theme: a, model: s, layout: c, annotations: u } = t, { plot: f, scales: p, xTicks: _, yTicks: v } = c, y = a.fontSize, x = [];
+var O = (e, n) => t(e, n);
+function k(t, n) {
+	let { width: i, theme: a, model: s, layout: c, annotations: u } = t, { plot: p, scales: h, y2Ticks: g } = c, b = h.horizontal, x = b ? s.y : s.x, S = b ? s.x : s.y, w = b ? c.yTicks : c.xTicks, T = b ? c.xTicks : c.yTicks, E = b ? h.yToPx : h.xToPx, D = b ? h.xToPx : h.yToPx, k = a.fontSize, A = [];
 	u.forEach((e, t) => {
 		if (e.type !== "rect") return;
-		let n = T(e, p);
-		n.width <= 0 || n.height <= 0 || x.push(h(`area-${t}`, n.x, n.y, n.width, n.height, D(e.color, e.opacity)));
+		let n = r(e, h);
+		n.width <= 0 || n.height <= 0 || A.push(v(`area-${t}`, n.x, n.y, n.width, n.height, O(e.color, e.opacity)));
 	});
-	let S = D(a.grid);
-	s.y.grid && v.values.forEach((e, t) => {
-		let n = p.yToPx(e);
-		n < f.y - 1 || n > f.y + f.height + 1 || x.push(h(`ygrid-${t}`, f.x, b(n), f.width, 1, S));
-	}), s.x.grid && _.values.forEach((e, t) => {
-		let n = p.xToPx(e);
-		n < f.x - 1 || n > f.x + f.width + 1 || x.push(h(`xgrid-${t}`, b(n), f.y, 1, f.height, S));
+	let j = O(a.grid);
+	S.grid && T.values.forEach((e, t) => {
+		let n = D(e);
+		n < p.y - 1 || n > p.y + p.height + 1 || A.push(v(`ygrid-${t}`, p.x, C(n), p.width, 1, j));
+	}), x.grid && w.values.forEach((e, t) => {
+		let n = E(e);
+		n < p.x - 1 || n > p.x + p.width + 1 || A.push(v(`xgrid-${t}`, C(n), p.y, 1, p.height, j));
 	});
-	let C = Math.ceil(y * 1.4), w = {
-		size: y,
-		color: D(a.textMuted),
+	let M = Math.ceil(k * 1.4), N = {
+		size: k,
+		color: O(a.textMuted),
 		family: n
-	}, E = {
-		size: y + 1,
+	}, P = {
+		size: k + 1,
 		weight: 500,
-		color: D(a.text, .8),
+		color: O(a.text, .8),
 		family: n
-	}, O = f.y + f.height;
-	if (s.x.visible) {
-		x.push(h("xaxis", f.x, b(O), f.width, 1, D(a.axis)));
+	}, F = p.y + p.height;
+	if (x.visible) {
+		A.push(v("xaxis", p.x, C(F), p.width, 1, O(a.axis)));
 		let e = -Infinity;
-		_.values.map((e, t) => ({
-			px: p.xToPx(e),
-			text: _.labels[t] ?? ""
-		})).sort((e, t) => e.px - t.px).forEach(({ px: t, text: n }, a) => {
-			if (!n || t < f.x - .5 || t > f.x + f.width + .5) return;
-			let o = r(n, `400 ${y}px sans-serif`), s = Math.max(0, Math.min(i - o, t - o / 2));
-			s < e + 6 || (e = s + o, x.push(m(`xtick-${a}`, n, s + o / 2, O + 7, "center", "top", w, i)));
-		}), s.x.title && x.push(m("xtitle", s.x.title, f.x + f.width / 2, O + C + 10, "center", "top", E, i));
+		w.values.map((e, t) => ({
+			px: E(e),
+			text: w.labels[t] ?? ""
+		})).sort((e, t) => e.px - t.px).forEach(({ px: t, text: n }, r) => {
+			if (!n || t < p.x - .5 || t > p.x + p.width + .5) return;
+			let a = o(n, `400 ${k}px sans-serif`), s = Math.max(0, Math.min(i - a, t - a / 2));
+			s < e + 6 || (e = s + a, A.push(_(`xtick-${r}`, n, s + a / 2, F + 7, "center", "top", N, i)));
+		}), x.title && A.push(_("xtitle", x.title, p.x + p.width / 2, F + M + 10, "center", "top", P, i));
+	}
+	if (S.visible) {
+		let e = -Infinity;
+		T.values.map((e, t) => ({
+			py: D(e),
+			text: T.labels[t] ?? ""
+		})).sort((e, t) => e.py - t.py).forEach(({ py: t, text: n }, r) => {
+			if (!(!n || t < p.y - .5 || t > p.y + p.height + .5)) {
+				if (b) {
+					if (t - (k + 2) / 2 < e) return;
+					e = t + (k + 2) / 2;
+				}
+				A.push(_(`ytick-${r}`, n, p.x - 8, t, "right", "middle", N, i));
+			}
+		}), S.title && A.push(_("ytitle", S.title, M / 2 + 4, p.y + p.height / 2, "center", "middle", P, i, { transform: [{ rotate: "-90deg" }] }));
 	}
-	if (s.y.visible && (v.values.forEach((e, t) => {
-		let n = p.yToPx(e), r = v.labels[t];
-		!r || n < f.y - .5 || n > f.y + f.height + .5 || x.push(m(`ytick-${t}`, r, f.x - 8, n, "right", "middle", w, i));
-	}), s.y.title && x.push(m("ytitle", s.y.title, C / 2 + 4, f.y + f.height / 2, "center", "middle", E, i, { transform: [{ rotate: "-90deg" }] }))), t.legend) for (let r of t.legend.entries) {
-		let t = r.box.height / 2, i = r.shape === "dot" ? g("swatch", 5, t, 8, r.color) : r.shape === "line" ? h("swatch", 0, t - 1, 10, 2, r.color) : h("swatch", 1, t - 4, 8, 8, r.color);
-		x.push(/* @__PURE__ */ l(o, {
+	let I = b ? null : s.y2;
+	if (I && g && I.visible) {
+		let e = p.x + p.width;
+		g.values.forEach((t, n) => {
+			let r = h.yToPx(t), a = g.labels[n];
+			!a || r < p.y - .5 || r > p.y + p.height + .5 || A.push(_(`y2tick-${n}`, a, e + 8, r, "left", "middle", N, i));
+		}), I.title && A.push(_("y2title", I.title, i - M / 2 - 4, p.y + p.height / 2, "center", "middle", P, i, { transform: [{ rotate: "90deg" }] }));
+	}
+	let L = t.legend?.colors;
+	if (L) {
+		let { bar: t, stops: r } = L, o = t.width / Math.max(1, r.length);
+		A.push(/* @__PURE__ */ d(l, {
+			...e(m, "color-legend"),
+			style: {
+				position: "absolute",
+				left: t.x,
+				top: t.y,
+				width: t.width,
+				height: t.height,
+				borderRadius: t.height / 2,
+				overflow: "hidden",
+				flexDirection: "row"
+			},
+			children: r.map((e, n) => /* @__PURE__ */ d(l, { style: {
+				width: o,
+				height: t.height,
+				backgroundColor: e
+			} }, n))
+		}, "color-legend")), L.ticks.forEach((e, n) => A.push(v(`color-tick-${n}`, Math.round(e), t.y - 2, 1, t.height + 4, O(a.text, .35)))), L.labels.forEach((e, t) => A.push(_(`color-label-${t}`, e.text, e.x, e.y, e.align, "middle", {
+			size: 11,
+			color: O(a.textMuted),
+			family: n
+		}, i)));
+	}
+	if (t.legend) for (let r of t.legend.entries) {
+		let t = r.box.height / 2, i = r.shape === "dot" ? y("swatch", 5, t, 8, r.color) : r.shape === "line" ? v("swatch", 0, t - 1, 10, 2, r.color) : v("swatch", 1, t - 4, 8, 8, r.color);
+		A.push(/* @__PURE__ */ f(l, {
 			style: {
 				position: "absolute",
 				left: r.box.x,
@@ -223,73 +269,76 @@ function O(t, n) {
 				height: r.box.height,
 				opacity: r.hidden ? .45 : 1
 			},
-			...e(d, "legend-item", { hidden: r.hidden }),
-			children: [i, m("name", r.name, 14, t, "left", "middle", {
+			...e(m, "legend-item", { hidden: r.hidden }),
+			children: [i, _("name", r.name, 14, t, "left", "middle", {
 				size: 12,
-				color: D(a.textMuted),
+				color: O(a.textMuted),
 				family: n
 			}, r.box.width, r.hidden ? { textDecorationLine: "line-through" } : void 0)]
 		}, `legend-${r.id}`));
 	}
-	return x;
+	return A;
 }
-function k(e, t) {
-	let { theme: n, annotations: i, layout: a } = e, { plot: o, scales: s } = a, c = n.fontSize, l = o.x, u = o.y, d = o.width, f = D(n.background, .9), p = c + 4, h = [];
-	i.forEach((e, n) => {
+function A(e, t) {
+	let { theme: a, annotations: s, layout: c } = e, { plot: l, scales: u } = c, d = a.fontSize, f = l.x, p = l.y, m = l.width, h = O(a.background, .9), g = d + 4, v = [];
+	e.connectors.forEach((e, t) => {
+		let n = e.y0 === e.y1;
+		v.push(...n ? S(`connector-${t}`, "y", C(e.y0, e.width) - p, Math.min(e.x0, e.x1) - f, Math.abs(e.x1 - e.x0), e.width, e.color, e.dash) : S(`connector-${t}`, "x", C(e.x0, e.width) - f, Math.min(e.y0, e.y1) - p, Math.abs(e.y1 - e.y0), e.width, e.color, e.dash));
+	}), s.forEach((e, r) => {
 		if (e.type !== "line") return;
-		let r = D(e.color);
-		if (e.axis === "y") {
-			let i = s.yToPx(e.value);
-			h.push(...y(`line-${n}`, "y", b(i, e.width) - u, 0, o.width, e.width, r, e.dash)), e.label && h.push(m(`line-label-${n}`, e.label, o.width - 6, i - 3 - u, "right", "bottom", {
-				size: c,
+		let i = O(e.color), a = n(e, u);
+		if (a.vertical) {
+			let n = a.at;
+			v.push(...S(`line-${r}`, "x", C(n, e.width) - f, 0, l.height, e.width, i, e.dash)), e.label && v.push(_(`line-label-${r}`, e.label, n + 5 - f, 5, "left", "top", {
+				size: d,
 				weight: 500,
-				color: r,
-				halo: f,
+				color: i,
+				halo: h,
 				family: t
-			}, d));
+			}, m));
 		} else {
-			let i = s.xToPx(e.value);
-			h.push(...y(`line-${n}`, "x", b(i, e.width) - l, 0, o.height, e.width, r, e.dash)), e.label && h.push(m(`line-label-${n}`, e.label, i + 5 - l, 5, "left", "top", {
-				size: c,
+			let n = a.at;
+			v.push(...S(`line-${r}`, "y", C(n, e.width) - p, 0, l.width, e.width, i, e.dash)), e.label && v.push(_(`line-label-${r}`, e.label, l.width - 6, n - 3 - p, "right", "bottom", {
+				size: d,
 				weight: 500,
-				color: r,
-				halo: f,
+				color: i,
+				halo: h,
 				family: t
-			}, d));
+			}, m));
 		}
-	}), i.forEach((e, n) => {
+	}), s.forEach((e, n) => {
 		if (e.type !== "rect" || !e.label) return;
-		let r = T(e, s);
-		if (r.width <= 0 || r.height <= 0) return;
-		let i = e.labelPosition, a = i.endsWith("left") ? "left" : i.endsWith("right") ? "right" : "center", o = a === "left" ? r.x + 10 : a === "right" ? r.x + r.width - 10 : r.x + r.width / 2, f = i.startsWith("top") ? r.y + 10 : i.startsWith("bottom") ? r.y + r.height - 10 - p : r.y + (r.height - p) / 2;
-		h.push(m(`area-label-${n}`, e.label, o - l, f - u, a, "top", {
-			size: c + 1,
+		let i = r(e, u);
+		if (i.width <= 0 || i.height <= 0) return;
+		let a = e.labelPosition, o = a.endsWith("left") ? "left" : a.endsWith("right") ? "right" : "center", s = o === "left" ? i.x + 10 : o === "right" ? i.x + i.width - 10 : i.x + i.width / 2, c = a.startsWith("top") ? i.y + 10 : a.startsWith("bottom") ? i.y + i.height - 10 - g : i.y + (i.height - g) / 2;
+		v.push(_(`area-label-${n}`, e.label, s - f, c - p, o, "top", {
+			size: d + 1,
 			weight: 600,
-			color: D(e.labelColor),
+			color: O(e.labelColor),
 			family: t
-		}, d));
-	}), i.forEach((e, n) => {
+		}, m));
+	}), s.forEach((e, n) => {
 		if (e.type !== "text" || !e.text) return;
-		let i = r(e.text, `${e.weight} ${c}px sans-serif`), a = E(e, s, i, p);
-		h.push(m(`text-${n}`, e.text, a.x - l, a.y + a.height / 2 - u, "left", "middle", {
-			size: c,
+		let r = o(e.text, `${e.weight} ${d}px sans-serif`), a = i(e, u, r, g);
+		v.push(_(`text-${n}`, e.text, a.x - f, a.y + a.height / 2 - p, "left", "middle", {
+			size: d,
 			weight: e.weight,
-			color: D(e.color),
-			halo: f,
+			color: O(e.color),
+			halo: h,
 			family: t
-		}, d));
+		}, m));
 	});
-	let g = D(n.text, .85);
+	let y = O(a.text, .85);
 	return e.pointLabels.forEach(({ label: e, box: n }, r) => {
-		h.push(m(`point-label-${r}`, e.text, n.x - l, n.y + n.height / 2 - u, "left", "middle", {
-			size: c,
-			color: g,
-			halo: f,
+		v.push(_(`point-label-${r}`, e.text, n.x - f, n.y + n.height / 2 - p, "left", "middle", {
+			size: d,
+			color: y,
+			halo: h,
 			family: t
-		}, d));
-	}), h;
+		}, m));
+	}), v;
 }
-var A = (e) => ({
+var j = (e) => ({
 	position: "absolute",
 	left: e.x,
 	top: e.y,
@@ -297,123 +346,160 @@ var A = (e) => ({
 	height: e.height,
 	overflow: "hidden"
 });
-function j(t, n) {
+function M(t, n) {
 	let { plot: r } = t.layout;
-	return /* @__PURE__ */ l(s, { children: [
-		O(t, n),
-		/* @__PURE__ */ c(o, {
-			style: A(r),
-			...e(d, "data"),
-			children: w(t)
+	return /* @__PURE__ */ f(u, { children: [
+		k(t, n),
+		/* @__PURE__ */ d(l, {
+			style: j(r),
+			...e(m, "data"),
+			children: D(t)
 		}, "data"),
-		/* @__PURE__ */ c(o, {
-			style: A(r),
-			...e(d, "labels"),
-			children: k(t, n)
+		/* @__PURE__ */ d(l, {
+			style: j(r),
+			...e(m, "labels"),
+			children: A(t, n)
 		}, "labels")
 	] });
 }
-function M(t, n, r) {
-	let { theme: s, layout: u, hover: f, dragging: p } = t, { plot: m } = u, _ = D(s.background), v = [];
-	f && f.crosshairX !== null && v.push(/* @__PURE__ */ c(o, {
-		style: i.absoluteFill,
-		...e(d, "crosshair"),
-		children: y("dash", "x", Math.round(f.crosshairX), m.y, m.height, 1, D(s.textMuted, .55), [3, 3])
-	}, "crosshair")), f?.marks.forEach((e, t) => {
+function N(t, n, r) {
+	let { theme: i, layout: a, hover: o, dragging: u } = t, { plot: p } = a, h = O(i.background), g = [];
+	o && o.crosshairY !== null && g.push(/* @__PURE__ */ d(l, {
+		style: s.absoluteFill,
+		...e(m, "crosshair"),
+		children: S("dash", "y", Math.round(o.crosshairY), p.x, p.width, 1, O(i.textMuted, .55), [3, 3])
+	}, "crosshair-y")), o && o.crosshairX !== null && g.push(/* @__PURE__ */ d(l, {
+		style: s.absoluteFill,
+		...e(m, "crosshair"),
+		children: S("dash", "x", Math.round(o.crosshairX), p.y, p.height, 1, O(i.textMuted, .55), [3, 3])
+	}, "crosshair")), o?.marks.forEach((e, t) => {
 		if (e.kind === "band") {
-			v.push(h(`mark-${t}`, e.x, e.y, e.width, e.height, D(s.text, .05), { borderRadius: 6 }));
+			g.push(v(`mark-${t}`, e.x, e.y, e.width, e.height, O(i.text, .05), { borderRadius: 6 }));
+			return;
+		}
+		if (e.kind === "guide") {
+			g.push(v(`mark-${t}`, e.x, e.y, e.width, e.height, O(i.text, .06)));
 			return;
 		}
 		if (e.kind === "cell") {
-			v.push(h(`mark-${t}`, e.x - 1.5, e.y - 1.5, e.width + 3, e.height + 3, "transparent", {
-				borderRadius: 4,
+			let n = Math.min(3, e.width * .06, e.height * .06), r = Math.min(2, e.width / 5, e.height / 5);
+			g.push(v(`mark-${t}`, e.x - n, e.y - n, e.width + n * 2, e.height + n * 2, e.color, {
+				borderRadius: Math.max(2, e.radius),
+				shadowColor: "#0f172a",
+				shadowOpacity: .45,
+				shadowRadius: 6,
+				shadowOffset: {
+					width: 0,
+					height: 3
+				},
+				elevation: 4
+			})), e.width > 8 && e.height > 8 && g.push(v(`ring-${t}`, e.x - n + r, e.y - n + r, e.width + (n - r) * 2, e.height + (n - r) * 2, "transparent", {
+				borderRadius: Math.max(1, e.radius - r / 2),
 				borderWidth: 1.5,
-				borderColor: D(s.text, .55)
+				borderColor: e.ring
 			}));
 			return;
 		}
-		v.push(g(`halo-${t}`, e.x, e.y, e.size + 8, e.halo), g(`mark-${t}`, e.x, e.y, e.size, e.color, {
+		g.push(y(`halo-${t}`, e.x, e.y, e.size + 8, e.halo), y(`mark-${t}`, e.x, e.y, e.size, e.color, {
 			borderWidth: 2,
-			borderColor: _
+			borderColor: h
 		}));
-	}), p && v.push(/* @__PURE__ */ c(o, {
-		...e(d, "drag"),
-		style: i.absoluteFill,
-		children: g("ghost", p.x, p.y, p.size + 2, p.color, {
+	}), u && g.push(/* @__PURE__ */ d(l, {
+		...e(m, "drag"),
+		style: s.absoluteFill,
+		children: y("ghost", u.x, u.y, u.size + 2, u.color, {
 			opacity: .85,
 			borderWidth: 2,
-			borderColor: _
+			borderColor: h
 		})
 	}, "drag"));
-	let b = f?.tooltip;
-	if (b && !r) {
-		let { box: r, lineHeight: i, padding: u, content: f } = b, p = D(s.text), m = D(s.textMuted), h = (e, t) => ({
+	let _ = o?.tooltip;
+	if (_ && !r) {
+		let { box: r, lineHeight: a, padding: o, content: s } = _, u = O(i.text), p = O(i.textMuted), h = (e, t) => ({
 			fontSize: 12,
-			lineHeight: i,
+			lineHeight: a,
 			color: t,
 			fontWeight: String(e),
 			includeFontPadding: !1,
 			...n ? { fontFamily: n } : null
-		}), g = (e) => /* @__PURE__ */ c(o, { style: {
+		}), v = (e) => /* @__PURE__ */ d(l, { style: {
 			width: 8,
 			height: 8,
 			borderRadius: 4,
 			marginRight: 6,
 			backgroundColor: e
-		} }), _ = {
-			height: i,
+		} }), y = {
+			height: a,
 			flexDirection: "row",
 			alignItems: "center"
 		};
-		v.push(/* @__PURE__ */ c(o, {
-			...e(d, "tooltip"),
-			style: [N(t), {
+		g.push(/* @__PURE__ */ d(l, {
+			...e(m, "tooltip"),
+			style: [P(t), {
 				left: r.x,
 				top: r.y,
 				width: r.width,
 				height: r.height,
-				paddingHorizontal: u + 1,
-				paddingVertical: u - 1
+				paddingHorizontal: o + 1,
+				paddingVertical: o - 1
 			}],
-			children: b.text ? b.text.map((e, t) => /* @__PURE__ */ c(a, {
+			children: _.text ? _.text.map((e, t) => /* @__PURE__ */ d(c, {
 				numberOfLines: 1,
-				style: h(400, p),
+				style: h(400, u),
 				children: e
-			}, t)) : [/* @__PURE__ */ l(o, {
-				style: _,
-				children: [f.titleColor ? g(f.titleColor) : null, /* @__PURE__ */ c(a, {
-					numberOfLines: 1,
-					style: [h(600, p), { flexShrink: 1 }],
-					children: f.title
-				})]
-			}, "title"), ...f.rows.map((e, t) => /* @__PURE__ */ l(o, {
-				style: _,
-				children: [
-					e.color ? g(e.color) : null,
-					/* @__PURE__ */ c(a, {
+			}, t)) : [
+				/* @__PURE__ */ f(l, {
+					style: y,
+					children: [s.titleColor ? v(s.titleColor) : null, /* @__PURE__ */ d(c, {
 						numberOfLines: 1,
-						style: [h(400, m), { flexShrink: 1 }],
-						children: e.name
-					}),
-					/* @__PURE__ */ c(a, {
+						style: [h(600, u), { flexShrink: 1 }],
+						children: s.title
+					})]
+				}, "title"),
+				...s.subtitle ? [/* @__PURE__ */ d(l, {
+					style: y,
+					children: /* @__PURE__ */ d(c, {
 						numberOfLines: 1,
-						style: [h(600, p), {
-							flexGrow: 1,
-							marginLeft: 16,
-							textAlign: "right"
+						style: [h(400, p), {
+							fontSize: 11,
+							paddingLeft: s.titleColor ? 14 : 0
 						}],
-						children: e.value
+						children: s.subtitle
 					})
-				]
-			}, t))]
+				}, "subtitle")] : [],
+				...s.rows.map((e, t) => /* @__PURE__ */ f(l, {
+					style: y,
+					children: [
+						_.swatchWidth > 0 ? /* @__PURE__ */ d(l, {
+							style: { width: _.swatchWidth },
+							children: e.color ? v(e.color) : null
+						}) : null,
+						/* @__PURE__ */ d(c, {
+							numberOfLines: 1,
+							style: [h(400, p), { flexShrink: 1 }],
+							children: e.name
+						}),
+						/* @__PURE__ */ d(c, {
+							numberOfLines: 1,
+							style: [h(600, u), {
+								flexGrow: 1,
+								marginLeft: 16,
+								textAlign: "right",
+								fontVariant: ["tabular-nums"]
+							}],
+							children: e.value
+						})
+					]
+				}, t))
+			]
 		}, "tooltip"));
 	}
-	return v;
+	return g;
 }
-var N = (e) => ({
+var P = (e) => ({
 	position: "absolute",
-	backgroundColor: D(e.theme.background),
-	borderColor: D(e.theme.axis),
+	backgroundColor: O(e.theme.background),
+	borderColor: O(e.theme.axis),
 	borderWidth: 1,
 	borderRadius: 8,
 	shadowColor: "#0f172a",
@@ -426,6 +512,6 @@ var N = (e) => ({
 	elevation: 6
 });
 //#endregion
-export { u as SHAPE_BUDGET, v as dashRuns, M as drawHover, j as drawStatic, C as primitiveLimits, N as tooltipCard };
+export { p as SHAPE_BUDGET, x as dashRuns, N as drawHover, M as drawStatic, E as primitiveLimits, P as tooltipCard };
 
 //# sourceMappingURL=scene.js.map