@thebuoyant-tsdev/mui-ts-library 3.6.1 → 3.7.0

package/dist/components/json-editor/JsonEditorContent.js

@@ -1,67 +1,75 @@
-import { useEffect as e, useRef as t } from "react";
-import { Box as n, useTheme as r } from "@mui/material";
-import { EditorView as i, highlightActiveLine as a, highlightActiveLineGutter as o, keymap as s, lineNumbers as c, placeholder as l } from "@codemirror/view";
+import { computeJsonPath as e } from "./util/jsonPathFinder.js";
+import { findRangeForPath as t, validateAgainstSchema as n } from "./util/jsonSchemaValidator.js";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import { Box as o, Fade as s, Paper as c, Typography as ee, useTheme as te } from "@mui/material";
+import { EditorView as l, highlightActiveLine as ne, highlightActiveLineGutter as re, keymap as ie, lineNumbers as ae, placeholder as oe } from "@codemirror/view";
 import { Compartment as u, EditorState as d } from "@codemirror/state";
-import { json as f, jsonParseLinter as p } from "@codemirror/lang-json";
-import { defaultKeymap as m, history as h, historyKeymap as g } from "@codemirror/commands";
-import { HighlightStyle as _, syntaxHighlighting as v } from "@codemirror/language";
-import { lintGutter as y, linter as b } from "@codemirror/lint";
-import { tags as x } from "@lezer/highlight";
-import { showMinimap as S } from "@replit/codemirror-minimap";
-import { jsx as C } from "react/jsx-runtime";
+import { json as se, jsonParseLinter as f } from "@codemirror/lang-json";
+import { defaultKeymap as ce, history as le, historyKeymap as ue } from "@codemirror/commands";
+import { HighlightStyle as de, foldGutter as fe, foldKeymap as pe, syntaxHighlighting as me } from "@codemirror/language";
+import { forceLinting as he, lintGutter as ge, linter as p } from "@codemirror/lint";
+import { tags as m } from "@lezer/highlight";
+import { showMinimap as _e } from "@replit/codemirror-minimap";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/json-editor/JsonEditorContent.tsx
-function w({ value: w, onChange: T, placeholder: E, disabled: D = !1, readonly: O = !1, showLineNumbers: k = !0, showMinimap: A = !1, highlightColors: j, onViewReady: M, onCursorChange: N, onBlur: P, onFocus: F }) {
-	let I = t(null), L = t(null), R = t(T), z = t(N), B = t(P), V = t(F), H = t(M), U = t(new u()), W = t(new u()), G = r(), K = G.palette.mode === "dark", q = j?.propertyName ?? G.palette.primary.main, J = j?.string ?? G.palette.success.main, Y = j?.number ?? G.palette.warning.main, X = j?.boolean ?? G.palette.info.main, Z = j?.null ?? G.palette.text.secondary;
-	return e(() => {
-		R.current = T;
-	}, [T]), e(() => {
-		z.current = N;
-	}, [N]), e(() => {
-		B.current = P;
-	}, [P]), e(() => {
-		V.current = F;
-	}, [F]), e(() => {
-		H.current = M;
-	}, [M]), e(() => {
-		if (!I.current) return;
-		let e = L.current?.state.doc.toString() ?? w ?? "", t = _.define([
+function _({ value: _, onChange: v, placeholder: y, disabled: b = !1, readonly: x = !1, schema: S, showLineNumbers: ve = !0, showMinimap: C = !1, showFolding: w = !0, enablePathFinder: T = !0, highlightColors: E, onViewReady: D, onCursorChange: O, onBlur: k, onFocus: A, onPathCopy: j }) {
+	let M = i(null), N = i(null), P = i(null), F = i(v), I = i(O), L = i(k), R = i(A), z = i(D), B = i(j), V = i(T), H = i(S), [U, W] = a(null), G = i(new u()), K = i(new u()), q = te(), J = q.palette.mode === "dark", Y = E?.propertyName ?? q.palette.primary.main, X = E?.string ?? q.palette.success.main, Z = E?.number ?? q.palette.warning.main, Q = E?.boolean ?? q.palette.info.main, $ = E?.null ?? q.palette.text.secondary;
+	return r(() => {
+		F.current = v;
+	}, [v]), r(() => {
+		I.current = O;
+	}, [O]), r(() => {
+		L.current = k;
+	}, [k]), r(() => {
+		R.current = A;
+	}, [A]), r(() => {
+		z.current = D;
+	}, [D]), r(() => {
+		B.current = j;
+	}, [j]), r(() => {
+		V.current = T;
+	}, [T]), r(() => {
+		H.current = S, P.current && he(P.current);
+	}, [S]), r(() => {
+		if (!N.current) return;
+		let r = P.current?.state.doc.toString() ?? _ ?? "", i = de.define([
 			{
-				tag: x.propertyName,
-				color: q,
+				tag: m.propertyName,
+				color: Y,
 				fontWeight: "bold"
 			},
 			{
-				tag: x.string,
-				color: J
+				tag: m.string,
+				color: X
 			},
 			{
-				tag: x.number,
-				color: Y
+				tag: m.number,
+				color: Z
 			},
 			{
-				tag: x.bool,
-				color: X,
+				tag: m.bool,
+				color: Q,
 				fontWeight: "bold"
 			},
 			{
-				tag: x.null,
-				color: Z,
+				tag: m.null,
+				color: $,
 				fontStyle: "italic"
 			},
 			{
-				tag: x.bracket,
-				color: G.palette.text.secondary
+				tag: m.bracket,
+				color: q.palette.text.secondary
 			},
 			{
-				tag: x.punctuation,
-				color: G.palette.text.disabled
+				tag: m.punctuation,
+				color: q.palette.text.disabled
 			},
 			{
-				tag: x.invalid,
-				color: G.palette.error.main,
+				tag: m.invalid,
+				color: q.palette.error.main,
 				textDecoration: "underline wavy"
 			}
-		]), n = i.theme({
+		]), a = l.theme({
 			"&": {
 				height: "100%",
 				fontFamily: "'Fira Code', 'JetBrains Mono', 'Consolas', monospace",
@@ -70,116 +78,210 @@ function w({ value: w, onChange: T, placeholder: E, disabled: D = !1, readonly:
 			".cm-scroller": { overflow: "auto" },
 			".cm-content": {
 				padding: "8px 4px",
-				caretColor: G.palette.text.primary
+				caretColor: q.palette.text.primary
 			},
 			".cm-gutters": {
-				backgroundColor: K ? G.palette.grey[900] : G.palette.grey[50],
-				color: G.palette.text.disabled,
+				backgroundColor: J ? q.palette.grey[900] : q.palette.grey[50],
+				color: q.palette.text.disabled,
 				border: "none",
-				borderRight: `1px solid ${G.palette.divider}`
+				borderRight: `1px solid ${q.palette.divider}`
 			},
 			".cm-lineNumbers .cm-gutterElement": {
 				paddingLeft: "4px",
 				paddingRight: "8px"
 			},
-			".cm-activeLineGutter": { backgroundColor: G.palette.action.selected },
-			".cm-activeLine": { backgroundColor: G.palette.action.hover },
-			"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: G.palette.primary.main + "40" },
-			".cm-cursor, .cm-dropCursor": { borderLeftColor: G.palette.text.primary },
+			".cm-activeLineGutter": { backgroundColor: q.palette.action.selected },
+			".cm-activeLine": { backgroundColor: q.palette.action.hover },
+			"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: q.palette.primary.main + "40" },
+			".cm-cursor, .cm-dropCursor": { borderLeftColor: q.palette.text.primary },
 			"&.cm-focused": { outline: "none" },
 			".cm-placeholder": {
-				color: G.palette.text.disabled,
+				color: q.palette.text.disabled,
 				fontStyle: "italic"
 			},
 			".cm-gutter-lint": { width: "16px" },
-			".cm-lint-marker-error": { color: G.palette.error.main },
-			".cm-lint-marker-warning": { color: G.palette.warning.main },
+			".cm-lint-marker-error": { color: q.palette.error.main },
+			".cm-lint-marker-warning": { color: q.palette.warning.main },
+			".cm-foldGutter .cm-gutterElement": {
+				cursor: "pointer",
+				color: q.palette.text.disabled
+			},
+			".cm-foldPlaceholder": {
+				backgroundColor: q.palette.action.selected,
+				border: `1px solid ${q.palette.divider}`,
+				borderRadius: "3px",
+				color: q.palette.text.secondary,
+				padding: "0 4px"
+			},
 			".cm-tooltip.cm-tooltip-lint": {
-				backgroundColor: G.palette.background.paper,
-				border: `1px solid ${G.palette.divider}`,
+				backgroundColor: q.palette.background.paper,
+				border: `1px solid ${q.palette.divider}`,
 				borderRadius: "4px"
 			},
-			".cm-diagnostic-error": { borderLeft: `3px solid ${G.palette.error.main}` },
-			".cm-diagnostic-warning": { borderLeft: `3px solid ${G.palette.warning.main}` }
-		}, { dark: K }), r = A ? [S.of({
+			".cm-diagnostic-error": { borderLeft: `3px solid ${q.palette.error.main}` },
+			".cm-diagnostic-warning": { borderLeft: `3px solid ${q.palette.warning.main}` }
+		}, { dark: J }), o = C ? [_e.of({
 			create: () => {
 				let e = document.createElement("div");
-				return e.style.width = "80px", e.style.overflow = "hidden", e.style.borderLeft = `1px solid ${G.palette.divider}`, e.style.backgroundColor = K ? G.palette.grey[900] : G.palette.grey[50], { dom: e };
+				return e.style.width = "80px", e.style.overflow = "hidden", e.style.borderLeft = `1px solid ${q.palette.divider}`, e.style.backgroundColor = J ? q.palette.grey[900] : q.palette.grey[50], { dom: e };
 			},
 			displayText: "blocks",
 			showOverlay: "always"
-		})] : [], u = [
-			n,
-			v(t),
-			f(),
-			y(),
-			b(p()),
-			h(),
-			s.of([...m, ...g]),
-			U.current.of(i.editable.of(!D && !O)),
-			W.current.of(d.readOnly.of(O)),
-			a(),
-			...k ? [c(), o()] : [],
-			...E ? [l(E)] : [],
-			...r,
-			i.updateListener.of((e) => {
-				e.docChanged && R.current?.(e.state.doc.toString());
+		})] : [], s = [
+			a,
+			me(i),
+			se(),
+			ge(),
+			p(f()),
+			p((e) => {
+				let r = H.current;
+				if (!r) return [];
+				let i;
+				try {
+					i = JSON.parse(e.state.doc.toString());
+				} catch {
+					return [];
+				}
+				let a = [];
+				for (let o of n(i, r)) {
+					let n = t(e.state, o.path);
+					n && a.push({
+						from: n.from,
+						to: n.to,
+						severity: "error",
+						message: o.message
+					});
+				}
+				return a;
+			}),
+			le(),
+			ie.of([
+				...ce,
+				...ue,
+				...pe
+			]),
+			G.current.of(l.editable.of(!b && !x)),
+			K.current.of(d.readOnly.of(x)),
+			ne(),
+			...ve ? [ae(), re()] : [],
+			...w ? [fe()] : [],
+			...y ? [oe(y)] : [],
+			...o,
+			l.updateListener.of((e) => {
+				e.docChanged && F.current?.(e.state.doc.toString());
 				let t = e.state.selection.main.head, n = e.state.doc.lineAt(t);
-				z.current(n.number, t - n.from + 1);
+				I.current(n.number, t - n.from + 1);
 			}),
-			i.domEventHandlers({
+			l.domEventHandlers({
 				blur: () => {
-					B.current?.();
+					L.current?.();
 				},
 				focus: () => {
-					V.current?.();
+					R.current?.();
+				},
+				click: (t, n) => {
+					if (!V.current || !(t.ctrlKey || t.metaKey)) return !1;
+					let r;
+					try {
+						r = n.posAtCoords({
+							x: t.clientX,
+							y: t.clientY
+						});
+					} catch {
+						return !1;
+					}
+					if (r === null) return !1;
+					let i = e(n.state, r);
+					return i ? (navigator.clipboard.writeText(i).then(() => {
+						let e = M.current?.getBoundingClientRect();
+						W({
+							x: t.clientX - (e?.left ?? 0),
+							y: t.clientY - (e?.top ?? 0),
+							path: i
+						}), B.current?.(i);
+					}), !0) : !1;
 				}
 			})
-		], C = new i({
+		], c = new l({
 			state: d.create({
-				doc: e,
-				extensions: u
+				doc: r,
+				extensions: s
 			}),
-			parent: I.current
+			parent: N.current
 		});
-		return L.current = C, H.current(C), () => {
-			H.current(null), C.destroy(), L.current = null;
+		return P.current = c, z.current(c), () => {
+			z.current(null), c.destroy(), P.current = null;
 		};
 	}, [
-		K,
-		q,
 		J,
 		Y,
 		X,
 		Z,
-		A
-	]), e(() => {
-		let e = L.current;
+		Q,
+		$,
+		C
+	]), r(() => {
+		let e = P.current;
 		if (!e) return;
 		let t = e.state.doc.toString();
-		t !== (w ?? "") && e.dispatch({ changes: {
+		t !== (_ ?? "") && e.dispatch({ changes: {
 			from: 0,
 			to: t.length,
-			insert: w ?? ""
+			insert: _ ?? ""
 		} });
-	}, [w]), e(() => {
-		L.current?.dispatch({ effects: [U.current.reconfigure(i.editable.of(!D && !O)), W.current.reconfigure(d.readOnly.of(O))] });
-	}, [D, O]), /* @__PURE__ */ C(n, {
-		ref: I,
+	}, [_]), r(() => {
+		P.current?.dispatch({ effects: [G.current.reconfigure(l.editable.of(!b && !x)), K.current.reconfigure(d.readOnly.of(x))] });
+	}, [b, x]), r(() => {
+		if (!U) return;
+		let e = setTimeout(() => W(null), 1500);
+		return () => clearTimeout(e);
+	}, [U]), /* @__PURE__ */ g(o, {
+		ref: M,
 		sx: {
+			position: "relative",
 			flex: 1,
 			overflow: "hidden",
-			display: "flex",
-			flexDirection: "column",
-			opacity: D ? .5 : 1,
-			backgroundColor: G.palette.background.paper,
-			"& .cm-editor": {
+			display: "flex"
+		},
+		children: [/* @__PURE__ */ h(o, {
+			ref: N,
+			sx: {
 				flex: 1,
+				overflow: "hidden",
 				display: "flex",
-				flexDirection: "column"
+				flexDirection: "column",
+				opacity: b ? .5 : 1,
+				backgroundColor: q.palette.background.paper,
+				"& .cm-editor": {
+					flex: 1,
+					display: "flex",
+					flexDirection: "column"
+				}
 			}
-		}
+		}), U && /* @__PURE__ */ h(s, {
+			in: !0,
+			children: /* @__PURE__ */ h(c, {
+				elevation: 3,
+				sx: {
+					position: "absolute",
+					left: U.x,
+					top: U.y,
+					transform: "translate(-50%, -130%)",
+					px: 1,
+					py: .5,
+					pointerEvents: "none",
+					zIndex: 10,
+					bgcolor: "grey.900",
+					color: "common.white"
+				},
+				children: /* @__PURE__ */ g(ee, {
+					variant: "caption",
+					sx: { fontFamily: "monospace" },
+					children: ["Copied: ", U.path]
+				})
+			})
+		})]
 	});
 }
 //#endregion
-export { w as JsonEditorContent };
+export { _ as JsonEditorContent };

package/dist/components/json-editor/util/jsonPathFinder.d.ts

@@ -0,0 +1,9 @@
+import type { EditorState } from "@codemirror/state";
+/**
+ * Walks up the Lezer JSON syntax tree from `pos` to compute the JSON path
+ * (e.g. "$.users[0].name") of the value or property key under the cursor.
+ *
+ * Returns "$" for the document root, or null if `pos` doesn't resolve to any
+ * node (e.g. an empty document).
+ */
+export declare function computeJsonPath(state: EditorState, pos: number): string | null;

package/dist/components/json-editor/util/jsonPathFinder.js

@@ -0,0 +1,45 @@
+import { syntaxTree as e } from "@codemirror/language";
+//#region src/components/json-editor/util/jsonPathFinder.ts
+var t = /^[A-Za-z_$][A-Za-z0-9_$]*$/, n = new Set([
+	"Object",
+	"Array",
+	"String",
+	"Number",
+	"True",
+	"False",
+	"Null"
+]);
+function r(e) {
+	return t.test(e) ? `.${e}` : `[${JSON.stringify(e)}]`;
+}
+function i(t, i) {
+	if (t.doc.length === 0) return null;
+	let a = e(t).resolveInner(i, 1);
+	if (!a) return null;
+	let o = [];
+	for (; a;) {
+		let e = a.parent;
+		if (!e) break;
+		if (e.name === "Property") {
+			let n = e.getChild("PropertyName");
+			if (n) {
+				let e = t.sliceDoc(n.from, n.to);
+				try {
+					o.unshift(r(JSON.parse(e)));
+				} catch {}
+			}
+			a = e.parent ?? e;
+			continue;
+		}
+		if (e.name === "Array") {
+			let t = 0, r = e.firstChild;
+			for (; r && r.from < a.from;) n.has(r.name) && t++, r = r.nextSibling;
+			o.unshift(`[${t}]`), a = e;
+			continue;
+		}
+		a = e;
+	}
+	return o.length > 0 ? `$${o.join("")}` : "$";
+}
+//#endregion
+export { i as computeJsonPath };

package/dist/components/json-editor/util/jsonSchemaValidator.d.ts

@@ -0,0 +1,22 @@
+import type { EditorState } from "@codemirror/state";
+import type { JsonEditorSchema } from "../JsonEditor.types";
+export type JsonSchemaValidationError = {
+    /** JSON path of the offending value, e.g. "$.users[0].age" */
+    path: string;
+    message: string;
+};
+/**
+ * Validates a parsed JSON value against a focused JSON Schema subset (type,
+ * required, enum, nested properties/items). Returns one error per violation,
+ * each tagged with the JSON path of the offending value.
+ */
+export declare function validateAgainstSchema(value: unknown, schema: JsonEditorSchema, path?: string): JsonSchemaValidationError[];
+/**
+ * Resolves a JSON path (as produced by `validateAgainstSchema`) to its
+ * source range in the document, by walking the syntax tree down from the
+ * root. Returns null if the path can't be resolved (e.g. document changed).
+ */
+export declare function findRangeForPath(state: EditorState, path: string): {
+    from: number;
+    to: number;
+} | null;

package/dist/components/json-editor/util/jsonSchemaValidator.js

@@ -0,0 +1,116 @@
+import { syntaxTree as e } from "@codemirror/language";
+//#region src/components/json-editor/util/jsonSchemaValidator.ts
+var t = new Set([
+	"Object",
+	"Array",
+	"String",
+	"Number",
+	"True",
+	"False",
+	"Null"
+]), n = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+function r(e) {
+	return n.test(e) ? `.${e}` : `[${JSON.stringify(e)}]`;
+}
+function i(e) {
+	return e === null ? "null" : Array.isArray(e) ? "array" : typeof e == "number" ? Number.isInteger(e) ? "integer" : "number" : typeof e == "string" ? "string" : typeof e == "boolean" ? "boolean" : "object";
+}
+function a(e, t) {
+	let n = i(e);
+	return n === t || t === "number" && n === "integer";
+}
+function o(e, t) {
+	if (e === t) return !0;
+	if (Array.isArray(e) && Array.isArray(t)) return e.length === t.length && e.every((e, n) => o(e, t[n]));
+	if (e && t && typeof e == "object" && typeof t == "object") {
+		let n = Object.keys(e), r = Object.keys(t);
+		return n.length === r.length ? n.every((n) => o(e[n], t[n])) : !1;
+	}
+	return !1;
+}
+function s(e, t, n = "$") {
+	let c = [];
+	if (t.type) {
+		let r = Array.isArray(t.type) ? t.type : [t.type];
+		if (!r.some((t) => a(e, t))) return c.push({
+			path: n,
+			message: `Expected type ${r.join(" | ")}, got ${i(e)}.`
+		}), c;
+	}
+	if (t.enum && !t.enum.some((t) => o(t, e)) && c.push({
+		path: n,
+		message: `Value must be one of: ${t.enum.map((e) => JSON.stringify(e)).join(", ")}.`
+	}), i(e) === "object" && e !== null) {
+		let i = e;
+		for (let e of t.required ?? []) e in i || c.push({
+			path: n,
+			message: `Missing required property "${e}".`
+		});
+		if (t.properties) for (let [e, a] of Object.entries(t.properties)) e in i && c.push(...s(i[e], a, `${n}${r(e)}`));
+	}
+	return t.items && Array.isArray(e) && e.forEach((e, r) => {
+		c.push(...s(e, t.items, `${n}[${r}]`));
+	}), c;
+}
+var c = /\.([A-Za-z_$][A-Za-z0-9_$]*)|\[(\d+)\]|\["((?:[^"\\]|\\.)*)"\]/g;
+function l(e) {
+	let t = [];
+	for (let n of e.matchAll(c)) n[1] === void 0 ? n[2] === void 0 ? n[3] !== void 0 && t.push({
+		type: "key",
+		value: JSON.parse(`"${n[3]}"`)
+	}) : t.push({
+		type: "index",
+		value: Number(n[2])
+	}) : t.push({
+		type: "key",
+		value: n[1]
+	});
+	return t;
+}
+function u(e) {
+	let n = e.topNode;
+	for (; n && !t.has(n.name);) {
+		let e = n.firstChild;
+		if (!e) return null;
+		n = e;
+	}
+	return n;
+}
+function d(n, r) {
+	let i = u(e(n));
+	if (!i) return null;
+	for (let e of l(r)) if (e.type === "key") {
+		if (i.name !== "Object") return null;
+		let t = null;
+		for (let r = i.firstChild; r; r = r.nextSibling) {
+			if (r.name !== "Property") continue;
+			let i = r.getChild("PropertyName");
+			if (i) try {
+				if (JSON.parse(n.sliceDoc(i.from, i.to)) === e.value) {
+					t = r.lastChild;
+					break;
+				}
+			} catch {}
+		}
+		if (!t) return null;
+		i = t;
+	} else {
+		if (i.name !== "Array") return null;
+		let n = 0, r = null;
+		for (let a = i.firstChild; a; a = a.nextSibling) if (t.has(a.name)) {
+			if (n === e.value) {
+				r = a;
+				break;
+			}
+			n++;
+		}
+		if (!r) return null;
+		i = r;
+	}
+	return {
+		from: i.from,
+		to: i.to
+	};
+}
+//#endregion
+export { d as findRangeForPath, s as validateAgainstSchema };