@burdenoff/microfe-atheletebridge 2026.705.2 → 2026.706.1

package/dist/atheletebridge/components/MetricsCard.js

@@ -1,26 +1,66 @@
 import { cn as e } from "../utils/cn.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { GlassCard as r } from "@burdenoff/fe-libs/ui";
+import { Sparkline as t } from "./viz/Sparkline.js";
+import "./viz/index.js";
+import { ArrowDownRight as n, ArrowUpRight as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { GlassCard as o } from "@burdenoff/fe-libs/ui";
 //#region src/atheletebridge/components/MetricsCard.tsx
-var i = ({ icon: i, value: a, label: o, featured: s = !1, className: c }) => /* @__PURE__ */ n(r, {
-	treatment: s ? "glass" : "metric",
-	glow: s,
-	className: e("p-6", c),
-	children: [/* @__PURE__ */ t("div", {
-		className: "relative text-text-secondary",
-		children: i
-	}), /* @__PURE__ */ n("div", {
-		className: "relative mt-3",
-		children: [/* @__PURE__ */ t("p", {
-			className: "text-2xl font-bold tabular-nums text-text-primary",
-			children: a
-		}), /* @__PURE__ */ t("p", {
-			className: "mt-1 text-sm text-text-secondary",
-			children: o
-		})]
-	})]
-});
+var s = {
+	default: "text-text-primary",
+	accent: "text-[var(--color-accent-teal)]",
+	success: "text-status-success-text"
+}, c = ({ icon: c, value: l, label: u, featured: d = !1, tone: f = "default", delta: p, deltaSuffix: m = "%", deltaLabel: h, invertDelta: g = !1, sparkline: _, className: v }) => {
+	let y = typeof p == "number", b = (p ?? 0) === 0, x = g ? (p ?? 0) < 0 : (p ?? 0) > 0, S = (p ?? 0) > 0, C = b ? "text-text-muted" : x ? "text-status-success-text" : "text-status-error-text";
+	return /* @__PURE__ */ a(o, {
+		treatment: d ? "glass" : "metric",
+		glow: d,
+		className: e("p-6", v),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "relative text-text-secondary",
+				children: c
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "relative mt-3",
+				children: [/* @__PURE__ */ i("p", {
+					className: e("text-2xl font-bold tabular-nums", s[f]),
+					children: l
+				}), /* @__PURE__ */ i("p", {
+					className: "mt-1 text-sm text-text-secondary",
+					children: u
+				})]
+			}),
+			y ? /* @__PURE__ */ a("div", {
+				className: "relative mt-2 flex items-center gap-1.5 text-sm",
+				children: [/* @__PURE__ */ a("span", {
+					className: e("inline-flex items-center gap-0.5 font-medium tabular-nums", C),
+					children: [
+						b ? null : i(S ? r : n, {
+							"aria-hidden": "true",
+							className: "h-4 w-4"
+						}),
+						S ? "+" : "",
+						p,
+						m
+					]
+				}), h ? /* @__PURE__ */ i("span", {
+					className: "text-text-muted",
+					children: h
+				}) : null]
+			}) : null,
+			_ && _.length > 1 ? /* @__PURE__ */ i("div", {
+				className: "relative mt-3",
+				children: /* @__PURE__ */ i(t, {
+					data: _,
+					variant: "area",
+					label: `${u} trend`,
+					height: 32
+				})
+			}) : null
+		]
+	});
+};
 //#endregion
-export { i as MetricsCard };
+export { c as MetricsCard };
 
 //# sourceMappingURL=MetricsCard.js.map

