@mantine-vue/code-highlight 3.5.0 → 3.7.0

package/cjs/index.cjs

@@ -9,7 +9,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__ */ (0, vue.defineComponent)({
@@ -64,7 +64,7 @@ var CodeHighlightAdapterProvider_default = /* @__PURE__ */ (0, vue.defineCompone
 			isLanguageLoaded: (language) => !language || !props.adapter.loadLanguage || loadedLanguages.value.includes(language)
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [(0, vue.renderSlot)(_ctx.$slots, "default")]);
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$3, [(0, vue.renderSlot)(_ctx.$slots, "default")]);
 		};
 	}
 });
@@ -90,7 +90,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
@@ -290,13 +290,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 = (0, _mantine_vue_core.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 = (0, _mantine_vue_core.createVarsResolver)((theme, { maxCollapsedHeight, background, radius }) => ({ codeHighlight: {
 	"--ch-max-height": (0, _mantine_vue_core.rem)(maxCollapsedHeight),
 	"--ch-background": background ? (0, _mantine_vue_core.getThemeColor)(background, theme) : void 0,
 	"--ch-radius": typeof radius !== "undefined" ? (0, _mantine_vue_core.getRadius)(radius) : void 0
@@ -372,13 +372,12 @@ var CodeHighlight_default = /* @__PURE__ */ (0, vue.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] = (0, _mantine_vue_hooks.useUncontrolled)({
@@ -431,14 +430,14 @@ var CodeHighlight_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				"data-with-border": (0, vue.unref)(props).withBorder || void 0,
 				innerHTML: highlighted.value.highlightedCode
-			}), null, 16, _hoisted_1)) : (0, vue.unref)(props).__inline ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("code", (0, vue.mergeProps)({ key: 1 }, {
+			}), null, 16, _hoisted_1$2)) : (0, vue.unref)(props).__inline ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("code", (0, vue.mergeProps)({ key: 1 }, {
 				...(0, vue.unref)(attrs),
 				...highlighted.value.codeElementProps,
 				...(0, vue.unref)(getStyles)("codeHighlight", {
 					className: [highlighted.value.codeElementProps?.class, (0, vue.unref)(attrs).class],
 					style: [highlighted.value.codeElementProps?.style, (0, vue.unref)(attrs).style]
 				})
-			}, { "data-with-border": (0, vue.unref)(props).withBorder || void 0 }), (0, vue.toDisplayString)(normalizedCode.value), 17, _hoisted_2)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ key: 2 }, {
+			}, { "data-with-border": (0, vue.unref)(props).withBorder || void 0 }), (0, vue.toDisplayString)(normalizedCode.value), 17, _hoisted_2$2)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ key: 2 }, {
 				...(0, vue.unref)(attrs),
 				...(0, vue.unref)(getStyles)("codeHighlight")
 			}, {
@@ -471,7 +470,7 @@ var CodeHighlight_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"copied-label",
 							"copy-label"
 						])) : (0, vue.createCommentVNode)("", true)
