@efa-one/sdk 1.24.0 → 1.26.0

package/README.md

@@ -14,7 +14,7 @@ sub-paths — this keeps `express` out of the frontend and `react` out of the ba
 |---|---|---|
 | `@efa-one/sdk/backend` | Node/Express | Auth + token exchange (`requireAuth`, `createExchangeRouter`, `requireInternalOrAuth` …), health router, service discovery + gateway client (`serviceClient`, `resolveService`), clients for audit/reporting/mail/notifications, permission resolution/registration (`getUserPermissions`, `registerPermissions`, `checkPermission`), platform-admin check (`isPlatformAdmin` — top permission `efa-all`, legacy `converge-admin` accepted until Q1-2027; `requireAdmin`/`requireAdminOrPermission` use it), capability registry (`registerApiMetadata`), backend i18n |
 | `@efa-one/sdk/frontend` | Browser/React | postMessage IPC (`registerAppInfo`, `sendAtStart`, `navigateToApp`, `notifyRouteChange` …), react-i18next factory (`initI18n`), platform-admin check (`isPlatformAdmin`, `PLATFORM_ADMIN_PERMISSIONS`), `DevHeader` |
-| `@efa-one/sdk/frontend/ui` | Browser/React | The efa-one design-system kit: `Button`, `Input`, `Badge`, `Alert`, `Dialog`, `DropdownMenu`, `Tooltip`, `EmptyState`, `Skeleton`, `RecordDialog`, and the **`DataTable`** (sortable/filterable/groupable list with draggable, resizable columns, a per-user persisted view and CSV/Excel export of the current view; reflows to stacked cards below 640px). Also exports `useIsMobile` — the platform-wide 640px breakpoint hook. Ship its companion CSS once: `import '@efa-one/sdk/frontend/ui/styles.css'` |
+| `@efa-one/sdk/frontend/ui` | Browser/React | The efa-one design-system kit: `Button`, `Input`, `Switch` (on/off settings — checkboxes only for row selection and confirmations), `Badge`, `Alert`, `Dialog`, `DropdownMenu`, `Tooltip`, `EmptyState`, `Skeleton`, `RecordDialog` with `useRecords` (ready-made list/create/edit/delete flow) and `ConfirmDeleteDialog`, and the **`DataTable`** (sortable/filterable/groupable list with draggable, resizable columns, a per-user persisted view and CSV/Excel export of the current view; reflows to stacked cards below 640px). Also exports `useIsMobile` — the platform-wide 640px breakpoint hook. Ship its companion CSS once: `import '@efa-one/sdk/frontend/ui/styles.css'` |
 | `@efa-one/sdk/frontend/format` | Browser | Platform-wide date/time display — `formatDate` (`01.09.2026`), `formatDateTime` (`01.09.2026, 11:05`), `formatTime`, `formatFileStamp`, `localeForLanguage`. Always use these instead of `toLocaleDateString`/`toLocaleString`: without an options object those render `1.9.2026`, and without a locale argument they follow the browser language (`9/1/2026`) |
 | `@efa-one/sdk/frontend/viewPreferences` | Browser/React | Persistence seam for `DataTable` — `createViewPreferencesClient()` (standard `/api/view-preferences/:listId` adapter) + `useViewPreferences()` |
 
@@ -269,6 +269,34 @@ Excel export for such data. No backend or kernel change.
 - After the bump every dialog without `size` is 768 px wide. Give short confirmations
   ("Wirklich löschen?") `size="sm"`.
 
+**1.25.0 — dismissible banners, top scrollbar.** No kernel or backend change.
+- Every `Alert` shows a close „×" top right by default. With `onDismiss` nothing
+  changes. Without it the banner hides itself and shows again when its text changes.
+  `dismissible={false}` removes the „×" for notices that must stay.
+- Messages from app state (errors, results) need `onDismiss`: without it, a closed
+  banner stays hidden when the app sets the same text again in one handler or when
+  the content is JSX. After the bump, add `onDismiss` (and `onErrorDismiss` on
+  `RecordDialog`) wherever such banners lack it.
+- `DataTable`: when the grid is wider than its container, a second horizontal
+  scrollbar sits above the table and scrolls in sync with the bottom one. Not on
+  mobile. The border moved to an outer wrapper.
+
+**1.26.0 — `useRecords`, `ConfirmDeleteDialog`, `Switch`.** No kernel or backend change.
+- `useRecords({ endpoint, apiBase, emptyForm, toForm, toPayload?, required?, validate? })`
+  runs the whole records flow: load the list, open for create (`openCreate`) or read
+  (`openRecord`), save (`POST <endpoint>` or `PUT <endpoint>/:id`, `updateMethod: 'PATCH'`
+  optional), delete after confirmation (`DELETE <endpoint>/:id`), reload after each write,
+  server messages `{ "error" }` as banner. Spread `dialogProps` into `RecordDialog` and
+  `deleteDialogProps` into `ConfirmDeleteDialog`. The logic itself is
+  `createRecordsController` (no React, for tests or other frameworks).
+- Use it instead of hand-written `save()` functions: one found in a generated app returned
+  early for `{ id: 'new' }`, so „Erstellen" never sent anything and no type check noticed.
+- `ConfirmDeleteDialog`: delete confirmation, `size="sm"`, error banner.
+- `RecordDialog` takes `readOnly` (no pencil, no „Bearbeiten“, e.g. without write
+  permission); `RecordDialogProps` is exported.
+- `Switch`/`SwitchControl` for on/off values (checkboxes only for row selection and
+  confirmations).
+
 **Next minor (planned 1.23.0, not yet released) — exchange, cookie and S2S hardening.**
 Needs a kernel with efaware/efa_kernel#106 and #107 first (gateway exchange token
 `gw: 'app'`, provenance `jti`, cookie filter). Then:

package/frontend/ui/Alert.d.ts

@@ -4,7 +4,10 @@ interface AlertProps {
     variant?: AlertVariant;
     children: React.ReactNode;
     onDismiss?: () => void;
+    dismissible?: boolean;
     className?: string;
 }
-export declare function Alert({ variant, children, onDismiss, className }: AlertProps): React.JSX.Element;
+export declare function alertContentKey(children: React.ReactNode): string | null;
+export declare function isAlertHidden(dismissedKey: string | null | undefined, contentKey: string | null): boolean;
+export declare function Alert({ variant, children, onDismiss, dismissible, className }: AlertProps): React.JSX.Element | null;
 export {};

package/frontend/ui/Alert.js

