@burdenoff/microfe-atheletebridge 2026.705.2 → 2026.706.1

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

@@ -1 +1 @@
-{"version":3,"file":"SessionCard.js","names":[],"sources":["../../../src/atheletebridge/components/SessionCard.tsx"],"sourcesContent":["/**\n * Session Card\n * @module atheletebridge/components\n */\n\nimport type { FC } from 'react';\nimport { CalendarClock, Clock, Star, Video, MapPin } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { SESSION_TYPE_LABELS } from './domain';\nimport { formatDate, formatDuration } from '../utils/formatters';\nimport { cn } from '../utils/cn';\nimport type { AthSession } from '../types';\n\ninterface SessionCardProps {\n  session: AthSession;\n  onClick?: () => void;\n}\n\nexport const SessionCard: FC<SessionCardProps> = ({ session, onClick }) => (\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=\"min-w-0\">\n        <h3 className=\"truncate text-base font-semibold text-text-primary\">{session.title}</h3>\n        <p className=\"text-sm text-text-secondary\">{SESSION_TYPE_LABELS[session.type]}</p>\n      </div>\n      <StatusBadge status={session.status} />\n    </div>\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        <CalendarClock className=\"h-3.5 w-3.5\" /> {formatDate(session.scheduledAt)}\n      </span>\n      <span className=\"flex items-center gap-1\">\n        <Clock className=\"h-3.5 w-3.5\" /> {formatDuration(session.durationMin)}\n      </span>\n      {session.type === 'IN_PERSON' && session.location && (\n        <span className=\"flex items-center gap-1 truncate\">\n          <MapPin className=\"h-3.5 w-3.5 shrink-0\" /> {session.location}\n        </span>\n      )}\n      {session.type !== 'IN_PERSON' && session.meetingUrl && (\n        <span className=\"flex items-center gap-1\">\n          <Video className=\"h-3.5 w-3.5\" /> Online\n        </span>\n      )}\n      {session.rating !== null && (\n        <span className=\"flex items-center gap-1\">\n          <Star className=\"h-3.5 w-3.5\" /> {session.rating}/5\n        </span>\n      )}\n    </div>\n  </GlassCard>\n);\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAAqC,EAAE,YAAS,iBAC3D,kBAAC,GAAD;CACE,WAAU;CACV,MAAK;CACL,UAAU;CACD;CACT,YAAY,MAAM;AAChB,GAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,KAAW;;CAGf,WAAW,EACT,kHACD;WAbH,CAeE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cAAsD,EAAQ;IAAW,CAAA,EACvF,kBAAC,KAAD;IAAG,WAAU;cAA+B,EAAoB,EAAQ;IAAU,CAAA,CAC9E;MACN,kBAAC,GAAD,EAAa,QAAQ,EAAQ,QAAU,CAAA,CACnC;KAEN,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,GAAD,EAAe,WAAU,eAAgB,CAAA;;KAAE,EAAW,EAAQ,YAAY;KACrE;;GACP,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,GAAD,EAAO,WAAU,eAAgB,CAAA;;KAAE,EAAe,EAAQ,YAAY;KACjE;;GACN,EAAQ,SAAS,eAAe,EAAQ,YACvC,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,GAAD,EAAQ,WAAU,wBAAyB,CAAA;;KAAE,EAAQ;KAChD;;GAER,EAAQ,SAAS,eAAe,EAAQ,cACvC,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,GAAD,EAAO,WAAU,eAAgB,CAAA,EAAA,UAC5B;;GAER,EAAQ,WAAW,QAClB,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,GAAD,EAAM,WAAU,eAAgB,CAAA;;KAAE,EAAQ;KAAO;KAC5C;;GAEL;IACI"}
+{"version":3,"file":"SessionCard.js","names":[],"sources":["../../../src/atheletebridge/components/SessionCard.tsx"],"sourcesContent":["/**\n * Session Card\n * @module atheletebridge/components\n *\n * A coaching-session tile showing the athlete identity (monogram avatar +\n * resolved name when available), session type, schedule, and a colored status\n * badge (Requested amber / Confirmed blue / Completed green / Cancelled grey).\n * A stored rating renders as read-only stars. Semantic tokens only.\n */\n\nimport type { FC } from 'react';\nimport { CalendarClock, Clock, Video, MapPin } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { UserAvatar } from './UserAvatar';\nimport { RatingStars } from './viz';\nimport { SESSION_TYPE_LABELS } from './domain';\nimport { formatDate, formatDuration } from '../utils/formatters';\nimport { cn } from '../utils/cn';\nimport type { AthSession } from '../types';\n\ninterface SessionCardProps {\n  session: AthSession;\n  onClick?: () => void;\n  /** Resolved athlete display name (else a monogram from the id is shown). */\n  athleteName?: string | null;\n  /** Resolved coach display name (optional sub-label). */\n  coachName?: string | null;\n}\n\nexport const SessionCard: FC<SessionCardProps> = ({\n  session,\n  onClick,\n  athleteName,\n  coachName,\n}) => (\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        <UserAvatar name={athleteName} id={session.athleteId} size=\"md\" />\n        <div className=\"min-w-0\">\n          <h3 className=\"truncate text-base font-semibold text-text-primary\">{session.title}</h3>\n          <p className=\"truncate text-sm text-text-secondary\">\n            {athleteName?.trim() || 'Athlete'} · {SESSION_TYPE_LABELS[session.type]}\n            {coachName?.trim() ? ` · ${coachName.trim()}` : ''}\n          </p>\n        </div>\n      </div>\n      <StatusBadge status={session.status} />\n    </div>\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        <CalendarClock className=\"h-3.5 w-3.5\" aria-hidden=\"true\" /> {formatDate(session.scheduledAt)}\n      </span>\n      <span className=\"flex items-center gap-1\">\n        <Clock className=\"h-3.5 w-3.5\" aria-hidden=\"true\" /> {formatDuration(session.durationMin)}\n      </span>\n      {session.type === 'IN_PERSON' && session.location && (\n        <span className=\"flex items-center gap-1 truncate\">\n          <MapPin className=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\" /> {session.location}\n        </span>\n      )}\n      {session.type !== 'IN_PERSON' && session.meetingUrl && (\n        <span className=\"flex items-center gap-1\">\n          <Video className=\"h-3.5 w-3.5\" aria-hidden=\"true\" /> Online\n        </span>\n      )}\n      {session.rating !== null && (\n        <RatingStars value={session.rating} size={14} showValue />\n      )}\n    </div>\n  </GlassCard>\n);\n"],"mappings":";;;;;;;;;;;AA8BA,IAAa,KAAqC,EAChD,YACA,YACA,gBACA,mBAEA,kBAAC,GAAD;CACE,WAAU;CACV,MAAK;CACL,UAAU;CACD;CACT,YAAY,MAAM;AAChB,GAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,KAAW;;CAGf,WAAW,EACT,2KACD;WAbH,CAeE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAY,MAAM;IAAa,IAAI,EAAQ;IAAW,MAAK;IAAO,CAAA,EAClE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAAsD,EAAQ;KAAW,CAAA,EACvF,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,GAAa,MAAM,IAAI;MAAU;MAAI,EAAoB,EAAQ;MACjE,GAAW,MAAM,GAAG,MAAM,EAAU,MAAM,KAAK;MAC9C;OACA;MACF;MACN,kBAAC,GAAD,EAAa,QAAQ,EAAQ,QAAU,CAAA,CACnC;KAEN,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,GAAD;MAAe,WAAU;MAAc,eAAY;MAAS,CAAA;;KAAE,EAAW,EAAQ,YAAY;KACxF;;GACP,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,GAAD;MAAO,WAAU;MAAc,eAAY;MAAS,CAAA;;KAAE,EAAe,EAAQ,YAAY;KACpF;;GACN,EAAQ,SAAS,eAAe,EAAQ,YACvC,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACE,kBAAC,GAAD;MAAQ,WAAU;MAAuB,eAAY;MAAS,CAAA;;KAAE,EAAQ;KACnE;;GAER,EAAQ,SAAS,eAAe,EAAQ,cACvC,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,GAAD;KAAO,WAAU;KAAc,eAAY;KAAS,CAAA,EAAA,UAC/C;;GAER,EAAQ,WAAW,QAClB,kBAAC,GAAD;IAAa,OAAO,EAAQ;IAAQ,MAAM;IAAI,WAAA;IAAY,CAAA;GAExD;IACI"}

package/dist/atheletebridge/components/SessionStatusTimeline.js

@@ -0,0 +1,80 @@
+import { cn as e } from "../utils/cn.js";
+import { formatDate as t } from "../utils/formatters.js";
+import { Check as n, X as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Stepper as o } from "@burdenoff/fe-libs/ui";
+//#region src/atheletebridge/components/SessionStatusTimeline.tsx
+var s = (e) => {
+	if (e) return t(e, {
+		weekday: "short",
+		year: void 0
+	});
+}, c = ({ status: t, createdAt: c, completedAt: l, className: u }) => {
+	if (t === "CANCELLED" || t === "NO_SHOW") {
+		let o = t === "CANCELLED" ? "Cancelled" : "No-show";
+		return /* @__PURE__ */ a("ol", {
+			className: e("flex items-start gap-2", u),
+			"aria-label": "Session lifecycle",
+			children: [/* @__PURE__ */ a("li", {
+				className: "flex flex-1 items-center gap-3",
+				children: [
+					/* @__PURE__ */ i("span", {
+						"aria-hidden": "true",
+						className: "inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-action-primary-bg bg-action-primary-bg text-action-primary-text",
+						children: /* @__PURE__ */ i(n, { className: "size-4" })
+					}),
+					/* @__PURE__ */ a("span", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ i("span", {
+							className: "block text-sm font-medium text-text-primary",
+							children: "Requested"
+						}), s(c) ? /* @__PURE__ */ i("span", {
+							className: "block text-xs text-text-muted",
+							children: s(c)
+						}) : null]
+					}),
+					/* @__PURE__ */ i("span", {
+						"aria-hidden": "true",
+						className: "h-px flex-1 bg-status-error-border"
+					})
+				]
+			}), /* @__PURE__ */ a("li", {
+				className: "flex items-center gap-3",
+				"aria-current": "step",
+				children: [/* @__PURE__ */ i("span", {
+					"aria-hidden": "true",
+					className: "inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-status-error-border bg-status-error-bg-subtle text-status-error-text",
+					children: /* @__PURE__ */ i(r, { className: "size-4" })
+				}), /* @__PURE__ */ i("span", {
+					className: "text-sm font-medium text-status-error-text",
+					children: o
+				})]
+			})]
+		});
+	}
+	let d = [
+		{
+			key: "requested",
+			label: "Requested",
+			description: s(c)
+		},
+		{
+			key: "confirmed",
+			label: "Confirmed"
+		},
+		{
+			key: "completed",
+			label: "Completed",
+			description: s(l)
+		}
+	];
+	return /* @__PURE__ */ i(o, {
+		steps: d,
+		active: t === "REQUESTED" ? 0 : t === "CONFIRMED" ? 1 : d.length,
+		className: u
+	});
+};
+//#endregion
+export { c as SessionStatusTimeline };
+
+//# sourceMappingURL=SessionStatusTimeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SessionStatusTimeline.js","names":[],"sources":["../../../src/atheletebridge/components/SessionStatusTimeline.tsx"],"sourcesContent":["/**\n * SessionStatusTimeline\n * @module atheletebridge/components\n *\n * A horizontal lifecycle stepper for a coaching session:\n *   Requested → Confirmed → Completed\n * with a distinct terminal variant when the session was Cancelled / No-show.\n * The happy path reuses the fe-libs Stepper; timestamps are shown ONLY where the\n * schema actually has them (createdAt for Requested, completedAt for Completed)\n * — Confirmed has no dedicated timestamp field, so none is fabricated.\n * Semantic tokens only.\n */\n\nimport type { FC } from 'react';\nimport { Check, X } from 'lucide-react';\nimport { Stepper, type StepperStep } from '@burdenoff/fe-libs/ui';\nimport { formatDate } from '../utils/formatters';\nimport { cn } from '../utils/cn';\nimport type { AthSessionStatus } from '../types';\n\nexport interface SessionStatusTimelineProps {\n  status: AthSessionStatus;\n  /** Requested-at timestamp (session.createdAt). */\n  createdAt?: string | null;\n  /** Completed-at timestamp (session.completedAt). */\n  completedAt?: string | null;\n  className?: string;\n}\n\nconst shortWhen = (iso: string | null | undefined): string | undefined => {\n  if (!iso) return undefined;\n  return formatDate(iso, { weekday: 'short', year: undefined });\n};\n\n/** Lifecycle stepper for a coaching session (with cancelled/no-show terminal). */\nexport const SessionStatusTimeline: FC<SessionStatusTimelineProps> = ({\n  status,\n  createdAt,\n  completedAt,\n  className,\n}) => {\n  // ── Terminal (cancelled / no-show) ─────────────────────────────────────────\n  if (status === 'CANCELLED' || status === 'NO_SHOW') {\n    const terminalLabel = status === 'CANCELLED' ? 'Cancelled' : 'No-show';\n    return (\n      <ol\n        className={cn('flex items-start gap-2', className)}\n        aria-label=\"Session lifecycle\"\n      >\n        <li className=\"flex flex-1 items-center gap-3\">\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-action-primary-bg bg-action-primary-bg text-action-primary-text\"\n          >\n            <Check className=\"size-4\" />\n          </span>\n          <span className=\"min-w-0\">\n            <span className=\"block text-sm font-medium text-text-primary\">Requested</span>\n            {shortWhen(createdAt) ? (\n              <span className=\"block text-xs text-text-muted\">{shortWhen(createdAt)}</span>\n            ) : null}\n          </span>\n          <span\n            aria-hidden=\"true\"\n            className=\"h-px flex-1 bg-status-error-border\"\n          />\n        </li>\n        <li className=\"flex items-center gap-3\" aria-current=\"step\">\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-full border border-status-error-border bg-status-error-bg-subtle text-status-error-text\"\n          >\n            <X className=\"size-4\" />\n          </span>\n          <span className=\"text-sm font-medium text-status-error-text\">{terminalLabel}</span>\n        </li>\n      </ol>\n    );\n  }\n\n  // ── Happy path ─────────────────────────────────────────────────────────────\n  const steps: StepperStep[] = [\n    { key: 'requested', label: 'Requested', description: shortWhen(createdAt) },\n    { key: 'confirmed', label: 'Confirmed' },\n    { key: 'completed', label: 'Completed', description: shortWhen(completedAt) },\n  ];\n\n  // active = index of the in-progress step; past `steps.length` marks all done.\n  const active = status === 'REQUESTED' ? 0 : status === 'CONFIRMED' ? 1 : steps.length;\n\n  return <Stepper steps={steps} active={active} className={className} />;\n};\n"],"mappings":";;;;;;AA6BA,IAAM,KAAa,MAAuD;AACnE,OACL,QAAO,EAAW,GAAK;EAAE,SAAS;EAAS,MAAM,KAAA;EAAW,CAAC;GAIlD,KAAyD,EACpE,WACA,cACA,gBACA,mBACI;AAEJ,KAAI,MAAW,eAAe,MAAW,WAAW;EAClD,IAAM,IAAgB,MAAW,cAAc,cAAc;AAC7D,SACE,kBAAC,MAAD;GACE,WAAW,EAAG,0BAA0B,EAAU;GAClD,cAAW;aAFb,CAIE,kBAAC,MAAD;IAAI,WAAU;cAAd;KACE,kBAAC,QAAD;MACE,eAAY;MACZ,WAAU;gBAEV,kBAAC,GAAD,EAAO,WAAU,UAAW,CAAA;MACvB,CAAA;KACP,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,QAAD;OAAM,WAAU;iBAA8C;OAAgB,CAAA,EAC7E,EAAU,EAAU,GACnB,kBAAC,QAAD;OAAM,WAAU;iBAAiC,EAAU,EAAU;OAAQ,CAAA,GAC3E,KACC;;KACP,kBAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,CAAA;KACC;OACL,kBAAC,MAAD;IAAI,WAAU;IAA0B,gBAAa;cAArD,CACE,kBAAC,QAAD;KACE,eAAY;KACZ,WAAU;eAEV,kBAAC,GAAD,EAAG,WAAU,UAAW,CAAA;KACnB,CAAA,EACP,kBAAC,QAAD;KAAM,WAAU;eAA8C;KAAqB,CAAA,CAChF;MACF;;;CAKT,IAAM,IAAuB;EAC3B;GAAE,KAAK;GAAa,OAAO;GAAa,aAAa,EAAU,EAAU;GAAE;EAC3E;GAAE,KAAK;GAAa,OAAO;GAAa;EACxC;GAAE,KAAK;GAAa,OAAO;GAAa,aAAa,EAAU,EAAY;GAAE;EAC9E;AAKD,QAAO,kBAAC,GAAD;EAAgB;EAAe,QAFvB,MAAW,cAAc,IAAI,MAAW,cAAc,IAAI,EAAM;EAEtB;EAAa,CAAA"}

