@burdenoff/microfe-atheletebridge 2026.705.2 → 2026.706.1

package/dist/atheletebridge/pages/performance/PerformancePage.js

@@ -1,496 +1,647 @@
-import { PageLayout as e } from "../../components/PageLayout.js";
-import { StatusBadge as t } from "../../components/StatusBadge.js";
-import { METRIC_TYPE_LABELS as n } from "../../components/domain.js";
-import { formatDate as r, formatDuration as i } from "../../utils/formatters.js";
-import { EmptyState as a } from "../../components/EmptyState.js";
-import { ErrorState as o, LoadingState as s } from "../../components/LoadingState.js";
-import { useLogWorkout as c, usePerformanceMetrics as l, useRecordMetric as u, useWorkoutLogs as d } from "../../hooks/useAthleteBridgeApi.js";
-import { FormField as f, fieldInputClass as p } from "../../components/form.js";
-import { CursorPager as m } from "../../components/CursorPager.js";
-import { AthleteSelect as h } from "../../components/AthleteSelect.js";
-import { useMemo as g, useState as _ } from "react";
-import { Activity as v, Dumbbell as y, Gauge as b, Loader2 as x, Plus as S, Save as C, Users as w } from "lucide-react";
-import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
-import { EmphasisPanel as O, GlassCard as k, ResponsiveDialog as A, ResponsiveDialogContent as j, ResponsiveDialogFooter as M, ResponsiveDialogHeader as N, ResponsiveDialogTitle as P } from "@burdenoff/fe-libs/ui";
+import { cn as e } from "../../utils/cn.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { Sparkline as n } from "../../components/viz/Sparkline.js";
+import "../../components/viz/index.js";
+import { StatusBadge as r } from "../../components/StatusBadge.js";
+import { METRIC_TYPE_LABELS as i } from "../../components/domain.js";
+import { formatDate as a, formatDuration as o } from "../../utils/formatters.js";
+import { EmptyState as s } from "../../components/EmptyState.js";
+import { ErrorState as c, LoadingState as l } from "../../components/LoadingState.js";
+import { useLogWorkout as u, usePerformanceMetrics as d, useRecordMetric as f, useWorkoutLogs as p } from "../../hooks/useAthleteBridgeApi.js";
+import { FormField as m, fieldInputClass as h } from "../../components/form.js";
+import { CursorPager as g } from "../../components/CursorPager.js";
+import { AthleteSelect as _ } from "../../components/AthleteSelect.js";
+import { useMemo as v, useState as y } from "react";
+import { Activity as b, ArrowDown as x, ArrowUp as S, Dumbbell as C, Gauge as w, HeartPulse as T, Loader2 as E, Move as D, Plus as O, Save as k, Scale as A, Target as j, Users as M, Zap as N } from "lucide-react";
+import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
+import { GlassCard as L, ResponsiveDialog as R, ResponsiveDialogContent as z, ResponsiveDialogFooter as B, ResponsiveDialogHeader as V, ResponsiveDialogTitle as H, ResponsiveTable as U } from "@burdenoff/fe-libs/ui";
 //#region src/atheletebridge/pages/performance/PerformancePage.tsx
