@broberg/bodymap 0.7.0 → 0.7.1

package/README.md

@@ -251,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/three.cjs

@@ -685,7 +685,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"
@@ -706,8 +716,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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap", ...isFullscreen ? { flex: "1 1 auto", minHeight: 0 } : null }, children: [