package/dist/atheletebridge/components/StatusBadge.js

@@ -17,7 +17,7 @@ var r = {
 	forming: "warning",
 	active: "success",
 	inactive: "secondary",
-	archived: "outline",
+	archived: "secondary",
 	trial: "info",
 	injured: "warning",
 	suspended: "destructive",
@@ -38,11 +38,11 @@ var r = {
 function o(e) {
 	return e.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (e) => e.toUpperCase());
 }
-var s = ({ status: s, className: c }) => {
-	let l = s.toLowerCase(), u = a[l] ?? "secondary", d = i.has(l);
+var s = ({ status: s, variant: c, className: l }) => {
+	let u = s.toLowerCase(), d = c ?? a[u] ?? "secondary", f = i.has(u);
 	return /* @__PURE__ */ n("span", {
-		className: e("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium", r[u], c),
-		children: [d && /* @__PURE__ */ t("span", {
+		className: e("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium", r[d], l),
+		children: [f && /* @__PURE__ */ t("span", {
 			"aria-hidden": "true",
 			className: "size-1.5 rounded-full bg-current motion-safe:animate-vc-glow-pulse"
 		}), o(s)]

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","names":[],"sources":["../../../src/atheletebridge/components/StatusBadge.tsx"],"sourcesContent":["/**\n * Status Badge Component\n * @module atheletebridge/components\n *\n * A colored badge based on a domain status value, with semantic-token color\n * mapping for the AthleteBridge lifecycle states (teams, members, fixtures,\n * programs, sessions, workouts). Uses semantic tokens only — never raw colors.\n */\n\nimport type { FC } from 'react';\nimport { cn } from '../utils/cn';\n\ninterface StatusBadgeProps {\n  status: string;\n  className?: string;\n}\n\ntype BadgeVariant = 'success' | 'warning' | 'destructive' | 'secondary' | 'info' | 'outline';\n\nconst variantStyles: Record<BadgeVariant, string> = {\n  success: 'bg-status-success-bg-subtle text-status-success-text',\n  warning: 'bg-status-warning-bg-subtle text-status-warning-text',\n  destructive: 'bg-status-error-bg-subtle text-status-error-text',\n  secondary: 'bg-bg-sunken text-text-secondary',\n  info: 'bg-[var(--color-accent-soft)] text-text-primary',\n  outline: 'border border-border-seam text-text-primary',\n};\n\n// Statuses that represent a \"live\" / in-progress condition get a subtle,\n// opacity-only glow pulse (reduced-motion safe via motion-safe:).\nconst liveStatuses = new Set(['live', 'active', 'confirmed', 'in_progress']);\n\nconst statusVariantMap: Record<string, BadgeVariant> = {\n  // Team status\n  forming: 'warning',\n  active: 'success',\n  inactive: 'secondary',\n  archived: 'outline',\n\n  // Member status\n  trial: 'info',\n  injured: 'warning',\n  suspended: 'destructive',\n  released: 'secondary',\n\n  // Fixture status\n  scheduled: 'info',\n  live: 'success',\n  completed: 'success',\n  postponed: 'warning',\n  cancelled: 'destructive',\n\n  // Program status\n  draft: 'secondary',\n  published: 'success',\n\n  // Session status\n  requested: 'warning',\n  confirmed: 'info',\n  no_show: 'destructive',\n\n  // Workout status\n  planned: 'info',\n  skipped: 'secondary',\n};\n\nfunction formatStatusLabel(status: string): string {\n  return status\n    .replace(/_/g, ' ')\n    .toLowerCase()\n    .replace(/\\b\\w/g, (char) => char.toUpperCase());\n}\n\nexport const StatusBadge: FC<StatusBadgeProps> = ({ status, className }) => {\n  const key = status.toLowerCase();\n  const variant = statusVariantMap[key] ?? 'secondary';\n  const isLive = liveStatuses.has(key);\n\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',\n        variantStyles[variant],\n        className\n      )}\n    >\n      {isLive && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-1.5 rounded-full bg-current motion-safe:animate-vc-glow-pulse\"\n        />\n      )}\n      {formatStatusLabel(status)}\n    </span>\n  );\n};\n"],"mappings":";;;AAmBA,IAAM,IAA8C;CAClD,SAAS;CACT,SAAS;CACT,aAAa;CACb,WAAW;CACX,MAAM;CACN,SAAS;CACV,EAIK,IAAe,IAAI,IAAI;CAAC;CAAQ;CAAU;CAAa;CAAc,CAAC,EAEtE,IAAiD;CAErD,SAAS;CACT,QAAQ;CACR,UAAU;CACV,UAAU;CAGV,OAAO;CACP,SAAS;CACT,WAAW;CACX,UAAU;CAGV,WAAW;CACX,MAAM;CACN,WAAW;CACX,WAAW;CACX,WAAW;CAGX,OAAO;CACP,WAAW;CAGX,WAAW;CACX,WAAW;CACX,SAAS;CAGT,SAAS;CACT,SAAS;CACV;AAED,SAAS,EAAkB,GAAwB;AACjD,QAAO,EACJ,QAAQ,MAAM,IAAI,CAClB,aAAa,CACb,QAAQ,UAAU,MAAS,EAAK,aAAa,CAAC;;AAGnD,IAAa,KAAqC,EAAE,WAAQ,mBAAgB;CAC1E,IAAM,IAAM,EAAO,aAAa,EAC1B,IAAU,EAAiB,MAAQ,aACnC,IAAS,EAAa,IAAI,EAAI;AAEpC,QACE,kBAAC,QAAD;EACE,WAAW,EACT,mFACA,EAAc,IACd,EACD;YALH,CAOG,KACC,kBAAC,QAAD;GACE,eAAY;GACZ,WAAU;GACV,CAAA,EAEH,EAAkB,EAAO,CACrB"}
+{"version":3,"file":"StatusBadge.js","names":[],"sources":["../../../src/atheletebridge/components/StatusBadge.tsx"],"sourcesContent":["/**\n * Status Badge Component\n * @module atheletebridge/components\n *\n * A colored badge based on a domain status value, with semantic-token color\n * mapping for the AthleteBridge lifecycle states (teams, members, fixtures,\n * programs, sessions, workouts). Uses semantic tokens only — never raw colors.\n */\n\nimport type { FC } from 'react';\nimport { cn } from '../utils/cn';\n\ntype BadgeVariant = 'success' | 'warning' | 'destructive' | 'secondary' | 'info' | 'outline';\n\ninterface StatusBadgeProps {\n  status: string;\n  /**\n   * Force a specific variant, overriding the auto status→color mapping. Useful\n   * where the same status string reads differently by context (e.g. a cancelled\n   * coaching session shown grey rather than the default destructive red).\n   */\n  variant?: BadgeVariant;\n  className?: string;\n}\n\nconst variantStyles: Record<BadgeVariant, string> = {\n  success: 'bg-status-success-bg-subtle text-status-success-text',\n  warning: 'bg-status-warning-bg-subtle text-status-warning-text',\n  destructive: 'bg-status-error-bg-subtle text-status-error-text',\n  secondary: 'bg-bg-sunken text-text-secondary',\n  info: 'bg-[var(--color-accent-soft)] text-text-primary',\n  outline: 'border border-border-seam text-text-primary',\n};\n\n// Statuses that represent a \"live\" / in-progress condition get a subtle,\n// opacity-only glow pulse (reduced-motion safe via motion-safe:).\nconst liveStatuses = new Set(['live', 'active', 'confirmed', 'in_progress']);\n\nconst statusVariantMap: Record<string, BadgeVariant> = {\n  // Team status\n  forming: 'warning',\n  active: 'success',\n  inactive: 'secondary',\n  archived: 'secondary',\n\n  // Member status\n  trial: 'info',\n  injured: 'warning',\n  suspended: 'destructive',\n  released: 'secondary',\n\n  // Fixture status\n  scheduled: 'info',\n  live: 'success',\n  completed: 'success',\n  postponed: 'warning',\n  cancelled: 'destructive',\n\n  // Program status\n  draft: 'secondary',\n  published: 'success',\n\n  // Session status\n  requested: 'warning',\n  confirmed: 'info',\n  no_show: 'destructive',\n\n  // Workout status\n  planned: 'info',\n  skipped: 'secondary',\n};\n\nfunction formatStatusLabel(status: string): string {\n  return status\n    .replace(/_/g, ' ')\n    .toLowerCase()\n    .replace(/\\b\\w/g, (char) => char.toUpperCase());\n}\n\nexport const StatusBadge: FC<StatusBadgeProps> = ({ status, variant: variantOverride, className }) => {\n  const key = status.toLowerCase();\n  const variant = variantOverride ?? statusVariantMap[key] ?? 'secondary';\n  const isLive = liveStatuses.has(key);\n\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',\n        variantStyles[variant],\n        className\n      )}\n    >\n      {isLive && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-1.5 rounded-full bg-current motion-safe:animate-vc-glow-pulse\"\n        />\n      )}\n      {formatStatusLabel(status)}\n    </span>\n  );\n};\n"],"mappings":";;;AAyBA,IAAM,IAA8C;CAClD,SAAS;CACT,SAAS;CACT,aAAa;CACb,WAAW;CACX,MAAM;CACN,SAAS;CACV,EAIK,IAAe,IAAI,IAAI;CAAC;CAAQ;CAAU;CAAa;CAAc,CAAC,EAEtE,IAAiD;CAErD,SAAS;CACT,QAAQ;CACR,UAAU;CACV,UAAU;CAGV,OAAO;CACP,SAAS;CACT,WAAW;CACX,UAAU;CAGV,WAAW;CACX,MAAM;CACN,WAAW;CACX,WAAW;CACX,WAAW;CAGX,OAAO;CACP,WAAW;CAGX,WAAW;CACX,WAAW;CACX,SAAS;CAGT,SAAS;CACT,SAAS;CACV;AAED,SAAS,EAAkB,GAAwB;AACjD,QAAO,EACJ,QAAQ,MAAM,IAAI,CAClB,aAAa,CACb,QAAQ,UAAU,MAAS,EAAK,aAAa,CAAC;;AAGnD,IAAa,KAAqC,EAAE,WAAQ,SAAS,GAAiB,mBAAgB;CACpG,IAAM,IAAM,EAAO,aAAa,EAC1B,IAAU,KAAmB,EAAiB,MAAQ,aACtD,IAAS,EAAa,IAAI,EAAI;AAEpC,QACE,kBAAC,QAAD;EACE,WAAW,EACT,mFACA,EAAc,IACd,EACD;YALH,CAOG,KACC,kBAAC,QAAD;GACE,eAAY;GACZ,WAAU;GACV,CAAA,EAEH,EAAkB,EAAO,CACrB"}

package/dist/atheletebridge/components/TeamCard.js

@@ -1,81 +1,111 @@
 import { cn as e } from "../utils/cn.js";
 import { StatusBadge as t } from "./StatusBadge.js";
 import { SPORT_ICONS as n, SPORT_LABELS as r } from "./domain.js";
-import { CalendarDays as i, MapPin as a, Users 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 { Crest as i } from "./Crest.js";
+import { CalendarDays as a, MapPin as o, Users 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/TeamCard.tsx
-var u = ({ team: u, onClick: d }) => {
-	let f = n[u.sport];
-	return /* @__PURE__ */ c(l, {
+var f = ({ team: f, onClick: p, memberCount: m }) => {
+	let h = n[f.sport], g = m ?? f.members?.length;
+	return /* @__PURE__ */ l(d, {
 		treatment: "metric",
 		role: "button",
 		tabIndex: 0,
-		onClick: d,
+		onClick: p,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), d?.());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), p?.());
 		},
-		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(i, {
+						name: f.name,
+						sport: f.sport,
+						size: 44
+					}), /* @__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__ */ s("p", {
-							className: "text-sm text-text-secondary",
-							children: r[u.sport]
+							children: f.name
+						}), /* @__PURE__ */ c("div", {
+							className: "mt-1",
+							children: /* @__PURE__ */ l(u, {
+								variant: "secondary",
+								className: "gap-1",
+								children: [/* @__PURE__ */ c(h, {
+									className: "h-3 w-3",
+									"aria-hidden": "true"
+								}), r[f.sport]]
+							})
 						})]
 					})]
-				}), /* @__PURE__ */ s(t, { status: u.status })]
+				}), /* @__PURE__ */ c(t, { status: f.status })]
 			}),
