@burdenoff/microfe-coolandlovely 2026.706.2 → 2026.710.1

package/dist/coolandlovely/pages/profile/StyleProfilePage.js

@@ -1,284 +1,446 @@
-import { PageLayout as e } from "../../components/PageLayout.js";
-import { StatusBadge as t } from "../../components/StatusBadge.js";
-import { ErrorView as n, LoadingView as r } from "../../components/StateViews.js";
-import { useMyFollowing as i, useMyStyleProfile as a, useUpsertStyleProfile as o } from "../../hooks/useCoolAndLovelyApi.js";
+import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { ErrorView as r, LoadingView as i } from "../../components/StateViews.js";
+import { Thumbnail as a } from "../../components/Thumbnail.js";
+import { useLooks as o, useMyFollowing as s, useMyStyleProfile as c, useUpsertStyleProfile as l, useWardrobeItems as u } from "../../hooks/useCoolAndLovelyApi.js";
+import { parseCsv as d, titleCase as f } from "../../utils/formatters.js";
 import "../../hooks/index.js";
-import { parseCsv as s, titleCase as c } from "../../utils/formatters.js";
-import { TagList as l } from "../../components/TagList.js";
-import { ActorName as u } from "../../components/ActorName.js";
-import { SelectField as d, TextAreaField as f, TextField as p } from "../../components/Field.js";
-import { FollowButton as m } from "../../components/FollowButton.js";
-import { useEffect as h, useState as g } from "react";
-import { Loader2 as _, Pencil as v, Save as y, UserCircle as b, Users as x, X as S } from "lucide-react";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import { GlassCard as T } from "@burdenoff/fe-libs/ui";
+import { ActorName as p } from "../../components/ActorName.js";
+import { categoryIcon as m } from "../../utils/icons.js";
+import { SelectField as h, TextAreaField as g, TextField as _ } from "../../components/Field.js";
+import { ColourSwatchRow as v } from "../../components/ColourSwatchRow.js";
+import { VisibilityChip as y } from "../../components/VisibilityChip.js";
+import { FollowButton as b } from "../../components/FollowButton.js";
+import { useEffect as x, useState as S } from "react";
+import { Loader2 as C, Pencil as w, Save as T, Shirt as E, Sparkles as D, UserCircle as O, Users as k, X as A } from "lucide-react";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
+import { GlassCard as N } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/profile/StyleProfilePage.tsx
-var E = [
+var P = [
 	"PUBLIC",
 	"FOLLOWERS",
 	"PRIVATE"
-], D = {
+], F = [
+	"Tops",
+	"Bottoms",
+	"Dresses",
+	"Shoes",
+	"Outerwear"
+], I = {
 	displayName: "",
 	bio: "",
 	visibility: "PRIVATE",
 	stylePreferences: "",
 	palette: "",
-	favouriteBrands: ""
+	favouriteBrands: "",
+	sizes: {}
 };
-function O() {
-	let O = a(), k = o(), A = i(), [j, M] = g(!1), [N, P] = g(D), F = O.data, I = !!F, L = A.data ?? [];
-	h(() => {
-		F && P({
-			displayName: F.displayName ?? "",
-			bio: F.bio ?? "",
-			visibility: F.visibility,
-			stylePreferences: F.stylePreferences.join(", "),
-			palette: F.palette.join(", "),
-			favouriteBrands: F.favouriteBrands.join(", ")
+function L(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	return t.length === 0 ? "?" : t.length === 1 ? t[0].slice(0, 2).toUpperCase() : (t[0][0] + t[1][0]).toUpperCase();
+}
+function R({ title: e, children: n, className: r }) {
+	return /* @__PURE__ */ M(N, {
+		treatment: "plain",
+		className: t("p-5", r),
+		children: [/* @__PURE__ */ j("h3", {
+			className: "mb-3 text-sm font-semibold text-text-primary",
+			children: e
+		}), n]
+	});
+}
+function z() {
+	let { navigateTo: z, currentUser: B } = e(), V = c(), H = l(), U = s(), W = u(), G = o({
+		authorId: V.data?.ownerId,
+		pagination: {
+			limit: 6,
+			offset: 0
+		}
+	}), [K, q] = S(!1), [J, Y] = S(I), X = V.data, Z = !!X, Q = U.data ?? [];
+	x(() => {
+		X && Y({
+			displayName: X.displayName ?? "",
+			bio: X.bio ?? "",
+			visibility: X.visibility,
+			stylePreferences: X.stylePreferences.join(", "),
+			palette: X.palette.join(", "),
+			favouriteBrands: X.favouriteBrands.join(", "),
+			sizes: Object.fromEntries(Object.entries(X.sizes ?? {}).map(([e, t]) => [e, String(t ?? "")]))
 		});
-	}, [F]), h(() => {
-		!O.isLoading && !I && M(!0);
-	}, [O.isLoading, I]);
-	let R = (e, t) => P((n) => ({
+	}, [X]), x(() => {
+		!V.isLoading && !Z && q(!0);
+	}, [V.isLoading, Z]);
+	let $ = (e, t) => Y((n) => ({
 		...n,
 		[e]: t
-	})), z = E.map((e) => ({
+	})), ee = (e, t) => Y((n) => ({
+		...n,
+		sizes: {
+			...n.sizes,
+			[e]: t
+		}
+	})), te = P.map((e) => ({
 		value: e,
-		label: c(e)
-	}));
-	return O.isLoading ? /* @__PURE__ */ C(e, {
+		label: f(e)
+	})), ne = (e) => {
+		e.preventDefault();
+		let t = Object.fromEntries(Object.entries(J.sizes).map(([e, t]) => [e, t.trim()]).filter(([, e]) => e.length > 0));
+		H.mutate({
+			displayName: J.displayName.trim() || void 0,
+			bio: J.bio.trim() || void 0,
+			visibility: J.visibility,
+			stylePreferences: d(J.stylePreferences),
+			palette: d(J.palette),
+			favouriteBrands: d(J.favouriteBrands),
+			sizes: t
+		}, { onSuccess: () => q(!1) });
+	};
+	if (V.isLoading) return /* @__PURE__ */ j(n, {
 		title: "Style Profile",
-		children: /* @__PURE__ */ C(r, { label: "Loading your style profile…" })
-	}) : O.isError ? /* @__PURE__ */ C(e, {
-		title: "Style Profile",
-		children: /* @__PURE__ */ C(n, { onRetry: () => void O.refetch() })
-	}) : !j && F ? /* @__PURE__ */ C(e, {
+		children: /* @__PURE__ */ j(i, { label: "Loading your style profile…" })
+	});
+	if (V.isError) return /* @__PURE__ */ j(n, {
 		title: "Style Profile",
-		description: "Your taste, palette and sizing — the spine of personalised discovery",
-		actions: /* @__PURE__ */ w("button", {
-			type: "button",
-			onClick: () => M(!0),
-			className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
-			children: [/* @__PURE__ */ C(v, { className: "h-4 w-4" }), " Edit"]
-		}),
-		children: /* @__PURE__ */ w("div", {
-			className: "mx-auto max-w-2xl",
-			children: [/* @__PURE__ */ w(T, {
-				treatment: "glass",
-				className: "p-6",
+		children: /* @__PURE__ */ j(r, { onRetry: () => void V.refetch() })
+	});
+	if (!K && X) {
+		let e = B?.profilePicture || B?.avatar, r = (W.data ?? []).slice(0, 6), i = G.data?.items ?? [], o = Object.entries(X.sizes ?? {});
+		return /* @__PURE__ */ j(n, {
+			title: "Style Profile",
+			description: "Your taste, palette and sizing — the spine of personalised discovery",
+			actions: /* @__PURE__ */ M("button", {
+				type: "button",
+				onClick: () => q(!0),
+				className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
+				children: [/* @__PURE__ */ j(w, { className: "h-4 w-4" }), " Edit"]
+			}),
+			children: /* @__PURE__ */ M("div", {
+				className: "mx-auto max-w-5xl",
 				children: [
-					/* @__PURE__ */ w("div", {
-						className: "flex items-center gap-4",
-						children: [/* @__PURE__ */ C("div", {
-							className: "flex h-14 w-14 items-center justify-center rounded-full bg-accent-purple-subtle text-text-primary",
-							children: /* @__PURE__ */ C(b, { className: "h-7 w-7" })
-						}), /* @__PURE__ */ w("div", {
-							className: "min-w-0 flex-1",
-							children: [/* @__PURE__ */ C("h2", {
-								className: "truncate text-xl font-semibold text-text-primary",
-								children: F.displayName || "Your style profile"
-							}), /* @__PURE__ */ C(t, {
-								status: F.visibility,
-								className: "mt-1"
+					/* @__PURE__ */ j(N, {
+						treatment: "glass",
+						className: "p-6",
+						children: /* @__PURE__ */ M("div", {
+							className: "flex flex-col gap-4 sm:flex-row sm:items-center",
+							children: [e ? /* @__PURE__ */ j("img", {
+								src: e,
+								alt: X.displayName || "Your avatar",
+								className: "h-16 w-16 shrink-0 rounded-full object-cover ring-2 ring-bg-surface"
+							}) : /* @__PURE__ */ j("div", {
+								className: "flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-accent-purple-subtle text-text-primary",
+								children: /* @__PURE__ */ j(O, { className: "h-8 w-8" })
+							}), /* @__PURE__ */ M("div", {
+								className: "min-w-0 flex-1",
+								children: [
+									/* @__PURE__ */ M("div", {
+										className: "flex flex-wrap items-center gap-2",
+										children: [/* @__PURE__ */ j("h2", {
+											className: "truncate text-xl font-semibold text-text-primary",
+											children: X.displayName || B?.name || "Your style profile"
+										}), /* @__PURE__ */ j(y, { visibility: X.visibility })]
+									}),
+									X.bio && /* @__PURE__ */ j("p", {
+										className: "mt-1 line-clamp-2 text-sm text-text-secondary",
+										children: X.bio
+									}),
+									/* @__PURE__ */ M("div", {
+										className: "mt-2 flex items-center gap-6",
+										children: [/* @__PURE__ */ M("span", {
+											className: "text-sm text-text-secondary",
+											children: [
+												/* @__PURE__ */ j("span", {
+													className: "font-semibold text-text-primary tabular-nums",
+													children: X.followerCount ?? 0
+												}),
+												" ",
+												X.followerCount === 1 ? "follower" : "followers"
+											]
+										}), /* @__PURE__ */ M("span", {
+											className: "text-sm text-text-secondary",
+											children: [
+												/* @__PURE__ */ j("span", {
+													className: "font-semibold text-text-primary tabular-nums",
+													children: X.followingCount ?? 0
+												}),
+												" ",
+												"following"
+											]
+										})]
+									})
+								]
 							})]
-						})]
-					}),
-					F.bio && /* @__PURE__ */ C("p", {
-						className: "mt-4 text-sm text-text-secondary",
-						children: F.bio
+						})
 					}),
-					/* @__PURE__ */ w("div", {
-						className: "mt-4 flex items-center gap-6",
-						children: [/* @__PURE__ */ w("span", {
-							className: "text-sm text-text-secondary",
+					/* @__PURE__ */ M("div", {
+						className: "mt-6 grid gap-6 lg:grid-cols-5",
+						children: [/* @__PURE__ */ M("div", {
+							className: "space-y-6 lg:col-span-3",
 							children: [
-								/* @__PURE__ */ C("span", {
-									className: "font-semibold text-text-primary tabular-nums",
-									children: F.followerCount ?? 0
+								/* @__PURE__ */ j(R, {
+									title: "Style preferences",
+									children: X.stylePreferences.length ? /* @__PURE__ */ j("div", {
+										className: "flex flex-wrap gap-2",
+										children: X.stylePreferences.map((e, n) => /* @__PURE__ */ j("span", {
+											className: t("rounded-full px-3 py-1 text-sm font-medium", n === 0 ? "bg-accent-purple-subtle text-text-primary ring-1 ring-[var(--color-accent-soft)]" : "bg-bg-sunken text-text-secondary"),
+											children: e
+										}, `${e}-${n}`))
+									}) : /* @__PURE__ */ j("p", {
+										className: "text-sm text-text-secondary",
+										children: "No preferences yet — add a few in Edit."
+									})
 								}),
-								" ",
-								F.followerCount === 1 ? "follower" : "followers"
-							]
-						}), /* @__PURE__ */ w("span", {
-							className: "text-sm text-text-secondary",
-							children: [
-								/* @__PURE__ */ C("span", {
-									className: "font-semibold text-text-primary tabular-nums",
-									children: F.followingCount ?? 0
+								/* @__PURE__ */ j(R, {
+									title: "Palette",
+									children: X.palette.length ? /* @__PURE__ */ j(v, {
+										colours: X.palette,
+										max: 12,
+										className: "gap-2.5"
+									}) : /* @__PURE__ */ j("p", {
+										className: "text-sm text-text-secondary",
+										children: "No palette yet."
+									})
 								}),
-								" ",
-								"following"
+								/* @__PURE__ */ M("div", {
+									className: "grid gap-6 sm:grid-cols-2",
+									children: [/* @__PURE__ */ j(R, {
+										title: "Favourite brands",
+										children: X.favouriteBrands.length ? /* @__PURE__ */ j("div", {
+											className: "grid grid-cols-1 gap-2",
+											children: X.favouriteBrands.map((e, t) => /* @__PURE__ */ M("div", {
+												className: "flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface px-3 py-2",
+												children: [/* @__PURE__ */ j("span", {
+													className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-accent-purple-subtle text-xs font-bold text-text-primary",
+													children: L(e)
+												}), /* @__PURE__ */ j("span", {
+													className: "truncate text-sm font-medium text-text-primary",
+													children: e
+												})]
+											}, `${e}-${t}`))
+										}) : /* @__PURE__ */ j("p", {
+											className: "text-sm text-text-secondary",
+											children: "No brands yet."
+										})
+									}), /* @__PURE__ */ j(R, {
+										title: "Sizes",
+										children: o.length ? /* @__PURE__ */ j("dl", {
+											className: "space-y-0",
+											children: o.map(([e, t]) => /* @__PURE__ */ M("div", {
+												className: "flex items-center justify-between border-b border-border-seam/60 py-1.5 last:border-0",
+												children: [/* @__PURE__ */ j("dt", {
+													className: "text-sm text-text-secondary",
+													children: f(e)
+												}), /* @__PURE__ */ j("dd", {
+													className: "text-sm font-medium text-text-primary tabular-nums",
+													children: String(t)
+												})]
+											}, e))
+										}) : /* @__PURE__ */ j("p", {
+											className: "text-sm text-text-secondary",
+											children: "No sizes recorded yet."
+										})
+									})]
+								})
 							]
+						}), /* @__PURE__ */ M("div", {
+							className: "space-y-6 lg:col-span-2",
+							children: [/* @__PURE__ */ j(R, {
+								title: "Her wardrobe",
+								children: W.isLoading ? /* @__PURE__ */ M("div", {
+									className: "flex items-center gap-2 text-sm text-text-secondary",
+									children: [/* @__PURE__ */ j(C, { className: "h-4 w-4 animate-spin" }), " Loading…"]
+								}) : r.length ? /* @__PURE__ */ j("div", {
+									className: "grid grid-cols-3 gap-2",
+									children: r.map((e) => /* @__PURE__ */ j("button", {
+										type: "button",
+										onClick: () => z("/wardrobe"),
+										"aria-label": e.name,
+										className: "group overflow-hidden rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+										children: /* @__PURE__ */ j(a, {
+											icon: m(e.category, 18),
+											seed: e.id,
+											fileId: e.image?.id,
+											alt: e.name,
+											className: "aspect-square w-full rounded-lg"
+										})
+									}, e.id))
+								}) : /* @__PURE__ */ M("button", {
+									type: "button",
+									onClick: () => z("/wardrobe/new"),
+									className: "flex w-full items-center gap-2 rounded-lg border border-dashed border-border-seam px-3 py-3 text-left text-sm text-text-secondary transition-colors hover:text-text-primary",
+									children: [/* @__PURE__ */ j(E, { className: "h-4 w-4" }), " Add pieces to your wardrobe"]
+								})
+							}), /* @__PURE__ */ j(R, {
+								title: "Recent looks",
+								children: G.isLoading ? /* @__PURE__ */ M("div", {
+									className: "flex items-center gap-2 text-sm text-text-secondary",
+									children: [/* @__PURE__ */ j(C, { className: "h-4 w-4 animate-spin" }), " Loading…"]
+								}) : i.length ? /* @__PURE__ */ j("div", {
+									className: "-mx-1 flex gap-3 overflow-x-auto px-1 pb-1",
+									children: i.map((e) => /* @__PURE__ */ M("button", {
+										type: "button",
+										onClick: () => z(`/looks/${e.id}`),
+										className: "group w-24 shrink-0 text-left focus-visible:outline-none",
+										children: [/* @__PURE__ */ j(a, {
+											icon: /* @__PURE__ */ j(D, { className: "h-5 w-5" }),
+											seed: e.id,
+											fileId: e.image?.id,
+											alt: e.title,
+											className: "aspect-[3/4] w-full rounded-lg"
+										}), /* @__PURE__ */ j("p", {
+											className: "mt-1 truncate text-xs text-text-secondary",
+											children: e.title
+										})]
+									}, e.id))
+								}) : /* @__PURE__ */ j("p", {
+									className: "text-sm text-text-secondary",
+									children: "You have not published any looks yet."
+								})
+							})]
 						})]
 					}),
-					/* @__PURE__ */ w("div", {
-						className: "mt-6 space-y-4",
-						children: [
-							/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
-								className: "mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary",
-								children: "Style preferences"
-							}), F.stylePreferences.length ? /* @__PURE__ */ C(l, {
-								tags: F.stylePreferences,
-								tone: "accent",
-								max: 20
-							}) : /* @__PURE__ */ C("p", {
-								className: "text-sm text-text-secondary",
-								children: "—"
-							})] }),
-							/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
-								className: "mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary",
-								children: "Palette"
-							}), F.palette.length ? /* @__PURE__ */ C(l, {
-								tags: F.palette,
-								max: 20
-							}) : /* @__PURE__ */ C("p", {
-								className: "text-sm text-text-secondary",
-								children: "—"
-							})] }),
-							/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
-								className: "mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary",
-								children: "Favourite brands"
-							}), F.favouriteBrands.length ? /* @__PURE__ */ C(l, {
-								tags: F.favouriteBrands,
-								max: 20
-							}) : /* @__PURE__ */ C("p", {
-								className: "text-sm text-text-secondary",
-								children: "—"
-							})] })
-						]
+					/* @__PURE__ */ M("section", {
+						className: "mt-6",
+						children: [/* @__PURE__ */ M("h3", {
+							className: "mb-3 flex items-center gap-2 text-lg font-semibold text-text-primary",
+							children: [
+								/* @__PURE__ */ j(k, { className: "h-5 w-5" }),
+								" People you follow (",
+								Q.length,
+								")"
+							]
+						}), U.isLoading ? /* @__PURE__ */ M("div", {
+							className: "flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
+							children: [/* @__PURE__ */ j(C, { className: "h-4 w-4 animate-spin" }), " Loading…"]
+						}) : Q.length === 0 ? /* @__PURE__ */ j("p", {
+							className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
+							children: "You are not following anyone yet. Follow creators from their looks to see their latest in Discover."
+						}) : /* @__PURE__ */ j("ul", {
+							className: "divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface",
+							children: Q.map((e) => /* @__PURE__ */ M("li", {
+								className: "flex items-center gap-3 px-4 py-3",
+								children: [
+									/* @__PURE__ */ j("div", {
+										className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent-purple-subtle text-text-primary",
+										children: /* @__PURE__ */ j(O, { className: "h-5 w-5" })
+									}),
+									/* @__PURE__ */ M("div", {
+										className: "min-w-0 flex-1",
+										children: [/* @__PURE__ */ j("p", {
+											className: "truncate text-sm font-medium text-text-primary",
+											children: e.displayName || /* @__PURE__ */ j(p, { id: e.ownerId })
+										}), e.bio && /* @__PURE__ */ j("p", {
+											className: "truncate text-xs text-text-secondary",
+											children: e.bio
+										})]
+									}),
+									/* @__PURE__ */ j(b, {
+										followeeId: e.ownerId,
+										size: "sm"
+									})
+								]
+							}, e.id))
+						})]
 					})
 				]
-			}), /* @__PURE__ */ w("section", {
-				className: "mt-6",
-				children: [/* @__PURE__ */ w("h3", {
-					className: "mb-3 flex items-center gap-2 text-lg font-semibold text-text-primary",
-					children: [
-						/* @__PURE__ */ C(x, { className: "h-5 w-5" }),
-						" People you follow (",
-						L.length,
-						")"
-					]
-				}), A.isLoading ? /* @__PURE__ */ w("div", {
-					className: "flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
-					children: [/* @__PURE__ */ C(_, { className: "h-4 w-4 animate-spin" }), " Loading…"]
-				}) : L.length === 0 ? /* @__PURE__ */ C("p", {
-					className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
-					children: "You are not following anyone yet. Follow creators from their looks to see their latest in Discover."
-				}) : /* @__PURE__ */ C("ul", {
-					className: "divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface",
-					children: L.map((e) => /* @__PURE__ */ w("li", {
-						className: "flex items-center gap-3 px-4 py-3",
-						children: [
-							/* @__PURE__ */ C("div", {
-								className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent-purple-subtle text-text-primary",
-								children: /* @__PURE__ */ C(b, { className: "h-5 w-5" })
-							}),
-							/* @__PURE__ */ w("div", {
-								className: "min-w-0 flex-1",
-								children: [/* @__PURE__ */ C("p", {
-									className: "truncate text-sm font-medium text-text-primary",
-									children: e.displayName || /* @__PURE__ */ C(u, { id: e.ownerId })
-								}), e.bio && /* @__PURE__ */ C("p", {
-									className: "truncate text-xs text-text-secondary",
-									children: e.bio
-								})]
-							}),
-							/* @__PURE__ */ C(m, {
-								followeeId: e.ownerId,
-								size: "sm"
-							})
-						]
-					}, e.id))
-				})]
-			})]
-		})
-	}) : /* @__PURE__ */ C(e, {
-		title: I ? "Edit style profile" : "Create your style profile",
+			})
+		});
+	}
+	let re = Array.from(new Set([...F, ...Object.keys(J.sizes)]));
+	return /* @__PURE__ */ j(n, {
+		title: Z ? "Edit style profile" : "Create your style profile",
 		description: "This powers your personalised discovery feed",
-		actions: I ? /* @__PURE__ */ w("button", {
+		actions: Z ? /* @__PURE__ */ M("button", {
 			type: "button",
-			onClick: () => M(!1),
+			onClick: () => q(!1),
 			className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
-			children: [/* @__PURE__ */ C(S, { className: "h-4 w-4" }), " Cancel"]
+			children: [/* @__PURE__ */ j(A, { className: "h-4 w-4" }), " Cancel"]
 		}) : void 0,
-		children: /* @__PURE__ */ C("form", {
-			onSubmit: (e) => {
-				e.preventDefault(), k.mutate({
-					displayName: N.displayName.trim() || void 0,
-					bio: N.bio.trim() || void 0,
-					visibility: N.visibility,
-					stylePreferences: s(N.stylePreferences),
-					palette: s(N.palette),
-					favouriteBrands: s(N.favouriteBrands)
-				}, { onSuccess: () => M(!1) });
-			},
+		children: /* @__PURE__ */ j("form", {
+			onSubmit: ne,
 			className: "mx-auto max-w-2xl",
-			children: /* @__PURE__ */ w(T, {
+			children: /* @__PURE__ */ M(N, {
 				treatment: "plain",
 				className: "p-6",
 				children: [
-					/* @__PURE__ */ C(p, {
+					/* @__PURE__ */ j(_, {
 						id: "displayName",
 						label: "Display name",
-						value: N.displayName,
-						onChange: (e) => R("displayName", e),
+						value: J.displayName,
+						onChange: (e) => $("displayName", e),
 						placeholder: "How you want to appear"
 					}),
-					/* @__PURE__ */ C(f, {
+					/* @__PURE__ */ j(g, {
 						id: "bio",
 						label: "Bio",
-						value: N.bio,
-						onChange: (e) => R("bio", e),
+						value: J.bio,
+						onChange: (e) => $("bio", e),
 						placeholder: "A sentence about your style…",
 						rows: 3,
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ C(d, {
+					/* @__PURE__ */ j(h, {
 						id: "visibility",
 						label: "Visibility",
-						value: N.visibility,
-						onChange: (e) => R("visibility", e),
-						options: z,
+						value: J.visibility,
+						onChange: (e) => $("visibility", e),
+						options: te,
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ C(p, {
+					/* @__PURE__ */ j(_, {
 						id: "stylePreferences",
 						label: "Style preferences",
-						value: N.stylePreferences,
-						onChange: (e) => R("stylePreferences", e),
+						value: J.stylePreferences,
+						onChange: (e) => $("stylePreferences", e),
 						placeholder: "minimal, tailored, vintage",
 						hint: "Comma-separated",
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ C(p, {
+					/* @__PURE__ */ j(_, {
 						id: "palette",
 						label: "Palette",
-						value: N.palette,
-						onChange: (e) => R("palette", e),
+						value: J.palette,
+						onChange: (e) => $("palette", e),
 						placeholder: "neutrals, navy, rust",
-						hint: "Comma-separated",
+						hint: "Comma-separated colour names — shown as swatches",
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ C(p, {
+					/* @__PURE__ */ j(_, {
 						id: "favouriteBrands",
 						label: "Favourite brands",
-						value: N.favouriteBrands,
-						onChange: (e) => R("favouriteBrands", e),
+						value: J.favouriteBrands,
+						onChange: (e) => $("favouriteBrands", e),
 						placeholder: "Aurora Atelier, …",
 						hint: "Comma-separated",
 						className: "mt-4"
 					}),
-					k.isError && /* @__PURE__ */ C("p", {
+					/* @__PURE__ */ M("div", {
+						className: "mt-4",
+						children: [/* @__PURE__ */ j("span", {
+							className: "mb-2 block text-sm font-medium text-text-primary",
+							children: "Sizes"
+						}), /* @__PURE__ */ j("div", {
+							className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+							children: re.map((e) => /* @__PURE__ */ j(_, {
+								id: `size-${e}`,
+								label: f(e),
+								value: J.sizes[e] ?? "",
+								onChange: (t) => ee(e, t),
+								placeholder: "e.g. M · 26 · 39"
+							}, e))
+						})]
+					}),
+					H.isError && /* @__PURE__ */ j("p", {
 						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-						children: k.error instanceof Error ? k.error.message : "Something went wrong"
+						children: H.error instanceof Error ? H.error.message : "Something went wrong"
 					}),
-					/* @__PURE__ */ C("div", {
+					/* @__PURE__ */ j("div", {
 						className: "mt-6 flex justify-end gap-2",
-						children: /* @__PURE__ */ w("button", {
+						children: /* @__PURE__ */ M("button", {
 							type: "submit",
-							disabled: k.isPending,
+							disabled: H.isPending,
 							className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
-							children: [k.isPending ? /* @__PURE__ */ C(_, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ C(y, { className: "h-4 w-4" }), I ? "Save changes" : "Create profile"]
+							children: [H.isPending ? /* @__PURE__ */ j(C, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ j(T, { className: "h-4 w-4" }), Z ? "Save changes" : "Create profile"]
 						})
 					})
 				]
@@ -287,6 +449,6 @@ function O() {
 	});
 }
 //#endregion
-export { O as StyleProfilePage };
+export { z as StyleProfilePage };
 
 //# sourceMappingURL=StyleProfilePage.js.map