package/dist/atheletebridge/components/MetricsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsCard.js","names":[],"sources":["../../../src/atheletebridge/components/MetricsCard.tsx"],"sourcesContent":["/**\n * Metrics Card Component\n * @module atheletebridge/components\n *\n * Boff UI 2.0: KPI tiles use the glassmorphic `GlassCard` \"metric\" treatment\n * (accent wash + seam border + soft pop-lift). The hero metric per page can\n * opt into the brighter `glass` treatment with an accent glow via `featured`.\n * Numerals are tabular for clean alignment. No hover movement.\n */\n\nimport type { FC, ReactNode } from 'react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/cn';\n\ninterface MetricsCardProps {\n  icon: ReactNode;\n  value: string | number;\n  label: string;\n  /** Render as the single featured hero metric (glass treatment + glow). */\n  featured?: boolean;\n  className?: string;\n}\n\nexport const MetricsCard: FC<MetricsCardProps> = ({\n  icon,\n  value,\n  label,\n  featured = false,\n  className,\n}) => {\n  return (\n    <GlassCard\n      treatment={featured ? 'glass' : 'metric'}\n      glow={featured}\n      className={cn('p-6', className)}\n    >\n      <div className=\"relative text-text-secondary\">{icon}</div>\n      <div className=\"relative mt-3\">\n        <p className=\"text-2xl font-bold tabular-nums text-text-primary\">{value}</p>\n        <p className=\"mt-1 text-sm text-text-secondary\">{label}</p>\n      </div>\n    </GlassCard>\n  );\n};\n"],"mappings":";;;;AAuBA,IAAa,KAAqC,EAChD,SACA,UACA,UACA,cAAW,IACX,mBAGE,kBAAC,GAAD;CACE,WAAW,IAAW,UAAU;CAChC,MAAM;CACN,WAAW,EAAG,OAAO,EAAU;WAHjC,CAKE,kBAAC,OAAD;EAAK,WAAU;YAAgC;EAAW,CAAA,EAC1D,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,KAAD;GAAG,WAAU;aAAqD;GAAU,CAAA,EAC5E,kBAAC,KAAD;GAAG,WAAU;aAAoC;GAAU,CAAA,CACvD;IACI"}
+{"version":3,"file":"MetricsCard.js","names":[],"sources":["../../../src/atheletebridge/components/MetricsCard.tsx"],"sourcesContent":["/**\n * Metrics Card Component\n * @module atheletebridge/components\n *\n * Boff UI 2.0: KPI tiles use the glassmorphic `GlassCard` \"metric\" treatment\n * (accent wash + seam border + soft pop-lift). The hero metric per page can\n * opt into the brighter `glass` treatment with an accent glow via `featured`.\n *\n * The original API (`icon`, `value`, `label`, `featured`, `className`) is\n * unchanged. Optional props enrich the tile toward the mock's KPI style: a teal\n * `tone`, a signed `delta` pill, and a footer `sparkline` trend — all opt-in, so\n * existing call sites render exactly as before. Numerals are tabular.\n */\n\nimport type { FC, ReactNode } from 'react';\nimport { ArrowDownRight, ArrowUpRight } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { Sparkline } from './viz';\nimport { cn } from '../utils/cn';\n\ntype MetricTone = 'default' | 'accent' | 'success';\n\ninterface MetricsCardProps {\n  icon: ReactNode;\n  value: string | number;\n  label: string;\n  /** Render as the single featured hero metric (glass treatment + glow). */\n  featured?: boolean;\n  /** Value color: `default` (primary), `accent` (teal), or `success` (green). */\n  tone?: MetricTone;\n  /** Signed change; positive is good unless `invertDelta`. Renders a pill. */\n  delta?: number;\n  /** Unit appended to the delta (default \"%\"). */\n  deltaSuffix?: string;\n  /** Context line beside the delta, e.g. \"vs last month\". */\n  deltaLabel?: string;\n  /** When true (e.g. injuries), a negative delta is the good outcome. */\n  invertDelta?: boolean;\n  /** Optional trend rendered as a footer sparkline. */\n  sparkline?: number[];\n  className?: string;\n}\n\nconst TONE_CLASS: Record<MetricTone, string> = {\n  default: 'text-text-primary',\n  accent: 'text-[var(--color-accent-teal)]',\n  success: 'text-status-success-text',\n};\n\nexport const MetricsCard: FC<MetricsCardProps> = ({\n  icon,\n  value,\n  label,\n  featured = false,\n  tone = 'default',\n  delta,\n  deltaSuffix = '%',\n  deltaLabel,\n  invertDelta = false,\n  sparkline,\n  className,\n}) => {\n  const hasDelta = typeof delta === 'number';\n  const isNeutral = (delta ?? 0) === 0;\n  const positiveIsGood = invertDelta ? (delta ?? 0) < 0 : (delta ?? 0) > 0;\n  const rising = (delta ?? 0) > 0;\n  const deltaTone = isNeutral\n    ? 'text-text-muted'\n    : positiveIsGood\n      ? 'text-status-success-text'\n      : 'text-status-error-text';\n\n  return (\n    <GlassCard\n      treatment={featured ? 'glass' : 'metric'}\n      glow={featured}\n      className={cn('p-6', className)}\n    >\n      <div className=\"relative text-text-secondary\">{icon}</div>\n      <div className=\"relative mt-3\">\n        <p className={cn('text-2xl font-bold tabular-nums', TONE_CLASS[tone])}>{value}</p>\n        <p className=\"mt-1 text-sm text-text-secondary\">{label}</p>\n      </div>\n\n      {hasDelta ? (\n        <div className=\"relative mt-2 flex items-center gap-1.5 text-sm\">\n          <span className={cn('inline-flex items-center gap-0.5 font-medium tabular-nums', deltaTone)}>\n            {isNeutral ? null : rising ? (\n              <ArrowUpRight aria-hidden=\"true\" className=\"h-4 w-4\" />\n            ) : (\n              <ArrowDownRight aria-hidden=\"true\" className=\"h-4 w-4\" />\n            )}\n            {rising ? '+' : ''}\n            {delta}\n            {deltaSuffix}\n          </span>\n          {deltaLabel ? <span className=\"text-text-muted\">{deltaLabel}</span> : null}\n        </div>\n      ) : null}\n\n      {sparkline && sparkline.length > 1 ? (\n        <div className=\"relative mt-3\">\n          <Sparkline data={sparkline} variant=\"area\" label={`${label} trend`} height={32} />\n        </div>\n      ) : null}\n    </GlassCard>\n  );\n};\n"],"mappings":";;;;;;;AA2CA,IAAM,IAAyC;CAC7C,SAAS;CACT,QAAQ;CACR,SAAS;CACV,EAEY,KAAqC,EAChD,SACA,UACA,UACA,cAAW,IACX,UAAO,WACP,UACA,iBAAc,KACd,eACA,iBAAc,IACd,cACA,mBACI;CACJ,IAAM,IAAW,OAAO,KAAU,UAC5B,KAAa,KAAS,OAAO,GAC7B,IAAiB,KAAe,KAAS,KAAK,KAAK,KAAS,KAAK,GACjE,KAAU,KAAS,KAAK,GACxB,IAAY,IACd,oBACA,IACE,6BACA;AAEN,QACE,kBAAC,GAAD;EACE,WAAW,IAAW,UAAU;EAChC,MAAM;EACN,WAAW,EAAG,OAAO,EAAU;YAHjC;GAKE,kBAAC,OAAD;IAAK,WAAU;cAAgC;IAAW,CAAA;GAC1D,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAW,EAAG,mCAAmC,EAAW,GAAM;eAAG;KAAU,CAAA,EAClF,kBAAC,KAAD;KAAG,WAAU;eAAoC;KAAU,CAAA,CACvD;;GAEL,IACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAW,EAAG,6DAA6D,EAAU;eAA3F;MACG,IAAY,OACX,EADkB,IACjB,IAEA,GAFD;OAAc,eAAY;OAAO,WAAU;OAAY,CAEE;MAE1D,IAAS,MAAM;MACf;MACA;MACI;QACN,IAAa,kBAAC,QAAD;KAAM,WAAU;eAAmB;KAAkB,CAAA,GAAG,KAClE;QACJ;GAEH,KAAa,EAAU,SAAS,IAC/B,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAAW,MAAM;KAAW,SAAQ;KAAO,OAAO,GAAG,EAAM;KAAS,QAAQ;KAAM,CAAA;IAC9E,CAAA,GACJ;GACM"}

