@burdenoff/microfe-auth 2026.624.2 → 2026.625.1

package/dist/auth/pages/UserProfilePage.js

@@ -7,28 +7,30 @@ import { useEffect as u, useId as d, useRef as f, useState as p } from "react";
 import { useNavigate as m } from "react-router-dom";
 import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
-import { useGatewayClient as y } from "@burdenoff/fe-libs/shared/graphql";
-import { useAuth as b } from "@burdenoff/fe-libs/shared/providers/shell/AuthProvider";
+import { Button as y } from "@burdenoff/fe-libs/button";
+import { NextSteps as b, PagePurpose as x } from "@burdenoff/fe-libs/ui";
+import { useGatewayClient as S } from "@burdenoff/fe-libs/shared/graphql";
+import { useAuth as C } from "@burdenoff/fe-libs/shared/providers/shell/AuthProvider";
 //#region src/auth/pages/UserProfilePage.tsx
-function x() {
-	let { t: x } = h(), S = (e, t) => {
-		let n = x(e);
+function w() {
+	let { t: w } = h(), T = (e, t) => {
+		let n = w(e);
 		return n === e ? t : n;
-	}, C = m(), w = b(), T = e((e) => e.isAuthenticated), E = e((e) => e.user), D = e((e) => e.setUser), { updateCurrentUserProfile: O, isLoading: k } = s(), A = d(), j = d(), M = d(), N = d(), P = d(), F = e((e) => e.currentWorkspaceId), I = y("workspace"), [L] = l({ client: I }), [R] = c({ client: I }), z = f(null), [B, V] = p(!1), H = async (e) => {
+	}, E = m(), D = C(), O = e((e) => e.isAuthenticated), k = e((e) => e.user), A = e((e) => e.setUser), { updateCurrentUserProfile: j, isLoading: M } = s(), N = d(), P = d(), F = d(), I = d(), L = d(), R = e((e) => e.currentWorkspaceId), z = S("workspace"), [B] = l({ client: z }), [V] = c({ client: z }), H = f(null), [U, W] = p(!1), G = async (e) => {
 		let t = e.target.files?.[0];
 		if (!t) return;
 		if (!t.type.startsWith("image/")) {
-			J(S("auth.profile.invalidImageType", "Please select an image file"));
+			Z(T("auth.profile.invalidImageType", "Please select an image file"));
 			return;
 		}
-		if (!F) {
-			J(S("auth.profile.noWorkspace", "Please select a workspace before uploading a profile picture"));
+		if (!R) {
+			Z(T("auth.profile.noWorkspace", "Please select a workspace before uploading a profile picture"));
 			return;
 		}
-		V(!0), J(null);
-		let n = { "x-workspace-id": F };
+		W(!0), Z(null);
+		let n = { "x-workspace-id": R };
 		try {
-			let e = t.name.split(".").pop()?.toLowerCase() ?? "", r = await L({
+			let e = t.name.split(".").pop()?.toLowerCase() ?? "", r = await B({
 				variables: { input: {
 					fileName: t.name,
 					fileSize: t.size.toString(),
@@ -43,38 +45,38 @@ function x() {
 				headers: { "Content-Type": t.type },
 				body: t
 			})).ok) throw Error("Failed to upload file");
-			let o = (await R({
+			let o = (await V({
 				variables: { input: { sessionId: i.id } },
 				context: { headers: n }
 			})).data?.completeUpload.file?.downloadUrl;
 			if (!o) throw Error("Upload succeeded but no URL returned");
-			await O({ avatar: o }), E && D({
-				...E,
+			await j({ avatar: o }), k && A({
+				...k,
 				avatar: o
-			}), w.updateUser({ avatar: o }), X(S("auth.profile.avatarUpdated", "Profile picture updated!"));
+			}), D.updateUser({ avatar: o }), $(T("auth.profile.avatarUpdated", "Profile picture updated!"));
 		} catch (e) {
-			J(e instanceof Error ? e.message : S("auth.profile.avatarFailed", "Failed to upload picture"));
+			Z(e instanceof Error ? e.message : T("auth.profile.avatarFailed", "Failed to upload picture"));
 		} finally {
-			V(!1), z.current && (z.current.value = "");
+			W(!1), H.current && (H.current.value = "");
 		}
-	}, [U, W] = p(!1), [G, K] = p({
+	}, [K, q] = p(!1), [J, Y] = p({
 		username: "",
 		firstName: "",
 		lastName: "",
 		name: "",
 		phoneNumber: ""
-	}), [q, J] = p(null), [Y, X] = p(null);
+	}), [X, Z] = p(null), [Q, $] = p(null);
 	return u(() => {
-		E && K({
-			username: E.username || "",
-			firstName: E.firstName || "",
-			lastName: E.lastName || "",
-			name: E.name || "",
-			phoneNumber: E.phoneNumber || ""
+		k && Y({
+			username: k.username || "",
+			firstName: k.firstName || "",
+			lastName: k.lastName || "",
+			name: k.name || "",
+			phoneNumber: k.phoneNumber || ""
 		});
-	}, [E]), !T || !E ? /* @__PURE__ */ _(t, {
-		title: S("auth.profile.title", "Profile"),
-		subtitle: S("auth.profile.subtitle", "View and manage your profile"),
+	}, [k]), !O || !k ? /* @__PURE__ */ _(t, {
+		title: T("auth.profile.title", "Profile"),
+		subtitle: T("auth.profile.subtitle", "View and manage your profile"),
 		children: /* @__PURE__ */ v("div", {
 			className: "text-center py-12",
 			children: [
@@ -84,17 +86,19 @@ function x() {
 				}),
 				/* @__PURE__ */ _("h2", {
 					className: "text-xl font-semibold text-[var(--color-text-primary)] mb-2",
-					children: S("auth.profile.authRequired", "Authentication Required")
+					children: T("auth.profile.authRequired", "Authentication Required")
 				}),
 				/* @__PURE__ */ _("p", {
 					className: "text-[var(--color-text-secondary)] mb-6",
-					children: S("auth.profile.signInToView", "Please sign in to view your profile")
+					children: T("auth.profile.signInToView", "Please sign in to view your profile")
 				}),
-				/* @__PURE__ */ _("button", {
+				/* @__PURE__ */ _(y, {
 					type: "button",
-					onClick: () => C("/auth/login"),
-					className: "auth-primary-button px-6 py-3 font-semibold",
-					children: S("auth.profile.signIn", "Sign In")
+					onClick: () => E("/auth/login"),
+					variant: "default",
+					size: "lg",
+					className: "font-semibold",
+					children: T("auth.profile.signIn", "Sign In")
 				})
 			]
 		})
@@ -103,31 +107,38 @@ function x() {
 		children: [
 			/* @__PURE__ */ v("div", {
 				className: "mb-8",
-				children: [/* @__PURE__ */ _("h1", {
-					className: "text-3xl font-semibold text-[var(--color-text-primary)]",
-					children: S("auth.profile.myProfile", "My Profile")
-				}), /* @__PURE__ */ _("p", {
-					className: "text-[var(--color-text-secondary)] mt-2",
-					children: S("auth.profile.viewAndManage", "View and manage your account information")
-				})]
+				children: [
+					/* @__PURE__ */ _("h1", {
+						className: "text-3xl font-semibold text-[var(--color-text-primary)]",
+						children: T("auth.profile.myProfile", "My Profile")
+					}),
+					/* @__PURE__ */ _("p", {
+						className: "text-[var(--color-text-secondary)] mt-2",
+						children: T("auth.profile.viewAndManage", "View and manage your account information")
+					}),
+					/* @__PURE__ */ _(x, {
+						className: "mt-3",
+						children: T("auth.profile.purpose", "This is how you appear across the platform. Update your name, photo, and contact details here — teammates see this information, and we use your email for sign-in and important notices.")
+					})
+				]
 			}),
-			Y && /* @__PURE__ */ v("div", {
+			Q && /* @__PURE__ */ v("div", {
 				className: "mb-6 flex items-center gap-3 p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]",
 				children: [
 					/* @__PURE__ */ _(r, { className: "size-5 text-[var(--color-status-success-text)] flex-shrink-0" }),
 					/* @__PURE__ */ _("p", {
 						className: "text-[var(--color-status-success-text)]",
-						children: Y
+						children: Q
 					}),
 					/* @__PURE__ */ _("button", {
 						type: "button",
-						onClick: () => X(null),
+						onClick: () => $(null),
 						className: "ml-auto text-sm text-[var(--color-status-success-text)] hover:underline transition-colors duration-200",
-						children: S("auth.profile.dismiss", "Dismiss")
+						children: T("auth.profile.dismiss", "Dismiss")
 					})
 				]
 			}),
-			q && /* @__PURE__ */ v("div", {
+			X && /* @__PURE__ */ v("div", {
 				className: "mb-6 flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]",
 				children: [
 					/* @__PURE__ */ _(n, { className: "size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5" }),
@@ -135,41 +146,41 @@ function x() {
 						className: "flex-1",
 						children: /* @__PURE__ */ _("p", {
 							className: "text-sm text-[var(--color-status-error-text)]",
-							children: q
+							children: X
 						})
 					}),
 					/* @__PURE__ */ _("button", {
 						type: "button",
-						onClick: () => J(null),
+						onClick: () => Z(null),
 						className: "text-sm text-[var(--color-status-error-text)] hover:underline transition-colors duration-200",
-						children: S("auth.profile.dismiss", "Dismiss")
+						children: T("auth.profile.dismiss", "Dismiss")
 					})
 				]
 			}),
 			/* @__PURE__ */ v("div", {
 				className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm overflow-hidden",
 				children: [/* @__PURE__ */ _("div", {
-					className: "auth-hero-card p-6",
+					className: "bg-accent-wash border-b border-border-seam p-6 text-text-primary",
 					children: /* @__PURE__ */ v("div", {
 						className: "flex items-center gap-4",
 						children: [/* @__PURE__ */ v("div", {
 							className: "relative group",
 							children: [
-								E.avatar ? /* @__PURE__ */ _("img", {
-									src: E.avatar,
-									alt: S("auth.profile.avatarAlt", "Profile picture"),
+								k.avatar ? /* @__PURE__ */ _("img", {
+									src: k.avatar,
+									alt: T("auth.profile.avatarAlt", "Profile picture"),
 									className: "size-20 rounded-full object-cover shadow-lg"
 								}) : /* @__PURE__ */ _("div", {
-									className: "size-20 rounded-full bg-bg-surface/20 backdrop-blur-sm flex items-center justify-center text-white text-3xl font-semibold shadow-lg",
-									children: (E.name || E.username || E.email).charAt(0).toUpperCase()
+									className: "size-20 rounded-full bg-accent-soft backdrop-blur-sm flex items-center justify-center text-[var(--color-action-primary-bg)] text-3xl font-semibold shadow-lg",
+									children: (k.name || k.username || k.email).charAt(0).toUpperCase()
 								}),
 								/* @__PURE__ */ _("button", {
 									type: "button",
-									onClick: () => z.current?.click(),
-									disabled: B,
-									"aria-label": S("auth.profile.changeAvatar", "Change profile picture"),
+									onClick: () => H.current?.click(),
+									disabled: U,
+									"aria-label": T("auth.profile.changeAvatar", "Change profile picture"),
 									className: "absolute inset-0 rounded-full flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer",
-									children: B ? /* @__PURE__ */ _(a, { className: "size-6 text-white animate-spin" }) : /* @__PURE__ */ v("svg", {
+									children: U ? /* @__PURE__ */ _(a, { className: "size-6 text-white animate-spin" }) : /* @__PURE__ */ v("svg", {
 										className: "size-6 text-white",
 										fill: "none",
 										viewBox: "0 0 24 24",
@@ -188,34 +199,34 @@ function x() {
 									})
 								}),
 								/* @__PURE__ */ _("input", {
-									ref: z,
+									ref: H,
 									type: "file",
 									accept: "image/*",
 									className: "hidden",
-									onChange: (e) => void H(e),
+									onChange: (e) => void G(e),
 									tabIndex: -1,
-									"aria-label": S("auth.profile.avatarUpload", "Upload avatar image")
+									"aria-label": T("auth.profile.avatarUpload", "Upload avatar image")
 								})
 							]
 						}), /* @__PURE__ */ v("div", {
-							className: "text-white",
+							className: "text-text-primary",
 							children: [
 								/* @__PURE__ */ _("h2", {
 									className: "text-2xl font-semibold",
-									children: E.name || `${E.firstName || ""} ${E.lastName || ""}`.trim() || E.username
+									children: k.name || `${k.firstName || ""} ${k.lastName || ""}`.trim() || k.username
 								}),
 								/* @__PURE__ */ v("p", {
-									className: "text-white/80 flex items-center gap-2",
-									children: [/* @__PURE__ */ _(i, { className: "size-4" }), E.email]
+									className: "text-text-secondary flex items-center gap-2",
+									children: [/* @__PURE__ */ _(i, { className: "size-4" }), k.email]
 								}),
 								/* @__PURE__ */ v("div", {
 									className: "flex items-center gap-2 mt-2",
 									children: [/* @__PURE__ */ _("span", {
-										className: "px-2.5 py-1 rounded-full text-xs font-medium bg-bg-surface/20 backdrop-blur-sm",
-										children: E.role?.replace("_", " ") || S("auth.profile.member", "Member")
-									}), E.emailVerified && /* @__PURE__ */ v("span", {
-										className: "px-2.5 py-1 rounded-full text-xs font-medium bg-status-success-text/30 flex items-center gap-1",
-										children: [/* @__PURE__ */ _(r, { className: "size-3" }), S("auth.profile.verified", "Verified")]
+										className: "px-2.5 py-1 rounded-full text-xs font-medium bg-bg-surface/60 text-text-secondary backdrop-blur-sm",
+										children: k.role?.replace("_", " ") || T("auth.profile.member", "Member")
+									}), k.emailVerified && /* @__PURE__ */ v("span", {
+										className: "px-2.5 py-1 rounded-full text-xs font-medium bg-status-success-bg-subtle text-status-success-text flex items-center gap-1",
+										children: [/* @__PURE__ */ _(r, { className: "size-3" }), T("auth.profile.verified", "Verified")]
 									})]
 								})
 							]
@@ -223,19 +234,19 @@ function x() {
 					})
 				}), /* @__PURE__ */ _("div", {
 					className: "p-6",
-					children: U ? /* @__PURE__ */ v("form", {
+					children: K ? /* @__PURE__ */ v("form", {
 						onSubmit: async (e) => {
-							e.preventDefault(), J(null), X(null);
+							e.preventDefault(), Z(null), $(null);
 							try {
-								await O({
-									username: G.username || void 0,
-									firstName: G.firstName || void 0,
-									lastName: G.lastName || void 0,
-									name: G.name || void 0,
-									phoneNumber: G.phoneNumber || void 0
-								}), X(S("auth.profile.updateSuccess", "Profile updated successfully!")), W(!1);
+								await j({
+									username: J.username || void 0,
+									firstName: J.firstName || void 0,
+									lastName: J.lastName || void 0,
+									name: J.name || void 0,
+									phoneNumber: J.phoneNumber || void 0
+								}), $(T("auth.profile.updateSuccess", "Profile updated successfully!")), q(!1);
 							} catch (e) {
-								J(e instanceof Error ? e.message : S("auth.profile.updateFailed", "Failed to update profile"));
+								Z(e instanceof Error ? e.message : T("auth.profile.updateFailed", "Failed to update profile"));
 							}
 						},
 						className: "space-y-6",
@@ -243,9 +254,9 @@ function x() {
 							className: "grid grid-cols-1 md:grid-cols-2 gap-6",
 							children: [
 								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
-									htmlFor: A,
+									htmlFor: N,
 									className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-									children: S("auth.profile.username", "Username")
+									children: T("auth.profile.username", "Username")
 								}), /* @__PURE__ */ v("div", {
 									className: "relative",
 									children: [/* @__PURE__ */ _("div", {
@@ -255,106 +266,108 @@ function x() {
 											"aria-hidden": "true"
 										})
 									}), /* @__PURE__ */ _("input", {
-										id: A,
+										id: N,
 										type: "text",
-										"aria-label": S("auth.profile.username", "Username"),
-										value: G.username,
-										onChange: (e) => K({
-											...G,
+										"aria-label": T("auth.profile.username", "Username"),
+										value: J.username,
+										onChange: (e) => Y({
+											...J,
 											username: e.target.value
 										}),
 										className: "block w-full pl-[3.5rem] pr-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300",
-										placeholder: S("auth.profile.usernamePlaceholder", "Enter username")
+										placeholder: T("auth.profile.usernamePlaceholder", "Enter username")
 									})]
 								})] }),
 								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
-									htmlFor: j,
+									htmlFor: P,
 									className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-									children: S("auth.profile.displayName", "Display Name")
+									children: T("auth.profile.displayName", "Display Name")
 								}), /* @__PURE__ */ _("input", {
-									id: j,
+									id: P,
 									type: "text",
-									"aria-label": S("auth.profile.displayName", "Display Name"),
-									value: G.name,
-									onChange: (e) => K({
-										...G,
+									"aria-label": T("auth.profile.displayName", "Display Name"),
+									value: J.name,
+									onChange: (e) => Y({
+										...J,
 										name: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300",
-									placeholder: S("auth.profile.displayNamePlaceholder", "Enter display name")
+									placeholder: T("auth.profile.displayNamePlaceholder", "Enter display name")
 								})] }),
 								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
-									htmlFor: M,
+									htmlFor: F,
 									className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-									children: S("auth.profile.firstName", "First Name")
+									children: T("auth.profile.firstName", "First Name")
 								}), /* @__PURE__ */ _("input", {
-									id: M,
+									id: F,
 									type: "text",
-									"aria-label": S("auth.profile.firstName", "First Name"),
-									value: G.firstName,
-									onChange: (e) => K({
-										...G,
+									"aria-label": T("auth.profile.firstName", "First Name"),
+									value: J.firstName,
+									onChange: (e) => Y({
+										...J,
 										firstName: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300",
-									placeholder: S("auth.profile.firstNamePlaceholder", "Enter first name")
+									placeholder: T("auth.profile.firstNamePlaceholder", "Enter first name")
 								})] }),
 								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
-									htmlFor: N,
+									htmlFor: I,
 									className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-									children: S("auth.profile.lastName", "Last Name")
+									children: T("auth.profile.lastName", "Last Name")
 								}), /* @__PURE__ */ _("input", {
-									id: N,
+									id: I,
 									type: "text",
-									"aria-label": S("auth.profile.lastName", "Last Name"),
-									value: G.lastName,
-									onChange: (e) => K({
-										...G,
+									"aria-label": T("auth.profile.lastName", "Last Name"),
+									value: J.lastName,
+									onChange: (e) => Y({
+										...J,
 										lastName: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300",
-									placeholder: S("auth.profile.lastNamePlaceholder", "Enter last name")
+									placeholder: T("auth.profile.lastNamePlaceholder", "Enter last name")
 								})] }),
 								/* @__PURE__ */ v("div", {
 									className: "md:col-span-2",
 									children: [/* @__PURE__ */ _("label", {
-										htmlFor: P,
+										htmlFor: L,
 										className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-										children: S("auth.profile.phoneNumber", "Phone Number")
+										children: T("auth.profile.phoneNumber", "Phone Number")
 									}), /* @__PURE__ */ _("input", {
-										id: P,
+										id: L,
 										type: "tel",
-										"aria-label": S("auth.profile.phoneNumber", "Phone Number"),
-										value: G.phoneNumber,
-										onChange: (e) => K({
-											...G,
+										"aria-label": T("auth.profile.phoneNumber", "Phone Number"),
+										value: J.phoneNumber,
+										onChange: (e) => Y({
+											...J,
 											phoneNumber: e.target.value
 										}),
 										className: "block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300",
-										placeholder: S("auth.profile.phonePlaceholder", "Enter phone number")
+										placeholder: T("auth.profile.phonePlaceholder", "Enter phone number")
 									})]
 								})
 							]
 						}), /* @__PURE__ */ v("div", {
 							className: "flex gap-3 pt-4 border-t border-[var(--color-border-default)]",
-							children: [/* @__PURE__ */ _("button", {
+							children: [/* @__PURE__ */ _(y, {
 								type: "submit",
-								disabled: k,
-								className: "auth-primary-button flex items-center gap-2 px-6 py-3 font-medium",
-								children: k ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(a, { className: "size-4 animate-spin" }), S("auth.profile.saving", "Saving...")] }) : S("auth.profile.saveChanges", "Save Changes")
+								disabled: M,
+								variant: "default",
+								size: "lg",
+								className: "font-semibold",
+								children: M ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(a, { className: "size-4 animate-spin" }), T("auth.profile.saving", "Saving...")] }) : T("auth.profile.saveChanges", "Save Changes")
 							}), /* @__PURE__ */ _("button", {
 								type: "button",
 								onClick: () => {
-									E && K({
-										username: E.username || "",
-										firstName: E.firstName || "",
-										lastName: E.lastName || "",
-										name: E.name || "",
-										phoneNumber: E.phoneNumber || ""
-									}), W(!1), J(null);
+									k && Y({
+										username: k.username || "",
+										firstName: k.firstName || "",
+										lastName: k.lastName || "",
+										name: k.name || "",
+										phoneNumber: k.phoneNumber || ""
+									}), q(!1), Z(null);
 								},
 								className: "px-6 py-3 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200",
-								children: S("auth.profile.cancel", "Cancel")
+								children: T("auth.profile.cancel", "Cancel")
 							})]
 						})]
 					}) : /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ v("div", {
@@ -364,52 +377,52 @@ function x() {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
 								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: S("auth.profile.username", "Username")
+									children: T("auth.profile.username", "Username")
 								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: E.username || "-"
+									children: k.username || "-"
 								})]
 							}),
 							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
 								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: S("auth.profile.displayName", "Display Name")
+									children: T("auth.profile.displayName", "Display Name")
 								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: E.name || "-"
+									children: k.name || "-"
 								})]
 							}),
 							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
 								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: S("auth.profile.firstName", "First Name")
+									children: T("auth.profile.firstName", "First Name")
 								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: E.firstName || "-"
+									children: k.firstName || "-"
 								})]
 							}),
 							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
 								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: S("auth.profile.lastName", "Last Name")
+									children: T("auth.profile.lastName", "Last Name")
 								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: E.lastName || "-"
+									children: k.lastName || "-"
 								})]
 							}),
 							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
 								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: S("auth.profile.email", "Email")
+									children: T("auth.profile.email", "Email")
 								}), /* @__PURE__ */ v("p", {
 									className: "text-[var(--color-text-primary)] font-medium flex items-center gap-2",
-									children: [E.email, E.emailVerified && /* @__PURE__ */ v("span", {
+									children: [k.email, k.emailVerified && /* @__PURE__ */ v("span", {
 										className: "inline-flex items-center gap-1 text-[var(--color-status-success-text)] text-xs",
-										children: [/* @__PURE__ */ _(r, { className: "size-3" }), S("auth.profile.verified", "Verified")]
+										children: [/* @__PURE__ */ _(r, { className: "size-3" }), T("auth.profile.verified", "Verified")]
 									})]
 								})]
 							}),
@@ -417,35 +430,35 @@ function x() {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
 								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: S("auth.profile.phoneNumber", "Phone Number")
+									children: T("auth.profile.phoneNumber", "Phone Number")
 								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: E.phoneNumber || "-"
+									children: k.phoneNumber || "-"
 								})]
 							}),
 							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
 								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: S("auth.profile.role", "Role")
+									children: T("auth.profile.role", "Role")
 								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: E.role?.replace("_", " ") || S("auth.profile.member", "Member")
+									children: k.role?.replace("_", " ") || T("auth.profile.member", "Member")
 								})]
 							}),
 							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
 								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: S("auth.profile.mfaStatus", "MFA Status")
