@burdenoff/microfe-coolandlovely 2026.706.1 → 2026.706.2

package/dist/coolandlovely/pages/brands/BrandFormPage.js

@@ -1,182 +1,220 @@
 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 { useBrand as i, useCreateBrand as a, useUpdateBrand as o } from "../../hooks/useCoolAndLovelyApi.js";
+import { COO_FILE_FOLDERS as i } from "../../hooks/useFiles.js";
+import { useBrand as a, useCreateBrand as o, useUpdateBrand as s } from "../../hooks/useCoolAndLovelyApi.js";
 import "../../hooks/index.js";
-import { parseCsv as s } from "../../utils/formatters.js";
-import { TextAreaField as c, TextField as l } from "../../components/Field.js";
-import { useEffect as u, useState as d } from "react";
-import { ArrowLeft as f, Loader2 as p, Save as m, Store as h } from "lucide-react";
-import { useParams as g } from "react-router-dom";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { GlassCard as y } from "@burdenoff/fe-libs/ui";
+import { parseCsv as c } from "../../utils/formatters.js";
+import { TextAreaField as l, TextField as u, ToggleField as d } from "../../components/Field.js";
+import { ImageUploadField as f } from "../../components/ImageUploadField.js";
+import { useEffect as p, useState as m } from "react";
+import { ArrowLeft as h, Loader2 as g, Save as _, Store as v } from "lucide-react";
+import { useParams as y } from "react-router-dom";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { GlassCard as S } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/brands/BrandFormPage.tsx
-var b = {
+var C = {
 	name: "",
 	handle: "",
 	tagline: "",
 	bio: "",
 	aesthetics: "",
 	tags: "",
-	websiteUrl: ""
+	websiteUrl: "",
+	logoFileId: "",
+	coverFileId: "",
+	isFeatured: !1
 };
-function x() {
-	let { brandId: x } = g(), S = !!x, { navigateTo: C } = e(), w = i(S ? x : void 0), T = a(), E = o(), [D, O] = d(b), [k, A] = d({});
-	u(() => {
-		if (S && w.data) {
-			let e = w.data;
-			O({
+function w() {
+	let { brandId: w } = y(), T = !!w, { navigateTo: E } = e(), D = a(T ? w : void 0), O = o(), k = s(), [A, j] = m(C), [M, N] = m({});
+	p(() => {
+		if (T && D.data) {
+			let e = D.data;
+			j({
 				name: e.name,
 				handle: e.handle,
 				tagline: e.tagline ?? "",
 				bio: e.bio ?? "",
 				aesthetics: e.aesthetics.join(", "),
 				tags: e.tags.join(", "),
-				websiteUrl: e.websiteUrl ?? ""
+				websiteUrl: e.websiteUrl ?? "",
+				logoFileId: e.logo?.id ?? "",
+				coverFileId: e.cover?.id ?? "",
+				isFeatured: e.isFeatured
 			});
 		}
-	}, [S, w.data]);
-	let j = (e, t) => O((n) => ({
+	}, [T, D.data]);
+	let P = (e, t) => j((n) => ({
 		...n,
 		[e]: t
-	})), M = S ? E : T, N = () => {
+	})), F = T ? k : O, I = () => {
 		let e = {};
-		return D.name.trim() || (e.name = "Name is required"), !S && !D.handle.trim() && (e.handle = "Handle is required"), A(e), Object.keys(e).length === 0;
+		return A.name.trim() || (e.name = "Name is required"), !T && !A.handle.trim() && (e.handle = "Handle is required"), N(e), Object.keys(e).length === 0;
 	};
-	return S && w.isLoading ? /* @__PURE__ */ _(t, {
+	return T && D.isLoading ? /* @__PURE__ */ b(t, {
 		title: "Edit brand",
-		children: /* @__PURE__ */ _(r, { label: "Loading brand…" })
-	}) : S && (w.isError || !w.data) ? /* @__PURE__ */ _(t, {
+		children: /* @__PURE__ */ b(r, { label: "Loading brand…" })
+	}) : T && (D.isError || !D.data) ? /* @__PURE__ */ b(t, {
 		title: "Edit brand",
-		children: /* @__PURE__ */ _(n, {
+		children: /* @__PURE__ */ b(n, {
 			title: "Brand not found",
-			onRetry: () => void w.refetch()
+			onRetry: () => void D.refetch()
 		})
-	}) : /* @__PURE__ */ _(t, {
-		title: S ? "Edit brand" : "New brand",
-		description: S ? "Update this storefront" : "Launch a new storefront on the platform",
-		actions: /* @__PURE__ */ v("button", {
+	}) : /* @__PURE__ */ b(t, {
+		title: T ? "Edit brand" : "New brand",
+		description: T ? "Update this storefront" : "Launch a new storefront on the platform",
+		actions: /* @__PURE__ */ x("button", {
 			type: "button",
-			onClick: () => C(S && x ? `/brands/${x}` : "/brands"),
+			onClick: () => E(T && w ? `/brands/${w}` : "/brands"),
 			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__ */ _(f, { className: "h-4 w-4" }), " Cancel"]
+			children: [/* @__PURE__ */ b(h, { className: "h-4 w-4" }), " Cancel"]
 		}),
-		children: /* @__PURE__ */ _("form", {
+		children: /* @__PURE__ */ b("form", {
 			onSubmit: (e) => {
-				e.preventDefault(), N() && (S && x ? E.mutate({
-					id: x,
+				e.preventDefault(), I() && (T && w ? k.mutate({
+					id: w,
 					input: {
-						name: D.name.trim(),
-						tagline: D.tagline.trim() || void 0,
-						bio: D.bio.trim() || void 0,
-						aesthetics: s(D.aesthetics),
-						tags: s(D.tags),
-						websiteUrl: D.websiteUrl.trim() || void 0
+						name: A.name.trim(),
+						tagline: A.tagline.trim() || void 0,
+						bio: A.bio.trim() || void 0,
+						aesthetics: c(A.aesthetics),
+						tags: c(A.tags),
+						websiteUrl: A.websiteUrl.trim() || void 0,
+						logoFileId: A.logoFileId || void 0,
+						coverFileId: A.coverFileId || void 0,
+						isFeatured: A.isFeatured
 					}
-				}, { onSuccess: () => C(`/brands/${x}`) }) : T.mutate({
-					name: D.name.trim(),
-					handle: D.handle.trim(),
-					tagline: D.tagline.trim() || void 0,
-					bio: D.bio.trim() || void 0,
-					aesthetics: s(D.aesthetics),
-					tags: s(D.tags),
-					websiteUrl: D.websiteUrl.trim() || void 0
-				}, { onSuccess: (e) => C(`/brands/${e.id}`) }));
+				}, { onSuccess: () => E(`/brands/${w}`) }) : O.mutate({
+					name: A.name.trim(),
+					handle: A.handle.trim(),
+					tagline: A.tagline.trim() || void 0,
+					bio: A.bio.trim() || void 0,
+					aesthetics: c(A.aesthetics),
+					tags: c(A.tags),
+					websiteUrl: A.websiteUrl.trim() || void 0,
+					logoFileId: A.logoFileId || void 0,
+					coverFileId: A.coverFileId || void 0
+				}, { onSuccess: (e) => E(`/brands/${e.id}`) }));
 			},
 			className: "mx-auto max-w-2xl",
-			children: /* @__PURE__ */ v(y, {
+			children: /* @__PURE__ */ x(S, {
 				treatment: "plain",
 				className: "p-6",
 				children: [
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ x("div", {
 						className: "mb-6 flex items-center gap-3",
-						children: [/* @__PURE__ */ _("div", {
+						children: [/* @__PURE__ */ b("div", {
 							className: "flex h-11 w-11 items-center justify-center rounded-lg bg-accent-purple-subtle text-text-primary",
-							children: /* @__PURE__ */ _(h, { className: "h-5 w-5" })
-						}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h2", {
+							children: /* @__PURE__ */ b(v, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h2", {
 							className: "text-base font-semibold text-text-primary",
 							children: "Storefront details"
-						}), /* @__PURE__ */ _("p", {
+						}), /* @__PURE__ */ b("p", {
 							className: "text-xs text-text-secondary",
 							children: "Name your storefront and tell shoppers what your brand stands for."
 						})] })]
 					}),
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ x("div", {
 						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-						children: [/* @__PURE__ */ _(l, {
+						children: [/* @__PURE__ */ b(u, {
 							id: "name",
 							label: "Brand name",
-							value: D.name,
-							onChange: (e) => j("name", e),
+							value: A.name,
+							onChange: (e) => P("name", e),
 							placeholder: "Aurora Atelier",
 							required: !0,
-							error: k.name
-						}), /* @__PURE__ */ _(l, {
+							error: M.name
+						}), /* @__PURE__ */ b(u, {
 							id: "handle",
 							label: "Handle",
-							value: D.handle,
-							onChange: (e) => j("handle", e),
+							value: A.handle,
+							onChange: (e) => P("handle", e),
 							placeholder: "aurora-atelier",
-							required: !S,
-							hint: S ? "Handle cannot be changed after creation" : "Unique per workspace",
-							error: k.handle
+							required: !T,
+							hint: T ? "Handle cannot be changed after creation" : "Unique per workspace",
+							error: M.handle
 						})]
 					}),
-					/* @__PURE__ */ _(l, {
+					/* @__PURE__ */ b(u, {
 						id: "tagline",
 						label: "Tagline",
-						value: D.tagline,
-						onChange: (e) => j("tagline", e),
+						value: A.tagline,
+						onChange: (e) => P("tagline", e),
 						placeholder: "Quiet luxury, loud ideas",
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ _(c, {
+					/* @__PURE__ */ b(l, {
 						id: "bio",
 						label: "Bio",
-						value: D.bio,
-						onChange: (e) => j("bio", e),
+						value: A.bio,
+						onChange: (e) => P("bio", e),
 						placeholder: "Tell shoppers what your brand stands for…",
 						rows: 4,
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ x("div", {
 						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2",
-						children: [/* @__PURE__ */ _(l, {
+						children: [/* @__PURE__ */ b(u, {
 							id: "aesthetics",
 							label: "Aesthetics",
-							value: D.aesthetics,
-							onChange: (e) => j("aesthetics", e),
+							value: A.aesthetics,
+							onChange: (e) => P("aesthetics", e),
 							placeholder: "minimal, Y2K, coastal",
 							hint: "Comma-separated descriptors"
-						}), /* @__PURE__ */ _(l, {
+						}), /* @__PURE__ */ b(u, {
 							id: "tags",
 							label: "Tags",
-							value: D.tags,
-							onChange: (e) => j("tags", e),
+							value: A.tags,
+							onChange: (e) => P("tags", e),
 							placeholder: "sustainable, handmade",
 							hint: "Comma-separated"
 						})]
 					}),
-					/* @__PURE__ */ _(l, {
+					/* @__PURE__ */ b(u, {
 						id: "websiteUrl",
 						label: "Website",
 						type: "url",
-						value: D.websiteUrl,
-						onChange: (e) => j("websiteUrl", e),
+						value: A.websiteUrl,
+						onChange: (e) => P("websiteUrl", e),
 						placeholder: "https://example.com",
 						className: "mt-4"
 					}),
-					M.isError && /* @__PURE__ */ _("p", {
+					/* @__PURE__ */ x("div", {
+						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2",
+						children: [/* @__PURE__ */ b(f, {
+							label: "Logo",
+							value: A.logoFileId,
+							onChange: (e) => P("logoFileId", e),
+							folder: i.brands,
+							hint: "Square storefront logo"
+						}), /* @__PURE__ */ b(f, {
+							label: "Cover",
+							aspect: "wide",
+							value: A.coverFileId,
+							onChange: (e) => P("coverFileId", e),
+							folder: i.brands,
+							hint: "Wide storefront banner"
+						})]
+					}),
+					T && /* @__PURE__ */ b(d, {
+						id: "isFeatured",
+						label: "Feature this brand",
+						checked: A.isFeatured,
+						onChange: (e) => P("isFeatured", e),
+						hint: "Featured brands surface in the Featured filter and carry a star badge.",
+						className: "mt-4"
+					}),
+					F.isError && /* @__PURE__ */ b("p", {
 						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-						children: M.error instanceof Error ? M.error.message : "Something went wrong"
+						children: F.error instanceof Error ? F.error.message : "Something went wrong"
 					}),
-					/* @__PURE__ */ _("div", {
+					/* @__PURE__ */ b("div", {
 						className: "mt-6 flex justify-end gap-2",
-						children: /* @__PURE__ */ v("button", {
+						children: /* @__PURE__ */ x("button", {
 							type: "submit",
-							disabled: M.isPending,
+							disabled: F.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: [M.isPending ? /* @__PURE__ */ _(p, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ _(m, { className: "h-4 w-4" }), S ? "Save changes" : "Create brand"]
+							children: [F.isPending ? /* @__PURE__ */ b(g, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ b(_, { className: "h-4 w-4" }), T ? "Save changes" : "Create brand"]
 						})
 					})
 				]
@@ -185,6 +223,6 @@ function x() {
 	});
 }
 //#endregion
-export { x as BrandFormPage };
+export { w as BrandFormPage };
 
 //# sourceMappingURL=BrandFormPage.js.map

package/dist/coolandlovely/pages/brands/BrandFormPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrandFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/brands/BrandFormPage.tsx"],"sourcesContent":["/**\n * Brand Create / Edit Page\n * @module coolandlovely/pages/brands\n *\n * Drives `cooCreateBrand` (new) and `cooUpdateBrand` (edit). The route param\n * `brandId` distinguishes the two modes.\n */\n\nimport { useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, Loader2, Save, Store } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { TextField, TextAreaField } from '../../components/Field';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useBrand, useCreateBrand, useUpdateBrand } from '../../hooks';\nimport { parseCsv } from '../../utils/formatters';\n\ninterface FormState {\n  name: string;\n  handle: string;\n  tagline: string;\n  bio: string;\n  aesthetics: string;\n  tags: string;\n  websiteUrl: string;\n}\n\nconst EMPTY: FormState = {\n  name: '',\n  handle: '',\n  tagline: '',\n  bio: '',\n  aesthetics: '',\n  tags: '',\n  websiteUrl: '',\n};\n\nexport function BrandFormPage() {\n  const { brandId } = useParams<{ brandId: string }>();\n  const isEdit = Boolean(brandId);\n  const { navigateTo } = useCoolAndLovely();\n\n  const existing = useBrand(isEdit ? brandId : undefined);\n  const createBrand = useCreateBrand();\n  const updateBrand = useUpdateBrand();\n\n  const [form, setForm] = useState<FormState>(EMPTY);\n  const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});\n\n  useEffect(() => {\n    if (isEdit && existing.data) {\n      const b = existing.data;\n      setForm({\n        name: b.name,\n        handle: b.handle,\n        tagline: b.tagline ?? '',\n        bio: b.bio ?? '',\n        aesthetics: b.aesthetics.join(', '),\n        tags: b.tags.join(', '),\n        websiteUrl: b.websiteUrl ?? '',\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 ? updateBrand : createBrand;\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.handle.trim()) next.handle = 'Handle is required';\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    if (isEdit && brandId) {\n      updateBrand.mutate(\n        {\n          id: brandId,\n          input: {\n            name: form.name.trim(),\n            tagline: form.tagline.trim() || undefined,\n            bio: form.bio.trim() || undefined,\n            aesthetics: parseCsv(form.aesthetics),\n            tags: parseCsv(form.tags),\n            websiteUrl: form.websiteUrl.trim() || undefined,\n          },\n        },\n        { onSuccess: () => navigateTo(`/brands/${brandId}`) }\n      );\n    } else {\n      createBrand.mutate(\n        {\n          name: form.name.trim(),\n          handle: form.handle.trim(),\n          tagline: form.tagline.trim() || undefined,\n          bio: form.bio.trim() || undefined,\n          aesthetics: parseCsv(form.aesthetics),\n          tags: parseCsv(form.tags),\n          websiteUrl: form.websiteUrl.trim() || undefined,\n        },\n        { onSuccess: (brand) => navigateTo(`/brands/${brand.id}`) }\n      );\n    }\n  };\n\n  if (isEdit && existing.isLoading) {\n    return (\n      <PageLayout title=\"Edit brand\">\n        <LoadingView label=\"Loading brand…\" />\n      </PageLayout>\n    );\n  }\n\n  if (isEdit && (existing.isError || !existing.data)) {\n    return (\n      <PageLayout title=\"Edit brand\">\n        <ErrorView title=\"Brand not found\" onRetry={() => void existing.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={isEdit ? 'Edit brand' : 'New brand'}\n      description={isEdit ? 'Update this storefront' : 'Launch a new storefront on the platform'}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo(isEdit && brandId ? `/brands/${brandId}` : '/brands')}\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-accent-purple-subtle text-text-primary\">\n              <Store className=\"h-5 w-5\" />\n            </div>\n            <div>\n              <h2 className=\"text-base font-semibold text-text-primary\">Storefront details</h2>\n              <p className=\"text-xs text-text-secondary\">\n                Name your storefront and tell shoppers what your brand stands for.\n              </p>\n            </div>\n          </div>\n\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <TextField\n              id=\"name\"\n              label=\"Brand name\"\n              value={form.name}\n              onChange={(v) => setField('name', v)}\n              placeholder=\"Aurora Atelier\"\n              required\n              error={errors.name}\n            />\n            <TextField\n              id=\"handle\"\n              label=\"Handle\"\n              value={form.handle}\n              onChange={(v) => setField('handle', v)}\n              placeholder=\"aurora-atelier\"\n              required={!isEdit}\n              hint={isEdit ? 'Handle cannot be changed after creation' : 'Unique per workspace'}\n              error={errors.handle}\n            />\n          </div>\n\n          <TextField\n            id=\"tagline\"\n            label=\"Tagline\"\n            value={form.tagline}\n            onChange={(v) => setField('tagline', v)}\n            placeholder=\"Quiet luxury, loud ideas\"\n            className=\"mt-4\"\n          />\n\n          <TextAreaField\n            id=\"bio\"\n            label=\"Bio\"\n            value={form.bio}\n            onChange={(v) => setField('bio', v)}\n            placeholder=\"Tell shoppers what your brand stands for…\"\n            rows={4}\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=\"aesthetics\"\n              label=\"Aesthetics\"\n              value={form.aesthetics}\n              onChange={(v) => setField('aesthetics', v)}\n              placeholder=\"minimal, Y2K, coastal\"\n              hint=\"Comma-separated descriptors\"\n            />\n            <TextField\n              id=\"tags\"\n              label=\"Tags\"\n              value={form.tags}\n              onChange={(v) => setField('tags', v)}\n              placeholder=\"sustainable, handmade\"\n              hint=\"Comma-separated\"\n            />\n          </div>\n\n          <TextField\n            id=\"websiteUrl\"\n            label=\"Website\"\n            type=\"url\"\n            value={form.websiteUrl}\n            onChange={(v) => setField('websiteUrl', v)}\n            placeholder=\"https://example.com\"\n            className=\"mt-4\"\n          />\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 brand'}\n            </button>\n          </div>\n        </GlassCard>\n      </form>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"BrandFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/brands/BrandFormPage.tsx"],"sourcesContent":["/**\n * Brand Create / Edit Page\n * @module coolandlovely/pages/brands\n *\n * Drives `cooCreateBrand` (new) and `cooUpdateBrand` (edit). The route param\n * `brandId` distinguishes the two modes.\n */\n\nimport { useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, Loader2, Save, Store } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { TextField, TextAreaField, ToggleField } from '../../components/Field';\nimport { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useBrand, useCreateBrand, useUpdateBrand } from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\nimport { parseCsv } from '../../utils/formatters';\n\ninterface FormState {\n  name: string;\n  handle: string;\n  tagline: string;\n  bio: string;\n  aesthetics: string;\n  tags: string;\n  websiteUrl: string;\n  logoFileId: string;\n  coverFileId: string;\n  isFeatured: boolean;\n}\n\nconst EMPTY: FormState = {\n  name: '',\n  handle: '',\n  tagline: '',\n  bio: '',\n  aesthetics: '',\n  tags: '',\n  websiteUrl: '',\n  logoFileId: '',\n  coverFileId: '',\n  isFeatured: false,\n};\n\nexport function BrandFormPage() {\n  const { brandId } = useParams<{ brandId: string }>();\n  const isEdit = Boolean(brandId);\n  const { navigateTo } = useCoolAndLovely();\n\n  const existing = useBrand(isEdit ? brandId : undefined);\n  const createBrand = useCreateBrand();\n  const updateBrand = useUpdateBrand();\n\n  const [form, setForm] = useState<FormState>(EMPTY);\n  const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});\n\n  useEffect(() => {\n    if (isEdit && existing.data) {\n      const b = existing.data;\n      setForm({\n        name: b.name,\n        handle: b.handle,\n        tagline: b.tagline ?? '',\n        bio: b.bio ?? '',\n        aesthetics: b.aesthetics.join(', '),\n        tags: b.tags.join(', '),\n        websiteUrl: b.websiteUrl ?? '',\n        logoFileId: b.logo?.id ?? '',\n        coverFileId: b.cover?.id ?? '',\n        isFeatured: b.isFeatured,\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 ? updateBrand : createBrand;\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.handle.trim()) next.handle = 'Handle is required';\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    if (isEdit && brandId) {\n      updateBrand.mutate(\n        {\n          id: brandId,\n          input: {\n            name: form.name.trim(),\n            tagline: form.tagline.trim() || undefined,\n            bio: form.bio.trim() || undefined,\n            aesthetics: parseCsv(form.aesthetics),\n            tags: parseCsv(form.tags),\n            websiteUrl: form.websiteUrl.trim() || undefined,\n            logoFileId: form.logoFileId || undefined,\n            coverFileId: form.coverFileId || undefined,\n            isFeatured: form.isFeatured,\n          },\n        },\n        { onSuccess: () => navigateTo(`/brands/${brandId}`) }\n      );\n    } else {\n      createBrand.mutate(\n        {\n          name: form.name.trim(),\n          handle: form.handle.trim(),\n          tagline: form.tagline.trim() || undefined,\n          bio: form.bio.trim() || undefined,\n          aesthetics: parseCsv(form.aesthetics),\n          tags: parseCsv(form.tags),\n          websiteUrl: form.websiteUrl.trim() || undefined,\n          logoFileId: form.logoFileId || undefined,\n          coverFileId: form.coverFileId || undefined,\n        },\n        { onSuccess: (brand) => navigateTo(`/brands/${brand.id}`) }\n      );\n    }\n  };\n\n  if (isEdit && existing.isLoading) {\n    return (\n      <PageLayout title=\"Edit brand\">\n        <LoadingView label=\"Loading brand…\" />\n      </PageLayout>\n    );\n  }\n\n  if (isEdit && (existing.isError || !existing.data)) {\n    return (\n      <PageLayout title=\"Edit brand\">\n        <ErrorView title=\"Brand not found\" onRetry={() => void existing.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={isEdit ? 'Edit brand' : 'New brand'}\n      description={isEdit ? 'Update this storefront' : 'Launch a new storefront on the platform'}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo(isEdit && brandId ? `/brands/${brandId}` : '/brands')}\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-accent-purple-subtle text-text-primary\">\n              <Store className=\"h-5 w-5\" />\n            </div>\n            <div>\n              <h2 className=\"text-base font-semibold text-text-primary\">Storefront details</h2>\n              <p className=\"text-xs text-text-secondary\">\n                Name your storefront and tell shoppers what your brand stands for.\n              </p>\n            </div>\n          </div>\n\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <TextField\n              id=\"name\"\n              label=\"Brand name\"\n              value={form.name}\n              onChange={(v) => setField('name', v)}\n              placeholder=\"Aurora Atelier\"\n              required\n              error={errors.name}\n            />\n            <TextField\n              id=\"handle\"\n              label=\"Handle\"\n              value={form.handle}\n              onChange={(v) => setField('handle', v)}\n              placeholder=\"aurora-atelier\"\n              required={!isEdit}\n              hint={isEdit ? 'Handle cannot be changed after creation' : 'Unique per workspace'}\n              error={errors.handle}\n            />\n          </div>\n\n          <TextField\n            id=\"tagline\"\n            label=\"Tagline\"\n            value={form.tagline}\n            onChange={(v) => setField('tagline', v)}\n            placeholder=\"Quiet luxury, loud ideas\"\n            className=\"mt-4\"\n          />\n\n          <TextAreaField\n            id=\"bio\"\n            label=\"Bio\"\n            value={form.bio}\n            onChange={(v) => setField('bio', v)}\n            placeholder=\"Tell shoppers what your brand stands for…\"\n            rows={4}\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=\"aesthetics\"\n              label=\"Aesthetics\"\n              value={form.aesthetics}\n              onChange={(v) => setField('aesthetics', v)}\n              placeholder=\"minimal, Y2K, coastal\"\n              hint=\"Comma-separated descriptors\"\n            />\n            <TextField\n              id=\"tags\"\n              label=\"Tags\"\n              value={form.tags}\n              onChange={(v) => setField('tags', v)}\n              placeholder=\"sustainable, handmade\"\n              hint=\"Comma-separated\"\n            />\n          </div>\n\n          <TextField\n            id=\"websiteUrl\"\n            label=\"Website\"\n            type=\"url\"\n            value={form.websiteUrl}\n            onChange={(v) => setField('websiteUrl', v)}\n            placeholder=\"https://example.com\"\n            className=\"mt-4\"\n          />\n\n          <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <ImageUploadField\n              label=\"Logo\"\n              value={form.logoFileId}\n              onChange={(id) => setField('logoFileId', id)}\n              folder={COO_FILE_FOLDERS.brands}\n              hint=\"Square storefront logo\"\n            />\n            <ImageUploadField\n              label=\"Cover\"\n              aspect=\"wide\"\n              value={form.coverFileId}\n              onChange={(id) => setField('coverFileId', id)}\n              folder={COO_FILE_FOLDERS.brands}\n              hint=\"Wide storefront banner\"\n            />\n          </div>\n\n          {isEdit && (\n            <ToggleField\n              id=\"isFeatured\"\n              label=\"Feature this brand\"\n              checked={form.isFeatured}\n              onChange={(v) => setField('isFeatured', v)}\n              hint=\"Featured brands surface in the Featured filter and carry a star badge.\"\n              className=\"mt-4\"\n            />\n          )}\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 brand'}\n            </button>\n          </div>\n        </GlassCard>\n      </form>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/brands/BrandsListPage.js

@@ -98,6 +98,8 @@ function S() {
 				children: [/* @__PURE__ */ v(o, {
 					icon: /* @__PURE__ */ v(g, { className: "h-9 w-9" }),
 					seed: e.id,
+					fileId: e.cover?.id ?? e.logo?.id,
+					alt: e.name,
 					className: "h-32 w-full"
 				}), /* @__PURE__ */ y("div", {
 					className: "p-4",

package/dist/coolandlovely/pages/brands/BrandsListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrandsListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/brands/BrandsListPage.tsx"],"sourcesContent":["/**\n * Brands List Page\n * @module coolandlovely/pages/brands\n *\n * Lists brand storefronts (cursor-paginated `cooListBrands`) with status &\n * featured filters. Each card links to the brand detail page.\n */\n\nimport { useState } from 'react';\nimport { Store, Plus, Star, ChevronLeft, ChevronRight } 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 { TagList } from '../../components/TagList';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useBrands } from '../../hooks';\nimport { titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooBrandStatus } from '../../types';\n\nconst PAGE_SIZE = 24;\n\nconst STATUS_OPTIONS: Array<{ value: CooBrandStatus | 'ALL'; label: string }> = [\n  { value: 'ALL', label: 'All' },\n  { value: 'PUBLISHED', label: 'Published' },\n  { value: 'DRAFT', label: 'Draft' },\n  { value: 'PENDING_REVIEW', label: 'In review' },\n  { value: 'SUSPENDED', label: 'Suspended' },\n  { value: 'ARCHIVED', label: 'Archived' },\n];\n\nexport function BrandsListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const [status, setStatus] = useState<CooBrandStatus | 'ALL'>('ALL');\n  const [featuredOnly, setFeaturedOnly] = useState(false);\n  const [offset, setOffset] = useState(0);\n\n  const query = useBrands({\n    status: status === 'ALL' ? undefined : status,\n    featured: featuredOnly ? true : undefined,\n    pagination: { limit: PAGE_SIZE, offset },\n  });\n\n  const brands = query.data?.items ?? [];\n  const hasMore = query.data?.pageInfo.hasMore ?? false;\n\n  return (\n    <PageLayout\n      title=\"Brands\"\n      description=\"Storefronts on the platform with a real publish lifecycle\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/brands/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 brand\n        </button>\n      }\n    >\n      {/* Filters */}\n      <div className=\"mb-6 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        <button\n          type=\"button\"\n          onClick={() => {\n            setFeaturedOnly((v) => !v);\n            setOffset(0);\n          }}\n          className={cn(\n            'ml-auto inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n            featuredOnly\n              ? 'bg-status-warning-bg-subtle text-status-warning-text'\n              : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n          )}\n        >\n          <Star className={cn('h-3.5 w-3.5', featuredOnly && 'fill-status-warning-text')} />{' '}\n          Featured\n        </button>\n      </div>\n\n      {query.isLoading ? (\n        <LoadingView label=\"Loading brands…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : brands.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<Store className=\"h-10 w-10\" />}\n          title=\"No brands yet\"\n          description=\"Launch the first storefront to start building the catalogue.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/brands/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 brand\n            </button>\n          }\n        />\n      ) : (\n        <>\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {brands.map((brand) => (\n              <button\n                key={brand.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/brands/${brand.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                <Thumbnail\n                  icon={<Store className=\"h-9 w-9\" />}\n                  seed={brand.id}\n                  className=\"h-32 w-full\"\n                />\n                <div className=\"p-4\">\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"min-w-0\">\n                      <div className=\"flex items-center gap-1.5\">\n                        <h3 className=\"truncate text-base font-semibold text-text-primary\">\n                          {brand.name}\n                        </h3>\n                        {brand.isFeatured && (\n                          <Star className=\"h-3.5 w-3.5 shrink-0 fill-status-warning-text text-status-warning-text\" />\n                        )}\n                      </div>\n                      <p className=\"truncate text-xs text-text-secondary\">@{brand.handle}</p>\n                    </div>\n                    <StatusBadge status={brand.status} />\n                  </div>\n                  {brand.tagline && (\n                    <p className=\"mt-2 line-clamp-2 text-sm text-text-secondary\">{brand.tagline}</p>\n                  )}\n                  {brand.aesthetics.length > 0 && (\n                    <TagList\n                      tags={brand.aesthetics.map(titleCase)}\n                      max={4}\n                      className=\"mt-3\"\n                      tone=\"accent\"\n                    />\n                  )}\n                </div>\n              </button>\n            ))}\n          </div>\n\n          {/* Pagination */}\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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"}
+{"version":3,"file":"BrandsListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/brands/BrandsListPage.tsx"],"sourcesContent":["/**\n * Brands List Page\n * @module coolandlovely/pages/brands\n *\n * Lists brand storefronts (cursor-paginated `cooListBrands`) with status &\n * featured filters. Each card links to the brand detail page.\n */\n\nimport { useState } from 'react';\nimport { Store, Plus, Star, ChevronLeft, ChevronRight } 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 { TagList } from '../../components/TagList';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useBrands } from '../../hooks';\nimport { titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooBrandStatus } from '../../types';\n\nconst PAGE_SIZE = 24;\n\nconst STATUS_OPTIONS: Array<{ value: CooBrandStatus | 'ALL'; label: string }> = [\n  { value: 'ALL', label: 'All' },\n  { value: 'PUBLISHED', label: 'Published' },\n  { value: 'DRAFT', label: 'Draft' },\n  { value: 'PENDING_REVIEW', label: 'In review' },\n  { value: 'SUSPENDED', label: 'Suspended' },\n  { value: 'ARCHIVED', label: 'Archived' },\n];\n\nexport function BrandsListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const [status, setStatus] = useState<CooBrandStatus | 'ALL'>('ALL');\n  const [featuredOnly, setFeaturedOnly] = useState(false);\n  const [offset, setOffset] = useState(0);\n\n  const query = useBrands({\n    status: status === 'ALL' ? undefined : status,\n    featured: featuredOnly ? true : undefined,\n    pagination: { limit: PAGE_SIZE, offset },\n  });\n\n  const brands = query.data?.items ?? [];\n  const hasMore = query.data?.pageInfo.hasMore ?? false;\n\n  return (\n    <PageLayout\n      title=\"Brands\"\n      description=\"Storefronts on the platform with a real publish lifecycle\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/brands/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 brand\n        </button>\n      }\n    >\n      {/* Filters */}\n      <div className=\"mb-6 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        <button\n          type=\"button\"\n          onClick={() => {\n            setFeaturedOnly((v) => !v);\n            setOffset(0);\n          }}\n          className={cn(\n            'ml-auto inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n            featuredOnly\n              ? 'bg-status-warning-bg-subtle text-status-warning-text'\n              : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n          )}\n        >\n          <Star className={cn('h-3.5 w-3.5', featuredOnly && 'fill-status-warning-text')} />{' '}\n          Featured\n        </button>\n      </div>\n\n      {query.isLoading ? (\n        <LoadingView label=\"Loading brands…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : brands.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<Store className=\"h-10 w-10\" />}\n          title=\"No brands yet\"\n          description=\"Launch the first storefront to start building the catalogue.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/brands/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 brand\n            </button>\n          }\n        />\n      ) : (\n        <>\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {brands.map((brand) => (\n              <button\n                key={brand.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/brands/${brand.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                <Thumbnail\n                  icon={<Store className=\"h-9 w-9\" />}\n                  seed={brand.id}\n                  fileId={brand.cover?.id ?? brand.logo?.id}\n                  alt={brand.name}\n                  className=\"h-32 w-full\"\n                />\n                <div className=\"p-4\">\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"min-w-0\">\n                      <div className=\"flex items-center gap-1.5\">\n                        <h3 className=\"truncate text-base font-semibold text-text-primary\">\n                          {brand.name}\n                        </h3>\n                        {brand.isFeatured && (\n                          <Star className=\"h-3.5 w-3.5 shrink-0 fill-status-warning-text text-status-warning-text\" />\n                        )}\n                      </div>\n                      <p className=\"truncate text-xs text-text-secondary\">@{brand.handle}</p>\n                    </div>\n                    <StatusBadge status={brand.status} />\n                  </div>\n                  {brand.tagline && (\n                    <p className=\"mt-2 line-clamp-2 text-sm text-text-secondary\">{brand.tagline}</p>\n                  )}\n                  {brand.aesthetics.length > 0 && (\n                    <TagList\n                      tags={brand.aesthetics.map(titleCase)}\n                      max={4}\n                      className=\"mt-3\"\n                      tone=\"accent\"\n                    />\n                  )}\n                </div>\n              </button>\n            ))}\n          </div>\n\n          {/* Pagination */}\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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"}

package/dist/coolandlovely/pages/collections/CollectionDetailPage.js

@@ -31,7 +31,7 @@ function w() {
 		title: O.name,
 		description: O.brand?.name ?? void 0,
 		actions: /* @__PURE__ */ S("div", {
-			className: "flex items-center gap-2",
+			className: "flex flex-wrap items-center gap-2",
 			children: [
 				/* @__PURE__ */ S("button", {
 					type: "button",
@@ -64,6 +64,8 @@ function w() {
 					children: [/* @__PURE__ */ x(a, {
 						icon: /* @__PURE__ */ x(v, { className: "h-12 w-12" }),
 						seed: O.id,
+						fileId: O.cover?.id,
+						alt: O.name,
 						className: "h-40 w-full"
 					}), /* @__PURE__ */ S("div", {
 						className: "p-6",
@@ -111,6 +113,8 @@ function w() {
 								children: [/* @__PURE__ */ x(a, {
 									icon: f(e.category, 24),
 									seed: e.id,
+									fileId: e.image?.id,
+									alt: e.name,
 									className: "h-24 w-full"
 								}), /* @__PURE__ */ S("div", {
 									className: "p-3",

package/dist/coolandlovely/pages/collections/CollectionDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/collections/CollectionDetailPage.tsx"],"sourcesContent":["/**\n * Collection Detail Page\n * @module coolandlovely/pages/collections\n *\n * Single collection (`cooCollection`) with publish (`cooPublishCollection`),\n * edit, its brand link and member items.\n */\n\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, Pencil, Rocket, Loader2, Shapes, Store, Plus } 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 { useCollection, usePublishCollection } from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function CollectionDetailPage() {\n  const { collectionId } = useParams<{ collectionId: string }>();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useCollection(collectionId);\n  const publish = usePublishCollection();\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Collection\">\n        <LoadingView label=\"Loading collection…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError || !query.data) {\n    return (\n      <PageLayout title=\"Collection\">\n        <ErrorView title=\"Collection not found\" onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  const collection = query.data;\n  const items = collection.items ?? [];\n  const canPublish = collection.status === 'DRAFT' || collection.status === 'SCHEDULED';\n\n  return (\n    <PageLayout\n      title={collection.name}\n      description={collection.brand?.name ?? undefined}\n      actions={\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/collections')}\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(`/collections/${collection.id}/edit`)}\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            <Pencil className=\"h-4 w-4\" /> Edit\n          </button>\n          {canPublish && (\n            <button\n              type=\"button\"\n              disabled={publish.isPending}\n              onClick={() => publish.mutate(collection.id)}\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 disabled:opacity-50\"\n            >\n              {publish.isPending ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Rocket className=\"h-4 w-4\" />\n              )}\n              Publish\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\n              icon={<Shapes className=\"h-12 w-12\" />}\n              seed={collection.id}\n              className=\"h-40 w-full\"\n            />\n            <div className=\"p-6\">\n              <div className=\"flex items-center gap-2\">\n                <h2 className=\"text-xl font-semibold text-text-primary\">{collection.name}</h2>\n                <StatusBadge status={collection.status} className=\"ml-auto\" />\n              </div>\n              {collection.description && (\n                <p className=\"mt-3 text-sm text-text-secondary\">{collection.description}</p>\n              )}\n              {collection.tags.length > 0 && <TagList tags={collection.tags} className=\"mt-4\" />}\n            </div>\n          </GlassCard>\n\n          <section className=\"mt-6\">\n            <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">Items ({items.length})</h3>\n            {items.length === 0 ? (\n              <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n                No items in this collection yet.\n              </p>\n            ) : (\n              <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3\">\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 transition-all hover:border-accent-foreground/20 hover:shadow-md\"\n                  >\n                    <Thumbnail\n                      icon={categoryIcon(item.category, 24)}\n                      seed={item.id}\n                      className=\"h-24 w-full\"\n                    />\n                    <div className=\"p-3\">\n                      <p className=\"truncate text-sm font-medium text-text-primary\">{item.name}</p>\n                      <p className=\"mt-0.5 text-xs text-text-secondary\">\n                        {formatPrice(item.price, item.currency)}\n                      </p>\n                    </div>\n                  </button>\n                ))}\n              </div>\n            )}\n            <button\n              type=\"button\"\n              onClick={() =>\n                navigateTo(`/items/new?brandId=${collection.brandId}&collectionId=${collection.id}`)\n              }\n              className=\"mt-3 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              <Plus className=\"h-4 w-4\" /> Add item to this collection\n            </button>\n          </section>\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\">Season</dt>\n                <dd className=\"text-text-primary\">{titleCase(collection.season)}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Publish at</dt>\n                <dd className=\"text-text-primary\">\n                  {collection.publishAt\n                    ? formatDate(collection.publishAt, { hour: undefined, minute: undefined })\n                    : '—'}\n                </dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Ends at</dt>\n                <dd className=\"text-text-primary\">\n                  {collection.endAt\n                    ? formatDate(collection.endAt, { hour: undefined, minute: undefined })\n                    : '—'}\n                </dd>\n              </div>\n            </dl>\n          </GlassCard>\n\n          {collection.brand && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/brands/${collection.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\n                icon={<Store className=\"h-5 w-5\" />}\n                seed={collection.brand.id}\n                className=\"h-10 w-10 shrink-0\"\n              />\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-sm font-medium text-text-primary\">\n                  {collection.brand.name}\n                </p>\n                <p className=\"truncate text-xs text-text-secondary\">View brand</p>\n              </div>\n            </button>\n          )}\n\n          {publish.isError && (\n            <p className=\"rounded-lg bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text\">\n              {publish.error instanceof Error ? publish.error.message : 'Publish failed'}\n            </p>\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CollectionDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/collections/CollectionDetailPage.tsx"],"sourcesContent":["/**\n * Collection Detail Page\n * @module coolandlovely/pages/collections\n *\n * Single collection (`cooCollection`) with publish (`cooPublishCollection`),\n * edit, its brand link and member items.\n */\n\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, Pencil, Rocket, Loader2, Shapes, Store, Plus } 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 { useCollection, usePublishCollection } from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function CollectionDetailPage() {\n  const { collectionId } = useParams<{ collectionId: string }>();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useCollection(collectionId);\n  const publish = usePublishCollection();\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Collection\">\n        <LoadingView label=\"Loading collection…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError || !query.data) {\n    return (\n      <PageLayout title=\"Collection\">\n        <ErrorView title=\"Collection not found\" onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  const collection = query.data;\n  const items = collection.items ?? [];\n  const canPublish = collection.status === 'DRAFT' || collection.status === 'SCHEDULED';\n\n  return (\n    <PageLayout\n      title={collection.name}\n      description={collection.brand?.name ?? undefined}\n      actions={\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/collections')}\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(`/collections/${collection.id}/edit`)}\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            <Pencil className=\"h-4 w-4\" /> Edit\n          </button>\n          {canPublish && (\n            <button\n              type=\"button\"\n              disabled={publish.isPending}\n              onClick={() => publish.mutate(collection.id)}\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 disabled:opacity-50\"\n            >\n              {publish.isPending ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Rocket className=\"h-4 w-4\" />\n              )}\n              Publish\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\n              icon={<Shapes className=\"h-12 w-12\" />}\n              seed={collection.id}\n              fileId={collection.cover?.id}\n              alt={collection.name}\n              className=\"h-40 w-full\"\n            />\n            <div className=\"p-6\">\n              <div className=\"flex items-center gap-2\">\n                <h2 className=\"text-xl font-semibold text-text-primary\">{collection.name}</h2>\n                <StatusBadge status={collection.status} className=\"ml-auto\" />\n              </div>\n              {collection.description && (\n                <p className=\"mt-3 text-sm text-text-secondary\">{collection.description}</p>\n              )}\n              {collection.tags.length > 0 && <TagList tags={collection.tags} className=\"mt-4\" />}\n            </div>\n          </GlassCard>\n\n          <section className=\"mt-6\">\n            <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">Items ({items.length})</h3>\n            {items.length === 0 ? (\n              <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n                No items in this collection yet.\n              </p>\n            ) : (\n              <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3\">\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 transition-all hover:border-accent-foreground/20 hover:shadow-md\"\n                  >\n                    <Thumbnail\n                      icon={categoryIcon(item.category, 24)}\n                      seed={item.id}\n                      fileId={item.image?.id}\n                      alt={item.name}\n                      className=\"h-24 w-full\"\n                    />\n                    <div className=\"p-3\">\n                      <p className=\"truncate text-sm font-medium text-text-primary\">{item.name}</p>\n                      <p className=\"mt-0.5 text-xs text-text-secondary\">\n                        {formatPrice(item.price, item.currency)}\n                      </p>\n                    </div>\n                  </button>\n                ))}\n              </div>\n            )}\n            <button\n              type=\"button\"\n              onClick={() =>\n                navigateTo(`/items/new?brandId=${collection.brandId}&collectionId=${collection.id}`)\n              }\n              className=\"mt-3 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              <Plus className=\"h-4 w-4\" /> Add item to this collection\n            </button>\n          </section>\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\">Season</dt>\n                <dd className=\"text-text-primary\">{titleCase(collection.season)}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Publish at</dt>\n                <dd className=\"text-text-primary\">\n                  {collection.publishAt\n                    ? formatDate(collection.publishAt, { hour: undefined, minute: undefined })\n                    : '—'}\n                </dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Ends at</dt>\n                <dd className=\"text-text-primary\">\n                  {collection.endAt\n                    ? formatDate(collection.endAt, { hour: undefined, minute: undefined })\n                    : '—'}\n                </dd>\n              </div>\n            </dl>\n          </GlassCard>\n\n          {collection.brand && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/brands/${collection.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\n                icon={<Store className=\"h-5 w-5\" />}\n                seed={collection.brand.id}\n                className=\"h-10 w-10 shrink-0\"\n              />\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-sm font-medium text-text-primary\">\n                  {collection.brand.name}\n                </p>\n                <p className=\"truncate text-xs text-text-secondary\">View brand</p>\n              </div>\n            </button>\n          )}\n\n          {publish.isError && (\n            <p className=\"rounded-lg bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text\">\n              {publish.error instanceof Error ? publish.error.message : 'Publish failed'}\n            </p>\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}