@efa-one/sdk 1.10.2 → 1.12.0

package/README.md

@@ -1,43 +1,49 @@
 # @efa-one/sdk
 
-Offizielles SDK zum Bauen von **efa-one-Apps**. Es ist die verbindliche
-Integrationsschicht, die jede App einbettet, um ein First-Class-Bürger der
-Plattform zu sein: Auth gegen den Kernel, Clients zu den Plattform-Services und
-das Frontend-IPC-/i18n-Toolkit für die iframe-Einbettung.
+Official SDK for building **efa-one apps**. It is the integration layer every app
+embeds to become a first-class citizen of the platform: authentication against the
+kernel, clients for the platform services, and the frontend IPC / i18n toolkit for
+iframe embedding.
 
-## Zwei Entry-Points
+## Two entry points
 
-Das SDK ist gemischt server-/browserseitig und daher in zwei Sub-Pfade getrennt,
-damit `express` nicht ins Frontend und `react` nicht ins Backend leakt:
+The SDK is a mix of server- and browser-side code, so it is split into two
+sub-paths — this keeps `express` out of the frontend and `react` out of the backend:
 
-| Import | Läuft in | Enthält |
+| Import | Runs in | Contains |
 |---|---|---|
-| `@efa-one/sdk/backend` | Node/Express | Auth + Token-Exchange (`requireAuth`, `createExchangeRouter`, `requireInternalOrAuth` …), Health-Router, Service-Discovery + Gateway-Client (`serviceClient`, `resolveService`), Clients für Audit/Reporting/Mail/Notifications, Permission-Auflösung/-Registrierung (`getUserPermissions`, `registerPermissions`, `checkPermission`), Capability-Registry (`registerApiMetadata`), Backend-i18n |
-| `@efa-one/sdk/frontend` | Browser/React | postMessage-IPC (`sendDeclareAppInfo`, `sendAtStart`, `navigateToApp`, `notifyRouteChange` …), react-i18next-Factory (`initI18n`), `DevHeader` |
+| `@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). Ship its companion CSS once: `import '@efa-one/sdk/frontend/ui/styles.css'` |
+| `@efa-one/sdk/frontend/viewPreferences` | Browser/React | Persistence seam for `DataTable` — `createViewPreferencesClient()` (standard `/api/view-preferences/:listId` adapter) + `useViewPreferences()` |
 
-Jedes Einzelmodul ist zusätzlich direkt erreichbar, z. B.
-`@efa-one/sdk/backend/auth` oder `@efa-one/sdk/frontend/ipc`.
+Every individual module is also reachable directly, e.g.
+`@efa-one/sdk/backend/auth` or `@efa-one/sdk/frontend/ipc`.
 
-> **Hinweis zu Legacy-Präfixen:** Einige plattform-interne Identifier (postMessage-
-> Nachrichtentypen, Env-Variablen-Namen, JWT-`iss`) tragen noch technische
-> Legacy-Präfixe aus einer früheren Namensgebung. Diese sind Teil des Draht-
-> Protokolls zwischen App und Kernel und werden gemeinsam mit dem Kernel in einem
-> koordinierten Schritt migriert — nicht einseitig im SDK.
+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.
+
+> **Note on legacy prefixes:** Some platform-internal identifiers (postMessage
+> message types, environment variable names, JWT `iss`) still carry technical
+> legacy prefixes from an earlier naming. These are part of the wire protocol
+> between app and kernel and are migrated together with the kernel in one
+> coordinated step — not unilaterally in the SDK.
 
 ## Installation
 
 ```bash
-# im Backend-Projekt der App
+# in the app's backend project
 npm install @efa-one/sdk express pg jsonwebtoken
 
-# im Frontend-Projekt der App
+# in the app's frontend project
 npm install @efa-one/sdk react i18next i18next-http-backend react-i18next
 ```
 
-Die Runtime-Bibliotheken sind **optionale Peer-Dependencies** — installiere nur die
-zum genutzten Entry-Point passenden. Das SDK selbst bündelt sie nicht.
+The runtime libraries are **optional peer dependencies** — install only the ones
+matching the entry point you use. The SDK itself does not bundle them.
 
-## Verwendung
+## Usage
 
 ```ts
 // Backend
@@ -49,71 +55,68 @@ app.get('/api/items', requireAuth, handler);
 
 ```tsx
 // Frontend
-import { initI18n, sendDeclareAppInfo, DevHeader } from '@efa-one/sdk/frontend';
+import { initI18n, registerAppInfo, DevHeader } from '@efa-one/sdk/frontend';
 
-sendDeclareAppInfo({ appName: 'efa-chat', version: __APP_VERSION__ });
+registerAppInfo({ appName: 'efa-chat', version: __APP_VERSION__ });
 ```
 
-## Build
-
-Reines `tsc`, kein Bundler. Zwei Targets:
-
-```bash
-npm install          # devDeps + Peer-Libs zum Typecheck
-npm run build        # backend/ (CJS) + frontend/ (ESM), je mit .d.ts
-npm run typecheck    # nur Typprüfung, kein Emit
+```tsx
+// Frontend — a fully-featured list in a few lines
+import { DataTable, type ColumnDef } from '@efa-one/sdk/frontend/ui';
+import { createViewPreferencesClient } from '@efa-one/sdk/frontend/viewPreferences';
+import '@efa-one/sdk/frontend/ui/styles.css';
+
+const viewPrefs = createViewPreferencesClient({ apiBase: getApiBase }); // create once
+const columns: ColumnDef<Item>[] = [
+  { id: 'name', label: 'Name', accessor: (r) => r.name, filter: { type: 'text' } },
+  { id: 'status', label: 'Status', accessor: (r) => r.status },
+];
+
+<DataTable listId="items.list" rows={items} columns={columns} rowKey={(r) => r.id} persistence={viewPrefs} />
 ```
 
-- `backend/` — CommonJS (`module: commonjs`)
-- `frontend/` — ESM (`module: esnext`, `moduleResolution: bundler`), via
-  `frontend/package.json` als `{"type":"module"}` markiert; App-Bundler (Vite)
-  konsumieren es direkt.
-
-Das flache Output-Layout (`backend/` + `frontend/` im Paket-Root) ist bewusst so
-gewählt, damit Consumer mit `moduleResolution: node` (node10) die Subpath-Importe
-physisch auflösen — ohne dass sie ihre tsconfig anpassen müssen.
-
-## Publish
-
-Public auf npmjs unter dem Scope `@efa-one` (`publishConfig.access = "public"` ist
-gesetzt).
+## Build your first app
 
-**Automatisiert (Standardweg):** ein `v*`-Tag löst den Publish via GitHub Actions
-aus (`.github/workflows/publish.yml`) — analog zum GHCR-Flow der Apps. Der Workflow
-gleicht Tag ↔ `package.json`-Version ab, läuft Tests + Typecheck als Gate und
-publiziert dann.
+This repo ships a ready-to-copy app scaffold under [`template/`](./template) — the fastest
+path to a working efa-app. It already wires up auth, health, service discovery,
+audit/reporting, IPC and i18n against this SDK, so you write business logic only. No extra
+tooling (and no Claude Code) required — clone the repo, then:
 
 ```bash
