@burdenoff/microfe-coolandlovely 2026.706.2 → 2026.710.1

package/dist/coolandlovely/pages/lookbooks/LookbooksListPage.js

@@ -1,16 +1,16 @@
 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 { COO_FILE_FOLDERS as a } from "../../hooks/useFiles.js";
-import { Thumbnail as o } from "../../components/Thumbnail.js";
-import { useCreateLookbook as s, useLookbooks as c } from "../../hooks/useCoolAndLovelyApi.js";
+import { ErrorView as n, LoadingView as r } from "../../components/StateViews.js";
+import { COO_FILE_FOLDERS as i } from "../../hooks/useFiles.js";
+import { Thumbnail as a } from "../../components/Thumbnail.js";
+import { useCreateLookbook as o, useLookbooks as s } from "../../hooks/useCoolAndLovelyApi.js";
+import { parseCsv as c, titleCase as l } from "../../utils/formatters.js";
 import "../../hooks/index.js";
-import { parseCsv as l, titleCase as u } from "../../utils/formatters.js";
-import { TagList as d } from "../../components/TagList.js";
-import { SelectField as f, TextAreaField as p, TextField as m } from "../../components/Field.js";
-import { ImageUploadField as h } from "../../components/ImageUploadField.js";
-import { EmptyState as g } from "../../components/EmptyState.js";
+import { TagList as u } from "../../components/TagList.js";
+import { SelectField as d, TextAreaField as f, TextField as p } from "../../components/Field.js";
+import { ImageUploadField as m } from "../../components/ImageUploadField.js";
+import { EmptyState as h } from "../../components/EmptyState.js";
+import { VisibilityChip as g } from "../../components/VisibilityChip.js";
 import { useState as _ } from "react";
 import { BookHeart as v, Loader2 as y, Plus as b, X as x } from "lucide-react";
 import { jsx as S, jsxs as C } from "react/jsx-runtime";
