@burdenoff/microfe-timecampus 2026.703.4 → 2026.703.5

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

@@ -0,0 +1,332 @@
+import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
+import { LoadingSkeleton as t } from "../../components/LoadingSkeleton.js";
+import { useMyLifeInWeeksQuery as ee, useMyLifeProfileQuery as te, useUpdateMyLifeProfileMutation as ne } from "../../../generated/wspace-operations.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { EmptyState as r } from "../../components/EmptyState.js";
+import { ChartCard as i } from "../../components/ChartCard.js";
+import { ToastContainer as a, useToast as o } from "../../components/Toast.js";
+import { Modal as s } from "../../components/Modal.js";
+import { DonutChart as re } from "../../components/charts/DonutChart.js";
+import { WeeksGrid as c } from "../../components/charts/WeeksGrid.js";
+import "../../components/index.js";
+import { formatSecondsHuman as l, lifeDomainLabel as ie } from "./domains.js";
+import { useMemo as ae, useState as u } from "react";
+import { ArrowRight as oe, CalendarDays as se, Hourglass as d, Lock as f, SlidersHorizontal as p, Sparkles as m } from "lucide-react";
+import { Fragment as ce, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { GlassCard as _ } from "@burdenoff/fe-libs/ui";
+//#region src/timecampus/pages/lifetime/FiniteLifePage.tsx
+function v(e) {
+	return Math.max(0, Math.round(e)).toLocaleString();
+}
+function y(e) {
+	return (Math.round(e / 52 * 10) / 10).toFixed(1);
+}
+function b(e) {
+	return e ? e.slice(0, 10) : "";
+}
+var x = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+function S() {
+	let { workspaceId: S = "" } = e(), { toasts: le, addToast: C, dismissToast: w } = o(), { data: T, loading: E, error: D, refetch: O } = ee({ skip: !S }), { data: k, loading: A, error: j, refetch: M } = te({ skip: !S }), [N, { loading: P }] = ne(), F = T?.myLifeInWeeks, I = k?.myLifeProfile, [L, R] = u(!1), [z, B] = u(""), [V, H] = u(""), [U, W] = u(!1), [G, K] = u(null), q = () => {
+		B(b(I?.birthDate ?? F?.birthDate)), H(I?.lifeExpectancyYears == null ? F?.lifeExpectancyYears == null ? "" : String(F.lifeExpectancyYears) : String(I.lifeExpectancyYears)), W(I?.hideRemainingWeeks ?? F?.hideRemainingWeeks ?? !1), K(null), R(!0);
+	}, ue = async (e) => {
+		if (e?.preventDefault(), K(null), !z) {
+			K("Please add your birth date to continue.");
+			return;
+		}
+		if (z > x) {
+			K("Your birth date can't be in the future.");
+			return;
+		}
+		let t = null;
+		if (V.trim() !== "") {
+			let e = Number(V);
+			if (!Number.isInteger(e) || e < 1 || e > 130) {
+				K("Life expectancy should be a whole number of years (1–130).");
+				return;
+			}
+			t = e;
+		}
+		try {
+			await N({ variables: { input: {
+				birthDate: (/* @__PURE__ */ new Date(`${z}T00:00:00.000Z`)).toISOString(),
+				lifeExpectancyYears: t,
+				hideRemainingWeeks: U,
+				finiteLifeOptIn: !0
+			} } }), await Promise.all([O(), M()]), R(!1), C({
+				variant: "success",
+				title: "Saved — this is just for you",
+				description: "You can change or turn this off anytime."
+			});
+		} catch {
+			C({
+				variant: "error",
+				title: "Couldn't save your settings",
+				description: "Please try again in a moment."
+			});
+		}
+	}, J = !!F?.birthDate, Y = F?.hideRemainingWeeks ?? I?.hideRemainingWeeks ?? !1, X = F?.weeksLived ?? null, Z = F?.lifeExpectancyYears ?? null, de = Y ? null : F?.expectedTotalWeeks ?? null, Q = Y || F?.weeksRemaining == null ? null : F.weeksRemaining, $ = ae(() => (F?.domainRollups ?? []).filter((e) => e.totalSeconds > 0).map((e) => ({
+		name: ie(e.domain),
+		value: e.totalSeconds
+	})), [F?.domainRollups]), fe = $.reduce((e, t) => e + t.value, 0);
+	return (E || A) && !F && !I ? /* @__PURE__ */ h(n, {
+		title: "Your Life in Weeks",
+		description: "A calm, private view of the weeks you've lived — and the ones still ahead.",
+		children: /* @__PURE__ */ h(t, { variant: "detail" })
+	}) : /* @__PURE__ */ g(n, {
+		title: "Your Life in Weeks",
+		description: "A calm, private view of the weeks you've lived — and the ones still ahead.",
+		purpose: "Each square is a single week of your life. It's a gentle memento — not a countdown — meant only for you, to help this week feel a little more intentional.",
+		actions: /* @__PURE__ */ g("button", {
+			type: "button",
+			onClick: q,
+			className: "inline-flex items-center gap-1.5 rounded-md border border-border-subtle bg-bg-surface px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+			children: [/* @__PURE__ */ h(p, { className: "h-4 w-4" }), "Life settings"]
+		}),
+		children: [
+			(D || j) && !F && !I ? /* @__PURE__ */ h("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 life view right now. Please try again in a moment."
+			}) : /* @__PURE__ */ g("div", {
+				className: "space-y-6",
+				children: [
+					/* @__PURE__ */ g("div", {
+						className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
+						children: [/* @__PURE__ */ h("div", {
+							className: "lg:col-span-2",
+							children: /* @__PURE__ */ g(i, {
+								title: "Your life in weeks",
+								description: J ? "Each row is a year; each square, a week you have lived or have yet to live." : "Add your birth date to fill in the weeks you've already lived.",
+								children: [/* @__PURE__ */ h(c, {
+									weeksLived: X,
+									totalWeeks: de,
+									ariaLabel: J ? `Your life in weeks: ${v(X ?? 0)} weeks lived so far` : "Your life in weeks — birth date not set yet"
+								}), /* @__PURE__ */ g("div", {
+									className: "mt-4 flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-text-secondary",
+									children: [
+										/* @__PURE__ */ g("span", {
+											className: "flex items-center gap-1.5",
+											children: [/* @__PURE__ */ h("span", { className: "h-3 w-3 rounded-[3px] bg-action-primary-bg" }), "Weeks lived"]
+										}),
+										/* @__PURE__ */ g("span", {
+											className: "flex items-center gap-1.5",
+											children: [/* @__PURE__ */ h("span", { className: "h-3 w-3 rounded-[3px] border-2 border-action-primary-bg bg-bg-surface" }), "This week"]
+										}),
+										/* @__PURE__ */ g("span", {
+											className: "flex items-center gap-1.5",
+											children: [/* @__PURE__ */ h("span", { className: "h-3 w-3 rounded-[3px] border border-border-seam" }), "Ahead"]
+										})
+									]
+								})]
+							})
+						}), /* @__PURE__ */ g(_, {
+							treatment: "glass",
+							glow: !0,
+							className: "flex flex-col p-5 sm:p-6",
+							children: [
+								/* @__PURE__ */ h("div", {
+									className: "flex h-10 w-10 items-center justify-center rounded-xl bg-action-primary-bg/10 text-primary",
+									children: /* @__PURE__ */ h(d, { className: "h-5 w-5" })
+								}),
+								J ? /* @__PURE__ */ g("div", {
+									className: "mt-4 space-y-5",
+									children: [
+										/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
+											className: "text-sm text-text-secondary",
+											children: "You have lived"
+										}), /* @__PURE__ */ g("p", {
+											className: "mt-0.5 text-3xl font-bold tabular-nums text-text-primary",
+											children: [
+												v(X ?? 0),
+												" ",
+												/* @__PURE__ */ h("span", {
+													className: "text-xl font-semibold text-text-secondary",
+													children: "weeks"
+												})
+											]
+										})] }),
+										Z != null && Q != null ? /* @__PURE__ */ g("div", { children: [
+											/* @__PURE__ */ g("p", {
+												className: "text-sm text-text-secondary",
+												children: [
+													"If you live to ",
+													Z,
+													", about"
+												]
+											}),
+											/* @__PURE__ */ g("p", {
+												className: "mt-0.5 text-2xl font-bold tabular-nums text-text-primary",
+												children: [
+													v(Q),
+													" ",
+													/* @__PURE__ */ h("span", {
+														className: "text-lg font-semibold text-text-secondary",
+														children: "remain"
+													})
+												]
+											}),
+											/* @__PURE__ */ g("p", {
+												className: "mt-1 text-xs text-text-secondary",
+												children: [
+													y(X ?? 0),
+													" years lived ·",
+													" ",
+													y(Q),
+													" years ahead"
+												]
+											})
+										] }) : /* @__PURE__ */ h("p", {
+											className: "text-xs text-text-secondary",
+											children: Y ? "You've chosen to see only the weeks you've lived." : "Add a life expectancy in settings to gently sketch the weeks ahead."
+										}),
+										/* @__PURE__ */ h("div", {
+											className: "rounded-lg border border-border-seam bg-bg-surface/40 p-3",
+											children: /* @__PURE__ */ g("p", {
+												className: "flex items-start gap-2 text-sm text-text-primary",
+												children: [/* @__PURE__ */ h(m, { className: "mt-0.5 h-4 w-4 shrink-0 text-primary" }), /* @__PURE__ */ h("span", { children: "What if today was your last? Make this week count." })]
+											})
+										})
+									]
+								}) : /* @__PURE__ */ g("div", {
+									className: "mt-4 space-y-4",
+									children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h3", {
+										className: "text-base font-semibold text-text-primary",
+										children: "See your life in weeks"
+									}), /* @__PURE__ */ h("p", {
+										className: "mt-1 text-sm text-text-secondary",
+										children: "Add your birth date and we'll gently fill in the weeks you've lived so far — a quiet reminder that time is finite, and this week is yours to spend."
+									})] }), /* @__PURE__ */ g("button", {
+										type: "button",
+										onClick: q,
+										className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
+										children: ["Add your birth date", /* @__PURE__ */ h(oe, { className: "h-4 w-4" })]
+									})]
+								}),
+								/* @__PURE__ */ g("p", {
+									className: "mt-6 flex items-start gap-1.5 text-xs text-text-secondary",
+									children: [/* @__PURE__ */ h(f, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ h("span", { children: "Only you can see this. Your birth date is never shared, and you can turn this off anytime." })]
+								})
+							]
+						})]
+					}),
+					$.length > 0 && /* @__PURE__ */ h(i, {
+						title: "Where your recent weeks went",
+						description: "How your logged time settled across life's domains lately — a mirror, not a scorecard.",
+						children: /* @__PURE__ */ h(re, {
+							data: $,
+							centerLabel: "logged lately",
+							centerValue: l(fe),
+							valueFormat: (e) => l(e),
+							emptyLabel: "Nothing logged in this window yet.",
+							ariaLabel: "Recent time by life domain"
+						})
+					}),
+					J && $.length === 0 && /* @__PURE__ */ h(r, {
+						title: "Your weeks are yours to shape",
+						description: "As you capture how you spend your time, a quiet reflection of your recent weeks will appear here — only for you."
+					})
+				]
+			}),
+			/* @__PURE__ */ h(s, {
+				open: L,
+				onClose: () => R(!1),
+				title: "Your life in weeks",
+				description: "This is private and entirely optional. Add only what feels comfortable.",
+				footer: /* @__PURE__ */ g(ce, { children: [/* @__PURE__ */ h("button", {
+					type: "button",
+					onClick: () => R(!1),
+					className: "rounded-md border border-border-subtle px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken hover:text-text-primary",
+					children: "Cancel"
+				}), /* @__PURE__ */ h("button", {
+					type: "submit",
+					form: "finite-life-setup",
+					disabled: P,
+					className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50",
+					children: P ? "Saving…" : "Save"
+				})] }),
+				children: /* @__PURE__ */ g("form", {
+					id: "finite-life-setup",
+					onSubmit: ue,
+					className: "space-y-5",
+					children: [
+						/* @__PURE__ */ g("div", { children: [
+							/* @__PURE__ */ g("label", {
+								htmlFor: "finite-life-birthdate",
+								className: "flex items-center gap-1.5 text-sm font-medium text-text-primary",
+								children: [/* @__PURE__ */ h(se, { className: "h-4 w-4 text-text-secondary" }), "Your birth date"]
+							}),
+							/* @__PURE__ */ h("input", {
+								id: "finite-life-birthdate",
+								type: "date",
+								value: z,
+								max: x,
+								onChange: (e) => B(e.target.value),
+								className: "mt-2 w-full rounded-lg border border-border-subtle bg-bg-sunken px-3 py-2 text-sm text-text-primary"
+							}),
+							/* @__PURE__ */ h("p", {
+								className: "mt-1.5 text-xs text-text-secondary",
+								children: "Used only to count the weeks you've lived. It stays with you."
+							})
+						] }),
+						/* @__PURE__ */ g("div", { children: [
+							/* @__PURE__ */ g("label", {
+								htmlFor: "finite-life-expectancy",
+								className: "text-sm font-medium text-text-primary",
+								children: [
+									"Life expectancy",
+									" ",
+									/* @__PURE__ */ h("span", {
+										className: "font-normal text-text-secondary",
+										children: "(optional)"
+									})
+								]
+							}),
+							/* @__PURE__ */ h("input", {
+								id: "finite-life-expectancy",
+								type: "number",
+								inputMode: "numeric",
+								min: 1,
+								max: 130,
+								step: 1,
+								placeholder: "e.g. 90",
+								value: V,
+								onChange: (e) => H(e.target.value),
+								className: "mt-2 w-full rounded-lg border border-border-subtle bg-bg-sunken px-3 py-2 text-sm text-text-primary"
+							}),
+							/* @__PURE__ */ h("p", {
+								className: "mt-1.5 text-xs text-text-secondary",
+								children: "A gentle horizon for the weeks ahead — never a deadline. Leave it blank to simply see the weeks you've lived."
+							})
+						] }),
+						/* @__PURE__ */ g("label", {
+							className: "flex items-start gap-2.5 rounded-lg border border-border-subtle bg-bg-surface/40 p-3",
+							children: [/* @__PURE__ */ h("input", {
+								type: "checkbox",
+								checked: U,
+								onChange: (e) => W(e.target.checked),
+								className: "mt-0.5 h-4 w-4 shrink-0 rounded border-border-subtle"
+							}), /* @__PURE__ */ g("span", {
+								className: "text-sm text-text-primary",
+								children: ["Hide the weeks ahead", /* @__PURE__ */ h("span", {
+									className: "mt-0.5 block text-xs text-text-secondary",
+									children: "Show only the weeks you've lived — no horizon, no countdown."
+								})]
+							})]
+						}),
+						G && /* @__PURE__ */ h("p", {
+							className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 px-3 py-2 text-sm text-status-error-text",
+							children: G
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ h(a, {
+				toasts: le,
+				onDismiss: w
+			})
+		]
+	});
+}
+//#endregion
+export { S as FiniteLifePage };
+
+//# sourceMappingURL=FiniteLifePage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FiniteLifePage.js","names":[],"sources":["../../../../src/timecampus/pages/lifetime/FiniteLifePage.tsx"],"sourcesContent":["import { useMemo, useState, type FormEvent } from \"react\";\nimport {\n  Hourglass,\n  Sparkles,\n  SlidersHorizontal,\n  CalendarDays,\n  Lock,\n  ArrowRight,\n} from \"lucide-react\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport {\n  PageLayout,\n  ChartCard,\n  EmptyState,\n  Modal,\n  DonutChart,\n  WeeksGrid,\n  LoadingSkeleton,\n  ToastContainer,\n  useToast,\n  type DonutSlice,\n} from \"../../components\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useMyLifeInWeeksQuery,\n  useMyLifeProfileQuery,\n  useUpdateMyLifeProfileMutation,\n  type MyLifeInWeeksQuery,\n} from \"@/generated/wspace-operations\";\nimport { lifeDomainLabel, formatSecondsHuman } from \"./domains\";\n\n/** One life-domain roll-up row, typed from the generated query result. */\ntype LifeDomainRollup =\n  MyLifeInWeeksQuery[\"myLifeInWeeks\"][\"domainRollups\"][number];\n\n/** Grouped integer (e.g. 1,742). */\nfunction nf(n: number): string {\n  return Math.max(0, Math.round(n)).toLocaleString();\n}\n\n/** Whole-week count → years with one decimal (e.g. 33.5). */\nfunction weeksToYears(weeks: number): string {\n  return (Math.round((weeks / 52) * 10) / 10).toFixed(1);\n}\n\n/** ISO datetime → the `YYYY-MM-DD` a native date input expects. */\nfunction isoToDateInput(iso: string | null | undefined): string {\n  if (!iso) return \"\";\n  return iso.slice(0, 10);\n}\n\nconst TODAY_DATE_INPUT = new Date().toISOString().slice(0, 10);\n\n/**\n * FiniteLifePage — the finite-life \"your life in weeks\" memento.\n *\n * A calm, opt-in, entirely private reflection: each cell is one week of a life,\n * anchored to the gentle north star \"What if today was your last?\". Everything\n * it draws comes from the viewer's own (optional) birth date and life\n * expectancy — never a guessed age or an invented mortality date. It is\n * self-scoped (identity travels in the gateway headers, so the queries take no\n * user argument) and honest by construction: with no birth date it still\n * renders an open horizon and simply invites you to add one. It respects the\n * `hideRemainingWeeks` choice so no one is forced to stare down a countdown.\n */\nexport function FiniteLifePage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n  const { toasts, addToast, dismissToast } = useToast();\n\n  const {\n    data: weeksData,\n    loading: weeksLoading,\n    error: weeksError,\n    refetch: refetchWeeks,\n  } = useMyLifeInWeeksQuery({ skip: !workspaceId });\n\n  const {\n    data: profileData,\n    loading: profileLoading,\n    error: profileError,\n    refetch: refetchProfile,\n  } = useMyLifeProfileQuery({ skip: !workspaceId });\n\n  const [updateProfile, { loading: saving }] = useUpdateMyLifeProfileMutation();\n\n  const weeks = weeksData?.myLifeInWeeks;\n  const profile = profileData?.myLifeProfile;\n\n  // ---- Setup modal (opt-in, dismissible) -----------------------------------\n  const [setupOpen, setSetupOpen] = useState(false);\n  const [birthDateInput, setBirthDateInput] = useState(\"\");\n  const [expectancyInput, setExpectancyInput] = useState(\"\");\n  const [hideRemainingInput, setHideRemainingInput] = useState(false);\n  const [formError, setFormError] = useState<string | null>(null);\n\n  const openSetup = () => {\n    setBirthDateInput(isoToDateInput(profile?.birthDate ?? weeks?.birthDate));\n    setExpectancyInput(\n      profile?.lifeExpectancyYears != null\n        ? String(profile.lifeExpectancyYears)\n        : weeks?.lifeExpectancyYears != null\n          ? String(weeks.lifeExpectancyYears)\n          : \"\",\n    );\n    setHideRemainingInput(\n      profile?.hideRemainingWeeks ?? weeks?.hideRemainingWeeks ?? false,\n    );\n    setFormError(null);\n    setSetupOpen(true);\n  };\n\n  const handleSave = async (e?: FormEvent) => {\n    e?.preventDefault();\n    setFormError(null);\n\n    if (!birthDateInput) {\n      setFormError(\"Please add your birth date to continue.\");\n      return;\n    }\n    if (birthDateInput > TODAY_DATE_INPUT) {\n      setFormError(\"Your birth date can't be in the future.\");\n      return;\n    }\n\n    let expectancy: number | null = null;\n    if (expectancyInput.trim() !== \"\") {\n      const parsed = Number(expectancyInput);\n      if (!Number.isInteger(parsed) || parsed < 1 || parsed > 130) {\n        setFormError(\"Life expectancy should be a whole number of years (1–130).\");\n        return;\n      }\n      expectancy = parsed;\n    }\n\n    try {\n      await updateProfile({\n        variables: {\n          input: {\n            birthDate: new Date(`${birthDateInput}T00:00:00.000Z`).toISOString(),\n            lifeExpectancyYears: expectancy,\n            hideRemainingWeeks: hideRemainingInput,\n            finiteLifeOptIn: true,\n          },\n        },\n      });\n      await Promise.all([refetchWeeks(), refetchProfile()]);\n      setSetupOpen(false);\n      addToast({\n        variant: \"success\",\n        title: \"Saved — this is just for you\",\n        description: \"You can change or turn this off anytime.\",\n      });\n    } catch {\n      addToast({\n        variant: \"error\",\n        title: \"Couldn't save your settings\",\n        description: \"Please try again in a moment.\",\n      });\n    }\n  };\n\n  // ---- Derived, honest values ----------------------------------------------\n  const hasBirthDate = !!weeks?.birthDate;\n  const hideRemaining =\n    weeks?.hideRemainingWeeks ?? profile?.hideRemainingWeeks ?? false;\n\n  const weeksLived = weeks?.weeksLived ?? null;\n  const expectancyYears = weeks?.lifeExpectancyYears ?? null;\n  // Only reveal the full mortal horizon when the user hasn't asked to hide it.\n  const gridTotalWeeks = hideRemaining ? null : (weeks?.expectedTotalWeeks ?? null);\n  const weeksRemaining =\n    hideRemaining || weeks?.weeksRemaining == null ? null : weeks.weeksRemaining;\n\n  // Reflection: where the recent (backend-defined) window actually went.\n  const domainSlices: DonutSlice[] = useMemo(() => {\n    const rollups: LifeDomainRollup[] = weeks?.domainRollups ?? [];\n    return rollups\n      .filter((r) => r.totalSeconds > 0)\n      .map((r) => ({\n        name: lifeDomainLabel(r.domain),\n        value: r.totalSeconds,\n      }));\n  }, [weeks?.domainRollups]);\n  const rollupTotalSeconds = domainSlices.reduce((sum, s) => sum + s.value, 0);\n\n  const loading = weeksLoading || profileLoading;\n  const hardError = (weeksError || profileError) && !weeks && !profile;\n\n  const setupAction = (\n    <button\n      type=\"button\"\n      onClick={openSetup}\n      className=\"inline-flex items-center gap-1.5 rounded-md border border-border-subtle bg-bg-surface px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n    >\n      <SlidersHorizontal className=\"h-4 w-4\" />\n      Life settings\n    </button>\n  );\n\n  if (loading && !weeks && !profile) {\n    return (\n      <PageLayout\n        title=\"Your Life in Weeks\"\n        description=\"A calm, private view of the weeks you've lived — and the ones still ahead.\"\n      >\n        <LoadingSkeleton variant=\"detail\" />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Your Life in Weeks\"\n      description=\"A calm, private view of the weeks you've lived — and the ones still ahead.\"\n      purpose=\"Each square is a single week of your life. It's a gentle memento — not a countdown — meant only for you, to help this week feel a little more intentional.\"\n      actions={setupAction}\n    >\n      {hardError ? (\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 life view right now. Please try again in a moment.\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n            {/* The grid — the memento itself */}\n            <div className=\"lg:col-span-2\">\n              <ChartCard\n                title=\"Your life in weeks\"\n                description={\n                  hasBirthDate\n                    ? \"Each row is a year; each square, a week you have lived or have yet to live.\"\n                    : \"Add your birth date to fill in the weeks you've already lived.\"\n                }\n              >\n                <WeeksGrid\n                  weeksLived={weeksLived}\n                  totalWeeks={gridTotalWeeks}\n                  ariaLabel={\n                    hasBirthDate\n                      ? `Your life in weeks: ${nf(weeksLived ?? 0)} weeks lived so far`\n                      : \"Your life in weeks — birth date not set yet\"\n                  }\n                />\n                <div className=\"mt-4 flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-text-secondary\">\n                  <span className=\"flex items-center gap-1.5\">\n                    <span className=\"h-3 w-3 rounded-[3px] bg-action-primary-bg\" />\n                    Weeks lived\n                  </span>\n                  <span className=\"flex items-center gap-1.5\">\n                    <span className=\"h-3 w-3 rounded-[3px] border-2 border-action-primary-bg bg-bg-surface\" />\n                    This week\n                  </span>\n                  <span className=\"flex items-center gap-1.5\">\n                    <span className=\"h-3 w-3 rounded-[3px] border border-border-seam\" />\n                    Ahead\n                  </span>\n                </div>\n              </ChartCard>\n            </div>\n\n            {/* The calm side card */}\n            <GlassCard treatment=\"glass\" glow className=\"flex flex-col p-5 sm:p-6\">\n              <div className=\"flex h-10 w-10 items-center justify-center rounded-xl bg-action-primary-bg/10 text-primary\">\n                <Hourglass className=\"h-5 w-5\" />\n              </div>\n\n              {hasBirthDate ? (\n                <div className=\"mt-4 space-y-5\">\n                  <div>\n                    <p className=\"text-sm text-text-secondary\">You have lived</p>\n                    <p className=\"mt-0.5 text-3xl font-bold tabular-nums text-text-primary\">\n                      {nf(weeksLived ?? 0)}{\" \"}\n                      <span className=\"text-xl font-semibold text-text-secondary\">\n                        weeks\n                      </span>\n                    </p>\n                  </div>\n\n                  {expectancyYears != null && weeksRemaining != null ? (\n                    <div>\n                      <p className=\"text-sm text-text-secondary\">\n                        If you live to {expectancyYears}, about\n                      </p>\n                      <p className=\"mt-0.5 text-2xl font-bold tabular-nums text-text-primary\">\n                        {nf(weeksRemaining)}{\" \"}\n                        <span className=\"text-lg font-semibold text-text-secondary\">\n                          remain\n                        </span>\n                      </p>\n                      <p className=\"mt-1 text-xs text-text-secondary\">\n                        {weeksToYears(weeksLived ?? 0)} years lived ·{\" \"}\n                        {weeksToYears(weeksRemaining)} years ahead\n                      </p>\n                    </div>\n                  ) : (\n                    <p className=\"text-xs text-text-secondary\">\n                      {hideRemaining\n                        ? \"You've chosen to see only the weeks you've lived.\"\n                        : \"Add a life expectancy in settings to gently sketch the weeks ahead.\"}\n                    </p>\n                  )}\n\n                  <div className=\"rounded-lg border border-border-seam bg-bg-surface/40 p-3\">\n                    <p className=\"flex items-start gap-2 text-sm text-text-primary\">\n                      <Sparkles className=\"mt-0.5 h-4 w-4 shrink-0 text-primary\" />\n                      <span>\n                        What if today was your last? Make this week count.\n                      </span>\n                    </p>\n                  </div>\n                </div>\n              ) : (\n                <div className=\"mt-4 space-y-4\">\n                  <div>\n                    <h3 className=\"text-base font-semibold text-text-primary\">\n                      See your life in weeks\n                    </h3>\n                    <p className=\"mt-1 text-sm text-text-secondary\">\n                      Add your birth date and we'll gently fill in the weeks\n                      you've lived so far — a quiet reminder that time is finite,\n                      and this week is yours to spend.\n                    </p>\n                  </div>\n                  <button\n                    type=\"button\"\n                    onClick={openSetup}\n                    className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n                  >\n                    Add your birth date\n                    <ArrowRight className=\"h-4 w-4\" />\n                  </button>\n                </div>\n              )}\n\n              <p className=\"mt-6 flex items-start gap-1.5 text-xs text-text-secondary\">\n                <Lock className=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n                <span>\n                  Only you can see this. Your birth date is never shared, and you\n                  can turn this off anytime.\n                </span>\n              </p>\n            </GlassCard>\n          </div>\n\n          {/* Gentle reflection — only when there's real recent data to show */}\n          {domainSlices.length > 0 && (\n            <ChartCard\n              title=\"Where your recent weeks went\"\n              description=\"How your logged time settled across life's domains lately — a mirror, not a scorecard.\"\n            >\n              <DonutChart\n                data={domainSlices}\n                centerLabel=\"logged lately\"\n                centerValue={formatSecondsHuman(rollupTotalSeconds)}\n                valueFormat={(v) => formatSecondsHuman(v)}\n                emptyLabel=\"Nothing logged in this window yet.\"\n                ariaLabel=\"Recent time by life domain\"\n              />\n            </ChartCard>\n          )}\n\n          {/* Honest first-run nudge when nothing has been logged either */}\n          {hasBirthDate && domainSlices.length === 0 && (\n            <EmptyState\n              title=\"Your weeks are yours to shape\"\n              description=\"As you capture how you spend your time, a quiet reflection of your recent weeks will appear here — only for you.\"\n            />\n          )}\n        </div>\n      )}\n\n      {/* Opt-in setup */}\n      <Modal\n        open={setupOpen}\n        onClose={() => setSetupOpen(false)}\n        title=\"Your life in weeks\"\n        description=\"This is private and entirely optional. Add only what feels comfortable.\"\n        footer={\n          <>\n            <button\n              type=\"button\"\n              onClick={() => setSetupOpen(false)}\n              className=\"rounded-md border border-border-subtle px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken hover:text-text-primary\"\n            >\n              Cancel\n            </button>\n            <button\n              type=\"submit\"\n              form=\"finite-life-setup\"\n              disabled={saving}\n              className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50\"\n            >\n              {saving ? \"Saving…\" : \"Save\"}\n            </button>\n          </>\n        }\n      >\n        <form id=\"finite-life-setup\" onSubmit={handleSave} className=\"space-y-5\">\n          <div>\n            <label\n              htmlFor=\"finite-life-birthdate\"\n              className=\"flex items-center gap-1.5 text-sm font-medium text-text-primary\"\n            >\n              <CalendarDays className=\"h-4 w-4 text-text-secondary\" />\n              Your birth date\n            </label>\n            <input\n              id=\"finite-life-birthdate\"\n              type=\"date\"\n              value={birthDateInput}\n              max={TODAY_DATE_INPUT}\n              onChange={(e) => setBirthDateInput(e.target.value)}\n              className=\"mt-2 w-full rounded-lg border border-border-subtle bg-bg-sunken px-3 py-2 text-sm text-text-primary\"\n            />\n            <p className=\"mt-1.5 text-xs text-text-secondary\">\n              Used only to count the weeks you've lived. It stays with you.\n            </p>\n          </div>\n\n          <div>\n            <label\n              htmlFor=\"finite-life-expectancy\"\n              className=\"text-sm font-medium text-text-primary\"\n            >\n              Life expectancy{\" \"}\n              <span className=\"font-normal text-text-secondary\">(optional)</span>\n            </label>\n            <input\n              id=\"finite-life-expectancy\"\n              type=\"number\"\n              inputMode=\"numeric\"\n              min={1}\n              max={130}\n              step={1}\n              placeholder=\"e.g. 90\"\n              value={expectancyInput}\n              onChange={(e) => setExpectancyInput(e.target.value)}\n              className=\"mt-2 w-full rounded-lg border border-border-subtle bg-bg-sunken px-3 py-2 text-sm text-text-primary\"\n            />\n            <p className=\"mt-1.5 text-xs text-text-secondary\">\n              A gentle horizon for the weeks ahead — never a deadline. Leave it\n              blank to simply see the weeks you've lived.\n            </p>\n          </div>\n\n          <label className=\"flex items-start gap-2.5 rounded-lg border border-border-subtle bg-bg-surface/40 p-3\">\n            <input\n              type=\"checkbox\"\n              checked={hideRemainingInput}\n              onChange={(e) => setHideRemainingInput(e.target.checked)}\n              className=\"mt-0.5 h-4 w-4 shrink-0 rounded border-border-subtle\"\n            />\n            <span className=\"text-sm text-text-primary\">\n              Hide the weeks ahead\n              <span className=\"mt-0.5 block text-xs text-text-secondary\">\n                Show only the weeks you've lived — no horizon, no countdown.\n              </span>\n            </span>\n          </label>\n\n          {formError && (\n            <p className=\"rounded-lg border border-status-error-border/50 bg-status-error-bg/10 px-3 py-2 text-sm text-status-error-text\">\n              {formError}\n            </p>\n          )}\n        </form>\n      </Modal>\n\n      <ToastContainer toasts={toasts} onDismiss={dismissToast} />\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}