@efa-one/sdk 1.18.0 → 1.21.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`), capability registry (`registerApiMetadata`), backend i18n |
 | `@efa-one/sdk/frontend` | Browser/React | postMessage IPC (`registerAppInfo`, `sendAtStart`, `navigateToApp`, `notifyRouteChange` …), react-i18next factory (`initI18n`), `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 per-user persisted 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`, `Badge`, `Alert`, `Dialog`, `DropdownMenu`, `Tooltip`, `EmptyState`, `Skeleton`, `RecordDialog`, and the **`DataTable`** (sortable/filterable/groupable list with draggable, resizable columns and a per-user persisted 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()` |
 
@@ -23,7 +23,17 @@ Every individual module is also reachable directly, e.g.
 
 The `frontend/ui` kit renders against the platform design tokens (`--color-*`,
 `--border-radius-*`) and expects Tailwind in the consuming app; `lucide-react` and
-the `@radix-ui/*` primitives it uses are optional peer dependencies.
+the `@radix-ui/*` primitives it uses are optional peer dependencies. Tailwind does
+not scan `node_modules`, so the consuming app's `tailwind.config.js` must list the
+kit in `content` — otherwise classes used only inside SDK components (`fixed`,
+`z-50`, …) are purged and dialogs render invisibly:
+
+```js
+content: ['./index.html', './src/**/*.{ts,tsx}', './node_modules/@efa-one/sdk/frontend/**/*.js'],
+```
+
+On Tailwind v4 (`@import "tailwindcss"`), add the path to the CSS entry file
+instead: `@source "../node_modules/@efa-one/sdk/frontend/**/*.js";`
 
 > **Note on legacy prefixes:** Some platform-internal identifiers (postMessage
 > message types, environment variable names, JWT `iss`) still carry technical
