@broberg/bodymap 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/three.d.cts CHANGED
@@ -205,6 +205,16 @@ interface BodyMap3DUiLabels {
205
205
  female: string;
206
206
  hoverHint: string;
207
207
  }
208
+ interface BodyMap3DHint {
209
+ /** Overrides the localized default. `ui.hoverHint` still works too. */
210
+ text?: string;
211
+ /**
212
+ * `after-canvas` (default) keeps today's flow position.
213
+ * `stage-bottom` pins it inside the fullscreen surface, above the home
214
+ * indicator — and falls back to the flow position when not fullscreen.
215
+ */
216
+ placement?: "after-canvas" | "stage-bottom";
217
+ }
208
218
  /**
209
219
  * How much of the RUNNER-UP region bleeds into this vertex (F052.21).
210
220
  *
@@ -265,6 +275,24 @@ interface BodyMap3DProps {
265
275
  palette?: BodymapPalette;
266
276
  locale?: BodyMapLocale;
267
277
  labels?: Partial<BodyMapLabels>;
278
+ /**
279
+ * The help note under the body. F052.31.
280
+ *
281
+ * `false` renders NOTHING — no box, no border, no empty element. That path did
282
+ * not exist before: `ui.hoverHint = ""` produced an empty bordered box, which
283
+ * is worse than the sentence it replaced.
284
+ *
285
+ * `placement` is what fixes the defect rather than moving it. In the boxed
286
+ * layout the note belongs after the canvas; in FULLSCREEN that column wraps
287
+ * beneath a full-height canvas and the note lands past the bottom edge —
288
+ * measured by a consumer at 858-912 in an 852px window, i.e. entirely
289
+ * offscreen. `stage-bottom` anchors it inside the fullscreen surface instead,
290
+ * clear of the home indicator.
291
+ *
292
+ * A consumer cannot make that call in CSS without knowing our internal
293
+ * structure, which is exactly why two of them had to write wedges against it.
294
+ */
295
+ hint?: false | BodyMap3DHint;
268
296
  /** Override the 3D-only control strings (male/female/hoverHint). */
269
297
  ui?: Partial<BodyMap3DUiLabels>;
270
298
  defaultSex?: BodyMap3DSex;
@@ -325,4 +353,4 @@ interface BodyMap3DProps {
325
353
  }
326
354
  declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
327
355
 
328
- export { BodyMap3D, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };
356
+ export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };
package/dist/three.d.ts CHANGED
@@ -205,6 +205,16 @@ interface BodyMap3DUiLabels {
205
205
  female: string;
206
206
  hoverHint: string;
207
207
  }
208
+ interface BodyMap3DHint {
209
+ /** Overrides the localized default. `ui.hoverHint` still works too. */
210
+ text?: string;
211
+ /**
212
+ * `after-canvas` (default) keeps today's flow position.
213
+ * `stage-bottom` pins it inside the fullscreen surface, above the home
214
+ * indicator — and falls back to the flow position when not fullscreen.
215
+ */
216
+ placement?: "after-canvas" | "stage-bottom";
217
+ }
208
218
  /**
209
219
  * How much of the RUNNER-UP region bleeds into this vertex (F052.21).
210
220
  *
@@ -265,6 +275,24 @@ interface BodyMap3DProps {
265
275
  palette?: BodymapPalette;
266
276
  locale?: BodyMapLocale;
267
277
  labels?: Partial<BodyMapLabels>;
278
+ /**
279
+ * The help note under the body. F052.31.
280
+ *
281
+ * `false` renders NOTHING — no box, no border, no empty element. That path did
282
+ * not exist before: `ui.hoverHint = ""` produced an empty bordered box, which
283
+ * is worse than the sentence it replaced.
284
+ *
285
+ * `placement` is what fixes the defect rather than moving it. In the boxed
286
+ * layout the note belongs after the canvas; in FULLSCREEN that column wraps
287
+ * beneath a full-height canvas and the note lands past the bottom edge —
288
+ * measured by a consumer at 858-912 in an 852px window, i.e. entirely
289
+ * offscreen. `stage-bottom` anchors it inside the fullscreen surface instead,
290
+ * clear of the home indicator.
291
+ *
292
+ * A consumer cannot make that call in CSS without knowing our internal
293
+ * structure, which is exactly why two of them had to write wedges against it.
294
+ */
295
+ hint?: false | BodyMap3DHint;
268
296
  /** Override the 3D-only control strings (male/female/hoverHint). */
