@broberg/bodymap 0.11.0 → 0.12.0

package/dist/three.cjs

@@ -311,6 +311,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",
@@ -705,7 +711,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__ */ jsxRuntime.jsxs(
@@ -813,13 +824,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__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.intensity }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12 }, children: Array.from({ length: 11 }, (_, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ 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 })
@@ -856,11 +877,13 @@ function BodyMap3D(props) {
 }
 
 exports.BodyMap3D = BodyMap3D;
+exports.INTENSITY_SIZE = INTENSITY_SIZE;
 exports.TAP_MAX_DISTANCE = TAP_MAX_DISTANCE;
 exports.ensureNormals = ensureNormals;
 exports.isTap = isTap;
 exports.seamBlend = seamBlend;
 exports.seamWeight = seamWeight;
 exports.serializeReport = serializeReport;
+exports.shouldShowHint = shouldShowHint;
 //# sourceMappingURL=three.cjs.map
 //# sourceMappingURL=three.cjs.map