@@ -22,9 +22,9 @@ var T = [
 	"PUBLIC"
 ];
 function E() {
-	let { navigateTo: E } = e(), D = c(), O = s(), [k, A] = _(!1), [j, M] = _(""), [N, P] = _(""), [F, I] = _("PRIVATE"), [L, R] = _(""), [z, B] = _(""), [V, H] = _(), U = D.data ?? [], W = T.map((e) => ({
+	let { navigateTo: E } = e(), D = s(), O = o(), [k, A] = _(!1), [j, M] = _(""), [N, P] = _(""), [F, I] = _("PRIVATE"), [L, R] = _(""), [z, B] = _(""), [V, H] = _(), U = D.data ?? [], W = T.map((e) => ({
 		value: e,
-		label: u(e)
+		label: l(e)
 	}));
 	return /* @__PURE__ */ C(t, {
 		title: "Lookbooks",
@@ -45,7 +45,7 @@ function E() {
 					name: j.trim(),
 					description: N.trim() || void 0,
 					visibility: F,
-					tags: l(L),
+					tags: c(L),
 					coverFileId: z || void 0
 				}, { onSuccess: (e) => {
 					A(!1), M(""), P(""), R(""), I("PRIVATE"), B(""), E(`/lookbooks/${e.id}`);
@@ -62,21 +62,21 @@ function E() {
 					}),
 					/* @__PURE__ */ C("div", {
 						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-						children: [/* @__PURE__ */ S(m, {
+						children: [/* @__PURE__ */ S(p, {
 							label: "Name",
 							value: j,
 							onChange: M,
 							placeholder: "Summer wedding guest",
 							required: !0,
 							error: V
-						}), /* @__PURE__ */ S(f, {
+						}), /* @__PURE__ */ S(d, {
 							label: "Visibility",
 							value: F,
 							onChange: (e) => I(e),
 							options: W
 						})]
 					}),
-					/* @__PURE__ */ S(p, {
+					/* @__PURE__ */ S(f, {
 						label: "Description",
 						value: N,
 						onChange: P,
@@ -84,7 +84,7 @@ function E() {
 						rows: 2,
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ S(m, {
+					/* @__PURE__ */ S(p, {
 						label: "Tags",
 						value: L,
 						onChange: R,
@@ -92,12 +92,12 @@ function E() {
 						hint: "Comma-separated",
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ S(h, {
+					/* @__PURE__ */ S(m, {
 						label: "Cover image",
 						aspect: "wide",
 						value: z,
 						onChange: B,
-						folder: a.lookbooks,
+						folder: i.lookbooks,
 						className: "mt-4"
 					}),
 					O.isError && /* @__PURE__ */ S("p", {
@@ -115,7 +115,7 @@ function E() {
 					})
 				]
 			})
-		}), D.isLoading ? /* @__PURE__ */ S(i, { label: "Loading lookbooks…" }) : D.isError ? /* @__PURE__ */ S(r, { onRetry: () => void D.refetch() }) : U.length === 0 ? /* @__PURE__ */ S(g, {
+		}), D.isLoading ? /* @__PURE__ */ S(r, { label: "Loading lookbooks…" }) : D.isError ? /* @__PURE__ */ S(n, { onRetry: () => void D.refetch() }) : U.length === 0 ? /* @__PURE__ */ S(h, {
 			illustration: "empty-data",
 			icon: /* @__PURE__ */ S(v, { className: "h-10 w-10" }),
 			title: "No lookbooks yet",
@@ -127,39 +127,55 @@ function E() {
 				children: [/* @__PURE__ */ S(b, { className: "h-4 w-4" }), " New lookbook"]
 			})
 		}) : /* @__PURE__ */ S("div", {
-			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-			children: U.map((e) => /* @__PURE__ */ C("button", {
-				type: "button",
-				onClick: () => E(`/lookbooks/${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__ */ S(o, {
-					icon: /* @__PURE__ */ S(v, { className: "h-9 w-9" }),
-					seed: e.id,
-					fileId: e.cover?.id,
-					alt: e.name,
-					className: "h-28 w-full"
-				}), /* @__PURE__ */ C("div", {
-					className: "p-4",
-					children: [
-						/* @__PURE__ */ C("div", {
-							className: "flex items-start justify-between gap-2",
-							children: [/* @__PURE__ */ S("h3", {
-								className: "truncate text-base font-semibold text-text-primary",
-								children: e.name
-							}), /* @__PURE__ */ S(n, { status: e.visibility })]
-						}),
-						e.description && /* @__PURE__ */ S("p", {
-							className: "mt-1.5 line-clamp-2 text-sm text-text-secondary",
-							children: e.description
-						}),
-						e.tags.length > 0 && /* @__PURE__ */ S(d, {
-							tags: e.tags,
-							max: 4,
-							className: "mt-3"
-						})
-					]
-				})]
-			}, e.id))
+			className: "grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3",
+			children: U.map((e) => {
+				let t = Array.isArray(e.entries) ? e.entries.length : null;
+				return /* @__PURE__ */ C("button", {
+					type: "button",
+					onClick: () => E(`/lookbooks/${e.id}`),
+					className: "group flex flex-col overflow-hidden rounded-xl border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-focus-ring)]",
+					children: [/* @__PURE__ */ S(a, {
+						icon: /* @__PURE__ */ S(v, { className: "h-10 w-10" }),
+						seed: e.id,
+						fileId: e.cover?.id,
+						alt: e.name,
+						className: "aspect-[4/3] w-full rounded-none"
+					}), /* @__PURE__ */ C("div", {
+						className: "flex flex-1 flex-col p-4",
+						children: [
+							/* @__PURE__ */ C("div", {
+								className: "flex items-start justify-between gap-2",
+								children: [/* @__PURE__ */ C("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ S("h3", {
+										className: "truncate text-base font-semibold text-text-primary",
+										children: e.name
+									}), t !== null && /* @__PURE__ */ C("p", {
+										className: "mt-0.5 text-xs text-text-secondary tabular-nums",
+										children: [
+											t,
+											" ",
+											t === 1 ? "item" : "items"
+										]
+									})]
+								}), /* @__PURE__ */ S(g, {
+									visibility: e.visibility,
+									className: "shrink-0"
+								})]
+							}),
+							e.description && /* @__PURE__ */ S("p", {
+								className: "mt-1.5 line-clamp-2 text-sm text-text-secondary",
+								children: e.description
+							}),
+							e.tags.length > 0 && /* @__PURE__ */ S(u, {
+								tags: e.tags,
+								max: 4,
+								className: "mt-3"
+							})
+						]
+					})]
+				}, e.id);
+			})
 		})]
 	});
 }

package/dist/coolandlovely/pages/lookbooks/LookbooksListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LookbooksListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/lookbooks/LookbooksListPage.tsx"],"sourcesContent":["/**\n * Lookbooks List Page\n * @module coolandlovely/pages/lookbooks\n *\n * Lists themed lookbook boards (`cooListLookbooks`) and supports creating one\n * inline (`cooCreateLookbook`).\n */\n\nimport { useState } from 'react';\nimport { Plus, BookHeart, Loader2, X } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\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 { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useLookbooks, useCreateLookbook } from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooVisibility } from '../../types';\n\nconst VISIBILITIES: CooVisibility[] = ['PRIVATE', 'FOLLOWERS', 'PUBLIC'];\n\nexport function LookbooksListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const query = useLookbooks();\n  const createLookbook = useCreateLookbook();\n\n  const [creating, setCreating] = useState(false);\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [visibility, setVisibility] = useState<CooVisibility>('PRIVATE');\n  const [tags, setTags] = useState('');\n  const [coverFileId, setCoverFileId] = useState('');\n  const [nameError, setNameError] = useState<string | undefined>();\n\n  const lookbooks = query.data ?? [];\n  const visibilityOptions = VISIBILITIES.map((v) => ({ value: v, label: titleCase(v) }));\n\n  const handleCreate = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!name.trim()) {\n      setNameError('Name is required');\n      return;\n    }\n    setNameError(undefined);\n    createLookbook.mutate(\n      {\n        name: name.trim(),\n        description: description.trim() || undefined,\n        visibility,\n        tags: parseCsv(tags),\n        coverFileId: coverFileId || undefined,\n      },\n      {\n        onSuccess: (lb) => {\n          setCreating(false);\n          setName('');\n          setDescription('');\n          setTags('');\n          setVisibility('PRIVATE');\n          setCoverFileId('');\n          navigateTo(`/lookbooks/${lb.id}`);\n        },\n      }\n    );\n  };\n\n  return (\n    <PageLayout\n      title=\"Lookbooks\"\n      description=\"Themed boards of saved catalogue pieces and looks\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => setCreating((v) => !v)}\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          {creating ? <X className=\"h-4 w-4\" /> : <Plus className=\"h-4 w-4\" />}\n          {creating ? 'Close' : 'New lookbook'}\n        </button>\n      }\n    >\n      {creating && (\n        <form onSubmit={handleCreate} className=\"mb-6\">\n          <GlassCard treatment=\"plain\" className=\"p-5\">\n            <h2 className=\"mb-4 flex items-center gap-2 text-base font-semibold text-text-primary\">\n              <BookHeart className=\"h-5 w-5\" /> New lookbook\n            </h2>\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              <TextField\n                label=\"Name\"\n                value={name}\n                onChange={setName}\n                placeholder=\"Summer wedding guest\"\n                required\n                error={nameError}\n              />\n              <SelectField\n                label=\"Visibility\"\n                value={visibility}\n                onChange={(v) => setVisibility(v as CooVisibility)}\n                options={visibilityOptions}\n              />\n            </div>\n            <TextAreaField\n              label=\"Description\"\n              value={description}\n              onChange={setDescription}\n              placeholder=\"What this board is for…\"\n              rows={2}\n              className=\"mt-4\"\n            />\n            <TextField\n              label=\"Tags\"\n              value={tags}\n              onChange={setTags}\n              placeholder=\"summer, formal\"\n              hint=\"Comma-separated\"\n              className=\"mt-4\"\n            />\n            <ImageUploadField\n              label=\"Cover image\"\n              aspect=\"wide\"\n              value={coverFileId}\n              onChange={setCoverFileId}\n              folder={COO_FILE_FOLDERS.lookbooks}\n              className=\"mt-4\"\n            />\n            {createLookbook.isError && (\n              <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n                {createLookbook.error instanceof Error\n                  ? createLookbook.error.message\n                  : 'Something went wrong'}\n              </p>\n            )}\n            <div className=\"mt-4 flex justify-end\">\n              <button\n                type=\"submit\"\n                disabled={createLookbook.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                {createLookbook.isPending ? (\n                  <Loader2 className=\"h-4 w-4 animate-spin\" />\n                ) : (\n                  <Plus className=\"h-4 w-4\" />\n                )}\n                Create lookbook\n              </button>\n            </div>\n          </GlassCard>\n        </form>\n      )}\n\n      {query.isLoading ? (\n        <LoadingView label=\"Loading lookbooks…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : lookbooks.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<BookHeart className=\"h-10 w-10\" />}\n          title=\"No lookbooks yet\"\n          description=\"Create a themed board to clip catalogue pieces and looks.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setCreating(true)}\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 lookbook\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {lookbooks.map((lb) => (\n            <button\n              key={lb.id}\n              type=\"button\"\n              onClick={() => navigateTo(`/lookbooks/${lb.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\n                icon={<BookHeart className=\"h-9 w-9\" />}\n                seed={lb.id}\n                fileId={lb.cover?.id}\n                alt={lb.name}\n                className=\"h-28 w-full\"\n              />\n              <div className=\"p-4\">\n                <div className=\"flex items-start justify-between gap-2\">\n                  <h3 className=\"truncate text-base font-semibold text-text-primary\">{lb.name}</h3>\n                  <StatusBadge status={lb.visibility} />\n                </div>\n                {lb.description && (\n                  <p className=\"mt-1.5 line-clamp-2 text-sm text-text-secondary\">\n                    {lb.description}\n                  </p>\n                )}\n                {lb.tags.length > 0 && <TagList tags={lb.tags} max={4} className=\"mt-3\" />}\n              </div>\n            </button>\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LookbooksListPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/lookbooks/LookbooksListPage.tsx"],"sourcesContent":["/**\n * Lookbooks List Page\n * @module coolandlovely/pages/lookbooks\n *\n * Lists themed lookbook boards (`cooListLookbooks`) as mood-board cards — a\n * cover, a visibility chip and (when the list selection carries entries) an\n * item count — and supports creating one inline (`cooCreateLookbook`).\n */\n\nimport { useState } from 'react';\nimport { Plus, BookHeart, Loader2, X } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { TagList } from '../../components/TagList';\nimport { VisibilityChip } from '../../components/VisibilityChip';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useLookbooks, useCreateLookbook } from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooVisibility } from '../../types';\n\nconst VISIBILITIES: CooVisibility[] = ['PRIVATE', 'FOLLOWERS', 'PUBLIC'];\n\nexport function LookbooksListPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const query = useLookbooks();\n  const createLookbook = useCreateLookbook();\n\n  const [creating, setCreating] = useState(false);\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [visibility, setVisibility] = useState<CooVisibility>('PRIVATE');\n  const [tags, setTags] = useState('');\n  const [coverFileId, setCoverFileId] = useState('');\n  const [nameError, setNameError] = useState<string | undefined>();\n\n  const lookbooks = query.data ?? [];\n  const visibilityOptions = VISIBILITIES.map((v) => ({ value: v, label: titleCase(v) }));\n\n  const handleCreate = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!name.trim()) {\n      setNameError('Name is required');\n      return;\n    }\n    setNameError(undefined);\n    createLookbook.mutate(\n      {\n        name: name.trim(),\n        description: description.trim() || undefined,\n        visibility,\n        tags: parseCsv(tags),\n        coverFileId: coverFileId || undefined,\n      },\n      {\n        onSuccess: (lb) => {\n          setCreating(false);\n          setName('');\n          setDescription('');\n          setTags('');\n          setVisibility('PRIVATE');\n          setCoverFileId('');\n          navigateTo(`/lookbooks/${lb.id}`);\n        },\n      }\n    );\n  };\n\n  return (\n    <PageLayout\n      title=\"Lookbooks\"\n      description=\"Themed boards of saved catalogue pieces and looks\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => setCreating((v) => !v)}\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          {creating ? <X className=\"h-4 w-4\" /> : <Plus className=\"h-4 w-4\" />}\n          {creating ? 'Close' : 'New lookbook'}\n        </button>\n      }\n    >\n      {creating && (\n        <form onSubmit={handleCreate} className=\"mb-6\">\n          <GlassCard treatment=\"plain\" className=\"p-5\">\n            <h2 className=\"mb-4 flex items-center gap-2 text-base font-semibold text-text-primary\">\n              <BookHeart className=\"h-5 w-5\" /> New lookbook\n            </h2>\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              <TextField\n                label=\"Name\"\n                value={name}\n                onChange={setName}\n                placeholder=\"Summer wedding guest\"\n                required\n                error={nameError}\n              />\n              <SelectField\n                label=\"Visibility\"\n                value={visibility}\n                onChange={(v) => setVisibility(v as CooVisibility)}\n                options={visibilityOptions}\n              />\n            </div>\n            <TextAreaField\n              label=\"Description\"\n              value={description}\n              onChange={setDescription}\n              placeholder=\"What this board is for…\"\n              rows={2}\n              className=\"mt-4\"\n            />\n            <TextField\n              label=\"Tags\"\n              value={tags}\n              onChange={setTags}\n              placeholder=\"summer, formal\"\n              hint=\"Comma-separated\"\n              className=\"mt-4\"\n            />\n            <ImageUploadField\n              label=\"Cover image\"\n              aspect=\"wide\"\n              value={coverFileId}\n              onChange={setCoverFileId}\n              folder={COO_FILE_FOLDERS.lookbooks}\n              className=\"mt-4\"\n            />\n            {createLookbook.isError && (\n              <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n                {createLookbook.error instanceof Error\n                  ? createLookbook.error.message\n                  : 'Something went wrong'}\n              </p>\n            )}\n            <div className=\"mt-4 flex justify-end\">\n              <button\n                type=\"submit\"\n                disabled={createLookbook.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                {createLookbook.isPending ? (\n                  <Loader2 className=\"h-4 w-4 animate-spin\" />\n                ) : (\n                  <Plus className=\"h-4 w-4\" />\n                )}\n                Create lookbook\n              </button>\n            </div>\n          </GlassCard>\n        </form>\n      )}\n\n      {query.isLoading ? (\n        <LoadingView label=\"Loading lookbooks…\" />\n      ) : query.isError ? (\n        <ErrorView onRetry={() => void query.refetch()} />\n      ) : lookbooks.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<BookHeart className=\"h-10 w-10\" />}\n          title=\"No lookbooks yet\"\n          description=\"Create a themed board to clip catalogue pieces and looks.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => setCreating(true)}\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 lookbook\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3\">\n          {lookbooks.map((lb) => {\n            const entryCount = Array.isArray(lb.entries) ? lb.entries.length : null;\n            return (\n              <button\n                key={lb.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/lookbooks/${lb.id}`)}\n                className=\"group flex flex-col overflow-hidden rounded-xl border border-border-seam bg-bg-surface text-left shadow-sm transition-all hover:border-accent-foreground/20 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-focus-ring)]\"\n              >\n                <Thumbnail\n                  icon={<BookHeart className=\"h-10 w-10\" />}\n                  seed={lb.id}\n                  fileId={lb.cover?.id}\n                  alt={lb.name}\n                  className=\"aspect-[4/3] w-full rounded-none\"\n                />\n                <div className=\"flex flex-1 flex-col 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\">\n                        {lb.name}\n                      </h3>\n                      {entryCount !== null && (\n                        <p className=\"mt-0.5 text-xs text-text-secondary tabular-nums\">\n                          {entryCount} {entryCount === 1 ? 'item' : 'items'}\n                        </p>\n                      )}\n                    </div>\n                    <VisibilityChip visibility={lb.visibility} className=\"shrink-0\" />\n                  </div>\n                  {lb.description && (\n                    <p className=\"mt-1.5 line-clamp-2 text-sm text-text-secondary\">\n                      {lb.description}\n                    </p>\n                  )}\n                  {lb.tags.length > 0 && <TagList tags={lb.tags} max={4} className=\"mt-3\" />}\n                </div>\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+/**
+ * Look Detail Page
+ * @module coolandlovely/pages/looks
+ *
+ * Single look (`cooLook`) with its look items, like (`cooLikeLook`), publish
+ * (`cooPublishLook`) and delete (`cooDeleteLook`) actions.
+ */
+export declare function LookDetailPage(): import("react").JSX.Element;
+//# sourceMappingURL=LookDetailPage.d.ts.map

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

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