@thebuoyant-tsdev/mui-ts-library 1.3.2 → 2.0.0

package/README.de.md

@@ -4,19 +4,21 @@
 
 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/)** — interaktive Demos für jede Komponente und jedes Feature, immer aktuell mit `main`.
+
 ---
 
 ## Komponenten
 
 | Komponente | Beschreibung | Docs |
 |---|---|---|
-| [`ConfirmDialog`](#confirmdialog) | Deklarativer Async-Bestätigungs-Dialog — `await confirm({ title, severity })` von überall in der App | [Vollständiges Manual →](user-manuals/ConfirmDialog.de.md) |
-| [`GanttChart`](#ganttchart) | Projekt-Timeline mit hierarchischen Aufgaben, Meilensteinen, Drag & Drop, Zoom und integrierten CRUD-Dialogen | [Vollständiges Manual →](user-manuals/GanttChart.de.md) |
+| [`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) |
 | [`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) |
-| [`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) |
+| [`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) |
+| [`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) |
 
 ---
 
@@ -62,7 +64,7 @@ import { ConfirmDialogProvider, useConfirm } from '@thebuoyant-tsdev/mui-ts-libr
 
 // Überall innerhalb der App
 const confirm = useConfirm();
-const ok = await confirm({ title: 'Eintrag löschen?', severity: 'error', confirmLabel: 'Löschen' });
+const ok = await confirm({ title: 'Eintrag löschen?', severity: 'error', confirmLabel: 'Löschen', countdown: 10 });
 if (ok) handleDelete();
 ```
 
@@ -81,7 +83,7 @@ const tasks: GanttTask[] = [
   { id: '2', name: 'Go-Live', status: 'planned', startDate: new Date('2026-03-31'), endDate: new Date('2026-03-31'), isMilestone: true },
 ];
 
-<GanttChart tasks={tasks} timeScale="months" height={500} draggable resizable onTasksChange={save} />
+<GanttChart tasks={tasks} timeScale="months" height={500} draggable resizable zoomable onTasksChange={save} />
 ```
 
 → [Vollständige Dokumentation](user-manuals/GanttChart.de.md)
@@ -113,6 +115,7 @@ import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 
 <PasswordStrengthMeter
   passwordMinLength={10}
+  showSegmentedBar
   onPasswordChange={(password, result) => console.log(result.score)}
 />
 ```
@@ -145,6 +148,7 @@ import { SqlEditor } from '@thebuoyant-tsdev/mui-ts-library';
   placeholder="SQL-Abfrage eingeben …"
   dialect="postgresql"
   onChange={(sql) => console.log(sql)}
+  onExecute={(sql) => query(sql)}
 />
 ```
 
@@ -160,6 +164,7 @@ import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 <JsonEditor
   placeholder="JSON eingeben …"
   showValidation
+  showMinimap
   onChange={(json) => console.log(json)}
 />
 ```

package/README.md

@@ -4,19 +4,21 @@
 
 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/)** — interactive demos for every component and feature, always up to date with `main`.
+
 ---
 
 ## Components
 
 | Component | Description | Docs |
 |---|---|---|
-| [`ConfirmDialog`](#confirmdialog) | Declarative async confirmation dialog — `await confirm({ title, severity })` from anywhere in the app | [Full Manual →](user-manuals/ConfirmDialog.md) |
-| [`GanttChart`](#ganttchart) | Project timeline with hierarchical tasks, milestones, drag & drop, zoom, and built-in CRUD dialogs | [Full Manual →](user-manuals/GanttChart.md) |
+| [`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) |
 | [`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) |
-| [`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) |
+| [`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) |
+| [`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) |
 
 ---
 
@@ -62,7 +64,7 @@ import { ConfirmDialogProvider, useConfirm } from '@thebuoyant-tsdev/mui-ts-libr
 
 // Anywhere inside
 const confirm = useConfirm();
-const ok = await confirm({ title: 'Delete entry?', severity: 'error', confirmLabel: 'Delete' });
+const ok = await confirm({ title: 'Delete entry?', severity: 'error', confirmLabel: 'Delete', countdown: 10 });
 if (ok) handleDelete();
 ```
 
@@ -81,7 +83,7 @@ const tasks: GanttTask[] = [
   { id: '2', name: 'Go-Live', status: 'planned', startDate: new Date('2026-03-31'), endDate: new Date('2026-03-31'), isMilestone: true },
 ];
 
-<GanttChart tasks={tasks} timeScale="months" height={500} draggable resizable onTasksChange={save} />
+<GanttChart tasks={tasks} timeScale="months" height={500} draggable resizable zoomable onTasksChange={save} />
 ```
 
 → [Full documentation](user-manuals/GanttChart.md)
@@ -113,6 +115,7 @@ import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 
 <PasswordStrengthMeter
   passwordMinLength={10}
+  showSegmentedBar
   onPasswordChange={(password, result) => console.log(result.score)}
 />
 ```
@@ -145,6 +148,7 @@ import { SqlEditor } from '@thebuoyant-tsdev/mui-ts-library';
   placeholder="Enter SQL query…"
   dialect="postgresql"
   onChange={(sql) => console.log(sql)}
+  onExecute={(sql) => runQuery(sql)}
 />
 ```
 
@@ -160,6 +164,7 @@ import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 <JsonEditor
   placeholder="Enter JSON…"
   showValidation
+  showMinimap
   onChange={(json) => console.log(json)}
 />
 ```

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

@@ -6,14 +6,16 @@ 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;
+    /** Auto-confirm after this many seconds. Shows a live countdown in the confirm button. */
+    countdown?: number;
+    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/GanttChart.types.d.ts

@@ -31,6 +31,7 @@ export type GanttTranslations = {
     statusDone: string;
     statusBlocked: string;
     weekColumnPrefix: string;
+    todayLabel: string;
     dateLocale: string;
     dialogAddTitle: string;
     dialogEditTitle: string;
@@ -79,41 +80,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/GanttTimelineHeader.d.ts

@@ -12,6 +12,10 @@ export type HeaderGroup = {
 type GanttTimelineHeaderProps = {
     columns: HeaderColumn[];
     groups?: HeaderGroup[];
+    todayX?: number | null;
+    todayLabel?: string;
+    todayTooltip?: string;
+    todayColor?: string;
 };
-export declare function GanttTimelineHeader({ columns, groups }: GanttTimelineHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function GanttTimelineHeader({ columns, groups, todayX, todayLabel, todayTooltip, todayColor, }: GanttTimelineHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,2 +1,2 @@
 import { type JsonEditorProps } from "./JsonEditor.types";
-export declare function JsonEditor({ value, onChange, onValidChange, placeholder, height, width, disabled, readonly, error, helperText, name, indent, showLineNumbers, showLineColumn, showValidation, toolbarConfig, translation, highlightColors, onBlur, onFocus, }: JsonEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonEditor({ value, onChange, onValidChange, placeholder, height, width, disabled, readonly, error, helperText, name, indent, showLineNumbers, showLineColumn, showMinimap, showValidation, toolbarConfig, translation, highlightColors, onBlur, onFocus, }: JsonEditorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -32,29 +32,31 @@ 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 scaled-down document overview (minimap) on the right side of the editor. */
+    showMinimap?: 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/json-editor/JsonEditorContent.d.ts

@@ -7,11 +7,12 @@ type JsonEditorContentProps = {
     disabled?: boolean;
     readonly?: boolean;
     showLineNumbers?: boolean;
+    showMinimap?: boolean;
     highlightColors?: JsonEditorHighlightColors;
     onViewReady: (view: EditorView | null) => void;
     onCursorChange: (line: number, col: number) => void;
     onBlur?: () => void;
     onFocus?: () => void;
 };
-export declare function JsonEditorContent({ value, onChange, placeholder, disabled, readonly, showLineNumbers, highlightColors, onViewReady, onCursorChange, onBlur, onFocus, }: JsonEditorContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonEditorContent({ value, onChange, placeholder, disabled, readonly, showLineNumbers, showMinimap, highlightColors, onViewReady, onCursorChange, onBlur, onFocus, }: JsonEditorContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,11 +2,13 @@ type PasswordStrengthBarProps = {
     percent: number;
     color: string;
     ariaLabel: string;
+    /** When true, renders 4 separate animated segments instead of a single bar. */
+    segments?: boolean;
 };
 /**
  * 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 declare function PasswordStrengthBar({ percent, color, ariaLabel, segments }: PasswordStrengthBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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, showPasswordAdornment, showMeter, showSummary, inputSize, translation, meterColors, passwordMinLength, checkColors, onPasswordChange, }: PasswordStrengthMeterProps): import("react/jsx-runtime").JSX.Element;
+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;

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

@@ -36,21 +36,33 @@ export type PasswordStrengthMeterTranslation = {
 export declare const DEFAULT_PASSWORD_TRANSLATIONS: PasswordStrengthMeterTranslation;
 export declare const DEFAULT_METER_COLORS: MeterColors;
 export declare const DEFAULT_CHECK_COLORS: CheckColors;
+/**
+ * A single custom password requirement.
+ * `fulfilled` can be a static boolean or a function evaluated on the current password.
+ */
+export type CustomRequirement = {
+    label: string;
+    fulfilled: boolean | ((password: string) => boolean);
+};
 export type PasswordStrengthMeterProps = {
-    value?: string;
-    name?: string;
-    inputRef?: React.Ref<HTMLInputElement>;
+    autoComplete?: string;
+    checkColors?: CheckColors;
+    /** Additional custom requirements shown alongside the built-in ones. */
+    customRequirements?: CustomRequirement[];
     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;
+    /** 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;
 };

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/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/sql-editor/SqlEditorContent.d.ts

@@ -12,6 +12,7 @@ type SqlEditorContentProps = {
     stringColor?: string;
     identifierColor?: string;
     schema?: SqlSchema;
+    onExecute?: (sql: string) => void;
     onLint?: (sql: string) => Promise<SqlLintError[]> | SqlLintError[];
     onDiagnosticsChange?: (count: number) => void;
     onViewReady: (view: EditorView | null) => void;
@@ -19,5 +20,5 @@ type SqlEditorContentProps = {
     onBlur?: () => void;
     onFocus?: () => void;
 };
-export declare function SqlEditorContent({ value, onChange, placeholder, disabled, readonly, showLineNumbers, dialect, keywordColor, stringColor, identifierColor, schema, onLint, onDiagnosticsChange, onViewReady, onCursorChange, onBlur, onFocus, }: SqlEditorContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function SqlEditorContent({ value, onChange, placeholder, disabled, readonly, showLineNumbers, dialect, keywordColor, stringColor, identifierColor, schema, onExecute, onLint, onDiagnosticsChange, onViewReady, onCursorChange, onBlur, onFocus, }: SqlEditorContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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;
 };