@burdenoff/microfe-timecampus 2026.703.4 → 2026.703.5

package/dist/timecampus/components/charts/Heatmap.js

@@ -0,0 +1,111 @@
+import { chartTokens as e, formatNumber as t, renderValue as n } from "./chartTheme.js";
+import { ChartEmpty as r, ChartFigure as i, srOnlyStyle as a } from "./ChartParts.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/timecampus/components/charts/Heatmap.tsx
+var l = (e) => Math.min(1, Math.max(0, e));
+function u(t) {
+	if (t < 0 || t === 0) return e.track;
+	let n = Math.max(8, Math.round(l(t) * 100));
+	return `color-mix(in oklab, ${e.brand} ${n}%, ${e.track})`;
+}
+var d = [
+	0,
+	.25,
+	.5,
+	.75,
+	1
+];
+function f({ data: e, rowLabels: l, columnLabels: f, max: m, rowsLabel: h = "Row", valueFormat: g = t, legendLabels: _ = ["Less", "More"], showLegend: v = !0, height: y = 260, emptyLabel: b, ariaLabel: x, className: S }) {
+	let C = l.length, w = f.length, T = (t, n) => {
+		let r = e[t]?.[n];
+		return typeof r == "number" && Number.isFinite(r) ? r : null;
+	}, E = m ?? 0;
+	if (m === void 0) for (let e = 0; e < C; e += 1) for (let t = 0; t < w; t += 1) {
+		let n = T(e, t);
+		n !== null && n > E && (E = n);
+	}
+	let D = x ?? `Heatmap of ${l.join(", ")} by ${f.join(", ")}`;
+	if (C === 0 || w === 0 || E <= 0) return /* @__PURE__ */ s(r, {
+		height: y,
+		label: b,
+		className: S
+	});
+	let O = (e) => e === null ? -1 : e / E, k = `auto repeat(${w}, minmax(1.5rem, 1fr))`, A = `auto repeat(${C}, minmax(1.25rem, 1fr))`;
+	return /* @__PURE__ */ s(i, {
+		ariaLabel: D,
+		height: y,
+		className: S,
+		a11y: /* @__PURE__ */ c(o, { children: [v ? /* @__PURE__ */ c("div", {
+			className: "mt-3 flex items-center justify-end gap-1.5 text-xs text-text-secondary",
+			children: [
+				/* @__PURE__ */ s("span", { children: _[0] }),
+				d.map((e) => /* @__PURE__ */ s("span", {
+					"aria-hidden": "true",
+					className: "h-2.5 w-2.5 rounded-[3px]",
+					style: { backgroundColor: u(e) }
+				}, e)),
+				/* @__PURE__ */ s("span", { children: _[1] })
+			]
+		}) : null, /* @__PURE__ */ c("table", {
+			style: a,
+			children: [
+				/* @__PURE__ */ s("caption", { children: D }),
+				/* @__PURE__ */ s("thead", { children: /* @__PURE__ */ c("tr", { children: [/* @__PURE__ */ s("th", {
+					scope: "col",
+					children: h
+				}), f.map((e, t) => /* @__PURE__ */ s("th", {
+					scope: "col",
+					children: e
+				}, `${e}-${t}`))] }) }),
+				/* @__PURE__ */ s("tbody", { children: l.map((e, t) => /* @__PURE__ */ c("tr", { children: [/* @__PURE__ */ s("th", {
+					scope: "row",
+					children: e
+				}), f.map((e, r) => /* @__PURE__ */ s("td", { children: n(T(t, r), g) }, `${e}-${r}`))] }, `${e}-${t}`)) })
+			]
+		})] }),
+		children: /* @__PURE__ */ s("div", {
+			className: "h-full w-full overflow-x-auto",
+			children: /* @__PURE__ */ c("div", {
+				className: "grid h-full min-w-full gap-1",
+				style: {
+					gridTemplateColumns: k,
+					gridTemplateRows: A
+				},
+				children: [
+					/* @__PURE__ */ s("span", { "aria-hidden": "true" }),
+					f.map((e, t) => /* @__PURE__ */ s("span", {
+						className: "truncate px-0.5 text-center text-[10px] leading-none text-text-muted",
+						children: e
+					}, `col-${e}-${t}`)),
+					l.map((e, t) => /* @__PURE__ */ s(p, {
+						rowLabel: e,
+						cells: f.map((r, i) => {
+							let a = T(t, i);
+							return {
+								key: `${r}-${i}`,
+								value: a,
+								intensity: O(a),
+								title: `${e} · ${r}: ${n(a, g)}`
+							};
+						})
+					}, `row-${e}-${t}`))
+				]
+			})
+		})
+	});
+}
+function p({ rowLabel: e, cells: t }) {
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
+		className: "flex items-center justify-end pr-1.5 text-[10px] leading-none text-text-muted",
+		children: e
+	}), t.map((e) => /* @__PURE__ */ s("div", {
+		title: e.title,
+		"aria-hidden": "true",
+		className: "min-h-0 min-w-0 rounded-[3px] motion-safe:transition-colors",
+		style: { backgroundColor: u(e.intensity) }
+	}, e.key))] });
+}
+//#endregion
+export { f as Heatmap };
+
+//# sourceMappingURL=Heatmap.js.map

