@orvui/vue 0.0.0-stage → 0.1.1

package/dist/order-book-MV2c9L-j.js

@@ -0,0 +1,320 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { c as t, r as n } from "./ease-rIvCM4O3.js";
+import { n as r, o as i, r as a } from "./shared-BY_cwEzO.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, getCurrentInstance as ee, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as v, openBlock as y, provide as te, reactive as ne, renderList as b, renderSlot as x, toDisplayString as S, unref as C, watch as w, withCtx as T, withKeys as re } from "vue";
+import { animate as E, motion as D, motionValue as O } from "motion-v";
+// src/charts/order-book/src/model.ts
+function k(e, t, n) {
+	let r = /* @__PURE__ */ new Map();
+	e.forEach(({ price: e, size: t }) => {
+		e > 0 && t > 0 && Number.isFinite(e) && Number.isFinite(t) && r.set(e, (r.get(e) ?? 0) + t);
+	});
+	let i = [...r.keys()].sort((e, n) => t ? n - e : e - n).slice(0, n), a = [], o = 0;
+	for (let e of i) {
+		let t = r.get(e);
+		o += t, a.push({
+			price: e,
+			size: t,
+			total: o
+		});
+	}
+	return a;
+}
+function A(e, t) {
+	let n = 0, r = 0;
+	for (let t of e) n += t.size, r += t.price * t.size;
+	return {
+		side: t,
+		levels: e.length,
+		size: n,
+		quote: r,
+		averagePrice: n ? r / n : 0
+	};
+}
+function j(e, t, n) {
+	let r = Number.isFinite(n) ? Math.max(0, Math.floor(n)) : 9, i = {
+		bids: k(e, !0, r),
+		asks: k(t, !1, r)
+	}, a = i.bids.at(-1)?.total ?? 0, o = i.asks.at(-1)?.total ?? 0, s = i.bids[0], c = i.asks[0];
+	return {
+		...i,
+		bidTotal: a,
+		askTotal: o,
+		maxTotal: Math.max(a, o),
+		midpoint: s && c ? (s.price + c.price) / 2 : null,
+		spread: s && c ? c.price - s.price : null
+	};
+}
+// src/charts/order-book/src/context.ts
+var M = new Intl.NumberFormat("en-US", {
+	minimumFractionDigits: 2,
+	maximumFractionDigits: 2
+});
+function N(t, n) {
+	let r = ee(), o = s(() => j(t.bids, t.asks, t.levels ?? 9)), c = i(() => t.activeLevel, t.defaultActiveLevel ?? null, (e) => {
+		n("update:activeLevel", e), n("activeLevelChange", e);
+	}), l = s(() => {
+		let e = c.value;
+		if (!e) return null;
+		let t = (e.side === "bid" ? o.value.bids : o.value.asks).findIndex((t) => t.price === e.price);
+		return t < 0 ? null : {
+			side: e.side,
+			index: t
+		};
+	}), u = s(() => {
+		if (!l.value) return null;
+		let e = l.value.side;
+		return A((e === "bid" ? o.value.bids : o.value.asks).slice(0, l.value.index + 1), e);
+	});
+	return ne({
+		book: o,
+		active: l,
+		summary: u,
+		selectable: s(() => !!r?.vnode.props?.onLevelSelect),
+		bids: s(() => o.value.bids),
+		asks: s(() => o.value.asks),
+		bidTotal: s(() => o.value.bidTotal),
+		askTotal: s(() => o.value.askTotal),
+		maxTotal: s(() => o.value.maxTotal),
+		spread: s(() => o.value.spread),
+		midpoint: s(() => o.value.midpoint),
+		price: s(() => t.lastPrice != null && Number.isFinite(t.lastPrice) && t.lastPrice > 0 ? t.lastPrice : o.value.midpoint),
+		setActiveLevel(e) {
+			c.value = e;
+		},
+		select(e, t) {
+			n("levelSelect", e, t);
+		},
+		label: s(() => t.label ?? "Order book"),
+		baseSymbol: s(() => t.baseSymbol ?? ""),
+		quoteSymbol: s(() => t.quoteSymbol ?? "USD"),
+		formatPrice: s(() => t.formatPrice ?? ((e) => M.format(e))),
+		formatSize: s(() => t.formatSize ?? a),
+		reduce: e()
+	});
+}
+var P = r("OrderBook"), F = P.use, I = {
+	"aria-hidden": "true",
+	class: "grid grid-cols-3 py-3 text-[10px] uppercase tracking-wider text-muted-foreground"
+}, L = { class: "px-4" }, R = { class: "px-4 text-right" }, z = /* @__PURE__ */ m({
+	__name: "OrderBookHeader",
+	setup(e) {
+		let t = F();
+		return (e, n) => (y(), u("div", I, [
+			d("span", L, "Price" + S(C(t).quoteSymbol ? ` (${C(t).quoteSymbol})` : ""), 1),
+			d("span", R, "Size" + S(C(t).baseSymbol ? ` (${C(t).baseSymbol})` : ""), 1),
+			n[0] ||= d("span", { class: "px-4 text-right" }, "Total", -1)
+		]));
+	}
+}), B = { class: "relative h-8 px-4 py-0" }, V = {
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute inset-y-px left-1 w-[calc(300%-8px)] overflow-hidden rounded-sm"
+}, H = ["aria-label"], U = {
+	key: 1,
+	class: "relative"
+}, W = { class: "relative px-4 py-0 text-right text-foreground" }, G = { class: "relative px-4 py-0 text-right text-muted-foreground" }, K = /* @__PURE__ */ m({
+	__name: "OrderBookDepthRow",
+	props: {
+		row: {},
+		side: {},
+		inRange: { type: Boolean },
+		fraction: {},
+		entranceIndex: {}
+	},
+	setup(e) {
+		let r = e, i = F(), a = O(0), o = !1, s = 0, l, f;
+		v(() => {
+			o = !0;
+		}), w(() => [r.row.size, i.reduce], ([e, t], [r]) => {
+			let i = ++s;
+			l?.stop(), f?.stop(), e === r || t ? a.set(0) : l = E(a, .1, {
+				duration: .08,
+				ease: n,
+				onComplete() {
+					i === s && (f = E(a, 0, {
+						duration: .2,
+						ease: n
+					}));
+				}
+			});
+		}), _(() => {
+			s++, l?.stop(), f?.stop(), a.destroy();
+		});
+		function m() {
+			i.setActiveLevel({
+				side: r.side,
+				price: r.row.price
+			});
+		}
+		return (r, s) => (y(), c(C(D).tr, {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			transition: {
+				duration: .18,
+				ease: C(n),
+				delay: C(i).reduce || C(o) ? 0 : Math.min(e.entranceIndex, 8) * .025
+			},
+			class: h(["group", e.side === "ask" ? "text-rose-600 dark:text-rose-400" : "text-emerald-700 dark:text-emerald-400"]),
+			onPointerenter: m
+		}, {
+			default: T(() => [
+				d("td", B, [d("div", V, [
+					p(C(D).div, {
+						initial: !C(i).reduce && {
+							scaleX: e.fraction * .85,
+							opacity: 0
+						},
+						animate: {
+							scaleX: e.fraction,
+							opacity: 1
+						},
+						transition: C(i).reduce ? { duration: 0 } : {
+							...C(t),
+							delay: C(o) ? 0 : Math.min(e.entranceIndex, 8) * .025
+						},
+						class: "absolute inset-0 origin-right overflow-hidden rounded-sm"
+					}, {
+						default: T(() => [...s[3] ||= [d("div", { class: "absolute inset-0 bg-current opacity-[0.12]" }, null, -1)]]),
+						_: 1
+					}, 8, [
+						"initial",
+						"animate",
+						"transition"
+					]),
+					p(C(D).div, {
+						style: g({ opacity: C(a) }),
+						class: "absolute inset-0 bg-current"
+					}, null, 8, ["style"]),
+					d("div", { class: h(["absolute inset-0 bg-current transition-opacity duration-150", e.inRange ? "opacity-[0.08]" : "opacity-0 group-hover:opacity-[0.05]"]) }, null, 2)
+				]), C(i).selectable ? (y(), u("button", {
+					key: 0,
+					type: "button",
+					class: "relative rounded-sm outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring",
+					"aria-label": `${e.side === "ask" ? "Ask" : "Bid"} ${C(i).formatPrice(e.row.price)}, size ${C(i).formatSize(e.row.size)}, cumulative ${C(i).formatSize(e.row.total)}`,
+					onFocus: m,
+					onBlur: s[0] ||= (e) => C(i).setActiveLevel(null),
+					onClick: s[1] ||= (t) => C(i).select(e.row, e.side),
+					onKeydown: s[2] ||= re((e) => C(i).setActiveLevel(null), ["esc"])
+				}, S(C(i).formatPrice(e.row.price)), 41, H)) : (y(), u("span", U, S(C(i).formatPrice(e.row.price)), 1))]),
+				d("td", W, S(C(i).formatSize(e.row.size)), 1),
+				d("td", G, S(C(i).formatSize(e.row.total)), 1)
+			]),
+			_: 1
+		}, 8, ["transition", "class"]));
+	}
+}), q = ["aria-label"], ie = { class: "sr-only" }, J = { scope: "col" }, Y = { scope: "col" }, ae = { scope: "col" }, oe = { key: 0 }, se = {
+	colspan: "3",
+	class: "px-4 py-6 text-center text-muted-foreground"
+}, X = /* @__PURE__ */ m({
+	__name: "OrderBookSide",
+	props: { side: {} },
+	setup(e) {
+		let t = e, n = F(), r = s(() => {
+			let e = t.side === "ask" ? n.asks.slice().reverse() : n.bids;
+			return e.map((r, i) => {
+				let a = t.side === "ask" ? e.length - i - 1 : i;
+				return {
+					row: r,
+					depthIndex: a,
+					inRange: n.active?.side === t.side && a <= n.active.index,
+					fraction: n.maxTotal ? r.total / n.maxTotal : 0
+				};
+			});
+		});
+		return (t, i) => (y(), u("table", {
+			"aria-label": e.side === "ask" ? "Asks · sell orders" : "Bids · buy orders",
+			class: "w-full table-fixed border-separate border-spacing-0"
+		}, [d("thead", ie, [d("tr", null, [
+			d("th", J, "Price " + S(C(n).quoteSymbol), 1),
+			d("th", Y, "Size " + S(C(n).baseSymbol), 1),
+			d("th", ae, "Cumulative total " + S(C(n).baseSymbol), 1)
+		])]), d("tbody", { onPointerleave: i[0] ||= (e) => C(n).setActiveLevel(null) }, [r.value.length ? l("", !0) : (y(), u("tr", oe, [d("td", se, " No " + S(e.side === "ask" ? "asks" : "bids"), 1)])), (y(!0), u(o, null, b(r.value, (t) => (y(), c(K, {
+			key: t.row.price,
+			row: t.row,
+			side: e.side,
+			"in-range": t.inRange,
+			fraction: t.fraction,
+			"entrance-index": t.depthIndex
+		}, null, 8, [
+			"row",
+			"side",
+			"in-range",
+			"fraction",
+			"entrance-index"
+		]))), 128))], 32)], 8, q));
+	}
+}), ce = { class: "my-1 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-y border-border bg-muted/40 px-4 py-3" }, le = { class: "text-base font-medium tracking-tight" }, ue = { class: "text-[10px] text-muted-foreground" }, Z = /* @__PURE__ */ m({
+	__name: "OrderBookSpread",
+	setup(e) {
+		let t = F(), n = s(() => t.spread === null || t.midpoint === null ? "Spread unavailable" : t.spread < 0 ? "Crossed book" : `Spread ${t.formatPrice(t.spread)} · ${(t.spread / t.midpoint * 100).toFixed(3)}%`);
+		return (e, r) => (y(), u("div", ce, [d("span", le, [r[0] ||= d("span", { class: "sr-only" }, "Reference price: ", -1), f(S(C(t).price === null ? "—" : C(t).formatPrice(C(t).price)), 1)]), d("span", ue, S(n.value), 1)]));
+	}
+}), de = { class: "space-y-2 border-t border-border px-4 pt-3 pb-3" }, fe = { class: "flex justify-between text-[10px]" }, pe = { class: "text-emerald-700 dark:text-emerald-400" }, me = { class: "text-rose-600 dark:text-rose-400" }, Q = {
+	"aria-hidden": "true",
+	class: "relative h-1 overflow-hidden rounded-full bg-rose-500/25"
+}, $ = /* @__PURE__ */ m({
+	__name: "OrderBookBalance",
+	setup(e) {
+		let n = F(), r = s(() => n.bidTotal + n.askTotal), i = s(() => r.value ? n.bidTotal / r.value : .5);
+		return (e, a) => (y(), u("div", de, [d("div", fe, [
+			d("span", pe, "Bids " + S(r.value ? (i.value * 100).toFixed(1) + "%" : "—"), 1),
+			a[0] ||= d("span", { class: "text-muted-foreground" }, "Visible depth", -1),
+			d("span", me, "Asks " + S(r.value ? ((1 - i.value) * 100).toFixed(1) + "%" : "—"), 1)
+		]), d("div", Q, [p(C(D).div, {
+			initial: !1,
+			animate: { scaleX: i.value },
+			transition: C(n).reduce ? { duration: 0 } : C(t),
+			class: "absolute inset-0 origin-left bg-emerald-500/60"
+		}, null, 8, ["animate", "transition"])])]));
+	}
+}), he = ["aria-label"], ge = /* @__PURE__ */ m({
+	__name: "OrderBook",
+	props: {
+		bids: {},
+		asks: {},
+		levels: {},
+		lastPrice: {},
+		label: {},
+		baseSymbol: {},
+		quoteSymbol: {},
+		formatPrice: { type: Function },
+		formatSize: { type: Function },
+		activeLevel: {},
+		defaultActiveLevel: {},
+		className: {}
+	},
+	emits: [
+		"update:activeLevel",
+		"activeLevelChange",
+		"levelSelect"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = N(n, t);
+		return te(P.key, r), (e, t) => (y(), u("section", {
+			"aria-label": C(r).label,
+			class: h(["w-full max-w-[560px] overflow-hidden rounded-2xl border border-border bg-background font-mono text-xs tabular-nums", n.className])
+		}, [x(e.$slots, "default", {}, () => [
+			p(z),
+			p(X, { side: "ask" }),
+			p(Z),
+			p(X, { side: "bid" }),
+			p($)
+		])], 10, he));
+	}
+}), _e = {
+	"aria-live": "polite",
+	class: "flex min-h-10 flex-wrap items-center justify-between gap-x-4 gap-y-1 border-t border-border px-4 py-2 text-muted-foreground"
+}, ve = {
+	key: 0,
+	class: "font-sans"
+}, ye = { class: "text-foreground" }, be = { class: "text-foreground" }, xe = /* @__PURE__ */ m({
+	__name: "OrderBookDepthSummary",
+	props: { placeholder: { default: "Hover a level to see the cost of filling up to it" } },
+	setup(e) {
+		let t = F();
+		return (n, r) => (y(), u("p", _e, [C(t).summary ? x(n.$slots, "default", { summary: C(t).summary }, () => [d("span", null, [r[0] ||= f("Avg ", -1), d("span", ye, S(C(t).formatPrice(C(t).summary.averagePrice)), 1)]), d("span", null, [d("span", be, S(C(t).formatSize(C(t).summary.size)) + " " + S(C(t).baseSymbol), 1), f(" · " + S(C(t).formatPrice(C(t).summary.quote)) + " " + S(C(t).quoteSymbol), 1)])], void 0, 1) : (y(), u("span", ve, S(e.placeholder), 1))]));
+	}
+});
+export { X as a, F as c, Z as i, ge as n, K as o, $ as r, z as s, xe as t };
+
+//# sourceMappingURL=order-book-MV2c9L-j.js.map

