@openrails/contentkit-ui 0.94.0 → 0.95.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"daily-releases.js","names":[],"sources":["../../../src/components/content/daily-releases.tsx"],"sourcesContent":["import { ArrowDown01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useCallback, useId, useMemo, useState } from \"react\";\nimport type { DailyReleasesQuery } from \"../../client/discovery.js\";\nimport type { Card, ReleaseDay } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useDailyReleases, useExposure } from \"../../react/discovery.js\";\nimport { useContentScope } from \"../../react/use-resource.js\";\nimport { useNearViewport } from \"../../react/viewport.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { contentError } from \"../social/parts.js\";\nimport { ContentCard } from \"./card.js\";\nimport { cardGridLayout, type CardListProps } from \"./grid.js\";\n\nexport interface DailyReleasesProps extends Omit<CardListProps, \"infinite\" | \"pageSize\" | \"renderCard\" | \"loadMedia\"> {\n  /** One complete calendar window. Defaults to 10 days in the browser's time zone. */\n  query?: DailyReleasesQuery;\n  /** Cards initially revealed across the whole window, allocated newest first. Default 30. */\n  initialVisible?: number;\n  /** Additional cached cards revealed by a day's Show more button. Default 30. */\n  revealStep?: number;\n}\n\nconst count = (value: number, fallback: number) => Number.isFinite(value) ? Math.max(0, Math.floor(value)) : fallback;\n\n/**\n * One metadata request for a calendar window, with no requests when a day is\n * opened or expanded. Only revealed, visible cards mount images and previews.\n */\nexport function DailyReleases({ query, initialVisible = 30, revealStep = 30, ...p }: DailyReleasesProps) {\n  const m = useMessages();\n  const { scope } = useContentScope(p.client);\n  const request = useMemo(() => ({ days: 10, time_zone: Intl.DateTimeFormat().resolvedOptions().timeZone, ...query }), [query]);\n  const releases = useDailyReleases(request, { client: p.client });\n  const layout = cardGridLayout(p.grid);\n  const days = useMemo(() => releases.data?.days.filter((day) => day.contents.length).sort((a, b) => b.date.localeCompare(a.date)) ?? [], [releases.data]);\n  let remaining = count(initialVisible, 30);\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-6 text-sm\", p.className)} data-ckui=\"daily-releases\" aria-busy={releases.loading}>\n      {releases.loading && !releases.data ? <div className={layout.className} style={layout.style}>{Array.from({ length: 6 }, (_, i) => <Skeleton key={i} className=\"aspect-[3/4]\" />)}</div> : releases.error && !releases.data ? (\n        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, releases.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={releases.reload}>{m.t(\"common.retry\")}</Button>\n        </div>\n      ) : !days.length ? <p role=\"status\" className=\"text-muted-foreground\">{p.empty ?? m.t(\"contents.empty\")}</p> : days.map((day) => {\n        const initial = Math.min(remaining, day.contents.length);\n        remaining -= initial;\n        return <ReleaseDaySection key={JSON.stringify([scope, request, releases.data?.from_date, day.date])} day={day} initial={initial} step={Math.max(1, count(revealStep, 30))} cardProps={p} />;\n      })}\n    </ContentKitUiRoot>\n  );\n}\n\nfunction ReleaseDaySection({ day, initial, step, cardProps: p }: { day: ReleaseDay; initial: number; step: number; cardProps: Omit<DailyReleasesProps, \"query\" | \"initialVisible\" | \"revealStep\"> }) {\n  const m = useMessages();\n  const id = useId();\n  const [open, setOpen] = useState(initial > 0);\n  const [visible, setVisible] = useState(initial);\n  const cards = useMemo(() => day.contents.slice(0, visible), [day.contents, visible]);\n  const exposed = useMemo(() => open ? cards : [], [open, cards]);\n  const exposure = useExposure(exposed, { surface: p.surface ?? \"releases\", render: day.date, client: p.client });\n  const layout = cardGridLayout(p.grid);\n  // The server already assigned the calendar day in the requested time zone.\n  const label = new Intl.DateTimeFormat(m.language, { dateStyle: \"full\", timeZone: \"UTC\" }).format(new Date(`${day.date}T12:00:00Z`));\n  const toggle = () => {\n    if (!open && !visible) setVisible(Math.min(step, day.contents.length));\n    setOpen(!open);\n  };\n  return (\n    <section data-ckui=\"release-day\" data-date={day.date}>\n      <h2>\n        <Button id={`${id}-heading`} type=\"button\" variant=\"ghost\" className=\"h-auto w-full justify-start gap-3 px-0 py-3 text-start text-lg font-semibold\" aria-expanded={open} aria-controls={`${id}-contents`} onClick={toggle}>\n          <HugeiconsIcon icon={ArrowDown01Icon} strokeWidth={2} className={cn(\"size-5 shrink-0 transition-transform duration-200 motion-reduce:transition-none\", !open && \"-rotate-90\")} aria-hidden />\n          <time dateTime={day.date}>{label}</time>\n          <span className=\"ml-auto shrink-0 text-sm font-normal text-muted-foreground\">{m.plural(\"contents.items\", day.contents.length)}</span>\n        </Button>\n      </h2>\n      <div id={`${id}-contents`} role=\"region\" aria-labelledby={`${id}-heading`} aria-hidden={!open} inert={!open} className={cn(\"grid transition-[grid-template-rows,opacity] duration-250 ease-out motion-reduce:transition-none\", open ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\")}>\n        <div className=\"min-h-0 overflow-hidden\">\n          <ol className={cn(layout.className, \"pt-2\")} style={layout.style}>\n            {cards.map((card, i) => <ReleaseCard key={card.id} card={card} open={open} position={i + 1} exposure={exposure} cardProps={p} />)}\n          </ol>\n          {visible < day.contents.length && <div className=\"flex justify-center pt-5 pb-1\"><Button type=\"button\" variant=\"outline\" onClick={() => setVisible((n) => Math.min(n + step, day.contents.length))}>{m.t(\"contents.showMore\")}</Button></div>}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nfunction ReleaseCard({ card, open, position, exposure, cardProps: p }: { card: Card; open: boolean; position: number; exposure: ReturnType<typeof useExposure>; cardProps: Omit<DailyReleasesProps, \"query\" | \"initialVisible\" | \"revealStep\"> }) {\n  const [viewport, visible] = useNearViewport({ margin: \"0px\" });\n  const tracked = useMemo(() => exposure.track(card.id, position), [exposure, card.id, position]);\n  const ref = useCallback((element: HTMLLIElement | null) => { viewport(element); tracked(element); }, [viewport, tracked]);\n  return <li ref={ref}>\n    <ContentCard card={card} href={p.href} shape={p.shape} loadMedia={open && visible} groupKinds={p.groupKinds} chips={p.chips} filterEntity={p.filterEntity} metadata={p.metadata} showCounts={p.showCounts} tiers={p.tiers} labels={p.labels} owner={p.owner} ownerHref={p.ownerHref} decorate={p.decorate} onOpen={() => exposure.click(card.id, position)} />\n  </li>;\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { ContentKitUiAppearance } from '../../appearance.js';
 import { ContentKitClient } from '../../client/client.js';
 import { ContentQuery, HistoryQuery, RailQuery, SearchQuery } from '../../client/discovery.js';
@@ -18,7 +18,20 @@ export interface CardListProps extends Omit<ContentCardProps, "card" | "onOpen"
     client?: ContentKitClient;
     className?: string;
     appearance?: ContentKitUiAppearance;
+    /** Opt into a fluid grid with no desktop column ceiling. */
+    grid?: CardGridLayout;
 }
