@burdenoff/microfe-coolandlovely 2026.706.1 → 2026.706.2

package/dist/coolandlovely/pages/trends/TrendsPage.js

@@ -0,0 +1,249 @@
+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 { MetricsCard as r } from "../../components/MetricsCard.js";
+import { ErrorView as i, LoadingView as a } from "../../components/StateViews.js";
+import { useBrands as o, useLooks as s, useStyleItems as c } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { titleCase as l } from "../../utils/formatters.js";
+import { useMemo as u } from "react";
+import { CalendarHeart as d, Heart as f, Palette as p, Shapes as m, Shirt as h, Sparkles as g, Store as _, TrendingUp as v } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { EmphasisPanel as x, GlassCard as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/trends/TrendsPage.tsx
+function w(e, t = 8) {
+	return [...e.entries()].map(([e, t]) => ({
+		label: e,
+		value: t
+	})).sort((e, t) => t.value - e.value).slice(0, t);
+}
+var T = ({ title: e, icon: n, items: r, unit: i, emptyLabel: a, className: o }) => {
+	let s = r.reduce((e, t) => Math.max(e, t.value), 0) || 1;
+	return /* @__PURE__ */ b(S, {
+		treatment: "plain",
+		className: t("p-5", o),
+		children: [/* @__PURE__ */ b("h3", {
+			className: "mb-4 flex items-center gap-2 text-base font-semibold text-text-primary",
+			children: [
+				n,
+				" ",
+				e
+			]
+		}), r.length === 0 ? /* @__PURE__ */ y("p", {
+			className: "text-sm text-text-secondary",
+			children: a
+		}) : /* @__PURE__ */ y("ul", {
+			className: "space-y-3",
+			children: r.map((e) => /* @__PURE__ */ b("li", { children: [/* @__PURE__ */ b("div", {
+				className: "mb-1 flex items-center justify-between gap-2 text-sm",
+				children: [/* @__PURE__ */ y("span", {
+					className: "truncate text-text-primary",
+					children: e.label
+				}), /* @__PURE__ */ b("span", {
+					className: "shrink-0 tabular-nums text-text-secondary",
+					children: [
+						e.value.toLocaleString(),
+						" ",
+						i
+					]
+				})]
+			}), /* @__PURE__ */ y("div", {
+				className: "h-2 w-full overflow-hidden rounded-full bg-bg-sunken",
+				role: "img",
+				"aria-label": `${e.label}: ${e.value} ${i}`,
+				children: /* @__PURE__ */ y("div", {
+					className: "h-full rounded-full bg-action-primary-bg",
+					style: { width: `${Math.max(4, Math.round(e.value / s * 100))}%` }
+				})
+			})] }, e.label))
+		})]
+	});
+};
+function E() {
+	e();
+	let t = o({ pagination: {
+		limit: 100,
+		offset: 0
+	} }), S = c({ pagination: {
+		limit: 100,
+		offset: 0
+	} }), E = s({ pagination: {
+		limit: 100,
+		offset: 0
+	} }), D = t.isLoading || S.isLoading || E.isLoading, O = t.isError && S.isError && E.isError, k = u(() => {
+		let e = t.data?.items ?? [], n = S.data?.items ?? [], r = E.data?.items ?? [], i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
+		for (let e of n) {
+			i.set(l(e.category), (i.get(l(e.category)) ?? 0) + 1);
+			for (let t of e.colours) {
+				let e = l(t);
+				a.set(e, (a.get(e) ?? 0) + 1);
+			}
+		}
+		let o = /* @__PURE__ */ new Map();
+		for (let t of e) for (let e of t.aesthetics) {
+			let t = l(e);
+			o.set(t, (o.get(t) ?? 0) + 1);
+		}
+		let s = /* @__PURE__ */ new Map(), c = 0, u = 0;
+		for (let e of r) {
+			let t = e.likeCount + e.saveCount, n = l(e.occasion);
+			s.set(n, (s.get(n) ?? 0) + t), c += e.likeCount, u += e.saveCount;
+		}
+		let d = [...r].sort((e, t) => t.likeCount + t.saveCount - (e.likeCount + e.saveCount)).slice(0, 5);
+		return {
+			brandCount: e.length,
+			itemCount: n.length,
+			lookCount: r.length,
+			totalLikes: c,
+			totalSaves: u,
+			topCategories: w(i, 8),
+			topColours: w(a, 8),
+			topAesthetics: w(o, 8),
+			risingOccasions: w(s, 8),
+			topLooks: d
+		};
+	}, [
+		t.data,
+		S.data,
+		E.data
+	]);
+	if (D) return /* @__PURE__ */ y(n, {
+		title: "Trends",
+		children: /* @__PURE__ */ y(a, { label: "Reading platform signals…" })
+	});
+	if (O) return /* @__PURE__ */ y(n, {
+		title: "Trends",
+		children: /* @__PURE__ */ y(i, { onRetry: () => {
+			t.refetch(), S.refetch(), E.refetch();
+		} })
+	});
+	let A = [
+		{
+			icon: /* @__PURE__ */ y(_, { className: "h-5 w-5" }),
+			value: k.brandCount,
+			label: "Brands sampled"
+		},
+		{
+			icon: /* @__PURE__ */ y(h, { className: "h-5 w-5" }),
+			value: k.itemCount,
+			label: "Items sampled"
+		},
+		{
+			icon: /* @__PURE__ */ y(g, { className: "h-5 w-5" }),
+			value: k.lookCount,
+			label: "Looks sampled"
+		},
+		{
+			icon: /* @__PURE__ */ y(f, { className: "h-5 w-5" }),
+			value: k.totalLikes + k.totalSaves,
+			label: "Total engagement"
+		}
+	];
+	return /* @__PURE__ */ b(n, {
+		title: "Trends",
+		description: "Signals from platform activity",
+		hero: !0,
+		children: [
+			/* @__PURE__ */ y(C, {
+				className: "mb-6",
+				children: "These are honest, client-side signals computed from the pieces, brands and looks currently on CoolAndLovely — the most-listed categories and colours, the aesthetics brands describe themselves with, and which occasions are drawing the most likes and saves. Nothing here is fabricated; it is a live read of the catalogue and social activity."
+			}),
+			/* @__PURE__ */ b(x, {
+				className: "mb-8",
+				children: [/* @__PURE__ */ y("h2", {
+					className: "mb-4 text-lg font-semibold text-text-primary",
+					children: "At a glance"
+				}), /* @__PURE__ */ y("div", {
+					className: "grid grid-cols-2 gap-4 lg:grid-cols-4",
+					children: A.map((e) => /* @__PURE__ */ y(r, {
+						icon: e.icon,
+						value: e.value.toLocaleString(),
+						label: e.label
+					}, e.label))
+				})]
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
+				children: [
+					/* @__PURE__ */ y(T, {
+						title: "Top categories",
+						icon: /* @__PURE__ */ y(m, { className: "h-5 w-5" }),
+						items: k.topCategories,
+						unit: "items",
+						emptyLabel: "No style items yet."
+					}),
+					/* @__PURE__ */ y(T, {
+						title: "Most-listed colours",
+						icon: /* @__PURE__ */ y(p, { className: "h-5 w-5" }),
+						items: k.topColours,
+						unit: "items",
+						emptyLabel: "No colours recorded on items yet."
+					}),
+					/* @__PURE__ */ y(T, {
+						title: "Brand aesthetics",
+						icon: /* @__PURE__ */ y(_, { className: "h-5 w-5" }),
+						items: k.topAesthetics,
+						unit: "brands",
+						emptyLabel: "No brand aesthetics recorded yet."
+					}),
+					/* @__PURE__ */ y(T, {
+						title: "Rising occasions",
+						icon: /* @__PURE__ */ y(d, { className: "h-5 w-5" }),
+						items: k.risingOccasions,
+						unit: "engagement",
+						emptyLabel: "No looks published yet."
+					})
+				]
+			}),
+			/* @__PURE__ */ b("section", {
+				className: "mt-8",
+				children: [/* @__PURE__ */ b("h2", {
+					className: "mb-3 flex items-center gap-2 text-lg font-semibold text-text-primary",
+					children: [/* @__PURE__ */ y(v, { className: "h-5 w-5" }), " Most-loved looks"]
+				}), k.topLooks.length === 0 ? /* @__PURE__ */ y("p", {
+					className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
+					children: "No looks published yet."
+				}) : /* @__PURE__ */ y("div", {
+					className: "divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface",
+					children: k.topLooks.map((e, t) => /* @__PURE__ */ b("div", {
+						className: "flex items-center gap-4 px-4 py-3",
+						children: [
+							/* @__PURE__ */ y("span", {
+								className: "w-6 shrink-0 text-center text-sm font-semibold tabular-nums text-text-secondary",
+								children: t + 1
+							}),
+							/* @__PURE__ */ b("div", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ y("p", {
+									className: "truncate text-sm font-medium text-text-primary",
+									children: e.title
+								}), /* @__PURE__ */ y("p", {
+									className: "text-xs text-text-secondary",
+									children: l(e.occasion)
+								})]
+							}),
+							/* @__PURE__ */ b("span", {
+								className: "flex shrink-0 items-center gap-3 text-xs text-text-secondary",
+								children: [/* @__PURE__ */ b("span", {
+									className: "inline-flex items-center gap-1",
+									children: [
+										/* @__PURE__ */ y(f, { className: "h-3.5 w-3.5" }),
+										" ",
+										e.likeCount
+									]
+								}), /* @__PURE__ */ b("span", {
+									className: "tabular-nums",
+									children: [e.saveCount, " saves"]
+								})]
+							})
+						]
+					}, e.id))
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { E as TrendsPage };
+
+//# sourceMappingURL=TrendsPage.js.map

package/dist/coolandlovely/pages/trends/TrendsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendsPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/trends/TrendsPage.tsx"],"sourcesContent":["/**\n * Trends Page\n * @module coolandlovely/pages/trends\n *\n * Client-side analytics computed over the real catalogue + social lists\n * (cooListBrands / cooListStyleItems / cooListLooks). Honest by construction —\n * it only counts and ranks what is actually on the platform. No fabricated\n * metrics. Header labels it \"Signals from platform activity.\"\n */\n\nimport type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport {\n  TrendingUp,\n  Palette,\n  Shapes,\n  Sparkles,\n  Store,\n  Shirt,\n  Heart,\n  CalendarHeart,\n} from 'lucide-react';\nimport { EmphasisPanel, GlassCard, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { MetricsCard } from '../../components/MetricsCard';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useBrands, useStyleItems, useLooks } from '../../hooks';\nimport { titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\n\ninterface Ranked {\n  label: string;\n  value: number;\n  sublabel?: string;\n}\n\nfunction rank(map: Map<string, number>, top = 8): Ranked[] {\n  return [...map.entries()]\n    .map(([label, value]) => ({ label, value }))\n    .sort((a, b) => b.value - a.value)\n    .slice(0, top);\n}\n\ninterface StatBarsProps {\n  title: string;\n  icon: ReactNode;\n  items: Ranked[];\n  unit: string;\n  emptyLabel: string;\n  className?: string;\n}\n\nconst StatBars: FC<StatBarsProps> = ({ title, icon, items, unit, emptyLabel, className }) => {\n  const max = items.reduce((m, i) => Math.max(m, i.value), 0) || 1;\n  return (\n    <GlassCard treatment=\"plain\" className={cn('p-5', className)}>\n      <h3 className=\"mb-4 flex items-center gap-2 text-base font-semibold text-text-primary\">\n        {icon} {title}\n      </h3>\n      {items.length === 0 ? (\n        <p className=\"text-sm text-text-secondary\">{emptyLabel}</p>\n      ) : (\n        <ul className=\"space-y-3\">\n          {items.map((item) => (\n            <li key={item.label}>\n              <div className=\"mb-1 flex items-center justify-between gap-2 text-sm\">\n                <span className=\"truncate text-text-primary\">{item.label}</span>\n                <span className=\"shrink-0 tabular-nums text-text-secondary\">\n                  {item.value.toLocaleString()} {unit}\n                </span>\n              </div>\n              <div\n                className=\"h-2 w-full overflow-hidden rounded-full bg-bg-sunken\"\n                role=\"img\"\n                aria-label={`${item.label}: ${item.value} ${unit}`}\n              >\n                <div\n                  className=\"h-full rounded-full bg-action-primary-bg\"\n                  style={{ width: `${Math.max(4, Math.round((item.value / max) * 100))}%` }}\n                />\n              </div>\n            </li>\n          ))}\n        </ul>\n      )}\n    </GlassCard>\n  );\n};\n\nexport function TrendsPage() {\n  useCoolAndLovely();\n  const brands = useBrands({ pagination: { limit: 100, offset: 0 } });\n  const items = useStyleItems({ pagination: { limit: 100, offset: 0 } });\n  const looks = useLooks({ pagination: { limit: 100, offset: 0 } });\n\n  const isLoading = brands.isLoading || items.isLoading || looks.isLoading;\n  const isError = brands.isError && items.isError && looks.isError;\n\n  const analysis = useMemo(() => {\n    const brandRows = brands.data?.items ?? [];\n    const itemRows = items.data?.items ?? [];\n    const lookRows = looks.data?.items ?? [];\n\n    const categoryMap = new Map<string, number>();\n    const colourMap = new Map<string, number>();\n    for (const it of itemRows) {\n      categoryMap.set(titleCase(it.category), (categoryMap.get(titleCase(it.category)) ?? 0) + 1);\n      for (const c of it.colours) {\n        const key = titleCase(c);\n        colourMap.set(key, (colourMap.get(key) ?? 0) + 1);\n      }\n    }\n\n    const aestheticMap = new Map<string, number>();\n    for (const b of brandRows) {\n      for (const a of b.aesthetics) {\n        const key = titleCase(a);\n        aestheticMap.set(key, (aestheticMap.get(key) ?? 0) + 1);\n      }\n    }\n\n    const occasionEngagement = new Map<string, number>();\n    let totalLikes = 0;\n    let totalSaves = 0;\n    for (const l of lookRows) {\n      const eng = l.likeCount + l.saveCount;\n      const key = titleCase(l.occasion);\n      occasionEngagement.set(key, (occasionEngagement.get(key) ?? 0) + eng);\n      totalLikes += l.likeCount;\n      totalSaves += l.saveCount;\n    }\n\n    const topLooks = [...lookRows]\n      .sort((a, b) => b.likeCount + b.saveCount - (a.likeCount + a.saveCount))\n      .slice(0, 5);\n\n    return {\n      brandCount: brandRows.length,\n      itemCount: itemRows.length,\n      lookCount: lookRows.length,\n      totalLikes,\n      totalSaves,\n      topCategories: rank(categoryMap, 8),\n      topColours: rank(colourMap, 8),\n      topAesthetics: rank(aestheticMap, 8),\n      risingOccasions: rank(occasionEngagement, 8),\n      topLooks,\n    };\n  }, [brands.data, items.data, looks.data]);\n\n  if (isLoading) {\n    return (\n      <PageLayout title=\"Trends\">\n        <LoadingView label=\"Reading platform signals…\" />\n      </PageLayout>\n    );\n  }\n\n  if (isError) {\n    return (\n      <PageLayout title=\"Trends\">\n        <ErrorView\n          onRetry={() => {\n            void brands.refetch();\n            void items.refetch();\n            void looks.refetch();\n          }}\n        />\n      </PageLayout>\n    );\n  }\n\n  const metrics = [\n    { icon: <Store className=\"h-5 w-5\" />, value: analysis.brandCount, label: 'Brands sampled' },\n    { icon: <Shirt className=\"h-5 w-5\" />, value: analysis.itemCount, label: 'Items sampled' },\n    { icon: <Sparkles className=\"h-5 w-5\" />, value: analysis.lookCount, label: 'Looks sampled' },\n    {\n      icon: <Heart className=\"h-5 w-5\" />,\n      value: analysis.totalLikes + analysis.totalSaves,\n      label: 'Total engagement',\n    },\n  ];\n\n  return (\n    <PageLayout\n      title=\"Trends\"\n      description=\"Signals from platform activity\"\n      hero\n    >\n      <PagePurpose className=\"mb-6\">\n        These are honest, client-side signals computed from the pieces, brands and looks currently\n        on CoolAndLovely — the most-listed categories and colours, the aesthetics brands describe\n        themselves with, and which occasions are drawing the most likes and saves. Nothing here is\n        fabricated; it is a live read of the catalogue and social activity.\n      </PagePurpose>\n\n      <EmphasisPanel className=\"mb-8\">\n        <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">At a glance</h2>\n        <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n          {metrics.map((m) => (\n            <MetricsCard\n              key={m.label}\n              icon={m.icon}\n              value={m.value.toLocaleString()}\n              label={m.label}\n            />\n          ))}\n        </div>\n      </EmphasisPanel>\n\n      <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n        <StatBars\n          title=\"Top categories\"\n          icon={<Shapes className=\"h-5 w-5\" />}\n          items={analysis.topCategories}\n          unit=\"items\"\n          emptyLabel=\"No style items yet.\"\n        />\n        <StatBars\n          title=\"Most-listed colours\"\n          icon={<Palette className=\"h-5 w-5\" />}\n          items={analysis.topColours}\n          unit=\"items\"\n          emptyLabel=\"No colours recorded on items yet.\"\n        />\n        <StatBars\n          title=\"Brand aesthetics\"\n          icon={<Store className=\"h-5 w-5\" />}\n          items={analysis.topAesthetics}\n          unit=\"brands\"\n          emptyLabel=\"No brand aesthetics recorded yet.\"\n        />\n        <StatBars\n          title=\"Rising occasions\"\n          icon={<CalendarHeart className=\"h-5 w-5\" />}\n          items={analysis.risingOccasions}\n          unit=\"engagement\"\n          emptyLabel=\"No looks published yet.\"\n        />\n      </div>\n\n      <section className=\"mt-8\">\n        <h2 className=\"mb-3 flex items-center gap-2 text-lg font-semibold text-text-primary\">\n          <TrendingUp className=\"h-5 w-5\" /> Most-loved looks\n        </h2>\n        {analysis.topLooks.length === 0 ? (\n          <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n            No looks published yet.\n          </p>\n        ) : (\n          <div className=\"divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface\">\n            {analysis.topLooks.map((look, idx) => (\n              <div key={look.id} className=\"flex items-center gap-4 px-4 py-3\">\n                <span className=\"w-6 shrink-0 text-center text-sm font-semibold tabular-nums text-text-secondary\">\n                  {idx + 1}\n                </span>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate text-sm font-medium text-text-primary\">{look.title}</p>\n                  <p className=\"text-xs text-text-secondary\">{titleCase(look.occasion)}</p>\n                </div>\n                <span className=\"flex shrink-0 items-center gap-3 text-xs text-text-secondary\">\n                  <span className=\"inline-flex items-center gap-1\">\n                    <Heart className=\"h-3.5 w-3.5\" /> {look.likeCount}\n                  </span>\n                  <span className=\"tabular-nums\">{look.saveCount} saves</span>\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n      </section>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

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

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

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

@@ -1 +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\n                ? createItem.error.message\n                : '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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"}
+{"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 { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useCreateWardrobeItem } from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\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  imageFileId: 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  imageFileId: '',\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        imageFileId: form.imageFileId || undefined,\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          <ImageUploadField\n            label=\"Photo\"\n            value={form.imageFileId}\n            onChange={(id) => setField('imageFileId', id)}\n            folder={COO_FILE_FOLDERS.wardrobe}\n            hint=\"Your photo of the piece (private to you)\"\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\n                ? createItem.error.message\n                : '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

@@ -98,6 +98,8 @@ function w() {
 							children: [/* @__PURE__ */ x(o, {
 								icon: p(e.category, 22),
 								seed: e.id,
+								fileId: e.image?.id,
+								alt: e.name,
 								className: "h-14 w-14 shrink-0"
 							}), /* @__PURE__ */ S("div", {
 								className: "min-w-0 flex-1",