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

package/README.de.md

@@ -10,13 +10,13 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 
 | Komponente | Beschreibung | Docs |
 |---|---|---|
-| [`ConfirmDialog`](#confirmdialog) | Deklarativer Async-Bestätigungs-Dialog — `await confirm({ title, severity })` von überall in der App | [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) |
+| [`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 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) |
+| [`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 +62,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 +81,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 +113,7 @@ import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 
 <PasswordStrengthMeter
   passwordMinLength={10}
+  showSegmentedBar
   onPasswordChange={(password, result) => console.log(result.score)}
 />
 ```
@@ -145,6 +146,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 +162,7 @@ import { JsonEditor } from '@thebuoyant-tsdev/mui-ts-library';
 <JsonEditor
   placeholder="JSON eingeben …"
   showValidation
+  showMinimap
   onChange={(json) => console.log(json)}
 />
 ```

package/README.md

@@ -10,13 +10,13 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 
 | Component | Description | Docs |
 |---|---|---|
-| [`ConfirmDialog`](#confirmdialog) | Declarative async confirmation dialog — `await confirm({ title, severity })` from anywhere in the app | [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) |
+| [`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, 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) |
+| [`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 +62,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 +81,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 +113,7 @@ import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 
 <PasswordStrengthMeter
   passwordMinLength={10}
+  showSegmentedBar
   onPasswordChange={(password, result) => console.log(result.score)}
 />
 ```
@@ -145,6 +146,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 +162,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

@@ -8,6 +8,8 @@ export declare const DEFAULT_CONFIRM_DIALOG_TRANSLATION: ConfirmDialogTranslatio
 export type ConfirmDialogOptions = {
     cancelLabel?: string;
     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";

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;

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

@@ -46,6 +46,8 @@ export type JsonEditorProps = {
     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;

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,9 +36,19 @@ 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 = {
     autoComplete?: string;
     checkColors?: CheckColors;
+    /** Additional custom requirements shown alongside the built-in ones. */
+    customRequirements?: CustomRequirement[];
     disabled?: boolean;
     error?: boolean;
     helperText?: string;
@@ -50,6 +60,8 @@ export type PasswordStrengthMeterProps = {
     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/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 {};