@mantine-vue/code-highlight 3.4.0 → 3.6.0

package/esm/index.mjs

@@ -1,5 +1,5 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useSlots, watch, watchEffect, withCtx } from "vue";
-import { ActionIcon, Box, ScrollArea, Tooltip, UnstyledButton, createSafeContext, createVarsResolver, getRadius, getThemeColor, rem, useMantineContext, useProps, useStyles } from "@mantine-vue/core";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, mergeProps, nextTick, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, unref, useAttrs, useSlots, watch, watchEffect, withCtx, withModifiers } from "vue";
+import { ActionIcon, Box, ScrollArea, Tooltip, UnstyledButton, createSafeContext, createVarsResolver, factory, getFontSize, getRadius, getThemeColor, rem, useMantineContext, useProps, useStyles } from "@mantine-vue/core";
 import { useClipboard, useUncontrolled } from "@mantine-vue/hooks";
 //#region src/CodeHighlightProvider/adapters/plain-text-adapter.ts
 var plainTextAdapter = { getHighlighter: () => ({ code }) => ({
@@ -8,7 +8,7 @@ var plainTextAdapter = { getHighlighter: () => ({ code }) => ({
 }) };
 //#endregion
 //#region src/CodeHighlightProvider/CodeHighlightAdapterProvider.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = { style: { "display": "contents" } };
+var _hoisted_1$3 = { style: { "display": "contents" } };
 //#endregion
 //#region src/CodeHighlightProvider/CodeHighlightAdapterProvider.vue
 var CodeHighlightAdapterProvider_default = /* @__PURE__ */ defineComponent({
@@ -63,7 +63,7 @@ var CodeHighlightAdapterProvider_default = /* @__PURE__ */ defineComponent({
 			isLanguageLoaded: (language) => !language || !props.adapter.loadLanguage || loadedLanguages.value.includes(language)
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")]);
+			return openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "default")]);
 		};
 	}
 });
@@ -89,7 +89,7 @@ var CodeHighlightAdapterProvider = CodeHighlightAdapterProvider_default;
 //#region src/normalize-code.ts
 /** Removes blank leading lines and trailing whitespace before highlighting or copying code. */
 function normalizeCode(code, { withFirstLineIndentation } = {}) {
-	return withFirstLineIndentation ? code.replace(/^(?:[^\S\r\n]*\r?\n)+|\s+$/g, "") : code.trim();
+	return withFirstLineIndentation ? code.replace(/^(?:[^\S\r\n]*\r?\n)+/, "").trimEnd() : code.trim();
 }
 //#endregion
 //#region src/CodeHighlight/CodeHighlight.context.ts
@@ -289,13 +289,13 @@ var CodeHighlight_module_default = {
 };
 //#endregion
 //#region src/CodeHighlight/CodeHighlight.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-with-border", "innerHTML"];
