@burdenoff/microfe-coolandlovely 2026.706.1 → 2026.706.3

package/dist/coolandlovely/components/ColourSwatchRow.js

@@ -0,0 +1,86 @@
+import { cn as e } from "../utils/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/coolandlovely/components/ColourSwatchRow.tsx
+var r = {
+	black: "#111111",
+	white: "#ffffff",
+	ivory: "#fffff0",
+	cream: "#f5f1e3",
+	ecru: "#c2b280",
+	beige: "#f0e6d2",
+	sand: "#d8c3a5",
+	stone: "#a8a29e",
+	taupe: "#b38b6d",
+	grey: "#9ca3af",
+	gray: "#9ca3af",
+	charcoal: "#36454f",
+	silver: "#c0c0c0",
+	navy: "#1f2a44",
+	blue: "#2563eb",
+	cobalt: "#0047ab",
+	denim: "#1560bd",
+	indigo: "#4f46e5",
+	teal: "#0d9488",
+	turquoise: "#40e0d0",
+	green: "#16a34a",
+	olive: "#808000",
+	sage: "#9caf88",
+	mint: "#a7e8bd",
+	emerald: "#10b981",
+	khaki: "#c3b091",
+	mustard: "#e1ad01",
+	yellow: "#eab308",
+	gold: "#d4af37",
+	orange: "#ea580c",
+	rust: "#b7410e",
+	terracotta: "#e2725b",
+	coral: "#ff7f50",
+	peach: "#ffcba4",
+	camel: "#c19a6b",
+	tan: "#d2b48c",
+	brown: "#7c4a2d",
+	chocolate: "#5c3a21",
+	wine: "#722f37",
+	burgundy: "#800020",
+	maroon: "#800000",
+	red: "#dc2626",
+	pink: "#f9a8d4",
+	blush: "#e5a4a4",
+	rose: "#f43f5e",
+	lavender: "#b57edc",
+	lilac: "#c8a2c8",
+	purple: "#9333ea",
+	plum: "#8e4585"
+}, i = Object.keys(r).sort((e, t) => t.length - e.length);
+function a(e) {
+	let t = e.trim().toLowerCase();
+	if (!t) return null;
+	let n = r[t];
+	if (n) return n;
+	let a = i.find((e) => t.includes(e));
+	return a ? r[a] : null;
+}
+var o = ({ colours: r, max: i = 6, className: o }) => {
+	let s = r.filter((e) => e && e.trim().length > 0);
+	if (s.length === 0) return null;
+	let c = s.slice(0, i), l = s.length - c.length;
+	return /* @__PURE__ */ n("div", {
+		className: e("flex flex-wrap items-center gap-1.5", o),
+		children: [c.map((n, r) => {
+			let i = a(n);
+			return /* @__PURE__ */ t("span", {
+				title: n,
+				"aria-label": n,
+				style: i ? { backgroundColor: i } : void 0,
+				className: e("inline-block h-4 w-4 rounded-full ring-1 ring-inset ring-border-seam", i ? void 0 : "bg-bg-sunken")
+			}, `${n}-${r}`);
+		}), l > 0 ? /* @__PURE__ */ n("span", {
+			className: "text-xs font-medium text-text-secondary tabular-nums",
+			children: ["+", l]
+		}) : null]
+	});
+};
+//#endregion
+export { o as ColourSwatchRow };
+
+//# sourceMappingURL=ColourSwatchRow.js.map

