@openrails/contentkit-ui 0.103.2 → 0.104.0-rc.2

package/dist/components/content/grid.js

@@ -1,20 +1,26 @@
 import { useMessages as e } from "../../i18n/context.js";
 import { ContentKitUiRoot as t } from "../../scope.js";
 import { ContentKitContext as n } from "../../react/context.js";
-import { useKinds as r } from "../../react/groups.js";
-import { Button as i } from "../../ui/button.js";
-import { useNearViewport as a } from "../../react/viewport.js";
-import { Skeleton as o } from "../../ui/skeleton.js";
-import { contentError as s, useAction as c } from "../social/parts.js";
-import { useContents as l, useExposure as u, useHistory as d, useLockedCount as f, useRecommendations as p, useSearch as m, useSimilar as h } from "../../react/discovery.js";
-import { ContentCard as g } from "./card.js";
-import { useContext as _, useEffect as v, useMemo as y, useState as b } from "react";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { cn as w } from "cn";
+import { useContentScope as r } from "../../react/use-resource.js";
+import { useKinds as i } from "../../react/groups.js";
+import { Button as a } from "../../ui/button.js";
+import { useNearViewport as o } from "../../react/viewport.js";
+import { Skeleton as s } from "../../ui/skeleton.js";
+import { contentError as c } from "../social/parts.js";
+import { useContents as l, useExposure as u, useHistory as d, useRecommendations as f, useSearch as p, useSimilar as m } from "../../react/discovery.js";
+import { ContentFilterDialog as h } from "./filter-dialog.js";
+import { useReleaseReveal as g } from "./release-reveal.js";
+import { ContentSummaryTile as _ } from "./summary-tile.js";
+import { ContentCard as v } from "./card.js";
+import { PagedContentGrid as y, PagedSearchResults as b } from "./paged-grid.js";
+import { ContentHistory as x } from "./history.js";
+import { useCallback as S, useContext as C, useEffect as w, useLayoutEffect as ee, useMemo as T, useRef as te, useState as E } from "react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { cn as k } from "cn";
 //#region src/components/content/grid.tsx