-var _hoisted_2 = ["data-with-border"];
-var _hoisted_3 = ["data-with-offset"];
-var _hoisted_4 = ["data-with-offset"];
-var _hoisted_5 = ["data-with-offset"];
-var _hoisted_6 = ["innerHTML"];
-var varsResolver$1 = createVarsResolver((theme, { maxCollapsedHeight, background, radius }) => ({ codeHighlight: {
+var _hoisted_1$2 = ["data-with-border", "innerHTML"];
+var _hoisted_2$2 = ["data-with-border"];
+var _hoisted_3$1 = ["data-with-offset"];
+var _hoisted_4$1 = ["data-with-offset"];
+var _hoisted_5$1 = ["data-with-offset"];
+var _hoisted_6$1 = ["innerHTML"];
+var varsResolver$2 = createVarsResolver((theme, { maxCollapsedHeight, background, radius }) => ({ codeHighlight: {
 	"--ch-max-height": rem(maxCollapsedHeight),
 	"--ch-background": background ? getThemeColor(background, theme) : void 0,
 	"--ch-radius": typeof radius !== "undefined" ? getRadius(radius) : void 0
@@ -371,13 +371,12 @@ var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 			name: props.__staticSelector || "CodeHighlight",
 			classes: CodeHighlight_module_default,
 			props,
-			className: attrs.class,
-			style: attrs.style,
+			attrs,
 			classNames: props.classNames,
 			styles: props.styles,
 			vars: props.vars,
 			unstyled: props.unstyled,
-			varsResolver: varsResolver$1,
+			varsResolver: varsResolver$2,
 			rootSelector: "codeHighlight"
 		});
 		const [expanded, setExpanded] = useUncontrolled({
@@ -430,14 +429,14 @@ var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 			}, {
 				"data-with-border": unref(props).withBorder || void 0,
 				innerHTML: highlighted.value.highlightedCode
-			}), null, 16, _hoisted_1)) : unref(props).__inline ? (openBlock(), createElementBlock("code", mergeProps({ key: 1 }, {
+			}), null, 16, _hoisted_1$2)) : unref(props).__inline ? (openBlock(), createElementBlock("code", mergeProps({ key: 1 }, {
 				...unref(attrs),
 				...highlighted.value.codeElementProps,
 				...unref(getStyles)("codeHighlight", {
 					className: [highlighted.value.codeElementProps?.class, unref(attrs).class],
 					style: [highlighted.value.codeElementProps?.style, unref(attrs).style]
 				})
-			}, { "data-with-border": unref(props).withBorder || void 0 }), toDisplayString(normalizedCode.value), 17, _hoisted_2)) : (openBlock(), createBlock(unref(Box), mergeProps({ key: 2 }, {
+			}, { "data-with-border": unref(props).withBorder || void 0 }), toDisplayString(normalizedCode.value), 17, _hoisted_2$2)) : (openBlock(), createBlock(unref(Box), mergeProps({ key: 2 }, {
 				...unref(attrs),
 				...unref(getStyles)("codeHighlight")
 			}, {
@@ -470,7 +469,7 @@ var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 							"copied-label",
 							"copy-label"
 						])) : createCommentVNode("", true)
-					], 16, _hoisted_3)) : createCommentVNode("", true),
+					], 16, _hoisted_3$1)) : createCommentVNode("", true),
 					createVNode(unref(ScrollArea), mergeProps({
 						type: "hover",
 						"scrollbar-size": 4,
@@ -481,19 +480,19 @@ var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 					}, unref(getStyles)("scrollarea")), {
 						default: withCtx(() => [createElementVNode("div", normalizeProps(guardReactiveProps(unref(getStyles)("codeWrapper"))), [unref(props).withLineNumbers ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, unref(getStyles)("lineNumbers"), { "data-with-offset": unref(props).__withOffset || void 0 }), [(openBlock(true), createElementBlock(Fragment, null, renderList(lineNumbers.value, (line) => {
 							return openBlock(), createElementBlock("div", { key: line }, toDisplayString(line), 1);
-						}), 128))], 16, _hoisted_4)) : createCommentVNode("", true), createElementVNode("pre", mergeProps(unref(getStyles)("pre"), { "data-with-offset": unref(props).__withOffset || void 0 }), [highlighted.value.isHighlighted ? (openBlock(), createElementBlock("code", mergeProps({ key: 0 }, {
+						}), 128))], 16, _hoisted_4$1)) : createCommentVNode("", true), createElementVNode("pre", mergeProps(unref(getStyles)("pre"), { "data-with-offset": unref(props).__withOffset || void 0 }), [highlighted.value.isHighlighted ? (openBlock(), createElementBlock("code", mergeProps({ key: 0 }, {
 							...highlighted.value.codeElementProps,
 							...unref(getStyles)("code", {
 								className: highlighted.value.codeElementProps?.class,
 								style: highlighted.value.codeElementProps?.style
 							})
-						}, { innerHTML: highlighted.value.highlightedCode }), null, 16, _hoisted_6)) : (openBlock(), createElementBlock("code", normalizeProps(mergeProps({ key: 1 }, {
+						}, { innerHTML: highlighted.value.highlightedCode }), null, 16, _hoisted_6$1)) : (openBlock(), createElementBlock("code", normalizeProps(mergeProps({ key: 1 }, {
 							...highlighted.value.codeElementProps,
 							...unref(getStyles)("code", {
 								className: highlighted.value.codeElementProps?.class,
 								style: highlighted.value.codeElementProps?.style
 							})
-						})), toDisplayString(normalizedCode.value), 17))], 16, _hoisted_5)], 16)]),
+						})), toDisplayString(normalizedCode.value), 17))], 16, _hoisted_5$1)], 16)]),
 						_: 1
 					}, 16, ["data-collapsed"]),
 					createVNode(unref(UnstyledButton), mergeProps(unref(getStyles)("showCodeButton"), {
@@ -514,12 +513,12 @@ var CodeHighlight_default = /* @__PURE__ */ defineComponent({
 //#region src/CodeHighlight/CodeHighlight.ts
 var CodeHighlight = Object.assign(CodeHighlight_default, {
 	classes: CodeHighlight_module_default,
-	varsResolver: varsResolver$1,
+	varsResolver: varsResolver$2,
 	Control: CodeHighlightControl_default
 });
 //#endregion
 //#region src/CodeHighlight/InlineCodeHighlight.vue?vue&type=script&setup=true&lang.ts
-var varsResolver = createVarsResolver((theme, { background, radius }) => ({ inlineCodeHighlight: {
+var varsResolver$1 = createVarsResolver((theme, { background, radius }) => ({ inlineCodeHighlight: {
 	"--ch-background": background ? getThemeColor(background, theme) : void 0,
 	"--ch-radius": typeof radius !== "undefined" ? getRadius(radius) : void 0
 } }));
@@ -551,13 +550,12 @@ var InlineCodeHighlight = Object.assign(/* @__PURE__ */ defineComponent({
 			name: "InlineCodeHighlight",
 			classes: CodeHighlight_module_default,
 			props,
-			className: attrs.class,
-			style: attrs.style,
+			attrs,
 			classNames: props.classNames,
 			styles: props.styles,
 			unstyled: props.unstyled,
 			vars: props.vars,
-			varsResolver,
+			varsResolver: varsResolver$1,
 			rootSelector: "inlineCodeHighlight"
 		});
 		return (_ctx, _cache) => {
@@ -570,7 +568,7 @@ var InlineCodeHighlight = Object.assign(/* @__PURE__ */ defineComponent({
 	}
 }), {
 	classes: CodeHighlight_module_default,
-	varsResolver
+	varsResolver: varsResolver$1
 });
 //#endregion
 //#region src/CodeHighlightTabs/FileIcon.vue
@@ -668,8 +666,7 @@ var CodeHighlightTabs = Object.assign(/* @__PURE__ */ defineComponent({
 			name: "CodeHighlightTabs",
 			classes: CodeHighlight_module_default,
 			props,
-			className: attrs.class,
-			style: attrs.style,
+			attrs,
 			classNames: props.classNames,
 			styles: props.styles,
 			unstyled: props.unstyled,
@@ -790,6 +787,708 @@ var CodeHighlightTabs = Object.assign(/* @__PURE__ */ defineComponent({
 	}
 }), { classes: CodeHighlight_module_default });
 //#endregion
+//#region src/JsonViewer/json-viewer-utils.ts
+var PATH_SEPARATOR = "\0";
+var serializePath = (segments) => segments.join("\0");
+function getArrayChunks(length, groupArraysAfterLength) {
+	if (groupArraysAfterLength === false) return null;
+	const size = Math.floor(groupArraysAfterLength);
+	if (!(size >= 1) || length <= groupArraysAfterLength) return null;
+	const chunks = [];
+	for (let start = 0; start < length; start += size) chunks.push({
+		start,
+		end: Math.min(start + size, length) - 1
+	});
+	return chunks;
+}
+var getChunkSegment = (chunk) => `[${chunk.start}...${chunk.end}]`;
+function resolveDisplayValue(value) {
+	if (value !== null && typeof value === "object" && typeof value.toJSON === "function") try {
+		return value.toJSON();
+	} catch {
+		return value;
+	}
+	return value;
+}
+var isExpandableValue = (value) => value !== null && typeof value === "object";
+var getEntries = (value) => Array.isArray(value) ? value.map((item, index) => [String(index), item]) : Object.entries(value);
+function getExpandablePaths(value, { depth = Infinity, groupArraysAfterLength = false } = {}) {
+	const paths = [];
+	const ancestors = /* @__PURE__ */ new WeakSet();
+	const visit = (node, path, level) => {
+		const resolved = resolveDisplayValue(node);
+		if (!isExpandableValue(resolved) || ancestors.has(resolved) || level > depth) return;
+		const entries = getEntries(resolved);
+		if (!entries.length) return;
+		if (path.length) paths.push(serializePath(path));
+		ancestors.add(resolved);
+		const chunks = Array.isArray(resolved) ? getArrayChunks(entries.length, groupArraysAfterLength) : null;
+		if (chunks && level + 1 <= depth) for (const chunk of chunks) {
+			paths.push(serializePath([...path, getChunkSegment(chunk)]));
+			entries.slice(chunk.start, chunk.end + 1).forEach(([key, child]) => visit(child, [...path, key], level + 2));
+		}
+		else entries.forEach(([key, child]) => visit(child, [...path, key], level + 1));
+		ancestors.delete(resolved);
+	};
+	visit(value, [], 1);
+	return paths;
+}
+function getValueType(value) {
+	return value === null ? "null" : Array.isArray(value) ? "array" : typeof value;
+}
+function getTypeLabel(value) {
+	const type = getValueType(value);
+	return type === "number" ? Number.isInteger(value) ? "int" : "float" : type === "boolean" ? "bool" : type;
+}
+function formatValue(value, withQuotes, collapseStringsAfterLength) {
+	if (value === null) return {
+		display: "null",
+		collapsed: false
+	};
+	if (value === void 0) return {
+		display: "undefined",
+		collapsed: false
+	};
+	if (typeof value !== "string") return {
+		display: String(value),
+		collapsed: false
+	};
+	if (collapseStringsAfterLength !== false && value.length > collapseStringsAfterLength) {
+		const splitsPair = /^[\uD800-\uDBFF][\uDC00-\uDFFF]/.test(value.slice(collapseStringsAfterLength - 1));
+		const truncated = value.slice(0, collapseStringsAfterLength - (splitsPair ? 1 : 0));
+		return {
+			display: withQuotes ? `${JSON.stringify(truncated).slice(0, -1)}..."` : `${truncated}...`,
+			collapsed: true
+		};
+	}
+	return {
+		display: withQuotes ? JSON.stringify(value) : value,
+		collapsed: false
+	};
+}
+function safeStringify(value) {
+	const ancestors = [];
+	try {
+		return JSON.stringify(value, function(_key, item) {
+			if (typeof item === "bigint") return item.toString();
+			if (typeof item !== "object" || item === null) return item;
+			while (ancestors.length && ancestors.at(-1) !== this) ancestors.pop();
+			if (ancestors.includes(item)) return "[Circular]";
+			ancestors.push(item);
+			return item;
+		}, 2) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+//#endregion
+//#region src/JsonViewer/JsonViewerNode.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = ["data-type", "data-highlight"];
+var _hoisted_2$1 = [
+	"aria-expanded",
+	"aria-level",
+	"data-root",
+	"tabindex"
+];
+var _hoisted_3 = ["data-expanded"];
+var _hoisted_4 = ["data-value-type"];
+var _hoisted_5 = {
+	key: 0,
+	viewBox: "0 0 16 16",
+	width: "14",
+	height: "14",
+	fill: "currentColor"
+};
+var _hoisted_6 = {
+	key: 1,
+	viewBox: "0 0 16 16",
+	width: "14",
+	height: "14",
+	fill: "currentColor"
+};
+var _hoisted_7 = {
+	role: "group",
+	style: { paddingLeft: "var(--jv-indent)" }
+};
+var _hoisted_8 = ["data-type", "data-highlight"];
+var _hoisted_9 = [
+	"aria-level",
+	"data-root",
+	"tabindex"
+];
+var _hoisted_10 = ["data-value-type", "data-wrap"];
+var _hoisted_11 = ["data-value-type"];
+var _hoisted_12 = {
+	key: 0,
+	viewBox: "0 0 16 16",
+	width: "14",
+	height: "14",
+	fill: "currentColor"
+};
+var _hoisted_13 = {
+	key: 1,
+	viewBox: "0 0 16 16",
+	width: "14",
+	height: "14",
+	fill: "currentColor"
+};
+//#endregion
+//#region src/JsonViewer/JsonViewerNode.vue
+var JsonViewerNode_default = /* @__PURE__ */ defineComponent({
+	name: "JsonViewerNode",
+	__name: "JsonViewerNode",
+	props: {
+		value: {},
+		path: {},
+		nodeKey: {},
+		level: {},
+		ancestors: {},
+		expandedPaths: {},
+		togglePath: { type: Function },
+		getStyles: {},
+		maxDisplayLength: {},
+		withTypes: { type: Boolean },
+		withSize: { type: Boolean },
+		withCopy: { type: Boolean },
+		withQuotes: { type: Boolean },
+		withKeyQuotes: { type: Boolean },
+		collapseStringsAfterLength: { type: [Number, Boolean] },
+		sortKeys: { type: [Boolean, Function] },
+		groupArraysAfterLength: { type: [Number, Boolean] },
+		copyLabel: {},
+		copiedLabel: {},
+		onValueSelect: { type: Function },
+		highlightItems: {},
+		allExpanded: { type: Boolean },
+		withChevrons: { type: Boolean },
+		isRoot: { type: Boolean },
+		chunk: {},
+		chunkEntries: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { copy: copyToClipboard, copied } = useClipboard({ timeout: 1e3 });
+		const stringExpanded = ref(false);
+		const resolved = computed(() => props.chunk ? props.chunkEntries : resolveDisplayValue(props.value));
+		const circular = computed(() => !props.chunk && isExpandableValue(resolved.value) && props.ancestors.includes(resolved.value));
+		const expandable = computed(() => props.chunk || !circular.value && isExpandableValue(resolved.value));
+		const array = computed(() => props.chunk || Array.isArray(resolved.value));
+		const pathString = computed(() => serializePath(props.path));
+		const entries = computed(() => {
+			if (props.chunk) return props.chunkEntries ?? [];
+			if (!expandable.value) return [];
+			const result = getEntries(resolved.value);
+			if (!array.value && props.sortKeys) {
+				const compare = typeof props.sortKeys === "function" ? props.sortKeys : (a, b) => a.localeCompare(b);
+				result.sort((a, b) => compare(a[0], b[0]));
+			}
+			return result;
+		});
+		const empty = computed(() => expandable.value && entries.value.length === 0);
+		const expanded = computed(() => !empty.value && (props.isRoot || props.allExpanded || props.expandedPaths.includes(pathString.value)));
+		const canCollapse = computed(() => !empty.value && !props.isRoot && !props.allExpanded);
+		const chunks = computed(() => !props.chunk && array.value ? getArrayChunks(entries.value.length, props.groupArraysAfterLength) : null);
+		const shownEntries = computed(() => chunks.value ? entries.value : entries.value.slice(0, props.maxDisplayLength));
+		const primitiveType = computed(() => circular.value ? "circular" : getValueType(resolved.value));
+		const shouldCollapseString = computed(() => typeof resolved.value === "string" && props.collapseStringsAfterLength !== false && resolved.value.length > props.collapseStringsAfterLength);
+		const formatted = computed(() => circular.value ? {
+			display: "[Circular]",
+			collapsed: false
+		} : formatValue(resolved.value, props.withQuotes, stringExpanded.value ? false : props.collapseStringsAfterLength));
+		const openBracket = computed(() => array.value ? "[" : "{");
+		const closeBracket = computed(() => array.value ? "]" : "}");
+		const childAncestors = computed(() => props.chunk ? props.ancestors : [...props.ancestors, resolved.value]);
+		function toggle() {
+			if (canCollapse.value) props.togglePath(pathString.value);
+		}
+		function copy(event) {
+			event.stopPropagation();
+			copyToClipboard(safeStringify(resolved.value));
+		}
+		function select(event) {
+			event?.stopPropagation();
+			props.onValueSelect?.(props.path, resolved.value);
+		}
+		function stopCopyKeydown(event) {
+			if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+		}
+		function focusSibling(row, direction) {
+			const root = row.closest("[data-jv-root]");
+			const rows = Array.from(root?.querySelectorAll("[data-jv-node]") ?? []);
+			rows[rows.indexOf(row) + direction]?.focus();
+		}
+		function onKeydown(event) {
+			const row = event.currentTarget;
+			if ((event.ctrlKey || event.metaKey) && event.code === "KeyC" && !window.getSelection()?.toString()) {
+				event.preventDefault();
+				row.querySelector("[data-jv-copy]")?.click();
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				if (event.target !== row) return;
+				event.preventDefault();
+				if (expandable.value) toggle();
+				else select();
+				return;
+			}
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				focusSibling(row, event.key === "ArrowDown" ? 1 : -1);
+				return;
+			}
+			if (event.key === "ArrowRight") {
+				event.preventDefault();
+				if (expanded.value) row.parentElement?.querySelector(":scope > [role=\"group\"] [data-jv-node]")?.focus();
+				else toggle();
+				return;
+			}
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				if (expanded.value && canCollapse.value) toggle();
+				else row.parentElement?.parentElement?.closest("[data-jv-node-wrapper]")?.querySelector(":scope > [data-jv-node]")?.focus();
+			}
+		}
+		return (_ctx, _cache) => {
+			const _component_JsonViewerNode = resolveComponent("JsonViewerNode", true);
+			return expandable.value ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, props.getStyles("node"), {
+				"data-jv-node-wrapper": "",
+				"data-type": array.value ? "array" : "object",
+				"data-highlight": props.highlightItems?.[pathString.value]
+			}), [createElementVNode("div", mergeProps(props.getStyles("row"), {
+				role: "treeitem",
+				"aria-expanded": empty.value ? void 0 : expanded.value,
+				"aria-level": props.level,
+				"data-jv-node": "",
+				"data-jv-row": "",
+				"data-hoverable": "",
+				"data-root": props.isRoot || void 0,
+				tabindex: props.isRoot ? 0 : -1,
+				onClick: withModifiers(toggle, ["stop"]),
+				onKeydown
+			}), [
+				canCollapse.value && props.withChevrons ? (openBlock(), createElementBlock("span", mergeProps({ key: 0 }, props.getStyles("toggle"), { "data-expanded": expanded.value || void 0 }), [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
+					viewBox: "0 0 16 16",
+					width: "12",
+					height: "12",
+					fill: "currentColor"
+				}, [createElementVNode("path", { d: "M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z" })], -1)])], 16, _hoisted_3)) : createCommentVNode("", true),
+				props.nodeKey !== void 0 || props.chunk ? (openBlock(), createElementBlock("span", mergeProps({ key: 1 }, props.getStyles("key"), { "data-key": "" }), [createTextVNode(toDisplayString(props.chunk ? unref(getChunkSegment)(props.chunk) : props.withKeyQuotes ? JSON.stringify(props.nodeKey) : props.nodeKey), 1), !props.chunk ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(": ")], 64)) : createCommentVNode("", true)], 16)) : createCommentVNode("", true),
+				createElementVNode("span", normalizeProps(guardReactiveProps(props.getStyles("bracket"))), toDisplayString(openBracket.value), 17),
+				!empty.value && !expanded.value ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 2 }, props.getStyles("ellipsis"))), "...", 16)) : createCommentVNode("", true),
+				empty.value || !expanded.value ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 3 }, props.getStyles("bracket"))), toDisplayString(closeBracket.value), 17)) : createCommentVNode("", true),
+				props.withTypes ? (openBlock(), createElementBlock("span", mergeProps({ key: 4 }, props.getStyles("type"), { "data-value-type": array.value ? "array" : "object" }), toDisplayString(array.value ? "array" : "object"), 17, _hoisted_4)) : createCommentVNode("", true),
+				props.withSize ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 5 }, props.getStyles("size"))), toDisplayString(entries.value.length) + " " + toDisplayString(array.value ? "items" : "keys"), 17)) : createCommentVNode("", true),
+				props.withCopy && !props.chunk ? (openBlock(), createBlock(unref(Tooltip), {
+					key: 6,
+					label: unref(copied) ? props.copiedLabel : props.copyLabel,
+					position: "top",
+					fz: "xs"
+				}, {
+					default: withCtx(() => [createVNode(unref(UnstyledButton), mergeProps({
+						tabindex: "-1",
+						"data-jv-copy": ""
+					}, props.getStyles("copyButton"), {
+						"aria-label": unref(copied) ? props.copiedLabel : props.copyLabel,
+						onClick: copy,
+						onKeydown: stopCopyKeydown
+					}), {
+						default: withCtx(() => [unref(copied) ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [createElementVNode("path", { d: "M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" }, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[3] || (_cache[3] = [createElementVNode("path", { d: "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z" }, null, -1), createElementVNode("path", { d: "M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" }, null, -1)])]))]),
+						_: 1
+					}, 16, ["aria-label"])]),
+					_: 1
+				}, 8, ["label"])) : createCommentVNode("", true)
+			], 16, _hoisted_2$1), expanded.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", _hoisted_7, [
+				(openBlock(true), createElementBlock(Fragment, null, renderList(chunks.value, (chunkItem) => {
+					return openBlock(), createBlock(_component_JsonViewerNode, mergeProps({ key: chunkItem.start }, { ref_for: true }, props, {
+						path: [...props.path, unref(getChunkSegment)(chunkItem)],
+						level: props.level + 1,
+						ancestors: childAncestors.value,
+						chunk: chunkItem,
+						"chunk-entries": entries.value.slice(chunkItem.start, chunkItem.end + 1),
+						"is-root": false
+					}), null, 16, [
+						"path",
+						"level",
+						"ancestors",
+						"chunk",
+						"chunk-entries"
+					]);
+				}), 128)),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(chunks.value ? [] : shownEntries.value, ([key, item]) => {
+					return openBlock(), createBlock(_component_JsonViewerNode, mergeProps({ key }, { ref_for: true }, props, {
+						value: item,
+						path: props.chunk ? [...props.path.slice(0, -1), key] : [...props.path, key],
+						"node-key": array.value ? void 0 : key,
+						level: props.level + 1,
+						ancestors: childAncestors.value,
+						chunk: void 0,
+						"chunk-entries": void 0,
+						"is-root": false
+					}), null, 16, [
+						"value",
+						"path",
+						"node-key",
+						"level",
+						"ancestors"
+					]);
+				}), 128)),
+				!chunks.value && entries.value.length > props.maxDisplayLength ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, props.getStyles("row"), { "data-jv-row": "" }), [createElementVNode("span", normalizeProps(guardReactiveProps(props.getStyles("size"))), "... " + toDisplayString(entries.value.length - props.maxDisplayLength) + " more " + toDisplayString(array.value ? "items" : "keys"), 17)], 16)) : createCommentVNode("", true)
+			]), createElementVNode("div", mergeProps(props.getStyles("row"), {
+				"data-jv-row": "",
+				"aria-hidden": "true"
+			}), [createElementVNode("span", normalizeProps(guardReactiveProps(props.getStyles("bracket"))), toDisplayString(closeBracket.value), 17)], 16)], 64)) : createCommentVNode("", true)], 16, _hoisted_1$1)) : (openBlock(), createElementBlock("div", mergeProps({ key: 1 }, props.getStyles("node"), {
+				"data-jv-node-wrapper": "",
+				"data-type": primitiveType.value,
+				"data-highlight": props.highlightItems?.[pathString.value]
+			}), [createElementVNode("div", mergeProps(props.getStyles("row"), {
+				role: "treeitem",
+				"aria-level": props.level,
+				"data-jv-node": "",
+				"data-jv-row": "",
+				"data-hoverable": "",
+				"data-root": props.isRoot || void 0,
+				tabindex: props.isRoot ? 0 : -1,
+				onClick: select,
+				onKeydown
+			}), [
+				props.nodeKey !== void 0 ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, props.getStyles("key"))), toDisplayString(props.withKeyQuotes ? JSON.stringify(props.nodeKey) : props.nodeKey) + ": ", 17)) : createCommentVNode("", true),
+				createElementVNode("span", mergeProps(props.getStyles("value"), {
+					"data-value-type": primitiveType.value,
+					"data-wrap": primitiveType.value === "string" && formatted.value.display.length > 20 ? true : void 0
+				}), toDisplayString(formatted.value.display), 17, _hoisted_10),
+				shouldCollapseString.value ? (openBlock(), createBlock(unref(UnstyledButton), mergeProps({ key: 1 }, props.getStyles("ellipsis"), {
+					"aria-expanded": stringExpanded.value,
+					"data-clickable": "",
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => stringExpanded.value = !stringExpanded.value, ["stop"]))
+				}), {
+					default: withCtx(() => [createTextVNode(toDisplayString(stringExpanded.value ? "show less" : "show more"), 1)]),
+					_: 1
+				}, 16, ["aria-expanded"])) : createCommentVNode("", true),
+				props.withTypes ? (openBlock(), createElementBlock("span", mergeProps({ key: 2 }, props.getStyles("type"), { "data-value-type": primitiveType.value }), toDisplayString(circular.value ? "circular" : unref(getTypeLabel)(resolved.value)), 17, _hoisted_11)) : createCommentVNode("", true),
+				props.withCopy ? (openBlock(), createBlock(unref(Tooltip), {
+					key: 3,
+					label: unref(copied) ? props.copiedLabel : props.copyLabel,
+					position: "top",
+					fz: "xs"
+				}, {
+					default: withCtx(() => [createVNode(unref(UnstyledButton), mergeProps({
+						tabindex: "-1",
+						"data-jv-copy": ""
+					}, props.getStyles("copyButton"), {
+						"aria-label": unref(copied) ? props.copiedLabel : props.copyLabel,
+						onClick: copy,
+						onKeydown: stopCopyKeydown
+					}), {
+						default: withCtx(() => [unref(copied) ? (openBlock(), createElementBlock("svg", _hoisted_12, [..._cache[4] || (_cache[4] = [createElementVNode("path", { d: "M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" }, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_13, [..._cache[5] || (_cache[5] = [createElementVNode("path", { d: "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z" }, null, -1), createElementVNode("path", { d: "M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" }, null, -1)])]))]),
+						_: 1
+					}, 16, ["aria-label"])]),
+					_: 1
+				}, 8, ["label"])) : createCommentVNode("", true)
+			], 16, _hoisted_9)], 16, _hoisted_8));
+		};
+	}
+});
+var JsonViewer_module_default = {
+	root: "_root_z2quo_1",
+	controls: "_controls_z2quo_34",
+	copyAllButton: "_copyAllButton_z2quo_41",
+	control: "_control_z2quo_34",
+	scrollarea: "_scrollarea_z2quo_81",
+	content: "_content_z2quo_85",
+	wrapper: "_wrapper_z2quo_89",
+	lineNumbers: "_lineNumbers_z2quo_95",
+	node: "_node_z2quo_132",
+	row: "_row_z2quo_135",
+	toggle: "_toggle_z2quo_142",
+	copyButton: "_copyButton_z2quo_197",
+	key: "_key_z2quo_253",
+	value: "_value_z2quo_266",
+	bracket: "_bracket_z2quo_340",
+	type: "_type_z2quo_350",
+	size: "_size_z2quo_445",
+	ellipsis: "_ellipsis_z2quo_460"
+};
+//#endregion
+//#region src/JsonViewer/JsonViewer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	"stroke-width": "2",
+	stroke: "currentColor",
+	fill: "none",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	width: "16",
+	height: "16"
+};
+var _hoisted_2 = ["aria-label"];
+var varsResolver = createVarsResolver((_, { radius, fontSize, indentWidth }) => ({ root: {
+	"--jv-radius": radius !== void 0 ? getRadius(radius) : void 0,
+	"--jv-fz": fontSize !== void 0 ? getFontSize(fontSize) : void 0,
+	"--jv-indent": indentWidth !== void 0 ? rem(indentWidth) : void 0
+} }));
+//#endregion
+//#region src/JsonViewer/JsonViewer.ts
+var JsonViewer = factory(/* @__PURE__ */ defineComponent({
+	name: "JsonViewer",
+	inheritAttrs: false,
+	__name: "JsonViewer",
+	props: {
+		classNames: {},
+		styles: {},
+		vars: {},
+		unstyled: {
+			type: Boolean,
+			default: false
+		},
+		value: {},
+		rootName: {
+			type: [String, Boolean],
+			default: false
+		},
+		defaultExpandDepth: { default: 1 },
+		expandedPaths: { default: void 0 },
+		maxDisplayLength: { default: 100 },
+		withTypes: {
+			type: Boolean,
+			default: false
+		},
+		withSize: {
+			type: Boolean,
+			default: false
+		},
+		withCopy: {
+			type: Boolean,
+			default: false
+		},
+		withCopyButton: {
+			type: Boolean,
+			default: false
+		},
+		withQuotes: {
+			type: Boolean,
+			default: true
+		},
+		withKeyQuotes: {
+			type: Boolean,
+			default: false
+		},
+		collapseStringsAfterLength: {
+			type: [Number, Boolean],
+			default: false
+		},
+		sortKeys: {
+			type: [Boolean, Function],
+			default: false
+		},
+		groupArraysAfterLength: {
+			type: [Number, Boolean],
+			default: false
+		},
+		radius: {},
+		fontSize: {},
+		indentWidth: { default: 16 },
+		withBorder: {
+			type: Boolean,
+			default: false
+		},
+		copyLabel: { default: "Copy" },
+		copiedLabel: { default: "Copied" },
+		expandAllLabel: { default: "Expand all" },
+		collapseAllLabel: { default: "Collapse all" },
+		withControls: {
+			type: Boolean,
+			default: false
+		},
+		highlightItems: {},
+		allExpanded: {
+			type: Boolean,
+			default: false
+		},
+		withLineNumbers: {
+			type: Boolean,
+			default: false
+		},
+		withChevrons: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:expandedPaths",
+		"expandedPathsChange",
+		"valueSelect"
+	],
+	setup(__props, { emit: __emit }) {
+		const rawProps = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const props = useProps("JsonViewer", null, rawProps);
+		const [expanded, setExpanded] = useUncontrolled({
+			value: () => props.expandedPaths,
+			defaultValue: getExpandablePaths(props.value, {
+				depth: props.defaultExpandDepth,
+				groupArraysAfterLength: props.groupArraysAfterLength
+			}),
+			finalValue: [],
+			onChange: (paths) => {
+				emit("update:expandedPaths", paths);
+				emit("expandedPathsChange", paths);
+			}
+		});
+		function togglePath(path) {
+			if (!props.allExpanded) setExpanded(expanded.value.includes(path) ? expanded.value.filter((item) => item !== path) : [...expanded.value, path]);
+		}
+		function expandAll() {
+			setExpanded(getExpandablePaths(props.value, { groupArraysAfterLength: props.groupArraysAfterLength }));
+		}
+		function collapseAll() {
+			setExpanded([]);
+		}
+		const getStyles = useStyles({
+			name: "JsonViewer",
+			classes: JsonViewer_module_default,
+			props,
+			attrs,
+			classNames: props.classNames,
+			styles: props.styles,
+			vars: props.vars,
+			unstyled: props.unstyled,
+			varsResolver
+		});
+		const { copy: copyToClipboard, copied } = useClipboard();
+		const content = ref(null);
+		const lineHeights = ref([]);
+		let observer;
+		function syncLines() {
+			lineHeights.value = props.withLineNumbers && content.value ? Array.from(content.value.querySelectorAll(":scope [data-jv-row]")).map((row) => row.getBoundingClientRect().height) : [];
+		}
+		watch([
+			expanded,
+			() => props.allExpanded,
+			() => props.value
+		], () => nextTick(syncLines), { deep: true });
+		onMounted(() => {
+			syncLines();
+			if (content.value && typeof ResizeObserver !== "undefined") {
+				observer = new ResizeObserver(syncLines);
+				observer.observe(content.value);
+			}
+		});
+		onBeforeUnmount(() => observer?.disconnect());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), mergeProps({
+				...unref(attrs),
+				...unref(getStyles)("root")
+			}, {
+				"data-with-border": unref(props).withBorder || void 0,
+				"data-jv-root": ""
+			}), {
+				default: withCtx(() => [
+					unref(props).withCopyButton ? (openBlock(), createBlock(unref(Tooltip), {
+						key: 0,
+						label: unref(copied) ? unref(props).copiedLabel : unref(props).copyLabel,
+						position: "left",
+						fz: "xs"
+					}, {
+						default: withCtx(() => [createVNode(unref(UnstyledButton), mergeProps(unref(getStyles)("copyAllButton"), {
+							"aria-label": unref(copied) ? unref(props).copiedLabel : `${unref(props).copyLabel} JSON`,
+							onClick: _cache[0] || (_cache[0] = ($event) => unref(copyToClipboard)(unref(safeStringify)(unref(props).value)))
+						}), {
+							default: withCtx(() => [(openBlock(), createElementBlock("svg", _hoisted_1, [unref(copied) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[1] || (_cache[1] = createElementVNode("path", {
+								stroke: "none",
+								d: "M0 0h24v24H0z",
+								fill: "none"
+							}, null, -1)), _cache[2] || (_cache[2] = createElementVNode("path", { d: "M5 12l5 5l10 -10" }, null, -1))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+								_cache[3] || (_cache[3] = createElementVNode("path", {
+									stroke: "none",
+									d: "M0 0h24v24H0z",
+									fill: "none"
+								}, null, -1)),
+								_cache[4] || (_cache[4] = createElementVNode("path", { d: "M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" }, null, -1)),
+								_cache[5] || (_cache[5] = createElementVNode("path", { d: "M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" }, null, -1))
+							], 64))]))]),
+							_: 1
+						}, 16, ["aria-label"])]),
+						_: 1
+					}, 8, ["label"])) : createCommentVNode("", true),
+					unref(props).withControls && !unref(props).allExpanded ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 1 }, unref(getStyles)("controls"))), [createVNode(unref(UnstyledButton), mergeProps(unref(getStyles)("control"), { onClick: expandAll }), {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(props).expandAllLabel), 1)]),
+						_: 1
+					}, 16), createVNode(unref(UnstyledButton), mergeProps(unref(getStyles)("control"), { onClick: collapseAll }), {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(props).collapseAllLabel), 1)]),
+						_: 1
+					}, 16)], 16)) : createCommentVNode("", true),
+					createVNode(unref(ScrollArea), mergeProps({
+						type: "hover",
+						"scrollbar-size": 4
+					}, unref(getStyles)("scrollarea")), {
+						default: withCtx(() => [createElementVNode("div", normalizeProps(guardReactiveProps(unref(getStyles)("wrapper"))), [unref(props).withLineNumbers ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, unref(getStyles)("lineNumbers"), { "aria-hidden": "true" }), [(openBlock(true), createElementBlock(Fragment, null, renderList(lineHeights.value, (height, index) => {
+							return openBlock(), createElementBlock("div", {
+								key: index,
+								style: normalizeStyle({ height: `${height}px` })
+							}, toDisplayString(index + 1), 5);
+						}), 128))], 16)) : createCommentVNode("", true), createElementVNode("div", mergeProps({ ref: (node) => content.value = node }, unref(getStyles)("content"), {
+							role: "tree",
+							"aria-label": unref(props).rootName || "JSON"
+						}), [createVNode(JsonViewerNode_default, {
+							value: unref(props).value,
+							path: [],
+							"node-key": unref(props).rootName || void 0,
+							level: 1,
+							ancestors: [],
+							"expanded-paths": unref(expanded),
+							"toggle-path": togglePath,
+							"get-styles": unref(getStyles),
+							"max-display-length": unref(props).maxDisplayLength,
+							"with-types": unref(props).withTypes,
+							"with-size": unref(props).withSize,
+							"with-copy": unref(props).withCopy,
+							"with-quotes": unref(props).withQuotes,
+							"with-key-quotes": unref(props).withKeyQuotes,
+							"collapse-strings-after-length": unref(props).collapseStringsAfterLength,
+							"sort-keys": unref(props).sortKeys,
+							"group-arrays-after-length": unref(props).groupArraysAfterLength,
+							"copy-label": unref(props).copyLabel,
+							"copied-label": unref(props).copiedLabel,
+							"on-value-select": (path, value) => emit("valueSelect", path, value),
+							"highlight-items": unref(props).highlightItems,
+							"all-expanded": unref(props).allExpanded,
+							"with-chevrons": unref(props).withChevrons,
+							"is-root": ""
+						}, null, 8, [
+							"value",
+							"node-key",
+							"expanded-paths",
+							"get-styles",
+							"max-display-length",
+							"with-types",
+							"with-size",
+							"with-copy",
+							"with-quotes",
+							"with-key-quotes",
+							"collapse-strings-after-length",
+							"sort-keys",
+							"group-arrays-after-length",
+							"copy-label",
+							"copied-label",
+							"on-value-select",
+							"highlight-items",
+							"all-expanded",
+							"with-chevrons"
+						])], 16, _hoisted_2)], 16)]),
+						_: 1
+					}, 16)
+				]),
+				_: 1
+			}, 16, ["data-with-border"]);
+		};
+	}
+}), {
+	classes: JsonViewer_module_default,
+	varsResolver
+});
+//#endregion
 //#region src/CodeHighlightProvider/adapters/highlight-js-adapter.ts
 function createHighlightJsAdapter(hljs) {
 	return { getHighlighter: () => ({ code, language }) => {
@@ -2012,6 +2711,6 @@ var createShikiAdapter = (loadShiki, { forceColorScheme, resolveLanguage } = {})
 	};
 };
 //#endregion
-export { CodeHighlight, CodeHighlightAdapterProvider, CodeHighlightControl_default as CodeHighlightControl, CodeHighlightTabs, InlineCodeHighlight, createHighlightJsAdapter, createShikiAdapter, normalizeCode, plainTextAdapter, stripShikiCodeBlocks, useCodeHighlightContext, useHighlight, useIsLanguageLoaded, useLoadLanguage };
+export { CodeHighlight, CodeHighlightAdapterProvider, CodeHighlightControl_default as CodeHighlightControl, CodeHighlightTabs, InlineCodeHighlight, JsonViewer, PATH_SEPARATOR, createHighlightJsAdapter, createShikiAdapter, getExpandablePaths, normalizeCode, plainTextAdapter, safeStringify, serializePath as serializeJsonViewerPath, serializePath, stripShikiCodeBlocks, useCodeHighlightContext, useHighlight, useIsLanguageLoaded, useLoadLanguage };
 
 //# sourceMappingURL=index.mjs.map