@lilt-ui/charts 0.5.0 → 0.6.0

package/dist/finance.js

@@ -1,14 +1,14 @@
 "use client";
-import { C as e, F as t, I as n, L as r, N as i, R as a, S as o, U as s, Z as c, _ as l, b as u, d, dt as f, g as p, i as m, k as h, l as g, nt as _, q as v, r as y, t as b, v as x, w as S, x as C, y as w } from "./cartesian-card-7DAiMU3w.js";
-import { S as T, d as E, g as D, h as O, p as k, u as A } from "./report-context-Cz0AYdV2.js";
-import { useEffect as ee, useMemo as j, useRef as te, useState as M } from "react";
-import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
+import { A as e, C as t, G as n, I as r, K as i, L as a, P as o, R as s, S as c, T as l, X as u, _ as d, a as f, b as p, et as m, f as h, i as g, it as _, n as v, pt as y, t as b, u as x, v as S, w as C, x as w, y as T, z as E } from "./skeleton-block-Uf1lywJi.js";
+import { S as D, d as O, g as k, h as A, p as j, u as ee } from "./report-context-Cz0AYdV2.js";
+import { useEffect as M, useMemo as N, useRef as P, useState as F } from "react";
+import { Fragment as I, jsx as L, jsxs as R } from "react/jsx-runtime";
 //#region src/finance/candle-geometry.ts
