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

package/README.de.md

@@ -313,6 +313,29 @@ import type {
 
 ## Changelog
 
+### [3.6.1] — 2026-06-22
+
+**⚠️ TypeScript-Kompatibilitäts-Fix**
+- `v3.4.0`/`v3.5.0` machten neue Translation-Felder auf `TagSelectionTranslation` und `SqlEditorTranslation` erforderlich, was TypeScript-Builds für Code brach, der eine eigenständige Variable gegen den vollen benannten Typ deklariert. Diese Felder sind jetzt optional — alte Objekt-Literale kompilieren wieder, keine Code-Änderung nötig.
+
+---
+
+### [3.6.0] — 2026-06-22
+
+**Storybook & StackBlitz — Praxisnahe Vitrine**
+- 17 neue Storybook-Stories über alle 11 Komponenten, jede mit einem komplett anderen, realistischen Datensatz (Festplatten-Analyse, Handelsströme, Bauprojekt-Zeitpläne, Support-Ticket-Routing u.v.m.) statt Prop-Toggle-Varianten auf einer generischen Fixture.
+- StackBlitz-Demo-Karten zeigen jetzt eine Use-Case-Kategorie zur schnellen Einordnung, mit geschärftem Hero-Text.
+
+---
+
+### [3.5.0] — 2026-06-22
+
+**SqlEditor — Query-Verlauf**
+- Neue Option `toolbarConfig.showHistory` speichert jede ausgeführte Abfrage in `localStorage` und lädt sie per Klick wieder. Neue Props: `queryHistoryKey`, `queryHistoryMaxEntries`.
+- D3-Chart-Storybook-Stories demonstrieren jetzt automatisch Drill-down, Zoom und Hover-Highlight beim Laden.
+
+---
+
 ### [3.4.0] — 2026-06-21
 
 **Accessibility & Test-Coverage**

package/README.md

@@ -313,6 +313,29 @@ import type {
 
 ## Changelog
 
+### [3.6.1] — 2026-06-22
+
+**⚠️ TypeScript Compatibility Fix**
+- `v3.4.0`/`v3.5.0` made new translation fields required on `TagSelectionTranslation` and `SqlEditorTranslation`, breaking TypeScript builds for code that declares a standalone variable against the full named type. Those fields are now optional — old object literals compile again, no code change needed.
+
+---
+
+### [3.6.0] — 2026-06-22
+
+**Storybook & StackBlitz — Real-World Showcase**
+- 17 new Storybook stories across all 11 components, each with a genuinely different, realistic dataset (disk-usage analysis, trade flows, construction schedules, support-ticket routing, and more) instead of prop-toggle variations on one generic fixture.
+- StackBlitz demo cards now show a use-case category for quick orientation, with sharpened hero copy.
+
+---
+
+### [3.5.0] — 2026-06-22
+
+**SqlEditor — Query History**
+- New `toolbarConfig.showHistory` option saves every executed query to `localStorage` and lets you reload it with one click. New props: `queryHistoryKey`, `queryHistoryMaxEntries`.
+- D3 chart Storybook stories now auto-demonstrate drill-down, zoom, and hover-highlight on load.
+
+---
+
 ### [3.4.0] — 2026-06-21
 
 **Accessibility & Test Coverage**

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

@@ -1,2 +1,2 @@
 import { type SqlEditorProps } from "./SqlEditor.types";
-export declare function SqlEditor({ value, onChange, placeholder, height, width, disabled, readonly, error, helperText, name, dialect, showLineNumbers, showLineColumn, showErrorCount, toolbarConfig, translation, highlightColors, schema, onExecute, onLint, onBlur, onFocus, }: SqlEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function SqlEditor({ value, onChange, placeholder, height, width, disabled, readonly, error, helperText, name, dialect, showLineNumbers, showLineColumn, showErrorCount, toolbarConfig, translation, highlightColors, schema, queryHistoryKey, queryHistoryMaxEntries, onExecute, onLint, onBlur, onFocus, }: SqlEditorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,64 +3,77 @@ import { DEFAULT_SQL_EDITOR_TOOLBAR_CONFIG as t, DEFAULT_SQL_EDITOR_TRANSLATION
 import { SqlEditorContent as r } from "./SqlEditorContent.js";
 import { SqlEditorToolbar as i } from "./SqlEditorToolbar.js";
 import { SqlEditorFooter as a } from "./SqlEditorFooter.js";
-import { useCallback as o, useRef as s, useState as c } from "react";
-import { Box as l, Divider as u, Paper as d } from "@mui/material";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+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";
 //#region src/components/sql-editor/SqlEditor.tsx
-function h({ value: h, onChange: g, placeholder: _, 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, onExecute: N, onLint: P, onBlur: F, onFocus: I }) {
-	let L = {
+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 }) {
+	let z = {
 		...n,
 		...A
-	}, R = {
+	}, B = {
 		...t,
 		...k
-	}, z = e(v), B = e(y), V = z === "auto", H = V ? void 0 : z ?? 300, U = s(null), [W, G] = c(null), [K, q] = c({
+	}, { 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({
 		line: 1,
 		col: 1
-	}), [J, Y] = c(0), X = o((e) => {
-		U.current = e, G(e);
-	}, []), Z = o((e, t) => {
-		q({
+	}), [Q, ne] = l(0), re = s((e) => {
+		q.current = e, Y(e);
+	}, []), ie = s((e, t) => {
+		Z({
 			line: e,
 			col: t
 		});
-	}, []), Q = o((e) => {
-		Y(e);
-	}, []), $ = D || O || !!C;
-	return /* @__PURE__ */ m(l, {
+	}, []), ae = s((e) => {
+		ne(e);
+	}, []), $ = F ? (e) => {
+		V(e), F(e);
+	} : void 0, oe = s((e) => {
+		let t = q.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, {
 		sx: {
-			width: B ?? "100%",
-			...V ? {
+			width: W ?? "100%",
+			...G ? {
 				display: "flex",
 				flexDirection: "column",
 				flex: 1
 			} : {}
 		},
 		children: [
-			/* @__PURE__ */ m(d, {
+			/* @__PURE__ */ h(f, {
 				variant: "outlined",
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					overflow: "hidden",
-					...V ? { flex: 1 } : { height: H },
+					...G ? { flex: 1 } : { height: K },
 					borderColor: S ? "error.main" : void 0,
 					"&:focus-within": {
 						borderColor: S ? "error.main" : "primary.main",
 						borderWidth: 2
 					}
 				},
-				children: [!x && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(i, {
-					editorView: W,
-					toolbarConfig: R,
-					translation: L,
+				children: [!x && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(i, {
+					editorView: J,
+					toolbarConfig: B,
+					translation: z,
 					dialect: T,
 					disabled: b,
-					onExecute: N
-				}), /* @__PURE__ */ p(u, {})] }), /* @__PURE__ */ p(r, {
-					value: h,
-					onChange: g,
-					placeholder: _,
+					onExecute: $,
+					queryHistory: te,
+					onSelectHistoryEntry: oe,
+					onClearHistory: H
+				}), /* @__PURE__ */ m(d, {})] }), /* @__PURE__ */ m(r, {
+					value: g,
+					onChange: _,
+					placeholder: ee,
 					disabled: b,
 					readonly: x,
 					showLineNumbers: E,
@@ -69,32 +82,32 @@ function h({ value: h, onChange: g, placeholder: _, height: v, width: y, disable
 					stringColor: j?.string,
 					identifierColor: j?.identifier,
 					schema: M,
-					onExecute: N,
-					onLint: P,
-					onDiagnosticsChange: P ? Q : void 0,
-					onViewReady: X,
-					onCursorChange: Z,
-					onBlur: F,
-					onFocus: I
+					onExecute: $,
+					onLint: I,
+					onDiagnosticsChange: I ? ae : void 0,
+					onViewReady: re,
+					onCursorChange: ie,
+					onBlur: L,
+					onFocus: R
 				})]
 			}),
-			$ && /* @__PURE__ */ p(a, {
+			se && /* @__PURE__ */ m(a, {
 				helperText: C,
 				error: S,
 				showLineColumn: D,
 				showErrorCount: O,
-				diagnosticsCount: J,
-				cursorLine: K.line,
-				cursorCol: K.col,
-				translation: L
+				diagnosticsCount: Q,
+				cursorLine: X.line,
+				cursorCol: X.col,
+				translation: z
 			}),
-			w && /* @__PURE__ */ p("input", {
+			w && /* @__PURE__ */ m("input", {
 				type: "hidden",
 				name: w,
-				value: h ?? ""
+				value: g ?? ""
 			})
 		]
 	});
 }
 //#endregion
-export { h as SqlEditor };
+export { g as SqlEditor };

package/dist/components/sql-editor/SqlEditor.types.d.ts

@@ -10,6 +10,8 @@ export type SqlEditorToolbarConfig = {
     showClear?: boolean;
     showExecute?: boolean;
     showUndoRedo?: boolean;
+    /** Shows a "Query history" button — requires `onExecute` to be set (default: false). */
+    showHistory?: boolean;
 };
 export declare const DEFAULT_SQL_EDITOR_TOOLBAR_CONFIG: Required<SqlEditorToolbarConfig>;
 export type SqlEditorTranslation = {
@@ -22,8 +24,14 @@ export type SqlEditorTranslation = {
     redo: string;
     lineColumn: string;
     errorCount: string;
+    /** @since 3.5.0 — optional for backward compatibility with full-literal objects typed before this field existed. */
+    history?: string;
+    /** @since 3.5.0 — optional for backward compatibility with full-literal objects typed before this field existed. */
+    historyEmpty?: string;
+    /** @since 3.5.0 — optional for backward compatibility with full-literal objects typed before this field existed. */
+    clearHistory?: string;
 };
-export declare const DEFAULT_SQL_EDITOR_TRANSLATION: SqlEditorTranslation;
+export declare const DEFAULT_SQL_EDITOR_TRANSLATION: Required<SqlEditorTranslation>;
 export type SqlEditorDialect = "standard" | "mysql" | "postgresql" | "sqlite" | "mssql";
 export type SqlColumn = {
     name: string;
@@ -55,6 +63,10 @@ export type SqlEditorProps = {
     /** Name for native form submission via hidden input. */
     name?: string;
     placeholder?: string;
+    /** localStorage key for the query history — set a unique value if multiple SqlEditors run on the same page (default: "sql-editor-query-history"). */
+    queryHistoryKey?: string;
+    /** Maximum number of entries kept in the query history (default: 20). */
+    queryHistoryMaxEntries?: number;
     readonly?: boolean;
     schema?: SqlSchema;
     showErrorCount?: boolean;

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

@@ -4,7 +4,8 @@ var e = {
 	showCopy: !0,
 	showClear: !0,
 	showExecute: !1,
-	showUndoRedo: !0
+	showUndoRedo: !0,
+	showHistory: !1
 }, t = {
 	format: "Format SQL",
 	copy: "Copy",
@@ -14,7 +15,10 @@ var e = {
 	undo: "Undo",
 	redo: "Redo",
 	lineColumn: "Ln {line}, Col {col}",
-	errorCount: "{count} error(s)"
+	errorCount: "{count} error(s)",
+	history: "Query history",
+	historyEmpty: "No queries yet",
+	clearHistory: "Clear history"
 };
 //#endregion
 export { e as DEFAULT_SQL_EDITOR_TOOLBAR_CONFIG, t as DEFAULT_SQL_EDITOR_TRANSLATION };

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

@@ -7,7 +7,7 @@ type SqlEditorFooterProps = {
     diagnosticsCount: number;
     cursorLine: number;
     cursorCol: number;
-    translation: SqlEditorTranslation;
+    translation: Required<SqlEditorTranslation>;
 };
 export declare function SqlEditorFooter({ helperText, error, showLineColumn, showErrorCount, diagnosticsCount, cursorLine, cursorCol, translation: t, }: SqlEditorFooterProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,11 @@
+import type { SqlEditorTranslation } from "./SqlEditor.types";
+import type { SqlQueryHistoryEntry } from "./util/sqlQueryHistory.util";
+type SqlEditorHistoryMenuProps = {
+    history: SqlQueryHistoryEntry[];
+    onSelect: (sql: string) => void;
+    onClear: () => void;
+    translation: Required<SqlEditorTranslation>;
+    disabled?: boolean;
+};
+export declare function SqlEditorHistoryMenu({ history, onSelect, onClear, translation: t, disabled, }: SqlEditorHistoryMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,75 @@
+import { useState as e } from "react";
+import { Divider as t, IconButton as n, ListItemIcon as r, ListItemText as i, Menu as a, MenuItem as o, Tooltip as s, Typography as c } from "@mui/material";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "@mui/icons-material/History";
+import p from "@mui/icons-material/DeleteSweep";
+//#region src/components/sql-editor/SqlEditorHistoryMenu.tsx
+function m(e, t = 60) {
+	let n = e.replace(/\s+/g, " ").trim();
+	return n.length > t ? `${n.slice(0, t)}…` : n;
+}
+function h({ history: h, onSelect: g, onClear: _, translation: v, disabled: y }) {
+	let [b, x] = e(null);
+	function S() {
+		x(null);
+	}
+	function C(e) {
+		g(e), S();
+	}
+	function w() {
+		_(), S();
+	}
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(s, {
+		title: v.history,
+		arrow: !0,
+		children: /* @__PURE__ */ u("span", { children: /* @__PURE__ */ u(n, {
+			size: "small",
+			onClick: (e) => x(e.currentTarget),
+			disabled: y,
+			"aria-label": v.history,
+			children: /* @__PURE__ */ u(f, { fontSize: "small" })
+		}) })
+	}), /* @__PURE__ */ d(a, {
+		anchorEl: b,
+		open: !!b,
+		onClose: S,
+		slotProps: { paper: { sx: {
+			minWidth: 280,
+			maxWidth: 400
+		} } },
+		children: [
+			h.length === 0 && /* @__PURE__ */ u(o, {
+				disabled: !0,
+				children: /* @__PURE__ */ u(i, { children: v.historyEmpty })
+			}),
+			h.map((e) => /* @__PURE__ */ u(o, {
+				onClick: () => C(e.sql),
+				children: /* @__PURE__ */ u(i, {
+					primary: m(e.sql),
+					secondary: /* @__PURE__ */ u(c, {
+						variant: "caption",
+						color: "text.secondary",
+						children: new Date(e.timestamp).toLocaleString()
+					}),
+					slotProps: { primary: { sx: {
+						fontFamily: "monospace",
+						fontSize: "0.8125rem"
+					} } }
+				})
+			}, e.timestamp)),
+			h.length > 0 && /* @__PURE__ */ u(t, {}),
+			h.length > 0 && /* @__PURE__ */ d(o, {
+				onClick: w,
+				children: [/* @__PURE__ */ u(r, { children: /* @__PURE__ */ u(p, {
+					fontSize: "small",
+					color: "error"
+				}) }), /* @__PURE__ */ u(i, {
+					sx: { color: "error.main" },
+					children: v.clearHistory
+				})]
+			})
+		]
+	})] });
+}
+//#endregion
+export { h as SqlEditorHistoryMenu };

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

@@ -1,12 +1,16 @@
 import type { EditorView } from "@codemirror/view";
 import type { SqlEditorDialect, SqlEditorToolbarConfig, SqlEditorTranslation } from "./SqlEditor.types";
+import type { SqlQueryHistoryEntry } from "./util/sqlQueryHistory.util";
 type SqlEditorToolbarProps = {
     editorView: EditorView | null;
     toolbarConfig: Required<SqlEditorToolbarConfig>;
-    translation: SqlEditorTranslation;
+    translation: Required<SqlEditorTranslation>;
     dialect: SqlEditorDialect;
     disabled?: boolean;
     onExecute?: (sql: string) => void;
+    queryHistory?: SqlQueryHistoryEntry[];
+    onSelectHistoryEntry?: (sql: string) => void;
+    onClearHistory?: () => void;
 };
-export declare function SqlEditorToolbar({ editorView, toolbarConfig: tc, translation: t, dialect, disabled, onExecute, }: SqlEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SqlEditorToolbar({ editorView, toolbarConfig: tc, translation: t, dialect, disabled, onExecute, queryHistory, onSelectHistoryEntry, onClearHistory, }: SqlEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,54 +1,55 @@
 import { ToolbarButton as e } from "../shared/ToolbarButton.js";
-import { useState as t } from "react";
-import { Box as n, Divider as r } from "@mui/material";
-import { redo as i, undo as a } from "@codemirror/commands";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "@mui/icons-material/ContentCopy";
-import u from "@mui/icons-material/Check";
-import d from "@mui/icons-material/Delete";
-import f from "@mui/icons-material/Undo";
-import p from "@mui/icons-material/Redo";
-import m from "@mui/icons-material/AutoFixHigh";
-import h from "@mui/icons-material/PlayArrow";
-import { format as g } from "sql-formatter";
+import { SqlEditorHistoryMenu as t } from "./SqlEditorHistoryMenu.js";
+import { useState as n } from "react";
+import { Box as r, Divider as i } from "@mui/material";
+import { redo as a, undo as o } from "@codemirror/commands";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@mui/icons-material/ContentCopy";
+import d from "@mui/icons-material/Check";
+import f from "@mui/icons-material/Delete";
+import p from "@mui/icons-material/Undo";
+import m from "@mui/icons-material/Redo";
+import h from "@mui/icons-material/AutoFixHigh";
+import g from "@mui/icons-material/PlayArrow";
+import { format as _ } from "sql-formatter";
 //#region src/components/sql-editor/SqlEditorToolbar.tsx
-var _ = {
+var v = {
 	standard: "sql",
 	mysql: "mysql",
 	postgresql: "postgresql",
 	sqlite: "sqlite",
 	mssql: "tsql"
 };
-function v({ editorView: v, toolbarConfig: y, translation: b, dialect: x, disabled: S, onExecute: C }) {
-	let [w, T] = t(!1), E = S || !v;
-	function D() {
-		let e = v?.state.doc.toString() ?? "";
+function y({ editorView: y, toolbarConfig: b, translation: x, dialect: S, disabled: C, onExecute: w, queryHistory: T = [], onSelectHistoryEntry: E, onClearHistory: D }) {
+	let [O, k] = n(!1), A = C || !y;
+	function j() {
+		let e = y?.state.doc.toString() ?? "";
 		navigator.clipboard.writeText(e).then(() => {
-			T(!0), setTimeout(() => T(!1), 2e3);
+			k(!0), setTimeout(() => k(!1), 2e3);
 		});
 	}
-	function O() {
-		let e = v;
+	function M() {
+		let e = y;
 		e && (e.dispatch({ changes: {
 			from: 0,
 			to: e.state.doc.length,
 			insert: ""
 		} }), e.focus());
 	}
-	function k() {
-		let e = v;
-		e && (a(e), e.focus());
+	function N() {
+		let e = y;
+		e && (o(e), e.focus());
 	}
-	function A() {
-		let e = v;
-		e && (i(e), e.focus());
+	function P() {
+		let e = y;
+		e && (a(e), e.focus());
 	}
-	function j() {
-		let e = v;
+	function F() {
+		let e = y;
 		if (!e) return;
 		let t = e.state.doc.toString();
 		try {
-			let n = g(t, { language: _[x] });
+			let n = _(t, { language: v[S] });
 			e.dispatch({ changes: {
 				from: 0,
 				to: e.state.doc.length,
@@ -57,12 +58,12 @@ function v({ editorView: v, toolbarConfig: y, translation: b, dialect: x, disabl
 		} catch {}
 		e.focus();
 	}
-	function M() {
-		let e = v;
-		!e || !C || C(e.state.doc.toString());
+	function I() {
+		let e = y;
+		!e || !w || w(e.state.doc.toString());
 	}
-	let N = y.showFormat, P = y.showCopy || y.showClear, F = y.showUndoRedo, I = y.showExecute && !!C;
-	return /* @__PURE__ */ c(n, {
+	let L = b.showFormat, R = b.showCopy || b.showClear, z = b.showUndoRedo, B = b.showExecute && !!w, V = b.showHistory && !!w && !!E && !!D;
+	return /* @__PURE__ */ l(r, {
 		sx: {
 			display: "flex",
 			flexWrap: "wrap",
@@ -74,78 +75,89 @@ function v({ editorView: v, toolbarConfig: y, translation: b, dialect: x, disabl
 		role: "toolbar",
 		"aria-label": "SQL editor actions",
 		children: [
-			N && /* @__PURE__ */ s(n, {
+			L && /* @__PURE__ */ c(r, {
 				sx: {
 					display: "flex",
 					gap: .25
 				},
-				children: /* @__PURE__ */ s(e, {
-					label: b.format,
-					icon: /* @__PURE__ */ s(m, { fontSize: "small" }),
-					onClick: j,
-					disabled: E
+				children: /* @__PURE__ */ c(e, {
+					label: x.format,
+					icon: /* @__PURE__ */ c(h, { fontSize: "small" }),
+					onClick: F,
+					disabled: A
 				})
 			}),
-			N && (P || F) && /* @__PURE__ */ s(r, {
+			L && (R || z) && /* @__PURE__ */ c(i, {
 				orientation: "vertical",
 				flexItem: !0,
 				sx: { mx: .5 }
 			}),
-			P && /* @__PURE__ */ c(n, {
+			R && /* @__PURE__ */ l(r, {
 				sx: {
 					display: "flex",
 					gap: .25
 				},
-				children: [y.showCopy && /* @__PURE__ */ s(e, {
-					label: w ? b.copySuccess : b.copy,
-					icon: w ? /* @__PURE__ */ s(u, {
+				children: [b.showCopy && /* @__PURE__ */ c(e, {
+					label: O ? x.copySuccess : x.copy,
+					icon: O ? /* @__PURE__ */ c(d, {
 						fontSize: "small",
 						color: "success"
-					}) : /* @__PURE__ */ s(l, { fontSize: "small" }),
-					onClick: D,
-					disabled: E
-				}), y.showClear && /* @__PURE__ */ s(e, {
-					label: b.clear,
-					icon: /* @__PURE__ */ s(d, { fontSize: "small" }),
-					onClick: O,
-					disabled: E
+					}) : /* @__PURE__ */ c(u, { fontSize: "small" }),
+					onClick: j,
+					disabled: A
+				}), b.showClear && /* @__PURE__ */ c(e, {
+					label: x.clear,
+					icon: /* @__PURE__ */ c(f, { fontSize: "small" }),
+					onClick: M,
+					disabled: A
 				})]
 			}),
-			P && F && /* @__PURE__ */ s(r, {
+			R && z && /* @__PURE__ */ c(i, {
 				orientation: "vertical",
 				flexItem: !0,
 				sx: { mx: .5 }
 			}),
-			F && /* @__PURE__ */ c(n, {
+			z && /* @__PURE__ */ l(r, {
 				sx: {
 					display: "flex",
 					gap: .25
 				},
-				children: [/* @__PURE__ */ s(e, {
-					label: b.undo,
-					icon: /* @__PURE__ */ s(f, { fontSize: "small" }),
-					onClick: k,
-					disabled: E
-				}), /* @__PURE__ */ s(e, {
-					label: b.redo,
-					icon: /* @__PURE__ */ s(p, { fontSize: "small" }),
-					onClick: A,
-					disabled: E
+				children: [/* @__PURE__ */ c(e, {
+					label: x.undo,
+					icon: /* @__PURE__ */ c(p, { fontSize: "small" }),
+					onClick: N,
+					disabled: A
+				}), /* @__PURE__ */ c(e, {
+					label: x.redo,
+					icon: /* @__PURE__ */ c(m, { fontSize: "small" }),
+					onClick: P,
+					disabled: A
 				})]
 			}),
-			I && /* @__PURE__ */ c(o, { children: [(P || F) && /* @__PURE__ */ s(r, {
+			V && /* @__PURE__ */ l(s, { children: [(R || z) && /* @__PURE__ */ c(i, {
+				orientation: "vertical",
+				flexItem: !0,
+				sx: { mx: .5 }
+			}), /* @__PURE__ */ c(t, {
+				history: T,
+				onSelect: E,
+				onClear: D,
+				translation: x,
+				disabled: C
+			})] }),
+			B && /* @__PURE__ */ l(s, { children: [(R || z || V) && /* @__PURE__ */ c(i, {
 				orientation: "vertical",
 				flexItem: !0,
 				sx: { mx: .5 }
-			}), /* @__PURE__ */ s(e, {
-				label: b.execute,
-				icon: /* @__PURE__ */ s(h, { fontSize: "small" }),
-				onClick: M,
-				disabled: E
+			}), /* @__PURE__ */ c(e, {
+				label: x.execute,
+				icon: /* @__PURE__ */ c(g, { fontSize: "small" }),
+				onClick: I,
+				disabled: A
 			})] }),
-			!N && !P && !F && !I && /* @__PURE__ */ s(n, { sx: { height: 32 } })
+			!L && !R && !z && !V && !B && /* @__PURE__ */ c(r, { sx: { height: 32 } })
 		]
 	});
 }
 //#endregion
-export { v as SqlEditorToolbar };
+export { y as SqlEditorToolbar };

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

@@ -0,0 +1,6 @@
+import { type SqlQueryHistoryEntry } from "./util/sqlQueryHistory.util";
+export declare function useSqlQueryHistory(storageKey: string, maxEntries: number): {
+    history: SqlQueryHistoryEntry[];
+    addEntry: (sql: string) => void;
+    clearHistory: () => void;
+};

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

@@ -0,0 +1,20 @@
+import { addQueryToHistory as e, loadQueryHistory as t, saveQueryHistory as n } from "./util/sqlQueryHistory.util.js";
+import { useCallback as r, useState as i } from "react";
+//#region src/components/sql-editor/useSqlQueryHistory.ts
+function a(a, o) {
+	let [s, c] = i(() => t(a));
+	return {
+		history: s,
+		addEntry: r((t) => {
+			c((r) => {
+				let i = e(r, t, o);
+				return n(a, i), i;
+			});
+		}, [a, o]),
+		clearHistory: r(() => {
+			c([]), n(a, []);
+		}, [a])
+	};
+}
+//#endregion
+export { a as useSqlQueryHistory };