npm - @burdenoff/microfe-coolandlovely - Versions diffs - 2026.706.1 → 2026.706.3 - Mend

@burdenoff/microfe-coolandlovely 2026.706.1 → 2026.706.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

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

@@ -1,202 +1,264 @@
 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 { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { StatusBadge as r } from "../../components/StatusBadge.js";
+import { ErrorView as i, LoadingView as a } from "../../components/StateViews.js";
+import { Thumbnail as o } from "../../components/Thumbnail.js";
+import { useDeleteLook as s, useLikeLook as c, useLook as l, usePublishLook as u, useUpdateLook as d } from "../../hooks/useCoolAndLovelyApi.js";
+import { AddToLookbookButton as f } from "../../components/AddToLookbookButton.js";
+import { formatDate as p, titleCase as m } from "../../utils/formatters.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";
+import { TagList as h } from "../../components/TagList.js";
+import { Comments as g } from "../../components/Comments.js";
+import { FollowButton as _ } from "../../components/FollowButton.js";
+import { ShopItemCard as v } from "../../components/ShopItemCard.js";
+import { useMemo as y, useState as b } from "react";
+import { ArrowLeft as x, Bookmark as S, Heart as C, Loader2 as w, Rocket as T, Sparkles as E, Star as D, Trash2 as O } from "lucide-react";
+import { useParams as k } from "react-router-dom";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
+import { GlassCard as M } from "@burdenoff/fe-libs/ui";
+import { useActorProfiles as N } from "@burdenoff/fe-libs/shared";
 //#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, {
+function P(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	return t.length === 0 ? "?" : t.length === 1 ? t[0].slice(0, 2).toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
+}
+function F({ authorId: t }) {
+	let { apiGatewayUrl: n, authToken: r, workspaceId: i } = e(), [a, o] = b(!1), s = N(y(() => [{
+		actorId: t,
+		actorType: "user"
+	}], [t]), {
+		apiGatewayUrl: n,
+		authToken: r,
+		workspaceId: i
+	})[t], c = s?.displayName ?? "Creator", l = s?.avatarUrl;
+	return /* @__PURE__ */ j("span", {
+		className: "inline-flex items-center gap-2",
+		children: [/* @__PURE__ */ A("span", {
+			title: c,
+			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",
+			children: l && !a ? /* @__PURE__ */ A("img", {
+				src: l,
+				alt: c,
+				loading: "lazy",
+				onError: () => o(!0),
+				className: "h-full w-full object-cover"
+			}) : /* @__PURE__ */ A("span", {
+				className: "text-[10px] font-semibold text-text-secondary",
+				children: P(c)
+			})
+		}), /* @__PURE__ */ A("span", {
+			className: "font-medium text-text-primary",
+			title: s?.email ?? t,
+			children: c
+		})]
+	});
+}
+function I() {
+	let { lookId: y } = k(), { navigateTo: b, currentUser: N } = e(), P = l(y), I = c(), L = u(), R = s(), z = d();
+	if (P.isLoading) return /* @__PURE__ */ A(n, {
 		title: "Look",
-		children: /* @__PURE__ */ C(i, { label: "Loading look…" })
+		children: /* @__PURE__ */ A(a, { label: "Loading look…" })
 	});
-	if (O.isError || !O.data) return /* @__PURE__ */ C(t, {
+	if (P.isError || !P.data) return /* @__PURE__ */ A(n, {
 		title: "Look",
-		children: /* @__PURE__ */ C(r, {
+		children: /* @__PURE__ */ A(i, {
 			title: "Look not found",
-			onRetry: () => void O.refetch()
+			onRetry: () => void P.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",
+	let B = P.data, V = B.items ?? [], H = B.publishedAt !== null, U = !!(N?.id && N.id === B.authorId);
+	return /* @__PURE__ */ A(n, {
+		title: B.title,
+		description: m(B.occasion),
+		actions: /* @__PURE__ */ j("div", {
+			className: "flex flex-wrap items-center gap-2",
 			children: [
-				/* @__PURE__ */ w("button", {
+				/* @__PURE__ */ j("button", {
 					type: "button",
-					onClick: () => D("/looks"),
+					onClick: () => b("/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"]
+					children: [/* @__PURE__ */ A(x, { className: "h-4 w-4" }), " Back"]
+				}),
+				/* @__PURE__ */ A(f, { lookId: B.id }),
+				/* @__PURE__ */ j("button", {
+					type: "button",
+					disabled: z.isPending,
+					onClick: () => z.mutate({
+						id: B.id,
+						input: { isFeatured: !B.isFeatured }
+					}),
+					"aria-pressed": B.isFeatured,
+					className: t("inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50", B.isFeatured ? "border-status-warning-text/40 bg-status-warning-bg-subtle text-status-warning-text" : "border-border-seam text-text-primary hover:bg-bg-sunken"),
+					children: [z.isPending ? /* @__PURE__ */ A(w, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ A(D, { className: t("h-4 w-4", B.isFeatured && "fill-status-warning-text") }), B.isFeatured ? "Featured" : "Feature"]
 				}),
-				!P && /* @__PURE__ */ w("button", {
+				!H && /* @__PURE__ */ j("button", {
 					type: "button",
-					disabled: A.isPending,
-					onClick: () => A.mutate(M.id),
+					disabled: L.isPending,
+					onClick: () => L.mutate(B.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"]
+					children: [L.isPending ? /* @__PURE__ */ A(w, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ A(T, { className: "h-4 w-4" }), "Publish"]
 				}),
-				/* @__PURE__ */ w("button", {
+				/* @__PURE__ */ j("button", {
 					type: "button",
-					disabled: j.isPending,
-					onClick: () => j.mutate(M.id, { onSuccess: () => D("/looks") }),
+					disabled: R.isPending,
+					onClick: () => R.mutate(B.id, { onSuccess: () => b("/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: [R.isPending ? /* @__PURE__ */ A(w, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ A(O, { className: "h-4 w-4" }), "Delete"]
 				})
 			]
 		}),
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ j("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
-			children: [/* @__PURE__ */ w("div", {
+			children: [/* @__PURE__ */ j("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__ */ j(M, {
+						treatment: "glass",
+						className: "group overflow-hidden p-0",
+						children: [/* @__PURE__ */ A(o, {
+							icon: /* @__PURE__ */ A(E, { className: "h-14 w-14" }),
+							seed: B.id,
+							fileId: B.image?.id,
+							alt: B.title,
+							className: "aspect-[4/5] max-h-[38rem] w-full rounded-none"
+						}), /* @__PURE__ */ j("div", {
+							className: "p-6",
+							children: [
+								/* @__PURE__ */ j("div", {
+									className: "flex items-center gap-2",
 									children: [
-										/* @__PURE__ */ C(h, { className: "h-4 w-4" }),
-										" ",
-										M.saveCount,
-										" saves"
+										/* @__PURE__ */ A("h2", {
+											className: "text-xl font-semibold text-text-primary",
+											children: B.title
+										}),
+										B.isFeatured && /* @__PURE__ */ A(D, { className: "h-4 w-4 fill-status-warning-text text-status-warning-text" }),
+										/* @__PURE__ */ A(r, {
+											status: H ? "published" : "draft",
+											className: "ml-auto"
+										})
 									]
-								})]
-							})
-						]
-					})]
-				}), /* @__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
+								B.caption && /* @__PURE__ */ A("p", {
+									className: "mt-3 text-sm text-text-secondary",
+									children: B.caption
+								}),
+								B.tags.length > 0 && /* @__PURE__ */ A(h, {
+									tags: B.tags,
+									className: "mt-4",
+									tone: "accent"
+								}),
+								/* @__PURE__ */ j("div", {
+									className: "mt-4 flex flex-wrap items-center gap-3 text-sm text-text-secondary",
+									children: [/* @__PURE__ */ A(F, { authorId: B.authorId }), !U && /* @__PURE__ */ A(_, {
+										followeeId: B.authorId,
+										size: "sm"
 									})]
 								}),
-								e.styleItem && /* @__PURE__ */ C("span", {
-									className: "shrink-0 text-sm font-semibold text-text-primary",
-									children: d(e.styleItem.price, e.styleItem.currency)
+								/* @__PURE__ */ j("div", {
+									className: "mt-5 flex items-center gap-3",
+									children: [/* @__PURE__ */ j("button", {
+										type: "button",
+										disabled: I.isPending,
+										onClick: () => I.mutate(B.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: [
+											I.isPending ? /* @__PURE__ */ A(w, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ A(C, { className: "h-4 w-4" }),
+											"Like · ",
+											B.likeCount
+										]
+									}), /* @__PURE__ */ j("span", {
+										className: "inline-flex items-center gap-1.5 text-sm text-text-secondary",
+										children: [
+											/* @__PURE__ */ A(S, { className: "h-4 w-4" }),
+											" ",
+											B.saveCount,
+											" saves"
+										]
+									})]
 								})
 							]
-						}, e.id))
-					})]
-				})]
-			}), /* @__PURE__ */ w("div", {
+						})]
+					}),
+					/* @__PURE__ */ j("section", {
+						className: "mt-6",
+						children: [/* @__PURE__ */ j("h3", {
+							className: "mb-3 text-lg font-semibold text-text-primary",
+							children: [
+								"Shop the look (",
+								V.length,
+								")"
+							]
+						}), V.length === 0 ? /* @__PURE__ */ A("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__ */ A("div", {
+							className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+							children: [...V].sort((e, t) => e.position - t.position).map((e) => e.styleItem ? /* @__PURE__ */ A(v, {
+								id: e.styleItem.id,
+								name: e.styleItem.name,
+								brandName: e.styleItem.brand?.name,
+								price: e.styleItem.price,
+								currency: e.styleItem.currency,
+								imageFileId: e.styleItem.image?.id,
+								onOpen: () => b(`/items/${e.styleItem?.id}`)
+							}, e.id) : /* @__PURE__ */ j("div", {
+								className: "flex flex-col justify-center rounded-xl border border-border-seam bg-bg-surface p-4",
+								children: [/* @__PURE__ */ A("p", {
+									className: "truncate text-sm font-medium text-text-primary",
+									children: "Catalogue piece"
+								}), e.styling && /* @__PURE__ */ A("p", {
+									className: "mt-0.5 truncate text-xs text-text-secondary",
+									children: e.styling
+								})]
+							}, e.id))
+						})]
+					}),
+					/* @__PURE__ */ A(g, {
+						entityType: "CooLook",
+						entityId: B.id
+					})
+				]
+			}), /* @__PURE__ */ j("div", {
 				className: "space-y-4",
 				children: [
-					/* @__PURE__ */ w(T, {
+					/* @__PURE__ */ j(M, {
 						treatment: "plain",
 						className: "p-5",
-						children: [/* @__PURE__ */ C("h3", {
+						children: [/* @__PURE__ */ A("h3", {
 							className: "mb-3 text-sm font-semibold text-text-primary",
 							children: "Details"
-						}), /* @__PURE__ */ w("dl", {
+						}), /* @__PURE__ */ j("dl", {
 							className: "space-y-2 text-sm",
 							children: [
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ j("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ C("dt", {
+									children: [/* @__PURE__ */ A("dt", {
 										className: "text-text-secondary",
 										children: "Occasion"
-									}), /* @__PURE__ */ C("dd", {
+									}), /* @__PURE__ */ A("dd", {
 										className: "text-text-primary",
-										children: f(M.occasion)
+										children: m(B.occasion)
 									})]
 								}),
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ j("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ C("dt", {
+									children: [/* @__PURE__ */ A("dt", {
 										className: "text-text-secondary",
 										children: "Visibility"
-									}), /* @__PURE__ */ C("dd", {
+									}), /* @__PURE__ */ A("dd", {
 										className: "text-text-primary",
-										children: f(M.visibility)
+										children: m(B.visibility)
 									})]
 								}),
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ j("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ C("dt", {
+									children: [/* @__PURE__ */ A("dt", {
 										className: "text-text-secondary",
 										children: "Published"
-									}), /* @__PURE__ */ C("dd", {
+									}), /* @__PURE__ */ A("dd", {
 										className: "text-text-primary",
-										children: M.publishedAt ? u(M.publishedAt, {
+										children: B.publishedAt ? p(B.publishedAt, {
 											hour: void 0,
 											minute: void 0
 										}) : "—"
@@ -205,27 +267,27 @@ function E() {
 							]
 						})]
 					}),
-					M.collaborationId && /* @__PURE__ */ w("button", {
+					B.collaborationId && /* @__PURE__ */ j("button", {
 						type: "button",
-						onClick: () => D(`/collaborations/${M.collaborationId}`),
+						onClick: () => b(`/collaborations/${B.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", {
+						children: [/* @__PURE__ */ A("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", {
+							children: /* @__PURE__ */ A(E, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ j("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ C("p", {
+							children: [/* @__PURE__ */ A("p", {
 								className: "truncate text-sm font-medium text-text-primary",
 								children: "Part of a collaboration"
-							}), /* @__PURE__ */ C("p", {
+							}), /* @__PURE__ */ A("p", {
 								className: "truncate text-xs text-text-secondary",
 								children: "View collaboration"
 							})]
 						})]
 					}),
-					(A.isError || j.isError || k.isError) && /* @__PURE__ */ C("p", {
+					(L.isError || R.isError || I.isError) && /* @__PURE__ */ A("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"
+						children: (L.error ?? R.error ?? I.error) instanceof Error ? (L.error ?? R.error ?? I.error)?.message : "Action failed"
 					})
 				]
 			})]
@@ -233,6 +295,6 @@ function E() {
 	});
 }
 //#endregion
-export { E as LookDetailPage };
+export { I as LookDetailPage };
 //# sourceMappingURL=LookDetailPage.js.map

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

	@@ -1 +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, like (`cooLikeLook`), publish\n * (`cooPublishLook`) and delete (`cooDeleteLook`) actions.\n /\n\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, Heart, Bookmark, Rocket, Trash2, Loader2, Sparkles, Star } 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\n icon={<Sparkles className=\"h-14 w-14\" />}\n seed={look.id}\n className=\"h-60 w-full\"\n />\n <div className=\"p-6\">\n <div className=\"flex items-center gap-2\">\n <h2 className=\"text-xl font-semibold text-text-primary\">{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\n icon={<Sparkles className=\"h-5 w-5\" />}\n seed={li.id}\n className=\"h-11 w-11 shrink-0\"\n />\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\">\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 \|\| 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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"}
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 { useMemo, useState } from 'react';\nimport { useParams } from 'react-router-dom';\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 { useLook, useLikeLook, usePublishLook, useDeleteLook, useUpdateLook } 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 /\nfunction LookAuthor({ authorId }: { authorId: string }) {\n const { apiGatewayUrl, authToken, workspaceId } = 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 <span className=\"inline-flex items-center gap-2\">\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 className=\"font-medium text-text-primary\" title={profile?.email ?? authorId}>\n {name}\n </span>\n </span>\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 publish = usePublishLook();\n const remove = useDeleteLook();\n const update = useUpdateLook();\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}\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=\"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 \|\| 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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"}