@thebuoyant-tsdev/mui-ts-library 3.25.0 → 3.26.0

package/dist/components/color-picker/ColorPicker.js

@@ -4,8 +4,8 @@ import { clamp as n, hexToRgba as r, hslaToHsva as i, hsvaToHsla as a, hsvaToRgb
 import { DEFAULT_COLOR_PICKER_TRANSLATION as u } from "./ColorPicker.types.js";
 import { useEffect as d, useRef as f, useState as p } from "react";
 import { Box as m, IconButton as ee, MenuItem as h, Select as te, TextField as g, Tooltip as ne, Typography as re, useTheme as ie } from "@mui/material";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import ae from "@mui/icons-material/Colorize";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/color-picker/ColorPicker.tsx
 function y(e, t) {
 	let r = n(e, 0, 100);

package/dist/components/color-picker/ColorPicker.types.d.ts

@@ -31,6 +31,19 @@ export type ColorPickerTranslation = {
     hueSliderLabel: string;
 };
 export declare const DEFAULT_COLOR_PICKER_TRANSLATION: Required<ColorPickerTranslation>;
+export type PopoverColorPickerTranslation = {
+    /** aria-label for the swatch trigger button. */
+    openLabel: string;
+};
+export declare const DEFAULT_POPOVER_COLOR_PICKER_TRANSLATION: Required<PopoverColorPickerTranslation>;
+export type PopoverColorPickerProps = Omit<ColorPickerProps, "translation"> & {
+    /** Size of the swatch trigger button in px (default: 28). */
+    swatchSize?: number;
+    /** Shape of the swatch button (default: `'square'`). */
+    swatchShape?: "square" | "circle";
+    /** i18n strings — merged with the inner ColorPicker translation. */
+    translation?: Partial<ColorPickerTranslation & PopoverColorPickerTranslation>;
+};
 export type ColorPickerProps = {
     /** Current color — accepts hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba(), or hsl()/hsla(). */
     value: string;

package/dist/components/color-picker/ColorPicker.types.js

@@ -13,6 +13,6 @@ var e = {
 	savedColorsLabel: "Saved colors",
 	gradientAreaLabel: "Saturation and brightness",
 	hueSliderLabel: "Hue"
-};
+}, t = { openLabel: "Open color picker" };
 //#endregion
-export { e as DEFAULT_COLOR_PICKER_TRANSLATION };
+export { e as DEFAULT_COLOR_PICKER_TRANSLATION, t as DEFAULT_POPOVER_COLOR_PICKER_TRANSLATION };

package/dist/components/color-picker/PopoverColorPicker.d.ts

@@ -0,0 +1,2 @@
+import { type PopoverColorPickerProps } from "./ColorPicker.types";
+export declare function PopoverColorPicker({ value, onChange, onChangeCommitted, swatchSize, swatchShape, disabled, translation, ...colorPickerProps }: PopoverColorPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/color-picker/PopoverColorPicker.js

@@ -0,0 +1,81 @@
+import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
+import { popoverColorPickerClasses as t } from "./popoverColorPickerClasses.js";
+import { DEFAULT_POPOVER_COLOR_PICKER_TRANSLATION as n } from "./ColorPicker.types.js";
+import { ColorPicker as r } from "./ColorPicker.js";
+import { useState as i } from "react";
+import { Box as a, Popover as o, useTheme as s } from "@mui/material";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/color-picker/PopoverColorPicker.tsx
+var d = {
+	backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+	backgroundSize: "8px 8px",
+	backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
+};
+function f({ value: f, onChange: p, onChangeCommitted: m, swatchSize: h = 28, swatchShape: g = "square", disabled: _ = !1, translation: v, ...y }) {
+	let b = s(), x = {
+		...n,
+		...v
+	}, [S, C] = i(null), w = !!S, T = g === "circle" ? "50%" : `${b.shape.borderRadius}px`;
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(a, {
+		component: "button",
+		type: "button",
+		disabled: _,
+		"aria-label": x.openLabel,
+		"aria-expanded": w,
+		"aria-haspopup": "dialog",
+		onClick: (e) => C(e.currentTarget),
+		className: [t.root, _ ? e.disabled : void 0].filter(Boolean).join(" "),
+		sx: {
+			width: h,
+			height: h,
+			minWidth: h,
+			p: 0,
+			borderRadius: T,
+			border: `1px solid ${b.palette.divider}`,
+			cursor: _ ? "default" : "pointer",
+			overflow: "hidden",
+			flexShrink: 0,
+			...d,
+			"&:hover:not(:disabled)": { borderColor: b.palette.primary.main },
+			"&:focus-visible": {
+				outline: `2px solid ${b.palette.primary.main}`,
+				outlineOffset: 2
+			}
+		},
+		children: /* @__PURE__ */ l(a, {
+			className: t.swatch,
+			sx: {
+				width: "100%",
+				height: "100%",
+				borderRadius: "inherit",
+				backgroundColor: f
+			}
+		})
+	}), /* @__PURE__ */ l(o, {
+		open: w,
+		anchorEl: S,
+		onClose: () => C(null),
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		},
+		slotProps: { paper: {
+			sx: { p: 1.5 },
+			"data-testid": "popover-color-picker"
+		} },
+		children: /* @__PURE__ */ l(r, {
+			value: f,
+			onChange: p,
+			onChangeCommitted: m,
+			disabled: _,
+			translation: v,
+			...y
+		})
+	})] });
+}
+//#endregion
+export { f as PopoverColorPicker };

