@openrails/contentkit-ui 0.83.0 → 0.86.0

package/dist/components/admin/stats-dashboard.js

@@ -0,0 +1,257 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { Select as t, SelectContent as n, SelectItem as r, SelectTrigger as i, SelectValue as a } from "../../ui/select.js";
+import { AdminRoot as o, LoadFailed as s, NoAccess as c, Rows as l } from "./shell.js";
+import { useFlowClient as u } from "../../react/admin.js";
+import { useActivity as d, useTopContents as f } from "../../react/stats.js";
+import { useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/admin/stats-dashboard.tsx
+var _ = (e) => e.map((e) => typeof e == "string" ? {
+	value: e,
+	label: e
+} : e), v = [
+	7,
+	30,
+	90
+], y = ["views", "comments"], b = [
+	"7d",
+	"30d",
+	"90d",
+	"365d",
+	"all"
+], x = (e) => e?.code === "forbidden" || e?.code === "unauthorized";
+function S({ client: e, baseUrl: t, auth: n, guard: r, appearance: i, className: a, language: s, messages: c, ...l }) {
+	let d = u({
+		client: e,
+		baseUrl: t,
+		auth: n
+	});
+	return /* @__PURE__ */ h(o, {
+		flow: "stats-dashboard",
+		appearance: i,
+		className: a,
+		language: s,
+		messages: c,
+		guard: r,
+		children: /* @__PURE__ */ h(C, {
+			...l,
+			client: d
+		})
+	});
+}
+function C({ kinds: t, contentHref: n, limit: r = 10, client: i }) {
+	let { t: a } = e(), o = _(t), [u, S] = p(o[0]?.value ?? ""), [C, T] = p(7), [E, D] = p("views"), [O, k] = p("30d"), A = d(u ? {
+		kind: u,
+		days: C
+	} : null, { client: i }), j = f(u ? {
+		kind: u,
+		metric: E,
+		period: O,
+		limit: r
+	} : null, { client: i });
+	if (x(A.error) || x(j.error)) return /* @__PURE__ */ h(c, { children: a("stats.noAccess") });
+	let M = A.data?.days ?? [], N = Math.max(1, ...M.map((e) => e.views)), P = M.reduce((e, t) => e + t.views, 0);
+	return /* @__PURE__ */ g(m, { children: [
+		/* @__PURE__ */ g("div", {
+			className: "flex flex-wrap items-center justify-between gap-2",
+			children: [/* @__PURE__ */ h("h2", {
+				className: "text-base font-semibold",
+				children: a("stats.title")
+			}), o.length > 1 && /* @__PURE__ */ h(w, {
+				label: a("stats.kind"),
+				value: u,
+				onChange: S,
+				options: o
+			})]
+		}),
+		/* @__PURE__ */ g("section", {
+			className: "grid gap-3",
+			"data-ckui": "stats-activity",
+			children: [/* @__PURE__ */ g("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ h("h3", {
+					className: "font-medium",
+					children: a("stats.activity")
+				}), /* @__PURE__ */ h(w, {
+					label: a("stats.days"),
+					value: String(C),
+					onChange: (e) => T(Number(e)),
+					options: v.map((e) => ({
+						value: String(e),
+						label: a("stats.lastDays", { count: e })
+					}))
+				})]
+			}), A.unavailable ? /* @__PURE__ */ h("p", {
+				className: "text-muted-foreground",
+				role: "status",
+				children: a("stats.unavailable")
+			}) : A.error ? /* @__PURE__ */ h(s, {
+				error: A.error,
+				message: a("stats.loadFailed"),
+				retry: A.reload
+			}) : A.loading && !A.data ? /* @__PURE__ */ h(l, { count: 2 }) : M.length ? /* @__PURE__ */ g("table", {
+				className: "w-full text-left tabular-nums",
+				"aria-busy": A.loading,
+				children: [
+					/* @__PURE__ */ h("thead", {
+						className: "text-xs text-muted-foreground",
+						children: /* @__PURE__ */ g("tr", { children: [
+							/* @__PURE__ */ h("th", {
+								className: "py-1 font-medium",
+								children: a("stats.date")
+							}),
+							/* @__PURE__ */ h("th", {
+								className: "py-1 font-medium",
+								children: a("stats.views")
+							}),
+							/* @__PURE__ */ h("th", {
+								className: "py-1 text-end font-medium",
+								children: a("stats.viewers")
+							}),
+							/* @__PURE__ */ h("th", {
+								className: "py-1 text-end font-medium",
+								children: a("stats.users")
+							})
+						] })
+					}),
+					/* @__PURE__ */ h("tbody", { children: M.map((e) => /* @__PURE__ */ g("tr", {
+						className: "border-t border-border",
+						"data-ckui": "stats-day",
+						children: [
+							/* @__PURE__ */ h("td", {
+								className: "py-1.5 pe-3 whitespace-nowrap",
+								children: e.date
+							}),
+							/* @__PURE__ */ h("td", {
+								className: "w-1/2 py-1.5 pe-3",
+								children: /* @__PURE__ */ g("span", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ h("span", {
+										"aria-hidden": !0,
+										className: "h-2 rounded-full bg-primary",
+										style: { width: `${Math.max(2, e.views / N * 100)}%` }
+									}), e.views]
+								})
+							}),
+							/* @__PURE__ */ h("td", {
+								className: "py-1.5 text-end",
+								children: e.viewers
+							}),
+							/* @__PURE__ */ h("td", {
+								className: "py-1.5 text-end",
+								children: e.users
+							})
+						]
+					}, e.date)) }),
+					/* @__PURE__ */ h("tfoot", { children: /* @__PURE__ */ g("tr", {
+						className: "border-t border-border font-medium",
+						children: [
+							/* @__PURE__ */ h("td", {
+								className: "py-1.5",
+								children: a("stats.total")
+							}),
+							/* @__PURE__ */ h("td", {
+								className: "py-1.5",
+								"data-ckui": "stats-total",
+								children: P
+							}),
+							/* @__PURE__ */ h("td", {}),
+							/* @__PURE__ */ h("td", {})
+						]
+					}) })
+				]
+			}) : /* @__PURE__ */ h("p", {
+				className: "text-muted-foreground",
+				children: a("stats.noActivity")
+			})]
+		}),
+		/* @__PURE__ */ g("section", {
+			className: "grid gap-3",
+			"data-ckui": "stats-top",
+			children: [/* @__PURE__ */ g("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ h("h3", {
+					className: "font-medium",
+					children: a("stats.top")
+				}), /* @__PURE__ */ g("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ h(w, {
+						label: a("stats.metric"),
+						value: E,
+						onChange: (e) => D(e),
+						options: y.map((e) => ({
+							value: e,
+							label: a(`stats.metric_${e}`)
+						}))
+					}), /* @__PURE__ */ h(w, {
+						label: a("stats.period"),
+						value: O,
+						onChange: (e) => k(e),
+						options: b.map((e) => ({
+							value: e,
+							label: a(`stats.period_${e}`)
+						}))
+					})]
+				})]
+			}), j.unavailable ? /* @__PURE__ */ h("p", {
+				className: "text-muted-foreground",
+				role: "status",
+				children: a("stats.unavailable")
+			}) : j.error ? /* @__PURE__ */ h(s, {
+				error: j.error,
+				message: a("stats.loadFailed"),
+				retry: j.reload
+			}) : j.loading && !j.data ? /* @__PURE__ */ h(l, { count: 3 }) : j.data?.contents.length ? /* @__PURE__ */ h("ol", {
+				className: "grid divide-y divide-border rounded-lg border border-border",
+				"aria-busy": j.loading,
+				children: j.data.contents.map((e, t) => {
+					let r = n ? n(e) : e.path;
+					return /* @__PURE__ */ g("li", {
+						className: "flex items-center gap-3 p-2.5",
+						"data-ckui": "stats-ranked",
+						children: [
+							/* @__PURE__ */ h("span", {
+								className: "w-6 text-end text-muted-foreground tabular-nums",
+								children: t + 1
+							}),
+							r ? /* @__PURE__ */ h("a", {
+								className: "min-w-0 flex-1 break-words hover:underline",
+								href: r,
+								children: e.title
+							}) : /* @__PURE__ */ h("span", {
+								className: "min-w-0 flex-1 break-words",
+								children: e.title
+							}),
+							/* @__PURE__ */ h("span", {
+								className: "tabular-nums",
+								"data-ckui": "stats-value",
+								children: e.value
+							})
+						]
+					}, e.id);
+				})
+			}) : /* @__PURE__ */ h("p", {
+				className: "text-muted-foreground",
+				children: a("stats.noTop")
+			})]
+		})
+	] });
+}
+function w({ label: e, value: o, onChange: s, options: c }) {
+	return /* @__PURE__ */ g(t, {
+		value: o,
+		onValueChange: (e) => s(String(e)),
+		children: [/* @__PURE__ */ h(i, {
+			size: "sm",
+			"aria-label": e,
+			children: /* @__PURE__ */ h(a, { children: (e) => c.find((t) => t.value === e)?.label ?? e })
+		}), /* @__PURE__ */ h(n, { children: c.map((e) => /* @__PURE__ */ h(r, {
+			value: e.value,
+			children: e.label
+		}, e.value)) })]
+	});
+}
+//#endregion
+export { S as StatsDashboard };
+
+//# sourceMappingURL=stats-dashboard.js.map