+export interface CardGridLayout {
+    /** Minimum desktop card width in CSS pixels. Cards grow to fill available space. */
+    minCardWidth: number;
+    /** Equal-width columns below the desktop breakpoint. Default 2. */
+    mobileColumns?: number;
+}
+/** Shared by complete lists, release-day sections and grid-style previews. */
+export declare function cardGridLayout(layout?: CardGridLayout): {
+    className: string;
+    style?: CSSProperties;
+};
 /** A list's cards in a responsive grid, paged, with exposures and click signals. */
 export declare function CardGrid({ list, render, ...p }: CardListProps & {
     list: UseList<Card>;

package/dist/components/content/grid.js

@@ -13,7 +13,18 @@ import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 import { cn as w } 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({ list: n, render: c, ...l }) {
+function E(e) {
+	if (!e) return { className: T };
+	let t = Number.isFinite(e.minCardWidth) ? Math.max(1, e.minCardWidth) : 160, n = e.mobileColumns !== void 0 && Number.isFinite(e.mobileColumns) ? Math.max(1, Math.floor(e.mobileColumns)) : 2;
+	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))]",
+		style: {
+			"--ckui-card-min-width": `${t}px`,
+			"--ckui-card-mobile-columns": n
+		}
+	};
+}
+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,
@@ -31,14 +42,15 @@ function E({ list: n, render: c, ...l }) {
 		b,
 		x
 	]);
-	let E = l.tiers ?? p?.tiers;
+	let T = l.tiers ?? p?.tiers, D = E(l.grid);
 	return /* @__PURE__ */ C(t, {
 		appearance: l.appearance,
 		className: w("grid gap-4 text-sm", l.className),
 		"data-ckui": "content-grid",
 		"aria-busy": n.loading,
 		children: [n.loading && !n.items.length ? /* @__PURE__ */ S("div", {
-			className: T,
+			className: D.className,
+			style: D.style,
 			children: Array.from({ length: 8 }, (e, t) => /* @__PURE__ */ S(o, { className: l.shape === "landscape" ? "aspect-video w-full" : "aspect-[3/4] w-full" }, t))
 		}) : n.error && !n.items.length ? /* @__PURE__ */ C("div", {
 			role: "alert",
@@ -53,16 +65,21 @@ function E({ list: n, render: c, ...l }) {
 				children: f("common.retry")
 			})]
 		}) : n.items.length ? /* @__PURE__ */ S("ol", {
-			className: T,
+			className: D.className,
+			style: D.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,
 					href: l.href,
 					shape: l.shape,
+					loadMedia: l.loadMedia,
 					groupKinds: l.groupKinds,
 					chips: l.chips,
-					tiers: E,
+					filterEntity: l.filterEntity,
+					metadata: l.metadata,
+					showCounts: l.showCounts,
+					tiers: T,
 					labels: l.labels,
 					owner: l.owner,
 					ownerHref: l.ownerHref,
@@ -87,13 +104,13 @@ function E({ list: n, render: c, ...l }) {
 		})]
 	});
 }
