@broberg/bodymap 0.6.0 → 0.7.0

package/dist/three.cjs

@@ -183,6 +183,7 @@ var LABELS_DA = {
   intensity: "Intensitet (0-10)",
   quality: "Kvalitet",
   remove: "Fjern punkt",
+  close: "Luk",
   front: "Forfra",
   back: "Bagfra",
   empty: "V\xE6lg en kropsdel for at markere smerte.",
@@ -205,6 +206,7 @@ var LABELS_EN = {
   intensity: "Intensity (0-10)",
   quality: "Quality",
   remove: "Remove point",
+  close: "Close",
   front: "Front",
   back: "Back",
   empty: "Pick a body part to mark pain.",
@@ -623,9 +625,11 @@ function BodyMap3D(props) {
     };
   }, []);
   react.useEffect(() => {
-    if (!isFullscreen) return;
+    if (!isFullscreen && !selected) return;
     const onKey = (e) => {
-      if (e.key === "Escape") setFullscreen(false);
+      if (e.key !== "Escape") return;
+      if (selected) setSelected(null);
+      else setFullscreen(false);
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
@@ -733,7 +737,18 @@ function BodyMap3D(props) {
               showRegionCode && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": "bodymap3d-close",
+                  "aria-label": L.close,
+                  onClick: () => setSelected(null),
+                  style: { ...btn, width: 32, height: 32, padding: 0, fontSize: 20, lineHeight: 1, color: chrome.mutedText, borderColor: chrome.border, background: chrome.panelBg },
+                  children: "\xD7"
+                }
+              )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.intensity }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12 }, children: Array.from({ length: 11 }, (_, i) => /* @__PURE__ */ jsxRuntime.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)) }),