@thebuoyant-tsdev/mui-ts-library 1.3.1 → 1.4.0

package/README.de.md

@@ -14,7 +14,7 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 | [`GanttChart`](#ganttchart) | Projekt-Timeline mit hierarchischen Aufgaben, Meilensteinen, Drag & Drop, Zoom 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 und Anforderungsliste | [Vollständiges Manual →](user-manuals/PasswordStrengthMeter.de.md) |
-| [`RichTextEditor`](#richtexteditor) | WYSIWYG-Editor (TipTap v3) mit Toolbar, Link-Dialog, Textfarbe, Hervorhebung 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 und Markdown-Einfügen | [Vollständiges Manual →](user-manuals/RichTextEditor.de.md) |
 | [`SqlEditor`](#sqleditor) | SQL-Code-Editor (CodeMirror 6) mit Syntax-Highlighting, Multi-Dialekt, Autocomplete und Linting | [Vollständiges Manual →](user-manuals/SqlEditor.de.md) |
 | [`JsonEditor`](#jsoneditor) | JSON-Code-Editor (CodeMirror 6) mit Echtzeit-Validierung, Format- und Komprimieren-Schaltfläche | [Vollständiges Manual →](user-manuals/JsonEditor.de.md) |
 
@@ -22,42 +22,13 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 
 ## Installation
 
-### Schritt 1 — Paketdatei erstellen
-
-Dieses Repository klonen und ausführen:
-
-```bash
-npm install
-npm run pack-release
-```
-
-Dieser Befehl baut die Bibliothek und legt eine fertige Paketdatei im Ordner `releases/` ab:
-
-```
-releases/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-```
-
-Diese Datei per Slack, E-Mail oder Netzlaufwerk an das Team weitergeben.
-
-### Schritt 2 — Im eigenen Projekt installieren
-
-Ein Terminal im **eigenen React-Projekt** öffnen und ausführen:
-
-```bash
-npm install /pfad/zur/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-```
-
-**Beispiele:**
+### Schritt 1 — Bibliothek installieren
 
 ```bash
-# Datei liegt im Downloads-Ordner
-npm install ~/Downloads/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-
-# Datei liegt im Nachbarordner des Projekts
-npm install ../thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
+npm install @thebuoyant-tsdev/mui-ts-library
 ```
 
-### Schritt 3 — Peer-Dependencies installieren
+### Schritt 2 — Peer-Dependencies installieren
 
 Falls MUI noch nicht im Projekt vorhanden ist:
 
@@ -65,7 +36,7 @@ Falls MUI noch nicht im Projekt vorhanden ist:
 npm install react@^19 react-dom@^19 @mui/material@^9 @emotion/react @emotion/styled @mui/icons-material@^9
 ```
 
-### Schritt 4 — Fertig
+### Schritt 3 — Fertig
 
 Beliebige Komponente importieren — TypeScript-Typen sind automatisch verfügbar:
 

package/README.md

@@ -14,7 +14,7 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 | [`GanttChart`](#ganttchart) | Project timeline with hierarchical tasks, milestones, drag & drop, zoom, 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 and requirements checklist | [Full Manual →](user-manuals/PasswordStrengthMeter.md) |
-| [`RichTextEditor`](#richtexteditor) | WYSIWYG editor (TipTap v3) with toolbar, link dialog, text color, highlight, 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, and Markdown paste | [Full Manual →](user-manuals/RichTextEditor.md) |
 | [`SqlEditor`](#sqleditor) | SQL code editor (CodeMirror 6) with syntax highlighting, multi-dialect, autocomplete, and linting | [Full Manual →](user-manuals/SqlEditor.md) |
 | [`JsonEditor`](#jsoneditor) | JSON code editor (CodeMirror 6) with real-time validation, Format, and Compact buttons | [Full Manual →](user-manuals/JsonEditor.md) |
 
@@ -22,42 +22,13 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 
 ## Installation
 
-### Step 1 — Get the package file
-
-Clone this repository and run:
-
-```bash
-npm install
-npm run pack-release
-```
-
-This builds the library and places a ready-to-use package file in the `releases/` folder:
-
-```
-releases/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-```
-
-Share this file with your team via Slack, email, or a network drive.
-
-### Step 2 — Install in your project
-
-Open a terminal in **your own React project** and run:
-
-```bash
-npm install /path/to/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-```
-
-**Examples:**
+### Step 1 — Install the library
 
 ```bash
-# File is in your Downloads folder
-npm install ~/Downloads/thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
-
-# File is next to your project folder
-npm install ../thebuoyant-tsdev-mui-ts-library-1.3.0.tgz
+npm install @thebuoyant-tsdev/mui-ts-library
 ```
 
-### Step 3 — Install peer dependencies
+### Step 2 — Install peer dependencies
 
 If your project doesn't have MUI set up yet:
 
@@ -65,9 +36,9 @@ If your project doesn't have MUI set up yet:
 npm install react@^19 react-dom@^19 @mui/material@^9 @emotion/react @emotion/styled @mui/icons-material@^9
 ```
 
-### Step 4 — Done
+### Step 3 — Done
 
-Import any component and TypeScript types are included automatically:
+Import any component — TypeScript types are included automatically:
 
 ```tsx
 import { GanttChart, JsonEditor, useConfirm } from '@thebuoyant-tsdev/mui-ts-library';

package/dist/components/confirm-dialog/ConfirmDialog.types.d.ts

@@ -6,14 +6,14 @@ export type ConfirmDialogTranslation = {
 };
 export declare const DEFAULT_CONFIRM_DIALOG_TRANSLATION: ConfirmDialogTranslation;
 export type ConfirmDialogOptions = {
-    title?: string;
-    description?: string | React.ReactNode;
-    confirmLabel?: string;
     cancelLabel?: string;
-    severity?: ConfirmDialogSeverity;
+    confirmLabel?: string;
+    description?: string | React.ReactNode;
     hideCancelButton?: boolean;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
+    severity?: ConfirmDialogSeverity;
     showIcon?: boolean;
+    title?: string;
 };
 export type ConfirmDialogProviderProps = {
     children: React.ReactNode;

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

@@ -0,0 +1,24 @@
+import type { GanttTask, GanttTaskNode } from "./GanttChart.types";
+import type { TimelineRange } from "./util/gantt-chart.util";
+import type { ActiveDrag, DragType } from "./hooks/useGanttDrag";
+type GanttBarRowProps = {
+    task: GanttTaskNode;
+    virtualTop?: number;
+    activeDrag: ActiveDrag | null;
+    displayRange: TimelineRange;
+    totalWidth: number;
+    gridColumnWidth: number;
+    criticalTaskIds: Set<string>;
+    draggable?: boolean;
+    resizable?: boolean;
+    progressDraggable?: boolean;
+    onTaskClick?: (task: GanttTask) => void;
+    onMilestoneClick?: (task: GanttTask) => void;
+    onContextMenu: (task: GanttTaskNode, mouseX: number, mouseY: number) => void;
+    suppressClickRef: React.MutableRefObject<boolean>;
+    handleBarMouseDown: (e: React.MouseEvent, task: GanttTaskNode, type: DragType) => void;
+    handleProgressMouseDown: (e: React.MouseEvent, task: GanttTaskNode, initialProgress: number, barWidthPx: number) => void;
+    formatDragDate: (d: Date) => string;
+};
+export declare function GanttBarRow({ task, virtualTop, activeDrag, displayRange, totalWidth, gridColumnWidth, criticalTaskIds, draggable, resizable, progressDraggable, onTaskClick, onMilestoneClick, onContextMenu, suppressClickRef, handleBarMouseDown, handleProgressMouseDown, formatDragDate, }: GanttBarRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -9,3 +9,7 @@ export declare const BAR_HEIGHT = 16;
 export declare const STATUS_COL_WIDTH = 90;
 export declare const ACTIONS_COL_WIDTH = 96;
 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>;
+/** MUI-Chip-Color-Werte für den Status-Chip im Task-Panel */
+export declare const STATUS_CHIP_COLOR: Record<string, "default" | "warning" | "info" | "success" | "error">;

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

@@ -79,41 +79,41 @@ export type GanttToolbarConfig = {
     showResetView?: boolean;
 };
 export type GanttChartProps = {
-    tasks: GanttTask[];
-    timeScale?: GanttTimeScale;
+    cascadeDependencies?: boolean;
+    defaultRangeEnd?: Date;
+    defaultRangeStart?: Date;
+    draggable?: boolean;
+    enableBuiltinDialogs?: boolean;
+    ganttTheme?: GanttTheme;
     /** Höhe des Charts. "auto" = 100 % des Eltern-Containers. Standard: 400. */
     height?: number | string;
-    /** Breite des Charts. "auto" = 100 % des Eltern-Containers. Standard: "100%". */
-    width?: number | string;
     initialExpandAll?: boolean;
-    showToolbar?: boolean;
-    toolbarConfig?: GanttToolbarConfig;
-    defaultRangeStart?: Date;
-    defaultRangeEnd?: Date;
-    translations?: Partial<GanttTranslations>;
-    minPanelWidth?: number;
+    inlineEdit?: boolean;
     maxPanelWidth?: number;
-    enableBuiltinDialogs?: boolean;
-    zoomable?: boolean;
-    draggable?: boolean;
+    minPanelWidth?: number;
+    progressDraggable?: boolean;
     resizable?: boolean;
-    cascadeDependencies?: boolean;
     showCriticalPath?: boolean;
-    inlineEdit?: boolean;
-    progressDraggable?: boolean;
-    virtualizeRows?: boolean;
+    showToolbar?: boolean;
     statusColors?: GanttStatusColors;
-    ganttTheme?: GanttTheme;
-    onTaskClick?: (task: GanttTask) => void;
-    onMilestoneClick?: (task: GanttTask) => void;
+    tasks: GanttTask[];
+    timeScale?: GanttTimeScale;
+    toolbarConfig?: GanttToolbarConfig;
+    translations?: Partial<GanttTranslations>;
+    virtualizeRows?: boolean;
+    /** Breite des Charts. "auto" = 100 % des Eltern-Containers. Standard: "100%". */
+    width?: number | string;
+    zoomable?: boolean;
     onAddTask?: (parentTask?: GanttTask) => void;
-    onEditTask?: (task: GanttTask) => void;
     onDeleteTask?: (task: GanttTask) => void;
+    onEditTask?: (task: GanttTask) => void;
+    onMilestoneClick?: (task: GanttTask) => void;
     onStatusChange?: (task: GanttTask, status: GanttTaskStatus) => void;
+    onTaskClick?: (task: GanttTask) => void;
+    onTaskCreated?: (task: GanttTask) => void;
+    onTaskDeleted?: (taskId: string) => void;
     onTaskMoved?: (task: GanttTask, newStart: Date, newEnd: Date) => void;
     onTaskResized?: (task: GanttTask, newEnd: Date) => void;
     onTasksChange?: (tasks: GanttTask[]) => void;
-    onTaskCreated?: (task: GanttTask) => void;
     onTaskUpdated?: (task: GanttTask) => void;
-    onTaskDeleted?: (taskId: string) => void;
 };

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

@@ -0,0 +1,22 @@
+type DependencyLine = {
+    key: string;
+    d: string;
+};
+type GanttDependencyArrowsProps = {
+    dependencyLines: DependencyLine[];
+    todayX: number | null;
+    totalWidth: number;
+    height: number;
+    top: number;
+    arrowMarkerId: string;
+};
+/**
+ * SVG-Layer über allen Gantt-Balken. Zeichnet:
+ * - Z-förmige Abhängigkeitspfeile zwischen Vorgänger und Nachfolger
+ * - Vertikale Today-Line am heutigen Datum
+ *
+ * pointerEvents: none — Klicks auf Balken und Zeilen gehen durch.
+ * Farben werden intern via useTheme() / useGanttTheme() gelesen.
+ */
+export declare function GanttDependencyArrows({ dependencyLines, todayX, totalWidth, height, top, arrowMarkerId, }: GanttDependencyArrowsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,19 @@
+import type { GanttTaskNode, GanttTaskStatus } from "./GanttChart.types";
+type ContextMenuState = {
+    task: GanttTaskNode;
+    mouseX: number;
+    mouseY: number;
+};
+type GanttStatusContextMenuProps = {
+    contextMenu: ContextMenuState | null;
+    onClose: () => void;
+    /** Wird aufgerufen wenn der User einen Status wählt. Business-Logik (Store-Update,
+     *  Callbacks) bleibt in GanttTimeline — diese Komponente ist rein präsentational. */
+    onSelect: (task: GanttTaskNode, status: GanttTaskStatus) => void;
+};
+/**
+ * Rechtsklick-Kontextmenü für schnellen Statuswechsel eines Gantt-Balkens.
+ * Übersetzungen werden intern via useGanttTranslations() gelesen.
+ */
+export declare function GanttStatusContextMenu({ contextMenu, onClose, onSelect }: GanttStatusContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+type WeekendStrip = {
+    key: string;
+    left: number;
+};
+type GanttWeekendStripsProps = {
+    strips: WeekendStrip[];
+    totalWidth: number;
+    height: number;
+    top: number;
+};
+/**
+ * Zeichnet halbtransparente Hintergrundstreifen für Wochenend-Spalten
+ * in der Tages-Skala. Eigener Layer (pointerEvents: none) damit Klicks
+ * auf Balken und Zeilen durchgehen.
+ */
+export declare function GanttWeekendStrips({ strips, totalWidth, height, top }: GanttWeekendStripsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/gantt-chart/hooks/useGanttDrag.d.ts

@@ -0,0 +1,44 @@
+/**
+ * useGanttDrag — Kapselt die gesamte Drag & Drop / Resize / Progress-Logik des GanttCharts.
+ *
+ * Muster für komplexe Interaktions-Hooks (auch für zukünftige Komponenten):
+ *
+ * 1. STABLE CALLBACK REFS — Callbacks (onTaskMoved, onTaskResized, …) werden in Refs
+ *    gespiegelt. So können document-Event-Listener immer die aktuellen Props lesen,
+ *    ohne bei jeder Prop-Änderung neu registriert werden zu müssen.
+ *
+ * 2. ZWEI-EBENEN STATE — dragInitRef + activeDragRef halten stabile Werte (kein Re-render),
+ *    setActiveDrag(state) löst nur dann einen Re-render aus wenn die UI aktualisiert
+ *    werden soll (Balken-Position während des Ziehens). Dadurch kein unnötiges Rendering.
+ *
+ * 3. DOCUMENT-LEVEL LISTENERS — mousemove/mouseup auf document statt auf dem Element,
+ *    damit Drag auch funktioniert wenn der Mauszeiger den Balken verlässt.
+ *
+ * 4. SUPPRESS-CLICK — suppressClickRef verhindert dass ein onClick ausgelöst wird
+ *    wenn der User eigentlich gezogen hat (≥ 5px Bewegung).
+ */
+import type { GanttTask, GanttTaskNode } from "../GanttChart.types";
+import type { TimelineRange } from "../util/gantt-chart.util";
+export type DragType = "move" | "resize" | "progress";
+export type ActiveDrag = {
+    taskId: string;
+    type: DragType;
+    deltaDays: number;
+    newProgress?: number;
+};
+type UseGanttDragOptions = {
+    totalWidth: number;
+    displayRange: TimelineRange;
+    onTaskMoved?: (task: GanttTask, newStart: Date, newEnd: Date) => void;
+    onTaskResized?: (task: GanttTask, newEnd: Date) => void;
+    onTasksChange?: (tasks: GanttTask[]) => void;
+};
+type UseGanttDragReturn = {
+    activeDrag: ActiveDrag | null;
+    suppressClickRef: React.MutableRefObject<boolean>;
+    handleBarMouseDown: (e: React.MouseEvent, task: GanttTaskNode, type: DragType) => void;
+    handleProgressMouseDown: (e: React.MouseEvent, task: GanttTaskNode, initialProgress: number, barWidthPx: number) => void;
+    formatDragDate: (d: Date) => string;
+};
+export declare function useGanttDrag({ totalWidth, displayRange, onTaskMoved, onTaskResized, onTasksChange, }: UseGanttDragOptions): UseGanttDragReturn;
+export {};

package/dist/components/json-editor/JsonEditor.types.d.ts

@@ -32,29 +32,29 @@ export type JsonEditorHighlightColors = {
     null?: string;
 };
 export type JsonEditorProps = {
-    value?: string;
-    onChange?: (json: string) => void;
-    onValidChange?: (isValid: boolean) => void;
-    placeholder?: string;
-    /** Total height (toolbar + content). Numbers → px. "auto" → fills surrounding flex container. */
-    height?: number | string;
-    /** Width. Numbers → px. Default → 100%. */
-    width?: number | string;
     disabled?: boolean;
-    readonly?: boolean;
     error?: boolean;
+    /** Total height (toolbar + content). Numbers → px. "auto" → fills surrounding flex container. */
+    height?: number | string;
     helperText?: string;
-    /** Name for native form submission via hidden input. */
-    name?: string;
+    highlightColors?: JsonEditorHighlightColors;
     /** Indentation spaces used by the Format button. Default: 2. */
     indent?: number;
-    showLineNumbers?: boolean;
+    /** Name for native form submission via hidden input. */
+    name?: string;
+    placeholder?: string;
+    readonly?: boolean;
     showLineColumn?: boolean;
+    showLineNumbers?: boolean;
     /** Shows a Valid / Invalid JSON indicator in the footer. */
     showValidation?: boolean;
     toolbarConfig?: JsonEditorToolbarConfig;
     translation?: Partial<JsonEditorTranslation>;
-    highlightColors?: JsonEditorHighlightColors;
+    value?: string;
+    /** Width. Numbers → px. Default → 100%. */
+    width?: number | string;
     onBlur?: () => void;
+    onChange?: (json: string) => void;
     onFocus?: () => void;
+    onValidChange?: (isValid: boolean) => void;
 };

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

@@ -0,0 +1,12 @@
+type PasswordStrengthBarProps = {
+    percent: number;
+    color: string;
+    ariaLabel: string;
+};
+/**
+ * Visuelle Fortschrittsleiste für die Passwortstärke.
+ * role="progressbar" macht die Anzeige für Screenreader zugänglich —
+ * ohne aria-Attribute wäre sie für assistive Technologien unsichtbar.
+ */
+export declare function PasswordStrengthBar({ percent, color, ariaLabel }: PasswordStrengthBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -37,20 +37,20 @@ export declare const DEFAULT_PASSWORD_TRANSLATIONS: PasswordStrengthMeterTransla
 export declare const DEFAULT_METER_COLORS: MeterColors;
 export declare const DEFAULT_CHECK_COLORS: CheckColors;
 export type PasswordStrengthMeterProps = {
-    value?: string;
-    name?: string;
-    inputRef?: React.Ref<HTMLInputElement>;
+    autoComplete?: string;
+    checkColors?: CheckColors;
     disabled?: boolean;
     error?: boolean;
     helperText?: string;
-    autoComplete?: string;
-    showPasswordAdornment?: boolean;
-    showMeter?: boolean;
-    showSummary?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
     inputSize?: "small" | "medium";
-    translation?: Partial<PasswordStrengthMeterTranslation>;
     meterColors?: Partial<MeterColors>;
+    name?: string;
     passwordMinLength?: number;
-    checkColors?: CheckColors;
+    showMeter?: boolean;
+    showPasswordAdornment?: boolean;
+    showSummary?: boolean;
+    translation?: Partial<PasswordStrengthMeterTranslation>;
+    value?: string;
     onPasswordChange?: (password: string, strengthResult: StrengthResult) => void;
 };

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

@@ -1,2 +1,2 @@
 import { type RichTextEditorProps } from "./RichTextEditor.types";
-export declare function RichTextEditor({ value, onChange, placeholder, outputFormat, height, width, showCharacterCount, maxCharacters, toolbarConfig, disabled, readonly, name, error, helperText, translation, onBlur, onFocus, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextEditor({ disabled, error, height, helperText, maxCharacters, name, placeholder, readonly, showCharacterCount, showToolbar, showWordCount, toolbarConfig, translation, value, width, onBlur, onChange, onFocus, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-export type RichTextEditorOutputFormat = "html" | "json";
 export type RichTextEditorToolbarConfig = {
     showBold?: boolean;
     showItalic?: boolean;
@@ -17,6 +16,8 @@ export type RichTextEditorToolbarConfig = {
     showHighlight?: boolean;
     showUndoRedo?: boolean;
     showClearFormat?: boolean;
+    /** Fullscreen-Button in der Toolbar — standardmäßig deaktiviert (opt-in) */
+    showFullscreenButton?: boolean;
 };
 export declare const DEFAULT_RICH_TEXT_EDITOR_TOOLBAR_CONFIG: Required<RichTextEditorToolbarConfig>;
 export type RichTextEditorTranslation = {
@@ -47,26 +48,35 @@ export type RichTextEditorTranslation = {
     linkDialogRemove: string;
     characterCount: string;
     characterCountMax: string;
+    /** Wörter-Zähler im Footer, z.B. "{count} words" */
+    wordCount: string;
+    /** Tooltip für den Fullscreen-Button */
+    fullscreen: string;
+    /** Tooltip für den Exit-Fullscreen-Button */
+    exitFullscreen: string;
 };
 export declare const DEFAULT_RICH_TEXT_EDITOR_TRANSLATION: RichTextEditorTranslation;
 export type RichTextEditorProps = {
-    value?: string;
-    onChange?: (value: string) => void;
-    placeholder?: string;
-    outputFormat?: RichTextEditorOutputFormat;
+    disabled?: boolean;
+    error?: boolean;
     /** Gesamthöhe des Editors (Toolbar + Inhalt). Zahlen → px. "auto" → füllt den umgebenden Flex-Container. */
     height?: number | string;
-    /** Breite des Editors. Zahlen → px. "auto" oder leer → 100% des Elternelements. */
-    width?: number | string;
-    showCharacterCount?: boolean;
+    helperText?: string;
     maxCharacters?: number;
-    toolbarConfig?: RichTextEditorToolbarConfig;
-    disabled?: boolean;
-    readonly?: boolean;
     name?: string;
-    error?: boolean;
-    helperText?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    showCharacterCount?: boolean;
+    /** Blendet die Toolbar aus ohne den Editor in den readonly-Modus zu versetzen */
+    showToolbar?: boolean;
+    /** Zeigt einen Wörter-Zähler im Footer an */
+    showWordCount?: boolean;
+    toolbarConfig?: RichTextEditorToolbarConfig;
     translation?: Partial<RichTextEditorTranslation>;
+    value?: string;
+    /** Breite des Editors. Zahlen → px. "auto" oder leer → 100% des Elternelements. */
+    width?: number | string;
     onBlur?: () => void;
+    onChange?: (value: string) => void;
     onFocus?: () => void;
 };

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

@@ -5,7 +5,9 @@ type RichTextEditorFooterProps = {
     showCharacterCount?: boolean;
     charCount: number;
     maxCharacters?: number;
+    showWordCount?: boolean;
+    wordCount: number;
     translation: RichTextEditorTranslation;
 };
-export declare function RichTextEditorFooter({ helperText, error, showCharacterCount, charCount, maxCharacters, translation: t, }: RichTextEditorFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextEditorFooter({ helperText, error, showCharacterCount, charCount, maxCharacters, showWordCount, wordCount, translation: t, }: RichTextEditorFooterProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,8 @@ type RichTextEditorToolbarProps = {
     toolbarConfig: Required<RichTextEditorToolbarConfig>;
     translation: RichTextEditorTranslation;
     disabled?: boolean;
+    isFullscreen: boolean;
+    onToggleFullscreen: () => void;
 };
-export declare function RichTextEditorToolbar({ editor, toolbarConfig: tc, translation: t, disabled, }: RichTextEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextEditorToolbar({ editor, toolbarConfig: tc, translation: t, disabled, isFullscreen, onToggleFullscreen, }: RichTextEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/shared/ToolbarButton.d.ts

@@ -0,0 +1,13 @@
+export type ToolbarButtonProps = {
+    label: string;
+    icon: React.ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    disabled?: boolean;
+};
+/**
+ * Gemeinsamer Toolbar-Button für SqlEditor, JsonEditor und RichTextEditor.
+ * Tooltip mit Arrow, kleines Icon-Format, optionaler Active-State (primary color).
+ * onMouseDown preventDefault verhindert Fokus-Verlust im Editor beim Klick.
+ */
+export declare function ToolbarButton({ label, icon, onClick, active, disabled }: ToolbarButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/normalizeSize.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Wandelt numerische Strings in Zahlen um (für Storybook-Controls),
+ * lässt alle anderen Werte unverändert durch.
+ *
+ * Beispiele:
+ *   "300"  → 300
+ *   "auto" → "auto"
+ *   300    → 300
+ *   undefined → undefined
+ */
+export declare function normalizeSize(val: number | string | undefined): number | string | undefined;

package/dist/components/sql-editor/SqlEditor.types.d.ts

@@ -45,29 +45,29 @@ export type SqlEditorHighlightColors = {
     identifier?: string;
 };
 export type SqlEditorProps = {
-    value?: string;
-    onChange?: (sql: string) => void;
-    placeholder?: string;
-    /** Total height (toolbar + content). Numbers → px. "auto" → fills surrounding flex container. */
-    height?: number | string;
-    /** Width. Numbers → px. Default → 100%. */
-    width?: number | string;
+    dialect?: SqlEditorDialect;
     disabled?: boolean;
-    readonly?: boolean;
     error?: boolean;
+    /** Total height (toolbar + content). Numbers → px. "auto" → fills surrounding flex container. */
+    height?: number | string;
     helperText?: string;
+    highlightColors?: SqlEditorHighlightColors;
     /** Name for native form submission via hidden input. */
     name?: string;
-    dialect?: SqlEditorDialect;
-    showLineNumbers?: boolean;
-    showLineColumn?: boolean;
+    placeholder?: string;
+    readonly?: boolean;
+    schema?: SqlSchema;
     showErrorCount?: boolean;
+    showLineColumn?: boolean;
+    showLineNumbers?: boolean;
     toolbarConfig?: SqlEditorToolbarConfig;
     translation?: Partial<SqlEditorTranslation>;
-    highlightColors?: SqlEditorHighlightColors;
-    schema?: SqlSchema;
-    onExecute?: (sql: string) => void;
-    onLint?: (sql: string) => Promise<SqlLintError[]> | SqlLintError[];
+    value?: string;
+    /** Width. Numbers → px. Default → 100%. */
+    width?: number | string;
     onBlur?: () => void;
+    onChange?: (sql: string) => void;
+    onExecute?: (sql: string) => void;
     onFocus?: () => void;
+    onLint?: (sql: string) => Promise<SqlLintError[]> | SqlLintError[];
 };

package/dist/components/tag-selection/TagSelection.types.d.ts

@@ -19,23 +19,23 @@ export type TagSelectionTranslation = {
 };
 export declare const DEFAULT_TAG_SELECTION_TRANSLATION: TagSelectionTranslation;
 export type TagSelectionProps = {
-    tags: TagSelectionItem[];
-    showSelectedTags?: boolean;
-    showSelectedTagsLabel?: boolean;
-    showAutoComplete?: boolean;
-    translation?: Partial<TagSelectionTranslation>;
-    inputSize?: "small" | "medium";
+    allowCreate?: boolean;
     chipSize?: "small" | "medium";
     disabled?: boolean;
+    inputSize?: "small" | "medium";
+    listboxMaxHeight?: number;
     loading?: boolean;
     maxTags?: number;
-    allowCreate?: boolean;
     maxVisibleChips?: number;
     popoverPlacement?: "top" | "bottom";
-    listboxMaxHeight?: number;
-    onTagSelect?: (tag: TagSelectionItem, selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
-    onTagDelete?: (tag: TagSelectionItem, selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
-    onTagsChange?: (selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
+    showAutoComplete?: boolean;
+    showSelectedTags?: boolean;
+    showSelectedTagsLabel?: boolean;
+    tags: TagSelectionItem[];
+    translation?: Partial<TagSelectionTranslation>;
     onSearchChange?: (searchValue: string) => void;
     onTagCreate?: (label: string, color: TagColor) => void;
+    onTagDelete?: (tag: TagSelectionItem, selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
+    onTagSelect?: (tag: TagSelectionItem, selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
+    onTagsChange?: (selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
 };