@broberg/bodymap 0.13.3 → 0.14.0

package/dist/three.d.cts

@@ -404,6 +404,18 @@ declare const INTENSITY_SIZE = 46;
  * takes exactly this. INTENSITY_SIZE sits above it.
  */
 declare const TOUCH_MIN = 44;
+/**
+ * F052.35 — whether fullscreen must STACK the panel under the stage instead of
+ * beside it. The row lays the canvas (basis 520) and the panel (basis 300) side
+ * by side with an 18px gap and wraps when they do not fit — and in fullscreen
+ * the canvas is the full height, so a wrapped panel lands entirely below the
+ * screen. Measured on iphone-15 (369px of content): every intensity button and
+ * the close sat at top >= innerHeight, so a patient could mark a body part and
+ * not say how much it hurt. Stacking shrinks the stage instead, and the panel
+ * stays on screen. Pure so the threshold is asserted without a browser.
+ */
+declare const FS_ROW_MIN: number;
+declare function stackInFullscreen(contentWidth: number): boolean;
 /**
  * F052.33 — should the help note be on screen at all?
  *
@@ -424,4 +436,4 @@ declare function shouldShowHint(opts: {
 }): boolean;
 declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
 
-export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, INTENSITY_SIZE, TAP_MAX_DISTANCE, TOUCH_MIN, ensureNormals, isTap, seamBlend, seamWeight, serializeReport, shouldShowHint };
+export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, FS_ROW_MIN, INTENSITY_SIZE, TAP_MAX_DISTANCE, TOUCH_MIN, ensureNormals, isTap, seamBlend, seamWeight, serializeReport, shouldShowHint, stackInFullscreen };

package/dist/three.d.ts

@@ -404,6 +404,18 @@ declare const INTENSITY_SIZE = 46;
  * takes exactly this. INTENSITY_SIZE sits above it.
  */
 declare const TOUCH_MIN = 44;
+/**
+ * F052.35 — whether fullscreen must STACK the panel under the stage instead of
+ * beside it. The row lays the canvas (basis 520) and the panel (basis 300) side
+ * by side with an 18px gap and wraps when they do not fit — and in fullscreen
+ * the canvas is the full height, so a wrapped panel lands entirely below the
+ * screen. Measured on iphone-15 (369px of content): every intensity button and
+ * the close sat at top >= innerHeight, so a patient could mark a body part and
+ * not say how much it hurt. Stacking shrinks the stage instead, and the panel
+ * stays on screen. Pure so the threshold is asserted without a browser.
+ */
+declare const FS_ROW_MIN: number;
+declare function stackInFullscreen(contentWidth: number): boolean;
 /**
  * F052.33 — should the help note be on screen at all?
  *
@@ -424,4 +436,4 @@ declare function shouldShowHint(opts: {
 }): boolean;
 declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
 
-export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, INTENSITY_SIZE, TAP_MAX_DISTANCE, TOUCH_MIN, ensureNormals, isTap, seamBlend, seamWeight, serializeReport, shouldShowHint };
+export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, FS_ROW_MIN, INTENSITY_SIZE, TAP_MAX_DISTANCE, TOUCH_MIN, ensureNormals, isTap, seamBlend, seamWeight, serializeReport, shouldShowHint, stackInFullscreen };

package/dist/three.js

@@ -291,6 +291,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;
@@ -383,6 +387,17 @@ function BodyMap3D(props) {
     onFullscreenChange?.(v);
   };
   const apiRef = useRef(null);
+  const rowRef = useRef(null);
+  const [rowWidth, setRowWidth] = useState(0);
+  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);
   useEffect(() => {
     if (!webglAvailable()) {
       setUnsupported(true);
@@ -761,70 +776,90 @@ function BodyMap3D(props) {
             children: isFullscreen ? "\xD7" : UI.expand ?? "Expand"
           }
         ) }),
-        /* @__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: 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,
-              "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__ */ jsx("div", { style: { flex: "1 1 300px", minWidth: 260 }, children: region ? /* @__PURE__ */ jsxs("div", { style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg }, children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
-              /* @__PURE__ */ jsx("b", { style: { fontSize: 16 }, children: nameOf(region.key) }),
-              showRegionCode && /* @__PURE__ */ 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__ */ jsx(
-                "button",
+        /* @__PURE__ */ 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__ */ 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__ */ 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) => (
-              /* 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 })
-          ] }) : showEmptyHint && !hintAtStage ? /* @__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: hintText }) : null })
-        ] }),
+              ) : /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg }, children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
+                  /* @__PURE__ */ jsx("b", { style: { fontSize: 16 }, children: nameOf(region.key) }),
+                  showRegionCode && /* @__PURE__ */ 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__ */ 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__ */ 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) => (
+                  /* 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 })
+              ] }) : showEmptyHint && !hintAtStage ? /* @__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: 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
@@ -855,6 +890,6 @@ function BodyMap3D(props) {
   );
 }
 
-export { BodyMap3D, INTENSITY_SIZE, TAP_MAX_DISTANCE, TOUCH_MIN, ensureNormals, isTap, seamBlend, seamWeight, serializeReport, shouldShowHint };
+export { BodyMap3D, FS_ROW_MIN, INTENSITY_SIZE, TAP_MAX_DISTANCE, TOUCH_MIN, ensureNormals, isTap, seamBlend, seamWeight, serializeReport, shouldShowHint, stackInFullscreen };
 //# sourceMappingURL=three.js.map
 //# sourceMappingURL=three.js.map