@broberg/bodymap 0.13.3 → 0.14.0

package/README.md

@@ -274,6 +274,14 @@ this component's primary surface. A `position: fixed; inset: 0` overlay behaves
 identically on every platform, needs no user-gesture dance, and cannot leave you
 with a control that silently does nothing on the one device that matters most.
 
+**On a narrow screen the panel goes UNDER the body (0.14.0).** Side by side needs
+`FS_ROW_MIN` (838px) of content width. Below that, fullscreen stacks: the body
+shrinks to what the panel leaves (never under 160px) and the panel sits on screen
+beneath it. Before 0.14.0 the panel wrapped below a full-height canvas — on an
+iPhone every intensity button sat under the bottom edge, so a patient could mark
+a body part and not say how much it hurt. Wider than 838px, nothing changed.
+`stackInFullscreen(width)` is exported if you need the same decision.
+
 ### It ships with a `ResizeObserver`, and that is not incidental
 
 Before 0.6.0 the canvas measured the element **once at mount** and only re-measured

package/dist/three.cjs

@@ -313,6 +313,10 @@ function webglAvailable() {
 }
 var INTENSITY_SIZE = 46;
 var TOUCH_MIN = 44;
+var FS_ROW_MIN = 520 + 18 + 300;
+function stackInFullscreen(contentWidth) {
+  return contentWidth < FS_ROW_MIN;
+}
 function shouldShowHint(opts) {
   if (opts.openRegion) return false;
   if (opts.hint === false) return false;
@@ -405,6 +409,17 @@ function BodyMap3D(props) {
     onFullscreenChange?.(v);
   };
   const apiRef = react.useRef(null);
+  const rowRef = react.useRef(null);
+  const [rowWidth, setRowWidth] = react.useState(0);
+  react.useEffect(() => {
+    const el = rowRef.current;
+    if (!isFullscreen || !el) return;
+    setRowWidth(el.clientWidth);
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => setRowWidth(el.clientWidth)) : null;
+    ro?.observe(el);
+    return () => ro?.disconnect();
+  }, [isFullscreen]);
+  const stacked = isFullscreen && stackInFullscreen(rowWidth);
   react.useEffect(() => {
     if (!webglAvailable()) {
       setUnsupported(true);
@@ -783,70 +798,90 @@ function BodyMap3D(props) {
             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: 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,
-              "data-testid": "bodymap3d-canvas",
-              style: {
-                flex: "1 1 520px",
-                // In fullscreen the box takes the height it is GIVEN rather than a
-                // fixed `canvasHeight`; the ResizeObserver above is what makes the
-                // picture follow it.
-                height: isFullscreen ? "100%" : canvasH,
-                minWidth: 320,
-                minHeight: isFullscreen ? 0 : void 0,
-                borderRadius: 16,
-                overflow: "hidden",
-                background: chrome.stageBg,
-                touchAction: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: "1 1 300px", minWidth: 260 }, children: region ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: 16 }, children: nameOf(region.key) }),
-              showRegionCode && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "bodymap3d-region-code", style: { font: "11px ui-monospace, monospace", color: chrome.mutedText, background: chrome.badgeBg, borderRadius: 6, padding: "2px 7px" }, children: [
-                region.code,
-                region.side ? " \xB7 " + region.side : ""
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: rowRef,
+            "data-layout": stacked ? "stacked" : void 0,
+            style: {
+              display: "flex",
+              gap: 18,
+              alignItems: "flex-start",
+              flexWrap: "wrap",
+              ...isFullscreen ? { flex: "1 1 auto", minHeight: 0 } : null,
+              // F052.35 — a column that never wraps: the stage takes what the panel
+              // leaves, so the panel is always inside the screen.
+              ...stacked ? { flexDirection: "column", flexWrap: "nowrap", alignItems: "stretch", gap: 12 } : null
+            },
+            children: [
+              unsupported ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  type: "button",
-                  "data-testid": "bodymap3d-close",
-                  "aria-label": L.close,
-                  onClick: () => setSelected(null),
-                  style: { ...btn(chrome), width: TOUCH_MIN, height: TOUCH_MIN, minWidth: TOUCH_MIN, padding: 0, borderRadius: "50%", fontSize: 20, lineHeight: 1, color: chrome.mutedText, borderColor: chrome.border, background: chrome.panelBg },
-                  children: "\xD7"
+                  "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", { 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) => (
-              /* 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 })
-          ] }) : showEmptyHint && !hintAtStage ? /* @__PURE__ */ jsxRuntime.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: hintText }) : null })
-        ] }),
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: mountRef,
+                  "data-testid": "bodymap3d-canvas",
+                  style: {
+                    flex: "1 1 520px",
+                    // In fullscreen the box takes the height it is GIVEN rather than a
+                    // fixed `canvasHeight`; the ResizeObserver above is what makes the
+                    // picture follow it.
+                    height: isFullscreen ? "100%" : canvasH,
+                    minWidth: 320,
+                    minHeight: isFullscreen ? 0 : void 0,
+                    // Stacked: the stage fills what is left above the panel, and
+                    // keeps a floor so the body never disappears behind it.
+                    ...stacked ? { flex: "1 1 0", height: "auto", minWidth: 0, minHeight: 160 } : null,
+                    borderRadius: 16,
+                    overflow: "hidden",
+                    background: chrome.stageBg,
+                    touchAction: "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "bodymap3d-panel-col", style: { flex: "1 1 300px", minWidth: 260, ...stacked ? { flex: "0 1 auto", minWidth: 0, minHeight: 0, overflowY: "auto" } : null }, children: region ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: 16 }, children: nameOf(region.key) }),
+                  showRegionCode && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "bodymap3d-region-code", style: { font: "11px ui-monospace, monospace", color: chrome.mutedText, background: chrome.badgeBg, borderRadius: 6, padding: "2px 7px" }, children: [
+                    region.code,
+                    region.side ? " \xB7 " + region.side : ""
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-testid": "bodymap3d-close",
+                      "aria-label": L.close,
+                      onClick: () => setSelected(null),
+                      style: { ...btn(chrome), width: TOUCH_MIN, height: TOUCH_MIN, minWidth: TOUCH_MIN, 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) => (
+                  /* 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 })
+              ] }) : showEmptyHint && !hintAtStage ? /* @__PURE__ */ jsxRuntime.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: hintText }) : null })
+            ]
+          }
+        ),
         showEmptyHint && hintAtStage && /* F052.31 — pinned INSIDE the fullscreen surface, not in the column that
            wraps beneath a full-height canvas. That wrap is what put the note at
            858-912 in an 852px window on a real iPhone: entirely offscreen, and
@@ -878,6 +913,7 @@ function BodyMap3D(props) {
 }
 
 exports.BodyMap3D = BodyMap3D;
+exports.FS_ROW_MIN = FS_ROW_MIN;
 exports.INTENSITY_SIZE = INTENSITY_SIZE;
 exports.TAP_MAX_DISTANCE = TAP_MAX_DISTANCE;
 exports.TOUCH_MIN = TOUCH_MIN;
@@ -887,5 +923,6 @@ exports.seamBlend = seamBlend;
 exports.seamWeight = seamWeight;
 exports.serializeReport = serializeReport;
 exports.shouldShowHint = shouldShowHint;
+exports.stackInFullscreen = stackInFullscreen;
 //# sourceMappingURL=three.cjs.map
 //# sourceMappingURL=three.cjs.map