@broberg/bodymap 0.7.0 → 0.8.0

package/dist/three.cjs

@@ -103,10 +103,12 @@ 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"
@@ -268,6 +270,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) {
@@ -353,6 +363,8 @@ function BodyMap3D(props) {
   setReadyRef.current = setReady;
   const seamRef = react.useRef(seam);
   seamRef.current = seam;
+  const stageRef = react.useRef(chrome.stageBg);
+  stageRef.current = chrome.stageBg;
   const [internalFs, setInternalFs] = react.useState(false);
   const isFullscreen = fullscreenProp ?? internalFs;
   const setFullscreen = (v) => {
@@ -369,7 +381,7 @@ function BodyMap3D(props) {
     if (!el) return;
     let W = el.clientWidth || 520, H = el.clientHeight || 600;
     const scene = new THREE__namespace.Scene();
-    scene.background = new THREE__namespace.Color(922660);
+    scene.background = new THREE__namespace.Color(stageRef.current);
     const camera = new THREE__namespace.PerspectiveCamera(32, W / H, 0.1, 100);
     camera.position.set(0, 1.05, 4.4);
     let renderer;
@@ -452,7 +464,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);
@@ -462,6 +474,7 @@ function BodyMap3D(props) {
       colorAttr.needsUpdate = true;
     };
     const refresh = () => {
+      scene.background = new THREE__namespace.Color(stageRef.current);
       paint();
       renderFrame();
     };
@@ -486,7 +499,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);
@@ -684,8 +697,23 @@ function BodyMap3D(props) {
           position: "fixed",
           inset: 0,
           zIndex: 2147483e3,
-          background: chrome.panelBg,
-          padding: 12,
+          // 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
+          // on a real iPhone: the owner could not read the button or get
+          // out, and Escape does not exist on a phone. Every side gets its
+          // safe-area inset, bottom included — the home indicator covers
+          // content just as effectively.
+          paddingTop: "calc(12px + env(safe-area-inset-top))",
+          paddingBottom: "calc(12px + env(safe-area-inset-bottom))",
+          paddingLeft: "calc(12px + env(safe-area-inset-left))",
+          paddingRight: "calc(12px + env(safe-area-inset-right))",
           display: "flex",
           flexDirection: "column",
           overflow: "auto"
@@ -706,12 +734,25 @@ function BodyMap3D(props) {
             "aria-pressed": isFullscreen,
             "aria-label": isFullscreen ? UI.collapse ?? "Close" : UI.expand ?? "Expand",
             onClick: () => setFullscreen(!isFullscreen),
-            style: { ...btn, color: chrome.text, borderColor: chrome.border, background: chrome.panelBg },
-            children: isFullscreen ? UI.collapse ?? "Close" : UI.expand ?? "Expand"
+            style: {
+              ...btn,
+              color: chrome.text,
+              borderColor: chrome.border,
+              background: chrome.panelBg,
+              ...isFullscreen ? { width: 40, height: 40, padding: 0, fontSize: 22, lineHeight: 1 } : null
+            },
+            children: isFullscreen ? "\xD7" : UI.expand ?? "Expand"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap", ...isFullscreen ? { flex: "1 1 auto", minHeight: 0 } : null }, children: [
-          unsupported ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          unsupported ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "div",
             {
               ref: mountRef,
@@ -726,7 +767,7 @@ function BodyMap3D(props) {
                 minHeight: isFullscreen ? 0 : void 0,
                 borderRadius: 16,
                 overflow: "hidden",
-                background: "#0e1424",
+                background: chrome.stageBg,
                 touchAction: "none"
               }
             }
@@ -763,7 +804,9 @@ function BodyMap3D(props) {
 }
 
 exports.BodyMap3D = BodyMap3D;
+exports.ensureNormals = ensureNormals;
 exports.seamBlend = seamBlend;
+exports.seamWeight = seamWeight;
 exports.serializeReport = serializeReport;
 //# sourceMappingURL=three.cjs.map
 //# sourceMappingURL=three.cjs.map