-var D = [
+var O = [
 	"tier",
 	"group",
 	"ppv",
 	"group_ppv"
 ];
-function O({ query: e, locked: t = "show", ...n }) {
+function k({ query: e, locked: t = "show", ...n }) {
 	let r = y(() => ({
 		...e,
 		limit: e.limit ?? n.pageSize,
@@ -103,20 +120,20 @@ function O({ query: e, locked: t = "show", ...n }) {
 		n.pageSize,
 		t
 	]), i = l(r, { client: n.client });
-	return /* @__PURE__ */ C(x, { children: [t === "collapse" && /* @__PURE__ */ S(k, {
+	return /* @__PURE__ */ C(x, { children: [t === "collapse" && /* @__PURE__ */ S(A, {
 		...n,
 		query: e
-	}), /* @__PURE__ */ S(E, {
+	}), /* @__PURE__ */ S(D, {
 		...n,
 		list: i,
 		render: JSON.stringify(r)
 	})] });
 }
-function k({ query: n, ...r }) {
+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 ?? D,
+		access: n.access ?? O,
 		limit: n.limit ?? r.pageSize
 	} : null, [
 		o,
@@ -134,7 +151,7 @@ function k({ query: n, ...r }) {
 			"aria-expanded": o,
 			onClick: () => s(!o),
 			children: o ? a.t("contents.lockedHide") : a.plural("contents.lockedShow", c)
-		}), o && /* @__PURE__ */ S(E, {
+		}), o && /* @__PURE__ */ S(D, {
 			...r,
 			list: {
 				...d,
@@ -144,12 +161,12 @@ function k({ query: n, ...r }) {
 		})]
 	}) : null;
 }
-function A({ query: t, ...n }) {
+function j({ query: t, ...n }) {
 	let { t: r } = e(), i = y(() => ({
 		...t,
 		limit: t.limit ?? n.pageSize
 	}), [t, n.pageSize]), a = m(i, { client: n.client });
-	return t.q.trim() ? /* @__PURE__ */ S(E, {
+	return t.q.trim() ? /* @__PURE__ */ S(D, {
 		surface: "search",
 		empty: r("contents.noResults", { q: t.q.trim() }),
 		...n,
@@ -157,7 +174,7 @@ function A({ query: t, ...n }) {
 		render: JSON.stringify(i)
 	}) : null;
 }
-function j({ query: t = {}, ...r }) {
+function M({ query: t = {}, ...r }) {
 	let { t: a } = e(), o = _(n), s = y(() => ({
 		...t,
 		limit: t.limit ?? r.pageSize
@@ -175,7 +192,7 @@ function j({ query: t = {}, ...r }) {
 			disabled: u.pending,
 			onClick: () => void u.run(() => l.forget(t.kind ? { kind: t.kind } : {})),
 			children: a("contents.clearHistory")
-		}), /* @__PURE__ */ S(E, {
+		}), /* @__PURE__ */ S(D, {
 			surface: "history",
 			empty: a("contents.historyEmpty"),
 			...r,
@@ -185,8 +202,12 @@ function j({ query: t = {}, ...r }) {
 				card: e,
 				href: r.href,
 				shape: r.shape,
+				loadMedia: r.loadMedia,
 				groupKinds: r.groupKinds,
 				chips: r.chips,
+				filterEntity: r.filterEntity,
+				metadata: r.metadata,
+				showCounts: r.showCounts,
 				tiers: r.tiers,
 				labels: r.labels,
 				owner: r.owner,
@@ -204,7 +225,7 @@ function j({ query: t = {}, ...r }) {
 		})]
 	});
 }
-function M({ title: e, similar: n, recommendations: i, history: a, group: s, list: c, query: f = {}, more: m, ..._ }) {
+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
@@ -219,11 +240,11 @@ function M({ title: e, similar: n, recommendations: i, history: a, group: s, lis
 		c,
 		s,
 		v
-	]), T = h(i || a || x ? null : n, b, { client: _.client }), E = p(i ? b : null, { client: _.client }), D = d(a ? {
+	]), 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 }), O = l(x, { client: _.client }), k = i ? E : a || x ? (() => {
-		let e = a ? D : O;
+	} : null, { client: _.client }), k = l(x, { client: _.client }), A = i ? D : a || x ? (() => {
+		let e = a ? O : k;
 		return {
 			items: e.items,
 			loading: e.loading,
@@ -231,8 +252,8 @@ function M({ title: e, similar: n, recommendations: i, history: a, group: s, lis
 			unavailable: e.error?.code === "not_configured",
 			reload: e.reload
 		};
-	})() : T, { kinds: A } = r({ client: _.client }), j = _.surface ?? (i ? "recommendations" : a ? "history" : s ? "featured" : x ? "list" : "similar"), M = u(k.items, {
-		surface: j,
+	})() : 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,
@@ -242,12 +263,12 @@ function M({ title: e, similar: n, recommendations: i, history: a, group: s, lis
 			b
 		]),
 		client: _.client
-	});
-	return !(n || i || a || s || x) || k.unavailable || !k.loading && !k.items.length ? null : /* @__PURE__ */ C(t, {
+	}), 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),
 		"data-ckui": "content-rail",
-		"data-surface": j,
+		"data-surface": M,
 		children: [/* @__PURE__ */ C("div", {
 			className: "flex items-baseline justify-between gap-2",
 			children: [/* @__PURE__ */ S("h2", {
@@ -255,28 +276,33 @@ function M({ title: e, similar: n, recommendations: i, history: a, group: s, lis
 				children: e
 			}), m]
 		}), /* @__PURE__ */ S("ol", {
-			className: "flex snap-x gap-4 overflow-x-auto pb-2",
-			children: (k.loading && !k.items.length ? Array.from({ length: 6 }, () => null) : k.items).map((e, t) => /* @__PURE__ */ S("li", {
-				className: "w-36 shrink-0 snap-start sm:w-44",
-				ref: e ? M.track(e.id, t + 1) : void 0,
+			className: F?.className ?? "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,
 					href: _.href,
 					shape: _.shape,
+					loadMedia: _.loadMedia,
 					groupKinds: _.groupKinds,
 					chips: _.chips,
-					tiers: _.tiers ?? A?.tiers,
+					filterEntity: _.filterEntity,
+					metadata: _.metadata,
+					showCounts: _.showCounts,
+					tiers: _.tiers ?? j?.tiers,
 					labels: _.labels,
 					owner: _.owner,
 					ownerHref: _.ownerHref,
 					decorate: _.decorate,
-					onOpen: () => M.click(e.id, t + 1)
+					onOpen: () => N.click(e.id, t + 1)
 				}) : /* @__PURE__ */ S(o, { className: _.shape === "landscape" ? "aspect-video w-full" : "aspect-[3/4] w-full" })
 			}, e?.id ?? t))
 		})]
 	});
 }
 //#endregion
-export { E as CardGrid, O as ContentGrid, j as ContentHistory, M as ContentRail, A as SearchResults };
+export { D as CardGrid, k as ContentGrid, M as ContentHistory, N as ContentRail, j as SearchResults, E as cardGridLayout };
 
 //# sourceMappingURL=grid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/content/grid.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ContentQuery, HistoryQuery, RailQuery, SearchQuery } from \"../../client/discovery.js\";\nimport type { Card } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext } from \"../../react/context.js\";\nimport { useContents, useExposure, useHistory, useLockedCount, useRecommendations, useSearch, useSimilar, type UseRail } from \"../../react/discovery.js\";\nimport { useKinds } from \"../../react/groups.js\";\nimport type { UseList } from \"../../react/use-resource.js\";\nimport { useNearViewport } from \"../../react/viewport.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { contentError, useAction } from \"../social/parts.js\";\nimport { ContentCard, type ContentCardProps } from \"./card.js\";\n\nexport interface CardListProps extends Omit<ContentCardProps, \"card\" | \"onOpen\" | \"children\" | \"className\"> {\n  /** Where the list is, for exposures and click attribution: \"home\", \"search\", \"similar\". */\n  surface?: string;\n  /** Loads the next page as the end nears, instead of a button. */\n  infinite?: boolean;\n  /** A card's entry instead of ContentCard. */\n  renderCard?: (card: Card, position: number) => ReactNode;\n  /** Shown when nothing matches. */\n  empty?: ReactNode;\n  pageSize?: number;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\nconst GRID = \"grid grid-cols-[repeat(auto-fill,minmax(min(100%,10rem),1fr))] gap-x-4 gap-y-6\";\n\n/** A list's cards in a responsive grid, paged, with exposures and click signals. */\nexport function CardGrid({ list, render, ...p }: CardListProps & { list: UseList<Card>; render: string }) {\n  const m = useMessages();\n  const { t } = m;\n  const { kinds } = useKinds({ client: p.client });\n  const exposure = useExposure(list.items, { surface: p.surface ?? \"list\", render, client: p.client });\n  const [sentinel, near] = useNearViewport({ margin: \"600px 0px\", leaveMargin: \"1200px 0px\" });\n  const { hasMore, loadingMore, loadMore } = list;\n  useEffect(() => {\n    if (p.infinite && near && hasMore && !loadingMore) void loadMore();\n  }, [p.infinite, near, hasMore, loadingMore, loadMore]);\n  const tiers = p.tiers ?? kinds?.tiers;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"content-grid\" aria-busy={list.loading}>\n      {list.loading && !list.items.length ? (\n        <div className={GRID}>\n          {Array.from({ length: 8 }, (_, i) => (\n            <Skeleton key={i} className={p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\"} />\n          ))}\n        </div>\n      ) : list.error && !list.items.length ? (\n        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, list.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={list.reload}>\n            {t(\"common.retry\")}\n          </Button>\n        </div>\n      ) : !list.items.length ? (\n        <div className=\"text-muted-foreground\" role=\"status\">\n          {p.empty ?? t(\"contents.empty\")}\n        </div>\n      ) : (\n        <ol className={GRID}>\n          {list.items.map((card, i) => (\n            <li key={card.id} ref={exposure.track(card.id, i + 1)}>\n              {p.renderCard ? (\n                p.renderCard(card, i + 1)\n              ) : (\n                <ContentCard\n                  card={card}\n                  href={p.href}\n                  shape={p.shape}\n                  groupKinds={p.groupKinds}\n                  chips={p.chips}\n                  tiers={tiers}\n                  labels={p.labels}\n                  owner={p.owner}\n                  ownerHref={p.ownerHref}\n                  decorate={p.decorate}\n                  onOpen={() => exposure.click(card.id, i + 1)}\n                />\n              )}\n            </li>\n          ))}\n        </ol>\n      )}\n      {list.hasMore && (\n        <div ref={sentinel} className=\"grid justify-items-center\">\n          <Button variant=\"outline\" size=\"sm\" disabled={list.loadingMore} onClick={() => void list.loadMore()}>\n            {list.loadingMore ? t(\"contents.loading\") : t(\"contents.loadMore\")}\n          </Button>\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n\n/**\n * What a list does with cards the reader doesn't open: shows them marked\n * (show), leaves them out (hide), or lists them apart, counted, behind a\n * toggle that loads them when opened (collapse).\n */\nexport type LockedCards = \"show\" | \"hide\" | \"collapse\";\n\nconst LOCKED_LEVELS = [\"tier\", \"group\", \"ppv\", \"group_ppv\"] as const;\n\n/** Contents as cards (GET /v1/contents): any sort and filter, paged. */\nexport function ContentGrid({ query, locked = \"show\", ...p }: CardListProps & { query: ContentQuery; locked?: LockedCards }) {\n  const q = useMemo<ContentQuery>(\n    () => ({ ...query, limit: query.limit ?? p.pageSize, ...(locked === \"show\" ? {} : { mode: \"hide\" }) }),\n    [query, p.pageSize, locked],\n  );\n  const list = useContents(q, { client: p.client });\n  return (\n    <>\n      {locked === \"collapse\" && <LockedSection {...p} query={query} />}\n      <CardGrid {...p} list={list} render={JSON.stringify(q)} />\n    </>\n  );\n}\n\n/** A list's locked cards, counted, loaded and shown on opening. */\nfunction LockedSection({ query, ...p }: CardListProps & { query: ContentQuery }) {\n  const m = useMessages();\n  const [open, setOpen] = useState(false);\n  const { count } = useLockedCount(query, { client: p.client });\n  const q = useMemo<ContentQuery | null>(\n    () => (open ? { ...query, mode: \"lock\", access: query.access ?? LOCKED_LEVELS, limit: query.limit ?? p.pageSize } : null),\n    [open, query, p.pageSize],\n  );\n  const list = useContents(q, { client: p.client });\n  const items = useMemo(() => list.items.filter((c) => !c.access.allowed), [list.items]);\n  if (!count) return null;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className=\"grid gap-3 text-sm\" data-ckui=\"locked-cards\">\n      <Button variant=\"outline\" size=\"sm\" className=\"justify-self-start\" aria-expanded={open} onClick={() => setOpen(!open)}>\n        {open ? m.t(\"contents.lockedHide\") : m.plural(\"contents.lockedShow\", count)}\n      </Button>\n      {open && <CardGrid {...p} list={{ ...list, items }} render={JSON.stringify(q)} />}\n    </ContentKitUiRoot>\n  );\n}\n\n/** Search results as cards; nothing until the query has text. */\nexport function SearchResults({ query, ...p }: CardListProps & { query: SearchQuery }) {\n  const { t } = useMessages();\n  const q = useMemo(() => ({ ...query, limit: query.limit ?? p.pageSize }), [query, p.pageSize]);\n  const list = useSearch(q, { client: p.client });\n  if (!query.q.trim()) return null;\n  return <CardGrid surface=\"search\" empty={t(\"contents.noResults\", { q: query.q.trim() })} {...p} list={list} render={JSON.stringify(q)} />;\n}\n\n/** The signed-in reader's history as cards, each removable, with a clear-all. */\nexport function ContentHistory({ query = {}, ...p }: CardListProps & { query?: HistoryQuery }) {\n  const { t } = useMessages();\n  const ctx = useContext(ContentKitContext);\n  const q = useMemo(() => ({ ...query, limit: query.limit ?? p.pageSize }), [query, p.pageSize]);\n  const list = useHistory(q, { client: p.client });\n  const forget = useAction(\"history.forget\");\n  if (ctx?.viewer === null) return <p className=\"text-muted-foreground\">{t(\"contents.historySignedOut\")}</p>;\n  return (\n    <div className=\"grid gap-3\" data-ckui=\"content-history\">\n      {list.items.length > 0 && (\n        <Button size=\"sm\" variant=\"outline\" className=\"justify-self-end\" disabled={forget.pending} onClick={() => void forget.run(() => list.forget(query.kind ? { kind: query.kind } : {}))}>\n          {t(\"contents.clearHistory\")}\n        </Button>\n      )}\n      <CardGrid\n        surface=\"history\"\n        empty={t(\"contents.historyEmpty\")}\n        {...p}\n        list={list}\n        render={JSON.stringify(q)}\n        renderCard={\n          p.renderCard ??\n          ((card) => (\n            <ContentCard\n              card={card}\n              href={p.href}\n              shape={p.shape}\n              groupKinds={p.groupKinds}\n              chips={p.chips}\n              tiers={p.tiers}\n              labels={p.labels}\n              owner={p.owner}\n              ownerHref={p.ownerHref}\n              decorate={p.decorate}\n            >\n              <Button size=\"xs\" variant=\"ghost\" className=\"justify-self-start\" disabled={forget.pending} onClick={() => void forget.run(() => list.forget({ content_id: card.id }))}>\n                {t(\"contents.removeFromHistory\")}\n              </Button>\n            </ContentCard>\n          ))\n        }\n      />\n    </div>\n  );\n}\n\nexport interface ContentRailProps extends Omit<CardListProps, \"infinite\" | \"empty\"> {\n  /** The rail's heading. */\n  title: ReactNode;\n  /** Contents like this one. */\n  similar?: string;\n  /** For the signed-in reader. */\n  recommendations?: boolean;\n  /** The reader's history: { status: \"in_progress\" } is a continue-watching rail. */\n  history?: HistoryQuery;\n  /** An ordered group's members in its order: a featured rail (its windows apply). */\n  group?: string;\n  /** Any list: a sort and filters. */\n  list?: ContentQuery;\n  /** Filters and reader options of a similar or recommended rail. */\n  query?: RailQuery;\n  /** A link beside the heading, e.g. to the whole list. */\n  more?: ReactNode;\n}\n\n/**\n * A horizontal row of contents: similar, recommended, the reader's history,\n * an ordered group's members or any list. It hides itself when it has none or\n * the site runs without what it needs.\n */\nexport function ContentRail({ title, similar, recommendations, history, group, list: listQuery, query = {}, more, ...p }: ContentRailProps) {\n  const limit = query.limit ?? p.pageSize ?? 12;\n  const q = useMemo(() => ({ ...query, limit }), [query, limit]);\n  const listing = useMemo(\n    () => (listQuery ? { ...listQuery, limit: listQuery.limit ?? limit } : group ? { groups: [group], sort: \"position\" as const, limit } : null),\n    [listQuery, group, limit],\n  );\n  const like = useSimilar(recommendations || history || listing ? null : similar, q, { client: p.client });\n  const mine = useRecommendations(recommendations ? q : null, { client: p.client });\n  const seen = useHistory(history ? { ...history, limit: history.limit ?? limit } : null, { client: p.client });\n  const listed = useContents(listing, { client: p.client });\n  const rail: UseRail = recommendations\n    ? mine\n    : history || listing\n      ? (() => {\n          const l = history ? seen : listed;\n          return { items: l.items, loading: l.loading, error: l.error, unavailable: l.error?.code === \"not_configured\", reload: l.reload };\n        })()\n      : like;\n  const { kinds } = useKinds({ client: p.client });\n  const surface = p.surface ?? (recommendations ? \"recommendations\" : history ? \"history\" : group ? \"featured\" : listing ? \"list\" : \"similar\");\n  const exposure = useExposure(rail.items, { surface, render: JSON.stringify([similar, recommendations, history, group, listing, q]), client: p.client });\n  const source = similar || recommendations || history || group || listing;\n  if (!source || rail.unavailable || (!rail.loading && !rail.items.length)) return null;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 text-sm\", p.className)} data-ckui=\"content-rail\" data-surface={surface}>\n      <div className=\"flex items-baseline justify-between gap-2\">\n        <h2 className=\"text-base font-semibold\">{title}</h2>\n        {more}\n      </div>\n      <ol className=\"flex snap-x gap-4 overflow-x-auto pb-2\">\n        {(rail.loading && !rail.items.length ? Array.from({ length: 6 }, () => null) : rail.items).map((card, i) => (\n          <li key={card?.id ?? i} className=\"w-36 shrink-0 snap-start sm:w-44\" ref={card ? exposure.track(card.id, i + 1) : undefined}>\n            {!card ? (\n              <Skeleton className={p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\"} />\n            ) : p.renderCard ? (\n              p.renderCard(card, i + 1)\n            ) : (\n              <ContentCard\n                card={card}\n                href={p.href}\n                shape={p.shape}\n                groupKinds={p.groupKinds}\n                chips={p.chips}\n                tiers={p.tiers ?? kinds?.tiers}\n                labels={p.labels}\n                owner={p.owner}\n                ownerHref={p.ownerHref}\n                decorate={p.decorate}\n                onOpen={() => exposure.click(card.id, i + 1)}\n              />\n            )}\n          </li>\n        ))}\n      </ol>\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/content/grid.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useEffect, useMemo, useState, type CSSProperties, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ContentQuery, HistoryQuery, RailQuery, SearchQuery } from \"../../client/discovery.js\";\nimport type { Card } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext } from \"../../react/context.js\";\nimport { useContents, useExposure, useHistory, useLockedCount, useRecommendations, useSearch, useSimilar, type UseRail } from \"../../react/discovery.js\";\nimport { useKinds } from \"../../react/groups.js\";\nimport type { UseList } from \"../../react/use-resource.js\";\nimport { useNearViewport } from \"../../react/viewport.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { contentError, useAction } from \"../social/parts.js\";\nimport { ContentCard, type ContentCardProps } from \"./card.js\";\n\nexport interface CardListProps extends Omit<ContentCardProps, \"card\" | \"onOpen\" | \"children\" | \"className\"> {\n  /** Where the list is, for exposures and click attribution: \"home\", \"search\", \"similar\". */\n  surface?: string;\n  /** Loads the next page as the end nears, instead of a button. */\n  infinite?: boolean;\n  /** A card's entry instead of ContentCard. */\n  renderCard?: (card: Card, position: number) => ReactNode;\n  /** Shown when nothing matches. */\n  empty?: ReactNode;\n  pageSize?: number;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n  /** Opt into a fluid grid with no desktop column ceiling. */\n  grid?: CardGridLayout;\n}\n\nconst GRID = \"grid grid-cols-[repeat(auto-fill,minmax(min(100%,10rem),1fr))] gap-x-4 gap-y-6\";\n\nexport interface CardGridLayout {\n  /** Minimum desktop card width in CSS pixels. Cards grow to fill available space. */\n  minCardWidth: number;\n  /** Equal-width columns below the desktop breakpoint. Default 2. */\n  mobileColumns?: number;\n}\n\n/** Shared by complete lists, release-day sections and grid-style previews. */\nexport function cardGridLayout(layout?: CardGridLayout): { className: string; style?: CSSProperties } {\n  if (!layout) return { className: GRID };\n  const width = Number.isFinite(layout.minCardWidth) ? Math.max(1, layout.minCardWidth) : 160;\n  const columns = layout.mobileColumns !== undefined && Number.isFinite(layout.mobileColumns) ? Math.max(1, Math.floor(layout.mobileColumns)) : 2;\n  return {\n    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))]\",\n    style: { \"--ckui-card-min-width\": `${width}px`, \"--ckui-card-mobile-columns\": columns } as CSSProperties,\n  };\n}\n\n/** A list's cards in a responsive grid, paged, with exposures and click signals. */\nexport function CardGrid({ list, render, ...p }: CardListProps & { list: UseList<Card>; render: string }) {\n  const m = useMessages();\n  const { t } = m;\n  const { kinds } = useKinds({ client: p.client });\n  const exposure = useExposure(list.items, { surface: p.surface ?? \"list\", render, client: p.client });\n  const [sentinel, near] = useNearViewport({ margin: \"600px 0px\", leaveMargin: \"1200px 0px\" });\n  const { hasMore, loadingMore, loadMore } = list;\n  useEffect(() => {\n    if (p.infinite && near && hasMore && !loadingMore) void loadMore();\n  }, [p.infinite, near, hasMore, loadingMore, loadMore]);\n  const tiers = p.tiers ?? kinds?.tiers;\n  const layout = cardGridLayout(p.grid);\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"content-grid\" aria-busy={list.loading}>\n      {list.loading && !list.items.length ? (\n        <div className={layout.className} style={layout.style}>\n          {Array.from({ length: 8 }, (_, i) => (\n            <Skeleton key={i} className={p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\"} />\n          ))}\n        </div>\n      ) : list.error && !list.items.length ? (\n        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, list.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={list.reload}>\n            {t(\"common.retry\")}\n          </Button>\n        </div>\n      ) : !list.items.length ? (\n        <div className=\"text-muted-foreground\" role=\"status\">\n          {p.empty ?? t(\"contents.empty\")}\n        </div>\n      ) : (\n        <ol className={layout.className} style={layout.style}>\n          {list.items.map((card, i) => (\n            <li key={card.id} ref={exposure.track(card.id, i + 1)}>\n              {p.renderCard ? (\n                p.renderCard(card, i + 1)\n              ) : (\n                <ContentCard\n                  card={card}\n                  href={p.href}\n                  shape={p.shape}\n                  loadMedia={p.loadMedia}\n                  groupKinds={p.groupKinds}\n                  chips={p.chips}\n                  filterEntity={p.filterEntity}\n                  metadata={p.metadata}\n                  showCounts={p.showCounts}\n                  tiers={tiers}\n                  labels={p.labels}\n                  owner={p.owner}\n                  ownerHref={p.ownerHref}\n                  decorate={p.decorate}\n                  onOpen={() => exposure.click(card.id, i + 1)}\n                />\n              )}\n            </li>\n          ))}\n        </ol>\n      )}\n      {list.hasMore && (\n        <div ref={sentinel} className=\"grid justify-items-center\">\n          <Button variant=\"outline\" size=\"sm\" disabled={list.loadingMore} onClick={() => void list.loadMore()}>\n            {list.loadingMore ? t(\"contents.loading\") : t(\"contents.loadMore\")}\n          </Button>\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n\n/**\n * What a list does with cards the reader doesn't open: shows them marked\n * (show), leaves them out (hide), or lists them apart, counted, behind a\n * toggle that loads them when opened (collapse).\n */\nexport type LockedCards = \"show\" | \"hide\" | \"collapse\";\n\nconst LOCKED_LEVELS = [\"tier\", \"group\", \"ppv\", \"group_ppv\"] as const;\n\n/** Contents as cards (GET /v1/contents): any sort and filter, paged. */\nexport function ContentGrid({ query, locked = \"show\", ...p }: CardListProps & { query: ContentQuery; locked?: LockedCards }) {\n  const q = useMemo<ContentQuery>(\n    () => ({ ...query, limit: query.limit ?? p.pageSize, ...(locked === \"show\" ? {} : { mode: \"hide\" }) }),\n    [query, p.pageSize, locked],\n  );\n  const list = useContents(q, { client: p.client });\n  return (\n    <>\n      {locked === \"collapse\" && <LockedSection {...p} query={query} />}\n      <CardGrid {...p} list={list} render={JSON.stringify(q)} />\n    </>\n  );\n}\n\n/** A list's locked cards, counted, loaded and shown on opening. */\nfunction LockedSection({ query, ...p }: CardListProps & { query: ContentQuery }) {\n  const m = useMessages();\n  const [open, setOpen] = useState(false);\n  const { count } = useLockedCount(query, { client: p.client });\n  const q = useMemo<ContentQuery | null>(\n    () => (open ? { ...query, mode: \"lock\", access: query.access ?? LOCKED_LEVELS, limit: query.limit ?? p.pageSize } : null),\n    [open, query, p.pageSize],\n  );\n  const list = useContents(q, { client: p.client });\n  const items = useMemo(() => list.items.filter((c) => !c.access.allowed), [list.items]);\n  if (!count) return null;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className=\"grid gap-3 text-sm\" data-ckui=\"locked-cards\">\n      <Button variant=\"outline\" size=\"sm\" className=\"justify-self-start\" aria-expanded={open} onClick={() => setOpen(!open)}>\n        {open ? m.t(\"contents.lockedHide\") : m.plural(\"contents.lockedShow\", count)}\n      </Button>\n      {open && <CardGrid {...p} list={{ ...list, items }} render={JSON.stringify(q)} />}\n    </ContentKitUiRoot>\n  );\n}\n\n/** Search results as cards; nothing until the query has text. */\nexport function SearchResults({ query, ...p }: CardListProps & { query: SearchQuery }) {\n  const { t } = useMessages();\n  const q = useMemo(() => ({ ...query, limit: query.limit ?? p.pageSize }), [query, p.pageSize]);\n  const list = useSearch(q, { client: p.client });\n  if (!query.q.trim()) return null;\n  return <CardGrid surface=\"search\" empty={t(\"contents.noResults\", { q: query.q.trim() })} {...p} list={list} render={JSON.stringify(q)} />;\n}\n\n/** The signed-in reader's history as cards, each removable, with a clear-all. */\nexport function ContentHistory({ query = {}, ...p }: CardListProps & { query?: HistoryQuery }) {\n  const { t } = useMessages();\n  const ctx = useContext(ContentKitContext);\n  const q = useMemo(() => ({ ...query, limit: query.limit ?? p.pageSize }), [query, p.pageSize]);\n  const list = useHistory(q, { client: p.client });\n  const forget = useAction(\"history.forget\");\n  if (ctx?.viewer === null) return <p className=\"text-muted-foreground\">{t(\"contents.historySignedOut\")}</p>;\n  return (\n    <div className=\"grid gap-3\" data-ckui=\"content-history\">\n      {list.items.length > 0 && (\n        <Button size=\"sm\" variant=\"outline\" className=\"justify-self-end\" disabled={forget.pending} onClick={() => void forget.run(() => list.forget(query.kind ? { kind: query.kind } : {}))}>\n          {t(\"contents.clearHistory\")}\n        </Button>\n      )}\n      <CardGrid\n        surface=\"history\"\n        empty={t(\"contents.historyEmpty\")}\n        {...p}\n        list={list}\n        render={JSON.stringify(q)}\n        renderCard={\n          p.renderCard ??\n          ((card) => (\n            <ContentCard\n              card={card}\n              href={p.href}\n              shape={p.shape}\n              loadMedia={p.loadMedia}\n              groupKinds={p.groupKinds}\n              chips={p.chips}\n              filterEntity={p.filterEntity}\n              metadata={p.metadata}\n              showCounts={p.showCounts}\n              tiers={p.tiers}\n              labels={p.labels}\n              owner={p.owner}\n              ownerHref={p.ownerHref}\n              decorate={p.decorate}\n            >\n              <Button size=\"xs\" variant=\"ghost\" className=\"justify-self-start\" disabled={forget.pending} onClick={() => void forget.run(() => list.forget({ content_id: card.id }))}>\n                {t(\"contents.removeFromHistory\")}\n              </Button>\n            </ContentCard>\n          ))\n        }\n      />\n    </div>\n  );\n}\n\nexport interface ContentRailProps extends Omit<CardListProps, \"infinite\" | \"empty\"> {\n  /** The rail's heading. */\n  title: ReactNode;\n  /** Contents like this one. */\n  similar?: string;\n  /** For the signed-in reader. */\n  recommendations?: boolean;\n  /** The reader's history: { status: \"in_progress\" } is a continue-watching rail. */\n  history?: HistoryQuery;\n  /** An ordered group's members in its order: a featured rail (its windows apply). */\n  group?: string;\n  /** Any list: a sort and filters. */\n  list?: ContentQuery;\n  /** Filters and reader options of a similar or recommended rail. */\n  query?: RailQuery;\n  /** A link beside the heading, e.g. to the whole list. */\n  more?: ReactNode;\n}\n\n/**\n * A horizontal row of contents: similar, recommended, the reader's history,\n * an ordered group's members or any list. It hides itself when it has none or\n * the site runs without what it needs.\n */\nexport function ContentRail({ title, similar, recommendations, history, group, list: listQuery, query = {}, more, ...p }: ContentRailProps) {\n  const limit = query.limit ?? p.pageSize ?? 12;\n  const q = useMemo(() => ({ ...query, limit }), [query, limit]);\n  const listing = useMemo(\n    () => (listQuery ? { ...listQuery, limit: listQuery.limit ?? limit } : group ? { groups: [group], sort: \"position\" as const, limit } : null),\n    [listQuery, group, limit],\n  );\n  const like = useSimilar(recommendations || history || listing ? null : similar, q, { client: p.client });\n  const mine = useRecommendations(recommendations ? q : null, { client: p.client });\n  const seen = useHistory(history ? { ...history, limit: history.limit ?? limit } : null, { client: p.client });\n  const listed = useContents(listing, { client: p.client });\n  const rail: UseRail = recommendations\n    ? mine\n    : history || listing\n      ? (() => {\n          const l = history ? seen : listed;\n          return { items: l.items, loading: l.loading, error: l.error, unavailable: l.error?.code === \"not_configured\", reload: l.reload };\n        })()\n      : like;\n  const { kinds } = useKinds({ client: p.client });\n  const surface = p.surface ?? (recommendations ? \"recommendations\" : history ? \"history\" : group ? \"featured\" : listing ? \"list\" : \"similar\");\n  const exposure = useExposure(rail.items, { surface, render: JSON.stringify([similar, recommendations, history, group, listing, q]), client: p.client });\n  const source = similar || recommendations || history || group || listing;\n  const layout = p.grid ? cardGridLayout(p.grid) : undefined;\n  if (!source || rail.unavailable || (!rail.loading && !rail.items.length)) return null;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 text-sm\", p.className)} data-ckui=\"content-rail\" data-surface={surface}>\n      <div className=\"flex items-baseline justify-between gap-2\">\n        <h2 className=\"text-base font-semibold\">{title}</h2>\n        {more}\n      </div>\n      <ol className={layout?.className ?? \"flex snap-x gap-4 overflow-x-auto pb-2\"} style={layout?.style}>\n        {(rail.loading && !rail.items.length ? Array.from({ length: 6 }, () => null) : rail.items).map((card, i) => (\n          <li key={card?.id ?? i} className={layout ? undefined : \"w-36 shrink-0 snap-start sm:w-44\"} ref={card ? exposure.track(card.id, i + 1) : undefined}>\n            {!card ? (\n              <Skeleton className={p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\"} />\n            ) : p.renderCard ? (\n              p.renderCard(card, i + 1)\n            ) : (\n              <ContentCard\n                card={card}\n                href={p.href}\n                shape={p.shape}\n                loadMedia={p.loadMedia}\n                groupKinds={p.groupKinds}\n                chips={p.chips}\n                filterEntity={p.filterEntity}\n                metadata={p.metadata}\n                showCounts={p.showCounts}\n                tiers={p.tiers ?? kinds?.tiers}\n                labels={p.labels}\n                owner={p.owner}\n                ownerHref={p.ownerHref}\n                decorate={p.decorate}\n                onOpen={() => exposure.click(card.id, i + 1)}\n              />\n            )}\n          </li>\n        ))}\n      </ol>\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,5 +1,7 @@
-export { ContentCard, OwnerChip, PostCard, lockLabel, type ContentCardProps, type PostCardProps } from './card.js';
-export { CardGrid, ContentGrid, ContentHistory, ContentRail, SearchResults, type CardListProps, type ContentRailProps, type LockedCards } from './grid.js';
+export { ContentCard, OwnerChip, PostCard, lockLabel, type CardMetadata, type ContentCardProps, type PostCardProps } from './card.js';
+export { CardGrid, ContentGrid, ContentHistory, ContentRail, SearchResults, type CardGridLayout, type CardListProps, type ContentRailProps, type LockedCards } from './grid.js';
+export { DailyReleases, type DailyReleasesProps } from './daily-releases.js';
+export { PopularContentGrid, type PopularContentGridProps } from './popular.js';
 export { SearchBox, type SearchBoxProps } from './search.js';
 export { ReaderSettings, type ReaderSettingsProps } from './reader-settings.js';
 export { ContentFilterSettings, ReleaseDateIndex, type ContentFilterSettingsProps, type ReleaseDateIndexProps } from './filters.js';

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

@@ -0,0 +1,11 @@
+import { PopularPeriod, PopularQuery } from '../../client/discovery.js';
+import { CardListProps, LockedCards } from './grid.js';
+export interface PopularContentGridProps extends Omit<CardListProps, "infinite"> {
+    query?: PopularQuery;
+    /** Controlled period; otherwise the selector starts at 7d. */
+    period?: PopularPeriod;
+    onPeriodChange?: (period: PopularPeriod) => void;
+    locked?: LockedCards;
+}
+/** A popularity listing with matched score/age windows and infinite paging. */
+export declare function PopularContentGrid({ query, period, onPeriodChange, locked, ...p }: PopularContentGridProps): import('react').JSX.Element;

package/dist/components/content/popular.js

@@ -0,0 +1,49 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { ContentKitUiRoot as t } from "../../scope.js";
+import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../../ui/select.js";
+import { popularQuery as s } from "../../client/discovery.js";
+import { ContentGrid as c } from "./grid.js";
+import { useMemo as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { cn as p } from "cn";
+//#region src/components/content/popular.tsx
+var m = [
+	"7d",
+	"90d",
+	"365d",
+	"all"
+];
+function h({ query: h, period: g, onPeriodChange: _, locked: v, ...y }) {
+	let b = e(), [x, S] = u("7d"), C = g ?? x, w = l(() => s(C, h), [C, h]), T = (e) => e === "all" ? b.t("listing.period_all") : b.plural("listing.pastDays", Number(e.slice(0, -1)));
+	return /* @__PURE__ */ f(t, {
+		appearance: y.appearance,
+		className: p("grid gap-4 text-sm", y.className),
+		"data-ckui": "popular-grid",
+		children: [/* @__PURE__ */ f(n, {
+			value: C,
+			onValueChange: (e) => {
+				if (!e || !m.includes(e)) return;
+				let t = e;
+				g === void 0 && S(t), _?.(t);
+			},
+			children: [/* @__PURE__ */ d(a, {
+				className: "w-fit min-w-40",
+				"aria-label": b.t("listing.popularPeriod"),
+				children: /* @__PURE__ */ d(o, { children: T(C) })
+			}), /* @__PURE__ */ d(r, { children: m.map((e) => /* @__PURE__ */ d(i, {
+				value: e,
+				children: T(e)
+			}, e)) })]
+		}), /* @__PURE__ */ d(c, {
+			...y,
+			surface: y.surface ?? "popular",
+			query: w,
+			locked: v,
+			infinite: !0
+		})]
+	});
+}
+//#endregion
+export { h as PopularContentGrid };
+
+//# sourceMappingURL=popular.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popular.js","names":[],"sources":["../../../src/components/content/popular.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useMemo, useState } from \"react\";\nimport { popularQuery, type PopularPeriod, type PopularQuery } from \"../../client/discovery.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"#ckui/ui/select\";\nimport { ContentGrid, type CardListProps, type LockedCards } from \"./grid.js\";\n\nexport interface PopularContentGridProps extends Omit<CardListProps, \"infinite\"> {\n  query?: PopularQuery;\n  /** Controlled period; otherwise the selector starts at 7d. */\n  period?: PopularPeriod;\n  onPeriodChange?: (period: PopularPeriod) => void;\n  locked?: LockedCards;\n}\n\nconst PERIODS: readonly PopularPeriod[] = [\"7d\", \"90d\", \"365d\", \"all\"];\n\n/** A popularity listing with matched score/age windows and infinite paging. */\nexport function PopularContentGrid({ query, period, onPeriodChange, locked, ...p }: PopularContentGridProps) {\n  const m = useMessages();\n  const [ownPeriod, setOwnPeriod] = useState<PopularPeriod>(\"7d\");\n  const current = period ?? ownPeriod;\n  const list = useMemo(() => popularQuery(current, query), [current, query]);\n  const label = (value: PopularPeriod) => value === \"all\" ? m.t(\"listing.period_all\") : m.plural(\"listing.pastDays\", Number(value.slice(0, -1)));\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"popular-grid\">\n      <Select value={current} onValueChange={(value) => {\n        if (!value || !PERIODS.includes(value as PopularPeriod)) return;\n        const next = value as PopularPeriod;\n        if (period === undefined) setOwnPeriod(next);\n        onPeriodChange?.(next);\n      }}>\n        <SelectTrigger className=\"w-fit min-w-40\" aria-label={m.t(\"listing.popularPeriod\")}><SelectValue>{label(current)}</SelectValue></SelectTrigger>\n        <SelectContent>{PERIODS.map((value) => <SelectItem key={value} value={value}>{label(value)}</SelectItem>)}</SelectContent>\n      </Select>\n      <ContentGrid {...p} surface={p.surface ?? \"popular\"} query={list} locked={locked} infinite />\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,IAAM,IAAoC;CAAC;CAAM;CAAO;CAAQ;AAAK;AAGrE,SAAgB,EAAmB,EAAE,UAAO,WAAQ,mBAAgB,WAAQ,GAAG,KAA8B;CAC3G,IAAM,IAAI,EAAY,GAChB,CAAC,GAAW,KAAgB,EAAwB,IAAI,GACxD,IAAU,KAAU,GACpB,IAAO,QAAc,EAAa,GAAS,CAAK,GAAG,CAAC,GAAS,CAAK,CAAC,GACnE,KAAS,MAAyB,MAAU,QAAQ,EAAE,EAAE,oBAAoB,IAAI,EAAE,OAAO,oBAAoB,OAAO,EAAM,MAAM,GAAG,EAAE,CAAC,CAAC;CAC7I,OACE,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EAAxG,UAAA,CACE,kBAAC,GAAD;GAAQ,OAAO;GAAS,gBAAgB,MAAU;IAChD,IAAI,CAAC,KAAS,CAAC,EAAQ,SAAS,CAAsB,GAAG;IACzD,IAAM,IAAO;IAEb,AADI,MAAW,KAAA,KAAW,EAAa,CAAI,GAC3C,IAAiB,CAAI;GACvB;GALA,UAAA,CAME,kBAAC,GAAD;IAAe,WAAU;IAAiB,cAAY,EAAE,EAAE,uBAAuB;IAAG,UAAA,kBAAC,GAAD,EAAA,UAAc,EAAM,CAAO,EAAe,CAAA;GAAgB,CAAA,GAC9I,kBAAC,GAAD,EAAA,UAAgB,EAAQ,KAAK,MAAU,kBAAC,GAAD;IAA+B;IAAQ,UAAA,EAAM,CAAK;GAAc,GAA/C,CAA+C,CAAC,EAAiB,CAAA,CACnH;EACR,CAAA,GAAA,kBAAC,GAAD;GAAa,GAAI;GAAG,SAAS,EAAE,WAAW;GAAW,OAAO;GAAc;GAAQ,UAAA;EAAU,CAAA,CAC5E;;AAEtB"}