vuehex 0.5.6 → 0.5.8

package/dist/index.js

@@ -52,99 +52,111 @@ function normalizeThemeKey(e) {
 	return t && t.toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/-{2,}/g, "-").replace(/^-+|-+$/g, "") || null;
 }
 function useChunking(e) {
-	let n = ref(0), r = computed(() => {
+	let n = ref(0);
+	function r() {
+		let e = o.value;
+		return Number.isFinite(e) && e > 0 ? e : null;
+	}
+	function i(e) {
+		return Math.max(e - 1, 0);
+	}
+	let a = computed(() => {
 		let t = e.totalBytes.value;
 		return t <= 0 ? 0 : Math.ceil(t / Math.max(e.bytesPerRow.value, 1));
-	}), i = computed(() => {
+	}), o = computed(() => {
 		let t = e.maxVirtualHeight.value;
 		if (!Number.isFinite(t) || t <= 0) return Infinity;
 		let n = e.rowHeightValue.value;
 		if (!Number.isFinite(n) || n <= 0) return Infinity;
 		let r = Math.floor(t / n);
 		return r > 0 ? r : Infinity;
-	}), a = computed(() => {
-		let e = i.value;
-		return Number.isFinite(e) && e > 0 && r.value > e;
-	}), o = computed(() => a.value ? Math.max(1, Math.ceil(r.value / i.value)) : 1), s = computed(() => {
-		if (!a.value) return 0;
-		let e = i.value;
-		return !Number.isFinite(e) || e <= 0 ? 0 : clamp(Math.floor(Math.max(0, n.value) / e), 0, Math.max(o.value - 1, 0));
+	}), s = computed(() => {
+		let e = r();
+		return e !== null && a.value > e;
 	}), c = computed(() => {
-		let e = r.value;
-		if (e <= 0) return 0;
-		if (!a.value) return e;
-		let t = i.value;
-		if (!Number.isFinite(t) || t <= 0) return e;
-		let o = Math.max(e - Math.max(0, n.value), 0);
-		return Math.min(o, t);
+		if (!s.value) return 1;
+		let e = r();
+		return e ? Math.max(1, Math.ceil(a.value / e)) : 1;
 	}), l = computed(() => {
-		let t = c.value;
-		return t <= 0 ? 0 : t * e.rowHeightValue.value;
+		if (!s.value) return 0;
+		let e = r();
+		return e ? clamp(Math.floor(Math.max(0, n.value) / e), 0, Math.max(c.value - 1, 0)) : 0;
 	}), u = computed(() => {
-		if (!e.showNavigator.value || !a.value) return [];
-		let t = r.value, n = i.value;
-		if (t <= 0 || !Number.isFinite(n) || n <= 0) return [];
-		let s = Math.max(e.bytesPerRow.value, 1), c = e.totalBytes.value, l = !!e.uppercase.value, u = [];
-		for (let e = 0; e < o.value; e += 1) {
+		let e = a.value;
+		if (e <= 0) return 0;
+		if (!s.value) return e;
+		let t = r();
+		if (!t) return e;
+		let i = Math.max(e - Math.max(0, n.value), 0);
+		return Math.min(i, t);
+	}), d = computed(() => {
+		let t = u.value;
+		return t <= 0 ? 0 : t * e.rowHeightValue.value;
+	}), f = computed(() => {
+		if (!e.showNavigator.value || !s.value) return [];
+		let t = a.value, n = r();
+		if (t <= 0 || !n) return [];
+		let i = Math.max(e.bytesPerRow.value, 1), o = e.totalBytes.value, l = !!e.uppercase.value, u = [];
+		for (let e = 0; e < c.value; e += 1) {
 			let r = e * n;
 			if (r >= t) break;
-			let i = Math.min(n, t - r), a = r * s, o = Math.min(i * s, Math.max(c - a, 0)), d = o > 0 ? a + o - 1 : a;
+			let a = Math.min(n, t - r), s = r * i, c = Math.min(a * i, Math.max(o - s, 0)), d = c > 0 ? s + c - 1 : s;
 			u.push({
 				index: e,
 				label: `Chunk ${e + 1}`,
-				range: `${formatOffsetPlain(a, l)} - ${formatOffsetPlain(d, l)}`
+				range: `${formatOffsetPlain(s, l)} - ${formatOffsetPlain(d, l)}`
 			});
 		}
 		return u;
 	});
-	function d() {
-		let e = r.value;
+	function p() {
+		let e = a.value;
 		if (e <= 0) {
 			n.value = 0;
 			return;
 		}
-		if (!a.value) {
+		if (!s.value) {
 			n.value = 0;
 			return;
 		}
-		let t = i.value, o = Math.max(e - 1, 0), s = clamp(Math.max(0, Math.trunc(n.value)), 0, o);
-		if (!Number.isFinite(t) || t <= 0) {
-			n.value = s;
+		let t = r(), o = i(e), c = clamp(Math.max(0, Math.trunc(n.value)), 0, o);
+		if (!t) {
+			n.value = c;
 			return;
 		}
-		n.value = clamp(Math.floor(s / t) * t, 0, o);
+		n.value = clamp(Math.floor(c / t) * t, 0, o);
 	}
-	function f(e) {
-		if (Number.isFinite(e) || (e = 0), d(), !a.value) return !1;
-		let t = i.value;
-		if (!Number.isFinite(t) || t <= 0) return !1;
-		let o = r.value;
+	function m(e) {
+		if (Number.isFinite(e) || (e = 0), p(), !s.value) return !1;
+		let t = r();
+		if (!t) return !1;
+		let o = a.value;
 		if (o <= 0) return !1;
-		let s = Math.max(o - 1, 0), c = clamp(Math.floor(e), 0, s), l = clamp(Math.floor(c / t) * t, 0, s);
-		return l === n.value ? !1 : (n.value = l, !0);
-	}
-	function p(e) {
-		if (!Number.isFinite(e) || !a.value) return !1;
-		let t = i.value;
-		if (!Number.isFinite(t) || t <= 0) return !1;
-		let s = r.value;
-		if (s <= 0) return !1;
-		let c = Math.max(s - 1, 0), l = Math.max(o.value - 1, 0), u = clamp(clamp(Math.floor(e), 0, l) * t, 0, c);
+		let c = i(o), l = clamp(Math.floor(e), 0, c), u = clamp(Math.floor(l / t) * t, 0, c);
 		return u === n.value ? !1 : (n.value = u, !0);
 	}
+	function h(e) {
+		if (!Number.isFinite(e) || !s.value) return !1;
+		let t = r();
+		if (!t) return !1;
+		let o = a.value;
+		if (o <= 0) return !1;
+		let l = i(o), u = Math.max(c.value - 1, 0), d = clamp(clamp(Math.floor(e), 0, u) * t, 0, l);
+		return d === n.value ? !1 : (n.value = d, !0);
+	}
 	return {
 		chunkStartRow: n,
-		totalRows: r,
-		chunkRowCapacity: i,
-		isChunking: a,
-		chunkCount: o,
-		activeChunkIndex: s,
-		chunkRowCount: c,
-		chunkHeight: l,
-		chunkItems: u,
-		clampChunkStartToBounds: d,
-		ensureChunkForRow: f,
-		selectChunk: p
+		totalRows: a,
+		chunkRowCapacity: o,
+		isChunking: s,
+		chunkCount: c,
+		activeChunkIndex: l,
+		chunkRowCount: u,
+		chunkHeight: d,
+		chunkItems: f,
+		clampChunkStartToBounds: p,
+		ensureChunkForRow: m,
+		selectChunk: h
 	};
 }
 var CURSOR_CLASS = "vuehex-cursor";
@@ -302,24 +314,24 @@ function escapeClassAttribute(e) {
 	return n.join(" ");
 }
 function useHexWindow(e) {
-	let n = shallowRef(""), r = shallowRef(new Uint8Array()), i = shallowRef("."), a = ref(0), o = ref(null), s = ref(!1), c = shallowRef(null), u = computed(() => {
+	let n = shallowRef(""), r = shallowRef(new Uint8Array()), i = shallowRef("."), a = ref(0), o = ref(null), s = ref(!1), c = shallowRef(null), u = ref(null), d = computed(() => {
 		let t = e.getWindowState();
 		return Math.floor(t.offset / Math.max(e.bytesPerRow.value, 1));
-	}), d = computed(() => {
+	}), f = computed(() => {
 		let t = r.value.length;
 		return t === 0 ? 0 : Math.max(1, Math.ceil(t / Math.max(e.bytesPerRow.value, 1)));
 	});
-	function f() {
+	function p() {
 		e.clampChunkStartToBounds();
 		let t = e.getWindowState(), n = normalizeSource(t.data);
 		r.value = n, i.value = resolveFallbackChar(e.getNonPrintableChar()), c.value = {
 			offset: t.offset,
 			length: n.length
-		}, S(), nextTick(() => {
-			x(), m();
+		}, w(), nextTick(() => {
+			C(), h();
 		});
 	}
-	function p(t) {
+	function m(t) {
 		let n = e.containerEl.value;
 		if (!n) return !1;
 		let r = Math.max(e.bytesPerRow.value, 1), i = Math.floor(t / r);
@@ -327,35 +339,47 @@ function useHexWindow(e) {
 		let a = i - e.chunkStartRow.value, o = e.rowHeightValue.value;
 		return o > 0 && (n.scrollTop = Math.max(a * o, 0)), !0;
 	}
-	function m() {
+	function h() {
 		if (s.value) return;
 		s.value = !0;
 		let e = typeof window < "u" && typeof window.requestAnimationFrame == "function", t = () => {
-			s.value = !1, b(), S(), w();
+			s.value = !1, S(), v(), w(), D();
 		};
 		e ? window.requestAnimationFrame(t) : nextTick(t);
 	}
-	function h() {
-		m();
+	function _() {
+		h();
 	}
-	function _(e) {
-		o.value = Math.max(0, Math.trunc(e)), m();
+	function v() {
+		if (!e.isSelfManagedData.value) return;
+		let t = e.containerEl.value;
+		if (!t) return;
+		let n = e.rowHeightValue.value;
+		if (!(n > 0)) return;
+		let r = Math.max(e.bytesPerRow.value, 1), i = t.scrollTop, a = Math.floor(i / n), o = e.chunkStartRow.value + a, s = Math.max(0, o * r);
+		s !== e.windowOffset.value && (u.value = s, e.windowOffset.value = s);
+	}
+	watch(() => e.windowOffset.value, (t, n) => {
+		e.isSelfManagedData.value && t !== n && t !== u.value && t != null && Number.isFinite(t) && t >= 0 && b(t);
+	});
+	function b(e) {
+		o.value = Math.max(0, Math.trunc(e)), h();
 	}
-	function v(e) {
+	function x(e) {
 		if (!Number.isFinite(e)) return;
 		let t = Math.max(0, Math.trunc(e));
-		if (!p(t)) {
-			_(t);
+		if (!m(t)) {
+			b(t);
 			return;
 		}
-		o.value = null, m();
+		o.value = null, h();
 	}
-	function b() {
+	function S() {
 		if (o.value == null) return;
 		let e = o.value;
-		p(e) && (o.value = null);
+		m(e) && (o.value = null);
 	}
-	function x() {
+	function C() {
 		let t = e.tbodyEl.value;
 		if (!t) return;
 		let n = t.querySelector("tr");
@@ -363,7 +387,7 @@ function useHexWindow(e) {
 		let r = n.getBoundingClientRect().height;
 		r > 0 && r !== e.rowHeight.value && (e.rowHeight.value = r);
 	}
-	function S() {
+	function w() {
 		let t = r.value, o = Math.max(e.bytesPerRow.value, 1), s = e.getWindowState().offset;
 		if (t.length === 0) {
 			n.value = "", a.value = Math.floor(s / o), e.clearHoverState();
@@ -384,10 +408,10 @@ function useHexWindow(e) {
 		}
 		let m = l - s, h = Math.min(t.length, m + (u - l)), g = t.subarray(m, h);
 		a.value = Math.floor(l / o);
-		let _ = e.getPrintableChecker(), v = e.getAsciiRenderer(), y = e.getSelectionRange(), b = C(g, o, e.getUppercase(), i.value, l, _, v, y, e.getCellClassResolver());
+		let _ = e.getPrintableChecker(), v = e.getAsciiRenderer(), y = e.getSelectionRange(), b = T(g, o, e.getUppercase(), i.value, l, _, v, y, e.getCellClassResolver());
 		n.value !== b && (e.clearHoverState(), n.value = b);
 	}
-	function C(e, t, n, r, i, a, o, s, c) {
+	function T(e, t, n, r, i, a, o, s, c) {
 		if (e.length === 0) return "";
 		let l = n ? HEX_UPPER : HEX_LOWER, u = t % 2 == 0, d = u ? t / 2 : -1, f = Array(t);
 		for (let e = 0; e < t; e++) {
@@ -450,7 +474,7 @@ function useHexWindow(e) {
 		}
 		return _.length = v, _.join("");
 	}
-	function w() {
+	function D() {
 		if (e.viewportRows.value === 0) return;
 		let t = e.containerEl.value;
 		if (!t) return;
@@ -458,12 +482,12 @@ function useHexWindow(e) {
 		if (n <= 0 || r <= 0) return;
 		let i = e.chunkRowCount.value;
 		if (i <= 0) return;
-		let a = e.chunkStartRow.value, o = a + i, s = e.overscanRows.value, l = t.scrollTop, f = clamp(clamp(a + Math.floor(l / n), a, Math.max(o - 1, a)) - s, a, Math.max(o - 1, a)), p = Math.max(e.viewportRows.value + s * 2, 1), m = Math.max(o - f, 0), h = Math.min(m, p);
+		let a = e.chunkStartRow.value, o = a + i, s = e.overscanRows.value, l = t.scrollTop, u = clamp(clamp(a + Math.floor(l / n), a, Math.max(o - 1, a)) - s, a, Math.max(o - 1, a)), p = Math.max(e.viewportRows.value + s * 2, 1), m = Math.max(o - u, 0), h = Math.min(m, p);
 		if (h <= 0) return;
-		let g = f * r, _ = Math.max(e.totalBytes.value - g, 0), v = Math.min(_, h * r);
+		let g = u * r, _ = Math.max(e.totalBytes.value - g, 0), v = Math.min(_, h * r);
 		if (v <= 0) return;
-		let y = f + Math.ceil(v / r), b = u.value, x = b + d.value;
-		b <= f && x >= y || c.value && c.value.offset === g && c.value.length === v || (c.value = {
+		let y = u + Math.ceil(v / r), b = d.value, x = b + f.value;
+		b <= u && x >= y || c.value && c.value.offset === g && c.value.length === v || (c.value = {
 			offset: g,
 			length: v
 		}, e.requestWindow(c.value));
@@ -473,15 +497,15 @@ function useHexWindow(e) {
 		normalizedBytes: r,
 		fallbackAsciiChar: i,
 		renderStartRow: a,
-		renderedRows: d,
-		startRow: u,
-		scheduleWindowEvaluation: m,
-		handleScroll: h,
-		scrollToByte: v,
-		queueScrollToOffset: _,
-		updateFromWindowState: f,
-		updateRenderedSlice: S,
-		measureRowHeight: x
+		renderedRows: f,
+		startRow: d,
+		scheduleWindowEvaluation: h,
+		handleScroll: _,
+		scrollToByte: x,
+		queueScrollToOffset: b,
+		updateFromWindowState: p,
+		updateRenderedSlice: w,
+		measureRowHeight: C
 	};
 }
 function useHoverLinking(e) {
@@ -755,6 +779,27 @@ function useSelection(e) {
 		selectionCount: o
 	};
 }
+function useVueHexTheme(e) {
+	let n = computed(() => normalizeThemeKey(e.theme.value)), r = computed(() => {
+		let e = n.value;
+		return !e || e === "auto" ? ["vuehex-theme-auto"] : [`vuehex-theme-${e}`];
+	}), i = computed(() => {
+		let t = ["vuehex"];
+		return t.push(...r.value), e.isExpandToContent.value && t.push("vuehex--expand-to-content"), e.selectionEnabled.value || t.push("vuehex-selection-disabled"), t;
+	}), a = computed(() => [...r.value]), o = computed(() => e.statusbar.value === "top" || e.statusbar.value === "bottom" ? e.statusbar.value : null);
+	return {
+		themeKey: n,
+		themeClass: r,
+		containerClass: i,
+		rootClassExtra: a,
+		showStatusBar: computed(() => o.value != null),
+		statusBarPlacement: o,
+		viewerClassExtra: computed(() => {
+			let e = o.value;
+			return e ? ["vuehex-viewer--with-statusbar", e === "top" ? "vuehex-viewer--statusbar-top" : "vuehex-viewer--statusbar-bottom"] : [];
+		})
+	};
+}
 var _hoisted_1$2 = { class: "vuehex-chunk-nav__header" }, _hoisted_2$2 = { class: "vuehex-chunk-nav__summary" }, _hoisted_3$1 = {
 	class: "vuehex-chunk-list",
 	role: "listbox"
@@ -824,7 +869,15 @@ var _hoisted_1$2 = { class: "vuehex-chunk-nav__header" }, _hoisted_2$2 = { class
 			select: () => S(e.index)
 		}, () => [createElementVNode("span", _hoisted_5$1, toDisplayString(e.label), 1), createElementVNode("span", _hoisted_6$1, toDisplayString(e.range), 1)])], 10, _hoisted_4$1))), 128))])], 2)) : createCommentVNode("", !0), createElementVNode("div", { class: normalizeClass(y.value) }, [renderSlot(t.$slots, "default")], 2)], 2));
 	}
-}), VUEHEX_CATEGORY_DIGIT_CLASS = "vuehex-category-digit", VUEHEX_CATEGORY_UPPERCASE_CLASS = "vuehex-category-uppercase", VUEHEX_CATEGORY_LOWERCASE_CLASS = "vuehex-category-lowercase", VUEHEX_CATEGORY_NULL_CLASS = "vuehex-category-null", VUEHEX_CATEGORY_ERASED_CLASS = "vuehex-category-erased", VUEHEX_CATEGORY_CONTROL_CLASS = "vuehex-category-control", VUEHEX_CATEGORY_HIGHBIT_CLASS = "vuehex-category-highbit";
+});
+const VUE_HEX_BUILTIN_THEME_KEYS = [
+	"auto",
+	"light",
+	"dark",
+	"terminal",
+	"sunset"
+];
+var VUEHEX_CATEGORY_DIGIT_CLASS = "vuehex-category-digit", VUEHEX_CATEGORY_UPPERCASE_CLASS = "vuehex-category-uppercase", VUEHEX_CATEGORY_LOWERCASE_CLASS = "vuehex-category-lowercase", VUEHEX_CATEGORY_NULL_CLASS = "vuehex-category-null", VUEHEX_CATEGORY_ERASED_CLASS = "vuehex-category-erased", VUEHEX_CATEGORY_CONTROL_CLASS = "vuehex-category-control", VUEHEX_CATEGORY_HIGHBIT_CLASS = "vuehex-category-highbit";
 const DEFAULT_ASCII_CATEGORY_CELL_CLASS_RESOLVER = ({ byte: e }) => {
 	if (e >= 48 && e <= 57) return VUEHEX_CATEGORY_DIGIT_CLASS;
 	if (e >= 65 && e <= 90) return VUEHEX_CATEGORY_UPPERCASE_CLASS;
@@ -970,34 +1023,34 @@ var _hoisted_1$1 = { class: "vuehex-statusbar__section vuehex-statusbar__section
 			let n = e[t];
 			return typeof n == "number" && Number.isFinite(n) ? n : null;
 		}
-		function pe(e, t) {
+		function N(e, t) {
 			if (e === null) return "";
 			if (A(t, "format") === "decimal") return String(Math.max(0, Math.trunc(e)));
 			let n = !!o.uppercase, r = Math.max(0, Math.trunc(M(t, "pad") ?? 0)), i = Math.max(0, Math.trunc(e)).toString(16), a = (n ? i.toUpperCase() : i).padStart(r, "0");
 			return j(t, "prefix") ?? !0 ? `0x${a}` : a;
 		}
-		function N(e, t) {
+		function P(e, t) {
 			return e ? j(t, "prefix") ? `0x${e}` : e : "";
 		}
-		function P(e, t) {
+		function F(e, t) {
 			return e ? j(t, "quote") ? `'${e}'` : e : "";
 		}
-		function F(e) {
+		function I(e) {
 			return e === "left" ? "statusbar-left" : e === "middle" ? "statusbar-middle" : "statusbar-right";
 		}
-		function me(e) {
+		function L(e) {
 			return e === "slot" ? null : e === "offset" ? "10ch" : e === "hex" ? "4ch" : e === "ascii" ? "3ch" : null;
 		}
-		function I(e, t) {
+		function R(e, t) {
 			if (e === "slot") return;
-			let n = A(t, "valueWidth"), r = A(t, "valueMinWidth"), i = me(e), a = {};
+			let n = A(t, "valueWidth"), r = A(t, "valueMinWidth"), i = L(e), a = {};
 			return n && (a.width = n), r ? a.minWidth = r : !n && i && (a.minWidth = i), (a.width || a.minWidth) && (a.whiteSpace = "nowrap", a.overflow = "hidden", a.textOverflow = "ellipsis"), Object.keys(a).length ? a : void 0;
 		}
-		function L(e, t, n) {
+		function z(e, t, n) {
 			let r = e.name.trim();
 			if (!k(r)) return null;
 			if (r === "slot") {
-				let e = F(t);
+				let e = I(t);
 				return {
 					kind: "slot",
 					key: n,
@@ -1011,27 +1064,27 @@ var _hoisted_1$1 = { class: "vuehex-statusbar__section vuehex-statusbar__section
 				key: n,
 				name: r,
 				label: i,
-				value: pe(d.value, e.config),
+				value: N(d.value, e.config),
 				visible: !0,
-				valueStyle: I(r, e.config)
+				valueStyle: R(r, e.config)
 			};
 			if (r === "hex") return {
 				kind: "builtin",
 				key: n,
 				name: r,
 				label: i,
-				value: N(p.value, e.config),
+				value: P(p.value, e.config),
 				visible: !0,
-				valueStyle: I(r, e.config)
+				valueStyle: R(r, e.config)
 			};
 			if (r === "ascii") return {
 				kind: "builtin",
 				key: n,
 				name: r,
 				label: i,
-				value: P(m.value, e.config),
+				value: F(m.value, e.config),
 				visible: !0,
-				valueStyle: I(r, e.config)
+				valueStyle: R(r, e.config)
 			};
 			let a = y.value;
 			return {
@@ -1041,16 +1094,16 @@ var _hoisted_1$1 = { class: "vuehex-statusbar__section vuehex-statusbar__section
 				label: i,
 				value: a,
 				visible: j(e.config, "showWhenEmpty") ? !0 : !!a,
-				valueStyle: I(r, e.config)
+				valueStyle: R(r, e.config)
 			};
 		}
-		function R(e) {
-			return O.value[e].map((t, n) => L(t, e, `${e}-${n}`)).filter((e) => e !== null);
+		function B(e) {
+			return O.value[e].map((t, n) => z(t, e, `${e}-${n}`)).filter((e) => e !== null);
 		}
-		let z = computed(() => ({
-			left: R("left"),
-			middle: R("middle"),
-			right: R("right")
+		let V = computed(() => ({
+			left: B("left"),
+			middle: B("middle"),
+			right: B("right")
 		}));
 		return (t, n) => (openBlock(), createElementBlock("div", {
 			class: normalizeClass(x.value),
@@ -1058,21 +1111,21 @@ var _hoisted_1$1 = { class: "vuehex-statusbar__section vuehex-statusbar__section
 			role: "status",
 			"aria-live": "polite"
 		}, [
-			createElementVNode("div", _hoisted_1$1, [(openBlock(!0), createElementBlock(Fragment, null, renderList(z.value.left, (n) => withDirectives((openBlock(), createElementBlock("span", {
+			createElementVNode("div", _hoisted_1$1, [(openBlock(!0), createElementBlock(Fragment, null, renderList(V.value.left, (n) => withDirectives((openBlock(), createElementBlock("span", {
 				key: n.key,
 				class: "vuehex-statusbar__item"
 			}, [n.kind === "slot" ? renderSlot(t.$slots, n.slotName, { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_2$1, toDisplayString(n.label), 1), createElementVNode("span", {
 				class: "vuehex-statusbar__value",
 				style: normalizeStyle(n.valueStyle)
 			}, toDisplayString(n.value), 5)], 64))])), [[vShow, n.visible]])), 128))]),
-			createElementVNode("div", _hoisted_3, [(openBlock(!0), createElementBlock(Fragment, null, renderList(z.value.middle, (n) => withDirectives((openBlock(), createElementBlock("span", {
+			createElementVNode("div", _hoisted_3, [(openBlock(!0), createElementBlock(Fragment, null, renderList(V.value.middle, (n) => withDirectives((openBlock(), createElementBlock("span", {
 				key: n.key,
 				class: "vuehex-statusbar__item"
 			}, [n.kind === "slot" ? renderSlot(t.$slots, n.slotName, { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_4, toDisplayString(n.label), 1), createElementVNode("span", {
 				class: "vuehex-statusbar__value",
 				style: normalizeStyle(n.valueStyle)
 			}, toDisplayString(n.value), 5)], 64))])), [[vShow, n.visible]])), 128))]),
-			createElementVNode("div", _hoisted_5, [(openBlock(!0), createElementBlock(Fragment, null, renderList(z.value.right, (n) => withDirectives((openBlock(), createElementBlock("span", {
+			createElementVNode("div", _hoisted_5, [(openBlock(!0), createElementBlock(Fragment, null, renderList(V.value.right, (n) => withDirectives((openBlock(), createElementBlock("span", {
 				key: n.key,
 				class: "vuehex-statusbar__item"
 			}, [n.kind === "slot" ? renderSlot(t.$slots, n.slotName, { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_6, toDisplayString(n.label), 1), createElementVNode("span", {
@@ -1081,7 +1134,25 @@ var _hoisted_1$1 = { class: "vuehex-statusbar__section vuehex-statusbar__section
 			}, toDisplayString(n.value), 5)], 64))])), [[vShow, n.visible]])), 128))])
 		], 6));
 	}
-}), _hoisted_1 = ["aria-disabled", "tabindex"], _hoisted_2 = ["innerHTML"], DEFAULT_ROW_HEIGHT = 24, MAX_VIRTUAL_HEIGHT = 8e6, VueHex_default = /* @__PURE__ */ defineComponent({
+});
+function normalizeCellClassForByteResolver(e) {
+	if (e === void 0) return DEFAULT_ASCII_CATEGORY_CELL_CLASS_RESOLVER;
+	if (e !== null) {
+		if (typeof e == "function") return e;
+		if (Array.isArray(e)) {
+			let t = e.filter((e) => typeof e == "function");
+			return t.length === 0 ? void 0 : (e) => {
+				let n = [];
+				for (let r of t) {
+					let t = r(e);
+					t != null && n.push(t);
+				}
+				if (n.length !== 0) return n.flat();
+			};
+		}
+	}
+}
+var _hoisted_1 = ["aria-disabled", "tabindex"], _hoisted_2 = ["innerHTML"], DEFAULT_ROW_HEIGHT = 24, MAX_VIRTUAL_HEIGHT = 8e6, VueHex_default = /* @__PURE__ */ defineComponent({
 	__name: "VueHex",
 	props: /* @__PURE__ */ mergeModels({
 		dataMode: { default: "auto" },
@@ -1143,12 +1214,12 @@ var _hoisted_1$1 = { class: "vuehex-statusbar__section vuehex-statusbar__section
 		"update:cursorLocation"
 	]),
 	setup(e, { expose: i, emit: o }) {
-		let c = useModel(e, "windowOffset"), l = useModel(e, "modelValue"), _ = useModel(e, "cursorLocation"), y = e, b = o, w = computed(() => !!y.expandToContent), T = computed(() => w.value ? 0 : Math.max(0, Math.trunc(c.value ?? 0))), fe = computed(() => l.value?.length ?? 0), { isWindowed: O, isSelfManaged: k } = useDataMode({
+		let c = useModel(e, "windowOffset"), l = useModel(e, "modelValue"), _ = useModel(e, "cursorLocation"), y = e, b = o, w = computed(() => !!y.expandToContent), T = computed(() => w.value ? 0 : Math.max(0, Math.trunc(c.value ?? 0))), pe = computed(() => l.value?.length ?? 0), { isWindowed: O, isSelfManaged: k } = useDataMode({
 			dataMode: toRef(y, "dataMode"),
 			isExpandToContent: w,
 			windowOffset: T,
 			totalSize: toRef(y, "totalSize"),
-			dataLength: fe
+			dataLength: pe
 		}), j = computed(() => ({
 			offset: k.value ? 0 : T.value,
 			data: l.value
@@ -1156,136 +1227,96 @@ var _hoisted_1$1 = { class: "vuehex-statusbar__section vuehex-statusbar__section
 			if (w.value) return j.value.data.length;
 			let e = y.totalSize;
 			return typeof e == "number" && Number.isFinite(e) ? Math.max(0, Math.trunc(e)) : j.value.data.length;
-		}), pe = computed(() => O.value), N = computed(() => !!y.uppercase), P = computed(() => y.isPrintable ?? DEFAULT_PRINTABLE_CHECK), F = computed(() => y.renderAscii ?? DEFAULT_ASCII_RENDERER), L = computed(() => y.nonPrintableChar ?? "."), B = computed(() => w.value ? Infinity : MAX_VIRTUAL_HEIGHT), V = ref(), H = ref(), he = ref(null), U = ref(0), W = computed(() => clampBytesPerRow(y.bytesPerRow)), G = computed(() => he.value ?? DEFAULT_ROW_HEIGHT), K = computed(() => w.value || U.value <= 0 ? 0 : Math.max(1, Math.ceil(U.value / G.value))), q = computed(() => Math.max(0, Math.trunc(y.overscan))), ge = computed(() => {
-			let e = normalizeThemeKey(y.theme);
-			return e ? [
-				"default",
-				"deep-space",
-				"deep_space",
-				"deepspace",
-				"dark-mode",
-				"darkmode"
-			].includes(e) ? "dark" : [
-				"light",
-				"daylight",
-				"light-mode",
-				"lightmode"
-			].includes(e) ? "light" : e : null;
-		}), J = computed(() => {
-			let e = ge.value;
-			return !e || e === "auto" ? ["vuehex-theme-auto"] : [`vuehex-theme-${e}`];
-		}), _e = computed(() => {
-			let e = ["vuehex"];
-			return e.push(...J.value), w.value && e.push("vuehex--expand-to-content"), He.value || e.push("vuehex-selection-disabled"), e;
-		}), ve = computed(() => ["vuehex-table"]), { chunkStartRow: Y, activeChunkIndex: ye, chunkRowCount: be, chunkHeight: xe, chunkItems: Se, clampChunkStartToBounds: Ce, ensureChunkForRow: we, selectChunk: Te } = useChunking({
+		}), N = computed(() => O.value), P = computed(() => !!y.uppercase), F = computed(() => y.isPrintable ?? DEFAULT_PRINTABLE_CHECK), I = computed(() => y.renderAscii ?? DEFAULT_ASCII_RENDERER), L = computed(() => y.nonPrintableChar ?? "."), z = computed(() => w.value ? Infinity : MAX_VIRTUAL_HEIGHT), H = ref(), U = ref(), W = ref(null), G = ref(0), K = computed(() => clampBytesPerRow(y.bytesPerRow)), q = computed(() => W.value ?? DEFAULT_ROW_HEIGHT), J = computed(() => w.value || G.value <= 0 ? 0 : Math.max(1, Math.ceil(G.value / q.value))), me = computed(() => Math.max(0, Math.trunc(y.overscan))), he = computed(() => ["vuehex-table"]), { chunkStartRow: Y, activeChunkIndex: ge, chunkRowCount: _e, chunkHeight: ve, chunkItems: ye, clampChunkStartToBounds: be, ensureChunkForRow: xe, selectChunk: Se } = useChunking({
 			showNavigator: computed(() => !!y.showChunkNavigator),
 			totalBytes: M,
-			bytesPerRow: W,
-			rowHeightValue: G,
-			maxVirtualHeight: B,
-			uppercase: N
-		}), Ee = computed(() => [...J.value]), De = computed(() => y.statusbar === "top" || y.statusbar === "bottom"), Oe = computed(() => y.statusbar === "top" ? "top" : "bottom"), ke = computed(() => {
-			let e = [];
-			return De.value && (e.push("vuehex-viewer--with-statusbar"), e.push(Oe.value === "top" ? "vuehex-viewer--statusbar-top" : "vuehex-viewer--statusbar-bottom")), e;
-		}), Ae = ref(null), { handlePointerOver: je, handlePointerOut: Me, clearHoverState: Ne } = useHoverLinking({
+			bytesPerRow: K,
+			rowHeightValue: q,
+			maxVirtualHeight: z,
+			uppercase: P
+		}), Ce = ref(null), { handlePointerOver: we, handlePointerOut: Te, clearHoverState: Ee } = useHoverLinking({
 			emit: (e, t) => {
-				Ae.value?.handleHoverEvent(e, t), b(e, t);
+				Ce.value?.handleHoverEvent(e, t), b(e, t);
 			},
-			tbodyEl: H
-		}), Pe = computed(() => {
-			let e = y.cellClassForByte;
-			if (e === void 0) return DEFAULT_ASCII_CATEGORY_CELL_CLASS_RESOLVER;
-			if (e !== null) {
-				if (typeof e == "function") return e;
-				if (Array.isArray(e)) {
-					let t = e.filter((e) => typeof e == "function");
-					return t.length === 0 ? void 0 : (e) => {
-						let n = [];
-						for (let r of t) {
-							let t = r(e);
-							t != null && n.push(t);
-						}
-						if (n.length !== 0) return n.flat();
-					};
-				}
-			}
-		}), { markup: X, renderStartRow: Fe, scheduleWindowEvaluation: Z, handleScroll: Ie, scrollToByte: Le, queueScrollToOffset: Re, updateFromWindowState: ze, updateRenderedSlice: Be, measureRowHeight: Ve } = useHexWindow({
-			containerEl: V,
-			tbodyEl: H,
-			bytesPerRow: W,
-			rowHeight: he,
-			rowHeightValue: G,
-			viewportRows: K,
-			overscanRows: q,
+			tbodyEl: U
+		}), De = computed(() => normalizeCellClassForByteResolver(y.cellClassForByte)), X = ref(null), { markup: Z, renderStartRow: Oe, scheduleWindowEvaluation: Q, handleScroll: ke, scrollToByte: Ae, queueScrollToOffset: je, updateFromWindowState: Me, updateRenderedSlice: Ne, measureRowHeight: Pe } = useHexWindow({
+			containerEl: H,
+			tbodyEl: U,
+			bytesPerRow: K,
+			rowHeight: W,
+			rowHeightValue: q,
+			viewportRows: J,
+			overscanRows: me,
 			chunkStartRow: Y,
-			chunkRowCount: be,
+			chunkRowCount: _e,
 			totalBytes: M,
-			ensureChunkForRow: we,
-			clampChunkStartToBounds: Ce,
+			isSelfManagedData: k,
+			windowOffset: c,
+			ensureChunkForRow: xe,
+			clampChunkStartToBounds: be,
 			getWindowState: () => j.value,
-			getUppercase: () => N.value,
-			getPrintableChecker: () => P.value,
-			getAsciiRenderer: () => F.value,
-			getCellClassResolver: () => Pe.value,
+			getUppercase: () => P.value,
+			getPrintableChecker: () => F.value,
+			getAsciiRenderer: () => I.value,
+			getCellClassResolver: () => De.value,
 			getNonPrintableChar: () => L.value,
-			getSelectionRange: () => Q.value,
+			getSelectionRange: () => Ie.value,
 			requestWindow: (e) => {
-				pe.value && (c.value = e.offset, b("updateVirtualData", e));
+				N.value && (X.value = e.offset, c.value = e.offset, b("updateVirtualData", e));
 			},
-			clearHoverState: Ne
-		}), { selectionEnabled: He, selectionRange: Q, selectionCount: Ue } = useSelection({
-			containerEl: V,
-			tbodyEl: H,
-			markup: X,
+			clearHoverState: Ee
+		}), { selectionEnabled: Fe, selectionRange: Ie, selectionCount: Le } = useSelection({
+			containerEl: H,
+			tbodyEl: U,
+			markup: Z,
 			getSelectionDataProp: () => y.getSelectionData,
 			isSelfManagedData: k,
 			totalBytes: M,
 			getSelfManagedBytes: () => j.value.data,
-			getUppercase: () => N.value,
-			getPrintableChecker: () => P.value,
-			getAsciiRenderer: () => F.value,
+			getUppercase: () => P.value,
+			getPrintableChecker: () => F.value,
+			getAsciiRenderer: () => I.value,
 			getNonPrintableChar: () => L.value,
-			updateRenderedSlice: Be,
+			updateRenderedSlice: Ne,
 			emitByteClick: (e) => b("byte-click", e),
 			emitSelectionChange: (e) => b("selection-change", e)
-		}), We = computed(() => !!y.cursor);
+		}), { containerClass: Re, rootClassExtra: ze, showStatusBar: Be, statusBarPlacement: Ve, viewerClassExtra: He } = useVueHexTheme({
+			theme: toRef(y, "theme"),
+			isExpandToContent: w,
+			selectionEnabled: Fe,
+			statusbar: toRef(y, "statusbar")
+		}), Ue = computed(() => !!y.cursor);
 		useCursor({
-			enabled: We,
+			enabled: Ue,
 			isExpandToContent: w,
-			containerEl: V,
-			tbodyEl: H,
-			markup: X,
+			containerEl: H,
+			tbodyEl: U,
+			markup: Z,
 			totalBytes: M,
-			bytesPerRow: W,
-			rowHeightValue: G,
-			viewportRows: K,
+			bytesPerRow: K,
+			rowHeightValue: q,
+			viewportRows: J,
 			chunkStartRow: Y,
-			ensureChunkForRow: we,
-			scheduleWindowEvaluation: Z,
+			ensureChunkForRow: xe,
+			scheduleWindowEvaluation: Q,
 			cursorLocation: _,
-			scrollToByte: Le
+			scrollToByte: Ae
 		});
-		let Ge = computed(() => He.value || We.value);
-		function Ke() {
-			if (!w.value && (Ie(), k.value)) {
-				let e = V.value;
-				if (e) {
-					let t = e.scrollTop, n = Math.floor(t / G.value), r = (Y.value + n) * W.value;
-					r !== c.value && (c.value = r);
-				}
-			}
+		let We = computed(() => Fe.value || Ue.value);
+		function Ge() {
+			w.value || ke();
 		}
-		let qe = computed(() => w.value ? 0 : (Fe.value - Y.value) * G.value), Je = computed(() => ({
+		let Ke = computed(() => w.value ? 0 : (Oe.value - Y.value) * q.value), qe = computed(() => ({
 			position: "relative",
 			width: "100%",
-			...w.value ? {} : { height: `${Math.max(xe.value, 0)}px` }
-		})), Ye = computed(() => {
+			...w.value ? {} : { height: `${Math.max(ve.value, 0)}px` }
+		})), Je = computed(() => {
 			if (w.value) return {
 				position: "static",
 				width: "100%",
 				transform: "none"
 			};
-			let e = qe.value;
+			let e = Ke.value;
 			return {
 				position: "absolute",
 				top: "0px",
@@ -1295,74 +1326,74 @@ var _hoisted_1$1 = { class: "vuehex-statusbar__section vuehex-statusbar__section
 				transform: Number.isFinite(e) ? `translateY(${e}px)` : "translateY(0px)"
 			};
 		});
-		function Xe(e) {
-			if (!Te(e)) return;
-			let t = V.value;
-			t && (t.scrollTop = 0), k.value && (c.value = Y.value * W.value), Z();
+		function Ye(e) {
+			if (!Se(e)) return;
+			let t = H.value;
+			t && (t.scrollTop = 0), k.value && (c.value = Y.value * K.value), Q();
 		}
 		watch(() => ({
 			data: j.value.data,
 			offset: j.value.offset,
-			bytesPerRow: W.value,
+			bytesPerRow: K.value,
 			uppercase: y.uppercase,
 			nonPrintableChar: y.nonPrintableChar,
 			isPrintable: y.isPrintable,
 			renderAscii: y.renderAscii,
-			cellClassForByte: Pe.value
+			cellClassForByte: De.value
 		}), () => {
-			ze();
+			Me();
 		}, { immediate: !0 }), watch(() => c.value, (e, t) => {
-			e !== t && e != null && Number.isFinite(e) && e >= 0 && Re(e);
+			e !== t && (k.value || X.value != null && e === X.value || e != null && Number.isFinite(e) && e >= 0 && je(e));
 		}), watch([
 			M,
-			W,
 			K,
-			q,
-			B,
+			J,
+			me,
+			z,
 			Y
 		], () => {
-			Ce(), Z();
+			be(), Q();
 		});
 		let $ = null;
 		return onMounted(() => {
-			let e = V.value;
-			e && (U.value = e.clientHeight, $ = new ResizeObserver((e) => {
+			let e = H.value;
+			e && (G.value = e.clientHeight, $ = new ResizeObserver((e) => {
 				let t = e[0];
-				t && (U.value = t.contentRect.height, Z(), Ve());
+				t && (G.value = t.contentRect.height, Q(), Pe());
 			}), $.observe(e));
-			let t = H.value;
-			t && (t.addEventListener("pointerover", je), t.addEventListener("pointerout", Me)), Re(j.value.offset);
+			let t = U.value;
+			t && (t.addEventListener("pointerover", we), t.addEventListener("pointerout", Te)), je(j.value.offset);
 		}), onBeforeUnmount(() => {
 			$?.disconnect(), $ = null;
-			let e = H.value;
-			e && (e.removeEventListener("pointerover", je), e.removeEventListener("pointerout", Me)), Ne();
+			let e = U.value;
+			e && (e.removeEventListener("pointerover", we), e.removeEventListener("pointerout", Te)), Ee();
 		}), i({
-			scrollToByte: Le,
-			selectChunk: Te
+			scrollToByte: Ae,
+			selectChunk: Se
 		}), (e, t) => (openBlock(), createBlock(VueHexChunkNavigator_default, {
 			show: y.showChunkNavigator,
 			placement: y.chunkNavigatorPlacement,
-			chunks: unref(Se),
-			"active-index": unref(ye),
-			"root-class-extra": Ee.value,
-			"viewer-class-extra": ke.value,
+			chunks: unref(ye),
+			"active-index": unref(ge),
+			"root-class-extra": unref(ze),
+			"viewer-class-extra": unref(He),
 			"expand-to-content": w.value,
-			onSelect: Xe
+			onSelect: Ye
 		}, {
 			"chunk-navigator-header": withCtx((t) => [renderSlot(e.$slots, "chunk-navigator-header", normalizeProps(guardReactiveProps(t)))]),
 			"chunk-navigator-item": withCtx((t) => [renderSlot(e.$slots, "chunk-navigator-item", normalizeProps(guardReactiveProps(t)))]),
-			default: withCtx(() => [De.value ? (openBlock(), createBlock(VueHexStatusBar_default, {
+			default: withCtx(() => [unref(Be) ? (openBlock(), createBlock(VueHexStatusBar_default, {
 				key: 0,
 				ref_key: "statusBarRef",
-				ref: Ae,
-				placement: Oe.value,
+				ref: Ce,
+				placement: unref(Ve) ?? "bottom",
 				layout: y.statusbarLayout,
 				uppercase: y.uppercase,
 				"is-printable": y.isPrintable,
 				"render-ascii": y.renderAscii,
 				"non-printable-char": y.nonPrintableChar,
-				"selection-range": unref(Q),
-				"selection-count": unref(Ue)
+				"selection-range": unref(Ie),
+				"selection-count": unref(Le)
 			}, {
 				"statusbar-left": withCtx(() => [renderSlot(e.$slots, "statusbar-left")]),
 				"statusbar-middle": withCtx(() => [renderSlot(e.$slots, "statusbar-middle")]),
@@ -1379,25 +1410,25 @@ var _hoisted_1$1 = { class: "vuehex-statusbar__section vuehex-statusbar__section
 				"selection-count"
 			])) : createCommentVNode("", !0), createElementVNode("div", {
 				ref_key: "containerEl",
-				ref: V,
-				class: normalizeClass(_e.value),
+				ref: H,
+				class: normalizeClass(unref(Re)),
 				role: "table",
 				"aria-label": "Hex viewer",
-				"aria-disabled": Ge.value ? void 0 : "true",
-				tabindex: Ge.value ? 0 : void 0,
-				onScroll: Ke
+				"aria-disabled": We.value ? void 0 : "true",
+				tabindex: We.value ? 0 : void 0,
+				onScroll: Ge
 			}, [createElementVNode("div", {
 				class: "vuehex-inner",
-				style: normalizeStyle(Je.value),
+				style: normalizeStyle(qe.value),
 				role: "presentation"
 			}, [createElementVNode("table", {
-				class: normalizeClass(ve.value),
-				style: normalizeStyle(Ye.value),
+				class: normalizeClass(he.value),
+				style: normalizeStyle(Je.value),
 				role: "presentation"
 			}, [createElementVNode("tbody", {
 				ref_key: "tbodyEl",
-				ref: H,
-				innerHTML: unref(X)
+				ref: U,
+				innerHTML: unref(Z)
 			}, null, 8, _hoisted_2)], 6)], 4)], 42, _hoisted_1)]),
 			_: 3
 		}, 8, [
@@ -1416,4 +1447,4 @@ function install(e, t = {}) {
 	e.component(n, VueHex_default);
 }
 var src_default = { install };
-export { DEFAULT_ASCII_CATEGORY_CELL_CLASS_RESOLVER, DEFAULT_ASCII_RENDERER, DEFAULT_PRINTABLE_CHECK, VUE_HEX_ASCII_PRESETS, VueHex_default as VueHex, src_default as default, install };
+export { DEFAULT_ASCII_CATEGORY_CELL_CLASS_RESOLVER, DEFAULT_ASCII_RENDERER, DEFAULT_PRINTABLE_CHECK, VUE_HEX_ASCII_PRESETS, VUE_HEX_BUILTIN_THEME_KEYS, VueHex_default as VueHex, src_default as default, install };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vuehex",
-	"version": "0.5.6",
+	"version": "0.5.8",
 	"private": false,
 	"description": "A fast and flexible Vue 3 component for displaying binary data as a hexadecimal view",
 	"author": "Vincent Vollers",