@@ -89,11 +99,17 @@ const viewPrefs = createViewPreferencesClient({ apiBase: getApiBase }); // creat
 const columns: ColumnDef<Item>[] = [
   { id: 'name', label: 'Name', accessor: (r) => r.name, filter: { type: 'text' } },
   { id: 'status', label: 'Status', accessor: (r) => r.status },
+  { id: 'created', label: 'Angelegt', accessor: (r) => r.createdAt, type: 'date' }, // → 07.10.2026
 ];
 
 <DataTable listId="items.list" rows={items} columns={columns} rowKey={(r) => r.id} persistence={viewPrefs} />
 ```
 
+Columns added later show up in views users saved before (at their natural position) — no
+need to bump `DEFAULT_VIEW_VERSION` and reset everyone's view. Grouped lists open collapsed;
+pass `groupsDefaultExpanded` (e.g. with `initialPrefs={{ groupBy: ['category'] }}`) to start
+with every group expanded while keeping groups the user collapses closed.
+
 ## Build your first app
 
 This repo ships a ready-to-copy app scaffold under [`template/`](./template) — the fastest
@@ -175,6 +191,38 @@ iframe load.
 ignores the request and its fixed-window push reaches the app as before; a current
 kernel answers the request directly. No rollout order.
 
+**1.19.0 — readable signal colors (WCAG AA).** `styles.css` now defines
+`--color-danger-text`, `--color-warning-text`, `--color-success-text` and
+`--color-primary-text`: the semantic color mixed toward `--color-text-primary`, so
+they darken in light themes and lighten in dark ones and follow every kernel theme,
+including custom ones, plus the classes `.signal-text-danger|warning|success|primary`.
+`Badge`, `Alert`, the danger item of `DropdownMenu` and the DataTable filter icon use
+them for text; fills and borders keep the pure signal color. These colors come from
+classes in `styles.css`, not Tailwind arbitrary values, so they work even when the
+app's Tailwind does not scan the SDK — but `Alert` now needs the `styles.css` import
+like `Badge` already did. No kernel change and no rollout order. Apps should switch their own
+signal-colored text (`text-[var(--color-danger)]`, orange links) to the `-text`
+tokens.
+
+**1.20.0 — columns you can move and resize, date columns.** In the DataTable header,
+each column has a grip (right side, on hover) to drag it to a new position and a
+handle on its right edge to drag its width; double-click the handle (or „Standardbreite"
+in the column menu) to go back to the code default, arrow keys resize from the keyboard.
+Order and widths persist per user with the rest of the view (`columnWidths` in the
+stored JSON, no version bump, existing saved views stay). New `ColumnDef.type`:
+`'date'` renders `DD.MM.YYYY`, `'datetime'` `DD.MM.YYYY, HH:MM` (via `format.ts`), sorts
+chronologically, groups by day and lets the text filter match the displayed form.
+`Date` values without a `type` are formatted as dates too. Custom `cell` renderers stay
+the app's job: use `formatDate`/`formatDateTime`, never `toLocaleDateString` (that is
+where `7.10.2026` comes from). No backend or kernel change.
+
+**1.21.0 — new columns in old views, groups that start open.** A column added to
+`columns` after a user saved their view now appears in that view at its natural position
+(and stays hidden if it has `defaultVisible: false`), and can be dragged like any other —
+before, it was missing until the user reset the view. New prop `groupsDefaultExpanded`:
+groups start expanded; groups the user collapses stay collapsed. No backend or kernel
+change.
+
 ## License
 
 [Apache-2.0](./LICENSE) — permissive with a patent grant, so customers and partners

package/frontend/ui/Alert.js

@@ -1,11 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from 'lucide-react';
-const VARIANT = {
-    error: 'bg-[color-mix(in_srgb,var(--color-danger)_10%,transparent)] border-[var(--color-danger)] text-[var(--color-danger)]',
-    success: 'bg-[color-mix(in_srgb,var(--color-success)_10%,transparent)] border-[var(--color-success)] text-[var(--color-success)]',
-    warning: 'bg-[color-mix(in_srgb,var(--color-warning)_10%,transparent)] border-[var(--color-warning)] text-[var(--color-warning)]',
-    info: 'bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)] border-[var(--color-primary)] text-[var(--color-primary)]',
-};
 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 ${VARIANT[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" }) }))] }));
+    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" }) }))] }));
 }

package/frontend/ui/DataTable.d.ts

@@ -18,6 +18,7 @@ export interface ColumnDef<T> {
     label: string;
     accessor: (row: T) => unknown;
     cell?: (row: T) => React.ReactNode;
+    type?: 'text' | 'date' | 'datetime';
     filter?: FilterDef;
     sortable?: boolean;
     width?: string;
@@ -38,6 +39,7 @@ interface ViewPrefs {
     } | null;
     filters: Record<string, FilterValue>;
     groupBy: string[];
+    columnWidths?: Record<string, number>;
     version?: number;
 }
 export interface DataTableSelectionProps<K> {
@@ -54,9 +56,18 @@ interface DataTableProps<T, K extends string | number> {
     selection?: DataTableSelectionProps<K>;
     initialPrefs?: Partial<ViewPrefs>;
     footer?: React.ReactNode;
+    groupsDefaultExpanded?: boolean;
     persistence?: ViewPreferencesAdapter;
 }
 export declare function defaultPrefsFor<T>(columns: ColumnDef<T>[], overrides?: Partial<ViewPrefs>): ViewPrefs;
+export declare function reconcileOrder<T>(columns: ColumnDef<T>[], order: string[]): string[];
+export declare function isColumnVisible<T>(column: ColumnDef<T>, visibility: Record<string, boolean>): boolean;
+export declare function formatCellValue<T>(col: ColumnDef<T>, row: T): string;
+export declare const MIN_COLUMN_WIDTH = 60;
+export declare const MAX_COLUMN_WIDTH = 1600;
+export declare function clampColumnWidth(px: number): number;
+export declare function reorderColumns(order: string[], sourceId: string, targetId: string, side: 'before' | 'after'): string[];
+export declare function gridTemplateFor<T>(visibleColumns: ColumnDef<T>[], columnWidths: Record<string, number> | undefined, hasSelection: boolean): string;
 export declare function groupLabelOf(value: unknown): string;
 interface RenderItem<T> {
     kind: 'group' | 'row';
@@ -68,5 +79,6 @@ interface RenderItem<T> {
     row?: T;
 }
 export declare function buildRenderItems<T>(rows: T[], groupBy: string[], columnsById: Map<string, ColumnDef<T>>, expandedGroups: Set<string>): RenderItem<T>[];
-export declare function DataTable<T, K extends string | number>({ listId, rows, columns, rowKey, onRowClick, selection, initialPrefs, footer, persistence, }: DataTableProps<T, K>): React.ReactElement;
+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, }: DataTableProps<T, K>): React.ReactElement;
 export {};

package/frontend/ui/DataTable.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import * as DropdownMenu from './DropdownMenu.js';
-import { ChevronDown, ChevronUp, ChevronRight, Settings, EyeOff, Filter, RotateCcw, ArrowUp, ArrowDown, Layers, X } from 'lucide-react';
+import { ChevronDown, ChevronUp, ChevronRight, Settings, EyeOff, Filter, RotateCcw, ArrowUp, ArrowDown, Layers, X, GripVertical } from 'lucide-react';
 import { Button } from './Button.js';
 import { useViewPreferences } from '../viewPreferences.js';
 import { useIsMobile } from '../useIsMobile.js';
+import { formatDate, formatDateTime } from '../format.js';
 const GROUP_KEY_SEP = '\x1f';
 const EMPTY_GROUP_LABEL = '– ohne –';
 export const DEFAULT_VIEW_VERSION = 2;
@@ -17,10 +18,71 @@ export function defaultPrefsFor(columns, overrides) {
         sort: null,
         filters: {},
         groupBy: [],
+        columnWidths: {},
         version: DEFAULT_VIEW_VERSION,
         ...(overrides ?? {}),
     };
 }
+export function reconcileOrder(columns, order) {
+    const known = new Set(columns.map((c) => c.id));
+    const result = order.filter((id) => known.has(id));
+    const present = new Set(result);
+    columns.forEach((c, idx) => {
+        if (present.has(c.id))
+            return;
+        result.splice(Math.min(idx, result.length), 0, c.id);
+        present.add(c.id);
+    });
+    return result;
+}
+export function isColumnVisible(column, visibility) {
+    return visibility[column.id] ?? column.defaultVisible !== false;
+}
+function isDateColumn(col, value) {
+    return col.type === 'date' || col.type === 'datetime' || (col.type == null && value instanceof Date);
+}
+function timeOf(value) {
+    if (value == null || value === '')
+        return null;
+    const t = value instanceof Date ? value.getTime() : new Date(value).getTime();
+    return Number.isNaN(t) ? null : t;
+}
+export function formatCellValue(col, row) {
+    const v = col.accessor(row);
+    if (isDateColumn(col, v)) {
+        return col.type === 'datetime' ? formatDateTime(v) : formatDate(v);
+    }
+    return String(v ?? '');
+}
+export const MIN_COLUMN_WIDTH = 60;
+export const MAX_COLUMN_WIDTH = 1600;
+const KEYBOARD_RESIZE_STEP = 16;
+export function clampColumnWidth(px) {
+    if (!Number.isFinite(px))
+        return MIN_COLUMN_WIDTH;
+    return Math.round(Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, px)));
+}
+export function reorderColumns(order, sourceId, targetId, side) {
+    if (sourceId === targetId)
+        return order;
+    if (!order.includes(sourceId) || !order.includes(targetId))
+        return order;
+    const without = order.filter((id) => id !== sourceId);
+    const targetIdx = without.indexOf(targetId);
+    without.splice(side === 'before' ? targetIdx : targetIdx + 1, 0, sourceId);
+    return without;
+}
+export function gridTemplateFor(visibleColumns, columnWidths, hasSelection) {
+    const cols = [];
+    if (hasSelection)
+        cols.push('36px');
+    visibleColumns.forEach((c) => {
+        const w = columnWidths?.[c.id];
+        cols.push(typeof w === 'number' && Number.isFinite(w) ? `${clampColumnWidth(w)}px` : (c.width ?? '1fr'));
+    });
+    cols.push('40px');
+    return cols.join(' ');
+}
 export function groupLabelOf(value) {
     if (value == null)
         return '';
@@ -29,6 +91,12 @@ export function groupLabelOf(value) {
     const s = String(value).trim();
     return s;
 }
+function groupBucketLabel(col, raw) {
+    const lbl = isDateColumn(col, raw)
+        ? (timeOf(raw) == null ? '' : formatDate(raw))
+        : groupLabelOf(raw);
+    return lbl || EMPTY_GROUP_LABEL;
+}
 export function buildRenderItems(rows, groupBy, columnsById, expandedGroups) {
     if (groupBy.length === 0)
         return rows.map((row) => ({ kind: 'row', row }));
@@ -44,18 +112,27 @@ export function buildRenderItems(rows, groupBy, columnsById, expandedGroups) {
             return;
         }
         const buckets = new Map();
+        const bucketTime = new Map();
+        let chronological = false;
         for (const r of subset) {
-            const lbl = groupLabelOf(col.accessor(r));
-            const bucketLabel = lbl || EMPTY_GROUP_LABEL;
+            const raw = col.accessor(r);
+            const isDate = isDateColumn(col, raw);
+            if (isDate)
+                chronological = true;
+            const bucketLabel = groupBucketLabel(col, raw);
             const arr = buckets.get(bucketLabel) ?? [];
             arr.push(r);
             buckets.set(bucketLabel, arr);
+            if (!bucketTime.has(bucketLabel))
+                bucketTime.set(bucketLabel, isDate ? timeOf(raw) : null);
         }
         const labels = Array.from(buckets.keys()).sort((a, b) => {
             if (a === EMPTY_GROUP_LABEL)
                 return 1;
             if (b === EMPTY_GROUP_LABEL)
                 return -1;
+            if (chronological)
+                return (bucketTime.get(a) ?? 0) - (bucketTime.get(b) ?? 0);
             return a.localeCompare(b, 'de');
         });
         for (const label of labels) {
@@ -77,7 +154,31 @@ export function buildRenderItems(rows, groupBy, columnsById, expandedGroups) {
     recurse(rows, 0, '');
     return out;
 }
-export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection, initialPrefs, footer, persistence, }) {
+export function collectAllGroupKeys(rows, groupBy, columnsById) {
+    const keys = [];
+    const recurse = (subset, depth, parentKey) => {
+        if (depth >= groupBy.length)
+            return;
+        const col = columnsById.get(groupBy[depth]);
+        if (!col)
+            return;
+        const buckets = new Map();
+        for (const r of subset) {
+            const lbl = groupBucketLabel(col, col.accessor(r));
+            const arr = buckets.get(lbl) ?? [];
+            arr.push(r);
+            buckets.set(lbl, arr);
+        }
+        for (const [label, childRows] of buckets) {
+            const key = parentKey ? `${parentKey}${GROUP_KEY_SEP}${label}` : label;
+            keys.push(key);
+            recurse(childRows, depth + 1, key);
+        }
+    };
+    recurse(rows, 0, '');
+    return keys;
+}
+export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection, initialPrefs, footer, groupsDefaultExpanded, persistence, }) {
     const defaultPrefs = useMemo(() => defaultPrefsFor(columns, initialPrefs), [columns, initialPrefs]);
     const [prefs, setPrefs, reset] = useViewPreferences(listId, defaultPrefs, persistence);
     const isMobile = useIsMobile();
@@ -94,12 +195,31 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
     };
     const columnsById = useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
     const groupBy = prefs.groupBy ?? [];
+    const columnWidths = prefs.columnWidths ?? {};
+    const [dragColumnId, setDragColumnId] = useState(null);
+    const [dropTarget, setDropTarget] = useState(null);
+    const containerRef = useRef(null);
+    const effectiveOrder = useMemo(() => reconcileOrder(columns, prefs.columnOrder), [columns, prefs.columnOrder]);
+    const seenGroupKeysRef = useRef(new Set());
+    useEffect(() => {
+        if (!groupsDefaultExpanded || groupBy.length === 0)
+            return;
+        const fresh = collectAllGroupKeys(rows, groupBy, columnsById).filter((k) => !seenGroupKeysRef.current.has(k));
+        if (fresh.length === 0)
+            return;
+        fresh.forEach((k) => seenGroupKeysRef.current.add(k));
+        setExpandedGroups((prev) => {
+            const next = new Set(prev);
+            fresh.forEach((k) => next.add(k));
+            return next;
+        });
+    }, [groupsDefaultExpanded, rows, groupBy, columnsById]);
     const visibleColumns = useMemo(() => {
         const byId = new Map(columns.map((c) => [c.id, c]));
-        return prefs.columnOrder
+        return effectiveOrder
             .map((id) => byId.get(id))
-            .filter((c) => Boolean(c) && prefs.columnVisibility[c.id] !== false);
-    }, [columns, prefs.columnOrder, prefs.columnVisibility]);
+            .filter((c) => Boolean(c) && isColumnVisible(c, prefs.columnVisibility));
+    }, [columns, effectiveOrder, prefs.columnVisibility]);
     const sortedFilteredRows = useMemo(() => {
         let out = rows;
         for (const col of columns) {
@@ -110,7 +230,10 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
                 const q = f.text.toLowerCase();
                 out = out.filter((r) => {
                     const v = col.accessor(r);
-                    return v != null && String(v).toLowerCase().includes(q);
+                    if (v == null)
+                        return false;
+                    const text = isDateColumn(col, v) ? formatCellValue(col, r) : String(v);
+                    return text.toLowerCase().includes(q);
                 });
             }
             else if (col.filter.type === 'multi-select' && f.selected && f.selected.length > 0) {
@@ -131,8 +254,12 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
             if (col) {
                 const dir = prefs.sort.direction === 'asc' ? 1 : -1;
                 out = [...out].sort((a, b) => {
-                    const va = col.accessor(a);
-                    const vb = col.accessor(b);
+                    let va = col.accessor(a);
+                    let vb = col.accessor(b);
+                    if (isDateColumn(col, va) || isDateColumn(col, vb)) {
+                        va = timeOf(va);
+                        vb = timeOf(vb);
+                    }
                     if (va == null && vb == null)
                         return 0;
                     if (va == null)
@@ -169,14 +296,7 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
             next.add(key);
         selection.onChange(next);
     };
-    const gridTemplate = useMemo(() => {
-        const cols = [];
-        if (selection)
-            cols.push('36px');
-        visibleColumns.forEach((c) => cols.push(c.width ?? '1fr'));
-        cols.push('40px');
-        return cols.join(' ');
-    }, [selection, visibleColumns]);
+    const gridTemplate = useMemo(() => gridTemplateFor(visibleColumns, columnWidths, !!selection), [selection, visibleColumns, prefs.columnWidths]);
     const setSort = (columnId, direction) => {
         setPrefs({ ...prefs, sort: { columnId, direction } });
     };
@@ -190,7 +310,7 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
         });
     };
     const moveColumn = (columnId, dir) => {
-        const order = [...prefs.columnOrder];
+        const order = [...effectiveOrder];
         const idx = order.indexOf(columnId);
         if (idx < 0)
             return;
@@ -200,6 +320,23 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
         [order[idx], order[newIdx]] = [order[newIdx], order[idx]];
         setPrefs({ ...prefs, columnOrder: order });
     };
+    const dropColumn = (sourceId, targetId, side) => {
+        const order = reorderColumns(effectiveOrder, sourceId, targetId, side);
+        if (order.join(GROUP_KEY_SEP) !== prefs.columnOrder.join(GROUP_KEY_SEP)) {
+            setPrefs({ ...prefs, columnOrder: order });
+        }
+    };
+    const previewColumnWidth = (columnId, px) => {
+        containerRef.current?.style.setProperty('--dt-cols', gridTemplateFor(visibleColumns, { ...columnWidths, [columnId]: px }, !!selection));
+    };
+    const setColumnWidth = (columnId, px) => {
+        const next = { ...columnWidths };
+        if (px == null)
+            delete next[columnId];
+        else
+            next[columnId] = clampColumnWidth(px);
+        setPrefs({ ...prefs, columnWidths: next });
+    };
     const addGroupBy = (columnId) => {
         if (groupBy.includes(columnId))
             return;
@@ -239,11 +376,18 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
         setPrefs({ ...prefs, filters });
     };
     const gearButton = (_jsx(ColumnInventoryButton, { columns: columns, prefs: prefs, setColumnVisible: setColumnVisible, moveColumn: moveColumn, reset: reset, groupBy: groupBy, addGroupBy: addGroupBy, removeGroupBy: removeGroupBy, moveGroupBy: moveGroupBy, clearGroupBy: clearGroupBy }));
-    return (_jsxs("div", { className: "border border-[var(--color-border)] overflow-x-auto", 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 l\u00F6schen" }), _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: gridTemplate, background: 'var(--color-surface-raised)' }, children: [selection && (_jsx("input", { type: "checkbox", checked: allSelected, onChange: toggleAll, "aria-label": "Alle ausw\u00E4hlen" })), visibleColumns.map((col) => {
+    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 l\u00F6schen" }), _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 (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex items-center gap-1 px-1 py-0.5 hover:bg-[var(--color-surface)] text-left", style: { borderRadius: 'var(--border-radius-md)' }, children: [_jsx("span", { 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 text-[var(--color-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) })), _jsxs(DropdownMenu.Item, { onSelect: () => setColumnVisible(col.id, false), variant: "danger", children: [_jsx(EyeOff, { className: "w-4 h-4" }), "Spalte ausblenden"] })] })] }, col.id));
+                        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;
@@ -260,15 +404,135 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
                 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) : String(col.accessor(row) ?? '') })] }, col.id)))] }, `r:${String(key)}:${idx}`));
+                    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: gridTemplate,
+                        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) : String(col.accessor(row) ?? '') }, col.id))), _jsx("div", {})] }, `r:${String(key)}:${idx}`));
+                    }, 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 }))] }));
 }
+const DRAG_MIME = 'application/x-efa-datatable-column';
+function HeaderCell({ columnId, label, dragColumnId, dropSide, hasCustomWidth, onDragStart, onDragEnd, onDragOverSide, onDrop, onResizePreview, onResizeCommit, onResizeCancel, children, }) {
+    const cellRef = useRef(null);
+    const [hovered, setHovered] = useState(false);
+    const [resizing, setResizing] = useState(false);
+    const [handleFocused, setHandleFocused] = useState(false);
+    const resizeStart = useRef(null);
+    const dragStartTimer = useRef(null);
+    const isDragSource = dragColumnId === columnId;
+    const sideFor = (clientX) => {
+        const r = cellRef.current?.getBoundingClientRect();
+        return r && clientX < r.left + r.width / 2 ? 'before' : 'after';
+    };
+    const acceptsDrag = (e) => dragColumnId != null && e.dataTransfer.types.includes(DRAG_MIME);
+    const currentWidth = () => cellRef.current?.getBoundingClientRect().width ?? MIN_COLUMN_WIDTH;
+    const handle = {
+        onPointerDown: (e) => {
+            if (e.button !== 0)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            e.currentTarget.setPointerCapture(e.pointerId);
+            const width = currentWidth();
+            resizeStart.current = { x: e.clientX, width, last: width };
+            setResizing(true);
+        },
+        onPointerMove: (e) => {
+            const s = resizeStart.current;
+            if (!s)
+                return;
+            s.last = clampColumnWidth(s.width + e.clientX - s.x);
+            onResizePreview(s.last);
+        },
+        onPointerUp: (e) => {
+            const s = resizeStart.current;
+            if (!s)
+                return;
+            resizeStart.current = null;
+            setResizing(false);
+            if (e.currentTarget.hasPointerCapture(e.pointerId))
+                e.currentTarget.releasePointerCapture(e.pointerId);
+            if (Math.abs(e.clientX - s.x) < 2) {
+                onResizeCancel();
+                return;
+            }
+            onResizeCommit(s.last);
+        },
+        onPointerCancel: () => {
+            resizeStart.current = null;
+            setResizing(false);
+            onResizeCancel();
+        },
+        onDoubleClick: (e) => {
+            e.stopPropagation();
+            if (hasCustomWidth)
+                onResizeCommit(null);
+        },
+        onKeyDown: (e) => {
+            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
+                return;
+            e.preventDefault();
+            const delta = e.key === 'ArrowLeft' ? -KEYBOARD_RESIZE_STEP : KEYBOARD_RESIZE_STEP;
+            onResizeCommit(clampColumnWidth(currentWidth() + delta));
+        },
+    };
+    const showChrome = hovered || resizing || handleFocused;
+    const indicator = {
+        position: 'absolute', top: -8, bottom: -8, width: 2,
+        background: 'var(--color-primary)', pointerEvents: 'none',
+        [dropSide === 'before' ? 'left' : 'right']: -1,
+    };
+    return (_jsxs("div", { ref: cellRef, "data-column-id": columnId, style: {
+            position: 'relative', display: 'flex', alignItems: 'center', minWidth: 0,
+            opacity: isDragSource ? 0.4 : undefined,
+        }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onDragOver: (e) => {
+            if (!acceptsDrag(e))
+                return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+            if (!isDragSource)
+                onDragOverSide(sideFor(e.clientX));
+        }, onDrop: (e) => {
+            if (!acceptsDrag(e))
+                return;
+            e.preventDefault();
+            const sourceId = e.dataTransfer.getData(DRAG_MIME);
+            if (sourceId)
+                onDrop(sourceId, sideFor(e.clientX));
+        }, children: [children, _jsx("span", { draggable: true, "aria-hidden": true, title: "Spalte verschieben", onDragStart: (e) => {
+                    e.dataTransfer.setData(DRAG_MIME, columnId);
+                    e.dataTransfer.effectAllowed = 'move';
+                    if (cellRef.current)
+                        e.dataTransfer.setDragImage(cellRef.current, 8, 8);
+                    dragStartTimer.current = window.setTimeout(() => {
+                        dragStartTimer.current = null;
+                        onDragStart();
+                    }, 0);
+                }, onDragEnd: () => {
+                    if (dragStartTimer.current != null)
+                        window.clearTimeout(dragStartTimer.current);
+                    dragStartTimer.current = null;
+                    onDragEnd();
+                }, style: {
+                    position: 'absolute', right: 6, top: '50%', transform: 'translateY(-50%)',
+                    display: (hovered && !dragColumnId && !resizing) || isDragSource ? 'inline-flex' : 'none',
+                    padding: 2, cursor: 'grab', zIndex: 1,
+                    color: 'var(--color-text-muted)',
+                    background: 'var(--color-surface-raised)',
+                    borderRadius: 'var(--border-radius-md)',
+                }, children: _jsx(GripVertical, { style: { width: 12, height: 12 } }) }), _jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Breite der Spalte ${label} ändern`, tabIndex: 0, title: "Ziehen: Breite \u00E4ndern \u00B7 Doppelklick: Standardbreite", ...handle, onFocus: () => setHandleFocused(true), onBlur: () => setHandleFocused(false), style: {
+                    position: 'absolute', top: -8, bottom: -8, right: -4, width: 8,
+                    cursor: 'col-resize', touchAction: 'none', zIndex: 2, outline: 'none',
+                    display: 'flex', justifyContent: 'center',
+                }, children: _jsx("span", { style: {
+                        width: 2, height: '100%',
+                        background: resizing || handleFocused ? 'var(--color-primary)' : 'var(--color-border)',
+                        opacity: showChrome ? 1 : 0,
+                        transition: 'opacity 120ms',
+                    } }) }), dropSide && _jsx("span", { style: indicator })] }));
+}
 function FilterEditor({ column, value, onChange, }) {
     if (!column.filter)
         return null;
@@ -310,7 +574,7 @@ function ColumnInventoryButton({ columns, prefs, setColumnVisible, moveColumn, r
     const [open, setOpen] = useState(false);
     const orderedColumns = useMemo(() => {
         const byId = new Map(columns.map((c) => [c.id, c]));
-        return prefs.columnOrder.map((id) => byId.get(id)).filter(Boolean);
+        return reconcileOrder(columns, prefs.columnOrder).map((id) => byId.get(id)).filter(Boolean);
     }, [columns, prefs.columnOrder]);
     return (_jsxs(DropdownMenu.Root, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-2.5 sm:p-1 hover:bg-[var(--color-surface)] text-[var(--color-text-muted)] justify-self-end", title: "Spalten konfigurieren", style: { borderRadius: 'var(--border-radius-md)' }, children: _jsx(Settings, { className: "w-4 h-4" }) }) }), _jsxs(DropdownMenu.Content, { className: "min-w-[260px] p-2", children: [_jsx("div", { className: "text-xs font-semibold mb-2 text-[var(--color-text-muted)] uppercase", children: "Gruppieren nach" }), groupBy.length === 0 ? (_jsx("div", { className: "text-xs text-[var(--color-text-muted)] italic px-1 mb-2", children: "Keine Gruppierung aktiv." })) : (_jsxs("div", { className: "mb-2 space-y-1", onClick: (e) => e.stopPropagation(), children: [groupBy.map((id, idx) => {
                                 const col = columns.find((c) => c.id === id);
@@ -321,7 +585,7 @@ function ColumnInventoryButton({ columns, prefs, setColumnVisible, moveColumn, r
                                         addGroupBy(v);
                                     e.target.value = '';
                                 }, className: "flex-1 px-1 py-0.5 text-xs border border-[var(--color-border)] bg-[var(--color-surface)]", style: { borderRadius: 'var(--border-radius-md)' }, children: [_jsx("option", { value: "", children: "\u2013 w\u00E4hlen \u2013" }), groupableCandidates.map((c) => (_jsx("option", { value: c.id, children: c.label }, c.id)))] })] })), _jsx("div", { className: "border-t border-[var(--color-border)] mb-2" }), _jsx("div", { className: "text-xs font-semibold mb-2 text-[var(--color-text-muted)] uppercase", children: "Spalten" }), orderedColumns.map((col, idx) => {
-                        const visible = prefs.columnVisibility[col.id] !== false;
+                        const visible = isColumnVisible(col, prefs.columnVisibility);
                         return (_jsxs("div", { className: "flex items-center gap-2 px-1 py-1 text-sm", onClick: (e) => e.stopPropagation(), children: [_jsx("input", { type: "checkbox", checked: visible, onChange: () => setColumnVisible(col.id, !visible), "aria-label": `Spalte ${col.label} ${visible ? 'ausblenden' : 'einblenden'}` }), _jsx("span", { className: "flex-1 text-xs", children: col.label }), _jsx("button", { type: "button", disabled: idx === 0, onClick: () => moveColumn(col.id, -1), className: "p-2 sm:p-0.5 disabled:opacity-30 hover:bg-[var(--color-surface-raised)]", title: "Nach oben", style: { borderRadius: 'var(--border-radius-md)' }, children: _jsx(ArrowUp, { className: "w-3 h-3" }) }), _jsx("button", { type: "button", disabled: idx === orderedColumns.length - 1, onClick: () => moveColumn(col.id, 1), className: "p-2 sm:p-0.5 disabled:opacity-30 hover:bg-[var(--color-surface-raised)]", title: "Nach unten", style: { borderRadius: 'var(--border-radius-md)' }, children: _jsx(ArrowDown, { className: "w-3 h-3" }) })] }, col.id));
                     }), _jsx("div", { className: "border-t border-[var(--color-border)] mt-2 pt-2", children: _jsxs(Button, { variant: "ghost", onClick: () => { reset(); setOpen(false); }, children: [_jsx(RotateCcw, { className: "w-4 h-4" }), "Zur\u00FCcksetzen"] }) })] })] }));
 }