-var I = "var(--lilt-candle-up)", L = "var(--lilt-candle-down)";
-function R(e) {
+var z = "var(--lilt-candle-up)", B = "var(--lilt-candle-down)";
+function V(e) {
 	return Math.round(e * 100) / 100;
 }
-function z(e, t, n) {
+function H(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,
@@ -18,84 +18,84 @@ function z(e, t, n) {
 		up: s >= i
 	};
 }
-function B(e, t, n) {
+function U(e, t, n) {
 	for (let r of e) {
-		let e = z(r, t, n);
+		let e = H(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 V(e, t, n, r, a = !1) {
-	let o = Math.max(1, n.columnWidth), s = o / 2, l = R(e), u = R(n.y(t.high)), d = R(n.y(t.low));
+function W(e, t, n, r, i = !1) {
+	let a = Math.max(1, n.columnWidth), s = a / 2, c = V(e), l = V(n.y(t.high)), u = V(n.y(t.low));
 	if (r === "ohlc") {
-		let r = R(n.y(t.open)), i = R(n.y(t.close)), a = R(Math.max(2, s));
+		let r = V(n.y(t.open)), i = V(n.y(t.close)), a = V(Math.max(2, s));
 		return {
 			body: null,
 			hollow: null,
-			stroke: `M${l},${u}V${d}M${R(e - a)},${r}H${l}M${l},${i}H${R(e + a)}`,
+			stroke: `M${c},${l}V${u}M${V(e - a)},${r}H${c}M${c},${i}H${V(e + a)}`,
 			side: null,
 			top: null
 		};
 	}
-	let f = n.y(Math.max(t.open, t.close)), p = n.y(Math.min(t.open, t.close));
-	if (p - f < 1) {
-		let e = (f + p) / 2;
-		f = e - .5, p = e + .5;
+	let d = n.y(Math.max(t.open, t.close)), f = n.y(Math.min(t.open, t.close));
+	if (f - d < 1) {
+		let e = (d + f) / 2;
+		d = e - .5, f = e + .5;
 	}
-	let m = r === "hollow" && t.up && o >= 3, h = m ? .5 : 0, g = a ? c(e, f, o, p - f) : null, _ = g ? e - g.frontWidth / 2 : e - s, v = i(_ + h, f + h, Math.max(1, (g ? g.frontWidth : o) - h * 2), Math.max(1, p - f - h * 2), !g && o >= 6 ? 1.5 : 0), y = (u < f ? `M${l},${u}V${R(f)}` : "") + (d > p ? `M${l},${R(p)}V${d}` : "");
+	let p = r === "hollow" && t.up && a >= 3, h = p ? .5 : 0, g = i ? m(e, d, a, f - d) : null, _ = g ? e - g.frontWidth / 2 : e - s, v = o(_ + h, d + h, Math.max(1, (g ? g.frontWidth : a) - h * 2), Math.max(1, f - d - h * 2), !g && a >= 6 ? 1.5 : 0), y = (l < d ? `M${c},${l}V${V(d)}` : "") + (u > f ? `M${c},${V(f)}V${u}` : "");
 	return {
-		body: m ? null : v,
-		hollow: m ? v : null,
+		body: p ? null : v,
+		hollow: p ? v : null,
 		stroke: y,
 		side: g?.side ?? null,
 		top: g?.top ?? null
 	};
 }
-function H(e, t, n, r, i, a, o = !1) {
-	let s = new S(), c = new S(), l = new S(), u = new S(), d = new S();
-	for (let { row: f, cx: p } of h(e, r)) {
-		let e = z(f, t, n);
+function te(t, n, r, i, a, o, s = !1) {
+	let c = new l(), u = new l(), d = new l(), f = new l(), p = new l();
+	for (let { row: l, cx: m } of e(t, i)) {
+		let e = H(l, n, r);
 		if (!e) continue;
-		let m = a(f, e), h = V(p, e, r, i, o);
-		h.side && u.add(m, h.side), h.top && d.add(m, h.top), h.body && s.add(m, h.body), h.hollow && c.add(m, h.hollow), h.stroke && l.add(m, h.stroke);
+		let t = o(l, e), h = W(m, e, i, a, s);
+		h.side && f.add(t, h.side), h.top && p.add(t, h.top), h.body && c.add(t, h.body), h.hollow && u.add(t, h.hollow), h.stroke && d.add(t, h.stroke);
 	}
 	return {
-		bodies: s.entries(),
-		hollow: c.entries(),
-		strokes: l.entries(),
-		sides: u.entries(),
-		tops: d.entries()
+		bodies: c.entries(),
+		hollow: u.entries(),
+		strokes: d.entries(),
+		sides: f.entries(),
+		tops: p.entries()
 	};
 }
 //#endregion
 //#region src/finance/candles.tsx
-function U(e, t, n) {
-	return a(e, t, n.up ? I : L);
+function G(e, t, n) {
+	return E(e, t, n.up ? z : B);
 }
-function W({ paths: e, display: t }) {
+function ne({ paths: e, display: t }) {
 	let n = t === "ohlc" ? 1.5 : 1;
-	return /* @__PURE__ */ F(N, { children: [
-		e.strokes.map(({ color: e, d: r }) => /* @__PURE__ */ P("path", {
+	return /* @__PURE__ */ R(I, { children: [
+		e.strokes.map(({ color: e, d: r }) => /* @__PURE__ */ L("path", {
 			d: r,
 			fill: "none",
 			strokeWidth: n,
 			strokeLinecap: t === "ohlc" ? "round" : "butt",
 			style: { stroke: e }
 		}, `stroke-${e}`)),
-		e.sides.map(({ color: e, d: t }) => /* @__PURE__ */ P("path", {
+		e.sides.map(({ color: e, d: t }) => /* @__PURE__ */ L("path", {
 			d: t,
-			style: { fill: v(e).side }
+			style: { fill: u(e).side }
 		}, `side-${e}`)),
-		e.tops.map(({ color: e, d: t }) => /* @__PURE__ */ P("path", {
+		e.tops.map(({ color: e, d: t }) => /* @__PURE__ */ L("path", {
 			d: t,
-			style: { fill: v(e).top }
+			style: { fill: u(e).top }
 		}, `top-${e}`)),
-		e.bodies.map(({ color: e, d: t }) => /* @__PURE__ */ P("path", {
+		e.bodies.map(({ color: e, d: t }) => /* @__PURE__ */ L("path", {
 			d: t,
 			style: { fill: e }
 		}, `body-${e}`)),
-		e.hollow.map(({ color: e, d: t }) => /* @__PURE__ */ P("path", {
+		e.hollow.map(({ color: e, d: t }) => /* @__PURE__ */ L("path", {
 			d: t,
 			strokeWidth: 1,
 			style: {
@@ -105,61 +105,99 @@ function W({ paths: e, display: t }) {
 		}, `hollow-${e}`))
 	] });
 }
-var G = r(function({ series: t, open: n, high: r, low: i, display: a = "candle", depth: o = !1, className: c }) {
-	let l = e("Candles", t, [
+var re = s(function({ series: e, open: t, high: n, low: r, display: a = "candle", depth: o = !1, className: s }) {
+	let c = C("Candles", e, [
+		t,
 		n,
-		r,
-		i
-	], "column"), { snapshot: u, descriptor: d, scales: f } = l, p = j(() => {
-		let e = {
-			open: n,
-			high: r,
-			low: i
+		r
+	], "column"), { snapshot: l, descriptor: u, scales: d } = c, f = N(() => {
+		let i = {
+			open: t,
+			high: n,
+			low: r
 		};
-		return B(u.data.rows, t, e), H(u.data.rows, t, e, f, a, (e, t) => U(d, e, t), o);
+		return U(l.data.rows, e, i), te(l.data.rows, e, i, d, a, (e, t) => G(u, e, t), o);
 	}, [
-		u,
+		l,
+		e,
 		t,
 		n,
 		r,
-		i,
-		f,
-		a,
 		d,
+		a,
+		u,
 		o
 	]);
-	return /* @__PURE__ */ F("g", {
+	return /* @__PURE__ */ R("g", {
 		"aria-hidden": "true",
-		className: ["lilt-chart__candles", c].filter(Boolean).join(" "),
-		"data-series": t,
+		className: ["lilt-chart__candles", s].filter(Boolean).join(" "),
+		"data-series": e,
 		"data-display": a,
-		clipPath: o ? `url(#${l.depthClip.id})` : l.clipPath,
-		mask: l.mask,
+		clipPath: o ? `url(#${c.depthClip.id})` : c.clipPath,
+		mask: c.mask,
 		style: {
-			opacity: l.opacity,
-			transition: l.reducedMotion ? void 0 : "opacity 160ms ease-out"
+			opacity: c.opacity,
+			transition: c.reducedMotion ? void 0 : "opacity 160ms ease-out"
 		},
-		children: [o ? /* @__PURE__ */ P(s, { clip: l.depthClip }) : null, /* @__PURE__ */ P(W, {
-			paths: p,
+		children: [o ? /* @__PURE__ */ L(i, { clip: c.depthClip }) : null, /* @__PURE__ */ L(ne, {
+			paths: f,
 			display: a
 		})]
 	});
 }, {
 	layout: "column",
+	loading: (e) => ({
+		kind: e.display === "ohlc" ? "ohlc" : "candle",
+		depth: e.depth && e.display !== "ohlc",
+		render: ({ cx: t, low: n, high: r, scales: i, mask: a }) => {
+			let o = a ? "white" : "color-mix(in srgb, var(--lilt-skeleton) 64%, var(--lilt-surface))", s = W(t, {
+				low: n,
+				high: r,
+				open: n + (r - n) * .28,
+				close: r - (r - n) * .23,
+				up: !0
+			}, i, e.display ?? "candle", e.depth), c = u(o);
+			return /* @__PURE__ */ R(I, { children: [
+				s.stroke ? /* @__PURE__ */ L("path", {
+					d: s.stroke,
+					fill: "none",
+					stroke: o,
+					strokeWidth: 1.5
+				}) : null,
+				s.side ? /* @__PURE__ */ L("path", {
+					d: s.side,
+					fill: a ? o : c.side
+				}) : null,
+				s.top ? /* @__PURE__ */ L("path", {
+					d: s.top,
+					fill: a ? o : c.top
+				}) : null,
+				s.body ? /* @__PURE__ */ L("path", {
+					d: s.body,
+					fill: o
+				}) : null,
+				s.hollow ? /* @__PURE__ */ L("path", {
+					d: s.hollow,
+					fill: a ? "black" : "var(--lilt-surface)",
+					stroke: o
+				}) : null
+			] });
+		}
+	}),
 	series: (e) => e.series,
 	fields: (e) => [
 		e.open,
 		e.high,
 		e.low
 	],
-	highlight: (e, { row: t, snapshot: n, descriptor: r }) => {
-		let i = z(t, e.series, e);
-		if (!i) return null;
-		let a = e.display ?? "candle", s = o(n, e.series), c = V(s.x(t.x), i, s, a, e.depth), l = U(r, t, i);
-		return /* @__PURE__ */ P("g", {
+	highlight: (e, { row: n, snapshot: r, descriptor: i }) => {
+		let a = H(n, e.series, e);
+		if (!a) return null;
+		let o = e.display ?? "candle", s = t(r, e.series), c = W(s.x(n.x), a, s, o, e.depth), l = G(i, n, a);
+		return /* @__PURE__ */ L("g", {
 			className: "lilt-chart__candle-highlight",
-			children: /* @__PURE__ */ P(W, {
-				display: a,
+			children: /* @__PURE__ */ L(ne, {
+				display: o,
 				paths: {
 					bodies: c.body ? [{
 						color: l,
@@ -188,29 +226,30 @@ var G = r(function({ series: t, open: n, high: r, low: i, display: a = "candle",
 });
 //#endregion
 //#region src/finance/cards/pane.tsx
-function K({ context: e, label: t, caption: r, readout: i, series: a, height: o, y: s, bars: c, xAxis: l = !1, children: u }) {
-	let [d, m] = M(null), h = d ?? e.data.at(-1) ?? null;
-	return /* @__PURE__ */ F("div", {
+function K({ context: e, label: t, caption: n, readout: r, series: i, height: o, y: s, bars: c, xAxis: l = !1, children: u }) {
+	let [f, p] = F(null), m = f ?? e.data.at(-1) ?? null;
+	return /* @__PURE__ */ R("div", {
 		className: "lilt-card__pane",
-		children: [r ? /* @__PURE__ */ F("span", {
+		children: [n ? /* @__PURE__ */ R("span", {
 			className: "lilt-card__pane-caption",
 			"aria-hidden": "true",
-			children: [/* @__PURE__ */ P("span", {
+			children: [/* @__PURE__ */ L("span", {
 				className: "lilt-card__pane-name",
-				children: r
-			}), i && h && !e.loading ? i(h) : null]
-		}) : null, /* @__PURE__ */ P(f, {
+				children: n
+			}), r && m && !e.loading ? r(m) : null]
+		}) : null, /* @__PURE__ */ L(y, {
 			className: "lilt-card__chart",
 			"aria-label": t,
 			data: e.data,
 			x: e.x,
 			y: s,
-			series: a,
+			series: i,
 			controller: e.controller,
-			onSelectionChange: i ? (e) => m(e?.row ?? null) : void 0,
+			onSelectionChange: r ? (e) => p(e?.row ?? null) : void 0,
 			motion: e.motion,
 			status: e.loading ? "loading" : "ready",
-			children: /* @__PURE__ */ F(n, {
+			loadingStyle: e.loadingStyle,
+			children: /* @__PURE__ */ R(a, {
 				height: o,
 				margins: {
 					...e.margins,
@@ -223,7 +262,7 @@ function K({ context: e, label: t, caption: r, readout: i, series: a, height: o,
 				slots: e.slots || !!c,
 				bars: c,
 				background: "none",
-				children: [u, l ? /* @__PURE__ */ P(p, { labels: "fit" }) : null]
+				children: [u, l ? /* @__PURE__ */ L(d, { labels: "fit" }) : null]
 			})
 		})]
 	});
@@ -238,57 +277,57 @@ function J(e, t, n) {
 	let r = e.length ? q(e[0], t) : null, i = e.length ? q(e.at(-1), n) : null;
 	return r && i !== null ? i / r - 1 : void 0;
 }
-function ne(e) {
+function ie(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 re = {
+var ae = {
 	minimumFractionDigits: 2,
 	maximumFractionDigits: 2
 };
-function ie({ open: e, high: n, low: r, close: i, volume: a, display: o = "candle", depth: s = !1, scale: c = "linear", label: l = "Price", live: d = !1, data: f, ranges: p, delta: m, valueFormat: h = re, locale: g = "en-US", volumeHeight: _ = 64, ...v }) {
-	let x = j(() => y(g, h).full, [g, JSON.stringify(h)]), S = j(() => y(g).compact, [g]), C = j(() => p?.map((t) => ({
+function oe({ open: e, high: t, low: n, close: i, volume: a, display: o = "candle", depth: s = !1, scale: c = "linear", label: l = "Price", live: u = !1, data: d, ranges: f, delta: m, valueFormat: h = ae, locale: _ = "en-US", volumeHeight: y = 64, ...b }) {
+	let x = N(() => g(_, h).full, [_, JSON.stringify(h)]), S = N(() => g(_).compact, [_]), C = N(() => f?.map((t) => ({
 		...t,
 		delta: t.delta ?? J(t.data, e, i)
 	})), [
-		p,
+		f,
 		e,
 		i
-	]), T = (J(f ?? p?.[0]?.data ?? [], e, i) ?? 0) >= 0, E = (t) => (q(t, i) ?? 0) >= (q(t, e) ?? 0), D = o === "area", O = {
+	]), T = (J(d ?? f?.[0]?.data ?? [], e, i) ?? 0) >= 0, E = (t) => (q(t, i) ?? 0) >= (q(t, e) ?? 0), D = o === "area", O = {
 		open: {
 			label: "Open",
 			accessor: (t) => q(t, e)
 		},
 		high: {
 			label: "High",
-			accessor: (e) => q(e, n)
+			accessor: (e) => q(e, t)
 		},
 		low: {
 			label: "Low",
-			accessor: (e) => q(e, r)
+			accessor: (e) => q(e, n)
 		}
 	};
-	return /* @__PURE__ */ P(b, {
-		...v,
+	return /* @__PURE__ */ L(v, {
+		...b,
 		depth: s,
-		data: f,
+		data: d,
 		ranges: C,
-		delta: m ?? (f ? J(f, e, i) : void 0),
+		delta: m ?? (d ? J(d, e, i) : void 0),
 		valueFormat: h,
-		locale: g,
+		locale: _,
 		aggregate: "last",
 		tiles: !1,
-		live: d,
+		live: u,
 		series: [{
 			key: i,
 			label: l,
-			color: D ? T ? I : L : void 0
+			color: D ? T ? z : B : void 0
 		}],
 		shape: {
 			kind: "marks",
-			id: `candles:${o}:${s}:${c}:${e}:${n}:${r}:${!!a}`,
+			id: `candles:${o}:${s}:${c}:${e}:${t}:${n}:${!!a}`,
 			includeZero: !1,
 			scale: c,
 			slots: !0,
@@ -301,8 +340,8 @@ function ie({ open: e, high: n, low: r, close: i, volume: a, display: o = "candl
 				fields: O,
 				line: { showInspectionPoint: !1 }
 			},
-			describe: ne(x),
-			draw: (e) => e.map((e) => D ? [/* @__PURE__ */ P(t, { series: e }, `area-${e}`), /* @__PURE__ */ P(u, { series: e }, `line-${e}`)] : /* @__PURE__ */ P(G, {
+			describe: ie(x),
+			draw: (e) => e.map((e) => D ? [/* @__PURE__ */ L(r, { series: e }, `area-${e}`), /* @__PURE__ */ L(w, { series: e }, `line-${e}`)] : /* @__PURE__ */ L(re, {
 				series: e,
 				open: "open",
 				high: "high",
@@ -311,11 +350,11 @@ function ie({ open: e, high: n, low: r, close: i, volume: a, display: o = "candl
 				depth: s
 			}, e))
 		},
-		panes: a ? (e) => /* @__PURE__ */ P(K, {
+		panes: a ? (e) => /* @__PURE__ */ L(K, {
 			context: e,
-			label: `${v.title} volume`,
+			label: `${b.title} volume`,
 			caption: "Volume",
-			height: _,
+			height: y,
 			xAxis: !0,
 			y: {
 				includeZero: !0,
@@ -331,7 +370,7 @@ function ie({ open: e, high: n, low: r, close: i, volume: a, display: o = "candl
 				colorAt: (e) => E(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__ */ P(w, { series: "volume" })
+			children: /* @__PURE__ */ L(p, { series: "volume" })
 		}) : void 0
 	});
 }
@@ -340,11 +379,11 @@ function ie({ open: e, high: n, low: r, close: i, volume: a, display: o = "candl
 function Y(e) {
 	return typeof e == "number" && Number.isFinite(e);
 }
-function ae(e, t) {
+function se(e, t) {
 	if (!Number.isInteger(t) || t < 1) throw Error(`Lilt ${e} period must be a positive integer; received ${t}.`);
 }
-function oe(e, t) {
-	ae("sma", t);
+function ce(e, t) {
+	se("sma", t);
 	let n = [], r = 0, i = 0;
 	for (let a = 0; a < e.length; a += 1) {
 		let o = e[a];
@@ -355,7 +394,7 @@ function oe(e, t) {
 	return n;
 }
 function X(e, t) {
-	ae("ema", t);
+	se("ema", t);
 	let n = 2 / (t + 1), r = [], i = null, a = [];
 	for (let o of e) {
 		if (!Y(o)) {
@@ -370,8 +409,8 @@ function X(e, t) {
 	}
 	return r;
 }
-function se(e, t = 14) {
-	ae("rsi", t);
+function le(e, t = 14) {
+	se("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 (!Y(e)) return;
@@ -389,7 +428,7 @@ function se(e, t = 14) {
 		n[l] = c === 0 ? s === 0 ? 50 : 100 : 100 - 100 / (1 + s / c);
 	}), n;
 }
-function ce(e, t = 12, n = 26, r = 9) {
+function ue(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 = X(e, t), a = X(e, n), o = e.map((e, t) => {
 		let n = i[t], r = a[t];
@@ -404,8 +443,8 @@ function ce(e, t = 12, n = 26, r = 9) {
 		})
 	};
 }
-function le(e, t = 20, n = 2) {
-	let r = oe(e, t), i = [], a = [];
+function de(e, t = 20, n = 2) {
+	let r = ce(e, t), i = [], a = [];
 	return r.forEach((r, o) => {
 		if (r === null) {
 			i.push(null), a.push(null);
@@ -421,19 +460,19 @@ function le(e, t = 20, n = 2) {
 		lower: a
 	};
 }
-function ue(e) {
+function fe(e) {
 	let t = -Infinity;
 	return e.map((e) => Y(e) ? (t = Math.max(t, e), t > 0 ? e / t - 1 : 0) : null);
 }
-function de(e) {
+function pe(e) {
 	let t = e.find(Y);
 	return e.map((e) => Y(e) && t !== void 0 && t !== 0 ? e / t - 1 : null);
 }
-function fe(e, t) {
+function me(e, t) {
 	for (let n of t) if (!Y(n.price) || !Y(n.size) || n.size < 0) throw Error(`Lilt order book ${e} need finite prices and non-negative sizes; received ${n.price} × ${n.size}.`);
 }
-function pe(e, t) {
-	fe("bids", e), fe("asks", t);
+function he(e, t) {
+	me("bids", e), me("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);
@@ -468,7 +507,7 @@ function pe(e, t) {
 }
 //#endregion
 //#region src/finance/cards/indicator-chart-card.tsx
-function me(e) {
+function ge(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 {
@@ -480,7 +519,7 @@ function me(e) {
 		};
 	});
 }
-function he(e) {
+function _e(e) {
 	return e.map((e, t) => {
 		let n = typeof e == "string" ? { kind: e } : e;
 		return {
@@ -498,39 +537,39 @@ function Z(e, t) {
 	let n = e[t];
 	return typeof n == "number" && Number.isFinite(n) ? n : null;
 }
-function ge(e, t, n, r) {
+function ve(e, t, n, r) {
 	let i = e.map((e) => Z(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 = le(i, e.period, e.deviations);
+		let t = de(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" ? oe : X)(i, e.period));
-	for (let e of r) if (e.kind === "rsi" && o(e.id, se(i, e.period)), e.kind === "macd") {
-		let t = ce(i, e.fast, e.slow, e.signal);
+	} else o(e.id, (e.kind === "sma" ? ce : X)(i, e.period));
+	for (let e of r) if (e.kind === "rsi" && o(e.id, le(i, e.period)), e.kind === "macd") {
+		let t = ue(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 _e = {
+var ye = {
 	minimumFractionDigits: 2,
 	maximumFractionDigits: 2
-}, ve = [
+}, be = [
 	"var(--lilt-series-4)",
 	"var(--lilt-series-3)",
 	"var(--lilt-series-5)"
 ];
-function ye({ close: e, open: t, high: n, low: r, volume: i, display: a, overlays: o = [], panes: s = ["rsi", "macd"], label: c = "Price", scale: l = "linear", live: f = !1, data: p, ranges: m, delta: h, valueFormat: _ = _e, locale: v = "en-US", paneHeight: x = 72, ...S }) {
+function xe({ close: e, open: t, high: n, low: r, volume: i, display: a, overlays: o = [], panes: s = ["rsi", "macd"], label: l = "Price", scale: u = "linear", live: d = !1, data: f, ranges: m, delta: _, valueFormat: y = ye, locale: b = "en-US", paneHeight: S = 72, ...C }) {
 	let T = !!(t && n && r), E = a ?? (T ? "candle" : "line");
 	if (E !== "line" && !T) throw Error("Lilt IndicatorChartCard candles need open, high and low fields.");
-	let D = JSON.stringify(o), O = JSON.stringify(s), k = j(() => me(o), [D]), A = j(() => he(s), [O]);
+	let D = JSON.stringify(o), O = JSON.stringify(s), k = N(() => ge(o), [D]), A = N(() => _e(s), [O]);
 	if (A.some((e) => e.kind === "volume") && !i) throw Error("Lilt IndicatorChartCard needs a `volume` field for a volume pane.");
-	let ee = j(() => p ? ge(p, e, k, A) : void 0, [
-		p,
+	let j = N(() => f ? ve(f, e, k, A) : void 0, [
+		f,
 		e,
 		k,
 		A
-	]), te = j(() => m?.map((n) => ({
+	]), ee = N(() => m?.map((n) => ({
 		...n,
-		data: ge(n.data, e, k, A),
+		data: ve(n.data, e, k, A),
 		delta: n.delta ?? (t ? J(n.data, t, e) : void 0)
 	})), [
 		m,
@@ -538,7 +577,7 @@ function ye({ close: e, open: t, high: n, low: r, volume: i, display: a, overlay
 		t,
 		k,
 		A
-	]), M = j(() => y(v, _).full, [v, JSON.stringify(_)]), R = j(() => y(v, { maximumFractionDigits: 2 }).full, [v]), z = j(() => y(v).compact, [v]), B = T ? {
+	]), M = N(() => g(b, y).full, [b, JSON.stringify(y)]), P = N(() => g(b, { maximumFractionDigits: 2 }).full, [b]), F = N(() => g(b).compact, [b]), V = T ? {
 		open: {
 			label: "Open",
 			accessor: (e) => Z(e, t)
@@ -551,46 +590,46 @@ function ye({ close: e, open: t, high: n, low: r, volume: i, display: a, overlay
 			label: "Low",
 			accessor: (e) => Z(e, r)
 		}
-	} : void 0, V = new Map(k.map((e) => [e.id, e])), H = p?.length ? Z(p[0], e) : null, U = p?.length ? Z(p.at(-1), e) : null, W = H === null || U === null || U >= H, q = A.at(-1)?.id, re = (n, r) => {
-		let a = n.id === q, o = (e) => (t) => Z(t, e), s = (e, t, n) => {
+	} : void 0, H = new Map(k.map((e) => [e.id, e])), U = f?.length ? Z(f[0], e) : null, W = f?.length ? Z(f.at(-1), e) : null, te = U === null || W === null || W >= U, G = A.at(-1)?.id, ne = (n, r) => {
+		let a = n.id === G, o = (e) => (t) => Z(t, e), s = (e, t, n) => {
 			let r = Z(e, t);
-			return /* @__PURE__ */ F("span", {
+			return /* @__PURE__ */ R("span", {
 				className: "lilt-card__pane-value",
-				children: [n ? `${n} ` : "", r === null ? "—" : R(r)]
+				children: [n ? `${n} ` : "", r === null ? "—" : P(r)]
 			}, t);
 		};
-		if (n.kind === "volume") return /* @__PURE__ */ P(K, {
+		if (n.kind === "volume") return /* @__PURE__ */ L(K, {
 			context: r,
-			label: `${S.title} volume`,
+			label: `${C.title} volume`,
 			caption: "Volume",
-			readout: (e) => /* @__PURE__ */ P("span", {
+			readout: (e) => /* @__PURE__ */ L("span", {
 				className: "lilt-card__pane-value",
-				children: Z(e, i) === null ? "—" : z(Z(e, i))
+				children: Z(e, i) === null ? "—" : F(Z(e, i))
 			}),
-			height: x,
+			height: S,
 			xAxis: a,
 			y: {
 				includeZero: !0,
 				ticks: 2,
-				format: z
+				format: F
 			},
 			bars: { series: ["volume"] },
 			series: [{
 				id: "volume",
 				label: "Volume",
 				accessor: o(i),
-				formatValue: z,
+				formatValue: F,
 				colorAt: (n) => (Z(n, e) ?? 0) >= (Z(n, t) ?? Z(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__ */ P(w, { series: "volume" })
+			children: /* @__PURE__ */ L(p, { series: "volume" })
 		}, n.id);
-		if (n.kind === "rsi") return /* @__PURE__ */ F(K, {
+		if (n.kind === "rsi") return /* @__PURE__ */ R(K, {
 			context: r,
-			label: `${S.title} RSI ${n.period}`,
+			label: `${C.title} RSI ${n.period}`,
 			caption: `RSI ${n.period}`,
 			readout: (e) => s(e, n.id),
-			height: x,
+			height: S,
 			xAxis: a,
 			y: {
 				domain: [0, 100],
@@ -602,51 +641,51 @@ function ye({ close: e, open: t, high: n, low: r, volume: i, display: a, overlay
 				label: `RSI ${n.period}`,
 				accessor: o(n.id),
 				color: "var(--lilt-series-1)",
-				formatValue: R,
+				formatValue: P,
 				line: {
 					width: 1.5,
-					depth: S.depth
+					depth: C.depth
 				}
 			}],
 			children: [
-				/* @__PURE__ */ P(d, {
+				/* @__PURE__ */ L(h, {
 					axis: "y",
 					from: 30,
 					to: 70,
 					color: "var(--lilt-series-1)"
 				}),
-				/* @__PURE__ */ P(g, {
+				/* @__PURE__ */ L(x, {
 					value: 70,
 					color: "var(--lilt-muted)"
 				}),
-				/* @__PURE__ */ P(g, {
+				/* @__PURE__ */ L(x, {
 					value: 30,
 					color: "var(--lilt-muted)"
 				}),
-				/* @__PURE__ */ P(u, { series: n.id })
+				/* @__PURE__ */ L(w, { series: n.id })
 			]
 		}, n.id);
-		let c = `${n.id}Macd`, l = `${n.id}Signal`, f = `${n.id}Histogram`;
-		return /* @__PURE__ */ F(K, {
+		let c = `${n.id}Macd`, l = `${n.id}Signal`, u = `${n.id}Histogram`;
+		return /* @__PURE__ */ R(K, {
 			context: r,
-			label: `${S.title} MACD`,
+			label: `${C.title} MACD`,
 			caption: `MACD ${n.fast} · ${n.slow} · ${n.signal}`,
 			readout: (e) => [s(e, c), s(e, l, "Signal")],
-			height: x,
+			height: S,
 			xAxis: a,
 			y: {
 				includeZero: !0,
 				ticks: 2,
-				format: R
+				format: P
 			},
-			bars: { series: [f] },
+			bars: { series: [u] },
 			series: [
 				{
-					id: f,
+					id: u,
 					label: "Histogram",
-					accessor: o(f),
-					formatValue: R,
-					colorAt: (e) => (Z(e, f) ?? 0) >= 0 ? "color-mix(in srgb, var(--lilt-candle-up) 55%, transparent)" : "color-mix(in srgb, var(--lilt-candle-down) 55%, transparent)",
+					accessor: o(u),
+					formatValue: P,
+					colorAt: (e) => (Z(e, u) ?? 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 }
 				},
 				{
@@ -654,10 +693,10 @@ function ye({ close: e, open: t, high: n, low: r, volume: i, display: a, overlay
 					label: "MACD",
 					accessor: o(c),
 					color: "var(--lilt-series-4)",
-					formatValue: R,
+					formatValue: P,
 					line: {
 						width: 1.5,
-						depth: S.depth
+						depth: C.depth
 					}
 				},
 				{
@@ -665,7 +704,7 @@ function ye({ close: e, open: t, high: n, low: r, volume: i, display: a, overlay
 					label: "Signal",
 					accessor: o(l),
 					color: "var(--lilt-series-3)",
-					formatValue: R,
+					formatValue: P,
 					line: {
 						width: 1.5,
 						dasharray: "3 3"
@@ -673,48 +712,48 @@ function ye({ close: e, open: t, high: n, low: r, volume: i, display: a, overlay
 				}
 			],
 			children: [
-				/* @__PURE__ */ P(w, { series: f }),
-				/* @__PURE__ */ P(u, { series: c }),
-				/* @__PURE__ */ P(u, { series: l })
+				/* @__PURE__ */ L(p, { series: u }),
+				/* @__PURE__ */ L(w, { series: c }),
+				/* @__PURE__ */ L(w, { series: l })
 			]
 		}, n.id);
 	};
-	return /* @__PURE__ */ P(b, {
-		...S,
-		data: ee,
-		ranges: te,
-		delta: h ?? (p && t ? J(p, t, e) : void 0),
-		valueFormat: _,
-		locale: v,
+	return /* @__PURE__ */ L(v, {
+		...C,
+		data: j,
+		ranges: ee,
+		delta: _ ?? (f && t ? J(f, t, e) : void 0),
+		valueFormat: y,
+		locale: b,
 		aggregate: "last",
 		headlineSeries: e,
 		pillSeries: e,
 		tiles: !1,
-		live: f,
+		live: d,
 		series: [{
 			key: e,
-			label: c,
-			color: E === "line" ? W ? I : L : void 0
+			label: l,
+			color: E === "line" ? te ? z : B : void 0
 		}, ...k.map((e, t) => ({
 			key: e.id,
 			label: e.label,
-			color: ve[t % ve.length]
+			color: be[t % be.length]
 		}))],
 		shape: {
 			kind: "marks",
-			id: `indicator:${E}:${l}:${t}:${n}:${r}:${D}:${O}`,
+			id: `indicator:${E}:${u}:${t}:${n}:${r}:${D}:${O}`,
 			includeZero: !1,
-			scale: l,
+			scale: u,
 			slots: !0,
 			xAxis: A.length === 0,
 			series: (e) => {
-				let t = V.get(e);
+				let t = H.get(e);
 				return t ? {
 					curve: "monotone",
 					line: {
 						width: 1.5,
 						showInspectionPoint: !1,
-						depth: S.depth
+						depth: C.depth
 					},
 					...t.kind === "bollinger" ? { fields: {
 						upper: {
@@ -727,50 +766,51 @@ function ye({ close: e, open: t, high: n, low: r, volume: i, display: a, overlay
 						}
 					} } : {}
 				} : E === "line" ? {
-					fields: B,
+					fields: V,
 					curve: "linear",
 					line: {
 						width: 2,
-						depth: S.depth
+						depth: C.depth
 					}
-				} : { fields: B };
+				} : { fields: V };
 			},
-			describe: T ? ne(M) : void 0,
+			describe: T ? ie(M) : void 0,
 			draw: (e) => e.map((e) => {
-				let t = V.get(e);
-				return t ? t.kind === "bollinger" ? [/* @__PURE__ */ P(C, {
+				let t = H.get(e);
+				return t ? t.kind === "bollinger" ? [/* @__PURE__ */ L(c, {
 					series: e,
 					lower: "lower",
 					upper: "upper"
-				}, `band-${e}`), /* @__PURE__ */ P(u, { series: e }, `line-${e}`)] : /* @__PURE__ */ P(u, { series: e }, e) : E === "line" ? /* @__PURE__ */ P(u, { series: e }, e) : /* @__PURE__ */ P(G, {
+				}, `band-${e}`), /* @__PURE__ */ L(w, { series: e }, `line-${e}`)] : /* @__PURE__ */ L(w, { series: e }, e) : E === "line" ? /* @__PURE__ */ L(w, { series: e }, e) : /* @__PURE__ */ L(re, {
 					series: e,
 					open: "open",
 					high: "high",
 					low: "low",
-					display: E
+					display: E,
+					depth: C.depth
 				}, e);
 			})
 		},
-		panes: A.length ? (e) => /* @__PURE__ */ P(N, { children: A.map((t) => re(t, e)) }) : void 0
+		panes: A.length ? (e) => /* @__PURE__ */ L(I, { children: A.map((t) => ne(t, e)) }) : void 0
 	});
 }
 //#endregion
 //#region src/finance/cards/depth-chart-card.tsx
-function be({ price: e, label: t }) {
+function Se({ price: e, label: t }) {
 	let { snapshot: n } = _();
 	if (e < n.xDomain[0] || e > n.xDomain[1]) return null;
 	let r = n.xToPixel(e);
-	return /* @__PURE__ */ F("g", {
+	return /* @__PURE__ */ R("g", {
 		className: "lilt-card__depth-mid",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ P("line", {
+		children: [/* @__PURE__ */ L("line", {
 			x1: r,
 			x2: r,
 			y1: n.plot.top + 18,
 			y2: n.plot.bottom,
 			strokeDasharray: "2 4",
 			vectorEffect: "non-scaling-stroke"
-		}), /* @__PURE__ */ P("text", {
+		}), /* @__PURE__ */ L("text", {
 			x: r,
 			y: n.plot.top + 10,
 			textAnchor: "middle",
@@ -778,100 +818,101 @@ function be({ price: e, label: t }) {
 		})]
 	});
 }
-var xe = {
+var Ce = {
 	style: "currency",
 	currency: "USD",
 	minimumFractionDigits: 2,
 	maximumFractionDigits: 2
 };
-function Se({ title: e, bids: r, asks: i, valueFormat: a = xe, sizeFormat: o, locale: s = "en-US", height: c = 220, axis: d = "minimal", background: m = "dots", hoverStyle: h = "soft", surface: g, numberStyle: _, loading: v = !1, motion: b, className: S, style: C, depth: w = !1 }) {
-	let T = j(() => pe(r, i), [r, i]), ee = JSON.stringify(a), te = JSON.stringify(o ?? null), N = j(() => y(s, a), [s, ee]), R = j(() => y(s, o), [s, te]), z = j(() => y(s, {
+function we({ title: e, bids: t, asks: n, valueFormat: i = Ce, sizeFormat: o, locale: s = "en-US", height: c = 220, axis: l = "minimal", background: u = "dots", hoverStyle: f = "soft", surface: p, numberStyle: m, loading: h = !1, loadingStyle: _ = "shimmer", motion: v, className: b, style: x, depth: C = !1 }) {
+	let E = N(() => he(t, n), [t, n]), D = JSON.stringify(i), M = JSON.stringify(o ?? null), P = N(() => g(s, i), [s, D]), I = N(() => g(s, o), [s, M]), V = N(() => g(s, {
 		style: "percent",
 		maximumFractionDigits: 3
-	}).full, [s]), [B, V] = M(null), H = j(() => [{
+	}).full, [s]), [H, U] = F(null), W = N(() => [{
 		id: "bid",
 		label: "Bids",
 		accessor: (e) => e.bid,
-		color: I,
+		color: z,
 		curve: "step-before",
 		area: { treatment: "fade" },
 		line: {
 			width: 1.5,
-			depth: w
+			depth: C
 		},
-		formatValue: R.full
+		formatValue: I.full
 	}, {
 		id: "ask",
 		label: "Asks",
 		accessor: (e) => e.ask,
-		color: L,
+		color: B,
 		curve: "step-after",
 		area: { treatment: "fade" },
 		line: {
 			width: 1.5,
-			depth: w
+			depth: C
 		},
-		formatValue: R.full
-	}], [R, w]), U = T.spread !== null && T.mid ? `${N.full(T.spread)} (${z(T.spread / T.mid)})` : "—", W = B ? B.bid ?? B.ask : null;
-	return /* @__PURE__ */ F(A, {
+		formatValue: I.full
+	}], [I, C]), te = E.spread !== null && E.mid ? `${P.full(E.spread)} (${V(E.spread / E.mid)})` : "—", G = H ? H.bid ?? H.ask : null;
+	return /* @__PURE__ */ R(ee, {
 		"aria-label": e,
-		surface: g,
-		numberStyle: _,
-		motion: b,
-		className: ["lilt-card--depth", S].filter(Boolean).join(" "),
-		style: C,
+		surface: p,
+		numberStyle: m,
+		motion: v,
+		className: ["lilt-card--depth", b].filter(Boolean).join(" "),
+		style: x,
 		children: [
-			/* @__PURE__ */ F(k, { children: [/* @__PURE__ */ P(O, { children: e }), /* @__PURE__ */ P(D, {
-				value: T.mid,
-				format: N.full,
-				loading: v,
-				motion: b,
-				children: v ? null : B && W !== null ? /* @__PURE__ */ F(E, { children: [
-					R.full(W),
+			/* @__PURE__ */ R(j, { children: [/* @__PURE__ */ L(A, { children: e }), /* @__PURE__ */ L(k, {
+				value: E.mid,
+				format: P.full,
+				loading: h,
+				motion: v,
+				children: h ? null : H && G !== null ? /* @__PURE__ */ R(O, { children: [
+					I.full(G),
 					" ",
-					B.side === "bid" ? "bid" : "ask",
+					H.side === "bid" ? "bid" : "ask",
 					" depth at",
 					" ",
-					N.full(B.price)
-				] }) : /* @__PURE__ */ P(E, { children: "Mid price" })
+					P.full(H.price)
+				] }) : /* @__PURE__ */ L(O, { children: "Mid price" })
 			})] }),
-			/* @__PURE__ */ F("dl", {
+			/* @__PURE__ */ R("dl", {
 				className: "lilt-card__stats",
 				children: [
-					/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("dt", { children: "Spread" }), /* @__PURE__ */ P("dd", { children: v ? "—" : U })] }),
-					/* @__PURE__ */ F("div", {
+					/* @__PURE__ */ R("div", { children: [/* @__PURE__ */ L("dt", { children: "Spread" }), /* @__PURE__ */ L("dd", { children: h ? "—" : te })] }),
+					/* @__PURE__ */ R("div", {
 						"data-side": "bid",
-						children: [/* @__PURE__ */ P("dt", { children: "Bid depth" }), /* @__PURE__ */ P("dd", { children: v ? "—" : R.compact(T.bidDepth) })]
+						children: [/* @__PURE__ */ L("dt", { children: "Bid depth" }), /* @__PURE__ */ L("dd", { children: h ? "—" : I.compact(E.bidDepth) })]
 					}),
-					/* @__PURE__ */ F("div", {
+					/* @__PURE__ */ R("div", {
 						"data-side": "ask",
-						children: [/* @__PURE__ */ P("dt", { children: "Ask depth" }), /* @__PURE__ */ P("dd", { children: v ? "—" : R.compact(T.askDepth) })]
+						children: [/* @__PURE__ */ L("dt", { children: "Ask depth" }), /* @__PURE__ */ L("dd", { children: h ? "—" : I.compact(E.askDepth) })]
 					})
 				]
 			}),
-			/* @__PURE__ */ P(f, {
+			/* @__PURE__ */ L(y, {
 				className: "lilt-card__chart",
 				"aria-label": `${e} depth by price`,
-				data: T.levels,
+				data: E.levels,
 				x: {
 					type: "number",
 					accessor: (e) => e.price,
-					format: N.full
+					format: P.full
 				},
 				y: {
 					includeZero: !0,
 					ticks: 3,
-					format: R.compact
+					format: I.compact
 				},
-				series: H,
-				onSelectionChange: (e) => V(e?.row ?? null),
-				motion: b,
-				status: v ? "loading" : "ready",
-				children: /* @__PURE__ */ F(n, {
+				series: W,
+				onSelectionChange: (e) => U(e?.row ?? null),
+				motion: v,
+				status: h ? "loading" : "ready",
+				loadingStyle: _,
+				children: /* @__PURE__ */ R(a, {
 					height: c,
-					axis: d,
-					background: m,
-					pill: h,
+					axis: l,
+					background: u,
+					pill: f,
 					margins: {
 						top: 8,
 						right: 4,
@@ -879,17 +920,17 @@ function Se({ title: e, bids: r, asks: i, valueFormat: a = xe, sizeFormat: o, lo
 						left: 4
 					},
 					children: [
-						/* @__PURE__ */ P(x, { pattern: "lines" }),
-						/* @__PURE__ */ P(t, { series: "bid" }),
-						/* @__PURE__ */ P(t, { series: "ask" }),
-						/* @__PURE__ */ P(u, { series: "bid" }),
-						/* @__PURE__ */ P(u, { series: "ask" }),
-						T.mid === null ? null : /* @__PURE__ */ P(be, {
-							price: T.mid,
-							label: `Mid ${N.full(T.mid)}`
+						/* @__PURE__ */ L(T, { pattern: "lines" }),
+						/* @__PURE__ */ L(r, { series: "bid" }),
+						/* @__PURE__ */ L(r, { series: "ask" }),
+						/* @__PURE__ */ L(w, { series: "bid" }),
+						/* @__PURE__ */ L(w, { series: "ask" }),
+						E.mid === null ? null : /* @__PURE__ */ L(Se, {
+							price: E.mid,
+							label: `Mid ${P.full(E.mid)}`
 						}),
-						/* @__PURE__ */ P(p, { labels: "fit" }),
-						/* @__PURE__ */ P(l, {})
+						/* @__PURE__ */ L(d, { labels: "fit" }),
+						/* @__PURE__ */ L(S, {})
 					]
 				})
 			})
@@ -903,201 +944,201 @@ function Q(e, t) {
 	let n = e[t];
 	return typeof n == "number" && Number.isFinite(n) ? n : null;
 }
-function Ce(e, t, n) {
+function Te(e, t, n) {
 	let r = e.at(-1), i = Q(r, t), a = Q(r, n);
 	return i !== null && a ? i / a - 1 : void 0;
 }
-function we({ value: e, basis: n, label: r = "Value", drawdown: i = !0, drawdownHeight: a = 64, data: o, ranges: s, delta: c, locale: l = "en-US", ...d }) {
-	let f = o ?? s?.[0]?.data ?? [], p = j(() => s?.map((t) => ({
-		...t,
-		delta: t.delta ?? Ce(t.data, e, n)
+function Ee({ value: e, basis: t, label: n = "Value", drawdown: i = !0, drawdownHeight: a = 64, data: o, ranges: s, delta: c, locale: l = "en-US", ...u }) {
+	let d = o ?? s?.[0]?.data ?? [], f = N(() => s?.map((n) => ({
+		...n,
+		delta: n.delta ?? Te(n.data, e, t)
 	})), [
 		s,
 		e,
-		n
-	]), m = j(() => y(l, {
+		t
+	]), p = N(() => g(l, {
 		style: "percent",
 		minimumFractionDigits: 1,
 		maximumFractionDigits: 1
-	}).full, [l]), h = j(() => {
-		let t = ue(f.map((t) => Q(t, e))).filter((e) => e !== null);
+	}).full, [l]), m = N(() => {
+		let t = fe(d.map((t) => Q(t, e))).filter((e) => e !== null);
 		return t.length ? Math.min(...t) : null;
-	}, [f, e]);
-	return /* @__PURE__ */ P(b, {
-		...d,
+	}, [d, e]);
+	return /* @__PURE__ */ L(v, {
+		...u,
 		data: o,
-		ranges: p,
-		delta: c ?? (o ? Ce(o, e, n) : void 0),
+		ranges: f,
+		delta: c ?? (o ? Te(o, e, t) : void 0),
 		locale: l,
 		aggregate: "last",
 		headlineSeries: e,
 		pillSeries: e,
 		tiles: !1,
-		restCaption: n ? () => "over basis" : void 0,
+		restCaption: t ? () => "over basis" : void 0,
 		series: [{
 			key: e,
-			label: r
-		}, ...n ? [{
-			key: n,
+			label: n
+		}, ...t ? [{
+			key: t,
 			label: "Basis",
 			dashed: !0
 		}] : []],
 		shape: {
 			kind: "marks",
-			id: `portfolio:${e}:${n}:${i}`,
+			id: `portfolio:${e}:${t}:${i}:${u.depth}`,
 			includeZero: !1,
 			xAxis: !i,
-			series: (e) => e === n ? {
+			series: (e) => e === t ? {
 				curve: "step-after",
 				color: "var(--lilt-muted)"
 			} : {
 				area: { treatment: "fade" },
 				curve: "monotone"
 			},
-			draw: (e) => e.map((e) => [/* @__PURE__ */ P(t, { series: e }, `area-${e}`), /* @__PURE__ */ P(u, { series: e }, e)])
+			draw: (e) => e.map((e) => [/* @__PURE__ */ L(r, { series: e }, `area-${e}`), /* @__PURE__ */ L(w, { series: e }, e)])
 		},
-		panes: i ? (n) => {
-			let r = ue(n.data.map((t) => Q(t, e))), i = new Map(n.data.map((e, t) => [e, r[t] ?? null]));
-			return /* @__PURE__ */ F(K, {
-				context: n,
-				label: `${d.title} drawdown`,
+		panes: i ? (t) => {
+			let n = fe(t.data.map((t) => Q(t, e))), i = new Map(t.data.map((e, t) => [e, n[t] ?? null]));
+			return /* @__PURE__ */ R(K, {
+				context: t,
+				label: `${u.title} drawdown`,
 				caption: "Drawdown",
-				readout: (e) => /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P("span", {
+				readout: (e) => /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L("span", {
 					className: "lilt-card__pane-value",
-					children: i.get(e) == null ? "—" : m(i.get(e))
-				}), h === null ? null : /* @__PURE__ */ F("span", {
+					children: i.get(e) == null ? "—" : p(i.get(e))
+				}), m === null ? null : /* @__PURE__ */ R("span", {
 					className: "lilt-card__pane-value",
-					children: ["Max ", m(h)]
+					children: ["Max ", p(m)]
 				})] }),
 				height: a,
 				xAxis: !0,
 				y: {
 					includeZero: !0,
 					ticks: 2,
-					format: m
+					format: p
 				},
 				series: [{
 					id: "drawdown",
 					label: "Drawdown",
 					accessor: (e) => i.get(e) ?? null,
 					color: "var(--lilt-candle-down)",
-					formatValue: m,
+					formatValue: p,
 					area: { treatment: "fade" },
 					line: { width: 1.5 },
 					curve: "monotone"
 				}],
-				children: [/* @__PURE__ */ P(t, { series: "drawdown" }), /* @__PURE__ */ P(u, { series: "drawdown" })]
+				children: [/* @__PURE__ */ L(r, { series: "drawdown" }), /* @__PURE__ */ L(w, { series: "drawdown" })]
 			});
 		} : void 0
 	});
 }
 //#endregion
 //#region src/finance/cards/price-chart-card.tsx
-function Te(e, t) {
+function De(e, t) {
 	let n = e[t];
 	return typeof n == "number" && Number.isFinite(n) ? n : null;
 }
 function $(e, t) {
-	let n = e.map((e) => Te(e, t)).filter((e) => e !== null);
+	let n = e.map((e) => De(e, t)).filter((e) => e !== null);
 	return n.length > 1 ? {
 		first: n[0],
 		last: n.at(-1)
 	} : null;
 }
-function Ee(e, t) {
+function Oe(e, t) {
 	let n = e.map((e) => ({ ...e }));
-	for (let r of t) de(e.map((e) => Te(e, r))).forEach((e, t) => n[t][`__rebased${r}`] = e);
+	for (let r of t) pe(e.map((e) => De(e, r))).forEach((e, t) => n[t][`__rebased${r}`] = e);
 	return n;
 }
-var De = {
+var ke = {
 	style: "currency",
 	currency: "USD",
 	minimumFractionDigits: 2,
 	maximumFractionDigits: 2
 };
-function Oe({ price: e, symbol: n, name: r, icon: i, display: a = "area", versus: o, data: s, ranges: c, delta: l, valueFormat: d = De, locale: f = "en-US", title: p, ...h }) {
-	let g = !!o?.length, _ = j(() => [e, ...(o ?? []).map((e) => e.key)], [e, o]), v = j(() => s ? g ? Ee(s, _) : s : void 0, [
+function Ae({ price: e, symbol: t, name: n, icon: i, display: a = "area", versus: o, data: s, ranges: c, delta: l, valueFormat: u = ke, locale: d = "en-US", title: p, ...m }) {
+	let h = !!o?.length, _ = N(() => [e, ...(o ?? []).map((e) => e.key)], [e, o]), y = N(() => s ? h ? Oe(s, _) : s : void 0, [
 		s,
-		g,
+		h,
 		_
-	]), x = j(() => c?.map((t) => {
+	]), b = N(() => c?.map((t) => {
 		let n = $(t.data, e);
 		return {
 			...t,
-			data: g ? Ee(t.data, _) : t.data,
+			data: h ? Oe(t.data, _) : t.data,
 			delta: t.delta ?? (n && n.first ? n.last / n.first - 1 : void 0)
 		};
 	}), [
 		c,
-		g,
+		h,
 		_,
 		e
-	]), S = $(s ?? c?.[0]?.data ?? [], e), C = !S || S.last >= S.first, w = j(() => y(f, d).full, [f, JSON.stringify(d)]), T = j(() => y(f, {
+	]), x = $(s ?? c?.[0]?.data ?? [], e), S = !x || x.last >= x.first, C = N(() => g(d, u).full, [d, JSON.stringify(u)]), T = N(() => g(d, {
 		style: "percent",
 		minimumFractionDigits: 1,
 		maximumFractionDigits: 1
-	}).full, [f]), E = (e) => g ? `__rebased${e}` : e, D = /* @__PURE__ */ F("span", {
+	}).full, [d]), E = (e) => h ? `__rebased${e}` : e, D = /* @__PURE__ */ R("span", {
 		className: "lilt-card__ticker",
 		children: [
-			i ? /* @__PURE__ */ P("span", {
+			i ? /* @__PURE__ */ L("span", {
 				className: "lilt-card__ticker-icon",
 				children: i
 			}) : null,
-			/* @__PURE__ */ P("span", {
+			/* @__PURE__ */ L("span", {
 				className: "lilt-card__ticker-symbol",
-				children: n ?? p
+				children: t ?? p
 			}),
-			r ? /* @__PURE__ */ P("span", {
+			n ? /* @__PURE__ */ L("span", {
 				className: "lilt-card__ticker-name",
-				children: r
+				children: n
 			}) : null
 		]
 	});
-	return /* @__PURE__ */ P(b, {
-		...h,
+	return /* @__PURE__ */ L(v, {
+		...m,
 		title: p,
 		heading: D,
-		data: v,
-		ranges: x,
-		delta: g ? void 0 : l ?? (s && S && S.first ? S.last / S.first - 1 : void 0),
-		valueFormat: g ? {
+		data: y,
+		ranges: b,
+		delta: h ? void 0 : l ?? (s && x && x.first ? x.last / x.first - 1 : void 0),
+		valueFormat: h ? {
 			style: "percent",
 			maximumFractionDigits: 1
-		} : d,
-		formatValue: g ? (e) => m(T)(e) : void 0,
-		locale: f,
+		} : u,
+		formatValue: h ? (e) => f(T)(e) : void 0,
+		locale: d,
 		aggregate: "last",
 		headlineSeries: E(e),
-		pillSeries: g ? "nearest" : E(e),
-		tiles: g,
-		restCaption: g ? void 0 : (t) => {
+		pillSeries: h ? "nearest" : E(e),
+		tiles: h,
+		restCaption: h ? void 0 : (t) => {
 			let n = $(t, e);
-			return n ? m(w)(n.last - n.first) : null;
+			return n ? f(C)(n.last - n.first) : null;
 		},
 		series: [{
 			key: E(e),
-			label: n ?? p,
-			color: g ? void 0 : C ? I : L
+			label: t ?? p,
+			color: h ? void 0 : S ? z : B
 		}, ...(o ?? []).map((e) => ({
 			...e,
 			key: E(e.key)
 		}))],
 		shape: {
 			kind: "marks",
-			id: `price:${a}:${_.join()}:${g}`,
-			includeZero: g,
-			series: () => a === "area" && !g ? {
+			id: `price:${a}:${_.join()}:${h}`,
+			includeZero: h,
+			series: () => a === "area" && !h ? {
 				area: { treatment: "fade" },
 				curve: "monotone"
 			} : { curve: "monotone" },
-			draw: (e) => e.map((e) => a === "area" && !g ? [/* @__PURE__ */ P(t, { series: e }, `area-${e}`), /* @__PURE__ */ P(u, { series: e }, e)] : /* @__PURE__ */ P(u, { series: e }, e))
+			draw: (e) => e.map((e) => a === "area" && !h ? [/* @__PURE__ */ L(r, { series: e }, `area-${e}`), /* @__PURE__ */ L(w, { series: e }, e)] : /* @__PURE__ */ L(w, { series: e }, e))
 		},
-		bleed: h.bleed ?? !0
+		bleed: m.bleed ?? !0
 	});
 }
 //#endregion
 //#region src/finance/order-book.tsx
-function ke(e, t, n) {
+function je(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]) => ({
@@ -1110,9 +1151,9 @@ function ke(e, t, n) {
 		side: t
 	}));
 }
-function Ae(e, t) {
-	let n = te(null), [r, i] = M(/* @__PURE__ */ new Set());
-	return ee(() => {
+function Me(e, t) {
+	let n = P(null), [r, i] = F(/* @__PURE__ */ new Set());
+	return M(() => {
 		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));
@@ -1122,82 +1163,103 @@ function Ae(e, t) {
 		return () => window.clearTimeout(s);
 	}, [e, t]), r;
 }
-function je({ title: e, bids: t, asks: n, levels: r = 8, depth: i = !1, valueFormat: a = {
+function Ne({ title: e, bids: t, asks: r, levels: i = 8, depth: a = !1, valueFormat: o = {
 	minimumFractionDigits: 2,
 	maximumFractionDigits: 2
-}, sizeFormat: o, locale: s = "en-US", flash: c = !0, surface: l, motion: u, className: d, style: f }) {
-	let p = T(u ?? "auto"), m = JSON.stringify(a), h = JSON.stringify(o ?? null), g = j(() => y(s, a).full, [s, m]), _ = j(() => y(s, o).compact, [s, h]), v = j(() => y(s, {
+}, sizeFormat: s, locale: c = "en-US", flash: l = !0, surface: u, loading: d = !1, loadingStyle: f = "shimmer", motion: p, className: m, style: h }) {
+	let _ = D(p ?? "auto"), v = n(d, f), y = JSON.stringify(o), x = JSON.stringify(s ?? null), S = N(() => g(c, o).full, [c, y]), C = N(() => g(c, s).compact, [c, x]), w = N(() => g(c, {
 		style: "percent",
 		maximumFractionDigits: 3
-	}).full, [s]), b = j(() => ke(t, "bid", r), [t, r]), x = j(() => ke(n, "ask", r), [n, r]), S = Ae(j(() => [...x, ...b], [x, b]), c && !p), C = Math.max(1, x.at(-1)?.total ?? 0, b.at(-1)?.total ?? 0), w = b[0]?.price, E = x[0]?.price, D = w !== void 0 && E !== void 0 ? {
-		value: E - w,
-		mid: (E + w) / 2
-	} : null, O = (e) => /* @__PURE__ */ F("tr", {
+	}).full, [c]), T = N(() => je(t, "bid", i), [t, i]), E = N(() => je(r, "ask", i), [r, i]), O = Me(N(() => [...E, ...T], [E, T]), l && !_ && !d), k = Math.max(1, E.at(-1)?.total ?? 0, T.at(-1)?.total ?? 0), A = T[0]?.price, j = E[0]?.price, M = A !== void 0 && j !== void 0 ? {
+		value: j - A,
+		mid: (j + A) / 2
+	} : null, P = (e) => /* @__PURE__ */ R("tr", {
 		className: "lilt-order-book__level",
 		"data-side": e.side,
-		"data-flash": S.has(`${e.side}:${e.price}`) || void 0,
-		style: { "--lilt-depth": `${e.total / C * 100}%` },
+		"data-flash": O.has(`${e.side}:${e.price}`) || void 0,
+		style: { "--lilt-depth": `${e.total / k * 100}%` },
 		children: [
-			/* @__PURE__ */ F("th", {
+			/* @__PURE__ */ R("th", {
 				scope: "row",
-				children: [i ? /* @__PURE__ */ P("span", {
+				children: [a ? /* @__PURE__ */ L("span", {
 					className: "lilt-order-book__bar",
 					"aria-hidden": "true"
-				}) : null, g(e.price)]
+				}) : null, S(e.price)]
 			}),
-			/* @__PURE__ */ P("td", { children: _(e.size) }),
-			/* @__PURE__ */ P("td", { children: _(e.total) })
+			/* @__PURE__ */ L("td", { children: C(e.size) }),
+			/* @__PURE__ */ L("td", { children: C(e.total) })
+		]
+	}, `${e.side}:${e.price}`), F = (e) => Array.from({ length: Math.max(1, Math.min(50, i)) }, (t, n) => /* @__PURE__ */ R("tr", {
+		className: "lilt-order-book__placeholder",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ L("td", { children: /* @__PURE__ */ L(b, {
+				width: `${86 - n * 4}%`,
+				step: n
+			}) }),
+			/* @__PURE__ */ L("td", { children: /* @__PURE__ */ L(b, {
+				width: "60%",
+				step: n
+			}) }),
+			/* @__PURE__ */ L("td", { children: /* @__PURE__ */ L(b, {
+				width: "72%",
+				step: n
+			}) })
 		]
-	}, `${e.side}:${e.price}`);
-	return /* @__PURE__ */ P(A, {
+	}, `${e}-${n}`));
+	return /* @__PURE__ */ L(ee, {
 		"aria-label": e,
-		surface: l,
-		motion: u,
-		className: ["lilt-card--order-book", d].filter(Boolean).join(" "),
-		style: f,
-		children: /* @__PURE__ */ F("table", {
-			className: "lilt-order-book",
-			"data-depth": i || void 0,
+		surface: u,
+		motion: p,
+		className: ["lilt-card--order-book", m].filter(Boolean).join(" "),
+		style: h,
+		children: /* @__PURE__ */ R("table", {
+			ref: v,
+			className: d ? "lilt-order-book lilt-skeleton" : "lilt-order-book",
+			"data-depth": a || void 0,
+			"data-style": d ? f : void 0,
+			"data-reduced-motion": _ || void 0,
+			"aria-busy": d,
 			children: [
-				/* @__PURE__ */ P("caption", { children: e }),
-				/* @__PURE__ */ P("thead", { children: /* @__PURE__ */ F("tr", { children: [
-					/* @__PURE__ */ P("th", {
+				/* @__PURE__ */ L("caption", { children: e }),
+				/* @__PURE__ */ L("thead", { children: /* @__PURE__ */ R("tr", { children: [
+					/* @__PURE__ */ L("th", {
 						scope: "col",
 						children: "Price"
 					}),
-					/* @__PURE__ */ P("th", {
+					/* @__PURE__ */ L("th", {
 						scope: "col",
 						children: "Size"
 					}),
-					/* @__PURE__ */ P("th", {
+					/* @__PURE__ */ L("th", {
 						scope: "col",
 						children: "Total"
 					})
 				] }) }),
-				/* @__PURE__ */ P("tbody", {
+				/* @__PURE__ */ L("tbody", {
 					"aria-label": "Asks",
-					children: [...x].reverse().map(O)
+					children: d ? F("ask") : [...E].reverse().map(P)
 				}),
-				/* @__PURE__ */ P("tbody", {
+				/* @__PURE__ */ L("tbody", {
 					"aria-label": "Spread",
-					children: /* @__PURE__ */ F("tr", {
+					children: /* @__PURE__ */ R("tr", {
 						className: "lilt-order-book__spread",
-						children: [/* @__PURE__ */ P("th", {
+						children: [/* @__PURE__ */ L("th", {
 							scope: "row",
-							children: D ? g(D.mid) : "—"
-						}), /* @__PURE__ */ P("td", {
+							children: d ? "—" : M ? S(M.mid) : "—"
+						}), /* @__PURE__ */ L("td", {
 							colSpan: 2,
-							children: D ? `Spread ${g(D.value)} · ${v(D.value / D.mid)}` : "No spread"
+							children: d ? "Loading order book" : M ? `Spread ${S(M.value)} · ${w(M.value / M.mid)}` : "No spread"
 						})]
 					})
 				}),
-				/* @__PURE__ */ P("tbody", {
+				/* @__PURE__ */ L("tbody", {
 					"aria-label": "Bids",
-					children: b.map(O)
+					children: d ? F("bid") : T.map(P)
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { G as Candles, ie as CandlestickChartCard, Se as DepthChartCard, ye as IndicatorChartCard, je as OrderBook, we as PortfolioChartCard, Oe as PriceChartCard, le as bollinger, pe as depthLevels, ue as drawdown, X as ema, ce as macd, de as rebase, se as rsi, oe as sma };
+export { re as Candles, oe as CandlestickChartCard, we as DepthChartCard, xe as IndicatorChartCard, Ne as OrderBook, Ee as PortfolioChartCard, Ae as PriceChartCard, de as bollinger, he as depthLevels, fe as drawdown, X as ema, ue as macd, pe as rebase, le as rsi, ce as sma };