-npm version patch          # bumpt package.json + legt Commit + Tag an
-git push --follow-tags     # Tag-Push triggert den Publish-Job
+cp -R template efa-myapp
+cd efa-myapp && rm -rf .git && git init
+npm --prefix backend install && npm --prefix frontend install
+docker compose up -d --build
 ```
 
-Einmalige Voraussetzung: Repo-Secret **`NPM_TOKEN`** (Automation-Token eines
-Accounts mit Publish-Recht auf `@efa-one`) unter *Settings → Secrets and variables →
-Actions*.
+See [`template/README.md`](./template/README.md) for the full walkthrough — stack variants
+(3-container/PostgreSQL vs. single-container/SQLite), the intake questions, permission
+registration, and the README chapters every app must keep.
 
-**Manuell (Fallback):**
+## Build the SDK itself
+
+Plain `tsc`, no bundler. Two targets:
 
 ```bash
-npm login          # Account muss Publish-Recht auf @efa-one haben
-npm publish        # baut via prepublishOnly automatisch neu
+npm install          # devDeps + peer libs for the typecheck
+npm run build        # backend/ (CJS) + frontend/ (ESM), each with .d.ts
+npm run typecheck    # type check only, no emit
 ```
 
-`npm install` durch Apps/CI/Docker braucht **keine** Credentials — nur der
-Publish-Schritt.
-
-## Migration einer bestehenden App
+- `backend/` — CommonJS (`module: commonjs`)
+- `frontend/` — ESM (`module: esnext`, `moduleResolution: bundler`), marked via
+  `frontend/package.json` as `{"type":"module"}`; app bundlers (Vite) consume it
+  directly.
 
-Von kopiertem `template-core/` auf das Paket umstellen: siehe
-[MIGRATION.md](./MIGRATION.md) (Import-Mapping, tsconfig/vite-Entkopplung,
-Dockerfile-Bereinigung, Lockfile-Regen).
+The flat output layout (`backend/` + `frontend/` at the package root) is a
+deliberate choice so that consumers using `moduleResolution: node` (node10) can
+resolve the subpath imports physically — without having to change their tsconfig.
 
-## Versionierung
+## Versioning
 
-SemVer. Template-Migration = `npm version` + publish; App-Update =
-`npm update @efa-one/sdk`.
+SemVer. Consuming apps pull new versions with `npm update @efa-one/sdk`.
 
-## Lizenz
+## License
 
-[Apache-2.0](./LICENSE) — permissiv mit Patent-Grant, damit Kunden und Partner ohne
-Reibung efa-one-Apps bauen können.
+[Apache-2.0](./LICENSE) — permissive with a patent grant, so customers and partners
+can build efa-one apps without friction.

package/frontend/ipc.d.ts

@@ -5,6 +5,21 @@ export declare function sendDeclareAppInfo(payload: {
     appName: string;
     version: string;
 }): void;
+export declare function appInfoDeclareFromAuth(info: {
+    appName: string;
+    version: string;
+}, data: unknown): {
+    type: 'CONVERGE_DECLARE_APP_INFO';
+    payload: {
+        appName: string;
+        version: string;
+        serviceKey: string;
+    };
+} | null;
+export declare function registerAppInfo(info: {
+    appName: string;
+    version: string;
+}): () => void;
 export declare function navigateToApp(serviceKey: string, options?: {
     path?: string;
 }): void;

package/frontend/ipc.js

@@ -27,6 +27,28 @@ export function sendDeclareAppInfo(payload) {
         return;
     window.parent.postMessage({ type: 'CONVERGE_DECLARE_APP_INFO', payload }, getParentOrigin());
 }
+export function appInfoDeclareFromAuth(info, data) {
+    const d = data;
+    if (!d || d.type !== 'CONVERGE_AUTH' || typeof d.serviceKey !== 'string')
+        return null;
+    return {
+        type: 'CONVERGE_DECLARE_APP_INFO',
+        payload: { appName: info.appName, version: info.version, serviceKey: d.serviceKey },
+    };
+}
+export function registerAppInfo(info) {
+    if (!isEmbedded())
+        return () => { };
+    const handler = (event) => {
+        if (!isFromPlatformParent(event))
+            return;
+        const message = appInfoDeclareFromAuth(info, event.data);
+        if (message)
+            window.parent.postMessage(message, getParentOrigin());
+    };
+    window.addEventListener('message', handler);
+    return () => window.removeEventListener('message', handler);
+}
 export function navigateToApp(serviceKey, options) {
     if (!isEmbedded())
         return;

package/frontend/ui/Alert.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type AlertVariant = 'error' | 'success' | 'warning' | 'info';
+interface AlertProps {
+    variant?: AlertVariant;
+    children: React.ReactNode;
+    onDismiss?: () => void;
+    className?: string;
+}
+export declare function Alert({ variant, children, onDismiss, className }: AlertProps): React.JSX.Element;
+export {};

package/frontend/ui/Alert.js

@@ -0,0 +1,11 @@
+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" }) }))] }));
+}

package/frontend/ui/Badge.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type BadgeVariant = 'success' | 'warning' | 'danger' | 'neutral';
+interface BadgeProps {
+    variant?: BadgeVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Badge({ variant, children, className }: BadgeProps): React.JSX.Element;
+export {};

package/frontend/ui/Badge.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Badge({ variant = 'neutral', children, className = '' }) {
+    return (_jsx("span", { className: `badge badge-${variant} ${className}`, children: children }));
+}

package/frontend/ui/Button.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+type ButtonSize = 'sm' | 'md';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+}
+export declare function Button({ variant, size, loading, disabled, children, className, ...props }: ButtonProps): React.JSX.Element;
+export {};

package/frontend/ui/Button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2 } from 'lucide-react';
+const variantClasses = {
+    primary: 'bg-[var(--color-primary)] text-white border-transparent hover:bg-[var(--color-primary-hover)]',
+    secondary: 'bg-[var(--color-surface)] text-[var(--color-text-primary)] border-[var(--color-border)] hover:bg-[var(--color-surface-raised)]',
+    danger: 'bg-[var(--color-danger)] text-white border-transparent hover:opacity-90',
+    ghost: 'bg-transparent text-[var(--color-text-secondary)] border-transparent hover:bg-[var(--color-surface-raised)]',
+};
+const sizeClasses = {
+    sm: 'text-xs px-3 py-1.5 gap-1.5',
+    md: 'text-sm px-4 py-2 gap-2',
+};
+export function Button({ variant = 'primary', size = 'md', loading = false, disabled, children, className = '', ...props }) {
+    return (_jsxs("button", { disabled: disabled || loading, className: `inline-flex items-center justify-center font-medium rounded-md border transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses[variant]} ${sizeClasses[size]} ${className}`, ...props, children: [loading && _jsx(Loader2, { className: "w-4 h-4 animate-spin" }), children] }));
+}

package/frontend/ui/DataTable.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { type ViewPreferencesAdapter } from '../viewPreferences';
+export type FilterDef = {
+    type: 'text';
+} | {
+    type: 'multi-select';
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+} | {
+    type: 'boolean';
+    labelTrue?: string;
+    labelFalse?: string;
+};
+export interface ColumnDef<T> {
+    id: string;
+    label: string;
+    accessor: (row: T) => unknown;
+    cell?: (row: T) => React.ReactNode;
+    filter?: FilterDef;
+    sortable?: boolean;
+    width?: string;
+    defaultVisible?: boolean;
+}
+interface FilterValue {
+    text?: string;
+    selected?: string[];
+    bool?: 'true' | 'false' | null;
+}
+export declare const DEFAULT_VIEW_VERSION = 2;
+interface ViewPrefs {
+    columnVisibility: Record<string, boolean>;
+    columnOrder: string[];
+    sort: {
+        columnId: string;
+        direction: 'asc' | 'desc';
+    } | null;
+    filters: Record<string, FilterValue>;
+    groupBy: string[];
+    version?: number;
+}
+export interface DataTableSelectionProps<K> {
+    selected: Set<K>;
+    onChange: (next: Set<K>) => void;
+    bulkActions?: React.ReactNode;
+}
+interface DataTableProps<T, K extends string | number> {
+    listId: string;
+    rows: T[];
+    columns: ColumnDef<T>[];
+    rowKey: (row: T) => K;
+    onRowClick?: (row: T) => void;
+    selection?: DataTableSelectionProps<K>;
+    initialPrefs?: Partial<ViewPrefs>;
+    footer?: React.ReactNode;
+    persistence?: ViewPreferencesAdapter;
+}
+export declare function defaultPrefsFor<T>(columns: ColumnDef<T>[], overrides?: Partial<ViewPrefs>): ViewPrefs;
+export declare function groupLabelOf(value: unknown): string;
+interface RenderItem<T> {
+    kind: 'group' | 'row';
+    key?: string;
+    level?: number;
+    label?: string;
+    count?: number;
+    expanded?: boolean;
+    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 {};

package/frontend/ui/DataTable.js

@@ -0,0 +1,321 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import * as DropdownMenu from './DropdownMenu';
+import { ChevronDown, ChevronUp, ChevronRight, Settings, EyeOff, Filter, RotateCcw, ArrowUp, ArrowDown, Layers, X } from 'lucide-react';
+import { Button } from './Button';
+import { useViewPreferences } from '../viewPreferences';
+const GROUP_KEY_SEP = '\x1f';
+const EMPTY_GROUP_LABEL = '– ohne –';
+export const DEFAULT_VIEW_VERSION = 2;
+export function defaultPrefsFor(columns, overrides) {
+    const visibility = {};
+    columns.forEach((c) => { visibility[c.id] = c.defaultVisible !== false; });
+    return {
+        columnVisibility: visibility,
+        columnOrder: columns.map((c) => c.id),
+        sort: null,
+        filters: {},
+        groupBy: [],
+        version: DEFAULT_VIEW_VERSION,
+        ...(overrides ?? {}),
+    };
+}
+export function groupLabelOf(value) {
+    if (value == null)
+        return '';
+    if (Array.isArray(value))
+        return value.map(String).join(', ');
+    const s = String(value).trim();
+    return s;
+}
+export function buildRenderItems(rows, groupBy, columnsById, expandedGroups) {
+    if (groupBy.length === 0)
+        return rows.map((row) => ({ kind: 'row', row }));
+    const out = [];
+    const recurse = (subset, depth, parentKey) => {
+        if (depth >= groupBy.length) {
+            subset.forEach((row) => out.push({ kind: 'row', row }));
+            return;
+        }
+        const col = columnsById.get(groupBy[depth]);
+        if (!col) {
+            subset.forEach((row) => out.push({ kind: 'row', row }));
+            return;
+        }
+        const buckets = new Map();
+        for (const r of subset) {
+            const lbl = groupLabelOf(col.accessor(r));
+            const bucketLabel = lbl || EMPTY_GROUP_LABEL;
+            const arr = buckets.get(bucketLabel) ?? [];
+            arr.push(r);
+            buckets.set(bucketLabel, arr);
+        }
+        const labels = Array.from(buckets.keys()).sort((a, b) => {
+            if (a === EMPTY_GROUP_LABEL)
+                return 1;
+            if (b === EMPTY_GROUP_LABEL)
+                return -1;
+            return a.localeCompare(b, 'de');
+        });
+        for (const label of labels) {
+            const childRows = buckets.get(label);
+            const key = parentKey ? `${parentKey}${GROUP_KEY_SEP}${label}` : label;
+            const expanded = expandedGroups.has(key);
+            out.push({
+                kind: 'group',
+                key,
+                level: depth,
+                label,
+                count: childRows.length,
+                expanded,
+            });
+            if (expanded)
+                recurse(childRows, depth + 1, key);
+        }
+    };
+    recurse(rows, 0, '');
+    return out;
+}
+export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection, initialPrefs, footer, persistence, }) {
+    const defaultPrefs = useMemo(() => defaultPrefsFor(columns, initialPrefs), [columns, initialPrefs]);
+    const [prefs, setPrefs, reset] = useViewPreferences(listId, defaultPrefs, persistence);
+    const [expandedGroups, setExpandedGroups] = useState(new Set());
+    const toggleGroup = (key) => {
+        setExpandedGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    };
+    const columnsById = useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
+    const groupBy = prefs.groupBy ?? [];
+    const visibleColumns = useMemo(() => {
+        const byId = new Map(columns.map((c) => [c.id, c]));
+        return prefs.columnOrder
+            .map((id) => byId.get(id))
+            .filter((c) => Boolean(c) && prefs.columnVisibility[c.id] !== false);
+    }, [columns, prefs.columnOrder, prefs.columnVisibility]);
+    const sortedFilteredRows = useMemo(() => {
+        let out = rows;
+        for (const col of columns) {
+            const f = prefs.filters[col.id];
+            if (!f || !col.filter)
+                continue;
+            if (col.filter.type === 'text' && f.text) {
+                const q = f.text.toLowerCase();
+                out = out.filter((r) => {
+                    const v = col.accessor(r);
+                    return v != null && String(v).toLowerCase().includes(q);
+                });
+            }
+            else if (col.filter.type === 'multi-select' && f.selected && f.selected.length > 0) {
+                const set = new Set(f.selected);
+                out = out.filter((r) => {
+                    const v = col.accessor(r);
+                    if (Array.isArray(v))
+                        return v.some((x) => set.has(String(x)));
+                    return v != null && set.has(String(v));
+                });
+            }
+            else if (col.filter.type === 'boolean' && f.bool != null) {
+                out = out.filter((r) => String(Boolean(col.accessor(r))) === f.bool);
+            }
+        }
+        if (prefs.sort) {
+            const col = columns.find((c) => c.id === prefs.sort.columnId);
+            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);
+                    if (va == null && vb == null)
+                        return 0;
+                    if (va == null)
+                        return 1 * dir;
+                    if (vb == null)
+                        return -1 * dir;
+                    if (typeof va === 'number' && typeof vb === 'number')
+                        return (va - vb) * dir;
+                    return String(va).localeCompare(String(vb), 'de') * dir;
+                });
+            }
+        }
+        return out;
+    }, [rows, columns, prefs.filters, prefs.sort]);
+    const allSelected = !!selection && sortedFilteredRows.length > 0
+        && sortedFilteredRows.every((r) => selection.selected.has(rowKey(r)));
+    const toggleAll = () => {
+        if (!selection)
+            return;
+        const next = new Set(selection.selected);
+        if (allSelected)
+            sortedFilteredRows.forEach((r) => next.delete(rowKey(r)));
+        else
+            sortedFilteredRows.forEach((r) => next.add(rowKey(r)));
+        selection.onChange(next);
+    };
+    const toggleOne = (key) => {
+        if (!selection)
+            return;
+        const next = new Set(selection.selected);
+        if (next.has(key))
+            next.delete(key);
+        else
+            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 setSort = (columnId, direction) => {
+        setPrefs({ ...prefs, sort: { columnId, direction } });
+    };
+    const clearSort = () => {
+        setPrefs({ ...prefs, sort: null });
+    };
+    const setColumnVisible = (columnId, visible) => {
+        setPrefs({
+            ...prefs,
+            columnVisibility: { ...prefs.columnVisibility, [columnId]: visible },
+        });
+    };
+    const moveColumn = (columnId, dir) => {
+        const order = [...prefs.columnOrder];
+        const idx = order.indexOf(columnId);
+        if (idx < 0)
+            return;
+        const newIdx = idx + dir;
+        if (newIdx < 0 || newIdx >= order.length)
+            return;
+        [order[idx], order[newIdx]] = [order[newIdx], order[idx]];
+        setPrefs({ ...prefs, columnOrder: order });
+    };
+    const addGroupBy = (columnId) => {
+        if (groupBy.includes(columnId))
+            return;
+        setPrefs({ ...prefs, groupBy: [...groupBy, columnId] });
+        setExpandedGroups(new Set());
+    };
+    const removeGroupBy = (columnId) => {
+        setPrefs({ ...prefs, groupBy: groupBy.filter((id) => id !== columnId) });
+        setExpandedGroups(new Set());
+    };
+    const moveGroupBy = (columnId, dir) => {
+        const order = [...groupBy];
+        const idx = order.indexOf(columnId);
+        if (idx < 0)
+            return;
+        const newIdx = idx + dir;
+        if (newIdx < 0 || newIdx >= order.length)
+            return;
+        [order[idx], order[newIdx]] = [order[newIdx], order[idx]];
+        setPrefs({ ...prefs, groupBy: order });
+        setExpandedGroups(new Set());
+    };
+    const clearGroupBy = () => {
+        setPrefs({ ...prefs, groupBy: [] });
+        setExpandedGroups(new Set());
+    };
+    const setFilter = (columnId, value) => {
+        const filters = { ...prefs.filters };
+        if (value == null || ((value.text == null || value.text === '') &&
+            (value.selected == null || value.selected.length === 0) &&
+            (value.bool == null))) {
+            delete filters[columnId];
+        }
+        else {
+            filters[columnId] = value;
+        }
+        setPrefs({ ...prefs, filters });
+    };
+    return (_jsxs("div", { className: "border border-[var(--color-border)]", 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] })), _jsxs("div", { className: "grid items-center 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) => {
+                        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));
+                    }), _jsx(ColumnInventoryButton, { columns: columns, prefs: prefs, setColumnVisible: setColumnVisible, moveColumn: moveColumn, reset: reset, groupBy: groupBy, addGroupBy: addGroupBy, removeGroupBy: removeGroupBy, moveGroupBy: moveGroupBy, clearGroupBy: clearGroupBy })] }), 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;
+                return (_jsxs("div", { className: `grid items-center px-3 py-2 text-sm border-b border-[var(--color-border)] ${onRowClick ? 'cursor-pointer hover:bg-[var(--color-surface-raised)]' : ''}`, style: {
+                        gridTemplateColumns: gridTemplate,
+                        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}`));
+            })), footer && (_jsx("div", { className: "px-3 py-2 text-xs text-[var(--color-text-muted)] border-t border-[var(--color-border)]", children: footer }))] }));
+}
+function FilterEditor({ column, value, onChange, }) {
+    if (!column.filter)
+        return null;
+    const f = column.filter;
+    if (f.type === 'text') {
+        return (_jsxs("div", { className: "px-2 py-1.5 space-y-1", children: [_jsx("label", { className: "block text-xs text-[var(--color-text-muted)]", children: "Enth\u00E4lt" }), _jsx("input", { type: "text", value: value?.text ?? '', onChange: (e) => onChange({ text: e.target.value }), onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), className: "w-full px-2 py-1 text-xs border border-[var(--color-border)] bg-[var(--color-surface)]", style: { borderRadius: 'var(--border-radius-md)' } }), value?.text && (_jsx("button", { type: "button", className: "text-xs underline text-[var(--color-text-muted)]", onClick: () => onChange(undefined), children: "Filter entfernen" }))] }));
+    }
+    if (f.type === 'multi-select') {
+        const selected = new Set(value?.selected ?? []);
+        return (_jsxs("div", { className: "px-2 py-1.5 space-y-1 max-h-[300px] overflow-auto", children: [_jsxs("div", { className: "flex items-center justify-between text-xs text-[var(--color-text-muted)]", children: [_jsx("button", { type: "button", onClick: (e) => { e.preventDefault(); onChange(undefined); }, className: "hover:text-[var(--color-text-primary)] underline", children: "Alle" }), _jsx("span", { children: selected.size > 0 ? `${selected.size} aktiv` : '' })] }), f.options.map((opt) => {
+                    const checked = selected.has(opt.value);
+                    return (_jsxs("button", { type: "button", onClick: (e) => {
+                            e.preventDefault();
+                            const next = new Set(selected);
+                            if (checked)
+                                next.delete(opt.value);
+                            else
+                                next.add(opt.value);
+                            onChange(next.size === 0 ? undefined : { selected: Array.from(next) });
+                        }, className: "flex items-center gap-2 w-full px-1 py-1 text-left text-xs hover:bg-[var(--color-surface-raised)]", children: [_jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 border", style: {
+                                    borderColor: 'var(--color-border)',
+                                    background: checked ? 'var(--color-primary)' : 'var(--color-surface)',
+                                    color: 'white',
+                                    borderRadius: 'var(--border-radius-md)',
+                                    fontSize: 10,
+                                }, children: checked ? '✓' : '' }), _jsx("span", { children: opt.label })] }, opt.value));
+                })] }));
+    }
+    if (f.type === 'boolean') {
+        return (_jsxs("div", { className: "px-2 py-1.5 space-y-1", children: [_jsx("label", { className: "block text-xs text-[var(--color-text-muted)]", children: "Filter" }), _jsxs("select", { value: value?.bool ?? '', onChange: (e) => {
+                        const v = e.target.value;
+                        onChange(v === '' ? undefined : { bool: v });
+                    }, onClick: (e) => e.stopPropagation(), className: "w-full px-2 py-1 text-xs border border-[var(--color-border)] bg-[var(--color-surface)]", style: { borderRadius: 'var(--border-radius-md)' }, children: [_jsx("option", { value: "", children: "\u2013 alle \u2013" }), _jsx("option", { value: "true", children: f.labelTrue ?? 'Ja' }), _jsx("option", { value: "false", children: f.labelFalse ?? 'Nein' })] })] }));
+    }
+    return null;
+}
+function ColumnInventoryButton({ columns, prefs, setColumnVisible, moveColumn, reset, groupBy, addGroupBy, removeGroupBy, moveGroupBy, clearGroupBy, }) {
+    const groupableCandidates = columns.filter((c) => !groupBy.includes(c.id));
+    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);
+    }, [columns, prefs.columnOrder]);
+    return (_jsxs(DropdownMenu.Root, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx("button", { type: "button", className: "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);
+                                return (_jsxs("div", { className: "flex items-center gap-2 px-1 py-1 text-xs", children: [_jsxs("span", { className: "text-[var(--color-text-muted)] w-4", children: [idx + 1, "."] }), _jsx("span", { className: "flex-1 truncate", children: col?.label ?? id }), _jsx("button", { type: "button", disabled: idx === 0, onClick: () => moveGroupBy(id, -1), className: "p-0.5 disabled:opacity-30 hover:bg-[var(--color-surface-raised)]", title: "Ebene hoch", style: { borderRadius: 'var(--border-radius-md)' }, children: _jsx(ArrowUp, { className: "w-3 h-3" }) }), _jsx("button", { type: "button", disabled: idx === groupBy.length - 1, onClick: () => moveGroupBy(id, 1), className: "p-0.5 disabled:opacity-30 hover:bg-[var(--color-surface-raised)]", title: "Ebene runter", style: { borderRadius: 'var(--border-radius-md)' }, children: _jsx(ArrowDown, { className: "w-3 h-3" }) }), _jsx("button", { type: "button", onClick: () => removeGroupBy(id), className: "p-0.5 text-[var(--color-text-muted)] hover:text-[var(--color-danger)]", title: "Diese Ebene entfernen", style: { borderRadius: 'var(--border-radius-md)' }, children: _jsx(X, { className: "w-3 h-3" }) })] }, id));
+                            }), _jsx("button", { type: "button", onClick: clearGroupBy, className: "text-xs underline text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] px-1", children: "Alle aufheben" })] })), groupableCandidates.length > 0 && (_jsxs("div", { className: "mb-2 flex items-center gap-2 px-1", onClick: (e) => e.stopPropagation(), children: [_jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "Ebene hinzuf\u00FCgen:" }), _jsxs("select", { defaultValue: "", onChange: (e) => {
+                                    const v = e.target.value;
+                                    if (v)
+                                        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;
+                        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-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-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/Dialog.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+interface DialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactNode;
+    title: string;
+    description?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+export declare function Dialog({ open, onOpenChange, trigger, title, description, children, footer }: DialogProps): React.JSX.Element;
+export declare const DialogClose: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/frontend/ui/Dialog.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+export function Dialog({ open, onOpenChange, trigger, title, description, children, footer }) {
+    return (_jsxs(RadixDialog.Root, { open: open, onOpenChange: onOpenChange, children: [trigger && _jsx(RadixDialog.Trigger, { asChild: true, children: trigger }), _jsxs(RadixDialog.Portal, { children: [_jsx(RadixDialog.Overlay, { className: "fixed inset-0 bg-black/40 z-40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(RadixDialog.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-full max-w-md rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] shadow-lg focus:outline-none 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", children: [_jsxs("div", { className: "flex items-start justify-between p-5 border-b border-[var(--color-border)]", children: [_jsxs("div", { children: [_jsx(RadixDialog.Title, { className: "text-base font-semibold text-[var(--color-text-primary)]", children: title }), description && (_jsx(RadixDialog.Description, { className: "text-sm text-[var(--color-text-muted)] mt-0.5", children: description }))] }), _jsx(RadixDialog.Close, { className: "ml-4 p-1 rounded-md text-[var(--color-text-muted)] hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text-primary)] transition-colors", children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx("div", { className: "p-5", children: children }), footer && (_jsx("div", { className: "flex items-center justify-end gap-2 px-5 pb-5", children: footer }))] })] })] }));
+}
+export const DialogClose = RadixDialog.Close;

package/frontend/ui/DropdownMenu.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as Radix from '@radix-ui/react-dropdown-menu';
+export declare const Root: React.FC<Radix.DropdownMenuProps>;
+export declare const Trigger: React.ForwardRefExoticComponent<Radix.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Portal: React.FC<Radix.DropdownMenuPortalProps>;
+export declare const Content: React.ForwardRefExoticComponent<Omit<Radix.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface ItemProps extends React.ComponentPropsWithoutRef<typeof Radix.Item> {
+    variant?: 'default' | 'danger';
+}
+export declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Separator: React.ForwardRefExoticComponent<Omit<Radix.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Label: React.ForwardRefExoticComponent<Omit<Radix.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/frontend/ui/DropdownMenu.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import * as Radix from '@radix-ui/react-dropdown-menu';
+export const Root = Radix.Root;
+export const Trigger = Radix.Trigger;
+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] rounded-md 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-md 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)]'
+        : '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 })));
+Separator.displayName = 'DropdownMenu.Separator';
+export const Label = React.forwardRef(({ className = '', ...props }, ref) => (_jsx(Radix.Label, { ref: ref, className: `px-3 py-1 text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wide ${className}`, ...props })));
+Label.displayName = 'DropdownMenu.Label';

package/frontend/ui/EmptyState.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+interface EmptyStateProps {
+    icon: LucideIcon;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+export declare function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps): React.JSX.Element;
+export {};

package/frontend/ui/EmptyState.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function EmptyState({ icon: Icon, title, description, action }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center text-center py-12 px-6", children: [_jsx("div", { className: "text-[var(--color-text-muted)] mb-3", children: _jsx(Icon, { className: "w-10 h-10 mx-auto" }) }), _jsx("p", { className: "text-base font-semibold text-[var(--color-text-primary)]", children: title }), description && (_jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mt-1 max-w-xs", children: description })), action && _jsx("div", { className: "mt-4", children: action })] }));
+}

