Add BodyMap: a front and back body map for React

[YauhenBichel]

This is the first version of @molecare/react-body-map. It replaces the MoleCare web app's two different body drawings (BodyPartSelector and BodyMapWidget) with one reusable package.

One component, two uses

• Pick a region: selected + onSelect.
• Show what was recorded: counts, as neutral shades plus a number badge.
• Or both together, where each region button also says its count.

What makes it different

• Left and right are the person's. left_upper_arm is drawn on the viewer's right on the front view and on the viewer's left on the back view. A test checks every region from its geometry, so a swapped side can't slip through.
• Accessible.
  • When picking, each region is a named, focusable button that works with Enter and Space and says its count ("Chest, 2 recorded").
  • A read-only map gives screen readers a list of its counts, so nothing depends on colour.
• Calm. A count is never coloured good or bad; CONTRIBUTING rules out red or amber and risk levels.
• Yours to change.
  • Colours are --rbm-* CSS variables.
  • Every word is a prop, including each region's name for translation.
  • regions replaces the drawing entirely, and mirrorPath means a limb only needs drawing once.
• Stateless, SSR-safe, "use client", React 18+, no dependencies.

Regions: 13 per view, 26 in total: head, neck, chest/upper back, abdomen/lower back, pelvis/buttocks, and upper arm, forearm and hand, thigh, and lower leg and foot on each side.

Also included, the same as react-photo-compare:

• CI: lint, types, 100% coverage, the demo build, publint and arethetypeswrong, the tarball allowlist, and installs with 6 package managers and React 18.
• A release workflow for npm trusted publishing.
• A demo site on Pages.
• Issue and PR templates, CODEOWNERS and Dependabot.

Checked

• All CI steps pass locally, with 31 tests at 100% coverage.
• The packed package installs and server-renders with npm, pnpm, Yarn 1, Yarn 4 (PnP and node_modules) and Bun, and with React 18.
• All three README examples typecheck, and all 26 region ids are documented.
• In real Chrome, on the demo:
  • Clicking the arm on the viewer's right picks Left upper arm.
  • Enter and Space pick by keyboard.
  • The badges and the screen-reader list match the counts.
  • No sideways scroll or errors in light, dark or phone widths.
• gitleaks finds no leaks.

Not done yet: the repo is private, and the Pages site goes live once it's set up after merge. Switching the web app to this package is a separate PR once it's on npm.

🤖 Generated with Claude Code