@broberg/bodymap 0.7.1 → 0.9.0

package/dist/three.d.cts

@@ -97,14 +97,41 @@ interface BodymapUiColors {
     text?: string;
     /** Secondary text — section labels, the empty-state hint. */
     mutedText?: string;
-    /** Panel background. */
+    /** Panel background — the card, its buttons, the empty hint. */
     panelBg?: string;
+    /**
+     * THE STAGE: the fullscreen backdrop, the canvas frame, and the three.js
+     * scene behind the body. A different surface from `panelBg` with an opposite
+     * need — see F052.29, where one field paints both and no value is right for
+     * either.
+     *
+     * 3D only. The 2D renderer has no canvas and no fullscreen, so it ignores
+     * this; it is declared here because a stage is a shared idea, not because
+     * every renderer has one.
+     *
+     * Defaults to {@link STAGE_BG}. Pass `'#fff'` for the pre-0.8.0 white
+     * fullscreen backdrop.
+     */
+    stageBg?: string;
     /** Panel + control borders. */
     border?: string;
     /** Background behind the region-code badge. */
     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". */
@@ -193,6 +220,40 @@ interface BodyMap3DUiLabels {
  * PainReport is unchanged.
  */
 declare function seamBlend(nearestSq: number, secondSq: number): number;
+/**
+ * F052.23 — how much of the NEIGHBOUR region's colour a vertex takes.
+ *
+ * Extracted from the paint loop for one reason: happy-dom cannot run WebGL, so
+ * the fix that put the seam blend behind an opt-in had no automated guard at
+ * all. A regression here is a WCAG failure on a public-health surface (measured:
+ * 4.71:1 without the blend, 3.59:1 with it, averaged over a small mark), which
+ * is not the kind of thing that should rely on someone re-measuring by hand.
+ *
+ * The invariant worth asserting is not "off returns 0 for this blend value" —
+ * it is that off returns 0 for EVERY blend value, so the shipped default can
+ * never mix body colour into a mark.
+ */
+declare function seamWeight(seamEnabled: boolean, blend: number): number;
+/**
+ * F052.25 — recompute vertex normals ONLY when the file shipped none.
+ *
+ * Same reason as above: this single condition WAS the "lines on the body" bug,
+ * and it lived on the one code path the unit suite cannot execute. Takes a
+ * structural slice rather than a THREE.BufferGeometry so it is testable without
+ * a GL context.
+ *
+ * It performs the call as well as the check, deliberately. A predicate alone
+ * would let a test pass while the call site did the opposite with it — and what
+ * the acceptance criterion asks for is the EFFECT: a model that ships normals
+ * must come out the other side with those same normals, untouched.
+ *
+ * Returns true when it computed (the model had none, and would otherwise render
+ * flat), false when it left the authored normals alone.
+ */
+declare function ensureNormals(geo: {
+    getAttribute(name: string): unknown;
+    computeVertexNormals(): void;
+}): boolean;
 interface BodyMap3DProps {
     /** URLs of the male/female body GLBs (you host them; reference GLBs ship under `@broberg/bodymap/models/`). */
     models: BodyMap3DModels;
@@ -264,4 +325,4 @@ interface BodyMap3DProps {
 }
 declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
 
-export { BodyMap3D, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, seamBlend, serializeReport };
+export { BodyMap3D, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };

package/dist/three.d.ts

@@ -97,14 +97,41 @@ interface BodymapUiColors {
     text?: string;
     /** Secondary text — section labels, the empty-state hint. */
     mutedText?: string;
-    /** Panel background. */
+    /** Panel background — the card, its buttons, the empty hint. */
     panelBg?: string;
+    /**
+     * THE STAGE: the fullscreen backdrop, the canvas frame, and the three.js
+     * scene behind the body. A different surface from `panelBg` with an opposite
+     * need — see F052.29, where one field paints both and no value is right for
+     * either.
+     *
+     * 3D only. The 2D renderer has no canvas and no fullscreen, so it ignores
+     * this; it is declared here because a stage is a shared idea, not because
+     * every renderer has one.
+     *
+     * Defaults to {@link STAGE_BG}. Pass `'#fff'` for the pre-0.8.0 white
+     * fullscreen backdrop.
+     */
+    stageBg?: string;
     /** Panel + control borders. */
     border?: string;
     /** Background behind the region-code badge. */
     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". */
@@ -193,6 +220,40 @@ interface BodyMap3DUiLabels {
  * PainReport is unchanged.
  */
 declare function seamBlend(nearestSq: number, secondSq: number): number;
+/**
+ * F052.23 — how much of the NEIGHBOUR region's colour a vertex takes.
+ *
+ * Extracted from the paint loop for one reason: happy-dom cannot run WebGL, so
+ * the fix that put the seam blend behind an opt-in had no automated guard at
+ * all. A regression here is a WCAG failure on a public-health surface (measured:
+ * 4.71:1 without the blend, 3.59:1 with it, averaged over a small mark), which
+ * is not the kind of thing that should rely on someone re-measuring by hand.
+ *
+ * The invariant worth asserting is not "off returns 0 for this blend value" —
+ * it is that off returns 0 for EVERY blend value, so the shipped default can
+ * never mix body colour into a mark.
+ */
+declare function seamWeight(seamEnabled: boolean, blend: number): number;
+/**
+ * F052.25 — recompute vertex normals ONLY when the file shipped none.
+ *
+ * Same reason as above: this single condition WAS the "lines on the body" bug,
+ * and it lived on the one code path the unit suite cannot execute. Takes a
+ * structural slice rather than a THREE.BufferGeometry so it is testable without
+ * a GL context.
+ *
+ * It performs the call as well as the check, deliberately. A predicate alone
+ * would let a test pass while the call site did the opposite with it — and what
+ * the acceptance criterion asks for is the EFFECT: a model that ships normals
+ * must come out the other side with those same normals, untouched.
+ *
+ * Returns true when it computed (the model had none, and would otherwise render
+ * flat), false when it left the authored normals alone.
+ */
+declare function ensureNormals(geo: {
+    getAttribute(name: string): unknown;
+    computeVertexNormals(): void;
+}): boolean;
 interface BodyMap3DProps {
     /** URLs of the male/female body GLBs (you host them; reference GLBs ship under `@broberg/bodymap/models/`). */
     models: BodyMap3DModels;
@@ -264,4 +325,4 @@ interface BodyMap3DProps {
 }
 declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
 
-export { BodyMap3D, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, seamBlend, serializeReport };
+export { BodyMap3D, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };

package/dist/three.js

@@ -81,13 +81,24 @@ function emitFeedback(outcome, region, opts = {}) {
   if (opts.haptics === false) return "skipped";
   return requestVibration(VIBRATION_PATTERNS[outcome], opts.nav);
 }
+var STAGE_BG = "#0e1424";
 var defaultUi = {
   text: "#1e293b",
   mutedText: "#475569",
   panelBg: "#fff",
+  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 ?? {} };
@@ -246,6 +257,14 @@ function seamBlend(nearestSq, secondSq) {
   if (t >= 1) return 0.5;
   return t * t * (3 - 2 * t) * 0.5;
 }
+function seamWeight(seamEnabled, blend) {
+  return seamEnabled ? blend : 0;
+}
+function ensureNormals(geo) {
+  if (geo.getAttribute("normal")) return false;
+  geo.computeVertexNormals();
+  return true;
+}
 var ANCHOR_KEYS = Object.keys(ANCHORS);
 for (const k of ANCHOR_KEYS) ANCHORS[k][0] = -ANCHORS[k][0];
 function mergeLabels(locale, overrides) {
@@ -266,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,
@@ -331,6 +362,8 @@ function BodyMap3D(props) {
   setReadyRef.current = setReady;
   const seamRef = useRef(seam);
   seamRef.current = seam;
+  const stageRef = useRef(chrome.stageBg);
+  stageRef.current = chrome.stageBg;
   const [internalFs, setInternalFs] = useState(false);
   const isFullscreen = fullscreenProp ?? internalFs;
   const setFullscreen = (v) => {
@@ -347,7 +380,7 @@ function BodyMap3D(props) {
     if (!el) return;
     let W = el.clientWidth || 520, H = el.clientHeight || 600;
     const scene = new THREE.Scene();
-    scene.background = new THREE.Color(922660);
+    scene.background = new THREE.Color(stageRef.current);
     const camera = new THREE.PerspectiveCamera(32, W / H, 0.1, 100);
     camera.position.set(0, 1.05, 4.4);
     let renderer;
@@ -430,7 +463,7 @@ function BodyMap3D(props) {
       };
       for (let i = 0; i < vertexRegion.length; i++) {
         tmp.copy(col(vertexRegion[i]));
-        const w = seamRef.current ? vertexBlend[i] : 0;
+        const w = seamWeight(seamRef.current, vertexBlend[i]);
         if (w > 0) {
           tmp2.copy(col(vertexNeighbour[i]));
           tmp.lerp(tmp2, w);
@@ -440,6 +473,7 @@ function BodyMap3D(props) {
       colorAttr.needsUpdate = true;
     };
     const refresh = () => {
+      scene.background = new THREE.Color(stageRef.current);
       paint();
       renderFrame();
     };
@@ -464,7 +498,7 @@ function BodyMap3D(props) {
         });
         if (bodyMesh) {
           const geo = bodyMesh.geometry;
-          if (!geo.getAttribute("normal")) geo.computeVertexNormals();
+          ensureNormals(geo);
           const pos = geo.getAttribute("position");
           const n = pos.count;
           const cols = new Float32Array(n * 3);
@@ -654,7 +688,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.
@@ -662,7 +696,12 @@ function BodyMap3D(props) {
           position: "fixed",
           inset: 0,
           zIndex: 2147483e3,
-          background: chrome.panelBg,
+          // THE STAGE, not the panel. This used to be `chrome.panelBg`,
+          // the same field that paints the picker card — so a consumer with
+          // a dark canvas got a white void around a dark body in fullscreen,
+          // and could not fix it: darkening panelBg hid the 0-10 buttons.
+          // One field, two surfaces, opposite needs. (F052.29)
+          background: chrome.stageBg,
           // F052.27 — a fixed inset:0 surface in a standalone/Capacitor
           // webview covers the STATUS BAR too, so a control laid out at the
           // top lands on the clock and the battery. Measured by fd-sundhed
@@ -681,8 +720,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" } }),
@@ -695,7 +734,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,
@@ -705,7 +744,14 @@ function BodyMap3D(props) {
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap", ...isFullscreen ? { flex: "1 1 auto", minHeight: 0 } : null }, children: [
-          unsupported ? /* @__PURE__ */ jsx("div", { "data-testid": "bodymap3d-unsupported", style: { flex: "1 1 520px", minWidth: 320, height: canvasH, borderRadius: 16, background: "#0e1424", color: "#cbd5e1", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, textAlign: "center", fontSize: 14 }, children: "3D kr\xE6ver WebGL, som ikke er tilg\xE6ngeligt her." }) : /* @__PURE__ */ jsx(
+          unsupported ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": "bodymap3d-unsupported",
+              style: { flex: "1 1 520px", minWidth: 320, height: canvasH, borderRadius: 16, background: chrome.panelBg, color: chrome.mutedText, border: `1px solid ${chrome.border}`, display: "flex", alignItems: "center", justifyContent: "center", padding: 24, textAlign: "center", fontSize: 14 },
+              children: "3D kr\xE6ver WebGL, som ikke er tilg\xE6ngeligt her."
+            }
+          ) : /* @__PURE__ */ jsx(
             "div",
             {
               ref: mountRef,
@@ -720,7 +766,7 @@ function BodyMap3D(props) {
                 minHeight: isFullscreen ? 0 : void 0,
                 borderRadius: 16,
                 overflow: "hidden",
-                background: "#0e1424",
+                background: chrome.stageBg,
                 touchAction: "none"
               }
             }
@@ -739,16 +785,16 @@ 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 })
+            /* @__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 })
         ] })
       ]
@@ -756,6 +802,6 @@ function BodyMap3D(props) {
   );
 }
 
-export { BodyMap3D, seamBlend, serializeReport };
+export { BodyMap3D, ensureNormals, seamBlend, seamWeight, serializeReport };
 //# sourceMappingURL=three.js.map
 //# sourceMappingURL=three.js.map