@efa-one/sdk 1.12.0 → 1.13.1

package/frontend/index.d.ts

@@ -1,3 +1,3 @@
-export * from './ipc';
-export * from './i18n';
-export { default as DevHeader } from './DevHeader';
+export * from './ipc.js';
+export * from './i18n.js';
+export { default as DevHeader } from './DevHeader.js';

package/frontend/index.js

@@ -1,3 +1,3 @@
-export * from './ipc';
-export * from './i18n';
-export { default as DevHeader } from './DevHeader';
+export * from './ipc.js';
+export * from './i18n.js';
+export { default as DevHeader } from './DevHeader.js';

package/frontend/ui/Button.js

@@ -11,5 +11,5 @@ const sizeClasses = {
     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] }));
+    return (_jsxs("button", { disabled: disabled || loading, className: `inline-flex items-center justify-center font-medium rounded-sm 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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ViewPreferencesAdapter } from '../viewPreferences';
+import { type ViewPreferencesAdapter } from '../viewPreferences.js';
 export type FilterDef = {
     type: 'text';
 } | {

package/frontend/ui/DataTable.js

@@ -1,9 +1,9 @@
 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 * as DropdownMenu from './DropdownMenu.js';
 import { ChevronDown, ChevronUp, ChevronRight, Settings, EyeOff, Filter, RotateCcw, ArrowUp, ArrowDown, Layers, X } from 'lucide-react';
-import { Button } from './Button';
-import { useViewPreferences } from '../viewPreferences';
+import { Button } from './Button.js';
+import { useViewPreferences } from '../viewPreferences.js';
 const GROUP_KEY_SEP = '\x1f';
 const EMPTY_GROUP_LABEL = '– ohne –';
 export const DEFAULT_VIEW_VERSION = 2;

package/frontend/ui/Dialog.d.ts

@@ -7,8 +7,10 @@ interface DialogProps {
     title: string;
     description?: string;
     children: React.ReactNode;
+    banner?: React.ReactNode;
     footer?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
 }
-export declare function Dialog({ open, onOpenChange, trigger, title, description, children, footer }: DialogProps): React.JSX.Element;
+export declare function Dialog({ open, onOpenChange, trigger, title, description, children, banner, footer, size }: DialogProps): React.JSX.Element;
 export declare const DialogClose: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/frontend/ui/Dialog.js

@@ -1,7 +1,12 @@
 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 }))] })] })] }));
+const SIZE_CLASS = {
+    sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-lg',
+    xl: 'max-w-xl', '2xl': 'max-w-2xl', '3xl': 'max-w-3xl',
+    '4xl': 'max-w-4xl', '5xl': 'max-w-5xl',
+};
+export function Dialog({ open, onOpenChange, trigger, title, description, children, banner, footer, size = 'md' }) {
+    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 ${SIZE_CLASS[size]} flex flex-col max-h-[90vh] 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: "shrink-0 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-full 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" }) })] }), banner && _jsx("div", { className: "shrink-0 px-5 pt-5", children: banner }), _jsx("div", { className: "min-h-0 overflow-y-auto p-5", children: children }), footer && (_jsx("div", { className: "shrink-0 flex items-center justify-end gap-2 px-5 pb-5", children: footer }))] })] })] }));
 }
 export const DialogClose = RadixDialog.Close;

package/frontend/ui/DropdownMenu.js

@@ -4,9 +4,9 @@ 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 }) })));
+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-md cursor-pointer outline-none select-none transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none ${variant === 'danger'
+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)]'
         : 'text-[var(--color-text-primary)] data-[highlighted]:bg-[var(--color-surface-raised)]'} ${className}`, ...props })));
 Item.displayName = 'DropdownMenu.Item';

package/frontend/ui/Input.js

@@ -1,4 +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 }));
+    return (_jsx("input", { className: `w-full px-3 py-2 border border-[var(--color-border)] rounded-sm 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.js

@@ -1,9 +1,9 @@
 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';
+import { Dialog, DialogClose } from './Dialog.js';
+import { Button } from './Button.js';
+import { Alert } from './Alert.js';
 export function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeChange, title, readContent, editContent, onSave, saving, saveDisabled, error, onErrorDismiss, labels, }) {
     const [internalMode, setInternalMode] = useState('read');
     const mode = controlledMode ?? internalMode;
@@ -34,5 +34,7 @@ export function RecordDialog({ open, onOpenChange, mode: controlledMode, onModeC
     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] })) }));
+            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 })) }));
 }

package/frontend/ui/Tooltip.js

@@ -4,5 +4,5 @@ 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)]" })] }) })] }));
+    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-sm 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

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

package/frontend/ui/index.js

@@ -1,11 +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';
+export { Button } from './Button.js';
+export { Input } from './Input.js';
+export { Badge } from './Badge.js';
+export { Alert } from './Alert.js';
+export { Dialog, DialogClose } from './Dialog.js';
+export * as DropdownMenu from './DropdownMenu.js';
+export { Tooltip, TooltipProvider } from './Tooltip.js';
+export { EmptyState } from './EmptyState.js';
+export { Skeleton, SkeletonRow } from './Skeleton.js';
+export { RecordDialog } from './RecordDialog.js';
+export { DataTable, DEFAULT_VIEW_VERSION, } from './DataTable.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@efa-one/sdk",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "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",
@@ -41,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 \"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:frontend": "tsc -p tsconfig.frontend.json && node scripts/postbuild-frontend.mjs",
     "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",