@openrails/contentkit-ui 0.83.0 → 0.86.0

package/dist/components/groups/banner.js

@@ -2,22 +2,22 @@ import { useMessages as e } from "../../i18n/context.js";
 import { ContentKitUiRoot as t } from "../../scope.js";
 import { ContentKitContext as n, useContentKitClient as r } from "../../react/context.js";
 import { decodeImage as i } from "../../client/image.js";
-import { Button as a } from "../../ui/button.js";
-import { ImageCropDialog as o } from "../image-crop-dialog.js";
-import { Badge as s } from "../../ui/badge.js";
-import { Skeleton as c } from "../../ui/skeleton.js";
-import { ErrorLine as l, contentError as u, useAction as d } from "../social/parts.js";
-import { useGroup as f } from "../../react/groups.js";
+import { useGroup as a } from "../../react/groups.js";
+import { Button as o } from "../../ui/button.js";
+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";
 //#region src/components/groups/banner.tsx
-function S({ group: i, onCheckout: o, onSignIn: c, client: f, onError: p, className: m, appearance: _ }) {
-	let v = e(), { t: S } = v, C = r(f), w = g(n), T = d("membership.join", p), E = i.access;
-	if (!E || E.editor) return null;
-	let D = w?.viewer === null, O = c ?? w?.onSignIn, k = E.offer && Number(E.offer.terms.amount) > 0 ? E.offer : void 0;
+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;
+	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),
@@ -28,7 +28,7 @@ function S({ group: i, onCheckout: o, onSignIn: c, client: f, onError: p, classN
 			children: S("membership.unknown")
 		}) : E.member ? /* @__PURE__ */ b("div", {
 			className: "flex flex-wrap items-center gap-2",
-			children: [/* @__PURE__ */ y(s, { children: S("membership.member") }), !k && /* @__PURE__ */ y(a, {
+			children: [/* @__PURE__ */ y(c, { children: S("membership.member") }), !k && /* @__PURE__ */ y(o, {
 				size: "sm",
 				variant: "ghost",
 				disabled: T.pending,
@@ -40,13 +40,13 @@ function S({ group: i, onCheckout: o, onSignIn: c, client: f, onError: p, classN
 			children: [/* @__PURE__ */ y("p", {
 				className: "text-muted-foreground",
 				children: S(k ? "membership.paidPitch" : "membership.freePitch")
-			}), /* @__PURE__ */ y(a, {
+			}), /* @__PURE__ */ y(o, {
 				size: "sm",
 				className: "justify-self-start",
-				disabled: T.pending || !!k && !o,
+				disabled: T.pending || !!k && !a,
 				onClick: () => {
 					if (D && O) return O();
-					if (k) return o?.({
+					if (k) return a?.({
 						key: E.key,
 						offer: k
 					});
@@ -54,69 +54,69 @@ function S({ group: i, onCheckout: o, onSignIn: c, client: f, onError: p, classN
 				},
 				children: k ? S("membership.joinFor", { price: h(v, k.terms) }) : S("membership.join")
 			})]
-		}), T.error && /* @__PURE__ */ y(l, { children: u(v, T.error) })]
+		}), T.error && /* @__PURE__ */ y(u, { children: d(v, T.error) })]
 	});
 }
 function C(n) {
-	let r = e(), i = f(n.group ? null : n.id, {
+	let r = e(), i = a(n.group ? null : n.id, {
 		language: n.language,
 		client: n.client
-	}), a = n.group ?? i.group;
-	if (!a) return i.error ? /* @__PURE__ */ y(l, { children: u(r, i.error) }) : /* @__PURE__ */ y(c, { className: "h-48 w-full" });
-	let o = a.text.find((e) => e.language === (n.language ?? a.name_language)) ?? a.text.find((e) => e.description), s = a.counts.filter((e) => e.language === (n.language ?? "")).reduce((e, t) => e + t.count, 0);
+	}), 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" });
+	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, {
 		appearance: n.appearance,
 		className: x("grid gap-3 text-sm", n.className),
 		"data-ckui": "group-banner",
-		"data-kind": a.kind,
+		"data-kind": o.kind,
 		children: [
 			/* @__PURE__ */ y(m, {
-				group: a,
+				group: o,
 				className: "aspect-[3/1] w-full"
 			}),
 			/* @__PURE__ */ b("div", {
 				className: "flex flex-wrap items-end gap-4 px-2 sm:px-4",
 				children: [
 					/* @__PURE__ */ y(p, {
-						group: a,
+						group: o,
 						className: "-mt-12 size-20 border-4 border-background sm:-mt-16 sm:size-28"
 					}),
 					/* @__PURE__ */ b("div", {
 						className: "grid min-w-0 flex-1 gap-1",
 						children: [/* @__PURE__ */ y("h1", {
 							className: "text-xl font-semibold break-words",
-							children: a.name || a.slug
+							children: o.name || o.slug
 						}), /* @__PURE__ */ y("p", {
 							className: "text-xs text-muted-foreground tabular-nums",
-							children: r.plural("groups.items", s)
+							children: r.plural("groups.items", c)
 						})]
 					}),
 					/* @__PURE__ */ b("div", {
 						className: "flex flex-wrap items-start gap-2",
 						children: [/* @__PURE__ */ y(S, {
-							group: a,
+							group: o,
 							onCheckout: n.onCheckout,
 							client: n.client
 						}), n.children]
 					})
 				]
 			}),
-			o?.description && /* @__PURE__ */ y("p", {
+			s?.description && /* @__PURE__ */ y("p", {
 				className: "px-2 break-words whitespace-pre-line sm:px-4",
-				children: o.description
+				children: s.description
 			})
 		]
 	});
 }
-function w({ group: t, slot: n, crop: r = !0, client: s, onError: c, className: u }) {
-	let { t: h } = e(), g = f(t.id, { client: s }), S = _(null), C = d("group.save", c), [w, T] = v(null), [E, D] = v(null), O = g.group ?? t, k = n === "cover" ? !!O.cover?.image || !!O.cover?.content_id && !O.cover.auto : !!O.avatar?.image, A = (e, t) => C.run(() => g.uploadImage(n, e, {
+function w({ group: t, slot: n, crop: r = !0, client: c, onError: l, className: d }) {
+	let { t: h } = e(), g = a(t.id, { client: c }), S = _(null), C = f("group.save", l), [w, T] = v(null), [E, D] = v(null), O = g.group ?? t, k = n === "cover" ? !!O.cover?.image || !!O.cover?.content_id && !O.cover.auto : !!O.avatar?.image, A = (e, t) => C.run(() => g.uploadImage(n, e, {
 		wait: !1,
 		edit: t
 	})), j = () => {
 		w?.revoke?.(), T(null), D(null);
 	};
 	return /* @__PURE__ */ b("div", {
-		className: x("flex flex-wrap items-center gap-3", u),
+		className: x("flex flex-wrap items-center gap-3", d),
 		"data-ckui": "group-image-editor",
 		"data-slot": n,
 		children: [
@@ -134,14 +134,14 @@ function w({ group: t, slot: n, crop: r = !0, client: s, onError: c, className:
 				children: [
 					/* @__PURE__ */ b("div", {
 						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ y(a, {
+						children: [/* @__PURE__ */ y(o, {
 							type: "button",
 							size: "sm",
 							variant: "outline",
 							disabled: C.pending,
 							onClick: () => S.current?.click(),
 							children: C.pending ? h("groupEditor.uploading") : h(n === "avatar" ? "groupEditor.uploadAvatar" : "groupEditor.uploadCover")
-						}), k && /* @__PURE__ */ y(a, {
+						}), k && /* @__PURE__ */ y(o, {
 							type: "button",
 							size: "sm",
 							variant: "ghost",
@@ -166,10 +166,10 @@ function w({ group: t, slot: n, crop: r = !0, client: s, onError: c, className:
 							}
 						}
 					}),
-					/* @__PURE__ */ y(l, { error: C.error })
+					/* @__PURE__ */ y(u, { error: C.error })
 				]
 			}),
-			/* @__PURE__ */ y(o, {
+			/* @__PURE__ */ y(s, {
 				open: !!w,
 				onOpenChange: (e) => !e && j(),
 				source: w,

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 { GroupImageSlot } from \"../../client/groups.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. */\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) 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  /** The cover, or a user-owned kind's avatar. */\n  slot: GroupImageSlot;\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 }: GroupImageEditorProps) {\n  const { t } = useMessages();\n  const g = useGroup(group.id, { client });\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":"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"}
+{"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 { GroupImageSlot } from \"../../client/groups.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  /** The cover, or a user-owned kind's avatar. */\n  slot: GroupImageSlot;\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 }: GroupImageEditorProps) {\n  const { t } = useMessages();\n  const g = useGroup(group.id, { client });\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":"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"}

package/dist/components/groups/directory.js

@@ -1,17 +1,17 @@
 import { useMessages as e } from "../../i18n/context.js";
 import { ContentKitUiRoot as t } from "../../scope.js";
-import { Button as n } from "../../ui/button.js";
-import { Skeleton as r } from "../../ui/skeleton.js";
-import { contentError as i } from "../social/parts.js";
-import { LETTERS as a } from "../../client/group-fields.js";
-import { useGroups as o } from "../../react/groups.js";
+import { useGroups as n } from "../../react/groups.js";
+import { Button as r } from "../../ui/button.js";
+import { Skeleton as i } from "../../ui/skeleton.js";
+import { contentError as a } from "../social/parts.js";
+import { LETTERS as o } from "../../client/group-fields.js";
 import { GroupCover as s, GroupLink as c } from "./parts.js";
 import { 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/groups/directory.tsx
 function p(p) {
-	let m = e(), { t: h } = m, [g, _] = l(null), v = p.letter === void 0 ? g : p.letter, y = (e) => p.onLetterChange ? p.onLetterChange(e) : _(e), b = o({
+	let m = e(), { t: h } = m, [g, _] = l(null), v = p.letter === void 0 ? g : p.letter, y = (e) => p.onLetterChange ? p.onLetterChange(e) : _(e), b = n({
 		kind: p.kind,
 		language: p.language,
 		contentKind: p.contentKind,
@@ -31,7 +31,7 @@ function p(p) {
 				"aria-label": h("groups.byLetter"),
 				className: "flex flex-wrap gap-1",
 				"data-ckui": "letters",
-				children: [null, ...a].map((e) => /* @__PURE__ */ u(n, {
+				children: [null, ...o].map((e) => /* @__PURE__ */ u(r, {
 					size: "xs",
 					variant: v === e ? "default" : "ghost",
 					"aria-pressed": v === e,
@@ -44,14 +44,14 @@ function p(p) {
 			b.loading && !b.items.length ? /* @__PURE__ */ u("div", {
 				className: x ? "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3" : "grid gap-2",
 				"aria-busy": !0,
-				children: Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ u(r, { className: x ? "aspect-[3/4] w-full" : "h-6 w-48" }, t))
+				children: Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ u(i, { className: x ? "aspect-[3/4] w-full" : "h-6 w-48" }, t))
 			}) : b.error && !b.items.length ? /* @__PURE__ */ d("div", {
 				role: "alert",
 				className: "grid justify-items-start gap-2",
 				children: [/* @__PURE__ */ u("p", {
 					className: "text-destructive",
-					children: i(m, b.error)
-				}), /* @__PURE__ */ u(n, {
+					children: a(m, b.error)
+				}), /* @__PURE__ */ u(r, {
 					size: "sm",
 					variant: "outline",
 					onClick: b.reload,
@@ -100,7 +100,7 @@ function p(p) {
 				role: "status",
 				children: h("groups.empty")
 			}),
-			b.hasMore && /* @__PURE__ */ u(n, {
+			b.hasMore && /* @__PURE__ */ u(r, {
 				variant: "outline",
 				size: "sm",
 				className: "justify-self-center",