@broberg/bodymap 0.1.4 → 0.2.0

package/README.md

@@ -4,9 +4,9 @@ Interactive body **pain-map**: a genderless body a patient clicks to mark where
 hurts, producing a structured `PainReport` (the shared `bodymap/v1` wire format) —
 never a bare image. The clinical region taxonomy, the data model and the selection
 engine are **framework-neutral**; the renderer is swappable. This release ships the
-headless core + a 2D SVG React renderer (front view). A rotatable 3D renderer
-(vanilla Three.js) and a 2D back view land in follow-up `0.1.x` releases on the
-same core.
+headless core, a 2D SVG React renderer (front + back view) **and** a rotatable
+3D renderer (vanilla three.js) — all on the same core and the same
+`bodymap/v1` wire.
 
 ```bash
 npm i @broberg/bodymap
@@ -78,6 +78,45 @@ type RegionConfig = Record<string, { visible?: boolean; selectable?: boolean }>;
 An absent key is visible + selectable. Hidden ⇒ never selectable. `resolveRegions`
 and `isSelectable` apply the config for custom renderers.
 
+## 3D renderer (React + three.js)
+
+A rotatable 3D body on the **same** core + wire — a realistic Blender Studio human
+base mesh (CC0), drag to rotate, scroll to zoom, hover to highlight, click a body
+part to mark pain (the part colours by intensity). Vanilla three.js (not
+react-three-fiber) so it runs in React, Preact and a Capacitor webview alike.
+
+```tsx
+import { BodyMap3D } from "@broberg/bodymap/three";
+
+<BodyMap3D
+  models={{ male: "/models/body-male.glb", female: "/models/body-female.glb" }}
+  onChange={(report) => save(report)}   // same PainReport (bodymap/v1)
+  palette={palette}                      // same BodymapPalette
+  locale="da"                            // da | en (region names + UI)
+  autoRotate={false}                     // idle when static (battery + Lens-friendly)
+/>;
+```
+
+- **`three` is an optional peer** — only this subpath pulls it in (`npm i three`).
+  The 2D renderer + core stay three-free.
+- **You host the models.** The package ships reference GLBs at
+  `@broberg/bodymap/models/body-male.glb` + `…/body-female.glb` (~512 KB each) —
+  copy them to your `public/` (or `import url from "@broberg/bodymap/models/body-male.glb?url"`
+  with a bundler that emits asset URLs) and pass the URLs via `models`. Nothing is
+  bundled into the JS, and no model is fetched from a third party.
+- **On-demand rendering.** The scene renders only while auto-rotating or while a
+  gesture is settling, then goes idle — so it doesn't drain a phone's battery and a
+  headless Lens/Playwright run can actually land clicks.
+- **WebGL-safe.** With no WebGL context the component renders a graceful fallback
+  instead of crashing.
+- **Same contract as 2D.** `onChange` emits the identical `PainReport`, so swapping
+  `<BodyMap>` for `<BodyMap3D>` needs zero change to your report handling. It honours
+  the per-app `config` too — a non-selectable region isn't pickable in 3D either.
+- **No WebXR/VR.** This is a rotatable in-page 3D canvas, not an immersive session —
+  WebXR is intentionally out (a Capacitor webview can't host it reliably).
+- Every control carries a `data-testid` (`bodymap3d-canvas`, `bodymap3d-sex-*`,
+  `bodymap3d-intensity-<n>`, `bodymap3d-type-<quality>`, `bodymap3d-ready`).
+
 ## Colour control — `BodymapPalette`
 
 Both renderers theme off one palette (consumer-defined):
@@ -99,10 +138,9 @@ baseColorFor("chest", palette);    // → "#e6e9f2"  (per-region override, else
 
 ## Roadmap
 
-- 2D **back view** (LUMBAR / THORA / HIP posterior) — `0.1.x`
-- Rotatable **3D** renderer (vanilla Three.js, realistic Blender Studio CC0 body,
-  click-to-colour by pain) — `0.1.x`
-- Preact adapter
+- True **per-zone mesh segmentation** for the 3D renderer (v0.2.0 assigns each
+  vertex to its nearest region anchor; sharp painted zones come next)
+- **Preact** adapter
 
 ## License
 

package/dist/three.cjs

@@ -0,0 +1,571 @@
+'use strict';
+
+var react = require('react');
+var THREE = require('three');
+var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
+var OrbitControls_js = require('three/examples/jsm/controls/OrbitControls.js');
+var zod = require('zod');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+
+// src/three.tsx
+var REGIONS = [
+  // axis / centre-line (serialised side "center")
+  { key: "head", label: "Hoved", code: "HEAD" },
+  { key: "neck", label: "Nakke", code: "NECK" },
+  { key: "chest", label: "Bryst", code: "CHEST" },
+  { key: "thora", label: "\xD8vre ryg (thorakal)", code: "THORA" },
+  { key: "lumbar", label: "L\xE6nd (lumbal)", code: "LUMBAR" },
+  { key: "groin", label: "Lyske", code: "GROIN" },
+  // paired limbs / sides (L / R)
+  { key: "shoulder_left", label: "Skulder, venstre", code: "SHOULDER", side: "left" },
+  { key: "shoulder_right", label: "Skulder, h\xF8jre", code: "SHOULDER", side: "right" },
+  { key: "uarm_left", label: "Overarm, venstre", code: "UARM", side: "left" },
+  { key: "uarm_right", label: "Overarm, h\xF8jre", code: "UARM", side: "right" },
+  { key: "elbow_left", label: "Albue, venstre", code: "ELBOW", side: "left" },
+  { key: "elbow_right", label: "Albue, h\xF8jre", code: "ELBOW", side: "right" },
+  { key: "farm_left", label: "Underarm, venstre", code: "FARM", side: "left" },
+  { key: "farm_right", label: "Underarm, h\xF8jre", code: "FARM", side: "right" },
+  { key: "wrist_left", label: "H\xE5ndled, venstre", code: "WRIST", side: "left" },
+  { key: "wrist_right", label: "H\xE5ndled, h\xF8jre", code: "WRIST", side: "right" },
+  { key: "hand_left", label: "H\xE5nd, venstre", code: "HAND", side: "left" },
+  { key: "hand_right", label: "H\xE5nd, h\xF8jre", code: "HAND", side: "right" },
+  { key: "hip_left", label: "Hofte, venstre", code: "HIP", side: "left" },
+  { key: "hip_right", label: "Hofte, h\xF8jre", code: "HIP", side: "right" },
+  { key: "thigh_left", label: "L\xE5r, venstre", code: "THIGH", side: "left" },
+  { key: "thigh_right", label: "L\xE5r, h\xF8jre", code: "THIGH", side: "right" },
+  { key: "knee_left", label: "Kn\xE6, venstre", code: "KNEE", side: "left" },
+  { key: "knee_right", label: "Kn\xE6, h\xF8jre", code: "KNEE", side: "right" },
+  { key: "lowleg_left", label: "Underben, venstre", code: "LOWLEG", side: "left" },
+  { key: "lowleg_right", label: "Underben, h\xF8jre", code: "LOWLEG", side: "right" },
+  { key: "ankle_left", label: "Ankel, venstre", code: "ANKLE", side: "left" },
+  { key: "ankle_right", label: "Ankel, h\xF8jre", code: "ANKLE", side: "right" },
+  { key: "foot_left", label: "Fod, venstre", code: "FOOT", side: "left" },
+  { key: "foot_right", label: "Fod, h\xF8jre", code: "FOOT", side: "right" }
+];
+var REGION_KEY_SET = new Set(REGIONS.map((r) => r.key));
+REGIONS.map((r) => r.key);
+function getRegion(key) {
+  return REGIONS.find((r) => r.key === key);
+}
+var PAIN_TYPES = ["stikkende", "dump", "konstant", "jagende"];
+var painPointSchema = zod.z.object({
+  region: zod.z.string().refine((k) => REGION_KEY_SET.has(k), { message: "unknown region" }),
+  intensity: zod.z.number().int().min(0).max(10),
+  type: zod.z.enum(PAIN_TYPES).optional(),
+  timestamp: zod.z.string()
+});
+zod.z.array(painPointSchema);
+function isSelectable(key, config = {}) {
+  const s = config[key];
+  if (s?.visible === false) return false;
+  return s?.selectable ?? true;
+}
+var defaultPalette = {
+  body: "#d2d7de",
+  hover: "#8fd0cd",
+  selected: "#5cc4b7",
+  heat: { low: "#fcd34d", mid: "#fb923c", high: "#ef4444" }
+};
+function heatFor(intensity, palette = defaultPalette) {
+  return intensity >= 7 ? palette.heat.high : intensity >= 4 ? palette.heat.mid : palette.heat.low;
+}
+function baseColorFor(regionKey, palette = defaultPalette) {
+  return palette.regions?.[regionKey] ?? palette.body;
+}
+zod.z.object({
+  schema: zod.z.literal("bodymap/v1"),
+  view: zod.z.enum(["front", "back", "left", "right"]),
+  points: zod.z.array(
+    zod.z.object({
+      region: zod.z.string(),
+      side: zod.z.enum(["left", "right", "center"]),
+      intensity: zod.z.number().int().min(0).max(10),
+      quality: zod.z.enum(PAIN_TYPES).optional()
+    })
+  )
+});
+function serializeReport(report, opts = {}) {
+  return {
+    schema: "bodymap/v1",
+    view: opts.view ?? "front",
+    points: report.map((p) => {
+      const r = getRegion(p.region);
+      return {
+        region: r?.code ?? p.region,
+        side: r?.side ?? "center",
+        intensity: p.intensity,
+        quality: p.type
+      };
+    })
+  };
+}
+var daRegions = Object.fromEntries(REGIONS.map((r) => [r.key, r.label]));
+var EN_CODE = {
+  HEAD: "Head",
+  NECK: "Neck",
+  CHEST: "Chest",
+  THORA: "Upper back",
+  LUMBAR: "Lower back",
+  GROIN: "Groin",
+  SHOULDER: "Shoulder",
+  UARM: "Upper arm",
+  ELBOW: "Elbow",
+  FARM: "Forearm",
+  WRIST: "Wrist",
+  HAND: "Hand",
+  HIP: "Hip",
+  THIGH: "Thigh",
+  KNEE: "Knee",
+  LOWLEG: "Lower leg",
+  ANKLE: "Ankle",
+  FOOT: "Foot"
+};
+var enRegions = Object.fromEntries(
+  REGIONS.map((r) => [r.key, EN_CODE[r.code] + (r.side ? r.side === "left" ? ", left" : ", right" : "")])
+);
+var LABELS_DA = {
+  regions: daRegions,
+  qualities: { stikkende: "stikkende", dump: "dump", konstant: "konstant", jagende: "jagende" },
+  intensity: "Intensitet (0-10)",
+  quality: "Kvalitet",
+  remove: "Fjern punkt",
+  front: "Forfra",
+  back: "Bagfra",
+  empty: "V\xE6lg en kropsdel for at markere smerte.",
+  before: "F\xF8r",
+  after: "Efter",
+  noChange: "Ingen \xE6ndring",
+  change: { new: "nyt", resolved: "forsvundet", improved: "bedre", worse: "v\xE6rre" },
+  ariaMarked: (n, i, q) => `${n}, smerte ${i} af 10${q ? ", " + q : ""}`,
+  ariaUnmarked: (n) => `${n}, ikke markeret. Aktiv\xE9r for at markere smerte.`,
+  svgLabel: "Kropskort \u2014 v\xE6lg hvor det g\xF8r ondt",
+  viewLabel: "Visning",
+  zoomLabel: "Zoom",
+  zoomIn: "Zoom ind",
+  zoomOut: "Zoom ud",
+  zoomReset: "Nulstil zoom"
+};
+var LABELS_EN = {
+  regions: enRegions,
+  qualities: { stikkende: "stabbing", dump: "dull", konstant: "constant", jagende: "shooting" },
+  intensity: "Intensity (0-10)",
+  quality: "Quality",
+  remove: "Remove point",
+  front: "Front",
+  back: "Back",
+  empty: "Pick a body part to mark pain.",
+  before: "Before",
+  after: "After",
+  noChange: "No change",
+  change: { new: "new", resolved: "resolved", improved: "improved", worse: "worse" },
+  ariaMarked: (n, i, q) => `${n}, pain ${i} of 10${q ? ", " + q : ""}`,
+  ariaUnmarked: (n) => `${n}, not marked. Activate to mark pain.`,
+  svgLabel: "Body map \u2014 pick where it hurts",
+  viewLabel: "View",
+  zoomLabel: "Zoom",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  zoomReset: "Reset zoom"
+};
+var UI_DA = { male: "Mand", female: "Kvinde", hoverHint: "Hover for at fremh\xE6ve \xB7 klik en kropsdel for at markere smerte." };
+var UI_EN = { male: "Male", female: "Female", hoverHint: "Hover to highlight \xB7 tap a body part to mark pain." };
+var ANCHORS = {
+  head: [0, 1.79, 0.02],
+  neck: [0, 1.57, 0],
+  chest: [0, 1.42, 0.11],
+  thora: [0, 1.42, -0.12],
+  lumbar: [0, 1.13, -0.13],
+  groin: [0, 0.92, 0.09],
+  shoulder_left: [-0.2, 1.5, 0],
+  shoulder_right: [0.2, 1.5, 0],
+  uarm_left: [-0.27, 1.3, 0],
+  uarm_right: [0.27, 1.3, 0],
+  elbow_left: [-0.31, 1.08, 0],
+  elbow_right: [0.31, 1.08, 0],
+  farm_left: [-0.34, 0.93, 0.02],
+  farm_right: [0.34, 0.93, 0.02],
+  wrist_left: [-0.36, 0.79, 0.02],
+  wrist_right: [0.36, 0.79, 0.02],
+  hand_left: [-0.37, 0.68, 0.03],
+  hand_right: [0.37, 0.68, 0.03],
+  hip_left: [-0.14, 1.02, -0.03],
+  hip_right: [0.14, 1.02, -0.03],
+  thigh_left: [-0.1, 0.68, 0.05],
+  thigh_right: [0.1, 0.68, 0.05],
+  knee_left: [-0.1, 0.4, 0.06],
+  knee_right: [0.1, 0.4, 0.06],
+  lowleg_left: [-0.1, 0.22, 0.04],
+  lowleg_right: [0.1, 0.22, 0.04],
+  ankle_left: [-0.1, 0.05, 0.02],
+  ankle_right: [0.1, 0.05, 0.02],
+  foot_left: [-0.1, 0.02, 0.11],
+  foot_right: [0.1, 0.02, 0.11]
+};
+var ANCHOR_KEYS = Object.keys(ANCHORS);
+for (const k of ANCHOR_KEYS) ANCHORS[k][0] = -ANCHORS[k][0];
+function mergeLabels(locale, overrides) {
+  const base = locale === "en" ? LABELS_EN : LABELS_DA;
+  if (!overrides) return base;
+  return {
+    ...base,
+    ...overrides,
+    regions: { ...base.regions, ...overrides.regions },
+    qualities: { ...base.qualities, ...overrides.qualities }
+  };
+}
+function webglAvailable() {
+  try {
+    const c = document.createElement("canvas");
+    return !!(c.getContext("webgl") || c.getContext("experimental-webgl"));
+  } catch {
+    return false;
+  }
+}
+var btn = { font: "inherit", cursor: "pointer", borderRadius: 8, border: "1px solid #e2e8f0", background: "#fff", padding: "6px 9px" };
+var seg = (on) => ({ ...btn, background: on ? "#0e8f8a" : "#fff", color: on ? "#fff" : "#1e293b", fontWeight: 600 });
+function BodyMap3D(props) {
+  const {
+    models,
+    value,
+    defaultValue,
+    onChange,
+    config,
+    palette = defaultPalette,
+    locale = "da",
+    labels,
+    ui,
+    defaultSex = "male",
+    onSexChange,
+    autoRotate = true,
+    className
+  } = props;
+  const L = mergeLabels(locale, labels);
+  const UI = { ...locale === "en" ? UI_EN : UI_DA, ...ui };
+  const nameOf = (key) => L.regions[key] ?? getRegion(key)?.label ?? key;
+  const mountRef = react.useRef(null);
+  const loadedRef = react.useRef(null);
+  const [unsupported, setUnsupported] = react.useState(false);
+  const [ready, setReady] = react.useState(false);
+  const [sex, setSex] = react.useState(defaultSex);
+  const [selected, setSelected] = react.useState(null);
+  const [internal, setInternal] = react.useState(defaultValue ?? []);
+  const report = value ?? internal;
+  const commit = (next) => {
+    if (value === void 0) setInternal(next);
+    onChange?.(next);
+  };
+  const reportRef = react.useRef(report);
+  reportRef.current = report;
+  const selectedRef = react.useRef(selected);
+  selectedRef.current = selected;
+  const paletteRef = react.useRef(palette);
+  paletteRef.current = palette;
+  const configRef = react.useRef(config);
+  configRef.current = config;
+  const modelsRef = react.useRef(models);
+  modelsRef.current = models;
+  const setSelectedRef = react.useRef(setSelected);
+  setSelectedRef.current = setSelected;
+  const setReadyRef = react.useRef(setReady);
+  setReadyRef.current = setReady;
+  const apiRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!webglAvailable()) {
+      setUnsupported(true);
+      return;
+    }
+    const el = mountRef.current;
+    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);
+    const camera = new THREE__namespace.PerspectiveCamera(32, W / H, 0.1, 100);
+    camera.position.set(0, 1.05, 4.4);
+    let renderer;
+    try {
+      renderer = new THREE__namespace.WebGLRenderer({ antialias: true });
+    } catch {
+      setUnsupported(true);
+      return;
+    }
+    renderer.setSize(W, H);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    el.appendChild(renderer.domElement);
+    scene.add(new THREE__namespace.HemisphereLight(16777215, 2240580, 1.05));
+    const kl = new THREE__namespace.DirectionalLight(16777215, 1.5);
+    kl.position.set(3, 5, 4);
+    scene.add(kl);
+    const rl = new THREE__namespace.DirectionalLight(8956671, 0.7);
+    rl.position.set(-4, 2, -3);
+    scene.add(rl);
+    const controls = new OrbitControls_js.OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.08;
+    controls.autoRotate = autoRotate;
+    controls.autoRotateSpeed = 1.1;
+    controls.minDistance = 2.2;
+    controls.maxDistance = 8;
+    controls.enablePan = false;
+    controls.target.set(0, 0.95, 0);
+    controls.addEventListener("start", () => {
+      controls.autoRotate = false;
+    });
+    let raf = 0;
+    let pumping = false;
+    const renderFrame = () => renderer.render(scene, camera);
+    const pump = () => {
+      const moved = controls.update();
+      renderFrame();
+      if (moved || controls.autoRotate) {
+        raf = requestAnimationFrame(pump);
+      } else {
+        pumping = false;
+        raf = 0;
+      }
+    };
+    const kick = () => {
+      if (!pumping && !document.hidden) {
+        pumping = true;
+        raf = requestAnimationFrame(pump);
+      }
+    };
+    controls.addEventListener("change", kick);
+    let modelRoot = null;
+    let bodyMesh = null;
+    let vertexRegion = [];
+    let colorAttr = null;
+    let hovered = null;
+    const loader = new GLTFLoader_js.GLTFLoader();
+    const anchorVecs = ANCHOR_KEYS.map((k) => new THREE__namespace.Vector3(...ANCHORS[k]));
+    const tmp = new THREE__namespace.Color();
+    const restingHex = (key) => {
+      const pt = reportRef.current.find((p) => p.region === key);
+      if (pt) return heatFor(pt.intensity, paletteRef.current);
+      if (selectedRef.current === key) return paletteRef.current.selected;
+      return baseColorFor(key, paletteRef.current);
+    };
+    const colorRegion = (key, hex) => {
+      if (!colorAttr) return;
+      tmp.set(hex);
+      for (let i = 0; i < vertexRegion.length; i++) if (vertexRegion[i] === key) colorAttr.setXYZ(i, tmp.r, tmp.g, tmp.b);
+      colorAttr.needsUpdate = true;
+    };
+    const refresh = () => {
+      for (const k of ANCHOR_KEYS) colorRegion(k, hovered === k ? paletteRef.current.hover : restingHex(k));
+      renderFrame();
+    };
+    const loadModel = (which) => {
+      const url = which === "female" ? modelsRef.current.female : modelsRef.current.male;
+      loader.load(url, (gltf) => {
+        if (modelRoot) scene.remove(modelRoot);
+        const model = gltf.scene;
+        const box = new THREE__namespace.Box3().setFromObject(model);
+        const size = new THREE__namespace.Vector3();
+        box.getSize(size);
+        const center = new THREE__namespace.Vector3();
+        box.getCenter(center);
+        const scale = 1.9 / size.y;
+        model.scale.setScalar(scale);
+        model.position.set(-center.x * scale, -box.min.y * scale, -center.z * scale);
+        model.updateMatrixWorld(true);
+        bodyMesh = null;
+        model.traverse((o) => {
+          const m = o;
+          if (m.isMesh && !bodyMesh) bodyMesh = m;
+        });
+        if (bodyMesh) {
+          const geo = bodyMesh.geometry;
+          geo.computeVertexNormals();
+          const pos = geo.getAttribute("position");
+          const n = pos.count;
+          const cols = new Float32Array(n * 3);
+          vertexRegion = new Array(n);
+          const v = new THREE__namespace.Vector3();
+          for (let i = 0; i < n; i++) {
+            v.fromBufferAttribute(pos, i).applyMatrix4(bodyMesh.matrixWorld);
+            let best = 0, bd = Infinity;
+            for (let a = 0; a < anchorVecs.length; a++) {
+              const d = v.distanceToSquared(anchorVecs[a]);
+              if (d < bd) {
+                bd = d;
+                best = a;
+              }
+            }
+            vertexRegion[i] = ANCHOR_KEYS[best];
+          }
+          colorAttr = new THREE__namespace.BufferAttribute(cols, 3);
+          geo.setAttribute("color", colorAttr);
+          bodyMesh.material = new THREE__namespace.MeshStandardMaterial({ vertexColors: true, roughness: 0.72, metalness: 0.04 });
+          refresh();
+        }
+        modelRoot = model;
+        scene.add(model);
+        renderFrame();
+        kick();
+        setReadyRef.current(true);
+        if (loadedRef.current) {
+          loadedRef.current.setAttribute("data-loaded", "true");
+          loadedRef.current.setAttribute("data-model", which);
+        }
+      });
+    };
+    loadModel(defaultSex);
+    apiRef.current = {
+      setSex: (s) => {
+        loadedRef.current?.removeAttribute("data-loaded");
+        setReadyRef.current(false);
+        loadModel(s);
+      },
+      refresh
+    };
+    const raycaster = new THREE__namespace.Raycaster();
+    const ndc = new THREE__namespace.Vector2();
+    const pick = (clientX, clientY) => {
+      if (!bodyMesh) return null;
+      const rect = renderer.domElement.getBoundingClientRect();
+      ndc.set((clientX - rect.left) / rect.width * 2 - 1, -((clientY - rect.top) / rect.height) * 2 + 1);
+      raycaster.setFromCamera(ndc, camera);
+      const hits = raycaster.intersectObject(bodyMesh, true);
+      if (!hits.length) return null;
+      const p = hits[0].point;
+      let best = null, bd = Infinity;
+      for (const k of ANCHOR_KEYS) {
+        if (!isSelectable(k, configRef.current ?? {})) continue;
+        const a = ANCHORS[k];
+        const d = (p.x - a[0]) ** 2 + (p.y - a[1]) ** 2 + (p.z - a[2]) ** 2;
+        if (d < bd) {
+          bd = d;
+          best = k;
+        }
+      }
+      return best;
+    };
+    let downX = 0, downY = 0, downT = 0;
+    const canvas = renderer.domElement;
+    const onDown = (e) => {
+      downX = e.clientX;
+      downY = e.clientY;
+      downT = Date.now();
+    };
+    const onMove = (e) => {
+      if ((e.buttons || 0) !== 0) return;
+      const k = pick(e.clientX, e.clientY);
+      if (k === hovered) return;
+      const prev = hovered;
+      hovered = k;
+      if (prev) colorRegion(prev, restingHex(prev));
+      if (k) colorRegion(k, paletteRef.current.hover);
+      canvas.style.cursor = k ? "pointer" : "default";
+      renderFrame();
+    };
+    const onUp = (e) => {
+      if (Math.hypot(e.clientX - downX, e.clientY - downY) > 6 || Date.now() - downT > 450) return;
+      const k = pick(e.clientX, e.clientY);
+      if (k) setSelectedRef.current(k);
+    };
+    canvas.addEventListener("pointerdown", onDown);
+    canvas.addEventListener("pointermove", onMove);
+    canvas.addEventListener("pointerup", onUp);
+    renderFrame();
+    kick();
+    const onVis = () => {
+      if (document.hidden) {
+        cancelAnimationFrame(raf);
+        pumping = false;
+        raf = 0;
+      } else kick();
+    };
+    document.addEventListener("visibilitychange", onVis);
+    const onResize = () => {
+      W = el.clientWidth || 520;
+      H = el.clientHeight || 600;
+      camera.aspect = W / H;
+      camera.updateProjectionMatrix();
+      renderer.setSize(W, H);
+      renderFrame();
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onResize);
+      document.removeEventListener("visibilitychange", onVis);
+      controls.removeEventListener("change", kick);
+      canvas.removeEventListener("pointerdown", onDown);
+      canvas.removeEventListener("pointermove", onMove);
+      canvas.removeEventListener("pointerup", onUp);
+      controls.dispose();
+      renderer.dispose();
+      if (canvas.parentNode) canvas.parentNode.removeChild(canvas);
+    };
+  }, []);
+  react.useEffect(() => {
+    apiRef.current?.refresh();
+  }, [selected, report, palette]);
+  react.useEffect(() => {
+    apiRef.current?.setSex(sex);
+  }, [sex]);
+  const pointOf = (k) => report.find((p) => p.region === k);
+  const setPain = (k, intensity, type) => {
+    commit([...report.filter((p) => p.region !== k), { region: k, intensity, type, timestamp: (/* @__PURE__ */ new Date()).toISOString() }]);
+  };
+  const removePain = (k) => {
+    commit(report.filter((p) => p.region !== k));
+    setSelected(null);
+  };
+  const changeSex = (s) => {
+    setSex(s);
+    onSexChange?.(s);
+  };
+  const region = selected ? REGIONS.find((r) => r.key === selected) : null;
+  const current = selected ? pointOf(selected) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "bodymap3d-root", className, style: { fontFamily: "system-ui, sans-serif", color: "#1e293b" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginBottom: 12, fontSize: 13 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-sex-male", onClick: () => changeSex("male"), style: seg(sex === "male"), children: UI.male }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-sex-female", onClick: () => changeSex("female"), style: seg(sex === "female"), children: UI.female })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { ref: loadedRef, "data-testid": "bodymap3d-loaded", style: { display: "none" } }),
+    ready && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "bodymap3d-ready", style: { position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" } }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap" }, children: [
+      unsupported ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "bodymap3d-unsupported", style: { flex: "1 1 520px", minWidth: 320, height: "60vh", 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("div", { ref: mountRef, "data-testid": "bodymap3d-canvas", style: { flex: "1 1 520px", height: "60vh", minWidth: 320, borderRadius: 16, overflow: "hidden", background: "#0e1424", touchAction: "none" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: "1 1 300px", minWidth: 260 }, children: region ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: "1px solid #e2e8f0", borderRadius: 14, padding: 16, background: "#fff" }, 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) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { font: "11px ui-monospace, monospace", color: "#64748b", background: "#f1f5f9", borderRadius: 6, padding: "2px 7px" }, children: [
+            region.code,
+            region.side ? " \xB7 " + region.side : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "#94a3b8", marginBottom: 7 }, children: L.intensity }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12 }, children: Array.from({ length: 11 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": `bodymap3d-intensity-${i}`, onClick: () => setPain(region.key, i, current?.type), style: { ...btn, width: 30, height: 30, background: current?.intensity === i ? "#0e8f8a" : "#fff", color: current?.intensity === i ? "#fff" : "#1e293b" }, children: i }, i)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "#94a3b8", 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, 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__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn, color: "#ef4444", borderColor: "#f6c9c9" }, children: L.remove })
+      ] }) : /* @__PURE__ */ jsxRuntime.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 }) })
+    ] })
+  ] });
+}
+
+exports.BodyMap3D = BodyMap3D;
+exports.serializeReport = serializeReport;
+//# sourceMappingURL=three.cjs.map
+//# sourceMappingURL=three.cjs.map