269
297
  ui?: Partial<BodyMap3DUiLabels>;
270
298
  defaultSex?: BodyMap3DSex;
@@ -325,4 +353,4 @@ interface BodyMap3DProps {
325
353
  }
326
354
  declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
327
355
 
328
- export { BodyMap3D, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };
356
+ export { BodyMap3D, type BodyMap3DHint, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, ensureNormals, seamBlend, seamWeight, serializeReport };
package/dist/three.js CHANGED
@@ -212,8 +212,8 @@ var LABELS_EN = {
212
212
  zoomOut: "Zoom out",
213
213
  zoomReset: "Reset zoom"
214
214
  };
215
- var UI_DA = { male: "Mand", female: "Kvinde", hoverHint: "Hover for at fremh\xE6ve \xB7 klik en kropsdel for at markere smerte.", expand: "Vis stor", collapse: "Luk stor visning" };
216
- var UI_EN = { male: "Male", female: "Female", hoverHint: "Hover to highlight \xB7 tap a body part to mark pain.", expand: "Expand", collapse: "Close" };
215
+ var UI_DA = { male: "Mand", female: "Kvinde", hoverHint: "Tr\xE6k for at dreje \xB7 tryk en kropsdel for at markere smerte.", expand: "Vis stor", collapse: "Luk stor visning" };
216
+ var UI_EN = { male: "Male", female: "Female", hoverHint: "Drag to rotate \xB7 tap a body part to mark pain.", expand: "Expand", collapse: "Close" };
217
217
  var ANCHORS = {
218
218
  head: [0, 1.79, 0.02],
219
219
  neck: [0, 1.57, 0],
@@ -320,6 +320,7 @@ function BodyMap3D(props) {
320
320
  onFeedback,
321
321
  haptics,
322
322
  seam = false,
323
+ hint,
323
324
  fullscreen: fullscreenProp,
324
325
  onFullscreenChange,
325
326
  showFullscreenButton = true,
@@ -679,7 +680,9 @@ function BodyMap3D(props) {
679
680
  const region = selected ? REGIONS.find((r) => r.key === selected) : null;
680
681
  const current = selected ? pointOf(selected) : void 0;
681
682
  const anySelectable = REGIONS.some((r) => isSelectable(r.key, config ?? {}));
682
- const showEmptyHint = anySelectable || ui?.hoverHint !== void 0;
683
+ const showEmptyHint = hint === false ? false : anySelectable || ui?.hoverHint !== void 0;
684
+ const hintText = (hint ? hint.text : void 0) ?? UI.hoverHint;
685
+ const hintAtStage = isFullscreen && !!hint && hint.placement === "stage-bottom";
683
686
  return /* @__PURE__ */ jsxs(
684
687
  "div",
685
688
  {
@@ -795,8 +798,33 @@ function BodyMap3D(props) {
795
798
  /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.quality }),
796
799
  /* @__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)) }),
797
800
  current && /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn(chrome), color: chrome.danger, borderColor: chrome.dangerBorder }, children: L.remove })
798
- ] }) : 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 })
799
- ] })
801
+ ] }) : 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 })
802
+ ] }),
803
+ showEmptyHint && hintAtStage && /* F052.31 — pinned INSIDE the fullscreen surface, not in the column that
804
+ wraps beneath a full-height canvas. That wrap is what put the note at
805
+ 858-912 in an 852px window on a real iPhone: entirely offscreen, and
806
+ it reads as a bug in the consumer's app rather than in ours.
807
+ The bottom inset clears the home indicator, exactly as the exit
808
+ control's does (F052.27). */
809
+ /* @__PURE__ */ jsx(
810
+ "div",
811
+ {
812
+ "data-testid": "bodymap3d-empty",
813
+ "data-placement": "stage-bottom",
814
+ style: {
815
+ flex: "0 0 auto",
816
+ marginTop: 12,
817
+ marginBottom: "env(safe-area-inset-bottom)",
818
+ border: `1px solid ${chrome.border}`,
819
+ borderRadius: 14,
820
+ padding: 16,
821
+ background: chrome.panelBg,
822
+ color: chrome.mutedText,
823
+ fontSize: 13.5
824
+ },
825
+ children: hintText
826
+ }
827
+ )
800
828
  ]
801
829
  }
802
830
  );