prince-ui-bpmn 1.0.1

package/dist/index.js

@@ -0,0 +1,1173 @@
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { Button, Badge, SearchField, AnalyticalTable, SegmentedControl, Segment, Notice, Link } from 'prince-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/theme/diagram-theme.ts
+function readToken(name, fallback) {
+  if (typeof window === "undefined" || !document?.documentElement) return fallback;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+function isDarkMode(scheme = "auto") {
+  if (scheme === "dark") return true;
+  if (scheme === "light") return false;
+  if (typeof document !== "undefined") {
+    const attr = document.documentElement.getAttribute("data-theme");
+    if (attr === "dark" || attr === "cu") return true;
+    if (attr === "light") return false;
+  }
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return false;
+}
+function getDiagramColors(scheme = "auto") {
+  const dark = isDarkMode(scheme);
+  return {
+    defaultFillColor: readToken("--prn-bg-elevated", dark ? "#1c1c1e" : "#ffffff"),
+    defaultStrokeColor: readToken("--prn-label", dark ? "#e4e4e6" : "#1d1d1f"),
+    defaultLabelColor: readToken("--prn-label", dark ? "#e4e4e6" : "#1d1d1f"),
+    canvasBackground: readToken("--prn-bg", dark ? "#000000" : "#f5f5f7"),
+    accent: readToken("--prn-accent", "#a0d22b")
+  };
+}
+function onThemeChange(onChange) {
+  if (typeof window === "undefined" || !window.MutationObserver) return () => {
+  };
+  const observer = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      if (m.type === "attributes" && m.attributeName === "data-theme") {
+        onChange();
+        return;
+      }
+    }
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"]
+  });
+  let media;
+  if (window.matchMedia) {
+    media = window.matchMedia("(prefers-color-scheme: dark)");
+    media.addEventListener?.("change", onChange);
+  }
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener?.("change", onChange);
+  };
+}
+
+// src/theme/apple-renderer.ts
+var APPLE_FONT = '-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif';
+function buildRendererConfig(colors) {
+  const labelStyle = {
+    fill: colors.defaultLabelColor,
+    fontFamily: APPLE_FONT,
+    fontSize: 12,
+    fontWeight: 500
+  };
+  return {
+    bpmnRenderer: {
+      defaultFillColor: colors.defaultFillColor,
+      defaultStrokeColor: colors.defaultStrokeColor,
+      defaultLabelColor: colors.defaultLabelColor
+    },
+    textRenderer: {
+      defaultStyle: labelStyle,
+      externalStyle: labelStyle
+    }
+  };
+}
+function createAppleRendererModule(BpmnRenderer) {
+  function AppleRenderer(...args) {
+    Reflect.apply(BpmnRenderer, this, args);
+  }
+  AppleRenderer.prototype = Object.create(BpmnRenderer.prototype);
+  AppleRenderer.prototype.constructor = AppleRenderer;
+  AppleRenderer.prototype.canRender = function canRender(element) {
+    const parentProto = Object.getPrototypeOf(AppleRenderer.prototype);
+    return parentProto.canRender.call(this, element);
+  };
+  AppleRenderer.prototype.drawShape = function drawShape(parentNode, element) {
+    const parentProto = Object.getPrototypeOf(AppleRenderer.prototype);
+    const gfx = parentProto.drawShape.call(this, parentNode, element);
+    try {
+      const type = element.type ?? "";
+      if (type.includes("Task") || type.includes("SubProcess") || type.includes("CallActivity")) {
+        const rect = parentNode.querySelector("rect");
+        if (rect) {
+          rect.setAttribute("rx", "12");
+          rect.setAttribute("ry", "12");
+        }
+      }
+      const main = gfx ?? parentNode;
+      const stroke = main.querySelector?.("rect, circle, polygon, path");
+      if (stroke && stroke.getAttribute("stroke-width") === "2") {
+        stroke.setAttribute("stroke-width", "1.5");
+      }
+      const isLabel = type === "label";
+      if (!isLabel && main?.style) {
+        main.style.filter = "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12))";
+      }
+    } catch {
+    }
+    return gfx;
+  };
+  AppleRenderer.prototype.drawConnection = function drawConnection(parentNode, element) {
+    const parentProto = Object.getPrototypeOf(AppleRenderer.prototype);
+    const gfx = parentProto.drawConnection.call(this, parentNode, element);
+    try {
+      const main = gfx ?? parentNode;
+      const path = main.querySelector?.("path");
+      if (path && path.getAttribute("stroke-width") === "2") {
+        path.setAttribute("stroke-width", "1.5");
+      }
+    } catch {
+    }
+    return gfx;
+  };
+  AppleRenderer.$inject = BpmnRenderer.$inject ?? [
+    "config.bpmnRenderer",
+    "eventBus",
+    "styles",
+    "pathMap",
+    "canvas",
+    "textRenderer"
+  ];
+  return {
+    __init__: ["appleRenderer"],
+    appleRenderer: ["type", AppleRenderer]
+  };
+}
+
+// src/viewer/status.ts
+var STATUS_TOKEN = {
+  active: "--prn-blue",
+  completed: "--prn-green",
+  incident: "--prn-red",
+  canceled: "--prn-orange"
+};
+var STATUS_LABEL = {
+  active: "Aktiv",
+  completed: "Abgeschlossen",
+  incident: "Fehler",
+  canceled: "Abgebrochen"
+};
+function buildActivityMap(activities) {
+  const map = /* @__PURE__ */ new Map();
+  for (const activity of activities) {
+    if (activity.activityId) {
+      map.set(activity.activityId, activity);
+      if (activity.id && activity.id !== activity.activityId) {
+        map.set(activity.id, activity);
+      }
+    } else if (activity.id) {
+      map.set(activity.id, activity);
+    }
+    if (activity.activityName) {
+      const key = activity.activityName.toLowerCase().trim();
+      if (key && !map.has(key)) map.set(key, activity);
+    }
+  }
+  return map;
+}
+function findMultiExecutionIds(activities) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const a of activities) {
+    if (a.activityId) counts.set(a.activityId, (counts.get(a.activityId) ?? 0) + 1);
+  }
+  const multi = /* @__PURE__ */ new Set();
+  for (const [id, count] of counts) if (count > 1) multi.add(id);
+  return multi;
+}
+function isFlowNode(element) {
+  const type = element.type ?? element.businessObject?.$type ?? "";
+  return type.includes("Task") || type.includes("Event") || type.includes("Gateway") || type.includes("CallActivity") || type.includes("SubProcess");
+}
+function isSequenceFlow(element) {
+  const type = element.type ?? element.businessObject?.$type ?? "";
+  return type === "bpmn:SequenceFlow";
+}
+function matchActivity(element, map) {
+  const elementId = element.id ?? element.businessObject?.id;
+  const boId = element.businessObject?.id ?? element.id;
+  if (!elementId) return null;
+  if (map.has(elementId)) return map.get(elementId);
+  if (boId && map.has(boId)) return map.get(boId);
+  const lowerId = elementId.toLowerCase();
+  for (const [key, activity] of map) {
+    if (key.toLowerCase() === lowerId || activity.activityId?.toLowerCase() === lowerId) {
+      return activity;
+    }
+  }
+  const type = element.type ?? element.businessObject?.$type ?? "";
+  if (type.includes("CallActivity") || type.includes("Call")) {
+    const name = element.businessObject?.name?.toLowerCase().trim();
+    if (name) {
+      if (map.has(name)) return map.get(name);
+      for (const activity of map.values()) {
+        if (activity.activityName?.toLowerCase().trim() === name || activity.activityId?.toLowerCase().trim() === name) {
+          return activity;
+        }
+      }
+    }
+  }
+  return null;
+}
+function hasIncident(ids, incidents) {
+  const set = new Set(ids.filter(Boolean));
+  if (set.size === 0) return false;
+  return incidents.some(
+    (i) => i.activityId != null && set.has(i.activityId) || i.failedActivityId != null && set.has(i.failedActivityId)
+  );
+}
+function deriveStatus(element, activity, ctx) {
+  const elementId = element.id ?? element.businessObject?.id ?? "";
+  const activityId = activity?.activityId ?? void 0;
+  const ids = [elementId, activityId];
+  if (hasIncident(ids, ctx.incidents)) {
+    return { status: "incident", isMultiExecution: false };
+  }
+  const runtimeActive = ctx.runtimeActiveActivityIds != null && ids.some((id) => id != null && ctx.runtimeActiveActivityIds.has(id));
+  if (runtimeActive) return { status: "active", isMultiExecution: false };
+  if (!activity) return null;
+  const isCanceled = activity.cancelTime != null || activity.canceled === true;
+  const isMultiExecution = ctx.multiExecutionIds?.has(activity.activityId ?? elementId) ?? false;
+  if (activity.startTime && activity.endTime && !isCanceled) {
+    return { status: "completed", isMultiExecution };
+  }
+  if (activity.startTime && !activity.endTime && !isCanceled) {
+    return { status: "active", isMultiExecution: false };
+  }
+  if (activity.startTime && isCanceled) {
+    return { status: "canceled", isMultiExecution: false };
+  }
+  return null;
+}
+function isSequenceFlowExecuted(element, map) {
+  const sourceId = element.businessObject?.sourceRef?.id;
+  const targetId = element.businessObject?.targetRef?.id;
+  if (!sourceId || !targetId) return false;
+  const source = matchActivity({ id: sourceId, businessObject: { id: sourceId } }, map);
+  const target = matchActivity({ id: targetId, businessObject: { id: targetId } }, map);
+  return Boolean(
+    source?.endTime && !source.cancelTime && target?.startTime
+  );
+}
+function computeElementStatuses(elements, activities, options = {}) {
+  const incidents = options.incidents ?? [];
+  const runtimeActive = options.runtimeActiveActivityIds ? new Set(options.runtimeActiveActivityIds) : void 0;
+  const map = buildActivityMap(activities);
+  const multiExecutionIds = findMultiExecutionIds(activities);
+  const ctx = { incidents, runtimeActiveActivityIds: runtimeActive, multiExecutionIds };
+  const result = [];
+  for (const element of elements) {
+    if (!isFlowNode(element)) continue;
+    const elementId = element.id ?? element.businessObject?.id;
+    if (!elementId) continue;
+    const activity = matchActivity(element, map);
+    const derived = deriveStatus(element, activity, ctx);
+    if (!derived) continue;
+    result.push({
+      elementId,
+      status: derived.status,
+      token: STATUS_TOKEN[derived.status],
+      label: STATUS_LABEL[derived.status],
+      isMultiExecution: derived.isMultiExecution,
+      activity
+    });
+  }
+  return result;
+}
+function computeExecutedFlows(elements, activities) {
+  const map = buildActivityMap(activities);
+  const result = [];
+  for (const element of elements) {
+    if (!isSequenceFlow(element)) continue;
+    const id = element.id ?? element.businessObject?.id;
+    if (id && isSequenceFlowExecuted(element, map)) result.push(id);
+  }
+  return result;
+}
+
+// src/viewer/overlays.ts
+function statusMarker(status) {
+  return `prn-bpmn-status-${status}`;
+}
+var MULTI_EXECUTION_MARKER = "prn-bpmn-status-multi";
+var FLOW_EXECUTED_MARKER = "prn-bpmn-flow-executed";
+function allStatusMarkers() {
+  const statuses = ["active", "completed", "incident", "canceled"];
+  return [...statuses.map(statusMarker), MULTI_EXECUTION_MARKER];
+}
+function buildStatusOverlay(status, doc = document) {
+  const el = doc.createElement("div");
+  el.className = `prn-bpmn-overlay prn-bpmn-overlay-${status}`;
+  el.setAttribute("role", "img");
+  el.setAttribute("aria-label", STATUS_LABEL[status]);
+  el.title = STATUS_LABEL[status];
+  return el;
+}
+var STATUS_OVERLAY_POSITION = { top: -6, right: -6 };
+function BpmnViewer({
+  xml,
+  activityHistory,
+  incidents,
+  runtimeActiveActivityIds,
+  colorScheme = "auto",
+  onElementClick,
+  fitOnResize = true,
+  showZoomControls = true,
+  height = "100%",
+  className
+}) {
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
+  const overlayIdsRef = useRef([]);
+  const [error, setError] = useState(null);
+  const [themeTick, setThemeTick] = useState(0);
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  useEffect(() => onThemeChange(() => setThemeTick((t) => t + 1)), []);
+  const applyHighlighting = useCallback(() => {
+    const viewer = viewerRef.current;
+    if (!viewer) return;
+    try {
+      const elementRegistry = viewer.get("elementRegistry");
+      const canvas = viewer.get("canvas");
+      const overlays = viewer.get("overlays");
+      const all = elementRegistry.getAll();
+      const markers = [...allStatusMarkers(), FLOW_EXECUTED_MARKER];
+      for (const el of all) {
+        if (!el.id) continue;
+        for (const m of markers) canvas.removeMarker(el.id, m);
+      }
+      for (const oid of overlayIdsRef.current) {
+        try {
+          overlays.remove(oid);
+        } catch {
+        }
+      }
+      overlayIdsRef.current = [];
+      const statuses = computeElementStatuses(all, activityHistory ?? [], {
+        incidents,
+        runtimeActiveActivityIds
+      });
+      const doc = containerRef.current?.ownerDocument ?? document;
+      for (const entry of statuses) {
+        canvas.addMarker(entry.elementId, statusMarker(entry.status));
+        if (entry.isMultiExecution) {
+          canvas.addMarker(entry.elementId, MULTI_EXECUTION_MARKER);
+        }
+        try {
+          const id = overlays.add(entry.elementId, {
+            position: STATUS_OVERLAY_POSITION,
+            html: buildStatusOverlay(entry.status, doc)
+          });
+          overlayIdsRef.current.push(id);
+        } catch {
+        }
+      }
+      const flows = computeExecutedFlows(all, activityHistory ?? []);
+      for (const id of flows) canvas.addMarker(id, FLOW_EXECUTED_MARKER);
+    } catch {
+    }
+  }, [activityHistory, incidents, runtimeActiveActivityIds]);
+  useEffect(() => {
+    let cancelled = false;
+    setError(null);
+    const init = async () => {
+      if (!containerRef.current || !xml || !xml.trim()) return;
+      if (viewerRef.current) {
+        try {
+          viewerRef.current.destroy();
+        } catch {
+        }
+        viewerRef.current = null;
+      }
+      overlayIdsRef.current = [];
+      const [{ default: NavigatedViewer }, { default: BpmnRenderer }] = await Promise.all([
+        import(
+          /* @vite-ignore */
+          'bpmn-js/lib/NavigatedViewer'
+        ),
+        import(
+          /* @vite-ignore */
+          'bpmn-js/lib/draw/BpmnRenderer'
+        )
+      ]);
+      if (cancelled || !containerRef.current) return;
+      const colors = getDiagramColors(colorScheme);
+      const viewer = new NavigatedViewer({
+        container: containerRef.current,
+        additionalModules: [
+          createAppleRendererModule(BpmnRenderer)
+        ],
+        ...buildRendererConfig(colors)
+      });
+      viewerRef.current = viewer;
+      try {
+        await viewer.importXML(xml);
+        if (cancelled) return;
+        const eventBus = viewer.get("eventBus");
+        eventBus.on("element.click", (e) => {
+          const element = e.element;
+          const original = e.originalEvent;
+          if (!element) return;
+          const handler = onElementClickRef.current;
+          if (!handler) return;
+          handler({
+            elementId: element.id ?? element.businessObject?.id ?? "",
+            elementType: element.type ?? element.businessObject?.$type ?? "",
+            businessObject: element.businessObject,
+            screenPosition: original ? { x: original.clientX, y: original.clientY } : void 0
+          });
+        });
+        const canvas = viewer.get("canvas");
+        if (containerRef.current && containerRef.current.clientWidth > 0 && containerRef.current.clientHeight > 0) {
+          canvas.zoom("fit-viewport");
+        }
+        applyHighlighting();
+      } catch (e) {
+        if (!cancelled) setError(e.message);
+      }
+    };
+    void init();
+    return () => {
+      cancelled = true;
+      if (viewerRef.current) {
+        try {
+          viewerRef.current.destroy();
+        } catch {
+        }
+        viewerRef.current = null;
+      }
+    };
+  }, [xml, colorScheme, themeTick]);
+  useEffect(() => {
+    applyHighlighting();
+  }, [applyHighlighting]);
+  useEffect(() => {
+    if (!fitOnResize || !containerRef.current) return;
+    let timer = null;
+    const ro = new ResizeObserver(() => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        try {
+          viewerRef.current?.get("canvas")?.zoom(
+            "fit-viewport"
+          );
+        } catch {
+        }
+      }, 150);
+    });
+    ro.observe(containerRef.current);
+    return () => {
+      if (timer) clearTimeout(timer);
+      ro.disconnect();
+    };
+  }, [fitOnResize]);
+  const zoom = useCallback((factor) => {
+    const canvas = viewerRef.current?.get("canvas");
+    if (!canvas) return;
+    try {
+      if (factor === "fit") canvas.zoom("fit-viewport");
+      else canvas.zoom(canvas.zoom() * factor);
+    } catch {
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["prn-bpmn", "prn-bpmn-viewer", className].filter(Boolean).join(" "),
+      "data-color-scheme": colorScheme,
+      style: { height },
+      children: [
+        showZoomControls && /* @__PURE__ */ jsxs("div", { className: "prn-bpmn-zoom", role: "group", "aria-label": "Zoom", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "tinted", "aria-label": "Hineinzoomen", onPress: () => zoom(1.2), children: /* @__PURE__ */ jsx("span", { className: "bpmn-icon-screen-fullscreen", "aria-hidden": true, children: "+" }) }),
+          /* @__PURE__ */ jsx(Button, { variant: "tinted", "aria-label": "Herauszoomen", onPress: () => zoom(0.8), children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2212" }) }),
+          /* @__PURE__ */ jsx(Button, { variant: "tinted", "aria-label": "Einpassen", onPress: () => zoom("fit"), children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2922" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "prn-bpmn-canvas", ref: containerRef }),
+        error && /* @__PURE__ */ jsxs("div", { className: "prn-bpmn-error", role: "alert", children: [
+          "BPMN konnte nicht geladen werden: ",
+          error
+        ] })
+      ]
+    }
+  );
+}
+var BpmnViewer_default = BpmnViewer;
+
+// src/editor/lintConfig.ts
+var DEFAULT_LINT_RULES = {
+  "bpmnlint/label-required": "error",
+  "bpmnlint/no-disconnected": "error",
+  "bpmnlint/no-implicit-split": "warn",
+  "bpmnlint/no-complex-gateway": "warn"
+};
+function buildLintConfig(ruleModules, rules = DEFAULT_LINT_RULES) {
+  const ruleCache = {};
+  for (const [name, mod] of Object.entries(ruleModules)) {
+    ruleCache[`rule:${name}`] = mod;
+  }
+  return {
+    config: { rules },
+    resolver: {
+      resolveRule(pkg, ruleName) {
+        const key = `rule:${pkg}/${ruleName}`;
+        const resolved = ruleCache[key];
+        if (!resolved) throw new Error(`unknown rule <${pkg}/${ruleName}>`);
+        return resolved;
+      },
+      resolveConfig(_pkg, configName) {
+        throw new Error(`unknown config <${configName}>`);
+      }
+    }
+  };
+}
+
+// src/editor/lintHints.ts
+var HINTS = {
+  "label-required": {
+    title: "Beschriftung fehlt",
+    explanation: "Aufgaben, Ereignisse und Gateways brauchen einen sprechenden Namen, damit der Prozess lesbar bleibt.",
+    howto: "Element anklicken und im Properties-Panel unter \u201EName\u201C eine Beschriftung eintragen."
+  },
+  "no-disconnected": {
+    title: "Element nicht verbunden",
+    explanation: "Ein Element ist \xFCber keine Sequenzfluss-Kante erreichbar \u2014 der Prozessfluss bricht ab.",
+    howto: "Eine Verbindung (Pfeil) vom vorherigen Element hierher und/oder weiter zum n\xE4chsten ziehen."
+  },
+  "no-implicit-split": {
+    title: "Impliziter Split",
+    explanation: "Ein Element hat mehrere ausgehende Sequenzfl\xFCsse ohne explizites Gateway \u2014 das Verzweigungsverhalten ist mehrdeutig.",
+    howto: "Ein Gateway (exklusiv/parallel) einf\xFCgen und die ausgehenden Fl\xFCsse dar\xFCber f\xFChren."
+  },
+  "no-complex-gateway": {
+    title: "Komplexes Gateway",
+    explanation: "Komplexe Gateways sind schwer verst\xE4ndlich und in den MaKo-Prozessen unerw\xFCnscht.",
+    howto: "Durch exklusive (XOR) oder parallele (AND) Gateways ersetzen."
+  }
+};
+var FALLBACK = {
+  title: "Validierungshinweis",
+  explanation: "Der Linter hat ein Problem an diesem Element gemeldet.",
+  howto: "Element pr\xFCfen und gem\xE4\xDF der Meldung korrigieren. Bei Unsicherheit den KI-Fix nutzen."
+};
+function lintHint(ruleId) {
+  return HINTS[ruleId] ?? FALLBACK;
+}
+function ErrorPanel({
+  issues,
+  elementName,
+  onSelectElement,
+  onKiFix,
+  onClose,
+  actionsSlot
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "prn-bpmn-errorpanel", role: "region", "aria-label": "Validierung", children: [
+    /* @__PURE__ */ jsxs("div", { className: "prn-bpmn-errorpanel-head", children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        "Validierung \u2014 ",
+        issues.length,
+        " Befund(e)"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "prn-bpmn-errorpanel-actions", children: [
+        actionsSlot,
+        onKiFix && /* @__PURE__ */ jsx(Button, { variant: "tinted", onPress: onKiFix, "data-testid": "ki-fix-all", children: "KI-Fix" }),
+        /* @__PURE__ */ jsx(Button, { variant: "plain", "aria-label": "Schlie\xDFen", onPress: onClose, children: "\u2715" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "prn-bpmn-errorpanel-list", children: issues.map((issue, idx) => {
+      const hint = lintHint(issue.id);
+      const name = elementName(issue.element);
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "prn-bpmn-errorpanel-item",
+          "data-category": issue.category,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "prn-bpmn-errorpanel-title", children: [
+              /* @__PURE__ */ jsx("span", { className: "prn-bpmn-errorpanel-icon", "aria-hidden": true, children: issue.category === "error" ? "\u2715" : "\u26A0" }),
+              /* @__PURE__ */ jsx("span", { children: hint.title }),
+              issue.element && /* @__PURE__ */ jsx(Link, { onPress: () => onSelectElement(issue.element), children: name })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "prn-bpmn-muted prn-bpmn-errorpanel-text", children: hint.explanation }),
+            /* @__PURE__ */ jsxs("p", { className: "prn-bpmn-errorpanel-text", children: [
+              "\u279C ",
+              hint.howto
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "prn-bpmn-muted prn-bpmn-errorpanel-meta", children: [
+              issue.message,
+              " (",
+              issue.id,
+              ")"
+            ] })
+          ]
+        },
+        `${issue.id}-${issue.element}-${idx}`
+      );
+    }) })
+  ] });
+}
+
+// src/editor/parseBpmnElements.ts
+var BPMN_NS = "http://www.omg.org/spec/BPMN/20100524/MODEL";
+var BPMN_ELEMENT_TYPES = [
+  "startEvent",
+  "endEvent",
+  "serviceTask",
+  "userTask",
+  "sendTask",
+  "receiveTask",
+  "manualTask",
+  "businessRuleTask",
+  "scriptTask",
+  "task",
+  "exclusiveGateway",
+  "parallelGateway",
+  "inclusiveGateway",
+  "eventBasedGateway",
+  "complexGateway",
+  "intermediateCatchEvent",
+  "intermediateThrowEvent",
+  "boundaryEvent",
+  "subProcess",
+  "callActivity"
+];
+var BPMN_TYPE_LABEL = {
+  startEvent: "Start",
+  endEvent: "Ende",
+  serviceTask: "Service Task",
+  userTask: "User Task",
+  sendTask: "Send Task",
+  receiveTask: "Receive Task",
+  manualTask: "Manuell",
+  businessRuleTask: "Business Rule",
+  scriptTask: "Script",
+  task: "Task",
+  exclusiveGateway: "Gateway (XOR)",
+  parallelGateway: "Gateway (AND)",
+  inclusiveGateway: "Gateway (OR)",
+  eventBasedGateway: "Gateway (Event)",
+  complexGateway: "Gateway (komplex)",
+  intermediateCatchEvent: "Ereignis (catch)",
+  intermediateThrowEvent: "Ereignis (throw)",
+  boundaryEvent: "Grenzereignis",
+  subProcess: "Teilprozess",
+  callActivity: "Call Activity"
+};
+function typeTone(type) {
+  if (type.includes("Gateway")) return "orange";
+  if (type === "startEvent") return "green";
+  if (type === "endEvent") return "red";
+  if (type.includes("Task")) return "blue";
+  return "neutral";
+}
+function parseBpmnElements(xml) {
+  const doc = new DOMParser().parseFromString(xml, "application/xml");
+  const laneMap = {};
+  const lanes = doc.getElementsByTagNameNS(BPMN_NS, "lane");
+  for (let i = 0; i < lanes.length; i++) {
+    const lane = lanes[i];
+    if (!lane) continue;
+    const laneName = lane.getAttribute("name") ?? "";
+    const refs = lane.getElementsByTagNameNS(BPMN_NS, "flowNodeRef");
+    for (let j = 0; j < refs.length; j++) {
+      const refId = refs[j]?.textContent?.trim() ?? "";
+      if (refId) laneMap[refId] = laneName;
+    }
+  }
+  const elements = [];
+  for (const type of BPMN_ELEMENT_TYPES) {
+    const nodes = doc.getElementsByTagNameNS(BPMN_NS, type);
+    for (let i = 0; i < nodes.length; i++) {
+      const el = nodes[i];
+      if (!el) continue;
+      const id = el.getAttribute("id") ?? "";
+      if (id) {
+        elements.push({
+          id,
+          type,
+          name: el.getAttribute("name") ?? "",
+          lane: laneMap[id] ?? ""
+        });
+      }
+    }
+  }
+  return elements;
+}
+function BpmnTableView({ xml, visibleRows = 30, className }) {
+  const [search, setSearch] = useState("");
+  const elements = useMemo(() => parseBpmnElements(xml), [xml]);
+  const filtered = useMemo(() => {
+    if (!search.trim()) return elements;
+    const q = search.toLowerCase();
+    return elements.filter(
+      (e) => e.name.toLowerCase().includes(q) || (BPMN_TYPE_LABEL[e.type] ?? e.type).toLowerCase().includes(q) || e.lane.toLowerCase().includes(q) || e.id.toLowerCase().includes(q)
+    );
+  }, [elements, search]);
+  const columns = useMemo(
+    () => [
+      {
+        header: "#",
+        accessorKey: "idx",
+        width: "56px",
+        disableFilters: true,
+        cellRender: (row) => /* @__PURE__ */ jsx("span", { className: "prn-bpmn-muted", children: row.idx })
+      },
+      {
+        header: "Typ",
+        accessorKey: "type",
+        width: "168px",
+        cellRender: (row) => /* @__PURE__ */ jsx(Badge, { tone: typeTone(row.type), children: BPMN_TYPE_LABEL[row.type] ?? row.type })
+      },
+      {
+        header: "Name / Bezeichnung",
+        accessorKey: "name",
+        cellRender: (row) => row.name ? /* @__PURE__ */ jsx("span", { children: row.name }) : /* @__PURE__ */ jsx("span", { className: "prn-bpmn-muted", children: "\u2014" })
+      },
+      {
+        header: "Lane / Rolle",
+        accessorKey: "lane",
+        cellRender: (row) => /* @__PURE__ */ jsx("span", { className: "prn-bpmn-muted", children: row.lane })
+      },
+      {
+        header: "ID",
+        accessorKey: "id",
+        cellRender: (row) => /* @__PURE__ */ jsx("span", { className: "prn-bpmn-mono", children: row.id })
+      }
+    ],
+    []
+  );
+  const tableData = useMemo(
+    () => filtered.map((el, idx) => ({ ...el, idx: idx + 1 })),
+    [filtered]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: ["prn-bpmn-table", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "prn-bpmn-table-bar", children: [
+      /* @__PURE__ */ jsx(
+        SearchField,
+        {
+          "aria-label": "Elemente durchsuchen",
+          placeholder: "Suche nach Name, Typ, Lane, ID\u2026",
+          value: search,
+          onChange: setSearch
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "prn-bpmn-muted prn-bpmn-table-count", children: [
+        filtered.length,
+        " / ",
+        elements.length,
+        " Elemente"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "prn-bpmn-table-body", children: /* @__PURE__ */ jsx(
+      AnalyticalTable,
+      {
+        data: tableData,
+        columns,
+        visibleRows,
+        alternateRowColor: true,
+        selectionMode: "none"
+      }
+    ) })
+  ] });
+}
+function BpmnEditor({
+  value,
+  defaultValue,
+  onChange,
+  onSave,
+  lintRules = DEFAULT_LINT_RULES,
+  onElementSelect,
+  onDirtyChange,
+  actionsSlot,
+  onKiFix,
+  colorScheme = "auto",
+  propertiesPanel = true,
+  minimap = true,
+  elementTemplates,
+  height = "100%",
+  className
+}) {
+  const canvasRef = useRef(null);
+  const propsRef = useRef(null);
+  const modelerRef = useRef(null);
+  const isControlled = value !== void 0;
+  const [error, setError] = useState(null);
+  const [lintIssues, setLintIssues] = useState([]);
+  const [errorPanelOpen, setErrorPanelOpen] = useState(false);
+  const [view, setView] = useState("diagram");
+  const [tableXml, setTableXml] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [themeTick, setThemeTick] = useState(0);
+  const cb = useRef({ onChange, onElementSelect, onDirtyChange });
+  cb.current = { onChange, onElementSelect, onDirtyChange };
+  const templatesRef = useRef(elementTemplates);
+  templatesRef.current = elementTemplates;
+  useEffect(() => onThemeChange(() => setThemeTick((t) => t + 1)), []);
+  const getXml = useCallback(async () => {
+    if (!modelerRef.current) return null;
+    try {
+      const { xml } = await modelerRef.current.saveXML({ format: true });
+      return xml;
+    } catch {
+      return null;
+    }
+  }, []);
+  const fitWithPadding = useCallback(() => {
+    const canvas = modelerRef.current?.get("canvas");
+    if (!canvas) return;
+    try {
+      canvas.zoom("fit-viewport", "auto");
+      const vb = canvas.viewbox();
+      const padded = Math.min(vb.scale * 0.92, 1.5);
+      canvas.zoom(padded, "auto");
+      canvas.scroll({ dx: 90, dy: 24 });
+    } catch {
+    }
+  }, []);
+  const initialXml = isControlled ? value : defaultValue;
+  const lastImportedRef = useRef(void 0);
+  useEffect(() => {
+    let cancelled = false;
+    setError(null);
+    const init = async () => {
+      if (!canvasRef.current) return;
+      if (modelerRef.current) {
+        try {
+          modelerRef.current.destroy();
+        } catch {
+        }
+        modelerRef.current = null;
+      }
+      const [
+        { default: BpmnModeler },
+        propsPanel,
+        { default: CamundaModdle },
+        { default: lintModule },
+        { default: BpmnRenderer },
+        { default: MinimapModule },
+        elementTemplatesMod,
+        labelRequired,
+        noComplexGateway,
+        noDisconnected,
+        noImplicitSplit
+      ] = await Promise.all([
+        import(
+          /* @vite-ignore */
+          'bpmn-js/lib/Modeler'
+        ),
+        import(
+          /* @vite-ignore */
+          'bpmn-js-properties-panel'
+        ),
+        import(
+          /* @vite-ignore */
+          'camunda-bpmn-moddle/resources/camunda.json'
+        ),
+        import(
+          /* @vite-ignore */
+          'bpmn-js-bpmnlint'
+        ),
+        import(
+          /* @vite-ignore */
+          'bpmn-js/lib/draw/BpmnRenderer'
+        ),
+        import(
+          /* @vite-ignore */
+          'diagram-js-minimap'
+        ),
+        import(
+          /* @vite-ignore */
+          'bpmn-js-element-templates'
+        ),
+        import(
+          /* @vite-ignore */
+          'bpmnlint/rules/label-required'
+        ),
+        import(
+          /* @vite-ignore */
+          'bpmnlint/rules/no-complex-gateway'
+        ),
+        import(
+          /* @vite-ignore */
+          'bpmnlint/rules/no-disconnected'
+        ),
+        import(
+          /* @vite-ignore */
+          'bpmnlint/rules/no-implicit-split'
+        )
+      ]);
+      if (cancelled || !canvasRef.current) return;
+      const {
+        BpmnPropertiesPanelModule,
+        BpmnPropertiesProviderModule,
+        CamundaPlatformPropertiesProviderModule
+      } = propsPanel;
+      const lintConfig = buildLintConfig(
+        {
+          "bpmnlint/label-required": labelRequired.default,
+          "bpmnlint/no-complex-gateway": noComplexGateway.default,
+          "bpmnlint/no-disconnected": noDisconnected.default,
+          "bpmnlint/no-implicit-split": noImplicitSplit.default
+        },
+        lintRules
+      );
+      const { ElementTemplatesPropertiesProviderModule } = elementTemplatesMod;
+      const colors = getDiagramColors(colorScheme);
+      const additionalModules = [
+        lintModule,
+        createAppleRendererModule(BpmnRenderer)
+      ];
+      if (minimap) additionalModules.push(MinimapModule);
+      if (propertiesPanel) {
+        additionalModules.unshift(
+          BpmnPropertiesPanelModule,
+          BpmnPropertiesProviderModule,
+          CamundaPlatformPropertiesProviderModule,
+          ElementTemplatesPropertiesProviderModule
+        );
+      }
+      const modeler = new BpmnModeler({
+        container: canvasRef.current,
+        ...propertiesPanel && propsRef.current ? { propertiesPanel: { parent: propsRef.current } } : {},
+        linting: { bpmnlint: lintConfig, active: true },
+        ...buildRendererConfig(colors),
+        additionalModules,
+        moddleExtensions: { camunda: CamundaModdle }
+      });
+      modelerRef.current = modeler;
+      if (Array.isArray(templatesRef.current)) {
+        try {
+          modeler.get("elementTemplates").set(
+            templatesRef.current
+          );
+        } catch {
+        }
+      }
+      if (minimap) {
+        try {
+          modeler.get("minimap").open();
+        } catch {
+        }
+      }
+      const eventBus = modeler.get("eventBus");
+      eventBus.on("linting.completed", (e) => {
+        const results = e.issues ?? {};
+        const flat = [];
+        for (const [elId, issues] of Object.entries(results)) {
+          for (const issue of issues) {
+            flat.push({
+              id: issue.rule ?? issue.id ?? elId,
+              message: issue.message,
+              category: issue.category ?? "warning",
+              element: elId
+            });
+          }
+        }
+        setLintIssues(flat);
+      });
+      eventBus.on("selection.changed", (e) => {
+        const sel = e.newSelection ?? [];
+        const only = sel.length === 1 ? sel[0] : void 0;
+        if (only?.id) {
+          cb.current.onElementSelect?.({ id: only.id, name: only.businessObject?.name });
+        } else {
+          cb.current.onElementSelect?.(null);
+        }
+      });
+      eventBus.on("commandStack.changed", () => {
+        cb.current.onDirtyChange?.(true);
+        if (cb.current.onChange) {
+          void modeler.saveXML({ format: true }).then(({ xml }) => {
+            lastImportedRef.current = xml;
+            cb.current.onChange?.(xml);
+          });
+        }
+      });
+      if (initialXml && initialXml.trim()) {
+        try {
+          await modeler.importXML(initialXml);
+          lastImportedRef.current = initialXml;
+          fitWithPadding();
+        } catch (err) {
+          if (!cancelled) setError(err.message);
+        }
+      }
+    };
+    void init();
+    return () => {
+      cancelled = true;
+      if (modelerRef.current) {
+        try {
+          modelerRef.current.destroy();
+        } catch {
+        }
+        modelerRef.current = null;
+      }
+    };
+  }, [themeTick, colorScheme, propertiesPanel, minimap]);
+  useEffect(() => {
+    if (!isControlled || value === void 0) return;
+    if (value === lastImportedRef.current) return;
+    const modeler = modelerRef.current;
+    if (!modeler || !value.trim()) return;
+    let cancelled = false;
+    void modeler.importXML(value).then(() => {
+      if (cancelled) return;
+      lastImportedRef.current = value;
+      fitWithPadding();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [value, isControlled, fitWithPadding]);
+  const elementName = useCallback((elementId) => {
+    if (!elementId) return "(unbenannt)";
+    const reg = modelerRef.current?.get("elementRegistry");
+    return reg?.get(elementId)?.businessObject?.name || elementId;
+  }, []);
+  const selectElement = useCallback((elementId) => {
+    const reg = modelerRef.current?.get("elementRegistry");
+    const el = reg?.get(elementId);
+    if (!el) return;
+    try {
+      modelerRef.current?.get("selection")?.select(el);
+      modelerRef.current?.get("canvas")?.scrollToElement(el);
+    } catch {
+    }
+  }, []);
+  const handleSave = useCallback(async () => {
+    if (!onSave) return;
+    setSaving(true);
+    try {
+      const xml = await getXml();
+      if (xml != null) {
+        await onSave(xml);
+        cb.current.onDirtyChange?.(false);
+      }
+    } finally {
+      setSaving(false);
+    }
+  }, [onSave, getXml]);
+  const handleSearch = useCallback(() => {
+    const m = modelerRef.current;
+    if (!m) return;
+    try {
+      m.get("editorActions").trigger("find");
+    } catch {
+      try {
+        m.get("searchPad").toggle();
+      } catch {
+      }
+    }
+  }, []);
+  useEffect(() => {
+    const m = modelerRef.current;
+    if (!m) return;
+    try {
+      m.get("elementTemplates").set(
+        Array.isArray(elementTemplates) ? elementTemplates : []
+      );
+    } catch {
+    }
+  }, [elementTemplates]);
+  const handleToggleView = useCallback(
+    async (next) => {
+      if (next === "table") {
+        const xml = await getXml();
+        setTableXml(xml ?? initialXml ?? "");
+      }
+      setView(next);
+    },
+    [getXml, initialXml]
+  );
+  const errors = lintIssues.filter((i) => i.category === "error");
+  const warnings = lintIssues.filter((i) => i.category === "warning");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["prn-bpmn", "prn-bpmn-editor", className].filter(Boolean).join(" "),
+      "data-color-scheme": colorScheme,
+      style: { height },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "prn-bpmn-editor-toolbar", role: "toolbar", "aria-label": "BPMN-Editor-Aktionen", children: [
+          /* @__PURE__ */ jsxs(
+            SegmentedControl,
+            {
+              "aria-label": "Ansicht",
+              selectedKeys: /* @__PURE__ */ new Set([view]),
+              onSelectionChange: (keys) => {
+                const next = [...keys][0];
+                if (next) void handleToggleView(next);
+              },
+              children: [
+                /* @__PURE__ */ jsx(Segment, { id: "diagram", children: "Diagramm" }),
+                /* @__PURE__ */ jsx(Segment, { id: "table", children: "Tabelle" })
+              ]
+            }
+          ),
+          view === "diagram" && /* @__PURE__ */ jsx(Button, { variant: "plain", onPress: handleSearch, "aria-label": "Element suchen", children: "\u{1F50D} Suchen" }),
+          /* @__PURE__ */ jsx("div", { className: "prn-bpmn-editor-toolbar-spacer" }),
+          actionsSlot,
+          onSave && /* @__PURE__ */ jsx(Button, { variant: "filled", onPress: () => void handleSave(), isDisabled: saving, children: saving ? "Speichern\u2026" : "Speichern" })
+        ] }),
+        error && /* @__PURE__ */ jsx(Notice, { tone: "negative", title: "Fehler", children: error }),
+        /* @__PURE__ */ jsxs("div", { className: "prn-bpmn-editor-main", children: [
+          /* @__PURE__ */ jsxs("div", { className: "prn-bpmn-editor-stage", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: canvasRef,
+                className: "prn-bpmn-canvas",
+                style: { display: view === "table" ? "none" : "block" }
+              }
+            ),
+            view === "table" && /* @__PURE__ */ jsx("div", { className: "prn-bpmn-editor-table", children: /* @__PURE__ */ jsx(BpmnTableView, { xml: tableXml }) })
+          ] }),
+          propertiesPanel && view === "diagram" && /* @__PURE__ */ jsx("div", { ref: propsRef, className: "prn-bpmn-editor-properties" })
+        ] }),
+        lintIssues.length > 0 && !errorPanelOpen && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "prn-bpmn-editor-lintbar",
+            onClick: () => setErrorPanelOpen(true),
+            "data-testid": "lint-footer-toggle",
+            children: [
+              errors.length > 0 && /* @__PURE__ */ jsxs("span", { className: "prn-bpmn-lint-error", children: [
+                "\u2715 ",
+                errors.length,
+                " Fehler"
+              ] }),
+              warnings.length > 0 && /* @__PURE__ */ jsxs("span", { className: "prn-bpmn-lint-warning", children: [
+                "\u26A0 ",
+                warnings.length,
+                " Warnungen"
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "prn-bpmn-muted", children: "\u2014 Details anzeigen" })
+            ]
+          }
+        ),
+        lintIssues.length > 0 && errorPanelOpen && /* @__PURE__ */ jsx(
+          ErrorPanel,
+          {
+            issues: lintIssues,
+            elementName,
+            onSelectElement: selectElement,
+            onKiFix: onKiFix ? () => onKiFix(lintIssues) : void 0,
+            onClose: () => setErrorPanelOpen(false)
+          }
+        )
+      ]
+    }
+  );
+}
+var BpmnEditor_default = BpmnEditor;
+
+export { BpmnEditor, BpmnEditor_default as BpmnEditorDefault, BpmnTableView, BpmnViewer, BpmnViewer_default as BpmnViewerDefault, STATUS_LABEL, STATUS_TOKEN, buildActivityMap, computeElementStatuses, computeExecutedFlows, deriveStatus, getDiagramColors, isDarkMode, lintHint, matchActivity, onThemeChange, readToken };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map