package/dist/timecampus/components/charts/Heatmap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heatmap.js","names":[],"sources":["../../../../src/timecampus/components/charts/Heatmap.tsx"],"sourcesContent":["import {\n  chartTokens,\n  formatNumber,\n  renderValue,\n  type ValueFormatter,\n} from \"./chartTheme\";\nimport { ChartEmpty, ChartFigure, srOnlyStyle } from \"./ChartParts\";\n\n/** A single heatmap value: a number, or `null`/`undefined` for a no-data cell. */\nexport type HeatmapValue = number | null | undefined;\n\nexport interface HeatmapProps {\n  /**\n   * Row-major matrix of values — one inner array per row (e.g. day), each entry\n   * a column (e.g. hour or bucket). Ragged rows are tolerated: missing entries\n   * read as no-data cells. `null`/`undefined` render as an empty track cell.\n   */\n  data: HeatmapValue[][];\n  /** Row labels, top → bottom (e.g. `['Mon', … 'Sun']`). Drives the row count. */\n  rowLabels: string[];\n  /** Column labels, left → right (e.g. hours or buckets). Drives the column count. */\n  columnLabels: string[];\n  /**\n   * Value mapped to full intensity. Defaults to the largest finite value in\n   * `data`. Cells scale linearly from the track (0) to the brand token (`max`).\n   */\n  max?: number;\n  /** Header for the row axis — used in the sr-only table's corner cell. Default `Row`. */\n  rowsLabel?: string;\n  /** Formats a cell value in the native tooltip + sr-only table. Default grouped integer. */\n  valueFormat?: ValueFormatter;\n  /** Low → high captions bracketing the intensity legend. Default `['Less', 'More']`. */\n  legendLabels?: [string, string];\n  /** Show the intensity legend under the grid. Default true. */\n  showLegend?: boolean;\n  /** Pixel height of the grid area. Cells size to the grid — never fixed px. Default 260. */\n  height?: number;\n  /** Message shown when there is nothing to plot. */\n  emptyLabel?: string;\n  /** Accessible name for the figure. Default derived from the axis labels. */\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst clamp01 = (value: number): number => Math.min(1, Math.max(0, value));\n\n/**\n * Blend the brand token into the sunken track by `intensity` (0–1) using\n * `color-mix` — both operands are live design-system tokens, so the ramp is\n * theme-aware and never a raw colour. A no-data cell (`intensity < 0`) stays on\n * the bare track; any positive value gets a visible floor so faint counts read.\n */\nfunction cellBackground(intensity: number): string {\n  if (intensity < 0 || intensity === 0) return chartTokens.track;\n  const pct = Math.max(8, Math.round(clamp01(intensity) * 100));\n  return `color-mix(in oklab, ${chartTokens.brand} ${pct}%, ${chartTokens.track})`;\n}\n\nconst LEGEND_STOPS = [0, 0.25, 0.5, 0.75, 1] as const;\n\n/**\n * Heatmap — a token-only matrix of intensity cells (e.g. activity by day × hour\n * for the Work Patterns page). Cell colour blends the brand token into the\n * sunken track by value, so it recolours with the theme and never carries a raw\n * colour. Cells are sized entirely by CSS grid (no fixed px) and the grid scrolls\n * horizontally when there are many columns. Ships a legend, a native per-cell\n * tooltip, an empty state and a screen-reader data table, wrapped in a\n * `ChartFigure` for a single accessible name — matching the other primitives.\n */\nexport function Heatmap({\n  data,\n  rowLabels,\n  columnLabels,\n  max,\n  rowsLabel = \"Row\",\n  valueFormat = formatNumber,\n  legendLabels = [\"Less\", \"More\"],\n  showLegend = true,\n  height = 260,\n  emptyLabel,\n  ariaLabel,\n  className,\n}: HeatmapProps) {\n  const rows = rowLabels.length;\n  const cols = columnLabels.length;\n\n  const valueAt = (r: number, c: number): number | null => {\n    const cell = data[r]?.[c];\n    return typeof cell === \"number\" && Number.isFinite(cell) ? cell : null;\n  };\n\n  let resolvedMax = max ?? 0;\n  if (max === undefined) {\n    for (let r = 0; r < rows; r += 1) {\n      for (let c = 0; c < cols; c += 1) {\n        const value = valueAt(r, c);\n        if (value !== null && value > resolvedMax) resolvedMax = value;\n      }\n    }\n  }\n\n  const label =\n    ariaLabel ??\n    `Heatmap of ${rowLabels.join(\", \")} by ${columnLabels.join(\", \")}`;\n\n  if (rows === 0 || cols === 0 || resolvedMax <= 0) {\n    return (\n      <ChartEmpty height={height} label={emptyLabel} className={className} />\n    );\n  }\n\n  const intensityOf = (value: number | null): number =>\n    value === null ? -1 : value / resolvedMax;\n\n  const gridTemplateColumns = `auto repeat(${cols}, minmax(1.5rem, 1fr))`;\n  const gridTemplateRows = `auto repeat(${rows}, minmax(1.25rem, 1fr))`;\n\n  const a11y = (\n    <>\n      {showLegend ? (\n        <div className=\"mt-3 flex items-center justify-end gap-1.5 text-xs text-text-secondary\">\n          <span>{legendLabels[0]}</span>\n          {LEGEND_STOPS.map((stop) => (\n            <span\n              key={stop}\n              aria-hidden=\"true\"\n              className=\"h-2.5 w-2.5 rounded-[3px]\"\n              style={{ backgroundColor: cellBackground(stop) }}\n            />\n          ))}\n          <span>{legendLabels[1]}</span>\n        </div>\n      ) : null}\n\n      <table style={srOnlyStyle}>\n        <caption>{label}</caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{rowsLabel}</th>\n            {columnLabels.map((columnLabel, c) => (\n              <th scope=\"col\" key={`${columnLabel}-${c}`}>\n                {columnLabel}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rowLabels.map((rowLabel, r) => (\n            <tr key={`${rowLabel}-${r}`}>\n              <th scope=\"row\">{rowLabel}</th>\n              {columnLabels.map((columnLabel, c) => (\n                <td key={`${columnLabel}-${c}`}>\n                  {renderValue(valueAt(r, c), valueFormat)}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </>\n  );\n\n  return (\n    <ChartFigure\n      ariaLabel={label}\n      height={height}\n      className={className}\n      a11y={a11y}\n    >\n      <div className=\"h-full w-full overflow-x-auto\">\n        <div\n          className=\"grid h-full min-w-full gap-1\"\n          style={{ gridTemplateColumns, gridTemplateRows }}\n        >\n          {/* Header row: empty corner + column labels. */}\n          <span aria-hidden=\"true\" />\n          {columnLabels.map((columnLabel, c) => (\n            <span\n              key={`col-${columnLabel}-${c}`}\n              className=\"truncate px-0.5 text-center text-[10px] leading-none text-text-muted\"\n            >\n              {columnLabel}\n            </span>\n          ))}\n\n          {/* Body rows: row label + its cells. */}\n          {rowLabels.map((rowLabel, r) => (\n            <FragmentRow\n              key={`row-${rowLabel}-${r}`}\n              rowLabel={rowLabel}\n              cells={columnLabels.map((columnLabel, c) => {\n                const value = valueAt(r, c);\n                return {\n                  key: `${columnLabel}-${c}`,\n                  value,\n                  intensity: intensityOf(value),\n                  title: `${rowLabel} · ${columnLabel}: ${renderValue(value, valueFormat)}`,\n                };\n              })}\n            />\n          ))}\n        </div>\n      </div>\n    </ChartFigure>\n  );\n}\n\ninterface HeatmapRowCell {\n  key: string;\n  value: number | null;\n  intensity: number;\n  title: string;\n}\n\ninterface FragmentRowProps {\n  rowLabel: string;\n  cells: HeatmapRowCell[];\n}\n\n/** One grid row: a right-aligned row label followed by its intensity cells. */\nfunction FragmentRow({ rowLabel, cells }: FragmentRowProps) {\n  return (\n    <>\n      <span className=\"flex items-center justify-end pr-1.5 text-[10px] leading-none text-text-muted\">\n        {rowLabel}\n      </span>\n      {cells.map((cell) => (\n        <div\n          key={cell.key}\n          title={cell.title}\n          aria-hidden=\"true\"\n          className=\"min-h-0 min-w-0 rounded-[3px] motion-safe:transition-colors\"\n          style={{ backgroundColor: cellBackground(cell.intensity) }}\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/timecampus/components/charts/ProgressMeter.js

@@ -0,0 +1,49 @@
+import { cn as e } from "../../utils/helpers.js";
+import { toneColor as t } from "./chartTheme.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/timecampus/components/charts/ProgressMeter.tsx
+var i = {
+	sm: "h-1.5",
+	md: "h-2.5",
+	lg: "h-3.5"
+}, a = (e) => e.toLocaleString();
+function o({ value: o, max: s = 100, label: c, thresholds: l = {
+	warning: .75,
+	danger: .9
+}, higherIsWorse: u = !0, tone: d, showValue: f = !0, format: p = a, size: m = "md", className: h }) {
+	let g = Math.min(1, Math.max(0, o / (s > 0 ? s : 1))), _ = Math.round(g * 100), v = t(d ?? (u ? g >= l.danger ? "danger" : g >= l.warning ? "warning" : "success" : g >= l.warning ? "success" : g >= l.danger ? "warning" : "danger"));
+	return /* @__PURE__ */ r("div", {
+		className: e("w-full", h),
+		children: [c !== void 0 || f ? /* @__PURE__ */ r("div", {
+			className: "mb-1.5 flex items-center justify-between gap-3 text-sm",
+			children: [c === void 0 ? /* @__PURE__ */ n("span", {}) : /* @__PURE__ */ n("span", {
+				className: "min-w-0 truncate font-medium text-text-primary",
+				children: c
+			}), f ? /* @__PURE__ */ r("span", {
+				className: "shrink-0 tabular-nums text-text-secondary",
+				children: [p(o), /* @__PURE__ */ r("span", {
+					className: "text-text-muted",
+					children: [" / ", p(s)]
+				})]
+			}) : null]
+		}) : null, /* @__PURE__ */ n("div", {
+			className: e("w-full overflow-hidden rounded-full bg-bg-sunken", i[m]),
+			role: "progressbar",
+			"aria-valuenow": o,
+			"aria-valuemin": 0,
+			"aria-valuemax": s,
+			"aria-label": typeof c == "string" ? c : void 0,
+			children: /* @__PURE__ */ n("div", {
+				className: "h-full rounded-full motion-safe:transition-[width] motion-safe:duration-500",
+				style: {
+					width: `${_}%`,
+					backgroundColor: v
+				}
+			})
+		})]
+	});
+}
+//#endregion
+export { o as ProgressMeter };
+
+//# sourceMappingURL=ProgressMeter.js.map

