@broberg/bodymap 0.2.3 → 0.2.5

package/dist/three.d.ts

@@ -49,6 +49,28 @@ interface BodymapPalette {
     };
     /** Optional per-region base-colour overrides (region key → colour). */
     regions?: Record<string, string>;
+    /**
+     * Optional panel-chrome colours (the selection panel, labels, hint box) —
+     * NOT the body itself. All optional; anything omitted falls back to
+     * {@link defaultUi}. A palette that only themed the body was half a palette:
+     * a consumer passing brand colours still got hardcoded chrome. (F052.19)
+     */
+    ui?: BodymapUiColors;
+}
+/** Panel-chrome colours. Every default is WCAG-AA (>=4.5:1) on its own background. */
+interface BodymapUiColors {
+    /** Primary text (headings, values). */
+    text?: string;
+    /** Secondary text — section labels, the empty-state hint. */
+    mutedText?: string;
+    /** Panel background. */
+    panelBg?: string;
+    /** Panel + control borders. */
+    border?: string;
+    /** Background behind the region-code badge. */
+    badgeBg?: string;
+    /** The destructive action (remove a marked region). */
+    danger?: string;
 }
 type BodyView = "front" | "back" | "left" | "right";
 /** Side in the serialized report — a midline region (no side) becomes "center". */
@@ -141,6 +163,10 @@ interface BodyMap3DProps {
      *  shorter value on narrow viewports so the picker panel below the body stays visible
      *  the moment a region is selected (no full-screen scroll). */
     canvasHeight?: string | number;
+    /** Show the clinical region-code badge (e.g. "HIP · right") in the panel header
+     *  (default true). Set false for a patient/employee-facing flow where the code is
+     *  internal jargon and the readable region name is enough. */
+    showRegionCode?: boolean;
     className?: string;
 }
 declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;

package/dist/three.js

@@ -58,6 +58,17 @@ function isSelectable(key, config = {}) {
   if (s?.visible === false) return false;
   return s?.selectable ?? true;
 }
+var defaultUi = {
+  text: "#1e293b",
+  mutedText: "#475569",
+  panelBg: "#fff",
+  border: "#e2e8f0",
+  badgeBg: "#f1f5f9",
+  danger: "#dc2626"
+};
+function uiColors(palette) {
+  return { ...defaultUi, ...palette?.ui ?? {} };
+}
 var defaultPalette = {
   body: "#d2d7de",
   hover: "#8fd0cd",
@@ -238,8 +249,10 @@ function BodyMap3D(props) {
     onSexChange,
     autoRotate = true,
     canvasHeight = "60vh",
+    showRegionCode = true,
     className
   } = props;
+  const chrome = uiColors(palette);
   const L = mergeLabels(locale, labels);
   const UI = { ...locale === "en" ? UI_EN : UI_DA, ...ui };
   const nameOf = (key) => L.regions[key] ?? getRegion(key)?.label ?? key;
@@ -539,20 +552,20 @@ function BodyMap3D(props) {
     ready && /* @__PURE__ */ jsx("span", { "data-testid": "bodymap3d-ready", style: { position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" } }),
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap" }, children: [
       unsupported ? /* @__PURE__ */ jsx("div", { "data-testid": "bodymap3d-unsupported", style: { flex: "1 1 520px", minWidth: 320, height: canvasH, borderRadius: 16, background: "#0e1424", color: "#cbd5e1", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, textAlign: "center", fontSize: 14 }, children: "3D kr\xE6ver WebGL, som ikke er tilg\xE6ngeligt her." }) : /* @__PURE__ */ jsx("div", { ref: mountRef, "data-testid": "bodymap3d-canvas", style: { flex: "1 1 520px", height: canvasH, minWidth: 320, borderRadius: 16, overflow: "hidden", background: "#0e1424", touchAction: "none" } }),
-      /* @__PURE__ */ jsx("div", { style: { flex: "1 1 300px", minWidth: 260 }, children: region ? /* @__PURE__ */ jsxs("div", { style: { border: "1px solid #e2e8f0", borderRadius: 14, padding: 16, background: "#fff" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { flex: "1 1 300px", minWidth: 260 }, children: region ? /* @__PURE__ */ jsxs("div", { style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg }, children: [
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
           /* @__PURE__ */ jsx("b", { style: { fontSize: 16 }, children: nameOf(region.key) }),
-          /* @__PURE__ */ jsxs("span", { style: { font: "11px ui-monospace, monospace", color: "#64748b", background: "#f1f5f9", borderRadius: 6, padding: "2px 7px" }, children: [
+          showRegionCode && /* @__PURE__ */ jsxs("span", { "data-testid": "bodymap3d-region-code", style: { font: "11px ui-monospace, monospace", color: chrome.mutedText, background: chrome.badgeBg, borderRadius: 6, padding: "2px 7px" }, children: [
             region.code,
             region.side ? " \xB7 " + region.side : ""
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "#94a3b8", marginBottom: 7 }, children: L.intensity }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.intensity }),
         /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12 }, children: Array.from({ length: 11 }, (_, i) => /* @__PURE__ */ jsx("button", { "data-testid": `bodymap3d-intensity-${i}`, onClick: () => setPain(region.key, i, current?.type), style: { ...btn, display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 30, height: 30, padding: 0, background: current?.intensity === i ? "#0e8f8a" : "#fff", color: current?.intensity === i ? "#fff" : "#1e293b" }, children: i }, i)) }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "#94a3b8", marginBottom: 7 }, children: L.quality }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.quality }),
         /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 }, children: PAIN_TYPES.map((t) => /* @__PURE__ */ jsx("button", { "data-testid": `bodymap3d-type-${t}`, onClick: () => setPain(region.key, current?.intensity ?? 5, t), style: { ...btn, borderRadius: 999, padding: "6px 12px", background: current?.type === t ? "#1e293b" : "#fff", color: current?.type === t ? "#fff" : "#64748b" }, children: L.qualities[t] ?? t }, t)) }),
-        current && /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn, color: "#ef4444", borderColor: "#f6c9c9" }, children: L.remove })
-      ] }) : showEmptyHint ? /* @__PURE__ */ jsx("div", { "data-testid": "bodymap3d-empty", style: { border: "1px solid #e2e8f0", borderRadius: 14, padding: 16, background: "#fff", color: "#94a3b8", fontSize: 13.5 }, children: UI.hoverHint }) : null })
+        current && /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn, color: chrome.danger, borderColor: "#f6c9c9" }, children: L.remove })
+      ] }) : showEmptyHint ? /* @__PURE__ */ jsx("div", { "data-testid": "bodymap3d-empty", style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg, color: chrome.mutedText, fontSize: 13.5 }, children: UI.hoverHint }) : null })
     ] })
   ] });
 }