@jfrader/ui 0.3.0 → 0.5.0

package/dist/json-viewer-BcySQfjZ.js

@@ -0,0 +1,798 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./disclosure-caret-C5T3fcl6.js";
+import { t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
+import { t as o } from "./use-controlled-state-DpeVQZNR.js";
+import { t as s } from "./button-C92uYFJW.js";
+import { n as c } from "./surface-DZ4d-2aL.js";
+import { t as l } from "./text-field-C8TWG-tY.js";
+import { useId as ee, useLayoutEffect as te, useMemo as u, useRef as d, useState as f } from "react";
+import { vars as p } from "@jfrader/tokens/vars";
+import { Fragment as m, jsx as h, jsxs as g } from "@emotion/react/jsx-runtime";
+//#region src/components/json-viewer/json-viewer.tsx
+var ne = 500, re = {
+	object: {
+		one: "key",
+		other: "keys"
+	},
+	array: {
+		one: "item",
+		other: "items"
+	}
+}, ie = 50, ae = 2e3, oe = (e, t) => Number.isInteger(e) && e > 0 ? e : t, _ = (e) => e.children.length > 0, se = (e, t, n) => n ? `${e}[${t}]` : /^[A-Za-z_$][\w$]*$/.test(t) ? `${e}.${t}` : `${e}[${JSON.stringify(t)}]`, ce = (e) => e.type === "null" ? "null" : String(e.value);
+function le(e, t) {
+	let n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Set(), i = [{
+		value: e,
+		path: t,
+		key: t,
+		level: 1,
+		index: 0
+	}];
+	try {
+		for (; i.length;) {
+			let e = i.pop();
+			if ("exit" in e) {
+				r.delete(e.exit);
+				continue;
+			}
+			let { value: t } = e, a = t === null ? "null" : Array.isArray(t) ? "array" : typeof t;
+			if (![
+				"null",
+				"array",
+				"object",
+				"string",
+				"number",
+				"boolean"
+			].includes(a) || a === "number" && !Number.isFinite(t)) return null;
+			let o = {
+				...e,
+				value: t,
+				type: a,
+				children: []
+			};
+			if (n.set(o.path, o), typeof t != "object" || !t) continue;
+			if (r.has(t) || Object.getOwnPropertySymbols(t).length) return null;
+			let s = Array.isArray(t);
+			if (s && Object.getPrototypeOf(t) !== Array.prototype || !s && Object.getPrototypeOf(t) !== Object.prototype && Object.getPrototypeOf(t) !== null) return null;
+			let c = Object.getOwnPropertyDescriptors(t), l = Object.keys(c).filter((e) => !s || e !== "length");
+			if (s && (l.length !== t.length || l.some((e, t) => e !== String(t))) || l.some((e) => !("value" in c[e]) || !c[e].enumerable)) return null;
+			r.add(t), i.push({ exit: t }), o.children = l.map((e) => se(o.path, e, s));
+			for (let e = l.length - 1; e >= 0; e--) {
+				let t = l[e];
+				i.push({
+					value: c[t].value,
+					path: o.children[e],
+					key: t,
+					parent: o.path,
+					level: o.level + 1,
+					index: e
+				});
+			}
+		}
+		return n;
+	} catch {
+		return null;
+	}
+}
+var ue = "2px", de = {
+	scrollbarWidth: "thin",
+	scrollbarColor: `${p.color.borderStrong} transparent`
+}, fe = e({
+	...c,
+	minInlineSize: 0,
+	borderRadius: p.radius.lg,
+	boxShadow: p.shadow.raised,
+	fontSize: p.textSize.sm,
+	overflow: "hidden"
+}), pe = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: p.space[1],
+	padding: p.space[2],
+	borderBlockEnd: `1px solid ${p.color.border}`
+}), me = e({
+	position: "relative",
+	display: "flex",
+	alignItems: "center",
+	flex: "1 1 12rem",
+	minInlineSize: 0
+}), he = e({
+	position: "absolute",
+	insetInlineStart: p.space[3],
+	display: "inline-flex",
+	color: p.color.textMuted,
+	pointerEvents: "none",
+	"& svg": {
+		inlineSize: p.space[4],
+		blockSize: p.space[4]
+	}
+}), ge = e({
+	flex: 1,
+	minInlineSize: 0
+}), _e = e({ paddingInlineStart: `calc(${p.space[3]} + ${p.space[4]} + ${p.space[2]})` }), ve = e({
+	color: p.color.textMuted,
+	fontSize: p.textSize.xs,
+	fontVariantNumeric: "tabular-nums",
+	whiteSpace: "nowrap",
+	paddingInline: p.space[1],
+	"&:empty": { paddingInline: 0 }
+}), ye = e({
+	display: "flex",
+	alignItems: "center",
+	gap: p.space[1],
+	marginInlineStart: "auto"
+}), be = e({
+	alignSelf: "center",
+	inlineSize: "1px",
+	blockSize: p.space[4],
+	marginInline: p.space[1],
+	background: p.color.border
+}), xe = e({
+	inlineSize: p.space[8],
+	paddingInline: 0,
+	color: p.color.textMuted,
+	"&:hover:not(:disabled)": { color: p.color.text },
+	"& svg": {
+		inlineSize: p.space[4],
+		blockSize: p.space[4]
+	}
+}), Se = e({
+	...de,
+	overflow: "auto",
+	maxBlockSize: "var(--json-max-height)",
+	padding: p.space[2],
+	fontFamily: p.font.mono,
+	"--json-indent": p.space[5],
+	"--json-caret": p.space[4],
+	"@media (max-width: 40rem)": { "--json-indent": p.space[4] }
+}), Ce = e({
+	outline: "none",
+	"&:focus-visible > [data-ui=\"json-viewer-row\"]": r
+}), we = e({
+	display: "flex",
+	alignItems: "center",
+	gap: p.space[1],
+	minBlockSize: "var(--json-row-height)",
+	paddingInlineEnd: p.space[3],
+	paddingInlineStart: `calc(var(--json-depth) * var(--json-indent) + ${p.space[1]})`,
+	borderInlineStart: `${ue} solid transparent`,
+	borderRadius: p.radius.sm,
+	cursor: "pointer",
+	whiteSpace: "pre",
+	minInlineSize: "max-content",
+	transitionProperty: "background-color",
+	transitionDuration: p.motion.duration.fast,
+	transitionTimingFunction: p.motion.easeStandard,
+	"&:hover": { background: p.color.surfaceHover },
+	"[aria-selected=\"true\"] > &": {
+		borderInlineStartColor: p.color.accent,
+		background: p.color.accentSoft
+	},
+	[a]: { transitionDuration: "0s" },
+	[i]: {
+		color: "CanvasText",
+		"[aria-selected=\"true\"] > &": { borderInlineStartColor: "Highlight" }
+	}
+}), Te = e({
+	position: "relative",
+	"&::before": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlock: 0,
+		insetInlineStart: `calc(var(--json-depth) * var(--json-indent) + ${p.space[1]} + ${ue} + var(--json-caret) / 2)`,
+		inlineSize: "1px",
+		background: p.color.border,
+		pointerEvents: "none"
+	},
+	[i]: { "&::before": { background: "GrayText" } }
+}), Ee = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	inlineSize: "var(--json-caret)",
+	color: p.color.textMuted,
+	"&[data-state]::after": n,
+	"&[data-state=\"open\"]::after": { transform: "rotate(90deg)" },
+	"&[data-state=\"open\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
+	[a]: { "&::after": { transitionDuration: "0s" } }
+}), v = { unicodeBidi: "plaintext" }, De = e({
+	...v,
+	color: p.color.text
+}), Oe = e({ color: p.color.textMuted }), ke = e({
+	...v,
+	"&[data-type=\"string\"]": { color: p.color.accentText },
+	"&[data-type=\"number\"]": {
+		color: p.color.textMuted,
+		fontVariantNumeric: "tabular-nums"
+	},
+	"&[data-type=\"boolean\"]": { color: p.color.warning },
+	"&[data-type=\"null\"]": {
+		color: p.color.textMuted,
+		fontStyle: "italic"
+	},
+	[i]: { color: "CanvasText" }
+}), Ae = e({
+	...v,
+	display: "inline-flex",
+	alignItems: "center",
+	paddingInline: p.space[2],
+	border: `1px solid ${p.color.border}`,
+	borderRadius: p.radius.full,
+	color: p.color.textMuted,
+	fontFamily: p.font.sans,
+	fontSize: p.textSize.xs,
+	fontVariantNumeric: "tabular-nums",
+	lineHeight: p.lineHeight.base
+}), je = e({
+	color: p.color.accentText,
+	fontFamily: p.font.sans
+}), Me = e({
+	color: p.color.text,
+	background: p.color.accentSoft,
+	borderRadius: `calc(${p.radius.sm} / 2)`,
+	textDecoration: "underline",
+	textDecorationColor: p.color.accentText,
+	textUnderlineOffset: "0.2em",
+	[i]: {
+		color: "Highlight",
+		background: "Canvas"
+	}
+}), Ne = e({
+	display: "grid",
+	gap: p.space[2],
+	padding: p.space[3],
+	borderBlockStart: `1px solid ${p.color.border}`,
+	background: p.color.surface,
+	minInlineSize: 0
+}), Pe = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: p.space[2],
+	minInlineSize: 0
+}), Fe = e({
+	...v,
+	fontFamily: p.font.mono,
+	fontWeight: p.fontWeight.medium,
+	overflowWrap: "anywhere",
+	minInlineSize: 0
+}), Ie = e({
+	...de,
+	margin: 0,
+	padding: p.space[3],
+	border: `1px solid ${p.color.borderSubtle}`,
+	borderRadius: p.radius.md,
+	background: p.color.surfaceInset,
+	whiteSpace: "pre-wrap",
+	overflowWrap: "anywhere",
+	fontFamily: p.font.mono,
+	fontSize: p.textSize.xs,
+	maxBlockSize: "var(--json-max-height)",
+	overflow: "auto",
+	"&:focus-visible": r
+}), Le = e({
+	paddingInline: p.space[3],
+	paddingBlock: p.space[2],
+	borderBlockStart: `1px solid ${p.color.border}`,
+	color: p.color.textMuted,
+	fontSize: p.textSize.xs,
+	"&:empty": {
+		padding: 0,
+		borderBlockStart: 0
+	}
+}), Re = e({
+	padding: p.space[4],
+	color: p.color.textMuted
+}), y = (e) => /* @__PURE__ */ h("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: e
+}), ze = y(/* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("circle", {
+	cx: "11",
+	cy: "11",
+	r: "7"
+}), /* @__PURE__ */ h("path", { d: "m20 20-3.5-3.5" })] })), Be = y(/* @__PURE__ */ h("path", { d: "m18 15-6-6-6 6" })), Ve = y(/* @__PURE__ */ h("path", { d: "m6 9 6 6 6-6" })), He = y(/* @__PURE__ */ h("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })), Ue = y(/* @__PURE__ */ h("path", { d: "m7 20 5-5 5 5M7 4l5 5 5-5" })), We = y(/* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("rect", {
+	x: "9",
+	y: "9",
+	width: "12",
+	height: "12",
+	rx: "2"
+}), /* @__PURE__ */ h("path", { d: "M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1" })] })), Ge = y(/* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("path", { d: "M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7" }), /* @__PURE__ */ h("path", { d: "M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7" })] }));
+function b({ data: e, rootName: n = "root", expandedValue: r, defaultExpandedValue: i, onExpandedValueChange: a, defaultExpandDepth: c = 1, query: se, defaultQuery: ue = "", onQueryChange: de, value: v, defaultValue: y, onValueChange: b, onNodeActivate: qe, searchable: x = !0, copyable: S = !0, showPath: Je = !0, pageSize: Ye = ie, maxMatches: Xe = ae, maxHeight: C = "26rem", size: Ze = "md", locale: w, labels: Qe, onCopy: $e, onCopyError: et, slotProps: T, ref: tt, className: nt, sx: rt, style: it, onKeyDown: at, onClick: ot, "aria-label": st, "aria-labelledby": E, "aria-describedby": ct, ...lt }) {
+	let D = d(null), O = d(null), k = d(/* @__PURE__ */ new Map()), A = d(null), j = d(!1), M = d({
+		text: "",
+		time: 0
+	}), ut = ee(), N = u(() => le(e, n), [e, n]), P = u(() => new Intl.NumberFormat(w), [w]), dt = u(() => new Intl.PluralRules(w), [w]), F = {
+		tree: "JSON",
+		search: "Search JSON",
+		expandAll: "Expand all",
+		collapseAll: "Collapse all",
+		previousMatch: "Previous match",
+		nextMatch: "Next match",
+		copyValue: "Copy value",
+		copyPath: "Copy path",
+		copied: "Copied",
+		copyFailed: "Copy failed",
+		invalidData: "Invalid JSON data",
+		count: (e, t) => `${P.format(e)} ${re[t][dt.select(e) === "one" ? "one" : "other"]}`,
+		match: (e, t, n) => `${P.format(e)} / ${P.format(t)}${n ? "+" : ""}`,
+		showMore: (e) => `Show more (${P.format(e)} remaining)`,
+		...Qe
+	}, ft = oe(Ye, ie), pt = oe(Xe, ae), [mt] = f(() => i ?? [...N?.values() ?? []].filter((e) => _(e) && e.level <= Math.max(0, Math.floor(c))).map((e) => e.path)), [I = [], ht] = o(r, mt, (e) => a?.([...e])), [L = "", gt] = o(se, ue, de), [R = n, _t] = o(v, y ?? n, b), [vt, z] = f(v ?? y ?? n), [yt, bt] = f({
+		data: e,
+		pages: /* @__PURE__ */ new Map()
+	}), [xt, B] = f({
+		query: L,
+		closed: /* @__PURE__ */ new Set(),
+		opened: /* @__PURE__ */ new Set(),
+		pages: /* @__PURE__ */ new Map()
+	}), [St, Ct] = f(""), wt = Object.is(yt.data, e) ? yt.pages : /* @__PURE__ */ new Map(), V = xt.query === L ? xt : {
+		query: L,
+		closed: /* @__PURE__ */ new Set(),
+		opened: /* @__PURE__ */ new Set(),
+		pages: /* @__PURE__ */ new Map()
+	}, H = u(() => {
+		let e = [], t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Map(), r = L.toLowerCase(), i = !1;
+		if (L && N) for (let a of N.values()) {
+			if (!a.key.toLowerCase().includes(r) && (a.type === "object" || a.type === "array" || !ce(a).toLowerCase().includes(r))) continue;
+			if (e.length === pt) {
+				i = !0;
+				break;
+			}
+			e.push(a.path);
+			let o = a;
+			for (; o.parent !== void 0;) t.add(o.parent), n.set(o.parent, Math.max(n.get(o.parent) ?? 0, o.index + 1)), o = N.get(o.parent);
+		}
+		return {
+			matches: e,
+			ancestors: t,
+			limits: n,
+			truncated: i
+		};
+	}, [
+		N,
+		L,
+		pt
+	]), U = (e) => !V.closed.has(e) && (I.includes(e) || H.ancestors.has(e) || V.opened.has(e)), W = [], G = /* @__PURE__ */ new Map();
+	if (N) {
+		let e = [{
+			path: n,
+			level: 1,
+			position: 1,
+			setSize: 1
+		}];
+		for (; e.length;) {
+			let t = e.pop();
+			if (W.push(t), t.more !== void 0) continue;
+			let n = N.get(t.path);
+			if (!U(t.path) || !_(n)) continue;
+			let r = Math.min(n.children.length, Math.max(wt.get(t.path) ?? ft, H.limits.get(t.path) ?? 0, L ? V.pages.get(t.path) ?? 0 : 0)), i = n.children.length - r, a = r + +!!i, o = n.children.slice(0, r).map((e, n) => ({
+				path: e,
+				parent: t.path,
+				level: t.level + 1,
+				position: n + 1,
+				setSize: a
+			}));
+			i && o.push({
+				path: `${t.path}\u0000more`,
+				parent: t.path,
+				level: t.level + 1,
+				position: a,
+				setSize: a,
+				more: i
+			}), G.set(t.path, o), e.push(...o.toReversed());
+		}
+	}
+	let [K, Tt] = f({
+		nodes: N,
+		previousNodes: N,
+		selected: R,
+		path: R
+	}), Et = Object.is(K.nodes, N) ? K.previousNodes : K.nodes, Dt = new Set(W.map((e) => e.path)), Ot = (e) => {
+		let t = e;
+		for (; t !== void 0;) {
+			if (Dt.has(t)) return t;
+			t = N?.get(t)?.parent ?? Et?.get(t)?.parent;
+		}
+		return n;
+	}, q = Ot(vt), J = N?.get(R) ?? N?.get(Ot(K.selected === R ? K.path : R)), kt = J?.path ?? n;
+	(!Object.is(K.nodes, N) || K.selected !== R || K.path !== kt) && Tt({
+		nodes: N,
+		previousNodes: Et,
+		selected: R,
+		path: kt
+	}), te(() => {
+		if (Object.is(yt.data, e) || (bt({
+			data: e,
+			pages: /* @__PURE__ */ new Map()
+		}), B({
+			query: L,
+			closed: /* @__PURE__ */ new Set(),
+			opened: /* @__PURE__ */ new Set(),
+			pages: /* @__PURE__ */ new Map()
+		})), vt === q) return;
+		let t = A.current, n = D.current?.ownerDocument, r = t && n && (n.activeElement === t || !t.isConnected && n.activeElement === n.body);
+		z(q), r && (j.current = !0, k.current.get(q)?.focus(), j.current = !1);
+	});
+	let Y = (e) => {
+		let t = k.current.get(e);
+		z(e), t?.focus(), t?.querySelector(":scope > [data-ui=\"json-viewer-row\"]")?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest",
+			behavior: "instant"
+		});
+	}, X = (e) => {
+		let t = [...new Set(e)];
+		(t.length !== new Set(I).size || t.some((e) => !I.includes(e))) && ht(t);
+	}, At = (e) => {
+		if (L) {
+			let t = new Set(V.closed), n = new Set(V.opened);
+			U(e) ? (t.add(e), n.delete(e)) : (t.delete(e), n.add(e)), B({
+				...V,
+				closed: t,
+				opened: n
+			});
+		} else X(U(e) ? I.filter((t) => t !== e) : [...I, e]);
+	}, jt = (t) => {
+		let n = t.parent, r = G.get(n).length - 1, i = Math.min(N.get(n).children.length, r + ft);
+		L ? B({
+			...V,
+			pages: new Map(V.pages).set(n, i)
+		}) : bt({
+			data: e,
+			pages: new Map(wt).set(n, i)
+		});
+		let a = N.get(n).children[r];
+		_t(a), z(a), A.current = k.current.get(t.path) ?? null, Z.current = a;
+	}, Z = d(null);
+	te(() => {
+		Z.current !== null && (j.current = !0, k.current.get(Z.current)?.focus(), j.current = !1, Z.current = null);
+	});
+	let Mt = (e) => {
+		if (e.more !== void 0) {
+			jt(e);
+			return;
+		}
+		let t = N.get(e.path);
+		_(t) ? At(e.path) : qe?.({
+			path: t.path,
+			value: t.value,
+			type: t.type
+		});
+	}, Nt = async (e, t = J?.path) => {
+		if (S && t !== void 0 && N?.has(t)) try {
+			let n = e === "path" ? t : JSON.stringify(N.get(t).value, null, 2), r = D.current?.ownerDocument.defaultView?.navigator.clipboard;
+			if (!r) throw Error("Clipboard API unavailable");
+			await r.writeText(n), Ct(F.copied), $e?.({
+				kind: e,
+				path: t,
+				text: n
+			});
+		} catch (n) {
+			Ct(F.copyFailed), et?.({
+				kind: e,
+				path: t,
+				error: n
+			});
+		}
+	}, Pt = (e, t) => {
+		if (!H.matches.length) return;
+		let n = H.matches.indexOf(R), r = n < 0 ? e > 0 ? 0 : H.matches.length - 1 : (n + e + H.matches.length) % H.matches.length, i = H.matches[r];
+		B({
+			...V,
+			closed: /* @__PURE__ */ new Set()
+		}), _t(i), t && (z(i), Z.current = i);
+	}, Ft = (e) => {
+		if (at?.(e), e.defaultPrevented) return;
+		if (e.target === O.current) {
+			e.key === "Enter" && (e.preventDefault(), Pt(e.shiftKey ? -1 : 1, !1)), e.key === "Escape" && (e.preventDefault(), gt("")), e.key === "ArrowDown" && (e.preventDefault(), Y(q));
+			return;
+		}
+		let t = e.target.closest("[role=\"treeitem\"]");
+		if (!t || !D.current?.contains(t) || e.target !== t) return;
+		let n = W.findIndex((e) => k.current.get(e.path) === t), r = W[n];
+		if (!r) return;
+		if ((e.ctrlKey || e.metaKey) && !e.altKey && e.key.toLowerCase() === "c") {
+			S && r.more === void 0 && !t.ownerDocument.getSelection()?.toString() && (e.preventDefault(), Nt(e.shiftKey ? "path" : "value", r.path));
+			return;
+		}
+		if (e.ctrlKey || e.metaKey || e.altKey || e.nativeEvent.isComposing) return;
+		let i = N?.get(r.path), a = {
+			ArrowDown: () => Y(W[Math.min(n + 1, W.length - 1)].path),
+			ArrowUp: () => Y(W[Math.max(n - 1, 0)].path),
+			Home: () => Y(W[0].path),
+			End: () => Y(W[W.length - 1].path),
+			ArrowRight: () => {
+				i && _(i) && (U(r.path) ? Y(G.get(r.path)[0].path) : At(r.path));
+			},
+			ArrowLeft: () => {
+				i && _(i) && U(r.path) ? At(r.path) : r.parent && Y(r.parent);
+			},
+			Enter: () => Mt(r),
+			" ": () => Mt(r),
+			"/": () => {
+				x && O.current?.focus();
+			}
+		};
+		if (a[e.key] && (e.key !== "/" || x)) e.preventDefault(), a[e.key]();
+		else if ([...e.key].length === 1) {
+			let t = Date.now(), r = t - M.current.time < ne ? M.current.text + e.key : e.key;
+			M.current = {
+				text: r,
+				time: t
+			};
+			let i = [...r].every((e) => e === r[0]) ? r[0] : r, a = [...W.slice(n + 1), ...W.slice(0, n + 1)].find((e) => N?.get(e.path)?.key.toLocaleLowerCase(w).startsWith(i.toLocaleLowerCase(w)));
+			a && (e.preventDefault(), Y(a.path));
+		}
+	}, It = (e, t = !1) => {
+		let n = L ? e.toLowerCase().indexOf(L.toLowerCase()) : -1, r = (e) => t ? JSON.stringify(e).slice(1, -1) : e;
+		return n < 0 ? t ? JSON.stringify(e) : e : /* @__PURE__ */ g(m, { children: [
+			t && "\"",
+			r(e.slice(0, n)),
+			/* @__PURE__ */ h("mark", {
+				"data-ui": "json-viewer-match",
+				css: Me,
+				children: r(e.slice(n, n + L.length))
+			}),
+			r(e.slice(n + L.length)),
+			t && "\""
+		] });
+	}, Q = /* @__PURE__ */ new Map();
+	for (let [e, t] of W.toReversed().entries()) {
+		let n = N?.get(t.path), r = G.get(t.path), i = `${ut}-label-${e}`, a = r ? `${ut}-group-${e}` : void 0;
+		Q.set(t.path, /* @__PURE__ */ g("div", {
+			"data-ui": "json-viewer-node",
+			role: "none",
+			children: [/* @__PURE__ */ h("div", {
+				id: `${ut}-item-${e}`,
+				role: "treeitem",
+				"data-ui": "json-viewer-item",
+				"aria-labelledby": i,
+				"aria-owns": a,
+				"aria-level": t.level,
+				"aria-posinset": t.position,
+				"aria-setsize": t.setSize,
+				"aria-expanded": n && _(n) ? U(t.path) : void 0,
+				"aria-selected": n ? R === t.path : void 0,
+				tabIndex: q === t.path ? 0 : -1,
+				css: Ce,
+				ref: (e) => {
+					e ? k.current.set(t.path, e) : k.current.delete(t.path);
+				},
+				onFocus: (e) => {
+					e.target === e.currentTarget && (A.current = e.currentTarget, z(t.path), n && !j.current && _t(t.path));
+				},
+				onBlur: (e) => {
+					(!e.relatedTarget || !D.current?.contains(e.relatedTarget)) && (A.current = null);
+				},
+				children: /* @__PURE__ */ g("div", {
+					"data-ui": "json-viewer-row",
+					className: T?.row?.className,
+					css: [we, T?.row?.css],
+					style: { "--json-depth": t.level - 1 },
+					children: [/* @__PURE__ */ h("span", {
+						"data-ui": "json-viewer-caret",
+						"data-state": n && _(n) ? U(t.path) ? "open" : "closed" : void 0,
+						"aria-hidden": "true",
+						css: Ee
+					}), /* @__PURE__ */ h("span", {
+						"data-ui": "json-viewer-label",
+						id: i,
+						children: t.more === void 0 ? /* @__PURE__ */ g(m, { children: [
+							/* @__PURE__ */ h("span", {
+								"data-ui": "json-viewer-key",
+								css: De,
+								children: It(n.key)
+							}),
+							/* @__PURE__ */ h("span", {
+								css: Oe,
+								children: ":"
+							}),
+							" ",
+							n.type === "object" || n.type === "array" ? /* @__PURE__ */ h("span", {
+								"data-ui": "json-viewer-type",
+								className: T?.value?.className,
+								css: [Ae, T?.value?.css],
+								children: F.count(n.children.length, n.type)
+							}) : /* @__PURE__ */ h("span", {
+								"data-ui": "json-viewer-value",
+								"data-type": n.type,
+								className: T?.value?.className,
+								css: [ke, T?.value?.css],
+								children: n.type === "string" ? It(String(n.value), !0) : It(JSON.stringify(n.value))
+							})
+						] }) : /* @__PURE__ */ h("span", {
+							css: je,
+							children: F.showMore(t.more)
+						})
+					})]
+				})
+			}), r && /* @__PURE__ */ h("div", {
+				id: a,
+				role: "group",
+				"data-ui": "json-viewer-group",
+				className: T?.group?.className,
+				css: [Te, T?.group?.css],
+				style: { "--json-depth": t.level - 1 },
+				children: r.map((e) => Q.get(e.path))
+			})]
+		}, t.path));
+	}
+	let $ = (e, t, n, r = !1) => /* @__PURE__ */ h(s, {
+		"data-ui": "json-viewer-action",
+		size: "sm",
+		variant: "ghost",
+		"aria-label": e,
+		title: e,
+		className: T?.action?.className,
+		css: [xe, T?.action?.css],
+		disabled: r,
+		onClick: n,
+		render: (e) => /* @__PURE__ */ h("button", {
+			...e,
+			type: "button",
+			disabled: r
+		}),
+		children: t
+	}), Lt = /* @__PURE__ */ h("span", {
+		"aria-hidden": "true",
+		css: be
+	});
+	return /* @__PURE__ */ h(t, {
+		className: nt,
+		styles: fe,
+		sx: rt,
+		children: (e) => /* @__PURE__ */ g("div", {
+			...lt,
+			ref: tt,
+			"data-ui": "json-viewer",
+			className: e,
+			style: {
+				"--json-max-height": typeof C == "number" ? `${C}px` : C,
+				"--json-row-height": Ze === "sm" ? p.space[8] : p.space[10],
+				...it
+			},
+			onKeyDown: Ft,
+			onClick: (e) => {
+				if (ot?.(e), e.defaultPrevented) return;
+				let t = e.target.closest("[role=\"treeitem\"]");
+				if (!t || !D.current?.contains(t)) return;
+				let n = W.find((e) => k.current.get(e.path) === t);
+				n && (Y(n.path), Mt(n));
+			},
+			children: [N ? /* @__PURE__ */ g(m, { children: [
+				/* @__PURE__ */ g("div", {
+					"data-ui": "json-viewer-toolbar",
+					className: T?.toolbar?.className,
+					css: [pe, T?.toolbar?.css],
+					children: [x && /* @__PURE__ */ g("span", {
+						css: me,
+						children: [/* @__PURE__ */ h("span", {
+							css: he,
+							"aria-hidden": "true",
+							children: ze
+						}), /* @__PURE__ */ h(l, {
+							"data-ui": "json-viewer-search",
+							ref: O,
+							"aria-label": F.search,
+							placeholder: F.search,
+							value: L,
+							onValueChange: gt,
+							size: "sm",
+							className: T?.search?.className,
+							sx: [ge, T?.search?.css],
+							slotProps: { control: { css: _e } }
+						})]
+					}), /* @__PURE__ */ g("span", {
+						css: ye,
+						children: [
+							x && /* @__PURE__ */ g(m, { children: [
+								/* @__PURE__ */ h("span", {
+									"data-ui": "json-viewer-match-status",
+									role: "status",
+									"aria-live": "polite",
+									"aria-atomic": "true",
+									css: ve,
+									children: L ? F.match(Math.max(0, H.matches.indexOf(R) + 1), H.matches.length, H.truncated) : ""
+								}),
+								$(F.previousMatch, Be, () => Pt(-1, !0), !H.matches.length),
+								$(F.nextMatch, Ve, () => Pt(1, !0), !H.matches.length),
+								Lt
+							] }),
+							$(F.expandAll, He, () => {
+								B({
+									...V,
+									closed: /* @__PURE__ */ new Set()
+								}), X([...N.values()].filter(_).map((e) => e.path));
+							}),
+							$(F.collapseAll, Ue, () => {
+								B({
+									...V,
+									closed: new Set(H.ancestors)
+								}), X(_(N.get(n)) ? [n] : []);
+							}),
+							S && /* @__PURE__ */ g(m, { children: [
+								Lt,
+								$(F.copyValue, We, () => {
+									Nt("value");
+								}),
+								$(F.copyPath, Ge, () => {
+									Nt("path");
+								})
+							] })
+						]
+					})]
+				}),
+				/* @__PURE__ */ h("div", {
+					ref: D,
+					role: "tree",
+					"data-ui": "json-viewer-tree",
+					"aria-label": st ?? (E ? void 0 : F.tree),
+					"aria-labelledby": E,
+					"aria-describedby": ct,
+					className: T?.tree?.className,
+					css: [Se, T?.tree?.css],
+					children: Q.get(n)
+				}),
+				Je && J && /* @__PURE__ */ g("div", {
+					"data-ui": "json-viewer-path-bar",
+					className: T?.pathBar?.className,
+					css: [Ne, T?.pathBar?.css],
+					children: [/* @__PURE__ */ g("span", {
+						css: Pe,
+						children: [/* @__PURE__ */ h("code", {
+							"data-ui": "json-viewer-path",
+							css: Fe,
+							children: J.path
+						}), /* @__PURE__ */ h("span", {
+							"data-ui": "json-viewer-current-type",
+							css: Ae,
+							children: J.type
+						})]
+					}), /* @__PURE__ */ h("pre", {
+						"data-ui": "json-viewer-details",
+						dir: "ltr",
+						tabIndex: 0,
+						css: Ie,
+						children: Ke(J.value)
+					})]
+				})
+			] }) : /* @__PURE__ */ h("div", {
+				role: "group",
+				"data-ui": "json-viewer-invalid",
+				"aria-label": st ?? F.tree,
+				"aria-labelledby": E,
+				"aria-describedby": ct,
+				css: Re,
+				children: F.invalidData
+			}), /* @__PURE__ */ h("div", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				"data-ui": "json-viewer-status",
+				className: T?.status?.className,
+				css: [Le, T?.status?.css],
+				children: St
+			})]
+		})
+	});
+}
+b.displayName = "JsonViewer";
+function Ke(e) {
+	try {
+		return JSON.stringify(e, null, 2);
+	} catch {
+		return "…";
+	}
+}
+//#endregion
+export { b as t };