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

package/dist/components/groups/banner.js

@@ -8,39 +8,40 @@ import { ImageCropDialog as s } from "../image-crop-dialog.js";
 import { Badge as c } from "../../ui/badge.js";
 import { Skeleton as l } from "../../ui/skeleton.js";
 import { ErrorLine as u, contentError as d, useAction as f } from "../social/parts.js";
-import { GroupAvatar as p, GroupCover as m } from "./parts.js";
-import { priceLabel as h } from "../content/paywall.js";
-import { useContext as g, useRef as _, useState as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import { cn as x } from "cn";
+import { GroupAvatar as p, GroupCover as m, GroupLink as h } from "./parts.js";
+import { priceLabel as g } from "../content/paywall.js";
+import { ScopedGroups as _ } from "./scoped.js";
+import { useContext as v, useRef as y, useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { cn as C } from "cn";
 //#region src/components/groups/banner.tsx
-function S({ group: i, onCheckout: a, onSignIn: s, client: l, onError: p, className: m, appearance: _ }) {
-	let v = e(), { t: S } = v, C = r(l), w = g(n), T = f("membership.join", p), E = i.access;
+function w({ group: i, onCheckout: a, onSignIn: s, client: l, onError: p, className: m, appearance: h }) {
+	let _ = e(), { t: y } = _, b = r(l), w = v(n), T = f("membership.join", p), E = i.access;
 	if (!E || E.editor || !E.offer && !E.member && !E.unknown) return null;
 	let D = w?.viewer === null, O = s ?? w?.onSignIn, k = E.offer && Number(E.offer.terms.amount) > 0 ? E.offer : void 0;
-	return /* @__PURE__ */ b(t, {
-		appearance: _,
-		className: x("grid gap-2 rounded-lg border border-border p-3 text-sm", m),
+	return /* @__PURE__ */ S(t, {
+		appearance: h,
+		className: C("grid gap-2 rounded-lg border border-border p-3 text-sm", m),
 		"data-ckui": "membership-box",
 		"data-member": E.member,
-		children: [E.unknown ? /* @__PURE__ */ y("p", {
+		children: [E.unknown ? /* @__PURE__ */ x("p", {
 			className: "text-muted-foreground",
-			children: S("membership.unknown")
-		}) : E.member ? /* @__PURE__ */ b("div", {
+			children: y("membership.unknown")
+		}) : E.member ? /* @__PURE__ */ S("div", {
 			className: "flex flex-wrap items-center gap-2",
-			children: [/* @__PURE__ */ y(c, { children: S("membership.member") }), !k && /* @__PURE__ */ y(o, {
+			children: [/* @__PURE__ */ x(c, { children: y("membership.member") }), !k && /* @__PURE__ */ x(o, {
 				size: "sm",
 				variant: "ghost",
 				disabled: T.pending,
-				onClick: () => void T.run(() => C.offers.join(i.id, !1)),
-				children: S("membership.leave")
+				onClick: () => void T.run(() => b.offers.join(i.id, !1)),
+				children: y("membership.leave")
 			})]
-		}) : /* @__PURE__ */ b("div", {
+		}) : /* @__PURE__ */ S("div", {
 			className: "grid gap-2",
-			children: [/* @__PURE__ */ y("p", {
+			children: [/* @__PURE__ */ x("p", {
 				className: "text-muted-foreground",
-				children: S(k ? "membership.paidPitch" : "membership.freePitch")
-			}), /* @__PURE__ */ y(o, {
+				children: y(k ? "membership.paidPitch" : "membership.freePitch")
+			}), /* @__PURE__ */ x(o, {
 				size: "sm",
 				className: "justify-self-start",
 				disabled: T.pending || !!k && !a,
@@ -50,50 +51,59 @@ function S({ group: i, onCheckout: a, onSignIn: s, client: l, onError: p, classN
 						key: E.key,
 						offer: k
 					});
-					T.run(() => C.offers.join(i.id));
+					T.run(() => b.offers.join(i.id));
 				},
-				children: k ? S("membership.joinFor", { price: h(v, k.terms) }) : S("membership.join")
+				children: k ? y("membership.joinFor", { price: g(_, k.terms) }) : y("membership.join")
 			})]
-		}), T.error && /* @__PURE__ */ y(u, { children: d(v, T.error) })]
+		}), T.error && /* @__PURE__ */ x(u, { children: d(_, T.error) })]
 	});
 }
-function C(n) {
+function T(n) {
 	let r = e(), i = a(n.group ? null : n.id, {
 		language: n.language,
 		client: n.client
 	}), o = n.group ?? i.group;
-	if (!o) return i.error ? /* @__PURE__ */ y(u, { children: d(r, i.error) }) : /* @__PURE__ */ y(l, { className: "h-48 w-full" });
+	if (!o) return i.error ? /* @__PURE__ */ x(u, { children: d(r, i.error) }) : /* @__PURE__ */ x(l, { className: "h-48 w-full" });
 	let s = o.text.find((e) => e.language === (n.language ?? o.name_language)) ?? o.text.find((e) => e.description), c = o.counts.filter((e) => e.language === (n.language ?? "")).reduce((e, t) => e + t.count, 0);
-	return /* @__PURE__ */ b(t, {
+	return /* @__PURE__ */ S(t, {
 		appearance: n.appearance,
-		className: x("grid gap-3 text-sm", n.className),
+		className: C("grid gap-3 text-sm", n.className),
 		"data-ckui": "group-banner",
 		"data-kind": o.kind,
 		children: [
-			/* @__PURE__ */ y(m, {
+			/* @__PURE__ */ x(m, {
 				group: o,
 				className: "aspect-[3/1] w-full"
 			}),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ S("div", {
 				className: "flex flex-wrap items-end gap-4 px-2 sm:px-4",
 				children: [
-					/* @__PURE__ */ y(p, {
+					/* @__PURE__ */ x(p, {
 						group: o,
 						className: "-mt-12 size-20 border-4 border-background sm:-mt-16 sm:size-28"
 					}),
-					/* @__PURE__ */ b("div", {
+					/* @__PURE__ */ S("div", {
 						className: "grid min-w-0 flex-1 gap-1",
-						children: [/* @__PURE__ */ y("h1", {
-							className: "text-xl font-semibold break-words",
-							children: o.name || o.slug
-						}), /* @__PURE__ */ y("p", {
-							className: "text-xs text-muted-foreground tabular-nums",
-							children: r.plural("groups.items", c)
-						})]
+						children: [
+							o.scope && /* @__PURE__ */ x(h, {
+								group: o.scope,
+								href: n.href,
+								className: "text-xs text-muted-foreground hover:underline",
+								children: o.scope.name || o.scope.slug
+							}),
+							/* @__PURE__ */ x("h1", {
+								className: "text-xl font-semibold break-words",
+								children: o.name || o.slug
+							}),
+							/* @__PURE__ */ x("p", {
+								className: "text-xs text-muted-foreground tabular-nums",
+								children: r.plural("groups.items", c)
+							})
+						]
 					}),
-					/* @__PURE__ */ b("div", {
+					/* @__PURE__ */ S("div", {
 						className: "flex flex-wrap items-start gap-2",
-						children: [/* @__PURE__ */ y(S, {
+						children: [/* @__PURE__ */ x(w, {
 							group: o,
 							onCheckout: n.onCheckout,
 							client: n.client
@@ -101,60 +111,68 @@ function C(n) {
 					})
 				]
 			}),
-			s?.description && /* @__PURE__ */ y("p", {
+			s?.description && /* @__PURE__ */ x("p", {
 				className: "px-2 break-words whitespace-pre-line sm:px-4",
 				children: s.description
+			}),
+			/* @__PURE__ */ x(_, {
+				group: o,
+				language: n.language,
+				labels: n.labels,
+				href: n.href,
+				client: n.client,
+				className: "px-2 sm:px-4"
 			})
 		]
 	});
 }
-function w({ group: t, slot: n, crop: r = !0, client: c, onError: l, className: d, management: h }) {
-	let { t: g } = e(), S = a(t.id, {
+function E({ group: t, slot: n, crop: r = !0, client: c, onError: l, className: d, management: h }) {
+	let { t: g } = e(), _ = a(t.id, {
 		client: c,
 		management: h
-	}), C = _(null), w = f("group.save", l), [T, E] = v(null), [D, O] = v(null), k = S.group ?? t, A = n === "cover" ? !!k.cover?.image || !!k.cover?.content_id && !k.cover.auto : !!k.avatar?.image, j = (e, t) => w.run(() => S.uploadImage(n, e, {
+	}), v = y(null), w = f("group.save", l), [T, E] = b(null), [D, O] = b(null), k = _.group ?? t, A = n === "cover" ? !!k.cover?.image || !!k.cover?.content_id && !k.cover.auto : !!k.avatar?.image, j = (e, t) => w.run(() => _.uploadImage(n, e, {
 		wait: !1,
 		edit: t
 	})), M = () => {
 		T?.revoke?.(), E(null), O(null);
 	};
-	return /* @__PURE__ */ b("div", {
-		className: x("flex flex-wrap items-center gap-3", d),
+	return /* @__PURE__ */ S("div", {
+		className: C("flex flex-wrap items-center gap-3", d),
 		"data-ckui": "group-image-editor",
 		"data-slot": n,
 		children: [
-			n === "avatar" ? /* @__PURE__ */ y(p, {
+			n === "avatar" ? /* @__PURE__ */ x(p, {
 				group: k,
-				src: S.previews.avatar,
+				src: _.previews.avatar,
 				className: "size-16"
-			}) : /* @__PURE__ */ y(m, {
+			}) : /* @__PURE__ */ x(m, {
 				group: k,
-				src: S.previews.cover,
+				src: _.previews.cover,
 				className: "aspect-[3/1] w-48"
 			}),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ S("div", {
 				className: "grid gap-2",
 				children: [
-					/* @__PURE__ */ b("div", {
+					/* @__PURE__ */ S("div", {
 						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ y(o, {
+						children: [/* @__PURE__ */ x(o, {
 							type: "button",
 							size: "sm",
 							variant: "outline",
 							disabled: w.pending,
-							onClick: () => C.current?.click(),
+							onClick: () => v.current?.click(),
 							children: w.pending ? g("groupEditor.uploading") : g(n === "avatar" ? "groupEditor.uploadAvatar" : "groupEditor.uploadCover")
-						}), A && /* @__PURE__ */ y(o, {
+						}), A && /* @__PURE__ */ x(o, {
 							type: "button",
 							size: "sm",
 							variant: "ghost",
 							disabled: w.pending,
-							onClick: () => void w.run(() => S.update(n === "cover" ? { cover: {} } : { avatar: {} })),
+							onClick: () => void w.run(() => _.update(n === "cover" ? { cover: {} } : { avatar: {} })),
 							children: g(n === "avatar" ? "groupEditor.removeAvatar" : "groupEditor.coverUseAuto")
 						})]
 					}),
-					/* @__PURE__ */ y("input", {
-						ref: C,
+					/* @__PURE__ */ x("input", {
+						ref: v,
 						type: "file",
 						accept: "image/*",
 						hidden: !0,
@@ -169,10 +187,10 @@ function w({ group: t, slot: n, crop: r = !0, client: c, onError: l, className:
 							}
 						}
 					}),
-					/* @__PURE__ */ y(u, { error: w.error })
+					/* @__PURE__ */ x(u, { error: w.error })
 				]
 			}),
-			/* @__PURE__ */ y(s, {
+			/* @__PURE__ */ x(s, {
 				open: !!T,
 				onOpenChange: (e) => !e && M(),
 				source: T,
@@ -192,6 +210,6 @@ function w({ group: t, slot: n, crop: r = !0, client: c, onError: l, className:
 	});
 }
 //#endregion
-export { C as GroupBanner, w as GroupImageEditor, S as MembershipBox };
+export { T as GroupBanner, E as GroupImageEditor, w as MembershipBox };
 
 //# sourceMappingURL=banner.js.map

package/dist/components/groups/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","names":[],"sources":["../../../src/components/groups/banner.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useRef, useState, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { Edit, GroupAccess, GroupDetail, Sale } from \"../../client/generated/wire.js\";\nimport type { EntityImageSlot } from \"../../client/entities.js\";\nimport { decodeImage, type CropSource } from \"../../client/image.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext, useContentKitClient, type ContentKitErrorHandler } from \"../../react/context.js\";\nimport { useGroup } from \"../../react/groups.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Badge } from \"#ckui/ui/badge\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { ImageCropDialog } from \"../image-crop-dialog.js\";\nimport { contentError, ErrorLine, useAction } from \"../social/parts.js\";\nimport { priceLabel } from \"../content/paywall.js\";\nimport { GroupAvatar, GroupCover, type GroupLike } from \"./parts.js\";\n\nexport interface MembershipBoxProps {\n  group: Pick<GroupDetail, \"id\" | \"kind\" | \"name\"> & { access?: GroupAccess };\n  /** Buys a sold membership: the host creates the order through billing-ui. */\n  onCheckout?: (o: { key: string; offer: Sale }) => void;\n  /** Asks a signed-out visitor to sign in; default the provider's. */\n  onSignIn?: () => void;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A group's membership for the reader: member, join free, or join for its price; nothing to join while it sells no membership. */\nexport function MembershipBox({ group, onCheckout, onSignIn, client: own, onError, className, appearance }: MembershipBoxProps) {\n  const m = useMessages();\n  const { t } = m;\n  const client = useContentKitClient(own);\n  const ctx = useContext(ContentKitContext);\n  const join = useAction(\"membership.join\", onError);\n  const a = group.access;\n  if (!a || a.editor || (!a.offer && !a.member && !a.unknown)) return null;\n  const signedOut = ctx?.viewer === null;\n  const signIn = onSignIn ?? ctx?.onSignIn;\n  const offer: Sale | undefined = a.offer && Number(a.offer.terms.amount) > 0 ? a.offer : undefined;\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-2 rounded-lg border border-border p-3 text-sm\", className)} data-ckui=\"membership-box\" data-member={a.member}>\n      {a.unknown ? (\n        <p className=\"text-muted-foreground\">{t(\"membership.unknown\")}</p>\n      ) : a.member ? (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <Badge>{t(\"membership.member\")}</Badge>\n          {!offer && (\n            <Button size=\"sm\" variant=\"ghost\" disabled={join.pending} onClick={() => void join.run(() => client.offers.join(group.id, false))}>\n              {t(\"membership.leave\")}\n            </Button>\n          )}\n        </div>\n      ) : (\n        <div className=\"grid gap-2\">\n          <p className=\"text-muted-foreground\">{t(offer ? \"membership.paidPitch\" : \"membership.freePitch\")}</p>\n          <Button\n            size=\"sm\"\n            className=\"justify-self-start\"\n            disabled={join.pending || (!!offer && !onCheckout)}\n            onClick={() => {\n              if (signedOut && signIn) return signIn();\n              if (offer) return onCheckout?.({ key: a.key, offer });\n              void join.run(() => client.offers.join(group.id));\n            }}\n          >\n            {offer ? t(\"membership.joinFor\", { price: priceLabel(m, offer.terms) }) : t(\"membership.join\")}\n          </Button>\n        </div>\n      )}\n      {join.error && <ErrorLine>{contentError(m, join.error)}</ErrorLine>}\n    </ContentKitUiRoot>\n  );\n}\n\nexport interface GroupBannerProps {\n  /** The group the host already read; or give id. */\n  group?: GroupDetail;\n  id?: string;\n  language?: string;\n  onCheckout?: MembershipBoxProps[\"onCheckout\"];\n  /** Beside the membership box: the host's actions (follow, share, edit). */\n  children?: ReactNode;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A group's page head: its cover across, its avatar, name, description, content count and membership. */\nexport function GroupBanner(p: GroupBannerProps) {\n  const m = useMessages();\n  const read = useGroup(p.group ? null : p.id, { language: p.language, client: p.client });\n  const g = p.group ?? read.group;\n  if (!g) return read.error ? <ErrorLine>{contentError(m, read.error)}</ErrorLine> : <Skeleton className=\"h-48 w-full\" />;\n  const text = g.text.find((x) => x.language === (p.language ?? g.name_language)) ?? g.text.find((x) => x.description);\n  const count = g.counts.filter((c) => c.language === (p.language ?? \"\")).reduce((n, c) => n + c.count, 0);\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 text-sm\", p.className)} data-ckui=\"group-banner\" data-kind={g.kind}>\n      <GroupCover group={g} className=\"aspect-[3/1] w-full\" />\n      <div className=\"flex flex-wrap items-end gap-4 px-2 sm:px-4\">\n        <GroupAvatar group={g} className=\"-mt-12 size-20 border-4 border-background sm:-mt-16 sm:size-28\" />\n        <div className=\"grid min-w-0 flex-1 gap-1\">\n          <h1 className=\"text-xl font-semibold break-words\">{g.name || g.slug}</h1>\n          <p className=\"text-xs text-muted-foreground tabular-nums\">{m.plural(\"groups.items\", count)}</p>\n        </div>\n        <div className=\"flex flex-wrap items-start gap-2\">\n          <MembershipBox group={g} onCheckout={p.onCheckout} client={p.client} />\n          {p.children}\n        </div>\n      </div>\n      {text?.description && <p className=\"px-2 break-words whitespace-pre-line sm:px-4\">{text.description}</p>}\n    </ContentKitUiRoot>\n  );\n}\n\nexport interface GroupImageEditorProps {\n  group: GroupLike;\n  /** Read the entity through the staff management API, including internal entities. */\n  management?: boolean;\n  /** The cover, or a user-owned kind's avatar. */\n  slot: EntityImageSlot;\n  /** Crop before uploading. Default true. */\n  crop?: boolean;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n}\n\n/** A group's cover or avatar for its editors: pick (and crop) an image, upload it and select it; or go back to none (a cover: automatic). */\nexport function GroupImageEditor({ group, slot, crop = true, client, onError, className, management }: GroupImageEditorProps) {\n  const { t } = useMessages();\n  const g = useGroup(group.id, { client, management });\n  const input = useRef<HTMLInputElement>(null);\n  const save = useAction(\"group.save\", onError);\n  const [source, setSource] = useState<CropSource | null>(null);\n  const [file, setFile] = useState<File | null>(null);\n  const shown = g.group ?? group;\n  const set = slot === \"cover\" ? !!shown.cover?.image || (!!shown.cover?.content_id && !shown.cover.auto) : !!shown.avatar?.image;\n  const upload = (f: Blob & { name?: string }, edit?: Edit) => save.run(() => g.uploadImage(slot, f, { wait: false, edit }));\n  const close = () => {\n    source?.revoke?.();\n    setSource(null);\n    setFile(null);\n  };\n  return (\n    <div className={cn(\"flex flex-wrap items-center gap-3\", className)} data-ckui=\"group-image-editor\" data-slot={slot}>\n      {slot === \"avatar\" ? <GroupAvatar group={shown} src={g.previews.avatar} className=\"size-16\" /> : <GroupCover group={shown} src={g.previews.cover} className=\"aspect-[3/1] w-48\" />}\n      <div className=\"grid gap-2\">\n        <div className=\"flex flex-wrap gap-2\">\n          <Button type=\"button\" size=\"sm\" variant=\"outline\" disabled={save.pending} onClick={() => input.current?.click()}>\n            {save.pending ? t(\"groupEditor.uploading\") : t(slot === \"avatar\" ? \"groupEditor.uploadAvatar\" : \"groupEditor.uploadCover\")}\n          </Button>\n          {set && (\n            <Button type=\"button\" size=\"sm\" variant=\"ghost\" disabled={save.pending} onClick={() => void save.run(() => g.update(slot === \"cover\" ? { cover: {} } : { avatar: {} }))}>\n              {t(slot === \"avatar\" ? \"groupEditor.removeAvatar\" : \"groupEditor.coverUseAuto\")}\n            </Button>\n          )}\n        </div>\n        <input\n          ref={input}\n          type=\"file\"\n          accept=\"image/*\"\n          hidden\n          aria-label={t(slot === \"avatar\" ? \"groupEditor.uploadAvatar\" : \"groupEditor.uploadCover\")}\n          onChange={(e) => {\n            const f = e.target.files?.[0];\n            e.target.value = \"\";\n            if (!f) return;\n            if (!crop) return void upload(f);\n            decodeImage(f).then(\n              (s) => {\n                setFile(f);\n                setSource(s);\n              },\n              () => void upload(f),\n            );\n          }}\n        />\n        <ErrorLine error={save.error} />\n      </div>\n      <ImageCropDialog\n        open={!!source}\n        onOpenChange={(open) => !open && close()}\n        source={source}\n        aspect={slot === \"avatar\" ? \"1:1\" : \"3:1\"}\n        aspects={slot === \"avatar\" ? undefined : [\"3:1\", \"16:9\", \"\"]}\n        round={slot === \"avatar\"}\n        onConfirm={(edit) => {\n          const f = file;\n          close();\n          if (f) void upload(f, edit ?? undefined);\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,SAAgB,EAAc,EAAE,UAAO,eAAY,aAAU,QAAQ,GAAK,YAAS,cAAW,iBAAkC;CAC9H,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAS,EAAoB,CAAG,GAChC,IAAM,EAAW,CAAiB,GAClC,IAAO,EAAU,mBAAmB,CAAO,GAC3C,IAAI,EAAM;CAChB,IAAI,CAAC,KAAK,EAAE,UAAW,CAAC,EAAE,SAAS,CAAC,EAAE,UAAU,CAAC,EAAE,SAAU,OAAO;CACpE,IAAM,IAAY,GAAK,WAAW,MAC5B,IAAS,KAAY,GAAK,UAC1B,IAA0B,EAAE,SAAS,OAAO,EAAE,MAAM,MAAM,MAAM,IAAI,IAAI,EAAE,QAAQ,KAAA;CACxF,OACE,kBAAC,GAAD;EAA8B;EAAY,WAAW,EAAG,0DAA0D,CAAS;EAAG,aAAU;EAAiB,eAAa,EAAE;EAAxK,UAAA,CACG,EAAE,UACD,kBAAC,KAAD;GAAG,WAAU;GAAyB,UAAA,EAAE,oBAAoB;EAAK,CAAA,IAC/D,EAAE,SACJ,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD,EAAA,UAAQ,EAAE,mBAAmB,EAAS,CAAA,GACrC,CAAC,KACA,kBAAC,GAAD;IAAQ,MAAK;IAAK,SAAQ;IAAQ,UAAU,EAAK;IAAS,eAAe,KAAK,EAAK,UAAU,EAAO,OAAO,KAAK,EAAM,IAAI,EAAK,CAAC;IAC7H,UAAA,EAAE,kBAAkB;GACf,CAAA,CAEP;EAEL,CAAA,IAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,KAAD;IAAG,WAAU;IAAyB,UAAA,EAAE,IAAQ,yBAAyB,sBAAsB;GAAK,CAAA,GACpG,kBAAC,GAAD;IACE,MAAK;IACL,WAAU;IACV,UAAU,EAAK,WAAY,CAAC,CAAC,KAAS,CAAC;IACvC,eAAe;KACb,IAAI,KAAa,GAAQ,OAAO,EAAO;KACvC,IAAI,GAAO,OAAO,IAAa;MAAE,KAAK,EAAE;MAAK;KAAM,CAAC;KACpD,EAAU,UAAU,EAAO,OAAO,KAAK,EAAM,EAAE,CAAC;IAClD;IAEC,UAAA,IAAQ,EAAE,sBAAsB,EAAE,OAAO,EAAW,GAAG,EAAM,KAAK,EAAE,CAAC,IAAI,EAAE,iBAAiB;GACvF,CAAA,CACL;EAEN,CAAA,GAAA,EAAK,SAAS,kBAAC,GAAD,EAAA,UAAY,EAAa,GAAG,EAAK,KAAK,EAAa,CAAA,CAClD;;AAEtB;AAgBA,SAAgB,EAAY,GAAqB;CAC/C,IAAM,IAAI,EAAY,GAChB,IAAO,EAAS,EAAE,QAAQ,OAAO,EAAE,IAAI;EAAE,UAAU,EAAE;EAAU,QAAQ,EAAE;CAAO,CAAC,GACjF,IAAI,EAAE,SAAS,EAAK;CAC1B,IAAI,CAAC,GAAG,OAAO,EAAK,QAAQ,kBAAC,GAAD,EAAA,UAAY,EAAa,GAAG,EAAK,KAAK,EAAa,CAAA,IAAI,kBAAC,GAAD,EAAU,WAAU,cAAe,CAAA;CACtH,IAAM,IAAO,EAAE,KAAK,MAAM,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,KAAK,EAAE,KAAK,MAAM,MAAM,EAAE,WAAW,GAC7G,IAAQ,EAAE,OAAO,QAAQ,MAAM,EAAE,cAAc,EAAE,YAAY,GAAG,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,CAAC;CACvG,OACE,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EAAe,aAAW,EAAE;EAApI,UAAA;GACE,kBAAC,GAAD;IAAY,OAAO;IAAG,WAAU;GAAuB,CAAA;GACvD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAa,OAAO;MAAG,WAAU;KAAkE,CAAA;KACnG,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,MAAD;OAAI,WAAU;OAAqC,UAAA,EAAE,QAAQ,EAAE;MAAS,CAAA,GACxE,kBAAC,KAAD;OAAG,WAAU;OAA8C,UAAA,EAAE,OAAO,gBAAgB,CAAK;MAAK,CAAA,CAC3F;;KACL,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,GAAD;OAAe,OAAO;OAAG,YAAY,EAAE;OAAY,QAAQ,EAAE;MAAS,CAAA,GACrE,EAAE,QACA;;IACF;;GACJ,GAAM,eAAe,kBAAC,KAAD;IAAG,WAAU;IAAgD,UAAA,EAAK;GAAe,CAAA;EACvF;;AAEtB;AAgBA,SAAgB,EAAiB,EAAE,UAAO,SAAM,UAAO,IAAM,WAAQ,YAAS,cAAW,iBAAqC;CAC5H,IAAM,EAAE,SAAM,EAAY,GACpB,IAAI,EAAS,EAAM,IAAI;EAAE;EAAQ;CAAW,CAAC,GAC7C,IAAQ,EAAyB,IAAI,GACrC,IAAO,EAAU,cAAc,CAAO,GACtC,CAAC,GAAQ,KAAa,EAA4B,IAAI,GACtD,CAAC,GAAM,KAAW,EAAsB,IAAI,GAC5C,IAAQ,EAAE,SAAS,GACnB,IAAM,MAAS,UAAU,CAAC,CAAC,EAAM,OAAO,SAAU,CAAC,CAAC,EAAM,OAAO,cAAc,CAAC,EAAM,MAAM,OAAQ,CAAC,CAAC,EAAM,QAAQ,OACpH,KAAU,GAA6B,MAAgB,EAAK,UAAU,EAAE,YAAY,GAAM,GAAG;EAAE,MAAM;EAAO;CAAK,CAAC,CAAC,GACnH,UAAc;EAGlB,AAFA,GAAQ,SAAS,GACjB,EAAU,IAAI,GACd,EAAQ,IAAI;CACd;CACA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,qCAAqC,CAAS;EAAG,aAAU;EAAqB,aAAW;EAA9G,UAAA;GACG,MAAS,WAAW,kBAAC,GAAD;IAAa,OAAO;IAAO,KAAK,EAAE,SAAS;IAAQ,WAAU;GAAW,CAAA,IAAI,kBAAC,GAAD;IAAY,OAAO;IAAO,KAAK,EAAE,SAAS;IAAO,WAAU;GAAqB,CAAA;GACjL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,GAAD;OAAQ,MAAK;OAAS,MAAK;OAAK,SAAQ;OAAU,UAAU,EAAK;OAAS,eAAe,EAAM,SAAS,MAAM;OAC3G,UAAA,EAAK,UAAU,EAAE,uBAAuB,IAAI,EAAE,MAAS,WAAW,6BAA6B,yBAAyB;MACnH,CAAA,GACP,KACC,kBAAC,GAAD;OAAQ,MAAK;OAAS,MAAK;OAAK,SAAQ;OAAQ,UAAU,EAAK;OAAS,eAAe,KAAK,EAAK,UAAU,EAAE,OAAO,MAAS,UAAU,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;OACnK,UAAA,EAAE,MAAS,WAAW,6BAA6B,0BAA0B;MACxE,CAAA,CAEP;;KACL,kBAAC,SAAD;MACE,KAAK;MACL,MAAK;MACL,QAAO;MACP,QAAA;MACA,cAAY,EAAE,MAAS,WAAW,6BAA6B,yBAAyB;MACxF,WAAW,MAAM;OACf,IAAM,IAAI,EAAE,OAAO,QAAQ;OAC3B,MAAE,OAAO,QAAQ,IACZ,GACL;YAAI,CAAC,GAAM,OAAO,KAAK,EAAO,CAAC;QAC/B,EAAY,CAAC,CAAC,CAAC,MACZ,MAAM;SAEL,AADA,EAAQ,CAAC,GACT,EAAU,CAAC;QACb,SACM,KAAK,EAAO,CAAC,CACrB;OAP+B;MAQjC;KACD,CAAA;KACD,kBAAC,GAAD,EAAW,OAAO,EAAK,MAAQ,CAAA;IAC5B;;GACL,kBAAC,GAAD;IACE,MAAM,CAAC,CAAC;IACR,eAAe,MAAS,CAAC,KAAQ,EAAM;IAC/B;IACR,QAAQ,MAAS,WAAW,QAAQ;IACpC,SAAS,MAAS,WAAW,KAAA,IAAY;KAAC;KAAO;KAAQ;IAAE;IAC3D,OAAO,MAAS;IAChB,YAAY,MAAS;KACnB,IAAM,IAAI;KAEV,AADA,EAAM,GACF,KAAG,EAAY,GAAG,KAAQ,KAAA,CAAS;IACzC;GACD,CAAA;EACE;;AAET"}
+{"version":3,"file":"banner.js","names":[],"sources":["../../../src/components/groups/banner.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useRef, useState, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { Edit, GroupAccess, GroupDetail, Sale } from \"../../client/generated/wire.js\";\nimport type { EntityImageSlot } from \"../../client/entities.js\";\nimport { decodeImage, type CropSource } from \"../../client/image.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext, useContentKitClient, type ContentKitErrorHandler } from \"../../react/context.js\";\nimport { useGroup } from \"../../react/groups.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Badge } from \"#ckui/ui/badge\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { ImageCropDialog } from \"../image-crop-dialog.js\";\nimport { contentError, ErrorLine, useAction } from \"../social/parts.js\";\nimport { priceLabel } from \"../content/paywall.js\";\nimport { GroupAvatar, GroupCover, GroupLink, type GroupLike, type Labels } from \"./parts.js\";\nimport { ScopedGroups } from \"./scoped.js\";\n\nexport interface MembershipBoxProps {\n  group: Pick<GroupDetail, \"id\" | \"kind\" | \"name\"> & { access?: GroupAccess };\n  /** Buys a sold membership: the host creates the order through billing-ui. */\n  onCheckout?: (o: { key: string; offer: Sale }) => void;\n  /** Asks a signed-out visitor to sign in; default the provider's. */\n  onSignIn?: () => void;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A group's membership for the reader: member, join free, or join for its price; nothing to join while it sells no membership. */\nexport function MembershipBox({ group, onCheckout, onSignIn, client: own, onError, className, appearance }: MembershipBoxProps) {\n  const m = useMessages();\n  const { t } = m;\n  const client = useContentKitClient(own);\n  const ctx = useContext(ContentKitContext);\n  const join = useAction(\"membership.join\", onError);\n  const a = group.access;\n  if (!a || a.editor || (!a.offer && !a.member && !a.unknown)) return null;\n  const signedOut = ctx?.viewer === null;\n  const signIn = onSignIn ?? ctx?.onSignIn;\n  const offer: Sale | undefined = a.offer && Number(a.offer.terms.amount) > 0 ? a.offer : undefined;\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-2 rounded-lg border border-border p-3 text-sm\", className)} data-ckui=\"membership-box\" data-member={a.member}>\n      {a.unknown ? (\n        <p className=\"text-muted-foreground\">{t(\"membership.unknown\")}</p>\n      ) : a.member ? (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <Badge>{t(\"membership.member\")}</Badge>\n          {!offer && (\n            <Button size=\"sm\" variant=\"ghost\" disabled={join.pending} onClick={() => void join.run(() => client.offers.join(group.id, false))}>\n              {t(\"membership.leave\")}\n            </Button>\n          )}\n        </div>\n      ) : (\n        <div className=\"grid gap-2\">\n          <p className=\"text-muted-foreground\">{t(offer ? \"membership.paidPitch\" : \"membership.freePitch\")}</p>\n          <Button\n            size=\"sm\"\n            className=\"justify-self-start\"\n            disabled={join.pending || (!!offer && !onCheckout)}\n            onClick={() => {\n              if (signedOut && signIn) return signIn();\n              if (offer) return onCheckout?.({ key: a.key, offer });\n              void join.run(() => client.offers.join(group.id));\n            }}\n          >\n            {offer ? t(\"membership.joinFor\", { price: priceLabel(m, offer.terms) }) : t(\"membership.join\")}\n          </Button>\n        </div>\n      )}\n      {join.error && <ErrorLine>{contentError(m, join.error)}</ErrorLine>}\n    </ContentKitUiRoot>\n  );\n}\n\nexport interface GroupBannerProps {\n  /** The group the host already read; or give id. */\n  group?: GroupDetail;\n  id?: string;\n  language?: string;\n  onCheckout?: MembershipBoxProps[\"onCheckout\"];\n  /** Section titles of scoped entities (e.g. \"characters\"); default humanized. */\n  labels?: Labels;\n  /** A group's link (scope, scoped entities); default its canonical path. */\n  href?: (group: GroupLike) => string | undefined;\n  /** Beside the membership box: the host's actions (follow, share, edit). */\n  children?: ReactNode;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A group's page head: its cover across, its avatar, scope, name, description, content count and membership, then the entities it scopes. */\nexport function GroupBanner(p: GroupBannerProps) {\n  const m = useMessages();\n  const read = useGroup(p.group ? null : p.id, { language: p.language, client: p.client });\n  const g = p.group ?? read.group;\n  if (!g) return read.error ? <ErrorLine>{contentError(m, read.error)}</ErrorLine> : <Skeleton className=\"h-48 w-full\" />;\n  const text = g.text.find((x) => x.language === (p.language ?? g.name_language)) ?? g.text.find((x) => x.description);\n  const count = g.counts.filter((c) => c.language === (p.language ?? \"\")).reduce((n, c) => n + c.count, 0);\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 text-sm\", p.className)} data-ckui=\"group-banner\" data-kind={g.kind}>\n      <GroupCover group={g} className=\"aspect-[3/1] w-full\" />\n      <div className=\"flex flex-wrap items-end gap-4 px-2 sm:px-4\">\n        <GroupAvatar group={g} className=\"-mt-12 size-20 border-4 border-background sm:-mt-16 sm:size-28\" />\n        <div className=\"grid min-w-0 flex-1 gap-1\">\n          {g.scope && (\n            <GroupLink group={g.scope} href={p.href} className=\"text-xs text-muted-foreground hover:underline\">\n              {g.scope.name || g.scope.slug}\n            </GroupLink>\n          )}\n          <h1 className=\"text-xl font-semibold break-words\">{g.name || g.slug}</h1>\n          <p className=\"text-xs text-muted-foreground tabular-nums\">{m.plural(\"groups.items\", count)}</p>\n        </div>\n        <div className=\"flex flex-wrap items-start gap-2\">\n          <MembershipBox group={g} onCheckout={p.onCheckout} client={p.client} />\n          {p.children}\n        </div>\n      </div>\n      {text?.description && <p className=\"px-2 break-words whitespace-pre-line sm:px-4\">{text.description}</p>}\n      <ScopedGroups group={g} language={p.language} labels={p.labels} href={p.href} client={p.client} className=\"px-2 sm:px-4\" />\n    </ContentKitUiRoot>\n  );\n}\n\nexport interface GroupImageEditorProps {\n  group: GroupLike;\n  /** Read the entity through the staff management API, including internal entities. */\n  management?: boolean;\n  /** The cover, or a user-owned kind's avatar. */\n  slot: EntityImageSlot;\n  /** Crop before uploading. Default true. */\n  crop?: boolean;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n}\n\n/** A group's cover or avatar for its editors: pick (and crop) an image, upload it and select it; or go back to none (a cover: automatic). */\nexport function GroupImageEditor({ group, slot, crop = true, client, onError, className, management }: GroupImageEditorProps) {\n  const { t } = useMessages();\n  const g = useGroup(group.id, { client, management });\n  const input = useRef<HTMLInputElement>(null);\n  const save = useAction(\"group.save\", onError);\n  const [source, setSource] = useState<CropSource | null>(null);\n  const [file, setFile] = useState<File | null>(null);\n  const shown = g.group ?? group;\n  const set = slot === \"cover\" ? !!shown.cover?.image || (!!shown.cover?.content_id && !shown.cover.auto) : !!shown.avatar?.image;\n  const upload = (f: Blob & { name?: string }, edit?: Edit) => save.run(() => g.uploadImage(slot, f, { wait: false, edit }));\n  const close = () => {\n    source?.revoke?.();\n    setSource(null);\n    setFile(null);\n  };\n  return (\n    <div className={cn(\"flex flex-wrap items-center gap-3\", className)} data-ckui=\"group-image-editor\" data-slot={slot}>\n      {slot === \"avatar\" ? <GroupAvatar group={shown} src={g.previews.avatar} className=\"size-16\" /> : <GroupCover group={shown} src={g.previews.cover} className=\"aspect-[3/1] w-48\" />}\n      <div className=\"grid gap-2\">\n        <div className=\"flex flex-wrap gap-2\">\n          <Button type=\"button\" size=\"sm\" variant=\"outline\" disabled={save.pending} onClick={() => input.current?.click()}>\n            {save.pending ? t(\"groupEditor.uploading\") : t(slot === \"avatar\" ? \"groupEditor.uploadAvatar\" : \"groupEditor.uploadCover\")}\n          </Button>\n          {set && (\n            <Button type=\"button\" size=\"sm\" variant=\"ghost\" disabled={save.pending} onClick={() => void save.run(() => g.update(slot === \"cover\" ? { cover: {} } : { avatar: {} }))}>\n              {t(slot === \"avatar\" ? \"groupEditor.removeAvatar\" : \"groupEditor.coverUseAuto\")}\n            </Button>\n          )}\n        </div>\n        <input\n          ref={input}\n          type=\"file\"\n          accept=\"image/*\"\n          hidden\n          aria-label={t(slot === \"avatar\" ? \"groupEditor.uploadAvatar\" : \"groupEditor.uploadCover\")}\n          onChange={(e) => {\n            const f = e.target.files?.[0];\n            e.target.value = \"\";\n            if (!f) return;\n            if (!crop) return void upload(f);\n            decodeImage(f).then(\n              (s) => {\n                setFile(f);\n                setSource(s);\n              },\n              () => void upload(f),\n            );\n          }}\n        />\n        <ErrorLine error={save.error} />\n      </div>\n      <ImageCropDialog\n        open={!!source}\n        onOpenChange={(open) => !open && close()}\n        source={source}\n        aspect={slot === \"avatar\" ? \"1:1\" : \"3:1\"}\n        aspects={slot === \"avatar\" ? undefined : [\"3:1\", \"16:9\", \"\"]}\n        round={slot === \"avatar\"}\n        onConfirm={(edit) => {\n          const f = file;\n          close();\n          if (f) void upload(f, edit ?? undefined);\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiCA,SAAgB,EAAc,EAAE,UAAO,eAAY,aAAU,QAAQ,GAAK,YAAS,cAAW,iBAAkC;CAC9H,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAS,EAAoB,CAAG,GAChC,IAAM,EAAW,CAAiB,GAClC,IAAO,EAAU,mBAAmB,CAAO,GAC3C,IAAI,EAAM;CAChB,IAAI,CAAC,KAAK,EAAE,UAAW,CAAC,EAAE,SAAS,CAAC,EAAE,UAAU,CAAC,EAAE,SAAU,OAAO;CACpE,IAAM,IAAY,GAAK,WAAW,MAC5B,IAAS,KAAY,GAAK,UAC1B,IAA0B,EAAE,SAAS,OAAO,EAAE,MAAM,MAAM,MAAM,IAAI,IAAI,EAAE,QAAQ,KAAA;CACxF,OACE,kBAAC,GAAD;EAA8B;EAAY,WAAW,EAAG,0DAA0D,CAAS;EAAG,aAAU;EAAiB,eAAa,EAAE;EAAxK,UAAA,CACG,EAAE,UACD,kBAAC,KAAD;GAAG,WAAU;GAAyB,UAAA,EAAE,oBAAoB;EAAK,CAAA,IAC/D,EAAE,SACJ,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD,EAAA,UAAQ,EAAE,mBAAmB,EAAS,CAAA,GACrC,CAAC,KACA,kBAAC,GAAD;IAAQ,MAAK;IAAK,SAAQ;IAAQ,UAAU,EAAK;IAAS,eAAe,KAAK,EAAK,UAAU,EAAO,OAAO,KAAK,EAAM,IAAI,EAAK,CAAC;IAC7H,UAAA,EAAE,kBAAkB;GACf,CAAA,CAEP;EAEL,CAAA,IAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,KAAD;IAAG,WAAU;IAAyB,UAAA,EAAE,IAAQ,yBAAyB,sBAAsB;GAAK,CAAA,GACpG,kBAAC,GAAD;IACE,MAAK;IACL,WAAU;IACV,UAAU,EAAK,WAAY,CAAC,CAAC,KAAS,CAAC;IACvC,eAAe;KACb,IAAI,KAAa,GAAQ,OAAO,EAAO;KACvC,IAAI,GAAO,OAAO,IAAa;MAAE,KAAK,EAAE;MAAK;KAAM,CAAC;KACpD,EAAU,UAAU,EAAO,OAAO,KAAK,EAAM,EAAE,CAAC;IAClD;IAEC,UAAA,IAAQ,EAAE,sBAAsB,EAAE,OAAO,EAAW,GAAG,EAAM,KAAK,EAAE,CAAC,IAAI,EAAE,iBAAiB;GACvF,CAAA,CACL;EAEN,CAAA,GAAA,EAAK,SAAS,kBAAC,GAAD,EAAA,UAAY,EAAa,GAAG,EAAK,KAAK,EAAa,CAAA,CAClD;;AAEtB;AAoBA,SAAgB,EAAY,GAAqB;CAC/C,IAAM,IAAI,EAAY,GAChB,IAAO,EAAS,EAAE,QAAQ,OAAO,EAAE,IAAI;EAAE,UAAU,EAAE;EAAU,QAAQ,EAAE;CAAO,CAAC,GACjF,IAAI,EAAE,SAAS,EAAK;CAC1B,IAAI,CAAC,GAAG,OAAO,EAAK,QAAQ,kBAAC,GAAD,EAAA,UAAY,EAAa,GAAG,EAAK,KAAK,EAAa,CAAA,IAAI,kBAAC,GAAD,EAAU,WAAU,cAAe,CAAA;CACtH,IAAM,IAAO,EAAE,KAAK,MAAM,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,KAAK,EAAE,KAAK,MAAM,MAAM,EAAE,WAAW,GAC7G,IAAQ,EAAE,OAAO,QAAQ,MAAM,EAAE,cAAc,EAAE,YAAY,GAAG,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,CAAC;CACvG,OACE,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EAAe,aAAW,EAAE;EAApI,UAAA;GACE,kBAAC,GAAD;IAAY,OAAO;IAAG,WAAU;GAAuB,CAAA;GACvD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAa,OAAO;MAAG,WAAU;KAAkE,CAAA;KACnG,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACG,EAAE,SACD,kBAAC,GAAD;QAAW,OAAO,EAAE;QAAO,MAAM,EAAE;QAAM,WAAU;QAChD,UAAA,EAAE,MAAM,QAAQ,EAAE,MAAM;OAChB,CAAA;OAEb,kBAAC,MAAD;QAAI,WAAU;QAAqC,UAAA,EAAE,QAAQ,EAAE;OAAS,CAAA;OACxE,kBAAC,KAAD;QAAG,WAAU;QAA8C,UAAA,EAAE,OAAO,gBAAgB,CAAK;OAAK,CAAA;MAC3F;;KACL,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,GAAD;OAAe,OAAO;OAAG,YAAY,EAAE;OAAY,QAAQ,EAAE;MAAS,CAAA,GACrE,EAAE,QACA;;IACF;;GACJ,GAAM,eAAe,kBAAC,KAAD;IAAG,WAAU;IAAgD,UAAA,EAAK;GAAe,CAAA;GACvG,kBAAC,GAAD;IAAc,OAAO;IAAG,UAAU,EAAE;IAAU,QAAQ,EAAE;IAAQ,MAAM,EAAE;IAAM,QAAQ,EAAE;IAAQ,WAAU;GAAgB,CAAA;EAC1G;;AAEtB;AAgBA,SAAgB,EAAiB,EAAE,UAAO,SAAM,UAAO,IAAM,WAAQ,YAAS,cAAW,iBAAqC;CAC5H,IAAM,EAAE,SAAM,EAAY,GACpB,IAAI,EAAS,EAAM,IAAI;EAAE;EAAQ;CAAW,CAAC,GAC7C,IAAQ,EAAyB,IAAI,GACrC,IAAO,EAAU,cAAc,CAAO,GACtC,CAAC,GAAQ,KAAa,EAA4B,IAAI,GACtD,CAAC,GAAM,KAAW,EAAsB,IAAI,GAC5C,IAAQ,EAAE,SAAS,GACnB,IAAM,MAAS,UAAU,CAAC,CAAC,EAAM,OAAO,SAAU,CAAC,CAAC,EAAM,OAAO,cAAc,CAAC,EAAM,MAAM,OAAQ,CAAC,CAAC,EAAM,QAAQ,OACpH,KAAU,GAA6B,MAAgB,EAAK,UAAU,EAAE,YAAY,GAAM,GAAG;EAAE,MAAM;EAAO;CAAK,CAAC,CAAC,GACnH,UAAc;EAGlB,AAFA,GAAQ,SAAS,GACjB,EAAU,IAAI,GACd,EAAQ,IAAI;CACd;CACA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,qCAAqC,CAAS;EAAG,aAAU;EAAqB,aAAW;EAA9G,UAAA;GACG,MAAS,WAAW,kBAAC,GAAD;IAAa,OAAO;IAAO,KAAK,EAAE,SAAS;IAAQ,WAAU;GAAW,CAAA,IAAI,kBAAC,GAAD;IAAY,OAAO;IAAO,KAAK,EAAE,SAAS;IAAO,WAAU;GAAqB,CAAA;GACjL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,GAAD;OAAQ,MAAK;OAAS,MAAK;OAAK,SAAQ;OAAU,UAAU,EAAK;OAAS,eAAe,EAAM,SAAS,MAAM;OAC3G,UAAA,EAAK,UAAU,EAAE,uBAAuB,IAAI,EAAE,MAAS,WAAW,6BAA6B,yBAAyB;MACnH,CAAA,GACP,KACC,kBAAC,GAAD;OAAQ,MAAK;OAAS,MAAK;OAAK,SAAQ;OAAQ,UAAU,EAAK;OAAS,eAAe,KAAK,EAAK,UAAU,EAAE,OAAO,MAAS,UAAU,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;OACnK,UAAA,EAAE,MAAS,WAAW,6BAA6B,0BAA0B;MACxE,CAAA,CAEP;;KACL,kBAAC,SAAD;MACE,KAAK;MACL,MAAK;MACL,QAAO;MACP,QAAA;MACA,cAAY,EAAE,MAAS,WAAW,6BAA6B,yBAAyB;MACxF,WAAW,MAAM;OACf,IAAM,IAAI,EAAE,OAAO,QAAQ;OAC3B,MAAE,OAAO,QAAQ,IACZ,GACL;YAAI,CAAC,GAAM,OAAO,KAAK,EAAO,CAAC;QAC/B,EAAY,CAAC,CAAC,CAAC,MACZ,MAAM;SAEL,AADA,EAAQ,CAAC,GACT,EAAU,CAAC;QACb,SACM,KAAK,EAAO,CAAC,CACrB;OAP+B;MAQjC;KACD,CAAA;KACD,kBAAC,GAAD,EAAW,OAAO,EAAK,MAAQ,CAAA;IAC5B;;GACL,kBAAC,GAAD;IACE,MAAM,CAAC,CAAC;IACR,eAAe,MAAS,CAAC,KAAQ,EAAM;IAC/B;IACR,QAAQ,MAAS,WAAW,QAAQ;IACpC,SAAS,MAAS,WAAW,KAAA,IAAY;KAAC;KAAO;KAAQ;IAAE;IAC3D,OAAO,MAAS;IAChB,YAAY,MAAS;KACnB,IAAM,IAAI;KAEV,AADA,EAAM,GACF,KAAG,EAAY,GAAG,KAAQ,KAAA,CAAS;IACzC;GACD,CAAA;EACE;;AAET"}

package/dist/components/groups/directory.d.ts

@@ -15,8 +15,11 @@ export interface GroupDirectoryProps {
     parent?: string;
     /** Groups scoped by this group (characters of a series). */
     scope?: string;
-    /** Default "name". */
+    /** Default "name". With sorts, the menu's choice; with onSortChange the host keeps it. */
     sort?: GroupSort;
+    /** The sorts offered as a menu; none by default. */
+    sorts?: readonly GroupSort[];
+    onSortChange?: (sort: GroupSort) => void;
     /** The letter bucket shown, a-z or "#", null for every group. With onLetterChange the host keeps it (in its URL). */
     letter?: string | null;
     onLetterChange?: (letter: string | null) => void;
@@ -29,9 +32,16 @@ export interface GroupDirectoryProps {
     /** A group's entry instead of the default one. */
     renderGroup?: (group: GroupCard) => ReactNode;
     pageSize?: number;
+    /** Numbered pages with a shown range instead of load more. */
+    pagination?: "pages";
+    /** The numbered page, from 1; with onPageChange the host keeps it. A changed letter or sort starts again at page 1: a host keeping the page drops it with them. */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Each numbered page's link, for crawlers and opening in a new tab. */
+    pageHref?: (page: number) => string;
     client?: ContentKitClient;
     className?: string;
     appearance?: ContentKitUiAppearance;
 }
-/** A directory of one kind's groups: A-Z buckets, names with content counts or covers, paged. */
+/** A directory of one kind's groups: A-Z buckets, an optional sort, names with content counts or covers, paged. */
 export declare function GroupDirectory(p: GroupDirectoryProps): import('react').JSX.Element;