@burdenoff/microfe-coolandlovely 2026.706.1 → 2026.706.2

package/dist/coolandlovely/pages/lookbooks/LookbooksListPage.js

@@ -2,144 +2,157 @@ import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
 import { PageLayout as t } from "../../components/PageLayout.js";
 import { StatusBadge as n } from "../../components/StatusBadge.js";
 import { ErrorView as r, LoadingView as i } from "../../components/StateViews.js";
-import { Thumbnail as a } from "../../components/Thumbnail.js";
-import { useCreateLookbook as o, useLookbooks as s } from "../../hooks/useCoolAndLovelyApi.js";
+import { COO_FILE_FOLDERS as a } from "../../hooks/useFiles.js";
+import { Thumbnail as o } from "../../components/Thumbnail.js";
+import { useCreateLookbook as s, useLookbooks as c } from "../../hooks/useCoolAndLovelyApi.js";
 import "../../hooks/index.js";
-import { parseCsv as c, titleCase as l } from "../../utils/formatters.js";
-import { TagList as u } from "../../components/TagList.js";
-import { SelectField as d, TextAreaField as f, TextField as p } from "../../components/Field.js";
-import { EmptyState as m } from "../../components/EmptyState.js";
-import { useState as h } from "react";
-import { BookHeart as g, Loader2 as _, Plus as v, X as y } from "lucide-react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { GlassCard as S } from "@burdenoff/fe-libs/ui";
+import { parseCsv as l, titleCase as u } from "../../utils/formatters.js";
+import { TagList as d } from "../../components/TagList.js";
+import { SelectField as f, TextAreaField as p, TextField as m } from "../../components/Field.js";
+import { ImageUploadField as h } from "../../components/ImageUploadField.js";
+import { EmptyState as g } from "../../components/EmptyState.js";
+import { useState as _ } from "react";
+import { BookHeart as v, Loader2 as y, Plus as b, X as x } from "lucide-react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { GlassCard as w } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/lookbooks/LookbooksListPage.tsx
-var C = [
+var T = [
 	"PRIVATE",
 	"FOLLOWERS",
 	"PUBLIC"
 ];
-function w() {
-	let { navigateTo: w } = e(), T = s(), E = o(), [D, O] = h(!1), [k, A] = h(""), [j, M] = h(""), [N, P] = h("PRIVATE"), [F, I] = h(""), [L, R] = h(), z = T.data ?? [], B = C.map((e) => ({
+function E() {
+	let { navigateTo: E } = e(), D = c(), O = s(), [k, A] = _(!1), [j, M] = _(""), [N, P] = _(""), [F, I] = _("PRIVATE"), [L, R] = _(""), [z, B] = _(""), [V, H] = _(), U = D.data ?? [], W = T.map((e) => ({
 		value: e,
-		label: l(e)
+		label: u(e)
 	}));
-	return /* @__PURE__ */ x(t, {
+	return /* @__PURE__ */ C(t, {
 		title: "Lookbooks",
 		description: "Themed boards of saved catalogue pieces and looks",
-		actions: /* @__PURE__ */ x("button", {
+		actions: /* @__PURE__ */ C("button", {
 			type: "button",
-			onClick: () => O((e) => !e),
+			onClick: () => A((e) => !e),
 			className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
-			children: [b(D ? y : v, { className: "h-4 w-4" }), D ? "Close" : "New lookbook"]
+			children: [S(k ? x : b, { className: "h-4 w-4" }), k ? "Close" : "New lookbook"]
 		}),
-		children: [D && /* @__PURE__ */ b("form", {
+		children: [k && /* @__PURE__ */ S("form", {
 			onSubmit: (e) => {
-				if (e.preventDefault(), !k.trim()) {
-					R("Name is required");
+				if (e.preventDefault(), !j.trim()) {
+					H("Name is required");
 					return;
 				}
-				R(void 0), E.mutate({
-					name: k.trim(),
-					description: j.trim() || void 0,
-					visibility: N,
-					tags: c(F)
+				H(void 0), O.mutate({
+					name: j.trim(),
+					description: N.trim() || void 0,
+					visibility: F,
+					tags: l(L),
+					coverFileId: z || void 0
 				}, { onSuccess: (e) => {
-					O(!1), A(""), M(""), I(""), P("PRIVATE"), w(`/lookbooks/${e.id}`);
+					A(!1), M(""), P(""), R(""), I("PRIVATE"), B(""), E(`/lookbooks/${e.id}`);
 				} });
 			},
 			className: "mb-6",
-			children: /* @__PURE__ */ x(S, {
+			children: /* @__PURE__ */ C(w, {
 				treatment: "plain",
 				className: "p-5",
 				children: [
-					/* @__PURE__ */ x("h2", {
+					/* @__PURE__ */ C("h2", {
 						className: "mb-4 flex items-center gap-2 text-base font-semibold text-text-primary",
-						children: [/* @__PURE__ */ b(g, { className: "h-5 w-5" }), " New lookbook"]
+						children: [/* @__PURE__ */ S(v, { className: "h-5 w-5" }), " New lookbook"]
 					}),
-					/* @__PURE__ */ x("div", {
+					/* @__PURE__ */ C("div", {
 						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-						children: [/* @__PURE__ */ b(p, {
+						children: [/* @__PURE__ */ S(m, {
 							label: "Name",
-							value: k,
-							onChange: A,
+							value: j,
+							onChange: M,
 							placeholder: "Summer wedding guest",
 							required: !0,
-							error: L
-						}), /* @__PURE__ */ b(d, {
+							error: V
+						}), /* @__PURE__ */ S(f, {
 							label: "Visibility",
-							value: N,
-							onChange: (e) => P(e),
-							options: B
+							value: F,
+							onChange: (e) => I(e),
+							options: W
 						})]
 					}),
-					/* @__PURE__ */ b(f, {
+					/* @__PURE__ */ S(p, {
 						label: "Description",
-						value: j,
-						onChange: M,
+						value: N,
+						onChange: P,
 						placeholder: "What this board is for…",
 						rows: 2,
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ b(p, {
+					/* @__PURE__ */ S(m, {
 						label: "Tags",
-						value: F,
-						onChange: I,
+						value: L,
+						onChange: R,
 						placeholder: "summer, formal",
 						hint: "Comma-separated",
 						className: "mt-4"
 					}),
-					E.isError && /* @__PURE__ */ b("p", {
+					/* @__PURE__ */ S(h, {
+						label: "Cover image",
+						aspect: "wide",
+						value: z,
+						onChange: B,
+						folder: a.lookbooks,
+						className: "mt-4"
+					}),
+					O.isError && /* @__PURE__ */ S("p", {
 						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-						children: E.error instanceof Error ? E.error.message : "Something went wrong"
+						children: O.error instanceof Error ? O.error.message : "Something went wrong"
 					}),
-					/* @__PURE__ */ b("div", {
+					/* @__PURE__ */ S("div", {
 						className: "mt-4 flex justify-end",
-						children: /* @__PURE__ */ x("button", {
+						children: /* @__PURE__ */ C("button", {
 							type: "submit",
-							disabled: E.isPending,
+							disabled: O.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: [E.isPending ? /* @__PURE__ */ b(_, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ b(v, { className: "h-4 w-4" }), "Create lookbook"]
+							children: [O.isPending ? /* @__PURE__ */ S(y, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ S(b, { className: "h-4 w-4" }), "Create lookbook"]
 						})
 					})
 				]
 			})
-		}), T.isLoading ? /* @__PURE__ */ b(i, { label: "Loading lookbooks…" }) : T.isError ? /* @__PURE__ */ b(r, { onRetry: () => void T.refetch() }) : z.length === 0 ? /* @__PURE__ */ b(m, {
+		}), D.isLoading ? /* @__PURE__ */ S(i, { label: "Loading lookbooks…" }) : D.isError ? /* @__PURE__ */ S(r, { onRetry: () => void D.refetch() }) : U.length === 0 ? /* @__PURE__ */ S(g, {
 			illustration: "empty-data",
-			icon: /* @__PURE__ */ b(g, { className: "h-10 w-10" }),
+			icon: /* @__PURE__ */ S(v, { className: "h-10 w-10" }),
 			title: "No lookbooks yet",
 			description: "Create a themed board to clip catalogue pieces and looks.",
-			action: /* @__PURE__ */ x("button", {
+			action: /* @__PURE__ */ C("button", {
 				type: "button",
-				onClick: () => O(!0),
+				onClick: () => A(!0),
 				className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
-				children: [/* @__PURE__ */ b(v, { className: "h-4 w-4" }), " New lookbook"]
+				children: [/* @__PURE__ */ S(b, { className: "h-4 w-4" }), " New lookbook"]
 			})
-		}) : /* @__PURE__ */ b("div", {
+		}) : /* @__PURE__ */ S("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-			children: z.map((e) => /* @__PURE__ */ x("button", {
+			children: U.map((e) => /* @__PURE__ */ C("button", {
 				type: "button",
-				onClick: () => w(`/lookbooks/${e.id}`),
+				onClick: () => E(`/lookbooks/${e.id}`),
 				className: "overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md",
-				children: [/* @__PURE__ */ b(a, {
-					icon: /* @__PURE__ */ b(g, { className: "h-9 w-9" }),
+				children: [/* @__PURE__ */ S(o, {
+					icon: /* @__PURE__ */ S(v, { className: "h-9 w-9" }),
 					seed: e.id,
+					fileId: e.cover?.id,
+					alt: e.name,
 					className: "h-28 w-full"
-				}), /* @__PURE__ */ x("div", {
+				}), /* @__PURE__ */ C("div", {
 					className: "p-4",
 					children: [
-						/* @__PURE__ */ x("div", {
+						/* @__PURE__ */ C("div", {
 							className: "flex items-start justify-between gap-2",
-							children: [/* @__PURE__ */ b("h3", {
+							children: [/* @__PURE__ */ S("h3", {
 								className: "truncate text-base font-semibold text-text-primary",
 								children: e.name
-							}), /* @__PURE__ */ b(n, { status: e.visibility })]
+							}), /* @__PURE__ */ S(n, { status: e.visibility })]
 						}),
-						e.description && /* @__PURE__ */ b("p", {
+						e.description && /* @__PURE__ */ S("p", {
 							className: "mt-1.5 line-clamp-2 text-sm text-text-secondary",
 							children: e.description
 						}),
-						e.tags.length > 0 && /* @__PURE__ */ b(u, {
+						e.tags.length > 0 && /* @__PURE__ */ S(d, {
 							tags: e.tags,
 							max: 4,
 							className: "mt-3"
@@ -151,6 +164,6 @@ function w() {
 	});
 }
 //#endregion
-export { w as LookbooksListPage };
+export { E as LookbooksListPage };
 
 //# sourceMappingURL=LookbooksListPage.js.map

package/dist/coolandlovely/pages/lookbooks/LookbooksListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LookbooksListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/lookbooks/LookbooksListPage.tsx"],"sourcesContent":["/**\n * Lookbooks List Page\n * @module coolandlovely/pages/lookbooks\n *\n * Lists themed lookbook boards (`cooListLookbooks`) and supports creating one\n * inline (`cooCreateLookbook`).\n */\n\nimport { useState } from 'react';\nimport { Plus, BookHeart, Loader2, X } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\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 { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useLookbooks, useCreateLookbook } from '../../hooks';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooVisibility } from '../../types';\n\nconst VISIBILITIES: CooVisibility[] = ['PRIVATE', 'FOLLOWERS', 'PUBLIC'];\n\nexport function LookbooksListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const query = useLookbooks();\n  const createLookbook = useCreateLookbook();\n\n  const [creating, setCreating] = useState(false);\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [visibility, setVisibility] = useState<CooVisibility>('PRIVATE');\n  const [tags, setTags] = useState('');\n  const [nameError, setNameError] = useState<string | undefined>();\n\n  const lookbooks = query.data ?? [];\n  const visibilityOptions = VISIBILITIES.map((v) => ({ value: v, label: titleCase(v) }));\n\n  const handleCreate = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!name.trim()) {\n      setNameError('Name is required');\n      return;\n    }\n    setNameError(undefined);\n    createLookbook.mutate(\n      {\n        name: name.trim(),\n        description: description.trim() || undefined,\n        visibility,\n        tags: parseCsv(tags),\n      },\n      {\n        onSuccess: (lb) => {\n          setCreating(false);\n          setName('');\n          setDescription('');\n          setTags('');\n          setVisibility('PRIVATE');\n          navigateTo(`/lookbooks/${lb.id}`);\n        },\n      }\n    );\n  };\n\n  return (\n    <PageLayout\n      title=\"Lookbooks\"\n      description=\"Themed boards of saved catalogue pieces and looks\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => setCreating((v) => !v)}\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          {creating ? <X className=\"h-4 w-4\" /> : <Plus className=\"h-4 w-4\" />}\n          {creating ? 'Close' : 'New lookbook'}\n        </button>\n      }\n    >\n      {creating && (\n        <form onSubmit={handleCreate} className=\"mb-6\">\n          <GlassCard treatment=\"plain\" className=\"p-5\">\n            <h2 className=\"mb-4 flex items-center gap-2 text-base font-semibold text-text-primary\">\n              <BookHeart className=\"h-5 w-5\" /> New lookbook\n            </h2>\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              <TextField\n                label=\"Name\"\n                value={name}\n                onChange={setName}\n                placeholder=\"Summer wedding guest\"\n                required\n                error={nameError}\n              />\n              <SelectField\n                label=\"Visibility\"\n                value={visibility}\n                onChange={(v) => setVisibility(v as CooVisibility)}\n                options={visibilityOptions}\n              />\n            </div>\n            <TextAreaField\n              label=\"Description\"\n              value={description}\n              onChange={setDescription}\n              placeholder=\"What this board is for…\"\n              rows={2}\n              className=\"mt-4\"\n            />\n            <TextField\n              label=\"Tags\"\n              value={tags}\n              onChange={setTags}\n              placeholder=\"summer, formal\"\n              hint=\"Comma-separated\"\n              className=\"mt-4\"\n            />\n            {createLookbook.isError && (\n              <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n                {createLookbook.error instanceof Error\n                  ? createLookbook.error.message\n                  : 'Something went wrong'}\n              </p>\n            )}\n            <div className=\"mt-4 flex justify-end\">\n              <button\n                type=\"submit\"\n                disabled={createLookbook.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                {createLookbook.isPending ? (\n                  <Loader2 className=\"h-4 w-4 animate-spin\" />\n                ) : (\n                  <Plus className=\"h-4 w-4\" />\n                )}\n                Create lookbook\n              </button>\n            </div>\n          </GlassCard>\n        </form>\n      )}\n\n      {query.isLoading ? (\n        <LoadingView label=\"Loading lookbooks…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : lookbooks.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<BookHeart className=\"h-10 w-10\" />}\n          title=\"No lookbooks yet\"\n          description=\"Create a themed board to clip catalogue pieces and looks.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setCreating(true)}\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 lookbook\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {lookbooks.map((lb) => (\n            <button\n              key={lb.id}\n              type=\"button\"\n              onClick={() => navigateTo(`/lookbooks/${lb.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={<BookHeart className=\"h-9 w-9\" />}\n                seed={lb.id}\n                className=\"h-28 w-full\"\n              />\n              <div className=\"p-4\">\n                <div className=\"flex items-start justify-between gap-2\">\n                  <h3 className=\"truncate text-base font-semibold text-text-primary\">{lb.name}</h3>\n                  <StatusBadge status={lb.visibility} />\n                </div>\n                {lb.description && (\n                  <p className=\"mt-1.5 line-clamp-2 text-sm text-text-secondary\">\n                    {lb.description}\n                  </p>\n                )}\n                {lb.tags.length > 0 && <TagList tags={lb.tags} max={4} className=\"mt-3\" />}\n              </div>\n            </button>\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LookbooksListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/lookbooks/LookbooksListPage.tsx"],"sourcesContent":["/**\n * Lookbooks List Page\n * @module coolandlovely/pages/lookbooks\n *\n * Lists themed lookbook boards (`cooListLookbooks`) and supports creating one\n * inline (`cooCreateLookbook`).\n */\n\nimport { useState } from 'react';\nimport { Plus, BookHeart, Loader2, X } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\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 { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useLookbooks, useCreateLookbook } from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooVisibility } from '../../types';\n\nconst VISIBILITIES: CooVisibility[] = ['PRIVATE', 'FOLLOWERS', 'PUBLIC'];\n\nexport function LookbooksListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const query = useLookbooks();\n  const createLookbook = useCreateLookbook();\n\n  const [creating, setCreating] = useState(false);\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [visibility, setVisibility] = useState<CooVisibility>('PRIVATE');\n  const [tags, setTags] = useState('');\n  const [coverFileId, setCoverFileId] = useState('');\n  const [nameError, setNameError] = useState<string | undefined>();\n\n  const lookbooks = query.data ?? [];\n  const visibilityOptions = VISIBILITIES.map((v) => ({ value: v, label: titleCase(v) }));\n\n  const handleCreate = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!name.trim()) {\n      setNameError('Name is required');\n      return;\n    }\n    setNameError(undefined);\n    createLookbook.mutate(\n      {\n        name: name.trim(),\n        description: description.trim() || undefined,\n        visibility,\n        tags: parseCsv(tags),\n        coverFileId: coverFileId || undefined,\n      },\n      {\n        onSuccess: (lb) => {\n          setCreating(false);\n          setName('');\n          setDescription('');\n          setTags('');\n          setVisibility('PRIVATE');\n          setCoverFileId('');\n          navigateTo(`/lookbooks/${lb.id}`);\n        },\n      }\n    );\n  };\n\n  return (\n    <PageLayout\n      title=\"Lookbooks\"\n      description=\"Themed boards of saved catalogue pieces and looks\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => setCreating((v) => !v)}\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          {creating ? <X className=\"h-4 w-4\" /> : <Plus className=\"h-4 w-4\" />}\n          {creating ? 'Close' : 'New lookbook'}\n        </button>\n      }\n    >\n      {creating && (\n        <form onSubmit={handleCreate} className=\"mb-6\">\n          <GlassCard treatment=\"plain\" className=\"p-5\">\n            <h2 className=\"mb-4 flex items-center gap-2 text-base font-semibold text-text-primary\">\n              <BookHeart className=\"h-5 w-5\" /> New lookbook\n            </h2>\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              <TextField\n                label=\"Name\"\n                value={name}\n                onChange={setName}\n                placeholder=\"Summer wedding guest\"\n                required\n                error={nameError}\n              />\n              <SelectField\n                label=\"Visibility\"\n                value={visibility}\n                onChange={(v) => setVisibility(v as CooVisibility)}\n                options={visibilityOptions}\n              />\n            </div>\n            <TextAreaField\n              label=\"Description\"\n              value={description}\n              onChange={setDescription}\n              placeholder=\"What this board is for…\"\n              rows={2}\n              className=\"mt-4\"\n            />\n            <TextField\n              label=\"Tags\"\n              value={tags}\n              onChange={setTags}\n              placeholder=\"summer, formal\"\n              hint=\"Comma-separated\"\n              className=\"mt-4\"\n            />\n            <ImageUploadField\n              label=\"Cover image\"\n              aspect=\"wide\"\n              value={coverFileId}\n              onChange={setCoverFileId}\n              folder={COO_FILE_FOLDERS.lookbooks}\n              className=\"mt-4\"\n            />\n            {createLookbook.isError && (\n              <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n                {createLookbook.error instanceof Error\n                  ? createLookbook.error.message\n                  : 'Something went wrong'}\n              </p>\n            )}\n            <div className=\"mt-4 flex justify-end\">\n              <button\n                type=\"submit\"\n                disabled={createLookbook.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                {createLookbook.isPending ? (\n                  <Loader2 className=\"h-4 w-4 animate-spin\" />\n                ) : (\n                  <Plus className=\"h-4 w-4\" />\n                )}\n                Create lookbook\n              </button>\n            </div>\n          </GlassCard>\n        </form>\n      )}\n\n      {query.isLoading ? (\n        <LoadingView label=\"Loading lookbooks…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : lookbooks.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<BookHeart className=\"h-10 w-10\" />}\n          title=\"No lookbooks yet\"\n          description=\"Create a themed board to clip catalogue pieces and looks.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setCreating(true)}\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 lookbook\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {lookbooks.map((lb) => (\n            <button\n              key={lb.id}\n              type=\"button\"\n              onClick={() => navigateTo(`/lookbooks/${lb.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={<BookHeart className=\"h-9 w-9\" />}\n                seed={lb.id}\n                fileId={lb.cover?.id}\n                alt={lb.name}\n                className=\"h-28 w-full\"\n              />\n              <div className=\"p-4\">\n                <div className=\"flex items-start justify-between gap-2\">\n                  <h3 className=\"truncate text-base font-semibold text-text-primary\">{lb.name}</h3>\n                  <StatusBadge status={lb.visibility} />\n                </div>\n                {lb.description && (\n                  <p className=\"mt-1.5 line-clamp-2 text-sm text-text-secondary\">\n                    {lb.description}\n                  </p>\n                )}\n                {lb.tags.length > 0 && <TagList tags={lb.tags} max={4} className=\"mt-3\" />}\n              </div>\n            </button>\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}