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

package/README.de.md

@@ -4,22 +4,25 @@
 
 Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **MUI (Material UI v9)**. Die Komponenten folgen MUI's Design-Sprache, unterstützen Dark Mode und Theming von Haus aus und werden mit vollständigen TypeScript-Typen, Storybook-Stories und Unit-Tests ausgeliefert.
 
+**[→ Live-Storybook](https://thebuoyant.github.io/mui-ts-library/)** — alle Komponenten interaktiv erkunden, ohne Installation.
+
 ---
 
 ## Komponenten
 
 | 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 / Cmd ⌘+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, Assignee-Spalte, CSV-Export 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) |
+| [`PasswordStrengthMeter`](#passwordstrengthmeter) | Passwort-Eingabe mit animiertem Stärke-Meter, Confirm-Feld mit Match-Validierung, eigenen Anforderungen und eingebautem sicheren Passwort-Generator | [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 / 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) |
+| [`ChordChart`](#chordchart) | D3 v7 Fluss-Chart — Arc-Gruppen, Bänder, Hover-Highlight, Ctrl / Cmd ⌘+Scroll-Zoom, gerichtet/ungerichtet, MUI-Theme-Integration | [Vollständiges Manual →](user-manuals/ChordChart.de.md) |
+| [`RadialTreeChart`](#radialtreechart) | 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) |
+| [`CirclePackingChart`](#circlepackingchart) | D3 v7 Circle Packing — verschachtelte Kreise, animierter D3-Zoom, Ctrl / Cmd ⌘+Scroll-Zoom, Tiefen-Gradient oder Palette, MUI-Theme-Integration | [Vollständiges Manual →](user-manuals/CirclePackingChart.de.md) |
+| [`HorizontalTreeChart`](#horizontaltreechart) | D3 v7 Baum-Chart — 4 Orientierungen (LR/RL/TB/BT), geschwungene Links, Drill-Down, Ctrl / Cmd ⌘+Scroll-Zoom, MUI-Icons und Theme-Integration | [Vollständiges Manual →](user-manuals/HorizontalTreeChart.de.md) |
 
 ---
 
@@ -51,29 +54,7 @@ import { GanttChart, JsonEditor, useConfirm } from '@thebuoyant-tsdev/mui-ts-lib
 
 ## Schnellstart
 
-Die App wie gewohnt in MUI's `ThemeProvider` einschließen. `ConfirmDialog` benötigt zusätzlich einen `ConfirmDialogProvider` nahe der App-Wurzel — alle anderen Komponenten funktionieren ohne Provider.
-
-### 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';
-
-// App-Wurzel — einmalig
-<ConfirmDialogProvider>
-  <App />
-</ConfirmDialogProvider>
-
-// Überall innerhalb der App
-const confirm = useConfirm();
-const ok = await confirm({ title: 'Eintrag löschen?', severity: 'error', confirmLabel: 'Löschen', countdown: 10 });
-if (ok) handleDelete();
-```
-
-→ [Vollständige Dokumentation](user-manuals/ConfirmDialog.de.md)
-
----
+Die App wie gewohnt in MUI's `ThemeProvider` einschließen — alle Komponenten funktionieren ohne zusätzlichen Provider.
 
 ### GanttChart
 
@@ -117,7 +98,7 @@ 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.
+Passwort-Eingabe mit Echtzeit-Stärke-Feedback und eingebautem sicheren Passwort-Generator. Konzipiert für Registrierungs- und Passwort-Änderungs-Flows — Nutzer zu starken Passwörtern führen oder per Klick eines generieren lassen.
 
 ```tsx
 import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
@@ -125,7 +106,12 @@ import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 <PasswordStrengthMeter
   passwordMinLength={10}
   showSegmentedBar
+  showConfirmField                 // zweites Feld mit ✓/✗ Match-Validierung
+  showPasswordGenerator            // generiert ein kryptographisch sicheres Passwort
+  generatorOptions={{ length: 20 }}
   onPasswordChange={(password, result) => console.log(result.score)}
+  onConfirmChange={(value, matches) => console.log('Übereinstimmung:', matches)}
+  onPasswordGenerated={(pw) => console.log('Generiert:', pw)}
 />
 ```
 
@@ -286,9 +272,6 @@ Alle Typen und Defaults werden direkt exportiert — kein separates `@types/...`
 
 ```tsx
 import type {
-  // ConfirmDialog
-  ConfirmDialogOptions, ConfirmDialogSeverity,
-
   // GanttChart
   GanttTask, GanttTranslations, GanttTheme, GanttToolbarConfig,
 
@@ -315,6 +298,12 @@ import type {
 
   // RadialTreeChart
   RadialTreeChartData, RadialTreeNodeInfo, RadialTreeNodeIconSpec, RadialTreeSortBy,
+
+  // CirclePackingChart
+  CirclePackingData, CirclePackingNodeInfo, CirclePackingZoomInfo, CirclePackingSortBy,
+
+  // HorizontalTreeChart
+  HorizontalTreeData, HorizontalTreeNodeInfo, HorizontalTreeOrientation,
 } from '@thebuoyant-tsdev/mui-ts-library';
 ```
 

package/README.md

@@ -4,22 +4,25 @@
 
 A type-safe React component library built on **TypeScript** and **MUI (Material UI v9)**. Components follow MUI's design language, support dark mode and theming out of the box, and ship with complete TypeScript types, Storybook stories, and unit tests.
 
+**[→ Live Storybook](https://thebuoyant.github.io/mui-ts-library/)** — explore all components interactively, no installation needed.
+
 ---
 
 ## Components
 
 | 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 / Cmd ⌘+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, assignee column, CSV export, 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) |
+| [`PasswordStrengthMeter`](#passwordstrengthmeter) | Password input with animated strength meter, segmented bar, custom requirements, confirm field with match validation, and built-in secure password generator | [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 / 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) |
+| [`ChordChart`](#chordchart) | D3 v7 flow chart — arc groups, ribbons, hover highlight, Ctrl / Cmd ⌘+Scroll zoom, directed/undirected, MUI theme integration | [Full Manual →](user-manuals/ChordChart.md) |
+| [`RadialTreeChart`](#radialtreechart) | 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) |
+| [`CirclePackingChart`](#circlepackingchart) | D3 v7 circle packing — nested circles, animated D3 zoom, Ctrl / Cmd ⌘+Scroll zoom, depth gradient or palette, MUI theme integration | [Full Manual →](user-manuals/CirclePackingChart.md) |
+| [`HorizontalTreeChart`](#horizontaltreechart) | D3 v7 tree chart — 4 orientations (LR/RL/TB/BT), curved links, drill-down, Ctrl / Cmd ⌘+Scroll zoom, MUI icons and theme integration | [Full Manual →](user-manuals/HorizontalTreeChart.md) |
 
 ---
 
@@ -51,29 +54,7 @@ import { GanttChart, JsonEditor, useConfirm } from '@thebuoyant-tsdev/mui-ts-lib
 
 ## Quick Start
 
-Wrap your app in MUI's `ThemeProvider` as usual. `ConfirmDialog` additionally requires a `ConfirmDialogProvider` near the app root — all other components work without a provider.
-
-### 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';
-
-// App root — once
-<ConfirmDialogProvider>
-  <App />
-</ConfirmDialogProvider>
-
-// Anywhere inside
-const confirm = useConfirm();
-const ok = await confirm({ title: 'Delete entry?', severity: 'error', confirmLabel: 'Delete', countdown: 10 });
-if (ok) handleDelete();
-```
-
-→ [Full documentation](user-manuals/ConfirmDialog.md)
-
----
+Wrap your app in MUI's `ThemeProvider` as usual — all components work without an additional provider.
 
 ### GanttChart
 
@@ -117,7 +98,7 @@ 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.
+Password input with real-time strength feedback, a confirm field with match validation, and a built-in secure password generator. Designed for registration flows and password-change screens.
 
 ```tsx
 import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
@@ -125,7 +106,12 @@ import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 <PasswordStrengthMeter
   passwordMinLength={10}
   showSegmentedBar
+  showConfirmField                 // second input with ✓/✗ match validation
+  showPasswordGenerator            // generates a cryptographically secure password
+  generatorOptions={{ length: 20 }}
   onPasswordChange={(password, result) => console.log(result.score)}
+  onConfirmChange={(value, matches) => console.log('Matches:', matches)}
+  onPasswordGenerated={(pw) => console.log('Generated:', pw)}
 />
 ```
 
@@ -286,9 +272,6 @@ All types and defaults are exported directly — no separate `@types/...` packag
 
 ```tsx
 import type {
-  // ConfirmDialog
-  ConfirmDialogOptions, ConfirmDialogSeverity,
-
   // GanttChart
   GanttTask, GanttTranslations, GanttTheme, GanttToolbarConfig,
 
@@ -315,6 +298,12 @@ import type {
 
   // RadialTreeChart
   RadialTreeChartData, RadialTreeNodeInfo, RadialTreeNodeIconSpec, RadialTreeSortBy,
+
+  // CirclePackingChart
+  CirclePackingData, CirclePackingNodeInfo, CirclePackingZoomInfo, CirclePackingSortBy,
+
+  // HorizontalTreeChart
+  HorizontalTreeData, HorizontalTreeNodeInfo, HorizontalTreeOrientation,
 } from '@thebuoyant-tsdev/mui-ts-library';
 ```
 

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, showGroupLabels, labelOffset, ribbonOpacity, ribbonBlendMode, directed, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, onGroupClick, onChordClick, disabled, }: 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, onGroupClick, onChordClick, zoomable, disabled, }: ChordChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ChordChart {
     var displayName: string;
 }

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

@@ -5,6 +5,17 @@ export type ChordChartData = {
     target: string;
     value: number;
 };
+/**
+ * Per-group color overrides for ChordChart.
+ * Key = group name (same as `source` / `target` in the data).
+ * Value = color config — null / omit keys = use chart default palette.
+ * Example: `{ Engineering: { fill: '#1565C0' }, Sales: { fill: '#6A1B9A' } }`
+ */
+export type ChordGroupColorConfigs = Record<string, {
+    fill?: string;
+    textColor?: string;
+    stroke?: string;
+} | null>;
 /** Callback payload for a click on a group arc */
 export type ChordGroupInfo = {
     /** Group name */
@@ -53,6 +64,8 @@ export type ChordChartProps = {
     sortChords?: ChordSortBy;
     /** Custom color palette — falls back to MUI theme palette when omitted */
     chartColors?: string[];
+    /** Per-group color overrides keyed by group name — overrides `chartColors` for specific groups */
+    groupColorConfigs?: ChordGroupColorConfigs;
     /** Show group name labels outside the arc ring (default: true) */
     showGroupLabels?: boolean;
     /** Gap between arc outer edge and label text in px (default: 6) */
@@ -73,6 +86,8 @@ export type ChordChartProps = {
     onGroupClick?: (info: ChordGroupInfo, event: React.MouseEvent<SVGGElement>) => void;
     /** Fired on click of a ribbon */
     onChordClick?: (info: ChordInfo, event: React.MouseEvent<SVGPathElement>) => void;
+    /** Enable Ctrl / Cmd ⌘ + Scroll visual zoom — clips content at `size` boundary (default: false) */
+    zoomable?: boolean;
     /** Disables all interactions (default: false) */
     disabled?: boolean;
     /** Override translation strings */

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

@@ -0,0 +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, }: CirclePackingChartProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CirclePackingChart {
+    var displayName: string;
+}

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

@@ -0,0 +1,104 @@
+/**
+ * Per-node color overrides — takes priority over the chart's depth palette.
+ * Set any key to override; omit or set to null to fall back to chart defaults.
+ * Shared across all D3 charts (SunburstChart, ChordChart, RadialTreeChart, CirclePackingChart).
+ */
+export type NodeColorConfig = {
+    /** Fill / background color of the circle or arc segment */
+    fill?: string;
+    /** Label text color (overrides chart-level `labelColor`) */
+    textColor?: string;
+    /** Stroke / border color */
+    stroke?: string;
+};
+export type CirclePackingData = {
+    /** Optional ID for backend linking */
+    id?: string;
+    name: string;
+    value?: number;
+    /** Per-node color overrides — null / omit = use chart default palette */
+    colorConfig?: NodeColorConfig | null;
+    children?: CirclePackingData[];
+};
+export type CirclePackingSortBy = 'value' | 'name';
+/** Clean callback payload — no D3 types exposed */
+export type CirclePackingNodeInfo = {
+    /** Node id — same as data.id when provided */
+    id: string | null;
+    name: string;
+    /** D3 aggregate value — sum of all descendant leaf values */
+    value: number | null;
+    /** Percentage of root total — (value / root.value) * 100 */
+    percentage: number;
+    depth: number;
+    /** Breadcrumb from root to this node — array of names */
+    path: string[];
+    childrenCount: number;
+    data: CirclePackingData;
+};
+export type CirclePackingZoomInfo = {
+    previousName: string;
+    currentName: string;
+    currentDepth: number;
+    /** true when zoomed back to root */
+    isRoot: boolean;
+};
+export type CirclePackingTranslation = {
+    noData: string;
+};
+export declare const DEFAULT_CIRCLE_PACKING_TRANSLATION: CirclePackingTranslation;
+export type CirclePackingChartProps = {
+    /** Root node of the hierarchy */
+    data: CirclePackingData;
+    /** Width and height of the SVG in pixels — always square (default: 600) */
+    size?: number;
+    /** Padding between nested circles in px (default: 3) */
+    padding?: number;
+    /** Sort children by value or alphabetically (default: 'value') */
+    sortBy?: CirclePackingSortBy;
+    /** Show name labels on the outer (focused) ring circles (default: true) */
+    showLabels?: boolean;
+    /**
+     * Show labels on ALL visible inner circles too — truncated with "…" when the
+     * text doesn't fit inside the circle. Outer-ring labels stay bold; inner labels
+     * use a smaller font. (default: false)
+     */
+    showAllLabels?: boolean;
+    /** Outer-ring label font size in px (default: 13, bold) */
+    labelFontSize?: number;
+    /** Inner circle label font size in px — used when `showAllLabels` is true (default: 9) */
+    innerLabelFontSize?: number;
+    /** Label text color — defaults to `theme.palette.text.primary` */
+    labelColor?: string;
+    /**
+     * Custom depth-based color palette — overrides the default MUI theme palette.
+     * colors[depth % length] per node. Falls back to MUI palette when not set.
+     */
+    chartColors?: string[];
+    /**
+     * HCL gradient start color — when set together with `depthColorEnd`,
+     * overrides `chartColors` and the MUI palette with a smooth gradient.
+     */
+    depthColorStart?: string;
+    /**
+     * HCL gradient end color — see `depthColorStart`.
+     */
+    depthColorEnd?: string;
+    /** SVG background fill. Default: `theme.palette.background.default` */
+    background?: string;
+    /**
+     * Zoom animation duration in ms (default: 750).
+     * Alt+Ctrl / Alt+Cmd+Click uses 10× for slow-motion demos.
+     */
+    duration?: number;
+    /** Enable Ctrl / Cmd ⌘ + Scroll visual zoom — clips content at `size` boundary (default: false) */
+    zoomable?: boolean;
+    /** Disables all interactions (default: false) */
+    disabled?: boolean;
+    /** Fires on regular click — immediately, no delay */
+    onCircleClick?: (info: CirclePackingNodeInfo, event: React.MouseEvent<SVGCircleElement>) => void;
+    /** Fires when the zoom focus changes */
+    onZoomChange?: (zoom: CirclePackingZoomInfo) => void;
+    /** Override translation strings */
+    translation?: Partial<CirclePackingTranslation>;
+};

package/dist/components/gantt-chart/GanttChart.constants.d.ts

@@ -8,6 +8,7 @@ export declare const COLUMN_WIDTH_QUARTER = 360;
 export declare const BAR_HEIGHT = 16;
 export declare const STATUS_COL_WIDTH = 90;
 export declare const ACTIONS_COL_WIDTH = 96;
+export declare const ASSIGNEE_COL_WIDTH = 110;
 export declare const DIVIDER_WIDTH = 4;
 /** MUI-Farb-Token für Balken und Status-Punkte (bgcolor-kompatibel) */
 export declare const STATUS_BAR_COLOR: Record<string, string>;

package/dist/components/gantt-chart/GanttChart.d.ts

@@ -4,4 +4,4 @@ export declare function useGanttChartStore<T>(selector: (state: ReturnType<Gantt
 export declare function useRawGanttChartStore(): GanttChartStore;
 export declare function useGanttTranslations(): GanttTranslations;
 export declare function useGanttTheme(): GanttTheme;
-export declare function GanttChart({ tasks, timeScale, initialExpandAll, showToolbar, defaultRangeStart, defaultRangeEnd, translations, enableBuiltinDialogs, toolbarConfig, zoomable, draggable, resizable, inlineEdit, progressDraggable, showCriticalPath, virtualizeRows, cascadeDependencies, statusColors, ganttTheme, onTaskClick, onMilestoneClick, onAddTask, onEditTask, onDeleteTask, onStatusChange, onTasksChange, onTaskMoved, onTaskResized, onTaskCreated, onTaskUpdated, onTaskDeleted, height, width, minPanelWidth, maxPanelWidth, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function GanttChart({ tasks, timeScale, initialExpandAll, showToolbar, defaultRangeStart, defaultRangeEnd, translations, enableBuiltinDialogs, toolbarConfig, zoomable, draggable, resizable, inlineEdit, progressDraggable, showCriticalPath, virtualizeRows, showAssigneeColumn, cascadeDependencies, statusColors, ganttTheme, onExportCSV, onTaskClick, onMilestoneClick, onAddTask, onEditTask, onDeleteTask, onStatusChange, onTasksChange, onTaskMoved, onTaskResized, onTaskCreated, onTaskUpdated, onTaskDeleted, height, width, minPanelWidth, maxPanelWidth, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/gantt-chart/GanttChart.types.d.ts

@@ -11,6 +11,8 @@ export type GanttTask = {
     isMilestone?: boolean;
     progress?: number;
     color?: string;
+    /** Person or team responsible for this task — shown in the Assignee column */
+    assignee?: string;
 };
 export type GanttTaskNode = GanttTask & {
     children: GanttTaskNode[];
@@ -50,6 +52,8 @@ export type GanttTranslations = {
     dialogFieldDependencies: string;
     dialogFieldDependenciesNone: string;
     columnActions: string;
+    /** Header label for the Assignee column — shown when showAssigneeColumn=true */
+    columnAssignee: string;
     addTaskTooltip: string;
     editTaskTooltip: string;
     deleteTaskTooltip: string;
@@ -57,6 +61,8 @@ export type GanttTranslations = {
     expandAllTooltip: string;
     collapseAllTooltip: string;
     resetViewTooltip: string;
+    /** Toolbar tooltip for the CSV export button */
+    exportCsvTooltip: string;
 };
 export declare const DEFAULT_GANTT_TRANSLATIONS: GanttTranslations;
 export type GanttStatusColors = Partial<Record<GanttTaskStatus, string>>;
@@ -78,6 +84,8 @@ export type GanttToolbarConfig = {
     showDateRange?: boolean;
     showRangeReset?: boolean;
     showResetView?: boolean;
+    /** Show CSV export button in the toolbar (default: false) */
+    showExportCSV?: boolean;
 };
 export type GanttChartProps = {
     cascadeDependencies?: boolean;
@@ -102,6 +110,8 @@ export type GanttChartProps = {
     toolbarConfig?: GanttToolbarConfig;
     translations?: Partial<GanttTranslations>;
     virtualizeRows?: boolean;
+    /** Show the Assignee column in the task panel (default: false) */
+    showAssigneeColumn?: boolean;
     /** Breite des Charts. "auto" = 100 % des Eltern-Containers. Standard: "100%". */
     width?: number | string;
     zoomable?: boolean;
@@ -116,5 +126,11 @@ export type GanttChartProps = {
     onTaskMoved?: (task: GanttTask, newStart: Date, newEnd: Date) => void;
     onTaskResized?: (task: GanttTask, newEnd: Date) => void;
     onTasksChange?: (tasks: GanttTask[]) => void;
+    /**
+     * Fired when the user clicks the CSV export button.
+     * The first argument is the ready-to-download CSV string.
+     * When not provided, the chart triggers a browser download automatically.
+     */
+    onExportCSV?: (csv: string, tasks: GanttTask[]) => void;
     onTaskUpdated?: (task: GanttTask) => void;
 };

package/dist/components/gantt-chart/GanttTaskPanel.d.ts

@@ -16,6 +16,7 @@ type GanttTaskPanelProps = {
     onTaskDeleted?: (taskId: string) => void;
     inlineEdit?: boolean;
     virtualizeRows?: boolean;
+    showAssigneeColumn?: boolean;
 };
-export declare function GanttTaskPanel({ scrollRef, onScroll, panelWidth, onTaskClick, onAddTask, onEditTask, onDeleteTask, onStatusChange, onTasksChange, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, inlineEdit, virtualizeRows, }: GanttTaskPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function GanttTaskPanel({ scrollRef, onScroll, panelWidth, onTaskClick, onAddTask, onEditTask, onDeleteTask, onStatusChange, onTasksChange, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, inlineEdit, virtualizeRows, showAssigneeColumn, }: GanttTaskPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/gantt-chart/GanttToolbar.d.ts

@@ -2,6 +2,7 @@ import type { GanttToolbarConfig } from "./GanttChart.types";
 type GanttToolbarProps = {
     onScrollToToday?: () => void;
     config: Required<GanttToolbarConfig>;
+    onExportCSV?: () => void;
 };
-export declare function GanttToolbar({ onScrollToToday, config }: GanttToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function GanttToolbar({ onScrollToToday, config, onExportCSV }: GanttToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/horizontal-tree-chart/HorizontalTreeChart.d.ts

@@ -0,0 +1,5 @@
+import { type HorizontalTreeChartProps } from "./HorizontalTreeChart.types";
+export declare function HorizontalTreeChart({ data, orientation, width, height, levelSpacing, nodeRadius, sortBy, showLabels, labelFontSize, labelColor, showIcons, chartColors, linkStrokeOpacity, linkStrokeWidth, linkColor, zoomable, drillable, onFocusChange, showNodePopover, renderNodePopoverContent, onNodeClick, disabled, translation, }: HorizontalTreeChartProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace HorizontalTreeChart {
+    var displayName: string;
+}

package/dist/components/horizontal-tree-chart/HorizontalTreeChart.types.d.ts

@@ -0,0 +1,95 @@
+/** Tree orientation — defines the direction the tree grows */
+export type HorizontalTreeOrientation = 'LR' | 'RL' | 'TB' | 'BT';
+export type HorizontalTreeData = {
+    id?: string;
+    name: string;
+    subname?: string;
+    value?: number;
+    specialValueA?: string | number;
+    specialValueB?: string | number;
+    /** Per-node color overrides */
+    colorConfig?: {
+        fill?: string;
+        textColor?: string;
+        stroke?: string;
+    } | null;
+    children?: HorizontalTreeData[];
+};
+/** Clean callback payload — no D3 types exposed */
+export type HorizontalTreeNodeInfo = {
+    id: string | null;
+    name: string;
+    subname: string | null;
+    value: number | null;
+    specialValueA: string | number | null;
+    specialValueB: string | number | null;
+    depth: number;
+    /** Breadcrumb from root */
+    path: string[];
+    childrenCount: number;
+    data: HorizontalTreeData;
+};
+export type HorizontalTreeZoomInfo = {
+    focusedNode: HorizontalTreeNodeInfo;
+    isRoot: boolean;
+};
+export type HorizontalTreeTranslation = {
+    noData: string;
+    specialValueA?: string;
+    specialValueB?: string;
+};
+export declare const DEFAULT_HORIZONTAL_TREE_TRANSLATION: HorizontalTreeTranslation;
+export type HorizontalTreeChartProps = {
+    /** Root node of the hierarchy */
+    data: HorizontalTreeData;
+    /**
+     * Tree growth direction (default: 'LR')
+     * - 'LR' left → right
+     * - 'RL' right → left
+     * - 'TB' top → bottom
+     * - 'BT' bottom → top
+     */
+    orientation?: HorizontalTreeOrientation;
+    /** Chart width in px (default: 800) */
+    width?: number;
+    /** Chart height in px (default: 500) */
+    height?: number;
+    /** Horizontal distance between depth levels in px (default: 200) */
+    levelSpacing?: number;
+    /** Node circle radius in px (default: 10) */
+    nodeRadius?: number;
+    /** Sort children alphabetically or by value (default: 'name') */
+    sortBy?: 'name' | 'value';
+    /** Show name labels on nodes (default: true) */
+    showLabels?: boolean;
+    /** Label font size in px (default: 12) */
+    labelFontSize?: number;
+    /** Label color — defaults to theme.palette.text.primary */
+    labelColor?: string;
+    /** Show icons inside node circles (default: true) */
+    showIcons?: boolean;
+    /** Per-depth color palette — falls back to MUI theme palette */
+    chartColors?: string[];
+    /** Link stroke opacity (default: 0.4) */
+    linkStrokeOpacity?: number;
+    /** Link stroke width in px (default: 1.5) */
+    linkStrokeWidth?: number;
+    /** Link color — defaults to theme.palette.text.secondary */
+    linkColor?: string;
+    /** Enable Ctrl / Cmd ⌘ + Scroll visual zoom (default: false) */
+    zoomable?: boolean;
+    /** Enable Ctrl / Cmd ⌘ + Click drill-down into subtrees (default: false) */
+    drillable?: boolean;
+    /** Fires when drill-down focus changes */
+    onFocusChange?: (info: HorizontalTreeZoomInfo) => void;
+    /** Show built-in MUI Popover on node click (default: false) */
+    showNodePopover?: boolean;
+    /** Custom popover content */
+    renderNodePopoverContent?: (info: HorizontalTreeNodeInfo) => React.ReactNode;
+    /** Fires on every node click */
+    onNodeClick?: (info: HorizontalTreeNodeInfo, event: React.MouseEvent<SVGGElement>) => void;
+    /** Disables all interactions (default: false) */
+    disabled?: boolean;
+    /** Override translation strings */
+    translation?: Partial<HorizontalTreeTranslation>;
+};

package/dist/components/password-strength-meter/PasswordStrengthMeter.d.ts

@@ -1,2 +1,2 @@
 import type { PasswordStrengthMeterProps } from "./PasswordStrengthMeter.types";
-export declare function PasswordStrengthMeter({ value, name, inputRef, disabled, error, helperText, autoComplete, customRequirements, showPasswordAdornment, showMeter, showSegmentedBar, showSummary, inputSize, translation, meterColors, passwordMinLength, checkColors, onPasswordChange, }: PasswordStrengthMeterProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasswordStrengthMeter({ value, confirmValue, name, inputRef, disabled, error, helperText, autoComplete, customRequirements, generatorOptions, showConfirmField, showPasswordAdornment, showMeter, showPasswordGenerator, showSegmentedBar, showSummary, inputSize, translation, meterColors, passwordMinLength, checkColors, onPasswordChange, onConfirmChange, onPasswordGenerated, }: PasswordStrengthMeterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/password-strength-meter/PasswordStrengthMeter.types.d.ts

@@ -32,6 +32,30 @@ export type PasswordStrengthMeterTranslation = {
     showPasswordLabel: string;
     hidePasswordLabel: string;
     meterAriaLabel: string;
+    /** Tooltip for the password generator button */
+    generatePasswordLabel: string;
+    /** Label for the confirm password input */
+    confirmLabel: string;
+    /** Shown when passwords match */
+    confirmMatchLabel: string;
+    /** Shown when passwords do not match */
+    confirmMismatchLabel: string;
+};
+/**
+ * Options for the built-in password generator.
+ * All character classes are included by default.
+ */
+export type PasswordGeneratorOptions = {
+    /** Total password length (default: 16) */
+    length?: number;
+    /** Include uppercase letters A–Z (default: true) */
+    upper?: boolean;
+    /** Include lowercase letters a–z (default: true) */
+    lower?: boolean;
+    /** Include digits 0–9 (default: true) */
+    numbers?: boolean;
+    /** Include symbols !@#$%^&*... (default: true) */
+    symbols?: boolean;
 };
 export declare const DEFAULT_PASSWORD_TRANSLATIONS: PasswordStrengthMeterTranslation;
 export declare const DEFAULT_METER_COLORS: MeterColors;
@@ -51,6 +75,10 @@ export type PasswordStrengthMeterProps = {
     customRequirements?: CustomRequirement[];
     disabled?: boolean;
     error?: boolean;
+    /** Value of the confirm input in controlled mode. */
+    confirmValue?: string;
+    /** Options for the built-in password generator (used when showPasswordGenerator=true). */
+    generatorOptions?: PasswordGeneratorOptions;
     helperText?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     inputSize?: "small" | "medium";
@@ -59,10 +87,18 @@ export type PasswordStrengthMeterProps = {
     passwordMinLength?: number;
     showMeter?: boolean;
     showPasswordAdornment?: boolean;
+    /** Show a second "Confirm password" input with match validation indicator. */
+    showConfirmField?: boolean;
+    /** Show a "Generate secure password" button — generates and fills a strong password on click. */
+    showPasswordGenerator?: boolean;
     showSummary?: boolean;
     /** Render the strength bar as 4 animated segments instead of a single growing bar. */
     showSegmentedBar?: boolean;
     translation?: Partial<PasswordStrengthMeterTranslation>;
     value?: string;
     onPasswordChange?: (password: string, strengthResult: StrengthResult) => void;
+    /** Fired when the confirm field value changes — includes whether the passwords match. */
+    onConfirmChange?: (confirmValue: string, matches: boolean) => void;
+    /** Fired when a password was generated — receives the generated password. */
+    onPasswordGenerated?: (password: string) => void;
 };

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

@@ -9,6 +9,12 @@ export type RadialTreeChartData = {
     specialValueA?: string | number;
     /** Custom field B — shown in the built-in node popover */
     specialValueB?: string | number;
+    /** Per-node color overrides — null / omit = use chart default palette */
+    colorConfig?: {
+        fill?: string;
+        textColor?: string;
+        stroke?: string;
+    } | null;
     children?: RadialTreeChartData[];
 };
 /** Clean payload passed to `onNodeClick` — no D3 or Fluent UI types exposed */