@@ -1,5 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { X } from 'lucide-react';
-export function Alert({ variant = 'error', children, onDismiss, className = '' }) {
-    return (_jsxs("div", { role: "alert", className: `shrink-0 flex items-start gap-2 border rounded-md px-4 py-3 text-sm font-medium alert-${variant} ${className}`, children: [_jsx("span", { className: "flex-1", children: children }), onDismiss && (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Meldung schlie\u00DFen", className: "shrink-0 -mr-1 p-0.5 rounded hover:bg-current/10 transition-colors", children: _jsx(X, { className: "w-4 h-4" }) }))] }));
+export function alertContentKey(children) {
+    return typeof children === 'string' || typeof children === 'number' ? String(children) : null;
+}
+export function isAlertHidden(dismissedKey, contentKey) {
+    return dismissedKey !== undefined && dismissedKey === contentKey;
+}
+export function Alert({ variant = 'error', children, onDismiss, dismissible = true, className = '' }) {
+    const [dismissedKey, setDismissedKey] = useState(undefined);
+    const contentKey = alertContentKey(children);
+    if (!onDismiss && isAlertHidden(dismissedKey, contentKey))
+        return null;
+    return (_jsxs("div", { role: "alert", className: `shrink-0 flex items-start gap-2 border rounded-md px-4 py-3 text-sm font-medium alert-${variant} ${className}`, children: [_jsx("span", { className: "flex-1 min-w-0", children: children }), dismissible && (_jsx("button", { type: "button", onClick: onDismiss ?? (() => setDismissedKey(contentKey)), "aria-label": "Meldung schlie\u00DFen", className: "shrink-0 -mr-1 p-0.5 rounded hover:bg-current/10 transition-colors", children: _jsx(X, { className: "w-4 h-4" }) }))] }));
 }

package/frontend/ui/ConfirmDeleteDialog.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ConfirmDeleteDialogProps {
+    open: boolean;
+    itemName?: string;
+    title?: string;
+    description?: string;
+    deleting?: boolean;
+    error?: string;
+    onErrorDismiss?: () => void;
+    onConfirm(): void | Promise<void>;
+    onCancel(): void;
+    labels?: {
+        cancel?: string;
+        confirm?: string;
+    };
+}
+export declare function ConfirmDeleteDialog({ open, itemName, title, description, deleting, error, onErrorDismiss, onConfirm, onCancel, labels, }: ConfirmDeleteDialogProps): React.JSX.Element;

package/frontend/ui/ConfirmDeleteDialog.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from './Dialog.js';
+import { Button } from './Button.js';
+import { Alert } from './Alert.js';
+export function ConfirmDeleteDialog({ open, itemName, title, description, deleting, error, onErrorDismiss, onConfirm, onCancel, labels, }) {
+    const text = description ?? (itemName ? `„${itemName}“ wird endgültig gelöscht.` : 'Der Eintrag wird endgültig gelöscht.');
+    return (_jsx(Dialog, { open: open, onOpenChange: (o) => {
+            if (!o)
+                onCancel();
+        }, title: title ?? 'Eintrag löschen?', size: "sm", banner: error ? _jsx(Alert, { variant: "error", onDismiss: onErrorDismiss, children: error }) : undefined, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: onCancel, disabled: !!deleting, children: labels?.cancel ?? 'Abbrechen' }), _jsx(Button, { variant: "danger", onClick: () => void onConfirm(), loading: !!deleting, children: labels?.confirm ?? 'Löschen' })] }), children: _jsx("p", { className: "text-sm text-[var(--color-text-secondary)]", children: text }) }));
+}

package/frontend/ui/DataTable.d.ts

@@ -89,4 +89,5 @@ interface RenderItem<T> {
 export declare function buildRenderItems<T>(rows: T[], groupBy: string[], columnsById: Map<string, ColumnDef<T>>, expandedGroups: Set<string> | 'all'): RenderItem<T>[];
 export declare function collectAllGroupKeys<T>(rows: T[], groupBy: string[], columnsById: Map<string, ColumnDef<T>>): string[];
 export declare function DataTable<T, K extends string | number>({ listId, rows, columns, rowKey, onRowClick, selection, initialPrefs, footer, groupsDefaultExpanded, persistence, exportable, exportFileName, }: DataTableProps<T, K>): React.ReactElement;
+export declare function topScrollbarWidth(gridWidth: number, viewportWidth: number): number | null;
 export {};

package/frontend/ui/DataTable.js

@@ -241,6 +241,7 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
     const [dragColumnId, setDragColumnId] = useState(null);
     const [dropTarget, setDropTarget] = useState(null);
     const containerRef = useRef(null);
+    const headerRef = useRef(null);
     const effectiveOrder = useMemo(() => reconcileOrder(columns, prefs.columnOrder), [columns, prefs.columnOrder]);
     const seenGroupKeysRef = useRef(new Set());
     useEffect(() => {
@@ -433,42 +434,85 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
             hasColumns: visibleColumns.some((c) => c.exportable !== false),
             run: runExport,
         } : undefined, columns: columns, prefs: prefs, setColumnVisible: setColumnVisible, moveColumn: moveColumn, reset: reset, groupBy: groupBy, addGroupBy: addGroupBy, removeGroupBy: removeGroupBy, moveGroupBy: moveGroupBy, clearGroupBy: clearGroupBy }));