-			/* @__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: [
-					u.ageGroup && /* @__PURE__ */ c("span", {
+					f.ageGroup && /* @__PURE__ */ l("span", {
 						className: "flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ s(o, { className: "h-3.5 w-3.5" }),
+							/* @__PURE__ */ c(s, {
+								className: "h-3.5 w-3.5",
+								"aria-hidden": "true"
+							}),
 							" ",
-							u.ageGroup
+							f.ageGroup
 						]
 					}),
-					u.season && /* @__PURE__ */ c("span", {
+					f.season && /* @__PURE__ */ l("span", {
 						className: "flex items-center gap-1",
 						children: [
-							/* @__PURE__ */ s(i, { className: "h-3.5 w-3.5" }),
+							/* @__PURE__ */ c(a, {
+								className: "h-3.5 w-3.5",
+								"aria-hidden": "true"
+							}),
 							" ",
-							u.season
+							f.season
 						]
 					}),
-					u.homeVenue && /* @__PURE__ */ c("span", {
+					f.homeVenue && /* @__PURE__ */ l("span", {
 						className: "flex items-center gap-1 truncate",
 						children: [
-							/* @__PURE__ */ s(a, { className: "h-3.5 w-3.5 shrink-0" }),
+							/* @__PURE__ */ c(o, {
+								className: "h-3.5 w-3.5 shrink-0",
+								"aria-hidden": "true"
+							}),
 							" ",
-							u.homeVenue
+							f.homeVenue
 						]
 					})
 				]
 			}),
-			u.tags.length > 0 && /* @__PURE__ */ s("div", {
+			f.tags.length > 0 && /* @__PURE__ */ c("div", {
 				className: "mt-3 flex flex-wrap gap-1.5",
-				children: u.tags.slice(0, 4).map((e) => /* @__PURE__ */ s("span", {
+				children: f.tags.slice(0, 4).map((e) => /* @__PURE__ */ c("span", {
 					className: "inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
 					children: e
 				}, e))
+			}),
+			g !== void 0 && /* @__PURE__ */ l("div", {
+				className: "mt-4 flex items-center gap-1.5 border-t border-border-seam pt-3 text-xs font-medium text-text-secondary",
+				children: [
+					/* @__PURE__ */ c(s, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}),
+					g,
+					" ",
+					g === 1 ? "member" : "members"
+				]
 			})
 		]
 	});
 };
 //#endregion
-export { u as TeamCard };
+export { f as TeamCard };
 
 //# sourceMappingURL=TeamCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TeamCard.js","names":[],"sources":["../../../src/atheletebridge/components/TeamCard.tsx"],"sourcesContent":["/**\n * Team Card\n * @module atheletebridge/components\n */\n\nimport type { FC } from 'react';\nimport { Users, MapPin, CalendarDays } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { SPORT_ICONS, SPORT_LABELS } from './domain';\nimport { cn } from '../utils/cn';\nimport type { AthTeam } from '../types';\n\ninterface TeamCardProps {\n  team: AthTeam;\n  onClick?: () => void;\n}\n\nexport const TeamCard: FC<TeamCardProps> = ({ team, onClick }) => {\n  const SportIcon = SPORT_ICONS[team.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\">{team.name}</h3>\n            <p className=\"text-sm text-text-secondary\">{SPORT_LABELS[team.sport]}</p>\n          </div>\n        </div>\n        <StatusBadge status={team.status} />\n      </div>\n\n      <div className=\"mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-text-secondary\">\n        {team.ageGroup && (\n          <span className=\"flex items-center gap-1\">\n            <Users className=\"h-3.5 w-3.5\" /> {team.ageGroup}\n          </span>\n        )}\n        {team.season && (\n          <span className=\"flex items-center gap-1\">\n            <CalendarDays className=\"h-3.5 w-3.5\" /> {team.season}\n          </span>\n        )}\n        {team.homeVenue && (\n          <span className=\"flex items-center gap-1 truncate\">\n            <MapPin className=\"h-3.5 w-3.5 shrink-0\" /> {team.homeVenue}\n          </span>\n        )}\n      </div>\n\n      {team.tags.length > 0 && (\n        <div className=\"mt-3 flex flex-wrap gap-1.5\">\n          {team.tags.slice(0, 4).map((tag) => (\n            <span\n              key={tag}\n              className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary\"\n            >\n              {tag}\n            </span>\n          ))}\n        </div>\n      )}\n    </GlassCard>\n  );\n};\n"],"mappings":";;;;;;;AAkBA,IAAa,KAA+B,EAAE,SAAM,iBAAc;CAChE,IAAM,IAAY,EAAY,EAAK;AAEnC,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,EAAK;OAAU,CAAA,EACnF,kBAAC,KAAD;OAAG,WAAU;iBAA+B,EAAa,EAAK;OAAW,CAAA,CACrE;QACF;QACN,kBAAC,GAAD,EAAa,QAAQ,EAAK,QAAU,CAAA,CAChC;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,EAAK,YACJ,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAO,WAAU,eAAgB,CAAA;;OAAE,EAAK;OACnC;;KAER,EAAK,UACJ,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAc,WAAU,eAAgB,CAAA;;OAAE,EAAK;OAC1C;;KAER,EAAK,aACJ,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAQ,WAAU,wBAAyB,CAAA;;OAAE,EAAK;OAC7C;;KAEL;;GAEL,EAAK,KAAK,SAAS,KAClB,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAK,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,MAC1B,kBAAC,QAAD;KAEE,WAAU;eAET;KACI,EAJA,EAIA,CACP;IACE,CAAA;GAEE"}
+{"version":3,"file":"TeamCard.js","names":[],"sources":["../../../src/atheletebridge/components/TeamCard.tsx"],"sourcesContent":["/**\n * Team Card\n * @module atheletebridge/components\n *\n * A team tile fronted by a deterministic gradient monogram crest, with a sport\n * Badge, a StatusBadge (green Active / amber Forming / grey Inactive·Archived),\n * a member-count chip and a hover lift. Semantic tokens only.\n */\n\nimport type { FC } from 'react';\nimport { Users, MapPin, CalendarDays } from 'lucide-react';\nimport { GlassCard, Badge } from '@burdenoff/fe-libs/ui';\nimport { StatusBadge } from './StatusBadge';\nimport { Crest } from './Crest';\nimport { SPORT_ICONS, SPORT_LABELS } from './domain';\nimport { cn } from '../utils/cn';\nimport type { AthTeam } from '../types';\n\ninterface TeamCardProps {\n  team: AthTeam;\n  onClick?: () => void;\n  /**\n   * Member count for the footer chip. Falls back to `team.members?.length`\n   * when the list query selected members; omit the chip entirely if neither is\n   * available (never guess).\n   */\n  memberCount?: number;\n}\n\nexport const TeamCard: FC<TeamCardProps> = ({ team, onClick, memberCount }) => {\n  const SportIcon = SPORT_ICONS[team.sport];\n  const count = memberCount ?? team.members?.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          <Crest name={team.name} sport={team.sport} size={44} />\n          <div className=\"min-w-0\">\n            <h3 className=\"truncate text-base font-semibold text-text-primary\">{team.name}</h3>\n            <div className=\"mt-1\">\n              <Badge variant=\"secondary\" className=\"gap-1\">\n                <SportIcon className=\"h-3 w-3\" aria-hidden=\"true\" />\n                {SPORT_LABELS[team.sport]}\n              </Badge>\n            </div>\n          </div>\n        </div>\n        <StatusBadge status={team.status} />\n      </div>\n\n      <div className=\"mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-text-secondary\">\n        {team.ageGroup && (\n          <span className=\"flex items-center gap-1\">\n            <Users className=\"h-3.5 w-3.5\" aria-hidden=\"true\" /> {team.ageGroup}\n          </span>\n        )}\n        {team.season && (\n          <span className=\"flex items-center gap-1\">\n            <CalendarDays className=\"h-3.5 w-3.5\" aria-hidden=\"true\" /> {team.season}\n          </span>\n        )}\n        {team.homeVenue && (\n          <span className=\"flex items-center gap-1 truncate\">\n            <MapPin className=\"h-3.5 w-3.5 shrink-0\" aria-hidden=\"true\" /> {team.homeVenue}\n          </span>\n        )}\n      </div>\n\n      {team.tags.length > 0 && (\n        <div className=\"mt-3 flex flex-wrap gap-1.5\">\n          {team.tags.slice(0, 4).map((tag) => (\n            <span\n              key={tag}\n              className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary\"\n            >\n              {tag}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {count !== undefined && (\n        <div className=\"mt-4 flex items-center gap-1.5 border-t border-border-seam pt-3 text-xs font-medium text-text-secondary\">\n          <Users className=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n          {count} {count === 1 ? 'member' : 'members'}\n        </div>\n      )}\n    </GlassCard>\n  );\n};\n"],"mappings":";;;;;;;;AA6BA,IAAa,KAA+B,EAAE,SAAM,YAAS,qBAAkB;CAC7E,IAAM,IAAY,EAAY,EAAK,QAC7B,IAAQ,KAAe,EAAK,SAAS;AAE3C,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,GAAD;MAAO,MAAM,EAAK;MAAM,OAAO,EAAK;MAAO,MAAM;MAAM,CAAA,EACvD,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBAAsD,EAAK;OAAU,CAAA,EACnF,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QAAO,SAAQ;QAAY,WAAU;kBAArC,CACE,kBAAC,GAAD;SAAW,WAAU;SAAU,eAAY;SAAS,CAAA,EACnD,EAAa,EAAK,OACb;;OACJ,CAAA,CACF;QACF;QACN,kBAAC,GAAD,EAAa,QAAQ,EAAK,QAAU,CAAA,CAChC;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,EAAK,YACJ,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD;QAAO,WAAU;QAAc,eAAY;QAAS,CAAA;;OAAE,EAAK;OACtD;;KAER,EAAK,UACJ,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD;QAAc,WAAU;QAAc,eAAY;QAAS,CAAA;;OAAE,EAAK;OAC7D;;KAER,EAAK,aACJ,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD;QAAQ,WAAU;QAAuB,eAAY;QAAS,CAAA;;OAAE,EAAK;OAChE;;KAEL;;GAEL,EAAK,KAAK,SAAS,KAClB,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAK,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,MAC1B,kBAAC,QAAD;KAEE,WAAU;eAET;KACI,EAJA,EAIA,CACP;IACE,CAAA;GAGP,MAAU,KAAA,KACT,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAO,WAAU;MAAc,eAAY;MAAS,CAAA;KACnD;KAAM;KAAE,MAAU,IAAI,WAAW;KAC9B;;GAEE"}

package/dist/atheletebridge/components/UserAvatar.js

@@ -0,0 +1,33 @@
+import { cn as e } from "../utils/cn.js";
+import { gradientCss as t, initials as n } from "../utils/identity.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/atheletebridge/components/UserAvatar.tsx
+var i = {
+	xs: 24,
+	sm: 32,
+	md: 40,
+	lg: 56,
+	xl: 72
+}, a = ({ name: a, id: o, jersey: s, size: c = "md", ring: l = !1, className: u }) => {
+	let d = typeof c == "number" ? c : i[c], f = a?.trim() || (o ? `User ${o.slice(0, 6)}` : "Unknown user"), p = a?.trim() || o || f, m = typeof s == "number" && Number.isFinite(s) ? String(s) : n(f);
+	return /* @__PURE__ */ r("span", {
+		role: "img",
+		"aria-label": f,
+		title: f,
+		className: e("inline-flex shrink-0 items-center justify-center rounded-full font-semibold leading-none text-[var(--color-action-primary-text)]", l && "ring-2 ring-[var(--color-bg-surface)]", u),
+		style: {
+			width: d,
+			height: d,
+			fontSize: Math.max(9, Math.round(d * .4)),
+			background: t(p)
+		},
+		children: /* @__PURE__ */ r("span", {
+			"aria-hidden": "true",
+			children: m
+		})
+	});
+};
+//#endregion
+export { a as UserAvatar };
+
+//# sourceMappingURL=UserAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserAvatar.js","names":[],"sources":["../../../src/atheletebridge/components/UserAvatar.tsx"],"sourcesContent":["/**\n * User avatar (monogram)\n * @module atheletebridge/components\n *\n * A circular avatar for a user / athlete / coach. There is no photo field on the\n * schema, so this is an honest initials monogram over a deterministic gradient\n * derived from the resolved name (or the id as a stable fallback). Semantic\n * tokens only.\n */\n\nimport type { FC } from 'react';\nimport { cn } from '../utils/cn';\nimport { gradientCss, initials } from '../utils/identity';\n\nconst SIZE_MAP = { xs: 24, sm: 32, md: 40, lg: 56, xl: 72 } as const;\n\nexport type UserAvatarSize = keyof typeof SIZE_MAP | number;\n\nexport interface UserAvatarProps {\n  /** Resolved display name (drives initials + gradient seed). */\n  name?: string | null;\n  /** Stable id — used as the gradient seed and initials fallback when no name. */\n  id?: string | null;\n  /** Optional jersey number rendered instead of initials (roster context). */\n  jersey?: number | null;\n  /** Named size token or explicit pixel diameter. */\n  size?: UserAvatarSize;\n  /** Extra ring (used inside overlapping stacks / on colored surfaces). */\n  ring?: boolean;\n  className?: string;\n}\n\n/** Circular monogram avatar for a user/athlete/coach (initials or jersey #). */\nexport const UserAvatar: FC<UserAvatarProps> = ({\n  name,\n  id,\n  jersey,\n  size = 'md',\n  ring = false,\n  className,\n}) => {\n  const px = typeof size === 'number' ? size : SIZE_MAP[size];\n  const label = name?.trim() || (id ? `User ${id.slice(0, 6)}` : 'Unknown user');\n  const seed = name?.trim() || id || label;\n  const content =\n    typeof jersey === 'number' && Number.isFinite(jersey) ? String(jersey) : initials(label);\n\n  return (\n    <span\n      role=\"img\"\n      aria-label={label}\n      title={label}\n      className={cn(\n        'inline-flex shrink-0 items-center justify-center rounded-full font-semibold leading-none text-[var(--color-action-primary-text)]',\n        ring && 'ring-2 ring-[var(--color-bg-surface)]',\n        className\n      )}\n      style={{\n        width: px,\n        height: px,\n        fontSize: Math.max(9, Math.round(px * 0.4)),\n        background: gradientCss(seed),\n      }}\n    >\n      <span aria-hidden=\"true\">{content}</span>\n    </span>\n  );\n};\n"],"mappings":";;;;AAcA,IAAM,IAAW;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,EAmB9C,KAAmC,EAC9C,SACA,OACA,WACA,UAAO,MACP,UAAO,IACP,mBACI;CACJ,IAAM,IAAK,OAAO,KAAS,WAAW,IAAO,EAAS,IAChD,IAAQ,GAAM,MAAM,KAAK,IAAK,QAAQ,EAAG,MAAM,GAAG,EAAE,KAAK,iBACzD,IAAO,GAAM,MAAM,IAAI,KAAM,GAC7B,IACJ,OAAO,KAAW,YAAY,OAAO,SAAS,EAAO,GAAG,OAAO,EAAO,GAAG,EAAS,EAAM;AAE1F,QACE,kBAAC,QAAD;EACE,MAAK;EACL,cAAY;EACZ,OAAO;EACP,WAAW,EACT,oIACA,KAAQ,yCACR,EACD;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,UAAU,KAAK,IAAI,GAAG,KAAK,MAAM,IAAK,GAAI,CAAC;GAC3C,YAAY,EAAY,EAAK;GAC9B;YAED,kBAAC,QAAD;GAAM,eAAY;aAAQ;GAAe,CAAA;EACpC,CAAA"}

package/dist/atheletebridge/components/domain.js

@@ -49,8 +49,11 @@ var s = {
 	WEIGHT: "Weight",
 	HEART_RATE: "Heart Rate",
 	CUSTOM: "Custom"
-};
+}, m = Object.keys(d);
+function h(e) {
+	return e.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (e) => e.toUpperCase());
+}
 //#endregion
