@burdenoff/microfe-coolandlovely 2026.1024.1 → 2026.1024.3

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

@@ -12,188 +12,196 @@ import { LookCard as m } from "../../components/LookCard.js";
 import { categoryIcon as h } from "../../utils/icons.js";
 import { TagList as g } from "../../components/TagList.js";
 import { ColourSwatchRow as _ } from "../../components/ColourSwatchRow.js";
-import { Archive as v, ArrowLeft as y, ChevronRight as b, Loader2 as x, Pencil as S, Shapes as C } from "lucide-react";
-import { useParams as w } from "react-router";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
-import { GlassCard as D } from "@burdenoff/fe-libs/ui";
+import { AddToCartPanel as v } from "../../components/AddToCartPanel.js";
+import { Archive as y, ArrowLeft as b, ChevronRight as x, Loader2 as S, Pencil as C, Shapes as w } from "lucide-react";
+import { useParams as T, useSearchParams as E } from "react-router";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { GlassCard as k } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/items/StyleItemDetailPage.tsx
-function O() {
-	let { itemId: O } = w(), { navigateTo: k } = e(), A = i(O), j = r({ pagination: {
+function A() {
+	let { itemId: A } = T(), [j] = E(), M = j.get("look"), { navigateTo: N } = e(), P = i(A), F = r({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), M = n();
-	if (a(O, A.data?.name), A.isLoading) return /* @__PURE__ */ T(t, {
+	} }), I = n();
+	if (a(A, P.data?.name), P.isLoading) return /* @__PURE__ */ D(t, {
 		title: "Style item",
-		children: /* @__PURE__ */ T(c, { label: "Loading item…" })
+		children: /* @__PURE__ */ D(c, { label: "Loading item…" })
 	});
-	if (A.isError || !A.data) return /* @__PURE__ */ T(t, {
+	if (P.isError || !P.data) return /* @__PURE__ */ D(t, {
 		title: "Style item",
-		children: /* @__PURE__ */ T(s, {
+		children: /* @__PURE__ */ D(s, {
 			title: "Item not found",
-			onRetry: () => void A.refetch()
+			onRetry: () => void P.refetch()
 		})
 	});
-	let N = A.data, P = N.status === "RETIRED", F = (j.data?.items ?? []).filter((e) => e.items?.some((e) => e.styleItemId === N.id)).slice(0, 4);
-	return /* @__PURE__ */ E(t, {
-		title: N.name,
-		description: N.brand?.name ?? void 0,
-		actions: /* @__PURE__ */ E("div", {
+	let L = P.data, R = L.status === "RETIRED", z = (F.data?.items ?? []).filter((e) => e.items?.some((e) => e.styleItemId === L.id)).slice(0, 4);
+	return /* @__PURE__ */ O(t, {
+		title: L.name,
+		description: L.brand?.name ?? void 0,
+		actions: /* @__PURE__ */ O("div", {
 			className: "flex flex-wrap items-center gap-2",
 			children: [
-				/* @__PURE__ */ E("button", {
+				/* @__PURE__ */ O("button", {
 					type: "button",
-					onClick: () => k("/items"),
+					onClick: () => N("/items"),
 					className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
-					children: [/* @__PURE__ */ T(y, { className: "h-4 w-4" }), " Back"]
+					children: [/* @__PURE__ */ D(b, { className: "h-4 w-4" }), " Back"]
 				}),
-				/* @__PURE__ */ T(u, { styleItemId: N.id }),
-				/* @__PURE__ */ E("button", {
+				/* @__PURE__ */ D(u, { styleItemId: L.id }),
+				/* @__PURE__ */ O("button", {
 					type: "button",
-					onClick: () => k(`/items/${N.id}/edit`),
+					onClick: () => N(`/items/${L.id}/edit`),
 					className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
-					children: [/* @__PURE__ */ T(S, { className: "h-4 w-4" }), " Edit"]
+					children: [/* @__PURE__ */ D(C, { className: "h-4 w-4" }), " Edit"]
 				}),
-				!P && /* @__PURE__ */ E("button", {
+				!R && /* @__PURE__ */ O("button", {
 					type: "button",
-					disabled: M.isPending,
-					onClick: () => M.mutate(N.id, { onSuccess: () => k("/items") }),
+					disabled: I.isPending,
+					onClick: () => I.mutate(L.id, { onSuccess: () => N("/items") }),
 					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: [M.isPending ? /* @__PURE__ */ T(x, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ T(v, { className: "h-4 w-4" }), "Archive"]
+					children: [I.isPending ? /* @__PURE__ */ D(S, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ D(y, { className: "h-4 w-4" }), "Archive"]
 				})
 			]
 		}),
-		children: [/* @__PURE__ */ E("div", {
+		children: [/* @__PURE__ */ O("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
-			children: [/* @__PURE__ */ T("div", {
+			children: [/* @__PURE__ */ D("div", {
 				className: "lg:col-span-2",
-				children: /* @__PURE__ */ E(D, {
+				children: /* @__PURE__ */ O(k, {
 					treatment: "glass",
 					className: "group overflow-hidden p-0",
-					children: [/* @__PURE__ */ T(l, {
-						icon: h(N.category, 48),
-						seed: N.id,
-						fileId: N.image?.id,
-						alt: N.name,
+					children: [/* @__PURE__ */ D(l, {
+						icon: h(L.category, 48),
+						seed: L.id,
+						fileId: L.image?.id,
+						alt: L.name,
 						className: "aspect-[4/5] w-full"
-					}), N.description && /* @__PURE__ */ T("div", {
+					}), L.description && /* @__PURE__ */ D("div", {
 						className: "p-6",
-						children: /* @__PURE__ */ T("p", {
+						children: /* @__PURE__ */ D("p", {
 							className: "text-sm leading-relaxed text-text-secondary",
-							children: N.description
+							children: L.description
 						})
 					})]
 				})
-			}), /* @__PURE__ */ E("div", {
+			}), /* @__PURE__ */ O("div", {
 				className: "space-y-4",
 				children: [
-					/* @__PURE__ */ E(D, {
+					/* @__PURE__ */ O(k, {
 						treatment: "glass",
 						className: "space-y-5 p-6",
 						children: [
-							/* @__PURE__ */ E("div", { children: [
-								/* @__PURE__ */ T("h2", {
+							/* @__PURE__ */ O("div", { children: [
+								/* @__PURE__ */ D("h2", {
 									className: "text-2xl font-semibold leading-tight text-text-primary",
-									children: N.name
+									children: L.name
 								}),
-								N.brand && /* @__PURE__ */ E("button", {
+								L.brand && /* @__PURE__ */ O("button", {
 									type: "button",
-									onClick: () => k(`/brands/${N.brand?.id}`),
+									onClick: () => N(`/brands/${L.brand?.id}`),
 									className: "mt-1 inline-flex items-center gap-0.5 text-sm font-medium text-action-primary-bg hover:underline",
-									children: [N.brand.name, /* @__PURE__ */ T(b, { className: "h-3.5 w-3.5" })]
+									children: [L.brand.name, /* @__PURE__ */ D(x, { className: "h-3.5 w-3.5" })]
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ O("div", {
 									className: "mt-3 flex flex-wrap items-center justify-between gap-2",
-									children: [/* @__PURE__ */ E("p", {
+									children: [/* @__PURE__ */ O("p", {
 										className: "text-3xl font-bold text-text-primary tabular-nums",
-										children: [f(N.price, N.currency), /* @__PURE__ */ T("span", {
+										children: [f(L.price, L.currency), /* @__PURE__ */ D("span", {
 											className: "ml-2 text-base font-medium text-text-secondary",
-											children: N.currency
+											children: L.currency
 										})]
-									}), /* @__PURE__ */ T(o, { status: N.status })]
+									}), /* @__PURE__ */ D(o, { status: L.status })]
 								})
 							] }),
-							/* @__PURE__ */ T("div", { className: "border-t border-border-seam" }),
-							N.colours.length > 0 && /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
+							/* @__PURE__ */ D("div", { className: "border-t border-border-seam" }),
+							L.colours.length > 0 && /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
 								className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
 								children: "Colours"
-							}), /* @__PURE__ */ T(_, {
-								colours: N.colours,
+							}), /* @__PURE__ */ D(_, {
+								colours: L.colours,
 								max: 12
 							})] }),
-							N.sizes.length > 0 && /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
+							L.sizes.length > 0 && /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
 								className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
 								children: "Size"
-							}), /* @__PURE__ */ T("div", {
+							}), /* @__PURE__ */ D("div", {
 								className: "flex flex-wrap gap-2",
-								children: N.sizes.map((e) => /* @__PURE__ */ T("span", {
+								children: L.sizes.map((e) => /* @__PURE__ */ D("span", {
 									className: "inline-flex min-w-9 items-center justify-center rounded-full border border-border-seam px-3 py-1 text-sm font-medium text-text-primary",
 									children: e
 								}, e))
 							})] }),
-							N.materials.length > 0 && /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
+							/* @__PURE__ */ D("div", {
+								className: "border-t border-border-seam pt-5",
+								children: /* @__PURE__ */ D(v, {
+									item: L,
+									lookId: M
+								})
+							}),
+							L.materials.length > 0 && /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
 								className: "mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary",
 								children: "Materials"
-							}), /* @__PURE__ */ T("p", {
+							}), /* @__PURE__ */ D("p", {
 								className: "text-sm text-text-primary",
-								children: N.materials.join(", ")
+								children: L.materials.join(", ")
 							})] }),
-							N.tags.length > 0 && /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
+							L.tags.length > 0 && /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
 								className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
 								children: "Tags"
-							}), /* @__PURE__ */ T(g, {
-								tags: N.tags,
+							}), /* @__PURE__ */ D(g, {
+								tags: L.tags,
 								max: 12,
 								tone: "accent"
 							})] })
 						]
 					}),
-					/* @__PURE__ */ E(D, {
+					/* @__PURE__ */ O(k, {
 						treatment: "plain",
 						className: "p-5",
-						children: [/* @__PURE__ */ T("h3", {
+						children: [/* @__PURE__ */ D("h3", {
 							className: "mb-3 text-sm font-semibold text-text-primary",
 							children: "Details"
-						}), /* @__PURE__ */ E("dl", {
+						}), /* @__PURE__ */ O("dl", {
 							className: "space-y-2 text-sm",
 							children: [
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ O("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ T("dt", {
+									children: [/* @__PURE__ */ D("dt", {
 										className: "text-text-secondary",
 										children: "Category"
-									}), /* @__PURE__ */ T("dd", {
+									}), /* @__PURE__ */ D("dd", {
 										className: "text-text-primary",
-										children: p(N.category)
+										children: p(L.category)
 									})]
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ O("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ T("dt", {
+									children: [/* @__PURE__ */ D("dt", {
 										className: "text-text-secondary",
 										children: "SKU"
-									}), /* @__PURE__ */ T("dd", {
+									}), /* @__PURE__ */ D("dd", {
 										className: "text-text-primary",
-										children: N.sku ?? "—"
+										children: L.sku ?? "—"
 									})]
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ O("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ T("dt", {
+									children: [/* @__PURE__ */ D("dt", {
 										className: "text-text-secondary",
 										children: "Currency"
-									}), /* @__PURE__ */ T("dd", {
+									}), /* @__PURE__ */ D("dd", {
 										className: "text-text-primary",
-										children: N.currency
+										children: L.currency
 									})]
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ O("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ T("dt", {
+									children: [/* @__PURE__ */ D("dt", {
 										className: "text-text-secondary",
 										children: "Created"
-									}), /* @__PURE__ */ T("dd", {
+									}), /* @__PURE__ */ D("dd", {
 										className: "text-text-primary",
-										children: d(N.createdAt, {
+										children: d(L.createdAt, {
 											hour: void 0,
 											minute: void 0
 										})
@@ -202,20 +210,20 @@ function O() {
 							]
 						})]
 					}),
-					N.collection && /* @__PURE__ */ E("button", {
+					L.collection && /* @__PURE__ */ O("button", {
 						type: "button",
-						onClick: () => k(`/collections/${N.collection?.id}`),
+						onClick: () => N(`/collections/${L.collection?.id}`),
 						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__ */ T(l, {
-							icon: /* @__PURE__ */ T(C, { className: "h-5 w-5" }),
-							seed: N.collection.id,
+						children: [/* @__PURE__ */ D(l, {
+							icon: /* @__PURE__ */ D(w, { className: "h-5 w-5" }),
+							seed: L.collection.id,
 							className: "h-10 w-10 shrink-0"
-						}), /* @__PURE__ */ E("div", {
+						}), /* @__PURE__ */ O("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ T("p", {
+							children: [/* @__PURE__ */ D("p", {
 								className: "truncate text-sm font-medium text-text-primary",
-								children: N.collection.name
-							}), /* @__PURE__ */ T("p", {
+								children: L.collection.name
+							}), /* @__PURE__ */ D("p", {
 								className: "truncate text-xs text-text-secondary",
 								children: "View collection"
 							})]
@@ -223,28 +231,28 @@ function O() {
 					})
 				]
 			})]
-		}), /* @__PURE__ */ E("section", {
+		}), /* @__PURE__ */ O("section", {
 			className: "mt-8",
-			children: [/* @__PURE__ */ E("div", {
+			children: [/* @__PURE__ */ O("div", {
 				className: "mb-3 flex items-center justify-between gap-3",
-				children: [/* @__PURE__ */ T("h3", {
+				children: [/* @__PURE__ */ D("h3", {
 					className: "text-lg font-semibold text-text-primary",
 					children: "Appears in looks"
-				}), F.length > 0 && /* @__PURE__ */ E("button", {
+				}), z.length > 0 && /* @__PURE__ */ O("button", {
 					type: "button",
-					onClick: () => k("/looks"),
+					onClick: () => N("/looks"),
 					className: "inline-flex items-center gap-1 text-sm font-medium text-action-primary-bg hover:underline",
-					children: ["View all ", /* @__PURE__ */ T(b, { className: "h-3.5 w-3.5" })]
+					children: ["View all ", /* @__PURE__ */ D(x, { className: "h-3.5 w-3.5" })]
 				})]
-			}), j.isLoading ? /* @__PURE__ */ E("div", {
+			}), F.isLoading ? /* @__PURE__ */ O("div", {
 				className: "flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
-				children: [/* @__PURE__ */ T(x, { className: "h-4 w-4 animate-spin" }), " Loading referenced looks…"]
-			}) : F.length === 0 ? /* @__PURE__ */ T("p", {
+				children: [/* @__PURE__ */ D(S, { className: "h-4 w-4 animate-spin" }), " Loading referenced looks…"]
+			}) : z.length === 0 ? /* @__PURE__ */ D("p", {
 				className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
 				children: "This piece has not been tagged in any looks yet."
-			}) : /* @__PURE__ */ T("div", {
+			}) : /* @__PURE__ */ D("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
-				children: F.map((e) => /* @__PURE__ */ T(m, {
+				children: z.map((e) => /* @__PURE__ */ D(m, {
 					id: e.id,
 					title: e.title,
 					occasion: e.occasion,
@@ -252,7 +260,7 @@ function O() {
 					likeCount: e.likeCount,
 					isLikedByMe: e.isLikedByMe,
 					isSavedByMe: e.isSavedByMe,
-					onOpen: () => k(`/looks/${e.id}`),
+					onOpen: () => N(`/looks/${e.id}`),
 					showActions: !0
 				}, e.id))
 			})]
@@ -260,6 +268,6 @@ function O() {
 	});
 }
 //#endregion
-export { O as StyleItemDetailPage };
+export { A as StyleItemDetailPage };
 
 //# sourceMappingURL=StyleItemDetailPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StyleItemDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"sourcesContent":["/**\n * Style Item Detail Page\n * @module coolandlovely/pages/items\n *\n * Renders a single catalogue piece (`cooStyleItem`) with edit + archive\n * (`cooArchiveStyleItem`) actions.\n */\n\nimport { useParams } from 'react-router';\nimport { ArrowLeft, Pencil, Archive, Loader2, ChevronRight, Shapes } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { LookCard } from '../../components/LookCard';\nimport { TagList } from '../../components/TagList';\nimport { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { AddToLookbookButton } from '../../components/AddToLookbookButton';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n  useAssistantEntityName,\n  useStyleItem,\n  useArchiveStyleItem,\n  useLooksWithItems,\n} from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function StyleItemDetailPage() {\n  const { itemId } = useParams<{ itemId: string }>();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useStyleItem(itemId);\n  const looksQuery = useLooksWithItems({ pagination: { limit: 100, offset: 0 } });\n  const archive = useArchiveStyleItem();\n  // Name the piece for the assistant's screen context (see useAssistantEntity).\n  useAssistantEntityName(itemId, query.data?.name);\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Style item\">\n        <LoadingView label=\"Loading item…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError || !query.data) {\n    return (\n      <PageLayout title=\"Style item\">\n        <ErrorView title=\"Item not found\" onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  const item = query.data;\n  const isArchived = item.status === 'RETIRED';\n  const appearsInLooks = (looksQuery.data?.items ?? [])\n    .filter((look) => look.items?.some((lookItem) => lookItem.styleItemId === item.id))\n    .slice(0, 4);\n\n  return (\n    <PageLayout\n      title={item.name}\n      description={item.brand?.name ?? undefined}\n      actions={\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/items')}\n            className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n          >\n            <ArrowLeft className=\"h-4 w-4\" /> Back\n          </button>\n          <AddToLookbookButton styleItemId={item.id} />\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/items/${item.id}/edit`)}\n            className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n          >\n            <Pencil className=\"h-4 w-4\" /> Edit\n          </button>\n          {!isArchived && (\n            <button\n              type=\"button\"\n              disabled={archive.isPending}\n              onClick={() => archive.mutate(item.id, { onSuccess: () => navigateTo('/items') })}\n              className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50\"\n            >\n              {archive.isPending ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Archive className=\"h-4 w-4\" />\n              )}\n              Archive\n            </button>\n          )}\n        </div>\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n        {/* Product image */}\n        <div className=\"lg:col-span-2\">\n          <GlassCard treatment=\"glass\" className=\"group overflow-hidden p-0\">\n            <Thumbnail\n              icon={categoryIcon(item.category, 48)}\n              seed={item.id}\n              fileId={item.image?.id}\n              alt={item.name}\n              className=\"aspect-[4/5] w-full\"\n            />\n            {item.description && (\n              <div className=\"p-6\">\n                <p className=\"text-sm leading-relaxed text-text-secondary\">{item.description}</p>\n              </div>\n            )}\n          </GlassCard>\n        </div>\n\n        {/* Product panel */}\n        <div className=\"space-y-4\">\n          <GlassCard treatment=\"glass\" className=\"space-y-5 p-6\">\n            <div>\n              <h2 className=\"text-2xl font-semibold leading-tight text-text-primary\">\n                {item.name}\n              </h2>\n              {item.brand && (\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo(`/brands/${item.brand?.id}`)}\n                  className=\"mt-1 inline-flex items-center gap-0.5 text-sm font-medium text-action-primary-bg hover:underline\"\n                >\n                  {item.brand.name}\n                  <ChevronRight className=\"h-3.5 w-3.5\" />\n                </button>\n              )}\n              <div className=\"mt-3 flex flex-wrap items-center justify-between gap-2\">\n                <p className=\"text-3xl font-bold text-text-primary tabular-nums\">\n                  {formatPrice(item.price, item.currency)}\n                  <span className=\"ml-2 text-base font-medium text-text-secondary\">\n                    {item.currency}\n                  </span>\n                </p>\n                <StatusBadge status={item.status} />\n              </div>\n            </div>\n\n            <div className=\"border-t border-border-seam\" />\n\n            {item.colours.length > 0 && (\n              <div>\n                <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Colours\n                </p>\n                <ColourSwatchRow colours={item.colours} max={12} />\n              </div>\n            )}\n\n            {item.sizes.length > 0 && (\n              <div>\n                <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Size\n                </p>\n                <div className=\"flex flex-wrap gap-2\">\n                  {item.sizes.map((size) => (\n                    <span\n                      key={size}\n                      className=\"inline-flex min-w-9 items-center justify-center rounded-full border border-border-seam px-3 py-1 text-sm font-medium text-text-primary\"\n                    >\n                      {size}\n                    </span>\n                  ))}\n                </div>\n              </div>\n            )}\n\n            {item.materials.length > 0 && (\n              <div>\n                <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Materials\n                </p>\n                <p className=\"text-sm text-text-primary\">{item.materials.join(', ')}</p>\n              </div>\n            )}\n\n            {item.tags.length > 0 && (\n              <div>\n                <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Tags\n                </p>\n                <TagList tags={item.tags} max={12} tone=\"accent\" />\n              </div>\n            )}\n          </GlassCard>\n\n          <GlassCard treatment=\"plain\" className=\"p-5\">\n            <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Details</h3>\n            <dl className=\"space-y-2 text-sm\">\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Category</dt>\n                <dd className=\"text-text-primary\">{titleCase(item.category)}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">SKU</dt>\n                <dd className=\"text-text-primary\">{item.sku ?? '—'}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Currency</dt>\n                <dd className=\"text-text-primary\">{item.currency}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Created</dt>\n                <dd className=\"text-text-primary\">\n                  {formatDate(item.createdAt, { hour: undefined, minute: undefined })}\n                </dd>\n              </div>\n            </dl>\n          </GlassCard>\n\n          {item.collection && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/collections/${item.collection?.id}`)}\n              className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n            >\n              <Thumbnail\n                icon={<Shapes className=\"h-5 w-5\" />}\n                seed={item.collection.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                  {item.collection.name}\n                </p>\n                <p className=\"truncate text-xs text-text-secondary\">View collection</p>\n              </div>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <section className=\"mt-8\">\n        <div className=\"mb-3 flex items-center justify-between gap-3\">\n          <h3 className=\"text-lg font-semibold text-text-primary\">Appears in looks</h3>\n          {appearsInLooks.length > 0 && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/looks')}\n              className=\"inline-flex items-center gap-1 text-sm font-medium text-action-primary-bg hover:underline\"\n            >\n              View all <ChevronRight className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </div>\n        {looksQuery.isLoading ? (\n          <div className=\"flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n            <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading referenced looks…\n          </div>\n        ) : appearsInLooks.length === 0 ? (\n          <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n            This piece has not been tagged in any looks yet.\n          </p>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n            {appearsInLooks.map((look) => (\n              <LookCard\n                key={look.id}\n                id={look.id}\n                title={look.title}\n                occasion={look.occasion}\n                imageFileId={look.image?.id}\n                likeCount={look.likeCount}\n                isLikedByMe={look.isLikedByMe}\n                isSavedByMe={look.isSavedByMe}\n                onOpen={() => navigateTo(`/looks/${look.id}`)}\n                showActions\n              />\n            ))}\n          </div>\n        )}\n      </section>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"StyleItemDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"sourcesContent":["/**\n * Style Item Detail Page\n * @module coolandlovely/pages/items\n *\n * Renders a single catalogue piece (`cooStyleItem`) with edit + archive\n * (`cooArchiveStyleItem`) actions.\n */\n\nimport { useParams, useSearchParams } from 'react-router';\nimport { ArrowLeft, Pencil, Archive, Loader2, ChevronRight, Shapes } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { LookCard } from '../../components/LookCard';\nimport { TagList } from '../../components/TagList';\nimport { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { AddToLookbookButton } from '../../components/AddToLookbookButton';\nimport { AddToCartPanel } from '../../components/AddToCartPanel';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n  useAssistantEntityName,\n  useStyleItem,\n  useArchiveStyleItem,\n  useLooksWithItems,\n} from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function StyleItemDetailPage() {\n  const { itemId } = useParams<{ itemId: string }>();\n  // \"Shop the look\" links carry the look id so the look's creator earns the commission.\n  const [searchParams] = useSearchParams();\n  const fromLookId = searchParams.get('look');\n  const { navigateTo } = useCoolAndLovely();\n  const query = useStyleItem(itemId);\n  const looksQuery = useLooksWithItems({ pagination: { limit: 100, offset: 0 } });\n  const archive = useArchiveStyleItem();\n  // Name the piece for the assistant's screen context (see useAssistantEntity).\n  useAssistantEntityName(itemId, query.data?.name);\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Style item\">\n        <LoadingView label=\"Loading item…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError || !query.data) {\n    return (\n      <PageLayout title=\"Style item\">\n        <ErrorView title=\"Item not found\" onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  const item = query.data;\n  const isArchived = item.status === 'RETIRED';\n  const appearsInLooks = (looksQuery.data?.items ?? [])\n    .filter((look) => look.items?.some((lookItem) => lookItem.styleItemId === item.id))\n    .slice(0, 4);\n\n  return (\n    <PageLayout\n      title={item.name}\n      description={item.brand?.name ?? undefined}\n      actions={\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/items')}\n            className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n          >\n            <ArrowLeft className=\"h-4 w-4\" /> Back\n          </button>\n          <AddToLookbookButton styleItemId={item.id} />\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/items/${item.id}/edit`)}\n            className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n          >\n            <Pencil className=\"h-4 w-4\" /> Edit\n          </button>\n          {!isArchived && (\n            <button\n              type=\"button\"\n              disabled={archive.isPending}\n              onClick={() => archive.mutate(item.id, { onSuccess: () => navigateTo('/items') })}\n              className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50\"\n            >\n              {archive.isPending ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Archive className=\"h-4 w-4\" />\n              )}\n              Archive\n            </button>\n          )}\n        </div>\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n        {/* Product image */}\n        <div className=\"lg:col-span-2\">\n          <GlassCard treatment=\"glass\" className=\"group overflow-hidden p-0\">\n            <Thumbnail\n              icon={categoryIcon(item.category, 48)}\n              seed={item.id}\n              fileId={item.image?.id}\n              alt={item.name}\n              className=\"aspect-[4/5] w-full\"\n            />\n            {item.description && (\n              <div className=\"p-6\">\n                <p className=\"text-sm leading-relaxed text-text-secondary\">{item.description}</p>\n              </div>\n            )}\n          </GlassCard>\n        </div>\n\n        {/* Product panel */}\n        <div className=\"space-y-4\">\n          <GlassCard treatment=\"glass\" className=\"space-y-5 p-6\">\n            <div>\n              <h2 className=\"text-2xl font-semibold leading-tight text-text-primary\">\n                {item.name}\n              </h2>\n              {item.brand && (\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo(`/brands/${item.brand?.id}`)}\n                  className=\"mt-1 inline-flex items-center gap-0.5 text-sm font-medium text-action-primary-bg hover:underline\"\n                >\n                  {item.brand.name}\n                  <ChevronRight className=\"h-3.5 w-3.5\" />\n                </button>\n              )}\n              <div className=\"mt-3 flex flex-wrap items-center justify-between gap-2\">\n                <p className=\"text-3xl font-bold text-text-primary tabular-nums\">\n                  {formatPrice(item.price, item.currency)}\n                  <span className=\"ml-2 text-base font-medium text-text-secondary\">\n                    {item.currency}\n                  </span>\n                </p>\n                <StatusBadge status={item.status} />\n              </div>\n            </div>\n\n            <div className=\"border-t border-border-seam\" />\n\n            {item.colours.length > 0 && (\n              <div>\n                <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Colours\n                </p>\n                <ColourSwatchRow colours={item.colours} max={12} />\n              </div>\n            )}\n\n            {item.sizes.length > 0 && (\n              <div>\n                <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Size\n                </p>\n                <div className=\"flex flex-wrap gap-2\">\n                  {item.sizes.map((size) => (\n                    <span\n                      key={size}\n                      className=\"inline-flex min-w-9 items-center justify-center rounded-full border border-border-seam px-3 py-1 text-sm font-medium text-text-primary\"\n                    >\n                      {size}\n                    </span>\n                  ))}\n                </div>\n              </div>\n            )}\n\n            <div className=\"border-t border-border-seam pt-5\">\n              <AddToCartPanel item={item} lookId={fromLookId} />\n            </div>\n\n            {item.materials.length > 0 && (\n              <div>\n                <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Materials\n                </p>\n                <p className=\"text-sm text-text-primary\">{item.materials.join(', ')}</p>\n              </div>\n            )}\n\n            {item.tags.length > 0 && (\n              <div>\n                <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  Tags\n                </p>\n                <TagList tags={item.tags} max={12} tone=\"accent\" />\n              </div>\n            )}\n          </GlassCard>\n\n          <GlassCard treatment=\"plain\" className=\"p-5\">\n            <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Details</h3>\n            <dl className=\"space-y-2 text-sm\">\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Category</dt>\n                <dd className=\"text-text-primary\">{titleCase(item.category)}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">SKU</dt>\n                <dd className=\"text-text-primary\">{item.sku ?? '—'}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Currency</dt>\n                <dd className=\"text-text-primary\">{item.currency}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Created</dt>\n                <dd className=\"text-text-primary\">\n                  {formatDate(item.createdAt, { hour: undefined, minute: undefined })}\n                </dd>\n              </div>\n            </dl>\n          </GlassCard>\n\n          {item.collection && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/collections/${item.collection?.id}`)}\n              className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n            >\n              <Thumbnail\n                icon={<Shapes className=\"h-5 w-5\" />}\n                seed={item.collection.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                  {item.collection.name}\n                </p>\n                <p className=\"truncate text-xs text-text-secondary\">View collection</p>\n              </div>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <section className=\"mt-8\">\n        <div className=\"mb-3 flex items-center justify-between gap-3\">\n          <h3 className=\"text-lg font-semibold text-text-primary\">Appears in looks</h3>\n          {appearsInLooks.length > 0 && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/looks')}\n              className=\"inline-flex items-center gap-1 text-sm font-medium text-action-primary-bg hover:underline\"\n            >\n              View all <ChevronRight className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </div>\n        {looksQuery.isLoading ? (\n          <div className=\"flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n            <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading referenced looks…\n          </div>\n        ) : appearsInLooks.length === 0 ? (\n          <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n            This piece has not been tagged in any looks yet.\n          </p>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n            {appearsInLooks.map((look) => (\n              <LookCard\n                key={look.id}\n                id={look.id}\n                title={look.title}\n                occasion={look.occasion}\n                imageFileId={look.image?.id}\n                likeCount={look.likeCount}\n                isLikedByMe={look.isLikedByMe}\n                isSavedByMe={look.isSavedByMe}\n                onOpen={() => navigateTo(`/looks/${look.id}`)}\n                showActions\n              />\n            ))}\n          </div>\n        )}\n      </section>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

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

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

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

@@ -1 +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, a true-toggle like\n * (`cooLikeLook` / `cooUnlikeLook`), a true-toggle save (`cooSaveLook` /\n * `cooUnsaveLook`), publish (`cooPublishLook`) and delete (`cooDeleteLook`)\n * actions.\n */\n\nimport { useMemo, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { ArrowLeft, Heart, Bookmark, Rocket, Trash2, Loader2, Sparkles, Star } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { useActorProfiles, type ActorInput } from '@burdenoff/fe-libs/shared';\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 { Comments } from '../../components/Comments';\nimport { FollowButton } from '../../components/FollowButton';\nimport { AddToLookbookButton } from '../../components/AddToLookbookButton';\nimport { ShopItemCard } from '../../components/ShopItemCard';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n  useLook,\n  useLikeLook,\n  useUnlikeLook,\n  useSaveLook,\n  useUnsaveLook,\n  usePublishLook,\n  useDeleteLook,\n  useUpdateLook,\n  useAssistantEntityName,\n} from '../../hooks';\nimport { formatDate, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\n\n/** Compute up-to-two-letter initials for the avatar fallback. */\nfunction initials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '?';\n  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\n/**\n * Author chip — avatar + display name resolved via fe-libs `useActorProfiles`\n * on the GLOBAL gateway (never select firstName on a federated wspace User).\n * Clicking it opens the author's public style profile (`/profile/:userId`).\n */\nfunction LookAuthor({ authorId }: { authorId: string }) {\n  const { apiGatewayUrl, authToken, workspaceId, navigateTo } = useCoolAndLovely();\n  const [avatarFailed, setAvatarFailed] = useState(false);\n  const actors = useMemo<ActorInput[]>(\n    () => [{ actorId: authorId, actorType: 'user' }],\n    [authorId]\n  );\n  const profiles = useActorProfiles(actors, { apiGatewayUrl, authToken, workspaceId });\n  const profile = profiles[authorId];\n  const name = profile?.displayName ?? 'Creator';\n  const avatarUrl = profile?.avatarUrl;\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => navigateTo(`/profile/${authorId}`)}\n      className=\"inline-flex items-center gap-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n    >\n      <span\n        title={name}\n        className=\"relative flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-bg-sunken ring-1 ring-border-seam\"\n      >\n        {avatarUrl && !avatarFailed ? (\n          <img\n            src={avatarUrl}\n            alt={name}\n            loading=\"lazy\"\n            onError={() => setAvatarFailed(true)}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <span className=\"text-[10px] font-semibold text-text-secondary\">{initials(name)}</span>\n        )}\n      </span>\n      <span\n        className=\"font-medium text-text-primary hover:underline\"\n        title={profile?.email ?? authorId}\n      >\n        {name}\n      </span>\n    </button>\n  );\n}\n\nexport function LookDetailPage() {\n  const { lookId } = useParams<{ lookId: string }>();\n  const { navigateTo, currentUser } = useCoolAndLovely();\n  const query = useLook(lookId);\n  const like = useLikeLook();\n  const unlike = useUnlikeLook();\n  const save = useSaveLook();\n  const unsave = useUnsaveLook();\n  const publish = usePublishLook();\n  const remove = useDeleteLook();\n  const update = useUpdateLook();\n  // Name the look for the assistant's screen context.\n  useAssistantEntityName(lookId, query.data?.title);\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  const isOwnLook = Boolean(currentUser?.id && currentUser.id === look.authorId);\n\n  return (\n    <PageLayout\n      title={look.title}\n      description={titleCase(look.occasion)}\n      actions={\n        <div className=\"flex flex-wrap 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          <AddToLookbookButton lookId={look.id} />\n          <button\n            type=\"button\"\n            disabled={update.isPending}\n            onClick={() => update.mutate({ id: look.id, input: { isFeatured: !look.isFeatured } })}\n            aria-pressed={look.isFeatured}\n            className={cn(\n              'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n              look.isFeatured\n                ? 'border-status-warning-text/40 bg-status-warning-bg-subtle text-status-warning-text'\n                : 'border-border-seam text-text-primary hover:bg-bg-sunken'\n            )}\n          >\n            {update.isPending ? (\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n            ) : (\n              <Star className={cn('h-4 w-4', look.isFeatured && 'fill-status-warning-text')} />\n            )}\n            {look.isFeatured ? 'Featured' : 'Feature'}\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=\"group overflow-hidden p-0\">\n            <Thumbnail\n              icon={<Sparkles className=\"h-14 w-14\" />}\n              seed={look.id}\n              fileId={look.image?.id}\n              alt={look.title}\n              className=\"aspect-[4/5] max-h-[38rem] w-full rounded-none\"\n            />\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-4 flex flex-wrap items-center gap-3 text-sm text-text-secondary\">\n                <LookAuthor authorId={look.authorId} />\n                {!isOwnLook && <FollowButton followeeId={look.authorId} size=\"sm\" />}\n              </div>\n\n              <div className=\"mt-5 flex items-center gap-3\">\n                <button\n                  type=\"button\"\n                  disabled={like.isPending || unlike.isPending}\n                  aria-pressed={Boolean(look.isLikedByMe)}\n                  onClick={() => (look.isLikedByMe ? unlike : like).mutate(look.id)}\n                  className={cn(\n                    'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n                    look.isLikedByMe\n                      ? 'border-status-error-text/40 bg-status-error-bg-subtle text-status-error-text'\n                      : 'border-border-seam text-text-primary hover:bg-status-error-bg-subtle'\n                  )}\n                >\n                  {like.isPending || unlike.isPending ? (\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                  ) : (\n                    <Heart className={cn('h-4 w-4', look.isLikedByMe && 'fill-current')} />\n                  )}\n                  {look.isLikedByMe ? 'Liked' : 'Like'} · {look.likeCount}\n                </button>\n                <button\n                  type=\"button\"\n                  disabled={save.isPending || unsave.isPending}\n                  aria-pressed={Boolean(look.isSavedByMe)}\n                  onClick={() => (look.isSavedByMe ? unsave : save).mutate(look.id)}\n                  className={cn(\n                    'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n                    look.isSavedByMe\n                      ? 'border-accent-primary/40 bg-accent-primary/10 text-accent-primary'\n                      : 'border-border-seam text-text-secondary hover:bg-bg-sunken'\n                  )}\n                >\n                  {save.isPending || unsave.isPending ? (\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                  ) : (\n                    <Bookmark className={cn('h-4 w-4', look.isSavedByMe && 'fill-current')} />\n                  )}\n                  {look.isSavedByMe ? 'Saved' : 'Save'} · {look.saveCount}\n                </button>\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=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n                {[...items]\n                  .sort((a, b) => a.position - b.position)\n                  .map((li) =>\n                    li.styleItem ? (\n                      <ShopItemCard\n                        key={li.id}\n                        id={li.styleItem.id}\n                        name={li.styleItem.name}\n                        brandName={li.styleItem.brand?.name}\n                        price={li.styleItem.price}\n                        currency={li.styleItem.currency}\n                        imageFileId={li.styleItem.image?.id}\n                        onOpen={() => navigateTo(`/items/${li.styleItem?.id}`)}\n                      />\n                    ) : (\n                      <div\n                        key={li.id}\n                        className=\"flex flex-col justify-center rounded-xl border border-border-seam bg-bg-surface p-4\"\n                      >\n                        <p className=\"truncate text-sm font-medium text-text-primary\">\n                          Catalogue piece\n                        </p>\n                        {li.styling && (\n                          <p className=\"mt-0.5 truncate text-xs text-text-secondary\">\n                            {li.styling}\n                          </p>\n                        )}\n                      </div>\n                    )\n                  )}\n              </div>\n            )}\n          </section>\n\n          <Comments entityType=\"CooLook\" entityId={look.id} />\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\">\n                  Part of a collaboration\n                </p>\n                <p className=\"truncate text-xs text-text-secondary\">View collaboration</p>\n              </div>\n            </button>\n          )}\n\n          {(publish.isError ||\n            remove.isError ||\n            like.isError ||\n            unlike.isError ||\n            save.isError ||\n            unsave.isError) && (\n            <p className=\"rounded-lg bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text\">\n              {(publish.error ??\n                remove.error ??\n                like.error ??\n                unlike.error ??\n                save.error ??\n                unsave.error) instanceof Error\n                ? (\n                    publish.error ??\n                    remove.error ??\n                    like.error ??\n                    unlike.error ??\n                    save.error ??\n                    unsave.error\n                  )?.message\n                : 'Action failed'}\n            </p>\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"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, a true-toggle like\n * (`cooLikeLook` / `cooUnlikeLook`), a true-toggle save (`cooSaveLook` /\n * `cooUnsaveLook`), publish (`cooPublishLook`) and delete (`cooDeleteLook`)\n * actions.\n */\n\nimport { useMemo, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { ArrowLeft, Heart, Bookmark, Rocket, Trash2, Loader2, Sparkles, Star } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { useActorProfiles, type ActorInput } from '@burdenoff/fe-libs/shared';\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 { Comments } from '../../components/Comments';\nimport { FollowButton } from '../../components/FollowButton';\nimport { AddToLookbookButton } from '../../components/AddToLookbookButton';\nimport { ShopItemCard } from '../../components/ShopItemCard';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n  useLook,\n  useLikeLook,\n  useUnlikeLook,\n  useSaveLook,\n  useUnsaveLook,\n  usePublishLook,\n  useDeleteLook,\n  useUpdateLook,\n  useAssistantEntityName,\n} from '../../hooks';\nimport { formatDate, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\n\n/** Compute up-to-two-letter initials for the avatar fallback. */\nfunction initials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '?';\n  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\n/**\n * Author chip — avatar + display name resolved via fe-libs `useActorProfiles`\n * on the GLOBAL gateway (never select firstName on a federated wspace User).\n * Clicking it opens the author's public style profile (`/profile/:userId`).\n */\nfunction LookAuthor({ authorId }: { authorId: string }) {\n  const { apiGatewayUrl, authToken, workspaceId, navigateTo } = useCoolAndLovely();\n  const [avatarFailed, setAvatarFailed] = useState(false);\n  const actors = useMemo<ActorInput[]>(\n    () => [{ actorId: authorId, actorType: 'user' }],\n    [authorId]\n  );\n  const profiles = useActorProfiles(actors, { apiGatewayUrl, authToken, workspaceId });\n  const profile = profiles[authorId];\n  const name = profile?.displayName ?? 'Creator';\n  const avatarUrl = profile?.avatarUrl;\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => navigateTo(`/profile/${authorId}`)}\n      className=\"inline-flex items-center gap-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n    >\n      <span\n        title={name}\n        className=\"relative flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-bg-sunken ring-1 ring-border-seam\"\n      >\n        {avatarUrl && !avatarFailed ? (\n          <img\n            src={avatarUrl}\n            alt={name}\n            loading=\"lazy\"\n            onError={() => setAvatarFailed(true)}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <span className=\"text-[10px] font-semibold text-text-secondary\">{initials(name)}</span>\n        )}\n      </span>\n      <span\n        className=\"font-medium text-text-primary hover:underline\"\n        title={profile?.email ?? authorId}\n      >\n        {name}\n      </span>\n    </button>\n  );\n}\n\nexport function LookDetailPage() {\n  const { lookId } = useParams<{ lookId: string }>();\n  const { navigateTo, currentUser } = useCoolAndLovely();\n  const query = useLook(lookId);\n  const like = useLikeLook();\n  const unlike = useUnlikeLook();\n  const save = useSaveLook();\n  const unsave = useUnsaveLook();\n  const publish = usePublishLook();\n  const remove = useDeleteLook();\n  const update = useUpdateLook();\n  // Name the look for the assistant's screen context.\n  useAssistantEntityName(lookId, query.data?.title);\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  const isOwnLook = Boolean(currentUser?.id && currentUser.id === look.authorId);\n\n  return (\n    <PageLayout\n      title={look.title}\n      description={titleCase(look.occasion)}\n      actions={\n        <div className=\"flex flex-wrap 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          <AddToLookbookButton lookId={look.id} />\n          <button\n            type=\"button\"\n            disabled={update.isPending}\n            onClick={() => update.mutate({ id: look.id, input: { isFeatured: !look.isFeatured } })}\n            aria-pressed={look.isFeatured}\n            className={cn(\n              'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n              look.isFeatured\n                ? 'border-status-warning-text/40 bg-status-warning-bg-subtle text-status-warning-text'\n                : 'border-border-seam text-text-primary hover:bg-bg-sunken'\n            )}\n          >\n            {update.isPending ? (\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n            ) : (\n              <Star className={cn('h-4 w-4', look.isFeatured && 'fill-status-warning-text')} />\n            )}\n            {look.isFeatured ? 'Featured' : 'Feature'}\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=\"group overflow-hidden p-0\">\n            <Thumbnail\n              icon={<Sparkles className=\"h-14 w-14\" />}\n              seed={look.id}\n              fileId={look.image?.id}\n              alt={look.title}\n              className=\"aspect-[4/5] max-h-[38rem] w-full rounded-none\"\n            />\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-4 flex flex-wrap items-center gap-3 text-sm text-text-secondary\">\n                <LookAuthor authorId={look.authorId} />\n                {!isOwnLook && <FollowButton followeeId={look.authorId} size=\"sm\" />}\n              </div>\n\n              <div className=\"mt-5 flex items-center gap-3\">\n                <button\n                  type=\"button\"\n                  disabled={like.isPending || unlike.isPending}\n                  aria-pressed={Boolean(look.isLikedByMe)}\n                  onClick={() => (look.isLikedByMe ? unlike : like).mutate(look.id)}\n                  className={cn(\n                    'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n                    look.isLikedByMe\n                      ? 'border-status-error-text/40 bg-status-error-bg-subtle text-status-error-text'\n                      : 'border-border-seam text-text-primary hover:bg-status-error-bg-subtle'\n                  )}\n                >\n                  {like.isPending || unlike.isPending ? (\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                  ) : (\n                    <Heart className={cn('h-4 w-4', look.isLikedByMe && 'fill-current')} />\n                  )}\n                  {look.isLikedByMe ? 'Liked' : 'Like'} · {look.likeCount}\n                </button>\n                <button\n                  type=\"button\"\n                  disabled={save.isPending || unsave.isPending}\n                  aria-pressed={Boolean(look.isSavedByMe)}\n                  onClick={() => (look.isSavedByMe ? unsave : save).mutate(look.id)}\n                  className={cn(\n                    'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50',\n                    look.isSavedByMe\n                      ? 'border-accent-primary/40 bg-accent-primary/10 text-accent-primary'\n                      : 'border-border-seam text-text-secondary hover:bg-bg-sunken'\n                  )}\n                >\n                  {save.isPending || unsave.isPending ? (\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                  ) : (\n                    <Bookmark className={cn('h-4 w-4', look.isSavedByMe && 'fill-current')} />\n                  )}\n                  {look.isSavedByMe ? 'Saved' : 'Save'} · {look.saveCount}\n                </button>\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=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n                {[...items]\n                  .sort((a, b) => a.position - b.position)\n                  .map((li) =>\n                    li.styleItem ? (\n                      <ShopItemCard\n                        key={li.id}\n                        id={li.styleItem.id}\n                        name={li.styleItem.name}\n                        brandName={li.styleItem.brand?.name}\n                        price={li.styleItem.price}\n                        currency={li.styleItem.currency}\n                        imageFileId={li.styleItem.image?.id}\n                        onOpen={() => navigateTo(`/items/${li.styleItem?.id}?look=${look.id}`)}\n                      />\n                    ) : (\n                      <div\n                        key={li.id}\n                        className=\"flex flex-col justify-center rounded-xl border border-border-seam bg-bg-surface p-4\"\n                      >\n                        <p className=\"truncate text-sm font-medium text-text-primary\">\n                          Catalogue piece\n                        </p>\n                        {li.styling && (\n                          <p className=\"mt-0.5 truncate text-xs text-text-secondary\">\n                            {li.styling}\n                          </p>\n                        )}\n                      </div>\n                    )\n                  )}\n              </div>\n            )}\n          </section>\n\n          <Comments entityType=\"CooLook\" entityId={look.id} />\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\">\n                  Part of a collaboration\n                </p>\n                <p className=\"truncate text-xs text-text-secondary\">View collaboration</p>\n              </div>\n            </button>\n          )}\n\n          {(publish.isError ||\n            remove.isError ||\n            like.isError ||\n            unlike.isError ||\n            save.isError ||\n            unsave.isError) && (\n            <p className=\"rounded-lg bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text\">\n              {(publish.error ??\n                remove.error ??\n                like.error ??\n                unlike.error ??\n                save.error ??\n                unsave.error) instanceof Error\n                ? (\n                    publish.error ??\n                    remove.error ??\n                    like.error ??\n                    unlike.error ??\n                    save.error ??\n                    unsave.error\n                  )?.message\n                : 'Action failed'}\n            </p>\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}