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

package/README.de.md

@@ -483,6 +483,28 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.26.1] — 2026-07-13
+
+**Behoben**
+- README-Changelog-Abschnitte (EN + DE) fehlten auf npmjs.com die Einträge für `[3.25.0]` und `[3.26.0]`. Keine Code-Änderungen.
+
+---
+
+### [3.26.0] — 2026-07-13
+
+**Hinzugefügt**
+- **`PopoverColorPicker`** — Convenience-Wrapper, der einen farbigen Swatch-Trigger-Button mit einem MUI-Popover und dem vollen `ColorPicker` kombiniert. Kein `Popover`, `anchorEl` oder Open/Close-State nötig — nur `value` + `onChange`. Alle `ColorPicker`-Props werden direkt durchgereicht. Neue Props: `swatchSize` (Standard `28`) und `swatchShape` (`"square"` | `"circle"`). Vollständig barrierefrei. Neue Exports: `popoverColorPickerClasses`. Vollständig rückwärtskompatibel. Siehe [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+
+---
+
+### [3.25.0] — 2026-07-12
+
+**Hinzugefügt**
+- **`JsonEditor` — Download-Button:** Neuer Toolbar-Button der den Editor-Inhalt als `.json`-Datei exportiert. Standardmäßig sichtbar (`showDownload: true`). Dateiname per `downloadFilename` steuerbar (Standard `"file.json"`). Mit `toolbarConfig={{ showDownload: false }}` ausblendbar. Vollständig rückwärtskompatibel. Siehe [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+- **`GanttChart` — Tastaturnavigation:** Das Task-Panel ist jetzt per Tastatur bedienbar — `Tab` fokussiert, `↑`/`↓` bewegen die Auswahl, `Enter` öffnet den Bearbeiten-Dialog, `Escape` hebt die Auswahl auf. Keine neuen Props erforderlich. Siehe [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+
+---
+
 ### [3.24.1] — 2026-07-10
 
 **Behoben**

package/README.md

@@ -483,6 +483,28 @@ This project follows [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.26.1] — 2026-07-13
+
+**Fixed**
+- README changelog sections (EN + DE) were missing the `[3.25.0]` and `[3.26.0]` entries on npmjs.com. No code changes.
+
+---
+
+### [3.26.0] — 2026-07-13
+
+**Added**
+- **`PopoverColorPicker`** — a convenience wrapper that combines a colored swatch trigger button with a MUI Popover containing the full `ColorPicker`. No `Popover`, `anchorEl`, or open/close state needed — just `value` + `onChange`. All `ColorPicker` props pass through directly. New props: `swatchSize` (default `28`) and `swatchShape` (`"square"` | `"circle"`). Fully accessible (aria-expanded, aria-haspopup, keyboard support). New exports: `popoverColorPickerClasses`. Fully backwards-compatible. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
+### [3.25.0] — 2026-07-12
+
+**Added**
+- **`JsonEditor` — Download button:** New toolbar button that exports the current editor content as a `.json` file. Shown by default (`showDownload: true`). Control the filename via `downloadFilename` (default `"file.json"`). Add `toolbarConfig={{ showDownload: false }}` to opt out. Fully backwards-compatible. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+- **`GanttChart` — Keyboard Navigation:** The task panel is now keyboard-accessible — `Tab` to focus, `↑`/`↓` to move selection, `Enter` to open the edit dialog, `Escape` to deselect. No new props required. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
 ### [3.24.1] — 2026-07-10
 
 **Fixed**

package/dist/components/chord-chart/ChordChart.d.ts

@@ -1,5 +1,5 @@
 import { type ChordChartProps } from "./ChordChart.types";
-export declare function ChordChart({ data, size, innerRadius, ringThickness, padAngle, ribbonPadAngle, sortSubgroups, sortChords, chartColors, groupColorConfigs, showGroupLabels, labelOffset, ribbonOpacity, ribbonBlendMode, directed, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, valueFormatter, onGroupClick, onChordClick, zoomable, disabled, translation, }: ChordChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChordChart({ data, size, innerRadius, ringThickness, padAngle, ribbonPadAngle, sortSubgroups, sortChords, chartColors, groupColorConfigs, showGroupLabels, labelOffset, ribbonOpacity, ribbonBlendMode, directed, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, valueFormatter, onGroupClick, onGroupHover, onChordClick, onChordHover, zoomable, disabled, translation, }: ChordChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ChordChart {
     var displayName: string;
 }

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

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

package/dist/components/chord-chart/ChordChart.types.d.ts

@@ -91,8 +91,12 @@ export type ChordChartProps = {
     valueFormatter?: (value: number) => string;
     /** Fired on click of a group arc */
     onGroupClick?: (info: ChordGroupInfo, event: React.MouseEvent<SVGGElement>) => void;
+    /** Fired on mouse enter/leave a group arc — `null` on leave. Use for linked-view highlighting. */
+    onGroupHover?: (info: ChordGroupInfo | null, event: React.MouseEvent<SVGGElement> | null) => void;
     /** Fired on click of a ribbon */
     onChordClick?: (info: ChordInfo, event: React.MouseEvent<SVGPathElement>) => void;
+    /** Fired on mouse enter/leave a ribbon — `null` on leave. Use for linked-view highlighting. */
+    onChordHover?: (info: ChordInfo | null, event: React.MouseEvent<SVGPathElement> | null) => void;
     /** Enable Ctrl / Cmd ⌘ + Scroll visual zoom — clips content at `size` boundary (default: false) */
     zoomable?: boolean;
     /** Disables all interactions (default: false) */

package/dist/components/circle-packing-chart/CirclePackingChart.d.ts

@@ -1,5 +1,5 @@
 import { type CirclePackingChartProps } from "./CirclePackingChart.types";
-export declare function CirclePackingChart({ data, size, padding, sortBy, showLabels, showAllLabels, labelFontSize, innerLabelFontSize, labelColor, chartColors, depthColorStart, depthColorEnd, background, duration, zoomable, disabled, onCircleClick, onZoomChange, valueFormatter, translation, }: CirclePackingChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CirclePackingChart({ data, size, padding, sortBy, showLabels, showAllLabels, labelFontSize, innerLabelFontSize, labelColor, chartColors, depthColorStart, depthColorEnd, background, duration, zoomable, disabled, onCircleClick, onCircleHover, onZoomChange, valueFormatter, translation, }: CirclePackingChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CirclePackingChart {
     var displayName: string;
 }