react-muscle-stats 1.0.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/components/MuscleRadar/index.cjs.js

@@ -0,0 +1,84 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_normalization = require("./normalization.cjs.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let recharts = require("recharts");
+/**
+* A Recharts-powered radar / spider chart that normalizes raw body
+* measurements into development scores (0–100) and plots them on a
+* radial grid.  Optionally overlays a second data set for comparison.
+*/
+function MuscleRadar({ gender, measurements, compareMeasurements, color = "#8884d8", compareColor = "#82ca9d", label = "Current", compareLabel = "Comparison", width = "100%", height = 400, style, className, showTooltip = true, showLegend = true, fillOpacity = .35 }) {
+	const data = (0, react.useMemo)(() => {
+		const standards = require_normalization.MUSCLE_STANDARDS[gender];
+		if (!standards) return [];
+		return Object.keys(standards).map((muscle) => {
+			const { min, max } = standards[muscle];
+			const rawValue = measurements[muscle] ?? min;
+			const point = {
+				muscle,
+				score: require_normalization.calculateDevelopmentScore(rawValue, min, max),
+				rawValue
+			};
+			if (compareMeasurements) {
+				const compareRaw = compareMeasurements[muscle] ?? min;
+				point.compareScore = require_normalization.calculateDevelopmentScore(compareRaw, min, max);
+				point.compareRawValue = compareRaw;
+			}
+			return point;
+		});
+	}, [
+		gender,
+		measurements,
+		compareMeasurements
+	]);
+	if (data.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			width,
+			...style
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
+			width: "100%",
+			height,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.RadarChart, {
+				cx: "50%",
+				cy: "50%",
+				outerRadius: "80%",
+				data,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.PolarGrid, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.PolarAngleAxis, {
+						dataKey: "muscle",
+						tick: { fontSize: 12 }
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.PolarRadiusAxis, {
+						angle: 90,
+						domain: [0, 100],
+						tick: { fontSize: 10 }
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Radar, {
+						name: label,
+						dataKey: "score",
+						stroke: color,
+						fill: color,
+						fillOpacity
+					}),
+					compareMeasurements && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Radar, {
+						name: compareLabel,
+						dataKey: "compareScore",
+						stroke: compareColor,
+						fill: compareColor,
+						fillOpacity
+					}),
+					showTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {}),
+					showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Legend, {})
+				]
+			})
+		})
+	});
+}
+exports.MuscleRadar = MuscleRadar;
+
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/MuscleRadar/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","names":[],"sources":["../../../src/components/MuscleRadar/index.tsx"],"sourcesContent":["import { useMemo, type CSSProperties } from 'react';\r\nimport {\r\n  Radar,\r\n  RadarChart,\r\n  PolarGrid,\r\n  PolarAngleAxis,\r\n  PolarRadiusAxis,\r\n  ResponsiveContainer,\r\n  Tooltip,\r\n  Legend,\r\n} from 'recharts';\r\nimport {\r\n  MUSCLE_STANDARDS,\r\n  calculateDevelopmentScore,\r\n  type Gender,\r\n} from './normalization';\r\n\r\nexport interface BodyMeasurements {\r\n  /** Measurement values in inches, keyed by muscle/body-part name. */\r\n  [muscle: string]: number;\r\n}\r\n\r\nexport interface MuscleRadarProps {\r\n  /** Gender – determines which min/max standards are used. */\r\n  gender: Gender;\r\n  /** Raw body measurements in inches. Keys should match `MUSCLE_STANDARDS` keys. */\r\n  measurements: BodyMeasurements;\r\n  /** Optional second data set to overlay (e.g. goals or previous measurements). */\r\n  compareMeasurements?: BodyMeasurements;\r\n  /** Fill colour for the primary radar area (default: `'#8884d8'`). */\r\n  color?: string;\r\n  /** Fill colour for the comparison radar area (default: `'#82ca9d'`). */\r\n  compareColor?: string;\r\n  /** Label for the primary data set shown in the legend (default: `'Current'`). */\r\n  label?: string;\r\n  /** Label for the comparison data set (default: `'Comparison'`). */\r\n  compareLabel?: string;\r\n  /** Width of the chart container (default: `'100%'`). */\r\n  width?: string | number;\r\n  /** Height of the chart container (default: `400`). */\r\n  height?: number;\r\n  /** Optional inline styles applied to the outer wrapper. */\r\n  style?: CSSProperties;\r\n  /** Optional CSS class name for the outer wrapper. */\r\n  className?: string;\r\n  /** Whether to show the tooltip on hover (default: `true`). */\r\n  showTooltip?: boolean;\r\n  /** Whether to show the legend (default: `true`). */\r\n  showLegend?: boolean;\r\n  /** Fill opacity for radar areas (default: `0.35`). */\r\n  fillOpacity?: number;\r\n}\r\n\r\ninterface RadarDataPoint {\r\n  muscle: string;\r\n  score: number;\r\n  rawValue: number;\r\n  compareScore?: number;\r\n  compareRawValue?: number;\r\n}\r\n\r\n/**\r\n * A Recharts-powered radar / spider chart that normalizes raw body\r\n * measurements into development scores (0–100) and plots them on a\r\n * radial grid.  Optionally overlays a second data set for comparison.\r\n */\r\nexport function MuscleRadar({\r\n  gender,\r\n  measurements,\r\n  compareMeasurements,\r\n  color = '#8884d8',\r\n  compareColor = '#82ca9d',\r\n  label = 'Current',\r\n  compareLabel = 'Comparison',\r\n  width = '100%',\r\n  height = 400,\r\n  style,\r\n  className,\r\n  showTooltip = true,\r\n  showLegend = true,\r\n  fillOpacity = 0.35,\r\n}: MuscleRadarProps) {\r\n  const data = useMemo<RadarDataPoint[]>(() => {\r\n    const standards = MUSCLE_STANDARDS[gender];\r\n    if (!standards) return [];\r\n\r\n    return Object.keys(standards).map((muscle) => {\r\n      const { min, max } = standards[muscle];\r\n      const rawValue = measurements[muscle] ?? min;\r\n      const score = calculateDevelopmentScore(rawValue, min, max);\r\n\r\n      const point: RadarDataPoint = { muscle, score, rawValue };\r\n\r\n      if (compareMeasurements) {\r\n        const compareRaw = compareMeasurements[muscle] ?? min;\r\n        point.compareScore = calculateDevelopmentScore(compareRaw, min, max);\r\n        point.compareRawValue = compareRaw;\r\n      }\r\n\r\n      return point;\r\n    });\r\n  }, [gender, measurements, compareMeasurements]);\r\n\r\n  if (data.length === 0) return null;\r\n\r\n  return (\r\n    <div className={className} style={{ width, ...style }}>\r\n      <ResponsiveContainer width=\"100%\" height={height}>\r\n        <RadarChart cx=\"50%\" cy=\"50%\" outerRadius=\"80%\" data={data}>\r\n          <PolarGrid />\r\n          <PolarAngleAxis\r\n            dataKey=\"muscle\"\r\n            tick={{ fontSize: 12 }}\r\n          />\r\n          <PolarRadiusAxis\r\n            angle={90}\r\n            domain={[0, 100]}\r\n            tick={{ fontSize: 10 }}\r\n          />\r\n\r\n          <Radar\r\n            name={label}\r\n            dataKey=\"score\"\r\n            stroke={color}\r\n            fill={color}\r\n            fillOpacity={fillOpacity}\r\n          />\r\n\r\n          {compareMeasurements && (\r\n            <Radar\r\n              name={compareLabel}\r\n              dataKey=\"compareScore\"\r\n              stroke={compareColor}\r\n              fill={compareColor}\r\n              fillOpacity={fillOpacity}\r\n            />\r\n          )}\r\n\r\n          {showTooltip && <Tooltip />}\r\n          {showLegend && <Legend />}\r\n        </RadarChart>\r\n      </ResponsiveContainer>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;;AAkEA,SAAgB,YAAY,EAC1B,QACA,cACA,qBACA,QAAQ,WACR,eAAe,WACf,QAAQ,WACR,eAAe,cACf,QAAQ,QACR,SAAS,KACT,OACA,WACA,cAAc,MACd,aAAa,MACb,cAAc,OACK;CACnB,MAAM,QAAA,GAAA,MAAA,eAAuC;EAC3C,MAAM,YAAY,sBAAA,iBAAiB;AACnC,MAAI,CAAC,UAAW,QAAO,EAAE;AAEzB,SAAO,OAAO,KAAK,UAAU,CAAC,KAAK,WAAW;GAC5C,MAAM,EAAE,KAAK,QAAQ,UAAU;GAC/B,MAAM,WAAW,aAAa,WAAW;GAGzC,MAAM,QAAwB;IAAE;IAAQ,OAF1B,sBAAA,0BAA0B,UAAU,KAAK,IAAI;IAEZ;IAAU;AAEzD,OAAI,qBAAqB;IACvB,MAAM,aAAa,oBAAoB,WAAW;AAClD,UAAM,eAAe,sBAAA,0BAA0B,YAAY,KAAK,IAAI;AACpE,UAAM,kBAAkB;;AAG1B,UAAO;IACP;IACD;EAAC;EAAQ;EAAc;EAAoB,CAAC;AAE/C,KAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAgB;EAAW,OAAO;GAAE;GAAO,GAAG;GAAO;YACnD,iBAAA,GAAA,kBAAA,KAAC,SAAA,qBAAD;GAAqB,OAAM;GAAe;aACxC,iBAAA,GAAA,kBAAA,MAAC,SAAA,YAAD;IAAY,IAAG;IAAM,IAAG;IAAM,aAAY;IAAY;cAAtD;KACE,iBAAA,GAAA,kBAAA,KAAC,SAAA,WAAD,EAAa,CAAA;KACb,iBAAA,GAAA,kBAAA,KAAC,SAAA,gBAAD;MACE,SAAQ;MACR,MAAM,EAAE,UAAU,IAAI;MACtB,CAAA;KACF,iBAAA,GAAA,kBAAA,KAAC,SAAA,iBAAD;MACE,OAAO;MACP,QAAQ,CAAC,GAAG,IAAI;MAChB,MAAM,EAAE,UAAU,IAAI;MACtB,CAAA;KAEF,iBAAA,GAAA,kBAAA,KAAC,SAAA,OAAD;MACE,MAAM;MACN,SAAQ;MACR,QAAQ;MACR,MAAM;MACO;MACb,CAAA;KAED,uBACC,iBAAA,GAAA,kBAAA,KAAC,SAAA,OAAD;MACE,MAAM;MACN,SAAQ;MACR,QAAQ;MACR,MAAM;MACO;MACb,CAAA;KAGH,eAAe,iBAAA,GAAA,kBAAA,KAAC,SAAA,SAAD,EAAW,CAAA;KAC1B,cAAc,iBAAA,GAAA,kBAAA,KAAC,SAAA,QAAD,EAAU,CAAA;KACd;;GACO,CAAA;EAClB,CAAA"}

package/dist/components/MuscleRadar/index.d.ts

@@ -0,0 +1,43 @@
+import { CSSProperties } from 'react';
+import { Gender } from './normalization';
+export interface BodyMeasurements {
+    /** Measurement values in inches, keyed by muscle/body-part name. */
+    [muscle: string]: number;
+}
+export interface MuscleRadarProps {
+    /** Gender – determines which min/max standards are used. */
+    gender: Gender;
+    /** Raw body measurements in inches. Keys should match `MUSCLE_STANDARDS` keys. */
+    measurements: BodyMeasurements;
+    /** Optional second data set to overlay (e.g. goals or previous measurements). */
+    compareMeasurements?: BodyMeasurements;
+    /** Fill colour for the primary radar area (default: `'#8884d8'`). */
+    color?: string;
+    /** Fill colour for the comparison radar area (default: `'#82ca9d'`). */
+    compareColor?: string;
+    /** Label for the primary data set shown in the legend (default: `'Current'`). */
+    label?: string;
+    /** Label for the comparison data set (default: `'Comparison'`). */
+    compareLabel?: string;
+    /** Width of the chart container (default: `'100%'`). */
+    width?: string | number;
+    /** Height of the chart container (default: `400`). */
+    height?: number;
+    /** Optional inline styles applied to the outer wrapper. */
+    style?: CSSProperties;
+    /** Optional CSS class name for the outer wrapper. */
+    className?: string;
+    /** Whether to show the tooltip on hover (default: `true`). */
+    showTooltip?: boolean;
+    /** Whether to show the legend (default: `true`). */
+    showLegend?: boolean;
+    /** Fill opacity for radar areas (default: `0.35`). */
+    fillOpacity?: number;
+}
+/**
+ * A Recharts-powered radar / spider chart that normalizes raw body
+ * measurements into development scores (0–100) and plots them on a
+ * radial grid.  Optionally overlays a second data set for comparison.
+ */
+export declare function MuscleRadar({ gender, measurements, compareMeasurements, color, compareColor, label, compareLabel, width, height, style, className, showTooltip, showLegend, fillOpacity, }: MuscleRadarProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MuscleRadar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MuscleRadar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAWpD,OAAO,EAGL,KAAK,MAAM,EACZ,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,4DAA4D;IAC5D,MAAM,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,YAAY,EAAE,gBAAgB,CAAC;IAC/B,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,gBAAgB,CAAC;IACvC,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAUD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,YAAY,EACZ,mBAAmB,EACnB,KAAiB,EACjB,YAAwB,EACxB,KAAiB,EACjB,YAA2B,EAC3B,KAAc,EACd,MAAY,EACZ,KAAK,EACL,SAAS,EACT,WAAkB,EAClB,UAAiB,EACjB,WAAkB,GACnB,EAAE,gBAAgB,kDA+DlB"}

package/dist/components/MuscleRadar/index.es.js

@@ -0,0 +1,83 @@
+import { MUSCLE_STANDARDS, calculateDevelopmentScore } from "./normalization.es.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Legend, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, ResponsiveContainer, Tooltip } from "recharts";
+/**
+* A Recharts-powered radar / spider chart that normalizes raw body
+* measurements into development scores (0–100) and plots them on a
+* radial grid.  Optionally overlays a second data set for comparison.
+*/
+function MuscleRadar({ gender, measurements, compareMeasurements, color = "#8884d8", compareColor = "#82ca9d", label = "Current", compareLabel = "Comparison", width = "100%", height = 400, style, className, showTooltip = true, showLegend = true, fillOpacity = .35 }) {
+	const data = useMemo(() => {
+		const standards = MUSCLE_STANDARDS[gender];
+		if (!standards) return [];
+		return Object.keys(standards).map((muscle) => {
+			const { min, max } = standards[muscle];
+			const rawValue = measurements[muscle] ?? min;
+			const point = {
+				muscle,
+				score: calculateDevelopmentScore(rawValue, min, max),
+				rawValue
+			};
+			if (compareMeasurements) {
+				const compareRaw = compareMeasurements[muscle] ?? min;
+				point.compareScore = calculateDevelopmentScore(compareRaw, min, max);
+				point.compareRawValue = compareRaw;
+			}
+			return point;
+		});
+	}, [
+		gender,
+		measurements,
+		compareMeasurements
+	]);
+	if (data.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		style: {
+			width,
+			...style
+		},
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height,
+			children: /* @__PURE__ */ jsxs(RadarChart, {
+				cx: "50%",
+				cy: "50%",
+				outerRadius: "80%",
+				data,
+				children: [
+					/* @__PURE__ */ jsx(PolarGrid, {}),
+					/* @__PURE__ */ jsx(PolarAngleAxis, {
+						dataKey: "muscle",
+						tick: { fontSize: 12 }
+					}),
+					/* @__PURE__ */ jsx(PolarRadiusAxis, {
+						angle: 90,
+						domain: [0, 100],
+						tick: { fontSize: 10 }
+					}),
+					/* @__PURE__ */ jsx(Radar, {
+						name: label,
+						dataKey: "score",
+						stroke: color,
+						fill: color,
+						fillOpacity
+					}),
+					compareMeasurements && /* @__PURE__ */ jsx(Radar, {
+						name: compareLabel,
+						dataKey: "compareScore",
+						stroke: compareColor,
+						fill: compareColor,
+						fillOpacity
+					}),
+					showTooltip && /* @__PURE__ */ jsx(Tooltip, {}),
+					showLegend && /* @__PURE__ */ jsx(Legend, {})
+				]
+			})
+		})
+	});
+}
+export { MuscleRadar };
+
+//# sourceMappingURL=index.es.js.map

