@orvui/vue 0.0.0-stage → 0.1.1

package/dist/liquidity-heatmap-CzTHCHEm.js

@@ -0,0 +1,271 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { r as t } from "./ease-rIvCM4O3.js";
+import { t as n } from "./number-Dz4iLJiS.js";
+import { a as r, i, n as a, r as o } from "./shared-BY_cwEzO.js";
+import { t as ee } from "./ChartTooltip-BY8iAlEo.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as te, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, openBlock as _, provide as v, reactive as y, ref as b, renderList as x, renderSlot as S, toDisplayString as C, unref as w, useId as T, withCtx as E, withKeys as ne } from "vue";
+import { motion as D } from "motion-v";
+// src/charts/liquidity-heatmap/src/model.ts
+function O(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) t.has(n.id) || t.set(n.id, n);
+	let n = /* @__PURE__ */ new Set(), r = 0;
+	return {
+		columns: [...t.values()].map((e) => {
+			let t = /* @__PURE__ */ new Map();
+			for (let n of e.levels) {
+				let { price: e, size: r } = n;
+				if (!Number.isFinite(e) || e <= 0 || !Number.isFinite(r) || r < 0) continue;
+				let i = (t.get(e) ?? 0) + r;
+				Number.isFinite(i) && t.set(e, i);
+			}
+			for (let [e, i] of t) n.add(e), r = Math.max(r, i);
+			return {
+				...e,
+				levels: t
+			};
+		}),
+		prices: [...n].sort((e, t) => t - e),
+		maximum: r
+	};
+}
+function k(e, t) {
+	let n = t.length - 1;
+	if (!Number.isFinite(e) || n < 0 || e > t[0] || e < t[n]) return null;
+	if (e === t[n]) return n + .5;
+	let r = 0, i = n;
+	for (; i - r > 1;) {
+		let n = r + i >>> 1;
+		e > t[n] ? i = n : r = n;
+	}
+	return r + .5 + (t[r] - e) / (t[r] - t[i]);
+}
+// src/charts/liquidity-heatmap/src/context.ts
+function A(t) {
+	let n = c(() => O(t.snapshots)), r = c(() => {
+		let e = t.maxSize;
+		return e !== void 0 && Number.isFinite(e) && e > 0 ? e : n.value.maximum;
+	});
+	return y({
+		columns: c(() => n.value.columns),
+		prices: c(() => n.value.prices),
+		ceiling: r,
+		unit: c(() => t.unit ?? "units"),
+		label: c(() => t.label ?? "Liquidity heatmap"),
+		formatPrice: c(() => t.formatPrice ?? i),
+		formatSize: c(() => t.formatSize ?? o),
+		reduce: e()
+	});
+}
+var j = a("LiquidityHeatmap"), M = j.use, N = [
+	"#17233b",
+	"#254f80",
+	"#217c90",
+	"#27af98",
+	"#97d56b",
+	"#f4df76"
+], P = (e, t) => N[Math.min(N.length - 1, Math.floor((t > 0 ? e / t : 0) * N.length))], F = {
+	key: 0,
+	class: "py-16 text-center text-sm text-muted-foreground"
+}, I = {
+	key: 1,
+	class: "overflow-x-auto"
+}, L = { class: "relative" }, R = {
+	"aria-label": "Liquidity by price and time",
+	class: "w-full table-fixed border-separate border-spacing-[2px]",
+	"data-chart-keyboard": ""
+}, z = { class: "sr-only" }, B = [
+	"data-cell",
+	"tabindex",
+	"aria-label",
+	"aria-describedby",
+	"onPointerenter",
+	"onFocus",
+	"onClick",
+	"onKeydown"
+], V = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "pointer-events-none absolute inset-0 rounded-[2px] ring-1 ring-inset ring-white"
+}, H = { class: "sr-only" }, U = {
+	"aria-hidden": "true",
+	class: "absolute -right-[72px] top-0 bottom-0 flex w-16 flex-col justify-around text-right font-mono text-[10px] text-muted-foreground tabular-nums"
+}, W = ["viewBox"], G = {
+	"aria-hidden": "true",
+	class: "mt-3 flex justify-between font-mono text-[10px] text-muted-foreground"
+}, K = {
+	key: 0,
+	class: "flex flex-col gap-1 font-mono text-xs"
+}, q = { class: "text-muted-foreground" }, J = { class: "inline-flex items-center tabular-nums" }, Y = {
+	key: 0,
+	class: "text-muted-foreground"
+}, X = /* @__PURE__ */ m({
+	__name: "LiquidityHeatmapPlot",
+	setup(e) {
+		let i = M(), a = b(null), o = b(null), m = b(null), h = T(), v = c(() => i.prices.map((e, t) => ({
+			price: e,
+			cells: i.columns.map((n, r) => ({
+				key: JSON.stringify([n.id, e]),
+				column: n,
+				price: e,
+				index: t * i.columns.length + r,
+				size: n.levels.get(e),
+				color: P(n.levels.get(e) ?? 0, i.ceiling)
+			}))
+		}))), y = c(() => v.value.flatMap((e) => e.cells)), S = c(() => new Map(y.value.map((e) => [e.key, e]))), O = c(() => o.value !== null && S.value.has(o.value) ? o.value : y.value[0]?.key), A = c(() => a.value === null ? null : S.value.get(a.value) ?? null), j = c(() => {
+			let e = !1;
+			return i.columns.map((t, n) => {
+				let r = t.price === void 0 ? null : k(t.price, i.prices);
+				if (r === null) return e = !1, "";
+				let a = `${e ? "L" : "M"}${n + .5},${r}`;
+				return e = !0, a;
+			}).join(" ");
+		}), N = c(() => i.columns.map((e) => `${e.id}:${e.price !== void 0 && k(e.price, i.prices) !== null}`).join("|")), X = c(() => i.columns.filter((e, t) => t % Math.max(1, Math.ceil(i.columns.length / 5)) === 0 || t === i.columns.length - 1));
+		function Z(e, t) {
+			m.value = e.currentTarget, a.value = t;
+		}
+		function Q(e, t) {
+			o.value = t, Z(e, t);
+		}
+		return (e, o) => !w(i).prices.length || !w(i).columns.length ? (_(), d("p", F, " No liquidity data ")) : (_(), d("div", I, [f("div", {
+			class: "relative",
+			style: g({
+				minWidth: Math.max(480, w(i).columns.length * 24) + "px",
+				paddingRight: "72px"
+			})
+		}, [f("div", L, [
+			f("table", R, [f("thead", z, [f("tr", null, [(_(!0), d(s, null, x(w(i).columns, (e) => (_(), d("th", {
+				key: e.id,
+				scope: "col"
+			}, C(e.label), 1))), 128))])]), f("tbody", null, [(_(!0), d(s, null, x(v.value, (e) => (_(), d("tr", { key: e.price }, [(_(!0), d(s, null, x(e.cells, (e) => (_(), d("td", {
+				key: e.column.id,
+				class: "p-0"
+			}, [f("button", {
+				type: "button",
+				"data-chart-item": "",
+				"data-cell": e.index,
+				tabindex: e.key === O.value ? 0 : -1,
+				"aria-label": `${e.column.label}, ${w(i).formatPrice(e.price)}: ${e.size === void 0 ? "No data" : w(i).formatSize(e.size) + " " + w(i).unit}`,
+				"aria-describedby": a.value === e.key ? w(h) : void 0,
+				class: "relative block h-6 w-full rounded-[2px] bg-muted/30 outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-foreground",
+				onPointerenter: (t) => t.pointerType !== "touch" && Z(t, e.key),
+				onPointerleave: o[0] ||= (e) => a.value = null,
+				onFocus: (t) => Q(t, e.key),
+				onBlur: o[1] ||= (e) => a.value = null,
+				onClick: (t) => Z(t, e.key),
+				onKeydown: [(t) => w(r)(t, e.index, y.value.length, w(i).columns.length), o[2] ||= ne((e) => a.value = null, ["esc"])]
+			}, [p(w(D).span, {
+				"aria-hidden": "true",
+				class: "pointer-events-none absolute inset-0 rounded-[2px]",
+				initial: !1,
+				animate: {
+					opacity: e.size === void 0 ? 0 : 1,
+					backgroundColor: e.color
+				},
+				transition: {
+					duration: w(i).reduce ? 0 : .28,
+					ease: w(t)
+				}
+			}, null, 8, ["animate", "transition"]), a.value === e.key ? (_(), d("span", V)) : u("", !0)], 40, B), f("span", H, C(e.size ?? "No data"), 1)]))), 128))]))), 128))])]),
+			f("div", U, [(_(!0), d(s, null, x(w(i).prices, (e) => (_(), d("span", { key: e }, C(w(i).formatPrice(e)), 1))), 128))]),
+			(_(), d("svg", {
+				key: N.value,
+				"aria-hidden": "true",
+				class: "pointer-events-none absolute inset-0 size-full overflow-visible",
+				viewBox: `0 0 ${w(i).columns.length} ${w(i).prices.length}`,
+				preserveAspectRatio: "none"
+			}, [p(w(D).path, {
+				initial: !1,
+				animate: { d: j.value },
+				transition: {
+					duration: w(i).reduce ? 0 : .28,
+					ease: w(t)
+				},
+				fill: "none",
+				stroke: "black",
+				"stroke-opacity": ".35",
+				"stroke-width": "4",
+				"vector-effect": "non-scaling-stroke"
+			}, null, 8, ["animate", "transition"]), p(w(D).path, {
+				initial: !1,
+				animate: { d: j.value },
+				transition: {
+					duration: w(i).reduce ? 0 : .28,
+					ease: w(t)
+				},
+				fill: "none",
+				stroke: "white",
+				"stroke-opacity": ".9",
+				"stroke-width": "1.5",
+				"vector-effect": "non-scaling-stroke",
+				"stroke-linejoin": "round"
+			}, null, 8, ["animate", "transition"])], 8, W))
+		]), f("div", G, [(_(!0), d(s, null, x(X.value, (e) => (_(), d("span", { key: e.id }, C(e.label), 1))), 128))])], 4), (_(), l(ee, {
+			key: a.value ?? "closed",
+			id: w(h),
+			open: A.value !== null,
+			anchor: m.value,
+			"onUpdate:open": o[3] ||= (e) => !e && (a.value = null)
+		}, {
+			default: E(() => [A.value ? (_(), d("span", K, [
+				f("span", q, C(A.value.column.label) + " · " + C(w(i).formatPrice(A.value.price)), 1),
+				f("span", J, [A.value.size === void 0 ? (_(), d(s, { key: 0 }, [te("No data")], 64)) : (_(), l(w(n), {
+					key: 1,
+					value: A.value.size,
+					format: () => w(i).formatSize(A.value.size),
+					suffix: " " + w(i).unit,
+					duration: .35,
+					"start-on-view": !1
+				}, null, 8, [
+					"value",
+					"format",
+					"suffix"
+				]))]),
+				A.value.column.price !== void 0 && Number.isFinite(A.value.column.price) ? (_(), d("span", Y, "Market " + C(w(i).formatPrice(A.value.column.price)), 1)) : u("", !0)
+			])) : u("", !0)]),
+			_: 1
+		}, 8, [
+			"id",
+			"open",
+			"anchor"
+		]))]));
+	}
+}), Z = { class: "flex flex-wrap items-center justify-between gap-3 text-[10px] text-muted-foreground" }, Q = { class: "flex items-center gap-2" }, re = {
+	"aria-hidden": "true",
+	class: "flex gap-0.5"
+}, $ = /* @__PURE__ */ m({
+	__name: "LiquidityHeatmapLegend",
+	setup(e) {
+		let t = M();
+		return (e, n) => (_(), d("div", Z, [f("span", null, "Resting liquidity · " + C(w(t).unit), 1), f("span", Q, [
+			n[0] ||= f("span", null, "0", -1),
+			f("span", re, [(_(!0), d(s, null, x(w(N), (e) => (_(), d("span", {
+				key: e,
+				class: "h-2 w-5 rounded-[1px]",
+				style: g({ backgroundColor: e })
+			}, null, 4))), 128))]),
+			f("span", null, C(w(t).formatSize(w(t).ceiling)) + "+", 1)
+		])]));
+	}
+}), ie = ["aria-label"], ae = /* @__PURE__ */ m({
+	__name: "LiquidityHeatmap",
+	props: {
+		snapshots: {},
+		maxSize: {},
+		unit: {},
+		label: {},
+		formatPrice: { type: Function },
+		formatSize: { type: Function },
+		className: {}
+	},
+	setup(e) {
+		let t = e, n = A(t);
+		return v(j.key, n), (e, r) => (_(), d("section", {
+			"aria-label": w(n).label,
+			class: h(["w-full space-y-4", t.className])
+		}, [S(e.$slots, "default", {}, () => [p(X), p($)])], 10, ie));
+	}
+});
+export { M as i, $ as n, X as r, ae as t };
+
+//# sourceMappingURL=liquidity-heatmap-CzTHCHEm.js.map

