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

package/README.de.md

@@ -11,14 +11,15 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 | Komponente | Beschreibung | Docs |
 |---|---|---|
 | [`ConfirmDialog`](#confirmdialog) | Deklarativer Async-Bestätigungs-Dialog — `await confirm({ title, severity })` von überall in der App. Unterstützt Countdown-Auto-Confirm und `Enter` = Bestätigen. | [Vollständiges Manual →](user-manuals/ConfirmDialog.de.md) |
-| [`GanttChart`](#ganttchart) | Projekt-Timeline mit hierarchischen Aufgaben, Meilensteinen, Drag & Drop, Ctrl+Scroll-Zoom, Heute-Chip und integrierten CRUD-Dialogen | [Vollständiges Manual →](user-manuals/GanttChart.de.md) |
+| [`GanttChart`](#ganttchart) | Projekt-Timeline mit hierarchischen Aufgaben, Meilensteinen, Drag & Drop, Ctrl / Cmd ⌘+Scroll-Zoom, Heute-Chip und integrierten CRUD-Dialogen | [Vollständiges Manual →](user-manuals/GanttChart.de.md) |
 | [`TagSelection`](#tagselection) | Multi-Tag-Auswahlfeld mit Autocomplete, freier Tag-Erstellung, Overflow-Chips und MUI-Theme-Farben | [Vollständiges Manual →](user-manuals/TagSelection.de.md) |
 | [`PasswordStrengthMeter`](#passwordstrengthmeter) | Passwort-Eingabe mit animiertem Stärke-Meter, segmentierter Balkenanzeige, eigenen Anforderungen und Anforderungsliste | [Vollständiges Manual →](user-manuals/PasswordStrengthMeter.de.md) |
 | [`RichTextEditor`](#richtexteditor) | WYSIWYG-Editor (TipTap v3) mit Toolbar, Link-Dialog, Textfarbe, Hervorhebung, Wörter-Zähler, Vollbild-Modus, Markdown-Einfügen, Tabellen-Bearbeitung, Bild-Embed und Emoji-Picker | [Vollständiges Manual →](user-manuals/RichTextEditor.de.md) |
 | [`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) |
+| [`SunburstChart`](#sunburstchart) | D3 v7 hierarchisches Chart — konzentrische Ringe, Ctrl / Cmd ⌘+Click Drill-Down, Ctrl / Cmd ⌘+Scroll 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) |
+| [`RadialTreeChart`](#radialtreedchart) | D3 v7 radialer Baum — Knoten auf konzentrischen Ringen, MUI-Icons, Ctrl / Cmd ⌘+Click Drill-Down, Ctrl / Cmd ⌘+Scroll Zoom, MUI-Theme-Integration | [Vollständiges Manual →](user-manuals/RadialTreeChart.de.md) |
 
 ---
 
@@ -76,7 +77,7 @@ 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.
+Interaktive Projekt-Timeline für Planung und Aufgaben-Tracking. Einsetzbar in Projektmanagement-Dashboards, Sprint-Planern und Ressourcenansichten — mit Drag & Drop, Größenänderung, Ctrl / Cmd ⌘+Scroll-Zoom, Meilensteinen, Abhängigkeiten und Heute-Chip.
 
 ```tsx
 import { GanttChart } from '@thebuoyant-tsdev/mui-ts-library';
@@ -213,7 +214,7 @@ const data: SunburstChartData = {
 />
 ```
 
-**Zoom:** `Ctrl+Click` → Drill-down · `Ctrl+Doppelklick` → Zoom out · `Escape` → Reset
+**Zoom:** `Ctrl+Click` → Drill-down · `Ctrl / Cmd ⌘+Doppelklick` → Zoom out · `Escape` → Reset
 
 → [Vollständige Dokumentation](user-manuals/SunburstChart.de.md)
 
@@ -245,6 +246,40 @@ const data: ChordChartData[] = [
 
 ---
 
+### RadialTreeChart
+
+Hierarchische Daten als radialer Baum — Knoten auf konzentrischen Ringen, verbunden durch geschwungene Links. Ideal für Org-Charts, Skill-Taxonomien und Abhängigkeitsbäume. `Ctrl / Cmd ⌘+Click` bohrt in Teilbäume, `Ctrl / Cmd ⌘+Scroll` zoomt.
+
+```tsx
+import { RadialTreeChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { RadialTreeChartData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: RadialTreeChartData = {
+  id: 'ceo', name: 'CEO', subname: 'Führung',
+  children: [
+    { id: 'cto', name: 'CTO', subname: 'Technologie',
+      children: [
+        { id: 'fe', name: 'Frontend Lead' },
+        { id: 'be', name: 'Backend Lead'  },
+      ]},
+    { id: 'cpo', name: 'CPO', subname: 'Produkt' },
+  ],
+};
+
+<RadialTreeChart
+  data={data}
+  size={600}
+  drillable    // Ctrl / Cmd ⌘+Click zum Drill-in, DblClick zurück
+  zoomable     // Ctrl / Cmd ⌘+Scroll zum Zoomen
+  showNodePopover
+  onNodeClick={(info) => console.log(info.name, info.depth)}
+/>
+```
+
+→ [Vollständige Dokumentation](user-manuals/RadialTreeChart.de.md)
+
+---
+
 ## TypeScript
 
 Alle Typen und Defaults werden direkt exportiert — kein separates `@types/...`-Paket nötig.
@@ -277,6 +312,9 @@ import type {
 
   // ChordChart
   ChordChartData, ChordGroupInfo, ChordInfo, ChordSortBy,
+
+  // RadialTreeChart
+  RadialTreeChartData, RadialTreeNodeInfo, RadialTreeNodeIconSpec, RadialTreeSortBy,
 } from '@thebuoyant-tsdev/mui-ts-library';
 ```
 

package/README.md

@@ -11,14 +11,15 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 | Component | Description | Docs |
 |---|---|---|
 | [`ConfirmDialog`](#confirmdialog) | Declarative async confirmation dialog — `await confirm({ title, severity })` from anywhere in the app. Supports countdown auto-confirm and `Enter` = confirm shortcut. | [Full Manual →](user-manuals/ConfirmDialog.md) |
-| [`GanttChart`](#ganttchart) | Project timeline with hierarchical tasks, milestones, drag & drop, Ctrl+Scroll zoom, today chip, and built-in CRUD dialogs | [Full Manual →](user-manuals/GanttChart.md) |
+| [`GanttChart`](#ganttchart) | Project timeline with hierarchical tasks, milestones, drag & drop, Ctrl / Cmd ⌘+Scroll zoom, today chip, and built-in CRUD dialogs | [Full Manual →](user-manuals/GanttChart.md) |
 | [`TagSelection`](#tagselection) | Multi-tag selector with autocomplete, free tag creation, overflow chips, and MUI theme colors | [Full Manual →](user-manuals/TagSelection.md) |
 | [`PasswordStrengthMeter`](#passwordstrengthmeter) | Password input with animated strength meter, segmented bar, custom requirements, and requirements checklist | [Full Manual →](user-manuals/PasswordStrengthMeter.md) |
 | [`RichTextEditor`](#richtexteditor) | WYSIWYG editor (TipTap v3) with toolbar, link dialog, text color, highlight, word count, fullscreen mode, Markdown paste, table editing, image embed, and emoji picker | [Full Manual →](user-manuals/RichTextEditor.md) |
 | [`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) |
+| [`SunburstChart`](#sunburstchart) | D3 v7 hierarchical chart — concentric rings, Ctrl / Cmd ⌘+Click drill-down, Ctrl / Cmd ⌘+Scroll zoom, donut mode, MUI theme integration | [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) |
+| [`RadialTreeChart`](#radialtreedchart) | D3 v7 radial tree — hierarchical nodes on concentric rings, MUI icons, Ctrl / Cmd ⌘+Click drill-down, Ctrl / Cmd ⌘+Scroll zoom, MUI theme integration | [Full Manual →](user-manuals/RadialTreeChart.md) |
 
 ---
 
@@ -76,7 +77,7 @@ 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.
+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 / Cmd ⌘+Scroll zoom built in.
 
 ```tsx
 import { GanttChart } from '@thebuoyant-tsdev/mui-ts-library';
@@ -189,7 +190,7 @@ 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.
+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 / Cmd ⌘+Click` to drill down, `Ctrl / Cmd ⌘+Scroll` to zoom.
 
 ```tsx
 import { SunburstChart } from '@thebuoyant-tsdev/mui-ts-library';
@@ -213,7 +214,7 @@ const data: SunburstChartData = {
 />
 ```
 
-**Zoom:** `Ctrl+Click` → drill down · `Ctrl+Double-click` → zoom out · `Escape` → reset
+**Drill-down:** `Ctrl+Click` / `Cmd ⌘+Click` · **Zoom out:** `Ctrl+DblClick` / `Cmd ⌘+DblClick` · **Reset:** `Escape`
 
 → [Full documentation](user-manuals/SunburstChart.md)
 
@@ -245,6 +246,40 @@ const data: ChordChartData[] = [
 
 ---
 
+### RadialTreeChart
+
+Hierarchical data as a radial tree — nodes on concentric rings connected by curved links. Use `RadialTreeChart` for org charts, skill taxonomies, dependency trees, or any hierarchy where you want both structure and spatial layout. Hover for a tooltip, click for a popover with node details. `Ctrl / Cmd ⌘+Click` drills into subtrees, `Ctrl / Cmd ⌘+Scroll` zooms.
+
+```tsx
+import { RadialTreeChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { RadialTreeChartData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: RadialTreeChartData = {
+  id: 'ceo', name: 'CEO', subname: 'Leadership',
+  children: [
+    { id: 'cto', name: 'CTO', subname: 'Technology',
+      children: [
+        { id: 'fe', name: 'Frontend Lead' },
+        { id: 'be', name: 'Backend Lead'  },
+      ]},
+    { id: 'cpo', name: 'CPO', subname: 'Product' },
+  ],
+};
+
+<RadialTreeChart
+  data={data}
+  size={600}
+  drillable    // Ctrl / Cmd ⌘+Click to drill in, DblClick to go back
+  zoomable     // Ctrl / Cmd ⌘+Scroll to zoom
+  showNodePopover
+  onNodeClick={(info) => console.log(info.name, info.depth)}
+/>
+```
+
+→ [Full documentation](user-manuals/RadialTreeChart.md)
+
+---
+
 ## TypeScript
 
 All types and defaults are exported directly — no separate `@types/...` package needed.
@@ -277,6 +312,9 @@ import type {
 
   // ChordChart
   ChordChartData, ChordGroupInfo, ChordInfo, ChordSortBy,
+
+  // RadialTreeChart
+  RadialTreeChartData, RadialTreeNodeInfo, RadialTreeNodeIconSpec, RadialTreeSortBy,
 } from '@thebuoyant-tsdev/mui-ts-library';
 ```
 

package/dist/components/radial-tree-chart/RadialTreeChart.d.ts

@@ -0,0 +1,5 @@
+import { type RadialTreeChartProps } from "./RadialTreeChart.types";
+export declare function RadialTreeChart({ data, size, autoFit, sortBy, showLabels, showIcons, chartColors, rootNodeRadius, branchNodeRadius, leafNodeRadius, linkColor, linkStrokeOpacity, linkStrokeWidth, labelFontSize, labelColor, separationSibling, separationCousin, zoomable, drillable, onFocusChange, showNodePopover, renderNodePopoverContent, onNodeClick, disabled, translation, }: RadialTreeChartProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadialTreeChart {
+    var displayName: string;
+}

package/dist/components/radial-tree-chart/RadialTreeChart.types.d.ts

@@ -0,0 +1,88 @@
+export type RadialTreeSortBy = 'name' | 'value';
+export type RadialTreeChartData = {
+    id: string;
+    name: string;
+    /** Subtitle shown below the name in the built-in node popover */
+    subname?: string;
+    value?: number;
+    /** Custom field A — shown in the built-in node popover */
+    specialValueA?: string | number;
+    /** Custom field B — shown in the built-in node popover */
+    specialValueB?: string | number;
+    children?: RadialTreeChartData[];
+};
+/** Clean payload passed to `onNodeClick` — no D3 or Fluent UI types exposed */
+export type RadialTreeNodeInfo = {
+    id: string;
+    name: string;
+    subname: string | null;
+    value: number | null;
+    specialValueA: string | number | null;
+    specialValueB: string | number | null;
+    depth: number;
+    /** Breadcrumb from root to this node */
+    path: string[];
+    childrenCount: number;
+    data: RadialTreeChartData;
+};
+export type RadialTreeChartTranslation = {
+    /** Shown when data is empty */
+    noData: string;
+    /** Label for specialValueA in the built-in node popover */
+    specialValueA?: string;
+    /** Label for specialValueB in the built-in node popover */
+    specialValueB?: string;
+};
+export declare const DEFAULT_RADIAL_TREE_CHART_TRANSLATION: RadialTreeChartTranslation;
+export type RadialTreeChartProps = {
+    /** Root node of the hierarchy */
+    data: RadialTreeChartData;
+    /** Width and height of the SVG in pixels (default: 600) */
+    size?: number;
+    /** Auto-fit viewBox to the rendered content (default: true) */
+    autoFit?: boolean;
+    /** Sort child nodes alphabetically ('name') or by value ('value') — default: 'name' */
+    sortBy?: RadialTreeSortBy;
+    /** Show node name labels (default: true) */
+    showLabels?: boolean;
+    /** Per-depth node colors — falls back to MUI theme palette when omitted */
+    chartColors?: string[];
+    /** Root node circle radius in px (default: 22) */
+    rootNodeRadius?: number;
+    /** Branch node circle radius in px (default: 16) */
+    branchNodeRadius?: number;
+    /** Leaf node circle radius in px (default: 11) */
+    leafNodeRadius?: number;
+    /** Link line color — defaults to `theme.palette.text.secondary` */
+    linkColor?: string;
+    /** Link line opacity — 0 to 1 (default: 1) */
+    linkStrokeOpacity?: number;
+    /** Link line width in px (default: 1.5) */
+    linkStrokeWidth?: number;
+    /** Label font size in px (default: 12) */
+    labelFontSize?: number;
+    /** Label text color — defaults to `theme.palette.text.primary` */
+    labelColor?: string;
+    /** Separation factor between sibling nodes (default: 1) */
+    separationSibling?: number;
+    /** Separation factor between cousin nodes (default: 2) */
+    separationCousin?: number;
+    /** Show white icons (folder/person) inside the node circles (default: true) */
+    showIcons?: boolean;
+    /** Show a built-in MUI Popover with node details on click (default: false) */
+    showNodePopover?: boolean;
+    /** Render custom content inside the built-in node popover */
+    renderNodePopoverContent?: (info: RadialTreeNodeInfo) => React.ReactNode;
+    /** Fired on every node click */
+    onNodeClick?: (info: RadialTreeNodeInfo, event: React.MouseEvent<SVGGElement>) => void;
+    /** Enable Ctrl+Scroll zoom — Ctrl+Wheel zooms in/out, Escape resets (default: false) */
+    zoomable?: boolean;
+    /** Enable Ctrl+Click drill-down into subtrees, Ctrl+DblClick zoom out (default: false) */
+    drillable?: boolean;
+    /** Fired when drill-down focus changes — null when reset to root */
+    onFocusChange?: (focusedNode: RadialTreeNodeInfo | null) => void;
+    /** Disables all interactions (default: false) */
+    disabled?: boolean;
+    /** Override translation strings */
+    translation?: Partial<RadialTreeChartTranslation>;
+};

package/dist/components/sunburst-chart/SunburstChart.d.ts

@@ -1,5 +1,5 @@
 import { type SunburstChartProps } from "./SunburstChart.types";
-export declare function SunburstChart({ data, size, showSegmentLabels, innerRadius, sortBy, chartColors, showRootLabel, onSegmentClick, onZoomChange, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, disabled, }: SunburstChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function SunburstChart({ data, size, showSegmentLabels, innerRadius, sortBy, chartColors, showRootLabel, onSegmentClick, onZoomChange, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, zoomable, disabled, }: SunburstChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SunburstChart {
     var displayName: string;
 }

package/dist/components/sunburst-chart/SunburstChart.types.d.ts

@@ -58,6 +58,8 @@ export type SunburstChartProps = {
     valueDecimalSeparator?: string;
     /** Thousands separator for values (default: ',') */
     valueThousandsSeparator?: string;
+    /** Enable Ctrl+Scroll zoom — content outside `size` is clipped (default: false) */
+    zoomable?: boolean;
     /** Disables all interactions (default: false) */
     disabled?: boolean;
     /** Override any translation string */