-var T = "grid grid-cols-[repeat(auto-fill,minmax(min(100%,10rem),1fr))] gap-x-4 gap-y-6";
-function E(e) {
-	if (!e) return { className: T };
+var A = "grid grid-cols-[repeat(auto-fill,minmax(min(100%,10rem),1fr))] gap-x-4 gap-y-6";
+function j(e) {
+	if (!e) return { className: A };
 	let t = typeof e.minCardWidth == "string" ? e.minCardWidth.trim() || "160px" : `${Number.isFinite(e.minCardWidth) ? Math.max(1, e.minCardWidth) : 160}px`, n = e.mobileColumns !== void 0 && Number.isFinite(e.mobileColumns) ? Math.max(1, Math.floor(e.mobileColumns)) : 2, r = e.maxColumns !== void 0 && Number.isFinite(e.maxColumns) ? Math.max(1, Math.floor(e.maxColumns)) : void 0;
 	return {
 		className: "grid grid-cols-[repeat(var(--ckui-card-mobile-columns),minmax(0,1fr))] gap-x-4 gap-y-6 md:grid-cols-[repeat(auto-fill,minmax(min(100%,var(--ckui-card-min-width)),1fr))]",
@@ -24,311 +30,343 @@ function E(e) {
 		}
 	};
 }
-function D({ list: n, render: c, ...l }) {
-	let d = e(), { t: f } = d, { kinds: p } = r({ client: l.client }), m = u(n.items, {
-		surface: l.surface ?? "list",
-		render: c,
-		client: l.client
-	}), [h, _] = a({
+function M(e) {
+	let { client: t, viewer: i, language: a } = r(e.client), o = C(n), [s, c] = E({
+		client: t,
+		viewer: i,
+		language: a,
+		access: o?.accessRevision,
+		render: e.render,
+		key: 0
+	}), l = s;
+	return (s.client !== t || s.viewer !== i || s.language !== a || s.access !== o?.accessRevision || s.render !== e.render) && (l = {
+		client: t,
+		viewer: i,
+		language: a,
+		access: o?.accessRevision,
+		render: e.render,
+		key: s.key + 1
+	}, c(l)), /* @__PURE__ */ D(N, { ...e }, l.key);
+}
+function N({ list: n, render: r, filterKinds: l, filterLanguage: d, horizontal: f, ...p }) {
+	let m = e(), { t: y } = m, { kinds: b } = i({ client: p.client }), [x, C] = E(!1), [A, M] = E(!1), N = te(null), [P, F] = E(null), [I, L] = E(0), [R, z] = E(() => globalThis.matchMedia?.("(max-width: 767px)").matches ?? !1);
+	ee(() => {
+		if (!P) return;
+		let e = () => {
+			let e = getComputedStyle(P).gridTemplateColumns.trim();
+			L(e && e !== "none" ? e.split(/\s+/).length : 0), z(globalThis.matchMedia?.("(max-width: 767px)").matches ?? !1);
+		};
+		e();
+		let t = typeof ResizeObserver == "function" ? new ResizeObserver(e) : void 0;
+		return t?.observe(P), addEventListener("resize", e), () => {
+			t?.disconnect(), removeEventListener("resize", e);
+		};
+	}, [P]);
+	let B = n.summary?.locked_count ?? 0, V = p.showFilteredSummary === !1 ? 0 : n.summary?.filtered_count ?? 0, H = p.locked === "collapse" && !x && B > 0, U = H && B > 0 && I >= Math.max(0, p.lockedSummaryMinColumns ?? 0), W = T(() => {
+		let e = [], t = !1;
+		for (let [r, i] of n.items.entries()) {
+			if (ne(i) && (H || p.locked === "hide")) {
+				U && !t && (e.push({
+					key: "premium-summary",
+					premium: !0,
+					card: i
+				}), t = !0);
+				continue;
+			}
+			e.push({
+				key: i.id,
+				card: i,
+				position: r + 1
+			});
+		}
+		U && !t && e.push({
+			key: "premium-summary",
+			premium: !0
+		});
+		let r = R && p.mobileCardLimit !== void 0 ? p.mobileCardLimit : p.cardLimit;
+		return r !== void 0 && Number.isFinite(r) ? e.slice(0, Math.max(0, Math.floor(r))) : e;
+	}, [
+		n.items,
+		H,
+		p.locked,
+		U,
+		R,
+		p.mobileCardLimit,
+		p.cardLimit
+	]), re = T(() => W.flatMap((e) => "premium" in e ? [] : [{
+		...e.card,
+		position: e.position
+	}]), [W]), G = u(re, {
+		surface: p.surface ?? "list",
+		render: r,
+		client: p.client
+	}), [ie, K] = o({
 		margin: "600px 0px",
 		leaveMargin: "1200px 0px"
-	}), { hasMore: y, loadingMore: b, loadMore: x, error: T } = n;
-	v(() => {
-		l.infinite && _ && y && !b && !T && x();
+	}), { hasMore: q, loadingMore: J, loadMore: Y, error: X } = n;
+	w(() => {
+		p.infinite && K && q && !J && !X && Y();
 	}, [
-		l.infinite,
-		_,
-		y,
-		b,
-		x,
-		T
+		p.infinite,
+		K,
+		q,
+		J,
+		Y,
+		X
 	]);
-	let D = l.tiers ?? p?.tiers, O = E(l.grid);
-	return /* @__PURE__ */ C(t, {
-		appearance: l.appearance,
-		className: w("grid gap-4 text-sm", l.className),
+	let { grid: Z, prepare: ae } = g(W.map((e) => e.key).join("\0")), oe = S((e) => {
+		Z.current = e, F(e);
+	}, [Z]), Q = f ? { className: "relative flex snap-x gap-4 overflow-x-auto pb-2 [&>li]:w-36 [&>li]:shrink-0 [&>li]:snap-start sm:[&>li]:w-44" } : j(p.grid), $ = n.summary?.truncated ? "≥ " : "", se = $ + (p.summaryLabels?.premium?.(B) ?? m.plural("contents.lockedShow", B)), ce = $ + (p.summaryLabels?.filtered?.(V) ?? m.plural("releases.filteredMore", V)), le = W.length > 0 || V > 0 || H && B > 0;
+	return /* @__PURE__ */ O(t, {
+		appearance: p.appearance,
+		className: k("grid gap-4 text-sm", p.className),
 		"data-ckui": "content-grid",
 		"aria-busy": n.loading,
-		children: [n.loading && !n.items.length ? /* @__PURE__ */ S("div", {
-			className: O.className,
-			style: O.style,
-			children: Array.from({ length: 8 }, (e, t) => /* @__PURE__ */ S(o, {
-				className: l.aspectRatio === void 0 ? l.shape === "landscape" ? "aspect-video w-full" : "aspect-[3/4] w-full" : "w-full",
-				style: l.aspectRatio === void 0 ? void 0 : { aspectRatio: l.aspectRatio }
-			}, t))
-		}) : n.error && !n.items.length ? /* @__PURE__ */ C("div", {
-			role: "alert",
-			className: "grid justify-items-start gap-2",
-			children: [/* @__PURE__ */ S("p", {
-				className: "text-destructive",
-				children: s(d, n.error)
-			}), /* @__PURE__ */ S(i, {
-				size: "sm",
-				variant: "outline",
-				onClick: n.reload,
-				children: f("common.retry")
-			})]
-		}) : n.items.length ? /* @__PURE__ */ S("ol", {
-			className: O.className,
-			style: O.style,
-			children: n.items.map((e, t) => /* @__PURE__ */ S("li", {
-				ref: m.track(e.id, t + 1),
-				children: l.renderCard ? l.renderCard(e, t + 1) : /* @__PURE__ */ S(g, {
-					card: e,
-					client: l.client,
-					href: l.href,
-					shape: l.shape,
-					aspectRatio: l.aspectRatio,
-					titlePosition: l.titlePosition,
-					loadMedia: l.loadMedia,
-					groupKinds: l.groupKinds,
-					chips: l.chips,
-					filterEntity: l.filterEntity,
-					entityStyle: l.entityStyle,
-					entityLayout: l.entityLayout,
-					metadata: l.metadata,
-					showCounts: l.showCounts,
-					tiers: D,
-					labels: l.labels,
-					owner: l.owner,
-					ownerHref: l.ownerHref,
-					decorate: l.decorate,
-					onOpen: () => m.click(e.id, t + 1)
-				})
-			}, e.id))
-		}) : /* @__PURE__ */ S("div", {
-			className: "text-muted-foreground",
-			role: "status",
-			children: l.empty ?? f("contents.empty")
-		}), n.hasMore && /* @__PURE__ */ C("div", {
-			ref: h,
-			className: "grid justify-items-center gap-2",
-			children: [n.error && n.items.length > 0 && /* @__PURE__ */ S("p", {
+		children: [
+			n.loading && !n.items.length ? /* @__PURE__ */ D("ol", {
+				"aria-hidden": !0,
+				className: Q.className,
+				style: Q.style,
+				children: Array.from({ length: 8 }, (e, t) => /* @__PURE__ */ D("li", { children: /* @__PURE__ */ D(s, {
+					className: p.aspectRatio === void 0 ? p.shape === "landscape" ? "aspect-video w-full" : "aspect-[3/4] w-full" : "w-full",
+					style: p.aspectRatio === void 0 ? void 0 : { aspectRatio: p.aspectRatio }
+				}) }, t))
+			}) : n.error && !n.items.length ? /* @__PURE__ */ O("div", {
 				role: "alert",
-				className: "text-destructive",
-				children: s(d, n.error)
-			}), /* @__PURE__ */ S(i, {
-				variant: "outline",
-				size: "sm",
-				disabled: n.loadingMore,
-				onClick: () => void n.loadMore(),
-				children: n.loadingMore ? f("contents.loading") : n.error ? f("common.retry") : f("contents.loadMore")
-			})]
-		})]
+				className: "grid justify-items-start gap-2",
+				children: [/* @__PURE__ */ D("p", {
+					className: "text-destructive",
+					children: c(m, n.error)
+				}), /* @__PURE__ */ D(a, {
+					size: "sm",
+					variant: "outline",
+					onClick: n.reload,
+					children: y("common.retry")
+				})]
+			}) : le ? /* @__PURE__ */ O("ol", {
+				ref: oe,
+				tabIndex: -1,
+				className: Q.className,
+				style: Q.style,
+				children: [W.map((e) => "premium" in e ? /* @__PURE__ */ D(_, {
+					tileKey: e.key,
+					kind: "premium",
+					contentKind: l?.[0] ?? e.card?.kind,
+					preview: e.card,
+					open: !0,
+					cardProps: p,
+					label: se,
+					onClick: (e) => {
+						ae(e.detail === 0), C(!0);
+					}
+				}, e.key) : /* @__PURE__ */ D("li", {
+					"data-release-key": e.key,
+					ref: G.track(e.card.id, e.position),
+					children: p.renderCard ? p.renderCard(e.card, e.position) : /* @__PURE__ */ D(v, {
+						card: e.card,
+						client: p.client,
+						href: p.href,
+						shape: p.shape,
+						aspectRatio: p.aspectRatio,
+						titlePosition: p.titlePosition,
+						loadMedia: p.loadMedia,
+						groupKinds: p.groupKinds,
+						chips: p.chips,
+						chipOverflow: p.chipOverflow,
+						chipFit: p.chipFit,
+						filterEntity: p.filterEntity,
+						entityStyle: p.entityStyle,
+						entityLayout: p.entityLayout,
+						metadata: p.metadata,
+						showCounts: p.showCounts,
+						tiers: p.tiers ?? b?.tiers,
+						labels: p.labels,
+						owner: p.owner,
+						ownerHref: p.ownerHref,
+						decorate: p.decorate,
+						onOpen: () => G.click(e.card.id, e.position)
+					})
+				}, e.key)), V > 0 && /* @__PURE__ */ D(_, {
+					tileKey: "filtered-summary",
+					kind: "filtered",
+					contentKind: l?.[0] ?? n.items[0]?.kind,
+					open: !0,
+					cardProps: p,
+					label: ce,
+					onClick: (e) => {
+						N.current = e.currentTarget, M(!0);
+					}
+				})]
+			}) : /* @__PURE__ */ D("div", {
+				className: "text-muted-foreground",
+				role: "status",
+				children: p.empty ?? y("contents.empty")
+			}),
+			n.hasMore && /* @__PURE__ */ O("div", {
+				ref: ie,
+				className: "grid justify-items-center gap-2",
+				children: [n.error && n.items.length > 0 && /* @__PURE__ */ D("p", {
+					role: "alert",
+					className: "text-destructive",
+					children: c(m, n.error)
+				}), /* @__PURE__ */ D(a, {
+					variant: "outline",
+					size: "sm",
+					disabled: n.loadingMore,
+					onClick: () => void n.loadMore(),
+					children: n.loadingMore ? y("contents.loading") : n.error ? y("common.retry") : y("contents.loadMore")
+				})]
+			}),
+			/* @__PURE__ */ D(h, {
+				open: A,
+				onOpenChange: M,
+				returnFocus: () => N.current?.isConnected ? N.current : P,
+				client: p.client,
+				kinds: l,
+				language: d,
+				counts: n.summary?.filtered_entities,
+				countsLowerBound: n.summary?.truncated,
+				appearance: p.appearance
+			})
+		]
 	});
 }
-var O = [
+function P(e, t) {
+	return e === "hide" ? "hide" : e === "collapse" ? "lock" : t;
+}
+var F = [
 	"tier",
 	"group",
 	"ppv",
 	"group_ppv"
-];
-function k({ query: e, locked: t = "show", ...n }) {
-	let r = y(() => ({
+], ne = (e) => !e.access.allowed && !e.access.unknown && F.includes(e.access.level);
+function I(e) {
+	return e.pagination === "pages" ? /* @__PURE__ */ D(y, { ...e }) : /* @__PURE__ */ D(L, { ...e });
+}
+function L({ query: e, locked: t = "show", ...n }) {
+	let r = T(() => ({
 		...e,
+		summary: e.summary ?? !0,
 		limit: e.limit ?? n.pageSize,
-		...t === "show" ? {} : { mode: "hide" }
+		mode: P(t, e.mode)
 	}), [
 		e,
 		n.pageSize,
 		t
 	]), i = l(r, { client: n.client });
-	return /* @__PURE__ */ C(x, { children: [t === "collapse" && /* @__PURE__ */ S(A, {
-		...n,
-		query: e
-	}), /* @__PURE__ */ S(D, {
+	return /* @__PURE__ */ D(M, {
 		...n,
+		locked: t,
 		list: i,
-		render: JSON.stringify(r)
-	})] });
+		render: JSON.stringify(r),
+		filterKinds: e.kind ? [e.kind] : void 0,
+		filterLanguage: e.display_language ?? e.language
+	});
 }
-function A({ query: n, ...r }) {
-	let a = e(), [o, s] = b(!1), { count: c } = f(n, { client: r.client }), u = y(() => o ? {
-		...n,
-		mode: "lock",
-		access: n.access ?? O,
-		limit: n.limit ?? r.pageSize
-	} : null, [
-		o,
-		n,
-		r.pageSize
-	]), d = l(u, { client: r.client }), p = y(() => d.items.filter((e) => !e.access.allowed), [d.items]);
-	return c ? /* @__PURE__ */ C(t, {
-		appearance: r.appearance,
-		className: "grid gap-3 text-sm",
-		"data-ckui": "locked-cards",
-		children: [/* @__PURE__ */ S(i, {
-			variant: "outline",
-			size: "sm",
-			className: "justify-self-start",
-			"aria-expanded": o,
-			onClick: () => s(!o),
-			children: o ? a.t("contents.lockedHide") : a.plural("contents.lockedShow", c)
-		}), o && /* @__PURE__ */ S(D, {
-			...r,
-			list: {
-				...d,
-				items: p
-			},
-			render: JSON.stringify(u)
-		})]
-	}) : null;
+function R(e) {
+	return e.pagination === "pages" ? /* @__PURE__ */ D(b, { ...e }) : /* @__PURE__ */ D(z, { ...e });
 }
-function j({ query: t, ...n }) {
-	let { t: r } = e(), i = y(() => ({
+function z({ query: t, ...n }) {
+	let { t: r } = e(), i = T(() => ({
 		...t,
+		mode: P(n.locked, t.mode),
+		summary: t.summary ?? !0,
 		limit: t.limit ?? n.pageSize
-	}), [t, n.pageSize]), a = m(i, { client: n.client });
-	return t.q.trim() ? /* @__PURE__ */ S(D, {
+	}), [
+		t,
+		n.pageSize,
+		n.locked
+	]), a = p(i, { client: n.client });
+	return t.q.trim() ? /* @__PURE__ */ D(M, {
 		surface: "search",
 		empty: r("contents.noResults", { q: t.q.trim() }),
 		...n,
 		list: a,
-		render: JSON.stringify(i)
+		render: JSON.stringify(i),
+		filterKinds: t.kind ? [t.kind] : void 0,
+		filterLanguage: t.display_language ?? t.language
 	}) : null;
 }
-function M({ query: t = {}, ...r }) {
-	let { t: a } = e(), o = _(n), s = y(() => ({
-		...t,
-		limit: t.limit ?? r.pageSize
-	}), [t, r.pageSize]), l = d(s, { client: r.client }), u = c("history.forget");
-	return o?.viewer === null ? /* @__PURE__ */ S("p", {
-		className: "text-muted-foreground",
-		children: a("contents.historySignedOut")
-	}) : /* @__PURE__ */ C("div", {
-		className: "grid gap-3",
-		"data-ckui": "content-history",
-		children: [l.items.length > 0 && /* @__PURE__ */ S(i, {
-			size: "sm",
-			variant: "outline",
-			className: "justify-self-end",
-			disabled: u.pending,
-			onClick: () => void u.run(() => l.forget(t.kind ? { kind: t.kind } : {})),
-			children: a("contents.clearHistory")
-		}), /* @__PURE__ */ S(D, {
-			surface: "history",
-			empty: a("contents.historyEmpty"),
-			...r,
-			list: l,
-			render: JSON.stringify(s),
-			renderCard: r.renderCard ?? ((e) => /* @__PURE__ */ S(g, {
-				card: e,
-				client: r.client,
-				href: r.href,
-				shape: r.shape,
-				aspectRatio: r.aspectRatio,
-				titlePosition: r.titlePosition,
-				loadMedia: r.loadMedia,
-				groupKinds: r.groupKinds,
-				chips: r.chips,
-				filterEntity: r.filterEntity,
-				entityStyle: r.entityStyle,
-				entityLayout: r.entityLayout,
-				metadata: r.metadata,
-				showCounts: r.showCounts,
-				tiers: r.tiers,
-				labels: r.labels,
-				owner: r.owner,
-				ownerHref: r.ownerHref,
-				decorate: r.decorate,
-				children: /* @__PURE__ */ S(i, {
-					size: "xs",
-					variant: "ghost",
-					className: "justify-self-start",
-					disabled: u.pending,
-					onClick: () => void u.run(() => l.forget({ content_id: e.id })),
-					children: a("contents.removeFromHistory")
-				})
-			}))
-		})]
-	});
-}
-function N({ title: e, similar: n, recommendations: i, history: a, group: s, list: c, query: f = {}, more: m, ..._ }) {
-	let v = f.limit ?? _.pageSize ?? 12, b = y(() => ({
-		...f,
-		limit: v
-	}), [f, v]), x = y(() => c ? {
-		...c,
-		limit: c.limit ?? v
-	} : s ? {
-		groups: [s],
+function B({ title: e, similar: n, recommendations: r, history: i, group: a, list: o, query: s = {}, more: c, ...u }) {
+	let p = s.limit ?? u.pageSize ?? 12, h = T(() => ({
+		...s,
+		mode: P(u.locked, s.mode),
+		summary: s.summary ?? !0,
+		limit: p
+	}), [
+		s,
+		p,
+		u.locked
+	]), g = T(() => o ? {
+		...o,
+		mode: P(u.locked, o.mode),
+		summary: o.summary ?? !0,
+		limit: o.limit ?? p
+	} : a ? {
+		groups: [a],
 		sort: "position",
-		limit: v
+		mode: P(u.locked),
+		summary: !0,
+		limit: p
 	} : null, [
-		c,
-		s,
-		v
-	]), T = h(i || a || x ? null : n, b, { client: _.client }), D = p(i ? b : null, { client: _.client }), O = d(a ? {
-		...a,
-		limit: a.limit ?? v
-	} : null, { client: _.client }), k = l(x, { client: _.client }), A = i ? D : a || x ? (() => {
-		let e = a ? O : k;
+		o,
+		a,
+		p,
+		u.locked
+	]), _ = m(r || i || g ? null : n, h, { client: u.client }), v = f(r ? h : null, { client: u.client }), y = d(i ? {
+		...i,
+		mode: P(u.locked, i.mode),
+		summary: i.summary ?? !0,
+		limit: i.limit ?? p
+	} : null, { client: u.client }), b = l(g, { client: u.client }), x = r ? v : i || g ? (() => {
+		let e = i ? y : b;
 		return {
 			items: e.items,
+			summary: e.summary,
 			loading: e.loading,
 			error: e.error,
 			unavailable: e.error?.code === "not_configured",
 			reload: e.reload
 		};
-	})() : T, { kinds: j } = r({ client: _.client }), M = _.surface ?? (i ? "recommendations" : a ? "history" : s ? "featured" : x ? "list" : "similar"), N = u(A.items, {
-		surface: M,
-		render: JSON.stringify([
-			n,
-			i,
-			a,
-			s,
-			x,
-			b
-		]),
-		client: _.client
-	}), P = n || i || a || s || x, F = _.grid ? E(_.grid) : void 0;
-	return !P || A.unavailable || !A.loading && !A.items.length ? null : /* @__PURE__ */ C(t, {
-		appearance: _.appearance,
-		className: w("grid gap-3 text-sm", _.className),
+	})() : _, S = u.surface ?? (r ? "recommendations" : i ? "history" : a ? "featured" : g ? "list" : "similar");
+	if (!(n || r || i || a || g) || x.unavailable || !x.loading && !x.items.length && !x.summary?.filtered_count && !x.summary?.locked_count) return null;
+	let C = {
+		...x,
+		loadingMore: !1,
+		hasMore: !1,
+		loadMore: async () => {}
+	}, w = o?.kind ?? i?.kind ?? h.kind;
+	return /* @__PURE__ */ O(t, {
+		appearance: u.appearance,
+		className: k("grid gap-3 text-sm", u.className),
 		"data-ckui": "content-rail",
-		"data-surface": M,
-		children: [/* @__PURE__ */ C("div", {
+		"data-surface": S,
+		children: [/* @__PURE__ */ O("div", {
 			className: "flex items-baseline justify-between gap-2",
-			children: [/* @__PURE__ */ S("h2", {
+			children: [/* @__PURE__ */ D("h2", {
 				className: "text-base font-semibold",
 				children: e
-			}), m]
-		}), /* @__PURE__ */ S("ol", {
-			className: F?.className ?? "relative flex snap-x gap-4 overflow-x-auto pb-2",
-			style: F?.style,
-			children: (A.loading && !A.items.length ? Array.from({ length: 6 }, () => null) : A.items).map((e, t) => /* @__PURE__ */ S("li", {
-				className: F ? void 0 : "w-36 shrink-0 snap-start sm:w-44",
-				ref: e ? N.track(e.id, t + 1) : void 0,
-				children: e ? _.renderCard ? _.renderCard(e, t + 1) : /* @__PURE__ */ S(g, {
-					card: e,
-					client: _.client,
-					href: _.href,
-					shape: _.shape,
-					aspectRatio: _.aspectRatio,
-					titlePosition: _.titlePosition,
-					loadMedia: _.loadMedia,
-					groupKinds: _.groupKinds,
-					chips: _.chips,
-					filterEntity: _.filterEntity,
-					entityStyle: _.entityStyle,
-					entityLayout: _.entityLayout,
-					metadata: _.metadata,
-					showCounts: _.showCounts,
-					tiers: _.tiers ?? j?.tiers,
-					labels: _.labels,
-					owner: _.owner,
-					ownerHref: _.ownerHref,
-					decorate: _.decorate,
-					onOpen: () => N.click(e.id, t + 1)
-				}) : /* @__PURE__ */ S(o, {
-					className: _.aspectRatio === void 0 ? _.shape === "landscape" ? "aspect-video w-full" : "aspect-[3/4] w-full" : "w-full",
-					style: _.aspectRatio === void 0 ? void 0 : { aspectRatio: _.aspectRatio }
-				})
-			}, e?.id ?? t))
+			}), c]
+		}), /* @__PURE__ */ D(M, {
+			...u,
+			className: void 0,
+			surface: S,
+			horizontal: !u.grid,
+			list: C,
+			render: JSON.stringify([
+				n,
+				r,
+				i,
+				a,
+				g,
+				h
+			]),
+			filterKinds: w ? [w] : void 0,
+			filterLanguage: o?.display_language ?? i?.display_language ?? h.display_language ?? o?.language ?? i?.language ?? h.language
 		})]
 	});
 }
 //#endregion
-export { D as CardGrid, k as ContentGrid, M as ContentHistory, N as ContentRail, j as SearchResults, E as cardGridLayout };
+export { M as CardGrid, I as ContentGrid, x as ContentHistory, B as ContentRail, R as SearchResults, j as cardGridLayout, P as cardListMode };
 
 //# sourceMappingURL=grid.js.map