@burdenoff/microfe-coolandlovely 2026.625.2 → 2026.628.1

package/dist/coolandlovely/pages/collections/CollectionDetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/collections/CollectionDetailPage.tsx"],"sourcesContent":["/**\n * Collection Detail Page\n * @module coolandlovely/pages/collections\n *\n * Single collection (`cooCollection`) with publish (`cooPublishCollection`),\n * edit, its brand link and member items.\n */\n\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, Pencil, Rocket, Loader2, Shapes, Store, Plus } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useCollection, usePublishCollection } from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function CollectionDetailPage() {\n  const { collectionId } = useParams<{ collectionId: string }>();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useCollection(collectionId);\n  const publish = usePublishCollection();\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title=\"Collection\">\n        <LoadingView label=\"Loading collection…\" />\n      </PageLayout>\n    );\n  }\n\n  if (query.isError || !query.data) {\n    return (\n      <PageLayout title=\"Collection\">\n        <ErrorView title=\"Collection not found\" onRetry={() => void query.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  const collection = query.data;\n  const items = collection.items ?? [];\n  const canPublish = collection.status === 'DRAFT' || collection.status === 'SCHEDULED';\n\n  return (\n    <PageLayout\n      title={collection.name}\n      description={collection.brand?.name ?? undefined}\n      actions={\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/collections')}\n            className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n          >\n            <ArrowLeft className=\"h-4 w-4\" /> Back\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/collections/${collection.id}/edit`)}\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            <Pencil className=\"h-4 w-4\" /> Edit\n          </button>\n          {canPublish && (\n            <button\n              type=\"button\"\n              disabled={publish.isPending}\n              onClick={() => publish.mutate(collection.id)}\n              className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n            >\n              {publish.isPending ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Rocket className=\"h-4 w-4\" />\n              )}\n              Publish\n            </button>\n          )}\n        </div>\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n        <div className=\"lg:col-span-2\">\n          <GlassCard treatment=\"glass\" className=\"overflow-hidden p-0\">\n            <Thumbnail icon={<Shapes className=\"h-12 w-12\" />} seed={collection.id} className=\"h-40 w-full\" />\n            <div className=\"p-6\">\n              <div className=\"flex items-center gap-2\">\n                <h2 className=\"text-xl font-semibold text-text-primary\">{collection.name}</h2>\n                <StatusBadge status={collection.status} className=\"ml-auto\" />\n              </div>\n              {collection.description && (\n                <p className=\"mt-3 text-sm text-text-secondary\">{collection.description}</p>\n              )}\n              {collection.tags.length > 0 && <TagList tags={collection.tags} className=\"mt-4\" />}\n            </div>\n          </GlassCard>\n\n          <section className=\"mt-6\">\n            <h3 className=\"mb-3 text-lg font-semibold text-text-primary\">\n              Items ({items.length})\n            </h3>\n            {items.length === 0 ? (\n              <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n                No items in this collection yet.\n              </p>\n            ) : (\n              <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3\">\n                {items.map((item) => (\n                  <button\n                    key={item.id}\n                    type=\"button\"\n                    onClick={() => navigateTo(`/items/${item.id}`)}\n                    className=\"overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left transition-all hover:border-accent-foreground/20 hover:shadow-md\"\n                  >\n                    <Thumbnail icon={categoryIcon(item.category, 24)} seed={item.id} className=\"h-24 w-full\" />\n                    <div className=\"p-3\">\n                      <p className=\"truncate text-sm font-medium text-text-primary\">{item.name}</p>\n                      <p className=\"mt-0.5 text-xs text-text-secondary\">\n                        {formatPrice(item.price, item.currency)}\n                      </p>\n                    </div>\n                  </button>\n                ))}\n              </div>\n            )}\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/items/new?brandId=${collection.brandId}&collectionId=${collection.id}`)}\n              className=\"mt-3 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              <Plus className=\"h-4 w-4\" /> Add item to this collection\n            </button>\n          </section>\n        </div>\n\n        <div className=\"space-y-4\">\n          <GlassCard treatment=\"plain\" className=\"p-5\">\n            <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Details</h3>\n            <dl className=\"space-y-2 text-sm\">\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Season</dt>\n                <dd className=\"text-text-primary\">{titleCase(collection.season)}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Publish at</dt>\n                <dd className=\"text-text-primary\">\n                  {collection.publishAt\n                    ? formatDate(collection.publishAt, { hour: undefined, minute: undefined })\n                    : '—'}\n                </dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">Ends at</dt>\n                <dd className=\"text-text-primary\">\n                  {collection.endAt\n                    ? formatDate(collection.endAt, { hour: undefined, minute: undefined })\n                    : '—'}\n                </dd>\n              </div>\n            </dl>\n          </GlassCard>\n\n          {collection.brand && (\n            <button\n              type=\"button\"\n              onClick={() => navigateTo(`/brands/${collection.brand?.id}`)}\n              className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n            >\n              <Thumbnail icon={<Store className=\"h-5 w-5\" />} seed={collection.brand.id} className=\"h-10 w-10 shrink-0\" />\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-sm font-medium text-text-primary\">{collection.brand.name}</p>\n                <p className=\"truncate text-xs text-text-secondary\">View brand</p>\n              </div>\n            </button>\n          )}\n\n          {publish.isError && (\n            <p className=\"rounded-lg bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text\">\n              {publish.error instanceof Error ? publish.error.message : 'Publish failed'}\n            </p>\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/collections/CollectionFormPage.js

@@ -0,0 +1,217 @@
+import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { ErrorView as n, LoadingView as r } from "../../components/StateViews.js";
+import { useBrands as i, useCollection as a, useCreateCollection as o, useUpdateCollection as s } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { parseCsv as c, titleCase as l } from "../../utils/formatters.js";
+import { SelectField as u, TextAreaField as d, TextField as f } from "../../components/Field.js";
+import { useEffect as p, useMemo as m, useState as h } from "react";
+import { ArrowLeft as g, Loader2 as _, Save as v, Shapes as y } from "lucide-react";
+import { useParams as b, useSearchParams as x } from "react-router-dom";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { GlassCard as w } from "@burdenoff/fe-libs/ui";
+//#region src/coolandlovely/pages/collections/CollectionFormPage.tsx
+var T = [
+	"SPRING",
+	"SUMMER",
+	"AUTUMN",
+	"WINTER",
+	"RESORT",
+	"ALL_SEASON"
+], E = {
+	brandId: "",
+	name: "",
+	description: "",
+	season: "ALL_SEASON",
+	tags: "",
+	publishAt: "",
+	endAt: ""
+};
+function D(e) {
+	if (!e) return;
+	let t = new Date(e);
+	return Number.isNaN(t.getTime()) ? void 0 : t.toISOString();
+}
+function O(e) {
+	if (!e) return "";
+	let t = new Date(e);
+	return Number.isNaN(t.getTime()) ? "" : t.toISOString().slice(0, 10);
+}
+function k() {
+	let { collectionId: k } = b(), [A] = x(), j = !!k, { navigateTo: M } = e(), N = a(j ? k : void 0), P = i({ pagination: {
+		limit: 100,
+		offset: 0
+	} }), F = o(), I = s(), [L, R] = h(() => ({
+		...E,
+		brandId: A.get("brandId") ?? ""
+	})), [z, B] = h({});
+	p(() => {
+		if (j && N.data) {
+			let e = N.data;
+			R({
+				brandId: e.brandId,
+				name: e.name,
+				description: e.description ?? "",
+				season: e.season,
+				tags: e.tags.join(", "),
+				publishAt: O(e.publishAt),
+				endAt: O(e.endAt)
+			});
+		}
+	}, [j, N.data]);
+	let V = (e, t) => R((n) => ({
+		...n,
+		[e]: t
+	})), H = j ? I : F, U = m(() => (P.data?.items ?? []).map((e) => ({
+		value: e.id,
+		label: e.name
+	})), [P.data]), W = T.map((e) => ({
+		value: e,
+		label: l(e)
+	})), G = () => {
+		let e = {};
+		return L.name.trim() || (e.name = "Name is required"), !j && !L.brandId && (e.brandId = "Brand is required"), B(e), Object.keys(e).length === 0;
+	};
+	return j && N.isLoading ? /* @__PURE__ */ S(t, {
+		title: "Edit collection",
+		children: /* @__PURE__ */ S(r, { label: "Loading collection…" })
+	}) : j && (N.isError || !N.data) ? /* @__PURE__ */ S(t, {
+		title: "Edit collection",
+		children: /* @__PURE__ */ S(n, {
+			title: "Collection not found",
+			onRetry: () => void N.refetch()
+		})
+	}) : /* @__PURE__ */ S(t, {
+		title: j ? "Edit collection" : "New collection",
+		description: j ? "Update this seasonal drop" : "Group pieces into a seasonal drop",
+		actions: /* @__PURE__ */ C("button", {
+			type: "button",
+			onClick: () => M(j && k ? `/collections/${k}` : "/collections"),
+			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__ */ S(g, { className: "h-4 w-4" }), " Cancel"]
+		}),
+		children: /* @__PURE__ */ S("form", {
+			onSubmit: (e) => {
+				e.preventDefault(), G() && (j && k ? I.mutate({
+					id: k,
+					input: {
+						name: L.name.trim(),
+						description: L.description.trim() || void 0,
+						season: L.season,
+						tags: c(L.tags),
+						publishAt: D(L.publishAt),
+						endAt: D(L.endAt)
+					}
+				}, { onSuccess: () => M(`/collections/${k}`) }) : F.mutate({
+					brandId: L.brandId,
+					name: L.name.trim(),
+					description: L.description.trim() || void 0,
+					season: L.season,
+					tags: c(L.tags),
+					publishAt: D(L.publishAt),
+					endAt: D(L.endAt)
+				}, { onSuccess: (e) => M(`/collections/${e.id}`) }));
+			},
+			className: "mx-auto max-w-2xl",
+			children: /* @__PURE__ */ C(w, {
+				treatment: "plain",
+				className: "p-6",
+				children: [
+					/* @__PURE__ */ C("div", {
+						className: "mb-6 flex items-center gap-3",
+						children: [/* @__PURE__ */ S("div", {
+							className: "flex h-11 w-11 items-center justify-center rounded-lg bg-accent-blue-subtle text-accent-blue",
+							children: /* @__PURE__ */ S(y, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h2", {
+							className: "text-base font-semibold text-text-primary",
+							children: "Collection details"
+						}), /* @__PURE__ */ S("p", {
+							className: "text-xs text-text-secondary",
+							children: "A collection belongs to one brand."
+						})] })]
+					}),
+					!j && /* @__PURE__ */ S(u, {
+						id: "brandId",
+						label: "Brand",
+						value: L.brandId,
+						onChange: (e) => V("brandId", e),
+						options: U,
+						required: !0,
+						placeholder: P.isLoading ? "Loading brands…" : "Select a brand",
+						error: z.brandId,
+						className: "mb-4"
+					}),
+					/* @__PURE__ */ C("div", {
+						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+						children: [/* @__PURE__ */ S(f, {
+							id: "name",
+							label: "Name",
+							value: L.name,
+							onChange: (e) => V("name", e),
+							placeholder: "Spring Awakening",
+							required: !0,
+							error: z.name
+						}), /* @__PURE__ */ S(u, {
+							id: "season",
+							label: "Season",
+							value: L.season,
+							onChange: (e) => V("season", e),
+							options: W
+						})]
+					}),
+					/* @__PURE__ */ S(d, {
+						id: "description",
+						label: "Description",
+						value: L.description,
+						onChange: (e) => V("description", e),
+						placeholder: "Describe the drop…",
+						rows: 3,
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ C("div", {
+						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2",
+						children: [/* @__PURE__ */ S(f, {
+							id: "publishAt",
+							label: "Publish date",
+							type: "date",
+							value: L.publishAt,
+							onChange: (e) => V("publishAt", e)
+						}), /* @__PURE__ */ S(f, {
+							id: "endAt",
+							label: "End date",
+							type: "date",
+							value: L.endAt,
+							onChange: (e) => V("endAt", e)
+						})]
+					}),
+					/* @__PURE__ */ S(f, {
+						id: "tags",
+						label: "Tags",
+						value: L.tags,
+						onChange: (e) => V("tags", e),
+						placeholder: "pastel, floral",
+						hint: "Comma-separated",
+						className: "mt-4"
+					}),
+					H.isError && /* @__PURE__ */ S("p", {
+						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
+						children: H.error instanceof Error ? H.error.message : "Something went wrong"
+					}),
+					/* @__PURE__ */ S("div", {
+						className: "mt-6 flex justify-end gap-2",
+						children: /* @__PURE__ */ C("button", {
+							type: "submit",
+							disabled: H.isPending,
+							className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
+							children: [H.isPending ? /* @__PURE__ */ S(_, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ S(v, { className: "h-4 w-4" }), j ? "Save changes" : "Create collection"]
+						})
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { k as CollectionFormPage };
+
+//# sourceMappingURL=CollectionFormPage.js.map

package/dist/coolandlovely/pages/collections/CollectionFormPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/collections/CollectionFormPage.tsx"],"sourcesContent":["/**\n * Collection Create / Edit Page\n * @module coolandlovely/pages/collections\n *\n * Drives `cooCreateCollection` (new) and `cooUpdateCollection` (edit).\n * Brand selection is required on create and locked on edit.\n */\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { ArrowLeft, Loader2, Save, Shapes } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useCollection, useCreateCollection, useUpdateCollection, useBrands } from '../../hooks';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooSeason } from '../../types';\n\nconst SEASONS: CooSeason[] = ['SPRING', 'SUMMER', 'AUTUMN', 'WINTER', 'RESORT', 'ALL_SEASON'];\n\ninterface FormState {\n  brandId: string;\n  name: string;\n  description: string;\n  season: CooSeason;\n  tags: string;\n  publishAt: string;\n  endAt: string;\n}\n\nconst EMPTY: FormState = {\n  brandId: '',\n  name: '',\n  description: '',\n  season: 'ALL_SEASON',\n  tags: '',\n  publishAt: '',\n  endAt: '',\n};\n\n/** ISO timestamp <input type=date> values use yyyy-mm-dd; convert to ISO. */\nfunction toIso(date: string): string | undefined {\n  if (!date) return undefined;\n  const d = new Date(date);\n  return Number.isNaN(d.getTime()) ? undefined : d.toISOString();\n}\n\nfunction toDateInput(iso: string | null): string {\n  if (!iso) return '';\n  const d = new Date(iso);\n  return Number.isNaN(d.getTime()) ? '' : d.toISOString().slice(0, 10);\n}\n\nexport function CollectionFormPage() {\n  const { collectionId } = useParams<{ collectionId: string }>();\n  const [searchParams] = useSearchParams();\n  const isEdit = Boolean(collectionId);\n  const { navigateTo } = useCoolAndLovely();\n\n  const existing = useCollection(isEdit ? collectionId : undefined);\n  const brands = useBrands({ pagination: { limit: 100, offset: 0 } });\n  const createCollection = useCreateCollection();\n  const updateCollection = useUpdateCollection();\n\n  const [form, setForm] = useState<FormState>(() => ({\n    ...EMPTY,\n    brandId: searchParams.get('brandId') ?? '',\n  }));\n  const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});\n\n  useEffect(() => {\n    if (isEdit && existing.data) {\n      const c = existing.data;\n      setForm({\n        brandId: c.brandId,\n        name: c.name,\n        description: c.description ?? '',\n        season: c.season,\n        tags: c.tags.join(', '),\n        publishAt: toDateInput(c.publishAt),\n        endAt: toDateInput(c.endAt),\n      });\n    }\n  }, [isEdit, existing.data]);\n\n  const setField = <K extends keyof FormState>(key: K, value: FormState[K]) =>\n    setForm((f) => ({ ...f, [key]: value }));\n\n  const mutation = isEdit ? updateCollection : createCollection;\n\n  const brandOptions = useMemo(\n    () => (brands.data?.items ?? []).map((b) => ({ value: b.id, label: b.name })),\n    [brands.data]\n  );\n  const seasonOptions = SEASONS.map((s) => ({ value: s, label: titleCase(s) }));\n\n  const validate = (): boolean => {\n    const next: Partial<Record<keyof FormState, string>> = {};\n    if (!form.name.trim()) next.name = 'Name is required';\n    if (!isEdit && !form.brandId) next.brandId = 'Brand is required';\n    setErrors(next);\n    return Object.keys(next).length === 0;\n  };\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!validate()) return;\n\n    if (isEdit && collectionId) {\n      updateCollection.mutate(\n        {\n          id: collectionId,\n          input: {\n            name: form.name.trim(),\n            description: form.description.trim() || undefined,\n            season: form.season,\n            tags: parseCsv(form.tags),\n            publishAt: toIso(form.publishAt),\n            endAt: toIso(form.endAt),\n          },\n        },\n        { onSuccess: () => navigateTo(`/collections/${collectionId}`) }\n      );\n    } else {\n      createCollection.mutate(\n        {\n          brandId: form.brandId,\n          name: form.name.trim(),\n          description: form.description.trim() || undefined,\n          season: form.season,\n          tags: parseCsv(form.tags),\n          publishAt: toIso(form.publishAt),\n          endAt: toIso(form.endAt),\n        },\n        { onSuccess: (c) => navigateTo(`/collections/${c.id}`) }\n      );\n    }\n  };\n\n  if (isEdit && existing.isLoading) {\n    return (\n      <PageLayout title=\"Edit collection\">\n        <LoadingView label=\"Loading collection…\" />\n      </PageLayout>\n    );\n  }\n\n  if (isEdit && (existing.isError || !existing.data)) {\n    return (\n      <PageLayout title=\"Edit collection\">\n        <ErrorView title=\"Collection not found\" onRetry={() => void existing.refetch()} />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={isEdit ? 'Edit collection' : 'New collection'}\n      description={isEdit ? 'Update this seasonal drop' : 'Group pieces into a seasonal drop'}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() =>\n            navigateTo(isEdit && collectionId ? `/collections/${collectionId}` : '/collections')\n          }\n          className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-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-accent-blue-subtle text-accent-blue\">\n              <Shapes className=\"h-5 w-5\" />\n            </div>\n            <div>\n              <h2 className=\"text-base font-semibold text-text-primary\">Collection details</h2>\n              <p className=\"text-xs text-text-secondary\">A collection belongs to one brand.</p>\n            </div>\n          </div>\n\n          {!isEdit && (\n            <SelectField\n              id=\"brandId\"\n              label=\"Brand\"\n              value={form.brandId}\n              onChange={(v) => setField('brandId', v)}\n              options={brandOptions}\n              required\n              placeholder={brands.isLoading ? 'Loading brands…' : 'Select a brand'}\n              error={errors.brandId}\n              className=\"mb-4\"\n            />\n          )}\n\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <TextField\n              id=\"name\"\n              label=\"Name\"\n              value={form.name}\n              onChange={(v) => setField('name', v)}\n              placeholder=\"Spring Awakening\"\n              required\n              error={errors.name}\n            />\n            <SelectField\n              id=\"season\"\n              label=\"Season\"\n              value={form.season}\n              onChange={(v) => setField('season', v as CooSeason)}\n              options={seasonOptions}\n            />\n          </div>\n\n          <TextAreaField\n            id=\"description\"\n            label=\"Description\"\n            value={form.description}\n            onChange={(v) => setField('description', v)}\n            placeholder=\"Describe the drop…\"\n            rows={3}\n            className=\"mt-4\"\n          />\n\n          <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <TextField\n              id=\"publishAt\"\n              label=\"Publish date\"\n              type=\"date\"\n              value={form.publishAt}\n              onChange={(v) => setField('publishAt', v)}\n            />\n            <TextField\n              id=\"endAt\"\n              label=\"End date\"\n              type=\"date\"\n              value={form.endAt}\n              onChange={(v) => setField('endAt', v)}\n            />\n          </div>\n\n          <TextField\n            id=\"tags\"\n            label=\"Tags\"\n            value={form.tags}\n            onChange={(v) => setField('tags', v)}\n            placeholder=\"pastel, floral\"\n            hint=\"Comma-separated\"\n            className=\"mt-4\"\n          />\n\n          {mutation.isError && (\n            <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n              {mutation.error instanceof Error ? mutation.error.message : 'Something went wrong'}\n            </p>\n          )}\n\n          <div className=\"mt-6 flex justify-end gap-2\">\n            <button\n              type=\"submit\"\n              disabled={mutation.isPending}\n              className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n            >\n              {mutation.isPending ? (\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n              ) : (\n                <Save className=\"h-4 w-4\" />\n              )}\n              {isEdit ? 'Save changes' : 'Create collection'}\n            </button>\n          </div>\n        </GlassCard>\n      </form>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/collections/CollectionsListPage.js

@@ -0,0 +1,122 @@
+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 { StatusBadge as r } from "../../components/StatusBadge.js";
+import { ErrorView as i, LoadingView as a } from "../../components/StateViews.js";
+import { Thumbnail as o } from "../../components/Thumbnail.js";
+import { useCollections as s } from "../../hooks/useCoolAndLovelyApi.js";
+import "../../hooks/index.js";
+import { formatDate as c, titleCase as l } from "../../utils/formatters.js";
+import { TagList as u } from "../../components/TagList.js";
+import { EmptyState as d } from "../../components/EmptyState.js";
+import { useState as f } from "react";
+import { Plus as p, Shapes as m } from "lucide-react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/coolandlovely/pages/collections/CollectionsListPage.tsx
+var _ = [
+	{
+		value: "ALL",
+		label: "All"
+	},
+	{
+		value: "LIVE",
+		label: "Live"
+	},
+	{
+		value: "SCHEDULED",
+		label: "Scheduled"
+	},
+	{
+		value: "DRAFT",
+		label: "Draft"
+	},
+	{
+		value: "ENDED",
+		label: "Ended"
+	},
+	{
+		value: "ARCHIVED",
+		label: "Archived"
+	}
+];
+function v() {
+	let { navigateTo: v } = e(), [y, b] = f("ALL"), x = s({ status: y === "ALL" ? void 0 : y }), S = x.data ?? [];
+	return /* @__PURE__ */ g(n, {
+		title: "Collections",
+		description: "Seasonal drops and curated edits grouped by brand",
+		actions: /* @__PURE__ */ g("button", {
+			type: "button",
+			onClick: () => v("/collections/new"),
+			className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
+			children: [/* @__PURE__ */ h(p, { className: "h-4 w-4" }), " New collection"]
+		}),
+		children: [/* @__PURE__ */ h("div", {
+			className: "mb-6 flex flex-wrap items-center gap-2",
+			children: _.map((e) => /* @__PURE__ */ h("button", {
+				type: "button",
+				onClick: () => b(e.value),
+				className: t("rounded-full px-3 py-1.5 text-sm font-medium transition-colors", y === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
+				children: e.label
+			}, e.value))
+		}), x.isLoading ? /* @__PURE__ */ h(a, { label: "Loading collections…" }) : x.isError ? /* @__PURE__ */ h(i, { onRetry: () => void x.refetch() }) : S.length === 0 ? /* @__PURE__ */ h(d, {
+			illustration: "empty-data",
+			icon: /* @__PURE__ */ h(m, { className: "h-10 w-10" }),
+			title: "No collections yet",
+			description: "Group pieces into a seasonal drop to start a collection.",
+			action: /* @__PURE__ */ g("button", {
+				type: "button",
+				onClick: () => v("/collections/new"),
+				className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
+				children: [/* @__PURE__ */ h(p, { className: "h-4 w-4" }), " New collection"]
+			})
+		}) : /* @__PURE__ */ h("div", {
+			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+			children: S.map((e) => /* @__PURE__ */ g("button", {
+				type: "button",
+				onClick: () => v(`/collections/${e.id}`),
+				className: "overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md",
+				children: [/* @__PURE__ */ h(o, {
+					icon: /* @__PURE__ */ h(m, { className: "h-9 w-9" }),
+					seed: e.id,
+					className: "h-28 w-full"
+				}), /* @__PURE__ */ g("div", {
+					className: "p-4",
+					children: [
+						/* @__PURE__ */ g("div", {
+							className: "flex items-start justify-between gap-2",
+							children: [/* @__PURE__ */ g("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ h("h3", {
+									className: "truncate text-base font-semibold text-text-primary",
+									children: e.name
+								}), e.brand?.name && /* @__PURE__ */ h("p", {
+									className: "truncate text-xs text-text-secondary",
+									children: e.brand.name
+								})]
+							}), /* @__PURE__ */ h(r, { status: e.status })]
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "mt-2 flex items-center gap-2 text-xs text-text-secondary",
+							children: [/* @__PURE__ */ h("span", {
+								className: "rounded-full bg-bg-sunken px-2 py-0.5",
+								children: l(e.season)
+							}), e.publishAt && /* @__PURE__ */ g("span", { children: ["Publishes ", c(e.publishAt, {
+								hour: void 0,
+								minute: void 0
+							})] })]
+						}),
+						e.tags.length > 0 && /* @__PURE__ */ h(u, {
+							tags: e.tags,
+							max: 4,
+							className: "mt-3"
+						})
+					]
+				})]
+			}, e.id))
+		})]
+	});
+}
+//#endregion
+export { v as CollectionsListPage };
+
+//# sourceMappingURL=CollectionsListPage.js.map

package/dist/coolandlovely/pages/collections/CollectionsListPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionsListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/collections/CollectionsListPage.tsx"],"sourcesContent":["/**\n * Collections List Page\n * @module coolandlovely/pages/collections\n *\n * Lists seasonal collections (`cooListCollections`) with status filter.\n */\n\nimport { useState } from 'react';\nimport { Plus, Shapes } from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useCollections } from '../../hooks';\nimport { titleCase, formatDate } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { CooCollectionStatus } from '../../types';\n\nconst STATUS_OPTIONS: Array<{ value: CooCollectionStatus | 'ALL'; label: string }> = [\n  { value: 'ALL', label: 'All' },\n  { value: 'LIVE', label: 'Live' },\n  { value: 'SCHEDULED', label: 'Scheduled' },\n  { value: 'DRAFT', label: 'Draft' },\n  { value: 'ENDED', label: 'Ended' },\n  { value: 'ARCHIVED', label: 'Archived' },\n];\n\nexport function CollectionsListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const [status, setStatus] = useState<CooCollectionStatus | 'ALL'>('ALL');\n\n  const query = useCollections({ status: status === 'ALL' ? undefined : status });\n  const collections = query.data ?? [];\n\n  return (\n    <PageLayout\n      title=\"Collections\"\n      description=\"Seasonal drops and curated edits grouped by brand\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/collections/new')}\n          className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n        >\n          <Plus className=\"h-4 w-4\" /> New collection\n        </button>\n      }\n    >\n      <div className=\"mb-6 flex flex-wrap items-center gap-2\">\n        {STATUS_OPTIONS.map((opt) => (\n          <button\n            key={opt.value}\n            type=\"button\"\n            onClick={() => setStatus(opt.value)}\n            className={cn(\n              'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',\n              status === opt.value\n                ? 'bg-action-primary-bg text-action-primary-text'\n                : 'bg-bg-sunken text-text-secondary hover:text-text-primary'\n            )}\n          >\n            {opt.label}\n          </button>\n        ))}\n      </div>\n\n      {query.isLoading ? (\n        <LoadingView label=\"Loading collections…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : collections.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<Shapes className=\"h-10 w-10\" />}\n          title=\"No collections yet\"\n          description=\"Group pieces into a seasonal drop to start a collection.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/collections/new')}\n              className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n            >\n              <Plus className=\"h-4 w-4\" /> New collection\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {collections.map((c) => (\n            <button\n              key={c.id}\n              type=\"button\"\n              onClick={() => navigateTo(`/collections/${c.id}`)}\n              className=\"overflow-hidden rounded-lg border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-md\"\n            >\n              <Thumbnail icon={<Shapes className=\"h-9 w-9\" />} seed={c.id} className=\"h-28 w-full\" />\n              <div className=\"p-4\">\n                <div className=\"flex items-start justify-between gap-2\">\n                  <div className=\"min-w-0\">\n                    <h3 className=\"truncate text-base font-semibold text-text-primary\">{c.name}</h3>\n                    {c.brand?.name && (\n                      <p className=\"truncate text-xs text-text-secondary\">{c.brand.name}</p>\n                    )}\n                  </div>\n                  <StatusBadge status={c.status} />\n                </div>\n                <div className=\"mt-2 flex items-center gap-2 text-xs text-text-secondary\">\n                  <span className=\"rounded-full bg-bg-sunken px-2 py-0.5\">{titleCase(c.season)}</span>\n                  {c.publishAt && <span>Publishes {formatDate(c.publishAt, { hour: undefined, minute: undefined })}</span>}\n                </div>\n                {c.tags.length > 0 && <TagList tags={c.tags} max={4} className=\"mt-3\" />}\n              </div>\n            </button>\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,IAAM,IAA+E;CACnF;EAAE,OAAO;EAAO,OAAO;EAAO;CAC9B;EAAE,OAAO;EAAQ,OAAO;EAAQ;CAChC;EAAE,OAAO;EAAa,OAAO;EAAa;CAC1C;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAY,OAAO;EAAY;CACzC;AAED,SAAgB,IAAsB;CACpC,IAAM,EAAE,kBAAe,GAAkB,EACnC,CAAC,GAAQ,KAAa,EAAsC,MAAM,EAElE,IAAQ,EAAe,EAAE,QAAQ,MAAW,QAAQ,KAAA,IAAY,GAAQ,CAAC,EACzE,IAAc,EAAM,QAAQ,EAAE;AAEpC,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAW,mBAAmB;GAC7C,WAAU;aAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,kBACrB;;YAVb,CAaE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAe,KAAK,MACnB,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe,EAAU,EAAI,MAAM;IACnC,WAAW,EACT,kEACA,MAAW,EAAI,QACX,kDACA,2DACL;cAEA,EAAI;IACE,EAXF,EAAI,MAWF,CACT;GACE,CAAA,EAEL,EAAM,YACL,kBAAC,GAAD,EAAa,OAAM,wBAAyB,CAAA,GAC1C,EAAM,UACR,kBAAC,GAAD,EAAW,eAAe,KAAK,EAAM,SAAS,EAAI,CAAA,GAChD,EAAY,WAAW,IACzB,kBAAC,GAAD;GACE,cAAa;GACb,MAAM,kBAAC,GAAD,EAAQ,WAAU,aAAc,CAAA;GACtC,OAAM;GACN,aAAY;GACZ,QACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAW,mBAAmB;IAC7C,WAAU;cAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,kBACrB;;GAEX,CAAA,GAEF,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAY,KAAK,MAChB,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe,EAAW,gBAAgB,EAAE,KAAK;IACjD,WAAU;cAJZ,CAME,kBAAC,GAAD;KAAW,MAAM,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;KAAE,MAAM,EAAE;KAAI,WAAU;KAAgB,CAAA,EACvF,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAAsD,EAAE;SAAU,CAAA,EAC/E,EAAE,OAAO,QACR,kBAAC,KAAD;SAAG,WAAU;mBAAwC,EAAE,MAAM;SAAS,CAAA,CAEpE;WACN,kBAAC,GAAD,EAAa,QAAQ,EAAE,QAAU,CAAA,CAC7B;;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBAAyC,EAAU,EAAE,OAAO;QAAQ,CAAA,EACnF,EAAE,aAAa,kBAAC,QAAD,EAAA,UAAA,CAAM,cAAW,EAAW,EAAE,WAAW;QAAE,MAAM,KAAA;QAAW,QAAQ,KAAA;QAAW,CAAC,CAAQ,EAAA,CAAA,CACpG;;MACL,EAAE,KAAK,SAAS,KAAK,kBAAC,GAAD;OAAS,MAAM,EAAE;OAAM,KAAK;OAAG,WAAU;OAAS,CAAA;MACpE;OACC;MAtBF,EAAE,GAsBA,CACT;GACE,CAAA,CAEG"}

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

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