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

package/dist/components/content/filter-dialog.js

@@ -2,28 +2,32 @@ import { useMessages as e } from "../../i18n/context.js";
 import { AppearanceContext as t } from "../../scope.js";
 import { Dialog as n, DialogContent as r, DialogDescription as i, DialogHeader as a, DialogTitle as o } from "../../ui/dialog.js";
 import { ContentFilterSettings as s } from "./filters.js";
-import { useContext as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useContext as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/content/filter-dialog.tsx
-function d({ open: d, onOpenChange: f, description: p, returnFocus: m, ...h }) {
-	let { t: g } = e(), _ = c(t);
-	return /* @__PURE__ */ l(t.Provider, {
-		value: h.appearance ?? _,
-		children: /* @__PURE__ */ l(n, {
-			open: d,
-			onOpenChange: f,
-			children: /* @__PURE__ */ u(r, {
-				finalFocus: m,
+function f({ open: f, onOpenChange: p, description: m, returnFocus: h, ...g }) {
+	let { t: _ } = e(), v = c(t), [y, b] = l({ open: !1 }), x = y;
+	return y.open !== f && (x = {
+		open: f,
+		container: f ? h?.()?.closest("dialog[open]") ?? void 0 : y.container
+	}, b(x)), /* @__PURE__ */ u(t.Provider, {
+		value: g.appearance ?? v,
+		children: /* @__PURE__ */ u(n, {
+			open: f,
+			onOpenChange: (e) => p(e),
+			children: /* @__PURE__ */ d(r, {
+				finalFocus: h,
+				portalContainer: x.container,
 				className: "max-h-[calc(100dvh-2rem)] overflow-y-auto",
-				children: [/* @__PURE__ */ u(a, { children: [/* @__PURE__ */ l(o, { children: g("readerSettings.filterTitle") }), /* @__PURE__ */ l(i, { children: p ?? g("readerSettings.filterDescription") })] }), /* @__PURE__ */ l(s, {
-					...h,
-					includeDeleted: h.includeDeleted ?? !1
+				children: [/* @__PURE__ */ d(a, { children: [/* @__PURE__ */ u(o, { children: _("readerSettings.filterTitle") }), /* @__PURE__ */ u(i, { children: m ?? _("readerSettings.filterDescription") })] }), /* @__PURE__ */ u(s, {
+					...g,
+					includeDeleted: g.includeDeleted ?? !1
 				})]
 			})
 		})
 	});
 }
 //#endregion
-export { d as ContentFilterDialog };
+export { f as ContentFilterDialog };
 
 //# sourceMappingURL=filter-dialog.js.map

package/dist/components/content/filter-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-dialog.js","names":[],"sources":["../../../src/components/content/filter-dialog.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { AppearanceContext } from \"../../scope.js\";\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"#ckui/ui/dialog\";\nimport { ContentFilterSettings, type ContentFilterSettingsProps } from \"./filters.js\";\n\nexport interface ContentFilterDialogProps extends ContentFilterSettingsProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  description?: ReactNode;\n  /** A stable focus target when a preference change removes the opening tile. */\n  returnFocus?: () => HTMLElement | null;\n}\n\n/** The same filter controls as ReaderSettings, without another language picker. */\nexport function ContentFilterDialog({ open, onOpenChange, description, returnFocus, ...settings }: ContentFilterDialogProps) {\n  const { t } = useMessages();\n  const inheritedAppearance = useContext(AppearanceContext);\n  return <AppearanceContext.Provider value={settings.appearance ?? inheritedAppearance}>\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent finalFocus={returnFocus} className=\"max-h-[calc(100dvh-2rem)] overflow-y-auto\">\n        <DialogHeader>\n          <DialogTitle>{t(\"readerSettings.filterTitle\")}</DialogTitle>\n          <DialogDescription>{description ?? t(\"readerSettings.filterDescription\")}</DialogDescription>\n        </DialogHeader>\n        <ContentFilterSettings {...settings} includeDeleted={settings.includeDeleted ?? false} />\n      </DialogContent>\n    </Dialog>\n  </AppearanceContext.Provider>;\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,EAAoB,EAAE,SAAM,iBAAc,gBAAa,gBAAa,GAAG,KAAsC;CAC3H,IAAM,EAAE,SAAM,EAAY,GACpB,IAAsB,EAAW,CAAiB;CACxD,OAAO,kBAAC,EAAkB,UAAnB;EAA4B,OAAO,EAAS,cAAc;EAC/D,UAAA,kBAAC,GAAD;GAAc;GAAoB;GAChC,UAAA,kBAAC,GAAD;IAAe,YAAY;IAAa,WAAU;IAAlD,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAc,EAAE,4BAA4B,EAAe,CAAA,GAC3D,kBAAC,GAAD,EAAA,UAAoB,KAAe,EAAE,kCAAkC,EAAqB,CAAA,CAChF,EAAA,CAAA,GACd,kBAAC,GAAD;KAAuB,GAAI;KAAU,gBAAgB,EAAS,kBAAkB;IAAQ,CAAA,CAC3E;;EACT,CAAA;CACkB,CAAA;AAC9B"}
+{"version":3,"file":"filter-dialog.js","names":[],"sources":["../../../src/components/content/filter-dialog.tsx"],"sourcesContent":["import { useContext, useState, type ReactNode } from \"react\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { AppearanceContext } from \"../../scope.js\";\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"#ckui/ui/dialog\";\nimport { ContentFilterSettings, type ContentFilterSettingsProps } from \"./filters.js\";\n\nexport interface ContentFilterDialogProps extends ContentFilterSettingsProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  description?: ReactNode;\n  /** A stable focus target when a preference change removes the opening tile. */\n  returnFocus?: () => HTMLElement | null;\n}\n\n/** The same filter controls as ReaderSettings, without another language picker. */\nexport function ContentFilterDialog({ open, onOpenChange, description, returnFocus, ...settings }: ContentFilterDialogProps) {\n  const { t } = useMessages();\n  const inheritedAppearance = useContext(AppearanceContext);\n  // Native modal dialogs live above body portals. Keep the opening surface\n  // through preference reloads, even when they remove the triggering tile.\n  const [portal, setPortal] = useState<{ open: boolean; container?: HTMLDialogElement }>({ open: false });\n  let placement = portal;\n  if (portal.open !== open) {\n    placement = { open, container: open ? returnFocus?.()?.closest<HTMLDialogElement>(\"dialog[open]\") ?? undefined : portal.container };\n    setPortal(placement);\n  }\n  return <AppearanceContext.Provider value={settings.appearance ?? inheritedAppearance}>\n    <Dialog open={open} onOpenChange={(next) => onOpenChange(next)}>\n      <DialogContent\n        finalFocus={returnFocus}\n        portalContainer={placement.container}\n        className=\"max-h-[calc(100dvh-2rem)] overflow-y-auto\"\n      >\n        <DialogHeader>\n          <DialogTitle>{t(\"readerSettings.filterTitle\")}</DialogTitle>\n          <DialogDescription>{description ?? t(\"readerSettings.filterDescription\")}</DialogDescription>\n        </DialogHeader>\n        <ContentFilterSettings {...settings} includeDeleted={settings.includeDeleted ?? false} />\n      </DialogContent>\n    </Dialog>\n  </AppearanceContext.Provider>;\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,EAAoB,EAAE,SAAM,iBAAc,gBAAa,gBAAa,GAAG,KAAsC;CAC3H,IAAM,EAAE,SAAM,EAAY,GACpB,IAAsB,EAAW,CAAiB,GAGlD,CAAC,GAAQ,KAAa,EAA2D,EAAE,MAAM,GAAM,CAAC,GAClG,IAAY;CAKhB,OAJI,EAAO,SAAS,MAClB,IAAY;EAAE;EAAM,WAAW,IAAO,IAAc,CAAC,EAAE,QAA2B,cAAc,KAAK,KAAA,IAAY,EAAO;CAAU,GAClI,EAAU,CAAS,IAEd,kBAAC,EAAkB,UAAnB;EAA4B,OAAO,EAAS,cAAc;EAC/D,UAAA,kBAAC,GAAD;GAAc;GAAM,eAAe,MAAS,EAAa,CAAI;GAC3D,UAAA,kBAAC,GAAD;IACE,YAAY;IACZ,iBAAiB,EAAU;IAC3B,WAAU;IAHZ,UAAA,CAKE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAc,EAAE,4BAA4B,EAAe,CAAA,GAC3D,kBAAC,GAAD,EAAA,UAAoB,KAAe,EAAE,kCAAkC,EAAqB,CAAA,CAChF,EAAA,CAAA,GACd,kBAAC,GAAD;KAAuB,GAAI;KAAU,gBAAgB,EAAS,kBAAkB;IAAQ,CAAA,CAC3E;;EACT,CAAA;CACkB,CAAA;AAC9B"}

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

@@ -16,6 +16,8 @@ export interface ContentFilterSettingsProps {
     language?: string;
     /** Currently excluded matches in this listing/day; omitted shows no counts. */
     counts?: readonly ContentFilterCount[];
+    /** Counts cover a bounded candidate set, so each displayed count is a lower bound. */
+    countsLowerBound?: boolean;
     /** Offer listing deleted content the reader holds. Default true. */
     includeDeleted?: boolean;
     client?: ContentKitClient;

package/dist/components/content/filters.js

@@ -41,7 +41,11 @@ function v(r) {
 					className: "min-w-0 flex-1",
 					children: [e.entity.name || e.entity.slug, r.counts !== void 0 && /* @__PURE__ */ g("span", {
 						className: "tabular-nums",
-						children: [": ", new Intl.NumberFormat(d.language).format(r.counts.filter((t) => t.entity.id === e.entity.id).reduce((e, t) => e + t.count, 0))]
+						children: [
+							": ",
+							r.countsLowerBound ? "≥ " : "",
+							new Intl.NumberFormat(d.language).format(r.counts.filter((t) => t.entity.id === e.entity.id).reduce((e, t) => e + t.count, 0))
+						]
 					})]
 				})]
 			}, e.entity.id))

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 { GroupCard } from \"../../client/generated/wire.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\n/** Counts for one concrete listing selection, aggregated by entity.\n * Only rows offered by the current domain's filter inventory are displayed. */\nexport interface ContentFilterCount {\n  entity: Pick<GroupCard, \"id\">;\n  count: number;\n}\n\nexport interface ContentFilterSettingsProps {\n  /** Listing context; shows shared controls when any kind is in applies_to. */\n  kinds?: readonly string[];\n  /** Entity names in this language; default the provider's. */\n  language?: string;\n  /** Currently excluded matches in this listing/day; omitted shows no counts. */\n  counts?: readonly ContentFilterCount[];\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  const rows = !p.kinds || p.kinds.some((kind) => filters.applies_to.includes(kind)) ? filters.filters : [];\n  if (!rows.length && p.includeDeleted === false) return null;\n  return root(\n    <>\n      {rows.length > 0 && (\n        <ul className=\"grid divide-y divide-border rounded-lg border border-border\">\n          {rows.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.entity.name || x.entity.slug}\n                {p.counts !== undefined && (\n                  <span className=\"tabular-nums\">: {new Intl.NumberFormat(m.language).format(p.counts.filter((entry) => entry.entity.id === x.entity.id).reduce((n, entry) => n + entry.count, 0))}</span>\n                )}\n              </Label>\n            </li>\n          ))}\n        </ul>\n      )}\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        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, dates.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={dates.reload}>\n            {t(\"common.retry\")}\n          </Button>\n        </div>\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        <div className=\"grid justify-items-center gap-2\">\n          {dates.error && <p role=\"alert\" className=\"text-destructive\">{contentError(m, dates.error)}</p>}\n          <Button variant=\"outline\" size=\"sm\" disabled={dates.loadingMore} onClick={() => void dates.loadMore()}>\n            {dates.loadingMore ? t(\"contents.loading\") : dates.error ? t(\"common.retry\") : t(\"contents.loadMore\")}\n          </Button>\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}
+{"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 { GroupCard } from \"../../client/generated/wire.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\n/** Counts for one concrete listing selection, aggregated by entity.\n * Only rows offered by the current domain's filter inventory are displayed. */\nexport interface ContentFilterCount {\n  entity: Pick<GroupCard, \"id\">;\n  count: number;\n}\n\nexport interface ContentFilterSettingsProps {\n  /** Listing context; shows shared controls when any kind is in applies_to. */\n  kinds?: readonly string[];\n  /** Entity names in this language; default the provider's. */\n  language?: string;\n  /** Currently excluded matches in this listing/day; omitted shows no counts. */\n  counts?: readonly ContentFilterCount[];\n  /** Counts cover a bounded candidate set, so each displayed count is a lower bound. */\n  countsLowerBound?: boolean;\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  const rows = !p.kinds || p.kinds.some((kind) => filters.applies_to.includes(kind)) ? filters.filters : [];\n  if (!rows.length && p.includeDeleted === false) return null;\n  return root(\n    <>\n      {rows.length > 0 && (\n        <ul className=\"grid divide-y divide-border rounded-lg border border-border\">\n          {rows.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.entity.name || x.entity.slug}\n                {p.counts !== undefined && (\n                  <span className=\"tabular-nums\">: {p.countsLowerBound ? \"≥ \" : \"\"}{new Intl.NumberFormat(m.language).format(p.counts.filter((entry) => entry.entity.id === x.entity.id).reduce((n, entry) => n + entry.count, 0))}</span>\n                )}\n              </Label>\n            </li>\n          ))}\n        </ul>\n      )}\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        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, dates.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={dates.reload}>\n            {t(\"common.retry\")}\n          </Button>\n        </div>\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        <div className=\"grid justify-items-center gap-2\">\n          {dates.error && <p role=\"alert\" className=\"text-destructive\">{contentError(m, dates.error)}</p>}\n          <Button variant=\"outline\" size=\"sm\" disabled={dates.loadingMore} onClick={() => void dates.loadMore()}>\n            {dates.loadingMore ? t(\"contents.loading\") : dates.error ? t(\"common.retry\") : t(\"contents.loadMore\")}\n          </Button>\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 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';
-import { Card } from '../../client/generated/wire.js';
+import { AccessMode, ContentQuery, HistoryQuery, RailQuery, SearchQuery } from '../../client/discovery.js';
+import { Card, ListingSummary } from '../../client/generated/wire.js';
 import { UseList } from '../../react/use-resource.js';
 import { ContentCardProps } from './card.js';
 export interface CardListProps extends Omit<ContentCardProps, "card" | "onOpen" | "children" | "className"> {
@@ -18,6 +18,21 @@ export interface CardListProps extends Omit<ContentCardProps, "card" | "onOpen"
     client?: ContentKitClient;
     className?: string;
     appearance?: ContentKitUiAppearance;
+    /** Collapse paid/locked cards into a counted tile, or hide them; default show. */
+    locked?: LockedCards;
+    /** Optional-filter summary tiles are on by default; hosts may suppress them in previews. */
+    showFilteredSummary?: boolean;
+    /** Show the collapsed locked tile only at this measured grid width. Default 0. */
+    lockedSummaryMinColumns?: number;
+    /** Limit rendered preview tiles without changing the matching selection or summary counts. */
+    cardLimit?: number;
+    /** Limit cards in mobile previews without mounting their images. */
+    mobileCardLimit?: number;
+    /** Host-specific nouns for summary controls. */
+    summaryLabels?: {
+        premium?: (count: number) => string;
+        filtered?: (count: number) => string;
+    };
     /** Opt into a fluid grid, optionally with a desktop column ceiling. */
     grid?: CardGridLayout;
 }
@@ -34,30 +49,36 @@ 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>;
+/** A list carries exact selection-wide counts when the API was asked for them. */
+type SummaryList = UseList<Card> & {
+    summary?: ListingSummary;
+};
+type GridProps = CardListProps & {
+    list: SummaryList;
     render: string;
-}): import('react').JSX.Element;
+    filterKinds?: readonly string[];
+    filterLanguage?: string;
+    horizontal?: boolean;
+};
+/** A list's cards and summary controls share one responsive, animated grid. */
+export declare function CardGrid(p: GridProps): import('react').JSX.Element;
 /**
  * What a list does with cards the reader doesn't open: shows them marked
- * (show), leaves them out (hide), or lists them apart, counted, behind a
- * toggle that loads them when opened (collapse).
+ * (show), leaves them out (hide), or replaces them with a counted tile
+ * that reveals the cached previews in place (collapse).
  */
 export type LockedCards = "show" | "hide" | "collapse";
+/** Settle locked-card admission before pagination, retaining explicit reader modes otherwise. */
+export declare function cardListMode(locked: LockedCards | undefined, mode?: AccessMode): AccessMode | undefined;
 /** Contents as cards (GET /v1/contents): any sort and filter, paged. */
 export declare function ContentGrid({ query, locked, ...p }: CardListProps & {
     query: ContentQuery;
-    locked?: LockedCards;
 }): import('react').JSX.Element;
 /** Search results as cards; nothing until the query has text. */
 export declare function SearchResults({ query, ...p }: CardListProps & {
     query: SearchQuery;
 }): import('react').JSX.Element | null;
-/** The signed-in reader's history as cards, each removable, with a clear-all. */
-export declare function ContentHistory({ query, ...p }: CardListProps & {
-    query?: HistoryQuery;
-}): import('react').JSX.Element;
+export { ContentHistory } from './history.js';
 export interface ContentRailProps extends Omit<CardListProps, "infinite" | "empty"> {
     /** The rail's heading. */
     title: ReactNode;