-    return (_jsxs("div", { ref: containerRef, className: "border border-[var(--color-border)] overflow-x-auto", style: { '--dt-cols': gridTemplate }, children: [selection && selection.selected.size > 0 && (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-sm border-b border-[var(--color-border)]", style: { background: 'var(--color-surface-raised)' }, children: [_jsxs("span", { children: [selection.selected.size, " ausgew\u00E4hlt"] }), _jsx("button", { type: "button", className: "text-xs underline text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]", onClick: () => selection.onChange(new Set()), children: "Auswahl aufheben" }), _jsx("div", { className: "flex-1" }), selection.bulkActions] })), isMobile ? (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2 text-xs font-medium border-b border-[var(--color-border)]", style: { background: 'var(--color-surface-raised)' }, children: [selection && (_jsxs("label", { className: "flex items-center gap-2 py-2 pr-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", className: "w-5 h-5", checked: allSelected, onChange: toggleAll, "aria-label": "Alle ausw\u00E4hlen" }), _jsx("span", { className: "text-[var(--color-text-muted)]", children: "Alle" })] })), _jsx("div", { className: "flex-1" }), gearButton] })) : (_jsxs("div", { className: "grid items-center min-w-min px-3 py-2 text-xs font-medium border-b border-[var(--color-border)]", style: { gridTemplateColumns: 'var(--dt-cols)', background: 'var(--color-surface-raised)' }, children: [selection && (_jsx("input", { type: "checkbox", checked: allSelected, onChange: toggleAll, "aria-label": "Alle ausw\u00E4hlen" })), visibleColumns.map((col) => {
-                        const activeSort = prefs.sort?.columnId === col.id ? prefs.sort.direction : null;
-                        const filterValue = prefs.filters[col.id];
-                        const isFiltered = filterValue != null;
-                        return (_jsx(HeaderCell, { columnId: col.id, label: col.label, dragColumnId: dragColumnId, dropSide: dropTarget?.id === col.id ? dropTarget.side : null, onDragStart: () => setDragColumnId(col.id), onDragEnd: () => { setDragColumnId(null); setDropTarget(null); }, onDragOverSide: (side) => {
-                                if (dropTarget?.id !== col.id || dropTarget.side !== side)
-                                    setDropTarget({ id: col.id, side });
-                            }, onDrop: (sourceId, side) => {
-                                dropColumn(sourceId, col.id, side);
-                                setDragColumnId(null);
-                                setDropTarget(null);
-                            }, onResizePreview: (px) => previewColumnWidth(col.id, px), onResizeCommit: (px) => setColumnWidth(col.id, px), onResizeCancel: () => containerRef.current?.style.setProperty('--dt-cols', gridTemplate), hasCustomWidth: columnWidths[col.id] != null, children: _jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex items-center gap-1 min-w-0 px-1 py-0.5 hover:bg-[var(--color-surface)] text-left", style: { borderRadius: 'var(--border-radius-md)' }, children: [_jsx("span", { className: "min-w-0 truncate", children: col.label }), activeSort === 'asc' && _jsx(ChevronUp, { className: "w-3 h-3" }), activeSort === 'desc' && _jsx(ChevronDown, { className: "w-3 h-3" }), isFiltered && _jsx(Filter, { className: "w-3 h-3 signal-text-primary" })] }) }), _jsxs(DropdownMenu.Content, { className: "min-w-[220px] p-1", children: [col.sortable !== false && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu.Item, { onSelect: () => setSort(col.id, 'asc'), children: [_jsx(ArrowUp, { className: "w-4 h-4" }), "Sortieren A\u2192Z"] }), _jsxs(DropdownMenu.Item, { onSelect: () => setSort(col.id, 'desc'), children: [_jsx(ArrowDown, { className: "w-4 h-4" }), "Sortieren Z\u2192A"] }), activeSort && (_jsx(DropdownMenu.Item, { onSelect: clearSort, children: "Sortierung zur\u00FCcksetzen" })), _jsx(DropdownMenu.Separator, {})] })), groupBy.includes(col.id) ? (_jsxs(DropdownMenu.Item, { onSelect: () => removeGroupBy(col.id), children: [_jsx(Layers, { className: "w-4 h-4" }), "Gruppierung aufheben"] })) : (_jsxs(DropdownMenu.Item, { onSelect: () => addGroupBy(col.id), children: [_jsx(Layers, { className: "w-4 h-4" }), "Nach dieser Spalte gruppieren"] })), _jsx(DropdownMenu.Separator, {}), col.filter && (_jsx(FilterEditor, { column: col, value: filterValue, onChange: (v) => setFilter(col.id, v) })), columnWidths[col.id] != null && (_jsxs(DropdownMenu.Item, { onSelect: () => setColumnWidth(col.id, null), children: [_jsx(RotateCcw, { className: "w-4 h-4" }), "Standardbreite"] })), _jsxs(DropdownMenu.Item, { onSelect: () => setColumnVisible(col.id, false), variant: "danger", children: [_jsx(EyeOff, { className: "w-4 h-4" }), "Spalte ausblenden"] })] })] }) }, col.id));
-                    }), gearButton] })), sortedFilteredRows.length === 0 ? (_jsx("div", { className: "px-3 py-8 text-center text-sm text-[var(--color-text-muted)]", children: "Keine Eintr\u00E4ge" })) : (buildRenderItems(sortedFilteredRows, groupBy, columnsById, expandedGroups).map((item, idx) => {
-                if (item.kind === 'group') {
-                    const level = item.level ?? 0;
-                    const groupColLabel = columnsById.get(groupBy[level])?.label ?? '';
-                    return (_jsx("div", { className: "px-3 py-1.5 text-xs border-b border-[var(--color-border)] cursor-pointer select-none hover:bg-[var(--color-surface-raised)]", style: {
-                            background: 'var(--color-surface-raised)',
-                            paddingLeft: 12 + level * 18,
-                        }, onClick: () => toggleGroup(item.key), title: item.expanded ? 'Gruppe einklappen' : 'Gruppe ausklappen', children: _jsxs("div", { className: "flex items-center gap-2", children: [item.expanded
-                                    ? _jsx(ChevronDown, { className: "w-3.5 h-3.5 text-[var(--color-text-muted)]" })
-                                    : _jsx(ChevronRight, { className: "w-3.5 h-3.5 text-[var(--color-text-muted)]" }), _jsx("span", { className: "text-[var(--color-text-muted)] uppercase text-[10px]", children: groupColLabel }), _jsx("span", { className: "font-medium text-[var(--color-text-primary)]", children: item.label }), _jsxs("span", { className: "text-[var(--color-text-muted)]", children: ["(", item.count, ")"] })] }) }, `g:${item.key}`));
-                }
-                const row = item.row;
-                const key = rowKey(row);
-                const isChecked = selection?.selected.has(key) ?? false;
-                const rowIndent = groupBy.length > 0 ? 12 + groupBy.length * 18 : undefined;
-                if (isMobile) {
-                    return (_jsxs("div", { className: `flex flex-col gap-1.5 px-3 py-3 border-b border-[var(--color-border)] ${onRowClick ? 'cursor-pointer hover:bg-[var(--color-surface-raised)]' : ''}`, style: { background: isChecked ? 'rgba(99,102,241,0.07)' : undefined, paddingLeft: rowIndent }, onClick: () => onRowClick?.(row), children: [selection && (_jsxs("label", { className: "flex items-center gap-2 self-start py-1 pr-2 cursor-pointer", onClick: (e) => e.stopPropagation(), children: [_jsx("input", { type: "checkbox", className: "w-5 h-5", checked: isChecked, onChange: () => toggleOne(key), "aria-label": "Zeile ausw\u00E4hlen" }), _jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "Ausw\u00E4hlen" })] })), visibleColumns.map((col) => (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: col.label }), _jsx("div", { className: "min-w-0 break-words text-sm", children: col.cell ? col.cell(row) : formatCellValue(col, row) })] }, col.id)))] }, `r:${String(key)}:${idx}`));
-                }
-                return (_jsxs("div", { className: `grid items-center min-w-min px-3 py-2 text-sm border-b border-[var(--color-border)] ${onRowClick ? 'cursor-pointer hover:bg-[var(--color-surface-raised)]' : ''}`, style: {
-                        gridTemplateColumns: 'var(--dt-cols)',
-                        background: isChecked ? 'rgba(99,102,241,0.07)' : undefined,
-                        paddingLeft: rowIndent,
-                    }, onClick: () => onRowClick?.(row), children: [selection && (_jsx("input", { type: "checkbox", checked: isChecked, onChange: () => toggleOne(key), onClick: (e) => e.stopPropagation(), "aria-label": "Zeile ausw\u00E4hlen" })), visibleColumns.map((col) => (_jsx("div", { className: "min-w-0 truncate", children: col.cell ? col.cell(row) : formatCellValue(col, row) }, col.id))), _jsx("div", {})] }, `r:${String(key)}:${idx}`));
-            })), footer && (_jsx("div", { className: "px-3 py-2 text-xs text-[var(--color-text-muted)] border-t border-[var(--color-border)]", children: footer }))] }));
+    return (_jsxs("div", { className: "border border-[var(--color-border)]", children: [_jsx(TopScrollbar, { targetRef: containerRef, measureRef: headerRef, enabled: !isMobile }), _jsxs("div", { ref: containerRef, className: "overflow-x-auto", style: { '--dt-cols': gridTemplate }, children: [selection && selection.selected.size > 0 && (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-sm border-b border-[var(--color-border)]", style: { background: 'var(--color-surface-raised)' }, children: [_jsxs("span", { children: [selection.selected.size, " ausgew\u00E4hlt"] }), _jsx("button", { type: "button", className: "text-xs underline text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]", onClick: () => selection.onChange(new Set()), children: "Auswahl aufheben" }), _jsx("div", { className: "flex-1" }), selection.bulkActions] })), isMobile ? (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2 text-xs font-medium border-b border-[var(--color-border)]", style: { background: 'var(--color-surface-raised)' }, children: [selection && (_jsxs("label", { className: "flex items-center gap-2 py-2 pr-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", className: "w-5 h-5", checked: allSelected, onChange: toggleAll, "aria-label": "Alle ausw\u00E4hlen" }), _jsx("span", { className: "text-[var(--color-text-muted)]", children: "Alle" })] })), _jsx("div", { className: "flex-1" }), gearButton] })) : (_jsxs("div", { ref: headerRef, className: "grid items-center min-w-min px-3 py-2 text-xs font-medium border-b border-[var(--color-border)]", style: { gridTemplateColumns: 'var(--dt-cols)', background: 'var(--color-surface-raised)' }, children: [selection && (_jsx("input", { type: "checkbox", checked: allSelected, onChange: toggleAll, "aria-label": "Alle ausw\u00E4hlen" })), visibleColumns.map((col) => {
+                                const activeSort = prefs.sort?.columnId === col.id ? prefs.sort.direction : null;
+                                const filterValue = prefs.filters[col.id];
+                                const isFiltered = filterValue != null;
+                                return (_jsx(HeaderCell, { columnId: col.id, label: col.label, dragColumnId: dragColumnId, dropSide: dropTarget?.id === col.id ? dropTarget.side : null, onDragStart: () => setDragColumnId(col.id), onDragEnd: () => { setDragColumnId(null); setDropTarget(null); }, onDragOverSide: (side) => {
+                                        if (dropTarget?.id !== col.id || dropTarget.side !== side)
+                                            setDropTarget({ id: col.id, side });
+                                    }, onDrop: (sourceId, side) => {
+                                        dropColumn(sourceId, col.id, side);
+                                        setDragColumnId(null);
+                                        setDropTarget(null);
+                                    }, onResizePreview: (px) => previewColumnWidth(col.id, px), onResizeCommit: (px) => setColumnWidth(col.id, px), onResizeCancel: () => containerRef.current?.style.setProperty('--dt-cols', gridTemplate), hasCustomWidth: columnWidths[col.id] != null, children: _jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex items-center gap-1 min-w-0 px-1 py-0.5 hover:bg-[var(--color-surface)] text-left", style: { borderRadius: 'var(--border-radius-md)' }, children: [_jsx("span", { className: "min-w-0 truncate", children: col.label }), activeSort === 'asc' && _jsx(ChevronUp, { className: "w-3 h-3" }), activeSort === 'desc' && _jsx(ChevronDown, { className: "w-3 h-3" }), isFiltered && _jsx(Filter, { className: "w-3 h-3 signal-text-primary" })] }) }), _jsxs(DropdownMenu.Content, { className: "min-w-[220px] p-1", children: [col.sortable !== false && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu.Item, { onSelect: () => setSort(col.id, 'asc'), children: [_jsx(ArrowUp, { className: "w-4 h-4" }), "Sortieren A\u2192Z"] }), _jsxs(DropdownMenu.Item, { onSelect: () => setSort(col.id, 'desc'), children: [_jsx(ArrowDown, { className: "w-4 h-4" }), "Sortieren Z\u2192A"] }), activeSort && (_jsx(DropdownMenu.Item, { onSelect: clearSort, children: "Sortierung zur\u00FCcksetzen" })), _jsx(DropdownMenu.Separator, {})] })), groupBy.includes(col.id) ? (_jsxs(DropdownMenu.Item, { onSelect: () => removeGroupBy(col.id), children: [_jsx(Layers, { className: "w-4 h-4" }), "Gruppierung aufheben"] })) : (_jsxs(DropdownMenu.Item, { onSelect: () => addGroupBy(col.id), children: [_jsx(Layers, { className: "w-4 h-4" }), "Nach dieser Spalte gruppieren"] })), _jsx(DropdownMenu.Separator, {}), col.filter && (_jsx(FilterEditor, { column: col, value: filterValue, onChange: (v) => setFilter(col.id, v) })), columnWidths[col.id] != null && (_jsxs(DropdownMenu.Item, { onSelect: () => setColumnWidth(col.id, null), children: [_jsx(RotateCcw, { className: "w-4 h-4" }), "Standardbreite"] })), _jsxs(DropdownMenu.Item, { onSelect: () => setColumnVisible(col.id, false), variant: "danger", children: [_jsx(EyeOff, { className: "w-4 h-4" }), "Spalte ausblenden"] })] })] }) }, col.id));
+                            }), gearButton] })), sortedFilteredRows.length === 0 ? (_jsx("div", { className: "px-3 py-8 text-center text-sm text-[var(--color-text-muted)]", children: "Keine Eintr\u00E4ge" })) : (buildRenderItems(sortedFilteredRows, groupBy, columnsById, expandedGroups).map((item, idx) => {
+                        if (item.kind === 'group') {
+                            const level = item.level ?? 0;
+                            const groupColLabel = columnsById.get(groupBy[level])?.label ?? '';
+                            return (_jsx("div", { className: "px-3 py-1.5 text-xs border-b border-[var(--color-border)] cursor-pointer select-none hover:bg-[var(--color-surface-raised)]", style: {
+                                    background: 'var(--color-surface-raised)',
+                                    paddingLeft: 12 + level * 18,
+                                }, onClick: () => toggleGroup(item.key), title: item.expanded ? 'Gruppe einklappen' : 'Gruppe ausklappen', children: _jsxs("div", { className: "flex items-center gap-2", children: [item.expanded
+                                            ? _jsx(ChevronDown, { className: "w-3.5 h-3.5 text-[var(--color-text-muted)]" })
+                                            : _jsx(ChevronRight, { className: "w-3.5 h-3.5 text-[var(--color-text-muted)]" }), _jsx("span", { className: "text-[var(--color-text-muted)] uppercase text-[10px]", children: groupColLabel }), _jsx("span", { className: "font-medium text-[var(--color-text-primary)]", children: item.label }), _jsxs("span", { className: "text-[var(--color-text-muted)]", children: ["(", item.count, ")"] })] }) }, `g:${item.key}`));
+                        }
+                        const row = item.row;
+                        const key = rowKey(row);
+                        const isChecked = selection?.selected.has(key) ?? false;
+                        const rowIndent = groupBy.length > 0 ? 12 + groupBy.length * 18 : undefined;
+                        if (isMobile) {
+                            return (_jsxs("div", { className: `flex flex-col gap-1.5 px-3 py-3 border-b border-[var(--color-border)] ${onRowClick ? 'cursor-pointer hover:bg-[var(--color-surface-raised)]' : ''}`, style: { background: isChecked ? 'rgba(99,102,241,0.07)' : undefined, paddingLeft: rowIndent }, onClick: () => onRowClick?.(row), children: [selection && (_jsxs("label", { className: "flex items-center gap-2 self-start py-1 pr-2 cursor-pointer", onClick: (e) => e.stopPropagation(), children: [_jsx("input", { type: "checkbox", className: "w-5 h-5", checked: isChecked, onChange: () => toggleOne(key), "aria-label": "Zeile ausw\u00E4hlen" }), _jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "Ausw\u00E4hlen" })] })), visibleColumns.map((col) => (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-[var(--color-text-muted)]", children: col.label }), _jsx("div", { className: "min-w-0 break-words text-sm", children: col.cell ? col.cell(row) : formatCellValue(col, row) })] }, col.id)))] }, `r:${String(key)}:${idx}`));
+                        }
+                        return (_jsxs("div", { className: `grid items-center min-w-min px-3 py-2 text-sm border-b border-[var(--color-border)] ${onRowClick ? 'cursor-pointer hover:bg-[var(--color-surface-raised)]' : ''}`, style: {
+                                gridTemplateColumns: 'var(--dt-cols)',
+                                background: isChecked ? 'rgba(99,102,241,0.07)' : undefined,
+                                paddingLeft: rowIndent,
+                            }, onClick: () => onRowClick?.(row), children: [selection && (_jsx("input", { type: "checkbox", checked: isChecked, onChange: () => toggleOne(key), onClick: (e) => e.stopPropagation(), "aria-label": "Zeile ausw\u00E4hlen" })), visibleColumns.map((col) => (_jsx("div", { className: "min-w-0 truncate", children: col.cell ? col.cell(row) : formatCellValue(col, row) }, col.id))), _jsx("div", {})] }, `r:${String(key)}:${idx}`));
+                    })), footer && (_jsx("div", { className: "px-3 py-2 text-xs text-[var(--color-text-muted)] border-t border-[var(--color-border)]", children: footer }))] })] }));
+}
+export function topScrollbarWidth(gridWidth, viewportWidth) {
+    return gridWidth > viewportWidth + 1 ? gridWidth : null;
+}
+function syncScroll(from, to) {
+    if (Math.abs(to.scrollLeft - from.scrollLeft) > 1)
+        to.scrollLeft = from.scrollLeft;
+}
+function TopScrollbar({ targetRef, measureRef, enabled }) {
+    const barRef = useRef(null);
+    const [width, setWidth] = useState(null);
+    useEffect(() => {
+        const target = targetRef.current;
+        const measured = measureRef.current;
+        if (!enabled || !target || !measured || typeof ResizeObserver === 'undefined') {
+            setWidth(null);
+            return;
+        }
+        const update = () => setWidth(topScrollbarWidth(target.scrollWidth, target.clientWidth));
+        const observer = new ResizeObserver(update);
+        observer.observe(target);
+        observer.observe(measured);
+        update();
+        const follow = () => {
+            if (barRef.current)
+                syncScroll(target, barRef.current);
+        };
+        target.addEventListener('scroll', follow, { passive: true });
+        return () => {
+            observer.disconnect();
+            target.removeEventListener('scroll', follow);
+        };
+    }, [enabled, targetRef, measureRef]);
+    useEffect(() => {
+        if (barRef.current && targetRef.current)
+            barRef.current.scrollLeft = targetRef.current.scrollLeft;
+    }, [width, targetRef]);
+    if (width == null)
+        return null;
+    return (_jsx("div", { ref: barRef, "aria-hidden": "true", tabIndex: -1, style: { overflowX: 'auto', overflowY: 'hidden', minHeight: 12 }, onScroll: () => {
+            if (targetRef.current && barRef.current)
+                syncScroll(barRef.current, targetRef.current);
+        }, children: _jsx("div", { style: { width, height: 1 } }) }));
 }
 const DRAG_MIME = 'application/x-efa-datatable-column';
 function HeaderCell({ columnId, label, dragColumnId, dropSide, hasCustomWidth, onDragStart, onDragEnd, onDragOverSide, onDrop, onResizePreview, onResizeCommit, onResizeCancel, children, }) {

package/frontend/ui/RecordDialog.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type DialogSize } from './Dialog.js';
 export type RecordDialogMode = 'read' | 'edit' | 'create';