package/dist/components/admin/stats-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats-dashboard.js","names":[],"sources":["../../../src/components/admin/stats-dashboard.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ContentKitError } from \"../../client/errors.js\";\nimport type { Period } from \"../../client/discovery.js\";\nimport type { RankedContent } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useFlowClient } from \"../../react/admin.js\";\nimport { useActivity, useTopContents } from \"../../react/stats.js\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"#ckui/ui/select\";\nimport { AdminRoot, LoadFailed, NoAccess, Rows, type AdminFlowProps } from \"./shell.js\";\n\ntype Choice = string | { value: string; label: string };\ntype Metric = \"views\" | \"comments\";\n\nexport interface StatsDashboardProps extends AdminFlowProps {\n  /** Content kinds offered: codes, or codes with labels; the first shows first. */\n  kinds: readonly Choice[];\n  /** A ranked item's link; default its path. */\n  contentHref?: (content: RankedContent) => string | undefined;\n  /** Rows in the ranking. Default 10. */\n  limit?: number;\n}\n\nconst choices = (list: readonly Choice[]) => list.map((c) => (typeof c === \"string\" ? { value: c, label: c } : c));\nconst DAYS = [7, 30, 90] as const;\nconst METRICS: readonly Metric[] = [\"views\", \"comments\"];\nconst PERIODS: readonly Period[] = [\"7d\", \"30d\", \"90d\", \"365d\", \"all\"];\nconst refused = (e?: ContentKitError) => e?.code === \"forbidden\" || e?.code === \"unauthorized\";\n\n/**\n * Content statistics for staff (root:content:view-restricted): a kind's views\n * per day (view sessions, distinct and signed-in viewers) and its content\n * ranked by views or comments over a period. Views need the signal plane;\n * without it the dashboard says so and still ranks by comments.\n */\nexport function StatsDashboard({ client: own, baseUrl, auth, guard, appearance, className, language, messages, ...p }: StatsDashboardProps) {\n  const client = useFlowClient({ client: own, baseUrl, auth });\n  return (\n    <AdminRoot flow=\"stats-dashboard\" appearance={appearance} className={className} language={language} messages={messages} guard={guard}>\n      <Dashboard {...p} client={client} />\n    </AdminRoot>\n  );\n}\n\ntype Inner = Omit<StatsDashboardProps, \"client\" | \"baseUrl\" | \"auth\" | \"guard\" | \"appearance\" | \"className\" | \"language\" | \"messages\"> & { client: ContentKitClient };\n\nfunction Dashboard({ kinds, contentHref, limit = 10, client }: Inner) {\n  const { t } = useMessages();\n  const options = choices(kinds);\n  const [kind, setKind] = useState(options[0]?.value ?? \"\");\n  const [days, setDays] = useState<number>(7);\n  const [metric, setMetric] = useState<Metric>(\"views\");\n  const [period, setPeriod] = useState<Period>(\"30d\");\n  const activity = useActivity(kind ? { kind, days } : null, { client });\n  const top = useTopContents(kind ? { kind, metric, period, limit } : null, { client });\n  if (refused(activity.error) || refused(top.error)) return <NoAccess>{t(\"stats.noAccess\")}</NoAccess>;\n  const rows = activity.data?.days ?? [];\n  const most = Math.max(1, ...rows.map((d) => d.views));\n  const total = rows.reduce((n, d) => n + d.views, 0);\n  return (\n    <>\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <h2 className=\"text-base font-semibold\">{t(\"stats.title\")}</h2>\n        {options.length > 1 && (\n          <Pick label={t(\"stats.kind\")} value={kind} onChange={setKind} options={options} />\n        )}\n      </div>\n\n      <section className=\"grid gap-3\" data-ckui=\"stats-activity\">\n        <div className=\"flex flex-wrap items-center justify-between gap-2\">\n          <h3 className=\"font-medium\">{t(\"stats.activity\")}</h3>\n          <Pick label={t(\"stats.days\")} value={String(days)} onChange={(v) => setDays(Number(v))} options={DAYS.map((d) => ({ value: String(d), label: t(\"stats.lastDays\", { count: d }) }))} />\n        </div>\n        {activity.unavailable ? (\n          <p className=\"text-muted-foreground\" role=\"status\">\n            {t(\"stats.unavailable\")}\n          </p>\n        ) : activity.error ? (\n          <LoadFailed error={activity.error} message={t(\"stats.loadFailed\")} retry={activity.reload} />\n        ) : activity.loading && !activity.data ? (\n          <Rows count={2} />\n        ) : !rows.length ? (\n          <p className=\"text-muted-foreground\">{t(\"stats.noActivity\")}</p>\n        ) : (\n          <table className=\"w-full text-left tabular-nums\" aria-busy={activity.loading}>\n            <thead className=\"text-xs text-muted-foreground\">\n              <tr>\n                <th className=\"py-1 font-medium\">{t(\"stats.date\")}</th>\n                <th className=\"py-1 font-medium\">{t(\"stats.views\")}</th>\n                <th className=\"py-1 text-end font-medium\">{t(\"stats.viewers\")}</th>\n                <th className=\"py-1 text-end font-medium\">{t(\"stats.users\")}</th>\n              </tr>\n            </thead>\n            <tbody>\n              {rows.map((d) => (\n                <tr key={d.date} className=\"border-t border-border\" data-ckui=\"stats-day\">\n                  <td className=\"py-1.5 pe-3 whitespace-nowrap\">{d.date}</td>\n                  <td className=\"w-1/2 py-1.5 pe-3\">\n                    <span className=\"flex items-center gap-2\">\n                      <span aria-hidden className=\"h-2 rounded-full bg-primary\" style={{ width: `${Math.max(2, (d.views / most) * 100)}%` }} />\n                      {d.views}\n                    </span>\n                  </td>\n                  <td className=\"py-1.5 text-end\">{d.viewers}</td>\n                  <td className=\"py-1.5 text-end\">{d.users}</td>\n                </tr>\n              ))}\n            </tbody>\n            <tfoot>\n              <tr className=\"border-t border-border font-medium\">\n                <td className=\"py-1.5\">{t(\"stats.total\")}</td>\n                <td className=\"py-1.5\" data-ckui=\"stats-total\">\n                  {total}\n                </td>\n                <td />\n                <td />\n              </tr>\n            </tfoot>\n          </table>\n        )}\n      </section>\n\n      <section className=\"grid gap-3\" data-ckui=\"stats-top\">\n        <div className=\"flex flex-wrap items-center justify-between gap-2\">\n          <h3 className=\"font-medium\">{t(\"stats.top\")}</h3>\n          <div className=\"flex flex-wrap gap-2\">\n            <Pick label={t(\"stats.metric\")} value={metric} onChange={(v) => setMetric(v as Metric)} options={METRICS.map((x) => ({ value: x, label: t(`stats.metric_${x}`) }))} />\n            <Pick label={t(\"stats.period\")} value={period} onChange={(v) => setPeriod(v as Period)} options={PERIODS.map((x) => ({ value: x, label: t(`stats.period_${x}`) }))} />\n          </div>\n        </div>\n        {top.unavailable ? (\n          <p className=\"text-muted-foreground\" role=\"status\">\n            {t(\"stats.unavailable\")}\n          </p>\n        ) : top.error ? (\n          <LoadFailed error={top.error} message={t(\"stats.loadFailed\")} retry={top.reload} />\n        ) : top.loading && !top.data ? (\n          <Rows count={3} />\n        ) : !top.data?.contents.length ? (\n          <p className=\"text-muted-foreground\">{t(\"stats.noTop\")}</p>\n        ) : (\n          <ol className=\"grid divide-y divide-border rounded-lg border border-border\" aria-busy={top.loading}>\n            {top.data.contents.map((c, i) => {\n              const href = contentHref ? contentHref(c) : c.path;\n              return (\n                <li key={c.id} className=\"flex items-center gap-3 p-2.5\" data-ckui=\"stats-ranked\">\n                  <span className=\"w-6 text-end text-muted-foreground tabular-nums\">{i + 1}</span>\n                  {href ? (\n                    <a className=\"min-w-0 flex-1 break-words hover:underline\" href={href}>\n                      {c.title}\n                    </a>\n                  ) : (\n                    <span className=\"min-w-0 flex-1 break-words\">{c.title}</span>\n                  )}\n                  <span className=\"tabular-nums\" data-ckui=\"stats-value\">\n                    {c.value}\n                  </span>\n                </li>\n              );\n            })}\n          </ol>\n        )}\n      </section>\n    </>\n  );\n}\n\nfunction Pick({ label, value, onChange, options }: { label: string; value: string; onChange: (v: string) => void; options: { value: string; label: string }[] }) {\n  return (\n    <Select value={value} onValueChange={(v) => onChange(String(v))}>\n      <SelectTrigger size=\"sm\" aria-label={label}>\n        <SelectValue>{(v: string) => options.find((o) => o.value === v)?.label ?? v}</SelectValue>\n      </SelectTrigger>\n      <SelectContent>\n        {options.map((o) => (\n          <SelectItem key={o.value} value={o.value}>\n            {o.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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"}

