@burdenoff/microfe-timecampus 2026.703.4 → 2026.703.6

package/dist/timecampus/pages/lifetime/TimeWellSpentPage.js

@@ -0,0 +1,285 @@
+import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
+import { cn as t } from "../../utils/helpers.js";
+import { StatCard as n } from "../../components/StatCard.js";
+import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
+import { useMyTimeWellSpentQuery as i } from "../../../generated/wspace-operations.js";
+import { PageLayout as a } from "../../components/PageLayout.js";
+import { StatusBadge as o } from "../../components/StatusBadge.js";
+import { EmptyState as s } from "../../components/EmptyState.js";
+import { ChartCard as c } from "../../components/ChartCard.js";
+import { RadialGauge as l } from "../../components/charts/RadialGauge.js";
+import { ProgressMeter as u } from "../../components/charts/ProgressMeter.js";
+import "../../components/index.js";
+import { formatSecondsHuman as d, isoDaysAgo as f, isoNow as p, lifeDomainLabel as m, secondsToHours as h } from "./domains.js";
+import { useMemo as g, useState as _ } from "react";
+import { Clock as v, Compass as y, Heart as b, Info as x, Layers as S, Radar as C, Scale as w } from "lucide-react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { GlassCard as D } from "@burdenoff/fe-libs/ui";
+//#region src/timecampus/pages/lifetime/TimeWellSpentPage.tsx
+var O = [{
+	label: "7 days",
+	value: 7
+}, {
+	label: "30 days",
+	value: 30
+}], k = .5;
+function A(e) {
+	let t = Math.abs(e);
+	return t <= .05 ? "aligned" : t <= .12 ? "slight" : "off";
+}
+var j = {
+	aligned: "success",
+	slight: "warning",
+	off: "error"
+}, M = {
+	aligned: "success",
+	slight: "warning",
+	off: "danger"
+};
+function N(e, t) {
+	if (t === "aligned") return "On track";
+	let n = Math.round(Math.abs(e) * 100);
+	return e > 0 ? `${n}% over` : `${n}% under`;
+}
+function P() {
+	let { workspaceId: P = "" } = e(), [F, I] = _(30), L = g(() => ({
+		from: f(F),
+		to: p()
+	}), [F]), { data: R, loading: z, error: B } = i({
+		variables: {
+			from: L.from,
+			to: L.to
+		},
+		skip: !P
+	}), V = R?.myTimeWellSpent, H = g(() => [...V?.byDomain ?? []].sort((e, t) => Math.max(t.desiredShare, t.actualShare) - Math.max(e.desiredShare, e.actualShare)), [V]), U = {
+		title: "Time Well Spent",
+		description: "How closely your time matches what you value",
+		purpose: "Time Well Spent scores how well your actual time matches what you've said matters to you — your declared values and balance targets. It rewards alignment, not output, so a calm, values-aligned day can score higher than a frantic one.",
+		actions: /* @__PURE__ */ T("div", {
+			className: "flex items-center rounded-lg border border-border-subtle bg-bg-sunken/50 p-0.5",
+			children: O.map((e) => /* @__PURE__ */ T("button", {
+				type: "button",
+				onClick: () => I(e.value),
+				className: t("rounded-md px-3 py-1 text-xs font-medium transition-colors", F === e.value ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"),
+				children: e.label
+			}, e.value))
+		})
+	};
+	if (!P || z) return /* @__PURE__ */ T(a, {
+		...U,
+		children: /* @__PURE__ */ T(r, {
+			variant: "card",
+			count: 4
+		})
+	});
+	if (B) return /* @__PURE__ */ T(a, {
+		...U,
+		children: /* @__PURE__ */ T("div", {
+			className: "rounded-xl border border-status-error-border/50 bg-status-error-bg/10 p-4 text-sm text-status-error-text",
+			children: "We couldn't load your Time-Well-Spent score right now. Please try again in a moment."
+		})
+	});
+	if (!V) return /* @__PURE__ */ T(a, {
+		...U,
+		children: /* @__PURE__ */ T(s, {
+			illustration: "empty-data",
+			title: "Nothing to score yet",
+			description: "Once you start capturing your time, your alignment score will appear here."
+		})
+	});
+	let { score: W, hasDeclaredValues: G, coverageConfidence: K, coveredSeconds: q } = V;
+	if (!G) return /* @__PURE__ */ T(a, {
+		...U,
+		children: /* @__PURE__ */ T(s, {
+			illustration: "empty-data",
+			title: "Declare what you value first",
+			description: "Time Well Spent needs to know what matters to you. Head to the Values & Goals page to declare your life values or balance targets — then this score will show how closely your real time matches them."
+		})
+	});
+	if (q <= 0) return /* @__PURE__ */ T(a, {
+		...U,
+		children: /* @__PURE__ */ T(s, {
+			illustration: "empty-data",
+			title: "No time logged in this range",
+			description: "Log your first life entry — or connect a source that captures your time — and we'll score how it aligns with what you value."
+		})
+	});
+	let J = W == null ? 0 : Math.round(W * 100), Y = Math.round(K * 100), X = K < k;
+	return /* @__PURE__ */ E(a, {
+		...U,
+		children: [/* @__PURE__ */ E("div", {
+			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
+			children: [/* @__PURE__ */ T(c, {
+				title: "Your alignment score",
+				description: `Last ${F} days`,
+				actions: /* @__PURE__ */ T(y, { className: "h-4 w-4 text-text-secondary" }),
+				className: "lg:col-span-1",
+				children: /* @__PURE__ */ E("div", {
+					className: "flex flex-col items-center",
+					children: [
+						/* @__PURE__ */ T("div", {
+							className: "mx-auto w-full max-w-sm",
+							children: /* @__PURE__ */ T(l, {
+								value: J,
+								min: 0,
+								max: 100,
+								label: "Time Well Spent",
+								sublabel: "alignment with what you value",
+								thresholds: {
+									warning: 70,
+									danger: 45
+								},
+								height: 260,
+								ariaLabel: `Time Well Spent score: ${J} out of 100`
+							})
+						}),
+						/* @__PURE__ */ T("p", {
+							className: "mt-1 text-xs font-medium text-text-muted",
+							children: "Not a productivity score"
+						}),
+						X && /* @__PURE__ */ E("div", {
+							className: "mt-3 flex items-start gap-2 rounded-lg border border-status-warning-border/40 bg-status-warning-bg/10 px-3 py-2 text-xs text-status-warning-text",
+							children: [/* @__PURE__ */ T(x, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ E("span", { children: [
+								"Only ",
+								Y,
+								"% of this period is accounted for, so treat this as a rough estimate. Capturing more of your day sharpens it."
+							] })]
+						})
+					]
+				})
+			}), /* @__PURE__ */ E("div", {
+				className: "space-y-4 sm:space-y-6 lg:col-span-2",
+				children: [/* @__PURE__ */ T(D, {
+					treatment: "insight",
+					className: "border-status-info-border/40 p-4 sm:p-5",
+					children: /* @__PURE__ */ E("div", {
+						className: "flex items-start gap-3",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-status-info-bg/40 text-status-info-text",
+							children: /* @__PURE__ */ T(b, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ E("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ T("p", {
+								className: "text-sm font-medium text-text-primary",
+								children: "This measures alignment with what you value — not productivity."
+							}), /* @__PURE__ */ T("p", {
+								className: "mt-1 text-sm text-text-secondary",
+								children: "A restful, values-aligned day scores high. A busy day that touched nothing you care about scores low."
+							})]
+						})]
+					})
+				}), /* @__PURE__ */ E("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ T(n, {
+							title: "Time accounted for",
+							value: d(q),
+							icon: /* @__PURE__ */ T(v, { className: "h-5 w-5" }),
+							description: `${h(q)} hrs over ${F} days`,
+							iconBgColor: "bg-status-info-bg text-status-info-text"
+						}),
+						/* @__PURE__ */ T(n, {
+							title: "Coverage confidence",
+							value: `${Y}%`,
+							icon: /* @__PURE__ */ T(C, { className: "h-5 w-5" }),
+							description: "of the period logged"
+						}),
+						/* @__PURE__ */ T(n, {
+							title: "Life domains",
+							value: String(H.length),
+							icon: /* @__PURE__ */ T(S, { className: "h-5 w-5" }),
+							description: "with time or a target"
+						})
+					]
+				})]
+			})]
+		}), /* @__PURE__ */ E(D, {
+			treatment: "glass",
+			glow: !0,
+			className: "mt-6 p-4 sm:p-6",
+			children: [/* @__PURE__ */ E("div", {
+				className: "mb-4 flex items-start gap-3",
+				children: [/* @__PURE__ */ T("div", {
+					className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary",
+					children: /* @__PURE__ */ T(w, { className: "h-5 w-5" })
+				}), /* @__PURE__ */ E("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ T("h3", {
+						className: "text-sm font-semibold text-text-primary",
+						children: "Where your time aligns"
+					}), /* @__PURE__ */ T("p", {
+						className: "mt-0.5 text-xs text-text-secondary",
+						children: "Your actual share of accounted time versus what you intended, by life domain."
+					})]
+				})]
+			}), H.length === 0 ? /* @__PURE__ */ T(s, {
+				illustration: "empty-data",
+				title: "No domain breakdown yet",
+				description: "As your time is captured across life domains, each one's alignment with your intentions will appear here."
+			}) : /* @__PURE__ */ T("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: H.map((e) => {
+					let t = A(e.gap), n = Math.round(e.actualShare * 100), r = Math.round(e.desiredShare * 100), i = d(e.actualShare * q);
+					return /* @__PURE__ */ E(D, {
+						treatment: "metric",
+						className: "p-4",
+						children: [
+							/* @__PURE__ */ E("div", {
+								className: "flex items-start justify-between gap-3",
+								children: [/* @__PURE__ */ E("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ T("p", {
+										className: "truncate text-sm font-medium text-text-primary",
+										children: m(e.domain)
+									}), /* @__PURE__ */ E("p", {
+										className: "mt-0.5 text-xs text-text-secondary",
+										children: [i, " logged"]
+									})]
+								}), /* @__PURE__ */ T(o, {
+									variant: j[t],
+									label: N(e.gap, t)
+								})]
+							}),
+							/* @__PURE__ */ T(u, {
+								className: "mt-3",
+								value: n,
+								max: 100,
+								tone: M[t],
+								showValue: !1,
+								size: "md"
+							}),
+							/* @__PURE__ */ E("div", {
+								className: "mt-1.5 flex items-center justify-between text-xs",
+								children: [/* @__PURE__ */ E("span", {
+									className: "text-text-secondary",
+									children: [
+										"You:",
+										" ",
+										/* @__PURE__ */ E("span", {
+											className: "tabular-nums text-text-primary",
+											children: [n, "%"]
+										})
+									]
+								}), /* @__PURE__ */ E("span", {
+									className: "text-text-muted",
+									children: [
+										"Intended:",
+										" ",
+										/* @__PURE__ */ E("span", {
+											className: "tabular-nums text-text-secondary",
+											children: [r, "%"]
+										})
+									]
+								})]
+							})
+						]
+					}, e.domain);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { P as TimeWellSpentPage };
+
+//# sourceMappingURL=TimeWellSpentPage.js.map