-interface RecordDialogProps {
+export interface RecordDialogProps {
     open: {
         id: string;
         item?: any;
@@ -20,6 +20,7 @@ interface RecordDialogProps {
     saveDisabled?: boolean;
     error?: string;
     onErrorDismiss?: () => void;
+    readOnly?: boolean;
     size?: DialogSize;
     labels?: {
         close?: string;
@@ -29,5 +30,4 @@ interface RecordDialogProps {
         edit?: string;
     };
 }
-export declare function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, size, labels, }: RecordDialogProps): React.JSX.Element;
-export {};
+export declare function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, readOnly, size, labels, }: RecordDialogProps): React.JSX.Element;

package/frontend/ui/RecordDialog.js

@@ -4,8 +4,8 @@ import { Pencil } from 'lucide-react';
 import { Dialog, DialogClose } from './Dialog.js';
 import { Button } from './Button.js';
 import { Alert } from './Alert.js';
-export function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, size, labels, }) {
-    const [internalMode, setInternalMode] = useState('read');
+export function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, readOnly, size, labels, }) {
+    const [internalMode, setInternalMode] = useState(() => (open?.id === 'new' ? 'create' : 'read'));
     const mode = controlledMode ?? internalMode;
     useEffect(() => {
         if (!open)
@@ -24,7 +24,7 @@ export function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeC
         onOpenChange(null);
     }
     async function handleSave() {
-        if (mode === 'read')
+        if (mode === 'read' || (readOnly && mode === 'edit'))
             return;
         await onSave(mode);
     }
@@ -36,5 +36,5 @@ export function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeC
     return (_jsx(Dialog, { open: open !== null, onOpenChange: (o) => { if (!o)
             handleClose(); }, title: title, size: size, banner: mode !== 'read' && error
             ? _jsx(Alert, { variant: "error", onDismiss: onErrorDismiss, children: error })
-            : undefined, footer: mode === 'read' ? (_jsxs(_Fragment, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "secondary", children: closeLabel }) }), _jsxs(Button, { onClick: () => setMode('edit'), children: [_jsx(Pencil, { className: "w-4 h-4" }), editLabel] })] })) : (_jsxs(_Fragment, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "secondary", children: cancelLabel }) }), _jsx(Button, { onClick: handleSave, loading: !!saving, disabled: !!saveDisabled, children: mode === 'create' ? createLabel : saveLabel })] })), children: mode === 'read' ? (_jsxs("div", { children: [_jsx("div", { className: "flex justify-end mb-2 -mt-1", children: _jsx("button", { onClick: () => setMode('edit'), className: "p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-primary-text)] hover:bg-[var(--color-surface-raised)] transition-colors", title: editLabel, "aria-label": editLabel, children: _jsx(Pencil, { className: "w-4 h-4" }) }) }), readContent] })) : (_jsx("div", { className: "flex flex-col gap-4", children: editContent })) }));
+            : undefined, footer: mode === 'read' ? (_jsxs(_Fragment, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "secondary", children: closeLabel }) }), !readOnly && (_jsxs(Button, { onClick: () => setMode('edit'), children: [_jsx(Pencil, { className: "w-4 h-4" }), editLabel] }))] })) : (_jsxs(_Fragment, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "secondary", children: cancelLabel }) }), _jsx(Button, { onClick: handleSave, loading: !!saving, disabled: !!saveDisabled, children: mode === 'create' ? createLabel : saveLabel })] })), children: mode === 'read' ? (_jsxs("div", { children: [!readOnly && (_jsx("div", { className: "flex justify-end mb-2 -mt-1", children: _jsx("button", { onClick: () => setMode('edit'), className: "p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-primary-text)] hover:bg-[var(--color-surface-raised)] transition-colors", title: editLabel, "aria-label": editLabel, children: _jsx(Pencil, { className: "w-4 h-4" }) }) })), readContent] })) : (_jsx("div", { className: "flex flex-col gap-4", children: editContent })) }));
 }

