@broberg/bodymap 0.14.0 → 0.16.0

package/dist/preact.js

@@ -0,0 +1,779 @@
+import { useEffect, useState, useRef } from 'preact/hooks';
+import { z } from 'zod';
+import { jsxs, jsx } from 'preact/jsx-runtime';
+
+// src/react.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 = z.object({
+  region: z.string().refine((k) => REGION_KEY_SET.has(k), { message: "unknown region" }),
+  intensity: z.number().int().min(0).max(10),
+  type: z.enum(PAIN_TYPES).optional(),
+  timestamp: z.string()
+});
+z.array(painPointSchema).max(REGIONS.length);
+function resolveRegions(config = {}) {
+  return REGIONS.filter((r) => config[r.key]?.visible ?? true);
+}
+function decidePick(region, report, config = {}) {
+  if (!isSelectable(region, config)) return "ignore";
+  return report.some((p) => p.region === region) ? "clear" : "select";
+}
+function isSelectable(key, config = {}) {
+  const s = config[key];
+  if (s?.visible === false) return false;
+  return s?.selectable ?? true;
+}
+var VIBRATION_PATTERNS = {
+  select: [12],
+  clear: [8, 40, 8],
+  ignore: []
+};
+function requestVibration(pattern, nav = globalThis.navigator) {
+  if (pattern.length === 0) return "skipped";
+  if (typeof nav?.vibrate !== "function") return "unsupported";
+  try {
+    return nav.vibrate([...pattern]) ? "requested" : "declined";
+  } catch {
+    return "declined";
+  }
+}
+function emitFeedback(outcome, region, opts = {}) {
+  opts.onFeedback?.({ outcome, region });
+  if (opts.haptics === false) return "skipped";
+  return requestVibration(VIBRATION_PATTERNS[outcome], opts.nav);
+}
+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;
+}
+z.object({
+  schema: z.literal("bodymap/v1"),
+  view: z.enum(["front", "back", "left", "right"]),
+  points: z.array(
+    z.object({
+      region: z.string(),
+      side: z.enum(["left", "right", "center"]),
+      intensity: z.number().int().min(0).max(10),
+      quality: z.enum(PAIN_TYPES).optional()
+    })
+  ).max(REGIONS.length)
+});
+var SHAPES = {
+  head: { el: "circle", cx: 130, cy: 40, r: 26 },
+  neck: { el: "rect", x: 120, y: 62, width: 20, height: 16, rx: 6 },
+  chest: { el: "rect", x: 100, y: 84, width: 60, height: 104, rx: 16 },
+  groin: { el: "rect", x: 106, y: 190, width: 48, height: 30, rx: 13 },
+  // left arm (viewer-left)
+  shoulder_left: { el: "circle", cx: 88, cy: 98, r: 14 },
+  uarm_left: { el: "rect", x: 66, y: 104, width: 18, height: 54, rx: 9 },
+  elbow_left: { el: "circle", cx: 73, cy: 164, r: 10 },
+  farm_left: { el: "rect", x: 62, y: 174, width: 16, height: 50, rx: 8 },
+  wrist_left: { el: "circle", cx: 68, cy: 230, r: 8 },
+  hand_left: { el: "ellipse", cx: 67, cy: 250, rx: 11, ry: 13 },
+  // right arm (viewer-right)
+  shoulder_right: { el: "circle", cx: 172, cy: 98, r: 14 },
+  uarm_right: { el: "rect", x: 176, y: 104, width: 18, height: 54, rx: 9 },
+  elbow_right: { el: "circle", cx: 187, cy: 164, r: 10 },
+  farm_right: { el: "rect", x: 182, y: 174, width: 16, height: 50, rx: 8 },
+  wrist_right: { el: "circle", cx: 192, cy: 230, r: 8 },
+  hand_right: { el: "ellipse", cx: 193, cy: 250, rx: 11, ry: 13 },
+  // legs
+  thigh_left: { el: "rect", x: 104, y: 224, width: 22, height: 80, rx: 11 },
+  thigh_right: { el: "rect", x: 134, y: 224, width: 22, height: 80, rx: 11 },
+  knee_left: { el: "circle", cx: 115, cy: 312, r: 13 },
+  knee_right: { el: "circle", cx: 145, cy: 312, r: 13 },
+  lowleg_left: { el: "rect", x: 106, y: 322, width: 18, height: 74, rx: 9 },
+  lowleg_right: { el: "rect", x: 136, y: 322, width: 18, height: 74, rx: 9 },
+  ankle_left: { el: "circle", cx: 115, cy: 404, r: 9 },
+  ankle_right: { el: "circle", cx: 145, cy: 404, r: 9 },
+  foot_left: { el: "ellipse", cx: 115, cy: 424, rx: 14, ry: 10 },
+  foot_right: { el: "ellipse", cx: 145, cy: 424, rx: 14, ry: 10 }
+};
+var FILL = {
+  head: "#cbb7ec",
+  neck: "#b8a3e6",
+  chest: "#e26d6d",
+  groin: "#e88a52",
+  shoulder_left: "#f6c667",
+  shoulder_right: "#f6c667",
+  uarm_left: "#7ececb",
+  uarm_right: "#7ececb",
+  elbow_left: "#86cfcc",
+  elbow_right: "#86cfcc",
+  farm_left: "#8fd0cd",
+  farm_right: "#8fd0cd",
+  wrist_left: "#9ad6d3",
+  wrist_right: "#9ad6d3",
+  hand_left: "#a7ddda",
+  hand_right: "#a7ddda",
+  thigh_left: "#7fb2e8",
+  thigh_right: "#7fb2e8",
+  knee_left: "#c79be0",
+  knee_right: "#c79be0",
+  lowleg_left: "#e39ec6",
+  lowleg_right: "#e39ec6",
+  ankle_left: "#eeaab9",
+  ankle_right: "#eeaab9",
+  foot_left: "#f0a5a5",
+  foot_right: "#f0a5a5"
+};
+var SHAPES_BACK = {
+  head: { el: "circle", cx: 130, cy: 40, r: 26 },
+  neck: { el: "rect", x: 120, y: 62, width: 20, height: 16, rx: 6 },
+  thora: { el: "rect", x: 100, y: 84, width: 60, height: 58, rx: 15 },
+  lumbar: { el: "rect", x: 104, y: 144, width: 52, height: 44, rx: 13 },
+  hip_left: { el: "rect", x: 100, y: 190, width: 27, height: 32, rx: 13 },
+  hip_right: { el: "rect", x: 133, y: 190, width: 27, height: 32, rx: 13 },
+  // arms — shared with the front (back of the arm sits at the same x/y)
+  shoulder_left: { el: "circle", cx: 88, cy: 98, r: 14 },
+  uarm_left: { el: "rect", x: 66, y: 104, width: 18, height: 54, rx: 9 },
+  elbow_left: { el: "circle", cx: 73, cy: 164, r: 10 },
+  farm_left: { el: "rect", x: 62, y: 174, width: 16, height: 50, rx: 8 },
+  wrist_left: { el: "circle", cx: 68, cy: 230, r: 8 },
+  hand_left: { el: "ellipse", cx: 67, cy: 250, rx: 11, ry: 13 },
+  shoulder_right: { el: "circle", cx: 172, cy: 98, r: 14 },
+  uarm_right: { el: "rect", x: 176, y: 104, width: 18, height: 54, rx: 9 },
+  elbow_right: { el: "circle", cx: 187, cy: 164, r: 10 },
+  farm_right: { el: "rect", x: 182, y: 174, width: 16, height: 50, rx: 8 },
+  wrist_right: { el: "circle", cx: 192, cy: 230, r: 8 },
+  hand_right: { el: "ellipse", cx: 193, cy: 250, rx: 11, ry: 13 },
+  // legs — back (thigh→calf→heel, same x/y as the front)
+  thigh_left: { el: "rect", x: 104, y: 224, width: 22, height: 80, rx: 11 },
+  thigh_right: { el: "rect", x: 134, y: 224, width: 22, height: 80, rx: 11 },
+  knee_left: { el: "circle", cx: 115, cy: 312, r: 13 },
+  knee_right: { el: "circle", cx: 145, cy: 312, r: 13 },
+  lowleg_left: { el: "rect", x: 106, y: 322, width: 18, height: 74, rx: 9 },
+  lowleg_right: { el: "rect", x: 136, y: 322, width: 18, height: 74, rx: 9 },
+  ankle_left: { el: "circle", cx: 115, cy: 404, r: 9 },
+  ankle_right: { el: "circle", cx: 145, cy: 404, r: 9 },
+  foot_left: { el: "ellipse", cx: 115, cy: 424, rx: 14, ry: 10 },
+  foot_right: { el: "ellipse", cx: 145, cy: 424, rx: 14, ry: 10 }
+};
+var FILL_BACK = {
+  ...FILL,
+  thora: "#e2896d",
+  lumbar: "#d97fa0",
+  hip_left: "#c99bd6",
+  hip_right: "#c99bd6"
+};
+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",
+  ask: "Hvor ondt g\xF8r det? V\xE6lg et tal.",
+  close: "Luk",
+  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",
+  ask: "How much does it hurt? Pick a number.",
+  close: "Close",
+  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"
+};
+function resolveLabels(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 }
+  };
+}
+var VBW = 260;
+var VBH = 470;
+var MIN_HIT = 18;
+function center(s) {
+  if (s.el === "rect") return { x: s.x + s.width / 2, y: s.y + s.height / 2 };
+  return { x: s.cx, y: s.cy };
+}
+function hitShape(s) {
+  if (s.el === "circle") return { el: "circle", cx: s.cx, cy: s.cy, r: Math.max(s.r, MIN_HIT) };
+  if (s.el === "ellipse")
+    return { el: "ellipse", cx: s.cx, cy: s.cy, rx: Math.max(s.rx, MIN_HIT), ry: Math.max(s.ry, MIN_HIT) };
+  const c = center(s);
+  const w = Math.max(s.width, MIN_HIT * 2);
+  const h = Math.max(s.height, MIN_HIT * 2);
+  return { el: "rect", x: c.x - w / 2, y: c.y - h / 2, width: w, height: h, rx: s.rx };
+}
+function heat(v) {
+  return v >= 7 ? "#ef4444" : v >= 4 ? "#fb923c" : "#fcd34d";
+}
+function heatTier(v) {
+  return v >= 7 ? "high" : v >= 4 ? "mid" : "low";
+}
+function baseFill(key, rainbow, palette) {
+  return palette ? baseColorFor(key, palette) : `var(--bmap-region-${key}, var(--bmap-body, ${rainbow}))`;
+}
+function markedFill(v, palette) {
+  return palette ? heatFor(v, palette) : `var(--bmap-heat-${heatTier(v)}, ${heat(v)})`;
+}
+function shapeEl(s, props) {
+  if (s.el === "circle") return /* @__PURE__ */ jsx("circle", { cx: s.cx, cy: s.cy, r: s.r, ...props });
+  if (s.el === "ellipse") return /* @__PURE__ */ jsx("ellipse", { cx: s.cx, cy: s.cy, rx: s.rx, ry: s.ry, ...props });
+  return /* @__PURE__ */ jsx("rect", { x: s.x, y: s.y, width: s.width, height: s.height, rx: s.rx, ...props });
+}
+function chromeStyle(palette) {
+  if (!palette) return void 0;
+  const ui = palette.ui ?? {};
+  const vars = { "--bmap-accent": palette.selected };
+  if (ui.text) vars["--bmap-ink"] = ui.text;
+  if (ui.mutedText) vars["--bmap-muted"] = ui.mutedText;
+  if (ui.panelBg) vars["--bmap-panel"] = ui.panelBg;
+  if (ui.border) vars["--bmap-line"] = ui.border;
+  if (ui.badgeBg) vars["--bmap-badge-bg"] = ui.badgeBg;
+  if (ui.danger) vars["--bmap-danger"] = ui.danger;
+  return vars;
+}
+var STYLE_ID = "broberg-bodymap-styles";
+var STYLE = `
+.bmap{--bmap-accent:var(--primary,#0c7d77);--bmap-line:#e2e8f0;--bmap-panel:#fff;--bmap-ink:#1e293b;--bmap-muted:#475569;--bmap-badge-bg:#f1f5f9;--bmap-danger:#dc2626;
+  display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;font:15px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--bmap-ink)}
+.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:#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)}
+.bmap__zoom{display:inline-flex;gap:4px;margin-left:auto}
+.bmap__zoom button{font:inherit;font-weight:700;font-size:16px;line-height:1;width:36px;height:36px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-ink);border-radius:8px;cursor:pointer;transition:border-color .12s,transform .1s;display:flex;align-items:center;justify-content:center}
+.bmap__zoom button:hover{border-color:var(--bmap-accent)}
+.bmap__zoom button:active{transform:scale(.9)}
+.bmap__zoom button:disabled{opacity:.4;cursor:default}
+.bmap__svg{width:100%;height:auto;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:transparent;border-radius:14px}
+.bmap__vis{stroke:#fff;stroke-width:2.4;pointer-events:none;transition:filter .12s,stroke .12s,stroke-width .12s}
+.bmap__vis--sel{stroke:var(--bmap-accent);stroke-width:3.6}
+.bmap__hit{fill:transparent;cursor:pointer;outline:none}
+.bmap__hit--locked{cursor:default}
+.bmap__hit:hover + .bmap__vis{filter:brightness(1.08) saturate(1.15)}
+.bmap__hit:focus-visible + .bmap__vis{stroke:var(--bmap-accent);stroke-width:4;stroke-dasharray:4 2.5}
+.bmap__heatn{font:700 12px ui-sans-serif;fill:#fff;pointer-events:none}
+.bmap__panel{flex:1 1 240px;min-width:220px;border:1px solid var(--bmap-line);border-radius:14px;padding:16px 18px;background:var(--bmap-panel)}
+.bmap__panel--empty{color:var(--bmap-muted);font-size:13.5px}
+.bmap__ph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
+.bmap__ph b{font-size:16px}
+.bmap__close{margin-left:auto;font:inherit;font-size:20px;line-height:1;cursor:pointer;background:none;border:1px solid transparent;border-radius:8px;width:32px;height:32px;color:var(--bmap-muted,#475569)}
+.bmap__close:hover{background:var(--bmap-badge-bg,#f1f5f9)}
+.bmap__close:active{transform:scale(.94)}
+.bmap__close:focus-visible{outline:2px solid var(--bmap-accent,#0c7d77);outline-offset:2px}
+.bmap__code{font:11px ui-monospace,monospace;color:var(--bmap-muted);background:var(--bmap-badge-bg);border-radius:6px;padding:2px 7px}
+.bmap__ask{font-size:15px;font-weight:600;color:var(--bmap-ink);margin:0 0 10px}
+.bmap__lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bmap-muted);margin:0 0 7px}
+.bmap__scale{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
+.bmap__i{font:inherit;font-size:14px;font-weight:600;width:38px;height:38px;border-radius:9px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-ink);cursor:pointer;transition:border-color .1s,background .1s,transform .1s}
+.bmap__i:hover{border-color:var(--bmap-accent)}
+.bmap__i:active{transform:scale(.9)}
+.bmap__i--on{background:var(--bmap-accent);border-color:var(--bmap-accent);color:#fff}
+.bmap__chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
+.bmap__chip{font:inherit;font-size:13px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-muted);border-radius:999px;padding:9px 15px;cursor:pointer;transition:.1s}
+.bmap__chip:hover{border-color:var(--bmap-accent);color:var(--bmap-accent)}
+.bmap__chip:active{transform:scale(.96)}
+.bmap__chip--on{background:var(--bmap-ink);border-color:var(--bmap-ink);color:#fff}
+.bmap__rm{font:inherit;font-size:14px;font-weight:600;border:1px solid #f6c9c9;background:#fff;color:var(--bmap-danger);border-radius:9px;padding:10px 15px;cursor:pointer;transition:.1s}
+.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,#0c7d77);--bmap-line:#e2e8f0;--bmap-ink:#1e293b;--bmap-muted:#475569;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}
+  .bmap__panel{width:100%}
+  .bmap__i{width:46px;height:46px;font-size:16px}
+  .bmap__chip{padding:11px 17px;font-size:15px}
+  .bmap__vbtn{padding:10px 18px;font-size:15px}
+}
+@media (prefers-reduced-motion:reduce){.bmap *{transition:none !important}}
+`;
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = STYLE_ID;
+  el.textContent = STYLE;
+  document.head.appendChild(el);
+}
+var ZMIN = 1;
+var ZMAX = 4;
+var clampPan = (p, z2) => ({
+  x: Math.min(0, Math.max(VBW * (1 - z2), p.x)),
+  y: Math.min(0, Math.max(VBH * (1 - z2), p.y))
+});
+function BodyMap({
+  value,
+  defaultValue,
+  onChange,
+  config = {},
+  defaultView = "front",
+  onViewChange,
+  palette,
+  locale = "da",
+  labels,
+  readOnly = false,
+  onFeedback,
+  haptics,
+  className
+}) {
+  useEffect(ensureStyles, []);
+  const [internal, setInternal] = useState(defaultValue ?? []);
+  const [selected, setSelected] = useState(null);
+  const [view, setView] = useState(defaultView);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const report = value ?? internal;
+  const shapes = view === "back" ? SHAPES_BACK : SHAPES;
+  const fills = view === "back" ? FILL_BACK : FILL;
+  const L = resolveLabels(locale, labels);
+  const nameOf = (key) => L.regions[key] ?? getRegion(key)?.label ?? key;
+  const svgRef = useRef(null);
+  const zoomRef = useRef(1);
+  const panRef = useRef({ x: 0, y: 0 });
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const gesture = useRef({ startDist: 0, startZoom: 1, midVB: { x: 0, y: 0 }, start: { x: 0, y: 0 }, moved: false });
+  const suppressClick = useRef(false);
+  const setZP = (z2, p) => {
+    const cz = Math.max(ZMIN, Math.min(ZMAX, z2));
+    const cp = clampPan(p, cz);
+    zoomRef.current = cz;
+    panRef.current = cp;
+    setZoom(cz);
+    setPan(cp);
+  };
+  const screenToVB = (cx, cy) => {
+    const el = svgRef.current;
+    if (!el) return { x: VBW / 2, y: VBH / 2 };
+    const r = el.getBoundingClientRect();
+    if (!r.width || !r.height) return { x: VBW / 2, y: VBH / 2 };
+    return { x: (cx - r.left) / r.width * VBW, y: (cy - r.top) / r.height * VBH };
+  };
+  const zoomTo = (nz, focalVB) => {
+    const z2 = Math.max(ZMIN, Math.min(ZMAX, nz));
+    const p = panRef.current;
+    setZP(z2, { x: focalVB.x - (focalVB.x - p.x) * (z2 / zoomRef.current), y: focalVB.y - (focalVB.y - p.y) * (z2 / zoomRef.current) });
+  };
+  const zoomBtn = (factor) => zoomTo(zoomRef.current * factor, { x: VBW / 2, y: VBH / 2 });
+  const resetZoom = () => setZP(1, { x: 0, y: 0 });
+  const onPointerDown = (e) => {
+    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    const pts = [...pointers.current.values()];
+    if (pts.length === 2) {
+      gesture.current.startDist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+      gesture.current.startZoom = zoomRef.current;
+      gesture.current.midVB = screenToVB((pts[0].x + pts[1].x) / 2, (pts[0].y + pts[1].y) / 2);
+      gesture.current.moved = true;
+      suppressClick.current = true;
+    } else {
+      gesture.current.start = { x: e.clientX, y: e.clientY };
+      gesture.current.moved = false;
+    }
+  };
+  const onPointerMove = (e) => {
+    const prev = pointers.current.get(e.pointerId);
+    if (!prev) return;
+    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    const pts = [...pointers.current.values()];
+    if (pts.length >= 2) {
+      const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+      if (gesture.current.startDist > 0) zoomTo(gesture.current.startZoom * (dist / gesture.current.startDist), gesture.current.midVB);
+      return;
+    }
+    const el = svgRef.current;
+    const rect = el?.getBoundingClientRect();
+    if (Math.hypot(e.clientX - gesture.current.start.x, e.clientY - gesture.current.start.y) > 6) {
+      gesture.current.moved = true;
+      suppressClick.current = true;
+    }
+    if (zoomRef.current > 1 && rect && rect.width) {
+      const dxVB = (e.clientX - prev.x) / rect.width * VBW;
+      const dyVB = (e.clientY - prev.y) / rect.height * VBH;
+      setZP(zoomRef.current, { x: panRef.current.x + dxVB, y: panRef.current.y + dyVB });
+    }
+  };
+  const onPointerUp = (e) => {
+    pointers.current.delete(e.pointerId);
+    if (pointers.current.size === 0) window.setTimeout(() => {
+      suppressClick.current = false;
+    }, 60);
+  };
+  const changeView = (v) => {
+    if (v === view) return;
+    setView(v);
+    const sh = v === "back" ? SHAPES_BACK : SHAPES;
+    if (selected && !sh[selected]) setSelected(null);
+    onViewChange?.(v);
+  };
+  const commit = (next) => {
+    if (value === void 0) setInternal(next);
+    onChange?.(next);
+  };
+  const pointOf = (key) => report.find((p) => p.region === key);
+  const setPain = (key, intensity, type) => {
+    const point = painPointSchema.parse({ region: key, intensity, type, timestamp: (/* @__PURE__ */ new Date()).toISOString() });
+    commit([...report.filter((p) => p.region !== key), point]);
+  };
+  const removePain = (key) => {
+    commit(report.filter((p) => p.region !== key));
+    setSelected(null);
+  };
+  const applyPick = (key) => {
+    const what = decidePick(key, report, config);
+    emitFeedback(what, key, { onFeedback, haptics });
+    if (what === "ignore") return;
+    if (what === "clear") {
+      removePain(key);
+      return;
+    }
+    setSelected(key);
+  };
+  const pickRegion = (key) => {
+    if (suppressClick.current) {
+      suppressClick.current = false;
+      return;
+    }
+    applyPick(key);
+  };
+  const regions = resolveRegions(config);
+  const region = selected ? REGIONS.find((r) => r.key === selected) : void 0;
+  const current = selected ? pointOf(selected) : void 0;
+  const rootCls = ["bmap", className].filter(Boolean).join(" ");
+  const rootStyle = chromeStyle(palette);
+  const ariaFor = (r, marked, interactive = true) => {
+    if (marked) return L.ariaMarked(nameOf(r.key), marked.intensity, marked.type ? L.qualities[marked.type] : void 0);
+    return interactive ? L.ariaUnmarked(nameOf(r.key)) : nameOf(r.key);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: rootCls, "data-testid": "bodymap-root", style: rootStyle, children: [
+    /* @__PURE__ */ jsxs("div", { className: "bmap__stage", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bmap__bar", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": L.viewLabel, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "bmap__vbtn" + (view === "front" ? " bmap__vbtn--on" : ""),
+              "data-testid": "bodymap-view-front",
+              "aria-pressed": view === "front",
+              onClick: () => changeView("front"),
+              children: L.front
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "bmap__vbtn" + (view === "back" ? " bmap__vbtn--on" : ""),
+              "data-testid": "bodymap-view-back",
+              "aria-pressed": view === "back",
+              onClick: () => changeView("back"),
+              children: L.back
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bmap__zoom", role: "group", "aria-label": L.zoomLabel, children: [
+          /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "bodymap-zoom-out", "aria-label": L.zoomOut, disabled: zoom <= ZMIN, onClick: () => zoomBtn(1 / 1.4), children: "\u2212" }),
+          /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "bodymap-zoom-reset", "aria-label": L.zoomReset, disabled: zoom === 1 && pan.x === 0 && pan.y === 0, onClick: resetZoom, children: "\u2922" }),
+          /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "bodymap-zoom-in", "aria-label": L.zoomIn, disabled: zoom >= ZMAX, onClick: () => zoomBtn(1.4), children: "+" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          ref: svgRef,
+          className: "bmap__svg",
+          "data-testid": "bodymap-svg",
+          viewBox: "0 0 260 470",
+          role: "group",
+          "aria-label": L.svgLabel,
+          onPointerDown,
+          onPointerMove,
+          onPointerUp,
+          onPointerCancel: onPointerUp,
+          onWheel: (e) => zoomTo(zoomRef.current * (e.deltaY < 0 ? 1.12 : 1 / 1.12), screenToVB(e.clientX, e.clientY)),
+          children: /* @__PURE__ */ jsxs("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
+            regions.map((r) => {
+              const s = shapes[r.key];
+              if (!s) return null;
+              const marked = pointOf(r.key);
+              const interactive = isSelectable(r.key, config) && !readOnly;
+              const visCls = ["bmap__vis", selected === r.key && "bmap__vis--sel"].filter(Boolean).join(" ");
+              const fill = marked ? markedFill(marked.intensity, palette) : baseFill(r.key, fills[r.key] ?? "#cbd5e1", palette);
+              const hs = hitShape(s);
+              return /* @__PURE__ */ jsxs("g", { children: [
+                shapeEl(hs, {
+                  className: "bmap__hit" + (interactive ? "" : " bmap__hit--locked"),
+                  "data-testid": `bodymap-region-${r.key}`,
+                  role: interactive ? "button" : "img",
+                  tabIndex: interactive ? 0 : -1,
+                  "aria-label": ariaFor(r, marked, interactive),
+                  "aria-pressed": interactive ? selected === r.key : void 0,
+                  // Click is attached whenever the map is EDITABLE, even on a
+                  // locked region — the pick returns "ignore", changes nothing
+                  // and does not buzz, but it reaches onFeedback so an app can
+                  // say WHY nothing happened. Found by measurement (F052.22):
+                  // the 3D renderer raycasts every mesh and already reported
+                  // `ignore`, so gating this on `interactive` made the two
+                  // renderers answer the same tap differently. ARIA is
+                  // deliberately NOT widened — a locked region must not become
+                  // a focusable button that does nothing.
+                  onClick: readOnly ? void 0 : () => pickRegion(r.key),
+                  onKeyDown: interactive ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      suppressClick.current = false;
+                      applyPick(r.key);
+                    }
+                  } : void 0
+                }),
+                shapeEl(s, { className: visCls, fill, opacity: !readOnly && !isSelectable(r.key, config) ? 0.4 : 1 })
+              ] }, r.key);
+            }),
+            report.map((p) => {
+              const s = shapes[p.region];
+              if (!s || config[p.region]?.visible === false) return null;
+              const c = center(s);
+              return /* @__PURE__ */ jsx("text", { x: c.x, y: c.y + 4, textAnchor: "middle", className: "bmap__heatn", children: p.intensity }, p.region);
+            })
+          ] })
+        }
+      )
+    ] }),
+    readOnly ? null : region ? /* @__PURE__ */ jsxs("div", { className: "bmap__panel", "data-testid": "bodymap-panel", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bmap__ph", children: [
+        /* @__PURE__ */ jsx("b", { children: nameOf(region.key) }),
+        /* @__PURE__ */ jsx("span", { className: "bmap__code", children: region.code }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "bmap__close",
+            "data-testid": "bodymap-close",
+            "aria-label": L.close,
+            onClick: () => setSelected(null),
+            children: "\xD7"
+          }
+        )
+      ] }),
+      !current && L.ask && /* @__PURE__ */ jsx("p", { className: "bmap__ask", "data-testid": "bodymap-ask", "aria-live": "polite", children: L.ask }),
+      /* @__PURE__ */ jsx("p", { className: "bmap__lbl", id: "bmap-intensity-lbl", children: L.intensity }),
+      /* @__PURE__ */ jsx("div", { className: "bmap__scale", role: "group", "aria-labelledby": "bmap-intensity-lbl", children: Array.from({ length: 11 }, (_, n) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "bmap__i" + (current?.intensity === n ? " bmap__i--on" : ""),
+          "data-testid": `bodymap-intensity-${n}`,
+          "aria-pressed": current?.intensity === n,
+          onClick: () => setPain(region.key, n, current?.type),
+          children: n
+        },
+        n
+      )) }),
+      /* @__PURE__ */ jsx("p", { className: "bmap__lbl", id: "bmap-quality-lbl", children: L.quality }),
+      /* @__PURE__ */ jsx("div", { className: "bmap__chips", role: "group", "aria-labelledby": "bmap-quality-lbl", children: PAIN_TYPES.map((t) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "bmap__chip" + (current?.type === t ? " bmap__chip--on" : ""),
+          "data-testid": `bodymap-type-${t}`,
+          "aria-pressed": current?.type === t,
+          onClick: () => setPain(region.key, current?.intensity ?? 5, t),
+          children: L.qualities[t]
+        },
+        t
+      )) }),
+      current && /* @__PURE__ */ jsx("button", { type: "button", className: "bmap__rm", "data-testid": "bodymap-remove", onClick: () => removePain(region.key), children: L.remove })
+    ] }) : /* @__PURE__ */ 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__ */ jsxs("figure", { className: "bmapc__fig", "data-testid": testid, children: [
+    /* @__PURE__ */ jsx("figcaption", { className: "bmapc__cap", children: caption }),
+    /* @__PURE__ */ 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__ */ 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__ */ 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
+}) {
+  useEffect(ensureStyles, []);
+  const [view, setView] = useState(defaultView);
+  const L = resolveLabels(locale, labels);
+  const nameOf = (k) => L.regions[k] ?? getRegion(k)?.label ?? k;
+  const rootStyle = chromeStyle(palette);
+  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__ */ jsxs("div", { className: ["bmapc", className].filter(Boolean).join(" "), "data-testid": "bodymap-compare", style: rootStyle, children: [
+    /* @__PURE__ */ jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": L.viewLabel, style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "bmapc__bodies", children: [
+      /* @__PURE__ */ jsx(CompareFigure, { report: before, view, palette, caption: L.before, testid: "bodymap-compare-before" }),
+      /* @__PURE__ */ jsx(CompareFigure, { report: after, view, palette, caption: L.after, testid: "bodymap-compare-after" })
+    ] }),
+    changes.length ? /* @__PURE__ */ jsx("div", { className: "bmapc__delta", "data-testid": "bodymap-compare-delta", children: changes.map((c) => /* @__PURE__ */ jsxs("div", { className: "bmapc__row", "data-testid": `bodymap-compare-delta-${c.key}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "bmapc__rname", children: nameOf(c.key) }),
+      /* @__PURE__ */ jsxs("span", { className: "bmapc__rval", children: [
+        c.b ?? "\u2013",
+        " \u2192 ",
+        c.a ?? "\u2013"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: `bmapc__badge bmapc__badge--${c.status}`, children: L.change[c.status] })
+    ] }, c.key)) }) : /* @__PURE__ */ jsx("div", { className: "bmapc__empty", "data-testid": "bodymap-compare-delta", children: L.noChange })
+  ] });
+}
+
+export { BodyMap, BodyMapCompare, LABELS_DA, LABELS_EN };
+//# sourceMappingURL=preact.js.map
+//# sourceMappingURL=preact.js.map