@openrails/contentkit-ui 0.94.0 → 0.95.0

package/dist/components/content/card.js

@@ -42,54 +42,61 @@ function T(e, t) {
 		t
 	]);
 }
-function E({ card: r, href: o, onOpen: c, shape: l = "portrait", groupKinds: d, chips: p = 3, tiers: E, labels: k, owner: A = !0, ownerHref: j, decorate: M, children: N, className: P }) {
-	let F = n(), { t: I } = F, L = t(), R = o ? o(r) : r.path, z = T(R, f(() => c?.(r), [c, r])), B = w(F, r.access, E, k), V = r.version, H = r.viewer && r.viewer.progress_max > 0 ? Math.min(1, r.viewer.progress / r.viewer.progress_max) : 0, U = d ?? Object.keys(r.entities), W = V.duration_ms ? Math.round(V.duration_ms / 6e4) : 0, G = [
-		...V.languages.map(L),
-		...V.traits.map((e) => u(k, e)),
-		V.pages ? F.plural("contents.pages", V.pages) : null,
-		W ? F.plural("contents.minutes", W) : null
-	].filter(Boolean), K = r.title || r.code, [q, J] = m(null);
+function E({ card: r, href: o, onOpen: c, shape: l = "portrait", loadMedia: d = !0, groupKinds: p, chips: E = 3, filterEntity: k, metadata: A, showCounts: j = !0, tiers: M, labels: N, owner: P = !0, ownerHref: F, decorate: I, children: L, className: R }) {
+	let z = n(), { t: B } = z, V = t(), H = o ? o(r) : r.path, U = T(H, f(() => c?.(r), [c, r])), W = w(z, r.access, M, N), G = r.version, K = r.viewer && r.viewer.progress_max > 0 ? Math.min(1, r.viewer.progress / r.viewer.progress_max) : 0, q = (p ?? Object.keys(r.entities)).flatMap((e) => (r.entities[e] ?? []).filter((t) => !k || k(t, e)).slice(0, E).map((t) => ({
+		kind: e,
+		entity: t
+	}))), J = G.duration_ms ? Math.round(G.duration_ms / 6e4) : 0, Y = A?.traits, X = Y === !1 ? [] : Array.isArray(Y) ? G.traits.filter((e) => Y.includes(e)) : G.traits, Z = [
+		...A?.languages === !1 ? [] : G.languages.map(V),
+		...X.map((e) => u(N, e)),
+		A?.pages !== !1 && G.pages ? z.plural("contents.pages", G.pages) : null,
+		A?.duration !== !1 && J ? z.plural("contents.minutes", J) : null
+	].filter(Boolean), Q = r.title || r.code, [$, ee] = m(null);
 	return /* @__PURE__ */ g("article", {
-		ref: J,
-		className: _("group/card grid content-start gap-2", P),
+		ref: ee,
+		className: _("group/card grid content-start gap-2", R),
 		"data-ckui": "content-card",
 		"data-id": r.id,
-		"data-locked": B ? "" : void 0,
+		"data-locked": W ? "" : void 0,
 		lang: r.language || void 0,
 		children: [/* @__PURE__ */ g("div", {
 			className: "relative overflow-hidden rounded-lg",
 			children: [/* @__PURE__ */ g("a", {
-				href: R,
-				onClick: z,
+				href: H,
+				onClick: U,
 				className: "relative block overflow-hidden rounded-lg bg-muted",
 				tabIndex: -1,
 				"aria-hidden": !0,
 				children: [
 					/* @__PURE__ */ h("div", {
 						className: l === "landscape" ? "aspect-video" : "aspect-[3/4]",
-						children: /* @__PURE__ */ h(e, {
+						children: d ? /* @__PURE__ */ h(e, {
 							outputs: r.cover,
 							alt: "",
 							fit: "cover",
 							skeleton: !0,
+							loading: "lazy",
 							className: "size-full transition-transform group-hover/card:scale-[1.02]",
 							fallback: /* @__PURE__ */ h("span", {
 								className: "grid size-full place-items-center text-2xl font-semibold text-muted-foreground",
-								children: K.charAt(0).toUpperCase()
+								children: Q.charAt(0).toUpperCase()
 							})
+						}) : /* @__PURE__ */ h("span", {
+							className: "block size-full bg-muted",
+							"aria-hidden": !0
 						})
 					}),
-					V.hls && /* @__PURE__ */ h(i, {
+					d && G.hls && /* @__PURE__ */ h(i, {
 						item: {
 							kind: r.kind,
 							id: r.id,
-							version: V.id
+							version: G.id
 						},
-						dir: V.hls,
-						duration: V.duration_ms ? V.duration_ms / 1e3 : void 0,
-						target: q
+						dir: G.hls,
+						duration: G.duration_ms ? G.duration_ms / 1e3 : void 0,
+						target: $
 					}),
-					B && /* @__PURE__ */ g("span", {
+					W && /* @__PURE__ */ g("span", {
 						className: "absolute top-2 left-2 inline-flex items-center gap-1 rounded-md bg-background/85 px-1.5 py-0.5 text-xs font-medium text-foreground shadow-sm",
 						"data-ckui": "card-lock",
 						children: [/* @__PURE__ */ h(x, {
@@ -97,72 +104,73 @@ function E({ card: r, href: o, onOpen: c, shape: l = "portrait", groupKinds: d,
 							strokeWidth: 2,
 							className: "size-3.5",
 							"aria-hidden": !0
-						}), B]
+						}), W]
 					}),
-					H > 0 && /* @__PURE__ */ h("span", {
+					K > 0 && /* @__PURE__ */ h("span", {
 						className: "absolute inset-x-0 bottom-0 h-1 bg-background/60",
 						"data-ckui": "card-progress",
 						children: /* @__PURE__ */ h("span", {
 							className: "block h-full bg-primary",
-							style: { width: `${Math.round(H * 100)}%` }
+							style: { width: `${Math.round(K * 100)}%` }
 						})
 					})
 				]
-			}), /* @__PURE__ */ h(S, {
+			}), d && /* @__PURE__ */ h(S, {
 				card: r,
-				decorate: M
+				decorate: I
 			})]
 		}), /* @__PURE__ */ g("div", {
 			className: "grid gap-1",
 			children: [
 				/* @__PURE__ */ g("a", {
-					href: R,
-					onClick: z,
+					href: H,
+					onClick: U,
 					className: "line-clamp-2 font-medium break-words hover:underline",
 					"data-ckui": "card-title",
-					children: [K, B && /* @__PURE__ */ g("span", {
+					children: [Q, W && /* @__PURE__ */ g("span", {
 						className: "sr-only",
 						children: [
 							" (",
-							B,
+							W,
 							")"
 						]
 					})]
 				}),
-				A && r.owner && /* @__PURE__ */ h(D, {
+				P && r.owner && /* @__PURE__ */ h(D, {
 					group: r.owner,
-					href: j
+					href: F,
+					loadMedia: d
 				}),
-				G.length > 0 && /* @__PURE__ */ h("p", {
+				Z.length > 0 && /* @__PURE__ */ h("p", {
 					className: "text-xs text-muted-foreground",
-					children: G.join(" · ")
+					children: Z.join(" · ")
 				}),
 				r.viewer?.completed && /* @__PURE__ */ h(a, {
 					variant: "secondary",
 					className: "justify-self-start",
-					children: I("contents.completed")
+					children: B("contents.completed")
 				}),
 				!r.access.allowed && r.access.free_after && /* @__PURE__ */ h("p", {
 					className: "text-xs text-muted-foreground",
-					children: I("contents.freeFrom", { date: s(F, r.access.free_after, !1) })
+					children: B("contents.freeFrom", { date: s(z, r.access.free_after, !1) })
 				}),
-				U.some((e) => r.entities[e]?.length) && /* @__PURE__ */ h("ul", {
+				q.length > 0 && /* @__PURE__ */ h("ul", {
 					className: "flex flex-wrap gap-1",
 					"data-ckui": "card-groups",
-					children: U.flatMap((e) => (r.entities[e] ?? []).slice(0, p).map((t) => /* @__PURE__ */ h("li", {
+					children: q.map(({ kind: e, entity: t }) => /* @__PURE__ */ h("li", {
 						"data-kind": e,
 						children: /* @__PURE__ */ h(O, {
 							url: t.path,
 							name: t.name || t.slug
 						})
-					}, `${e}:${t.id}`)))
+					}, `${e}:${t.id}`))
 				}),
-				(r.counts.favorites !== void 0 || r.counts.likes !== void 0) && /* @__PURE__ */ g("p", {
+				j && (r.counts.favorites !== void 0 || r.counts.likes !== void 0) && /* @__PURE__ */ g("p", {
 					className: "flex items-center gap-3 text-xs text-muted-foreground tabular-nums",
 					"data-ckui": "card-counts",
 					children: [r.counts.favorites !== void 0 && /* @__PURE__ */ g("span", {
 						className: "inline-flex items-center gap-1",
-						title: I("contents.favorites"),
+						title: B("contents.favorites"),
 						children: [
 							/* @__PURE__ */ h(x, {
 								icon: v,
@@ -172,13 +180,13 @@ function E({ card: r, href: o, onOpen: c, shape: l = "portrait", groupKinds: d,
 							}),
 							/* @__PURE__ */ h("span", {
 								className: "sr-only",
-								children: I("contents.favorites")
+								children: B("contents.favorites")
 							}),
-							C(r.counts.favorites, F.language)
+							C(r.counts.favorites, z.language)
 						]
 					}), r.counts.likes !== void 0 && /* @__PURE__ */ g("span", {
 						className: "inline-flex items-center gap-1",
-						title: I("contents.likes"),
+						title: B("contents.likes"),
 						children: [
 							/* @__PURE__ */ h(x, {
 								icon: b,
@@ -188,18 +196,18 @@ function E({ card: r, href: o, onOpen: c, shape: l = "portrait", groupKinds: d,
 							}),
 							/* @__PURE__ */ h("span", {
 								className: "sr-only",
-								children: I("contents.likes")
+								children: B("contents.likes")
 							}),
-							C(r.counts.likes, F.language)
+							C(r.counts.likes, z.language)
 						]
 					})]
 				}),
-				N
+				L
 			]
 		})]
 	});
 }
-function D({ group: e, href: t, className: n }) {
+function D({ group: e, href: t, className: n, loadMedia: r = !0 }) {
 	return /* @__PURE__ */ h("span", {
 		className: _("flex min-w-0 text-xs text-muted-foreground", n),
 		"data-ckui": "card-owner",
@@ -208,9 +216,12 @@ function D({ group: e, href: t, className: n }) {
 			group: e,
 			href: t,
 			className: "inline-flex min-w-0 items-center gap-1.5 hover:text-foreground",
-			children: [/* @__PURE__ */ h(c, {
+			children: [r ? /* @__PURE__ */ h(c, {
 				group: e,
 				className: "size-5 shrink-0 text-[0.625rem]"
+			}) : /* @__PURE__ */ h("span", {
+				className: "size-5 shrink-0 rounded-full bg-muted",
+				"aria-hidden": !0
 			}), /* @__PURE__ */ h("span", {
 				className: "truncate",
 				children: e.name || e.slug
@@ -230,43 +241,45 @@ function O({ url: e, name: t }) {
 		children: t
 	});
 }
-function k({ card: t, href: r, onOpen: i, tiers: a, labels: s, byline: c, owner: l = !0, ownerHref: u, decorate: d, children: p, className: m }) {
-	let b = n(), E = r ? r(t) : t.path, O = T(E, f(() => i?.(t), [i, t])), k = w(b, t.access, a, s), A = t.title || t.code;
+function k({ card: t, href: r, onOpen: i, tiers: a, labels: s, byline: c, owner: l = !0, ownerHref: u, loadMedia: d = !0, showCounts: p = !0, decorate: m, children: b, className: E }) {
+	let O = n(), k = r ? r(t) : t.path, A = T(k, f(() => i?.(t), [i, t])), j = w(O, t.access, a, s), M = t.title || t.code;
 	return /* @__PURE__ */ g("article", {
-		className: _("grid gap-3 rounded-lg border border-border p-3", m),
+		className: _("grid gap-3 rounded-lg border border-border p-3", E),
 		"data-ckui": "post-card",
 		"data-id": t.id,
-		"data-locked": k ? "" : void 0,
+		"data-locked": j ? "" : void 0,
 		lang: t.language || void 0,
 		children: [
 			c ?? (l && t.owner && /* @__PURE__ */ h(D, {
 				group: t.owner,
 				href: u,
+				loadMedia: d,
 				className: "text-sm"
 			})),
 			/* @__PURE__ */ g("a", {
-				href: E,
-				onClick: O,
+				href: k,
+				onClick: A,
 				className: "grid gap-2",
 				children: [/* @__PURE__ */ h("span", {
 					className: "font-medium break-words hover:underline",
 					"data-ckui": "card-title",
-					children: A
+					children: M
 				}), t.cover.length > 0 && /* @__PURE__ */ g("span", {
 					className: "relative block aspect-video overflow-hidden rounded-md bg-muted",
 					children: [
-						/* @__PURE__ */ h(e, {
+						d && /* @__PURE__ */ h(e, {
 							outputs: t.cover,
 							alt: "",
 							fit: "cover",
 							skeleton: !0,
-							className: _("size-full", k && "blur-md")
+							loading: "lazy",
+							className: _("size-full", j && "blur-md")
 						}),
-						/* @__PURE__ */ h(S, {
+						d && /* @__PURE__ */ h(S, {
 							card: t,
-							decorate: d
+							decorate: m
 						}),
-						k && /* @__PURE__ */ h("span", {
+						j && /* @__PURE__ */ h("span", {
 							className: "absolute inset-0 grid place-items-center",
 							children: /* @__PURE__ */ g("span", {
 								className: "inline-flex items-center gap-1 rounded-md bg-background/85 px-2 py-1 text-xs font-medium shadow-sm",
@@ -276,7 +289,7 @@ function k({ card: t, href: r, onOpen: i, tiers: a, labels: s, byline: c, owner:
 									strokeWidth: 2,
 									className: "size-3.5",
 									"aria-hidden": !0
-								}), k]
+								}), j]
 							})
 						})
 					]
@@ -286,11 +299,11 @@ function k({ card: t, href: r, onOpen: i, tiers: a, labels: s, byline: c, owner:
 				className: "flex flex-wrap items-center gap-3 text-xs text-muted-foreground",
 				children: [
 					t.published_at && /* @__PURE__ */ h(o, { at: t.published_at }),
-					!t.cover.length && k && /* @__PURE__ */ h("span", {
+					!t.cover.length && j && /* @__PURE__ */ h("span", {
 						"data-ckui": "card-lock",
-						children: k
+						children: j
 					}),
-					t.counts.favorites !== void 0 && /* @__PURE__ */ g("span", {
+					p && t.counts.favorites !== void 0 && /* @__PURE__ */ g("span", {
 						className: "inline-flex items-center gap-1 tabular-nums",
 						"data-ckui": "card-counts",
 						children: [
@@ -302,14 +315,14 @@ function k({ card: t, href: r, onOpen: i, tiers: a, labels: s, byline: c, owner:
 							}),
 							/* @__PURE__ */ h("span", {
 								className: "sr-only",
-								children: b.t("contents.favorites")
+								children: O.t("contents.favorites")
 							}),
-							C(t.counts.favorites, b.language)
+							C(t.counts.favorites, O.language)
 						]
 					})
 				]
 			}),
-			p
+			b
 		]
 	});
 }

package/dist/components/content/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/content/card.tsx"],"sourcesContent":["import { FavouriteIcon, LockIcon, ThumbsUpIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useCallback, useContext, useState, type MouseEvent, type ReactNode } from \"react\";\nimport type { Card, CardAccess } from \"../../client/generated/wire.js\";\nimport { useLanguageName, useMessages } from \"../../i18n/context.js\";\nimport type { Translator } from \"../../i18n/messages.js\";\nimport { ContentKitContext } from \"../../react/context.js\";\nimport { Badge } from \"#ckui/ui/badge\";\nimport { HoverPreview } from \"../hover-preview.js\";\nimport { RenditionImg } from \"../rendition-img.js\";\nimport { formatDate, RelativeTime } from \"../social/parts.js\";\nimport { GroupAvatar, GroupLink, labelOf, type GroupLike, type Labels } from \"../groups/parts.js\";\nimport { priceLabel } from \"./paywall.js\";\n\nexport interface ContentCardProps {\n  card: Card;\n  /** The card's link; default its canonical path. */\n  href?: (card: Card) => string | undefined;\n  /** Before the card's link is followed: a click signal. */\n  onOpen?: (card: Card) => void;\n  /** Cover shape: \"portrait\" (3:4, readers) or \"landscape\" (16:9, players). Default portrait. */\n  shape?: \"portrait\" | \"landscape\";\n  /** The group kinds whose chips show, in order; default every kind the card names. */\n  groupKinds?: readonly string[];\n  /** Chips per group kind. Default 3. */\n  chips?: number;\n  /** Tiers the site sells, so a lock names them; others show as \"for sale\". */\n  tiers?: readonly string[];\n  /** Display names of kinds, traits and tiers by identifier. */\n  labels?: Labels;\n  /** Show the owner group (a channel) when the card has one; default true, false on that group's own feed. */\n  owner?: boolean;\n  /** The owner group's link; default its canonical path. */\n  ownerHref?: (g: GroupLike) => string | undefined;\n  /** Over the cover: the host's badges for the card, placed in the cover's box; clicks reach the card. */\n  decorate?: (card: Card) => ReactNode;\n  /** Below the meta line: the host's own. */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** The host's badges over a cover. */\nfunction Decorations({ card, decorate }: { card: Card; decorate?: (card: Card) => ReactNode }) {\n  const badges = decorate?.(card);\n  if (badges == null || badges === false) return null;\n  return (\n    <span className=\"pointer-events-none absolute inset-0\" data-ckui=\"card-decorations\">\n      {badges}\n    </span>\n  );\n}\n\nconst compact = (n: number, language?: string) => new Intl.NumberFormat(language, { notation: \"compact\", maximumFractionDigits: 1 }).format(n);\n\n/** Why a card is locked, in words (its price when it is on sale); null when it opens. */\nexport function lockLabel(m: Translator, a: CardAccess, tiers: readonly string[] = [], labels?: Labels): string | null {\n  if (a.allowed) return null;\n  if (a.unknown) return m.t(\"contents.unknownAccess\");\n  const offer = a.offers?.[0];\n  if (offer) return offer.target.kind === \"group\" && Number(offer.terms.amount) === 0 ? m.t(\"contents.joinFree\") : priceLabel(m, offer.terms);\n  const tier = a.sell?.find((k) => tiers.includes(k));\n  if (tier) return labelOf(labels, tier);\n  if (a.sell?.some((k) => k.includes(\":group:\"))) return m.t(\"contents.members\");\n  if (a.sell?.length) return m.t(\"contents.forSale\");\n  return m.t(\"contents.locked\");\n}\n\n/** A link followed in-app through the provider's navigate. */\nfunction useLink(url: string | undefined, before?: () => void) {\n  const navigate = useContext(ContentKitContext)?.navigate;\n  return useCallback(\n    (e: MouseEvent<HTMLAnchorElement>) => {\n      before?.();\n      if (!navigate || !url || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n      e.preventDefault();\n      navigate(url);\n    },\n    [navigate, url, before],\n  );\n}\n\n/** One content in a listing: cover (a video the reader opens previews over it on hover), title, version, groups, counts, the reader's progress and why it is locked; what its kind's locked view hides is absent. */\nexport function ContentCard({ card, href, onOpen, shape = \"portrait\", groupKinds, chips = 3, tiers, labels, owner = true, ownerHref, decorate, children, className }: ContentCardProps) {\n  const m = useMessages();\n  const { t } = m;\n  const languageName = useLanguageName();\n  const url = href ? href(card) : card.path;\n  const open = useCallback(() => onOpen?.(card), [onOpen, card]);\n  const onClick = useLink(url, open);\n  const lock = lockLabel(m, card.access, tiers, labels);\n  const v = card.version;\n  const progress = card.viewer && card.viewer.progress_max > 0 ? Math.min(1, card.viewer.progress / card.viewer.progress_max) : 0;\n  const kinds = groupKinds ?? Object.keys(card.entities);\n  const minutes = v.duration_ms ? Math.round(v.duration_ms / 60_000) : 0;\n  const meta = [\n    ...v.languages.map(languageName),\n    ...v.traits.map((x) => labelOf(labels, x)),\n    v.pages ? m.plural(\"contents.pages\", v.pages) : null,\n    minutes ? m.plural(\"contents.minutes\", minutes) : null,\n  ].filter(Boolean);\n  const title = card.title || card.code;\n  const [article, setArticle] = useState<HTMLElement | null>(null);\n  return (\n    <article ref={setArticle} className={cn(\"group/card grid content-start gap-2\", className)} data-ckui=\"content-card\" data-id={card.id} data-locked={lock ? \"\" : undefined} lang={card.language || undefined}>\n      <div className=\"relative overflow-hidden rounded-lg\">\n        <a href={url} onClick={onClick} className=\"relative block overflow-hidden rounded-lg bg-muted\" tabIndex={-1} aria-hidden>\n          <div className={shape === \"landscape\" ? \"aspect-video\" : \"aspect-[3/4]\"}>\n            <RenditionImg\n              outputs={card.cover}\n              alt=\"\"\n              fit=\"cover\"\n              skeleton\n              className=\"size-full transition-transform group-hover/card:scale-[1.02]\"\n              fallback={<span className=\"grid size-full place-items-center text-2xl font-semibold text-muted-foreground\">{title.charAt(0).toUpperCase()}</span>}\n            />\n          </div>\n          {v.hls && <HoverPreview item={{ kind: card.kind, id: card.id, version: v.id }} dir={v.hls} duration={v.duration_ms ? v.duration_ms / 1000 : undefined} target={article} />}\n          {lock && (\n            <span className=\"absolute top-2 left-2 inline-flex items-center gap-1 rounded-md bg-background/85 px-1.5 py-0.5 text-xs font-medium text-foreground shadow-sm\" data-ckui=\"card-lock\">\n              <HugeiconsIcon icon={LockIcon} strokeWidth={2} className=\"size-3.5\" aria-hidden />\n              {lock}\n            </span>\n          )}\n          {progress > 0 && (\n            <span className=\"absolute inset-x-0 bottom-0 h-1 bg-background/60\" data-ckui=\"card-progress\">\n              <span className=\"block h-full bg-primary\" style={{ width: `${Math.round(progress * 100)}%` }} />\n            </span>\n          )}\n        </a>\n        <Decorations card={card} decorate={decorate} />\n      </div>\n      <div className=\"grid gap-1\">\n        <a href={url} onClick={onClick} className=\"line-clamp-2 font-medium break-words hover:underline\" data-ckui=\"card-title\">\n          {title}\n          {lock && <span className=\"sr-only\"> ({lock})</span>}\n        </a>\n        {owner && card.owner && <OwnerChip group={card.owner} href={ownerHref} />}\n        {meta.length > 0 && <p className=\"text-xs text-muted-foreground\">{meta.join(\" · \")}</p>}\n        {card.viewer?.completed && (\n          <Badge variant=\"secondary\" className=\"justify-self-start\">\n            {t(\"contents.completed\")}\n          </Badge>\n        )}\n        {!card.access.allowed && card.access.free_after && <p className=\"text-xs text-muted-foreground\">{t(\"contents.freeFrom\", { date: formatDate(m, card.access.free_after, false) })}</p>}\n        {kinds.some((k) => card.entities[k]?.length) && (\n          <ul className=\"flex flex-wrap gap-1\" data-ckui=\"card-groups\">\n            {kinds.flatMap((k) =>\n              (card.entities[k] ?? []).slice(0, chips).map((g) => (\n                <li key={`${k}:${g.id}`} data-kind={k}>\n                  <Chip url={g.path} name={g.name || g.slug} />\n                </li>\n              )),\n            )}\n          </ul>\n        )}\n        {(card.counts.favorites !== undefined || card.counts.likes !== undefined) && (\n          <p className=\"flex items-center gap-3 text-xs text-muted-foreground tabular-nums\" data-ckui=\"card-counts\">\n            {card.counts.favorites !== undefined && (\n              <span className=\"inline-flex items-center gap-1\" title={t(\"contents.favorites\")}>\n                <HugeiconsIcon icon={FavouriteIcon} strokeWidth={2} className={cn(\"size-3.5\", card.viewer?.favorited && \"fill-current text-primary\")} aria-hidden />\n                <span className=\"sr-only\">{t(\"contents.favorites\")}</span>\n                {compact(card.counts.favorites, m.language)}\n              </span>\n            )}\n            {card.counts.likes !== undefined && (\n              <span className=\"inline-flex items-center gap-1\" title={t(\"contents.likes\")}>\n                <HugeiconsIcon icon={ThumbsUpIcon} strokeWidth={2} className=\"size-3.5\" aria-hidden />\n                <span className=\"sr-only\">{t(\"contents.likes\")}</span>\n                {compact(card.counts.likes, m.language)}\n              </span>\n            )}\n          </p>\n        )}\n        {children}\n      </div>\n    </article>\n  );\n}\n\n/** The group that owns a content (a channel): its avatar and name, linking to its page. */\nexport function OwnerChip({ group, href, className }: { group: GroupLike; href?: (g: GroupLike) => string | undefined; className?: string }) {\n  return (\n    <span className={cn(\"flex min-w-0 text-xs text-muted-foreground\", className)} data-ckui=\"card-owner\" data-id={group.id}>\n      <GroupLink group={group} href={href} className=\"inline-flex min-w-0 items-center gap-1.5 hover:text-foreground\">\n        <GroupAvatar group={group} className=\"size-5 shrink-0 text-[0.625rem]\" />\n        <span className=\"truncate\">{group.name || group.slug}</span>\n      </GroupLink>\n    </span>\n  );\n}\n\nfunction Chip({ url, name }: { url?: string; name: string }) {\n  const onClick = useLink(url);\n  const cls = \"inline-block rounded-md border border-border px-1.5 py-0.5 text-xs text-muted-foreground\";\n  return url ? (\n    <a href={url} onClick={onClick} className={cn(cls, \"hover:bg-muted hover:text-foreground\")}>\n      {name}\n    </a>\n  ) : (\n    <span className={cls}>{name}</span>\n  );\n}\n\nexport interface PostCardProps extends Omit<ContentCardProps, \"shape\" | \"chips\" | \"groupKinds\"> {\n  /** Above the title: the post's channel or author; default its owner group's chip. */\n  byline?: ReactNode;\n}\n\n/** A post in a feed: a wide cover, its title, when it was published and what unlocking it costs. */\nexport function PostCard({ card, href, onOpen, tiers, labels, byline, owner = true, ownerHref, decorate, children, className }: PostCardProps) {\n  const m = useMessages();\n  const url = href ? href(card) : card.path;\n  const open = useCallback(() => onOpen?.(card), [onOpen, card]);\n  const onClick = useLink(url, open);\n  const lock = lockLabel(m, card.access, tiers, labels);\n  const title = card.title || card.code;\n  return (\n    <article className={cn(\"grid gap-3 rounded-lg border border-border p-3\", className)} data-ckui=\"post-card\" data-id={card.id} data-locked={lock ? \"\" : undefined} lang={card.language || undefined}>\n      {byline ?? (owner && card.owner && <OwnerChip group={card.owner} href={ownerHref} className=\"text-sm\" />)}\n      <a href={url} onClick={onClick} className=\"grid gap-2\">\n        <span className=\"font-medium break-words hover:underline\" data-ckui=\"card-title\">\n          {title}\n        </span>\n        {card.cover.length > 0 && (\n          <span className=\"relative block aspect-video overflow-hidden rounded-md bg-muted\">\n            <RenditionImg outputs={card.cover} alt=\"\" fit=\"cover\" skeleton className={cn(\"size-full\", lock && \"blur-md\")} />\n            <Decorations card={card} decorate={decorate} />\n            {lock && (\n              <span className=\"absolute inset-0 grid place-items-center\">\n                <span className=\"inline-flex items-center gap-1 rounded-md bg-background/85 px-2 py-1 text-xs font-medium shadow-sm\" data-ckui=\"card-lock\">\n                  <HugeiconsIcon icon={LockIcon} strokeWidth={2} className=\"size-3.5\" aria-hidden />\n                  {lock}\n                </span>\n              </span>\n            )}\n          </span>\n        )}\n      </a>\n      <p className=\"flex flex-wrap items-center gap-3 text-xs text-muted-foreground\">\n        {card.published_at && <RelativeTime at={card.published_at} />}\n        {!card.cover.length && lock && <span data-ckui=\"card-lock\">{lock}</span>}\n        {card.counts.favorites !== undefined && (\n          <span className=\"inline-flex items-center gap-1 tabular-nums\" data-ckui=\"card-counts\">\n            <HugeiconsIcon icon={FavouriteIcon} strokeWidth={2} className={cn(\"size-3.5\", card.viewer?.favorited && \"fill-current text-primary\")} aria-hidden />\n            <span className=\"sr-only\">{m.t(\"contents.favorites\")}</span>\n            {compact(card.counts.favorites, m.language)}\n          </span>\n        )}\n      </p>\n      {children}\n    </article>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/content/card.tsx"],"sourcesContent":["import { FavouriteIcon, LockIcon, ThumbsUpIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useCallback, useContext, useState, type MouseEvent, type ReactNode } from \"react\";\nimport type { Card, CardAccess, Chip as EntityChip } from \"../../client/generated/wire.js\";\nimport { useLanguageName, useMessages } from \"../../i18n/context.js\";\nimport type { Translator } from \"../../i18n/messages.js\";\nimport { ContentKitContext } from \"../../react/context.js\";\nimport { Badge } from \"#ckui/ui/badge\";\nimport { HoverPreview } from \"../hover-preview.js\";\nimport { RenditionImg } from \"../rendition-img.js\";\nimport { formatDate, RelativeTime } from \"../social/parts.js\";\nimport { GroupAvatar, GroupLink, labelOf, type GroupLike, type Labels } from \"../groups/parts.js\";\nimport { priceLabel } from \"./paywall.js\";\n\nexport interface ContentCardProps {\n  card: Card;\n  /** The card's link; default its canonical path. */\n  href?: (card: Card) => string | undefined;\n  /** Before the card's link is followed: a click signal. */\n  onOpen?: (card: Card) => void;\n  /** Cover shape: \"portrait\" (3:4, readers) or \"landscape\" (16:9, players). Default portrait. */\n  shape?: \"portrait\" | \"landscape\";\n  /** Mount images and previews. False keeps the card's text and reserved cover space. */\n  loadMedia?: boolean;\n  /** The group kinds whose chips show, in order; default every kind the card names. */\n  groupKinds?: readonly string[];\n  /** Chips per group kind. Default 3. */\n  chips?: number;\n  /** Select which entity chips appear, before the per-kind chip limit. */\n  filterEntity?: (entity: EntityChip, kind: string) => boolean;\n  /** Metadata fields to show; omitted fields keep their defaults. */\n  metadata?: CardMetadata;\n  /** Show like and favorite totals. Default true. */\n  showCounts?: boolean;\n  /** Tiers the site sells, so a lock names them; others show as \"for sale\". */\n  tiers?: readonly string[];\n  /** Display names of kinds, traits and tiers by identifier. */\n  labels?: Labels;\n  /** Show the owner group (a channel) when the card has one; default true, false on that group's own feed. */\n  owner?: boolean;\n  /** The owner group's link; default its canonical path. */\n  ownerHref?: (g: GroupLike) => string | undefined;\n  /** Over the cover: the host's badges for the card, placed in the cover's box; clicks reach the card. */\n  decorate?: (card: Card) => ReactNode;\n  /** Below the meta line: the host's own. */\n  children?: ReactNode;\n  className?: string;\n}\n\nexport interface CardMetadata {\n  languages?: boolean;\n  /** True shows all traits; an array selects specific trait identifiers. */\n  traits?: boolean | readonly string[];\n  pages?: boolean;\n  duration?: boolean;\n}\n\n/** The host's badges over a cover. */\nfunction Decorations({ card, decorate }: { card: Card; decorate?: (card: Card) => ReactNode }) {\n  const badges = decorate?.(card);\n  if (badges == null || badges === false) return null;\n  return (\n    <span className=\"pointer-events-none absolute inset-0\" data-ckui=\"card-decorations\">\n      {badges}\n    </span>\n  );\n}\n\nconst compact = (n: number, language?: string) => new Intl.NumberFormat(language, { notation: \"compact\", maximumFractionDigits: 1 }).format(n);\n\n/** Why a card is locked, in words (its price when it is on sale); null when it opens. */\nexport function lockLabel(m: Translator, a: CardAccess, tiers: readonly string[] = [], labels?: Labels): string | null {\n  if (a.allowed) return null;\n  if (a.unknown) return m.t(\"contents.unknownAccess\");\n  const offer = a.offers?.[0];\n  if (offer) return offer.target.kind === \"group\" && Number(offer.terms.amount) === 0 ? m.t(\"contents.joinFree\") : priceLabel(m, offer.terms);\n  const tier = a.sell?.find((k) => tiers.includes(k));\n  if (tier) return labelOf(labels, tier);\n  if (a.sell?.some((k) => k.includes(\":group:\"))) return m.t(\"contents.members\");\n  if (a.sell?.length) return m.t(\"contents.forSale\");\n  return m.t(\"contents.locked\");\n}\n\n/** A link followed in-app through the provider's navigate. */\nfunction useLink(url: string | undefined, before?: () => void) {\n  const navigate = useContext(ContentKitContext)?.navigate;\n  return useCallback(\n    (e: MouseEvent<HTMLAnchorElement>) => {\n      before?.();\n      if (!navigate || !url || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n      e.preventDefault();\n      navigate(url);\n    },\n    [navigate, url, before],\n  );\n}\n\n/** One content in a listing: cover (a video the reader opens previews over it on hover), title, version, groups, counts, the reader's progress and why it is locked; what its kind's locked view hides is absent. */\nexport function ContentCard({ card, href, onOpen, shape = \"portrait\", loadMedia = true, groupKinds, chips = 3, filterEntity, metadata, showCounts = true, tiers, labels, owner = true, ownerHref, decorate, children, className }: ContentCardProps) {\n  const m = useMessages();\n  const { t } = m;\n  const languageName = useLanguageName();\n  const url = href ? href(card) : card.path;\n  const open = useCallback(() => onOpen?.(card), [onOpen, card]);\n  const onClick = useLink(url, open);\n  const lock = lockLabel(m, card.access, tiers, labels);\n  const v = card.version;\n  const progress = card.viewer && card.viewer.progress_max > 0 ? Math.min(1, card.viewer.progress / card.viewer.progress_max) : 0;\n  const kinds = groupKinds ?? Object.keys(card.entities);\n  const entities = kinds.flatMap((kind) => (card.entities[kind] ?? []).filter((entity) => !filterEntity || filterEntity(entity, kind)).slice(0, chips).map((entity) => ({ kind, entity })));\n  const minutes = v.duration_ms ? Math.round(v.duration_ms / 60_000) : 0;\n  const selectedTraits = metadata?.traits;\n  const traits = selectedTraits === false ? [] : Array.isArray(selectedTraits) ? v.traits.filter((trait) => selectedTraits.includes(trait)) : v.traits;\n  const meta = [\n    ...(metadata?.languages === false ? [] : v.languages.map(languageName)),\n    ...traits.map((x) => labelOf(labels, x)),\n    metadata?.pages !== false && v.pages ? m.plural(\"contents.pages\", v.pages) : null,\n    metadata?.duration !== false && minutes ? m.plural(\"contents.minutes\", minutes) : null,\n  ].filter(Boolean);\n  const title = card.title || card.code;\n  const [article, setArticle] = useState<HTMLElement | null>(null);\n  return (\n    <article ref={setArticle} className={cn(\"group/card grid content-start gap-2\", className)} data-ckui=\"content-card\" data-id={card.id} data-locked={lock ? \"\" : undefined} lang={card.language || undefined}>\n      <div className=\"relative overflow-hidden rounded-lg\">\n        <a href={url} onClick={onClick} className=\"relative block overflow-hidden rounded-lg bg-muted\" tabIndex={-1} aria-hidden>\n          <div className={shape === \"landscape\" ? \"aspect-video\" : \"aspect-[3/4]\"}>\n            {loadMedia ? <RenditionImg\n              outputs={card.cover}\n              alt=\"\"\n              fit=\"cover\"\n              skeleton\n              loading=\"lazy\"\n              className=\"size-full transition-transform group-hover/card:scale-[1.02]\"\n              fallback={<span className=\"grid size-full place-items-center text-2xl font-semibold text-muted-foreground\">{title.charAt(0).toUpperCase()}</span>}\n            /> : <span className=\"block size-full bg-muted\" aria-hidden />}\n          </div>\n          {loadMedia && v.hls && <HoverPreview item={{ kind: card.kind, id: card.id, version: v.id }} dir={v.hls} duration={v.duration_ms ? v.duration_ms / 1000 : undefined} target={article} />}\n          {lock && (\n            <span className=\"absolute top-2 left-2 inline-flex items-center gap-1 rounded-md bg-background/85 px-1.5 py-0.5 text-xs font-medium text-foreground shadow-sm\" data-ckui=\"card-lock\">\n              <HugeiconsIcon icon={LockIcon} strokeWidth={2} className=\"size-3.5\" aria-hidden />\n              {lock}\n            </span>\n          )}\n          {progress > 0 && (\n            <span className=\"absolute inset-x-0 bottom-0 h-1 bg-background/60\" data-ckui=\"card-progress\">\n              <span className=\"block h-full bg-primary\" style={{ width: `${Math.round(progress * 100)}%` }} />\n            </span>\n          )}\n        </a>\n        {loadMedia && <Decorations card={card} decorate={decorate} />}\n      </div>\n      <div className=\"grid gap-1\">\n        <a href={url} onClick={onClick} className=\"line-clamp-2 font-medium break-words hover:underline\" data-ckui=\"card-title\">\n          {title}\n          {lock && <span className=\"sr-only\"> ({lock})</span>}\n        </a>\n        {owner && card.owner && <OwnerChip group={card.owner} href={ownerHref} loadMedia={loadMedia} />}\n        {meta.length > 0 && <p className=\"text-xs text-muted-foreground\">{meta.join(\" · \")}</p>}\n        {card.viewer?.completed && (\n          <Badge variant=\"secondary\" className=\"justify-self-start\">\n            {t(\"contents.completed\")}\n          </Badge>\n        )}\n        {!card.access.allowed && card.access.free_after && <p className=\"text-xs text-muted-foreground\">{t(\"contents.freeFrom\", { date: formatDate(m, card.access.free_after, false) })}</p>}\n        {entities.length > 0 && (\n          <ul className=\"flex flex-wrap gap-1\" data-ckui=\"card-groups\">\n            {entities.map(({ kind, entity }) => <li key={`${kind}:${entity.id}`} data-kind={kind}><Chip url={entity.path} name={entity.name || entity.slug} /></li>)}\n          </ul>\n        )}\n        {showCounts && (card.counts.favorites !== undefined || card.counts.likes !== undefined) && (\n          <p className=\"flex items-center gap-3 text-xs text-muted-foreground tabular-nums\" data-ckui=\"card-counts\">\n            {card.counts.favorites !== undefined && (\n              <span className=\"inline-flex items-center gap-1\" title={t(\"contents.favorites\")}>\n                <HugeiconsIcon icon={FavouriteIcon} strokeWidth={2} className={cn(\"size-3.5\", card.viewer?.favorited && \"fill-current text-primary\")} aria-hidden />\n                <span className=\"sr-only\">{t(\"contents.favorites\")}</span>\n                {compact(card.counts.favorites, m.language)}\n              </span>\n            )}\n            {card.counts.likes !== undefined && (\n              <span className=\"inline-flex items-center gap-1\" title={t(\"contents.likes\")}>\n                <HugeiconsIcon icon={ThumbsUpIcon} strokeWidth={2} className=\"size-3.5\" aria-hidden />\n                <span className=\"sr-only\">{t(\"contents.likes\")}</span>\n                {compact(card.counts.likes, m.language)}\n              </span>\n            )}\n          </p>\n        )}\n        {children}\n      </div>\n    </article>\n  );\n}\n\n/** The group that owns a content (a channel): its avatar and name, linking to its page. */\nexport function OwnerChip({ group, href, className, loadMedia = true }: { group: GroupLike; href?: (g: GroupLike) => string | undefined; className?: string; loadMedia?: boolean }) {\n  return (\n    <span className={cn(\"flex min-w-0 text-xs text-muted-foreground\", className)} data-ckui=\"card-owner\" data-id={group.id}>\n      <GroupLink group={group} href={href} className=\"inline-flex min-w-0 items-center gap-1.5 hover:text-foreground\">\n        {loadMedia ? <GroupAvatar group={group} className=\"size-5 shrink-0 text-[0.625rem]\" /> : <span className=\"size-5 shrink-0 rounded-full bg-muted\" aria-hidden />}\n        <span className=\"truncate\">{group.name || group.slug}</span>\n      </GroupLink>\n    </span>\n  );\n}\n\nfunction Chip({ url, name }: { url?: string; name: string }) {\n  const onClick = useLink(url);\n  const cls = \"inline-block rounded-md border border-border px-1.5 py-0.5 text-xs text-muted-foreground\";\n  return url ? (\n    <a href={url} onClick={onClick} className={cn(cls, \"hover:bg-muted hover:text-foreground\")}>\n      {name}\n    </a>\n  ) : (\n    <span className={cls}>{name}</span>\n  );\n}\n\nexport interface PostCardProps extends Omit<ContentCardProps, \"shape\" | \"chips\" | \"groupKinds\" | \"filterEntity\" | \"metadata\"> {\n  /** Above the title: the post's channel or author; default its owner group's chip. */\n  byline?: ReactNode;\n}\n\n/** A post in a feed: a wide cover, its title, when it was published and what unlocking it costs. */\nexport function PostCard({ card, href, onOpen, tiers, labels, byline, owner = true, ownerHref, loadMedia = true, showCounts = true, decorate, children, className }: PostCardProps) {\n  const m = useMessages();\n  const url = href ? href(card) : card.path;\n  const open = useCallback(() => onOpen?.(card), [onOpen, card]);\n  const onClick = useLink(url, open);\n  const lock = lockLabel(m, card.access, tiers, labels);\n  const title = card.title || card.code;\n  return (\n    <article className={cn(\"grid gap-3 rounded-lg border border-border p-3\", className)} data-ckui=\"post-card\" data-id={card.id} data-locked={lock ? \"\" : undefined} lang={card.language || undefined}>\n      {byline ?? (owner && card.owner && <OwnerChip group={card.owner} href={ownerHref} loadMedia={loadMedia} className=\"text-sm\" />)}\n      <a href={url} onClick={onClick} className=\"grid gap-2\">\n        <span className=\"font-medium break-words hover:underline\" data-ckui=\"card-title\">\n          {title}\n        </span>\n        {card.cover.length > 0 && (\n          <span className=\"relative block aspect-video overflow-hidden rounded-md bg-muted\">\n            {loadMedia && <RenditionImg outputs={card.cover} alt=\"\" fit=\"cover\" skeleton loading=\"lazy\" className={cn(\"size-full\", lock && \"blur-md\")} />}\n            {loadMedia && <Decorations card={card} decorate={decorate} />}\n            {lock && (\n              <span className=\"absolute inset-0 grid place-items-center\">\n                <span className=\"inline-flex items-center gap-1 rounded-md bg-background/85 px-2 py-1 text-xs font-medium shadow-sm\" data-ckui=\"card-lock\">\n                  <HugeiconsIcon icon={LockIcon} strokeWidth={2} className=\"size-3.5\" aria-hidden />\n                  {lock}\n                </span>\n              </span>\n            )}\n          </span>\n        )}\n      </a>\n      <p className=\"flex flex-wrap items-center gap-3 text-xs text-muted-foreground\">\n        {card.published_at && <RelativeTime at={card.published_at} />}\n        {!card.cover.length && lock && <span data-ckui=\"card-lock\">{lock}</span>}\n        {showCounts && card.counts.favorites !== undefined && (\n          <span className=\"inline-flex items-center gap-1 tabular-nums\" data-ckui=\"card-counts\">\n            <HugeiconsIcon icon={FavouriteIcon} strokeWidth={2} className={cn(\"size-3.5\", card.viewer?.favorited && \"fill-current text-primary\")} aria-hidden />\n            <span className=\"sr-only\">{m.t(\"contents.favorites\")}</span>\n            {compact(card.counts.favorites, m.language)}\n          </span>\n        )}\n      </p>\n      {children}\n    </article>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA2DA,SAAS,EAAY,EAAE,SAAM,eAAkE;CAC7F,IAAM,IAAS,IAAW,CAAI;CAE9B,OADI,KAAU,QAAQ,MAAW,KAAc,OAE7C,kBAAC,QAAD;EAAM,WAAU;EAAuC,aAAU;EAC9D,UAAA;CACG,CAAA;AAEV;AAEA,IAAM,KAAW,GAAW,MAAsB,IAAI,KAAK,aAAa,GAAU;CAAE,UAAU;CAAW,uBAAuB;AAAE,CAAC,CAAC,CAAC,OAAO,CAAC;AAG7I,SAAgB,EAAU,GAAe,GAAe,IAA2B,CAAC,GAAG,GAAgC;CACrH,IAAI,EAAE,SAAS,OAAO;CACtB,IAAI,EAAE,SAAS,OAAO,EAAE,EAAE,wBAAwB;CAClD,IAAM,IAAQ,EAAE,SAAS;CACzB,IAAI,GAAO,OAAO,EAAM,OAAO,SAAS,WAAW,OAAO,EAAM,MAAM,MAAM,MAAM,IAAI,EAAE,EAAE,mBAAmB,IAAI,EAAW,GAAG,EAAM,KAAK;CAC1I,IAAM,IAAO,EAAE,MAAM,MAAM,MAAM,EAAM,SAAS,CAAC,CAAC;CAIlD,OAHI,IAAa,EAAQ,GAAQ,CAAI,IACjC,EAAE,MAAM,MAAM,MAAM,EAAE,SAAS,SAAS,CAAC,IAAU,EAAE,EAAE,kBAAkB,IACzE,EAAE,MAAM,SAAe,EAAE,EAAE,kBAAkB,IAC1C,EAAE,EAAE,iBAAiB;AAC9B;AAGA,SAAS,EAAQ,GAAyB,GAAqB;CAC7D,IAAM,IAAW,EAAW,CAAiB,CAAC,EAAE;CAChD,OAAO,GACJ,MAAqC;EACpC,IAAS,GACL,GAAC,KAAY,CAAC,KAAO,EAAE,oBAAoB,EAAE,WAAW,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAC3G,EAAE,eAAe,GACjB,EAAS,CAAG;CACd,GACA;EAAC;EAAU;EAAK;CAAM,CACxB;AACF;AAGA,SAAgB,EAAY,EAAE,SAAM,SAAM,WAAQ,WAAQ,YAAY,eAAY,IAAM,eAAY,WAAQ,GAAG,iBAAc,aAAU,gBAAa,IAAM,UAAO,WAAQ,WAAQ,IAAM,cAAW,aAAU,aAAU,gBAA+B;CACnP,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAe,EAAgB,GAC/B,IAAM,IAAO,EAAK,CAAI,IAAI,EAAK,MAE/B,IAAU,EAAQ,GADX,QAAkB,IAAS,CAAI,GAAG,CAAC,GAAQ,CAAI,CAC/B,CAAI,GAC3B,IAAO,EAAU,GAAG,EAAK,QAAQ,GAAO,CAAM,GAC9C,IAAI,EAAK,SACT,IAAW,EAAK,UAAU,EAAK,OAAO,eAAe,IAAI,KAAK,IAAI,GAAG,EAAK,OAAO,WAAW,EAAK,OAAO,YAAY,IAAI,GAExH,KADQ,KAAc,OAAO,KAAK,EAAK,QAAQ,EAAA,CAC9B,SAAS,OAAU,EAAK,SAAS,MAAS,CAAC,EAAA,CAAG,QAAQ,MAAW,CAAC,KAAgB,EAAa,GAAQ,CAAI,CAAC,CAAC,CAAC,MAAM,GAAG,CAAK,CAAC,CAAC,KAAK,OAAY;EAAE;EAAM;CAAO,EAAE,CAAC,GAClL,IAAU,EAAE,cAAc,KAAK,MAAM,EAAE,cAAc,GAAM,IAAI,GAC/D,IAAiB,GAAU,QAC3B,IAAS,MAAmB,KAAQ,CAAC,IAAI,MAAM,QAAQ,CAAc,IAAI,EAAE,OAAO,QAAQ,MAAU,EAAe,SAAS,CAAK,CAAC,IAAI,EAAE,QACxI,IAAO;EACX,GAAI,GAAU,cAAc,KAAQ,CAAC,IAAI,EAAE,UAAU,IAAI,CAAY;EACrE,GAAG,EAAO,KAAK,MAAM,EAAQ,GAAQ,CAAC,CAAC;EACvC,GAAU,UAAU,MAAS,EAAE,QAAQ,EAAE,OAAO,kBAAkB,EAAE,KAAK,IAAI;EAC7E,GAAU,aAAa,MAAS,IAAU,EAAE,OAAO,oBAAoB,CAAO,IAAI;CACpF,CAAC,CAAC,OAAO,OAAO,GACV,IAAQ,EAAK,SAAS,EAAK,MAC3B,CAAC,GAAS,MAAc,EAA6B,IAAI;CAC/D,OACE,kBAAC,WAAD;EAAS,KAAK;EAAY,WAAW,EAAG,uCAAuC,CAAS;EAAG,aAAU;EAAe,WAAS,EAAK;EAAI,eAAa,IAAO,KAAK,KAAA;EAAW,MAAM,EAAK,YAAY,KAAA;EAAjM,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,KAAD;IAAG,MAAM;IAAc;IAAS,WAAU;IAAqD,UAAU;IAAI,eAAA;IAA7G,UAAA;KACE,kBAAC,OAAD;MAAK,WAAW,MAAU,cAAc,iBAAiB;MACtD,UAAA,IAAY,kBAAC,GAAD;OACX,SAAS,EAAK;OACd,KAAI;OACJ,KAAI;OACJ,UAAA;OACA,SAAQ;OACR,WAAU;OACV,UAAU,kBAAC,QAAD;QAAM,WAAU;QAAkF,UAAA,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY;OAAQ,CAAA;MACjJ,CAAA,IAAI,kBAAC,QAAD;OAAM,WAAU;OAA2B,eAAA;MAAa,CAAA;KAC1D,CAAA;KACJ,KAAa,EAAE,OAAO,kBAAC,GAAD;MAAc,MAAM;OAAE,MAAM,EAAK;OAAM,IAAI,EAAK;OAAI,SAAS,EAAE;MAAG;MAAG,KAAK,EAAE;MAAK,UAAU,EAAE,cAAc,EAAE,cAAc,MAAO,KAAA;MAAW,QAAQ;KAAU,CAAA;KACrL,KACC,kBAAC,QAAD;MAAM,WAAU;MAA+I,aAAU;MAAzK,UAAA,CACE,kBAAC,GAAD;OAAe,MAAM;OAAU,aAAa;OAAG,WAAU;OAAW,eAAA;MAAa,CAAA,GAChF,CACG;;KAEP,IAAW,KACV,kBAAC,QAAD;MAAM,WAAU;MAAmD,aAAU;MAC3E,UAAA,kBAAC,QAAD;OAAM,WAAU;OAA0B,OAAO,EAAE,OAAO,GAAG,KAAK,MAAM,IAAW,GAAG,EAAE,GAAG;MAAI,CAAA;KAC3F,CAAA;IAEP;GACF,CAAA,GAAA,KAAa,kBAAC,GAAD;IAAmB;IAAgB;GAAW,CAAA,CACzD;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,KAAD;KAAG,MAAM;KAAc;KAAS,WAAU;KAAuD,aAAU;KAA3G,UAAA,CACG,GACA,KAAQ,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAA0B;OAAG;OAAK;MAAO;KACjD,CAAA,CAAA;;IACF,KAAS,EAAK,SAAS,kBAAC,GAAD;KAAW,OAAO,EAAK;KAAO,MAAM;KAAsB;IAAY,CAAA;IAC7F,EAAK,SAAS,KAAK,kBAAC,KAAD;KAAG,WAAU;KAAiC,UAAA,EAAK,KAAK,KAAK;IAAK,CAAA;IACrF,EAAK,QAAQ,aACZ,kBAAC,GAAD;KAAO,SAAQ;KAAY,WAAU;KAClC,UAAA,EAAE,oBAAoB;IAClB,CAAA;IAER,CAAC,EAAK,OAAO,WAAW,EAAK,OAAO,cAAc,kBAAC,KAAD;KAAG,WAAU;KAAiC,UAAA,EAAE,qBAAqB,EAAE,MAAM,EAAW,GAAG,EAAK,OAAO,YAAY,EAAK,EAAE,CAAC;IAAK,CAAA;IAClL,EAAS,SAAS,KACjB,kBAAC,MAAD;KAAI,WAAU;KAAuB,aAAU;KAC5C,UAAA,EAAS,KAAK,EAAE,SAAM,gBAAa,kBAAC,MAAD;MAAiC,aAAW;MAAM,UAAA,kBAAC,GAAD;OAAM,KAAK,EAAO;OAAM,MAAM,EAAO,QAAQ,EAAO;MAAO,CAAA;KAAK,GAAzG,GAAG,EAAK,GAAG,EAAO,IAAuF,CAAC;IACrJ,CAAA;IAEL,MAAe,EAAK,OAAO,cAAc,KAAA,KAAa,EAAK,OAAO,UAAU,KAAA,MAC3E,kBAAC,KAAD;KAAG,WAAU;KAAqE,aAAU;KAA5F,UAAA,CACG,EAAK,OAAO,cAAc,KAAA,KACzB,kBAAC,QAAD;MAAM,WAAU;MAAiC,OAAO,EAAE,oBAAoB;MAA9E,UAAA;OACE,kBAAC,GAAD;QAAe,MAAM;QAAe,aAAa;QAAG,WAAW,EAAG,YAAY,EAAK,QAAQ,aAAa,2BAA2B;QAAG,eAAA;OAAa,CAAA;OACnJ,kBAAC,QAAD;QAAM,WAAU;QAAW,UAAA,EAAE,oBAAoB;OAAQ,CAAA;OACxD,EAAQ,EAAK,OAAO,WAAW,EAAE,QAAQ;MACtC;KAEP,CAAA,GAAA,EAAK,OAAO,UAAU,KAAA,KACrB,kBAAC,QAAD;MAAM,WAAU;MAAiC,OAAO,EAAE,gBAAgB;MAA1E,UAAA;OACE,kBAAC,GAAD;QAAe,MAAM;QAAc,aAAa;QAAG,WAAU;QAAW,eAAA;OAAa,CAAA;OACrF,kBAAC,QAAD;QAAM,WAAU;QAAW,UAAA,EAAE,gBAAgB;OAAQ,CAAA;OACpD,EAAQ,EAAK,OAAO,OAAO,EAAE,QAAQ;MAClC;KAEP,CAAA,CAAA;;IAEJ;GACE;EACE,CAAA,CAAA;;AAEb;AAGA,SAAgB,EAAU,EAAE,UAAO,SAAM,cAAW,eAAY,MAAoH;CAClL,OACE,kBAAC,QAAD;EAAM,WAAW,EAAG,8CAA8C,CAAS;EAAG,aAAU;EAAa,WAAS,EAAM;EAClH,UAAA,kBAAC,GAAD;GAAkB;GAAa;GAAM,WAAU;GAA/C,UAAA,CACG,IAAY,kBAAC,GAAD;IAAoB;IAAO,WAAU;GAAmC,CAAA,IAAI,kBAAC,QAAD;IAAM,WAAU;IAAwC,eAAA;GAAa,CAAA,GAC9J,kBAAC,QAAD;IAAM,WAAU;IAAY,UAAA,EAAM,QAAQ,EAAM;GAAW,CAAA,CAClD;;CACP,CAAA;AAEV;AAEA,SAAS,EAAK,EAAE,QAAK,WAAwC;CAC3D,IAAM,IAAU,EAAQ,CAAG,GACrB,IAAM;CACZ,OAAO,IACL,kBAAC,KAAD;EAAG,MAAM;EAAc;EAAS,WAAW,EAAG,GAAK,sCAAsC;EACtF,UAAA;CACA,CAAA,IAEH,kBAAC,QAAD;EAAM,WAAW;EAAM,UAAA;CAAW,CAAA;AAEtC;AAQA,SAAgB,EAAS,EAAE,SAAM,SAAM,WAAQ,UAAO,WAAQ,WAAQ,WAAQ,IAAM,cAAW,eAAY,IAAM,gBAAa,IAAM,aAAU,aAAU,gBAA4B;CAClL,IAAM,IAAI,EAAY,GAChB,IAAM,IAAO,EAAK,CAAI,IAAI,EAAK,MAE/B,IAAU,EAAQ,GADX,QAAkB,IAAS,CAAI,GAAG,CAAC,GAAQ,CAAI,CAC/B,CAAI,GAC3B,IAAO,EAAU,GAAG,EAAK,QAAQ,GAAO,CAAM,GAC9C,IAAQ,EAAK,SAAS,EAAK;CACjC,OACE,kBAAC,WAAD;EAAS,WAAW,EAAG,kDAAkD,CAAS;EAAG,aAAU;EAAY,WAAS,EAAK;EAAI,eAAa,IAAO,KAAK,KAAA;EAAW,MAAM,EAAK,YAAY,KAAA;EAAxL,UAAA;GACG,MAAW,KAAS,EAAK,SAAS,kBAAC,GAAD;IAAW,OAAO,EAAK;IAAO,MAAM;IAAsB;IAAW,WAAU;GAAW,CAAA;GAC7H,kBAAC,KAAD;IAAG,MAAM;IAAc;IAAS,WAAU;IAA1C,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KAA0C,aAAU;KACjE,UAAA;IACG,CAAA,GACL,EAAK,MAAM,SAAS,KACnB,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACG,KAAa,kBAAC,GAAD;OAAc,SAAS,EAAK;OAAO,KAAI;OAAG,KAAI;OAAQ,UAAA;OAAS,SAAQ;OAAO,WAAW,EAAG,aAAa,KAAQ,SAAS;MAAI,CAAA;MAC3I,KAAa,kBAAC,GAAD;OAAmB;OAAgB;MAAW,CAAA;MAC3D,KACC,kBAAC,QAAD;OAAM,WAAU;OACd,UAAA,kBAAC,QAAD;QAAM,WAAU;QAAqG,aAAU;QAA/H,UAAA,CACE,kBAAC,GAAD;SAAe,MAAM;SAAU,aAAa;SAAG,WAAU;SAAW,eAAA;QAAa,CAAA,GAChF,CACG;;MACF,CAAA;KAEJ;IAEP,CAAA,CAAA;;GACH,kBAAC,KAAD;IAAG,WAAU;IAAb,UAAA;KACG,EAAK,gBAAgB,kBAAC,GAAD,EAAc,IAAI,EAAK,aAAe,CAAA;KAC3D,CAAC,EAAK,MAAM,UAAU,KAAQ,kBAAC,QAAD;MAAM,aAAU;MAAa,UAAA;KAAW,CAAA;KACtE,KAAc,EAAK,OAAO,cAAc,KAAA,KACvC,kBAAC,QAAD;MAAM,WAAU;MAA8C,aAAU;MAAxE,UAAA;OACE,kBAAC,GAAD;QAAe,MAAM;QAAe,aAAa;QAAG,WAAW,EAAG,YAAY,EAAK,QAAQ,aAAa,2BAA2B;QAAG,eAAA;OAAa,CAAA;OACnJ,kBAAC,QAAD;QAAM,WAAU;QAAW,UAAA,EAAE,EAAE,oBAAoB;OAAQ,CAAA;OAC1D,EAAQ,EAAK,OAAO,WAAW,EAAE,QAAQ;MACtC;;IAEP;;GACF;EACM;;AAEb"}

package/dist/components/content/daily-releases.d.ts

@@ -0,0 +1,15 @@
+import { DailyReleasesQuery } from '../../client/discovery.js';
+import { CardListProps } from './grid.js';
+export interface DailyReleasesProps extends Omit<CardListProps, "infinite" | "pageSize" | "renderCard" | "loadMedia"> {
+    /** One complete calendar window. Defaults to 10 days in the browser's time zone. */
+    query?: DailyReleasesQuery;
+    /** Cards initially revealed across the whole window, allocated newest first. Default 30. */
+    initialVisible?: number;
+    /** Additional cached cards revealed by a day's Show more button. Default 30. */
+    revealStep?: number;
+}
+/**
+ * One metadata request for a calendar window, with no requests when a day is
+ * opened or expanded. Only revealed, visible cards mount images and previews.
+ */
+export declare function DailyReleases({ query, initialVisible, revealStep, ...p }: DailyReleasesProps): import('react').JSX.Element;

package/dist/components/content/daily-releases.js

@@ -0,0 +1,167 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { ContentKitUiRoot as t } from "../../scope.js";
+import { useContentScope as n } from "../../react/use-resource.js";
+import { Button as r } from "../../ui/button.js";
+import { useNearViewport as i } from "../../react/viewport.js";
+import { Skeleton as a } from "../../ui/skeleton.js";
+import { contentError as o } from "../social/parts.js";
+import { useDailyReleases as s, useExposure as c } from "../../react/discovery.js";
+import { ContentCard as l } from "./card.js";
+import { cardGridLayout as u } from "./grid.js";
+import { useCallback as d, useId as f, useMemo as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { cn as _ } from "cn";
+import { ArrowDown01Icon as v } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as y } from "@hugeicons/react";
+//#region src/components/content/daily-releases.tsx
+var b = (e, t) => Number.isFinite(e) ? Math.max(0, Math.floor(e)) : t;
+function x({ query: i, initialVisible: c = 30, revealStep: l = 30, ...d }) {
+	let f = e(), { scope: m } = n(d.client), v = p(() => ({
+		days: 10,
+		time_zone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+		...i
+	}), [i]), y = s(v, { client: d.client }), x = u(d.grid), C = p(() => y.data?.days.filter((e) => e.contents.length).sort((e, t) => t.date.localeCompare(e.date)) ?? [], [y.data]), w = b(c, 30);
+	return /* @__PURE__ */ h(t, {
+		appearance: d.appearance,
+		className: _("grid gap-6 text-sm", d.className),
+		"data-ckui": "daily-releases",
+		"aria-busy": y.loading,
+		children: y.loading && !y.data ? /* @__PURE__ */ h("div", {
+			className: x.className,
+			style: x.style,
+			children: Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ h(a, { className: "aspect-[3/4]" }, t))
+		}) : y.error && !y.data ? /* @__PURE__ */ g("div", {
+			role: "alert",
+			className: "grid justify-items-start gap-2",
+			children: [/* @__PURE__ */ h("p", {
+				className: "text-destructive",
+				children: o(f, y.error)
+			}), /* @__PURE__ */ h(r, {
+				size: "sm",
+				variant: "outline",
+				onClick: y.reload,
+				children: f.t("common.retry")
+			})]
+		}) : C.length ? C.map((e) => {
+			let t = Math.min(w, e.contents.length);
+			return w -= t, /* @__PURE__ */ h(S, {
+				day: e,
+				initial: t,
+				step: Math.max(1, b(l, 30)),
+				cardProps: d
+			}, JSON.stringify([
+				m,
+				v,
+				y.data?.from_date,
+				e.date
+			]));
+		}) : /* @__PURE__ */ h("p", {
+			role: "status",
+			className: "text-muted-foreground",
+			children: d.empty ?? f.t("contents.empty")
+		})
+	});
+}
+function S({ day: t, initial: n, step: i, cardProps: a }) {
+	let o = e(), s = f(), [l, d] = m(n > 0), [b, x] = m(n), S = p(() => t.contents.slice(0, b), [t.contents, b]), w = p(() => l ? S : [], [l, S]), T = c(w, {
+		surface: a.surface ?? "releases",
+		render: t.date,
+		client: a.client
+	}), E = u(a.grid), D = new Intl.DateTimeFormat(o.language, {
+		dateStyle: "full",
+		timeZone: "UTC"
+	}).format(/* @__PURE__ */ new Date(`${t.date}T12:00:00Z`));
+	return /* @__PURE__ */ g("section", {
+		"data-ckui": "release-day",
+		"data-date": t.date,
+		children: [/* @__PURE__ */ h("h2", { children: /* @__PURE__ */ g(r, {
+			id: `${s}-heading`,
+			type: "button",
+			variant: "ghost",
+			className: "h-auto w-full justify-start gap-3 px-0 py-3 text-start text-lg font-semibold",
+			"aria-expanded": l,
+			"aria-controls": `${s}-contents`,
+			onClick: () => {
+				!l && !b && x(Math.min(i, t.contents.length)), d(!l);
+			},
+			children: [
+				/* @__PURE__ */ h(y, {
+					icon: v,
+					strokeWidth: 2,
+					className: _("size-5 shrink-0 transition-transform duration-200 motion-reduce:transition-none", !l && "-rotate-90"),
+					"aria-hidden": !0
+				}),
+				/* @__PURE__ */ h("time", {
+					dateTime: t.date,
+					children: D
+				}),
+				/* @__PURE__ */ h("span", {
+					className: "ml-auto shrink-0 text-sm font-normal text-muted-foreground",
+					children: o.plural("contents.items", t.contents.length)
+				})
+			]
+		}) }), /* @__PURE__ */ h("div", {
+			id: `${s}-contents`,
+			role: "region",
+			"aria-labelledby": `${s}-heading`,
+			"aria-hidden": !l,
+			inert: !l,
+			className: _("grid transition-[grid-template-rows,opacity] duration-250 ease-out motion-reduce:transition-none", l ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"),
+			children: /* @__PURE__ */ g("div", {
+				className: "min-h-0 overflow-hidden",
+				children: [/* @__PURE__ */ h("ol", {
+					className: _(E.className, "pt-2"),
+					style: E.style,
+					children: S.map((e, t) => /* @__PURE__ */ h(C, {
+						card: e,
+						open: l,
+						position: t + 1,
+						exposure: T,
+						cardProps: a
+					}, e.id))
+				}), b < t.contents.length && /* @__PURE__ */ h("div", {
+					className: "flex justify-center pt-5 pb-1",
+					children: /* @__PURE__ */ h(r, {
+						type: "button",
+						variant: "outline",
+						onClick: () => x((e) => Math.min(e + i, t.contents.length)),
+						children: o.t("contents.showMore")
+					})
+				})]
+			})
+		})]
+	});
+}
+function C({ card: e, open: t, position: n, exposure: r, cardProps: a }) {
+	let [o, s] = i({ margin: "0px" }), c = p(() => r.track(e.id, n), [
+		r,
+		e.id,
+		n
+	]), u = d((e) => {
+		o(e), c(e);
+	}, [o, c]);
+	return /* @__PURE__ */ h("li", {
+		ref: u,
+		children: /* @__PURE__ */ h(l, {
+			card: e,
+			href: a.href,
+			shape: a.shape,
+			loadMedia: t && s,
+			groupKinds: a.groupKinds,
+			chips: a.chips,
+			filterEntity: a.filterEntity,
+			metadata: a.metadata,
+			showCounts: a.showCounts,
+			tiers: a.tiers,
+			labels: a.labels,
+			owner: a.owner,
+			ownerHref: a.ownerHref,
+			decorate: a.decorate,
+			onOpen: () => r.click(e.id, n)
+		})
+	});
+}
+//#endregion
+export { x as DailyReleases };
+
+//# sourceMappingURL=daily-releases.js.map