@burdenoff/microfe-coolandlovely 2026.706.2 → 2026.710.1

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

@@ -5,46 +5,83 @@ 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 f, formatPrice as p, titleCase as m } from "../../utils/formatters.js";
 import { TagList as h } from "../../components/TagList.js";
-import { ActorName as g } from "../../components/ActorName.js";
-import { Comments as _ } from "../../components/Comments.js";
-import { AddToLookbookButton as v } from "../../components/AddToLookbookButton.js";
-import { FollowButton as y } from "../../components/FollowButton.js";
-import { ArrowLeft as b, Bookmark as x, Heart as S, Loader2 as C, Rocket as w, Sparkles as T, Star as E, Trash2 as D } from "lucide-react";
-import { useParams as O } from "react-router-dom";
-import { jsx as k, jsxs as A } from "react/jsx-runtime";
-import { GlassCard as j } from "@burdenoff/fe-libs/ui";
+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 M() {
-	let { lookId: M } = O(), { navigateTo: N, currentUser: P } = e(), F = l(M), I = c(), L = u(), R = s(), z = d();
-	if (F.isLoading) return /* @__PURE__ */ k(n, {
+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__ */ k(a, { label: "Loading look…" })
+		children: /* @__PURE__ */ A(a, { label: "Loading look…" })
 	});
-	if (F.isError || !F.data) return /* @__PURE__ */ k(n, {
+	if (P.isError || !P.data) return /* @__PURE__ */ A(n, {
 		title: "Look",
-		children: /* @__PURE__ */ k(i, {
+		children: /* @__PURE__ */ A(i, {
 			title: "Look not found",
-			onRetry: () => void F.refetch()
+			onRetry: () => void P.refetch()
 		})
 	});
-	let B = F.data, V = B.items ?? [], H = B.publishedAt !== null, U = !!(P?.id && P.id === B.authorId);
-	return /* @__PURE__ */ k(n, {
+	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__ */ A("div", {
+		actions: /* @__PURE__ */ j("div", {
 			className: "flex flex-wrap items-center gap-2",
 			children: [
-				/* @__PURE__ */ A("button", {
+				/* @__PURE__ */ j("button", {
 					type: "button",
-					onClick: () => N("/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__ */ k(b, { className: "h-4 w-4" }), " Back"]
+					children: [/* @__PURE__ */ A(x, { className: "h-4 w-4" }), " Back"]
 				}),
-				/* @__PURE__ */ k(v, { lookId: B.id }),
-				/* @__PURE__ */ A("button", {
+				/* @__PURE__ */ A(f, { lookId: B.id }),
+				/* @__PURE__ */ j("button", {
 					type: "button",
 					disabled: z.isPending,
 					onClick: () => z.mutate({
@@ -53,94 +90,87 @@ function M() {
 					}),
 					"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__ */ k(C, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ k(E, { className: t("h-4 w-4", B.isFeatured && "fill-status-warning-text") }), B.isFeatured ? "Featured" : "Feature"]
+					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"]
 				}),
-				!H && /* @__PURE__ */ A("button", {
+				!H && /* @__PURE__ */ j("button", {
 					type: "button",
 					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: [L.isPending ? /* @__PURE__ */ k(C, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ k(w, { 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__ */ A("button", {
+				/* @__PURE__ */ j("button", {
 					type: "button",
 					disabled: R.isPending,
-					onClick: () => R.mutate(B.id, { onSuccess: () => N("/looks") }),
+					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: [R.isPending ? /* @__PURE__ */ k(C, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ k(D, { 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__ */ A("div", {
+		children: /* @__PURE__ */ j("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
-			children: [/* @__PURE__ */ A("div", {
+			children: [/* @__PURE__ */ j("div", {
 				className: "lg:col-span-2",
 				children: [
-					/* @__PURE__ */ A(j, {
+					/* @__PURE__ */ j(M, {
 						treatment: "glass",
-						className: "overflow-hidden p-0",
-						children: [/* @__PURE__ */ k(o, {
-							icon: /* @__PURE__ */ k(T, { className: "h-14 w-14" }),
+						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: "h-60 w-full"
-						}), /* @__PURE__ */ A("div", {
+							className: "aspect-[4/5] max-h-[38rem] w-full rounded-none"
+						}), /* @__PURE__ */ j("div", {
 							className: "p-6",
 							children: [
-								/* @__PURE__ */ A("div", {
+								/* @__PURE__ */ j("div", {
 									className: "flex items-center gap-2",
 									children: [
-										/* @__PURE__ */ k("h2", {
+										/* @__PURE__ */ A("h2", {
 											className: "text-xl font-semibold text-text-primary",
 											children: B.title
 										}),
-										B.isFeatured && /* @__PURE__ */ k(E, { className: "h-4 w-4 fill-status-warning-text text-status-warning-text" }),
-										/* @__PURE__ */ k(r, {
+										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"
 										})
 									]
 								}),
-								B.caption && /* @__PURE__ */ k("p", {
+								B.caption && /* @__PURE__ */ A("p", {
 									className: "mt-3 text-sm text-text-secondary",
 									children: B.caption
 								}),
-								B.tags.length > 0 && /* @__PURE__ */ k(h, {
+								B.tags.length > 0 && /* @__PURE__ */ A(h, {
 									tags: B.tags,
 									className: "mt-4",
 									tone: "accent"
 								}),
-								/* @__PURE__ */ A("div", {
-									className: "mt-4 flex flex-wrap items-center gap-2 text-sm text-text-secondary",
-									children: [/* @__PURE__ */ A("span", { children: [
-										"By",
-										" ",
-										/* @__PURE__ */ k(g, {
-											id: B.authorId,
-											className: "font-medium text-text-primary"
-										})
-									] }), !U && /* @__PURE__ */ k(y, {
+								/* @__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"
 									})]
 								}),
-								/* @__PURE__ */ A("div", {
+								/* @__PURE__ */ j("div", {
 									className: "mt-5 flex items-center gap-3",
-									children: [/* @__PURE__ */ A("button", {
+									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__ */ k(C, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ k(S, { className: "h-4 w-4" }),
+											I.isPending ? /* @__PURE__ */ A(w, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ A(C, { className: "h-4 w-4" }),
 											"Like · ",
 											B.likeCount
 										]
-									}), /* @__PURE__ */ A("span", {
+									}), /* @__PURE__ */ j("span", {
 										className: "inline-flex items-center gap-1.5 text-sm text-text-secondary",
 										children: [
-											/* @__PURE__ */ k(x, { className: "h-4 w-4" }),
+											/* @__PURE__ */ A(S, { className: "h-4 w-4" }),
 											" ",
 											B.saveCount,
 											" saves"
@@ -150,93 +180,85 @@ function M() {
 							]
 						})]
 					}),
-					/* @__PURE__ */ A("section", {
+					/* @__PURE__ */ j("section", {
 						className: "mt-6",
-						children: [/* @__PURE__ */ A("h3", {
+						children: [/* @__PURE__ */ j("h3", {
 							className: "mb-3 text-lg font-semibold text-text-primary",
 							children: [
 								"Shop the look (",
 								V.length,
 								")"
 							]
-						}), V.length === 0 ? /* @__PURE__ */ k("p", {
+						}), 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__ */ k("div", {
-							className: "divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface",
-							children: [...V].sort((e, t) => e.position - t.position).map((e) => /* @__PURE__ */ A("button", {
-								type: "button",
-								onClick: () => e.styleItem && N(`/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__ */ k(o, {
-										icon: /* @__PURE__ */ k(T, { className: "h-5 w-5" }),
-										seed: e.id,
-										className: "h-11 w-11 shrink-0"
-									}),
-									/* @__PURE__ */ A("div", {
-										className: "min-w-0 flex-1",
-										children: [/* @__PURE__ */ k("p", {
-											className: "truncate text-sm font-medium text-text-primary",
-											children: e.styleItem?.name ?? "Catalogue piece"
-										}), e.styling && /* @__PURE__ */ k("p", {
-											className: "truncate text-xs text-text-secondary",
-											children: e.styling
-										})]
-									}),
-									e.styleItem && /* @__PURE__ */ k("span", {
-										className: "shrink-0 text-sm font-semibold text-text-primary",
-										children: p(e.styleItem.price, e.styleItem.currency)
-									})
-								]
+						}) : /* @__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__ */ k(_, {
+					/* @__PURE__ */ A(g, {
 						entityType: "CooLook",
 						entityId: B.id
 					})
 				]
-			}), /* @__PURE__ */ A("div", {
+			}), /* @__PURE__ */ j("div", {
 				className: "space-y-4",
 				children: [
-					/* @__PURE__ */ A(j, {
+					/* @__PURE__ */ j(M, {
 						treatment: "plain",
 						className: "p-5",
-						children: [/* @__PURE__ */ k("h3", {
+						children: [/* @__PURE__ */ A("h3", {
 							className: "mb-3 text-sm font-semibold text-text-primary",
 							children: "Details"
-						}), /* @__PURE__ */ A("dl", {
+						}), /* @__PURE__ */ j("dl", {
 							className: "space-y-2 text-sm",
 							children: [
-								/* @__PURE__ */ A("div", {
+								/* @__PURE__ */ j("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ k("dt", {
+									children: [/* @__PURE__ */ A("dt", {
 										className: "text-text-secondary",
 										children: "Occasion"
-									}), /* @__PURE__ */ k("dd", {
+									}), /* @__PURE__ */ A("dd", {
 										className: "text-text-primary",
 										children: m(B.occasion)
 									})]
 								}),
-								/* @__PURE__ */ A("div", {
+								/* @__PURE__ */ j("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ k("dt", {
+									children: [/* @__PURE__ */ A("dt", {
 										className: "text-text-secondary",
 										children: "Visibility"
-									}), /* @__PURE__ */ k("dd", {
+									}), /* @__PURE__ */ A("dd", {
 										className: "text-text-primary",
 										children: m(B.visibility)
 									})]
 								}),
-								/* @__PURE__ */ A("div", {
+								/* @__PURE__ */ j("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ k("dt", {
+									children: [/* @__PURE__ */ A("dt", {
 										className: "text-text-secondary",
 										children: "Published"
-									}), /* @__PURE__ */ k("dd", {
+									}), /* @__PURE__ */ A("dd", {
 										className: "text-text-primary",
-										children: B.publishedAt ? f(B.publishedAt, {
+										children: B.publishedAt ? p(B.publishedAt, {
 											hour: void 0,
 											minute: void 0
 										}) : "—"
@@ -245,25 +267,25 @@ function M() {
 							]
 						})]
 					}),
-					B.collaborationId && /* @__PURE__ */ A("button", {
+					B.collaborationId && /* @__PURE__ */ j("button", {
 						type: "button",
-						onClick: () => N(`/collaborations/${B.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__ */ k("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__ */ k(T, { className: "h-5 w-5" })
-						}), /* @__PURE__ */ A("div", {
+							children: /* @__PURE__ */ A(E, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ j("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ k("p", {
+							children: [/* @__PURE__ */ A("p", {
 								className: "truncate text-sm font-medium text-text-primary",
 								children: "Part of a collaboration"
-							}), /* @__PURE__ */ k("p", {
+							}), /* @__PURE__ */ A("p", {
 								className: "truncate text-xs text-text-secondary",
 								children: "View collaboration"
 							})]
 						})]
 					}),
-					(L.isError || R.isError || I.isError) && /* @__PURE__ */ k("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: (L.error ?? R.error ?? I.error) instanceof Error ? (L.error ?? R.error ?? I.error)?.message : "Action failed"
 					})
@@ -273,6 +295,6 @@ function M() {
 	});
 }
 //#endregion
-export { M as LookDetailPage };
+export { I as LookDetailPage };
 
 //# sourceMappingURL=LookDetailPage.js.map

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, 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 { ActorName } from '../../components/ActorName';\nimport { Comments } from '../../components/Comments';\nimport { FollowButton } from '../../components/FollowButton';\nimport { AddToLookbookButton } from '../../components/AddToLookbookButton';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useLook, useLikeLook, usePublishLook, useDeleteLook, useUpdateLook } from '../../hooks';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\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=\"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=\"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-4 flex flex-wrap items-center gap-2 text-sm text-text-secondary\">\n                <span>\n                  By{' '}\n                  <ActorName id={look.authorId} className=\"font-medium text-text-primary\" />\n                </span>\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=\"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\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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"}
+{"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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"}

package/dist/coolandlovely/pages/looks/LookFormPage.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Look Create Page
+ * @module coolandlovely/pages/looks
+ *
+ * Drives `cooCreateLook`. A look is created with its title/occasion/visibility
+ * and an inline list of look items (catalogue pieces + styling notes), matching
+ * the `CooCreateLookInput` shape exactly.
+ */
+export declare function LookFormPage(): import("react").JSX.Element;
+//# sourceMappingURL=LookFormPage.d.ts.map

package/dist/coolandlovely/pages/looks/LookFormPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LookFormPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/looks/LookFormPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAiCH,wBAAgB,YAAY,gCA2T3B"}