-					], 16, _hoisted_3)) : (0, vue.createCommentVNode)("", true),
+					], 16, _hoisted_3$1)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.ScrollArea), (0, vue.mergeProps)({
 						type: "hover",
 						"scrollbar-size": 4,
@@ -482,19 +481,19 @@ var CodeHighlight_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, (0, vue.unref)(getStyles)("scrollarea")), {
 						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(getStyles)("codeWrapper"))), [(0, vue.unref)(props).withLineNumbers ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(getStyles)("lineNumbers"), { "data-with-offset": (0, vue.unref)(props).__withOffset || void 0 }), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(lineNumbers.value, (line) => {
 							return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { key: line }, (0, vue.toDisplayString)(line), 1);
-						}), 128))], 16, _hoisted_4)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("pre", (0, vue.mergeProps)((0, vue.unref)(getStyles)("pre"), { "data-with-offset": (0, vue.unref)(props).__withOffset || void 0 }), [highlighted.value.isHighlighted ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("code", (0, vue.mergeProps)({ key: 0 }, {
+						}), 128))], 16, _hoisted_4$1)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("pre", (0, vue.mergeProps)((0, vue.unref)(getStyles)("pre"), { "data-with-offset": (0, vue.unref)(props).__withOffset || void 0 }), [highlighted.value.isHighlighted ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("code", (0, vue.mergeProps)({ key: 0 }, {
 							...highlighted.value.codeElementProps,
 							...(0, vue.unref)(getStyles)("code", {
 								className: highlighted.value.codeElementProps?.class,
 								style: highlighted.value.codeElementProps?.style
 							})
-						}, { innerHTML: highlighted.value.highlightedCode }), null, 16, _hoisted_6)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("code", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, {
+						}, { innerHTML: highlighted.value.highlightedCode }), null, 16, _hoisted_6$1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("code", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, {
 							...highlighted.value.codeElementProps,
 							...(0, vue.unref)(getStyles)("code", {
 								className: highlighted.value.codeElementProps?.class,
 								style: highlighted.value.codeElementProps?.style
 							})
-						})), (0, vue.toDisplayString)(normalizedCode.value), 17))], 16, _hoisted_5)], 16)]),
+						})), (0, vue.toDisplayString)(normalizedCode.value), 17))], 16, _hoisted_5$1)], 16)]),
 						_: 1
 					}, 16, ["data-collapsed"]),
 					(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)((0, vue.unref)(getStyles)("showCodeButton"), {
@@ -515,12 +514,12 @@ var CodeHighlight_default = /* @__PURE__ */ (0, vue.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 = (0, _mantine_vue_core.createVarsResolver)((theme, { background, radius }) => ({ inlineCodeHighlight: {
+var varsResolver$1 = (0, _mantine_vue_core.createVarsResolver)((theme, { background, radius }) => ({ inlineCodeHighlight: {
 	"--ch-background": background ? (0, _mantine_vue_core.getThemeColor)(background, theme) : void 0,
 	"--ch-radius": typeof radius !== "undefined" ? (0, _mantine_vue_core.getRadius)(radius) : void 0
 } }));
@@ -552,13 +551,12 @@ var InlineCodeHighlight = Object.assign(/* @__PURE__ */ (0, vue.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) => {
@@ -571,7 +569,7 @@ var InlineCodeHighlight = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)
 	}
 }), {
 	classes: CodeHighlight_module_default,
-	varsResolver
+	varsResolver: varsResolver$1
 });
 //#endregion
 //#region src/CodeHighlightTabs/FileIcon.vue
@@ -669,8 +667,7 @@ var CodeHighlightTabs = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
 			name: "CodeHighlightTabs",
 			classes: CodeHighlight_module_default,
 			props,
-			className: attrs.class,
-			style: attrs.style,
+			attrs,
 			classNames: props.classNames,
 			styles: props.styles,
 			unstyled: props.unstyled,
@@ -791,6 +788,711 @@ var CodeHighlightTabs = Object.assign(/* @__PURE__ */ (0, vue.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__ */ (0, vue.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 } = (0, _mantine_vue_hooks.useClipboard)({ timeout: 1e3 });
+		const stringExpanded = (0, vue.ref)(false);
+		const resolved = (0, vue.computed)(() => props.chunk ? props.chunkEntries : resolveDisplayValue(props.value));
+		const circular = (0, vue.computed)(() => !props.chunk && isExpandableValue(resolved.value) && props.ancestors.includes(resolved.value));
+		const expandable = (0, vue.computed)(() => props.chunk || !circular.value && isExpandableValue(resolved.value));
+		const array = (0, vue.computed)(() => props.chunk || Array.isArray(resolved.value));
+		const pathString = (0, vue.computed)(() => serializePath(props.path));
+		const entries = (0, vue.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 = (0, vue.computed)(() => expandable.value && entries.value.length === 0);
+		const expanded = (0, vue.computed)(() => !empty.value && (props.isRoot || props.allExpanded || props.expandedPaths.includes(pathString.value)));
+		const canCollapse = (0, vue.computed)(() => !empty.value && !props.isRoot && !props.allExpanded);
+		const chunks = (0, vue.computed)(() => !props.chunk && array.value ? getArrayChunks(entries.value.length, props.groupArraysAfterLength) : null);
+		const shownEntries = (0, vue.computed)(() => chunks.value ? entries.value : entries.value.slice(0, props.maxDisplayLength));
+		const primitiveType = (0, vue.computed)(() => circular.value ? "circular" : getValueType(resolved.value));
+		const shouldCollapseString = (0, vue.computed)(() => typeof resolved.value === "string" && props.collapseStringsAfterLength !== false && resolved.value.length > props.collapseStringsAfterLength);
+		const formatted = (0, vue.computed)(() => circular.value ? {
+			display: "[Circular]",
+			collapsed: false
+		} : formatValue(resolved.value, props.withQuotes, stringExpanded.value ? false : props.collapseStringsAfterLength));
+		const openBracket = (0, vue.computed)(() => array.value ? "[" : "{");
+		const closeBracket = (0, vue.computed)(() => array.value ? "]" : "}");
+		const childAncestors = (0, vue.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 = (0, vue.resolveComponent)("JsonViewerNode", true);
+			return expandable.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: 0 }, props.getStyles("node"), {
+				"data-jv-node-wrapper": "",
+				"data-type": array.value ? "array" : "object",
+				"data-highlight": props.highlightItems?.[pathString.value]
+			}), [(0, vue.createElementVNode)("div", (0, vue.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: (0, vue.withModifiers)(toggle, ["stop"]),
+				onKeydown
+			}), [
+				canCollapse.value && props.withChevrons ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.mergeProps)({ key: 0 }, props.getStyles("toggle"), { "data-expanded": expanded.value || void 0 }), [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("svg", {
+					viewBox: "0 0 16 16",
+					width: "12",
+					height: "12",
+					fill: "currentColor"
+				}, [(0, vue.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)) : (0, vue.createCommentVNode)("", true),
+				props.nodeKey !== void 0 || props.chunk ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.mergeProps)({ key: 1 }, props.getStyles("key"), { "data-key": "" }), [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.chunk ? (0, vue.unref)(getChunkSegment)(props.chunk) : props.withKeyQuotes ? JSON.stringify(props.nodeKey) : props.nodeKey), 1), !props.chunk ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createTextVNode)(": ")], 64)) : (0, vue.createCommentVNode)("", true)], 16)) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("span", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(props.getStyles("bracket"))), (0, vue.toDisplayString)(openBracket.value), 17),
+				!empty.value && !expanded.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 2 }, props.getStyles("ellipsis"))), "...", 16)) : (0, vue.createCommentVNode)("", true),
+				empty.value || !expanded.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 3 }, props.getStyles("bracket"))), (0, vue.toDisplayString)(closeBracket.value), 17)) : (0, vue.createCommentVNode)("", true),
+				props.withTypes ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.mergeProps)({ key: 4 }, props.getStyles("type"), { "data-value-type": array.value ? "array" : "object" }), (0, vue.toDisplayString)(array.value ? "array" : "object"), 17, _hoisted_4)) : (0, vue.createCommentVNode)("", true),
+				props.withSize ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 5 }, props.getStyles("size"))), (0, vue.toDisplayString)(entries.value.length) + " " + (0, vue.toDisplayString)(array.value ? "items" : "keys"), 17)) : (0, vue.createCommentVNode)("", true),
+				props.withCopy && !props.chunk ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Tooltip), {
+					key: 6,
+					label: (0, vue.unref)(copied) ? props.copiedLabel : props.copyLabel,
+					position: "top",
+					fz: "xs"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)({
+						tabindex: "-1",
+						"data-jv-copy": ""
+					}, props.getStyles("copyButton"), {
+						"aria-label": (0, vue.unref)(copied) ? props.copiedLabel : props.copyLabel,
+						onClick: copy,
+						onKeydown: stopCopyKeydown
+					}), {
+						default: (0, vue.withCtx)(() => [(0, vue.unref)(copied) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [(0, vue.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)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_6, [..._cache[3] || (_cache[3] = [(0, vue.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), (0, vue.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"])) : (0, vue.createCommentVNode)("", true)
+			], 16, _hoisted_2$1), expanded.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createElementVNode)("div", _hoisted_7, [
+				((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(chunks.value, (chunkItem) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)(_component_JsonViewerNode, (0, vue.mergeProps)({ key: chunkItem.start }, { ref_for: true }, props, {
+						path: [...props.path, (0, vue.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)),
+				((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(chunks.value ? [] : shownEntries.value, ([key, item]) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)(_component_JsonViewerNode, (0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: 0 }, props.getStyles("row"), { "data-jv-row": "" }), [(0, vue.createElementVNode)("span", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(props.getStyles("size"))), "... " + (0, vue.toDisplayString)(entries.value.length - props.maxDisplayLength) + " more " + (0, vue.toDisplayString)(array.value ? "items" : "keys"), 17)], 16)) : (0, vue.createCommentVNode)("", true)
+			]), (0, vue.createElementVNode)("div", (0, vue.mergeProps)(props.getStyles("row"), {
+				"data-jv-row": "",
+				"aria-hidden": "true"
+			}), [(0, vue.createElementVNode)("span", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(props.getStyles("bracket"))), (0, vue.toDisplayString)(closeBracket.value), 17)], 16)], 64)) : (0, vue.createCommentVNode)("", true)], 16, _hoisted_1$1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: 1 }, props.getStyles("node"), {
+				"data-jv-node-wrapper": "",
+				"data-type": primitiveType.value,
+				"data-highlight": props.highlightItems?.[pathString.value]
+			}), [(0, vue.createElementVNode)("div", (0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, props.getStyles("key"))), (0, vue.toDisplayString)(props.withKeyQuotes ? JSON.stringify(props.nodeKey) : props.nodeKey) + ": ", 17)) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("span", (0, vue.mergeProps)(props.getStyles("value"), {
+					"data-value-type": primitiveType.value,
+					"data-wrap": primitiveType.value === "string" && formatted.value.display.length > 20 ? true : void 0
+				}), (0, vue.toDisplayString)(formatted.value.display), 17, _hoisted_10),
+				shouldCollapseString.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)({ key: 1 }, props.getStyles("ellipsis"), {
+					"aria-expanded": stringExpanded.value,
+					"data-clickable": "",
+					onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(($event) => stringExpanded.value = !stringExpanded.value, ["stop"]))
+				}), {
+					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(stringExpanded.value ? "show less" : "show more"), 1)]),
+					_: 1
+				}, 16, ["aria-expanded"])) : (0, vue.createCommentVNode)("", true),
+				props.withTypes ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.mergeProps)({ key: 2 }, props.getStyles("type"), { "data-value-type": primitiveType.value }), (0, vue.toDisplayString)(circular.value ? "circular" : (0, vue.unref)(getTypeLabel)(resolved.value)), 17, _hoisted_11)) : (0, vue.createCommentVNode)("", true),
+				props.withCopy ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Tooltip), {
+					key: 3,
+					label: (0, vue.unref)(copied) ? props.copiedLabel : props.copyLabel,
+					position: "top",
+					fz: "xs"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)({
+						tabindex: "-1",
+						"data-jv-copy": ""
+					}, props.getStyles("copyButton"), {
+						"aria-label": (0, vue.unref)(copied) ? props.copiedLabel : props.copyLabel,
+						onClick: copy,
+						onKeydown: stopCopyKeydown
+					}), {
+						default: (0, vue.withCtx)(() => [(0, vue.unref)(copied) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_12, [..._cache[4] || (_cache[4] = [(0, vue.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)])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_13, [..._cache[5] || (_cache[5] = [(0, vue.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), (0, vue.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"])) : (0, vue.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 = (0, _mantine_vue_core.createVarsResolver)((_, { radius, fontSize, indentWidth }) => ({ root: {
+	"--jv-radius": radius !== void 0 ? (0, _mantine_vue_core.getRadius)(radius) : void 0,
+	"--jv-fz": fontSize !== void 0 ? (0, _mantine_vue_core.getFontSize)(fontSize) : void 0,
+	"--jv-indent": indentWidth !== void 0 ? (0, _mantine_vue_core.rem)(indentWidth) : void 0
+} }));
+//#endregion
+//#region src/JsonViewer/JsonViewer.vue
+var JsonViewer_default = /* @__PURE__ */ (0, vue.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 = (0, vue.useAttrs)();
+		const props = (0, _mantine_vue_core.useProps)("JsonViewer", null, rawProps);
+		const [expanded, setExpanded] = (0, _mantine_vue_hooks.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 = (0, _mantine_vue_core.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 } = (0, _mantine_vue_hooks.useClipboard)();
+		const content = (0, vue.ref)(null);
+		const lineHeights = (0, vue.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) : [];
+		}
+		(0, vue.watch)([
+			expanded,
+			() => props.allExpanded,
+			() => props.value
+		], () => (0, vue.nextTick)(syncLines), { deep: true });
+		(0, vue.onMounted)(() => {
+			syncLines();
+			if (content.value && typeof ResizeObserver !== "undefined") {
+				observer = new ResizeObserver(syncLines);
+				observer.observe(content.value);
+			}
+		});
+		(0, vue.onBeforeUnmount)(() => observer?.disconnect());
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({
+				...(0, vue.unref)(attrs),
+				...(0, vue.unref)(getStyles)("root")
+			}, {
+				"data-with-border": (0, vue.unref)(props).withBorder || void 0,
+				"data-jv-root": ""
+			}), {
+				default: (0, vue.withCtx)(() => [
+					(0, vue.unref)(props).withCopyButton ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Tooltip), {
+						key: 0,
+						label: (0, vue.unref)(copied) ? (0, vue.unref)(props).copiedLabel : (0, vue.unref)(props).copyLabel,
+						position: "left",
+						fz: "xs"
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)((0, vue.unref)(getStyles)("copyAllButton"), {
+							"aria-label": (0, vue.unref)(copied) ? (0, vue.unref)(props).copiedLabel : `${(0, vue.unref)(props).copyLabel} JSON`,
+							onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(copyToClipboard)((0, vue.unref)(safeStringify)((0, vue.unref)(props).value)))
+						}), {
+							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1, [(0, vue.unref)(copied) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("path", {
+								stroke: "none",
+								d: "M0 0h24v24H0z",
+								fill: "none"
+							}, null, -1)), _cache[2] || (_cache[2] = (0, vue.createElementVNode)("path", { d: "M5 12l5 5l10 -10" }, null, -1))], 64)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [
+								_cache[3] || (_cache[3] = (0, vue.createElementVNode)("path", {
+									stroke: "none",
+									d: "M0 0h24v24H0z",
+									fill: "none"
+								}, null, -1)),
+								_cache[4] || (_cache[4] = (0, vue.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] = (0, vue.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"])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.unref)(props).withControls && !(0, vue.unref)(props).allExpanded ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, (0, vue.unref)(getStyles)("controls"))), [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)((0, vue.unref)(getStyles)("control"), { onClick: expandAll }), {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).expandAllLabel), 1)]),
+						_: 1
+					}, 16), (0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.UnstyledButton), (0, vue.mergeProps)((0, vue.unref)(getStyles)("control"), { onClick: collapseAll }), {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).collapseAllLabel), 1)]),
+						_: 1
+					}, 16)], 16)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.ScrollArea), (0, vue.mergeProps)({
+						type: "hover",
+						"scrollbar-size": 4
+					}, (0, vue.unref)(getStyles)("scrollarea")), {
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(getStyles)("wrapper"))), [(0, vue.unref)(props).withLineNumbers ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(getStyles)("lineNumbers"), { "aria-hidden": "true" }), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(lineHeights.value, (height, index) => {
+							return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+								key: index,
+								style: (0, vue.normalizeStyle)({ height: `${height}px` })
+							}, (0, vue.toDisplayString)(index + 1), 5);
+						}), 128))], 16)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", (0, vue.mergeProps)({ ref: (node) => content.value = node }, (0, vue.unref)(getStyles)("content"), {
+							role: "tree",
+							"aria-label": (0, vue.unref)(props).rootName || "JSON"
+						}), [(0, vue.createVNode)(JsonViewerNode_default, {
+							value: (0, vue.unref)(props).value,
+							path: [],
+							"node-key": (0, vue.unref)(props).rootName || void 0,
+							level: 1,
+							ancestors: [],
+							"expanded-paths": (0, vue.unref)(expanded),
+							"toggle-path": togglePath,
+							"get-styles": (0, vue.unref)(getStyles),
+							"max-display-length": (0, vue.unref)(props).maxDisplayLength,
+							"with-types": (0, vue.unref)(props).withTypes,
+							"with-size": (0, vue.unref)(props).withSize,
+							"with-copy": (0, vue.unref)(props).withCopy,
+							"with-quotes": (0, vue.unref)(props).withQuotes,
+							"with-key-quotes": (0, vue.unref)(props).withKeyQuotes,
+							"collapse-strings-after-length": (0, vue.unref)(props).collapseStringsAfterLength,
+							"sort-keys": (0, vue.unref)(props).sortKeys,
+							"group-arrays-after-length": (0, vue.unref)(props).groupArraysAfterLength,
+							"copy-label": (0, vue.unref)(props).copyLabel,
+							"copied-label": (0, vue.unref)(props).copiedLabel,
+							"on-value-select": (path, value) => emit("valueSelect", path, value),
+							"highlight-items": (0, vue.unref)(props).highlightItems,
+							"all-expanded": (0, vue.unref)(props).allExpanded,
+							"with-chevrons": (0, vue.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"]);
+		};
+	}
+});
+//#endregion
+//#region src/JsonViewer/JsonViewer.ts
+var JsonViewer = (0, _mantine_vue_core.factory)(JsonViewer_default, {
+	classes: JsonViewer_module_default,
+	varsResolver
+});
+//#endregion
 //#region src/CodeHighlightProvider/adapters/highlight-js-adapter.ts
 function createHighlightJsAdapter(hljs) {
 	return { getHighlighter: () => ({ code, language }) => {
@@ -2018,10 +2720,16 @@ exports.CodeHighlightAdapterProvider = CodeHighlightAdapterProvider;
 exports.CodeHighlightControl = CodeHighlightControl_default;
 exports.CodeHighlightTabs = CodeHighlightTabs;
 exports.InlineCodeHighlight = InlineCodeHighlight;
+exports.JsonViewer = JsonViewer;
+exports.PATH_SEPARATOR = PATH_SEPARATOR;
 exports.createHighlightJsAdapter = createHighlightJsAdapter;
 exports.createShikiAdapter = createShikiAdapter;
+exports.getExpandablePaths = getExpandablePaths;
 exports.normalizeCode = normalizeCode;
 exports.plainTextAdapter = plainTextAdapter;
+exports.safeStringify = safeStringify;
+exports.serializeJsonViewerPath = serializePath;
+exports.serializePath = serializePath;
 exports.stripShikiCodeBlocks = stripShikiCodeBlocks;
 exports.useCodeHighlightContext = useCodeHighlightContext;
 exports.useHighlight = useHighlight;