package/dist/order-book-MV2c9L-j.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-book-MV2c9L-j.js","names":["_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_openBlock","_createBlock","_unref","_normalizeClass","_withCtx","_createElementVNode","_createVNode","_normalizeStyle","_createElementBlock","_withKeys","_toDisplayString","_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_createCommentVNode","_Fragment","_renderList","_createBlock","OrderBookDepthRow","_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createElementBlock","_createElementVNode","_createTextVNode","_toDisplayString","_unref","_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","_unref","_sfc_main","_hoisted_1","emit","_openBlock","_createElementBlock","_unref","_normalizeClass","_renderSlot","_createVNode","OrderBookHeader","OrderBookSide","OrderBookSpread","OrderBookBalance","_sfc_main","_openBlock","_createElementBlock","_unref","_toDisplayString","_renderSlot","_createElementVNode","_createTextVNode","_sfc_main","useReducedMotion","SPRING_PANEL","EASE_OUT","context","selection","formatCompact","sideDepth","sizes","price","size","prices","descending","b","a","count","result","cumulative","summarizeDepth","quote","level","levels","buildOrderBook","bids","asks","bidTotal","askTotal","bid","ask","priceFormat","createOrderBookModel","instance","getCurrentInstance","book","computed","props","selectionState","emit","value","active","selected","index","row","summary","side","reactive","orderBookContext","useOrderBook","_hoisted_1$6","_hoisted_2$5","_hoisted_3$5","OrderBookHeader_default","defineComponent","openBlock","createElementBlock","createElementVNode","toDisplayString","unref","_cache","_hoisted_1$5","_hoisted_2$4","_hoisted_3$4","_hoisted_4$3","_hoisted_5$2","_hoisted_6$1","OrderBookDepthRow_default","__props","highlight","motionValue","entered","revision","feedback","fading","onMounted","watch","reduced","previous","current","animate","onBeforeUnmount","inspect","createBlock","motion","normalizeClass","withCtx","createVNode","normalizeStyle","withKeys","_hoisted_1$4","_hoisted_2$3","_hoisted_3$3","_hoisted_4$2","_hoisted_5$1","_hoisted_6","_hoisted_7","OrderBookSide_default","rows","depthIndex","createCommentVNode","Fragment","renderList","entry","_hoisted_1$3","_hoisted_2$2","_hoisted_3$2","OrderBookSpread_default","spread","createTextVNode","_hoisted_1$2","_hoisted_2$1","_hoisted_3$1","_hoisted_4$1","_hoisted_5","OrderBookBalance_default","total","ratio","_hoisted_1$1","OrderBook_default","__emit","provide","renderSlot","_ctx","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","OrderBookDepthSummary_default"],"sources":["../src/charts/order-book/src/model.ts","../src/charts/order-book/src/context.ts","../src/charts/order-book/src/OrderBookHeader.vue","../src/charts/order-book/src/OrderBookHeader.vue","../src/charts/order-book/src/OrderBookDepthRow.vue","../src/charts/order-book/src/OrderBookDepthRow.vue","../src/charts/order-book/src/OrderBookSide.vue","../src/charts/order-book/src/OrderBookSide.vue","../src/charts/order-book/src/OrderBookSpread.vue","../src/charts/order-book/src/OrderBookSpread.vue","../src/charts/order-book/src/OrderBookBalance.vue","../src/charts/order-book/src/OrderBookBalance.vue","../src/charts/order-book/src/OrderBook.vue","../src/charts/order-book/src/OrderBook.vue","../src/charts/order-book/src/OrderBookDepthSummary.vue","../src/charts/order-book/src/OrderBookDepthSummary.vue"],"sourcesContent":["export type DepthLevel = { price: number; size: number; total: number };\ntype Level = { price: number; size: number };\nexport type DepthSummary = {\n  side: \"bid\" | \"ask\";\n  levels: number;\n  size: number;\n  quote: number;\n  averagePrice: number;\n};\n\nfunction sideDepth(\n  source: readonly Level[],\n  descending: boolean,\n  count: number,\n): DepthLevel[] {\n  const sizes = new Map<number, number>();\n  source.forEach(({ price, size }) => {\n    if (\n      price > 0 &&\n      size > 0 &&\n      Number.isFinite(price) &&\n      Number.isFinite(size)\n    )\n      sizes.set(price, (sizes.get(price) ?? 0) + size);\n  });\n  const prices = [...sizes.keys()]\n    .sort((a, b) => (descending ? b - a : a - b))\n    .slice(0, count);\n  const result: DepthLevel[] = [];\n  let cumulative = 0;\n  for (const price of prices) {\n    const size = sizes.get(price)!;\n    cumulative += size;\n    result.push({ price, size, total: cumulative });\n  }\n  return result;\n}\n\nexport function summarizeDepth(\n  levels: readonly DepthLevel[],\n  side: \"bid\" | \"ask\",\n): DepthSummary {\n  let size = 0;\n  let quote = 0;\n  for (const level of levels) {\n    size += level.size;\n    quote += level.price * level.size;\n  }\n  return {\n    side,\n    levels: levels.length,\n    size,\n    quote,\n    averagePrice: size ? quote / size : 0,\n  };\n}\n\nexport function buildOrderBook(\n  bids: readonly Level[],\n  asks: readonly Level[],\n  levels: number,\n) {\n  const count = Number.isFinite(levels) ? Math.max(0, Math.floor(levels)) : 9;\n  const result = {\n    bids: sideDepth(bids, true, count),\n    asks: sideDepth(asks, false, count),\n  };\n  const bidTotal = result.bids.at(-1)?.total ?? 0;\n  const askTotal = result.asks.at(-1)?.total ?? 0;\n  const bid = result.bids[0];\n  const ask = result.asks[0];\n  return {\n    ...result,\n    bidTotal,\n    askTotal,\n    maxTotal: Math.max(bidTotal, askTotal),\n    midpoint: bid && ask ? (bid.price + ask.price) / 2 : null,\n    spread: bid && ask ? ask.price - bid.price : null,\n  };\n}\n","import { computed, getCurrentInstance, reactive } from \"vue\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { selection, context, formatCompact } from \"../../shared\";\nimport { buildOrderBook, summarizeDepth, type DepthLevel } from \"./model\";\nexport type OrderBookLevel = { price: number; size: number };\nexport type OrderBookActiveLevel = {\n  side: \"bid\" | \"ask\";\n  price: number;\n} | null;\nexport interface OrderBookProps {\n  bids: readonly OrderBookLevel[];\n  asks: readonly OrderBookLevel[];\n  levels?: number;\n  lastPrice?: number;\n  label?: string;\n  baseSymbol?: string;\n  quoteSymbol?: string;\n  formatPrice?: (value: number) => string;\n  formatSize?: (value: number) => string;\n  activeLevel?: OrderBookActiveLevel;\n  defaultActiveLevel?: OrderBookActiveLevel;\n  className?: string;\n}\nconst priceFormat = new Intl.NumberFormat(\"en-US\", {\n  minimumFractionDigits: 2,\n  maximumFractionDigits: 2,\n});\nexport function createOrderBookModel(\n  props: OrderBookProps,\n  emit: (event: any, ...args: any[]) => void,\n) {\n  const instance = getCurrentInstance();\n  const book = computed(() =>\n    buildOrderBook(props.bids, props.asks, props.levels ?? 9),\n  );\n  const selectionState = selection(\n    () => props.activeLevel,\n    props.defaultActiveLevel ?? null,\n    (value) => {\n      emit(\"update:activeLevel\", value);\n      emit(\"activeLevelChange\", value);\n    },\n  );\n  const active = computed(() => {\n    const selected = selectionState.value;\n    if (!selected) return null;\n    const rows = selected.side === \"bid\" ? book.value.bids : book.value.asks;\n    const index = rows.findIndex((row) => row.price === selected.price);\n    return index < 0 ? null : { side: selected.side, index };\n  });\n  const summary = computed(() => {\n    if (!active.value) return null;\n    const side = active.value.side;\n    const rows = side === \"bid\" ? book.value.bids : book.value.asks;\n    return summarizeDepth(rows.slice(0, active.value.index + 1), side);\n  });\n  return reactive({\n    book,\n    active,\n    summary,\n    selectable: computed(() => Boolean(instance?.vnode.props?.onLevelSelect)),\n    bids: computed(() => book.value.bids),\n    asks: computed(() => book.value.asks),\n    bidTotal: computed(() => book.value.bidTotal),\n    askTotal: computed(() => book.value.askTotal),\n    maxTotal: computed(() => book.value.maxTotal),\n    spread: computed(() => book.value.spread),\n    midpoint: computed(() => book.value.midpoint),\n    price: computed(() =>\n      props.lastPrice != null &&\n      Number.isFinite(props.lastPrice) &&\n      props.lastPrice > 0\n        ? props.lastPrice\n        : book.value.midpoint,\n    ),\n    setActiveLevel(value: OrderBookActiveLevel) {\n      selectionState.value = value;\n    },\n    select(value: DepthLevel, side: \"bid\" | \"ask\") {\n      emit(\"levelSelect\", value, side);\n    },\n    label: computed(() => props.label ?? \"Order book\"),\n    baseSymbol: computed(() => props.baseSymbol ?? \"\"),\n    quoteSymbol: computed(() => props.quoteSymbol ?? \"USD\"),\n    formatPrice: computed(\n      () => props.formatPrice ?? ((value: number) => priceFormat.format(value)),\n    ),\n    formatSize: computed(() => props.formatSize ?? formatCompact),\n    reduce: useReducedMotion(),\n  });\n}\nexport const orderBookContext =\n  context<ReturnType<typeof createOrderBookModel>>(\"OrderBook\");\nexport const useOrderBook = orderBookContext.use;\n","<script setup lang=\"ts\">\nimport { useOrderBook } from \"./context\";\nconst book = useOrderBook();\n</script>\n<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"grid grid-cols-3 py-3 text-[10px] uppercase tracking-wider text-muted-foreground\"\n  >\n    <span class=\"px-4\"\n      >Price{{ book.quoteSymbol ? ` (${book.quoteSymbol})` : \"\" }}</span\n    ><span class=\"px-4 text-right\"\n      >Size{{ book.baseSymbol ? ` (${book.baseSymbol})` : \"\" }}</span\n    ><span class=\"px-4 text-right\">Total</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useOrderBook } from \"./context\";\nconst book = useOrderBook();\n</script>\n<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"grid grid-cols-3 py-3 text-[10px] uppercase tracking-wider text-muted-foreground\"\n  >\n    <span class=\"px-4\"\n      >Price{{ book.quoteSymbol ? ` (${book.quoteSymbol})` : \"\" }}</span\n    ><span class=\"px-4 text-right\"\n      >Size{{ book.baseSymbol ? ` (${book.baseSymbol})` : \"\" }}</span\n    ><span class=\"px-4 text-right\">Total</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, watch } from \"vue\";\nimport { animate, motion, motionValue } from \"motion-v\";\nimport { EASE_OUT, SPRING_PANEL } from \"../../../lib/ease\";\nimport { useOrderBook } from \"./context\";\nimport type { DepthLevel } from \"./model\";\nconst props = defineProps<{\n  row: DepthLevel;\n  side: \"bid\" | \"ask\";\n  inRange?: boolean;\n  fraction: number;\n  entranceIndex: number;\n}>();\nconst book = useOrderBook();\nconst highlight = motionValue(0);\nlet entered = false,\n  revision = 0;\nlet feedback: ReturnType<typeof animate> | undefined;\nlet fading: ReturnType<typeof animate> | undefined;\nonMounted(() => {\n  entered = true;\n});\nwatch(\n  () => [props.row.size, book.reduce] as const,\n  ([size, reduced], [previous]) => {\n    const current = ++revision;\n    feedback?.stop();\n    fading?.stop();\n    if (size === previous || reduced) {\n      highlight.set(0);\n      return;\n    }\n    feedback = animate(highlight, 0.1, {\n      duration: 0.08,\n      ease: EASE_OUT,\n      onComplete() {\n        if (current === revision)\n          fading = animate(highlight, 0, { duration: 0.2, ease: EASE_OUT });\n      },\n    });\n  },\n);\nonBeforeUnmount(() => {\n  revision++;\n  feedback?.stop();\n  fading?.stop();\n  highlight.destroy();\n});\nfunction inspect() {\n  book.setActiveLevel({ side: props.side, price: props.row.price });\n}\n</script>\n<template>\n  <motion.tr\n    :initial=\"{ opacity: 0 }\"\n    :animate=\"{ opacity: 1 }\"\n    :transition=\"{\n      duration: 0.18,\n      ease: EASE_OUT,\n      delay: book.reduce || entered ? 0 : Math.min(entranceIndex, 8) * 0.025,\n    }\"\n    class=\"group\"\n    :class=\"\n      side === 'ask'\n        ? 'text-rose-600 dark:text-rose-400'\n        : 'text-emerald-700 dark:text-emerald-400'\n    \"\n    @pointerenter=\"inspect\"\n  >\n    <td class=\"relative h-8 px-4 py-0\">\n      <div\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute inset-y-px left-1 w-[calc(300%-8px)] overflow-hidden rounded-sm\"\n      >\n        <motion.div\n          :initial=\"\n            book.reduce ? false : { scaleX: fraction * 0.85, opacity: 0 }\n          \"\n          :animate=\"{ scaleX: fraction, opacity: 1 }\"\n          :transition=\"\n            book.reduce\n              ? { duration: 0 }\n              : {\n                  ...SPRING_PANEL,\n                  delay: entered ? 0 : Math.min(entranceIndex, 8) * 0.025,\n                }\n          \"\n          class=\"absolute inset-0 origin-right overflow-hidden rounded-sm\"\n          ><div class=\"absolute inset-0 bg-current opacity-[0.12]\"\n        /></motion.div>\n        <motion.div\n          :style=\"{ opacity: highlight }\"\n          class=\"absolute inset-0 bg-current\"\n        />\n        <div\n          class=\"absolute inset-0 bg-current transition-opacity duration-150\"\n          :class=\"\n            inRange ? 'opacity-[0.08]' : 'opacity-0 group-hover:opacity-[0.05]'\n          \"\n        />\n      </div>\n      <button\n        v-if=\"book.selectable\"\n        type=\"button\"\n        class=\"relative rounded-sm outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring\"\n        :aria-label=\"`${side === 'ask' ? 'Ask' : 'Bid'} ${book.formatPrice(row.price)}, size ${book.formatSize(row.size)}, cumulative ${book.formatSize(row.total)}`\"\n        @focus=\"inspect\"\n        @blur=\"book.setActiveLevel(null)\"\n        @click=\"book.select(row, side)\"\n        @keydown.esc=\"book.setActiveLevel(null)\"\n      >\n        {{ book.formatPrice(row.price) }}</button\n      ><span v-else class=\"relative\">{{ book.formatPrice(row.price) }}</span>\n    </td>\n    <td class=\"relative px-4 py-0 text-right text-foreground\">\n      {{ book.formatSize(row.size) }}\n    </td>\n    <td class=\"relative px-4 py-0 text-right text-muted-foreground\">\n      {{ book.formatSize(row.total) }}\n    </td>\n  </motion.tr>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, watch } from \"vue\";\nimport { animate, motion, motionValue } from \"motion-v\";\nimport { EASE_OUT, SPRING_PANEL } from \"../../../lib/ease\";\nimport { useOrderBook } from \"./context\";\nimport type { DepthLevel } from \"./model\";\nconst props = defineProps<{\n  row: DepthLevel;\n  side: \"bid\" | \"ask\";\n  inRange?: boolean;\n  fraction: number;\n  entranceIndex: number;\n}>();\nconst book = useOrderBook();\nconst highlight = motionValue(0);\nlet entered = false,\n  revision = 0;\nlet feedback: ReturnType<typeof animate> | undefined;\nlet fading: ReturnType<typeof animate> | undefined;\nonMounted(() => {\n  entered = true;\n});\nwatch(\n  () => [props.row.size, book.reduce] as const,\n  ([size, reduced], [previous]) => {\n    const current = ++revision;\n    feedback?.stop();\n    fading?.stop();\n    if (size === previous || reduced) {\n      highlight.set(0);\n      return;\n    }\n    feedback = animate(highlight, 0.1, {\n      duration: 0.08,\n      ease: EASE_OUT,\n      onComplete() {\n        if (current === revision)\n          fading = animate(highlight, 0, { duration: 0.2, ease: EASE_OUT });\n      },\n    });\n  },\n);\nonBeforeUnmount(() => {\n  revision++;\n  feedback?.stop();\n  fading?.stop();\n  highlight.destroy();\n});\nfunction inspect() {\n  book.setActiveLevel({ side: props.side, price: props.row.price });\n}\n</script>\n<template>\n  <motion.tr\n    :initial=\"{ opacity: 0 }\"\n    :animate=\"{ opacity: 1 }\"\n    :transition=\"{\n      duration: 0.18,\n      ease: EASE_OUT,\n      delay: book.reduce || entered ? 0 : Math.min(entranceIndex, 8) * 0.025,\n    }\"\n    class=\"group\"\n    :class=\"\n      side === 'ask'\n        ? 'text-rose-600 dark:text-rose-400'\n        : 'text-emerald-700 dark:text-emerald-400'\n    \"\n    @pointerenter=\"inspect\"\n  >\n    <td class=\"relative h-8 px-4 py-0\">\n      <div\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute inset-y-px left-1 w-[calc(300%-8px)] overflow-hidden rounded-sm\"\n      >\n        <motion.div\n          :initial=\"\n            book.reduce ? false : { scaleX: fraction * 0.85, opacity: 0 }\n          \"\n          :animate=\"{ scaleX: fraction, opacity: 1 }\"\n          :transition=\"\n            book.reduce\n              ? { duration: 0 }\n              : {\n                  ...SPRING_PANEL,\n                  delay: entered ? 0 : Math.min(entranceIndex, 8) * 0.025,\n                }\n          \"\n          class=\"absolute inset-0 origin-right overflow-hidden rounded-sm\"\n          ><div class=\"absolute inset-0 bg-current opacity-[0.12]\"\n        /></motion.div>\n        <motion.div\n          :style=\"{ opacity: highlight }\"\n          class=\"absolute inset-0 bg-current\"\n        />\n        <div\n          class=\"absolute inset-0 bg-current transition-opacity duration-150\"\n          :class=\"\n            inRange ? 'opacity-[0.08]' : 'opacity-0 group-hover:opacity-[0.05]'\n          \"\n        />\n      </div>\n      <button\n        v-if=\"book.selectable\"\n        type=\"button\"\n        class=\"relative rounded-sm outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring\"\n        :aria-label=\"`${side === 'ask' ? 'Ask' : 'Bid'} ${book.formatPrice(row.price)}, size ${book.formatSize(row.size)}, cumulative ${book.formatSize(row.total)}`\"\n        @focus=\"inspect\"\n        @blur=\"book.setActiveLevel(null)\"\n        @click=\"book.select(row, side)\"\n        @keydown.esc=\"book.setActiveLevel(null)\"\n      >\n        {{ book.formatPrice(row.price) }}</button\n      ><span v-else class=\"relative\">{{ book.formatPrice(row.price) }}</span>\n    </td>\n    <td class=\"relative px-4 py-0 text-right text-foreground\">\n      {{ book.formatSize(row.size) }}\n    </td>\n    <td class=\"relative px-4 py-0 text-right text-muted-foreground\">\n      {{ book.formatSize(row.total) }}\n    </td>\n  </motion.tr>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useOrderBook } from \"./context\";\nimport OrderBookDepthRow from \"./OrderBookDepthRow.vue\";\nconst props = defineProps<{ side: \"bid\" | \"ask\" }>();\nconst book = useOrderBook();\nconst rows = computed(() => {\n  const levels = props.side === \"ask\" ? book.asks.slice().reverse() : book.bids;\n  return levels.map((row, index) => {\n    const depthIndex = props.side === \"ask\" ? levels.length - index - 1 : index;\n    return {\n      row,\n      depthIndex,\n      inRange:\n        book.active?.side === props.side && depthIndex <= book.active.index,\n      fraction: book.maxTotal ? row.total / book.maxTotal : 0,\n    };\n  });\n});\n</script>\n<template>\n  <table\n    :aria-label=\"side === 'ask' ? 'Asks · sell orders' : 'Bids · buy orders'\"\n    class=\"w-full table-fixed border-separate border-spacing-0\"\n  >\n    <thead class=\"sr-only\">\n      <tr>\n        <th scope=\"col\">Price {{ book.quoteSymbol }}</th>\n        <th scope=\"col\">Size {{ book.baseSymbol }}</th>\n        <th scope=\"col\">Cumulative total {{ book.baseSymbol }}</th>\n      </tr>\n    </thead>\n    <tbody @pointerleave=\"book.setActiveLevel(null)\">\n      <tr v-if=\"!rows.length\">\n        <td colspan=\"3\" class=\"px-4 py-6 text-center text-muted-foreground\">\n          No {{ side === \"ask\" ? \"asks\" : \"bids\" }}\n        </td>\n      </tr>\n      <OrderBookDepthRow\n        v-for=\"entry in rows\"\n        :key=\"entry.row.price\"\n        :row=\"entry.row\"\n        :side=\"side\"\n        :in-range=\"entry.inRange\"\n        :fraction=\"entry.fraction\"\n        :entrance-index=\"entry.depthIndex\"\n      />\n    </tbody>\n  </table>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useOrderBook } from \"./context\";\nimport OrderBookDepthRow from \"./OrderBookDepthRow.vue\";\nconst props = defineProps<{ side: \"bid\" | \"ask\" }>();\nconst book = useOrderBook();\nconst rows = computed(() => {\n  const levels = props.side === \"ask\" ? book.asks.slice().reverse() : book.bids;\n  return levels.map((row, index) => {\n    const depthIndex = props.side === \"ask\" ? levels.length - index - 1 : index;\n    return {\n      row,\n      depthIndex,\n      inRange:\n        book.active?.side === props.side && depthIndex <= book.active.index,\n      fraction: book.maxTotal ? row.total / book.maxTotal : 0,\n    };\n  });\n});\n</script>\n<template>\n  <table\n    :aria-label=\"side === 'ask' ? 'Asks · sell orders' : 'Bids · buy orders'\"\n    class=\"w-full table-fixed border-separate border-spacing-0\"\n  >\n    <thead class=\"sr-only\">\n      <tr>\n        <th scope=\"col\">Price {{ book.quoteSymbol }}</th>\n        <th scope=\"col\">Size {{ book.baseSymbol }}</th>\n        <th scope=\"col\">Cumulative total {{ book.baseSymbol }}</th>\n      </tr>\n    </thead>\n    <tbody @pointerleave=\"book.setActiveLevel(null)\">\n      <tr v-if=\"!rows.length\">\n        <td colspan=\"3\" class=\"px-4 py-6 text-center text-muted-foreground\">\n          No {{ side === \"ask\" ? \"asks\" : \"bids\" }}\n        </td>\n      </tr>\n      <OrderBookDepthRow\n        v-for=\"entry in rows\"\n        :key=\"entry.row.price\"\n        :row=\"entry.row\"\n        :side=\"side\"\n        :in-range=\"entry.inRange\"\n        :fraction=\"entry.fraction\"\n        :entrance-index=\"entry.depthIndex\"\n      />\n    </tbody>\n  </table>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useOrderBook } from \"./context\";\nconst book = useOrderBook();\nconst spread = computed(() =>\n  book.spread === null || book.midpoint === null\n    ? \"Spread unavailable\"\n    : book.spread < 0\n      ? \"Crossed book\"\n      : `Spread ${book.formatPrice(book.spread)} · ${((book.spread / book.midpoint) * 100).toFixed(3)}%`,\n);\n</script>\n<template>\n  <div\n    class=\"my-1 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-y border-border bg-muted/40 px-4 py-3\"\n  >\n    <span class=\"text-base font-medium tracking-tight\"\n      ><span class=\"sr-only\">Reference price: </span\n      >{{ book.price === null ? \"—\" : book.formatPrice(book.price) }}</span\n    ><span class=\"text-[10px] text-muted-foreground\">{{ spread }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useOrderBook } from \"./context\";\nconst book = useOrderBook();\nconst spread = computed(() =>\n  book.spread === null || book.midpoint === null\n    ? \"Spread unavailable\"\n    : book.spread < 0\n      ? \"Crossed book\"\n      : `Spread ${book.formatPrice(book.spread)} · ${((book.spread / book.midpoint) * 100).toFixed(3)}%`,\n);\n</script>\n<template>\n  <div\n    class=\"my-1 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-y border-border bg-muted/40 px-4 py-3\"\n  >\n    <span class=\"text-base font-medium tracking-tight\"\n      ><span class=\"sr-only\">Reference price: </span\n      >{{ book.price === null ? \"—\" : book.formatPrice(book.price) }}</span\n    ><span class=\"text-[10px] text-muted-foreground\">{{ spread }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { SPRING_PANEL } from \"../../../lib/ease\";\nimport { useOrderBook } from \"./context\";\nconst book = useOrderBook();\nconst total = computed(() => book.bidTotal + book.askTotal);\nconst ratio = computed(() => (total.value ? book.bidTotal / total.value : 0.5));\n</script>\n<template>\n  <div class=\"space-y-2 border-t border-border px-4 pt-3 pb-3\">\n    <div class=\"flex justify-between text-[10px]\">\n      <span class=\"text-emerald-700 dark:text-emerald-400\"\n        >Bids {{ total ? (ratio * 100).toFixed(1) + \"%\" : \"—\" }}</span\n      ><span class=\"text-muted-foreground\">Visible depth</span\n      ><span class=\"text-rose-600 dark:text-rose-400\"\n        >Asks {{ total ? ((1 - ratio) * 100).toFixed(1) + \"%\" : \"—\" }}</span\n      >\n    </div>\n    <div\n      aria-hidden=\"true\"\n      class=\"relative h-1 overflow-hidden rounded-full bg-rose-500/25\"\n    >\n      <motion.div\n        :initial=\"false\"\n        :animate=\"{ scaleX: ratio }\"\n        :transition=\"book.reduce ? { duration: 0 } : SPRING_PANEL\"\n        class=\"absolute inset-0 origin-left bg-emerald-500/60\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { SPRING_PANEL } from \"../../../lib/ease\";\nimport { useOrderBook } from \"./context\";\nconst book = useOrderBook();\nconst total = computed(() => book.bidTotal + book.askTotal);\nconst ratio = computed(() => (total.value ? book.bidTotal / total.value : 0.5));\n</script>\n<template>\n  <div class=\"space-y-2 border-t border-border px-4 pt-3 pb-3\">\n    <div class=\"flex justify-between text-[10px]\">\n      <span class=\"text-emerald-700 dark:text-emerald-400\"\n        >Bids {{ total ? (ratio * 100).toFixed(1) + \"%\" : \"—\" }}</span\n      ><span class=\"text-muted-foreground\">Visible depth</span\n      ><span class=\"text-rose-600 dark:text-rose-400\"\n        >Asks {{ total ? ((1 - ratio) * 100).toFixed(1) + \"%\" : \"—\" }}</span\n      >\n    </div>\n    <div\n      aria-hidden=\"true\"\n      class=\"relative h-1 overflow-hidden rounded-full bg-rose-500/25\"\n    >\n      <motion.div\n        :initial=\"false\"\n        :animate=\"{ scaleX: ratio }\"\n        :transition=\"book.reduce ? { duration: 0 } : SPRING_PANEL\"\n        class=\"absolute inset-0 origin-left bg-emerald-500/60\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport {\n  createOrderBookModel,\n  orderBookContext,\n  type OrderBookProps,\n} from \"./context\";\nimport OrderBookHeader from \"./OrderBookHeader.vue\";\nimport OrderBookSide from \"./OrderBookSide.vue\";\nimport OrderBookSpread from \"./OrderBookSpread.vue\";\nimport OrderBookBalance from \"./OrderBookBalance.vue\";\nconst props = defineProps<OrderBookProps>();\nconst emit = defineEmits([\n  \"update:activeLevel\",\n  \"activeLevelChange\",\n  \"levelSelect\",\n]);\nconst book = createOrderBookModel(props, emit);\nprovide(orderBookContext.key, book);\n</script>\n<template>\n  <section\n    :aria-label=\"book.label\"\n    :class=\"[\n      'w-full max-w-[560px] overflow-hidden rounded-2xl border border-border bg-background font-mono text-xs tabular-nums',\n      props.className,\n    ]\"\n  >\n    <slot\n      ><OrderBookHeader /><OrderBookSide\n        side=\"ask\" /><OrderBookSpread /><OrderBookSide\n        side=\"bid\" /><OrderBookBalance\n    /></slot>\n  </section>\n</template>\n","<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport {\n  createOrderBookModel,\n  orderBookContext,\n  type OrderBookProps,\n} from \"./context\";\nimport OrderBookHeader from \"./OrderBookHeader.vue\";\nimport OrderBookSide from \"./OrderBookSide.vue\";\nimport OrderBookSpread from \"./OrderBookSpread.vue\";\nimport OrderBookBalance from \"./OrderBookBalance.vue\";\nconst props = defineProps<OrderBookProps>();\nconst emit = defineEmits([\n  \"update:activeLevel\",\n  \"activeLevelChange\",\n  \"levelSelect\",\n]);\nconst book = createOrderBookModel(props, emit);\nprovide(orderBookContext.key, book);\n</script>\n<template>\n  <section\n    :aria-label=\"book.label\"\n    :class=\"[\n      'w-full max-w-[560px] overflow-hidden rounded-2xl border border-border bg-background font-mono text-xs tabular-nums',\n      props.className,\n    ]\"\n  >\n    <slot\n      ><OrderBookHeader /><OrderBookSide\n        side=\"ask\" /><OrderBookSpread /><OrderBookSide\n        side=\"bid\" /><OrderBookBalance\n    /></slot>\n  </section>\n</template>\n","<script setup lang=\"ts\">\nimport { useOrderBook } from \"./context\";\nwithDefaults(defineProps<{ placeholder?: string }>(), {\n  placeholder: \"Hover a level to see the cost of filling up to it\",\n});\nconst book = useOrderBook();\n</script>\n<template>\n  <p\n    aria-live=\"polite\"\n    class=\"flex min-h-10 flex-wrap items-center justify-between gap-x-4 gap-y-1 border-t border-border px-4 py-2 text-muted-foreground\"\n  >\n    <span v-if=\"!book.summary\" class=\"font-sans\">{{ placeholder }}</span\n    ><slot v-else :summary=\"book.summary\"\n      ><span\n        >Avg\n        <span class=\"text-foreground\">{{\n          book.formatPrice(book.summary.averagePrice)\n        }}</span></span\n      ><span\n        ><span class=\"text-foreground\"\n          >{{ book.formatSize(book.summary.size) }} {{ book.baseSymbol }}</span\n        >\n        · {{ book.formatPrice(book.summary.quote) }}\n        {{ book.quoteSymbol }}</span\n      ></slot\n    >\n  </p>\n</template>\n","<script setup lang=\"ts\">\nimport { useOrderBook } from \"./context\";\nwithDefaults(defineProps<{ placeholder?: string }>(), {\n  placeholder: \"Hover a level to see the cost of filling up to it\",\n});\nconst book = useOrderBook();\n</script>\n<template>\n  <p\n    aria-live=\"polite\"\n    class=\"flex min-h-10 flex-wrap items-center justify-between gap-x-4 gap-y-1 border-t border-border px-4 py-2 text-muted-foreground\"\n  >\n    <span v-if=\"!book.summary\" class=\"font-sans\">{{ placeholder }}</span\n    ><slot v-else :summary=\"book.summary\"\n      ><span\n        >Avg\n        <span class=\"text-foreground\">{{\n          book.formatPrice(book.summary.averagePrice)\n        }}</span></span\n      ><span\n        ><span class=\"text-foreground\"\n          >{{ book.formatSize(book.summary.size) }} {{ book.baseSymbol }}</span\n        >\n        · {{ book.formatPrice(book.summary.quote) }}\n        {{ book.quoteSymbol }}</span\n      ></slot\n    >\n  </p>\n</template>\n"],"mappings":"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"}