package/dist/atheletebridge/components/ProgramCard.js

@@ -1,69 +1,101 @@
 import { cn as e } from "../utils/cn.js";
 import { StatusBadge as t } from "./StatusBadge.js";
 import { PROGRAM_LEVEL_LABELS as n, SPORT_ICONS as r, SPORT_LABELS as i } from "./domain.js";
-import { CalendarRange as a, Copy as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { GlassCard as l } from "@burdenoff/fe-libs/ui";
+import { CalendarRange as a, Copy as o, Dumbbell as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Badge as u, GlassCard as d } from "@burdenoff/fe-libs/ui";
 //#region src/atheletebridge/components/ProgramCard.tsx
-var u = ({ program: u, onClick: d }) => {
-	let f = r[u.sport];
-	return /* @__PURE__ */ c(l, {
+var f = {
+	BEGINNER: "success",
+	INTERMEDIATE: "info",
+	ADVANCED: "warning",
+	ELITE: "default"
+}, p = ({ program: p, onClick: m, drillCount: h }) => {
+	let g = r[p.sport], _ = h ?? p.drills?.length;
+	return /* @__PURE__ */ l(d, {
 		treatment: "metric",
 		role: "button",
 		tabIndex: 0,
-		onClick: d,
+		onClick: m,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), d?.());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), m?.());
 		},
-		className: e("cursor-pointer p-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"),
+		className: e("cursor-pointer p-5 transition-transform duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"),
 		children: [
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ l("div", {
 				className: "flex items-start justify-between gap-3",
-				children: [/* @__PURE__ */ c("div", {
-					className: "flex items-center gap-3 min-w-0",
-					children: [/* @__PURE__ */ s("div", {
-						className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-						children: /* @__PURE__ */ s(f, { className: "h-5 w-5" })
-					}), /* @__PURE__ */ c("div", {
+				children: [/* @__PURE__ */ l("div", {
+					className: "flex min-w-0 items-center gap-3",
+					children: [/* @__PURE__ */ c("div", {
+						className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[var(--color-accent-soft)] text-text-primary",
+						children: /* @__PURE__ */ c(g, {
+							className: "h-5 w-5",
+							"aria-hidden": "true"
+						})
+					}), /* @__PURE__ */ l("div", {
 						className: "min-w-0",
-						children: [/* @__PURE__ */ s("h3", {
+						children: [/* @__PURE__ */ c("h3", {
 							className: "truncate text-base font-semibold text-text-primary",
-							children: u.name
-						}), /* @__PURE__ */ c("p", {
-							className: "text-sm text-text-secondary",
-							children: [
-								i[u.sport],
-								" · ",
-								n[u.level]
-							]
+							children: p.name
+						}), /* @__PURE__ */ l("div", {
+							className: "mt-1 flex flex-wrap items-center gap-1.5",
+							children: [/* @__PURE__ */ c(u, {
+								variant: f[p.level],
+								children: n[p.level]
+							}), /* @__PURE__ */ c("span", {
+								className: "text-xs text-text-secondary",
+								children: i[p.sport]
+							})]
 						})]
 					})]
-				}), /* @__PURE__ */ s(t, { status: u.status })]
+				}), /* @__PURE__ */ c(t, { status: p.status })]
 			}),
-			u.summary && /* @__PURE__ */ s("p", {
+			p.summary && /* @__PURE__ */ c("p", {
 				className: "mt-3 line-clamp-2 text-sm text-text-secondary",
-				children: u.summary
+				children: p.summary
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ l("div", {
 				className: "mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-text-secondary",
-				children: [/* @__PURE__ */ c("span", {
-					className: "flex items-center gap-1",
-					children: [
-						/* @__PURE__ */ s(a, { className: "h-3.5 w-3.5" }),
-						" ",
-						u.weeks,
-						" ",
-						u.weeks === 1 ? "week" : "weeks"
-					]
-				}), u.isTemplate && /* @__PURE__ */ c("span", {
-					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ s(o, { className: "h-3.5 w-3.5" }), " Template"]
-				})]
+				children: [
+					/* @__PURE__ */ l("span", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ c(a, {
+								className: "h-3.5 w-3.5",
+								"aria-hidden": "true"
+							}),
+							" ",
+							p.weeks,
+							" ",
+							p.weeks === 1 ? "week" : "weeks"
+						]
+					}),
+					_ !== void 0 && /* @__PURE__ */ l("span", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ c(s, {
+								className: "h-3.5 w-3.5",
+								"aria-hidden": "true"
+							}),
+							" ",
+							_,
+							" ",
+							_ === 1 ? "drill" : "drills"
+						]
+					}),
+					p.isTemplate && /* @__PURE__ */ l("span", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ c(o, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}), " Template"]
+					})
+				]
 			})
 		]
 	});
 };
 //#endregion
-export { u as ProgramCard };
+export { p as ProgramCard };
 
 //# sourceMappingURL=ProgramCard.js.map

package/dist/atheletebridge/components/ProgramCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgramCard.js","names":[],"sources":["../../../src/atheletebridge/components/ProgramCard.tsx"],"sourcesContent":["/**\n * Program Card\n * @module atheletebridge/components\n */\n\nimport type { FC } from 'react';\nimport { CalendarRange, Copy } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { SPORT_ICONS, SPORT_LABELS, PROGRAM_LEVEL_LABELS } from './domain';\nimport { cn } from '../utils/cn';\nimport type { AthProgram } from '../types';\n\ninterface ProgramCardProps {\n  program: AthProgram;\n  onClick?: () => void;\n}\n\nexport const ProgramCard: FC<ProgramCardProps> = ({ program, onClick }) => {\n  const SportIcon = SPORT_ICONS[program.sport];\n\n  return (\n    <GlassCard\n      treatment=\"metric\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={onClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          onClick?.();\n        }\n      }}\n      className={cn(\n        'cursor-pointer p-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]'\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex items-center gap-3 min-w-0\">\n          <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n            <SportIcon className=\"h-5 w-5\" />\n          </div>\n          <div className=\"min-w-0\">\n            <h3 className=\"truncate text-base font-semibold text-text-primary\">{program.name}</h3>\n            <p className=\"text-sm text-text-secondary\">\n              {SPORT_LABELS[program.sport]} · {PROGRAM_LEVEL_LABELS[program.level]}\n            </p>\n          </div>\n        </div>\n        <StatusBadge status={program.status} />\n      </div>\n\n      {program.summary && (\n        <p className=\"mt-3 line-clamp-2 text-sm text-text-secondary\">{program.summary}</p>\n      )}\n\n      <div className=\"mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-text-secondary\">\n        <span className=\"flex items-center gap-1\">\n          <CalendarRange className=\"h-3.5 w-3.5\" /> {program.weeks}{' '}\n          {program.weeks === 1 ? 'week' : 'weeks'}\n        </span>\n        {program.isTemplate && (\n          <span className=\"flex items-center gap-1\">\n            <Copy className=\"h-3.5 w-3.5\" /> Template\n          </span>\n        )}\n      </div>\n    </GlassCard>\n  );\n};\n"],"mappings":";;;;;;;AAkBA,IAAa,KAAqC,EAAE,YAAS,iBAAc;CACzE,IAAM,IAAY,EAAY,EAAQ;AAEtC,QACE,kBAAC,GAAD;EACE,WAAU;EACV,MAAK;EACL,UAAU;EACD;EACT,YAAY,MAAM;AAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,KAAW;;EAGf,WAAW,EACT,kHACD;YAbH;GAeE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;MAC7B,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBAAsD,EAAQ;OAAU,CAAA,EACtF,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG,EAAa,EAAQ;QAAO;QAAI,EAAqB,EAAQ;QAC5D;SACA;QACF;QACN,kBAAC,GAAD,EAAa,QAAQ,EAAQ,QAAU,CAAA,CACnC;;GAEL,EAAQ,WACP,kBAAC,KAAD;IAAG,WAAU;cAAiD,EAAQ;IAAY,CAAA;GAGpF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACE,kBAAC,GAAD,EAAe,WAAU,eAAgB,CAAA;;MAAE,EAAQ;MAAO;MACzD,EAAQ,UAAU,IAAI,SAAS;MAC3B;QACN,EAAQ,cACP,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,GAAD,EAAM,WAAU,eAAgB,CAAA,EAAA,YAC3B;OAEL;;GACI"}
+{"version":3,"file":"ProgramCard.js","names":[],"sources":["../../../src/atheletebridge/components/ProgramCard.tsx"],"sourcesContent":["/**\n * Program Card\n * @module atheletebridge/components\n *\n * A training-program tile with a sport-icon tile, a level Badge tinted per tier\n * (green Beginner / blue Intermediate / amber Advanced / brand Elite), a status\n * pill, and a footer stat row of weeks + drill counts. Semantic tokens only.\n */\n\nimport type { FC } from 'react';\nimport { CalendarRange, Copy, Dumbbell } from 'lucide-react';\nimport { GlassCard, Badge, type BadgeProps } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { SPORT_ICONS, SPORT_LABELS, PROGRAM_LEVEL_LABELS } from './domain';\nimport { cn } from '../utils/cn';\nimport type { AthProgram, AthProgramLevel } from '../types';\n\ninterface ProgramCardProps {\n  program: AthProgram;\n  onClick?: () => void;\n  /**\n   * Drill count for the footer chip. Falls back to `program.drills?.length`\n   * when the query selected drills; omit the chip if neither is available.\n   */\n  drillCount?: number;\n}\n\nconst LEVEL_VARIANT: Record<AthProgramLevel, BadgeProps['variant']> = {\n  BEGINNER: 'success',\n  INTERMEDIATE: 'info',\n  ADVANCED: 'warning',\n  ELITE: 'default',\n};\n\nexport const ProgramCard: FC<ProgramCardProps> = ({ program, onClick, drillCount }) => {\n  const SportIcon = SPORT_ICONS[program.sport];\n  const drills = drillCount ?? program.drills?.length;\n\n  return (\n    <GlassCard\n      treatment=\"metric\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={onClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          onClick?.();\n        }\n      }}\n      className={cn(\n        'cursor-pointer p-5 transition-transform duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]'\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex min-w-0 items-center gap-3\">\n          <div className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[var(--color-accent-soft)] text-text-primary\">\n            <SportIcon className=\"h-5 w-5\" aria-hidden=\"true\" />\n          </div>\n          <div className=\"min-w-0\">\n            <h3 className=\"truncate text-base font-semibold text-text-primary\">{program.name}</h3>\n            <div className=\"mt-1 flex flex-wrap items-center gap-1.5\">\n              <Badge variant={LEVEL_VARIANT[program.level]}>\n                {PROGRAM_LEVEL_LABELS[program.level]}\n              </Badge>\n              <span className=\"text-xs text-text-secondary\">{SPORT_LABELS[program.sport]}</span>\n            </div>\n          </div>\n        </div>\n        <StatusBadge status={program.status} />\n      </div>\n\n      {program.summary && (\n        <p className=\"mt-3 line-clamp-2 text-sm text-text-secondary\">{program.summary}</p>\n      )}\n\n      <div className=\"mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-text-secondary\">\n        <span className=\"flex items-center gap-1\">\n          <CalendarRange className=\"h-3.5 w-3.5\" aria-hidden=\"true\" /> {program.weeks}{' '}\n          {program.weeks === 1 ? 'week' : 'weeks'}\n        </span>\n        {drills !== undefined && (\n          <span className=\"flex items-center gap-1\">\n            <Dumbbell className=\"h-3.5 w-3.5\" aria-hidden=\"true\" /> {drills}{' '}\n            {drills === 1 ? 'drill' : 'drills'}\n          </span>\n        )}\n        {program.isTemplate && (\n          <span className=\"flex items-center gap-1\">\n            <Copy className=\"h-3.5 w-3.5\" aria-hidden=\"true\" /> Template\n          </span>\n        )}\n      </div>\n    </GlassCard>\n  );\n};\n"],"mappings":";;;;;;;AA2BA,IAAM,IAAgE;CACpE,UAAU;CACV,cAAc;CACd,UAAU;CACV,OAAO;CACR,EAEY,KAAqC,EAAE,YAAS,YAAS,oBAAiB;CACrF,IAAM,IAAY,EAAY,EAAQ,QAChC,IAAS,KAAc,EAAQ,QAAQ;AAE7C,QACE,kBAAC,GAAD;EACE,WAAU;EACV,MAAK;EACL,UAAU;EACD;EACT,YAAY,MAAM;AAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,KAAW;;EAGf,WAAW,EACT,2KACD;YAbH;GAeE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OAAW,WAAU;OAAU,eAAY;OAAS,CAAA;MAChD,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBAAsD,EAAQ;OAAU,CAAA,EACtF,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD;QAAO,SAAS,EAAc,EAAQ;kBACnC,EAAqB,EAAQ;QACxB,CAAA,EACR,kBAAC,QAAD;QAAM,WAAU;kBAA+B,EAAa,EAAQ;QAAc,CAAA,CAC9E;SACF;QACF;QACN,kBAAC,GAAD,EAAa,QAAQ,EAAQ,QAAU,CAAA,CACnC;;GAEL,EAAQ,WACP,kBAAC,KAAD;IAAG,WAAU;cAAiD,EAAQ;IAAY,CAAA;GAGpF,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD;QAAe,WAAU;QAAc,eAAY;QAAS,CAAA;;OAAE,EAAQ;OAAO;OAC5E,EAAQ,UAAU,IAAI,SAAS;OAC3B;;KACN,MAAW,KAAA,KACV,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD;QAAU,WAAU;QAAc,eAAY;QAAS,CAAA;;OAAE;OAAQ;OAChE,MAAW,IAAI,UAAU;OACrB;;KAER,EAAQ,cACP,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD;OAAM,WAAU;OAAc,eAAY;OAAS,CAAA,EAAA,YAC9C;;KAEL;;GACI"}

package/dist/atheletebridge/components/Scoreboard.js

@@ -0,0 +1,163 @@
+import { cn as e } from "../utils/cn.js";
+import { StatusBadge as t } from "./StatusBadge.js";
+import { FIXTURE_TYPE_LABELS as n, SPORT_ICONS as r } from "./domain.js";
+import { Crest as i } from "./Crest.js";
+import { formatDate as a } from "../utils/formatters.js";
+import { CalendarClock as o, MapPin as s, Trophy as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { GlassCard as d } from "@burdenoff/fe-libs/ui";
+//#region src/atheletebridge/components/Scoreboard.tsx
+function f(e) {
+	let t = e.homeTeam?.name ?? "Home", n = e.awayTeam?.name ?? (e.awayTeamId ? "Away" : "TBD"), r = e.homeScore !== null && e.awayScore !== null, i = e.homeScore, a = e.awayScore, o = r && (i ?? 0) > (a ?? 0), s = r && (a ?? 0) > (i ?? 0);
+	return {
+		homeName: t,
+		awayName: n,
+		homeSport: e.homeTeam?.sport,
+		awaySport: e.awayTeam?.sport,
+		homeScore: i,
+		awayScore: a,
+		hasScore: r,
+		homeWon: o,
+		awayWon: s
+	};
+}
+var p = ({ name: t, sport: n, align: r = "start", won: a = !1, dimmed: o = !1, crestSize: s = 40, stacked: c = !1, className: d }) => /* @__PURE__ */ u("div", {
+	className: e("flex min-w-0 items-center gap-3", c ? "flex-col text-center" : r === "end" ? "flex-row-reverse text-right" : "text-left", d),
+	children: [/* @__PURE__ */ l(i, {
+		name: t,
+		sport: n,
+		size: s
+	}), /* @__PURE__ */ l("span", {
+		className: e("min-w-0 truncate font-semibold", c ? "max-w-[10rem] text-sm" : "text-sm", a ? "text-status-success-text" : o ? "text-text-muted" : "text-text-primary"),
+		children: t
+	})]
+}), m = {
+	sm: "text-lg",
+	md: "text-2xl",
+	lg: "text-4xl sm:text-5xl"
+}, h = ({ matchup: t, time: n, size: r = "md", className: i }) => t.hasScore ? /* @__PURE__ */ u("div", {
+	className: e("flex flex-col items-center gap-0.5", i),
+	children: [/* @__PURE__ */ u("span", {
+		className: e("flex items-center gap-2 font-bold leading-none tabular-nums", m[r]),
+		children: [
+			/* @__PURE__ */ l("span", {
+				className: t.homeWon ? "text-status-success-text" : "text-text-primary",
+				children: t.homeScore
+			}),
+			/* @__PURE__ */ l("span", {
+				className: "text-text-muted",
+				children: "–"
+			}),
+			/* @__PURE__ */ l("span", {
+				className: t.awayWon ? "text-status-success-text" : "text-text-primary",
+				children: t.awayScore
+			})
+		]
+	}), n ? /* @__PURE__ */ l("span", {
+		className: "text-xs text-text-secondary",
+		children: n
+	}) : null]
+}) : /* @__PURE__ */ u("div", {
+	className: e("flex flex-col items-center gap-0.5", i),
+	children: [/* @__PURE__ */ l("span", {
+		className: "rounded-lg bg-bg-sunken px-3 py-1 text-xs font-bold uppercase tracking-wide text-text-secondary",
+		children: "vs"
+	}), n ? /* @__PURE__ */ l("span", {
+		className: "text-xs text-text-secondary",
+		children: n
+	}) : null]
+}), g = ({ fixture: t, center: i = !1 }) => {
+	let a = t.homeTeam?.sport ? r[t.homeTeam.sport] : c, o = [t.competition, t.round].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ u("span", {
+		className: e("inline-flex items-center gap-1.5 text-xs font-medium text-text-secondary", i && "justify-center"),
+		children: [/* @__PURE__ */ l(a, {
+			className: "h-3.5 w-3.5 shrink-0 text-text-muted",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ l("span", {
+			className: "truncate",
+			children: o || n[t.type]
+		})]
+	});
+}, _ = ({ fixture: n, onClick: r, variant: i = "card", className: c }) => {
+	let m = f(n), _ = i === "hero", v = m.hasScore ? null : a(n.scheduledAt), y = !!r;
+	return /* @__PURE__ */ u(d, {
+		treatment: _ ? "glass" : "metric",
+		glow: _,
+		role: y ? "button" : void 0,
+		tabIndex: y ? 0 : void 0,
+		onClick: r,
+		onKeyDown: y ? (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.());
+		} : void 0,
+		className: e(_ ? "p-6 sm:p-8" : "p-5", y && "cursor-pointer transition-transform duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", c),
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: e("flex items-center justify-between gap-3", _ && "justify-center"),
+				children: [/* @__PURE__ */ l(g, {
+					fixture: n,
+					center: _
+				}), _ ? null : /* @__PURE__ */ l(t, { status: n.status })]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: e("mt-4 grid items-center gap-3", "grid-cols-[1fr_auto_1fr]", _ && "mt-6 gap-4 sm:gap-8"),
+				children: [
+					/* @__PURE__ */ l(p, {
+						name: m.homeName,
+						sport: m.homeSport,
+						align: _ ? void 0 : "end",
+						stacked: _,
+						won: m.homeWon,
+						dimmed: m.awayWon,
+						crestSize: _ ? 72 : 40
+					}),
+					/* @__PURE__ */ l(h, {
+						matchup: m,
+						time: v,
+						size: _ ? "lg" : "md"
+					}),
+					/* @__PURE__ */ l(p, {
+						name: m.awayName,
+						sport: m.awaySport,
+						align: _ ? void 0 : "start",
+						stacked: _,
+						won: m.awayWon,
+						dimmed: m.homeWon,
+						crestSize: _ ? 72 : 40
+					})
+				]
+			}),
+			_ ? /* @__PURE__ */ l("div", {
+				className: "mt-5 flex justify-center",
+				children: /* @__PURE__ */ l(t, { status: n.status })
+			}) : null,
+			/* @__PURE__ */ u("div", {
+				className: e("mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-text-secondary", _ && "mt-6 justify-center"),
+				children: [/* @__PURE__ */ u("span", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ l(o, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}),
+						" ",
+						a(n.scheduledAt)
+					]
+				}), n.venue ? /* @__PURE__ */ u("span", {
+					className: "flex items-center gap-1 truncate",
+					children: [
+						/* @__PURE__ */ l(s, {
+							className: "h-3.5 w-3.5 shrink-0",
+							"aria-hidden": "true"
+						}),
+						" ",
+						n.venue
+					]
+				}) : null]
+			})
+		]
+	});
+};
+//#endregion
+export { p as MatchupSide, h as ScoreCenter, _ as Scoreboard, f as resolveMatchup };
+
+//# sourceMappingURL=Scoreboard.js.map

