npm - prince-ui-bpmn - Versions diffs - 1.0.1 - Mend

prince-ui-bpmn 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,284 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+/**
+ * Kanonische Camunda-7-Datenshapes, die die BPMN-Komponenten direkt konsumieren.
+ * Quelle: finops `backend/app/models.py` / `frontend/src/.../api.ts`.
+ * Bewusste Entscheidung (Brainstorming): Komponenten nehmen Camunda-Shapes direkt
+ * statt eines abstrahierten Modells.
+ */
+/** Status einer Aktivität, abgeleitet aus der Camunda-Historie. */
+type ActivityStatus = "active" | "completed" | "incident" | "canceled";
+/** Eintrag aus `GET /history/activity-instance`. */
+interface HistoryActivityInstance {
+    id: string;
+    activityId: string;
+    activityName?: string | null;
+    activityType?: string | null;
+    processInstanceId?: string;
+    executionId?: string;
+    startTime?: string | null;
+    endTime?: string | null;
+    cancelTime?: string | null;
+    durationInMillis?: number | null;
+    /** gesetzt, wenn die Aktivität ein CallActivity ist */
+    calledProcessInstanceId?: string | null;
+    canceled?: boolean;
+    completeScope?: boolean;
+}
+/** Eintrag aus `GET /incident`. */
+interface Incident {
+    id: string;
+    incidentType?: string;
+    activityId?: string | null;
+    failedActivityId?: string | null;
+    incidentMessage?: string | null;
+    processInstanceId?: string;
+    rootCauseIncidentId?: string | null;
+    causeIncidentId?: string | null;
+    incidentTimestamp?: string | null;
+}
+/** Eintrag aus `GET /history/variable-instance`. */
+interface HistoryVariableInstance {
+    id: string;
+    name: string;
+    type?: string;
+    value?: unknown;
+    activityInstanceId?: string;
+    processInstanceId?: string;
+}
+/** Daten, die ein Klick auf ein Diagramm-Element liefert. */
+interface BpmnElementClick {
+    elementId: string;
+    elementType: string;
+    businessObject: unknown;
+    /** Bildschirmposition (für Popover/Intervention) */
+    screenPosition?: {
+        x: number;
+        y: number;
+    };
+}
+/** Light/Dark-Steuerung der Diagramm-Komponenten. */
+type DiagramColorScheme = "auto" | "light" | "dark";
+/**
+ * Theme-Bridge für bpmn-js/diagram-js.
+ *
+ * SVG-Diagramme von bpmn.io werden NICHT über CSS gethemt, sondern über die
+ * Renderer-Config (`bpmnRenderer`/`textRenderer`). Diese Bridge liest die
+ * prince-ui-Tokens (`--prn-*`) vom Dokument und liefert konkrete Farbwerte —
+ * ersetzt das frühere `data-sap-theme`-Coupling aus finops/maco-process-studio.
+ *
+ * Kolokiert je Paket (kein geteiltes 4. Paket) — das dmn-Paket hält eine Kopie.
+ */
+interface DiagramColors {
+    /** Füllfarbe der Shapes */
+    defaultFillColor: string;
+    /** Konturfarbe der Shapes/Connections */
+    defaultStrokeColor: string;
+    /** Textfarbe der Labels */
+    defaultLabelColor: string;
+    /** Canvas-Hintergrund (für den umgebenden Container) */
+    canvasBackground: string;
+    /** Akzentfarbe (Selektion/aktive Elemente) */
+    accent: string;
+}
+/** Liest einen CSS-Custom-Property-Wert vom `:root`, mit Fallback. */
+declare function readToken(name: string, fallback: string): string;
+/** Ermittelt, ob der Dark-Mode aktiv ist (data-theme bzw. System). */
+declare function isDarkMode(scheme?: DiagramColorScheme): boolean;
+/**
+ * Liefert die Diagrammfarben aus den prince-ui-Tokens.
+ * Fallbacks entsprechen den Token-Defaults aus `packages/tokens/src/tokens.css`.
+ */
+declare function getDiagramColors(scheme?: DiagramColorScheme): DiagramColors;
+/**
+ * Beobachtet `data-theme`-Wechsel am `<html>` und ruft `onChange` auf.
+ * Gibt eine Cleanup-Funktion zurück.
+ */
+declare function onThemeChange(onChange: () => void): () => void;
+interface BpmnViewerProps {
+    /** Das anzuzeigende BPMN 2.0 XML. */
+    xml: string;
+    /** Camunda-7-History-Einträge zur Status-Färbung. */
+    activityHistory?: HistoryActivityInstance[];
+    /** Camunda-7-Incidents (färben das betroffene Element rot). */
+    incidents?: Incident[];
+    /** IDs der zur Laufzeit aktiven Aktivitäten (überschreiben History → blau). */
+    runtimeActiveActivityIds?: string[];
+    /** Light/Dark-Steuerung. Default `auto` (folgt `data-theme`). */
+    colorScheme?: DiagramColorScheme;
+    /** Klick auf ein Element. */
+    onElementClick?: (event: BpmnElementClick) => void;
+    /** Bei Container-Resize automatisch neu einpassen. Default `true`. */
+    fitOnResize?: boolean;
+    /** Zoom-Steuerung (Buttons) anzeigen. Default `true`. */
+    showZoomControls?: boolean;
+    /** Höhe des Containers. Default `"100%"`. Canvas braucht eine feste Höhe. */
+    height?: string | number;
+    /** Optionaler Klassennamen-Override für den äußeren Container. */
+    className?: string;
+}
+/**
+ * Apple-styled, read-only BPMN-Viewer mit deklarativem Status-Highlighting.
+ */
+declare function BpmnViewer({ xml, activityHistory, incidents, runtimeActiveActivityIds, colorScheme, onElementClick, fitOnResize, showZoomControls, height, className, }: BpmnViewerProps): react.JSX.Element;
+/**
+ * Reine Logik für das Status/Historie-Highlighting des BpmnViewers.
+ *
+ * Ersetzt das fragile imperative SVG-Recoloring aus finops `BpmnDiagram.tsx`
+ * durch pure, getestete Funktionen:
+ *  - Activity↔Element-Matching (direkt, case-insensitive, Name-Matching für CallActivities)
+ *  - Status-Ableitung aus History/Incidents/Runtime
+ *  - Status→Token-Mapping
+ *  - Sequenzfluss-„ausgeführt"-Erkennung
+ *
+ * Das DOM/Overlay-/Marker-Setup baut darauf auf (siehe `overlays.ts`).
+ */
+/** Minimaler Ausschnitt eines diagram-js-Elements, den die Logik braucht. */
+interface DiagramElementLike {
+    id: string;
+    type?: string;
+    businessObject?: {
+        id?: string;
+        name?: string;
+        $type?: string;
+        sourceRef?: {
+            id?: string;
+        };
+        targetRef?: {
+            id?: string;
+        };
+    };
+}
+/** Status→prince-ui-Token (CSS-Custom-Property-Name). */
+declare const STATUS_TOKEN: Record<ActivityStatus, string>;
+/** Deutsche Kurzbezeichnung je Status (für Tooltips/Legende/A11y). */
+declare const STATUS_LABEL: Record<ActivityStatus, string>;
+/**
+ * Baut eine Lookup-Map über alle Matching-Schlüssel einer Aktivität:
+ * `activityId`, `id` und (lowercased) `activityName`. Mehrere History-Einträge
+ * derselben `activityId` werden zusammengeführt (jüngster „gewinnt" beim Status).
+ */
+declare function buildActivityMap(activities: HistoryActivityInstance[]): Map<string, HistoryActivityInstance>;
+/**
+ * Matcht ein Diagramm-Element auf einen History-Eintrag.
+ * Strategien (in Reihenfolge): direktes ID-Matching, case-insensitive,
+ * Name-Matching für CallActivities.
+ */
+declare function matchActivity(element: DiagramElementLike, map: Map<string, HistoryActivityInstance>): HistoryActivityInstance | null;
+interface StatusContext {
+    incidents: Incident[];
+    runtimeActiveActivityIds?: Set<string>;
+    multiExecutionIds?: Set<string>;
+}
+/**
+ * Leitet den Status eines Elements aus History + Incidents + Runtime ab.
+ * Priorität: Incident > Runtime-aktiv > abgeschlossen > History-aktiv > abgebrochen.
+ * Gibt `null` für „nicht ausgeführt" zurück.
+ */
+declare function deriveStatus(element: DiagramElementLike, activity: HistoryActivityInstance | null, ctx: StatusContext): {
+    status: ActivityStatus;
+    isMultiExecution: boolean;
+} | null;
+interface ElementStatusEntry {
+    elementId: string;
+    status: ActivityStatus;
+    token: string;
+    label: string;
+    isMultiExecution: boolean;
+    activity: HistoryActivityInstance | null;
+}
+/**
+ * Berechnet den Status aller Flow-Knoten aus den gegebenen Elementen.
+ * Reines Mapping — kein DOM-Zugriff. Die Komponente übersetzt das Ergebnis
+ * in diagram-js-Marker + Overlays.
+ */
+declare function computeElementStatuses(elements: DiagramElementLike[], activities: HistoryActivityInstance[], options?: {
+    incidents?: Incident[];
+    runtimeActiveActivityIds?: string[];
+}): ElementStatusEntry[];
+/** Liefert die IDs aller ausgeführten Sequenzflüsse. */
+declare function computeExecutedFlows(elements: DiagramElementLike[], activities: HistoryActivityInstance[]): string[];
+/**
+ * bpmnlint-Konfiguration für den BpmnEditor.
+ *
+ * Die Regel-Module von `bpmnlint` werden im Editor **lazy** geladen und hier
+ * über einen Resolver injiziert — so bleibt der Paket-Entry frei von
+ * Top-Level-Engine-Imports. Portiert aus maco `BpmnEditor/lintConfig.ts`
+ * (4 Regeln: label-required, no-disconnected, no-implicit-split, no-complex-gateway).
+ */
+/** Ein einzelnes, flach normalisiertes Lint-Ergebnis aus bpmn-js-bpmnlint. */
+interface LintIssue {
+    id: string;
+    message: string;
+    category: "error" | "warning";
+    element?: string;
+}
+/** Severity je Regel. */
+type LintSeverity = "error" | "warn" | "off";
+/** Regel-Konfiguration: Regelname → Severity. */
+type LintRuleConfig = Record<string, LintSeverity>;
+interface BpmnEditorProps {
+    /** Controlled BPMN-XML. Bei gesetztem `value` ist die Komponente controlled. */
+    value?: string;
+    /** Uncontrolled Initial-XML. */
+    defaultValue?: string;
+    /** Wird bei jeder Modell-Änderung mit dem aktuellen XML aufgerufen. */
+    onChange?: (xml: string) => void;
+    /** Speichern (z. B. ⌘S / Toolbar-Button) → erhält `saveXML({format:true})`. */
+    onSave?: (xml: string) => void | Promise<void>;
+    /** bpmnlint-Regeln (Default: 4 MaKo-Regeln). */
+    lintRules?: LintRuleConfig;
+    /** Element-Selektion (ID + Name). */
+    onElementSelect?: (selection: {
+        id: string;
+        name?: string;
+    } | null) => void;
+    /** Dirty-State (ungespeicherte Änderungen). */
+    onDirtyChange?: (dirty: boolean) => void;
+    /** App-Slot für Zusatzaktionen in der Toolbar (z. B. KI-Button). */
+    actionsSlot?: ReactNode;
+    /** App-Slot im ErrorPanel (z. B. KI-Fix-Handler stellt eigenen Button bereit). */
+    onKiFix?: (issues: LintIssue[]) => void;
+    /** Light/Dark. Default `auto`. */
+    colorScheme?: DiagramColorScheme;
+    /** Properties-Panel anzeigen. Default `true`. */
+    propertiesPanel?: boolean;
+    /** Minimap (Übersichtskarte) anzeigen. Default `true`. */
+    minimap?: boolean;
+    /** Camunda-Element-Templates (JSON-Array) — im Properties-Panel anwendbar. */
+    elementTemplates?: unknown[];
+    /** Höhe des Editors. Default `"100%"`. */
+    height?: string | number;
+    /** Klassennamen-Override. */
+    className?: string;
+}
+declare function BpmnEditor({ value, defaultValue, onChange, onSave, lintRules, onElementSelect, onDirtyChange, actionsSlot, onKiFix, colorScheme, propertiesPanel, minimap, elementTemplates, height, className, }: BpmnEditorProps): react.JSX.Element;
+/** Kuratierte, deutsche Erklärungen + Handlungsempfehlungen je bpmnlint-Regel.
+ *  Portiert aus maco `BpmnEditor/lintHints.ts`. */
+interface LintHint {
+    title: string;
+    explanation: string;
+    howto: string;
+}
+declare function lintHint(ruleId: string): LintHint;
+interface BpmnTableViewProps {
+    /** BPMN 2.0 XML. */
+    xml: string;
+    /** Sichtbare Zeilen (Höhe der Tabelle). Default 30. */
+    visibleRows?: number;
+    /** Klassennamen-Override. */
+    className?: string;
+}
+declare function BpmnTableView({ xml, visibleRows, className }: BpmnTableViewProps): react.JSX.Element;
+export { type ActivityStatus, BpmnEditor, BpmnEditor as BpmnEditorDefault, type BpmnEditorProps, type BpmnElementClick, BpmnTableView, type BpmnTableViewProps, BpmnViewer, BpmnViewer as BpmnViewerDefault, type BpmnViewerProps, type DiagramColorScheme, type DiagramColors, type ElementStatusEntry, type HistoryActivityInstance, type HistoryVariableInstance, type Incident, type LintHint, type LintIssue, type LintRuleConfig, STATUS_LABEL, STATUS_TOKEN, buildActivityMap, computeElementStatuses, computeExecutedFlows, deriveStatus, getDiagramColors, isDarkMode, lintHint, matchActivity, onThemeChange, readToken };