+									children: T("auth.profile.mfaStatus", "MFA Status")
 								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: E.mfaEnabled ? /* @__PURE__ */ v("span", {
+									children: k.mfaEnabled ? /* @__PURE__ */ v("span", {
 										className: "text-[var(--color-status-success-text)] flex items-center gap-1",
-										children: [/* @__PURE__ */ _(r, { className: "size-4" }), S("auth.profile.enabled", "Enabled")]
+										children: [/* @__PURE__ */ _(r, { className: "size-4" }), T("auth.profile.enabled", "Enabled")]
 									}) : /* @__PURE__ */ _("span", {
 										className: "text-[var(--color-status-warning-text)]",
-										children: S("auth.profile.notEnabled", "Not Enabled")
+										children: T("auth.profile.notEnabled", "Not Enabled")
 									})
 								})]
 							}),
@@ -453,44 +466,72 @@ function x() {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
 								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: S("auth.profile.lastLogin", "Last Login")
+									children: T("auth.profile.lastLogin", "Last Login")
 								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: E.lastLoginAt ? new Date(E.lastLoginAt).toLocaleString() : S("auth.profile.never", "Never")
+									children: k.lastLoginAt ? new Date(k.lastLoginAt).toLocaleString() : T("auth.profile.never", "Never")
 								})]
 							}),
 							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
 								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: S("auth.profile.accountCreated", "Account Created")