package/frontend/ui/Switch.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type SwitchTone = 'primary' | 'danger';
+export interface SwitchControlProps {
+    id?: string;
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    tone?: SwitchTone;
+    className?: string;
+    name?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+export declare function SwitchControl({ id, checked, onCheckedChange, disabled, tone, className, name, ...aria }: SwitchControlProps): React.JSX.Element;
+export interface SwitchProps extends Omit<SwitchControlProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'className'> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    title?: string;
+    className?: string;
+}
+export declare function Switch({ label, description, title, className, id, ...control }: SwitchProps): React.JSX.Element;

package/frontend/ui/Switch.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+export function SwitchControl({ id, checked, onCheckedChange, disabled = false, tone = 'primary', className = '', name, ...aria }) {
+    const button = (_jsx("button", { type: "button", role: "switch", id: id, "aria-checked": checked, "data-state": checked ? 'checked' : 'unchecked', disabled: disabled, onClick: () => onCheckedChange?.(!checked), className: `switch switch-${tone} ${className}`, ...aria, children: _jsx("span", { className: "switch-thumb", "aria-hidden": "true" }) }));
+    if (!name)
+        return button;
+    return (_jsxs(_Fragment, { children: [button, _jsx("input", { type: "hidden", name: name, value: checked ? 'true' : 'false', disabled: disabled })] }));
+}
+export function Switch({ label, description, title, className = '', id, ...control }) {
+    const autoId = useId();
+    const switchId = id ?? `switch-${autoId}`;
+    const descId = description ? `${switchId}-desc` : undefined;
+    return (_jsxs("div", { className: `flex items-start gap-3 ${className}`, title: title, children: [_jsx("span", { className: "pt-0.5 flex", children: _jsx(SwitchControl, { id: switchId, "aria-describedby": descId, ...control }) }), _jsxs("span", { className: "min-w-0", children: [_jsx("label", { htmlFor: switchId, className: `block text-sm text-[var(--color-text-primary)] ${control.disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`, children: label }), description && (_jsx("span", { id: descId, className: "block text-xs text-[var(--color-text-muted)] mt-0.5", children: description }))] })] }));
+}