package/dist/components/MuscleRadar/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../src/components/MuscleRadar/index.tsx"],"sourcesContent":["import { useMemo, type CSSProperties } from 'react';\r\nimport {\r\n  Radar,\r\n  RadarChart,\r\n  PolarGrid,\r\n  PolarAngleAxis,\r\n  PolarRadiusAxis,\r\n  ResponsiveContainer,\r\n  Tooltip,\r\n  Legend,\r\n} from 'recharts';\r\nimport {\r\n  MUSCLE_STANDARDS,\r\n  calculateDevelopmentScore,\r\n  type Gender,\r\n} from './normalization';\r\n\r\nexport interface BodyMeasurements {\r\n  /** Measurement values in inches, keyed by muscle/body-part name. */\r\n  [muscle: string]: number;\r\n}\r\n\r\nexport interface MuscleRadarProps {\r\n  /** Gender – determines which min/max standards are used. */\r\n  gender: Gender;\r\n  /** Raw body measurements in inches. Keys should match `MUSCLE_STANDARDS` keys. */\r\n  measurements: BodyMeasurements;\r\n  /** Optional second data set to overlay (e.g. goals or previous measurements). */\r\n  compareMeasurements?: BodyMeasurements;\r\n  /** Fill colour for the primary radar area (default: `'#8884d8'`). */\r\n  color?: string;\r\n  /** Fill colour for the comparison radar area (default: `'#82ca9d'`). */\r\n  compareColor?: string;\r\n  /** Label for the primary data set shown in the legend (default: `'Current'`). */\r\n  label?: string;\r\n  /** Label for the comparison data set (default: `'Comparison'`). */\r\n  compareLabel?: string;\r\n  /** Width of the chart container (default: `'100%'`). */\r\n  width?: string | number;\r\n  /** Height of the chart container (default: `400`). */\r\n  height?: number;\r\n  /** Optional inline styles applied to the outer wrapper. */\r\n  style?: CSSProperties;\r\n  /** Optional CSS class name for the outer wrapper. */\r\n  className?: string;\r\n  /** Whether to show the tooltip on hover (default: `true`). */\r\n  showTooltip?: boolean;\r\n  /** Whether to show the legend (default: `true`). */\r\n  showLegend?: boolean;\r\n  /** Fill opacity for radar areas (default: `0.35`). */\r\n  fillOpacity?: number;\r\n}\r\n\r\ninterface RadarDataPoint {\r\n  muscle: string;\r\n  score: number;\r\n  rawValue: number;\r\n  compareScore?: number;\r\n  compareRawValue?: number;\r\n}\r\n\r\n/**\r\n * A Recharts-powered radar / spider chart that normalizes raw body\r\n * measurements into development scores (0–100) and plots them on a\r\n * radial grid.  Optionally overlays a second data set for comparison.\r\n */\r\nexport function MuscleRadar({\r\n  gender,\r\n  measurements,\r\n  compareMeasurements,\r\n  color = '#8884d8',\r\n  compareColor = '#82ca9d',\r\n  label = 'Current',\r\n  compareLabel = 'Comparison',\r\n  width = '100%',\r\n  height = 400,\r\n  style,\r\n  className,\r\n  showTooltip = true,\r\n  showLegend = true,\r\n  fillOpacity = 0.35,\r\n}: MuscleRadarProps) {\r\n  const data = useMemo<RadarDataPoint[]>(() => {\r\n    const standards = MUSCLE_STANDARDS[gender];\r\n    if (!standards) return [];\r\n\r\n    return Object.keys(standards).map((muscle) => {\r\n      const { min, max } = standards[muscle];\r\n      const rawValue = measurements[muscle] ?? min;\r\n      const score = calculateDevelopmentScore(rawValue, min, max);\r\n\r\n      const point: RadarDataPoint = { muscle, score, rawValue };\r\n\r\n      if (compareMeasurements) {\r\n        const compareRaw = compareMeasurements[muscle] ?? min;\r\n        point.compareScore = calculateDevelopmentScore(compareRaw, min, max);\r\n        point.compareRawValue = compareRaw;\r\n      }\r\n\r\n      return point;\r\n    });\r\n  }, [gender, measurements, compareMeasurements]);\r\n\r\n  if (data.length === 0) return null;\r\n\r\n  return (\r\n    <div className={className} style={{ width, ...style }}>\r\n      <ResponsiveContainer width=\"100%\" height={height}>\r\n        <RadarChart cx=\"50%\" cy=\"50%\" outerRadius=\"80%\" data={data}>\r\n          <PolarGrid />\r\n          <PolarAngleAxis\r\n            dataKey=\"muscle\"\r\n            tick={{ fontSize: 12 }}\r\n          />\r\n          <PolarRadiusAxis\r\n            angle={90}\r\n            domain={[0, 100]}\r\n            tick={{ fontSize: 10 }}\r\n          />\r\n\r\n          <Radar\r\n            name={label}\r\n            dataKey=\"score\"\r\n            stroke={color}\r\n            fill={color}\r\n            fillOpacity={fillOpacity}\r\n          />\r\n\r\n          {compareMeasurements && (\r\n            <Radar\r\n              name={compareLabel}\r\n              dataKey=\"compareScore\"\r\n              stroke={compareColor}\r\n              fill={compareColor}\r\n              fillOpacity={fillOpacity}\r\n            />\r\n          )}\r\n\r\n          {showTooltip && <Tooltip />}\r\n          {showLegend && <Legend />}\r\n        </RadarChart>\r\n      </ResponsiveContainer>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;AAkEA,SAAgB,YAAY,EAC1B,QACA,cACA,qBACA,QAAQ,WACR,eAAe,WACf,QAAQ,WACR,eAAe,cACf,QAAQ,QACR,SAAS,KACT,OACA,WACA,cAAc,MACd,aAAa,MACb,cAAc,OACK;CACnB,MAAM,OAAO,cAAgC;EAC3C,MAAM,YAAY,iBAAiB;AACnC,MAAI,CAAC,UAAW,QAAO,EAAE;AAEzB,SAAO,OAAO,KAAK,UAAU,CAAC,KAAK,WAAW;GAC5C,MAAM,EAAE,KAAK,QAAQ,UAAU;GAC/B,MAAM,WAAW,aAAa,WAAW;GAGzC,MAAM,QAAwB;IAAE;IAAQ,OAF1B,0BAA0B,UAAU,KAAK,IAAI;IAEZ;IAAU;AAEzD,OAAI,qBAAqB;IACvB,MAAM,aAAa,oBAAoB,WAAW;AAClD,UAAM,eAAe,0BAA0B,YAAY,KAAK,IAAI;AACpE,UAAM,kBAAkB;;AAG1B,UAAO;IACP;IACD;EAAC;EAAQ;EAAc;EAAoB,CAAC;AAE/C,KAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,QACE,oBAAC,OAAD;EAAgB;EAAW,OAAO;GAAE;GAAO,GAAG;GAAO;YACnD,oBAAC,qBAAD;GAAqB,OAAM;GAAe;aACxC,qBAAC,YAAD;IAAY,IAAG;IAAM,IAAG;IAAM,aAAY;IAAY;cAAtD;KACE,oBAAC,WAAD,EAAa,CAAA;KACb,oBAAC,gBAAD;MACE,SAAQ;MACR,MAAM,EAAE,UAAU,IAAI;MACtB,CAAA;KACF,oBAAC,iBAAD;MACE,OAAO;MACP,QAAQ,CAAC,GAAG,IAAI;MAChB,MAAM,EAAE,UAAU,IAAI;MACtB,CAAA;KAEF,oBAAC,OAAD;MACE,MAAM;MACN,SAAQ;MACR,QAAQ;MACR,MAAM;MACO;MACb,CAAA;KAED,uBACC,oBAAC,OAAD;MACE,MAAM;MACN,SAAQ;MACR,QAAQ;MACR,MAAM;MACO;MACb,CAAA;KAGH,eAAe,oBAAC,SAAD,EAAW,CAAA;KAC1B,cAAc,oBAAC,QAAD,EAAU,CAAA;KACd;;GACO,CAAA;EAClB,CAAA"}

package/dist/components/MuscleRadar/normalization.cjs.js

@@ -0,0 +1,100 @@
+/**
+* Physiological min/max limits in inches for body measurements.
+* Used to normalize raw measurements into 0–100 development scores.
+*/
+const MUSCLE_STANDARDS = {
+	male: {
+		chest: {
+			min: 32,
+			max: 50
+		},
+		shoulders: {
+			min: 38,
+			max: 56
+		},
+		biceps: {
+			min: 10,
+			max: 20
+		},
+		forearm: {
+			min: 8,
+			max: 15
+		},
+		waist: {
+			min: 26,
+			max: 40
+		},
+		hips: {
+			min: 32,
+			max: 44
+		},
+		thigh: {
+			min: 18,
+			max: 30
+		},
+		calf: {
+			min: 12,
+			max: 20
+		},
+		neck: {
+			min: 13,
+			max: 20
+		}
+	},
+	female: {
+		chest: {
+			min: 28,
+			max: 44
+		},
+		shoulders: {
+			min: 34,
+			max: 48
+		},
+		biceps: {
+			min: 8,
+			max: 16
+		},
+		forearm: {
+			min: 6,
+			max: 12
+		},
+		waist: {
+			min: 22,
+			max: 36
+		},
+		hips: {
+			min: 30,
+			max: 46
+		},
+		thigh: {
+			min: 16,
+			max: 28
+		},
+		calf: {
+			min: 10,
+			max: 18
+		},
+		neck: {
+			min: 11,
+			max: 16
+		}
+	}
+};
+/**
+* Converts a raw inch measurement into a 0–100 development score.
+* The score is clamped between 5 and 100.
+*
+* @param val - The measured value in inches
+* @param min - The physiological minimum for the measurement
+* @param max - The physiological maximum for the measurement
+* @returns A score between 5 and 100
+*/
+function calculateDevelopmentScore(val, min, max) {
+	if (max === min) return 5;
+	const raw = (val - min) / (max - min) * 100;
+	return Math.min(100, Math.max(5, Math.round(raw)));
+}
+exports.MUSCLE_STANDARDS = MUSCLE_STANDARDS;
+exports.calculateDevelopmentScore = calculateDevelopmentScore;
+
+//# sourceMappingURL=normalization.cjs.js.map

package/dist/components/MuscleRadar/normalization.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalization.cjs.js","names":[],"sources":["../../../src/components/MuscleRadar/normalization.ts"],"sourcesContent":["export type Gender = 'male' | 'female';\r\n\r\nexport interface MuscleStandards {\r\n  min: number;\r\n  max: number;\r\n}\r\n\r\n/**\r\n * Physiological min/max limits in inches for body measurements.\r\n * Used to normalize raw measurements into 0–100 development scores.\r\n */\r\nexport const MUSCLE_STANDARDS: Record<Gender, Record<string, MuscleStandards>> = {\r\n  male: {\r\n    chest: { min: 32, max: 50 },\r\n    shoulders: { min: 38, max: 56 },\r\n    biceps: { min: 10, max: 20 },\r\n    forearm: { min: 8, max: 15 },\r\n    waist: { min: 26, max: 40 },\r\n    hips: { min: 32, max: 44 },\r\n    thigh: { min: 18, max: 30 },\r\n    calf: { min: 12, max: 20 },\r\n    neck: { min: 13, max: 20 },\r\n  },\r\n  female: {\r\n    chest: { min: 28, max: 44 },\r\n    shoulders: { min: 34, max: 48 },\r\n    biceps: { min: 8, max: 16 },\r\n    forearm: { min: 6, max: 12 },\r\n    waist: { min: 22, max: 36 },\r\n    hips: { min: 30, max: 46 },\r\n    thigh: { min: 16, max: 28 },\r\n    calf: { min: 10, max: 18 },\r\n    neck: { min: 11, max: 16 },\r\n  },\r\n};\r\n\r\n/**\r\n * Converts a raw inch measurement into a 0–100 development score.\r\n * The score is clamped between 5 and 100.\r\n *\r\n * @param val - The measured value in inches\r\n * @param min - The physiological minimum for the measurement\r\n * @param max - The physiological maximum for the measurement\r\n * @returns A score between 5 and 100\r\n */\r\nexport function calculateDevelopmentScore(val: number, min: number, max: number): number {\r\n  if (max === min) return 5;\r\n  const raw = ((val - min) / (max - min)) * 100;\r\n  return Math.min(100, Math.max(5, Math.round(raw)));\r\n}\r\n"],"mappings":";;;;AAWA,MAAa,mBAAoE;CAC/E,MAAM;EACJ,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,WAAW;GAAE,KAAK;GAAI,KAAK;GAAI;EAC/B,QAAQ;GAAE,KAAK;GAAI,KAAK;GAAI;EAC5B,SAAS;GAAE,KAAK;GAAG,KAAK;GAAI;EAC5B,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC1B,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC1B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B;CACD,QAAQ;EACN,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,WAAW;GAAE,KAAK;GAAI,KAAK;GAAI;EAC/B,QAAQ;GAAE,KAAK;GAAG,KAAK;GAAI;EAC3B,SAAS;GAAE,KAAK;GAAG,KAAK;GAAI;EAC5B,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC1B,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC1B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B;CACF;;;;;;;;;;AAWD,SAAgB,0BAA0B,KAAa,KAAa,KAAqB;AACvF,KAAI,QAAQ,IAAK,QAAO;CACxB,MAAM,OAAQ,MAAM,QAAQ,MAAM,OAAQ;AAC1C,QAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,MAAM,IAAI,CAAC,CAAC"}

package/dist/components/MuscleRadar/normalization.d.ts

@@ -0,0 +1,21 @@
+export type Gender = 'male' | 'female';
+export interface MuscleStandards {
+    min: number;
+    max: number;
+}
+/**
+ * Physiological min/max limits in inches for body measurements.
+ * Used to normalize raw measurements into 0–100 development scores.
+ */
+export declare const MUSCLE_STANDARDS: Record<Gender, Record<string, MuscleStandards>>;
+/**
+ * Converts a raw inch measurement into a 0–100 development score.
+ * The score is clamped between 5 and 100.
+ *
+ * @param val - The measured value in inches
+ * @param min - The physiological minimum for the measurement
+ * @param max - The physiological maximum for the measurement
+ * @returns A score between 5 and 100
+ */
+export declare function calculateDevelopmentScore(val: number, min: number, max: number): number;
+//# sourceMappingURL=normalization.d.ts.map

package/dist/components/MuscleRadar/normalization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalization.d.ts","sourceRoot":"","sources":["../../../src/components/MuscleRadar/normalization.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAuB5E,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,yBAAyB,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAIvF"}

package/dist/components/MuscleRadar/normalization.es.js

@@ -0,0 +1,99 @@
+/**
+* Physiological min/max limits in inches for body measurements.
+* Used to normalize raw measurements into 0–100 development scores.
+*/
+const MUSCLE_STANDARDS = {
+	male: {
+		chest: {
+			min: 32,
+			max: 50
+		},
+		shoulders: {
+			min: 38,
+			max: 56
+		},
+		biceps: {
+			min: 10,
+			max: 20
+		},
+		forearm: {
+			min: 8,
+			max: 15
+		},
+		waist: {
+			min: 26,
+			max: 40
+		},
+		hips: {
+			min: 32,
+			max: 44
+		},
+		thigh: {
+			min: 18,
+			max: 30
+		},
+		calf: {
+			min: 12,
+			max: 20
+		},
+		neck: {
+			min: 13,
+			max: 20
+		}
+	},
+	female: {
+		chest: {
+			min: 28,
+			max: 44
+		},
+		shoulders: {
+			min: 34,
+			max: 48
+		},
+		biceps: {
+			min: 8,
+			max: 16
+		},
+		forearm: {
+			min: 6,
+			max: 12
+		},
+		waist: {
+			min: 22,
+			max: 36
+		},
+		hips: {
+			min: 30,
+			max: 46
+		},
+		thigh: {
+			min: 16,
+			max: 28
+		},
+		calf: {
+			min: 10,
+			max: 18
+		},
+		neck: {
+			min: 11,
+			max: 16
+		}
+	}
+};
+/**
+* Converts a raw inch measurement into a 0–100 development score.
+* The score is clamped between 5 and 100.
+*
+* @param val - The measured value in inches
+* @param min - The physiological minimum for the measurement
+* @param max - The physiological maximum for the measurement
+* @returns A score between 5 and 100
+*/
+function calculateDevelopmentScore(val, min, max) {
+	if (max === min) return 5;
+	const raw = (val - min) / (max - min) * 100;
+	return Math.min(100, Math.max(5, Math.round(raw)));
+}
+export { MUSCLE_STANDARDS, calculateDevelopmentScore };
+
+//# sourceMappingURL=normalization.es.js.map

package/dist/components/MuscleRadar/normalization.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalization.es.js","names":[],"sources":["../../../src/components/MuscleRadar/normalization.ts"],"sourcesContent":["export type Gender = 'male' | 'female';\r\n\r\nexport interface MuscleStandards {\r\n  min: number;\r\n  max: number;\r\n}\r\n\r\n/**\r\n * Physiological min/max limits in inches for body measurements.\r\n * Used to normalize raw measurements into 0–100 development scores.\r\n */\r\nexport const MUSCLE_STANDARDS: Record<Gender, Record<string, MuscleStandards>> = {\r\n  male: {\r\n    chest: { min: 32, max: 50 },\r\n    shoulders: { min: 38, max: 56 },\r\n    biceps: { min: 10, max: 20 },\r\n    forearm: { min: 8, max: 15 },\r\n    waist: { min: 26, max: 40 },\r\n    hips: { min: 32, max: 44 },\r\n    thigh: { min: 18, max: 30 },\r\n    calf: { min: 12, max: 20 },\r\n    neck: { min: 13, max: 20 },\r\n  },\r\n  female: {\r\n    chest: { min: 28, max: 44 },\r\n    shoulders: { min: 34, max: 48 },\r\n    biceps: { min: 8, max: 16 },\r\n    forearm: { min: 6, max: 12 },\r\n    waist: { min: 22, max: 36 },\r\n    hips: { min: 30, max: 46 },\r\n    thigh: { min: 16, max: 28 },\r\n    calf: { min: 10, max: 18 },\r\n    neck: { min: 11, max: 16 },\r\n  },\r\n};\r\n\r\n/**\r\n * Converts a raw inch measurement into a 0–100 development score.\r\n * The score is clamped between 5 and 100.\r\n *\r\n * @param val - The measured value in inches\r\n * @param min - The physiological minimum for the measurement\r\n * @param max - The physiological maximum for the measurement\r\n * @returns A score between 5 and 100\r\n */\r\nexport function calculateDevelopmentScore(val: number, min: number, max: number): number {\r\n  if (max === min) return 5;\r\n  const raw = ((val - min) / (max - min)) * 100;\r\n  return Math.min(100, Math.max(5, Math.round(raw)));\r\n}\r\n"],"mappings":";;;;AAWA,MAAa,mBAAoE;CAC/E,MAAM;EACJ,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,WAAW;GAAE,KAAK;GAAI,KAAK;GAAI;EAC/B,QAAQ;GAAE,KAAK;GAAI,KAAK;GAAI;EAC5B,SAAS;GAAE,KAAK;GAAG,KAAK;GAAI;EAC5B,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC1B,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC1B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B;CACD,QAAQ;EACN,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,WAAW;GAAE,KAAK;GAAI,KAAK;GAAI;EAC/B,QAAQ;GAAE,KAAK;GAAG,KAAK;GAAI;EAC3B,SAAS;GAAE,KAAK;GAAG,KAAK;GAAI;EAC5B,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC1B,OAAO;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC1B,MAAM;GAAE,KAAK;GAAI,KAAK;GAAI;EAC3B;CACF;;;;;;;;;;AAWD,SAAgB,0BAA0B,KAAa,KAAa,KAAqB;AACvF,KAAI,QAAQ,IAAK,QAAO;CACxB,MAAM,OAAQ,MAAM,QAAQ,MAAM,OAAQ;AAC1C,QAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,MAAM,IAAI,CAAC,CAAC"}

package/dist/components/MuscleVisualizer/index.cjs.js

@@ -0,0 +1,49 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_svgs = require("./svgs.cjs.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+/**
+* Renders an interactive SVG body diagram.
+*
+* Muscle groups inside the SVG carry `class="muscle"` and can be
+* highlighted by passing their `id` values through the `activeMuscles`
+* prop. The component uses `dangerouslySetInnerHTML` to inject the SVG
+* markup and `useEffect` to imperatively toggle the `active` class on
+* the matching `<g>` elements.
+*/
+function MuscleVisualizer({ gender, view = "front", activeMuscles = [], onMuscleClick, style, className, width = "100%", height = "auto" }) {
+	const containerRef = (0, react.useRef)(null);
+	const svgKey = `${gender} ${view}`;
+	const svgMarkup = require_svgs.MUSCLE_SVGS[svgKey] ?? "";
+	(0, react.useEffect)(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		container.querySelectorAll("g.muscle").forEach((g) => {
+			if (activeMuscles.includes(g.id)) g.classList.add("active");
+			else g.classList.remove("active");
+		});
+	}, [activeMuscles, svgKey]);
+	(0, react.useEffect)(() => {
+		const container = containerRef.current;
+		if (!container || !onMuscleClick) return;
+		const handler = (e) => {
+			const target = e.target.closest("g.muscle");
+			if (target?.id) onMuscleClick(target.id);
+		};
+		container.addEventListener("click", handler);
+		return () => container.removeEventListener("click", handler);
+	}, [onMuscleClick, svgKey]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		className,
+		style: {
+			width,
+			height,
+			...style
+		},
+		dangerouslySetInnerHTML: { __html: svgMarkup }
+	});
+}
+exports.MuscleVisualizer = MuscleVisualizer;
+
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/MuscleVisualizer/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","names":[],"sources":["../../../src/components/MuscleVisualizer/index.tsx"],"sourcesContent":["import { useEffect, useRef, type CSSProperties } from 'react';\r\nimport { MUSCLE_SVGS } from './svgs';\r\n\r\nexport type Gender = 'male' | 'female';\r\nexport type View = 'front' | 'back';\r\n\r\nexport interface MuscleVisualizerProps {\r\n  /** Gender to display – determines the body silhouette. */\r\n  gender: Gender;\r\n  /** Which side of the body to show. */\r\n  view?: View;\r\n  /** Muscle IDs that should be highlighted (given the `.active` CSS class). */\r\n  activeMuscles?: string[];\r\n  /** Optional callback fired when a muscle group `<g>` element is clicked. */\r\n  onMuscleClick?: (muscleId: string) => void;\r\n  /** Optional inline styles applied to the wrapper `<div>`. */\r\n  style?: CSSProperties;\r\n  /** Optional CSS class name for the wrapper `<div>`. */\r\n  className?: string;\r\n  /** Width applied to the SVG wrapper (default: `'100%'`). */\r\n  width?: string | number;\r\n  /** Height applied to the SVG wrapper (default: `'auto'`). */\r\n  height?: string | number;\r\n}\r\n\r\n/**\r\n * Renders an interactive SVG body diagram.\r\n *\r\n * Muscle groups inside the SVG carry `class=\"muscle\"` and can be\r\n * highlighted by passing their `id` values through the `activeMuscles`\r\n * prop. The component uses `dangerouslySetInnerHTML` to inject the SVG\r\n * markup and `useEffect` to imperatively toggle the `active` class on\r\n * the matching `<g>` elements.\r\n */\r\nexport function MuscleVisualizer({\r\n  gender,\r\n  view = 'front',\r\n  activeMuscles = [],\r\n  onMuscleClick,\r\n  style,\r\n  className,\r\n  width = '100%',\r\n  height = 'auto',\r\n}: MuscleVisualizerProps) {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  const svgKey = `${gender} ${view}` as keyof typeof MUSCLE_SVGS;\r\n  const svgMarkup = MUSCLE_SVGS[svgKey] ?? '';\r\n\r\n  // Toggle the `active` class on `<g class=\"muscle\">` elements whose\r\n  // `id` is listed in `activeMuscles`.\r\n  useEffect(() => {\r\n    const container = containerRef.current;\r\n    if (!container) return;\r\n\r\n    const muscleGroups = container.querySelectorAll<SVGGElement>('g.muscle');\r\n    muscleGroups.forEach((g) => {\r\n      if (activeMuscles.includes(g.id)) {\r\n        g.classList.add('active');\r\n      } else {\r\n        g.classList.remove('active');\r\n      }\r\n    });\r\n  }, [activeMuscles, svgKey]);\r\n\r\n  // Attach click listeners to every `<g class=\"muscle\">` element.\r\n  useEffect(() => {\r\n    const container = containerRef.current;\r\n    if (!container || !onMuscleClick) return;\r\n\r\n    const handler = (e: Event) => {\r\n      const target = (e.target as SVGElement).closest<SVGGElement>('g.muscle');\r\n      if (target?.id) {\r\n        onMuscleClick(target.id);\r\n      }\r\n    };\r\n\r\n    container.addEventListener('click', handler);\r\n    return () => container.removeEventListener('click', handler);\r\n  }, [onMuscleClick, svgKey]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={className}\r\n      style={{ width, height, ...style }}\r\n      dangerouslySetInnerHTML={{ __html: svgMarkup }}\r\n    />\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;;;;;AAkCA,SAAgB,iBAAiB,EAC/B,QACA,OAAO,SACP,gBAAgB,EAAE,EAClB,eACA,OACA,WACA,QAAQ,QACR,SAAS,UACe;CACxB,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CAEjD,MAAM,SAAS,GAAG,OAAO,GAAG;CAC5B,MAAM,YAAY,aAAA,YAAY,WAAW;AAIzC,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;AAEK,YAAU,iBAA8B,WAAW,CAC3D,SAAS,MAAM;AAC1B,OAAI,cAAc,SAAS,EAAE,GAAG,CAC9B,GAAE,UAAU,IAAI,SAAS;OAEzB,GAAE,UAAU,OAAO,SAAS;IAE9B;IACD,CAAC,eAAe,OAAO,CAAC;AAG3B,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,aAAa,CAAC,cAAe;EAElC,MAAM,WAAW,MAAa;GAC5B,MAAM,SAAU,EAAE,OAAsB,QAAqB,WAAW;AACxE,OAAI,QAAQ,GACV,eAAc,OAAO,GAAG;;AAI5B,YAAU,iBAAiB,SAAS,QAAQ;AAC5C,eAAa,UAAU,oBAAoB,SAAS,QAAQ;IAC3D,CAAC,eAAe,OAAO,CAAC;AAE3B,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,KAAK;EACM;EACX,OAAO;GAAE;GAAO;GAAQ,GAAG;GAAO;EAClC,yBAAyB,EAAE,QAAQ,WAAW;EAC9C,CAAA"}

package/dist/components/MuscleVisualizer/index.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'react';
+export type Gender = 'male' | 'female';
+export type View = 'front' | 'back';
+export interface MuscleVisualizerProps {
+    /** Gender to display – determines the body silhouette. */
+    gender: Gender;
+    /** Which side of the body to show. */
+    view?: View;
+    /** Muscle IDs that should be highlighted (given the `.active` CSS class). */
+    activeMuscles?: string[];
+    /** Optional callback fired when a muscle group `<g>` element is clicked. */
+    onMuscleClick?: (muscleId: string) => void;
+    /** Optional inline styles applied to the wrapper `<div>`. */
+    style?: CSSProperties;
+    /** Optional CSS class name for the wrapper `<div>`. */
+    className?: string;
+    /** Width applied to the SVG wrapper (default: `'100%'`). */
+    width?: string | number;
+    /** Height applied to the SVG wrapper (default: `'auto'`). */
+    height?: string | number;
+}
+/**
+ * Renders an interactive SVG body diagram.
+ *
+ * Muscle groups inside the SVG carry `class="muscle"` and can be
+ * highlighted by passing their `id` values through the `activeMuscles`
+ * prop. The component uses `dangerouslySetInnerHTML` to inject the SVG
+ * markup and `useEffect` to imperatively toggle the `active` class on
+ * the matching `<g>` elements.
+ */
+export declare function MuscleVisualizer({ gender, view, activeMuscles, onMuscleClick, style, className, width, height, }: MuscleVisualizerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MuscleVisualizer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MuscleVisualizer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAG9D,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AACvC,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpC,MAAM,WAAW,qBAAqB;IACpC,0DAA0D;IAC1D,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,6DAA6D;IAC7D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,IAAc,EACd,aAAkB,EAClB,aAAa,EACb,KAAK,EACL,SAAS,EACT,KAAc,EACd,MAAe,GAChB,EAAE,qBAAqB,2CA8CvB"}