@burdenoff/microfe-coolandlovely 2026.625.2 → 2026.628.1

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

@@ -0,0 +1,124 @@
+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 { useLookbook as a, useRemoveLookbookEntry as o } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { TagList as s } from "../../components/TagList.js";
+import { ArrowLeft as c, BookHeart as l, Loader2 as u, Sparkles as d, Tag as f, Trash2 as p } from "lucide-react";
+import { useParams as m } from "react-router-dom";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { GlassCard as _ } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/lookbooks/LookbookDetailPage.tsx
+function v() {
+	let { lookbookId: v } = m(), { navigateTo: y } = e(), b = a(v), x = o();
+	if (b.isLoading) return /* @__PURE__ */ h(t, {
+		title: "Lookbook",
+		children: /* @__PURE__ */ h(i, { label: "Loading lookbook…" })
+	});
+	if (b.isError || !b.data) return /* @__PURE__ */ h(t, {
+		title: "Lookbook",
+		children: /* @__PURE__ */ h(r, {
+			title: "Lookbook not found",
+			onRetry: () => void b.refetch()
+		})
+	});
+	let S = b.data, C = [...S.entries ?? []].sort((e, t) => e.position - t.position);
+	return /* @__PURE__ */ h(t, {
+		title: S.name,
+		description: S.description ?? void 0,
+		actions: /* @__PURE__ */ g("button", {
+			type: "button",
+			onClick: () => y("/lookbooks"),
+			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__ */ h(c, { className: "h-4 w-4" }), " Back"]
+		}),
+		children: /* @__PURE__ */ g("div", {
+			className: "mx-auto max-w-3xl",
+			children: [/* @__PURE__ */ g(_, {
+				treatment: "glass",
+				className: "p-6",
+				children: [/* @__PURE__ */ g("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ h("div", {
+						className: "flex h-12 w-12 items-center justify-center rounded-lg bg-accent-purple-subtle text-text-primary",
+						children: /* @__PURE__ */ h(l, { className: "h-6 w-6" })
+					}), /* @__PURE__ */ g("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ h("h2", {
+							className: "truncate text-xl font-semibold text-text-primary",
+							children: S.name
+						}), /* @__PURE__ */ h(n, {
+							status: S.visibility,
+							className: "mt-1"
+						})]
+					})]
+				}), S.tags.length > 0 && /* @__PURE__ */ h(s, {
+					tags: S.tags,
+					className: "mt-4"
+				})]
+			}), /* @__PURE__ */ g("section", {
+				className: "mt-6",
+				children: [/* @__PURE__ */ g("h3", {
+					className: "mb-3 text-lg font-semibold text-text-primary",
+					children: [
+						"Entries (",
+						C.length,
+						")"
+					]
+				}), C.length === 0 ? /* @__PURE__ */ h("p", {
+					className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
+					children: "This lookbook has no entries yet. Clip a catalogue piece or save a look to add one."
+				}) : /* @__PURE__ */ h("div", {
+					className: "divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface",
+					children: C.map((e) => {
+						let t = !!e.lookId;
+						return /* @__PURE__ */ g("div", {
+							className: "flex items-center gap-4 px-4 py-3",
+							children: [
+								/* @__PURE__ */ h("div", {
+									className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken text-text-secondary",
+									children: h(t ? d : f, { className: "h-5 w-5" })
+								}),
+								/* @__PURE__ */ g("div", {
+									className: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ h("p", {
+										className: "text-sm font-medium text-text-primary",
+										children: t ? "Saved look" : "Clipped piece"
+									}), e.note && /* @__PURE__ */ h("p", {
+										className: "truncate text-xs text-text-secondary",
+										children: e.note
+									})]
+								}),
+								t && e.lookId && /* @__PURE__ */ h("button", {
+									type: "button",
+									onClick: () => y(`/looks/${e.lookId}`),
+									className: "shrink-0 text-xs font-medium text-primary hover:underline",
+									children: "View"
+								}),
+								!t && e.styleItemId && /* @__PURE__ */ h("button", {
+									type: "button",
+									onClick: () => y(`/items/${e.styleItemId}`),
+									className: "shrink-0 text-xs font-medium text-primary hover:underline",
+									children: "View"
+								}),
+								/* @__PURE__ */ h("button", {
+									type: "button",
+									disabled: x.isPending,
+									onClick: () => x.mutate(e.id),
+									"aria-label": "Remove entry",
+									className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-text-secondary transition-colors hover:bg-status-error-bg-subtle hover:text-status-error-text disabled:opacity-50",
+									children: x.isPending && x.variables === e.id ? /* @__PURE__ */ h(u, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ h(p, { className: "h-3.5 w-3.5" })
+								})
+							]
+						}, e.id);
+					})
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { v as LookbookDetailPage };
+
+//# sourceMappingURL=LookbookDetailPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LookbookDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/lookbooks/LookbookDetailPage.tsx"],"sourcesContent":["/**\n * Lookbook Detail Page\n * @module coolandlovely/pages/lookbooks\n *\n * Single lookbook (`cooLookbook`) showing its clipped entries, with per-entry\n * removal (`cooRemoveLookbookEntry`).\n */\n\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, BookHeart, Sparkles, Tag, Trash2, Loader2 } 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 { TagList } from '../../components/TagList';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useLookbook, useRemoveLookbookEntry } from '../../hooks';\n\nexport function LookbookDetailPage() {\n  const { lookbookId } = useParams<{ lookbookId: string }>();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useLookbook(lookbookId);\n  const removeEntry = useRemoveLookbookEntry();\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Lookbook\">\n        <LoadingView label=\"Loading lookbook…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError || !query.data) {\n    return (\n      <PageLayout title=\"Lookbook\">\n        <ErrorView title=\"Lookbook not found\" onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  const lookbook = query.data;\n  const entries = [...(lookbook.entries ?? [])].sort((a, b) => a.position - b.position);\n\n  return (\n    <PageLayout\n      title={lookbook.name}\n      description={lookbook.description ?? undefined}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/lookbooks')}\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      }\n    >\n      <div className=\"mx-auto max-w-3xl\">\n        <GlassCard treatment=\"glass\" className=\"p-6\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex h-12 w-12 items-center justify-center rounded-lg bg-accent-purple-subtle text-text-primary\">\n              <BookHeart className=\"h-6 w-6\" />\n            </div>\n            <div className=\"min-w-0 flex-1\">\n              <h2 className=\"truncate text-xl font-semibold text-text-primary\">{lookbook.name}</h2>\n              <StatusBadge status={lookbook.visibility} className=\"mt-1\" />\n            </div>\n          </div>\n          {lookbook.tags.length > 0 && <TagList tags={lookbook.tags} className=\"mt-4\" />}\n        </GlassCard>\n\n        <section className=\"mt-6\">\n          <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">\n            Entries ({entries.length})\n          </h3>\n          {entries.length === 0 ? (\n            <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n              This lookbook has no entries yet. Clip a catalogue piece or save a look to add one.\n            </p>\n          ) : (\n            <div className=\"divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface\">\n              {entries.map((entry) => {\n                const isLook = Boolean(entry.lookId);\n                return (\n                  <div key={entry.id} className=\"flex items-center gap-4 px-4 py-3\">\n                    <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken text-text-secondary\">\n                      {isLook ? <Sparkles className=\"h-5 w-5\" /> : <Tag className=\"h-5 w-5\" />}\n                    </div>\n                    <div className=\"min-w-0 flex-1\">\n                      <p className=\"text-sm font-medium text-text-primary\">\n                        {isLook ? 'Saved look' : 'Clipped piece'}\n                      </p>\n                      {entry.note && (\n                        <p className=\"truncate text-xs text-text-secondary\">{entry.note}</p>\n                      )}\n                    </div>\n                    {isLook && entry.lookId && (\n                      <button\n                        type=\"button\"\n                        onClick={() => navigateTo(`/looks/${entry.lookId}`)}\n                        className=\"shrink-0 text-xs font-medium text-primary hover:underline\"\n                      >\n                        View\n                      </button>\n                    )}\n                    {!isLook && entry.styleItemId && (\n                      <button\n                        type=\"button\"\n                        onClick={() => navigateTo(`/items/${entry.styleItemId}`)}\n                        className=\"shrink-0 text-xs font-medium text-primary hover:underline\"\n                      >\n                        View\n                      </button>\n                    )}\n                    <button\n                      type=\"button\"\n                      disabled={removeEntry.isPending}\n                      onClick={() => removeEntry.mutate(entry.id)}\n                      aria-label=\"Remove entry\"\n                      className=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-text-secondary transition-colors hover:bg-status-error-bg-subtle hover:text-status-error-text disabled:opacity-50\"\n                    >\n                      {removeEntry.isPending && removeEntry.variables === entry.id ? (\n                        <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n                      ) : (\n                        <Trash2 className=\"h-3.5 w-3.5\" />\n                      )}\n                    </button>\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </section>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,156 @@
+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 "../../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";
+//#region src/coolandlovely/pages/lookbooks/LookbooksListPage.tsx
+var C = [
+	"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) => ({
+		value: e,
+		label: l(e)
+	}));
+	return /* @__PURE__ */ x(t, {
+		title: "Lookbooks",
+		description: "Themed boards of saved catalogue pieces and looks",
+		actions: /* @__PURE__ */ x("button", {
+			type: "button",
+			onClick: () => O((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: [D && /* @__PURE__ */ b("form", {
+			onSubmit: (e) => {
+				if (e.preventDefault(), !k.trim()) {
+					R("Name is required");
+					return;
+				}
+				R(void 0), E.mutate({
+					name: k.trim(),
+					description: j.trim() || void 0,
+					visibility: N,
+					tags: c(F)
+				}, { onSuccess: (e) => {
+					O(!1), A(""), M(""), I(""), P("PRIVATE"), w(`/lookbooks/${e.id}`);
+				} });
+			},
+			className: "mb-6",
+			children: /* @__PURE__ */ x(S, {
+				treatment: "plain",
+				className: "p-5",
+				children: [
+					/* @__PURE__ */ x("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"]
+					}),
+					/* @__PURE__ */ x("div", {
+						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+						children: [/* @__PURE__ */ b(p, {
+							label: "Name",
+							value: k,
+							onChange: A,
+							placeholder: "Summer wedding guest",
+							required: !0,
+							error: L
+						}), /* @__PURE__ */ b(d, {
+							label: "Visibility",
+							value: N,
+							onChange: (e) => P(e),
+							options: B
+						})]
+					}),
+					/* @__PURE__ */ b(f, {
+						label: "Description",
+						value: j,
+						onChange: M,
+						placeholder: "What this board is for…",
+						rows: 2,
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ b(p, {
+						label: "Tags",
+						value: F,
+						onChange: I,
+						placeholder: "summer, formal",
+						hint: "Comma-separated",
+						className: "mt-4"
+					}),
+					E.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: E.error instanceof Error ? E.error.message : "Something went wrong"
+					}),
+					/* @__PURE__ */ b("div", {
+						className: "mt-4 flex justify-end",
+						children: /* @__PURE__ */ x("button", {
+							type: "submit",
+							disabled: E.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"]
+						})
+					})
+				]
+			})
+		}), T.isLoading ? /* @__PURE__ */ b(i, { label: "Loading lookbooks…" }) : T.isError ? /* @__PURE__ */ b(r, { onRetry: () => void T.refetch() }) : z.length === 0 ? /* @__PURE__ */ b(m, {
+			illustration: "empty-data",
+			icon: /* @__PURE__ */ b(g, { className: "h-10 w-10" }),
+			title: "No lookbooks yet",
+			description: "Create a themed board to clip catalogue pieces and looks.",
+			action: /* @__PURE__ */ x("button", {
+				type: "button",
+				onClick: () => O(!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"]
+			})
+		}) : /* @__PURE__ */ b("div", {
+			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+			children: z.map((e) => /* @__PURE__ */ x("button", {
+				type: "button",
+				onClick: () => w(`/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" }),
+					seed: e.id,
+					className: "h-28 w-full"
+				}), /* @__PURE__ */ x("div", {
+					className: "p-4",
+					children: [
+						/* @__PURE__ */ x("div", {
+							className: "flex items-start justify-between gap-2",
+							children: [/* @__PURE__ */ b("h3", {
+								className: "truncate text-base font-semibold text-text-primary",
+								children: e.name
+							}), /* @__PURE__ */ b(n, { status: e.visibility })]
+						}),
+						e.description && /* @__PURE__ */ b("p", {
+							className: "mt-1.5 line-clamp-2 text-sm text-text-secondary",
+							children: e.description
+						}),
+						e.tags.length > 0 && /* @__PURE__ */ b(u, {
+							tags: e.tags,
+							max: 4,
+							className: "mt-3"
+						})
+					]
+				})]
+			}, e.id))
+		})]
+	});
+}
+//#endregion
+export { w as LookbooksListPage };
+
+//# sourceMappingURL=LookbooksListPage.js.map

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

@@ -0,0 +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 icon={<BookHeart className=\"h-9 w-9\" />} seed={lb.id} className=\"h-28 w-full\" />\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\">{lb.description}</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":";;;;;;;;;;;;;;;;AAuBA,IAAM,IAAgC;CAAC;CAAW;CAAa;CAAS;AAExE,SAAgB,IAAoB;CAClC,IAAM,EAAE,kBAAe,GAAkB,EACnC,IAAQ,GAAc,EACtB,IAAiB,GAAmB,EAEpC,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAY,KAAiB,EAAwB,UAAU,EAChE,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAW,KAAgB,GAA8B,EAE1D,IAAY,EAAM,QAAQ,EAAE,EAC5B,IAAoB,EAAa,KAAK,OAAO;EAAE,OAAO;EAAG,OAAO,EAAU,EAAE;EAAE,EAAE;AA6BtF,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,GAAa,MAAM,CAAC,EAAE;GACrC,WAAU;aAHZ,CAKc,EAAX,IAAY,IAA4B,GAA7B,EAAG,WAAU,WAAY,CAA+B,EACnE,IAAW,UAAU,eACf;;YAXb,CAcG,KACC,kBAAC,QAAD;GAAM,WA3CU,MAAuB;AAE3C,QADA,EAAE,gBAAgB,EACd,CAAC,EAAK,MAAM,EAAE;AAChB,OAAa,mBAAmB;AAChC;;AAGF,IADA,EAAa,KAAA,EAAU,EACvB,EAAe,OACb;KACE,MAAM,EAAK,MAAM;KACjB,aAAa,EAAY,MAAM,IAAI,KAAA;KACnC;KACA,MAAM,EAAS,EAAK;KACrB,EACD,EACE,YAAY,MAAO;AAMjB,KALA,EAAY,GAAM,EAClB,EAAQ,GAAG,EACX,EAAe,GAAG,EAClB,EAAQ,GAAG,EACX,EAAc,UAAU,EACxB,EAAW,cAAc,EAAG,KAAK;OAEpC,CACF;;GAmBiC,WAAU;aACtC,kBAAC,GAAD;IAAW,WAAU;IAAQ,WAAU;cAAvC;KACE,kBAAC,MAAD;MAAI,WAAU;gBAAd,CACE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,gBAC9B;;KACL,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OACE,OAAM;OACN,OAAO;OACP,UAAU;OACV,aAAY;OACZ,UAAA;OACA,OAAO;OACP,CAAA,EACF,kBAAC,GAAD;OACE,OAAM;OACN,OAAO;OACP,WAAW,MAAM,EAAc,EAAmB;OAClD,SAAS;OACT,CAAA,CACE;;KACN,kBAAC,GAAD;MACE,OAAM;MACN,OAAO;MACP,UAAU;MACV,aAAY;MACZ,MAAM;MACN,WAAU;MACV,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO;MACP,UAAU;MACV,aAAY;MACZ,MAAK;MACL,WAAU;MACV,CAAA;KACD,EAAe,WACd,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAe,iBAAiB,QAC7B,EAAe,MAAM,UACrB;MACF,CAAA;KAEN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,UAAD;OACE,MAAK;OACL,UAAU,EAAe;OACzB,WAAU;iBAHZ,CAKG,EAAe,YACd,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAE5C,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAC5B,kBAEK;;MACL,CAAA;KACI;;GACP,CAAA,EAGR,EAAM,YACL,kBAAC,GAAD,EAAa,OAAM,sBAAuB,CAAA,GACxC,EAAM,UACR,kBAAC,GAAD,EAAW,eAAe,KAAK,EAAM,SAAS,EAAI,CAAA,GAChD,EAAU,WAAW,IACvB,kBAAC,GAAD;GACE,cAAa;GACb,MAAM,kBAAC,GAAD,EAAW,WAAU,aAAc,CAAA;GACzC,OAAM;GACN,aAAY;GACZ,QACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAY,GAAK;IAChC,WAAU;cAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,gBACrB;;GAEX,CAAA,GAEF,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAU,KAAK,MACd,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe,EAAW,cAAc,EAAG,KAAK;IAChD,WAAU;cAJZ,CAME,kBAAC,GAAD;KAAW,MAAM,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;KAAE,MAAM,EAAG;KAAI,WAAU;KAAgB,CAAA,EAC3F,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,MAAD;QAAI,WAAU;kBAAsD,EAAG;QAAU,CAAA,EACjF,kBAAC,GAAD,EAAa,QAAQ,EAAG,YAAc,CAAA,CAClC;;MACL,EAAG,eACF,kBAAC,KAAD;OAAG,WAAU;iBAAmD,EAAG;OAAgB,CAAA;MAEpF,EAAG,KAAK,SAAS,KAAK,kBAAC,GAAD;OAAS,MAAM,EAAG;OAAM,KAAK;OAAG,WAAU;OAAS,CAAA;MACtE;OACC;MAhBF,EAAG,GAgBD,CACT;GACE,CAAA,CAEG"}

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

@@ -0,0 +1,238 @@
+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 { useDeleteLook as o, useLikeLook as s, useLook as c, usePublishLook as l } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { formatDate as u, formatPrice as d, titleCase as f } from "../../utils/formatters.js";
+import { TagList as p } from "../../components/TagList.js";
+import { ArrowLeft as m, Bookmark as h, Heart as g, Loader2 as _, Rocket as v, Sparkles as y, Star as b, Trash2 as x } from "lucide-react";
+import { useParams as S } from "react-router-dom";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { GlassCard as T } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/looks/LookDetailPage.tsx
+function E() {
+	let { lookId: E } = S(), { navigateTo: D } = e(), O = c(E), k = s(), A = l(), j = o();
+	if (O.isLoading) return /* @__PURE__ */ C(t, {
+		title: "Look",
+		children: /* @__PURE__ */ C(i, { label: "Loading look…" })
+	});
+	if (O.isError || !O.data) return /* @__PURE__ */ C(t, {
+		title: "Look",
+		children: /* @__PURE__ */ C(r, {
+			title: "Look not found",
+			onRetry: () => void O.refetch()
+		})
+	});
+	let M = O.data, N = M.items ?? [], P = M.publishedAt !== null;
+	return /* @__PURE__ */ C(t, {
+		title: M.title,
+		description: f(M.occasion),
+		actions: /* @__PURE__ */ w("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ w("button", {
+					type: "button",
+					onClick: () => D("/looks"),
+					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__ */ C(m, { className: "h-4 w-4" }), " Back"]
+				}),
+				!P && /* @__PURE__ */ w("button", {
+					type: "button",
+					disabled: A.isPending,
+					onClick: () => A.mutate(M.id),
+					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",
+					children: [A.isPending ? /* @__PURE__ */ C(_, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ C(v, { className: "h-4 w-4" }), "Publish"]
+				}),
+				/* @__PURE__ */ w("button", {
+					type: "button",
+					disabled: j.isPending,
+					onClick: () => j.mutate(M.id, { onSuccess: () => D("/looks") }),
+					className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50",
+					children: [j.isPending ? /* @__PURE__ */ C(_, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ C(x, { className: "h-4 w-4" }), "Delete"]
+				})
+			]
+		}),
+		children: /* @__PURE__ */ w("div", {
+			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
+			children: [/* @__PURE__ */ w("div", {
+				className: "lg:col-span-2",
+				children: [/* @__PURE__ */ w(T, {
+					treatment: "glass",
+					className: "overflow-hidden p-0",
+					children: [/* @__PURE__ */ C(a, {
+						icon: /* @__PURE__ */ C(y, { className: "h-14 w-14" }),
+						seed: M.id,
+						className: "h-60 w-full"
+					}), /* @__PURE__ */ w("div", {
+						className: "p-6",
+						children: [
+							/* @__PURE__ */ w("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ C("h2", {
+										className: "text-xl font-semibold text-text-primary",
+										children: M.title
+									}),
+									M.isFeatured && /* @__PURE__ */ C(b, { className: "h-4 w-4 fill-status-warning-text text-status-warning-text" }),
+									/* @__PURE__ */ C(n, {
+										status: P ? "published" : "draft",
+										className: "ml-auto"
+									})
+								]
+							}),
+							M.caption && /* @__PURE__ */ C("p", {
+								className: "mt-3 text-sm text-text-secondary",
+								children: M.caption
+							}),
+							M.tags.length > 0 && /* @__PURE__ */ C(p, {
+								tags: M.tags,
+								className: "mt-4",
+								tone: "accent"
+							}),
+							/* @__PURE__ */ w("div", {
+								className: "mt-5 flex items-center gap-3",
+								children: [/* @__PURE__ */ w("button", {
+									type: "button",
+									disabled: k.isPending,
+									onClick: () => k.mutate(M.id),
+									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-status-error-bg-subtle disabled:opacity-50",
+									children: [
+										k.isPending ? /* @__PURE__ */ C(_, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ C(g, { className: "h-4 w-4" }),
+										"Like · ",
+										M.likeCount
+									]
+								}), /* @__PURE__ */ w("span", {
+									className: "inline-flex items-center gap-1.5 text-sm text-text-secondary",
+									children: [
+										/* @__PURE__ */ C(h, { className: "h-4 w-4" }),
+										" ",
+										M.saveCount,
+										" saves"
+									]
+								})]
+							})
+						]
+					})]
+				}), /* @__PURE__ */ w("section", {
+					className: "mt-6",
+					children: [/* @__PURE__ */ w("h3", {
+						className: "mb-3 text-lg font-semibold text-text-primary",
+						children: [
+							"Shop the look (",
+							N.length,
+							")"
+						]
+					}), N.length === 0 ? /* @__PURE__ */ C("p", {
+						className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
+						children: "No items tagged in this look yet."
+					}) : /* @__PURE__ */ C("div", {
+						className: "divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface",
+						children: [...N].sort((e, t) => e.position - t.position).map((e) => /* @__PURE__ */ w("button", {
+							type: "button",
+							onClick: () => e.styleItem && D(`/items/${e.styleItem.id}`),
+							className: "flex w-full items-center gap-4 px-4 py-3 text-left transition-colors hover:bg-bg-sunken/50",
+							children: [
+								/* @__PURE__ */ C(a, {
+									icon: /* @__PURE__ */ C(y, { className: "h-5 w-5" }),
+									seed: e.id,
+									className: "h-11 w-11 shrink-0"
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ C("p", {
+										className: "truncate text-sm font-medium text-text-primary",
+										children: e.styleItem?.name ?? "Catalogue piece"
+									}), e.styling && /* @__PURE__ */ C("p", {
+										className: "truncate text-xs text-text-secondary",
+										children: e.styling
+									})]
+								}),
+								e.styleItem && /* @__PURE__ */ C("span", {
+									className: "shrink-0 text-sm font-semibold text-text-primary",
+									children: d(e.styleItem.price, e.styleItem.currency)
+								})
+							]
+						}, e.id))
+					})]
+				})]
+			}), /* @__PURE__ */ w("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ w(T, {
+						treatment: "plain",
+						className: "p-5",
+						children: [/* @__PURE__ */ C("h3", {
+							className: "mb-3 text-sm font-semibold text-text-primary",
+							children: "Details"
+						}), /* @__PURE__ */ w("dl", {
+							className: "space-y-2 text-sm",
+							children: [
+								/* @__PURE__ */ w("div", {
+									className: "flex justify-between gap-2",
+									children: [/* @__PURE__ */ C("dt", {
+										className: "text-text-secondary",
+										children: "Occasion"
+									}), /* @__PURE__ */ C("dd", {
+										className: "text-text-primary",
+										children: f(M.occasion)
+									})]
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex justify-between gap-2",
+									children: [/* @__PURE__ */ C("dt", {
+										className: "text-text-secondary",
+										children: "Visibility"
+									}), /* @__PURE__ */ C("dd", {
+										className: "text-text-primary",
+										children: f(M.visibility)
+									})]
+								}),
+								/* @__PURE__ */ w("div", {
+									className: "flex justify-between gap-2",
+									children: [/* @__PURE__ */ C("dt", {
+										className: "text-text-secondary",
+										children: "Published"
+									}), /* @__PURE__ */ C("dd", {
+										className: "text-text-primary",
+										children: M.publishedAt ? u(M.publishedAt, {
+											hour: void 0,
+											minute: void 0
+										}) : "—"
+									})]
+								})
+							]
+						})]
+					}),
+					M.collaborationId && /* @__PURE__ */ w("button", {
+						type: "button",
+						onClick: () => D(`/collaborations/${M.collaborationId}`),
+						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",
+						children: [/* @__PURE__ */ C("div", {
+							className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-status-warning-bg-subtle text-status-warning-text",
+							children: /* @__PURE__ */ C(y, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ w("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ C("p", {
+								className: "truncate text-sm font-medium text-text-primary",
+								children: "Part of a collaboration"
+							}), /* @__PURE__ */ C("p", {
+								className: "truncate text-xs text-text-secondary",
+								children: "View collaboration"
+							})]
+						})]
+					}),
+					(A.isError || j.isError || k.isError) && /* @__PURE__ */ C("p", {
+						className: "rounded-lg bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text",
+						children: (A.error ?? j.error ?? k.error) instanceof Error ? (A.error ?? j.error ?? k.error)?.message : "Action failed"
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { E as LookDetailPage };
+
+//# sourceMappingURL=LookDetailPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LookDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/looks/LookDetailPage.tsx"],"sourcesContent":["/**\n * Look Detail Page\n * @module coolandlovely/pages/looks\n *\n * Single look (`cooLook`) with its look items, like (`cooLikeLook`), publish\n * (`cooPublishLook`) and delete (`cooDeleteLook`) actions.\n */\n\nimport { useParams } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  Heart,\n  Bookmark,\n  Rocket,\n  Trash2,\n  Loader2,\n  Sparkles,\n  Star,\n} 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 { useLook, useLikeLook, usePublishLook, useDeleteLook } from '../../hooks';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function LookDetailPage() {\n  const { lookId } = useParams<{ lookId: string }>();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useLook(lookId);\n  const like = useLikeLook();\n  const publish = usePublishLook();\n  const remove = useDeleteLook();\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Look\">\n        <LoadingView label=\"Loading look…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError || !query.data) {\n    return (\n      <PageLayout title=\"Look\">\n        <ErrorView title=\"Look not found\" onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  const look = query.data;\n  const items = look.items ?? [];\n  const isPublished = look.publishedAt !== null;\n\n  return (\n    <PageLayout\n      title={look.title}\n      description={titleCase(look.occasion)}\n      actions={\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/looks')}\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          {!isPublished && (\n            <button\n              type=\"button\"\n              disabled={publish.isPending}\n              onClick={() => publish.mutate(look.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          <button\n            type=\"button\"\n            disabled={remove.isPending}\n            onClick={() => remove.mutate(look.id, { onSuccess: () => navigateTo('/looks') })}\n            className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50\"\n          >\n            {remove.isPending ? (\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n            ) : (\n              <Trash2 className=\"h-4 w-4\" />\n            )}\n            Delete\n          </button>\n        </div>\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n        <div className=\"lg:col-span-2\">\n          <GlassCard treatment=\"glass\" className=\"overflow-hidden p-0\">\n            <Thumbnail icon={<Sparkles className=\"h-14 w-14\" />} seed={look.id} className=\"h-60 w-full\" />\n            <div className=\"p-6\">\n              <div className=\"flex items-center gap-2\">\n                <h2 className=\"text-xl font-semibold text-text-primary\">{look.title}</h2>\n                {look.isFeatured && (\n                  <Star className=\"h-4 w-4 fill-status-warning-text text-status-warning-text\" />\n                )}\n                <StatusBadge status={isPublished ? 'published' : 'draft'} className=\"ml-auto\" />\n              </div>\n              {look.caption && <p className=\"mt-3 text-sm text-text-secondary\">{look.caption}</p>}\n              {look.tags.length > 0 && <TagList tags={look.tags} className=\"mt-4\" tone=\"accent\" />}\n\n              <div className=\"mt-5 flex items-center gap-3\">\n                <button\n                  type=\"button\"\n                  disabled={like.isPending}\n                  onClick={() => like.mutate(look.id)}\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-status-error-bg-subtle disabled:opacity-50\"\n                >\n                  {like.isPending ? (\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                  ) : (\n                    <Heart className=\"h-4 w-4\" />\n                  )}\n                  Like · {look.likeCount}\n                </button>\n                <span className=\"inline-flex items-center gap-1.5 text-sm text-text-secondary\">\n                  <Bookmark className=\"h-4 w-4\" /> {look.saveCount} saves\n                </span>\n              </div>\n            </div>\n          </GlassCard>\n\n          {/* Shop the look */}\n          <section className=\"mt-6\">\n            <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">\n              Shop the look ({items.length})\n            </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 tagged in this look yet.\n              </p>\n            ) : (\n              <div className=\"divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface\">\n                {[...items]\n                  .sort((a, b) => a.position - b.position)\n                  .map((li) => (\n                    <button\n                      key={li.id}\n                      type=\"button\"\n                      onClick={() => li.styleItem && navigateTo(`/items/${li.styleItem.id}`)}\n                      className=\"flex w-full items-center gap-4 px-4 py-3 text-left transition-colors hover:bg-bg-sunken/50\"\n                    >\n                      <Thumbnail icon={<Sparkles className=\"h-5 w-5\" />} seed={li.id} className=\"h-11 w-11 shrink-0\" />\n                      <div className=\"min-w-0 flex-1\">\n                        <p className=\"truncate text-sm font-medium text-text-primary\">\n                          {li.styleItem?.name ?? 'Catalogue piece'}\n                        </p>\n                        {li.styling && (\n                          <p className=\"truncate text-xs text-text-secondary\">{li.styling}</p>\n                        )}\n                      </div>\n                      {li.styleItem && (\n                        <span className=\"shrink-0 text-sm font-semibold text-text-primary\">\n                          {formatPrice(li.styleItem.price, li.styleItem.currency)}\n                        </span>\n                      )}\n                    </button>\n                  ))}\n              </div>\n            )}\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\">Occasion</dt>\n                <dd className=\"text-text-primary\">{titleCase(look.occasion)}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Visibility</dt>\n                <dd className=\"text-text-primary\">{titleCase(look.visibility)}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Published</dt>\n                <dd className=\"text-text-primary\">\n                  {look.publishedAt\n                    ? formatDate(look.publishedAt, { hour: undefined, minute: undefined })\n                    : '—'}\n                </dd>\n              </div>\n            </dl>\n          </GlassCard>\n\n          {look.collaborationId && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/collaborations/${look.collaborationId}`)}\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              <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-status-warning-bg-subtle text-status-warning-text\">\n                <Sparkles className=\"h-5 w-5\" />\n              </div>\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-sm font-medium text-text-primary\">Part of a collaboration</p>\n                <p className=\"truncate text-xs text-text-secondary\">View collaboration</p>\n              </div>\n            </button>\n          )}\n\n          {(publish.isError || remove.isError || like.isError) && (\n            <p className=\"rounded-lg bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text\">\n              {(publish.error ?? remove.error ?? like.error) instanceof Error\n                ? (publish.error ?? remove.error ?? like.error)?.message\n                : 'Action failed'}\n            </p>\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}