+									children: T("auth.profile.accountCreated", "Account Created")
 								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: E.createdAt ? new Date(E.createdAt).toLocaleString() : "-"
+									children: k.createdAt ? new Date(k.createdAt).toLocaleString() : "-"
 								})]
 							})
 						]
 					}), /* @__PURE__ */ v("div", {
 						className: "flex gap-3 pt-6 mt-6 border-t border-[var(--color-border-default)]",
-						children: [/* @__PURE__ */ _("button", {
+						children: [/* @__PURE__ */ _(y, {
 							type: "button",
-							onClick: () => W(!0),
-							className: "auth-primary-button px-6 py-3 font-medium",
-							children: S("auth.profile.editProfile", "Edit Profile")
+							onClick: () => q(!0),
+							variant: "default",
+							size: "lg",
+							className: "font-semibold",
+							children: T("auth.profile.editProfile", "Edit Profile")
 						}), /* @__PURE__ */ _("button", {
 							type: "button",
-							onClick: () => C("/auth/security"),
+							onClick: () => E("/auth/security"),
 							className: "px-6 py-3 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200",
-							children: S("auth.profile.securitySettings", "Security Settings")
+							children: T("auth.profile.securitySettings", "Security Settings")
 						})]
 					})] })
 				})]
 			}),
