@openrails/contentkit-ui 0.96.0 → 0.97.1

package/dist/components/groups/banner.js

@@ -108,12 +108,15 @@ function C(n) {
 		]
 	});
 }
-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, {
+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, {
+		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, {
 		wait: !1,
 		edit: t
-	})), j = () => {
-		w?.revoke?.(), T(null), D(null);
+	})), M = () => {
+		T?.revoke?.(), E(null), O(null);
 	};
 	return /* @__PURE__ */ b("div", {
 		className: x("flex flex-wrap items-center gap-3", d),
@@ -121,12 +124,12 @@ function w({ group: t, slot: n, crop: r = !0, client: c, onError: l, className:
 		"data-slot": n,
 		children: [
 			n === "avatar" ? /* @__PURE__ */ y(p, {
-				group: O,
-				src: g.previews.avatar,
+				group: k,
+				src: S.previews.avatar,
 				className: "size-16"
 			}) : /* @__PURE__ */ y(m, {
-				group: O,
-				src: g.previews.cover,
+				group: k,
+				src: S.previews.cover,
 				className: "aspect-[3/1] w-48"
 			}),
 			/* @__PURE__ */ b("div", {
@@ -138,41 +141,41 @@ function w({ group: t, slot: n, crop: r = !0, client: c, onError: l, className:
 							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(o, {
+							disabled: w.pending,
+							onClick: () => C.current?.click(),
+							children: w.pending ? g("groupEditor.uploading") : g(n === "avatar" ? "groupEditor.uploadAvatar" : "groupEditor.uploadCover")
+						}), A && /* @__PURE__ */ y(o, {
 							type: "button",
 							size: "sm",
 							variant: "ghost",
-							disabled: C.pending,
-							onClick: () => void C.run(() => g.update(n === "cover" ? { cover: {} } : { avatar: {} })),
-							children: h(n === "avatar" ? "groupEditor.removeAvatar" : "groupEditor.coverUseAuto")
+							disabled: w.pending,
+							onClick: () => void w.run(() => S.update(n === "cover" ? { cover: {} } : { avatar: {} })),
+							children: g(n === "avatar" ? "groupEditor.removeAvatar" : "groupEditor.coverUseAuto")
 						})]
 					}),
 					/* @__PURE__ */ y("input", {
-						ref: S,
+						ref: C,
 						type: "file",
 						accept: "image/*",
 						hidden: !0,
-						"aria-label": h(n === "avatar" ? "groupEditor.uploadAvatar" : "groupEditor.uploadCover"),
+						"aria-label": g(n === "avatar" ? "groupEditor.uploadAvatar" : "groupEditor.uploadCover"),
 						onChange: (e) => {
 							let t = e.target.files?.[0];
 							if (e.target.value = "", t) {
-								if (!r) return void A(t);
+								if (!r) return void j(t);
 								i(t).then((e) => {
-									D(t), T(e);
-								}, () => void A(t));
+									O(t), E(e);
+								}, () => void j(t));
 							}
 						}
 					}),
-					/* @__PURE__ */ y(u, { error: C.error })
+					/* @__PURE__ */ y(u, { error: w.error })
 				]
 			}),
 			/* @__PURE__ */ y(s, {
-				open: !!w,
-				onOpenChange: (e) => !e && j(),
-				source: w,
+				open: !!T,
+				onOpenChange: (e) => !e && M(),
+				source: T,
 				aspect: n === "avatar" ? "1:1" : "3:1",
 				aspects: n === "avatar" ? void 0 : [
 					"3:1",
@@ -181,8 +184,8 @@ function w({ group: t, slot: n, crop: r = !0, client: c, onError: l, className:
 				],
 				round: n === "avatar",
 				onConfirm: (e) => {
-					let t = E;
-					j(), t && A(t, e ?? void 0);
+					let t = D;
+					M(), t && j(t, e ?? void 0);
 				}
 			})
 		]

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  /** 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 }: 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 { 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":"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"}

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

@@ -7,6 +7,8 @@ import { Labels } from './parts.js';
 export interface GroupEditorProps {
     /** The group edited; null creates one of `kind`. */
     id: string | null;
+    /** Staff management, including internal entities and their visibility setting. */
+    management?: boolean;
     /** The kind a new group is created as. */
     kind: string;
     /** Languages names and text are written in; default the content model's. */
@@ -37,8 +39,9 @@ export interface GroupMergeDialogProps {
     group: GroupDetail;
     /** Merges into the chosen group: memberships, names, edges and children move, its code redirects. */
     onMerge: (into: GroupCard) => Promise<MergeReport>;
+    management?: boolean;
     language?: string;
     client?: ContentKitClient;
 }
 /** Picks a group of the same kind and merges this one into it, after typing the confirmation word. */
-export declare function GroupMergeDialog({ open, onOpenChange, group, onMerge, language, client }: GroupMergeDialogProps): import('react').JSX.Element;
+export declare function GroupMergeDialog({ open, onOpenChange, group, onMerge, language, client, management }: GroupMergeDialogProps): import('react').JSX.Element;