@runaid/lactate-curve 0.1.2

package/dist/index.js

@@ -0,0 +1,1016 @@
+// src/components/LactateCurveChart.tsx
+import * as React2 from "react";
+import {
+  CartesianGrid,
+  Label,
+  Line,
+  LineChart,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  XAxis,
+  YAxis
+} from "recharts";
+
+// src/lib/generateLactateCurve.ts
+var MAX_LT1_BASELINE_DIP = 0.45;
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+var round = (value) => Math.round(value * 1e3) / 1e3;
+var assertFinitePositive = (value, label) => {
+  if (!Number.isFinite(value)) {
+    throw new Error(`${label} must be a finite number.`);
+  }
+};
+var buildModerateDomainFunction = ({
+  minIntensity,
+  baselineLactate,
+  lt1
+}) => {
+  const span = lt1.intensity - minIntensity;
+  const delta = lt1.lactate - baselineLactate;
+  if (span <= 0) {
+    throw new Error("Moderate domain span must be greater than 0.");
+  }
+  if (Math.abs(delta) < 1e-4) {
+    return () => baselineLactate;
+  }
+  if (delta > 0) {
+    return (intensity) => {
+      const t = clamp((intensity - minIntensity) / span, 0, 1);
+      return baselineLactate + delta * Math.pow(t, 4);
+    };
+  }
+  const dip = baselineLactate - lt1.lactate;
+  const dipAccent = 0.32;
+  return (intensity) => {
+    const t = clamp((intensity - minIntensity) / span, 0, 1);
+    return baselineLactate - dip * (t + dipAccent * 4 * t * (1 - t));
+  };
+};
+var buildHeavyDomainFunction = ({
+  lt1,
+  lt2
+}) => {
+  const span = lt2.intensity - lt1.intensity;
+  if (span <= 0) {
+    throw new Error("Heavy domain span must be greater than 0.");
+  }
+  const slope = (lt2.lactate - lt1.lactate) / span;
+  return {
+    slope,
+    project: (intensity) => lt1.lactate + slope * (intensity - lt1.intensity)
+  };
+};
+var buildSevereDomainFunction = ({
+  lt2,
+  maxIntensity,
+  heavySlope
+}) => {
+  const span = maxIntensity - lt2.intensity;
+  if (span <= 0) {
+    throw new Error("Severe domain span must be greater than 0.");
+  }
+  const curvature = clamp(2.4 / span, 0.02, 0.9);
+  const initialSevereSlope = heavySlope * 1.4;
+  return {
+    curvature,
+    initialSevereSlope,
+    project: (intensity) => {
+      const delta = Math.max(0, intensity - lt2.intensity);
+      return lt2.lactate + initialSevereSlope / curvature * (Math.exp(curvature * delta) - 1);
+    }
+  };
+};
+var generateLactateCurve = ({
+  baselineLactate,
+  lt1,
+  lt2,
+  vo2max,
+  minIntensity = 0,
+  maxIntensity,
+  intensityStep,
+  samples = 80
+}) => {
+  assertFinitePositive(baselineLactate, "baselineLactate");
+  assertFinitePositive(lt1.intensity, "lt1 intensity");
+  assertFinitePositive(lt1.lactate, "lt1 lactate");
+  assertFinitePositive(lt2.intensity, "lt2 intensity");
+  assertFinitePositive(lt2.lactate, "lt2 lactate");
+  if (baselineLactate <= 0) {
+    throw new Error("baselineLactate must be greater than 0.");
+  }
+  if (baselineLactate - lt1.lactate > MAX_LT1_BASELINE_DIP) {
+    throw new Error(
+      `LT1 lactate can sit slightly below baseline, but the dip must be <= ${MAX_LT1_BASELINE_DIP} mmol/L.`
+    );
+  }
+  if (lt1.intensity <= minIntensity) {
+    throw new Error("LT1 intensity must be above the minimum chart intensity.");
+  }
+  if (lt1.intensity >= lt2.intensity) {
+    throw new Error("LT1 intensity must be below LT2 intensity.");
+  }
+  if (lt1.lactate >= lt2.lactate) {
+    throw new Error("LT1 lactate must be below LT2 lactate.");
+  }
+  if (vo2max) {
+    assertFinitePositive(vo2max.intensity, "vo2max intensity");
+    if (lt2.intensity >= vo2max.intensity) {
+      throw new Error("VO2max intensity must be greater than LT2 intensity.");
+    }
+  }
+  const maxX = maxIntensity ?? round(
+    vo2max ? vo2max.intensity * 1.08 : lt2.intensity + Math.max((lt2.intensity - lt1.intensity) * 0.6, lt2.intensity * 0.12)
+  );
+  if (maxX <= lt2.intensity) {
+    throw new Error("maxIntensity must extend beyond LT2.");
+  }
+  const moderateDomain = buildModerateDomainFunction({
+    minIntensity,
+    baselineLactate,
+    lt1
+  });
+  const heavyDomain = buildHeavyDomainFunction({ lt1, lt2 });
+  const severeDomain = buildSevereDomainFunction({
+    lt2,
+    maxIntensity: maxX,
+    heavySlope: heavyDomain.slope
+  });
+  const points = [];
+  const pointCount = intensityStep ? Math.max(2, Math.floor((maxX - minIntensity) / intensityStep) + 1) : samples;
+  for (let index = 0; index < pointCount; index += 1) {
+    const intensity = index === pointCount - 1 ? maxX : intensityStep ? minIntensity + intensityStep * index : minIntensity + (maxX - minIntensity) * index / (pointCount - 1);
+    let lactate;
+    if (intensity <= lt1.intensity) {
+      lactate = moderateDomain(intensity);
+    } else if (intensity <= lt2.intensity) {
+      lactate = heavyDomain.project(intensity);
+    } else {
+      lactate = severeDomain.project(intensity);
+    }
+    points.push({
+      intensity: round(intensity),
+      lactate: round(lactate)
+    });
+  }
+  const endPoint = points[points.length - 1];
+  const minimumModerateEstimate = lt1.lactate < baselineLactate ? lt1.lactate - (baselineLactate - lt1.lactate) * 0.12 : Math.min(baselineLactate, lt1.lactate);
+  return {
+    points,
+    anchors: {
+      baseline: { intensity: minIntensity, lactate: baselineLactate },
+      lt1,
+      lt2,
+      vo2max,
+      max: endPoint
+    },
+    domain: {
+      minIntensity,
+      maxIntensity: maxX,
+      minLactate: round(Math.max(0, minimumModerateEstimate - 0.12)),
+      maxLactate: round(endPoint.lactate * 1.08)
+    }
+  };
+};
+
+// src/lib/chart-defaults.ts
+var DEFAULT_THEME = {
+  curveColor: "#e11d48",
+  axisColor: "#334155",
+  gridColor: "#cbd5e1",
+  labelColor: "#0f172a",
+  thresholdColor: "#0f172a",
+  fontFamily: "ui-sans-serif, system-ui, sans-serif",
+  backgroundColor: "#ffffff",
+  markerLabelColor: "#0f172a"
+};
+var DEFAULT_ZONE_OPACITY = 0.12;
+var getDefaultZones = () => [
+  {
+    startIntensity: "min",
+    endIntensity: "lt1",
+    label: "Moderate domain",
+    color: "#22c55e",
+    opacity: DEFAULT_ZONE_OPACITY
+  },
+  {
+    startIntensity: "lt1",
+    endIntensity: "lt2",
+    label: "Heavy domain",
+    color: "#f59e0b",
+    opacity: DEFAULT_ZONE_OPACITY
+  },
+  {
+    startIntensity: "lt2",
+    endIntensity: "max",
+    label: "Severe domain",
+    color: "#ef4444",
+    opacity: DEFAULT_ZONE_OPACITY
+  }
+];
+
+// src/lib/projectMarkerToCurve.ts
+var projectIntensityToCurve = (intensity, points) => {
+  if (points.length < 2) {
+    throw new Error("At least two curve points are required to project onto the curve.");
+  }
+  const clampedIntensity = Math.min(
+    points[points.length - 1].intensity,
+    Math.max(points[0].intensity, intensity)
+  );
+  for (let index = 0; index < points.length - 1; index += 1) {
+    const current = points[index];
+    const next = points[index + 1];
+    if (clampedIntensity >= current.intensity && clampedIntensity <= next.intensity) {
+      const span = next.intensity - current.intensity || 1;
+      const ratio = (clampedIntensity - current.intensity) / span;
+      const lactate = current.lactate + (next.lactate - current.lactate) * ratio;
+      return {
+        intensity: clampedIntensity,
+        lactate: Math.round(lactate * 1e3) / 1e3
+      };
+    }
+  }
+  return {
+    intensity: clampedIntensity,
+    lactate: points[points.length - 1].lactate
+  };
+};
+var projectMarkerToCurve = (marker, points) => ({
+  ...marker,
+  ...projectIntensityToCurve(marker.intensity, points)
+});
+
+// src/lib/resolveZones.ts
+var resolveBoundary = (boundary, anchors, fallback) => {
+  if (boundary === void 0) return fallback;
+  if (typeof boundary === "number") return boundary;
+  switch (boundary) {
+    case "min":
+    case "baseline":
+      return anchors.baseline.intensity;
+    case "lt1":
+      return anchors.lt1.intensity;
+    case "lt2":
+      return anchors.lt2.intensity;
+    case "vo2max":
+      return anchors.vo2max?.intensity ?? anchors.max.intensity;
+    case "max":
+      return anchors.max.intensity;
+  }
+};
+var resolveZones = ({
+  zones,
+  curve
+}) => {
+  const sourceZones = zones ?? getDefaultZones();
+  return sourceZones.map((zone) => {
+    const startIntensity = resolveBoundary(
+      zone.startIntensity,
+      curve.anchors,
+      curve.domain.minIntensity
+    );
+    const endIntensity = resolveBoundary(
+      zone.endIntensity,
+      curve.anchors,
+      curve.domain.maxIntensity
+    );
+    return {
+      label: zone.label,
+      color: zone.color,
+      opacity: zone.opacity ?? DEFAULT_ZONE_OPACITY,
+      startIntensity,
+      endIntensity
+    };
+  }).filter((zone) => zone.endIntensity > zone.startIntensity);
+};
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+var cn = (...inputs) => clsx(inputs);
+
+// src/components/ui/chart.tsx
+import * as React from "react";
+import { ResponsiveContainer, Tooltip } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartContext = React.createContext(null);
+var useChart = () => {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("Chart components must be used within a ChartContainer.");
+  }
+  return context;
+};
+var ChartContainer = React.forwardRef(
+  ({ config = {}, className, style, height = 360, children, ...props }, ref) => /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("w-full", className),
+      style: { width: "100%", height, ...style },
+      ...props,
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children })
+    }
+  ) })
+);
+ChartContainer.displayName = "ChartContainer";
+var ChartTooltip = Tooltip;
+var ChartTooltipContent = React.forwardRef(
+  ({
+    active,
+    payload,
+    label,
+    className,
+    indicator = "dot",
+    labelFormatter,
+    valueFormatter,
+    ...props
+  }, ref) => {
+    const { config } = useChart();
+    if (!active || !payload?.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(className),
+        style: {
+          border: "1px solid rgba(15, 23, 42, 0.15)",
+          borderRadius: 12,
+          background: "rgba(255,255,255,0.96)",
+          boxShadow: "0 12px 40px rgba(15, 23, 42, 0.12)",
+          padding: "0.75rem",
+          minWidth: 180
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 8 }, children: labelFormatter ? labelFormatter(label ?? "") : label }),
+          /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 6 }, children: payload.map((item) => {
+            const key = String(item.dataKey ?? item.name ?? "");
+            const entry = config[key];
+            const color = item.color ?? entry?.color ?? "#0f172a";
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 12,
+                  fontSize: 12
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        style: {
+                          width: indicator === "dot" ? 8 : 12,
+                          height: 8,
+                          borderRadius: indicator === "dot" ? 999 : 2,
+                          background: color,
+                          display: "inline-block"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: entry?.label ?? item.name })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: valueFormatter ? valueFormatter(item.value ?? "", item.name ?? "") : item.value })
+                ]
+              },
+              key
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltipContent";
+
+// src/components/LactateCurveChart.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var mergeTheme = (theme) => ({
+  ...DEFAULT_THEME,
+  ...theme
+});
+var formatNumber = (value, precision) => value.toFixed(Math.max(0, precision));
+var resolveCompressionEnd = (compression, values) => {
+  if (!compression) return null;
+  const end = compression.endIntensity;
+  if (typeof end === "number") return end;
+  if (end === "lt1") return values.lt1;
+  if (end === "lt2") return values.lt2;
+  if (end === "vo2max") return values.vo2max ?? null;
+  return null;
+};
+var defaultThresholdLabel = (key) => {
+  switch (key) {
+    case "lt1":
+      return "LT1";
+    case "lt2":
+      return "LT2";
+    case "vo2max":
+      return "VO2max";
+  }
+};
+var LactateCurveChart = ({
+  baselineLactate,
+  lt1,
+  lt2,
+  vo2max,
+  zones,
+  raceMarkers,
+  xAxisLabel = "Intensity",
+  yAxisLabel = "Blood lactate (mmol/L)",
+  xAxisPrecision = 1,
+  yAxisPrecision = 1,
+  showXAxisTicks = true,
+  xAxisCompression,
+  title = "Approximate lactate curve",
+  description = "A physiologically plausible lactate curve with thresholds, optional domains, and optional race markers.",
+  showThresholdLabels = true,
+  showThresholdGuides = true,
+  showThresholdCircles = true,
+  showGrid = true,
+  showLegend = true,
+  thresholdAnnotations,
+  theme,
+  icon,
+  labels,
+  minIntensity,
+  xAxisMax,
+  maxIntensity,
+  intensityStep,
+  curveSamples = 96,
+  height = 420,
+  style,
+  className
+}) => {
+  const resolvedTheme = React2.useMemo(() => mergeTheme(theme), [theme]);
+  const curve = React2.useMemo(
+    () => generateLactateCurve({
+      baselineLactate,
+      lt1,
+      lt2,
+      vo2max,
+      minIntensity,
+      maxIntensity: xAxisMax ?? maxIntensity,
+      intensityStep,
+      samples: curveSamples
+    }),
+    [
+      baselineLactate,
+      curveSamples,
+      intensityStep,
+      lt1,
+      lt2,
+      maxIntensity,
+      minIntensity,
+      vo2max,
+      xAxisMax
+    ]
+  );
+  const resolvedZones = React2.useMemo(
+    () => zones === null ? [] : resolveZones({ zones, curve }),
+    [curve, zones]
+  );
+  const compression = React2.useMemo(() => {
+    const end = resolveCompressionEnd(xAxisCompression, {
+      lt1: lt1.intensity,
+      lt2: lt2.intensity,
+      vo2max: vo2max?.intensity
+    });
+    const scale = xAxisCompression?.scale ?? 0.42;
+    if (!end || end <= curve.domain.minIntensity || end >= curve.domain.maxIntensity) {
+      return null;
+    }
+    if (!(scale > 0 && scale < 1)) {
+      return null;
+    }
+    const transform = (value) => {
+      if (value <= end) {
+        return curve.domain.minIntensity + (value - curve.domain.minIntensity) * scale;
+      }
+      return curve.domain.minIntensity + (end - curve.domain.minIntensity) * scale + (value - end);
+    };
+    const inverse = (value) => {
+      const compressedEnd = curve.domain.minIntensity + (end - curve.domain.minIntensity) * scale;
+      if (value <= compressedEnd) {
+        return curve.domain.minIntensity + (value - curve.domain.minIntensity) / scale;
+      }
+      return end + (value - compressedEnd);
+    };
+    return {
+      end,
+      scale,
+      transform,
+      inverse
+    };
+  }, [
+    curve.domain.maxIntensity,
+    curve.domain.minIntensity,
+    lt1.intensity,
+    lt2.intensity,
+    vo2max?.intensity,
+    xAxisCompression
+  ]);
+  const displayPoints = React2.useMemo(
+    () => curve.points.map((point) => ({
+      ...point,
+      displayIntensity: compression?.transform(point.intensity) ?? point.intensity
+    })),
+    [compression, curve.points]
+  );
+  const projectedMarkers = React2.useMemo(
+    () => (raceMarkers ?? []).map((marker) => projectMarkerToCurve(marker, curve.points)),
+    [curve.points, raceMarkers]
+  );
+  const chartConfig = React2.useMemo(
+    () => ({
+      lactate: {
+        label: labels?.curve ?? "Lactate curve",
+        color: resolvedTheme.curveColor
+      },
+      raceMarkers: {
+        label: labels?.raceMarkers ?? "Race intensities",
+        color: resolvedTheme.curveColor
+      }
+    }),
+    [labels?.curve, labels?.raceMarkers, resolvedTheme.curveColor]
+  );
+  const thresholdEntries = [
+    { key: "lt1", point: { ...lt1, ...projectIntensityToCurve(lt1.intensity, curve.points) } },
+    { key: "lt2", point: { ...lt2, ...projectIntensityToCurve(lt2.intensity, curve.points) } },
+    vo2max ? {
+      key: "vo2max",
+      point: { ...vo2max, ...projectIntensityToCurve(vo2max.intensity, curve.points) }
+    } : null
+  ].filter(Boolean);
+  const displayDomain = React2.useMemo(
+    () => ({
+      min: compression?.transform(curve.domain.minIntensity) ?? curve.domain.minIntensity,
+      max: compression?.transform(curve.domain.maxIntensity) ?? curve.domain.maxIntensity
+    }),
+    [compression, curve.domain.maxIntensity, curve.domain.minIntensity]
+  );
+  const toDisplayIntensity = React2.useCallback(
+    (value) => compression?.transform(value) ?? value,
+    [compression]
+  );
+  const iconNode = typeof icon === "function" ? icon({
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18"
+  }) : icon;
+  return /* @__PURE__ */ jsxs2(
+    "figure",
+    {
+      className: cn(className),
+      style: {
+        margin: 0,
+        color: resolvedTheme.labelColor,
+        fontFamily: resolvedTheme.fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 16,
+              marginBottom: 16
+            },
+            children: [
+              /* @__PURE__ */ jsxs2("figcaption", { children: [
+                /* @__PURE__ */ jsx2("div", { style: { fontSize: 18, fontWeight: 700 }, children: title }),
+                /* @__PURE__ */ jsx2("div", { style: { fontSize: 14, opacity: 0.78, marginTop: 4 }, children: description })
+              ] }),
+              iconNode ? /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", children: iconNode }) : null
+            ]
+          }
+        ),
+        showLegend ? /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            "aria-label": "Chart legend",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 14,
+              flexWrap: "wrap",
+              marginBottom: 12,
+              fontSize: 12,
+              color: resolvedTheme.labelColor
+            },
+            children: [
+              /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: {
+                      width: 24,
+                      height: 0,
+                      borderTop: `3px solid ${resolvedTheme.curveColor}`,
+                      borderRadius: 999,
+                      display: "inline-block"
+                    }
+                  }
+                ),
+                chartConfig.lactate.label
+              ] }),
+              projectedMarkers.length ? /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: {
+                      width: 10,
+                      height: 10,
+                      borderRadius: 999,
+                      background: resolvedTheme.curveColor,
+                      display: "inline-block"
+                    }
+                  }
+                ),
+                chartConfig.raceMarkers.label
+              ] }) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx2(
+          ChartContainer,
+          {
+            config: chartConfig,
+            height,
+            className: "lactate-curve-chart",
+            role: "img",
+            "aria-label": title,
+            style: {
+              background: resolvedTheme.backgroundColor,
+              border: "1px solid rgba(148, 163, 184, 0.22)",
+              borderRadius: 20,
+              padding: 12
+            },
+            children: /* @__PURE__ */ jsxs2(
+              LineChart,
+              {
+                data: displayPoints,
+                margin: { top: 24, right: 28, bottom: 28, left: 14 },
+                children: [
+                  showGrid ? /* @__PURE__ */ jsx2(
+                    CartesianGrid,
+                    {
+                      stroke: resolvedTheme.gridColor,
+                      strokeDasharray: "3 3",
+                      vertical: false
+                    }
+                  ) : null,
+                  resolvedZones.map((zone) => /* @__PURE__ */ jsx2(
+                    ReferenceArea,
+                    {
+                      x1: toDisplayIntensity(zone.startIntensity),
+                      x2: toDisplayIntensity(zone.endIntensity),
+                      fill: zone.color,
+                      fillOpacity: zone.opacity,
+                      strokeOpacity: 0,
+                      ifOverflow: "visible"
+                    },
+                    `${zone.label}-${zone.startIntensity}-${zone.endIntensity}`
+                  )),
+                  /* @__PURE__ */ jsx2(
+                    XAxis,
+                    {
+                      type: "number",
+                      dataKey: "displayIntensity",
+                      domain: [displayDomain.min, displayDomain.max],
+                      tick: showXAxisTicks ? { fill: resolvedTheme.axisColor, fontFamily: resolvedTheme.fontFamily } : false,
+                      axisLine: { stroke: resolvedTheme.axisColor },
+                      tickLine: showXAxisTicks ? { stroke: resolvedTheme.axisColor } : false,
+                      tickFormatter: (value) => formatNumber(
+                        compression?.inverse(Number(value)) ?? Number(value),
+                        xAxisPrecision
+                      ),
+                      children: /* @__PURE__ */ jsx2(
+                        Label,
+                        {
+                          value: xAxisLabel,
+                          position: "insideBottom",
+                          offset: -14,
+                          style: {
+                            fill: resolvedTheme.labelColor,
+                            fontFamily: resolvedTheme.fontFamily
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    YAxis,
+                    {
+                      type: "number",
+                      domain: [curve.domain.minLactate, curve.domain.maxLactate],
+                      tick: { fill: resolvedTheme.axisColor, fontFamily: resolvedTheme.fontFamily },
+                      axisLine: { stroke: resolvedTheme.axisColor },
+                      tickLine: { stroke: resolvedTheme.axisColor },
+                      tickFormatter: (value) => formatNumber(Number(value), yAxisPrecision),
+                      width: 64,
+                      children: /* @__PURE__ */ jsx2(
+                        Label,
+                        {
+                          angle: -90,
+                          position: "insideLeft",
+                          value: yAxisLabel,
+                          style: {
+                            fill: resolvedTheme.labelColor,
+                            fontFamily: resolvedTheme.fontFamily,
+                            textAnchor: "middle"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    ChartTooltip,
+                    {
+                      cursor: { stroke: resolvedTheme.gridColor, strokeDasharray: "3 3" },
+                      content: /* @__PURE__ */ jsx2(
+                        ChartTooltipContent,
+                        {
+                          labelFormatter: (value) => `${xAxisLabel}: ${formatNumber(
+                            compression?.inverse(Number(value)) ?? Number(value),
+                            xAxisPrecision
+                          )}`,
+                          valueFormatter: (value, name) => name === "lactate" ? `${formatNumber(Number(value), yAxisPrecision)} mmol/L` : `${formatNumber(Number(value), xAxisPrecision)}`
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    Line,
+                    {
+                      type: "monotone",
+                      dataKey: "lactate",
+                      name: "lactate",
+                      stroke: resolvedTheme.curveColor,
+                      strokeWidth: 3,
+                      dot: false,
+                      isAnimationActive: false
+                    }
+                  ),
+                  thresholdEntries.map(({ key, point }) => {
+                    const annotation = thresholdAnnotations?.[key];
+                    const color = annotation?.color ?? resolvedTheme.thresholdColor;
+                    const showGuide = annotation?.showGuide ?? showThresholdGuides;
+                    const showCircle = annotation?.showCircle ?? showThresholdCircles;
+                    const labelText = annotation?.label ?? labels?.[key] ?? defaultThresholdLabel(key);
+                    return /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
+                      showGuide ? /* @__PURE__ */ jsx2(
+                        ReferenceLine,
+                        {
+                          x: toDisplayIntensity(point.intensity),
+                          stroke: color,
+                          strokeDasharray: annotation?.strokeDasharray ?? "6 4",
+                          strokeWidth: annotation?.lineWidth ?? 1.5,
+                          ifOverflow: "visible",
+                          label: showThresholdLabels ? {
+                            value: labelText,
+                            position: "top",
+                            fill: color,
+                            fontSize: 12,
+                            fontWeight: 700,
+                            fontFamily: resolvedTheme.fontFamily
+                          } : void 0
+                        }
+                      ) : null,
+                      showCircle ? /* @__PURE__ */ jsx2(
+                        ReferenceDot,
+                        {
+                          x: toDisplayIntensity(point.intensity),
+                          y: point.lactate,
+                          r: annotation?.circleRadius ?? 5,
+                          fill: color,
+                          stroke: resolvedTheme.backgroundColor,
+                          strokeWidth: 2,
+                          ifOverflow: "visible"
+                        }
+                      ) : null
+                    ] }, key);
+                  }),
+                  projectedMarkers.map((marker) => /* @__PURE__ */ jsx2(
+                    ReferenceDot,
+                    {
+                      x: toDisplayIntensity(marker.intensity),
+                      y: marker.lactate,
+                      r: marker.radius ?? 5,
+                      fill: marker.color ?? resolvedTheme.curveColor,
+                      stroke: resolvedTheme.backgroundColor,
+                      strokeWidth: 2,
+                      ifOverflow: "visible",
+                      label: marker.showLabel === false ? void 0 : {
+                        value: marker.label,
+                        position: "top",
+                        offset: 10,
+                        fill: resolvedTheme.markerLabelColor,
+                        fontSize: 12,
+                        fontWeight: 600,
+                        fontFamily: resolvedTheme.fontFamily
+                      }
+                    },
+                    `${marker.label}-${marker.intensity}`
+                  ))
+                ]
+              }
+            )
+          }
+        ),
+        compression ? /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              marginTop: 10,
+              fontSize: 12,
+              color: resolvedTheme.labelColor,
+              opacity: 0.78
+            },
+            children: [
+              "X-axis break: the low-intensity region up to ",
+              formatNumber(
+                compression.end,
+                xAxisPrecision
+              ),
+              " is visually compressed."
+            ]
+          }
+        ) : null,
+        resolvedZones.length ? /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": labels?.zones ?? "Intensity domains",
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 10,
+              marginTop: 14
+            },
+            children: resolvedZones.map((zone) => /* @__PURE__ */ jsxs2(
+              "span",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 8,
+                  fontSize: 12,
+                  color: resolvedTheme.labelColor
+                },
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      style: {
+                        width: 12,
+                        height: 12,
+                        borderRadius: 999,
+                        background: zone.color,
+                        opacity: Math.max(zone.opacity, 0.35)
+                      }
+                    }
+                  ),
+                  zone.label
+                ]
+              },
+              `${zone.label}-${zone.startIntensity}-${zone.endIntensity}-legend`
+            ))
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+// src/examples.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var baseProps = {
+  baselineLactate: 1.1,
+  lt1: { intensity: 220, lactate: 1.9 },
+  lt2: { intensity: 305, lactate: 4.1 }
+};
+var BasicCurveExample = () => /* @__PURE__ */ jsx3(LactateCurveChart, { ...baseProps });
+var CurveWithVo2maxExample = () => /* @__PURE__ */ jsx3(
+  LactateCurveChart,
+  {
+    ...baseProps,
+    vo2max: { intensity: 360 },
+    description: "The severe-domain tail is anchored explicitly with a VO2max point.",
+    xAxisCompression: { endIntensity: "lt1", scale: 0.34 }
+  }
+);
+var DomainsOverlayExample = () => /* @__PURE__ */ jsx3(
+  LactateCurveChart,
+  {
+    ...baseProps,
+    vo2max: { intensity: 355 },
+    xAxisLabel: "Running power (W)"
+  }
+);
+var RaceMarkerOverlayExample = () => /* @__PURE__ */ jsx3(
+  LactateCurveChart,
+  {
+    ...baseProps,
+    vo2max: { intensity: 360 },
+    raceMarkers: [
+      { intensity: 252, label: "Marathon", color: "#0f766e" },
+      { intensity: 300, label: "Half", color: "#0369a1" },
+      { intensity: 312, label: "10k", color: "#7c3aed" },
+      { intensity: 329, label: "5k", color: "#dc2626" },
+      { intensity: 342, label: "3k", color: "#ea580c" }
+    ]
+  }
+);
+var BrandMark = () => /* @__PURE__ */ jsxs3("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", children: [
+  /* @__PURE__ */ jsx3("circle", { cx: "11", cy: "11", r: "10", fill: "#102a43" }),
+  /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: "M6 13.8C8.7 13.8 10.8 12 11.8 8.8C12.7 12.7 14.8 15 17 15",
+      stroke: "#f0b429",
+      strokeWidth: "2.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var FullyThemedExample = () => /* @__PURE__ */ jsx3(
+  LactateCurveChart,
+  {
+    ...baseProps,
+    vo2max: { intensity: 362 },
+    title: "Threshold Map",
+    description: "A branded version for article embeds and product UI.",
+    xAxisLabel: "Power (W)",
+    yAxisLabel: "Lactate (mmol/L)",
+    icon: /* @__PURE__ */ jsx3(BrandMark, {}),
+    labels: {
+      curve: "Athlete curve",
+      zones: "Training domains",
+      lt1: "Aerobic threshold",
+      lt2: "Critical threshold",
+      vo2max: "VO2 ceiling"
+    },
+    raceMarkers: [
+      { intensity: 255, label: "M", color: "#166534", radius: 6 },
+      { intensity: 298, label: "HM", color: "#0f766e", radius: 6 },
+      { intensity: 313, label: "10k", color: "#1d4ed8", radius: 6 },
+      { intensity: 332, label: "5k", color: "#b91c1c", radius: 6 }
+    ],
+    theme: {
+      curveColor: "#b91c1c",
+      thresholdColor: "#102a43",
+      axisColor: "#243b53",
+      gridColor: "#d9e2ec",
+      labelColor: "#102a43",
+      markerLabelColor: "#102a43",
+      backgroundColor: "#f8fbff",
+      fontFamily: "Avenir Next, ui-sans-serif, system-ui, sans-serif"
+    },
+    zones: [
+      {
+        startIntensity: "min",
+        endIntensity: "lt1",
+        label: "Easy / moderate",
+        color: "#a7f3d0"
+      },
+      {
+        startIntensity: "lt1",
+        endIntensity: "lt2",
+        label: "Threshold / heavy",
+        color: "#fde68a"
+      },
+      {
+        startIntensity: "lt2",
+        endIntensity: "max",
+        label: "VO2 / severe",
+        color: "#fecaca"
+      }
+    ]
+  }
+);
+export {
+  BasicCurveExample,
+  CurveWithVo2maxExample,
+  DomainsOverlayExample,
+  FullyThemedExample,
+  LactateCurveChart,
+  RaceMarkerOverlayExample,
+  generateLactateCurve,
+  projectMarkerToCurve,
+  resolveZones
+};
+//# sourceMappingURL=index.js.map