package/frontend/ui/Input.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+export declare function Input({ className, ...props }: InputProps): React.JSX.Element;
+export {};

package/frontend/ui/Input.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Input({ className = '', ...props }) {
+    return (_jsx("input", { className: `w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent bg-[var(--color-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] transition-colors ${className}`, ...props }));
+}

package/frontend/ui/RecordDialog.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export type RecordDialogMode = 'read' | 'edit' | 'create';
+interface RecordDialogProps {
+    open: {
+        id: string;
+        item?: any;
+    } | null;
+    onOpenChange(open: {
+        id: string;
+        item?: any;
+    } | null): void;
+    mode?: RecordDialogMode;
+    onModeChange?(mode: RecordDialogMode): void;
+    title: string;
+    readContent: React.ReactNode;
+    editContent: React.ReactNode;
+    onSave(mode: 'edit' | 'create'): Promise<void> | void;
+    saving?: boolean;
+    saveDisabled?: boolean;
+    error?: string;
+    onErrorDismiss?: () => void;
+    labels?: {
+        close?: string;
+        cancel?: string;
+        save?: string;
+        create?: string;
+        edit?: string;
+    };
+}
+export declare function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, labels, }: RecordDialogProps): React.JSX.Element;
+export {};

package/frontend/ui/RecordDialog.js

