@burdenoff/microfe-coolandlovely 2026.706.2 → 2026.706.3

package/dist/coolandlovely/pages/items/StyleItemsListPage.js

@@ -5,15 +5,16 @@ 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 { useStyleItems as s } from "../../hooks/useCoolAndLovelyApi.js";
-import "../../hooks/index.js";
 import { formatPrice as c, titleCase as l } from "../../utils/formatters.js";
+import "../../hooks/index.js";
 import { STYLE_CATEGORIES as u, categoryIcon as d } from "../../utils/icons.js";
 import { EmptyState as f } from "../../components/EmptyState.js";
-import { useState as p } from "react";
-import { ChevronLeft as m, ChevronRight as h, Plus as g, Shirt as _ } from "lucide-react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { ColourSwatchRow as p } from "../../components/ColourSwatchRow.js";
+import { useState as m } from "react";
+import { ChevronLeft as h, ChevronRight as g, Plus as _, Shirt as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/coolandlovely/pages/items/StyleItemsListPage.tsx
-var x = 24, S = [
+var S = 24, C = [
 	{
 		value: "ALL",
 		label: "All"
@@ -35,51 +36,51 @@ var x = 24, S = [
 		label: "Retired"
 	}
 ];
-function C() {
-	let { navigateTo: C } = e(), [w, T] = p("ALL"), [E, D] = p("ALL"), [O, k] = p(0), A = s({
-		category: w === "ALL" ? void 0 : w,
-		status: E === "ALL" ? void 0 : E,
+function w() {
+	let { navigateTo: w } = e(), [T, E] = m("ALL"), [D, O] = m("ALL"), [k, A] = m(0), j = s({
+		category: T === "ALL" ? void 0 : T,
+		status: D === "ALL" ? void 0 : D,
 		pagination: {
-			limit: x,
-			offset: O
+			limit: S,
+			offset: k
 		}
-	}), j = A.data?.items ?? [], M = A.data?.pageInfo.hasMore ?? !1;
-	return /* @__PURE__ */ b(n, {
+	}), M = j.data?.items ?? [], N = j.data?.pageInfo.hasMore ?? !1;
+	return /* @__PURE__ */ x(n, {
 		title: "Style Items",
 		description: "The shoppable catalogue across every brand",
-		actions: /* @__PURE__ */ b("button", {
+		actions: /* @__PURE__ */ x("button", {
 			type: "button",
-			onClick: () => C("/items/new"),
+			onClick: () => w("/items/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__ */ y(g, { className: "h-4 w-4" }), " New item"]
+			children: [/* @__PURE__ */ b(_, { className: "h-4 w-4" }), " New item"]
 		}),
 		children: [
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ b("div", {
 				className: "mb-3 flex flex-wrap items-center gap-2",
-				children: S.map((e) => /* @__PURE__ */ y("button", {
+				children: C.map((e) => /* @__PURE__ */ b("button", {
 					type: "button",
 					onClick: () => {
-						D(e.value), k(0);
+						O(e.value), A(0);
 					},
-					className: t("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", E === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
+					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__ */ b("div", {
+			/* @__PURE__ */ x("div", {
 				className: "mb-6 flex flex-wrap items-center gap-2",
-				children: [/* @__PURE__ */ y("button", {
+				children: [/* @__PURE__ */ b("button", {
 					type: "button",
 					onClick: () => {
-						T("ALL"), k(0);
+						E("ALL"), A(0);
 					},
-					className: t("rounded-full px-3 py-1.5 text-xs font-medium transition-colors", w === "ALL" ? "bg-accent-purple-subtle text-text-primary" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
+					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"
-				}), u.map((e) => /* @__PURE__ */ b("button", {
+				}), u.map((e) => /* @__PURE__ */ x("button", {
 					type: "button",
 					onClick: () => {
-						T(e), k(0);
+						E(e), A(0);
 					},
-					className: t("inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition-colors", w === e ? "bg-accent-purple-subtle text-text-primary" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
+					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: [
 						d(e, 14),
 						" ",
@@ -87,79 +88,87 @@ function C() {
 					]
 				}, e))]
 			}),
-			A.isLoading ? /* @__PURE__ */ y(a, { label: "Loading catalogue…" }) : A.isError ? /* @__PURE__ */ y(i, { onRetry: () => void A.refetch() }) : j.length === 0 ? /* @__PURE__ */ y(f, {
+			j.isLoading ? /* @__PURE__ */ b(a, { label: "Loading catalogue…" }) : j.isError ? /* @__PURE__ */ b(i, { onRetry: () => void j.refetch() }) : M.length === 0 ? /* @__PURE__ */ b(f, {
 				illustration: "empty-data",
-				icon: /* @__PURE__ */ y(_, { className: "h-10 w-10" }),
+				icon: /* @__PURE__ */ b(v, { className: "h-10 w-10" }),
 				title: "No items found",
 				description: "No style items match these filters yet.",
-				action: /* @__PURE__ */ b("button", {
+				action: /* @__PURE__ */ x("button", {
 					type: "button",
-					onClick: () => C("/items/new"),
+					onClick: () => w("/items/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__ */ y(g, { className: "h-4 w-4" }), " New item"]
+					children: [/* @__PURE__ */ b(_, { className: "h-4 w-4" }), " New item"]
 				})
-			}) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("div", {
+			}) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
 				className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4",
-				children: j.map((e) => /* @__PURE__ */ b("button", {
+				children: M.map((e) => /* @__PURE__ */ x("button", {
 					type: "button",
-					onClick: () => C(`/items/${e.id}`),
-					className: "overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md",
-					children: [/* @__PURE__ */ b("div", {
+					onClick: () => w(`/items/${e.id}`),
+					className: "group overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md",
+					children: [/* @__PURE__ */ x("div", {
 						className: "relative",
-						children: [/* @__PURE__ */ y(o, {
-							icon: d(e.category, 28),
+						children: [/* @__PURE__ */ b(o, {
+							icon: d(e.category, 32),
 							seed: e.id,
 							fileId: e.image?.id,
 							alt: e.name,
-							className: "h-36 w-full"
-						}), /* @__PURE__ */ y("div", {
+							className: "aspect-[3/4] w-full"
+						}), /* @__PURE__ */ b("div", {
 							className: "absolute right-2 top-2",
-							children: /* @__PURE__ */ y(r, { status: e.status })
+							children: /* @__PURE__ */ b(r, {
+								status: e.status,
+								className: "shadow-sm"
+							})
 						})]
-					}), /* @__PURE__ */ b("div", {
+					}), /* @__PURE__ */ x("div", {
 						className: "p-3",
 						children: [
-							/* @__PURE__ */ y("p", {
+							/* @__PURE__ */ b("p", {
 								className: "truncate text-sm font-medium text-text-primary",
 								children: e.name
 							}),
-							e.brand?.name && /* @__PURE__ */ y("p", {
+							e.brand?.name && /* @__PURE__ */ b("p", {
 								className: "truncate text-xs text-text-secondary",
 								children: e.brand.name
 							}),
-							/* @__PURE__ */ b("div", {
-								className: "mt-1.5 flex items-center justify-between",
-								children: [/* @__PURE__ */ y("span", {
-									className: "text-sm font-semibold text-text-primary",
+							/* @__PURE__ */ x("div", {
+								className: "mt-1.5 flex items-center justify-between gap-2",
+								children: [/* @__PURE__ */ b("span", {
+									className: "text-sm font-semibold text-text-primary tabular-nums",
 									children: c(e.price, e.currency)
-								}), /* @__PURE__ */ y("span", {
+								}), /* @__PURE__ */ b("span", {
 									className: "text-xs text-text-secondary",
 									children: l(e.category)
 								})]
+							}),
+							e.colours.length > 0 && /* @__PURE__ */ b(p, {
+								colours: e.colours,
+								max: 5,
+								className: "mt-2"
 							})
 						]
 					})]
 				}, e.id))
-			}), (O > 0 || M) && /* @__PURE__ */ b("div", {
+			}), (k > 0 || N) && /* @__PURE__ */ x("div", {
 				className: "mt-6 flex items-center justify-center gap-2",
 				children: [
-					/* @__PURE__ */ b("button", {
+					/* @__PURE__ */ x("button", {
 						type: "button",
-						disabled: O === 0,
-						onClick: () => k((e) => Math.max(0, e - x)),
+						disabled: k === 0,
+						onClick: () => A((e) => Math.max(0, e - S)),
 						className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40",
-						children: [/* @__PURE__ */ y(m, { className: "h-4 w-4" }), " Previous"]
+						children: [/* @__PURE__ */ b(h, { className: "h-4 w-4" }), " Previous"]
 					}),
-					/* @__PURE__ */ b("span", {
+					/* @__PURE__ */ x("span", {
 						className: "text-sm text-text-secondary",
-						children: ["Page ", O / x + 1]
+						children: ["Page ", k / S + 1]
 					}),
-					/* @__PURE__ */ b("button", {
+					/* @__PURE__ */ x("button", {
 						type: "button",
-						disabled: !M,
-						onClick: () => k((e) => e + x),
+						disabled: !N,
+						onClick: () => A((e) => e + S),
 						className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40",
-						children: ["Next ", /* @__PURE__ */ y(h, { className: "h-4 w-4" })]
+						children: ["Next ", /* @__PURE__ */ b(g, { className: "h-4 w-4" })]
 					})
 				]
 			})] })
@@ -167,6 +176,6 @@ function C() {
 	});
 }
 //#endregion
-export { C as StyleItemsListPage };
+export { w as StyleItemsListPage };
 
 //# sourceMappingURL=StyleItemsListPage.js.map

package/dist/coolandlovely/pages/items/StyleItemsListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyleItemsListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemsListPage.tsx"],"sourcesContent":["/**\n * Style Items List Page\n * @module coolandlovely/pages/items\n *\n * Cursor-paginated catalogue (`cooListStyleItems`) with category & status\n * filters. Cards link to the item detail page.\n */\n\nimport { useState } from 'react';\nimport { Plus, ChevronLeft, ChevronRight, Shirt } 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 { useStyleItems } from '../../hooks';\nimport { categoryIcon, STYLE_CATEGORIES } from '../../utils/icons';\nimport { formatPrice, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooStyleCategory, CooStyleItemStatus } from '../../types';\n\nconst PAGE_SIZE = 24;\n\nconst STATUS_OPTIONS: Array<{ value: CooStyleItemStatus | 'ALL'; label: string }> = [\n  { value: 'ALL', label: 'All' },\n  { value: 'ACTIVE', label: 'Active' },\n  { value: 'DRAFT', label: 'Draft' },\n  { value: 'OUT_OF_STOCK', label: 'Out of stock' },\n  { value: 'RETIRED', label: 'Retired' },\n];\n\nexport function StyleItemsListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const [category, setCategory] = useState<CooStyleCategory | 'ALL'>('ALL');\n  const [status, setStatus] = useState<CooStyleItemStatus | 'ALL'>('ALL');\n  const [offset, setOffset] = useState(0);\n\n  const query = useStyleItems({\n    category: category === 'ALL' ? undefined : category,\n    status: status === 'ALL' ? undefined : status,\n    pagination: { limit: PAGE_SIZE, offset },\n  });\n\n  const items = query.data?.items ?? [];\n  const hasMore = query.data?.pageInfo.hasMore ?? false;\n\n  return (\n    <PageLayout\n      title=\"Style Items\"\n      description=\"The shoppable catalogue across every brand\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/items/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\" /> New item\n        </button>\n      }\n    >\n      {/* Status filter */}\n      <div className=\"mb-3 flex flex-wrap items-center gap-2\">\n        {STATUS_OPTIONS.map((opt) => (\n          <button\n            key={opt.value}\n            type=\"button\"\n            onClick={() => {\n              setStatus(opt.value);\n              setOffset(0);\n            }}\n            className={cn(\n              'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n              status === 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={() => {\n            setCategory('ALL');\n            setOffset(0);\n          }}\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={() => {\n              setCategory(c);\n              setOffset(0);\n            }}\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 catalogue…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : items.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<Shirt className=\"h-10 w-10\" />}\n          title=\"No items found\"\n          description=\"No style items match these filters yet.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/items/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\" /> New item\n            </button>\n          }\n        />\n      ) : (\n        <>\n          <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4\">\n            {items.map((item) => (\n              <button\n                key={item.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/items/${item.id}`)}\n                className=\"overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md\"\n              >\n                <div className=\"relative\">\n                  <Thumbnail\n                    icon={categoryIcon(item.category, 28)}\n                    seed={item.id}\n                    fileId={item.image?.id}\n                    alt={item.name}\n                    className=\"h-36 w-full\"\n                  />\n                  <div className=\"absolute right-2 top-2\">\n                    <StatusBadge status={item.status} />\n                  </div>\n                </div>\n                <div className=\"p-3\">\n                  <p className=\"truncate text-sm font-medium text-text-primary\">{item.name}</p>\n                  {item.brand?.name && (\n                    <p className=\"truncate text-xs text-text-secondary\">{item.brand.name}</p>\n                  )}\n                  <div className=\"mt-1.5 flex items-center justify-between\">\n                    <span className=\"text-sm font-semibold text-text-primary\">\n                      {formatPrice(item.price, item.currency)}\n                    </span>\n                    <span className=\"text-xs text-text-secondary\">{titleCase(item.category)}</span>\n                  </div>\n                </div>\n              </button>\n            ))}\n          </div>\n\n          {(offset > 0 || hasMore) && (\n            <div className=\"mt-6 flex items-center justify-center gap-2\">\n              <button\n                type=\"button\"\n                disabled={offset === 0}\n                onClick={() => setOffset((o) => Math.max(0, o - PAGE_SIZE))}\n                className=\"inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40\"\n              >\n                <ChevronLeft className=\"h-4 w-4\" /> Previous\n              </button>\n              <span className=\"text-sm text-text-secondary\">Page {offset / PAGE_SIZE + 1}</span>\n              <button\n                type=\"button\"\n                disabled={!hasMore}\n                onClick={() => setOffset((o) => o + PAGE_SIZE)}\n                className=\"inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40\"\n              >\n                Next <ChevronRight className=\"h-4 w-4\" />\n              </button>\n            </div>\n          )}\n        </>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAM,IAAY,IAEZ,IAA8E;CAClF;EAAE,OAAO;EAAO,OAAO;EAAO;CAC9B;EAAE,OAAO;EAAU,OAAO;EAAU;CACpC;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAgB,OAAO;EAAgB;CAChD;EAAE,OAAO;EAAW,OAAO;EAAW;CACvC;AAED,SAAgB,IAAqB;CACnC,IAAM,EAAE,kBAAe,GAAkB,EACnC,CAAC,GAAU,KAAe,EAAmC,MAAM,EACnE,CAAC,GAAQ,KAAa,EAAqC,MAAM,EACjE,CAAC,GAAQ,KAAa,EAAS,EAAE,EAEjC,IAAQ,EAAc;EAC1B,UAAU,MAAa,QAAQ,KAAA,IAAY;EAC3C,QAAQ,MAAW,QAAQ,KAAA,IAAY;EACvC,YAAY;GAAE,OAAO;GAAW;GAAQ;EACzC,CAAC,EAEI,IAAQ,EAAM,MAAM,SAAS,EAAE,EAC/B,IAAU,EAAM,MAAM,SAAS,WAAW;AAEhD,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAW,aAAa;GACvC,WAAU;aAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,YACrB;;YAVb;GAcE,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAe,KAAK,MACnB,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe;AAEb,MADA,EAAU,EAAI,MAAM,EACpB,EAAU,EAAE;;KAEd,WAAW,EACT,kEACA,MAAW,EAAI,QACX,kDACA,2DACL;eAEA,EAAI;KACE,EAdF,EAAI,MAcF,CACT;IACE,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe;AAEb,MADA,EAAY,MAAM,EAClB,EAAU,EAAE;;KAEd,WAAW,EACT,kEACA,MAAa,QACT,8CACA,2DACL;eACF;KAEQ,CAAA,EACR,EAAiB,KAAK,MACrB,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe;AAEb,MADA,EAAY,EAAE,EACd,EAAU,EAAE;;KAEd,WAAW,EACT,mGACA,MAAa,IACT,8CACA,2DACL;eAZH;MAcG,EAAa,GAAG,GAAG;MAAC;MAAE,EAAU,EAAE;MAC5B;OAdF,EAcE,CACT,CACE;;GAEL,EAAM,YACL,kBAAC,GAAD,EAAa,OAAM,sBAAuB,CAAA,GACxC,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,aAAa;KACvC,WAAU;eAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,YACrB;;IAEX,CAAA,GAEF,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM,KAAK,MACV,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe,EAAW,UAAU,EAAK,KAAK;KAC9C,WAAU;eAJZ,CAME,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OACE,MAAM,EAAa,EAAK,UAAU,GAAG;OACrC,MAAM,EAAK;OACX,QAAQ,EAAK,OAAO;OACpB,KAAK,EAAK;OACV,WAAU;OACV,CAAA,EACF,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAa,QAAQ,EAAK,QAAU,CAAA;OAChC,CAAA,CACF;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,KAAD;QAAG,WAAU;kBAAkD,EAAK;QAAS,CAAA;OAC5E,EAAK,OAAO,QACX,kBAAC,KAAD;QAAG,WAAU;kBAAwC,EAAK,MAAM;QAAS,CAAA;OAE3E,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAY,EAAK,OAAO,EAAK,SAAS;SAClC,CAAA,EACP,kBAAC,QAAD;SAAM,WAAU;mBAA+B,EAAU,EAAK,SAAS;SAAQ,CAAA,CAC3E;;OACF;QACC;OA7BF,EAAK,GA6BH,CACT;IACE,CAAA,GAEJ,IAAS,KAAK,MACd,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MACE,MAAK;MACL,UAAU,MAAW;MACrB,eAAe,GAAW,MAAM,KAAK,IAAI,GAAG,IAAI,EAAU,CAAC;MAC3D,WAAU;gBAJZ,CAME,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA,EAAA,YAC5B;;KACT,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CAA8C,SAAM,IAAS,IAAY,EAAS;;KAClF,kBAAC,UAAD;MACE,MAAK;MACL,UAAU,CAAC;MACX,eAAe,GAAW,MAAM,IAAI,EAAU;MAC9C,WAAU;gBAJZ,CAKC,SACM,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,CAClC;;KACL;MAEP,EAAA,CAAA;GAEM"}
+{"version":3,"file":"StyleItemsListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemsListPage.tsx"],"sourcesContent":["/**\n * Style Items List Page\n * @module coolandlovely/pages/items\n *\n * Cursor-paginated catalogue (`cooListStyleItems`) with category & status\n * filters. Cards link to the item detail page.\n */\n\nimport { useState } from 'react';\nimport { Plus, ChevronLeft, ChevronRight, Shirt } 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 { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useStyleItems } from '../../hooks';\nimport { categoryIcon, STYLE_CATEGORIES } from '../../utils/icons';\nimport { formatPrice, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooStyleCategory, CooStyleItemStatus } from '../../types';\n\nconst PAGE_SIZE = 24;\n\nconst STATUS_OPTIONS: Array<{ value: CooStyleItemStatus | 'ALL'; label: string }> = [\n  { value: 'ALL', label: 'All' },\n  { value: 'ACTIVE', label: 'Active' },\n  { value: 'DRAFT', label: 'Draft' },\n  { value: 'OUT_OF_STOCK', label: 'Out of stock' },\n  { value: 'RETIRED', label: 'Retired' },\n];\n\nexport function StyleItemsListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const [category, setCategory] = useState<CooStyleCategory | 'ALL'>('ALL');\n  const [status, setStatus] = useState<CooStyleItemStatus | 'ALL'>('ALL');\n  const [offset, setOffset] = useState(0);\n\n  const query = useStyleItems({\n    category: category === 'ALL' ? undefined : category,\n    status: status === 'ALL' ? undefined : status,\n    pagination: { limit: PAGE_SIZE, offset },\n  });\n\n  const items = query.data?.items ?? [];\n  const hasMore = query.data?.pageInfo.hasMore ?? false;\n\n  return (\n    <PageLayout\n      title=\"Style Items\"\n      description=\"The shoppable catalogue across every brand\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/items/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\" /> New item\n        </button>\n      }\n    >\n      {/* Status filter */}\n      <div className=\"mb-3 flex flex-wrap items-center gap-2\">\n        {STATUS_OPTIONS.map((opt) => (\n          <button\n            key={opt.value}\n            type=\"button\"\n            onClick={() => {\n              setStatus(opt.value);\n              setOffset(0);\n            }}\n            className={cn(\n              'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n              status === 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={() => {\n            setCategory('ALL');\n            setOffset(0);\n          }}\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={() => {\n              setCategory(c);\n              setOffset(0);\n            }}\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 catalogue…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : items.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<Shirt className=\"h-10 w-10\" />}\n          title=\"No items found\"\n          description=\"No style items match these filters yet.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/items/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\" /> New item\n            </button>\n          }\n        />\n      ) : (\n        <>\n          <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4\">\n            {items.map((item) => (\n              <button\n                key={item.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/items/${item.id}`)}\n                className=\"group overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md\"\n              >\n                <div className=\"relative\">\n                  <Thumbnail\n                    icon={categoryIcon(item.category, 32)}\n                    seed={item.id}\n                    fileId={item.image?.id}\n                    alt={item.name}\n                    className=\"aspect-[3/4] w-full\"\n                  />\n                  <div className=\"absolute right-2 top-2\">\n                    <StatusBadge status={item.status} className=\"shadow-sm\" />\n                  </div>\n                </div>\n                <div className=\"p-3\">\n                  <p className=\"truncate text-sm font-medium text-text-primary\">{item.name}</p>\n                  {item.brand?.name && (\n                    <p className=\"truncate text-xs text-text-secondary\">{item.brand.name}</p>\n                  )}\n                  <div className=\"mt-1.5 flex items-center justify-between gap-2\">\n                    <span className=\"text-sm font-semibold text-text-primary tabular-nums\">\n                      {formatPrice(item.price, item.currency)}\n                    </span>\n                    <span className=\"text-xs text-text-secondary\">{titleCase(item.category)}</span>\n                  </div>\n                  {item.colours.length > 0 && (\n                    <ColourSwatchRow colours={item.colours} max={5} className=\"mt-2\" />\n                  )}\n                </div>\n              </button>\n            ))}\n          </div>\n\n          {(offset > 0 || hasMore) && (\n            <div className=\"mt-6 flex items-center justify-center gap-2\">\n              <button\n                type=\"button\"\n                disabled={offset === 0}\n                onClick={() => setOffset((o) => Math.max(0, o - PAGE_SIZE))}\n                className=\"inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40\"\n              >\n                <ChevronLeft className=\"h-4 w-4\" /> Previous\n              </button>\n              <span className=\"text-sm text-text-secondary\">Page {offset / PAGE_SIZE + 1}</span>\n              <button\n                type=\"button\"\n                disabled={!hasMore}\n                onClick={() => setOffset((o) => o + PAGE_SIZE)}\n                className=\"inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40\"\n              >\n                Next <ChevronRight className=\"h-4 w-4\" />\n              </button>\n            </div>\n          )}\n        </>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}