package/dist/atheletebridge/components/Scoreboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scoreboard.js","names":[],"sources":["../../../src/atheletebridge/components/Scoreboard.tsx"],"sourcesContent":["/**\n * Scoreboard\n * @module atheletebridge/components\n *\n * Crest-vs-crest fixture presentation. `Scoreboard` renders the full match card\n * (competition strip → crest / score / crest → venue) used by the fixtures list\n * and fixture detail; the compact single-line `MatchupRow` (separate file)\n * reuses the same building blocks for the dashboard + team-detail feeds.\n *\n * All colors are semantic tokens. Winner side is tinted with\n * status-success-text, loser muted — driven purely by the real score.\n */\n\nimport type { FC, ReactNode } from 'react';\nimport { CalendarClock, MapPin, Trophy } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { Crest } from './Crest';\nimport { SPORT_ICONS, FIXTURE_TYPE_LABELS } from './domain';\nimport { formatDate } from '../utils/formatters';\nimport { cn } from '../utils/cn';\nimport type { AthFixture, AthSport } from '../types';\n\n// ── Shared matchup model ─────────────────────────────────────────────────────\n\nexport interface Matchup {\n  homeName: string;\n  awayName: string;\n  homeSport?: AthSport;\n  awaySport?: AthSport;\n  homeScore: number | null;\n  awayScore: number | null;\n  hasScore: boolean;\n  homeWon: boolean;\n  awayWon: boolean;\n}\n\n/** Derive the display matchup (names, scores, winner) from a fixture. */\nexport function resolveMatchup(fixture: AthFixture): Matchup {\n  const homeName = fixture.homeTeam?.name ?? 'Home';\n  const awayName = fixture.awayTeam?.name ?? (fixture.awayTeamId ? 'Away' : 'TBD');\n  const hasScore = fixture.homeScore !== null && fixture.awayScore !== null;\n  const homeScore = fixture.homeScore;\n  const awayScore = fixture.awayScore;\n  const homeWon = hasScore && (homeScore ?? 0) > (awayScore ?? 0);\n  const awayWon = hasScore && (awayScore ?? 0) > (homeScore ?? 0);\n  return {\n    homeName,\n    awayName,\n    homeSport: fixture.homeTeam?.sport,\n    awaySport: fixture.awayTeam?.sport,\n    homeScore,\n    awayScore,\n    hasScore,\n    homeWon,\n    awayWon,\n  };\n}\n\n// ── One team flank (crest + name) ────────────────────────────────────────────\n\nexport interface MatchupSideProps {\n  name: string;\n  sport?: AthSport;\n  align?: 'start' | 'end';\n  /** Winner emphasis — brightens the name. */\n  won?: boolean;\n  /** Loser de-emphasis when the fixture has a score. */\n  dimmed?: boolean;\n  crestSize?: number;\n  /** Stack crest above name (hero/card) instead of inline (row). */\n  stacked?: boolean;\n  className?: string;\n}\n\nexport const MatchupSide: FC<MatchupSideProps> = ({\n  name,\n  sport,\n  align = 'start',\n  won = false,\n  dimmed = false,\n  crestSize = 40,\n  stacked = false,\n  className,\n}) => (\n  <div\n    className={cn(\n      'flex min-w-0 items-center gap-3',\n      stacked ? 'flex-col text-center' : align === 'end' ? 'flex-row-reverse text-right' : 'text-left',\n      className\n    )}\n  >\n    <Crest name={name} sport={sport} size={crestSize} />\n    <span\n      className={cn(\n        'min-w-0 truncate font-semibold',\n        stacked ? 'max-w-[10rem] text-sm' : 'text-sm',\n        won ? 'text-status-success-text' : dimmed ? 'text-text-muted' : 'text-text-primary'\n      )}\n    >\n      {name}\n    </span>\n  </div>\n);\n\n// ── Centerpiece (score or vs + kickoff) ──────────────────────────────────────\n\nexport interface ScoreCenterProps {\n  matchup: Matchup;\n  time?: ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nconst SCORE_SIZE = {\n  sm: 'text-lg',\n  md: 'text-2xl',\n  lg: 'text-4xl sm:text-5xl',\n} as const;\n\nexport const ScoreCenter: FC<ScoreCenterProps> = ({ matchup, time, size = 'md', className }) => {\n  if (!matchup.hasScore) {\n    return (\n      <div className={cn('flex flex-col items-center gap-0.5', className)}>\n        <span className=\"rounded-lg bg-bg-sunken px-3 py-1 text-xs font-bold uppercase tracking-wide text-text-secondary\">\n          vs\n        </span>\n        {time ? <span className=\"text-xs text-text-secondary\">{time}</span> : null}\n      </div>\n    );\n  }\n  return (\n    <div className={cn('flex flex-col items-center gap-0.5', className)}>\n      <span\n        className={cn(\n          'flex items-center gap-2 font-bold leading-none tabular-nums',\n          SCORE_SIZE[size]\n        )}\n      >\n        <span className={matchup.homeWon ? 'text-status-success-text' : 'text-text-primary'}>\n          {matchup.homeScore}\n        </span>\n        <span className=\"text-text-muted\">–</span>\n        <span className={matchup.awayWon ? 'text-status-success-text' : 'text-text-primary'}>\n          {matchup.awayScore}\n        </span>\n      </span>\n      {time ? <span className=\"text-xs text-text-secondary\">{time}</span> : null}\n    </div>\n  );\n};\n\n// ── Competition eyebrow ──────────────────────────────────────────────────────\n\nconst CompetitionStrip: FC<{ fixture: AthFixture; center?: boolean }> = ({\n  fixture,\n  center = false,\n}) => {\n  const SportIcon = fixture.homeTeam?.sport ? SPORT_ICONS[fixture.homeTeam.sport] : Trophy;\n  const parts = [fixture.competition, fixture.round].filter(Boolean).join(' · ');\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-1.5 text-xs font-medium text-text-secondary',\n        center && 'justify-center'\n      )}\n    >\n      <SportIcon className=\"h-3.5 w-3.5 shrink-0 text-text-muted\" aria-hidden=\"true\" />\n      <span className=\"truncate\">{parts || FIXTURE_TYPE_LABELS[fixture.type]}</span>\n    </span>\n  );\n};\n\n// ── Full match card / hero ───────────────────────────────────────────────────\n\nexport interface ScoreboardProps {\n  fixture: AthFixture;\n  onClick?: () => void;\n  /** `card` = fixtures-list tile; `hero` = large fixture-detail header. */\n  variant?: 'card' | 'hero';\n  className?: string;\n}\n\n/** Full crest-vs-crest match card (list tile or detail hero). */\nexport const Scoreboard: FC<ScoreboardProps> = ({\n  fixture,\n  onClick,\n  variant = 'card',\n  className,\n}) => {\n  const matchup = resolveMatchup(fixture);\n  const isHero = variant === 'hero';\n  const timeLabel = matchup.hasScore ? null : formatDate(fixture.scheduledAt);\n\n  const clickable = Boolean(onClick);\n\n  return (\n    <GlassCard\n      treatment={isHero ? 'glass' : 'metric'}\n      glow={isHero}\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        clickable\n          ? (e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                onClick?.();\n              }\n            }\n          : undefined\n      }\n      className={cn(\n        isHero ? 'p-6 sm:p-8' : 'p-5',\n        clickable &&\n          'cursor-pointer transition-transform duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n        className\n      )}\n    >\n      <div className={cn('flex items-center justify-between gap-3', isHero && 'justify-center')}>\n        <CompetitionStrip fixture={fixture} center={isHero} />\n        {!isHero ? <StatusBadge status={fixture.status} /> : null}\n      </div>\n\n      <div\n        className={cn(\n          'mt-4 grid items-center gap-3',\n          'grid-cols-[1fr_auto_1fr]',\n          isHero && 'mt-6 gap-4 sm:gap-8'\n        )}\n      >\n        <MatchupSide\n          name={matchup.homeName}\n          sport={matchup.homeSport}\n          align={isHero ? undefined : 'end'}\n          stacked={isHero}\n          won={matchup.homeWon}\n          dimmed={matchup.awayWon}\n          crestSize={isHero ? 72 : 40}\n        />\n        <ScoreCenter matchup={matchup} time={timeLabel} size={isHero ? 'lg' : 'md'} />\n        <MatchupSide\n          name={matchup.awayName}\n          sport={matchup.awaySport}\n          align={isHero ? undefined : 'start'}\n          stacked={isHero}\n          won={matchup.awayWon}\n          dimmed={matchup.homeWon}\n          crestSize={isHero ? 72 : 40}\n        />\n      </div>\n\n      {isHero ? (\n        <div className=\"mt-5 flex justify-center\">\n          <StatusBadge status={fixture.status} />\n        </div>\n      ) : null}\n\n      <div\n        className={cn(\n          'mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-text-secondary',\n          isHero && 'mt-6 justify-center'\n        )}\n      >\n        <span className=\"flex items-center gap-1\">\n          <CalendarClock className=\"h-3.5 w-3.5\" aria-hidden=\"true\" /> {formatDate(fixture.scheduledAt)}\n        </span>\n        {fixture.venue ? (\n          <span className=\"flex items-center gap-1 truncate\">\n            <MapPin className=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\" /> {fixture.venue}\n          </span>\n        ) : null}\n      </div>\n    </GlassCard>\n  );\n};\n"],"mappings":"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"}