@@ -0,0 +1,38 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Pencil } from 'lucide-react';
+import { Dialog, DialogClose } from './Dialog';
+import { Button } from './Button';
+import { Alert } from './Alert';
+export function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, labels, }) {
+    const [internalMode, setInternalMode] = useState('read');
+    const mode = controlledMode ?? internalMode;
+    useEffect(() => {
+        if (!open)
+            return;
+        const initial = open.id === 'new' ? 'create' : 'read';
+        if (controlledMode === undefined)
+            setInternalMode(initial);
+        onModeChange?.(initial);
+    }, [open?.id]);
+    function setMode(next) {
+        if (controlledMode === undefined)
+            setInternalMode(next);
+        onModeChange?.(next);
+    }
+    function handleClose() {
+        onOpenChange(null);
+    }
+    async function handleSave() {
+        if (mode === 'read')
+            return;
+        await onSave(mode);
+    }
+    const closeLabel = labels?.close ?? 'Schließen';
+    const cancelLabel = labels?.cancel ?? 'Abbrechen';
+    const saveLabel = labels?.save ?? 'Speichern';
+    const createLabel = labels?.create ?? 'Erstellen';
+    const editLabel = labels?.edit ?? 'Bearbeiten';
+    return (_jsx(Dialog, { open: open !== null, onOpenChange: (o) => { if (!o)
+            handleClose(); }, title: title, 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] })) : (_jsxs("div", { className: "flex flex-col gap-4", children: [error && (_jsx(Alert, { variant: "error", onDismiss: onErrorDismiss, children: error })), editContent] })) }));
+}

