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

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

@@ -1,12 +1,23 @@
 import { ContentQuery, ListSort } from '../../client/discovery.js';
 import { Translator } from '../../i18n/messages.js';
 import { CardListProps, LockedCards } from './grid.js';
-/** A sort's name: "Newest", "Popular, this week". */
-export declare function sortLabel(m: Translator, sort: ListSort): string;
+/** A sort's name: "Newest", "Popular, this week", "Best match". */
+export declare function sortLabel(m: Translator, sort: ListSort | "relevance"): string;
+export interface SortMenuProps<S extends string> {
+    value: S;
+    /** The sorts offered, in menu order. */
+    sorts: readonly S[];
+    onChange: (sort: S) => void;
+    /** A sort's name; default the list sorts' names. */
+    label?: (sort: S) => string;
+    className?: string;
+}
+/** A list's sort control; hosts keep the choice (URL, remembered per page type). */
+export declare function SortMenu<S extends string>({ value, sorts, onChange, label, className }: SortMenuProps<S>): import('react').JSX.Element;
 export interface ContentListingProps extends CardListProps {
     /** The listed kind: its version traits and filterable attributes become filters, its sort the default. */
     kind?: string;
-    /** The sort and filters; with onQueryChange the host keeps them (e.g. in the URL). Other fields (groups, a tag page's) pass through. */
+    /** The sort and filters; with onQueryChange the host keeps them (e.g. in the URL). Other fields (groups, a tag page's) pass through. A changed query starts again at page 1: a host keeping the page drops it with the query. */
     query?: ContentQuery;
     onQueryChange?: (query: ContentQuery) => void;
     /** The sorts offered; default newest, popular (week, month, all time), top rated, most favorited, title, oldest. */

package/dist/components/content/listing.js

@@ -26,26 +26,43 @@ function b(e, t) {
 		period: e.t(`listing.period_${r}`)
 	}) : i;
 }