-export { d as FIXTURE_TYPE_LABELS, u as MEMBER_ROLE_LABELS, p as METRIC_TYPE_LABELS, l as PROGRAM_LEVEL_LABELS, f as SESSION_TYPE_LABELS, s as SPORT_ICONS, c as SPORT_LABELS };
+export { d as FIXTURE_TYPE_LABELS, m as FIXTURE_TYPE_OPTIONS, u as MEMBER_ROLE_LABELS, p as METRIC_TYPE_LABELS, l as PROGRAM_LEVEL_LABELS, f as SESSION_TYPE_LABELS, s as SPORT_ICONS, c as SPORT_LABELS, h as humanizeEnum };
 
 //# sourceMappingURL=domain.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"domain.js","names":[],"sources":["../../../src/atheletebridge/components/domain.ts"],"sourcesContent":["/**\n * Domain display helpers\n * @module atheletebridge/components\n *\n * Centralized, type-safe labels and icon mappings for the AthleteBridge\n * enums so list/detail/form pages render them consistently.\n */\n\nimport {\n  Activity,\n  Dumbbell,\n  Trophy,\n  Volleyball,\n  Waves,\n  Gamepad2,\n  Footprints,\n  type LucideIcon,\n} from 'lucide-react';\nimport type {\n  AthFixtureType,\n  AthMemberRole,\n  AthMetricType,\n  AthProgramLevel,\n  AthSessionType,\n  AthSport,\n} from '../types';\n\nexport const SPORT_ICONS: Record<AthSport, LucideIcon> = {\n  ATHLETICS: Footprints,\n  BASKETBALL: Volleyball,\n  CRICKET: Trophy,\n  ESPORTS: Gamepad2,\n  FOOTBALL: Volleyball,\n  OTHER: Activity,\n  SWIMMING: Waves,\n  TENNIS: Dumbbell,\n};\n\nexport const SPORT_LABELS: Record<AthSport, string> = {\n  ATHLETICS: 'Athletics',\n  BASKETBALL: 'Basketball',\n  CRICKET: 'Cricket',\n  ESPORTS: 'Esports',\n  FOOTBALL: 'Football',\n  OTHER: 'Other',\n  SWIMMING: 'Swimming',\n  TENNIS: 'Tennis',\n};\n\nexport const PROGRAM_LEVEL_LABELS: Record<AthProgramLevel, string> = {\n  BEGINNER: 'Beginner',\n  INTERMEDIATE: 'Intermediate',\n  ADVANCED: 'Advanced',\n  ELITE: 'Elite',\n};\n\nexport const MEMBER_ROLE_LABELS: Record<AthMemberRole, string> = {\n  PLAYER: 'Player',\n  CAPTAIN: 'Captain',\n  COACH: 'Coach',\n  ASSISTANT_COACH: 'Assistant Coach',\n  PHYSIO: 'Physio',\n  MANAGER: 'Manager',\n};\n\nexport const FIXTURE_TYPE_LABELS: Record<AthFixtureType, string> = {\n  FRIENDLY: 'Friendly',\n  LEAGUE: 'League',\n  CUP: 'Cup',\n  TOURNAMENT: 'Tournament',\n  SCRIMMAGE: 'Scrimmage',\n};\n\nexport const SESSION_TYPE_LABELS: Record<AthSessionType, string> = {\n  IN_PERSON: 'In Person',\n  ONLINE: 'Online',\n  HYBRID: 'Hybrid',\n};\n\nexport const METRIC_TYPE_LABELS: Record<AthMetricType, string> = {\n  SPEED: 'Speed',\n  ENDURANCE: 'Endurance',\n  STRENGTH: 'Strength',\n  AGILITY: 'Agility',\n  ACCURACY: 'Accuracy',\n  WEIGHT: 'Weight',\n  HEART_RATE: 'Heart Rate',\n  CUSTOM: 'Custom',\n};\n\nexport const SPORT_OPTIONS = Object.keys(SPORT_LABELS) as AthSport[];\nexport const PROGRAM_LEVEL_OPTIONS = Object.keys(PROGRAM_LEVEL_LABELS) as AthProgramLevel[];\nexport const MEMBER_ROLE_OPTIONS = Object.keys(MEMBER_ROLE_LABELS) as AthMemberRole[];\nexport const FIXTURE_TYPE_OPTIONS = Object.keys(FIXTURE_TYPE_LABELS) as AthFixtureType[];\nexport const SESSION_TYPE_OPTIONS = Object.keys(SESSION_TYPE_LABELS) as AthSessionType[];\n\n/** Humanize an enum value for display (fallback when no explicit label exists). */\nexport function humanizeEnum(value: string): string {\n  return value\n    .replace(/_/g, ' ')\n    .toLowerCase()\n    .replace(/\\b\\w/g, (c) => c.toUpperCase());\n}\n"],"mappings":";;AA2BA,IAAa,IAA4C;CACvD,WAAW;CACX,YAAY;CACZ,SAAS;CACT,SAAS;CACT,UAAU;CACV,OAAO;CACP,UAAU;CACV,QAAQ;CACT,EAEY,IAAyC;CACpD,WAAW;CACX,YAAY;CACZ,SAAS;CACT,SAAS;CACT,UAAU;CACV,OAAO;CACP,UAAU;CACV,QAAQ;CACT,EAEY,IAAwD;CACnE,UAAU;CACV,cAAc;CACd,UAAU;CACV,OAAO;CACR,EAEY,IAAoD;CAC/D,QAAQ;CACR,SAAS;CACT,OAAO;CACP,iBAAiB;CACjB,QAAQ;CACR,SAAS;CACV,EAEY,IAAsD;CACjE,UAAU;CACV,QAAQ;CACR,KAAK;CACL,YAAY;CACZ,WAAW;CACZ,EAEY,IAAsD;CACjE,WAAW;CACX,QAAQ;CACR,QAAQ;CACT,EAEY,IAAoD;CAC/D,OAAO;CACP,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACT"}
