@broberg/bodymap 0.10.0 → 0.12.0

package/dist/three.d.cts

@@ -260,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;
@@ -351,6 +371,56 @@ interface BodyMap3DProps {
     haptics?: boolean;
     className?: string;
 }
+/**
+ * F052.30 — the controls now READ THE PALETTE.
+ *
+ * These were module-level constants with the colours written in: #e2e8f0 border,
+ * #fff surface, #0e8f8a accent. Three of those already existed as `chrome`
+ * fields and were simply not used, so a consumer who set `ui.border` saw it on
+ * the card and NOT on the buttons inside the card — in a component whose whole
+ * selling point is that the consuming app themes it.
+ *
+ * They take `chrome` now, which is why they are functions rather than
+ * constants: there is no correct value to compute before the palette is known.
+ */
+/**
+ * The intensity circle — 46px, and every one of the eleven takes it.
+ *
+ * THE SIZE IS NOT A DESIGN CHOICE, it is the sibling's. Measured while making
+ * these round: the 2D renderer's `.bmap__i` is 38px and **46px on touch**; this
+ * renderer's were **30px with no touch override at all**. F052.8 set a >=44px
+ * floor for this component because a phone is its primary surface, and F052.11
+ * made accessibility a legal duty here — so the 3D half had been under the floor
+ * since it shipped, and the two halves had quietly diverged.
+ *
+ * Same shape as F052.32's tap guard: 2D correct, 3D not, nobody looking. Asking
+ * for circles is what surfaced it — the second time this week that making
+ * something explicit uncovered a defect that was already there (F052.30's accent
+ * was the first).
+ *
+ * 46 rather than 44 so the two renderers carry ONE number instead of two that
+ * both happen to pass. The widest label («10») fits at the shipped font size,
+ * and all eleven take the same box so none is an ellipse among circles.
+ */
+declare const INTENSITY_SIZE = 46;
+/**
+ * F052.33 — should the help note be on screen at all?
+ *
+ * Extracted because the renderer's own answer is unreachable from a unit test:
+ * happy-dom has no WebGL, so no region can be selected, and a test written
+ * against the component asserts the note is PRESENT twice and never that it
+ * disappears. I wrote that test and it was green and vacuous.
+ *
+ * `openRegion` wins over everything. A note reading «tap a body part» while the
+ * picker is open is wrong advice, not a layering problem — and it was covering
+ * the panel's close control, the third exit hidden under something this week.
+ */
+declare function shouldShowHint(opts: {
+    openRegion: string | null;
+    hint: false | BodyMap3DHint | undefined;
+    anySelectable: boolean;
+    hasExplicitHoverHint: boolean;
+}): boolean;
 declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
 
-export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };
+export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, INTENSITY_SIZE, TAP_MAX_DISTANCE, ensureNormals, isTap, seamBlend, seamWeight, serializeReport, shouldShowHint };

package/dist/three.d.ts

@@ -260,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;
@@ -351,6 +371,56 @@ interface BodyMap3DProps {
     haptics?: boolean;
     className?: string;
 }
