@thebuoyant-tsdev/mui-ts-library 3.2.1 → 3.6.0

package/README.de.md

@@ -313,6 +313,37 @@ import type {
 
 ## Changelog
 
+### [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**
+- Fehlendes `aria-label` an 13 Icon-only-Buttons in GanttChart, TagSelection und RichTextEditor ergänzt — diese verließen sich bisher nur auf `Tooltip`, was Screenreadern keinen Accessible Name liefert.
+- `SqlEditor`: 0 Tests → 82% Line-Coverage. Gesamt-Coverage der Library: 68% → 74% Lines.
+
+---
+
+### [3.3.0] — 2026-06-21
+
+**Tree-Shaking — Build-Output pro Komponente**
+- `import { TagSelection } from '@thebuoyant-tsdev/mui-ts-library'` zieht kein D3, TipTap oder CodeMirror mehr ins Bundle — gemessener Rückgang von 1.1 MB auf 22 KB in einem minimalen Testbundle. Keine API-Änderungen.
+
+---
+
 ### [3.2.1] — 2026-06-17
 
 **Bugfixes**

package/README.md

@@ -313,6 +313,37 @@ import type {
 
 ## Changelog
 
+### [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**
+- Added missing `aria-label` to 13 icon-only buttons across GanttChart, TagSelection, and RichTextEditor — these previously relied on `Tooltip` alone, which doesn't provide a screen-reader accessible name.
+- `SqlEditor` went from 0 tests to 82% line coverage. Overall library coverage: 68% → 74% lines.
+
+---
+
+### [3.3.0] — 2026-06-21
+
+**Tree-Shaking — Per-Component Build Output**
+- `import { TagSelection } from '@thebuoyant-tsdev/mui-ts-library'` no longer pulls D3, TipTap, or CodeMirror into your bundle — measured drop from 1.1 MB to 22 KB in a minimal test bundle. No API changes.
+
+---
+
 ### [3.2.1] — 2026-06-17
 
 **Bug Fixes**

package/dist/components/chord-chart/ChordChart.js

@@ -0,0 +1,284 @@
+import { useCallback as e, useLayoutEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+import { Box as a, Tooltip as o, Typography as s, useTheme as ee } from "@mui/material";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import * as u from "d3";
+//#region src/components/chord-chart/ChordChart.tsx
+function d(e, t = 0, n = ".", r = ",") {
+	if (!isFinite(e)) return String(e);
+	let [i, a] = e.toFixed(Math.max(0, t)).split("."), o = i.replace(/\B(?=(\d{3})+(?!\d))/g, r);
+	return a ? `${o}${n}${a}` : o;
+}
+function f({ name: e, valueOut: t, valueIn: n, fmt: r }) {
+	return /* @__PURE__ */ l(a, {
+		sx: { py: .25 },
+		children: [
+			/* @__PURE__ */ c(s, {
+				variant: "caption",
+				sx: {
+					fontWeight: "bold",
+					display: "block"
+				},
+				children: e
+			}),
+			/* @__PURE__ */ l(s, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					opacity: .85
+				},
+				children: [r(t), " outgoing →"]
+			}),
+			/* @__PURE__ */ l(s, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					opacity: .85
+				},
+				children: [r(n), " incoming ←"]
+			})
+		]
+	});
+}
+function te({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, directed: i, fmt: o }) {
+	return /* @__PURE__ */ l(a, {
+		sx: { py: .25 },
+		children: [
+			/* @__PURE__ */ l(s, {
+				variant: "caption",
+				sx: {
+					fontWeight: "bold",
+					display: "block"
+				},
+				children: [
+					e,
+					" → ",
+					t
+				]
+			}),
+			/* @__PURE__ */ c(s, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					opacity: .85
+				},
+				children: o(n)
+			}),
+			i && r > 0 && r !== n && /* @__PURE__ */ l(s, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					opacity: .7,
+					mt: .25
+				},
+				children: [
+					t,
+					" → ",
+					e,
+					": ",
+					o(r)
+				]
+			})
+		]
+	});
+}
+function p({ data: s, size: p = 500, innerRadius: m, ringThickness: h = 20, padAngle: ne, ribbonPadAngle: re, sortSubgroups: g = "descending", sortChords: _ = "descending", chartColors: v, groupColorConfigs: y, showGroupLabels: b = !0, labelOffset: ie = 8, ribbonOpacity: x = .75, ribbonBlendMode: ae, directed: S = !0, valueDecimalCount: C = 0, valueDecimalSeparator: w = ".", valueThousandsSeparator: T = ",", onGroupClick: E, onChordClick: D, zoomable: O = !1, disabled: k = !1 }) {
+	let A = ee(), j = ae ?? (A.palette.mode === "dark" ? "normal" : "multiply"), oe = [
+		A.palette.primary.main,
+		A.palette.secondary.main,
+		A.palette.error.main,
+		A.palette.warning.main,
+		A.palette.success.main,
+		A.palette.info.main
+	], M = v && v.length > 0 ? v : oe, se = m ?? Math.min(p, p) * .5 - 90, N = Math.max(10, se), P = N + Math.max(1, h), F = ne ?? 10 / N, I = re ?? 1 / N, L = e((e) => d(e, C, w, T), [
+		C,
+		w,
+		T
+	]), { names: R, matrix: z } = n(() => {
+		let e = u.sort(u.union(s.map((e) => e.source), s.map((e) => e.target))), t = new Map(e.map((e, t) => [e, t])), n = Array.from({ length: e.length }, () => Array(e.length).fill(0));
+		for (let { source: e, target: r, value: i } of s) {
+			let a = t.get(e), o = t.get(r);
+			a == null || o == null || (n[a][o] += i);
+		}
+		return {
+			names: e,
+			matrix: n
+		};
+	}, [s]), B = n(() => {
+		let e = (S ? u.chordDirected() : u.chord()).padAngle(F);
+		return g === "ascending" && (e = e.sortSubgroups(u.ascending)), g === "descending" && (e = e.sortSubgroups(u.descending)), _ === "ascending" && (e = e.sortChords(u.ascending)), _ === "descending" && (e = e.sortChords(u.descending)), e(z);
+	}, [
+		z,
+		F,
+		S,
+		g,
+		_
+	]), V = n(() => u.arc().innerRadius(N).outerRadius(P), [N, P]), H = n(() => (S ? u.ribbonArrow() : u.ribbon()).radius(N - 1).padAngle(I), [
+		N,
+		I,
+		S
+	]), U = e((e) => H({
+		source: {
+			startAngle: e.source.startAngle,
+			endAngle: e.source.endAngle,
+			radius: N - 1
+		},
+		target: {
+			startAngle: e.target.startAngle,
+			endAngle: e.target.endAngle,
+			radius: N - 1
+		}
+	}) ?? "", [H, N]), W = n(() => u.scaleOrdinal().domain(u.range(R.length)).range(M.length >= R.length ? M : [...Array(Math.ceil(R.length / M.length))].flatMap(() => M).slice(0, R.length)), [M, R.length]), G = e((e) => y?.[R[e]]?.fill ?? W(e), [
+		y,
+		R,
+		W
+	]), K = r(null), [q, J] = i(`-${p / 2} -${p / 2} ${p} ${p}`), [Y, X] = i(1), ce = n(() => {
+		if (Y === 1) return q;
+		let [e, t, n, r] = q.split(" ").map(Number), i = n / Y, a = r / Y;
+		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
+	}, [q, Y]);
+	t(() => {
+		let e = K.current;
+		if (!e) return;
+		let t = requestAnimationFrame(() => {
+			try {
+				let t = e.getBBox();
+				J(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
+			} catch {
+				J(`-${p / 2} -${p / 2} ${p} ${p}`);
+			}
+		});
+		return () => cancelAnimationFrame(t);
+	}, [
+		p,
+		N,
+		P,
+		R.length,
+		B
+	]);
+	let [Z, Q] = i(null), le = e((e) => ({
+		name: R[e.index],
+		index: e.index,
+		valueOut: u.sum(B, (t) => t.source.index === e.index ? t.source.value : 0),
+		valueIn: u.sum(B, (t) => t.target.index === e.index ? t.source.value : 0)
+	}), [R, B]), ue = e((e) => ({
+		source: {
+			name: R[e.source.index],
+			index: e.source.index,
+			value: e.source.value
+		},
+		target: {
+			name: R[e.target.index],
+			index: e.target.index,
+			value: e.target.value
+		}
+	}), [R]), de = (e) => {
+		let t = (e.startAngle + e.endAngle) / 2, n = t * 180 / Math.PI - 90, r = t > Math.PI ? " rotate(180)" : "";
+		return `rotate(${n}) translate(${P + ie})${r}`;
+	}, fe = (e) => (e.startAngle + e.endAngle) / 2 > Math.PI ? "end" : "start", pe = e((e) => {
+		if (!O || k || !e.ctrlKey) return;
+		e.preventDefault();
+		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+		X((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [O, k]);
+	t(() => {
+		if (!O) return;
+		let e = (e) => {
+			e.key === "Escape" && X(1);
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [O]);
+	let $ = {
+		followCursor: !0,
+		enterDelay: 50,
+		enterNextDelay: 0,
+		disableHoverListener: k,
+		slotProps: { tooltip: { sx: { maxWidth: 240 } } }
+	}, me = A.palette.text.primary, he = A.typography.fontFamily;
+	return /* @__PURE__ */ c(a, {
+		sx: {
+			display: "inline-flex",
+			opacity: k ? .5 : 1,
+			cursor: k ? "not-allowed" : "default",
+			userSelect: "none"
+		},
+		children: /* @__PURE__ */ c("svg", {
+			width: p,
+			height: p,
+			viewBox: ce,
+			onWheel: pe,
+			style: {
+				fontFamily: he ?? "sans-serif",
+				overflow: O && Y > 1 ? "hidden" : "visible"
+			},
+			role: "img",
+			"aria-label": "Chord chart",
+			children: /* @__PURE__ */ l("g", {
+				ref: K,
+				children: [/* @__PURE__ */ c("g", { children: B.groups.map((e) => {
+					let t = le(e), n = Z === e.index, r = Z !== null && !n;
+					return /* @__PURE__ */ c(o, {
+						...$,
+						title: /* @__PURE__ */ c(f, {
+							name: t.name,
+							valueOut: t.valueOut,
+							valueIn: t.valueIn,
+							fmt: L
+						}),
+						children: /* @__PURE__ */ l("g", {
+							style: { cursor: k ? "not-allowed" : "pointer" },
+							onMouseEnter: () => !k && Q(e.index),
+							onMouseLeave: () => Q(null),
+							onClick: (e) => !k && E?.(t, e),
+							children: [/* @__PURE__ */ c("path", {
+								d: V(e) || "",
+								fill: G(e.index),
+								stroke: A.palette.divider,
+								opacity: r ? .35 : 1,
+								style: { transition: "opacity 0.15s" }
+							}), b && /* @__PURE__ */ c("text", {
+								dy: "0.35em",
+								fontSize: 11,
+								fill: me,
+								transform: de(e),
+								textAnchor: fe(e),
+								pointerEvents: "none",
+								children: R[e.index]
+							})]
+						})
+					}, `grp-tt-${e.index}`);
+				}) }), /* @__PURE__ */ c("g", {
+					fillOpacity: x,
+					style: { mixBlendMode: j },
+					children: B.map((e, t) => {
+						let n = ue(e), r = Z === null || e.source.index === Z || e.target.index === Z;
+						return /* @__PURE__ */ c(o, {
+							...$,
+							title: /* @__PURE__ */ c(te, {
+								sourceName: n.source.name,
+								targetName: n.target.name,
+								sourceValue: n.source.value,
+								targetValue: n.target.value,
+								directed: S,
+								fmt: L
+							}),
+							children: /* @__PURE__ */ c("path", {
+								d: U(e),
+								fill: G(e.target.index),
+								stroke: "none",
+								opacity: r ? 1 : .12,
+								style: {
+									cursor: k ? "not-allowed" : "pointer",
+									transition: "opacity 0.15s"
+								},
+								onClick: (e) => !k && D?.(n, e)
+							})
+						}, `chord-tt-${t}`);
+					})
+				})]
+			})
+		})
+	});
+}
+p.displayName = "ChordChart";
+//#endregion
+export { p as ChordChart };

package/dist/components/chord-chart/ChordChart.types.js

@@ -0,0 +1,4 @@
+//#region src/components/chord-chart/ChordChart.types.ts
+var e = { noData: "No data" };
+//#endregion
+export { e as DEFAULT_CHORD_CHART_TRANSLATION };