@broberg/bodymap 0.1.2 → 0.1.3

package/dist/react.js

@@ -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,6 +180,76 @@ 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;
@@ -184,6 +269,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__ */ 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 });
@@ -264,6 +358,10 @@ function BodyMap({
   config = {},
   defaultView = "front",
   onViewChange,
+  palette,
+  locale = "da",
+  labels,
+  readOnly = false,
   className
 }) {
   useEffect(ensureStyles, []);
@@ -275,6 +373,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 = useRef(null);
   const zoomRef = useRef(1);
   const panRef = useRef({ x: 0, y: 0 });
@@ -376,14 +476,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__ */ jsxs("div", { className: rootCls, "data-testid": "bodymap-root", children: [
+  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__bar", children: [
-        /* @__PURE__ */ jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": "Visning", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": L.viewLabel, children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -392,7 +493,7 @@ function BodyMap({
               "data-testid": "bodymap-view-front",
               "aria-pressed": view === "front",
               onClick: () => changeView("front"),
-              children: "Forfra"
+              children: L.front
             }
           ),
           /* @__PURE__ */ jsx(
@@ -403,14 +504,14 @@ function BodyMap({
               "data-testid": "bodymap-view-back",
               "aria-pressed": view === "back",
               onClick: () => changeView("back"),
-              children: "Bagfra"
+              children: L.back
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "bmap__zoom", role: "group", "aria-label": "Zoom", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "bodymap-zoom-out", "aria-label": "Zoom ud", disabled: zoom <= ZMIN, onClick: () => zoomBtn(1 / 1.4), children: "\u2212" }),
-          /* @__PURE__ */ 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__ */ jsx("button", { type: "button", "data-testid": "bodymap-zoom-in", "aria-label": "Zoom ind", disabled: zoom >= ZMAX, onClick: () => zoomBtn(1.4), children: "+" })
+        /* @__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__ */ jsx(
@@ -420,7 +521,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,
@@ -431,21 +532,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__ */ 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;
@@ -453,7 +553,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) => {
@@ -466,26 +566,25 @@ function BodyMap({
         }
       )
     ] }),
-    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", id: "bmap-intensity-lbl", children: "Intensitet (0-10)" }),
+      /* @__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",
           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__ */ jsx("p", { className: "bmap__lbl", id: "bmap-quality-lbl", children: "Kvalitet" }),
+      /* @__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",
         {
@@ -494,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: "V\xE6lg 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