+{"version":3,"file":"domain.js","names":[],"sources":["../../../src/atheletebridge/components/domain.ts"],"sourcesContent":["/**\n * Domain display helpers\n * @module atheletebridge/components\n *\n * Centralized, type-safe labels and icon mappings for the AthleteBridge\n * enums so list/detail/form pages render them consistently.\n */\n\nimport {\n  Activity,\n  Dumbbell,\n  Trophy,\n  Volleyball,\n  Waves,\n  Gamepad2,\n  Footprints,\n  type LucideIcon,\n} from 'lucide-react';\nimport type {\n  AthFixtureType,\n  AthMemberRole,\n  AthMetricType,\n  AthProgramLevel,\n  AthSessionType,\n  AthSport,\n} from '../types';\n\nexport const SPORT_ICONS: Record<AthSport, LucideIcon> = {\n  ATHLETICS: Footprints,\n  BASKETBALL: Volleyball,\n  CRICKET: Trophy,\n  ESPORTS: Gamepad2,\n  FOOTBALL: Volleyball,\n  OTHER: Activity,\n  SWIMMING: Waves,\n  TENNIS: Dumbbell,\n};\n\nexport const SPORT_LABELS: Record<AthSport, string> = {\n  ATHLETICS: 'Athletics',\n  BASKETBALL: 'Basketball',\n  CRICKET: 'Cricket',\n  ESPORTS: 'Esports',\n  FOOTBALL: 'Football',\n  OTHER: 'Other',\n  SWIMMING: 'Swimming',\n  TENNIS: 'Tennis',\n};\n\nexport const PROGRAM_LEVEL_LABELS: Record<AthProgramLevel, string> = {\n  BEGINNER: 'Beginner',\n  INTERMEDIATE: 'Intermediate',\n  ADVANCED: 'Advanced',\n  ELITE: 'Elite',\n};\n\nexport const MEMBER_ROLE_LABELS: Record<AthMemberRole, string> = {\n  PLAYER: 'Player',\n  CAPTAIN: 'Captain',\n  COACH: 'Coach',\n  ASSISTANT_COACH: 'Assistant Coach',\n  PHYSIO: 'Physio',\n  MANAGER: 'Manager',\n};\n\nexport const FIXTURE_TYPE_LABELS: Record<AthFixtureType, string> = {\n  FRIENDLY: 'Friendly',\n  LEAGUE: 'League',\n  CUP: 'Cup',\n  TOURNAMENT: 'Tournament',\n  SCRIMMAGE: 'Scrimmage',\n};\n\nexport const SESSION_TYPE_LABELS: Record<AthSessionType, string> = {\n  IN_PERSON: 'In Person',\n  ONLINE: 'Online',\n  HYBRID: 'Hybrid',\n};\n\nexport const METRIC_TYPE_LABELS: Record<AthMetricType, string> = {\n  SPEED: 'Speed',\n  ENDURANCE: 'Endurance',\n  STRENGTH: 'Strength',\n  AGILITY: 'Agility',\n  ACCURACY: 'Accuracy',\n  WEIGHT: 'Weight',\n  HEART_RATE: 'Heart Rate',\n  CUSTOM: 'Custom',\n};\n\nexport const SPORT_OPTIONS = Object.keys(SPORT_LABELS) as AthSport[];\nexport const PROGRAM_LEVEL_OPTIONS = Object.keys(PROGRAM_LEVEL_LABELS) as AthProgramLevel[];\nexport const MEMBER_ROLE_OPTIONS = Object.keys(MEMBER_ROLE_LABELS) as AthMemberRole[];\nexport const FIXTURE_TYPE_OPTIONS = Object.keys(FIXTURE_TYPE_LABELS) as AthFixtureType[];\nexport const SESSION_TYPE_OPTIONS = Object.keys(SESSION_TYPE_LABELS) as AthSessionType[];\n\n/** Humanize an enum value for display (fallback when no explicit label exists). */\nexport function humanizeEnum(value: string): string {\n  return value\n    .replace(/_/g, ' ')\n    .toLowerCase()\n    .replace(/\\b\\w/g, (c) => c.toUpperCase());\n}\n"],"mappings":";;AA2BA,IAAa,IAA4C;CACvD,WAAW;CACX,YAAY;CACZ,SAAS;CACT,SAAS;CACT,UAAU;CACV,OAAO;CACP,UAAU;CACV,QAAQ;CACT,EAEY,IAAyC;CACpD,WAAW;CACX,YAAY;CACZ,SAAS;CACT,SAAS;CACT,UAAU;CACV,OAAO;CACP,UAAU;CACV,QAAQ;CACT,EAEY,IAAwD;CACnE,UAAU;CACV,cAAc;CACd,UAAU;CACV,OAAO;CACR,EAEY,IAAoD;CAC/D,QAAQ;CACR,SAAS;CACT,OAAO;CACP,iBAAiB;CACjB,QAAQ;CACR,SAAS;CACV,EAEY,IAAsD;CACjE,UAAU;CACV,QAAQ;CACR,KAAK;CACL,YAAY;CACZ,WAAW;CACZ,EAEY,IAAsD;CACjE,WAAW;CACX,QAAQ;CACR,QAAQ;CACT,EAEY,IAAoD;CAC/D,OAAO;CACP,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACT,EAKY,IAAuB,OAAO,KAAK,EAAoB;AAIpE,SAAgB,EAAa,GAAuB;AAClD,QAAO,EACJ,QAAQ,MAAM,IAAI,CAClB,aAAa,CACb,QAAQ,UAAU,MAAM,EAAE,aAAa,CAAC"}

