@thebuoyant-tsdev/mui-ts-library 2.2.0 → 2.3.0

package/README.de.md

@@ -18,6 +18,7 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 | [`SqlEditor`](#sqleditor) | SQL-Code-Editor (CodeMirror 6) mit Syntax-Highlighting, Multi-Dialekt, Autocomplete, Linting und `Cmd+Enter`-Ausführen-Shortcut | [Vollständiges Manual →](user-manuals/SqlEditor.de.md) |
 | [`JsonEditor`](#jsoneditor) | JSON-Code-Editor (CodeMirror 6) mit Echtzeit-Validierung, Format- und Komprimieren-Schaltfläche sowie optionaler Minimap | [Vollständiges Manual →](user-manuals/JsonEditor.de.md) |
 | [`SunburstChart`](#sunburstchart) | D3 v7 hierarchisches Chart — konzentrische Ringe, Ctrl+Click-Zoom, Donut-Modus, eigene Farben, MUI-Theme-Integration. Erste der D3-Chart-Familie. | [Vollständiges Manual →](user-manuals/SunburstChart.de.md) |
+| [`ChordChart`](#chordchart) | D3 v7 Fluss-Chart — Arc-Gruppen verbunden durch Bänder, Hover-Highlight, gerichtet/ungerichtet, MUI-Theme-Integration | [Vollständiges Manual →](user-manuals/ChordChart.de.md) |
 
 ---
 
@@ -53,6 +54,8 @@ Die App wie gewohnt in MUI's `ThemeProvider` einschließen. `ConfirmDialog` ben
 
 ### ConfirmDialog
 
+Ersetzt jedes manuelle `open/setOpen`-State-Muster durch einen einzigen `await confirm(...)`-Aufruf. Eliminiert Boilerplate bei Lösch-Bestätigungen, destruktiven Aktionen und allen Flows, die vor dem Fortfahren eine Nutzerzustimmung benötigen — mit optionalem Countdown-Auto-Confirm und Enter = Bestätigen.
+
 ```tsx
 import { ConfirmDialogProvider, useConfirm } from '@thebuoyant-tsdev/mui-ts-library';
 
@@ -73,6 +76,8 @@ if (ok) handleDelete();
 
 ### GanttChart
 
+Interaktive Projekt-Timeline für Planung und Aufgaben-Tracking. Einsetzbar in Projektmanagement-Dashboards, Sprint-Planern und Ressourcenansichten — mit Drag & Drop, Größenänderung, Ctrl+Scroll-Zoom, Meilensteinen, Abhängigkeiten und Heute-Chip.
+
 ```tsx
 import { GanttChart } from '@thebuoyant-tsdev/mui-ts-library';
 import type { GanttTask } from '@thebuoyant-tsdev/mui-ts-library';
@@ -91,6 +96,8 @@ const tasks: GanttTask[] = [
 
 ### TagSelection
 
+Multi-Select-Eingabe mit Autocomplete für Tag- und Label-Verwaltung. Ideal für Filter-UIs, Content-Tagging, Skill-Auswahl und alle Szenarien, in denen Nutzer aus einer vordefinierten Liste wählen oder neue Einträge erstellen sollen.
+
 ```tsx
 import { TagSelection } from '@thebuoyant-tsdev/mui-ts-library';
 import type { TagSelectionItem } from '@thebuoyant-tsdev/mui-ts-library';
@@ -109,6 +116,8 @@ const tags: TagSelectionItem[] = [
 
 ### PasswordStrengthMeter
 
+Passwort-Eingabe mit Echtzeit-Stärke-Feedback. Konzipiert für Registrierungs- und Passwort-Änderungs-Flows, bei denen Nutzer zu sicheren Passwörtern geführt werden sollen — mit animiertem Stärke-Meter, segmentierten Balken und einer Live-Anforderungs-Checkliste.
+
 ```tsx
 import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 
@@ -125,6 +134,8 @@ import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 
 ### RichTextEditor
 
+Vollständiger WYSIWYG-Editor für formatierte Langtexte. Ideal für CMS-Felder, E-Mail-Templates, Kommentarbereiche und alle Eingaben, die mehr als ein einfaches `<textarea>` benötigen — mit Toolbar, Tabellen, Bild-Embed, Emoji-Picker, Vollbild und Markdown-Einfügen.
+
 ```tsx
 import { RichTextEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
@@ -140,6 +151,8 @@ 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.
+
 ```tsx
 import { SqlEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
@@ -157,6 +170,8 @@ import { SqlEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ### JsonEditor
 
+JSON-Code-Editor mit Echtzeit-Validierung, Formatierung und optionaler Minimap. Ideal für Konfigurations-Panels, API-Explorer und Developer-Tools — mit sofortigen Fehler-Markierungen, Format- und Komprimieren-Buttons sowie Cursorpositionsanzeige.
+
 ```tsx
 import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
@@ -174,6 +189,8 @@ import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ### SunburstChart
 
+Hierarchische Datenvisualisierung als konzentrische Ringe — Wurzel im Zentrum, jede Tiefenebene bildet einen Ring. Perfekt für Budget-Aufschlüsselungen, Org-Charts, Dateisystemgrößen und alle Daten, die sowohl hierarchisch als auch proportional sind. Ctrl+Click zum Drill-down in ein Segment.
+
 ```tsx
 import { SunburstChart } from '@thebuoyant-tsdev/mui-ts-library';
 import type { SunburstChartData } from '@thebuoyant-tsdev/mui-ts-library';
@@ -202,25 +219,66 @@ const data: SunburstChartData = {
 
 ---
 
+### ChordChart
+
+Fluss- und Beziehungsvisualisierung zwischen benannten Gruppen als Kreisdiagramm. Ideal für Abhängigkeitskarten, Migrationsflüsse, Handelsbeziehungen und alle Quelle→Ziel-Daten mit numerischem Gewicht. Hover über eine Gruppe hebt deren Verbindungen hervor, Klick löst Callbacks aus.
+
+```tsx
+import { ChordChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { ChordChartData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: ChordChartData[] = [
+  { source: 'Frontend', target: 'Backend',  value: 45 },
+  { source: 'Backend',  target: 'Frontend', value: 20 },
+  { source: 'Backend',  target: 'DevOps',   value: 35 },
+];
+
+<ChordChart
+  data={data}
+  size={500}
+  onGroupClick={(info) => console.log(info.name, info.valueOut)}
+  onChordClick={(info) => console.log(info.source.name, '→', info.target.name)}
+/>
+```
+
+→ [Vollständige Dokumentation](user-manuals/ChordChart.de.md)
+
+---
+
 ## TypeScript
 
 Alle Typen und Defaults werden direkt exportiert — kein separates `@types/...`-Paket nötig.
 
 ```tsx
 import type {
-  GanttTask,
-  ConfirmDialogOptions,
-  JsonEditorHighlightColors,
-  SqlEditorProps,
-  RichTextEditorTranslation,
-} from '@thebuoyant-tsdev/mui-ts-library';
-```
+  // ConfirmDialog
+  ConfirmDialogOptions, ConfirmDialogSeverity,
 
----
+  // GanttChart
+  GanttTask, GanttTranslations, GanttTheme, GanttToolbarConfig,
+
+  // TagSelection
+  TagSelectionItem,
+
+  // PasswordStrengthMeter
+  CustomRequirement, StrengthResult,
+
+  // RichTextEditor
+  RichTextEditorToolbarConfig, RichTextEditorTranslation,
 
-## Entwicklung
+  // SqlEditor
+  SqlEditorDialect, SqlEditorTranslation, SqlEditorToolbarConfig,
 
-Für lokales Setup, Storybook, Tests und Publish-Anleitung: [DEVELOPMENT.md](DEVELOPMENT.md).
+  // JsonEditor
+  JsonEditorHighlightColors, JsonEditorTranslation, JsonEditorToolbarConfig,
+
+  // SunburstChart
+  SunburstChartData, SunburstSegmentInfo, SunburstZoomInfo,
+
+  // ChordChart
+  ChordChartData, ChordGroupInfo, ChordInfo, ChordSortBy,
+} from '@thebuoyant-tsdev/mui-ts-library';
+```
 
 ---
 

package/README.md

@@ -18,6 +18,7 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 | [`SqlEditor`](#sqleditor) | SQL code editor (CodeMirror 6) with syntax highlighting, multi-dialect, autocomplete, linting, and `Cmd+Enter` execute shortcut | [Full Manual →](user-manuals/SqlEditor.md) |
 | [`JsonEditor`](#jsoneditor) | JSON code editor (CodeMirror 6) with real-time validation, Format, Compact buttons, and optional minimap | [Full Manual →](user-manuals/JsonEditor.md) |
 | [`SunburstChart`](#sunburstchart) | D3 v7 hierarchical chart — concentric rings, Ctrl+Click zoom, donut mode, custom colors, MUI theme integration. First of the D3 Charts family. | [Full Manual →](user-manuals/SunburstChart.md) |
+| [`ChordChart`](#chordchart) | D3 v7 flow chart — arc groups connected by ribbons, hover highlight, directed/undirected, MUI theme integration | [Full Manual →](user-manuals/ChordChart.md) |
 
 ---
 
@@ -53,6 +54,8 @@ Wrap your app in MUI's `ThemeProvider` as usual. `ConfirmDialog` additionally re
 
 ### ConfirmDialog
 
+Replace every manual `open/setOpen` state pattern with a single `await confirm(...)` call. Eliminates boilerplate from delete confirmations, destructive actions, and any flow that needs user approval before proceeding — with optional countdown auto-confirm and `Enter` = confirm shortcut.
+
 ```tsx
 import { ConfirmDialogProvider, useConfirm } from '@thebuoyant-tsdev/mui-ts-library';
 
@@ -73,6 +76,8 @@ if (ok) handleDelete();
 
 ### GanttChart
 
+An interactive project timeline for planning and tracking tasks. Use it in project management dashboards, sprint planners, or resource views where teams need to see schedules, milestones, dependencies, and progress at a glance — with drag & drop, resize, and Ctrl+Scroll zoom built in.
+
 ```tsx
 import { GanttChart } from '@thebuoyant-tsdev/mui-ts-library';
 import type { GanttTask } from '@thebuoyant-tsdev/mui-ts-library';
@@ -91,6 +96,8 @@ const tasks: GanttTask[] = [
 
 ### TagSelection
 
+Multi-select input with autocomplete for tag and label management. Best suited for filter UIs, content tagging, skill selection, and any scenario where users pick from a predefined list or create new items on the fly.
+
 ```tsx
 import { TagSelection } from '@thebuoyant-tsdev/mui-ts-library';
 import type { TagSelectionItem } from '@thebuoyant-tsdev/mui-ts-library';
@@ -109,6 +116,8 @@ const tags: TagSelectionItem[] = [
 
 ### PasswordStrengthMeter
 
+Password input with real-time strength feedback. Designed for registration flows and password-change screens where you want to guide users toward secure passwords with an animated strength bar, segmented segments, and a live requirements checklist.
+
 ```tsx
 import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 
@@ -125,6 +134,8 @@ import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 
 ### RichTextEditor
 
+Full-featured WYSIWYG editor for long-form formatted content. Best for CMS fields, email templates, comment boxes, and any input that needs more than a plain `<textarea>` — with toolbar, tables, image embed, emoji picker, fullscreen, and Markdown paste support.
+
 ```tsx
 import { RichTextEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
@@ -140,6 +151,8 @@ 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.
+
 ```tsx
 import { SqlEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
@@ -157,6 +170,8 @@ import { SqlEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ### JsonEditor
 
+JSON code editor with real-time validation, formatting, and an optional minimap. Ideal for configuration panels, API explorers, and developer tools where users need to view, edit, paste, or validate JSON — with instant error markers, Format and Compact buttons, and cursor-position display.
+
 ```tsx
 import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
@@ -174,6 +189,8 @@ import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ### SunburstChart
 
+Hierarchical data visualization as concentric rings — root at the center, each depth level forms one ring. Perfect for budget breakdowns, org charts, file system usage, and any data that is both hierarchical and proportional. Ctrl+Click to drill down into any segment.
+
 ```tsx
 import { SunburstChart } from '@thebuoyant-tsdev/mui-ts-library';
 import type { SunburstChartData } from '@thebuoyant-tsdev/mui-ts-library';
@@ -202,25 +219,66 @@ const data: SunburstChartData = {
 
 ---
 
+### ChordChart
+
+Flow and relationship visualization between named groups as a circular diagram. Ideal for dependency maps, migration flows, trade relationships, and any source→target data with a numeric weight. Hover any group to highlight its connections, click to trigger callbacks.
+
+```tsx
+import { ChordChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { ChordChartData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: ChordChartData[] = [
+  { source: 'Frontend', target: 'Backend',  value: 45 },
+  { source: 'Backend',  target: 'Frontend', value: 20 },
+  { source: 'Backend',  target: 'DevOps',   value: 35 },
+];
+
+<ChordChart
+  data={data}
+  size={500}
+  onGroupClick={(info) => console.log(info.name, info.valueOut)}
+  onChordClick={(info) => console.log(info.source.name, '→', info.target.name)}
+/>
+```
+
+→ [Full documentation](user-manuals/ChordChart.md)
+
+---
+
 ## TypeScript
 
 All types and defaults are exported directly — no separate `@types/...` package needed.
 
 ```tsx
 import type {
-  GanttTask,
-  ConfirmDialogOptions,
-  JsonEditorHighlightColors,
-  SqlEditorProps,
-  RichTextEditorTranslation,
-} from '@thebuoyant-tsdev/mui-ts-library';
-```
+  // ConfirmDialog
+  ConfirmDialogOptions, ConfirmDialogSeverity,
 
----
+  // GanttChart
+  GanttTask, GanttTranslations, GanttTheme, GanttToolbarConfig,
+
+  // TagSelection
+  TagSelectionItem,
+
+  // PasswordStrengthMeter
+  CustomRequirement, StrengthResult,
+
+  // RichTextEditor
+  RichTextEditorToolbarConfig, RichTextEditorTranslation,
 
-## Development
+  // SqlEditor
+  SqlEditorDialect, SqlEditorTranslation, SqlEditorToolbarConfig,
 
-For local setup, Storybook, tests, and publishing instructions, see [DEVELOPMENT.md](DEVELOPMENT.md).
+  // JsonEditor
+  JsonEditorHighlightColors, JsonEditorTranslation, JsonEditorToolbarConfig,
+
+  // SunburstChart
+  SunburstChartData, SunburstSegmentInfo, SunburstZoomInfo,
+
+  // ChordChart
+  ChordChartData, ChordGroupInfo, ChordInfo, ChordSortBy,
+} from '@thebuoyant-tsdev/mui-ts-library';
+```
 
 ---
 

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

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

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

@@ -0,0 +1,80 @@
+export type ChordSortBy = 'ascending' | 'descending' | 'none';
+/** A single directed or undirected flow between two named groups */
+export type ChordChartData = {
+    source: string;
+    target: string;
+    value: number;
+};
+/** Callback payload for a click on a group arc */
+export type ChordGroupInfo = {
+    /** Group name */
+    name: string;
+    /** Zero-based index in the sorted names array */
+    index: number;
+    /** Total outgoing flow from this group */
+    valueOut: number;
+    /** Total incoming flow into this group */
+    valueIn: number;
+};
+/** Callback payload for a click on a ribbon (chord) */
+export type ChordInfo = {
+    source: {
+        name: string;
+        index: number;
+        value: number;
+    };
+    target: {
+        name: string;
+        index: number;
+        value: number;
+    };
+};
+export type ChordChartTranslation = {
+    /** Shown when data is empty */
+    noData: string;
+};
+export declare const DEFAULT_CHORD_CHART_TRANSLATION: ChordChartTranslation;
+export type ChordChartProps = {
+    /** Array of directed or undirected flows — `{ source, target, value }` */
+    data: ChordChartData[];
+    /** Width and height of the SVG in pixels (default: 500) */
+    size?: number;
+    /** Inner radius of the arc ring in px — auto-computed when omitted */
+    innerRadius?: number;
+    /** Thickness of the arc ring in px (default: 20) */
+    ringThickness?: number;
+    /** Padding angle between arc groups in radians (auto-computed when omitted) */
+    padAngle?: number;
+    /** Padding angle inside ribbons in radians (auto-computed when omitted) */
+    ribbonPadAngle?: number;
+    /** Sort order for subgroups within each arc (default: 'descending') */
+    sortSubgroups?: ChordSortBy;
+    /** Sort order for ribbons (default: 'descending') */
+    sortChords?: ChordSortBy;
+    /** Custom color palette — falls back to MUI theme palette when omitted */
+    chartColors?: string[];
+    /** Show group name labels outside the arc ring (default: true) */
+    showGroupLabels?: boolean;
+    /** Gap between arc outer edge and label text in px (default: 6) */
+    labelOffset?: number;
+    /** Opacity of ribbons — 0 to 1 (default: 0.75) */
+    ribbonOpacity?: number;
+    /** CSS mix-blend-mode for ribbons (default: 'multiply') */
+    ribbonBlendMode?: React.CSSProperties['mixBlendMode'];
+    /** When true, ribbons are directional arrows (default: true) */
+    directed?: boolean;
+    /** Decimal places for values in tooltip (default: 0) */
+    valueDecimalCount?: number;
+    /** Decimal separator (default: '.') */
+    valueDecimalSeparator?: string;
+    /** Thousands separator (default: ',') */
+    valueThousandsSeparator?: string;
+    /** Fired on click of a group arc */
+    onGroupClick?: (info: ChordGroupInfo, event: React.MouseEvent<SVGGElement>) => void;
+    /** Fired on click of a ribbon */
+    onChordClick?: (info: ChordInfo, event: React.MouseEvent<SVGPathElement>) => void;
+    /** Disables all interactions (default: false) */
+    disabled?: boolean;
+    /** Override translation strings */
+    translation?: Partial<ChordChartTranslation>;
+};