package/dist/timecampus/components/charts/ProgressMeter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressMeter.js","names":[],"sources":["../../../../src/timecampus/components/charts/ProgressMeter.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/helpers\";\nimport { toneColor, type MeterTone, type ValueFormatter } from \"./chartTheme\";\n\nexport interface ProgressMeterProps {\n  /** Current value. */\n  value: number;\n  /** Full-scale value. Default 100. */\n  max?: number;\n  /** Leading caption (e.g. \"Seats used\", \"Budget spent\"). */\n  label?: ReactNode;\n  /**\n   * Severity thresholds as fractions of `max` (0–1). With the default\n   * `higherIsWorse` a fraction ≥ `danger` turns the fill red, ≥ `warning` amber.\n   * Default `{ warning: 0.75, danger: 0.9 }`.\n   */\n  thresholds?: { warning: number; danger: number };\n  /** Whether a fuller meter is worse (usage/budget, default) or better (progress). */\n  higherIsWorse?: boolean;\n  /** Force a tone, bypassing thresholds. */\n  tone?: MeterTone;\n  /** Show the `value / max` readout on the right of the label row. Default true. */\n  showValue?: boolean;\n  /** Formats the value + max readout. Default grouped integer. */\n  format?: ValueFormatter;\n  /** Bar thickness. Default `md`. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\nconst TRACK_HEIGHT: Record<NonNullable<ProgressMeterProps[\"size\"]>, string> = {\n  sm: \"h-1.5\",\n  md: \"h-2.5\",\n  lg: \"h-3.5\",\n};\n\nconst defaultFormat: ValueFormatter = (value) => value.toLocaleString();\n\n/**\n * ProgressMeter — a linear meter for a single ratio (seat usage, budget spent,\n * progress to target). The fill carries severity (good → warning → danger) via\n * reserved status tokens over a muted track; the width transition is gated\n * behind `motion-safe` so reduced-motion users get an instant fill. Token-only,\n * no raw colour.\n */\nexport function ProgressMeter({\n  value,\n  max = 100,\n  label,\n  thresholds = { warning: 0.75, danger: 0.9 },\n  higherIsWorse = true,\n  tone,\n  showValue = true,\n  format = defaultFormat,\n  size = \"md\",\n  className,\n}: ProgressMeterProps) {\n  const safeMax = max > 0 ? max : 1;\n  const fraction = Math.min(1, Math.max(0, value / safeMax));\n  const pct = Math.round(fraction * 100);\n\n  const resolvedTone: MeterTone =\n    tone ??\n    (higherIsWorse\n      ? fraction >= thresholds.danger\n        ? \"danger\"\n        : fraction >= thresholds.warning\n          ? \"warning\"\n          : \"success\"\n      : fraction >= thresholds.warning\n        ? \"success\"\n        : fraction >= thresholds.danger\n          ? \"warning\"\n          : \"danger\");\n\n  const fillColor = toneColor(resolvedTone);\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      {label !== undefined || showValue ? (\n        <div className=\"mb-1.5 flex items-center justify-between gap-3 text-sm\">\n          {label !== undefined ? (\n            <span className=\"min-w-0 truncate font-medium text-text-primary\">\n              {label}\n            </span>\n          ) : (\n            <span />\n          )}\n          {showValue ? (\n            <span className=\"shrink-0 tabular-nums text-text-secondary\">\n              {format(value)}\n              <span className=\"text-text-muted\"> / {format(max)}</span>\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n\n      <div\n        className={cn(\n          \"w-full overflow-hidden rounded-full bg-bg-sunken\",\n          TRACK_HEIGHT[size],\n        )}\n        role=\"progressbar\"\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-label={typeof label === \"string\" ? label : undefined}\n      >\n        <div\n          className=\"h-full rounded-full motion-safe:transition-[width] motion-safe:duration-500\"\n          style={{ width: `${pct}%`, backgroundColor: fillColor }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AA8BA,IAAM,IAAwE;CAC5E,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,KAAiC,MAAU,EAAM,gBAAgB;AASvE,SAAgB,EAAc,EAC5B,UACA,SAAM,KACN,UACA,gBAAa;CAAE,SAAS;CAAM,QAAQ;CAAK,EAC3C,mBAAgB,IAChB,SACA,eAAY,IACZ,YAAS,GACT,UAAO,MACP,gBACqB;CAErB,IAAM,IAAW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KADzB,IAAM,IAAI,IAAM,GACyB,CAAC,EACpD,IAAM,KAAK,MAAM,IAAW,IAAI,EAgBhC,IAAY,EAbhB,MACC,IACG,KAAY,EAAW,SACrB,WACA,KAAY,EAAW,UACrB,YACA,YACJ,KAAY,EAAW,UACrB,YACA,KAAY,EAAW,SACrB,YACA,UAE+B;AAEzC,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,UAAU,EAAU;YAAvC,CACG,MAAU,KAAA,KAAa,IACtB,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,MAAU,KAAA,IAKT,kBAAC,QAAD,EAAQ,CAAA,GAJR,kBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,EAIR,IACC,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAO,EAAM,EACd,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAAkC,OAAI,EAAO,EAAI,CAAQ;OACpD;QACL,KACA;OACJ,MAEJ,kBAAC,OAAD;GACE,WAAW,EACT,oDACA,EAAa,GACd;GACD,MAAK;GACL,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,cAAY,OAAO,KAAU,WAAW,IAAQ,KAAA;aAEhD,kBAAC,OAAD;IACE,WAAU;IACV,OAAO;KAAE,OAAO,GAAG,EAAI;KAAI,iBAAiB;KAAW;IACvD,CAAA;GACE,CAAA,CACF"}

package/dist/timecampus/components/charts/RadialGauge.js