package/frontend/ui/index.d.ts

@@ -1,5 +1,6 @@
 export { Button } from './Button.js';
 export { Input } from './Input.js';
+export { Switch, SwitchControl, type SwitchProps, type SwitchControlProps, type SwitchTone } from './Switch.js';
 export { Badge } from './Badge.js';
 export { Alert, type AlertVariant } from './Alert.js';
 export { Dialog, DialogClose, DEFAULT_DIALOG_SIZE, type DialogSize } from './Dialog.js';
@@ -7,7 +8,10 @@ export * as DropdownMenu from './DropdownMenu.js';
 export { Tooltip, TooltipProvider } from './Tooltip.js';
 export { EmptyState } from './EmptyState.js';
 export { Skeleton, SkeletonRow } from './Skeleton.js';
-export { RecordDialog, type RecordDialogMode } from './RecordDialog.js';
+export { RecordDialog, type RecordDialogMode, type RecordDialogProps } from './RecordDialog.js';
+export { ConfirmDeleteDialog, type ConfirmDeleteDialogProps } from './ConfirmDeleteDialog.js';
+export { useRecords, type UseRecordsResult } from './useRecords.js';
+export { createRecordsController, type RecordsController, type RecordsOptions, type RecordsState, type RecordsSaveMode, } from './records.js';
 export { useIsMobile, MOBILE_QUERY } from '../useIsMobile.js';
 export { DataTable, DEFAULT_VIEW_VERSION, type ColumnDef, type FilterDef, type DataTableSelectionProps, } from './DataTable.js';
 export { toCsv, toXlsx, downloadFile, type ExportCell, type ExportTable } from './tableExport.js';

package/frontend/ui/index.js

@@ -1,5 +1,6 @@
 export { Button } from './Button.js';
 export { Input } from './Input.js';
+export { Switch, SwitchControl } from './Switch.js';
 export { Badge } from './Badge.js';
 export { Alert } from './Alert.js';
 export { Dialog, DialogClose, DEFAULT_DIALOG_SIZE } from './Dialog.js';
@@ -8,6 +9,9 @@ export { Tooltip, TooltipProvider } from './Tooltip.js';
 export { EmptyState } from './EmptyState.js';
 export { Skeleton, SkeletonRow } from './Skeleton.js';
 export { RecordDialog } from './RecordDialog.js';
+export { ConfirmDeleteDialog } from './ConfirmDeleteDialog.js';
+export { useRecords } from './useRecords.js';
+export { createRecordsController, } from './records.js';
 export { useIsMobile, MOBILE_QUERY } from '../useIsMobile.js';
 export { DataTable, DEFAULT_VIEW_VERSION, } from './DataTable.js';
 export { toCsv, toXlsx, downloadFile } from './tableExport.js';

package/frontend/ui/records.d.ts

@@ -0,0 +1,49 @@
+export type RecordsSaveMode = 'create' | 'edit';
+export interface RecordsOptions<T, F> {
+    endpoint: string;
+    apiBase: string | (() => string);
+    emptyForm: () => F;
+    toForm: (row: T) => F;
+    toPayload?: (form: F) => unknown;
+    required?: ReadonlyArray<keyof F>;
+    validate?: (form: F, mode: RecordsSaveMode) => string | null | undefined;
+    getId?: (row: T) => string;
+    updateMethod?: 'PUT' | 'PATCH';
+    fetchImpl?: typeof fetch;
+}
+export interface RecordsState<T, F> {
+    rows: T[];
+    loading: boolean;
+    loadError: string;
+    open: {
+        id: string;
+        item?: T;
+    } | null;
+    form: F;
+    saving: boolean;
+    saveError: string;
+    deleteTarget: T | null;
+    deleting: boolean;
+    deleteError: string;
+}
+export interface RecordsController<T, F> {
+    getState(): RecordsState<T, F>;
+    subscribe(listener: () => void): () => void;
+    setOptions(options: RecordsOptions<T, F>): void;
+    load(): Promise<void>;
+    dismissLoadError(): void;
+    openCreate(): void;
+    openRecord(row: T): void;
+    close(): void;
+    setForm(next: F | ((prev: F) => F)): void;
+    setField<K extends keyof F>(key: K, value: F[K]): void;
+    isComplete(): boolean;
+    save(mode: RecordsSaveMode): Promise<void>;
+    dismissSaveError(): void;
+    requestDelete(row: T): void;
+    cancelDelete(): void;
+    confirmDelete(): Promise<void>;
+    dismissDeleteError(): void;
+}
+export declare function requiredFilled<F>(form: F, required: ReadonlyArray<keyof F> | undefined): boolean;
+export declare function createRecordsController<T, F>(initial: RecordsOptions<T, F>): RecordsController<T, F>;