package/frontend/ui/Skeleton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SkeletonProps {
+    className?: string;
+    width?: string | number;
+    height?: string | number;
+}
+export declare function Skeleton({ className, width, height }: SkeletonProps): React.JSX.Element;
+export declare function SkeletonRow(): React.JSX.Element;
+export {};

package/frontend/ui/Skeleton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Skeleton({ className = '', width, height }) {
+    return (_jsx("div", { className: `skeleton ${className}`, style: { width, height } }));
+}
+export function SkeletonRow() {
+    return (_jsxs("div", { className: "flex items-center gap-3 py-2", children: [_jsx(Skeleton, { width: 120, height: 14 }), _jsx(Skeleton, { width: 80, height: 14 })] }));
+}

package/frontend/ui/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare function TooltipProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    delayDuration?: number;
+}
+export declare function Tooltip({ content, children, side, delayDuration }: TooltipProps): React.JSX.Element;
+export {};

package/frontend/ui/Tooltip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+export function TooltipProvider({ children }) {
+    return _jsx(RadixTooltip.Provider, { children: children });
+}
+export function Tooltip({ content, children, side = 'top', delayDuration = 300 }) {
+    return (_jsxs(RadixTooltip.Root, { delayDuration: delayDuration, children: [_jsx(RadixTooltip.Trigger, { asChild: true, children: children }), _jsx(RadixTooltip.Portal, { children: _jsxs(RadixTooltip.Content, { side: side, sideOffset: 6, className: "z-50 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1.5 text-xs text-[var(--color-text-primary)] shadow-md animate-in fade-in-0 zoom-in-95", children: [content, _jsx(RadixTooltip.Arrow, { className: "fill-[var(--color-border)]" })] }) })] }));
+}

