@jsonup/vue 0.0.1

package/dist/index.js

@@ -0,0 +1,1024 @@
+import { createDocument, getChildren, isJsonDocument } from "@jsonup/core";
+import { insert, move, remove, renameKey, updateValue } from "@jsonup/operation";
+import { computed, createVNode, defineComponent, h, isVNode, mergeProps, onMounted, onUnmounted, ref, shallowRef, triggerRef, watch } from "vue";
+import { useCssVars } from "@jsonup/themes";
+//#region ../../node_modules/.pnpm/virtua@0.49.1_vue@3.5.38_typescript@6.0.3_/node_modules/virtua/lib/vue/index.js
+const a = null, { min: u, max: f, abs: d, floor: p } = Math, m = (e, t, r) => u(r, f(t, e)), h$1 = (e) => [...e].sort((e, t) => e - t), _ = "function" == typeof queueMicrotask ? queueMicrotask : (e) => {
+	Promise.resolve().then(e);
+}, b = () => {
+	let e;
+	return [new Promise((t) => {
+		e = t;
+	}), e];
+}, g = (e) => {
+	let t;
+	return () => (e && (t = e(), e = void 0), t);
+}, v = (e, t, r) => {
+	const o = r ? "unshift" : "push";
+	for (let r = 0; r < t; r++) e[o](-1);
+	return e;
+}, y = (e, t) => {
+	const r = e.t[t];
+	return -1 === r ? e.o : r;
+}, S = (e, t, r) => {
+	const o = -1 === e.t[t];
+	return e.t[t] = r, e.i = u(t, e.i), o;
+}, z = (e, t) => {
+	if (!e.l) return 0;
+	if (e.i >= t) return e.u[t];
+	e.i < 0 && (e.u[0] = 0, e.i = 0);
+	let r = e.i, o = e.u[r];
+	for (; r < t;) o += y(e, r), e.u[++r] = o;
+	return e.i = t, o;
+}, x = (e, t, r = 0, o = e.l - 1) => {
+	let n = r;
+	for (; r <= o;) {
+		const s = p((r + o) / 2);
+		z(e, s) <= t ? (n = s, r = s + 1) : o = s - 1;
+	}
+	return m(n, 0, e.l - 1);
+}, $ = (e, t, r) => {
+	const o = t - e.l;
+	return e.i = r ? -1 : u(t - 1, e.i), e.l = t, o > 0 ? (v(e.u, o), v(e.t, o, r), e.o * o) : (e.u.splice(o), (r ? e.t.splice(0, -o) : e.t.splice(o)).reduce((t, r) => t - (-1 === r ? e.o : r), 0));
+}, w = (e) => e.documentElement, I = (e) => e.ownerDocument, O = (e) => e.defaultView, k = /*#__PURE__*/ g(() => !!/iP(hone|od|ad)/.test(navigator.userAgent) || "MacIntel" === navigator.platform && navigator.maxTouchPoints > 0), j = /*#__PURE__*/ g(() => "scrollBehavior" in w(document).style), N = (e, t = 40, r = 0, o, n = !1) => {
+	let s = !!r, i = 1, l = 0, c = 0, p = 0, m = 0, _ = 0, b = 0, g = 0, w = 0, I = a, O = [0, s ? f(r - 1, 0) : -1], j = 0, N = !1;
+	const B = ((e, t, r) => ({
+		o: t,
+		t: r ? v(r.slice(0, u(e, r.length)), f(0, e - r.length)) : v([], e),
+		l: e,
+		i: -1,
+		u: v([], e + 1)
+	}))(e, o ? o[1] : t, o && o[0]), T = /* @__PURE__ */ new Set(), q = () => p - c, M = () => q() + _ + m, E = (e, t) => ((e, t, r, o) => {
+		if (o = u(o, e.l - 1), z(e, o) <= t) {
+			const n = x(e, r, o);
+			return [x(e, t, o, n), n];
+		}
+		{
+			const n = x(e, t, void 0, o);
+			return [n, x(e, r, n)];
+		}
+	})(B, e, t, O[0]), P = () => z(B, B.l), R = (e, t) => {
+		const r = z(B, e) - _;
+		return t ? P() - r - A(e) : r;
+	}, A = (e) => y(B, e), C = (e, t = -1) => B.t[e] === t, H = (e) => {
+		e && (k() && 0 !== g || I && 1 === w ? _ += e : m += e);
+	};
+	return {
+		p: () => {
+			T.clear();
+		},
+		m: () => i,
+		h: () => ((e) => [e.t.slice(), e.o])(B),
+		v: (e = 200) => {
+			if (!N || s) return O;
+			let t, r;
+			if (b) [t, r] = O;
+			else {
+				let o = f(0, M()), s = o + l;
+				n || (e = f(0, e), 1 !== g && (o -= e), 2 !== g && (s += e)), [t, r] = O = E(f(0, o), f(0, s)), I && (t = u(t, I[0]), r = f(r, I[1]));
+			}
+			return [f(t, 0), u(r, B.l - 1)];
+		},
+		S: (e) => x(B, e - c),
+		I: C,
+		O: R,
+		k: A,
+		j: () => B.l,
+		N: () => p,
+		B: () => 0 !== g,
+		T: () => l,
+		q: () => c,
+		M: P,
+		P: () => (b = m, m = 0, [b, 2 === w]),
+		R: (e, t) => {
+			const r = [e, t];
+			return T.add(r), () => {
+				T.delete(r);
+			};
+		},
+		A: (e, t) => {
+			let r, o, u = 0;
+			switch (e) {
+				case 1: {
+					if (t === p && 0 === w) break;
+					const e = b;
+					b = 0;
+					const r = t - p, n = d(r);
+					e && n < d(e) + 1 || 0 !== w || (g = r < 0 ? 2 : 1), s && (s = !1), p = t, u = 4;
+					const i = q();
+					i >= -l && i <= P() && (u += 1, o = n > l);
+					break;
+				}
+				case 2:
+					u = 8, 0 !== g && (r = !0, u += 1), g = 0, w = 0, I = a;
+					break;
+				case 3: {
+					const e = t.filter(([e, t]) => !C(e, t));
+					if (!e.length) break;
+					H(e.reduce((e, [t, r]) => {
+						let o;
+						if (2 === w) o = !0;
+						else if (I && 1 === w) o = t < I[0];
+						else {
+							const e = q(), r = R(t), n = A(t);
+							o = 1 !== g && 0 === w ? r + n < e : r < e && r + n < e + l;
+						}
+						return o && (e += r - A(t)), e;
+					}, 0));
+					for (const [t, r] of e) {
+						const e = A(t), o = S(B, t, r);
+						n && (j += o ? r : r - e);
+					}
+					n && l && j > l && (H(((e, t) => {
+						let r = 0;
+						const o = [];
+						e.t.forEach((e, n) => {
+							-1 !== e && (o.push(e), n < t && r++);
+						}), e.i = -1;
+						const n = h$1(o), s = n.length, i = s / 2 | 0, l = s % 2 == 0 ? (n[i - 1] + n[i]) / 2 : n[i], c = e.o;
+						return ((e.o = l) - c) * f(t - r, 0);
+					})(B, x(B, M()))), n = !1), u = 3, o = !0;
+					break;
+				}
+				case 4:
+					l !== t && (l || (N = o = !0), l = t, u = 3);
+					break;
+				case 5:
+					t[1] ? (H($(B, t[0], !0)), w = 2, u = 1) : ($(B, t[0]), u = 1);
+					break;
+				case 6:
+					c = t;
+					break;
+				case 7:
+					w = 1;
+					break;
+				case 8: I = E(t, t + l), u = 1;
+			}
+			u && (i = 1 + (2147483647 & i), r && _ && (m += _, _ = 0), T.forEach(([e, t]) => {
+				u & e && t(o);
+			}));
+		}
+	};
+}, B = setTimeout, T = (e, t) => t ? -e : e, q = (e, t, r, o, n, s) => {
+	const i = Date.now;
+	let l = 0, c = !1, u = !1, f = !1, d = !1;
+	const p = (() => {
+		let t;
+		const r = () => {
+			t != a && clearTimeout(t);
+		}, o = () => {
+			r(), t = B(() => {
+				t = a, (() => {
+					if (c || u) return c = !1, void p();
+					f = !1, e.A(2);
+				})();
+			}, 150);
+		};
+		return o.C = r, o;
+	})(), m = () => {
+		l = i(), f && (d = !0), s && e.A(6, s()), e.A(1, o()), p();
+	}, h = (t) => {
+		if (c || !e.B() || t.ctrlKey) return;
+		const o = i() - l;
+		150 > o && 50 < o && (r ? t.deltaX : t.deltaY) && (c = !0);
+	}, _ = () => {
+		u = !0, f = d = !1;
+	}, b = () => {
+		u = !1, k() && (f = !0);
+	};
+	return t.addEventListener("scroll", m), t.addEventListener("wheel", h, { passive: !0 }), t.addEventListener("touchstart", _, { passive: !0 }), t.addEventListener("touchend", b, { passive: !0 }), {
+		H: () => {
+			t.removeEventListener("scroll", m), t.removeEventListener("wheel", h), t.removeEventListener("touchstart", _), t.removeEventListener("touchend", b), p.C();
+		},
+		V: () => {
+			const [t, r] = e.P();
+			t && (n(t, r, d), d = !1, r && e.T() > e.M() && e.A(1, o()));
+		}
+	};
+}, M = (e, t, r) => {
+	let o;
+	return [async (n, s) => {
+		if (!await t()) return;
+		o && o();
+		const i = () => {
+			const [t, r] = b();
+			return o = () => {
+				r(!1);
+			}, e.T() && B(o, 150), [t, e.R(2, () => {
+				r(!0);
+			})];
+		};
+		if (s && j()) e.A(8, n()), _(async () => {
+			for (;;) {
+				let t = !0;
+				for (let [r, o] = e.v(); r <= o; r++) if (e.I(r)) {
+					t = !1;
+					break;
+				}
+				if (t) break;
+				const [r, o] = i();
+				try {
+					if (!await r) return;
+				} finally {
+					o();
+				}
+			}
+			e.A(7), r(n(), s);
+		});
+		else for (;;) {
+			const [t, o] = i();
+			try {
+				if (e.A(7), r(n()), !await t) return;
+			} finally {
+				o();
+			}
+		}
+	}, () => {
+		o && o();
+	}];
+}, E = (e) => {
+	let t;
+	return {
+		F(r) {
+			(t || (t = new (O(I(r))).ResizeObserver(e))).observe(r);
+		},
+		J(e) {
+			t.unobserve(e);
+		},
+		H() {
+			t && t.disconnect();
+		}
+	};
+}, P = /*#__PURE__*/ defineComponent({
+	props: {
+		L: {
+			type: Object,
+			required: !0
+		},
+		W: {
+			type: Object,
+			required: !0
+		},
+		X: {
+			type: Object,
+			required: !0
+		},
+		Y: {
+			type: Function,
+			required: !0
+		},
+		D: {
+			type: Number,
+			required: !0
+		},
+		U: { type: Boolean },
+		G: { type: Boolean },
+		K: { type: Boolean },
+		Z: {
+			type: String,
+			required: !0
+		},
+		ee: Object
+	},
+	setup(e) {
+		const l = ref(), c = computed(() => e.L.value && e.W.O(e.D, e.K)), a = computed(() => e.L.value && e.W.I(e.D));
+		return watch(() => l.value && e.D, (t, r, o) => {
+			o(e.Y(l.value, e.D));
+		}, { flush: "post" }), () => {
+			const { X: t, U: r, G: o, Z: u } = e, f = a.value, { style: d, ...p } = e.ee ?? {}, m = {
+				contain: "layout style",
+				position: f && o ? void 0 : "absolute",
+				[r ? "height" : "width"]: "100%",
+				[r ? "top" : "left"]: "0px",
+				[r ? "left" : "top"]: c.value + "px",
+				visibility: !f || o ? void 0 : "hidden",
+				...d
+			};
+			return r && (m.display = "inline-flex"), createVNode(u, mergeProps({
+				ref: l,
+				style: m
+			}, p), "function" == typeof (h = t) || "[object Object]" === Object.prototype.toString.call(h) && !isVNode(h) ? t : {
+				default: () => [t],
+				_: 2
+			}, 16, ["style"]);
+			var h;
+		};
+	}
+}), R = (e, t) => {
+	if (1 === e.length) {
+		const t = e[0].key;
+		if (null != t) return t;
+	}
+	return "_" + t;
+}, A = (e, t) => e[0] === t[0] && e[1] === t[1], C = /*#__PURE__*/ defineComponent({
+	props: {
+		data: {
+			type: Array,
+			required: !0
+		},
+		bufferSize: Number,
+		itemSize: Number,
+		shift: Boolean,
+		horizontal: Boolean,
+		startMargin: {
+			type: Number,
+			default: 0
+		},
+		ssrCount: Number,
+		scrollRef: Object,
+		as: {
+			type: String,
+			default: "div"
+		},
+		item: {
+			type: String,
+			default: "div"
+		},
+		itemProps: Function,
+		keepMounted: Array,
+		cache: Object
+	},
+	emits: ["scroll", "scrollEnd"],
+	setup(e, { emit: s, expose: u, slots: d }) {
+		let p = !!e.ssrCount;
+		const _ = e.horizontal, g = ref(), v = N(e.data.length, e.itemSize, e.ssrCount, e.cache, !e.itemSize), y = ((e, t) => {
+			let r;
+			const o = t ? "width" : "height", n = /* @__PURE__ */ new WeakMap(), s = E((t) => {
+				const s = [];
+				for (const { target: i, contentRect: l } of t) if (i.offsetParent) if (i === r) e.A(4, l[o]);
+				else {
+					const e = n.get(i);
+					e != a && s.push([e, l[o]]);
+				}
+				s.length && e.A(3, s);
+			});
+			return {
+				te(e) {
+					s.F(r = e);
+				},
+				re: (e, t) => (n.set(e, t), s.F(e), () => {
+					n.delete(e), s.J(e);
+				}),
+				p: s.H
+			};
+		})(v, _), S = ((e, t) => {
+			let r, o, n = b(), s = !1;
+			const i = t ? "scrollLeft" : "scrollTop", l = t ? "overflowX" : "overflowY", [c, a] = M(e, () => n[0], (e, o) => {
+				e = T(e, s), o ? r.scrollTo({
+					[t ? "left" : "top"]: e,
+					behavior: "smooth"
+				}) : r[i] = e;
+			});
+			return {
+				oe(c, u) {
+					r = u, t && (s = "rtl" === getComputedStyle(u).direction), o = q(e, u, t, () => T(u[i], s), (t, r, o) => {
+						if (o) {
+							const e = u.style, t = e[l];
+							e[l] = "hidden", B(() => {
+								e[l] = t;
+							});
+						}
+						u[i] = T(e.N() + t, s), r && a();
+					}), n[1](!0);
+				},
+				p() {
+					o && o.H(), n[1](!1), n = b();
+				},
+				ne: () => s,
+				se(e) {
+					c(() => e);
+				},
+				ie(t) {
+					t += e.N(), c(() => t);
+				},
+				le(t, { align: r, smooth: o, offset: n = 0 } = {}) {
+					if (t = m(t, 0, e.j() - 1), "nearest" === r) {
+						const o = e.O(t), n = e.N();
+						if (o < n) r = "start";
+						else {
+							if (!(o + e.k(t) > n + e.T())) return;
+							r = "end";
+						}
+					}
+					c(() => n + e.q() + e.O(t) + ("end" === r ? e.k(t) - e.T() : "center" === r ? (e.k(t) - e.T()) / 2 : 0), o);
+				},
+				ce: () => {
+					o && o.V();
+				}
+			};
+		})(v, _), z = ref(v.m());
+		v.R(1, () => {
+			z.value = v.m();
+		}), v.R(4, () => {
+			s("scroll", v.N());
+		}), v.R(8, () => {
+			s("scrollEnd");
+		});
+		const x = computed((t) => {
+			z.value;
+			const r = v.v(e.bufferSize);
+			return t && A(t, r) ? t : r;
+		}), $ = computed(() => z.value && v.B()), w = computed(() => z.value && v.M());
+		return onMounted(() => {
+			p = !1;
+			const t = g.value, r = requestAnimationFrame(() => {
+				const r = (e) => {
+					y.te(e), S.oe(t, e);
+				};
+				e.scrollRef ? r(e.scrollRef) : r(t.parentElement);
+			});
+			onUnmounted(() => {
+				cancelAnimationFrame(r);
+			});
+		}), onUnmounted(() => {
+			v.p(), y.p(), S.p();
+		}), watch(() => e.data.length, (t) => {
+			v.A(5, [t, e.shift]);
+		}), watch(() => e.startMargin, (e) => {
+			v.A(6, e);
+		}, { immediate: !0 }), watch([z], () => {
+			S.ce();
+		}, { flush: "post" }), u({
+			get cache() {
+				return v.h();
+			},
+			get scrollOffset() {
+				return v.N();
+			},
+			get scrollSize() {
+				return ((e) => f(e.M(), e.T()))(v);
+			},
+			get viewportSize() {
+				return v.T();
+			},
+			findItemIndex: v.S,
+			getItemOffset: v.O,
+			getItemSize: v.k,
+			scrollToIndex: S.le,
+			scrollTo: S.se,
+			scrollBy: S.ie
+		}), () => {
+			const t = e.as, r = e.item, o = w.value, s = S.ne(), l = [], c = (t) => {
+				const o = d.default({
+					item: e.data[t],
+					index: t
+				});
+				return createVNode(P, {
+					key: R(o, t),
+					L: z,
+					W: v,
+					Y: y.re,
+					D: t,
+					X: o,
+					U: _,
+					K: s,
+					G: p,
+					Z: r,
+					ee: e.itemProps?.({
+						item: e.data[t],
+						index: t
+					})
+				}, null, 8, [
+					"L",
+					"W",
+					"Y",
+					"D",
+					"X",
+					"U",
+					"K",
+					"G",
+					"Z",
+					"ee"
+				]);
+			};
+			if (e.keepMounted) {
+				const t = new Set(e.keepMounted);
+				for (let [e, r] = x.value; e <= r; e++) t.add(e);
+				h$1([...t]).forEach((e) => {
+					l.push(c(e));
+				});
+			} else for (let [e, t] = x.value; e <= t; e++) l.push(c(e));
+			return createVNode(t, {
+				ref: g,
+				style: {
+					contain: "size style",
+					overflowAnchor: "none",
+					flex: "none",
+					position: "relative",
+					width: _ ? o + "px" : "100%",
+					height: _ ? "100%" : o + "px",
+					pointerEvents: $.value ? "none" : void 0
+				}
+			}, "function" == typeof (a = l) || "[object Object]" === Object.prototype.toString.call(a) && !isVNode(a) ? l : {
+				default: () => [l],
+				_: 2
+			}, 8, ["style"]);
+			var a;
+		};
+	}
+});
+//#endregion
+//#region src/viewer-lines.ts
+/**
+* 基于可见节点创建查看器行数组
+* @param document JSON 文档对象
+* @param visibleNodes 可见的 JSON 节点数组
+* @returns 生成的查看器行数组
+*/
+function createViewerLines(document, visibleNodes) {
+	const lines = [];
+	const visibleIds = new Set(visibleNodes.map((node) => node.id));
+	const visibleByParent = /* @__PURE__ */ new Map();
+	for (const node of visibleNodes) {
+		const siblings = visibleByParent.get(node.parent) ?? [];
+		siblings.push(node);
+		visibleByParent.set(node.parent, siblings);
+	}
+	for (const node of visibleByParent.get(null) ?? []) appendNodeLines(document, visibleIds, visibleByParent, lines, node);
+	return lines;
+}
+function appendNodeLines(document, visibleIds, visibleByParent, lines, node) {
+	if (node.leaf) {
+		pushLine(lines, {
+			id: `${node.id}:property`,
+			kind: "property",
+			node,
+			depth: node.depth,
+			text: formatPropertyLine(node),
+			interactive: true
+		});
+		return;
+	}
+	if (!node.expanded) {
+		pushLine(lines, {
+			id: `${node.id}:collapsed`,
+			kind: "collapsed",
+			node,
+			depth: node.depth,
+			text: formatCollapsedLine(node),
+			interactive: true
+		});
+		return;
+	}
+	pushLine(lines, {
+		id: `${node.id}:open`,
+		kind: "open",
+		node,
+		depth: node.depth,
+		text: formatOpenLine(node),
+		interactive: true
+	});
+	for (const child of visibleByParent.get(node.id) ?? []) appendNodeLines(document, visibleIds, visibleByParent, lines, child);
+	if (shouldRenderCloseLine(document, visibleIds, node)) pushLine(lines, {
+		id: `${node.id}:close`,
+		kind: "close",
+		node,
+		depth: node.depth,
+		text: formatCloseLine(document, node),
+		interactive: false
+	});
+}
+function pushLine(lines, line) {
+	lines.push({
+		...line,
+		lineNumber: lines.length + 1
+	});
+}
+function shouldRenderCloseLine(document, visibleIds, node) {
+	if (!node.expanded) return false;
+	const children = getChildren(document, node.id);
+	if (children.length === 0) return true;
+	return children.every((child) => visibleIds.has(child.id));
+}
+function formatOpenLine(node) {
+	return `${formatKey(node)}${node.type === "array" ? "[" : "{"}`;
+}
+function formatCloseLine(document, node) {
+	return `${node.type === "array" ? "]" : "}"}${hasNextSibling$1(document, node) ? "," : ""}`;
+}
+function formatCollapsedLine(node) {
+	const summary = node.type === "array" ? `${node.children} items` : `${node.children} keys`;
+	const brackets = node.type === "array" ? ["[", "]"] : ["{", "}"];
+	return `${formatKey(node)}${brackets[0]} ${summary} ${brackets[1]}`;
+}
+function formatPropertyLine(node) {
+	return `${formatKey(node)}${formatValue(node)}${hasSyntheticComma(node) ? "," : ""}`;
+}
+function formatKey(node) {
+	if (node.depth === 0 || node.key === void 0) return "";
+	if (node.parent && /^\d+$/.test(node.key)) return "";
+	return `${JSON.stringify(node.key)}: `;
+}
+function formatValue(node) {
+	if (node.value === void 0) return "";
+	return JSON.stringify(node.value);
+}
+function hasNextSibling$1(document, node) {
+	if (node.parent === null) return false;
+	const siblings = getChildren(document, node.parent);
+	return siblings[siblings.length - 1]?.id !== node.id;
+}
+function hasSyntheticComma(node) {
+	return node.parent !== null;
+}
+//#endregion
+//#region src/JsonupViewer.ts
+/**
+* JSON 树形查看器组件
+*/
+const JsonupViewer = defineComponent({
+	name: "JsonupViewer",
+	props: {
+		/** 传入的 JSON 数据或已创建的 JSON 文档对象 */
+		data: {
+			type: [
+				String,
+				Object,
+				Array
+			],
+			required: true
+		},
+		/** 是否显示行号 */
+		lineNumbers: {
+			type: Boolean,
+			default: false
+		},
+		/** 是否开启虚拟滚动 */
+		virtual: {
+			type: Boolean,
+			default: false
+		},
+		/** 默认是否展开根节点 */
+		defaultExpandedRoot: {
+			type: Boolean,
+			default: true
+		},
+		/** 默认是否展开所有节点 */
+		defaultExpandedAll: {
+			type: Boolean,
+			default: false
+		},
+		/** 默认展开的深度 */
+		defaultExpandedDepth: {
+			type: [Number, Boolean],
+			default: void 0
+		},
+		/** 默认展开的节点路径集合 */
+		expandedPaths: {
+			type: [Array, Set],
+			default: void 0
+		},
+		/** 节点的身份标识树，用于保持节点状态 */
+		identityTree: {
+			type: Object,
+			default: void 0
+		},
+		/** 是否克隆原始数据（避免修改原对象） */
+		cloneRaw: {
+			type: Boolean,
+			default: false
+		},
+		/** 主题配置对象 */
+		theme: {
+			type: Object,
+			default: null
+		},
+		/** 是否开启单词换行 */
+		wordWrap: {
+			type: Boolean,
+			default: false
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const document = shallowRef(createViewerDocument(props.data, {
+			defaultExpandedRoot: props.defaultExpandedRoot,
+			defaultExpandedAll: props.defaultExpandedAll,
+			defaultExpandedDepth: props.defaultExpandedDepth,
+			expandedPaths: props.expandedPaths,
+			identityTree: props.identityTree,
+			cloneRaw: props.cloneRaw
+		}));
+		watch([
+			() => props.data,
+			() => props.defaultExpandedRoot,
+			() => props.defaultExpandedAll,
+			() => props.defaultExpandedDepth,
+			() => props.expandedPaths,
+			() => props.identityTree,
+			() => props.cloneRaw
+		], ([nextData, nextDefaultExpandedRoot, nextDefaultExpandedAll, nextDefaultExpandedDepth, nextExpandedPaths, nextIdentityTree, nextCloneRaw]) => {
+			document.value = createViewerDocument(nextData, {
+				defaultExpandedRoot: nextDefaultExpandedRoot,
+				defaultExpandedAll: nextDefaultExpandedAll,
+				defaultExpandedDepth: nextDefaultExpandedDepth,
+				expandedPaths: nextExpandedPaths,
+				identityTree: nextIdentityTree,
+				cloneRaw: nextCloneRaw
+			});
+		}, { deep: false });
+		const themeVars = computed(() => useCssVars(props.theme));
+		const lines = computed(() => createViewerLines(document.value, document.value.visibleNodes));
+		const renderLine = (line) => {
+			const toggle = () => {
+				if (!line.node.expandable) return;
+				document.value.toggleExpanded(line.node.id);
+				triggerRef(document);
+			};
+			const slotProps = {
+				line,
+				text: line.text,
+				lineNumber: line.lineNumber,
+				toggle
+			};
+			const content = slots[line.kind]?.(slotProps) ?? slots.line?.(slotProps) ?? renderDefaultLine(document.value, line);
+			return h("div", {
+				"key": line.id,
+				"class": ["line", line.interactive ? "interactive" : void 0],
+				"data-state": line.kind,
+				"data-type": line.node.type,
+				"data-interactive": String(line.interactive),
+				"role": "treeitem",
+				"aria-expanded": line.node.expandable ? String(line.node.expanded) : void 0,
+				"style": { "--jsonup-viewer-line-depth": String(line.depth) },
+				"onClick": line.interactive ? toggle : void 0
+			}, [props.lineNumbers ? h("span", { class: [
+				"line-number",
+				"meta",
+				"meta-line-number"
+			] }, slots.lineNumber?.(slotProps) ?? String(line.lineNumber)) : null, h("span", { class: ["content", props?.wordWrap ? "word-wrap" : void 0] }, content)]);
+		};
+		return () => h("div", {
+			"class": [
+				"jsonup-viewer",
+				props.lineNumbers ? "line-numbers" : void 0,
+				props.virtual ? "virtual" : void 0
+			],
+			"data-theme": props.theme?.name,
+			"data-word-wrap": props.wordWrap ? "on" : "off",
+			"data-theme-type": props.theme?.type,
+			"role": "tree",
+			"style": themeVars.value
+		}, props.virtual ? h(C, { data: lines.value }, { default: ({ item }) => renderLine(item) }) : lines.value.map((line) => renderLine(line)));
+	}
+});
+function createViewerDocument(input, options) {
+	if (isJsonDocument(input)) return input;
+	return createDocument(input, options);
+}
+function renderDefaultLine(document, line) {
+	return createLineTokens(document, line).map((token, index) => h("span", {
+		key: `${line.id}:${index}:${token.text}`,
+		class: token.class
+	}, token.text));
+}
+function createLineTokens(document, line) {
+	switch (line.kind) {
+		case "open": return [...createKeyTokens(line.node), createBracketToken(line.node.type === "array" ? "[" : "{", getContainerType(line.node))];
+		case "close": return appendCommaToken([createBracketToken(line.node.type === "array" ? "]" : "}", getContainerType(line.node))], hasNextSibling(document, line.node));
+		case "collapsed": return [
+			...createKeyTokens(line.node),
+			createBracketToken(line.node.type === "array" ? "[" : "{", getContainerType(line.node)),
+			{
+				text: line.node.type === "array" ? ` ${line.node.children} items ` : ` ${line.node.children} keys `,
+				class: [
+					"summary",
+					"meta",
+					"meta-summary"
+				]
+			},
+			createBracketToken(line.node.type === "array" ? "]" : "}", getContainerType(line.node))
+		];
+		case "property": return appendCommaToken([...createKeyTokens(line.node), ...createValueTokens(line.node)], hasNextSibling(document, line.node));
+		default: return [{
+			text: line.text,
+			class: "text"
+		}];
+	}
+}
+function createKeyTokens(node) {
+	if (node.depth === 0 || node.key === void 0) return [];
+	if (node.parent !== null && /^\d+$/.test(node.key)) return [];
+	return [
+		createQuoteToken("key"),
+		{
+			text: stringifyInner(node.key),
+			class: "key"
+		},
+		createQuoteToken("key"),
+		{
+			text: ": ",
+			class: ["colon", "punctuation"]
+		}
+	];
+}
+function createValueTokens(node) {
+	switch (node.type) {
+		case "string": return [
+			createQuoteToken("string"),
+			{
+				text: stringifyInner(node.value ?? ""),
+				class: ["value", "string"]
+			},
+			createQuoteToken("string")
+		];
+		case "number": return [{
+			text: String(node.value ?? 0),
+			class: ["value", "number"]
+		}];
+		case "boolean": return [{
+			text: String(node.value ?? false),
+			class: ["value", "boolean"]
+		}];
+		case "null": return [{
+			text: "null",
+			class: ["value", "null"]
+		}];
+		case "array": return [createBracketToken("[]", "array")];
+		case "object": return [createBracketToken("{}", "object")];
+		default: return [];
+	}
+}
+function appendCommaToken(tokens, hasComma) {
+	if (!hasComma) return tokens;
+	return [...tokens, {
+		text: ",",
+		class: ["comma", "punctuation"]
+	}];
+}
+function createQuoteToken(kind) {
+	return {
+		text: "\"",
+		class: [
+			"quote",
+			`${kind}-quote`,
+			"punctuation",
+			"quote-token",
+			kind
+		]
+	};
+}
+function createBracketToken(text, type) {
+	return {
+		text,
+		class: [
+			"symbol",
+			"punctuation",
+			"bracket",
+			"storage",
+			type
+		]
+	};
+}
+function getContainerType(node) {
+	return node.type === "array" ? "array" : "object";
+}
+function stringifyInner(value) {
+	return JSON.stringify(value).slice(1, -1);
+}
+function hasNextSibling(document, node) {
+	if (node.parent === null) return false;
+	const siblings = getChildren(document, node.parent);
+	return siblings[siblings.length - 1]?.id !== node.id;
+}
+//#endregion
+//#region src/index.ts
+/**
+* 用于管理和操作 JSON 文档的 Vue 组合式函数
+* @param input 初始 JSON 输入数据或已存在的 JSON 文档
+* @param options 创建文档时的配置选项
+* @returns 包含文档状态和一系列操作方法的对象
+*/
+function useJsonDocument(input, options = {}) {
+	const document = shallowRef(createDocument(input, options));
+	const visibleNodes = computed(() => document.value.visibleNodes);
+	function setDocument(nextInput) {
+		document.value = createDocument(nextInput, options);
+		return document.value;
+	}
+	function refresh(nextDocument) {
+		document.value = isJsonDocument(nextDocument) ? nextDocument : createDocument(nextDocument, options);
+		return document.value;
+	}
+	function toggleExpanded(id, expanded) {
+		document.value.toggleExpanded(id, expanded);
+		triggerRef(document);
+		return document.value;
+	}
+	function updateValue$1(id, value) {
+		return refresh(updateValue(document.value, id, value));
+	}
+	function insert$1(id, inputValue) {
+		return refresh(insert(document.value, id, inputValue));
+	}
+	function remove$1(id) {
+		return refresh(remove(document.value, id));
+	}
+	function move$1(id, parentId, options) {
+		return refresh(move(document.value, id, parentId, options));
+	}
+	function renameKey$1(id, nextKey) {
+		return refresh(renameKey(document.value, id, nextKey));
+	}
+	function reset(nextInput) {
+		return setDocument(nextInput);
+	}
+	return {
+		/** 当前的 JSON 文档对象 */
+		document,
+		/** 文档中的所有节点列表 */
+		nodes: computed(() => document.value.nodes),
+		/** 当前处于可见状态的节点列表（父节点已展开的节点） */
+		visibleNodes,
+		/** 当前已展开节点的路径集合 */
+		expandedPaths: computed(() => new Set(document.value.state.expandedPaths)),
+		/**
+		* 设置新的文档数据
+		* @param nextInput 新的 JSON 输入数据或文档
+		* @returns 新创建的 JSON 文档对象
+		*/
+		setDocument,
+		/**
+		* 重置文档数据（等同于 setDocument）
+		* @param nextInput 新的 JSON 输入数据或文档
+		* @returns 新创建的 JSON 文档对象
+		*/
+		reset,
+		/** 文档的当前内部状态 */
+		state: computed(() => document.value.state),
+		/**
+		* 切换指定节点的展开/折叠状态
+		* @param id 节点 ID
+		* @param expanded 可选的强制状态，true 为展开，false 为折叠
+		* @returns 更新后的 JSON 文档对象
+		*/
+		toggleExpanded,
+		/**
+		* 更新指定节点的值
+		* @param id 节点 ID
+		* @param value 新的节点值
+		* @returns 更新后的 JSON 文档对象
+		*/
+		updateValue: updateValue$1,
+		/**
+		* 在指定位置插入新节点
+		* @param id 目标节点 ID
+		* @param inputValue 要插入的输入值配置
+		* @returns 更新后的 JSON 文档对象
+		*/
+		insert: insert$1,
+		/**
+		* 移除指定节点
+		* @param id 节点 ID
+		* @returns 更新后的 JSON 文档对象
+		*/
+		remove: remove$1,
+		/**
+		* 移动节点到新的父节点下
+		* @param id 要移动的节点 ID
+		* @param parentId 目标父节点 ID
+		* @param options 移动操作的高级选项
+		* @returns 更新后的 JSON 文档对象
+		*/
+		move: move$1,
+		/**
+		* 重命名节点键名（仅针对对象属性）
+		* @param id 节点 ID
+		* @param nextKey 新的键名
+		* @returns 更新后的 JSON 文档对象
+		*/
+		renameKey: renameKey$1,
+		/**
+		* 根据 ID 获取节点
+		* @param id 节点 ID
+		* @returns 匹配的节点对象，不存在时抛出错误或返回 null（取决于核心实现）
+		*/
+		getNode: (id) => document.value.getNode(id),
+		/**
+		* 根据 ID 获取节点的 JSONPath 路径
+		* @param id 节点 ID
+		* @returns 节点的路径字符串
+		*/
+		getPath: (id) => document.value.getPath(id),
+		/**
+		* 根据 JSONPath 路径查找节点
+		* @param path JSONPath 路径字符串
+		* @returns 匹配的节点对象，不存在时返回 undefined
+		*/
+		findByPath: (path) => document.value.findByPath(path),
+		/**
+		* 在文档中搜索匹配的节点
+		* @param query 搜索关键字
+		* @returns 匹配的节点 ID 数组
+		*/
+		search: (query) => document.value.search(query),
+		/**
+		* 将当前文档状态格式化为 JSON 字符串
+		* @param space 缩进的空格数，默认为 2
+		* @returns 格式化后的 JSON 字符串
+		*/
+		stringify: (space) => document.value.stringify(space)
+	};
+}
+//#endregion
+export { JsonupViewer, createViewerLines, useJsonDocument };