package/frontend/ui/records.js

@@ -0,0 +1,237 @@
+const NEW_ID = 'new';
+export function requiredFilled(form, required) {
+    return (required ?? []).every((k) => !isEmpty(form[k]));
+}
+function isEmpty(value) {
+    if (value === null || value === undefined)
+        return true;
+    if (typeof value === 'string')
+        return value.trim() === '';
+    if (Array.isArray(value))
+        return value.length === 0;
+    return false;
+}
+async function errorMessage(res, fallback) {
+    try {
+        const body = (await res.json());
+        if (typeof body?.error === 'string' && body.error.trim())
+            return body.error;
+        if (typeof body?.message === 'string' && body.message.trim())
+            return body.message;
+    }
+    catch {
+    }
+    return `${fallback} (HTTP ${res.status})`;
+}
+export function createRecordsController(initial) {
+    let options = initial;
+    let state = {
+        rows: [],
+        loading: true,
+        loadError: '',
+        open: null,
+        form: initial.emptyForm(),
+        saving: false,
+        saveError: '',
+        deleteTarget: null,
+        deleting: false,
+        deleteError: '',
+    };
+    const listeners = new Set();
+    let loadSeq = 0;
+    let loadedOnce = false;
+    function set(patch) {
+        state = { ...state, ...patch };
+        for (const l of listeners)
+            l();
+    }
+    function base() {
+        const b = options.apiBase;
+        return typeof b === 'function' ? b() : (b ?? '');
+    }
+    function tryId(row) {
+        const id = options.getId ? options.getId(row) : row.id;
+        return id === undefined || id === null || String(id) === '' ? null : String(id);
+    }
+    const NO_ID = 'Eintrag ohne ID: Die Liste liefert kein Feld „id“ (in useRecords getId angeben).';
+    function url(id) {
+        const root = `${base()}${options.endpoint}`;
+        return id === undefined ? root : `${root.replace(/\/$/, '')}/${encodeURIComponent(id)}`;
+    }
+    function request(target, method, body) {
+        const f = options.fetchImpl ?? fetch;
+        return f(target, {
+            method,
+            credentials: 'include',
+            headers: body === undefined ? { Accept: 'application/json' } : { 'Content-Type': 'application/json', Accept: 'application/json' },
+            ...(body === undefined ? {} : { body: JSON.stringify(body) }),
+        });
+    }
+    function isComplete() {
+        return requiredFilled(state.form, options.required);
+    }
+    async function load() {
+        const seq = ++loadSeq;
+        set({ loading: !loadedOnce, loadError: '' });
+        try {
+            const res = await request(url(), 'GET');
+            if (!res.ok) {
+                const msg = await errorMessage(res, 'Liste konnte nicht geladen werden');
+                if (seq === loadSeq)
+                    set({ loading: false, loadError: msg });
+                return;
+            }
+            let data;
+            try {
+                data = await res.json();
+            }
+            catch {
+                if (seq === loadSeq)
+                    set({ loading: false, loadError: 'Liste konnte nicht geladen werden (Antwort ist kein JSON, stimmen apiBase und endpoint?)' });
+                return;
+            }
+            if (seq !== loadSeq)
+                return;
+            if (!Array.isArray(data)) {
+                set({ loading: false, loadError: 'Liste konnte nicht geladen werden (Antwort ist keine Liste)' });
+                return;
+            }
+            loadedOnce = true;
+            set({ rows: data, loading: false });
+        }
+        catch {
+            if (seq === loadSeq)
+                set({ loading: false, loadError: 'Server nicht erreichbar' });
+        }
+    }
+    async function save(mode) {
+        if (state.saving)
+            return;
+        const open = state.open;
+        if (!open)
+            return;
+        if (!isComplete()) {
+            set({ saveError: 'Bitte alle Pflichtfelder ausfüllen.' });
+            return;
+        }
+        const invalid = options.validate?.(state.form, mode);
+        if (invalid) {
+            set({ saveError: invalid });
+            return;
+        }
+        let target;
+        let method;
+        if (mode === 'create') {
+            target = url();
+            method = 'POST';
+        }
+        else {
+            const id = open.item ? tryId(open.item) : null;
+            if (id === null) {
+                set({ saveError: open.item ? NO_ID : 'Kein Eintrag zum Speichern geöffnet.' });
+                return;
+            }
+            target = url(id);
+            method = options.updateMethod ?? 'PUT';
+        }
+        const payload = options.toPayload ? options.toPayload(state.form) : state.form;
+        set({ saving: true, saveError: '' });
+        try {
+            const res = await request(target, method, payload);
+            if (!res.ok) {
+                set({ saving: false, saveError: await errorMessage(res, 'Speichern fehlgeschlagen') });
+                return;
+            }
+        }
+        catch {
+            set({ saving: false, saveError: 'Server nicht erreichbar' });
+            return;
+        }
+        if (state.open === open)
+            set({ saving: false, open: null, form: options.emptyForm() });
+        else
+            set({ saving: false });
+        await load();
+    }
+    async function confirmDelete() {
+        const row = state.deleteTarget;
+        if (!row || state.deleting)
+            return;
+        const id = tryId(row);
+        if (id === null) {
+            set({ deleteError: NO_ID });
+            return;
+        }
+        set({ deleting: true, deleteError: '' });
+        try {
+            const res = await request(url(id), 'DELETE');
+            if (!res.ok) {
+                set({ deleting: false, deleteError: await errorMessage(res, 'Löschen fehlgeschlagen') });
+                return;
+            }
+        }
+        catch {
+            set({ deleting: false, deleteError: 'Server nicht erreichbar' });
+            return;
+        }
+        const openItem = state.open?.item;
+        const closeDialog = openItem !== undefined && tryId(openItem) === id;
+        set({ deleting: false, deleteTarget: null, ...(closeDialog ? { open: null } : {}) });
+        await load();
+    }
+    return {
+        getState: () => state,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        setOptions(next) {
+            options = next;
+        },
+        load,
+        dismissLoadError() {
+            set({ loadError: '' });
+        },
+        openCreate() {
+            set({ open: { id: NEW_ID }, form: options.emptyForm(), saveError: '' });
+        },
+        openRecord(row) {
+            const id = tryId(row);
+            if (id === null) {
+                console.error('useRecords: Eintrag ohne ID (getId angeben)', row);
+                set({ loadError: NO_ID });
+                return;
+            }
+            set({ open: { id, item: row }, form: options.toForm(row), saveError: '' });
+        },
+        close() {
+            set({ open: null, saveError: '' });
+        },
+        setForm(next) {
+            const form = typeof next === 'function' ? next(state.form) : next;
+            set({ form });
+        },
+        setField(key, value) {
+            set({ form: { ...state.form, [key]: value } });
+        },
+        isComplete,
+        save,
+        dismissSaveError() {
+            set({ saveError: '' });
+        },
+        requestDelete(row) {
+            set({ deleteTarget: row, deleteError: '' });
+        },
+        cancelDelete() {
+            if (state.deleting)
+                return;
+            set({ deleteTarget: null, deleteError: '' });
+        },
+        confirmDelete,
+        dismissDeleteError() {
+            set({ deleteError: '' });
+        },
+    };
+}