+/**
+ * F052.30 — the controls now READ THE PALETTE.
+ *
+ * These were module-level constants with the colours written in: #e2e8f0 border,
+ * #fff surface, #0e8f8a accent. Three of those already existed as `chrome`
+ * fields and were simply not used, so a consumer who set `ui.border` saw it on
+ * the card and NOT on the buttons inside the card — in a component whose whole
+ * selling point is that the consuming app themes it.
+ *
+ * They take `chrome` now, which is why they are functions rather than
+ * constants: there is no correct value to compute before the palette is known.
+ */
+/**
+ * The intensity circle — 46px, and every one of the eleven takes it.
+ *
+ * THE SIZE IS NOT A DESIGN CHOICE, it is the sibling's. Measured while making
+ * these round: the 2D renderer's `.bmap__i` is 38px and **46px on touch**; this
+ * renderer's were **30px with no touch override at all**. F052.8 set a >=44px
+ * floor for this component because a phone is its primary surface, and F052.11
+ * made accessibility a legal duty here — so the 3D half had been under the floor
+ * since it shipped, and the two halves had quietly diverged.
+ *
+ * Same shape as F052.32's tap guard: 2D correct, 3D not, nobody looking. Asking
+ * for circles is what surfaced it — the second time this week that making
+ * something explicit uncovered a defect that was already there (F052.30's accent
+ * was the first).
+ *
+ * 46 rather than 44 so the two renderers carry ONE number instead of two that
+ * both happen to pass. The widest label («10») fits at the shipped font size,
+ * and all eleven take the same box so none is an ellipse among circles.
+ */
+declare const INTENSITY_SIZE = 46;
+/**
+ * F052.33 — should the help note be on screen at all?
+ *
+ * Extracted because the renderer's own answer is unreachable from a unit test:
+ * happy-dom has no WebGL, so no region can be selected, and a test written
+ * against the component asserts the note is PRESENT twice and never that it
+ * disappears. I wrote that test and it was green and vacuous.
+ *
+ * `openRegion` wins over everything. A note reading «tap a body part» while the
+ * picker is open is wrong advice, not a layering problem — and it was covering
+ * the panel's close control, the third exit hidden under something this week.
+ */
+declare function shouldShowHint(opts: {
+    openRegion: string | null;
+    hint: false | BodyMap3DHint | undefined;
+    anySelectable: boolean;
+    hasExplicitHoverHint: boolean;
+}): boolean;
 declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
 
-export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };
+export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, INTENSITY_SIZE, TAP_MAX_DISTANCE, ensureNormals, isTap, seamBlend, seamWeight, serializeReport, shouldShowHint };

package/dist/three.js

@@ -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();
@@ -285,6 +289,12 @@ function webglAvailable() {
     return false;
   }
 }
+var INTENSITY_SIZE = 46;
+function shouldShowHint(opts) {
+  if (opts.openRegion) return false;
+  if (opts.hint === false) return false;
+  return opts.anySelectable || opts.hasExplicitHoverHint;
+}
 var btn = (c) => ({
   font: "inherit",
   cursor: "pointer",
@@ -573,12 +583,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;
@@ -590,7 +599,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);
@@ -680,7 +689,12 @@ 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 = hint === false ? false : anySelectable || ui?.hoverHint !== void 0;
+  const showEmptyHint = shouldShowHint({
+    openRegion: selected,
+    hint,
+    anySelectable,
+    hasExplicitHoverHint: ui?.hoverHint !== void 0
+  });
   const hintText = (hint ? hint.text : void 0) ?? UI.hoverHint;
   const hintAtStage = isFullscreen && !!hint && hint.placement === "stage-bottom";
   return /* @__PURE__ */ jsxs(
@@ -788,13 +802,23 @@ function BodyMap3D(props) {
                   "data-testid": "bodymap3d-close",
                   "aria-label": L.close,
                   onClick: () => setSelected(null),
-                  style: { ...btn(chrome), width: 32, height: 32, padding: 0, fontSize: 20, lineHeight: 1, color: chrome.mutedText, borderColor: chrome.border, background: chrome.panelBg },
+                  style: { ...btn(chrome), width: 40, height: 40, minWidth: 40, padding: 0, borderRadius: "50%", 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(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: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12 }, children: Array.from({ length: 11 }, (_, i) => (
+              /* F052.34 — CIRCLES, and all eleven the same size.
+                 Dimensioned by «10», the widest label: sizing by the average
+                 would make the two-digit one an ellipse among circles, which
+                 is worse than eleven rounded squares because the odd one out
+                 becomes a different SHAPE rather than slightly wider.
+                 46px is the SIBLING's touch size, not a new number: the 2D
+                 renderer already used it and this one was on 30px, under the
+                 >=44px floor F052.8 set. See INTENSITY_SIZE. */
+              /* @__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", width: INTENSITY_SIZE, height: INTENSITY_SIZE, minWidth: INTENSITY_SIZE, padding: 0, borderRadius: "50%", 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(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 })
@@ -830,6 +854,6 @@ function BodyMap3D(props) {
   );
 }
 
-export { BodyMap3D, ensureNormals, seamBlend, seamWeight, serializeReport };
+export { BodyMap3D, INTENSITY_SIZE, TAP_MAX_DISTANCE, ensureNormals, isTap, seamBlend, seamWeight, serializeReport, shouldShowHint };
 //# sourceMappingURL=three.js.map
 //# sourceMappingURL=three.js.map