@broberg/bodymap 0.1.2 → 0.1.4

package/dist/react.cjs

@@ -41,6 +41,9 @@ var REGIONS = [
 ];
 var REGION_KEY_SET = new Set(REGIONS.map((r) => r.key));
 REGIONS.map((r) => r.key);
+function getRegion(key) {
+  return REGIONS.find((r) => r.key === key);
+}
 var PAIN_TYPES = ["stikkende", "dump", "konstant", "jagende"];
 var painPointSchema = zod.z.object({
   region: zod.z.string().refine((k) => REGION_KEY_SET.has(k), { message: "unknown region" }),
@@ -57,6 +60,18 @@ function isSelectable(key, config = {}) {
   if (s?.visible === false) return false;
   return s?.selectable ?? true;
 }
+var defaultPalette = {
+  body: "#d2d7de",
+  hover: "#8fd0cd",
+  selected: "#5cc4b7",
+  heat: { low: "#fcd34d", mid: "#fb923c", high: "#ef4444" }
+};
+function heatFor(intensity, palette = defaultPalette) {
+  return intensity >= 7 ? palette.heat.high : intensity >= 4 ? palette.heat.mid : palette.heat.low;
+}
+function baseColorFor(regionKey, palette = defaultPalette) {
+  return palette.regions?.[regionKey] ?? palette.body;
+}
 zod.z.object({
   schema: zod.z.literal("bodymap/v1"),
   view: zod.z.enum(["front", "back", "left", "right"]),
@@ -167,6 +182,84 @@ var FILL_BACK = {
   hip_left: "#c99bd6",
   hip_right: "#c99bd6"
 };
+var daRegions = Object.fromEntries(REGIONS.map((r) => [r.key, r.label]));
+var EN_CODE = {
+  HEAD: "Head",
+  NECK: "Neck",
+  CHEST: "Chest",
+  THORA: "Upper back",
+  LUMBAR: "Lower back",
+  GROIN: "Groin",
+  SHOULDER: "Shoulder",
+  UARM: "Upper arm",
+  ELBOW: "Elbow",
+  FARM: "Forearm",
+  WRIST: "Wrist",
+  HAND: "Hand",
+  HIP: "Hip",
+  THIGH: "Thigh",
+  KNEE: "Knee",
+  LOWLEG: "Lower leg",
+  ANKLE: "Ankle",
+  FOOT: "Foot"
+};
+var enRegions = Object.fromEntries(
+  REGIONS.map((r) => [r.key, EN_CODE[r.code] + (r.side ? r.side === "left" ? ", left" : ", right" : "")])
+);
+var LABELS_DA = {
+  regions: daRegions,
+  qualities: { stikkende: "stikkende", dump: "dump", konstant: "konstant", jagende: "jagende" },
+  intensity: "Intensitet (0-10)",
+  quality: "Kvalitet",
+  remove: "Fjern punkt",
+  front: "Forfra",
+  back: "Bagfra",
+  empty: "V\xE6lg en kropsdel for at markere smerte.",
+  before: "F\xF8r",
+  after: "Efter",
+  noChange: "Ingen \xE6ndring",
+  change: { new: "nyt", resolved: "forsvundet", improved: "bedre", worse: "v\xE6rre" },
+  ariaMarked: (n, i, q) => `${n}, smerte ${i} af 10${q ? ", " + q : ""}`,
+  ariaUnmarked: (n) => `${n}, ikke markeret. Aktiv\xE9r for at markere smerte.`,
+  svgLabel: "Kropskort \u2014 v\xE6lg hvor det g\xF8r ondt",
+  viewLabel: "Visning",
+  zoomLabel: "Zoom",
+  zoomIn: "Zoom ind",
+  zoomOut: "Zoom ud",
+  zoomReset: "Nulstil zoom"
+};
+var LABELS_EN = {
+  regions: enRegions,
+  qualities: { stikkende: "stabbing", dump: "dull", konstant: "constant", jagende: "shooting" },
+  intensity: "Intensity (0-10)",
+  quality: "Quality",
+  remove: "Remove point",
+  front: "Front",
+  back: "Back",
+  empty: "Pick a body part to mark pain.",
+  before: "Before",
+  after: "After",
+  noChange: "No change",
+  change: { new: "new", resolved: "resolved", improved: "improved", worse: "worse" },
+  ariaMarked: (n, i, q) => `${n}, pain ${i} of 10${q ? ", " + q : ""}`,
+  ariaUnmarked: (n) => `${n}, not marked. Activate to mark pain.`,
+  svgLabel: "Body map \u2014 pick where it hurts",
+  viewLabel: "View",
+  zoomLabel: "Zoom",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  zoomReset: "Reset zoom"
+};
+function resolveLabels(locale, overrides) {
+  const base = locale === "en" ? LABELS_EN : LABELS_DA;
+  if (!overrides) return base;
+  return {
+    ...base,
+    ...overrides,
+    regions: { ...base.regions, ...overrides.regions },
+    qualities: { ...base.qualities, ...overrides.qualities }
+  };
+}
 var VBW = 260;
 var VBH = 470;
 var MIN_HIT = 18;
@@ -186,6 +279,15 @@ function hitShape(s) {
 function heat(v) {
   return v >= 7 ? "#ef4444" : v >= 4 ? "#fb923c" : "#fcd34d";
 }
+function heatTier(v) {
+  return v >= 7 ? "high" : v >= 4 ? "mid" : "low";
+}
+function baseFill(key, rainbow, palette) {
+  return palette ? baseColorFor(key, palette) : `var(--bmap-region-${key}, var(--bmap-body, ${rainbow}))`;
+}
+function markedFill(v, palette) {
+  return palette ? heatFor(v, palette) : `var(--bmap-heat-${heatTier(v)}, ${heat(v)})`;
+}
 function shapeEl(s, props) {
   if (s.el === "circle") return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: s.cx, cy: s.cy, r: s.r, ...props });
   if (s.el === "ellipse") return /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: s.cx, cy: s.cy, rx: s.rx, ry: s.ry, ...props });
@@ -198,7 +300,7 @@ var STYLE = `
 .bmap__stage{display:flex;flex-direction:column;gap:10px;flex:0 1 340px;min-width:0;max-width:360px}
 .bmap__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
 .bmap__viewtoggle{display:inline-flex;background:#f1f5f9;border:1px solid var(--bmap-line);border-radius:10px;padding:3px;gap:2px}
-.bmap__vbtn{font:inherit;font-size:13px;font-weight:600;color:var(--bmap-muted);background:none;border:0;border-radius:7px;padding:8px 16px;cursor:pointer;transition:color .12s,background .12s,transform .1s}
+.bmap__vbtn{font:inherit;font-size:13px;font-weight:600;color:#556274;background:none;border:0;border-radius:7px;padding:8px 16px;cursor:pointer;transition:color .12s,background .12s,transform .1s}
 .bmap__vbtn:hover{color:var(--bmap-ink)}
 .bmap__vbtn:active{transform:scale(.97)}
 .bmap__vbtn--on{background:#fff;color:var(--bmap-ink);box-shadow:0 1px 2px rgba(15,23,42,.14)}
@@ -235,6 +337,23 @@ var STYLE = `
 .bmap__rm:hover{background:#fef2f2}
 .bmap__rm:active{transform:scale(.97)}
 .bmap__i:focus-visible,.bmap__chip:focus-visible,.bmap__vbtn:focus-visible,.bmap__rm:focus-visible,.bmap__zoom button:focus-visible{outline:2px solid var(--bmap-accent);outline-offset:2px}
+.bmapc{--bmap-accent:var(--primary,#0e8f8a);--bmap-line:#e2e8f0;--bmap-ink:#1e293b;--bmap-muted:#64748b;font:15px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--bmap-ink)}
+.bmapc__bodies{display:flex;gap:14px;flex-wrap:wrap}
+.bmapc__fig{flex:1 1 150px;min-width:130px;max-width:220px;margin:0;text-align:center}
+.bmapc__cap{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#556274;margin-bottom:6px}
+.bmapc__svg{width:100%;height:auto;display:block}
+.bmapc__vis{stroke:#fff;stroke-width:2.4}
+.bmapc__n{font:700 12px ui-sans-serif;fill:#fff;pointer-events:none}
+.bmapc__delta{margin-top:16px;display:flex;flex-direction:column;gap:6px;max-width:460px}
+.bmapc__row{display:flex;align-items:center;gap:10px;font-size:13.5px;border:1px solid var(--bmap-line);border-radius:9px;padding:7px 11px}
+.bmapc__rname{font-weight:600;flex:1 1 auto}
+.bmapc__rval{font:12px ui-monospace,monospace;color:#556274;white-space:nowrap}
+.bmapc__badge{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap}
+.bmapc__badge--improved{background:#dcfce7;color:#166534}
+.bmapc__badge--worse{background:#fee2e2;color:#991b1b}
+.bmapc__badge--new{background:#fef3c7;color:#92400e}
+.bmapc__badge--resolved{background:#e2e8f0;color:#475569}
+.bmapc__empty{color:#556274;font-size:13.5px;margin-top:14px}
 @media (max-width:560px){
   .bmap{flex-direction:column;gap:14px}
   .bmap__stage{max-width:100%;width:100%;flex-basis:auto}
@@ -266,6 +385,10 @@ function BodyMap({
   config = {},
   defaultView = "front",
   onViewChange,
+  palette,
+  locale = "da",
+  labels,
+  readOnly = false,
   className
 }) {
   react.useEffect(ensureStyles, []);
@@ -277,6 +400,8 @@ function BodyMap({
   const report = value ?? internal;
   const shapes = view === "back" ? SHAPES_BACK : SHAPES;
   const fills = view === "back" ? FILL_BACK : FILL;
+  const L = resolveLabels(locale, labels);
+  const nameOf = (key) => L.regions[key] ?? getRegion(key)?.label ?? key;
   const svgRef = react.useRef(null);
   const zoomRef = react.useRef(1);
   const panRef = react.useRef({ x: 0, y: 0 });
@@ -378,14 +503,15 @@ function BodyMap({
   const region = selected ? REGIONS.find((r) => r.key === selected) : void 0;
   const current = selected ? pointOf(selected) : void 0;
   const rootCls = ["bmap", className].filter(Boolean).join(" ");
-  const ariaFor = (r, marked, selectable = true) => {
-    if (marked) return `${r.label}, smerte ${marked.intensity} af 10${marked.type ? ", " + marked.type : ""}`;
-    return selectable ? `${r.label}, ikke markeret. Aktiv\xE9r for at markere smerte.` : r.label;
+  const rootStyle = palette ? { "--bmap-accent": palette.selected } : void 0;
+  const ariaFor = (r, marked, interactive = true) => {
+    if (marked) return L.ariaMarked(nameOf(r.key), marked.intensity, marked.type ? L.qualities[marked.type] : void 0);
+    return interactive ? L.ariaUnmarked(nameOf(r.key)) : nameOf(r.key);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootCls, "data-testid": "bodymap-root", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootCls, "data-testid": "bodymap-root", style: rootStyle, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__stage", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__bar", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": "Visning", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": L.viewLabel, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -394,7 +520,7 @@ function BodyMap({
               "data-testid": "bodymap-view-front",
               "aria-pressed": view === "front",
               onClick: () => changeView("front"),
-              children: "Forfra"
+              children: L.front
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -405,14 +531,14 @@ function BodyMap({
               "data-testid": "bodymap-view-back",
               "aria-pressed": view === "back",
               onClick: () => changeView("back"),
-              children: "Bagfra"
+              children: L.back
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__zoom", role: "group", "aria-label": "Zoom", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-testid": "bodymap-zoom-out", "aria-label": "Zoom ud", disabled: zoom <= ZMIN, onClick: () => zoomBtn(1 / 1.4), children: "\u2212" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-testid": "bodymap-zoom-reset", "aria-label": "Nulstil zoom", disabled: zoom === 1 && pan.x === 0 && pan.y === 0, onClick: resetZoom, children: "\u2922" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-testid": "bodymap-zoom-in", "aria-label": "Zoom ind", disabled: zoom >= ZMAX, onClick: () => zoomBtn(1.4), children: "+" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__zoom", role: "group", "aria-label": L.zoomLabel, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-testid": "bodymap-zoom-out", "aria-label": L.zoomOut, disabled: zoom <= ZMIN, onClick: () => zoomBtn(1 / 1.4), children: "\u2212" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-testid": "bodymap-zoom-reset", "aria-label": L.zoomReset, disabled: zoom === 1 && pan.x === 0 && pan.y === 0, onClick: resetZoom, children: "\u2922" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-testid": "bodymap-zoom-in", "aria-label": L.zoomIn, disabled: zoom >= ZMAX, onClick: () => zoomBtn(1.4), children: "+" })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -422,7 +548,7 @@ function BodyMap({
           className: "bmap__svg",
           viewBox: "0 0 260 470",
           role: "group",
-          "aria-label": "Kropskort \u2014 v\xE6lg hvor det g\xF8r ondt",
+          "aria-label": L.svgLabel,
           onPointerDown,
           onPointerMove,
           onPointerUp,
@@ -433,21 +559,20 @@ function BodyMap({
               const s = shapes[r.key];
               if (!s) return null;
               const marked = pointOf(r.key);
-              const selectable = isSelectable(r.key, config);
+              const interactive = isSelectable(r.key, config) && !readOnly;
               const visCls = ["bmap__vis", selected === r.key && "bmap__vis--sel"].filter(Boolean).join(" ");
-              const fill = marked ? heat(marked.intensity) : fills[r.key] ?? "#cbd5e1";
+              const fill = marked ? markedFill(marked.intensity, palette) : baseFill(r.key, fills[r.key] ?? "#cbd5e1", palette);
               const hs = hitShape(s);
-              const act = () => selectable ? pickRegion(r.key) : void 0;
               return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
                 shapeEl(hs, {
-                  className: "bmap__hit" + (selectable ? "" : " bmap__hit--locked"),
+                  className: "bmap__hit" + (interactive ? "" : " bmap__hit--locked"),
                   "data-testid": `bodymap-region-${r.key}`,
-                  role: selectable ? "button" : "img",
-                  tabIndex: selectable ? 0 : -1,
-                  "aria-label": ariaFor(r, marked, selectable),
-                  "aria-pressed": selectable ? selected === r.key : void 0,
-                  onClick: act,
-                  onKeyDown: selectable ? (e) => {
+                  role: interactive ? "button" : "img",
+                  tabIndex: interactive ? 0 : -1,
+                  "aria-label": ariaFor(r, marked, interactive),
+                  "aria-pressed": interactive ? selected === r.key : void 0,
+                  onClick: interactive ? () => pickRegion(r.key) : void 0,
+                  onKeyDown: interactive ? (e) => {
                     if (e.key === "Enter" || e.key === " ") {
                       e.preventDefault();
                       suppressClick.current = false;
@@ -455,7 +580,7 @@ function BodyMap({
                     }
                   } : void 0
                 }),
-                shapeEl(s, { className: visCls, fill, opacity: selectable ? 1 : 0.4 })
+                shapeEl(s, { className: visCls, fill, opacity: !readOnly && !isSelectable(r.key, config) ? 0.4 : 1 })
               ] }, r.key);
             }),
             report.map((p) => {
@@ -468,26 +593,25 @@ function BodyMap({
         }
       )
     ] }),
-    region ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__panel", "data-testid": "bodymap-panel", children: [
+    readOnly ? null : region ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__panel", "data-testid": "bodymap-panel", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__ph", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("b", { children: region.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("b", { children: nameOf(region.key) }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bmap__code", children: region.code })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "bmap__lbl", id: "bmap-intensity-lbl", children: "Intensitet (0-10)" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "bmap__lbl", id: "bmap-intensity-lbl", children: L.intensity }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bmap__scale", role: "group", "aria-labelledby": "bmap-intensity-lbl", children: Array.from({ length: 11 }, (_, n) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           className: "bmap__i" + (current?.intensity === n ? " bmap__i--on" : ""),
           "data-testid": `bodymap-intensity-${n}`,
-          "aria-label": `Intensitet ${n}`,
           "aria-pressed": current?.intensity === n,
           onClick: () => setPain(region.key, n, current?.type),
           children: n
         },
         n
       )) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "bmap__lbl", id: "bmap-quality-lbl", children: "Kvalitet" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "bmap__lbl", id: "bmap-quality-lbl", children: L.quality }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bmap__chips", role: "group", "aria-labelledby": "bmap-quality-lbl", children: PAIN_TYPES.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -496,15 +620,87 @@ function BodyMap({
           "data-testid": `bodymap-type-${t}`,
           "aria-pressed": current?.type === t,
           onClick: () => setPain(region.key, current?.intensity ?? 5, t),
-          children: t
+          children: L.qualities[t]
         },
         t
       )) }),
-      current && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bmap__rm", "data-testid": "bodymap-remove", onClick: () => removePain(region.key), children: "Fjern punkt" })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bmap__panel bmap__panel--empty", "data-testid": "bodymap-panel", children: "V\xE6lg en kropsdel for at markere smerte." })
+      current && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bmap__rm", "data-testid": "bodymap-remove", onClick: () => removePain(region.key), children: L.remove })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bmap__panel bmap__panel--empty", "data-testid": "bodymap-panel", children: L.empty })
+  ] });
+}
+function changeOf(b, a) {
+  if (b == null && a != null) return "new";
+  if (b != null && a == null) return "resolved";
+  if (b == null || a == null) return "same";
+  return a < b ? "improved" : a > b ? "worse" : "same";
+}
+function CompareFigure({ report, view, palette, caption, testid }) {
+  const shapes = view === "back" ? SHAPES_BACK : SHAPES;
+  const fills = view === "back" ? FILL_BACK : FILL;
+  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: "bmapc__fig", "data-testid": testid, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "bmapc__cap", children: caption }),
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "bmapc__svg", viewBox: "0 0 260 470", role: "img", "aria-label": caption, children: [
+      REGIONS.map((r) => {
+        const s = shapes[r.key];
+        if (!s) return null;
+        const m = report.find((p) => p.region === r.key);
+        const fill = m ? markedFill(m.intensity, palette) : baseFill(r.key, fills[r.key] ?? "#cbd5e1", palette);
+        return /* @__PURE__ */ jsxRuntime.jsx("g", { children: shapeEl(s, { className: "bmapc__vis", fill }) }, r.key);
+      }),
+      report.map((p) => {
+        const s = shapes[p.region];
+        if (!s) return null;
+        const c = center(s);
+        return /* @__PURE__ */ jsxRuntime.jsx("text", { x: c.x, y: c.y + 4, textAnchor: "middle", className: "bmapc__n", children: p.intensity }, p.region);
+      })
+    ] })
+  ] });
+}
+function BodyMapCompare({
+  before,
+  after,
+  palette,
+  locale = "da",
+  labels,
+  defaultView = "front",
+  className
+}) {
+  react.useEffect(ensureStyles, []);
+  const [view, setView] = react.useState(defaultView);
+  const L = resolveLabels(locale, labels);
+  const nameOf = (k) => L.regions[k] ?? getRegion(k)?.label ?? k;
+  const rootStyle = palette ? { "--bmap-accent": palette.selected } : void 0;
+  const keys = Array.from(new Set([...before, ...after].map((p) => p.region)));
+  const changes = keys.map((k) => ({
+    key: k,
+    b: before.find((p) => p.region === k)?.intensity,
+    a: after.find((p) => p.region === k)?.intensity,
+    status: changeOf(before.find((p) => p.region === k)?.intensity, after.find((p) => p.region === k)?.intensity)
+  })).filter((c) => c.status !== "same").sort((x, y) => x.key < y.key ? -1 : 1);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["bmapc", className].filter(Boolean).join(" "), "data-testid": "bodymap-compare", style: rootStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": L.viewLabel, style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bmap__vbtn" + (view === "front" ? " bmap__vbtn--on" : ""), "data-testid": "bodymap-compare-view-front", "aria-pressed": view === "front", onClick: () => setView("front"), children: L.front }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bmap__vbtn" + (view === "back" ? " bmap__vbtn--on" : ""), "data-testid": "bodymap-compare-view-back", "aria-pressed": view === "back", onClick: () => setView("back"), children: L.back })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmapc__bodies", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CompareFigure, { report: before, view, palette, caption: L.before, testid: "bodymap-compare-before" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CompareFigure, { report: after, view, palette, caption: L.after, testid: "bodymap-compare-after" })
+    ] }),
+    changes.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bmapc__delta", "data-testid": "bodymap-compare-delta", children: changes.map((c) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmapc__row", "data-testid": `bodymap-compare-delta-${c.key}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bmapc__rname", children: nameOf(c.key) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "bmapc__rval", children: [
+        c.b ?? "\u2013",
+        " \u2192 ",
+        c.a ?? "\u2013"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `bmapc__badge bmapc__badge--${c.status}`, children: L.change[c.status] })
+    ] }, c.key)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bmapc__empty", "data-testid": "bodymap-compare-delta", children: L.noChange })
   ] });
 }
 
 exports.BodyMap = BodyMap;
+exports.BodyMapCompare = BodyMapCompare;
+exports.LABELS_DA = LABELS_DA;
+exports.LABELS_EN = LABELS_EN;
 //# sourceMappingURL=react.cjs.map
 //# sourceMappingURL=react.cjs.map