package/frontend/ui/index.d.ts

@@ -0,0 +1,11 @@
+export { Button } from './Button';
+export { Input } from './Input';
+export { Badge } from './Badge';
+export { Alert, type AlertVariant } from './Alert';
+export { Dialog, DialogClose } from './Dialog';
+export * as DropdownMenu from './DropdownMenu';
+export { Tooltip, TooltipProvider } from './Tooltip';
+export { EmptyState } from './EmptyState';
+export { Skeleton, SkeletonRow } from './Skeleton';
+export { RecordDialog, type RecordDialogMode } from './RecordDialog';
+export { DataTable, DEFAULT_VIEW_VERSION, type ColumnDef, type FilterDef, type DataTableSelectionProps, } from './DataTable';

package/frontend/ui/index.js

@@ -0,0 +1,11 @@
+export { Button } from './Button';
+export { Input } from './Input';
+export { Badge } from './Badge';
+export { Alert } from './Alert';
+export { Dialog, DialogClose } from './Dialog';
+export * as DropdownMenu from './DropdownMenu';
+export { Tooltip, TooltipProvider } from './Tooltip';
+export { EmptyState } from './EmptyState';
+export { Skeleton, SkeletonRow } from './Skeleton';
+export { RecordDialog } from './RecordDialog';
+export { DataTable, DEFAULT_VIEW_VERSION, } from './DataTable';