-function x({ kind: x, query: S, onQueryChange: C, sorts: w = v, languages: T, filters: E, ...D }) {
-	let O = t(), { t: k } = O, A = e(), { kinds: j } = r({ client: D.client }), [M, N] = m({}), P = S ?? M, F = f((e) => {
-		S === void 0 && N(e), C?.(e);
-	}, [S, C]), I = x ? j?.kinds[x] : void 0, L = P.sort ?? I?.sort ?? w[0], R = (e) => !E || E.includes(e), z = (I?.versions.traits ?? []).filter(R), B = Object.entries(I?.attributes ?? {}).filter(([e, t]) => t.filterable && (t.values?.length || t.type === "bool") && R(e)), V = (T ?? (j?.languages.length ?? 0) > 1) && !!j?.languages.length, H = (e) => P.attribute?.find((t) => t.startsWith(`${e}:`))?.slice(e.length + 1), U = (e, t) => F({
-		...P,
-		attribute: [...(P.attribute ?? []).filter((t) => !t.startsWith(`${e}:`)), ...t === void 0 ? [] : [`${e}:${t}`]]
-	}), W = (e) => {
-		let t = P.traits?.includes(e);
-		F({
-			...P,
-			traits: t ? P.traits.filter((t) => t !== e) : [...P.traits ?? [], e]
+function x({ value: e, sorts: n, onChange: r, label: i, className: u }) {
+	let d = t(), f = i ?? ((e) => b(d, e));
+	return /* @__PURE__ */ g(a, {
+		value: e,
+		onValueChange: (e) => r(e),
+		children: [/* @__PURE__ */ h(c, {
+			size: "sm",
+			"aria-label": d.t("listing.sort"),
+			className: u,
+			"data-ckui": "listing-sort",
+			children: /* @__PURE__ */ h(l, { children: (e) => f(e) })
+		}), /* @__PURE__ */ h(o, { children: n.map((e) => /* @__PURE__ */ h(s, {
+			value: e,
+			children: f(e)
+		}, e)) })]
+	});
+}
+function S({ kind: b, query: S, onQueryChange: C, sorts: w = v, languages: T, filters: E, ...D }) {
+	let { t: O } = t(), k = e(), { kinds: A } = r({ client: D.client }), [j, M] = m({}), N = S ?? j, P = f((e) => {
+		S === void 0 && M(e), C?.(e);
+	}, [S, C]), F = b ? A?.kinds[b] : void 0, I = N.sort ?? F?.sort ?? w[0] ?? "newest", L = (e) => !E || E.includes(e), R = (F?.versions.traits ?? []).filter(L), z = Object.entries(F?.attributes ?? {}).filter(([e, t]) => t.filterable && (t.values?.length || t.type === "bool") && L(e)), B = (T ?? (A?.languages.length ?? 0) > 1) && !!A?.languages.length, V = (e) => N.attribute?.find((t) => t.startsWith(`${e}:`))?.slice(e.length + 1), H = (e, t) => P({
+		...N,
+		attribute: [...(N.attribute ?? []).filter((t) => !t.startsWith(`${e}:`)), ...t === void 0 ? [] : [`${e}:${t}`]]
+	}), U = (e) => {
+		let t = N.traits?.includes(e);
+		P({
+			...N,
+			traits: t ? N.traits.filter((t) => t !== e) : [...N.traits ?? [], e]
 		});
-	}, G = !!(P.language || P.traits?.length || P.attribute?.length), K = p(() => ({
-		...P,
-		kind: x ?? P.kind,
-		sort: L
+	}, W = !!(N.language || N.traits?.length || N.attribute?.length), G = p(() => ({
+		...N,
+		kind: b ?? N.kind,
+		sort: I
 	}), [
-		P,
-		x,
-		L
+		N,
+		b,
+		I
 	]);
 	return /* @__PURE__ */ g(n, {
 		appearance: D.appearance,
@@ -53,55 +70,47 @@ function x({ kind: x, query: S, onQueryChange: C, sorts: w = v, languages: T, fi
 		"data-ckui": "content-listing",
 		children: [/* @__PURE__ */ g("div", {
 			role: "toolbar",
-			"aria-label": k("listing.filters"),
+			"aria-label": O("listing.filters"),
 			className: "flex flex-wrap items-center gap-2",
 			children: [
-				/* @__PURE__ */ g(a, {
-					value: L,
-					onValueChange: (e) => F({
-						...P,
+				/* @__PURE__ */ h(x, {
+					value: I,
+					sorts: w,
+					onChange: (e) => P({
+						...N,
 						sort: e
-					}),
-					children: [/* @__PURE__ */ h(c, {
-						size: "sm",
-						"aria-label": k("listing.sort"),
-						"data-ckui": "listing-sort",
-						children: /* @__PURE__ */ h(l, { children: (e) => b(O, e) })
-					}), /* @__PURE__ */ h(o, { children: w.map((e) => /* @__PURE__ */ h(s, {
-						value: e,
-						children: b(O, e)
-					}, e)) })]
+					})
 				}),
-				V && /* @__PURE__ */ g(a, {
-					value: P.language ?? y,
-					onValueChange: (e) => F({
-						...P,
+				B && /* @__PURE__ */ g(a, {
+					value: N.language ?? y,
+					onValueChange: (e) => P({
+						...N,
 						language: e === y ? void 0 : e
 					}),
 					children: [/* @__PURE__ */ h(c, {
 						size: "sm",
-						"aria-label": k("listing.language"),
+						"aria-label": O("listing.language"),
 						"data-ckui": "listing-language",
-						children: /* @__PURE__ */ h(l, { children: (e) => e === y ? k("listing.anyLanguage") : A(e) })
+						children: /* @__PURE__ */ h(l, { children: (e) => e === y ? O("listing.anyLanguage") : k(e) })
 					}), /* @__PURE__ */ g(o, { children: [/* @__PURE__ */ h(s, {
 						value: y,
-						children: k("listing.anyLanguage")
-					}), j.languages.map((e) => /* @__PURE__ */ h(s, {
+						children: O("listing.anyLanguage")
+					}), A.languages.map((e) => /* @__PURE__ */ h(s, {
 						value: e,
-						children: A(e)
+						children: k(e)
 					}, e))] })]
 				}),
-				B.map(([e, t]) => {
-					let n = H(e);
+				z.map(([e, t]) => {
+					let n = V(e);
 					return t.type === "bool" ? /* @__PURE__ */ h(i, {
 						size: "sm",
 						variant: n === "true" ? "default" : "outline",
 						"aria-pressed": n === "true",
-						onClick: () => U(e, n === "true" ? void 0 : "true"),
+						onClick: () => H(e, n === "true" ? void 0 : "true"),
 						children: u(D.labels, e)
 					}, e) : /* @__PURE__ */ g(a, {
 						value: n ?? y,
-						onValueChange: (t) => U(e, t === y ? void 0 : t),
+						onValueChange: (t) => H(e, t === y ? void 0 : t),
 						children: [/* @__PURE__ */ h(c, {
 							size: "sm",
 							"aria-label": u(D.labels, e),
@@ -110,41 +119,41 @@ function x({ kind: x, query: S, onQueryChange: C, sorts: w = v, languages: T, fi
 							children: /* @__PURE__ */ h(l, { children: (t) => t === y ? u(D.labels, e) : u(D.labels, t) })
 						}), /* @__PURE__ */ g(o, { children: [/* @__PURE__ */ h(s, {
 							value: y,
-							children: k("listing.any")
+							children: O("listing.any")
 						}), t.values.map((e) => /* @__PURE__ */ h(s, {
 							value: e,
 							children: u(D.labels, e)
 						}, e))] })]
 					}, e);
 				}),
-				z.map((e) => {
-					let t = !!P.traits?.includes(e);
+				R.map((e) => {
+					let t = !!N.traits?.includes(e);
 					return /* @__PURE__ */ h(i, {
 						size: "sm",
 						variant: t ? "default" : "outline",
 						"aria-pressed": t,
-						onClick: () => W(e),
+						onClick: () => U(e),
 						"data-ckui": "listing-trait",
 						children: u(D.labels, e)
 					}, e);
 				}),
-				G && /* @__PURE__ */ h(i, {
+				W && /* @__PURE__ */ h(i, {
 					size: "sm",
 					variant: "ghost",
 					onClick: () => {
-						let { language: e, traits: t, attribute: n, ...r } = P;
-						F(r);
+						let { language: e, traits: t, attribute: n, ...r } = N;
+						P(r);
 					},
-					children: k("listing.clear")
+					children: O("listing.clear")
 				})
 			]
 		}), /* @__PURE__ */ h(d, {
 			...D,
-			query: K
+			query: G
 		})]
 	});
 }
 //#endregion
-export { x as ContentListing, b as sortLabel };
+export { S as ContentListing, x as SortMenu, b as sortLabel };
 
 //# sourceMappingURL=listing.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"listing.js","names":[],"sources":["../../../src/components/content/listing.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { ContentQuery, ListSort } from \"../../client/discovery.js\";\nimport { useLanguageName, useMessages } from \"../../i18n/context.js\";\nimport type { MessageKey, Translator } from \"../../i18n/messages.js\";\nimport { useKinds } from \"../../react/groups.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"#ckui/ui/select\";\nimport { labelOf } from \"../groups/parts.js\";\nimport { ContentGrid, type CardListProps, type LockedCards } from \"./grid.js\";\n\nconst SORTS: readonly ListSort[] = [\"newest\", \"popular:7d\", \"popular:30d\", \"popular\", \"top_rated\", \"most_favorited\", \"title\", \"oldest\"];\nconst ANY = \"*\";\n\n/** A sort's name: \"Newest\", \"Popular, this week\". */\nexport function sortLabel(m: Translator, sort: ListSort): string {\n  const [base, period] = sort.split(\":\");\n  const name = m.t(`listing.sort_${base}` as MessageKey);\n  return period ? m.t(\"listing.sortPeriod\", { sort: name, period: m.t(`listing.period_${period}` as MessageKey) }) : name;\n}\n\nexport interface ContentListingProps extends CardListProps {\n  /** The listed kind: its version traits and filterable attributes become filters, its sort the default. */\n  kind?: string;\n  /** The sort and filters; with onQueryChange the host keeps them (e.g. in the URL). Other fields (groups, a tag page's) pass through. */\n  query?: ContentQuery;\n  onQueryChange?: (query: ContentQuery) => void;\n  /** The sorts offered; default newest, popular (week, month, all time), top rated, most favorited, title, oldest. */\n  sorts?: readonly ListSort[];\n  /** Cards the reader doesn't open: show (default), hide or collapse. */\n  locked?: LockedCards;\n  /** Offer a language filter; default when the site has several languages. */\n  languages?: boolean;\n  /** The traits and attributes offered; default every trait and filterable attribute of the kind. */\n  filters?: readonly string[];\n}\n\n/** A listing page: sort, language, trait and attribute filters over a paged grid of a kind's contents. */\nexport function ContentListing({ kind, query: controlled, onQueryChange, sorts = SORTS, languages, filters, ...p }: ContentListingProps) {\n  const m = useMessages();\n  const { t } = m;\n  const languageName = useLanguageName();\n  const { kinds: model } = useKinds({ client: p.client });\n  const [own, setOwn] = useState<ContentQuery>({});\n  const query = controlled ?? own;\n  const set = useCallback(\n    (next: ContentQuery) => {\n      if (controlled === undefined) setOwn(next);\n      onQueryChange?.(next);\n    },\n    [controlled, onQueryChange],\n  );\n  const spec = kind ? model?.kinds[kind] : undefined;\n  const sort = query.sort ?? (spec?.sort as ListSort | undefined) ?? sorts[0];\n  const offered = (name: string) => !filters || filters.includes(name);\n  const traits = (spec?.versions.traits ?? []).filter(offered);\n  const attributes = Object.entries(spec?.attributes ?? {}).filter(([n, a]) => a.filterable && (a.values?.length || a.type === \"bool\") && offered(n));\n  const languageFilter = (languages ?? (model?.languages.length ?? 0) > 1) && !!model?.languages.length;\n  const attributeValue = (name: string) => query.attribute?.find((a) => a.startsWith(`${name}:`))?.slice(name.length + 1);\n  const setAttribute = (name: string, value: string | undefined) =>\n    set({ ...query, attribute: [...(query.attribute ?? []).filter((a) => !a.startsWith(`${name}:`)), ...(value === undefined ? [] : [`${name}:${value}`])] });\n  const toggleTrait = (x: string) => {\n    const on = query.traits?.includes(x);\n    set({ ...query, traits: on ? query.traits!.filter((y) => y !== x) : [...(query.traits ?? []), x] });\n  };\n  const filtered = !!(query.language || query.traits?.length || query.attribute?.length);\n  const list = useMemo(() => ({ ...query, kind: kind ?? query.kind, sort }), [query, kind, sort]);\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"content-listing\">\n      <div role=\"toolbar\" aria-label={t(\"listing.filters\")} className=\"flex flex-wrap items-center gap-2\">\n        <Select value={sort} onValueChange={(v) => set({ ...query, sort: v as ListSort })}>\n          <SelectTrigger size=\"sm\" aria-label={t(\"listing.sort\")} data-ckui=\"listing-sort\">\n            <SelectValue>{(v: string) => sortLabel(m, v as ListSort)}</SelectValue>\n          </SelectTrigger>\n          <SelectContent>\n            {sorts.map((s) => (\n              <SelectItem key={s} value={s}>\n                {sortLabel(m, s)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        {languageFilter && (\n          <Select value={query.language ?? ANY} onValueChange={(v) => set({ ...query, language: v === ANY ? undefined : (v as string) })}>\n            <SelectTrigger size=\"sm\" aria-label={t(\"listing.language\")} data-ckui=\"listing-language\">\n              <SelectValue>{(v: string) => (v === ANY ? t(\"listing.anyLanguage\") : languageName(v))}</SelectValue>\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value={ANY}>{t(\"listing.anyLanguage\")}</SelectItem>\n              {model!.languages.map((l) => (\n                <SelectItem key={l} value={l}>\n                  {languageName(l)}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        )}\n        {attributes.map(([name, a]) => {\n          const value = attributeValue(name);\n          if (a.type === \"bool\")\n            return (\n              <Button key={name} size=\"sm\" variant={value === \"true\" ? \"default\" : \"outline\"} aria-pressed={value === \"true\"} onClick={() => setAttribute(name, value === \"true\" ? undefined : \"true\")}>\n                {labelOf(p.labels, name)}\n              </Button>\n            );\n          return (\n            <Select key={name} value={value ?? ANY} onValueChange={(v) => setAttribute(name, v === ANY ? undefined : (v as string))}>\n              <SelectTrigger size=\"sm\" aria-label={labelOf(p.labels, name)} data-ckui=\"listing-attribute\" data-name={name}>\n                <SelectValue>{(v: string) => (v === ANY ? labelOf(p.labels, name) : labelOf(p.labels, v))}</SelectValue>\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value={ANY}>{t(\"listing.any\")}</SelectItem>\n                {a.values!.map((v) => (\n                  <SelectItem key={v} value={v}>\n                    {labelOf(p.labels, v)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          );\n        })}\n        {traits.map((x) => {\n          const on = !!query.traits?.includes(x);\n          return (\n            <Button key={x} size=\"sm\" variant={on ? \"default\" : \"outline\"} aria-pressed={on} onClick={() => toggleTrait(x)} data-ckui=\"listing-trait\">\n              {labelOf(p.labels, x)}\n            </Button>\n          );\n        })}\n        {filtered && (\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            onClick={() => {\n              const { language: _l, traits: _t, attribute: _a, ...rest } = query;\n              set(rest);\n            }}\n          >\n            {t(\"listing.clear\")}\n          </Button>\n        )}\n      </div>\n      <ContentGrid {...p} query={list} />\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,IAA6B;CAAC;CAAU;CAAc;CAAe;CAAW;CAAa;CAAkB;CAAS;AAAQ,GAChI,IAAM;AAGZ,SAAgB,EAAU,GAAe,GAAwB;CAC/D,IAAM,CAAC,GAAM,KAAU,EAAK,MAAM,GAAG,GAC/B,IAAO,EAAE,EAAE,gBAAgB,GAAoB;CACrD,OAAO,IAAS,EAAE,EAAE,sBAAsB;EAAE,MAAM;EAAM,QAAQ,EAAE,EAAE,kBAAkB,GAAsB;CAAE,CAAC,IAAI;AACrH;AAmBA,SAAgB,EAAe,EAAE,SAAM,OAAO,GAAY,kBAAe,WAAQ,GAAO,cAAW,YAAS,GAAG,KAA0B;CACvI,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAe,EAAgB,GAC/B,EAAE,OAAO,MAAU,EAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,GAChD,CAAC,GAAK,KAAU,EAAuB,CAAC,CAAC,GACzC,IAAQ,KAAc,GACtB,IAAM,GACT,MAAuB;EAEtB,AADI,MAAe,KAAA,KAAW,EAAO,CAAI,GACzC,IAAgB,CAAI;CACtB,GACA,CAAC,GAAY,CAAa,CAC5B,GACM,IAAO,IAAO,GAAO,MAAM,KAAQ,KAAA,GACnC,IAAO,EAAM,QAAS,GAAM,QAAiC,EAAM,IACnE,KAAW,MAAiB,CAAC,KAAW,EAAQ,SAAS,CAAI,GAC7D,KAAU,GAAM,SAAS,UAAU,CAAC,EAAA,CAAG,OAAO,CAAO,GACrD,IAAa,OAAO,QAAQ,GAAM,cAAc,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,OAAO,EAAE,eAAe,EAAE,QAAQ,UAAU,EAAE,SAAS,WAAW,EAAQ,CAAC,CAAC,GAC5I,KAAkB,MAAc,GAAO,UAAU,UAAU,KAAK,MAAM,CAAC,CAAC,GAAO,UAAU,QACzF,KAAkB,MAAiB,EAAM,WAAW,MAAM,MAAM,EAAE,WAAW,GAAG,EAAK,EAAE,CAAC,CAAC,EAAE,MAAM,EAAK,SAAS,CAAC,GAChH,KAAgB,GAAc,MAClC,EAAI;EAAE,GAAG;EAAO,WAAW,CAAC,IAAI,EAAM,aAAa,CAAC,EAAA,CAAG,QAAQ,MAAM,CAAC,EAAE,WAAW,GAAG,EAAK,EAAE,CAAC,GAAG,GAAI,MAAU,KAAA,IAAY,CAAC,IAAI,CAAC,GAAG,EAAK,GAAG,GAAO,CAAE;CAAE,CAAC,GACpJ,KAAe,MAAc;EACjC,IAAM,IAAK,EAAM,QAAQ,SAAS,CAAC;EACnC,EAAI;GAAE,GAAG;GAAO,QAAQ,IAAK,EAAM,OAAQ,QAAQ,MAAM,MAAM,CAAC,IAAI,CAAC,GAAI,EAAM,UAAU,CAAC,GAAI,CAAC;EAAE,CAAC;CACpG,GACM,IAAW,CAAC,EAAE,EAAM,YAAY,EAAM,QAAQ,UAAU,EAAM,WAAW,SACzE,IAAO,SAAe;EAAE,GAAG;EAAO,MAAM,KAAQ,EAAM;EAAM;CAAK,IAAI;EAAC;EAAO;EAAM;CAAI,CAAC;CAC9F,OACE,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EAAxG,UAAA,CACE,kBAAC,OAAD;GAAK,MAAK;GAAU,cAAY,EAAE,iBAAiB;GAAG,WAAU;GAAhE,UAAA;IACE,kBAAC,GAAD;KAAQ,OAAO;KAAM,gBAAgB,MAAM,EAAI;MAAE,GAAG;MAAO,MAAM;KAAc,CAAC;KAAhF,UAAA,CACE,kBAAC,GAAD;MAAe,MAAK;MAAK,cAAY,EAAE,cAAc;MAAG,aAAU;MAChE,UAAA,kBAAC,GAAD,EAAA,WAAe,MAAc,EAAU,GAAG,CAAa,EAAe,CAAA;KACzD,CAAA,GACf,kBAAC,GAAD,EAAA,UACG,EAAM,KAAK,MACV,kBAAC,GAAD;MAAoB,OAAO;MACxB,UAAA,EAAU,GAAG,CAAC;KACL,GAFK,CAEL,CACb,EACY,CAAA,CACT;;IACP,KACC,kBAAC,GAAD;KAAQ,OAAO,EAAM,YAAY;KAAK,gBAAgB,MAAM,EAAI;MAAE,GAAG;MAAO,UAAU,MAAM,IAAM,KAAA,IAAa;KAAa,CAAC;KAA7H,UAAA,CACE,kBAAC,GAAD;MAAe,MAAK;MAAK,cAAY,EAAE,kBAAkB;MAAG,aAAU;MACpE,UAAA,kBAAC,GAAD,EAAA,WAAe,MAAe,MAAM,IAAM,EAAE,qBAAqB,IAAI,EAAa,CAAC,EAAgB,CAAA;KACtF,CAAA,GACf,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MAAY,OAAO;MAAM,UAAA,EAAE,qBAAqB;KAAc,CAAA,GAC7D,EAAO,UAAU,KAAK,MACrB,kBAAC,GAAD;MAAoB,OAAO;MACxB,UAAA,EAAa,CAAC;KACL,GAFK,CAEL,CACb,CACY,EAAA,CAAA,CACT;;IAET,EAAW,KAAK,CAAC,GAAM,OAAO;KAC7B,IAAM,IAAQ,EAAe,CAAI;KAOjC,OANI,EAAE,SAAS,SAEX,kBAAC,GAAD;MAAmB,MAAK;MAAK,SAAS,MAAU,SAAS,YAAY;MAAW,gBAAc,MAAU;MAAQ,eAAe,EAAa,GAAM,MAAU,SAAS,KAAA,IAAY,MAAM;MACpL,UAAA,EAAQ,EAAE,QAAQ,CAAI;KACjB,GAFK,CAEL,IAGV,kBAAC,GAAD;MAAmB,OAAO,KAAS;MAAK,gBAAgB,MAAM,EAAa,GAAM,MAAM,IAAM,KAAA,IAAa,CAAY;MAAtH,UAAA,CACE,kBAAC,GAAD;OAAe,MAAK;OAAK,cAAY,EAAQ,EAAE,QAAQ,CAAI;OAAG,aAAU;OAAoB,aAAW;OACrG,UAAA,kBAAC,GAAD,EAAA,WAAe,MAAe,MAAM,IAAM,EAAQ,EAAE,QAAQ,CAAI,IAAI,EAAQ,EAAE,QAAQ,CAAC,EAAgB,CAAA;MAC1F,CAAA,GACf,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;OAAY,OAAO;OAAM,UAAA,EAAE,aAAa;MAAc,CAAA,GACrD,EAAE,OAAQ,KAAK,MACd,kBAAC,GAAD;OAAoB,OAAO;OACxB,UAAA,EAAQ,EAAE,QAAQ,CAAC;MACV,GAFK,CAEL,CACb,CACY,EAAA,CAAA,CACT;KAZK,GAAA,CAYL;IAEZ,CAAC;IACA,EAAO,KAAK,MAAM;KACjB,IAAM,IAAK,CAAC,CAAC,EAAM,QAAQ,SAAS,CAAC;KACrC,OACE,kBAAC,GAAD;MAAgB,MAAK;MAAK,SAAS,IAAK,YAAY;MAAW,gBAAc;MAAI,eAAe,EAAY,CAAC;MAAG,aAAU;MACvH,UAAA,EAAQ,EAAE,QAAQ,CAAC;KACd,GAFK,CAEL;IAEZ,CAAC;IACA,KACC,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,eAAe;MACb,IAAM,EAAE,UAAU,GAAI,QAAQ,GAAI,WAAW,GAAI,GAAG,MAAS;MAC7D,EAAI,CAAI;KACV;KAEC,UAAA,EAAE,eAAe;IACZ,CAAA;GAEP;EACL,CAAA,GAAA,kBAAC,GAAD;GAAa,GAAI;GAAG,OAAO;EAAO,CAAA,CAClB;;AAEtB"}
+{"version":3,"file":"listing.js","names":[],"sources":["../../../src/components/content/listing.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { ContentQuery, ListSort } from \"../../client/discovery.js\";\nimport { useLanguageName, useMessages } from \"../../i18n/context.js\";\nimport type { MessageKey, Translator } from \"../../i18n/messages.js\";\nimport { useKinds } from \"../../react/groups.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"#ckui/ui/select\";\nimport { labelOf } from \"../groups/parts.js\";\nimport { ContentGrid, type CardListProps, type LockedCards } from \"./grid.js\";\n\nconst SORTS: readonly ListSort[] = [\"newest\", \"popular:7d\", \"popular:30d\", \"popular\", \"top_rated\", \"most_favorited\", \"title\", \"oldest\"];\nconst ANY = \"*\";\n\n/** A sort's name: \"Newest\", \"Popular, this week\", \"Best match\". */\nexport function sortLabel(m: Translator, sort: ListSort | \"relevance\"): string {\n  const [base, period] = sort.split(\":\");\n  const name = m.t(`listing.sort_${base}` as MessageKey);\n  return period ? m.t(\"listing.sortPeriod\", { sort: name, period: m.t(`listing.period_${period}` as MessageKey) }) : name;\n}\n\nexport interface SortMenuProps<S extends string> {\n  value: S;\n  /** The sorts offered, in menu order. */\n  sorts: readonly S[];\n  onChange: (sort: S) => void;\n  /** A sort's name; default the list sorts' names. */\n  label?: (sort: S) => string;\n  className?: string;\n}\n\n/** A list's sort control; hosts keep the choice (URL, remembered per page type). */\nexport function SortMenu<S extends string>({ value, sorts, onChange, label, className }: SortMenuProps<S>) {\n  const m = useMessages();\n  const name = label ?? ((s: S) => sortLabel(m, s as ListSort));\n  return (\n    <Select value={value} onValueChange={(v) => onChange(v as S)}>\n      <SelectTrigger size=\"sm\" aria-label={m.t(\"listing.sort\")} className={className} data-ckui=\"listing-sort\">\n        <SelectValue>{(v: string) => name(v as S)}</SelectValue>\n      </SelectTrigger>\n      <SelectContent>\n        {sorts.map((s) => (\n          <SelectItem key={s} value={s}>\n            {name(s)}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n\nexport interface ContentListingProps extends CardListProps {\n  /** The listed kind: its version traits and filterable attributes become filters, its sort the default. */\n  kind?: string;\n  /** The sort and filters; with onQueryChange the host keeps them (e.g. in the URL). Other fields (groups, a tag page's) pass through. A changed query starts again at page 1: a host keeping the page drops it with the query. */\n  query?: ContentQuery;\n  onQueryChange?: (query: ContentQuery) => void;\n  /** The sorts offered; default newest, popular (week, month, all time), top rated, most favorited, title, oldest. */\n  sorts?: readonly ListSort[];\n  /** Cards the reader doesn't open: show (default), hide or collapse. */\n  locked?: LockedCards;\n  /** Offer a language filter; default when the site has several languages. */\n  languages?: boolean;\n  /** The traits and attributes offered; default every trait and filterable attribute of the kind. */\n  filters?: readonly string[];\n}\n\n/** A listing page: sort, language, trait and attribute filters over a paged grid of a kind's contents. */\nexport function ContentListing({ kind, query: controlled, onQueryChange, sorts = SORTS, languages, filters, ...p }: ContentListingProps) {\n  const m = useMessages();\n  const { t } = m;\n  const languageName = useLanguageName();\n  const { kinds: model } = useKinds({ client: p.client });\n  const [own, setOwn] = useState<ContentQuery>({});\n  const query = controlled ?? own;\n  const set = useCallback(\n    (next: ContentQuery) => {\n      if (controlled === undefined) setOwn(next);\n      onQueryChange?.(next);\n    },\n    [controlled, onQueryChange],\n  );\n  const spec = kind ? model?.kinds[kind] : undefined;\n  const sort: ListSort = query.sort ?? (spec?.sort as ListSort | undefined) ?? sorts[0] ?? \"newest\";\n  const offered = (name: string) => !filters || filters.includes(name);\n  const traits = (spec?.versions.traits ?? []).filter(offered);\n  const attributes = Object.entries(spec?.attributes ?? {}).filter(([n, a]) => a.filterable && (a.values?.length || a.type === \"bool\") && offered(n));\n  const languageFilter = (languages ?? (model?.languages.length ?? 0) > 1) && !!model?.languages.length;\n  const attributeValue = (name: string) => query.attribute?.find((a) => a.startsWith(`${name}:`))?.slice(name.length + 1);\n  const setAttribute = (name: string, value: string | undefined) =>\n    set({ ...query, attribute: [...(query.attribute ?? []).filter((a) => !a.startsWith(`${name}:`)), ...(value === undefined ? [] : [`${name}:${value}`])] });\n  const toggleTrait = (x: string) => {\n    const on = query.traits?.includes(x);\n    set({ ...query, traits: on ? query.traits!.filter((y) => y !== x) : [...(query.traits ?? []), x] });\n  };\n  const filtered = !!(query.language || query.traits?.length || query.attribute?.length);\n  const list = useMemo(() => ({ ...query, kind: kind ?? query.kind, sort }), [query, kind, sort]);\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"content-listing\">\n      <div role=\"toolbar\" aria-label={t(\"listing.filters\")} className=\"flex flex-wrap items-center gap-2\">\n        <SortMenu<ListSort> value={sort} sorts={sorts} onChange={(s) => set({ ...query, sort: s })} />\n        {languageFilter && (\n          <Select value={query.language ?? ANY} onValueChange={(v) => set({ ...query, language: v === ANY ? undefined : (v as string) })}>\n            <SelectTrigger size=\"sm\" aria-label={t(\"listing.language\")} data-ckui=\"listing-language\">\n              <SelectValue>{(v: string) => (v === ANY ? t(\"listing.anyLanguage\") : languageName(v))}</SelectValue>\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value={ANY}>{t(\"listing.anyLanguage\")}</SelectItem>\n              {model!.languages.map((l) => (\n                <SelectItem key={l} value={l}>\n                  {languageName(l)}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        )}\n        {attributes.map(([name, a]) => {\n          const value = attributeValue(name);\n          if (a.type === \"bool\")\n            return (\n              <Button key={name} size=\"sm\" variant={value === \"true\" ? \"default\" : \"outline\"} aria-pressed={value === \"true\"} onClick={() => setAttribute(name, value === \"true\" ? undefined : \"true\")}>\n                {labelOf(p.labels, name)}\n              </Button>\n            );\n          return (\n            <Select key={name} value={value ?? ANY} onValueChange={(v) => setAttribute(name, v === ANY ? undefined : (v as string))}>\n              <SelectTrigger size=\"sm\" aria-label={labelOf(p.labels, name)} data-ckui=\"listing-attribute\" data-name={name}>\n                <SelectValue>{(v: string) => (v === ANY ? labelOf(p.labels, name) : labelOf(p.labels, v))}</SelectValue>\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value={ANY}>{t(\"listing.any\")}</SelectItem>\n                {a.values!.map((v) => (\n                  <SelectItem key={v} value={v}>\n                    {labelOf(p.labels, v)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          );\n        })}\n        {traits.map((x) => {\n          const on = !!query.traits?.includes(x);\n          return (\n            <Button key={x} size=\"sm\" variant={on ? \"default\" : \"outline\"} aria-pressed={on} onClick={() => toggleTrait(x)} data-ckui=\"listing-trait\">\n              {labelOf(p.labels, x)}\n            </Button>\n          );\n        })}\n        {filtered && (\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            onClick={() => {\n              const { language: _l, traits: _t, attribute: _a, ...rest } = query;\n              set(rest);\n            }}\n          >\n            {t(\"listing.clear\")}\n          </Button>\n        )}\n      </div>\n      <ContentGrid {...p} query={list} />\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}

package/dist/components/content/offer-fields.js

@@ -4,14 +4,14 @@ import { Badge as n } from "../../ui/badge.js";
 import { Input as r } from "../../ui/input.js";
 import { Label as i } from "../../ui/label.js";
 import { Select as a, SelectContent as o, SelectItem as s, SelectTrigger as c, SelectValue as l } from "../../ui/select.js";
-import { useDraft as u } from "../../react/use-draft.js";
-import { useEditorSaveTask as d } from "./editor-save.js";
-import { priceLabel as f } from "./paywall.js";
+import { priceLabel as u } from "./paywall.js";
+import { useDraft as d } from "../../react/use-draft.js";
+import { useEditorSaveTask as f } from "./editor-save.js";
 import { useId as p, useMemo as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/content/offer-fields.tsx
 function _({ offer: _, onSell: v, onWithdraw: y, pending: b }) {
-	let x = e(), { t: S } = x, C = p(), w = _ && (_.state ?? "active") === "active" ? _ : void 0, T = u(m(() => ({
+	let x = e(), { t: S } = x, C = p(), w = _ && (_.state ?? "active") === "active" ? _ : void 0, T = d(m(() => ({
 		amount: w?.terms.amount ?? "",
 		currency: w?.terms.currency ?? "USD",
 		mode: w?.terms.renew_hours ? "renew" : w?.terms.access_hours ? "rent" : "once",
@@ -33,7 +33,7 @@ function _({ offer: _, onSell: v, onWithdraw: y, pending: b }) {
 			days: k
 		}) : !1;
 	};
-	return d(`offer:${C}`, {
+	return f(`offer:${C}`, {
 		label: S("contentEditor.price"),
 		dirty: T.dirty.length > 0,
 		pending: b,
@@ -51,7 +51,7 @@ function _({ offer: _, onSell: v, onWithdraw: y, pending: b }) {
 					variant: "secondary",
 					children: S("contentEditor.onSale")
 				}),
-				/* @__PURE__ */ h("span", { children: f(x, w.terms) }),
+				/* @__PURE__ */ h("span", { children: u(x, w.terms) }),
 				w.synced === !1 && /* @__PURE__ */ h("span", {
 					className: "text-xs text-muted-foreground",
 					children: S("contentEditor.syncing")

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

@@ -0,0 +1,10 @@
+import { ContentQuery, SearchQuery } from '../../client/discovery.js';
+import { CardListProps } from './grid.js';
+/** ContentGrid's numbered pages: each page with the selection total. */
+export declare function PagedContentGrid({ query, locked, ...p }: CardListProps & {
+    query: ContentQuery;
+}): import('react').JSX.Element;
+/** SearchResults' numbered pages; nothing until the query has text. */
+export declare function PagedSearchResults({ query, ...p }: CardListProps & {
+    query: SearchQuery;
+}): import('react').JSX.Element | null;

package/dist/components/content/paged-grid.js

@@ -0,0 +1,116 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { ContentKitUiRoot as t } from "../../scope.js";
+import { useContentsPage as n, useSearchPage as r } from "../../react/discovery.js";
+import { Pagination as i } from "./pagination.js";
+import { CardGrid as a, cardListMode as o } from "./grid.js";
+import { useMemo as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { cn as f } from "cn";
+//#region src/components/content/paged-grid.tsx
+var p = 24;
+function m(e, t) {
+	let n = JSON.stringify(t), [r, i] = l({
+		key: n,
+		page: 1
+	}), a = r.key === n ? r.page : 1;
+	return [Math.max(1, Math.floor(e.page ?? a)), (t) => {
+		e.page === void 0 && i({
+			key: n,
+			page: t
+		}), e.onPageChange?.(t);
+	}];
+}
+function h({ result: e, page: n, setPage: r, render: o, filterKinds: l, filterLanguage: m, ...h }) {
+	let g = c(null), _ = h.pageSize ?? p, v = e.summary?.total ?? 0, y = s(() => ({
+		...e,
+		summary: e.summary,
+		loadingMore: !1,
+		hasMore: !1,
+		loadMore: async () => {}
+	}), [e]), b = (e, t) => {
+		r(e), t && g.current?.scrollIntoView({
+			block: "start",
+			behavior: "smooth"
+		});
+	}, x = (t) => !e.loading || v > 0 ? /* @__PURE__ */ u(i, {
+		page: n,
+		total: v,
+		atLeast: e.summary?.truncated,
+		pageSize: _,
+		range: !t,
+		pageHref: h.pageHref,
+		onPageChange: (e) => b(e, t)
+	}) : null;
+	return /* @__PURE__ */ d(t, {
+		appearance: h.appearance,
+		className: f("grid gap-4 text-sm", h.className),
+		"data-ckui": "numbered-grid",
+		children: [
+			/* @__PURE__ */ u("div", {
+				ref: g,
+				className: "scroll-mt-20",
+				children: x(!1)
+			}),
+			/* @__PURE__ */ u(a, {
+				...h,
+				className: void 0,
+				list: y,
+				render: o,
+				filterKinds: l,
+				filterLanguage: m
+			}),
+			y.items.length > 0 && x(!0)
+		]
+	});
+}
+function g({ query: e, locked: t = "show", ...r }) {
+	let { page: i, cursor: a, ...c } = e, l = s(() => ({
+		...c,
+		summary: !0,
+		limit: c.limit ?? r.pageSize ?? p,
+		mode: o(t, c.mode)
+	}), [
+		JSON.stringify(c),
+		r.pageSize,
+		t
+	]), [d, f] = m(r, l), g = n(l, d, { client: r.client });
+	return /* @__PURE__ */ u(h, {
+		...r,
+		pageSize: l.limit,
+		locked: t,
+		result: g,
+		page: d,
+		setPage: f,
+		render: JSON.stringify([l, d]),
+		filterKinds: e.kind ? [e.kind] : void 0,
+		filterLanguage: e.display_language ?? e.language
+	});
+}
+function _({ query: t, ...n }) {
+	let { t: i } = e(), { page: a, cursor: c, ...l } = t, d = s(() => ({
+		...l,
+		summary: !0,
+		limit: l.limit ?? n.pageSize ?? p,
+		mode: o(n.locked, l.mode)
+	}), [
+		JSON.stringify(l),
+		n.pageSize,
+		n.locked
+	]), [f, g] = m(n, d), _ = r(d, f, { client: n.client });
+	return t.q.trim() ? /* @__PURE__ */ u(h, {
+		surface: "search",
+		empty: i("contents.noResults", { q: t.q.trim() }),
+		...n,
+		pageSize: d.limit,
+		result: _,
+		page: f,
+		setPage: g,
+		render: JSON.stringify([d, f]),
+		filterKinds: t.kind ? [t.kind] : void 0,
+		filterLanguage: t.display_language ?? t.language
+	}) : null;
+}
+//#endregion
+export { g as PagedContentGrid, _ as PagedSearchResults };
+
+//# sourceMappingURL=paged-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paged-grid.js","names":[],"sources":["../../../src/components/content/paged-grid.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useMemo, useRef, useState } from \"react\";\nimport type { ContentQuery, SearchQuery } from \"../../client/discovery.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useContentsPage, useSearchPage, type UseContentsPage } from \"../../react/discovery.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { CardGrid, cardListMode, type CardListProps } from \"./grid.js\";\nimport { Pagination } from \"./pagination.js\";\n\nconst NUMBERED_PAGE_SIZE = 24;\n\n/** The page a list shows: the host's, else its own, which starts again when the query changes. */\nfunction usePage(p: CardListProps, query: unknown): [number, (page: number) => void] {\n  const key = JSON.stringify(query);\n  const [own, setOwn] = useState({ key, page: 1 });\n  const ownPage = own.key === key ? own.page : 1;\n  const page = Math.max(1, Math.floor(p.page ?? ownPage));\n  return [\n    page,\n    (next) => {\n      if (p.page === undefined) setOwn({ key, page: next });\n      p.onPageChange?.(next);\n    },\n  ];\n}\n\nfunction NumberedCards({\n  result,\n  page,\n  setPage,\n  render,\n  filterKinds,\n  filterLanguage,\n  ...p\n}: CardListProps & { result: UseContentsPage; page: number; setPage: (page: number) => void; render: string; filterKinds?: readonly string[]; filterLanguage?: string }) {\n  const top = useRef<HTMLDivElement>(null);\n  const size = p.pageSize ?? NUMBERED_PAGE_SIZE;\n  const total = result.summary?.total ?? 0;\n  const list = useMemo(\n    () => ({ ...result, summary: result.summary, loadingMore: false, hasMore: false, loadMore: async () => {} }),\n    [result],\n  );\n  const go = (next: number, scroll: boolean) => {\n    setPage(next);\n    if (scroll) top.current?.scrollIntoView({ block: \"start\", behavior: \"smooth\" });\n  };\n  const controls = (bottom: boolean) =>\n    !result.loading || total > 0 ? (\n      <Pagination page={page} total={total} atLeast={result.summary?.truncated} pageSize={size} range={!bottom} pageHref={p.pageHref} onPageChange={(n) => go(n, bottom)} />\n    ) : null;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"numbered-grid\">\n      <div ref={top} className=\"scroll-mt-20\">\n        {controls(false)}\n      </div>\n      <CardGrid {...p} className={undefined} list={list} render={render} filterKinds={filterKinds} filterLanguage={filterLanguage} />\n      {list.items.length > 0 && controls(true)}\n    </ContentKitUiRoot>\n  );\n}\n\n/** ContentGrid's numbered pages: each page with the selection total. */\nexport function PagedContentGrid({ query, locked = \"show\", ...p }: CardListProps & { query: ContentQuery }) {\n  const { page: _page, cursor: _cursor, ...base } = query;\n  const q = useMemo<ContentQuery>(\n    () => ({ ...base, summary: true, limit: base.limit ?? p.pageSize ?? NUMBERED_PAGE_SIZE, mode: cardListMode(locked, base.mode) }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(base), p.pageSize, locked],\n  );\n  const [page, setPage] = usePage(p, q);\n  const result = useContentsPage(q, page, { client: p.client });\n  return (\n    <NumberedCards\n      {...p}\n      pageSize={q.limit}\n      locked={locked}\n      result={result}\n      page={page}\n      setPage={setPage}\n      render={JSON.stringify([q, page])}\n      filterKinds={query.kind ? [query.kind] : undefined}\n      filterLanguage={query.display_language ?? query.language}\n    />\n  );\n}\n\n/** SearchResults' numbered pages; nothing until the query has text. */\nexport function PagedSearchResults({ query, ...p }: CardListProps & { query: SearchQuery }) {\n  const { t } = useMessages();\n  const { page: _page, cursor: _cursor, ...base } = query;\n  const q = useMemo<SearchQuery>(\n    () => ({ ...base, summary: true, limit: base.limit ?? p.pageSize ?? NUMBERED_PAGE_SIZE, mode: cardListMode(p.locked, base.mode) }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(base), p.pageSize, p.locked],\n  );\n  const [page, setPage] = usePage(p, q);\n  const result = useSearchPage(q, page, { client: p.client });\n  if (!query.q.trim()) return null;\n  return (\n    <NumberedCards\n      surface=\"search\"\n      empty={t(\"contents.noResults\", { q: query.q.trim() })}\n      {...p}\n      pageSize={q.limit}\n      result={result}\n      page={page}\n      setPage={setPage}\n      render={JSON.stringify([q, page])}\n      filterKinds={query.kind ? [query.kind] : undefined}\n      filterLanguage={query.display_language ?? query.language}\n    />\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+export interface PaginationProps {
+    /** The current page, from 1. */
+    page: number;
+    /** Every item the pages hold; a lower bound with atLeast. */
+    total: number;
+    pageSize: number;
+    /** total is a lower bound: more pages may follow the last known one. */
+    atLeast?: boolean;
+    onPageChange: (page: number) => void;
+    /** Each page's link, for crawlers and opening in a new tab; clicks still call onPageChange. */
+    pageHref?: (page: number) => string;
+    /** Show "Showing X–Y of Z"; default true. */
+    range?: boolean;
+    className?: string;
+}
+/** The page numbers shown: first, last and two either side of the current one, with gaps. */
+export declare function pageWindow(page: number, last: number): (number | "gap")[];
+/** Numbered page controls with the shown range, for lists whose page lives in the host's URL. */
+export declare function Pagination(p: PaginationProps): import('react').JSX.Element | null;

package/dist/components/content/pagination.js

@@ -0,0 +1,97 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { buttonVariants as t } from "../../ui/button.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { cn as i } from "cn";
+import { ArrowLeft01Icon as a, ArrowRight01Icon as o } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as s } from "@hugeicons/react";
+//#region src/components/content/pagination.tsx
+function c(e, t) {
+	let n = new Set([
+		1,
+		t,
+		e - 2,
+		e - 1,
+		e,
+		e + 1,
+		e + 2
+	].filter((e) => e >= 1 && e <= t)), r = [], i = 0;
+	for (let e of [...n].sort((e, t) => e - t)) e - i === 2 ? r.push(e - 1) : e - i > 2 && r.push("gap"), r.push(e), i = e;
+	return r;
+}
+function l(l) {
+	let u = e(), { t: d } = u, f = Math.max(1, l.pageSize), p = Math.max(1, Math.ceil(l.total / f)), m = Math.max(1, l.page), h = Math.max(p, m), g = (e) => new Intl.NumberFormat(u.language).format(e);
+	if (l.total === 0 && m === 1) return null;
+	let _ = Math.min(l.total, (m - 1) * f + 1), v = Math.min(l.total, m * f), y = (e, r, a = {}) => {
+		let o = i(t({
+			variant: a.current ? "default" : "ghost",
+			size: "sm"
+		}), "min-w-8 tabular-nums", a.disabled && "pointer-events-none opacity-50"), s = (t) => {
+			t.defaultPrevented || t.metaKey || t.ctrlKey || t.shiftKey || t.altKey || t.button !== 0 || (t.preventDefault(), !a.disabled && !a.current && l.onPageChange(e));
+		};
+		return l.pageHref && !a.disabled ? /* @__PURE__ */ n("a", {
+			href: l.pageHref(e),
+			className: o,
+			"aria-current": a.current ? "page" : void 0,
+			"aria-label": a.aria,
+			onClick: s,
+			children: r
+		}) : /* @__PURE__ */ n("button", {
+			type: "button",
+			className: o,
+			"aria-current": a.current ? "page" : void 0,
+			"aria-label": a.aria,
+			disabled: a.disabled,
+			onClick: s,
+			children: r
+		});
+	};
+	return /* @__PURE__ */ r("nav", {
+		"aria-label": d("listing.pages"),
+		className: i("flex flex-wrap items-center justify-between gap-2 text-sm", l.className),
+		"data-ckui": "pagination",
+		children: [l.range !== !1 && l.total > 0 && /* @__PURE__ */ n("p", {
+			className: "text-muted-foreground tabular-nums",
+			role: "status",
+			children: d(l.atLeast ? "listing.showingAtLeast" : "listing.showing", {
+				from: g(_),
+				to: g(v),
+				total: g(l.total)
+			})
+		}), (h > 1 || l.atLeast) && /* @__PURE__ */ r("div", {
+			className: "ms-auto flex flex-wrap items-center gap-1",
+			children: [
+				y(m - 1, /* @__PURE__ */ n(s, {
+					icon: a,
+					strokeWidth: 2
+				}), {
+					disabled: m <= 1,
+					aria: d("listing.previous")
+				}),
+				c(m, h).map((e, t) => e === "gap" ? /* @__PURE__ */ n("span", {
+					"aria-hidden": !0,
+					className: "px-1 text-muted-foreground",
+					children: "…"
+				}, `gap-${t}`) : /* @__PURE__ */ n("span", { children: y(e, g(e), {
+					current: e === m,
+					aria: d("listing.goToPage", { page: g(e) })
+				}) }, e)),
+				l.atLeast && /* @__PURE__ */ n("span", {
+					"aria-hidden": !0,
+					className: "px-1 text-muted-foreground",
+					children: "…"
+				}),
+				y(m + 1, /* @__PURE__ */ n(s, {
+					icon: o,
+					strokeWidth: 2
+				}), {
+					disabled: m >= h && !l.atLeast,
+					aria: d("listing.next")
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { l as Pagination, c as pageWindow };
+
+//# sourceMappingURL=pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/content/pagination.tsx"],"sourcesContent":["import { ArrowLeft01Icon, ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport type { MouseEvent, ReactNode } from \"react\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { buttonVariants } from \"#ckui/ui/button\";\n\nexport interface PaginationProps {\n  /** The current page, from 1. */\n  page: number;\n  /** Every item the pages hold; a lower bound with atLeast. */\n  total: number;\n  pageSize: number;\n  /** total is a lower bound: more pages may follow the last known one. */\n  atLeast?: boolean;\n  onPageChange: (page: number) => void;\n  /** Each page's link, for crawlers and opening in a new tab; clicks still call onPageChange. */\n  pageHref?: (page: number) => string;\n  /** Show \"Showing X–Y of Z\"; default true. */\n  range?: boolean;\n  className?: string;\n}\n\n/** The page numbers shown: first, last and two either side of the current one, with gaps. */\nexport function pageWindow(page: number, last: number): (number | \"gap\")[] {\n  const shown = new Set([1, last, page - 2, page - 1, page, page + 1, page + 2].filter((n) => n >= 1 && n <= last));\n  const out: (number | \"gap\")[] = [];\n  let previous = 0;\n  for (const n of [...shown].sort((a, b) => a - b)) {\n    if (n - previous === 2) out.push(n - 1);\n    else if (n - previous > 2) out.push(\"gap\");\n    out.push(n);\n    previous = n;\n  }\n  return out;\n}\n\n/** Numbered page controls with the shown range, for lists whose page lives in the host's URL. */\nexport function Pagination(p: PaginationProps) {\n  const m = useMessages();\n  const { t } = m;\n  const size = Math.max(1, p.pageSize);\n  const known = Math.max(1, Math.ceil(p.total / size));\n  const page = Math.max(1, p.page);\n  const last = Math.max(known, page);\n  const format = (n: number) => new Intl.NumberFormat(m.language).format(n);\n  if (p.total === 0 && page === 1) return null;\n  const from = Math.min(p.total, (page - 1) * size + 1);\n  const to = Math.min(p.total, page * size);\n  const control = (target: number, label: ReactNode, o: { current?: boolean; disabled?: boolean; aria?: string } = {}) => {\n    const className = cn(buttonVariants({ variant: o.current ? \"default\" : \"ghost\", size: \"sm\" }), \"min-w-8 tabular-nums\", o.disabled && \"pointer-events-none opacity-50\");\n    const go = (event: MouseEvent) => {\n      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return;\n      event.preventDefault();\n      if (!o.disabled && !o.current) p.onPageChange(target);\n    };\n    return p.pageHref && !o.disabled ? (\n      <a href={p.pageHref(target)} className={className} aria-current={o.current ? \"page\" : undefined} aria-label={o.aria} onClick={go}>\n        {label}\n      </a>\n    ) : (\n      <button type=\"button\" className={className} aria-current={o.current ? \"page\" : undefined} aria-label={o.aria} disabled={o.disabled} onClick={go}>\n        {label}\n      </button>\n    );\n  };\n  return (\n    <nav aria-label={t(\"listing.pages\")} className={cn(\"flex flex-wrap items-center justify-between gap-2 text-sm\", p.className)} data-ckui=\"pagination\">\n      {p.range !== false && p.total > 0 && (\n        <p className=\"text-muted-foreground tabular-nums\" role=\"status\">\n          {t(p.atLeast ? \"listing.showingAtLeast\" : \"listing.showing\", { from: format(from), to: format(to), total: format(p.total) })}\n        </p>\n      )}\n      {(last > 1 || p.atLeast) && (\n        <div className=\"ms-auto flex flex-wrap items-center gap-1\">\n          {control(page - 1, <HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2} />, { disabled: page <= 1, aria: t(\"listing.previous\") })}\n          {pageWindow(page, last).map((n, i) =>\n            n === \"gap\" ? (\n              <span key={`gap-${i}`} aria-hidden className=\"px-1 text-muted-foreground\">\n                …\n              </span>\n            ) : (\n              <span key={n}>{control(n, format(n), { current: n === page, aria: t(\"listing.goToPage\", { page: format(n) }) })}</span>\n            ),\n          )}\n          {p.atLeast && <span aria-hidden className=\"px-1 text-muted-foreground\">…</span>}\n          {control(page + 1, <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />, { disabled: page >= last && !p.atLeast, aria: t(\"listing.next\") })}\n        </div>\n      )}\n    </nav>\n  );\n}\n"],"mappings":"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"}

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

@@ -48,6 +48,15 @@ export interface VersionPickerProps {
     className?: string;
     appearance?: ContentKitUiAppearance;
 }
+export interface LanguageFallbackNoticeProps extends Omit<VersionPickerProps, "labels"> {
+    /** The page's language: the notice shows when the shown version doesn't serve it. */
+    language: string;
+}
+/**
+ * A quiet note that the content isn't available in the page's language, which
+ * version it shows instead, and each language it does serve to switch to.
+ */
+export declare function LanguageFallbackNotice({ versions, value, onChange, language, className, appearance }: LanguageFallbackNoticeProps): import('react').JSX.Element | null;
 /**
  * Chooses among a content's versions: a language first when they differ in
  * language, then its variants (traits, labels). The choice is the page's ?v=