@burdenoff/microfe-coolandlovely 2026.625.2 → 2026.628.1

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

@@ -0,0 +1,224 @@
+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 { useMyStyleProfile as i, useUpsertStyleProfile as a } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { parseCsv as o, titleCase as s } from "../../utils/formatters.js";
+import { TagList as c } from "../../components/TagList.js";
+import { SelectField as l, TextAreaField as u, TextField as d } from "../../components/Field.js";
+import { useEffect as f, useState as p } from "react";
+import { Loader2 as m, Pencil as h, Save as g, UserCircle as _, X as v } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { GlassCard as x } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/profile/StyleProfilePage.tsx
+var S = [
+	"PUBLIC",
+	"FOLLOWERS",
+	"PRIVATE"
+], C = {
+	displayName: "",
+	bio: "",
+	visibility: "PRIVATE",
+	stylePreferences: "",
+	palette: "",
+	favouriteBrands: ""
+};
+function w() {
+	let w = i(), T = a(), [E, D] = p(!1), [O, k] = p(C), A = w.data, j = !!A;
+	f(() => {
+		A && k({
+			displayName: A.displayName ?? "",
+			bio: A.bio ?? "",
+			visibility: A.visibility,
+			stylePreferences: A.stylePreferences.join(", "),
+			palette: A.palette.join(", "),
+			favouriteBrands: A.favouriteBrands.join(", ")
+		});
+	}, [A]), f(() => {
+		!w.isLoading && !j && D(!0);
+	}, [w.isLoading, j]);
+	let M = (e, t) => k((n) => ({
+		...n,
+		[e]: t
+	})), N = S.map((e) => ({
+		value: e,
+		label: s(e)
+	}));
+	return w.isLoading ? /* @__PURE__ */ y(e, {
+		title: "Style Profile",
+		children: /* @__PURE__ */ y(r, { label: "Loading your style profile…" })
+	}) : w.isError ? /* @__PURE__ */ y(e, {
+		title: "Style Profile",
+		children: /* @__PURE__ */ y(n, { onRetry: () => void w.refetch() })
+	}) : !E && A ? /* @__PURE__ */ y(e, {
+		title: "Style Profile",
+		description: "Your taste, palette and sizing — the spine of personalised discovery",
+		actions: /* @__PURE__ */ b("button", {
+			type: "button",
+			onClick: () => D(!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__ */ y(h, { className: "h-4 w-4" }), " Edit"]
+		}),
+		children: /* @__PURE__ */ y("div", {
+			className: "mx-auto max-w-2xl",
+			children: /* @__PURE__ */ b(x, {
+				treatment: "glass",
+				className: "p-6",
+				children: [
+					/* @__PURE__ */ b("div", {
+						className: "flex items-center gap-4",
+						children: [/* @__PURE__ */ y("div", {
+							className: "flex h-14 w-14 items-center justify-center rounded-full bg-accent-purple-subtle text-text-primary",
+							children: /* @__PURE__ */ y(_, { className: "h-7 w-7" })
+						}), /* @__PURE__ */ b("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ y("h2", {
+								className: "truncate text-xl font-semibold text-text-primary",
+								children: A.displayName || "Your style profile"
+							}), /* @__PURE__ */ y(t, {
+								status: A.visibility,
+								className: "mt-1"
+							})]
+						})]
+					}),
+					A.bio && /* @__PURE__ */ y("p", {
+						className: "mt-4 text-sm text-text-secondary",
+						children: A.bio
+					}),
+					/* @__PURE__ */ b("div", {
+						className: "mt-6 space-y-4",
+						children: [
+							/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+								className: "mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary",
+								children: "Style preferences"
+							}), A.stylePreferences.length ? /* @__PURE__ */ y(c, {
+								tags: A.stylePreferences,
+								tone: "accent",
+								max: 20
+							}) : /* @__PURE__ */ y("p", {
+								className: "text-sm text-text-secondary",
+								children: "—"
+							})] }),
+							/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+								className: "mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary",
+								children: "Palette"
+							}), A.palette.length ? /* @__PURE__ */ y(c, {
+								tags: A.palette,
+								max: 20
+							}) : /* @__PURE__ */ y("p", {
+								className: "text-sm text-text-secondary",
+								children: "—"
+							})] }),
+							/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+								className: "mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary",
+								children: "Favourite brands"
+							}), A.favouriteBrands.length ? /* @__PURE__ */ y(c, {
+								tags: A.favouriteBrands,
+								max: 20
+							}) : /* @__PURE__ */ y("p", {
+								className: "text-sm text-text-secondary",
+								children: "—"
+							})] })
+						]
+					})
+				]
+			})
+		})
+	}) : /* @__PURE__ */ y(e, {
+		title: j ? "Edit style profile" : "Create your style profile",
+		description: "This powers your personalised discovery feed",
+		actions: j ? /* @__PURE__ */ b("button", {
+			type: "button",
+			onClick: () => D(!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__ */ y(v, { className: "h-4 w-4" }), " Cancel"]
+		}) : void 0,
+		children: /* @__PURE__ */ y("form", {
+			onSubmit: (e) => {
+				e.preventDefault(), T.mutate({
+					displayName: O.displayName.trim() || void 0,
+					bio: O.bio.trim() || void 0,
+					visibility: O.visibility,
+					stylePreferences: o(O.stylePreferences),
+					palette: o(O.palette),
+					favouriteBrands: o(O.favouriteBrands)
+				}, { onSuccess: () => D(!1) });
+			},
+			className: "mx-auto max-w-2xl",
+			children: /* @__PURE__ */ b(x, {
+				treatment: "plain",
+				className: "p-6",
+				children: [
+					/* @__PURE__ */ y(d, {
+						id: "displayName",
+						label: "Display name",
+						value: O.displayName,
+						onChange: (e) => M("displayName", e),
+						placeholder: "How you want to appear"
+					}),
+					/* @__PURE__ */ y(u, {
+						id: "bio",
+						label: "Bio",
+						value: O.bio,
+						onChange: (e) => M("bio", e),
+						placeholder: "A sentence about your style…",
+						rows: 3,
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ y(l, {
+						id: "visibility",
+						label: "Visibility",
+						value: O.visibility,
+						onChange: (e) => M("visibility", e),
+						options: N,
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ y(d, {
+						id: "stylePreferences",
+						label: "Style preferences",
+						value: O.stylePreferences,
+						onChange: (e) => M("stylePreferences", e),
+						placeholder: "minimal, tailored, vintage",
+						hint: "Comma-separated",
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ y(d, {
+						id: "palette",
+						label: "Palette",
+						value: O.palette,
+						onChange: (e) => M("palette", e),
+						placeholder: "neutrals, navy, rust",
+						hint: "Comma-separated",
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ y(d, {
+						id: "favouriteBrands",
+						label: "Favourite brands",
+						value: O.favouriteBrands,
+						onChange: (e) => M("favouriteBrands", e),
+						placeholder: "Aurora Atelier, …",
+						hint: "Comma-separated",
+						className: "mt-4"
+					}),
+					T.isError && /* @__PURE__ */ y("p", {
+						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
+						children: T.error instanceof Error ? T.error.message : "Something went wrong"
+					}),
+					/* @__PURE__ */ y("div", {
+						className: "mt-6 flex justify-end gap-2",
+						children: /* @__PURE__ */ b("button", {
+							type: "submit",
+							disabled: T.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: [T.isPending ? /* @__PURE__ */ y(m, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ y(g, { className: "h-4 w-4" }), j ? "Save changes" : "Create profile"]
+						})
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { w as StyleProfilePage };
+
+//# sourceMappingURL=StyleProfilePage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyleProfilePage.js","names":[],"sources":["../../../../src/coolandlovely/pages/profile/StyleProfilePage.tsx"],"sourcesContent":["/**\n * Style Profile Page (self-scoped)\n * @module coolandlovely/pages/profile\n *\n * Views and edits the calling shopper's style profile (`cooMyStyleProfile` +\n * `cooUpsertStyleProfile`). One profile per workspace per shopper.\n */\n\nimport { useEffect, useState } from 'react';\nimport { Loader2, Save, UserCircle, Pencil, X } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { TagList } from '../../components/TagList';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { useMyStyleProfile, useUpsertStyleProfile } from '../../hooks';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooVisibility } from '../../types';\n\nconst VISIBILITIES: CooVisibility[] = ['PUBLIC', 'FOLLOWERS', 'PRIVATE'];\n\ninterface FormState {\n  displayName: string;\n  bio: string;\n  visibility: CooVisibility;\n  stylePreferences: string;\n  palette: string;\n  favouriteBrands: string;\n}\n\nconst EMPTY: FormState = {\n  displayName: '',\n  bio: '',\n  visibility: 'PRIVATE',\n  stylePreferences: '',\n  palette: '',\n  favouriteBrands: '',\n};\n\nexport function StyleProfilePage() {\n  const query = useMyStyleProfile();\n  const upsert = useUpsertStyleProfile();\n\n  const [editing, setEditing] = useState(false);\n  const [form, setForm] = useState<FormState>(EMPTY);\n\n  const profile = query.data;\n  const hasProfile = Boolean(profile);\n\n  useEffect(() => {\n    if (profile) {\n      setForm({\n        displayName: profile.displayName ?? '',\n        bio: profile.bio ?? '',\n        visibility: profile.visibility,\n        stylePreferences: profile.stylePreferences.join(', '),\n        palette: profile.palette.join(', '),\n        favouriteBrands: profile.favouriteBrands.join(', '),\n      });\n    }\n  }, [profile]);\n\n  // If there is no profile yet, drop straight into edit mode.\n  useEffect(() => {\n    if (!query.isLoading && !hasProfile) {\n      setEditing(true);\n    }\n  }, [query.isLoading, hasProfile]);\n\n  const setField = <K extends keyof FormState>(key: K, value: FormState[K]) =>\n    setForm((f) => ({ ...f, [key]: value }));\n\n  const visibilityOptions = VISIBILITIES.map((v) => ({ value: v, label: titleCase(v) }));\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    upsert.mutate(\n      {\n        displayName: form.displayName.trim() || undefined,\n        bio: form.bio.trim() || undefined,\n        visibility: form.visibility,\n        stylePreferences: parseCsv(form.stylePreferences),\n        palette: parseCsv(form.palette),\n        favouriteBrands: parseCsv(form.favouriteBrands),\n      },\n      { onSuccess: () => setEditing(false) }\n    );\n  };\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Style Profile\">\n        <LoadingView label=\"Loading your style profile…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError) {\n    return (\n      <PageLayout title=\"Style Profile\">\n        <ErrorView onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  // ----- View mode -----\n  if (!editing && profile) {\n    return (\n      <PageLayout\n        title=\"Style Profile\"\n        description=\"Your taste, palette and sizing — the spine of personalised discovery\"\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => setEditing(true)}\n            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\"\n          >\n            <Pencil className=\"h-4 w-4\" /> Edit\n          </button>\n        }\n      >\n        <div className=\"mx-auto max-w-2xl\">\n          <GlassCard treatment=\"glass\" className=\"p-6\">\n            <div className=\"flex items-center gap-4\">\n              <div className=\"flex h-14 w-14 items-center justify-center rounded-full bg-accent-purple-subtle text-text-primary\">\n                <UserCircle className=\"h-7 w-7\" />\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <h2 className=\"truncate text-xl font-semibold text-text-primary\">\n                  {profile.displayName || 'Your style profile'}\n                </h2>\n                <StatusBadge status={profile.visibility} className=\"mt-1\" />\n              </div>\n            </div>\n            {profile.bio && <p className=\"mt-4 text-sm text-text-secondary\">{profile.bio}</p>}\n\n            <div className=\"mt-6 space-y-4\">\n              <div>\n                <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Style preferences\n                </p>\n                {profile.stylePreferences.length ? (\n                  <TagList tags={profile.stylePreferences} tone=\"accent\" max={20} />\n                ) : (\n                  <p className=\"text-sm text-text-secondary\">—</p>\n                )}\n              </div>\n              <div>\n                <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Palette\n                </p>\n                {profile.palette.length ? (\n                  <TagList tags={profile.palette} max={20} />\n                ) : (\n                  <p className=\"text-sm text-text-secondary\">—</p>\n                )}\n              </div>\n              <div>\n                <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Favourite brands\n                </p>\n                {profile.favouriteBrands.length ? (\n                  <TagList tags={profile.favouriteBrands} max={20} />\n                ) : (\n                  <p className=\"text-sm text-text-secondary\">—</p>\n                )}\n              </div>\n            </div>\n          </GlassCard>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  // ----- Edit / create mode -----\n  return (\n    <PageLayout\n      title={hasProfile ? 'Edit style profile' : 'Create your style profile'}\n      description=\"This powers your personalised discovery feed\"\n      actions={\n        hasProfile ? (\n          <button\n            type=\"button\"\n            onClick={() => setEditing(false)}\n            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\"\n          >\n            <X className=\"h-4 w-4\" /> Cancel\n          </button>\n        ) : undefined\n      }\n    >\n      <form onSubmit={handleSubmit} className=\"mx-auto max-w-2xl\">\n        <GlassCard treatment=\"plain\" className=\"p-6\">\n          <TextField\n            id=\"displayName\"\n            label=\"Display name\"\n            value={form.displayName}\n            onChange={(v) => setField('displayName', v)}\n            placeholder=\"How you want to appear\"\n          />\n          <TextAreaField\n            id=\"bio\"\n            label=\"Bio\"\n            value={form.bio}\n            onChange={(v) => setField('bio', v)}\n            placeholder=\"A sentence about your style…\"\n            rows={3}\n            className=\"mt-4\"\n          />\n          <SelectField\n            id=\"visibility\"\n            label=\"Visibility\"\n            value={form.visibility}\n            onChange={(v) => setField('visibility', v as CooVisibility)}\n            options={visibilityOptions}\n            className=\"mt-4\"\n          />\n          <TextField\n            id=\"stylePreferences\"\n            label=\"Style preferences\"\n            value={form.stylePreferences}\n            onChange={(v) => setField('stylePreferences', v)}\n            placeholder=\"minimal, tailored, vintage\"\n            hint=\"Comma-separated\"\n            className=\"mt-4\"\n          />\n          <TextField\n            id=\"palette\"\n            label=\"Palette\"\n            value={form.palette}\n            onChange={(v) => setField('palette', v)}\n            placeholder=\"neutrals, navy, rust\"\n            hint=\"Comma-separated\"\n            className=\"mt-4\"\n          />\n          <TextField\n            id=\"favouriteBrands\"\n            label=\"Favourite brands\"\n            value={form.favouriteBrands}\n            onChange={(v) => setField('favouriteBrands', v)}\n            placeholder=\"Aurora Atelier, …\"\n            hint=\"Comma-separated\"\n            className=\"mt-4\"\n          />\n\n          {upsert.isError && (\n            <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n              {upsert.error instanceof Error ? upsert.error.message : 'Something went wrong'}\n            </p>\n          )}\n\n          <div className=\"mt-6 flex justify-end gap-2\">\n            <button\n              type=\"submit\"\n              disabled={upsert.isPending}\n              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\"\n            >\n              {upsert.isPending ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Save className=\"h-4 w-4\" />\n              )}\n              {hasProfile ? 'Save changes' : 'Create profile'}\n            </button>\n          </div>\n        </GlassCard>\n      </form>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/wardrobe/WardrobeFormPage.js

@@ -0,0 +1,173 @@
+import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { useCreateWardrobeItem as n } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { parseCsv as r, titleCase as i } from "../../utils/formatters.js";
+import { STYLE_CATEGORIES as a } from "../../utils/icons.js";
+import { SelectField as o, TextAreaField as s, TextField as c } from "../../components/Field.js";
+import { useState as l } from "react";
+import { ArrowLeft as u, Heart as d, Loader2 as f, Save as p } from "lucide-react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { GlassCard as g } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/wardrobe/WardrobeFormPage.tsx
+var _ = [
+	"OWNED",
+	"WISHLIST",
+	"PURCHASED_ON_PLATFORM",
+	"GIFTED"
+], v = {
+	name: "",
+	category: "OTHER",
+	source: "OWNED",
+	brandName: "",
+	colour: "",
+	size: "",
+	notes: "",
+	tags: ""
+};
+function y() {
+	let { navigateTo: y } = e(), b = n(), [x, S] = l(v), [C, w] = l(), T = (e, t) => S((n) => ({
+		...n,
+		[e]: t
+	})), E = a.map((e) => ({
+		value: e,
+		label: i(e)
+	})), D = _.map((e) => ({
+		value: e,
+		label: i(e)
+	}));
+	return /* @__PURE__ */ m(t, {
+		title: "Add a wardrobe piece",
+		description: "Catalogue something you own or want",
+		actions: /* @__PURE__ */ h("button", {
+			type: "button",
+			onClick: () => y("/wardrobe"),
+			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__ */ m(u, { className: "h-4 w-4" }), " Cancel"]
+		}),
+		children: /* @__PURE__ */ m("form", {
+			onSubmit: (e) => {
+				if (e.preventDefault(), !x.name.trim()) {
+					w("Name is required");
+					return;
+				}
+				w(void 0), b.mutate({
+					name: x.name.trim(),
+					category: x.category,
+					source: x.source,
+					brandName: x.brandName.trim() || void 0,
+					colour: x.colour.trim() || void 0,
+					size: x.size.trim() || void 0,
+					notes: x.notes.trim() || void 0,
+					tags: r(x.tags)
+				}, { onSuccess: () => y("/wardrobe") });
+			},
+			className: "mx-auto max-w-2xl",
+			children: /* @__PURE__ */ h(g, {
+				treatment: "plain",
+				className: "p-6",
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "mb-6 flex items-center gap-3",
+						children: [/* @__PURE__ */ m("div", {
+							className: "flex h-11 w-11 items-center justify-center rounded-lg bg-status-error-bg-subtle text-status-error-text",
+							children: /* @__PURE__ */ m(d, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h2", {
+							className: "text-base font-semibold text-text-primary",
+							children: "Piece details"
+						}), /* @__PURE__ */ m("p", {
+							className: "text-xs text-text-secondary",
+							children: "Only you can see your wardrobe."
+						})] })]
+					}),
+					/* @__PURE__ */ m(c, {
+						id: "name",
+						label: "Name",
+						value: x.name,
+						onChange: (e) => T("name", e),
+						placeholder: "Vintage denim jacket",
+						required: !0,
+						error: C
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2",
+						children: [/* @__PURE__ */ m(o, {
+							id: "category",
+							label: "Category",
+							value: x.category,
+							onChange: (e) => T("category", e),
+							options: E
+						}), /* @__PURE__ */ m(o, {
+							id: "source",
+							label: "Source",
+							value: x.source,
+							onChange: (e) => T("source", e),
+							options: D
+						})]
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3",
+						children: [
+							/* @__PURE__ */ m(c, {
+								id: "brandName",
+								label: "Brand",
+								value: x.brandName,
+								onChange: (e) => T("brandName", e),
+								placeholder: "Levi's"
+							}),
+							/* @__PURE__ */ m(c, {
+								id: "colour",
+								label: "Colour",
+								value: x.colour,
+								onChange: (e) => T("colour", e),
+								placeholder: "Indigo"
+							}),
+							/* @__PURE__ */ m(c, {
+								id: "size",
+								label: "Size",
+								value: x.size,
+								onChange: (e) => T("size", e),
+								placeholder: "M"
+							})
+						]
+					}),
+					/* @__PURE__ */ m(s, {
+						id: "notes",
+						label: "Notes",
+						value: x.notes,
+						onChange: (e) => T("notes", e),
+						placeholder: "Where you got it, how you wear it…",
+						rows: 3,
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ m(c, {
+						id: "tags",
+						label: "Tags",
+						value: x.tags,
+						onChange: (e) => T("tags", e),
+						placeholder: "denim, layering",
+						hint: "Comma-separated",
+						className: "mt-4"
+					}),
+					b.isError && /* @__PURE__ */ m("p", {
+						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
+						children: b.error instanceof Error ? b.error.message : "Something went wrong"
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "mt-6 flex justify-end gap-2",
+						children: /* @__PURE__ */ h("button", {
+							type: "submit",
+							disabled: b.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: [b.isPending ? /* @__PURE__ */ m(f, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ m(p, { className: "h-4 w-4" }), "Add to wardrobe"]
+						})
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { y as WardrobeFormPage };
+
+//# sourceMappingURL=WardrobeFormPage.js.map

package/dist/coolandlovely/pages/wardrobe/WardrobeFormPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WardrobeFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/wardrobe/WardrobeFormPage.tsx"],"sourcesContent":["/**\n * Wardrobe Item Create Page (self-scoped)\n * @module coolandlovely/pages/wardrobe\n *\n * Drives `cooCreateWardrobeItem`. Belongs to the calling shopper's profile.\n */\n\nimport { useState } from 'react';\nimport { ArrowLeft, Loader2, Save, Heart } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useCreateWardrobeItem } from '../../hooks';\nimport { STYLE_CATEGORIES } from '../../utils/icons';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooStyleCategory, CooWardrobeSource } from '../../types';\n\nconst SOURCES: CooWardrobeSource[] = ['OWNED', 'WISHLIST', 'PURCHASED_ON_PLATFORM', 'GIFTED'];\n\ninterface FormState {\n  name: string;\n  category: CooStyleCategory;\n  source: CooWardrobeSource;\n  brandName: string;\n  colour: string;\n  size: string;\n  notes: string;\n  tags: string;\n}\n\nconst EMPTY: FormState = {\n  name: '',\n  category: 'OTHER',\n  source: 'OWNED',\n  brandName: '',\n  colour: '',\n  size: '',\n  notes: '',\n  tags: '',\n};\n\nexport function WardrobeFormPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const createItem = useCreateWardrobeItem();\n\n  const [form, setForm] = useState<FormState>(EMPTY);\n  const [nameError, setNameError] = useState<string | undefined>();\n\n  const setField = <K extends keyof FormState>(key: K, value: FormState[K]) =>\n    setForm((f) => ({ ...f, [key]: value }));\n\n  const categoryOptions = STYLE_CATEGORIES.map((c) => ({ value: c, label: titleCase(c) }));\n  const sourceOptions = SOURCES.map((s) => ({ value: s, label: titleCase(s) }));\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!form.name.trim()) {\n      setNameError('Name is required');\n      return;\n    }\n    setNameError(undefined);\n\n    createItem.mutate(\n      {\n        name: form.name.trim(),\n        category: form.category,\n        source: form.source,\n        brandName: form.brandName.trim() || undefined,\n        colour: form.colour.trim() || undefined,\n        size: form.size.trim() || undefined,\n        notes: form.notes.trim() || undefined,\n        tags: parseCsv(form.tags),\n      },\n      { onSuccess: () => navigateTo('/wardrobe') }\n    );\n  };\n\n  return (\n    <PageLayout\n      title=\"Add a wardrobe piece\"\n      description=\"Catalogue something you own or want\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/wardrobe')}\n          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\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" /> Cancel\n        </button>\n      }\n    >\n      <form onSubmit={handleSubmit} className=\"mx-auto max-w-2xl\">\n        <GlassCard treatment=\"plain\" className=\"p-6\">\n          <div className=\"mb-6 flex items-center gap-3\">\n            <div className=\"flex h-11 w-11 items-center justify-center rounded-lg bg-status-error-bg-subtle text-status-error-text\">\n              <Heart className=\"h-5 w-5\" />\n            </div>\n            <div>\n              <h2 className=\"text-base font-semibold text-text-primary\">Piece details</h2>\n              <p className=\"text-xs text-text-secondary\">Only you can see your wardrobe.</p>\n            </div>\n          </div>\n\n          <TextField\n            id=\"name\"\n            label=\"Name\"\n            value={form.name}\n            onChange={(v) => setField('name', v)}\n            placeholder=\"Vintage denim jacket\"\n            required\n            error={nameError}\n          />\n\n          <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <SelectField\n              id=\"category\"\n              label=\"Category\"\n              value={form.category}\n              onChange={(v) => setField('category', v as CooStyleCategory)}\n              options={categoryOptions}\n            />\n            <SelectField\n              id=\"source\"\n              label=\"Source\"\n              value={form.source}\n              onChange={(v) => setField('source', v as CooWardrobeSource)}\n              options={sourceOptions}\n            />\n          </div>\n\n          <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3\">\n            <TextField\n              id=\"brandName\"\n              label=\"Brand\"\n              value={form.brandName}\n              onChange={(v) => setField('brandName', v)}\n              placeholder=\"Levi's\"\n            />\n            <TextField\n              id=\"colour\"\n              label=\"Colour\"\n              value={form.colour}\n              onChange={(v) => setField('colour', v)}\n              placeholder=\"Indigo\"\n            />\n            <TextField\n              id=\"size\"\n              label=\"Size\"\n              value={form.size}\n              onChange={(v) => setField('size', v)}\n              placeholder=\"M\"\n            />\n          </div>\n\n          <TextAreaField\n            id=\"notes\"\n            label=\"Notes\"\n            value={form.notes}\n            onChange={(v) => setField('notes', v)}\n            placeholder=\"Where you got it, how you wear it…\"\n            rows={3}\n            className=\"mt-4\"\n          />\n\n          <TextField\n            id=\"tags\"\n            label=\"Tags\"\n            value={form.tags}\n            onChange={(v) => setField('tags', v)}\n            placeholder=\"denim, layering\"\n            hint=\"Comma-separated\"\n            className=\"mt-4\"\n          />\n\n          {createItem.isError && (\n            <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n              {createItem.error instanceof Error ? createItem.error.message : 'Something went wrong'}\n            </p>\n          )}\n\n          <div className=\"mt-6 flex justify-end gap-2\">\n            <button\n              type=\"submit\"\n              disabled={createItem.isPending}\n              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\"\n            >\n              {createItem.isPending ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Save className=\"h-4 w-4\" />\n              )}\n              Add to wardrobe\n            </button>\n          </div>\n        </GlassCard>\n      </form>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/wardrobe/WardrobeListPage.js

@@ -0,0 +1,172 @@
+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 { StatusBadge as r } from "../../components/StatusBadge.js";
+import { ErrorView as i, LoadingView as a } from "../../components/StateViews.js";
+import { Thumbnail as o } from "../../components/Thumbnail.js";
+import { useLogWardrobeWear as s, useRemoveWardrobeItem as c, useWardrobeItems as l } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { formatRelativeTime as u, titleCase as d } from "../../utils/formatters.js";
+import { STYLE_CATEGORIES as f, categoryIcon as p } from "../../utils/icons.js";
+import { EmptyState as m } from "../../components/EmptyState.js";
+import { useState as h } from "react";
+import { CheckCircle2 as g, Heart as _, Loader2 as v, Plus as y, Trash2 as b } from "lucide-react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/coolandlovely/pages/wardrobe/WardrobeListPage.tsx
+var C = [
+	{
+		value: "ALL",
+		label: "All"
+	},
+	{
+		value: "OWNED",
+		label: "Owned"
+	},
+	{
+		value: "WISHLIST",
+		label: "Wishlist"
+	},
+	{
+		value: "PURCHASED_ON_PLATFORM",
+		label: "Purchased"
+	},
+	{
+		value: "GIFTED",
+		label: "Gifted"
+	}
+];
+function w() {
+	let { navigateTo: w } = e(), [T, E] = h("ALL"), [D, O] = h("ALL"), k = l({
+		category: T === "ALL" ? void 0 : T,
+		source: D === "ALL" ? void 0 : D
+	}), A = s(), j = c(), M = k.data ?? [];
+	return /* @__PURE__ */ S(n, {
+		title: "My Wardrobe",
+		description: "A private catalogue of what you own — with a wear log",
+		actions: /* @__PURE__ */ S("button", {
+			type: "button",
+			onClick: () => w("/wardrobe/new"),
+			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__ */ x(y, { className: "h-4 w-4" }), " Add piece"]
+		}),
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: "mb-3 flex flex-wrap items-center gap-2",
+				children: C.map((e) => /* @__PURE__ */ x("button", {
+					type: "button",
+					onClick: () => O(e.value),
+					className: t("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", D === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
+					children: e.label
+				}, e.value))
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "mb-6 flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ x("button", {
+					type: "button",
+					onClick: () => E("ALL"),
+					className: t("rounded-full px-3 py-1.5 text-xs font-medium transition-colors", T === "ALL" ? "bg-accent-purple-subtle text-text-primary" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
+					children: "All categories"
+				}), f.map((e) => /* @__PURE__ */ S("button", {
+					type: "button",
+					onClick: () => E(e),
+					className: t("inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition-colors", T === e ? "bg-accent-purple-subtle text-text-primary" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
+					children: [
+						p(e, 14),
+						" ",
+						d(e)
+					]
+				}, e))]
+			}),
+			k.isLoading ? /* @__PURE__ */ x(a, { label: "Loading your wardrobe…" }) : k.isError ? /* @__PURE__ */ x(i, { onRetry: () => void k.refetch() }) : M.length === 0 ? /* @__PURE__ */ x(m, {
+				illustration: "empty-data",
+				icon: /* @__PURE__ */ x(_, { className: "h-10 w-10" }),
+				title: "Your wardrobe is empty",
+				description: "Add the pieces you already own (or want) to start your digital closet.",
+				action: /* @__PURE__ */ S("button", {
+					type: "button",
+					onClick: () => w("/wardrobe/new"),
+					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",
+					children: [/* @__PURE__ */ x(y, { className: "h-4 w-4" }), " Add piece"]
+				})
+			}) : /* @__PURE__ */ x("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: M.map((e) => /* @__PURE__ */ S("div", {
+					className: "flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface shadow-sm",
+					children: [
+						/* @__PURE__ */ S("div", {
+							className: "flex items-start gap-3 p-4",
+							children: [/* @__PURE__ */ x(o, {
+								icon: p(e.category, 22),
+								seed: e.id,
+								className: "h-14 w-14 shrink-0"
+							}), /* @__PURE__ */ S("div", {
+								className: "min-w-0 flex-1",
+								children: [
+									/* @__PURE__ */ x("p", {
+										className: "truncate text-sm font-semibold text-text-primary",
+										children: e.name
+									}),
+									e.brandName && /* @__PURE__ */ x("p", {
+										className: "truncate text-xs text-text-secondary",
+										children: e.brandName
+									}),
+									/* @__PURE__ */ S("div", {
+										className: "mt-1.5 flex flex-wrap items-center gap-1.5",
+										children: [
+											/* @__PURE__ */ x(r, { status: e.source }),
+											e.colour && /* @__PURE__ */ x("span", {
+												className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
+												children: e.colour
+											}),
+											e.size && /* @__PURE__ */ x("span", {
+												className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
+												children: e.size
+											})
+										]
+									})
+								]
+							})]
+						}),
+						e.notes && /* @__PURE__ */ x("p", {
+							className: "px-4 pb-2 text-xs text-text-secondary line-clamp-2",
+							children: e.notes
+						}),
+						/* @__PURE__ */ S("div", {
+							className: "mt-auto flex items-center justify-between border-t border-border-seam px-4 py-2.5",
+							children: [/* @__PURE__ */ S("span", {
+								className: "text-xs text-text-secondary",
+								children: [
+									"Worn ",
+									e.timesWorn,
+									"×",
+									e.lastWornAt ? ` · ${u(e.lastWornAt)}` : ""
+								]
+							}), /* @__PURE__ */ S("div", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ S("button", {
+									type: "button",
+									disabled: A.isPending,
+									onClick: () => A.mutate(e.id),
+									"aria-label": "Log a wear",
+									className: "inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium text-status-success-text transition-colors hover:bg-status-success-bg-subtle disabled:opacity-50",
+									children: [A.isPending && A.variables === e.id ? /* @__PURE__ */ x(v, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ x(g, { className: "h-3.5 w-3.5" }), "Wore it"]
+								}), /* @__PURE__ */ x("button", {
+									type: "button",
+									disabled: j.isPending,
+									onClick: () => j.mutate(e.id),
+									"aria-label": "Remove piece",
+									className: "inline-flex h-7 w-7 items-center justify-center rounded-lg text-text-secondary transition-colors hover:bg-status-error-bg-subtle hover:text-status-error-text disabled:opacity-50",
+									children: /* @__PURE__ */ x(b, { className: "h-3.5 w-3.5" })
+								})]
+							})]
+						})
+					]
+				}, e.id))
+			})
+		]
+	});
+}
+//#endregion
+export { w as WardrobeListPage };
+
+//# sourceMappingURL=WardrobeListPage.js.map

package/dist/coolandlovely/pages/wardrobe/WardrobeListPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WardrobeListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/wardrobe/WardrobeListPage.tsx"],"sourcesContent":["/**\n * Wardrobe List Page (self-scoped)\n * @module coolandlovely/pages/wardrobe\n *\n * The shopper's digital wardrobe (`cooListWardrobeItems`, self-scoped) with\n * category & source filters, wear logging (`cooLogWardrobeWear`) and removal\n * (`cooRemoveWardrobeItem`).\n */\n\nimport { useState } from 'react';\nimport { Plus, Heart, CheckCircle2, Trash2, Loader2 } from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useWardrobeItems, useLogWardrobeWear, useRemoveWardrobeItem } from '../../hooks';\nimport { categoryIcon, STYLE_CATEGORIES } from '../../utils/icons';\nimport { titleCase, formatRelativeTime } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooStyleCategory, CooWardrobeSource } from '../../types';\n\nconst SOURCES: Array<{ value: CooWardrobeSource | 'ALL'; label: string }> = [\n  { value: 'ALL', label: 'All' },\n  { value: 'OWNED', label: 'Owned' },\n  { value: 'WISHLIST', label: 'Wishlist' },\n  { value: 'PURCHASED_ON_PLATFORM', label: 'Purchased' },\n  { value: 'GIFTED', label: 'Gifted' },\n];\n\nexport function WardrobeListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const [category, setCategory] = useState<CooStyleCategory | 'ALL'>('ALL');\n  const [source, setSource] = useState<CooWardrobeSource | 'ALL'>('ALL');\n\n  const query = useWardrobeItems({\n    category: category === 'ALL' ? undefined : category,\n    source: source === 'ALL' ? undefined : source,\n  });\n  const logWear = useLogWardrobeWear();\n  const remove = useRemoveWardrobeItem();\n\n  const items = query.data ?? [];\n\n  return (\n    <PageLayout\n      title=\"My Wardrobe\"\n      description=\"A private catalogue of what you own — with a wear log\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/wardrobe/new')}\n          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\"\n        >\n          <Plus className=\"h-4 w-4\" /> Add piece\n        </button>\n      }\n    >\n      {/* Source filter */}\n      <div className=\"mb-3 flex flex-wrap items-center gap-2\">\n        {SOURCES.map((opt) => (\n          <button\n            key={opt.value}\n            type=\"button\"\n            onClick={() => setSource(opt.value)}\n            className={cn(\n              'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n              source === opt.value\n                ? 'bg-action-primary-bg text-action-primary-text'\n                : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n            )}\n          >\n            {opt.label}\n          </button>\n        ))}\n      </div>\n\n      {/* Category filter */}\n      <div className=\"mb-6 flex flex-wrap items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => setCategory('ALL')}\n          className={cn(\n            'rounded-full px-3 py-1.5 text-xs font-medium transition-colors',\n            category === 'ALL'\n              ? 'bg-accent-purple-subtle text-text-primary'\n              : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n          )}\n        >\n          All categories\n        </button>\n        {STYLE_CATEGORIES.map((c) => (\n          <button\n            key={c}\n            type=\"button\"\n            onClick={() => setCategory(c)}\n            className={cn(\n              'inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition-colors',\n              category === c\n                ? 'bg-accent-purple-subtle text-text-primary'\n                : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n            )}\n          >\n            {categoryIcon(c, 14)} {titleCase(c)}\n          </button>\n        ))}\n      </div>\n\n      {query.isLoading ? (\n        <LoadingView label=\"Loading your wardrobe…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : items.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<Heart className=\"h-10 w-10\" />}\n          title=\"Your wardrobe is empty\"\n          description=\"Add the pieces you already own (or want) to start your digital closet.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/wardrobe/new')}\n              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\"\n            >\n              <Plus className=\"h-4 w-4\" /> Add piece\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {items.map((item) => (\n            <div\n              key={item.id}\n              className=\"flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface shadow-sm\"\n            >\n              <div className=\"flex items-start gap-3 p-4\">\n                <Thumbnail icon={categoryIcon(item.category, 22)} seed={item.id} className=\"h-14 w-14 shrink-0\" />\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate text-sm font-semibold text-text-primary\">{item.name}</p>\n                  {item.brandName && (\n                    <p className=\"truncate text-xs text-text-secondary\">{item.brandName}</p>\n                  )}\n                  <div className=\"mt-1.5 flex flex-wrap items-center gap-1.5\">\n                    <StatusBadge status={item.source} />\n                    {item.colour && (\n                      <span className=\"rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary\">\n                        {item.colour}\n                      </span>\n                    )}\n                    {item.size && (\n                      <span className=\"rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary\">\n                        {item.size}\n                      </span>\n                    )}\n                  </div>\n                </div>\n              </div>\n              {item.notes && (\n                <p className=\"px-4 pb-2 text-xs text-text-secondary line-clamp-2\">{item.notes}</p>\n              )}\n              <div className=\"mt-auto flex items-center justify-between border-t border-border-seam px-4 py-2.5\">\n                <span className=\"text-xs text-text-secondary\">\n                  Worn {item.timesWorn}×\n                  {item.lastWornAt ? ` · ${formatRelativeTime(item.lastWornAt)}` : ''}\n                </span>\n                <div className=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    disabled={logWear.isPending}\n                    onClick={() => logWear.mutate(item.id)}\n                    aria-label=\"Log a wear\"\n                    className=\"inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium text-status-success-text transition-colors hover:bg-status-success-bg-subtle disabled:opacity-50\"\n                  >\n                    {logWear.isPending && logWear.variables === item.id ? (\n                      <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n                    ) : (\n                      <CheckCircle2 className=\"h-3.5 w-3.5\" />\n                    )}\n                    Wore it\n                  </button>\n                  <button\n                    type=\"button\"\n                    disabled={remove.isPending}\n                    onClick={() => remove.mutate(item.id)}\n                    aria-label=\"Remove piece\"\n                    className=\"inline-flex h-7 w-7 items-center justify-center rounded-lg text-text-secondary transition-colors hover:bg-status-error-bg-subtle hover:text-status-error-text disabled:opacity-50\"\n                  >\n                    <Trash2 className=\"h-3.5 w-3.5\" />\n                  </button>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,IAAM,IAAsE;CAC1E;EAAE,OAAO;EAAO,OAAO;EAAO;CAC9B;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAY,OAAO;EAAY;CACxC;EAAE,OAAO;EAAyB,OAAO;EAAa;CACtD;EAAE,OAAO;EAAU,OAAO;EAAU;CACrC;AAED,SAAgB,IAAmB;CACjC,IAAM,EAAE,kBAAe,GAAkB,EACnC,CAAC,GAAU,KAAe,EAAmC,MAAM,EACnE,CAAC,GAAQ,KAAa,EAAoC,MAAM,EAEhE,IAAQ,EAAiB;EAC7B,UAAU,MAAa,QAAQ,KAAA,IAAY;EAC3C,QAAQ,MAAW,QAAQ,KAAA,IAAY;EACxC,CAAC,EACI,IAAU,GAAoB,EAC9B,IAAS,GAAuB,EAEhC,IAAQ,EAAM,QAAQ,EAAE;AAE9B,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAW,gBAAgB;GAC1C,WAAU;aAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,aACrB;;YAVb;GAcE,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAQ,KAAK,MACZ,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe,EAAU,EAAI,MAAM;KACnC,WAAW,EACT,kEACA,MAAW,EAAI,QACX,kDACA,2DACL;eAEA,EAAI;KACE,EAXF,EAAI,MAWF,CACT;IACE,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAY,MAAM;KACjC,WAAW,EACT,kEACA,MAAa,QACT,8CACA,2DACL;eACF;KAEQ,CAAA,EACR,EAAiB,KAAK,MACrB,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe,EAAY,EAAE;KAC7B,WAAW,EACT,mGACA,MAAa,IACT,8CACA,2DACL;eATH;MAWG,EAAa,GAAG,GAAG;MAAC;MAAE,EAAU,EAAE;MAC5B;OAXF,EAWE,CACT,CACE;;GAEL,EAAM,YACL,kBAAC,GAAD,EAAa,OAAM,0BAA2B,CAAA,GAC5C,EAAM,UACR,kBAAC,GAAD,EAAW,eAAe,KAAK,EAAM,SAAS,EAAI,CAAA,GAChD,EAAM,WAAW,IACnB,kBAAC,GAAD;IACE,cAAa;IACb,MAAM,kBAAC,GAAD,EAAO,WAAU,aAAc,CAAA;IACrC,OAAM;IACN,aAAY;IACZ,QACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,gBAAgB;KAC1C,WAAU;eAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,aACrB;;IAEX,CAAA,GAEF,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM,KAAK,MACV,kBAAC,OAAD;KAEE,WAAU;eAFZ;MAIE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD;QAAW,MAAM,EAAa,EAAK,UAAU,GAAG;QAAE,MAAM,EAAK;QAAI,WAAU;QAAuB,CAAA,EAClG,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,KAAD;UAAG,WAAU;oBAAoD,EAAK;UAAS,CAAA;SAC9E,EAAK,aACJ,kBAAC,KAAD;UAAG,WAAU;oBAAwC,EAAK;UAAc,CAAA;SAE1E,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,GAAD,EAAa,QAAQ,EAAK,QAAU,CAAA;WACnC,EAAK,UACJ,kBAAC,QAAD;YAAM,WAAU;sBACb,EAAK;YACD,CAAA;WAER,EAAK,QACJ,kBAAC,QAAD;YAAM,WAAU;sBACb,EAAK;YACD,CAAA;WAEL;;SACF;UACF;;MACL,EAAK,SACJ,kBAAC,KAAD;OAAG,WAAU;iBAAsD,EAAK;OAAU,CAAA;MAEpF,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SAA8C;SACtC,EAAK;SAAU;SACpB,EAAK,aAAa,MAAM,EAAmB,EAAK,WAAW,KAAK;SAC5D;WACP,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,UAAD;SACE,MAAK;SACL,UAAU,EAAQ;SAClB,eAAe,EAAQ,OAAO,EAAK,GAAG;SACtC,cAAW;SACX,WAAU;mBALZ,CAOG,EAAQ,aAAa,EAAQ,cAAc,EAAK,KAC/C,kBAAC,GAAD,EAAS,WAAU,4BAA6B,CAAA,GAEhD,kBAAC,GAAD,EAAc,WAAU,eAAgB,CAAA,EACxC,UAEK;YACT,kBAAC,UAAD;SACE,MAAK;SACL,UAAU,EAAO;SACjB,eAAe,EAAO,OAAO,EAAK,GAAG;SACrC,cAAW;SACX,WAAU;mBAEV,kBAAC,GAAD,EAAQ,WAAU,eAAgB,CAAA;SAC3B,CAAA,CACL;UACF;;MACF;OA3DC,EAAK,GA2DN,CACN;IACE,CAAA;GAEG"}