package/dist/liquidity-heatmap-CzTHCHEm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquidity-heatmap-CzTHCHEm.js","names":["_hoisted_1","_hoisted_2","_hoisted_3","_unref","_openBlock","_createElementBlock","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_toDisplayString","_withKeys","_createVNode","_createCommentVNode","_createBlock","ChartTooltip","_withCtx","_createTextVNode","NumberTicker","_sfc_main","_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_Fragment","_renderList","_normalizeStyle","_sfc_main","_openBlock","_createElementBlock","_unref","_normalizeClass","_renderSlot","_createVNode","LiquidityHeatmapPlot","LiquidityHeatmapLegend","_sfc_main","useReducedMotion","EASE_OUT","NumberTicker_default","moveFocus","context","formatCompact","ChartTooltip_default","buildLiquidityHeatmap","snapshotsById","snapshot","snapshots","priceLevels","maximum","levels","observation","price","size","summed","b","a","pricePosition","last","prices","lower","upper","middle","createLiquidityModel","data","computed","props","ceiling","supplied","reactive","formatNumber","liquidityContext","useLiquidityHeatmap","LIQUIDITY_COLORS","heatColor","value","_hoisted_1$2","_hoisted_2$1","_hoisted_3$1","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","LiquidityHeatmapPlot_default","defineComponent","heatmap","active","ref","cursor","anchor","tooltipId","useId","rows","column","row","index","cells","byKey","cell","focusedKey","selected","trace","continuation","y","command","topology","labels","activate","event","key","focus","unref","openBlock","createElementBlock","createElementVNode","normalizeStyle","Fragment","renderList","toDisplayString","$event","_cache","withKeys","createVNode","motion","createCommentVNode","createBlock","withCtx","createTextVNode","_hoisted_1$1","_hoisted_2","_hoisted_3","LiquidityHeatmapLegend_default","color","_hoisted_1","LiquidityHeatmap_default","__props","provide","normalizeClass","renderSlot","_ctx"],"sources":["../src/charts/liquidity-heatmap/src/model.ts","../src/charts/liquidity-heatmap/src/context.ts","../src/charts/liquidity-heatmap/src/LiquidityHeatmapPlot.vue","../src/charts/liquidity-heatmap/src/LiquidityHeatmapPlot.vue","../src/charts/liquidity-heatmap/src/LiquidityHeatmapLegend.vue","../src/charts/liquidity-heatmap/src/LiquidityHeatmapLegend.vue","../src/charts/liquidity-heatmap/src/LiquidityHeatmap.vue","../src/charts/liquidity-heatmap/src/LiquidityHeatmap.vue"],"sourcesContent":["export interface LiquiditySnapshot {\n  id: string;\n  label: string;\n  levels: readonly { price: number; size: number }[];\n  price?: number;\n}\n\nexport function buildLiquidityHeatmap(snapshots: readonly LiquiditySnapshot[]) {\n  const snapshotsById = new Map<string, LiquiditySnapshot>();\n  for (const snapshot of snapshots)\n    if (!snapshotsById.has(snapshot.id))\n      snapshotsById.set(snapshot.id, snapshot);\n  const priceLevels = new Set<number>();\n  let maximum = 0;\n  const columns = [...snapshotsById.values()].map((snapshot) => {\n    const levels = new Map<number, number>();\n    for (const observation of snapshot.levels) {\n      const { price, size } = observation;\n      if (\n        !Number.isFinite(price) ||\n        price <= 0 ||\n        !Number.isFinite(size) ||\n        size < 0\n      )\n        continue;\n      const summed = (levels.get(price) ?? 0) + size;\n      if (Number.isFinite(summed)) levels.set(price, summed);\n    }\n    for (const [price, size] of levels) {\n      priceLevels.add(price);\n      maximum = Math.max(maximum, size);\n    }\n    return { ...snapshot, levels };\n  });\n  return { columns, prices: [...priceLevels].sort((a, b) => b - a), maximum };\n}\n\nexport function pricePosition(price: number, prices: readonly number[]) {\n  const last = prices.length - 1;\n  if (\n    !Number.isFinite(price) ||\n    last < 0 ||\n    price > prices[0] ||\n    price < prices[last]\n  )\n    return null;\n  if (price === prices[last]) return last + 0.5;\n  let lower = 0;\n  let upper = last;\n  while (upper - lower > 1) {\n    const middle = (lower + upper) >>> 1;\n    if (price > prices[middle]) upper = middle;\n    else lower = middle;\n  }\n  return (\n    lower + 0.5 + (prices[lower] - price) / (prices[lower] - prices[upper])\n  );\n}\n","import { computed, reactive } from \"vue\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { context, formatNumber, formatCompact } from \"../../shared\";\nimport { buildLiquidityHeatmap, type LiquiditySnapshot } from \"./model\";\nexport interface LiquidityHeatmapProps {\n  snapshots: readonly LiquiditySnapshot[];\n  maxSize?: number;\n  unit?: string;\n  label?: string;\n  formatPrice?: (value: number) => string;\n  formatSize?: (value: number) => string;\n  className?: string;\n}\nexport function createLiquidityModel(props: LiquidityHeatmapProps) {\n  const data = computed(() => buildLiquidityHeatmap(props.snapshots));\n  const ceiling = computed(() => {\n    const supplied = props.maxSize;\n    return supplied !== undefined && Number.isFinite(supplied) && supplied > 0\n      ? supplied\n      : data.value.maximum;\n  });\n  return reactive({\n    columns: computed(() => data.value.columns),\n    prices: computed(() => data.value.prices),\n    ceiling,\n    unit: computed(() => props.unit ?? \"units\"),\n    label: computed(() => props.label ?? \"Liquidity heatmap\"),\n    formatPrice: computed(() => props.formatPrice ?? formatNumber),\n    formatSize: computed(() => props.formatSize ?? formatCompact),\n    reduce: useReducedMotion(),\n  });\n}\nexport const liquidityContext =\n  context<ReturnType<typeof createLiquidityModel>>(\"LiquidityHeatmap\");\nexport const useLiquidityHeatmap = liquidityContext.use;\nexport const LIQUIDITY_COLORS = [\n  \"#17233b\",\n  \"#254f80\",\n  \"#217c90\",\n  \"#27af98\",\n  \"#97d56b\",\n  \"#f4df76\",\n];\nexport const heatColor = (value: number, maximum: number) =>\n  LIQUIDITY_COLORS[\n    Math.min(\n      LIQUIDITY_COLORS.length - 1,\n      Math.floor((maximum > 0 ? value / maximum : 0) * LIQUIDITY_COLORS.length),\n    )\n  ];\n","<script setup lang=\"ts\">\nimport { computed, ref, useId } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { NumberTicker } from \"../../../motion/number\";\nimport { moveFocus } from \"../../shared\";\nimport ChartTooltip from \"../../ChartTooltip.vue\";\nimport { useLiquidityHeatmap, heatColor } from \"./context\";\nimport { pricePosition } from \"./model\";\nconst heatmap = useLiquidityHeatmap();\nconst active = ref<string | null>(null),\n  cursor = ref<string | null>(null),\n  anchor = ref<HTMLElement | null>(null);\nconst tooltipId = useId();\nconst rows = computed(() =>\n  heatmap.prices.map((price, row) => ({\n    price,\n    cells: heatmap.columns.map((column, index) => ({\n      key: JSON.stringify([column.id, price]),\n      column,\n      price,\n      index: row * heatmap.columns.length + index,\n      size: column.levels.get(price),\n      color: heatColor(column.levels.get(price) ?? 0, heatmap.ceiling),\n    })),\n  })),\n);\nconst cells = computed(() => rows.value.flatMap((row) => row.cells));\nconst byKey = computed(\n  () => new Map(cells.value.map((cell) => [cell.key, cell])),\n);\nconst focusedKey = computed(() =>\n  cursor.value !== null && byKey.value.has(cursor.value)\n    ? cursor.value\n    : cells.value[0]?.key,\n);\nconst selected = computed(() =>\n  active.value === null ? null : (byKey.value.get(active.value) ?? null),\n);\nconst trace = computed(() => {\n  let continuation = false;\n  const commands = heatmap.columns.map((column, index) => {\n    const y =\n      column.price === undefined\n        ? null\n        : pricePosition(column.price, heatmap.prices);\n    if (y === null) {\n      continuation = false;\n      return \"\";\n    }\n    const command = `${continuation ? \"L\" : \"M\"}${index + 0.5},${y}`;\n    continuation = true;\n    return command;\n  });\n  return commands.join(\" \");\n});\nconst topology = computed(() =>\n  heatmap.columns\n    .map(\n      (column) =>\n        `${column.id}:${column.price !== undefined && pricePosition(column.price, heatmap.prices) !== null}`,\n    )\n    .join(\"|\"),\n);\nconst labels = computed(() =>\n  heatmap.columns.filter(\n    (_, index) =>\n      index % Math.max(1, Math.ceil(heatmap.columns.length / 5)) === 0 ||\n      index === heatmap.columns.length - 1,\n  ),\n);\nfunction activate(event: Event, key: string) {\n  anchor.value = event.currentTarget as HTMLElement;\n  active.value = key;\n}\nfunction focus(event: Event, key: string) {\n  cursor.value = key;\n  activate(event, key);\n}\n</script>\n<template>\n  <p\n    v-if=\"!heatmap.prices.length || !heatmap.columns.length\"\n    class=\"py-16 text-center text-sm text-muted-foreground\"\n  >\n    No liquidity data\n  </p>\n  <div v-else class=\"overflow-x-auto\">\n    <div\n      class=\"relative\"\n      :style=\"{\n        minWidth: Math.max(480, heatmap.columns.length * 24) + 'px',\n        paddingRight: '72px',\n      }\"\n    >\n      <div class=\"relative\">\n        <table\n          aria-label=\"Liquidity by price and time\"\n          class=\"w-full table-fixed border-separate border-spacing-[2px]\"\n          data-chart-keyboard\n        >\n          <thead class=\"sr-only\">\n            <tr>\n              <th\n                v-for=\"column in heatmap.columns\"\n                :key=\"column.id\"\n                scope=\"col\"\n              >\n                {{ column.label }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr v-for=\"row in rows\" :key=\"row.price\">\n              <td v-for=\"cell in row.cells\" :key=\"cell.column.id\" class=\"p-0\">\n                <button\n                  type=\"button\"\n                  data-chart-item\n                  :data-cell=\"cell.index\"\n                  :tabindex=\"cell.key === focusedKey ? 0 : -1\"\n                  :aria-label=\"`${cell.column.label}, ${heatmap.formatPrice(cell.price)}: ${cell.size === undefined ? 'No data' : heatmap.formatSize(cell.size) + ' ' + heatmap.unit}`\"\n                  :aria-describedby=\"\n                    active === cell.key ? tooltipId : undefined\n                  \"\n                  class=\"relative block h-6 w-full rounded-[2px] bg-muted/30 outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-foreground\"\n                  @pointerenter=\"\n                    $event.pointerType !== 'touch' && activate($event, cell.key)\n                  \"\n                  @pointerleave=\"active = null\"\n                  @focus=\"focus($event, cell.key)\"\n                  @blur=\"active = null\"\n                  @click=\"activate($event, cell.key)\"\n                  @keydown=\"\n                    moveFocus(\n                      $event,\n                      cell.index,\n                      cells.length,\n                      heatmap.columns.length,\n                    )\n                  \"\n                  @keydown.esc=\"active = null\"\n                >\n                  <motion.span\n                    aria-hidden=\"true\"\n                    class=\"pointer-events-none absolute inset-0 rounded-[2px]\"\n                    :initial=\"false\"\n                    :animate=\"{\n                      opacity: cell.size !== undefined ? 1 : 0,\n                      backgroundColor: cell.color,\n                    }\"\n                    :transition=\"{\n                      duration: heatmap.reduce ? 0 : 0.28,\n                      ease: EASE_OUT,\n                    }\"\n                  />\n                  <span\n                    v-if=\"active === cell.key\"\n                    aria-hidden=\"true\"\n                    class=\"pointer-events-none absolute inset-0 rounded-[2px] ring-1 ring-inset ring-white\"\n                  /></button\n                ><span class=\"sr-only\">{{ cell.size ?? \"No data\" }}</span>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <div\n          aria-hidden=\"true\"\n          class=\"absolute -right-[72px] top-0 bottom-0 flex w-16 flex-col justify-around text-right font-mono text-[10px] text-muted-foreground tabular-nums\"\n        >\n          <span v-for=\"price in heatmap.prices\" :key=\"price\">{{\n            heatmap.formatPrice(price)\n          }}</span>\n        </div>\n        <svg\n          :key=\"topology\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute inset-0 size-full overflow-visible\"\n          :viewBox=\"`0 0 ${heatmap.columns.length} ${heatmap.prices.length}`\"\n          preserveAspectRatio=\"none\"\n        >\n          <motion.path\n            :initial=\"false\"\n            :animate=\"{ d: trace }\"\n            :transition=\"{\n              duration: heatmap.reduce ? 0 : 0.28,\n              ease: EASE_OUT,\n            }\"\n            fill=\"none\"\n            stroke=\"black\"\n            stroke-opacity=\".35\"\n            stroke-width=\"4\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n          <motion.path\n            :initial=\"false\"\n            :animate=\"{ d: trace }\"\n            :transition=\"{\n              duration: heatmap.reduce ? 0 : 0.28,\n              ease: EASE_OUT,\n            }\"\n            fill=\"none\"\n            stroke=\"white\"\n            stroke-opacity=\".9\"\n            stroke-width=\"1.5\"\n            vector-effect=\"non-scaling-stroke\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n      <div\n        aria-hidden=\"true\"\n        class=\"mt-3 flex justify-between font-mono text-[10px] text-muted-foreground\"\n      >\n        <span v-for=\"column in labels\" :key=\"column.id\">{{\n          column.label\n        }}</span>\n      </div>\n    </div>\n    <ChartTooltip\n      :key=\"active ?? 'closed'\"\n      :id=\"tooltipId\"\n      :open=\"selected !== null\"\n      :anchor=\"anchor\"\n      @update:open=\"!$event && (active = null)\"\n    >\n      <span v-if=\"selected\" class=\"flex flex-col gap-1 font-mono text-xs\"\n        ><span class=\"text-muted-foreground\"\n          >{{ selected.column.label }} ·\n          {{ heatmap.formatPrice(selected.price) }}</span\n        >\n        <span class=\"inline-flex items-center tabular-nums\"\n          ><template v-if=\"selected.size === undefined\">No data</template\n          ><NumberTicker\n            v-else\n            :value=\"selected.size\"\n            :format=\"() => heatmap.formatSize(selected!.size!)\"\n            :suffix=\"' ' + heatmap.unit\"\n            :duration=\"0.35\"\n            :start-on-view=\"false\"\n        /></span>\n        <span\n          v-if=\"\n            selected.column.price !== undefined &&\n            Number.isFinite(selected.column.price)\n          \"\n          class=\"text-muted-foreground\"\n          >Market {{ heatmap.formatPrice(selected.column.price) }}</span\n        >\n      </span>\n    </ChartTooltip>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { NumberTicker } from \"../../../motion/number\";\nimport { moveFocus } from \"../../shared\";\nimport ChartTooltip from \"../../ChartTooltip.vue\";\nimport { useLiquidityHeatmap, heatColor } from \"./context\";\nimport { pricePosition } from \"./model\";\nconst heatmap = useLiquidityHeatmap();\nconst active = ref<string | null>(null),\n  cursor = ref<string | null>(null),\n  anchor = ref<HTMLElement | null>(null);\nconst tooltipId = useId();\nconst rows = computed(() =>\n  heatmap.prices.map((price, row) => ({\n    price,\n    cells: heatmap.columns.map((column, index) => ({\n      key: JSON.stringify([column.id, price]),\n      column,\n      price,\n      index: row * heatmap.columns.length + index,\n      size: column.levels.get(price),\n      color: heatColor(column.levels.get(price) ?? 0, heatmap.ceiling),\n    })),\n  })),\n);\nconst cells = computed(() => rows.value.flatMap((row) => row.cells));\nconst byKey = computed(\n  () => new Map(cells.value.map((cell) => [cell.key, cell])),\n);\nconst focusedKey = computed(() =>\n  cursor.value !== null && byKey.value.has(cursor.value)\n    ? cursor.value\n    : cells.value[0]?.key,\n);\nconst selected = computed(() =>\n  active.value === null ? null : (byKey.value.get(active.value) ?? null),\n);\nconst trace = computed(() => {\n  let continuation = false;\n  const commands = heatmap.columns.map((column, index) => {\n    const y =\n      column.price === undefined\n        ? null\n        : pricePosition(column.price, heatmap.prices);\n    if (y === null) {\n      continuation = false;\n      return \"\";\n    }\n    const command = `${continuation ? \"L\" : \"M\"}${index + 0.5},${y}`;\n    continuation = true;\n    return command;\n  });\n  return commands.join(\" \");\n});\nconst topology = computed(() =>\n  heatmap.columns\n    .map(\n      (column) =>\n        `${column.id}:${column.price !== undefined && pricePosition(column.price, heatmap.prices) !== null}`,\n    )\n    .join(\"|\"),\n);\nconst labels = computed(() =>\n  heatmap.columns.filter(\n    (_, index) =>\n      index % Math.max(1, Math.ceil(heatmap.columns.length / 5)) === 0 ||\n      index === heatmap.columns.length - 1,\n  ),\n);\nfunction activate(event: Event, key: string) {\n  anchor.value = event.currentTarget as HTMLElement;\n  active.value = key;\n}\nfunction focus(event: Event, key: string) {\n  cursor.value = key;\n  activate(event, key);\n}\n</script>\n<template>\n  <p\n    v-if=\"!heatmap.prices.length || !heatmap.columns.length\"\n    class=\"py-16 text-center text-sm text-muted-foreground\"\n  >\n    No liquidity data\n  </p>\n  <div v-else class=\"overflow-x-auto\">\n    <div\n      class=\"relative\"\n      :style=\"{\n        minWidth: Math.max(480, heatmap.columns.length * 24) + 'px',\n        paddingRight: '72px',\n      }\"\n    >\n      <div class=\"relative\">\n        <table\n          aria-label=\"Liquidity by price and time\"\n          class=\"w-full table-fixed border-separate border-spacing-[2px]\"\n          data-chart-keyboard\n        >\n          <thead class=\"sr-only\">\n            <tr>\n              <th\n                v-for=\"column in heatmap.columns\"\n                :key=\"column.id\"\n                scope=\"col\"\n              >\n                {{ column.label }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr v-for=\"row in rows\" :key=\"row.price\">\n              <td v-for=\"cell in row.cells\" :key=\"cell.column.id\" class=\"p-0\">\n                <button\n                  type=\"button\"\n                  data-chart-item\n                  :data-cell=\"cell.index\"\n                  :tabindex=\"cell.key === focusedKey ? 0 : -1\"\n                  :aria-label=\"`${cell.column.label}, ${heatmap.formatPrice(cell.price)}: ${cell.size === undefined ? 'No data' : heatmap.formatSize(cell.size) + ' ' + heatmap.unit}`\"\n                  :aria-describedby=\"\n                    active === cell.key ? tooltipId : undefined\n                  \"\n                  class=\"relative block h-6 w-full rounded-[2px] bg-muted/30 outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-foreground\"\n                  @pointerenter=\"\n                    $event.pointerType !== 'touch' && activate($event, cell.key)\n                  \"\n                  @pointerleave=\"active = null\"\n                  @focus=\"focus($event, cell.key)\"\n                  @blur=\"active = null\"\n                  @click=\"activate($event, cell.key)\"\n                  @keydown=\"\n                    moveFocus(\n                      $event,\n                      cell.index,\n                      cells.length,\n                      heatmap.columns.length,\n                    )\n                  \"\n                  @keydown.esc=\"active = null\"\n                >\n                  <motion.span\n                    aria-hidden=\"true\"\n                    class=\"pointer-events-none absolute inset-0 rounded-[2px]\"\n                    :initial=\"false\"\n                    :animate=\"{\n                      opacity: cell.size !== undefined ? 1 : 0,\n                      backgroundColor: cell.color,\n                    }\"\n                    :transition=\"{\n                      duration: heatmap.reduce ? 0 : 0.28,\n                      ease: EASE_OUT,\n                    }\"\n                  />\n                  <span\n                    v-if=\"active === cell.key\"\n                    aria-hidden=\"true\"\n                    class=\"pointer-events-none absolute inset-0 rounded-[2px] ring-1 ring-inset ring-white\"\n                  /></button\n                ><span class=\"sr-only\">{{ cell.size ?? \"No data\" }}</span>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <div\n          aria-hidden=\"true\"\n          class=\"absolute -right-[72px] top-0 bottom-0 flex w-16 flex-col justify-around text-right font-mono text-[10px] text-muted-foreground tabular-nums\"\n        >\n          <span v-for=\"price in heatmap.prices\" :key=\"price\">{{\n            heatmap.formatPrice(price)\n          }}</span>\n        </div>\n        <svg\n          :key=\"topology\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute inset-0 size-full overflow-visible\"\n          :viewBox=\"`0 0 ${heatmap.columns.length} ${heatmap.prices.length}`\"\n          preserveAspectRatio=\"none\"\n        >\n          <motion.path\n            :initial=\"false\"\n            :animate=\"{ d: trace }\"\n            :transition=\"{\n              duration: heatmap.reduce ? 0 : 0.28,\n              ease: EASE_OUT,\n            }\"\n            fill=\"none\"\n            stroke=\"black\"\n            stroke-opacity=\".35\"\n            stroke-width=\"4\"\n            vector-effect=\"non-scaling-stroke\"\n          />\n          <motion.path\n            :initial=\"false\"\n            :animate=\"{ d: trace }\"\n            :transition=\"{\n              duration: heatmap.reduce ? 0 : 0.28,\n              ease: EASE_OUT,\n            }\"\n            fill=\"none\"\n            stroke=\"white\"\n            stroke-opacity=\".9\"\n            stroke-width=\"1.5\"\n            vector-effect=\"non-scaling-stroke\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n      <div\n        aria-hidden=\"true\"\n        class=\"mt-3 flex justify-between font-mono text-[10px] text-muted-foreground\"\n      >\n        <span v-for=\"column in labels\" :key=\"column.id\">{{\n          column.label\n        }}</span>\n      </div>\n    </div>\n    <ChartTooltip\n      :key=\"active ?? 'closed'\"\n      :id=\"tooltipId\"\n      :open=\"selected !== null\"\n      :anchor=\"anchor\"\n      @update:open=\"!$event && (active = null)\"\n    >\n      <span v-if=\"selected\" class=\"flex flex-col gap-1 font-mono text-xs\"\n        ><span class=\"text-muted-foreground\"\n          >{{ selected.column.label }} ·\n          {{ heatmap.formatPrice(selected.price) }}</span\n        >\n        <span class=\"inline-flex items-center tabular-nums\"\n          ><template v-if=\"selected.size === undefined\">No data</template\n          ><NumberTicker\n            v-else\n            :value=\"selected.size\"\n            :format=\"() => heatmap.formatSize(selected!.size!)\"\n            :suffix=\"' ' + heatmap.unit\"\n            :duration=\"0.35\"\n            :start-on-view=\"false\"\n        /></span>\n        <span\n          v-if=\"\n            selected.column.price !== undefined &&\n            Number.isFinite(selected.column.price)\n          \"\n          class=\"text-muted-foreground\"\n          >Market {{ heatmap.formatPrice(selected.column.price) }}</span\n        >\n      </span>\n    </ChartTooltip>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useLiquidityHeatmap, LIQUIDITY_COLORS } from \"./context\";\nconst heatmap = useLiquidityHeatmap();\n</script>\n<template>\n  <div\n    class=\"flex flex-wrap items-center justify-between gap-3 text-[10px] text-muted-foreground\"\n  >\n    <span>Resting liquidity · {{ heatmap.unit }}</span\n    ><span class=\"flex items-center gap-2\"\n      ><span>0</span\n      ><span aria-hidden=\"true\" class=\"flex gap-0.5\"\n        ><span\n          v-for=\"color in LIQUIDITY_COLORS\"\n          :key=\"color\"\n          class=\"h-2 w-5 rounded-[1px]\"\n          :style=\"{ backgroundColor: color }\" /></span\n      ><span>{{ heatmap.formatSize(heatmap.ceiling) }}+</span></span\n    >\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useLiquidityHeatmap, LIQUIDITY_COLORS } from \"./context\";\nconst heatmap = useLiquidityHeatmap();\n</script>\n<template>\n  <div\n    class=\"flex flex-wrap items-center justify-between gap-3 text-[10px] text-muted-foreground\"\n  >\n    <span>Resting liquidity · {{ heatmap.unit }}</span\n    ><span class=\"flex items-center gap-2\"\n      ><span>0</span\n      ><span aria-hidden=\"true\" class=\"flex gap-0.5\"\n        ><span\n          v-for=\"color in LIQUIDITY_COLORS\"\n          :key=\"color\"\n          class=\"h-2 w-5 rounded-[1px]\"\n          :style=\"{ backgroundColor: color }\" /></span\n      ><span>{{ heatmap.formatSize(heatmap.ceiling) }}+</span></span\n    >\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport {\n  createLiquidityModel,\n  liquidityContext,\n  type LiquidityHeatmapProps,\n} from \"./context\";\nimport LiquidityHeatmapPlot from \"./LiquidityHeatmapPlot.vue\";\nimport LiquidityHeatmapLegend from \"./LiquidityHeatmapLegend.vue\";\nconst props = defineProps<LiquidityHeatmapProps>();\nconst heatmap = createLiquidityModel(props);\nprovide(liquidityContext.key, heatmap);\n</script>\n<template>\n  <section\n    :aria-label=\"heatmap.label\"\n    :class=\"['w-full space-y-4', props.className]\"\n  >\n    <slot><LiquidityHeatmapPlot /><LiquidityHeatmapLegend /></slot>\n  </section>\n</template>\n","<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport {\n  createLiquidityModel,\n  liquidityContext,\n  type LiquidityHeatmapProps,\n} from \"./context\";\nimport LiquidityHeatmapPlot from \"./LiquidityHeatmapPlot.vue\";\nimport LiquidityHeatmapLegend from \"./LiquidityHeatmapLegend.vue\";\nconst props = defineProps<LiquidityHeatmapProps>();\nconst heatmap = createLiquidityModel(props);\nprovide(liquidityContext.key, heatmap);\n</script>\n<template>\n  <section\n    :aria-label=\"heatmap.label\"\n    :class=\"['w-full space-y-4', props.className]\"\n  >\n    <slot><LiquidityHeatmapPlot /><LiquidityHeatmapLegend /></slot>\n  </section>\n</template>\n"],"mappings":"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"}