@burdenoff/microfe-coolandlovely 2026.706.1 → 2026.706.2

package/dist/coolandlovely/pages/discover/DiscoverPage.js

@@ -0,0 +1,223 @@
+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 { useLooks as a, useMyFollowing as o, useMyStyleProfile as s, useStyleItems as c } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { titleCase as l } from "../../utils/formatters.js";
+import { TagList as u } from "../../components/TagList.js";
+import { EmptyState as d } from "../../components/EmptyState.js";
+import { useMemo as f } from "react";
+import { Compass as p, Heart as m, ShoppingBag as h, Sparkles as g, UserCheck as _, Users as v } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { EmphasisPanel as x, PagePurpose as S } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/discover/DiscoverPage.tsx
+function C(e) {
+	return new Set(e.map((e) => e.trim().toLowerCase()).filter(Boolean));
+}
+function w(e, t) {
+	let n = 0;
+	for (let r of e) t.has(r.trim().toLowerCase()) && (n += 1);
+	return n;
+}
+var T = ({ title: e, icon: t, sublabel: n, children: r }) => /* @__PURE__ */ b("section", {
+	className: "mt-8",
+	children: [/* @__PURE__ */ b("div", {
+		className: "mb-3",
+		children: [/* @__PURE__ */ b("h2", {
+			className: "flex items-center gap-2 text-lg font-semibold text-text-primary",
+			children: [
+				t,
+				" ",
+				e
+			]
+		}), n ? /* @__PURE__ */ y("p", {
+			className: "mt-0.5 text-sm text-text-secondary",
+			children: n
+		}) : null]
+	}), r]
+});
+function E() {
+	let { navigateTo: E } = e(), D = s(), O = a({ pagination: {
+		limit: 100,
+		offset: 0
+	} }), k = c({ pagination: {
+		limit: 100,
+		offset: 0
+	} }), A = o(), j = D.isLoading || O.isLoading || k.isLoading, M = O.isError && k.isError, N = f(() => {
+		let e = D.data, t = O.data?.items ?? [], n = k.data?.items ?? [], r = new Set((A.data ?? []).map((e) => e.ownerId)), i = C([
+			...e?.stylePreferences ?? [],
+			...e?.palette ?? [],
+			...e?.favouriteBrands ?? []
+		]), a = C(e?.palette ?? []), o = C(e?.favouriteBrands ?? []), s = (e) => w(e.tags, i) * 2 + +!!i.has(e.occasion.toLowerCase()) + e.likeCount * .05 + e.saveCount * .05, c = (e) => w(e.tags, i) * 2 + w(e.colours, a) * 2 + +!!i.has(e.category.toLowerCase()) + (o.size && e.tags.some((e) => o.has(e.toLowerCase())) ? 1 : 0), l = i.size > 0, u = [...t].sort((e, t) => l ? s(t) - s(e) : t.likeCount + t.saveCount - (e.likeCount + e.saveCount)).slice(0, 8), d = [...n].filter((e) => l ? c(e) > 0 : !0).sort((e, t) => c(t) - c(e)).slice(0, 8), f = t.filter((e) => r.has(e.authorId)).sort((e, t) => t.likeCount + t.saveCount - (e.likeCount + e.saveCount)).slice(0, 8);
+		return {
+			hasProfile: !!e,
+			hasTaste: l,
+			madeForYou: u,
+			inYourPalette: d,
+			fromFollowing: f,
+			followingProfiles: A.data ?? []
+		};
+	}, [
+		D.data,
+		O.data,
+		k.data,
+		A.data
+	]);
+	return j ? /* @__PURE__ */ y(t, {
+		title: "Discover",
+		children: /* @__PURE__ */ y(r, { label: "Curating your feed…" })
+	}) : M ? /* @__PURE__ */ y(t, {
+		title: "Discover",
+		children: /* @__PURE__ */ y(n, { onRetry: () => {
+			O.refetch(), k.refetch();
+		} })
+	}) : /* @__PURE__ */ b(t, {
+		title: "Discover",
+		description: "Looks and pieces tuned to your taste",
+		hero: !0,
+		children: [
+			/* @__PURE__ */ y(S, {
+				className: "mb-6",
+				children: "Your personalised feed, computed live from your style profile against the pieces and looks on the platform — the closer a piece matches the aesthetics, palette and brands you follow, the higher it ranks. Nothing here is fabricated."
+			}),
+			N.hasProfile ? null : /* @__PURE__ */ y(x, {
+				className: "mb-8",
+				children: /* @__PURE__ */ b("div", {
+					className: "flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h2", {
+						className: "text-lg font-semibold text-text-primary",
+						children: "Build your style profile"
+					}), /* @__PURE__ */ y("p", {
+						className: "mt-1 text-sm text-text-secondary",
+						children: "Tell us your aesthetics, palette and favourite brands and this feed tunes itself to you."
+					})] }), /* @__PURE__ */ b("button", {
+						type: "button",
+						onClick: () => E("/profile"),
+						className: "inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90",
+						children: [/* @__PURE__ */ y(g, { className: "h-4 w-4" }), " Create profile"]
+					})]
+				})
+			}),
+			/* @__PURE__ */ y(T, {
+				title: "Made for you",
+				icon: /* @__PURE__ */ y(p, { className: "h-5 w-5" }),
+				sublabel: N.hasTaste ? "Ranked to match your style profile" : "Most-loved looks on the platform",
+				children: N.madeForYou.length === 0 ? /* @__PURE__ */ y(d, {
+					title: "No looks yet",
+					description: "Once looks are published they will appear here, tuned to your taste."
+				}) : /* @__PURE__ */ y("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+					children: N.madeForYou.map((e) => /* @__PURE__ */ b("button", {
+						type: "button",
+						onClick: () => E(`/looks/${e.id}`),
+						className: "group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md",
+						children: [/* @__PURE__ */ y(i, {
+							icon: /* @__PURE__ */ y(g, { className: "h-6 w-6" }),
+							seed: e.id,
+							fileId: e.image?.id,
+							alt: e.title,
+							className: "aspect-[4/5] w-full rounded-none"
+						}), /* @__PURE__ */ b("div", {
+							className: "min-w-0 p-3",
+							children: [
+								/* @__PURE__ */ y("p", {
+									className: "truncate text-sm font-medium text-text-primary",
+									children: e.title
+								}),
+								/* @__PURE__ */ y("p", {
+									className: "mt-0.5 text-xs text-text-secondary",
+									children: l(e.occasion)
+								}),
+								/* @__PURE__ */ b("span", {
+									className: "mt-2 inline-flex items-center gap-1 text-xs text-text-secondary",
+									children: [
+										/* @__PURE__ */ y(m, { className: "h-3.5 w-3.5" }),
+										" ",
+										e.likeCount
+									]
+								})
+							]
+						})]
+					}, e.id))
+				})
+			}),
+			N.inYourPalette.length > 0 ? /* @__PURE__ */ y(T, {
+				title: "In your palette",
+				icon: /* @__PURE__ */ y(h, { className: "h-5 w-5" }),
+				sublabel: "Pieces that match your colours, categories and tags",
+				children: /* @__PURE__ */ y("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+					children: N.inYourPalette.map((e) => /* @__PURE__ */ b("button", {
+						type: "button",
+						onClick: () => E(`/items/${e.id}`),
+						className: "group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md",
+						children: [/* @__PURE__ */ y(i, {
+							icon: /* @__PURE__ */ y(h, { className: "h-6 w-6" }),
+							seed: e.id,
+							fileId: e.image?.id,
+							alt: e.name,
+							className: "aspect-[4/5] w-full rounded-none"
+						}), /* @__PURE__ */ b("div", {
+							className: "min-w-0 p-3",
+							children: [
+								/* @__PURE__ */ y("p", {
+									className: "truncate text-sm font-medium text-text-primary",
+									children: e.name
+								}),
+								/* @__PURE__ */ y("p", {
+									className: "mt-0.5 text-xs text-text-secondary",
+									children: l(e.category)
+								}),
+								/* @__PURE__ */ y(u, {
+									tags: e.colours.slice(0, 3),
+									className: "mt-2"
+								})
+							]
+						})]
+					}, e.id))
+				})
+			}) : null,
+			/* @__PURE__ */ y(T, {
+				title: "From people you follow",
+				icon: /* @__PURE__ */ y(_, { className: "h-5 w-5" }),
+				sublabel: N.followingProfiles.length === 0 ? "Follow creators and shoppers to see their looks here" : `You follow ${N.followingProfiles.length} ${N.followingProfiles.length === 1 ? "person" : "people"}`,
+				children: N.followingProfiles.length === 0 ? /* @__PURE__ */ y(d, {
+					title: "You are not following anyone yet",
+					description: "Open a look or a style profile and tap Follow to build a feed from people whose taste you love.",
+					icon: /* @__PURE__ */ y(v, { className: "h-8 w-8" })
+				}) : N.fromFollowing.length === 0 ? /* @__PURE__ */ y("div", {
+					className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
+					children: "The people you follow have not published looks visible to you yet."
+				}) : /* @__PURE__ */ y("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+					children: N.fromFollowing.map((e) => /* @__PURE__ */ b("button", {
+						type: "button",
+						onClick: () => E(`/looks/${e.id}`),
+						className: "group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md",
+						children: [/* @__PURE__ */ y(i, {
+							icon: /* @__PURE__ */ y(g, { className: "h-6 w-6" }),
+							seed: e.id,
+							fileId: e.image?.id,
+							alt: e.title,
+							className: "aspect-[4/5] w-full rounded-none"
+						}), /* @__PURE__ */ b("div", {
+							className: "min-w-0 p-3",
+							children: [/* @__PURE__ */ y("p", {
+								className: "truncate text-sm font-medium text-text-primary",
+								children: e.title
+							}), /* @__PURE__ */ y("p", {
+								className: "mt-0.5 text-xs text-text-secondary",
+								children: l(e.occasion)
+							})]
+						})]
+					}, e.id))
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { E as DiscoverPage };
+
+//# sourceMappingURL=DiscoverPage.js.map

