@broberg/bodymap 0.1.1 → 0.1.3

package/dist/react.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { z } from 'zod';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -39,6 +39,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 = z.object({
   region: z.string().refine((k) => REGION_KEY_SET.has(k), { message: "unknown region" }),
@@ -55,6 +58,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;
+}
 z.object({
   schema: z.literal("bodymap/v1"),
   view: z.enum(["front", "back", "left", "right"]),
@@ -165,48 +180,162 @@ 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.",
+  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.",
+  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;
 function center(s) {
   if (s.el === "rect") return { x: s.x + s.width / 2, y: s.y + s.height / 2 };
   return { x: s.cx, y: s.cy };
 }
+function hitShape(s) {
+  if (s.el === "circle") return { el: "circle", cx: s.cx, cy: s.cy, r: Math.max(s.r, MIN_HIT) };
+  if (s.el === "ellipse")
+    return { el: "ellipse", cx: s.cx, cy: s.cy, rx: Math.max(s.rx, MIN_HIT), ry: Math.max(s.ry, MIN_HIT) };
+  const c = center(s);
+  const w = Math.max(s.width, MIN_HIT * 2);
+  const h = Math.max(s.height, MIN_HIT * 2);
+  return { el: "rect", x: c.x - w / 2, y: c.y - h / 2, width: w, height: h, rx: s.rx };
+}
 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__ */ jsx("circle", { cx: s.cx, cy: s.cy, r: s.r, ...props });
+  if (s.el === "ellipse") return /* @__PURE__ */ jsx("ellipse", { cx: s.cx, cy: s.cy, rx: s.rx, ry: s.ry, ...props });
+  return /* @__PURE__ */ jsx("rect", { x: s.x, y: s.y, width: s.width, height: s.height, rx: s.rx, ...props });
+}
 var STYLE_ID = "broberg-bodymap-styles";
 var STYLE = `
 .bmap{--bmap-accent:var(--primary,#0e8f8a);--bmap-line:#e2e8f0;--bmap-panel:#fff;--bmap-ink:#1e293b;--bmap-muted:#64748b;
   display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;font:15px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--bmap-ink)}
-.bmap__svg{flex:0 0 auto}
-.bmap__stage{display:flex;flex-direction:column;gap:12px;flex:0 0 auto}
-.bmap__viewtoggle{display:inline-flex;align-self:flex-start;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:6px 16px;cursor:pointer;transition:color .12s,background .12s,transform .1s}
+.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: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)}
-.bmap__region{cursor:pointer;stroke:#fff;stroke-width:2.4;transition:filter .12s}
-.bmap__region:hover{filter:brightness(1.08) saturate(1.15)}
-.bmap__region--locked{cursor:default;opacity:.4}
-.bmap__region--sel{stroke:var(--bmap-accent);stroke-width:3.6}
-.bmap__heatn{font:700 11px ui-sans-serif;fill:#fff;pointer-events:none}
-.bmap__panel{flex:1 1 220px;min-width:220px;border:1px solid var(--bmap-line);border-radius:14px;padding:16px 18px;background:var(--bmap-panel)}
+.bmap__zoom{display:inline-flex;gap:4px;margin-left:auto}
+.bmap__zoom button{font:inherit;font-weight:700;font-size:16px;line-height:1;width:36px;height:36px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-ink);border-radius:8px;cursor:pointer;transition:border-color .12s,transform .1s;display:flex;align-items:center;justify-content:center}
+.bmap__zoom button:hover{border-color:var(--bmap-accent)}
+.bmap__zoom button:active{transform:scale(.9)}
+.bmap__zoom button:disabled{opacity:.4;cursor:default}
+.bmap__svg{width:100%;height:auto;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:transparent;border-radius:14px}
+.bmap__vis{stroke:#fff;stroke-width:2.4;pointer-events:none;transition:filter .12s,stroke .12s,stroke-width .12s}
+.bmap__vis--sel{stroke:var(--bmap-accent);stroke-width:3.6}
+.bmap__hit{fill:transparent;cursor:pointer;outline:none}
+.bmap__hit--locked{cursor:default}
+.bmap__hit:hover + .bmap__vis{filter:brightness(1.08) saturate(1.15)}
+.bmap__hit:focus-visible + .bmap__vis{stroke:var(--bmap-accent);stroke-width:4;stroke-dasharray:4 2.5}
+.bmap__heatn{font:700 12px ui-sans-serif;fill:#fff;pointer-events:none}
+.bmap__panel{flex:1 1 240px;min-width:220px;border:1px solid var(--bmap-line);border-radius:14px;padding:16px 18px;background:var(--bmap-panel)}
 .bmap__panel--empty{color:var(--bmap-muted);font-size:13.5px}
 .bmap__ph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
 .bmap__ph b{font-size:16px}
 .bmap__code{font:11px ui-monospace,monospace;color:var(--bmap-muted);background:#f1f5f9;border-radius:6px;padding:2px 7px}
 .bmap__lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bmap-muted);margin:0 0 7px}
-.bmap__scale{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
-.bmap__i{font:inherit;font-size:13px;font-weight:600;width:30px;height:30px;border-radius:8px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-ink);cursor:pointer;transition:.1s}
+.bmap__scale{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
+.bmap__i{font:inherit;font-size:14px;font-weight:600;width:38px;height:38px;border-radius:9px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-ink);cursor:pointer;transition:border-color .1s,background .1s,transform .1s}
 .bmap__i:hover{border-color:var(--bmap-accent)}
 .bmap__i:active{transform:scale(.9)}
 .bmap__i--on{background:var(--bmap-accent);border-color:var(--bmap-accent);color:#fff}
-.bmap__chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
-.bmap__chip{font:inherit;font-size:12.5px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-muted);border-radius:999px;padding:6px 12px;cursor:pointer;transition:.1s}
+.bmap__chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
+.bmap__chip{font:inherit;font-size:13px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-muted);border-radius:999px;padding:9px 15px;cursor:pointer;transition:.1s}
 .bmap__chip:hover{border-color:var(--bmap-accent);color:var(--bmap-accent)}
 .bmap__chip:active{transform:scale(.96)}
 .bmap__chip--on{background:var(--bmap-ink);border-color:var(--bmap-ink);color:#fff}
-.bmap__rm{font:inherit;font-size:13px;font-weight:600;border:1px solid #f6c9c9;background:#fff;color:#ef4444;border-radius:9px;padding:8px 13px;cursor:pointer;transition:.1s}
+.bmap__rm{font:inherit;font-size:14px;font-weight:600;border:1px solid #f6c9c9;background:#fff;color:#ef4444;border-radius:9px;padding:10px 15px;cursor:pointer;transition:.1s}
 .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}
+@media (max-width:560px){
+  .bmap{flex-direction:column;gap:14px}
+  .bmap__stage{max-width:100%;width:100%;flex-basis:auto}
+  .bmap__panel{width:100%}
+  .bmap__i{width:46px;height:46px;font-size:16px}
+  .bmap__chip{padding:11px 17px;font-size:15px}
+  .bmap__vbtn{padding:10px 18px;font-size:15px}
+}
+@media (prefers-reduced-motion:reduce){.bmap *{transition:none !important}}
 `;
 function ensureStyles() {
   if (typeof document === "undefined") return;
@@ -216,6 +345,12 @@ function ensureStyles() {
   el.textContent = STYLE;
   document.head.appendChild(el);
 }
+var ZMIN = 1;
+var ZMAX = 4;
+var clampPan = (p, z2) => ({
+  x: Math.min(0, Math.max(VBW * (1 - z2), p.x)),
+  y: Math.min(0, Math.max(VBH * (1 - z2), p.y))
+});
 function BodyMap({
   value,
   defaultValue,
@@ -223,15 +358,93 @@ function BodyMap({
   config = {},
   defaultView = "front",
   onViewChange,
+  palette,
+  locale = "da",
+  labels,
+  readOnly = false,
   className
 }) {
   useEffect(ensureStyles, []);
   const [internal, setInternal] = useState(defaultValue ?? []);
   const [selected, setSelected] = useState(null);
   const [view, setView] = useState(defaultView);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
   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 = useRef(null);
+  const zoomRef = useRef(1);
+  const panRef = useRef({ x: 0, y: 0 });
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const gesture = useRef({ startDist: 0, startZoom: 1, midVB: { x: 0, y: 0 }, start: { x: 0, y: 0 }, moved: false });
+  const suppressClick = useRef(false);
+  const setZP = (z2, p) => {
+    const cz = Math.max(ZMIN, Math.min(ZMAX, z2));
+    const cp = clampPan(p, cz);
+    zoomRef.current = cz;
+    panRef.current = cp;
+    setZoom(cz);
+    setPan(cp);
+  };
+  const screenToVB = (cx, cy) => {
+    const el = svgRef.current;
+    if (!el) return { x: VBW / 2, y: VBH / 2 };
+    const r = el.getBoundingClientRect();
+    if (!r.width || !r.height) return { x: VBW / 2, y: VBH / 2 };
+    return { x: (cx - r.left) / r.width * VBW, y: (cy - r.top) / r.height * VBH };
+  };
+  const zoomTo = (nz, focalVB) => {
+    const z2 = Math.max(ZMIN, Math.min(ZMAX, nz));
+    const p = panRef.current;
+    setZP(z2, { x: focalVB.x - (focalVB.x - p.x) * (z2 / zoomRef.current), y: focalVB.y - (focalVB.y - p.y) * (z2 / zoomRef.current) });
+  };
+  const zoomBtn = (factor) => zoomTo(zoomRef.current * factor, { x: VBW / 2, y: VBH / 2 });
+  const resetZoom = () => setZP(1, { x: 0, y: 0 });
+  const onPointerDown = (e) => {
+    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    const pts = [...pointers.current.values()];
+    if (pts.length === 2) {
+      gesture.current.startDist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+      gesture.current.startZoom = zoomRef.current;
+      gesture.current.midVB = screenToVB((pts[0].x + pts[1].x) / 2, (pts[0].y + pts[1].y) / 2);
+      gesture.current.moved = true;
+      suppressClick.current = true;
+    } else {
+      gesture.current.start = { x: e.clientX, y: e.clientY };
+      gesture.current.moved = false;
+    }
+  };
+  const onPointerMove = (e) => {
+    const prev = pointers.current.get(e.pointerId);
+    if (!prev) return;
+    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    const pts = [...pointers.current.values()];
+    if (pts.length >= 2) {
+      const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+      if (gesture.current.startDist > 0) zoomTo(gesture.current.startZoom * (dist / gesture.current.startDist), gesture.current.midVB);
+      return;
+    }
+    const el = svgRef.current;
+    const rect = el?.getBoundingClientRect();
+    if (Math.hypot(e.clientX - gesture.current.start.x, e.clientY - gesture.current.start.y) > 6) {
+      gesture.current.moved = true;
+      suppressClick.current = true;
+    }
+    if (zoomRef.current > 1 && rect && rect.width) {
+      const dxVB = (e.clientX - prev.x) / rect.width * VBW;
+      const dyVB = (e.clientY - prev.y) / rect.height * VBH;
+      setZP(zoomRef.current, { x: panRef.current.x + dxVB, y: panRef.current.y + dyVB });
+    }
+  };
+  const onPointerUp = (e) => {
+    pointers.current.delete(e.pointerId);
+    if (pointers.current.size === 0) window.setTimeout(() => {
+      suppressClick.current = false;
+    }, 60);
+  };
   const changeView = (v) => {
     if (v === view) return;
     setView(v);
@@ -252,68 +465,96 @@ function BodyMap({
     commit(report.filter((p) => p.region !== key));
     setSelected(null);
   };
+  const pickRegion = (key) => {
+    if (suppressClick.current) {
+      suppressClick.current = false;
+      return;
+    }
+    setSelected(key);
+  };
   const regions = resolveRegions(config);
   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(" ");
-  return /* @__PURE__ */ jsxs("div", { className: rootCls, "data-testid": "bodymap-root", children: [
+  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__ */ jsxs("div", { className: rootCls, "data-testid": "bodymap-root", style: rootStyle, children: [
     /* @__PURE__ */ jsxs("div", { className: "bmap__stage", children: [
-      /* @__PURE__ */ jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": "Visning", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "bmap__vbtn" + (view === "front" ? " bmap__vbtn--on" : ""),
-            "data-testid": "bodymap-view-front",
-            "aria-pressed": view === "front",
-            onClick: () => changeView("front"),
-            children: "Forfra"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "bmap__vbtn" + (view === "back" ? " bmap__vbtn--on" : ""),
-            "data-testid": "bodymap-view-back",
-            "aria-pressed": view === "back",
-            onClick: () => changeView("back"),
-            children: "Bagfra"
-          }
-        )
+      /* @__PURE__ */ jsxs("div", { className: "bmap__bar", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": L.viewLabel, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "bmap__vbtn" + (view === "front" ? " bmap__vbtn--on" : ""),
+              "data-testid": "bodymap-view-front",
+              "aria-pressed": view === "front",
+              onClick: () => changeView("front"),
+              children: L.front
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "bmap__vbtn" + (view === "back" ? " bmap__vbtn--on" : ""),
+              "data-testid": "bodymap-view-back",
+              "aria-pressed": view === "back",
+              onClick: () => changeView("back"),
+              children: L.back
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bmap__zoom", role: "group", "aria-label": L.zoomLabel, children: [
+          /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "bodymap-zoom-out", "aria-label": L.zoomOut, disabled: zoom <= ZMIN, onClick: () => zoomBtn(1 / 1.4), children: "\u2212" }),
+          /* @__PURE__ */ 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__ */ jsx("button", { type: "button", "data-testid": "bodymap-zoom-in", "aria-label": L.zoomIn, disabled: zoom >= ZMAX, onClick: () => zoomBtn(1.4), children: "+" })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         "svg",
         {
+          ref: svgRef,
           className: "bmap__svg",
           viewBox: "0 0 260 470",
-          width: 230,
-          height: 416,
           role: "group",
-          "aria-label": "Kropskort \u2014 v\xE6lg hvor det g\xF8r ondt",
-          children: [
+          "aria-label": L.svgLabel,
+          onPointerDown,
+          onPointerMove,
+          onPointerUp,
+          onPointerCancel: onPointerUp,
+          onWheel: (e) => zoomTo(zoomRef.current * (e.deltaY < 0 ? 1.12 : 1 / 1.12), screenToVB(e.clientX, e.clientY)),
+          children: /* @__PURE__ */ jsxs("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
             regions.map((r) => {
               const s = shapes[r.key];
               if (!s) return null;
               const marked = pointOf(r.key);
-              const selectable = isSelectable(r.key, config);
-              const cls = [
-                "bmap__region",
-                !selectable && "bmap__region--locked",
-                selected === r.key && "bmap__region--sel"
-              ].filter(Boolean).join(" ");
-              const fill = marked ? heat(marked.intensity) : fills[r.key] ?? "#cbd5e1";
-              const common = {
-                className: cls,
-                fill,
-                "data-testid": `bodymap-region-${r.key}`,
-                role: selectable ? "button" : void 0,
-                "aria-label": r.label,
-                onClick: selectable ? () => setSelected(r.key) : void 0
-              };
-              if (s.el === "circle") return /* @__PURE__ */ jsx("circle", { cx: s.cx, cy: s.cy, r: s.r, ...common }, r.key);
-              if (s.el === "ellipse") return /* @__PURE__ */ jsx("ellipse", { cx: s.cx, cy: s.cy, rx: s.rx, ry: s.ry, ...common }, r.key);
-              return /* @__PURE__ */ jsx("rect", { x: s.x, y: s.y, width: s.width, height: s.height, rx: s.rx, ...common }, r.key);
+              const interactive = isSelectable(r.key, config) && !readOnly;
+              const visCls = ["bmap__vis", selected === r.key && "bmap__vis--sel"].filter(Boolean).join(" ");
+              const fill = marked ? markedFill(marked.intensity, palette) : baseFill(r.key, fills[r.key] ?? "#cbd5e1", palette);
+              const hs = hitShape(s);
+              return /* @__PURE__ */ jsxs("g", { children: [
+                shapeEl(hs, {
+                  className: "bmap__hit" + (interactive ? "" : " bmap__hit--locked"),
+                  "data-testid": `bodymap-region-${r.key}`,
+                  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;
+                      setSelected(r.key);
+                    }
+                  } : void 0
+                }),
+                shapeEl(s, { className: visCls, fill, opacity: !readOnly && !isSelectable(r.key, config) ? 0.4 : 1 })
+              ] }, r.key);
             }),
             report.map((p) => {
               const s = shapes[p.region];
@@ -321,17 +562,17 @@ function BodyMap({
               const c = center(s);
               return /* @__PURE__ */ jsx("text", { x: c.x, y: c.y + 4, textAnchor: "middle", className: "bmap__heatn", children: p.intensity }, p.region);
             })
-          ]
+          ] })
         }
       )
     ] }),
-    region ? /* @__PURE__ */ jsxs("div", { className: "bmap__panel", "data-testid": "bodymap-panel", children: [
+    readOnly ? null : region ? /* @__PURE__ */ jsxs("div", { className: "bmap__panel", "data-testid": "bodymap-panel", children: [
       /* @__PURE__ */ jsxs("div", { className: "bmap__ph", children: [
-        /* @__PURE__ */ jsx("b", { children: region.label }),
+        /* @__PURE__ */ jsx("b", { children: nameOf(region.key) }),
         /* @__PURE__ */ jsx("span", { className: "bmap__code", children: region.code })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "bmap__lbl", children: "Intensitet (0-10)" }),
-      /* @__PURE__ */ jsx("div", { className: "bmap__scale", role: "group", "aria-label": "Intensitet", children: Array.from({ length: 11 }, (_, n) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("p", { className: "bmap__lbl", id: "bmap-intensity-lbl", children: L.intensity }),
+      /* @__PURE__ */ jsx("div", { className: "bmap__scale", role: "group", "aria-labelledby": "bmap-intensity-lbl", children: Array.from({ length: 11 }, (_, n) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -343,8 +584,8 @@ function BodyMap({
         },
         n
       )) }),
-      /* @__PURE__ */ jsx("p", { className: "bmap__lbl", children: "Kvalitet" }),
-      /* @__PURE__ */ jsx("div", { className: "bmap__chips", role: "group", "aria-label": "Kvalitet", children: PAIN_TYPES.map((t) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("p", { className: "bmap__lbl", id: "bmap-quality-lbl", children: L.quality }),
+      /* @__PURE__ */ jsx("div", { className: "bmap__chips", role: "group", "aria-labelledby": "bmap-quality-lbl", children: PAIN_TYPES.map((t) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -352,15 +593,15 @@ 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__ */ jsx("button", { type: "button", className: "bmap__rm", "data-testid": "bodymap-remove", onClick: () => removePain(region.key), children: "Fjern punkt" })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "bmap__panel bmap__panel--empty", "data-testid": "bodymap-panel", children: "Klik en kropsdel for at markere smerte." })
+      current && /* @__PURE__ */ jsx("button", { type: "button", className: "bmap__rm", "data-testid": "bodymap-remove", onClick: () => removePain(region.key), children: L.remove })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "bmap__panel bmap__panel--empty", "data-testid": "bodymap-panel", children: L.empty })
   ] });
 }
 
-export { BodyMap };
+export { BodyMap, LABELS_DA, LABELS_EN };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map