package/frontend/ui/styles.css

@@ -1,7 +1,7 @@
 /**
  * @efa-one/sdk/frontend/ui/styles.css
  *
- * Globale Hilfsklassen, die `Badge` und `Skeleton` aus dem SDK-ui-Kit benötigen
+ * Globale Hilfsklassen, die `Badge`, `Skeleton`, `Alert` und `Switch` aus dem SDK-ui-Kit benötigen
  * (sie sind CSS-Klassen-basiert, nicht Tailwind-Arbitrary). Einmal pro App
  * importieren:  import '@efa-one/sdk/frontend/ui/styles.css';
  *
@@ -110,3 +110,62 @@
   from { background-position: 200% 0; }
   to   { background-position: -200% 0; }
 }
+
+/* ── Switch (Schalter für Ein/Aus-Werte) ─────────────────────────
+ * Spur 36 × 20 px, Knopf 16 px. Aus-Zustand bewusst dunkler als
+ * `--color-border`: auf weißer Fläche wäre eine reine Rahmenfarbe kaum zu
+ * erkennen (WCAG 1.4.11 verlangt 3 : 1 für Bedienelemente). Die Mischung
+ * Richtung `--color-text-primary` wird im dunklen Theme automatisch heller.
+ * Gegen alle Built-in-Themes nachgerechnet (Spur auf surface/surface-raised,
+ * Knopf auf Spur): test/switch.test.ts. An-Zustand: Signalfarbe des Tons
+ * (`primary` bzw. `danger`) mit weißem Knopf — dieselbe Paarung wie der
+ * Primär-Button; der Zustand ist zusätzlich an der Knopf-Position erkennbar. */
+.switch {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  width: 36px;
+  height: 20px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--color-text-primary) 45%, var(--color-border));
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+.switch-primary[data-state='checked'] { background: var(--color-primary); }
+.switch-danger[data-state='checked']  { background: var(--color-danger); }
+.switch:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.switch:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
+}
+.switch-thumb {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+  transform: translateX(0);
+  transition: transform 150ms ease;
+  pointer-events: none;
+}
+.switch[data-state='checked'] .switch-thumb { transform: translateX(16px); }
+@media (prefers-reduced-motion: reduce) {
+  .switch, .switch-thumb { transition: none; }
+}
+/* Windows-Kontrastmodus ersetzt Hintergrundfarben durch Systemfarben — ohne
+ * diesen Block wären Spur und Knopf gleich und der Zustand unsichtbar. */
+@media (forced-colors: active) {
+  .switch { border-color: ButtonText; background: Canvas; }
+  .switch-thumb { background: ButtonText; box-shadow: none; }
+  .switch[data-state='checked'] { background: Highlight; }
+  .switch[data-state='checked'] .switch-thumb { background: HighlightText; }
+  .switch:disabled { border-color: GrayText; }
+  .switch:disabled .switch-thumb { background: GrayText; }
+}

package/frontend/ui/useRecords.d.ts

@@ -0,0 +1,22 @@
+import type { RecordDialogProps } from './RecordDialog.js';
+import type { ConfirmDeleteDialogProps } from './ConfirmDeleteDialog.js';
+import { type RecordsOptions } from './records.js';
+export interface UseRecordsResult<T, F> {
+    rows: T[];
+    loading: boolean;
+    loadError: string;
+    dismissLoadError(): void;
+    reload(): Promise<void>;
+    form: F;
+    setForm(next: F | ((prev: F) => F)): void;
+    setField<K extends keyof F>(key: K, value: F[K]): void;
+    current: T | null;
+    openCreate(): void;
+    openRecord(row: T): void;
+    close(): void;
+    dialogProps: Pick<RecordDialogProps, 'open' | 'onOpenChange' | 'onSave' | 'saving' | 'saveDisabled' | 'error' | 'onErrorDismiss'>;
+    requestDelete(row: T): void;
+    deleteTarget: T | null;
+    deleteDialogProps: Pick<ConfirmDeleteDialogProps, 'open' | 'deleting' | 'error' | 'onConfirm' | 'onCancel' | 'onErrorDismiss'>;
+}
+export declare function useRecords<T, F>(options: RecordsOptions<T, F>): UseRecordsResult<T, F>;

package/frontend/ui/useRecords.js

@@ -0,0 +1,49 @@
+import { useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import { createRecordsController, requiredFilled, } from './records.js';
+export function useRecords(options) {
+    const [controller] = useState(() => createRecordsController(options));
+    useEffect(() => {
+        controller.setOptions(options);
+    });
+    useEffect(() => {
+        void controller.load();
+    }, [controller, options.endpoint]);
+    const state = useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+    const complete = requiredFilled(state.form, options.required);
+    return useMemo(() => ({
+        rows: state.rows,
+        loading: state.loading,
+        loadError: state.loadError,
+        dismissLoadError: controller.dismissLoadError,
+        reload: controller.load,
+        form: state.form,
+        setForm: controller.setForm,
+        setField: controller.setField,
+        current: state.open?.item ?? null,
+        openCreate: controller.openCreate,
+        openRecord: controller.openRecord,
+        close: controller.close,
+        dialogProps: {
+            open: state.open,
+            onOpenChange: (next) => {
+                if (!next)
+                    controller.close();
+            },
+            onSave: controller.save,
+            saving: state.saving,
+            saveDisabled: !complete,
+            error: state.saveError,
+            onErrorDismiss: controller.dismissSaveError,
+        },
+        requestDelete: controller.requestDelete,
+        deleteTarget: state.deleteTarget,
+        deleteDialogProps: {
+            open: state.deleteTarget !== null,
+            deleting: state.deleting,
+            error: state.deleteError,
+            onConfirm: controller.confirmDelete,
+            onCancel: controller.cancelDelete,
+            onErrorDismiss: controller.dismissDeleteError,
+        },
+    }), [controller, state, complete]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@efa-one/sdk",
-  "version": "1.24.0",
+  "version": "1.26.0",
   "description": "Offizielles SDK für efa-one-Apps: Auth/Session, Service-Discovery, Gateway-Client, Audit/Reporting/Mail/Notifications, Permission- und Capability-Registrierung sowie das Frontend-IPC-/i18n-Toolkit.",
   "license": "Apache-2.0",
   "type": "commonjs",