package/dist/coolandlovely/pages/discover/DiscoverPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscoverPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/discover/DiscoverPage.tsx"],"sourcesContent":["/**\n * Discover Page\n * @module coolandlovely/pages/discover\n *\n * A profile-tuned discovery feed computed entirely client-side over the REAL\n * catalogue + social lists (cooListLooks / cooListStyleItems) and the caller's\n * own style profile (cooMyStyleProfile) + follow graph (cooMyFollowing). It only\n * ranks what is actually on the platform against the taste the shopper declared\n * — no fabricated recommendations, no black-box \"AI\" (that is roadmap). When the\n * shopper has no profile yet, it invites them to build one.\n */\n\nimport type { FC, ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport { Compass, Sparkles, Heart, ShoppingBag, UserCheck, Users } from 'lucide-react';\nimport { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useMyStyleProfile, useLooks, useStyleItems, useMyFollowing } from '../../hooks';\nimport type { CooLook, CooStyleItem } from '../../types';\nimport { titleCase } from '../../utils/formatters';\n\n/** Lower-cased token set used for overlap scoring. */\nfunction tokenSet(values: string[]): Set<string> {\n  return new Set(values.map((v) => v.trim().toLowerCase()).filter(Boolean));\n}\n\n/** Count how many of `candidate`'s tokens appear in the taste set. */\nfunction overlap(candidate: string[], taste: Set<string>): number {\n  let n = 0;\n  for (const c of candidate) {\n    if (taste.has(c.trim().toLowerCase())) n += 1;\n  }\n  return n;\n}\n\ninterface SectionProps {\n  title: string;\n  icon: ReactNode;\n  children: ReactNode;\n  sublabel?: string;\n}\n\nconst Section: FC<SectionProps> = ({ title, icon, sublabel, children }) => (\n  <section className=\"mt-8\">\n    <div className=\"mb-3\">\n      <h2 className=\"flex items-center gap-2 text-lg font-semibold text-text-primary\">\n        {icon} {title}\n      </h2>\n      {sublabel ? <p className=\"mt-0.5 text-sm text-text-secondary\">{sublabel}</p> : null}\n    </div>\n    {children}\n  </section>\n);\n\nexport function DiscoverPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const profile = useMyStyleProfile();\n  const looks = useLooks({ pagination: { limit: 100, offset: 0 } });\n  const items = useStyleItems({ pagination: { limit: 100, offset: 0 } });\n  const following = useMyFollowing();\n\n  const isLoading = profile.isLoading || looks.isLoading || items.isLoading;\n  const isError = looks.isError && items.isError;\n\n  const feed = useMemo(() => {\n    const p = profile.data;\n    const lookRows = looks.data?.items ?? [];\n    const itemRows = items.data?.items ?? [];\n    const followingOwners = new Set((following.data ?? []).map((f) => f.ownerId));\n\n    // Taste = declared style preferences ∪ palette ∪ favourite brands.\n    const taste = tokenSet([\n      ...(p?.stylePreferences ?? []),\n      ...(p?.palette ?? []),\n      ...(p?.favouriteBrands ?? []),\n    ]);\n    const paletteTokens = tokenSet(p?.palette ?? []);\n    const brandTokens = tokenSet(p?.favouriteBrands ?? []);\n\n    const scoreLook = (l: CooLook): number =>\n      overlap(l.tags, taste) * 2 +\n      (taste.has(l.occasion.toLowerCase()) ? 1 : 0) +\n      l.likeCount * 0.05 +\n      l.saveCount * 0.05;\n\n    const scoreItem = (it: CooStyleItem): number =>\n      overlap(it.tags, taste) * 2 +\n      overlap(it.colours, paletteTokens) * 2 +\n      (taste.has(it.category.toLowerCase()) ? 1 : 0) +\n      (brandTokens.size && it.tags.some((t) => brandTokens.has(t.toLowerCase())) ? 1 : 0);\n\n    const hasTaste = taste.size > 0;\n\n    // \"Made for you\": when the shopper has taste, rank by match then engagement;\n    // otherwise fall back to most-loved looks so the feed is never empty.\n    const madeForYou = [...lookRows]\n      .sort((a, b) =>\n        hasTaste\n          ? scoreLook(b) - scoreLook(a)\n          : b.likeCount + b.saveCount - (a.likeCount + a.saveCount)\n      )\n      .slice(0, 8);\n\n    const inYourPalette = [...itemRows]\n      .filter((it) => (hasTaste ? scoreItem(it) > 0 : true))\n      .sort((a, b) => scoreItem(b) - scoreItem(a))\n      .slice(0, 8);\n\n    const fromFollowing = lookRows\n      .filter((l) => followingOwners.has(l.authorId))\n      .sort((a, b) => b.likeCount + b.saveCount - (a.likeCount + a.saveCount))\n      .slice(0, 8);\n\n    return {\n      hasProfile: Boolean(p),\n      hasTaste,\n      madeForYou,\n      inYourPalette,\n      fromFollowing,\n      followingProfiles: following.data ?? [],\n    };\n  }, [profile.data, looks.data, items.data, following.data]);\n\n  if (isLoading) {\n    return (\n      <PageLayout title=\"Discover\">\n        <LoadingView label=\"Curating your feed…\" />\n      </PageLayout>\n    );\n  }\n\n  if (isError) {\n    return (\n      <PageLayout title=\"Discover\">\n        <ErrorView\n          onRetry={() => {\n            void looks.refetch();\n            void items.refetch();\n          }}\n        />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout title=\"Discover\" description=\"Looks and pieces tuned to your taste\" hero>\n      <PagePurpose className=\"mb-6\">\n        Your personalised feed, computed live from your style profile against the pieces and looks on\n        the platform — the closer a piece matches the aesthetics, palette and brands you follow, the\n        higher it ranks. Nothing here is fabricated.\n      </PagePurpose>\n\n      {!feed.hasProfile ? (\n        <EmphasisPanel className=\"mb-8\">\n          <div className=\"flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <h2 className=\"text-lg font-semibold text-text-primary\">Build your style profile</h2>\n              <p className=\"mt-1 text-sm text-text-secondary\">\n                Tell us your aesthetics, palette and favourite brands and this feed tunes itself to you.\n              </p>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/profile')}\n              className=\"inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90\"\n            >\n              <Sparkles className=\"h-4 w-4\" /> Create profile\n            </button>\n          </div>\n        </EmphasisPanel>\n      ) : null}\n\n      <Section\n        title=\"Made for you\"\n        icon={<Compass className=\"h-5 w-5\" />}\n        sublabel={feed.hasTaste ? 'Ranked to match your style profile' : 'Most-loved looks on the platform'}\n      >\n        {feed.madeForYou.length === 0 ? (\n          <EmptyState\n            title=\"No looks yet\"\n            description=\"Once looks are published they will appear here, tuned to your taste.\"\n          />\n        ) : (\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n            {feed.madeForYou.map((look) => (\n              <button\n                key={look.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/looks/${look.id}`)}\n                className=\"group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md\"\n              >\n                <Thumbnail\n                  icon={<Sparkles className=\"h-6 w-6\" />}\n                  seed={look.id}\n                  fileId={look.image?.id}\n                  alt={look.title}\n                  className=\"aspect-[4/5] w-full rounded-none\"\n                />\n                <div className=\"min-w-0 p-3\">\n                  <p className=\"truncate text-sm font-medium text-text-primary\">{look.title}</p>\n                  <p className=\"mt-0.5 text-xs text-text-secondary\">{titleCase(look.occasion)}</p>\n                  <span className=\"mt-2 inline-flex items-center gap-1 text-xs text-text-secondary\">\n                    <Heart className=\"h-3.5 w-3.5\" /> {look.likeCount}\n                  </span>\n                </div>\n              </button>\n            ))}\n          </div>\n        )}\n      </Section>\n\n      {feed.inYourPalette.length > 0 ? (\n        <Section\n          title=\"In your palette\"\n          icon={<ShoppingBag className=\"h-5 w-5\" />}\n          sublabel=\"Pieces that match your colours, categories and tags\"\n        >\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n            {feed.inYourPalette.map((item) => (\n              <button\n                key={item.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/items/${item.id}`)}\n                className=\"group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md\"\n              >\n                <Thumbnail\n                  icon={<ShoppingBag className=\"h-6 w-6\" />}\n                  seed={item.id}\n                  fileId={item.image?.id}\n                  alt={item.name}\n                  className=\"aspect-[4/5] w-full rounded-none\"\n                />\n                <div className=\"min-w-0 p-3\">\n                  <p className=\"truncate text-sm font-medium text-text-primary\">{item.name}</p>\n                  <p className=\"mt-0.5 text-xs text-text-secondary\">{titleCase(item.category)}</p>\n                  <TagList tags={item.colours.slice(0, 3)} className=\"mt-2\" />\n                </div>\n              </button>\n            ))}\n          </div>\n        </Section>\n      ) : null}\n\n      <Section\n        title=\"From people you follow\"\n        icon={<UserCheck className=\"h-5 w-5\" />}\n        sublabel={\n          feed.followingProfiles.length === 0\n            ? 'Follow creators and shoppers to see their looks here'\n            : `You follow ${feed.followingProfiles.length} ${feed.followingProfiles.length === 1 ? 'person' : 'people'}`\n        }\n      >\n        {feed.followingProfiles.length === 0 ? (\n          <EmptyState\n            title=\"You are not following anyone yet\"\n            description=\"Open a look or a style profile and tap Follow to build a feed from people whose taste you love.\"\n            icon={<Users className=\"h-8 w-8\" />}\n          />\n        ) : feed.fromFollowing.length === 0 ? (\n          <div className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n            The people you follow have not published looks visible to you yet.\n          </div>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n            {feed.fromFollowing.map((look) => (\n              <button\n                key={look.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/looks/${look.id}`)}\n                className=\"group flex flex-col overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-colors hover:border-accent-foreground/20 hover:shadow-md\"\n              >\n                <Thumbnail\n                  icon={<Sparkles className=\"h-6 w-6\" />}\n                  seed={look.id}\n                  fileId={look.image?.id}\n                  alt={look.title}\n                  className=\"aspect-[4/5] w-full rounded-none\"\n                />\n                <div className=\"min-w-0 p-3\">\n                  <p className=\"truncate text-sm font-medium text-text-primary\">{look.title}</p>\n                  <p className=\"mt-0.5 text-xs text-text-secondary\">{titleCase(look.occasion)}</p>\n                </div>\n              </button>\n            ))}\n          </div>\n        )}\n      </Section>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA2BA,SAAS,EAAS,GAA+B;AAC/C,QAAO,IAAI,IAAI,EAAO,KAAK,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,QAAQ,CAAC;;AAI3E,SAAS,EAAQ,GAAqB,GAA4B;CAChE,IAAI,IAAI;AACR,MAAK,IAAM,KAAK,EACd,CAAI,EAAM,IAAI,EAAE,MAAM,CAAC,aAAa,CAAC,KAAE,KAAK;AAE9C,QAAO;;AAUT,IAAM,KAA6B,EAAE,UAAO,SAAM,aAAU,kBAC1D,kBAAC,WAAD;CAAS,WAAU;WAAnB,CACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,MAAD;GAAI,WAAU;aAAd;IACG;IAAK;IAAE;IACL;MACJ,IAAW,kBAAC,KAAD;GAAG,WAAU;aAAsC;GAAa,CAAA,GAAG,KAC3E;KACL,EACO;;AAGZ,SAAgB,IAAe;CAC7B,IAAM,EAAE,kBAAe,GAAkB,EACnC,IAAU,GAAmB,EAC7B,IAAQ,EAAS,EAAE,YAAY;EAAE,OAAO;EAAK,QAAQ;EAAG,EAAE,CAAC,EAC3D,IAAQ,EAAc,EAAE,YAAY;EAAE,OAAO;EAAK,QAAQ;EAAG,EAAE,CAAC,EAChE,IAAY,GAAgB,EAE5B,IAAY,EAAQ,aAAa,EAAM,aAAa,EAAM,WAC1D,IAAU,EAAM,WAAW,EAAM,SAEjC,IAAO,QAAc;EACzB,IAAM,IAAI,EAAQ,MACZ,IAAW,EAAM,MAAM,SAAS,EAAE,EAClC,IAAW,EAAM,MAAM,SAAS,EAAE,EAClC,IAAkB,IAAI,KAAK,EAAU,QAAQ,EAAE,EAAE,KAAK,MAAM,EAAE,QAAQ,CAAC,EAGvE,IAAQ,EAAS;GACrB,GAAI,GAAG,oBAAoB,EAAE;GAC7B,GAAI,GAAG,WAAW,EAAE;GACpB,GAAI,GAAG,mBAAmB,EAAE;GAC7B,CAAC,EACI,IAAgB,EAAS,GAAG,WAAW,EAAE,CAAC,EAC1C,IAAc,EAAS,GAAG,mBAAmB,EAAE,CAAC,EAEhD,KAAa,MACjB,EAAQ,EAAE,MAAM,EAAM,GAAG,IACxB,KAAM,IAAI,EAAE,SAAS,aAAa,CAAC,GACpC,EAAE,YAAY,MACd,EAAE,YAAY,KAEV,KAAa,MACjB,EAAQ,EAAG,MAAM,EAAM,GAAG,IAC1B,EAAQ,EAAG,SAAS,EAAc,GAAG,IACpC,KAAM,IAAI,EAAG,SAAS,aAAa,CAAC,IACpC,EAAY,QAAQ,EAAG,KAAK,MAAM,MAAM,EAAY,IAAI,EAAE,aAAa,CAAC,CAAC,GAAG,IAAI,IAE7E,IAAW,EAAM,OAAO,GAIxB,IAAa,CAAC,GAAG,EAAS,CAC7B,MAAM,GAAG,MACR,IACI,EAAU,EAAE,GAAG,EAAU,EAAE,GAC3B,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,WAClD,CACA,MAAM,GAAG,EAAE,EAER,IAAgB,CAAC,GAAG,EAAS,CAChC,QAAQ,MAAQ,IAAW,EAAU,EAAG,GAAG,IAAI,GAAM,CACrD,MAAM,GAAG,MAAM,EAAU,EAAE,GAAG,EAAU,EAAE,CAAC,CAC3C,MAAM,GAAG,EAAE,EAER,IAAgB,EACnB,QAAQ,MAAM,EAAgB,IAAI,EAAE,SAAS,CAAC,CAC9C,MAAM,GAAG,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,CACvE,MAAM,GAAG,EAAE;AAEd,SAAO;GACL,YAAY,EAAQ;GACpB;GACA;GACA;GACA;GACA,mBAAmB,EAAU,QAAQ,EAAE;GACxC;IACA;EAAC,EAAQ;EAAM,EAAM;EAAM,EAAM;EAAM,EAAU;EAAK,CAAC;AAuB1D,QArBI,IAEA,kBAAC,GAAD;EAAY,OAAM;YAChB,kBAAC,GAAD,EAAa,OAAM,uBAAwB,CAAA;EAChC,CAAA,GAIb,IAEA,kBAAC,GAAD;EAAY,OAAM;YAChB,kBAAC,GAAD,EACE,eAAe;AAER,GADA,EAAM,SAAS,EACf,EAAM,SAAS;KAEtB,CAAA;EACS,CAAA,GAKf,kBAAC,GAAD;EAAY,OAAM;EAAW,aAAY;EAAuC,MAAA;YAAhF;GACE,kBAAC,GAAD;IAAa,WAAU;cAAO;IAIhB,CAAA;GAEZ,EAAK,aAkBH,OAjBF,kBAAC,GAAD;IAAe,WAAU;cACvB,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAA6B,CAAA,EACrF,kBAAC,KAAD;MAAG,WAAU;gBAAmC;MAE5C,CAAA,CACA,EAAA,CAAA,EACN,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAW,WAAW;MACrC,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAAA,kBACzB;QACL;;IACQ,CAAA;GAGlB,kBAAC,GAAD;IACE,OAAM;IACN,MAAM,kBAAC,GAAD,EAAS,WAAU,WAAY,CAAA;IACrC,UAAU,EAAK,WAAW,uCAAuC;cAEhE,EAAK,WAAW,WAAW,IAC1B,kBAAC,GAAD;KACE,OAAM;KACN,aAAY;KACZ,CAAA,GAEF,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAK,WAAW,KAAK,MACpB,kBAAC,UAAD;MAEE,MAAK;MACL,eAAe,EAAW,UAAU,EAAK,KAAK;MAC9C,WAAU;gBAJZ,CAME,kBAAC,GAAD;OACE,MAAM,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;OACtC,MAAM,EAAK;OACX,QAAQ,EAAK,OAAO;OACpB,KAAK,EAAK;OACV,WAAU;OACV,CAAA,EACF,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,KAAD;SAAG,WAAU;mBAAkD,EAAK;SAAU,CAAA;QAC9E,kBAAC,KAAD;SAAG,WAAU;mBAAsC,EAAU,EAAK,SAAS;SAAK,CAAA;QAChF,kBAAC,QAAD;SAAM,WAAU;mBAAhB;UACE,kBAAC,GAAD,EAAO,WAAU,eAAgB,CAAA;;UAAE,EAAK;UACnC;;QACH;SACC;QAnBF,EAAK,GAmBH,CACT;KACE,CAAA;IAEA,CAAA;GAET,EAAK,cAAc,SAAS,IAC3B,kBAAC,GAAD;IACE,OAAM;IACN,MAAM,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;IACzC,UAAS;cAET,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAK,cAAc,KAAK,MACvB,kBAAC,UAAD;MAEE,MAAK;MACL,eAAe,EAAW,UAAU,EAAK,KAAK;MAC9C,WAAU;gBAJZ,CAME,kBAAC,GAAD;OACE,MAAM,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;OACzC,MAAM,EAAK;OACX,QAAQ,EAAK,OAAO;OACpB,KAAK,EAAK;OACV,WAAU;OACV,CAAA,EACF,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,KAAD;SAAG,WAAU;mBAAkD,EAAK;SAAS,CAAA;QAC7E,kBAAC,KAAD;SAAG,WAAU;mBAAsC,EAAU,EAAK,SAAS;SAAK,CAAA;QAChF,kBAAC,GAAD;SAAS,MAAM,EAAK,QAAQ,MAAM,GAAG,EAAE;SAAE,WAAU;SAAS,CAAA;QACxD;SACC;QAjBF,EAAK,GAiBH,CACT;KACE,CAAA;IACE,CAAA,GACR;GAEJ,kBAAC,GAAD;IACE,OAAM;IACN,MAAM,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;IACvC,UACE,EAAK,kBAAkB,WAAW,IAC9B,yDACA,cAAc,EAAK,kBAAkB,OAAO,GAAG,EAAK,kBAAkB,WAAW,IAAI,WAAW;cAGrG,EAAK,kBAAkB,WAAW,IACjC,kBAAC,GAAD;KACE,OAAM;KACN,aAAY;KACZ,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;KACnC,CAAA,GACA,EAAK,cAAc,WAAW,IAChC,kBAAC,OAAD;KAAK,WAAU;eAAqF;KAE9F,CAAA,GAEN,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAK,cAAc,KAAK,MACvB,kBAAC,UAAD;MAEE,MAAK;MACL,eAAe,EAAW,UAAU,EAAK,KAAK;MAC9C,WAAU;gBAJZ,CAME,kBAAC,GAAD;OACE,MAAM,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;OACtC,MAAM,EAAK;OACX,QAAQ,EAAK,OAAO;OACpB,KAAK,EAAK;OACV,WAAU;OACV,CAAA,EACF,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAkD,EAAK;QAAU,CAAA,EAC9E,kBAAC,KAAD;QAAG,WAAU;kBAAsC,EAAU,EAAK,SAAS;QAAK,CAAA,CAC5E;SACC;QAhBF,EAAK,GAgBH,CACT;KACE,CAAA;IAEA,CAAA;GACC"}

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

@@ -8,113 +8,117 @@ import "../../hooks/index.js";
 import { formatDate as c, formatPrice as l, titleCase as u } from "../../utils/formatters.js";
 import { TagList as d } from "../../components/TagList.js";
 import { categoryIcon as f } from "../../utils/icons.js";
-import { Archive as p, ArrowLeft as m, Loader2 as h, Pencil as g, Shapes as _, Store as v } from "lucide-react";
-import { useParams as y } from "react-router-dom";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { GlassCard as S } from "@burdenoff/fe-libs/ui";
+import { AddToLookbookButton as p } from "../../components/AddToLookbookButton.js";
+import { Archive as m, ArrowLeft as h, Loader2 as g, Pencil as _, Shapes as v, Store as y } from "lucide-react";
+import { useParams as b } from "react-router-dom";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { GlassCard as C } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/items/StyleItemDetailPage.tsx
-function C() {
-	let { itemId: C } = y(), { navigateTo: w } = e(), T = s(C), E = o();
-	if (T.isLoading) return /* @__PURE__ */ b(t, {
+function w() {
+	let { itemId: w } = b(), { navigateTo: T } = e(), E = s(w), D = o();
+	if (E.isLoading) return /* @__PURE__ */ x(t, {
 		title: "Style item",
-		children: /* @__PURE__ */ b(i, { label: "Loading item…" })
+		children: /* @__PURE__ */ x(i, { label: "Loading item…" })
 	});
-	if (T.isError || !T.data) return /* @__PURE__ */ b(t, {
+	if (E.isError || !E.data) return /* @__PURE__ */ x(t, {
 		title: "Style item",
-		children: /* @__PURE__ */ b(r, {
+		children: /* @__PURE__ */ x(r, {
 			title: "Item not found",
-			onRetry: () => void T.refetch()
+			onRetry: () => void E.refetch()
 		})
 	});
-	let D = T.data, O = D.status === "RETIRED";
-	return /* @__PURE__ */ b(t, {
-		title: D.name,
-		description: D.brand?.name ?? void 0,
-		actions: /* @__PURE__ */ x("div", {
-			className: "flex items-center gap-2",
+	let O = E.data, k = O.status === "RETIRED";
+	return /* @__PURE__ */ x(t, {
+		title: O.name,
+		description: O.brand?.name ?? void 0,
+		actions: /* @__PURE__ */ S("div", {
+			className: "flex flex-wrap items-center gap-2",
 			children: [
-				/* @__PURE__ */ x("button", {
+				/* @__PURE__ */ S("button", {
 					type: "button",
-					onClick: () => w("/items"),
+					onClick: () => T("/items"),
 					className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
-					children: [/* @__PURE__ */ b(m, { className: "h-4 w-4" }), " Back"]
+					children: [/* @__PURE__ */ x(h, { className: "h-4 w-4" }), " Back"]
 				}),
-				/* @__PURE__ */ x("button", {
+				/* @__PURE__ */ x(p, { styleItemId: O.id }),
+				/* @__PURE__ */ S("button", {
 					type: "button",
-					onClick: () => w(`/items/${D.id}/edit`),
+					onClick: () => T(`/items/${O.id}/edit`),
 					className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
-					children: [/* @__PURE__ */ b(g, { className: "h-4 w-4" }), " Edit"]
+					children: [/* @__PURE__ */ x(_, { className: "h-4 w-4" }), " Edit"]
 				}),
-				!O && /* @__PURE__ */ x("button", {
+				!k && /* @__PURE__ */ S("button", {
 					type: "button",
-					disabled: E.isPending,
-					onClick: () => E.mutate(D.id, { onSuccess: () => w("/items") }),
+					disabled: D.isPending,
+					onClick: () => D.mutate(O.id, { onSuccess: () => T("/items") }),
 					className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50",
-					children: [E.isPending ? /* @__PURE__ */ b(h, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ b(p, { className: "h-4 w-4" }), "Archive"]
+					children: [D.isPending ? /* @__PURE__ */ x(g, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ x(m, { className: "h-4 w-4" }), "Archive"]
 				})
 			]
 		}),
-		children: /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ S("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
-			children: [/* @__PURE__ */ b("div", {
+			children: [/* @__PURE__ */ x("div", {
 				className: "lg:col-span-2",
-				children: /* @__PURE__ */ x(S, {
+				children: /* @__PURE__ */ S(C, {
 					treatment: "glass",
 					className: "overflow-hidden p-0",
-					children: [/* @__PURE__ */ b(a, {
-						icon: f(D.category, 40),
-						seed: D.id,
+					children: [/* @__PURE__ */ x(a, {
+						icon: f(O.category, 40),
+						seed: O.id,
+						fileId: O.image?.id,
+						alt: O.name,
 						className: "h-52 w-full"
-					}), /* @__PURE__ */ x("div", {
+					}), /* @__PURE__ */ S("div", {
 						className: "p-6",
 						children: [
-							/* @__PURE__ */ x("div", {
+							/* @__PURE__ */ S("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ b("h2", {
+								children: [/* @__PURE__ */ x("h2", {
 									className: "text-xl font-semibold text-text-primary",
-									children: D.name
-								}), /* @__PURE__ */ b(n, {
-									status: D.status,
+									children: O.name
+								}), /* @__PURE__ */ x(n, {
+									status: O.status,
 									className: "ml-auto"
 								})]
 							}),
-							/* @__PURE__ */ b("p", {
+							/* @__PURE__ */ x("p", {
 								className: "mt-1 text-2xl font-bold text-text-primary tabular-nums",
-								children: l(D.price, D.currency)
+								children: l(O.price, O.currency)
 							}),
-							D.description && /* @__PURE__ */ b("p", {
+							O.description && /* @__PURE__ */ x("p", {
 								className: "mt-3 text-sm text-text-secondary",
-								children: D.description
+								children: O.description
 							}),
-							/* @__PURE__ */ x("div", {
+							/* @__PURE__ */ S("div", {
 								className: "mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2",
 								children: [
-									D.colours.length > 0 && /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+									O.colours.length > 0 && /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
 										className: "mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary",
 										children: "Colours"
-									}), /* @__PURE__ */ b(d, {
-										tags: D.colours,
+									}), /* @__PURE__ */ x(d, {
+										tags: O.colours,
 										max: 10
 									})] }),
-									D.sizes.length > 0 && /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+									O.sizes.length > 0 && /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
 										className: "mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary",
 										children: "Sizes"
-									}), /* @__PURE__ */ b(d, {
-										tags: D.sizes,
+									}), /* @__PURE__ */ x(d, {
+										tags: O.sizes,
 										max: 10
 									})] }),
-									D.materials.length > 0 && /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+									O.materials.length > 0 && /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
 										className: "mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary",
 										children: "Materials"
-									}), /* @__PURE__ */ b(d, {
-										tags: D.materials,
+									}), /* @__PURE__ */ x(d, {
+										tags: O.materials,
 										max: 10
 									})] }),
-									D.tags.length > 0 && /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+									O.tags.length > 0 && /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
 										className: "mb-1.5 text-xs font-medium uppercase tracking-wide text-text-secondary",
 										children: "Tags"
-									}), /* @__PURE__ */ b(d, {
-										tags: D.tags,
+									}), /* @__PURE__ */ x(d, {
+										tags: O.tags,
 										max: 10,
 										tone: "accent"
 									})] })
@@ -123,56 +127,56 @@ function C() {
 						]
 					})]
 				})
-			}), /* @__PURE__ */ x("div", {
+			}), /* @__PURE__ */ S("div", {
 				className: "space-y-4",
 				children: [
-					/* @__PURE__ */ x(S, {
+					/* @__PURE__ */ S(C, {
 						treatment: "plain",
 						className: "p-5",
-						children: [/* @__PURE__ */ b("h3", {
+						children: [/* @__PURE__ */ x("h3", {
 							className: "mb-3 text-sm font-semibold text-text-primary",
 							children: "Details"
-						}), /* @__PURE__ */ x("dl", {
+						}), /* @__PURE__ */ S("dl", {
 							className: "space-y-2 text-sm",
 							children: [
-								/* @__PURE__ */ x("div", {
+								/* @__PURE__ */ S("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ b("dt", {
+									children: [/* @__PURE__ */ x("dt", {
 										className: "text-text-secondary",
 										children: "Category"
-									}), /* @__PURE__ */ b("dd", {
+									}), /* @__PURE__ */ x("dd", {
 										className: "text-text-primary",
-										children: u(D.category)
+										children: u(O.category)
 									})]
 								}),
-								/* @__PURE__ */ x("div", {
+								/* @__PURE__ */ S("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ b("dt", {
+									children: [/* @__PURE__ */ x("dt", {
 										className: "text-text-secondary",
 										children: "SKU"
-									}), /* @__PURE__ */ b("dd", {
+									}), /* @__PURE__ */ x("dd", {
 										className: "text-text-primary",
-										children: D.sku ?? "—"
+										children: O.sku ?? "—"
 									})]
 								}),
-								/* @__PURE__ */ x("div", {
+								/* @__PURE__ */ S("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ b("dt", {
+									children: [/* @__PURE__ */ x("dt", {
 										className: "text-text-secondary",
 										children: "Currency"
-									}), /* @__PURE__ */ b("dd", {
+									}), /* @__PURE__ */ x("dd", {
 										className: "text-text-primary",
-										children: D.currency
+										children: O.currency
 									})]
 								}),
-								/* @__PURE__ */ x("div", {
+								/* @__PURE__ */ S("div", {
 									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ b("dt", {
+									children: [/* @__PURE__ */ x("dt", {
 										className: "text-text-secondary",
 										children: "Created"
-									}), /* @__PURE__ */ b("dd", {
+									}), /* @__PURE__ */ x("dd", {
 										className: "text-text-primary",
-										children: c(D.createdAt, {
+										children: c(O.createdAt, {
 											hour: void 0,
 											minute: void 0
 										})
@@ -181,39 +185,39 @@ function C() {
 							]
 						})]
 					}),
-					D.brand && /* @__PURE__ */ x("button", {
+					O.brand && /* @__PURE__ */ S("button", {
 						type: "button",
-						onClick: () => w(`/brands/${D.brand?.id}`),
+						onClick: () => T(`/brands/${O.brand?.id}`),
 						className: "flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50",
-						children: [/* @__PURE__ */ b(a, {
-							icon: /* @__PURE__ */ b(v, { className: "h-5 w-5" }),
-							seed: D.brand.id,
+						children: [/* @__PURE__ */ x(a, {
+							icon: /* @__PURE__ */ x(y, { className: "h-5 w-5" }),
+							seed: O.brand.id,
 							className: "h-10 w-10 shrink-0"
-						}), /* @__PURE__ */ x("div", {
+						}), /* @__PURE__ */ S("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ b("p", {
+							children: [/* @__PURE__ */ x("p", {
 								className: "truncate text-sm font-medium text-text-primary",
-								children: D.brand.name
-							}), /* @__PURE__ */ b("p", {
+								children: O.brand.name
+							}), /* @__PURE__ */ x("p", {
 								className: "truncate text-xs text-text-secondary",
 								children: "View brand"
 							})]
 						})]
 					}),
-					D.collection && /* @__PURE__ */ x("button", {
+					O.collection && /* @__PURE__ */ S("button", {
 						type: "button",
-						onClick: () => w(`/collections/${D.collection?.id}`),
+						onClick: () => T(`/collections/${O.collection?.id}`),
 						className: "flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50",
-						children: [/* @__PURE__ */ b(a, {
-							icon: /* @__PURE__ */ b(_, { className: "h-5 w-5" }),
-							seed: D.collection.id,
+						children: [/* @__PURE__ */ x(a, {
+							icon: /* @__PURE__ */ x(v, { className: "h-5 w-5" }),
+							seed: O.collection.id,
 							className: "h-10 w-10 shrink-0"
-						}), /* @__PURE__ */ x("div", {
+						}), /* @__PURE__ */ S("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ b("p", {
+							children: [/* @__PURE__ */ x("p", {
 								className: "truncate text-sm font-medium text-text-primary",
-								children: D.collection.name
-							}), /* @__PURE__ */ b("p", {
+								children: O.collection.name
+							}), /* @__PURE__ */ x("p", {
 								className: "truncate text-xs text-text-secondary",
 								children: "View collection"
 							})]
@@ -225,6 +229,6 @@ function C() {
 	});
 }
 //#endregion
-export { C as StyleItemDetailPage };
+export { w as StyleItemDetailPage };
 
 //# sourceMappingURL=StyleItemDetailPage.js.map