@broberg/bodymap 0.6.0 → 0.7.1

package/dist/three.d.cts

@@ -134,6 +134,8 @@ interface BodyMapLabels {
     intensity: string;
     quality: string;
     remove: string;
+    /** Close the picker without marking anything (F052.26). */
+    close: string;
     front: string;
     back: string;
     empty: string;

package/dist/three.d.ts

@@ -134,6 +134,8 @@ interface BodyMapLabels {
     intensity: string;
     quality: string;
     remove: string;
+    /** Close the picker without marking anything (F052.26). */
+    close: string;
     front: string;
     back: string;
     empty: string;

package/dist/three.js

@@ -161,6 +161,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.",
@@ -183,6 +184,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.",
@@ -601,9 +603,11 @@ function BodyMap3D(props) {
     };
   }, []);
   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);
@@ -659,7 +663,17 @@ function BodyMap3D(props) {
           inset: 0,
           zIndex: 2147483e3,
           background: chrome.panelBg,
-          padding: 12,
+          // F052.27 — a fixed inset:0 surface in a standalone/Capacitor
+          // webview covers the STATUS BAR too, so a control laid out at the
+          // top lands on the clock and the battery. Measured by fd-sundhed
+          // on a real iPhone: the owner could not read the button or get
+          // out, and Escape does not exist on a phone. Every side gets its
+          // safe-area inset, bottom included — the home indicator covers
+          // content just as effectively.
+          paddingTop: "calc(12px + env(safe-area-inset-top))",
+          paddingBottom: "calc(12px + env(safe-area-inset-bottom))",
+          paddingLeft: "calc(12px + env(safe-area-inset-left))",
+          paddingRight: "calc(12px + env(safe-area-inset-right))",
           display: "flex",
           flexDirection: "column",
           overflow: "auto"
@@ -680,8 +694,14 @@ function BodyMap3D(props) {
             "aria-pressed": isFullscreen,
             "aria-label": isFullscreen ? UI.collapse ?? "Close" : UI.expand ?? "Expand",
             onClick: () => setFullscreen(!isFullscreen),
-            style: { ...btn, color: chrome.text, borderColor: chrome.border, background: chrome.panelBg },
-            children: isFullscreen ? UI.collapse ?? "Close" : UI.expand ?? "Expand"
+            style: {
+              ...btn,
+              color: chrome.text,
+              borderColor: chrome.border,
+              background: chrome.panelBg,
+              ...isFullscreen ? { width: 40, height: 40, padding: 0, fontSize: 22, lineHeight: 1 } : null
+            },
+            children: isFullscreen ? "\xD7" : UI.expand ?? "Expand"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap", ...isFullscreen ? { flex: "1 1 auto", minHeight: 0 } : null }, children: [
@@ -711,7 +731,18 @@ function BodyMap3D(props) {
               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(
+                "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__ */ 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)) }),