@burdenoff/microfe-coolandlovely 2026.706.1 → 2026.706.3

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

@@ -3,16 +3,15 @@ import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
 import { StatusBadge as r } from "../../components/StatusBadge.js";
 import { ErrorView as i, LoadingView as a } from "../../components/StateViews.js";
-import { Thumbnail as o } from "../../components/Thumbnail.js";
-import { useLooks as s } from "../../hooks/useCoolAndLovelyApi.js";
+import { useLooks as o } from "../../hooks/useCoolAndLovelyApi.js";
+import { LookCard as s } from "../../components/LookCard.js";
 import "../../hooks/index.js";
-import { titleCase as c } from "../../utils/formatters.js";
-import { EmptyState as l } from "../../components/EmptyState.js";
-import { useState as u } from "react";
-import { Bookmark as d, ChevronLeft as f, ChevronRight as p, Heart as m, Plus as h, Sparkles as g, Star as _ } from "lucide-react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { EmptyState as c } from "../../components/EmptyState.js";
+import { useState as l } from "react";
+import { ChevronLeft as u, ChevronRight as d, Plus as f, Sparkles as p, Star as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/coolandlovely/pages/looks/LooksListPage.tsx
-var x = 24, S = [
+var v = 24, y = [
 	{
 		value: "ALL",
 		label: "All"
@@ -50,136 +49,102 @@ var x = 24, S = [
 		label: "Other"
 	}
 ];
-function C() {
-	let { navigateTo: C } = e(), [w, T] = u("ALL"), [E, D] = u(!1), [O, k] = u(0), A = s({
-		occasion: w === "ALL" ? void 0 : w,
-		featured: E ? !0 : void 0,
+function b() {
+	let { navigateTo: b } = e(), [x, S] = l("ALL"), [C, w] = l(!1), [T, E] = l(0), D = o({
+		occasion: x === "ALL" ? void 0 : x,
+		featured: C ? !0 : void 0,
 		pagination: {
-			limit: x,
-			offset: O
+			limit: v,
+			offset: T
 		}
-	}), j = A.data?.items ?? [], M = A.data?.pageInfo.hasMore ?? !1;
-	return /* @__PURE__ */ b(n, {
+	}), O = D.data?.items ?? [], k = D.data?.pageInfo.hasMore ?? !1;
+	return /* @__PURE__ */ _(n, {
 		title: "Looks",
 		description: "Shop-the-look outfits built from real catalogue pieces",
-		actions: /* @__PURE__ */ b("button", {
+		actions: /* @__PURE__ */ _("button", {
 			type: "button",
-			onClick: () => C("/looks/new"),
+			onClick: () => b("/looks/new"),
 			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__ */ y(h, { className: "h-4 w-4" }), " New look"]
+			children: [/* @__PURE__ */ g(f, { className: "h-4 w-4" }), " New look"]
 		}),
-		children: [/* @__PURE__ */ b("div", {
+		children: [/* @__PURE__ */ _("div", {
 			className: "mb-6 flex flex-wrap items-center gap-2",
-			children: [S.map((e) => /* @__PURE__ */ y("button", {
+			children: [y.map((e) => /* @__PURE__ */ g("button", {
 				type: "button",
 				onClick: () => {
-					T(e.value), k(0);
+					S(e.value), E(0);
 				},
-				className: t("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", w === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
+				className: t("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", x === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
 				children: e.label
-			}, e.value)), /* @__PURE__ */ b("button", {
+			}, e.value)), /* @__PURE__ */ _("button", {
 				type: "button",
 				onClick: () => {
-					D((e) => !e), k(0);
+					w((e) => !e), E(0);
 				},
-				className: t("ml-auto inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors", E ? "bg-status-warning-bg-subtle text-status-warning-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
+				className: t("ml-auto inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors", C ? "bg-status-warning-bg-subtle text-status-warning-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
 				children: [
-					/* @__PURE__ */ y(_, { className: t("h-3.5 w-3.5", E && "fill-status-warning-text") }),
+					/* @__PURE__ */ g(m, { className: t("h-3.5 w-3.5", C && "fill-status-warning-text") }),
 					" ",
 					"Featured"
 				]
 			})]
-		}), A.isLoading ? /* @__PURE__ */ y(a, { label: "Loading looks…" }) : A.isError ? /* @__PURE__ */ y(i, { onRetry: () => void A.refetch() }) : j.length === 0 ? /* @__PURE__ */ y(l, {
+		}), D.isLoading ? /* @__PURE__ */ g(a, { label: "Loading looks…" }) : D.isError ? /* @__PURE__ */ g(i, { onRetry: () => void D.refetch() }) : O.length === 0 ? /* @__PURE__ */ g(c, {
 			illustration: "empty-data",
-			icon: /* @__PURE__ */ y(g, { className: "h-10 w-10" }),
+			icon: /* @__PURE__ */ g(p, { className: "h-10 w-10" }),
 			title: "No looks yet",
 			description: "Publish a shop-the-look outfit from catalogue pieces.",
-			action: /* @__PURE__ */ b("button", {
+			action: /* @__PURE__ */ _("button", {
 				type: "button",
-				onClick: () => C("/looks/new"),
+				onClick: () => b("/looks/new"),
 				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",
-				children: [/* @__PURE__ */ y(h, { className: "h-4 w-4" }), " New look"]
+				children: [/* @__PURE__ */ g(f, { className: "h-4 w-4" }), " New look"]
 			})
-		}) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("div", {
+		}) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
 			className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4",
-			children: j.map((e) => /* @__PURE__ */ b("button", {
-				type: "button",
-				onClick: () => C(`/looks/${e.id}`),
-				className: "overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md",
-				children: [/* @__PURE__ */ b("div", {
-					className: "relative",
-					children: [
-						/* @__PURE__ */ y(o, {
-							icon: /* @__PURE__ */ y(g, { className: "h-9 w-9" }),
-							seed: e.id,
-							className: "h-40 w-full"
-						}),
-						e.isFeatured && /* @__PURE__ */ y("div", {
-							className: "absolute left-2 top-2",
-							children: /* @__PURE__ */ b("span", {
-								className: "inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-xs font-medium text-status-warning-text",
-								children: [/* @__PURE__ */ y(_, { className: "h-3 w-3 fill-status-warning-text" }), " Featured"]
-							})
-						}),
-						e.publishedAt === null && /* @__PURE__ */ y("div", {
-							className: "absolute right-2 top-2",
-							children: /* @__PURE__ */ y(r, { status: "draft" })
-						})
-					]
-				}), /* @__PURE__ */ b("div", {
-					className: "p-3",
-					children: [/* @__PURE__ */ y("p", {
-						className: "truncate text-sm font-medium text-text-primary",
-						children: e.title
-					}), /* @__PURE__ */ b("div", {
-						className: "mt-1.5 flex items-center justify-between text-xs text-text-secondary",
-						children: [/* @__PURE__ */ y("span", { children: c(e.occasion) }), /* @__PURE__ */ b("span", {
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ b("span", {
-								className: "flex items-center gap-1",
-								children: [
-									/* @__PURE__ */ y(m, { className: "h-3 w-3" }),
-									" ",
-									e.likeCount
-								]
-							}), /* @__PURE__ */ b("span", {
-								className: "flex items-center gap-1",
-								children: [
-									/* @__PURE__ */ y(d, { className: "h-3 w-3" }),
-									" ",
-									e.saveCount
-								]
-							})]
-						})]
-					})]
+			children: O.map((e) => /* @__PURE__ */ _("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ g(s, {
+					id: e.id,
+					title: e.title,
+					occasion: e.occasion,
+					imageFileId: e.image?.id,
+					likeCount: e.likeCount,
+					onOpen: () => b(`/looks/${e.id}`),
+					showActions: !0
+				}), (e.isFeatured || e.publishedAt === null) && /* @__PURE__ */ _("div", {
+					className: "pointer-events-none absolute left-2 top-2 z-10 flex flex-col items-start gap-1",
+					children: [e.isFeatured && /* @__PURE__ */ _("span", {
+						className: "inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-xs font-medium text-status-warning-text shadow-sm backdrop-blur",
+						children: [/* @__PURE__ */ g(m, { className: "h-3 w-3 fill-status-warning-text" }), " Featured"]
+					}), e.publishedAt === null && /* @__PURE__ */ g(r, { status: "draft" })]
 				})]
 			}, e.id))
-		}), (O > 0 || M) && /* @__PURE__ */ b("div", {
+		}), (T > 0 || k) && /* @__PURE__ */ _("div", {
 			className: "mt-6 flex items-center justify-center gap-2",
 			children: [
-				/* @__PURE__ */ b("button", {
+				/* @__PURE__ */ _("button", {
 					type: "button",
-					disabled: O === 0,
-					onClick: () => k((e) => Math.max(0, e - x)),
+					disabled: T === 0,
+					onClick: () => E((e) => Math.max(0, e - v)),
 					className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40",
-					children: [/* @__PURE__ */ y(f, { className: "h-4 w-4" }), " Previous"]
+					children: [/* @__PURE__ */ g(u, { className: "h-4 w-4" }), " Previous"]
 				}),
-				/* @__PURE__ */ b("span", {
+				/* @__PURE__ */ _("span", {
 					className: "text-sm text-text-secondary",
-					children: ["Page ", O / x + 1]
+					children: ["Page ", T / v + 1]
 				}),
-				/* @__PURE__ */ b("button", {
+				/* @__PURE__ */ _("button", {
 					type: "button",
-					disabled: !M,
-					onClick: () => k((e) => e + x),
+					disabled: !k,
+					onClick: () => E((e) => e + v),
 					className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40",
-					children: ["Next ", /* @__PURE__ */ y(p, { className: "h-4 w-4" })]
+					children: ["Next ", /* @__PURE__ */ g(d, { className: "h-4 w-4" })]
 				})
 			]
 		})] })]
 	});
 }
 //#endregion
-export { C as LooksListPage };
+export { b as LooksListPage };
 
 //# sourceMappingURL=LooksListPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LooksListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/looks/LooksListPage.tsx"],"sourcesContent":["/**\n * Looks List Page\n * @module coolandlovely/pages/looks\n *\n * Cursor-paginated feed of published looks (`cooListLooks`) with occasion &\n * featured filters.\n */\n\nimport { useState } from 'react';\nimport { Plus, Heart, Bookmark, Sparkles, ChevronLeft, ChevronRight, Star } from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useLooks } from '../../hooks';\nimport { titleCase } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooLookOccasion } from '../../types';\n\nconst PAGE_SIZE = 24;\n\nconst OCCASIONS: Array<{ value: CooLookOccasion | 'ALL'; label: string }> = [\n  { value: 'ALL', label: 'All' },\n  { value: 'EVERYDAY', label: 'Everyday' },\n  { value: 'WORK', label: 'Work' },\n  { value: 'EVENING', label: 'Evening' },\n  { value: 'WEDDING_GUEST', label: 'Wedding guest' },\n  { value: 'VACATION', label: 'Vacation' },\n  { value: 'PARTY', label: 'Party' },\n  { value: 'ACTIVE', label: 'Active' },\n  { value: 'OTHER', label: 'Other' },\n];\n\nexport function LooksListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const [occasion, setOccasion] = useState<CooLookOccasion | 'ALL'>('ALL');\n  const [featuredOnly, setFeaturedOnly] = useState(false);\n  const [offset, setOffset] = useState(0);\n\n  const query = useLooks({\n    occasion: occasion === 'ALL' ? undefined : occasion,\n    featured: featuredOnly ? true : undefined,\n    pagination: { limit: PAGE_SIZE, offset },\n  });\n\n  const looks = query.data?.items ?? [];\n  const hasMore = query.data?.pageInfo.hasMore ?? false;\n\n  return (\n    <PageLayout\n      title=\"Looks\"\n      description=\"Shop-the-look outfits built from real catalogue pieces\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/looks/new')}\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          <Plus className=\"h-4 w-4\" /> New look\n        </button>\n      }\n    >\n      <div className=\"mb-6 flex flex-wrap items-center gap-2\">\n        {OCCASIONS.map((opt) => (\n          <button\n            key={opt.value}\n            type=\"button\"\n            onClick={() => {\n              setOccasion(opt.value);\n              setOffset(0);\n            }}\n            className={cn(\n              'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n              occasion === opt.value\n                ? 'bg-action-primary-bg text-action-primary-text'\n                : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n            )}\n          >\n            {opt.label}\n          </button>\n        ))}\n        <button\n          type=\"button\"\n          onClick={() => {\n            setFeaturedOnly((v) => !v);\n            setOffset(0);\n          }}\n          className={cn(\n            'ml-auto inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n            featuredOnly\n              ? 'bg-status-warning-bg-subtle text-status-warning-text'\n              : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n          )}\n        >\n          <Star className={cn('h-3.5 w-3.5', featuredOnly && 'fill-status-warning-text')} />{' '}\n          Featured\n        </button>\n      </div>\n\n      {query.isLoading ? (\n        <LoadingView label=\"Loading looks…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : looks.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<Sparkles className=\"h-10 w-10\" />}\n          title=\"No looks yet\"\n          description=\"Publish a shop-the-look outfit from catalogue pieces.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/looks/new')}\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\"\n            >\n              <Plus className=\"h-4 w-4\" /> New look\n            </button>\n          }\n        />\n      ) : (\n        <>\n          <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4\">\n            {looks.map((look) => (\n              <button\n                key={look.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/looks/${look.id}`)}\n                className=\"overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md\"\n              >\n                <div className=\"relative\">\n                  <Thumbnail\n                    icon={<Sparkles className=\"h-9 w-9\" />}\n                    seed={look.id}\n                    className=\"h-40 w-full\"\n                  />\n                  {look.isFeatured && (\n                    <div className=\"absolute left-2 top-2\">\n                      <span className=\"inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-xs font-medium text-status-warning-text\">\n                        <Star className=\"h-3 w-3 fill-status-warning-text\" /> Featured\n                      </span>\n                    </div>\n                  )}\n                  {look.publishedAt === null && (\n                    <div className=\"absolute right-2 top-2\">\n                      <StatusBadge status=\"draft\" />\n                    </div>\n                  )}\n                </div>\n                <div className=\"p-3\">\n                  <p className=\"truncate text-sm font-medium text-text-primary\">{look.title}</p>\n                  <div className=\"mt-1.5 flex items-center justify-between text-xs text-text-secondary\">\n                    <span>{titleCase(look.occasion)}</span>\n                    <span className=\"flex items-center gap-2\">\n                      <span className=\"flex items-center gap-1\">\n                        <Heart className=\"h-3 w-3\" /> {look.likeCount}\n                      </span>\n                      <span className=\"flex items-center gap-1\">\n                        <Bookmark className=\"h-3 w-3\" /> {look.saveCount}\n                      </span>\n                    </span>\n                  </div>\n                </div>\n              </button>\n            ))}\n          </div>\n\n          {(offset > 0 || hasMore) && (\n            <div className=\"mt-6 flex items-center justify-center gap-2\">\n              <button\n                type=\"button\"\n                disabled={offset === 0}\n                onClick={() => setOffset((o) => Math.max(0, o - PAGE_SIZE))}\n                className=\"inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40\"\n              >\n                <ChevronLeft className=\"h-4 w-4\" /> Previous\n              </button>\n              <span className=\"text-sm text-text-secondary\">Page {offset / PAGE_SIZE + 1}</span>\n              <button\n                type=\"button\"\n                disabled={!hasMore}\n                onClick={() => setOffset((o) => o + PAGE_SIZE)}\n                className=\"inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40\"\n              >\n                Next <ChevronRight className=\"h-4 w-4\" />\n              </button>\n            </div>\n          )}\n        </>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LooksListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/looks/LooksListPage.tsx"],"sourcesContent":["/**\n * Looks List Page\n * @module coolandlovely/pages/looks\n *\n * Cursor-paginated feed of published looks (`cooListLooks`) with occasion &\n * featured filters.\n */\n\nimport { useState } from 'react';\nimport { Plus, Sparkles, ChevronLeft, ChevronRight, Star } from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { LookCard } from '../../components/LookCard';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useLooks } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport type { CooLookOccasion } from '../../types';\n\nconst PAGE_SIZE = 24;\n\nconst OCCASIONS: Array<{ value: CooLookOccasion | 'ALL'; label: string }> = [\n  { value: 'ALL', label: 'All' },\n  { value: 'EVERYDAY', label: 'Everyday' },\n  { value: 'WORK', label: 'Work' },\n  { value: 'EVENING', label: 'Evening' },\n  { value: 'WEDDING_GUEST', label: 'Wedding guest' },\n  { value: 'VACATION', label: 'Vacation' },\n  { value: 'PARTY', label: 'Party' },\n  { value: 'ACTIVE', label: 'Active' },\n  { value: 'OTHER', label: 'Other' },\n];\n\nexport function LooksListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const [occasion, setOccasion] = useState<CooLookOccasion | 'ALL'>('ALL');\n  const [featuredOnly, setFeaturedOnly] = useState(false);\n  const [offset, setOffset] = useState(0);\n\n  const query = useLooks({\n    occasion: occasion === 'ALL' ? undefined : occasion,\n    featured: featuredOnly ? true : undefined,\n    pagination: { limit: PAGE_SIZE, offset },\n  });\n\n  const looks = query.data?.items ?? [];\n  const hasMore = query.data?.pageInfo.hasMore ?? false;\n\n  return (\n    <PageLayout\n      title=\"Looks\"\n      description=\"Shop-the-look outfits built from real catalogue pieces\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/looks/new')}\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          <Plus className=\"h-4 w-4\" /> New look\n        </button>\n      }\n    >\n      <div className=\"mb-6 flex flex-wrap items-center gap-2\">\n        {OCCASIONS.map((opt) => (\n          <button\n            key={opt.value}\n            type=\"button\"\n            onClick={() => {\n              setOccasion(opt.value);\n              setOffset(0);\n            }}\n            className={cn(\n              'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n              occasion === opt.value\n                ? 'bg-action-primary-bg text-action-primary-text'\n                : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n            )}\n          >\n            {opt.label}\n          </button>\n        ))}\n        <button\n          type=\"button\"\n          onClick={() => {\n            setFeaturedOnly((v) => !v);\n            setOffset(0);\n          }}\n          className={cn(\n            'ml-auto inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n            featuredOnly\n              ? 'bg-status-warning-bg-subtle text-status-warning-text'\n              : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n          )}\n        >\n          <Star className={cn('h-3.5 w-3.5', featuredOnly && 'fill-status-warning-text')} />{' '}\n          Featured\n        </button>\n      </div>\n\n      {query.isLoading ? (\n        <LoadingView label=\"Loading looks…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : looks.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<Sparkles className=\"h-10 w-10\" />}\n          title=\"No looks yet\"\n          description=\"Publish a shop-the-look outfit from catalogue pieces.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/looks/new')}\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\"\n            >\n              <Plus className=\"h-4 w-4\" /> New look\n            </button>\n          }\n        />\n      ) : (\n        <>\n          <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4\">\n            {looks.map((look) => (\n              <div key={look.id} className=\"relative\">\n                <LookCard\n                  id={look.id}\n                  title={look.title}\n                  occasion={look.occasion}\n                  imageFileId={look.image?.id}\n                  likeCount={look.likeCount}\n                  onOpen={() => navigateTo(`/looks/${look.id}`)}\n                  showActions\n                />\n                {(look.isFeatured || look.publishedAt === null) && (\n                  <div className=\"pointer-events-none absolute left-2 top-2 z-10 flex flex-col items-start gap-1\">\n                    {look.isFeatured && (\n                      <span className=\"inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-xs font-medium text-status-warning-text shadow-sm backdrop-blur\">\n                        <Star className=\"h-3 w-3 fill-status-warning-text\" /> Featured\n                      </span>\n                    )}\n                    {look.publishedAt === null && <StatusBadge status=\"draft\" />}\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n\n          {(offset > 0 || hasMore) && (\n            <div className=\"mt-6 flex items-center justify-center gap-2\">\n              <button\n                type=\"button\"\n                disabled={offset === 0}\n                onClick={() => setOffset((o) => Math.max(0, o - PAGE_SIZE))}\n                className=\"inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40\"\n              >\n                <ChevronLeft className=\"h-4 w-4\" /> Previous\n              </button>\n              <span className=\"text-sm text-text-secondary\">Page {offset / PAGE_SIZE + 1}</span>\n              <button\n                type=\"button\"\n                disabled={!hasMore}\n                onClick={() => setOffset((o) => o + PAGE_SIZE)}\n                className=\"inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-40\"\n              >\n                Next <ChevronRight className=\"h-4 w-4\" />\n              </button>\n            </div>\n          )}\n        </>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}