package/dist/components/content/card.js

@@ -1,9 +1,9 @@
 import { RenditionImg as e } from "../rendition-img.js";
-import { useMessages as t } from "../../i18n/context.js";
-import { ContentKitContext as n } from "../../react/context.js";
-import { Badge as r } from "../../ui/badge.js";
-import { RelativeTime as i, formatDate as a } from "../social/parts.js";
-import { GroupAvatar as o, GroupLink as s, labelOf as c, useLanguageName as l } from "../groups/parts.js";
+import { useLanguageName as t, useMessages as n } from "../../i18n/context.js";
+import { ContentKitContext as r } from "../../react/context.js";
+import { Badge as i } from "../../ui/badge.js";
+import { RelativeTime as a, formatDate as o } from "../social/parts.js";
+import { GroupAvatar as s, GroupLink as c, labelOf as l } from "../groups/parts.js";
 import { priceLabel as u } from "./paywall.js";
 import { useCallback as d, useContext as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
@@ -19,33 +19,33 @@ function x(e, t, n = [], r) {
 	if (t.allowed) return null;
 	if (t.unknown) return e.t("contents.unknownAccess");
 	let i = t.offers?.[0];
-	if (i) return u(e, i.terms);
+	if (i) return i.target.kind === "group" && Number(i.terms.amount) === 0 ? e.t("contents.joinFree") : u(e, i.terms);
 	let a = t.sell?.find((e) => n.includes(e));
-	return a ? c(r, a) : t.sell?.some((e) => e.includes(":group:")) ? e.t("contents.members") : t.sell?.length ? e.t("contents.forSale") : e.t("contents.locked");
+	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) {
-	let r = f(n)?.navigate;
-	return d((n) => {
-		t?.(), !(!r || !e || n.defaultPrevented || n.button !== 0 || n.metaKey || n.ctrlKey || n.shiftKey || n.altKey) && (n.preventDefault(), r(e));
+	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));
 	}, [
-		r,
+		n,
 		e,
 		t
 	]);
 }
