@aranzatech/diagrams-bpmn 0.1.0

package/dist/chunk-NXMUX67A.js

@@ -0,0 +1,1443 @@
+import { BPMN_THEME, resolveStroke, resolveStrokeWidth } from './chunk-23B2IGK5.js';
+import { Position, Handle } from '@xyflow/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var ALL_POSITIONS = [
+  Position.Top,
+  Position.Right,
+  Position.Bottom,
+  Position.Left
+];
+var HANDLE_STYLE = {
+  width: 8,
+  height: 8,
+  background: "#8c8c8c",
+  border: "1.5px solid #fff"
+};
+function BpmnHandles({ variant = "all" }) {
+  const src = variant === "all" || variant === "source";
+  const tgt = variant === "all" || variant === "target";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tgt && ALL_POSITIONS.map((position) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position,
+        id: `target-${position}`,
+        style: HANDLE_STYLE
+      },
+      `target-${position}`
+    )),
+    src && ALL_POSITIONS.map((position) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position,
+        id: `source-${position}`,
+        style: HANDLE_STYLE
+      },
+      `source-${position}`
+    ))
+  ] });
+}
+var EXTERNAL_STYLE = {
+  position: "absolute",
+  top: "100%",
+  left: "50%",
+  transform: "translateX(-50%)",
+  marginTop: 4,
+  fontSize: BPMN_THEME.fontSize,
+  fontFamily: BPMN_THEME.fontFamily,
+  color: BPMN_THEME.labelColor,
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  maxWidth: 100,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  pointerEvents: "none",
+  lineHeight: 1.3
+};
+var INTERNAL_STYLE = {
+  fontSize: BPMN_THEME.fontSize,
+  fontFamily: BPMN_THEME.fontFamily,
+  color: BPMN_THEME.labelColor,
+  textAlign: "center",
+  lineHeight: 1.3,
+  overflow: "hidden",
+  wordBreak: "break-word"
+};
+function BpmnLabel({ children, external = false, style }) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsx("div", { style: { ...external ? EXTERNAL_STYLE : INTERNAL_STYLE, ...style }, children });
+}
+function pentagon(r) {
+  const pts = Array.from({ length: 5 }, (_, i) => {
+    const a = (i * 72 - 90) * (Math.PI / 180);
+    return `${(r * Math.cos(a)).toFixed(2)},${(r * Math.sin(a)).toFixed(2)}`;
+  });
+  return `M ${pts.join(" L ")} Z`;
+}
+function EventMarker({ cx, cy, trigger, filled = false, stroke, bg, r = 10 }) {
+  const s = r * 0.6;
+  const f = filled ? stroke : "none";
+  const sw = 1.4;
+  if (trigger === "none" || !trigger) return null;
+  return /* @__PURE__ */ jsxs("g", { transform: `translate(${cx},${cy})`, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    trigger === "message" && /* @__PURE__ */ jsxs("g", { fill: f, stroke, strokeWidth: sw, children: [
+      /* @__PURE__ */ jsx("rect", { x: -s, y: -s * 0.65, width: s * 2, height: s * 1.3, rx: 0.5 }),
+      /* @__PURE__ */ jsx("polyline", { fill: "none", points: `${-s},${-s * 0.65} 0,${s * 0.2} ${s},${-s * 0.65}` })
+    ] }),
+    trigger === "timer" && /* @__PURE__ */ jsxs("g", { fill: f, stroke, strokeWidth: sw, children: [
+      /* @__PURE__ */ jsx("circle", { r: s, fill: bg, stroke, strokeWidth: sw }),
+      Array.from({ length: 12 }, (_, i) => {
+        const a = (i * 30 - 90) * (Math.PI / 180);
+        const len = i % 3 === 0 ? 0.25 : 0.15;
+        const x1 = Math.cos(a) * s * 0.75;
+        const y1 = Math.sin(a) * s * 0.75;
+        const x2 = Math.cos(a) * s * (0.75 + len);
+        const y2 = Math.sin(a) * s * (0.75 + len);
+        return /* @__PURE__ */ jsx("line", { x1, y1, x2, y2, stroke, strokeWidth: sw * 0.8 }, i);
+      }),
+      /* @__PURE__ */ jsx("line", { x1: 0, y1: 0, x2: 0, y2: -s * 0.5, stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx("line", { x1: 0, y1: 0, x2: s * 0.4, y2: 0, stroke, strokeWidth: sw })
+    ] }),
+    trigger === "error" && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M ${s * 0.35},${-s} L ${-s * 0.15},${-s * 0.05} L ${s * 0.35},${s * 0.05} L ${-s * 0.35},${s} L ${s * 0.15},${s * 0.05} L ${-s * 0.35},${-s * 0.05} Z`,
+        fill: f,
+        stroke,
+        strokeWidth: sw
+      }
+    ),
+    trigger === "escalation" && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M 0,${-s} L ${s * 0.8},${s * 0.7} L 0,${s * 0.2} L ${-s * 0.8},${s * 0.7} Z`,
+        fill: f,
+        stroke,
+        strokeWidth: sw
+      }
+    ),
+    trigger === "conditional" && // Three horizontal lines (document/list)
+    /* @__PURE__ */ jsxs("g", { stroke, strokeWidth: sw, fill: "none", children: [
+      /* @__PURE__ */ jsx("rect", { x: -s * 0.75, y: -s * 0.9, width: s * 1.5, height: s * 1.8, rx: 1, fill: bg, stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx("line", { x1: -s * 0.45, y1: -s * 0.4, x2: s * 0.45, y2: -s * 0.4 }),
+      /* @__PURE__ */ jsx("line", { x1: -s * 0.45, y1: 0, x2: s * 0.45, y2: 0 }),
+      /* @__PURE__ */ jsx("line", { x1: -s * 0.45, y1: s * 0.4, x2: s * 0.45, y2: s * 0.4 })
+    ] }),
+    trigger === "link" && // Arrow pointing right
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M ${-s * 0.9},${-s * 0.35} L ${s * 0.1},${-s * 0.35} L ${s * 0.1},${-s * 0.65} L ${s},0 L ${s * 0.1},${s * 0.65} L ${s * 0.1},${s * 0.35} L ${-s * 0.9},${s * 0.35} Z`,
+        fill: f,
+        stroke,
+        strokeWidth: sw
+      }
+    ),
+    trigger === "compensation" && // Two left-pointing chevrons <<
+    /* @__PURE__ */ jsxs("g", { fill: f, stroke, strokeWidth: sw, children: [
+      /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          fill: f,
+          strokeLinejoin: "round",
+          points: `${s * 0.5},${-s * 0.7} ${-s * 0.1},0 ${s * 0.5},${s * 0.7}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          fill: f,
+          strokeLinejoin: "round",
+          points: `${s},${-s * 0.7} ${s * 0.4},0 ${s},${s * 0.7}`
+        }
+      ),
+      filled && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("polygon", { fill: stroke, points: `${s * 0.5},${-s * 0.7} ${-s * 0.1},0 ${s * 0.5},${s * 0.7}` }),
+        /* @__PURE__ */ jsx("polygon", { fill: stroke, points: `${s},${-s * 0.7} ${s * 0.4},0 ${s},${s * 0.7}` })
+      ] })
+    ] }),
+    trigger === "signal" && /* @__PURE__ */ jsx(
+      "polygon",
+      {
+        points: `0,${-s} ${s * 0.9},${s * 0.7} ${-s * 0.9},${s * 0.7}`,
+        fill: f,
+        stroke,
+        strokeWidth: sw
+      }
+    ),
+    trigger === "cancel" && // X mark
+    /* @__PURE__ */ jsxs("g", { stroke, strokeWidth: sw * 1.5, strokeLinecap: "round", fill: "none", children: [
+      /* @__PURE__ */ jsx("line", { x1: -s * 0.7, y1: -s * 0.7, x2: s * 0.7, y2: s * 0.7 }),
+      /* @__PURE__ */ jsx("line", { x1: s * 0.7, y1: -s * 0.7, x2: -s * 0.7, y2: s * 0.7 })
+    ] }),
+    trigger === "terminate" && /* @__PURE__ */ jsx("circle", { r: s * 0.8, fill: stroke, stroke, strokeWidth: sw }),
+    trigger === "multiple" && /* @__PURE__ */ jsx("path", { d: pentagon(s * 0.9), fill: f, stroke, strokeWidth: sw }),
+    trigger === "parallelMultiple" && /* @__PURE__ */ jsxs("g", { stroke, strokeWidth: sw * 1.5, strokeLinecap: "round", fill: "none", children: [
+      /* @__PURE__ */ jsx("line", { x1: 0, y1: -s * 0.8, x2: 0, y2: s * 0.8 }),
+      /* @__PURE__ */ jsx("line", { x1: -s * 0.8, y1: 0, x2: s * 0.8, y2: 0 })
+    ] })
+  ] });
+}
+var SIZE = 36;
+var CX = SIZE / 2;
+var R = CX - 2;
+function StartEventNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  const trigger = d.trigger ?? "none";
+  const dashArray = d.isNonInterrupting ? "4 2" : void 0;
+  return /* @__PURE__ */ jsxs("div", { style: { width: SIZE, height: SIZE, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE, height: SIZE, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: CX,
+          cy: CX,
+          r: R,
+          fill,
+          stroke,
+          strokeWidth: sw,
+          strokeDasharray: dashArray
+        }
+      ),
+      /* @__PURE__ */ jsx(EventMarker, { cx: CX, cy: CX, trigger, filled: false, stroke, bg: fill, r: R * 0.55 })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "source" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+var SIZE2 = 36;
+var CX2 = SIZE2 / 2;
+var R2 = CX2 - 2;
+function EndEventNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  const trigger = d.trigger ?? "none";
+  return /* @__PURE__ */ jsxs("div", { style: { width: SIZE2, height: SIZE2, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE2, height: SIZE2, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: CX2,
+          cy: CX2,
+          r: R2,
+          fill,
+          stroke,
+          strokeWidth: sw + 2
+        }
+      ),
+      /* @__PURE__ */ jsx(EventMarker, { cx: CX2, cy: CX2, trigger, filled: true, stroke, bg: fill, r: R2 * 0.55 })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "target" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+var SIZE3 = 36;
+var CX3 = SIZE3 / 2;
+var R_OUTER = CX3 - 2;
+var R_INNER = R_OUTER - 3;
+var ICON_R = R_INNER * 0.65;
+function IntermediateCatchEventNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  const trigger = d.trigger ?? "none";
+  return /* @__PURE__ */ jsxs("div", { style: { width: SIZE3, height: SIZE3, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx("circle", { cx: CX3, cy: CX3, r: R_OUTER, fill, stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx("circle", { cx: CX3, cy: CX3, r: R_INNER, fill: "none", stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx(EventMarker, { cx: CX3, cy: CX3, trigger, filled: false, stroke, bg: fill, r: ICON_R })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+function IntermediateThrowEventNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  const trigger = d.trigger ?? "none";
+  return /* @__PURE__ */ jsxs("div", { style: { width: SIZE3, height: SIZE3, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx("circle", { cx: CX3, cy: CX3, r: R_OUTER, fill, stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx("circle", { cx: CX3, cy: CX3, r: R_INNER, fill: stroke, stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx(EventMarker, { cx: CX3, cy: CX3, trigger, filled: true, stroke: fill, bg: stroke, r: ICON_R })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+function BoundaryEventNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  const trigger = d.trigger ?? "none";
+  const dashArray = d.isNonInterrupting ? "4 2" : void 0;
+  return /* @__PURE__ */ jsxs("div", { style: { width: SIZE3, height: SIZE3, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE3, height: SIZE3, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: CX3,
+          cy: CX3,
+          r: R_OUTER,
+          fill,
+          stroke,
+          strokeWidth: sw,
+          strokeDasharray: dashArray
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: CX3,
+          cy: CX3,
+          r: R_INNER,
+          fill: "none",
+          stroke,
+          strokeWidth: sw,
+          strokeDasharray: dashArray
+        }
+      ),
+      /* @__PURE__ */ jsx(EventMarker, { cx: CX3, cy: CX3, trigger, filled: false, stroke, bg: fill, r: ICON_R })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "source" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+function TaskIcon({ type, size = 14, color = "#404040" }) {
+  const s = size;
+  const c = color;
+  switch (type) {
+    case "UserTask":
+      return /* @__PURE__ */ jsxs("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5", r: "3", stroke: c, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6", stroke: c, strokeWidth: "1.5", strokeLinecap: "round" })
+      ] });
+    case "ServiceTask":
+      return /* @__PURE__ */ jsxs("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "2.5", stroke: c, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8 1v2M8 13v2M1 8h2M13 8h2M3.2 3.2l1.4 1.4M11.4 11.4l1.4 1.4M3.2 12.8l1.4-1.4M11.4 4.6l1.4-1.4",
+            stroke: c,
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ] });
+    case "ScriptTask":
+      return /* @__PURE__ */ jsxs("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "2", width: "10", height: "12", rx: "1", stroke: c, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 6h4M6 9h4M6 12h2", stroke: c, strokeWidth: "1.5", strokeLinecap: "round" })
+      ] });
+    case "ManualTask":
+      return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5 10V6a1 1 0 0 1 2 0v2a1 1 0 0 1 2 0v1a1 1 0 0 1 2 0v2c0 1.7-1.3 3-3 3H6a3 3 0 0 1-3-3V9.5",
+          stroke: c,
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) });
+    case "BusinessRuleTask":
+      return /* @__PURE__ */ jsxs("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "12", height: "10", rx: "1", stroke: c, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 7h12M6 3v10", stroke: c, strokeWidth: "1.5" })
+      ] });
+    case "ReceiveTask":
+      return /* @__PURE__ */ jsxs("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "12", height: "8", rx: "1", stroke: c, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 4l6 5 6-5", stroke: c, strokeWidth: "1.5", strokeLinecap: "round" })
+      ] });
+    case "SendTask":
+      return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: c, children: /* @__PURE__ */ jsx("path", { d: "M2 4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4zm1 0l5 4.5L13 4H3z" }) });
+    case "CallActivity":
+      return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "10", height: "6", rx: "1", stroke: c, strokeWidth: "2" }) });
+    default:
+      return null;
+  }
+}
+var MARKER_SIZE = 12;
+var GAP = 3;
+function TaskMarkers({ markers, stroke, size = MARKER_SIZE }) {
+  if (!markers || markers.length === 0) return null;
+  const total = markers.length * size + (markers.length - 1) * GAP;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        bottom: 5,
+        left: "50%",
+        transform: "translateX(-50%)",
+        display: "flex",
+        alignItems: "center",
+        gap: GAP,
+        width: total
+      },
+      children: markers.map((m) => /* @__PURE__ */ jsx(MarkerIcon, { marker: m, stroke, size }, m))
+    }
+  );
+}
+function MarkerIcon({ marker, stroke, size }) {
+  const s = size / 2;
+  const sw = 1.3;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: `${-s} ${-s} ${size} ${size}`,
+      style: { overflow: "visible", display: "block" },
+      children: [
+        marker === "loop" && // Circular arrow (↻)
+        /* @__PURE__ */ jsxs("g", { fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", children: [
+          /* @__PURE__ */ jsx("path", { d: `M 0,${-s * 0.85} A ${s * 0.85},${s * 0.85} 0 1 1 ${s * 0.6},${s * 0.6}` }),
+          /* @__PURE__ */ jsx("polyline", { points: `${s * 0.2},${s * 0.9} ${s * 0.6},${s * 0.6} ${s * 0.95},${s}` })
+        ] }),
+        marker === "parallelMultiple" && // Three vertical bars |||
+        /* @__PURE__ */ jsxs("g", { stroke, strokeWidth: sw, strokeLinecap: "round", children: [
+          /* @__PURE__ */ jsx("line", { x1: -s * 0.55, y1: -s * 0.75, x2: -s * 0.55, y2: s * 0.75 }),
+          /* @__PURE__ */ jsx("line", { x1: 0, y1: -s * 0.75, x2: 0, y2: s * 0.75 }),
+          /* @__PURE__ */ jsx("line", { x1: s * 0.55, y1: -s * 0.75, x2: s * 0.55, y2: s * 0.75 })
+        ] }),
+        marker === "sequentialMultiple" && // Three horizontal bars ≡
+        /* @__PURE__ */ jsxs("g", { stroke, strokeWidth: sw, strokeLinecap: "round", children: [
+          /* @__PURE__ */ jsx("line", { x1: -s * 0.75, y1: -s * 0.55, x2: s * 0.75, y2: -s * 0.55 }),
+          /* @__PURE__ */ jsx("line", { x1: -s * 0.75, y1: 0, x2: s * 0.75, y2: 0 }),
+          /* @__PURE__ */ jsx("line", { x1: -s * 0.75, y1: s * 0.55, x2: s * 0.75, y2: s * 0.55 })
+        ] }),
+        marker === "compensation" && // Two left-pointing triangles <<
+        /* @__PURE__ */ jsxs("g", { fill: stroke, stroke, strokeWidth: 0.5, strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx("polygon", { points: `${s * 0.4},${-s * 0.7} ${-s * 0.2},0 ${s * 0.4},${s * 0.7}` }),
+          /* @__PURE__ */ jsx("polygon", { points: `${s},${-s * 0.7} ${s * 0.4},0 ${s},${s * 0.7}` })
+        ] })
+      ]
+    }
+  );
+}
+function AdhocMarker({ stroke, size = MARKER_SIZE }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        bottom: 5,
+        left: "50%",
+        transform: "translateX(-50%)",
+        color: stroke,
+        fontSize: size,
+        lineHeight: 1,
+        fontFamily: "serif",
+        userSelect: "none"
+      },
+      children: "~"
+    }
+  );
+}
+function TaskNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const hasMarkers = d.markers && d.markers.length > 0;
+  const borderWidth = d.elementType === "CallActivity" ? sw + 2 : sw;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        background: d.color?.fill ?? BPMN_THEME.fill,
+        border: `${borderWidth}px solid ${stroke}`,
+        borderRadius: 6,
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: hasMarkers ? "4px 8px 22px" : "4px 8px",
+        position: "relative",
+        fontFamily: BPMN_THEME.fontFamily
+      },
+      children: [
+        d.elementType && d.elementType !== "Task" && /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 5, left: 5 }, children: /* @__PURE__ */ jsx(TaskIcon, { type: d.elementType, size: 14, color: stroke }) }),
+        /* @__PURE__ */ jsx(BpmnLabel, { style: { width: "100%" }, children: d.label ?? d.elementType }),
+        d.priority && /* @__PURE__ */ jsx(
+          "div",
+          {
+            title: d.priority,
+            style: {
+              position: "absolute",
+              top: 5,
+              right: 5,
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              background: PRIORITY_COLOR[d.priority]
+            }
+          }
+        ),
+        hasMarkers && /* @__PURE__ */ jsx(TaskMarkers, { markers: d.markers, stroke }),
+        /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" })
+      ]
+    }
+  );
+}
+var PRIORITY_COLOR = {
+  critical: "#ef4444",
+  high: "#f97316",
+  medium: "#eab308",
+  low: "#22c55e"
+};
+var SIZE4 = 50;
+var H = SIZE4 / 2;
+var DIAMOND = `${H},2 ${SIZE4 - 2},${H} ${H},${SIZE4 - 2} 2,${H}`;
+function GatewaySymbol({ type, stroke }) {
+  const c = H;
+  switch (type) {
+    case "ExclusiveGateway":
+      return /* @__PURE__ */ jsxs("g", { stroke, strokeWidth: "2.5", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsx("line", { x1: c - 7, y1: c - 7, x2: c + 7, y2: c + 7 }),
+        /* @__PURE__ */ jsx("line", { x1: c + 7, y1: c - 7, x2: c - 7, y2: c + 7 })
+      ] });
+    case "InclusiveGateway":
+      return /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r: 8, fill: "none", stroke, strokeWidth: "2" });
+    case "ParallelGateway":
+      return /* @__PURE__ */ jsxs("g", { stroke, strokeWidth: "2.5", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsx("line", { x1: c, y1: c - 9, x2: c, y2: c + 9 }),
+        /* @__PURE__ */ jsx("line", { x1: c - 9, y1: c, x2: c + 9, y2: c })
+      ] });
+    case "EventBasedGateway":
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r: 9, fill: "none", stroke, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("circle", { cx: c, cy: c, r: 6, fill: "none", stroke, strokeWidth: "1.2" }),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${c},${c - 5.5} ${c + 5.2},${c - 1.7} ${c + 3.2},${c + 4.8} ${c - 3.2},${c + 4.8} ${c - 5.2},${c - 1.7}`,
+            fill: "none",
+            stroke,
+            strokeWidth: "1.4",
+            strokeLinejoin: "round"
+          }
+        )
+      ] });
+    case "ComplexGateway":
+      return /* @__PURE__ */ jsxs("g", { stroke, strokeWidth: "2", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsx("line", { x1: c, y1: c - 9, x2: c, y2: c + 9 }),
+        /* @__PURE__ */ jsx("line", { x1: c - 9, y1: c, x2: c + 9, y2: c }),
+        /* @__PURE__ */ jsx("line", { x1: c - 6, y1: c - 6, x2: c + 6, y2: c + 6 }),
+        /* @__PURE__ */ jsx("line", { x1: c + 6, y1: c - 6, x2: c - 6, y2: c + 6 })
+      ] });
+    default:
+      return null;
+  }
+}
+function GatewayNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  return /* @__PURE__ */ jsxs("div", { style: { width: SIZE4, height: SIZE4, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: SIZE4, height: SIZE4, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: DIAMOND,
+          fill: d.color?.fill ?? BPMN_THEME.fill,
+          stroke,
+          strokeWidth: sw
+        }
+      ),
+      /* @__PURE__ */ jsx(GatewaySymbol, { type: d.elementType, stroke })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+function SubProcessNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const variant = d.subProcessVariant ?? "embedded";
+  const isExpanded = d.isExpanded ?? true;
+  const hasMarkers = d.markers && d.markers.length > 0;
+  const borderStyle = variant === "event" ? "dashed" : "solid";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        background: d.color?.fill ?? "#f8faff",
+        border: `${sw}px ${borderStyle} ${stroke}`,
+        borderRadius: 6,
+        boxSizing: "border-box",
+        position: "relative",
+        fontFamily: BPMN_THEME.fontFamily
+      },
+      children: [
+        variant === "transaction" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 4,
+              border: `${sw}px solid ${stroke}`,
+              borderRadius: 4,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(BpmnLabel, { style: { padding: "4px 8px" }, children: d.label }),
+        !isExpanded && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-label": "collapsed-subprocess-marker",
+            style: {
+              position: "absolute",
+              bottom: 6,
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: 16,
+              height: 16,
+              border: `1.5px solid ${stroke}`,
+              borderRadius: 2,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 12,
+              color: stroke,
+              background: BPMN_THEME.fill,
+              zIndex: 1
+            },
+            children: "+"
+          }
+        ),
+        variant === "adhoc" && /* @__PURE__ */ jsx(AdhocMarker, { stroke }),
+        hasMarkers && /* @__PURE__ */ jsx(TaskMarkers, { markers: d.markers, stroke }),
+        /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" })
+      ]
+    }
+  );
+}
+var HEADER_WIDTH = 30;
+var HEADER_HEIGHT = 28;
+function PoolNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const orientation = d.orientation ?? "horizontal";
+  const fill = d.color?.fill ?? "#f5f7ff";
+  const headerFill = d.color?.fill ?? "#edf0ff";
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          border: `${sw}px solid ${stroke}`,
+          borderRadius: 4,
+          boxSizing: "border-box",
+          background: fill,
+          overflow: "hidden",
+          fontFamily: BPMN_THEME.fontFamily
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-label": "pool-header",
+              style: {
+                height: HEADER_HEIGHT,
+                minHeight: HEADER_HEIGHT,
+                borderBottom: `${sw}px solid ${stroke}`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: headerFill,
+                padding: "0 8px"
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: BPMN_THEME.fontSize,
+                    fontWeight: 600,
+                    color: BPMN_THEME.labelColor,
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  children: d.label
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative" } })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        border: `${sw}px solid ${stroke}`,
+        borderRadius: 4,
+        boxSizing: "border-box",
+        background: fill,
+        overflow: "hidden",
+        fontFamily: BPMN_THEME.fontFamily
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-label": "pool-header",
+            style: {
+              width: HEADER_WIDTH,
+              minWidth: HEADER_WIDTH,
+              borderRight: `${sw}px solid ${stroke}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: headerFill
+            },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  writingMode: "vertical-rl",
+                  transform: "rotate(180deg)",
+                  fontSize: BPMN_THEME.fontSize,
+                  fontWeight: 600,
+                  color: BPMN_THEME.labelColor,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  maxHeight: "90%"
+                },
+                children: d.label
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative" } })
+      ]
+    }
+  );
+}
+var HEADER_HEIGHT2 = 24;
+var HEADER_WIDTH2 = 28;
+function LaneNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const orientation = d.orientation ?? "horizontal";
+  const fill = d.color?.fill ?? "#fafbff";
+  const headerFill = d.color?.fill ?? "#f0f3ff";
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          border: `${sw}px solid ${stroke}`,
+          borderRadius: 2,
+          boxSizing: "border-box",
+          background: fill,
+          overflow: "hidden",
+          fontFamily: BPMN_THEME.fontFamily
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-label": "lane-header",
+              style: {
+                width: HEADER_WIDTH2,
+                minWidth: HEADER_WIDTH2,
+                borderRight: `1px solid ${stroke}`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: headerFill,
+                padding: "6px 0"
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    writingMode: "vertical-rl",
+                    transform: "rotate(180deg)",
+                    fontSize: BPMN_THEME.fontSize,
+                    fontWeight: 500,
+                    color: BPMN_THEME.labelColor,
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    maxHeight: "90%"
+                  },
+                  children: d.label
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative" } })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        border: `${sw}px solid ${stroke}`,
+        borderRadius: 2,
+        boxSizing: "border-box",
+        background: fill,
+        overflow: "hidden",
+        fontFamily: BPMN_THEME.fontFamily
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-label": "lane-header",
+            style: {
+              height: HEADER_HEIGHT2,
+              minHeight: HEADER_HEIGHT2,
+              borderBottom: `1px solid ${stroke}`,
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: 8,
+              background: headerFill,
+              fontSize: BPMN_THEME.fontSize,
+              fontWeight: 500,
+              color: BPMN_THEME.labelColor
+            },
+            children: d.label
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative" } })
+      ]
+    }
+  );
+}
+var HANDLE_STYLE2 = { opacity: 0, width: 6, height: 6 };
+function AnnotationNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const orientation = d.orientation ?? "vertical";
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          boxSizing: "border-box",
+          borderTop: `${sw + 1}px solid ${stroke}`,
+          borderLeft: `${sw}px solid ${stroke}`,
+          borderRight: `${sw}px solid ${stroke}`,
+          padding: "8px 6px",
+          background: "transparent",
+          fontFamily: BPMN_THEME.fontFamily,
+          fontSize: BPMN_THEME.fontSize,
+          color: BPMN_THEME.labelColor,
+          lineHeight: 1.4
+        },
+        children: [
+          d.label,
+          /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, id: "target-left", style: HANDLE_STYLE2 }),
+          /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Right, id: "target-right", style: HANDLE_STYLE2 }),
+          /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Left, id: "source-left", style: HANDLE_STYLE2 }),
+          /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, id: "source-right", style: HANDLE_STYLE2 })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        borderLeft: `${sw + 1}px solid ${stroke}`,
+        borderTop: `${sw}px solid ${stroke}`,
+        borderBottom: `${sw}px solid ${stroke}`,
+        padding: "4px 8px",
+        background: "transparent",
+        fontFamily: BPMN_THEME.fontFamily,
+        fontSize: BPMN_THEME.fontSize,
+        color: BPMN_THEME.labelColor,
+        lineHeight: 1.4
+      },
+      children: [
+        d.label,
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, id: "target-top", style: HANDLE_STYLE2 }),
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Bottom, id: "target-bottom", style: HANDLE_STYLE2 }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Top, id: "source-top", style: HANDLE_STYLE2 }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, id: "source-bottom", style: HANDLE_STYLE2 })
+      ]
+    }
+  );
+}
+function GroupNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        border: `${sw}px dashed ${stroke}`,
+        borderRadius: 8,
+        boxSizing: "border-box",
+        background: "transparent",
+        padding: "4px 8px",
+        fontFamily: BPMN_THEME.fontFamily,
+        fontSize: BPMN_THEME.fontSize,
+        color: BPMN_THEME.labelColor,
+        fontStyle: "italic"
+      },
+      children: d.label
+    }
+  );
+}
+var W = 36;
+var H2 = 50;
+var FOLD = 10;
+function DataObjectNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  const path = [
+    `M 0 0`,
+    `L ${W - FOLD} 0`,
+    `L ${W} ${FOLD}`,
+    `L ${W} ${H2}`,
+    `L 0 ${H2}`,
+    `Z`
+  ].join(" ");
+  const foldPath2 = [
+    `M ${W - FOLD} 0`,
+    `L ${W - FOLD} ${FOLD}`,
+    `L ${W} ${FOLD}`
+  ].join(" ");
+  return /* @__PURE__ */ jsxs("div", { style: { width: W, height: H2, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: W, height: H2, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx("path", { d: path, fill, stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx("path", { d: foldPath2, fill: "none", stroke, strokeWidth: sw })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+var DS_W = 50;
+var DS_H = 50;
+var RX = DS_W / 2;
+var RY = 7;
+function DataStoreNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  return /* @__PURE__ */ jsxs("div", { style: { width: DS_W, height: DS_H, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: DS_W, height: DS_H, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M 0 ${RY} Q 0 0 ${RX} 0 Q ${DS_W} 0 ${DS_W} ${RY} L ${DS_W} ${DS_H - RY} Q ${DS_W} ${DS_H} ${RX} ${DS_H} Q 0 ${DS_H} 0 ${DS_H - RY} Z`,
+          fill,
+          stroke,
+          strokeWidth: sw
+        }
+      ),
+      /* @__PURE__ */ jsx("ellipse", { cx: RX, cy: RY, rx: RX, ry: RY, fill, stroke, strokeWidth: sw })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+var W2 = 36;
+var H3 = 50;
+var FOLD2 = 10;
+function documentPath() {
+  return [
+    `M 0 0`,
+    `L ${W2 - FOLD2} 0`,
+    `L ${W2} ${FOLD2}`,
+    `L ${W2} ${H3}`,
+    `L 0 ${H3}`,
+    `Z`
+  ].join(" ");
+}
+function foldPath() {
+  return [`M ${W2 - FOLD2} 0`, `L ${W2 - FOLD2} ${FOLD2}`, `L ${W2} ${FOLD2}`].join(" ");
+}
+function collectionLines(stroke, sw) {
+  const y = H3 - 8;
+  return /* @__PURE__ */ jsxs("g", { stroke, strokeWidth: sw * 0.7, strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: W2 * 0.25, y1: y, x2: W2 * 0.75, y2: y }),
+    /* @__PURE__ */ jsx("line", { x1: W2 * 0.25, y1: y + 3, x2: W2 * 0.75, y2: y + 3 }),
+    /* @__PURE__ */ jsx("line", { x1: W2 * 0.25, y1: y + 6, x2: W2 * 0.75, y2: y + 6 })
+  ] });
+}
+function DataObjectReferenceNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  return /* @__PURE__ */ jsxs("div", { style: { width: W2, height: H3, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx("path", { d: documentPath(), fill, stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx("path", { d: foldPath(), fill: "none", stroke, strokeWidth: sw }),
+      d.isCollection && collectionLines(stroke, sw)
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+function DataInputNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  return /* @__PURE__ */ jsxs("div", { style: { width: W2, height: H3, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx("path", { d: documentPath(), fill, stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx("path", { d: foldPath(), fill: "none", stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: `2,4 8,8 2,12`,
+          fill: "none",
+          stroke,
+          strokeWidth: sw * 0.8
+        }
+      ),
+      d.isCollection && collectionLines(stroke, sw)
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "target" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+function DataOutputNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  return /* @__PURE__ */ jsxs("div", { style: { width: W2, height: H3, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: W2, height: H3, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx("path", { d: documentPath(), fill, stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx("path", { d: foldPath(), fill: "none", stroke, strokeWidth: sw }),
+      /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: `2,4 8,8 2,12`,
+          fill: stroke,
+          stroke,
+          strokeWidth: sw * 0.8
+        }
+      ),
+      d.isCollection && collectionLines(stroke, sw)
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "source" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+var DS_W2 = 50;
+var DS_H2 = 50;
+var RX2 = DS_W2 / 2;
+var RY2 = 7;
+function DataStoreReferenceNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  return /* @__PURE__ */ jsxs("div", { style: { width: DS_W2, height: DS_H2, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: DS_W2, height: DS_H2, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M 0 ${RY2} Q 0 0 ${RX2} 0 Q ${DS_W2} 0 ${DS_W2} ${RY2} L ${DS_W2} ${DS_H2 - RY2} Q ${DS_W2} ${DS_H2} ${RX2} ${DS_H2} Q 0 ${DS_H2} 0 ${DS_H2 - RY2} Z`,
+          fill,
+          stroke,
+          strokeWidth: sw
+        }
+      ),
+      /* @__PURE__ */ jsx("ellipse", { cx: RX2, cy: RY2, rx: RX2, ry: RY2, fill, stroke, strokeWidth: sw })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { external: true, children: d.label })
+  ] });
+}
+var W3 = 60;
+var H4 = 52;
+var INDENT = W3 / 4;
+function hexPoints() {
+  return [
+    `0,${H4 / 2}`,
+    `${INDENT},0`,
+    `${W3 - INDENT},0`,
+    `${W3},${H4 / 2}`,
+    `${W3 - INDENT},${H4}`,
+    `${INDENT},${H4}`
+  ].join(" ");
+}
+function HexShell({
+  fill,
+  stroke,
+  sw,
+  thick = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "polygon",
+    {
+      points: hexPoints(),
+      fill,
+      stroke,
+      strokeWidth: thick ? sw + 2 : sw
+    }
+  );
+}
+function ConversationNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  return /* @__PURE__ */ jsxs("div", { style: { width: W3, height: H4, position: "relative" }, children: [
+    /* @__PURE__ */ jsx("svg", { width: W3, height: H4, style: { overflow: "visible", display: "block" }, children: /* @__PURE__ */ jsx(HexShell, { fill, stroke, sw }) }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { style: { textAlign: "center" }, children: d.label })
+  ] });
+}
+function SubConversationNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  return /* @__PURE__ */ jsxs("div", { style: { width: W3, height: H4, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: W3, height: H4, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx(HexShell, { fill, stroke, sw }),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: W3 / 2 - 7,
+          y: H4 - 15,
+          width: 14,
+          height: 12,
+          rx: 2,
+          fill,
+          stroke,
+          strokeWidth: sw * 0.8
+        }
+      ),
+      /* @__PURE__ */ jsx("text", { x: W3 / 2, y: H4 - 6, textAnchor: "middle", fontSize: 10, fill: stroke, fontFamily: BPMN_THEME.fontFamily, children: "+" })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { style: { textAlign: "center" }, children: d.label })
+  ] });
+}
+function CallConversationNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  return /* @__PURE__ */ jsxs("div", { style: { width: W3, height: H4, position: "relative" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: W3, height: H4, style: { overflow: "visible", display: "block" }, children: [
+      /* @__PURE__ */ jsx(HexShell, { fill, stroke, sw, thick: true }),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: W3 / 2 - 7,
+          y: H4 - 15,
+          width: 14,
+          height: 12,
+          rx: 2,
+          fill,
+          stroke,
+          strokeWidth: sw * 0.8
+        }
+      ),
+      /* @__PURE__ */ jsx("text", { x: W3 / 2, y: H4 - 6, textAnchor: "middle", fontSize: 10, fill: stroke, fontFamily: BPMN_THEME.fontFamily, children: "+" })
+    ] }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" }),
+    /* @__PURE__ */ jsx(BpmnLabel, { style: { textAlign: "center" }, children: d.label })
+  ] });
+}
+var BAND_H = 20;
+var RADIUS = 6;
+function ChoreographyShell({ d, stroke, sw, thick = false, collapsed = false }) {
+  const participants = d.participants ?? [
+    { name: "Initiator", isInitiating: true },
+    { name: "Responder", isInitiating: false }
+  ];
+  const fill = d.color?.fill ?? BPMN_THEME.fill;
+  const respondFill = "#c8d8e8";
+  const bw = thick ? sw + 2 : sw;
+  const [topParticipant, ...rest] = participants;
+  const bottomParticipants = rest;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: 0,
+        y: 0,
+        width: "100%",
+        height: BAND_H,
+        fill: topParticipant.isInitiating ? fill : respondFill,
+        stroke,
+        strokeWidth: bw,
+        rx: RADIUS,
+        ry: RADIUS
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: 0,
+        y: BAND_H / 2,
+        width: "100%",
+        height: BAND_H / 2,
+        fill: topParticipant.isInitiating ? fill : respondFill,
+        stroke: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: 0,
+        y: BAND_H,
+        width: "100%",
+        height: `calc(100% - ${BAND_H * (1 + bottomParticipants.length)}px)`,
+        fill,
+        stroke,
+        strokeWidth: bw
+      }
+    ),
+    bottomParticipants.map((p, i) => {
+      const y = `calc(100% - ${BAND_H * (bottomParticipants.length - i)}px)`;
+      return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: 0,
+          y,
+          width: "100%",
+          height: BAND_H,
+          fill: p.isInitiating ? fill : respondFill,
+          stroke,
+          strokeWidth: bw
+        }
+      ) }, i);
+    }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: bw / 2,
+        y: bw / 2,
+        width: `calc(100% - ${bw}px)`,
+        height: `calc(100% - ${bw}px)`,
+        fill: "none",
+        stroke,
+        strokeWidth: bw,
+        rx: RADIUS,
+        ry: RADIUS
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "foreignObject",
+      {
+        x: 4,
+        y: BAND_H,
+        width: "calc(100% - 8px)",
+        height: `calc(100% - ${BAND_H * (1 + bottomParticipants.length)}px)`,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: BPMN_THEME.fontSize,
+              fontFamily: BPMN_THEME.fontFamily,
+              color: stroke,
+              textAlign: "center",
+              padding: "2px 4px",
+              boxSizing: "border-box",
+              overflow: "hidden"
+            },
+            children: d.label ?? ""
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: "50%",
+        y: BAND_H * 0.65,
+        textAnchor: "middle",
+        fontSize: BPMN_THEME.fontSize - 1,
+        fontFamily: BPMN_THEME.fontFamily,
+        fill: stroke,
+        clipPath: void 0,
+        children: topParticipant.name
+      }
+    ),
+    bottomParticipants.map((p, i) => /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: "50%",
+        y: `calc(100% - ${BAND_H * (bottomParticipants.length - i) - BAND_H * 0.35}px)`,
+        textAnchor: "middle",
+        fontSize: BPMN_THEME.fontSize - 1,
+        fontFamily: BPMN_THEME.fontFamily,
+        fill: stroke,
+        children: p.name
+      },
+      i
+    )),
+    collapsed && /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "50%",
+          y: "calc(100% - 22px)",
+          width: 14,
+          height: 12,
+          transform: "translate(-7, 0)",
+          rx: 2,
+          fill,
+          stroke,
+          strokeWidth: sw * 0.8
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: "50%",
+          y: "calc(100% - 13px)",
+          textAnchor: "middle",
+          fontSize: 10,
+          fill: stroke,
+          fontFamily: BPMN_THEME.fontFamily,
+          children: "+"
+        }
+      )
+    ] })
+  ] });
+}
+function ChoreographyTaskNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", height: "100%", position: "relative" }, children: [
+    /* @__PURE__ */ jsx("svg", { width: "100%", height: "100%", style: { overflow: "visible", display: "block" }, children: /* @__PURE__ */ jsx(ChoreographyShell, { d, stroke, sw }) }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" })
+  ] });
+}
+function SubChoreographyNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", height: "100%", position: "relative" }, children: [
+    /* @__PURE__ */ jsx("svg", { width: "100%", height: "100%", style: { overflow: "visible", display: "block" }, children: /* @__PURE__ */ jsx(ChoreographyShell, { d, stroke, sw, collapsed: true }) }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" })
+  ] });
+}
+function CallChoreographyNode({ data, selected }) {
+  const d = data;
+  const stroke = resolveStroke(selected, d.color?.stroke);
+  const sw = resolveStrokeWidth(selected);
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", height: "100%", position: "relative" }, children: [
+    /* @__PURE__ */ jsx("svg", { width: "100%", height: "100%", style: { overflow: "visible", display: "block" }, children: /* @__PURE__ */ jsx(ChoreographyShell, { d, stroke, sw, thick: true, collapsed: true }) }),
+    /* @__PURE__ */ jsx(BpmnHandles, { variant: "all" })
+  ] });
+}
+
+// src/nodes/nodeTypes.ts
+var BPMN_NODE_TYPES = {
+  // Events
+  StartEvent: StartEventNode,
+  EndEvent: EndEventNode,
+  IntermediateCatchEvent: IntermediateCatchEventNode,
+  IntermediateThrowEvent: IntermediateThrowEventNode,
+  BoundaryEvent: BoundaryEventNode,
+  // Tasks — differentiated by data.elementType
+  Task: TaskNode,
+  UserTask: TaskNode,
+  ServiceTask: TaskNode,
+  ScriptTask: TaskNode,
+  ManualTask: TaskNode,
+  BusinessRuleTask: TaskNode,
+  ReceiveTask: TaskNode,
+  SendTask: TaskNode,
+  CallActivity: TaskNode,
+  // Gateways — differentiated by data.elementType
+  ExclusiveGateway: GatewayNode,
+  InclusiveGateway: GatewayNode,
+  ParallelGateway: GatewayNode,
+  EventBasedGateway: GatewayNode,
+  ComplexGateway: GatewayNode,
+  // Containers
+  SubProcess: SubProcessNode,
+  Pool: PoolNode,
+  Lane: LaneNode,
+  // Artifacts
+  Annotation: AnnotationNode,
+  Group: GroupNode,
+  // Data
+  DataObject: DataObjectNode,
+  DataObjectReference: DataObjectReferenceNode,
+  DataInput: DataInputNode,
+  DataOutput: DataOutputNode,
+  DataStore: DataStoreNode,
+  DataStoreReference: DataStoreReferenceNode,
+  // Conversation (§12)
+  Conversation: ConversationNode,
+  SubConversation: SubConversationNode,
+  CallConversation: CallConversationNode,
+  // Choreography (§11)
+  ChoreographyTask: ChoreographyTaskNode,
+  SubChoreography: SubChoreographyNode,
+  CallChoreography: CallChoreographyNode
+};
+
+export { AnnotationNode, BPMN_NODE_TYPES, BoundaryEventNode, CallChoreographyNode, CallConversationNode, ChoreographyTaskNode, ConversationNode, DataInputNode, DataObjectNode, DataObjectReferenceNode, DataOutputNode, DataStoreNode, DataStoreReferenceNode, EndEventNode, GatewayNode, GroupNode, IntermediateCatchEventNode, IntermediateThrowEventNode, LaneNode, PoolNode, StartEventNode, SubChoreographyNode, SubConversationNode, SubProcessNode, TaskNode };
+//# sourceMappingURL=chunk-NXMUX67A.js.map
+//# sourceMappingURL=chunk-NXMUX67A.js.map