@broberg/bodymap 0.11.0 → 0.12.0

package/dist/three.d.cts

@@ -371,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, TAP_MAX_DISTANCE, ensureNormals, isTap, 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

@@ -371,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, TAP_MAX_DISTANCE, ensureNormals, isTap, 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

@@ -289,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",
@@ -683,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(
@@ -791,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 })
@@ -833,6 +854,6 @@ function BodyMap3D(props) {
   );
 }
 
-export { BodyMap3D, TAP_MAX_DISTANCE, ensureNormals, isTap, seamBlend, seamWeight, serializeReport };
+export { BodyMap3D, INTENSITY_SIZE, TAP_MAX_DISTANCE, ensureNormals, isTap, seamBlend, seamWeight, serializeReport, shouldShowHint };
 //# sourceMappingURL=three.js.map
 //# sourceMappingURL=three.js.map