@auditcore/ui-core 0.3.0

package/dist/synopsis/viewModel.d.ts

@@ -0,0 +1,74 @@
+import { MessageParams } from '../i18n';
+import { SynopsisMessageKey } from './messages';
+import { CompareRow, ComparisonResult, ConsolidatedParagraph, DiffField, RowStatus } from './types';
+import { DiffSegment } from './wordDiff';
+export type SynopsisTranslate = (key: SynopsisMessageKey, params?: MessageParams) => string;
+export interface FieldView {
+    field: Exclude<DiffField, 'text'>;
+    label: string;
+    old: DiffSegment[];
+    new: DiffSegment[];
+    inline: DiffSegment[];
+}
+export interface RowView {
+    id: string;
+    status: RowStatus | string;
+    statusLabel: string;
+    location: string;
+    old: DiffSegment[];
+    new: DiffSegment[];
+    inline: DiffSegment[];
+    fields: FieldView[];
+    reason: string;
+    reasonSource: string;
+    reasonVerified: boolean | null;
+    reasonWarning: string;
+    selected: boolean;
+    isChange: boolean;
+    /** Suchtext: Fundstelle, beide Fassungen, Nebenfelder und Grund, kleingeschrieben. */
+    haystack: string;
+}
+export interface SynopsisView {
+    title: string;
+    oldLabel: string;
+    newLabel: string;
+    reasonLabel: string;
+    isArticleLaw: boolean;
+    countsText: string;
+    detectedText: string;
+    filesText: string;
+    hashesText: string;
+    createdAt: string;
+    notices: string[];
+    recognisedCommands: number;
+    openCommands: string[];
+    consolidated: readonly ConsolidatedParagraph[];
+    rows: RowView[];
+}
+export interface ViewOptions {
+    title?: string;
+    oldLabel?: string;
+    newLabel?: string;
+    /** Wortweise Hervorhebung; ohne sie bleiben Texte unmarkiert. */
+    highlight?: boolean;
+}
+export declare function statusLabel(status: string, t: SynopsisTranslate): string;
+export declare function buildRowView(row: CompareRow, highlight: boolean, t: SynopsisTranslate): RowView;
+export declare function buildSynopsisView(result: ComparisonResult, t: SynopsisTranslate, options?: ViewOptions): SynopsisView;
+export interface SynopsisRowFilter {
+    statuses: readonly string[];
+    query: string;
+    onlySelected: boolean;
+}
+export declare const DEFAULT_SYNOPSIS_FILTER: SynopsisRowFilter;
+export declare function filterRows(rows: readonly RowView[], filter: SynopsisRowFilter): RowView[];
+/** Kennungen der Änderungszeilen in Anzeigereihenfolge (Ziel der Navigation). */
+export declare function changeIds(rows: readonly RowView[]): string[];
+/**
+ * Nächste bzw. vorige Änderung; ohne aktuelle Position beginnt `+1` bei der
+ * ersten und `-1` bei der letzten. Am Rand bleibt die Position stehen.
+ */
+export declare function stepChange(ids: readonly string[], current: string | null, direction: 1 | -1): string | null;
+export declare function positionText(ids: readonly string[], current: string | null, t: SynopsisTranslate): string;
+/** Zeilen mit lokalen Änderungen (Auswahl, Grund) zusammenführen. */
+export declare function applyRowOverrides(rows: readonly CompareRow[], overrides: ReadonlyMap<string, Partial<CompareRow>>): CompareRow[];

package/dist/synopsis/wordDiff.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Wortdifferenz für die Anzeige, ohne Vue. Bevorzugt die vom Server gelieferte
+ * `difflib.ndiff`-Folge (`"  "` gleich, `"- "` entfallen, `"+ "` neu,
+ * `"? "` Hinweis); fehlt sie (Gesetzessynopse), rechnet eine längste gemeinsame
+ * Teilfolge über Wörter nach – wie `regulierung/frontend/src/lib/textDiff.ts`
+ * mit einer Obergrenze, damit die Oberfläche nicht einfriert.
+ */
+export type SegmentKind = 'same' | 'removed' | 'added';
+export type DiffSide = 'old' | 'new' | 'inline';
+export interface DiffSegment {
+    text: string;
+    kind: SegmentKind;
+}
+/** Oberhalb dieser Wortzahl je Seite wird nicht wortweise verglichen. */
+export declare const WORD_LIMIT = 1200;
+type Operation = readonly [SegmentKind, string];
+/** ndiff-Zeilen in Operationen übersetzen; Hinweiszeilen (`? `) entfallen. */
+export declare function ndiffOperations(lines: readonly string[]): Operation[];
+/** Längste gemeinsame Teilfolge über Wörter; `null` oberhalb von {@link WORD_LIMIT}. */
+export declare function lcsOperations(oldText: string, newText: string): Operation[] | null;
+/**
+ * Segmente einer Seite. `ndiff` hat Vorrang; ohne sie wird nachgerechnet.
+ * Ist keine Wortdifferenz möglich, bleibt der Text unmarkiert (seitenweise)
+ * bzw. erscheint inline als Streichung plus Einfügung.
+ */
+export declare function diffSegments(oldText: string, newText: string, side: DiffSide, ndiff?: readonly string[]): DiffSegment[];
+/** Ganze Texte als Streichung und Einfügung (neue/entfallene Stellen, Rückfall). */
+export declare function wholeSegments(oldText: string, newText: string): DiffSegment[];
+export declare function plainSegments(text: string): DiffSegment[];
+export declare function segmentsText(segments: readonly DiffSegment[]): string;
+export {};

