@lilt-ui/charts 0.1.0 → 0.2.0

package/dist/finance.js

@@ -0,0 +1,1157 @@
+"use client";
+import { A as e, B as t, C as n, D as r, E as i, I as a, J as o, N as s, O as c, R as l, S as u, T as d, V as f, Z as p, b as m, d as h, g, h as _, i as v, k as y, ot as b, p as x, r as S, t as C, u as w, v as T, w as E, z as D } from "./cartesian-card-BDZs0v6E.js";
+import { useEffect as O, useMemo as k, useRef as A, useState as j } from "react";
+import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
+//#region src/finance/candle-geometry.ts
+var F = "var(--lilt-candle-up)", I = "var(--lilt-candle-down)";
+function L(e) {
+	return Math.round(e * 100) / 100;
+}
+function R(e, t, n) {
+	let r = e.fields[t], i = r?.[n.open], a = r?.[n.high], o = r?.[n.low], s = e.values[t];
+	return i == null || a == null || o == null || s == null ? null : {
+		open: i,
+		high: a,
+		low: o,
+		close: s,
+		up: s >= i
+	};
+}
+function z(e, t, n) {
+	for (let r of e) {
+		let e = R(r, t, n);
+		if (!e) continue;
+		let i = Math.max(e.open, e.close), a = Math.min(e.open, e.close);
+		if (e.high < i || e.low > a) throw Error(`Lilt Candles on series "${t}" expects low ≤ open, close ≤ high at row ${r.sourceIndex + 1}.`);
+	}
+}
+function B(e, t, n, r) {
+	let i = Math.max(1, n.columnWidth), o = i / 2, s = L(e), c = L(n.y(t.high)), l = L(n.y(t.low));
+	if (r === "ohlc") {
+		let r = L(n.y(t.open)), i = L(n.y(t.close)), a = L(Math.max(2, o));
+		return {
+			body: null,
+			hollow: null,
+			stroke: `M${s},${c}V${l}M${L(e - a)},${r}H${s}M${s},${i}H${L(e + a)}`
+		};
+	}
+	let u = n.y(Math.max(t.open, t.close)), d = n.y(Math.min(t.open, t.close));
+	if (d - u < 1) {
+		let e = (u + d) / 2;
+		u = e - .5, d = e + .5;
+	}
+	let f = r === "hollow" && t.up && i >= 3, p = f ? .5 : 0, m = a(e - o + p, u + p, Math.max(1, i - p * 2), Math.max(1, d - u - p * 2), i >= 6 ? 1.5 : 0), h = (c < u ? `M${s},${c}V${L(u)}` : "") + (l > d ? `M${s},${L(d)}V${l}` : "");
+	return {
+		body: f ? null : m,
+		hollow: f ? m : null,
+		stroke: h
+	};
+}
+function V(t, n, r, i, a, o) {
+	let c = new e(), l = new e(), u = new e();
+	for (let { row: e, cx: d } of s(t, i)) {
+		let t = R(e, n, r);
+		if (!t) continue;
+		let s = o(e, t), f = B(d, t, i, a);
+		f.body && c.add(s, f.body), f.hollow && l.add(s, f.hollow), f.stroke && u.add(s, f.stroke);
+	}
+	return {
+		bodies: c.entries(),
+		hollow: l.entries(),
+		strokes: u.entries()
+	};
+}
+//#endregion
+//#region src/finance/candles.tsx
+function H(e, t, n) {
+	return f(e, t, n.up ? F : I);
+}
+function U({ paths: e, display: t }) {
+	let n = t === "ohlc" ? 1.5 : 1;
+	return /* @__PURE__ */ P(M, { children: [
+		e.strokes.map(({ color: e, d: r }) => /* @__PURE__ */ N("path", {
+			d: r,
+			fill: "none",
+			strokeWidth: n,
+			strokeLinecap: t === "ohlc" ? "round" : "butt",
+			style: { stroke: e }
+		}, `stroke-${e}`)),
+		e.bodies.map(({ color: e, d: t }) => /* @__PURE__ */ N("path", {
+			d: t,
+			style: { fill: e }
+		}, `body-${e}`)),
+		e.hollow.map(({ color: e, d: t }) => /* @__PURE__ */ N("path", {
+			d: t,
+			strokeWidth: 1,
+			style: {
+				fill: "var(--lilt-surface)",
+				stroke: e
+			}
+		}, `hollow-${e}`))
+	] });
+}
+var W = t(function({ series: e, open: t, high: n, low: r, display: i = "candle", className: a }) {
+	let o = y("Candles", e, [
+		t,
+		n,
+		r
+	], "column"), { snapshot: s, descriptor: c, scales: l } = o, u = k(() => {
+		let a = {
+			open: t,
+			high: n,
+			low: r
+		};
+		return z(s.data.rows, e, a), V(s.data.rows, e, a, l, i, (e, t) => H(c, e, t));
+	}, [
+		s,
+		e,
+		t,
+		n,
+		r,
+		l,
+		i,
+		c
+	]);
+	return /* @__PURE__ */ N("g", {
+		"aria-hidden": "true",
+		className: ["lilt-chart__candles", a].filter(Boolean).join(" "),
+		"data-series": e,
+		"data-display": i,
+		clipPath: o.clipPath,
+		mask: o.mask,
+		style: {
+			opacity: o.opacity,
+			transition: o.reducedMotion ? void 0 : "opacity 160ms ease-out"
+		},
+		children: /* @__PURE__ */ N(U, {
+			paths: u,
+			display: i
+		})
+	});
+}, {
+	layout: "column",
+	series: (e) => e.series,
+	fields: (e) => [
+		e.open,
+		e.high,
+		e.low
+	],
+	highlight: (e, { row: t, snapshot: n, descriptor: r }) => {
+		let i = R(t, e.series, e);
+		if (!i) return null;
+		let a = e.display ?? "candle", o = c(n, e.series), s = B(o.x(t.x), i, o, a), l = H(r, t, i);
+		return /* @__PURE__ */ N("g", {
+			className: "lilt-chart__candle-highlight",
+			children: /* @__PURE__ */ N(U, {
+				display: a,
+				paths: {
+					bodies: s.body ? [{
+						color: l,
+						d: s.body
+					}] : [],
+					hollow: s.hollow ? [{
+						color: l,
+						d: s.hollow
+					}] : [],
+					strokes: s.stroke ? [{
+						color: l,
+						d: s.stroke
+					}] : []
+				}
+			})
+		});
+	}
+});
+//#endregion
+//#region src/finance/cards/pane.tsx
+function G({ context: e, label: t, caption: n, readout: r, series: i, height: a, y: o, bars: s, xAxis: c = !1, children: l }) {
+	let [d, f] = j(null), p = d ?? e.data.at(-1) ?? null;
+	return /* @__PURE__ */ P("div", {
+		className: "lilt-card__pane",
+		children: [n ? /* @__PURE__ */ P("span", {
+			className: "lilt-card__pane-caption",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ N("span", {
+				className: "lilt-card__pane-name",
+				children: n
+			}), r && p && !e.loading ? r(p) : null]
+		}) : null, /* @__PURE__ */ N(b, {
+			className: "lilt-card__chart",
+			"aria-label": t,
+			data: e.data,
+			x: e.x,
+			y: o,
+			series: i,
+			controller: e.controller,
+			onSelectionChange: r ? (e) => f(e?.row ?? null) : void 0,
+			motion: e.motion,
+			status: e.loading ? "loading" : "ready",
+			children: /* @__PURE__ */ P(D, {
+				height: a,
+				margins: {
+					...e.margins,
+					top: 6,
+					bottom: c ? 28 : 4
+				},
+				axis: e.axis,
+				pill: e.hoverStyle,
+				axisInset: e.axisInset,
+				slots: e.slots || !!s,
+				bars: s,
+				background: "none",
+				children: [l, c ? /* @__PURE__ */ N(u, { labels: "fit" }) : null]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/finance/cards/candlestick-chart-card.tsx
+function K(e, t) {
+	let n = e[t];
+	return typeof n == "number" && Number.isFinite(n) ? n : null;
+}
+function q(e, t, n) {
+	let r = e.length ? K(e[0], t) : null, i = e.length ? K(e.at(-1), n) : null;
+	return r && i !== null ? i / r - 1 : void 0;
+}
+function ee(e) {
+	return (t) => {
+		let n = t.series[0]?.fields;
+		return !n?.length || n.some((e) => e.value === null) ? null : n.map((t) => `${t.label[0]} ${e(t.value)}`).join("  ");
+	};
+}
+var te = {
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 2
+};
+function ne({ open: e, high: t, low: n, close: r, volume: a, display: o = "candle", scale: s = "linear", label: c = "Price", live: u = !1, data: f, ranges: p, delta: m, valueFormat: h = te, locale: g = "en-US", volumeHeight: _ = 64, ...v }) {
+	let y = k(() => S(g, h).full, [g, JSON.stringify(h)]), b = k(() => S(g).compact, [g]), x = k(() => p?.map((t) => ({
+		...t,
+		delta: t.delta ?? q(t.data, e, r)
+	})), [
+		p,
+		e,
+		r
+	]), w = (q(f ?? p?.[0]?.data ?? [], e, r) ?? 0) >= 0, T = (t) => (K(t, r) ?? 0) >= (K(t, e) ?? 0), E = o === "area", D = {
+		open: {
+			label: "Open",
+			accessor: (t) => K(t, e)
+		},
+		high: {
+			label: "High",
+			accessor: (e) => K(e, t)
+		},
+		low: {
+			label: "Low",
+			accessor: (e) => K(e, n)
+		}
+	};
+	return /* @__PURE__ */ N(C, {
+		...v,
+		data: f,
+		ranges: x,
+		delta: m ?? (f ? q(f, e, r) : void 0),
+		valueFormat: h,
+		locale: g,
+		aggregate: "last",
+		tiles: !1,
+		live: u,
+		series: [{
+			key: r,
+			label: c,
+			color: E ? w ? F : I : void 0
+		}],
+		shape: {
+			kind: "marks",
+			id: `candles:${o}:${s}:${e}:${t}:${n}:${!!a}`,
+			includeZero: !1,
+			scale: s,
+			slots: !0,
+			xAxis: !a,
+			series: () => E ? {
+				fields: D,
+				area: { treatment: "fade" },
+				curve: "linear"
+			} : {
+				fields: D,
+				line: { showInspectionPoint: !1 }
+			},
+			describe: ee(y),
+			draw: (e) => e.map((e) => E ? [/* @__PURE__ */ N(l, { series: e }, `area-${e}`), /* @__PURE__ */ N(i, { series: e }, `line-${e}`)] : /* @__PURE__ */ N(W, {
+				series: e,
+				open: "open",
+				high: "high",
+				low: "low",
+				display: o
+			}, e))
+		},
+		panes: a ? (e) => /* @__PURE__ */ N(G, {
+			context: e,
+			label: `${v.title} volume`,
+			caption: "Volume",
+			height: _,
+			xAxis: !0,
+			y: {
+				includeZero: !0,
+				ticks: 2,
+				format: b
+			},
+			bars: { series: ["volume"] },
+			series: [{
+				id: "volume",
+				label: "Volume",
+				accessor: (e) => K(e, a),
+				formatValue: b,
+				colorAt: (e) => T(e) ? "color-mix(in srgb, var(--lilt-candle-up) 42%, transparent)" : "color-mix(in srgb, var(--lilt-candle-down) 42%, transparent)",
+				bar: { radius: 1 }
+			}],
+			children: /* @__PURE__ */ N(d, { series: "volume" })
+		}) : void 0
+	});
+}
+//#endregion
+//#region src/finance/indicators.ts
+function J(e) {
+	return typeof e == "number" && Number.isFinite(e);
+}
+function Y(e, t) {
+	if (!Number.isInteger(t) || t < 1) throw Error(`Lilt ${e} period must be a positive integer; received ${t}.`);
+}
+function X(e, t) {
+	Y("sma", t);
+	let n = [], r = 0, i = 0;
+	for (let a = 0; a < e.length; a += 1) {
+		let o = e[a];
+		J(o) && (r += o, i += 1);
+		let s = a - t >= 0 ? e[a - t] : void 0;
+		a - t >= 0 && J(s) && (r -= s, --i), n.push(a >= t - 1 && i === t ? r / t : null);
+	}
+	return n;
+}
+function Z(e, t) {
+	Y("ema", t);
+	let n = 2 / (t + 1), r = [], i = null, a = [];
+	for (let o of e) {
+		if (!J(o)) {
+			r.push(null);
+			continue;
+		}
+		if (i === null) {
+			a.push(o), a.length === t && (i = a.reduce((e, t) => e + t, 0) / t), r.push(i);
+			continue;
+		}
+		i = o * n + i * (1 - n), r.push(i);
+	}
+	return r;
+}
+function re(e, t = 14) {
+	Y("rsi", t);
+	let n = e.map(() => null), r = null, i = 0, a = 0, o = 0, s = 0, c = 0;
+	return e.forEach((e, l) => {
+		if (!J(e)) return;
+		if (r === null) {
+			r = e;
+			return;
+		}
+		let u = e - r;
+		r = e;
+		let d = Math.max(0, u), f = Math.max(0, -u);
+		if (o += 1, o <= t) {
+			if (i += d, a += f, o < t) return;
+			s = i / t, c = a / t;
+		} else s = (s * (t - 1) + d) / t, c = (c * (t - 1) + f) / t;
+		n[l] = c === 0 ? s === 0 ? 50 : 100 : 100 - 100 / (1 + s / c);
+	}), n;
+}
+function ie(e, t = 12, n = 26, r = 9) {
+	if (t >= n) throw Error("Lilt macd needs a fast period shorter than the slow period.");
+	let i = Z(e, t), a = Z(e, n), o = e.map((e, t) => {
+		let n = i[t], r = a[t];
+		return n === null || r === null ? null : n - r;
+	}), s = Z(o, r);
+	return {
+		macd: o,
+		signal: s,
+		histogram: o.map((e, t) => {
+			let n = s[t];
+			return e === null || n === null ? null : e - n;
+		})
+	};
+}
+function ae(e, t = 20, n = 2) {
+	let r = X(e, t), i = [], a = [];
+	return r.forEach((r, o) => {
+		if (r === null) {
+			i.push(null), a.push(null);
+			return;
+		}
+		let s = 0;
+		for (let n = o - t + 1; n <= o; n += 1) s += (e[n] - r) ** 2;
+		let c = Math.sqrt(s / t) * n;
+		i.push(r + c), a.push(r - c);
+	}), {
+		middle: r,
+		upper: i,
+		lower: a
+	};
+}
+function oe(e) {
+	let t = -Infinity;
+	return e.map((e) => J(e) ? (t = Math.max(t, e), t > 0 ? e / t - 1 : 0) : null);
+}
+function se(e) {
+	let t = e.find(J);
+	return e.map((e) => J(e) && t !== void 0 && t !== 0 ? e / t - 1 : null);
+}
+function ce(e, t) {
+	for (let n of t) if (!J(n.price) || !J(n.size) || n.size < 0) throw Error(`Lilt order book ${e} need finite prices and non-negative sizes; received ${n.price} × ${n.size}.`);
+}
+function le(e, t) {
+	ce("bids", e), ce("asks", t);
+	let n = (e) => {
+		let t = /* @__PURE__ */ new Map();
+		for (let n of e) t.set(n.price, (t.get(n.price) ?? 0) + n.size);
+		return [...t].map(([e, t]) => ({
+			price: e,
+			size: t
+		}));
+	}, r = n(e).sort((e, t) => t.price - e.price), i = n(t).sort((e, t) => e.price - t.price), a = r[0]?.price ?? null, o = i[0]?.price ?? null;
+	if (a !== null && o !== null && a >= o) throw Error(`Lilt order book is crossed: best bid ${a} ≥ best ask ${o}.`);
+	let s = 0, c = r.map((e) => (s += e.size, {
+		price: e.price,
+		bid: s,
+		ask: null,
+		size: e.size,
+		side: "bid"
+	})), l = 0, u = i.map((e) => (l += e.size, {
+		price: e.price,
+		bid: null,
+		ask: l,
+		size: e.size,
+		side: "ask"
+	}));
+	return {
+		levels: [...c.reverse(), ...u],
+		bestBid: a,
+		bestAsk: o,
+		mid: a !== null && o !== null ? (a + o) / 2 : null,
+		spread: a !== null && o !== null ? o - a : null,
+		bidDepth: s,
+		askDepth: l
+	};
+}
+//#endregion
+//#region src/finance/cards/indicator-chart-card.tsx
+function ue(e) {
+	return e.map((e, t) => {
+		let n = typeof e == "string" ? { kind: e } : e, r = "period" in n && n.period !== void 0 ? n.period : (n.kind, 20), i = "deviations" in n && n.deviations !== void 0 ? n.deviations : 2, a = n.kind === "bollinger" ? "BB" : n.kind.toUpperCase();
+		return {
+			id: `__overlay${t}`,
+			label: `${a} ${r}`,
+			kind: n.kind,
+			period: r,
+			deviations: i
+		};
+	});
+}
+function de(e) {
+	return e.map((e, t) => {
+		let n = typeof e == "string" ? { kind: e } : e;
+		return {
+			kind: n.kind,
+			id: `__pane${t}`,
+			period: "period" in n && n.period !== void 0 ? n.period : 14,
+			fast: "fast" in n && n.fast !== void 0 ? n.fast : 12,
+			slow: "slow" in n && n.slow !== void 0 ? n.slow : 26,
+			signal: "signal" in n && n.signal !== void 0 ? n.signal : 9
+		};
+	});
+}
+function Q(e, t) {
+	if (!t) return null;
+	let n = e[t];
+	return typeof n == "number" && Number.isFinite(n) ? n : null;
+}
+function fe(e, t, n, r) {
+	let i = e.map((e) => Q(e, t)), a = e.map((e) => ({ ...e })), o = (e, t) => t.forEach((t, n) => a[n][e] = t);
+	for (let e of n) if (e.kind === "bollinger") {
+		let t = ae(i, e.period, e.deviations);
+		o(e.id, t.middle), o(`${e.id}Upper`, t.upper), o(`${e.id}Lower`, t.lower);
+	} else o(e.id, (e.kind === "sma" ? X : Z)(i, e.period));
+	for (let e of r) if (e.kind === "rsi" && o(e.id, re(i, e.period)), e.kind === "macd") {
+		let t = ie(i, e.fast, e.slow, e.signal);
+		o(`${e.id}Macd`, t.macd), o(`${e.id}Signal`, t.signal), o(`${e.id}Histogram`, t.histogram);
+	}
+	return a;
+}
+var pe = {
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 2
+}, me = [
+	"var(--lilt-series-4)",
+	"var(--lilt-series-3)",
+	"var(--lilt-series-5)"
+];
+function he({ close: e, open: t, high: n, low: a, volume: o, display: s, overlays: c = [], panes: l = ["rsi", "macd"], label: u = "Price", scale: f = "linear", live: p = !1, data: h, ranges: g, delta: _, valueFormat: v = pe, locale: y = "en-US", paneHeight: b = 72, ...x }) {
+	let w = !!(t && n && a), E = s ?? (w ? "candle" : "line");
+	if (E !== "line" && !w) throw Error("Lilt IndicatorChartCard candles need open, high and low fields.");
+	let D = JSON.stringify(c), O = JSON.stringify(l), A = k(() => ue(c), [D]), j = k(() => de(l), [O]);
+	if (j.some((e) => e.kind === "volume") && !o) throw Error("Lilt IndicatorChartCard needs a `volume` field for a volume pane.");
+	let L = k(() => h ? fe(h, e, A, j) : void 0, [
+		h,
+		e,
+		A,
+		j
+	]), R = k(() => g?.map((n) => ({
+		...n,
+		data: fe(n.data, e, A, j),
+		delta: n.delta ?? (t ? q(n.data, t, e) : void 0)
+	})), [
+		g,
+		e,
+		t,
+		A,
+		j
+	]), z = k(() => S(y, v).full, [y, JSON.stringify(v)]), B = k(() => S(y, { maximumFractionDigits: 2 }).full, [y]), V = k(() => S(y).compact, [y]), H = w ? {
+		open: {
+			label: "Open",
+			accessor: (e) => Q(e, t)
+		},
+		high: {
+			label: "High",
+			accessor: (e) => Q(e, n)
+		},
+		low: {
+			label: "Low",
+			accessor: (e) => Q(e, a)
+		}
+	} : void 0, U = new Map(A.map((e) => [e.id, e])), K = h?.length ? Q(h[0], e) : null, te = h?.length ? Q(h.at(-1), e) : null, ne = K === null || te === null || te >= K, J = j.at(-1)?.id, Y = (n, r) => {
+		let a = n.id === J, s = (e) => (t) => Q(t, e), c = (e, t, n) => {
+			let r = Q(e, t);
+			return /* @__PURE__ */ P("span", {
+				className: "lilt-card__pane-value",
+				children: [n ? `${n} ` : "", r === null ? "—" : B(r)]
+			}, t);
+		};
+		if (n.kind === "volume") return /* @__PURE__ */ N(G, {
+			context: r,
+			label: `${x.title} volume`,
+			caption: "Volume",
+			readout: (e) => /* @__PURE__ */ N("span", {
+				className: "lilt-card__pane-value",
+				children: Q(e, o) === null ? "—" : V(Q(e, o))
+			}),
+			height: b,
+			xAxis: a,
+			y: {
+				includeZero: !0,
+				ticks: 2,
+				format: V
+			},
+			bars: { series: ["volume"] },
+			series: [{
+				id: "volume",
+				label: "Volume",
+				accessor: s(o),
+				formatValue: V,
+				colorAt: (n) => (Q(n, e) ?? 0) >= (Q(n, t) ?? Q(n, e) ?? 0) ? "color-mix(in srgb, var(--lilt-candle-up) 42%, transparent)" : "color-mix(in srgb, var(--lilt-candle-down) 42%, transparent)",
+				bar: { radius: 1 }
+			}],
+			children: /* @__PURE__ */ N(d, { series: "volume" })
+		}, n.id);
+		if (n.kind === "rsi") return /* @__PURE__ */ P(G, {
+			context: r,
+			label: `${x.title} RSI ${n.period}`,
+			caption: `RSI ${n.period}`,
+			readout: (e) => c(e, n.id),
+			height: b,
+			xAxis: a,
+			y: {
+				domain: [0, 100],
+				ticks: 2,
+				format: (e) => String(Math.round(e))
+			},
+			series: [{
+				id: n.id,
+				label: `RSI ${n.period}`,
+				accessor: s(n.id),
+				color: "var(--lilt-series-1)",
+				formatValue: B,
+				line: { width: 1.5 }
+			}],
+			children: [
+				/* @__PURE__ */ N(m, {
+					axis: "y",
+					from: 30,
+					to: 70,
+					color: "var(--lilt-series-1)"
+				}),
+				/* @__PURE__ */ N(T, {
+					value: 70,
+					color: "var(--lilt-muted)"
+				}),
+				/* @__PURE__ */ N(T, {
+					value: 30,
+					color: "var(--lilt-muted)"
+				}),
+				/* @__PURE__ */ N(i, { series: n.id })
+			]
+		}, n.id);
+		let l = `${n.id}Macd`, u = `${n.id}Signal`, f = `${n.id}Histogram`;
+		return /* @__PURE__ */ P(G, {
+			context: r,
+			label: `${x.title} MACD`,
+			caption: `MACD ${n.fast} · ${n.slow} · ${n.signal}`,
+			readout: (e) => [c(e, l), c(e, u, "Signal")],
+			height: b,
+			xAxis: a,
+			y: {
+				includeZero: !0,
+				ticks: 2,
+				format: B
+			},
+			bars: { series: [f] },
+			series: [
+				{
+					id: f,
+					label: "Histogram",
+					accessor: s(f),
+					formatValue: B,
+					colorAt: (e) => (Q(e, f) ?? 0) >= 0 ? "color-mix(in srgb, var(--lilt-candle-up) 55%, transparent)" : "color-mix(in srgb, var(--lilt-candle-down) 55%, transparent)",
+					bar: { radius: 1 }
+				},
+				{
+					id: l,
+					label: "MACD",
+					accessor: s(l),
+					color: "var(--lilt-series-4)",
+					formatValue: B,
+					line: { width: 1.5 }
+				},
+				{
+					id: u,
+					label: "Signal",
+					accessor: s(u),
+					color: "var(--lilt-series-3)",
+					formatValue: B,
+					line: {
+						width: 1.5,
+						dasharray: "3 3"
+					}
+				}
+			],
+			children: [
+				/* @__PURE__ */ N(d, { series: f }),
+				/* @__PURE__ */ N(i, { series: l }),
+				/* @__PURE__ */ N(i, { series: u })
+			]
+		}, n.id);
+	};
+	return /* @__PURE__ */ N(C, {
+		...x,
+		data: L,
+		ranges: R,
+		delta: _ ?? (h && t ? q(h, t, e) : void 0),
+		valueFormat: v,
+		locale: y,
+		aggregate: "last",
+		headlineSeries: e,
+		pillSeries: e,
+		tiles: !1,
+		live: p,
+		series: [{
+			key: e,
+			label: u,
+			color: E === "line" ? ne ? F : I : void 0
+		}, ...A.map((e, t) => ({
+			key: e.id,
+			label: e.label,
+			color: me[t % me.length]
+		}))],
+		shape: {
+			kind: "marks",
+			id: `indicator:${E}:${f}:${t}:${n}:${a}:${D}:${O}`,
+			includeZero: !1,
+			scale: f,
+			slots: !0,
+			xAxis: j.length === 0,
+			series: (e) => {
+				let t = U.get(e);
+				return t ? {
+					curve: "monotone",
+					line: {
+						width: 1.5,
+						showInspectionPoint: !1
+					},
+					...t.kind === "bollinger" ? { fields: {
+						upper: {
+							label: "Upper",
+							accessor: (e) => Q(e, `${t.id}Upper`)
+						},
+						lower: {
+							label: "Lower",
+							accessor: (e) => Q(e, `${t.id}Lower`)
+						}
+					} } : {}
+				} : E === "line" ? {
+					fields: H,
+					curve: "linear",
+					line: { width: 2 }
+				} : { fields: H };
+			},
+			describe: w ? ee(z) : void 0,
+			draw: (e) => e.map((e) => {
+				let t = U.get(e);
+				return t ? t.kind === "bollinger" ? [/* @__PURE__ */ N(r, {
+					series: e,
+					lower: "lower",
+					upper: "upper"
+				}, `band-${e}`), /* @__PURE__ */ N(i, { series: e }, `line-${e}`)] : /* @__PURE__ */ N(i, { series: e }, e) : E === "line" ? /* @__PURE__ */ N(i, { series: e }, e) : /* @__PURE__ */ N(W, {
+					series: e,
+					open: "open",
+					high: "high",
+					low: "low",
+					display: E
+				}, e);
+			})
+		},
+		panes: j.length ? (e) => /* @__PURE__ */ N(M, { children: j.map((t) => Y(t, e)) }) : void 0
+	});
+}
+//#endregion
+//#region src/finance/cards/depth-chart-card.tsx
+function ge({ price: e, label: t }) {
+	let { snapshot: n } = p();
+	if (e < n.xDomain[0] || e > n.xDomain[1]) return null;
+	let r = n.xToPixel(e);
+	return /* @__PURE__ */ P("g", {
+		className: "lilt-card__depth-mid",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ N("line", {
+			x1: r,
+			x2: r,
+			y1: n.plot.top + 18,
+			y2: n.plot.bottom,
+			strokeDasharray: "2 4",
+			vectorEffect: "non-scaling-stroke"
+		}), /* @__PURE__ */ N("text", {
+			x: r,
+			y: n.plot.top + 10,
+			textAnchor: "middle",
+			children: t
+		})]
+	});
+}
+var _e = {
+	style: "currency",
+	currency: "USD",
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 2
+};
+function ve({ title: e, bids: t, asks: r, valueFormat: a = _e, sizeFormat: o, locale: s = "en-US", height: c = 220, axis: d = "minimal", background: f = "dots", hoverStyle: p = "soft", surface: m, numberStyle: v, loading: y = !1, motion: C, className: T, style: O }) {
+	let A = k(() => le(t, r), [t, r]), M = JSON.stringify(a), L = JSON.stringify(o ?? null), R = k(() => S(s, a), [s, M]), z = k(() => S(s, o), [s, L]), B = k(() => S(s, {
+		style: "percent",
+		maximumFractionDigits: 3
+	}).full, [s]), [V, H] = j(null), U = k(() => [{
+		id: "bid",
+		label: "Bids",
+		accessor: (e) => e.bid,
+		color: F,
+		curve: "step-before",
+		area: { treatment: "fade" },
+		line: { width: 1.5 },
+		formatValue: z.full
+	}, {
+		id: "ask",
+		label: "Asks",
+		accessor: (e) => e.ask,
+		color: I,
+		curve: "step-after",
+		area: { treatment: "fade" },
+		line: { width: 1.5 },
+		formatValue: z.full
+	}], [z]), W = A.spread !== null && A.mid ? `${R.full(A.spread)} (${B(A.spread / A.mid)})` : "—", G = V ? V.bid ?? V.ask : null;
+	return /* @__PURE__ */ P(w, {
+		"aria-label": e,
+		surface: m,
+		numberStyle: v,
+		motion: C,
+		className: ["lilt-card--depth", T].filter(Boolean).join(" "),
+		style: O,
+		children: [
+			/* @__PURE__ */ P(x, { children: [/* @__PURE__ */ N(_, { children: e }), /* @__PURE__ */ N(g, {
+				value: A.mid,
+				format: R.full,
+				loading: y,
+				motion: C,
+				children: y ? null : V && G !== null ? /* @__PURE__ */ P(h, { children: [
+					z.full(G),
+					" ",
+					V.side === "bid" ? "bid" : "ask",
+					" depth at",
+					" ",
+					R.full(V.price)
+				] }) : /* @__PURE__ */ N(h, { children: "Mid price" })
+			})] }),
+			/* @__PURE__ */ P("dl", {
+				className: "lilt-card__stats",
+				children: [
+					/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("dt", { children: "Spread" }), /* @__PURE__ */ N("dd", { children: y ? "—" : W })] }),
+					/* @__PURE__ */ P("div", {
+						"data-side": "bid",
+						children: [/* @__PURE__ */ N("dt", { children: "Bid depth" }), /* @__PURE__ */ N("dd", { children: y ? "—" : z.compact(A.bidDepth) })]
+					}),
+					/* @__PURE__ */ P("div", {
+						"data-side": "ask",
+						children: [/* @__PURE__ */ N("dt", { children: "Ask depth" }), /* @__PURE__ */ N("dd", { children: y ? "—" : z.compact(A.askDepth) })]
+					})
+				]
+			}),
+			/* @__PURE__ */ N(b, {
+				className: "lilt-card__chart",
+				"aria-label": `${e} depth by price`,
+				data: A.levels,
+				x: {
+					type: "number",
+					accessor: (e) => e.price,
+					format: R.full
+				},
+				y: {
+					includeZero: !0,
+					ticks: 3,
+					format: z.compact
+				},
+				series: U,
+				onSelectionChange: (e) => H(e?.row ?? null),
+				motion: C,
+				status: y ? "loading" : "ready",
+				children: /* @__PURE__ */ P(D, {
+					height: c,
+					axis: d,
+					background: f,
+					pill: p,
+					margins: {
+						top: 8,
+						right: 4,
+						bottom: 28,
+						left: 4
+					},
+					children: [
+						/* @__PURE__ */ N(E, { pattern: "lines" }),
+						/* @__PURE__ */ N(l, { series: "bid" }),
+						/* @__PURE__ */ N(l, { series: "ask" }),
+						/* @__PURE__ */ N(i, { series: "bid" }),
+						/* @__PURE__ */ N(i, { series: "ask" }),
+						A.mid === null ? null : /* @__PURE__ */ N(ge, {
+							price: A.mid,
+							label: `Mid ${R.full(A.mid)}`
+						}),
+						/* @__PURE__ */ N(u, { labels: "fit" }),
+						/* @__PURE__ */ N(n, {})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/finance/cards/portfolio-chart-card.tsx
+function $(e, t) {
+	if (!t) return null;
+	let n = e[t];
+	return typeof n == "number" && Number.isFinite(n) ? n : null;
+}
+function ye(e, t, n) {
+	let r = e.at(-1), i = $(r, t), a = $(r, n);
+	return i !== null && a ? i / a - 1 : void 0;
+}
+function be({ value: e, basis: t, label: n = "Value", drawdown: r = !0, drawdownHeight: a = 64, data: o, ranges: s, delta: c, locale: u = "en-US", ...d }) {
+	let f = o ?? s?.[0]?.data ?? [], p = k(() => s?.map((n) => ({
+		...n,
+		delta: n.delta ?? ye(n.data, e, t)
+	})), [
+		s,
+		e,
+		t
+	]), m = k(() => S(u, {
+		style: "percent",
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 1
+	}).full, [u]), h = k(() => {
+		let t = oe(f.map((t) => $(t, e))).filter((e) => e !== null);
+		return t.length ? Math.min(...t) : null;
+	}, [f, e]);
+	return /* @__PURE__ */ N(C, {
+		...d,
+		data: o,
+		ranges: p,
+		delta: c ?? (o ? ye(o, e, t) : void 0),
+		locale: u,
+		aggregate: "last",
+		headlineSeries: e,
+		pillSeries: e,
+		tiles: !1,
+		restCaption: t ? () => "over basis" : void 0,
+		series: [{
+			key: e,
+			label: n
+		}, ...t ? [{
+			key: t,
+			label: "Basis",
+			dashed: !0
+		}] : []],
+		shape: {
+			kind: "marks",
+			id: `portfolio:${e}:${t}:${r}`,
+			includeZero: !1,
+			xAxis: !r,
+			series: (e) => e === t ? {
+				curve: "step-after",
+				color: "var(--lilt-muted)"
+			} : {
+				area: { treatment: "fade" },
+				curve: "monotone"
+			},
+			draw: (e) => e.map((e) => [/* @__PURE__ */ N(l, { series: e }, `area-${e}`), /* @__PURE__ */ N(i, { series: e }, e)])
+		},
+		panes: r ? (t) => {
+			let n = oe(t.data.map((t) => $(t, e))), r = new Map(t.data.map((e, t) => [e, n[t] ?? null]));
+			return /* @__PURE__ */ P(G, {
+				context: t,
+				label: `${d.title} drawdown`,
+				caption: "Drawdown",
+				readout: (e) => /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N("span", {
+					className: "lilt-card__pane-value",
+					children: r.get(e) == null ? "—" : m(r.get(e))
+				}), h === null ? null : /* @__PURE__ */ P("span", {
+					className: "lilt-card__pane-value",
+					children: ["Max ", m(h)]
+				})] }),
+				height: a,
+				xAxis: !0,
+				y: {
+					includeZero: !0,
+					ticks: 2,
+					format: m
+				},
+				series: [{
+					id: "drawdown",
+					label: "Drawdown",
+					accessor: (e) => r.get(e) ?? null,
+					color: "var(--lilt-candle-down)",
+					formatValue: m,
+					area: { treatment: "fade" },
+					line: { width: 1.5 },
+					curve: "monotone"
+				}],
+				children: [/* @__PURE__ */ N(l, { series: "drawdown" }), /* @__PURE__ */ N(i, { series: "drawdown" })]
+			});
+		} : void 0
+	});
+}
+//#endregion
+//#region src/finance/cards/price-chart-card.tsx
+function xe(e, t) {
+	let n = e[t];
+	return typeof n == "number" && Number.isFinite(n) ? n : null;
+}
+function Se(e, t) {
+	let n = e.map((e) => xe(e, t)).filter((e) => e !== null);
+	return n.length > 1 ? {
+		first: n[0],
+		last: n.at(-1)
+	} : null;
+}
+function Ce(e, t) {
+	let n = e.map((e) => ({ ...e }));
+	for (let r of t) se(e.map((e) => xe(e, r))).forEach((e, t) => n[t][`__rebased${r}`] = e);
+	return n;
+}
+var we = {
+	style: "currency",
+	currency: "USD",
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 2
+};
+function Te({ price: e, symbol: t, name: n, icon: r, display: a = "area", versus: o, data: s, ranges: c, delta: u, valueFormat: d = we, locale: f = "en-US", title: p, ...m }) {
+	let h = !!o?.length, g = k(() => [e, ...(o ?? []).map((e) => e.key)], [e, o]), _ = k(() => s ? h ? Ce(s, g) : s : void 0, [
+		s,
+		h,
+		g
+	]), y = k(() => c?.map((t) => {
+		let n = Se(t.data, e);
+		return {
+			...t,
+			data: h ? Ce(t.data, g) : t.data,
+			delta: t.delta ?? (n && n.first ? n.last / n.first - 1 : void 0)
+		};
+	}), [
+		c,
+		h,
+		g,
+		e
+	]), b = Se(s ?? c?.[0]?.data ?? [], e), x = !b || b.last >= b.first, w = k(() => S(f, d).full, [f, JSON.stringify(d)]), T = k(() => S(f, {
+		style: "percent",
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 1
+	}).full, [f]), E = (e) => h ? `__rebased${e}` : e, D = /* @__PURE__ */ P("span", {
+		className: "lilt-card__ticker",
+		children: [
+			r ? /* @__PURE__ */ N("span", {
+				className: "lilt-card__ticker-icon",
+				children: r
+			}) : null,
+			/* @__PURE__ */ N("span", {
+				className: "lilt-card__ticker-symbol",
+				children: t ?? p
+			}),
+			n ? /* @__PURE__ */ N("span", {
+				className: "lilt-card__ticker-name",
+				children: n
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ N(C, {
+		...m,
+		title: p,
+		heading: D,
+		data: _,
+		ranges: y,
+		delta: h ? void 0 : u ?? (s && b && b.first ? b.last / b.first - 1 : void 0),
+		valueFormat: h ? {
+			style: "percent",
+			maximumFractionDigits: 1
+		} : d,
+		formatValue: h ? (e) => v(T)(e) : void 0,
+		locale: f,
+		aggregate: "last",
+		headlineSeries: E(e),
+		pillSeries: h ? "nearest" : E(e),
+		tiles: h,
+		restCaption: h ? void 0 : (t) => {
+			let n = Se(t, e);
+			return n ? v(w)(n.last - n.first) : null;
+		},
+		series: [{
+			key: E(e),
+			label: t ?? p,
+			color: h ? void 0 : x ? F : I
+		}, ...(o ?? []).map((e) => ({
+			...e,
+			key: E(e.key)
+		}))],
+		shape: {
+			kind: "marks",
+			id: `price:${a}:${g.join()}:${h}`,
+			includeZero: h,
+			series: () => a === "area" && !h ? {
+				area: { treatment: "fade" },
+				curve: "monotone"
+			} : { curve: "monotone" },
+			draw: (e) => e.map((e) => a === "area" && !h ? [/* @__PURE__ */ N(l, { series: e }, `area-${e}`), /* @__PURE__ */ N(i, { series: e }, e)] : /* @__PURE__ */ N(i, { series: e }, e))
+		},
+		bleed: m.bleed ?? !0
+	});
+}
+//#endregion
+//#region src/finance/order-book.tsx
+function Ee(e, t, n) {
+	let r = /* @__PURE__ */ new Map();
+	for (let t of e) Number.isFinite(t.price) && Number.isFinite(t.size) && t.size > 0 && r.set(t.price, (r.get(t.price) ?? 0) + t.size);
+	let i = [...r].map(([e, t]) => ({
+		price: e,
+		size: t
+	})).sort((e, n) => t === "bid" ? n.price - e.price : e.price - n.price).slice(0, n), a = 0;
+	return i.map((e) => (a += e.size, {
+		...e,
+		total: a,
+		side: t
+	}));
+}
+function De(e, t) {
+	let n = A(null), [r, i] = j(/* @__PURE__ */ new Set());
+	return O(() => {
+		let r = new Map(e.map((e) => [`${e.side}:${e.price}`, e.size])), a = n.current;
+		if (n.current = r, !t || !a) return;
+		let o = new Set([...r].filter(([e, t]) => a.get(e) !== t).map(([e]) => e));
+		if (!o.size) return;
+		i(o);
+		let s = window.setTimeout(() => i(/* @__PURE__ */ new Set()), 600);
+		return () => window.clearTimeout(s);
+	}, [e, t]), r;
+}
+function Oe({ title: e, bids: t, asks: n, depth: r = 8, valueFormat: i = {
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 2
+}, sizeFormat: a, locale: s = "en-US", flash: c = !0, surface: l, motion: u, className: d, style: f }) {
+	let p = o(u ?? "auto"), m = JSON.stringify(i), h = JSON.stringify(a ?? null), g = k(() => S(s, i).full, [s, m]), _ = k(() => S(s, a).compact, [s, h]), v = k(() => S(s, {
+		style: "percent",
+		maximumFractionDigits: 3
+	}).full, [s]), y = k(() => Ee(t, "bid", r), [t, r]), b = k(() => Ee(n, "ask", r), [n, r]), x = De(k(() => [...b, ...y], [b, y]), c && !p), C = Math.max(1, b.at(-1)?.total ?? 0, y.at(-1)?.total ?? 0), T = y[0]?.price, E = b[0]?.price, D = T !== void 0 && E !== void 0 ? {
+		value: E - T,
+		mid: (E + T) / 2
+	} : null, O = (e) => /* @__PURE__ */ P("tr", {
+		className: "lilt-order-book__level",
+		"data-side": e.side,
+		"data-flash": x.has(`${e.side}:${e.price}`) || void 0,
+		style: { "--lilt-depth": `${e.total / C * 100}%` },
+		children: [
+			/* @__PURE__ */ N("th", {
+				scope: "row",
+				children: g(e.price)
+			}),
+			/* @__PURE__ */ N("td", { children: _(e.size) }),
+			/* @__PURE__ */ N("td", { children: _(e.total) })
+		]
+	}, `${e.side}:${e.price}`);
+	return /* @__PURE__ */ N(w, {
+		"aria-label": e,
+		surface: l,
+		motion: u,
+		className: ["lilt-card--order-book", d].filter(Boolean).join(" "),
+		style: f,
+		children: /* @__PURE__ */ P("table", {
+			className: "lilt-order-book",
+			children: [
+				/* @__PURE__ */ N("caption", { children: e }),
+				/* @__PURE__ */ N("thead", { children: /* @__PURE__ */ P("tr", { children: [
+					/* @__PURE__ */ N("th", {
+						scope: "col",
+						children: "Price"
+					}),
+					/* @__PURE__ */ N("th", {
+						scope: "col",
+						children: "Size"
+					}),
+					/* @__PURE__ */ N("th", {
+						scope: "col",
+						children: "Total"
+					})
+				] }) }),
+				/* @__PURE__ */ N("tbody", {
+					"aria-label": "Asks",
+					children: [...b].reverse().map(O)
+				}),
+				/* @__PURE__ */ N("tbody", {
+					"aria-label": "Spread",
+					children: /* @__PURE__ */ P("tr", {
+						className: "lilt-order-book__spread",
+						children: [/* @__PURE__ */ N("th", {
+							scope: "row",
+							children: D ? g(D.mid) : "—"
+						}), /* @__PURE__ */ N("td", {
+							colSpan: 2,
+							children: D ? `Spread ${g(D.value)} · ${v(D.value / D.mid)}` : "No spread"
+						})]
+					})
+				}),
+				/* @__PURE__ */ N("tbody", {
+					"aria-label": "Bids",
+					children: y.map(O)
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { W as Candles, ne as CandlestickChartCard, ve as DepthChartCard, he as IndicatorChartCard, Oe as OrderBook, be as PortfolioChartCard, Te as PriceChartCard, ae as bollinger, le as depthLevels, oe as drawdown, Z as ema, ie as macd, se as rebase, re as rsi, X as sma };