package/dist/coolandlovely/components/ColourSwatchRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColourSwatchRow.js","names":[],"sources":["../../../src/coolandlovely/components/ColourSwatchRow.tsx"],"sourcesContent":["/**\n * ColourSwatchRow — render a set of colour names as small swatch dots.\n * @module coolandlovely/components\n *\n * CoolAndLovely style items / wardrobe / palettes carry free-text colour names\n * (e.g. \"navy\", \"rust\", \"camel\"). We map the common ones to a representative\n * CSS colour so the catalogue reads like a real fashion product rather than a\n * row of grey chips. The swatch fill is CONTENT data (the colour the garment\n * actually is), not a theme decision, so an inline `backgroundColor` is used for\n * mapped names; unknown names fall back to a neutral token-styled dot that keeps\n * its label in a tooltip. Everything structural/text uses semantic tokens.\n */\n\nimport type { CSSProperties, FC } from 'react';\nimport { cn } from '../utils/cn';\n\ninterface ColourSwatchRowProps {\n  colours: string[];\n  /** Max swatches to show before collapsing into a \"+N\" chip. */\n  max?: number;\n  className?: string;\n}\n\n/**\n * Common fashion colour names → a representative CSS colour. Keys are matched\n * case-insensitively; multi-word names (e.g. \"dusty rose\", \"forest green\") fall\n * back to a keyword scan so \"… green\" still resolves to green.\n */\nconst COLOUR_MAP: Record<string, string> = {\n  black: '#111111',\n  white: '#ffffff',\n  ivory: '#fffff0',\n  cream: '#f5f1e3',\n  ecru: '#c2b280',\n  beige: '#f0e6d2',\n  sand: '#d8c3a5',\n  stone: '#a8a29e',\n  taupe: '#b38b6d',\n  grey: '#9ca3af',\n  gray: '#9ca3af',\n  charcoal: '#36454f',\n  silver: '#c0c0c0',\n  navy: '#1f2a44',\n  blue: '#2563eb',\n  cobalt: '#0047ab',\n  denim: '#1560bd',\n  indigo: '#4f46e5',\n  teal: '#0d9488',\n  turquoise: '#40e0d0',\n  green: '#16a34a',\n  olive: '#808000',\n  sage: '#9caf88',\n  mint: '#a7e8bd',\n  emerald: '#10b981',\n  khaki: '#c3b091',\n  mustard: '#e1ad01',\n  yellow: '#eab308',\n  gold: '#d4af37',\n  orange: '#ea580c',\n  rust: '#b7410e',\n  terracotta: '#e2725b',\n  coral: '#ff7f50',\n  peach: '#ffcba4',\n  camel: '#c19a6b',\n  tan: '#d2b48c',\n  brown: '#7c4a2d',\n  chocolate: '#5c3a21',\n  wine: '#722f37',\n  burgundy: '#800020',\n  maroon: '#800000',\n  red: '#dc2626',\n  pink: '#f9a8d4',\n  blush: '#e5a4a4',\n  rose: '#f43f5e',\n  lavender: '#b57edc',\n  lilac: '#c8a2c8',\n  purple: '#9333ea',\n  plum: '#8e4585',\n};\n\n/** Ordered keyword list for the \"contains\" fallback (longer keys first). */\nconst COLOUR_KEYWORDS = Object.keys(COLOUR_MAP).sort((a, b) => b.length - a.length);\n\nfunction resolveColour(name: string): string | null {\n  const normalized = name.trim().toLowerCase();\n  if (!normalized) return null;\n  const direct = COLOUR_MAP[normalized];\n  if (direct) return direct;\n  const keyword = COLOUR_KEYWORDS.find((key) => normalized.includes(key));\n  return keyword ? COLOUR_MAP[keyword] : null;\n}\n\nexport const ColourSwatchRow: FC<ColourSwatchRowProps> = ({ colours, max = 6, className }) => {\n  const cleaned = colours.filter((c) => c && c.trim().length > 0);\n  if (cleaned.length === 0) return null;\n\n  const shown = cleaned.slice(0, max);\n  const overflow = cleaned.length - shown.length;\n\n  return (\n    <div className={cn('flex flex-wrap items-center gap-1.5', className)}>\n      {shown.map((colour, index) => {\n        const css = resolveColour(colour);\n        const style: CSSProperties | undefined = css ? { backgroundColor: css } : undefined;\n        return (\n          <span\n            key={`${colour}-${index}`}\n            title={colour}\n            aria-label={colour}\n            style={style}\n            className={cn(\n              'inline-block h-4 w-4 rounded-full ring-1 ring-inset ring-border-seam',\n              css ? undefined : 'bg-bg-sunken'\n            )}\n          />\n        );\n      })}\n      {overflow > 0 ? (\n        <span className=\"text-xs font-medium text-text-secondary tabular-nums\">+{overflow}</span>\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":";;;AA4BA,IAAM,IAAqC;CACzC,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,OAAO;CACP,MAAM;CACN,MAAM;CACN,UAAU;CACV,QAAQ;CACR,MAAM;CACN,MAAM;CACN,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,MAAM;CACN,WAAW;CACX,OAAO;CACP,OAAO;CACP,MAAM;CACN,MAAM;CACN,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,MAAM;CACN,YAAY;CACZ,OAAO;CACP,OAAO;CACP,OAAO;CACP,KAAK;CACL,OAAO;CACP,WAAW;CACX,MAAM;CACN,UAAU;CACV,QAAQ;CACR,KAAK;CACL,MAAM;CACN,OAAO;CACP,MAAM;CACN,UAAU;CACV,OAAO;CACP,QAAQ;CACR,MAAM;CACP,EAGK,IAAkB,OAAO,KAAK,EAAW,CAAC,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO;AAEnF,SAAS,EAAc,GAA6B;CAClD,IAAM,IAAa,EAAK,MAAM,CAAC,aAAa;AAC5C,KAAI,CAAC,EAAY,QAAO;CACxB,IAAM,IAAS,EAAW;AAC1B,KAAI,EAAQ,QAAO;CACnB,IAAM,IAAU,EAAgB,MAAM,MAAQ,EAAW,SAAS,EAAI,CAAC;AACvE,QAAO,IAAU,EAAW,KAAW;;AAGzC,IAAa,KAA6C,EAAE,YAAS,SAAM,GAAG,mBAAgB;CAC5F,IAAM,IAAU,EAAQ,QAAQ,MAAM,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE;AAC/D,KAAI,EAAQ,WAAW,EAAG,QAAO;CAEjC,IAAM,IAAQ,EAAQ,MAAM,GAAG,EAAI,EAC7B,IAAW,EAAQ,SAAS,EAAM;AAExC,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,uCAAuC,EAAU;YAApE,CACG,EAAM,KAAK,GAAQ,MAAU;GAC5B,IAAM,IAAM,EAAc,EAAO;AAEjC,UACE,kBAAC,QAAD;IAEE,OAAO;IACP,cAAY;IACL,OAN8B,IAAM,EAAE,iBAAiB,GAAK,GAAG,KAAA;IAOtE,WAAW,EACT,wEACA,IAAM,KAAA,IAAY,eACnB;IACD,EARK,GAAG,EAAO,GAAG,IAQlB;IAEJ,EACD,IAAW,IACV,kBAAC,QAAD;GAAM,WAAU;aAAhB,CAAuE,KAAE,EAAgB;OACvF,KACA"}

package/dist/coolandlovely/components/Comments.js

@@ -0,0 +1,109 @@
+import { cn as e } from "../utils/cn.js";
+import { formatRelativeTime as t } from "../utils/formatters.js";
+import { useAddComment as n, useEntityComments as r } from "../hooks/useComments.js";
+import { ActorName as i } from "./ActorName.js";
+import { useState as a } from "react";
+import { Loader2 as o, MessageSquare as s, Send as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { GlassCard as d } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/components/Comments.tsx
+var f = ({ entityType: f, entityId: p, title: m = "Reviews & feedback", className: h }) => {
+	let g = r(f, p), _ = n(), [v, y] = a(""), b = g.data?.comments ?? [], x = g.data?.total ?? b.length;
+	return /* @__PURE__ */ u("section", {
+		className: e("mt-6", h),
+		children: [
+			/* @__PURE__ */ u("h3", {
+				className: "mb-3 flex items-center gap-2 text-lg font-semibold text-text-primary",
+				children: [
+					/* @__PURE__ */ l(s, { className: "h-5 w-5" }),
+					" ",
+					m,
+					" (",
+					x,
+					")"
+				]
+			}),
+			/* @__PURE__ */ u(d, {
+				treatment: "plain",
+				className: "p-4",
+				children: [/* @__PURE__ */ u("form", {
+					onSubmit: (e) => {
+						e.preventDefault();
+						let t = v.trim();
+						!t || !p || _.mutate({
+							entityType: f,
+							entityId: p,
+							text: t
+						}, { onSuccess: () => y("") });
+					},
+					className: "flex flex-col gap-2 sm:flex-row sm:items-start",
+					children: [
+						/* @__PURE__ */ l("label", {
+							htmlFor: "coo-comment-input",
+							className: "sr-only",
+							children: "Write a review or leave feedback"
+						}),
+						/* @__PURE__ */ l("textarea", {
+							id: "coo-comment-input",
+							value: v,
+							onChange: (e) => y(e.target.value),
+							rows: 2,
+							placeholder: "Share a review or leave feedback…",
+							className: "w-full flex-1 resize-y rounded-lg border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+						}),
+						/* @__PURE__ */ u("button", {
+							type: "submit",
+							disabled: !v.trim() || !p || _.isPending,
+							className: "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
+							children: [_.isPending ? /* @__PURE__ */ l(o, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ l(c, { className: "h-4 w-4" }), "Post"]
+						})
+					]
+				}), _.isError && /* @__PURE__ */ l("p", {
+					className: "mt-2 text-xs text-status-error-text",
+					children: _.error instanceof Error ? _.error.message : "Could not post"
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "mt-4",
+				children: g.isLoading ? /* @__PURE__ */ u("div", {
+					className: "flex items-center justify-center gap-2 py-6 text-sm text-text-secondary",
+					children: [/* @__PURE__ */ l(o, { className: "h-4 w-4 animate-spin" }), " Loading reviews…"]
+				}) : g.isError ? /* @__PURE__ */ u("div", {
+					className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
+					children: ["Reviews could not be loaded right now.", /* @__PURE__ */ l("button", {
+						type: "button",
+						onClick: () => void g.refetch(),
+						className: "ml-2 font-medium text-action-primary-bg hover:underline",
+						children: "Retry"
+					})]
+				}) : b.length === 0 ? /* @__PURE__ */ l("p", {
+					className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
+					children: "No reviews yet. Be the first to share feedback."
+				}) : /* @__PURE__ */ l("ul", {
+					className: "divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface",
+					children: b.map((e) => /* @__PURE__ */ u("li", {
+						className: "px-4 py-3",
+						children: [/* @__PURE__ */ u("div", {
+							className: "flex items-center justify-between gap-2",
+							children: [/* @__PURE__ */ l(i, {
+								id: e.authorId,
+								actorType: e.authorType,
+								className: "truncate text-sm font-medium text-text-primary"
+							}), /* @__PURE__ */ u("span", {
+								className: "shrink-0 text-xs text-text-secondary",
+								children: [t(e.createdAt), e.edited ? " · edited" : ""]
+							})]
+						}), /* @__PURE__ */ l("p", {
+							className: "mt-1 whitespace-pre-wrap break-words text-sm text-text-secondary",
+							children: e.text
+						})]
+					}, e.id))
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { f as Comments };
+
+//# sourceMappingURL=Comments.js.map

package/dist/coolandlovely/components/Comments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comments.js","names":[],"sources":["../../../src/coolandlovely/components/Comments.tsx"],"sourcesContent":["/**\n * Comments — reviews & feedback thread for an entity (looks, brands).\n * @module coolandlovely/components\n *\n * Reuses wspace-conversations-svc `EntityComment` (NO coolandlovely comment\n * table). Lists + posts comments for (entityType, entityId). Commenter names\n * resolve via fe-libs useActorProfiles (GLOBAL gateway) — see ActorName.\n */\n\nimport type { FC } from 'react';\nimport { useState } from 'react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { Loader2, MessageSquare, Send } from 'lucide-react';\nimport { ActorName } from './ActorName';\nimport { useAddComment, useEntityComments } from '../hooks/useComments';\nimport { formatRelativeTime } from '../utils/formatters';\nimport { cn } from '../utils/cn';\n\ninterface CommentsProps {\n  /** Conversations entity type, e.g. \"CooLook\" / \"CooBrand\". */\n  entityType: string;\n  /** The entity id (skips rendering until present). */\n  entityId?: string;\n  /** Section heading (default \"Reviews & feedback\"). */\n  title?: string;\n  className?: string;\n}\n\nexport const Comments: FC<CommentsProps> = ({\n  entityType,\n  entityId,\n  title = 'Reviews & feedback',\n  className,\n}) => {\n  const query = useEntityComments(entityType, entityId);\n  const addComment = useAddComment();\n  const [draft, setDraft] = useState('');\n\n  const comments = query.data?.comments ?? [];\n  const total = query.data?.total ?? comments.length;\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    const text = draft.trim();\n    if (!text || !entityId) return;\n    addComment.mutate({ entityType, entityId, text }, { onSuccess: () => setDraft('') });\n  };\n\n  return (\n    <section className={cn('mt-6', className)}>\n      <h3 className=\"mb-3 flex items-center gap-2 text-lg font-semibold text-text-primary\">\n        <MessageSquare className=\"h-5 w-5\" /> {title} ({total})\n      </h3>\n\n      <GlassCard treatment=\"plain\" className=\"p-4\">\n        <form onSubmit={handleSubmit} className=\"flex flex-col gap-2 sm:flex-row sm:items-start\">\n          <label htmlFor=\"coo-comment-input\" className=\"sr-only\">\n            Write a review or leave feedback\n          </label>\n          <textarea\n            id=\"coo-comment-input\"\n            value={draft}\n            onChange={(e) => setDraft(e.target.value)}\n            rows={2}\n            placeholder=\"Share a review or leave feedback…\"\n            className=\"w-full flex-1 resize-y rounded-lg border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n          />\n          <button\n            type=\"submit\"\n            disabled={!draft.trim() || !entityId || addComment.isPending}\n            className=\"inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n          >\n            {addComment.isPending ? (\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n            ) : (\n              <Send className=\"h-4 w-4\" />\n            )}\n            Post\n          </button>\n        </form>\n        {addComment.isError && (\n          <p className=\"mt-2 text-xs text-status-error-text\">\n            {addComment.error instanceof Error ? addComment.error.message : 'Could not post'}\n          </p>\n        )}\n      </GlassCard>\n\n      <div className=\"mt-4\">\n        {query.isLoading ? (\n          <div className=\"flex items-center justify-center gap-2 py-6 text-sm text-text-secondary\">\n            <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading reviews…\n          </div>\n        ) : query.isError ? (\n          <div className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n            Reviews could not be loaded right now.\n            <button\n              type=\"button\"\n              onClick={() => void query.refetch()}\n              className=\"ml-2 font-medium text-action-primary-bg hover:underline\"\n            >\n              Retry\n            </button>\n          </div>\n        ) : comments.length === 0 ? (\n          <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n            No reviews yet. Be the first to share feedback.\n          </p>\n        ) : (\n          <ul className=\"divide-y divide-border-seam rounded-lg border border-border-seam bg-bg-surface\">\n            {comments.map((c) => (\n              <li key={c.id} className=\"px-4 py-3\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <ActorName\n                    id={c.authorId}\n                    actorType={c.authorType}\n                    className=\"truncate text-sm font-medium text-text-primary\"\n                  />\n                  <span className=\"shrink-0 text-xs text-text-secondary\">\n                    {formatRelativeTime(c.createdAt)}\n                    {c.edited ? ' · edited' : ''}\n                  </span>\n                </div>\n                <p className=\"mt-1 whitespace-pre-wrap break-words text-sm text-text-secondary\">\n                  {c.text}\n                </p>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;;AA4BA,IAAa,KAA+B,EAC1C,eACA,aACA,WAAQ,sBACR,mBACI;CACJ,IAAM,IAAQ,EAAkB,GAAY,EAAS,EAC/C,IAAa,GAAe,EAC5B,CAAC,GAAO,KAAY,EAAS,GAAG,EAEhC,IAAW,EAAM,MAAM,YAAY,EAAE,EACrC,IAAQ,EAAM,MAAM,SAAS,EAAS;AAS5C,QACE,kBAAC,WAAD;EAAS,WAAW,EAAG,QAAQ,EAAU;YAAzC;GACE,kBAAC,MAAD;IAAI,WAAU;cAAd;KACE,kBAAC,GAAD,EAAe,WAAU,WAAY,CAAA;;KAAE;KAAM;KAAG;KAAM;KACnD;;GAEL,kBAAC,GAAD;IAAW,WAAU;IAAQ,WAAU;cAAvC,CACE,kBAAC,QAAD;KAAM,WAdU,MAAuB;AAC3C,QAAE,gBAAgB;MAClB,IAAM,IAAO,EAAM,MAAM;AACrB,OAAC,KAAQ,CAAC,KACd,EAAW,OAAO;OAAE;OAAY;OAAU;OAAM,EAAE,EAAE,iBAAiB,EAAS,GAAG,EAAE,CAAC;;KAUlD,WAAU;eAAxC;MACE,kBAAC,SAAD;OAAO,SAAQ;OAAoB,WAAU;iBAAU;OAE/C,CAAA;MACR,kBAAC,YAAD;OACE,IAAG;OACH,OAAO;OACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;OACzC,MAAM;OACN,aAAY;OACZ,WAAU;OACV,CAAA;MACF,kBAAC,UAAD;OACE,MAAK;OACL,UAAU,CAAC,EAAM,MAAM,IAAI,CAAC,KAAY,EAAW;OACnD,WAAU;iBAHZ,CAKG,EAAW,YACV,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,GAE5C,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAC5B,OAEK;;MACJ;QACN,EAAW,WACV,kBAAC,KAAD;KAAG,WAAU;eACV,EAAW,iBAAiB,QAAQ,EAAW,MAAM,UAAU;KAC9D,CAAA,CAEI;;GAEZ,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM,YACL,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,EAAA,oBACxC;SACJ,EAAM,UACR,kBAAC,OAAD;KAAK,WAAU;eAAf,CAAoG,0CAElG,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,KAAK,EAAM,SAAS;MACnC,WAAU;gBACX;MAEQ,CAAA,CACL;SACJ,EAAS,WAAW,IACtB,kBAAC,KAAD;KAAG,WAAU;eAAqF;KAE9F,CAAA,GAEJ,kBAAC,MAAD;KAAI,WAAU;eACX,EAAS,KAAK,MACb,kBAAC,MAAD;MAAe,WAAU;gBAAzB,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD;QACE,IAAI,EAAE;QACN,WAAW,EAAE;QACb,WAAU;QACV,CAAA,EACF,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CACG,EAAmB,EAAE,UAAU,EAC/B,EAAE,SAAS,cAAc,GACrB;UACH;UACN,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAE;OACD,CAAA,CACD;QAfI,EAAE,GAeN,CACL;KACC,CAAA;IAEH,CAAA;GACE"}

package/dist/coolandlovely/components/Field.js

@@ -53,7 +53,27 @@ var r = ({ label: r, htmlFor: i, required: a, hint: o, error: s, children: c, cl
 		onChange: (e) => s(e.target.value),
 		className: e(i, "resize-y", d && "border-status-error-text")
 	})
-}), s = ({ id: a, label: o, value: s, onChange: c, options: l, required: u, hint: d, error: f, placeholder: p, className: m }) => /* @__PURE__ */ t(r, {
+}), s = ({ id: r, label: i, checked: a, onChange: o, hint: s, disabled: c, className: l }) => /* @__PURE__ */ n("label", {
+	htmlFor: r,
+	className: e("flex cursor-pointer items-start gap-3 rounded-lg border border-border-seam bg-bg-surface px-3 py-2.5", c && "cursor-not-allowed opacity-60", l),
+	children: [/* @__PURE__ */ t("input", {
+		id: r,
+		type: "checkbox",
+		checked: a,
+		disabled: c,
+		onChange: (e) => o(e.target.checked),
+		className: "mt-0.5 h-4 w-4 shrink-0 rounded border-border-seam text-action-primary-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"
+	}), /* @__PURE__ */ n("span", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ t("span", {
+			className: "block text-sm font-medium text-text-primary",
+			children: i
+		}), s && /* @__PURE__ */ t("span", {
+			className: "mt-0.5 block text-xs text-text-secondary",
+			children: s
+		})]
+	})]
+}), c = ({ id: a, label: o, value: s, onChange: c, options: l, required: u, hint: d, error: f, placeholder: p, className: m }) => /* @__PURE__ */ t(r, {
 	label: o,
 	htmlFor: a,
 	required: u,
@@ -76,6 +96,6 @@ var r = ({ label: r, htmlFor: i, required: a, hint: o, error: s, children: c, cl
 	})
 });
 //#endregion
-export { s as SelectField, o as TextAreaField, a as TextField };
+export { r as FieldShell, c as SelectField, o as TextAreaField, a as TextField, s as ToggleField };
 
 //# sourceMappingURL=Field.js.map

package/dist/coolandlovely/components/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":[],"sources":["../../../src/coolandlovely/components/Field.tsx"],"sourcesContent":["/**\n * Form field primitives\n * @module coolandlovely/components\n *\n * Small, strictly-typed, token-only form controls used across the create/edit\n * forms (no third-party form lib — these wrap native inputs with consistent\n * labels, hints and error styling).\n */\n\nimport type { FC, ReactNode, ChangeEvent } from 'react';\nimport { cn } from '../utils/cn';\n\ninterface FieldShellProps {\n  label: string;\n  htmlFor?: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const FieldShell: FC<FieldShellProps> = ({\n  label,\n  htmlFor,\n  required,\n  hint,\n  error,\n  children,\n  className,\n}) => (\n  <div className={cn('flex flex-col gap-1.5', className)}>\n    <label htmlFor={htmlFor} className=\"text-sm font-medium text-text-primary\">\n      {label}\n      {required && <span className=\"ml-0.5 text-status-error-text\">*</span>}\n    </label>\n    {children}\n    {error ? (\n      <p className=\"text-xs text-status-error-text\">{error}</p>\n    ) : hint ? (\n      <p className=\"text-xs text-text-secondary\">{hint}</p>\n    ) : null}\n  </div>\n);\n\nconst baseControl =\n  'w-full rounded-lg border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]';\n\ninterface TextFieldProps {\n  id?: string;\n  label: string;\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  type?: 'text' | 'url' | 'number' | 'date';\n  className?: string;\n}\n\nexport const TextField: FC<TextFieldProps> = ({\n  id,\n  label,\n  value,\n  onChange,\n  placeholder,\n  required,\n  hint,\n  error,\n  type = 'text',\n  className,\n}) => (\n  <FieldShell\n    label={label}\n    htmlFor={id}\n    required={required}\n    hint={hint}\n    error={error}\n    className={className}\n  >\n    <input\n      id={id}\n      type={type}\n      value={value}\n      placeholder={placeholder}\n      required={required}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}\n      className={cn(baseControl, error && 'border-status-error-text')}\n    />\n  </FieldShell>\n);\n\ninterface TextAreaFieldProps {\n  id?: string;\n  label: string;\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  rows?: number;\n  className?: string;\n}\n\nexport const TextAreaField: FC<TextAreaFieldProps> = ({\n  id,\n  label,\n  value,\n  onChange,\n  placeholder,\n  required,\n  hint,\n  error,\n  rows = 3,\n  className,\n}) => (\n  <FieldShell\n    label={label}\n    htmlFor={id}\n    required={required}\n    hint={hint}\n    error={error}\n    className={className}\n  >\n    <textarea\n      id={id}\n      value={value}\n      placeholder={placeholder}\n      required={required}\n      rows={rows}\n      onChange={(e: ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}\n      className={cn(baseControl, 'resize-y', error && 'border-status-error-text')}\n    />\n  </FieldShell>\n);\n\ninterface SelectOption {\n  value: string;\n  label: string;\n}\n\ninterface SelectFieldProps {\n  id?: string;\n  label: string;\n  value: string;\n  onChange: (value: string) => void;\n  options: SelectOption[];\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  placeholder?: string;\n  className?: string;\n}\n\nexport const SelectField: FC<SelectFieldProps> = ({\n  id,\n  label,\n  value,\n  onChange,\n  options,\n  required,\n  hint,\n  error,\n  placeholder,\n  className,\n}) => (\n  <FieldShell\n    label={label}\n    htmlFor={id}\n    required={required}\n    hint={hint}\n    error={error}\n    className={className}\n  >\n    <select\n      id={id}\n      value={value}\n      required={required}\n      onChange={(e: ChangeEvent<HTMLSelectElement>) => onChange(e.target.value)}\n      className={cn(baseControl, error && 'border-status-error-text')}\n    >\n      {placeholder && <option value=\"\">{placeholder}</option>}\n      {options.map((opt) => (\n        <option key={opt.value} value={opt.value}>\n          {opt.label}\n        </option>\n      ))}\n    </select>\n  </FieldShell>\n);\n"],"mappings":";;;AAsBA,IAAa,KAAmC,EAC9C,UACA,YACA,aACA,SACA,UACA,aACA,mBAEA,kBAAC,OAAD;CAAK,WAAW,EAAG,yBAAyB,EAAU;WAAtD;EACE,kBAAC,SAAD;GAAgB;GAAS,WAAU;aAAnC,CACG,GACA,KAAY,kBAAC,QAAD;IAAM,WAAU;cAAgC;IAAQ,CAAA,CAC/D;;EACP;EACA,IACC,kBAAC,KAAD;GAAG,WAAU;aAAkC;GAAU,CAAA,GACvD,IACF,kBAAC,KAAD;GAAG,WAAU;aAA+B;GAAS,CAAA,GACnD;EACA;IAGF,IACJ,sMAeW,KAAiC,EAC5C,OACA,UACA,UACA,aACA,gBACA,aACA,SACA,UACA,UAAO,QACP,mBAEA,kBAAC,GAAD;CACS;CACP,SAAS;CACC;CACJ;CACC;CACI;WAEX,kBAAC,SAAD;EACM;EACE;EACC;EACM;EACH;EACV,WAAW,MAAqC,EAAS,EAAE,OAAO,MAAM;EACxE,WAAW,EAAG,GAAa,KAAS,2BAA2B;EAC/D,CAAA;CACS,CAAA,EAgBF,KAAyC,EACpD,OACA,UACA,UACA,aACA,gBACA,aACA,SACA,UACA,UAAO,GACP,mBAEA,kBAAC,GAAD;CACS;CACP,SAAS;CACC;CACJ;CACC;CACI;WAEX,kBAAC,YAAD;EACM;EACG;EACM;EACH;EACJ;EACN,WAAW,MAAwC,EAAS,EAAE,OAAO,MAAM;EAC3E,WAAW,EAAG,GAAa,YAAY,KAAS,2BAA2B;EAC3E,CAAA;CACS,CAAA,EAqBF,KAAqC,EAChD,OACA,UACA,UACA,aACA,YACA,aACA,SACA,UACA,gBACA,mBAEA,kBAAC,GAAD;CACS;CACP,SAAS;CACC;CACJ;CACC;CACI;WAEX,kBAAC,UAAD;EACM;EACG;EACG;EACV,WAAW,MAAsC,EAAS,EAAE,OAAO,MAAM;EACzE,WAAW,EAAG,GAAa,KAAS,2BAA2B;YALjE,CAOG,KAAe,kBAAC,UAAD;GAAQ,OAAM;aAAI;GAAqB,CAAA,EACtD,EAAQ,KAAK,MACZ,kBAAC,UAAD;GAAwB,OAAO,EAAI;aAChC,EAAI;GACE,EAFI,EAAI,MAER,CACT,CACK;;CACE,CAAA"}
+{"version":3,"file":"Field.js","names":[],"sources":["../../../src/coolandlovely/components/Field.tsx"],"sourcesContent":["/**\n * Form field primitives\n * @module coolandlovely/components\n *\n * Small, strictly-typed, token-only form controls used across the create/edit\n * forms (no third-party form lib — these wrap native inputs with consistent\n * labels, hints and error styling).\n */\n\nimport type { FC, ReactNode, ChangeEvent } from 'react';\nimport { cn } from '../utils/cn';\n\ninterface FieldShellProps {\n  label: string;\n  htmlFor?: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const FieldShell: FC<FieldShellProps> = ({\n  label,\n  htmlFor,\n  required,\n  hint,\n  error,\n  children,\n  className,\n}) => (\n  <div className={cn('flex flex-col gap-1.5', className)}>\n    <label htmlFor={htmlFor} className=\"text-sm font-medium text-text-primary\">\n      {label}\n      {required && <span className=\"ml-0.5 text-status-error-text\">*</span>}\n    </label>\n    {children}\n    {error ? (\n      <p className=\"text-xs text-status-error-text\">{error}</p>\n    ) : hint ? (\n      <p className=\"text-xs text-text-secondary\">{hint}</p>\n    ) : null}\n  </div>\n);\n\nconst baseControl =\n  'w-full rounded-lg border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]';\n\ninterface TextFieldProps {\n  id?: string;\n  label: string;\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  type?: 'text' | 'url' | 'number' | 'date';\n  className?: string;\n}\n\nexport const TextField: FC<TextFieldProps> = ({\n  id,\n  label,\n  value,\n  onChange,\n  placeholder,\n  required,\n  hint,\n  error,\n  type = 'text',\n  className,\n}) => (\n  <FieldShell\n    label={label}\n    htmlFor={id}\n    required={required}\n    hint={hint}\n    error={error}\n    className={className}\n  >\n    <input\n      id={id}\n      type={type}\n      value={value}\n      placeholder={placeholder}\n      required={required}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}\n      className={cn(baseControl, error && 'border-status-error-text')}\n    />\n  </FieldShell>\n);\n\ninterface TextAreaFieldProps {\n  id?: string;\n  label: string;\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  rows?: number;\n  className?: string;\n}\n\nexport const TextAreaField: FC<TextAreaFieldProps> = ({\n  id,\n  label,\n  value,\n  onChange,\n  placeholder,\n  required,\n  hint,\n  error,\n  rows = 3,\n  className,\n}) => (\n  <FieldShell\n    label={label}\n    htmlFor={id}\n    required={required}\n    hint={hint}\n    error={error}\n    className={className}\n  >\n    <textarea\n      id={id}\n      value={value}\n      placeholder={placeholder}\n      required={required}\n      rows={rows}\n      onChange={(e: ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}\n      className={cn(baseControl, 'resize-y', error && 'border-status-error-text')}\n    />\n  </FieldShell>\n);\n\ninterface ToggleFieldProps {\n  id?: string;\n  label: string;\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  hint?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\n/** A token-only checkbox row (used for boolean flags e.g. Featured). */\nexport const ToggleField: FC<ToggleFieldProps> = ({\n  id,\n  label,\n  checked,\n  onChange,\n  hint,\n  disabled,\n  className,\n}) => (\n  <label\n    htmlFor={id}\n    className={cn(\n      'flex cursor-pointer items-start gap-3 rounded-lg border border-border-seam bg-bg-surface px-3 py-2.5',\n      disabled && 'cursor-not-allowed opacity-60',\n      className\n    )}\n  >\n    <input\n      id={id}\n      type=\"checkbox\"\n      checked={checked}\n      disabled={disabled}\n      onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}\n      className=\"mt-0.5 h-4 w-4 shrink-0 rounded border-border-seam text-action-primary-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n    />\n    <span className=\"min-w-0\">\n      <span className=\"block text-sm font-medium text-text-primary\">{label}</span>\n      {hint && <span className=\"mt-0.5 block text-xs text-text-secondary\">{hint}</span>}\n    </span>\n  </label>\n);\n\ninterface SelectOption {\n  value: string;\n  label: string;\n}\n\ninterface SelectFieldProps {\n  id?: string;\n  label: string;\n  value: string;\n  onChange: (value: string) => void;\n  options: SelectOption[];\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  placeholder?: string;\n  className?: string;\n}\n\nexport const SelectField: FC<SelectFieldProps> = ({\n  id,\n  label,\n  value,\n  onChange,\n  options,\n  required,\n  hint,\n  error,\n  placeholder,\n  className,\n}) => (\n  <FieldShell\n    label={label}\n    htmlFor={id}\n    required={required}\n    hint={hint}\n    error={error}\n    className={className}\n  >\n    <select\n      id={id}\n      value={value}\n      required={required}\n      onChange={(e: ChangeEvent<HTMLSelectElement>) => onChange(e.target.value)}\n      className={cn(baseControl, error && 'border-status-error-text')}\n    >\n      {placeholder && <option value=\"\">{placeholder}</option>}\n      {options.map((opt) => (\n        <option key={opt.value} value={opt.value}>\n          {opt.label}\n        </option>\n      ))}\n    </select>\n  </FieldShell>\n);\n"],"mappings":";;;AAsBA,IAAa,KAAmC,EAC9C,UACA,YACA,aACA,SACA,UACA,aACA,mBAEA,kBAAC,OAAD;CAAK,WAAW,EAAG,yBAAyB,EAAU;WAAtD;EACE,kBAAC,SAAD;GAAgB;GAAS,WAAU;aAAnC,CACG,GACA,KAAY,kBAAC,QAAD;IAAM,WAAU;cAAgC;IAAQ,CAAA,CAC/D;;EACP;EACA,IACC,kBAAC,KAAD;GAAG,WAAU;aAAkC;GAAU,CAAA,GACvD,IACF,kBAAC,KAAD;GAAG,WAAU;aAA+B;GAAS,CAAA,GACnD;EACA;IAGF,IACJ,sMAeW,KAAiC,EAC5C,OACA,UACA,UACA,aACA,gBACA,aACA,SACA,UACA,UAAO,QACP,mBAEA,kBAAC,GAAD;CACS;CACP,SAAS;CACC;CACJ;CACC;CACI;WAEX,kBAAC,SAAD;EACM;EACE;EACC;EACM;EACH;EACV,WAAW,MAAqC,EAAS,EAAE,OAAO,MAAM;EACxE,WAAW,EAAG,GAAa,KAAS,2BAA2B;EAC/D,CAAA;CACS,CAAA,EAgBF,KAAyC,EACpD,OACA,UACA,UACA,aACA,gBACA,aACA,SACA,UACA,UAAO,GACP,mBAEA,kBAAC,GAAD;CACS;CACP,SAAS;CACC;CACJ;CACC;CACI;WAEX,kBAAC,YAAD;EACM;EACG;EACM;EACH;EACJ;EACN,WAAW,MAAwC,EAAS,EAAE,OAAO,MAAM;EAC3E,WAAW,EAAG,GAAa,YAAY,KAAS,2BAA2B;EAC3E,CAAA;CACS,CAAA,EAcF,KAAqC,EAChD,OACA,UACA,YACA,aACA,SACA,aACA,mBAEA,kBAAC,SAAD;CACE,SAAS;CACT,WAAW,EACT,wGACA,KAAY,iCACZ,EACD;WANH,CAQE,kBAAC,SAAD;EACM;EACJ,MAAK;EACI;EACC;EACV,WAAW,MAAqC,EAAS,EAAE,OAAO,QAAQ;EAC1E,WAAU;EACV,CAAA,EACF,kBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,kBAAC,QAAD;GAAM,WAAU;aAA+C;GAAa,CAAA,EAC3E,KAAQ,kBAAC,QAAD;GAAM,WAAU;aAA4C;GAAY,CAAA,CAC5E;IACD;IAqBG,KAAqC,EAChD,OACA,UACA,UACA,aACA,YACA,aACA,SACA,UACA,gBACA,mBAEA,kBAAC,GAAD;CACS;CACP,SAAS;CACC;CACJ;CACC;CACI;WAEX,kBAAC,UAAD;EACM;EACG;EACG;EACV,WAAW,MAAsC,EAAS,EAAE,OAAO,MAAM;EACzE,WAAW,EAAG,GAAa,KAAS,2BAA2B;YALjE,CAOG,KAAe,kBAAC,UAAD;GAAQ,OAAM;aAAI;GAAqB,CAAA,EACtD,EAAQ,KAAK,MACZ,kBAAC,UAAD;GAAwB,OAAO,EAAI;aAChC,EAAI;GACE,EAFI,EAAI,MAER,CACT,CACK;;CACE,CAAA"}

package/dist/coolandlovely/components/FileImage.js

@@ -0,0 +1,17 @@
+import { cn as e } from "../utils/cn.js";
+import { useFileUrl as t } from "../hooks/useFiles.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/coolandlovely/components/FileImage.tsx
+var r = ({ fileId: r, alt: i = "", className: a }) => {
+	let { data: o } = t(r);
+	return !r || !o ? null : /* @__PURE__ */ n("img", {
+		src: o,
+		alt: i,
+		loading: "lazy",
+		className: e("h-full w-full object-cover", a)
+	});
+};
+//#endregion
+export { r as FileImage };
+
+//# sourceMappingURL=FileImage.js.map

package/dist/coolandlovely/components/FileImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileImage.js","names":[],"sources":["../../../src/coolandlovely/components/FileImage.tsx"],"sourcesContent":["/**\n * FileImage — render a wspace-files File id as an <img>.\n * @module coolandlovely/components\n *\n * Resolves the id to a short-lived presigned URL (useFileUrl, 6h TTL). Renders\n * nothing until resolved so callers can lay a glyph fallback underneath (no\n * broken <img>, no layout shift).\n */\n\nimport type { FC } from 'react';\nimport { useFileUrl } from '../hooks/useFiles';\nimport { cn } from '../utils/cn';\n\ninterface FileImageProps {\n  fileId?: string | null;\n  alt?: string;\n  className?: string;\n}\n\nexport const FileImage: FC<FileImageProps> = ({ fileId, alt = '', className }) => {\n  const { data: url } = useFileUrl(fileId);\n  if (!fileId || !url) return null;\n  return (\n    <img\n      src={url}\n      alt={alt}\n      loading=\"lazy\"\n      className={cn('h-full w-full object-cover', className)}\n    />\n  );\n};\n"],"mappings":";;;;AAmBA,IAAa,KAAiC,EAAE,WAAQ,SAAM,IAAI,mBAAgB;CAChF,IAAM,EAAE,MAAM,MAAQ,EAAW,EAAO;AAExC,QADI,CAAC,KAAU,CAAC,IAAY,OAE1B,kBAAC,OAAD;EACE,KAAK;EACA;EACL,SAAQ;EACR,WAAW,EAAG,8BAA8B,EAAU;EACtD,CAAA"}

package/dist/coolandlovely/components/FollowButton.js

@@ -0,0 +1,24 @@
+import { cn as e } from "../utils/cn.js";
+import { useFollow as t, useIsFollowing as n, useUnfollow as r } from "../hooks/useCoolAndLovelyApi.js";
+import { Loader2 as i, UserCheck as a, UserPlus as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/coolandlovely/components/FollowButton.tsx
+var l = ({ followeeId: l, className: u, size: d = "md" }) => {
+	let f = n(l ?? void 0), p = t(), m = r();
+	if (!l) return null;
+	let h = f.data ?? !1, g = p.isPending || m.isPending || f.isLoading;
+	return /* @__PURE__ */ c("button", {
+		type: "button",
+		onClick: () => {
+			l && (h ? m.mutate(l) : p.mutate(l));
+		},
+		disabled: g,
+		"aria-pressed": h,
+		className: e("inline-flex items-center gap-1.5 rounded-lg font-medium transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", d === "sm" ? "px-2.5 py-1 text-xs" : "px-3 py-2 text-sm", h ? "border border-border-seam text-text-primary hover:bg-bg-sunken" : "bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90", u),
+		children: [g ? /* @__PURE__ */ s(i, { className: e("animate-spin", d === "sm" ? "h-3.5 w-3.5" : "h-4 w-4") }) : s(h ? a : o, { className: d === "sm" ? "h-3.5 w-3.5" : "h-4 w-4" }), h ? "Following" : "Follow"]
+	});
+};
+//#endregion
+export { l as FollowButton };
+
+//# sourceMappingURL=FollowButton.js.map

package/dist/coolandlovely/components/FollowButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FollowButton.js","names":[],"sources":["../../../src/coolandlovely/components/FollowButton.tsx"],"sourcesContent":["/**\n * FollowButton — follow / unfollow a user actor (the follow graph).\n * @module coolandlovely/components\n *\n * Backed by cooFollow / cooUnfollow / cooIsFollowing (added this release). The\n * follow target is an actor id (a look's authorId, a style-profile owner, …).\n * Self-follow is impossible on the server; callers should not render this for\n * their own id.\n */\n\nimport type { FC } from 'react';\nimport { Loader2, UserCheck, UserPlus } from 'lucide-react';\nimport { useFollow, useIsFollowing, useUnfollow } from '../hooks/useCoolAndLovelyApi';\nimport { cn } from '../utils/cn';\n\ninterface FollowButtonProps {\n  /** Actor id to follow/unfollow. */\n  followeeId?: string | null;\n  className?: string;\n  size?: 'sm' | 'md';\n}\n\nexport const FollowButton: FC<FollowButtonProps> = ({ followeeId, className, size = 'md' }) => {\n  const following = useIsFollowing(followeeId ?? undefined);\n  const follow = useFollow();\n  const unfollow = useUnfollow();\n\n  if (!followeeId) return null;\n\n  const isFollowing = following.data ?? false;\n  const pending = follow.isPending || unfollow.isPending || following.isLoading;\n\n  const handleClick = () => {\n    if (!followeeId) return;\n    if (isFollowing) {\n      unfollow.mutate(followeeId);\n    } else {\n      follow.mutate(followeeId);\n    }\n  };\n\n  const sizing = size === 'sm' ? 'px-2.5 py-1 text-xs' : 'px-3 py-2 text-sm';\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={pending}\n      aria-pressed={isFollowing}\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-lg font-medium transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n        sizing,\n        isFollowing\n          ? 'border border-border-seam text-text-primary hover:bg-bg-sunken'\n          : 'bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90',\n        className\n      )}\n    >\n      {pending ? (\n        <Loader2 className={cn('animate-spin', size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4')} />\n      ) : isFollowing ? (\n        <UserCheck className={size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'} />\n      ) : (\n        <UserPlus className={size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'} />\n      )}\n      {isFollowing ? 'Following' : 'Follow'}\n    </button>\n  );\n};\n"],"mappings":";;;;;AAsBA,IAAa,KAAuC,EAAE,eAAY,cAAW,UAAO,WAAW;CAC7F,IAAM,IAAY,EAAe,KAAc,KAAA,EAAU,EACnD,IAAS,GAAW,EACpB,IAAW,GAAa;AAE9B,KAAI,CAAC,EAAY,QAAO;CAExB,IAAM,IAAc,EAAU,QAAQ,IAChC,IAAU,EAAO,aAAa,EAAS,aAAa,EAAU;AAapE,QACE,kBAAC,UAAD;EACE,MAAK;EACL,eAdsB;AACnB,SACD,IACF,EAAS,OAAO,EAAW,GAE3B,EAAO,OAAO,EAAW;;EAUzB,UAAU;EACV,gBAAc;EACd,WAAW,EACT,8LATS,MAAS,OAAO,wBAAwB,qBAWjD,IACI,mEACA,+EACJ,EACD;YAZH,CAcG,IACC,kBAAC,GAAD,EAAS,WAAW,EAAG,gBAAgB,MAAS,OAAO,gBAAgB,UAAU,EAAI,CAAA,GAErF,EADE,IACD,IAEA,GAFD,EAAW,WAAW,MAAS,OAAO,gBAAgB,WAAa,CAED,EAEnE,IAAc,cAAc,SACtB"}

package/dist/coolandlovely/components/ImageUploadField.js

@@ -0,0 +1,153 @@
+import { useCoolAndLovely as e } from "../context/CoolAndLovelyContext.js";
+import { cn as t } from "../utils/cn.js";
+import { uploadImageToFilesWithProgress as n, useFileUrl as r } from "../hooks/useFiles.js";
+import { FieldShell as i } from "./Field.js";
+import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { ImagePlus as l, Loader2 as u, UploadCloud as d, X as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/coolandlovely/components/ImageUploadField.tsx
+var h = 10 * 1024 * 1024;
+function g(e) {
+	if (e < 1024) return `${e} B`;
+	let t = e / 1024;
+	return t < 1024 ? `${t < 10 ? t.toFixed(1) : Math.round(t)} KB` : `${(t / 1024).toFixed(1)} MB`;
+}
+var _ = ({ label: _, value: v, onChange: y, folder: b, hint: x, accept: S = "image/*", disabled: C = !1, className: w, aspect: T = "square" }) => {
+	let { apiGatewayUrl: E } = e(), D = s(null), O = o(), [k, A] = c(!1), [j, M] = c(null), [N, P] = c(null), [F, I] = c(null), [L, R] = c(!1), [z, B] = c();
+	a(() => () => {
+		F && URL.revokeObjectURL(F);
+	}, [F]);
+	let V = r(k ? void 0 : v || void 0).data ?? null, H = C || k, U = async (e) => {
+		if (!e.type.startsWith("image/")) {
+			B("Please choose an image file (JPG or PNG).");
+			return;
+		}
+		if (e.size > h) {
+			B("That image is over 10 MB — please choose a smaller file.");
+			return;
+		}
+		B(void 0), P(e.name), I(URL.createObjectURL(e)), M({
+			loaded: 0,
+			total: e.size,
+			pct: 0
+		}), A(!0);
+		try {
+			y((await n(e, E, b, (e) => M(e))).id);
+		} catch (e) {
+			B(e instanceof Error ? e.message : "Upload failed — please try again.");
+		} finally {
+			A(!1), M(null), P(null), I(null);
+		}
+	}, W = (e) => {
+		let t = e.target.files?.[0];
+		e.target.value = "", t && U(t);
+	}, G = (e) => {
+		if (e.preventDefault(), R(!1), H) return;
+		let t = e.dataTransfer.files?.[0];
+		t && U(t);
+	}, K = (e) => {
+		e.preventDefault(), H || R(!0);
+	}, q = (e) => {
+		e.preventDefault(), R(!1);
+	}, J = j?.pct ?? 0;
+	return /* @__PURE__ */ m(i, {
+		label: _,
+		htmlFor: O,
+		hint: x,
+		error: z,
+		className: w,
+		children: [/* @__PURE__ */ p("div", {
+			onDragEnter: K,
+			onDragOver: K,
+			onDragLeave: q,
+			onDrop: G,
+			children: k ? /* @__PURE__ */ m("div", {
+				className: "flex items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-3",
+				children: [/* @__PURE__ */ p("div", {
+					className: "flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-bg-sunken",
+					children: F ? /* @__PURE__ */ p("img", {
+						src: F,
+						alt: "",
+						className: "h-full w-full object-cover"
+					}) : /* @__PURE__ */ p(u, { className: "h-5 w-5 animate-spin text-text-secondary" })
+				}), /* @__PURE__ */ m("div", {
+					className: "min-w-0 flex-1",
+					children: [
+						/* @__PURE__ */ p("p", {
+							className: "truncate text-sm font-medium text-text-primary",
+							children: N ?? "Uploading…"
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-bg-sunken",
+							children: /* @__PURE__ */ p("div", {
+								className: "h-full rounded-full bg-accent-primary transition-[width] duration-200",
+								style: { width: `${J}%` }
+							})
+						}),
+						/* @__PURE__ */ m("p", {
+							className: "mt-1 text-xs text-text-secondary tabular-nums",
+							children: [
+								J,
+								"%",
+								j ? ` · ${g(j.loaded)} of ${g(j.total)}` : ""
+							]
+						})
+					]
+				})]
+			}) : V ? /* @__PURE__ */ m("div", {
+				className: "relative overflow-hidden rounded-lg border border-border-seam bg-bg-sunken",
+				children: [/* @__PURE__ */ p("img", {
+					src: V,
+					alt: "",
+					className: t("w-full object-cover", T === "wide" ? "aspect-video" : "aspect-square max-h-64")
+				}), /* @__PURE__ */ m("div", {
+					className: "absolute inset-x-0 bottom-0 flex justify-end gap-2 bg-gradient-to-t from-bg-canvas/85 to-transparent p-2",
+					children: [/* @__PURE__ */ m("button", {
+						type: "button",
+						disabled: H,
+						onClick: () => D.current?.click(),
+						className: "inline-flex items-center gap-1.5 rounded-lg bg-bg-surface/90 px-3 py-1.5 text-sm font-medium text-text-primary shadow-sm backdrop-blur transition-colors hover:bg-bg-surface disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+						children: [/* @__PURE__ */ p(l, { className: "h-4 w-4" }), " Replace"]
+					}), /* @__PURE__ */ m("button", {
+						type: "button",
+						disabled: C,
+						onClick: () => y(""),
+						className: "inline-flex items-center gap-1 rounded-lg bg-bg-surface/90 px-3 py-1.5 text-sm text-text-secondary shadow-sm backdrop-blur transition-colors hover:bg-status-error-bg-subtle hover:text-status-error-text disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+						children: [/* @__PURE__ */ p(f, { className: "h-4 w-4" }), " Remove"]
+					})]
+				})]
+			}) : /* @__PURE__ */ m("button", {
+				type: "button",
+				disabled: H,
+				onClick: () => D.current?.click(),
+				className: t("flex min-h-40 w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:opacity-50", L ? "border-accent-primary bg-[var(--color-accent-soft)]" : "border-border-seam hover:border-accent-primary/60 hover:bg-bg-sunken"),
+				children: [
+					/* @__PURE__ */ p(d, {
+						className: "h-8 w-8 text-text-secondary",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ p("span", {
+						className: "text-sm font-medium text-text-primary",
+						children: "Drag & drop an image here, or click to browse"
+					}),
+					/* @__PURE__ */ p("span", {
+						className: "text-xs text-text-secondary",
+						children: "JPG · PNG · up to 10 MB"
+					})
+				]
+			})
+		}), /* @__PURE__ */ p("input", {
+			ref: D,
+			id: O,
+			type: "file",
+			accept: S,
+			className: "sr-only",
+			"aria-label": _,
+			onChange: W
+		})]
+	});
+};
+//#endregion
+export { _ as ImageUploadField };
+
+//# sourceMappingURL=ImageUploadField.js.map

package/dist/coolandlovely/components/ImageUploadField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadField.js","names":[],"sources":["../../../src/coolandlovely/components/ImageUploadField.tsx"],"sourcesContent":["/**\n * ImageUploadField — image upload for a coo* entity, backed by wspace-files-svc.\n * @module coolandlovely/components\n *\n * Controlled by the current File id (`value`). Resting state is a real\n * drag-and-drop dropzone (dashed border, cloud-upload glyph, size/type hint);\n * dropping or browsing runs the shared presigned upload (initiateUpload -> PUT\n * -> completeUpload) via `uploadImageToFilesWithProgress`, showing a live rose\n * progress bar. On success the new File id is handed back via `onChange`; the\n * caller persists it (e.g. logoFileId). Clearing sends onChange('').\n *\n * Inline (not a modal), token-only, no Apollo, no toast dependency — surfaces\n * its own errors inline to match the existing form error style.\n */\n\nimport type { DragEvent, FC } from 'react';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { ImagePlus, Loader2, UploadCloud, X } from 'lucide-react';\nimport { FieldShell } from './Field';\nimport { useCoolAndLovely } from '../context/CoolAndLovelyContext';\nimport { uploadImageToFilesWithProgress, useFileUrl, type UploadProgress } from '../hooks/useFiles';\nimport { cn } from '../utils/cn';\n\ninterface ImageUploadFieldProps {\n  label: string;\n  /** Current wspace-files File id, or '' / undefined when none. */\n  value?: string | null;\n  /** Called with the new File id on success, or '' when cleared. */\n  onChange: (fileId: string) => void;\n  /** Destination folder in wspace-files (see COO_FILE_FOLDERS). */\n  folder?: string;\n  hint?: string;\n  /** `accept` for the input; images only by default. */\n  accept?: string;\n  disabled?: boolean;\n  className?: string;\n  /** Aspect of the resolved-image preview tile. */\n  aspect?: 'square' | 'wide';\n}\n\n/** 10 MB — the mock's stated ceiling and a sensible cap for garment photos. */\nconst MAX_BYTES = 10 * 1024 * 1024;\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`;\n  const kb = bytes / 1024;\n  if (kb < 1024) return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`;\n  const mb = kb / 1024;\n  return `${mb.toFixed(1)} MB`;\n}\n\nexport const ImageUploadField: FC<ImageUploadFieldProps> = ({\n  label,\n  value,\n  onChange,\n  folder,\n  hint,\n  accept = 'image/*',\n  disabled = false,\n  className,\n  aspect = 'square',\n}) => {\n  const { apiGatewayUrl } = useCoolAndLovely();\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const inputId = useId();\n  const [uploading, setUploading] = useState(false);\n  const [progress, setProgress] = useState<UploadProgress | null>(null);\n  const [pendingName, setPendingName] = useState<string | null>(null);\n  const [pendingPreview, setPendingPreview] = useState<string | null>(null);\n  const [dragActive, setDragActive] = useState(false);\n  const [error, setError] = useState<string | undefined>();\n\n  // Revoke the local object-URL preview when it changes / on unmount.\n  useEffect(() => {\n    return () => {\n      if (pendingPreview) URL.revokeObjectURL(pendingPreview);\n    };\n  }, [pendingPreview]);\n\n  // While uploading we skip resolution; the preview shows after onChange lands.\n  const resolved = useFileUrl(uploading ? undefined : value || undefined);\n  const previewUrl = resolved.data ?? null;\n  const locked = disabled || uploading;\n\n  const upload = async (file: File) => {\n    // Validate before opening a session so bad files never hit the network.\n    if (!file.type.startsWith('image/')) {\n      setError('Please choose an image file (JPG or PNG).');\n      return;\n    }\n    if (file.size > MAX_BYTES) {\n      setError('That image is over 10 MB — please choose a smaller file.');\n      return;\n    }\n\n    setError(undefined);\n    setPendingName(file.name);\n    const objectUrl = URL.createObjectURL(file);\n    setPendingPreview(objectUrl);\n    setProgress({ loaded: 0, total: file.size, pct: 0 });\n    setUploading(true);\n    try {\n      const uploaded = await uploadImageToFilesWithProgress(file, apiGatewayUrl, folder, (p) =>\n        setProgress(p)\n      );\n      onChange(uploaded.id);\n    } catch (e) {\n      setError(e instanceof Error ? e.message : 'Upload failed — please try again.');\n    } finally {\n      setUploading(false);\n      setProgress(null);\n      setPendingName(null);\n      setPendingPreview(null);\n    }\n  };\n\n  const handleSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    event.target.value = ''; // allow re-selecting the same file\n    if (file) void upload(file);\n  };\n\n  const handleDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    setDragActive(false);\n    if (locked) return;\n    const file = event.dataTransfer.files?.[0];\n    if (file) void upload(file);\n  };\n\n  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    if (!locked) setDragActive(true);\n  };\n\n  const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    setDragActive(false);\n  };\n\n  const pct = progress?.pct ?? 0;\n\n  return (\n    <FieldShell label={label} htmlFor={inputId} hint={hint} error={error} className={className}>\n      <div\n        onDragEnter={handleDragOver}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        {uploading ? (\n          /* Uploading — file row with preview, filename and a rose progress bar. */\n          <div className=\"flex items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-3\">\n            <div className=\"flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-bg-sunken\">\n              {pendingPreview ? (\n                <img src={pendingPreview} alt=\"\" className=\"h-full w-full object-cover\" />\n              ) : (\n                <Loader2 className=\"h-5 w-5 animate-spin text-text-secondary\" />\n              )}\n            </div>\n            <div className=\"min-w-0 flex-1\">\n              <p className=\"truncate text-sm font-medium text-text-primary\">\n                {pendingName ?? 'Uploading…'}\n              </p>\n              <div className=\"mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n                <div\n                  className=\"h-full rounded-full bg-accent-primary transition-[width] duration-200\"\n                  style={{ width: `${pct}%` }}\n                />\n              </div>\n              <p className=\"mt-1 text-xs text-text-secondary tabular-nums\">\n                {pct}%\n                {progress\n                  ? ` · ${formatBytes(progress.loaded)} of ${formatBytes(progress.total)}`\n                  : ''}\n              </p>\n            </div>\n          </div>\n        ) : previewUrl ? (\n          /* Resolved image — preview with Replace / Remove actions. */\n          <div className=\"relative overflow-hidden rounded-lg border border-border-seam bg-bg-sunken\">\n            <img\n              src={previewUrl}\n              alt=\"\"\n              className={cn(\n                'w-full object-cover',\n                aspect === 'wide' ? 'aspect-video' : 'aspect-square max-h-64'\n              )}\n            />\n            <div className=\"absolute inset-x-0 bottom-0 flex justify-end gap-2 bg-gradient-to-t from-bg-canvas/85 to-transparent p-2\">\n              <button\n                type=\"button\"\n                disabled={locked}\n                onClick={() => inputRef.current?.click()}\n                className=\"inline-flex items-center gap-1.5 rounded-lg bg-bg-surface/90 px-3 py-1.5 text-sm font-medium text-text-primary shadow-sm backdrop-blur transition-colors hover:bg-bg-surface disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n              >\n                <ImagePlus className=\"h-4 w-4\" /> Replace\n              </button>\n              <button\n                type=\"button\"\n                disabled={disabled}\n                onClick={() => onChange('')}\n                className=\"inline-flex items-center gap-1 rounded-lg bg-bg-surface/90 px-3 py-1.5 text-sm text-text-secondary shadow-sm backdrop-blur transition-colors hover:bg-status-error-bg-subtle hover:text-status-error-text disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n              >\n                <X className=\"h-4 w-4\" /> Remove\n              </button>\n            </div>\n          </div>\n        ) : (\n          /* Empty — a real dropzone. */\n          <button\n            type=\"button\"\n            disabled={locked}\n            onClick={() => inputRef.current?.click()}\n            className={cn(\n              'flex min-h-40 w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] disabled:opacity-50',\n              dragActive\n                ? 'border-accent-primary bg-[var(--color-accent-soft)]'\n                : 'border-border-seam hover:border-accent-primary/60 hover:bg-bg-sunken'\n            )}\n          >\n            <UploadCloud className=\"h-8 w-8 text-text-secondary\" aria-hidden=\"true\" />\n            <span className=\"text-sm font-medium text-text-primary\">\n              Drag &amp; drop an image here, or click to browse\n            </span>\n            <span className=\"text-xs text-text-secondary\">JPG · PNG · up to 10 MB</span>\n          </button>\n        )}\n      </div>\n      <input\n        ref={inputRef}\n        id={inputId}\n        type=\"file\"\n        accept={accept}\n        className=\"sr-only\"\n        aria-label={label}\n        onChange={handleSelect}\n      />\n    </FieldShell>\n  );\n};\n"],"mappings":"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"}

package/dist/coolandlovely/components/LookCard.js

@@ -0,0 +1,77 @@
+import { cn as e } from "../utils/cn.js";
+import { Thumbnail as t } from "./Thumbnail.js";
+import { useLikeLook as n } from "../hooks/useCoolAndLovelyApi.js";
+import { AddToLookbookButton as r } from "./AddToLookbookButton.js";
+import { titleCase as i } from "../utils/formatters.js";
+import { useEffect as a, useState as o } from "react";
+import { Heart as s, Sparkles as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/coolandlovely/components/LookCard.tsx
+var d = ({ lookId: t, likeCount: r }) => {
+	let i = n(), [c, d] = o(!1), [f, p] = o(r);
+	return a(() => {
+		c || p(r);
+	}, [r, c]), /* @__PURE__ */ u("button", {
+		type: "button",
+		onClick: () => {
+			c || i.isPending || (d(!0), p((e) => e + 1), i.mutate(t, {
+				onSuccess: (e) => p(e.likeCount),
+				onError: () => {
+					d(!1), p(r);
+				}
+			}));
+		},
+		disabled: i.isPending,
+		"aria-pressed": c,
+		"aria-label": c ? "Liked" : "Like this look",
+		className: "inline-flex items-center gap-1 rounded-full bg-bg-surface/90 px-2 py-1 text-xs font-medium text-text-primary shadow-sm backdrop-blur transition-colors hover:bg-bg-surface disabled:opacity-60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+		children: [/* @__PURE__ */ l(s, { className: e("h-3.5 w-3.5", c ? "fill-current text-accent-primary" : "text-text-secondary") }), /* @__PURE__ */ l("span", {
+			className: "tabular-nums",
+			children: f
+		})]
+	});
+}, f = ({ id: n, title: a, occasion: o, imageFileId: f, likeCount: p, onOpen: m, showActions: h = !1, className: g }) => /* @__PURE__ */ u("div", {
+	className: e("group relative overflow-hidden rounded-xl border border-border-seam bg-bg-surface transition-shadow hover:shadow-lg", g),
+	children: [/* @__PURE__ */ l("button", {
+		type: "button",
+		onClick: m,
+		"aria-label": `Open look ${a}`,
+		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__ */ l(t, {
+			icon: /* @__PURE__ */ l(c, { className: "h-8 w-8" }),
+			seed: n,
+			fileId: f,
+			alt: a,
+			className: "aspect-[3/4] w-full rounded-none",
+			overlay: /* @__PURE__ */ u("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/45 to-transparent p-3 pt-10",
+				children: [/* @__PURE__ */ l("p", {
+					className: "truncate text-sm font-semibold text-text-primary",
+					children: a
+				}), /* @__PURE__ */ u("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ l("span", {
+						className: "inline-flex items-center rounded-full bg-bg-surface/85 px-2 py-0.5 text-[11px] font-medium text-text-primary backdrop-blur",
+						children: i(o)
+					}), !h && typeof p == "number" && p > 0 ? /* @__PURE__ */ u("span", {
+						className: "inline-flex items-center gap-1 text-xs text-text-secondary",
+						children: [/* @__PURE__ */ l(s, { className: "h-3.5 w-3.5 fill-current text-accent-primary" }), /* @__PURE__ */ l("span", {
+							className: "tabular-nums",
+							children: p
+						})]
+					}) : null]
+				})]
+			})
+		})
+	}), h ? /* @__PURE__ */ u("div", {
+		className: "absolute right-2 top-2 flex items-center gap-1.5 opacity-100 transition-opacity duration-200 sm:opacity-0 sm:focus-within:opacity-100 sm:group-hover:opacity-100",
+		children: [/* @__PURE__ */ l(d, {
+			lookId: n,
+			likeCount: p ?? 0
+		}), /* @__PURE__ */ l(r, { lookId: n })]
+	}) : null]
+});
+//#endregion
+export { f as LookCard };
+
+//# sourceMappingURL=LookCard.js.map