@broberg/bodymap 0.8.0 → 0.10.0

package/dist/three.d.cts

@@ -119,6 +119,19 @@ interface BodymapUiColors {
     badgeBg?: string;
     /** The destructive action (remove a marked region). */
     danger?: string;
+    /** Border on the destructive control. Its TEXT was already themeable and its
+     *  border was not — half a control. (F052.30) */
+    dangerBorder?: string;
+    /**
+     * THE ACTIVE CONTROL colour — the chosen intensity, the active sex toggle.
+     *
+     * NOT `palette.selected`. That is the colour of a MARK ON SKIN; this is the
+     * colour of an active button. Collapsing them would stop a consumer having a
+     * teal mark and a navy button, which is a normal thing to want. (F052.30)
+     */
+    accent?: string;
+    /** Text ON the accent. Check it against your accent — see the README. */
+    accentText?: string;
 }
 type BodyView = "front" | "back" | "left" | "right";
 /** Side in the serialized report — a midline region (no side) becomes "center". */
@@ -192,6 +205,16 @@ interface BodyMap3DUiLabels {
     female: string;
     hoverHint: string;
 }
+interface BodyMap3DHint {
+    /** Overrides the localized default. `ui.hoverHint` still works too. */
+    text?: string;
+    /**
+     * `after-canvas` (default) keeps today's flow position.
+     * `stage-bottom` pins it inside the fullscreen surface, above the home
+     * indicator — and falls back to the flow position when not fullscreen.
+     */
+    placement?: "after-canvas" | "stage-bottom";
+}
 /**
  * How much of the RUNNER-UP region bleeds into this vertex (F052.21).
  *
@@ -252,6 +275,24 @@ interface BodyMap3DProps {
     palette?: BodymapPalette;
     locale?: BodyMapLocale;
     labels?: Partial<BodyMapLabels>;
+    /**
+     * The help note under the body. F052.31.
+     *
+     * `false` renders NOTHING — no box, no border, no empty element. That path did
+     * not exist before: `ui.hoverHint = ""` produced an empty bordered box, which
+     * is worse than the sentence it replaced.
+     *
+     * `placement` is what fixes the defect rather than moving it. In the boxed
+     * layout the note belongs after the canvas; in FULLSCREEN that column wraps
+     * beneath a full-height canvas and the note lands past the bottom edge —
+     * measured by a consumer at 858-912 in an 852px window, i.e. entirely
+     * offscreen. `stage-bottom` anchors it inside the fullscreen surface instead,
+     * clear of the home indicator.
+     *
+     * A consumer cannot make that call in CSS without knowing our internal
+     * structure, which is exactly why two of them had to write wedges against it.
+     */
+    hint?: false | BodyMap3DHint;
     /** Override the 3D-only control strings (male/female/hoverHint). */
     ui?: Partial<BodyMap3DUiLabels>;
     defaultSex?: BodyMap3DSex;
@@ -312,4 +353,4 @@ interface BodyMap3DProps {
 }
 declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
 
-export { BodyMap3D, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };
+export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };

package/dist/three.d.ts

@@ -119,6 +119,19 @@ interface BodymapUiColors {
     badgeBg?: string;
     /** The destructive action (remove a marked region). */
     danger?: string;
+    /** Border on the destructive control. Its TEXT was already themeable and its
+     *  border was not — half a control. (F052.30) */
+    dangerBorder?: string;
+    /**
+     * THE ACTIVE CONTROL colour — the chosen intensity, the active sex toggle.
+     *
+     * NOT `palette.selected`. That is the colour of a MARK ON SKIN; this is the
+     * colour of an active button. Collapsing them would stop a consumer having a
+     * teal mark and a navy button, which is a normal thing to want. (F052.30)
+     */
+    accent?: string;
+    /** Text ON the accent. Check it against your accent — see the README. */
+    accentText?: string;
 }
 type BodyView = "front" | "back" | "left" | "right";
 /** Side in the serialized report — a midline region (no side) becomes "center". */
@@ -192,6 +205,16 @@ interface BodyMap3DUiLabels {
     female: string;
     hoverHint: string;
 }
+interface BodyMap3DHint {
+    /** Overrides the localized default. `ui.hoverHint` still works too. */
+    text?: string;
+    /**
+     * `after-canvas` (default) keeps today's flow position.
+     * `stage-bottom` pins it inside the fullscreen surface, above the home
+     * indicator — and falls back to the flow position when not fullscreen.
+     */
+    placement?: "after-canvas" | "stage-bottom";
+}
 /**
  * How much of the RUNNER-UP region bleeds into this vertex (F052.21).
  *
@@ -252,6 +275,24 @@ interface BodyMap3DProps {
     palette?: BodymapPalette;
     locale?: BodyMapLocale;
     labels?: Partial<BodyMapLabels>;
+    /**
+     * The help note under the body. F052.31.
+     *
+     * `false` renders NOTHING — no box, no border, no empty element. That path did
+     * not exist before: `ui.hoverHint = ""` produced an empty bordered box, which
+     * is worse than the sentence it replaced.
+     *
+     * `placement` is what fixes the defect rather than moving it. In the boxed
+     * layout the note belongs after the canvas; in FULLSCREEN that column wraps
+     * beneath a full-height canvas and the note lands past the bottom edge —
+     * measured by a consumer at 858-912 in an 852px window, i.e. entirely
+     * offscreen. `stage-bottom` anchors it inside the fullscreen surface instead,
+     * clear of the home indicator.
+     *
+     * A consumer cannot make that call in CSS without knowing our internal
+     * structure, which is exactly why two of them had to write wedges against it.
+     */
+    hint?: false | BodyMap3DHint;
     /** Override the 3D-only control strings (male/female/hoverHint). */
     ui?: Partial<BodyMap3DUiLabels>;
     defaultSex?: BodyMap3DSex;
