@burdenoff/microfe-coolandlovely 2026.720.1 → 2026.720.2

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

@@ -2,226 +2,238 @@ import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
 import { PageLayout as t } from "../../components/PageLayout.js";
 import { ErrorView as n, LoadingView as r } from "../../components/StateViews.js";
 import { Thumbnail as i } from "../../components/Thumbnail.js";
-import { useAddLookbookEntry as a, useLookbook as o, useLooks as s, useRemoveLookbookEntry as c, useStyleItems as l } from "../../hooks/useCoolAndLovelyApi.js";
+import { useAddLookbookEntry as a, useDeleteLookbook as o, useLookbook as s, useLooks as c, useRemoveLookbookEntry as l, useStyleItems as ee } from "../../hooks/useCoolAndLovelyApi.js";
 import { formatRelativeTime as u } from "../../utils/formatters.js";
 import "../../hooks/index.js";
 import { TagList as d } from "../../components/TagList.js";
 import { SelectField as f, TextField as p } from "../../components/Field.js";
 import { VisibilityChip as m } from "../../components/VisibilityChip.js";
 import { useMemo as h, useState as g } from "react";
-import { ArrowLeft as _, BookHeart as v, Clock as y, Loader2 as b, Plus as x, Sparkles as S, Tag as C, X as w } from "lucide-react";
-import { useParams as T } from "react-router-dom";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { GlassCard as O } from "@burdenoff/fe-libs/ui";
+import { ArrowLeft as _, BookHeart as v, Clock as y, Loader2 as b, Plus as x, Sparkles as S, Tag as C, Trash2 as w, X as T } from "lucide-react";
+import { useParams as E } from "react-router-dom";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { GlassCard as k } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/lookbooks/LookbookDetailPage.tsx
-var k = [
+var A = [
 	"aspect-[3/4]",
 	"aspect-square",
 	"aspect-[4/5]"
 ];
-function A() {
-	let { lookbookId: A } = T(), { navigateTo: j } = e(), M = o(A), N = c(), P = a(), [F, I] = g(!1), [L, R] = g("look"), [z, B] = g(""), [V, H] = g(""), U = s({ pagination: {
+function j() {
+	let { lookbookId: j } = E(), { navigateTo: M } = e(), N = s(j), P = l(), F = a(), I = o(), [L, R] = g(!1), [z, B] = g("look"), [V, H] = g(""), [U, W] = g(""), G = c({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), W = l({ pagination: {
+	} }), K = ee({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), G = h(() => new Map((U.data?.items ?? []).map((e) => [e.id, e])), [U.data]), K = h(() => new Map((W.data?.items ?? []).map((e) => [e.id, e])), [W.data]), q = h(() => (W.data?.items ?? []).filter((e) => e.status !== "RETIRED"), [W.data]), J = h(() => (U.data?.items ?? []).map((e) => ({
+	} }), q = h(() => new Map((G.data?.items ?? []).map((e) => [e.id, e])), [G.data]), J = h(() => new Map((K.data?.items ?? []).map((e) => [e.id, e])), [K.data]), Y = h(() => (K.data?.items ?? []).filter((e) => e.status !== "RETIRED"), [K.data]), X = h(() => (G.data?.items ?? []).map((e) => ({
 		value: e.id,
 		label: e.title
-	})), [U.data]), Y = h(() => q.map((e) => ({
+	})), [G.data]), Z = h(() => Y.map((e) => ({
 		value: e.id,
 		label: `${e.name}${e.brand?.name ? ` · ${e.brand.name}` : ""}`
-	})), [q]);
-	if (M.isLoading) return /* @__PURE__ */ E(t, {
+	})), [Y]);
+	if (N.isLoading) return /* @__PURE__ */ D(t, {
 		title: "Lookbook",
-		children: /* @__PURE__ */ E(r, { label: "Loading lookbook…" })
+		children: /* @__PURE__ */ D(r, { label: "Loading lookbook…" })
 	});
-	if (M.isError || !M.data) return /* @__PURE__ */ E(t, {
+	if (N.isError || !N.data) return /* @__PURE__ */ D(t, {
 		title: "Lookbook",
-		children: /* @__PURE__ */ E(n, {
+		children: /* @__PURE__ */ D(n, {
 			title: "Lookbook not found",
-			onRetry: () => void M.refetch()
+			onRetry: () => void N.refetch()
 		})
 	});
-	let X = M.data, Z = [...X.entries ?? []].sort((e, t) => e.position - t.position);
-	return /* @__PURE__ */ E(t, {
-		title: X.name,
-		description: X.description ?? void 0,
-		actions: /* @__PURE__ */ D("div", {
+	let Q = N.data, $ = [...Q.entries ?? []].sort((e, t) => e.position - t.position);
+	return /* @__PURE__ */ D(t, {
+		title: Q.name,
+		description: Q.description ?? void 0,
+		actions: /* @__PURE__ */ O("div", {
 			className: "flex flex-wrap items-center gap-2",
-			children: [/* @__PURE__ */ D("button", {
-				type: "button",
-				onClick: () => j("/lookbooks"),
-				className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
-				children: [/* @__PURE__ */ E(_, { className: "h-4 w-4" }), " Back"]
-			}), /* @__PURE__ */ D("button", {
-				type: "button",
-				onClick: () => {
-					I((e) => !e), B("");
-				},
-				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: [E(F ? w : x, { className: "h-4 w-4" }), F ? "Close" : "Add entry"]
-			})]
+			children: [
+				/* @__PURE__ */ O("button", {
+					type: "button",
+					onClick: () => M("/lookbooks"),
+					className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
+					children: [/* @__PURE__ */ D(_, { className: "h-4 w-4" }), " Back"]
+				}),
+				/* @__PURE__ */ O("button", {
+					type: "button",
+					onClick: () => {
+						R((e) => !e), H("");
+					},
+					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: [D(L ? T : x, { className: "h-4 w-4" }), L ? "Close" : "Add entry"]
+				}),
+				/* @__PURE__ */ O("button", {
+					type: "button",
+					disabled: I.isPending,
+					onClick: () => {
+						j && I.mutate(j, { onSuccess: () => M("/lookbooks") });
+					},
+					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: [I.isPending ? /* @__PURE__ */ D(b, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ D(w, { className: "h-4 w-4" }), "Delete"]
+				})
+			]
 		}),
-		children: /* @__PURE__ */ D("div", {
+		children: /* @__PURE__ */ O("div", {
 			className: "mx-auto max-w-5xl",
 			children: [
-				/* @__PURE__ */ D(O, {
+				/* @__PURE__ */ O(k, {
 					treatment: "glass",
 					className: "p-6",
-					children: [/* @__PURE__ */ D("div", {
+					children: [/* @__PURE__ */ O("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ E("div", {
+						children: [/* @__PURE__ */ D("div", {
 							className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-accent-purple-subtle text-text-primary",
-							children: /* @__PURE__ */ E(v, { className: "h-6 w-6" })
-						}), /* @__PURE__ */ D("div", {
+							children: /* @__PURE__ */ D(v, { className: "h-6 w-6" })
+						}), /* @__PURE__ */ O("div", {
 							className: "min-w-0 flex-1",
-							children: [/* @__PURE__ */ E("h2", {
+							children: [/* @__PURE__ */ D("h2", {
 								className: "truncate text-xl font-semibold text-text-primary",
-								children: X.name
-							}), /* @__PURE__ */ D("div", {
+								children: Q.name
+							}), /* @__PURE__ */ O("div", {
 								className: "mt-1.5 flex flex-wrap items-center gap-2",
 								children: [
-									/* @__PURE__ */ E(m, { visibility: X.visibility }),
-									/* @__PURE__ */ D("span", {
+									/* @__PURE__ */ D(m, { visibility: Q.visibility }),
+									/* @__PURE__ */ O("span", {
 										className: "inline-flex items-center gap-1 text-xs text-text-secondary",
 										children: [
-											/* @__PURE__ */ E(y, { className: "h-3.5 w-3.5" }),
+											/* @__PURE__ */ D(y, { className: "h-3.5 w-3.5" }),
 											" Updated ",
-											u(X.updatedAt)
+											u(Q.updatedAt)
 										]
 									}),
-									/* @__PURE__ */ D("span", {
+									/* @__PURE__ */ O("span", {
 										className: "text-xs text-text-secondary tabular-nums",
 										children: [
 											"· ",
-											Z.length,
+											$.length,
 											" ",
-											Z.length === 1 ? "item" : "items"
+											$.length === 1 ? "item" : "items"
 										]
 									})
 								]
 							})]
 						})]
-					}), X.tags.length > 0 && /* @__PURE__ */ E(d, {
-						tags: X.tags,
+					}), Q.tags.length > 0 && /* @__PURE__ */ D(d, {
+						tags: Q.tags,
 						className: "mt-4"
 					})]
 				}),
-				F && /* @__PURE__ */ E("form", {
+				L && /* @__PURE__ */ D("form", {
 					onSubmit: (e) => {
-						e.preventDefault(), !(!A || !z) && P.mutate({
-							lookbookId: A,
-							lookId: L === "look" ? z : void 0,
-							styleItemId: L === "item" ? z : void 0,
-							note: V.trim() || void 0
+						e.preventDefault(), !(!j || !V) && F.mutate({
+							lookbookId: j,
+							lookId: z === "look" ? V : void 0,
+							styleItemId: z === "item" ? V : void 0,
+							note: U.trim() || void 0
 						}, { onSuccess: () => {
-							B(""), H(""), I(!1);
+							H(""), W(""), R(!1);
 						} });
 					},
 					className: "mt-6",
-					children: /* @__PURE__ */ D(O, {
+					children: /* @__PURE__ */ O(k, {
 						treatment: "plain",
 						className: "p-5",
 						children: [
-							/* @__PURE__ */ D("h3", {
+							/* @__PURE__ */ O("h3", {
 								className: "mb-4 flex items-center gap-2 text-base font-semibold text-text-primary",
-								children: [/* @__PURE__ */ E(x, { className: "h-5 w-5" }), " Add to this lookbook"]
+								children: [/* @__PURE__ */ D(x, { className: "h-5 w-5" }), " Add to this lookbook"]
 							}),
-							/* @__PURE__ */ E("div", {
+							/* @__PURE__ */ D("div", {
 								className: "mb-4 flex flex-wrap gap-2",
-								children: ["look", "item"].map((e) => /* @__PURE__ */ E("button", {
+								children: ["look", "item"].map((e) => /* @__PURE__ */ D("button", {
 									type: "button",
 									onClick: () => {
-										R(e), B("");
+										B(e), H("");
 									},
-									className: L === e ? "rounded-full bg-action-primary-bg px-3 py-1.5 text-sm font-medium text-action-primary-text" : "rounded-full bg-bg-sunken px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary",
+									className: z === e ? "rounded-full bg-action-primary-bg px-3 py-1.5 text-sm font-medium text-action-primary-text" : "rounded-full bg-bg-sunken px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary",
 									children: e === "look" ? "Save a look" : "Clip a piece"
 								}, e))
 							}),
-							/* @__PURE__ */ E(f, {
-								label: L === "look" ? "Look" : "Style item",
-								value: z,
-								onChange: B,
-								options: L === "look" ? J : Y,
-								placeholder: L === "look" ? U.isLoading ? "Loading looks…" : "Select a look" : W.isLoading ? "Loading items…" : "Select a style item"
-							}),
-							/* @__PURE__ */ E(p, {
-								label: "Note (optional)",
+							/* @__PURE__ */ D(f, {
+								label: z === "look" ? "Look" : "Style item",
 								value: V,
 								onChange: H,
+								options: z === "look" ? X : Z,
+								placeholder: z === "look" ? G.isLoading ? "Loading looks…" : "Select a look" : K.isLoading ? "Loading items…" : "Select a style item"
+							}),
+							/* @__PURE__ */ D(p, {
+								label: "Note (optional)",
+								value: U,
+								onChange: W,
 								placeholder: "Why you saved it…",
 								className: "mt-4"
 							}),
-							P.isError && /* @__PURE__ */ E("p", {
+							F.isError && /* @__PURE__ */ D("p", {
 								className: "mt-3 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-								children: P.error instanceof Error ? P.error.message : "Could not add entry"
+								children: F.error instanceof Error ? F.error.message : "Could not add entry"
 							}),
-							/* @__PURE__ */ E("div", {
+							/* @__PURE__ */ D("div", {
 								className: "mt-4 flex justify-end",
-								children: /* @__PURE__ */ D("button", {
+								children: /* @__PURE__ */ O("button", {
 									type: "submit",
-									disabled: !z || P.isPending,
+									disabled: !V || F.isPending,
 									className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
-									children: [P.isPending ? /* @__PURE__ */ E(b, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(x, { className: "h-4 w-4" }), "Add entry"]
+									children: [F.isPending ? /* @__PURE__ */ D(b, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ D(x, { className: "h-4 w-4" }), "Add entry"]
 								})
 							})
 						]
 					})
 				}),
-				/* @__PURE__ */ D("section", {
+				/* @__PURE__ */ O("section", {
 					className: "mt-6",
-					children: [/* @__PURE__ */ D("h3", {
+					children: [/* @__PURE__ */ O("h3", {
 						className: "mb-3 text-lg font-semibold text-text-primary",
 						children: [
 							"Board (",
-							Z.length,
+							$.length,
 							")"
 						]
-					}), Z.length === 0 ? /* @__PURE__ */ E("p", {
+					}), $.length === 0 ? /* @__PURE__ */ D("p", {
 						className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
 						children: "This lookbook has no entries yet. Clip a catalogue piece or save a look to add one."
-					}) : /* @__PURE__ */ E("div", {
+					}) : /* @__PURE__ */ D("div", {
 						className: "columns-2 gap-4 md:columns-3",
-						children: Z.map((e, t) => {
-							let n = !!e.lookId, r = e.lookId ? G.get(e.lookId) : void 0, a = e.styleItemId ? K.get(e.styleItemId) : void 0, o = n ? r?.title ?? "Saved look" : a?.name ?? "Clipped piece", s = n ? r?.image?.id : a?.image?.id, c = N.isPending && N.variables === e.id;
-							return /* @__PURE__ */ D("div", {
+						children: $.map((e, t) => {
+							let n = !!e.lookId, r = e.lookId ? q.get(e.lookId) : void 0, a = e.styleItemId ? J.get(e.styleItemId) : void 0, o = n ? r?.title ?? "Saved look" : a?.name ?? "Clipped piece", s = n ? r?.image?.id : a?.image?.id, c = P.isPending && P.variables === e.id;
+							return /* @__PURE__ */ O("div", {
 								className: "group relative mb-4 break-inside-avoid overflow-hidden rounded-xl border border-border-seam bg-bg-surface shadow-sm transition-shadow hover:shadow-lg",
-								children: [/* @__PURE__ */ E("button", {
+								children: [/* @__PURE__ */ D("button", {
 									type: "button",
 									onClick: () => {
-										n && e.lookId ? j(`/looks/${e.lookId}`) : e.styleItemId && j(`/items/${e.styleItemId}`);
+										n && e.lookId ? M(`/looks/${e.lookId}`) : e.styleItemId && M(`/items/${e.styleItemId}`);
 									},
 									"aria-label": `Open ${o}`,
 									className: "block w-full text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-focus-ring)]",
-									children: /* @__PURE__ */ E(i, {
-										icon: E(n ? S : C, { className: "h-8 w-8" }),
+									children: /* @__PURE__ */ D(i, {
+										icon: D(n ? S : C, { className: "h-8 w-8" }),
 										seed: e.id,
 										fileId: s,
 										alt: o,
-										className: `w-full rounded-none ${k[t % k.length]}`,
-										overlay: /* @__PURE__ */ D("div", {
+										className: `w-full rounded-none ${A[t % A.length]}`,
+										overlay: /* @__PURE__ */ O("div", {
 											className: "pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-1.5 bg-gradient-to-t from-bg-canvas/90 via-bg-canvas/40 to-transparent p-3 pt-10",
-											children: [e.note && /* @__PURE__ */ E("span", {
+											children: [e.note && /* @__PURE__ */ D("span", {
 												className: "inline-flex w-fit max-w-full items-center rounded-md bg-bg-canvas/80 px-2 py-0.5 text-[11px] font-medium text-text-primary backdrop-blur",
-												children: /* @__PURE__ */ E("span", {
+												children: /* @__PURE__ */ D("span", {
 													className: "truncate",
 													children: e.note
 												})
-											}), /* @__PURE__ */ E("p", {
+											}), /* @__PURE__ */ D("p", {
 												className: "truncate text-sm font-semibold text-text-primary",
 												children: o
 											})]
 										})
 									})
-								}), /* @__PURE__ */ E("button", {
+								}), /* @__PURE__ */ D("button", {
 									type: "button",
-									disabled: N.isPending,
-									onClick: () => N.mutate(e.id),
+									disabled: P.isPending,
+									onClick: () => P.mutate(e.id),
 									"aria-label": `Remove ${o}`,
 									className: "absolute right-2 top-2 z-10 inline-flex h-7 w-7 items-center justify-center rounded-full bg-bg-surface/90 text-text-secondary opacity-100 shadow-sm backdrop-blur transition-opacity hover:text-status-error-text sm:opacity-0 sm:focus-visible:opacity-100 sm:group-hover:opacity-100 disabled:opacity-60",
-									children: c ? /* @__PURE__ */ E(b, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ E(w, { className: "h-3.5 w-3.5" })
+									children: c ? /* @__PURE__ */ D(b, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ D(T, { className: "h-3.5 w-3.5" })
 								})]
 							}, e.id);
 						})
@@ -232,6 +244,6 @@ function A() {
 	});
 }
 //#endregion
-export { A as LookbookDetailPage };
+export { j as LookbookDetailPage };
 
 //# sourceMappingURL=LookbookDetailPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LookbookDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/lookbooks/LookbookDetailPage.tsx"],"sourcesContent":["/**\n * Lookbook Detail Page\n * @module coolandlovely/pages/lookbooks\n *\n * Single lookbook (`cooLookbook`) rendered as a Pinterest-style masonry board.\n * Each entry's `lookId` / `styleItemId` is resolved client-side against the\n * already-fetched looks/items lists to a real title + image, with an optional\n * note badge and a hover X-remove (`cooRemoveLookbookEntry`). New entries are\n * added inline (`cooAddLookbookEntry`).\n */\n\nimport { useMemo, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, BookHeart, Sparkles, Tag, Loader2, Plus, X, Clock } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { VisibilityChip } from '../../components/VisibilityChip';\nimport { SelectField, TextField } from '../../components/Field';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n  useLookbook,\n  useRemoveLookbookEntry,\n  useAddLookbookEntry,\n  useLooks,\n  useStyleItems,\n} from '../../hooks';\nimport { formatRelativeTime } from '../../utils/formatters';\n\ntype EntryKind = 'look' | 'item';\n\n/** Alternating aspect ratios give the board its masonry rhythm. */\nconst TILE_ASPECTS = ['aspect-[3/4]', 'aspect-square', 'aspect-[4/5]'];\n\nexport function LookbookDetailPage() {\n  const { lookbookId } = useParams<{ lookbookId: string }>();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useLookbook(lookbookId);\n  const removeEntry = useRemoveLookbookEntry();\n  const addEntry = useAddLookbookEntry();\n\n  const [adding, setAdding] = useState(false);\n  const [entryKind, setEntryKind] = useState<EntryKind>('look');\n  const [selectedId, setSelectedId] = useState('');\n  const [note, setNote] = useState('');\n\n  const looks = useLooks({ pagination: { limit: 100, offset: 0 } });\n  const items = useStyleItems({ pagination: { limit: 100, offset: 0 } });\n\n  const lookById = useMemo(\n    () => new Map((looks.data?.items ?? []).map((l) => [l.id, l])),\n    [looks.data]\n  );\n  const itemById = useMemo(\n    () => new Map((items.data?.items ?? []).map((i) => [i.id, i])),\n    [items.data]\n  );\n  const usableItems = useMemo(\n    () => (items.data?.items ?? []).filter((i) => i.status !== 'RETIRED'),\n    [items.data]\n  );\n\n  const lookOptions = useMemo(\n    () => (looks.data?.items ?? []).map((l) => ({ value: l.id, label: l.title })),\n    [looks.data]\n  );\n  const itemOptions = useMemo(\n    () =>\n      usableItems.map((i) => ({\n        value: i.id,\n        label: `${i.name}${i.brand?.name ? ` · ${i.brand.name}` : ''}`,\n      })),\n    [usableItems]\n  );\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Lookbook\">\n        <LoadingView label=\"Loading lookbook…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError || !query.data) {\n    return (\n      <PageLayout title=\"Lookbook\">\n        <ErrorView title=\"Lookbook not found\" onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  const lookbook = query.data;\n  const entries = [...(lookbook.entries ?? [])].sort((a, b) => a.position - b.position);\n\n  const handleAddEntry = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!lookbookId || !selectedId) return;\n    addEntry.mutate(\n      {\n        lookbookId,\n        lookId: entryKind === 'look' ? selectedId : undefined,\n        styleItemId: entryKind === 'item' ? selectedId : undefined,\n        note: note.trim() || undefined,\n      },\n      {\n        onSuccess: () => {\n          setSelectedId('');\n          setNote('');\n          setAdding(false);\n        },\n      }\n    );\n  };\n\n  return (\n    <PageLayout\n      title={lookbook.name}\n      description={lookbook.description ?? undefined}\n      actions={\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/lookbooks')}\n            className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n          >\n            <ArrowLeft className=\"h-4 w-4\" /> Back\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setAdding((v) => !v);\n              setSelectedId('');\n            }}\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            {adding ? <X className=\"h-4 w-4\" /> : <Plus className=\"h-4 w-4\" />}\n            {adding ? 'Close' : 'Add entry'}\n          </button>\n        </div>\n      }\n    >\n      <div className=\"mx-auto max-w-5xl\">\n        <GlassCard treatment=\"glass\" className=\"p-6\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-accent-purple-subtle text-text-primary\">\n              <BookHeart className=\"h-6 w-6\" />\n            </div>\n            <div className=\"min-w-0 flex-1\">\n              <h2 className=\"truncate text-xl font-semibold text-text-primary\">{lookbook.name}</h2>\n              <div className=\"mt-1.5 flex flex-wrap items-center gap-2\">\n                <VisibilityChip visibility={lookbook.visibility} />\n                <span className=\"inline-flex items-center gap-1 text-xs text-text-secondary\">\n                  <Clock className=\"h-3.5 w-3.5\" /> Updated {formatRelativeTime(lookbook.updatedAt)}\n                </span>\n                <span className=\"text-xs text-text-secondary tabular-nums\">\n                  · {entries.length} {entries.length === 1 ? 'item' : 'items'}\n                </span>\n              </div>\n            </div>\n          </div>\n          {lookbook.tags.length > 0 && <TagList tags={lookbook.tags} className=\"mt-4\" />}\n        </GlassCard>\n\n        {adding && (\n          <form onSubmit={handleAddEntry} className=\"mt-6\">\n            <GlassCard treatment=\"plain\" className=\"p-5\">\n              <h3 className=\"mb-4 flex items-center gap-2 text-base font-semibold text-text-primary\">\n                <Plus className=\"h-5 w-5\" /> Add to this lookbook\n              </h3>\n              <div className=\"mb-4 flex flex-wrap gap-2\">\n                {(['look', 'item'] as EntryKind[]).map((k) => (\n                  <button\n                    key={k}\n                    type=\"button\"\n                    onClick={() => {\n                      setEntryKind(k);\n                      setSelectedId('');\n                    }}\n                    className={\n                      entryKind === k\n                        ? 'rounded-full bg-action-primary-bg px-3 py-1.5 text-sm font-medium text-action-primary-text'\n                        : 'rounded-full bg-bg-sunken px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary'\n                    }\n                  >\n                    {k === 'look' ? 'Save a look' : 'Clip a piece'}\n                  </button>\n                ))}\n              </div>\n              <SelectField\n                label={entryKind === 'look' ? 'Look' : 'Style item'}\n                value={selectedId}\n                onChange={setSelectedId}\n                options={entryKind === 'look' ? lookOptions : itemOptions}\n                placeholder={\n                  entryKind === 'look'\n                    ? looks.isLoading\n                      ? 'Loading looks…'\n                      : 'Select a look'\n                    : items.isLoading\n                      ? 'Loading items…'\n                      : 'Select a style item'\n                }\n              />\n              <TextField\n                label=\"Note (optional)\"\n                value={note}\n                onChange={setNote}\n                placeholder=\"Why you saved it…\"\n                className=\"mt-4\"\n              />\n              {addEntry.isError && (\n                <p className=\"mt-3 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n                  {addEntry.error instanceof Error ? addEntry.error.message : 'Could not add entry'}\n                </p>\n              )}\n              <div className=\"mt-4 flex justify-end\">\n                <button\n                  type=\"submit\"\n                  disabled={!selectedId || addEntry.isPending}\n                  className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n                >\n                  {addEntry.isPending ? (\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                  ) : (\n                    <Plus className=\"h-4 w-4\" />\n                  )}\n                  Add entry\n                </button>\n              </div>\n            </GlassCard>\n          </form>\n        )}\n\n        <section className=\"mt-6\">\n          <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">Board ({entries.length})</h3>\n          {entries.length === 0 ? (\n            <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n              This lookbook has no entries yet. Clip a catalogue piece or save a look to add one.\n            </p>\n          ) : (\n            <div className=\"columns-2 gap-4 md:columns-3\">\n              {entries.map((entry, idx) => {\n                const isLook = Boolean(entry.lookId);\n                const look = entry.lookId ? lookById.get(entry.lookId) : undefined;\n                const item = entry.styleItemId ? itemById.get(entry.styleItemId) : undefined;\n                const title = isLook\n                  ? (look?.title ?? 'Saved look')\n                  : (item?.name ?? 'Clipped piece');\n                const imageFileId = isLook ? look?.image?.id : item?.image?.id;\n                const removing = removeEntry.isPending && removeEntry.variables === entry.id;\n                const onOpen = () => {\n                  if (isLook && entry.lookId) navigateTo(`/looks/${entry.lookId}`);\n                  else if (entry.styleItemId) navigateTo(`/items/${entry.styleItemId}`);\n                };\n                return (\n                  <div\n                    key={entry.id}\n                    className=\"group relative mb-4 break-inside-avoid overflow-hidden rounded-xl border border-border-seam bg-bg-surface shadow-sm transition-shadow hover:shadow-lg\"\n                  >\n                    <button\n                      type=\"button\"\n                      onClick={onOpen}\n                      aria-label={`Open ${title}`}\n                      className=\"block w-full text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-focus-ring)]\"\n                    >\n                      <Thumbnail\n                        icon={\n                          isLook ? <Sparkles className=\"h-8 w-8\" /> : <Tag className=\"h-8 w-8\" />\n                        }\n                        seed={entry.id}\n                        fileId={imageFileId}\n                        alt={title}\n                        className={`w-full rounded-none ${TILE_ASPECTS[idx % TILE_ASPECTS.length]}`}\n                        overlay={\n                          <div className=\"pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-1.5 bg-gradient-to-t from-bg-canvas/90 via-bg-canvas/40 to-transparent p-3 pt-10\">\n                            {entry.note && (\n                              <span className=\"inline-flex w-fit max-w-full items-center rounded-md bg-bg-canvas/80 px-2 py-0.5 text-[11px] font-medium text-text-primary backdrop-blur\">\n                                <span className=\"truncate\">{entry.note}</span>\n                              </span>\n                            )}\n                            <p className=\"truncate text-sm font-semibold text-text-primary\">\n                              {title}\n                            </p>\n                          </div>\n                        }\n                      />\n                    </button>\n                    <button\n                      type=\"button\"\n                      disabled={removeEntry.isPending}\n                      onClick={() => removeEntry.mutate(entry.id)}\n                      aria-label={`Remove ${title}`}\n                      className=\"absolute right-2 top-2 z-10 inline-flex h-7 w-7 items-center justify-center rounded-full bg-bg-surface/90 text-text-secondary opacity-100 shadow-sm backdrop-blur transition-opacity hover:text-status-error-text sm:opacity-0 sm:focus-visible:opacity-100 sm:group-hover:opacity-100 disabled:opacity-60\"\n                    >\n                      {removing ? (\n                        <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n                      ) : (\n                        <X className=\"h-3.5 w-3.5\" />\n                      )}\n                    </button>\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </section>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LookbookDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/lookbooks/LookbookDetailPage.tsx"],"sourcesContent":["/**\n * Lookbook Detail Page\n * @module coolandlovely/pages/lookbooks\n *\n * Single lookbook (`cooLookbook`) rendered as a Pinterest-style masonry board.\n * Each entry's `lookId` / `styleItemId` is resolved client-side against the\n * already-fetched looks/items lists to a real title + image, with an optional\n * note badge and a hover X-remove (`cooRemoveLookbookEntry`). New entries are\n * added inline (`cooAddLookbookEntry`).\n */\n\nimport { useMemo, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, BookHeart, Sparkles, Tag, Loader2, Plus, Trash2, X, Clock } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { VisibilityChip } from '../../components/VisibilityChip';\nimport { SelectField, TextField } from '../../components/Field';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n  useLookbook,\n  useRemoveLookbookEntry,\n  useAddLookbookEntry,\n  useDeleteLookbook,\n  useLooks,\n  useStyleItems,\n} from '../../hooks';\nimport { formatRelativeTime } from '../../utils/formatters';\n\ntype EntryKind = 'look' | 'item';\n\n/** Alternating aspect ratios give the board its masonry rhythm. */\nconst TILE_ASPECTS = ['aspect-[3/4]', 'aspect-square', 'aspect-[4/5]'];\n\nexport function LookbookDetailPage() {\n  const { lookbookId } = useParams<{ lookbookId: string }>();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useLookbook(lookbookId);\n  const removeEntry = useRemoveLookbookEntry();\n  const addEntry = useAddLookbookEntry();\n  const deleteLookbook = useDeleteLookbook();\n\n  const [adding, setAdding] = useState(false);\n  const [entryKind, setEntryKind] = useState<EntryKind>('look');\n  const [selectedId, setSelectedId] = useState('');\n  const [note, setNote] = useState('');\n\n  const looks = useLooks({ pagination: { limit: 100, offset: 0 } });\n  const items = useStyleItems({ pagination: { limit: 100, offset: 0 } });\n\n  const lookById = useMemo(\n    () => new Map((looks.data?.items ?? []).map((l) => [l.id, l])),\n    [looks.data]\n  );\n  const itemById = useMemo(\n    () => new Map((items.data?.items ?? []).map((i) => [i.id, i])),\n    [items.data]\n  );\n  const usableItems = useMemo(\n    () => (items.data?.items ?? []).filter((i) => i.status !== 'RETIRED'),\n    [items.data]\n  );\n\n  const lookOptions = useMemo(\n    () => (looks.data?.items ?? []).map((l) => ({ value: l.id, label: l.title })),\n    [looks.data]\n  );\n  const itemOptions = useMemo(\n    () =>\n      usableItems.map((i) => ({\n        value: i.id,\n        label: `${i.name}${i.brand?.name ? ` · ${i.brand.name}` : ''}`,\n      })),\n    [usableItems]\n  );\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Lookbook\">\n        <LoadingView label=\"Loading lookbook…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError || !query.data) {\n    return (\n      <PageLayout title=\"Lookbook\">\n        <ErrorView title=\"Lookbook not found\" onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  const lookbook = query.data;\n  const entries = [...(lookbook.entries ?? [])].sort((a, b) => a.position - b.position);\n\n  const handleAddEntry = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!lookbookId || !selectedId) return;\n    addEntry.mutate(\n      {\n        lookbookId,\n        lookId: entryKind === 'look' ? selectedId : undefined,\n        styleItemId: entryKind === 'item' ? selectedId : undefined,\n        note: note.trim() || undefined,\n      },\n      {\n        onSuccess: () => {\n          setSelectedId('');\n          setNote('');\n          setAdding(false);\n        },\n      }\n    );\n  };\n\n  return (\n    <PageLayout\n      title={lookbook.name}\n      description={lookbook.description ?? undefined}\n      actions={\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/lookbooks')}\n            className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n          >\n            <ArrowLeft className=\"h-4 w-4\" /> Back\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setAdding((v) => !v);\n              setSelectedId('');\n            }}\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            {adding ? <X className=\"h-4 w-4\" /> : <Plus className=\"h-4 w-4\" />}\n            {adding ? 'Close' : 'Add entry'}\n          </button>\n          <button\n            type=\"button\"\n            disabled={deleteLookbook.isPending}\n            onClick={() => {\n              if (!lookbookId) return;\n              deleteLookbook.mutate(lookbookId, { onSuccess: () => navigateTo('/lookbooks') });\n            }}\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            {deleteLookbook.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=\"mx-auto max-w-5xl\">\n        <GlassCard treatment=\"glass\" className=\"p-6\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-accent-purple-subtle text-text-primary\">\n              <BookHeart className=\"h-6 w-6\" />\n            </div>\n            <div className=\"min-w-0 flex-1\">\n              <h2 className=\"truncate text-xl font-semibold text-text-primary\">{lookbook.name}</h2>\n              <div className=\"mt-1.5 flex flex-wrap items-center gap-2\">\n                <VisibilityChip visibility={lookbook.visibility} />\n                <span className=\"inline-flex items-center gap-1 text-xs text-text-secondary\">\n                  <Clock className=\"h-3.5 w-3.5\" /> Updated {formatRelativeTime(lookbook.updatedAt)}\n                </span>\n                <span className=\"text-xs text-text-secondary tabular-nums\">\n                  · {entries.length} {entries.length === 1 ? 'item' : 'items'}\n                </span>\n              </div>\n            </div>\n          </div>\n          {lookbook.tags.length > 0 && <TagList tags={lookbook.tags} className=\"mt-4\" />}\n        </GlassCard>\n\n        {adding && (\n          <form onSubmit={handleAddEntry} className=\"mt-6\">\n            <GlassCard treatment=\"plain\" className=\"p-5\">\n              <h3 className=\"mb-4 flex items-center gap-2 text-base font-semibold text-text-primary\">\n                <Plus className=\"h-5 w-5\" /> Add to this lookbook\n              </h3>\n              <div className=\"mb-4 flex flex-wrap gap-2\">\n                {(['look', 'item'] as EntryKind[]).map((k) => (\n                  <button\n                    key={k}\n                    type=\"button\"\n                    onClick={() => {\n                      setEntryKind(k);\n                      setSelectedId('');\n                    }}\n                    className={\n                      entryKind === k\n                        ? 'rounded-full bg-action-primary-bg px-3 py-1.5 text-sm font-medium text-action-primary-text'\n                        : 'rounded-full bg-bg-sunken px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary'\n                    }\n                  >\n                    {k === 'look' ? 'Save a look' : 'Clip a piece'}\n                  </button>\n                ))}\n              </div>\n              <SelectField\n                label={entryKind === 'look' ? 'Look' : 'Style item'}\n                value={selectedId}\n                onChange={setSelectedId}\n                options={entryKind === 'look' ? lookOptions : itemOptions}\n                placeholder={\n                  entryKind === 'look'\n                    ? looks.isLoading\n                      ? 'Loading looks…'\n                      : 'Select a look'\n                    : items.isLoading\n                      ? 'Loading items…'\n                      : 'Select a style item'\n                }\n              />\n              <TextField\n                label=\"Note (optional)\"\n                value={note}\n                onChange={setNote}\n                placeholder=\"Why you saved it…\"\n                className=\"mt-4\"\n              />\n              {addEntry.isError && (\n                <p className=\"mt-3 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n                  {addEntry.error instanceof Error ? addEntry.error.message : 'Could not add entry'}\n                </p>\n              )}\n              <div className=\"mt-4 flex justify-end\">\n                <button\n                  type=\"submit\"\n                  disabled={!selectedId || addEntry.isPending}\n                  className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n                >\n                  {addEntry.isPending ? (\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                  ) : (\n                    <Plus className=\"h-4 w-4\" />\n                  )}\n                  Add entry\n                </button>\n              </div>\n            </GlassCard>\n          </form>\n        )}\n\n        <section className=\"mt-6\">\n          <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">Board ({entries.length})</h3>\n          {entries.length === 0 ? (\n            <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n              This lookbook has no entries yet. Clip a catalogue piece or save a look to add one.\n            </p>\n          ) : (\n            <div className=\"columns-2 gap-4 md:columns-3\">\n              {entries.map((entry, idx) => {\n                const isLook = Boolean(entry.lookId);\n                const look = entry.lookId ? lookById.get(entry.lookId) : undefined;\n                const item = entry.styleItemId ? itemById.get(entry.styleItemId) : undefined;\n                const title = isLook\n                  ? (look?.title ?? 'Saved look')\n                  : (item?.name ?? 'Clipped piece');\n                const imageFileId = isLook ? look?.image?.id : item?.image?.id;\n                const removing = removeEntry.isPending && removeEntry.variables === entry.id;\n                const onOpen = () => {\n                  if (isLook && entry.lookId) navigateTo(`/looks/${entry.lookId}`);\n                  else if (entry.styleItemId) navigateTo(`/items/${entry.styleItemId}`);\n                };\n                return (\n                  <div\n                    key={entry.id}\n                    className=\"group relative mb-4 break-inside-avoid overflow-hidden rounded-xl border border-border-seam bg-bg-surface shadow-sm transition-shadow hover:shadow-lg\"\n                  >\n                    <button\n                      type=\"button\"\n                      onClick={onOpen}\n                      aria-label={`Open ${title}`}\n                      className=\"block w-full text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-focus-ring)]\"\n                    >\n                      <Thumbnail\n                        icon={\n                          isLook ? <Sparkles className=\"h-8 w-8\" /> : <Tag className=\"h-8 w-8\" />\n                        }\n                        seed={entry.id}\n                        fileId={imageFileId}\n                        alt={title}\n                        className={`w-full rounded-none ${TILE_ASPECTS[idx % TILE_ASPECTS.length]}`}\n                        overlay={\n                          <div className=\"pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-1.5 bg-gradient-to-t from-bg-canvas/90 via-bg-canvas/40 to-transparent p-3 pt-10\">\n                            {entry.note && (\n                              <span className=\"inline-flex w-fit max-w-full items-center rounded-md bg-bg-canvas/80 px-2 py-0.5 text-[11px] font-medium text-text-primary backdrop-blur\">\n                                <span className=\"truncate\">{entry.note}</span>\n                              </span>\n                            )}\n                            <p className=\"truncate text-sm font-semibold text-text-primary\">\n                              {title}\n                            </p>\n                          </div>\n                        }\n                      />\n                    </button>\n                    <button\n                      type=\"button\"\n                      disabled={removeEntry.isPending}\n                      onClick={() => removeEntry.mutate(entry.id)}\n                      aria-label={`Remove ${title}`}\n                      className=\"absolute right-2 top-2 z-10 inline-flex h-7 w-7 items-center justify-center rounded-full bg-bg-surface/90 text-text-secondary opacity-100 shadow-sm backdrop-blur transition-opacity hover:text-status-error-text sm:opacity-0 sm:focus-visible:opacity-100 sm:group-hover:opacity-100 disabled:opacity-60\"\n                    >\n                      {removing ? (\n                        <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n                      ) : (\n                        <X className=\"h-3.5 w-3.5\" />\n                      )}\n                    </button>\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </section>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"LookDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/looks/LookDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA+EH,wBAAgB,cAAc,gCA2R7B"}
+{"version":3,"file":"LookDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/looks/LookDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAuFH,wBAAgB,cAAc,gCA2R7B"}

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

@@ -24,33 +24,35 @@ function L(e) {
 	return t.length === 0 ? "?" : t.length === 1 ? t[0].slice(0, 2).toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
 }
 function R({ authorId: t }) {
-	let { apiGatewayUrl: n, authToken: r, workspaceId: i } = e(), [a, o] = C(!1), s = I(S(() => [{
+	let { apiGatewayUrl: n, authToken: r, workspaceId: i, navigateTo: a } = e(), [o, s] = C(!1), c = I(S(() => [{
 		actorId: t,
 		actorType: "user"
 	}], [t]), {
 		apiGatewayUrl: n,
 		authToken: r,
 		workspaceId: i
-	})[t], c = s?.displayName ?? "Creator", l = s?.avatarUrl;
-	return /* @__PURE__ */ P("span", {
-		className: "inline-flex items-center gap-2",
+	})[t], l = c?.displayName ?? "Creator", u = c?.avatarUrl;
+	return /* @__PURE__ */ P("button", {
+		type: "button",
+		onClick: () => a(`/profile/${t}`),
+		className: "inline-flex items-center gap-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
 		children: [/* @__PURE__ */ N("span", {
-			title: c,
+			title: l,
 			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__ */ N("img", {
-				src: l,
-				alt: c,
+			children: u && !o ? /* @__PURE__ */ N("img", {
+				src: u,
+				alt: l,
 				loading: "lazy",
-				onError: () => o(!0),
+				onError: () => s(!0),
 				className: "h-full w-full object-cover"
 			}) : /* @__PURE__ */ N("span", {
 				className: "text-[10px] font-semibold text-text-secondary",
-				children: L(c)
+				children: L(l)
 			})
 		}), /* @__PURE__ */ N("span", {
-			className: "font-medium text-text-primary",
-			title: s?.email ?? t,
-			children: c
+			className: "font-medium text-text-primary hover:underline",
+			title: c?.email ?? t,
+			children: l
 		})]
 	});
 }