package/dist/atheletebridge/components/SessionCard.js

@@ -1,76 +1,99 @@
 import { cn as e } from "../utils/cn.js";
-import { StatusBadge as t } from "./StatusBadge.js";
-import { SESSION_TYPE_LABELS as n } from "./domain.js";
-import { formatDate as r, formatDuration as i } from "../utils/formatters.js";
-import { CalendarClock as a, Clock as o, MapPin as s, Star as c, Video as l } from "lucide-react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { GlassCard as f } from "@burdenoff/fe-libs/ui";
+import { RatingStars as t } from "./viz/RatingStars.js";
+import "./viz/index.js";
+import { StatusBadge as n } from "./StatusBadge.js";
+import { SESSION_TYPE_LABELS as r } from "./domain.js";
+import { formatDate as i, formatDuration as a } from "../utils/formatters.js";
+import { UserAvatar as o } from "./UserAvatar.js";
+import { CalendarClock as s, Clock as c, MapPin as l, Video as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { GlassCard as p } from "@burdenoff/fe-libs/ui";
 //#region src/atheletebridge/components/SessionCard.tsx
-var p = ({ session: p, onClick: m }) => /* @__PURE__ */ d(f, {
+var m = ({ session: m, onClick: h, athleteName: g, coachName: _ }) => /* @__PURE__ */ f(p, {
 	treatment: "metric",
 	role: "button",
 	tabIndex: 0,
-	onClick: m,
+	onClick: h,
 	onKeyDown: (e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), m?.());
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), h?.());
 	},
-	className: e("cursor-pointer p-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"),
-	children: [/* @__PURE__ */ d("div", {
+	className: e("cursor-pointer p-5 transition-transform duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"),
+	children: [/* @__PURE__ */ f("div", {
 		className: "flex items-start justify-between gap-3",
-		children: [/* @__PURE__ */ d("div", {
-			className: "min-w-0",
-			children: [/* @__PURE__ */ u("h3", {
-				className: "truncate text-base font-semibold text-text-primary",
-				children: p.title
-			}), /* @__PURE__ */ u("p", {
-				className: "text-sm text-text-secondary",
-				children: n[p.type]
+		children: [/* @__PURE__ */ f("div", {
+			className: "flex min-w-0 items-center gap-3",
+			children: [/* @__PURE__ */ d(o, {
+				name: g,
+				id: m.athleteId,
+				size: "md"
+			}), /* @__PURE__ */ f("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ d("h3", {
+					className: "truncate text-base font-semibold text-text-primary",
+					children: m.title
+				}), /* @__PURE__ */ f("p", {
+					className: "truncate text-sm text-text-secondary",
+					children: [
+						g?.trim() || "Athlete",
+						" · ",
+						r[m.type],
+						_?.trim() ? ` · ${_.trim()}` : ""
+					]
+				})]
 			})]
-		}), /* @__PURE__ */ u(t, { status: p.status })]
-	}), /* @__PURE__ */ d("div", {
+		}), /* @__PURE__ */ d(n, { status: m.status })]
+	}), /* @__PURE__ */ f("div", {
 		className: "mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-text-secondary",
 		children: [
-			/* @__PURE__ */ d("span", {
+			/* @__PURE__ */ f("span", {
 				className: "flex items-center gap-1",
 				children: [
-					/* @__PURE__ */ u(a, { className: "h-3.5 w-3.5" }),
+					/* @__PURE__ */ d(s, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}),
 					" ",
-					r(p.scheduledAt)
+					i(m.scheduledAt)
 				]
 			}),
-			/* @__PURE__ */ d("span", {
+			/* @__PURE__ */ f("span", {
 				className: "flex items-center gap-1",
 				children: [
-					/* @__PURE__ */ u(o, { className: "h-3.5 w-3.5" }),
+					/* @__PURE__ */ d(c, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}),
 					" ",
-					i(p.durationMin)
+					a(m.durationMin)
 				]
 			}),
-			p.type === "IN_PERSON" && p.location && /* @__PURE__ */ d("span", {
+			m.type === "IN_PERSON" && m.location && /* @__PURE__ */ f("span", {
 				className: "flex items-center gap-1 truncate",
 				children: [
-					/* @__PURE__ */ u(s, { className: "h-3.5 w-3.5 shrink-0" }),
+					/* @__PURE__ */ d(l, {
+						className: "h-3.5 w-3.5 shrink-0",
+						"aria-hidden": "true"
+					}),
 					" ",
-					p.location
+					m.location
 				]
 			}),
-			p.type !== "IN_PERSON" && p.meetingUrl && /* @__PURE__ */ d("span", {
+			m.type !== "IN_PERSON" && m.meetingUrl && /* @__PURE__ */ f("span", {
 				className: "flex items-center gap-1",
-				children: [/* @__PURE__ */ u(l, { className: "h-3.5 w-3.5" }), " Online"]
+				children: [/* @__PURE__ */ d(u, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				}), " Online"]
 			}),
-			p.rating !== null && /* @__PURE__ */ d("span", {
-				className: "flex items-center gap-1",
-				children: [
-					/* @__PURE__ */ u(c, { className: "h-3.5 w-3.5" }),
-					" ",
-					p.rating,
-					"/5"
-				]
+			m.rating !== null && /* @__PURE__ */ d(t, {
+				value: m.rating,
+				size: 14,
+				showValue: !0
 			})
 		]
 	})]
 });
 //#endregion
-export { p as SessionCard };
+export { m as SessionCard };
 
 //# sourceMappingURL=SessionCard.js.map