package/dist/table/index.d.ts

@@ -0,0 +1,6 @@
+import { SortState, TableColumn, TableRow } from '@auditcore/common';
+export declare function cellText(column: TableColumn, row: TableRow): string;
+export declare function sortIcon(sort: SortState | null, key: string): 'sort' | 'sort-asc' | 'sort-desc';
+/** Schlüssel einer Zeile aus `rowKey`, sonst Position. */
+export declare function rowKeyOf(row: TableRow, rowKey: string, index: number): string;
+export declare function cellAlignClass(column: TableColumn): string;

package/dist/tabular/index.d.ts

@@ -0,0 +1,2 @@
+export { tabularMessages, type TabularMessageKey } from './messages';
+export * from './tableImport';

package/dist/tabular/messages.d.ts

@@ -0,0 +1,3 @@
+/** Texte des Datei-Imports (Stichprobe, Benford). */
+export declare const tabularMessages: import('..').Catalogs<"apply" | "header" | "summary" | "decimal" | "none" | "tab" | "rejected" | "file" | "valueColumn" | "idColumn" | "stratumColumn" | "decimalComma" | "decimalDot" | "column">;
+export type TabularMessageKey = keyof typeof tabularMessages.de;

package/dist/tabular/tableImport.d.ts

@@ -0,0 +1,40 @@
+import { DecimalSeparator, ParsedTable } from '@auditcore/common';
+/** Übernommene Spalten einer Datei. */
+export interface ImportedColumns {
+    filename: string;
+    values: (number | null)[];
+    /** Kennungen und Schichten der übernommenen Zeilen (gleiche Länge wie `values`). */
+    ids: string[] | null;
+    strata: string[] | null;
+    rejected: number[];
+}
+export interface TableImportData {
+    filename: string;
+    text: string;
+    table: ParsedTable | null;
+    hasHeader: boolean;
+    valueColumn: number;
+    idColumn: number | null;
+    stratumColumn: number | null;
+    decimal: DecimalSeparator;
+}
+/** Vorschau der übernommenen Werte (reine Funktion). */
+export declare function importPreview(state: TableImportData): ImportedColumns | null;
+/** Anzeige des Trennzeichens („Tabulator“ für `\t`). */
+export declare function importDelimiterText(table: ParsedTable | null, tab: string): string;
+/** Die ersten zehn unlesbaren Zeilen als Liste. */
+export declare function importRejectedLines(preview: ImportedColumns | null): string;
+/** Optionale Spalte aus einem Auswahlwert (`''` = keine). */
+export declare function importOptionalColumn(value: string): number | null;
+export declare function createTableImportController(): {
+    store: import('..').Store<TableImportData>;
+    load: (filename: string, text: string) => void;
+    reparse: () => void;
+    read: (file: File) => Promise<void>;
+    setHasHeader: (hasHeader: boolean) => void;
+    setValueColumn: (valueColumn: number) => void;
+    setIdColumn: (idColumn: number | null) => void;
+    setStratumColumn: (stratumColumn: number | null) => void;
+    setDecimal: (decimal: DecimalSeparator) => void;
+};
+export type TableImportController = ReturnType<typeof createTableImportController>;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@auditcore/ui-core",
+  "version": "0.3.0",
+  "description": "Framework-freier Kern der FlowAudit-Oberflächen: Texte, REST-Verträge, View-Modelle, Zustandsautomaten und Stile für Vue und React",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/janpow77/auditcore.git",
+    "directory": "packages-js/ui-core"
+  },
+  "homepage": "https://github.com/janpow77/auditcore/tree/main/packages-js/ui-core#readme",
+  "bugs": {
+    "url": "https://github.com/janpow77/auditcore/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./styles/index.css",
+    "./styles/*": "./styles/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@auditcore/common": "0.1.1",
+    "@auditcore/kanban-core": "0.2.1",
+    "leaflet": "^1.9.4"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.2",
+    "@types/leaflet": "^1.9.22"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/styles/account.css

@@ -0,0 +1,37 @@
+/* Gemeinsame Oberfläche für Vue, React und Custom Element. */
+.fa-account { --account-border: var(--fa-color-border, #dbe3e8); --account-ink: var(--fa-color-text, #182f3b); color: var(--account-ink); font-family: var(--fa-font-sans, system-ui, sans-serif); max-width: 1200px; margin: auto; padding: clamp(16px, 3vw, 36px); background: var(--fa-color-bg, #f5f8fa); border-radius: 20px; }
+.fa-account *, .fa-account *::before, .fa-account *::after { box-sizing: border-box; }
+.fa-account__header { margin-bottom: 28px; }
+.fa-account h2 { font-size: clamp(24px, 3vw, 32px); margin: 8px 0; letter-spacing: -.035em; }
+.fa-account h3 { font-size: 24px; margin: 0 0 8px; }
+.fa-account__eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 750; color: var(--fa-color-accent, #126875); }
+.fa-account__layout { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 28px; align-items: start; }
+.fa-account__list { list-style: none; margin: 0; padding: 0; }
+.fa-account__group { display: block; margin: 22px 12px 8px; font-weight: 650; color: var(--fa-color-text-muted, #526775); }
+.fa-account button { font: inherit; cursor: pointer; border: 1px solid var(--account-border); border-radius: 8px; background: var(--fa-color-surface, #fff); color: inherit; padding: 10px 14px; min-height: 44px; }
+.fa-account button:disabled { cursor: default; opacity: .55; }
+.fa-account button:focus-visible, .fa-account input:focus-visible, .fa-account textarea:focus-visible, .fa-account select:focus-visible { outline: 3px solid var(--fa-color-accent, #126875); outline-offset: 3px; }
+.fa-account button.fa-account__item { width: 100%; text-align: left; border-color: transparent; background: transparent; margin: 2px 0; }
+.fa-account button.fa-account__item--selected { color: var(--fa-color-accent, #126875); background: var(--fa-color-surface, #fff); border-color: var(--account-border); font-weight: 650; }
+.fa-account__card { min-width: 0; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--account-border); border-radius: 16px; background: var(--fa-color-surface, #fff); box-shadow: 0 8px 30px #12334406; margin: 0; }
+.fa-account__muted, .fa-account__field small { color: var(--fa-color-text-muted, #526775); line-height: 1.6; }
+.fa-account__failure { color: var(--fa-color-danger, #a51d2d); padding: 14px; border: 1px solid currentColor; border-radius: 8px; }
+.fa-account__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 22px 0; margin: 0; border: 0; }
+.fa-account__field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 550; min-width: 0; }
+.fa-account__field input, .fa-account__field select, .fa-account__field textarea { width: 100%; min-width: 0; border: 1px solid var(--account-border); border-radius: 8px; padding: 11px 12px; font: inherit; color: inherit; background: var(--fa-color-surface, #fff); min-height: 44px; }
+.fa-account__field input[type=color] { padding: 4px; }
+.fa-account__field input[readonly] { background: var(--fa-color-bg, #f5f8fa); }
+.fa-account__wide { grid-column: 1 / -1; }
+.fa-account__actions { display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--account-border); padding-top: 22px; flex-wrap: wrap; }
+.fa-account button.fa-account__primary { background: var(--fa-color-accent, #126875); color: var(--fa-color-accent-contrast, #fff); border-color: transparent; }
+.fa-account__preview, .fa-account__welcome { padding: 24px; margin-bottom: 22px; border-radius: 12px; overflow-wrap: anywhere; }
+.fa-account__welcome { background: var(--fa-color-bg, #f5f8fa); white-space: pre-wrap; }
+.fa-account__image { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
+.fa-account__image img, .fa-account__avatar { border-radius: 24px; object-fit: contain; border: 1px solid var(--account-border); }
+.fa-account__avatar { width: 96px; height: 96px; display: grid; place-content: center; font-size: 40px; background: var(--fa-color-bg, #f5f8fa); }
+.fa-account__camera { width: 100%; }
+.fa-account__camera video { display: block; max-width: 100%; width: 320px; margin-bottom: 12px; border-radius: 12px; }
+@media (max-width: 720px) { .fa-account__layout { grid-template-columns: 1fr; } .fa-account__fields { grid-template-columns: 1fr; } .fa-account__actions button { flex: 1; } }
+.fa-account__crop { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
+.fa-account__crop button { grid-column: 1 / -1; }
+.fa-account__field select[multiple] { min-height: 150px; }

package/styles/attributes.css

@@ -0,0 +1,18 @@
+/* Merkmalsstichprobe – AttributeSampling (Vue) und FlowauditAttributeSampling (React). Farben nur aus --fa-*-Variablen. */
+.fa-attributes { display: flex; flex-direction: column; gap: var(--fa-space-3); padding: var(--fa-space-4); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius-lg); background: var(--fa-color-surface); font: var(--fa-font-size-sm) / var(--fa-line-height) var(--fa-font-sans); color: var(--fa-color-text); }
+.fa-attributes__heading { margin: 0; font-size: var(--fa-font-size-md); font-weight: 600; }
+.fa-attributes__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--fa-space-3); align-items: start; }
+.fa-attributes__field { display: flex; flex-direction: column; gap: var(--fa-space-1); }
+.fa-attributes__label { font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-attributes__input, .fa-attributes__select { min-height: 2.25rem; width: 100%; box-sizing: border-box; padding: 0 var(--fa-space-2); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); background: var(--fa-color-surface); color: var(--fa-color-text); font: inherit; }
+.fa-attributes__input { text-align: end; font-variant-numeric: tabular-nums; }
+.fa-attributes__input:focus-visible, .fa-attributes__select:focus-visible { outline: none; border-color: var(--fa-color-accent); box-shadow: var(--fa-focus-ring); }
+.fa-attributes__input[aria-invalid="true"] { border-color: var(--fa-color-danger); }
+.fa-attributes__error { color: var(--fa-color-danger); font-size: var(--fa-font-size-xs); }
+.fa-attributes__actions { display: flex; flex-wrap: wrap; gap: var(--fa-space-2); align-items: center; }
+.fa-attributes__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--fa-space-2); margin: 0; }
+.fa-attributes__metric { display: flex; flex-direction: column; gap: var(--fa-space-1); padding: var(--fa-space-2); border-radius: var(--fa-radius); background: var(--fa-color-surface-sunken); }
+.fa-attributes__metric dt { font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); }
+.fa-attributes__metric dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
+.fa-attributes__muted { margin: 0; color: var(--fa-color-text-muted); }
+.fa-attributes__failure { margin: 0; padding: var(--fa-space-2) var(--fa-space-3); border-radius: var(--fa-radius); background: var(--fa-color-danger-soft); color: var(--fa-color-danger); }

package/styles/base.css

@@ -0,0 +1,116 @@
+/* Basiskomponenten (Symbol, Kennzeichen, Schaltfläche, Eingabefeld, Dialog) – gemeinsam für Vue und React. */
+
+/* FaIcon */
+.fa-icon {
+  flex: none;
+  stroke-width: var(--fa-icon-stroke, 1.75);
+  vertical-align: middle;
+}
+
+/* FaBadge */
+.fa-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--fa-space-1);
+  padding: 0.125rem var(--fa-space-2);
+  border-radius: 999px;
+  font: 600 var(--fa-font-size-xs) / 1.3 var(--fa-font-sans);
+  background: var(--fa-color-surface-sunken);
+  color: var(--fa-color-text-muted);
+}
+.fa-badge--accent { background: var(--fa-color-accent-soft); color: var(--fa-color-accent); }
+.fa-badge--success { background: var(--fa-color-success-soft); color: var(--fa-color-success); }
+.fa-badge--warning { background: var(--fa-color-warning-soft); color: var(--fa-color-warning); }
+.fa-badge--danger { background: var(--fa-color-danger-soft); color: var(--fa-color-danger); }
+
+/* FaButton */
+.fa-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fa-space-2);
+  min-height: 2.25rem;
+  padding: 0 var(--fa-space-4);
+  border: 1px solid transparent;
+  border-radius: var(--fa-radius);
+  font: 500 var(--fa-font-size-sm) / 1 var(--fa-font-sans);
+  cursor: pointer;
+  transition: background var(--fa-transition), border-color var(--fa-transition), color var(--fa-transition);
+}
+.fa-button:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+.fa-button:disabled { cursor: not-allowed; opacity: 0.55; }
+.fa-button--sm { min-height: 1.75rem; padding: 0 var(--fa-space-3); font-size: var(--fa-font-size-xs); }
+.fa-button--icon-only { padding: 0; width: 2.25rem; }
+.fa-button--sm.fa-button--icon-only { width: 1.75rem; }
+.fa-button--primary { background: var(--fa-color-accent); color: var(--fa-color-accent-contrast); }
+.fa-button--primary:hover:not(:disabled) { background: var(--fa-color-accent-hover); }
+.fa-button--secondary { background: var(--fa-color-surface); border-color: var(--fa-color-border); color: var(--fa-color-text); }
+.fa-button--secondary:hover:not(:disabled) { border-color: var(--fa-color-border-strong); }
+.fa-button--ghost { background: transparent; color: var(--fa-color-text-muted); }
+.fa-button--ghost:hover:not(:disabled), .fa-button--ghost[aria-pressed='true'] { background: var(--fa-color-surface-sunken); color: var(--fa-color-text); }
+.fa-button--danger { background: var(--fa-color-danger); color: #fff; }
+.fa-button--loading { cursor: progress; }
+
+/* FaTextField */
+.fa-field { display: flex; flex-direction: column; gap: var(--fa-space-1); font-family: var(--fa-font-sans); }
+.fa-field__label { font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-field__input {
+  min-height: 2.25rem;
+  padding: 0 var(--fa-space-3);
+  border: 1px solid var(--fa-color-border);
+  border-radius: var(--fa-radius);
+  background: var(--fa-color-surface);
+  color: var(--fa-color-text);
+  font: var(--fa-font-size-sm) var(--fa-font-sans);
+}
+.fa-field__input:focus-visible { outline: none; border-color: var(--fa-color-accent); box-shadow: var(--fa-focus-ring); }
+.fa-field__note { margin: 0; font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); }
+.fa-field--error .fa-field__input { border-color: var(--fa-color-danger); }
+.fa-field--error .fa-field__note { color: var(--fa-color-danger); }
+
+/* FaDialog */
+.fa-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--fa-space-4);
+  background: var(--fa-color-overlay);
+  font-family: var(--fa-font-sans);
+}
+.fa-dialog--side { justify-content: flex-end; align-items: stretch; padding: 0; }
+.fa-dialog__panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: calc(100vh - 2 * var(--fa-space-4));
+  background: var(--fa-color-surface);
+  color: var(--fa-color-text);
+  border-radius: var(--fa-radius-lg);
+  box-shadow: var(--fa-shadow-lg);
+  outline: none;
+}
+.fa-dialog__panel--sm { max-width: 24rem; }
+.fa-dialog__panel--md { max-width: 34rem; }
+.fa-dialog__panel--lg { max-width: 52rem; }
+.fa-dialog--side .fa-dialog__panel { max-height: none; height: 100%; border-radius: 0; max-width: 30rem; }
+.fa-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--fa-space-3);
+  padding: var(--fa-space-4) var(--fa-space-4) var(--fa-space-3) var(--fa-space-5);
+  border-bottom: 1px solid var(--fa-color-border);
+}
+.fa-dialog__title { margin: 0; font-size: var(--fa-font-size-lg); font-weight: 600; }
+.fa-dialog__description { margin: var(--fa-space-1) 0 0; font-size: var(--fa-font-size-sm); color: var(--fa-color-text-muted); }
+.fa-dialog__body { flex: 1; overflow-y: auto; padding: var(--fa-space-4) var(--fa-space-5); }
+.fa-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--fa-space-2);
+  padding: var(--fa-space-3) var(--fa-space-5);
+  border-top: 1px solid var(--fa-color-border);
+}

package/styles/batchchecks.css

@@ -0,0 +1,26 @@
+/* Bestandsprüfung – BatchChecks (Vue) und FlowauditBatchChecks (React). Farben nur aus --fa-*-Variablen. */
+.fa-batchchecks { display: flex; flex-direction: column; gap: var(--fa-space-4); font: var(--fa-font-size-sm) / var(--fa-line-height) var(--fa-font-sans); color: var(--fa-color-text); }
+.fa-batchchecks__card { display: flex; flex-direction: column; gap: var(--fa-space-3); padding: var(--fa-space-4); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius-lg); background: var(--fa-color-surface); box-shadow: var(--fa-shadow-sm); min-width: 0; }
+.fa-batchchecks__heading { margin: 0; font-size: var(--fa-font-size-md); font-weight: 600; }
+.fa-batchchecks__subheading { margin: 0; font-size: var(--fa-font-size-sm); font-weight: 600; }
+.fa-batchchecks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--fa-space-3); align-items: end; }
+.fa-batchchecks__field { display: flex; flex-direction: column; gap: var(--fa-space-1); min-width: 0; }
+.fa-batchchecks__label { font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-batchchecks__input { min-height: 2.25rem; padding: 0 var(--fa-space-3); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); background: var(--fa-color-surface); color: var(--fa-color-text); font: inherit; }
+.fa-batchchecks__file { font: inherit; color: var(--fa-color-text); }
+.fa-batchchecks__check { display: flex; gap: var(--fa-space-2); align-items: center; }
+.fa-batchchecks__input:focus-visible, .fa-batchchecks__file:focus-visible, .fa-batchchecks__check input:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+.fa-batchchecks__muted { margin: 0; color: var(--fa-color-text-muted); font-size: var(--fa-font-size-xs); }
+.fa-batchchecks__error { margin: 0; font-size: var(--fa-font-size-xs); color: var(--fa-color-danger); }
+.fa-batchchecks__failure { margin: 0; padding: var(--fa-space-2) var(--fa-space-3); border-radius: var(--fa-radius); background: var(--fa-color-danger-soft); color: var(--fa-color-danger); }
+.fa-batchchecks__notice { margin: 0; padding: var(--fa-space-2) var(--fa-space-3); border-left: 3px solid var(--fa-color-accent); background: var(--fa-color-accent-soft); border-radius: var(--fa-radius-sm); }
+.fa-batchchecks__summary { display: grid; grid-template-columns: max-content 1fr; gap: var(--fa-space-1) var(--fa-space-3); margin: 0; }
+.fa-batchchecks__summary dt { font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-batchchecks__summary dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+.fa-batchchecks__actions { display: flex; flex-wrap: wrap; gap: var(--fa-space-2); }
+.fa-batchchecks__scroll { overflow-x: auto; }
+.fa-batchchecks__table { width: 100%; border-collapse: collapse; }
+.fa-batchchecks__table th, .fa-batchchecks__table td { padding: var(--fa-space-2); border-bottom: 1px solid var(--fa-color-border); text-align: left; vertical-align: top; }
+.fa-batchchecks__table thead th { font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); font-weight: 600; }
+.fa-batchchecks__table tbody th { font-weight: 600; white-space: nowrap; }
+.fa-batchchecks__note { display: block; margin-top: var(--fa-space-1); color: var(--fa-color-text-muted); font-size: var(--fa-font-size-xs); }

package/styles/benford.css

@@ -0,0 +1,39 @@
+/* Benford-Analyse – BenfordPanel (Vue) und FlowauditBenford (React). */
+.fa-benford { display: flex; flex-direction: column; gap: var(--fa-space-4); font: var(--fa-font-size-sm) / var(--fa-line-height) var(--fa-font-sans); color: var(--fa-color-text); }
+.fa-benford__inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--fa-space-4); align-items: start; }
+.fa-benford__card { display: flex; flex-direction: column; gap: var(--fa-space-3); padding: var(--fa-space-4); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius-lg); background: var(--fa-color-surface); box-shadow: var(--fa-shadow-sm); min-width: 0; }
+.fa-benford__heading { margin: 0; font-size: var(--fa-font-size-md); font-weight: 600; }
+.fa-benford__field { display: flex; flex-direction: column; gap: var(--fa-space-1); }
+.fa-benford__fieldset { display: flex; flex-direction: column; gap: var(--fa-space-1); margin: 0; padding: var(--fa-space-2) var(--fa-space-3); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); }
+.fa-benford__radio { display: inline-flex; gap: var(--fa-space-2); align-items: center; }
+.fa-benford__label { font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-benford__select { min-height: 2.25rem; padding: 0 var(--fa-space-3); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); background: var(--fa-color-surface); color: var(--fa-color-text); font: inherit; }
+.fa-benford__select:focus-visible, .fa-benford__radio input:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+.fa-benford__muted, .fa-benford__source { margin: 0; color: var(--fa-color-text-muted); font-size: var(--fa-font-size-xs); }
+.fa-benford__source p { margin: var(--fa-space-1) 0 0; overflow-wrap: anywhere; }
+.fa-benford__error { margin: 0; font-size: var(--fa-font-size-xs); color: var(--fa-color-danger); }
+.fa-benford__failure { margin: 0; padding: var(--fa-space-2) var(--fa-space-3); border-radius: var(--fa-radius); background: var(--fa-color-danger-soft); color: var(--fa-color-danger); }
+.fa-benford__notice { margin: 0; padding: var(--fa-space-2) var(--fa-space-3); border-left: 3px solid var(--fa-color-accent); background: var(--fa-color-accent-soft); border-radius: var(--fa-radius-sm); }
+.fa-benford__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--fa-space-3); margin: 0; }
+.fa-benford__metric { display: flex; flex-direction: column; gap: var(--fa-space-1); padding: var(--fa-space-3); border-radius: var(--fa-radius); background: var(--fa-color-surface-raised); border: 1px solid var(--fa-color-border); }
+.fa-benford__metric dt { font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-benford__metric dd { margin: 0; }
+.fa-benford__value { font-size: var(--fa-font-size-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
+.fa-benford__detail { font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); }
+.fa-benford__figure { margin: 0; }
+.fa-benford__chart { display: block; width: 100%; height: auto; font: var(--fa-font-size-xs) var(--fa-font-sans); }
+.fa-benford__grid line { stroke: var(--fa-color-border); stroke-width: 1; }
+.fa-benford__grid text, .fa-benford__axis text { fill: var(--fa-color-text-muted); }
+.fa-benford__axis line { stroke: var(--fa-color-border-strong); }
+.fa-benford__bar { fill: var(--fa-color-accent); opacity: 0.75; }
+.fa-benford__bar--exceeds { fill: var(--fa-color-danger); opacity: 0.9; }
+.fa-benford__expected { fill: none; stroke: var(--fa-color-text); stroke-width: 2; stroke-dasharray: 5 3; }
+.fa-benford__expected-dot { fill: var(--fa-color-surface); stroke: var(--fa-color-text); stroke-width: 1.5; }
+.fa-benford__legend { display: flex; flex-wrap: wrap; gap: var(--fa-space-4); margin-top: var(--fa-space-2); font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); }
+.fa-benford__legend span { display: inline-flex; align-items: center; gap: var(--fa-space-1); }
+.fa-benford__swatch { display: inline-block; width: 0.9rem; height: 0.6rem; border-radius: 2px; background: var(--fa-color-accent); opacity: 0.75; }
+.fa-benford__swatch--exceeds { background: var(--fa-color-danger); opacity: 0.9; }
+.fa-benford__swatch--expected { height: 0; border-top: 2px dashed var(--fa-color-text); background: none; opacity: 1; }
+.fa-benford__digits summary { cursor: pointer; font-weight: 600; margin-bottom: var(--fa-space-2); }
+.fa-benford__flag { color: var(--fa-color-danger); font-weight: 600; }
+@media (prefers-reduced-motion: no-preference) { .fa-benford__bar { transition: y var(--fa-transition), height var(--fa-transition); } }

package/styles/dataprotection.css

@@ -0,0 +1,68 @@
+/* VVT und DSFA – nur --fa-*-Designtoken (hell/dunkel aus tokens.css). */
+.fa-dataprotection {
+  font: var(--fa-font-size-sm) / var(--fa-line-height) var(--fa-font-sans);
+  color: var(--fa-color-text);
+  box-sizing: border-box;
+}
+.fa-dataprotection *, .fa-dataprotection *::before, .fa-dataprotection *::after { box-sizing: inherit; }
+.fa-dataprotection h2 { font-size: var(--fa-font-size-lg); margin: 0; }
+.fa-dataprotection h3 { font-size: var(--fa-font-size-md); margin: 0 0 var(--fa-space-2); }
+.fa-dataprotection h4 { font-size: var(--fa-font-size-sm); margin: var(--fa-space-3) 0 var(--fa-space-2); color: var(--fa-color-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
+.fa-dataprotection__header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fa-space-3); flex-wrap: wrap; margin-bottom: var(--fa-space-3); }
+.fa-dataprotection__muted { color: var(--fa-color-text-muted); font-size: var(--fa-font-size-xs); }
+.fa-dataprotection__panel { background: var(--fa-color-surface); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); padding: var(--fa-space-3) var(--fa-space-4); margin-bottom: var(--fa-space-4); min-width: 0; box-shadow: var(--fa-shadow-sm); }
+.fa-dataprotection__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fa-space-2) var(--fa-space-3); }
+.fa-dataprotection__actions { display: flex; flex-wrap: wrap; gap: var(--fa-space-2); margin-left: auto; }
+.fa-dataprotection__alert { border-radius: var(--fa-radius-sm); padding: var(--fa-space-2) var(--fa-space-3); margin: 0 0 var(--fa-space-3); background: var(--fa-color-danger-soft); color: var(--fa-color-danger); }
+.fa-dataprotection__alert--warning { background: var(--fa-color-warning-soft); color: var(--fa-color-warning); }
+.fa-dataprotection__alert--info { background: var(--fa-color-accent-soft); color: var(--fa-color-text); }
+.fa-dataprotection__live { min-height: 1.2em; margin: 0 0 var(--fa-space-2); color: var(--fa-color-success); font-size: var(--fa-font-size-xs); }
+.fa-dataprotection__table { width: 100%; border-collapse: collapse; }
+.fa-dataprotection__table th, .fa-dataprotection__table td { text-align: left; padding: var(--fa-space-1) var(--fa-space-2); border-bottom: 1px solid var(--fa-color-border); vertical-align: top; overflow-wrap: anywhere; }
+.fa-dataprotection__table th { color: var(--fa-color-text-muted); font-weight: 600; }
+.fa-dataprotection__field { display: grid; gap: var(--fa-space-1); margin: 0 0 var(--fa-space-3); border: 0; padding: 0; min-width: 0; }
+.fa-dataprotection__field > label, .fa-dataprotection__field > legend, .fa-dataprotection__label { font-weight: 600; font-size: var(--fa-font-size-sm); padding: 0; }
+.fa-dataprotection__field input:not([type='radio']):not([type='checkbox']), .fa-dataprotection__field select, .fa-dataprotection__field textarea {
+  font: inherit; border: 1px solid var(--fa-color-border-strong); border-radius: var(--fa-radius-sm); padding: var(--fa-space-1) var(--fa-space-2); background: var(--fa-color-surface); color: var(--fa-color-text); width: 100%;
+}
+.fa-dataprotection__field textarea { min-height: 3.5rem; resize: vertical; }
+.fa-dataprotection__field [aria-invalid='true'] { border-color: var(--fa-color-danger); }
+.fa-dataprotection__field--required > label::after, .fa-dataprotection__field--required > legend::after { content: ' *'; color: var(--fa-color-danger); }
+.fa-dataprotection__ref { color: var(--fa-color-text-muted); font-size: var(--fa-font-size-xs); }
+.fa-dataprotection__note { margin: 0; font-size: var(--fa-font-size-xs); color: var(--fa-color-warning); }
+.fa-dataprotection__note--blocking { color: var(--fa-color-danger); }
+.fa-dataprotection__choices { display: flex; flex-wrap: wrap; gap: var(--fa-space-1) var(--fa-space-3); }
+.fa-dataprotection__choice { display: inline-flex; align-items: center; gap: var(--fa-space-1); cursor: pointer; }
+.fa-dataprotection button:focus-visible, .fa-dataprotection input:focus-visible, .fa-dataprotection select:focus-visible, .fa-dataprotection textarea:focus-visible, .fa-dataprotection summary:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+.fa-dataprotection__chips { display: flex; flex-wrap: wrap; gap: var(--fa-space-1); list-style: none; margin: 0 0 var(--fa-space-2); padding: 0; }
+.fa-dataprotection__chips li { display: inline-flex; align-items: center; gap: var(--fa-space-1); padding: 0 0 0 var(--fa-space-2); border-radius: 999px; background: var(--fa-color-surface-sunken); }
+.fa-dataprotection__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--fa-space-4); }
+.fa-dataprotection__issues { margin: 0; padding-left: var(--fa-space-4); }
+.fa-dataprotection__issues li { margin: 2px 0; }
+.fa-dataprotection__issues .is-blocking { color: var(--fa-color-danger); }
+.fa-dataprotection__dl { display: grid; grid-template-columns: minmax(140px, 32%) minmax(0, 1fr); gap: var(--fa-space-1) var(--fa-space-3); margin: 0; }
+.fa-dataprotection__dl dt { font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-dataprotection__dl dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.fa-vvt__layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--fa-space-4); align-items: start; }
+.fa-vvt__list { list-style: none; margin: 0 0 var(--fa-space-3); padding: 0; }
+.fa-vvt__item { width: 100%; display: grid; gap: 2px; text-align: left; background: none; border: 0; border-left: 3px solid transparent; border-bottom: 1px solid var(--fa-color-border); padding: var(--fa-space-2); font: inherit; color: inherit; cursor: pointer; }
+.fa-vvt__item:hover { background: var(--fa-color-surface-sunken); }
+.fa-vvt__item[aria-current='true'] { border-left-color: var(--fa-color-accent); background: var(--fa-color-accent-soft); }
+.fa-dsfa__tabs { display: flex; gap: var(--fa-space-1); border-bottom: 1px solid var(--fa-color-border); margin-bottom: var(--fa-space-3); flex-wrap: wrap; }
+.fa-dsfa__tab { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--fa-space-2) var(--fa-space-3); color: var(--fa-color-text-muted); cursor: pointer; }
+.fa-dsfa__tab[aria-selected='true'] { color: var(--fa-color-accent); border-bottom-color: var(--fa-color-accent); font-weight: 600; }
+.fa-dsfa__question { border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius-sm); padding: var(--fa-space-2) var(--fa-space-3); margin: 0 0 var(--fa-space-2); }
+.fa-dsfa__question legend { font-weight: 500; padding: 0 var(--fa-space-1); }
+.fa-dsfa__question--yes { border-color: var(--fa-color-warning); }
+.fa-dsfa__meta { display: flex; flex-wrap: wrap; gap: var(--fa-space-2); align-items: center; margin: var(--fa-space-1) 0; }
+.fa-dsfa__scenario { border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); padding: var(--fa-space-3); margin: 0 0 var(--fa-space-3); }
+.fa-dsfa__measures { columns: 2 260px; margin: 0; padding: 0; list-style: none; }
+.fa-dsfa__measures li { break-inside: avoid; margin: 2px 0; }
+.fa-dsfa__result { display: flex; flex-wrap: wrap; gap: var(--fa-space-2); align-items: center; margin-top: var(--fa-space-2); }
+@media (max-width: 860px) {
+  .fa-vvt__layout { grid-template-columns: minmax(0, 1fr); }
+  .fa-dataprotection__dl { grid-template-columns: minmax(0, 1fr); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fa-dataprotection * { transition: none !important; }
+}

package/styles/dbkanban.css

@@ -0,0 +1,38 @@
+/* Datenbankansicht als Kanban (<flowaudit-db-kanban>) – gemeinsam für Vue und React. */
+
+.fa-db-kanban { --fa-db-kanban-column-width: 16rem; display: flex; flex-direction: column; gap: var(--fa-space-3); color: var(--fa-color-text); font: var(--fa-font-size-md) / var(--fa-line-height) var(--fa-font-sans); }
+.fa-db-kanban__toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fa-space-3) var(--fa-space-4); }
+.fa-db-kanban__title { margin: 0 auto 0 0; font-size: var(--fa-font-size-lg); line-height: 1.3; align-self: center; }
+.fa-db-kanban__group { display: flex; flex-direction: column; gap: var(--fa-space-1); }
+.fa-db-kanban__group label { font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); }
+.fa-db-kanban__group select { padding: var(--fa-space-2); border: 1px solid var(--fa-color-border-strong); border-radius: var(--fa-radius-sm); background: var(--fa-color-surface); color: var(--fa-color-text); font: inherit; font-size: var(--fa-font-size-sm); }
+.fa-db-kanban__search { min-width: 14rem; }
+.fa-db-kanban__readonly { padding: var(--fa-space-1) var(--fa-space-2); border-radius: var(--fa-radius-sm); background: var(--fa-color-warning-soft); font-size: var(--fa-font-size-xs); font-weight: 600; }
+.fa-db-kanban__state { margin: 0; padding: var(--fa-space-4); border: 1px dashed var(--fa-color-border-strong); border-radius: var(--fa-radius); color: var(--fa-color-text-muted); text-align: center; }
+.fa-db-kanban__state--error { border-style: solid; border-color: var(--fa-color-danger); background: var(--fa-color-danger-soft); color: var(--fa-color-danger); text-align: left; }
+.fa-db-kanban__columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--fa-db-kanban-column-width), 1fr); gap: var(--fa-space-3); overflow-x: auto; padding-bottom: var(--fa-space-2); align-items: start; }
+.fa-db-kanban select:focus-visible, .fa-db-kanban button:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+
+/* DbKanbanColumn */
+.fa-db-kanban-column { display: flex; flex-direction: column; gap: var(--fa-space-2); min-height: 8rem; padding: var(--fa-space-2); border-radius: var(--fa-radius-lg); border-top: 3px solid var(--fa-color-accent); background: var(--fa-color-surface-sunken); transition: box-shadow var(--fa-transition); }
+.fa-db-kanban-column--empty-value { border-top-color: var(--fa-color-border-strong); }
+.fa-db-kanban-column--over { box-shadow: inset 0 0 0 2px var(--fa-color-accent); }
+.fa-db-kanban-column__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fa-space-2); padding: var(--fa-space-1) var(--fa-space-1) 0; }
+.fa-db-kanban-column__name { margin: 0; font-size: var(--fa-font-size-sm); font-weight: 650; overflow-wrap: anywhere; }
+.fa-db-kanban-column__count { flex: none; font-size: var(--fa-font-size-xs); font-weight: 600; color: var(--fa-color-text-muted); font-variant-numeric: tabular-nums; }
+.fa-db-kanban-column__list { display: flex; flex-direction: column; gap: var(--fa-space-2); margin: 0; padding: 0; list-style: none; }
+.fa-db-kanban-column__empty { margin: 0; padding: var(--fa-space-2); font-size: var(--fa-font-size-xs); color: var(--fa-color-text-muted); text-align: center; }
+.fa-db-kanban-column__add { align-self: flex-start; }
+
+/* DbKanbanCard */
+.fa-db-kanban-card { padding: var(--fa-space-2) var(--fa-space-3); border: 1px solid var(--fa-color-border); border-radius: var(--fa-radius); background: var(--fa-color-surface); box-shadow: var(--fa-shadow-sm); cursor: grab; }
+.fa-db-kanban-card[draggable='false'] { cursor: default; }
+.fa-db-kanban-card:focus-visible { outline: none; box-shadow: var(--fa-focus-ring); }
+.fa-db-kanban-card--dragging { opacity: 0.5; }
+.fa-db-kanban-card__title { margin: 0; font-size: var(--fa-font-size-sm); font-weight: 600; overflow-wrap: anywhere; }
+.fa-db-kanban-card__fields { display: flex; flex-direction: column; gap: 0.125rem; margin: var(--fa-space-1) 0 0; }
+.fa-db-kanban-card__field { display: flex; flex-wrap: wrap; column-gap: var(--fa-space-2); font-size: var(--fa-font-size-xs); }
+.fa-db-kanban-card__field dt { color: var(--fa-color-text-muted); }
+.fa-db-kanban-card__field dt::after { content: ':'; }
+.fa-db-kanban-card__field dd { margin: 0; min-width: 0; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) { .fa-db-kanban-column { transition: none; } }