package/dist/components/color-picker/popoverColorPickerClasses.d.ts

@@ -0,0 +1,15 @@
+/**
+ * CSS class names for every named slot in the PopoverColorPicker component.
+ *
+ * @example
+ * ```css
+ * .MuiTsPopoverColorPicker-root { border-radius: 50%; }
+ * .MuiTsPopoverColorPicker-root.MuiTs-disabled { opacity: 0.4; pointer-events: none; }
+ * ```
+ */
+export declare const popoverColorPickerClasses: {
+    /** The swatch button that triggers the popover. Also receives `MuiTs-disabled` when `disabled={true}`. */
+    readonly root: "MuiTsPopoverColorPicker-root";
+    /** The inner colored box inside the swatch button. */
+    readonly swatch: "MuiTsPopoverColorPicker-swatch";
+};

package/dist/components/color-picker/popoverColorPickerClasses.js

@@ -0,0 +1,7 @@
+//#region src/components/color-picker/popoverColorPickerClasses.ts
+var e = {
+	root: "MuiTsPopoverColorPicker-root",
+	swatch: "MuiTsPopoverColorPicker-swatch"
+};
+//#endregion
+export { e as popoverColorPickerClasses };

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

@@ -2,30 +2,30 @@ 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 u, keymap as re, lineNumbers as d, placeholder as f } from "@codemirror/view";
-import { Compartment as p, EditorState as m } from "@codemirror/state";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { EditorView as d, highlightActiveLine as ne, highlightActiveLineGutter as f, keymap as re, lineNumbers as p, placeholder as m } from "@codemirror/view";
+import { Compartment as h, EditorState as g } from "@codemirror/state";
 import { json as ie, jsonParseLinter as ae } from "@codemirror/lang-json";
 import { defaultKeymap as oe, history as se, historyKeymap as ce } from "@codemirror/commands";
-import { HighlightStyle as le, foldGutter as h, foldKeymap as ue, syntaxHighlighting as de } from "@codemirror/language";
-import { forceLinting as fe, lintGutter as pe, linter as g } from "@codemirror/lint";
-import { tags as _ } from "@lezer/highlight";
+import { HighlightStyle as le, foldGutter as _, foldKeymap as ue, syntaxHighlighting as de } from "@codemirror/language";
+import { forceLinting as fe, lintGutter as pe, linter as v } from "@codemirror/lint";
+import { tags as y } from "@lezer/highlight";
 import { showMinimap as me } from "@replit/codemirror-minimap";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/json-editor/JsonEditorContent.tsx
 function b(e) {
-	return e ? [d(), u()] : [];
+	return e ? [p(), f()] : [];
 }
 function x(e) {
-	return e ? [h()] : [];
+	return e ? [_()] : [];
 }
 function S(e) {
-	return e ? [f(e)] : [];
+	return e ? [m(e)] : [];
 }
