@openrails/contentkit-ui 0.93.1 → 0.95.0

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

@@ -0,0 +1,167 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { ContentKitUiRoot as t } from "../../scope.js";
+import { useContentScope as n } from "../../react/use-resource.js";
+import { Button as r } from "../../ui/button.js";
+import { useNearViewport as i } from "../../react/viewport.js";
+import { Skeleton as a } from "../../ui/skeleton.js";
+import { contentError as o } from "../social/parts.js";
+import { useDailyReleases as s, useExposure as c } from "../../react/discovery.js";
+import { ContentCard as l } from "./card.js";
+import { cardGridLayout as u } from "./grid.js";
+import { useCallback as d, useId as f, useMemo as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { cn as _ } from "cn";
+import { ArrowDown01Icon as v } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as y } from "@hugeicons/react";
+//#region src/components/content/daily-releases.tsx
+var b = (e, t) => Number.isFinite(e) ? Math.max(0, Math.floor(e)) : t;
+function x({ query: i, initialVisible: c = 30, revealStep: l = 30, ...d }) {
+	let f = e(), { scope: m } = n(d.client), v = p(() => ({
+		days: 10,
+		time_zone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+		...i
+	}), [i]), y = s(v, { client: d.client }), x = u(d.grid), C = p(() => y.data?.days.filter((e) => e.contents.length).sort((e, t) => t.date.localeCompare(e.date)) ?? [], [y.data]), w = b(c, 30);
+	return /* @__PURE__ */ h(t, {
+		appearance: d.appearance,
+		className: _("grid gap-6 text-sm", d.className),
+		"data-ckui": "daily-releases",
+		"aria-busy": y.loading,
+		children: y.loading && !y.data ? /* @__PURE__ */ h("div", {
+			className: x.className,
+			style: x.style,
+			children: Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ h(a, { className: "aspect-[3/4]" }, t))
+		}) : y.error && !y.data ? /* @__PURE__ */ g("div", {
+			role: "alert",
+			className: "grid justify-items-start gap-2",
+			children: [/* @__PURE__ */ h("p", {
+				className: "text-destructive",
+				children: o(f, y.error)
+			}), /* @__PURE__ */ h(r, {
+				size: "sm",
+				variant: "outline",
+				onClick: y.reload,
+				children: f.t("common.retry")
+			})]
+		}) : C.length ? C.map((e) => {
+			let t = Math.min(w, e.contents.length);
+			return w -= t, /* @__PURE__ */ h(S, {
+				day: e,
+				initial: t,
+				step: Math.max(1, b(l, 30)),
+				cardProps: d
+			}, JSON.stringify([
+				m,
+				v,
+				y.data?.from_date,
+				e.date
+			]));
+		}) : /* @__PURE__ */ h("p", {
+			role: "status",
+			className: "text-muted-foreground",
+			children: d.empty ?? f.t("contents.empty")
+		})
+	});
+}
+function S({ day: t, initial: n, step: i, cardProps: a }) {
+	let o = e(), s = f(), [l, d] = m(n > 0), [b, x] = m(n), S = p(() => t.contents.slice(0, b), [t.contents, b]), w = p(() => l ? S : [], [l, S]), T = c(w, {
+		surface: a.surface ?? "releases",
+		render: t.date,
+		client: a.client
+	}), E = u(a.grid), D = new Intl.DateTimeFormat(o.language, {
+		dateStyle: "full",
+		timeZone: "UTC"
+	}).format(/* @__PURE__ */ new Date(`${t.date}T12:00:00Z`));
+	return /* @__PURE__ */ g("section", {
+		"data-ckui": "release-day",
+		"data-date": t.date,
+		children: [/* @__PURE__ */ h("h2", { children: /* @__PURE__ */ g(r, {
+			id: `${s}-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": l,
+			"aria-controls": `${s}-contents`,
+			onClick: () => {
+				!l && !b && x(Math.min(i, t.contents.length)), d(!l);
+			},
+			children: [
+				/* @__PURE__ */ h(y, {
+					icon: v,
+					strokeWidth: 2,
+					className: _("size-5 shrink-0 transition-transform duration-200 motion-reduce:transition-none", !l && "-rotate-90"),
+					"aria-hidden": !0
+				}),
+				/* @__PURE__ */ h("time", {
+					dateTime: t.date,
+					children: D
+				}),
+				/* @__PURE__ */ h("span", {
+					className: "ml-auto shrink-0 text-sm font-normal text-muted-foreground",
+					children: o.plural("contents.items", t.contents.length)
+				})
+			]
+		}) }), /* @__PURE__ */ h("div", {
+			id: `${s}-contents`,
+			role: "region",
+			"aria-labelledby": `${s}-heading`,
+			"aria-hidden": !l,
+			inert: !l,
+			className: _("grid transition-[grid-template-rows,opacity] duration-250 ease-out motion-reduce:transition-none", l ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"),
+			children: /* @__PURE__ */ g("div", {
+				className: "min-h-0 overflow-hidden",
+				children: [/* @__PURE__ */ h("ol", {
+					className: _(E.className, "pt-2"),
+					style: E.style,
+					children: S.map((e, t) => /* @__PURE__ */ h(C, {
+						card: e,
+						open: l,
+						position: t + 1,
+						exposure: T,
+						cardProps: a
+					}, e.id))
+				}), b < t.contents.length && /* @__PURE__ */ h("div", {
+					className: "flex justify-center pt-5 pb-1",
+					children: /* @__PURE__ */ h(r, {
+						type: "button",
+						variant: "outline",
+						onClick: () => x((e) => Math.min(e + i, t.contents.length)),
+						children: o.t("contents.showMore")
+					})
+				})]
+			})
+		})]
+	});
+}
+function C({ card: e, open: t, position: n, exposure: r, cardProps: a }) {
+	let [o, s] = i({ margin: "0px" }), c = p(() => r.track(e.id, n), [
+		r,
+		e.id,
+		n
+	]), u = d((e) => {
+		o(e), c(e);
+	}, [o, c]);
+	return /* @__PURE__ */ h("li", {
+		ref: u,
+		children: /* @__PURE__ */ h(l, {
+			card: e,
+			href: a.href,
+			shape: a.shape,
+			loadMedia: t && s,
+			groupKinds: a.groupKinds,
+			chips: a.chips,
+			filterEntity: a.filterEntity,
+			metadata: a.metadata,
+			showCounts: a.showCounts,
+			tiers: a.tiers,
+			labels: a.labels,
+			owner: a.owner,
+			ownerHref: a.ownerHref,
+			decorate: a.decorate,
+			onOpen: () => r.click(e.id, n)
+		})
+	});
+}
+//#endregion
+export { x as DailyReleases };
+
+//# sourceMappingURL=daily-releases.js.map

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/filters.d.ts

@@ -12,7 +12,7 @@ export interface ContentFilterSettingsProps {
     className?: string;
     appearance?: ContentKitUiAppearance;
 }
-/** The signed-in reader's content filters: show or hide each configured group. */
+/** Show or hide configured content for this browser or signed-in account. */
 export declare function ContentFilterSettings(p: ContentFilterSettingsProps): import('react').JSX.Element | null;
 export interface ReleaseDateIndexProps {
     /** Which contents count: the listing's filters. */

package/dist/components/content/filters.js

@@ -21,10 +21,6 @@ function v(r) {
 		"data-ckui": "content-filters",
 		children: e
 	});
-	if (b?.viewer === null) return C(/* @__PURE__ */ h("p", {
-		className: "text-muted-foreground",
-		children: v("contents.filtersSignedOut")
-	}));
 	if (!x.filters) return x.error ? C(/* @__PURE__ */ h(o, { children: s(d, x.error) })) : C(/* @__PURE__ */ h(a, { className: "h-24 w-full" }));
 	let w = x.filters;
 	return !w.filters.length && r.includeDeleted === !1 ? null : C(/* @__PURE__ */ g(m, { children: [
@@ -47,7 +43,7 @@ function v(r) {
 				})]
 			}, e.entity.id))
 		}) : null,
-		r.includeDeleted !== !1 && /* @__PURE__ */ g("div", {
+		r.includeDeleted !== !1 && b?.viewer !== null && /* @__PURE__ */ g("div", {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ h(l, {
 				id: `${y}-deleted`,

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

@@ -1 +1 @@
-{"version":3,"file":"filters.js","names":[],"sources":["../../../src/components/content/filters.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useId } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ReleaseDatesQuery } from \"../../client/discovery.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext, type ContentKitErrorHandler } from \"../../react/context.js\";\nimport { useContentFilters, useReleaseDates } from \"../../react/discovery.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Label } from \"#ckui/ui/label\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { Switch } from \"#ckui/ui/switch\";\nimport { contentError, ErrorLine, useAction } from \"../social/parts.js\";\n\nexport interface ContentFilterSettingsProps {\n  /** Labels and group names in this language; default the provider's. */\n  language?: string;\n  /** Offer listing deleted content the reader holds. Default true. */\n  includeDeleted?: boolean;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** The signed-in reader's content filters: show or hide each configured group. */\nexport function ContentFilterSettings(p: ContentFilterSettingsProps) {\n  const m = useMessages();\n  const { t } = m;\n  const id = useId();\n  const ctx = useContext(ContentKitContext);\n  const f = useContentFilters({ language: p.language, client: p.client });\n  const save = useAction(\"filters.save\", p.onError);\n  const root = (children: React.ReactNode) => (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 text-sm\", p.className)} data-ckui=\"content-filters\">\n      {children}\n    </ContentKitUiRoot>\n  );\n  if (ctx?.viewer === null) return root(<p className=\"text-muted-foreground\">{t(\"contents.filtersSignedOut\")}</p>);\n  if (!f.filters) {\n    if (f.error) return root(<ErrorLine>{contentError(m, f.error)}</ErrorLine>);\n    return root(<Skeleton className=\"h-24 w-full\" />);\n  }\n  const filters = f.filters;\n  if (!filters.filters.length && p.includeDeleted === false) return null;\n  return root(\n    <>\n      {filters.filters.length ? (\n        <ul className=\"grid divide-y divide-border rounded-lg border border-border\">\n          {filters.filters.map((x) => (\n            <li key={x.entity.id} className=\"flex flex-wrap items-center gap-3 p-3\" data-ckui=\"content-filter\" data-slug={x.entity.slug} data-visible={x.visible}>\n              <Switch id={`${id}-${x.entity.id}`} checked={x.visible} disabled={save.pending} onCheckedChange={(v) => void save.run(() => f.setVisible(x.entity.id, v))} />\n              <Label htmlFor={`${id}-${x.entity.id}`} className=\"min-w-0 flex-1\">\n                {x.label || x.entity.name}\n              </Label>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n      {p.includeDeleted !== false && (\n        <div className=\"flex items-center gap-3\">\n          <Switch id={`${id}-deleted`} checked={filters.include_deleted} disabled={save.pending} onCheckedChange={(v) => void save.run(() => f.setIncludeDeleted(v))} />\n          <Label htmlFor={`${id}-deleted`}>{t(\"contents.includeDeleted\")}</Label>\n        </div>\n      )}\n      <ErrorLine error={save.error} />\n    </>,\n  );\n}\n\nexport interface ReleaseDateIndexProps {\n  /** Which contents count: the listing's filters. */\n  query?: ReleaseDatesQuery;\n  /** The bucket chosen (a day YYYY-MM-DD or month YYYY-MM): list with released_on set to it. */\n  selected?: string;\n  onSelect?: (date: string) => void;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** The release date index: per month or day, newest first, how many contents and how many free. */\nexport function ReleaseDateIndex({ query = {}, selected, onSelect, client, className, appearance }: ReleaseDateIndexProps) {\n  const m = useMessages();\n  const { t } = m;\n  const dates = useReleaseDates(query, { client });\n  const label = (date: string) => {\n    const [y, mo, d] = date.split(\"-\").map(Number);\n    const at = new Date(Date.UTC(y!, (mo ?? 1) - 1, d ?? 1));\n    return new Intl.DateTimeFormat(m.language, d ? { dateStyle: \"medium\", timeZone: \"UTC\" } : { year: \"numeric\", month: \"long\", timeZone: \"UTC\" }).format(at);\n  };\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-2 text-sm\", className)} data-ckui=\"release-dates\">\n      {dates.loading && !dates.items.length ? (\n        <Skeleton className=\"h-24 w-full\" />\n      ) : dates.error && !dates.items.length ? (\n        <ErrorLine>{contentError(m, dates.error)}</ErrorLine>\n      ) : !dates.items.length ? (\n        <p className=\"text-muted-foreground\">{t(\"contents.noDates\")}</p>\n      ) : (\n        <ul className=\"grid gap-1\">\n          {dates.items.map((d) => (\n            <li key={d.date}>\n              <button\n                type=\"button\"\n                aria-pressed={selected === d.date}\n                className={cn(\"flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-start hover:bg-muted\", selected === d.date && \"bg-muted font-medium\")}\n                onClick={() => onSelect?.(d.date)}\n                data-ckui=\"release-date\"\n                data-date={d.date}\n              >\n                <span>{label(d.date)}</span>\n                <span className=\"text-xs text-muted-foreground tabular-nums\">\n                  {m.plural(\"contents.items\", d.count)}\n                  {d.free < d.count && ` · ${m.plural(\"contents.free\", d.free)}`}\n                </span>\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      {dates.hasMore && (\n        <Button variant=\"outline\" size=\"sm\" className=\"justify-self-center\" disabled={dates.loadingMore} onClick={() => void dates.loadMore()}>\n          {t(\"contents.loadMore\")}\n        </Button>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,SAAgB,EAAsB,GAA+B;CACnE,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAK,EAAM,GACX,IAAM,EAAW,CAAiB,GAClC,IAAI,EAAkB;EAAE,UAAU,EAAE;EAAU,QAAQ,EAAE;CAAO,CAAC,GAChE,IAAO,EAAU,gBAAgB,EAAE,OAAO,GAC1C,KAAQ,MACZ,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EACrG;CACe,CAAA;CAEpB,IAAI,GAAK,WAAW,MAAM,OAAO,EAAK,kBAAC,KAAD;EAAG,WAAU;EAAyB,UAAA,EAAE,2BAA2B;CAAK,CAAA,CAAC;CAC/G,IAAI,CAAC,EAAE,SAEL,OADI,EAAE,QAAc,EAAK,kBAAC,GAAD,EAAA,UAAY,EAAa,GAAG,EAAE,KAAK,EAAa,CAAA,CAAC,IACnE,EAAK,kBAAC,GAAD,EAAU,WAAU,cAAe,CAAA,CAAC;CAElD,IAAM,IAAU,EAAE;CAElB,OADI,CAAC,EAAQ,QAAQ,UAAU,EAAE,mBAAmB,KAAc,OAC3D,EACL,kBAAA,GAAA,EAAA,UAAA;EACG,EAAQ,QAAQ,SACf,kBAAC,MAAD;GAAI,WAAU;GACX,UAAA,EAAQ,QAAQ,KAAK,MACpB,kBAAC,MAAD;IAAsB,WAAU;IAAwC,aAAU;IAAiB,aAAW,EAAE,OAAO;IAAM,gBAAc,EAAE;IAA7I,UAAA,CACE,kBAAC,GAAD;KAAQ,IAAI,GAAG,EAAG,GAAG,EAAE,OAAO;KAAM,SAAS,EAAE;KAAS,UAAU,EAAK;KAAS,kBAAkB,MAAM,KAAK,EAAK,UAAU,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,CAAC;IAAI,CAAA,GAC5J,kBAAC,GAAD;KAAO,SAAS,GAAG,EAAG,GAAG,EAAE,OAAO;KAAM,WAAU;KAC/C,UAAA,EAAE,SAAS,EAAE,OAAO;IAChB,CAAA,CACL;GALK,GAAA,EAAE,OAAO,EAKd,CACL;EACC,CAAA,IACF;EACH,EAAE,mBAAmB,MACpB,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAQ,IAAI,GAAG,EAAG;IAAW,SAAS,EAAQ;IAAiB,UAAU,EAAK;IAAS,kBAAkB,MAAM,KAAK,EAAK,UAAU,EAAE,kBAAkB,CAAC,CAAC;GAAI,CAAA,GAC7J,kBAAC,GAAD;IAAO,SAAS,GAAG,EAAG;IAAY,UAAA,EAAE,yBAAyB;GAAS,CAAA,CACnE;;EAEP,kBAAC,GAAD,EAAW,OAAO,EAAK,MAAQ,CAAA;CAC/B,EAAA,CAAA,CACJ;AACF;AAcA,SAAgB,EAAiB,EAAE,WAAQ,CAAC,GAAG,aAAU,aAAU,WAAQ,cAAW,iBAAqC;CACzH,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAQ,EAAgB,GAAO,EAAE,UAAO,CAAC,GACzC,KAAS,MAAiB;EAC9B,IAAM,CAAC,GAAG,GAAI,KAAK,EAAK,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM,GACvC,IAAK,IAAI,KAAK,KAAK,IAAI,IAAK,KAAM,KAAK,GAAG,KAAK,CAAC,CAAC;EACvD,OAAO,IAAI,KAAK,eAAe,EAAE,UAAU,IAAI;GAAE,WAAW;GAAU,UAAU;EAAM,IAAI;GAAE,MAAM;GAAW,OAAO;GAAQ,UAAU;EAAM,CAAC,CAAC,CAAC,OAAO,CAAE;CAC1J;CACA,OACE,kBAAC,GAAD;EAA8B;EAAY,WAAW,EAAG,sBAAsB,CAAS;EAAG,aAAU;EAApG,UAAA,CACG,EAAM,WAAW,CAAC,EAAM,MAAM,SAC7B,kBAAC,GAAD,EAAU,WAAU,cAAe,CAAA,IACjC,EAAM,SAAS,CAAC,EAAM,MAAM,SAC9B,kBAAC,GAAD,EAAA,UAAY,EAAa,GAAG,EAAM,KAAK,EAAa,CAAA,IACjD,EAAM,MAAM,SAGf,kBAAC,MAAD;GAAI,WAAU;GACX,UAAA,EAAM,MAAM,KAAK,MAChB,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;IACE,MAAK;IACL,gBAAc,MAAa,EAAE;IAC7B,WAAW,EAAG,mGAAmG,MAAa,EAAE,QAAQ,sBAAsB;IAC9J,eAAe,IAAW,EAAE,IAAI;IAChC,aAAU;IACV,aAAW,EAAE;IANf,UAAA,CAQE,kBAAC,QAAD,EAAA,UAAO,EAAM,EAAE,IAAI,EAAQ,CAAA,GAC3B,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACG,EAAE,OAAO,kBAAkB,EAAE,KAAK,GAClC,EAAE,OAAO,EAAE,SAAS,MAAM,EAAE,OAAO,iBAAiB,EAAE,IAAI,GACvD;IACA,CAAA,CAAA;GACN,CAAA,EAAA,GAfK,EAAE,IAeP,CACL;EACC,CAAA,IArBJ,kBAAC,KAAD;GAAG,WAAU;GAAyB,UAAA,EAAE,kBAAkB;EAAK,CAAA,GAuBhE,EAAM,WACL,kBAAC,GAAD;GAAQ,SAAQ;GAAU,MAAK;GAAK,WAAU;GAAsB,UAAU,EAAM;GAAa,eAAe,KAAK,EAAM,SAAS;GACjI,UAAA,EAAE,mBAAmB;EAChB,CAAA,CAEM;;AAEtB"}
+{"version":3,"file":"filters.js","names":[],"sources":["../../../src/components/content/filters.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useId } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ReleaseDatesQuery } from \"../../client/discovery.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext, type ContentKitErrorHandler } from \"../../react/context.js\";\nimport { useContentFilters, useReleaseDates } from \"../../react/discovery.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Label } from \"#ckui/ui/label\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { Switch } from \"#ckui/ui/switch\";\nimport { contentError, ErrorLine, useAction } from \"../social/parts.js\";\n\nexport interface ContentFilterSettingsProps {\n  /** Labels and group names in this language; default the provider's. */\n  language?: string;\n  /** Offer listing deleted content the reader holds. Default true. */\n  includeDeleted?: boolean;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** Show or hide configured content for this browser or signed-in account. */\nexport function ContentFilterSettings(p: ContentFilterSettingsProps) {\n  const m = useMessages();\n  const { t } = m;\n  const id = useId();\n  const ctx = useContext(ContentKitContext);\n  const f = useContentFilters({ language: p.language, client: p.client });\n  const save = useAction(\"filters.save\", p.onError);\n  const root = (children: React.ReactNode) => (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 text-sm\", p.className)} data-ckui=\"content-filters\">\n      {children}\n    </ContentKitUiRoot>\n  );\n  if (!f.filters) {\n    if (f.error) return root(<ErrorLine>{contentError(m, f.error)}</ErrorLine>);\n    return root(<Skeleton className=\"h-24 w-full\" />);\n  }\n  const filters = f.filters;\n  if (!filters.filters.length && p.includeDeleted === false) return null;\n  return root(\n    <>\n      {filters.filters.length ? (\n        <ul className=\"grid divide-y divide-border rounded-lg border border-border\">\n          {filters.filters.map((x) => (\n            <li key={x.entity.id} className=\"flex flex-wrap items-center gap-3 p-3\" data-ckui=\"content-filter\" data-slug={x.entity.slug} data-visible={x.visible}>\n              <Switch id={`${id}-${x.entity.id}`} checked={x.visible} disabled={save.pending} onCheckedChange={(v) => void save.run(() => f.setVisible(x.entity.id, v))} />\n              <Label htmlFor={`${id}-${x.entity.id}`} className=\"min-w-0 flex-1\">\n                {x.label || x.entity.name}\n              </Label>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n      {p.includeDeleted !== false && ctx?.viewer !== null && (\n        <div className=\"flex items-center gap-3\">\n          <Switch id={`${id}-deleted`} checked={filters.include_deleted} disabled={save.pending} onCheckedChange={(v) => void save.run(() => f.setIncludeDeleted(v))} />\n          <Label htmlFor={`${id}-deleted`}>{t(\"contents.includeDeleted\")}</Label>\n        </div>\n      )}\n      <ErrorLine error={save.error} />\n    </>,\n  );\n}\n\nexport interface ReleaseDateIndexProps {\n  /** Which contents count: the listing's filters. */\n  query?: ReleaseDatesQuery;\n  /** The bucket chosen (a day YYYY-MM-DD or month YYYY-MM): list with released_on set to it. */\n  selected?: string;\n  onSelect?: (date: string) => void;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** The release date index: per month or day, newest first, how many contents and how many free. */\nexport function ReleaseDateIndex({ query = {}, selected, onSelect, client, className, appearance }: ReleaseDateIndexProps) {\n  const m = useMessages();\n  const { t } = m;\n  const dates = useReleaseDates(query, { client });\n  const label = (date: string) => {\n    const [y, mo, d] = date.split(\"-\").map(Number);\n    const at = new Date(Date.UTC(y!, (mo ?? 1) - 1, d ?? 1));\n    return new Intl.DateTimeFormat(m.language, d ? { dateStyle: \"medium\", timeZone: \"UTC\" } : { year: \"numeric\", month: \"long\", timeZone: \"UTC\" }).format(at);\n  };\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-2 text-sm\", className)} data-ckui=\"release-dates\">\n      {dates.loading && !dates.items.length ? (\n        <Skeleton className=\"h-24 w-full\" />\n      ) : dates.error && !dates.items.length ? (\n        <ErrorLine>{contentError(m, dates.error)}</ErrorLine>\n      ) : !dates.items.length ? (\n        <p className=\"text-muted-foreground\">{t(\"contents.noDates\")}</p>\n      ) : (\n        <ul className=\"grid gap-1\">\n          {dates.items.map((d) => (\n            <li key={d.date}>\n              <button\n                type=\"button\"\n                aria-pressed={selected === d.date}\n                className={cn(\"flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-start hover:bg-muted\", selected === d.date && \"bg-muted font-medium\")}\n                onClick={() => onSelect?.(d.date)}\n                data-ckui=\"release-date\"\n                data-date={d.date}\n              >\n                <span>{label(d.date)}</span>\n                <span className=\"text-xs text-muted-foreground tabular-nums\">\n                  {m.plural(\"contents.items\", d.count)}\n                  {d.free < d.count && ` · ${m.plural(\"contents.free\", d.free)}`}\n                </span>\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      {dates.hasMore && (\n        <Button variant=\"outline\" size=\"sm\" className=\"justify-self-center\" disabled={dates.loadingMore} onClick={() => void dates.loadMore()}>\n          {t(\"contents.loadMore\")}\n        </Button>\n      )}\n    </ContentKitUiRoot>\n  );\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