@broberg/bodymap 0.2.0 → 0.2.2

package/dist/three.d.cts

@@ -131,6 +131,10 @@ interface BodyMap3DProps {
     ui?: Partial<BodyMap3DUiLabels>;
     defaultSex?: BodyMap3DSex;
     onSexChange?: (sex: BodyMap3DSex) => void;
+    /** Controlled body type — when set, the parent owns it (e.g. from the user's profile); `onSexChange` still fires. */
+    sex?: BodyMap3DSex;
+    /** Show the Male/Female toggle (default true). Set false when `sex` comes from a profile and the picker would just be noise. */
+    showSexToggle?: boolean;
     /** Slowly auto-rotate until the user interacts (default true). */
     autoRotate?: boolean;
     className?: string;

package/dist/three.d.ts

@@ -131,6 +131,10 @@ interface BodyMap3DProps {
     ui?: Partial<BodyMap3DUiLabels>;
     defaultSex?: BodyMap3DSex;
     onSexChange?: (sex: BodyMap3DSex) => void;
+    /** Controlled body type — when set, the parent owns it (e.g. from the user's profile); `onSexChange` still fires. */
+    sex?: BodyMap3DSex;
+    /** Show the Male/Female toggle (default true). Set false when `sex` comes from a profile and the picker would just be noise. */
+    showSexToggle?: boolean;
     /** Slowly auto-rotate until the user interacts (default true). */
     autoRotate?: boolean;
     className?: string;

package/dist/three.js

@@ -233,6 +233,8 @@ function BodyMap3D(props) {
     labels,
     ui,
     defaultSex = "male",
+    sex: sexProp,
+    showSexToggle = true,
     onSexChange,
     autoRotate = true,
     className
@@ -244,7 +246,8 @@ function BodyMap3D(props) {
   const loadedRef = useRef(null);
   const [unsupported, setUnsupported] = useState(false);
   const [ready, setReady] = useState(false);
-  const [sex, setSex] = useState(defaultSex);
+  const [internalSex, setInternalSex] = useState(defaultSex);
+  const sex = sexProp ?? internalSex;
   const [selected, setSelected] = useState(null);
   const [internal, setInternal] = useState(defaultValue ?? []);
   const report = value ?? internal;
@@ -262,6 +265,8 @@ function BodyMap3D(props) {
   configRef.current = config;
   const modelsRef = useRef(models);
   modelsRef.current = models;
+  const sexRef = useRef(sex);
+  sexRef.current = sex;
   const setSelectedRef = useRef(setSelected);
   setSelectedRef.current = setSelected;
   const setReadyRef = useRef(setReady);
@@ -407,7 +412,7 @@ function BodyMap3D(props) {
         }
       });
     };
-    loadModel(defaultSex);
+    loadModel(sexRef.current);
     apiRef.current = {
       setSex: (s) => {
         loadedRef.current?.removeAttribute("data-loaded");
@@ -499,7 +504,12 @@ function BodyMap3D(props) {
   useEffect(() => {
     apiRef.current?.refresh();
   }, [selected, report, palette]);
+  const sexInited = useRef(false);
   useEffect(() => {
+    if (!sexInited.current) {
+      sexInited.current = true;
+      return;
+    }
     apiRef.current?.setSex(sex);
   }, [sex]);
   const pointOf = (k) => report.find((p) => p.region === k);
@@ -511,13 +521,15 @@ function BodyMap3D(props) {
     setSelected(null);
   };
   const changeSex = (s) => {
-    setSex(s);
+    if (sexProp === void 0) setInternalSex(s);
     onSexChange?.(s);
   };
   const region = selected ? REGIONS.find((r) => r.key === selected) : null;
   const current = selected ? pointOf(selected) : void 0;
+  const anySelectable = REGIONS.some((r) => isSelectable(r.key, config ?? {}));
+  const showEmptyHint = anySelectable || ui?.hoverHint !== void 0;
   return /* @__PURE__ */ jsxs("div", { "data-testid": "bodymap3d-root", className, style: { fontFamily: "system-ui, sans-serif", color: "#1e293b" }, children: [
-    /* @__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: [
+    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 })
     ] }) }),
@@ -538,7 +550,7 @@ function BodyMap3D(props) {
         /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "#94a3b8", 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: "#ef4444", borderColor: "#f6c9c9" }, children: L.remove })
-      ] }) : /* @__PURE__ */ jsx("div", { "data-testid": "bodymap3d-empty", style: { border: "1px solid #e2e8f0", borderRadius: 14, padding: 16, background: "#fff", color: "#94a3b8", fontSize: 13.5 }, children: UI.hoverHint }) })
+      ] }) : showEmptyHint ? /* @__PURE__ */ jsx("div", { "data-testid": "bodymap3d-empty", style: { border: "1px solid #e2e8f0", borderRadius: 14, padding: 16, background: "#fff", color: "#94a3b8", fontSize: 13.5 }, children: UI.hoverHint }) : null })
     ] })
   ] });
 }