@burdenoff/microfe-coolandlovely 2026.625.2 → 2026.628.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyleItemDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"sourcesContent":["/**\n * Style Item Detail Page\n * @module coolandlovely/pages/items\n *\n * Renders a single catalogue piece (`cooStyleItem`) with edit + archive\n * (`cooArchiveStyleItem`) actions.\n */\n\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, Pencil, Archive, Loader2, Store, Shapes } 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 { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useStyleItem, useArchiveStyleItem } from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function StyleItemDetailPage() {\n  const { itemId } = useParams<{ itemId: string }>();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useStyleItem(itemId);\n  const archive = useArchiveStyleItem();\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Style item\">\n        <LoadingView label=\"Loading item…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError || !query.data) {\n    return (\n      <PageLayout title=\"Style item\">\n        <ErrorView title=\"Item not found\" onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  const item = query.data;\n  const isArchived = item.status === 'RETIRED';\n\n  return (\n    <PageLayout\n      title={item.name}\n      description={item.brand?.name ?? undefined}\n      actions={\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/items')}\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\" /> Back\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/items/${item.id}/edit`)}\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          {!isArchived && (\n            <button\n              type=\"button\"\n              disabled={archive.isPending}\n              onClick={() =>\n                archive.mutate(item.id, { onSuccess: () => navigateTo('/items') })\n              }\n              className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50\"\n            >\n              {archive.isPending ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Archive className=\"h-4 w-4\" />\n              )}\n              Archive\n            </button>\n          )}\n        </div>\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n        <div className=\"lg:col-span-2\">\n          <GlassCard treatment=\"glass\" className=\"overflow-hidden p-0\">\n            <Thumbnail icon={categoryIcon(item.category, 40)} seed={item.id} className=\"h-52 w-full\" />\n            <div className=\"p-6\">\n              <div className=\"flex items-center gap-2\">\n                <h2 className=\"text-xl font-semibold text-text-primary\">{item.name}</h2>\n                <StatusBadge status={item.status} className=\"ml-auto\" />\n              </div>\n              <p className=\"mt-1 text-2xl font-bold text-text-primary tabular-nums\">\n                {formatPrice(item.price, item.currency)}\n              </p>\n              {item.description && (\n                <p className=\"mt-3 text-sm text-text-secondary\">{item.description}</p>\n              )}\n\n              <div className=\"mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                {item.colours.length > 0 && (\n                  <div>\n                    <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                      Colours\n                    </p>\n                    <TagList tags={item.colours} max={10} />\n                  </div>\n                )}\n                {item.sizes.length > 0 && (\n                  <div>\n                    <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                      Sizes\n                    </p>\n                    <TagList tags={item.sizes} max={10} />\n                  </div>\n                )}\n                {item.materials.length > 0 && (\n                  <div>\n                    <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                      Materials\n                    </p>\n                    <TagList tags={item.materials} max={10} />\n                  </div>\n                )}\n                {item.tags.length > 0 && (\n                  <div>\n                    <p className=\"mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                      Tags\n                    </p>\n                    <TagList tags={item.tags} max={10} tone=\"accent\" />\n                  </div>\n                )}\n              </div>\n            </div>\n          </GlassCard>\n        </div>\n\n        <div className=\"space-y-4\">\n          <GlassCard treatment=\"plain\" className=\"p-5\">\n            <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Details</h3>\n            <dl className=\"space-y-2 text-sm\">\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Category</dt>\n                <dd className=\"text-text-primary\">{titleCase(item.category)}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">SKU</dt>\n                <dd className=\"text-text-primary\">{item.sku ?? '—'}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Currency</dt>\n                <dd className=\"text-text-primary\">{item.currency}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Created</dt>\n                <dd className=\"text-text-primary\">\n                  {formatDate(item.createdAt, { hour: undefined, minute: undefined })}\n                </dd>\n              </div>\n            </dl>\n          </GlassCard>\n\n          {item.brand && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/brands/${item.brand?.id}`)}\n              className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n            >\n              <Thumbnail icon={<Store className=\"h-5 w-5\" />} seed={item.brand.id} className=\"h-10 w-10 shrink-0\" />\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-sm font-medium text-text-primary\">{item.brand.name}</p>\n                <p className=\"truncate text-xs text-text-secondary\">View brand</p>\n              </div>\n            </button>\n          )}\n\n          {item.collection && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/collections/${item.collection?.id}`)}\n              className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n            >\n              <Thumbnail icon={<Shapes className=\"h-5 w-5\" />} seed={item.collection.id} className=\"h-10 w-10 shrink-0\" />\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-sm font-medium text-text-primary\">{item.collection.name}</p>\n                <p className=\"truncate text-xs text-text-secondary\">View collection</p>\n              </div>\n            </button>\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,276 @@
+import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { ErrorView as n, LoadingView as r } from "../../components/StateViews.js";
+import { useBrands as i, useCollections as a, useCreateStyleItem as o, useStyleItem as s, useUpdateStyleItem as c } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { parseCsv as l, titleCase as u } from "../../utils/formatters.js";
+import { STYLE_CATEGORIES as d } from "../../utils/icons.js";
+import { SelectField as f, TextAreaField as p, TextField as m } from "../../components/Field.js";
+import { useEffect as h, useMemo as g, useState as _ } from "react";
+import { ArrowLeft as v, Loader2 as y, Save as b, Shirt as x } from "lucide-react";
+import { useParams as S, useSearchParams as C } from "react-router-dom";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { GlassCard as E } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/items/StyleItemFormPage.tsx
+var D = {
+	brandId: "",
+	collectionId: "",
+	name: "",
+	description: "",
+	category: "OTHER",
+	sku: "",
+	price: "",
+	currency: "USD",
+	colours: "",
+	sizes: "",
+	materials: "",
+	tags: ""
+};
+function O() {
+	let { itemId: O } = S(), [k] = C(), A = !!O, { navigateTo: j } = e(), M = s(A ? O : void 0), N = i({ pagination: {
+		limit: 100,
+		offset: 0
+	} }), P = o(), F = c(), [I, L] = _(() => ({
+		...D,
+		brandId: k.get("brandId") ?? "",
+		collectionId: k.get("collectionId") ?? ""
+	})), [R, z] = _({}), B = a(I.brandId ? { brandId: I.brandId } : {});
+	h(() => {
+		if (A && M.data) {
+			let e = M.data;
+			L({
+				brandId: e.brandId,
+				collectionId: e.collectionId ?? "",
+				name: e.name,
+				description: e.description ?? "",
+				category: e.category,
+				sku: e.sku ?? "",
+				price: String(e.price),
+				currency: e.currency,
+				colours: e.colours.join(", "),
+				sizes: e.sizes.join(", "),
+				materials: e.materials.join(", "),
+				tags: e.tags.join(", ")
+			});
+		}
+	}, [A, M.data]);
+	let V = (e, t) => L((n) => ({
+		...n,
+		[e]: t
+	})), H = A ? F : P, U = g(() => (N.data?.items ?? []).map((e) => ({
+		value: e.id,
+		label: e.name
+	})), [N.data]), W = g(() => (B.data ?? []).map((e) => ({
+		value: e.id,
+		label: e.name
+	})), [B.data]), G = d.map((e) => ({
+		value: e,
+		label: u(e)
+	})), K = () => {
+		let e = {};
+		return I.name.trim() || (e.name = "Name is required"), !A && !I.brandId && (e.brandId = "Brand is required"), I.price && Number.isNaN(Number(I.price)) && (e.price = "Price must be a number"), z(e), Object.keys(e).length === 0;
+	};
+	return A && M.isLoading ? /* @__PURE__ */ w(t, {
+		title: "Edit item",
+		children: /* @__PURE__ */ w(r, { label: "Loading item…" })
+	}) : A && (M.isError || !M.data) ? /* @__PURE__ */ w(t, {
+		title: "Edit item",
+		children: /* @__PURE__ */ w(n, {
+			title: "Item not found",
+			onRetry: () => void M.refetch()
+		})
+	}) : /* @__PURE__ */ w(t, {
+		title: A ? "Edit item" : "New style item",
+		description: A ? "Update this catalogue piece" : "List a new shoppable piece",
+		actions: /* @__PURE__ */ T("button", {
+			type: "button",
+			onClick: () => j(A && O ? `/items/${O}` : "/items"),
+			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__ */ w(v, { className: "h-4 w-4" }), " Cancel"]
+		}),
+		children: /* @__PURE__ */ w("form", {
+			onSubmit: (e) => {
+				if (e.preventDefault(), !K()) return;
+				let t = I.price.trim() ? Number(I.price) : void 0;
+				A && O ? F.mutate({
+					id: O,
+					input: {
+						name: I.name.trim(),
+						description: I.description.trim() || void 0,
+						category: I.category,
+						collectionId: I.collectionId || void 0,
+						sku: I.sku.trim() || void 0,
+						price: t,
+						currency: I.currency.trim() || void 0,
+						colours: l(I.colours),
+						sizes: l(I.sizes),
+						materials: l(I.materials),
+						tags: l(I.tags)
+					}
+				}, { onSuccess: () => j(`/items/${O}`) }) : P.mutate({
+					brandId: I.brandId,
+					name: I.name.trim(),
+					description: I.description.trim() || void 0,
+					category: I.category,
+					collectionId: I.collectionId || void 0,
+					sku: I.sku.trim() || void 0,
+					price: t,
+					currency: I.currency.trim() || void 0,
+					colours: l(I.colours),
+					sizes: l(I.sizes),
+					materials: l(I.materials),
+					tags: l(I.tags)
+				}, { onSuccess: (e) => j(`/items/${e.id}`) });
+			},
+			className: "mx-auto max-w-2xl",
+			children: /* @__PURE__ */ T(E, {
+				treatment: "plain",
+				className: "p-6",
+				children: [
+					/* @__PURE__ */ T("div", {
+						className: "mb-6 flex items-center gap-3",
+						children: [/* @__PURE__ */ w("div", {
+							className: "flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+							children: /* @__PURE__ */ w(x, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h2", {
+							className: "text-base font-semibold text-text-primary",
+							children: "Item details"
+						}), /* @__PURE__ */ w("p", {
+							className: "text-xs text-text-secondary",
+							children: "A piece belongs to a brand and optionally a collection."
+						})] })]
+					}),
+					!A && /* @__PURE__ */ w(f, {
+						id: "brandId",
+						label: "Brand",
+						value: I.brandId,
+						onChange: (e) => V("brandId", e),
+						options: U,
+						required: !0,
+						placeholder: N.isLoading ? "Loading brands…" : "Select a brand",
+						error: R.brandId,
+						className: "mb-4"
+					}),
+					/* @__PURE__ */ T("div", {
+						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+						children: [/* @__PURE__ */ w(m, {
+							id: "name",
+							label: "Name",
+							value: I.name,
+							onChange: (e) => V("name", e),
+							placeholder: "Silk slip dress",
+							required: !0,
+							error: R.name
+						}), /* @__PURE__ */ w(f, {
+							id: "category",
+							label: "Category",
+							value: I.category,
+							onChange: (e) => V("category", e),
+							options: G
+						})]
+					}),
+					/* @__PURE__ */ w(p, {
+						id: "description",
+						label: "Description",
+						value: I.description,
+						onChange: (e) => V("description", e),
+						placeholder: "Describe the piece…",
+						rows: 3,
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ T("div", {
+						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3",
+						children: [
+							/* @__PURE__ */ w(m, {
+								id: "price",
+								label: "Price",
+								type: "number",
+								value: I.price,
+								onChange: (e) => V("price", e),
+								placeholder: "0.00",
+								error: R.price
+							}),
+							/* @__PURE__ */ w(m, {
+								id: "currency",
+								label: "Currency",
+								value: I.currency,
+								onChange: (e) => V("currency", e),
+								placeholder: "USD"
+							}),
+							/* @__PURE__ */ w(m, {
+								id: "sku",
+								label: "SKU",
+								value: I.sku,
+								onChange: (e) => V("sku", e),
+								placeholder: "ABC-123"
+							})
+						]
+					}),
+					/* @__PURE__ */ w(f, {
+						id: "collectionId",
+						label: "Collection (optional)",
+						value: I.collectionId,
+						onChange: (e) => V("collectionId", e),
+						options: W,
+						placeholder: I.brandId ? B.isLoading ? "Loading collections…" : "No collection" : "Select a brand first",
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ T("div", {
+						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2",
+						children: [
+							/* @__PURE__ */ w(m, {
+								id: "colours",
+								label: "Colours",
+								value: I.colours,
+								onChange: (e) => V("colours", e),
+								placeholder: "black, ivory",
+								hint: "Comma-separated"
+							}),
+							/* @__PURE__ */ w(m, {
+								id: "sizes",
+								label: "Sizes",
+								value: I.sizes,
+								onChange: (e) => V("sizes", e),
+								placeholder: "XS, S, M, L",
+								hint: "Comma-separated"
+							}),
+							/* @__PURE__ */ w(m, {
+								id: "materials",
+								label: "Materials",
+								value: I.materials,
+								onChange: (e) => V("materials", e),
+								placeholder: "silk, cotton",
+								hint: "Comma-separated"
+							}),
+							/* @__PURE__ */ w(m, {
+								id: "tags",
+								label: "Tags",
+								value: I.tags,
+								onChange: (e) => V("tags", e),
+								placeholder: "summer, party",
+								hint: "Comma-separated"
+							})
+						]
+					}),
+					H.isError && /* @__PURE__ */ w("p", {
+						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
+						children: H.error instanceof Error ? H.error.message : "Something went wrong"
+					}),
+					/* @__PURE__ */ w("div", {
+						className: "mt-6 flex justify-end gap-2",
+						children: /* @__PURE__ */ T("button", {
+							type: "submit",
+							disabled: H.isPending,
+							className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
+							children: [H.isPending ? /* @__PURE__ */ w(y, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ w(b, { className: "h-4 w-4" }), A ? "Save changes" : "Create item"]
+						})
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { O as StyleItemFormPage };
+
+//# sourceMappingURL=StyleItemFormPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyleItemFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemFormPage.tsx"],"sourcesContent":["/**\n * Style Item Create / Edit Page\n * @module coolandlovely/pages/items\n *\n * Drives `cooCreateStyleItem` (new) and `cooUpdateStyleItem` (edit).\n * Brand selection is required on create (and locked on edit). The collection\n * select is scoped to the chosen brand.\n */\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { ArrowLeft, Loader2, Save, Shirt } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n  useStyleItem,\n  useCreateStyleItem,\n  useUpdateStyleItem,\n  useBrands,\n  useCollections,\n} from '../../hooks';\nimport { STYLE_CATEGORIES } from '../../utils/icons';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooStyleCategory } from '../../types';\n\ninterface FormState {\n  brandId: string;\n  collectionId: string;\n  name: string;\n  description: string;\n  category: CooStyleCategory;\n  sku: string;\n  price: string;\n  currency: string;\n  colours: string;\n  sizes: string;\n  materials: string;\n  tags: string;\n}\n\nconst EMPTY: FormState = {\n  brandId: '',\n  collectionId: '',\n  name: '',\n  description: '',\n  category: 'OTHER',\n  sku: '',\n  price: '',\n  currency: 'USD',\n  colours: '',\n  sizes: '',\n  materials: '',\n  tags: '',\n};\n\nexport function StyleItemFormPage() {\n  const { itemId } = useParams<{ itemId: string }>();\n  const [searchParams] = useSearchParams();\n  const isEdit = Boolean(itemId);\n  const { navigateTo } = useCoolAndLovely();\n\n  const existing = useStyleItem(isEdit ? itemId : undefined);\n  const brands = useBrands({ pagination: { limit: 100, offset: 0 } });\n  const createItem = useCreateStyleItem();\n  const updateItem = useUpdateStyleItem();\n\n  const [form, setForm] = useState<FormState>(() => ({\n    ...EMPTY,\n    brandId: searchParams.get('brandId') ?? '',\n    collectionId: searchParams.get('collectionId') ?? '',\n  }));\n  const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});\n\n  // Collections scoped to the selected brand (for the optional collection select)\n  const collections = useCollections(form.brandId ? { brandId: form.brandId } : {});\n\n  useEffect(() => {\n    if (isEdit && existing.data) {\n      const it = existing.data;\n      setForm({\n        brandId: it.brandId,\n        collectionId: it.collectionId ?? '',\n        name: it.name,\n        description: it.description ?? '',\n        category: it.category,\n        sku: it.sku ?? '',\n        price: String(it.price),\n        currency: it.currency,\n        colours: it.colours.join(', '),\n        sizes: it.sizes.join(', '),\n        materials: it.materials.join(', '),\n        tags: it.tags.join(', '),\n      });\n    }\n  }, [isEdit, existing.data]);\n\n  const setField = <K extends keyof FormState>(key: K, value: FormState[K]) =>\n    setForm((f) => ({ ...f, [key]: value }));\n\n  const mutation = isEdit ? updateItem : createItem;\n\n  const brandOptions = useMemo(\n    () => (brands.data?.items ?? []).map((b) => ({ value: b.id, label: b.name })),\n    [brands.data]\n  );\n  const collectionOptions = useMemo(\n    () => (collections.data ?? []).map((c) => ({ value: c.id, label: c.name })),\n    [collections.data]\n  );\n  const categoryOptions = STYLE_CATEGORIES.map((c) => ({ value: c, label: titleCase(c) }));\n\n  const validate = (): boolean => {\n    const next: Partial<Record<keyof FormState, string>> = {};\n    if (!form.name.trim()) next.name = 'Name is required';\n    if (!isEdit && !form.brandId) next.brandId = 'Brand is required';\n    if (form.price && Number.isNaN(Number(form.price))) next.price = 'Price must be a number';\n    setErrors(next);\n    return Object.keys(next).length === 0;\n  };\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!validate()) return;\n\n    const priceNum = form.price.trim() ? Number(form.price) : undefined;\n\n    if (isEdit && itemId) {\n      updateItem.mutate(\n        {\n          id: itemId,\n          input: {\n            name: form.name.trim(),\n            description: form.description.trim() || undefined,\n            category: form.category,\n            collectionId: form.collectionId || undefined,\n            sku: form.sku.trim() || undefined,\n            price: priceNum,\n            currency: form.currency.trim() || undefined,\n            colours: parseCsv(form.colours),\n            sizes: parseCsv(form.sizes),\n            materials: parseCsv(form.materials),\n            tags: parseCsv(form.tags),\n          },\n        },\n        { onSuccess: () => navigateTo(`/items/${itemId}`) }\n      );\n    } else {\n      createItem.mutate(\n        {\n          brandId: form.brandId,\n          name: form.name.trim(),\n          description: form.description.trim() || undefined,\n          category: form.category,\n          collectionId: form.collectionId || undefined,\n          sku: form.sku.trim() || undefined,\n          price: priceNum,\n          currency: form.currency.trim() || undefined,\n          colours: parseCsv(form.colours),\n          sizes: parseCsv(form.sizes),\n          materials: parseCsv(form.materials),\n          tags: parseCsv(form.tags),\n        },\n        { onSuccess: (item) => navigateTo(`/items/${item.id}`) }\n      );\n    }\n  };\n\n  if (isEdit && existing.isLoading) {\n    return (\n      <PageLayout title=\"Edit item\">\n        <LoadingView label=\"Loading item…\" />\n      </PageLayout>\n    );\n  }\n\n  if (isEdit && (existing.isError || !existing.data)) {\n    return (\n      <PageLayout title=\"Edit item\">\n        <ErrorView title=\"Item not found\" onRetry={() => void existing.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={isEdit ? 'Edit item' : 'New style item'}\n      description={isEdit ? 'Update this catalogue piece' : 'List a new shoppable piece'}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo(isEdit && itemId ? `/items/${itemId}` : '/items')}\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-[var(--color-accent-soft)] text-text-primary\">\n              <Shirt className=\"h-5 w-5\" />\n            </div>\n            <div>\n              <h2 className=\"text-base font-semibold text-text-primary\">Item details</h2>\n              <p className=\"text-xs text-text-secondary\">\n                A piece belongs to a brand and optionally a collection.\n              </p>\n            </div>\n          </div>\n\n          {!isEdit && (\n            <SelectField\n              id=\"brandId\"\n              label=\"Brand\"\n              value={form.brandId}\n              onChange={(v) => setField('brandId', v)}\n              options={brandOptions}\n              required\n              placeholder={brands.isLoading ? 'Loading brands…' : 'Select a brand'}\n              error={errors.brandId}\n              className=\"mb-4\"\n            />\n          )}\n\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <TextField\n              id=\"name\"\n              label=\"Name\"\n              value={form.name}\n              onChange={(v) => setField('name', v)}\n              placeholder=\"Silk slip dress\"\n              required\n              error={errors.name}\n            />\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          </div>\n\n          <TextAreaField\n            id=\"description\"\n            label=\"Description\"\n            value={form.description}\n            onChange={(v) => setField('description', v)}\n            placeholder=\"Describe the piece…\"\n            rows={3}\n            className=\"mt-4\"\n          />\n\n          <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3\">\n            <TextField\n              id=\"price\"\n              label=\"Price\"\n              type=\"number\"\n              value={form.price}\n              onChange={(v) => setField('price', v)}\n              placeholder=\"0.00\"\n              error={errors.price}\n            />\n            <TextField\n              id=\"currency\"\n              label=\"Currency\"\n              value={form.currency}\n              onChange={(v) => setField('currency', v)}\n              placeholder=\"USD\"\n            />\n            <TextField\n              id=\"sku\"\n              label=\"SKU\"\n              value={form.sku}\n              onChange={(v) => setField('sku', v)}\n              placeholder=\"ABC-123\"\n            />\n          </div>\n\n          <SelectField\n            id=\"collectionId\"\n            label=\"Collection (optional)\"\n            value={form.collectionId}\n            onChange={(v) => setField('collectionId', v)}\n            options={collectionOptions}\n            placeholder={\n              !form.brandId\n                ? 'Select a brand first'\n                : collections.isLoading\n                  ? 'Loading collections…'\n                  : 'No collection'\n            }\n            className=\"mt-4\"\n          />\n\n          <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <TextField\n              id=\"colours\"\n              label=\"Colours\"\n              value={form.colours}\n              onChange={(v) => setField('colours', v)}\n              placeholder=\"black, ivory\"\n              hint=\"Comma-separated\"\n            />\n            <TextField\n              id=\"sizes\"\n              label=\"Sizes\"\n              value={form.sizes}\n              onChange={(v) => setField('sizes', v)}\n              placeholder=\"XS, S, M, L\"\n              hint=\"Comma-separated\"\n            />\n            <TextField\n              id=\"materials\"\n              label=\"Materials\"\n              value={form.materials}\n              onChange={(v) => setField('materials', v)}\n              placeholder=\"silk, cotton\"\n              hint=\"Comma-separated\"\n            />\n            <TextField\n              id=\"tags\"\n              label=\"Tags\"\n              value={form.tags}\n              onChange={(v) => setField('tags', v)}\n              placeholder=\"summer, party\"\n              hint=\"Comma-separated\"\n            />\n          </div>\n\n          {mutation.isError && (\n            <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n              {mutation.error instanceof Error ? mutation.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={mutation.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              {mutation.isPending ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Save className=\"h-4 w-4\" />\n              )}\n              {isEdit ? 'Save changes' : 'Create item'}\n            </button>\n          </div>\n        </GlassCard>\n      </form>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,170 @@
+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 { useStyleItems as s } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { formatPrice as c, titleCase as l } from "../../utils/formatters.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";
+//#region src/coolandlovely/pages/items/StyleItemsListPage.tsx
+var x = 24, S = [
+	{
+		value: "ALL",
+		label: "All"
+	},
+	{
+		value: "ACTIVE",
+		label: "Active"
+	},
+	{
+		value: "DRAFT",
+		label: "Draft"
+	},
+	{
+		value: "OUT_OF_STOCK",
+		label: "Out of stock"
+	},
+	{
+		value: "RETIRED",
+		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,
+		pagination: {
+			limit: x,
+			offset: O
+		}
+	}), j = A.data?.items ?? [], M = A.data?.pageInfo.hasMore ?? !1;
+	return /* @__PURE__ */ b(n, {
+		title: "Style Items",
+		description: "The shoppable catalogue across every brand",
+		actions: /* @__PURE__ */ b("button", {
+			type: "button",
+			onClick: () => C("/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__ */ y("div", {
+				className: "mb-3 flex flex-wrap items-center gap-2",
+				children: S.map((e) => /* @__PURE__ */ y("button", {
+					type: "button",
+					onClick: () => {
+						D(e.value), k(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"),
+					children: e.label
+				}, e.value))
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "mb-6 flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ y("button", {
+					type: "button",
+					onClick: () => {
+						T("ALL"), k(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"),
+					children: "All categories"
+				}), u.map((e) => /* @__PURE__ */ b("button", {
+					type: "button",
+					onClick: () => {
+						T(e), k(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"),
+					children: [
+						d(e, 14),
+						" ",
+						l(e)
+					]
+				}, e))]
+			}),
+			A.isLoading ? /* @__PURE__ */ y(a, { label: "Loading catalogue…" }) : A.isError ? /* @__PURE__ */ y(i, { onRetry: () => void A.refetch() }) : j.length === 0 ? /* @__PURE__ */ y(f, {
+				illustration: "empty-data",
+				icon: /* @__PURE__ */ y(_, { className: "h-10 w-10" }),
+				title: "No items found",
+				description: "No style items match these filters yet.",
+				action: /* @__PURE__ */ b("button", {
+					type: "button",
+					onClick: () => C("/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"]
+				})
+			}) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("div", {
+				className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4",
+				children: j.map((e) => /* @__PURE__ */ b("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", {
+						className: "relative",
+						children: [/* @__PURE__ */ y(o, {
+							icon: d(e.category, 28),
+							seed: e.id,
+							className: "h-36 w-full"
+						}), /* @__PURE__ */ y("div", {
+							className: "absolute right-2 top-2",
+							children: /* @__PURE__ */ y(r, { status: e.status })
+						})]
+					}), /* @__PURE__ */ b("div", {
+						className: "p-3",
+						children: [
+							/* @__PURE__ */ y("p", {
+								className: "truncate text-sm font-medium text-text-primary",
+								children: e.name
+							}),
+							e.brand?.name && /* @__PURE__ */ y("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",
+									children: c(e.price, e.currency)
+								}), /* @__PURE__ */ y("span", {
+									className: "text-xs text-text-secondary",
+									children: l(e.category)
+								})]
+							})
+						]
+					})]
+				}, e.id))
+			}), (O > 0 || M) && /* @__PURE__ */ b("div", {
+				className: "mt-6 flex items-center justify-center gap-2",
+				children: [
+					/* @__PURE__ */ b("button", {
+						type: "button",
+						disabled: O === 0,
+						onClick: () => k((e) => Math.max(0, e - x)),
+						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"]
+					}),
+					/* @__PURE__ */ b("span", {
+						className: "text-sm text-text-secondary",
+						children: ["Page ", O / x + 1]
+					}),
+					/* @__PURE__ */ b("button", {
+						type: "button",
+						disabled: !M,
+						onClick: () => k((e) => e + x),
+						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" })]
+					})
+				]
+			})] })
+		]
+	});
+}
+//#endregion
+export { C as StyleItemsListPage };
+
+//# sourceMappingURL=StyleItemsListPage.js.map

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

@@ -0,0 +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 icon={categoryIcon(item.category, 28)} seed={item.id} className=\"h-36 w-full\" />\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":"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"}