package/dist/timecampus/pages/lifetime/TimeWellSpentPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeWellSpentPage.js","names":[],"sources":["../../../../src/timecampus/pages/lifetime/TimeWellSpentPage.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport {\n  Heart,\n  Clock,\n  Radar,\n  Layers,\n  Compass,\n  Scale,\n  Info,\n} from \"lucide-react\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { EmptyState } from \"../../components/EmptyState\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport {\n  ChartCard,\n  RadialGauge,\n  ProgressMeter,\n  StatusBadge,\n  type MeterTone,\n} from \"../../components\";\nimport { cn } from \"../../utils/helpers\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useMyTimeWellSpentQuery,\n  type MyTimeWellSpentQuery,\n} from \"@/generated/wspace-operations\";\nimport {\n  lifeDomainLabel,\n  secondsToHours,\n  formatSecondsHuman,\n  isoDaysAgo,\n  isoNow,\n} from \"./domains\";\n\ntype DomainAlignment =\n  MyTimeWellSpentQuery[\"myTimeWellSpent\"][\"byDomain\"][number];\n\n/** Range presets for the score window. */\nconst RANGE_OPTIONS = [\n  { label: \"7 days\", value: 7 },\n  { label: \"30 days\", value: 30 },\n] as const;\n\n/** Below this fraction of the window accounted for, the score is only a rough estimate. */\nconst LOW_COVERAGE = 0.5;\n\ntype AlignLevel = \"aligned\" | \"slight\" | \"off\";\n\n/** Classify a domain's alignment from |actualShare − desiredShare|. */\nfunction alignLevel(gap: number): AlignLevel {\n  const magnitude = Math.abs(gap);\n  if (magnitude <= 0.05) return \"aligned\";\n  if (magnitude <= 0.12) return \"slight\";\n  return \"off\";\n}\n\nconst BADGE_VARIANT: Record<AlignLevel, \"success\" | \"warning\" | \"error\"> = {\n  aligned: \"success\",\n  slight: \"warning\",\n  off: \"error\",\n};\n\nconst METER_TONE: Record<AlignLevel, MeterTone> = {\n  aligned: \"success\",\n  slight: \"warning\",\n  off: \"danger\",\n};\n\n/** Directional, human badge label. `gap > 0` means more time than intended. */\nfunction alignmentLabel(gap: number, level: AlignLevel): string {\n  if (level === \"aligned\") return \"On track\";\n  const pct = Math.round(Math.abs(gap) * 100);\n  return gap > 0 ? `${pct}% over` : `${pct}% under`;\n}\n\nexport function TimeWellSpentPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n  const [days, setDays] = useState<number>(30);\n\n  // Memoise the window so `isoNow()` doesn't change identity every render and\n  // trigger endless refetches; the query re-runs only when `days` changes.\n  const range = useMemo(\n    () => ({ from: isoDaysAgo(days), to: isoNow() }),\n    [days],\n  );\n\n  const { data, loading, error } = useMyTimeWellSpentQuery({\n    variables: { from: range.from, to: range.to },\n    skip: !workspaceId,\n  });\n\n  const wellSpent = data?.myTimeWellSpent;\n\n  // Biggest slices of intended-or-actual time first, so what matters most —\n  // and where you're most out of balance — surfaces at the top.\n  const domains = useMemo<DomainAlignment[]>(() => {\n    const list = wellSpent?.byDomain ?? [];\n    return [...list].sort(\n      (a, b) =>\n        Math.max(b.desiredShare, b.actualShare) -\n        Math.max(a.desiredShare, a.actualShare),\n    );\n  }, [wellSpent]);\n\n  const rangeSelector = (\n    <div className=\"flex items-center rounded-lg border border-border-subtle bg-bg-sunken/50 p-0.5\">\n      {RANGE_OPTIONS.map((opt) => (\n        <button\n          key={opt.value}\n          type=\"button\"\n          onClick={() => setDays(opt.value)}\n          className={cn(\n            \"rounded-md px-3 py-1 text-xs font-medium transition-colors\",\n            days === opt.value\n              ? \"bg-bg-surface text-text-primary shadow-sm\"\n              : \"text-text-secondary hover:text-text-primary\",\n          )}\n        >\n          {opt.label}\n        </button>\n      ))}\n    </div>\n  );\n\n  const pageProps = {\n    title: \"Time Well Spent\",\n    description: \"How closely your time matches what you value\",\n    purpose:\n      \"Time Well Spent scores how well your actual time matches what you've said matters to you — your declared values and balance targets. It rewards alignment, not output, so a calm, values-aligned day can score higher than a frantic one.\",\n    actions: rangeSelector,\n  } as const;\n\n  if (!workspaceId || loading) {\n    return (\n      <PageLayout {...pageProps}>\n        <LoadingSkeleton variant=\"card\" count={4} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout {...pageProps}>\n        <div className=\"rounded-xl border border-status-error-border/50 bg-status-error-bg/10 p-4 text-sm text-status-error-text\">\n          We couldn't load your Time-Well-Spent score right now. Please try\n          again in a moment.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (!wellSpent) {\n    return (\n      <PageLayout {...pageProps}>\n        <EmptyState\n          illustration=\"empty-data\"\n          title=\"Nothing to score yet\"\n          description=\"Once you start capturing your time, your alignment score will appear here.\"\n        />\n      </PageLayout>\n    );\n  }\n\n  const { score, hasDeclaredValues, coverageConfidence, coveredSeconds } =\n    wellSpent;\n\n  // No declared values/targets → the score is undefined by design. Invite the\n  // first meaningful action instead of showing a hollow gauge.\n  if (!hasDeclaredValues) {\n    return (\n      <PageLayout {...pageProps}>\n        <EmptyState\n          illustration=\"empty-data\"\n          title=\"Declare what you value first\"\n          description=\"Time Well Spent needs to know what matters to you. Head to the Values & Goals page to declare your life values or balance targets — then this score will show how closely your real time matches them.\"\n        />\n      </PageLayout>\n    );\n  }\n\n  // Values are declared, but the window has no accounted time to compare.\n  if (coveredSeconds <= 0) {\n    return (\n      <PageLayout {...pageProps}>\n        <EmptyState\n          illustration=\"empty-data\"\n          title=\"No time logged in this range\"\n          description=\"Log your first life entry — or connect a source that captures your time — and we'll score how it aligns with what you value.\"\n        />\n      </PageLayout>\n    );\n  }\n\n  const scorePct = score != null ? Math.round(score * 100) : 0;\n  const coveragePct = Math.round(coverageConfidence * 100);\n  const coverageLow = coverageConfidence < LOW_COVERAGE;\n\n  return (\n    <PageLayout {...pageProps}>\n      {/* Hero: the score gauge alongside the framing note + honest stats. */}\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n        <ChartCard\n          title=\"Your alignment score\"\n          description={`Last ${days} days`}\n          actions={<Compass className=\"h-4 w-4 text-text-secondary\" />}\n          className=\"lg:col-span-1\"\n        >\n          <div className=\"flex flex-col items-center\">\n            <div className=\"mx-auto w-full max-w-sm\">\n              <RadialGauge\n                value={scorePct}\n                min={0}\n                max={100}\n                label=\"Time Well Spent\"\n                sublabel=\"alignment with what you value\"\n                thresholds={{ warning: 70, danger: 45 }}\n                height={260}\n                ariaLabel={`Time Well Spent score: ${scorePct} out of 100`}\n              />\n            </div>\n            <p className=\"mt-1 text-xs font-medium text-text-muted\">\n              Not a productivity score\n            </p>\n            {coverageLow && (\n              <div className=\"mt-3 flex items-start gap-2 rounded-lg border border-status-warning-border/40 bg-status-warning-bg/10 px-3 py-2 text-xs text-status-warning-text\">\n                <Info className=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n                <span>\n                  Only {coveragePct}% of this period is accounted for, so treat\n                  this as a rough estimate. Capturing more of your day sharpens\n                  it.\n                </span>\n              </div>\n            )}\n          </div>\n        </ChartCard>\n\n        <div className=\"space-y-4 sm:space-y-6 lg:col-span-2\">\n          {/* Prominent framing note. */}\n          <GlassCard\n            treatment=\"insight\"\n            className=\"border-status-info-border/40 p-4 sm:p-5\"\n          >\n            <div className=\"flex items-start gap-3\">\n              <div className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-status-info-bg/40 text-status-info-text\">\n                <Heart className=\"h-5 w-5\" />\n              </div>\n              <div className=\"min-w-0\">\n                <p className=\"text-sm font-medium text-text-primary\">\n                  This measures alignment with what you value — not\n                  productivity.\n                </p>\n                <p className=\"mt-1 text-sm text-text-secondary\">\n                  A restful, values-aligned day scores high. A busy day that\n                  touched nothing you care about scores low.\n                </p>\n              </div>\n            </div>\n          </GlassCard>\n\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n            <StatCard\n              title=\"Time accounted for\"\n              value={formatSecondsHuman(coveredSeconds)}\n              icon={<Clock className=\"h-5 w-5\" />}\n              description={`${secondsToHours(coveredSeconds)} hrs over ${days} days`}\n              iconBgColor=\"bg-status-info-bg text-status-info-text\"\n            />\n            <StatCard\n              title=\"Coverage confidence\"\n              value={`${coveragePct}%`}\n              icon={<Radar className=\"h-5 w-5\" />}\n              description=\"of the period logged\"\n            />\n            <StatCard\n              title=\"Life domains\"\n              value={String(domains.length)}\n              icon={<Layers className=\"h-5 w-5\" />}\n              description=\"with time or a target\"\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Per-domain alignment: actual share vs what you intended. */}\n      <GlassCard treatment=\"glass\" glow className=\"mt-6 p-4 sm:p-6\">\n        <div className=\"mb-4 flex items-start gap-3\">\n          <div className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary\">\n            <Scale className=\"h-5 w-5\" />\n          </div>\n          <div className=\"min-w-0\">\n            <h3 className=\"text-sm font-semibold text-text-primary\">\n              Where your time aligns\n            </h3>\n            <p className=\"mt-0.5 text-xs text-text-secondary\">\n              Your actual share of accounted time versus what you intended, by\n              life domain.\n            </p>\n          </div>\n        </div>\n\n        {domains.length === 0 ? (\n          <EmptyState\n            illustration=\"empty-data\"\n            title=\"No domain breakdown yet\"\n            description=\"As your time is captured across life domains, each one's alignment with your intentions will appear here.\"\n          />\n        ) : (\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {domains.map((d) => {\n              const level = alignLevel(d.gap);\n              const actualPct = Math.round(d.actualShare * 100);\n              const desiredPct = Math.round(d.desiredShare * 100);\n              const actualHuman = formatSecondsHuman(\n                d.actualShare * coveredSeconds,\n              );\n              return (\n                <GlassCard key={d.domain} treatment=\"metric\" className=\"p-4\">\n                  <div className=\"flex items-start justify-between gap-3\">\n                    <div className=\"min-w-0\">\n                      <p className=\"truncate text-sm font-medium text-text-primary\">\n                        {lifeDomainLabel(d.domain)}\n                      </p>\n                      <p className=\"mt-0.5 text-xs text-text-secondary\">\n                        {actualHuman} logged\n                      </p>\n                    </div>\n                    <StatusBadge\n                      variant={BADGE_VARIANT[level]}\n                      label={alignmentLabel(d.gap, level)}\n                    />\n                  </div>\n                  <ProgressMeter\n                    className=\"mt-3\"\n                    value={actualPct}\n                    max={100}\n                    tone={METER_TONE[level]}\n                    showValue={false}\n                    size=\"md\"\n                  />\n                  <div className=\"mt-1.5 flex items-center justify-between text-xs\">\n                    <span className=\"text-text-secondary\">\n                      You:{\" \"}\n                      <span className=\"tabular-nums text-text-primary\">\n                        {actualPct}%\n                      </span>\n                    </span>\n                    <span className=\"text-text-muted\">\n                      Intended:{\" \"}\n                      <span className=\"tabular-nums text-text-secondary\">\n                        {desiredPct}%\n                      </span>\n                    </span>\n                  </div>\n                </GlassCard>\n              );\n            })}\n          </div>\n        )}\n      </GlassCard>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}