@broberg/bodymap 0.5.0 → 0.7.0

package/README.md

@@ -211,6 +211,70 @@ 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
+// built-in control (default)
+<BodyMap3D models={models} />
+
+// your own button — you own the state
+const [big, setBig] = useState(false);
+<BodyMap3D models={models} fullscreen={big} onFullscreenChange={setBig} showFullscreenButton={false} />
+<button onClick={() => setBig(true)}>Se stor</button>
+```
+
+`Escape` leaves it. 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
+this component's primary surface. A `position: fixed; inset: 0` overlay behaves
+identically on every platform, needs no user-gesture dance, and cannot leave you
+with a control that silently does nothing on the one device that matters most.
+
+### It ships with a `ResizeObserver`, and that is not incidental
+
+Before 0.6.0 the canvas measured the element **once at mount** and only re-measured
+on a **window** resize. Everything below changes the ELEMENT without touching the
+window, and each one left the picture at its old size — a body that renders small,
+off-centre, or clipped, with nothing wrong in the code because the camera maths is
+correct and the numbers it was handed are stale:
+
+- entering or leaving fullscreen
+- switching `canvasHeight` at your own breakpoint
+- a container animating open, or a wizard step revealing the panel
+- **a phone's URL bar collapsing, which changes what `vh` means**
+
+If you saw a badly framed body on a phone before 0.6.0, this is the first thing to
+retest.
+
 ## `seam` — soft region edges are OPT-IN, and here is why
 
 ```tsx

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(