@burdenoff/microfe-coolandlovely 2026.1024.2 → 2026.1024.4

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

@@ -14,7 +14,20 @@ import { useParams as w, useSearchParams as T } from "react-router";
 import { jsx as E, jsxs as D } from "react/jsx-runtime";
 import { GlassCard as O } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/items/StyleItemFormPage.tsx
-var k = {
+var k = [
+	{
+		value: "DRAFT",
+		label: "Draft (not on sale)"
+	},
+	{
+		value: "ACTIVE",
+		label: "On sale"
+	},
+	{
+		value: "OUT_OF_STOCK",
+		label: "Out of stock"
+	}
+], A = {
 	brandId: "",
 	collectionId: "",
 	name: "",
@@ -27,21 +40,22 @@ var k = {
 	sizes: "",
 	materials: "",
 	tags: "",
-	imageFileId: ""
+	imageFileId: "",
+	status: "DRAFT"
 };
-function A() {
-	let { itemId: A } = w(), [j] = T(), M = !!A, { navigateTo: N } = e(), P = a(M ? A : void 0), F = n({ pagination: {
+function j() {
+	let { itemId: j } = w(), [M] = T(), N = !!j, { navigateTo: P } = e(), F = a(N ? j : void 0), I = n({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), I = i(), L = o(), [R, z] = y(() => ({
-		...k,
-		brandId: j.get("brandId") ?? "",
-		collectionId: j.get("collectionId") ?? ""
-	})), [B, V] = y({}), H = r(R.brandId ? { brandId: R.brandId } : {});
+	} }), L = i(), R = o(), [z, B] = y(() => ({
+		...A,
+		brandId: M.get("brandId") ?? "",
+		collectionId: M.get("collectionId") ?? ""
+	})), [V, H] = y({}), U = r(z.brandId ? { brandId: z.brandId } : {});
 	_(() => {
-		if (M && P.data) {
-			let e = P.data;
-			z({
+		if (N && F.data) {
+			let e = F.data;
+			B({
 				brandId: e.brandId,
 				collectionId: e.collectionId ?? "",
 				name: e.name,
@@ -54,79 +68,81 @@ function A() {
 				sizes: e.sizes.join(", "),
 				materials: e.materials.join(", "),
 				tags: e.tags.join(", "),
-				imageFileId: e.image?.id ?? ""
+				imageFileId: e.image?.id ?? "",
+				status: e.status
 			});
 		}
-	}, [M, P.data]);
-	let U = (e, t) => z((n) => ({
+	}, [N, F.data]);
+	let W = (e, t) => B((n) => ({
 		...n,
 		[e]: t
-	})), W = M ? L : I, G = v(() => (F.data?.items ?? []).map((e) => ({
+	})), G = N ? R : L, K = v(() => (I.data?.items ?? []).map((e) => ({
 		value: e.id,
 		label: e.name
-	})), [F.data]), K = v(() => (H.data ?? []).map((e) => ({
+	})), [I.data]), q = v(() => (U.data ?? []).map((e) => ({
 		value: e.id,
 		label: e.name
-	})), [H.data]), q = f.map((e) => ({
+	})), [U.data]), J = f.map((e) => ({
 		value: e,
 		label: d(e)
-	})), J = () => {
+	})), Y = () => {
 		let e = {};
-		return R.name.trim() || (e.name = "Name is required"), !M && !R.brandId && (e.brandId = "Brand is required"), R.price && Number.isNaN(Number(R.price)) && (e.price = "Price must be a number"), V(e), Object.keys(e).length === 0;
+		return z.name.trim() || (e.name = "Name is required"), !N && !z.brandId && (e.brandId = "Brand is required"), z.price && Number.isNaN(Number(z.price)) && (e.price = "Price must be a number"), H(e), Object.keys(e).length === 0;
 	};
-	return M && P.isLoading ? /* @__PURE__ */ E(t, {
+	return N && F.isLoading ? /* @__PURE__ */ E(t, {
 		title: "Edit item",
 		children: /* @__PURE__ */ E(l, { label: "Loading item…" })
-	}) : M && (P.isError || !P.data) ? /* @__PURE__ */ E(t, {
+	}) : N && (F.isError || !F.data) ? /* @__PURE__ */ E(t, {
 		title: "Edit item",
 		children: /* @__PURE__ */ E(c, {
 			title: "Item not found",
-			onRetry: () => void P.refetch()
+			onRetry: () => void F.refetch()
 		})
 	}) : /* @__PURE__ */ E(t, {
-		title: M ? "Edit item" : "New style item",
-		description: M ? "Update this catalogue piece" : "List a new shoppable piece",
+		title: N ? "Edit item" : "New style item",
+		description: N ? "Update this catalogue piece" : "List a new shoppable piece",
 		actions: /* @__PURE__ */ D("button", {
 			type: "button",
-			onClick: () => N(M && A ? `/items/${A}` : "/items"),
+			onClick: () => P(N && j ? `/items/${j}` : "/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__ */ E(b, { className: "h-4 w-4" }), " Cancel"]
 		}),
 		children: /* @__PURE__ */ E("form", {
 			onSubmit: (e) => {
-				if (e.preventDefault(), !J()) return;
-				let t = R.price.trim() ? Number(R.price) : void 0;
-				M && A ? L.mutate({
-					id: A,
+				if (e.preventDefault(), !Y()) return;
+				let t = z.price.trim() ? Number(z.price) : void 0;
+				N && j ? R.mutate({
+					id: j,
 					input: {
-						name: R.name.trim(),
-						description: R.description.trim() || void 0,
-						category: R.category,
-						collectionId: R.collectionId || void 0,
-						sku: R.sku.trim() || void 0,
+						name: z.name.trim(),
+						description: z.description.trim() || void 0,
+						category: z.category,
+						collectionId: z.collectionId || void 0,
+						sku: z.sku.trim() || void 0,
 						price: t,
-						currency: R.currency.trim() || void 0,
-						colours: u(R.colours),
-						sizes: u(R.sizes),
-						materials: u(R.materials),
-						tags: u(R.tags),
-						imageFileId: R.imageFileId || void 0
+						currency: z.currency.trim() || void 0,
+						colours: u(z.colours),
+						sizes: u(z.sizes),
+						materials: u(z.materials),
+						tags: u(z.tags),
+						imageFileId: z.imageFileId || void 0,
+						status: z.status === "RETIRED" ? void 0 : z.status
 					}
-				}, { onSuccess: () => N(`/items/${A}`) }) : I.mutate({
-					brandId: R.brandId,
-					name: R.name.trim(),
-					description: R.description.trim() || void 0,
-					category: R.category,
-					collectionId: R.collectionId || void 0,
-					sku: R.sku.trim() || void 0,
+				}, { onSuccess: () => P(`/items/${j}`) }) : L.mutate({
+					brandId: z.brandId,
+					name: z.name.trim(),
+					description: z.description.trim() || void 0,
+					category: z.category,
+					collectionId: z.collectionId || void 0,
+					sku: z.sku.trim() || void 0,
 					price: t,
-					currency: R.currency.trim() || void 0,
-					colours: u(R.colours),
-					sizes: u(R.sizes),
-					materials: u(R.materials),
-					tags: u(R.tags),
-					imageFileId: R.imageFileId || void 0
-				}, { onSuccess: (e) => N(`/items/${e.id}`) });
+					currency: z.currency.trim() || void 0,
+					colours: u(z.colours),
+					sizes: u(z.sizes),
+					materials: u(z.materials),
+					tags: u(z.tags),
+					imageFileId: z.imageFileId || void 0
+				}, { onSuccess: (e) => P(`/items/${e.id}`) });
 			},
 			className: "mx-auto max-w-2xl",
 			children: /* @__PURE__ */ D(O, {
@@ -146,48 +162,58 @@ function A() {
 							children: "A piece belongs to a brand and optionally a collection."
 						})] })]
 					}),
-					!M && /* @__PURE__ */ E(p, {
+					!N && /* @__PURE__ */ E(p, {
 						id: "brandId",
 						label: "Brand",
-						value: R.brandId,
-						onChange: (e) => U("brandId", e),
-						options: G,
+						value: z.brandId,
+						onChange: (e) => W("brandId", e),
+						options: K,
 						required: !0,
-						placeholder: F.isLoading ? "Loading brands…" : "Select a brand",
-						error: B.brandId,
+						placeholder: I.isLoading ? "Loading brands…" : "Select a brand",
+						error: V.brandId,
 						className: "mb-4"
 					}),
 					/* @__PURE__ */ D("div", {
 						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-						children: [/* @__PURE__ */ E(h, {
-							id: "name",
-							label: "Name",
-							value: R.name,
-							onChange: (e) => U("name", e),
-							placeholder: "Silk slip dress",
-							required: !0,
-							error: B.name
-						}), /* @__PURE__ */ E(p, {
-							id: "category",
-							label: "Category",
-							value: R.category,
-							onChange: (e) => U("category", e),
-							options: q
-						})]
+						children: [
+							/* @__PURE__ */ E(h, {
+								id: "name",
+								label: "Name",
+								value: z.name,
+								onChange: (e) => W("name", e),
+								placeholder: "Silk slip dress",
+								required: !0,
+								error: V.name
+							}),
+							/* @__PURE__ */ E(p, {
+								id: "category",
+								label: "Category",
+								value: z.category,
+								onChange: (e) => W("category", e),
+								options: J
+							}),
+							N && z.status !== "RETIRED" && /* @__PURE__ */ E(p, {
+								id: "status",
+								label: "Sale status",
+								value: z.status,
+								onChange: (e) => W("status", e),
+								options: k
+							})
+						]
 					}),
 					/* @__PURE__ */ E(m, {
 						id: "description",
 						label: "Description",
-						value: R.description,
-						onChange: (e) => U("description", e),
+						value: z.description,
+						onChange: (e) => W("description", e),
 						placeholder: "Describe the piece…",
 						rows: 3,
 						className: "mt-4"
 					}),
 					/* @__PURE__ */ E(g, {
 						label: "Product photo",
-						value: R.imageFileId,
-						onChange: (e) => U("imageFileId", e),
+						value: z.imageFileId,
+						onChange: (e) => W("imageFileId", e),
 						folder: s.items,
 						hint: "Shown across the catalogue and item page",
 						className: "mt-4"
@@ -199,23 +225,23 @@ function A() {
 								id: "price",
 								label: "Price",
 								type: "number",
-								value: R.price,
-								onChange: (e) => U("price", e),
+								value: z.price,
+								onChange: (e) => W("price", e),
 								placeholder: "0.00",
-								error: B.price
+								error: V.price
 							}),
 							/* @__PURE__ */ E(h, {
 								id: "currency",
 								label: "Currency",
-								value: R.currency,
-								onChange: (e) => U("currency", e),
+								value: z.currency,
+								onChange: (e) => W("currency", e),
 								placeholder: "USD"
 							}),
 							/* @__PURE__ */ E(h, {
 								id: "sku",
 								label: "SKU",
-								value: R.sku,
-								onChange: (e) => U("sku", e),
+								value: z.sku,
+								onChange: (e) => W("sku", e),
 								placeholder: "ABC-123"
 							})
 						]
@@ -223,10 +249,10 @@ function A() {
 					/* @__PURE__ */ E(p, {
 						id: "collectionId",
 						label: "Collection (optional)",
-						value: R.collectionId,
-						onChange: (e) => U("collectionId", e),
-						options: K,
-						placeholder: R.brandId ? H.isLoading ? "Loading collections…" : "No collection" : "Select a brand first",
+						value: z.collectionId,
+						onChange: (e) => W("collectionId", e),
+						options: q,
+						placeholder: z.brandId ? U.isLoading ? "Loading collections…" : "No collection" : "Select a brand first",
 						className: "mt-4"
 					}),
 					/* @__PURE__ */ D("div", {
@@ -235,48 +261,48 @@ function A() {
 							/* @__PURE__ */ E(h, {
 								id: "colours",
 								label: "Colours",
-								value: R.colours,
-								onChange: (e) => U("colours", e),
+								value: z.colours,
+								onChange: (e) => W("colours", e),
 								placeholder: "black, ivory",
 								hint: "Comma-separated"
 							}),
 							/* @__PURE__ */ E(h, {
 								id: "sizes",
 								label: "Sizes",
-								value: R.sizes,
-								onChange: (e) => U("sizes", e),
+								value: z.sizes,
+								onChange: (e) => W("sizes", e),
 								placeholder: "XS, S, M, L",
 								hint: "Comma-separated"
 							}),
 							/* @__PURE__ */ E(h, {
 								id: "materials",
 								label: "Materials",
-								value: R.materials,
-								onChange: (e) => U("materials", e),
+								value: z.materials,
+								onChange: (e) => W("materials", e),
 								placeholder: "silk, cotton",
 								hint: "Comma-separated"
 							}),
 							/* @__PURE__ */ E(h, {
 								id: "tags",
 								label: "Tags",
-								value: R.tags,
-								onChange: (e) => U("tags", e),
+								value: z.tags,
+								onChange: (e) => W("tags", e),
 								placeholder: "summer, party",
 								hint: "Comma-separated"
 							})
 						]
 					}),
-					W.isError && /* @__PURE__ */ E("p", {
+					G.isError && /* @__PURE__ */ E("p", {
 						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-						children: W.error instanceof Error ? W.error.message : "Something went wrong"
+						children: G.error instanceof Error ? G.error.message : "Something went wrong"
 					}),
 					/* @__PURE__ */ E("div", {
 						className: "mt-6 flex justify-end gap-2",
 						children: /* @__PURE__ */ D("button", {
 							type: "submit",
-							disabled: W.isPending,
+							disabled: G.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: [W.isPending ? /* @__PURE__ */ E(x, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(S, { className: "h-4 w-4" }), M ? "Save changes" : "Create item"]
+							children: [G.isPending ? /* @__PURE__ */ E(x, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(S, { className: "h-4 w-4" }), N ? "Save changes" : "Create item"]
 						})
 					})
 				]
@@ -285,6 +311,6 @@ function A() {
 	});
 }
 //#endregion
-export { A as StyleItemFormPage };
+export { j as StyleItemFormPage };
 
 //# sourceMappingURL=StyleItemFormPage.js.map

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

@@ -1 +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';\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 { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n  useStyleItem,\n  useCreateStyleItem,\n  useUpdateStyleItem,\n  useBrands,\n  useCollections,\n} from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\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  imageFileId: 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  imageFileId: '',\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        imageFileId: it.image?.id ?? '',\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            imageFileId: form.imageFileId || undefined,\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          imageFileId: form.imageFileId || undefined,\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          <ImageUploadField\n            label=\"Product photo\"\n            value={form.imageFileId}\n            onChange={(id) => setField('imageFileId', id)}\n            folder={COO_FILE_FOLDERS.items}\n            hint=\"Shown across the catalogue and item page\"\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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"}
+{"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';\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 { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n  useStyleItem,\n  useCreateStyleItem,\n  useUpdateStyleItem,\n  useBrands,\n  useCollections,\n} from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\nimport { STYLE_CATEGORIES } from '../../utils/icons';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooStyleCategory, CooStyleItemStatus } 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  imageFileId: string;\n  /** Sale status (edit only). RETIRED is archive-only and never offered here. */\n  status: CooStyleItemStatus;\n}\n\n/** Sale statuses a brand can set; checkout only sells ACTIVE pieces (BOFF-3370). */\nconst SALE_STATUS_OPTIONS: Array<{ value: CooStyleItemStatus; label: string }> = [\n  { value: 'DRAFT', label: 'Draft (not on sale)' },\n  { value: 'ACTIVE', label: 'On sale' },\n  { value: 'OUT_OF_STOCK', label: 'Out of stock' },\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  imageFileId: '',\n  status: 'DRAFT',\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        imageFileId: it.image?.id ?? '',\n        status: it.status,\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            imageFileId: form.imageFileId || undefined,\n            // A retired piece keeps its terminal status; only live statuses are sent.\n            status: form.status === 'RETIRED' ? undefined : form.status,\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          imageFileId: form.imageFileId || undefined,\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            {isEdit && form.status !== 'RETIRED' && (\n              <SelectField\n                id=\"status\"\n                label=\"Sale status\"\n                value={form.status}\n                onChange={(v) => setField('status', v as CooStyleItemStatus)}\n                options={SALE_STATUS_OPTIONS}\n              />\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          <ImageUploadField\n            label=\"Product photo\"\n            value={form.imageFileId}\n            onChange={(id) => setField('imageFileId', id)}\n            folder={COO_FILE_FOLDERS.items}\n            hint=\"Shown across the catalogue and item page\"\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.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Style Items List Page
+ * @module coolandlovely/pages/items
+ *
+ * Cursor-paginated catalogue (`cooListStyleItems`) with category & status
+ * filters. Cards link to the item detail page.
+ */
+export declare function StyleItemsListPage(): import("react").JSX.Element;
+//# sourceMappingURL=StyleItemsListPage.d.ts.map

package/dist/coolandlovely/pages/items/StyleItemsListPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyleItemsListPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/items/StyleItemsListPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,wBAAgB,kBAAkB,gCAqMjC"}

package/dist/coolandlovely/pages/lookbooks/LookbookDetailPage.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Lookbook Detail Page
+ * @module coolandlovely/pages/lookbooks
+ *
+ * Single lookbook (`cooLookbook`) rendered as a Pinterest-style masonry board.
+ * Each entry's `lookId` / `styleItemId` is resolved client-side against the
+ * already-fetched looks/items lists to a real title + image, with an optional
+ * note badge and a hover X-remove (`cooRemoveLookbookEntry`). New entries are
+ * added inline (`cooAddLookbookEntry`).
+ */
+export declare function LookbookDetailPage(): import("react").JSX.Element;
+//# sourceMappingURL=LookbookDetailPage.d.ts.map

package/dist/coolandlovely/pages/lookbooks/LookbookDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LookbookDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/lookbooks/LookbookDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AA6BH,wBAAgB,kBAAkB,gCAsSjC"}

package/dist/coolandlovely/pages/lookbooks/LookbooksListPage.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Lookbooks List Page
+ * @module coolandlovely/pages/lookbooks
+ *
+ * Lists themed lookbook boards (`cooListLookbooks`) as mood-board cards — a
+ * cover, a visibility chip and (when the list selection carries entries) an
+ * item count — and supports creating one inline (`cooCreateLookbook`).
+ */
+export declare function LookbooksListPage(): import("react").JSX.Element;
+//# sourceMappingURL=LookbooksListPage.d.ts.map

package/dist/coolandlovely/pages/lookbooks/LookbooksListPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LookbooksListPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/lookbooks/LookbooksListPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAmBH,wBAAgB,iBAAiB,gCAwLhC"}

package/dist/coolandlovely/pages/looks/LookDetailPage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Look Detail Page
+ * @module coolandlovely/pages/looks
+ *
+ * Single look (`cooLook`) with its look items, a true-toggle like
+ * (`cooLikeLook` / `cooUnlikeLook`), a true-toggle save (`cooSaveLook` /
+ * `cooUnsaveLook`), publish (`cooPublishLook`) and delete (`cooDeleteLook`)
+ * actions.
+ */
+export declare function LookDetailPage(): import("react").JSX.Element;
+//# sourceMappingURL=LookDetailPage.d.ts.map

package/dist/coolandlovely/pages/looks/LookDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LookDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/looks/LookDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAwFH,wBAAgB,cAAc,gCA6R7B"}

package/dist/coolandlovely/pages/looks/LookDetailPage.js

@@ -210,7 +210,7 @@ function B() {
 								price: e.styleItem.price,
 								currency: e.styleItem.currency,
 								imageFileId: e.styleItem.image?.id,
-								onOpen: () => w(`/items/${e.styleItem?.id}`)
+								onOpen: () => w(`/items/${e.styleItem?.id}?look=${q.id}`)
 							}, e.id) : /* @__PURE__ */ F("div", {
 								className: "flex flex-col justify-center rounded-xl border border-border-seam bg-bg-surface p-4",
 								children: [/* @__PURE__ */ P("p", {