-function C({ value: u, onChange: d, placeholder: f, disabled: h = !1, readonly: C = !1, schema: w, showLineNumbers: T = !0, showMinimap: E = !1, showFolding: D = !0, enablePathFinder: O = !0, highlightColors: k, onViewReady: A, onCursorChange: j, onBlur: M, onFocus: N, onPathCopy: P }) {
-	let F = i(null), I = i(null), L = i(null), R = i(d), z = i(j), he = i(M), B = i(N), V = i(A), H = i(P), U = i(O), W = i(w), [G, K] = a(null), q = i(new p()), J = i(new p()), Y = i(new p()), X = i(new p()), Z = i(new p()), Q = te(), $ = Q.palette.mode === "dark", ge = k?.propertyName ?? Q.palette.primary.main, _e = k?.string ?? Q.palette.success.main, ve = k?.number ?? Q.palette.warning.main, ye = k?.boolean ?? Q.palette.info.main, be = k?.null ?? Q.palette.text.secondary;
+function C({ value: f, onChange: p, placeholder: m, disabled: _ = !1, readonly: C = !1, schema: w, showLineNumbers: T = !0, showMinimap: E = !1, showFolding: D = !0, enablePathFinder: O = !0, highlightColors: k, onViewReady: A, onCursorChange: j, onBlur: M, onFocus: N, onPathCopy: P }) {
+	let F = i(null), I = i(null), L = i(null), R = i(p), z = i(j), he = i(M), B = i(N), V = i(A), H = i(P), U = i(O), W = i(w), [G, K] = a(null), q = i(new h()), J = i(new h()), Y = i(new h()), X = i(new h()), Z = i(new h()), Q = te(), $ = Q.palette.mode === "dark", ge = k?.propertyName ?? Q.palette.primary.main, _e = k?.string ?? Q.palette.success.main, ve = k?.number ?? Q.palette.warning.main, ye = k?.boolean ?? Q.palette.info.main, be = k?.null ?? Q.palette.text.secondary;
 	return r(() => {
-		R.current = d;
-	}, [d]), r(() => {
+		R.current = p;
+	}, [p]), r(() => {
 		z.current = j;
 	}, [j]), r(() => {
 		he.current = M;
@@ -41,44 +41,44 @@ function C({ value: u, onChange: d, placeholder: f, disabled: h = !1, readonly:
 		W.current = w, L.current && fe(L.current);
 	}, [w]), r(() => {
 		if (!I.current) return;
-		let r = L.current?.state.doc.toString() ?? u ?? "", i = le.define([
+		let r = L.current?.state.doc.toString() ?? f ?? "", i = le.define([
 			{
-				tag: _.propertyName,
+				tag: y.propertyName,
 				color: ge,
 				fontWeight: "bold"
 			},
 			{
-				tag: _.string,
+				tag: y.string,
 				color: _e
 			},
 			{
-				tag: _.number,
+				tag: y.number,
 				color: ve
 			},
 			{
-				tag: _.bool,
+				tag: y.bool,
 				color: ye,
 				fontWeight: "bold"
 			},
 			{
-				tag: _.null,
+				tag: y.null,
 				color: be,
 				fontStyle: "italic"
 			},
 			{
-				tag: _.bracket,
+				tag: y.bracket,
 				color: Q.palette.text.secondary
 			},
 			{
-				tag: _.punctuation,
+				tag: y.punctuation,
 				color: Q.palette.text.disabled
 			},
 			{
-				tag: _.invalid,
+				tag: y.invalid,
 				color: Q.palette.error.main,
 				textDecoration: "underline wavy"
 			}
-		]), a = l.theme({
+		]), a = d.theme({
 			"&": {
 				height: "100%",
 				fontFamily: "'Fira Code', 'JetBrains Mono', 'Consolas', monospace",
@@ -141,8 +141,8 @@ function C({ value: u, onChange: d, placeholder: f, disabled: h = !1, readonly:
 			de(i),
 			ie(),
 			pe(),
-			g(ae()),
-			g((e) => {
+			v(ae()),
+			v((e) => {
 				let r = W.current;
 				if (!r) return [];
 				let i;
@@ -169,19 +169,19 @@ function C({ value: u, onChange: d, placeholder: f, disabled: h = !1, readonly:
 				...ce,
 				...ue
 			]),
-			q.current.of(l.editable.of(!h && !C)),
-			J.current.of(m.readOnly.of(C)),
+			q.current.of(d.editable.of(!_ && !C)),
+			J.current.of(g.readOnly.of(C)),
 			ne(),
 			X.current.of(b(T)),
 			Y.current.of(x(D)),
-			Z.current.of(S(f)),
+			Z.current.of(S(m)),
 			...o,
-			l.updateListener.of((e) => {
+			d.updateListener.of((e) => {
 				e.docChanged && R.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);
 			}),
-			l.domEventHandlers({
+			d.domEventHandlers({
 				blur: () => {
 					he.current?.();
 				},
@@ -211,8 +211,8 @@ function C({ value: u, onChange: d, placeholder: f, disabled: h = !1, readonly:
 					}), !0) : !1;
 				}
 			})
-		], c = new l({
-			state: m.create({
+		], c = new d({
+			state: g.create({
 				doc: r,
 				extensions: s
 			}),
@@ -233,24 +233,24 @@ function C({ value: u, onChange: d, placeholder: f, disabled: h = !1, readonly:
 		let e = L.current;
 		if (!e) return;
 		let t = e.state.doc.toString();
-		t !== (u ?? "") && e.dispatch({ changes: {
+		t !== (f ?? "") && e.dispatch({ changes: {
 			from: 0,
 			to: t.length,
-			insert: u ?? ""
+			insert: f ?? ""
 		} });
-	}, [u]), r(() => {
-		L.current?.dispatch({ effects: [q.current.reconfigure(l.editable.of(!h && !C)), J.current.reconfigure(m.readOnly.of(C))] });
-	}, [h, C]), r(() => {
+	}, [f]), r(() => {
+		L.current?.dispatch({ effects: [q.current.reconfigure(d.editable.of(!_ && !C)), J.current.reconfigure(g.readOnly.of(C))] });
+	}, [_, C]), r(() => {
 		L.current?.dispatch({ effects: X.current.reconfigure(b(T)) });
 	}, [T]), r(() => {
 		L.current?.dispatch({ effects: Y.current.reconfigure(x(D)) });
 	}, [D]), r(() => {
-		L.current?.dispatch({ effects: Z.current.reconfigure(S(f)) });
-	}, [f]), r(() => {
+		L.current?.dispatch({ effects: Z.current.reconfigure(S(m)) });
+	}, [m]), r(() => {
 		if (!G) return;
 		let e = setTimeout(() => K(null), 1500);
 		return () => clearTimeout(e);
-	}, [G]), /* @__PURE__ */ y(o, {
+	}, [G]), /* @__PURE__ */ u(o, {
 		ref: F,
 		sx: {
 			position: "relative",
@@ -258,14 +258,14 @@ function C({ value: u, onChange: d, placeholder: f, disabled: h = !1, readonly:
 			overflow: "hidden",
 			display: "flex"
 		},
-		children: [/* @__PURE__ */ v(o, {
+		children: [/* @__PURE__ */ l(o, {
 			ref: I,
 			sx: {
 				flex: 1,
 				overflow: "hidden",
 				display: "flex",
 				flexDirection: "column",
-				opacity: h ? .5 : 1,
+				opacity: _ ? .5 : 1,
 				backgroundColor: Q.palette.background.paper,
 				"& .cm-editor": {
 					flex: 1,
@@ -273,9 +273,9 @@ function C({ value: u, onChange: d, placeholder: f, disabled: h = !1, readonly:
 					flexDirection: "column"
 				}
 			}
-		}), G && /* @__PURE__ */ v(s, {
+		}), G && /* @__PURE__ */ l(s, {
 			in: !0,
-			children: /* @__PURE__ */ v(c, {
+			children: /* @__PURE__ */ l(c, {
 				elevation: 3,
 				sx: {
 					position: "absolute",
@@ -289,7 +289,7 @@ function C({ value: u, onChange: d, placeholder: f, disabled: h = !1, readonly:
 					bgcolor: "grey.900",
 					color: "common.white"
 				},
-				children: /* @__PURE__ */ y(ee, {
+				children: /* @__PURE__ */ u(ee, {
 					variant: "caption",
 					sx: { fontFamily: "monospace" },
 					children: ["Copied: ", G.path]

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

@@ -1,8 +1,8 @@
 import { ToolbarButton as e } from "../shared/ToolbarButton.js";
 import { useTimedFlag as t } from "../shared/useTimedFlag.js";
 import { Box as n, Divider as r } from "@mui/material";
-import { redo as i, undo as a } from "@codemirror/commands";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { redo as o, undo as s } from "@codemirror/commands";
 import c from "@mui/icons-material/ContentCopy";
 import l from "@mui/icons-material/Download";
 import u from "@mui/icons-material/Check";
@@ -62,14 +62,14 @@ function g({ editorView: g, toolbarConfig: _, translation: v, indent: y, downloa
 	}
 	function M() {
 		let e = g;
-		e && (a(e), e.focus());
+		e && (s(e), e.focus());
 	}
 	function N() {
 		let e = g;
-		e && (i(e), e.focus());
+		e && (o(e), e.focus());
 	}
 	let P = _.showFormat || _.showCompact, F = _.showCopy || _.showDownload || _.showClear, I = _.showUndoRedo;
-	return /* @__PURE__ */ s(n, {
+	return /* @__PURE__ */ a(n, {
 		sx: {
 			display: "flex",
 			flexWrap: "wrap",
@@ -81,83 +81,83 @@ function g({ editorView: g, toolbarConfig: _, translation: v, indent: y, downloa
 		role: "toolbar",
 		"aria-label": "JSON editor actions",
 		children: [
-			P && /* @__PURE__ */ s(n, {
+			P && /* @__PURE__ */ a(n, {
 				sx: {
 					display: "flex",
 					gap: .25
 				},
-				children: [_.showFormat && /* @__PURE__ */ o(e, {
+				children: [_.showFormat && /* @__PURE__ */ i(e, {
 					label: v.format,
-					icon: /* @__PURE__ */ o(m, { fontSize: "small" }),
+					icon: /* @__PURE__ */ i(m, { fontSize: "small" }),
 					onClick: D,
 					disabled: E
-				}), _.showCompact && /* @__PURE__ */ o(e, {
+				}), _.showCompact && /* @__PURE__ */ i(e, {
 					label: v.compact,
-					icon: /* @__PURE__ */ o(h, { fontSize: "small" }),
+					icon: /* @__PURE__ */ i(h, { fontSize: "small" }),
 					onClick: O,
 					disabled: E
 				})]
 			}),
-			P && (F || I) && /* @__PURE__ */ o(r, {
+			P && (F || I) && /* @__PURE__ */ i(r, {
 				orientation: "vertical",
 				flexItem: !0,
 				sx: { mx: .5 }
 			}),
-			F && /* @__PURE__ */ s(n, {
+			F && /* @__PURE__ */ a(n, {
 				sx: {
 					display: "flex",
 					gap: .25
 				},
 				children: [
-					_.showCopy && /* @__PURE__ */ o(e, {
+					_.showCopy && /* @__PURE__ */ i(e, {
 						label: S ? v.copySuccess : v.copy,
-						icon: S ? /* @__PURE__ */ o(u, {
+						icon: S ? /* @__PURE__ */ i(u, {
 							fontSize: "small",
 							color: "success"
-						}) : /* @__PURE__ */ o(c, { fontSize: "small" }),
+						}) : /* @__PURE__ */ i(c, { fontSize: "small" }),
 						onClick: k,
 						disabled: E
 					}),
-					_.showDownload && /* @__PURE__ */ o(e, {
+					_.showDownload && /* @__PURE__ */ i(e, {
 						label: w ? v.downloadSuccess : v.download,
-						icon: w ? /* @__PURE__ */ o(u, {
+						icon: w ? /* @__PURE__ */ i(u, {
 							fontSize: "small",
 							color: "success"
-						}) : /* @__PURE__ */ o(l, { fontSize: "small" }),
+						}) : /* @__PURE__ */ i(l, { fontSize: "small" }),
 						onClick: A,
 						disabled: E
 					}),
-					_.showClear && /* @__PURE__ */ o(e, {
+					_.showClear && /* @__PURE__ */ i(e, {
 						label: v.clear,
-						icon: /* @__PURE__ */ o(d, { fontSize: "small" }),
+						icon: /* @__PURE__ */ i(d, { fontSize: "small" }),
 						onClick: j,
 						disabled: E
 					})
 				]
 			}),
-			F && I && /* @__PURE__ */ o(r, {
+			F && I && /* @__PURE__ */ i(r, {
 				orientation: "vertical",
 				flexItem: !0,
 				sx: { mx: .5 }
 			}),
-			I && /* @__PURE__ */ s(n, {
+			I && /* @__PURE__ */ a(n, {
 				sx: {
 					display: "flex",
 					gap: .25
 				},
-				children: [/* @__PURE__ */ o(e, {
+				children: [/* @__PURE__ */ i(e, {
 					label: v.undo,
-					icon: /* @__PURE__ */ o(f, { fontSize: "small" }),
+					icon: /* @__PURE__ */ i(f, { fontSize: "small" }),
 					onClick: M,
 					disabled: E
-				}), /* @__PURE__ */ o(e, {
+				}), /* @__PURE__ */ i(e, {
 					label: v.redo,
-					icon: /* @__PURE__ */ o(p, { fontSize: "small" }),
+					icon: /* @__PURE__ */ i(p, { fontSize: "small" }),
 					onClick: N,
 					disabled: E
 				})]
 			}),
-			!P && !F && !I && /* @__PURE__ */ o(n, { sx: { height: 32 } })
+			!P && !F && !I && /* @__PURE__ */ i(n, { sx: { height: 32 } })
 		]
 	});
 }

package/dist/components/sql-editor/SqlEditorContent.js

@@ -1,12 +1,12 @@
 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 { Compartment as u, EditorState as d } from "@codemirror/state";
-import { defaultKeymap as f, history as p, historyKeymap as m } from "@codemirror/commands";
-import { HighlightStyle as ee, syntaxHighlighting as te } from "@codemirror/language";
-import { lintGutter as ne, linter as h } from "@codemirror/lint";
-import { tags as g } from "@lezer/highlight";
-import { jsx as _ } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
+import { EditorView as a, highlightActiveLine as o, highlightActiveLineGutter as s, keymap as c, lineNumbers as l, placeholder as u } from "@codemirror/view";
+import { Compartment as d, EditorState as f } from "@codemirror/state";
+import { defaultKeymap as p, history as m, historyKeymap as ee } from "@codemirror/commands";
+import { HighlightStyle as te, syntaxHighlighting as ne } from "@codemirror/language";
+import { lintGutter as h, linter as g } from "@codemirror/lint";
+import { tags as _ } from "@lezer/highlight";
 import { MSSQL as v, MySQL as y, PostgreSQL as b, SQLite as x, StandardSQL as S, sql as C } from "@codemirror/lang-sql";
 import { autocompletion as re, completionKeymap as w } from "@codemirror/autocomplete";
 //#region src/components/sql-editor/SqlEditorContent.tsx
@@ -18,7 +18,7 @@ var T = {
 	mssql: v
 };
 function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly: S = !1, showLineNumbers: E = !0, dialect: D = "standard", keywordColor: O, stringColor: k, identifierColor: A, schema: j, onExecute: M, onLint: N, onDiagnosticsChange: P, onViewReady: F, onCursorChange: I, onBlur: L, onFocus: R }) {
-	let z = t(null), B = t(null), V = t(y), H = t(I), U = t(L), W = t(R), G = t(F), K = t(M), q = t(N), J = t(P), Y = t(new u()), X = t(new u()), Z = r(), Q = Z.palette.mode === "dark", $ = !!N, ie = JSON.stringify(j);
+	let z = t(null), B = t(null), V = t(y), H = t(I), U = t(L), W = t(R), G = t(F), K = t(M), q = t(N), J = t(P), Y = t(new d()), X = t(new d()), Z = r(), Q = Z.palette.mode === "dark", $ = !!N, ie = JSON.stringify(j);
 	return e(() => {
 		V.current = y;
 	}, [y]), e(() => {
@@ -37,48 +37,48 @@ function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly:
 		J.current = P;
 	}, [P]), e(() => {
 		if (!z.current) return;
-		let e = B.current?.state.doc.toString() ?? v ?? "", t = O ?? Z.palette.primary.main, n = k ?? Z.palette.success.main, r = A ?? Z.palette.info.main, u = ee.define([
+		let e = B.current?.state.doc.toString() ?? v ?? "", t = O ?? Z.palette.primary.main, n = k ?? Z.palette.success.main, r = A ?? Z.palette.info.main, i = te.define([
 			{
-				tag: g.keyword,
+				tag: _.keyword,
 				color: t,
 				fontWeight: "bold"
 			},
 			{
-				tag: g.name,
+				tag: _.name,
 				color: r
 			},
 			{
-				tag: [g.string, g.special(g.string)],
+				tag: [_.string, _.special(_.string)],
 				color: n,
 				fontWeight: "bold"
 			},
 			{
-				tag: g.number,
+				tag: _.number,
 				color: Z.palette.warning.main
 			},
 			{
-				tag: [g.lineComment, g.blockComment],
+				tag: [_.lineComment, _.blockComment],
 				color: Z.palette.text.disabled,
 				fontStyle: "italic"
 			},
 			{
-				tag: g.operator,
+				tag: _.operator,
 				color: Z.palette.text.secondary
 			},
 			{
-				tag: [g.function(g.variableName), g.function(g.name)],
+				tag: [_.function(_.variableName), _.function(_.name)],
 				color: Z.palette.secondary.main
 			},
 			{
-				tag: g.typeName,
+				tag: _.typeName,
 				color: Z.palette.info.main
 			},
 			{
-				tag: g.invalid,
+				tag: _.invalid,
 				color: Z.palette.error.main,
 				textDecoration: "underline wavy"
 			}
-		]), _ = i.theme({
+		]), d = a.theme({
 			"&": {
 				height: "100%",
 				fontFamily: "'Fira Code', 'JetBrains Mono', 'Consolas', monospace",
@@ -161,36 +161,36 @@ function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly:
 			} catch {
 				return [];
 			}
-		}, N = s.of([{
+		}, N = c.of([{
 			key: "Mod-Enter",
 			run: (e) => (K.current?.(e.state.doc.toString()), !0)
 		}]), P = [
-			_,
-			te(u),
+			d,
+			ne(i),
 			C({
 				dialect: T[D],
 				schema: y
 			}),
-			p(),
+			m(),
 			re(),
 			N,
-			s.of([
-				...f,
-				...m,
+			c.of([
+				...p,
+				...ee,
 				...w
 			]),
-			Y.current.of(i.editable.of(!x && !S)),
-			X.current.of(d.readOnly.of(S)),
-			a(),
-			...E ? [c(), o()] : [],
-			...b ? [l(b)] : [],
-			...$ ? [ne(), h(M, { delay: 600 })] : [],
-			i.updateListener.of((e) => {
+			Y.current.of(a.editable.of(!x && !S)),
+			X.current.of(f.readOnly.of(S)),
+			o(),
+			...E ? [l(), s()] : [],
+			...b ? [u(b)] : [],
+			...$ ? [h(), g(M, { delay: 600 })] : [],
+			a.updateListener.of((e) => {
 				e.docChanged && V.current?.(e.state.doc.toString());
 				let t = e.state.selection.main.head, n = e.state.doc.lineAt(t);
 				H.current(n.number, t - n.from + 1);
 			}),
-			i.domEventHandlers({
+			a.domEventHandlers({
 				blur: () => {
 					U.current?.();
 				},
@@ -198,8 +198,8 @@ function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly:
 					W.current?.();
 				}
 			})
-		], F = new i({
-			state: d.create({
+		], F = new a({
+			state: f.create({
 				doc: e,
 				extensions: P
 			}),
@@ -226,8 +226,8 @@ function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly:
 			insert: v ?? ""
 		} });
 	}, [v]), e(() => {
-		B.current?.dispatch({ effects: [Y.current.reconfigure(i.editable.of(!x && !S)), X.current.reconfigure(d.readOnly.of(S))] });
-	}, [x, S]), /* @__PURE__ */ _(n, {
+		B.current?.dispatch({ effects: [Y.current.reconfigure(a.editable.of(!x && !S)), X.current.reconfigure(f.readOnly.of(S))] });
+	}, [x, S]), /* @__PURE__ */ i(n, {
 		ref: z,
 		sx: {
 			flex: 1,