@@ -312,4 +353,4 @@ interface BodyMap3DProps {
 }
 declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
 
-export { BodyMap3D, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };
+export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };

package/dist/three.js

@@ -89,7 +89,16 @@ var defaultUi = {
   stageBg: STAGE_BG,
   border: "#e2e8f0",
   badgeBg: "#f1f5f9",
-  danger: "#dc2626"
+  danger: "#dc2626",
+  dangerBorder: "#f6c9c9",
+  // F052.30 — was #0e8f8a, which measured 3.95:1 against white. AA needs 4.5,
+  // and this is the SELECTED intensity button on a surface where AA is a legal
+  // duty. It shipped from 0.2.0 and no check could see it: the colour was an
+  // inline literal, and the F052.19 contrast sweep only read this object.
+  // #0c7d77 is the same teal a shade deeper — 4.98:1, with headroom rather than
+  // sitting on the 4.5 boundary where any later tweak reopens it.
+  accent: "#0c7d77",
+  accentText: "#fff"
 };
 function uiColors(palette) {
   return { ...defaultUi, ...palette?.ui ?? {} };
@@ -203,8 +212,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],
@@ -276,8 +285,20 @@ function webglAvailable() {
     return false;
   }
 }
-var btn = { font: "inherit", cursor: "pointer", borderRadius: 8, border: "1px solid #e2e8f0", background: "#fff", padding: "6px 9px" };
-var seg = (on) => ({ ...btn, background: on ? "#0e8f8a" : "#fff", color: on ? "#fff" : "#1e293b", fontWeight: 600 });
+var btn = (c) => ({
+  font: "inherit",
+  cursor: "pointer",
+  borderRadius: 8,
+  border: `1px solid ${c.border}`,
+  background: c.panelBg,
+  padding: "6px 9px"
+});
+var seg = (c, on) => ({
+  ...btn(c),
+  background: on ? c.accent : c.panelBg,
+  color: on ? c.accentText : c.text,
+  fontWeight: 600
+});
 function BodyMap3D(props) {
   const {
     models,
@@ -299,6 +320,7 @@ function BodyMap3D(props) {
     onFeedback,
     haptics,
     seam = false,
+    hint,
     fullscreen: fullscreenProp,
     onFullscreenChange,
     showFullscreenButton = true,
@@ -658,7 +680,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__ */ jsxs(
     "div",
     {
@@ -667,7 +691,7 @@ function BodyMap3D(props) {
       "data-fullscreen": isFullscreen ? "true" : void 0,
       style: {
         fontFamily: "system-ui, sans-serif",
-        color: "#1e293b",
+        color: chrome.text,
         // A viewport fill, not the Fullscreen API — see the `fullscreen` prop.
         // `fixed`+`inset:0` behaves the same on iOS Safari, where element
         // fullscreen does not exist at all, as it does everywhere else.
@@ -699,8 +723,8 @@ function BodyMap3D(props) {
       },
       children: [
         showSexToggle && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginBottom: 12, fontSize: 13 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
-          /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-sex-male", onClick: () => changeSex("male"), style: seg(sex === "male"), children: UI.male }),
-          /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-sex-female", onClick: () => changeSex("female"), style: seg(sex === "female"), children: UI.female })
+          /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-sex-male", onClick: () => changeSex("male"), style: seg(chrome, sex === "male"), children: UI.male }),
+          /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-sex-female", onClick: () => changeSex("female"), style: seg(chrome, sex === "female"), children: UI.female })
         ] }) }),
         /* @__PURE__ */ jsx("span", { ref: loadedRef, "data-testid": "bodymap3d-loaded", style: { display: "none" } }),
         ready && /* @__PURE__ */ jsx("span", { "data-testid": "bodymap3d-ready", style: { position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" } }),
@@ -713,7 +737,7 @@ function BodyMap3D(props) {
             "aria-label": isFullscreen ? UI.collapse ?? "Close" : UI.expand ?? "Expand",
             onClick: () => setFullscreen(!isFullscreen),
             style: {
-              ...btn,
+              ...btn(chrome),
               color: chrome.text,
               borderColor: chrome.border,
               background: chrome.panelBg,
@@ -764,18 +788,43 @@ function BodyMap3D(props) {
                   "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 },
+                  style: { ...btn(chrome), 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)) }),
+            /* @__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(chrome), display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 30, height: 30, padding: 0, background: current?.intensity === i ? chrome.accent : chrome.panelBg, color: current?.intensity === i ? chrome.accentText : chrome.text }, children: i }, i)) }),
             /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.quality }),
-            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 }, children: PAIN_TYPES.map((t) => /* @__PURE__ */ jsx("button", { "data-testid": `bodymap3d-type-${t}`, onClick: () => setPain(region.key, current?.intensity ?? 5, t), style: { ...btn, borderRadius: 999, padding: "6px 12px", background: current?.type === t ? "#1e293b" : "#fff", color: current?.type === t ? "#fff" : "#64748b" }, children: L.qualities[t] ?? t }, t)) }),
-            current && /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn, color: chrome.danger, borderColor: "#f6c9c9" }, children: L.remove })
-          ] }) : showEmptyHint ? /* @__PURE__ */ 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 })
-        ] })
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 }, children: PAIN_TYPES.map((t) => /* @__PURE__ */ 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__ */ jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn(chrome), color: chrome.danger, borderColor: chrome.dangerBorder }, children: L.remove })
+          ] }) : showEmptyHint && !hintAtStage ? /* @__PURE__ */ 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__ */ 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
+          }
+        )
       ]
     }
   );