package/frontend/ui/DropdownMenu.js

@@ -7,7 +7,7 @@ export const Portal = Radix.Portal;
 export const Content = React.forwardRef(({ className = '', sideOffset = 4, ...props }, ref) => (_jsx(Radix.Portal, { children: _jsx(Radix.Content, { ref: ref, sideOffset: sideOffset, className: `z-50 min-w-[160px] max-w-[calc(100vw-2rem)] rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-1 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ${className}`, ...props }) })));
 Content.displayName = 'DropdownMenu.Content';
 export const Item = React.forwardRef(({ className = '', variant = 'default', ...props }, ref) => (_jsx(Radix.Item, { ref: ref, className: `flex items-center gap-2 px-3 py-1.5 text-sm rounded-sm cursor-pointer outline-none select-none transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none ${variant === 'danger'
-        ? 'text-[var(--color-danger)] data-[highlighted]:bg-[var(--color-surface-raised)]'
+        ? 'signal-text-danger data-[highlighted]:bg-[var(--color-surface-raised)]'
         : 'text-[var(--color-text-primary)] data-[highlighted]:bg-[var(--color-surface-raised)]'} ${className}`, ...props })));
 Item.displayName = 'DropdownMenu.Item';
 export const Separator = React.forwardRef(({ className = '', ...props }, ref) => (_jsx(Radix.Separator, { ref: ref, className: `my-1 h-px bg-[var(--color-border)] ${className}`, ...props })));

