@burdenoff/microfe-coolandlovely 2026.706.2 → 2026.710.1

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

@@ -2,17 +2,17 @@ import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
 import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
 import { COO_FILE_FOLDERS as r } from "../../hooks/useFiles.js";
-import { useCollaborations as i, useCreateLook as a, useStyleItems as o, useUpdateLook as s } from "../../hooks/useCoolAndLovelyApi.js";
+import { useCollaborations as ee, useCreateLook as i, useStyleItems as a, useUpdateLook as te } from "../../hooks/useCoolAndLovelyApi.js";
+import { formatPrice as o, parseCsv as s, titleCase as c } from "../../utils/formatters.js";
 import "../../hooks/index.js";
-import { formatPrice as ee, parseCsv as te, titleCase as c } from "../../utils/formatters.js";
-import { SelectField as l, TextAreaField as u, TextField as d, ToggleField as f } from "../../components/Field.js";
-import { ImageUploadField as p } from "../../components/ImageUploadField.js";
-import { useMemo as m, useState as h } from "react";
-import { ArrowLeft as ne, Loader2 as re, Plus as g, Save as _, Sparkles as v, X as y } from "lucide-react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { GlassCard as S } from "@burdenoff/fe-libs/ui";
+import { SelectField as l, TextAreaField as ne, TextField as u, ToggleField as re } from "../../components/Field.js";
+import { ImageUploadField as d } from "../../components/ImageUploadField.js";
+import { useMemo as f, useState as p } from "react";
+import { ArrowLeft as ie, Loader2 as ae, Plus as m, Save as h, Sparkles as oe, X as se } from "lucide-react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { GlassCard as v } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/looks/LookFormPage.tsx
-var C = [
+var y = [
 	"EVERYDAY",
 	"WORK",
 	"EVENING",
@@ -21,220 +21,232 @@ var C = [
 	"PARTY",
 	"ACTIVE",
 	"OTHER"
-], w = [
+], b = [
 	"PUBLIC",
 	"FOLLOWERS",
 	"PRIVATE"
 ];
-function T() {
-	let { navigateTo: T, currentUser: E } = e(), D = a(), O = s(), k = o({
-		status: "ACTIVE",
-		pagination: {
-			limit: 100,
-			offset: 0
-		}
-	}), A = i(E?.id ? { creatorId: E.id } : {}), [j, M] = h(""), [N, P] = h(""), [F, I] = h("EVERYDAY"), [L, R] = h("PUBLIC"), [z, B] = h(""), [V, H] = h(""), [U, W] = h(""), [G, K] = h(!1), [q, J] = h([]), [Y, X] = h(), ie = m(() => (k.data?.items ?? []).map((e) => ({
+function x() {
+	let { navigateTo: x, currentUser: S } = e(), C = i(), w = te(), T = a({ pagination: {
+		limit: 100,
+		offset: 0
+	} }), E = ee(S?.id ? { creatorId: S.id } : {}), [D, ce] = p(""), [O, k] = p(""), [A, j] = p("EVERYDAY"), [M, N] = p("PUBLIC"), [P, F] = p(""), [I, L] = p(""), [R, z] = p(""), [B, V] = p(!1), [H, U] = p([]), [W, G] = p(""), [le, K] = p(), q = f(() => (T.data?.items ?? []).filter((e) => e.status !== "RETIRED"), [T.data]), J = f(() => q.map((e) => ({
 		value: e.id,
-		label: `${e.name}${e.brand?.name ? ` · ${e.brand.name}` : ""} — ${ee(e.price, e.currency)}`
-	})), [k.data]), Z = m(() => (A.data ?? []).map((e) => ({
+		label: `${e.name}${e.brand?.name ? ` · ${e.brand.name}` : ""} — ${o(e.price, e.currency)}`
+	})), [q]), Y = f(() => {
+		let e = new Set(H.map((e) => e.styleItemId));
+		return J.filter((t) => !e.has(t.value));
+	}, [J, H]), X = f(() => (E.data ?? []).map((e) => ({
 		value: e.id,
 		label: e.title
-	})), [A.data]), ae = C.map((e) => ({
+	})), [E.data]), Z = y.map((e) => ({
 		value: e,
 		label: c(e)
-	})), oe = w.map((e) => ({
+	})), ue = b.map((e) => ({
 		value: e,
 		label: c(e)
-	})), se = () => J((e) => [...e, {
-		styleItemId: "",
-		styling: ""
-	}]), ce = (e) => J((t) => t.filter((t, n) => n !== e)), Q = (e, t) => J((n) => n.map((n, r) => r === e ? {
+	})), de = (e) => {
+		e && U((t) => t.some((t) => t.styleItemId === e) ? t : [...t, {
+			styleItemId: e,
+			styling: ""
+		}]);
+	}, fe = (e) => U((t) => t.filter((t, n) => n !== e)), Q = (e, t) => U((n) => n.map((n, r) => r === e ? {
 		...n,
 		...t
-	} : n)), $ = D.isPending || O.isPending;
-	return /* @__PURE__ */ b(n, {
+	} : n)), $ = C.isPending || w.isPending;
+	return /* @__PURE__ */ g(n, {
 		title: "New look",
 		description: "Compose a shop-the-look outfit from catalogue pieces",
-		actions: /* @__PURE__ */ x("button", {
+		actions: /* @__PURE__ */ _("button", {
 			type: "button",
-			onClick: () => T("/looks"),
+			onClick: () => x("/looks"),
 			className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
-			children: [/* @__PURE__ */ b(ne, { className: "h-4 w-4" }), " Cancel"]
+			children: [/* @__PURE__ */ g(ie, { className: "h-4 w-4" }), " Cancel"]
 		}),
-		children: /* @__PURE__ */ b("form", {
+		children: /* @__PURE__ */ g("form", {
 			onSubmit: (e) => {
-				if (e.preventDefault(), !j.trim()) {
-					X("Title is required");
+				if (e.preventDefault(), !D.trim()) {
+					K("Title is required");
 					return;
 				}
-				X(void 0);
-				let t = q.filter((e) => e.styleItemId).map((e, t) => ({
+				K(void 0);
+				let t = H.filter((e) => e.styleItemId).map((e, t) => ({
 					styleItemId: e.styleItemId,
 					position: t,
 					styling: e.styling.trim() || void 0
 				}));
-				D.mutate({
-					title: j.trim(),
-					caption: N.trim() || void 0,
-					occasion: F,
-					visibility: L,
-					collaborationId: U || void 0,
-					imageFileId: V || void 0,
-					tags: te(z),
+				C.mutate({
+					title: D.trim(),
+					caption: O.trim() || void 0,
+					occasion: A,
+					visibility: M,
+					collaborationId: R || void 0,
+					imageFileId: I || void 0,
+					tags: s(P),
 					items: t.length > 0 ? t : void 0
 				}, { onSuccess: (e) => {
-					G ? O.mutate({
+					B ? w.mutate({
 						id: e.id,
 						input: { isFeatured: !0 }
-					}, { onSuccess: () => T(`/looks/${e.id}`) }) : T(`/looks/${e.id}`);
+					}, { onSuccess: () => x(`/looks/${e.id}`) }) : x(`/looks/${e.id}`);
 				} });
 			},
 			className: "mx-auto max-w-2xl",
-			children: /* @__PURE__ */ x(S, {
+			children: /* @__PURE__ */ _(v, {
 				treatment: "plain",
 				className: "p-6",
 				children: [
-					/* @__PURE__ */ x("div", {
+					/* @__PURE__ */ _("div", {
 						className: "mb-6 flex items-center gap-3",
-						children: [/* @__PURE__ */ b("div", {
+						children: [/* @__PURE__ */ g("div", {
 							className: "flex h-11 w-11 items-center justify-center rounded-lg bg-status-success-bg-subtle text-status-success-text",
-							children: /* @__PURE__ */ b(v, { className: "h-5 w-5" })
-						}), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h2", {
+							children: /* @__PURE__ */ g(oe, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h2", {
 							className: "text-base font-semibold text-text-primary",
 							children: "Look details"
-						}), /* @__PURE__ */ b("p", {
+						}), /* @__PURE__ */ g("p", {
 							className: "text-xs text-text-secondary",
 							children: "Created as a draft — publish it from the look page."
 						})] })]
 					}),
-					/* @__PURE__ */ b(d, {
+					/* @__PURE__ */ g(u, {
 						id: "title",
 						label: "Title",
-						value: j,
-						onChange: M,
+						value: D,
+						onChange: ce,
 						placeholder: "Coastal grandma, refined",
 						required: !0,
-						error: Y
+						error: le
 					}),
-					/* @__PURE__ */ b(u, {
+					/* @__PURE__ */ g(ne, {
 						id: "caption",
 						label: "Caption",
-						value: N,
-						onChange: P,
+						value: O,
+						onChange: k,
 						placeholder: "How to style it…",
 						rows: 3,
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ b(p, {
+					/* @__PURE__ */ g(d, {
 						label: "Look photo",
 						aspect: "wide",
-						value: V,
-						onChange: H,
+						value: I,
+						onChange: L,
 						folder: r.looks,
 						hint: "The styled outfit shot",
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ x("div", {
+					/* @__PURE__ */ _("div", {
 						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2",
-						children: [/* @__PURE__ */ b(l, {
+						children: [/* @__PURE__ */ g(l, {
 							id: "occasion",
 							label: "Occasion",
-							value: F,
-							onChange: (e) => I(e),
-							options: ae
-						}), /* @__PURE__ */ b(l, {
+							value: A,
+							onChange: (e) => j(e),
+							options: Z
+						}), /* @__PURE__ */ g(l, {
 							id: "visibility",
 							label: "Visibility",
-							value: L,
-							onChange: (e) => R(e),
-							options: oe
+							value: M,
+							onChange: (e) => N(e),
+							options: ue
 						})]
 					}),
-					/* @__PURE__ */ b(l, {
+					/* @__PURE__ */ g(l, {
 						id: "collaborationId",
 						label: "Collaboration (optional)",
-						value: U,
-						onChange: W,
-						options: Z,
-						placeholder: A.isLoading ? "Loading collaborations…" : Z.length === 0 ? "No collaborations yet" : "Not part of a collaboration",
+						value: R,
+						onChange: z,
+						options: X,
+						placeholder: E.isLoading ? "Loading collaborations…" : X.length === 0 ? "No collaborations yet" : "Not part of a collaboration",
 						hint: "Attribute this look to one of your collaborations",
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ b(d, {
+					/* @__PURE__ */ g(u, {
 						id: "tags",
 						label: "Tags",
-						value: z,
-						onChange: B,
+						value: P,
+						onChange: F,
 						placeholder: "linen, neutral",
 						hint: "Comma-separated",
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ b(f, {
+					/* @__PURE__ */ g(re, {
 						id: "isFeatured",
 						label: "Feature this look",
-						checked: G,
-						onChange: K,
+						checked: B,
+						onChange: V,
 						hint: "Featured looks surface in the Featured filter and carry a star badge.",
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ x("div", {
+					/* @__PURE__ */ _("div", {
 						className: "mt-6",
-						children: [/* @__PURE__ */ x("div", {
-							className: "mb-2 flex items-center justify-between",
-							children: [/* @__PURE__ */ b("p", {
-								className: "text-sm font-medium text-text-primary",
-								children: "Pieces in this look"
-							}), /* @__PURE__ */ x("button", {
+						children: [/* @__PURE__ */ _("div", {
+							className: "mb-3 flex flex-col gap-3 sm:flex-row sm:items-end",
+							children: [/* @__PURE__ */ g("div", {
+								className: "flex-1",
+								children: /* @__PURE__ */ g(l, {
+									id: "add-style-item",
+									label: "Pieces in this look",
+									value: W,
+									onChange: G,
+									options: Y,
+									placeholder: T.isLoading ? "Loading catalogue…" : Y.length === 0 ? "All available pieces are already added" : "Select a catalogue piece"
+								})
+							}), /* @__PURE__ */ _("button", {
 								type: "button",
-								onClick: se,
-								className: "inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline",
-								children: [/* @__PURE__ */ b(g, { className: "h-3.5 w-3.5" }), " Add piece"]
+								disabled: !W,
+								onClick: () => {
+									de(W), G("");
+								},
+								className: "inline-flex items-center justify-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 disabled:cursor-not-allowed disabled:opacity-50",
+								children: [/* @__PURE__ */ g(m, { className: "h-4 w-4" }), " Add piece"]
 							})]
-						}), q.length === 0 ? /* @__PURE__ */ b("p", {
+						}), H.length === 0 ? /* @__PURE__ */ g("p", {
 							className: "rounded-lg border border-dashed border-border-seam p-4 text-center text-xs text-text-secondary",
 							children: "No pieces added yet. A look can be published without pieces and styled later."
-						}) : /* @__PURE__ */ b("div", {
+						}) : /* @__PURE__ */ g("div", {
 							className: "space-y-3",
-							children: q.map((e, n) => /* @__PURE__ */ b("div", {
+							children: H.map((e, n) => /* @__PURE__ */ g("div", {
 								className: "rounded-lg border border-border-seam bg-bg-surface p-3",
-								children: /* @__PURE__ */ x("div", {
+								children: /* @__PURE__ */ _("div", {
 									className: "flex items-start gap-2",
-									children: [/* @__PURE__ */ x("div", {
+									children: [/* @__PURE__ */ _("div", {
 										className: "flex-1 space-y-2",
-										children: [/* @__PURE__ */ b(l, {
+										children: [/* @__PURE__ */ g(l, {
 											label: `Piece ${n + 1}`,
 											value: e.styleItemId,
 											onChange: (e) => Q(n, { styleItemId: e }),
-											options: ie,
-											placeholder: k.isLoading ? "Loading items…" : "Select a style item"
-										}), /* @__PURE__ */ b(d, {
+											options: J,
+											placeholder: T.isLoading ? "Loading items…" : "Select a style item"
+										}), /* @__PURE__ */ g(u, {
 											label: "Styling note",
 											value: e.styling,
 											onChange: (e) => Q(n, { styling: e }),
 											placeholder: "Cuff the sleeves, tuck the front…"
 										})]
-									}), /* @__PURE__ */ b("button", {
+									}), /* @__PURE__ */ g("button", {
 										type: "button",
-										onClick: () => ce(n),
+										onClick: () => fe(n),
 										"aria-label": "Remove piece",
 										className: t("mt-7 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg", "text-text-secondary transition-colors hover:bg-status-error-bg-subtle hover:text-status-error-text"),
-										children: /* @__PURE__ */ b(y, { className: "h-4 w-4" })
+										children: /* @__PURE__ */ g(se, { className: "h-4 w-4" })
 									})]
 								})
 							}, n))
 						})]
 					}),
-					D.isError && /* @__PURE__ */ b("p", {
+					C.isError && /* @__PURE__ */ g("p", {
 						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-						children: D.error instanceof Error ? D.error.message : "Something went wrong"
+						children: C.error instanceof Error ? C.error.message : "Something went wrong"
 					}),
-					/* @__PURE__ */ b("div", {
+					/* @__PURE__ */ g("div", {
 						className: "mt-6 flex justify-end gap-2",
-						children: /* @__PURE__ */ x("button", {
+						children: /* @__PURE__ */ _("button", {
 							type: "submit",
 							disabled: $,
 							className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
-							children: [$ ? /* @__PURE__ */ b(re, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ b(_, { className: "h-4 w-4" }), "Create look"]
+							children: [$ ? /* @__PURE__ */ g(ae, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ g(h, { className: "h-4 w-4" }), "Create look"]
 						})
 					})
 				]
@@ -243,6 +255,6 @@ function T() {
 	});
 }
 //#endregion
-export { T as LookFormPage };
+export { x as LookFormPage };
 
 //# sourceMappingURL=LookFormPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LookFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/looks/LookFormPage.tsx"],"sourcesContent":["/**\n * Look Create Page\n * @module coolandlovely/pages/looks\n *\n * Drives `cooCreateLook`. A look is created with its title/occasion/visibility\n * and an inline list of look items (catalogue pieces + styling notes), matching\n * the `CooCreateLookInput` shape exactly.\n */\n\nimport { useMemo, useState } from 'react';\nimport { ArrowLeft, Loader2, Save, Sparkles, Plus, X } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { TextField, TextAreaField, SelectField, ToggleField } from '../../components/Field';\nimport { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useCreateLook, useUpdateLook, useStyleItems, useCollaborations } from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\nimport { parseCsv, titleCase, formatPrice } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooLookOccasion, CooVisibility, CooLookItemInput } from '../../types';\n\nconst OCCASIONS: CooLookOccasion[] = [\n  'EVERYDAY',\n  'WORK',\n  'EVENING',\n  'WEDDING_GUEST',\n  'VACATION',\n  'PARTY',\n  'ACTIVE',\n  'OTHER',\n];\n\nconst VISIBILITIES: CooVisibility[] = ['PUBLIC', 'FOLLOWERS', 'PRIVATE'];\n\ninterface DraftItem {\n  styleItemId: string;\n  styling: string;\n}\n\nexport function LookFormPage() {\n  const { navigateTo, currentUser } = useCoolAndLovely();\n  const createLook = useCreateLook();\n  const updateLook = useUpdateLook();\n  const styleItems = useStyleItems({\n    status: 'ACTIVE',\n    pagination: { limit: 100, offset: 0 },\n  });\n  // The caller's own collaborations — a look can be attributed to one.\n  const collaborations = useCollaborations(\n    currentUser?.id ? { creatorId: currentUser.id } : {}\n  );\n\n  const [title, setTitle] = useState('');\n  const [caption, setCaption] = useState('');\n  const [occasion, setOccasion] = useState<CooLookOccasion>('EVERYDAY');\n  const [visibility, setVisibility] = useState<CooVisibility>('PUBLIC');\n  const [tags, setTags] = useState('');\n  const [imageFileId, setImageFileId] = useState('');\n  const [collaborationId, setCollaborationId] = useState('');\n  const [isFeatured, setIsFeatured] = useState(false);\n  const [draftItems, setDraftItems] = useState<DraftItem[]>([]);\n  const [titleError, setTitleError] = useState<string | undefined>();\n\n  const itemOptions = useMemo(\n    () =>\n      (styleItems.data?.items ?? []).map((i) => ({\n        value: i.id,\n        label: `${i.name}${i.brand?.name ? ` · ${i.brand.name}` : ''} — ${formatPrice(i.price, i.currency)}`,\n      })),\n    [styleItems.data]\n  );\n\n  const collaborationOptions = useMemo(\n    () => (collaborations.data ?? []).map((c) => ({ value: c.id, label: c.title })),\n    [collaborations.data]\n  );\n\n  const occasionOptions = OCCASIONS.map((o) => ({ value: o, label: titleCase(o) }));\n  const visibilityOptions = VISIBILITIES.map((v) => ({ value: v, label: titleCase(v) }));\n\n  const addDraftItem = () => setDraftItems((d) => [...d, { styleItemId: '', styling: '' }]);\n  const removeDraftItem = (idx: number) => setDraftItems((d) => d.filter((_, i) => i !== idx));\n  const setDraftItem = (idx: number, patch: Partial<DraftItem>) =>\n    setDraftItems((d) => d.map((it, i) => (i === idx ? { ...it, ...patch } : it)));\n\n  const submitting = createLook.isPending || updateLook.isPending;\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!title.trim()) {\n      setTitleError('Title is required');\n      return;\n    }\n    setTitleError(undefined);\n\n    const items: CooLookItemInput[] = draftItems\n      .filter((d) => d.styleItemId)\n      .map((d, idx) => ({\n        styleItemId: d.styleItemId,\n        position: idx,\n        styling: d.styling.trim() || undefined,\n      }));\n\n    createLook.mutate(\n      {\n        title: title.trim(),\n        caption: caption.trim() || undefined,\n        occasion,\n        visibility,\n        collaborationId: collaborationId || undefined,\n        imageFileId: imageFileId || undefined,\n        tags: parseCsv(tags),\n        items: items.length > 0 ? items : undefined,\n      },\n      {\n        onSuccess: (look) => {\n          // isFeatured is only settable via update — feature right after create.\n          if (isFeatured) {\n            updateLook.mutate(\n              { id: look.id, input: { isFeatured: true } },\n              { onSuccess: () => navigateTo(`/looks/${look.id}`) }\n            );\n          } else {\n            navigateTo(`/looks/${look.id}`);\n          }\n        },\n      }\n    );\n  };\n\n  return (\n    <PageLayout\n      title=\"New look\"\n      description=\"Compose a shop-the-look outfit from catalogue pieces\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/looks')}\n          className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" /> Cancel\n        </button>\n      }\n    >\n      <form onSubmit={handleSubmit} className=\"mx-auto max-w-2xl\">\n        <GlassCard treatment=\"plain\" className=\"p-6\">\n          <div className=\"mb-6 flex items-center gap-3\">\n            <div className=\"flex h-11 w-11 items-center justify-center rounded-lg bg-status-success-bg-subtle text-status-success-text\">\n              <Sparkles className=\"h-5 w-5\" />\n            </div>\n            <div>\n              <h2 className=\"text-base font-semibold text-text-primary\">Look details</h2>\n              <p className=\"text-xs text-text-secondary\">\n                Created as a draft — publish it from the look page.\n              </p>\n            </div>\n          </div>\n\n          <TextField\n            id=\"title\"\n            label=\"Title\"\n            value={title}\n            onChange={setTitle}\n            placeholder=\"Coastal grandma, refined\"\n            required\n            error={titleError}\n          />\n\n          <TextAreaField\n            id=\"caption\"\n            label=\"Caption\"\n            value={caption}\n            onChange={setCaption}\n            placeholder=\"How to style it…\"\n            rows={3}\n            className=\"mt-4\"\n          />\n\n          <ImageUploadField\n            label=\"Look photo\"\n            aspect=\"wide\"\n            value={imageFileId}\n            onChange={setImageFileId}\n            folder={COO_FILE_FOLDERS.looks}\n            hint=\"The styled outfit shot\"\n            className=\"mt-4\"\n          />\n\n          <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <SelectField\n              id=\"occasion\"\n              label=\"Occasion\"\n              value={occasion}\n              onChange={(v) => setOccasion(v as CooLookOccasion)}\n              options={occasionOptions}\n            />\n            <SelectField\n              id=\"visibility\"\n              label=\"Visibility\"\n              value={visibility}\n              onChange={(v) => setVisibility(v as CooVisibility)}\n              options={visibilityOptions}\n            />\n          </div>\n\n          <SelectField\n            id=\"collaborationId\"\n            label=\"Collaboration (optional)\"\n            value={collaborationId}\n            onChange={setCollaborationId}\n            options={collaborationOptions}\n            placeholder={\n              collaborations.isLoading\n                ? 'Loading collaborations…'\n                : collaborationOptions.length === 0\n                  ? 'No collaborations yet'\n                  : 'Not part of a collaboration'\n            }\n            hint=\"Attribute this look to one of your collaborations\"\n            className=\"mt-4\"\n          />\n\n          <TextField\n            id=\"tags\"\n            label=\"Tags\"\n            value={tags}\n            onChange={setTags}\n            placeholder=\"linen, neutral\"\n            hint=\"Comma-separated\"\n            className=\"mt-4\"\n          />\n\n          <ToggleField\n            id=\"isFeatured\"\n            label=\"Feature this look\"\n            checked={isFeatured}\n            onChange={setIsFeatured}\n            hint=\"Featured looks surface in the Featured filter and carry a star badge.\"\n            className=\"mt-4\"\n          />\n\n          {/* Look items */}\n          <div className=\"mt-6\">\n            <div className=\"mb-2 flex items-center justify-between\">\n              <p className=\"text-sm font-medium text-text-primary\">Pieces in this look</p>\n              <button\n                type=\"button\"\n                onClick={addDraftItem}\n                className=\"inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline\"\n              >\n                <Plus className=\"h-3.5 w-3.5\" /> Add piece\n              </button>\n            </div>\n            {draftItems.length === 0 ? (\n              <p className=\"rounded-lg border border-dashed border-border-seam p-4 text-center text-xs text-text-secondary\">\n                No pieces added yet. A look can be published without pieces and styled later.\n              </p>\n            ) : (\n              <div className=\"space-y-3\">\n                {draftItems.map((di, idx) => (\n                  <div key={idx} className=\"rounded-lg border border-border-seam bg-bg-surface p-3\">\n                    <div className=\"flex items-start gap-2\">\n                      <div className=\"flex-1 space-y-2\">\n                        <SelectField\n                          label={`Piece ${idx + 1}`}\n                          value={di.styleItemId}\n                          onChange={(v) => setDraftItem(idx, { styleItemId: v })}\n                          options={itemOptions}\n                          placeholder={\n                            styleItems.isLoading ? 'Loading items…' : 'Select a style item'\n                          }\n                        />\n                        <TextField\n                          label=\"Styling note\"\n                          value={di.styling}\n                          onChange={(v) => setDraftItem(idx, { styling: v })}\n                          placeholder=\"Cuff the sleeves, tuck the front…\"\n                        />\n                      </div>\n                      <button\n                        type=\"button\"\n                        onClick={() => removeDraftItem(idx)}\n                        aria-label=\"Remove piece\"\n                        className={cn(\n                          'mt-7 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',\n                          'text-text-secondary transition-colors hover:bg-status-error-bg-subtle hover:text-status-error-text'\n                        )}\n                      >\n                        <X className=\"h-4 w-4\" />\n                      </button>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {createLook.isError && (\n            <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n              {createLook.error instanceof Error\n                ? createLook.error.message\n                : 'Something went wrong'}\n            </p>\n          )}\n\n          <div className=\"mt-6 flex justify-end gap-2\">\n            <button\n              type=\"submit\"\n              disabled={submitting}\n              className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n            >\n              {submitting ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Save className=\"h-4 w-4\" />\n              )}\n              Create look\n            </button>\n          </div>\n        </GlassCard>\n      </form>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LookFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/looks/LookFormPage.tsx"],"sourcesContent":["/**\n * Look Create Page\n * @module coolandlovely/pages/looks\n *\n * Drives `cooCreateLook`. A look is created with its title/occasion/visibility\n * and an inline list of look items (catalogue pieces + styling notes), matching\n * the `CooCreateLookInput` shape exactly.\n */\n\nimport { useMemo, useState } from 'react';\nimport { ArrowLeft, Loader2, Plus, Save, Sparkles, X } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { TextField, TextAreaField, SelectField, ToggleField } from '../../components/Field';\nimport { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useCreateLook, useUpdateLook, useStyleItems, useCollaborations } from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\nimport { parseCsv, titleCase, formatPrice } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooLookOccasion, CooVisibility, CooLookItemInput } from '../../types';\n\nconst OCCASIONS: CooLookOccasion[] = [\n  'EVERYDAY',\n  'WORK',\n  'EVENING',\n  'WEDDING_GUEST',\n  'VACATION',\n  'PARTY',\n  'ACTIVE',\n  'OTHER',\n];\n\nconst VISIBILITIES: CooVisibility[] = ['PUBLIC', 'FOLLOWERS', 'PRIVATE'];\n\ninterface DraftItem {\n  styleItemId: string;\n  styling: string;\n}\n\nexport function LookFormPage() {\n  const { navigateTo, currentUser } = useCoolAndLovely();\n  const createLook = useCreateLook();\n  const updateLook = useUpdateLook();\n  const styleItems = useStyleItems({ pagination: { limit: 100, offset: 0 } });\n  // The caller's own collaborations — a look can be attributed to one.\n  const collaborations = useCollaborations(currentUser?.id ? { creatorId: currentUser.id } : {});\n\n  const [title, setTitle] = useState('');\n  const [caption, setCaption] = useState('');\n  const [occasion, setOccasion] = useState<CooLookOccasion>('EVERYDAY');\n  const [visibility, setVisibility] = useState<CooVisibility>('PUBLIC');\n  const [tags, setTags] = useState('');\n  const [imageFileId, setImageFileId] = useState('');\n  const [collaborationId, setCollaborationId] = useState('');\n  const [isFeatured, setIsFeatured] = useState(false);\n  const [draftItems, setDraftItems] = useState<DraftItem[]>([]);\n  const [addValue, setAddValue] = useState('');\n  const [titleError, setTitleError] = useState<string | undefined>();\n\n  const usableItems = useMemo(\n    () => (styleItems.data?.items ?? []).filter((i) => i.status !== 'RETIRED'),\n    [styleItems.data]\n  );\n\n  const itemOptions = useMemo(\n    () =>\n      usableItems.map((i) => ({\n        value: i.id,\n        label: `${i.name}${i.brand?.name ? ` · ${i.brand.name}` : ''} — ${formatPrice(i.price, i.currency)}`,\n      })),\n    [usableItems]\n  );\n\n  // Pieces not yet added — the right-rail \"add\" picker only offers these.\n  const availableOptions = useMemo(() => {\n    const chosen = new Set(draftItems.map((d) => d.styleItemId));\n    return itemOptions.filter((o) => !chosen.has(o.value));\n  }, [itemOptions, draftItems]);\n\n  const collaborationOptions = useMemo(\n    () => (collaborations.data ?? []).map((c) => ({ value: c.id, label: c.title })),\n    [collaborations.data]\n  );\n\n  const occasionOptions = OCCASIONS.map((o) => ({ value: o, label: titleCase(o) }));\n  const visibilityOptions = VISIBILITIES.map((v) => ({ value: v, label: titleCase(v) }));\n\n  const addDraftItem = (styleItemId: string) => {\n    if (!styleItemId) return;\n    setDraftItems((d) =>\n      d.some((it) => it.styleItemId === styleItemId) ? d : [...d, { styleItemId, styling: '' }]\n    );\n  };\n  const removeDraftItem = (idx: number) => setDraftItems((d) => d.filter((_, i) => i !== idx));\n  const setDraftItem = (idx: number, patch: Partial<DraftItem>) =>\n    setDraftItems((d) => d.map((it, i) => (i === idx ? { ...it, ...patch } : it)));\n\n  const submitting = createLook.isPending || updateLook.isPending;\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!title.trim()) {\n      setTitleError('Title is required');\n      return;\n    }\n    setTitleError(undefined);\n\n    const items: CooLookItemInput[] = draftItems\n      .filter((d) => d.styleItemId)\n      .map((d, idx) => ({\n        styleItemId: d.styleItemId,\n        position: idx,\n        styling: d.styling.trim() || undefined,\n      }));\n\n    createLook.mutate(\n      {\n        title: title.trim(),\n        caption: caption.trim() || undefined,\n        occasion,\n        visibility,\n        collaborationId: collaborationId || undefined,\n        imageFileId: imageFileId || undefined,\n        tags: parseCsv(tags),\n        items: items.length > 0 ? items : undefined,\n      },\n      {\n        onSuccess: (look) => {\n          // isFeatured is only settable via update — feature right after create.\n          if (isFeatured) {\n            updateLook.mutate(\n              { id: look.id, input: { isFeatured: true } },\n              { onSuccess: () => navigateTo(`/looks/${look.id}`) }\n            );\n          } else {\n            navigateTo(`/looks/${look.id}`);\n          }\n        },\n      }\n    );\n  };\n\n  return (\n    <PageLayout\n      title=\"New look\"\n      description=\"Compose a shop-the-look outfit from catalogue pieces\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/looks')}\n          className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" /> Cancel\n        </button>\n      }\n    >\n      <form onSubmit={handleSubmit} className=\"mx-auto max-w-2xl\">\n        <GlassCard treatment=\"plain\" className=\"p-6\">\n          <div className=\"mb-6 flex items-center gap-3\">\n            <div className=\"flex h-11 w-11 items-center justify-center rounded-lg bg-status-success-bg-subtle text-status-success-text\">\n              <Sparkles className=\"h-5 w-5\" />\n            </div>\n            <div>\n              <h2 className=\"text-base font-semibold text-text-primary\">Look details</h2>\n              <p className=\"text-xs text-text-secondary\">\n                Created as a draft — publish it from the look page.\n              </p>\n            </div>\n          </div>\n\n          <TextField\n            id=\"title\"\n            label=\"Title\"\n            value={title}\n            onChange={setTitle}\n            placeholder=\"Coastal grandma, refined\"\n            required\n            error={titleError}\n          />\n\n          <TextAreaField\n            id=\"caption\"\n            label=\"Caption\"\n            value={caption}\n            onChange={setCaption}\n            placeholder=\"How to style it…\"\n            rows={3}\n            className=\"mt-4\"\n          />\n\n          <ImageUploadField\n            label=\"Look photo\"\n            aspect=\"wide\"\n            value={imageFileId}\n            onChange={setImageFileId}\n            folder={COO_FILE_FOLDERS.looks}\n            hint=\"The styled outfit shot\"\n            className=\"mt-4\"\n          />\n\n          <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <SelectField\n              id=\"occasion\"\n              label=\"Occasion\"\n              value={occasion}\n              onChange={(v) => setOccasion(v as CooLookOccasion)}\n              options={occasionOptions}\n            />\n            <SelectField\n              id=\"visibility\"\n              label=\"Visibility\"\n              value={visibility}\n              onChange={(v) => setVisibility(v as CooVisibility)}\n              options={visibilityOptions}\n            />\n          </div>\n\n          <SelectField\n            id=\"collaborationId\"\n            label=\"Collaboration (optional)\"\n            value={collaborationId}\n            onChange={setCollaborationId}\n            options={collaborationOptions}\n            placeholder={\n              collaborations.isLoading\n                ? 'Loading collaborations…'\n                : collaborationOptions.length === 0\n                  ? 'No collaborations yet'\n                  : 'Not part of a collaboration'\n            }\n            hint=\"Attribute this look to one of your collaborations\"\n            className=\"mt-4\"\n          />\n\n          <TextField\n            id=\"tags\"\n            label=\"Tags\"\n            value={tags}\n            onChange={setTags}\n            placeholder=\"linen, neutral\"\n            hint=\"Comma-separated\"\n            className=\"mt-4\"\n          />\n\n          <ToggleField\n            id=\"isFeatured\"\n            label=\"Feature this look\"\n            checked={isFeatured}\n            onChange={setIsFeatured}\n            hint=\"Featured looks surface in the Featured filter and carry a star badge.\"\n            className=\"mt-4\"\n          />\n\n          {/* Look items */}\n          <div className=\"mt-6\">\n            <div className=\"mb-3 flex flex-col gap-3 sm:flex-row sm:items-end\">\n              <div className=\"flex-1\">\n                <SelectField\n                  id=\"add-style-item\"\n                  label=\"Pieces in this look\"\n                  value={addValue}\n                  onChange={setAddValue}\n                  options={availableOptions}\n                  placeholder={\n                    styleItems.isLoading\n                      ? 'Loading catalogue…'\n                      : availableOptions.length === 0\n                        ? 'All available pieces are already added'\n                        : 'Select a catalogue piece'\n                  }\n                />\n              </div>\n              <button\n                type=\"button\"\n                disabled={!addValue}\n                onClick={() => {\n                  addDraftItem(addValue);\n                  setAddValue('');\n                }}\n                className=\"inline-flex items-center justify-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 disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                <Plus className=\"h-4 w-4\" /> Add piece\n              </button>\n            </div>\n            {draftItems.length === 0 ? (\n              <p className=\"rounded-lg border border-dashed border-border-seam p-4 text-center text-xs text-text-secondary\">\n                No pieces added yet. A look can be published without pieces and styled later.\n              </p>\n            ) : (\n              <div className=\"space-y-3\">\n                {draftItems.map((di, idx) => (\n                  <div key={idx} className=\"rounded-lg border border-border-seam bg-bg-surface p-3\">\n                    <div className=\"flex items-start gap-2\">\n                      <div className=\"flex-1 space-y-2\">\n                        <SelectField\n                          label={`Piece ${idx + 1}`}\n                          value={di.styleItemId}\n                          onChange={(v) => setDraftItem(idx, { styleItemId: v })}\n                          options={itemOptions}\n                          placeholder={\n                            styleItems.isLoading ? 'Loading items…' : 'Select a style item'\n                          }\n                        />\n                        <TextField\n                          label=\"Styling note\"\n                          value={di.styling}\n                          onChange={(v) => setDraftItem(idx, { styling: v })}\n                          placeholder=\"Cuff the sleeves, tuck the front…\"\n                        />\n                      </div>\n                      <button\n                        type=\"button\"\n                        onClick={() => removeDraftItem(idx)}\n                        aria-label=\"Remove piece\"\n                        className={cn(\n                          'mt-7 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',\n                          'text-text-secondary transition-colors hover:bg-status-error-bg-subtle hover:text-status-error-text'\n                        )}\n                      >\n                        <X className=\"h-4 w-4\" />\n                      </button>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {createLook.isError && (\n            <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n              {createLook.error instanceof Error\n                ? createLook.error.message\n                : 'Something went wrong'}\n            </p>\n          )}\n\n          <div className=\"mt-6 flex justify-end gap-2\">\n            <button\n              type=\"submit\"\n              disabled={submitting}\n              className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n            >\n              {submitting ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Save className=\"h-4 w-4\" />\n              )}\n              Create look\n            </button>\n          </div>\n        </GlassCard>\n      </form>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,IAAM,IAA+B;CACnC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEK,IAAgC;CAAC;CAAU;CAAa;CAAU;AAOxE,SAAgB,IAAe;CAC7B,IAAM,EAAE,eAAY,mBAAgB,GAAkB,EAChD,IAAa,GAAe,EAC5B,IAAa,IAAe,EAC5B,IAAa,EAAc,EAAE,YAAY;EAAE,OAAO;EAAK,QAAQ;EAAG,EAAE,CAAC,EAErE,IAAiB,GAAkB,GAAa,KAAK,EAAE,WAAW,EAAY,IAAI,GAAG,EAAE,CAAC,EAExF,CAAC,GAAO,MAAY,EAAS,GAAG,EAChC,CAAC,GAAS,KAAc,EAAS,GAAG,EACpC,CAAC,GAAU,KAAe,EAA0B,WAAW,EAC/D,CAAC,GAAY,KAAiB,EAAwB,SAAS,EAC/D,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAiB,KAAsB,EAAS,GAAG,EACpD,CAAC,GAAY,KAAiB,EAAS,GAAM,EAC7C,CAAC,GAAY,KAAiB,EAAsB,EAAE,CAAC,EACvD,CAAC,GAAU,KAAe,EAAS,GAAG,EACtC,CAAC,IAAY,KAAiB,GAA8B,EAE5D,IAAc,SACX,EAAW,MAAM,SAAS,EAAE,EAAE,QAAQ,MAAM,EAAE,WAAW,UAAU,EAC1E,CAAC,EAAW,KAAK,CAClB,EAEK,IAAc,QAEhB,EAAY,KAAK,OAAO;EACtB,OAAO,EAAE;EACT,OAAO,GAAG,EAAE,OAAO,EAAE,OAAO,OAAO,MAAM,EAAE,MAAM,SAAS,GAAG,KAAK,EAAY,EAAE,OAAO,EAAE,SAAS;EACnG,EAAE,EACL,CAAC,EAAY,CACd,EAGK,IAAmB,QAAc;EACrC,IAAM,IAAS,IAAI,IAAI,EAAW,KAAK,MAAM,EAAE,YAAY,CAAC;AAC5D,SAAO,EAAY,QAAQ,MAAM,CAAC,EAAO,IAAI,EAAE,MAAM,CAAC;IACrD,CAAC,GAAa,EAAW,CAAC,EAEvB,IAAuB,SACpB,EAAe,QAAQ,EAAE,EAAE,KAAK,OAAO;EAAE,OAAO,EAAE;EAAI,OAAO,EAAE;EAAO,EAAE,EAC/E,CAAC,EAAe,KAAK,CACtB,EAEK,IAAkB,EAAU,KAAK,OAAO;EAAE,OAAO;EAAG,OAAO,EAAU,EAAE;EAAE,EAAE,EAC3E,KAAoB,EAAa,KAAK,OAAO;EAAE,OAAO;EAAG,OAAO,EAAU,EAAE;EAAE,EAAE,EAEhF,MAAgB,MAAwB;AACvC,OACL,GAAe,MACb,EAAE,MAAM,MAAO,EAAG,gBAAgB,EAAY,GAAG,IAAI,CAAC,GAAG,GAAG;GAAE;GAAa,SAAS;GAAI,CAAC,CAC1F;IAEG,MAAmB,MAAgB,GAAe,MAAM,EAAE,QAAQ,GAAG,MAAM,MAAM,EAAI,CAAC,EACtF,KAAgB,GAAa,MACjC,GAAe,MAAM,EAAE,KAAK,GAAI,MAAO,MAAM,IAAM;EAAE,GAAG;EAAI,GAAG;EAAO,GAAG,EAAI,CAAC,EAE1E,IAAa,EAAW,aAAa,EAAW;AA6CtD,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAW,SAAS;GACnC,WAAU;aAHZ,CAKE,kBAAC,IAAD,EAAW,WAAU,WAAY,CAAA,EAAA,UAC1B;;YAGX,kBAAC,QAAD;GAAM,WAzDY,MAAuB;AAE3C,QADA,EAAE,gBAAgB,EACd,CAAC,EAAM,MAAM,EAAE;AACjB,OAAc,oBAAoB;AAClC;;AAEF,MAAc,KAAA,EAAU;IAExB,IAAM,IAA4B,EAC/B,QAAQ,MAAM,EAAE,YAAY,CAC5B,KAAK,GAAG,OAAS;KAChB,aAAa,EAAE;KACf,UAAU;KACV,SAAS,EAAE,QAAQ,MAAM,IAAI,KAAA;KAC9B,EAAE;AAEL,MAAW,OACT;KACE,OAAO,EAAM,MAAM;KACnB,SAAS,EAAQ,MAAM,IAAI,KAAA;KAC3B;KACA;KACA,iBAAiB,KAAmB,KAAA;KACpC,aAAa,KAAe,KAAA;KAC5B,MAAM,EAAS,EAAK;KACpB,OAAO,EAAM,SAAS,IAAI,IAAQ,KAAA;KACnC,EACD,EACE,YAAY,MAAS;AAEnB,KAAI,IACF,EAAW,OACT;MAAE,IAAI,EAAK;MAAI,OAAO,EAAE,YAAY,IAAM;MAAE,EAC5C,EAAE,iBAAiB,EAAW,UAAU,EAAK,KAAK,EAAE,CACrD,GAED,EAAW,UAAU,EAAK,KAAK;OAGpC,CACF;;GAiB+B,WAAU;aACtC,kBAAC,GAAD;IAAW,WAAU;IAAQ,WAAU;cAAvC;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,IAAD,EAAU,WAAU,WAAY,CAAA;OAC5B,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;OAAI,WAAU;iBAA4C;OAAiB,CAAA,EAC3E,kBAAC,KAAD;OAAG,WAAU;iBAA8B;OAEvC,CAAA,CACA,EAAA,CAAA,CACF;;KAEN,kBAAC,GAAD;MACE,IAAG;MACH,OAAM;MACN,OAAO;MACP,UAAU;MACV,aAAY;MACZ,UAAA;MACA,OAAO;MACP,CAAA;KAEF,kBAAC,IAAD;MACE,IAAG;MACH,OAAM;MACN,OAAO;MACP,UAAU;MACV,aAAY;MACZ,MAAM;MACN,WAAU;MACV,CAAA;KAEF,kBAAC,GAAD;MACE,OAAM;MACN,QAAO;MACP,OAAO;MACP,UAAU;MACV,QAAQ,EAAiB;MACzB,MAAK;MACL,WAAU;MACV,CAAA;KAEF,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OACE,IAAG;OACH,OAAM;OACN,OAAO;OACP,WAAW,MAAM,EAAY,EAAqB;OAClD,SAAS;OACT,CAAA,EACF,kBAAC,GAAD;OACE,IAAG;OACH,OAAM;OACN,OAAO;OACP,WAAW,MAAM,EAAc,EAAmB;OAClD,SAAS;OACT,CAAA,CACE;;KAEN,kBAAC,GAAD;MACE,IAAG;MACH,OAAM;MACN,OAAO;MACP,UAAU;MACV,SAAS;MACT,aACE,EAAe,YACX,4BACA,EAAqB,WAAW,IAC9B,0BACA;MAER,MAAK;MACL,WAAU;MACV,CAAA;KAEF,kBAAC,GAAD;MACE,IAAG;MACH,OAAM;MACN,OAAO;MACP,UAAU;MACV,aAAY;MACZ,MAAK;MACL,WAAU;MACV,CAAA;KAEF,kBAAC,IAAD;MACE,IAAG;MACH,OAAM;MACN,SAAS;MACT,UAAU;MACV,MAAK;MACL,WAAU;MACV,CAAA;KAGF,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD;SACE,IAAG;SACH,OAAM;SACN,OAAO;SACP,UAAU;SACV,SAAS;SACT,aACE,EAAW,YACP,uBACA,EAAiB,WAAW,IAC1B,2CACA;SAER,CAAA;QACE,CAAA,EACN,kBAAC,UAAD;QACE,MAAK;QACL,UAAU,CAAC;QACX,eAAe;AAEb,SADA,GAAa,EAAS,EACtB,EAAY,GAAG;;QAEjB,WAAU;kBAPZ,CASE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,aACrB;UACL;UACL,EAAW,WAAW,IACrB,kBAAC,KAAD;OAAG,WAAU;iBAAiG;OAE1G,CAAA,GAEJ,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAW,KAAK,GAAI,MACnB,kBAAC,OAAD;QAAe,WAAU;kBACvB,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD;WACE,OAAO,SAAS,IAAM;WACtB,OAAO,EAAG;WACV,WAAW,MAAM,EAAa,GAAK,EAAE,aAAa,GAAG,CAAC;WACtD,SAAS;WACT,aACE,EAAW,YAAY,mBAAmB;WAE5C,CAAA,EACF,kBAAC,GAAD;WACE,OAAM;WACN,OAAO,EAAG;WACV,WAAW,MAAM,EAAa,GAAK,EAAE,SAAS,GAAG,CAAC;WAClD,aAAY;WACZ,CAAA,CACE;aACN,kBAAC,UAAD;UACE,MAAK;UACL,eAAe,GAAgB,EAAI;UACnC,cAAW;UACX,WAAW,EACT,4EACA,qGACD;oBAED,kBAAC,IAAD,EAAG,WAAU,WAAY,CAAA;UAClB,CAAA,CACL;;QACF,EA/BI,EA+BJ,CACN;OACE,CAAA,CAEJ;;KAEL,EAAW,WACV,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAW,iBAAiB,QACzB,EAAW,MAAM,UACjB;MACF,CAAA;KAGN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,UAAD;OACE,MAAK;OACL,UAAU;OACV,WAAU;iBAHZ,CAKG,IACC,kBAAC,IAAD,EAAS,WAAU,wBAAyB,CAAA,GAE5C,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAC5B,cAEK;;MACL,CAAA;KACI;;GACP,CAAA;EACI,CAAA"}

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

@@ -0,0 +1,9 @@
+/**
+ * Looks List Page
+ * @module coolandlovely/pages/looks
+ *
+ * Cursor-paginated feed of published looks (`cooListLooks`) with occasion &
+ * featured filters.
+ */
+export declare function LooksListPage(): import("react").JSX.Element;
+//# sourceMappingURL=LooksListPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LooksListPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/looks/LooksListPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA4BH,wBAAgB,aAAa,gCA2I5B"}