@broberg/bodymap 0.9.0 → 0.11.0

package/dist/three.d.cts

@@ -205,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).
  *
@@ -250,6 +260,26 @@ declare function seamWeight(seamEnabled: boolean, blend: number): number;
  * Returns true when it computed (the model had none, and would otherwise render
  * flat), false when it left the authored normals alone.
  */
+/**
+ * F052.32 — is this pointer-up a TAP, or the end of a drag?
+ *
+ * DISTANCE IS THE WHOLE TEST. A drag moves; a tap does not. There used to be a
+ * 450 ms ceiling beside it, and it did not help tell those apart — what it did
+ * was rule that a SLOW press is not a tap.
+ *
+ * A slow press is exactly what a CAREFUL tap is. Aiming at a small body part on
+ * a phone, at a mark you are trying to hit again, takes longer than a casual
+ * poke — so the ceiling discarded precisely the taps a user was trying hardest
+ * to make, on a health app whose users are in pain.
+ *
+ * And it discarded them in SILENCE: the guard returned from the whole handler,
+ * so there was no pick, no clear, no feedback and no repaint. The owner reported
+ * it twice, as "the remove button is gone" and as "the sound does not work". One
+ * swallowed tap, two sightings, each explained away separately.
+ */
+declare function isTap(dx: number, dy: number, maxDistance?: number): boolean;
+/** Pixels of travel a tap may have. Beyond this it was a rotation. */
+declare const TAP_MAX_DISTANCE = 6;
 declare function ensureNormals(geo: {
     getAttribute(name: string): unknown;
     computeVertexNormals(): void;
@@ -265,6 +295,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;
@@ -325,4 +373,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, TAP_MAX_DISTANCE, ensureNormals, isTap, seamBlend, seamWeight, serializeReport };

package/dist/three.d.ts

@@ -205,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).
  *
@@ -250,6 +260,26 @@ declare function seamWeight(seamEnabled: boolean, blend: number): number;
  * Returns true when it computed (the model had none, and would otherwise render
  * flat), false when it left the authored normals alone.
  */
+/**
+ * F052.32 — is this pointer-up a TAP, or the end of a drag?
+ *
+ * DISTANCE IS THE WHOLE TEST. A drag moves; a tap does not. There used to be a
+ * 450 ms ceiling beside it, and it did not help tell those apart — what it did
+ * was rule that a SLOW press is not a tap.
+ *
+ * A slow press is exactly what a CAREFUL tap is. Aiming at a small body part on
+ * a phone, at a mark you are trying to hit again, takes longer than a casual
+ * poke — so the ceiling discarded precisely the taps a user was trying hardest
+ * to make, on a health app whose users are in pain.
+ *
+ * And it discarded them in SILENCE: the guard returned from the whole handler,
+ * so there was no pick, no clear, no feedback and no repaint. The owner reported
+ * it twice, as "the remove button is gone" and as "the sound does not work". One
+ * swallowed tap, two sightings, each explained away separately.
+ */
+declare function isTap(dx: number, dy: number, maxDistance?: number): boolean;
+/** Pixels of travel a tap may have. Beyond this it was a rotation. */
+declare const TAP_MAX_DISTANCE = 6;
 declare function ensureNormals(geo: {
     getAttribute(name: string): unknown;
     computeVertexNormals(): void;
@@ -265,6 +295,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;
@@ -325,4 +373,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, TAP_MAX_DISTANCE, ensureNormals, isTap, seamBlend, seamWeight, serializeReport };

package/dist/three.js

@@ -212,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],
@@ -260,6 +260,10 @@ function seamBlend(nearestSq, secondSq) {
 function seamWeight(seamEnabled, blend) {
   return seamEnabled ? blend : 0;
 }
+function isTap(dx, dy, maxDistance = TAP_MAX_DISTANCE) {
+  return Math.hypot(dx, dy) <= maxDistance;
+}
+var TAP_MAX_DISTANCE = 6;
 function ensureNormals(geo) {
   if (geo.getAttribute("normal")) return false;
   geo.computeVertexNormals();
@@ -320,6 +324,7 @@ function BodyMap3D(props) {
     onFeedback,
     haptics,
     seam = false,
+    hint,
     fullscreen: fullscreenProp,
     onFullscreenChange,
     showFullscreenButton = true,
@@ -572,12 +577,11 @@ function BodyMap3D(props) {
       }
       return best;
     };
-    let downX = 0, downY = 0, downT = 0;
+    let downX = 0, downY = 0;
     const canvas = renderer.domElement;
     const onDown = (e) => {
       downX = e.clientX;
       downY = e.clientY;
-      downT = Date.now();
     };
     const onMove = (e) => {
       if ((e.buttons || 0) !== 0) return;
@@ -589,7 +593,7 @@ function BodyMap3D(props) {
       renderFrame();
     };
     const onUp = (e) => {
-      if (Math.hypot(e.clientX - downX, e.clientY - downY) > 6 || Date.now() - downT > 450) return;
+      if (!isTap(e.clientX - downX, e.clientY - downY)) return;
       const k = pick(e.clientX, e.clientY);
       if (!k) return;
       const outcome = pickRef.current(k);
@@ -679,7 +683,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",
     {
@@ -795,13 +801,38 @@ function BodyMap3D(props) {
             /* @__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(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 ? /* @__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 })
-        ] })
+          ] }) : 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
+          }
+        )
       ]
     }
   );
 }
 
-export { BodyMap3D, ensureNormals, seamBlend, seamWeight, serializeReport };
+export { BodyMap3D, TAP_MAX_DISTANCE, ensureNormals, isTap, seamBlend, seamWeight, serializeReport };
 //# sourceMappingURL=three.js.map
 //# sourceMappingURL=three.js.map