@thebuoyant-tsdev/mui-ts-library 3.27.0 → 3.28.0

package/README.de.md

@@ -191,7 +191,7 @@ import { RichTextEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ### SqlEditor
 
-SQL-Code-Editor mit Syntax-Highlighting, dialektbewusstem Autocomplete und Inline-Linting. Konzipiert für Developer-Tools, Datenbank-Clients und Admin-Panels — mit `Cmd+Enter`-Shortcut, Multi-Dialekt-Support (MySQL, PostgreSQL, SQLite, MSSQL) und Schema-basiertem Autocomplete.
+SQL-Code-Editor mit Syntax-Highlighting, dialektbewusstem Autocomplete und Inline-Linting. Konzipiert für Developer-Tools, Datenbank-Clients und Admin-Panels — mit `Cmd+Enter` (Ausführen) und `Shift+Alt+F` (SQL formatieren) als Tastenkürzel, Multi-Dialekt-Support (MySQL, PostgreSQL, SQLite, MSSQL) und Schema-basiertem Autocomplete.
 
 ```tsx
 import { SqlEditor } from '@thebuoyant-tsdev/mui-ts-library';
@@ -483,6 +483,30 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [Unveröffentlicht]
+
+**Hinzugefügt**
+- `SqlEditor`: `Shift+Alt+F` Tastenkürzel — löst den vorhandenen SQL-Format-Button direkt aus dem Editor heraus aus (respektiert `readonly` und `toolbarConfig.showFormat`). Keine API-Änderung.
+
+---
+
+### [3.27.1] — 2026-07-14
+
+**Behoben**
+- `GanttChart`: Das linke Task-Panel kann nicht mehr so schmal gezogen werden, dass Spalten-Header überlappen oder Inhalte überlaufen. Der Trenner erzwingt nun eine spaltenbasierte Mindestbreite (Status + Aktionen + optionaler Assignee + 80 px für den Namen). Zeilen- und Header-Container schneiden Inhalte sauber mit `overflow: hidden` ab. Keine API-Änderung.
+
+---
+
+### [3.27.0] — 2026-07-14
+
+**Hinzugefügt**
+- Hover-Callbacks für alle 6 D3-Charts (`onSegmentHover`, `onGroupHover`, `onChordHover`, `onNodeHover`, `onCircleHover`, `onBarHover`) — feuern mit typisiertem Info-Objekt bei `mouseenter`, `null` bei `mouseleave`. Ermöglicht Linked-View-Muster. Alle Props optional, vollständig abwärtskompatibel.
+
+**Behoben**
+- `GanttChart`: `showAssigneeColumn={true}` lässt die Name-Spalte nicht mehr auf ~24 px zusammenfallen. Die initiale Panel-Breite addiert nun automatisch `ASSIGNEE_COL_WIDTH` (110 px) wenn die Spalte aktiviert ist.
+
+---
+
 ### [3.26.1] — 2026-07-13
 
 **Behoben**

package/README.md

@@ -191,7 +191,7 @@ import { RichTextEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ### SqlEditor
 
-SQL code editor with syntax highlighting, dialect-aware autocomplete, and inline linting. Designed for developer tools, database clients, and admin panels where users write and execute SQL queries — with `Cmd+Enter` shortcut, multi-dialect support (MySQL, PostgreSQL, SQLite, MSSQL), and schema-based autocomplete.
+SQL code editor with syntax highlighting, dialect-aware autocomplete, and inline linting. Designed for developer tools, database clients, and admin panels where users write and execute SQL queries — with `Cmd+Enter` (Execute) and `Shift+Alt+F` (Format SQL) shortcuts, multi-dialect support (MySQL, PostgreSQL, SQLite, MSSQL), and schema-based autocomplete.
 
 ```tsx
 import { SqlEditor } from '@thebuoyant-tsdev/mui-ts-library';
@@ -483,6 +483,30 @@ This project follows [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [Unreleased]
+
+**Added**
+- `SqlEditor`: `Shift+Alt+F` keyboard shortcut — triggers the existing SQL Format button directly from the editor (respects `readonly` and `toolbarConfig.showFormat`). No API change.
+
+---
+
+### [3.27.1] — 2026-07-14
+
+**Fixed**
+- `GanttChart`: The left task panel can no longer be dragged so narrow that column headers overlap or content overflows. The divider now enforces a column-aware minimum width (Status + Actions + optional Assignee + 80 px for the name). Row and header containers clip cleanly with `overflow: hidden`. No API change.
+
+---
+
+### [3.27.0] — 2026-07-14
+
+**Added**
+- Hover callbacks for all 6 D3 charts (`onSegmentHover`, `onGroupHover`, `onChordHover`, `onNodeHover`, `onCircleHover`, `onBarHover`) — fire with typed info on `mouseenter`, `null` on `mouseleave`. Enables linked-view patterns. All props optional, fully backwards compatible.
+
+**Fixed**
+- `GanttChart`: `showAssigneeColumn={true}` no longer collapses the name column to ~24 px. Initial panel width now auto-adds `ASSIGNEE_COL_WIDTH` (110 px) when the column is enabled.
+
+---
+
 ### [3.26.1] — 2026-07-13
 
 **Fixed**

package/dist/components/gantt-chart/GanttChart.js

@@ -4,39 +4,39 @@ import { DEFAULT_GANTT_TRANSLATIONS as r } from "./GanttChart.types.js";
 import { GanttTaskPanel as i } from "./GanttTaskPanel.js";
 import { GanttTimeline as a } from "./GanttTimeline.js";
 import { GanttToolbar as o } from "./GanttToolbar.js";
-import { createContext as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
-import { Box as m } from "@mui/material";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { useStore as _ } from "zustand";
+import { createContext as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as ee } from "react";
+import { Box as p } from "@mui/material";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useStore as g } from "zustand";
 //#region src/components/gantt-chart/GanttChart.tsx
-var v = s(null);
-function y(e) {
-	let t = l(v);
+var _ = s(null);
+function v(e) {
+	let t = l(_);
 	if (!t) throw Error("GanttChartStoreContext is missing.");
-	return _(t, e);
+	return g(t, e);
 }
-function b() {
-	let e = l(v);
+function y() {
+	let e = l(_);
 	if (!e) throw Error("GanttChartStoreContext is missing.");
 	return e;
 }
-var x = s(r);
-function S() {
-	return l(x);
+var b = s(r);
+function x() {
+	return l(b);
 }
-var C = s({});
-function w() {
-	return l(C);
+var S = s({});
+function C() {
+	return l(S);
 }
-function T(e, t) {
+function w(e, t) {
 	return e === void 0 ? t : e === "auto" ? "100%" : typeof e == "string" && /^\d+$/.test(e) ? Number(e) : e;
 }
-var E = [
+var T = [
 	"days",
 	"weeks",
 	"months",
 	"quarters"
-], D = {
+], E = {
 	showScaleDays: !0,
 	showScaleWeeks: !0,
 	showScaleMonths: !0,
@@ -49,12 +49,12 @@ var E = [
 	showExportCSV: !1,
 	showAssigneeFilter: !1
 };
-function ee({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEditTask: l, onDeleteTask: _, onStatusChange: v, onTasksChange: x, enableBuiltinDialogs: S = !0, onTaskCreated: C, onTaskUpdated: w, onTaskDeleted: ee, showToolbar: O = !0, toolbarConfig: k, height: A, width: te, minPanelWidth: j = 200, maxPanelWidth: M = 600, zoomable: N = !1, draggable: P = !1, resizable: F = !1, inlineEdit: I = !1, progressDraggable: ne = !1, showCriticalPath: re = !1, virtualizeRows: L = !1, showAssigneeColumn: R = !1, onExportCSV: z, onDragStart: B, onTaskMoved: V, onTaskResized: H }) {
-	let U = T(A, 400), W = d(() => ({
-		...D,
+function D({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEditTask: l, onDeleteTask: g, onStatusChange: _, onTasksChange: b, enableBuiltinDialogs: x = !0, onTaskCreated: S, onTaskUpdated: C, onTaskDeleted: D, showToolbar: O = !0, toolbarConfig: k, height: A, width: j, minPanelWidth: M = 200, maxPanelWidth: N = 600, zoomable: P = !1, draggable: F = !1, resizable: te = !1, inlineEdit: ne = !1, progressDraggable: re = !1, showCriticalPath: ie = !1, virtualizeRows: I = !1, showAssigneeColumn: L = !1, onExportCSV: R, onDragStart: z, onTaskMoved: B, onTaskResized: V }) {
+	let H = w(A, 400), U = d(() => ({
+		...E,
 		...k
-	}), [k]), G = T(te, "100%"), K = y((e) => e.setTasks), q = y((e) => e.timeScale), J = y((e) => e.setTimeScale), Y = y((e) => e.timelineRange), X = f(null), Z = f(null), Q = f(!1), [$, ie] = p(320 + (R ? 110 : 0)), ae = b(), oe = c(() => {
-		let e = ae.getState().tasks, t = [[
+	}), [k]), W = w(j, "100%"), G = v((e) => e.setTasks), K = v((e) => e.timeScale), q = v((e) => e.setTimeScale), J = v((e) => e.timelineRange), Y = f(null), X = f(null), Z = f(!1), [Q, ae] = ee(320 + (L ? 110 : 0)), oe = Math.max(M, 90 + (x || s || l || g ? 96 : 0) + (L ? 110 : 0) + 80), $ = y(), se = c(() => {
+		let e = $.getState().tasks, t = [[
 			"id",
 			"name",
 			"status",
@@ -79,93 +79,93 @@ function ee({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdi
 			(e.dependencies ?? []).join(";"),
 			e.color ?? ""
 		].join(","))].join("\n");
-		if (z) z(t, e);
+		if (R) R(t, e);
 		else {
 			let e = new Blob([t], { type: "text/csv;charset=utf-8;" }), n = URL.createObjectURL(e), r = document.createElement("a");
 			r.href = n, r.download = "gantt-tasks.csv", r.click(), URL.revokeObjectURL(n);
 		}
-	}, [ae, z]);
+	}, [$, R]);
 	u(() => {
-		K(t);
-	}, [t, K]);
-	let se = () => {
-		Q.current ||= (Q.current = !0, Z.current && X.current && (Z.current.scrollTop = X.current.scrollTop), !1);
-	}, ce = () => {
-		Q.current ||= (Q.current = !0, X.current && Z.current && (X.current.scrollTop = Z.current.scrollTop), !1);
-	}, le = c(() => {
-		if (!Z.current) return;
-		let t = e(Y, q), n = Date.now(), r = t.start.getTime(), i = t.end.getTime(), a = (n - r) / (i - r) * Z.current.scrollWidth;
-		Z.current.scrollLeft = Math.max(0, a - Z.current.clientWidth / 2);
-	}, [Y, q]);
+		G(t);
+	}, [t, G]);
+	let ce = () => {
+		Z.current ||= (Z.current = !0, X.current && Y.current && (X.current.scrollTop = Y.current.scrollTop), !1);
+	}, le = () => {
+		Z.current ||= (Z.current = !0, Y.current && X.current && (Y.current.scrollTop = X.current.scrollTop), !1);
+	}, ue = c(() => {
+		if (!X.current) return;
+		let t = e(J, K), n = Date.now(), r = t.start.getTime(), i = t.end.getTime(), a = (n - r) / (i - r) * X.current.scrollWidth;
+		X.current.scrollLeft = Math.max(0, a - X.current.clientWidth / 2);
+	}, [J, K]);
 	u(() => {
-		if (!N || !Z.current) return;
-		let e = Z.current, t = (e) => {
+		if (!P || !X.current) return;
+		let e = X.current, t = (e) => {
 			if (!e.ctrlKey) return;
 			e.preventDefault();
-			let t = E.indexOf(q);
-			e.deltaY < 0 && t > 0 ? J(E[t - 1]) : e.deltaY > 0 && t < E.length - 1 && J(E[t + 1]);
+			let t = T.indexOf(K);
+			e.deltaY < 0 && t > 0 ? q(T[t - 1]) : e.deltaY > 0 && t < T.length - 1 && q(T[t + 1]);
 		};
 		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
 	}, [
-		N,
-		q,
-		J
+		P,
+		K,
+		q
 	]);
-	let ue = c((e) => {
+	let de = c((e) => {
 		e.preventDefault();
-		let t = e.clientX, n = $, r = (e) => {
+		let t = e.clientX, n = Q, r = (e) => {
 			let r = e.clientX - t;
-			ie(Math.max(j, Math.min(M, n + r)));
+			ae(Math.max(oe, Math.min(N, n + r)));
 		}, i = () => {
 			document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i);
 		};
 		document.addEventListener("mousemove", r), document.addEventListener("mouseup", i);
 	}, [
-		$,
-		j,
-		M
+		Q,
+		oe,
+		N
 	]);
-	return /* @__PURE__ */ g(m, {
+	return /* @__PURE__ */ h(p, {
 		sx: {
 			display: "flex",
 			flexDirection: "column",
-			height: U,
-			width: G,
+			height: H,
+			width: W,
 			border: "1px solid",
 			borderColor: "divider",
 			borderRadius: 1,
 			overflow: "hidden"
 		},
-		children: [O && /* @__PURE__ */ h(o, {
-			onScrollToToday: le,
-			config: W,
-			onExportCSV: W.showExportCSV ? oe : void 0
-		}), /* @__PURE__ */ g(m, {
+		children: [O && /* @__PURE__ */ m(o, {
+			onScrollToToday: ue,
+			config: U,
+			onExportCSV: U.showExportCSV ? se : void 0
+		}), /* @__PURE__ */ h(p, {
 			sx: {
 				display: "flex",
 				flex: 1,
 				overflow: "hidden"
 			},
 			children: [
-				/* @__PURE__ */ h(i, {
-					scrollRef: X,
-					onScroll: se,
-					panelWidth: $,
+				/* @__PURE__ */ m(i, {
+					scrollRef: Y,
+					onScroll: ce,
+					panelWidth: Q,
 					onTaskClick: n,
 					onAddTask: s,
 					onEditTask: l,
-					onDeleteTask: _,
-					onStatusChange: v,
-					onTasksChange: x,
-					enableBuiltinDialogs: S,
-					onTaskCreated: C,
-					onTaskUpdated: w,
-					onTaskDeleted: ee,
-					inlineEdit: I,
-					virtualizeRows: L,
-					showAssigneeColumn: R
+					onDeleteTask: g,
+					onStatusChange: _,
+					onTasksChange: b,
+					enableBuiltinDialogs: x,
+					onTaskCreated: S,
+					onTaskUpdated: C,
+					onTaskDeleted: D,
+					inlineEdit: ne,
+					virtualizeRows: I,
+					showAssigneeColumn: L
 				}),
-				/* @__PURE__ */ h(m, {
+				/* @__PURE__ */ m(p, {
 					"data-testid": "gantt-panel-divider",
 					sx: {
 						width: 4,
@@ -174,88 +174,88 @@ function ee({ tasks: t, onTaskClick: n, onMilestoneClick: r, onAddTask: s, onEdi
 						cursor: "col-resize",
 						"&:hover": { bgcolor: "action.hover" }
 					},
-					onMouseDown: ue
+					onMouseDown: de
 				}),
-				/* @__PURE__ */ h(a, {
-					scrollRef: Z,
-					onScroll: ce,
+				/* @__PURE__ */ m(a, {
+					scrollRef: X,
+					onScroll: le,
 					onTaskClick: n,
 					onMilestoneClick: r,
-					draggable: P,
-					resizable: F,
-					progressDraggable: ne,
-					showCriticalPath: re,
-					virtualizeRows: L,
-					onDragStart: B,
-					onTaskMoved: V,
-					onTaskResized: H,
-					onTasksChange: x,
-					onStatusChange: v
+					draggable: F,
+					resizable: te,
+					progressDraggable: re,
+					showCriticalPath: ie,
+					virtualizeRows: I,
+					onDragStart: z,
+					onTaskMoved: B,
+					onTaskResized: V,
+					onTasksChange: b,
+					onStatusChange: _
 				})
 			]
 		})]
 	});
 }
-function O({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showToolbar: o = !0, defaultRangeStart: s, defaultRangeEnd: c, translations: l, enableBuiltinDialogs: u = !0, toolbarConfig: f, zoomable: m = !1, draggable: g = !1, resizable: _ = !1, inlineEdit: y = !1, progressDraggable: b = !1, showCriticalPath: S = !1, virtualizeRows: w = !1, showAssigneeColumn: T = !1, cascadeDependencies: E = !1, statusColors: D, ganttTheme: O, onExportCSV: k, onDragStart: A, onTaskClick: te, onMilestoneClick: j, onAddTask: M, onEditTask: N, onDeleteTask: P, onStatusChange: F, onTasksChange: I, onTaskMoved: ne, onTaskResized: re, onTaskCreated: L, onTaskUpdated: R, onTaskDeleted: z, height: B, width: V, minPanelWidth: H, maxPanelWidth: U }) {
-	let W = d(() => ({
+function O({ tasks: e, timeScale: i = "months", initialExpandAll: a = !1, showToolbar: o = !0, defaultRangeStart: s, defaultRangeEnd: c, translations: l, enableBuiltinDialogs: u = !0, toolbarConfig: f, zoomable: p = !1, draggable: h = !1, resizable: g = !1, inlineEdit: v = !1, progressDraggable: y = !1, showCriticalPath: x = !1, virtualizeRows: C = !1, showAssigneeColumn: w = !1, cascadeDependencies: T = !1, statusColors: E, ganttTheme: O, onExportCSV: k, onDragStart: A, onTaskClick: j, onMilestoneClick: M, onAddTask: N, onEditTask: P, onDeleteTask: F, onStatusChange: te, onTasksChange: ne, onTaskMoved: re, onTaskResized: ie, onTaskCreated: I, onTaskUpdated: L, onTaskDeleted: R, height: z, width: B, minPanelWidth: V, maxPanelWidth: H }) {
+	let U = d(() => ({
 		...r,
 		...l
-	}), [l]), [G] = p(() => {
-		if (!(s !== void 0 || c !== void 0)) return n(e, i, a, void 0, E);
+	}), [l]), [W] = ee(() => {
+		if (!(s !== void 0 || c !== void 0)) return n(e, i, a, void 0, T);
 		let r = t(e);
 		return n(e, i, a, {
 			start: s ?? r.start,
 			end: c ?? r.end
-		}, E);
-	}), K = d(() => ({
+		}, T);
+	}), G = d(() => ({
 		...O,
 		statusColors: {
-			...D,
+			...E,
 			...O?.statusColors
 		}
-	}), [D, O]);
-	return /* @__PURE__ */ h(x.Provider, {
-		value: W,
-		children: /* @__PURE__ */ h(C.Provider, {
-			value: K,
-			children: /* @__PURE__ */ h(v.Provider, {
-				value: G,
-				children: /* @__PURE__ */ h(ee, {
+	}), [E, O]);
+	return /* @__PURE__ */ m(b.Provider, {
+		value: U,
+		children: /* @__PURE__ */ m(S.Provider, {
+			value: G,
+			children: /* @__PURE__ */ m(_.Provider, {
+				value: W,
+				children: /* @__PURE__ */ m(D, {
 					tasks: e,
 					timeScale: i,
 					enableBuiltinDialogs: u,
 					showToolbar: o,
 					toolbarConfig: f,
-					zoomable: m,
-					draggable: g,
-					resizable: _,
-					inlineEdit: y,
-					progressDraggable: b,
-					showCriticalPath: S,
-					virtualizeRows: w,
-					showAssigneeColumn: T,
+					zoomable: p,
+					draggable: h,
+					resizable: g,
+					inlineEdit: v,
+					progressDraggable: y,
+					showCriticalPath: x,
+					virtualizeRows: C,
+					showAssigneeColumn: w,
 					onExportCSV: k,
 					onDragStart: A,
-					onTaskClick: te,
-					onMilestoneClick: j,
-					onAddTask: M,
-					onEditTask: N,
-					onDeleteTask: P,
-					onStatusChange: F,
-					onTasksChange: I,
-					onTaskMoved: ne,
-					onTaskResized: re,
-					onTaskCreated: L,
-					onTaskUpdated: R,
-					onTaskDeleted: z,
-					height: B,
-					width: V,
-					minPanelWidth: H,
-					maxPanelWidth: U
+					onTaskClick: j,
+					onMilestoneClick: M,
+					onAddTask: N,
+					onEditTask: P,
+					onDeleteTask: F,
+					onStatusChange: te,
+					onTasksChange: ne,
+					onTaskMoved: re,
+					onTaskResized: ie,
+					onTaskCreated: I,
+					onTaskUpdated: L,
+					onTaskDeleted: R,
+					height: z,
+					width: B,
+					minPanelWidth: V,
+					maxPanelWidth: H
 				})
 			})
 		})
 	});
 }
 //#endregion
-export { O as GanttChart, y as useGanttChartStore, w as useGanttTheme, S as useGanttTranslations, b as useRawGanttChartStore };
+export { O as GanttChart, v as useGanttChartStore, C as useGanttTheme, x as useGanttTranslations, y as useRawGanttChartStore };

package/dist/components/gantt-chart/GanttTaskPanel.js

@@ -31,6 +31,7 @@ function T({ task: e, expandedIds: t, toggleExpand: i, hasActionsColumn: a, show
 			height: 40,
 			display: "flex",
 			alignItems: "center",
+			overflow: "hidden",
 			borderBottom: "1px solid",
 			borderRight: "1px solid",
 			borderColor: "divider",
@@ -312,6 +313,7 @@ function E({ scrollRef: n, onScroll: r, panelWidth: ee, onTaskClick: f, onAddTas
 						height: 40,
 						display: "flex",
 						alignItems: "center",
+						overflow: "hidden",
 						borderBottom: P === "days" ? "1px solid" : void 0,
 						borderColor: P === "days" ? "divider" : void 0
 					},

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

@@ -2,78 +2,105 @@ import { normalizeSize as e } from "../shared/normalizeSize.js";
 import { DEFAULT_SQL_EDITOR_TOOLBAR_CONFIG as t, DEFAULT_SQL_EDITOR_TRANSLATION as n } from "./SqlEditor.types.js";
 import { SqlEditorContent as r } from "./SqlEditorContent.js";
 import { SqlEditorToolbar as i } from "./SqlEditorToolbar.js";
-import { SqlEditorFooter as a } from "./SqlEditorFooter.js";
-import { useSqlQueryHistory as o } from "./useSqlQueryHistory.js";
-import { useCallback as s, useRef as c, useState as l } from "react";
-import { Box as u, Divider as d, Paper as f } from "@mui/material";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { SqlEditorFooter as ee } from "./SqlEditorFooter.js";
+import { useSqlQueryHistory as a } from "./useSqlQueryHistory.js";
+import { useCallback as o, useMemo as s, useRef as c, useState as l } from "react";
+import { Box as u, Divider as d, Paper as te } from "@mui/material";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { format as h } from "sql-formatter";
 //#region src/components/sql-editor/SqlEditor.tsx
-function g({ value: g, onChange: _, placeholder: ee, height: v, width: y, disabled: b = !1, readonly: x = !1, error: S = !1, helperText: C, name: w, dialect: T = "standard", showLineNumbers: E = !0, showLineColumn: D = !0, showErrorCount: O = !1, toolbarConfig: k, translation: A, highlightColors: j, schema: M, queryHistoryKey: N = "sql-editor-query-history", queryHistoryMaxEntries: P = 20, onExecute: F, onLint: I, onBlur: L, onFocus: R }) {
+var ne = {
+	standard: "sql",
+	mysql: "mysql",
+	postgresql: "postgresql",
+	sqlite: "sqlite",
+	mssql: "tsql"
+};
+function g({ value: g, onChange: _, placeholder: re, height: v, width: y, disabled: b = !1, readonly: x = !1, error: S = !1, helperText: C, name: w, dialect: T = "standard", showLineNumbers: E = !0, showLineColumn: D = !0, showErrorCount: O = !1, toolbarConfig: k, translation: A, highlightColors: j, schema: M, queryHistoryKey: N = "sql-editor-query-history", queryHistoryMaxEntries: P = 20, onExecute: F, onLint: I, onBlur: L, onFocus: R }) {
 	let z = {
 		...n,
 		...A
 	}, B = {
 		...t,
 		...k
-	}, { history: te, addEntry: V, clearHistory: H } = o(N, P), U = e(v), W = e(y), G = U === "auto", K = G ? void 0 : U ?? 300, q = c(null), [J, Y] = l(null), [X, Z] = l({
+	}, { history: V, addEntry: H, clearHistory: U } = a(N, P), W = e(v), G = e(y), K = W === "auto", q = K ? void 0 : W ?? 300, J = c(null), [Y, X] = l(null), [Z, ie] = l({
 		line: 1,
 		col: 1
-	}), [Q, ne] = l(0), re = s((e) => {
-		q.current = e, Y(e);
-	}, []), ie = s((e, t) => {
-		Z({
+	}), [ae, Q] = l(0), oe = o((e) => {
+		J.current = e, X(e);
+	}, []), se = o((e, t) => {
+		ie({
 			line: e,
 			col: t
 		});
-	}, []), ae = s((e) => {
-		ne(e);
+	}, []), ce = o((e) => {
+		Q(e);
 	}, []), $ = F ? (e) => {
-		V(e), F(e);
-	} : void 0, oe = s((e) => {
-		let t = q.current;
+		H(e), F(e);
+	} : void 0, le = s(() => {
+		if (!(x || !B.showFormat)) return () => {
+			let e = J.current;
+			if (!e) return;
+			let t = e.state.doc.toString();
+			try {
+				let n = h(t, { language: ne[T] });
+				e.dispatch({ changes: {
+					from: 0,
+					to: e.state.doc.length,
+					insert: n
+				} });
+			} catch {}
+			e.focus();
+		};
+	}, [
+		T,
+		x,
+		B.showFormat
+	]), ue = o((e) => {
+		let t = J.current;
 		t && (t.dispatch({ changes: {
 			from: 0,
 			to: t.state.doc.length,
 			insert: e
 		} }), t.focus()), _?.(e);
-	}, [_]), se = D || O || !!C;
-	return /* @__PURE__ */ h(u, {
+	}, [_]), de = D || O || !!C;
+	return /* @__PURE__ */ m(u, {
 		sx: {
-			width: W ?? "100%",
-			...G ? {
+			width: G ?? "100%",
+			...K ? {
 				display: "flex",
 				flexDirection: "column",
 				flex: 1
 			} : {}
 		},
 		children: [
-			/* @__PURE__ */ h(f, {
+			/* @__PURE__ */ m(te, {
 				variant: "outlined",
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					overflow: "hidden",
-					...G ? { flex: 1 } : { height: K },
+					...K ? { flex: 1 } : { height: q },
 					borderColor: S ? "error.main" : void 0,
 					"&:focus-within": {
 						borderColor: S ? "error.main" : "primary.main",
 						borderWidth: 2
 					}
 				},
-				children: [!x && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(i, {
-					editorView: J,
+				children: [!x && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(i, {
+					editorView: Y,
 					toolbarConfig: B,
 					translation: z,
 					dialect: T,
 					disabled: b,
 					onExecute: $,
-					queryHistory: te,
-					onSelectHistoryEntry: oe,
-					onClearHistory: H
-				}), /* @__PURE__ */ m(d, {})] }), /* @__PURE__ */ m(r, {
+					queryHistory: V,
+					onSelectHistoryEntry: ue,
+					onClearHistory: U
+				}), /* @__PURE__ */ p(d, {})] }), /* @__PURE__ */ p(r, {
 					value: g,
 					onChange: _,
-					placeholder: ee,
+					placeholder: re,
 					disabled: b,
 					readonly: x,
 					showLineNumbers: E,
@@ -83,25 +110,26 @@ function g({ value: g, onChange: _, placeholder: ee, height: v, width: y, disabl
 					identifierColor: j?.identifier,
 					schema: M,
 					onExecute: $,
+					onFormat: le,
 					onLint: I,
-					onDiagnosticsChange: I ? ae : void 0,
-					onViewReady: re,
-					onCursorChange: ie,
+					onDiagnosticsChange: I ? ce : void 0,
+					onViewReady: oe,
+					onCursorChange: se,
 					onBlur: L,
 					onFocus: R
 				})]
 			}),
-			se && /* @__PURE__ */ m(a, {
+			de && /* @__PURE__ */ p(ee, {
 				helperText: C,
 				error: S,
 				showLineColumn: D,
 				showErrorCount: O,
-				diagnosticsCount: Q,
-				cursorLine: X.line,
-				cursorCol: X.col,
+				diagnosticsCount: ae,
+				cursorLine: Z.line,
+				cursorCol: Z.col,
 				translation: z
 			}),
-			w && /* @__PURE__ */ m("input", {
+			w && /* @__PURE__ */ p("input", {
 				type: "hidden",
 				name: w,
 				value: g ?? ""

package/dist/components/sql-editor/SqlEditorContent.d.ts

@@ -13,6 +13,7 @@ type SqlEditorContentProps = {
     identifierColor?: string;
     schema?: SqlSchema;
     onExecute?: (sql: string) => void;
+    onFormat?: () => void;
     onLint?: (sql: string) => Promise<SqlLintError[]> | SqlLintError[];
     onDiagnosticsChange?: (count: number) => void;
     onViewReady: (view: EditorView | null) => void;
@@ -20,5 +21,5 @@ type SqlEditorContentProps = {
     onBlur?: () => void;
     onFocus?: () => void;
 };
-export declare function SqlEditorContent({ value, onChange, placeholder, disabled, readonly, showLineNumbers, dialect, keywordColor, stringColor, identifierColor, schema, onExecute, onLint, onDiagnosticsChange, onViewReady, onCursorChange, onBlur, onFocus, }: SqlEditorContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function SqlEditorContent({ value, onChange, placeholder, disabled, readonly, showLineNumbers, dialect, keywordColor, stringColor, identifierColor, schema, onExecute, onFormat, onLint, onDiagnosticsChange, onViewReady, onCursorChange, onBlur, onFocus, }: SqlEditorContentProps): import("react/jsx-runtime").JSX.Element;
 export {};