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

package/README.de.md

@@ -14,9 +14,10 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 | [`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) |
 | [`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 und Markdown-Einfügen | [Vollständiges Manual →](user-manuals/RichTextEditor.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) |
 
 ---
 
@@ -171,6 +172,36 @@ import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ---
 
+### SunburstChart
+
+```tsx
+import { SunburstChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { SunburstChartData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: SunburstChartData = {
+  id: 'root', name: 'Budget',
+  children: [
+    { id: 'eng',  name: 'Engineering', children: [
+      { id: 'fe', name: 'Frontend', value: 480 },
+      { id: 'be', name: 'Backend',  value: 620 },
+    ]},
+    { id: 'sales', name: 'Vertrieb', value: 890 },
+  ],
+};
+
+<SunburstChart
+  data={data}
+  size={500}
+  onSegmentClick={(info) => console.log(info.path, info.value)}
+/>
+```
+
+**Zoom:** `Ctrl+Click` → Drill-down · `Ctrl+Doppelklick` → Zoom out · `Escape` → Reset
+
+→ [Vollständige Dokumentation](user-manuals/SunburstChart.de.md)
+
+---
+
 ## TypeScript
 
 Alle Typen und Defaults werden direkt exportiert — kein separates `@types/...`-Paket nötig.

package/README.md

@@ -14,9 +14,10 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 | [`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) |
 | [`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, and Markdown paste | [Full Manual →](user-manuals/RichTextEditor.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) |
 
 ---
 
@@ -171,6 +172,36 @@ import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 
 ---
 
+### SunburstChart
+
+```tsx
+import { SunburstChart } from '@thebuoyant-tsdev/mui-ts-library';
+import type { SunburstChartData } from '@thebuoyant-tsdev/mui-ts-library';
+
+const data: SunburstChartData = {
+  id: 'root', name: 'Budget',
+  children: [
+    { id: 'eng',  name: 'Engineering', children: [
+      { id: 'fe', name: 'Frontend', value: 480 },
+      { id: 'be', name: 'Backend',  value: 620 },
+    ]},
+    { id: 'sales', name: 'Sales', value: 890 },
+  ],
+};
+
+<SunburstChart
+  data={data}
+  size={500}
+  onSegmentClick={(info) => console.log(info.path, info.value)}
+/>
+```
+
+**Zoom:** `Ctrl+Click` → drill down · `Ctrl+Double-click` → zoom out · `Escape` → reset
+
+→ [Full documentation](user-manuals/SunburstChart.md)
+
+---
+
 ## TypeScript
 
 All types and defaults are exported directly — no separate `@types/...` package needed.

package/dist/components/json-editor/JsonEditorToolbar.d.ts

@@ -1,11 +1,11 @@
 import type { EditorView } from "@codemirror/view";
 import type { JsonEditorToolbarConfig, JsonEditorTranslation } from "./JsonEditor.types";
 type JsonEditorToolbarProps = {
-    viewRef: React.MutableRefObject<EditorView | null>;
+    editorView: EditorView | null;
     toolbarConfig: Required<JsonEditorToolbarConfig>;
     translation: JsonEditorTranslation;
     indent: number;
     disabled?: boolean;
 };
-export declare function JsonEditorToolbar({ viewRef, toolbarConfig: tc, translation: t, indent, disabled, }: JsonEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonEditorToolbar({ editorView, toolbarConfig: tc, translation: t, indent, disabled, }: JsonEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/rich-text-editor/RichTextEditor.types.d.ts

@@ -18,6 +18,12 @@ export type RichTextEditorToolbarConfig = {
     showClearFormat?: boolean;
     /** Fullscreen-Button in der Toolbar — standardmäßig deaktiviert (opt-in) */
     showFullscreenButton?: boolean;
+    /** Tabellen einfügen + Zeilen/Spalten verwalten — standardmäßig deaktiviert (opt-in) */
+    showTableButton?: boolean;
+    /** Bilder per URL einfügen — standardmäßig deaktiviert (opt-in) */
+    showImageButton?: boolean;
+    /** Emoji-Picker — standardmäßig deaktiviert (opt-in) */
+    showEmojiButton?: boolean;
 };
 export declare const DEFAULT_RICH_TEXT_EDITOR_TOOLBAR_CONFIG: Required<RichTextEditorToolbarConfig>;
 export type RichTextEditorTranslation = {
@@ -54,6 +60,23 @@ export type RichTextEditorTranslation = {
     fullscreen: string;
     /** Tooltip für den Exit-Fullscreen-Button */
     exitFullscreen: string;
+    table: string;
+    insertTable: string;
+    addRowBefore: string;
+    addRowAfter: string;
+    deleteRow: string;
+    addColumnBefore: string;
+    addColumnAfter: string;
+    deleteColumn: string;
+    deleteTable: string;
+    image: string;
+    imageDialogTitle: string;
+    imageDialogUrlLabel: string;
+    imageDialogAltLabel: string;
+    imageDialogSave: string;
+    imageDialogCancel: string;
+    emoji: string;
+    emojiSearchPlaceholder: string;
 };
 export declare const DEFAULT_RICH_TEXT_EDITOR_TRANSLATION: RichTextEditorTranslation;
 export type RichTextEditorProps = {

package/dist/components/rich-text-editor/RichTextEditorEmojiPicker.d.ts

@@ -0,0 +1,10 @@
+import { type RichTextEditorTranslation } from "./RichTextEditor.types";
+type RichTextEditorEmojiPickerProps = {
+    anchorEl: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    onSelect: (emoji: string) => void;
+    translation: RichTextEditorTranslation;
+};
+export declare function RichTextEditorEmojiPicker({ anchorEl, open, onClose, onSelect, translation: t, }: RichTextEditorEmojiPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/rich-text-editor/RichTextEditorImageDialog.d.ts

@@ -0,0 +1,10 @@
+import { type Editor } from "@tiptap/react";
+import { type RichTextEditorTranslation } from "./RichTextEditor.types";
+type RichTextEditorImageDialogProps = {
+    open: boolean;
+    onClose: () => void;
+    editor: Editor;
+    translation: RichTextEditorTranslation;
+};
+export declare function RichTextEditorImageDialog({ open, onClose, editor, translation: t, }: RichTextEditorImageDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/rich-text-editor/RichTextEditorTableMenu.d.ts

@@ -0,0 +1,9 @@
+import { type Editor } from "@tiptap/react";
+import { type RichTextEditorTranslation } from "./RichTextEditor.types";
+type RichTextEditorTableMenuProps = {
+    editor: Editor | null;
+    translation: RichTextEditorTranslation;
+    disabled?: boolean;
+};
+export declare function RichTextEditorTableMenu({ editor, translation: t, disabled, }: RichTextEditorTableMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/rich-text-editor/util/emojis.d.ts

@@ -0,0 +1,9 @@
+export type EmojiEntry = {
+    emoji: string;
+    name: string;
+};
+export type EmojiCategory = {
+    label: string;
+    emojis: EmojiEntry[];
+};
+export declare const EMOJI_CATEGORIES: EmojiCategory[];

package/dist/components/sql-editor/SqlEditorToolbar.d.ts

@@ -1,12 +1,12 @@
 import type { EditorView } from "@codemirror/view";
 import type { SqlEditorDialect, SqlEditorToolbarConfig, SqlEditorTranslation } from "./SqlEditor.types";
 type SqlEditorToolbarProps = {
-    viewRef: React.MutableRefObject<EditorView | null>;
+    editorView: EditorView | null;
     toolbarConfig: Required<SqlEditorToolbarConfig>;
     translation: SqlEditorTranslation;
     dialect: SqlEditorDialect;
     disabled?: boolean;
     onExecute?: (sql: string) => void;
 };
-export declare function SqlEditorToolbar({ viewRef, toolbarConfig: tc, translation: t, dialect, disabled, onExecute, }: SqlEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SqlEditorToolbar({ editorView, toolbarConfig: tc, translation: t, dialect, disabled, onExecute, }: SqlEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +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 namespace SunburstChart {
+    var displayName: string;
+}

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

@@ -0,0 +1,65 @@
+export type SunburstSortBy = 'value' | 'name';
+export type SunburstChartData = {
+    id: string;
+    name: string;
+    value?: number;
+    children?: SunburstChartData[];
+};
+export type SunburstSegmentInfo = {
+    /** Node ID — direct access, same as `data.id` */
+    id: string;
+    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 path from root — array of node names */
+    path: string[];
+    /** Breadcrumb path from root — array of node IDs (for backend linking) */
+    pathIds: string[];
+    childrenCount: number;
+    /** Original data node as passed to the chart */
+    data: SunburstChartData;
+};
+export type SunburstZoomInfo = {
+    /** The node that is now the focus center */
+    focusNode: SunburstSegmentInfo;
+    /** True when zoom has been reset to root */
+    isRoot: boolean;
+};
+export type SunburstChartTranslation = {
+    /** Shown when data has no children and no value */
+    noData: string;
+};
+export declare const DEFAULT_SUNBURST_CHART_TRANSLATION: SunburstChartTranslation;
+export type SunburstChartProps = {
+    /** Hierarchical data tree — root node with optional nested children */
+    data: SunburstChartData;
+    /** Width and height of the SVG in pixels (default: 500) */
+    size?: number;
+    /** Show name labels on segments (default: true) */
+    showSegmentLabels?: boolean;
+    /** Inner hole radius in px — 0 = solid sunburst, > 0 = donut style (default: 0) */
+    innerRadius?: number;
+    /** Sort segments by value (largest first) or by name (default: 'value') */
+    sortBy?: SunburstSortBy;
+    /** Custom color palette for top-level segments — falls back to MUI theme palette */
+    chartColors?: string[];
+    /** Show the root node name in the center (default: true) */
+    showRootLabel?: boolean;
+    /** Fired on single-click on any segment */
+    onSegmentClick?: (info: SunburstSegmentInfo, event: React.MouseEvent<SVGPathElement | SVGCircleElement>) => void;
+    /** Fired when zoom focus changes (Ctrl+Click in/out, Escape reset) */
+    onZoomChange?: (zoom: SunburstZoomInfo) => void;
+    /** Decimal places for value display in tooltips (default: 0) */
+    valueDecimalCount?: number;
+    /** Decimal separator for values (default: '.') */
+    valueDecimalSeparator?: string;
+    /** Thousands separator for values (default: ',') */
+    valueThousandsSeparator?: string;
+    /** Disables all interactions (default: false) */
+    disabled?: boolean;
+    /** Override any translation string */
+    translation?: Partial<SunburstChartTranslation>;
+};