-function C({ card: n, href: i, onOpen: o, shape: s = "portrait", groupKinds: u, chips: f = 3, tiers: C, labels: E, owner: D = !0, ownerHref: O, children: k, className: A }) {
-	let j = t(), { t: M } = j, N = l(), P = i ? i(n) : n.path, F = S(P, d(() => o?.(n), [o, n])), I = x(j, n.access, C, E), L = n.version, R = n.viewer && n.viewer.progress_max > 0 ? Math.min(1, n.viewer.progress / n.viewer.progress_max) : 0, z = u ?? Object.keys(n.groups), B = L.duration_ms ? Math.round(L.duration_ms / 6e4) : 0, V = [
+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) => c(E, e)),
+		...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 = n.title || n.code;
+	].filter(Boolean), H = r.title || r.code;
 	return /* @__PURE__ */ m("article", {
 		className: h("group/card grid content-start gap-2", A),
 		"data-ckui": "content-card",
-		"data-id": n.id,
+		"data-id": r.id,
 		"data-locked": I ? "" : void 0,
-		lang: n.language || void 0,
+		lang: r.language || void 0,
 		children: [/* @__PURE__ */ m("a", {
 			href: P,
 			onClick: F,
@@ -54,9 +54,9 @@ function C({ card: n, href: i, onOpen: o, shape: s = "portrait", groupKinds: u,
 			"aria-hidden": !0,
 			children: [
 				/* @__PURE__ */ p("div", {
-					className: s === "landscape" ? "aspect-video" : "aspect-[3/4]",
+					className: c === "landscape" ? "aspect-video" : "aspect-[3/4]",
 					children: /* @__PURE__ */ p(e, {
-						outputs: n.cover,
+						outputs: r.cover,
 						alt: "",
 						fit: "cover",
 						skeleton: !0,
@@ -103,27 +103,27 @@ function C({ card: n, href: i, onOpen: o, shape: s = "portrait", groupKinds: u,
 						]
 					})]
 				}),
-				D && n.owner && /* @__PURE__ */ p(w, {
-					group: n.owner,
+				D && r.owner && /* @__PURE__ */ p(w, {
+					group: r.owner,
 					href: O
 				}),
 				V.length > 0 && /* @__PURE__ */ p("p", {
 					className: "text-xs text-muted-foreground",
 					children: V.join(" · ")
 				}),
-				n.viewer?.completed && /* @__PURE__ */ p(r, {
+				r.viewer?.completed && /* @__PURE__ */ p(i, {
 					variant: "secondary",
 					className: "justify-self-start",
 					children: M("contents.completed")
 				}),
-				!n.access.allowed && n.access.free_after && /* @__PURE__ */ p("p", {
+				!r.access.allowed && r.access.free_after && /* @__PURE__ */ p("p", {
 					className: "text-xs text-muted-foreground",
-					children: M("contents.freeFrom", { date: a(j, n.access.free_after, !1) })
+					children: M("contents.freeFrom", { date: o(j, r.access.free_after, !1) })
 				}),
-				z.some((e) => n.groups[e]?.length) && /* @__PURE__ */ p("ul", {
+				z.some((e) => r.groups[e]?.length) && /* @__PURE__ */ p("ul", {
 					className: "flex flex-wrap gap-1",
 					"data-ckui": "card-groups",
-					children: z.flatMap((e) => (n.groups[e] ?? []).slice(0, f).map((t) => /* @__PURE__ */ p("li", {
+					children: z.flatMap((e) => (r.groups[e] ?? []).slice(0, f).map((t) => /* @__PURE__ */ p("li", {
 						"data-kind": e,
 						children: /* @__PURE__ */ p(T, {
 							url: t.path,
@@ -141,14 +141,14 @@ function C({ card: n, href: i, onOpen: o, shape: s = "portrait", groupKinds: u,
 							/* @__PURE__ */ p(y, {
 								icon: g,
 								strokeWidth: 2,
-								className: h("size-3.5", n.viewer?.favorited && "fill-current text-primary"),
+								className: h("size-3.5", r.viewer?.favorited && "fill-current text-primary"),
 								"aria-hidden": !0
 							}),
 							/* @__PURE__ */ p("span", {
 								className: "sr-only",
 								children: M("contents.favorites")
 							}),
-							b(n.counts.favorites, j.language)
+							b(r.counts.favorites, j.language)
 						]
 					}), /* @__PURE__ */ m("span", {
 						className: "inline-flex items-center gap-1",
@@ -164,7 +164,7 @@ function C({ card: n, href: i, onOpen: o, shape: s = "portrait", groupKinds: u,
 								className: "sr-only",
 								children: M("contents.likes")
 							}),
-							b(n.counts.likes, j.language)
+							b(r.counts.likes, j.language)
 						]
 					})]
 				}),
@@ -178,11 +178,11 @@ function w({ group: e, href: t, className: n }) {
 		className: h("flex min-w-0 text-xs text-muted-foreground", n),
 		"data-ckui": "card-owner",
 		"data-id": e.id,
-		children: /* @__PURE__ */ m(s, {
+		children: /* @__PURE__ */ m(c, {
 			group: e,
 			href: t,
 			className: "inline-flex min-w-0 items-center gap-1.5 hover:text-foreground",
-			children: [/* @__PURE__ */ p(o, {
+			children: [/* @__PURE__ */ p(s, {
 				group: e,
 				className: "size-5 shrink-0 text-[0.625rem]"
 			}), /* @__PURE__ */ p("span", {
@@ -204,17 +204,17 @@ function T({ url: e, name: t }) {
 		children: t
 	});
 }
-function E({ card: n, href: r, onOpen: a, tiers: o, labels: s, byline: c, owner: l = !0, ownerHref: u, children: f, className: v }) {
-	let C = t(), T = r ? r(n) : n.path, E = S(T, d(() => a?.(n), [a, n])), D = x(C, n.access, o, s), O = n.title || n.code;
+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;
 	return /* @__PURE__ */ m("article", {
 		className: h("grid gap-3 rounded-lg border border-border p-3", v),
 		"data-ckui": "post-card",
-		"data-id": n.id,
+		"data-id": t.id,
 		"data-locked": D ? "" : void 0,
-		lang: n.language || void 0,
+		lang: t.language || void 0,
 		children: [
-			c ?? (l && n.owner && /* @__PURE__ */ p(w, {
-				group: n.owner,
+			c ?? (l && t.owner && /* @__PURE__ */ p(w, {
+				group: t.owner,
 				href: u,
 				className: "text-sm"
 			})),
@@ -226,10 +226,10 @@ function E({ card: n, href: r, onOpen: a, tiers: o, labels: s, byline: c, owner:
 					className: "font-medium break-words hover:underline",
 					"data-ckui": "card-title",
 					children: O
-				}), n.cover.length > 0 && /* @__PURE__ */ m("span", {
+				}), t.cover.length > 0 && /* @__PURE__ */ m("span", {
 					className: "relative block aspect-video overflow-hidden rounded-md bg-muted",
 					children: [/* @__PURE__ */ p(e, {
-						outputs: n.cover,
+						outputs: t.cover,
 						alt: "",
 						fit: "cover",
 						skeleton: !0,
@@ -252,8 +252,8 @@ function E({ card: n, href: r, onOpen: a, tiers: o, labels: s, byline: c, owner:
 			/* @__PURE__ */ m("p", {
 				className: "flex flex-wrap items-center gap-3 text-xs text-muted-foreground",
 				children: [
-					n.published_at && /* @__PURE__ */ p(i, { at: n.published_at }),
-					!n.cover.length && D && /* @__PURE__ */ p("span", {
+					t.published_at && /* @__PURE__ */ p(a, { at: t.published_at }),
+					!t.cover.length && D && /* @__PURE__ */ p("span", {
 						"data-ckui": "card-lock",
 						children: D
 					}),
@@ -263,14 +263,14 @@ function E({ card: n, href: r, onOpen: a, tiers: o, labels: s, byline: c, owner:
 							/* @__PURE__ */ p(y, {
 								icon: g,
 								strokeWidth: 2,
-								className: h("size-3.5", n.viewer?.favorited && "fill-current text-primary"),
+								className: h("size-3.5", t.viewer?.favorited && "fill-current text-primary"),
 								"aria-hidden": !0
 							}),
 							/* @__PURE__ */ p("span", {
 								className: "sr-only",
 								children: C.t("contents.favorites")
 							}),
-							b(n.counts.favorites, C.language)
+							b(t.counts.favorites, C.language)
 						]
 					})
 				]

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 { 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, useLanguageName, 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 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  /** 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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"}

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

@@ -20,7 +20,8 @@ export declare function versionLabel(v: Version, languageName: (l: string) => st
 /**
  * A content's versions: order, languages, traits, label, state and
  * schedule, an access override and its own offer, segments (chapters) and
- * the version's media folder; add and delete.
+ * the version's media folder; add and delete. A kind whose one version is
+ * hidden shows only that version's segments and media.
  */
 export declare function VersionsEditor({ content, media, ...p }: Common & {
     content: Content;