package/dist/atheletebridge/components/viz/AvatarStack.js

@@ -0,0 +1,2 @@
+import "./lib/Avatar.js";
+import "react/jsx-runtime";

package/dist/atheletebridge/components/viz/BarChart.js

@@ -0,0 +1,83 @@
+import { chartPalette as e } from "./lib/palette.js";
+import { useMounted as t, usePrefersReducedMotion as n } from "./lib/hooks.js";
+import { ResponsiveSvg as r } from "./lib/ResponsiveSvg.js";
+import { scaleLinear as i } from "./lib/geometry.js";
+import { formatCompact as a } from "./lib/format.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/atheletebridge/components/viz/BarChart.tsx
+var c = {
+	top: 20,
+	bottom: 26,
+	left: 8,
+	right: 8
+};
+function l({ series: l, height: u = 220, valueFormatter: d = a, colorful: f = !1, hideValues: p = !1, title: m, className: h }) {
+	let g = t(), _ = n();
+	if (l.length === 0) return null;
+	let v = l.map((e) => e.value), y = Math.max(...v, 0) || 1, b = e(l.length);
+	return /* @__PURE__ */ o(r, {
+		height: u,
+		title: m ?? `Bar chart of ${l.length} categories`,
+		className: h,
+		desc: l.map((e) => `${e.label}: ${d(e.value)}`).join(", "),
+		children: ({ width: e }) => {
+			let t = c.left, n = e - c.right, r = c.top, a = u - c.bottom, m = a - r, h = (n - t) / l.length, v = Math.min(56, h * .62);
+			return /* @__PURE__ */ s("g", { children: [/* @__PURE__ */ o("line", {
+				x1: t,
+				x2: n,
+				y1: a,
+				y2: a,
+				stroke: "var(--color-chart-axis)",
+				strokeWidth: 1,
+				vectorEffect: "non-scaling-stroke",
+				opacity: .5
+			}), l.map((e, n) => {
+				let r = i(e.value, 0, y, 0, m), c = t + h * n + h / 2, l = c - v / 2, x = a - r, S = e.color ?? (f ? b[n] : "var(--color-accent-primary)");
+				return /* @__PURE__ */ s("g", { children: [
+					/* @__PURE__ */ o("title", { children: `${e.label}: ${d(e.value)}` }),
+					/* @__PURE__ */ o("rect", {
+						x: l,
+						y: x,
+						width: v,
+						height: Math.max(0, r),
+						rx: 4,
+						fill: S,
+						style: {
+							transformBox: "fill-box",
+							transformOrigin: "bottom",
+							transform: g || _ ? "scaleY(1)" : "scaleY(0)",
+							transition: _ ? void 0 : "transform 620ms cubic-bezier(0.22,1,0.36,1)",
+							transitionDelay: _ ? void 0 : `${n * 45}ms`
+						}
+					}),
+					p ? null : /* @__PURE__ */ o("text", {
+						x: c,
+						y: x - 6,
+						textAnchor: "middle",
+						fontSize: 10,
+						fontWeight: 600,
+						fill: "var(--color-text-secondary)",
+						style: {
+							opacity: g || _ ? 1 : 0,
+							transition: _ ? void 0 : "opacity 400ms ease",
+							transitionDelay: _ ? void 0 : `${n * 45 + 220}ms`
+						},
+						children: d(e.value)
+					}),
+					/* @__PURE__ */ o("text", {
+						x: c,
+						y: u - 8,
+						textAnchor: "middle",
+						fontSize: 10,
+						fill: "var(--color-chart-axis)",
+						children: e.label
+					})
+				] }, `${e.label}-${n}`);
+			})] });
+		}
+	});
+}
+//#endregion
+export { l as BarChart };
+
+//# sourceMappingURL=BarChart.js.map