package/frontend/ui/styles.css

@@ -0,0 +1,53 @@
+/**
+ * @efa-one/sdk/frontend/ui/styles.css
+ *
+ * Globale Hilfsklassen, die `Badge` und `Skeleton` 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';
+ *
+ * Die Design-Tokens (`--color-*`, `--border-radius-*`) definiert die App selbst
+ * (Kernel-Theme-überschrieben zur Laufzeit) — hier bewusst NICHT dupliziert.
+ */
+
+/* ── Badge utilities ─────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: var(--border-radius-sm);
+  font-size: 12px;
+  font-weight: 500;
+}
+.badge-success {
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
+  color: var(--color-success);
+}
+.badge-warning {
+  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
+  color: var(--color-warning);
+}
+.badge-danger {
+  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
+  color: var(--color-danger);
+}
+.badge-neutral {
+  background: var(--color-surface-raised);
+  color: var(--color-text-secondary);
+}
+
+/* ── Skeleton loading ────────────────────────────────────────── */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-raised) 25%,
+    var(--color-border) 50%,
+    var(--color-surface-raised) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: var(--border-radius-md);
+}
+@keyframes shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}

package/frontend/viewPreferences.d.ts

@@ -0,0 +1,11 @@
+export interface ViewPreferencesAdapter {
+    get<T = unknown>(listId: string): Promise<T | null>;
+    put(listId: string, prefs: unknown): void | Promise<void>;
+    reset(listId: string): void | Promise<void>;
+}
+export interface ViewPreferencesClientOptions {
+    apiBase?: string | (() => string);
+    fetchImpl?: typeof fetch;
+}
+export declare function createViewPreferencesClient(opts?: ViewPreferencesClientOptions): ViewPreferencesAdapter;
+export declare function useViewPreferences<T extends object>(listId: string, defaultPrefs: T, adapter?: ViewPreferencesAdapter): [T, (next: T) => void, () => Promise<void>, boolean];

