@broberg/bodymap 0.9.0 → 0.10.0

package/README.md

@@ -382,6 +382,34 @@ is invisible on a desktop monitor and obvious on a phone.
 
 3D only — the 2D renderer has no canvas and no fullscreen, so it ignores it.
 
+### `hint` — turn the help note off, or move it (0.10.0)
+
+```tsx
+<BodyMap3D hint={false} />                                        // don't show it
+<BodyMap3D hint={{ text: "…", placement: "stage-bottom" }} />     // yours, pinned in the stage
+```
+
+**`hint={false}` is the "do not show this" that did not exist.** `ui.hoverHint`
+only ever changed the *text*, and setting it to `""` produced an empty bordered
+box — worse than the sentence. `ui.hoverHint` still works and is not deprecated;
+`hint.text` is simply the newer way to say the same thing.
+
+**`placement: "stage-bottom"` fixes a real clipping bug rather than moving it.**
+The note sits in normal flow in the panel column. In fullscreen the canvas takes
+the full height, that column wraps beneath it, and the note lands past the bottom
+edge — measured on a real iPhone at **858–912 in an 852px window**, entirely
+offscreen. `stage-bottom` pins it inside the fullscreen surface, clear of the home
+indicator. Outside fullscreen it stays where it was, because there the flow
+position is right.
+
+You cannot make that call in CSS without knowing our internal structure, which is
+why the prop exists.
+
+⚠️ **The default text changed in 0.10.0.** It said *"Hover to highlight"* —
+describing an interaction that does not exist on a touchscreen, on a component
+whose primary surface is a phone. Now *"Drag to rotate · tap a body part to mark
+pain."*
+
 ### `ui.accent` — the controls read your palette now (0.9.0)
 
 Until 0.9.0 the buttons carried their colours inline, so a consumer palette

package/dist/three.cjs

@@ -234,8 +234,8 @@ var LABELS_EN = {
   zoomOut: "Zoom out",
   zoomReset: "Reset zoom"
 };
-var UI_DA = { male: "Mand", female: "Kvinde", hoverHint: "Hover for at fremh\xE6ve \xB7 klik en kropsdel for at markere smerte.", expand: "Vis stor", collapse: "Luk stor visning" };
-var UI_EN = { male: "Male", female: "Female", hoverHint: "Hover to highlight \xB7 tap a body part to mark pain.", expand: "Expand", collapse: "Close" };
+var UI_DA = { male: "Mand", female: "Kvinde", hoverHint: "Tr\xE6k for at dreje \xB7 tryk en kropsdel for at markere smerte.", expand: "Vis stor", collapse: "Luk stor visning" };
+var UI_EN = { male: "Male", female: "Female", hoverHint: "Drag to rotate \xB7 tap a body part to mark pain.", expand: "Expand", collapse: "Close" };
 var ANCHORS = {
   head: [0, 1.79, 0.02],
   neck: [0, 1.57, 0],
@@ -342,6 +342,7 @@ function BodyMap3D(props) {
     onFeedback,
     haptics,
     seam = false,
+    hint,
     fullscreen: fullscreenProp,
     onFullscreenChange,
     showFullscreenButton = true,
@@ -701,7 +702,9 @@ function BodyMap3D(props) {
   const region = selected ? REGIONS.find((r) => r.key === selected) : null;
   const current = selected ? pointOf(selected) : void 0;
   const anySelectable = REGIONS.some((r) => isSelectable(r.key, config ?? {}));
-  const showEmptyHint = anySelectable || ui?.hoverHint !== void 0;
+  const showEmptyHint = hint === false ? false : anySelectable || ui?.hoverHint !== void 0;
+  const hintText = (hint ? hint.text : void 0) ?? UI.hoverHint;
+  const hintAtStage = isFullscreen && !!hint && hint.placement === "stage-bottom";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -817,8 +820,33 @@ function BodyMap3D(props) {
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.quality }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 }, children: PAIN_TYPES.map((t) => /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": `bodymap3d-type-${t}`, onClick: () => setPain(region.key, current?.intensity ?? 5, t), style: { ...btn(chrome), borderRadius: 999, padding: "6px 12px", background: current?.type === t ? chrome.text : chrome.panelBg, color: current?.type === t ? chrome.panelBg : chrome.mutedText }, children: L.qualities[t] ?? t }, t)) }),
             current && /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn(chrome), color: chrome.danger, borderColor: chrome.dangerBorder }, children: L.remove })
-          ] }) : showEmptyHint ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "bodymap3d-empty", style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg, color: chrome.mutedText, fontSize: 13.5 }, children: UI.hoverHint }) : null })
-        ] })
+          ] }) : showEmptyHint && !hintAtStage ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "bodymap3d-empty", style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg, color: chrome.mutedText, fontSize: 13.5 }, children: hintText }) : null })
+        ] }),
+        showEmptyHint && hintAtStage && /* F052.31 — pinned INSIDE the fullscreen surface, not in the column that
+           wraps beneath a full-height canvas. That wrap is what put the note at
+           858-912 in an 852px window on a real iPhone: entirely offscreen, and
+           it reads as a bug in the consumer's app rather than in ours.
+           The bottom inset clears the home indicator, exactly as the exit
+           control's does (F052.27). */
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-testid": "bodymap3d-empty",
+            "data-placement": "stage-bottom",
+            style: {
+              flex: "0 0 auto",
+              marginTop: 12,
+              marginBottom: "env(safe-area-inset-bottom)",
+              border: `1px solid ${chrome.border}`,
+              borderRadius: 14,
+              padding: 16,
+              background: chrome.panelBg,
+              color: chrome.mutedText,
+              fontSize: 13.5
+            },
+            children: hintText
+          }
+        )
       ]
     }
   );