@@ -0,0 +1,66 @@
+import { cn as e } from "../../utils/helpers.js";
+import { ResponsiveContainer as t } from "../../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { PolarAngleAxis as n } from "../../../node_modules/recharts/es6/polar/PolarAngleAxis.js";
+import { RadialBar as r } from "../../../node_modules/recharts/es6/polar/RadialBar.js";
+import { RadialBarChart as i } from "../../../node_modules/recharts/es6/chart/RadialBarChart.js";
+import { chartTokens as a, toneColor as o, usePrefersReducedMotion as s } from "./chartTheme.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/timecampus/components/charts/RadialGauge.tsx
+var u = (e, t, n) => Math.min(n, Math.max(t, e));
+function d({ value: d, min: f = 0, max: p = 100, label: m, sublabel: h, thresholds: g, higherIsBetter: _ = !0, tone: v, color: y, height: b = 200, format: x = (e) => Math.round(e).toString(), ariaLabel: S, className: C }) {
+	let w = s(), T = p - f || 1, E = u(d, f, p), D = g?.warning ?? (_ ? f + T * .8 : f + T * .5), O = g?.danger ?? (_ ? f + T * .5 : f + T * .8), k = y ?? o(v ?? (_ ? d >= D ? "success" : d >= O ? "warning" : "danger" : d <= D ? "success" : d <= O ? "warning" : "danger")), A = [{
+		name: m ?? "value",
+		value: E
+	}];
+	return /* @__PURE__ */ l("figure", {
+		role: "img",
+		"aria-label": S ?? `${m ? `${m}: ` : ""}${x(d)}`,
+		className: e("relative w-full", C),
+		style: { height: b },
+		children: [/* @__PURE__ */ c(t, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ l(i, {
+				data: A,
+				innerRadius: "72%",
+				outerRadius: "100%",
+				barSize: 14,
+				startAngle: 225,
+				endAngle: -45,
+				children: [/* @__PURE__ */ c(n, {
+					type: "number",
+					domain: [f, p],
+					angleAxisId: 0,
+					tick: !1
+				}), /* @__PURE__ */ c(r, {
+					dataKey: "value",
+					angleAxisId: 0,
+					background: { fill: a.track },
+					cornerRadius: 999,
+					fill: k,
+					isAnimationActive: !w
+				})]
+			})
+		}), /* @__PURE__ */ l("div", {
+			className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+			children: [
+				/* @__PURE__ */ c("span", {
+					className: "text-3xl font-bold leading-none text-text-primary",
+					children: x(d)
+				}),
+				m ? /* @__PURE__ */ c("span", {
+					className: "mt-1 text-sm font-medium text-text-secondary",
+					children: m
+				}) : null,
+				h ? /* @__PURE__ */ c("span", {
+					className: "text-xs text-text-muted",
+					children: h
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { d as RadialGauge };
+
+//# sourceMappingURL=RadialGauge.js.map

package/dist/timecampus/components/charts/RadialGauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGauge.js","names":[],"sources":["../../../../src/timecampus/components/charts/RadialGauge.tsx"],"sourcesContent":["import {\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  ResponsiveContainer,\n} from \"recharts\";\nimport { cn } from \"../../utils/helpers\";\nimport {\n  chartTokens,\n  toneColor,\n  usePrefersReducedMotion,\n  type MeterTone,\n  type ValueFormatter,\n} from \"./chartTheme\";\n\nexport interface RadialGaugeProps {\n  /** The measured value. */\n  value: number;\n  /** Scale minimum. Default 0. */\n  min?: number;\n  /** Scale maximum. Default 100. */\n  max?: number;\n  /** Big centre caption (e.g. \"Compliance\"). */\n  label?: string;\n  /** Small caption under the value. */\n  sublabel?: string;\n  /**\n   * Severity thresholds in value units. With `higherIsBetter` (default) pass\n   * `warning > danger` (e.g. `{ warning: 80, danger: 50 }` → ≥80 good, 50–79\n   * warning, <50 danger). Defaults derive from the range.\n   */\n  thresholds?: { warning: number; danger: number };\n  /** Whether a higher value is better (compliance/health) or worse (risk). Default true. */\n  higherIsBetter?: boolean;\n  /** Force a tone, bypassing threshold logic. */\n  tone?: MeterTone;\n  /** Force an explicit colour, bypassing tone + thresholds. */\n  color?: string;\n  /** Pixel height. Default 200. */\n  height?: number;\n  /** Formats the centre value. Default rounds to an integer. */\n  format?: ValueFormatter;\n  /** Accessible name. Default derived from label + value. */\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst clamp = (value: number, min: number, max: number): number =>\n  Math.min(max, Math.max(min, value));\n\n/**\n * RadialGauge — a single value on a 270° arc (compliance score, asset health,\n * risk). The arc colour follows severity thresholds (good → warning → danger)\n * using reserved status tokens, over a muted track. Center shows the value and\n * label; respects `prefers-reduced-motion`.\n */\nexport function RadialGauge({\n  value,\n  min = 0,\n  max = 100,\n  label,\n  sublabel,\n  thresholds,\n  higherIsBetter = true,\n  tone,\n  color,\n  height = 200,\n  format = (v) => Math.round(v).toString(),\n  ariaLabel,\n  className,\n}: RadialGaugeProps) {\n  const reducedMotion = usePrefersReducedMotion();\n  const range = max - min || 1;\n  const clamped = clamp(value, min, max);\n\n  const warning =\n    thresholds?.warning ??\n    (higherIsBetter ? min + range * 0.8 : min + range * 0.5);\n  const danger =\n    thresholds?.danger ??\n    (higherIsBetter ? min + range * 0.5 : min + range * 0.8);\n\n  const resolvedTone: MeterTone =\n    tone ??\n    (higherIsBetter\n      ? value >= warning\n        ? \"success\"\n        : value >= danger\n          ? \"warning\"\n          : \"danger\"\n      : value <= warning\n        ? \"success\"\n        : value <= danger\n          ? \"warning\"\n          : \"danger\");\n\n  const arcColor = color ?? toneColor(resolvedTone);\n  const data = [{ name: label ?? \"value\", value: clamped }];\n  const accessibleName =\n    ariaLabel ?? `${label ? `${label}: ` : \"\"}${format(value)}`;\n\n  return (\n    <figure\n      role=\"img\"\n      aria-label={accessibleName}\n      className={cn(\"relative w-full\", className)}\n      style={{ height }}\n    >\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RadialBarChart\n          data={data}\n          innerRadius=\"72%\"\n          outerRadius=\"100%\"\n          barSize={14}\n          startAngle={225}\n          endAngle={-45}\n        >\n          <PolarAngleAxis\n            type=\"number\"\n            domain={[min, max]}\n            angleAxisId={0}\n            tick={false}\n          />\n          <RadialBar\n            dataKey=\"value\"\n            angleAxisId={0}\n            background={{ fill: chartTokens.track }}\n            cornerRadius={999}\n            fill={arcColor}\n            isAnimationActive={!reducedMotion}\n          />\n        </RadialBarChart>\n      </ResponsiveContainer>\n\n      <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\">\n        <span className=\"text-3xl font-bold leading-none text-text-primary\">\n          {format(value)}\n        </span>\n        {label ? (\n          <span className=\"mt-1 text-sm font-medium text-text-secondary\">\n            {label}\n          </span>\n        ) : null}\n        {sublabel ? (\n          <span className=\"text-xs text-text-muted\">{sublabel}</span>\n        ) : null}\n      </div>\n    </figure>\n  );\n}\n"],"mappings":";;;;;;;;AA+CA,IAAM,KAAS,GAAe,GAAa,MACzC,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC;AAQrC,SAAgB,EAAY,EAC1B,UACA,SAAM,GACN,SAAM,KACN,UACA,aACA,eACA,oBAAiB,IACjB,SACA,UACA,YAAS,KACT,aAAU,MAAM,KAAK,MAAM,EAAE,CAAC,UAAU,EACxC,cACA,gBACmB;CACnB,IAAM,IAAgB,GAAyB,EACzC,IAAQ,IAAM,KAAO,GACrB,IAAU,EAAM,GAAO,GAAK,EAAI,EAEhC,IACJ,GAAY,YACX,IAAiB,IAAM,IAAQ,KAAM,IAAM,IAAQ,KAChD,IACJ,GAAY,WACX,IAAiB,IAAM,IAAQ,KAAM,IAAM,IAAQ,KAgBhD,IAAW,KAAS,EAbxB,MACC,IACG,KAAS,IACP,YACA,KAAS,IACP,YACA,WACJ,KAAS,IACP,YACA,KAAS,IACP,YACA,UAEuC,EAC3C,IAAO,CAAC;EAAE,MAAM,KAAS;EAAS,OAAO;EAAS,CAAC;AAIzD,QACE,kBAAC,UAAD;EACE,MAAK;EACL,cALF,KAAa,GAAG,IAAQ,GAAG,EAAM,MAAM,KAAK,EAAO,EAAM;EAMvD,WAAW,EAAG,mBAAmB,EAAU;EAC3C,OAAO,EAAE,WAAQ;YAJnB,CAME,kBAAC,GAAD;GAAqB,OAAM;GAAO,QAAO;aACvC,kBAAC,GAAD;IACQ;IACN,aAAY;IACZ,aAAY;IACZ,SAAS;IACT,YAAY;IACZ,UAAU;cANZ,CAQE,kBAAC,GAAD;KACE,MAAK;KACL,QAAQ,CAAC,GAAK,EAAI;KAClB,aAAa;KACb,MAAM;KACN,CAAA,EACF,kBAAC,GAAD;KACE,SAAQ;KACR,aAAa;KACb,YAAY,EAAE,MAAM,EAAY,OAAO;KACvC,cAAc;KACd,MAAM;KACN,mBAAmB,CAAC;KACpB,CAAA,CACa;;GACG,CAAA,EAEtB,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAO,EAAM;KACT,CAAA;IACN,IACC,kBAAC,QAAD;KAAM,WAAU;eACb;KACI,CAAA,GACL;IACH,IACC,kBAAC,QAAD;KAAM,WAAU;eAA2B;KAAgB,CAAA,GACzD;IACA;KACC"}

package/dist/timecampus/components/charts/Sparkline.js

@@ -0,0 +1,3 @@
+import "./chartTheme.js";
+import "react";
+import "react/jsx-runtime";

package/dist/timecampus/components/charts/TrendChart.js

@@ -0,0 +1,161 @@
+import { Legend as e } from "../../../node_modules/recharts/es6/component/Legend.js";
+import { Tooltip as t } from "../../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as n } from "../../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { ReferenceDot as r } from "../../../node_modules/recharts/es6/cartesian/ReferenceDot.js";
+import { CartesianGrid as i } from "../../../node_modules/recharts/es6/cartesian/CartesianGrid.js";
+import { Line as a } from "../../../node_modules/recharts/es6/cartesian/Line.js";
+import { Area as o } from "../../../node_modules/recharts/es6/cartesian/Area.js";
+import { XAxis as s } from "../../../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as c } from "../../../node_modules/recharts/es6/cartesian/YAxis.js";
+import { LineChart as l } from "../../../node_modules/recharts/es6/chart/LineChart.js";
+import { AreaChart as u } from "../../../node_modules/recharts/es6/chart/AreaChart.js";
+import { chartTokens as d, defaultSeriesColor as f, formatNumber as p, usePrefersReducedMotion as m } from "./chartTheme.js";
+import { ChartDataTable as h, ChartEmpty as g, ChartFigure as _, ChartLegend as v, ChartTooltip as y } from "./ChartParts.js";
+import { useId as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/timecampus/components/charts/TrendChart.tsx
+function C({ data: C, xKey: w, series: T, type: E = "area", height: D = 260, valueFormat: O = p, xTickFormat: k, showGrid: A = !0, showLegend: j, showEndDots: M = !0, emptyLabel: N, ariaLabel: P, className: F }) {
+	let I = b(), L = m(), R = T.map((e, t) => ({
+		...e,
+		label: e.label ?? e.key,
+		color: e.color ?? f(t, T.length)
+	})), z = P ?? `Trend of ${R.map((e) => e.label).join(", ")}`;
+	if (C.length === 0) return /* @__PURE__ */ x(g, {
+		height: D,
+		label: N,
+		className: F
+	});
+	let B = j ?? R.length > 1, V = {
+		fill: d.textMuted,
+		fontSize: 12
+	}, H = (e) => {
+		for (let t = C.length - 1; t >= 0; --t) {
+			let n = C[t][e];
+			if (typeof n == "number" && Number.isFinite(n)) return t;
+		}
+		return -1;
+	};
+	return /* @__PURE__ */ x(_, {
+		ariaLabel: z,
+		height: D,
+		className: F,
+		a11y: /* @__PURE__ */ x(h, {
+			caption: z,
+			xLabel: w,
+			xKey: w,
+			data: C,
+			series: R,
+			valueFormat: O
+		}),
+		children: /* @__PURE__ */ x(n, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ S(E === "area" ? u : l, {
+				data: C,
+				margin: {
+					top: 12,
+					right: 16,
+					bottom: 4,
+					left: 4
+				},
+				children: [
+					/* @__PURE__ */ x("defs", { children: R.map((e, t) => /* @__PURE__ */ S("linearGradient", {
+						id: `${I}-${t}`,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ x("stop", {
+							offset: "0%",
+							stopColor: e.color,
+							stopOpacity: .24
+						}), /* @__PURE__ */ x("stop", {
+							offset: "95%",
+							stopColor: e.color,
+							stopOpacity: .02
+						})]
+					}, e.key)) }),
+					A ? /* @__PURE__ */ x(i, {
+						vertical: !1,
+						stroke: d.grid,
+						strokeWidth: 1
+					}) : null,
+					/* @__PURE__ */ x(s, {
+						dataKey: w,
+						tickLine: !1,
+						axisLine: !1,
+						tick: V,
+						tickMargin: 8,
+						minTickGap: 16,
+						tickFormatter: k ? (e) => k(e) : void 0
+					}),
+					/* @__PURE__ */ x(c, {
+						tickLine: !1,
+						axisLine: !1,
+						tick: V,
+						width: 48,
+						tickFormatter: (e) => O(Number(e))
+					}),
+					/* @__PURE__ */ x(t, {
+						cursor: {
+							stroke: d.axis,
+							strokeWidth: 1
+						},
+						content: /* @__PURE__ */ x(y, {
+							valueFormat: O,
+							labelFormat: k,
+							hideLabel: !1
+						})
+					}),
+					B ? /* @__PURE__ */ x(e, { content: /* @__PURE__ */ x(v, {}) }) : null,
+					R.map((e, t) => E === "area" ? /* @__PURE__ */ x(o, {
+						type: "monotone",
+						dataKey: e.key,
+						name: e.label,
+						stroke: e.color,
+						strokeWidth: 2,
+						fill: `url(#${I}-${t})`,
+						isAnimationActive: !L,
+						dot: !1,
+						activeDot: {
+							r: 4,
+							strokeWidth: 2,
+							stroke: d.surface,
+							fill: e.color
+						}
+					}, e.key) : /* @__PURE__ */ x(a, {
+						type: "monotone",
+						dataKey: e.key,
+						name: e.label,
+						stroke: e.color,
+						strokeWidth: 2,
+						isAnimationActive: !L,
+						dot: !1,
+						activeDot: {
+							r: 4,
+							strokeWidth: 2,
+							stroke: d.surface,
+							fill: e.color
+						}
+					}, e.key)),
+					M ? R.map((e) => {
+						let t = H(e.key);
+						return t < 0 ? null : /* @__PURE__ */ x(r, {
+							x: C[t][w],
+							y: C[t][e.key],
+							r: 4,
+							fill: e.color,
+							stroke: d.surface,
+							strokeWidth: 2,
+							isFront: !0
+						}, `end-${e.key}`);
+					}) : null
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { C as TrendChart };
+
+//# sourceMappingURL=TrendChart.js.map

package/dist/timecampus/components/charts/TrendChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendChart.js","names":[],"sources":["../../../../src/timecampus/components/charts/TrendChart.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport {\n  Area,\n  AreaChart,\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ReferenceDot,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport {\n  chartTokens,\n  defaultSeriesColor,\n  formatNumber,\n  usePrefersReducedMotion,\n  type ChartDatum,\n  type ChartSeries,\n  type ValueFormatter,\n} from \"./chartTheme\";\nimport {\n  ChartDataTable,\n  ChartEmpty,\n  ChartFigure,\n  ChartLegend,\n  ChartTooltip,\n} from \"./ChartParts\";\n\nexport interface TrendChartProps {\n  /** Rows of `{ [xKey]: label, [series.key]: number }`. */\n  data: ChartDatum[];\n  /** Field holding the x-axis category/time value. */\n  xKey: string;\n  /** One or more numeric series. Single series reads on-brand. */\n  series: ChartSeries[];\n  /** Line, or gradient-filled area. Default `area`. */\n  type?: \"line\" | \"area\";\n  /** Pixel height of the plot. Default 260. */\n  height?: number;\n  /** Formats y values in the axis and tooltip. Default grouped integer. */\n  valueFormat?: ValueFormatter;\n  /** Formats x tick + tooltip header. */\n  xTickFormat?: (value: string | number) => string;\n  /** Show the horizontal grid. Default true. */\n  showGrid?: boolean;\n  /** Force the legend on/off. Default: on when there are ≥ 2 series. */\n  showLegend?: boolean;\n  /** Emphasise each series' final point with a ringed dot. Default true. */\n  showEndDots?: boolean;\n  /** Message shown when `data` is empty — never fabricate a shape. */\n  emptyLabel?: string;\n  /** Accessible name for the figure. Default derived from the series labels. */\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * TrendChart — value-over-time as a line or gradient area (asset value,\n * emissions, depreciation). Theme-aware tokens, a hairline grid, a crosshair\n * tooltip, emphasised endpoints, a legend for multi-series, an empty state and\n * a screen-reader data table. Respects `prefers-reduced-motion`.\n */\nexport function TrendChart({\n  data,\n  xKey,\n  series,\n  type = \"area\",\n  height = 260,\n  valueFormat = formatNumber,\n  xTickFormat,\n  showGrid = true,\n  showLegend,\n  showEndDots = true,\n  emptyLabel,\n  ariaLabel,\n  className,\n}: TrendChartProps) {\n  const gradientBase = useId();\n  const reducedMotion = usePrefersReducedMotion();\n\n  const resolved = series.map((s, index) => ({\n    ...s,\n    label: s.label ?? s.key,\n    color: s.color ?? defaultSeriesColor(index, series.length),\n  }));\n  const label =\n    ariaLabel ?? `Trend of ${resolved.map((s) => s.label).join(\", \")}`;\n\n  if (data.length === 0) {\n    return (\n      <ChartEmpty height={height} label={emptyLabel} className={className} />\n    );\n  }\n\n  const withLegend = showLegend ?? resolved.length > 1;\n  const axisTick = { fill: chartTokens.textMuted, fontSize: 12 };\n\n  const lastFiniteIndex = (key: string): number => {\n    for (let i = data.length - 1; i >= 0; i -= 1) {\n      const value = data[i][key];\n      if (typeof value === \"number\" && Number.isFinite(value)) return i;\n    }\n    return -1;\n  };\n\n  const Chart = type === \"area\" ? AreaChart : LineChart;\n\n  return (\n    <ChartFigure\n      ariaLabel={label}\n      height={height}\n      className={className}\n      a11y={\n        <ChartDataTable\n          caption={label}\n          xLabel={xKey}\n          xKey={xKey}\n          data={data}\n          series={resolved}\n          valueFormat={valueFormat}\n        />\n      }\n    >\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <Chart data={data} margin={{ top: 12, right: 16, bottom: 4, left: 4 }}>\n          <defs>\n            {resolved.map((s, index) => (\n              <linearGradient\n                key={s.key}\n                id={`${gradientBase}-${index}`}\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={0.24} />\n                <stop offset=\"95%\" stopColor={s.color} stopOpacity={0.02} />\n              </linearGradient>\n            ))}\n          </defs>\n\n          {showGrid ? (\n            <CartesianGrid\n              vertical={false}\n              stroke={chartTokens.grid}\n              strokeWidth={1}\n            />\n          ) : null}\n\n          <XAxis\n            dataKey={xKey}\n            tickLine={false}\n            axisLine={false}\n            tick={axisTick}\n            tickMargin={8}\n            minTickGap={16}\n            tickFormatter={\n              xTickFormat\n                ? (value) => xTickFormat(value as string | number)\n                : undefined\n            }\n          />\n          <YAxis\n            tickLine={false}\n            axisLine={false}\n            tick={axisTick}\n            width={48}\n            tickFormatter={(value) => valueFormat(Number(value))}\n          />\n\n          <Tooltip\n            cursor={{ stroke: chartTokens.axis, strokeWidth: 1 }}\n            content={\n              <ChartTooltip\n                valueFormat={valueFormat}\n                labelFormat={xTickFormat}\n                hideLabel={false}\n              />\n            }\n          />\n\n          {withLegend ? <Legend content={<ChartLegend />} /> : null}\n\n          {resolved.map((s, index) =>\n            type === \"area\" ? (\n              <Area\n                key={s.key}\n                type=\"monotone\"\n                dataKey={s.key}\n                name={s.label}\n                stroke={s.color}\n                strokeWidth={2}\n                fill={`url(#${gradientBase}-${index})`}\n                isAnimationActive={!reducedMotion}\n                dot={false}\n                activeDot={{\n                  r: 4,\n                  strokeWidth: 2,\n                  stroke: chartTokens.surface,\n                  fill: s.color,\n                }}\n              />\n            ) : (\n              <Line\n                key={s.key}\n                type=\"monotone\"\n                dataKey={s.key}\n                name={s.label}\n                stroke={s.color}\n                strokeWidth={2}\n                isAnimationActive={!reducedMotion}\n                dot={false}\n                activeDot={{\n                  r: 4,\n                  strokeWidth: 2,\n                  stroke: chartTokens.surface,\n                  fill: s.color,\n                }}\n              />\n            ),\n          )}\n\n          {showEndDots\n            ? resolved.map((s) => {\n                const index = lastFiniteIndex(s.key);\n                if (index < 0) return null;\n                return (\n                  <ReferenceDot\n                    key={`end-${s.key}`}\n                    x={data[index][xKey] as string | number}\n                    y={data[index][s.key] as number}\n                    r={4}\n                    fill={s.color}\n                    stroke={chartTokens.surface}\n                    strokeWidth={2}\n                    isFront\n                  />\n                );\n              })\n            : null}\n        </Chart>\n      </ResponsiveContainer>\n    </ChartFigure>\n  );\n}\n"],"mappings":"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"}

package/dist/timecampus/components/charts/WeeksGrid.js

@@ -0,0 +1,62 @@
+import { chartTokens as e } from "./chartTheme.js";
+import { useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/timecampus/components/charts/WeeksGrid.tsx
+function r({ weeksLived: r, totalWeeks: i, weeksPerRow: a = 52, horizonRowsWhenOpen: o = 12, ariaLabel: s, className: c }) {
+	let l = r != null && r >= 0 ? Math.floor(r) : 0, u = t(() => i != null && i > 0 ? Math.floor(i) : l + Math.max(1, o) * a, [
+		i,
+		l,
+		o,
+		a
+	]), d = Math.max(1, a), f = Math.max(1, Math.ceil(u / d)), p = d * 13 - 3, m = f * 13 - 3, h = t(() => {
+		let e = [];
+		for (let t = 0; t < u; t++) {
+			let n = t < l ? "lived" : t === l ? "current" : "future";
+			e.push({
+				i: t,
+				x: t % d * 13,
+				y: Math.floor(t / d) * 13,
+				state: n
+			});
+		}
+		return e;
+	}, [
+		u,
+		l,
+		d,
+		13
+	]);
+	return /* @__PURE__ */ n("figure", {
+		role: "img",
+		"aria-label": s ?? (i == null ? `Your life in weeks: ${l} weeks lived so far` : `Your life in weeks: ${l} of ${Math.floor(i)} weeks lived`),
+		className: c,
+		children: /* @__PURE__ */ n("div", {
+			className: "w-full overflow-x-auto",
+			children: /* @__PURE__ */ n("svg", {
+				viewBox: `0 0 ${p} ${m}`,
+				width: "100%",
+				preserveAspectRatio: "xMinYMin meet",
+				className: "min-w-[520px]",
+				role: "presentation",
+				children: h.map((t) => {
+					let r = t.state === "lived", i = t.state === "current";
+					return /* @__PURE__ */ n("rect", {
+						x: t.x,
+						y: t.y,
+						width: 10,
+						height: 10,
+						rx: 2,
+						ry: 2,
+						fill: r ? e.brand : i ? e.surface : "transparent",
+						stroke: i ? e.brand : r ? "transparent" : e.border,
+						strokeWidth: i ? 1.5 : 1
+					}, t.i);
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { r as WeeksGrid };
+
+//# sourceMappingURL=WeeksGrid.js.map

package/dist/timecampus/components/charts/WeeksGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WeeksGrid.js","names":[],"sources":["../../../../src/timecampus/components/charts/WeeksGrid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { chartTokens } from \"./chartTheme\";\n\nexport interface WeeksGridProps {\n  /** Whole weeks lived so far. Null when the user has not given a birth date. */\n  weeksLived: number | null;\n  /** Total weeks in the expected lifespan. Null when no expectancy is given. */\n  totalWeeks: number | null;\n  /** Columns per row. Default 52 (one year per row). */\n  weeksPerRow?: number;\n  /**\n   * When there is no expectancy, how many future rows of hollow cells to show\n   * as a horizon beyond the weeks lived. Default 12 (about a decade of context).\n   */\n  horizonRowsWhenOpen?: number;\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * WeeksGrid — the finite-life \"your life in weeks\" memento. Each cell is one\n * week: weeks lived are filled with the brand token, the current week is ringed,\n * and future weeks are hollow. It is honest by construction — it renders only\n * what the user's own (optional, private) birth date and expectancy imply, never\n * a guessed age or an invented mortality date. Drawn as a single SVG so even a\n * ~90-year grid (≈ 4,700 cells) stays light, and it scales responsively via a\n * viewBox inside a horizontally-scrollable frame.\n */\nexport function WeeksGrid({\n  weeksLived,\n  totalWeeks,\n  weeksPerRow = 52,\n  horizonRowsWhenOpen = 12,\n  ariaLabel,\n  className,\n}: WeeksGridProps) {\n  const lived = weeksLived != null && weeksLived >= 0 ? Math.floor(weeksLived) : 0;\n\n  const totalCells = useMemo(() => {\n    if (totalWeeks != null && totalWeeks > 0) return Math.floor(totalWeeks);\n    // No expectancy: show the weeks lived plus a modest hollow horizon.\n    return lived + Math.max(1, horizonRowsWhenOpen) * weeksPerRow;\n  }, [totalWeeks, lived, horizonRowsWhenOpen, weeksPerRow]);\n\n  const cols = Math.max(1, weeksPerRow);\n  const rows = Math.max(1, Math.ceil(totalCells / cols));\n\n  // Geometry in SVG user units; the viewBox lets it scale to any width.\n  const cell = 10;\n  const gap = 3;\n  const step = cell + gap;\n  const width = cols * step - gap;\n  const heightUnits = rows * step - gap;\n\n  const cells = useMemo(() => {\n    const out: {\n      i: number;\n      x: number;\n      y: number;\n      state: \"lived\" | \"current\" | \"future\";\n    }[] = [];\n    for (let i = 0; i < totalCells; i++) {\n      const state = i < lived ? \"lived\" : i === lived ? \"current\" : \"future\";\n      out.push({\n        i,\n        x: (i % cols) * step,\n        y: Math.floor(i / cols) * step,\n        state,\n      });\n    }\n    return out;\n  }, [totalCells, lived, cols, step]);\n\n  const label =\n    ariaLabel ??\n    (totalWeeks != null\n      ? `Your life in weeks: ${lived} of ${Math.floor(totalWeeks)} weeks lived`\n      : `Your life in weeks: ${lived} weeks lived so far`);\n\n  return (\n    <figure role=\"img\" aria-label={label} className={className}>\n      <div className=\"w-full overflow-x-auto\">\n        <svg\n          viewBox={`0 0 ${width} ${heightUnits}`}\n          width=\"100%\"\n          preserveAspectRatio=\"xMinYMin meet\"\n          className=\"min-w-[520px]\"\n          role=\"presentation\"\n        >\n          {cells.map((c) => {\n            const isLived = c.state === \"lived\";\n            const isCurrent = c.state === \"current\";\n            return (\n              <rect\n                key={c.i}\n                x={c.x}\n                y={c.y}\n                width={cell}\n                height={cell}\n                rx={2}\n                ry={2}\n                fill={\n                  isLived\n                    ? chartTokens.brand\n                    : isCurrent\n                      ? chartTokens.surface\n                      : \"transparent\"\n                }\n                stroke={\n                  isCurrent\n                    ? chartTokens.brand\n                    : isLived\n                      ? \"transparent\"\n                      : chartTokens.border\n                }\n                strokeWidth={isCurrent ? 1.5 : 1}\n              />\n            );\n          })}\n        </svg>\n      </div>\n    </figure>\n  );\n}\n"],"mappings":";;;;AA4BA,SAAgB,EAAU,EACxB,eACA,eACA,iBAAc,IACd,yBAAsB,IACtB,cACA,gBACiB;CACjB,IAAM,IAAQ,KAAc,QAAQ,KAAc,IAAI,KAAK,MAAM,EAAW,GAAG,GAEzE,IAAa,QACb,KAAc,QAAQ,IAAa,IAAU,KAAK,MAAM,EAAW,GAEhE,IAAQ,KAAK,IAAI,GAAG,EAAoB,GAAG,GACjD;EAAC;EAAY;EAAO;EAAqB;EAAY,CAAC,EAEnD,IAAO,KAAK,IAAI,GAAG,EAAY,EAC/B,IAAO,KAAK,IAAI,GAAG,KAAK,KAAK,IAAa,EAAK,CAAC,EAMhD,IAAQ,IAAO,KAAO,GACtB,IAAc,IAAO,KAAO,GAE5B,IAAQ,QAAc;EAC1B,IAAM,IAKA,EAAE;AACR,OAAK,IAAI,IAAI,GAAG,IAAI,GAAY,KAAK;GACnC,IAAM,IAAQ,IAAI,IAAQ,UAAU,MAAM,IAAQ,YAAY;AAC9D,KAAI,KAAK;IACP;IACA,GAAI,IAAI,IAAQ;IAChB,GAAG,KAAK,MAAM,IAAI,EAAK,GAAG;IAC1B;IACD,CAAC;;AAEJ,SAAO;IACN;EAAC;EAAY;EAAO;EAAM;EAAK,CAAC;AAQnC,QACE,kBAAC,UAAD;EAAQ,MAAK;EAAM,cANnB,MACC,KAAc,OAEX,uBAAuB,EAAM,uBAD7B,uBAAuB,EAAM,MAAM,KAAK,MAAM,EAAW,CAAC;EAIb;YAC/C,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IACE,SAAS,OAAO,EAAM,GAAG;IACzB,OAAM;IACN,qBAAoB;IACpB,WAAU;IACV,MAAK;cAEJ,EAAM,KAAK,MAAM;KAChB,IAAM,IAAU,EAAE,UAAU,SACtB,IAAY,EAAE,UAAU;AAC9B,YACE,kBAAC,QAAD;MAEE,GAAG,EAAE;MACL,GAAG,EAAE;MACL,OAAO;MACP,QAAQ;MACR,IAAI;MACJ,IAAI;MACJ,MACE,IACI,EAAY,QACZ,IACE,EAAY,UACZ;MAER,QACE,IACI,EAAY,QACZ,IACE,gBACA,EAAY;MAEpB,aAAa,IAAY,MAAM;MAC/B,EAtBK,EAAE,EAsBP;MAEJ;IACE,CAAA;GACF,CAAA;EACC,CAAA"}

package/dist/timecampus/components/charts/chartTheme.js

@@ -0,0 +1,65 @@
+import { useSyncExternalStore as e } from "react";
+//#region src/timecampus/components/charts/chartTheme.ts
+var t = {
+	series: [
+		"var(--color-chart-1)",
+		"var(--color-chart-2)",
+		"var(--color-chart-3)",
+		"var(--color-chart-4)",
+		"var(--color-chart-5)",
+		"var(--color-chart-6)",
+		"var(--color-chart-7)",
+		"var(--color-chart-8)",
+		"var(--color-chart-9)",
+		"var(--color-chart-10)",
+		"var(--color-chart-11)",
+		"var(--color-chart-12)"
+	],
+	brand: "var(--color-accent-primary)",
+	positive: "var(--color-chart-positive)",
+	negative: "var(--color-chart-negative)",
+	status: {
+		success: "var(--color-status-success-bg)",
+		warning: "var(--color-status-warning-bg)",
+		danger: "var(--color-status-error-bg)",
+		info: "var(--color-status-info-bg)"
+	},
+	grid: "var(--color-chart-grid)",
+	axis: "var(--color-chart-axis)",
+	surface: "var(--color-bg-surface)",
+	track: "var(--color-bg-sunken)",
+	border: "var(--color-border-seam)",
+	textPrimary: "var(--color-text-primary)",
+	textSecondary: "var(--color-text-secondary)",
+	textMuted: "var(--color-text-muted)"
+};
+function n(e) {
+	let n = t.series;
+	return e <= 0 ? n[0] : e < n.length ? n[e] : n[n.length - 1];
+}
+function r(e) {
+	return t.status[e];
+}
+function i(e, r) {
+	return r <= 1 ? t.brand : n(e);
+}
+var a = (e) => e.toLocaleString();
+function o(e, t = a) {
+	return e == null ? "—" : typeof e == "number" ? Number.isFinite(e) ? t(e) : "—" : String(e);
+}
+var s = "(prefers-reduced-motion: reduce)";
+function c(e) {
+	if (typeof window > "u" || typeof window.matchMedia != "function") return () => {};
+	let t = window.matchMedia(s);
+	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+}
+function l() {
+	return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(s).matches;
+}
+function u() {
+	return e(c, l, () => !1);
+}
+//#endregion
+export { t as chartTokens, i as defaultSeriesColor, a as formatNumber, o as renderValue, n as seriesColor, r as toneColor, u as usePrefersReducedMotion };
+
+//# sourceMappingURL=chartTheme.js.map

package/dist/timecampus/components/charts/chartTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartTheme.js","names":[],"sources":["../../../../src/timecampus/components/charts/chartTheme.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * chartTheme — the single source of truth that maps every chart mark to a live\n * semantic CSS custom property from the Boff UI 2.0 design system\n * (`@burdenoff/fe-libs/shared/tokens`).\n *\n * Because every value is a `var(--color-*)` reference rather than a baked hex,\n * the charts are theme-aware for free: they recolour instantly on a light/dark\n * switch and pick up the TimeCampus brand (which the host shell writes\n * into `--color-accent-primary`) with zero JS re-resolution. Nothing here is a\n * raw colour — the design system owns the palette; these components only\n * reference it.\n *\n * Palette provenance: the categorical ramp is the design system's validated\n * 12-step `--color-chart-*` scale. It is CVD-safe (worst adjacent Machado-2009\n * ΔE ≈ 35 in light / ≈ 52 in dark, well above the ≥ 12 target). Slots are\n * assigned in fixed order and NEVER cycled — a series index past the ramp folds\n * onto the last slot rather than repainting an existing hue (see `seriesColor`).\n */\nexport const chartTokens = {\n  /** Categorical identity ramp — fixed order, assigned in sequence, never cycled. */\n  series: [\n    \"var(--color-chart-1)\",\n    \"var(--color-chart-2)\",\n    \"var(--color-chart-3)\",\n    \"var(--color-chart-4)\",\n    \"var(--color-chart-5)\",\n    \"var(--color-chart-6)\",\n    \"var(--color-chart-7)\",\n    \"var(--color-chart-8)\",\n    \"var(--color-chart-9)\",\n    \"var(--color-chart-10)\",\n    \"var(--color-chart-11)\",\n    \"var(--color-chart-12)\",\n  ],\n  /** Brand accent (the TimeCampus brand) — the default for a single series. */\n  brand: \"var(--color-accent-primary)\",\n  /** Value polarity. */\n  positive: \"var(--color-chart-positive)\",\n  negative: \"var(--color-chart-negative)\",\n  /** Reserved status scale — always paired with an icon + label at the call site. */\n  status: {\n    success: \"var(--color-status-success-bg)\",\n    warning: \"var(--color-status-warning-bg)\",\n    danger: \"var(--color-status-error-bg)\",\n    info: \"var(--color-status-info-bg)\",\n  },\n  /** Recessive chrome. */\n  grid: \"var(--color-chart-grid)\",\n  axis: \"var(--color-chart-axis)\",\n  surface: \"var(--color-bg-surface)\",\n  track: \"var(--color-bg-sunken)\",\n  border: \"var(--color-border-seam)\",\n  /** Ink — marks never wear these; labels, axes and legends do. */\n  textPrimary: \"var(--color-text-primary)\",\n  textSecondary: \"var(--color-text-secondary)\",\n  textMuted: \"var(--color-text-muted)\",\n} as const;\n\n/** A named data series drawn by TrendChart / BarsChart. */\nexport interface ChartSeries {\n  /** Key into each datum object. */\n  key: string;\n  /** Human label (legend + tooltip). Falls back to `key`. */\n  label?: string;\n  /** Explicit mark colour (a CSS colour, typically a `var(--color-*)`). */\n  color?: string;\n}\n\n/** A single datum row: an x-value plus one or more numeric series values. */\nexport type ChartDatum = Record<string, string | number | null | undefined>;\n\n/** A slice for DonutChart. */\nexport interface DonutSlice {\n  name: string;\n  value: number;\n  color?: string;\n}\n\n/** Severity tone shared by meters and gauges. */\nexport type MeterTone = \"success\" | \"warning\" | \"danger\";\n\n/**\n * Pick the categorical hue for slot `i`, clamped to the ramp — it NEVER cycles.\n * A count beyond the ramp folds onto the last slot (callers that need more\n * distinct categories should aggregate the tail into \"Other\").\n */\nexport function seriesColor(i: number): string {\n  const ramp = chartTokens.series;\n  if (i <= 0) return ramp[0];\n  return i < ramp.length ? ramp[i] : ramp[ramp.length - 1];\n}\n\n/** Resolve a severity tone to its reserved status token. */\nexport function toneColor(tone: MeterTone): string {\n  return chartTokens.status[tone];\n}\n\n/**\n * Resolve the default colour for series slot `i` in an N-series chart: a single\n * series reads on-brand; multiple series take the categorical ramp.\n */\nexport function defaultSeriesColor(index: number, total: number): string {\n  return total <= 1 ? chartTokens.brand : seriesColor(index);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Number formatting                                                          */\n/* -------------------------------------------------------------------------- */\n\n/** A value formatter: `(value) => label`. Passed to every chart's `valueFormat`. */\nexport type ValueFormatter = (value: number) => string;\n\n/** Plain grouped integer/decimal, e.g. `17,960`. Default everywhere. */\nexport const formatNumber: ValueFormatter = (value) => value.toLocaleString();\n\n/** Compact notation, e.g. `12.9K`, `4.2M` — for axis ticks and dense KPIs. */\nexport const formatCompact: ValueFormatter = (value) =>\n  new Intl.NumberFormat(undefined, {\n    notation: \"compact\",\n    maximumFractionDigits: 1,\n  }).format(value);\n\n/** Compact currency, e.g. `$4.2M`. */\nexport function formatCurrencyCompact(currency = \"USD\"): ValueFormatter {\n  return (value) =>\n    new Intl.NumberFormat(undefined, {\n      style: \"currency\",\n      currency,\n      notation: \"compact\",\n      maximumFractionDigits: 1,\n    }).format(value);\n}\n\n/** Percent with a fixed number of fraction digits, e.g. `68%`. */\nexport function formatPercent(fractionDigits = 0): ValueFormatter {\n  return (value) => `${value.toFixed(fractionDigits)}%`;\n}\n\n/** Render an unknown cell value through a formatter, tolerant of strings/null. */\nexport function renderValue(\n  value: number | string | null | undefined,\n  formatter: ValueFormatter = formatNumber,\n): string {\n  if (value === null || value === undefined) return \"—\";\n  if (typeof value === \"number\")\n    return Number.isFinite(value) ? formatter(value) : \"—\";\n  return String(value);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Motion                                                                     */\n/* -------------------------------------------------------------------------- */\n\nconst REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribeReducedMotion(onChange: () => void): () => void {\n  if (\n    typeof window === \"undefined\" ||\n    typeof window.matchMedia !== \"function\"\n  ) {\n    return () => {};\n  }\n  const query = window.matchMedia(REDUCED_MOTION_QUERY);\n  query.addEventListener(\"change\", onChange);\n  return () => query.removeEventListener(\"change\", onChange);\n}\n\nfunction getReducedMotionSnapshot(): boolean {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\")\n    return false;\n  return window.matchMedia(REDUCED_MOTION_QUERY).matches;\n}\n\n/**\n * Tracks the user's `prefers-reduced-motion` setting so charts can disable\n * recharts' enter animation. Subscribes to the media query via\n * `useSyncExternalStore` (SSR-safe — defaults to \"not reduced\" on the server).\n */\nexport function usePrefersReducedMotion(): boolean {\n  return useSyncExternalStore(\n    subscribeReducedMotion,\n    getReducedMotionSnapshot,\n    () => false,\n  );\n}\n"],"mappings":";;AAoBA,IAAa,IAAc;CAEzB,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CAED,OAAO;CAEP,UAAU;CACV,UAAU;CAEV,QAAQ;EACN,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACP;CAED,MAAM;CACN,MAAM;CACN,SAAS;CACT,OAAO;CACP,QAAQ;CAER,aAAa;CACb,eAAe;CACf,WAAW;CACZ;AA8BD,SAAgB,EAAY,GAAmB;CAC7C,IAAM,IAAO,EAAY;AAEzB,QADI,KAAK,IAAU,EAAK,KACjB,IAAI,EAAK,SAAS,EAAK,KAAK,EAAK,EAAK,SAAS;;AAIxD,SAAgB,EAAU,GAAyB;AACjD,QAAO,EAAY,OAAO;;AAO5B,SAAgB,EAAmB,GAAe,GAAuB;AACvE,QAAO,KAAS,IAAI,EAAY,QAAQ,EAAY,EAAM;;AAW5D,IAAa,KAAgC,MAAU,EAAM,gBAAgB;AA0B7E,SAAgB,EACd,GACA,IAA4B,GACpB;AAIR,QAHI,KAAU,OAAoC,MAC9C,OAAO,KAAU,WACZ,OAAO,SAAS,EAAM,GAAG,EAAU,EAAM,GAAG,MAC9C,OAAO,EAAM;;AAOtB,IAAM,IAAuB;AAE7B,SAAS,EAAuB,GAAkC;AAChE,KACE,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,WAE7B,cAAa;CAEf,IAAM,IAAQ,OAAO,WAAW,EAAqB;AAErD,QADA,EAAM,iBAAiB,UAAU,EAAS,QAC7B,EAAM,oBAAoB,UAAU,EAAS;;AAG5D,SAAS,IAAoC;AAG3C,QAFI,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,aACzD,KACF,OAAO,WAAW,EAAqB,CAAC;;AAQjD,SAAgB,IAAmC;AACjD,QAAO,EACL,GACA,SACM,GACP"}