package/frontend/viewPreferences.js

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+export function createViewPreferencesClient(opts = {}) {
+    const resolveBase = typeof opts.apiBase === 'function'
+        ? opts.apiBase
+        : () => opts.apiBase ?? '';
+    const f = opts.fetchImpl ?? fetch;
+    const url = (listId) => `${resolveBase()}/api/view-preferences/${encodeURIComponent(listId)}`;
+    return {
+        async get(listId) {
+            const res = await f(url(listId), { credentials: 'include' });
+            if (res.status === 204 || !res.ok)
+                return null;
+            return res.json();
+        },
+        async put(listId, prefs) {
+            await f(url(listId), {
+                method: 'PUT',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(prefs),
+            });
+        },
+        async reset(listId) {
+            await f(url(listId), { method: 'DELETE', credentials: 'include' });
+        },
+    };
+}
+export function useViewPreferences(listId, defaultPrefs, adapter) {
+    const [prefs, setPrefsState] = useState(defaultPrefs);
+    const [loaded, setLoaded] = useState(!adapter);
+    const saveTimer = useRef(null);
+    useEffect(() => {
+        if (!adapter)
+            return;
+        let cancelled = false;
+        Promise.resolve(adapter.get(listId))
+            .then((remote) => {
+            if (cancelled)
+                return;
+            const hasRemote = !!remote && typeof remote === 'object';
+            const dv = defaultPrefs.version;
+            const rv = hasRemote ? remote.version : undefined;
+            if (hasRemote && rv === dv) {
+                setPrefsState({ ...defaultPrefs, ...remote });
+            }
+            else {
+                setPrefsState(defaultPrefs);
+                if (hasRemote)
+                    Promise.resolve(adapter.reset(listId)).catch(() => { });
+            }
+            setLoaded(true);
+        })
+            .catch(() => setLoaded(true));
+        return () => { cancelled = true; };
+    }, [listId]);
+    const setPrefs = useCallback((next) => {
+        setPrefsState(next);
+        if (!adapter || !loaded)
+            return;
+        if (saveTimer.current != null)
+            window.clearTimeout(saveTimer.current);
+        saveTimer.current = window.setTimeout(() => {
+            Promise.resolve(adapter.put(listId, next)).catch((err) => {
+                console.warn('view-preferences save failed', err);
+            });
+        }, 600);
+    }, [listId, loaded, adapter]);
+    const reset = useCallback(async () => {
+        setPrefsState(defaultPrefs);
+        if (!adapter)
+            return;
+        try {
+            await adapter.reset(listId);
+        }
+        catch {
+        }
+    }, [listId, defaultPrefs, adapter]);
+    return [prefs, setPrefs, reset, loaded];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@efa-one/sdk",
-  "version": "1.10.2",
+  "version": "1.12.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",
@@ -20,6 +20,12 @@
       "import": "./frontend/index.js",
       "default": "./frontend/index.js"
     },
+    "./frontend/ui": {
+      "types": "./frontend/ui/index.d.ts",
+      "import": "./frontend/ui/index.js",
+      "default": "./frontend/ui/index.js"
+    },
+    "./frontend/ui/styles.css": "./frontend/ui/styles.css",
     "./frontend/*": {
       "types": "./frontend/*.d.ts",
       "import": "./frontend/*.js",
@@ -35,7 +41,7 @@
   "scripts": {
     "clean": "rm -rf backend frontend",
     "build:backend": "tsc -p tsconfig.backend.json",
-    "build:frontend": "tsc -p tsconfig.frontend.json && node -e \"require('fs').writeFileSync('frontend/package.json', JSON.stringify({type:'module'}))\"",
+    "build:frontend": "tsc -p tsconfig.frontend.json && node -e \"const fs=require('fs');fs.writeFileSync('frontend/package.json', JSON.stringify({type:'module'}));fs.copyFileSync('src/frontend/ui/styles.css','frontend/ui/styles.css')\"",
     "build": "npm run clean && npm run build:backend && npm run build:frontend",
     "typecheck": "tsc -p tsconfig.backend.json --noEmit && tsc -p tsconfig.frontend.json --noEmit",
     "test": "vitest run",
@@ -45,12 +51,17 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@radix-ui/react-dialog": ">=1",
+    "@radix-ui/react-dropdown-menu": ">=1",
+    "@radix-ui/react-tooltip": ">=1",
     "express": ">=4",
     "i18next": ">=23",
     "i18next-http-backend": ">=2",
     "jsonwebtoken": ">=9",
+    "lucide-react": ">=0.400.0",
     "pg": ">=8",
     "react": ">=18",
+    "react-dom": ">=18",
     "react-i18next": ">=13"
   },
   "peerDependenciesMeta": {
@@ -66,6 +77,9 @@
     "react": {
       "optional": true
     },
+    "react-dom": {
+      "optional": true
+    },
     "i18next": {
       "optional": true
     },
@@ -74,12 +88,28 @@
     },
     "react-i18next": {
       "optional": true
+    },
+    "@radix-ui/react-dialog": {
+      "optional": true
+    },
+    "@radix-ui/react-dropdown-menu": {
+      "optional": true
+    },
+    "@radix-ui/react-tooltip": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "@types/express": "^4.17.21",
     "@types/jsonwebtoken": "^9.0.6",
     "cookie-parser": "^1.4.6",
+    "lucide-react": "^0.468.0",
     "@types/node": "^20.14.0",
     "@types/pg": "^8.11.0",
     "@types/react": "^18.2.46",
@@ -90,6 +120,8 @@
     "jsonwebtoken": "^9.0.2",
     "pg": "^8.12.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "react-i18next": "^13.5.0",
     "supertest": "^7.2.2",
     "typescript": "7.0.2",