package/dist/atheletebridge/components/viz/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","names":[],"sources":["../../../../src/atheletebridge/components/viz/BarChart.tsx"],"sourcesContent":["import { ACCENT, chartPalette } from './lib/palette';\nimport { ResponsiveSvg } from './lib/ResponsiveSvg';\nimport { scaleLinear } from './lib/geometry';\nimport { formatCompact } from './lib/format';\nimport { useMounted, usePrefersReducedMotion } from './lib/hooks';\nimport type { Segment } from './lib/types';\n\nexport interface BarChartProps {\n  /** Bars to render. A `color` on a datum overrides the palette. */\n  series: Segment[];\n  height?: number;\n  valueFormatter?: (value: number) => string;\n  /** Color each bar from the categorical palette instead of a single accent. */\n  colorful?: boolean;\n  /** Hide the value label above each bar. */\n  hideValues?: boolean;\n  title?: string;\n  className?: string;\n}\n\nconst PAD = { top: 20, bottom: 26, left: 8, right: 8 };\n\n/** Vertical bar chart with value labels and an animated grow-in. */\nexport function BarChart({\n  series,\n  height = 220,\n  valueFormatter = formatCompact,\n  colorful = false,\n  hideValues = false,\n  title,\n  className,\n}: BarChartProps) {\n  const mounted = useMounted();\n  const reduced = usePrefersReducedMotion();\n\n  if (series.length === 0) {\n    return null;\n  }\n\n  const values = series.map((s) => s.value);\n  const max = Math.max(...values, 0) || 1;\n  const palette = chartPalette(series.length);\n  const chartTitle = title ?? `Bar chart of ${series.length} categories`;\n\n  return (\n    <ResponsiveSvg\n      height={height}\n      title={chartTitle}\n      className={className}\n      desc={series.map((s) => `${s.label}: ${valueFormatter(s.value)}`).join(', ')}\n    >\n      {({ width }) => {\n        const plotLeft = PAD.left;\n        const plotRight = width - PAD.right;\n        const plotTop = PAD.top;\n        const plotBottom = height - PAD.bottom;\n        const plotH = plotBottom - plotTop;\n        const slot = (plotRight - plotLeft) / series.length;\n        const barWidth = Math.min(56, slot * 0.62);\n        return (\n          <g>\n            <line\n              x1={plotLeft}\n              x2={plotRight}\n              y1={plotBottom}\n              y2={plotBottom}\n              stroke=\"var(--color-chart-axis)\"\n              strokeWidth={1}\n              vectorEffect=\"non-scaling-stroke\"\n              opacity={0.5}\n            />\n            {series.map((datum, i) => {\n              const barH = scaleLinear(datum.value, 0, max, 0, plotH);\n              const cx = plotLeft + slot * i + slot / 2;\n              const x = cx - barWidth / 2;\n              const y = plotBottom - barH;\n              const color = datum.color ?? (colorful ? palette[i] : ACCENT);\n              return (\n                <g key={`${datum.label}-${i}`}>\n                  <title>{`${datum.label}: ${valueFormatter(datum.value)}`}</title>\n                  <rect\n                    x={x}\n                    y={y}\n                    width={barWidth}\n                    height={Math.max(0, barH)}\n                    rx={4}\n                    fill={color}\n                    style={{\n                      transformBox: 'fill-box',\n                      transformOrigin: 'bottom',\n                      transform: mounted || reduced ? 'scaleY(1)' : 'scaleY(0)',\n                      transition: reduced\n                        ? undefined\n                        : 'transform 620ms cubic-bezier(0.22,1,0.36,1)',\n                      transitionDelay: reduced ? undefined : `${i * 45}ms`,\n                    }}\n                  />\n                  {hideValues ? null : (\n                    <text\n                      x={cx}\n                      y={y - 6}\n                      textAnchor=\"middle\"\n                      fontSize={10}\n                      fontWeight={600}\n                      fill=\"var(--color-text-secondary)\"\n                      style={{\n                        opacity: mounted || reduced ? 1 : 0,\n                        transition: reduced ? undefined : 'opacity 400ms ease',\n                        transitionDelay: reduced ? undefined : `${i * 45 + 220}ms`,\n                      }}\n                    >\n                      {valueFormatter(datum.value)}\n                    </text>\n                  )}\n                  <text\n                    x={cx}\n                    y={height - 8}\n                    textAnchor=\"middle\"\n                    fontSize={10}\n                    fill=\"var(--color-chart-axis)\"\n                  >\n                    {datum.label}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        );\n      }}\n    </ResponsiveSvg>\n  );\n}\n"],"mappings":";;;;;;;AAoBA,IAAM,IAAM;CAAE,KAAK;CAAI,QAAQ;CAAI,MAAM;CAAG,OAAO;CAAG;AAGtD,SAAgB,EAAS,EACvB,WACA,YAAS,KACT,oBAAiB,GACjB,cAAW,IACX,gBAAa,IACb,UACA,gBACgB;CAChB,IAAM,IAAU,GAAY,EACtB,IAAU,GAAyB;AAEzC,KAAI,EAAO,WAAW,EACpB,QAAO;CAGT,IAAM,IAAS,EAAO,KAAK,MAAM,EAAE,MAAM,EACnC,IAAM,KAAK,IAAI,GAAG,GAAQ,EAAE,IAAI,GAChC,IAAU,EAAa,EAAO,OAAO;AAG3C,QACE,kBAAC,GAAD;EACU;EACR,OALe,KAAS,gBAAgB,EAAO,OAAO;EAM3C;EACX,MAAM,EAAO,KAAK,MAAM,GAAG,EAAE,MAAM,IAAI,EAAe,EAAE,MAAM,GAAG,CAAC,KAAK,KAAK;aAE1E,EAAE,eAAY;GACd,IAAM,IAAW,EAAI,MACf,IAAY,IAAQ,EAAI,OACxB,IAAU,EAAI,KACd,IAAa,IAAS,EAAI,QAC1B,IAAQ,IAAa,GACrB,KAAQ,IAAY,KAAY,EAAO,QACvC,IAAW,KAAK,IAAI,IAAI,IAAO,IAAK;AAC1C,UACE,kBAAC,KAAD,EAAA,UAAA,CACE,kBAAC,QAAD;IACE,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,QAAO;IACP,aAAa;IACb,cAAa;IACb,SAAS;IACT,CAAA,EACD,EAAO,KAAK,GAAO,MAAM;IACxB,IAAM,IAAO,EAAY,EAAM,OAAO,GAAG,GAAK,GAAG,EAAM,EACjD,IAAK,IAAW,IAAO,IAAI,IAAO,GAClC,IAAI,IAAK,IAAW,GACpB,IAAI,IAAa,GACjB,IAAQ,EAAM,UAAU,IAAW,EAAQ,KAAA;AACjD,WACE,kBAAC,KAAD,EAAA,UAAA;KACE,kBAAC,SAAD,EAAA,UAAQ,GAAG,EAAM,MAAM,IAAI,EAAe,EAAM,MAAM,IAAW,CAAA;KACjE,kBAAC,QAAD;MACK;MACA;MACH,OAAO;MACP,QAAQ,KAAK,IAAI,GAAG,EAAK;MACzB,IAAI;MACJ,MAAM;MACN,OAAO;OACL,cAAc;OACd,iBAAiB;OACjB,WAAW,KAAW,IAAU,cAAc;OAC9C,YAAY,IACR,KAAA,IACA;OACJ,iBAAiB,IAAU,KAAA,IAAY,GAAG,IAAI,GAAG;OAClD;MACD,CAAA;KACD,IAAa,OACZ,kBAAC,QAAD;MACE,GAAG;MACH,GAAG,IAAI;MACP,YAAW;MACX,UAAU;MACV,YAAY;MACZ,MAAK;MACL,OAAO;OACL,SAAS,KAAW,IAAU,IAAI;OAClC,YAAY,IAAU,KAAA,IAAY;OAClC,iBAAiB,IAAU,KAAA,IAAY,GAAG,IAAI,KAAK,IAAI;OACxD;gBAEA,EAAe,EAAM,MAAM;MACvB,CAAA;KAET,kBAAC,QAAD;MACE,GAAG;MACH,GAAG,IAAS;MACZ,YAAW;MACX,UAAU;MACV,MAAK;gBAEJ,EAAM;MACF,CAAA;KACL,EAAA,EA7CI,GAAG,EAAM,MAAM,GAAG,IA6CtB;KAEN,CACA,EAAA,CAAA;;EAGM,CAAA"}