@broberg/bodymap 0.1.3 → 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/react.cjs

@@ -215,6 +215,10 @@ var LABELS_DA = {
   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",
@@ -233,6 +237,10 @@ var LABELS_EN = {
   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",
@@ -292,7 +300,7 @@ var STYLE = `
 .bmap__stage{display:flex;flex-direction:column;gap:10px;flex:0 1 340px;min-width:0;max-width:360px}
 .bmap__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
 .bmap__viewtoggle{display:inline-flex;background:#f1f5f9;border:1px solid var(--bmap-line);border-radius:10px;padding:3px;gap:2px}
-.bmap__vbtn{font:inherit;font-size:13px;font-weight:600;color:var(--bmap-muted);background:none;border:0;border-radius:7px;padding:8px 16px;cursor:pointer;transition:color .12s,background .12s,transform .1s}
+.bmap__vbtn{font:inherit;font-size:13px;font-weight:600;color:#556274;background:none;border:0;border-radius:7px;padding:8px 16px;cursor:pointer;transition:color .12s,background .12s,transform .1s}
 .bmap__vbtn:hover{color:var(--bmap-ink)}
 .bmap__vbtn:active{transform:scale(.97)}
 .bmap__vbtn--on{background:#fff;color:var(--bmap-ink);box-shadow:0 1px 2px rgba(15,23,42,.14)}
@@ -329,6 +337,23 @@ var STYLE = `
 .bmap__rm:hover{background:#fef2f2}
 .bmap__rm:active{transform:scale(.97)}
 .bmap__i:focus-visible,.bmap__chip:focus-visible,.bmap__vbtn:focus-visible,.bmap__rm:focus-visible,.bmap__zoom button:focus-visible{outline:2px solid var(--bmap-accent);outline-offset:2px}
+.bmapc{--bmap-accent:var(--primary,#0e8f8a);--bmap-line:#e2e8f0;--bmap-ink:#1e293b;--bmap-muted:#64748b;font:15px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--bmap-ink)}
+.bmapc__bodies{display:flex;gap:14px;flex-wrap:wrap}
+.bmapc__fig{flex:1 1 150px;min-width:130px;max-width:220px;margin:0;text-align:center}
+.bmapc__cap{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#556274;margin-bottom:6px}
+.bmapc__svg{width:100%;height:auto;display:block}
+.bmapc__vis{stroke:#fff;stroke-width:2.4}
+.bmapc__n{font:700 12px ui-sans-serif;fill:#fff;pointer-events:none}
+.bmapc__delta{margin-top:16px;display:flex;flex-direction:column;gap:6px;max-width:460px}
+.bmapc__row{display:flex;align-items:center;gap:10px;font-size:13.5px;border:1px solid var(--bmap-line);border-radius:9px;padding:7px 11px}
+.bmapc__rname{font-weight:600;flex:1 1 auto}
+.bmapc__rval{font:12px ui-monospace,monospace;color:#556274;white-space:nowrap}
+.bmapc__badge{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap}
+.bmapc__badge--improved{background:#dcfce7;color:#166534}
+.bmapc__badge--worse{background:#fee2e2;color:#991b1b}
+.bmapc__badge--new{background:#fef3c7;color:#92400e}
+.bmapc__badge--resolved{background:#e2e8f0;color:#475569}
+.bmapc__empty{color:#556274;font-size:13.5px;margin-top:14px}
 @media (max-width:560px){
   .bmap{flex-direction:column;gap:14px}
   .bmap__stage{max-width:100%;width:100%;flex-basis:auto}
@@ -603,8 +628,78 @@ function BodyMap({
     ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bmap__panel bmap__panel--empty", "data-testid": "bodymap-panel", children: L.empty })
   ] });
 }
+function changeOf(b, a) {
+  if (b == null && a != null) return "new";
+  if (b != null && a == null) return "resolved";
+  if (b == null || a == null) return "same";
+  return a < b ? "improved" : a > b ? "worse" : "same";
+}
+function CompareFigure({ report, view, palette, caption, testid }) {
+  const shapes = view === "back" ? SHAPES_BACK : SHAPES;
+  const fills = view === "back" ? FILL_BACK : FILL;
+  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: "bmapc__fig", "data-testid": testid, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "bmapc__cap", children: caption }),
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "bmapc__svg", viewBox: "0 0 260 470", role: "img", "aria-label": caption, children: [
+      REGIONS.map((r) => {
+        const s = shapes[r.key];
+        if (!s) return null;
+        const m = report.find((p) => p.region === r.key);
+        const fill = m ? markedFill(m.intensity, palette) : baseFill(r.key, fills[r.key] ?? "#cbd5e1", palette);
+        return /* @__PURE__ */ jsxRuntime.jsx("g", { children: shapeEl(s, { className: "bmapc__vis", fill }) }, r.key);
+      }),
+      report.map((p) => {
+        const s = shapes[p.region];
+        if (!s) return null;
+        const c = center(s);
+        return /* @__PURE__ */ jsxRuntime.jsx("text", { x: c.x, y: c.y + 4, textAnchor: "middle", className: "bmapc__n", children: p.intensity }, p.region);
+      })
+    ] })
+  ] });
+}
+function BodyMapCompare({
+  before,
+  after,
+  palette,
+  locale = "da",
+  labels,
+  defaultView = "front",
+  className
+}) {
+  react.useEffect(ensureStyles, []);
+  const [view, setView] = react.useState(defaultView);
+  const L = resolveLabels(locale, labels);
+  const nameOf = (k) => L.regions[k] ?? getRegion(k)?.label ?? k;
+  const rootStyle = palette ? { "--bmap-accent": palette.selected } : void 0;
+  const keys = Array.from(new Set([...before, ...after].map((p) => p.region)));
+  const changes = keys.map((k) => ({
+    key: k,
+    b: before.find((p) => p.region === k)?.intensity,
+    a: after.find((p) => p.region === k)?.intensity,
+    status: changeOf(before.find((p) => p.region === k)?.intensity, after.find((p) => p.region === k)?.intensity)
+  })).filter((c) => c.status !== "same").sort((x, y) => x.key < y.key ? -1 : 1);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["bmapc", className].filter(Boolean).join(" "), "data-testid": "bodymap-compare", style: rootStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": L.viewLabel, style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bmap__vbtn" + (view === "front" ? " bmap__vbtn--on" : ""), "data-testid": "bodymap-compare-view-front", "aria-pressed": view === "front", onClick: () => setView("front"), children: L.front }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "bmap__vbtn" + (view === "back" ? " bmap__vbtn--on" : ""), "data-testid": "bodymap-compare-view-back", "aria-pressed": view === "back", onClick: () => setView("back"), children: L.back })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmapc__bodies", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CompareFigure, { report: before, view, palette, caption: L.before, testid: "bodymap-compare-before" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CompareFigure, { report: after, view, palette, caption: L.after, testid: "bodymap-compare-after" })
+    ] }),
+    changes.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bmapc__delta", "data-testid": "bodymap-compare-delta", children: changes.map((c) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bmapc__row", "data-testid": `bodymap-compare-delta-${c.key}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bmapc__rname", children: nameOf(c.key) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "bmapc__rval", children: [
+        c.b ?? "\u2013",
+        " \u2192 ",
+        c.a ?? "\u2013"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `bmapc__badge bmapc__badge--${c.status}`, children: L.change[c.status] })
+    ] }, c.key)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bmapc__empty", "data-testid": "bodymap-compare-delta", children: L.noChange })
+  ] });
+}
 
 exports.BodyMap = BodyMap;
+exports.BodyMapCompare = BodyMapCompare;
 exports.LABELS_DA = LABELS_DA;
 exports.LABELS_EN = LABELS_EN;
 //# sourceMappingURL=react.cjs.map