+			/* @__PURE__ */ _(b, {
+				className: "mt-8",
+				storageKey: "auth-profile",
+				steps: [
+					{
+						id: "edit-profile",
+						label: T("auth.profile.nextEdit", "Complete your profile"),
+						description: T("auth.profile.nextEditDesc", "Add your display name and photo so teammates recognise you."),
+						onClick: () => q(!0),
+						done: !!(k.name && k.avatar)
+					},
+					{
+						id: "enable-mfa",
+						label: T("auth.profile.nextMfa", "Secure your account with 2FA"),
+						description: T("auth.profile.nextMfaDesc", "Turn on two-factor authentication for stronger protection."),
+						onClick: () => E("/auth/mfa"),
+						done: !!k.mfaEnabled
+					},
+					{
+						id: "security-center",
+						label: T("auth.profile.nextSecurity", "Visit the Security Center"),
+						description: T("auth.profile.nextSecurityDesc", "Review sessions, password, and account options."),
+						onClick: () => E("/auth/security")
+					}
+				]
+			}),
 			/* @__PURE__ */ v("div", {
 				className: "mt-8 grid grid-cols-1 md:grid-cols-3 gap-4",
 				children: [/* @__PURE__ */ v("button", {
 					type: "button",
-					onClick: () => C("/auth/mfa"),
+					onClick: () => E("/auth/mfa"),
 					className: "p-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] hover:border-[var(--color-action-primary-border)] transition-colors duration-200 text-left group",
 					children: [
 						/* @__PURE__ */ _("div", {
@@ -510,16 +551,16 @@ function x() {
 						}),
 						/* @__PURE__ */ _("h3", {
 							className: "font-medium text-[var(--color-text-primary)]",
-							children: S("auth.profile.twoFactorAuth", "Two-Factor Auth")
+							children: T("auth.profile.twoFactorAuth", "Two-Factor Auth")
 						}),
 						/* @__PURE__ */ _("p", {
 							className: "text-sm text-[var(--color-text-tertiary)] mt-1",
-							children: E.mfaEnabled ? S("auth.profile.manageMfa", "Manage MFA settings") : S("auth.profile.enableMfa", "Enable MFA for extra security")
+							children: k.mfaEnabled ? T("auth.profile.manageMfa", "Manage MFA settings") : T("auth.profile.enableMfa", "Enable MFA for extra security")
 						})
 					]
 				}), /* @__PURE__ */ v("button", {
 					type: "button",
-					onClick: () => C("/devportal/api-keys"),
+					onClick: () => E("/devportal/api-keys"),
 					className: "p-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] hover:border-[var(--color-action-secondary-border)] transition-colors duration-200 text-left group",
 					children: [
 						/* @__PURE__ */ _("div", {
@@ -539,11 +580,11 @@ function x() {
 						}),
 						/* @__PURE__ */ _("h3", {
 							className: "font-medium text-[var(--color-text-primary)]",
-							children: S("auth.profile.apiKeys", "API Keys")
+							children: T("auth.profile.apiKeys", "API Keys")
 						}),
 						/* @__PURE__ */ _("p", {
 							className: "text-sm text-[var(--color-text-tertiary)] mt-1",
-							children: S("auth.profile.manageApiKeys", "Manage your API access credentials")
+							children: T("auth.profile.manageApiKeys", "Manage your API access credentials")
 						})
 					]
 				})]
@@ -552,6 +593,6 @@ function x() {
 	});
 }
 //#endregion
-export { x as UserProfilePage };
+export { w as UserProfilePage };
 
 //# sourceMappingURL=UserProfilePage.js.map