@openrails/contentkit-ui 0.104.0-rc.1 → 0.104.0-rc.3

package/dist/components/content/card.js

@@ -8,25 +8,64 @@ import { Badge as s } from "../../ui/badge.js";
 import { RelativeTime as c, formatDate as l } from "../social/parts.js";
 import { GroupAvatar as u, GroupLink as d, labelOf as f } from "../groups/parts.js";
 import { priceLabel as p } from "./paywall.js";
-import { useCallback as m, useContext as h, useState as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { cn as y } from "cn";
-import { FavouriteIcon as b, LockIcon as ee, ThumbsUpIcon as x } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as S } from "@hugeicons/react";
+import { Fragment as m, useCallback as h, useContext as g, useLayoutEffect as _, useState as v } from "react";
+import { Fragment as ee, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { cn as x } from "cn";
+import { FavouriteIcon as S, LockIcon as te, SparklesIcon as C, ThumbsUpIcon as ne, Tick02Icon as w } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as T } from "@hugeicons/react";
 //#region src/components/content/card.tsx
-function C({ card: e, decorate: t, aboveTitle: n }) {
+var E = 12096e5;
+function D(e, t = Date.now()) {
+	let n = e.updated_at ? Date.parse(e.updated_at) : NaN, r = e.viewer?.last_read_at ? Date.parse(e.viewer.last_read_at) : NaN;
+	return {
+		updated: Number.isFinite(n) && (Number.isFinite(r) ? n > r : t - n < E),
+		completed: !!e.viewer?.completed,
+		deleted: !!e.deleted,
+		disliked: e.viewer?.reaction === -1
+	};
+}
+function re({ card: e, className: t }) {
+	let { t: n } = r(), i = D(e);
+	if (!i.updated && !i.completed && !i.deleted) return null;
+	let a = "size-4 text-white drop-shadow-[0_0_3px_rgba(0,0,0,0.9)]";
+	return /* @__PURE__ */ b("span", {
+		className: x("pointer-events-none flex items-center gap-1.5", t),
+		"data-ckui": "card-status",
+		children: [
+			i.deleted && /* @__PURE__ */ y("span", {
+				className: "rounded-md bg-background/85 px-1.5 py-0.5 text-xs font-medium text-foreground shadow-sm",
+				children: n("contents.deleted")
+			}),
+			i.updated && /* @__PURE__ */ y(T, {
+				icon: C,
+				strokeWidth: 2,
+				className: a,
+				role: "img",
+				"aria-label": n("contents.updated")
+			}),
+			i.completed && /* @__PURE__ */ y(T, {
+				icon: w,
+				strokeWidth: 2.5,
+				className: a,
+				role: "img",
+				"aria-label": n("contents.completed")
+			})
+		]
+	});
+}
+function ie({ card: e, decorate: t, aboveTitle: n }) {
 	let r = t?.(e);
-	return r == null || r === !1 ? null : /* @__PURE__ */ _("span", {
-		className: y("pointer-events-none absolute inset-0", n && "z-20"),
+	return r == null || r === !1 ? null : /* @__PURE__ */ y("span", {
+		className: x("pointer-events-none absolute inset-0", n && "z-20"),
 		"data-ckui": "card-decorations",
 		children: r
 	});
 }
-var w = (e, t) => new Intl.NumberFormat(t, {
+var O = (e, t) => new Intl.NumberFormat(t, {
 	notation: "compact",
 	maximumFractionDigits: 1
 }).format(e);
-function T(e, t, n = [], r) {
+function k(e, t, n = [], r) {
 	if (t.allowed) return null;
 	if (t.unknown) return e.t("contents.unknownAccess");
 	let i = t.offers?.[0];
@@ -34,9 +73,9 @@ function T(e, t, n = [], r) {
 	let a = t.sell?.find((e) => n.includes(e));
 	return a ? f(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 E(e, t) {
-	let n = h(i)?.navigate;
-	return m((r) => {
+function A(e, t) {
+	let n = g(i)?.navigate;
+	return h((r) => {
 		t?.(), !(!n || !e || r.defaultPrevented || r.button !== 0 || r.metaKey || r.ctrlKey || r.shiftKey || r.altKey) && (r.preventDefault(), n(e));
 	}, [
 		n,
@@ -44,321 +83,448 @@ function E(e, t) {
 		t
 	]);
 }
-function D({ card: i, client: c, href: u, onOpen: d, shape: p = "portrait", aspectRatio: h, titlePosition: D = "below", loadMedia: A = !0, groupKinds: j, chips: te = 3, filterEntity: M, entityStyle: N = "chips", entityLayout: ne = "inline", metadata: P, showCounts: re = !0, tiers: ie, labels: F, owner: ae = !0, ownerHref: oe, decorate: se, children: ce, className: le }) {
-	let I = r(), { presets: ue } = a({ client: c }), L = h ?? t(ue.find((e) => e.kind === i.kind && e.name === "cover")?.aspect), { t: R } = I, de = n(), z = u ? u(i) : i.path, B = E(z, m(() => d?.(i), [d, i])), V = T(I, i.access, ie, F), H = i.version, U = i.viewer?.completed ? 1 : i.viewer && i.viewer.progress_max > 0 ? Math.min(1, i.viewer.progress / i.viewer.progress_max) : 0, W = (j ?? Object.keys(i.entities)).map((e) => ({
-		kind: e,
-		entities: (i.entities[e] ?? []).filter((t) => !M || M(t, e)).slice(0, te)
-	})).filter(({ entities: e }) => e.length > 0), G = H.duration_ms ? Math.round(H.duration_ms / 6e4) : 0, K = P?.traits, q = K === !1 ? [] : Array.isArray(K) ? H.traits.filter((e) => K.includes(e)) : H.traits, J = [
-		...P?.languages === !1 ? [] : H.languages.map(de),
-		P?.pages !== !1 && H.pages ? I.plural("contents.pages", H.pages) : null,
-		P?.duration !== !1 && G ? I.plural("contents.minutes", G) : null
-	].filter(Boolean), Y = i.title || i.code, X = y("flex flex-wrap", N === "text" ? "gap-x-2 gap-y-1" : "gap-1"), Z = (e, t) => t.map((t) => /* @__PURE__ */ _("li", {
+function ae(e, t, n) {
+	let [r, i] = v(null);
+	return _(() => {
+		if (!e) return;
+		let n = e.ownerDocument.defaultView, r = () => {
+			let r = Number.parseFloat(n?.getComputedStyle(e).columnGap ?? "") || 0, a = [...e.children], o = a.find((e) => e.dataset.ckui === "card-chip-more")?.offsetWidth ?? 0, s = 0, c = 0, l = 0, u = -1, d = a.filter((e) => e.dataset.ckui !== "card-chip-more");
+			for (let [i, a] of d.entries()) {
+				if (n?.getComputedStyle(a).display === "none") continue;
+				u < 0 && (u = i);
+				let d = s + (l > 0 ? r : 0) + a.offsetWidth;
+				if (d + (t > l + 1 && o > 0 ? r + o : 0) > e.clientWidth) break;
+				s = d, c = i + 1, l += 1;
+			}
+			let f = l === 0 && u >= 0;
+			f && ([c, l] = [u + 1, 1]), i((e) => e?.through === c && e.fitted === l && e.squeezed === f ? e : {
+				through: c,
+				fitted: l,
+				squeezed: f
+			});
+		};
+		r();
+		let a = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(r);
+		a?.observe(e);
+		for (let t of e.children) a?.observe(t);
+		return () => a?.disconnect();
+	}, [
+		e,
+		t,
+		n
+	]), r;
+}
+function j({ card: i, client: c, href: u, onOpen: d, shape: p = "portrait", aspectRatio: g, titlePosition: _ = "below", loadMedia: C = !0, groupKinds: w, chips: E = 3, chipOverflow: j = !1, chipFit: se = !1, filterEntity: P, entityStyle: F = "chips", entityLayout: ce = "inline", metadata: I, showCounts: le = !0, tiers: ue, labels: L, owner: de = !0, ownerHref: fe, decorate: pe, status: me = !0, dimDisliked: he = !0, children: ge, className: _e }) {
+	let R = r(), { presets: ve } = a({ client: c }), z = g ?? t(ve.find((e) => e.kind === i.kind && e.name === "cover")?.aspect), { t: B } = R, ye = n(), V = u ? u(i) : i.path, be = A(V, h(() => d?.(i), [d, i])), H = k(R, i.access, ue, L), xe = D(i), U = he && xe.disliked, W = i.version, Se = i.viewer?.completed ? 1 : i.viewer && i.viewer.progress_max > 0 ? Math.min(1, i.viewer.progress / i.viewer.progress_max) : 0, Ce = w ?? Object.keys(i.entities), G = typeof E == "number" ? {
+		base: E,
+		lg: E
+	} : E, K = Ce.map((e) => {
+		let t = (i.entities[e] ?? []).filter((t) => !P || P(t, e));
+		return {
+			kind: e,
+			entities: t.slice(0, Math.max(G.base, G.lg)),
+			total: t.length
+		};
+	}).filter(({ entities: e }) => e.length > 0), we = W.duration_ms ? Math.round(W.duration_ms / 6e4) : 0, q = I?.traits, Te = q === !1 ? [] : Array.isArray(q) ? W.traits.filter((e) => q.includes(e)) : W.traits, J = I?.groups?.map((e) => (i.entities[e] ?? []).find((t) => !P || P(t, e))).find(Boolean), Ee = [
+		...I?.languages === !1 ? [] : W.languages.map(ye),
+		I?.pages !== !1 && W.pages ? R.plural("contents.pages", W.pages) : null,
+		I?.duration !== !1 && we ? R.plural("contents.minutes", we) : null,
+		J ? /* @__PURE__ */ y(oe, {
+			url: J.path,
+			name: J.name || J.slug
+		}, "group") : null
+	].filter(Boolean), De = i.title || i.code, Y = x("flex flex-wrap", F === "text" ? "gap-x-2 gap-y-1" : "gap-1"), Oe = (e) => e < G.base && e < G.lg ? void 0 : e < G.base ? "lg:hidden" : "hidden lg:list-item", ke = (e, t) => {
+		if (!j) return [];
+		let n = t - Math.min(t, G.base), r = t - Math.min(t, G.lg), i = (t, n) => /* @__PURE__ */ b("li", {
+			"data-kind": e,
+			"data-ckui": "card-chip-more",
+			className: n,
+			children: [/* @__PURE__ */ y("span", {
+				"aria-hidden": !0,
+				children: /* @__PURE__ */ y(N, {
+					name: `+${t}`,
+					variant: F
+				})
+			}), /* @__PURE__ */ y("span", {
+				className: "sr-only",
+				children: R.plural("contents.moreChips", t)
+			})]
+		}, `${e}:more:${n ?? ""}`);
+		return n === r ? n > 0 ? [i(n)] : [] : [n > 0 && i(n, "lg:hidden"), r > 0 && i(r, "hidden lg:list-item")].filter(Boolean);
+	}, Ae = (e, t, n) => [...t.map((t, n) => /* @__PURE__ */ y("li", {
 		"data-kind": e,
-		children: /* @__PURE__ */ _(k, {
+		className: Oe(n),
+		children: /* @__PURE__ */ y(N, {
 			url: t.path,
 			name: t.name || t.slug,
-			variant: N
+			variant: F
 		})
-	}, `${e}:${t.id}`)), Q = W.length > 0 ? ne === "rows" ? /* @__PURE__ */ _("div", {
+	}, `${e}:${t.id}`)), ...ke(e, n)], [je, Me] = v(null), X = se && ce === "inline", Z = K.reduce((e, t) => e + t.total, 0), Ne = `${F}:${G.base}:${G.lg}:${K.map(({ kind: e, entities: t }) => `${e}=${t.map((e) => e.id).join(",")}`).join(";")}`, Q = ae(X ? je : null, Z, Ne), Pe = K.length > 0 ? ce === "rows" ? /* @__PURE__ */ y("div", {
 		className: "grid gap-1",
 		"data-ckui": "card-groups",
 		"data-layout": "rows",
-		children: W.map(({ kind: e, entities: t }) => /* @__PURE__ */ _("ul", {
-			className: X,
-			"aria-label": f(F, e),
+		children: K.map(({ kind: e, entities: t, total: n }) => /* @__PURE__ */ y("ul", {
+			className: Y,
+			"aria-label": f(L, e),
 			"data-ckui": "card-group-row",
 			"data-kind": e,
-			children: Z(e, t)
+			children: Ae(e, t, n)
 		}, e))
-	}) : /* @__PURE__ */ _("ul", {
-		className: X,
+	}) : /* @__PURE__ */ y("ul", {
+		ref: Me,
+		className: X ? x("relative flex flex-nowrap overflow-hidden", F === "text" ? "gap-x-2" : "gap-1") : Y,
 		"data-ckui": "card-groups",
 		"data-layout": "inline",
-		children: W.flatMap(({ kind: e, entities: t }) => Z(e, t))
-	}) : null, $ = /* @__PURE__ */ v("a", {
-		href: z,
-		onClick: B,
-		className: y("text-lg leading-snug font-medium break-words focus-visible:underline sm:text-xl", D === "cover" ? "absolute inset-x-0 bottom-0 z-10 bg-linear-to-t from-black/90 via-black/60 to-transparent px-3 pt-10 pb-3 text-white hover:underline" : "hover:underline"),
-		"data-ckui": "card-title",
-		children: [/* @__PURE__ */ _("span", {
-			className: "line-clamp-2",
-			children: Y
-		}), V && /* @__PURE__ */ v("span", {
+		"data-fit": X ? "" : void 0,
+		children: X ? (() => {
+			let e = 0, t = K.flatMap(({ kind: t, entities: n }) => n.map((n, r) => {
+				let i = e++, a = Q !== null && i >= Q.through, o = Q?.squeezed && i === Q.through - 1;
+				return /* @__PURE__ */ y("li", {
+					"data-kind": t,
+					className: x(o ? "min-w-0 shrink [&>*]:block [&>*]:truncate" : "shrink-0", Oe(r), a && "pointer-events-none invisible absolute"),
+					"aria-hidden": a || void 0,
+					children: /* @__PURE__ */ y(N, {
+						url: n.path,
+						name: n.name || n.slug,
+						variant: F
+					})
+				}, `${t}:${n.id}`);
+			}));
+			if (!j) return t;
+			let n = Q === null ? Z : Z - Q.fitted, r = Q === null || n <= 0;
+			return [...t, /* @__PURE__ */ b("li", {
+				"data-ckui": "card-chip-more",
+				className: x("shrink-0", r && "pointer-events-none invisible absolute"),
+				"aria-hidden": r || void 0,
+				children: [/* @__PURE__ */ y("span", {
+					"aria-hidden": !0,
+					children: /* @__PURE__ */ y(N, {
+						name: `+${n}`,
+						variant: F
+					})
+				}), /* @__PURE__ */ y("span", {
+					className: "sr-only",
+					children: R.plural("contents.moreChips", n)
+				})]
+			}, "more")];
+		})() : K.flatMap(({ kind: e, entities: t, total: n }) => Ae(e, t, n))
+	}) : null, Fe = Ee.length > 0 && /* @__PURE__ */ y("p", {
+		className: "line-clamp-2 text-xs break-words text-muted-foreground",
+		"data-ckui": "card-meta",
+		children: Ee.map((e, t) => /* @__PURE__ */ b(m, { children: [t > 0 && /* @__PURE__ */ b(ee, { children: [/* @__PURE__ */ y("span", {
 			className: "sr-only",
-			children: [
-				" (",
-				V,
-				")"
-			]
-		})]
-	}), [fe, pe] = g(null);
-	return /* @__PURE__ */ v("article", {
-		ref: pe,
-		className: y("group/card relative grid content-start gap-2", le),
+			children: " · "
+		}), /* @__PURE__ */ y("span", {
+			className: "mx-1.5 mb-px inline-block size-[3px] rounded-full bg-current align-middle",
+			"aria-hidden": !0,
+			"data-ckui": "card-meta-dot"
+		})] }), e] }, t))
+	}), $ = /* @__PURE__ */ b("a", {
+		href: V,
+		onClick: be,
+		className: x("text-lg leading-snug font-medium break-words focus-visible:underline sm:text-xl", _ === "cover" ? "absolute inset-x-0 bottom-0 z-10 bg-linear-to-t from-black/90 via-black/60 to-transparent px-3 pt-10 pb-3 text-white hover:underline" : "hover:underline"),
+		"data-ckui": "card-title",
+		children: [
+			/* @__PURE__ */ y("span", {
+				className: "line-clamp-2",
+				children: De
+			}),
+			H && /* @__PURE__ */ b("span", {
+				className: "sr-only",
+				children: [
+					" (",
+					H,
+					")"
+				]
+			}),
+			U && /* @__PURE__ */ b("span", {
+				className: "sr-only",
+				children: [
+					" (",
+					B("contents.disliked"),
+					")"
+				]
+			})
+		]
+	}), [Ie, Le] = v(null);
+	return /* @__PURE__ */ b("article", {
+		ref: Le,
+		className: x("group/card relative grid content-start gap-2", _e),
 		"data-ckui": "content-card",
 		"data-id": i.id,
-		"data-locked": V ? "" : void 0,
+		"data-locked": H ? "" : void 0,
 		lang: i.language || void 0,
-		children: [/* @__PURE__ */ v("div", {
+		children: [/* @__PURE__ */ b("div", {
 			className: "relative overflow-hidden rounded-lg",
 			"data-ckui": "card-cover",
 			children: [
-				/* @__PURE__ */ v("a", {
-					href: z,
-					onClick: B,
+				/* @__PURE__ */ b("a", {
+					href: V,
+					onClick: be,
 					className: "relative block overflow-hidden rounded-lg bg-muted",
 					tabIndex: -1,
 					"aria-hidden": !0,
 					children: [
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ y("div", {
 							"data-ckui": "card-cover-frame",
-							className: L === void 0 ? p === "landscape" ? "aspect-video" : "aspect-[3/4]" : void 0,
-							style: L === void 0 ? void 0 : { aspectRatio: L },
-							children: A ? /* @__PURE__ */ _(e, {
+							"data-disliked": U || void 0,
+							className: x(z === void 0 && (p === "landscape" ? "aspect-video" : "aspect-[3/4]"), "transition-[opacity,filter]", U && "opacity-50 brightness-75", xe.deleted && "opacity-60 grayscale"),
+							style: z === void 0 ? void 0 : { aspectRatio: z },
+							children: C ? /* @__PURE__ */ y(e, {
 								outputs: i.cover,
 								alt: "",
 								fit: "cover",
 								skeleton: !0,
 								loading: "lazy",
 								className: "size-full transition-transform group-hover/card:scale-[1.02]",
-								fallback: /* @__PURE__ */ _("span", {
+								fallback: /* @__PURE__ */ y("span", {
 									className: "grid size-full place-items-center text-2xl font-semibold text-muted-foreground",
-									children: Y.charAt(0).toUpperCase()
+									children: De.charAt(0).toUpperCase()
 								})
-							}) : /* @__PURE__ */ _("span", {
+							}) : /* @__PURE__ */ y("span", {
 								className: "block size-full bg-muted",
 								"aria-hidden": !0
 							})
 						}),
-						A && H.hls && /* @__PURE__ */ _(o, {
+						C && W.hls && /* @__PURE__ */ y(o, {
 							item: {
 								kind: i.kind,
 								id: i.id,
-								version: H.id
+								version: W.id
 							},
-							dir: H.hls,
-							duration: H.duration_ms ? H.duration_ms / 1e3 : void 0,
-							target: fe
+							dir: W.hls,
+							duration: W.duration_ms ? W.duration_ms / 1e3 : void 0,
+							target: Ie
 						}),
-						V && /* @__PURE__ */ v("span", {
+						H && /* @__PURE__ */ b("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__ */ _(S, {
-								icon: ee,
+							children: [/* @__PURE__ */ y(T, {
+								icon: te,
 								strokeWidth: 2,
 								className: "size-3.5",
 								"aria-hidden": !0
-							}), V]
+							}), H]
 						}),
-						U > 0 && /* @__PURE__ */ _("span", {
-							className: y("absolute inset-x-0 bottom-0 h-1 bg-background/60", D === "cover" && "z-20"),
+						Se > 0 && /* @__PURE__ */ y("span", {
+							className: x("absolute inset-x-0 bottom-0 h-1 bg-background/60", _ === "cover" && "z-20"),
 							"data-ckui": "card-progress",
-							children: /* @__PURE__ */ _("span", {
+							children: /* @__PURE__ */ y("span", {
 								className: "block h-full bg-primary",
-								style: { width: `${Math.round(U * 100)}%` }
+								style: { width: `${Math.round(Se * 100)}%` }
 							})
 						})
 					]
 				}),
-				D === "cover" && $,
-				A && /* @__PURE__ */ _(C, {
+				_ === "cover" && $,
+				me && /* @__PURE__ */ y(re, {
 					card: i,
-					decorate: se,
-					aboveTitle: D === "cover"
+					className: x("absolute right-2 z-20", _ === "cover" ? "top-2" : "bottom-2.5")
+				}),
+				C && /* @__PURE__ */ y(ie, {
+					card: i,
+					decorate: pe,
+					aboveTitle: _ === "cover"
 				})
 			]
-		}), /* @__PURE__ */ v("div", {
+		}), /* @__PURE__ */ b("div", {
 			className: "grid gap-1",
 			children: [
-				D === "below" && $,
-				N === "text" && Q,
-				ae && i.owner && /* @__PURE__ */ _(O, {
+				_ === "below" && $,
+				F === "text" && Pe,
+				de && i.owner && /* @__PURE__ */ y(M, {
 					group: i.owner,
-					href: oe,
-					loadMedia: A
+					href: fe,
+					loadMedia: C
 				}),
-				q.length > 0 && /* @__PURE__ */ _("div", {
+				Te.length > 0 && /* @__PURE__ */ y("div", {
 					className: "flex flex-wrap gap-1",
 					"data-ckui": "card-traits",
-					children: q.map((e) => /* @__PURE__ */ _(s, {
+					children: Te.map((e) => /* @__PURE__ */ y(s, {
 						variant: "outline",
 						className: "h-auto rounded-md text-sm text-muted-foreground",
 						"data-ckui": "card-trait",
 						"data-trait": e,
-						children: f(F, e)
+						children: f(L, e)
 					}, e))
 				}),
-				J.length > 0 && /* @__PURE__ */ _("p", {
+				Fe,
+				!i.access.allowed && i.access.free_after && /* @__PURE__ */ y("p", {
 					className: "text-xs text-muted-foreground",
-					children: J.join(" · ")
+					children: B("contents.freeFrom", { date: l(R, i.access.free_after, !1) })
 				}),
-				!i.access.allowed && i.access.free_after && /* @__PURE__ */ _("p", {
-					className: "text-xs text-muted-foreground",
-					children: R("contents.freeFrom", { date: l(I, i.access.free_after, !1) })
-				}),
-				N === "chips" && Q,
-				re && (i.counts.favorites !== void 0 || i.counts.likes !== void 0) && /* @__PURE__ */ v("p", {
+				F === "chips" && Pe,
+				le && (i.counts.favorites !== void 0 || i.counts.likes !== void 0) && /* @__PURE__ */ b("p", {
 					className: "flex items-center gap-3 text-xs text-muted-foreground tabular-nums",
 					"data-ckui": "card-counts",
-					children: [i.counts.favorites !== void 0 && /* @__PURE__ */ v("span", {
+					children: [i.counts.favorites !== void 0 && /* @__PURE__ */ b("span", {
 						className: "inline-flex items-center gap-1",
-						title: R("contents.favorites"),
+						title: B("contents.favorites"),
 						children: [
-							/* @__PURE__ */ _(S, {
-								icon: b,
+							/* @__PURE__ */ y(T, {
+								icon: S,
 								strokeWidth: 2,
-								className: y("size-3.5", i.viewer?.favorited && "fill-current text-primary"),
+								className: x("size-3.5", i.viewer?.favorited && "fill-current text-primary"),
 								"aria-hidden": !0
 							}),
-							/* @__PURE__ */ _("span", {
+							/* @__PURE__ */ y("span", {
 								className: "sr-only",
-								children: R("contents.favorites")
+								children: B("contents.favorites")
 							}),
-							w(i.counts.favorites, I.language)
+							O(i.counts.favorites, R.language)
 						]
-					}), i.counts.likes !== void 0 && /* @__PURE__ */ v("span", {
+					}), i.counts.likes !== void 0 && /* @__PURE__ */ b("span", {
 						className: "inline-flex items-center gap-1",
-						title: R("contents.likes"),
+						title: B("contents.likes"),
 						children: [
-							/* @__PURE__ */ _(S, {
-								icon: x,
+							/* @__PURE__ */ y(T, {
+								icon: ne,
 								strokeWidth: 2,
 								className: "size-3.5",
 								"aria-hidden": !0
 							}),
-							/* @__PURE__ */ _("span", {
+							/* @__PURE__ */ y("span", {
 								className: "sr-only",
-								children: R("contents.likes")
+								children: B("contents.likes")
 							}),
-							w(i.counts.likes, I.language)
+							O(i.counts.likes, R.language)
 						]
 					})]
 				}),
-				ce
+				ge
 			]
 		})]
 	});
 }
-function O({ group: e, href: t, className: n, loadMedia: r = !0 }) {
-	return /* @__PURE__ */ _("span", {
-		className: y("flex min-w-0 text-xs text-muted-foreground", n),
+function M({ group: e, href: t, className: n, loadMedia: r = !0 }) {
+	return /* @__PURE__ */ y("span", {
+		className: x("flex min-w-0 text-xs text-muted-foreground", n),
 		"data-ckui": "card-owner",
 		"data-id": e.id,
-		children: /* @__PURE__ */ v(d, {
+		children: /* @__PURE__ */ b(d, {
 			group: e,
 			href: t,
 			className: "inline-flex min-w-0 items-center gap-1.5 hover:text-foreground",
-			children: [r ? /* @__PURE__ */ _(u, {
+			children: [r ? /* @__PURE__ */ y(u, {
 				group: e,
 				className: "size-5 shrink-0 text-[0.625rem]"
-			}) : /* @__PURE__ */ _("span", {
+			}) : /* @__PURE__ */ y("span", {
 				className: "size-5 shrink-0 rounded-full bg-muted",
 				"aria-hidden": !0
-			}), /* @__PURE__ */ _("span", {
+			}), /* @__PURE__ */ y("span", {
 				className: "truncate",
 				children: e.name || e.slug
 			})]
 		})
 	});
 }
-function k({ url: e, name: t, variant: n = "chips" }) {
-	let r = E(e), i = n === "text" ? "text-sm text-muted-foreground" : "inline-block rounded-md border border-border px-1.5 py-0.5 text-sm text-muted-foreground";
-	return e ? /* @__PURE__ */ _("a", {
+function oe({ url: e, name: t }) {
+	let n = A(e);
+	return e ? /* @__PURE__ */ y("a", {
+		href: e,
+		onClick: n,
+		className: "hover:text-foreground hover:underline",
+		children: t
+	}) : /* @__PURE__ */ y("span", { children: t });
+}
+function N({ url: e, name: t, variant: n = "chips" }) {
+	let r = A(e), i = n === "text" ? "text-sm text-muted-foreground" : "inline-block rounded-md border border-border px-1.5 py-0.5 text-sm text-muted-foreground";
+	return e ? /* @__PURE__ */ y("a", {
 		href: e,
 		onClick: r,
-		className: y(i, "hover:text-foreground", n === "text" ? "hover:underline" : "hover:bg-muted"),
+		className: x(i, "hover:text-foreground", n === "text" ? "hover:underline" : "hover:bg-muted"),
 		children: t
-	}) : /* @__PURE__ */ _("span", {
+	}) : /* @__PURE__ */ y("span", {
 		className: i,
 		children: t
 	});
 }
-function A({ card: t, href: n, onOpen: i, tiers: a, labels: o, byline: s, owner: l = !0, ownerHref: u, loadMedia: d = !0, showCounts: f = !0, decorate: p, children: h, className: g }) {
-	let x = r(), D = n ? n(t) : t.path, k = E(D, m(() => i?.(t), [i, t])), A = T(x, t.access, a, o), j = t.title || t.code;
-	return /* @__PURE__ */ v("article", {
-		className: y("relative grid gap-3 rounded-lg border border-border p-3", g),
+function se({ card: t, href: n, onOpen: i, tiers: a, labels: o, byline: s, owner: l = !0, ownerHref: u, loadMedia: d = !0, showCounts: f = !0, decorate: p, children: m, className: g }) {
+	let _ = r(), v = n ? n(t) : t.path, ee = A(v, h(() => i?.(t), [i, t])), C = k(_, t.access, a, o), ne = t.title || t.code;
+	return /* @__PURE__ */ b("article", {
+		className: x("relative grid gap-3 rounded-lg border border-border p-3", g),
 		"data-ckui": "post-card",
 		"data-id": t.id,
-		"data-locked": A ? "" : void 0,
+		"data-locked": C ? "" : void 0,
 		lang: t.language || void 0,
 		children: [
-			s ?? (l && t.owner && /* @__PURE__ */ _(O, {
+			s ?? (l && t.owner && /* @__PURE__ */ y(M, {
 				group: t.owner,
 				href: u,
 				loadMedia: d,
 				className: "text-sm"
 			})),
-			/* @__PURE__ */ v("a", {
-				href: D,
-				onClick: k,
+			/* @__PURE__ */ b("a", {
+				href: v,
+				onClick: ee,
 				className: "grid gap-2",
-				children: [/* @__PURE__ */ _("span", {
+				children: [/* @__PURE__ */ y("span", {
 					className: "font-medium break-words hover:underline",
 					"data-ckui": "card-title",
-					children: j
-				}), t.cover.length > 0 && /* @__PURE__ */ v("span", {
+					children: ne
+				}), t.cover.length > 0 && /* @__PURE__ */ b("span", {
 					className: "relative block aspect-video overflow-hidden rounded-md bg-muted",
 					children: [
-						d && /* @__PURE__ */ _(e, {
+						d && /* @__PURE__ */ y(e, {
 							outputs: t.cover,
 							alt: "",
 							fit: "cover",
 							skeleton: !0,
 							loading: "lazy",
-							className: y("size-full", A && "blur-md")
+							className: x("size-full", C && "blur-md")
 						}),
-						d && /* @__PURE__ */ _(C, {
+						d && /* @__PURE__ */ y(ie, {
 							card: t,
 							decorate: p
 						}),
-						A && /* @__PURE__ */ _("span", {
+						C && /* @__PURE__ */ y("span", {
 							className: "absolute inset-0 grid place-items-center",
-							children: /* @__PURE__ */ v("span", {
+							children: /* @__PURE__ */ b("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__ */ _(S, {
-									icon: ee,
+								children: [/* @__PURE__ */ y(T, {
+									icon: te,
 									strokeWidth: 2,
 									className: "size-3.5",
 									"aria-hidden": !0
-								}), A]
+								}), C]
 							})
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ v("p", {
+			/* @__PURE__ */ b("p", {
 				className: "flex flex-wrap items-center gap-3 text-xs text-muted-foreground",
 				children: [
-					t.published_at && /* @__PURE__ */ _(c, { at: t.published_at }),
-					!t.cover.length && A && /* @__PURE__ */ _("span", {
+					t.published_at && /* @__PURE__ */ y(c, { at: t.published_at }),
+					!t.cover.length && C && /* @__PURE__ */ y("span", {
 						"data-ckui": "card-lock",
-						children: A
+						children: C
 					}),
-					f && t.counts.favorites !== void 0 && /* @__PURE__ */ v("span", {
+					f && t.counts.favorites !== void 0 && /* @__PURE__ */ b("span", {
 						className: "inline-flex items-center gap-1 tabular-nums",
 						"data-ckui": "card-counts",
 						children: [
-							/* @__PURE__ */ _(S, {
-								icon: b,
+							/* @__PURE__ */ y(T, {
+								icon: S,
 								strokeWidth: 2,
-								className: y("size-3.5", t.viewer?.favorited && "fill-current text-primary"),
+								className: x("size-3.5", t.viewer?.favorited && "fill-current text-primary"),
 								"aria-hidden": !0
 							}),
-							/* @__PURE__ */ _("span", {
+							/* @__PURE__ */ y("span", {
 								className: "sr-only",
-								children: x.t("contents.favorites")
+								children: _.t("contents.favorites")
 							}),
-							w(t.counts.favorites, x.language)
+							O(t.counts.favorites, _.language)
 						]
 					})
 				]
 			}),
-			h
+			m
 		]
 	});
 }
 //#endregion
-export { D as ContentCard, O as OwnerChip, A as PostCard, T as lockLabel };
+export { re as CardStatusBadges, j as ContentCard, M as OwnerChip, se as PostCard, D as cardStatus, k as lockLabel };
 
 //# sourceMappingURL=card.js.map