-var F = 10, I = [
+var W = 10, G = [
 	"COMPLETED",
 	"PLANNED",
 	"SKIPPED"
-], L = Object.keys(n), R = (e) => {
+], K = Object.keys(i), q = "inline-flex items-center justify-center gap-1.5 rounded-lg px-4 py-2 text-sm font-semibold text-action-primary-text shadow-elevation-1 transition-[filter,box-shadow] hover:shadow-elevation-2 hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] bg-[linear-gradient(120deg,var(--color-action-primary-bg),color-mix(in_oklab,var(--color-action-primary-bg)_62%,var(--color-accent-purple)),var(--color-action-primary-bg))]", J = {
+	SPEED: N,
+	ENDURANCE: b,
+	STRENGTH: C,
+	AGILITY: D,
+	ACCURACY: j,
+	WEIGHT: A,
+	HEART_RATE: T,
+	CUSTOM: w
+}, Y = (e) => {
 	let t = e.trim();
 	if (!t) return;
 	let n = Number.parseInt(t, 10);
 	return Number.isNaN(n) ? void 0 : n;
-}, z = (e) => {
+}, X = (e) => {
 	let t = e.trim();
 	if (!t) return;
 	let n = Number.parseFloat(t);
 	return Number.isNaN(n) ? void 0 : n;
-}, B = () => {
+}, Z = () => {
 	let e = /* @__PURE__ */ new Date();
 	return (/* @__PURE__ */ new Date(e.getTime() - e.getTimezoneOffset() * 6e4)).toISOString().slice(0, 16);
-};
-function V() {
-	let [t, n] = _({
+}, Q = (e) => (Math.abs(e) >= 100 ? e.toFixed(0) : e.toFixed(2)).replace(/\.?0+$/, "");
+function $() {
+	let [e, n] = y({
 		athleteId: "",
 		displayName: ""
 	});
-	return /* @__PURE__ */ D(e, {
+	return /* @__PURE__ */ I(t, {
 		title: "Performance",
 		description: "Log workouts, record metrics and track an athlete's progress over time.",
-		children: [/* @__PURE__ */ E(k, {
-			treatment: "insight",
-			className: "mb-8 p-6",
-			children: /* @__PURE__ */ E(h, {
-				athleteId: t.athleteId,
-				onSelect: n,
-				idPrefix: "perf-athlete"
+		children: [/* @__PURE__ */ F("div", {
+			className: "sticky top-0 z-20 -mx-6 mb-8 bg-bg-canvas/80 px-6 pb-4 pt-1 backdrop-blur supports-[backdrop-filter]:bg-bg-canvas/60",
+			children: /* @__PURE__ */ F(L, {
+				treatment: "insight",
+				className: "p-5 sm:p-6",
+				children: /* @__PURE__ */ F(_, {
+					athleteId: e.athleteId,
+					onSelect: n,
+					idPrefix: "perf-athlete"
+				})
 			})
-		}), t.athleteId ? /* @__PURE__ */ E(H, {
-			athleteId: t.athleteId,
-			displayName: t.displayName
-		}) : /* @__PURE__ */ E(a, {
+		}), e.athleteId ? /* @__PURE__ */ F(ee, {
+			athleteId: e.athleteId,
+			displayName: e.displayName
+		}) : /* @__PURE__ */ F(s, {
 			illustration: "empty-data",
-			icon: /* @__PURE__ */ E(w, { className: "h-10 w-10" }),
+			icon: /* @__PURE__ */ F(M, { className: "h-10 w-10" }),
 			title: "Pick an athlete to begin",
 			description: "Choose a team and an athlete above to log workouts, record metrics and review their history."
 		})]
 	});
 }
-function H({ athleteId: e, displayName: c }) {
-	let [u, f] = _(0), [p, h] = _(!1), [x, S] = _(!1), C = d({
-		athleteId: e,
+function ee({ athleteId: t, displayName: n }) {
+	let [i, u] = y(0), [f, m] = y(!1), [h, _] = y(!1), x = p({
+		athleteId: t,
 		pagination: {
-			limit: F,
-			offset: u * F
+			limit: W,
+			offset: i * W
 		}
-	}), w = l(e), A = C.data?.items ?? [], j = C.data?.pageInfo.hasMore ?? !1, M = g(() => {
+	}), S = d(t), T = x.data?.items ?? [], E = x.data?.pageInfo.hasMore ?? !1, D = v(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of w.data ?? []) {
-			let n = e.get(t.type) ?? [];
-			n.push(t), e.set(t.type, n);
+		for (let t of S.data ?? []) {
+			let n = `${t.type}::${t.label}`, r = e.get(n) ?? [];
+			r.push(t), e.set(n, r);
+		}
+		return Array.from(e.entries()).map(([e, t]) => {
+			let n = [...t].sort((e, t) => new Date(e.recordedAt).getTime() - new Date(t.recordedAt).getTime()), r = n.map((e) => e.value), i = n[n.length - 1], a = n.length > 1 ? n[n.length - 2] : null;
+			return {
+				key: e,
+				type: i.type,
+				label: i.label,
+				unit: i.unit,
+				latest: i.value,
+				previous: a ? a.value : null,
+				min: Math.min(...r),
+				max: Math.max(...r),
+				series: r,
+				recordedAt: i.recordedAt,
+				count: n.length
+			};
+		}).sort((e, t) => new Date(t.recordedAt).getTime() - new Date(e.recordedAt).getTime());
+	}, [S.data]), k = v(() => [
+		{
+			key: "workout",
+			header: "Workout",
+			priority: "primary",
+			cell: (e) => /* @__PURE__ */ I("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ F("span", {
+					className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-[var(--color-accent-teal)]",
+					children: /* @__PURE__ */ F(te(e.title), {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					})
+				}), /* @__PURE__ */ F("span", {
+					className: "min-w-0 truncate font-medium text-text-primary",
+					children: e.title
+				})]
+			})
+		},
+		{
+			key: "duration",
+			header: "Duration",
+			priority: "secondary",
+			mobileLabel: "Duration",
+			cell: (e) => e.durationMin == null ? /* @__PURE__ */ F("span", {
+				className: "text-text-muted",
+				children: "—"
+			}) : /* @__PURE__ */ F("span", {
+				className: "tabular-nums text-text-secondary",
+				children: o(e.durationMin)
+			})
+		},
+		{
+			key: "rpe",
+			header: "RPE",
+			priority: "secondary",
+			mobileLabel: "RPE",
+			cell: (e) => e.rpe == null ? /* @__PURE__ */ F("span", {
+				className: "text-text-muted",
+				children: "—"
+			}) : /* @__PURE__ */ F(ne, { rpe: e.rpe })
+		},
+		{
+			key: "date",
+			header: "Date",
+			priority: "secondary",
+			mobileLabel: "Date",
+			cell: (e) => /* @__PURE__ */ F("span", {
+				className: "tabular-nums text-text-secondary",
+				children: a(e.performedAt)
+			})
+		},
+		{
+			key: "status",
+			header: "Status",
+			priority: "primary",
+			mobileLabel: "Status",
+			cell: (e) => /* @__PURE__ */ F(r, { status: e.status })
+		},
+		{
+			key: "notes",
+			header: "Notes",
+			priority: "hidden-on-mobile",
+			cell: (e) => e.notes ? /* @__PURE__ */ F("span", {
+				className: "line-clamp-2 max-w-[22ch] text-text-secondary",
+				children: e.notes
+			}) : /* @__PURE__ */ F("span", {
+				className: "text-text-muted",
+				children: "—"
+			})
 		}
-		return Array.from(e.entries()).map(([e, t]) => ({
-			type: e,
-			metrics: [...t].sort((e, t) => new Date(t.recordedAt).getTime() - new Date(e.recordedAt).getTime()),
-			max: Math.max(...t.map((e) => Math.abs(e.value)), 0) || 1
-		}));
-	}, [w.data]);
-	return /* @__PURE__ */ D("div", {
-		className: "space-y-8",
+	], []);
+	return /* @__PURE__ */ I("div", {
+		className: "space-y-8 pb-24 sm:pb-0",
 		children: [
-			/* @__PURE__ */ D("div", {
+			/* @__PURE__ */ I("div", {
 				className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ D("p", {
+				children: [/* @__PURE__ */ I("p", {
 					className: "text-sm text-text-secondary",
-					children: ["Tracking ", /* @__PURE__ */ E("span", {
+					children: ["Tracking ", /* @__PURE__ */ F("span", {
 						className: "font-medium text-text-primary",
-						children: c || "athlete"
+						children: n || "athlete"
 					})]
-				}), /* @__PURE__ */ D("div", {
+				}), /* @__PURE__ */ I("div", {
 					className: "flex flex-wrap gap-2",
-					children: [/* @__PURE__ */ D("button", {
-						type: "button",
-						onClick: () => h(!0),
-						className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
-						children: [/* @__PURE__ */ E(y, { className: "h-4 w-4" }), " Log workout"]
-					}), /* @__PURE__ */ D("button", {
+					children: [/* @__PURE__ */ I("button", {
 						type: "button",
-						onClick: () => S(!0),
+						onClick: () => _(!0),
 						className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
-						children: [/* @__PURE__ */ E(b, { className: "h-4 w-4" }), " Record metric"]
+						children: [/* @__PURE__ */ F(w, { className: "h-4 w-4" }), " Record metric"]
+					}), /* @__PURE__ */ I("button", {
+						type: "button",
+						onClick: () => m(!0),
+						className: e(q, "hidden sm:inline-flex"),
+						children: [/* @__PURE__ */ F(C, { className: "h-4 w-4" }), " Log workout"]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ D("section", { children: [/* @__PURE__ */ E("h2", {
+			/* @__PURE__ */ I("section", { children: [/* @__PURE__ */ F("h2", {
 				className: "mb-4 text-lg font-semibold text-text-primary",
 				children: "Performance metrics"
-			}), w.isLoading ? /* @__PURE__ */ E(s, { label: "Loading metrics…" }) : w.isError ? /* @__PURE__ */ E(o, { onRetry: () => void w.refetch() }) : M.length === 0 ? /* @__PURE__ */ E(a, {
+			}), S.isLoading ? /* @__PURE__ */ F(l, { label: "Loading metrics…" }) : S.isError ? /* @__PURE__ */ F(c, { onRetry: () => void S.refetch() }) : D.length === 0 ? /* @__PURE__ */ F(s, {
 				illustration: "empty-data",
-				icon: /* @__PURE__ */ E(b, { className: "h-10 w-10" }),
+				icon: /* @__PURE__ */ F(w, { className: "h-10 w-10" }),
 				title: "No metrics recorded",
-				description: "Record a metric — speed, strength, endurance and more — to start charting progress."
-			}) : /* @__PURE__ */ E("div", {
-				className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
-				children: M.map((e) => /* @__PURE__ */ D(k, {
-					treatment: "metric",
-					className: "p-5",
-					children: [/* @__PURE__ */ E("h3", {
-						className: "mb-3 text-sm font-semibold uppercase tracking-wide text-text-secondary",
-						children: n[e.type]
-					}), /* @__PURE__ */ E("ul", {
-						className: "space-y-3",
-						children: e.metrics.map((t) => {
-							let n = Math.max(4, Math.round(Math.abs(t.value) / e.max * 100));
-							return /* @__PURE__ */ D("li", {
-								className: "flex items-center gap-3",
-								title: r(t.recordedAt),
-								children: [
-									/* @__PURE__ */ E("span", {
-										className: "w-24 shrink-0 truncate text-sm text-text-primary",
-										children: t.label
-									}),
-									/* @__PURE__ */ E("span", {
-										className: "h-2 flex-1 overflow-hidden rounded-full bg-bg-sunken",
-										"aria-hidden": "true",
-										children: /* @__PURE__ */ E("span", {
-											className: "block h-2 rounded-full bg-[var(--color-accent-teal)]",
-											style: { width: `${n}%` }
-										})
-									}),
-									/* @__PURE__ */ D("span", {
-										className: "w-24 shrink-0 text-right text-sm tabular-nums text-text-primary",
-										children: [t.value, t.unit ? ` ${t.unit}` : ""]
-									})
-								]
-							}, t.id);
-						})
-					})]
-				}, e.type))
+				description: "Record a metric — speed, strength, endurance and more — to start charting progress.",
+				action: /* @__PURE__ */ I("button", {
+					type: "button",
+					onClick: () => _(!0),
+					className: q,
+					children: [/* @__PURE__ */ F(O, { className: "h-4 w-4" }), " Record metric"]
+				})
+			}) : /* @__PURE__ */ F("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: D.map((e) => /* @__PURE__ */ F(re, { metric: e }, e.key))
 			})] }),
-			/* @__PURE__ */ D("section", { children: [/* @__PURE__ */ E("h2", {
+			/* @__PURE__ */ I("section", { children: [/* @__PURE__ */ F("h2", {
 				className: "mb-4 text-lg font-semibold text-text-primary",
 				children: "Workout history"
-			}), C.isLoading ? /* @__PURE__ */ E(s, { label: "Loading workouts…" }) : C.isError ? /* @__PURE__ */ E(o, { onRetry: () => void C.refetch() }) : A.length === 0 ? /* @__PURE__ */ E(a, {
+			}), x.isLoading ? /* @__PURE__ */ F(l, { label: "Loading workouts…" }) : x.isError ? /* @__PURE__ */ F(c, { onRetry: () => void x.refetch() }) : T.length === 0 ? /* @__PURE__ */ F(s, {
 				illustration: "empty-data",
-				icon: /* @__PURE__ */ E(v, { className: "h-10 w-10" }),
+				icon: /* @__PURE__ */ F(b, { className: "h-10 w-10" }),
 				title: "No workouts logged",
 				description: "Log a workout to build this athlete's training history.",
-				action: /* @__PURE__ */ E("button", {
+				action: /* @__PURE__ */ I("button", {
 					type: "button",
-					onClick: () => h(!0),
-					className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
-					children: "Log workout"
+					onClick: () => m(!0),
+					className: q,
+					children: [/* @__PURE__ */ F(C, { className: "h-4 w-4" }), " Log workout"]
 				})
-			}) : /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(O, { children: /* @__PURE__ */ E("div", {
-				className: "divide-y divide-border-seam",
-				children: A.map((e) => /* @__PURE__ */ D("div", {
-					className: "flex flex-wrap items-center gap-x-4 gap-y-1 py-3",
-					children: [/* @__PURE__ */ D("div", {
-						className: "min-w-0 flex-1",
-						children: [
-							/* @__PURE__ */ E("p", {
-								className: "truncate text-sm font-medium text-text-primary",
-								children: e.title
-							}),
-							/* @__PURE__ */ D("div", {
-								className: "mt-0.5 flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-secondary",
-								children: [
-									/* @__PURE__ */ E("span", { children: r(e.performedAt) }),
-									e.durationMin != null && /* @__PURE__ */ E("span", { children: i(e.durationMin) }),
-									e.rpe != null && /* @__PURE__ */ D("span", { children: ["RPE ", e.rpe] }),
-									e.totalLoad != null && /* @__PURE__ */ D("span", { children: ["Load ", e.totalLoad] })
-								]
-							}),
-							e.notes && /* @__PURE__ */ E("p", {
-								className: "mt-0.5 truncate text-xs text-text-secondary",
-								children: e.notes
-							})
-						]
-					}), /* @__PURE__ */ E(t, { status: e.status })]
-				}, e.id))
-			}) }), /* @__PURE__ */ E(m, {
+			}) : /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(L, {
+				treatment: "metric",
+				className: "overflow-hidden p-1 sm:p-2",
+				children: /* @__PURE__ */ F(U, {
+					columns: k,
+					data: T,
+					rowKey: (e) => e.id,
+					caption: `Workout history for ${n || "athlete"}`
+				})
+			}), /* @__PURE__ */ F(g, {
 				className: "mt-6",
-				page: u,
-				hasMore: j,
-				onPrev: () => f((e) => Math.max(0, e - 1)),
-				onNext: () => f((e) => e + 1)
+				page: i,
+				hasMore: E,
+				onPrev: () => u((e) => Math.max(0, e - 1)),
+				onNext: () => u((e) => e + 1)
 			})] })] }),
-			/* @__PURE__ */ E(U, {
-				open: p,
-				onOpenChange: h,
-				athleteId: e,
-				displayName: c
+			/* @__PURE__ */ F("div", {
+				className: "sticky bottom-0 z-30 -mx-6 border-t border-border-seam bg-bg-canvas/85 px-6 pb-[max(env(safe-area-inset-bottom),0.75rem)] pt-3 backdrop-blur sm:hidden",
+				children: /* @__PURE__ */ I("button", {
+					type: "button",
+					onClick: () => m(!0),
+					className: e(q, "w-full py-3 text-base"),
+					children: [/* @__PURE__ */ F(O, { className: "h-5 w-5" }), " Log workout"]
+				})
 			}),
-			/* @__PURE__ */ E(W, {
-				open: x,
-				onOpenChange: S,
-				athleteId: e,
-				displayName: c
+			/* @__PURE__ */ F(ie, {
+				open: f,
+				onOpenChange: m,
+				athleteId: t,
+				displayName: n
+			}),
+			/* @__PURE__ */ F(ae, {
+				open: h,
+				onOpenChange: _,
+				athleteId: t,
+				displayName: n
 			})
 		]
 	});
 }
-function U({ open: e, onOpenChange: t, athleteId: n, displayName: r }) {
-	let i = c(), [a, o] = _(""), [s, l] = _("COMPLETED"), [u, d] = _(B), [m, h] = _(""), [g, v] = _(""), [y, b] = _(""), [S, w] = _(""), [T, O] = _(null), k = () => {
-		o(""), l("COMPLETED"), d(B()), h(""), v(""), b(""), w(""), O(null);
+function te(e) {
+	let t = e.toLowerCase();
+	return /strength|lift|squat|deadlift|bench|1rm|weight/.test(t) ? C : /speed|sprint|agility|accel|split/.test(t) ? N : /endurance|aerobic|cardio|run|beep|yo-?yo/.test(t) ? b : /recovery|mobility|stretch|rest/.test(t) ? T : /accuracy|shoot|target/.test(t) ? j : C;
+}
+function ne({ rpe: t }) {
+	return /* @__PURE__ */ F("span", {
+		className: e("inline-flex h-7 min-w-[1.75rem] items-center justify-center rounded-md border px-1.5 text-sm font-semibold tabular-nums", t >= 8 ? "border-status-error-border text-status-error-text" : t >= 5 ? "border-status-warning-border text-status-warning-text" : "border-border-seam text-text-secondary"),
+		children: t
+	});
+}
+function re({ metric: e }) {
+	let t = J[e.type], r = e.previous == null ? null : e.latest - e.previous, o = e.max > e.min, s = o ? Math.round((e.latest - e.min) / (e.max - e.min) * 100) : 100, c = e.unit ? ` ${e.unit}` : "";
+	return /* @__PURE__ */ I(L, {
+		treatment: "metric",
+		className: "flex flex-col gap-3 p-5",
+		children: [
+			/* @__PURE__ */ I("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ I("span", {
+					className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-accent-teal)]",
+					children: [/* @__PURE__ */ F(t, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					}), i[e.type]]
+				}), /* @__PURE__ */ F("span", {
+					className: "text-xs text-text-muted",
+					children: a(e.recordedAt)
+				})]
+			}),
+			/* @__PURE__ */ I("div", {
+				className: "flex items-end justify-between gap-3",
+				children: [/* @__PURE__ */ I("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ F("p", {
+						className: "truncate text-sm text-text-secondary",
+						children: e.label
+					}), /* @__PURE__ */ I("p", {
+						className: "mt-0.5 text-3xl font-bold leading-none tracking-tight tabular-nums text-text-primary",
+						children: [Q(e.latest), e.unit ? /* @__PURE__ */ F("span", {
+							className: "ml-1 text-base font-medium text-text-secondary",
+							children: e.unit
+						}) : null]
+					})]
+				}), e.series.length > 1 ? /* @__PURE__ */ F("div", {
+					className: "w-24 shrink-0 sm:w-28",
+					children: /* @__PURE__ */ F(n, {
+						data: e.series,
+						variant: "area",
+						height: 40,
+						label: `${e.label} trend`
+					})
+				}) : null]
+			}),
+			o ? /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("span", {
+				className: "block h-1.5 overflow-hidden rounded-full bg-bg-sunken",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ F("span", {
+					className: "block h-1.5 rounded-full bg-[var(--color-accent-teal)]",
+					style: { width: `${Math.max(4, Math.min(100, s))}%` }
+				})
+			}), /* @__PURE__ */ I("div", {
+				className: "mt-1 flex justify-between text-[0.7rem] tabular-nums text-text-muted",
+				children: [
+					/* @__PURE__ */ F("span", { children: Q(e.min) }),
+					/* @__PURE__ */ F("span", { children: Q((e.min + e.max) / 2) }),
+					/* @__PURE__ */ F("span", { children: Q(e.max) })
+				]
+			})] }) : null,
+			/* @__PURE__ */ F("div", {
+				className: "mt-auto flex items-center gap-1.5 text-sm",
+				children: r == null || r === 0 ? /* @__PURE__ */ F("span", {
+					className: "text-text-muted",
+					children: e.count > 1 ? "No change vs previous" : "First reading"
+				}) : /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ I("span", {
+					className: "inline-flex items-center gap-0.5 font-medium tabular-nums text-text-secondary",
+					children: [
+						F(r > 0 ? S : x, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}),
+						Q(Math.abs(r)),
+						c
+					]
+				}), /* @__PURE__ */ F("span", {
+					className: "text-text-muted",
+					children: "vs previous"
+				})] })
+			})
+		]
+	});
+}
+function ie({ open: t, onOpenChange: n, athleteId: r, displayName: i }) {
+	let a = u(), [o, s] = y(""), [c, l] = y("COMPLETED"), [d, f] = y(Z), [p, g] = y(""), [_, v] = y(""), [b, x] = y(""), [S, C] = y(""), [w, T] = y(null), D = () => {
+		s(""), l("COMPLETED"), f(Z()), g(""), v(""), x(""), C(""), T(null);
 	};
-	return /* @__PURE__ */ E(A, {
-		open: e,
-		onOpenChange: t,
-		children: /* @__PURE__ */ D(j, { children: [/* @__PURE__ */ E(N, { children: /* @__PURE__ */ D(P, { children: ["Log workout", r ? ` — ${r}` : ""] }) }), /* @__PURE__ */ D("form", {
+	return /* @__PURE__ */ F(R, {
+		open: t,
+		onOpenChange: n,
+		children: /* @__PURE__ */ I(z, { children: [/* @__PURE__ */ F(V, { children: /* @__PURE__ */ I(H, { children: ["Log workout", i ? ` — ${i}` : ""] }) }), /* @__PURE__ */ I("form", {
 			onSubmit: async (e) => {
-				if (e.preventDefault(), O(null), !a.trim()) {
-					O("A workout title is required.");
+				if (e.preventDefault(), T(null), !o.trim()) {
+					T("A workout title is required.");
 					return;
 				}
-				if (!u) {
-					O("A performed date and time is required.");
+				if (!d) {
+					T("A performed date and time is required.");
 					return;
 				}
 				try {
-					await i.mutateAsync({
-						athleteId: n,
-						title: a.trim(),
-						status: s,
-						performedAt: new Date(u).toISOString(),
-						durationMin: R(m),
-						rpe: R(g),
-						totalLoad: z(y),
+					await a.mutateAsync({
+						athleteId: r,
+						title: o.trim(),
+						status: c,
+						performedAt: new Date(d).toISOString(),
+						durationMin: Y(p),
+						rpe: Y(_),
+						totalLoad: X(b),
 						notes: S.trim() || void 0
-					}), k(), t(!1);
+					}), D(), n(!1);
 				} catch (e) {
-					O(e instanceof Error ? e.message : "Failed to log workout.");
+					T(e instanceof Error ? e.message : "Failed to log workout.");
 				}
 			},
 			className: "space-y-4 px-1",
 			children: [
-				/* @__PURE__ */ E(f, {
+				/* @__PURE__ */ F(m, {
 					label: "Title",
 					htmlFor: "workoutTitle",
 					required: !0,
-					children: /* @__PURE__ */ E("input", {
+					children: /* @__PURE__ */ F("input", {
 						id: "workoutTitle",
-						className: p,
-						value: a,
-						onChange: (e) => o(e.target.value),
+						className: h,
+						value: o,
+						onChange: (e) => s(e.target.value),
 						placeholder: "e.g. Lower-body strength"
 					})
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ I("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-					children: [/* @__PURE__ */ E(f, {
+					children: [/* @__PURE__ */ F(m, {
 						label: "Status",
 						htmlFor: "workoutStatus",
-						children: /* @__PURE__ */ E("select", {
+						children: /* @__PURE__ */ F("select", {
 							id: "workoutStatus",
-							className: p,
-							value: s,
+							className: h,
+							value: c,
 							onChange: (e) => l(e.target.value),
-							children: I.map((e) => /* @__PURE__ */ E("option", {
+							children: G.map((e) => /* @__PURE__ */ F("option", {
 								value: e,
 								children: e.charAt(0) + e.slice(1).toLowerCase()
 							}, e))
 						})
-					}), /* @__PURE__ */ E(f, {
+					}), /* @__PURE__ */ F(m, {
 						label: "Performed at",
 						htmlFor: "workoutPerformedAt",
 						required: !0,
-						children: /* @__PURE__ */ E("input", {
+						children: /* @__PURE__ */ F("input", {
 							id: "workoutPerformedAt",
 							type: "datetime-local",
-							className: p,
-							value: u,
-							onChange: (e) => d(e.target.value)
+							className: h,
+							value: d,
+							onChange: (e) => f(e.target.value)
 						})
 					})]
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ I("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ E(f, {
+						/* @__PURE__ */ F(m, {
 							label: "Duration (min)",
 							htmlFor: "workoutDuration",
-							children: /* @__PURE__ */ E("input", {
+							children: /* @__PURE__ */ F("input", {
 								id: "workoutDuration",
 								inputMode: "numeric",
-								className: p,
-								value: m,
-								onChange: (e) => h(e.target.value)
+								className: h,
+								value: p,
+								onChange: (e) => g(e.target.value)
 							})
 						}),
-						/* @__PURE__ */ E(f, {
+						/* @__PURE__ */ F(m, {
 							label: "RPE (1–10)",
 							htmlFor: "workoutRpe",
-							children: /* @__PURE__ */ E("input", {
+							children: /* @__PURE__ */ F("input", {
 								id: "workoutRpe",
 								inputMode: "numeric",
-								className: p,
-								value: g,
+								className: h,
+								value: _,
 								onChange: (e) => v(e.target.value)
 							})
 						}),
-						/* @__PURE__ */ E(f, {
+						/* @__PURE__ */ F(m, {
 							label: "Total load",
 							htmlFor: "workoutLoad",
-							children: /* @__PURE__ */ E("input", {
+							children: /* @__PURE__ */ F("input", {
 								id: "workoutLoad",
 								inputMode: "decimal",
-								className: p,
-								value: y,
-								onChange: (e) => b(e.target.value)
+								className: h,
+								value: b,
+								onChange: (e) => x(e.target.value)
 							})
 						})
 					]
 				}),
-				/* @__PURE__ */ E(f, {
+				/* @__PURE__ */ F(m, {
 					label: "Notes",
 					htmlFor: "workoutNotes",
-					children: /* @__PURE__ */ E("textarea", {
+					children: /* @__PURE__ */ F("textarea", {
 						id: "workoutNotes",
 						rows: 2,
-						className: p,
+						className: h,
 						value: S,
-						onChange: (e) => w(e.target.value),
+						onChange: (e) => C(e.target.value),
 						placeholder: "How did the session go?"
 					})
 				}),
-				T && /* @__PURE__ */ E("p", {
+				w && /* @__PURE__ */ F("p", {
 					className: "text-sm text-status-error-text",
-					children: T
+					children: w
 				}),
-				/* @__PURE__ */ D(M, { children: [/* @__PURE__ */ E("button", {
+				/* @__PURE__ */ I(B, { children: [/* @__PURE__ */ F("button", {
 					type: "button",
-					onClick: () => t(!1),
+					onClick: () => n(!1),
 					className: "rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
 					children: "Cancel"
-				}), /* @__PURE__ */ D("button", {
+				}), /* @__PURE__ */ I("button", {
 					type: "submit",
-					disabled: i.isPending,
-					className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-60",
-					children: [i.isPending ? /* @__PURE__ */ E(x, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(C, { className: "h-4 w-4" }), "Log workout"]
+					disabled: a.isPending,
+					className: e(q, "disabled:opacity-60"),
+					children: [a.isPending ? /* @__PURE__ */ F(E, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ F(k, { className: "h-4 w-4" }), "Log workout"]
 				})] })
 			]
 		})] })
 	});
 }
-function W({ open: e, onOpenChange: t, athleteId: r, displayName: i }) {
-	let a = u(), [o, s] = _("CUSTOM"), [c, l] = _(""), [d, m] = _(""), [h, g] = _(""), [v, y] = _(""), [b, C] = _(B), [w, T] = _(null), O = () => {
-		s("CUSTOM"), l(""), m(""), g(""), y(""), C(B()), T(null);
+function ae({ open: t, onOpenChange: n, athleteId: r, displayName: a }) {
+	let o = f(), [s, c] = y("CUSTOM"), [l, u] = y(""), [d, p] = y(""), [g, _] = y(""), [v, b] = y(""), [x, S] = y(Z), [C, w] = y(null), T = () => {
+		c("CUSTOM"), u(""), p(""), _(""), b(""), S(Z()), w(null);
 	};
-	return /* @__PURE__ */ E(A, {
-		open: e,
-		onOpenChange: t,
-		children: /* @__PURE__ */ D(j, { children: [/* @__PURE__ */ E(N, { children: /* @__PURE__ */ D(P, { children: ["Record metric", i ? ` — ${i}` : ""] }) }), /* @__PURE__ */ D("form", {
+	return /* @__PURE__ */ F(R, {
+		open: t,
+		onOpenChange: n,
+		children: /* @__PURE__ */ I(z, { children: [/* @__PURE__ */ F(V, { children: /* @__PURE__ */ I(H, { children: ["Record metric", a ? ` — ${a}` : ""] }) }), /* @__PURE__ */ I("form", {
 			onSubmit: async (e) => {
-				if (e.preventDefault(), T(null), !c.trim()) {
-					T("A metric label is required.");
+				if (e.preventDefault(), w(null), !l.trim()) {
+					w("A metric label is required.");
 					return;
 				}
-				let n = z(d);
-				if (n === void 0) {
-					T("A numeric value is required.");
+				let t = X(d);
+				if (t === void 0) {
+					w("A numeric value is required.");
 					return;
 				}
-				if (!b) {
-					T("A recorded date and time is required.");
+				if (!x) {
+					w("A recorded date and time is required.");
 					return;
 				}
 				try {
-					await a.mutateAsync({
+					await o.mutateAsync({
 						athleteId: r,
-						type: o,
-						label: c.trim(),
-						value: n,
-						unit: h.trim() || void 0,
+						type: s,
+						label: l.trim(),
+						value: t,
+						unit: g.trim() || void 0,
 						source: v.trim() || void 0,
-						recordedAt: new Date(b).toISOString()
-					}), O(), t(!1);
+						recordedAt: new Date(x).toISOString()
+					}), T(), n(!1);
 				} catch (e) {
-					T(e instanceof Error ? e.message : "Failed to record metric.");
+					w(e instanceof Error ? e.message : "Failed to record metric.");
 				}
 			},
 			className: "space-y-4 px-1",
 			children: [
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ I("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-					children: [/* @__PURE__ */ E(f, {
+					children: [/* @__PURE__ */ F(m, {
 						label: "Type",
 						htmlFor: "metricType",
-						children: /* @__PURE__ */ E("select", {
+						children: /* @__PURE__ */ F("select", {
 							id: "metricType",
-							className: p,
-							value: o,
-							onChange: (e) => s(e.target.value),
-							children: L.map((e) => /* @__PURE__ */ E("option", {
+							className: h,
+							value: s,
+							onChange: (e) => c(e.target.value),
+							children: K.map((e) => /* @__PURE__ */ F("option", {
 								value: e,
-								children: n[e]
+								children: i[e]
 							}, e))
 						})
-					}), /* @__PURE__ */ E(f, {
+					}), /* @__PURE__ */ F(m, {
 						label: "Recorded at",
 						htmlFor: "metricRecordedAt",
 						required: !0,
-						children: /* @__PURE__ */ E("input", {
+						children: /* @__PURE__ */ F("input", {
 							id: "metricRecordedAt",
 							type: "datetime-local",
-							className: p,
-							value: b,
-							onChange: (e) => C(e.target.value)
+							className: h,
+							value: x,
+							onChange: (e) => S(e.target.value)
 						})
 					})]
 				}),
-				/* @__PURE__ */ E(f, {
+				/* @__PURE__ */ F(m, {
 					label: "Label",
 					htmlFor: "metricLabel",
 					required: !0,
-					children: /* @__PURE__ */ E("input", {
+					children: /* @__PURE__ */ F("input", {
 						id: "metricLabel",
-						className: p,
-						value: c,
-						onChange: (e) => l(e.target.value),
+						className: h,
+						value: l,
+						onChange: (e) => u(e.target.value),
 						placeholder: "e.g. 40m sprint"
 					})
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ I("div", {
 					className: "grid grid-cols-2 gap-4",
-					children: [/* @__PURE__ */ E(f, {
+					children: [/* @__PURE__ */ F(m, {
 						label: "Value",
 						htmlFor: "metricValue",
 						required: !0,
-						children: /* @__PURE__ */ E("input", {
+						children: /* @__PURE__ */ F("input", {
 							id: "metricValue",
 							inputMode: "decimal",
-							className: p,
+							className: h,
 							value: d,
-							onChange: (e) => m(e.target.value),
+							onChange: (e) => p(e.target.value),
 							placeholder: "e.g. 4.8"
 						})
-					}), /* @__PURE__ */ E(f, {
+					}), /* @__PURE__ */ F(m, {
 						label: "Unit",
 						htmlFor: "metricUnit",
-						children: /* @__PURE__ */ E("input", {
+						children: /* @__PURE__ */ F("input", {
 							id: "metricUnit",
-							className: p,
-							value: h,
-							onChange: (e) => g(e.target.value),
+							className: h,
+							value: g,
+							onChange: (e) => _(e.target.value),
 							placeholder: "e.g. s, kg, bpm"
 						})
 					})]
 				}),
-				/* @__PURE__ */ E(f, {
+				/* @__PURE__ */ F(m, {
 					label: "Source",
 					htmlFor: "metricSource",
 					hint: "Optional — device, test or coach.",
-					children: /* @__PURE__ */ E("input", {
+					children: /* @__PURE__ */ F("input", {
 						id: "metricSource",
-						className: p,
+						className: h,
 						value: v,
-						onChange: (e) => y(e.target.value),
+						onChange: (e) => b(e.target.value),
 						placeholder: "e.g. GPS vest"
 					})
 				}),
-				w && /* @__PURE__ */ E("p", {
+				C && /* @__PURE__ */ F("p", {
 					className: "text-sm text-status-error-text",
-					children: w
+					children: C
 				}),
-				/* @__PURE__ */ D(M, { children: [/* @__PURE__ */ E("button", {
+				/* @__PURE__ */ I(B, { children: [/* @__PURE__ */ F("button", {
 					type: "button",
-					onClick: () => t(!1),
+					onClick: () => n(!1),
 					className: "rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
 					children: "Cancel"
-				}), /* @__PURE__ */ D("button", {
+				}), /* @__PURE__ */ I("button", {
 					type: "submit",
-					disabled: a.isPending,
-					className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-60",
-					children: [a.isPending ? /* @__PURE__ */ E(x, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(S, { className: "h-4 w-4" }), "Record metric"]
+					disabled: o.isPending,
+					className: e(q, "disabled:opacity-60"),
+					children: [o.isPending ? /* @__PURE__ */ F(E, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ F(O, { className: "h-4 w-4" }), "Record metric"]
 				})] })
 			]
 		})] })
 	});
 }
 //#endregion
-export { V as PerformancePage };
+export { $ as PerformancePage };
 
 //# sourceMappingURL=PerformancePage.js.map