@openrails/contentkit-ui 0.86.0 → 0.87.0-rc.1

package/dist/components/content/card.js

@@ -11,11 +11,19 @@ import { cn as h } from "cn";
 import { FavouriteIcon as g, LockIcon as _, ThumbsUpIcon as v } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as y } from "@hugeicons/react";
 //#region src/components/content/card.tsx
-var b = (e, t) => new Intl.NumberFormat(t, {
+function b({ card: e, decorate: t }) {
+	let n = t?.(e);
+	return n == null || n === !1 ? null : /* @__PURE__ */ p("span", {
+		className: "pointer-events-none absolute inset-0",
+		"data-ckui": "card-decorations",
+		children: n
+	});
+}
+var x = (e, t) => new Intl.NumberFormat(t, {
 	notation: "compact",
 	maximumFractionDigits: 1
 }).format(e);
-function x(e, t, n = [], r) {
+function S(e, t, n = [], r) {
 	if (t.allowed) return null;
 	if (t.unknown) return e.t("contents.unknownAccess");
 	let i = t.offers?.[0];
@@ -23,7 +31,7 @@ function x(e, t, n = [], r) {
 	let a = t.sell?.find((e) => n.includes(e));
 	return a ? l(r, a) : t.sell?.some((e) => e.includes(":group:")) ? e.t("contents.members") : t.sell?.length ? e.t("contents.forSale") : e.t("contents.locked");
 }
-function S(e, t) {
+function C(e, t) {
 	let n = f(r)?.navigate;
 	return d((r) => {
 		t?.(), !(!n || !e || r.defaultPrevented || r.button !== 0 || r.metaKey || r.ctrlKey || r.shiftKey || r.altKey) && (r.preventDefault(), n(e));
@@ -33,110 +41,116 @@ function S(e, t) {
 		t
 	]);
 }
-function C({ card: r, href: a, onOpen: s, shape: c = "portrait", groupKinds: u, chips: f = 3, tiers: C, labels: E, owner: D = !0, ownerHref: O, children: k, className: A }) {
-	let j = n(), { t: M } = j, N = t(), P = a ? a(r) : r.path, F = S(P, d(() => s?.(r), [s, r])), I = x(j, r.access, C, E), L = r.version, R = r.viewer && r.viewer.progress_max > 0 ? Math.min(1, r.viewer.progress / r.viewer.progress_max) : 0, z = u ?? Object.keys(r.groups), B = L.duration_ms ? Math.round(L.duration_ms / 6e4) : 0, V = [
-		...L.languages.map(N),
-		...L.traits.map((e) => l(E, e)),
-		L.pages ? j.plural("contents.pages", L.pages) : null,
-		B ? j.plural("contents.minutes", B) : null
-	].filter(Boolean), H = r.title || r.code;
+function w({ card: r, href: a, onOpen: s, shape: c = "portrait", groupKinds: u, chips: f = 3, tiers: w, labels: D, owner: O = !0, ownerHref: k, decorate: A, children: j, className: M }) {
+	let N = n(), { t: P } = N, F = t(), I = a ? a(r) : r.path, L = C(I, d(() => s?.(r), [s, r])), R = S(N, r.access, w, D), z = r.version, B = r.viewer && r.viewer.progress_max > 0 ? Math.min(1, r.viewer.progress / r.viewer.progress_max) : 0, V = u ?? Object.keys(r.groups), H = z.duration_ms ? Math.round(z.duration_ms / 6e4) : 0, U = [
+		...z.languages.map(F),
+		...z.traits.map((e) => l(D, e)),
+		z.pages ? N.plural("contents.pages", z.pages) : null,
+		H ? N.plural("contents.minutes", H) : null
+	].filter(Boolean), W = r.title || r.code;
 	return /* @__PURE__ */ m("article", {
-		className: h("group/card grid content-start gap-2", A),
+		className: h("group/card grid content-start gap-2", M),
 		"data-ckui": "content-card",
 		"data-id": r.id,
-		"data-locked": I ? "" : void 0,
+		"data-locked": R ? "" : void 0,
 		lang: r.language || void 0,
-		children: [/* @__PURE__ */ m("a", {
-			href: P,
-			onClick: F,
-			className: "relative block overflow-hidden rounded-lg bg-muted",
-			tabIndex: -1,
-			"aria-hidden": !0,
-			children: [
-				/* @__PURE__ */ p("div", {
-					className: c === "landscape" ? "aspect-video" : "aspect-[3/4]",
-					children: /* @__PURE__ */ p(e, {
-						outputs: r.cover,
-						alt: "",
-						fit: "cover",
-						skeleton: !0,
-						className: "size-full transition-transform group-hover/card:scale-[1.02]",
-						fallback: /* @__PURE__ */ p("span", {
-							className: "grid size-full place-items-center text-2xl font-semibold text-muted-foreground",
-							children: H.charAt(0).toUpperCase()
+		children: [/* @__PURE__ */ m("div", {
+			className: "relative overflow-hidden rounded-lg",
+			children: [/* @__PURE__ */ m("a", {
+				href: I,
+				onClick: L,
+				className: "relative block overflow-hidden rounded-lg bg-muted",
+				tabIndex: -1,
+				"aria-hidden": !0,
+				children: [
+					/* @__PURE__ */ p("div", {
+						className: c === "landscape" ? "aspect-video" : "aspect-[3/4]",
+						children: /* @__PURE__ */ p(e, {
+							outputs: r.cover,
+							alt: "",
+							fit: "cover",
+							skeleton: !0,
+							className: "size-full transition-transform group-hover/card:scale-[1.02]",
+							fallback: /* @__PURE__ */ p("span", {
+								className: "grid size-full place-items-center text-2xl font-semibold text-muted-foreground",
+								children: W.charAt(0).toUpperCase()
+							})
+						})
+					}),
+					R && /* @__PURE__ */ m("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__ */ p(y, {
+							icon: _,
+							strokeWidth: 2,
+							className: "size-3.5",
+							"aria-hidden": !0
+						}), R]
+					}),
+					B > 0 && /* @__PURE__ */ p("span", {
+						className: "absolute inset-x-0 bottom-0 h-1 bg-background/60",
+						"data-ckui": "card-progress",
+						children: /* @__PURE__ */ p("span", {
+							className: "block h-full bg-primary",
+							style: { width: `${Math.round(B * 100)}%` }
 						})
 					})
-				}),
-				I && /* @__PURE__ */ m("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__ */ p(y, {
-						icon: _,
-						strokeWidth: 2,
-						className: "size-3.5",
-						"aria-hidden": !0
-					}), I]
-				}),
-				R > 0 && /* @__PURE__ */ p("span", {
-					className: "absolute inset-x-0 bottom-0 h-1 bg-background/60",
-					"data-ckui": "card-progress",
-					children: /* @__PURE__ */ p("span", {
-						className: "block h-full bg-primary",
-						style: { width: `${Math.round(R * 100)}%` }
-					})
-				})
-			]
+				]
+			}), /* @__PURE__ */ p(b, {
+				card: r,
+				decorate: A
+			})]
 		}), /* @__PURE__ */ m("div", {
 			className: "grid gap-1",
 			children: [
 				/* @__PURE__ */ m("a", {
-					href: P,
-					onClick: F,
+					href: I,
+					onClick: L,
 					className: "line-clamp-2 font-medium break-words hover:underline",
 					"data-ckui": "card-title",
-					children: [H, I && /* @__PURE__ */ m("span", {
+					children: [W, R && /* @__PURE__ */ m("span", {
 						className: "sr-only",
 						children: [
 							" (",
-							I,
+							R,
 							")"
 						]
 					})]
 				}),
-				D && r.owner && /* @__PURE__ */ p(w, {
+				O && r.owner && /* @__PURE__ */ p(T, {
 					group: r.owner,
-					href: O
+					href: k
 				}),
-				V.length > 0 && /* @__PURE__ */ p("p", {
+				U.length > 0 && /* @__PURE__ */ p("p", {
 					className: "text-xs text-muted-foreground",
-					children: V.join(" · ")
+					children: U.join(" · ")
 				}),
 				r.viewer?.completed && /* @__PURE__ */ p(i, {
 					variant: "secondary",
 					className: "justify-self-start",
-					children: M("contents.completed")
+					children: P("contents.completed")
 				}),
 				!r.access.allowed && r.access.free_after && /* @__PURE__ */ p("p", {
 					className: "text-xs text-muted-foreground",
-					children: M("contents.freeFrom", { date: o(j, r.access.free_after, !1) })
+					children: P("contents.freeFrom", { date: o(N, r.access.free_after, !1) })
 				}),
-				z.some((e) => r.groups[e]?.length) && /* @__PURE__ */ p("ul", {
+				V.some((e) => r.groups[e]?.length) && /* @__PURE__ */ p("ul", {
 					className: "flex flex-wrap gap-1",
 					"data-ckui": "card-groups",
-					children: z.flatMap((e) => (r.groups[e] ?? []).slice(0, f).map((t) => /* @__PURE__ */ p("li", {
+					children: V.flatMap((e) => (r.groups[e] ?? []).slice(0, f).map((t) => /* @__PURE__ */ p("li", {
 						"data-kind": e,
-						children: /* @__PURE__ */ p(T, {
+						children: /* @__PURE__ */ p(E, {
 							url: t.path,
 							name: t.name || t.slug
 						})
 					}, `${e}:${t.id}`)))
 				}),
-				/* @__PURE__ */ m("p", {
+				(r.counts.favorites !== void 0 || r.counts.likes !== void 0) && /* @__PURE__ */ m("p", {
 					className: "flex items-center gap-3 text-xs text-muted-foreground tabular-nums",
 					"data-ckui": "card-counts",
-					children: [/* @__PURE__ */ m("span", {
+					children: [r.counts.favorites !== void 0 && /* @__PURE__ */ m("span", {
 						className: "inline-flex items-center gap-1",
-						title: M("contents.favorites"),
+						title: P("contents.favorites"),
 						children: [
 							/* @__PURE__ */ p(y, {
 								icon: g,
@@ -146,13 +160,13 @@ function C({ card: r, href: a, onOpen: s, shape: c = "portrait", groupKinds: u,
 							}),
 							/* @__PURE__ */ p("span", {
 								className: "sr-only",
-								children: M("contents.favorites")
+								children: P("contents.favorites")
 							}),
-							b(r.counts.favorites, j.language)
+							x(r.counts.favorites, N.language)
 						]
-					}), /* @__PURE__ */ m("span", {
+					}), r.counts.likes !== void 0 && /* @__PURE__ */ m("span", {
 						className: "inline-flex items-center gap-1",
-						title: M("contents.likes"),
+						title: P("contents.likes"),
 						children: [
 							/* @__PURE__ */ p(y, {
 								icon: v,
@@ -162,18 +176,18 @@ function C({ card: r, href: a, onOpen: s, shape: c = "portrait", groupKinds: u,
 							}),
 							/* @__PURE__ */ p("span", {
 								className: "sr-only",
-								children: M("contents.likes")
+								children: P("contents.likes")
 							}),
-							b(r.counts.likes, j.language)
+							x(r.counts.likes, N.language)
 						]
 					})]
 				}),
-				k
+				j
 			]
 		})]
 	});
 }
-function w({ group: e, href: t, className: n }) {
+function T({ group: e, href: t, className: n }) {
 	return /* @__PURE__ */ p("span", {
 		className: h("flex min-w-0 text-xs text-muted-foreground", n),
 		"data-ckui": "card-owner",
@@ -192,8 +206,8 @@ function w({ group: e, href: t, className: n }) {
 		})
 	});
 }
-function T({ url: e, name: t }) {
-	let n = S(e), r = "inline-block rounded-md border border-border px-1.5 py-0.5 text-xs text-muted-foreground";
+function E({ url: e, name: t }) {
+	let n = C(e), r = "inline-block rounded-md border border-border px-1.5 py-0.5 text-xs text-muted-foreground";
 	return e ? /* @__PURE__ */ p("a", {
 		href: e,
 		onClick: n,
@@ -204,61 +218,69 @@ function T({ url: e, name: t }) {
 		children: t
 	});
 }
-function E({ card: t, href: r, onOpen: i, tiers: o, labels: s, byline: c, owner: l = !0, ownerHref: u, children: f, className: v }) {
-	let C = n(), T = r ? r(t) : t.path, E = S(T, d(() => i?.(t), [i, t])), D = x(C, t.access, o, s), O = t.title || t.code;
+function D({ card: t, href: r, onOpen: i, tiers: o, labels: s, byline: c, owner: l = !0, ownerHref: u, decorate: f, children: v, className: w }) {
+	let E = n(), D = r ? r(t) : t.path, O = C(D, d(() => i?.(t), [i, t])), k = S(E, t.access, o, s), A = t.title || t.code;
 	return /* @__PURE__ */ m("article", {
-		className: h("grid gap-3 rounded-lg border border-border p-3", v),
+		className: h("grid gap-3 rounded-lg border border-border p-3", w),
 		"data-ckui": "post-card",
 		"data-id": t.id,
-		"data-locked": D ? "" : void 0,
+		"data-locked": k ? "" : void 0,
 		lang: t.language || void 0,
 		children: [
-			c ?? (l && t.owner && /* @__PURE__ */ p(w, {
+			c ?? (l && t.owner && /* @__PURE__ */ p(T, {
 				group: t.owner,
 				href: u,
 				className: "text-sm"
 			})),
 			/* @__PURE__ */ m("a", {
-				href: T,
-				onClick: E,
+				href: D,
+				onClick: O,
 				className: "grid gap-2",
 				children: [/* @__PURE__ */ p("span", {
 					className: "font-medium break-words hover:underline",
 					"data-ckui": "card-title",
-					children: O
+					children: A
 				}), t.cover.length > 0 && /* @__PURE__ */ m("span", {
 					className: "relative block aspect-video overflow-hidden rounded-md bg-muted",
-					children: [/* @__PURE__ */ p(e, {
-						outputs: t.cover,
-						alt: "",
-						fit: "cover",
-						skeleton: !0,
-						className: h("size-full", D && "blur-md")
-					}), D && /* @__PURE__ */ p("span", {
-						className: "absolute inset-0 grid place-items-center",
-						children: /* @__PURE__ */ m("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",
-							children: [/* @__PURE__ */ p(y, {
-								icon: _,
-								strokeWidth: 2,
-								className: "size-3.5",
-								"aria-hidden": !0
-							}), D]
+					children: [
+						/* @__PURE__ */ p(e, {
+							outputs: t.cover,
+							alt: "",
+							fit: "cover",
+							skeleton: !0,
+							className: h("size-full", k && "blur-md")
+						}),
+						/* @__PURE__ */ p(b, {
+							card: t,
+							decorate: f
+						}),
+						k && /* @__PURE__ */ p("span", {
+							className: "absolute inset-0 grid place-items-center",
+							children: /* @__PURE__ */ m("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",
+								children: [/* @__PURE__ */ p(y, {
+									icon: _,
+									strokeWidth: 2,
+									className: "size-3.5",
+									"aria-hidden": !0
+								}), k]
+							})
 						})
-					})]
+					]
 				})]
 			}),
 			/* @__PURE__ */ m("p", {
 				className: "flex flex-wrap items-center gap-3 text-xs text-muted-foreground",
 				children: [
 					t.published_at && /* @__PURE__ */ p(a, { at: t.published_at }),
-					!t.cover.length && D && /* @__PURE__ */ p("span", {
+					!t.cover.length && k && /* @__PURE__ */ p("span", {
 						"data-ckui": "card-lock",
-						children: D
+						children: k
 					}),
-					/* @__PURE__ */ m("span", {
+					t.counts.favorites !== void 0 && /* @__PURE__ */ m("span", {
 						className: "inline-flex items-center gap-1 tabular-nums",
+						"data-ckui": "card-counts",
 						children: [
 							/* @__PURE__ */ p(y, {
 								icon: g,
@@ -268,18 +290,18 @@ function E({ card: t, href: r, onOpen: i, tiers: o, labels: s, byline: c, owner:
 							}),
 							/* @__PURE__ */ p("span", {
 								className: "sr-only",
-								children: C.t("contents.favorites")
+								children: E.t("contents.favorites")
 							}),
-							b(t.counts.favorites, C.language)
+							x(t.counts.favorites, E.language)
 						]
 					})
 				]
 			}),
-			f
+			v
 		]
 	});
 }
 //#endregion
-export { C as ContentCard, w as OwnerChip, E as PostCard, x as lockLabel };
+export { w as ContentCard, T as OwnerChip, D as PostCard, S as lockLabel };
 
 //# sourceMappingURL=card.js.map

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, 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 { 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  /** Below the meta line: the host's own. */\n  children?: ReactNode;\n  className?: string;\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, title, version, groups, counts, the reader's progress and why it is locked. */\nexport function ContentCard({ card, href, onOpen, shape = \"portrait\", groupKinds, chips = 3, tiers, labels, owner = true, ownerHref, 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.groups);\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  return (\n    <article 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      <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        {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      <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.groups[k]?.length) && (\n          <ul className=\"flex flex-wrap gap-1\" data-ckui=\"card-groups\">\n            {kinds.flatMap((k) =>\n              (card.groups[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        <p className=\"flex items-center gap-3 text-xs text-muted-foreground tabular-nums\" data-ckui=\"card-counts\">\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          <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        </p>\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, 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            {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        <span className=\"inline-flex items-center gap-1 tabular-nums\">\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      </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, 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 { 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, 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.groups);\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  return (\n    <article 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          {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.groups[k]?.length) && (\n          <ul className=\"flex flex-wrap gap-1\" data-ckui=\"card-groups\">\n            {kinds.flatMap((k) =>\n              (card.groups[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":";;;;;;;;;;;;;AA0CA,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,WAAQ,GAAG,UAAO,WAAQ,WAAQ,IAAM,cAAW,aAAU,aAAU,gBAA+B;CACtL,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,GACxH,IAAQ,KAAc,OAAO,KAAK,EAAK,MAAM,GAC7C,IAAU,EAAE,cAAc,KAAK,MAAM,EAAE,cAAc,GAAM,IAAI,GAC/D,IAAO;EACX,GAAG,EAAE,UAAU,IAAI,CAAY;EAC/B,GAAG,EAAE,OAAO,KAAK,MAAM,EAAQ,GAAQ,CAAC,CAAC;EACzC,EAAE,QAAQ,EAAE,OAAO,kBAAkB,EAAE,KAAK,IAAI;EAChD,IAAU,EAAE,OAAO,oBAAoB,CAAO,IAAI;CACpD,CAAC,CAAC,OAAO,OAAO,GACV,IAAQ,EAAK,SAAS,EAAK;CACjC,OACE,kBAAC,WAAD;EAAS,WAAW,EAAG,uCAAuC,CAAS;EAAG,aAAU;EAAe,WAAS,EAAK;EAAI,eAAa,IAAO,KAAK,KAAA;EAAW,MAAM,EAAK,YAAY,KAAA;EAAhL,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;MACvD,UAAA,kBAAC,GAAD;OACE,SAAS,EAAK;OACd,KAAI;OACJ,KAAI;OACJ,UAAA;OACA,WAAU;OACV,UAAU,kBAAC,QAAD;QAAM,WAAU;QAAkF,UAAA,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY;OAAQ,CAAA;MACjJ,CAAA;KACE,CAAA;KACJ,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;GACH,CAAA,GAAA,kBAAC,GAAD;IAAmB;IAAgB;GAAW,CAAA,CAC3C;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;IAAY,CAAA;IACvE,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,EAAM,MAAM,MAAM,EAAK,OAAO,EAAE,EAAE,MAAM,KACvC,kBAAC,MAAD;KAAI,WAAU;KAAuB,aAAU;KAC5C,UAAA,EAAM,SAAS,OACb,EAAK,OAAO,MAAM,CAAC,EAAA,CAAG,MAAM,GAAG,CAAK,CAAC,CAAC,KAAK,MAC1C,kBAAC,MAAD;MAAyB,aAAW;MAClC,UAAA,kBAAC,GAAD;OAAM,KAAK,EAAE;OAAM,MAAM,EAAE,QAAQ,EAAE;MAAO,CAAA;KAC1C,GAFK,GAAG,EAAE,GAAG,EAAE,IAEf,CACL,CACH;IACE,CAAA;KAEJ,EAAK,OAAO,cAAc,KAAA,KAAa,EAAK,OAAO,UAAU,KAAA,MAC7D,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,gBAAoG;CAC3I,OACE,kBAAC,QAAD;EAAM,WAAW,EAAG,8CAA8C,CAAS;EAAG,aAAU;EAAa,WAAS,EAAM;EAClH,UAAA,kBAAC,GAAD;GAAkB;GAAa;GAAM,WAAU;GAA/C,UAAA,CACE,kBAAC,GAAD;IAAoB;IAAO,WAAU;GAAmC,CAAA,GACxE,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,aAAU,aAAU,gBAA4B;CAC7I,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;IAAW,WAAU;GAAW,CAAA;GACvG,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;MACE,kBAAC,GAAD;OAAc,SAAS,EAAK;OAAO,KAAI;OAAG,KAAI;OAAQ,UAAA;OAAS,WAAW,EAAG,aAAa,KAAQ,SAAS;MAAI,CAAA;MAC/G,kBAAC,GAAD;OAAmB;OAAgB;MAAW,CAAA;MAC7C,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,EAAK,OAAO,cAAc,KAAA,KACzB,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/download-button.d.ts

@@ -0,0 +1,26 @@
+import { ContentKitClient } from '../../client/client.js';
+import { FileDownload } from '../../client/generated/wire.js';
+import { ContentKitUiAppearance } from '../../appearance.js';
+import { ContentKitErrorHandler } from '../../react/context.js';
+export interface VersionDownloadButtonProps {
+    content: string;
+    version: string;
+    /** Hears each granted download. */
+    onDownload?: (d: FileDownload) => void;
+    /** Called instead of showing the locked notice (a paywall, sign in). */
+    onLocked?: () => void;
+    size?: "sm" | "default";
+    variant?: "default" | "secondary" | "outline" | "ghost";
+    client?: ContentKitClient;
+    onError?: ContentKitErrorHandler;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/**
+ * Downloads a version, as its kind serves it (the original video, a
+ * rendition, its pages as a zip): the browser saves the file, charged to the
+ * viewer's download quota. It waits while the file is prepared, says when a
+ * quota refused and for how long, when the version is locked, and when the
+ * site's download policy holds it back ("available to download in N days").
+ */
+export declare function VersionDownloadButton({ content, version, onDownload, onLocked, size, variant, client, onError, className, appearance }: VersionDownloadButtonProps): import('react').JSX.Element;

package/dist/components/content/download-button.js

@@ -0,0 +1,51 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { ContentKitUiRoot as t } from "../../scope.js";
+import { useErrorReporter as n } from "../../react/context.js";
+import { Button as r } from "../../ui/button.js";
+import { useVersionDownload as i } from "../../react/versions.js";
+import { useEffect as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { cn as l } from "cn";
+import { Download01Icon as u } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as d } from "@hugeicons/react";
+//#region src/components/content/download-button.tsx
+function f({ content: f, version: p, onDownload: m, onLocked: h, size: g = "default", variant: _ = "secondary", client: v, onError: y, className: b, appearance: x }) {
+	let { t: S } = e(), C = i(f, p, { client: v }), w = n(y), [T, E] = o(() => Date.now());
+	a(() => {
+		if (C.retryAt === void 0) return;
+		let e = () => E(Date.now()), t = setTimeout(e, 0), n = setInterval(e, 15e3);
+		return () => {
+			clearTimeout(t), clearInterval(n);
+		};
+	}, [C.retryAt]);
+	let D = C.retryAt === void 0 ? 0 : C.retryAt - T, O = D > 0, k = () => {
+		C.download().then(m, (e) => {
+			if (e.code === "forbidden" && h) return h();
+			w(e, "version.download");
+		});
+	}, A = O ? S("versionDownload.limited", { minutes: Math.max(1, Math.ceil(D / 6e4)) }) : C.error?.code === "rate_limited" || C.error?.code === "forbidden" && h ? void 0 : C.message;
+	return /* @__PURE__ */ c(t, {
+		appearance: x,
+		className: l("inline-flex flex-col items-start gap-1", b),
+		"data-ckui": "version-download",
+		children: [/* @__PURE__ */ c(r, {
+			variant: _,
+			size: g,
+			disabled: C.preparing || O,
+			"aria-busy": C.preparing,
+			onClick: k,
+			children: [/* @__PURE__ */ s(d, {
+				icon: u,
+				strokeWidth: 2
+			}), /* @__PURE__ */ s("span", { children: C.preparing ? S("versionDownload.preparing") : S("versionDownload.label") })]
+		}), A && /* @__PURE__ */ s("p", {
+			role: "status",
+			className: "text-xs text-muted-foreground",
+			children: A
+		})]
+	});
+}
+//#endregion
+export { f as VersionDownloadButton };
+
+//# sourceMappingURL=download-button.js.map

package/dist/components/content/download-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"download-button.js","names":[],"sources":["../../../src/components/content/download-button.tsx"],"sourcesContent":["import { Download01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useEffect, useState } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { FileDownload } from \"../../client/generated/wire.js\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useErrorReporter, type ContentKitErrorHandler } from \"../../react/context.js\";\nimport { useVersionDownload } from \"../../react/versions.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\n\nexport interface VersionDownloadButtonProps {\n  content: string;\n  version: string;\n  /** Hears each granted download. */\n  onDownload?: (d: FileDownload) => void;\n  /** Called instead of showing the locked notice (a paywall, sign in). */\n  onLocked?: () => void;\n  size?: \"sm\" | \"default\";\n  variant?: \"default\" | \"secondary\" | \"outline\" | \"ghost\";\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/**\n * Downloads a version, as its kind serves it (the original video, a\n * rendition, its pages as a zip): the browser saves the file, charged to the\n * viewer's download quota. It waits while the file is prepared, says when a\n * quota refused and for how long, when the version is locked, and when the\n * site's download policy holds it back (\"available to download in N days\").\n */\nexport function VersionDownloadButton({ content, version, onDownload, onLocked, size = \"default\", variant = \"secondary\", client, onError, className, appearance }: VersionDownloadButtonProps) {\n  const { t } = useMessages();\n  const d = useVersionDownload(content, version, { client });\n  const report = useErrorReporter(onError);\n  // The clock the quota's countdown reads, kept while one holds.\n  const [now, setNow] = useState(() => Date.now());\n  useEffect(() => {\n    if (d.retryAt === undefined) return;\n    const tick = () => setNow(Date.now());\n    const first = setTimeout(tick, 0);\n    const every = setInterval(tick, 15_000);\n    return () => {\n      clearTimeout(first);\n      clearInterval(every);\n    };\n  }, [d.retryAt]);\n  const left = d.retryAt === undefined ? 0 : d.retryAt - now;\n  const limited = left > 0;\n  const run = () => {\n    d.download().then(onDownload, (err) => {\n      if (err.code === \"forbidden\" && onLocked) return onLocked();\n      report(err, \"version.download\");\n    });\n  };\n  // A quota's notice counts down; a locked version goes to the host's onLocked.\n  const notice = limited\n    ? t(\"versionDownload.limited\", { minutes: Math.max(1, Math.ceil(left / 60_000)) })\n    : d.error?.code === \"rate_limited\" || (d.error?.code === \"forbidden\" && onLocked)\n      ? undefined\n      : d.message;\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"inline-flex flex-col items-start gap-1\", className)} data-ckui=\"version-download\">\n      <Button variant={variant} size={size} disabled={d.preparing || limited} aria-busy={d.preparing} onClick={run}>\n        <HugeiconsIcon icon={Download01Icon} strokeWidth={2} />\n        <span>{d.preparing ? t(\"versionDownload.preparing\") : t(\"versionDownload.label\")}</span>\n      </Button>\n      {notice && (\n        <p role=\"status\" className=\"text-xs text-muted-foreground\">\n          {notice}\n        </p>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAmCA,SAAgB,EAAsB,EAAE,YAAS,YAAS,eAAY,aAAU,UAAO,WAAW,aAAU,aAAa,WAAQ,YAAS,cAAW,iBAA0C;CAC7L,IAAM,EAAE,SAAM,EAAY,GACpB,IAAI,EAAmB,GAAS,GAAS,EAAE,UAAO,CAAC,GACnD,IAAS,EAAiB,CAAO,GAEjC,CAAC,GAAK,KAAU,QAAe,KAAK,IAAI,CAAC;CAC/C,QAAgB;EACd,IAAI,EAAE,YAAY,KAAA,GAAW;EAC7B,IAAM,UAAa,EAAO,KAAK,IAAI,CAAC,GAC9B,IAAQ,WAAW,GAAM,CAAC,GAC1B,IAAQ,YAAY,GAAM,IAAM;EACtC,aAAa;GAEX,AADA,aAAa,CAAK,GAClB,cAAc,CAAK;EACrB;CACF,GAAG,CAAC,EAAE,OAAO,CAAC;CACd,IAAM,IAAO,EAAE,YAAY,KAAA,IAAY,IAAI,EAAE,UAAU,GACjD,IAAU,IAAO,GACjB,UAAY;EAChB,EAAE,SAAS,CAAC,CAAC,KAAK,IAAa,MAAQ;GACrC,IAAI,EAAI,SAAS,eAAe,GAAU,OAAO,EAAS;GAC1D,EAAO,GAAK,kBAAkB;EAChC,CAAC;CACH,GAEM,IAAS,IACX,EAAE,2BAA2B,EAAE,SAAS,KAAK,IAAI,GAAG,KAAK,KAAK,IAAO,GAAM,CAAC,EAAE,CAAC,IAC/E,EAAE,OAAO,SAAS,kBAAmB,EAAE,OAAO,SAAS,eAAe,IACpE,KAAA,IACA,EAAE;CACR,OACE,kBAAC,GAAD;EAA8B;EAAY,WAAW,EAAG,0CAA0C,CAAS;EAAG,aAAU;EAAxH,UAAA,CACE,kBAAC,GAAD;GAAiB;GAAe;GAAM,UAAU,EAAE,aAAa;GAAS,aAAW,EAAE;GAAW,SAAS;GAAzG,UAAA,CACE,kBAAC,GAAD;IAAe,MAAM;IAAgB,aAAa;GAAI,CAAA,GACtD,kBAAC,QAAD,EAAA,UAAO,EAAE,YAAY,EAAE,2BAA2B,IAAI,EAAE,uBAAuB,EAAQ,CAAA,CACjF;EACP,CAAA,GAAA,KACC,kBAAC,KAAD;GAAG,MAAK;GAAS,WAAU;GACxB,UAAA;EACA,CAAA,CAEW;;AAEtB"}

package/dist/components/content/grid.d.ts

@@ -24,9 +24,16 @@ export declare function CardGrid({ list, render, ...p }: CardListProps & {
     list: UseList<Card>;
     render: string;
 }): import('react').JSX.Element;
+/**
+ * What a list does with cards the reader doesn't open: shows them marked
+ * (show), leaves them out (hide), or lists them apart, counted, behind a
+ * toggle that loads them when opened (collapse).
+ */
+export type LockedCards = "show" | "hide" | "collapse";
 /** Contents as cards (GET /v1/contents): any sort and filter, paged. */
-export declare function ContentGrid({ query, ...p }: CardListProps & {
+export declare function ContentGrid({ query, locked, ...p }: CardListProps & {
     query: ContentQuery;
+    locked?: LockedCards;
 }): import('react').JSX.Element;
 /** Search results as cards; nothing until the query has text. */
 export declare function SearchResults({ query, ...p }: CardListProps & {