@broberg/bodymap 0.6.0 → 0.7.1

package/README.md

@@ -211,6 +211,34 @@ had *arrived* on a device that never *showed* it.)
 `VIBRATION_PATTERNS.ignore` is empty on purpose: a tap that changed nothing must
 not feel like it did.
 
+## Closing the picker without marking anything
+
+Opening a region writes **nothing** to the report — only choosing an intensity
+does. So until 0.7.0 there was no exit from a region you opened by accident: your
+options were to mark it (writing something you did not mean) or to open a
+different region (which you also did not mean).
+
+Both renderers now carry a close control (`bodymap-close` / `bodymap3d-close`),
+and in the 3D renderer `Escape` closes the open region — falling through to
+leaving fullscreen only when no region is open, so one press never does two
+things.
+
+**Close is not remove, and the distinction is deliberate:**
+
+| | |
+|---|---|
+| **Close** | always available. Stops editing this region. **Never touches the report.** |
+| **Remove** | only when something is actually marked. Deletes the mark. |
+
+A «Remove» button offered while the report is empty tells the user something was
+stored when nothing was — so it stays gated, and the close control is what fills
+the gap.
+
+**Why it went unnoticed for so long:** every test and demo in this package taps a
+region *in order to mark it*. Nobody had ever tested changing their mind. Nothing
+was behaving wrongly — it was a path with no exit, and paths with no exit do not
+fail, they strand people.
+
 ## Fullscreen — fill the viewport with the body
 
 ```tsx
@@ -223,7 +251,22 @@ const [big, setBig] = useState(false);
 <button onClick={() => setBig(true)}>Se stor</button>
 ```
 
-`Escape` leaves it. The pain report is untouched by entering or leaving.
+`Escape` leaves it — **but a phone has no Escape**, so there must always be a
+reachable control. That is why the built-in one exists and why switching it off is
+a commitment to supplying your own.
+
+⚠️ **If you supply your own control, render it as a SIBLING of the fullscreen
+surface — not as a child of a container beneath it.** The surface is
+`position: fixed`, so a button positioned `absolute` inside your original box ends
+up *underneath* it. A consumer hit exactly this: their × disappeared under the
+overlay, and because they had already set `showFullscreenButton={false}` there was
+no way out at all. Give yours `position: fixed` and a z-index above the overlay,
+and assert with `document.elementFromPoint()` that the point you can see is the
+button you think it is.
+
+The control sits inside the safe area (`env(safe-area-inset-*)` on all four sides),
+and becomes a compact × in fullscreen — a text pill is wide enough to cover half a
+phone's status bar. The pain report is untouched by entering or leaving.
 
 **It is a viewport fill, not the browser Fullscreen API — deliberately.** iOS
 Safari does not support fullscreen on an arbitrary element at all, and a phone is

package/dist/react.cjs

@@ -235,6 +235,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.",
@@ -257,6 +258,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.",
@@ -356,6 +358,10 @@ var STYLE = `
 .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__close{margin-left:auto;font:inherit;font-size:20px;line-height:1;cursor:pointer;background:none;border:1px solid transparent;border-radius:8px;width:32px;height:32px;color:var(--bmap-muted,#475569)}
+.bmap__close:hover{background:var(--bmap-badge-bg,#f1f5f9)}
+.bmap__close:active{transform:scale(.94)}
+.bmap__close:focus-visible{outline:2px solid var(--bmap-accent,#0e8f8a);outline-offset:2px}
 .bmap__code{font:11px ui-monospace,monospace;color:var(--bmap-muted);background:var(--bmap-badge-bg);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:6px;flex-wrap:wrap;margin-bottom:14px}
@@ -653,7 +659,18 @@ function BodyMap({
     readOnly ? null : region ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__panel", "data-testid": "bodymap-panel", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__ph", children: [
         /* @__PURE__ */ jsxRuntime.jsx("b", { children: nameOf(region.key) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bmap__code", children: region.code })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bmap__code", children: region.code }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "bmap__close",
+            "data-testid": "bodymap-close",
+            "aria-label": L.close,
+            onClick: () => setSelected(null),
+            children: "\xD7"
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "bmap__lbl", id: "bmap-intensity-lbl", children: L.intensity }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bmap__scale", role: "group", "aria-labelledby": "bmap-intensity-lbl", children: Array.from({ length: 11 }, (_, n) => /* @__PURE__ */ jsxRuntime.jsx(