package/frontend/ui/RecordDialog.js

@@ -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, 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)] 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 }) }), _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 })) }));
 }

package/frontend/ui/styles.css

@@ -7,8 +7,42 @@
  *
  * Die Design-Tokens (`--color-*`, `--border-radius-*`) definiert die App selbst
  * (Kernel-Theme-überschrieben zur Laufzeit) — hier bewusst NICHT dupliziert.
+ * Einzige Ausnahme: die abgeleiteten Text-Tokens direkt darunter.
  */
 
+/* ── Signalfarben als TEXT (WCAG AA) ─────────────────────────────
+ * Die reinen Signalfarben (`--color-danger|warning|success|primary`) sind
+ * Flächen-/Rahmenfarben. Als Schrift auf hellem Grund fallen sie durch den
+ * AA-Kontrast (4,5 : 1): im Kernel-Theme „Standard Light" Rot 3,76, Orange 2,95,
+ * Grün 2,28, Bernstein 2,15. Für TEXT deshalb immer die `-text`-Variante.
+ *
+ * Abgeleitet per color-mix() RICHTUNG `--color-text-primary`: im hellen Theme
+ * wird die Farbe dunkler, im dunklen heller — ein Token für beide Modi. Weil
+ * `--color-text-primary` und die Signalfarben zur Laufzeit per CONVERGE_AUTH
+ * auf :root überschrieben werden, rechnet der Browser die Mischung für JEDES
+ * Theme neu, auch für Custom Themes aus dem Kernel.
+ *
+ * Mischanteile gegen alle Built-in-Themes des Kernels nachgerechnet (hell/dunkel,
+ * auf surface, background, surface-raised und der 10/15-%-Tönung von Alert/Badge):
+ * Minimum 4,86 : 1. Test: test/signalTextContrast.test.ts — wer einen Anteil
+ * anhebt, muss den Test grün halten.
+ */
+:root {
+  --color-danger-text:  color-mix(in srgb, var(--color-danger) 55%, var(--color-text-primary));
+  --color-warning-text: color-mix(in srgb, var(--color-warning) 45%, var(--color-text-primary));
+  --color-success-text: color-mix(in srgb, var(--color-success) 45%, var(--color-text-primary));
+  --color-primary-text: color-mix(in srgb, var(--color-primary) 50%, var(--color-text-primary));
+}
+
+/* Text-Hilfsklassen für die `-text`-Tokens. Das ui-Kit nutzt diese Klassen statt
+ * `text-[var(--color-…-text)]`: Arbitrary-Werte erzeugt die Tailwind der App nur,
+ * wenn ihr `content` das SDK scannt — ohne das verlöre z. B. der „Löschen"-Eintrag
+ * im DropdownMenu still seine Farbe. Apps dürfen sie ebenfalls nutzen. */
+.signal-text-danger  { color: var(--color-danger-text); }
+.signal-text-warning { color: var(--color-warning-text); }
+.signal-text-success { color: var(--color-success-text); }
+.signal-text-primary { color: var(--color-primary-text); }
+
 /* ── Badge utilities ─────────────────────────────────────────── */
 .badge {
   display: inline-flex;
@@ -20,21 +54,46 @@
 }
 .badge-success {
   background: color-mix(in srgb, var(--color-success) 15%, transparent);
-  color: var(--color-success);
+  color: var(--color-success-text);
 }
 .badge-warning {
   background: color-mix(in srgb, var(--color-warning) 15%, transparent);
-  color: var(--color-warning);
+  color: var(--color-warning-text);
 }
 .badge-danger {
   background: color-mix(in srgb, var(--color-danger) 15%, transparent);
-  color: var(--color-danger);
+  color: var(--color-danger-text);
 }
 .badge-neutral {
   background: var(--color-surface-raised);
   color: var(--color-text-secondary);
 }
 
+/* ── Alert (Fehler-/Status-Banner) ───────────────────────────────
+ * Fläche = 10-%-Tönung, Rahmen = reine Signalfarbe, Text = `-text`-Variante.
+ * Bewusst hier und nicht als Tailwind-Arbitrary im Component: die App-Tailwind
+ * scannt `node_modules` nicht zwingend, dann fehlten die Farben ganz. */
+.alert-error {
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  border-color: var(--color-danger);
+  color: var(--color-danger-text);
+}
+.alert-success {
+  background: color-mix(in srgb, var(--color-success) 10%, transparent);
+  border-color: var(--color-success);
+  color: var(--color-success-text);
+}
+.alert-warning {
+  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
+  border-color: var(--color-warning);
+  color: var(--color-warning-text);
+}
+.alert-info {
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  border-color: var(--color-primary);
+  color: var(--color-primary-text);
+}
+
 /* ── Skeleton loading ────────────────────────────────────────── */
 .skeleton {
   background: linear-gradient(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@efa-one/sdk",
-  "version": "1.18.0",
+  "version": "1.21.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",